Embed Size (px)
Citation preview
CICS 515 bInternet Programming
Week 2
Mike Feeley
1
MySQL and PHP• store files in public_html
• run on remote.mss.icics.ubc.ca
• access as http://ws.mss.icics.ubc.ca/~username/...
• see wiki for configuration instructions and experience from previous years
Eclipse for HTML / JavaScript editing and debugging• get the full build
• install current ATF build
- (http://www.eclipse.org/atf/downloads/index_build.php?plat=all&buildID=0.2.1-v200704051500&XULPlugin=true)
• download JSLint
- http://sourceforge.net/project/downloading.php?groupname=atf-additions&filename=fulljslint-2007-05-20-patched.js&use_mirror=umn
- and set Ecplise AFT preferences to use it
Software infrastructure stuff
2
Reading
PHP• Review 13.1-13.4
• 13.5
• 9.0 - 9.10
3
A Sample Application
4
Description
simple student database• student ID is unique nine-digit number
• name is a 30 character string
store the student database in MySql
design a web page that• displays the complete list of students
• allows new students to be added
• allows students to be deleted
• allows student names to be changed
its in this weeks code base• http://www.cs.ubc.ca/~feeley/cics515/code/week2/enterStudents.php
5
MySQL online documentation• http://dev.mysql.com/doc/refman/5.0/en/sql-syntax.html
MySQL on command line
~% /usr/local/mysql/bin/mysql -pEnter password: Welcome to the MySQL monitor. Commands end with ; or \g.Your MySQL connection id is 420Server version: 5.0.41 MySQL Community Server (GPL)
Type 'help;' or '\h' for help. Type '\c' to clear the buffer.
mysql> use feeley_database;Reading table information for completion of table and column namesYou can turn off this feature to get a quicker startup with -A
Database changedmysql>
Database
6
list tables
show a table’s schema
mysql> show tables;+---------------------------+| Tables_in_feeley_database |+---------------------------+| student | +---------------------------+1 row in set (0.00 sec)
mysql>
mysql> describe student; +-------+-------------+------+-----+---------+-------+| Field | Type | Null | Key | Default | Extra |+-------+-------------+------+-----+---------+-------+| sid | int(11) | NO | PRI | | | | name | varchar(32) | YES | | NULL | | +-------+-------------+------+-----+---------+-------+2 rows in set (0.36 sec)
mysql>
7
delete the table
adding the student table schema
mysql> drop table student;Query OK, 0 rows affected (0.19 sec)
mysql> show tables;Empty set (0.00 sec)
mysql> CREATE TABLE student ( -> sid INT NOT NULL, -> name VARCHAR(30), -> PRIMARY KEY (sid));Query OK, 0 rows affected (0.02 sec)
mysql> DESCRIBE student;+-------+-------------+------+-----+---------+-------+| Field | Type | Null | Key | Default | Extra |+-------+-------------+------+-----+---------+-------+| sid | int(11) | NO | PRI | | | | name | varchar(30) | YES | | NULL | | +-------+-------------+------+-----+---------+-------+2 rows in set (0.02 sec)
8
PHP hypertext preprocessor• script embedded in an HTML document
• script is executed in web server when document is requested by client
• script inserts HTML code to replace itself in the document
• server sends resulting pure HTML document to client browser
basic syntax
debugging nightmear• any bug in script and sever my just send blank document — build, test incrementally
Introduction to PHP
<html><body><?phpecho "Hello.";?></body></html>
foo.php:
9
variables• names start with $
• replaced within strings (rules a bit complicated)
- “foo”.$var.”foo” or “foo$var foo” or “foo${var}foo”
• arrays are associative
- $a[2] or $a[‘cat’]
<html><body><?php$sid[0] = 10;$name[0] = "First Student";$sid[1] = 20;$name[1] = "Second Student";echo "<table border=2>";echo "<tr><td>".$sid[0]."</td><td>".$name[0]."</td></tr>";echo "<tr><td>".$sid[1]."</td><td>".$name[1]."</td></tr>";echo "</table>";?></body></html>
10
other stuff is like C (which is like Java)• for loops, while loops, function etc.
<html><body><?php$sid[0] = 10;$name[0] = "First Student";$sid[1] = 20;$name[1] = "Second Student";echo "<table border=2>";for ($i=0; $i<2; $i++) { echo "<tr><td>".$sid[$i]."</td><td>".$name[$i]."</td></tr>";}echo "</table>";?></body></html>
11
PHP and MySQL
online documentation• http://ca3.php.net/manual/en/index.php
dbconfig.php and opendb.php
<?php$dbhost = ':/.autofs/homes/ubccshome/f/feeley/cics515/mysql/var/mysql.sock';$dbuser = 'feeley';$dbpass = 'feeley';$dbname = 'feeley_database';?>
<?php$conn = mysql_connect($dbhost, $dbuser, $dbpass)
or die ('Error connecting to mysql');mysql_select_db($dbname);?>
12
MySql Configuration fileMySqld is configured by
• .my.sql file in your root directory
PHP attaches to mysql using a socket file• you name the file in your dbconfig.php
You configure MySqld• to choose an unique port
• to use this socket file
Also see the Wiki
<?php$dbhost = ':/.autofs/homes/ubccshome/f/feeley/cics515/mysql/var/mysql.sock';...
[mysqld]port = 8743socket = /.autofs/homes/ubccshome/f/feeley/cics515/mysql/var/mysql.sockdatadir = /.autofs/homes/ubccshome/f/feeley/cics515/mysql/var
13
querying db and displaying results
<html><body><?phpinclude 'dbconfig.php';include 'opendb.php';
$rows = mysql_query ("SELECT * FROM student ORDER BY sid");echo "<table border=2>\n";echo "<tr><td><b>SID</b></td><td><b>Name</b></td></tr>\n";while ($row = mysql_fetch_assoc ($rows)) echo "<tr><td>".$row['sid']."</td><td>".$row['name']."</td></tr>\n";echo "</table>\n";
mysql_close ();?></body></html>
listStudents.php:
14
the result
<html><body><?phpinclude 'dbconfig.php';include 'opendb.php';
$rows = mysql_query ("SELECT * FROM student ORDER BY sid");echo "<table border=2>\n";echo "<tr><td><b>SID</b></td><td><b>Name</b></td></tr>\n";while ($row = mysql_fetch_assoc ($rows)) echo "<tr><td>".$row['sid']."</td><td>".$row['name']."</td></tr>\n";echo "</table>\n";
mysql_close ();?></body></html>
web serverApache
<html><body><table border=2><tr><td><b>SID</b></td><td><b>Name</b></td></tr><tr><td>10</td><td>First Student</td></tr><tr><td>20</td><td>Second Student</td></tr></table></body></html>
web browserIE, Safari, Firefox, etc.
mysql> select * from student order by sid;+-----+----------------+---------+| sid | name | country |+-----+----------------+---------+| 10 | First Student | NULL | | 20 | Second Student | NULL | +-----+----------------+---------+2 rows in set (0.04 sec)
databaseMySql
15
when a form is submitted• browser sends name and value of every input element back to web server
• either using the “post” HTML message
- send input values in HTML, to a specified URL
• or the “get” HTML messages
- request a specified URL with input values appended to it
declaring form method and action
• method is “post” or “get”
- use “get” for idempotent operations — operations where performing once is the same as performing more than once
- otherwise use “post”
• action is URL that browser posts to or gets from
in PHP• $_POST[‘name’] or $_GET[‘name’]
• value of named input element
Sending updates back to the database
<form method=“?” action=“?”>
16
example<html><body><form method="post" action="simplePost.php"> <input name="p1" type="text" size="20"> <input name="p2" type="number"> <input name="Submit" value="POST" type="submit"></form><form method="get" action="simpleGet.php"> <input name="p1" type="text" size="20"> <input name="p2" type="number"> <input name="submit" value="GET" type="submit"></form></body></html>
<html><body><?php
$p1 = $_GET['p1'];$p2 = $_GET['p2'];
echo "<table>\n";echo "<tr><td>p1</td><td>$p1</td></tr>";echo "<tr><td>p2</td><td>$p2</td></tr>";echo "</table>";?></body></html>
<html><body><?php
$p1 = $_POST['p1'];$p2 = $_POST['p2'];
echo "<table>\n";echo "<tr><td>p1</td><td>$p1</td></tr>";echo "<tr><td>p2</td><td>$p2</td></tr>";echo "</table>";?></body></html>
simpleForm.html:
simpleGet.php: simplePost.php:
17
in action http://www.cs.ubc.ca/~feeley/cicis515/code/week2/simpleForm.html
18
generate all HTML dynamically using PHP
submit action is current form _SERVER[‘PHP_SELF’]
use hidden input on form to see if anything submitted yet
Combining the HTML form and PHP processing
<html><body><?phpecho "<form method='post' action=${_SERVER['PHP_SELF']}>";echo " <input name='action' type='hidden' value='submitted'>";echo " <input name='p1' type='text' size='20'>";echo " <input name='p2' type='number'>";echo " <input name='Submit' value='POST' type='submit'>";echo "</form>";if (isset($_POST['action']) && $_POST['action']=='submitted') { $p1 = $_POST['p1']; $p2 = $_POST['p2']; echo "<table>\n"; echo "<tr><td>p1</td><td>$p1</td></tr>"; echo "<tr><td>p2</td><td>$p2</td></tr>"; echo "</table>";}?></body></html>
19
build combo form for access/insert to student database• lists all student in the database (SID and NAME)
• has an input form for a new SID and NAME and a submit button “INSERT”
• inserts new student into database when submitted
don’t look at the next slide
Your turn ...
20
if (isset($_POST['action']) && $_POST['action']=='submitted') { $sid = $_POST['sid']; $name = $_POST['name']; if (isset($_POST['insert'])) mysql_query ("INSERT INTO student(sid,name) VALUES($sid,'$name')");}
$rows = mysql_query ("SELECT * FROM student ORDER BY sid");echo "<table border=2>\n";echo "<tr><td><b>SID</b></td><td><b>Name</b></td></tr>\n";while ($row = mysql_fetch_assoc ($rows)) echo "<tr><td>".$row['sid']."</td><td>".$row['name']."</td></tr>\n";echo "</table>\n";
echo "<form method='post' action=${_SERVER['PHP_SELF']}>";echo "<table border=1>";echo "<tr><td> <td align=center>sid<td align=center>name";echo "<input type='hidden' name='action' value='submitted'>";echo "<tr><td><input type='submit' name='insert' value='Insert'>";echo "<td><input name='sid' type='text' size='10'>";echo "<td><input name='name' type='text' size='30'>";echo "</table>";echo "</form>";
21
http://www.cs.ubc.ca/~feeley/cics515/code/week2/insertStudent.php
22
An insert, delete and update form<html><body><?phpinclude 'dbconfig.php';include 'opendb.php';
if (isset($_POST['action']) && $_POST['action']=='submitted') { $selected = $_POST['selected']; $sid = $_POST['sid']; $name = $_POST['name']; $iSid = $_POST['iSid']; $iName = $_POST['iName']; if (isset($_POST['update'])) { foreach ($selected as $i) mysql_query ("UPDATE student set name='".$name[$i]."' WHERE sid=".$sid[$i]); } else if (isset($_POST['insert'])) { mysql_query ("INSERT INTO student(sid,name) VALUES ($iSid,'$iName')"); } else if (isset($_POST['delete'])) { foreach ($selected as $i) mysql_query ("DELETE FROM student WHERE sid=".$sid[$i]); }}
echo "<form method='post' action=${_SERVER['PHP_SELF']}>\n";echo "<table border=1>\n";echo "<tr><td> </td><td><b>SID</b></td>";echo "<td><b>Name</b></td></tr>\n";$rows = mysql_query ("SELECT sid, name FROM student ORDER BY sid");for ($i=0; $i<mysql_numrows($rows); $i++) { $sid = mysql_result ($rows, $i, 'sid'); $name = mysql_result ($rows, $i, 'name'); echo "<tr>\n"; echo "<td><input name='selected[]' type='checkbox' value='$i'>\n"; echo "<td>$sid<input type='hidden' name='sid[]' value='$sid'>\n"; echo "<td><input name='name[]' type='text' size='30' value='$name'>\n"; echo "</tr>\n";}echo "<input type='hidden' name='action' value='submitted'>\n";echo "<tr><td><input type='submit' name='insert' value='Insert'>\n";echo "<td><input name='iSid' type='text' size='10'>\n";echo "<td><input name='iName' type='text' size='30'>\n";echo "</table>\n";echo "<input type='submit' name='update' value='Update'>\n";echo "<input type='submit' name='delete' value='Delete'>\n";echo "</form>\n";
mysql_close ();
?></body></html>
23
the form in HTML (generated by the PHP page)
Insert, delete and update
<html><body><form method='post' action=/~feeley/515-0/enterstudents.php> <table border=1> <tr><td> </td><td><b>SID</b></td><td><b>Name</b></td></tr> <tr> <td><input name='selected[]' type='checkbox' value='0'> <td>10<input type='hidden' name='sid[]' value='10'> <td><input name='name[]' type='text' size='30' value='First Student'> </tr> <tr> <td><input name='selected[]' type='checkbox' value='1'> <td>20<input type='hidden' name='sid[]' value='20'> <td><input name='name[]' type='text' size='30' value='Second Student'> </tr> <input type='hidden' name='action' value='submitted'> <tr><td><input type='submit' name='insert' value='Insert'> <td><input name='iSid' type='text' size='10'> <td><input name='iName' type='text' size='30'> </table> <input type='submit' name='update' value='Update'> <input type='submit' name='delete' value='Delete'></form></body></html>
24
the PHP that produces the form
echo "<form method='post' action=${_SERVER['PHP_SELF']}>\n";echo "<table border=1>\n";echo "<tr><td> </td><td><b>SID</b></td>";echo "<td><b>Name</b></td></tr>\n";$rows = mysql_query ("SELECT sid, name FROM student ORDER BY sid");for ($i=0; $i<mysql_numrows($rows); $i++) { $sid = mysql_result ($rows, $i, 'sid'); $name = mysql_result ($rows, $i, 'name'); echo "<tr>\n"; echo "<td><input name='selected[]' type='checkbox' value='$i'>\n"; echo "<td>$sid<input type='hidden' name='sid[]' value='$sid'>\n"; echo "<td><input name='name[]' type='text' size='30' value='$name'>\n"; echo "</tr>\n";}echo "<input type='hidden' name='action' value='submitted'>\n";echo "<tr><td><input type='submit' name='insert' value='Insert'>\n";echo "<td><input name='iSid' type='text' size='10'>\n";echo "<td><input name='iName' type='text' size='30'>\n";echo "</table>\n";echo "<input type='submit' name='update' value='Update'>\n";echo "<input type='submit' name='delete' value='Delete'>\n";echo "</form>\n";
25
the PHP that handles submits
www.cs.ubc.ca/~feeley/cics515/code/week2/enterStudents.php
if (isset($_POST['action']) && $_POST['action']=='submitted') { $selected = $_POST['selected']; $sid = $_POST['sid']; $name = $_POST['name']; $iSid = $_POST['iSid']; $iName = $_POST['iName']; if (isset($_POST['update'])) { foreach ($selected as $i) mysql_query ("UPDATE student SET name='".$name[$i]."' WHERE sid=".$sid[$i]); } else if (isset($_POST['insert'])) { mysql_query ("INSERT INTO student(sid,name) VALUES ($iSid,'$iName')"); } else if (isset($_POST['delete'])) { foreach ($selected as $i) mysql_query ("DELETE FROM student WHERE sid=".$sid[$i]); }}
26
when a submit button causes form inputs to be posted• every input is added to the POST area of the HTTP submission to the web server
• for radio buttons, checkboxes and buttons, their name/value appear only if checked/pressed
to understand, lets convert form to GET instead of POST• change all $_POST to $_GET and convert form methods to ‘get’
• now everything previously sent in the POST area is appended to the URL on submit
if the user selects the line with SID 10 and presses update• here is the URL send to web server (formatted to make it easier to read)
Understanding post (using get)
http://localhost/~feeley/515-0/enterstudents.php?sid[]=10&name[]=First+Student&sid[]=20&name[]=Second+Student&selected[]=0&action=submitted&iSid=&iName=&update=Update
27
you can define functions (and even store them externally)
e.g., put standard stuff about students in one place
Functions
function max ($arg0, $arg1) { if ($arg0>$arg1) return $arg0; else return $arg1;}
<?phpfunction getStudents () { return mysql_query ("SELECT sid, name FROM student ORDER BY sid");}function insertStudent ($sid, $name) { mysql_query ("INSERT INTO student(sid,name) VALUES ($sid,'$name')");}function updateStudent ($sid, $name) { mysql_query ("UPDATE student SET name='$name' WHERE sid=$sid");}function deleteStudent ($sid) { mysql_query ("DELETE FROM student WHERE sid='$sid'");}?>
studentLib.php:
28
then enterstudents.php becomes
...
if (isset($_POST['update'])) { foreach ($selected as $i) updateStudent ($sid[$i], $name[$i]); } else if (isset($_POST['insert'])) { insertStudent ($iSid, $iName); } else if (isset($_POST['delete'])) { foreach ($selected as $i) deleteStudent ($sid[$i]); }}
echo "<form method='post' action=${_SERVER['PHP_SELF']}>\n";echo "<table border=1>\n";echo "<tr><td> </td><td><b>SID</b></td>";echo "<td><b>Name</b></td></tr>\n";$rows = getStudents ();
...
29
Variables have no declaration statement• common to stripping languages --- less typing
• PHP is dynamically typed so no need to associate type in declaration
Use-without-declare has some drawbacks• if you misspell a variable ... well, you’ve created a new variable
• how can you differentiate local and global variables?
• for these reasons, some dynamically-typed languages do have variable declaration
PHP’s compromise• to use a global variable inside of a function, it must be declared using “global” keyword
Functions and Variable Scope
$foo = "blah";function a() { $foo = "blah blah"; echo $foo;}a();echo $foo;
$foo = "blah";function a() { global $foo; $foo = "blah blah"; echo $foo;}a();echo $foo;
blah blah blah30
Function Arguments
Pass by value• is the standard approach
• value is copied from actual argument to formal argument
Pass by reference• add ampersand to either formal or actual argument
• pointer to value is copied from actual to formal argument
foo ($a, $b) { echo $a.$b;}foo ($x, $y);
fooref (&$a, &$b) { echo $a.$b;}foo (&$x, &$y);fooref ($x, $y);
31
PHP has exceptions with Java syntax• this is what you should use for functions you write
some functions fail by returning false• this how mysql_*() functions fail
• you can test list this
• or like this
Handling errors
function updateStudent ($sid, $name) { $result = mysql_query ("UPDATE studentx SET name='$name' WHERE sid=$sid"); if (!$result) die ("updateStudent failed with db error: ".mysql_error());}
function updateStudent ($sid, $name) { mysql_query ("UPDATE studentx SET name='$name' WHERE sid=$sid") or die ("updateStudent failed with db error: ".mysql_error());}
32
even better, use exceptions
class StudentDBException extends Exception {}
function updateStudent ($sid, $name) { $result = mysql_query ("UPDATE student SET name='$name' WHERE sid=$sid"); if (!$result) throw new StudentDBException (mysql_error());}
try { if (isset($_POST['action']) && $_POST['action']=='submitted') { $selected = $_POST['selected']; $sid = $_POST['sid']; $name = $_POST['name']; $iSid = $_POST['iSid']; $iName = $_POST['iName']; if (isset($_POST['update'])) { foreach ($selected as $i) updateStudent ($sid[$i], $name[$i]);... echo "</form>\n";} catch (StudentDBException $e) { die ("Student database error: ".$e->getMessage());}mysql_close ();
studentLib.php:
enterStudents.php:
33
JavaScript
34
JavaScript
is not Java
client-side scripting language• program that runs in browser at client
two ways to include it in HTML document• embedded
• in separate file
<body><script type="text/javascript"> document.write ("Hello from embedded JavaScript.");</script></body>
<head><script language="JavaScript" src="blah.js"></script></head>
document.write ("Hello from separate file JavaScript.<br>");
blah.html:
blah.html:
blah.js:
35
For example
set select box when name changes ...
http://www.cs.ubc.ca/~feeley/cics515/code/week2/enterStudents4.php
<script type="text/javacript"> function checkBox (row) { document.getElementById('checkbox'+row).checked = true; }</script>... for ($i=0; $i<mysql_numrows($rows); $i++) { $sid = mysql_result ($rows, $i, 'sid'); $name = mysql_result ($rows, $i, 'name'); echo "<tr>\n"; echo "<td><input id='checkbox$i' "; echo "name='selected[]' type='checkbox' value='$i'>\n"; echo "<td>$sid<input type='hidden' name='sid[]' value='$sid'>\n"; echo "<td><input name='name[]' type='text' size='30' value='$name'"; echo "onchange='checkBox($i)'>\n"; echo "</tr>\n"; }
36
or disable name input until select box is checked
http://www.cs.ubc.ca/~feeley/cics515/code/week2/enterStudents5.php
<script type="text/javascript"> function checkBox (row) { var box = document.getElementById('checkbox'+row); var name = document.getElementById('name'+row); name.disabled = !box.checked; }</script>... echo "<td><input id='checkbox$i' "; echo "name='selected[]' type='checkbox' value='$i'"; echo " onchange='checkBox($i)'>\n"; echo "<td>$sid<input type='hidden' name='sid[]' value='$sid'>\n"; echo "<td><input id='name$i' name='name[]' type='text' size='30'"; echo " value='$name' disabled='true'>\n";
37
Debugging JavaScript
Firefox• https://addons.mozilla.org/en-US/firefox/addon/216/
IE• “Disable script debugging” in Internet Options, Tools, Advanced
Safari•defaults write com.apple.Safari IncludeDebugMenu 1
Eclipse• with ATF (http://www.eclipse.org/atf/)
38
Homework
Assignment 1• on web page Today
• due a week Sunday
Project• finish UML and database schema today
• basic layout for artwork and styles etc. next week
39
