729G28 Webbprogrammering och databaser Introduktion till webbutveckling med PHP Jakob Pogulis Institutionen för Datavetenskap (IDA)
729G28 Webbprogrammering och databaser Introduktion till webbutveckling med PHP Jakob Pogulis Institutionen för Datavetenskap (IDA)
Föreläsningen i korthet Dynamiska webbsidor Programmering med PHP Hantering av formulär Databasanslutningar 3
HTML Struktur Kopplingar mellan dokument CSS Presentation JavaScript Validering Animering Interaktiva dokument 4
<html> <head> <title>jakobs hemsida</title> <script type= text/javascript src= assets/jquery.js ></script> </head> <body> <h1>välkommen!</h1> <p>lorem ipsum <strong>dolor sit</strong> amet...</p> </body> </html> 5
<html> <head> <title>jakobs hemsida</title> <script type= text/javascript src= assets/jquery.js ></script> </head> <body> <h1>välkommen!</h1> <p>lorem ipsum <strong>dolor sit</strong> amet...</p> </body> </html> Titel på hemsidan! 6
<html> <head> <title>jakobs hemsida</title> <script type= text/javascript src= assets/jquery.js ></script> </head> <body> <h1>välkommen!</h1> <p>lorem ipsum <strong>dolor sit</strong> amet...</p> </body> </html> Rubrik på hemsidan! 7
<html> <head> <title>jakobs hemsida</title> <script type= text/javascript src= assets/jquery.js ></script> </head> <body> <h1>välkommen!</h1> <p>lorem ipsum <strong>dolor sit</strong> amet...</p> </body> </html> Paragraf på hemsidan! 8
DYNAMISKA WEBBSIDOR 9
Hur gör jag när någon vill lämna en recension på en present? Måste jag skapa ett HTML dokument för varje present? Alla sidor är ju exakt likadana förutom text och bild 10
Användaren skapar en annons Annonsen visas på hemsidan Vem är det egentligen som skapar webbsidan som visar annonsen? 11
Användare söker på ordet bike Bilder och text som matchar sökningen presenteras Hur visste han eller hon som designade webbsidan a7 jag skulle söka på bike? Finns det färdiga HTML sidor för alla tänkbara nyckelord? 12
Bestick.html Vit ros.html Röd ros.html 13
Vit ros.html Vit ros.html Vit ros.html 14
Med PHP kan jag generera HTML på min server, så har jag all kod för alla presenter på ett par rader! 15
I've never thought of PHP as more than a simple tool to solve problems. Rasmus Lerdorf PROGRAMMERING MED PHP 16
PHP - Hypertext Preprocessor Populärt språk för webbutveckling Facebook Digg Wikipedia Lätt att komma igång Lätt att hitta information (Se upp för forum) 17
PHP - Hypertext Preprocessor Koden skrivs tillsammans med HTML i ett.php dokument PHP, Java, C#, Python, Ruby, Perl, Scala, Go... I 729G28 använder vi PHP 18
Server till klient Kod exekveras på servern Server (www-und.ida.liu.se/~jakpo779) PHP kod tolkas och exekveras på servern Servern genererar HTML med hjälp av PHP-koden och skickar resultatet till klienten (webbläsaren) Resultatet levereras till klienten (webbläsaren) Klient (Firefox, Google Chrome, Opera) HTML kod tolkas och visas upp av webbläsaren 19
PHP SYNTAX 20
Datatyper och operationer Beskrivning PHP Python Dynamisk typning Alla variabler kan innehålla alla typer av data $variable1 = 0; $variable2 = Jakob Pogulis ; $variable3 = 3.14; $variable4 = TRUE; variable1 = 1 variable2 = Jakob Pogulis variable3 = 3.14 variable4 = True AritmeGska operagoner + - * / % + - * / % Strängar Kan skrivas inom och Jämförelser Kombinerade jämförelser görs med hjälp av AND (&&), OR ( ) och/eller NOT (!) Hello world Hello world $variable = world ; print( Hello $variable ); print( Hello $variable ); < > >= <=!= == 5 == 5 // TRUE 5 === 5 // FALSE 5 > 4 && 5 < 6 // TRUE 5 < 1 5 < 6 // TRUE Hello world Hello world variable = world print( Hello variable ) print( Hello variable ) < > >= <=!= == 5 == 5 // False Saknar motsvarighet* 5 > 4 and 5 < 6 // True 5 < 1 or 5 < 6 // True * Tillräckligt sant för denna föreläsning 21
Datatyper och operationer Beskrivning PHP Python Dynamisk typning Alla variabler kan innehålla alla typer av data $variable1 = 0; $variable2 = Jakob Pogulis ; $variable3 = 3.14; $variable4 = TRUE; variable1 = 1 variable2 = Jakob Pogulis variable3 = 3.14 variable4 = True AritmeGska operagoner + - * / % + - * / % Strängar Kan skrivas inom och Jämförelser Kombinerade jämförelser görs med hjälp av AND (&&), OR ( ) och/eller NOT (!) Hello world Hello world $variable = world ; print( Hello $variable ); print( Hello $variable ); < > >= <=!= == 5 == 5 // TRUE 5 === 5 // FALSE 5 > 4 && 5 < 6 // TRUE 5 < 1 5 < 6 // TRUE Hello world Hello world variable = world print( Hello variable ) print( Hello variable ) < > >= <=!= == 5 == 5 // False Saknar motsvarighet* 5 > 4 and 5 < 6 // True 5 < 1 or 5 < 6 // True * Tillräckligt sant för denna föreläsning 22
Datatyper och operationer Beskrivning PHP Python Dynamisk typning Alla variabler kan innehålla alla typer av data $variable1 = 0; $variable2 = Jakob Pogulis ; $variable3 = 3.14; $variable4 = TRUE; variable1 = 1 variable2 = Jakob Pogulis variable3 = 3.14 variable4 = True Dubbelfnuttar tolkar variabler som data Enkelfnuttar tolkar variabler som text AritmeGska operagoner + - * / % + - * / % Strängar Kan skrivas inom och Jämförelser Kombinerade jämförelser görs med hjälp av AND (&&), OR ( ) och/eller NOT (!) Hello world Hello world $variable = world ; print( Hello $variable ); print( Hello $variable ); < > >= <=!= == 5 == 5 // TRUE 5 === 5 // FALSE 5 > 4 && 5 < 6 // TRUE 5 < 1 5 < 6 // TRUE Hello world Hello world variable = world print( Hello variable ) print( Hello variable ) < > >= <=!= == 5 == 5 // False Saknar motsvarighet* 5 > 4 and 5 < 6 // True 5 < 1 or 5 < 6 // True * Tillräckligt sant för denna föreläsning 23
Datatyper och operationer Beskrivning PHP Python Dynamisk typning Alla variabler kan innehålla alla typer av data $variable1 = 0; $variable2 = Jakob Pogulis ; $variable3 = 3.14; $variable4 = TRUE; variable1 = 1 variable2 = Jakob Pogulis variable3 = 3.14 variable4 = True AritmeGska operagoner + - * / % + - * / % Strängar Kan skrivas inom och Jämförelser Kombinerade jämförelser görs med hjälp av AND (&&), OR ( ) och/eller NOT (!) Hello world Hello world $variable = world ; print( Hello $variable ); print( Hello $variable ); < > >= <=!= == 5 == 5 // TRUE 5 === 5 // FALSE 5 > 4 && 5 < 6 // TRUE 5 < 1 5 < 6 // TRUE Hello world Hello world variable = world print( Hello variable ) print( Hello variable ) < > >= <=!= == 5 == 5 // False Saknar motsvarighet* 5 > 4 and 5 < 6 // True 5 < 1 or 5 < 6 // True * Tillräckligt sant för denna föreläsning 24
Kontrollstrukturer Beskrivning PHP Python SelecGon (if- satser) Om, annars om, annars... For loopar När ni vet hur många gånger ni måste göra något. While loopar När ni inte kan räkna ut hur många gånger ni måste göra något. if ($name == Jakob ) { else if ($name == Anna ) { else { for ($i = 0; $i < 10; $i++) { while ($name!= Jakob ) { if (name == Jakob ): elif (name == Anna ): else: for i in range(10): while (name!= Jakob ): Det finns fler kontrollstrukturer, men de är inte nödvändiga i denna kurs. 25
Kontrollstrukturer Beskrivning PHP Python SelecGon Om, annars om, annars... For loopar När ni vet hur många gånger ni måste göra något. While loopar När ni inte kan räkna ut hur många gånger ni måste göra något. if ($name == Jakob ) { else if ($name == Anna ) { else { for ($i = 0; $i < 10; $i++) { while ($name!= Jakob ) { if (name == Jakob ): elif (name == Anna ): else: for i in range(10): while (name!= Jakob ): Måsvingar markerar början och slutet på en sektion (block) av kod. Får inte glömmas bort! Det finns fler kontrollstrukturer, men de är inte nödvändiga i denna kurs. 26
Kontrollstrukturer Beskrivning PHP Python SelecGon Om, annars om, annars... For loopar När ni vet hur många gånger ni måste göra något. if ($name == Jakob ) { else if ($name == Anna ) { else { for ($i = 0; $i < 10; $i++) { While loopar Bestämmer while vad ($name variabeln!= ska Jakob ) heta { När ni inte kan räkna ut hur många och vilket värde den ska ha från början. gånger ni måste göra något. if (name == Jakob ): elif (name == Anna ): else: for i in range(10): while (name!= Jakob ): Det finns fler kontrollstrukturer, men de är inte nödvändiga i denna kurs. 27
Kontrollstrukturer Beskrivning PHP Python SelecGon Om, annars om, annars... For loopar När ni vet hur många gånger ni måste göra något. While loopar När ni inte kan räkna ut hur många gånger ni måste göra något. if ($name == Jakob ) { else if ($name == Anna ) { else { for ($i = 0; $i < 10; $i++) { while ($name Bestämmer!= när Jakob ) loopen ska { avslutas. if (name == Jakob ): elif (name == Anna ): else: for i in range(10): while (name!= Jakob ): Det finns fler kontrollstrukturer, men de är inte nödvändiga i denna kurs. 28
Kontrollstrukturer Beskrivning PHP Python SelecGon Om, annars om, annars... For loopar När ni vet hur många gånger ni måste göra något. While loopar När ni inte kan räkna ut hur många gånger ni måste göra något. if ($name == Jakob ) { else if ($name == Anna ) { else { for ($i = 0; $i < 10; $i++) { if (name == Jakob ): elif (name == Anna ): else: for i in range(10): while ($name!= Bestämmer Jakob ) hur variabeln { while ska (name!= Jakob ): förändras efter varje iteration (öka med 1 i detta fall). Det finns fler kontrollstrukturer, men de är inte nödvändiga i denna kurs. 29
Kontrollstrukturer Beskrivning PHP Python SelecGon Om, annars om, annars... For loopar När ni vet hur många gånger ni måste göra något. While loopar När ni inte kan räkna ut hur många gånger ni måste göra något. if ($name == Jakob ) { else if ($name == Anna ) { else { for ($i = 0; $i < 10; $i++) { while ($name!= Jakob ) { if (name == Jakob ): elif (name == Anna ): else: for i in range(10): while (name!= Jakob ): Det finns fler kontrollstrukturer, men de är inte nödvändiga i denna kurs. 30
Arrayer och hashmaps Beskrivning PHP Python Skapa en array Lägg Gll element i en array Använda en array som en hashmap Nyckel/Värde par $list = array(); $list[] = A ; $list[0] = A ; $list = array( A, B, C ); $list[] = B ; $list[1] = B ; array_push($list, B ); $ages = array( Jakob => 24, Anna => 22); list = [] list = [ A ] list = [ A, B, C ] list.append( B ); ages = { Jakob : 24, Anna : 22 $ages[ Jakob ] = 24; ages[ Jakob ] = 24 Ta bort e7 element ur en array unset($list[1]); list.pop(1) 31
Exempel loopar och listor $people = array( Jakob => 24, Anna => 22, Markus => 21); print( <h1>people</h1> ); foreach($people as $name => $age) { print( <p>{$name is {$age years old.</p> ); Koden exekveras och levereras som HTML till klienten People Jakob is 24 years old. Anna is 22 years old. Markus is 21 years old. 32
Läsa och skriva filer Beskrivning Öppna en fil Skriva Gll en fil Läsa från en fil Stänga en fil PHP $file_read_handle = fopen( filnamn, r ); $file_write_handle = fopen( filnamn, w ); fputs($file_write_handle, Jakob ); fgets($file_read_handle); fgets($file_write_handle); fclose($file_read_handle); fclose($file_write_handle); Det du skrivit till en fil är inte garanterat sparat eller ens synligt utifrån innan du stänger filen. 33
Exempel läsa från filer <?php $filename = minfil.txt ;?> if (file_exists($filename) && is_readable($filename)) { $file_handle = fopen($filename, r ); while (!feof($file_handle)) { $line = fgets($file_handle); print( <p>{$line</p> ); fclose($file_handle); 34
Skriva till en fil som finns Exempel skriva till filer <?php $filename = minfil.txt ;?> if (file_exists($filename) && is_writable($filename)) { $file_handle = fopen($filename, w ); fwrite($file_handle, Jakob ); fclose($file_handle); Skriva till en fil som (kanske) inte finns <?php $filename = minfil.txt ;?> $file_handle = fopen($filename, w ); fwrite($file_handle, Jakob ); fclose($file_handle); 35
Chaos was the law of nature; Order was the dream of man... Henry Adams STRUKTURERA KOD 36
Funktioner Koden blir tydligare Lättare att läsa (rätta) Lättare att felsöka print(get_greeting( Jakob )); function get_greeting($name) { return Hello there, {$name! ; Samma kod kan återanvändas Funktionaliteten är identisk från alla kontaktpunkter say_hello( Jakob ); function say_hello($name) { print( Hello there, {$name ); 37
include och require Möjlighet att dela upp kod (funktion) i olika filer Hjälper till att hålla ordning Allt som har med recensioner att göra finns i recensioner_funktioner.php 38
include, require, require_once inc.php <?php print( included. );?> included. Done. <?php include( inc.php ); print( Done. );?> <?php include( inc.php ); require( inc.php ); include( inc.php );?> print( Done. ); included. included. included. Done. 39
include, require, require_once inc.php <?php print( included. );?> included. Done. <?php require_once( inc.php ); print( Done. );?> <?php require_once( inc.php ); require_once( inc.php ); require_once( inc.php );?> print( Done. ); included. Done. require_once garanterar att vi bara hämtar dokumentet en enda gång. 40
Exempel Funktioner och require <?php function valid_email($data) { utilities.php?> $regex = '/^[^\W][a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\@[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\.[a-zA-Z]{2,4$/ ; if (preg_match($regex, $data)) { return true; return false; homepage.php <?php require_once( utilities.php );?> if (valid_email( jakpo779@student.liu.se )) { print( <p>your email is correct!</p> ); else { print( <p>that is not a valid email!</p> ); 41
Exempel Funktioner och require <?php function valid_email($data) { utilities.php?> $regex = '/^[^\W][a-zA-Z09_]+(\.[a-zA-Z0-9_]+)*\@[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\.[a-zA-Z]{2,4$/ ; if (preg_match($regex, $data)) { return true; return false; homepage.php OBS! FEL! <?php require_once( utilities.php );?> if (valid_email( jakpo779@student.liu.se )) { print( <p>your email is correct!</p> ); else { print( <p>that is not a valid email!</p> ); 42
Exempel Funktioner och require <?php function valid_email($data) { utilities.php?> $regex = '/^[^\W][a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\@[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\.[a-zA-Z]{2,4$/ ; if (preg_match($regex, $data)) { return true; return false; homepage.php <?php require_once( utilities.php );?> if (valid_email( jakpo779@student.liu.se )) { print( <p>your email is correct!</p> ); else { print( <p>that is not a valid email!</p> ); 43
Give me a place to stand and I will move the earth Archimedes HANTERING AV FORMULÄR 44
Klient till Server Klienten (användaren) fyller i ett formulär eller klickar på en länk Användaren fyller i ett formulär eller klickar på en länk... Klient Servern tar emot data från klienten och kan göra logiska beslut baserat på indata Data kan sparas i en databas Olika vyer kan visas Servern kan verifiera att klienten har rätt att göra anropet (login) PHP tar emot uppgifter från användaren och behandlar dessa. Server 45
Transportprotokoll GET används endast när man vill skicka data via URL* POST används när man vill skicka en större mängd data *Uniform Resource Locator (hemsidans adress, till exempel http://www.ida.liu.se/~729g28) 46
GET protokollet HTML <form action= ta_emot.php method= GET > <input type= text name= myvalue /> <input type= submit value= Skicka /> </form> ta_emot.php?myvalue=jakob%20pogulis Vill man ao adressen ser ut såhär måste man använda GET, annars ska man allrd använda sig av POST. PHP (ta_emot.php) <?php $my_variable = $_GET[ myvalue ];?> 47
POST protokollet HTML <form action= ta_emot.php method= POST > <input type= text name= myvalue /> <input type= submit value= Skicka /> </form> Enda skillnaden i HTML PHP (ta_emot.php) <?php $my_variable = $_POST[ myvalue ];?> Enda skillnaden i PHP 48
POST protokollet HTML <form action= ta_emot.php method= POST > <input type= text name= myvalue /> <input type= submit value= Skicka /> </form> PHP (ta_emot.php) <?php $my_variable = $_POST[ myvalue ];?> 49
Nu blir det lite mer tekniskt... SKICKA DATA 50
Headers Bestämmer vad webbläsaren ska göra Måste skickas före någon annan data skickas till klienten Dirigera användaren till en annan webbsida (URL) <?php header( Location: http://www.ida.liu.se/ );?> die( There is nothing more for you here... ); Vik%gt ao använda die här, annars lämnar man öppet för dataintrång! 51
Sessions Sparar information om tidigare kommunikation mellan klient och server Osynligt för användaren* Mycket viktigt att initiera sessioner före man använder dem! <?php session_start(); $_SESSION[ name ] = Jakob ;?> <?php session_start(); if ($_SESSION[ name ] == Jakob ) { print( Hello jakob! );?> 52
Don t be evil Google DATABASANSLUTNINGAR 53
Databasanslutningar Beskrivning Öppna en anslutning Gll databasen Tänk på ao verifiera ao det lyckades! Välja en databas Tänk på ao verifiera ao det lyckades! Skydda er från dataintrång! Skicka en fråga Gll databasen Tänk på ao verifiera ao det lyckades! PHP $connection = mysql_connect( db-und.ida.liu.se, jakpo779, password ); if (!$connection) { die(mysql_error()); $database = mysql_select_db( my_database, $connection); if (!$database) { die(mysql_error()); $data = SELECT * FROM `table` WHERE `key` = {$value ; $query = mysql_real_escape_string($data, $connection); $result = mysql_query($query, $connection); if (!$result) { die(mysql_error()); Arbeta med resultatet while ($row = mysql_fetch_array($result)) { print($row[ key ]); Frigör resultatet för snabbare webbsida Avsluta anslutningen! mysql_free_result($result); mysql_close($connection); 54
AVSLUTNINGSVIS... 55
Söka information Vilket typ av problem har ni? Hur vill ni lösa problemet? Lägg alltid till php i sökningen - php.net/manual/... - stackoverflow.com/... - w3cschools.com/... O.ast bra informa%on! array push php mysql connect php How to connect to mysql using php Resulterar i fler forumtrådar och blogg- guider! session start php 56
www.liu.se