CICS 515 b Internet Programming Week 2. Mike Feeley

Size: px

Start display at page:

Download "CICS 515 b Internet Programming Week 2. Mike Feeley"

May Pope
5 years ago
Views:

1 CICS 515 b Internet Programming Week 2 Mike Feeley 1

2 Software infrastructure stuff MySQL and PHP store files in public_html run on remote.mss.icics.ubc.ca access as 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 - ( download JSLint - patched.js&use_mirror=umn - and set Ecplise AFT preferences to use it 2

3 Reading PHP Review

4 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

5 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 5

6 Database MySQL online documentation MySQL on command line ~% /usr/local/mysql/bin/mysql -p Enter password: Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 420 Server version: 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 names You can turn off this feature to get a quicker startup with -A Database changed mysql> 6

7 list tables mysql> show tables; Tables_in_feeley_database student row in set (0.00 sec) mysql> show a table s schema mysql> describe student; Field Type Null Key Default Extra sid int(11) NO PRI name varchar(32) YES NULL rows in set (0.36 sec) mysql> 7

8 delete the table mysql> drop table student; Query OK, 0 rows affected (0.19 sec) mysql> show tables; Empty set (0.00 sec) adding the student table schema 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 rows in set (0.02 sec) 8

sends resulting pure HTML document to client browser basic syntax foo.php: <html> <body> <?php echo "Hello.";?

9 Introduction to PHP 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 foo.php: <html> <body> <?php echo "Hello.";?> </body> </html> debugging nightmear any bug in script and sever my just send blank document build, test incrementally 9

10 variables names start with $ replaced within strings (rules a bit complicated) - foo.$var. foo or foo$var foo or foo${varfoo 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

11 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

12 PHP and MySQL online documentation 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

13 MySql Configuration file MySqld 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 <?php $dbhost = ':/.autofs/homes/ubccshome/f/feeley/cics515/mysql/var/mysql.sock';... You configure MySqld to choose an unique port to use this socket file [mysqld] port = 8743 socket = /.autofs/homes/ubccshome/f/feeley/cics515/mysql/var/mysql.sock datadir = /.autofs/homes/ubccshome/f/feeley/cics515/mysql/var Also see the Wiki 13

14 querying db and displaying results liststudents.php: <html> <body> <?php include '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> 14

$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 ();?$

15 the result web server Apache database MySql <html> <body> <?php include '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> mysql> select * from student order by sid; sid name country First Student NULL 20 Second Student NULL rows in set (0.04 sec) web browser IE, Safari, Firefox, etc. <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> 15

16 Sending updates back to the database 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 <form method=? 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 16

17 example simpleform.html: <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> simpleget.php: <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> simplepost.php: <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> 17

18 in action 18

19 Combining the HTML form and PHP processing 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 <html> <body> <?php echo "<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

20 Your turn... 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 20

21 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

22 22

$php'; if (isset($_post['action']) && $_POST['action']=='submitted') { $selected = $_POST['selected']; $sid = $_POST['sid']; $name = $_POST['name']; $isid = $_POST['iSid']; $iname = $_POST['iName'];$

23 An insert, delete and update form <html> <body> <?php include '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

24 Insert, delete and update the form in HTML (generated by the PHP page) <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

25 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

26 the PHP that handles submits 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

Understanding post (using get) 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

27 Understanding post (using get) 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) enterstudents.php? sid[]=10& name[]=first+student& sid[]=20& name[]=second+student& selected[]=0& action=submitted& isid=& iname=& update=update 27

28 Functions you can define functions (and even store them externally) function max ($arg0, $arg1) { if ($arg0>$arg1) return $arg0; else return $arg1; e.g., put standard stuff about students in one place studentlib.php: <?php function 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'");?> 28

29 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

30 Functions and Variable Scope 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 $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 blah 30

31 Function Arguments Pass by value is the standard approach value is copied from actual argument to formal argument foo ($a, $b) { echo $a.$b; foo ($x, $y); Pass by reference add ampersand to either formal or actual argument pointer to value is copied from actual to formal argument fooref (&$a, &$b) { echo $a.$b; foo (&$x, &$y); fooref ($x, $y); 31

32 Handling errors 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 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()); or like this function updatestudent ($sid, $name) { mysql_query ("UPDATE studentx SET name='$name' WHERE sid=$sid") or die ("updatestudent failed with db error: ".mysql_error()); 32

33 even better, use exceptions studentlib.php: 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()); enterstudents.php: 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 (); 33

34 JavaScript 34

35 JavaScript is not Java client-side scripting language program that runs in browser at client two ways to include it in HTML document embedded blah.html: <body> <script type="text/javascript"> document.write ("Hello from embedded JavaScript."); </script> </body> in separate file blah.html: <head> <script language="javascript" src="blah.js"></script> </head> blah.js: document.write ("Hello from separate file JavaScript.<br>"); 35

36 For example set select box when name changes... <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

37 or disable name input until select box is checked <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

38 Debugging JavaScript Firefox IE Disable script debugging in Internet Options, Tools, Advanced Safari defaults write com.apple.safari IncludeDebugMenu 1 Eclipse with ATF ( 38

39 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

CICS 515 a Internet Programming Week 3. Mike Feeley

CICS 515 a Internet Programming Week 3 Mike Feeley JavaScript JavaScript is not Java client-side scripting language program that runs in browser at client two ways to include it in HTML document embedded