Creating a Simple Login Using MySQLi Prepared Statement / jQuery

Submitted by: 
Language: 
Visitors have accessed this post 3035 times.

In this tutorial, we will create a Simple Login Using MySQLi Prepared Statement / jQuery. Most of the website nowadays are required to use MySQLi / PDO statement due to the depreciated of MySQL. This time we will try to work out with MySQLi and Ajax call function to make our simple application more interactive.

Let's start coding!

First we will create the database
*Open the database web server that are already installed from your computer(WAMP, XAMP, etc...)
*Next, Open the internet browser(Chrome, IE, etc..), and type in the url address "localhost/phpmyadmin"
*Create your database, and name it "sample"
*After creating the database, click SQL and paste the code below

  1. CREATE TABLE IF NOT EXISTS `user` (
  2. `user_id` int(11) NOT NULL AUTO_INCREMENT,
  3. `username` varchar(50) NOT NULL,
  4. `password` varchar(50) NOT NULL,
  5. PRIMARY KEY (`user_id`)
  6. ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Creating the database connection

After we created the database, we will now create the database connection. To do that, first open any kind of text editor(Notepad++, etc...) that your computer already have. Then, just copy the code below, then name it "connect.php"

  1. <?php
  2. $conn = new mysqli('localhost', 'root', '', 'sample');
  3. if($conn->connect_error){
  4. die("Fatal Error: Can't connect to database: ". $conn->connect_error);
  5. }
  6. ?>

Creating the HTML form

Now that the connection is already created, we will now create the HTML form, The HTML form will display the forms that we will going to use to login the accounts of the user. Just copy the code below, then paste it inside the body tag and name it "index.php"

  1. <div id = "content">
  2. <form method = "POST">
  3. <table>
  4. <tr>
  5. <td><label>Username:</label></td>
  6. <td><input type = "text" id = "username"></td>
  7. </tr>
  8. <tr>
  9. <td><label>Password:</label></td>
  10. <td><input type = "password" id = "password"></td>
  11. </tr>
  12. <tr>
  13. <td colspan = "2"><br /></td>
  14. </tr>
  15. <tr>
  16. <td colspan = "2"><button type = "button" style = "width:100%;" id = "login">Login</button></td>
  17. </tr>
  18. <tr>
  19. <td colspan = "2"><div id = "result"></div></td>
  20. </tr>
  21. </table>
  22. </form>
  23. </div>

Then, we will add some design for the form, just copy and paste it inside the head tag

  1. <style>
  2. #content{
  3. background-color: #ffeecc;
  4. width:280px;
  5. height:110px;
  6. margin: 100px auto;
  7. padding:10px;
  8. border-radius:2px;
  9. -webkit-box-shadow:0px 0px 30px 3px #000;
  10. }
  11. </style>

Next we will now create the jQuery function, just copy the code below and name it "login.js"

  1. $(document).ready(function(){
  2. $error = $('<center><label style = "color:#ff0000;">Invalid username or password</label></center>');
  3. $error2 = $('<center><label style = "color:#ff0000;">User not found!</label></center>');
  4. $success = $('<center><label style = "color:#00ff00;">Successfully login!</label></center>');
  5. $loading = $('<center><img src = "loading.gif" height = "5px" width = "100%"/></center>');
  6. $('#login').on('click', function(){
  7. $error.remove();
  8. $error2.remove();
  9. $username = $('#username').val();
  10. $password = $('#password').val();
  11. if($username == "" && $password == ""){
  12. $error.appendTo('#result');
  13. }else{
  14. $loading.appendTo('#result');
  15. setTimeout(function(){
  16. $loading.remove();
  17. $.post('validator.php', {username: $username, password: $password},
  18. function(result){
  19. if(result == "Success"){
  20. $('#username').val('');
  21. $('#password').val('');
  22. $success.appendTo('#result');
  23. setTimeout(function(){
  24. $success.remove();
  25. window.location = 'home.php';
  26. }, 1000);
  27. }else{
  28. $('#username').val('');
  29. $('#password').val('');
  30. $error2.appendTo('#result');
  31. }
  32. }
  33. )
  34. }, 3000);
  35. }
  36. });
  37. });

After that we will now create the validator, this script will check if the accounts of the user is existing in the database

  1. <?php
  2. require_once 'connect.php';
  3. $username = $_POST['username'];
  4. $password = $_POST['password'];
  5. $stmt = $conn->prepare("SELECT * FROM `user` WHERE username = '$username' && `password` = '$password'") or die(mysqli_error());
  6. if($stmt->execute()){
  7. $result = $stmt->get_result();
  8. $num_rows = $result->num_rows;
  9. }
  10. if($num_rows > 0){
  11. echo "Success";
  12. }else{
  13. echo "Error";
  14. }
  15. ?>

Next, we will now create the home page, just copy the code below"home.php"

  1. <!DOCTYPE html>
  2. <html lang = "eng">
  3. <head>
  4. <style>
  5. #content{
  6. background-color: #ffeecc;
  7. width:280px;
  8. height:110px;
  9. margin: 100px auto;
  10. padding:10px;
  11. border-radius:2px;
  12. -webkit-box-shadow:0px 0px 30px 3px #000;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div id = "content">
  18. <center><h2>Welcome!</h2></center>
  19. <center><a href = "index.php" style = "text-decoration:none;">Back</a></center>
  20. </div>
  21. </body>
  22. </html>

Lastly, insert the jquery plugin along with login.js to make the script worked, here's how you do it

  1. <body>
  2. <div id = "content">
  3. <form method = "POST">
  4. <table>
  5. <tr>
  6. <td><label>Username:</label></td>
  7. <td><input type = "text" id = "username"></td>
  8. </tr>
  9. <tr>
  10. <td><label>Password:</label></td>
  11. <td><input type = "password" id = "password"></td>
  12. </tr>
  13. <tr>
  14. <td colspan = "2"><br /></td>
  15. </tr>
  16. <tr>
  17. <td colspan = "2"><button type = "button" style = "width:100%;" id = "login">Login</button></td>
  18. </tr>
  19. <tr>
  20. <td colspan = "2"><div id = "result"></div></td>
  21. </tr>
  22. </table>
  23. </form>
  24. </div>
  25. </body>
  26. <script src = "jquery-3.1.1.js"></script>
  27. <script src = "login.js"></script>
  28. </html>

There you have it, we created a simple login form. I hope that this tutorial help you to your projects. For more tutorials and updates, just kindly visit this site. Enjoy Coding!!!


Tags: 

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Comments

gj mate,helped me a lot...

How can i modify this code to make it usable for multiple users with different roles and having them redirect to pages based on their roles

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.