PHP

Membuat Website Professional dengan PHP MySql - PART #6

Home » Post » Membuat Website Professional dengan PHP MySql - PART #6

Membuat Website Professional dengan PHP MySql - PART #6

Table of contents



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

  1. Hidupkan XAMPP anda
  2. Download TinyMCE disini 
  3. Extract dan kemudian copy folder tinymce dan letakkan di dalam folder htdocs >> hospital >> admin >> vendor 
  4. Seperti terlihat pada gambar berikut 
  5. Jika sudah, buatlah sebuah file php baru dan beri nama halaman-tambah.php dan simpan dalam folder admin
  6. 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 -->
          
    
            
    
              
    Tambah Halaman
    
            
    
            <?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>
                    
    
                    
    
                    
                      <select style="width:200px;" class="form-control" id="exampleStatus" name="status">
                       
                        
                      </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 -->
    
    
    <!-- End Page Wrapper -->
   <!-- Bootstrap core JavaScript-->
  [removed][removed]
  [removed][removed]

  <!-- Core plugin JavaScript-->
  [removed][removed]

  <!-- Custom scripts for all pages-->
  [removed][removed]

  <!-- Page level plugins -->
  [removed][removed]
  [removed][removed]

  <!-- Page level custom scripts -->
  [removed][removed]
</body>
</html>​
  7. 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]​
  8. 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>.
  9. 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>
                    
    
                    
    
                    
                      <select style="width:200px;" class="form-control" id="exampleStatus" name="status">
                       
                        
                      </select>
                    
    
                    
    
                    <button style="width:200px; float:right;" class="btn btn-primary btn-block">
                      Publish
                    </button>
                    
    
                </form>​
  10. 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">
    jadi baris kode PHP dibawah ini, adalah "menangkap" apa yang form halaman tambah inputkan.  
    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']);
}​
  11. 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. 
  12. Jika kode point 6 sudah anda simpan, tampilannya pada browser akan seperti ini: 

#2 Membuat Table Halaman

  1. Buka pada browser http://localhost/phpmyadmin
  2. Klik database hospital, kemudian klik New untuk menambahkan table baru
  3. Buatlah column table sesuai dengan structure/gambar dibawah 
  4. Jika sudah, balik ke bagian #1 Membuat Manajemen Halaman Point 12, Cobalah untuk meng-jalankan halaman-tambah.php.

#3 Membuat List Halaman

  1. Buat sebuah file PHP baru dengan nama halaman-list.php dan simpan didalam folder admin
  2. 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 -->
          
    
            
    
              
    List Halaman
    
            
    
            
    
              
    
              <?php 
             if(isset($_GET['pesan'])){
                 echo ' '.$_GET['pesan'].'';
             }
             ?>
                
    
              <?php $sql = mysqli_query($koneksi, "select * from halaman");?>
              <?php $no = 1; ?>
                
                  <?php while ($row=mysqli_fetch_array($sql)){ ?>
                    
                      <?php if($row['status']==0){ ?>
                      
                      <?php }else{ ?>
                      
                      <?php } ?>
                      
                    <?php $no++; ?>
                    <?php } ?>
                  
    
                  
                    
    
                      No
                      Judul
                      Publish
                      Action
                     
    
                      
                  
                    
    
                      No
                      Judul
                      Publish
                      Action
                    
    
                      
                  
    
                      <?php echo $no; ?>
                      <?php echo $row['judul']?>DraftPublishedEdit  Hapus
                    
    
                
    
              
    
            
    
          
    
          
          
        
    
         <!-- End Page Content -->
      
    
      <!-- End Content Wrapper -->
     <?php include "footer.php";?>

    
    
    <!-- End Main Content -->
    
    
    <!-- End Page Wrapper -->
   <!-- Bootstrap core JavaScript-->
  [removed][removed]
  [removed][removed]

  <!-- Core plugin JavaScript-->
  [removed][removed]

  <!-- Custom scripts for all pages-->
  [removed][removed]

  <!-- Page level plugins -->
  [removed][removed]
  [removed][removed]

  <!-- Page level custom scripts -->
  [removed][removed]
</body>
</html>​
  3. 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; ?>
                
                  <?php while ($row=mysqli_fetch_array($sql)){ ?>
                    
                      <?php if($row['status']==0){ ?>
                      
                      <?php }else{ ?>
                      
                      <?php } ?>
                      
                    <?php $no++; ?>
                    <?php } ?>
                  
    
                  
                    
    
                      No
                      Judul
                      Publish
                      Action
                     
    
                      
                  
                    
    
                      No
                      Judul
                      Publish
                      Action
                    
    
                      
                  
    
                      <?php echo $no; ?>
                      <?php echo $row['judul']?>DraftPublishedEdit  Hapus
                    
    
                
    ​
  4. Tampilan Halaman List akan seperti pada gambar 

#4 Membuat Halaman Edit

  1. Buat sebuah file PHP baru dengan nama halaman-edit.php dan simpan didalam folder admin
  2. 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 -->
          
    
            
    
              
    Edit Halaman
    
            
    
            <?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>
                    
    
                    
    
                    
                      <select style="width:200px;" class="form-control" id="exampleStatus" name="status">
                       <?php if($rowhal['status']==0){ ?>
                       
                        
                        <?php }else{ ?>
                        
                        
                        <?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 -->
    
    
    <!-- End Page Wrapper -->
   <!-- Bootstrap core JavaScript-->
  [removed][removed]
  [removed][removed]

  <!-- Core plugin JavaScript-->
  [removed][removed]

  <!-- Custom scripts for all pages-->
  [removed][removed]

  <!-- Page level plugins -->
  [removed][removed]
  [removed][removed]

  <!-- Page level custom scripts -->
  [removed][removed]
</body>
</html>​
  3. Perhatikan baris kode berikut 
    <?php 
 
$id = $_GET['id'];
$sqlhal = mysqli_query($koneksi, "select * from halaman WHERE id='$id'");

$rowhal = mysqli_fetch_array($sqlhal);
?>​
    Baris kode ini anda memanfaatkan method GET ($_GET) pada PHP untuk mendapatkan id yang dikirim oleh button EDIT di Halaman List, dan kemudian memanfaatkan syntax MySQL "WHERE" agar data yang ditampilkan memiliki id yang sama. Dan ditampilkan value data di form Edit dengan <?php echo $rowhal['judul']; ?> .
  4. 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

  1. Buat sebuah file PHP baru dengan nama halaman-hapus.php dan simpan didalam folder admin
  2. 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"); 
 }
?>​
  3. 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. 
  4. Sebelum mengeksekusi script ini, Edit terlebih dahulu halaman-list.php dan tambahkan sedikit kode javascript di button HAPUS  
    Hapus
  5. 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


Artikel Terkait