This shows you the differences between two versions of the page.
— |
cs-142:cgi [2015/01/07 16:16] (current) ryancha created |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | This is a brief tutorial on how to create web pages that call your code. It is possible to have the web page call your C++ code, but we are going to use another language that is like C++ in order to make this tutorial more simple. | ||
+ | First we need to talk about how a web server works. It takes the Universal Resource Locator (URL) that you type into your browser and can convert it into a folder and file structure. All of you have a folder on a web server in the Computer Science Department that you can put things into so they can be seen on the web server. | ||
+ | |||
+ | On the lab computers you can go to Start/Computer/username(//samba1(F:) to access this folder. Open this folder and go to the public_html folder. This is where the web server will look when you enter a URL like | ||
+ | <pre> | ||
+ | http://students.cs.byu.edu/~username | ||
+ | </pre> | ||
+ | |||
+ | You can also access these files from a macintosh by opening a terminal window and then "ssh schizo.cs.byu.edu". | ||
+ | |||
+ | You can create files in this folder that will be seen on the web server. Open notepad and enter the following: | ||
+ | <syntaxhighlight lang="html4strict"> | ||
+ | <html> | ||
+ | Hello World | ||
+ | </html> | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | Save this file as text in F:\public_html\hello.html | ||
+ | |||
+ | You should now be able to see it at | ||
+ | <pre> | ||
+ | http://students.cs.byu.edu/~username/hello.html | ||
+ | </pre> | ||
+ | |||
+ | If you have never written html pages before, you can find a good tutorial at [[http://www.w3schools.com/ w3schools]]. But you would really like to have code executed when you enter a URL. In order to do this, you need to write a form and a CGI script that will be executed when you press the submit button on that form. | ||
+ | |||
+ | Open notepad and enter the following: | ||
+ | <code html4strict> | ||
+ | <html> | ||
+ | <form method="post" action="name.cgi" enctype="multipart/form-data"> | ||
+ | |||
+ | What's your name? | ||
+ | <input type="text" name="name" /> | ||
+ | <p> | ||
+ | What's your favorite color? | ||
+ | <select name="color" > | ||
+ | <option value="red">red</option> | ||
+ | <option value="green">green</option> | ||
+ | <option value="blue">blue</option> | ||
+ | <option value="chartreuse">chartreuse</option> | ||
+ | </select> | ||
+ | <input type="submit" name=".submit" /> | ||
+ | </form> | ||
+ | </html> | ||
+ | </code> | ||
+ | |||
+ | This will create a form that will let you enter your name and your favorite color. When you press the submit button, it will call the cgi script "name.cgi" that we will write next. | ||
+ | |||
+ | Save this file as text in F:\public_html\form.html | ||
+ | |||
+ | Now you want to write code that will be executed when you click on the submit button. | ||
+ | |||
+ | Open notepad and enter the following: | ||
+ | <code perl> | ||
+ | #!/usr/bin/perl | ||
+ | |||
+ | use strict; | ||
+ | use CGI qw/:standard/; | ||
+ | print header; | ||
+ | print start_html('Simple Script'); | ||
+ | if (param) { | ||
+ | print "Your name is ",param('name')," "; | ||
+ | print "Your favorite color is ",param('color'),"<p>"; | ||
+ | } | ||
+ | print end_html; | ||
+ | </code> | ||
+ | |||
+ | Save this file as text in F:\public_html\name.cgi | ||
+ | |||
+ | This program is written in a language called [[http://www.perltutorial.org/ perl]] | ||
+ | |||
+ | It is a lot like C++ and you should be able to pick it up easily and write code that will run from a web page. |