Aplikasi CRUD menggunakan Template Admin LTE

Pada tutorial yang lalu saya sudah menulis Membuat CRUD dengan PHP Mysqli anda dapat mempelajari dulu jika belum pernah membuat aplikasi CRUD. Kita membuat aplikasi crud dengan template tujuannya agar tampil lebih baik dan responsif. Jika anda ingin membuat template sendiri juga bisa.

Baca juga Membuat Template Sederhana Dengan HTML dan CSS

Sebelum membuat aplikasi crud di template Admin LTE anda perlu menyiapkan templatenya dulu. Baca Cara Menggunakan Template Admin LTE Sebagai Template Web Dinamis. Sekarang saya anggap anda sudah memiliki template nya. Berikut ini list yang akan kita kerjakan.

 Template

 Buat Databse

 Read Data

 Create Data

 Delete Data

 Update Data

Sampai disini kita anggap template sudah ada, selanjutnya kita buat database dengan nama db_siswa.

Gambar membuat database

Pertama start apache dan mysql di xampp (atau yang lain) ketikkan di web browser localhost/phpmyadmin. Selanjutnya klik new, isikan nama database (db_siswa) terakhir klik create.

Selanjutnya buat tabel dengan nama tbl_siswa.

Gambar membuat tabel

Selanjutnya isi nama tabel dan jumlah colomnya kemudian klik tombol Go.

Gambar Struktur Tabel

Gambar di atas menunjukkan struktur tbl_siswa. Pada sruktur tabel anda cukup memperhatikan bagian yang diberi kotak kuning yaitu, name, type, length, index, dan A_I. Isi datanya seperti pada gambar kemudian tekan tombol save.

CREATE TABLE `db_siswa`.`tbl_siswa` ( `id` INT NOT NULL AUTO_INCREMENT , `nama` VARCHAR(100) NOT NULL , `jenkel` VARCHAR(15) NOT NULL , `alamat` VARCHAR(50) NOT NULL , `no_hp` VARCHAR(16) NOT NULL , PRIMARY KEY (`id`)) ENGINE = InnoDB;

Selanjutnya insert satu buah data seperti ini.

INSERT INTO `tbl_siswa` (`id`, `nama`, `jenkel`, `alamat`, `no_hp`) VALUES (NULL, 'Indah', 'Perempuan', 'Medan', '0811223344');

Sekarang kita sudah menyelesaikan database.

 Template

 Buat Databse

 Read Data

 Create Data

 Delete Data

 Update Data

Di tabel siswa kita isi satu buah data untuk ditampilkan nantinya di web. Baik, kita kerjakan Read Data atau menampilkan data dari database.

Pertama kita buat sebuah file koneksi bernama koneksi.php di dalam folder template.

Gambar isi file koneksi.php

File koneksi ini digunakan disetiap halaman yang berinteraksi dengan database. Untuk melakukan CRUD dibutuhkan file koneksi ini. File koneksi akan di include dalam file yang membutuhkannya. Baca juga Include dan Require di PHP dan Contoh Penerapannya. Inti dari koneksi ini adalah fungsi mysqli_connect yang ditampung di variabel $mysqli.

Sekarang kita kerjakan bagian Read Data (Baca dan tampilkan data dari database). Kali ini data akan ditampilkan menggunakan tabel. Ditemplate halaman yang akan kita gunakan berada di http://localhost/template/pages/tables/data.html. Jika dari sublime posisi file nya berada disini.

Gambar lokasi file data.html

Jika dilihat tabel yang akan kita gunakan seperti gambar dibawah ini.

Gambar Template Tabel

Dari keseluruhan kode di file data.html kita hanya butuh dari baris 507 sampai 1410. Nanti ada beberapa baris lagi yang akan kita buang. Selanjutnya buatlah folder siswa dalam folder template dan file siswa.php dalam folder siswa.

Gambar folde siswa dan file siswa.php

Sekarang kita akan mengisi file siswa.php dengan potongan kode dari file data.html seperti ini.

Gambar potongan file data.html Baris 507 - 1410

Selanjutnya paste kan dalam file siswa.php  dan buang satu div dengan class box seperti ini.

Gambar Hapus Kode Tabel Pertama

Selanjutnya kita hanya butuh header tabel, satu baris isi, dan footer tabel. Maka baris yang lainnya dihapus. Kita hanya butuh tabelnya seperti ini.

Gambar Template Tabel

Karena proses nya terlalu panjang, maka langsung saja saya pastekan kode yang sudah selesai di edit.

<!-- Isi File siswa.php-->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Data Siswa
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">Siswa</a></li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
                 
          <!-- /.box -->

          <div class="box">
            <div class="box-header">
              <a href="index.php?hal=tambah_siswa">
              <input type="button" value="Tambah" class="btn btn-primary" name="">
              </a>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>No</th>
                  <th>Nama</th>
                  <th>Jenis Kelamin</th>
                  <th>Alamat</th>
                  <th>No HP</th>
                  <th>Aksi</th>
                </tr>
                </thead>
                <tbody>
<?php
include "koneksi.php";
$hasil=mysqli_query($mysqli,"select * from tbl_siswa");
$no=1;
while($row=mysqli_fetch_array($hasil)){
?>
                <tr>
                  <td><?php echo $no; $no++;?></td>
                  <td><?php echo $row['nama']?></td>
                  <td><?php echo $row['jenkel']?></td>
                  <td><?php echo $row['alamat']?></td>
                  <td><?php echo $row['no_hp']?></td>
               
                  <td><a href="index.php?hal=edit_siswa&id=<?php echo $row['id']?>"><button type="button" class="btn btn-warning" name=""> <i class="fa fa-pencil"></i> Edit</button></a>
                    <a onclick="return confirm('Anda Yakin...?')" href="siswa/hapus_siswa.php?id=<?php echo $row['id']?>">
                    <button type="button" class="btn btn-danger" name=""> <i class="fa fa-trash"></i> Hapus</button></a>
                  </td>
                </tr>
<?php } ?>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>

Untuk style dan java script kita juga menggunkan dari file data.html.

Membaca (Read) dan  menampilkan data kedalam tabel berhasi kita lakukan di template admin LTE. hasilnya seperti ini

Menampilkan data di dalam tabel

Berhubung karena tutorialnya panjang dan memerlukan waktu yang cukup lama. Maka saya sudahi dulu sampai disini dan saya lanjutkan di tulisan saya berikutnya. Link dibawah akan aktif jika saya sudah menyelesaikannya.

 Template

 Buat Databse

 Read Data

 Create Data

 Delete Data

 Update Data

Setelah lama tertunda dan mengumpulkan semangat kembali. dan juga dorongan dari permintaan dari komentar. saya lanjutkan artikel ini sampai selesai.

Tambah Siswa

Edit Siswa

Hapus Siswa

 Template

 Buat Databse

 Read Data

 Create Data

 Delete Data

 Update Data

Terimakasih sudah membaca. silahkan download kodenya disini. untuk databasenya buat seperti tutorial ini ya. saya tidak menyertakan nya di folder. untuk nama database pada file koneksi.php jangan lupa ubah menjadi db_siswa.