LOADING . . .

Membuat Website Professional dengan PHP MySql - PART #6

0 Comment



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 <b>Tulisan Tebal</b> untuk menebalkan tulisan, TinyMCE yang akan melakukannya untuk anda.

#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 
    // 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']);
    	$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 -->
      <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 Halaman</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">
                   <form class="user" action="halaman-tambah.php" method="post">
                        <div class="form-group">
                          <input type="text" name="judul" class="form-control" id="exampleInputJudul" placeholder="Judul Halaman...">
                        </div>
                        <div class="form-group">
                          <textarea style="height:300px;" name="deskripsi" class="form-control" id="exampleTextarea" placeholder="Deskripsi halaman"></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">
                        <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>​
  7. Lihat script pada baris diatas, untuk meng-integrasikan TinyMCE pada textarea, anda hanya perlu menyisipkan baris kode berikut 
    <!-- Tiny MCE -->
      <script src="vendor/tinymce/tinymce.min.js"></script>
      
      <script type='text/javascript'> 
    	tinymce.init({
      selector: 'textarea#exampleTextarea'
    });
      </script>​
  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">
                        <div class="form-group">
                          <input type="text" name="judul" class="form-control" id="exampleInputJudul" placeholder="Judul Halaman...">
                        </div>
                        <div class="form-group">
                          <textarea style="height:300px;" name="deskripsi" class="form-control" id="exampleTextarea" placeholder="Deskripsi halaman"></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">
                        <button style="width:200px; float:right;" class="btn btn-primary btn-block">
                          Publish
                        </button>
                        </div>
                    </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 
    // 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 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 -->
      <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 Halaman</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 halaman");?>
                  <?php $no = 1; ?>
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                      <thead>
                        <tr>
                          <th>No</th>
                          <th>Judul</th>
                          <th>Publish</th>
                          <th>Action</th>
                         </tr>
                      </thead>
                      <tfoot>
                        <tr>
                          <th>No</th>
                          <th>Judul</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 if($row['status']==0){ ?>
                          <td>Draft</td>
                          <?php }else{ ?>
                          <td>Published</td>
                          <?php } ?>
                          <td><a href="halaman-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="halaman-hapus.php?id=<?php echo $row['id']?>" class="btn btn-danger btn-icon-split" style="font-size: 12px;"><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>​
  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; ?>
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                      <thead>
                        <tr>
                          <th>No</th>
                          <th>Judul</th>
                          <th>Publish</th>
                          <th>Action</th>
                         </tr>
                      </thead>
                      <tfoot>
                        <tr>
                          <th>No</th>
                          <th>Judul</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 if($row['status']==0){ ?>
                          <td>Draft</td>
                          <?php }else{ ?>
                          <td>Published</td>
                          <?php } ?>
                          <td><a href="halaman-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="halaman-hapus.php?id=<?php echo $row['id']?>" class="btn btn-danger btn-icon-split" style="font-size: 12px;"><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>​
  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 
    // menghubungkan dengan koneksi
    include "../config/koneksi.php";
    // mengaktifkan session php
    session_start();
    if($_SESSION['status'] !="login"){
    header("location:../");
    }
    
    //Update Halaman
    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 -->
      <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 Halaman</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'];
    				$sqlhal = mysqli_query($koneksi, "select * from halaman WHERE id='$id'");
    				//menampilkan data
    				$rowhal = mysqli_fetch_array($sqlhal);
    			  ?>
                   <form class="user" action="halaman-edit.php" method="post">
                        <div class="form-group">
                          <input type="text" name="judul" class="form-control" id="exampleInputJudul" value="<?php echo $rowhal['judul'];?>" placeholder="Judul Halaman...">
                        </div>
                        <div class="form-group">
                          <textarea style="height:300px;" name="deskripsi" class="form-control" id="exampleTextarea" placeholder="Deskripsi halaman"><?php echo $rowhal['deskripsi'];?></textarea>
                        </div>
                        <div class="form-group">
                        <label>Status</label>
                          <select style="width:200px;" class="form-control" id="exampleStatus" name="status">
                          	<?php if($rowhal['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 $rowhal['id']?>">
                        <button style="width:200px; float:right;" class="btn btn-primary btn-block">
                          Update
                        </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>​
  3. Perhatikan baris kode berikut
    <?php 
     //menjalankan query
    $id = $_GET['id'];
    $sqlhal = mysqli_query($koneksi, "select * from halaman WHERE id='$id'");
    //menampilkan data
    $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
    // mengaktifkan session php
    session_start();
    
    // menghubungkan dengan koneksi
    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 
    <a href="halaman-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>
  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




I’d love to hear from you, leave a Reply!