Web architecture

Web Architecture Ken Baldauf Program in Interdisciplinary Computing Florida State University clients, servers, files, folders, urls and more

Web pages and sites are made up of multiple files and are typically developed on a PC with the files stored in one common folder. Note: Web pages on your PC can be viewed with a Web browser by choosing “Open File…” from the File menu. mysite index.html me.jpg profile.html seal.gif style.css

Web pages and sites are made up of multiple files and are typically developed on a PC with the files stored in one common folder. Components of a Web page and Web site are linked to each other using HTML code. A Web browser like Firefox interprets HTML code and assembles pages to be viewed. mysite index.html me.jpg profile.html seal.gif style.css

Once these references and links between files are created, the files must maintain their relative position to each other within the Web site folder. HTML CODE mysite index.html me.jpg profile.html seal.gif index.html <html> <head> <title>My Page</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html> <a href=“profile.html”>My Profile</a> <img src=“seal.gif” /> style.css

This simple Web site folder, “mysite,” contains three files – index, profile, and resume, and two folders – an image folder containing three more files, and a styles folder containing two more files.

The file index.html is the main Web page that is displayed when the Web site is accessed. It will likely contain a reference to images/banner.png. This type of reference is referred to as a local , or relative reference since banner.png is within the local site, and images/banner.png describes where the file is located relative to index.html, the file that references it. When a Web page references a page that is outside the local domain, such as http://www.fsu.edu , it is referred to as an absolute reference

WEB SERVER SFTP Web sites are copied from the PC on which they are developed to a Web server so that the world can access them. SFTP software is used to make the transfer. mysite

PC File System Server File System SFTP software like SSH connect to a Web server and allow you to click and drag files and folders from your PC to the server.

WEB SERVER Web server software, along with the Domain Name System (DNS) are used to translate URL’s to physical location addresses on the server. SFTP iSpace.ci.fsu.edu username personal html mysite mysite

WEB SERVER The Web server used for this class is called iSpace. Each student has a folder, also called a directory, on iSpace named after the student’s FSU username. In that folder is a folder named “html” where students store their Web sites for public access. SFTP iSpace.ci.fsu.edu username personal html mysite SFTP mysite

Client/Server Communication WEB SERVER WEB CLIENT Web browser software like Internet Explorer and Firefox, is called Web Client software . Web client software communicate with Web servers to access Web content.

Client/Server Communication iSPACE WEB SERVER WEB CLIENT ispace maps any Web client request for ~username to the “html” folder of that user. http://ispace.ci.fsu.edu/~username username/html

URL Decoded: http://ispace.ci.fsu.edu/~username/mysite/index.html Web Client WEB SERVER HTML REQUEST location in html Domain/Server the html folder iSpace.ci.fsu.edu username personal html mysite

WEB SERVER HTML RESPONSE HTML page and referenced files are delivered to client PC where they are viewed and cached for future access. index.html seal.gif style.css iSpace.ci.fsu.edu username personal html

Important Points Web pages and sites are made up of interconnected files Web site files must maintain their location relative to one another within the Web site folder Web site are typically developed on a PC and copied to a Web server Web client software requests Web pages from Web servers using a URL Web server software and the DNS translate URLs to physical storage locations on Web servers URL ispace.ci.fsu.edu/~username = username/html on iSpace

Beyond the scope of our class – but good to understand. Web Programming

Client/Server Communication WEB SERVER WEB CLIENT Javascript code may be embedded in HTML, interpreted and run by the client. See www.fsu.edu index.html <html> <head><title></title> <script type="text/javascript">  </script></head> <body> </body> </html>

Client/Server Communication HTML Forms may be used to collect user data and send it to the server for processing. WEB SERVER WEB CLIENT index.html <html> <head><title></title></head> <body> <form name="rez" method="post" action="http://service.cs.fsu.edu/cgibin/testing/ers.cgi"> <input type="submit" name="Submit" value="Continue"> </form) </body> </html>

http://iSpace.ci.fsu.edu/username/mysite/index.html?name=ken HTML REQUEST w/DATA HTML Forms may be used to collect user data and send it to the server for processing. WEB SERVER WEB CLIENT

HTML REQUEST w/DATA PHP code (or other programming language) runs on server, manipulating input and creating HTML output. PHP WEB SERVER WEB CLIENT

WEB SERVER WEB CLIENT HTML REQUEST w/DATA PHP code is embedded in html code and stored in a .php file. PHP

WEB SERVER WEB CLIENT HTML REQUEST w/DATA Other programming languages (PL’s) like Perl, Java, C++, store code in a separate file on the server and access it using CGI. PHP

WEB SERVER WEB CLIENT HTML REQUEST w/DATA Programs may access data in a database using a database manipulation language (DBML) like MySQL. PHP + MySQL DB

WEB SERVER WEB CLIENT A Web page is created “on the fly” as output from server side software. PHP + MySQL DB Program Output as HTML

Client/Server Communication (X)HTML FORMS IMG: JPG/GIF/PNG CSS JAVASCRIPT JAVA PHP & OTHER PL’S MYSQL & OTHER DBML’S DB WEB SERVER WEB CLIENT REVIEW

Web architecture

More Related Content

What's hot (18)

Viewers also liked (7)

Similar to Web architecture (20)

More from Program in Interdisciplinary Computing (20)

Web architecture