SLIDE 1
1
IT350: Web & Internet Programming
Set 15: Cookies
Information Example
https://www.usna.edu/Users/cs/adina/teaching/it350/fall2016/solutions/cookies/info.html (“info” link on today’s calendar)
Information Example - - PDF document
Information Example - - PDF document
IT350: Web & Internet Programming Set 15: Cookies Information Example https://www.usna.edu/Users/cs/adina/teaching/it350/fall2016/solutions/cookies/info.html (info link on todays calendar) How does the second page know what you
SLIDE 2
SLIDE 3
3
JavaScript: Using Cookies
Accessing a cookie
var cookies = document.cookie.split(“;”); for( i = 0; i < cookies.length; i++ ) var cookie = cookies[i].split(“=“); …
Setting a cookie
document.cookie = "name=" + escape("J Smith");
Exercise #1: JS
Ask user for favorite quote using a window prompt. Save quote in a cookie identified by “favQuote”. Display quote on the page.
SLIDE 4
4
Storing Cookies – More Realistic
- By default, cookies expire when session ends
- Set “expires” attribute to make it stick around
function createCookie(identifier, value, days) { if( days ) { var date = new Date(); date.setTime( date.getTime()+(days*24*60*60*1000) ); var expires = "; expires=“ + date.toGMTString(); } else var expires = ""; document.cookie = identifier + "=“ + escape(value) + expires; } function eraseCookie(identifier) { createCookie(identifier, "", -1); }
Reading Cookies – More Realistic
// Return the 'value' of the cookie with identifier 'desiredId' // returns null if no match found. function readCookie(desiredId) { // First split the pairs apart on '; ' var pairs = document.cookie.split("; "); // Now split each pair on '='. Check if have a match for (var i=0; i < pairs.length; i++) { var aPair = pairs[i]; // split into desired parts and check for match var cookieTokens = aPair.split("="); var id = cookieTokens[0]; var value = cookieTokens[1]; if (id == desiredId) { // found desired cookie -- return value return unescape(value); } } return null; // no match }
SLIDE 5
5
Exercise #2: JS
Read the value of a cookie named “favQuote”. Display it in a pop-up message if it exists, otherwise display “no quotes”
Cookies – Java Script and PHP
Cookies with JavaScript
– Create cookie (document.cookie = “color=red”) – Read cookie (document.cookie) – Where are cookies stored??
Cookies with PHP
– Demand that the browser create a cookie with “setcookie” – Browser always sends appropriate cookies back to server with request – Read cookie
- $_COOKIE super-global variable
– Where are cookies stored??
SLIDE 6
6
HTTP Protocol – HTTP Response
HTTP/1.0 200 OK Set-Cookie: theme=light Set-Cookie: session=5gd7324dx; Expires=Wed, 11 Oct 2018 12:27:03 GMT Content-type: text/html <!DOCTYPE html> <html xmlns=“http://www.w3.org/1999/xhtml”> …
Create Cookies with PHP
(Assume this file invoked from a HTML form with fields name, height, and color)
<?php require('page.inc.php'); $name = $_POST["name"]; $height = $_POST["height"]; $color = $_POST["color"]; $expires = time() + 86400; setcookie("Name",$name,$expires); setcookie("Height",$height,$expires); setcookie("Color",$color,$expires); $page = new Page("Storing Cookies"); $page->content = "<h1>A cookie was stored!</h1>"; $page->content .= "<h2>Name: $name <br> Height: $height <br> Color: $color</h2>"; $page->display(); ?>
SLIDE 7
7
Read Cookies With PHP
<?php require("page.inc.php"); $page = new Page("Reading cookies"); $name=""; $height = ""; $color = ""; if (isset($_COOKIE["Name"])) $name = $_COOKIE["Name"]; $height = $_COOKIE["Height"]; $color = $_COOKIE["Color"]; if (!empty($name) && !empty($height) && !empty($color)) { $page->content = "<h1>Some cookies were found!</h1>"; $page->content .="<h2>Name: $name</h2>"; $page->content .="<h2>Height: $height</h2>"; $page->content .="<h2>Color: $color</h2>"; } else{ $page->content ="<h1>Could not find cookies for Name, Height,
- r Color</h1>";
} $page->display();?>
Exercise #3: PHP (track users)
When PHP is called, look for a “sessionID” cookie. If present, print “Welcome back” (in HTML). If the cookie doesn’t exist, create a random ID and set the cookie. Print “Welcome visitor!”
(hint: generate a random number with rand())
SLIDE 8
8
Exercise #4: PHP
a)Create a cookie called “favQuote” with value “DTT/FSA”. b)Then change your program to instead use the quote provided by the user through a form submission with param name “quote”.
Remember
- Relevant cookies always sent by browser to the
server
- Can create with JavaScript and read with PHP
- Or create with PHP and read with JavaScript