Halo teman Rumah Coding, kali ini saya akan melanjutkan pembahasan Menerapkan Dashboard AdminLTE 3 Pada PHP. bagi kalian yang belum mengikuti part1 silahkan dibaca Menerapkan Dashboard AdminLTE 3 Pada PHP part 1.
Setelah semua tahapan tadi selesai, sekarang kita lihat hasil nya dengan mengakses localhost/dashboard_adminlte. Apabila semua pengaturan sesuai maka akan tampil seperti ini
Template-dashboard
Setelah kita memecah atau mempartisi script menjadi beberapa bagian. Sekarang kita akan membuat template berdasarkan file index tersebut. Jadi nantinya kita lebih mudah dalam membuat halaman konten baru. Buka file index.php lalu potong script dari baris ke 1 sampai sebelum <!—Content Wrapper. Contains page content –> kemudian ganti dengan script
<?php include 'template_header.php' ?>
Potong script index.php
Ubah index.php
Buat file baru dengan nama template_header.php lalu pastekan potongan script tadi ke dalam file template_header.php
Template_header.php
Sekarang kita potong juga bagian bawah index.php. mulai dari setelah <!– /.content-wrapper –> sampai script bagian paling bawah, lalu ganti dengan script dibawah ini
<?php include 'template_footer.php' ?>
Potong script index.php
Ubah index.php
Buat file baru dengan nama template_footer.php lalu pastekan potongan script tadi kedalamnya.
Template_footer.php
Sekarang cek hasilnya setelah kita lakukan modifikasi, seharusnya tidak ada perubahan secara tampilan. Dan berarti kita selesai dalam tahap pembuatan template tersebut.
Bisa diperhatikan pada bagian content-wrapper index.php. disitu adalah script untuk mengatur tampilan dari konten dashboard. Jadi kedepannya kita bisa memanfaatkan file index.php ini untuk membuat halaman baru, dengan cara copy file index.php, rename sesuai dengan halaman yang akan dibuat lalu modifikasi sesuai dengan kebutuhan halaman baru.
Dengan melakukan pemotongan script ke beberapa bagian seperti ini tujuannya adalah memudahkan kita dalam membangun sebuah project. Misalnya kita ingin menggunakan plugin lain kedalam project kita. Cukup dengan tambahkan / modifikasi file stylesheet.php dan js-file.php dalam folder partials.
Demikian pembahasan kita tentang penerapan AdminLTE pada PHP, silahkan lakukan perubahan tampilan baik content maupun bagian lainnya menyesuaikan keinginan kalian. Terus berlatih dan sampai jumpa di artikel selanjutnya.
Halo teman Rumah Coding, pada artikel kali ini saya akan memberikan tutorial cara menerapkan template dashboard AdminLTE3 pada PHP. Untuk yang belum tahu apa itu dashboard AdminLTE 3 bisa baca terlebih dahulu postingan sebelumnya mengenai 3 Rekomendasi Dashboard Admin Bootstrap
Pada tutorial penerapan adminLTE 3 ini yang akan dibahas antara lain :
persiapan download
memilih file-file yang hanya dibutuhkan untuk project
memecah / memotong script menjadi beberapa bagian untuk memudahkan maintenance
baik, mari kita praktekan untuk penerapan dashboard AdminLTE3 pada PHP kali ini.
Persiapkan AdminLTE 3
Hal pertama yang pasti kita lakukan yaitu mendownload template AdminLTE. Untuk link download bisa melalui link ini. Extract ke folder sementara hasil download AdminLTE 3 tersebut untuk nantinya akan kita pilah file-file yang hanya kita butuhkan saja, kemudian kita siapkan juga folder project kita di dalam folder htdocs. Beri nama folder dashboard_adminlte.
setelah itu kita copy file dan folder berikut yang ada didalam folder AdminLTE3 kedalam folder project kita.
Folder dist berisi file asset yang dibutuhkan seperti css file, js file dan image, folder plugins berisi plugin-plugin yang bisa kita gunakan didalam aplikasi kita contoh datatables. Starter.html adalah template yang akan kita gunakan dan akan kita ubah strukturnya untuk kita manfaatkan pada project kita. Ubah terlebih dahulu file starter.html menjadi index.php
Memecah script index.php ke beberapa bagian
index.php ke beberapa bagian Untuk bagian ini, kita membutuhkan satu folder untuk mengumpulkan tiap partial yang kita buat. Kita buat satu folder dengan nama partials
Stylesheet.php
Sekarang kita buka folder project kita menggunakan vscode dan buka file index.php. kita akan potong script bagian stylesheet. Script yang kita potong pada file index.php kita ganti dengan
<?php include 'partials/stylesheet.php' ?>
potong bagian stylesheet index.php
Ubah file index.php
Buat file stylesheet.php didalam folder partials, lalu kita paste atau tempel script ke dalam file stylesheet.php
stylesheet.php
Navbar.php
Lalu kita akan memotong bagian navbar dengan memotong script bagian navbar pada index.php dari <!—Navbar –> sampai <!—/.Navbar –, Script yang kita potong, kita ganti dengan
<?php include 'partials/navbar.php' ?>
potong script navbar
ubah index.php
buat file navbar.php didalam folder partials lalu paste script navbar tadi kedalam file navbar.php.
Navbar.php
Sidebar.php
Sekarang kita lanjut ke bagian sidebar. Potong script sidebar bagian tag <aside> sampai </aside> lalu ganti dengan script
<?php include 'partials/sidebar.php' ?>
Potong script sidebar
ubah scriptindex.php
Buat file dengan nama sidebar.php pada folder partials, lalu pastekan script sidebar tadi kedalam file sidebar.php
Footer.php
Untuk bagian footer kita potong script pada index.php bagian tag <footer> sampai dengan </footer> lalu ganti dengan script berikut
<?php include 'partials/footer.php' ?>
potong script footerindex.php
ubah index.php
Buat file dengan nama footer.php dan pastekan potongan script footer tadi kedalam file footer.php
footer.php
Js-file.php
Sekarang kita akan memotong script bagian js file yang ada di bagian bawah. Dan ganti script nya dengan
<?php include 'partials/js-file.php' ?>
potong script js-fileindex.php
ubah file index.php
Buat file didalam folder partials dengan nama js-file.php lalu pastekan potongan script yang tadi kedalam file js-file.php
Halo teman Rumah Coding, pada artikel kali ini kita akan membahas tentang Rekomendasi dashboard admin Bootstrap.
Dalam pembuatan aplikasi berbasis website, kita pasti membutuhkan tempat untuk user mengatur data baik input, edit dan hapus. Dashboard admin adalah tempat untuk mengatur, mengkoordinir flow data sistem yang sudah kita buat secara User Interface.
Dalam kesempatan kali ini, saya akan memberikan 3 rekomendasi dashboard admin Bootstrap yang sering digunakan.
AdminLTE 3
Admin LTE 3 adalah template boostrap yang pertama saya gunakan, dan ini juga sebagai template yang paling favaorit bagi para pemula sampai menengah. Admin LTE 3 adalah template admin yang sangat responsive dan telah menggunakan framework bootstrap 4.6.1. Karena menggunakan boostrap 4 maka Admin LTE ini sangat mudah dikustomisasi dan digunakan.
SB Admin 2 menggunakan bootstrap 4 dan memiliki tampilan yang lebih sederhana dari Admin LTE 3. Template ini sangat simple dan rapi dalam struktur codingannya. Meski tidak memiliki library custom sebanyak Admin LTE 3, tapi SB Admin 2 telah memberikan snippet code, pages, dan penggunaan library-library lain yang umum digunakan oleh pengembang web. salah satu kelebihan dari template yang satu ini adalah ringan. SB Admin 2 hanya memiliki ukuran sebesar 6 MB saja (compressed).
Cocok buat yang sedang belajar web programming sampai pengerjaan project yang membutuhkan efisiensi size dalam pembuatan aplikasi, dimana plugin bisa ditambahkan manual sesuai kebutuhan.
Stisla adalah salah satu template admin bootstrap buatan orang Indoensia, pembuatnya adalah Muhamad Nauval Azhar. Stisla memberikan banyak fitur serba guna dan gratis untuk diunduh. Dalam laman resmi stisla mengatakan, bahwa simple version dan pro version sama saja, artinya kalian bisa menikmati semua fitur yang diberikan.
Stisla di desain untuk kalian dan klien kalian, terintegrasi dengan 30+ library pihak ketiga dan banyak komponen lainnya. Sehingga kamu bisa mengembangkan aplikasi dengan lebih mudah. Stisla menyediakan javascript APIs untuk memudahkan interaksi antar komponen, kemudian semua halaman HTMLnya bebas error, karena semuanya telah diverifikasi oleh W3C.
Sebenarnya masih banyak dashboard-dashboard yang masih bisa digunakan secara gratis, kalian bisa explore lebih untuk mencarinya. Namun disini saya memberi rekomendasi yang umumnya digunakan para developer serta fungsi yang efisiensi.
Penggunaan template dashboard admin ini dimaksudkan agar mempermudah dan mempercepat pengerjaan project kita, jadi kita bisa lebih fokus dalam pembuatan logic aplikasi kita.
Di kesempatan lain akan saya buat tutorial penerapan masing-masing dashboard admin pada PHP dan Laravel. Ditunggu saja ya teman-teman Rumah Coding.
Demikian artikel kali ini tentang 3 Rekomendasi Dashboard Admin Bootstrap, semoga bermanfaat dan jangan lupa untuk terus berlatih.
Halo teman Rumah Coding, pada artikel kali ini kita akan membahas tentang pembuatan form validasi pada PHP. Kita akan membuat validasi nama dan email, dimana input nama akan di cek apakah sudah terisi atau kosong dan input email akan di cek valid atau tidak.
Validasi pada form aplikasi bisa dikatakan hal dasar dan wajib dipelajari, bayangkan jika kita membuat aplikasi tanpa adanya validasi. Input user pasti tidak akan sesuai dengan ketentuan form aplikasi yang kita buat. Maka dari itu validasi ini akan berguna untuk membuat filter input agar sesuai dengan ketentuan dari form aplikasi.
Pada kesempatan kali ini kita akan membuat form validasi sederhana dimana form yang akan kita buat berisi input nama dan email. data akan dikirim ke file php terpisah yang kemudian data-data tersebut akan di periksa untuk validasi. Validasi yang akan kita lakukan adalah cek terisi atau tidak seluruh input pada form dan apakah email yang diinput valid atau tidak. Jika input tidak terisi atau email tidak valid akan mengembalikan pesan eror sesuai dengan bagian input yang kosong pada form input. Untuk lebih jelasnya mari kita mulai praktekkan.
Membuat Tampilan Form Validasi
Pertama kita akan membuat tampilan form untuk input data. Buat sebuah file baru dengan nama index.php
<?php
// Memberi nilai awal kosong pada variabel
$namaPesan = $emailPesan = "";
session_start();
// Memberi nilai baru pada variabel $namaPesan jika ada $_Session "namaPesan"
if (isset($_SESSION['namaPesan'])){
$namaPesan = $_SESSION['namaPesan'];
}
// Memberi nilai baru pada variabel $emailPesan jika ada $_Session "namaPesan"
if (isset($_SESSION['emailPesan'])){
$emailPesan = $_SESSION['emailPesan'];
}
session_unset();
session_destroy();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validasi | blog.rumahcoding.co.id</title>
</head>
<body>
<h1>Form Validasi | blog.rumahcoding.co.id</h1>
<!-- validasi akan di lakukan pada file cek-validasi.php -->
<form action="cek-validasi.php" method="post">
<table>
<tr>
<td>Nama : </td>
<td>
<input type="text" name="nama" id="id">
<!-- berfungsi menampilkan pesan eror berdasar kan nilai dari $namaPesan -->
<span style="color:red;">* <?= $namaPesan ?></span>
</td>
</tr>
<tr>
<td>Email : </td>
<td>
<input type="text" name="email" id="email">
<!-- berfungsi menampilkan pesan eror berdasar kan nilai dari $emailPesan -->
<span style="color:red;">* <?= $emailPesan ?></span>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" id="submit" value="Kirim"></td>
</tr>
</table>
</form>
</body>
</html>
Jalankan index.php pada browser untuk melihat tampilan
Penjelasan index.php :
<?php
// Memberi nilai awal kosong pada variabel
$namaPesan = $emailPesan = "";
// Memberi nilai baru pada variabel $namaPesan jika ada $_Session "namaPesan"
if (isset($_SESSION['namaPesan'])){
$namaPesan = $_SESSION['namaPesan'];
}
// Memberi nilai baru pada variabel $emailPesan jika ada $_Session "namaPesan"
if (isset($_SESSION['emailPesam'])){
$emailPesan = $_SESSION['emailPesan'];
}
?>
Bagian ini berfungsi untuk menerima pesan eror yang di kirim dari cek-validasi.php dan menampung pesan eror tersebut kedalam variabel $namaPesan dan $emailPesan.
Tag span ini berfungsi untuk menampikan pesan eror pada kolom email berdasar nilai variabel $emailPesan. Pada tag Form Action mengarah ke cek-validasi.php, dimana proses validasi akan dilakukan pada file tersebut yang akan kita buat nanti.
MembuatValidasi Data Terisi atau Kosong.
Setelah membuat tampilan untuk input data, sekarang kita akan membuat logic untuk memvalidasi setiap input pada form. Buatlah file dengan nama cek-validasi.php.
<?php
if (isset($_POST['submit'])){
// memulai session untuk mengirim pesan eror pada session
session_start();
// menyimpan nilai dari request POST
$nama = $_POST['nama'];
$email = $_POST['email'];
// menampung nilai eror pada validasi sebagai status eror
$eror = false;
// cek variabel $nama bernilai kosong ("") atau tidak
if ($nama == ""){
// membuat session namaPesan untuk memberi pesan eror pada kolom nama yang diterima index.php
$_SESSION['namaPesan'] = "Kolom nama harus diisi";
// mengubah nilai $eror menjadi true
$eror = true;
}
// cek variabel $email bernilai kosong ("") atau tidak
if ($email == ""){
// membuat session emailPesan untuk memberi pesan eror pada kolom email yang diterima index.php
$_SESSION['emailPesan'] = "Kolom email harus diisi";
// mengubah nilai $eror menjadi true
$eror = true;
}
// cek nilai akhir variabel $eror, jika bernilai true maka akan redirect ke halaman index.php jika bernilai false akan membuat echo
if ($eror == true){
header('location: index.php');
} else {
echo "Data berhasil diinput";
}
}
?>
Penjelasan cek-validasi.php :
// menyimpan nilai dari request POST
$nama = $_POST['nama'];
$email = $_POST['email'];
Bagian ini adalah pembuatan variabel untuk menerima nilai dari request POSTnama dan email.
// menampung nilai eror pada validasi sebagai status eror
$eror = false;
Variabel $eror berfungsi untuk menampung status validasi sebagai penentu eksekusi lanjutan file cek-validasi.php
// cek variabel $nama bernilai kosong ("") atau tidak
if ($nama == ""){
// membuat session namaPesan untuk memberi pesan eror pada kolom nama yang diterima index.php
$_SESSION['namaPesan'] = "Kolom nama harus diisi";
// mengubah nilai $eror menjadi true
$eror = true;
}
Bagian ini untuk cek nilai variabel $nama. Jika bernilai kosong maka akan dibuat sessionnamaPesan dengan berisi pesan eror yang akan ditampilkan dan mengubah nilai $eror menjadi true menandakan terdapat pesan eror yang harus ditampilkan
// cek nilai akhir variabel $eror, jika bernilai true maka akan redirect ke halaman index.php jika bernilai false akan membuat echo
if ($eror == true){
header('location: index.php');
} else {
echo "Data berhasil diinput";
}
Bagian ini menentukan hasil dari file cek-validasi.php, jika nilai $eror adalah true maka akan dilakukan redirect ke halaman index.php dan menampilkan pesan eror. Jika tidak akan ditampilkan tulisan “Data berhasil diinput” Jalankan program tersebut lalu lakukan input pada form
MembuatValidasi Email Valid
Untuk validasi email, kita akan modifikasi dari file cek-validasi.php dan menambahkan sedikit logic untuk memvalidasi input email. Silahkan tambahkan code dibawah ke dalam file cek-validasi.php
// cek apakah email yang diinput valid atau tidak
if ($email != "" && !filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)){
// membuat session emailPesan untuk memberi pesan eror pada kolom email yang diterima index.php
$_SESSION['emailPesan'] = "Email yang anda masukan tidak valid";
// mengubah nilai $eror menjadi true
$eror = true;
}
Maka file cek-validasi.php akan menjadi seperti ini
<?php
if (isset($_POST['submit'])){
// memulai session untuk mengirim pesan eror pada session
session_start();
// menyimpan nilai dari request POST
$nama = $_POST['nama'];
$email = $_POST['email'];
// menampung nilai eror pada validasi sebagai status eror
$eror = false;
// cek variabel $nama bernilai kosong ("") atau tidak
if ($nama == ""){
// membuat session namaPesan untuk memberi pesan eror pada kolom nama yang diterima index.php
$_SESSION['namaPesan'] = "Kolom nama harus diisi";
// mengubah nilai $eror menjadi true
$eror = true;
}
// cek variabel $email bernilai kosong ("") atau tidak
if ($email == ""){
// membuat session emailPesan untuk memberi pesan eror pada kolom email yang diterima index.php
$_SESSION['emailPesan'] = "Kolom email harus diisi";
// mengubah nilai $eror menjadi true
$eror = true;
}
// cek apakah email yang diinput valid atau tidak
if ($email != "" && !filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)){
// membuat session emailPesan untuk memberi pesan eror pada kolom email yang diterima index.php
$_SESSION['emailPesan'] = "Email yang anda masukan tidak valid";
// mengubah nilai $eror menjadi true
$eror = true;
}
// cek nilai akhir variabel $eror, jika bernilai true maka akan redirect ke halaman index.php jika bernilai false akan membuat echo
if ($eror == true){
header('location: index.php');
} else {
echo "Data berhasil diinput";
}
}
?>
Penjelasan tambahan syntax :
// cek apakah email yang diinput valid atau tidak
if ($email != "" && !filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)){
// membuat session emailPesan untuk memberi pesan eror pada kolom email yang diterima index.php
$_SESSION['emailPesan'] = "Email yang anda masukan tidak valid";
// mengubah nilai $eror menjadi true
$eror = true;
}
Bagian ini akan cek variabel email yang terisi data dan akan divalidasi data input tersebut sesuai dengan format email yang valid atau tidak. Validasi dilakukan menggunakan fungsi filter_var().
Setelah dilakukan perubahan silahkan jalankan program tersebut
Jika variabel $eror bernilai false maka tampil tulisan Data berhasil diinput
Demikian pembahasan untuk validasi form input, silahkan kalian lakukan modifikasi untuk mempercantik tampilan. Terus kembangkan apa yang sudah dipelajari dengan terus melatih, Sampai bertemu di artikel selanjutnya
