Edisi tutorial kali ini akan membahas tentang CRUD. CRUD merupakan singkatan dari Create, Read, Update dan Delete. Penggunaan CRUD sangat penting, terutama bila sebuah aplikasi dihubungkan dengan database. Database yang digunakan adalah MySQL, sedangkan untuk layoutnya kita menggunakan Bootstrap sebagai front-end (In this edition's tutorial,we deal with CRUD. CRUD is an acronym for Create, Read, Update and Delete. The usage of CRUD is very important, especially when an application connected to database. We use MySQL as database, whereas for layout we use Bootstrap as front-end).
Untuk tutorial CRUD ini, kita membagi ke dalam beberap artikel. Untuk artikel dalam tutorial ini kita akan membahas tentang Create dan View semua data dari database. Untuk artikel pembahasan berikutnya, silahkan klik pada link paling bawah :To be Continued (For CRUD tutorial, we divide into several articles. In this tutorial, we concern the explanation about Create and View all data from database. For next explanation, please click link at the bottom "To be Continued" ).
Silahkan klik link Live Preview dibawah untuk mengetahui target dari output tutorial ini (Please click link Live Preview below to find out the target of the tutorial output).
Step-1 :
Membuat database seperti dibawah ini (Creating database as shown below).
CREATE TABLE IF NOT EXISTS `users` (
`No` int(11) NOT NULL AUTO_INCREMENT,
`FName` varchar(20) NOT NULL,
`LName` varchar(20) NOT NULL,
`Age` int(11) NOT NULL,
`Gender` enum('Male','Female') NOT NULL,
PRIMARY KEY (`No`)
) ENGINE=MyISA
Step-2 :
Membuat file connection.php. File ini berfungsi untuk menghubungkan dengan database. Kita asumsikan host, username, password dan nama database seperti script dibawah ini (Creating file connection.php. This file is used to connect to database. We assume host, username, password and database name as the script below) :
<?php
$con=mysqli_connect("localhost","root","","biodata");
?
Step-3 :
Membuat file index.php, pastikan sebelumnya anda telah mendownload Bootstrap. Jika belum, jangan khawatir, kami menyertakannya saat anda mengdownload keseluruhan source code tutorial ini (Creating file index.php, make sure you have downloaded Bootstrap. If not yet, don't be worry, we attach it when youd download all source code of this tutorial).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="tutorial-boostrap-merubaha-warna">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Tutorial Boostrap </title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<style type="text/css">
.navbar-default {
background-color: #3b5998;
font-size:18px;
color:#ffffff;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h4>Detailed Technology Center</h4>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
</div>
</div>
</nav>
<!-- /.navbar -->
<div class="container">
<div class="jumbotron">
<h3>Tutorial Bootstrap</h3>
<p>Create, Read, Update and Delete Data from Database</p>
</div>
</div>
<div class="container">
<div class="btn-toolbar">
<a class="btn btn-primary" href="insert.php"><i class="icon-plus"></i> Insert Data</a>
<div class="btn-group"> </div>
</div>
</div>
<br>
<br>
<div class="container">
<div class ="row">
<div class="col-md-9">
<table class="table table-striped table-bordered table-hover">
<tr>
<th>No</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Action</th>
</tr>
<tbody>
<?php
include 'connection.php';
$query = "select * from users order by No limit 10";
$res = mysqli_query($con,$query);
while($row=mysqli_fetch_array($res)){
echo '<tr>';
echo '<td>'. $row['No'] . '</td>';
echo '<td>'. $row['FName'] . ' '. $row['LName'] . '</td>';
echo '<td>'. $row['Age'] . '</td>';
echo '<td>'. $row['Gender'] . '</td>';
echo '<td><a class="btn btn-xs btn-info" href="read.php?No='. $row['No'] . '">Read</a>
<a class="btn btn-xs btn-primary" href="update.php?No='. $row['No'] . '">Update</a>
<a class="btn btn-xs btn-danger" href="delete.php?No='. $row['No'] . '">Delete</a>
</td>';
echo '</tr>';
}
?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
File index.php menampilkan semua data dari database. Dan pada file ini tersedia pilihan insert data, read, update dan delete (File index.php display all data from database. And on this file there are option : insert data, read, update and delete).
Step-4:
Membuat file insert.php. File ini bertujuan untuk mengcreate data baru yang akan disimpan ke dalam database (Creating file insert.php. This file is used to create new data that will be stored into database).
<?php
if ( !empty($_POST)) {
require 'connection.php';
// validation errors
$fnameError = null;
$lnameError = null;
$ageError = null;
$genderError = null;
// post values
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$age = $_POST['age'];
$gender = $_POST['gender'];
// validate input
$valid = true;
if(empty($fname)) {
$fnameError = 'Please enter First Name';
$valid = false;
}
if(empty($lname)) {
$lnameError = 'Please enter Last Name';
$valid = false;
}
if(empty($age)) {
$ageError = 'Please enter Age';
$valid = false;
}
if(empty($gender)) {
$genderError = 'Please select Gender';
$valid = false;
}
// insert data
if ($valid) {
mysqli_query($con,"INSERT INTO users Values('','$fname','$lname','$age','$gender')");
header("Location: index.php");
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="tutorial-boostrap-merubaha-warna">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Tutorial Boostrap </title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<style type="text/css">
.navbar-default {
background-color: #3b5998;
font-size:18px;
color:#ffffff;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h4>Detailed Technology Center</h4>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
</div>
</div>
</nav>
<!-- /.navbar -->
<div class="container">
<div class="row">
<div class="col-sm-5 col-sm-offset-3"><h3>Create a User</h3>
<form method="POST" action="">
<div class="form-group">
<label for="inputFName">First Name</label>
<input type="text" class="form-control" required="required" id="inputFName" name="fname" placeholder="First Name">
<span class="help-block"></span>
</div>
<div class="form-group ">
<label for="inputLName">Last Name</label>
<input type="text" class="form-control" required="required" id="inputLName" name="lname" placeholder="Last Name">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="inputAge">Age</label>
<input type="number" required="required" class="form-control" id="inputAge" name="age" placeholder="Age">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="inputGender">Gender</label>
<select class="form-control" required="required" id="inputGender" name="gender" >
<option>Please Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<span class="help-block"></span>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success">Create</button>
<a class="btn btn btn-default" href="index.php">Back</a>
</div>
</form>
</div></div>
<!-- /row -->
</div>
</body>
</html>
Anda dapat mengdownload keseluruhan file dilink bawah ini ( You can downloan all source code on the link below):
Untuk databasenya, anda dapat mengdownload dilink berikut (For database, you can download at the following link):
Untuk pembahasan berikutnya klik next dibawah (For next explanation click on the link next below).
