Membuat CRUD Pada Pengolahan Data Dalam Aplikasi

Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul
Membuat CRUD pada Pengolahan Data dalam Aplikasi
A. Persiapan
1. Membuat Halaman Dinamis
Setelah selesai membuat login dan logout, maka selanjutnya kita akan mengeksekusi
fitur-fitur lainnya yang ada dalam aplikasi. Untuk tahap pertama kita akan mengerjakan
semua fitur yang ada pada role admin. Pada dasarnya semua fitur yang akan kita kembangkan
dalam keseluruhan aplikasi memiliki kemiripan, oleh karena itu ketika kita sudah
menyelesaikan semua fitur dari sisi admin kita dapat menduplikatnya pada role user lainnya
sesuai pembagian role dan fiturnya. Semua fitur yang nanti akan kita kembangkan tertampil
pada tampilan dashboard dari masing-masing role user. Sebelumnya kita telah memiliki
sebuah tampilan dashboard untuk masing-masing user, kini kita akan melakukan perubahan
pada tampilan dashboard tersebut menjadi lebih dinamis demi memudahkan dalam proses
development.
Membuat halaman dashboard dinamis disini dimaksudkan adalah dengan membagi
komponen tampilan dashboard kita sebelumnya yang hanya 1 komponen yaitu index.php
akan kita bagi menjadi 3 komponen. Pembagian komponen tersebut terdiri dari header.php,
index.php, dan footer.php. Masing-masing dari komponen berisikan sourcode spesifik sesuai
pembagian jobnya. Dalam file header.php akan berisi bagian head dari tampilan yang
merupakan isi dari tampilan menu dan library yang digunakan dalam aplikasi. File index.php
akan berisi bagian utama yaitu main body atau tubuh bisa disebut sebagai konten yang akan
ditampilkan. Selanjutnya, untuk file footer.php akan berisi script javascript untuk
mengeksekusi beberapa fitur yang dimungkinkan dibuat menggunakan js.
Untuk membuat ketiga komponen yang telah disebutkan diatas, langkah yang perlu
dilakukan adalah silakan kalian buka folder admin dalam aplikasi ini. Setelah terbuka,
buatlah 2 buah file baru bernama header.php dan footer.php. Selanjutnya buka file
index.php lalu ikuti instruksi dibawah ini.
Gambar 1. Struktur Project Update
Bukalan file index.php lalu cut sourcecode dari atas hingga bagian syntax head
selesai, lalu paste pada file header.php. Setelah itu save file tersebut. Dengan begini kita
telah memindahkan bagian menu dan library ke file header.php. Silakan lihat keterangan
dibawah untuk detailnya.
<!DOCTYPE html>
<html>
<head>
Bait Syaiful Rijal, M.Pd | 1

<title>Aplikasi LyJo</title>
<link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.css">

<script type="text/javascript" src="../assets/js/jquery.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap.js"></script>


<?php
include '../koneksi.php';
session_start();
if($_SESSION['status'] != "admin_login"){
header("location:../index?alert=belum_login");
}
?>
</head>
<body style="background: #f0f0f0">


<nav class="navbar navbar-inverse" style="border-radius: 0px">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">LyJo</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-

1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php"><i
class="glyphicon glyphicon-home"></i> Dashboard</a></li>
<li><a href=""><i class="glyphicon glyphicon-
user"></i> User</a></li>
<li><a href=""><i class="glyphicon glyphicon-tower"></i>
Outlet</a></li>
<li><a href=""><i class="glyphicon glyphicon-folder-close"></i>
Paket</a></li>
<li><a href=""><i class="glyphicon glyphicon-sunglasses"></i>
Pelanggan</a></li>
<li><a href=""><i class="glyphicon glyphicon-shopping-

cart"></i> Transaksi</a></li>
<li><a href=""><i class="glyphicon glyphicon-usd"></i>
Laporan</a></li>
<li><a href=""><i class="glyphicon glyphicon-eye-open"></i> Ganti
Password</a></li>
<li><a href="logout"><i class="glyphicon glyphicon-
log-out"></i> Log Out</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Halo, Admin !</p></li>
</ul>
</div>
</div>
</nav>


Setelah selesai pada bagian header.php selanjutnya kita akan melakukan perubahan
pada file footer.php. Buka file index lalu cut syntax 2 terbawah pindahkan ke file
footer.php. Sekilas mungkin untuk saat ini terlihat sepele, namun nanti pada saat
pengembangan kita bisa menambahkan syntax js pada bagian footer ini. Silakan perhatikan
pada keterangan dibawah ini.
</body>
</html>
Jika file header dan footer sudah siap, selanjutnya kita menggabungkan 2 file tersebut
pada file index.php yang tersisa. Cara menggabungkannya dengan memanggil kedua file
tersebut menjadi bagian pada file index.php. Untuk melakukan hal tersebut kita bisa
menggunakan fitur include, sebuah syntax dari php untuk memasukan sebuah file lain
kedalam suatu file. Untuk detailnya dapat diperhatikan pada keterangan dibawah.
<?php include 'header.php'; ?>

<div class="container">
<div class="alert alert-info text-center">
<h4 style="margin-bottom: 0px"><b>Selamat datang!</b> di aplikasi Laundry
LyJo. Anda login Sebagai Admin!</h4>
</div>
<div class="panel">
<div class="panel-heading">
<h4>Dashboard</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3">
<div class="panel panel-primary">
<h1>
<i class="glyphicon glyphicon-
user"></i>
<span class="pull-right">
</span>
</h1>
Jumlah Pelanggan
</div>
</div>
</div>
<div class="panel panel-warning">
<h1>
retweet"></i>

</span>
</h1>
Jumlah Cucian Di Proses
</div>
</div>
</div>
<div class="panel panel-info">
<h1>
info-sign"></i>
</span>
</h1>
Jumlah Cucian Siap Ambil
</div>
</div>
</div>
<div class="panel panel-success">
<h1>
ok-circle"></i>
</span>
</h1>
Jumlah Cucian Selesai
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel">
<h4>Riwayat Transaksi Terakhir</h4>
</div>
<table class="table table-bordered table-striped">
<tr>
<th width="1%">No</th>
<th>Invoice</th>
<th>Tanggal</th>
<th>Pelanggan</th>
<th>Berat (Kg)</th>
<th>Tgl. Selesai</th>
<th>Harga</th>
<th>Status</th>
</tr>
</table>
</div>
</div>

</div>
<?php include 'footer.php'; ?>
Setelah kita menggabungkan ketiga file tersebut, maka kita telah berhasil melakukan
perubahan pada halaman dashboard yang kita miliki. Jika sekarang kalian buka file
index.php yang ada pada folder admin, maka sejatinya tidak ada perubahan pada
tampilannya. Perubhaan terjadi pada susunan struktur sourcecode nya saja yang kini lebih
dinamis karena dibagi kedalam 3 file terpisah. Setelah ini, jika kita ingin melakukan
perubahan konten kita cukup mencopykan file index.php saja. Tampilan sourcecode akan
lebih simple karena kita tak perlu melihat pemanggilan script library dan menu berulang kali.
2. Installasi Library Datatables

