본문 바로가기

BootStrap/Bootstrap Sample File

LOGIN SESSIONS USING PHP PDO AND BOOTSTRAP

Login Sessions Using PHP PDO and Bootstrap-This login is a login session that is running the server side using php mysqli or pdo php. Here I will discuss how to create a login session using php pdo and bootstrapBootstrap is a template design for a session login program.




Then, create a new folder in the web root and place the template design of bootstrapping into the new folder. Next make the files below.

config.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
class Config{
  
 private $host = "localhost";
 private $db_name = "ningsih";
 private $username = "root";
 private $password = "pidie";
 public $conn;
  
 public function getConnection(){
  
  $this->conn = null;
   
  try{
   $this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password);
  }catch(PDOException $exception){
   <span id="IL_AD11" class="IL_AD">echo</span> "Connection error: " . $exception->getMessage();
  }
   
  return $this->conn;
 }
}
?>


login.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<?php
include_once 'config.php';
 
$config = new Config();
$db = $config->getConnection();
  
if($_POST){
  
 include_once 'includes/login.inc.php';
 $login = new Login($db);
 
 $login->userid = $_POST['username'];
 $login->passid = md5($_POST['password']);
  
 if($login->login()){
  echo "<script><span id="IL_AD12" class="IL_AD">location</span>.href='index.php'</script>";
 }
  
 else{
  echo "<script>alert('Gagal Total')</script>";
 }
}
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta <span id="IL_AD5" class="IL_AD">charset</span>="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
 
    <title>Sign Ningsih Program</title>
 
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
 
    <!-- <span id="IL_AD7" class="IL_AD">Custom styles</span> for this template -->
    <link href="css/signin.css" rel="stylesheet">
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
  </head>
 
  <body>
 
    <div class="container">
 
      <form class="form-signin" method="post">
        <h2 class="form-signin-heading">Silahkan Login Dulu!</h2>
        <<span id="IL_AD3" class="IL_AD">label</span> for="username">Nama Pengguna</label>
        <input <span id="IL_AD4" class="IL_AD">type</span>="text" id="username" name="username" class="form-control" placeholder="Username" required autofocus>
         
 
        <label for="password">Kata Sandi</label>
        <input type="password" id="password" name="password" class="form-control" placeholder="Password" required>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
      </form>
 
    </div> <!-- /container -->
 
  </body>
</html>


login.inc.php (create another folder named "includes" into new folder)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php
class Login
{
 private $conn;
 private $table_name = "admin";
  
    public $user;
    public $userid;
    public $passid;
 
    public function __construct($db){
  $this->conn = $db;
 }
 
    public function login()
    {
        $user = $this->checkCredentials();
        if ($user) {
            $this->user = $user;
   session_start();
            $_SESSION['nama_adm'] = $user['nama_adm'];
            return $user['nama_adm'];
        }
        return false;
    }
 
    protected function checkCredentials()
    {
        $stmt = $this->conn->prepare('SELECT * FROM '.$this->table_name.' WHERE username=? and password=? ');
  $stmt->bindParam(1, $this->userid);
  $stmt->bindParam(2, $this->passid);
        $stmt->execute();
        if ($stmt->rowCount() > 0) {
            $data = $stmt-><span id="IL_AD1" class="IL_AD">fetch</span>(PDO::FETCH_ASSOC);
            $submitted_pass = $this->passid;
            if ($submitted_pass == $data['password']) {
                return $data;
            }
        }
        return false;
    }
 
    public function getUser()
    {
        return $this->user;
    }
}
?>


index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<?php
session_start();
if(!isset($_SESSION['nama_adm'])){
 echo "<script>location.href='login.php'</script>";
}
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ningsih Program</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/jumbotron-narrow.css" rel="stylesheet">
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via <span id="IL_AD10" class="IL_AD">file</span>:// -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  
 <div class="container">
      <div class="header">
        <nav>
          <ul class="nav nav-pills pull-right">
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation"><a href="#">About</a></li>
            <li role="presentation"><a href="#">Contact</a></li>
            <li role="presentation"><a href="logout.php">Logout</a></li>
          </ul>
        </nav>
        <h3 class="text-muted">Ningsih Program</h3>
      </div>
 
      <div class="jumbotron">
        <h1><?php echo $_SESSION['nama_adm'] ?></h1>
        <p class="lead">Selamat datang wahai <?php echo $_SESSION['nama_adm'] ?> sang operator silahkan anda kontrol data disini semoga bermanfaat </p>
        <p><a class="btn btn-lg btn-success" href="#" role="button"><?php echo $_SESSION['nama_adm'] ?></a></p>
      </div>
 
      <footer class="footer">
        <p>© Company 2014</p>
      </footer>
 
    </div> <!-- /container -->
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


logout.php

1
2
3
4
5
<?php
session_start();
echo "<script>location.href='index.php'</script>";
session_destroy();
?>


Complete, run do not forget to create the database first, for the following sql syntax, how to use it simply paste into the menu sql and execute sql. Although the syntax is located at the end of the article, but this is very important. At the same time do not forget to fill in the data table admin and the password into md5.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
--
-- Database: `ningsih`
--
 
CREATE TABLE IF NOT EXISTS `admin` (
  `id_adm` int(11) NOT NULL AUTO_INCREMENT,
  `nama_adm` varchar(45) NOT NULL,
  `username` varchar(100) NOT NULL,
  `password` varchar(100) NOT NULL,
  PRIMARY KEY (`id_adm`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
 
INSERT INTO `admin` (`id_adm`, `nama_adm`, `username`, `password`) VALUES
(1, 'Ningsih', 'ningsih', 'e10adc3949ba59abbe56e057f20f883e'),
(2, 'Ghazali', 'ghazali', 'a7b0175aa46d84f8ecc5c2973b2887e7');
 
--
-- password ningsih is 123456
--