This project gives an opportunity to find out how to communicate between web browsers and a program on a server. There are languages, which are popular for this type of job, such as perl, java, php, etc. However, any language can handle the protocols (cgi, asp, etc.) set up for this function and C++ is certainly one of them. Agenda: start early 

First code to accept data from the url and returns it to the browser

Creating a simple html form

Code to capture information from an html form using string processing

Due: Monday, April 18

The specs for this project seem long, but most of this is an actual tutorial, since this is not covered in the book. In detail:

First code to accept data from the url and returns it to the browser The simplest way to retrieve data from a browser is from the url. You may have noticed, when using a search engine, that the keywords we submit appear as part of the url after a question mark. Here is an example of the URL after typing 'volcano' in google and pressing the submit button:

http://www.google.com/search?hl=en&q=volcano&btnG=Google+Search

Note the ? mark followed by words separated by = and & signs. This section is going to make use of this method to pass information to our c++ program. The following is a simple implementation of such program. It retrieves url information (after the ? mark) and prints it back to the browser along with creating a simple html document: First, a running version of this code:

http://toolkit.cs.ohlone.edu/~jond/cs102/retrieve.cgi?first=one two three

Run it again with different data after the question mark, to bring home the significance of this action! Second, the code itself, which you will be able to copy and paste into your system:

retrieve_cpp.txt

Since there are things worthy of notes in this program, it is duplicated here to explain further. Note that there are spaces around the html tags in order for them to show properly on the browser (don't copy/paste that version!):

#include < iostream> #include < cstdlib> using namespace std; int main () { string s(getenv("QUERY_STRING")); //string s = "one+two+three"; //use this for testing in an IDE //instead of the QUERY_STRING cout << "Content-type:text/html "; //browsers expect this string //first or error will occur cout << "< html>" << endl; cout << "< head>" << endl; cout << "< title>Grabbing Data From the URL< /title>" << endl; cout << "< /head>" << endl; cout << "< body>" << endl; cout << "< body bgcolor=\"#00FFFF\">" << endl; cout << "< font color=\"#FF00FF\">" << endl; cout << "s: " << s << "< br> "; cout << "< /font>< /body>" << endl; cout << "< /html>" << endl; return 0; }

Library cstdlib is necessary

The getenv("QUERY_STRING") function retrieves the url data after the question mark and will populate, in this case, variable s being declared of type string.

The string "Content-type:text/html " must be the first thing a browser receives, including the two return characters at the end, or it will not work.

Next, the program prepares an HTML page to print the CGI data back to the browser by printing the basic HTML tags html, head, title, body, bgcolor, and font. At this point, you may read up on HTML a bit, if not already familiar with it. Scan through the first 5 lessons of the following tutorial, in order to understand the way HTML works. It is not complicated and will be very useful in your computer career, wherever it takes you.

pageresource.com or w3schools.com

Once familiar with HTML, create the file retrieve.cpp from the link above, into your gen home account.

Compile retrieve.cpp into retrieve.cgi to the public folder. Remember we can do this in one step with this command:

c++ retrieve.cpp -o public_html/retrieve.cgi

Do keep .cpp files in the home account and .cgi files in the public_html directory.Run from the web by creating the url this way:

http://toolkit.cs.ohlone.edu/~user_name/retrieve.cgi?one_two_three

Start with this simple string "one_two_three" after the ? mark. The _ characters fill in for 'blanks' in URL's, but certainly, try blanks and other strings, see what you get.Creating a simple html form Read the following tutorial on the subject of HTML forms:

pageresource.com Forms

Run the HTML form below, which creates three text boxes on the browser. Enter test data and press submit (it calls the next program you will be working with):

web_form.html

Here is the code for the html form to copy and paste into your own web_form.html file in the public_html directory:

html_form_html.txt

Note where the form calls the cgi program (retrieve_form_start.cgi) in the form tag.

Note in the url (after running the link above) that the form sent the data after the question mark automatically. Also note the relationship between the html field names (first, last, color) and the data entered. The = signs separate the field names from the data (value) and the & characters separate the name/value pairs.

Our next job will be to take this url string (after the ? mark) and separate the name/value pairs and assign these to similarly named variable names. Once the data is neatly captured into variables, we can spit the data back to the web, save to database, etc. (though we will not deal with databases in this class).

Code to capture information from an html form using string processing: the name/value pairs will be parsed from QUERY_STRING into an array of structs, which will hold the name/value pairs.Stay close to this great reference string processing functions: http://www.harding.edu/fmccown/cpp_strings.pdf ..and do study and understand the function at the bottom of that .pdf page, which parses data separated by a common delimiter - repeated here:

// Prints all items in a string that are separated by a common delimiter. void parse(string parseString, string delimiter) { string value; int startPos = 0, pos = parseString.find(delimiter); while (pos != string::npos) { value = parseString.substr(startPos, pos - startPos); cout << value << endl; startPos = pos + delimiter.length(); pos = parseString.find(delimiter, startPos); } value = parseString.substr(startPos, parseString.length() - startPos); cout << value << endl; // Example call: parse("this::is::a::test", "::"); Note: this function has been modified to work with our web form application (below).

Copy and paste into your own version of retrieve_form.cpp from the following start file: retrieve_form_start_cpp.txt This start file already contains a struct for the name/value pairs, an array, and two functions, one of which (parse()) is almost already complete.

Complete the following:

Add code to the parse function, which will populate the name_value_pairs array.

Complete the function 'param()' based on the prototype, calls, and definition, which are already in place. The function 'param()'s job is to match the field name passed in its parameter to the corresponding array struct element. Once the appropriate structure is matched, the value for that field can be returned.

Return "" (a blank string) if the element for that name is not found in the array - (no match from the html form).

Use your own fields by modifying the html code appropriately (first, last, and color are not required, just examples) .

As a final touch, return the data received back to the browser in some creative way. For example the color chosen by the user could be used to change the background color of the page. Again, this is only an example - be creative.

To turn in:

Dropbox retrieve_form.cpp and its corresponding web_form.html file. The dropbox is the sixth option in the toolkit menu.

Create a message in the discussion board providing a workable link to your final html file. Here is the way to do this:

In a new message for topic named 'retrieve_form.cgi threads', select the check box Enable HTML

In the body of the message, type the html 'a' tag (shown below) substituting your own url information (and not using a space as it is done here): < a href="http://toolkit.cs.ohlone.edu/~username/web_form.html">Some Descriptive Name for the Project< /a> Make sure there are no return characters in this link code, from < a> to < /a>.

Note: The system has problems creating the link properly, most of the time (not your fault). If your link does not work, no worries, it will be fixed shortly by the instructor. Just to your best and have the code in place already - thanks :)

Here are examples of earlier student work:

Kyi Wilson Muskan Karamkchandani

That's it! enjoy :)