Membuat Aplikasi CRUD Sederhana dengan PHP & Bootstrap Chapter 3 (end)

Fahmi Amarullah 19.17 PHP 1 komentar

Yosh akhirnya saya bisa menyelesaikan artikel chapter terakhir pada tutorial CRUD ini. Pada chapter ke 2 kita telah berhasil memunculkan data dari database ke halaman php kita tepatnya pada anggota.php. Pada chapter terakhir ini, kita akan melanjutkannya yaitu dengan Create, Update dan Delete data. kita mulai saja.

edit file yang sudah kita buat sebelumnya yaitu tambah.php. kemudian ganti kode nya dengan yang di bawah ini :


<!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>Anime Coder</title>

<!-- Bootstrap -->

<link href="assets/css/bootstrap.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="assets/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2> Simple CRUD BY Anime Coder </h2>

<nav class="navbar navbar-inverse" role="navigation">

<div class="container-fluid">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="index.php"><span class="glyphicon glyphicon-home"></span></a>

</div>



<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li><a href="anggota.php"><span class="glyphicon glyphicon-user"></span> Data Anggota</a></li>

<form class="navbar-form navbar-left" role="search">

<div class="form-group">

<input type="text" class="form-control" placeholder="Search">

</div>

<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span> Cari</button>

</form>

</div><!-- /.navbar-collapse -->

</div><!-- /.container-fluid -->

</nav>

</div>

<div class="container">

<h3>Data Anggota</h3 >

<table class="table table-striped table-bordered">

<tr>

<th><center>No</center></th>

<th><center>Nama Lengkap</center></th>

<th><center>Jenis Kelamin</center></th>

<th><center>Email Address</center></th>

<th><center>Pilih Aksi</center></th>

</tr>

<?php

include "config/db.php" ;

$no = 0 ;

$sql = mysql_query("SELECT * FROM anggota");

while ($tampil = mysql_fetch_array($sql)) {

$no++;

?>

<tr>

<td><center><?php echo $no ?></center></td>

<td><?php echo $tampil['nama']?></td>

<td><center><?php echo $tampil['jenis_kelamin']?></center></td>

<td><center><?php echo $tampil['email']?></center></td>

<td><center><a class="glyphicon glyphicon-pencil" href="edit.php?id=<?php echo $tampil['id_anggota'];?>"> Edit</a> | <a class="glyphicon glyphicon-trash" href="hapus.php?id=<?php echo $tampil['id_anggota'];?>" onclick="return confirm('Apakah Anda yakin akan menghapus?')">Hapus</a></td></center>

</tr>

<?php

}

?>

</table>

<div class="container">

<form class="form-horizontal" role="form" action="tambah.php" method="POST">

<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Tambah Data</button>

</form>

</div>

</div>

<div class="container">

<div class="row">

<div class="col-sm-12">

<hr>

<center> <p>&copy;Copyright Anime Coder 2015 All Right Reserved</p></center>

</div>

</div>

</div>

</body>

</html>

simpan file tersebut. Selanjutnya kita akan membuat file baru yaitu simpan.php untuk eksekusi perintah create data dari halaman tambah.php tadi. berikut kode nya :

<!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>Anime Coder</title>



<!-- Bootstrap -->

<link href="assets/css/bootstrap.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="assets/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2> Simple CRUD BY Anime Coder </h2>

<nav class="navbar navbar-inverse" role="navigation">

<div class="container-fluid">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="index.php"><span class="glyphicon glyphicon-home"></span></a>

</div>



<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li><a href="anggota.php"><span class="glyphicon glyphicon-user"></span> Data Anggota</a></li>

<form class="navbar-form navbar-left" role="search">

<div class="form-group">

<input type="text" class="form-control" placeholder="Search">

</div>

<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span> Cari</button>

</form>

</div><!-- /.navbar-collapse -->

</div><!-- /.container-fluid -->

</nav>



</div>

<div class="container">

<h3>Tambah Anggota</h3 >

<?php

include "config/db.php" ;

error_reporting(E_ALL ^ E_DEPRECATED) ;

$nama = $_POST['nama'] ;

$jeniskelamin = $_POST['jeniskelamin'] ;

$email = $_POST['email'] ;



$sql = mysql_query ("INSERT INTO anggota (nama, jenis_kelamin, email) VALUES ('$nama','$jeniskelamin','$email')");

if ($sql) {

echo "<div class='alert alert-info' role='alert'>Data Berhasil Disimpan untuk melihat data klik<a href='anggota.php'> <b>disini</b> </a></div>" ;

} else {

echo "Data gagal disimpan" ;

}



?>

</div>

<div class="container">

<form class="form-horizontal" role="form" action="simpan.php" method="POST">

<div class="form-group">

<label class="col-sm-2">Nama</label>

