Registreren

[Mistery]

Inleiding
In deze tutorial ga ik jullie uitleggen hoe je een simpele shoutbox kan maken. De shoutbox heeft een simpele foutcorrectie en beschermd speciale karakters, zoals bijvoorbeeld HTML tags.


Benodigdheden

• Een Webhost met PHP en MySQL;
• Tabel genaam shoutbox: hier worden alle berichten in bewaard;
• Bestand config: voor al je configuratie bestanden;
• Bestand shoutbox; voor je daadwerkelijke shoutbox.

De Database
Laten we eerst de database gaan maken. De database is immers de connectie met je shoutbox. Een database kan je beheren via bijvoorbeeld phpmyadmin. Bijna elke webhoster die MySQL aanbied heeft ook phpmyadmin. Weet je niet hoe phpmyadmin werkt, kijk dan eens op: de website van phpmyadmin. Uiteraard ben je zelf vrij om een manier te kiezen voor het maken van de database.

de volgende tabel moet aangemaakt worden:

PHP

Code: Alles selecteren

CREATE TABLE shoutbox (
id INT(10) not null AUTO_INCREMENT,
name VARCHAR(20),
message TEXT,
date VARCHAR(15),
ip VARCHAR(15),
PRIMARY KEY(id)
); 

Wat hebben we nu gemaakt? Nou het volgende:

• name VARCHAR(20) - Hierin wordt de gebruikersnaam bewaard. Er zit een limiet aan van 20 karakters.
• message TEXT - Hierin worden de berichten bewaard, we zullen een limiet instellen in het formulier (komen we later op terug) dus dat hoeft hier niet gedaan te worden
• date VARCHAR(15) - Hier wordt de datum van de post bewaard. 15 karakters moet hiervoor genoeg zijn.
• ip VARCHAR(15) - Hier bewaren we het IP adres van de gebruiker, altijd handig voor als iemand misbruik wil maken van je shoutbox.

De tabel is opgezet, en klaar, nu moeten we nog een verbinding maken met de Database. Dit doe je als volgt:

PHP

Code: Alles selecteren

<?php
$dbhost = "localhost";
$dbname = "DATABASE_NAAM";
$dbuser = "Gebruikersnaam";
$dbpass = "wachtwoord";
?>

Bovenstaande dien je aan te passen aan je eigen gegevens. Bewaar deze code in een bestand genaamd config.php zodat je altijd weet waar deze gegevens opgeslagen zijn.


Code
Goed, alles met betrekking tot de verbinding met de MySQL is klaar. Het wordt tijd om aan de echte shoutbox te beginnen.

De complete code:

PHP

Code: Alles selecteren

<?php
 
require_once("config.php");
$name = $_POST['name'];
$message = $_POST['message'];
$ip = $_POST['ip'];
$mlen = strlen($message);
$maxlength = 150;
$date = date("M jS Y");
 
if ($_POST['submit']) {
if ($name == "") {
echo "<strong>Error: Voer je nicknaam in.</strong>";
}
else if ($message == "") {
echo "<strong>Error: geen bericht verstuurd.</strong>";
}
else if ($mlen > $maxlength) {
echo "<strong>Error: bericht te lang.</strong>";
}
else {
$db = mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db($dbname) or die(mysql_error());
mysql_query("INSERT INTO shoutbox(name,message,date,ip) VALUES('$name','$message','$date','$ip')");
}
}
 
$db = mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db($dbname) or die(mysql_error());
$query = "SELECT * FROM shoutbox ORDER BY id DESC LIMIT 20";
$result = mysql_query($query);
 
echo "<div id=\"contentbox\">\n";
echo "<ul id=\"shoutboxmessage\">\n";
while($r = mysql_fetch_array($result)) {
$name = $r['name'];
$name = strip_tags($name);
$message = $r['message'];
$message = strip_tags($message);
echo "<li><strong>$name</strong>: $message</li>\n";
}
echo "</ul>\n";
echo "</div>\n";
 
mysql_close($db);
 
?>

HTML

Code: Alles selecteren

<div>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<strong>Nicknaam:</strong><br/>
<input type="text" name="name" maxlength="20"><br/>
<strong>Bericht:</strong><br/>
<textarea name="message"></textarea><br/>
<input type="submit" name="submit" value="Shout It!">
<input type="hidden" name="ip" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>">
</form>
</div>

Deze code bewaar je in het bestand shoutbox.php.

Nog niet weg gaan, we gaan even kijken wat we nu eigenlijk gedaan hebben.


De code nader bekeken
De eerste lijnen zijn eigenlijk alleen om ervoor te zorgen dat de verbinding met je database wordt gemaakt. We hebben een config.php bestand gemaakt met de gegevens van de MySQL database. Deze includen we nu in shoutbox.php om ervoor te zorgen dat we een verbinding kunnen maken met de database. Daarnaast hebben we alle $_POST variabelen toegevoegd om alles makkelijker te laten verlopen.

PHP

Code: Alles selecteren

<?php
//Include config.php once
require_once("config.php");
//Name of user
$name = $_POST['name'];
//User Message
$message = $_POST['message'];
//User Ip
$ip = $_POST['ip'];
//Length of message in characters
$mlen = strlen($message);
//Maximum length of characters you want
$maxlength = 150;
//Date format
$date = date("M jS Y");
?>

Het volgende wat we gaan doen is de fout controle. Als er een leeg veld is, of als de lengte van het bericht langer is dan toegestaan wordt er een foutmelding getoond.

PHP

Code: Alles selecteren

