Закрыть ... [X]

Как сделать login на php

Закрыть ... [X]

Безопасная система авторизации и регистрации является одним из важнейших элементов при создании проекта с нуля. Один из возможных способов — это создание системы регистрации с помощью PHP и MySQL.

Хотя в Интернете есть много пособий на эту тему, большинство из них предназначено для продвинутых пользователей.

Эта статья расскажет о том, как создать простую версию системы авторизации и регистрации пользователей с использованием PHP и MySQL для начинающих. Давайте начнем!

Xampp (PHP версии 5.3 или более поздней и MySQL версии 4.1.3 или более поздней); Базовые знания по PHP, HTML и CSS; Время и терпение. Что мы создаем

Скачать ZIP-архив

Настройка сервера

Вы можете использовать любой хостинг с поддержкой PHP и MySQL (только убедитесь, что он поддерживает PHP версии 5.3 или более поздней и MySQL версии 4.1.3 или более поздней).

Но в этой статье в качестве сервера будет использоваться Xampp. Если до этого не работали с Xampp, эта статья может помочь вам разобраться, как его должным образом установить на вашем компьютере.

Шаг 1 – MySQL

Во-первых, создайте базу данных и таблицу, которая будет содержать все регистрационные данные. Вы можете сделать это вручную с помощью графического интерфейса пользователя PhpMyAdmin или использовать для вставки этой информации SQL.

Взгляните на приведенный ниже код SQL:

