INTRODUCTION TO CGI PROGRAMMING By Jumail Bin Taliba, GMM, FSKSM, UTM INTRODUCTION

Transcription

1 INTRODUCTION TO CGI PROGRAMMING By Jumail Bin Taliba, GMM, FSKSM, UTM INTRODUCTION What is CGI? CGI-which stands for Common Gateway Interface- is a protocol (a way of doing things), not a programming language. That means that it s the usual way that servers talk to the programs that are interact with. Therefore, any program that sends or receives information from a server needs to follow the standards specified by CGI. What is program? A program is a collection of lines of commands-which is called code- that contain instructions for the computer. The program was written using programming language such as C, C++, Pascal and Perl. So, any programs that are written to follow the standards specified by the CGI were called CGI Programs. What is script? Sometimes we use the term CGI Script instead of CGI Program. Generally, they are same thing, which is a program that written in CGI s specification. Technically, the basic difference is that CGI Programs are compiled so they ll run more quickly on particular operating systems while CGI Scripts are just text files that are interpreted necessary. The CGI programs were written using Compiler-based programming languages such as C, C++ and Pascal while CGI scripts were written using Interpreter-based programming languages such as Perl, ASP and PHP. Actually, most of the common programming languages can be used to write CGI scripts or programs. But one of the most important things to be considered is the languages should support string manipulations. What is the CGI Programming? The concept of CGI programming is very simple. Basically, we write a program, which will create html document. Traditionally, the html page was created using text editor. In CGI programming, instead of manually-coded (using text editor), we write a program (called cgi program) that will create the html page. The html page consists of collections of string. That s why, any programming languages that will be used to write cgi program should supports string manipulations. So, before you can write a cgi program, you have to understand the string manipulations (i.e.: how to read/write input/output from/to file, how to chunk string, how to merge string, etc) and understanding in writing HTML. Why C language? Many people use Perl to write their cgi scripts in order to make their web pages interactive. But, in this tutorial we ll write CGI programs (not scripts) using Borland C++ ver I expect that you have experiences in writing a program using C language. We don t want to waste time to learn a language that is new for us-such as Perl. The most important things are to understand the concept of CGI programming. After you get depth understanding of the concept, you can easy to move to any languages include Perl. In addition, we ll use Xitami as the Web Server. Actually, there are several web servers available includes provided by Microsoft (IIS on NT/2000 or PWS on Win 98). I choose Xitami because it is easy to setup and easy to run and administer. By the way, it s free.

2 2. INSTALLING XITAMI WEB SERVER To install Xitami: 1. Download the latest version of Xitami for your particular version of Windows from 2. Run the server s install program by double-clicking the file you just downloaded. The file I downloaded was called bs3224d9.exe, though future versitons will probably have slightly different- but perhaps equally obliquenames. Figure 4.1: You can accept the default directory (C:\Xitami) 3. Accept the default configurations, including where the server is installed (Figure 4.1) and to which program manager group its icons are added. 4. Choose and administrator name and password and write them down somewhere you can find them again (Figure 4.2). You ll need them if you decide to change the server s configurations. 5. Select server profile (not shown). I recommended Turbo if you re just planning on running the server for testing your cgi program and don t have to worry about other people accessing your pages. Figure 4.2.: Set Admin Password 6. At the end of the installation, click Run to start up the Xitami server right away. When Xitami is running, you ll see a green icon with an X in the System Tray at the right (or bottom) end of the Taskbar (Figure 4.3) Figure 4.3.: Server Profile: Reccomended: Turbo

3 3. CONFIGURING THE SERVER To configure the server: 1. For Windows 2002, go to control panel and click the icon. 2. For Windows 95/98, go to Start Menu->Internet Tools Folder. Default Settings: Home directory: webpages Directory path: C:\Xitami\webpages\. Put all your html pages in this directory. To access a html page, for example login.htm, type Put all your image files in images directory-which is inside the webpages directory. To refer an image (for example logo.gif), use url address,

