본문 바로가기
BootStrap/Bootstrap Sample File

HOW TO MAKE CRUD OPERATIONS BY USING PHP MYSQLI AND BOOTSTRAP

hookbox 2015. 11. 15. 09:47

In this article I will discuss how to make the crud operations using php and mysql along with bootstrap . You should be able to design a web with subsequent bootstrap we will learn to make crud operations with php mysqli and bootstrap. 



Add and Update Data




View Data


Needed to build this project is plugin of bootstrap that you can download on their official website. furthermore create a new folder , then copy the plugin bootstrap consisting of folders css , js , fonts into the new folder . furthermore create files that exist below into the new folder.

MySQL Database Code

?
1
2
3
4
5
6
7
8
9
10
11
--
-- Database: `biodata`
--
 
CREATE TABLE IF NOT EXISTS `personal` (
`id_personal` int(11) NOT NULL,
  `name` varchar(45) NOT NULL,
  `gender` varchar(20) NOT NULL,
  `telp` varchar(25) NOT NULL,
  `address` text NOT NULL
) <span id="IL_AD11" class="IL_AD">ENGINE</span>=InnoDB AUTO_INCREMENT=9 DEFAULT <span id="IL_AD7" class="IL_AD">CHARSET</span>=latin1;


config.php

?
1
2
3
4
5
6
<?php
$mysqli = new mysqli("localhost", "root", "pidie", "biodata");
if ($mysqli->connect_errno) {
    <span id="IL_AD9" class="IL_AD">echo</span> "Failed to connect to MySQL: " . $mysqli->connect_error;
}
?>


header.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
<!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>CRUD PHP MySQLi</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/dataTables.bootstrap.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 file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
     
  </head>
  <body>
   
    <p>
</p>
    <div class="container">
       
     <p>
</p>
     <div class="panel panel-default">
       <div class="panel-body">


footer.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
       </div>
     </div>
      
    </div>
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include <span id="IL_AD8" class="IL_AD">individual</span> files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/dataTables.bootstrap.js"></script>
    <script type="text/javascript" charset="utf-8">
 $(document).ready(function() {
   $('#ghatable').dataTable();
 });
    </script>
  </body>
</html>


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
<?php
include "config.php";
include "header.php";
?>
<p>
<a href="create.php" class="btn btn-primary btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Data</a>
 
</p>
<table id="ghatable" class="display table table-bordered table-stripe" cellspacing="0" width="100%">
<thead>
     <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Gender</th>
          <th>Phone</th>
          <th>Address</th>
          <th>Action</th>
     </tr>
</thead>
<tbody>
<?php
$res = $mysqli->query("<span id="IL_AD10" class="IL_AD">SELECT</span> * FROM personal");
while ($row = $res->fetch_assoc()):
?>
     <tr>
          <td><?php echo $row['id_personal'] ?></td>
          <td><?php echo $row['name'] ?></td>
          <td><?php echo $row['gender'] ?></td>
          <td><?php echo $row['telp'] ?></td>
          <td><?php echo $row['address'] ?></td>
          <td>
          <a href="update.php?u=<?php echo $row['id_personal'] ?>"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit</a>
          <a onclick="return confirm('Are you want deleting data')" href="delete.php?d=<?php echo $row['id_personal'] ?>"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete</a>
          </td>
     </tr>
<?php
endwhile;
?>
</tbody>
</table>    
<?php
include "footer.php";
?>


create.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
67
68
69
70
71
72
73
74
75
<?php
include "config.php";
include "header.php";
?>
<a href="index.php" class="btn btn-success btn-md"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Back</a>
<?php
if(isset($_POST['bts'])):
  if($_POST['nm']!=null && $_POST['gd']!=null && $_POST['tl']!=null  && $_POST['ar']!=null){
     $stmt = $mysqli->prepare("INSERT INTO personal(name,gender,telp,address) VALUES (?,?,?,?)");
     $stmt->bind_param('ssss', $nm, $gd, $tl, $ar);
 
     $nm = $_POST['nm'];
     $gd = $_POST['gd'];
     $tl = $_POST['tl'];
     $ar = $_POST['ar'];
 
     if($stmt->execute()):
?>
<p></p>
<div class="alert alert-success alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
  <strong>Berhasil!</strong> Silahkan tambah lagi, jika ingin keluar <span id="IL_AD12" class="IL_AD">klik</span> <a href="index.php">Home</a>.
</div>
<?php
     else:
?>
<p></p>
<div class="alert alert-danger alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
  <strong>Gagal!</strong> Gagal total, Silahkan coba lagi!!!.<?php echo $stmt->error; ?>
</div>
<?php
     endif;
  } else{
?>
<p></p>
<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
  <strong>Gagal!</strong> Form tidak boleh kosong, tolong diisi.
</div>
<?php
  }
