How to Make CRUD operations by Using PHP MySQLi and Bootstrap
Add and Update Data
How to Make CRUD operations by Using PHP MySQLi and Bootstrap
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
--
-- 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
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=latin1;
config.php
<?php
$mysqli = new mysqli("localhost", "root", "pidie", "biodata");
if ($mysqli->connect_errno) {
echo "Failed to connect to MySQL: " . $mysqli->connect_error;
}
?>
header.php
<!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
</div>
</div>
</div>
<!-- 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>
<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
<?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("SELECT * 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
<?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 klik <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">
<label 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
<?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>location.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
<?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;
?>