4 Put all your downloadable files in files directory-which also inside the webpages directory. You should create yourself. To refer a file (for example faq.txt) use url address, CGI Directory: cgi-bin Directory path: C:\Xitami\cgi-bin\ If this directory does not exists, you need to create yourself. Put all your cgi programs in this directory. To refer a cgi program (for example login.exe) use url address, 4. TESTING THE SERVER 1. Open any web browser (i.e: Microsoft Internet Exploerer or Netscape Navigator). 2. Enter the URL: 3. Then you suppose see the Xitami homepage.

5 4. TESTING CGI PROGRAM 1. Write a simple CGI program (testcgi.c) using Borland C (See sample codes below). 2. Then, compile the program. 3. Copy the executable file (testcgi.exe) into C:\Xitami\cgi-bin directory. 4. To run the program, in the web browser type: Tips: To skip the step 3, set the Borland C++ options. Open the Project Options Dialog box (go to menu Options->Project ). Then set the Final directory to c:\xitami/cgi-bin. Important: Make sure you put this statements: fprintf(stdout,"content-type: text/html\n\n"); #include <stdio.h> void main(void) { fprintf(stdout,"content-type: text/html\n\n"); fprintf(stdout,"<html>\n"); fprintf(stdout,"<head> <TITLE>Testing CGI Program</TITLE> </HEAD>\n"); fprintf(stdout,"<body>\n"); fprintf(stdout,"if you can read this message <BR>, that's mean the CGI program working properly"); fprintf(stdout,"</body>\n"); fprintf(stdout,"</html>\n"); Simple CGI program: testcgi.c Output of the testcgi.exe cgi program

