Web architecture v3
- 1. Web Architecture CGS 2835 Interdisciplinary Web Development
- 2. Web Design Visual Design Graphic Design Page Layout Theme HTML, CSS, JS Web Development Coding, Software Client-Side Interactivity Server-Side Information Page Generation Handling Requests Manipulating Data Multiple markup and programming languages Server Administration Scaling requests Networking servers Ensuring reliablity Securing data Backing up data Handling attacks Hardware CGS 2835 Interdisciplinary Web Development
- 3. Protocols • Protocols are methods computers use to talk with each other • HTTP: HyperText Transfer Protocol • HTTPS: HTTP Secure • SSH: Secure Shell Protocol • SFTP: Secure File Transfer Protocol CGS 2835 Interdisciplinary Web Development
- 4. Web sites are developed with files stored in one common folder (or directory). index.html <html> <head> <title>My Page</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> style.css profile.html me.jpg <img src=“seal.gif” /> index.html seal.gif mysite <a href=“profile.html”>My Profile</a> </body> </html>
- 5. Web site files are transferred to a Web server maintaining the relative locations of connected files. SFTP:// Secure File Transfer Protocol When using a web host, you will need to ask where your files need to be uploaded on the web server to be hosted to the web. WEB SERVER iSpace-2013.cci.fsu.edu username html mysite SFTP personal
- 6. In the browser, you request resources with HTTP GET using a URL: http://ispace-2013.cci.fsu.edu/~username/mysite/index.html Domain/Server Web Client WEB SERVER Resource on a server iSpace-2013.cci.fsu.edu HTTP REQUEST HTTP REQUEST username html HTTP:// Hyper Text Transfer Protocol URL Uniform Resource Locator mysite personal
- 7. HTTP RESPONSE HTTP RESPONSE WEB SERVER iSpace-2013.cci.fsu.edu seal.gif style.css username index.html html An HTML page and referenced files are delivered to client PC where they are cached and rendered in a web browser. These resources are requested with HTTP GET personal
- 8. WEB SERVER WEB CLIENT Client/Server Client/Server Communication Communication HTTP GET: Get a resource from a server (HTML, Images, Data) HTTP POST: Post data to a server (logging in to a website, sending information, uploading files) HTTP Responses 200 OK: When the request could be satisfied 403 Forbidden: When the resource is valid, but the user does not have access 404 Not Found: When the resource could not be found 500 Internal Server Error: When there is either a programming error or server problem in fufilling the request
- 9. WEB SERVER WEB CLIENT HTTP REQUEST w/DATA HTTP REQUEST w/DATA http://iSpace-2013.cci.fsu.edu/username/mysite/index.html? name=geo Including data (after the ? in a URL) is an HTTP GET request with extra data to specify what to get from the server Data sent in an HTTP POST is hidden from the URL
- 10. WEB SERVER WEB CLIENT Client/Server Client/Server Communication Communication index.html <html> <head><title></title></head> <body> <form name="rez" method="post" action=”process.php"> <input type="submit" name="Submit" value="Continue"> </form) </body> </html> HTML Forms may be used to collect user data and send it to the server for processing. Forms are most commonly sent to a server with HTTP POST
- 11. WEB SERVER WEB CLIENT Client/Server Client/Server Communication Communication index.html JS <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> JavaScript code is also delivered from a server to a client to provide interactivity on a website
- 12. WEB SERVER WEB CLIENT HTTP REQUEST w/DATA HTTP REQUEST w/DATA PHP PHP code (or other programming language) runs on server, manipulating input and creating HTML output.
- 13. WEB SERVER WEB CLIENT HTTP REQUEST w/DATA 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
- 14. WEB SERVER WEB CLIENT HTTP REQUEST w/DATA HTTP REQUEST w/DATA Other Programming Languages Other programming languages like Perl, Java, C++, Python, Ruby can also be used to process HTTP requests.
- 15. WEB SERVER WEB CLIENT HTTP REQUEST w/DATA HTTP REQUEST w/DATA DB DB PHP + MySQL Programs may access data in a database using a database manipulation language (DBML) like MySQL.
- 16. WEB SERVER WEB CLIENT HTTP Response HTTP Response DB DB HTML CSS Javascript Images PHP + MySQL A Web page is created “on the fly” as output from server side software.
- 17. REVIEW WEB SERVER WEB CLIENT In the web browser: HTML HTML FORMS IMG: JPG/GIF/PNG CSS JAVASCRIPT Client/Server Client/Server Communication Communication HTTP HTTP DB DB On the web server: Stores files PHP & OTHER PL’S MYSQL & OTHER DBML’S
Editor's Notes
- #3: http://upload.wikimedia.org/wikipedia/commons/7/7f/Responsive_Web_Design_Logo.svg http://openclipart.org/tags/server%20rack