Breaking

Tuesday, January 14, 2020

Unlabelled Membuat Aplikasi CRUD

Membuat Aplikasi CRUD

by on
CRUD adalah istilah singkat dari Create Read Update Delete, berikut ini kita akan membuat aplikasi sederhana CRUD untuk pembelajaran, scriptnya kita akan buat sangat sederhana jadi mudah di fahami dan di kembangkan sendiri.

sebelumnya input dulu query database di bawah ini...

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL
  2. CREATE TABLE IF NOT EXISTS `mahasiswa` (
  3.   `id_mahasiswa` int(50) NOT NULL AUTO_INCREMENT,
  4.   `nama` text COLLATE latin1_general_ci NOT NULL,
  5.   `jenis_kelamin` text COLLATE latin1_general_ci NOT NULL,
  6.   `alamat` text COLLATE latin1_general_ci NOT NULL,
  7.   `telepon` text COLLATE latin1_general_ci NOT NULL,
  8.   PRIMARY KEY (`id_mahasiswa`)
  9. ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=100001 ;


Dan buat dulu file koneksi.php, file ini yang akan menghubungkan antara script php dengan database MySQl nanti..

berikut script koneksi.php..


DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL
  1. <?php
  2. $koneksi = mysqli_connect
  3.             (
  4.                 "localhost",
  5.                 "root",
  6.                 "",
  7.                 "crud"
  8.             );
  9. if (mysqli_connect_errno())
  10.     {
  11.         echo "Koneksi Gagal"
  12.         .mysqli_connect_error();
  13.     }
  14. ?>

setelah itu kita buat file index.php dengan script berikut..

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL
  1. <html>
  2. <title>Aplikasi CRUD Sederhana</title>
  3. <head>
  4. <link rel="stylesheet" href="style/bootstrap.min.css" />
  5. </head>
  6. <body>
  8. <div class="container" style="margin-top:8%">
  9.     <div class="row">
  10.         <div class="col-md-8 col-md-offset-2">
  11.             <p>
  12.                 <center>
  13.                     <h2>Aplikasi Crud Sederhana</h2>
  14.                     Oleh : <a href="https://www.facebook.com.pendeta.mokong" target="_blank">Rully Studio</a>
  15.                 </center>
  16.             </p>
  17.             <br>
  18.             <p>
  19.                 <a class="btn btn-primary" href="tambah.php">Tambah</a>
  20.             </p>
  21.             <table class="table table-bordered">
  22.                 <tr>
  23.                     <th>
  24.                         No
  25.                     </th>
  26.                     <th>
  27.                         Nama
  28.                     </th>
  29.                     <th>
  30.                         Jenis Kelamin
  31.                     </th>
  32.                     <th>
  33.                         Telepon
  34.                     </th>
  35.                     <th>
  36.                         Alamat
  37.                     </th>
  38.                     <th>
  39.                         Opsi
  40.                     </th>
  41.                 </tr>
  42.                     <?php
  43.                         include"koneksi.php";
  44.                         $no = 1;
  45.                         $data = mysqli_query ($koneksi, " select
  46.                                                                 id_mahasiswa,
  47.                                                                 nama,
  48.                                                                 jenis_kelamin,
  49.                                                                 telepon,
  50.                                                                 alamat
  51.                                                           from
  52.                                                           mahasiswa
  53.                                                           order by id_mahasiswa DESC");
  54.                         while ($row = mysqli_fetch_array ($data))
  55.                         {
  56.                     ?>
  57.                 <tr>
  58.                     <td>
  59.                         <?php echo $no++; ?>
  60.                     </td>
  61.                     <td>
  62.                         <?php echo $row['nama']; ?>
  63.                     </td>
  64.                     <td>
  65.                         <?php echo $row['jenis_kelamin']; ?>
  66.                     </td>
  67.                     <td>
  68.                         <?php echo $row['telepon']; ?>
  69.                     </td>
  70.                     <td>
  71.                         <?php echo $row['alamat']; ?>
  72.                     </td>
  73.                     <td>
  74.                         <a href="detail.php?id=<?php echo$row['id_mahasiswa']; ?>">Detail</a> |
  75.                         <a href="edit.php?id=<?php echo$row['id_mahasiswa']; ?>">Edit</a> |
  76.                         <a href="hapus.php?id=<?php echo$row['id_mahasiswa']; ?>">Hapus</a>
  77.                     </td>
  78.                 </tr>
  79.                 <?php
  80.                     }
  81.                 ?>
  82.             </table>
  83.         </div>
  84.     </div>
  85.     <p>
  86.     <center>Copyright @ 2018 by : <a href="https://www.facebook.com.pendeta.mokong" target="_blank">Rully Studio</a> All rights reserved.</center>
  87.     </p>
  88. </div>
  89. </body>
  90. </html>


Simpan dan kita coba jalankan di browser, hasilanya kurang lebih seperti di bawah ini

Tampil data

Script index.php di atas adalah untuk menampilkan data dari database,  selanjutnya kita akan membuat form untuk mengisi data..

Berikut Scriptnya..

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL
  1. <html>
  2. <title>Aplikasi CRUD Sederhana</title>
  3. <head>
  4. <link rel="stylesheet" href="style/bootstrap.min.css" />
  5. </head>
  6. <body>
  8. <div class="container" style="margin-top:8%">
  9.     <div class="row">
  10.         <div class="col-md-8 col-md-offset-2">
  11.             <p>
  12.                 <center>
  13.                     <h2>Aplikasi Crud Sederhana</h2>
  14.                     Oleh : <a href="https://www.facebook.com.pendeta.mokong" target="_blank">Rully Studio</a>
  15.                 </center>
  16.             </p>
  17.             <br>
  18.            
  19.                                     <form role="form" method="post"action="input.php">
  20.                                         <div class="form-group">
  21.                                             <label>Nama</label>
  22.                                             <input class="form-control"name="nama">
  23.                                         </div>
  24.                                         <div class="form-group">
  25.                                             <label>Jenis Kelamin</label>
  26.                                             <div class="radio">
  27.                                                 <label>
  28.                                                     <input type="radio"name="jenis_kelamin" value="Laki-laki" checked>Laki-laki
  29.                                                 </label>
  30.                                             </div>
  31.                                             <div class="radio">
  32.                                                 <label>
  33.                                                     <input type="radio"name="jenis_kelamin" value="Perempuan">Perempuan
  34.                                                 </label>
  35.                                             </div>
  36.                                         </div>
  37.                                         <div class="form-group">
  38.                                             <label>Telepon</label>
  39.                                             <input class="form-control"name="telepon">
  40.                                         </div>
  41.                                         <div class="form-group">
  42.                                             <label>Alamat</label>
  43.                                             <textarea name="alamat"class="form-control" rows="3"></textarea>
  44.                                         </div>
  45.                                         <button type="submit" class="btn btn-primary pull-right">Simpan</button>
  46.                                         <a href="index.php" class="btn btn-success pull-right" style="margin-right:1%;">Batal</a>
  47.                                     </form>
  48.         </div>
  49.     </div>
  50.     <p>
  51.     <center>Copyright @ 2018 by : <a href="https://www.facebook.com.pendeta.mokong" target="_blank">Rully Studio</a> All rights reserved.</center>
  52.     </p>
  53. </div>
  54. </body>
  55. </html>


Cek jalankan di browser, berikut hasilnya..

Form tambah

Setelah form untuk mengisi data tersedia, kita buat lagi file dengan nama input.php, file ini berfungsi untuk mengirim data di form ke database mysql..

Berikut script fle input.php..

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL
  1. <?php
  2. include"koneksi.php";
  4. $nama = $_POST['nama'];
  5. $jenis_kelamin = $_POST['jenis_kelamin'];
  6. $alamat = $_POST['alamat'];
  7. $telepon = $_POST['telepon'];
  9. $query = "insert INTO mahasiswa SET
  10.                                 nama = '$nama',
  11.                                 jenis_kelamin = '$jenis_kelamin',
  12.                                 alamat = '$alamat',
  13.                                 telepon = '$telepon'
  14.                                 ";
  16. mysqli_query($koneksi, $query)
  17. or die ("Gagal Perintah SQL".mysql_error());
  18. header('location:index.php');
  20. ?>

Sekarang jalankan file index.php coba klik tombol Tambah maka akan tampil form tambah, coba isi kan data lalu klik tombol simpan.. maka data akan tersimpan ke database lalu di tampilkan kembali melalui halaman index.php seperti di bawah ini..

Tampil data

Selanjutnya kita akan buat fitur melihat detail data, buat file dengan nama detail.php dengan script di bawah ini..

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL
  1. <html>
  2. <title>Aplikasi CRUD Sederhana</title>
  3. <head>
  4. <link rel="stylesheet" href="style/bootstrap.min.css" />
  5. </head>
  6. <body>
  9. <?php
  10.     include"koneksi.php";
  11.     $no = 1;
  12.     $data = mysqli_query ($koneksi, " select
  13.                                             id_mahasiswa,
  14.                                             nama,
  15.                                             jenis_kelamin,
  16.                                             telepon,
  17.                                             alamat
  18.                                       from
  19.                                       mahasiswa
  20.                                       where id_mahasiswa = $_GET[id]");
  21.     $row = mysqli_fetch_array ($data);
  22.    
  23. ?>
  24. <div class="container" style="margin-top:8%">
  25.     <div class="row">
  26.         <div class="col-md-8 col-md-offset-2">
  27.             <p>
  28.                 <center>
  29.                     <h2>Aplikasi Crud Sederhana</h2>
  30.                     Oleh : <a href="https://www.facebook.com.pendeta.mokong" target="_blank">Rully Studio</a>
  31.                 </center>
  32.             </p>
  33.             <br>
  34.             <p>
  35.                 <a class="btn btn-success" href="index.php">Kembali</a>
  36.             </p>
  37.             <table class="table table-stripped">
  38.                 <tr>
  39.                     <td style="width:10%;">
  40.                         Nama
  41.                     </td>
  42.                     <td>
  43.                         : <?php echo $row['nama']; ?>
  44.                     </td>
  45.                 </tr>
  46.                 <tr>                   
  47.                     <td>
  48.                         Telepon
  49.                     </td>
  50.                     <td>
  51.                         : <?php echo $row['telepon']; ?>
  52.                     </td>
  53.                 </tr>
  54.                 <tr>       
  55.                     <td>
  56.                         Alamat
  57.                     </td>
  58.                     <td>
  59.                         : <?php echo $row['alamat']; ?>
  60.                     </td>
  61.                 </tr>
  62.             </table>
  63.         </div>
  64.     </div>
  65.     <p>
  66.     <center>Copyright @ 2018 by : <a href="https://www.facebook.com.pendeta.mokong" target="_blank">Rully Studio</a> All rights reserved.</center>
  67.     </p>
  68. </div>
  69. </body>
  70. </html>

coba klik detail pada kolom opsi di halaman index.php, hasilnya kurang lebih seperti di bawah ini..

Detail Data

Fitur selanjutnya adalah edit data..

buat file edit.php, script ini akan mengambil id data yang mau di edit dan di tampilkan ke dalam form..

berikut adalah script edit.php nya..

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL
  1. <html>
  2. <title>Aplikasi CRUD Sederhana</title>
  3. <head>
  4. <link rel="stylesheet" href="style/bootstrap.min.css" />
  5. </head>
  6. <body>
  8. <div class="container" style="margin-top:8%">
  9.     <div class="row">
  10.         <div class="col-md-8 col-md-offset-2">
  11.             <p>
  12.                 <center>
  13.                     <h2>Aplikasi Crud Sederhana</h2>
  14.                     Oleh : <a href="https://www.facebook.com.pendeta.mokong" target="_blank">Rully Studio</a>
  15.                 </center>
  16.             </p>
  17.             <br>
  18.            
  19.                                     <form role="form" method="post"action="input.php">
  20.                                         <div class="form-group">
  21.                                             <label>Nama</label>
  22.                                             <input class="form-control"name="nama">
  23.                                         </div>
  24.                                         <div class="form-group">
  25.                                             <label>Jenis Kelamin</label>
  26.                                             <div class="radio">
  27.                                                 <label>
  28.                                                     <input type="radio"name="jenis_kelamin" value="Laki-laki" checked>Laki-laki
  29.                                                 </label>
  30.                                             </div>
  31.                                             <div class="radio">
  32.                                                 <label>
  33.                                                     <input type="radio"name="jenis_kelamin" value="Perempuan">Perempuan
  34.                                                 </label>
  35.                                             </div>
  36.                                         </div>
  37.                                         <div class="form-group">
  38.                                             <label>Telepon</label>
  39.                                             <input class="form-control"name="telepon">
  40.                                         </div>
  41.                                         <div class="form-group">
  42.                                             <label>Alamat</label>
  43.                                             <textarea name="alamat"class="form-control" rows="3"></textarea>
  44.                                         </div>
  45.                                         <button type="submit" class="btn btn-primary pull-right">Simpan</button>
  46.                                         <a href="index.php" class="btn btn-success pull-right" style="margin-right:1%;">Batal</a>
  47.                                     </form>
  48.         </div>
  49.     </div>
  50.     <p>
  51.     <center>Copyright @ 2018 by : <a href="https://www.facebook.com.pendeta.mokong" target="_blank">Rully Studio</a> All rights reserved.</center>
  52.     </p>
  53. </div>
  54. </body>
  55. </html>

Coba jalankan dengan cara klik Edit pada kolom opsi di halaman index.php, hasilnya kurang lebih seperti di bawah ini..
Form Edit

Seperti form tambah, form edit juga membutuhkan action untuk memproses data yang di isikan ke dalam database.. kita buat update.php dengan script di bawah ini..

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL
  1. <?php
  2. include"koneksi.php";
  6. $id = $_POST['id_mahasiswa'];
  7. $nama = $_POST['nama'];
  8. $jenis_kelamin = $_POST['jenis_kelamin'];
  9. $alamat = $_POST['alamat'];
  10. $telepon = $_POST['telepon'];
  12. $query = "UPDATE mahasiswa SET
  13.                                 nama = '$nama',
  14.                                 jenis_kelamin = '$jenis_kelamin',
  15.                                 alamat = '$alamat',
  16.                                 telepon = '$telepon'
  17.                                 WHERE id_mahasiswa = '$id'
  18.                                 ";
  20. mysqli_query($koneksi, $query)
  21. or die ("Gagal Perintah SQL".mysql_error());
  22. header('location:index.php');
  24. ?>

dan yang terakhir adalah fitur delete/hapus data, seperti namanya fitur ini menghapus data yang ada di database sesuaai dengan id yang mau di hapus..

kita buat file hapus.php dengan script di bawah ini..

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL
  1. <?php
  2. include"koneksi.php";
  5. $query = "DELETE FROM mahasiswa
  6.                             WHERE id_mahasiswa ='$_GET[id]'
  7.                                 ";
  9. mysqli_query($koneksi, $query)
  10. or die ("Gagal Perintah SQL".mysql_error());
  11. header('location:index.php');
  13. ?>

cara menjalankan script hapus.php sangat mudah cukup klik hapus pada kolom opsi di halaman index.php

Nah lengkap sudah fitur Tambah, Edit, Detail dan Hapus (CRUD) nya..

Untuk hasil nya bisa di cek langsung melalui link Demo di bawah, dan source code lengkapnya bisa di download melalui link Download di bawah ini..
By at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)