Pada pengembangan kali ini kita akan menambahkan sebuah library baru bernama
datatables. Library ini membantu kita dalam pembuatan sebuah tabel untuk menampilan
rangkaian data dari database. Dengan menggunakan library ini kita tidak perlu membuat
pagination dan search kedalam tabel data kita. Hal ini dikarenakan fitur tersebut telah
disediakan didalam library dan kita tinggal menggunakannya secara instant.
Langkah instalasi library ini sama dengan ketika kita melakukan instalasi pada jquery
dan bootstrap pada materi sebelumnya. Silakan download library pada classroom, lalu
ekstrak dan pindahkan kedalam folder assests pada project ini. Ketika instalasi sudah
dilakukan, untuk penggunaannya akan kita bahas saat pembuatan CRUD berikutnya.
Gambar 2. Instalasi Library DataTables
Jika file library sudah kita tambahkan didalam folder project kita, langkah selanjutnya
kita memanggil komponen library tersebut kedalam sourcecode project kita. Untuk
melakukan hal tersebut silakan buka pada file header.php lalu tambahkan syntax sebagai
berikut.


<script type="text/javascript" src="../assets/DataTables/datatables.js"></script>
<script type="text/javascript" src="../assets/DataTables/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="../assets/DataTables/datatables.css">

B. Membuat CRUD
CRUD merupakan singkatan dari Create, Read, Update, dan Delete. CRUD adalah
istilah untuk proses menambahkan data ke dalam database, menampilkan data dari database,
mengupdate data di database, dan menghapus data dari database. Sesuai dengan perancangan
database yang telah kita buat pada materi sebelumnya, kita akan melakukan CRUD pada
setiap tabel yang terdapat dalam database. Untuk yang akan kita kerjakan pada materi kali
ini, kita akan mengeksekusi data dari tabel user, pelanggan, outlet, dan paket. Untuk data
pada tabel transaksi akan kita bahas pada materi yang berbeda.
1. Membuat CRUD Data User

Untuk melakukan CRUD pada data user, kita mengacu pada tabel user yang ada
dalam database projek kita. Pastikan kita megikuti rules yang ada dalam tabel user yang
telah dibuat. Jika diperhatikan kita telah memilik sejumlah data didalam tabel user, untuk kita
bisa mulai melakukan pengembangan fitur CRUD untuk data user.
a. Menampilkan Data User dari Database

Coba perhatikan pada link menu user yang terdapat pada file header. Kita akan
membuat menu user tersebut mengarah ke file user.php. Jadi, sekarang kita akan
membuat file bernama user.php didalam folder admin. File ini beriskan perintah untuk
menampilkan data yang ada pada tabel user.
Gambar 3. Membuat user.php dengan dummy dari file index.php
Setelah membuat file user.php, kita bisa menggunakan isi dari file index.php yang ada
dalam folder admin untuk membuat dummy tampilannya. Dari tampilan ini kita akan
melakukan perubahan menyesuaikan data yang akan kita eksekusi yaitu dari data tabel user.
Untuk menampilkan data user dari database kita dapat menggunakan sourcecode dibawah
ini.
<div class="panel">
<h4>Data User</h4>
</div>

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

<tr>
<th>Nama</th>
<th>Username</th>
<th>Level</th>
<th>Outlet</th>
<th width="15%">OPSI</th>
</tr>
<?php
// koneksi database
// mengambil data user dari database

$data = mysqli_query($koneksi,"select * from tb_user");
$no = 1;
// mengubah data ke array dan menampilkannya dengan perulangan
while
while($d=mysqli_fetch_array($data)){
?>
<tr>
<td><?php echo $no++; ?></td>
<td><?php echo $d['user_nama']; ?></td>
<td><?php echo $d['user_username']; ?></td>
<td><?php echo $d['user_level']; ?></td>
<td><?php echo $d['user_outlet']; ?></td>
<td>
<a href="" class="btn btn-sm btn-
info">Edit</a>
<a href="" class="btn btn-sm btn-
danger">Hapus</a>
</td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</div>

Gambar 4. Tampilan data user
Tampilan pada gambar 4 merupakan hasil dari sourcecode yang diterapkan pada
user.php, yaitu sourcecode untuk menampilkan data dari tabel user. Untuk lebih detail
tentang fungsi syntax pada sourcecode tersebut silakan perhatikan pada penjelasan berikut
ini.
<?php
//membuat koneksi database
Koneksi selalu dibutuhkan setiap kali ingin melakukan interaksi pada database,
kenapa yang diakses file koneksi.php?karena didalam file tersebut kita menyimpan data
variable koneksi. Variable koneksi inilah yang selalu menjadi salah satu parameter dalam
mengakses perintah database.

$data = mysqli_query($koneksi,"select * from tb_user");
Perhatikan pada syntax didalam variable $data, format eksekusi sql dengan php 7
memerlukan 2 parameter, yaitu parameter koneksi dan parameter perintah sql yang ingin
dieksekusi. Pada variable ini dimaksudkan untuk membaca seluruh data yang terdapat
didalam tabel user. Untuk melakukan peritah tersebut, maka digunakan syntax select yang
berarti perintah untuk mencari atau membaca, lalu * adalah berarti semua data dan from
tb_user berarti berasal dari nama tabel yang ingin dieksekusi.
// mengubah data ke array dan menampilkannya dengan perulangan while

?>
<tr>
<td><?php echo $d['user_nama']; ?></td>
<td><?php echo $d['user_username']; ?></td>
<td><?php echo $d['user_level']; ?></td>
<td><?php echo $d['user_outlet']; ?></td>
<td>
<a href="" class="btn btn-sm btn-info">Edit</a>
<a href="" class="btn btn-sm btn-danger">Hapus</a>

</td>
</tr>
<?php
}
?>
Untuk menampilkan data, kumpulan value data yang terdapat dalam variable $data
yang telah dideklarasikan sebelumnya dipecah menjadi data array. Data array inilah yang
akan ditampilkan degan metode perulangan. Kenapa memerlukan perulangan?hal ini
dikarenakan jumlah data yang terdapat dalam tabel dimungkinkan lebih dari satu rangkaian
data. Dengan menggunakan perulangan, dapat dilakukan untuk menampilkan semua data
hingga total yang terdapat dalam tabel ditampilkan semua. Hal ini bisa terjadi dikarenakan
juga ketika membuat variable $data sebelumnya, variable tersebut dideklarasikan dengan
mengeksekui sql seluruh data yang ada dalam tabel. Sebagai catatan, dalam menampilkan
data didalam tabel silakan perhatikan urutan penempatan datanya sesuai dengan
bagian head pada tabel.
Setelah memahami penjelasan mengenai menampilkan data dari tabel database diatas,
silakan kembali pada hasil tampilan tabel pada gambar 4. Jika menggunakan sourcecode
yang sekarang kita menampilkan tabel hanya dengan gaya standar menggunakan class dari
bootstrap saja. Jika diperhatikan, sebelumnya kita telah melakukan instalasi datatables pada
materi sebelumnya untuk membantu dalam membuat tampilan tabel. Kali ini, mari lakukan
perubahan pada sourcecode yang telah ada untuk menambahkan penggunaan datatables.
Langkah untuk menggunakan datatables, pertama perlu melakukan deklarasi fungsi
menggunakan javascript guna memanggil fungsi dari datatablesnya. Silakan buka pada file
footer.php lalu tuliskan syntax sebagai berikut.
<script type="text/javascript">
$(document).ready(function(){
$('#table-datatable').DataTable();
});
</script>
Setelah membuat javascriptnya pada file footer.php, selanjutnya panggil function

