Dynamisk indhold med Ajax og PHP

Tags: ajax php jquery

<< < 1 2 3 4 > >>

Skrevet af Bruger #8773 @ 28.05.2012

658

Indhold til siden

Nu skal vi også have lavet et dokument der rent faktisk viser noget indhold. Til dette skal vi naturligvis bruge "index.php". Denne fil vil indeholde vores HTML kode og referencer til vores stylesheet (som ikke bliver ret omfattende i denne artikel) og vores javascript som altså bliver hjertet i vores tag-wall.

Vi starter lige med at lave vores header så vi har den del på plads:

HTML kode

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
     <head>
         <title>Min lille tag-wall</title>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
         <script type="text/javascript" src="tagwall.js"></script>
     </head>
     <body>

Der er intet nyt her - den eneste forskel er, at vi fremover vil holde alt vores javascript-kode i tagwall.js.

Det næste vi skal er, at få lavet en form hvorfra vi vil sende beskeder. Den skal indeholde et felt til et navn, et beskedfelt og en knap til at sende beskeden.

Da vi kommer til at håndtere alle forespørgsler ved hjælp af AJAX, undlader vi at putte vores elementer i en <form>.

Vores kode kommer altså til at se ud som følger:

HTML kode

 Navn: <input type="text" id="the-name" /><br />
 Besked: <textarea id="message"></textarea><br />
 <button id="submit">Send!</button>
 <h2>Tidligere indlæg</h2>

Igen vil jeg forsøge at holde denne artikel simpel, så jeg undlader at style noget som helst på siden - det må være op til jer selv at være kreative ;-)

Når vi har vores form, mangler vi nu blot det område hvori vi vil have vist alle vores tag-wall beskeder. Dette bruger vi blot en simpel <div> til under vores <h2>:

HTML kode

 <div id="content"></div>

For at have noget at arbejde med, indsætter vi med det samme noget dummy-data i databasen (brug eventuelt følgende):

SQL kode

 INSERT INTO `ajax_tagwall` (
 `id` ,
 `thename` ,
 `message` ,
 `timestamp`
 )
 VALUES (
 NULL ,  'Simon',  'Hvordan går det med jer alle?',  '1307629786'
 ), (
 NULL ,  'Søren',  'Hva'' så allesammen?',  '1307629800'
 );

Hente indhold fra databasen

Nu kan vi begynde at hente indhold fra databasen. Til dette skal vi bruge en ny fil - content.php - hvori vi skal huske at inkludere vores config.php og vores db.class.php.
Derefter skal vi oprette et objekt af klassen Database som skal håndtere vores forespørgsler. Konstruktøren i klassen tager host, brugernavn, password og database-navn som argumenter i nævnte rækkefølge (husk at vi bruger vores definitioner fra config.php):

PHP kode

 <?php
 require_once("config.php");
 require_once("db.class.php");
 $db = new Database(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);

Når vi har gjort dette, skal vi til at hente noget indhold fra vores database. Måden hvorpå vi skal hente indhold er, at vi modtager et timestamp for det seneste indlæg fra index.php via AJAX. Hvis der endnu ikke er nogle indlæg, sendes "0" som timestamp. Herefter skal vi hente alt indhold fra databasen som har et timestamp, der er større end det vi får sendt fra AJAX-kaldet. Disse resultater laver vi til JSON-format og udskriver det tilbage til index.php. Hvis der er sendt "0", sendes de seneste 5 indlæg blot tilbage til index.php.

Vi skal altså have det følgende kode til at klare dette:

PHP kode

 // Timestamp modtages via POST
 $lastTime = $_POST["timestamp"];
 // Er det sidste timestamp = 0 (altså er der ikke tidligere hentet indlæg)
 // Tjek først om timestamp er numerisk
 if(is_numeric($lastTime))
 {
     // Hvis dette timestamp er numerisk, hent da alle indlæg hvor timestamp i databasen er større end det forespurgte (altså nyere indlæg)
     $db->query("SELECT * FROM ajax_tagwall WHERE timestamp > ".$lastTime." ORDER BY timestamp ASC");
     // Sorter her indlæg efter timstamp med det ældste først, da vi gerne vil udskrive ældst-til-nyest i javascript
 }
 // Lav det array som skal returneres i JSON format
 $returnArray = array();
 // Gennemløb data fra databasen og skub dette ind i $returnArray-variablen
 while($data = $db->fetchNextObject())
     array_push($returnArray,array("name"=>utf8_encode($data->thename),"message"=>utf8_encode($data->message),"timestamp"=>$data->timestamp));
 // Brug json_encode()-funktionen på vores data og udskriv det hele
 print_r(json_encode($returnArray));

<< < 1 2 3 4 > >>

Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner: