Все для веб-дизайнера
Создаем панель с регистрацией с помощью PHP
Несомненно пользователи на сайте это важнейшая его часть, в которой нуждается каждый сайт. Но как удержать пользователя на сайте кроме интересной информации и привлекающего дизайна взор. Выход есть, это создание системы регистрации, с помощью которой пользователь сможет получить доступ к эксклюзивному контенту на ресурсе, к которому не могут получить доступ обычные посетители, кроме этого зарегистрированные пользователи получают некоторые привилегии на сайте, это на руку как и разработчику, ведь он получает новых пользователей..
При этом есть возможность вернуть их на сайт, оповестив о новых материалах на сайте, так и пользователю, ведь он получает особые права на сайте, и сможет загружать материалы, и оставлять комментарии, конечно если эти функции по умолчанию, скрыты от обычного посетителя. Раньше на нашем сайте публиковалась статья о том, как создать выпадающую панель для авторизации и регистрации, но это был просто стиль, панель не работа и не могла регистрировать пользователей.
В данном уроке мы рассмотрим как это осуществить с помощью PHP, MySQL и jQuery. Данная панель, на мой взгляд, весьма удобна, ведь она по умолчанию скрыта, и не занимает много места на сайте, а при необходимости пользователь может развернуть ее, моментально зарегистрироваться, получить уникальный пароль который предлагает система, и авторизироваться на сайте.
Шаг 1. XHTML
Для начала нам необходимо прикрутить форму web-creation в нашей странице.
demo.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
</pre> <div id="toppanel"> <div id="panel"> <div class="content clearfix"> <div class="left"> <h1>WWW.RUDEBOX.ORG.UA</h1> <h2>Добро пожаловать на нашем сайте</h2> Информационный блог, в котором публикуются новости веб-дизайна, а так же информация и советы по созданию сайтов, шаблонов,и многое другое интересное с интернет мира. <h2>Сглашение</h2> Материалы взяты только в ознакомительных целях и пренадлежат ихним владельцам <a title="Читать соглашение" href="http://www.rudebox.org.ua/home/soglashenie/"> »</a></div> <!--?php if(!$_SESSION['id']): ?--> <div class="left"> <!-- Форма входа --> <form class="clearfix" action="" method="post"> <h1>Пожалуйста авторизируйтесь!</h1> <!--?php <br ?--> if($_SESSION['msg']['login-err']) { echo ' <div class="err">'.$_SESSION['msg']['login-err'].'</div> '; unset($_SESSION['msg']['login-err']); } ?> <label class="grey" for="username">Имя пользователя:</label> <input id="username" class="field" type="text" name="username" value="" size="23" /> <label class="grey" for="password">Пароль который пришел на почту:</label> <input id="password" class="field" type="password" name="password" size="23" /> <label><input id="rememberMe" type="checkbox" name="rememberMe" value="1" checked="checked" /> Запомнить меня</label> <div class="clear"></div> <input class="bt_login" type="submit" name="submit" value="Войти" /></form></div> <div class="left right"> <!-- Форма регистрации --> <form action="" method="post"> <h1>Еще не зарегистрировалсь? Тогда чего ждете!</h1> <!--?php <br ?--> if($_SESSION['msg']['reg-err']) { echo ' <div class="err">'.$_SESSION['msg']['reg-err'].'</div> '; unset($_SESSION['msg']['reg-err']); } if($_SESSION['msg']['reg-success']) { echo ' <div class="success">'.$_SESSION['msg']['reg-success'].'</div> '; unset($_SESSION['msg']['reg-success']); } ?> <label class="grey" for="username">Имя пользователя:</label> <input id="username" class="field" type="text" name="username" value="" size="23" /> <label class="grey" for="email">Email:</label> <input id="email" class="field" type="text" name="email" size="23" /> <label>Пароль будет отправлен Вам по почте.</label> <input class="bt_register" type="submit" name="submit" value="Зарегистрироваться" /></form></div> <!--?php else: ?--> <div class="left"> <h1>Для зарегистированных пользователей</h1> Демонстрационные данные <a href="registered.php">Перейти на страницу пользователя</a> - или - <a href="?logoff">Выйти из системы</a></div> <div class="left right"></div> <!--?php endif; ?--></div> </div> <!-- Закладка наверху --> <div class="tab"> <ul class="login"> <li class="left"></li> <li>Здравствуй, <!--?php echo $_SESSION['usr'] ? $_SESSION['usr'] : 'Гость';?-->!</li> <li class="sep">|</li> <li id="toggle"><a id="close" class="close" style="display: none;" href="#">Закрыть панель</a></li> <li class="right"></li> </ul> </div> |
В нескольких местах в коде встречаются операторы PHP, которые проверяют определены ли $_SESSION[‘usr’] или $_SESSION[‘id’]. Они имеют значения true только в случае если посетитель страницы зарегистрированный пользователь, что позволяет нам показывать скрытый контент для зарегистрированных посетителей.
После формы мы размещаем остальное содержимое страницы.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
</pre> <div class="pageContent"> <div id="main"> <div class="container"> <h1>Создаем пенель регистрации/авторизации</h1> <h2>Простое управление регистрацией с использованием PHP и jQuery</h2> </div> <div class="container">В данной демонстрации мы рассмотрим как создать панель регистрации/авторизации. . .После регистрации, на указанную Вами почту будет выслано письмо с паролем. <a href="registered.php">Демонстрационная страница</a>, доступная только для <strong>зарегистрированных пользователей</strong>. <div class="clear"></div> </div> </div> |
Шаг 2. MySQL
Теперь нам необходимо создать таблицу которая будет содержать все данные о зарегистрированных пользователях. Код запроса доступен в файле table.sql в архиве с исходниками.
table.sql
|
1 2 3 4 5 6 7 8 9 10 |
CREATE TABLE `tz_members` ( `id` int(11) NOT NULL auto_increment, `usr` varchar(32) collate utf8_unicode_ci NOT NULL default '', `pass` varchar(32) collate utf8_unicode_ci NOT NULL default '', `email` varchar(255) collate utf8_unicode_ci NOT NULL default '', `regIP` varchar(15) collate utf8_unicode_ci NOT NULL default '', `dt` datetime NOT NULL default '0000-00-00 00:00:00', PRIMARY KEY (`id`), UNIQUE KEY `usr` (`usr`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; |
Здесь мы определяем id как integer с опцией auto_increment – он будет автоматически назначаться для каждого нового зарегистрированного пользователя. Также usr определяется как unique key – в таблице не допускается существование двух записей с одинаковым именем пользователя.
Примечание! После создания таблицы нужно заполнить переменные для соединения с вашей базой данных в файле connect.php, чтобы можно было запустить код на вашем сервере.
Шаг 3. PHP
Теперь будем конвертировать форму в завершенную системы регистрации и входа. Для того, чтобы решить поставленную задачу нам понадобиться маленькая хитрость, кроме обычного кода PHP. Для удобности код был разделен на две части.
demo.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!--?php <br ?--> define('INCLUDE_CHECK',true); require 'connect.php'; require 'functions.php'; // Данные два файла нужно включать только в случае определения INCLUDE_CHECK session_name('tzLogin'); // Запуск сессии session_set_cookie_params(2*7*24*60*60); // Устанавливаем время жизни куки 2 недели session_start(); if($_SESSION['id'] && !isset($_COOKIE['tzRemember']) && !$_SESSION['rememberMe']) { // Если вы вошли в систему, но куки tzRemember (рестарт браузера) отсутствует // и вы не отметили чекбокс 'Запомнить меня': $_SESSION = array(); session_destroy(); // Удалаяем сессию } if(isset($_GET['logoff'])) { $_SESSION = array(); session_destroy(); header("Location: demo.php"); exit; } if($_POST['submit']=='Войти') { // Проверяем, что представлена форма Войти $err = array(); // Запоминаем ошибки if(!$_POST['username'] || !$_POST['password']) $err[] = 'Все поля должны быть заполнены!'; if(!count($err)) { $_POST['username'] = mysql_real_escape_string($_POST['username']); $_POST['password'] = mysql_real_escape_string($_POST['password']); $_POST['rememberMe'] = (int)$_POST['rememberMe']; // Получаем все ввденые данные $row = mysql_fetch_assoc(mysql_query("SELECT id,usr FROM tz_members WHERE usr='{$_POST['username']}' AND pass='".md5($_POST['password'])."'")); if($row['usr']) { // Если все в порядке - входим в систему $_SESSION['usr']=$row['usr']; $_SESSION['id'] = $row['id']; $_SESSION['rememberMe'] = $_POST['rememberMe']; // Сохраняем некоторые данные сессии setcookie('tzRemember',$_POST['rememberMe']); } else $err[]='Ошибочный пароль или/и имя пользователя!'; } if($err) $_SESSION['msg']['login-err'] = implode(' ',$err); // Сохраняем сообщение об ошибке сессии header("Location: demo.php"); exit; } |
Куки tzRemember выступают как контрольный элемент для определения, что надо обеспечить выход из системы пользователю, который не отметил чекбокс “Запомнить меня”. Если куки отсутствует (по причине рестарта браузера) и посетитель не отметил опцию «запомнить меня» мы удаляем сессию. Сессия сама по себе будет оставаться активной в течении двух недель (так установлено в параметре session_set_cookie_params).
demo.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
else if($_POST['submit']=='Зарегистрироваться') { // Проверяем, что представлена форма Зарегистрироваться $err = array(); if(strlen($_POST['username'])32) { $err[]='Имя пользователя должно содержать от 3 до 32 символов!'; } if(preg_match('/[^a-z0-9\-\_\.]+/i',$_POST['username'])) { $err[]='Ваше имя пользователя сожержит недопустимые символы!'; } if(!checkEmail($_POST['email'])) { $err[]='Email не правильный!'; } if(!count($err)) { // Если нет ошибок $pass = substr(md5($_SERVER['REMOTE_ADDR'].microtime().rand(1,100000)),0,6); // Генерируем случайный пароль $_POST['email'] = mysql_real_escape_string($_POST['email']); $_POST['username'] = mysql_real_escape_string($_POST['username']); // Получаем введеные данные mysql_query(" INSERT INTO tz_members(usr,pass,email,regIP,dt) VALUES( '".$_POST['username']."', '".md5($pass)."', '".$_POST['email']."', '".$_SERVER['REMOTE_ADDR']."', NOW() )"); if(mysql_affected_rows($link)==1) { send_mail( 'admin@rudebox.org.ua', $_POST['email'], 'Регистрация в системе демонстрации rudebox demo', 'Ваш пароль: '.$pass); $_SESSION['msg']['reg-success']='Мы отправили вам письмо с вашим новым паролем!'; } else $err[]='Данное имя пользователя уже занято!'; } if(count($err)) { $_SESSION['msg']['reg-err'] = implode(' ',$err); } header("Location: demo.php"); exit; } $script = ''; if($_SESSION['msg']) { // Скрипт ниже показывает выскальзывающую панель $script = ' <script type="text/javascript">// <![CDATA[ $(function(){ $("div#panel").show(); $("#toggle a").toggle(); }); // ]]></script>'; |
Сохраняем все определенные ошибки в массиве $err, который позже присваивается переменной $_SESSION. Таким образом сохраняется доступ к нему после перенаправления браузера.
Но так как мы используем $_SESSION для хранения всех обнаруженных ошибок, то очень важно, чтобы мы сбрасывали все переменные, как только ошибка будет показана пользователю. В противном случае она будет отображена на каждом виде страницы.
Шаг 4. CSS
Все стили для панели можно потрогать в исходниках, мы рассмотрим некоторые простые стили для страницы и информацией:
demo.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{ /* Сброс правил */ margin:0px; padding:0px; } body{ text-align: justify; color:#555555; font-size:13px; background: #eeeeee; font-family:Arial, Helvetica, sans-serif; width: 100%; background: #000000 url(login_panel/css/header.jpg) no-repeat center top; } } h1{ font-size:28px; font-weight:bold; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; letter-spacing:1px; } h2{ font-family:"Arial Narrow",Arial,Helvetica,sans-serif; font-size:10px; font-weight:normal; letter-spacing:1px; padding-left:2px; text-transform:uppercase; white-space:wrap; margin-top:4px; color:#888888; } #main p{ padding-bottom:8px; } .clear{ clear:both; } #main{ width:800px; /* Центрируем по середине страницы */ margin:60px auto; } .container{ margin-top:20px; background:#FFFFFF; border:1px solid #E0E0E0; padding:15px; /* Скругленные углы */ -moz-border-radius:20px; -khtml-border-radius: 20px; -webkit-border-radius: 20px; border-radius:20px; } .err{ color:red; } .success{ color:#00CC00; } a, a:visited { color:#00BBFF; text-decoration:none; outline:none; } a:hover{ text-decoration:underline; } .tutorial-info{ text-align:center; padding:10px; } |
Шаг 5. jQuery
Плавную анимацию для панели, и прочие примочки мы заставим работать с помощью jQuery. Также мы добавим кроссбраузерность для старых браузеров, чтобы панель стала полноценным элементом на сайте, данные скрипты необходимо подключить к странице.
demo.php
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <!-- Фиксируем PNG для IE6 --> <!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 --> <!--[IE 6]> <script type="text/javascript" src="login_panel/js/pngfix/supersleight-min.js"></script> <![endif]--> <script type="text/javascript" src="login_panel/js/slide.js"></script> <!--?php echo $script; ?--> |
Переменная $script показывает панель на странице загрузки при необходимости. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Интересно:
| Опубликовал admin 26.05.2012 в 13:46, в категории PHP. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...