Membuat Website CRUD Sederhana

Materi kali ini yaitu melanjutkan materi sebelumnya tentang Membuat database dengan MySQL Pembangunan database sangat diperlukan dalam sebuah website agar website yang Anda miliki lebih dinamis. Banyak sekali contoh database yang bisa Anda buat pada website Anda. Beberapa contoh seperti: login, pendaftaran, konten materi, dan lain-lain.

 
Kali ini kami akan memaparkan pada Anda pembuatan database sederhana dengan PHP dan MySQL untuk pendaftaran Siswa Sekolah baru. Disini kami akan menggunakan contoh nama sebuah sekolah, yaitu SMK PGRI Lemahabang dan databasenya dinamakan siswa. Anda bisa menggantikan database tersebut dengan database karyawan, Pegawai, stok barang dan lain-lain. Ketika Anda mengganti nama tersebut dengan nama sesuai keinginan Anda, Anda harus menyesuaikan tabel dan kolom database yang sesuai.

Create database

Saya asumsikan bahwa anda sudah meninstall XAMPP di komputer anda.

1. Jalankan aplikasi XAMPP yang ada pada dekstop Anda atau klik Start » All program »XAMPP » XAMPP Control Panel.

2. Pada saat aplikasi XAMPP terbuka, disana ada 5 buah modul yang bisa Anda gunakan, namun untuk menghemat pemakaian memori, Anda boleh mengaktifkan dua buah modul saja, yaitu: Apache dan MySQL. Kemudian klik button START pada kedua modul tersebut.

3. Pastikan bahwa modul yang Anda klik sudah mulai berjalan. Anda bisa mengetahui dengan cara melihat status modul tersebut seperti gambar di bawah.

4. Setelah modul Apache dan MySQL berjalan, Anda bisa minimize (-) tampilannya dan masuk ke browser yang Anda miliki.

 

5. Buka browser Mozilla Firefox atau Google Chrome dan pada alamat URL ketikkan alamat : http://localhost/phpmyadmin/, kemudian tekan ENTER pada keyboard Anda.

6. Setelah itu, akan muncul tampilan localhost untuk penyimpanan database. Pilih option NEW yang terletak di sebelah kiri dan buat sebuah nama database dengan nama siswa. Kemudian klik button BUAT untuk membuat database dengan nama siswa.

7. Setelah Anda membuat nama database dengan nama mahasiswa, langkah selanjutnya adalah membuat nama tabel dan jumlah atribut/parameter yang Anda butuhkan untuk pendaftaran siswa. Nama tabel pertama yang kita perlukan adalah calon_siswa. Buatlah sebuah tabel dengan nama tersebut dan isikan jumlah kolom sebanyak 5 buah, kemudian klik button KIRIM/GO.

8. Langkah selanjutnya, ketikkan nama dan jenis atribut yang akan ditampilkan pada saat siswa mendaftar.

Sebagai contoh dapat dilihat pada tabel berikut :

Nama	Jenis	Panjang/Nilai	Index
id	INT	-	PRIMARY (A_I)
nama	VARCHAR	255	-
ttl	VARCHAR	255	-
alamat	VARCHAR	255	-
no_hp	VARCHAR	50	-

 Catatan: Untuk id, khusus pada A_I (Auto Increment) silahkan Anda centang.

Setelah mengisi tabel di atas, untuk storage Engine tetap pilih InnoDB dan kemudian klik button SIMPAN. Proses pembuatan database di aplikasi XAMPP telah selesai dan Anda bisa close atau minimaze tampilan localhost Anda.

9. Cari folder aplikasi XAMMP yang terletak di disk C atau lokasi file tempat aplikasi XAMPP pada saat Anda menginstall. Kemudian buka folder htdocs.

10. Buat sebuah folder di dalam htdocs dengan nama siswa. Folder inilah yang nantinya akan diisi dengan file-file penting untuk menampilkan dan memanggil database yang Anda buat.

Config database

Langkah pertama dalam pembuatan interface dengan PHP, Anda harus punya aplikasi text editor. Disini saya memakai aplikasi SUBLIME TEXT karena susunan file dan tampilannya sudah bagus serta mudah untuk digunakan. Adapun langkah-langkah pembuatannya sebagai berikut.

1. Buka aplikasi Sublime yang telah ada di computer kita Start » Program » Sublime atau klik kiri 2x pada shortcut Sublime.
2. Pada jendela tampilan Sublime buka file baru dengan cara pilih menu FILE » NEW.
3. Ketikan Kode Berikut, berinama config.php 

   <?php 
   $server = "localhost"; 
   $user = "root"; 
   $password = ""; 
   $nama_database = "siswa"; 
   $db = mysqli_connect($server, $user, $password, $nama_database);
   if( !$db ){ 
       die("Gagal terhubung dengan database: " . mysqli_connect_error());
   } 
   ?>

