PROJECT Note # 03: Database Management Systems Web-based...

PROJECT Note # 03: Database Management Systems

Web-based Database Applications Web-based database applications (WDA) are programs/software which can be accessed through Web WWW/Internet. They can accept the user commands and make corresponding SQL statements to the DBMS and then display or get the results back to the users. Users are at the client site and access WDA via a web browser (just like visiting a web page). The WDA resides and runs at the server site. The DMBS can be at the same server site or at another server.

Depending on the web programming techniques(CGI, servlets, jsp, asp, …) the WDA can be written in many programming languages such as Python, Perl, PHP, Java, C, C++, … WDA allow users to work with DBMS without knowing SQL and from anywhere.

CGI We will learn how CGI works and learn how to write a CGI program in PYTHON. But, firstly: A) How a web page works ?

When a web page has many components (images, layers, …) one single address can generate multiple GET (a command in HTTP protocol) requests which lead to multiple replies but still from only one web page. B) HTML HTML is programming language which belongs to the mark-up family. A web browser contains a HTML compiler which can translate HTML code and run it as a program and display the output within its browser window. When you see a web page it is indeed the output of running the HTML code at the web browser but the code came from the web server. EXAMPLE of a simple HTML program/code:

<HTML> <HEAD> <TITLE>Your Title Here</TITLE> </HEAD> <BODY BGCOLOR="FFFFFF"> <CENTER><IMG SRC="clouds.jpg" ALIGN="BOTTOM"> </CENTER> <HR> <a href="http://somegreatsite.com">Link Name</a> is a link to another nifty site <H1>This is a Header</H1> <H2>This is a Medium Header</H2> Send me mail at <a href="mailto:[email protected]"> [email protected]</a>. <P> This is a new paragraph! <P> <B>This is a new paragraph in bold!</B> <BR> <B><I>This is a new sentence without a paragraph break, in bold italics.</I></B> <HR> </BODY> </HTML>

Its output/webpage will look like this:

C) CGI Common Gateway Interface (CGI) is a method for generating dynamic contents of web pages. CGI programs/scripts are programs(applications) which resides and run at the server site, they get inputs from web browser (via forms) and produces output/response (HTML code) at the server site. Then, the HTML output will be sent automatically back to the web browser, run there and display the results to users.

So, what it takes to build and make a CGI program works ? You will need more than just one program.

HTML code to display the FORM to the users (to input INFO)

CGI program which will produce another HTML code (to display results) Although, it is only TWO programs but since the CGI program must produce another HTML code/output, you will need to define that HTML output (which is a program) first. So, at the end it is actually THREE programs:

1. HTML code to display the FORM to the users (to input INFO) 2. HTML output (to display RESULTS) 3. CGI program which processes the INFO from the FORM (via EV) and produce the HTML output

above.

EV are environment variables. They are GLOBAL variables which can be shared by all programs. In CGI mechanism, EVs are shared between the Web Server program and the CGI program so that the Web Server program can pass the INFO (it received from the FORM) to the CGI program. EXAMPLE 1: let’s make a simple CGI program in Python which gets first name (exp: “John”) and last name ( “Smith”) from a FORM and reply with “Hello John Smith” in the browser window.

1) CREATE a FORM and its CGI program for displaying back INFO entered in the FORM (EXAMPLE 1) SET-UP the a working folder for the FORM and CGI programs:

Login to your CS account using Putty

Create a folder called EXACTLY as WWW (mkdir WWW)

Change its permission to 755 (chmod 755 WWW)

Go inside that folder (cd WWW)

Create a folder inside WWW called db3-1 (mkdir db3-1)

Go inside that folder (cd db3-1)

Use a text editor program (jpico, emacs, vi, joe, …) to CREATE FILES inside db3-1: 1. a file named “p1.htm” which contains a HTML code to display the FORM to the users (to input

INFO), with the contents showed below. 2. a file named “p1x.htm” which contains HTML output (to display RESULTS), with the contents

showed below. This file is only temporary use and can be deleted later. 3. a file named “p1py.cgi” which contains a CGI program which processes the INFO from the FORM

(via EV) and produce the HTML output above, with the contents showed below. “p1.htm” (HTML code to display the FORM)

for “p1x.htm” (HTML output to display RESULTS)

for “p1py.cgi” (CGI program)

After “p1py.cgi” is built based on the HTML code in “p1x.htm” you can delete the “p1x.htm” file. So, you will need just two files in the db3-1 folder:

1. file “p1.htm” which contains a HTML code to display the FORM to the users (to input INFO) 2. file “p1py.cgi” which contains a CGI program which processes the INFO from the FORM (via EV)

and produce the HTML output above. Set the permission for both files as 755 (chmod 755 *). To TEST if they work correctly: open a web browser and type the following address: cs.newpaltz.edu/~UserName/db3-1/p1.htm You should see the FORM (as shown above), enter your first and last name and click on “submit” and you should see the second Hello page (as shown above). EXPLANATION of all steps in EXAMPLE 1:

EXAMPLE 2: let’s make a Web-based database application which is a CGI program in Python, that connects to a MySQL server to let NEW users REGISTER/ADD username and password. It should save the pair of username and password into the UserPass table.

