Membuat Aplikasi CRUD Sederhana Menggunakan PHP-MySQL dengan MySQLi extension

Assalamu’alaikum..

Halo teman-teman, pada kesempatan kali ini saya akan berbagi tutorial tentang cara membuat aplikasi CRUD sederhana menggunakan PHP dan MySQL dengan mysqli extensions.

Sebelum membahas langkah-langkahnya ada baiknya kita mengenal apa itu aplikasi CRUD. CRUD merupakan singkatan dari Create, Read, Update dan Delete. Sesuai dengan namanya, aplikasi CRUD merupakan aplikasi yang digunakan untuk menginput data ke database (Create), menampilkan data dari database (Read), mengedit/mengupdate data pada database (Update) dan menghapus data dari database (Delete).

Tutorial ini saya tujukan terutama bagi teman-teman yang mungkin baru dalam mempelajari PHP. Memahami konsep CRUD sangat penting jika kita ingin membuat sebuah aplikasi. Tanpa memahami konsep ini, kita tidak bisa membuat aplikasi bahkan yang sangat sederhana sekalipun, kecuali jika aplikasi yang kita buat tidak berhubungan dengan database.

Bagi teman-teman yang belum menguasai dasar HTML, PHP dan MySQL, saya sarankan untuk mempelajarinya terlebih dahulu sebelum mengikuti tutorial ini. Akan lebih baik lagi jika Anda juga menguasai CSS. Karena di sini saya tidak akan menjelaskan hal-hal yang bersifat dasar. Jika teman-teman mengikuti tutorial ini, saya asumsikan teman-teman sudah menguasai dasar-dasar HTML, PHP dan MySQL.

Kali ini kita akan belajar membuat aplikasi untuk mengolah biodata mahasiswa. Berikut ini gambaran hasil aplikasi yang akan kita buat:

Halaman utama menampilkan data mahasiswa:

Halaman untuk menampilkan data
Halaman untuk menampilkan data

Halaman untuk menginput data:

Halaman untuk menginput data
Halaman untuk menginput data

Halaman untuk mengedit data:

Halaman untuk edit data
Halaman untuk edit data

Tampilan ketika akan menghapus data:

Tampilan ketika akan menghapus data
Tampilan ketika akan menghapus data

Adapun file-file yang nantinya akan kita buat adalah sebagai berikut:

File-file yang akan dibuat
File-file yang akan dibuat

Oke langsung saja, selanjutnya kita akan membahas langkah-langkahnya.

Langkah 1 : Menyiapkan Database

Langkah pertama yang harus kita lakukan adalah menyiapkan database terlebih dahulu. Database ini akan digunakan untuk menyimpan data dari aplikasi crud yang kita buat.

Buatlah database dengan nama crud_sederhana, bisa dengan menggunakan Command Promt atau dengan phpMyAdmin. Setelah database dibuat, langkah selanjutnya yaitu membuat tabel dengan nama mahasiswa ke dalam database tadi.

Struktur tabel mahasiswa adalah sebagai berikut:

Tabel Mahasiswa
Tabel Mahasiswa

Berikut ini adalah script untuk membuat tabel mahasiswa:

