Skapa layouten för gästboken
Nu är det dags att skapa layouten för vår gästbok och eftersom det här är en kurs för nybörjare, så gör vi den så enkel som möjligt.
Om du inte vill kopiera/skriva av koden kan du ladda ner den istället, men på översta raden måste du ange dina uppgifter för att ansluta till MySql-databasen.
Börja med att öppna filen ”index.php” och radera all kod som finns i filen. Skriv eller kopiera därefter in nedanstående rader, som är ren HTML.
<html> <head> <meta charset="UTF-8" /> <title>Gästbok</title> </head> <body>
Samtliga rader här ovan är ren HTML och i princip alla PHP-sidor består av HTML-kod. HTML-koden talar om för webbläsaren hur sidan ska se ut och PHP-koden styr vad den ska innehålla, enkelt uttryckt.
HTML består av en mängd olika taggar som betyder olika saker, såsom ”<b>för fet stil</b>, <i>för kursiv text</i> etc. Taggarna <html>, <head> och <body> har inget med utseendet att göra utan det är taggar inom vilka man kan ange mer grundläggande information gällande respektive sida.
De flesta taggarna utgörs av en start- och slut-tagg, som exempelvis <title> och </title>, men alla taggar har inte en avslutande </-tagg och då skriver man starttaggen på följande sett: <br /> med ett mellanslag efter taggnamnet följt av ett snedstreck (slash).
HTML-kod visas inte för användaren (såvida inte något fel uppstått) utan den talar om för webbläsaren hur den ska rendera sidan.
Första raden (<html>) talar om för webbläsaren att sidan är en HTML-sida och på rad två talar vi om att det är en sida med teckenuppsättningen ”UTF-8″, som bland annat innehåller svenska tecken.
<title>-taggen innehåller titeln för sidan och det är den texten som visas i fliken i din webbläsare och det är en tagg som sökmotorer som Google lägger stor vikt vid när de försöker avgöra vad en sida innehåller och dess betydelse jämfört med alla andra sidor.
Det är mellan <body>-taggarna som den synliga delen av HTML-koden skrivs och det är här vi ska skriva in vår HTML-kod som beskriver hur vår gästbok ska se ut och vi ska hålla den förhållandevis kort och enkel.
Vi kommer dock att använda tabeller för att styra upp sidan en aning och tabellkod kan se väldigt förvirrande ut, men det är den egentligen inte. Idag styrs mer och mer av formatmallar med hjälp av CSS och tabeller används allt mindre, men vi kommer som sagt att använda oss av det.
Mellan <body>-taggarna skriver/kopierar du in följande rader:
<table align=”center” widht=”600″>
<tr>
<td colspan=”2″ align=”center”>
<b>Gästbok</b><br />
<a href=”#addcomment”>Skriv i gästboken</a>
</td>
</tr>
<?php ShowGuestbook(); ?>
</table>
<form method=”POST” action=”index.php”>
<table align=”center” width=”600″>
<tr>
<td>
<a name=”addcomment”>Ditt namn: <input type=”text” name=”namn” /></a>
</td>
</tr>
<tr>
<td>
<textarea cols=”50″ rows=”20″ name=”meddelande”></textarea>
</td>
</tr>
<tr>
<td><input type=”submit” name=”skicka” value=” Skicka ” /></td>
</tr>
</table>
</form>
Det är ganska många rader och en av raderna innehåller en liten snutt PHP-kod. Resten är ren HTML och det mesta utgörs av kod för att beskriva tabellerna.
<table align=”center” widht=”600″>
Den här raden innehåller början av tabellen och beskriver ett par egenskaper. align=”center” talar om att tabellen ska centreras på skärmen och width=”600″ talar om att den ska vara 600 pixlar bred. Det finns fler egenskaper som kan anges, men vi nöjer oss med dessa för enkelhetens skull och eftersom det här är en PHP-kurs och inte en HTML-kurs.
<tr>-taggarna utgör en tabellrad och mellan dessa anger man kolumnerna.
<td>-taggarna utgör kolumnen i varje tabellrad.
Den första kolumnen har egenskapen colspan=”2″ vilket talar om för webbläsaren att kolumnen ska motsvara två kolumner, vilket nästa rad kommer att bestå av, men som inte framgår av koden eftersom den kommer att skrivas ut med hjälp av PHP.
Nedanför den avslutande </tr>-taggen återfinns följande rad:
<?php ShowGuestbook(); ?>
Som du kanske minns från tidigare kapitlen, så är det mellan <?php och ?> som PHP-kod skrivs och i det här fallet är det ShowGuestbook(); som utgör koden.
ShowGuestbook() är ett funktionsanrop och innebär att vi vill att funktionen ShowGuestbook ska anropas och köras och den består av följande rader, som du ska kopiera in högst upp på sidan, ovanför all annan kod:
<?php
$mysqli = new mysqli(”SERVER”, ”ANVÄNDARNAMN”, ”LÖSENORD”, ”DATABAS”);
if($mysqli->connect_error)
{
echo ”Följande fel uppstod vid databasanslutningen: ” . $mysqli->connect_errno . ”, ” . $mysqli->connect_error;
} else {
$mysqli->set_charset(”UTF8”);
}
// Här testar vi om formuläret har skickats och det är data för knappen
// ”Skicka” som vi letar efter.
if($_POST[”skicka”] <> ””)
{
// Fånga upp data för respektive formulärfält, kontrollera, sanera och spara
// till variabler.
$sNamn = $mysqli->real_escape_string($_POST[”namn”]);
$sMeddelande = $mysqli->real_escape_string($_POST[”meddelande”]);
if($sNamn <> ”” & $sMeddelande <> ””)
{
$mysqli->query(”INSERT INTO tblGuestbook (namn, meddelande) VALUES (\”$sNamn\”, \”$sMeddelande\”);”);
}
}
// Funktionen som listar alla gästboksinläggen
function ShowGuestbook()
{
global $mysqli;
$result = $mysqli->query(”SELECT uid, namn, meddelande FROM tblGuestbook ORDER BY uid DESC;”);
while($row = $result->fetch_array())
{
$sNamn = $row[1];
$sMeddelande = $row[2];
$sMeddelande = str_replace(”\n”, ”<br />”, $sMeddelande);
echo ”<tr>\n”;
echo ”<td width=\”200\” valign=\”top\”>$sNamn skrev:</td>\n”;
echo ”<td width=\”400\” valign=\”top\”>$sMeddelande</td>\n”;
echo ”</tr>”;
}
}
?>
Återigen blev det ganska mycket kod på en gång, men jag ska dela upp det hela i följande beskrivning.
Det här är all kod som behövs för vår lilla gästbok och det återstår bara en sak innan du kan testköra den och det är uppgifter för att ansluta till databasen som ska anges på den första raden i koden som du precis kopierade:
$mysqli = new mysqli(”SERVER”, ”ANVÄNDARNAMN”, ”LÖSENORD”, ”DATABAS”);
Innan jag börjar beskriva koden, så kan du byta ut SERVER, ANVÄNDARNAMN, LÖSENORD och DATABAS mot uppgifterna som gäller för dig.
Om du har installerat en webbserver på din egna dator, så ska du ersätta SERVER med ”localhost”. Användarnamn och lösenord är de du valde och DATABAS är ”lokaldb”.
Så här ser vår gästbok ut
När du har angivit dina uppgifter och sparat, så kan du testa om sidan fungerar och om allt fungerar som det ska, så ska du se en sida som påminner om ovanstående. Det skiljer sig troligen vad gäller teckensnitt, marginaler och storlek då jag skrivit detta under Linux, men på det stora hela så ska det se likadant ut.
Testa även att skriva ett inlägg och skicka det.
Förhoppningsvis fungerar allt som det ska och vi är redo för nästa kapitel där vi ska börja gå igenom vad PHP-koden gör och hur det hela fungerar.
Du kan även ladda ner, men glöm inte att du måste redigera databasuppgifterna högst upp i filen.