Membuat Aplikasi CRUD dengan PHP dan MySQLi Konsep OOP



Menyiapkan Database

Pada materi pembelajaran “Membuat CRUD dengan PHP dan MySQLi dengan konsep OOP” kita membutuhkan sebuah database untuk menyimpan sebuah data. Agar memudahkan kita dalam megelola data-data yang ada pada tabel database kita akan menggunakan bantuan aplikasi Database Management System (DBMS), aplikasi DBMS yang akan kita gunakan pada materi pembelajaran ini adalah phpMyAdmin, penggunaan phpMyAdmin karena penggunaanya yang mudah dan sangat populer, selain itu sudah terinstal secara bersamaan saat kita menginstal aplikasi XAMPP.

“Phpmyadmin adalah sebuah aplikasi open source yang berfungsi untuk memudahkan manajemen MySQL. Dengan menggunakan phpmyadmin, Anda dapat membuat database, membuat tabel, menyimpan , menghapus dan mengupdate data dengan GUI dan terasa lebih mudah, tanpa perlu mengetikkan perintah SQL secara manual. PHPMyAdmin merupakan front-end MySQL berbasis web. Saat ini, PHPMyAdmin banyak digunakan dalam hampir semua penyedia hosting yang ada di internet. PHPMyAdmin juga tersedia dalam 50 bahasa lebih, termasuk bahasa Indonesia.”

Untuk dapat menggunakan aplikasi phpMyadmin silahkan buka program XAMPP yang sudah terinstal pada perangkat leptop/PC Anda, selanjutnya silahkan Start Module Apache dan MySQL. Jika Apache dan MySQL sudah jalan silahkan buka browser internet favorit Anda baik itu Mozilla Firefox, Google Chrome atau Microsoft Edge. Lalu selanjutnya silahkan tuliskan dan buka link atau alamat berikut http://localhost/phpmyadmin pada browser internet Anda untuk membuka atau menjalankan aplikasi phpMyAdmin.
Setelah aplikasi phpMyAdmin terbuka pada web browser, silahkan klik menu New lalu isikan nama database dengan nama mahasiswa, lalu klik tombol Create. Setelah database mahasiswa sudah terbuat selanjutnya akan diarahkan pada halaman untuk membuat sebuah tabel, silahkan isikan nama tabel dengan nama tbl_nilai lalu klik tombol Go. Lalu selanjutnya akan diarahkan pada halaman untuk membuat struktur kolom dan konfigurasi tipe data pada kolom tabel kita. Selanjutnya silahkan isikan struktur data kolom tabel seperti pada gambar.

Selain menggunakan phpmyadmin kita juga dapat membuat database langsung menggunakan coding atau query SQL. Adapun coding atau query SQL yang digunakan untuk membuat database mahasiswa dan tabel dengan nama tbl_nilai seperti pada materi pembelajaran ini adalah sebagai berikut : 

