cs 174: web programming november 2 class meeting department of computer science san jose state...
DESCRIPTION
Computer Science Dept. Spring 2015: April 14 CS 174: Web Programming © R. Mak More AJAX with jQuery, cont’d JavaScript and jQuery directly manage the request to the web server and the response. Rather than letting it happen automatically via the web browser - web server cycle. More control by the programmer! 3TRANSCRIPT
![Page 1: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/1.jpg)
CS 174: Web ProgrammingNovember 2 Class Meeting
Department of Computer ScienceSan Jose State University
Fall 2015Instructor: Ron Mak
www.cs.sjsu.edu/~mak
![Page 2: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/2.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
2
More AJAX with jQuery
When using AJAX, an HTML page does not explicitly need to have a form.
A JavaScript function creates a “virtual form” to pass data to a PHP page on the web server.
The PHP page only needs to generate a snippet of HTML instead of an entire page.
Simpler PHP code. Less data transmission over the network.
![Page 3: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/3.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
3
More AJAX with jQuery, cont’d
JavaScript and jQuery directly manage the request to the web server and the response.
Rather than letting it happen automatically via the web browser - web server cycle.
More control by the programmer!
![Page 4: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/4.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
4
Dynamically Populated Menu
Use AJAX to obtain results from a databaseto dynamically populate a drop-down menu:
![Page 5: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/5.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
5
Dynamically Populated Menu, cont’d
<body> <h1 class="ui-state-default">Teacher's Students</h1> <h2> Students of <select id="teachermenu"></select> </h2> <div id="output"></div></body>
school/studentsof4.html
![Page 6: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/6.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
6
Dynamically Populated Menu, cont’d
$(init);
function init(){ $("#teachermenu").selectmenu(); $("#teachermenu").on("selectmenuchange", showStudents); $.get("teachers.php", null, loadMenu);}
function loadMenu(data, status){ $("#teachermenu").html(data);}
school/studentsof4.js
![Page 7: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/7.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
7
Dynamically Populated Menu, cont’dclass Teacher{ private $id; private $first; private $last; public function getId() { return $this->id; } public function getFirst() { return $this->first; } public function getLast() { return $this->last; }}
...
$con = new PDO("mysql:host=localhost;dbname=school", "root", "sesame");$con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
school/teachers.php
![Page 8: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/8.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
8
Dynamically Populated Menu, cont’d
$query = "SELECT id, first, last FROM teacher ORDER BY last";$ps = $con->prepare($query);$ps->execute();$ps->setFetchMode(PDO::FETCH_CLASS, "Teacher"); // Construct menu options. Start with a blank option.print "<option value=0>$full</option>";while ($teacher = $ps->fetch()) { $id = $teacher->getId(); $first = $teacher->getFirst(); $last = $teacher->getLast(); $full = $first . " " . $last; print "<option value='$id'>$full</option>";} school/teachers.php
![Page 9: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/9.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
9
Dynamically Created Table
Use AJAX to obtain results from a databaseto dynamically create a table:
![Page 10: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/10.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
10
Dynamically Created Table, cont’d
function init(){ $("#teachermenu").selectmenu(); $("#teachermenu").on("selectmenuchange", showStudents); $.get("teachers.php", null, loadMenu);}
<body> <h1 class="ui-state-default">Teacher's Students</h1> <h2> Students of <select id="teachermenu"></select> </h2> <div id="output"></div></body>
school/studentsof4.js
school/studentsof4.html
![Page 11: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/11.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
11
Dynamically Created Table, cont’dfunction showStudents(event, ui){ teacherId = $("#teachermenu").val(); $.post("students.php", {"id": teacherId}, loadTable);}
function loadTable(data, status){ $("#output").html(data);}
studentsof4.js
![Page 12: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/12.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
12
Dynamically Created Table, cont’d
class StudentSubject{ private $first; private $last; private $subject; public function getFirst() { return $this->first; } public function getLast() { return $this->last; } public function getSubject() { return $this->subject; }}
$teacherId = filter_input(INPUT_POST, 'id');if ($teacherId == 0) return;
school/students.php
![Page 13: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/13.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
13
Dynamically Created Table, cont’d$con = new PDO("mysql:host=localhost;dbname=school", "root", "sesame");$con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// Prepared statement query.$query = "SELECT student.first, student.last, subject ". "FROM student, class, student_class ". "WHERE teacher_id = :teacher_id ". "AND code = class_code ". "AND student.id = student_id ". "ORDER BY subject, student.last";$ps = $con->prepare($query);$ps->bindParam(':teacher_id', $teacherId);$ps->execute();
createTable($ps); school/students.php
![Page 14: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/14.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
14
Dynamically Created Table, cont’d
function createTable(PDOStatement $ps){ print "<table>\n"; createHeaderRow($ps); $ps->execute(); $ps->setFetchMode(PDO::FETCH_CLASS, "StudentSubject"); // Construct the data rows. while ($ss = $ps->fetch()) { print "<tr>\n"; createDataRow($ss); print "</tr>\n"; } print "</table>\n";}
school/students.php
![Page 15: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/15.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
15
Dynamically Created Table, cont’dfunction createHeaderRow(PDOStatement $ps){ $row = $ps->fetch(PDO::FETCH_ASSOC); print "<tr>\n"; foreach ($row as $field => $value) { print "<th>$field</th>\n"; } print "</tr>\n";} function createDataRow(StudentSubject $ss){ print "<tr>\n"; print "<td>" . $ss->getFirst() . "</td>\n"; print "<td>" . $ss->getLast() . "</td>\n"; print "<td>" . $ss->getSubject() . "</td>\n"; print "</tr>\n";} school/students.php
![Page 16: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/16.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
16
load() Instead of $.get() Instead of:
Shorter:
function init(){ $("#teachermenu").selectmenu(); $("#teachermenu").on("selectmenuchange", showStudents); $.get("teachers.php", null, loadMenu);}
function loadMenu(data, status){ $("#teachermenu").html(data);}
function init(){ $("#teachermenu").selectmenu().load("teachers.php"); $("#teachermenu").on("selectmenuchange", showStudents);}
school/studentsof5.js
school/studentsof4.js
![Page 17: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/17.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
17
load() Instead of $.post() Instead of:
Shorter:
function showStudents(event, ui){ teacherId = $("#teachermenu").val(); $.post("students.php", {"id": teacherId}, loadTable);}
function loadTable(data, status){ $("#output").html(data);}
function showStudents(event, ui){ teacherId = $("#teachermenu").val(); $("#output").load("students.php", {"id": teacherId});}
school/studentsof4.js
school/studentsof5.js
![Page 18: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/18.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
18
Cookies
Normally, each connection you make to the web server via a URL is a separate transaction.
The web server has no memory of your previous transactions.
One way for the web server to remember information from one transaction to another is by using cookies.
![Page 19: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/19.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
19
Cookies, cont’d
A cookie is a small packet of data created by the web application. A cookie can hold at most about 4 KB of data.
The web server sends the cookie to your web browser. The browser stores the cookie in its cookie folder.
The next time you connect to the web app, the browser sends the cookie data along with any form data. The web application thereby “recalls” information
from the previous transaction.
![Page 20: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/20.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
20
Cookies, cont’d
PHP and MySQL for Dynamic Web Sites, 4th ed.by Larry UllmanPeachpit Press, 2012ISBN 978-0-321-78407-0
Each newly created cookie contains a unique session id to distinguish it from other cookies.
![Page 21: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/21.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
21
Cookies, cont’d
<?php $counter = 0; if (isset($_COOKIE['counter'])) { $counter = $_COOKIE['counter'] + 1; } setCookie('counter', $counter);?>
<!DOCTYPE html><html lang="en-US"><head> <meta charset="UTF-8"> <title>Cookie Counter</title></head>
<body> <?php echo "<h1>Cookie Counter: $counter</h1>\n"; ?></body></html>
Send a cookie.
Is there a cookie?
Send cookies beforesending any text to the web browser.
session/cookie.php
![Page 22: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/22.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
22
Deleting Cookies
To delete a cookie, call setCookie() with only the name parameter but no value.
Example: setCookie('counter');
![Page 23: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/23.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
23
Problems with Cookies
Small amount of data Only at most 4 KB.
Insecure The cookie data is kept by the web browser.
Sometimes disallowed Some browsers may have cookies turned off.
![Page 24: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/24.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
24
Sessions
Similar functionality to cookies.
More data can be stored.
More secure: Data is stored on the web server.
Also assigns a unique session id to each user. Sessions use cookies. But sessions can also work without cookies.
![Page 25: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/25.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
25
Sessions, cont’d<?php session_start();?>
<!DOCTYPE html><html lang="en-US"><head> <meta charset="UTF-8"> <title>Session Counter</title></head>
<body> <?php $counter = 0; if (isset($_SESSION['counter'])) { $counter = $_SESSION['counter'] + 1; } $_SESSION['counter'] = $counter; echo "<h1>Session Counter: $counter</h1>"; ?></body></html>
Start the session beforesending any text to the web browser.
sessaion/session.php
![Page 26: CS 174: Web Programming November 2 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak mak](https://reader036.vdocuments.us/reader036/viewer/2022062504/5a4d1b817f8b9ab0599bb2bf/html5/thumbnails/26.jpg)
Computer Science Dept.Spring 2015: April 14
CS 174: Web Programming© R. Mak
26
Deleting Sessions
Delete a session variable:
Delete all session variables:
Delete the session:
unset($_SESSION['counter']);
$_SESSION = array();
session_start();set_cookie('PHPSESSID');