27
,
by Aditya Subawa,
Mar. 27 2020
Selamat malam, tak terasa sudah sampai di part 6 dari seri Membuat Website Professional dengan PHP & MySql. Sebelumnya coba dilihat dulu posting terkait tentang tutorial ini:
Pada seri ke 6 ini, saatnya anda membuat manajemen Halaman, dimana nantinya akan meng-integrasikannya dengan tinyMCE. Nah apalagi itu TinyMCE? TinyMCE adalah HTML WYSIWYG editor, sehingga untuk mengetikkan teks menambah huruf tebal, miring, dan yang lainnya menjadi sangat mudah, dan hasilnya bila disimpan kedalam database otomatis dalam format tag html, sehingga memudahkan membantu dalam mengedit kalimat. Jadi untuk membuat posting seperti ini, anda akan dibantu untuk menebalkan font, mengatur ukuran dan lain sebagainya. Anda tidak perlu mengetik tab HTML Tulisan Tebal untuk menebalkan tulisan, TinyMCE yang akan melakukannya untuk anda.
Baca Juga: Bangkitnya Semangat UKM Indonesia
#1 Membuat Manajemen Halaman
Tambah Halaman
Hidupkan XAMPP anda
Download TinyMCE disini
Extract dan kemudian copy folder tinymce dan letakkan di dalam folder htdocs >> hospital >> admin >> vendor
Seperti terlihat pada gambar berikut
Jika sudah, buatlah sebuah file php baru dan beri nama halaman-tambah.php dan simpan dalam folder admin
Copy kode berikut
<?php
include "../config/koneksi.php";
session_start();
if($_SESSION['status'] !="login"){
header("location:../");
}
if(isset($_POST['judul'])){
$judul=htmlentities($_POST['judul']);
$deskripsi=$_POST['deskripsi'];
$status=$_POST['status'];
$sql=mysqli_query($koneksi, "INSERT INTO halaman (judul,deskripsi,status) VALUES ('$judul','$deskripsi','$status')");
if($sql){
header("location:halaman-list.php?pesan=Tambah halaman berhasil, selamat");
}else{
header("location:halaman-list.php?pesan=Tambah halaman 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 | Tambah Halaman</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 -->
[removed][removed]
[removed]
tinymce.init({
selector: 'textarea#exampleTextarea'
});
[removed]
</head>
<body id="page-top">
<!-- Page Wrapper -->
<?php include "sidebar.php"; ?>
<!-- Content Wrapper -->
<!-- Main Content -->
<?php include "topbar.php";?>
<!-- Begin Page Content -->
<!-- DataTales Example -->
<?php
if(isset($_GET['pesan'])){
echo '
'.$_GET['pesan'].'';
}
?>
<form class="user" action="halaman-tambah.php" method="post">
<input type="text" name="judul" class="form-control" id="exampleInputJudul" placeholder="Judul Halaman...">
<textarea style="height:300px;" name="deskripsi" class="form-control" id="exampleTextarea" placeholder="Deskripsi halaman"></textarea>
Status
<select style="width:200px;" class="form-control" id="exampleStatus" name="status">
Draft
Published
</select>
<button style="width:200px; float:right;" class="btn btn-primary btn-block">
Publish
</button>
</form>
<!-- End Page Content -->
<!-- End Content Wrapper -->
<?php include "footer.php";?>
<!-- End Main Content -->
Lihat script pada baris diatas, untuk meng-integrasikan TinyMCE pada textarea, anda hanya perlu menyisipkan baris kode berikut
<!-- Tiny MCE -->
[removed][removed]
[removed]
tinymce.init({
selector: 'textarea#exampleTextarea'
});
[removed]
Jadi, "selector" textarea dengan id exampleTextarea yang akan kita "inject" dengan TinyMCE . tentu anda mengetahui apa itu textarea bukan? jika belum, HTML <textarea> element merepresentasikan input control yang memiliki area teks lebih dari satu baris. Biasanya digunakan pada Tag <form>.
Lihat baris kode form berikut
<form class="user" action="halaman-tambah.php" method="post">
<input type="text" name="judul" class="form-control" id="exampleInputJudul" placeholder="Judul Halaman...">
<textarea style="height:300px;" name="deskripsi" class="form-control" id="exampleTextarea" placeholder="Deskripsi halaman"></textarea>
Status
<select style="width:200px;" class="form-control" id="exampleStatus" name="status">
Draft
Published
</select>
<button style="width:200px; float:right;" class="btn btn-primary btn-block">
Publish
</button>
</form>
Form halaman tambah ini, memiliki halaman eksekusi yang sama dan menggunakan method "post", Lihat baris kode dibawah.
<form class="user" action="halaman-tambah.php" method="post">if(isset($_POST['judul'])){
$judul=htmlentities($_POST['judul']);
$deskripsi=$_POST['deskripsi'];
$status=$_POST['status'];
$sql=mysqli_query($koneksi, "INSERT INTO halaman (judul,deskripsi,status) VALUES ('$judul','$deskripsi','$status')");
if($sql){
header("location:halaman-list.php?pesan=Tambah halaman berhasil, selamat");
}else{
header("location:halaman-list.php?pesan=Tambah halaman gagal, coba lagi");
}
}else{
unset($_POST['judul']);
}
Ok, disana terlihat perintah MySQLi "INSERT INTO halaman". Jadi apa yang harus anda lakukan selanjutnya? Ya benar, anda harus membuat table halaman dalam database hospital.
Jika kode point 6 sudah anda simpan, tampilannya pada browser akan seperti ini:
#2 Membuat Table Halaman
Buka pada browser http://localhost/phpmyadmin
Klik database hospital, kemudian klik New untuk menambahkan table baru
Buatlah column table sesuai dengan structure/gambar dibawah
Jika sudah, balik ke bagian #1 Membuat Manajemen Halaman Point 12 , Cobalah untuk meng-jalankan halaman-tambah.php.
#3 Membuat List Halaman
Buat sebuah file PHP baru dengan nama halaman-list.php dan simpan didalam folder admin
Copy baris kode berikut, dan simpan.
<?php
include "../config/koneksi.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 Halaman</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 -->
<?php include "sidebar.php"; ?>
<!-- Content Wrapper -->
<!-- Main Content -->
<?php include "topbar.php";?>
<!-- Begin Page Content -->
<!-- DataTales Example -->
<?php
if(isset($_GET['pesan'])){
echo '
'.$_GET['pesan'].'';
}
?>
<?php $sql = mysqli_query($koneksi, "select * from halaman");?>
<?php $no = 1; ?>
No
Judul
Publish
Action
No
Judul
Publish
Action
<?php while ($row=mysqli_fetch_array($sql)){ ?>
<?php echo $no; ?>
<?php echo $row['judul']?>
<?php if($row['status']==0){ ?>
Draft
<?php }else{ ?>
Published
<?php } ?>
Edit Hapus
<?php $no++; ?>
<?php } ?>
<!-- End Page Content -->
<!-- End Content Wrapper -->
<?php include "footer.php";?>
<!-- End Main Content -->
Karena template admin yang anda gunakan menggunakan bootstrap, maka mari manfaatkan table yang sudah include pada template dan disesuaikan dengan menggunakan teknik loop PHP, seperti terlihat pada baris kode berikut:
<?php $sql = mysqli_query($koneksi, "select * from halaman");?>
<?php $no = 1; ?>
No
Judul
Publish
Action
No
Judul
Publish
Action
<?php while ($row=mysqli_fetch_array($sql)){ ?>
<?php echo $no; ?>
<?php echo $row['judul']?>
<?php if($row['status']==0){ ?>
Draft
<?php }else{ ?>
Published
<?php } ?>
Edit Hapus
<?php $no++; ?>
<?php } ?>
Tampilan Halaman List akan seperti pada gambar
#4 Membuat Halaman Edit
Buat sebuah file PHP baru dengan nama halaman-edit.php dan simpan didalam folder admin
Copy baris kode berikut, dan simpan.
<?php
include "../config/koneksi.php";
session_start();
if($_SESSION['status'] !="login"){
header("location:../");
}
if(isset($_POST['judul'])){
$id=$_POST['id'];
$judul=htmlentities($_POST['judul']);
$deskripsi=$_POST['deskripsi'];
$status=$_POST['status'];
$update=mysqli_query($koneksi, "UPDATE halaman SET judul='$judul', deskripsi='$deskripsi', status='$status' WHERE id='$id'");
if($update){
header("location:halaman-list.php?pesan=Update halaman berhasil, selamat");
}else{
header("location:halaman-list.php?pesan=Update halaman 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 | Tambah Halaman</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 -->
[removed][removed]
[removed]
tinymce.init({
selector: 'textarea#exampleTextarea'
});
[removed]
</head>
<body id="page-top">
<!-- Page Wrapper -->
<?php include "sidebar.php"; ?>
<!-- Content Wrapper -->
<!-- Main Content -->
<?php include "topbar.php";?>
<!-- Begin Page Content -->
<!-- DataTales Example -->
<?php
if(isset($_GET['pesan'])){
echo '
'.$_GET['pesan'].'';
}
?>
<?php
$id = $_GET['id'];
$sqlhal = mysqli_query($koneksi, "select * from halaman WHERE id='$id'");
$rowhal = mysqli_fetch_array($sqlhal);
?>
<form class="user" action="halaman-edit.php" method="post">
<input type="text" name="judul" class="form-control" id="exampleInputJudul" value="<?php echo $rowhal['judul'];?>" placeholder="Judul Halaman...">
<textarea style="height:300px;" name="deskripsi" class="form-control" id="exampleTextarea" placeholder="Deskripsi halaman"><?php echo $rowhal['deskripsi'];?></textarea>
Status
<select style="width:200px;" class="form-control" id="exampleStatus" name="status">
<?php if($rowhal['status']==0){ ?>
Draft
Published
<?php }else{ ?>
Draft
Published
<?php } ?>
</select>
<input type="hidden" name="id" value="<?php echo $rowhal['id']?>">
<button style="width:200px; float:right;" class="btn btn-primary btn-block">
Update
</button>
</form>
<!-- End Page Content -->
<!-- End Content Wrapper -->
<?php include "footer.php";?>
<!-- End Main Content -->
Perhatikan baris kode berikut
<?php
$id = $_GET['id'];
$sqlhal = mysqli_query($koneksi, "select * from halaman WHERE id='$id'");
$rowhal = mysqli_fetch_array($sqlhal);
?>
Form Edit memiliki logika yang sama dengan saat anda membuat profile-ubah.php (Lihat di Membuat Website Professional dengan PHP & MySql - PART #5 : Membuat Halaman Profile Admin & Integrasi Gravatar ), lihat tampilannya pada browser
#5 Membuat Button Hapus Halaman
Buat sebuah file PHP baru dengan nama halaman-hapus.php dan simpan didalam folder admin
Copy baris kode berikut, dan simpan
<?php
session_start();
include '../config/koneksi.php';
$id = $_GET['id'];
$sql = mysqli_query($koneksi, "DELETE FROM halaman WHERE id='$id'");
if($sql){
header("location:halaman-list.php?pesan=Berhasil, halaman sudah dihapus");
}else{
header("location:halaman-list.php?pesan=Gagal, coba lagi");
}
?>
Baris kode diatas anda memanfaatkan method GET ($_GET) pada PHP untuk mendapatkan id yang dikirim oleh button HAPUS di Halaman List, dan kemudian memanfaatkan syntax MySQL "WHERE" agar data yang ingin dihapus memiliki id yang sama. Sebelum mengeksekusi script ini, Edit terlebih dahulu halaman-list.php dan tambahkan sedikit kode javascript di button HAPUS Hapus Sehingga, ada filter sebelum anda mengapus sebuah data.
Sekian posting Membuat Website Professional dengan PHP MySql - PART #6 ini, file tutorial ini bisa anda Download Disini . Stay Strong & Healthy. Bye Bye
mantap.... the best