CS Note # 01“CS Must-Have Skills”Dr. Hanh Pham
Web Programming
(Client+Server+Database)
GOALS:
- Intensive Web Programming Training Workshop which shows the basics/core of Web Programming - a must-have skill to get a job for CS graduates.
- Short but address all the basics: Client+Server+Database
- At the end of the workshop you'll be able to create a real website at your CS account which lets users to register for accounts, login ... with user data stored in your MySQL database.
TABLE OF CONTENTS:
- IMPORTANT information about our CS Linux system
- Set-up your web space
- Design: what will we build ?
- CLIENT programs
- DATABASE
- SERVER programs
- Some explanations (+CGI)
- Learn More
1. IMPORTANT information about our CS Linux system
Every CS student can have:
- a CS Linux account
- a MySQL database account
If you haven’t done so then email Aram () ASAP and ask him to create accounts for you.
+CS Web Server address (used for PUTTY or SSH, WINSCP, to remotely access or transfer files to/from your CS account at CS server to your computer, download PUTTY and WINSCP if needeed):
wyvern.cs.newpaltz.edu
+ web space (for your web pages) is whatever inside the folder namedWWW(all capitalized) inside your CS account. You’ll need to create this folder if you haven’t done so. Must set the permission to 755: chmod 755WWW
+ when you run the web server programs the ERRORS are listed at a (shared with all other CS users) log, you see itby this command:
$tail /var/log/httpd/error_log
+ if you need to edit codes while accessing your account remotely you can use this TEXT editor in the CS system:
$jpico index.htm
+ get to your MySQL account: you must login into your CS account first, then you can get to MySQL from there by the following:
$mysql -h localhost –p(click enter, then type in your MySQL password which is different from the CS password)
$USE YourUseName_db; (a SQL command to open/unlock your database, must do this before doing anything else with database, YourUserName is the students NPCUID. The database name is the username followed by "_db")
To getout of MySQL account and get BACK to your CS account you can type “quit” or “CTRL+C”
BASIC LINUX COMMANDS$ls => to see the names of files and folders in your account
$mkdir PDS=> to create a folder/directory named PDS
$ls -l=> to see a list of files and folders with all details
$cd PDS=> to go inside folder PDS
$ls => to see the names of files and folders in the current folder
$mkdir 01=> to create a folder/directory named 01
$cd 01=> to go inside folder 01
$ls => to see the names of files and folders in the current folder
$rm a.txt => to delete the file a.txt
$cp a.txt b.txt => to make a copy of file a.txt, the new copy is named b.txt
$mv a.txt X/b.txt => to move file a.txt to folder X, the file also has a new name b.txt
$cd ..=> to go out of the current folder (up one level)
2. SET-UP your web space at the CS Linux system
Step 1: use PUTTY to login to your CS account
Step 2: (skip this if you already have a WWW folder created and set up) create a web space (for your web pages) i.e. a folder named WWW(all capitalized) inside your CS account.
$mkdir WWW
Must set the permission to 755:
$chmod 755WWW
TEST: to see if you have it done correctly, go to a web browser such as Chrome and type in the following web address:
cs.newpaltz.edu/~YourUserName/To keep your web space organized you may want to create a sub-folder inside this WWW folder for our next projects:
$cd WWW
Create a sub-folder, for example “learn”:
$mkdirlearn
Must set the permission to 755:
$chmod 755 learn
TEST: to see if you have it done correctly, go to a web browser such as Chrome and type in the following web address:
cs.newpaltz.edu/~YourUserName/learn3. DESIGN: what will we build ?
We’ll build a website at our CS account which has menu of several pages, it lets users to register for accounts, login ... with user data stored in your MySQL database as shown here:
4. CLIENT programs
We need to create web client programs which initially are stored at the server site (your CS web space) but will be sent to and run at the client site(the computer of person who visits your webpages). In our example, these programs are in HTML and are made as simple as possible.
Step 3:let’s create a sub-folder called “simple” inside this “learn” folder:
$cd learn
Create a sub-folder, for example “learn”:
$mkdirsimple
Must set the permission to 755:
$chmod755 simple
Step 4: we’ll create web pages for our website:
You can do it in two ways:
- use/download “note++” in your computer, then transfer these files using WinSCP to your CS account OR
- create/edit directly in your CS account via PUTTY program and using jpico (see part 1 above)
In any case, don’t forget to set the permission (see chmod … 755 in part1 above) for ALL files !
+ if you need to edit codes while accessing your account remotely you can use this TEXT editor in the CS system:
$jpico index.html
Picture files “clouds.jpg” and “logo.png” can be downloaded from here:
The CODES for these files are in HTML as follow:
File name / Contents/Codes / Look/Output“index.html” / <html>
<head>
<title> MY 1st WEBSITE </title>
</head>
<frameset rows="250,*" frameborder="0" border="0" framespacing="0">
<frame src="index-top-menu.htm" border="0" name="MENU">
<frame src="index-body.htm" border="0" name="BOT">
</frameset>
</html> /
“index-top-menu.htm” / <html>
<head>
<title> ABC Inc. </title>
</head>
<BODY BGCOLOR="FFFFFF">
<H2> <CENTER> ABC Inc.</CENTER> </H2>
<CENTER<IMG SRC="logo.png"> </CENTER>
<HR>
<CENTER<a href="index-p1-home.htm" target="BOT">Home</a> |
<a href="index-p2-register.htm" target="BOT">Register</a> |
<a href="index-p3-login.htm" target="BOT">Login</a> |
<a href="index-p4-about.htm" target="BOT">About</a> </CENTER>
<HR>
<p>
</BODY>
</html> /
“index-body.htm” / <HTML>
<HEAD>
<TITLE>ABC Inc.</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<p>
<CENTER<IMG SRC="clouds.jpg" ALIGN="BOTTOM"> </CENTER>
<CENTER>
<H1>WELCOME to ABC Inc.</H1>
<H2>We are proud to support the ABC soccer team ! </H2>
<CENTER>
</BODY>
</HTML> /
“index-p1-home.htm” / <HTML>
<HEAD>
<TITLE>Home of ABC Inc.</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<p>
<CENTER<IMG SRC="clouds.jpg" ALIGN="BOTTOM"> </CENTER>
<CENTER<H1>This is the HOME of ABC Inc.</H1> </CENTER>
</BODY>
</HTML> /
“index-p2-register.htm” / <html>
<head>
<title> Register WEBSITE </title>
</head>
<body>
<p>REGISTRATION FORM:</p>
<form method="post" action="register.cgi">
User Name: <input type="text" name="UserName">
<p>
Password: <input type="text" name="MyPass">
<p>
<input type="submit" value="Enter">
</form>
</body>
</html> /
“index-p3-login.htm” / <html>
<head>
<title> MY 1st WEBSITE </title>
</head>
<body>
<CENTER>LogIn
<form method="post" action="login.cgi">
<p>User Name:
<input type="text" name="UserName">
<p>Password:
<input type="text" name="MyPass">
<p>
<input type="submit" value="Submit">
</form>
</CENTER>
</body>
</html> /
“index-p4-about.htm” / <HTML>
<HEAD>
<TITLE>About ABC Inc.</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<p>
<CENTER<IMG SRC="clouds.jpg" ALIGN="BOTTOM"> </CENTER>
<p>
<CENTER>
<a href=" Group</a> is our parent company.
Send us an email at <a href="mailto:"> </a>.
</CENTER>
</BODY>
</HTML> /
TEST: to see if you have it done correctly, go to a web browser such as Chrome and type in the following web address:
cs.newpaltz.edu/~YourUserName/learn/simple5. DATABASE
You can use a database to store data, in this case: the user name and password of users who can have access to certain things in your website. We have MySQL databse at our CS system. If you don’t have a MySQL account yet then email Aram () ASAP and ask him to create an account for you.
Once you have your MySQL account, you can access your MySQL database. You must login into your CS account first, then you can get to MySQL from there by the following:
$mysql -h localhost –p (click enter, then type in your MySQL password which is different from the CS password)
$USE YourUseName_db; (a SQL command to open/unlock your database, must do this before doing anything else with database, YourUserName is the students NPCUID. The database name is the username followed by "_db")
Step 5: manually create a table called UserPass which store user info (UserName, Password) in your MySQL database.
Every time when you want to work/see the data(in the tables) in your MySQL database, you’ll need to:
a)Login to your CS Linux account (see part 1)
b)Login to your MySQL account
$mysql -h localhost –p (click enter, then type in your MySQL password which is different from the CS password)
c) Open/unlock your MySQL database (must do this before doing anything else with database, YourUserName is the students NPCUID. The database name is the username followed by "_db")
$USE YourUseName_db;
After that, you can work (create, read, write tables) with your MySQL database. In this case:
d) use the following SQL statement to CREATE aTABLE named “UserPass”:
mysql>CREATE TABLE UserPass(useridCHAR(20) NOT NULL, passcode CHAR(10) NOT NULL,PRIMARY KEY(userid));e) Insert/add data (USERNAME and PASSWORD) to the table. This is done “manually” at the command-line level.
mysql>INSERT INTO UserPass VALUES('user01','pass1'),('user02','pass2');f) You can check to see the contents of the table UserPass
mysql> SELECT * FROMUserPass ;You should see something like this:
6. SERVER programs
Now, we need to create web server programs which are stored at the server site (your CS web space). A web server program will run when is called (via CGI) from a form in a client program. So, they always come in pairs: a client program(in HTML) and its server program(PYTHON in this case).
In our example, we’ll have two pairs:
Step 6: we’ll create the two web server programs “register.cgi” and “login.cgi”. You can do it in two ways:
- use/download “note++” in your computer, then transfer these files using WinSCP to your CS account OR
- create/edit directly in your CS account via PUTTY program and using jpico (see part 1 above)
In any case, don’t forget to set the permission (see chmod … 755 in part1 above) for ALL files !
The CODES for these files are in PYTHON as follow:
File name / Contents“register.cgi” / #!/usr/bin/python
import cgi, cgitb
import MySQLdb
webForm = cgi.FieldStorage()
username = webForm.getvalue('UserName')
mypass = webForm.getvalue('MyPass')
db= MySQLdb.connect("localhost","YourUserName","YourMySQLpassword","YourUserName_db")
myCursor = db.cursor()
sql = "INSERT INTO UserPass VALUES ('%s','%s');" %(username,mypass)
try:
myCursor.execute(sql)
db.commit()
except:
db.rollback()
db.close()
print "Content-type:text/html\r\n\r\n"
print "<html>"
print "<head>"
print "<title> REGISTRATION FORM</title>"
print "<head>"
print "<body>"
print "<h2> Congratulations! You Have Successfully Register With UserName = %s </h2>" %(username)
print "</body>"
print "</html>"
File name / Contents
“login.cgi” / #!/usr/bin/python
import cgi, cgitb
import MySQLdb
myForm = cgi.FieldStorage()
nick = myForm.getvalue('UserName')
secret = myForm.getvalue('MyPass')
db= MySQLdb.connect("localhost","YourUserName","YourMySQLpassword","YourUserName_db")
myCursor = db.cursor()
sql = "SELECT passcode from UserPass WHERE userid = '%s' "%(nick)
try:
myCursor.execute(sql)
output = myCursor.fetchone()
for row in output:
sWord = row
except:
print "Error: unable to fetch data"
db.close()
if secret == sWord:
print "Content-type:text/html\r\n\r\n"
print "<html>"
print "<head>"
print "<title>Confirm</title>"
print "</head>"
print "<body>"
print "<h2> WELCOME Back %s !</h2>" %(nick)
print "</body>"
print "</html>"
else:
print "Content-type:text/html\r\n\r\n"
print "Wrong Password or Username !"
print "<html>"
IMPORTANT:
Make sure that you change the permissions for these two CGI files:
$chmod 755 register.cgi
$chmod 755 login.cgi
So, at the end our folder “simple” should contain the following:
TEST: to see if you have it done correctly, go to a web browser such as Chrome and type in the following web address:
cs.newpaltz.edu/~YourUserName/learn/simplea) TEST the REGISTRATION: click on the “Registration” link in the top menu and enter let’s say “a1” (for username) and “q1” (for password):
b) [skip this if it was ok] If you do get errors (even when the reply says that the username = none) then check:
- to make sure that the PERMISSION of the register.cgi file and all the folders above must be 755
- the file name of the PYTHON server code (register.cgi) and the name in the form (register.cgi) of the HTML client code must be the SAME
- the names of variables (UserName, MyPass) in PYTHON server code and the names of the input box variables (UserName, MyPass) in HTML must be the SAME
- go through each line of code in the PYTHON server code, pay attention to double and single quote, example of unacceptable is “ , example of unacceptable is ".
- read the system ERROR LOG for more hint:
$tail /var/log/httpd/error_log
c) Go to MySQL and see if the new Username and Password has been added to the table UserPass
mysql> SELECT * FROMUserPass ;You should see that the new data (a1,q1) has been added, something like this:
Go back to (b) if you don’t see the new data in the table.
7. Some Explanations
How does WEB works ?
The WEB SPACE in your account at (CS Linux) Server :
Hypertext Transfer Protocol(HTTP):
•Hypertext Transfer Protocol(HTTP) is anapplication protocolfor distributed, collaborative,hypermediainformation systems.
•Hypertextis structured text that uses logical links (hyperlinks) betweennodescontaining text. HTTP is the protocol to exchange or transfer hypertext.
The Common Gateway Interface (CGI)
CGI in our EXAMPLE:
Parameter Passing from CLIENT to SERVER in CGI:
8. LEARN MORE
You can learn simple CSS and some simple JavaScript tricks quickly here:
You should try to learn more HTML, CSS, SQL, PHP in-depth at
You can try to learn more PYTHON in-depth at
You can try to learn PERL more at
CGI Perl Programming online free Book:
NEXT STEPS:
Add more items to the registration form such as email, address, phone, … (must create a new MySQL table with more columns, change the register.cgi program)
NEXT PROJECTS:
Make your web pages look more FANCY ! learn and use CSS, JavaScript. Examples are here:
- CSS-HTML:
- CSS-HTML-JAVASCRIPT:
Add COOKIES to keep track of who the user is. Use/implement SHOPPING CART to remember user selections. An example is here:
NEXT GOAL:
Improve skills and add more knowledge in all three areas:
CLIENT (html, css, javascript)
SERVER (python, php, perl, …)
DATABASE (SQL)
1