CREATE DATABASE mahasiswa;
USE mahasiswa;
CREATE TABLE `tbl_nilai` (
`nim` int(11) NOT NULL,
`nama` varchar(200) DEFAULT NULL,
`uts` int(11) DEFAULT NULL,
`uas` int(11) DEFAULT NULL,
`tugas` int(11) DEFAULT NULL,
`na` int(11) DEFAULT NULL,
`status` varchar(20) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `tbl_nilai`
ADD PRIMARY KEY (`nim`);

Menyiapkan Direktori Folder Project

Setelah database mahasiswa sudah selesai dibuat, selanjutnya silahkan buat folder dengan nama mahasiswa didalam folder htdocs. Kemudian buka Visual Studio Code atau kode editor favorit Anda,
bagi pengguna VSCode silahkan tambahkan atau buka folder mahasiswa yang baru saja dibuat
kedalam workspace VSCode. berikut adalah file yang akan kita buat dalam project ini :
  1. connection.php -> Untuk menyimpan konfigurasi database.
  2. create.php -> Menampilkan halaman input data, untuk menginput data baru.
  3. edit.php -> Menampilkan halaman edit data, untuk mengedit data .
  4. index.php -> Menampilkan halaman utama, untuk menampilkan tabel nilai.
  5. model.php -> Berisikan class, properti data dan method yang ada pada sistem.
  6. process.php -> Untuk memproses data yang didapat dari method POST / GET.
  7. print.php -> Untuk menampilkan halaman Cetak Laporan data dari window.print().
Agar dapat mengakses halaman PHP dari web browser, maka kita harus menempatkan file PHP dalam folder khusus yang merupakan folder home dari web server. Pada aplikasi XAMPP, folder tersebut adalah folder htdocs yang berada di C:\xampp\htdocs. Untuk menjalankan file php, pastikan Web Server Apache sudah berjalan atau sudah di Start pada aplikasi XAMPP. Lalu buka browser, dan ketik alamat berikut: localhost/nama_folder/nama_file.php pada address bar dan tekan Enter.

Membuat Koneksi ke Database MySQL

Silahkan tulis coding berikut ini ke file connection.php yang telah dibuat pada folder mahasiswa.


<?php
class Connection{
public function get_connection(){
    $host = "localhost";
    $database = "mahasiswa";
    $username = "root";
    $password = "";
    $connect = new mysqli($host, $username, $password, $database);
    return $connect;
 }
} 
Keterangan  :
  1. Pada coding file connection.php diatas terdapat sebuah class dengan nama Connection
  2. Didalam class Connection terdapat sebuah method dengan nama get_connection
  3. Didalam method get_connection terdapat empat buah variabel yaitu $host, $username, $password, dan $database. Selain itu juga terdapat sebuah objek dengan nama $connect dari class mysqli
Untuk membuat koneksi MySQL dengan PHP menggunakan mysqli object style, caranya adalah dengan menggunakan mysqli constructor. Terdapat 4 (empat) argumen di dalam construktor mysqli, yakni lokasi komputer/server/host, nama user, password user, dan nama database. Setelah file connection.php sudah dibuat, kemudian buka file model.php lalu tuliskan coding berikut.
<?php
include 'connection.php';
class Model extends Connection{
public function __construct()
    {
        $this->conn = $this->get_connection();
    }
}

Keterangan :
  1. Pada file model.php diatas terdapat include untuk memanggil file connection.php 
  2. Pada coding file model.php diatas terdapat sebuah class dengan nama Model yang mewarisi class dari class Connection 
  3. Didalam class tersebut terdapat sebuah method __construct untuk memanggil method get_connection yang didefiniskan dalam variabel $this->conn 
“Constructor (bahasa indonesia: konstruktor) adalah method khusus yang akan dijalankan secara otomatis pada saat sebuah objek dibuat (instansiasi), yakni ketika perintah “new” dijalankan. Constructor biasa digunakan untuk membuat proses awal dalam mempersiapkan objek, seperti memberi nilai awal kepada property, memanggil method internal dan beberapa proses lain yang digunakan untuk ‘mempersiapkan’ objek. Dalam PHP, constructor dibuat menggunakan method : __construct().


Membuat Halaman Input data

Buka file create.php kemudian tuliskan coding berikut ini:

<!doctype html>
<html lang="en">
<head>
<title>Tambah Data Nilai</title>
</head>
<body>
<h1>Tambah</h1>
<a href="index.php">Kembali</a>
<br><br>
<form action="process.php" method="post">
<label>NIM</label>
<br>
<input type="text" name="nim">
<br>
<label>Nama</label>
<br>
<input type="text" name="nama">
<br>
<label>UTS</label>
<br>
<input type="number" name="uts">
<br>
<label>UAS</label>
<br>
<input type="number" name="uas">
<br>
<label>Tugas</label>
<br>
<input type="number" name="tugas">
<br><br>
<button type="submit" name="submit_simpan">Submit</button>
<button type="reset">Reset</button>
</form>
</body>
</html>

Keterangan :
  1. Pada file create.php berisikan coding dengan format html untuk menampilkan form input data
  2. Terdapat link kembali untuk kembali kehalaman index.php 
  3. Saat tombol submit diklik akan mengirimkan data berupa method POST yang berisikan data dari textfield dan button kedalam file process.php 
  4. Selain itu terdapat tombol reset untuk mengembalikan textfiled pada form kedalam keadaan awal.
Lalu buka file process.php kemudian tuliskan coding berikut :

<?php
include 'model.php';
if (isset($_POST['submit_simpan'])) {
    $nim = $_POST['nim'];
    $nama = $_POST['nama'];
    $uts = $_POST['uts'];
    $uas = $_POST['uas'];
    $tugas = $_POST['tugas'];
    $model = new Model();
    $model->insert($nim, $nama, $uts, $uas, $tugas);
    header('location:index.php');
}

Keterangan :
  1. Pada file process.php terdapat include untuk memanggil file model.php 
  2. Lalu terdapat sebuah fungsi isset untuk mengecek apakah terdapat data/objek masuk dari$_POST['submit_simpan'] ? jika ada, maka.
  3. Selanjutnya data/objek yang didapat dari method POST akan disifinisikan kedalam sebuah variabel yang kemudian variabel tersebut diparsing kedalam method insert pada class model
  4. Ketika proses insert yang dilakukan dalam class model selessai maka akan diarahkan kembali kehalaman index.php isset() adalah salah satu perintah php yang berfungsi untuk memeriksa sebuah objek dari form, apakah ada atau tidak nilai yang di lempar dari suatu form. Fungsi
"isset() akan tetap bernilai true meskipun nilai dari suatu form tidak terisi atau kosong. Namun untuk nilai false atau sebaliknya bisa ditambahkan operator ! pada isset() tersebut, sehingga menjadi !isset()." 

Lalu buka file model.php kemudian tuliskan coding berikut didalam class Model extends Connection atau dibawah method _construct."

public function insert($nim, $nama, $uts, $uas,$tugas)
{
    $na = $this->na($uts,$tugas,$uas);
    $status = $this->status($na);
    $sql = "INSERT INTO tbl_nilai (nim, nama, uts, uas, tugas, na, status) VALUES ('$nim', '$nama',
            '$uts', '$uas', '$tugas', '$na', '$status')";
    $this->conn->query($sql);
}
public function na($uts,$tugas,$uas){
    $na=(0.3*$uts)+(0.3*$tugas)+(0.4*$uas);
    return $na;
}
public function status($na){
    $status="";
    if($na >=60 && $na <=100){
    $status="Lulus";
}else{
    $status="Tidak Lulus";
}
    return $status;
}

