CSSE 290 Web Programming

Lecture 25: Join Practice, Cookies

Reading: 14.1 - 14.4

Attribution:Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Otherwise noted: Claude Anderson was given permission to modify the slides for CSSE 290 at Rose-Hulman by author Jessica Miller. The authors' original slides, based on Web Programming Step by Step, can be seen at http://webstepbook.com.
Some of the examples in some days' slides are from David Fisher at Rose-Hulman, who was kind enough to allow me to use them. My intention is to mark these examples with [DSF].

Valid HTML Valid CSS!

A suboptimal query

Improved query

Practice queries

Designing a query

Example imdb database

actors
idfirst_namelast_namegender
433259WilliamShatnerM
797926BritneySpearsF
831289SigourneyWeaverF
...
movies
idnameyearrank
112290Fight Club19998.5
209658Meet the Parents20007
210511Memento20008.7
...
roles
actor_idmovie_idrole
433259313398Capt. James T. Kirk
433259407323Sgt. T.J. Hooker
797926342189Herself
...
movies_genres
movie_idgenre
209658Comedy
313398Action
313398Sci-Fi
...
directors
idfirst_namelast_name
24758DavidFincher
66965JayRoach
72723WilliamShatner
...
movies_directors
director_idmovie_id
24758112290
66965209658
72723313398
...

IMDb table relationships / ids

IMDb tables tree

IMDb query example

[stepp@webster ~]$ mysql -u myusername -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.

mysql> use imdb_small;
Database changed

mysql> select * from actors where first_name like '%mick%';
+--------+------------+-----------+--------+
| id     | first_name | last_name | gender |
+--------+------------+-----------+--------+
|  71699 | Mickey     | Cantwell  | M      | 
| 115652 | Mickey     | Dee       | M      | 
| 470693 | Mick       | Theo      | M      | 
| 716748 | Mickie     | McGowan   | F      | 
+--------+------------+-----------+--------+
4 rows in set (0.01 sec)

IMDb practice queries

14.1: Cookie Basics

Stateful client/server interaction

amazon cookie

Sites like amazon.com seem to "know who I am." How do they do this? How does a client uniquely identify itself to a server, and how does the server provide specific content to each client?

What is a cookie?

om nom nom

How cookies are sent

cookie exchange

Myths about cookies

A "tracking cookie"

tracking cookie figure

Where are the cookies on my computer?

good enough for me

How long does a cookie exist?

14.2: Programming with Cookies

Cookies in JavaScript

document.cookie = "username=smith";   // setting two cookies
document.cookie = "password=12345";
document.cookie = "age=29; expires=Thu, 01-Jan-1970 00:00:01 GMT";  // deleting a cookie
...

// (later)
var allCookies = document.cookie.split(";");    // ["username=smith", "password=12345"]
for (var i = 0; i < allCookies.length; i++) {
	var eachCookie = allCookies[i].split("=");    // ["username", "smith"]
	var cookieName = eachCookie[0];               // "username"
	var cookieValue = eachCookie[1];              // "smith"
	...
}

Provided Cookie library

<!-- using the instructor-provided Cookie.js class -->
<script src="http://www.webstepbook.com/Cookie.js" type="text/javascript"></script>

Cookie.set("username", "smith");
// (later)
alert(Cookie.get("username"));   // smith

Setting a cookie in PHP

setcookie("name", "value");

setcookie("username", "martay");
setcookie("favoritecolor", "blue");
  • technically, a cookie is just part of an HTTP header, and it could be set using PHP's header function (but this is less convenient, so you would not want to do this):
    • header("Set-Cookie: username=martay; path=/; secure");

Retrieving information from a cookie

$variable = $_COOKIE["name"];   # retrieve value of the cookie

if (isset($_COOKIE["username"])) {
	$username = $_COOKIE["username"];
	print("Welcome back, $username.\n");
} else {
	print("Never heard of you.\n");
}
print("All cookies received:\n");
print_r($_COOKIE);
  • unset function deletes a cookie

Setting a persistent cookie in PHP

setcookie("name", "value", timeout);

$expireTime = time() + 60*60*24*7;   # 1 week from now
setcookie("CouponNumber", "389752", $expireTime);
setcookie("CouponValue", "100.00", $expireTime);

Removing a persistent cookie

setcookie("name", "", time() - 1);

setcookie("CouponNumber", "", time() - 1);

14.3: Sessions

What is a session?

How sessions are established

session

Sessions in PHP: session_start

session_start();

Accessing session data

$_SESSION["name"] = value;        # store session data
$variable = $_SESSION["name"];     # read session data
if (isset($_SESSION["name"])) {  # check for session data

if (isset($_SESSION["points"])) {
	$points = $_SESSION["points"];
	print("You've earned $points points.\n");
} else {
	$_SESSION["points"] = 0;  # default
}

Where is session data stored?

session cookie

Session timeout

Browsers that don't support cookies

session_start();   # same as usual

# Generate a URL to link to one of our site's pages
# (you probably won't ever need to do this)
$orderUrl = "/order.php?PHPSESSID=" . session_id();

Ending a session

session_destroy();

Implementing user logins

user login

Example simpsons database

students
idnameemailpassword
123Bartbart@fox.combartman
456Milhousemilhouse@fox.comfallout
888Lisalisa@fox.comvegan
404Ralphralph@fox.comcatfood
teachers
idname
1234Krabappel
5678Hoover
9012Stepp
courses
idnameteacher_id
10001Computer Science 1421234
10002Computer Science 1435678
10003Computer Science 190M9012
10004Informatics 1001234
grades
student_idcourse_idgrade
12310001B-
12310002C
45610001B+
88810002A+
88810003A+
40410004D+

Exercise: Simpsons grade display

grades

"Remember Me" feature

user login