Webbprogrammering
Sahand Sadjadee
Agenda
●
●
●
●
●
●
●
●
Webb
“The World Wide Web (WWW) is a network of online content that is formatted in HTML and accessed via HTTP. The term
refers to all the interlinked HTML
pages that can be accessed over the Internet.” Techopedia
Webb
http://www.worldwidewebsize.com/
Webb
En webbsida består av...
Webb - Webbläsare
Webbläsare förstår bara HTML, CSS
och javaskript.
Webb - HTML
<html> <!-- Opening tag -->
<head>
<title>Sahand’s diary</title>
</head>
<body>
<h1>Welcome to my page</h1>
<div>
<p>
I’ve got alot to say...
</p>
</div>
</body>
</html> <!-- Closing tag -->
Webb - HTML
<html> <!-- Opening tag -->
<head>
<title>Sahand’s diary</title>
</head>
<body>
<h1>Welcome to my page</h1>
<div>
<p>
I’ve got alot to say...
</p>
</div>
</body>
</html> <!-- Closing tag -->
Webb - CSS
Webb - Javaskript
Webb
En webbsida kan innehålla olika sorters media, bilder,
video och ljud.
<a href=”home.html”>
<img src=”/img/homepage.jpg”>
</a>
Webb
Oavsett hur många gånger en statisk
samma!
webbsida begärs eller av hur många klienter, ska resultatet vara
Webb
En dynamisk
webbsida ska returnera olika resultat beroende på fått parametrarna när den begärs.
Webbplatser
En webbplats består av ett antal webbsidor, statistika OCH dynamiska, som skaffar ett antal tjänster och uppgifter
för användarna.
Serverskript
●
●
Kör ett program på servern och resultatet skickas till klient
PHP, Python, Ruby, Perl, ASP, C, Java, …
Men varför?
Vad får vi då?
Serverskript
VS
Serverskript
Serverskript
●
●
●
●
●
●
●
Dynamiska webbsidor.
Tar kraft av server inte klient.
Kan användas tillsammans med databas på servern.
Datan och logiken finns på server-sidan.
○
Tillgång till databasen kan och ska kontrolleras.
○
Busniess-logiken finns på server-sidan och kan inte ses av användaren. Det hjälper bättre säkerhet.
Klienten kan bara se resultatet av koden.
Hantera och reagera på data som skickas från klient.
Det är så vanligt att Serverskript och HTML/CSS/Javascript är kombinerad. E.g. PHP, JSP, ASP, ASP .NET.
Men varför behöver vi skicka data till server-sidan för att få dynamiska webbplatser fungera?
PHP - Hypertext Pre Processor
●
●
●
●
●
●
Skrivs tillsammans med HTML
Resultat - HTML
Free Software
Stort, populärt och användbart
http://php.net
Kan användas med databaser (MySQL).
PHP - Hypertext Pre Processor
PHP - Hypertext Pre Processor
PHP - Hypertext Pre Processor
Query Strings
https://www.flygresor.se/showresult.php?id=195515877
Formulär
●
●
●
●
●
För kort text:
○ <input type=”text” .../>
För lång text:
○ <textarea ...></textarea>
För ett och endast ett av flera alternativ:
○ <input type=”radio” .../>
För inget, ett eller flera alternativ:
○ <input type=”checkbox” .../>
För rullgardinsmeny:
○ <select><option ...>...</option></select>
Ta emot formulär med PHP
●
●
●
●
Formuläret skickas till action
○ <form action=”ta_emot.php” .../>
Formuläret skickas med submit
○ <input type=”submit” .../>
Värden hämtas med
○ $myvalue = $_GET[’myvalue’];
○ eller
○ $myvalue = $_POST[’myvalue’];
beroende på vad man satt för method
○ <form ... method=”post” ...>
○ <form ... method=”get” ...>
Formulär
●
För tillgänglighet och användbarhet tänk på att:
● man ska kunna klicka på label-text för att markera ett fält. Kod:
○ <label for=”example”>My label</label>
○ <input id=”example” .../>
● Eller
○ <label><input id=”example” .../>My label</label>
● ha en fungerande layout
● validera data innan skickas.
Session
●
●
●
Det är jätte vanligt att man behöver besöka flera webbsidor för att göra en viss uppgift. E.g.
när man vill handla varor från en eshop och lägger sina utvalda varor i vagnen.
Sanningen är att webbservrar är jätte dum. De kommer inte ihåg användarna och det är
därför när användaren lämnar en php sida och öppnar någon andra sida har webbservern
ingen aning om vad användaren hade gjort innan.
Vad kan vi göra om det?
Session
Session på IDA
●
●
●
●
För att köra session på IDA måste man ange session_save_path(‘dir’); till en katalog på sitt
konto där World/Others har läs och skrivrättigheter.
Starta eller återuppta en session:
○ session_start();
• Lagra:
○ $_SESSION[‘value’] = $value;
• Hämta:
○ $value = $_SESSION[‘value’];
Validering av data med serverskript(säkerhet)
●
●
●
Användaren kan skicka fel data (ibland med avsikt)
Serverskript kan skicka fel data
Vad bör valideras?
○ Data man inte kan lita på att den är korrekt
○
○
●
Data som kan ställa till problem om den inte
är korrekt
Nästan all data.
Det är också jätte viktigt att validera data på
klient-sidan.
Validering av data på klientsidan (utförande)
●
●
●
Man kan validera data innan den skickas som en
form.
Validering kan göras genom att använda Javascript
och/eller HTML. 3rd party bibliotek kan också
användas. E.g. JQuery validator.
HTML5 hjälper mycket för att förenkla validering.
Cross-site Scripting ( XSS )
SQL Injection
Funktioner
●
●
●
●
●
●
is_int(n) - är n ett heltal
is_float(n), is_bool(n)
intval(s) - returnerar heltalsvärdet av s
floatval, doubleval
ctype_alnum(text) - kollar om alla tecken i text är bokstäver eller siffror
Finns även: ctype_alpha, ctype_digit, ctype_lower, med flera
Fler funktioner
●
●
●
●
●
●
●
strlen(s) - kollar längden på s
trim(s) - tar bort mellanslag i början och slutet av s
strpos(s) - letar reda på vilken position ett tecken, eller flera, har i s
addslashes(s) - lägger till backslashes på kritiska tecken - \” \’
htmlspecialchars(s) - gör om s till html-specialtecken, t ex < blir &lt;
is_email(s)
Skriv egna funktioner
Kod ni inte skrivit själva
●
●
●
Gör alltid en kommentar i koden var ni fått den ifrån om ni inte skrivit den själva
(All kod som ni inte kommenterat en källa för räknas som att ni redovisar som eget
arbete.)
●
Att använda kod från andra studenter är
ej OK.
Tack och lycka till!