tersebut pada penggunaan tabel di data user. Buka file user.php lalu update syntax pada
bagian tabel dengan menambahkan syntax hingga menjadi sebagai berikut.
<table class="table table-bordered table-striped table-hover" id="table-datatable">
Pemanggilan function menggunakan syntax id= (nama function), disini nama function
yang dibuat adalah table-datatable. Setelah melakukan update maka tampilan tabel user akan
berubah sebagai berikut.

Gambar 5. Tampilan tabel menggunakan datatables
Perhatikan pada tampilan tabel saat ini, dengan menggunakan library datatables maka
secara otomatis tabel dilengkapi dengan fitur search dan pagination. Penggunaan library
pada pembuatan aplikasi lazim digunakan, sehingga kita bisa memanfaatkan library yang
tentu saja mempermudah pekerjaan kita sebagai programmer. Kalian dibebaskan melakukan
eksplorasi mandiri library lain yang kalian ketahui dan bermanfaat untuk pengembangan
project aplikasi.
b. Menambahkan Data User pada Database

Pada sesi ini akan dilanjutkan pengembangan aplikasi untuk melakukan input atau
penambahan data pada database, khususnya pada data user. Proses penambahan data dikenal
dengan istilah Create, dalam membuat fitur akan dibagi pada 2 proses yaitu membuat
tampilan form tambah data dan membuat file yang berisi algoritma untuk memproses perintah
create data. Silakan ikuti langkah-langkah pada tutorial sebagai berikut.
1) Membuat Tampilan Halaman Tambah User

Sebelum membuat tampilan silakan buka file user.php, lalu buatlah tombol atau
button yang digunakan untuk mengakses halaman tambah user yang akan kita buat
selanjutnya. Pada file user.php tambahkan syntax sebagai berikut.
<a href="user_add" class="btn btn-sm btn-info pull-right">Tambah User</a>
Letakkan syntax tersebut pada bagian atas syntax tabel, sehingga akan kita dapati
hasil tampilan pada bagian user sebagai berikut. Lalu, buatlah sebuah file baru sesuai dengan
nama yang dituju oleh link yaitu user_add.php.

Gambar 6. Update tampilan user dengan tambahan menu tambah user
Setelah membuat link button menuju user_add.php selanjutnya kita akan membuat
tampilan halaman tambah user didalam file tersebut. Silakan kalian tuliskan syntax berikut
kedalam file user_add.php. Untuk pembuatan tampilan siswa dibebaskan melakukan
eksplorasi mandiri.
<br />
<br />
<br />
<div class="col-md-5 col-md-offset-3">
<div class="panel">
<h4>Tambah User Baru</h4>
<a href="user" class="btn btn-warning btn-sm pull-right"><i class="fa fa-
reply"></i> &nbsp
Kembali</a>
</div>
<?php
// koneksi database
// mengambil data outlet dari database

$outlet = mysqli_query($koneksi, "select * from tb_outlet");
?>
<form action="user_addaction" method="post">

<div class="form-group">
<label>Nama User</label>
<input type="text" class="form-control" name="nama"
required="required"
placeholder="Masukkan Nama User ..">
</div>

<label>Username</label>
<input type="text" class="form-control" name="username"
required="required"
placeholder="Masukkan Username ..">
</div>
<label>Password</label>
<input type="password" class="form-control" name="password"
required="required" min="5"
placeholder="Masukkan Password ..">
</div>

<label>Outlet</label>
<select class="form-control" name="outlet"

required="required">
<option disabled selected> -- Pilih Outlet --</option>
<?php while ($d = mysqli_fetch_array($outlet)) { ?>
<option value="<?php echo $d['outlet_id'] ?>"><?php

echo $d['outlet_nama'] ?></option>
<?php } ?>
</select>
</div>


<label>Level</label>
<select class="form-control" name="level"
<option disabled selected> -- Pilih Level --</option>
<option value="admin">Admin</option>
<option value="kasir">Kasir</option>
<option value="owner">Owner</option>
</select>
</div>
<input type="submit" class="btn btn-sm btn-primary"
value="Simpan">
</div>
</form>
</div>
</div>
</div>
</div>

Setelah menuliskan sourcecode diatas maka akan dihasilkan tampilan halaman add
user sebagai berikut.
Gambar 7. Tampilan Halaman User Add
Setelah menyiapkan halaman tambah, selanjutnya adalah menyiapkan file

pemrosesnya. Jika diperhatikan pada sourcecode diatas maka diperlukan file bernama
user_addaction.php untuk melakukan proses input atau create data. Namun, sebelum
membuat file tersebut kita sebaiknya menambahkan alert untuk memberi informasi jika kita
melakukan eksekusi data, yaitu keterangan berhasil menambah data dan lain sebagainya.
Buka file header.php lalu tambahkan syntax sebagai berikut.


<div class="alert text-center">
<?php
if(isset($_GET['alert'])){
if($_GET['alert'] == "create"){
echo "<div class='alert alert-success'>DATA BERHASIL DITAMBAHKAN !</div>";
}else if($_GET['alert'] == "update"){
echo "<div class='alert alert-warning'>DATA BERHASIL DIUPDATE !</div>";
}else if($_GET['alert'] == "delete"){
echo "<div class='alert alert-danger'>DATA BERHASIL DIHAPUS !</div>";
}
}
?>
</div>
</div>
2) Membuat Proses Input Data User

Setelah menyiapkan tampilan dan alert, selanjutnya kita akan menyiapkan file untuk
memproses perintah create atau input data. Pada sesi kali ini akan menggunakan file bernama
user_addaction.php. Buatlah file tersebut lalu tuliskan syntax sebagai berikut.
<?php
//mengambil data dari form user

$nama = $_POST['nama'];
$username = $_POST['username'];
$password = md5($_POST['password']);
$level = $_POST['level'];
$outlet = $_POST['outlet'];
//membuat eksekusi sql untuk memasukan data kedalam database

$adduser="insert into tb_user values
(NULL,'$username','$password','$nama','$level','$outlet')";
mysqli_query($koneksi, $adduser);
//mengarahkan halaman setelah melakukan perintah sql

header("location:user?alert=create");
Pada syntax $adduser berisikan perintah sql untuk create data, rangkaian perintah
tersebut dijadikan sebuah variable bernama $adduser. Dengan demikian kita bisa
mengeksekusi perintah tersebut dengan php menggunakan mysqli_query ($koneksi,
$adduser). Perlu diperhatikan struktur pada variable $adduser, rangkaian data didalam tanda
() merupakan rankaian data yang akan diinputkan kedalam tabel database. Sehingga hal
tersebut perlu kita urutkan sesuai dengan struktur kolom pada tabel yang dituju. Untuk
keterangan NULL, hal ini dikarenakan ketika membuat database sebelumnya untuk kolom
user_id dibuat auto increment dimana dengan begitu data bisa diisikan otomatis oleh sistem
database tanpa memerlukan input dari user.
Gambar 8. Tampilan ketika data user berhasil ditambahkan

c. Melakukan Edit dan Update Data pada Database

