Tutorial CRUD : Membuat Buku Tamu dengan PHP dan MySQL

Diwa Network
CRUD PHP - Membuat Buku Tamu | Diwapedia

CRUD merupakan kepanjangan dari Create, Read, Update dan Delete, atau juga yang biasa dikenal dengan proses Input, Edit dan Delete data pada sebuah aplikasi atau sistem dalam mengelola data yang tersimpan dalam database.

Bisa dibilang, se-simpel apapun aplikasi tersebut, selama aplikasi tersebut menggunakan database, pasti menggunakan proses CRUD.

Dalam tutorial CRUD menggunakan PHP dan MySQL kali ini, kita akan membuat sebuah buku tamu.

Apa itu Buku Tamu?
Menurut KamusBesar.com, Buku Tamu adalah buku yg berisi nama tamu yg hadir dalam pertemuan (rapat, resepsi, kantor, dsb)

Adapun tutorial CRUD PHP dalam membuat buku tamu ini dapat mengikuti langkah-langkah berikut



1. Membuat Direktori Buku Tamu


a. Buka Direktori atau folder htdocs di tempat kalian menginstall XAMPP. Biasanya di Drive C
  • Buka Drive C > XAMPP > htdocs
b. Pada folder htdocs, buat folder baru bernama bukutamu (disatukan).

2. Membuat Database & Tabel



Tutor Lainnya


a. Pada folder bukutamu tadi buat new text document
  • Klik Kanan > New > Text Document
b. Salin syntax SQL dibawah ini, lalu paste di dalam Text Document tadi


-- phpMyAdmin SQL Dump
-- version 4.0.9
-- http://www.phpmyadmin.net
--
-- Inang: 127.0.0.1
-- Waktu pembuatan: 09 Jan 2019 pada 01.44
-- Versi Server: 5.6.14
-- Versi PHP: 5.5.6

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Basis data: `diwapedia`
--
CREATE DATABASE IF NOT EXISTS `diwapedia` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `diwapedia`;

-- --------------------------------------------------------

--
-- Struktur dari tabel `buku_tamu`
--

