chevron-left chevron-right

[PHP] Prosty czat (shoutbox).

W dzisiejszym artykule mam zamiar Tobie sposób na zbudowanie prostego czatu na bazie PHP i bazy danych MySQL. Jako uzupełnienie tego poradnika przedstawię także przykładowy styl dla takiej aplikacji.

Czego potrzebujemy do budowy takiej aplikacji?
Na pewno potrzebujemy następujących rzeczy:

  • własny serwer (wykupiony lub postawiony u siebie na komputerze, np. za pomocą programu XAMPP)
  • adres bazy danych (np. localhost)
  • login do bazy danych
  • hasło do bazy danych
  • nazwa bazy danych
Taki zestaw informacji wystarczy nam by uzyskać połączenie z bazą danych, w której to musimy stworzyć tabelę o nazwie "czat" za pomocą następującego polecenia SQL: 
CREATE TABLE 'czat' (
  'id' INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
  'nazwa' VARCHAR(100) NOT NULL,
  'email' VARCHAR(100) NOT NULL,
  'tresc' TEXT NOT NULL,
  'ip' VARCHAR(45) NOT NULL,
  PRIMARY KEY ('id')
);
Następnie musimy przygotować folder "czat" z następującymi plikami:
  • index.php
  • db.php
  • styl.css
  • folder "img", dla plików graficznych, które mamy zamiar użyć w naszej aplikacji

Teraz pora stworzenie kodu dla naszego pliku db.php, który odpowiada za przechowywanie danych do połączenia się z bazą danych na serwerze.
Kod wygląda następująco: 

	<?php
        $host = 'localhost'; //adres serwera bazy danych, zazwyczaj localhost
        $username = 'login'; //login do bazy danych
        $password = 'haslo'; //hasło do bazy danych
        $database = 'demo'; //nazwa bazy danych do ktorej będziemy się odnosić
    ?>
Nadszedł moment, aby zacząć tworzyć plik index.php, który na początek wygląda następująco: 
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Czat by Piotr Nalepa | Blog.piotrnalepa.pl</title>
        <link rel="stylesheet" href="styl.css" type="text/css" />
    </head>
    <body>
        <div id="strona">
            <h1>Czat</h1>
            <h5><a href="http://www.piotrnalepa.pl" title="Piotr Nalepa">Piotr Nalepa</a> | <a href="https://blog.piotrnalepa.pl" title="Blog webmasterski">Blog webmasterski</a></h5>
            <div id="boxtop">
            </div>
            <div id="content">
Następnie należy wstawić kod uzyskujący połączenie z bazą danych do pliku index.php: 
    <?php
        $self = $_SERVER['PHP_SELF']; //pobiera nazwę tego pliku do zmiennej
        $adres_ip = $_SERVER[REMOTE_ADDR]; //pobiera adres IP użytkownika
        include ('db.php'); // pobiera dane dostępowe do bazy danych
        $connect = mysql_connect($host, $username, $password) or die('<p class="blad">Nie można się połączyć z bazą!</p>');
        mysql_select_db($database, $connect) or die('<p class="blad">Błąd połączenia z bazą danych</p>');
Sprawdzamy czy coś zostało przesłane: 
    if(isset($_POST['send']))
    {
        if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['post']))
        {
            echo('<p class="blad">Nie wypełniłeś wszystkich wymaganych pól.</p>');
        } 
        else
        {
Jeśli nic nie zostało wysłane, to zostaje sprawdzone, czy wymagane pola zostały wypełnione. Jeśli nie są, to wyświetla stosowny komunikat. Kolejnym krokiem jest wpisanie następującego kodu: 
            $nazwa = htmlspecialchars(mysql_real_escape_string($_POST['nazwa'])); 
            $email = htmlspecialchars(mysql_real_escape_string($_POST['email'])); 
            $tresc = htmlspecialchars(mysql_real_escape_string($_POST['tresc']));
            $sql = "INSERT INTO czat SET nazwa='$nazwa', email='$email', tresc='$tresc', ip='$adres_ip';";
            if (@mysql_query($sql))
            {
                echo('<p class="brawo">Dodano nowy wpis!</p>');
            } 
            else
            {
                echo('<p class="blad">Wystąpił niespodziewany błąd, spróbuj jeszcze raz.</p>');
            }
        }
    }
