Homework / Exam • Exam 3 – Solutions Posted – Questions? • HW8 due next class • Final Exam – See posted schedule • Websites on UNIX systems • Course Evaluations 1 Final Exam • Final Exam – See posted day, time, and location – It will be 1-1/2 hours – not 3 hours • Watch your email for any late breaking announcements! • Review HW7 and HW8 • See the posted practice final exam • Review Session Next Class 2 Websites on UNIX Systems • Many websites are hosted on UNIX Systems • My website is supported on our www server in the same way that I will be teaching now • Learn a few basic rules and HTML coding and you can have your own website! • Warning: For your educational or personal use only – No commercial websites allowed! 3 The Big Picture PC/MAC UNIX System Browser Software HTTP Protocol Apache Server Software TCP/IP Software The Internet TCP/IP Software File System HTML Files 4 Browser • • • • • • Browser interacts with user to get URL Browser converts URL to an IP address Opens a connection to IP address and port 80 Sends an HTTP “request” containing URL Receives HTTP “response” containing HTML Interprets and displays the HTML 5 Web Server • Apache server on UNIX system (Typical) – Interacts with browser clients via HTTP – Accesses HTML files on UNIX file system – Standard mapping from URL to path/file name • http://www.cs.umb.edu/~bobw maps to • ~bobw/public_html/index.html – This home page can have links to other pages 6 HTTP Protocol • Application Layer Protocol – Requests – Responses • Sent using TCP connections over IP TCP = Transport Control Protocol IP = Internet Protocol 7 To set up your website • Use mkdir to create a sub-directory on your home directory named: public_html • Edit and save a text file containing HTML document (program) in that directory as: index.html • Use chmod to allow “others” read access • Remember UNIX is case sensitive! 8 Basic HTML Document <html> <head> <title>Display Title</title> </head> <body> Contents of body defines what the browser displays </body> </html> 9 Hello World HMTL File ~yourname/public_html/index.html <html> <head> <title>Your Name’s Hello World Website</title> </head> <body> <p>Hello world!</p> </body> </html> 10 Proper Nesting of <tag> and </tag> <html> <head> <title> … </title> </head> <body> <p> … </p> </body> </html> Start/End on one line is OK Start/End on one line is OK 11 Basic HTML Tags • Various font/format control pairs Headings Level 1 Paragraph Bold Italics Center Text <h1> <p> <b> <i> <center> </h1> </p> </b> </i> </center> • Some format control tags are not a tag pair: Break (new line) <br> 12 Basic HTML Tags • Unordered Lists (Bullets at start of each line) <ul> <li>List Item</li> <li>List Item</li> </ul> • Ordered Lists (Numbers at start of each line) <ol> <li>List Item 1</li> <li>List Item 2</li> </ol> 13 Links to Other Files • Display a hyper-link to another html file: <a href=“filename.html"> Display Text</a> • Display a link to download a non-html file: <a href=“filename.doc”> Display Text</a> • Display an image from a non-html file: <img src="bob.jpg"> (Note: not a tag pair) 14 HTML Forms and/or Get Requests • Forms defined using tags <form> </form> • Many useful form “widgets”: – Text (Free Format Text Entry) – Check Boxes/Radio Boxes (on or off) – Select (Multiple Choice) • Browser submits data to server programs: GET or POST methods • Simple “GET” = URL followed by ?request: e.g.: url?parameter1=value1&parameter2=value2 15 HTML Forms and/or Get Requests • Webpage reflect.html sends either: – A POST request via submitting the form or – A GET request via the encoded URL • Reflect.html form using “post” method: <form name = "reflect" method="post“ action= "http://cgi1.cs.umb.edu/~bobw/cgi-bin/reflect.cgi”> • Reflect.html encoded “get” URL: <a href="http://cgi1.cs.umb.edu/~bobw/cgi-bin/ reflect.cgi?Name=John+Jones&Phone=555-1234"> Get Request to reflect.cgi Program</a> • URL is: http://www.cs.umb.edu/~bobw/reflect.html 16 Dynamic Web Pages • The URL points to an “executable program” file instead of to a “static” HTML document file • The program generates response based on input request parameters and data stored on the server • It writes response in HTML format to stdout • These programs can be scripts PERL, PHP, etc. or Java servlets (e.g. generated from .jsp files) • They can also be compiled C programs! 17 CGI C Programs • Compile your C program with executable file name suffix .cgi (e.g. makefile definition) reflect.cgi: reflect.c makefile gcc -o reflect.cgi reflect.c • Save executable file in a sub-directory in your public_html directory (e.g. “cgi-bin”) 18 CGI C Programs • Environment variable REQUEST_METHOD contains indicator of type of input (Get/Post) • reflect.cgi figures out request method used: char *rm = getenv(“REQUEST_METHOD”); • For a “Get” request, reflect.cgi uses: char *s = getenv(“QUERY_STRING”); • For a “Post” request, reflect.cgi uses: int len = atoi(getenv("CONTENT_LENGTH")); /* and reads len characters via getchar */ 19 CGI C Programs • reflect.cgi just responds to browser with standard html “boilerplate” and a copy of the input data in the body without parsing it: arguments = 1, /home/bobw/public_html/cgi-bin/reflect.cgi cgiRequestMethod = GET QUERY_STRING: Name=John+Jones&Phone=555-1234 • A production cgi program would parse this input data, process it, and provide a response in html to the browser 20 Course Evaluations • Please fill out the course evaluation forms • Give to assigned student for turn-in • Thank you 21