In this topic, we will learn how to create a PHP MySQL Login System with the help of PHP and MySQL database. There are few steps given for creating a login system with MySQL database. Show Before creating the login system first, we need to know about the pre-requisites to create the login module. Requirements
Environment SetupNow, we need to start the webserver and create the files for the login system. There are few steps that are given below to setup the environment.
Now, we will create four files here for the login system.
Save all these files in the htdocs folder inside the Xampp installation folder. The detailed description and code for these files are discussed below. index.htmlFirst, we need to design the login form for the website user to interact with it. This login form is created using html and also contains the empty field validation, which is written in JavaScript. The code for the index.html file is given below: After executing the above code on the browser, the login page will appear as below if it does not contain style.css file. style.cssNow, we will create style.css file to provide a more attractive view to the login form. The CSS code for the style.css file is given below: After including above CSS file in index.html, the login form will be like - Note: All these files should be saved in the same folder, so we can easily access them without any interruption.Database and Table CreationNow, the next step is to create the database and the login table inside the database.
connection.phpNext step is to do the connectivity of login form with the database which we have created in the previous steps. We will create connection.php file for which code is given below: authentication.phpNow, we have our database setup, so we can go with the authentication of the user. This file handles the login form data that sent through the index.html file. It validates the data sent through the login form, if the username and password match with the database, then the login will be successful otherwise login will be failed. I have developed a drop-down login panel using Bootstrap 3.3.7. Where the user inputs the username and password used during registration. What I want is, If login is successful I want the user to be redirected to another page called profile.php else if login is not successful an error message will appear on the login panel footer. The HTML code for the panel: <li class="nav-link dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user"></span>Login</a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <div style="width:300px;"> <div class="panel-heading text-center" style="color:black;">LOGIN</div> <div class="panel-heading"> <label for="email">username</label> <input type="text" class="form-control" id="username"> <label for="email">Password</label> <input type="password" class="form-control" id="password"> <br> <a href="#" style="color:blue; list-style:none;">Forgotten password?</a><input type="submit" class="btn btn-success" style="float:right;" id="login" value="login"> </div> <div class="panel-footer" id="login_msg"></div> </div> </div> </li> The javascript login code: $("#login").click(function(event) { event.preventDefault(); var u_name = $("#username").val(); var pass = $("#password").val(); $.ajax({ url: "login.php", method: "POST", data: { userLogin: 1, userUname: u_name, userPassword: pass }, success: function(data) { if (data == "truejsdhfkh") { window.location.href = "profile.php"; } else { $("#login_msg").html(data); } } }) }) The php login code: <?php // connect to the database include "db.php"; //session start session_start(); //login page if(isset($_POST['userLogin'])){ $uname = mysqli_real_escape_string($con, $_POST['userUname']); $passwrd = mysqli_real_escape_string($con, $_POST['userPassword']); if(empty($uname) || empty($passwrd)){ echo " <div class='alert alert-danger'> <a href='#' class='close' data-dismiss='alert' aria-label='close'>×</a><b>Please fill in all fields!</b> </div> "; exit(); }else{ $passwrd = md5($passwrd); $sql = "SELECT * FROM user_info WHERE username = '$u_name' AND passwrd = '$password'"; $run_query = mysqli_query($con,$sql); $count = mysqli_num_rows($run_query); if($count == 1){ $row = mysqli_fetch_array($run_query); $_SESSION["uid"] = $row["user_id"]; $_SESSION["uname"] = $row["username"]; echo "truejsdhfkh"; } } } ?> When I click on the login button nothing happened. Can someone please guide me in doing this? How to connect HTML login page with database?Step 1- Create a HTML PHP Login Form. To create a login form, follow the steps mentioned below: ... . Step 2: Create a CSS Code for Website Design. ... . Step 3: Create a Database Table Using MySQL. ... . Step 4: Open a Connection to a MySQL Database. ... . Step 5 - Create a Logout Session. ... . Step 6 - Create a Code for the Home Page.. How to create login page in HTML using JavaScript?How to create login form with JavaScript validation in html?. Open Notepad or Adobe Dreamweaver or any other Html editor. I am using Dreamweaver. ... . Copy the below complete HTML code and paste it in your editor. <! ... . Now apply the CSS to all Elements for better presentation. ... . Here we add JavaScript code for validation check.. How do I create a working login page in HTML?<input type="text" placeholder="Enter Username" name="username" required> <label>Password : </label> <input type="password" placeholder="Enter Password" name="password" required> <button type="submit">Login</button>
How do I create a login page for my website using HTML and CSS?Step 1 : Adding HTML Add an image inside a container and add inputs with matching labels for each field. Wrap a “form” element around them to process the input. Step 2 : Adding CSS Add the required CSS to design the login page try to keep the design as simple as possible.
|