CREATE TABLE IF NOT EXISTS `buku_tamu` (
  `id` int(2) NOT NULL AUTO_INCREMENT,
  `nama` varchar(25) NOT NULL,
  `alamat` text NOT NULL,
  `jk` varchar(7) NOT NULL,
  `telp` varchar(12) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data untuk tabel `buku_tamu`
--

INSERT INTO `buku_tamu` (`id`, `nama`, `alamat`, `jk`, `telp`) VALUES
(1, 'Diwapedia', 'Kabupaten Kuningan, Jawa Barat', 'Pria', '08972637484'),
(2, 'Neng Diwa', 'Kuningan Satu', 'Wanita', '087724928022');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

c. Save as syntax SQL di atas, kemudian rename Text Document.txt  menjadi bukutamu.sql. Maka otomatis ekstensinya akan berubah menjadi .sql


3. Import Database & Tabel ke XAMPP


a. Aktifkan XAMPP, lalu klik Start Apache dan MySQL
b. Buka browser, lalu masuk ke localhost.
  • Pada address bar browser, ketik Localhost lalu enter.
c. Pada menu sebelah kiri, pilih phpMyAdmin.
d. Setelah halaman phpMyAdmin terbuka kemudian pilih Import
e. Import file bukutamu.sql,
f. Setelah berhasil di import, sekarang coba buka data tabel yang ada di dalam database diwapedia

Database | Diwapedia

Penjelasan :

Pada field id, di bagian yang diberi kotak merah terdapat tulisan AUTO_INCREMENT. Menjelaskan bahwa kita tidak perlu menginputkan data apapun pada field id.

Hal ini dikarenakan nilai yang disimpan di field id ini akan secara otomatis terisi setiap kali kita menginputkan data baru dan isi dari field id sendiri akan selalu lebih besar dari field id data sebelumnya.

Misalkan, data sebelumnya memiliki nilai id=1, maka ketika kita menginputkan data lagi, id dari data yang kita input ini akan otomatis berisi angka 2.

4. Membuat Halaman Penampil Data Buku Tamu


a. Buat file php bernama index.php di folder bukutamu
Caranya :
  • Pada folder bukutamu, Klik kanan > New > Text Document
  • Buka Text Document yang masih berekstensi .txt tersebut
  • Save as file tersebut lalu rename menjadi index.php
b. Copy dan paste-kan script dibawah ini kedalam file index.php


<html>
<head>
<title>Buku Tamu - Diwapedia</title>
</head>

<body>
<br  /><br  />
 <h2 style="text-align:center">Buku Tamu | <a href="https://www.diwapedia.me" target="_blank">www.Diwapedia.me</a></h2>
 <br />
 <center>
 <a href="input.php"><button style="height:30px; font-size:16px">Input</button></a>
 <br />
 <br />
   <table width="80%" style="border:#D41F00 2px solid">
      <tr style="background:#C0DCC0" height="50px">
        <td align="center">No</td>
        <td align="center">Nama</td>
        <td align="center">Alamat</td>
        <td align="center">Jenis Kelamin</td>
        <td align="center">Telp</td>
        <td align="center">Aksi</td>
      </tr>

  <?php
  include "config.php";
  
  
  $no=1;
  $query = mysql_query("select * from buku_tamu order by nama asc");
  while($tampil=mysql_fetch_array($query))
  {
  
  $id = $tampil['id'];
  $nama = $tampil['nama'];
  $alamat = $tampil['alamat'];
  $jk = $tampil['jk'];
  $telp = $tampil['telp'];
  
   echo"
   <tr height='30px'>
   <td align='center'>$no</td>
   <td>$nama</td>
   <td>$alamat</td>
   <td>$jk</td>
   <td>$telp</td>
   
   <td align='center'>
   <a href='edit.php?id=$id'>Edit</a> | <a href='delete.php?id=$id'>Delete</a>
   
   </td>
   </tr>
   ";
  
  $no++;
  }
  ?> 
    </table>
 </center>

</body>
</html>

c. Buka browser, lalu pada address bar ketik localhost/bukutamu. Setelah loading, nanti muncul tampilan dari halaman index.php

Hasilnya memang tampil, tetapi masih error.

Kenapa?
Karena kita belum membuat halaman fungsi konfigurasi untuk menghubungkan antara database dan website yang kita buat saat ini.

5. Membuat Script Konfigurasi Penghubung Database


a. Buat file php baru bernama config.php
b. Copy dan paste-kan script dibawah ini kedalam file config.php


<?php
$db_host = 'localhost';
$db_user = 'root';
$db_password = '';
$db_name = 'diwapedia';


$link=mysql_connect($db_host,$db_user,$db_password) or die('Koneksi ke server database gagal.');
mysql_select_db($db_name,$link) or die('Database tidak ditemukan.');

?>

Nah sekarang coba kembali jalankan halaman localhost/bukutamu pada browser dan nanti hasilnya tampak seperti gambar dibawah ini.

Tampilan Utama CRUD PHP Buku Tamu | Diwapedia

Catatan

Pada file index.php sebenarnya saya sudah menyisipkan script include "config.php"; sehingga kalian tidak perlu menyisipkan ulang script tersebut.


6. Membuat Halaman Fungsi Input Data


Dalam proses penginputan data, kita memerlukan 2 buah fungsi php, yaitu :
  • Halaman input.php untuk tempat menginputkan datanya
  • Halaman act_input.php untuk media pemroses data kedalam databasenya.
Adapun caranya ikuti langkah berikut :

 Membuat Script Input.php 

a. Buat file php baru bernama input.php
b. Copy dan paste-kan script dibawah ini kedalam file input.php


<html>
<head>
<title>Input Buku Tamu - Diwapedia</title>
</head>

<body>
<br  /><br  />
 <h2 style="text-align:center">Input Buku Tamu | <a href="https://www.diwapedia.me" target="_blank">www.Diwapedia.me</a></h2>
 <br />
 <center>
 <a href="index.php"><button style="height:30px; font-size:16px">Kembali</button></a>
 <br />
 <br />
 <form action="act_input.php" method="post" enctype="multipart/form-data">
 <table width="80%" style="border:#D41F00 2px solid" border="0">
      <tr>
        <td align="left" height="50px">Nama</td>
  <td align="center">:</td>
        <td align="left"><input type="text" name="nama" placeholder="Nama Kamu" style="height:40px; width:200px" /></td>
   </tr>
   
   <tr>
        <td align="left" height="50px">Alamat</td>
  <td align="center">:</td>
        <td align="left"><input type="text" name="alamat" placeholder="Alamat" style="height:40px; width:350px" /></td>
   </tr>
   
    <tr>
        <td align="left" height="50px">Jenis Kelamin</td>
  <td align="center">:</td>
        <td align="left">
  <input type="radio" name="jk" value="Pria" /> Pria &nbsp;&nbsp;&nbsp;
  <input type="radio" name="jk" value="Wanita" /> Wanita
  
  </td>
   </tr>
   
   <tr>
        <td align="left" height="50px">Telepon</td>
  <td align="center">:</td>
        <td align="left"><input type="text" name="telp" placeholder="08xxx" style="height:40px; width:150px" /></td>
   </tr>
   
   <tr>
        <td align="center" colspan="3"><input type="submit" name="save" value="Simpan" style="height:40px; width:100px" /></td>
   </tr>
    </table>
 </form>
 </center>

</body>
</html>

Penjelasan :

Pada script diatas, terdapat sebuah tag <form action="act_input.php" method="post">. Script ini menjelaskan bahwa setelah kalian mengisi form yang ada di halaman input.php, ketika kalian mengklik button Simpan, maka hasil penginputan selanjutnya dikirimkan ke halaman act_input.php dan disinilah data inputan kalian di proses untuk dimasukan kedalam database.

Method="post" sendiri menjelaskan bahwa data yang dikirim akan disamarkan.

Berbeda dengan Method="get", dimana proses pengiriman data sendiri akan tampil pada address bar.


 Membuat Script Act_input.php 

a. Buat file php baru bernama act_input.php
b. Copy dan paste-kan script dibawah ini kedalam file act_input.php


<?php
include "config.php";

$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$jk = $_POST['jk'];
$telp = $_POST['telp'];

$simpan = mysql_query("INSERT INTO buku_tamu(nama,alamat,jk,telp) VALUES('$nama','$alamat','$jk','$telp')");
if($simpan)
{
 echo"<script languange="Javascript"> alert("Data Berhasil Disimpan");
 </script>";
 
 echo "<meta http-equiv="refresh" content="0; url=index.php">";
}
else
{
 echo"<script languange="Javascript"> alert("Nampaknya Error");
 </script>";
 
 echo "<meta http-equiv="refresh" content="0; url=input.php">";

}

?>


Setelah file input.php dan act_input.php berhasil dibuat, sekarang kalian bisa mencoba melakukan penginputan data.

Untuk masuk ke halaman input.php sendiri sangat mudah, cukup dengan mengklik button Input di halaman utama (index.php).

7. Membuat Halaman Fungsi Pengeditan


Dalam proses mengedit sebuah data, kita memerlukan 2 buah fungsi editor, yaitu :
  • Halaman edit.php untuk tempat mengedit datanya
  • Halaman act_edit.php untuk media pemroses data kedalam databasenya.
Adapun caranya ikuti langkah berikut :

 Membuat Script Edit.php 

a. Buat file php baru bernama edit.php
b. Copy dan paste-kan script dibawah ini kedalam file edit.php


<?php
include "config.php";
$edit = mysql_fetch_array(mysql_query("SELECT * FROM buku_tamu WHERE id='$_GET[id]'"));

?>

<html>
<head>
<title>Edit Buku Tamu - Diwapedia</title>
</head>

<body>
<br  /><br  />
 <h2 style="text-align:center">Edit Buku Tamu | <a href="https://www.diwapedia.me" target="_blank">www.Diwapedia.me</a></h2>
 <br />
 <center>
 
 <br />
 <br />
 <form action="act_edit.php" method="post" enctype="multipart/form-data">
 
 <input type="hidden" name="id" value="<?php echo"$edit[id]"; ?>" />
 
 <table width="80%" style="border:#D41F00 2px solid" border="0">
      <tr>
        <td align="left" height="50px">Nama</td>
  <td align="center">:</td>
        <td align="left"><input type="text" name="nama" placeholder="Nama Kamu" value="<?php echo"$edit[nama]"; ?>" style="height:40px; width:200px" /></td>
   </tr>
   
   <tr>
        <td align="left" height="50px">Alamat</td>
  <td align="center">:</td>
        <td align="left"><input type="text" name="alamat" placeholder="Alamat" value="<?php echo"$edit[alamat]"; ?>" style="height:40px; width:350px" /></td>
   </tr>
   
    <tr>
        <td align="left" height="50px">Jenis Kelamin</td>
  <td align="center">:</td>
        <td align="left">
  
  <?php
  if($edit['jk']=="Pria")
  {
   $check_pria = "checked";
   $check_wanita = "";
  }
  else
  {
   $check_pria = "";
   $check_wanita = "checked";
  }
  ?>
  
  <input type="radio" name="jk" value="Pria" <?php echo"$check_pria"; ?> /> Pria &nbsp;&nbsp;&nbsp;
  <input type="radio" name="jk" value="Wanita" <?php echo"$check_wanita"; ?> /> Wanita
  
  </td>
   </tr>
   
   <tr>
        <td align="left" height="50px">Telepon</td>
  <td align="center">:</td>
        <td align="left"><input type="text" name="telp" placeholder="08xxx" value="<?php echo"$edit[telp]"; ?>" style="height:40px; width:150px" /></td>
   </tr>
   
   <tr>
        <td align="center" colspan="3"><input type="submit" name="save" value="Edit" style="height:40px; width:100px" /> &nbsp;&nbsp;&nbsp;
  <a href="index.php">Batal</a>
  
  </td>
   </tr>
    </table>
 </form>
 </center>

</body>
</html>

 Membuat Script Act_edit.php 

a. Buat file php baru bernama act_edit.php
b. Copy dan paste-kan script dibawah ini kedalam file act_edit.php


<?php
include "config.php";

$id = $_POST['id'];
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$jk = $_POST['jk'];
$telp = $_POST['telp'];

$edit = mysql_query("UPDATE buku_tamu SET 

     nama='$nama',
     alamat='$alamat',
     jk='$jk',
     telp='$telp'
     
     WHERE id='$id'
     ");
if($edit)
{
 echo"<script languange="Javascript"> alert("Data Berhasil Diubah");
 </script>";
 
 echo "<meta http-equiv="refresh" content="0; url=index.php">";
}
else
{
 echo"<script languange="Javascript"> alert("Nampaknya Error");
 </script>";
 
 echo "<meta http-equiv="refresh" content="0; url=edit.php?id='$id'">";

}

?>

Setelah file edit.php dan act_edit.php berhasil dibuat, sekarang fungsi edit yang ada pada halaman index.php sudah dapat berfungsi.

8. Membuat Fungsi Delete Data


Untuk membuat fungsi delete data, kita hanya memerlukan 1 buah halaman php yang langsung ditujukan sebagai pemroses data ke database.

Adapun caranya seperti berikut :

a. Buat file php baru bernama delete.php
b. Copy dan paste-kan script dibawah ini kedalam file delete.php


<?php
include "config.php";

$id = $_GET['id'];

$delete = mysql_query("DELETE from buku_tamu where id='$id'");
if($delete)
{
 echo"<script languange="Javascript"> alert("Data Berhasil Dihapus");
 </script>";
 
 echo "<meta http-equiv="refresh" content="0; url=index.php">";
}
else
{
 echo"<script languange="Javascript"> alert("Nampaknya Error");
 </script>";
 
 echo "<meta http-equiv="refresh" content="0; url=index.php">";

}

?>

Nah itu dia tutorial lengkap membuat CRUD dengan PHP dan MySQL pada pengelolaan data buku tamu.

Jika ada masalah silahkan tinggalkan jejak di kolom komentar.



Tags:

Post a Comment

0 Comments