Table of contents
Selamat siang, pada posting kali ini saya akan melanjutkan seri Membuat Website Professional dengan PHP & MySql yang sudah sampai ke PART #8. Part 8 ini akan membahas pembuatan manajemen post. Bagi yang baru mengikuti posting ini, silahkan lihat posting-posting sebelumnya.
- 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
- Membuat Website Professional dengan PHP & MySql - PART #7 : Manajemen Kategori
#1 Membuat Table Post
- 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 post dengan 7 buah column
- Untuk nama dan tipe data, buat seperti gambar dibawah
- Note: Untuk gambar_utama, centang NULL artinya anda memperbolehkan value dalam keadaan kosong.
#2 Membuat Post List
- Buka folder htdocs anda, kemudian masuk ke folder hospital >> admin
- Buat file php baru dan beri nama post-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:../"); } ?> <!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 Post</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"> <!-- DataTales Example --> <div class="card shadow mb-4"> <div class="card-header py-3"> <h6 class="m-0 font-weight-bold text-primary">List Post</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 post");?> <?php $no = 1; ?> <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"> <thead> <tr> <th>No</th> <th>Judul</th> <th>Kategori</th> <th>Publish</th> <th>Action</th> </tr> </thead> <tfoot> <tr> <th>No</th> <th>Judul</th> <th>Kategori</th> <th>Publish</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> <?php $sql_kategori = mysqli_query($koneksi, "SELECT * FROM kategori WHERE id='".$row['id_kategori']."'");?> <?php while($row_kategori = mysqli_fetch_array($sql_kategori)){ ?> <td><?php echo $row_kategori['judul']?></td> <?php } ?> <?php if($row['status']==0){ ?> <td>Draft</td> <?php }else{ ?> <td>Published</td> <?php } ?> <td><a href="post-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="post-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> <!-- 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 ketika anda membuat halaman-list.php di Membuat Website Professional dengan PHP & MySql - PART #6 : Manajemen Halaman hanya ada sedikit penambahan kode untuk memastikan kategori sudah sesuai dengan Post yang dimaksud.
- Berikut penjelasan kode PHP nya
<?php $sql_kategori = mysqli_query($koneksi, "SELECT * FROM kategori WHERE id='".$row['id_kategori']."'");?> <?php while($row_kategori = mysqli_fetch_array($sql_kategori)){ ?> <td><?php echo $row_kategori['judul']?></td> <?php } ?>
- Jadi, kode diatas disisipkan diantara Tabel Bootstrap Post list, anda bisa melihat saya melakukan query ke tabel kategori dengan kondisi/where id sama dengan id_kategori di masing2 post.
- Tampilannya pada browser akan seperti pada gambar
#3 Membuat Tambah Post
- Buat file php baru dan beri nama post-tambah.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'])){ //periksa apakah user telah menekan submit, dengan menggunakan parameter setingan spek $judul=ucwords(htmlentities($_POST['judul'])); $deskripsi=$_POST['deskripsi']; $status=$_POST['status']; $date = date('d / M / Y'); // fungsi tanggal php 11 / Feb / 2001 $id_kategori=$_POST['kategori']; $fotodoc=$_FILES['fotodoc']['name']; $type=$_FILES['fotodoc']['type']; if ($judul=="" || $deskripsi=="" ){ //periksa jika data yang dimasukan belum lengkap ?><script> alert ("Data Anda belum lengkap!");</script><?php }else{ $uploaddir='post/'; $alamatgambar=$uploaddir.$_FILES['fotodoc']['name']; $alamatdatabase='post/'.$_FILES['fotodoc']['name']; if($_FILES["fotodoc"]["type"]=="image/jpeg" || $_FILES["fotodoc"]["type"]=="image/jpg" || $_FILES["fotodoc"]["type"]=="image/gif" || $_FILES["fotodoc"]["type"]=="image/png"){ //periksa apakah gambar formatnya sudah gambar haha if (move_uploaded_file($_FILES['fotodoc']['tmp_name'],$alamatgambar)){ //periksa jika proses upload berjalan sukses $upload=mysqli_query($koneksi,"INSERT INTO post(judul,content,status, gambar_utama, publish_date, id_kategori) VALUES('$judul','$deskripsi','$status','$alamatdatabase', '$date', '$id_kategori')"); header("location:post-list.php?pesan=Tambah post berhasil, selamat"); }else{ header("location:post-list.php?pesan=gagal tambah post, coba lagi!"); } }else{ ?><script> alert ("bukan gambar, coba lagi!");</script><?php } } }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 | Tambah Post</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"> <!-- Tiny MCE --> <script src="vendor/tinymce/tinymce.min.js"></script> <script type='text/javascript'> tinymce.init({ selector: 'textarea#exampleTextarea' }); </script> </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"> <!-- DataTales Example --> <div class="card shadow mb-4"> <div class="card-header py-3"> <h6 class="m-0 font-weight-bold text-primary">Tambah Post</h6> </div> <div class="card-body"> <div class="table-responsive"> <form class="user" action="post-tambah.php" enctype="multipart/form-data" method="post"> <div class="form-group"> <input type="text" name="judul" class="form-control" id="exampleInputJudul" placeholder="Judul Post..."> </div> <div class="form-group"> <textarea style="height:300px;" name="deskripsi" class="form-control" id="exampleTextarea"></textarea> </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"> <label>Gambar</label><br/> <input type="file" name="fotodoc" size="30" id="gambar"/> <input type="hidden" name="MAX_FILE_SIZE" value="7000000" id="gambar"> </div> <div class="form-group"> <label>Kategori</label> <select style="width:300px;" class="form-control" id="exampleStatus" name="kategori"> <?php $sql_kategori = mysqli_query($koneksi, "select * from kategori where status='1'");?> <?php while($row_kategori = mysqli_fetch_array($sql_kategori)){ ?> <option value="<?php echo $row_kategori['id']?>"><?php echo $row_kategori['judul']?></option> <?php } ?> </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> <!-- 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>
- Note: Gambar harus diisi pertimbangannya sebuah website yang bagus dimata saya secara tampilan bersih elegan disertai pemakaian gambar yang menarik.
- Lihat baris script php berikut
$uploaddir='post/'; $alamatgambar=$uploaddir.$_FILES['fotodoc']['name']; $alamatdatabase='post/'.$_FILES['fotodoc']['name'];
- Itu artinya anda harus membuat sebuah folder baru dengan nama post didalam folder admin, jadi folder post nantinya bertujuan sebagai lokasi penyimpanan gambar seperti terlihat pada gambar berikut
- Didalam form tambah post terdapat query ke tabel kategori untuk memanggil kategori yang available sesuai dengan statusnya
<label>Kategori</label> <select style="width:300px;" class="form-control" id="exampleStatus" name="kategori"> <?php $sql_kategori = mysqli_query($koneksi, "select * from kategori where status='1'");?> <?php while($row_kategori = mysqli_fetch_array($sql_kategori)){ ?> <option value="<?php echo $row_kategori['id']?>"><?php echo $row_kategori['judul']?></option> <?php } ?> </select>
- Tampilannya pada browser akan seperti pada gambar
#4 Membuat Edit Post
- Buat file php baru dan beri nama post-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:../"); } if (isset($_POST['judul'])){ //periksa apakah user telah menekan submit, dengan menggunakan parameter setingan spek $id=$_POST['id']; $judul=ucwords(htmlentities($_POST['judul'])); $deskripsi=$_POST['deskripsi']; $status=$_POST['status']; $date = date('d / M / Y'); $id_kategori=$_POST['kategori']; $fotodoc=$_FILES['fotodoc']['name']; $type=$_FILES['fotodoc']['type']; if ($judul=="" || $deskripsi=="" ){ //periksa jika data yang dimasukan belum lengkap ?><script> alert ("Data Anda belum lengkap!");</script><?php }else{ $uploaddir='post/'; $alamatgambar=$uploaddir.$_FILES['fotodoc']['name']; $alamatdatabase='post/'.$_FILES['fotodoc']['name']; if($fotodoc==NULL){ $update=mysqli_query($koneksi,"UPDATE post SET judul='$judul',content='$deskripsi',status='$status', id_kategori='$id_kategori' WHERE id='$id'"); header("location:post-list.php?pesan=Update post berhasil, selamat"); }else{ if($_FILES["fotodoc"]["type"]=="image/jpeg" || $_FILES["fotodoc"]["type"]=="image/jpg" || $_FILES["fotodoc"]["type"]=="image/gif" || $_FILES["fotodoc"]["type"]=="image/png"){ if (move_uploaded_file($_FILES['fotodoc']['tmp_name'],$alamatgambar)){ //periksa jika proses upload berjalan sukses $update=mysqli_query($koneksi,"UPDATE post SET judul='$judul',content='$deskripsi',status='$status', gambar_utama='$alamatdatabase', id_kategori='$id_kategori' WHERE id='$id'"); header("location:post-list.php?pesan=Update post berhasil, selamat"); }else{ header("location:post-list.php?pesan=gagal update post, coba lagi!"); } }else{ ?><script> alert ("bukan gambar, coba lagi!");</script><?php } } } }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 | Edit Post</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"> <!-- Tiny MCE --> <script src="vendor/tinymce/tinymce.min.js"></script> <script type='text/javascript'> tinymce.init({ selector: 'textarea#exampleTextarea' }); </script> </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"> <!-- DataTales Example --> <div class="card shadow mb-4"> <div class="card-header py-3"> <h6 class="m-0 font-weight-bold text-primary">Edit Post</h6> </div> <?php if(isset($_GET['pesan'])){ echo '<i class="fas fa-info-circle"></i> '.$_GET['pesan'].''; } ?> <br/> <div class="card-body"> <div class="table-responsive"> <?php //menjalankan query $id = $_GET['id']; $sql_post = mysqli_query($koneksi, "select * from post WHERE id='$id'"); //menampilkan data $row_post = mysqli_fetch_array($sql_post); ?> <form class="user" action="post-edit.php" enctype="multipart/form-data" method="post"> <div class="form-group"> <input type="text" name="judul" class="form-control" id="exampleInputJudul" value="<?php echo $row_post['judul'];?>" placeholder="Judul Post..."> </div> <div class="form-group"> <textarea style="height:300px;" name="deskripsi" class="form-control" id="exampleTextarea"><?php echo $row_post['content'];?></textarea> </div> <div class="form-group"> <label>Status</label> <select style="width:200px;" class="form-control" id="exampleStatus" name="status"> <?php if($row_post['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"> <label>Gambar</label><br/> <?php if($row_post['gambar_utama']==NULL){ ?> <input type="file" name="fotodoc" size="30" id="gambar"/> <input type="hidden" name="MAX_FILE_SIZE" value="7000000" id="gambar"> <?php }else{ ?> <img style="width:450px;" src="<?php echo $row_post['gambar_utama']?>" /> <input type="hidden" name="fotodoc" size="30" id="gambar"/> <br/> <a href="#" class="hapus_gambar" onClick="konfirm(<?php echo $row_post['id']; ?>)">Hapus Gambar?</a> <?php } ?> </div> <div class="form-group"> <label>Kategori</label> <select style="width:300px;" class="form-control" id="exampleStatus" name="kategori"> <?php $sql_kategori = mysqli_query($koneksi, "select * from kategori where id='".$row_post['id_kategori']."'");?> <?php while($row_kategori = mysqli_fetch_array($sql_kategori)){ ?> <option value="<?php echo $row_kategori['id']?>" selected><?php echo $row_kategori['judul']?></option> <?php $sql_kategori_not = mysqli_query($koneksi, "SELECT * FROM kategori WHERE id NOT IN ('".$row_post['id_kategori']."')");?> <?php while($row_kategori_not = mysqli_fetch_array($sql_kategori_not)){ ?> <option value="<?php echo $row_kategori_not['id']?>"><?php echo $row_kategori_not['judul']?></option> <?php } ?> <?php } ?> </select> </div> <div class="form-group"> <input type="hidden" name="id" value="<?php echo $row_post['id']?>"> <button style="width:200px; float:right;" class="btn btn-primary btn-block"> Update </button> </div> </form> </div> </div> </div> <script language="javascript"> <!-- function konfirm(id) { tanya=confirm("Apakah anda yakin akan menghapus gambar ini ?") if (tanya !="0") { top.location="post-gambar-hapus.php?id="+id+""; } } //--> </script> </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>
- Note: Perlu menambahkan sebuah file php baru (lihat script pada #5 Membuat hapus gambar)
- Tampilannya pada browser akan seperti pada gambar
#5 Membuat Hapus Gambar
- Buat file php baru dan beri nama post-gambar-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, "UPDATE post SET gambar_utama='' WHERE id='$id'"); if($sql){ header("location:post-edit.php?id=$id&pesan=Berhasil, gambar utama sudah dihapus"); }else{ header("location:post-list.php?id=$id&pesan=Gagal, coba lagi"); } ?>
- Jika gambar terhapus maka upload gambar akan muncul. Implementasi kode bisa dilihat di #4 Membuat Edit Post
<label>Gambar</label><br/> <?php if($row_post['gambar_utama']==NULL){ ?> <input type="file" name="fotodoc" size="30" id="gambar"/> <input type="hidden" name="MAX_FILE_SIZE" value="7000000" id="gambar"> <?php }else{ ?> <img style="width:450px;" src="<?php echo $row_post['gambar_utama']?>" /> <input type="hidden" name="fotodoc" size="30" id="gambar"/> <br/> <a href="#" class="hapus_gambar" onClick="konfirm(<?php echo $row_post['id']; ?>)">Hapus Gambar?</a> <?php } ?>
#6 Membuat Button Hapus
- Buat file php baru dan beri nama post-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 post WHERE id='$id'"); if($sql){ header("location:post-list.php?pesan=Berhasil, post sudah dihapus"); }else{ header("location:post-list.php?pesan=Gagal, coba lagi"); } ?>
Sekian Posting tentang Membuat Website Professional dengan PHP & MySql - PART #8: Manajemen Post, di posting selanjutnya akan membahas tentang ubah password yang berhungungan dengan Membuat Website Professional dengan PHP & MySql - PART #3 : Membuat Login Admin & Dashboard. Keep Safe dan Semangat!!