В данном уроке мы создадим гостевую книгу на PHP с использованием AJAX. Записи будут храниться в базе данных. Таблица будет содержать следующую информацию: имя отправителя, адрес email, IP адрес и дата-время последней записи. Будет использоваться jQuery (для реализации AJAX). Также будет реализована простая защита от спама - можно размещать не более одной записи каждые 10 минут.
Шаг 1. SQL
Для работы нашего приложения требуется создать таблицу:
CREATE TABLE IF NOT EXISTS `s178_guestbook` (
`id` int(10) unsigned NOT NULL auto_increment,
`name` varchar(255) default '',
`email` varchar(255) default '',
`description` varchar(255) default '',
`when` int(11) NOT NULL default '0',
`ip` varchar(20) default NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
Шаг 2. PHP
Основной файл будет содержать следующий код:
guestbook.php
<?php
// Отключаем возможные предупреждения
if (version_compare(phpversion(), "5.3.0", ">=") == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
require_once('classes/CMySQL.php'); // including service class to work with database
// Получаем IP посетителя
function getVisitorIP() {
$ip = "0.0.0.0";
if( ( isset( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) && ( !empty( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) ) {
$ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
} elseif( ( isset( $_SERVER['HTTP_CLIENT_IP'])) && (!empty($_SERVER['HTTP_CLIENT_IP'] ) ) ) {
$ip = explode(".",$_SERVER['HTTP_CLIENT_IP']);
$ip = $ip[3].".".$ip[2].".".$ip[1].".".$ip[0];
} elseif((!isset( $_SERVER['HTTP_X_FORWARDED_FOR'])) || (empty($_SERVER['HTTP_X_FORWARDED_FOR']))) {
if ((!isset( $_SERVER['HTTP_CLIENT_IP'])) && (empty($_SERVER['HTTP_CLIENT_IP']))) {
$ip = $_SERVER['REMOTE_ADDR'];
}
}
return $ip;
}
// Получаем последние записи в гостевой книге
function getLastRecords($iLimit = 3) {
$sRecords = '';
$aRecords = $GLOBALS['MySQL']->getAll("SELECT * FROM `s178_guestbook` ORDER BY `id` DESC LIMIT {$iLimit}");
foreach ($aRecords as $i => $aInfo) {
$sWhen = date('F j, Y H:i', $aInfo['when']);
$sRecords .= <<<EOF
<div class="record" id="{$aInfo['id']}">
<p>Автор {$aInfo['name']} <span>({$sWhen})</span>:</p>
<p>{$aInfo['description']}</p>
</div>
EOF;
}
return $sRecords;
}
if ($_POST) { // Принимаем новые записи
$sIp = getVisitorIP();
$sName = $GLOBALS['MySQL']->escape(strip_tags($_POST['name']));
$sEmail = $GLOBALS['MySQL']->escape(strip_tags($_POST['name']));
$sDesc = $GLOBALS['MySQL']->escape(strip_tags($_POST['text']));
if ($sName && $sEmail && $sDesc && $sIp) {
// Защита от спами
$iOldId = $GLOBALS['MySQL']->getOne("SELECT `id` FROM `s178_guestbook` WHERE `ip` = '{$sIp}' AND `when` >= UNIX_TIMESTAMP() - 600 LIMIT 1");
if (! $iOldId) {
// Можно добавлять комментарий
$GLOBALS['MySQL']->res("INSERT INTO `s178_guestbook` SET `name` = '{$sName}', `email` = '{$sEmail}', `description` = '{$sDesc}', `when` = UNIX_TIMESTAMP(), `ip` = '{$sIp}'");
// Выводим последние 10 записей
$sOut = getLastRecords();
echo $sOut;
exit;
}
}
echo 1;
exit;
}
// Выводим последние 10 записей
$sRecords = getLastRecords();
ob_start();
?>
<div class="container" id="records">
<div id="col1">
<h2>Гостевая книга</h2>
<div id="records_list"><?= $sRecords ?></div>
</div>
<div id="col2">
<h2>Добавьте ваш отзыв здесь</h2>
<script type="text/javascript">
function submitComment(e) {
var name = $('#name').val();
var email = $('#email').val();
var text = $('#text').val();
if (name && email && text) {
$.post('guestbook.php', { 'name': name, 'email': email, 'text': text },
function(data){
if (data != '1') {
$('#records_list').fadeOut(1000, function () {
$(this).html(data);
$(this).fadeIn(1000);
});
} else {
$('#warning2').fadeIn(2000, function () {
$(this).fadeOut(2000);
});
}
}
);
} else {
$('#warning1').fadeIn(2000, function () {
$(this).fadeOut(2000);
});
}
};
</script>
<form onsubmit="submitComment(this); return false;">
<table>
<tr><td class="label"><label>Ваше имя: </label></td><td class="field"><input type="text" value="" title="Введите ваше имя" id="name" /></td></tr>
<tr><td class="label"><label>Ваш email: </label></td><td class="field"><input type="text" value="" title="Введите ваш адрес email" id="email" /></td></tr>
<tr><td class="label"><label>Отзыв: </label></td><td class="field"><textarea name="text" id="text" maxlength="255"></textarea></td></tr>
<tr><td class="label"> </td><td class="field">
<div id="warning1" style="display:none">Заполните все обязательные поля</div>
<div id="warning2" style="display:none">Вы не можете размещать более одного отзыва в течении 10 минут (защита от спама)</div>
<input type="submit" value="Отправить" />
</td></tr>
</table>
</form>
</div>
</div>
<?
$sGuestbookBlock = ob_get_clean();
?>
<!DOCTYPE html>
<html lang="ru" >
<head>
<meta charset="utf-8" />
<title>Гостевая книга на PHP | Материалы сайта RUSELLER.COM</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<?= $sGuestbookBlock ?>
<footer>
<h2>Гостевая книга на PHP</h2>
<a href="http://www.ruseller.com" class="stuts" target="_blank">Материалы сайта <span>RUSELLER.COM</span></a>
</footer>
</body>
</html>
При открытии страницы вы увидите записную книжку. На левой стороне выводится последние три записи, а справа - форма для размещения нового отзыва. Когда отправляется форма, скрипт посылает данные POST (той же PHP странице), затем сохраняет полученные данные в базе и возвращает три последние записи. С использованием эффекта проявления записи выводятся на левой стороне книги.
Также используется файл PHP
classes/CMySQL.php
Данный файл содержит код класса для работы с базой данных. В нем требуется настроить три переменных для подключения к серверу.
$this->sDbName = 'ИМЯ_БАЗЫ_ДАННЫХ';
$this->sDbUser = 'ИМЯ ПОЛЬЗОВАТЕЛЯ';
$this->sDbPass = 'ПАРОЛЬ';
Шаг 3. CSS
И теперь сформируем внешний вид гостевой книги:
css/main.css
*{
margin:0;
padding:0;
}
body {
background-color:#fff;
color:#fff;
font:14px/1.3 Arial,sans-serif;
}
footer {
background-color:#212121;
bottom:0;
box-shadow: 0 -1px 2px #111111;
display:block;
height:70px;
left:0;
position:fixed;
width:100%;
z-index:100;
}
footer h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
footer a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
footer .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {
background: transparent url(../images/book_open.jpg) no-repeat top center ;
color: #000000;
height: 600px;
margin: 20px auto;
overflow: hidden;
padding: 35px 100px;
position: relative;
width: 600px;
}
#col1, #col2 {
float: left;
margin: 0 10px;
overflow: hidden;
text-align: center;
width: 280px;
}
#col1 {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
}
#records form {
margin:10px 0;
padding:10px;
text-align:left;
}
#records table td.label {
color: #000;
font-size: 13px;
padding-right: 3px;
text-align: right;
}
#records table label {
font-size: 12px;
vertical-align: middle;
}
#records table td.field input, #records table td.field textarea {
background-color: rgba(255, 255, 255, 0.4);
border: 0px solid #96A6C5;
font-family: Verdana,Arial,sans-serif;
font-size: 13px;
margin-top: 2px;
padding: 6px;
width: 190px;
}
#records table td.field input[type=submit] {
background-color: rgba(200, 200, 200, 0.4);
cursor: pointer;
float:right;
width: 100px;
}
#records table td.field input[type=submit]:hover {
background-color: rgba(200, 200, 200, 0.8);
}
#records_list {
text-align:left;
}
#records_list .record {
border-top: 1px solid #000000;
font-size: 13px;
padding: 10px;
}
#records_list .record:first-child {
border-top-width:0px;
}
#records_list .record p:first-child {
font-weight:bold;
font-size:11px;
}