<div class="col-sm-4">

<input type="text" name="nama" class="form-control" placeholder="Nama Anda">

</div>

</div>

<div class="form-group">

<label class="col-sm-2"> Jenis Kelamin </label>

<div class="col-sm-4">

<select name="jeniskelamin" class="form-control">

<option value="0"class="form-control">

<option value="Laki-laki" class="form-control">Laki-laki

<option value="Perempuan" class="form-control">Perempuan

</select>

</div>

</div>

<div class="form-group">

<label class="col-sm-2">Email</label>

<div class="col-sm-4">

<input type="text" name="email" class="form-control" placeholder="Email Anda">

</div>

</div>

<div class="form-group">

<div class ="col-sm-4">

<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span> Simpan</button>

</div>

</div>

</form>

</div>

<div class="container">

<div class="row">

<div class="col-sm-12">

<hr>

<center> <p>&copy;Copyright Anime Coder 2015 All Right Reserved</p></center>

</div>

</div>

</div>

</body>

</html>

Simpan file nya. kemudian kita coba test untuk memasukkan data nya. Jika berhasil tampilan nya akan seperti ini :

Selanjutnya kita akan membuat file untuk mengupdate dan mendelete data minna. Update dan Delete ini akan mengeksekusi perintah pada anggota.php. perhatikan pada kode :


<td><center><a class="glyphicon glyphicon-pencil" href="edit.php?id=<?php echo $tampil['id_anggota'];?>"> Edit</a> | <a class="glyphicon glyphicon-trash" href="hapus.php?id=<?php echo $tampil['id_anggota'];?>" onclick="return confirm('Apakah Anda yakin akan menghapus?')">Hapus</a></td></center>

nah yang saya pertebal huruf nya yaitu merupakan fungsi untuk memanggil file untuk perintah Update/Edit dan juga yang satu lagi yaitu Delete berdasarkan id_anggota pada record database kita.

pertama kita akan membuat file bernama edit.php, berikut kode nya :

<?php

error_reporting(E_ALL ^ E_DEPRECATED);

include "config/db.php" ;

$id = $_GET['id'] ;

$sql = mysql_query("SELECT * FROM anggota WHERE id_anggota='$id'");

if(mysql_num_rows($sql)== 0){ //jika data tidak ada maka akan dikembalikan ke halaman home

echo '<script>window.history.back()</script>' ;

} else {

//jika data ada maka akan membuat variable $data

$tampil = mysql_fetch_array($sql) ;

?>

<!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>Anime Coder</title>

<!-- Bootstrap -->

<link href="assets/css/bootstrap.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="assets/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2> Simple CRUD BY Anime Coder </h2>

<nav class="navbar navbar-inverse" role="navigation">

<div class="container-fluid">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="index.php"><span class="glyphicon glyphicon-home"></span></a>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li><a href="anggota.php"><span class="glyphicon glyphicon-user"></span> Data Anggota</a></li>

<form class="navbar-form navbar-left" role="search">

<div class="form-group">

<input type="text" class="form-control" placeholder="Search">

</div>

<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span> Cari</button>

</form>

</div><!-- /.navbar-collapse -->

</div><!-- /.container-fluid -->

</nav>

</div>

<div class="container">

<h3>Edit Data Anggota</h3 >

</div>

<div class="container">

<form class="form-horizontal" role="form" action="edit-proses.php" method="POST">

<input type="hidden" name="id" value="<?php echo $tampil['id_anggota']; ?>">

<div class="container">

<form class="form-horizontal" role="form" action="edit-proses.php" method="POST">

<div class="form-group">

<label class="col-sm-2">Nama</label>

<div class="col-sm-4">

<input type="text" name="nama" class="form-control" placeholder="Nama Anda" value="<?php echo $tampil['nama']; ?>">

</div>

</div>

<div class="form-group">

<label class="col-sm-2"> Jenis Kelamin </label>

<div class="col-sm-4">

<select name="jeniskelamin" class="form-control">

<option value="0"class="form-control">

<option value="Laki-laki" class="form-control" <?php if ($tampil['jenis_kelamin'] == 'Laki-laki'){ echo 'selected'; } ?>>Laki-laki

<option value="Perempuan" class="form-control" <?php if ($tampil['jenis_kelamin'] == 'Perempuan'){ echo 'selected'; } ?>>Perempuan

</select>

</div>

</div>

<div class="form-group">

<label class="col-sm-2">Email</label>

<div class="col-sm-4">

<input type="text" name="email" class="form-control" placeholder="Email Anda" value="<?php echo $tampil['email']; ?>">

</div>

</div>

<?php

}

?>

<div class="form-group">

<div class ="col-sm-4">

<button type="submit" class="btn btn-primary" name="ubah"><span class="glyphicon glyphicon-pencil"></span> Ubah</button>