<?php
//If the user hit the "Submit" button
if ($_POST['submit']) {
//Check for name value
if ($name == "") {
echo "<strong>Error: Please enter your nickname.</strong>";
}
 
//Check for message value
else if ($message == "") {
echo "<strong>Error: No message to be sent.</strong>";
}
//Message length must be lower than our maximum length
else if ($mlen > $maxlength) {
echo "<strong>Error: Message too long.</strong>";
}
else {
//If everything is right insert it on our database
$db = mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db($dbname) or die(mysql_error());
mysql_query("INSERT INTO shoutbox(name,message,date,ip) VALUES('$name','$message','$date','$ip')");
}
}
 
?>

Let op dat we if($_POST['submit'] wordt gebruikt (op de derde regel) om er voor te zorgen dat het script alleen wordt uitgevoerd als de gebruiker op de submit knop drukt.

Goed dit loopt allemaal netjes, nu de data ontvangen. Dit doen we via de onderstaande code.

PHP

Code: Alles selecteren

<?php
//Connect to our MySQL database
$db = mysql_connect($dbhost,$dbuser,$dbpass);
//Select database
mysql_select_db($dbname) or die(mysql_error());
//Select all fields into our table
$query = "SELECT * FROM shoutbox ORDER BY id DESC LIMIT 20";
//Retrieve all information
$result = mysql_query($query);
?>

Met dit stukje code wordt alle data opgeslagen in onze database, om het later op de website te kunnen tonen.

Nu is het tijd om de informatie op de website te tonen (we zijn er bijna!).

PHP

Code: Alles selecteren

<?php
//Some CSS styling
echo "<div id=\"contentbox\">\n";
echo "<ul id=\"shoutboxmessage\">\n";
while($r = mysql_fetch_array($result)) {
//Strip unwanted HTML tag from nickname
$name = $r['name'];
$name = strip_tags($name);
//Strip unwanted HTML tag from message
$message = $r['message'];
$message = strip_tags($message);
//Display shouts!
echo "<li><strong>$name</strong>: $message</li>\n";
}
echo "</ul>\n";
echo "</div>\n";
//Close connection
mysql_close($db);
?>

We gebruiken hier de PHP functie strip_tags() om de HTML tags eruit te filteren. Dit kan er wel voor zorgen dat sommige berichten verwijderd worden. Om te voorkomen dat stukken tekst als HTML tag wordt gezien kan de functie htmlentities() gebruikt worden in plaats van de functie strip_tags(). Maar dat hangt helemaal van je eigen voorkeur af.

We moeten de gebruikers natuurlijk ook de mogelijkheid geven om iets in te voeren. Hiervoor gebruiken we het formulier.

HTML

Code: Alles selecteren

<div>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<strong>Nickname:</strong><br/>
<input type="text" name="name" maxlength="20"><br/>
<strong>Message:</strong><br/>
<textarea name="message"></textarea><br/>
<input type="submit" name="submit" value="Shout It!">
<input type="hidden" name="ip" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>">
</form>
</div>

Let er wel op dat je niet dezelfde input gebruikt als bij andere formulieren op je website. Dit kan voor verwarring en fouten zorgen in de code. Je dient hiervoor de $_POST variable te veranderen.


Plaats je shoutbox op je website
Nu je alle code heb wil je de shoutbox natuurlijk ook op je website plaatsen. Dit kan je doen via de onderstaande stappen:

Plaats de onderstaande code in de top van je shoutbox.php:

CSS

Code: Alles selecteren

<style type="text/css">
<!--
#contentbox {

background: #E5E5E5;
padding: 5px;
width: 195px;
height: 200px;
overflow: auto; }
ul#shoutboxmessage {
margin: 0;
padding: 0;
list-style-type: none;
color: #000000;
font: normal 10px verdana,tahoma,arial; }
-->
</style>

Je kan de kleuren natuurlijk veranderen naar je eigen smaak, maar ook de hoogte en de breedte van de box. Wees creatief, en werk naar je eigen smaak. Het enige wat je niet moet verwijderen is de overflow en de list-style-type omdat deze de shoutbox bij elkaar houdt.

Klaar om alles online te zetten. Hier gaan we. Het is handig om alle bestanden van de shoutbox in een aparte map te plaatsen. Zo blijft het overzichtelijk en weet je altijd waar je wat kan vinden. Daarnaast kan je ook rustig testen zonder alles op je website aan te passen.

Laten we de map bijvoorbeeld "shout" noemen. Plaats al je shoutbox bestanden hierin. Om te testen ga je dan naar http://www.jouwwebsite.nl/shout/shoutbox.php. Je kan nu rustig gaan testen.

Wil je de shoutbox op een pagina hebben. Dan kan je het volgende in de code van deze pagina toevoegen.

PHP

Code: Alles selecteren

<?php include("shout/shoutbox.php"); ?>

Controleer het pad waar je shoutbox staat. Is deze verkeerd, dan zal het uiteraard niet werken.

Dit is het, je heb nu een simpele shoutbox, zonder toevoegingen. Misschien dat ik je dat nog eens in een andere tutorial uitleg.

[iejen]

Hey,

Super bedankt voor de tutorial over deze shoutbox, ik heb nu alleen een vraag.
De shoutbox zit vol !
Is er iets dat bij bericht nummer 30 bericht 1 word gewist of iets dergelijks?

Mvg, Iejen

[Fluring Lifes]

Aan het script te zien pakt hij de laatste 20 berichten:

Code: Alles selecteren

$query = "SELECT * FROM shoutbox ORDER BY id DESC LIMIT 20";

Heb je hier misschien wat in aangepast? Geeft hij nog een melding bij het toevoegen?