Forum Komputerowe Info-PC.org :: ShoutBox oparty na bazie MySQL

qba_23 · Dołączył: 01 Lip 2008 Posty: 8 Skąd: Haczów

Witam!

W tym tutorialu chciałby napisać, jak każdy, kto zna php i html oraz podstawy SQL może sobie zrobić własny SB na swojej stronie

Niestety brakuje w nim filtra antyfloodowego i to jest jego wada

No ale zaczynajmy wreszcie:
Na początku tworzymy plik shoutbox.php:

Kod:

<table border="1">
<tr><td>
<iframe class="frame" src="shoutbox_view.php" width="XXX" height="YYY" border="0"></iframe>
</td></tr>
<tr><td>
<form method="post" action="<? echo $_SERVER['PHP_SELF']; ?>">
<table border="0"><tr><td>
<input type="text" name="sbnick" value="Wpisz swój nick i naci¶nij <ENTER>..."
onfocus="if (this.value == 'Wpisz swój nick i naci¶nij <ENTER>...') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Wpisz swój nick i naci¶nij <ENTER>...';}" />
</td><td><tr><td>
<input type="text" name="sbtresc" value="Wpisz tre¶ć wiadomo¶ci i naci¶nij <ENTER>..."
onfocus="if (this.value == 'Wpisz tre¶ć wiadomo¶ci i naci¶nij <ENTER>...') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Wpisz tre¶ć wiadomo¶ci i naci¶nij <ENTER>...';}" />
</td><td>
<input type="submit" name="sbsubmit" value="Wy¶lij!"/>
</td></tr>
</table>
</form>
</td></tr></table>

To był kod html dla formularza^^.
W kodzie możemy zamienić XXX na szerokość ramki z wiadomościami, a YYY na jej wysokość.
Teraz kod php:

Kod:

<?php
function konwertuj($tekst) {
$win = array("±","ć","ę","ł","ń","ó","¶","Ľ","ż", "Ą","Ć","Ę","Ł","Ń","Ó","Ś","Ź","Ż");
$uni = array("ą","ć","ę","ł","ń","ó",
"ś","ź","ż","Ą","Ć","Ę",
"Ł","Ń","Ó","Ś","Ź","Ż");
for ( $i=0; $i < count($win);$i++) $win[$i]="/".$win[$i]."/";
$tekst = preg_replace($win, $uni, $tekst);
return($tekst);
}

Ta funkcja przydaje się, aby zamienić kodowanie polskich znaków.
Teraz kod, który doda nam dane z formularza do bazy danych:

Kod:

if($_POST['sbsubmit']) {
$user = trim($_POST['sbnick']);
$tresc = trim($_POST['sbtresc']);
if(isset($tresc)) {
require './config.php.inc';
$dodaj = $pdo -> prepare("INSERT INTO shoutbox SET user=:user, msg=:msg, date=:data");
$dodaj -> bindValue(":user", konwertuj($user));
$dodaj -> bindValue(":msg", konwertuj($tresc));
$dodaj -> bindValue(":data", date('d.m.Y, H:i'));
$dodaj -> execute();
$dodaj -> closeCursor();
}
else echo "Nie podałe¶ tre¶ci wiadomo¶ci!";
}

W skrypcie wykorzystujemy klasę PDO, która jest dołączona do PHP 5, a służy do łączenia się z bazami danych, oraz ułatwia wykonywanie poleceń i zabezpiecza nam skrypt przed atakami SQL Injection.
Teraz plik shoutbox_view.php, potrzebny do wyświetlania wiadomości z bazy danych.

Kod:

Na początku wczytujemy plik ze stylami css, potrzebny do kolorowania pól z wiadomościami, aby SB był czytelniejszy.

Kod:

<?php
require './config.php.inc';
$wyswietl = $pdo -> query("SELECT * FROM shoutbox ORDER BY id desc LIMIT 15;");
if($wyswietl -> rowCount() > 0) {
echo '<table border="0" cellpadding="0" cellspacing="0" width="100%">';
for($a=0;$wysw = $wyswietl -> fetch(); $a++) {
if($a % 2 == 0) {
$sb = "sb1";
}
else $sb = "sb2";
echo '<tr><td class="'.$sb.'">';
if($_SESSION['access'] == 'admin') {
echo ' [<a href="shoutbox_view.php?action=del&id='.$wysw['id'].'">U</a>] ';
}
echo '<b>'.$wysw['user'].'</b> ['.$wysw['date'].'] : ';
echo nl2br($wysw['msg']);
echo'</td></tr>';
}
echo '</table>';
}
$wyswietl -> closeCursor();

