Your SlideShare is downloading. ×
Web architecture
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,172
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /> </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. 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
  • 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=&quot;text/javascript&quot;> <!--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=&quot;rez&quot; method=&quot;post&quot; action=&quot;http://service.cs.fsu.edu/cgibin/testing/ers.cgi&quot;> <input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Continue&quot;> </form) </body> </html>
  • 19. 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
  • 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

×