Web architecture


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web architecture

  1. 1. WebArchitectureCGS 2835 Interdisciplinary Web Development
  2. 2. Web sites are developed with files stored in one common folder. index.html <html> <head> <title>My Page</title>style.css <link href="style.css" rel="stylesheet" type="text/css" /> </head> profile.html <body> me.jpg <img src=“seal.gif” /> index.html seal.gif <a href=“profile.html”>My Profile</a> mysite </body> </html>
  3. 3. WEB SERVERWeb site files are transferred to aWeb server maintaining the relativelocations of connected files. iSpace.ci.fsu.eduSFTP:// Secure File Transfer Protocol username html personal SFTP mysite
  4. 4. In the browser, you request resources using a URL:http://ispace.ci.fsu.edu/~username/mysite/index.html Your html Domain/Server Location in html WEB SERVER Web folder Client iSpace.ci.fsu.edu HTTP REQUEST username html personal Web pages are requested by users mysite using a URL or link. HTTP:// Hyper Text Transfer Protocol URL Uniform Resource Locator
  5. 5. HTTP RESPONSE WEB SERVER iSpace.ci.fsu.edu seal.gif username style.css index.html html personalAn HTML page and referenced filesare delivered to client PC where theyare cached and rendered in a webbrowser.
  6. 6. WEB CLIENT WEB SERVER Client/Server Communication 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> Javascript code may be embedded in<body> HTML, interpreted and run by the </body> client. </html> See www.fsu.edu
  7. 7. WEB CLIENT WEB SERVER Client/Server Communicationindex.html <html> <head><title></title></head> <body> <form name="rez" method="post" action="http://service.cs.fsu.edu/cgibin/testing/ers.cgi"> HTML Forms may be used to collect user data and send it to the server for <input type="submit" name="Submit" value="Continue"> processing. </form) </body> </html>
  8. 8. WEB CLIENT WEB SERVER HTTP REQUEST w/DATA http://iSpace.ci.fsu.edu/username/mysite/index.html?name=geo Including data (after the ? in a URL) is an HTTP GET request. Data sent in an HTTP Request that is hidden is an HTTP POST request
  9. 9. WEB CLIENT WEB SERVER HTTP REQUEST w/DATA PHP PHP code (or other programming language) runs on server, manipulating input and creating HTML output.
  10. 10. WEB CLIENT WEB SERVER HTTP REQUEST w/DATA PHP PHP code is embedded in html code and stored in a .php file. PHP code cannot run on the client browser, PHP is processed server-side
  11. 11. WEB CLIENT WEB SERVER HTTP REQUEST w/DATA Other Programming Languages Other programming languages like Perl, Java, C++, Python, Ruby can also be used to process HTTP requests.
  12. 12. WEB CLIENT WEB SERVER HTTP REQUEST w/DATA DB PHP + MySQL Programs may access data in a database using a database manipulation language (DBML) like MySQL.
  13. 13. WEB CLIENT WEB SERVER HTTP Response Program Output as HTML DBHTML PHP +CSS MySQLJavascriptImages A Web page is created “on the fly” as output from server side software.
  14. 14. REVIEW WEB CLIENT WEB SERVER Client/Server Communication HTTP DBIn the web browser:HTMLHTML FORMS On the web server:IMG: JPG/GIF/PNG Stores filesCSS PHP & OTHER PL’SJAVASCRIPT MYSQL & OTHER DBML’S