Setelah berhasil melakukan insert data, selanjutnya akan ditambahkan fitur yaitu
mengedit data. Sama halnya ketikan mengerjakan fitur tambah data, untuk melakukan
perubahan data digunakan 2 tahap yang akan dikerjakan. Tahap pertama adalah membuat
tampilan untuk edit dan tahap selanjutnya adalah membuat perintah update data dari hasil
edit yang dilakukan.
1) Membuat Tampilan Edit Data User

Sebelum membuat tampilan silakan buka file user.php, lalu buatlah link pada bagian
opsi didalam tabel yang digunakan untuk mengakses halaman edit user yang akan kita buat
selanjutnya. Pada file user.php tambahkan syntax sebagai berikut.
<td>
<a href="user_edit.php?id=<?php echo $d['user_id']; ?>" class="btn btn-sm btn-
info">Edit</a>
<a href="user_delete.php?id=<?php echo $d['user_id']; ?>" class="btn btn-sm btn-
danger">Hapus</a>
</td>
Perhatikan pada syntax diatas, link akan membaca user_id dari user yang diklik saat
memilih user mana yang akan diedit. Hal ini dapat dilakukan karena kita membuat inisialisasi
id pada tombolnya. Dengan begitu link akan menggenerate id sesuai id yang diklik dengan
data user_id pada database. Hal ini diperlukan karena kita membutuhkan primary_key dari
user yang akan kita rubah datanya.
Link yang dibuat menuju ke halaman user_edit dengan membawa kriteria user_id
yang sesuai. Untuk itu kita perlu menyiapkan halaman user_edit untuk menampilkan form
edit dari data user yang ingin dirubah. Silakan bisa dituliskan syntax sebagai berikut.
<div class="panel">
<h4>Edit User</h4>
<a href="user" class="btn btn-warning btn-sm pull-right"><i class="fa fa-
reply"></i> &nbsp
Kembali</a>
</div>
<?php
// koneksi database
?>
<form action="user_update" method="post">

<?php
$id = $_GET['id'];
$data = mysqli_query($koneksi, "select * from tb_user where user_id='$id'");
while($d = mysqli_fetch_array($data)){
?>
<label>Nama User</label>
value="<?php echo $d['user_nama'] ?>"
<input type="hidden" class="form-control" name="id"
value="<?php echo $d['user_id'] ?>"
</div>
<label>Username</label>
<input type="text" class="form-control" name="username"
value="<?php echo $d['user_username'] ?>"
</div>
<label>Password</label>
<input type="password" class="form-control" name="password"
min="5"
placeholder="Kosong Jika tidak ingin di ganti">
<p>Kosong Jika tidak ingin di ganti</p>
</div>

pada database -->
<label>Outlet</label>
<?php while ($l = mysqli_fetch_array($outlet)) { ?>
<option <?php if($d['user_outlet'] == $l['outlet_id'])

{echo "selected='selected'";} ?> value="<?php echo $l['outlet_id'] ?>"><?php echo
$l['outlet_nama'] ?></option>
<?php } ?>
</select>
</div>

<label>Level</label>
<select class="form-control" name="level"

<option value="<?php echo $d['user_level'] ?>"><?php

echo $d['user_level'] ?></option>
<option value="admin">Admin</option>
<option value="kasir">Kasir</option>
<option value="owner">Owner</option>
</select>
</div>
value="Simpan">
</div>
<?php
}
?>
</form>
</div>
</div>
</div>
</div>
Sebagai contoh akan kita coba memilih edit pada user no.4 yang baru saja
ditambahkan, dengan mengklik tombol edit pada bagian opsi user 4 maka kita akan diarahkan
pada tampilan edit sebagai berikut.

Gambar 9. Tampilan Halaman Edit User
Perhatikan pada gambar 9, tampilan pada halaman edit menampilkan data yang sudah
tersimpan sebelumnya mengenai user. Untuk membuat tampilan edit, sebaiknya membaca
dahulu isian form sesuai data yang sudah tersimpan didalam database. Jika diperhatikan pada
syntax diatas, kalian akan menemukan rangkaian syntax yang digunakan untuk menampilkan
data kedalam form edit sesuai dengan kriteria user_id yang dipilih pada opsi.
2) Membuat Proses File Update

Setelah menyiapkan tampilan halaman edit, selanjutnya kita akan menyiapkan file
untuk memproses perintah update data. Pada sesi kali ini akan menggunakan file bernama
user_update.php. Buatlah file tersebut lalu tuliskan syntax sebagai berikut.
<?php
//mengambil data dari form edit

$id = $_POST['id'];
$username = $_POST['username'];
$pwd = $_POST['password'];
$password = md5($_POST['password']);
$level = $_POST['level'];
//membuat proses variabel sql update data tanpa rubah password

$update_pass = "update tb_user set user_nama='$nama',
user_username='$username',user_outlet='$outlet', user_level='$level' where user_id='$id'";

//membuat variabel sql update seluruh data

$update= "update tb_user set user_nama='$nama', user_username='$username',
user_password='$password',user_outlet='$outlet', user_level='$level' where user_id='$id'";
//membuat kondisi untuk update sesuai inputan

if($pwd==""){
mysqli_query($koneksi, $update_pass);
header("location:user?alert=update");
}else {
mysqli_query($koneksi, $update);
header("location:user?alert=update");
}
Perhatikan pada sourcecode diatas, terdapat 2 jenis update yang akan dilakukan
didalam file update.php. Proses pertama jika password tidak ada perubahan, sedangkan
proses lainnya adalah dengan perubahan seluruh data termasuk password. Kenapa hal ini
demikian?karena untuk data password tidak ditampilkan dan menjadi hak dari masing-
masing user, sehingga seharusnya password diganti manual oleh user pada menu yang
terdapat pada masing-masing user. Namun, untuk menghindari masalah dikemudian hari
maka tetap kita tambahkan pada fitur admin. Jika sudah dibuat, silakan ujicoba melakukan
perubahan pada data user yang sudah ada. Sebagai contoh hasil perubahan pada user no.4
sebagai berikut.
Gambar 10. Tampilan ketika berhasil melakukan edit data
d. Menghapus Data User pada Database

Untuk melakukan proses hapus data, sebelumnya kita memerlukan aktivasi link pada
bagian opsi di tabel user. Hal ini telah kita lakukan sebelumnya ketika membuat link untuk
update, silakan cek syntax sebelumnya diatas. Secara prinsip proses delete data sama dengan
update, yaitu diperlukannya data user_id dari data yang ingin dihapus. Setelah diperhatikan
syntax link yang telah dibuat sebelumnya, kita memerlukan file user_delete.php untuk

melakukan proses delete atau hapus data. Silakan buat file user_delete.php lalu tuliskan
syntax sebagai berikut.
<?php
//mengambil data user_id yang akan dihapus

$id = $_GET['id'];
//melakukan perintah sql untuk menghapus data

mysqli_query($koneksi, "delete from tb_user where user_id='$id'");
//mengarahkan kembali ke halaman user

