Skip to content Skip to sidebar Skip to footer
Home / MySQL / PHP

Membuat Aplikasi CRUD Sederhana dengan PHP dan MySQL Untuk Pemula

Post a Comment

Untuk yang sedang mencari tutorial membuat crud sederhana untuk pemula, maka kamu sedang di jalan yang benar.
Untuk yang tidak tahu apa itu CRUD, CRUD merupakan singkatan dari Create Read Update dan Delete
Membuat CRUD dengan PHP dan MySQL merupakan salah satu kemampuan dasar yang harus dimilki seorang web developer. Pada tutorial kali ini akan menjelaskan CRUD dengan PHP dan MySQL dengan membuat sebuah aplikasi sederhana
Pada Tutorial ini mencoba menjelaskan bagaimana  membuat aplikasi crud  tahap demi tahap,berikut tahapan dalam turotial ini;

  • Hasil Aplikasi
  • Strukture Aplikasi
  • Persiapan Database
  • HTML Dasar
  • Membuat Record baru di PHP
  • Membaca / Menampilkan Record (Read)
  • Update / Edit Record di PHP
  • Delete / Menghapus Isi Record di PHP

Hasil Aplikasi

Hasil dari aplikasi ini bisa dilihat di gambar berikut, atau jika kurang mendetial bisa lihat video berikut;

Strukture Aplikasi

Berikut merupakan file yang terdapat pada pembuatan Aplikasi CRUD dengan PHP dan MySql Untuk Pemula ini;
phpcrud/asset -  Bootstrap CSS framework and jQuery library      
phpcrud/config
koneksi.php  - untuk membuat koneksi dan konfigurasi database.
kodeauot.php -  untuk membuat id otomatis pada saat menmbah data tabel
phpcrud/images – folder untuk menyimpan gambar
phpcrud/modul
read.php – untuk membaca record dari database, menggunakan tabel html untuk menampilkan data yang diterima dari database
edit.php – untuk mengedit / update record, menggunakan html form untuk menampilkan data berdasarkan parameter “id”
edit_p.php – proses ketika selesai merubah
hapus.php – untuk menghapus record berdasarkan “id” yang dipilih, ketika selesai akan diarahkan kembali ke read.php
tambah.php – untuk menambah record baru,menggunakan html form dimana user dapat menuliskan data record tersebut.
tambah_p.php – sebagai proses menambhkan record ke database.
index.php – sebagai file html utama / dasar untuk menampilkan seluruh halaman di aplikasi ini, isi halaman berbeda tergantung proses mana yang ingin ditampilkan
switch.php – untuk menghubungkan tiap –tiap halaman. Jadi kita tidak perlu menulis ulang semua file html di setiap halaman cukup satu.

Persiapan Database

Membuat database
Buka phpmyadmin kemudian create database dengan nama “cruds”. Jika kurang tahu bisa ikuti tutorial berikut :
Baca Juga : Membuat Database baru dengan PHPMyAdmin
Jika sudah kemudian create tabel dengan nama “blogger”, untuk membuat tabel bisa di menu structure atau dengan menulis query berikut di menu SQL.
Baca Juga : Membuat Tabel baru pada Database MySQL di PHPMyAdmin

