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 <ul><li>Web pages and sites are made up of interconnected files </li></ul><ul><li>Web site files must maintain their location relative to one another within the Web site folder </li></ul><ul><li>Web site are typically developed on a PC and copied to a Web server </li></ul><ul><li>Web client software requests Web pages from Web servers using a URL </li></ul><ul><li>Web server software and the DNS translate URLs to physical storage locations on Web servers </li></ul><ul><li>URL ispace.ci.fsu.edu/~username = username/html on iSpace </li></ul>
Beyond the scope of our class – but good to understand. Web Programming
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
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.