2) CREATE a FORM and its CGI program for REGISTERING username and password (EXAMPLE 2) A) CREAT a TABLE with two columns for username and password, where column is the primary key. You can do it via command-line SQL statements or via a database application/program. Let’s first do it via command-line SQL statements: a)Login to your CS Linux account b)Login to your MySQL account c)Use the following SQL statements to CREATE A TABLE named “UserPass”:

mysql> CREATE TABLE UserPass(

userid CHAR(20) NOT NULL,

passcode CHAR(10) NOT NULL,

PRIMARY KEY(userid));

INSERT INTO UserPass VALUES

('user01','pass1'),('user02','pass2');

After that, we should have the UserPass table in our database like this:

B) ADDING new USERNAME and PASSWORD

We can do that using SQL select statement: INSERT INTO UserPass VALUES ('user01','pass1');

SET-UP the a working folder for the FORM and CGI programs:


Go inside that folder (cd db3-2)

Use a text editor program (jpico, emacs, vi, joe, …) to CREATE FILES inside db3-2: 1. a file named “p2.htm” which contains a HTML code to display the FORM to the users (to input

INFO), with the contents showed below. 2. a file named “p2x.htm” which contains HTML output (to display RESULTS), with the contents

showed below. This file is only temporary use and can be deleted later. 3. a file named “p2py.cgi” which contains a CGI program which processes the INFO from the FORM

(via EV) and produce the HTML output above, with the contents showed below. OUTPUT of “p2.htm” (to display the FORM) OUTPUT of (p2x.htm) produced by “p2py.cgi”

EXAMPLE 3: let’s now make a Web-based database application which is a CGI program in Python which also connects to a MySQL server to verify username (exp: “SmithJ”) and password ( “54321”) from a FORM and reply with a “Welcome” or “Access Denied” message in the browser window.

3) CREATE a FORM and its CGI program for CHECKING USERNAME and PASSWORD (EXAMPLE 3) The PROBLEM: Given username and password we need to check if the username and password are registered/correct (i.e. in our database). SOLUTION: we first need to retrieve the password for the given username, from our UserPass table, let’s say we’ll get dbpassword. Then, we need to compare if the retrieved one dbpassword is the same as the one entered by the user password. We can do that using SQL select statement: SELECT passcode FROM UserPass WHERE userid = username

It should give us dbpassword. We can first test if the above SQL statement is correct by doing it manually:

Then, we need to compare to see if password = dbpassword ? To do this via a Web-based Databased application (WDA) we’ll need to do the following: SET-UP the a working folder for the FORM and CGI programs:


Go inside that folder (cd db3-3) Use a text editor program (jpico, emacs, vi, joe, …) to CREATE FILES inside db3-3:

1. a file named “p3.htm” which contains a HTML code to display the FORM to the users (to input INFO), with the contents showed below.

2. a file named “p3x.htm” which contains HTML output (to display RESULTS), with the contents showed below. This file is only temporary use and can be deleted later.

3. a file named “p3py.cgi” which contains a CGI program which processes the INFO from the FORM (via EV) and produce the HTML output above, with the contents showed below.

OUTPUT of “p3.htm” OUTPUT of HTML code (p3x.htm) produced by “p3py.cgi”

OUTPUT of “p3.htm” OUTPUT of HTML code (p3x.htm) produced by “p3py.cgi”

“p3py.cgi” which contains a CGI program (codes in TWO windows)

CONTENTS of “p3.htm” (HTML code to display the FORM)

( MUST READ NEXT PAGE)

Project 03’s ASSIGNMENTS Do all steps 1,2,3 with your own titles, names, values (must be different from the examples) to create your own files and examples. Create a working folder called “project03”. Then go inside and do the following: STEP A: Create a CGI program and its form in HTML which let the users ENTER/SUBMIT 3 items via a web browser, the reply should display back those 3 items the user entered. The names of the files MUST be strictly as follow but the names of items/variables/titles must be DIFFERENT from the examples above. Create “db3-1” folder, then create these two files inside:


and produce the HTML output above. (See example-1 and step 1 for ideas) STEP B: Create a CGI program and its form in HTML which let the users REGISTER/ADD 2 items via a web browser, the reply should display back those 2 items the user entered. The names of the files MUST be strictly as follow but the names of items/variables/titles must be DIFFERENT from the examples above. Create “db3-2” folder, then create these two files inside:


and produce the HTML output above. (See example-2 and step 2 for ideas) STEP C: Create a CGI program and its form in HTML which let the user enter 2 items via a web browser and then CHECK if those 2 items are VALID (in the database/system). The names of the files MUST be strictly as follow but the names of items/variables/titles must be DIFFERENT from the examples above. Create “db3-3” folder, then create these two files inside:


and produce the HTML output above. (See example-3 and step 3 for ideas) What to submit ?

a zipped/tar/rar file which contains 3 folders and a “readme.txt”:

db3-1 which contains 2 files “p1.htm” and “p1py.cgi”



“readme.txt” file which contains the full WEB link to where your files are (ready to run)

Where to submit ?

NOT REQUIRED

Deadline: see the SCHEDULE on the class WEBSITE

PROJECT Note # 03: Database Management Systems Web-based...

Documents

Transcript of PROJECT Note # 03: Database Management Systems Web-based...