CREATE TABLE IF NOT EXISTS `blogger` (
  `idblogger` varchar(3) NOT NULL,
  `nama` varchar(20) DEFAULT NULL,
  `alamat` varchar(50) DEFAULT NULL,
  `notelp` varchar(13) DEFAULT NULL,
  `nmsitus` varchar(20) DEFAULT NULL,
  `umursitus` varchar(2) DEFAULT NULL,
  PRIMARY KEY (`idblogger`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Sedangkan untuk memasukan sebuah baris(record ) kedalam tabel mysql  menggunakan perintah insert
                          
-- Dumping data for table `blogger`
INSERT INTO `blogger` (`idblogger`, `nama`, `alamat`, `notelp`, `nmsitus`, `umursitus`) VALUES
('1', 'Indra', 'indramayu', '089xxxxxx', 'www.emod.id', '5'),
('2', 'Nazgul', 'Cirebon', '08723917652', 'www.nazgul.com', '3'),
('3', 'Nazz', 'Kuningan', '086287262', 'www.kungingan.id', '4'),
('4', 'MJLengka', 'Majalengka', '083849928928', 'www.mjlengka.com', '5'),
('5', 'Ahmad', 'indramayu', '0867xxxx', 'www.h.com', '2');

Membuat Koneksi dengan Database
Buat file dengan nama koneksi.php, kemudian tulis seperti kode berikut;
<?php
$my['host']       = "localhost";
$my['user']       = "root";
$my['pass']      = "";
$my['dbs']        = "cruds";
$koneksi          = mysql_connect($my['host'],
                                                                                    $my['user'],
                                                                                    $my['pass']);
if (! $koneksi) {
  echo "Koneksi gagal";
  mysql_error();
}
mysql_select_db($my['dbs'])
             or die ("Database tidak ada".mysql_error());
?>

HTML Dasar

Html ini sebagai tampilan untuk semua halaman dalam aplikasi ini.
Buat file baru kemudian isi dengan code berikut, kemudian save dengan nama index.php
Pada code tersebut terdapat code  <?php include "switch.php";?> berfungsi untuk memanggil file isi tiap - tiap halaman.

<?php
if(isset($_GET["link"])){
    $link = $_GET["link"];
}else{
    $link = "";
}
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
   <script src="asset/js/pop.js" type="text/javascript"></script>
   <script type="text/javascript">
    function tutup (bersih) {
      document.getElementById(bersih).innerHTML="";
    }
  </script>
    <title>Simple CRUD</title>
    <!-- Bootstrap core CSS -->
    <link href="asset/css/bootstrap.min.css" rel="stylesheet">
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="asset/css/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="asset/css/blog.css" rel="stylesheet">
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="asset/js/ie-emulation-modes-warning.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
     <div class="blog-masthead">
        <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item active" href="index.php">Home</a>
          <a class="blog-nav-item" href="index.php?link=apl">Tentang Aplikasi</a>
          <a class="blog-nav-item" href="index.php?link=tambah">Tambah</a>
        </nav>
        </div>
     </div>

<div class="container">
      <div class="blog-header">
          <h1 class="blog-title">Simpe CRUD Dengan PHP dan MySQL</h1>
      </div>
  </br>
    <div class="row">
      <div class="col-sm-9 blog-main">
           <?php include "switch.php";?>
      </div>
      <!-- /.blog-sidebar -->
      <div class="col-sm-2 col-sm-offset-1 blog-sidebar">
           <div class="sidebar-module">
             <h4>Blog</h4>
             <ol class="list-unstyled">
               <li><a href="http://emodjeh.blogspot.com/" target="_blank">Tutorial CRUD</a></li>
               <li><a href="http://batchdrama.blogspot.com/"target="_blank">Download Film</a></li>
             </ol>
           </div>
           <!-- <div class="sidebar-module sidebar-module-inset">
                <h4>PG Jatitujuh</h4>
                <img src="images/pg.jpg" align="center" style="float:center;width:200px;height:150px;">
           </div> -->
      </div><!-- /.blog-sidebar -->
     </div><!-- /.rows-->
</div><!-- /.container -->
   <footer class="blog-footer">
      <p>builtfrom <a href="http://getbootstrap.com">Bootstrap</a> Redesign by <a href="https://www.facebook.com/emodjeh">|emodjeh <!-- <img src="images/logo.png" align="center" style="float:center;width:20px;height:20px;"> --></a></p>
    </footer>

       <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="css/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="asset/css/js/ie10-viewport-bug-workaround.js"></script>
    <script src="asset/css/datatables/js/jquery.dataTables.min.js"></script>
    <script src="asset/css/datatables-plugins/dataTables.bootstrap.min.js"></script>
    <script src="asset/css/datatables-responsive/dataTables.responsive.js"></script>
      <script>
    $(document).ready(function() {
        $('#dataTables-example').DataTable({
            responsive: true
        });
    });
    </script>
  </body>
</html>

Membuat Record baru di PHP

Code HTML Form Input Tambah Data
Code berikut untuk membuat form HTML dengan field input sesuai dengan fields yang ada di database, buat file baru kemudian isi dengan code berikut lalu save dengan nama tambah.php
<?php
include"config/koneksi.php";
include "config/kodeauto.php";
?>
<div class="blog-post">
<h1 class="blog-title">Tambah Record</h1>
<form name="form1" method="post" action="?link=tambah_p" enctype="multipart/form-data" name="FMHS">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1">
  <tr>
     <td bgcolor="#FFFFFF"><table width="600" border="0" align="center" cellpadding="5" cellspacing="0">
                  <tr>
             <input name="TxtKodeH" type="hidden" value="<?= kdauto("blogger",""); ?>" />
          </tr>
           <tr>
            <td>Nama</td>
            <td>:</td>
            <td><input name="nama" type="text" id="nama" size="30" maxlength="30" ></td>
          </tr>
          <tr>
            <td>Alamat</td>
            <td>:</td>
            <td><input name="alamat" type="text" id="alamat" size="30" maxlength="255" ></td>
          </tr>
                           <tr>
            <td>No Telp</td>
            <td>:</td>
            <td><input name="notelp" type="text" id="notelp" size="30" maxlength="255" ></td>
          </tr>
                          <tr>
            <td>Situs</td>
            <td>:</td>
            <td><input name="situs" type="text" id="situs" size="30" maxlength="255" ></td>
          </tr>
                          <tr>
            <td>Umur Situs</td>
            <td>:</td>
            <td><input name="umur" type="text" id="umur" size="30" maxlength="255" ></td>
          </tr>
          <tr>
            <td colspan="3" align="left">
              <input name="fok" type="submit" id="fok" class="btn btn-primary"  value="Simpan">
              <input type="button" name="button" class="btn btn-primary"  value="batal" onclick="self.history.back()">
            </td>
          </tr>
     </table></td>
  </tr>
  </table>
</form>
</div>

Code Untuk Proses Membuat Record Baru (Data Baru Di Dalam Tabel)
Buat file baru , kemudian isikan dengan code berikut dan save dengan nama tambah_p.php. Guna file ini untuk memproses data inputan yang kemudian disimpan didatabase.
<?php 
include "config/koneksi.php";
# Baca variabel Form
if(isset($_POST["TxtKodeH"])){
    $TxtKodeH = $_POST["TxtKodeH"];
}else{
    $TxtKodeH = "";
}
if(isset($_POST["nama"])){
    $nama = $_POST["nama"];
}else{
    $nama = "";
}
if(isset($_POST["id"])){
    $id = $_POST["id"];
}else{
    $id = "";
}
if(isset($_POST["alamat"])){
    $alamat = $_POST["alamat"];
}else{
    $alamat = "";
}
if(isset($_POST["notelp"])){
    $notelp = $_POST["notelp"];
}else{
    $notelp = "";
}
if(isset($_POST["situs"])){
    $situs = $_POST["situs"];
}else{
    $situs = "";
}
if(isset($_POST["umur"])){
    $umur = $_POST["umur"];
}else{
    $umur = "";
}

# membuat id otomatis
  $q="SELECT * FROM `blogger` ORDER BY idblogger DESC LIMIT 1";
     $qry=mysql_query($q, $koneksi)
            or die ("SQL Error id ".mysql_error());
  $id= mysql_num_rows($qry);
  $data = mysql_fetch_array($qry);
  if($id <= 0){
     $idbaru = $TxtKodeH ;
      }
  else{
      $idbaru = $data['idblogger'] + 1;
      }

# Validasi Form
if (trim($nama)=="") {
  echo "nama masih kosong, ulangi kembali";
  include "tambah.php";
}
elseif (trim($alamat)=="") {
  echo "alamat masih kosong, ulangi kembali";
  include "tambah.php";
}
elseif (trim($notelp)=="") {
  echo "Notelp masih kosong, ulangi kembali";
  include "tambah.php";
}
elseif (trim($situs)=="") {
  echo "Situs masih kosong, ulangi kembali";
  include "tambah.php";
}
elseif (trim($umur)=="") {
  echo "umur masih kosong, ulangi kembali";
  include "tambah.php";
}
else  {
  $sql  = " INSERT INTO `blogger` (`idblogger`, `nama`, `alamat`, `nmsitus`, `notelp`, `umursitus`)
            VALUES ('$idbaru','$nama','$alamat','$situs','$notelp','$umur')";
            mysql_query($sql, $koneksi)
            or die ("SQL Error".mysql_error());

  echo "Data Berhasil disimpan";
  include "read.php";
}
?>

Membaca / Menampilkan Record (Read)

Seperti biasa buat file baru kemudian isikan code dibawah ini,kemudian save dengan nama read.php
<?php
include "config/koneksi.php";
?>
<script type="text/javascript">
function hapus (url) {
  var h = confirm('Anda Yakin Hapus Data');
  if (h == true) {
    window.location = url;
  }
}
</script>
 <div class="blog-post">
<h1 class="blog-title">Menampilkan Record</h1>
  <table class="table table-bordered table-responsive" width="600" border="0" cellpadding="1" cellspacing="1" >
    <tr>
      <td width="40" align="center"><b>No.</b></td>
      <td width="200" align="center"><b>Nama</b></td>
              <td width="200" align="center"><b>Alamat</b></td>
              <td width="200" align="center"><b>No.Telp</b></td>
              <td width="200" align="center"><b>Situs</b></td>
              <td width="200" align="center"><b>Umur Situs</b></td>
      <td width="100" align="center"><b>Menu</b></td>
    </tr>
    <?php $no=0;
                 $sql = "SELECT * FROM blogger";
                 $qry = mysql_query($sql, $koneksi)
                                  or die ("SQL Error".mysql_error());
                 while ($data=mysql_fetch_array($qry)) {
                 $no++;
    ?>
    <tr bgcolor="#FFFFFF">
      <td><?php echo $no ?></td>
      <td><?php echo $data['nama']; ?></td>
              <td><?php echo $data['alamat']; ?></td>
               <td><?php echo $data['notelp']; ?></td>
              <td><?php echo $data['nmsitus']; ?></td>
              <td><?php echo $data['umursitus']; ?>Th</td>
      <td align="center">
           <a href="?link=edit&kdubah=<?= $data['idblogger']; ?>"><img src="images/edit.png" border="0" title="Edit"></a>|
           <a href="#" onClick="hapus('index.php?link=hapus&kdhapus=<?= $data['idblogger']; ?>');">
           <img src="images/hapus.png" border="0" title="Hapus"></a>
      </td>
    </tr>
    <?php
    }
    ?>
  </table>
</div>

Jika ingin menampilkan data sesuai keinginan atau dalam berbagai macam bentuk, ubah Query select tersebut sesuai dengan kebutuhan
"SELECT * FROM blogger"
Kemudian sesuaikan table HTML untuk menampilkan setiap isi Query tersebut. Jika belum Paham Mengenai Macam macam Query SELECT bisa ikuti tutorail berikut.
Baca Juga : Macam Macam Bentuk Penulisan Query SELECT

Update / Edit Record di PHP

Code HTML Form Untuk Update Tabel
Buat file baru kemudian isikan dengan kode berikut, lalu save dengan nama edit.php
<?php
include"config/koneksi.php";

#Variabel URL
$kdubah = $_REQUEST['kdubah'];
if ($kdubah !="") {
#menampilkan data
  $sql = "SELECT * FROM blogger WHERE idblogger='$kdubah'";
  $qry = mysql_query ($sql, $koneksi)
    or die ("SQL Error" .mysql_error());
  $data=mysql_fetch_array($qry);

# Samakan dgn variabel form
$id       = $data['idblogger'];
$nama     = $data['nama'];
$notelp   = $data['notelp'];
$alamat   = $data['alamat'];
$situs    = $data['nmsitus'];
$umur     = $data['umursitus'];
}
?>
<div class="blog-post">
<h1 class="blog-title">Edit Record</h1>
<form name="form1" method="post" action="?link=edit_p" enctype="multipart/form-data" name="FMHS">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1">
  <tr>
     <td bgcolor="#FFFFFF"><table width="600" border="0" align="center" cellpadding="5" cellspacing="0">
                 <tr>
            <td><input name="id" type="hidden" id="id" size="30" maxlength="30" value="<?= $id; ?>"></td>
          </tr>
           <tr>
            <td>Nama</td>
            <td>:</td>
            <td><input name="nama" type="text" id="nama" size="30" maxlength="30" value="<?= $nama; ?>"></td>
          </tr>
          <tr>
            <td>Alamat</td>
            <td>:</td>
            <td><input name="alamat" type="text" id="alamat" size="30" maxlength="255" value="<?= $alamat; ?>"></td>
          </tr>
                          <tr>
            <td>No.Telp</td>
            <td>:</td>
            <td><input name="notelp" type="text" id="notelp" size="30" maxlength="255" value="<?= $notelp; ?>"></td>
          </tr>
                          <tr>
            <td>Situs</td>
            <td>:</td>
            <td><input name="situs" type="text" id="situs" size="30" maxlength="255" value="<?= $situs; ?>"></td>
          </tr>
                          <tr>
            <td>Umur Situs</td>
            <td>:</td>
            <td><input name="umur" type="text" id="umur" size="30" maxlength="255" value="<?= $umur; ?>"></td>
          </tr>
          <tr>
            <td colspan="3" align="left">
              <input name="fok" type="submit" id="fok" class="btn btn-primary"  value="Simpan">
              <input type="button" name="button" class="btn btn-primary"  value="batal" onclick="self.history.back()">
            </td>
          </tr>
     </table></td>
  </tr>
  </table>
</form>
</div>

Code Untuk Proses Update Record di PHP
Buat file baru kemudian isikan dengan kode berikut, lalu save dengan nama edit_p.php
Code ini bertujuan untuk menyimpan hasil inputan form HTML kedalam database.
<?php 
include "config/koneksi.php";
 
# Baca variabel Form
if(isset($_POST["nama"])){
    $nama = $_POST["nama"];
}else{
    $nama = "";
}
if(isset($_POST["id"])){
    $id = $_POST["id"];
}else{
    $id = "";
}
if(isset($_POST["alamat"])){
    $alamat = $_POST["alamat"];
}else{
    $alamat = "";
}
if(isset($_POST["notelp"])){
    $notelp = $_POST["notelp"];
}else{
    $notelp = "";
}
if(isset($_POST["situs"])){
    $situs = $_POST["situs"];
}else{
    $situs = "";
}
if(isset($_POST["umur"])){
    $umur = $_POST["umur"];
}else{
    $umur = "";
}

# Validasi Form
if (trim($nama)=="") {
  echo "nama masih kosong, ulangi kembali";
  include "edvarietas.php";
}
elseif (trim($alamat)=="") {
  echo "alamat masih kosong, ulangi kembali";
  include "edvarietas.php";
}
elseif (trim($situs)=="") {
  echo "Situs masih kosong, ulangi kembali";
  include "edvarietas.php";
}
elseif (trim($umur)=="") {
  echo "umur masih kosong, ulangi kembali";
  include "edvarietas.php";
}

else  {
  $sql  = "  UPDATE `blogger`  SET  nama='$nama', alamat='$alamat',notelp='$notelp',nmsitus='$situs', umursitus='$umur'
             WHERE idblogger='$id'";
               mysql_query($sql, $koneksi)
            or die ("SQL Error".mysql_error());
  echo "Data Berhasil disimpan";
  include "read.php";
}
?>

Delete / Menghapus Isi Record di PHP

Notifikasi Hapus File
Sebelum menghapus file ada baiknya membuat notifikasi dahulu untuk menghindari kesalahan menghapus.
<script type="text/javascript">
function hapus (url) {
  var h = confirm('Anda Yakin Hapus Data');
  if (h == true) {
    window.location = url;
  }
}
</script>

Tulis code didalam code read.php letakan di bagian paling atas/ sebelum code <div class="blog-post">

Code Menghapus Record di PHP
Berikut merupakan code untuk menghapus Record di PHP.
Buat file baru kemudian isikan code berikut lalu save dengan nama hapus.php
<?php
include "config/koneksi.php";

# Baca variabel URL
$kdhapus = $_REQUEST['kdhapus'];

if ($kdhapus) {           
             $sql = "DELETE FROM  blogger WHERE idblogger='$kdhapus'";
             mysql_query($sql, $koneksi)
                          or die ("SQL Error".mysql_error());
           
             echo "Data Sudah Di Hapus";
             include "read.php";
}else {
            echo "Data Kosong";
}
?>

Source File Lengkap Aplikasi bisa di download DISINI

Terima Kasih sudah berkunjung semoga bermanfaat

Post a Comment for "Membuat Aplikasi CRUD Sederhana dengan PHP dan MySQL Untuk Pemula"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel