1. Web Architecture Ken Baldauf Program in Interdisciplinary Computing Florida State University clients, servers, files, folders, urls and more
2. 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
3. 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
4. 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
5. 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.
6. 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
7. 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
8. 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.
9. 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
10. 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
11. 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.
12. 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
13. 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
14. 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
15.
16. Beyond the scope of our class – but good to understand. Web Programming
17. 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"> <!--var value1 = 45; var value2 = 60; var sum = value1 + value2; var str = value1; document.write(str); //--> </script></head> <body> </body> </html>
18. 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>
20. HTML REQUEST w/DATA PHP code (or other programming language) runs on server, manipulating input and creating HTML output. PHP WEB SERVER WEB CLIENT
21. WEB SERVER WEB CLIENT HTML REQUEST w/DATA PHP code is embedded in html code and stored in a .php file. PHP
22. 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
23. 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
24. 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
25. 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