Webprogrammering Med PHP - HTML Former

Web applikationer kan sende data til serveren på to måder. I den første lektion, så du den første måde vha. query strengen. Den anden måde er vha. HTML former. En HTML form er en komponent i en webapplikation, der giver brugeren mulighed for at sende data til serveren. Dette kunne fx være input til en Google søgning eller data i et nyt blog-indlæg.

I det første tilfælde, med Google søgningen, sendes data som input til søge algoritmen, for at hente data. I det andet tilfælde, sendes data til serveren for at blive gemt. I dette tilfælde siger man at data postes til serveren. Grunden til at det er vigtigt at differentiere mellem de to, er at data der postes ikke kan hverken gentages, bookmarkes eller caches, og derfor signaleres i HTML hvilken metode der er tale om.

Det at lave en form består af to skridt.

  • Bruger interfacet skal laves i HTML.
  • Logikken til at processere data fra formen skal laves i PHP.

Lad os først kigge på HTML delen.

Introduktion til HTML former

Forstil dig, at du ønsker at tilføje mulighed til bloggen for at kommentere på indlæg. Dette kræver først og fremmest et element på siden til at afgive kommentarer i. Dette HTML element hedder form og har to attributter. En action attribut, der angiver til hvilken URL data skal sendes, og en method attribut, der angiver om formen ønsker at gemme data eller hente data på serveren. I tilfældet med kommentaren ønsker vi at gemme data på serveren, dette indikeres ved at method har værdien POST. method kan også være GET, hvilket betyder at klienten, ønsker at hente data fra serveren.

Lad os kigge på et eksempel:

<form action="new_comment.php" method="post">
  // Input felter, der indsamler det data, man ønsker at sende og gemme på serveren.
</form>

Indtil videre har vi en form, der er en beholder for de data, der skal postes til {{new_comment.php} scriptet. Vi mangler stadig de konkrete input felter til at indsamle data. Der findes flere forskellige slags input felter, nedenfor er nogle eksempler.

En almindelig textbox til text

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

Textbox til kodeord

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

Tekstboks til skjult data

<input type="hidden" name="id" value="1">

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: kommentarform

Lad os forsætte med tanken om at udvide bloggen med kommentar funktionalitet. I Sociale Medier 2 udvidede vi data-laget, så det nu understøtter kommentarer til et blog-indlæg. Vi mangler dog stadig at udvide præsentations- og logik-laget.

HTML

Nedenstående eksempel er en HTML form, der gør det muligt at skrive en simpel kommentar til et blog-indlæg.

<h3>Kommenter:</h3>
<form action="new_comment.php" method="POST">
    <input type="hidden" name="post_id"  value="{{post.id}}"/>
    <textarea name="comment"></textarea>
 
    <input type="submit" value="Gem" />
</form>

Formen bruger tre typer input felter. Et textarea til at indtaste kommentaren i, et input felt af typen submit der giver en knap til at afsende formen, og et input felt af typen hidden, der giver et skjult input felt. Den sidste er nødvendig for at kunne finde frem til hvilket indlæg kommentaren skal knyttes til.

Værdien af input feltet post_id, udfyldes i vores blog via HTML template sproget, og derfor ser den lidt underlig ud. Når brugeren poster formen ved at trykke gem, sendes data til til new_comment.php i logiklaget.

PHP

Vi er nu kommet til serversiden i implementationen af kommentar funktionaliteten. Det drejer sig altså om den kode der bliver kaldt, når kommentaren afsendes fra brugerens browser.

HTML formen indeholder to værdier som vi ønsker at arbejde videre med i PHP, nemlig hhv. post_id og comment. Disse er i HTMLen angivet vha. name attributten på inputfelterne. Da formen afsendes med POST metoden er disse værdier tilgængelige i $_POST variablen. Når vi bruger $_POST, er det vigtigt at navnet på input-feltet er helt korrekt, da vi referer til præcist et input-felt. Inden det bliver alt for kompliceret så lad os kigge på hvordan new_comment.php kunne se ud.

<?php
 
    require_once("controller.php");
    require_once("db.php");
 
    login_required();
 
    $post_id = $_POST['post_id'];
    $comment = ''; // OPGAVE: Læs værdien af kommentaren ud fra POST
 
    // NOTE: user_id sættes ved login, og er derfor altid tilstede her.
    $user_id = $_SESSION['user_id'];
 
    // OPGAVE: Tilpas nedenstående SQL, så det passer til din comments tabel
    $sql = "INSERT INTO comments (post_id, user_id, comment, is_removed) VALUES (?,?,?,0)";
    $stm = db_query($sql, array($post_id, $user_id, $comment));
 
    // Vis fejl hvis kommentar ikke kunne indsættes
    if (!$stm) {
        die('Fejl ved indsættelse: ' . mysql_error());
    }
 
    flash('Ny kommentar oprettet!');
 
    // OPGAVE: Hvad gør nedenstående linje, og hvorfor?
    header('Location: post.php?id=' . $post_id);
?>

Koden benytter hjælpe funktionerne, db_query og login_required fra filerne db.php og controller.php. Den første, db_query, tager udover SELECT, som vi brugte i forrige lektion, vilkårligt SQL som input. Den anden funktion, login_required tjekker om brugeren er logget ind, og hvis det ikke er tilfældet så omdirigerer den vedkommende til loginsiden. I den næste linje henter scriptet værdien af post_id input feltet fra formen. Efter at alle nødvendige kommentar data er indsamlet - dvs. user_id, post_id og comment - så indsættes kommentaren i databasen vha. af et SQL insert udtryk. Bemærk, at der igen bruges ? de steder hvor data skal indsættes i SQL udtrykket. Ellers ville koden have en sårbarhed der ville kunne udnyttes af ondsindede hackere.

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