Setelah kode di atas Anda ketikkan, pilih menu File » Save As. Langkah selanjutnya, cari folder siswa yang telah Anda buat di XAMPP » htdocs untuk menampung program interface dan penghubung database. Setelah Anda menemukan folder tersebut simpan dengan nama config.php lalu klik button SAVE.

4. Membuat tampilan awal seperti gambar dengan mengetik kode berikut dan simpan dengan nama index.php

  <!DOCTYPE html> 
  <html> 
  <head> 
  <title>Nama Sekolah Anda</title> 
  </head> 
  <body> 
  <center><h1>Nama Sekolah Anda</h1></center> 
  <br> 
  <ul> 
  <li><a href = "tampilan-daftar.php">Daftar Siswa Baru</a></li>
  <li><a href = "data-siswa.php">Data Siswa</a></li>
  </ul> 
  </body> 
  </html> 

Program di atas akan menampilkan interface dengan alamat browser : http://localhost/siswa/index.php, sebagai berikut :

Form input & proses

1. Membuat tampilan kedua seperti gambar dengan mengetik kode berikut dan simpan dengan nama tampilan-daftar.php.

  <!DOCTYPE html> 
  <html> 
  <head> 
  <title>Nama Sekolah</title> 
  </head> 
  <body> 
  <center><h1>Nama Sekolah Anda</h1></center> 
  <h2>Formulir Pendaftaran Siswa Baru</h2> 
  <form action="proses-daftar.php" method="POST">
  <table> 
  	<tr> 
       <td><label for="nama">Nama Lengkap </label></td> 
       <td>:</td> 
       <td><input type="text" name="nama"/></td> 
    </tr> 
    <tr>
       <td><label for="ttl">Tempat/Tanggal Lahir </label></td> 
       <td>:</td> 
       <td><input type="text" name="ttl"/></td> 
    </tr> 
    <tr>
      <td><label for="alamat">Alamat </label></td>
      <td>:</td> 
      <td><input type="text" name="alamat"/></td> 
    </tr> 
    <tr> 
      <td><label for="no_hp">No. Telp/HP </label></td> 
      <td>:</td>
      <td><input type="text" name="no_hp"/></td> 
      </tr>
    </table> 
      <tr> <input type="submit" value="Daftar" name="daftar"> </tr> 
    </form> 
    </body> 
 </html>
 

Untuk melihat hasilnya, Anda tinggal ketikkan pada browser Anda dengan alamat http://localhost/siswa/tampilan-daftar.php dan akan tampil halaman sebagai berikut.

2. Membuat program untuk memproses data yang akan kita simpan ke dalam database dengan nama proses-daftar.php sebagai berikut. 

  <?php 
  include("config.php"); 
  if(isset($_POST['daftar'])){ 
  $id = $_POST['id']; 
  $nama = $_POST['nama']; 
  $ttl = $_POST['ttl']; 
  $alamat = $_POST['alamat']; 
  $no_hp = $_POST['no_hp']; 
  $sql = "INSERT INTO calon_siswa (id,nama, ttl, alamat, no_hp) 
  VALUE ('$id','$nama', '$ttl','$alamat', '$no_hp')"; 
  $query = mysqli_query($db, $sql); 
  if( $query ) { header('Location: index.php?status=sukses'); 
  } else { 
  	header('Location: index.php?status=gagal'); } 
  } else { 
  die("Akses dilarang..."); 
  } 
  ?>
  

3. Membuat program untuk menampilkan database yang berhasil diinputkan dan disimpan dengan nama data-siswa.php sebagai berikut. 

  <?php include("config.php"); ?> 
  <!DOCTYPE html> 
  <html>
  <head> 
  	<title>Nama Sekolah</title> 
  </head>
  <body> 
  <center><h1>Nama Sekolah Anda</h1></center> 
  <br> 
  <h2>DATA SISWA YANG TELAH TERDAFTAR</h2> 
  <nav><a href="tampilan-daftar.php"> [+] Tambah Baru</a> </nav> 
  <br> <table border="1">
  <thead> 
  <tr> 
     <th>No</th> 
     <th>Nama</th>
     <th>Tempat/Tanggal Lahir</th> 
     <th>Alamat</th>
     <th>No.Telp/HP</th> 
     <th>Action</th> 
  </tr>
  </thead> 
  <tbody> 
     <?php 
     $sql = "SELECT * FROM calon_siswa";
     $query = mysqli_query($db, $sql); 
     while($siswa = mysqli_fetch_array($query)){
     echo "<tr>"; 
     echo "<td>".$siswa['id']."</td>"; 
     echo "<td>".$siswa['nama']."</td>"; 
     echo "<td>".$siswa['ttl']."</td>"; 
     echo "<td>".$siswa['alamat']."</td>"; 
     echo "<td>".$siswa['no_hp']."</td>"; 
     echo "<td>"; 
     echo "<a href='tampilan-edit.php?id=".$siswa['id']."'>Edit</a>|"; 	
     echo "<a href='delete.php?id=".$siswa['id']."'>Hapus</a>"; 
     echo "</td>"; 
     echo "</tr>"; 
     }?> 
  </tbody> 
  </table>
     <p>Total: <?php echo mysqli_num_rows($query) ?></p>
  </body> 
  </html>