Keterangan :
  1. Terdapat 3 (tiga) buah method yakni insert, na, dan status yang mendapatkan data/nilai dari file process.php 
  2. Method insert digunakan untuk menginput data kedalam database dengan query SQL melalui object $this->conn
  3. Method na digunakan untuk menghitung nilai akhir berdasarkan rumus yang didefinisikan
  4.  Method status digunakan untuk membuat string value berdasarkan nilai akhir, jika nilai akhir lebih besar atau sama dengan 60 dan nilai akhir lebih kecil atau sama dengan 100 maka variabel $status akan mendapatkan value/nilai “Lulus”, jika tidak maka mendapatkan value/nilai “Tidak Lulus”
Setelah coding pada point pembahasn Membuat Koneksi ke Databse MySQL dan coding pada pada point pembahasan Membuat Halaman Input data selesai dibuat silahkan di save terlebih dahulu. Kemudian buka alamat http://localhost/mahasiswa/create.php untuk membuka halaman input data, lalu silahkan isikan data dengan benar lalu klik tombol submit. Setelah klik tombol submit akan diarahkan kehalaman index.php dengan tampilan halaman kosong tidak ada apa-apa, hal itu dikarenakan file index.php belum kita coding. Selanjutnya silahkan cek pada database melalui phpMyAdmin apakah data yang disubmit melalui form halaman create.php sudah terinput atau belum ? .

Jika data sudah berhasil terinput kedalam tbl_nilai berarti Anda sudah berhasil hingga sampai tahap
ini. Jika masih ada error atau belum berhasil silahkan periksa kembali coding-coding yang sudah Anda tulis dari awal.

Membuat Halaman Menampilkan Tabel

