![Page 1: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/1.jpg)
Multimedia im NetzOnline MultimediaWinter semester 2015/16
Tutorial 03 – Major Subject
Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐Ludwig-‐Maximilians-‐Universität München 1
![Page 2: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/2.jpg)
Today’s Agenda
• Quick test• Server side scripting: Stateful web apps
– Cookies– Sessions
• Object-‐oriented programming with PHP• Quiz• Discussion of previous assignments
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 2
![Page 3: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/3.jpg)
Quick Test
• We will distribute a 1-‐page test sheet in the tutorial• Fill it out and hand it back• Returned next week in the same tutorial slot• Be prepared for the exam ;)
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 3
![Page 4: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/4.jpg)
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 4
PHP and Statefulness:Sessions and Cookies
![Page 5: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/5.jpg)
Break Out
• Visit a website where you have an account.• Explore how the browser transmits cookies• Which information is inside the cookies?• Find out which websites stored cookies in your browser.
• Group discussion: What are the dangers of cookies, when are they harmless?
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 5
![Page 6: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/6.jpg)
Problem: HTTP is stateless
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 6
Request
Response
Client Server
Memory allocation
+ execution
![Page 7: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/7.jpg)
Cookies
• Goals: – Persist information on the client side– Identify client
• HTTP cookies:– Stored in browser– Usually small, serialized data (text)– Sent with all request headers depending on current host URL
• Example usages:– Items in a shopping cart– Measure interaction (navigation on a site)– Authentication
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 7
![Page 8: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/8.jpg)
Cookies are not…
• Necessarily evil:– Malware containers– Viruses– Spam
• A place to store large data– only small, serializable chunks– use the local storage API instead
• Dependent on server-‐side scripting– Also available with JavaScript
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 8
![Page 9: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/9.jpg)
The Cookie Dilemma
• There is a “cookie law” that requires web site operators to inform the visitors about the use of cookies.
• Users do not necessarily read / understand / want this• Almost all sites require cookies
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 9
![Page 10: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/10.jpg)
Cookies in PHP
• Cookies belong to the HTTP header– Must be set before any output is generated– Before the <html> tag– Before any print / echo / var_dump statements!
• Create a cookie: setcookie(...)setcookie("MMNCookie","Hello statefulness!");
• Read a cookie:var_dump($_COOKIE['MMNCookie']);– reading is done on the server– so reading only works after the cookie is sent back to the server!– that is, after refreshing the page after cookie was set
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 10
![Page 11: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/11.jpg)
Example: PHP cookies
<?phpif(isset($_POST['name'])){
setcookie('Name',$_POST['name']);}?><!DOCTYPE html><html>[...]<body><?phpif(isset($_COOKIE['Name'])){
echo '<h1>Hello '.$_COOKIE['Name'].'</h1>';}?>
<form method="post"><label>Name: <input type="text" name="name"/></label><input type="submit" />
</form></body></html>
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 11
![Page 12: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/12.jpg)
Sessions
• Cookie disadvantage: Only stored on the remote client • Sessions maintain “states” on the server side• Store current state of variables as long as connected to the
client • On the client side, sessions are identified with a session ID
cookie:– default cookie name in PHP: PHPSESSID– renaming possible with session_name()
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 12
![Page 13: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/13.jpg)
Sessions with PHP
• Sessions need to be started before any output occurs (like cookies)
• Create session ID cookie: session_start()
• Delete the session ID cookie:session_destroy()
• Read / write session values: – superglobal $_SESSION array– immediately reset session like this $_SESSION = array();
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 13
![Page 14: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/14.jpg)
Example: Counting visits
<?php session_start(); ?><!DOCTYPE html><html>[...]<body>
<?php
if(!isset($_SESSION['count'])){$_SESSION['count'] = 1;
}else{
$_SESSION['count']++;}
echo '<p>Current count: '.$_SESSION['count'].'</p>';
?></body></html>
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 14
![Page 15: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/15.jpg)
Example: Destroying Sessions
<?php session_start(); ?><!DOCTYPE html><html>[...] <body>
<?php
if(isset($_POST['destroy'])) {session_destroy();$_SESSION = array();
}
if(!isset($_SESSION['count'])){$_SESSION['count'] = 1;
}else{
$_SESSION['count']++;}
echo '<p>Current count: '.$_SESSION['count'].'</p>';
?><form method="post">
<input type="submit" name="destroy" value="Reset"/></form></body></html>
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 15
![Page 16: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/16.jpg)
Break Out: Hangman
• Create a “hangman” game with PHP. • A Google search for “hangman” might inspire you.
• Use a hard-‐coded word first, then think about ways to randomize the word or have players compete against eachother
• Take 25 minutes time• Present your solution to your peers
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 16
![Page 17: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/17.jpg)
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 17
Object Oriented Programming in PHP
![Page 18: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/18.jpg)
OOP Basics
• OOP paradigms and concepts (examples):– classes that turn into objectswhen instantiated– inheritance– interfaces– „Everything is an object“
• PHP class signature:
<?phpclass Lecture{
//put members and methods here}?>
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 18
![Page 19: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/19.jpg)
Define Member Variables
<?phpclass Lecture{
var $title = "Online Multimedia";var $semester = "winter 2015/2016";var $professor = "Prof. Dr. Heinrich Hussmann";var $date = "Thursdays 10-13h";
}?>
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 19
![Page 20: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/20.jpg)
Using a Class
• Importing and instantiatinga class;require_once("Lecture.php");$mmn = new Lecture();var_dump($mmn);
• Access to member values: arrow notationecho 'Title: '.$mmn->title;echo 'Semester: '.$mmn->semester;echo 'Professor: '.$mmn->professor;
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 20
![Page 21: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/21.jpg)
Adding Methods to Classes
<?phpclass Lecture{
var $title = "Online Multimedia";var $semester = "winter 2015/2016";var $professor = "Prof. Dr. Heinrich Hussmann";var $date = "Thursdays 10-13h";
function setDate($date){$this->date = $date;
}
function getDate(){return $this->date;
}}?>
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 21
![Page 22: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/22.jpg)
Calling methods
$mmn->setDate("Thursday morning");echo $mmn->getDate();
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 22
![Page 23: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/23.jpg)
Constructors
• PHP‘s constructors are methodswith a special name: __construct();
function __construct($ttl, $sms, $prf, $dt){
$this->title= $ttl;$this->semester = $sms;$this->professor = $prf;$this->date = $dt;
}• Use constructor:
$mmi = new Lecture("MMI","Winter semester","Prof. Butz","Wendesdays");
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 23
![Page 24: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/24.jpg)
Round-‐up Quiz
1. What does it mean to “serialize data”?2. Why are cookies only accessible after a page refresh?3. What is the difference between “cookies” and “sessions”?4. Are cookies stored on the server or on the client?5. What does session_destroy() actually do?6. How do you define a member variable for a class?7. How do you access a method with a given object?
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 24
![Page 25: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/25.jpg)
Thanks!What are your questions?
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 25
![Page 26: Multimedia*im Netz Online*Multimedia · Today’s*Agenda • Quick)test • Server)side)scripting:)Statefulweb)apps – Cookies – Sessions • Object=oriented)programming)with)PHP](https://reader034.vdocument.in/reader034/viewer/2022042304/5ecf29f98a389f133434aa34/html5/thumbnails/26.jpg)
Let’s begin with the Assignment!
• Download the assignment sheet• Start with task 1• You can collaborate with your neighbor
• Turn in the assignment by November 9th, 12:00 noonvia UniWorX
Ludwig-‐Maximilians-‐Universität München Online Multimedia WS 2015/16 -‐ Tutorial 03 -‐ 26