Freebie Complete PHP Project Bootstrap PDO Sign-In Jquery UI Autocomplete Validation

Furqan Aziz | 14 Nov 2013 | Freebies

Freebie - SIMS For PHP Beginners using PDO queries, Bootstrap and JqueryUI with Validation
Social Box
It is a freebie complete project for PHP beginners using PDO (PHP Data Objects) queries, Bootstrap, MySQL Database, JQuery UI, Jquery Validation Plug-in with full source code. Bootstrap CSS framework is used along with JQuery UI Autocomplete. For password change match password option is also good for users they want to design a sign up form. In server stats insertion form only double number allowed using regular expression. Jquery Validation plug-in used in this freebie project which works fine in all major browsers. It is a complete system , you can improve this and share with others. Enjoy it!
  1. This freebie contains following files and folders for you.
    • simssampledb.txt contains full database structure along with sample data.
    • index.php is file from where you can login to system
    • AdminIndex.php is a page which will open after successful login. You can add server stats and change password from option side menu.
    • SearchServer.php is a page which will show results of your search query.
    • CheckLogin.php is a file which will check the username and password and redirect to secret pages like AdminIndex.php
    • configPDO.php is a file which will create connection with database.
    • NavButtons.php is a file which contains menu list for this system.
    • Footer.php is a file which contains footer bar and forms for sign in, password update and server information addition.
    • Get_Auto1.php is a file which will get server names from database and encode it in JSON.
    • JqueryUILinks.php is a file contains jquery code for showing autocomplete results in search box using Ajax..
    • Logout.php is a file which will destroy the session and logout the user to index.php page.
    • AdminChangePasswordmy.php is a file which contains password update PDO Query.
    • ServerMy.php is a file which contains PDO Insert and Update Queries.
    • UserSessionAdmin.php is a file which included for protection of pages from unauthorized users.
    • assets folder contains necessary css, icon, image, js and jquery ui folders and files.
    • We use Jquery Bootstrap plugin for all forms. You can learn more about jqBootstrapValidation.
  2. We use bootstrap modal for Sign in form. please check below code for sign in form which is written in footer.php page. We call it in a modal when we press Sign in Button. You can get other forms code in footer.php file.
    • <div id="signin" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel">Sign In Form</h3>
                  <div class="modal-body">
      <form class="form-horizontal" method="post" action="CheckLogin.php">
                  <div class="control-group">
                    <label class="control-label" for="inputName">User Name</label>
                    <div class="controls">
                      <input type="text" name="inputName"  id="inputName" placeholder="User Name" required="required">
                  <div class="control-group">
                    <label class="control-label" for="inputPassword">Password</label>
                    <div class="controls">
                      <input type="password" name="inputPassword" id="inputPassword" placeholder="Password" maxlength="15" minlength="6"  required="required">
                  <div class="control-group">
                    <div class="controls">
                      <button type="submit" class="btn">Sign in</button>
  3. We will create simssampledb first using simssampledb.txt which contains these three tables with sample data.
    • members table contains members details like MemId, UserName, Password, Type, Region.
    • servername table contains Servername and entrydate updates.
    • statstracker table contains all the stats about servers like High Memory Utilization, Average CPU utilization etc.
    Table Structure for Members Table
  4. configPDO.php file use a PDO (PHP Data Objects) for connection to MySQL Database to avoid SQL injections.
    • <?php
      // mysql hostname
      $hostname = 'localhost';
      // mysql username
      $username = 'root';
      // mysql password
      $password = '';
      // Database Connection using PDO
      try {
      $dbh = new PDO("mysql:host=$hostname;dbname=simssampledb", $username, $password);
      catch(PDOException $e)
          echo $e->getMessage();
  5. CheckLogin.php compare username and password iN MySQL Members table and if successful redirects to protected page named AdminIndex.php. If username and password not authenticated it will redirect user to index.php page.
    • Note: Saving plain passwords in database is not a good pratice, you can choose md5 function or any other method to protect passwords.
    • <?php
      // Start Session because we will save some values to session varaible.
      // include connection file
      // Define $myusername and $mypassword
      // We Will prepare SQL Query
          $STM = $dbh->prepare("SELECT Type,Region FROM members WHERE UserName = :UserName AND Password = :Password");
      // bind paramenters, Named paramenters alaways start with colon(:)
          $STM->bindParam(':UserName', $UserName);
          $STM->bindParam(':Password', $Password);
      // For Executing prepared statement we will use below function
      // Count no. of records	
      $count = $STM->rowCount();
      //just fetch. only gets one row. So no foreach loop needed :)
      $row  = $STM -> fetch();
      // User Redirect Conditions will go here
          	// Save type and other information in Session for future use.
      		// if user type is ACTAdmin only then he can access protected page.
      		if($row[0] == 'ACTAdmin')	 { header( "location:http://localhost/SIMS-For-PHP-Beginners/AdminIndex.php"); 	}
      		else    { header( "location:http://localhost/PHPPDOSignin/index.php");  }
      // Closing MySQL database connection 
          $dbh = null;
  6. For protection of pages we include UserSessionAdmin.php file at the top of each protected page.
    • <?php
  7. Below is code for UserSessionAdmin.php. We use Type of the user in this file to protect pages.
    • <?php
You can use this freebie project for any purpose. This will also help New PHP Developers to learn and create projects with ease. This project is designed using Bootstrap framework 2.3.2 version. Jquery UI autocomplete is also used for showing results in search bar. For any query/suggestions please post a comment on our Facebook Page.
PHP MySQL Simple Delete using PDO in Bootstrap Tutorial
Convert Simple Text To 3D Text using Adobe Fireworks CS6 Tutorial
PHP Simple Update using PDO in Bootstrap Tutorial
PHP Simple Insert using PDO in Bootstrap Tutorial
PHP MySQL Easy CSV Data Insertion in Bootstrap using PDO Tutorial
PHP Easy Sign-in Using PDO Prepared Statement Tutorial
Easy PHP Email With Attachments using Swift Mailer Tutorial
Easy Pagination with PDO in PHP plus Export to Excel Tutorial
PHP PDO to Connect MySQL Database Tutorial
Best CSS Frameworks Collection For Rapid Web Development
PHP-MySQL Ajax Jquery-UI Autocomplete in Bootstrap Tutorial
PHP Simple Sign-in Tutorials
Jquery Raty Usage via PHP
PHP Dynamic Select options Via Ajax
CSV Importer in MySQL
PHP File Load Via Jquery into DIV
© 2017 CreWow Network - All Rights Reserved.