6 5. GETTING DATA FROM USERS 1. Write a HTML file to create simple HTML form (See sample form below). 2. Put the html file (form.html) into c:\xitami\webpages directory. 3. To open the form, in the web brower type: Notes: You also can create the form using cgi program (See the sample codes in <HTML> <HEAD> <TITLE> Data Entry Form</TITLE> </HEAD> <BODY> <FORM Name="DataEntry" Method="POST" Action=" Nama: <INPUT Name="Nama" Type="Text" size="50"> <BR> No KP: <INPUT Name="NoKP" Type="Text" size="15"> <BR> Kursus: <SELECT Name="Kursus"> <OPTION Value="DCK" SELECTED>DCK <OPTION Value="SCK">SCK </SELECT> <BR> Alamat:<BR> <TEXTAREA Name="Alamat" COLS="50" ROWS="5"> </TEXTAREA> <BR><BR> <INPUT Name="Submit" Type="Submit" Value="Submit"> <INPUT Name="Clear" Type="Reset" Value="Clear"> <BR> </FORM> </BODY> </HTML> HTML script file to create form: form.html HTML Form

7 4. Write a cgi program (process_form.c) that will receive inputs from the form and process them (See the codes below). 5. After you compile the program, make sure the executable file (process_form.exe) was placed in C:\Xitami\cgi-bin directory #include <stdio.h> #include <stdlib.h> #include <string.h> typedef struct{ char *name; char *value; symbol; symbol *SYMBOLTABLE; int SYMBOLCOUNT=0; void DecodeData(char *data); void SplitData(const char *data); char *GetString(const char *name); int GetInteger(const char *name); char *ReplaceStr(char *buffer,char *s1, char *s2); void CreateSymbolTable(void); void DestroySymbolTable(void); void main(void) { char *Nama, *NoKP, *Kursus, *Alamat; fprintf(stdout,"content-type: text/html%c%c",10,10); fprintf(stdout,"<html>\n"); fprintf(stdout,"<head> <TITLE> Feedback </TITLE> </HEAD>\n"); fprintf(stdout,"<body>\n"); CreateSymbolTable(); Nama=GetString("Nama"); NoKP=GetString("NoKP"); Kursus=GetString("Kursus"); Alamat=GetString("Alamat"); ReplaceStr(Alamat,"\n","<BR>"); fprintf(stdout,"<b> YOUR INFORMATIONS WAS SUCCESSFULLY SUBMITTED AS BELOW: </B> <BR><BR> \n"); fprintf(stdout,"nama: <BR>\n"); fprintf(stdout,"<b> %s </B> <BR><BR>\n",Nama); fprintf(stdout,"no KP: <BR>\n"); fprintf(stdout,"<b> %s </B> <BR><BR>\n", NoKP); fprintf(stdout,"kursus: <BR>\n"); fprintf(stdout,"<b> %s </B> <BR><BR>\n",Kursus); fprintf(stdout,"alamat: <BR>\n"); fprintf(stdout,"<b> %s </B> <BR><BR>\n",Alamat); fprintf(stdout,"</body>\n"); fprintf(stdout,"</html>\n"); DestroySymbolTable();

8 void CreateSymbolTable(void) { char *sdata_length; int data_length; char *data; sdata_length=getenv("http_content_length"); data_length=atoi(sdata_length); data=(char*)malloc(data_length+1); fread(data,data_length,1,stdin); DecodeData(data); SplitData(data); free(data); char *GetString(const char *name) {int i; for (i=0;i<symbolcount;i++){ if (!strcmp(name,symboltable[i].name)){ return strdup(symboltable[i].value); return NULL; int GetInteger(const char *name) {char *temp; temp=getstring(name); if (temp) return atoi(temp); return 0; /* */ void DecodeData(char *data) {unsigned int i; char s[5]; char *temp=strdup(data); char hex[3]; unsigned char num; strcpy(data,""); for (i=0;i<strlen(temp);i++) { switch (temp[i]){ case '+': strcpy(s," "); break; case '%': sprintf(hex,"%c%c",temp[i+1],temp[i+2]); i+=2; sscanf(hex,"%x",&num); sprintf(s,"%c",num); break; default: sprintf(s,"%c",temp[i]); strcat(data,s); free(temp);

9 void SplitData(const char *data) {unsigned int i; int var_count=1; char *item; //eg: Nama=Zulkefli Bin Mahmod char *p; char *temp=strdup(data); char *n,*v; if (!temp) return; //Calculate number of variables in the stream data for (i=0;i<strlen(temp);i++) if (temp[i]=='&') var_count++; //Allocate memory for the Symbol Table SYMBOLTABLE=(symbol *)malloc(var_count*sizeof(symbol)); SYMBOLCOUNT=var_count; var_count=0; p=strtok(temp,"&"); while (p){ temp=p+strlen(p)+1; item=strdup(p); n=strtok(item,"="); v=n+strlen(n)+1; SYMBOLTABLE[var_count].name=strdup(n); SYMBOLTABLE[var_count++].value=strdup(v); //p=strtok(null,"&"); p=strtok(temp,"&"); void DestroySymbolTable(void) {free(symboltable); char *ReplaceStr(char *buffer, char *s1, char *s2) {char *tail,*ps; ps=strstr(buffer,s1); if (!ps) return buffer; while (ps){ tail=strdup(ps+strlen(s1)); ps[0]=null; buffer=strcat(buffer,s2); buffer=strcat(buffer,tail); ps=strstr(buffer,s1); return strdup(buffer); A CGI program to process the inputs from the form: process_form.c

10 6. Now, we are going to test the program. Fill in the form and click the Submit button. 7. All your input will be sent to cgi program process_form.exe and produce output as shown below: Fill in the form Result from the cgi program process_form.exe

11 Notes Actually, all data that you input will be encoded by the web browser before it submitted to the cgi program process_form.exe. For example, all space character were converted to + sign, comma were converted to %2C, new line character ( \n ) were converted to %0D%0A and so forth. %2C represent an ascii code in hexadecimal for + character. The data then merged into a single long stream in series of &Name=Value pattern. Example data that submitted from the web browser to the CGI program: Nama=Zulkefli+Bin+Mahmood&NoKP= &Kursus=DCK&Alamat=Fakulti+Sains+Komputer+dan+Sistem+ Maklumat%2C%0D%0AUniversiti+Teknologi+Malaysia%2C%0D%0A Skudai%2C%0D%0AJohor.&Submit=Submit So, in the cgi program we need to do the opposite processes. We need to decode the stream data and then split it into their variables, before we can use the variables.