[PPT] - CICS 515 b Internet Programming Week 2 Mike Feeley 1 Software PowerPoint Presentation

SLIDE 1

CICS 515 b Internet Programming Week 2 Mike Feeley

1

SLIDE 2

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

SLIDE 3

Reading

PHP

Review 13.1-13.4
13.5
9.0 - 9.10

3

SLIDE 4

A Sample Application

4

SLIDE 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

http://www.cs.ubc.ca/~feeley/cics515/code/week2/enterStudents.php

5

SLIDE 6

MySQL online documentation

http://dev.mysql.com/doc/refman/5.0/en/sql-syntax.html

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: 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 names You can turn off this feature to get a quicker startup with -A Database changed mysql>

Database

6

SLIDE 7

list tables show a table’s schema

7

SLIDE 8

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

SLIDE 9

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> <?php echo "Hello."; ?> </body> </html> foo.php:

9

SLIDE 10

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’]

10

SLIDE 11

ther stuff is like C (which is like Java)
for loops, while loops, function etc.

11

SLIDE 12

PHP and MySQL

nline 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)

r die ('Error connecting to mysql');

mysql_select_db($dbname); ?>

12

SLIDE 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

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 = 8743 socket = /.autofs/homes/ubccshome/f/feeley/cics515/mysql/var/mysql.sock datadir = /.autofs/homes/ubccshome/f/feeley/cics515/mysql/var

13

SLIDE 14

querying db and displaying results

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

listStudents.php:

14

SLIDE 15

the result

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

web server

Apache

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

IE, Safari, Firefox, etc.

database

MySql

15

SLIDE 16

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

16

SLIDE 17

example

simpleForm.html: simpleGet.php: simplePost.php:

17

SLIDE 18

in action http://www.cs.ubc.ca/~feeley/cicis515/code/week2/simpleForm.html

18

SLIDE 19

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

SLIDE 20

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

SLIDE 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

SLIDE 22

http://www.cs.ubc.ca/~feeley/cics515/code/week2/insertStudent.php

22

SLIDE 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

SLIDE 24

the form in HTML (generated by the PHP page)

Insert, delete and update

24

SLIDE 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

SLIDE 26

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

SLIDE 27

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

SLIDE 28

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; }

<?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'"); } ?>

studentLib.php:

28

SLIDE 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

SLIDE 30

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 blah

30

SLIDE 31

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

SLIDE 32

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

SLIDE 33

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

SLIDE 34

JavaScript

34

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

SLIDE 36

For example

set select box when name changes ...

http://www.cs.ubc.ca/~feeley/cics515/code/week2/enterStudents4.php

36

SLIDE 37

r disable name input until select box is checked

http://www.cs.ubc.ca/~feeley/cics515/code/week2/enterStudents5.php

37

SLIDE 38

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

SLIDE 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