CRUD (Create, Read, Update, Delete) pada PHP dan MySQLi – Part 1 Menampilkan Data

January 18, 2019

5 Comments

CRUD (Create, Read, Update, Delete) pada PHP dan MySQLi – Part 1 Cara Menampilkan Data pada PHP & MySQL – Hai sobat ketemu lagi dengan saya dewan komputer dan setelah sekian lama saya memposting tentang cara membuat QRCode Generator selanjutnya saya akan membahas cara membuat CRUD menggunakan bahasa pemrograman PHP. Pada postingan kali ini saya akan membuat menggunakan perintah mysqli_querykarena tentunya mysql_query sudah tidak direkomendasikan lagi. Namun entah kenapa masih saja banyak yang menggunakannya karena berdasarkan pengalaman saya aplikasi itu tidak akan pernah bisa lulus SECURITY TEST karena membuat aplikasi tidaklah asal jadi saja tentunya juga memikirkan masalah security karena itu adalah hal yang paling penting apalagi jika aplikasi tersebut adalah aplikasi online yang bisa semua orang mengaksesnya walaupun hanya menu login saja tetapi itu masih rentan juga. Dan untuk metodenya saya menggunakan cara Object Oriented. Jika sobat belum tahu perbedaan Object Oriented dan Procedural maka sobat bisa lihat pada postingan dibawah ini.

Cara Membuat Koneksi dengan Database MySQL menggunakan PHP

Sekali lagi saya sarankan jika sobat sudah terlanjur membuat aplikasi membuat mysql_query maka ubahlah menjadi mysqli_query atau PDO karena cara itu sudahlah tidak aman. Dan untuk langkah untuk mengeksekusi querynya menggunakan prepare statement dan bind param. Seperti apakah itu nanti akan saya jelaskan pada tutorial dibawah.

Membuat Database MySQL

1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.

2. Buat tabel untuk mengetes nantinya apakah benar-benar terkoneksi atau belum dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go

CREATE TABLE `tbl_mahasiswa` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `nama_mahasiswa` varchar(255) NOT NULL,
  `alamat` text NOT NULL,
  `jenis_kelamin` varchar(255) NOT NULL,
  `tgl_masuk` date NOT NULL,
  `jurusan` varchar(255) NOT NULL
)