header("location:user?alert=delete");
Gambar 11. Hasil tampilan jika berhasil melakukan delete
Perhatikan pada syntax diatas, jika langsung dicoba setelah menambahkan file
tersebut maka data akan langsung terhapus. Karena itu, kita akan menambahkan sedikit user
experience untuk memudahkan proses hapus data, yaitu tampilan konfirmasi apakah akan
menghapus data atau tidak. Untuk membuat hal tersebut akan digunakan fungsi modal dari
library bootstrap, silakan tambahkan syntax pada file footer.php sebagai berikut.


<div class="modal fade" id="modal_delete">
<div class="modal-dialog">
<div class="modal-content" style="margin-top:100px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
<h4 class="modal-title" style="text-align:center;">Anda yakin akan menghapus data
ini.. ?</h4>
</div>

<div class="modal-footer" style="margin:0px; border-top:0px; text-align:center;">

<a href="#" class="btn btn-danger btn-sm" id="delete_link">Hapus</a>
<button type="button" class="btn btn-success btn-sm" data-
dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>


<script type="text/javascript">
function confirm_modal(delete_url)
{
$('#modal_delete').modal('show', {backdrop: 'static'});
document.getElementById('delete_link').setAttribute('href' , delete_url);
}
</script>
Setelah menambahkan modal pada footer, selanjutnya lakukan perubahan pada

tombol hapus yang ada pada tabel. Tombol hapus akan mengaskes modal terlebih dahulu
baru melakukan proses delete data. Untuk melakukan hal tersebut silakan ubah syntax pada
bagian tombol hapus sebagai berikut.
<a href="#" onClick = "confirm_modal('user_delete.php?id=<?php echo $d['user_id']; ?>');"

class="btn btn-sm btn-danger">Hapus</a>
Gambar 12. Tampilan modal konfirmasi hapus data

Dengan selesainya fitur delete user, maka rangkaian fitur CRUD untuk data user telah
selesai dikerjakan. Untuk fitur CRUD pada data lainnya secara konsep sama, hanya perlu
penyesuaian mengikuti struktur dari tabel database masing-masing data. Silakan pahami
terlebih dahulu setiap langkah yang telah dibahas pada pembuatan CRUD data user, seteleh
itu baru lanjutkan untuk mengerjakan CRUD data lainnya.
2. Membuat CRUD Data Outlet
Setelah menyelesaikan data user, selanjutnya akan kita selesaikan fitur CRUD untuk
data outlet. Secara konsep langakah-langkah yang dilakukan dalam pembuatan CRUD sama

seperti sebelumnya, sehingga pada lanjutan tutorial disini langsung akan merujuk pada teknis
sourcecode nya saja. Untuk pemahaman silakan dibaca lagi dari awal materi sebelumnya.
a. Menampilkan Data Outlet dari Database

Untuk menampilkan data outlet akan digunakan file bernama outlet.php. Silakan buat
file tersebut lalu tuliskan syntax sebagai berikut.
<div class="panel">
<h4>Data Outlet</h4>
</div>
<a href="outlet_add" class="btn btn-sm btn-info pull-right">Tambah Outlet</a>
<br/>
<br/>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover"
id="table-datatable">
<thead>
<tr>
<th>Nama</th>
<th>Alamat</th>
<th>No. Telp</th>
</tr>
</thead>
<tbody>
<?php
// koneksi database

$data = mysqli_query($koneksi,"select * from
tb_outlet");
$no = 1;
// mengubah data ke array dan menampilkannya
dengan perulangan while
?>
<tr>
<td><?php echo
$d['outlet_nama']; ?></td>
<td><?php echo
$d['outlet_alamat']; ?></td>
<td><?php echo
$d['outlet_telp']; ?></td>
<td>

<a href="outlet_edit.php?
id=<?php echo $d['outlet_id']; ?>" class="btn btn-sm btn-info">Edit</a>
<a href="#" onClick =
"confirm_modal('outlet_delete.php?id=<?php echo $d['outlet_id']; ?>');" class="btn btn-sm
btn-danger">Hapus</a>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
Gambar 13. Tampilan Halaman Outlet
b. Menambahkan Data Outlet pada Database

Langkah untuk membuat fitur menambahkan data sama dengan saat membuat pada
data user. Ada 2 tahap yang akan dilakukan, yaitu membuat tampilan form input dan
membuat algoritma berisi perintah sql untuk menginput data. Silakan ikuti tahapan sebagai
berikut.
1) Membuat Tampilan Halaman Tambah Outlet

Untuk membuat tampilan tambah akan menggunakan file outlet_add.php. Silakan
buat file dengan nama tersebut lalu tuliskan syntax sebagai berikut.
<div class="panel">
<h4>Tambah Outlet Baru</h4>

<a href="outlet" class="btn btn-warning btn-sm pull-right"><i class="fa fa-

reply"></i> &nbsp
Kembali</a>
</div>
<form action="outlet_addAction" method="post">

<label>Nama Outlet</label>
required="required"
placeholder="Masukkan Nama Outlet ..">
</div>
<label>Alamat</label>
<input type="text" class="form-control" name="alamat"
required="required"
placeholder="Masukkan alamat ..">
</div>
<label>No. Telephone</label>
<input type="number" class="form-control" name="telp"
required="required"
placeholder="Masukkan No Telephone ..">
</div>
value="Simpan">
</div>
</form>
</div>
</div>
</div>
</div>

Gambar 14. Tampilan Halaman Outlet Add
2) Membuat Proses Input Data Outlet

Proes input data outlet akan dieksekusi oleh file outlet_addAction.php. Silakan buat
file tersebut lebih dahulu lalu tuliskan syntax sebagai berikut.
<?php
//memanggil data koneksi
//mengambil data dari form user

$alamat = $_POST['alamat'];
$telp = $_POST['telp'];
//membuat eksekusi sql untuk memasukan data kedalam database

$addoutlet = "insert into tb_outlet values (NULL, '$nama','$alamat','$telp')";
mysqli_query($koneksi, $addoutlet);
//mengarahkan halaman setelah melakukan perintah sql

header("location:outlet?alert=create");
Jika sudah selesai, silahkan lakukan ujicoba untuk menambahkan data outlet.
Perhatikan setiap pekerjaan yang dilakukan dan pahami untuk meningkatkan pengetahuan
serta ketrampilan.
c. Melakukan Edit dan Update Data Outlet pada Database

mengedit data. Sama halnya ketika mengerjakan fitur tambah data, untuk melakukan

1) Membuat Tampilan Halaman Outlet Edit

Untuk melakukan edit pada data outlet akan dibuat dalam file outlet_edit.php. Silakan
buat file tersebut lalu tuliskan syntax sebagai berikut.
<div class="panel">
<h4>Edit Outlet</h4>
<a href="outlet" class="btn btn-warning btn-sm pull-right"><i class="fa fa-
reply"></i> &nbsp
Kembali</a>
</div>
<?php
// koneksi database
?>
<form action="outlet_update" method="post">

<?php
$id = $_GET['id'];
$data = mysqli_query($koneksi, "select * from tb_outlet where
outlet_id='$id'");
?>
value="<?php echo $d['outlet_nama'] ?>"
value="<?php echo $d['outlet_id'] ?>"
</div>
value="<?php echo $d['outlet_alamat'] ?>"
</div>

<label>Telephone</label>
value="<?php echo $d['outlet_telp'] ?>"
</div>
value="Simpan">
</div>
<?php
}
?>
</form>
</div>
</div>
</div>
</div>
Gambar 15. Tampilan Halaman Edit Outlet
2) Membuat Proses Update Data Outlet

