Tutorial CRUD Mudah dengan PHP+MySQL+Template AdminLTE Part 1Hatsune MikuBlockedUnblockFollowFollowingMar 20Template Dashboard AdminLTEDisini 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 AdminLTESetelah 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 TemplateSekarang 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.
phpKita 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 ProjectDidalam folder “conf” kita buat satu file bernama page.
php dengan kode seperti ini :<?phpif(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 didalamnyalalu 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 & SidebarSekarang 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.