Teraz wyświetlamy nasze wiadomości, tablice z nimi umieszczamy w pętli, aby wyświetlić je po kolei tak jak chcemy. Możemy zmienić limit wiadomości,k tóre będą wyświetlane, w tym wypadku wynosi on 15. Jest podany w zapytaniu do bazy. Aby zmienić kolejność wyświetlania wiadomości, usuwamy 'desc' z tego samego zapytania.
Teraz dodajemy jeszcze kod, który pozwoli nam na usuwanie wiadomości:

Kod:

else echo '<p style="font-size: 12;">Brak wiadomo¶ci!';
if(isset($_GET['action']) && isset($_GET['id']) && $_GET['action'] == 'del') {
$id = $_GET['id'];
$pdo -> exec("DELETE FROM shoutbox WHERE id=$id LIMIT 1");
echo '<META HTTP-EQUIV="Refresh" CONTENT="0;URL=./shoutbox_view.php">';
}
?>
</body>

Plik musimy umieścić w tym samym miejscu co shoutbox.php

Teraz został nam jeszcze plik config.php.inc, oraz stworzenie tabeli w bazie danych.
Najpierw zajmiemy się tym plikiem. Będzie on zawierał dane potrzebne do połączenia się z naszą bazą danych:

Kod:

<?php
$dbhost = 'localhost'; // host bazy danych
$dbuser = 'root'; //user bazy danych
$dbpass = ''; //haslo dal podanego wyzej usera
$dbname = 'baza_danych'; //nazwa naszej bazy danych
$pdo = new PDO("mysql:host=$dbhost;dbname=$dbname", "$dbuser", "$dbpass");
$pdo -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
?>

Plik musimy uzupełnić własnymi danymi do bazy. Plik umieszczamy w głównym katalogu naszym skryptem.
A teraz musimy jeszcze stworzyć tabele w bazie danych:

Kod:

CREATE TABLE `shoutbox` (
`id` smallint(6) NOT NULL auto_increment,
`user` tinytext NOT NULL,
`msg` text NOT NULL,
`date` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin2;

No i to by było na tyle, aby umieścić nasz skrypt na stronie wystarczy dodać:

Kod:

<?php
include './sciezka_do_pliku/shoutbox.php';
?>

Plik do którego includujemy SB musi mieć rozszerzenie php xD

Byłbym zapomniał xD Jeszcze plik css:

Kod:

iframe {
border: 0.5px solid Silver;
}
input, textarea {
background-color: #f3f3f3;
border: 0.5px solid Silver;
}
td.sb1 {
font-size: 12;
background-color: white;
color: #494949;
padding-bottom: 1px;
border-bottom: 0.5px solid silver;
}
.sb2 {
font-size: 12;
background-color: Gainsboro;
color: #494949;
padding-bottom: 1px;
border-bottom: 0.5px solid silver;
}

Nazwa tego pliku to styl.css

Skrypt każdy może wykorzystywać do woli na swoich stronach, proszę tylko o dodanie tekstu, że skrypt jest mojego autorstwa, jeżeli ktoś będzie chciał go skopiować (i tak nikt nie posłucha

).
Jeżeli komuś się chce, to może dopisać jeszcze filtr antyfloodowy i edytowanie wiadomości

demo.png
Jeszcze nad polem do dodawania wiadomości powinno być pole do wpisywania nicku ;) To jest wersja w moim cms'ie i tu nick jest pobierany z sesji ;)

Plik ściągnięto 16 raz(y) 13,07 KB

Buldog · Usunięty Dołączył: 28 Cze 2008 Posty: 29

Zobaczę na swojej stronie jak to wygląda. A masz jakieś demo?

qba_23 · Dołączył: 01 Lip 2008 Posty: 8 Skąd: Haczów

dema niestety nie mam, wszystkie skrypty pisze na localhoście

Ale może wrzucę jakieś screeny

)

Dodałem jednego screena, ale to jest wersja z mojego cmsa i brakuje pola na nick, bo u siebie wykorzystuje sesje

BQ · Dołączył: 01 Mar 2008 Posty: 811

Właśnie, prosimy o demo.
Buldog, jak wrzucisz to zrób screeny.