CREATE TABLE `mahasiswa` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nim` char(8) DEFAULT NULL,
  `nama` varchar(100) DEFAULT NULL,
  `fakultas` varchar(50) DEFAULT NULL,
  `jurusan` varchar(50) DEFAULT NULL,
  `ipk` decimal(3,2) DEFAULT NULL,
  PRIMARY KEY (`id`)
);

Langkah 2 : Koneksi ke Database

Sebelum melakukan langkah ini kita harus membuat folder untuk menyimpan file-file yang nantinya akan kita buat. Buat folder dengan nama crud_sederhana di dalam folder htdocs.

Langkah selanjutnya yaitu membuat file untuk melakukan koneksi ke database. Buat file baru dengan nama koneksi.php, simpan ke dalam folder crud-sederhana tadi, kemudian isi dengan kode dibawah ini:

<?php
  // buat koneksi dengan database mysql
  $host = "localhost";
  $user = "root";
  $pass = "";
  $name = "crud_sederhana";
  $link = mysqli_connect($host,$user,$pass,$name);
  //periksa koneksi, tampilkan pesan kesalahan jika gagal
  if(!$link){
    die ("Koneksi dengan database gagal: ".mysql_connect_errno().
    " - ".mysql_connect_error());
  }
?>

Silahkan sesuaikan variabel $host dan $user sesuai dengan komputer Anda.

File koneksi.php ini nantinya akan kita panggil ke dalam file-file lainnya dengan fungsi include() agar setiap file bisa terhubung ke database.

Langkah 3 : Menampilkan Data

Langkah ketiga yaitu membuat file untuk menampilkan data. Karena akan kita jadikan sebagai halaman utama maka kita beri nama file ini dengan nama index.php. Setelah membuat file index.php di dalam folder crud_sederhana, isilah dengan kode berikut:

<?php
  // memanggil file koneksi.php untuk melakukan koneksi database
  include 'koneksi.php';
?>

<!DOCTYPE html>
<html>
  <head>
    <style>
      table{
        width: 840px;
        margin: auto;
      }
      h1{
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Tabel Biodata Mahasiswa</h1>
    <center><a href="input.php">Input Data &Gt; </a></center>
    <br/>
    <table border="1">
      <tr>
        <th>No</th>
        <th>NIM</th>
        <th>Nama</th>
        <th>Fakultas</th>
        <th>Jurusan</th>
        <th>IPK</th>
        <th>Pilihan</th>
      </tr>
      <?php
      // jalankan query untuk menampilkan semua data diurutkan berdasarkan nim
      $query = "SELECT * FROM mahasiswa ORDER BY nim ASC";
      $result = mysqli_query($link, $query);
      //mengecek apakah ada error ketika menjalankan query
      if(!$result){
        die ("Query Error: ".mysqli_errno($link).
           " - ".mysqli_error($link));
      }

      //buat perulangan untuk element tabel dari data mahasiswa
      $no = 1; //variabel untuk membuat nomor urut
      // hasil query akan disimpan dalam variabel $data dalam bentuk array
      // kemudian dicetak dengan perulangan while
      while($data = mysqli_fetch_assoc($result))
      {
        // mencetak / menampilkan data
        echo "<tr>";
        echo "<td>$no</td>"; //menampilkan no urut
        echo "<td>$data[nim]</td>"; //menampilkan data nim
        echo "<td>$data[nama]</td>"; //menampilkan data nama
        echo "<td>$data[fakultas]</td>"; //menampilkan data fakultas
        echo "<td>$data[jurusan]</td>"; //menampilkan data jurusan
        echo "<td>$data[ipk]</td>"; //menampilkan data ipk
        // membuat link untuk mengedit dan menghapus data
        echo '<td>
          <a href="edit.php?id='.$data['id'].'">Edit</a> /
          <a href="hapus.php?id='.$data['id'].'"
      		  onclick="return confirm(\'Anda yakin akan menghapus data?\')">Hapus</a>
        </td>';
        echo "</tr>";
        $no++; // menambah nilai nomor urut
      }
      ?>
    </table>
  </body>
</html>

Apabila index.php ini kita jalankan di web browser maka akan terlihat tampilan seperti ini:

Tabel Mahasiswa

Seperti yang kita lihat, tabel mahasiswa di atas masih kosong karena memang kita belum memasukkan data apapun ke dalam tabel. Untuk itu pada langkah selanjutnya kita akan membuat sebuah halaman untuk memasukkan data pada tabel mahasiswa.

Langkah 4 : Memasukkan Data

Pada tahap ini kita akan membuat dua buah file. File yang pertama berisi sebuah form untuk memasukkan data yang akan kita beri nama input.php. File yang kedua berfungsi untuk memproses data yang telah dimasukkan pada form input.php. File ini kita beri nama input_proses.php.

Berikut ini adalah tampilan kode pada file input.php:

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1{
        text-align: center;
      }
      .container{
        width: 400px;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <h1>Input Data</h1>
    <div class="container">
      <form id="form_mahasiswa" action="input_proses.php" method="post">
        <fieldset>
        <legend>Input Data Mahasiswa</legend>
          <p>
            <label for="nim">NIM : </label>
            <input type="text" name="nim" id="nim" placeholder="Contoh: 12345678">
          </p>
          <p>
            <label for="nama">Nama : </label>
            <input type="text" name="nama" id="nama">
          </p>
          <p>
            <label for="fakultas" >Fakultas : </label>
              <select name="fakultas" id="fakultas">
                <option value="Kedokteran">Kedokteran </option>
                <option value="MIPA">MIPA</option>
                <option value="Ekonomi">Ekonomi</option>
                <option value="Teknik">Teknik</option>
                <option value="Sastra">Sastra</option>
                <option value="Hukum">Hukum</option>
              </select>
          </p>
          <p>
            <label for="jurusan">Jurusan : </label>
            <input type="text" name="jurusan" id="jurusan">
          </p>
          <p >
            <label for="ipk">IPK : </label>
            <input type="text" name="ipk" id="ipk" placeholder="Contoh: 2.75">
          </p>

        </fieldset>
        <p>
          <input type="submit" name="input" value="Tambah Data">
        </p>
      </form>
    </div>
  </body>
</html>

Tampilan halaman input.php:

08

Saya rasa kode di atas cukup mudah dipahami karena hanya berupa html. Pada kode di atas terdapat form dengan action = “input_proses.php”, artinya ketika form tersebut disubmit maka data yang diinputkan pada form akan diproses oleh file input_proses.php

Tampilan kode input_proses.php adalah sebagai berikut:

<?php
// memanggil file koneksi.php untuk melakukan koneksi database
include 'koneksi.php';

// mengecek apakah tombol input dari form telah diklik
if (isset($_POST['input'])) {

	// membuat variabel untuk menampung data dari form
	$nim = $_POST['nim'];
  $nama = $_POST['nama'];
  $fakultas = $_POST['fakultas'];
  $jurusan = $_POST['jurusan'];
  $ipk = (float) $_POST['ipk'];

  // jalankan query INSERT untuk menambah data ke database
  $query = "INSERT INTO mahasiswa VALUES (NULL, '$nim', '$nama', '$fakultas','$jurusan',$ipk)";
  $result = mysqli_query($link, $query);
  // periska query apakah ada error
  if(!$result){
      die ("Query gagal dijalankan: ".mysqli_errno($link).
           " - ".mysqli_error($link));
  }
}

// melakukan redirect (mengalihkan) ke halaman index.php
header("location:index.php");
?>

File input_proses.php akan mengambil data yang diinput dari form pada halaman input.php kemudian memasukkan data tersebut ke dalam database menggunakan query INSERT INTO.

Sampai tahap ini kita sudah bisa menginput data ke dalam tabel mahasiswa, namun kita belum bisa melakukan edit data dan hapus data.

Langkah 5 : Mengupdate / Mengedit Data

Langkah selanjutnya yaitu membuat halaman untuk update/edit data. Sama seperti sebelumnya, pada tahap ini kita akan membuat dua file: file untuk membuat form dan file untuk memproses form.

Sekarang buat file untuk membuat form update data dengan nama edit.php. kemudian isikan kode berikut:

<?php
  // memanggil file koneksi.php untuk membuat koneksi
  include 'koneksi.php';

  // mengecek apakah di url ada nilai GET id
  if (isset($_GET['id'])) {
    // ambil nilai id dari url dan disimpan dalam variabel $id
    $id = ($_GET["id"]);

    // menampilkan data mahasiswa dari database yang mempunyai id=$id
    $query = "SELECT * FROM mahasiswa WHERE id='$id'";
    $result = mysqli_query($link, $query);
    // mengecek apakah query gagal
    if(!$result){
      die ("Query Error: ".mysqli_errno($link).
         " - ".mysqli_error($link));
    }
    // mengambil data dari database dan membuat variabel" utk menampung data
    // variabel ini nantinya akan ditampilkan pada form
    $data = mysqli_fetch_assoc($result);
    $nim = $data["nim"];
    $nama = $data["nama"];
    $fakultas = $data["fakultas"];
    $jurusan = $data["jurusan"];
    $ipk = $data["ipk"];

  } else {
    // apabila tidak ada data GET id pada akan di redirect ke index.php
    header("location:index.php");
  }

?>
<!DOCTYPE html>
<html>
  <head>
    <style>
      h1{
        text-align: center;
      }
      .container{
        width: 400px;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <h1>Edit Data</h1>
    <div class="container">
      <form id="form_mahasiswa" action="edit_proses.php" method="post">
        <input type="hidden" name="id" value="<?php echo $id; ?>">
        <fieldset>
        <legend>Edit Data Mahasiswa</legend>
          <p>
            <label for="nim">NIM : </label>
            <input type="text" name="nim" id="nim" value="<?php echo $nim ?>">
          </p>
          <p>
            <label for="nama">Nama : </label>
            <input type="text" name="nama" id="nama" value="<?php echo $nama ?>">
          </p>
          <p>
            <label for="fakultas" >Fakultas : </label>
              <select name="fakultas" id="fakultas">
                <option value="Kedokteran" <?php if($data['fakultas'] == 'Kedokteran'){ echo 'selected'; } ?>>
                Kedokteran </option>
                <option value="MIPA" <?php if($data['fakultas'] == 'MIPA'){ echo 'selected'; } ?>>
                MIPA</option>
                <option value="Ekonomi" <?php if($data['fakultas'] == 'Ekonomi'){ echo 'selected'; } ?>>
                Ekonomi</option>
                <option value="Teknik" <?php if($data['fakultas'] == 'Teknik'){ echo 'selected'; } ?>>
                Teknik</option>
                <option value="Sastra" <?php if($data['fakultas'] == 'Sastra'){ echo 'selected'; } ?>>
                Sastra</option>
                <option value="Hukum" <?php if($data['fakultas'] == 'Hukum'){ echo 'selected'; } ?>>
                Hukum</option>
              </select>
          </p>
          <p>
            <label for="jurusan">Jurusan : </label>
            <input type="text" name="jurusan" id="jurusan" value="<?php echo $jurusan ?>">
          </p>
          <p >
            <label for="ipk">IPK : </label>
            <input type="text" name="ipk" id="ipk" value="<?php echo $ipk ?>">
          </p>
        </fieldset>
        <p>
          <input type="submit" name="edit" value="Update Data">
        </p>
      </form>
  </div>
  </body>
</html>

Tampilan halaman edit:

09

Halaman edit data ini dapat diakses melalui tombol link yang terdapat pada kolom pilihan Tabel Biodata Mahasiswa pada halaman index.php.

01-copy

Link tersebut mengandung query string. Query string adalah sebutan untuk karakter tambahan di belakang URL atau di belakang penulisan alamat dari sebuah situs. Contohnya apabila kita mengeklik tombol edit pada mahasiswa dengan id = 3, maka akan menuju ke alamat:

http://localhost/crud_sederhana/edit.php?id=3

Tambahan teks “?id=3” inilah yang disebut dengan query string. Karakter tanda tanya (?) merupakan pembatas antara alamat situs dengan query string.

Pada contoh tersebut berarti kita mengirim data berupa variabel “id” yang bernilai “3” ke dalam halaman http://localhost/crud_sederhana/edit.php. Data ini bisa diakses menggunakan variabel $_GET[”id”].

File edit.php akan mengambil nilai $_GET[”id”] dan disimpan pada variabel $id. Setelah itu data mahasiswa yang akan diedit ditampilkan menggunakan query "SELECT * FROM mahasiswa WHERE id='$id'". Hasil query kemudian disimpan pada beberapa variabel. Variabel-variabel ini digunakan untuk mengisi atribut value pada form agar data tersebut dapat tampil di form.

Sekarang buat file edit_proses.php. Lalu isikan kode berikut:

<?php
// mengecek apakah tombol edit telah diklik
if (isset($_POST['edit'])) {
  // buat koneksi dengan database
  include("koneksi.php");

  // membuat variabel untuk menampung data dari form edit
  $id = $_POST['id'];
  $nim = $_POST['nim'];
	$nama	= $_POST['nama'];
	$fakultas	= $_POST['fakultas'];
	$jurusan = $_POST['jurusan'];
	$ipk = (float) $_POST['ipk'];

  //buat dan jalankan query UPDATE
  $query  = "UPDATE mahasiswa SET ";
  $query .= "nim = '$nim', nama = '$nama', ";
  $query .= "fakultas='$fakultas', ";
  $query .= "jurusan = '$jurusan', ipk=$ipk ";
  $query .= "WHERE id = '$id'";

  $result = mysqli_query($link, $query);

  //periksa hasil query apakah ada error
  if(!$result) {
    die ("Query gagal dijalankan: ".mysqli_errno($link).
       " - ".mysqli_error($link));
  }
}

//lakukan redirect ke halaman index.php
header("location:index.php");

?>

File edit_proses.php akan mengambil data yang diinput dari form pada halaman edit.php kemudian melakukan update data menggunakan query UPDATE.

Langkah 6 : Menghapus Data

Langkah terakhir yaitu membuat halaman untuk menghapus data. Buat file bernama hapus.php kemudian isi dengan kode berikut:

<?php
// buka koneksi dengan MySQL
  include("koneksi.php");

  //mengecek apakah di url ada GET id
  if (isset($_GET["id"])) {

    // menyimpan variabel id dari url ke dalam variabel $id
    $id = $_GET["id"];

    //jalankan query DELETE untuk menghapus data
    $query = "DELETE FROM mahasiswa WHERE id='$id' ";
    $hasil_query = mysqli_query($link, $query);

    //periksa query, apakah ada kesalahan
    if(!$hasil_query) {
      die ("Gagal menghapus data: ".mysqli_errno($link).
           " - ".mysqli_error($link));
    }
  }
  // melakukan redirect ke halaman index.php
  header("location:index.php");
?>

Sama seperti halaman edit.php, halaman hapus.php ini dapat diakses melalui link yang terdapat pada kolom Pilihan pada Tabel Biodata Mahasiswa di halaman index.php.

File hapus.php akan mengambil nilai id pada query string menggunakan variabel $_GET[“id”]. Nilai id ini digunakan untuk mengetahui data mahasiswa yang mana yang akan dihapus. Setelah itu data dihapus menggunakan query "DELETE FROM mahasiswa WHERE id='$id' ".

Sampai tahap ini kita telah selesai membuat aplikasi CRUD sederhana untuk mengolah data mahasiswa. Apabila teman-teman masih kesulitan atau mungkin tidak ingin repot-repot, saya menyediakan source code yang dapat Anda download di link berikut ini:

Download Aplikasi CRUD Sederhana

Demikian tutorial Membuat Aplikasi CRUD Sederhana Menggunakan PHP-MySQL dengan MySQLi extension yang saya buat. Apabila ada hal yang ingin ditanyakan atau ada saran bisa Anda tulis di bagian komentar.

Terima kasih. Semoga bermanfaat.

23 thoughts on “Membuat Aplikasi CRUD Sederhana Menggunakan PHP-MySQL dengan MySQLi extension

  1. batamdev Reply

    terima kasih gan. tutorialnya sangat bermanfaat. request tutorial bikin sistem login dengan mysqli extension

  2. Asep Iskandar Reply

    Maaf boss buat nulis kode nya di mana ? Saya baru belajar…

  3. refai faorota Reply

    $query = “INSERT INTO mahasiswa VALUES (NULL, ‘$nim’, ‘$nama’, ‘$fakultas’,’$jurusan’,$ipk)”;
    gan Maksud dari NULL dalam data bases Insert ini untuk apa gan

    • Profile photo of M Shifin Al Farouq
      M Shifin Al Farouq Post authorReply

      NULL itu maksudnya tidak diisi dengan nilai apapun. Kolom id itu bersifat auto increment, jadi kita tidak perlu memberikan nilai karena dia otomatis akan terisi sendiri nilainya setiap kita menambah data.
      Misal data terakhir mempunyai id=8, jika kita menambah data baru maka data yang baru otomatis mempunyai id bernilai 9.

  4. Deka Adelia Sari Reply

    blog yang sangat membantu dalam belajar php dengan menggunakan aplikasi crub

  5. Henry Reply

    misi om, saya selalu gagal pada edit_proses, bija dijelaskan secara lebih rinci?

    • Profile photo of M Shifin Al Farouq
      M Shifin Al Farouq Post authorReply

      Gagal seperti apa yang dimaksud? Mungkin bisa dijelaskan agar saya bisa membantu?
      Pada intinya, file edit_proses.php digunakan untuk menangkap data yang diinput dari form edit. Data yang baru tersebut akan digunakan untuk menggantikan data yang sudah ada di dalam database. Caranya yaitu dengan menggunakan query UPDATE seperti contoh diatas.

  6. CANDRA DWI MAULANA . Reply

    selalu gagal pada editproses min

    selalu muncul gini
    Query gagal dijalankan: 1064 – You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘1” at line 1
    udah di utak atik gabisa juga

    • Profile photo of M Shifin Al Farouq
      M Shifin Al Farouq Post authorReply

      Maaf baru balas. Itu mungkin kesalahannya pada query. Coba dicek tanda petik, koma atau spasi nya mungkin ada yang kurang. Untuk lebih jelasnya coba variabel query dicetak terlebih dahulu dg perintah echo

  7. Rahmat Hidayatullah Reply

    om mohon bantuannya punya saya error kenapa ya udah ngikutin tutorialnya dengan benar padahal.
    pusing saya om mohon bantuan

    Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in C:\xampp\htdocs\crud_sederhana\koneksi.php on line 7

    Tabel Biodata Mahasiswa
    Input Data ≫

    Warning: mysqli_query() expects parameter 1 to be mysqli, resource given in C:\xampp\htdocs\crud_sederhana\index.php on line 36

    Warning: mysqli_errno() expects parameter 1 to be mysqli, resource given in C:\xampp\htdocs\crud_sederhana\index.php on line 39

    Warning: mysqli_error() expects parameter 1 to be mysqli, resource given in C:\xampp\htdocs\crud_sederhana\index.php on line 40

  8. Rahmat Hidayatullah Reply

    waktu saya nambah data juga malah kayak gini

    Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in C:\xampp\htdocs\crud_sederhana\koneksi.php on line 7

    Warning: mysqli_query() expects parameter 1 to be mysqli, resource given in C:\xampp\htdocs\crud_sederhana\input_proses.php on line 17

    Warning: mysqli_errno() expects parameter 1 to be mysqli, resource given in C:\xampp\htdocs\crud_sederhana\input_proses.php on line 20

    Warning: mysqli_error() expects parameter 1 to be mysqli, resource given in C:\xampp\htdocs\crud_sederhana\input_proses.php on line 21
    Query gagal dijalankan: –

    mohon bantuannya #pemula

    • Profile photo of M Shifin Al Farouq
      M Shifin Al Farouq Post authorReply

      Itu mungkin karena memakai mysql_connect(). Coba di file koneksi.php line 7 diganti menjadi mysqli_connect(). Pakai huruf ‘i

      Kalo memakai php versi baru memang sudah tidak mendukung fungsi mysql_connect(), diganti menjadi mysqli_connect().

Leave a Reply

Your email address will not be published. Required fields are marked *