</div>

</div>

</form>

</div>

<div class="container">

<div class="row">

<div class="col-sm-12">

<hr>

<center> <p>&copy;Copyright Anime Coder 2015 All Right Reserved</p></center>

</div>

</div>

</div>

</body>

</html>

kode diatas berfungsi untuk menampilkan data yang kita pilih untuk di Update/Edit.

kemudian kita membuat satu file lagi bernama edit-proses.php untuk mengeksekusi Pengupdate an data. berikut kode nya :

<!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>Anime Coder</title>

<!-- Bootstrap -->

<link href="assets/css/bootstrap.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="assets/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2> Simple CRUD BY Anime Coder </h2>

<nav class="navbar navbar-inverse" role="navigation">

<div class="container-fluid">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="index.php"><span class="glyphicon glyphicon-home"></span></a>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li><a href="anggota.php"><span class="glyphicon glyphicon-user"></span> Data Anggota</a></li>

<form class="navbar-form navbar-left" role="search">

<div class="form-group">

<input type="text" class="form-control" placeholder="Search">

</div>

<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span> Cari</button>

</form>

</div><!-- /.navbar-collapse -->

</div><!-- /.container-fluid -->

</nav>

</div>

<div class="container">

<h3>Edit Data Anggota</h3 >

<?php

include "config/db.php" ;

if (isset($_POST['ubah'])){

error_reporting(E_ALL ^ E_DEPRECATED) ;

$id = $_POST['id'] ;

$nama = $_POST['nama'] ;

$jeniskelamin = $_POST['jeniskelamin'] ;

$email = $_POST['email'] ;



$update = mysql_query ("UPDATE anggota SET nama='$nama',jenis_kelamin='$jeniskelamin',email='$email' WHERE id_anggota='$id'");



if ($update) {



echo "<div class='alert alert-info' role='alert'>Data Berhasil Diubah</div>

<div class='container'>

<form class='form-horizontal' role='form' action='anggota.php' method='POST'>

<button type='submit' class='btn btn-primary'><span class='glyphicon glyphicon-log-out'></span> Kembali</button>

</form>

</div>" ;



} else {



echo "<div class='alert alert-danger' role='alert'>Data Gagal Diubah untuk melihat data klik<a href='anggota.php'> <b>disini</b> </a></div>" ;

}

}

?>

<div class="container">

<div class="row">

<div class="col-sm-12">

<hr>

<center> <p>&copy;Copyright Anime Coder 2015 All Right Reserved</p></center>

</div>

</div>

</div>

</body>

</html>

save file tersebut. kemudian coba di test untuk mengupdate salah satu data, jika berhasil maka akan tampilan nya seperti ini :

and at last but not least kita akan membuat file untuk melakukan perintah delete. Buat file bernama hapus.php. dan masukkan kode berikut ini :


<!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>Anime Coder</title>



<!-- Bootstrap -->

<link href="assets/css/bootstrap.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="assets/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2> Simple CRUD BY Anime Coder </h2>

<nav class="navbar navbar-inverse" role="navigation">

<div class="container-fluid">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="index.php"><span class="glyphicon glyphicon-home"></span></a>

</div>



<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li><a href="anggota.php"><span class="glyphicon glyphicon-user"></span> Data Anggota</a></li>

<form class="navbar-form navbar-left" role="search">

<div class="form-group">

<input type="text" class="form-control" placeholder="Search">

</div>

<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span> Cari</button>

</form>

</div><!-- /.navbar-collapse -->

</div><!-- /.container-fluid -->

</nav>



</div>

<div class="container">

<?php

error_reporting(E_ALL ^ E_DEPRECATED) ;

include ('config/db.php') ;



$id = $_GET['id'] ;



$delete = mysql_query("DELETE FROM anggota WHERE id_anggota='$id'");



if($delete){



echo "<div class='alert alert-info' role='alert'>Data Berhasil Dihapus</div>

<div class='container'>" ;



} else {



echo 'Data Gagal Dihapus ';



}

?>

<form class="form-horizontal" role="form" action="anggota.php" method="POST">

<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-log-out"></span> Kembali</button>

</form>

</div>

<div class="container">

<div class="row">

<div class="col-sm-12">

<hr>

<center> <p>&copy;Copyright Anime Coder 2015 All Right Reserved</p></center>

</div>

</div>

</div>

</body>

</html>

save file nya dan coba delete salah satu data, jika berhasil tampilan nya seperti ini :

Akhirnya selesai sudah tutorial CRUD dengan PHP, kalau minna ingin mendownload seluruh source code nya silahkan bisa di download disini.

Mohon maaf bila ada kesalahan penulisan artikel, kesalahan kata serta tutorial nya, komentar minna sangat saya butuhkan untuk perkembangan yang lebih baik lagi.