Overview/Questions So I got some HTML pages and stuff. How do I - PDF document

CS101 Lecture 04: Web Publishing -or- “How do I make my web page show up on the internet?” John Magee 2 July 2013 1 Overview/Questions – So I got some HTML pages and stuff. How do I make them show up on the web? – What are web servers, anyway? – How do we transfer files to a web server? – Who can see my pages? – URLs, absolute path, and relative path revisited. 2 1

The World Wide Web The World Wide Web A system of interlinked hypertext documents and other resources accessed via the Internet. Uniform Resource Locator (URL) A standard way of specifying the location of a resource, it’s name, and how to get it. Example: http://www.bu.edu/index.html http://bu.facebook.com/login.php 3 Displaying a WWW Page Figure 16.1 A browser retrieving a Web page How do you “visit a website”? 4 2

Displaying a WWW Page – Browser decodes URL to parse out host name and document location. – Browser makes network connection to server. – Client requests resource, and waits for the server to respond (using the hypertext transfer protocol). – Browser parses the response, requests any embedded data, and formats/displays output. 5 Protocol A protocol is a standard way of doing something. Hyper Text Transfer Protocol (HTTP) specifies how to request and deliver content (e.g. web pages). 6 3

Hyper Text Transfer Protocol HTTP is a protocol which specifies requests and responses between clients and servers. It assumes/builds upon: – The Internet exists/computer is connected – Reliable transport of data – Web servers are waiting to service clients HTTP is not limited to web pages -- It can be used to transfer any kind of data. 7 How to Publish a Web Page  Create HTML document, locate ancillary files (e.g images).  Transfer files to web server  Set permissions for read access  Test the URL in your browser 8 4

Recall: Displaying a WWW Page 9 What’s a Web Server? Is it hardware?  yes! Is it software?  yes! How is it both? What hardware is needed? What software is needed? 10 5

What’s a Web Server? Web server: a software application which waits for /responds to HTTP requests. Tim Berners-Lee wrote 2 applications to make the web: – A web browser called WorldWideWeb – A server called HTTPd 11 The first WWW Server at CERN. What’s a Web Server? Today’s web servers use high-performance hardware like this: (fast network and disk access) Pictured: IBM Blade Servers hosting files.myopera.com, photo from Wikipedia 12 6

What’s a web server? The Apache HTTP Server is the most popular web server (since 1996). Roles: – Processing HyperText Transfer Protocol – Logging – Delivering static content from the file system – Running scripts to deliver dynamic content 13 LAMP Model The most common structure for web applications uses this configuration: Linux operating system for a server Apache web server software MySQL database software PHP/Perl/Python scripting language to create dynamic HTML 14 7

How a Web Server Works  Receives HTTP Request  Search for resource (file) on disk  Send HTTP Response (status code + data) – If not found: status 404 (NOT FOUND) – If not permitted: status 403 (FORBIDDEN) – … – Else: status 200 (OK) + send data 15 cs-people.bu.edu Our WWW server is cs-people.bu.edu . The web server has a file system which it searches for a URI (resource pathnames). – /var/www/html/ maps to http://cs-people.bu.edu/ – Subdirectories for individual users:  http://cs-people.bu.edu/<username> – Example:  http://cs-people.bu.edu/mageejo 16 8

Your UNIX Home Directory With the CS UNIX account, each user has a “home” directory: General form: /cs/course/<section>/<username>/ Example: /cs/course/cs101a2/mageejo/ This has a UNIX pseudonym of ~. Also mapped to your Windows Z:/ drive. 17 Your WWW Directory The web server will map this URL: http://cs-people.bu.edu/<username>/ to your CS UNIX’s account’s ~/public_html/ directory (aka Z:/public_html/ on CS lab Windows computers). 18 9

Locate files in Finder/Windows Explorer Find your files on your local computer 19 How to Transfer Files to csa2.bu.edu Use a file transfer client-program: – Fetch (Mac) http://fetchsoftworks.com/ (a free academic license is available) – WinSCP (Windows) http://winscp.net/eng/index.php (also free) - SSH Secure Shell (Windows) 20 10

Connecting by WinSCP: – Hostname: csa2.bu.edu – Be sure to use the “SFTP” protocol 21 WinSCP to csa2.bu.edu After you connect, transfer files by drag’n’drop. Then right- click to set permissions. 22 11

File Protection Users and Groups Many operating systems (for example, Unix) have a concept of users (each with unique username/password). Users are organized into groups. Example: I’m in all of these groups: grad3 cswebapps cs108grades medical snbench cs101web cs108stuff cs101grades cs108 Example: you are in one of these group: cs101a2, cs101a3, cs101a4, cs101a5, cs101b2, cs101b3 or cs101b4 23 File Permissions File Permissions Each file has its own set of permissions for: – Reading, writing or executing – Owner, group, or others – This leads to a 3x3 matrix of permissions: 24 12

Setting Permissions by WinSCP  Right-click to open this dialog  Set the permissions to 644  Use 755 for subdirectories 25 Transferring File by Fetch  Use drag’n’drop interface to transfer files…  Then use the Get Info button to set permissions. 26 13

Setting Permissions by Fetch  Set permissions to 644  Use 755 for subdirectories 27 Testing the Webpage: After uploading the files, test in your browser: There are two special filenames that the web server looks for automatically: – home.html – index.html You can leave off the filename when typing the URL!. 28 14

Troubleshooting  404 Not Found – Check that you typed the URL correctly. – File names are case sensitive on web servers: HELLO.html, hello.HTML, and hello.html are 3 different files names. – Be careful of hidden extensions on Windows computers, so you don’t end up with a file named: index.html.html 29 Troubleshooting  403 Forbidden – Check the file permissions  Files should be 644  Subdirectories should be 755 30 15

Help, my images don’t show up! – Make sure the images work on your own computer. – Check the <img src =“filename.jpg”> tag for typos. – Place images in same folder as HTML pages. – Filenames are case sensitive on web servers! – Check the file permissions for the image file. – Try to type in the URL of the image itself into the web browser. – Warning: NEVER use absolute local paths:  <img src =“z: \public_html\ myimage.jpg”>  <img src =“c: \cs101\ myimage.jpg”> 31 Take-Away Points – Web server – UNIX home directory – File Transfer Protocol – UNIX File Permissions 32 16

Student To Dos Readings:  Reed ch 2, pp 19-35  Reed ch 3, pp 53-57 – HW 01 is a take-home quiz, due by Monday 7/8 @ 11:59pm. – No Class on Thursday 7/4 or Friday 7/5 (CLASS CANCELLED!) 33 17