World Wide Web Components Browsers and Servers CGI Processing Model (Common Gateway Interface) © Norman White, 2001.

Slides:



Advertisements
Similar presentations
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Advertisements

Adding Dynamic Content to your Web Site
Browsers and Servers CGI Processing Model ( Common Gateway Interface ) © Norman White, 2013.
Copyright 2004 Monash University IMS5401 Web-based Systems Development Topic 2: Elements of the Web (g) Interactivity.
Browsers and Servers CGI Processing Model ( Common Gateway Interface ) © Norman White, 2013.
A simple PHP application We are going to develop a simple PHP application with a Web interface. The user enters two numbers and the application returns.
HTML Form Processing Learning Web Design – Chapter 9, pp Squirrel Book – Chapter 11, pp
World Wide Web1 Applications World Wide Web. 2 Introduction What is hypertext model? Use of hypertext in World Wide Web (WWW) – HTML. WWW client-server.
1 Web Search Interfaces. 2 Web Search Interface Web search engines of course need a web-based interface. Search page must accept a query string and submit.
Python and Web Programming
CGI Programming: Part 1. What is CGI? CGI = Common Gateway Interface Provides a standardized way for web browsers to: –Call programs on a server. –Pass.
Tutorial 6 Forms Section A - Working with Forms in JavaScript.
CGI Programming Languages Web Based Software Development July 21, 2005 Song, JaeHa.
Form Handling, Validation and Functions. Form Handling Forms are a graphical user interfaces (GUIs) that enables the interaction between users and servers.
JAVASCRIPT HOW TO PROGRAM -2 DR. JOHN P. ABRAHAM UTPA.
Chapter 9 Using Perl for CGI Programming. Computation is required to support sophisticated web applications Computation can be done by the server or the.
1 Homework / Exam Exam 3 –Solutions Posted –Questions? HW8 due next class Final Exam –See posted schedule Websites on UNIX systems Course Evaluations.
PHP Tutorials 02 Olarik Surinta Management Information System Faculty of Informatics.
Reading Data in Web Pages tMyn1 Reading Data in Web Pages A very common application of PHP is to have an HTML form gather information from a website's.
1 CS 3870/CS 5870 Static and Dynamic Web Pages ASP.NET and IIS.
FALL 2005CSI 4118 – UNIVERSITY OF OTTAWA1 Part 4 Web technologies: HTTP, CGI, PHP,Java applets)
WEB FORM DESIGN. Creating forms for a web page For your web project you have to design a form for inclusion on your web site (the form information should.
1 HTML and CGI Scripting CSC8304 – Computing Environments for Bioinformatics - Lecture 10.
1 Forms A form is the usual way that information is gotten from a browser to a server –HTML has tags to create a collection of objects that implement this.
1 CS 3870/CS 5870 Static and Dynamic Web Pages ASP.NET and IIS.
Comp2513 Forms and CGI Server Applications Daniel L. Silver, Ph.D.
Chapter 33 CGI Technology for Dynamic Web Documents There are two alternative forms of retrieving web documents. Instead of retrieving static HTML documents,
10 Adding Interactivity to a Web Site Section 10.1 Define scripting Summarize interactivity design guidelines Identify scripting languages Compare common.
Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.
COMP 321 Week 7. Overview HTML and HTTP Basics Dynamic Web Content ServletsMVC Tomcat in Eclipse Demonstration Lab 7-1 Introduction.
9 Chapter Nine Compiled Web Server Programs. 9 Chapter Objectives Learn about Common Gateway Interface (CGI) Create CGI programs that generate dynamic.
1 In the good old days... Years ago… the WWW was made up of (mostly) static documents. –Each URL corresponded to a single file stored on some hard disk.
CS4273: Distributed System Technologies and Programming I Lecture 7: Java Networking.
Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and check boxes using HTML Add a pull-down.
Lecture # 6 Forms, Widgets and Event Handling. Today Questions: From notes/reading/life? Share Personal Web Page (if not too personal) 1.Introduce: How.
HTML Hyper Text Markup Language A simple introduction.
20-753: Fundamentals of Web Programming Copyright © 1999, Carnegie Mellon. All Rights Reserved. 1 Lecture 7: HTTP and CGI Fundamentals of Web Programming.
10/13/2015 ©2006 Scott Miller, University of Victoria 1 Content Serving Static vs. Dynamic Content Web Servers Server Flow Control Rev. 2.0.
Putting it all together Dynamic Data Base Access Norman White Stern School of Business.
Chapter 8 Collecting Data with Forms. Chapter 8 Lessons Introduction 1.Plan and create a form 2.Edit and format a form 3.Work with form objects 4.Test.
Website Development with PHP and MySQL Saving Data.
Chapter 6 Server-side Programming: Java Servlets
Forms and Server Side Includes. What are Forms? Forms are used to get user input We’ve all used them before. For example, ever had to sign up for courses.
1 © Netskills Quality Internet Training, University of Newcastle HTML Forms © Netskills, Quality Internet Training, University of Newcastle Netskills is.
1 MSCS 237 Overview of web technologies (A specific type of distributed systems)
Introduction to JavaScript CS101 Introduction to Computing.
WWW: an Internet application Bill Chu. © Bei-Tseng Chu Aug 2000 WWW Web and HTTP WWW web is an interconnected information servers each server maintains.
Netprog 2002 CGI Programming1 CGI Programming CLIENT HTTP SERVER CGI Program http request http response setenv(), dup(), fork(), exec(),...
1 WWW. 2 World Wide Web Major application protocol used on the Internet Simple interface Two concepts –Point –Click.
HTLM Forms CS3505. Form Handling in Browser html User Files out form WEbBROWSErWEbBROWSEr User read response submit Get URL?input html Get file html script.
Jan 2001C.Watters1 World Wide Web and E-Commerce Client Side Processing.
Module: Software Engineering of Web Applications Chapter 2: Technologies 1.
©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to.
8 Chapter Eight Server-side Scripts. 8 Chapter Objectives Create dynamic Web pages that retrieve and display database data using Active Server Pages Process.
WEB FORM DESIGN. Creating forms for a web page For your web project you have to design a form for inclusion on your web site (the form information should.
Week 10: HTML Forms HNDIT11062 – Web Development.
ASP-2-1 SERVER AND CLIENT SIDE SCRITPING Colorado Technical University IT420 Tim Peterson.
HTML Forms. A form is simply an area that can contain form fields. Form fields are objects that allow the visitor to enter information - for example text.
How CGI and Java Servlets are Run By David Stein 14 November 2006.
Introduction to CGI PROG. CGI stands for Common Gateway Interface. CGI is a standard programming interface to Web servers that gives us a way to make.
HTML Hyper Text Markup Language. Agenda Basics Tools Important tags Tables & databases Forms Publishing at Stern.
111 State Management Beginning ASP.NET in C# and VB Chapter 4 Pages
Lesson 11. CGI CGI is the interface between a Web page or browser and a Web server that is running a certain program/script. The CGI (Common Gateway Interface)
University of Kansas Department of Electrical Engineering and Computer Science Dr. Susan Gauch April 21, 2005 I T T C Introduction to Web Technologies.
The Common Gateway Interface (CGI) Pat Morin COMP2405.
Section 10.1 Define scripting
Servlets.
Section 17.1 Section 17.2 Add an audio file using HTML
World Wide Web Components
Presentation transcript:

World Wide Web Components Browsers and Servers CGI Processing Model (Common Gateway Interface) © Norman White, 2001

WWW is example of Client/Server Computing Server computers are located all around the world and respond to requests (messages) from Computers running browser software (Netscape, IE) Browser applications understand HTML, (and now Javascript, Java etc.)

Server Browser Interaction (simple) BServer http request Browser send http request to server (I.e. GET index1.html)

Index1.html file <html><head> Sample Title Sample Title </head><body> Here is some text and a picture Here is some text and a picture </body></html>

Server Response BServer http request HTML file Server retrieves file Sends file (index1.html) to Browser

BServer http request HTML index.html Browser “formats” index1.html May mean retrieving more files In order to display Browser Displays file

Browser asks for next file BServer http request HTML index1.html GET pic1.gif index.html contains reference to pic1.gif Browser then requests pic1.gif

Server sends pic1.gif BServer http request Index1.html GET pic1.gif index1.html pic1.gif Server next sends pic1.gif

BServer http request index1.html GET pic1.gif index1.html pic1.gif pic1.gif Browser displays pic1.gif

RESULT ???

Processing Non-HTML files Server sends a header in front of each file identifying the file type (HTML,GIF,JPEG etc.) Most Browsers understand HTML, GIF and TEXT Browsers can be configured to call external programs to handle new types of files

Helper Apps These programs are called HELPER applications and dramatically extend the capabilities of the browser, since they can be developed independently of the client software Examples - Quicktime viewers, sound players, VRML viewers etc. To see the currently configured viewers go to options on the Netscape title bar

Plugins Browser functionality can also be extended by adding plugins. Plugins are not standalone applications, but executable code that is dynamically linked into the browser when necessary.

Forms and CGI Programming HTML provides an easy to use FORM capability, which allows a wide variety of input forms to be easily generated. Form data types include – Text input - One line of text – Textarea - Multiple lines of text – Check boxes (on/off) – Radio boxes (1 of N) – Etc.

Forms Processing Logic Output of Form is formatted and sent to Server, along with the name of a program to process the contents of the form. The WEB Server takes information from form, and passes it on as input to a Common Gateway Interface Program (CGI) Output of CGI program is sent back to Client browser as an HTML (or other) file.

CGI programming extends power of WWW CGI programs can do an almost unlimited set of activities... – Look up info in a database and send it to Browser. – Take input from user and add to a file. – Take input and send to a standard business application – CGI program can be in any language that runs on the server

CGI Programming B httpserver CGI Program http form content input output HTML (Note, all processing is on server)

What do you need to do for CGI? Develop form to collect information from users Write and test CGI program to handle form information Put the URL of the CGI program in the “ACTION” statement of the form.

CGI Two Processing options Two Types of FORM processing options, GET and POST – GET - parameters sent additions to URL string. Each individual parameter separated by & – POST - Data sent in message body. This is a more general method and can handle more input data.

CGI Processing - review Server sends form (in html document) to client Client displays form, and user fills in fields Client sends form info to server (SUBMIT button) Server runs the CGI program named in the ACTION section of the FORM.. CGI program parses data as input Output of CGI program is sent by the server to the client (i.e. it should be HTML)

CGI Advantages and Disadvantages Advantages – Very general model, easy to do really neat things like front end existing applications, databases etc. – Many toolkits available to do common things Disadvantages – All processing is done on server. May overload server

Scalability At first, CGI model seems limited by server capacity, but with a few tricks we can change that. Note that the “ACTION” statement points to a URL. Since the URL can also include the server name, we can have “application” servers for specialized applications, so all the processing is not done on the web server.

Writing a CGI Program CGI program needs to – Parse form input – Process the input – Generate html output I.e the program has to dynamically generate the Appropriate HTML statements

GET vs. POST Alternative CGI methods GET format – Information is passed as a series of variable=value pairs separated by “&” to program named in action statement by adding them on to the URL (after a “?”) – Simple example – one line form with a field named “userid” and “ACTION=mycgiprog.cgi” – User enters “nwhite” – Browser sends the following to the web server

GET Processing Server Side Web server takes the information after the “?” and creates an environment variable named “QUERY_STRING”, then executes the program “mycgiprog.cgi” QUERY_STRING contains – userid=nwhite CGI program retrieves value of QUERY_STRING, does appropriate processing, and (optionally) sends an HTML response back

GET method – more than one parameter What if we want have more than one field? No problem QUERY_STRING can contain many variable=value pairs separated by “&” i.e. u serid=nwhite&password=junk&fname=Norman Possible problem, how big can environment variables be (how many characters) GET only useful for limited input

POST Method POST method more general Input is passed as a series of input lines (stdin) Variable1=value1 Variable2=value2 …. Environment variable CONTENT_LENGTH is set to the number of characters of input. Input processing logic needs to be different for GET and POST methods

CGI Output CGI output is passed back to the browser, hence has to be something (HTML) the browser can understand Like… Content-type: text/html output of HTML from CGI script Sample output What do you think of this?

Simple Example – GET Method List the contents of your “websys” directory Create a Shell Script named lister.cgi which contains #! /bin/sh echo content-type: text/html echo Listing echo pwd ls –alt echo

Try it, what happens? To run it, put it in your websys directory chmod +rx lister.cgi Type the following as a URL ster.cgi

CGI Example – POST Method Adds links to a file of students in a class Password Protected Steps – Parse data (POST form) – Check Password – Add info (in html format) to end of roster

#include #ifndef NO_STDLIB_H #include #else char *getenv(); #endif #define MAX_ENTRIES 10000

typedef struct { char *name; char *val; } entry; char *makeword(char *line, char stop); char *fmakeword(FILE *f, char stop, int *len); char x2c(char *what); void unescape_url(char *url); void plustospace(char *str);

void unescape_url(char *url); void plustospace(char *str); main(int argc, char *argv[]) { entry entries[MAX_ENTRIES]; register int x,m=0; int cl; int PASS; FILE *fp; printf("Content-type: text/html%c%c",10,10);

if(strcmp(getenv("REQUEST_METHOD"),"POST")) { printf("This script should be referenced with a METHOD of POST.\n"); printf("If you don't understand this, see this "); printf("<A HREF=\" l-out-forms/overview.html\">forms overview.%c",10); exit(1); } if(strcmp(getenv("CONTENT_TYPE"),"application/x-www-form- urlencoded")) { printf("This script can only be used to decode form results. \n");

if(strcmp(getenv("CONTENT_TYPE"),"application/x-www-form- urlencoded")) { printf("This script can only be used to decode form results. \n"); exit(1); } cl = atoi(getenv("CONTENT_LENGTH")); PASS = 0; for(x=0;cl && (!feof(stdin));x++) { m=x; entries[x].val = fmakeword(stdin,'&',&cl); plustospace(entries[x].val); unescape_url(entries[x].val); entries[x].name = makeword(entries[x].val,'='); /* Check here for passwd field = Z */ if (*entries[x].name=='p') {

if (strcmp(entries[x].val,"MDSS")== 0) PASS = 1;} } if (PASS == 1) {if ((fp = fopen("/class/nwhite/b3146/roster.html","a")) == NULL) {PASS=3; printf(" unable to open output file, tell Professor White ");

} else { fprintf(fp," Home Page for %s \n \ ", entries[0].val,entries[2].val); fprintf(fp," Why you might want to visit the homepage for %s... </h3\ >\n ", entries[2].val);

fprintf(fp,"%s ",entries[3].val); fprintf(fp," "); printf(" Link successfully added \n"); printf("<a href=\" \"> Click here to see the updated roster "); }} if (PASS != 1) { printf(" INVALID PASSWORD, See Professor White "); }

Conclusion World-Wide-Web model is much more powerful than it appears on the surface Easily integrated with existing applications Easy to add new functionality CGI model can do lots of things… – Update files – Link to corporate databases – Specialized Applications

Caveats Problems – Overhead Need to start up a new program for every request – Scalability All processing on server, what happens as usage grows? – Reliability How do we replicate for redundancy?