Untuk melakukan proses update akan dieksekusi didalam file outlet_update.php.

Silakan buat file tersebut, lalu tuliskan syntax sebagai berikut.
<?php
//mengambil data dari halaman edit

$id = $_POST['id'];
//membuat perintah sql melakukan update pada tabel outlet

$update_outlet = "update tb_outlet set outlet_nama='$nama', outlet_alamat='$alamat',
outlet_telp='$telp' where outlet_id='$id'";
mysqli_query($koneksi, $update_outlet);
//mengarahkan kembali ke halaman outlet

header("location:outlet?alert=update");
Jika sudah selesai dalam menerapkannya, silakan lakukan ujicoba untuk melakukan
edit pada data outlet. Jika telah berhasil, jangan lupa untuk memperhatikan sourcecodenya
untuk meningkatkan pemahaman.
d. Membuat Hapus Data Outlet

Buatlah file bernama outlet_delete.php lalu tuliskan syntax sebagai berikut.
<?php
//mengambil data outlet_id yang akan dihapus

$id = $_GET['id'];

mysqli_query($koneksi, "delete from tb_outlet where outlet_id='$id'");

header("location:outlet?alert=delete");
3. Membuat CRUD Data Paket

Setelah menyelesaikan data outlet, selanjutnya akan kita selesaikan fitur CRUD untuk
data paket. Secara konsep langkah-langkah yang dilakukan dalam pembuatan CRUD sama
seperti sebelumnya, sehingga pada lanjutan tutorial disini langsung akan merujuk pada teknis
sourcecode nya saja. Untuk pemahaman silakan dibaca lagi dari awal materi sebelumnya.
a. Menampilkan Data Paket dari Database

Untuk menampilkan data paket akan digunakan file bernama paket.php. Silakan buat
file tersebut lalu tuliskan syntax sebagai berikut.

<div class="panel">
<h4>Data Paket</h4>
</div>
<a href="paket_add" class="btn btn-sm btn-info pull-right">Tambah Paket</a>
<br/>
<br/>
<table class="table table-bordered table-striped table-hover"
id="table-datatable">
<thead>
<tr>
<th>Nama Outlet</th>
<th>Jenis</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<?php
// koneksi database
// mengambil data paket dari database

menggabungkan dengan tabel outlet
$sql_paket = "SELECT * FROM tb_outlet, tb_paket where
tb_outlet.outlet_id=tb_paket.paket_outlet";
$data = mysqli_query($koneksi,$sql_paket);
$no = 1;
// mengubah data ke array dan menampilkannya
dengan perulangan while
?>
<tr>
<td><?php echo
$d['outlet_nama']; ?></td>
<td><?php echo
$d['paket_jenis']; ?></td>
<td><?php echo
$d['paket_harga']; ?></td>
<td>
<a href="paket_edit.php?
id=<?php echo $d['paket_id']; ?>" class="btn btn-sm btn-info">Edit</a>
"confirm_modal('paket_delete.php?id=<?php echo $d['paket_id']; ?>');" class="btn btn-sm
btn-danger">Hapus</a>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>

Gambar 16. Tampilan Halaman Paket
b. Menambahkan Data Paket pada Database

data outlet. Ada 2 tahap yang akan dilakukan, yaitu membuat tampilan form input dan
berikut.
1) Membuat Tampilan Halaman Tambah Paket

Untuk membuat tampilan tambah akan menggunakan file paket_add.php. Silakan
buat file dengan nama tersebut lalu tuliskan syntax sebagai berikut.
<br />
<br />
<br />
<div class="panel">
<h4>Tambah Paket Baru</h4>
<a href="paket" class="btn btn-warning btn-sm pull-right"><i class="fa fa-
reply"></i> &nbsp
Kembali</a>
</div>
<?php
// koneksi database

?>
<form action="paket_addAction" method="post">

pada database -->



<?php } ?>
</select>
</div>

<label>Jenis Paket</label>
<select class="form-control" name="jenis"
<option disabled selected> -- Pilih Jenis Paket
--</option>
<option value="reguler">Reguler</option>
<option value="kilat">Kilat</option>
</select>
</div>
<label>Harga</label>
<input type="number" class="form-control" name="harga"
required="required"
placeholder="Masukkan Harga Paket ..">
</div>
value="Simpan">
</div>
</form>
</div>
</div>
</div>
</div>

Gambar 17. Tampilan Halaman Paket Add
2) Membuat Proses Input Data Paket

Proses input data paket akan dieksekusi oleh file paket_addAction.php. Silakan buat
file tersebut lebih dahulu lalu tuliskan syntax sebagai berikut.
<?php
//mengambil data dari form tambah paket

$jenis = $_POST['jenis'];
$harga = $_POST['harga'];
//melakukan perintah sql input data paket

mysqli_query($koneksi, "insert into tb_paket values (NULL, '$outlet','$harga','$jenis')");
//mengarahkan kehalaman paket dengan pesan berhasil menambahkan data

header("location:paket?alert=create");
Jika sudah selesai, silahkan lakukan ujicoba untuk menambahkan data paket.
serta ketrampilan.
c. Melakukan Edit dan Update Data Paket pada Database

mengedit data. Sama halnya ketikan mengerjakan fitur tambah data, untuk melakukan

1) Membuat Tampilan Halaman Paket Edit

Untuk melakukan edit pada data paket akan dibuat dalam file paket_edit.php. Silakan
buat file tersebut lalu tuliskan syntax sebagai berikut.
<div class="panel">
<h4>Edit Paket</h4>
<a href="paket" class="btn btn-warning btn-sm pull-right"><i class="fa fa-
reply"></i> &nbsp
Kembali</a>
</div>
<?php
// koneksi database
?>
<form action="paket_update" method="post">

<?php
$id = $_GET['id'];
$data = mysqli_query($koneksi, "select * from tb_paket where
paket_id='$id'");
?>
<option <?php if($d['paket_outlet'] == $l['outlet_id'])

{echo "selected='selected'";} ?>
value="<?php echo $l['outlet_id'] ?>"><?php echo
<?php } ?>
</select>
value="<?php echo $d['paket_id'] ?>"

</div>

<label>Jenis Paket</label>
<option value="<?php echo $d['paket_jenis'] ?>"><?php
echo $d['paket_jenis'] ?></option>
<option value="kilat">Kilat</option>
</select>
</div>
<label>Harga</label>
<input type="number" class="form-control" name="harga"
value="<?php echo $d['paket_harga'] ?>"
</div>
value="Simpan">
</div>
<?php
}
?>
</form>
</div>
</div>
</div>
</div>

Gambar 18. Tampilan Halaman Paket Edit
2) Membuat Proses Update Data Paket

Untuk melakukan proses update akan dieksekusi didalam file paket_update.php.
<?php
//mengambil data dari halaman paket edit

$id = $_POST['id'];
$harga = $_POST['harga'];
//melakukan perintah sql untuk update data paket

$update_paket = "update tb_paket set paket_outlet='$outlet', paket_jenis='$jenis',
paket_harga='$harga' where paket_id='$id'";
mysqli_query($koneksi, $update_paket);
//mengarahkan kehalaman paket dengan pesan berhasil update