Setelah sebelumnya kita sudah selesai membuat halaman untuk menginput data, dan data nilai mahasiswa yang diinput sudah berhasil tersimpan dalam database pada tbl_nilai, sekarang kita akan membuat halaman utama untuk menampilkan tabel yang berisikan data nilai mahasiswa yang sudah tersimpan dalam database. Silahkan buka file model.php kemudian tambahkan method coding berikut ini didalam class Model Extends Connection atau dibawah method status.


public function tampil_data()
{
    $sql = "SELECT * FROM tbl_nilai";
    $bind = $this->conn->query($sql);
    while ($obj = $bind->fetch_object()) {
    $baris[] = $obj;
    }
    if(!empty($baris)){
        return $baris;
    }
}

Keterangan :  
  1. Coding diatas merupakan sebuah method dengan nama tampil_data.
  2. Method ini berisikan coding untuk menampilkan/select data melalui tbl_nilai, dan data tersebut kemudian akan disimpan dalam sebuah objek.
 Lalu silahkan buka file index.php kemudian tulis coding berikut :


<?php
include 'model.php';
$model = new Model();
$index = 1;
?>
<!doctype html>
<html lang="en">
<head>
<title>Data Mahasiswa</title>
</head>
<body>
<div>
<h1>Data Nilai Mahasiswa</h1>
<a href="create.php">Tambah Data</a>
<br><br>
<table border="1">
<thead>
<tr>
<th>No.</th>
<th>NIM</th>
<th>Nama</th>
<th>UTS</th>
<th>UAS</th>
<th>Tugas</th>
<th>NA</th>
<th>Status</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
$result = $model->tampil_data();
if ( !empty($result) ) {
foreach ($result as $data): ?>
<tr>
<td><?=$index++ ?></td>
<td><?=$data->nim ?></td>
<td><?=$data->nama ?></td>
<td><?=$data->uts ?></td>
<td><?=$data->uas ?></td>
<td><?=$data->tugas ?></td>
<td><?=$data->na ?></td>
<td><?=$data->status ?></td>
<td>
<a name="edit" id="edit" href="edit.php?nim=<?=$data->nim ?>">Edit</a>
<a name="hapus" id="hapus" href="process.php?nim=<?=$data->nim ?>">Delete</a>
</td>
</tr>
<?php endforeach;
} else{ ?>
<tr>
<td colspan="9">Belum ada data pada tabel nilai mahasiswa.</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</body>
</html>

Keterangan :
  1. Terdapat include untuk memanggil file model.php
  2. Lalu terdapat sebuah objek dengan nama $model untuk memanggil class dari Model() 
  3. Variabel $index digunakan untuk mendefenisikan angka awal untuk pembuatan nomor urut otomatis pada tabel 
  4. Variabel $result dibuat dari method tampil_data untuk mengecek apakah kondisi tabel dari database kosong atau tidak 
  5. Jika $result tidak kosong kemudian $result di loop dengan menggunakan fungsi foreach untuk ditampilkan dalam sebuah tabel, namun jika $result kosong akan menampilkan pesan “belum ada data pada tabel nilai mahasiswa” 
  6. Terdapat 2 buah tombol yaitu Edit dan Delete, tombol ini ketika diklik akan mengirimkan mthod POST pada fungsi PHP yang berisikan data nim dari tabel yang dipilih 

Setelah coding file model.php sudah dimodifikasi dan index.php sudah selesai dibuat silahkan save project kemudian silahkan buka alamat http://localhost/mahasiswa/index.php atau http://localhost/mahasiswa/. Jika data yang tersimpan pada database sudah tampil didalam tabel, berarti Anda sudah berhasil pada tahap membuat halaman menampilkan tabel.

Membuat Halaman Edit dan Update Data

Tambahkan kedua metod pada coding dibawah ini kedalam file model.php, tulis coding berikut didalam didalam class Model Extends Connection atau dibawah method tampil_data :


public function edit($id)
{
    $sql = "SELECT * FROM tbl_nilai WHERE nim='$id'";
    $bind = $this->conn->query($sql);
    while ($obj = $bind->fetch_object()) {
    $baris = $obj;
    }
    return $baris;
}
public function update($nim, $nama, $uts, $tugas,$uas)
{
    $na=$this->na($uts,$tugas,$uas);
    $status=$this->status($na);
    $sql = "UPDATE tbl_nilai SET nama='$nama', uts='$uts', uas='$uas', tugas='$tugas', na='$na',status='$status' WHERE nim='$nim'";
    $this->conn->query($sql);
}

Keterangan  :
  1. Terdapat 2 (dua) buah metod dengan nama edit dan update 
  2. Pada method edit terdapat variabel $id berisikan data nim yang didapat dari method GET pada halaman edit.php . Kemudian terdapat coding untuk select query/menampilkan data dari tbl_nilai berdasarkan $id yang sudah dipilih dan akan disimpan kedalam objek 
  3. Pada method update terdapat variabel berisikan data dari textfield yang didapat dari method POST saat tombol submit_edit diklik. Kemudian variabel yang sudah berisikan data dari method POST akan di update menggunakan query SQL. 

Jika file model.php sudah selesai dimodifikasi, selanjutnya buka file process.php kemudian tuliskan/tambahkan coding berikut.

if (isset($_POST['submit_edit'])) {
    $nim = $_POST['nim'];
    $nama = $_POST['nama'];
    $uts = $_POST['uts'];
    $uas = $_POST['uas'];
    $tugas = $_POST['tugas'];
    $model = new Model();
    $model->update($nim, $nama, $uts, $tugas,$uas);
    header('location:index.php');
}

Keterangan :
  1. Terdapat sebuah fungsi isset untuk mengecek apakah terdapat data/objek masuk dari $_POST['submit_edit'] ? jika ada, maka 
  2. Selanjutnya data/objek yang didapat dari method POST akan disifinisikan kedalam sebuah variabel yang kemudian variabel tersebut diparsing kedalam method update pada class model 
  3. Ketika proses update yang dilakukan dalam class model selessai maka akan diarahkan kembali kehalaman index.php 
Setelah file process.php selesai dimodifikasi, lalu selanjutnya silahkan buka file edit.php dan tuliskan coding berikut ini.

<?php
$id = $_GET['nim'];
include 'model.php';
$model = new Model();
$data = $model->edit($id);
?>
<!doctype html>
<html lang="en">
<head>
<title>Edit Nilai Mahasiswa</title>
</head>
<body>
<h1>Edit Nilai Mahasiswa</h1>
<a href="index.php">Kembali</a>
<br><br>
<form action="process.php" method="post">
<label>NIM</label>
<br>
<input type="text" name="nim" value="<?php echo $data->nim ?>">
<br>
<label>Nama</label>
<br>
<input type="text" name="nama" value="<?php echo $data->nama ?>">
<br>
<label>UTS</label>
<br>
<input type="text" name="uts" value="<?php echo $data->uts ?>">
<br>
<label>Tugas</label>
<br>
<input type="text" name="tugas" value="<?php echo $data->tugas ?>">
<br>
<label>UAS</label>
<br>
<input type="text" name="uas" value="<?php echo $data->uas ?>">
<br><br>
<button type="submit" name="submit_edit">Submit</button>
</form>
</body>
</html>

Keterangan : 
  1. Terdapat variabel $id untuk menampung data nim yang didapat dari method GET 
  2. Terdapat include untuk memanggil file model.php 
  3. Lalu terdapat sebuah objek dengan nama $model untuk memanggil class dari Model() 
  4. Terdapat variabel $data untuk menampung data yang didapat dari method edit pada class model 
  5. Kemudian data objek yang berada dalam $data ditampilkan menjadi value dalam textfield berdasarkan data nim yang didapatkan dari method GET 
Jika file model.php, process.php sudah selesai dimodifikasi dan file edit.php sudah selesai dibuat silahkan save project lalu buka halaman utama atau index.php untuk menampilkan data tabel, kemudian klik tulisan edit data pada data yang akan diedit. Selanjutnya akan diarahkan kehalaman edit.php, lalu akan menampilkan form textfiled yang sudah berisikan data berdasarkan nim yang dipilih. Selanjutnya coba edit atau ubah data tersebut lalu klik tombol submit.

Setelah klik tombol submit akan diarahkan kehalaman kembali ke halaman index.php dan data yang tampil pada tabel nilai mahasiswa akan terupdate atau tampil data baru berdasarkan data yang baru saja kita ubah. Jika data yang diubah dan disubmit sudah berhasil berubah dan tersimpan pada database berarti Anda sudah berhasil membuat halaman Edit dan Update Data. Jika masih ada error silahkan ulang perhatikan kembali coding Anda.

Membuat Proses Untuk Hapus Data

Buka lagi file model.php kemudian tambahkan atau tuliskan coding berikut didalam class Model Extends Connection atau dibawah method update.

public function delete($nim)
{
    $sql = "DELETE FROM tbl_nilai WHERE nim='$nim'";
    $this->conn->query($sql);
}
Kemudian buka file process.php lalu tambahkan coding berikut ini.

if (isset($_GET['nim'])) {
    $id = $_GET['nim'];
    $model = new Model();
    $model->delete($id);
    header('location:index.php');
}
Keterangan :

  1. Coba perhatikan coding pada file index.php terdapat link Delete mengarah ke process.php?nim=nim ?>, artinya bila tulisan/link delete di klik maka akan memproses file process.php sambil mengirimkan method GET yang berisikan data nim. 
  2. Lalu data GET nim ditampung dalam variabel $id pada file process.php kemudian diproses melalui method delete dari objek $model pada class Model 
  3. Kemudian method delete pada class Model akan memproses proses hapus data dengan query SQL 

Kemudian save project, lalu silahkan coba tambahkan data baru kemudian coba lakukan proses hapus data. Apabila data berhasil terhapus dari database berarti Anda sudah berhasil membuat proses untuk hapus Data.

Membuat Proses Cetak Laporan  

Buka file index.php lalu modifikasi dengan menambahkan coding berikut dibawah baris coding
<a href="create.php">Tambah Data</a>, atau terserah Anda posisinya ingin diletakkan dimana.

<a href="print.php" target="_blank">Cetak Data</a>
Kemudian buka file print.php lalu tulis atau masukkan coding berikut ini.

<?php
include 'model.php';
$model = new Model();
$index = 1;
?>
<!doctype html>
<html lang="en">
<head>
<title>Cetak Data</title>
<style>
h1 {
text-align: center;
}
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h1>Laporan Data Nilai Mahasiswa</h1>
<table>
<thead>
<tr>
<th>No.</th>
<th>NIM</th>
<th>Nama</th>
<th>UTS</th>
<th>UAS</th>
<th>Tugas</th>
<th>NA</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php
$result = $model->tampil_data();
if ( !empty($result) ) {
foreach ($result as $data): ?>
<tr>
<td><?=$index++ ?></td>
<td><?=$data->nim ?></td>
<td><?=$data->nama ?></td>
<td><?=$data->uts ?></td>
<td><?=$data->uas ?></td>
<td><?=$data->tugas ?></td>
<td><?=$data->na ?></td>
<td><?=$data->status ?></td>
</tr>
<?php endforeach;
} else{ ?>
<tr>
<td colspan="9">Belum ada data pada tabel nilai mahasiswa.</td>
</tr>
<?php } ?>
</tbody>
</table>
<script>
window.print();
</script>
</body>
</html>

Keterangan :

  1. Coding diatas sebenarnya sama dengan coding untuk menampilkan data yang ada pada file index.php 
  2. Proses cetak laporan sengaja dibuatkan file terpisah atau file sendiri yaitu dengan nama print.php, bertujuan agar hasil interface laporan print dapat dengan mudah di kustomisasi atau tampilanya dibedakan dengan tampilan pada halaman index.php.  Kita juga dapat langsung melakukan print menggunakan fungsi javascript window.print() secara langsung pada halaman index.php. 
Jika halaman index.php sudah dimodifikasi dan pada file print.php sudah ditambahkan coding diatas, sekarang coba buka halaman utama index.php, Anda akan melihat link baru dengan tulisan “Cetak Data” saat link tersebut kita klik maka akan terbuka tab baru untuk memproses area tampilan Print.