Scripts
Shoutbox systeem
Nu heb een aantal Shoutbox applicaties gezien en daar zie ik dat er veel commentaar wordt gegevens qua veiligheid en overzichtelijkheid. Daarom ben ik vandaag aan de slag gegaan en heb ik een shoutboxsysteem gemaakt met zoals karl voorstelde, JQuery. Ik heb een systeem wat ik op internet heb gevonden verbeterd en aangepast. Zeker op het gedeelte van PHP want dat was helemaal prut. Ik heb uitgebreide documentatie toegevoegd zodat het voor iedereen makkelijk te lezen en te begrijpen is. Nu wil ik niet zeggen dat ik direct een goed Shoutbox systeem heb ontworpen maar volgens mij ben ik wel in de goede richting... Commentaar is natuurlijk erg welkom. Het zijn wel een aantal bestanden, en het kan wel wat onoverzichtelijk zijn daarom heb ik de onbelangrijke bestanden even weggelaten en alles online gezet. Het is hier te downloaden: Klik Voorbeeld: Klik Voor de code duidelijkheid is het javascript bestandje geopend met PHP. Toekomst: - Adminpaneel voor degene die het gepost heeft - Anti spam beveiliging ( Nu al last van spammers, kinderachtig... ) - IP blokker - Admin panel voor de beheerder Succes met het script!
shoutbox.php
<?php
// Database connectie importeren
include_once './includes/db_connect.php';
// Functie bestand importeren
include_once './includes/functions.php';
// Kijken of er een action gezet is
if( isset( $_POST['action'] ) && !empty( $_POST['action'] ) )
{
/**
* De action verdelen. Er zijn de volgende mogelijkheden
*
* - Update: Deze actie update de berichten lijst. ( update )
* - Insert: Deze actie schrijft een nieuwe bericht naar de database. ( insert )
*/
switch( $_POST['action'] )
{
// De berichten lijst updaten en de laatste 20 berichten weergeven
case 'update':
/**
* Functie getMessage aanroepen om het aantal berichten wat wordt opgegeven als parameter op te halen.
*
* @param Int $number Het limiet van het aantal berichten wat geselecteerd moet worden
*/
$getMessageResult = getMessage( 20 );
/**
* Alle gegevens die verkregen zijn uit het resultaat van de query omzetten in string.
* De volgende gegevens worden omgezet.
*
* - Gebruikersnaam: De naam welke verzonden is vanuit het formulier
* - Bericht: Het bericht wat verzonden is vanuit het formulier
* - Datum: De datum waarop het bericht is gepubliceerd
*/
while( $row = mysql_fetch_assoc( $getMessageResult ) )
{
// Alle gegevens weergeven op het scherm
echo
'
<li>
<b> ' .htmlspecialchars( $row['user'] ). ' </b> <img src="./css/images/bullet.gif" alt="-" /> ' .htmlspecialchars( $row['message'] ). '
<span class="date"> ' .htmlspecialchars( $row['date'] ). ' </span>
</li>
';
}
break;
// Een nieuwe bericht toevoegen aan de berichten lijst
case 'insert':
/**
* Functie insertMessage aanroepen om zo een nieuw bericht in de database te schrijven
*
* @param String $nick De gebruikersnaam die is verzonden bij het ingevulde formulier
* @param String $message Het bericht wat is verzonden bij het ingevulde formulier
*/
echo insertMessage( $_POST['nick'], $_POST['message'] );
break;
// Er is een ongeldige action gezet
default:
echo 'Er is een ongeldige action gezet. U kunt alleen gebruik maken van de actions update en insert.';
break;
}
}
else
{
// Er is geen action gezet terwijl de pagina toch is aangeroepen. We sturen de bezoeker terug naar de hoofdpagina
header("location: index.html");
}
?>index.html
[code]
<html>
<head>
<title>Shoutbox</title>
<link rel="stylesheet" href="css/general.css" type="text/css" media="screen" />
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/shoutbox.js"></script>
</head>
<body>
<form method="post" id="form">
<table>
<tr>
<td><label>Naam</label></td>
<td><input type="text" class="text user" id="nick" /></td>
</tr>
<tr>
<td><label>Bericht</label></td>
<td><input type="text" class="text" id="message" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="send" value="Verzenden" /></td>
</tr>
</table>
</form>
<div id="container">
<ul class="menu">
<li>Shoutbox</li>
</ul>
<span class="clear"></span>
<div class="content">
<center><b>Laatste berichten</b></center>
<div id="loading"><img src="css/images/ajax-loader.gif" alt="Laden..." /></div>
<ul>
<ul>
</div>
</div>
</body>
</html>
[/code]shoutbox.js
<?php
$(document).ready(function(){
/**
* Globale variablen die worden gezet zodra deze pagina wordt geladen.
* De volgende attributen hebben met elkaar te maken
*
* - inputUser: Deze variable is gekoppeld met het input veld naam. ( nick ) Alle informatie wordt in deze variable opgeslagen
* - inputMessage: Deze variable is gekoppeld met het veld waarin het bericht kan worden getypt. ( message ) Alle informatie wordt in deze variable opgeslagen
* - loading: Deze variable is gekoppeld aan het AJAX load gifje.
* - messageList: Deze variable is gekoppeld aan de ul waarin de berichten worden weergegeven.
*/
var inputUser = $("#nick");
var inputMessage = $("#message");
var loading = $("#loading");
var messageList = $(".content > ul");
/**
* Deze functie haalt alle recente berichten op. Via een AJAX request wordt dit door PHP afgehandeld.
* Deze functie wordt aangeroepen als men de eerste keer op de webpage komt maar ook als er een nieuw bericht is toegevoegd.
*/
function updateShoutbox()
{
// Laat de lijst met de berichten verdwijnen
messageList.hide();
// Laat het gifje met de AJAX-loader te voorschijn komen
loading.fadeIn();
/**
* Hier verzend AJAX alles naar PHP
*/
$.ajax({
type: "POST",
url: "shoutbox.php",
data: "action=update",
complete: function(data)
{
// Wanneer de data is verzonden via AJAX naar PHP wordt het gifje met de AJAX-loader verborgen
loading.fadeOut();
// De lijst met alle berichten wordt gevuld met data
messageList.html(data.responseText);
// De lijst met berichten wordt weer te verschijn gehaald.
messageList.fadeIn(2000);
}
});
}
/**
* Functie om te kijken of alle velden zijn ingevoerd
* De volgende velden worden gecontroleerd of deze niet leeg zijn
*
* - Naam ( nick )
* - Bericht ( message )
*/
function checkForm()
{
if(inputUser.attr("value") && inputMessage.attr("value"))
{
return true;
}
else
{
return false;
}
}
// Voor de eerste keer de shoutbox updaten om zo recente berichten te kunnen weergeven
updateShoutbox();
/**
* Als er op de submit button is gedrukt worden de volgende procedures op volgorde behandeld
*
* - Controleren of alle velden zijn ingevuld
* - Nieuwe variablen worden gedefinieerd ( nick, message )
* - De submit button wordt gedeactiveerd
* - Er word een nieuwe tekst geplaatst in de button ( Laden ... )
* - De nieuwe gegevens worden verzonden door AJAX, PHP pakt deze gegevens op en verzend deze gegevens naar de database.
* - Als de data verzonden is wordt de functie 'updateShoutbox' aangeroepen en wordt de submit button weer geactiveerd
*/
$("#form").submit(function()
{
// Controleren of alle velden zijn gevuld
if(checkForm())
{
// Definieer nieuwe variablen met de inhoud van de velden
var nick = inputUser.attr("value");
var message = inputMessage.attr("value");
// Deactiveer de submit button en vul deze met een nieuwe tekst
$("#send").attr({ disabled:true, value:"Laden..." });
$("#send").blur();
/**
* Hier verzend AJAX alles naar PHP
*/
$.ajax({
type: "POST",
url: "shoutbox.php",
data: "action=insert&nick=" + nick + "&message=" + message,
complete: function(data)
{
// Wanneer de data is verzonden via AJAX naar PHP wordt de data geladen in de lijst met berichten
messageList.html(data.responseText);
// De functie updateShoutbox wordt aangeroepen om zo de lijst met berichten te vernieuwen en deze up te date te houden.
updateShoutbox();
// De submit button wordt weer geactiveerd en de oorspronkelijke tekst wordt weer getoond
$("#send").attr({ disabled:false, value:"Verzenden" });
}
});
}
else
{
// Niet alle velden zijn gevuld, melding geven doormiddel van een alert box
alert("Niet alle velden zijn gevuld!");
}
// Omdat wij een refresh van de pagina willen voorkomen returnen wij hem false
return false;
});
});
?>functions.php
<?php
/**
* Alle toegevoegde berichten uit de database selecteren.
* De berichten worden gesorteerd op de datum waarop het bericht is verzonden. ( ORDER BY date DESC )
* Er wordt gesoorteerd op een limit van 20 berichten. ( LIMIT 20 )
*
* @param Int $number Het limiet van het aantal berichten wat geselecteerd moet worden
*/
function getMessage( $number )
{
// Query die uitgevoerd moet worden
$getMessageQuery =
"
SELECT
date,
user,
message
FROM
shoutbox
ORDER BY
date
DESC
LIMIT " .( int )$number. "
";
// Query uitvoeren en kijken of er foutmeldingen zijn opgetreden
if( !$getMessageResult = mysql_query( $getMessageQuery ) )
{
// Query is mislukt foutmelding weergeven.
echo 'Er is een fout opgetreden bij het selecteren van de berichten.';
}
else
{
// Query is gelukt. Resultaat teruggeven.
return $getMessageResult;
}
}
/**
* Een nieuwe bericht aan de database toevoegen
* De volgende gegevens worden naar de database verzonden
*
* - De gebruiker die het bericht heeft aangemaakt
* - Het bericht wat de gebruiker heeft geschreven
*
* De volgende gegevens worden door de database zelf gegenereerd
*
* - Het bericht ID
* - De datum waarop het bericht is geplaatst
*
* @param String $user
* @param String $message
*/
function insertMessage( $user, $message )
{
// Query die uitgevoerd dient te worden
$insertMessageQuery =
"
INSERT INTO
shoutbox
(
user,
message
)
VALUES
(
'" .mysql_real_escape_string( strip_tags( $user ) ). "',
'" .mysql_real_escape_string( strip_tags( $message ) ). "'
)
";
// Query uitvoeren en kijken of er foutmeldingen zijn opgetreden
if( !$insertMessageResult = mysql_query( $insertMessageQuery ) )
{
// Query is mislukt foutmelding weergeven.
echo 'Er is een fout opgetreden bij het toevoegen van de berichten.';
}
else
{
// Query is gelukt. Resultaat teruggeven.
return $insertMessageResult;
}
}
?>db_connect.php
<?php
/**
* Hier dit bestand wordt een database verbinding tot stand gebracht.
* Er wordt gebruik gemaakt van de volgende dingen
*
* - Host: Om de database te zoeken moet er een host worden ingevuld. Zodra deze is gevuld wordt er gekeken of op die host een database server staat.
* - Database naam: Gegevens wordt opgeslagen in de database. Om aan te geven in welke database de gegevens opgeslagen dient te worden moet de database naam worden ingevuld.
* - Gebruikersnaam / Wachtwoord: Om toegang te krijgen tot de database wordt er gebruik gemaakt van authenticatie doormiddel van een gebruikersnaam en wachtwoord. Zo kunnen onbevoegde personen niet bij de informatie komen.
*
* Hieronder configureren wij de gegevens om zo doormiddel van die gegevens connectie te maken met de database server.
*/
// Database host
$db_host = 'localhost';
// Database naam
$db_name = 'shoutbox';
// Gebruikersnaam
$user_name = 'root';
// Wachtwoord
$user_password = '';
/**
* Er wordt nu verbinding met de database tot stand gebracht.
* De volgende volgorde wordt gehanteerd.
*
* - Database host
* - Gebruikersnaam
* - Wachtwoord
*/
$mysql = mysql_connect( $db_host, $user_name, $user_password );
/**
* De database wordt nu geselecteerd.
* De volgende volgorde wordt gehanteerd
*
* - De database die geselecteerd moet worden
* - De variablen waarin database connectie is gelegd
*/
$database = mysql_select_db( $db_name, $mysql );
/**
* Een belangrijk onderdeel is foutenafhandeling. Er moet altijd worden gekeken of de connectie is gelukt en of de database geselecteerd is.
* De volgende volgorde wordt gehanteerd.
*
* - Kijken of de connectie met de database gelegd is
* - Kijken of de database geselecteerd is
*/
// Kijken of de connectie is gelukt
if( !$mysql )
{
echo 'Er is een fout opgetreden bij het maken van de connectie met de database server.';
}
// Kijken of de database geselecteerd is
if( !$database )
{
echo 'Er is een fout opgetreden bij het selecteren van de database.';
}
?>
Reacties
0