endif;
?>
 
     <p>
</p>
     <div class="panel panel-default">
       <div class="panel-body">
        
  <form role="form" method="post">
    <div class="form-group">
      <<span id="IL_AD5" class="IL_AD">label</span> for="nm">Name</label>
      <input type="text" class="form-control" name="nm" id="nm" placeholder="Enter Name">
    </div>
    <div class="form-group">
      <label for="gd">Gender</label>
      <select class="form-control" id="gd" name="gd">
        <option>Male</option>
        <option>Female</option>
      </select>
    </div>
    <div class="form-group">
      <label for="tl">Phone</label>
      <input type="tel" class="form-control" name="tl" id="tl" placeholder="Enter Phone">
    </div>
    <div class="form-group">
      <label for="ar">Address</label>
      <textarea class="form-control" name="ar" id="ar" rows="3"></textarea>
    </div>
    <button type="submit" name="bts" class="btn btn-default">Submit</button>
  </form>
<?php
include "footer.php";
?>


update.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
<?php
include "config.php";
include "header.php";
if(isset($_GET['u'])):
     if(isset($_POST['bts'])):
          $stmt = $mysqli->prepare("UPDATE personal SET name=?, gender=?, telp=?, address=? WHERE id_personal=?");
          $stmt->bind_param('sssss', $nm, $gd, $tl, $ar, $id);
 
          $nm = $_POST['nm'];
          $gd = $_POST['gd'];
          $tl = $_POST['tl'];
          $ar = $_POST['ar'];
          $id = $_POST['id'];
 
          if($stmt->execute()):
               echo "<script><span id="IL_AD4" class="IL_AD">location</span>.href='index.php'</script>";
          else:
               echo "<script>alert('".$stmt->error."')</script>";
          endif;
     endif;
     $res = $mysqli->query("SELECT * FROM personal WHERE id_personal=".$_GET['u']);
     $row = $res->fetch_assoc();
?>
 
   <p>
</p>
     <div class="panel panel-default">
       <div class="panel-body">
        
  <form role="form" method="post">
    <input type="hidden" value="<?php echo $row['id_personal'] ?>" name="id"/>
    <div class="form-group">
      <label for="nm">Name</label>
      <input type="text" class="form-control" name="nm" id="nm" value="<?php echo $row['name'] ?>">
    </div>
    <div class="form-group">
      <label for="gd">Gender</label>
      <select class="form-control" id="gd" name="gd">
        <option><?php echo $row['gender'] ?></option>
        <option>Male</option>
        <option>Female</option>
      </select>
    </div>
    <div class="form-group">
      <label for="tl">Phone</label>
      <input type="tel" class="form-control" name="tl" id="tl" value="<?php echo $row['telp'] ?>">
    </div>
    <div class="form-group">
      <label for="ar">Address</label>
      <textarea class="form-control" name="ar" id="ar" rows="3"><?php echo $row['address'] ?></textarea>
    </div>
    <button type="submit" name="bts" class="btn btn-default">Submit</button>
  </form>
<?php
endif;
include "footer.php";
?>


delete.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
include "config.php";
if(isset($_GET['d'])):
     $stmt = $mysqli->prepare("DELETE FROM personal WHERE id_personal=?");
     $stmt->bind_param('s', $id);
 
     $id = $_GET['d'];
 
     if($stmt->execute()):
          echo "<script>location.href='index.php'</script>";
     else:
          echo "<script>alert('".$stmt->error."')</script>";
     endif;
endif;
?>


'BootStrap > Bootstrap Sample File' 카테고리의 다른 글

CRUD (CREATE, READ, UPDATE, DELETE, PAGINATION) USING PHP PDO AND BOOTSTRAP  (0) 2015.11.15
LOGIN SESSIONS USING PHP PDO AND BOOTSTRAP  (0) 2015.11.15
HOW TO CREATE A LOGIN SESSION USING PHP MYSQLI AND BOOTSTRAP  (0) 2015.11.15
MULTI UPLOAD AND DELETE FILE WITH PHP MYSQLI AND BOOTSTRAP  (0) 2015.11.15
HOW TO LOGIN MULTI-LEVEL USER USING PHP MYSQLI AND BOOTSTRAP  (0) 2015.11.15

'BootStrap/Bootstrap Sample File' Related Articles

티스토리툴바