В этом уроке я покажу вам, как создать простую систему входа в систему, состоящую из страницы входа, страницы регистрации, страницы забытого пароля, активации электронной почты, страницы выхода из системы и, наконец, онлайн-страницы пользователя. Я сделал этот урок в основном для начинающих разработчиков PHP, потому что когда я начинал, я заметил, что не хватает количества базовых систем входа в систему. Поэтому я решил сам сделать качественный совет о том, как сделать вашу первую систему входа в систему с помощью онлайн-скрипта для пользователей!
1. Создание базовой таблицы стилей
Мы собираемся создать очень простую таблицу стилей CSS, чтобы добавить немного дизайна и привести в порядок внешний вид этой системы входа. Итак, начните с открытия вашего текстового редактора, и мы можем приступить к созданию таблицы стилей.
|
1
2
|
body { font-family: arial;
padding: 15px;
|
Сохраните этот файл как style.css, чтобы мы могли ссылаться на него всякий раз, когда нам нужно. Там у нас есть наша простая таблица стилей! Теперь мы можем начать делать наши страницы, не беспокоясь о том, чтобы они выглядели достаточно хорошо.
2. Создание страницы входа
Итак, у нас есть определенная таблица стилей, теперь пришло время показать вещи на наших страницах. Откройте новый файл в вашем текстовом редакторе, это будет наша страница login.php !
|
1
2
3
4
5
|
<link rel=»stylesheet» type=»text/css» href=»tut_files/style.css»>
<form action=»login.php» method=»post»> <div id=»border»> <table border=»0″ cellpadding=»2″ cellspacing=»0″> <tbody><tr> <td>Username:</td> <td><input name=»username» type=»text»></td> </tr>
<tr> <td>Password:</td> <td><input name=»password» type=»password»></td> </tr> <tr> <td colspan=»2″ align=»center»><input name=»submit» value=»Login» type=»submit»></td> </tr> <tr> <td
colspan=»2″ align=»center»><a href=»register.php»>Register</a> |
|
Хорошо, вот как будет выглядеть наш файл login.php до того, как мы получим PHP, который корректно выполняет функцию формы входа. На данный момент вы заметите, что это не работает. Это потому, что мы не сказали странице, что делать, если форма отправлена.
планирование
Теперь давайте сделаем некоторое планирование, прежде чем погрузиться в PHP. Мы должны спросить себя: «Что будет проверять страница при отправке формы?». Для страницы входа в систему есть список того, что мы будем проверять —
- Что оба поля имени пользователя и пароля были заполнены
- Указанное имя пользователя существует в нашей базе данных.
- Что если имя пользователя существует в нашей базе данных, пароль совпадает с паролем для имени пользователя
- Наконец, пользователь активировал свой аккаунт
Если PHP может ответить «да» на все четыре из этих пунктов, войдите в систему пользователя. Теперь в этих четырех пунктах вы заметите, что упоминалась база данных. Мы собираемся использовать базу данных MySQL для хранения всей информации о каждом из наших пользователей. Поэтому, прежде чем начать работу с PHP, нам нужно создать эту базу данных. На данный момент нужно немного больше планирования. Нам нужно решить, какую информацию нам нужно хранить о пользователях, какие типы данных мы храним, нужно ли нам значение по умолчанию и т. Д. И т. Д. Вот мой план ниже —
- Нам нужно сохранить имя пользователя для пользователя, который будет varchar
- Нам нужен пароль на который тоже будет varchar
- Нам понадобится электронное письмо для нашей функции активации электронной почты, это также может быть varchar
- В поле указывается, была ли учетная запись активирована или нет, это будет целое число
- Поле с информацией о том, находится ли пользователь в сети или нет, это будет целое число
- Наконец, поле, дающее нам время, когда пользователь зарегистрировался, это также целое число
Построение базы данных
Теперь из этого мы можем видеть, как именно построить нашу таблицу в нашей базе данных. Сначала создайте базу данных с именем loginTut . Затем в этой базе данных мы хотим запустить SQL, который я предоставил ниже —
Примечание. Все таблицы содержат первичный ключ. Это уникальный идентификатор для каждой строки в таблице!
|
1
2
3
|
CREATE TABLE IF NOT EXISTS `users` ( `id` int(11) NOT NULL auto_increment, `username` varchar(32) NOT NULL, `password` varchar(32) NOT NULL,
`online` int(20) NOT NULL default ‘0’, `email` varchar(100) NOT NULL, `active` int(1) NOT NULL default ‘0’, `rtime` int(20) NOT NULL default ‘0’, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT
CHARSET=utf8;
|
Теперь у нас есть таблица для хранения всей необходимой нам информации о наших пользователях, давайте добавим пользователя для тестирования. Для этого запустите приведенный ниже SQL —
|
1
2
|
INSERT INTO `users` (`id`, `username`, `password`, `online`, `email`, `active`, `rtime`) VALUES (1, ‘testing’, ‘testing’, 0,
‘[email protected]’, 0, 0);
|
Итак, теперь у нас есть один пользователь с проверкой имени пользователя, проверкой пароля и электронной почтой [email protected] . Теперь мы можем добраться до PHP и разобрать форму входа!
Добавление PHP
Перво-наперво нам нужно подумать о безопасности и о том, насколько безопасной будет эта форма входа. Чтобы предотвратить SQL-инъекцию, которая является очень распространенной формой взлома базы данных, мы собираемся создать функцию, которая будет защищать все строки, хранящиеся в базе данных. Это мы поместим во внешний файл с именем functions.php . Вот источник —
|
1
2
3
4
5
|
<?php
function protect($string){ $string = trim(strip_tags(addslashes($string)));
?>
|
Эта функция обрезает нашу строку (удаляет все пробелы в начале или конце строки), удаляет теги (удаляет все html и PHP-теги в строке), а затем добавляет косую черту к строке, избегая речевых меток (‘) и кавычки («).
Вернуться к login.php
Теперь у нас есть место для хранения и проверки информации о пользователях, функция для защиты строк, передаваемых в базу данных, и приятный внешний вид для нашей страницы входа! Ниже вы можете увидеть закомментированный код для нашего файла login.php с недавно добавленным PHP-
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<link rel=»stylesheet» type=»text/css» href=»tut_files/style.css»>
You need to fill in a <strong>Username</strong> and a <strong>Password</strong>!»; }else{ //if the were continue checking
//select all rows from the table where the username matches the one entered by the user $res = mysql_query(«SELECT * FROM `users` WHERE `username` = ‘».$username.»‘»);
mysql_num_rows($res);
//check if there was not a match if($num == 0){ //if not display an error message echo «<center>The <strong>Username</strong> you supplied does not exist!</center>»;
continue checking
//select all rows where the username and password match the ones submitted by the user $res = mysql_query(«SELECT * FROM `users` WHERE `username` = ‘».$username.»‘ AND `password` =
‘».$password.»‘»); $num = mysql_num_rows($res);
//check if there was not a match if($num == 0){ //if not display error message echo «<center>The <strong>Password</strong> you supplied does not match the one for that username!</center>»;
there was continue checking
//split all fields fom the correct row into an associative array $row = mysql_fetch_assoc($res);
//check to see if the user has not activated their account yet if($row[‘active’] != 1){ //if not display error message echo «<center>You have not yet <strong>Activated</strong> your account!</center>»;
}else{ //if they have log them in
//set the login session storing there id — we use this to see if they are logged in or not $_SESSION[‘uid’] = $row[‘id’];
in!</center>»;
//update the online field to 50 seconds into the future $time = date(‘U’)+50;
//redirect them to the usersonline page header(‘Location: usersOnline.php’);
?> <form action=»login.php» method=»post»> <div id=»border»> <table border=»0″ cellpadding=»2″ cellspacing=»0″> <tbody><tr> <td>Username:</td> <td><input name=»username» type=»text»></td>
</tr> <tr> <td>Password:</td> <td><input name=»password» type=»password»></td> </tr> <tr> <td colspan=»2″ align=»center»><input name=»submit» value=»Login» type=»submit»></td> </tr> <tr> <td
colspan=»2″ align=»center»><a href=»register.php»>Register</a> |
|
Большая часть этого объясняется комментариями, но одна часть, которую я не объяснил, это онлайн-поле. Когда вы успешно войдете в систему, мы обновили поле онлайн на 50 секунд раньше. Функция date (‘U’) дает нам количество секунд с 1 января 1970 года 00:00:00 по Гринвичу (эпоха Unix). Это означает, что дата (‘U’) никогда не станет меньше, значение всегда будет увеличиваться. Если мы установим онлайн-поле на 50 секунд раньше, то при загрузке страницы « Пользователи онлайн» мы можем проверить, чтобы найти всех пользователей, у которых значение онлайн больше времени загрузки страницы, если это так, тогда отобразится каждое из их имен.
Теперь не стесняйтесь проверить свою страницу входа. Убедитесь, что все проверки выполнены правильно и что после успешного входа в систему вы будете перенаправлены на страницу с несуществующими пользователями. Вы также можете проверить, успешно ли обновлено онлайн-поле, проверив таблицу пользователей!
3. Создание страницы регистрации
Что хорошего в странице входа без страницы регистрации? Совсем немного, поэтому я думаю, что это будет следующим шагом для нас. Создание страницы регистрации будет очень похоже на создание нашей страницы входа. Нам нужно провести некоторую базовую проверку, чтобы убедиться, что желаемое имя пользователя уже занято, но ничего нового там не происходит. Ниже вы можете увидеть закомментированный код страницы регистрации —
|
01
02
03
04
05
06
07
08
09
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
|
<link rel=»stylesheet» type=»text/css» href=»tut_files/style.css»>
You need to fill in all of the required filds!»; }else{ //if all were filled in continue checking
//Check if the wanted username is more than 32 or less than 3 charcters long if(strlen($username) > 32 || strlen($username) < 3){ //if it is display error message echo «<center>Your <strong>Username</strong> must be between 3 and 32 characters long!</center>»;
//select all the rows from out users table where the posted username matches the username stored $res = mysql_query(«SELECT * FROM `users` WHERE `username` = ‘».$username.»‘»);
mysql_num_rows($res);
//check if theres a match if($num == 1){ //if yes the username is taken so display error message echo «<center>The <strong>Username</strong> you have chosen is already taken!</center>»;
//otherwise continue checking
//check if the password is less than 5 or more than 32 characters long if(strlen($password) < 5 || strlen($password) > 32){ //if it is display error message echo «<center>Your <strong>Password</strong> must be between 5 and 32 characters long!</center>»;
//check if the password and confirm password match if($password != $passconf){ //if not display error message echo «<center>The <strong>Password</strong> you supplied did not match the confirmation password!</center>»;
//Set the format we want to check out email address against $checkemail = «/^[a-z0-9]+([_\\.-][a-z0-9]+)*@([a-z0-9]+([\.-][a-z0-9]+)*)+\\.[az]{2,}$/i»;
//check if the formats match if(!preg_match($checkemail, $email)){ //if not display error message echo «<center>The <strong>E-mail</strong> is not valid, must be [email protected]!</center>»;
//select all rows from our users table where the emails match $res1 = mysql_query(«SELECT * FROM `users` WHERE `email` = ‘».$email.»‘»);
//if the number of matchs is 1 if($num1 == 1){ //the email address supplied is taken so display error message echo «<center>The <strong>E-mail</strong> address you supplied is already taken</center>»;
}else{ //finally, otherwise register there account
//time of register (unix) $registerTime = date(‘U’);
//make a code for our activation key $code = md5($username).$registerTime;
//insert the row into the database $res2 = mysql_query(«INSERT INTO `users` (`username`, `password`, `email`, `rtime`)
VALUES(‘».$username.»‘,'».$password.»‘,'».$email.»‘,'».$registerTime.»‘)»);
//send the email with an email containing the activation link to the supplied email address mail($email, $INFO[‘chatName’].’ registration confirmation’, «Thank you for registering to us».$username.»,\n\nHere is your activation link. If the link doesn’t work copy and paste it into your browser address bar.\n\nhttp://www.yourwebsitehere.co.uk/activate.php?code=».$code, ‘From:[email protected]’);
//display the success message echo «<center>You have successfully registered, please visit you inbox to activate your account!</center>»;
?> <div id=»border»> <form action=»register.php» method=»post»> <table border=»0″ cellpadding=»2″ cellspacing=»0″> <tbody><tr> <td>Username: </td> <td><input name=»username» type=»text»></td>
</tr> <tr> <td>Password: </td> <td><input name=»password» type=»password»></td> </tr> <tr> <td>Confirm Password: </td> <td><input name=»passconf» type=»password»></td> </tr> <tr> <td>Email:
</td> <td><input name=»email» size=»25″ type=»text»></td> </tr> <tr> <td colspan=»2″ align=»center»><input name=»submit» value=»Register» type=»submit»></td> </tr> <tr> <td colspan=»2″
align=»center»><a href=»login.php»>Login</a> |
|
Новые функции
Этот файл содержит некоторые новые вещи, с которыми вы, возможно, не знакомы, поэтому я рассмотрю все. Во-первых, функция strlen () возвращает количество символов в строке, что позволяет нам проверять длину строк. Затем функция preg_match () проверяет, соответствует ли форматирование строки указанному вами форматированию (в данном случае это формат электронной почты). Наконец, функция mail () отправляет электронную почту с сервера на любую электронную почту по вашему выбору, содержащую все, что вы хотите. Вы должны сохранить этот файл как register.php
Теперь вы можете проверить свою страницу регистрации, вы увидите, что при вводе правильного адреса электронной почты вы получите электронное письмо со ссылкой для активации, содержащейся внутри. Вы также можете видеть, что строка, содержащая данные, заполненные в форме, вводится в таблицу пользователей. Значение active равно 0, показывая, что этот аккаунт еще не активирован!
4. Активируйте страницу своего аккаунта
Это всего лишь небольшая страница с очень небольшим количеством кода, но она все еще очень важна и играет огромную роль в системе безопасного входа в систему. Источник для этой страницы показан ниже — activ.php
|
1
2
3
4
5
6
7
8
9
|
<link rel=»stylesheet» type=»text/css» href=»tut_files/style.css»>
Unfortunatly there was an error there!»; }else{ //other wise continue the check
//select all the rows where the accounts are not active $res = mysql_query(«SELECT * FROM `users` WHERE `active` = ‘0’»);
//loop through this script for each row found not active while($row = mysql_fetch_assoc($res)){ //check if the code from the row in the database matches the one from the user if($code == md5($row[‘username’]).$row[‘rtime’]){ //if it does then activate there account and display success message $res1 = mysql_query(«UPDATE `users` SET `active` = ‘1’ WHERE `id` = ‘».$row[‘id’].»‘»);
?>
|
В этом файле есть две новые вещи: мы используем метод GET вместо POST, а также используем цикл while (). Метод get просто получает данные из адресной строки в верхней части браузера пользователя (в данном случае это код, отправленный с письмом на его адрес электронной почты). Цикл while () идеально подходит для проверки нескольких строк данных, выбранных из базы данных (в этом случае, чтобы увидеть, есть ли совпадение с кодами).
Обзор пока
До сих пор вы должны были узнать много нового, если вы новичок в PHP и успешно создали половину системы входа в систему. Завершенные страницы —
- style.css
- functions.php
- login.php
- register.php
- activate.php
Некоторые полезные функции, используемые до сих пор:
- mysql_connect () — соединяется с базой данных mysql
- mysql_select_db () — Выберите базу данных, с которой мы должны работать
- mysql_query () — отправляет запросы в базу данных для получения, вставки или редактирования данных.
- trim () — вырезать ненужные пробелы в начале и конце строки
- strip_tags () — удаляет HTML и теги PHP из строки
- addlashes () — добавляет косую черту в строку s, позволяя безопасно использовать кавычки и речевые метки
- strlen () — получает количество символов в строке
- preg_match () — Preg match должно соответствовать форматированию строки
- mail () — отправлять почту с сервера на указанный адрес электронной почты
- md5 () — вычисляет хэш строки md5
5. Забыли пароль?
Далее идет страница нашего забытого пароля. Если пользователь забывает свой пароль, мы можем отправить его по электронной почте, теперь мы знаем, что он предоставил реальный адрес электронной почты из-за активации. Так что без дальнейших церемоний вот прокомментированный код для Forgot.php —
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<link rel=»stylesheet» type=»text/css» href=»tut_files/style.css»>
You need to fill in your <strong>E-mail</strong> address!»; }else{ //else continue checking
//set the format to check the email against $checkemail = «/^[a-z0-9]+([_\\.-][a-z0-9]+)*@([a-z0-9]+([\.-][a-z0-9]+)*)+\\.[az]{2,}$/i»;
//check if the email doesnt match the required format if(!preg_match($checkemail, $email)){ //if not then display error message echo «<center><strong>E-mail</strong> is not valid, must be [email protected]!</center>»;
//select all rows from the database where the emails match $res = mysql_query(«SELECT * FROM `users` WHERE `email` = ‘».$email.»‘»);
//check if the number of row matched is equal to 0 if($num == 0){ //if it is display error message echo «<center>The <strong>E-mail</strong> you supplied does not exist in our database!</center>»;
//split the row into an associative array $row = mysql_fetch_assoc($res);
//send email containing their password to their email address mail($email, ‘Forgotten Password’, «Here is your password: «.$row[‘password’].»\n\nPlease try not too lose it again!», ‘From: [email protected]’);
//display success message echo «<center>An email has been sent too your email address containing your password!</center>»;
?> <div id=»border»> <form action=»forgot.php» method=»post»> <table border=»0″ cellpadding=»2″ cellspacing=»0″> <tbody><tr> <td>Email: </td> <td><input name=»email» type=»text»></td> </tr>
<tr> <td colspan=»2″ align=»center»><input name=»submit» value=»Send» type=»submit»></td> </tr> <tr> <td colspan=»2″ align=»center»><a href=»register.php»>Register</a> |
href=»login.php»>Login</a></td> </tr> </tbody></table> </form> </div>
|
Эта страница не содержит ничего нового, поэтому я буду тратить меньше времени на ее просмотр. Одна вещь, которую я хочу упомянуть, это то, что, если вы не заметили, потому что мы включили наш файл css в каждую страницу, макет, который мы используем для каждой страницы, остается очень похожим, сохраняя хороший умный дизайн на всем сайте.
Следующая и последняя страница, которую мы будем делать в этом уроке, будет немного другой. На этой странице есть проверка, вошел ли пользователь в систему или нет, и в этом случае отображает всех пользователей онлайн в данный момент (или, если быть точным, в течение последних 50 секунд).
6. Страница пользователей онлайн
Итак, мы добрались до раздела сайта, который вы должны авторизовать для просмотра. Как я упоминал ранее, этот будет немного отличаться от других из-за того, что нам нужно проверить, вошел ли пользователь в систему или нет. Если они не вошли и пытаются просмотреть страницу, у нас есть несколько вариантов, которые мы можем сделать. Во-первых, мы можем отобразить сообщение об ошибке, в котором говорится что-то вроде «Вы должны войти в систему, чтобы просмотреть эту страницу!», Или мы можем перенаправить их обратно на страницу входа. Для этого урока я думаю, что я собираюсь использовать метод сообщения об ошибке.
Итак, вот источник страницы usersOnline.php —
|
1
2
3
4
5
6
7
8
9
|
<link rel=»stylesheet» type=»text/css» href=»tut_files/style.css»>
You need to be logged in to user this feature!»; }else{ //otherwise continue the page
//this is out update script which should be used in each page to update the users online time $time = date(‘U’)+50;
//loop for each row while($row = mysql_fetch_assoc($res)){ //echo each username found to be online with a dash to split them echo $row[‘username’].» — «;
?> </td> </tr> <tr> <td colspan=»2″ align=»center»><a href=»logout.php»>Logout</a></td> </tr> </tbody></table> </div>
|
Как я уже говорил, вы можете увидеть, что эта страница немного отличается. Мы не только гарантируем, что они вошли в систему, но мы обновляем онлайн-время, сохраняя поле онлайн впереди текущего времени. Каждый раз, когда страница загружается с этим сценарием, она обновляется, чтобы разместить их в сети. Теперь у нас есть еще одна последняя страница, и мы готовы. Как только пользователь вошел в систему, он должен иметь возможность выйти!
Logout.php
Это нужно считать самой простой страницей, которую, я уверен, большинство из вас рады услышать. Теперь вот закомментированный код для файла logout.php —
|
01
02
03
04
05
06
07
08
09
10
11
|
<link rel=»stylesheet» type=»text/css» href=»tut_files/style.css»>
You need to be logged in to log out!»; }else{ //if it does continue checking
//update to set this users online field to the current time mysql_query(«UPDATE `users` SET `online` = ‘».date(‘U’).»‘ WHERE `id` = ‘».$_SESSION[‘uid’].»‘»);
//destroy all sessions canceling the login session session_destroy();
//display success message echo «<center>You have successfully logged out!</center>»;
?>
|
Я думаю, что комментарии в этом файле объясняют это достаточно, и я думаю, что ваши знания PHP теперь должны быть намного выше, и вы должны быть в состоянии понять большую часть этого сейчас.