/ Создание базы данных / CREATE DATABASE userlistdb; / Создание таблицы / CREATE TABLE `usertbl` ( `id` int(11) NOT NULL auto_increment, `full_name` varchar(32) collate utf8_unicode_ci NOT NULL default '', `email` varchar(32) collate utf8_unicode_ci NOT NULL default '', `username` varchar(20) collate utf8_unicode_ci NOT NULL default '', `password` varchar(32) collate utf8_unicode_ci NOT NULL default '', PRIMARY KEY (`id`), UNIQUE KEY `username` (`username`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Обратите внимание, что все данные представляют собой varchar, и даже пароль позже будет преобразован в символ md5, чтобы обеспечить его безопасность.

Кроме того, используйте auto_increment для автоматического назначения идентификаторов или номеров пользователям, которые будут регистрироваться в системе.

Теперь, когда таблица создана, нужно задать разметку и стили CSS, а затем PHP-код.

Шаг 2 — Разметка

Для разметки, нам нужно включить три файла, и все они должны быть сохранены в формате «.php«, так как мы создаем программу сценариев на стороне сервера.

Сначала создайте файл login.php. Скопируйте в него приведенный ниже код:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> Как с помощью PHP и MySQL создать систему регистрации и авторизации пользователей</title> <link href="css/style.css" media="screen" rel="stylesheet"> <link href= 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> </head> <body> <div class="container mlogin"> <div id="login"> <h1>Вход</h1> <form action="" id="loginform" method="post"name="loginform"> <p><label for="user_login">Имя опльзователя<br> <input class="input" id="username" name="username"size="20" type="text" value=""></label></p> <p><label for="user_pass">Пароль<br> <input class="input" id="password" name="password"size="20" type="password" value=""></label></p> <p class="submit"><input class="button" name="login"type= "submit" value="Log In"></p> <p class="regtext">Еще не зарегистрированы?<a href= "register.php">Регистрация</a>!</p> </form> </div> </div> <footer> © 2014 <ahref="http://www.1stwebdesigner.com/">1stwebdesigner</a>. Все права защищены. </footer> </body> </html>

С помощью этого кода вы получите результат, который показан на рисунке ниже:

Далее, создаем файл register.php. Скопируйте и вставьте в него приведенный ниже код:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> Как с помощью PHP и MySQL создать систему регистрации и авторизации пользователей</title> <link href="css/style.css" media="screen" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'rel='stylesheet' type='text/css'> </head> <body> <div class="container mregister"> <div id="login"> <h1>Регистрация</h1> <form action="register.php" id="registerform" method="post"name="registerform"> <p><label for="user_login">Полное имя<br> <input class="input" id="full_name" name="full_name"size="32" type="text" value=""></label></p> <p><label for="user_pass">E-mail<br> <input class="input" id="email" name="email" size="32"type="email" value=""></label></p> <p><label for="user_pass">Имя пользователя<br> <input class="input" id="username" name="username"size="20" type="text" value=""></label></p> <p><label for="user_pass">Пароль<br> <input class="input" id="password" name="password"size="32" type="password" value=""></label></p> <p class="submit"><input class="button" id="register" name= "register" type="submit" value="Зарегистрироваться"></p> <p class="regtext">Уже зарегистрированы? <a href= "login.php">Введите имя пользователя</a>!</p> </form> </div> </div> <footer> © 2014 <ahref="http://www.1stwebdesigner.com/">1stwebdesigner</a>. Все права защищены. </footer> </body> </html>

С помощью этого кода вы получите следующий результат:

Далее, создаем файл intropage.php. Он будет служить в качестве страницы приветствия после того, как пользователь успешно авторизовался в системе:

<div id="welcome"> <h2>Добро пожаловать, <span> USER </span></h2>! <p><a href="logout.php">Выйти</a> из системы</p> </div>

Этот код даст нам следующий результат:

Шаг 3 — CSS

Теперь, когда разметка готова, нужно добавить CSS-код. В основном, он будет содержать стили для класса страниц container, а также для кнопок и некоторых других элементов, таких как текстовые поля и лайки:

/= ОБЩИЕ СТИЛИ --------------------------------------------------------/ body { background: #efefef; font-family: 'Open Sans', sans-serif; color: #777; } a { color: #f58220; font-weight: 400; } span { font-weight: 300; color: #f58220; } .mlogin { margin: 170px auto 0; } .mregister { margin: 80px auto 0; } .error { margin: 40px auto 0; border: 1px solid #777; padding: 3px; color: #fff; text-align: center; width: 650px; background: #f58220; } .regtext { font-size: 13px; margin-top: 26px; color: #777; } /= КОНТЕЙНЕРЫ --------------------------------------------------------/ .container { padding: 25px 16px 25px 10px; font-weight: 400; overflow: hidden; width: 350px; height: auto; background: #fff; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.13); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.13); box-shadow: 0 1px 3px rgba(0,0,0,.13); } #welcome { width: 500px; padding: 30px; background: #fff; margin: 160px auto 0; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.13); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.13); box-shadow: 0 1px 3px rgba(0,0,0,.13); } .container h1 { color: #777; text-align: center; font-weight: 300; border: 1px dashed #777; margin-top: 13px; } .container label { color: #777; font-size: 14px; } #login { width: 320px; margin: auto; padding-bottom: 15px; } .container form .input,.container input[type=text],.container input[type=password],.container input[type=e] { background: #fbfbfb; font-size: 24px; line-height: 1; width: 100%; padding: 3px; margin: 0 6px 5px 0; outline: none; border: 1px solid #d9d9d9; } .container form .input:focus { border: 1px solid #f58220; -webkit-box-shadow: 0 0 3px 0 rgba(245,130,32,0.75); -moz-box-shadow: 0 0 3px 0 rgba(245,130,32,0.75); box-shadow: 0 0 3px 0 rgba(245,130,32,0.75); } /= КНОПКИ --------------------------------------------------------/ .button{ border: solid 1px #da7c0c; background: #f78d1d; background: -webkit-gradient(linear, left top, leftbottom, from(#faa51a), to(#f47a20)); background: -moz-linear-gradient(top, #faa51a, #f47a20); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); color: #fff; padding: 7px 12px; -webkit-border-radius:4px; moz-border-radius:4px; border-radius:4px; float: right; cursor: pointer; } .button:hover{ background: #f47c20; background: -webkit-gradient(linear, left top, leftbottom, from(#f88e11), to(#f06015)); background: -moz-linear-gradient(top, #f88e11, #f06015); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); } /= ПОДВАЛ --------------------------------------------------------/ footer { color: #777; font-size: 12px; text-align: center; margin-top: 20px; }

К этому времени, вы уже должны получить тот же результат, что и на изображении, приведенном в начале статьи.

Шаг 4 — Многоразово используемые элементы

Теперь, когда у вас готовы разметка и стили CSS, попробуйте задействовать такие многоразово используемые элементы, как раздел заголовка и раздел подвала. В корневой папке создайте новую папку и назовите ее “includes“.

В ней будут содержаться все включаемые файлы. Затем в папке includes создайте новый файл и назовите его header.php. Скопируйте часть раздела заголовка в каждый из трех PHP-файлов, созданных нами ранее. Таким образом, у вас получится:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> Как с помощью PHP и MySQL создать систему регистрации и авторизации пользователей </title> <link href="css/style.css" media="screen" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'rel='stylesheet' type='text/css'> </head> <body>

Следующее, что вам нужно сделать, это удалить разметку, скопированную из файла header.php во всех трех PHP-файлах и заменить ее следующим PHP-кодом:

<?php include("includes/header.php"); ?>

Теперь, сделайте то же самое с подвалом. Скопируйте приведенный ниже код и вставьте его в новый файл footer.php. Он будет включать в себя раздел подвала:

<footer>© 2014 <ahref="http://www.1stwebdesigner.com/">1stwebdesigner</a>. Все права защищены.</footer> </body> </html>

Затем снова удалите эту часть во всех трех файлах PHP и замените ее следующим кодом:

<?php include("includes/footer.php"); ?>

<h3>Шаг — 5 Подключение к базе данных</h3>

Теперь, когда вы включили файлы разделов заголовка и подвала, пора создать новый включаемый файл. Назовите его constants.php и скопируйте в него следующий код:

<?php // Константы базы данных define("DB_SERVER", "localhost"); define("DB_USER", "root"); define("DB_PASS", ""); define("DB_NAME", "userlistdb"); ?>

В приведенном выше коде, мы создали константы информации базы данных. Теперь мы можем легко изменять информацию всякий раз, когда это необходимо.

Далее, в папке includes создайте новый файл и назовите ее connection.php. В нем будут храниться коды подключения к базе данных. Скопируйте и вставьте в него код, приведенный ниже:

<?php require("constants.php"); $con = mysql_connect(DB_SERVER,DB_USER, DB_PASS) or die(mysql_error()); mysql_select_db(DB_NAME) or die("Cannot select DB"); ?>

Обратите внимание, что вам обязательно требуется файл constants.php. Если при подключении возникнет ошибка, с его помощью будет остановлено выполнение скрипта и выдано сообщение об ошибке.

Включите файл connection.php в файлах login.php и register.php, так как эти два файла необходимы для кода управления подключением. Скопируйте приведенный ниже код и вставьте его перед включением файла header.php:

<?php require_once("includes/connection.php"); ?> Шаг — 6 Конфигурация файла register.php

Теперь необходимо преобразовать форму регистрации в полноценную систему регистрации. Чтобы сделать это, нужно добавить включение еще нескольких файлов PHP после включения header.php. Скопируйте и вставьте приведенный ниже код в файл register.php:

<?php if(isset($_POST["register"])){ if(!empty($_POST['full_name']) && !empty($_POST['email']) && !empty($_POST['username']) && !empty($_POST['password'])) { $full_name= htmlspecialchars($_POST['full_name']); $email=htmlspecialchars($_POST['email']); $username=htmlspecialchars($_POST['username']); $password=htmlspecialchars($_POST['password']); $query=mysql_query("SELECT FROM usertbl WHEREusername='".$username."'"); $numrows=mysql_num_rows($query); if($numrows==0) { $sql="INSERT INTO usertbl (full_name, email, username,password) VALUES('$full_name','$email', '$username', '$password')"; $result=mysql_query($sql); if($result){ $message = "Account Successfully Created"; } else { $message = "Failed to insert data information!"; } } else { $message = "That username already exists! Please try another one!"; } } else { $message = "All fields are required!"; } } ?> <?php if (!empty($message)) {echo "<p class="error">" . "MESSAGE: ". $message . "</p>";} ?>

В приведенном выше коде, обратите внимание, что перед добавлением данных в базу производится их валидация. Переменная message используется для хранения сообщения об ошибках или об успешном выполнении действия.

Шаг — 6 Конфигурация файла login.php

Теперь, когда пользователи могут регистрироваться на сайте, необходимо создать систему авторизации. С помощью этого очень простого PHP-кода, вы можете включить систему авторизации. Скопируйте код и вставьте его перед разметкой в файл login.php:

<?php session_start(); ?> <?php require_once("includes/connection.php"); ?> <?php include("includes/header.php"); ?> <?php if(isset($_SESSION["session_username"])){ // вывод "Session is set"; // в целях проверки header("Location: intropage.php"); } if(isset($_POST["login"])){ if(!empty($_POST['username']) && !empty($_POST['password'])) { $username=htmlspecialchars($_POST['username']); $password=htmlspecialchars($_POST['password']); $query =mysql_query("SELECT FROM usertbl WHEREusername='".$username."' AND password='".$password."'"); $numrows=mysql_num_rows($query); if($numrows!=0) { while($row=mysql_fetch_assoc($query)) { $dbusername=$row['username']; $dbpassword=$row['password']; } if($username == $dbusername && $password == $dbpassword) { // старое место расположения // session_start(); $_SESSION['session_username']=$username; / Перенаправление браузера / header("Location: intropage.php"); } } else { // $message = "Invalid username or password!"; echo "Invalid username or password!"; } } else { $message = "All fields are required!"; } } ?>

В приведенном выше коде, перед перенаправлением пользователя на страницу intropage.php, которую мы добавим чуть позже, вы в первую очередь должны проверить, была ли установлена сессия.

В противном случае, если сессия не была установлена, пользователю с помощью переменной message будет выдаваться сообщение об ошибке или он будет перенаправляться на страницу login.php.

Шаг — 7 Конфигурация файла intropage.php

Мы установили все, что нужно для файлов register.php и login.php. Теперь вы просто должны обеспечить, чтобы пользователь оставался в системе при перенаправлении на страницу intropage.php. Скопируйте и вставьте приведенный ниже код в файл intropage.php:

<?php session_start(); if(!isset($_SESSION["session_username"])): header("location:login.php"); else: ?> <?php include("includes/header.php"); ?> <div id="welcome"> <h2>Добро пожаловать, <span><?php echo $_SESSION['session_username'];?>! </span></h2> <p><a href="logout.php">Выйти</a> из системы</p> </div> <?php include("includes/footer.php"); ?> <?php endif; ?>

Обратите внимание, что оператор if был создан для проверки, установлена ли сессия, и в зависимости от этого должен ли пользователь перенаправляться на страницу login.php или остаться на странице intropage.php.

Шаг — 8 Конфигурация файла logout.php

Наконец, чтобы пользователь мог выйти из системы, нужно удалить сессию с помощью session_destroy.

Скопируйте данный код в файл logout.php:

<?php session_start(); unset($_SESSION['session_username']); session_destroy(); header("location:login.php"); ?> Заключение

Сегодня мы узнали, как создать простую систему авторизации, используя PHP и MySQL. Конечно, существует много аспектов, которые нужно учитывать, когда речь идет о безопасности, но это уже неплохое начало.

Вы можете изменять приведенные в этой статье коды по своему усмотрению. Если у вас есть идеи по их улучшению, буду рад услышать об этом в комментариях.

Надеюсь, вам понравилась эта статья. Увидимся в следующий раз!

Перевод статьи «How to Create a Login and Registration System Using PHP and MySQL» был подготовлен дружной командой проекта Сайтостроение от А до Я.


Источник: http://www.internet-technologies.ru/articles/sistema-registracii-polzovateley-s-pomoschyu-php-i-mysql.html


Поделись с друзьями



Рекомендуем посмотреть ещё:



Похожие новости


Как из фанеры сделать разделочную доску из
Завитые локоны в домашних условиях
Как сделать пирог с начинкой
Как сделать чтобы ногти были не широкими
Облицовка для топки своими руками
Как сделать тёмно коричневый цвет


Как сделать login на php
Как сделать login на php


Шаг 6 Конфигурация файла login.php
Пишем авторизацию пользователя на PHP Блог веб-разработчиков



ШОКИРУЮЩИЕ НОВОСТИ