Webprogrammering

Introduktion

Set ovenfra er Web'et ret enkelt. web'et består af resurser - dokumenter, billeder, osv. - placeret på servere. Resurser har en
adresse, hvormed en klient - fx en browser - henter resurser fra forskellige servere rundt om i verden.

En typisk interaktion på web'et ser ud på følgende måde: en bruger forespøger via sin browser en side fra en server, serveren finder
siden og sender det tilbage til brugerens browser, og til sidst viser browseren dokumentet. Bemærk at browseren gentager denne procedure for
alle resurser der er inkluderet i HTML siden, det kunne fx være billeder, videoer eller en CSS fil.

I de fleste moderne webapplikationer, gør serveren en hel del mere, end blot returnere indholdet af filer på serveren til klienten. Typisk sammensætter serveren et HTML dokument, idet brugeren forspørger det. Det er her webprogrammering kommer ind. Webprogrammering gør os i
stand til at erstatte statiske HTML filer med dynamisk genererede HTML sider.

Lad os kigge på et eksempel fra bloggen. Hvis du forespørger siden http://skyen.iftek.dk/~jakob/blog/post.php?id=1 sker der en række
ting på server siden:

1. Webserveren modtager en forespørgslen.
2. Webserveren kalder et PHP script, nemlig post.php.
3. PHP scriptet henter data for blog indlægget med id 1 fra databasen.
4. PHP scriptet sætter herefter data ind i en HTML skabalon.
5. HTMLen returneres til web serveren der igen returnerer til din browser.

URLer

URLer er en central komponent for web'et. Det følgende afsnit beskriver hvad en URL er og dens bestanddele.

En URL er en addresse for en resurse, uden denne er det ikke muligt at hente resursen. Lad os kigge på URLen fra før:
http://skyen.iftek.dk/~jakob/blog/post.php?id=1. Denne URL er til et blog indlæg. Den består af fire forskellige dele.

1. En protokol (http),
2. et domæne (skyen.iftek.dk),
3. en sti til PHP scriptet (/~jakob/blog/post.php); og
4. input til PHP scriptet (id=50).

Input'et til PHP scriptet, altså id=50, kaldes også for en query streng.

Query strenge

Stort set alle webapplikationer benytter query strenge. Query strenge er et middel til at give input til PHP. Der kan være en eller flere query variable i en query streng. Fælles for dem er, at den første query variabel altid skal defineres efter et ? i URLen. Hvis der er flere query variable, adskilles de med et &. Det kunne fx være ?week=29&year=2013. I denne query streng, er den første query variabel week. Værdien af variablen definerer hvilken uge, der der vises nyheder fra, og den anden variabel year angiver hvilket år, der vises nyheder fra.

Her er et par URLer der har query strenge:

Webprogrammering med PHP

PHP er et programmeringssprog som er designet til webudvikling. Derfor er de fleste ting i forbindelse med webprogrammering ret lige til i PHP.
Indtil videre har vi kigget på web'et og URLer. Det følgende afsnit beskriver hvordan du i PHP arbejder med URLer. Senere i forløbet kommer vi ind hvordan PHP spiller sammen med databasen, og hvordan PHP renderer HTML skabaloner; med andre ord, hvordan PHP interagerer med hhv. datalaget og præsentationslaget.

Vi tager igen udgangspunkt i det konkrete blog-indlæg: http://skyen.iftek.dk/~jakob/blog/post.php?id=1. Denne URL indeholder query variablen id. Lad os kigge på hvordan id bliver benyttet i PHP filen post.php. Hele indholdet af filen er vist nedenunder, der sker en hel del i filen, så vi gennemgår de fleste linjer.

<?php
 
require_once("controller.php");
require_once("db.php");
 
$id = $_GET['id'];
$sql = "SELECT * FROM posts WHERE id = ?";
$post = db_query_get($sql, array($id));
 
if(!$post){
    flash_error('Det post findes ikke!');
    header('Location: posts.php');
    die();
}
 
$author = db_query_get("SELECT * FROM users WHERE id = ?", array($post['user_id']));
 
$template_data = array('post'=>$post, 'author'=>$author);
$html = render("post.html", $template_data);
 
echo($html);
?>

De første to linjer med require_once inkluderer hjælper metoder til resten af filen. Disse hjælper metoder er fx til at interagere med databasen og rendere HTML skabalonen. Læg derefter mærke til udtrykket:

$id = $_GET['id'];

