Table of contents
Selamat siang, mari lanjutkan posting seri Membuat Website Professional dengan PHP & MySql tak terasa sudah sampai di PART #7 Untuk posting saya sebelumnya coba dilihat dulu posting terkait tentang tutorial ini:
- Membuat Website Professional dengan PHP & MySql - PART #1 : Pengertian Dasar & Tools
- Membuat Website Professional dengan PHP & MySql - PART #2 : Setup Database, Table & Hirarki Folder
- Membuat Website Professional dengan PHP & MySql - PART #3 : Membuat Login Admin & Dashboard
- Membuat Website Professional dengan PHP & MySql - PART #4 : Customized Login Admin & Dashboard
- Membuat Website Professional dengan PHP & MySql - PART #5 : Membuat Halaman Profile Admin & Integrasi Gravatar
- Membuat Website Professional dengan PHP & MySql - PART #6 : Manajemen Halaman
Pada posting kali ini, akan membahas membuat manajemen kategori, apa maksud dari manajemen kategori? manajemen kategori yang saya maksud adalah mengelompokkan post/berita dengan dalam beberapa kategori. Jadi, sebelum saya membuat manajemen post alangkah baiknya saya membuat manajemen kategori terlebih dahulu. Jelasnya terlihat pada gambar dibawah, apa yang ingin saya bangun di seri Membuat Website Professional dengan PHP & MySql.
#1 Membuat Table Kategori
- Sebelum membuat table baru dalam database hospital, hidupkan XAMPP terlebih dahulu.
- Buka web browser dan ketik http://localhost/phpmyadmin
- Klik database hospital kemudian New
- Beri nama kategori dengan 3 buah column
- Untuk nama dan tipe data, buat seperti gambar dibawah
- Note: Kategori disini hanya kategori sederhana (1 Level kategori). Untuk multi level kategori, silahkan anda kembangkan sendiri.
#2 Membuat List Kategori dan Tambah Kategori
- Saya ingin membuat table bootstrap, form input, script eksekusi di 1 halaman. Jadi script beikut akan sedikit panjang.
- Buka folder htdocs anda, kemudian masuk ke folder hospital >> admin
- Buat file php baru dan beri nama kategori-list.php (tanpa .php tentunya) kemudian simpan di dalam folder admin.
- Copy script berikut dan simpan
<?php // menghubungkan dengan koneksi include "../config/koneksi.php"; // mengaktifkan session php session_start(); if($_SESSION['status'] !="login"){ header("location:../"); } if(isset($_POST['judul'])){ $judul=htmlentities($_POST['judul']); $status=$_POST['status']; $sql=mysqli_query($koneksi, "INSERT INTO kategori (judul,status) VALUES ('$judul','$status')"); if($sql){ header("location:kategori-list.php?pesan=Tambah kategori berhasil, selamat"); }else{ header("location:kategori-list.php?pesan=Tambah kategori gagal, coba lagi"); } }else{ unset($_POST['judul']); } ?> <!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, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <head> <title>Suba Hospital | List Kategori</title> <!-- Custom fonts for this template--> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <!-- Custom styles for this template--> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <!-- Custom styles for this page --> <link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet"> </head> <body id="page-top"> <!-- Page Wrapper --> <div id="wrapper"> <?php include "sidebar.php"; ?> <!-- Content Wrapper --> <div id="content-wrapper" class="d-flex flex-column"> <!-- Main Content --> <div id="content"> <?php include "topbar.php";?> <!-- Begin Page Content --> <div class="container-fluid"> <div class="row"> <div class="col-lg-6"> <!-- DataTales Example --> <div class="card shadow mb-4"> <div class="card-header py-3"> <h6 class="m-0 font-weight-bold text-primary">List Kategori</h6> </div> <div class="card-body"> <div class="table-responsive"> <?php if(isset($_GET['pesan'])){ echo '<i class="fas fa-info-circle"></i> '.$_GET['pesan'].''; } ?> <br/> <?php $sql = mysqli_query($koneksi, "select * from kategori");?> <?php $no = 1; ?> <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"> <thead> <tr> <th>No</th> <th>Judul</th> <th>Action</th> </tr> </thead> <tfoot> <tr> <th>No</th> <th>Judul</th> <th>Action</th> </tr> </tfoot> <tbody> <?php while ($row=mysqli_fetch_array($sql)){ ?> <tr> <td><?php echo $no;?></td> <td><?php echo $row['judul'];?></td> <td><a href="kategori-edit.php?id=<?php echo $row['id']; ?>" class="btn btn-primary btn-icon-split" style="font-size: 12px;"><span class="icon text-white-50"><i class="fas fa-edit"></i></span><span class="text">Edit</span></a> <a href="kategori-hapus.php?id=<?php echo $row['id']; ?>" class="btn btn-danger btn-icon-split" style="font-size: 12px;" onClick="return confirm ('Apakah anda yakin ingin menghapus data ini?')"><span class="icon text-white-50"><i class="fas fa-trash"></i></span><span class="text">Hapus</span></a></td> </tr> <?php $no++ ?> <?php } ?> </tbody> </table> </div> </div> </div> </div> <div class="col-lg-6"> <!-- DataTales Example --> <div class="card shadow mb-4"> <div class="card-header py-3"> <h6 class="m-0 font-weight-bold text-primary">Tambah kategori</h6> </div> <div class="card-body"> <div class="table-responsive"> <form class="user" action="kategori-list.php" method="post"> <div class="form-group"> <input type="text" name="judul" class="form-control" id="exampleInputJudul" placeholder="Judul Kategori..."> </div> <div class="form-group"> <label>Status</label> <select style="width:200px;" class="form-control" id="exampleStatus" name="status"> <option value="0">Draft</option> <option value="1">Published</option> </select> </div> <div class="form-group"> <button style="width:200px; float:right;" class="btn btn-primary btn-block"> Publish </button> </div> </form> </div> </div> </div> </div> </div> </div> <!-- End Page Content --> </div> <!-- End Content Wrapper --> <?php include "footer.php";?> </div> <!-- End Main Content --> </div> <!-- End Page Wrapper --> <!-- Bootstrap core JavaScript--> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <!-- Core plugin JavaScript--> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <!-- Custom scripts for all pages--> <script src="js/sb-admin-2.min.js"></script> <!-- Page level plugins --> <script src="vendor/datatables/jquery.dataTables.min.js"></script> <script src="vendor/datatables/dataTables.bootstrap4.min.js"></script> <!-- Page level custom scripts --> <script src="js/demo/datatables-demo.js"></script> </body> </html> - Logikanya sama dengan anda saat membuat halaman-list.php dan halaman-tambah.php di posting Membuat Website Professional dengan PHP & MySql - PART #6 : Manajemen Halaman hanya saja kedua dikombinasikan dan dijadikan 1 halaman.
- Tampilannya pada browser akan seperti ini
#3 Membuat Edit Kategori
- Buat file php baru dan beri nama kategori-edit.php (tanpa .php tentunya) kemudian simpan di dalam folder admin.
- Copy script berikut dan simpan
<?php // menghubungkan dengan koneksi include "../config/koneksi.php"; // mengaktifkan session php session_start(); if($_SESSION['status'] !="login"){ header("location:../"); } //Update kategori if(isset($_POST['judul'])){ $id=$_POST['id']; $judul=htmlentities($_POST['judul']); $status=$_POST['status']; $update=mysqli_query($koneksi, "UPDATE kategori SET judul='$judul', status='$status' WHERE id='$id'"); if($update){ header("location:kategori-list.php?pesan=Update kategori berhasil, selamat"); }else{ header("location:kategori-list.php?pesan=Update kategori gagal, coba lagi"); } }else{ unset($_POST['judul']); } ?> <!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, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <head> <title>Suba Hospital | List Kategori</title> <!-- Custom fonts for this template--> <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <!-- Custom styles for this template--> <link href="css/sb-admin-2.min.css" rel="stylesheet"> <!-- Custom styles for this page --> <link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet"> </head> <body id="page-top"> <!-- Page Wrapper --> <div id="wrapper"> <?php include "sidebar.php"; ?> <!-- Content Wrapper --> <div id="content-wrapper" class="d-flex flex-column"> <!-- Main Content --> <div id="content"> <?php include "topbar.php";?> <!-- Begin Page Content --> <div class="container-fluid"> <div class="row"> <div class="col-lg-6"> <!-- DataTales Example --> <div class="card shadow mb-4"> <div class="card-header py-3"> <h6 class="m-0 font-weight-bold text-primary">List Kategori</h6> </div> <div class="card-body"> <div class="table-responsive"> <?php if(isset($_GET['pesan'])){ echo '<i class="fas fa-info-circle"></i> '.$_GET['pesan'].''; } ?> <br/> <?php $sql = mysqli_query($koneksi, "select * from kategori");?> <?php $no = 1; ?> <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"> <thead> <tr> <th>No</th> <th>Judul</th> <th>Action</th> </tr> </thead> <tfoot> <tr> <th>No</th> <th>Judul</th> <th>Action</th> </tr> </tfoot> <tbody> <?php while ($row=mysqli_fetch_array($sql)){ ?> <tr> <td><?php echo $no;?></td> <td><?php echo $row['judul'];?></td> <td><a href="kategori-edit.php?id=<?php echo $row['id']; ?>" class="btn btn-primary btn-icon-split" style="font-size: 12px;"><span class="icon text-white-50"><i class="fas fa-edit"></i></span><span class="text">Edit</span></a> <a href="kategori-hapus.php?id=<?php echo $row['id']; ?>" class="btn btn-danger btn-icon-split" style="font-size: 12px;" onClick="return confirm ('Apakah anda yakin ingin menghapus data ini?')"><span class="icon text-white-50"><i class="fas fa-trash"></i></span><span class="text">Hapus</span></a></td> </tr> <?php $no++ ?> <?php } ?> </tbody> </table> </div> </div> </div> </div> <div class="col-lg-6"> <!-- DataTales Example --> <div class="card shadow mb-4"> <div class="card-header py-3"> <h6 class="m-0 font-weight-bold text-primary">Edit kategori</h6> </div> <div class="card-body"> <div class="table-responsive"> <?php //menjalankan query $id = $_GET['id']; $sqlkat = mysqli_query($koneksi, "select * from kategori WHERE id='$id'"); //menampilkan data $rowkat = mysqli_fetch_array($sqlkat); ?> <form class="user" action="kategori-edit.php" method="post"> <div class="form-group"> <input type="text" name="judul" class="form-control" value="<?php echo $rowkat['judul'];?>" id="exampleInputJudul" placeholder="Judul Kategori..."> </div> <div class="form-group"> <label>Status</label> <select style="width:200px;" class="form-control" id="exampleStatus" name="status"> <?php if($rowkat['status']==0){ ?> <option value="0" selected>Draft</option> <option value="1">Published</option> <?php }else{ ?> <option value="0">Draft</option> <option value="1" selected>Published</option> <?php } ?> </select> </div> <div class="form-group"> <input type="hidden" name="id" value="<?php echo $rowkat['id']?>"> <button style="width:200px; float:right;" class="btn btn-primary btn-block"> Update </button> </div> </form> </div> </div> </div> </div> </div> </div> <!-- End Page Content --> </div> <!-- End Content Wrapper --> <?php include "footer.php";?> </div> <!-- End Main Content --> </div> <!-- End Page Wrapper --> <!-- Bootstrap core JavaScript--> <script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <!-- Core plugin JavaScript--> <script src="vendor/jquery-easing/jquery.easing.min.js"></script> <!-- Custom scripts for all pages--> <script src="js/sb-admin-2.min.js"></script> <!-- Page level plugins --> <script src="vendor/datatables/jquery.dataTables.min.js"></script> <script src="vendor/datatables/dataTables.bootstrap4.min.js"></script> <!-- Page level custom scripts --> <script src="js/demo/datatables-demo.js"></script> </body> </html> - Tampilannya pada browser akan seperti gambar dibawah ini
#4 Membuat Button Hapus Kategori
- Buat file php baru dan beri nama kategori-hapus.php (tanpa .php tentunya) kemudian simpan di dalam folder admin.
- Copy script berikut dan simpan
<?php // mengaktifkan session php session_start(); // menghubungkan dengan koneksi include '../config/koneksi.php'; $id = $_GET['id']; $sql = mysqli_query($koneksi, "DELETE FROM kategori WHERE id='$id'"); if($sql){ header("location:kategori-list.php?pesan=Berhasil, kategori sudah dihapus"); }else{ header("location:kategori-list.php?pesan=Gagal, coba lagi"); } ?> - Tampilannya pada browser akan seperti gambar dibawah ini
Sekian posting Membuat Website Professional dengan PHP & MySql - PART #7 tentang manajemen kategori, pada posting saya selanjutnya anda akan membuat manajemen post/berita. Kita sudah membuat pengelompokan/pengkategorian post/berita di posting ini. Keep Healthy & Happy Coding.
