Piszemy prostego shoutboxa

W dzisiejszym wpisie pokażę jak napisać najprostszego shoutboxa w PHP wykorzystując bazę MySQL. Wszystko krok po kroku ;)

1. Najpierw należałoby utworzyć bazę danych. W tym celu uruchamiamy phpMyAdmin lub inne narzędzie przygotowane przez usługodawce i zakładamy nową bazę danych, np. o nazwie shoutbox.
Tworzenie bazy SQL

2. Nasza baza powinna również zawierać odpowiednią tabelę oraz pola, takie jak: login użytkownika, treść shouta, data oraz IP. Możemy zrobić to za pomocą formularza lub skorzystać z szybszej metody. W phpMyAdmin wybieramy zakładkę SQL, wklejamy poniższe zapytanie i je wykonujemy:

CREATE TABLE `posty` (
    `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
    `login` VARCHAR(30) NOT NULL,
    `tresc` VARCHAR(125) NOT NULL,
    `data` DATETIME NOT NULL,
    `ip` VARCHAR(15) NOT NULL
);

Powinna pojawić siÄ™ nowa tabela – posty. Przeanalizujmy jÄ…:

  • `id` – pole przechowujÄ…ce identyfikator rekordu, numerowany automatycznie,
  • `login` – pole ograniczone do 30 znaków przechowujÄ…ce nick użytkownika,
  • `tresc` – pole ograniczone do 125 znaków przechowujÄ…ce treść shouta,
  • `data` – pole przechowujÄ…ce datÄ™ o typie daty,
  • `ip` – pole przechowujÄ…ce adres IP o typie znakowym (max. 15 znaków).

Jak można zauważyć, każde z pól nie może być puste (NOT NULL).

3. Najwyższy czas przejść do kodu PHP. Na początku wypadałoby utworzyć nowy plik, np. shoutbox.php i połączyć się z bazą:

<?php
 mysql_connect ("localhost","root","pass"); //łączę z bazą ("serwer bazy","użytkownik","hasło")
 mysql_select_db ("shoutbox"); //nazwa bazy
 mysql_query ("SET NAMES utf8"); //kodowanie znaków (przydatne przy pobieraniu treści)
?>

4. Przejdźmy teraz do rzeczy prostej – formularza. Powinien on zawierać jedynie dwa pola i przycisk:

<form action="?" method="POST">
Nick: <input type="text" name="login" maxlength="30">
Treść: <input type="text" name="tresc" maxlength="125">
<button type="submit" name="wyslij">Napisz</button>
</form>

Zwróćmy uwagę na to, że pola tekstowe również posiadają zabezpieczenie przed zbyt długą treścią, by użytkownik nie zdziwił się, gdy zobaczy ucięty wpis lub login ;)

5. Dane z formularza trzeba jakoś przesłać do SQL, a więc dodajmy trochę kodu:

if(isset($_POST['wyslij']) && !empty($_POST['login']) && !empty($_POST['tresc']))
{
	//Definicja zmiennych
	$login = mysql_real_escape_string(htmlspecialchars($_POST['login']));
	$tresc = mysql_real_escape_string(htmlspecialchars($_POST['tresc']));
	$data = date('Y-m-d H:i:s');
	$ip = $_SERVER['REMOTE_ADDR'];

	//Wykonujemy zapytanie importujÄ…ce zdefiniowane dane
	mysql_query ("INSERT INTO `posty` (`login`, `tresc`, `data`, `ip`) VALUES('$login', '$tresc', '$data', '$ip')");

	//No i przenosimy użytkownika z powrotem do shoutboxa
	header('Location: '.$_SERVER['REQUEST_URI']);
}

Ok, kilka słów wyjaśnień:

  • W warunku srawdzamy czy zostaÅ‚ wciÅ›niÄ™ty przycisk formularza oraz czy pola login i treść nie sÄ… puste,
  • Definiujemy wszystkie potrzebne zmienne do zapytania. Aby zabezpieczyć siÄ™ przed atakiem XSS i SQL Injection stosujemy funkcje htmlspecialchars() oraz mysql_real_escape_string().

6. Połowę funkcjonalności skryptu mamy za sobą. Teraz czas na wyświetlanie dodanych rekordów. W tym celu posłużymy się else, którego dodamy do poprzedniego warunku oraz pętlą while:

else {
	//Pobieramy dane z bazy
	$query = mysql_query ("SELECT * FROM `posty` ORDER BY `data` DESC LIMIT 5"); 

	//PoczÄ…tek struktury tabeli
	echo '<table>';

	//Pętla do wyświetlenia wszystkich wpisów
	while($shout=mysql_fetch_array($query)) {
	     echo '<tr><td>'
	     .'<b>'.$shout['login'].':</b> ' //wyświetlamy nick
	     .$shout['tresc'] //wyświetlamy treść
	     .'<br/>'
	     .$shout['data'] //wyświetlamy datę
	     .'</tr></td>';
	}

	//Koniec struktury tabeli
	echo '</table>';
}

Myślę, że wszystko jest zrozumiałe. Wyjaśnię tylko zastosowane zapytanie:

  • Zapytanie do bazy pobiera dane z tabeli `posty`, jest sortowane wg pola `data` oraz posiada limit pobierania wpisów do 5.

7. To już ostatni punkt tego tutoriala ;) Skrypt powinien działać poprawnie. Można go łatwo dołączyć do swojej strony poprzez funkcję include:

<?php include('shoutbox.php'); ?>

Przydałby się pewne modyfikacje, takie jak komunikaty, ale to zostawiam Wam :P

3 Odpowiedzi do “Piszemy prostego shoutboxa

  1. Twój-Fan pisze:

    Super. Prosimy o więcej tego typu artykułów.
    Pozdrawiam

  2. Nie można pobrać ;[

  3. demo nie działa

Zostaw komentarz

Copyright © 2012 Klocek Blog. Designed by Finance News & Klocek.