header("location:paket?alert=update");
edit pada data paket. Jika telah berhasil, jangan lupa untuk memperhatikan sourcecodenya
untuk meningkatkan pemahaman.

d. Membuat Hapus Data Paket

Buatlah file bernama paket_delete.php lalu tuliskan syntax sebagai berikut.
<?php
//mengambil data paket_id yang akan dihapus

$id = $_GET['id'];

mysqli_query($koneksi, "delete from tb_paket where paket_id='$id'");

header("location:paket?alert=delete");
4. Membuat CRUD Data Pelanggan

Setelah menyelesaikan data paket, selanjutnya akan kita selesaikan fitur CRUD untuk
data pelanggan. Secara konsep langkah-langkah yang dilakukan dalam pembuatan CRUD
sama seperti sebelumnya, sehingga pada lanjutan tutorial disini langsung akan merujuk pada
teknis sourcecode nya saja. Untuk pemahaman silakan dibaca lagi dari awal materi
sebelumnya.
a. Menampilkan Data Pelanggan dari Database

Untuk menampilkan data pelanggan akan digunakan file bernama pelanggan.php.
Silakan buat file tersebut lalu tuliskan syntax sebagai berikut.
<div class="panel">
<h4>Data Pelanggan</h4>
</div>
<a href="pelanggan_add" class="btn btn-sm btn-info pull-right">Tambah Pelanggan</a>
<br/>
<br/>
<table class="table table-bordered table-striped table-hover" id="table-
datatable">
<thead>
<tr>
<th>Nama Pelanggan</th>
<th>Alamat</th>
<th>No. Telp</th>
<th>Nama Outlet</th>
<th>Jenis Pelanggan</th>
</tr>
</thead>
<tbody>
<?php

// koneksi database
// mengambil data pelanggan dari database menggabungkan dengan

tabel outlet
$sql_pelanggan = "SELECT * FROM tb_outlet, tb_pelanggan where
tb_outlet.outlet_id=tb_pelanggan.pelanggan_outlet";
$data = mysqli_query($koneksi,$sql_pelanggan);
$no = 1;
// mengubah data ke array dan menampilkannya dengan perulangan
while
?>
<tr>
<td><?php echo $d['pelanggan_nama']; ?></td>
<td><?php echo $d['pelanggan_alamat']; ?></td>
<td><?php echo $d['pelanggan_telp']; ?></td>
<td><?php echo $d['outlet_nama']; ?></td>
<td><?php echo $d['pelanggan_jenis']; ?></td>
<td>
<a href="pelanggan_edit.php?id=<?php echo
$d['pelanggan_id']; ?>" class="btn btn-sm btn-info">Edit</a>
"confirm_modal('pelanggan_delete.php?id=<?php echo $d['pelanggan_id']; ?>');" class="btn
btn-sm btn-danger">Hapus</a>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
Gambar 19. Tampilan Halaman Pelanggan
b. Menambahkan Data Pelanggan pada Database

data paket. Ada 2 tahap yang akan dilakukan, yaitu membuat tampilan form input dan
berikut.

1) Membuat Tampilan Halaman Tambah Pelanggan

Untuk membuat tampilan tambah akan menggunakan file pelanggan_add.php.
Silakan buat file dengan nama tersebut lalu tuliskan syntax sebagai berikut.
<div class="panel">
<h4>Tambah Pelanggan Baru</h4>
<a href="pelanggan" class="btn btn-warning btn-sm pull-right"><i class="fa
fa-reply"></i> &nbsp
Kembali</a>
</div>
<?php
// koneksi database

?>
<form action="pelanggan_addAction" method="post">
<label>Nama Pelanggan</label>
required="required"
placeholder="Masukkan Nama Pelanggan ..">
</div>
required="required"
placeholder="Masukkan alamat ..">
</div>
required="required"
placeholder="Masukkan No Telephone ..">
</div>

pada database -->



<?php } ?>
</select>
</div>

<label>Jenis Pelanggan</label>
<option disabled selected> -- Pilih Jenis Pelanggan
--</option>
<option value="member">Member</option>
</select>
</div>
value="Simpan">
</div>
</form>
</div>
</div>
</div>
</div>
Gambar 20. Tampilan Halaman Pelanggan Add

2) Membuat Proses Input Data Pelanggan

Proses input data pelanggan akan dieksekusi oleh file pelanggan_addAction.php.
Silakan buat file tersebut lebih dahulu lalu tuliskan syntax sebagai berikut.
<?php
//mengambil data dari form pelanggan add

//melakukan perintah sgl input pada tabel pelanggan

mysqli_query($koneksi, "insert into tb_pelanggan values (NULL,
'$nama','$alamat','$telp','$outlet','$jenis')");
//mengarahkan kembali pada halaman pelanggan dengan pesan data berhasil ditambahkan
header("location:pelanggan?alert=create");
Jika sudah selesai, silahkan lakukan ujicoba untuk menambahkan data pelanggan.
serta ketrampilan.
c. Melakukan Edit dan Update Data Pelanggan pada Database

mengedit data. Sama halnya ketika mengerjakan fitur tambah data, untuk melakukan
1) Membuat Tampilan Halaman Pelanggan Edit

Untuk melakukan edit pada data pelanggan akan dibuat dalam file
pelanggan_edit.php. Silakan buat file tersebut lalu tuliskan syntax sebagai berikut.
<div class="panel">
<h4>Edit Pelanggan</h4>
<a href="pelanggan" class="btn btn-warning btn-sm pull-right"><i class="fa
fa-reply"></i> &nbsp
Kembali</a>

</div>
<?php
// koneksi database
?>
<form action="pelanggan_update" method="post">

<?php
$id = $_GET['id'];
$data = mysqli_query($koneksi, "select * from tb_pelanggan where
pelanggan_id='$id'");
?>
<label>Nama Pelanggan</label>
value="<?php echo $d['pelanggan_nama'] ?>"
value="<?php echo $d['pelanggan_id'] ?>"
</div>
value="<?php echo $d['pelanggan_alamat'] ?>"
</div>
value="<?php echo $d['pelanggan_telp'] ?>"
</div>
<option <?php if($d['pelanggan_outlet'] ==

$l['outlet_id']){echo "selected='selected'";} ?>
value="<?php echo $l['outlet_id'] ?>"><?php echo
<?php } ?>
</select>
</div>


<label>Jenis Pelanggan</label>
<option value="<?php echo $d['pelanggan_jenis'] ?>"><?
php echo $d['pelanggan_jenis'] ?></option>
<option value="member">Member</option>
</select>
</div>
value="Simpan">
</div>
<?php
}
?>
</form>
</div>
</div>
</div>
</div>

Gambar 21. Tampilan Halaman Pelanggan Edit

2) Membuat Proses Update Data Pelanggan
Untuk melakukan proses update akan dieksekusi didalam file pelanggan_update.php.
<?php
//mengambil data dari form edit pelanggan

$id = $_POST['id'];
//melakukan perintah sql update data tabel pelanggan

$update_pelanggan = "update tb_pelanggan set pelanggan_nama='$nama',
pelanggan_alamat='$alamat', pelanggan_telp='$telp',
pelanggan_outlet='$outlet', pelanggan_jenis='$jenis' where pelanggan_id='$id'";
mysqli_query($koneksi, $update_pelanggan);
//mengarahkan kehalaman pelanggan dengan pesan berhasil edit data