CREATE TABLE `tbl_mahasiswa` (

`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,

`nama_mahasiswa` varchar(255) NOT NULL,

`alamat` text NOT NULL,

`jenis_kelamin` varchar(255) NOT NULL,

`tgl_masuk` date NOT NULL,

`jurusan` varchar(255) NOT NULL

)

3. Isikan data pada tbl_mahasiswa dengan mengetikkan query dibawah ini

INSERT INTO `tbl_mahasiswa` (`id`, `nama_mahasiswa`, `alamat`, `jenis_kelamin`, `tgl_masuk`, `jurusan`) VALUES
(1, 'Dewan Komputer', 'Cilacap', 'Laki-laki', '2019-01-01', 'Sistem Infomasi'),
(2, 'Sule', 'Jakarta', 'Laki-laki', '2019-01-01', 'Teknik Informatika'),
(3, 'Maemunah', 'Yogyakarta', 'Perempuan', '2019-01-01', 'Sistem Infomasi'),
(4, 'Siti ED', 'Semarang', 'Perempuan', '2019-01-01', 'Teknik Informatika'),
(5, 'Andre', 'Purwokerto', 'Laki-laki', '2019-01-01', 'Sistem Infomasi'),
(6, 'Tukul Arwana', 'Surabaya', 'Laki-laki', '2019-01-01', 'Sistem Infomasi');

INSERT INTO `tbl_mahasiswa` (`id`, `nama_mahasiswa`, `alamat`, `jenis_kelamin`, `tgl_masuk`, `jurusan`) VALUES

(1, 'Dewan Komputer', 'Cilacap', 'Laki-laki', '2019-01-01', 'Sistem Infomasi'),

(2, 'Sule', 'Jakarta', 'Laki-laki', '2019-01-01', 'Teknik Informatika'),

(3, 'Maemunah', 'Yogyakarta', 'Perempuan', '2019-01-01', 'Sistem Infomasi'),

(4, 'Siti ED', 'Semarang', 'Perempuan', '2019-01-01', 'Teknik Informatika'),

(5, 'Andre', 'Purwokerto', 'Laki-laki', '2019-01-01', 'Sistem Infomasi'),

(6, 'Tukul Arwana', 'Surabaya', 'Laki-laki', '2019-01-01', 'Sistem Infomasi');

Menampilkan Data dari Database MySQL ke DataTables pada PHP

Cara pada tutorial kali ini akan saya buat beberapa part karena cukup panjang jika dijadikan menjadi satu. Untuk pembuatannya juga merupakan crud paling sederhana atau dasar pada PHP. Untuk mempercantik tampilan saya menggunakan bootstrap 4 dan datatable karena jika menggunakan datatable kita tidak perlu repot-repot membuat pagination lagi. Langsung saja caranya yaitu :

1. Pertama buatlah folder pada htdocs, pada contoh saya beri nama folder dewan-crud.

2. Buatlah file koneksi.php pada folder project sobat dan isikan dengan script dibawah

<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'db_dewankomputer');

// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
?>

<?php

define('HOST','localhost');

define('USER','root');

define('PASS','');

define('DB1', 'db_dewankomputer');

// Buat Koneksinya

$db1 = new mysqli(HOST, USER, PASS, DB1);

isikan sesuai dengan host, user, password, dan nama database sobat. Untuk contoh di bawah ini saya berinama database dengan nama db_dewankomputer.

Jika sobat ingin tahu cara mengkoneksikan dengan dua database atau lebih dalam satu aplikasi maka sobat bisa kunjungi postingan dibawah ini

Cara Membuat Koneksi dengan Database MySQL bisa Dua atau Lebih Koneksi database/Multiple Connection dalam Satu Host maupun beda Host Menggunakan PHP – Part 3

3. Buatlah file index.php pada folder sobat dan isikan dengan script dibawah ini

Pada tag <head>

<!-- Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!-- Datatable -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">

Bootstrap digunakan untuk mempercantik tampilan dan juga tombol. Fontawesome digunakan untuk menampilkan logo pada tombol dan datatable digunakan untuk mempercantik tampilan tabel dan membuat search, pagination, kolom warna warni dll.

Pada tag <body> bagian bawah isikan

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- DataTable -->
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
	$('#example').DataTable();
   } );
</script>

$(document).ready(function() {

$('#example').DataTable();

} );

</script>

Karena ini hanya demo maka saya menggunakan css dan js online. Jika untuk kepentingan development disarankan untuk mendownload terlebih dahulu pluginnya.

Pada tag <body>

<a href="tambah_data.php">
    <button style="margin-bottom: 20px;" class="btn btn-primary"> <i class="fa fa-plus"></i> Tambah Data </button>
</a>
<table id="example" class="table table-striped table-bordered" style="width:100%">
	<thead>
		<tr>
			<td>No</td>
			<td>Nama Mahasiswa</td>
			<td>Alamat</td>
			<td>Jenis Kelamin</td>
			<td>Tanggal Masuk</td>
			<td>Action</td>
		</tr>
	</thead>
	<tbody>
		<?php
	        $no = 1;
	        $query = "SELECT * FROM tbl_mahasiswa ORDER BY nama_mahasiswa ASC";
	        $dewan1 = $db1->prepare($query);
	        $dewan1->execute();
	        $res1 = $dewan1->get_result();

	        if ($res1->num_rows > 0) {
		        while ($row = $res1->fetch_assoc()) {
		        	$id = $row['id'];
		            $nama_mahasiswa = $row['nama_mahasiswa'];
		            $alamat = $row['alamat'];
		            $jenis_kelamin = $row['jenis_kelamin'];
		            $tgl_masuk = $row['tgl_masuk'];
		?>
			<tr>
				<td><?php echo $no++; ?></td>
				<td><?php echo $nama_mahasiswa; ?></td>
				<td><?php echo $alamat; ?></td>
				<td><?php echo $jenis_kelamin; ?></td>
				<td><?php echo $tgl_masuk; ?></td>
				<td>
					<a href="edit_data.php?<?php echo base64_encode($id) ?>">
						<button class="btn btn-success btn-sm"> <i class="fa fa-edit"></i> Edit </button>
					</a>
					<a href="hapus_data.php?<?php echo base64_encode($id) ?>">
						<button class="btn btn-danger btn-sm"> <i class="fa fa-trash"></i> Hapus </button>
					</a>
				</td>
			</tr>
	    <?php } } else { ?> 
		    <tr>
		    	<td colspan='6'>Tidak ada data ditemukan</td>
		    </tr>
	    <?php } ?>
	</tbody>
</table>

<div class="text-center">© <?php echo date('Y'); ?> Copyright:
	<a href="https://dewankomputer.com/"> Dewan Komputer</a>
</div>

<button style="margin-bottom: 20px;" class="btn btn-primary"> <i class="fa fa-plus"></i> Tambah Data </button>

</a>

<thead>

<tr>

<td>Nama Mahasiswa</td>

<td>Alamat</td>

<td>Jenis Kelamin</td>

<td>Tanggal Masuk</td>

<td>Action</td>

</tr>

</thead>

<tbody>

<?php

$no = 1;

$query = "SELECT * FROM tbl_mahasiswa ORDER BY nama_mahasiswa ASC";

$dewan1 = $db1->prepare($query);

$dewan1->execute();

$res1 = $dewan1->get_result();

if ($res1->num_rows > 0) {

while ($row = $res1->fetch_assoc()) {

$id = $row['id'];

$nama_mahasiswa = $row['nama_mahasiswa'];

$alamat = $row['alamat'];

$jenis_kelamin = $row['jenis_kelamin'];

$tgl_masuk = $row['tgl_masuk'];

<tr>

<td>

</a>

<button class="btn btn-danger btn-sm"> <i class="fa fa-trash"></i> Hapus </button>

</a>

</td>

</tr>

<?php } } else { ?>

<tr>

<td colspan='6'>Tidak ada data ditemukan</td>

</tr>

<?php } ?>

</tbody>

</table>

<a href="https://dewankomputer.com/"> Dewan Komputer</a>

</div>

Seperti yang sudah saya jelaskan diatas saya menggunakan object oriented jadi memang agak panjang namun cara ini dinilai lebih aman ketimbang procedural apalagi mysql_query. Cara penggunaanya bisa sobat lihat pada bagian

$query = "SELECT * FROM tbl_mahasiswa ORDER BY nama_mahasiswa ASC";
$dewan1 = $db1->prepare($query);
$dewan1->execute();
$res1 = $dewan1->get_result();
while ($row = $res1->fetch_assoc()) {
   ...
}

$query = "SELECT * FROM tbl_mahasiswa ORDER BY nama_mahasiswa ASC";

$dewan1 = $db1->prepare($query);

$dewan1->execute();

$res1 = $dewan1->get_result();

while ($row = $res1->fetch_assoc()) {

...

}

4. Jika sobat jalankan http://localhost/dewan-crud/ maka akan muncul hasilnya seperti gambar dibawah

Bagaimana mudah bukan? namun tentunya aplikasi sobat baru menampilkan data saja belum bisa menjalankan fungsi lain seperti tambah data, edit data, dan hapus data. Jika sobat ingin melengkapi fungsi lainnya maka sobat bisa kunjungi postingan saya selanjutnya yaitu CRUD (Create, Read, Update, Delete) pada PHP dan MySQLi – Part 2 Tambah Data. Sekian postingan saya tentang CRUD (Create, Read, Update, Delete) pada PHP dan MySQLi – Part 1 Menampilkan Data. Jika sobat mempunyai pertanyaan silahkan tuliskan komentar pada kolom komentar dibawah. Untuk menambahkan file upload sobat bisa kunjungi postingan saya yang lainnya karena itu tidak saya bahas pada CRUD ini.

CRUD (Create, Read, Update, Delete) pada PHP dan MySQLi – Part 2 Insert Data

CRUD (Create, Read, Update, Delete) pada PHP dan MySQLi – Part 3 Update Data

CRUD (Create, Read, Update, Delete) pada PHP dan MySQLi – Part 4 Delete Data

Cara Membuat Upload File pada PHP dengan Mudah

Membuat CRUD Expert, Upload & Pencarian dengan JQuery, Ajax, Bootstrap Modal, SweetAlert dan WYSIHTML5 pada PHP

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..