Webprogrammering Med PHP - HTML Formularer

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-formularer. En HTML-formular er en komponent i en web-applikation, 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øgealgoritmen, 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 formular består af to skridt.

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

Lad os først kigge på HTML-delen.

Introduktion til HTML-formularer

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 formularen ø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 formular, 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 textboks til text

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

Textboks til kodeord

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

Tekstboks til skjult data

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

Tekstområde til flere linjer tekst

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

Radioknapper

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

Et afkrydsningsfelt

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

En dropdown menu

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

En knap

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

Eksempel: kommentarformular

Lad os forsætte med tanken om at udvide bloggen med funktionalitet til at håndtere kommentarer. 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-formular, 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>

Formularen 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 formularen, 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 formularen 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-formularen 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 formularen 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 brugeren til loginsiden. I den næste linje henter scriptet værdien af post_id input feltet fra formularen. 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