Denne PHP kode henter værdien af query variablen id ud af query-strengen ved hjælp af $_GET. $_GET er en speciel datastruktur i PHP, og den
indeholder altid værdierne fra query strengen i URLen.

Lad os gennemgå resten af koden for at forstå, hvad der præcist sker i post.php:

$sql = "SELECT * FROM posts WHERE id = ?";
$post = db_query_get($sql, array($id));

Næste linje indeholder SQL udtrykket til at hente et blog-indlæg med et bestemt id. I burde kunne genkende SQL udtrykket, bortset fra at
det indeholder et ?. Vi kommer tilbage hvorfor ? er smart senere, nu skal du blot tænke det som en krog hvorpå der hænges data.

Herefter eksekveres SQL-udtrykket mod databasen, med værdien af $id hængt på krogen og resultatet gemmes i variablen $post.

if(!$post){
    flash_error('Det post findes ikke!');
    header('Location: posts.php');
    die();
}

Resultatet gemmes i en variabel for senere at tjekke, om der rent faktisk eksisterer et blog-indlæg med det id. Hvis det ikke
eksisterer, vises en fejl til brugeren og browseren omdirigeres til oversigten over indlæg.

$author = db_query_get("SELECT * FROM users WHERE id = ?", array($post['user_id']));
 
$template_data = array('post'=>$post, 'author'=>$author);
$html = render("post.html", $template_data);
 
echo($html);

På HTML siden for indlæg vises skribentens brugernavn. Det enkelte blog indlæg der blev hentet ud af databasen, inkluderer kun user_id'et på skribenten. Derfor er vi nødt til at foretage endnu et opslag i databasen for at hente alle brugerens data. Derefter sendes værdierne ud til krogene i HTML skabalonen, og til sidst skrives HTMLen ud til webserveren.

Opgaver til query variable

Du har nu lært, hvad query variable er, og hvordan du benytter dem i PHP. Gå tilbage til oversigten løs de første opgaver, der omhandler query variable.

HTML former

I web applikationer kan der sendes data til serveren på to måder. I det foregående afsnit, så du den første måde, vha. query strengen. Den anden måde er vha. HTML former. Typisk bruges HTML former til at sende data der skal lagres på serveren, hvorimod data sendt via querystrengen bruges som input til et script.

Introduktion til HTML former

Vi har nu hentet et konkret blog-indlæg ud fra databasen, og ønsker nu at sende data til vores server, det kunne fx være at oprette et nyt blog-indlæg. Man sender data, der skal gemmes på serveren ved at benytte sig af POST funktionen. I HTML gøres det konkret ved at benytte sig af HTML forms.

<form action="html_form_action.php" method="post">
// Indsæt input felter der indsamler det data, vi ønsker at sende og gemme på serveren
</form>

Der findes mange forskellige input felter i HTML, der hver især har forskellige egenskaber.

En almindelig textbox til text

<input type="text" name="fornavn">

Textbox til kodeord

<input type="password" name="kodeord">

Textarea til flere linjer tekst

<textarea name="message"></textarea>

Radiobuttons

<input type="radio" name="gender" value="male">Mænd
<input type="radio" name="gender" value="female">Kvinder

En checkbox

<input type="checkbox" name="terms">Jeg accepterer handelsbetingelserne

En selector / dropdown menu

<select name="country">
<option>Danmark</option>
<option>Sverige</option>
<option>Norge</option>
</select>

En knap

<input type="submit" value="Gem">

Eksempel på HTML form til udvidelse af bloggen

Vi har tidligere arbejdet med en blog, hvor man kan oprette diverse blog-indlæg. Under Sociale Medier 2 har I udvidet database-laget, så det understøtter kommentarer under et blog-indlæg. Vi har dog ikke udvidet præsentation- og logik-laget endnu med samme funktionalitet.
Nedenstående eksempel er en HTML form, der gør det muligt at skrive en simpel kommentar til et blog-indlæg.

<form action="new_comment.php" method="post">
    Kommentar:
    <textarea name="comment"></textarea>

    <input type="submit" value="Gem">
</form>

Resultatet af ovenstående kode er:

Når brugeren trykker gem, har vi defineret, at filen 'new_comment.php' skal håndtere det data, der er blevet indtastet i formen. Det data skal derefter gemmes i databasen. Hvordan man konkret gør dette, vil blive gennemgået i Sammenhæng mellem HTML & PHP.

Medmindre andet er angivet, er indholdet af denne side licenseret under Creative Commons Attribution-NonCommercial 3.0 License