SUNY New Paltz - Computer Science



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+DatabaseAt 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 systemSet-up your web spaceDesign: what will we build ?CLIENT programsDATABASESERVER programsSome explanations (+CGI)What if my program have ERRORS ?Learn MoreMove this website to CS shared folder (if you are assigned to one) 1. IMPORTANT information about our CS Linux system1.1 CS Server is a Web serverYou’ll need to put your website (web pages and Database) on a Web server so that Internet users can access it. Our school provides a free Web server (CS Linux server) for us. Every CS student can have:a CS (Linux) accounta MySQL database accountIf you haven’t done so then email Aram (agajania@cs.newpaltz.edu) ASAP and ask him to create accounts for you.You can access your account at the CS server REMOTELY so that you can create or transfer files needed for your website. To do that you’ll need to:+ use an app such as PUTTY(for Windows/PC) or SSH (for Mach)+ know the address or domain name of the Web server: wyvern.cs.newpaltz.edu1.2 Instructions How to Login to your (Linux) account at the CS ServerA) USING PUTTY (for Windows/PC)A1)Search web for “putty”A2) Download it (putty.exe) and move this file to a safe folder. Create a shortcut to this file for easy access.A3) Run (double click) on “putty”A4) Login using the same username and password for BlackboardYou are now at the CS server and should use LINUX/UNIX commands to get around.B) USING TERMINAL (for MAC OS)B1) Find Terminal in Mac osB2) TYPE command as shown below with your newpaltz username with domain name and enter the password to access the CS account:ssh YourBlackboardU HYPERLINK "mailto:username@wyvern.cs.newpaltz.edu" \h serName@wyvern.cs.newpaltz.edu Exp: if your username is smith01 then you should type:ssh smith01@wyvern.cs.newpaltz.eduThen, press enter. It will ask for password just type the same password you use for Blackboard (you won’t be able to see the characters while typing). Then, you should see something like this:1.3 Important Info about working with the CS Web server+ 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 named WWW (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 755 WWW+ when you run the web server programs the ERRORS are listed at a (shared with all other CS users) log, you see it by this command:tail -f /var/log/httpd24/error_log | grep YourUserName+ 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 get out of MySQL account and get BACK to your CS account you can type “quit” or “CTRL+C”+ If you COPY some code/text from a windows-based file like this one and paste it in a file in your account which is a Linux-based one you may need convert a Windows text file to Linux/Unix one. You can use the following command:dos2unix *in the folder which contain the files at the server (you’ll need to run this at the shell level, via putty or ssh):BASIC LINUX COMMANDSls=> to see the names of files and folders in your accountmkdir PDS=> to create a folder/directory named PDSls -l=> to see a list of files and folders with all detailscd PDS=> to go inside folder PDSls=> to see the names of files and folders in the current foldermkdir 01=> to create a folder/directory named 01cd 01=> to go inside folder 01ls=> to see the names of files and folders in the current folderrm a.txt => to delete the file a.txtcp a.txt b.txt => to make a copy of file a.txt, the new copy is named b.txtmv a.txt X/b.txt => to move file a.txt to folder X, the file also has a new name b.txtcd ..=> to go out of the current folder (up one level) 2. SET-UP your web space at the CS Linux systemStep 1: use PUTTY to login to your CS accountStep 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 WWWMust set the permission to 755:chmod 755 WWWTEST: 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 WWWCreate a sub-folder, for example “learn”:mkdir learnMust set the permission to 755:chmod 755 learnTEST: 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 3. 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 programsWe 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 learnCreate a sub-folder, for example “learn”:mkdir simpleMust set the permission to 755:chmod 755 simpleStep 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 ORcreate/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 (see PART 7):jpico index.htmlPicture files “clouds.jpg” and “logo.png” can be downloaded from here: CODES for these files are in HTML as follow:File nameContents/CodesLook/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="">XYX Group</a> is our parent company. Send us an email at <a href="mailto:support@"> support@</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/simple 5. DATABASEYou 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 (agajania@cs.newpaltz.edu) 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 accountmysql -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”:MariaDB> CREATE TABLE UserPass(userid CHAR(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.MariaDB> INSERT INTO UserPass VALUES ('user01','pass1'),('user02','pass2');f) You can check to see the contents of the table UserPassMariaDB> SELECT * FROM UserPass ;You should see something like this: g) Once you are done with the Database you can exit out of MySQL server and go back to the CS server by exit or quit 6. SERVER programsNow, 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 ORcreate/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 nameContents“register.cgi”#!/usr/bin/pythonimport cgi, cgitbimport MySQLdbwebForm = 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) mit()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 nameContents“login.cgi”#!/usr/bin/pythonimport cgi, cgitbimport MySQLdbmyForm = 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 = rowexcept: 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>"REPLACE the green text: "YourUserName","YourMySQLpassword","YourUserName_db" with your own username/password (keep the doublequote") the password here is for your MySQL account which is different from your New Paltz password, this MySQL password was sent to you via email when your MySQL account was created.IMPORTANT:Make sure that you change the permissions for these two CGI files:chmod 755 register.cgichmod 755 login.cgiSo, 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 “a” (for username) and “a” (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_logc) Go to MySQL and see if the new Username and Password has been added to the table UserPassmysql> SELECT * FROM UserPass ;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 ExplanationsHow does WEB work ?The WEB SPACE in your account at (CS Linux) Server :Hypertext Transfer Protocol?(HTTP):Hypertext Transfer Protocol?(HTTP) is an?application protocol?for distributed, collaborative,?hypermedia?information systems. Hypertext?is structured text that uses logical links (hyperlinks) between?nodes?containing 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:CREATE & EDIT A TEXT FILE ON A UNIX SERVERType this as command line to create a file named “science.txt”.jpico science.txtType something and then save the file by holding both CTRL and X.JPICO CommandsThe bottom two lines in the PICO screen list Quick Command keys. PICO commands are used in conjunction with the Control key (<Ctrl>?or?<control>?on a Macintosh), represented on the screen by the caret (^). The Control key is used like the Shift key; press and hold the Control key and then press the next character. For example,?<^x>?(<Ctrl+x> or?<control+x>) means you should press and hold the Control key and then press the x key.Moving the Cursor<^b>?or?<left arrow>?moves left one character.<^f>?or?<right arrow>?moves right one character.<^p>?or?<up arrow>?moves up to previous line.<^n>?or?<down arrow>?moves down to the next line.<^a>?moves to beginning of line .<^e>?moves to end of line.<^v>?moves page down.<^y>?moves page up (previous page).<^l>?redraws the current screen.Deleting Text<backspace>?erases the character to the left of the cursor.<^d>?deletes the character at the cursor position.<^k>?deletes the entire line at the cursor position.<^u>?undeletes (restores) the last line(s) deleted and places them at the cursor position.Saving a File<^x>?saves and exits PICO.<^o>?saves as you are editing; allows you to change the file's name.Other Useful Commands<^t>?spell checks your text<^w>?searches for text (i.e. “Where is?”). At the Search prompt, enter text in uppercase or lowercase.<^r>?reads in a file from your home directory .<^g>?accesses the online help. (<^x>?exits help.)<^j>?justifies paragraph.To open a file in your UNIX directory press?<Ctrl+r>?(<control+r>). At the prompt?File to insert from home directory, type the name of the file and press?<Enter>?(<return>). Or, press??<Ctrl+t>?(<control+t>) to select the To Files option from the?<^r>?submenu. Use the arrow keys to highlight the name of the file to be read and press?<Enter>?(<return>).Save a File When you finish editing your file, press?<^x>?to exit PICO. You will see this message:Save modified buffer (ANSWERING "No" WILL DESTROY CHANGES)?Press the?<y>?key to save the file with your changes. PICO then prompts with:File Name to Write:?filename.Press?<Enter>?(<return>) to keep the original filename. 8. What if my program have ERRORS ?It’s completely normal if first you end up with errors. Developing software is about fixing/debugging errors. However, developing web-based systems including this simple example is more challenging because when you TEST your program, in this case is at:cs.newpaltz.edu/~YourUserName/learn/simpleWhich is at the CLIENT site (your laptop) while the whole chain of programs involved (start with HTML form=>CGI program => MySQL table => HTML response/output back to the CLIENT site) runs at both SERVER and CLIENT sites and the system won’t tell you exactly where the errors are. Usually only “Internal Sever Error”.Here is the list of things you may like to check:Check if all file names (also those in the codes) are EXACTLY as in the instructions ? Remember it’s case sensitive.If all the folders and files inside have the right permissions (755 would be ok) ?If you have already created the table UserPass table in your MySQL account ?If you have replaced "YourUserName","YourMySQLpassword","YourUserName_db" in the two CGI programs with your OWN account info ?Have you run this command dos2unix * yet ?You may also want to copy-and-paste the codes for the two CGI programs again. First copy the code in this file to a text editor like NOTEPAD (not notepad+), then select the code in there and copy into the file in your Linux account.Get more INFO about where your errors are. The errors are usually are listed in /var/log/httpd24/error_log but this is shared by all users/accounts and can get very crowded when many users use/test the webpages at the same time. You can read just the parts which relate to your account by:Run this command in the putty/ssh window:tail -f /var/log/httpd24/error_log | grep YourUserName(replace YourUserName with your user name in the CS/New Paltz system) it will wait until you run the testTest/run the webpage/form which calls the CGI programGo back to the putty/ssh window and read carefully the messages there 9. LEARN MOREYou can learn simple CSS and some simple JavaScript tricks quickly here: should try to learn more HTML, CSS, SQL, PHP in-depth at can try to learn more PYTHON in-depth at can try to learn PERL more at Perl Programming online free Book: 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: : COOKIES to keep track of who the user is. Use/implement SHOPPING CART to remember user selections. An example is here: GOAL:Improve skills and add more knowledge in all three areas: CLIENT (html, css, javascript)SERVER (python, php, perl, …)DATABASE (SQL) 10. Move this website to CS shared folder (if you are assigned to one)<this is NOT for folders created BEFORE fall 2019>You and/or your team may be given a CS shared folder (for example: b-f20-01) at our CS Linux servers. This is a web folder where certain users (usually members of the team) can have access to, so that multiple users can share/change codes and test them online.a) To access your CS shared folder, first login to your CS account (via Putty,SSH, WinSCP, ...) then go to:/var/www/ebusiness/b-f20-01/htmlb) Create a subfolder /p1s2/ therec) Copy your html and picture files into the subfolder /p1s2/d) Copy your cgi files (register.cgi, login.cgi) to subfolder /cgi-bin/ e) Change paths to CGI programs in the HTML codes for the forms (where we call the CGI programs):in the subfolder /p1s2/ +) open index-p2-register.htm file and change the path to the CGI program to:<form method="post" action="../cgi-bin/register.cgi"> +) open index-p3-login.htm file and change the path to the CGI program to:<form method="post" action="../cgi-bin/login.cgi">f) Access the MySQL account which belongs to this CS shared folder. It may be more easier if you open a NEW window/connection with Putty/ssh just for database access. Login to your CS account, then type this command:mysql -u b_f20_01 -pand use the password for this account (NOT your personal password). The info (username, password, ...) for the MySQL account which belongs to your CS shared folder can be found in the file "mysql_databse.txt" right under the /b-f20-01/ folder or/var/www/ebusiness/b-f20-01/g) Now that you are in the new MySQL account, follow the same instructions in STEP 5 of the Web Workshop to create the User table ...h) TEST your website in the new place at: ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download