header("location:pelanggan?alert=update");
edit pada data pelanggan. Jika telah berhasil, jangan lupa untuk memperhatikan
sourcecodenya untuk meningkatkan pemahaman.

d. Membuat Hapus Data Pelanggan

Buatlah file bernama pelanggan_delete.php lalu tuliskan syntax sebagai berikut.
<?php
//mengambil data pelanggan_id yang akan dihapus

$id = $_GET['id'];

mysqli_query($koneksi, "delete from tb_pelanggan where pelanggan_id='$id'");
//mengarahkan kembali ke halaman pelanggan

header("location:pelanggan?alert=delete");
Setelah menyelesaikan CRUD data pelanggan, maka materi CRUD dalam modul kali
ini telah berakhir. Untuk fitur CRUD data transaksi akan dibuat dalam modul terpisah yang
secara khusus membahas segala sesuatu yang dilakukan dalam data transaksi. Ketika kalian
telah menyelesaikan materi dari modul ini, itu berarti project webapps kita bisa dikatakan
telah selesai 50%. Selanjutnya akan diberikan materi tambahan dalam kasus CRUD yaitu
tentang membuat fitur ganti password bagi user, silakan kalian simak materi selanjutnya.
C. Membuat Fitur Ganti Password

Untuk membuat fitur ganti password bagi user, secara konsep kita akan
memanfaatkan teknik update data. Data yang diupdate adalah data mengenai password dari
user. Data tersebut tersimpan didalam tabel user. Untuk melakukan update, kita memerlukan
2 buah data sebagai parameter. Data pertama adalah inputan password baru lalu data kedua
adalah data user_id yang ingin diubah.
Cara mendapatkan data pertama, berarti kita memerlukan sebuah tampilan form untuk
merecord data inputan password yang baru. Untuk hal ini, kita akan membuat sebuah file
baru bernama password.php. Setelah file dibuat, pastikan kalian telah menglink kan file
tersebut pada bagian header.php pada menu ganti password. Jika sudah dilakukan, silakan
kalian dapat menuliskan syntax kedalam file tersebut sebagai berikut.
<br/>
<br/>
<br/>
<?php
if(isset($_GET['alert'])){
if($_GET['alert'] == "password"){
echo "<div class='alert alert-success'>Password telah diganti!
</div>";
}

}
?>
<div class="panel">
<h4>Ganti Password</h4>
</div>
<form method="post" action="password_update">

<label>Masukkan Password Baru</label>
<input type="password" class="form-control"
name="password_baru" placeholder="Masukkan Password Baru Anda ..">
</div>
<br/>
<input type="submit" class="btn btn-primary"

value="Ganti Password">
</form>
</div>
</div>
</div>
</div>
Gambar 22. Tampilan Halaman Ganti Password

Jika sudah membuat tampilan form untuk mendapatkan data password baru,
selanjutnya buat file password_update.php untuk melakukan eksekusi perintah sql update
data password. Silakan buat file tersebut terlebih dahulu lalu tuliskan syntax sebagai berikut.
<?php
//mengambil data user_id dari session

session_start();
$id = $_SESSION['id'];
$password = md5($_POST['password_baru']);
mysqli_query($koneksi, "UPDATE tb_user SET user_password='$password' WHERE

user_id='$id'")or die(mysqli_errno());
header("location:password?alert=password");
Perhatikan syntax diatas, sesuai dengan penjelasan sebelumnya bahwa kita

memerlukan 2 buah parameter data untuk melakukan update password. Data parameter
pertama berupa inputan password baru telah didapatkan melalui form inputan. Sedangkan
untuk data id, kita menggunakan perintah session untuk mendapatkannya. Jika kalian ingat
saat pertama membuat fitur login, kita telah memecah data user dan menyimpan masing-
masing datanya didalam session. Saat ini, silakan untuk mencoba mengganti password. Jika
sudah berhasil maka materi penutup kali sudah selesai dan bisa melanjutkan ke materi
selanjutnya.
__ Selamat Belajar dan Berkarya __

Membuat CRUD Pada Pengolahan Data Dalam Aplikasi

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat CRUD Pada Pengolahan Data Dalam Aplikasi

Diunggah oleh

Hak Cipta:

Format Tersedia

Pemrogaman WEB dan Perangkat Bergerak | SMK N 1 Bantul

Membuat CRUD pada Pengolahan Data dalam Aplikasi

Gambar 1. Struktur Project Update

Bait Syaiful Rijal, M.Pd | 1

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

<body style="background: #f0f0f0">

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

<li><a href=""><i class="glyphicon glyphicon-shopping-

Bait Syaiful Rijal, M.Pd | 2

<?php include 'header.php'; ?>

Bait Syaiful Rijal, M.Pd | 3

Bait Syaiful Rijal, M.Pd | 4

<?php include 'footer.php'; ?>

2. Installasi Library Datatables

Gambar 2. Instalasi Library DataTables

Bait Syaiful Rijal, M.Pd | 5

1. Membuat CRUD Data User

a. Menampilkan Data User dari Database

Gambar 3. Membuat user.php dengan dummy dari file index.php

<?php include 'header.php'; ?>

Bait Syaiful Rijal, M.Pd | 6

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

// mengambil data user dari database

<?php include 'footer.php'; ?>

Bait Syaiful Rijal, M.Pd | 7

Gambar 4. Tampilan data user

// mengambil data user dari database

// mengubah data ke array dan menampilkannya dengan perulangan while

Bait Syaiful Rijal, M.Pd | 8

Setelah membuat javascriptnya pada file footer.php, selanjutnya panggil function

<table class="table table-bordered table-striped table-hover" id="table-datatable">

Bait Syaiful Rijal, M.Pd | 9

Gambar 5. Tampilan tabel menggunakan datatables

b. Menambahkan Data User pada Database

1) Membuat Tampilan Halaman Tambah User

<a href="user_add" class="btn btn-sm btn-info pull-right">Tambah User</a>

Bait Syaiful Rijal, M.Pd | 10

Gambar 6. Update tampilan user dengan tambahan menu tambah user

<?php include 'header.php'; ?>

// mengambil data outlet dari database

<form action="user_addaction" method="post">

Bait Syaiful Rijal, M.Pd | 11

<!-- Membuat inputan menggunakan option inputan sesuai data

<select class="form-control" name="outlet"

<option disabled selected> -- Pilih Outlet --</option>

<?php while ($d = mysqli_fetch_array($outlet)) { ?>

<option value="<?php echo $d['outlet_id'] ?>"><?php

<?php include 'footer.php'; ?>

Bait Syaiful Rijal, M.Pd | 12

Gambar 7. Tampilan Halaman User Add

Setelah menyiapkan halaman tambah, selanjutnya adalah menyiapkan file

2) Membuat Proses Input Data User

Bait Syaiful Rijal, M.Pd | 13

//mengambil data dari form user

//membuat eksekusi sql untuk memasukan data kedalam database

//mengarahkan halaman setelah melakukan perintah sql

Gambar 8. Tampilan ketika data user berhasil ditambahkan

Bait Syaiful Rijal, M.Pd | 14

c. Melakukan Edit dan Update Data pada Database