Jak widać skorzystaliśmy tutaj z funkcji PHP: htmlspecialschars() oraz mysql_real_escape_string(). Zapobiegają one wpisaniu złośliwego kodu do pól tekstowych, które po wywołaniu z bazy danych mogłyby uszkodzić całą aplikację.
Teraz pora na wywołanie tych wpisów czatu na okno przeglądarki. Domyślnie ustawiłem na 10 ostatnich wpisów. 
	$query = "SELECT * FROM czat ORDER BY id DESC LIMIT 10;";
 
    $result = @mysql_query($query) or die('<p class="blad">Wystąpił błąd podczas pobierania wpisów z bazy.</p>'); ?>
    <ul>
    <?php
    	while ($row = mysql_fetch_array($result)) {
        $enazwa = stripslashes($row['nazwa']);
        $eemail = stripslashes($row['email']);
        $etresc = stripslashes($row['tresc']);
 
        $grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=".md5(strtolower($eemail))."&size=70"; 
 
        echo ('
        <li>
        	<div class="meta">
            	<img src="%27.$grav_url.%27" alt="Gravatar">
        		<p>'.$enazwa.'</p>
            </div>
            <div class="wpis">
            	<p>'.$etresc.'</p>
           	</div>
        </li>');
    }
    ?></ul>
Tutaj wykorzystałem pobieranie obrazków na podstawie profilu z serwisu Gravatar.com.
W powyższym kodzie, pierwsza linia stara się sprawdzić czy są jakieś wpisy w bazie danych i jeśli są, to powinny być wyświetlone na stronie.
Natomiast funkcja stripslashes() usuwa wszystkie znaki "/" z tekstu zapisanego w bazie danych.

Ostatnim krokiem jest stworzenie formularza do wpisów na czacie. 

	<form action="<?php $self ?>" method="post">
        <h2>Czatuj!</h2>
        <div class="fnazwa">
        	<label for="nazwa">
            	<p>Nazwa:</p>
            </label>
            <input name="nazwa" type="text" cols="20" />
        </div>
        <div class="femail">
        	<label for="email">
        		<p>Email:</p>
            </label>
            <input name="email" type="text" cols="20" />
        </div>
        <textarea name="tresc" rows="5" cols="40"></textarea>
        <input name="send" type="hidden" />
        <p><input type="submit" value="Wyślij" /></p>
	</form>
	</div>
    </div>
</body>
</html>
Jak widać, została tu wykorzystana zmienna $send w celu wstawienia adresu strony jako link. Poza tym, mamy do czynienia ze standardowym szablonem formularza. Należy też jakoś upięknić nasz czat. Więc stwórzmy plik styl.css, który bedzie wyglądał tak: 
	* {
    margin: 0;
    padding: 0;
    }
    body {
    background: #323f66 top center url("images/tlo.png") no-repeat;
    color: #ffffff;
    font-family: Tahoma, sans-serif;
    }
    h1 {
    font-size: 22px;
    letter-spacing: -1px;
    background: url("images/czat.png") no-repeat;
    width: 303px;
    margin: 0 auto;
    text-indent: -500px;
    color: #33ccff;
    }
    h2 {
    font-size: 18px;
    letter-spacing: -1px;
    background: url("images/czatuj.png") no-repeat;
    width: 119px;
    text-indent: -500px;
    color: #33ccff;
    clear: both;
    margin: 15px 0;
    }
    h5 a:link, h5 a:visited {
    color: #ffffff;
    text-decoration: none;
    }
    h5 a:hover, h5 a:active, h5 a:focus {
    border-bottom: 1px solid #fff;
    }
    p {
    font-size: 14px;
    line-height: 16px;
    font-family: Tahoma, sans-serif;
    }
    p.blad {
    background-color: #603131;
    border: 1px solid #5c2d2d;
    width: 260px;
    padding: 10px;
    margin-bottom: 15px;
    }
    p.brawo {
    background-color: #313d60;
    border: 1px solid #2d395c;
    width: 260px;
    padding: 10px;
    margin-bottom: 15px;
    }
    #strona {
    width: 664px;
    margin: 20px auto;
    text-align: center;
    }
	#boxtop {
	margin: 30px auto 0px;
	background: url("images/top.png") no-repeat;
	width: 663px;
	height: 23px;
	}
 
	#boxbot {
	margin: 0px auto 30px;
	background: url("images/bot.png") no-repeat;
	width: 664px;
	height: 25px;
	}
	#content {
	margin: 0 auto;
	width: 664px;
	text-align: left;
	background: url("images/bg.png") repeat-y;
	padding: 15px 35px;
	}
 
    #content ul {
    margin-left: 0;
    margin-bottom: 15px;
    }
 
    #content ul li {
    list-style: none;
    clear: both;
    padding-top: 30px;
    }
 
    #content ul li:first-child {
    padding-top:0;
    }
 
    .meta {
    width: 85px;
    text-align: left;
    float: left;
    min-height: 110px;
    font-weight: bold;
    }
 
    .meta img {
    padding: 5px;
    background-color: #313d60;
    }
 
    .meta p {
    font-size: 12px;
    }
 
    .wpis {
    width: 500px;
    float: left;
    margin-left: 15px;
    min-height: 110px;
    padding-top: 5px;
    }
 
    form {
    clear: both;
    margin-top: 135px !important;
    }
 
    .fnazwa, .femail {
    width: 222px;
    float: left;
    }
 
    form p {
    font-weight: bold;
    margin-bottom: 3px;
    }
 
    form textarea {
    width: 365px;
    overflow: hidden;
    }
 
    form input, form textarea {
    background-color: #313d60;
    border: 1px solid #2d395c;
    color: #ffffff;
    padding: 5px;
    font-family: Tahoma, sans-serif;
    margin-bottom: 10px;
    }
W ten sposób stworzyliśmy nasz własny czat.
Dziękuję za uwagę 🙂