Bootstrap Login Form Example using PHP & MySQL

Simple Bootstrap Login Form with Validation Example

Bootstrap Login Form Tutorial: This post explains how to create simple bootstrap login form with validation using PHP & MySQL. Signup and Login pages are two core modules required for any member-ship based websites and with bootstrap you can create responsive login page effortlessly. Here first we’ll design the login form with bootstrap, css & html. Then use php script to complete the background process involved in user login.

Simple Bootstrap Login Form Example:

Here goes our simple bootstrap login system. Since bootstrap is one of the front-end tools, we can design a nice-looking login form with it, but need some sort of server scripting to make the form workable. For this tutorial I’m going to use PHP for server-side script and MySQL for database.

Create Database:

Run these below sql commands in MySQL to create the database required for our bootstrap login demo.

CREATE DATABASE IF NOT EXISTS `bt_demo`; USE `bt_demo`; CREATE TABLE IF NOT EXISTS `users` ( `id` int(9) NOT NULL AUTO_INCREMENT, `name` varchar(30) NOT NULL, `email` varchar(60) NOT NULL, `password` varchar(40) NOT NULL, PRIMARY KEY (`id`), UNIQUE KEY `email` (`email`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ; INSERT INTO `users` (`id`, `name`, `email`, `password`) VALUES ('1', 'admin', 'admin@mydomain.com', '21232f297a57a5a743894a0e4a801fc3');

Next we need to build user interface for login. Come, let’s create an html login form using bootstrap css.

index.php

      #login-form .input-group, #login-form .form-group < margin-top: 30px; >#login-form .btn-default < background-color: #EEE; >.brand  
 
 
 
 
Bootstrap Login
  
 ?> 
 
 
 
 
 
 
 
New user? Sign Up here
 
kodingmadesimple.com
 
  
 
 
 
   

In the above file, I have tweaked & customized bootstrap css a little to make the login form look like this.

Also have used some php code . ?> to display error message if user authentication fails.

Next we’ll need a php script where the actual authentication process takes place. The script should receive user login details, check them against ‘users’ table from database and authenticate user if there is a match for the provided email and password else display error message in the login form. Here’s the php file for user authentication.

login.php

If the user enters valid email & password, then the script start session, stores user id & name as session data for future reference and redirect user to his/her profile page. On the other hand if login fails the script redirects to index.php and display invalid login message to the user.

Note: The scope of this article is just about login process and creating profile.php is not dealt here. If you want to read about complete user login and signup system then check here.

Now we have all the required files in place. Run index.php and the bootstrap login form prompts user to enter email & password field. As for validating form fields we have included simple HTML5 form validation here.

To test the login process, enter ‘admin@mydomain.com’ for email and ‘admin’ for password and click login. These are the valid login credentials present in the ‘users’ table. Also make sure to create profile.php file or redirect to some other page that exists for the script to work properly.

As for invalid login, enter some wrong data and click login button and an error message will be shown above the form like this,

So that explains about creating login page in bootstrap & php. I hope you enjoyed this simple bootstrap login form tutorial. I intend to share a post about bootstrap signup form soon. Like us on Facebook and stay tuned:)

Источник

PHP: Форма входа и регистрации в PHP + MySQL

Простая форма входа и регистрации в PHP + MySQL + Boostrap. В этом руководстве вы узнаете, как создать простую форму входа и регистрации в PHP + MySQL. Мы будем использовать локальный сервер OpenServer

Шаг 1 — Откройте панель управления сервера и создайте проект PHP

Посетите каталог OpenServer/domains. И внутри этого каталога создайте каталог проекта php (назовите его например: auth.loc). Затем перезагрузите сервер, для того, чтобы в списке «Мои проекты» у вас появился ваш только что созданный проект.

Шаг 2 — Создайте базу данных и таблицу

Перейдите в панель управления сервером во вкладку «Дополнительно -> PhpMyAdmin«. Авторизуйтесь в ней и создайте базу данных с именем my_db и выполните приведенный ниже запрос в своей базе данных. Приведенный ниже запрос создаст таблицу с именем users в вашей базе данных со следующими полями, такими как uid, name, email, mobile:

CREATE DATABASE my_db; CREATE TABLE `users` ( `uid` bigint(20) NOT NULL AUTO_INCREMENT PRIMARY KEY, `name` varchar(255) DEFAULT NULL, `email` varchar(255) DEFAULT NULL, `mobile` varchar(255) DEFAULT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Шаг 3 — Создайте файл подключения к базе данных

Создайте файл с именем db.php и обновите приведенный ниже код в своем файле.

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

Шаг 4 — Создайте регистрационную форму и вставьте данные в базу данных MySQL

Создать файл регистрационной формы с именем registration.php и добавьте в него следующий код:

 if (isset($_POST['signup'])) < $name = mysqli_real_escape_string($conn, $_POST['name']); $email = mysqli_real_escape_string($conn, $_POST['email']); $mobile = mysqli_real_escape_string($conn, $_POST['mobile']); $password = mysqli_real_escape_string($conn, $_POST['password']); $cpassword = mysqli_real_escape_string($conn, $_POST['cpassword']); if (!preg_match("/^[a-zA-Z ]+$/", $name)) < $name_error = "Name must contain only alphabets and space"; >if (!filter_var($email, FILTER_VALIDATE_EMAIL)) < $email_error = "Please Enter Valid Email ID"; >if (strlen($password) < 6) < $password_error = "Password must be minimum of 6 characters"; >if (strlen($mobile) < 10) < $mobile_error = "Mobile number must be minimum of 10 characters"; >if ($password != $cpassword) < $cpassword_error = "Password and Confirm Password doesn't match"; >if (mysqli_query($conn, "INSERT INTO users(name, email, mobile_number ,password) VALUES('" . $name . "', '" . $email . "', '" . $mobile . "', '" . md5($password) . "')")) < header("location: login.php"); exit(); >else < echo "Error: " . mysqli_error($conn); >mysqli_close($conn); > ?>       
 
 
 
Registration Form in PHP with Validation
 
 
Please fill all fields in the form
 
 
Name  
Email  
Mobile  
Password  
Confirm Password  Already have a account?Login  
 
 
  

Шаг 5 — Создайте форму входа в PHP с MySQL

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

 if (isset($_POST['login'])) < $email = mysqli_real_escape_string($conn, $_POST['email']); $password = mysqli_real_escape_string($conn, $_POST['password']); if (!filter_var($email, FILTER_VALIDATE_EMAIL)) < $email_error = "Please Enter Valid Email ID"; >if (strlen($password) < 6) < $password_error = "Password must be minimum of 6 characters"; >$result = mysqli_query($conn, "SELECT * FROM users WHERE email = '" . $email . "' and pass = '" . md5($password) . "'"); if (!empty($result)) < if ($row = mysqli_fetch_array($result)) < $_SESSION['user_id'] = $row['uid']; $_SESSION['user_name'] = $row['name']; $_SESSION['user_email'] = $row['email']; $_SESSION['user_mobile'] = $row['mobile']; header("Location: dashboard.php"); >> else < $error_message = "Incorrect Email or Password. "; >> ?>       
 
 
 
Login Form in PHP with Validation
 
 
Please fill all fields in the form
 
 
Email  
Password   
You don't have account?Click Here  
 
 
  

Шаг 6 — Создайте профиль пользователя и получите данные из базы данных

Создайте новый файл с именем dashboard.php и добавьте в него приведенный ниже код.

Приведенный ниже код используется для отображения данных пользователя, вошедшего в систему.

 ?>       
 
 
 
 
Name :- Email :- Mobile :- Logout 
 
 
 
 
  

Шаг 7 — Создайте файл Logout.php

Создайте файл logout.php и обновите приведенный ниже код в свой файл.

Приведенный ниже код используется для уничтожения входа в систему и выхода из системы.

Простая форма входа и регистрации на php с базой данных mysql с использованием OpenServer; В этом руководстве вы узнали, как создать простую систему входа, регистрации и выхода из системы в PHP MySQL с проверкой. Кроме того, вы узнали, как аутентифицировать и выходить из системы вошедших в систему пользователей в PHP.

Источник