Tutorial CRUD Mudah dengan PHP+MySQL+Template AdminLTE Part 1

Template Dashboard AdminLTE

Disini saya akan memberikan tutorial cara membuat web dashboard dengan PHP+MySQL+AdminLTE.

Langkah pertama download Template AdminLTE disini.

Setelah didownload, extract file Archived nya sehingga hasilnya akan seperti gambar dibawah :

Hasil Extract File Archived AdminLTE

Setelah itu kita buka file index.html dengan text editor kesukaan kalian boleh pake Notepad++, Sublime, Atom, bahkan text editor terbaru seperti Visual Studio Code.

1. Bedah Template

Sekarang kita akan coba membedah templatenya, sehingga tampilan Dashboardnya sesuai dengan program web yang akan kita buat.

• Cari potongan kode dibawah ini :

<!-- Content Wrapper. Contains page content -->

• Kamu blok sampai kode ini :

<!-- /.content-wrapper -->

Setelah itu di delete, lalu kita tambahkan kode berikut :

<!-- Content -->
<?php include "conf/page.php"; ?>
<!-- /Content -->

Kemudian kita Save As dengan nama index.php

Kita pindahkan folder project kita ke dalam folder htdocs lalu rename foldernya menjadi “crud-php”

Kita buat folder bernama “conf” didalam folder “crud-php”

Lokasi Folder Project

Didalam folder “conf” kita buat satu file bernama page.php dengan kode seperti ini :

<?php
if(isset($_GET['page'])){
  $page = $_GET['page'];
switch ($page) {
// Beranda
  case 'data_mahasiswa':
    include 'pages/mahasiswa/data_mahasiswa.php';
    break;
  }
}else{
    include "pages/beranda.php";
  }
?>

Kita masuk kedalam folder “pages” lalu hapus semua folder & file didalamnya

lalu kita buat file bernama beranda.php dengan kode seperti ini :

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Beranda
<small>Halaman Admin</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> HOME</a></li>
<li class="active">BERANDA</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<h4> Silahkan Pilih Menu Disamping Untuk Mengolah Data.</h4>
</section>
<!-- /.Main content -->
</div>
<!-- /.content-wrapper -->

Untuk melihat hasilnya bisa kita buka web browser lalu ketik “http://localhost/crud-php/index.php” di urlnya. Hasilnya akan seperti ini :

2. Custom Header & Sidebar

Sekarang kita akan mengedit header serta sidebarnya, sehingga tampilan Dashboardnya sesuai dengan program web yang akan kita buat.

buka kembali file index.php setelah itu kita cari potongan kode dibawah ini :

<!-- Messages: style can be found in dropdown.less-->

• Kamu blok sampai kode ini :

<!-- User Account: style can be found in dropdown.less -->

Setelah itu kita delete, lalu cari kode ini :

<!-- search form -->
         ...
<!-- /.search form -->

Hapus kode diantara search form, lalu cari kode lagi :

<!-- sidebar menu: : style can be found in sidebar.less -->

• Kamu blok sampai kode ini :

<!-- /.sidebar -->

Hapus kodenya lalu ganti dengan kode ini :

<!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu">
      <li class="header">MENU</li>
      <li class="treeview">
        <li><a href="index.php"><i class="glyphicon glyphicon-home"></i> <span>Beranda</span></a></li>
      </li>
      <li class="treeview">
          <a href="#">
            <i class="glyphicon glyphicon-briefcase"></i> <span>Kelola Data</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="index.php?page=data_mahasiswa"><i class="glyphicon glyphicon-education"></i> <span>Data Mahasiswa</span></a></li>
          </ul>
      </li>
      <li class="header">SETTING</li>
        <li class="treeview">
          <li><a href="#"><i class="glyphicon glyphicon-cog"></i> <span>Pengaturan</span></a></li>
          <li><a href="pages/logout_process.php"><i class="glyphicon glyphicon-lock"></i> <span>Logout</span></a></li>
        </li>
      </ul>
    </section>
    <!-- /.sidebar -->

Kita buka kembali web browser, lalu refresh. Nanti hasilnya akan seperti ini :

Untuk selanjutnya kita ke Part 2