Tampilan Programnya Sebagai Berikut :

Form edit

1. Membuat tampilan edit yang digunakan pada saat Anda melakukan pengeditan jika terdapat kesalahan pada data mahasiswa yang telah masuk ke dalam penyimpanan database yang Anda buat. Buat sebuah file baru dan simpan dengan nama tampilan-edit.php dan listing programnya sebagai berikut. 

  <?php 
  include("config.php"); 
  if( !isset($_GET['id']) ){ 
  	  header('Location: data-siswa.php'); 
      } 
      $id = $_GET['id']; 
      $sql = "SELECT * FROM calon_siswa WHERE id=$id"; 
      $query = mysqli_query($db, $sql); 
      $siswa = mysqli_fetch_assoc($query); 
      if( mysqli_num_rows($query) < 1 ){ 
      	die("data tidak ditemukan!"); 
      } 
      ?> 
  <!DOCTYPE html> 
  <html> 
  <head>
  <title>Sekolah Anda</title> 
  </head> 
  <body>
  <center><h1>Nama Sekolah Anda</h1></center>
  <h2>Formulir Pendaftaran Siswa Baru</h2> 
  <form action="proses-edit.php" method="POST"> 
  <input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" /> 
  <table> 
  <tr>
      <td><label for="nama">Nama Lengkap </label></td>
      <td>:</td> 
      <td>
  	     <input type="text" name="nama" value="<?php echo $siswa['nama'] ?>" />
      </td> 		      	
  </tr>
  <tr> 
      <td><label for="ttl">Tempat/Tanggal Lahir </label></td> 
      <td>:</td> 
      <td>
    	 <input type="text" name="ttl" value="<?php echo $siswa['ttl'] ?>"/>
      </td> 
  </tr> 
  <tr> 
      <td><label for="alamat">Alamat </label></td> 
      <td>:</td> 
      <td>
      <input type="text" name="alamat" value="<?php echo $siswa['alamat'] ?>" />
      </td> 
  </tr> 
  <tr>
      <td><label for="no_hp">No. Telp/HP </label></td>
      <td>:</td> 
      <td>
      <input type="text" name="no_hp" value="<?php echo $siswa['no_hp'] ?>" />
      </td> 
  </tr>
  </table> 
      <input type="submit" value="Simpan" name="simpan">
  </form> 
  </body> 
  </html> 

Program di atas mirip dengan program tampilan-daftar.php, namun perbedaannya program ini dibuat untuk melakukan pengeditan data sebelumnya sehingga masih menampilkan data sebelumnya. Hal yang perlu Anda ketahui adalah program tersebut mengambil data yang ada pada database yang telah tersimpan dan menyimpannya dengan penambahan atau pengurangan data. Tampilan programnya sebagai berikut :

2. Membuat sebuah program untuk melakukan proses edit dan menyimpannya dengan nama proses-edit.php. Berikut merupakan listing program yang Anda ketikkan: 

  <?php 
  include("config.php"); 
  if(isset($_POST['simpan'])){ 
  $id = $_POST['id']; 
  $nama = $_POST['nama']; 
  $ttl = $_POST['ttl']; 
  $alamat = $_POST['alamat']; 
  $no_hp = $_POST['no_hp']; 
  $sql = "UPDATE calon_siswa SET nama='$nama', 
          ttl='$ttl', 
          alamat='$alamat', 
          no_hp='$no_hp' WHERE id=$id";
  $query = mysqli_query($db, $sql); 
  	if( $query ) { 
    	header('Location: data-siswa.php'); 
    } else { 
    die("Gagal mengendit"); 
    } 
    } else { 
    die("Aksesdilarang !"); 
    } 
    ?>

Form delete

1 Langkah terakhir adalah membuah program untuk menghapus baris atau data di dalam database. Ketikkan listing di bawah dan simpan dengan nama delete.php. 

  <?php 
  include("config.php"); 
  if( isset($_GET['id']) ){ 
  $id = $_GET['id']; 
  $sql = "DELETE FROM calon_siswa WHERE id=$id"; 
  $query = mysqli_query($db, $sql); 
  if( $query ){ 
      header('Location: data-siswa.php'); 
  } else { 
      die("data gagal dihapus"); 
  } 
  } else { 
      die("akses dilarang!"); 
  } 
  ?>

silahkan lakukan Uji Coba Program dengan melakukan Create Reade Update Delete :

Demikian program pembuatan website CRUD sederhana, semoga bermanfaat..