LOADING . . .

Membuat Website Professional dengan PHP MySql - PART #4

by Aditya Subawa, Mar. 26 2020

Hi, sesuai dengan janji saya sebelumnya di posting Membuat Website Professional dengan PHP & MySql - PART #3 bahwa topik pada posting ini adalah men-design halaman admin/dashboard website professional anda. Langsung saja biar gak kepanjangan intro...

Tapi sebelumnya saya ingin sampaikan bahwa saya tidak menjabarkan secara rinci bagaimana membuat template HTML dari awal/nol. Saya hanya akan mengkombinasikan website PHP yang kita buat dengan bantuan dari Template admin HTML Bootstrap, silahkan anda download terlebih dahulu disini. Oke, anda menemukan istilah baru yaitu bootstrap. Bootstrap merupakan sebuah library framework CSS yang telah dibuat khusus uintuk mengembangkan front end sebuah website. Bootstrap juga dikenal sebagai salah satu framework CSS, HTML, Javascript yang begitu populer di kalangan website developer atau pengembang website. Yang pasti bootstrap digunakan untuk mengembangkan website agar lebih responsive.

Yang perlu anda lakukan setelah men-download dan meng-ekstrak template HTML diatas adalah copy folder css, js, img, vendor, scss kedalam folder htdocs >> hospital >> admin, sehingga akan terlihat seperti gambar dibawah ini:

#1 Mengkombinasikan dan Membuat Login Admin

Hidupkan XAMPP anda.
Masuk ke dalam folder htdocs lalu folder hospital kemudian buka folder admin dan kemudian buka file index.php di text editor anda.

Copy code berikut dan simpan

<!DOCTYPE html>
<html lang="en">
  <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 | Admin</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">

</head>
<body class="bg-gradient-primary">
 

    <!-- Outer Row -->
    

      

        
          
            <!-- Nested Row within Card Body -->
            
              
              
                
                  
                    Admin Login
                  
                  

 <!-- pesan -->
 <?php 
 if(isset($_GET['pesan'])){
  if($_GET['pesan'] == "gagal"){
   echo "Login gagal! username dan password salah!";
  }else if($_GET['pesan'] == "logout"){
   echo "Anda telah berhasil logout";
  }else if($_GET['pesan'] == "belum_login"){
   echo "Anda harus login untuk mengakses halaman dashboard";
  }
 }
 ?>
 

 

 <form class="user" method="post" action="proses-login.php">
  
                      <input type="text" class="form-control form-control-user" name="username" placeholder="Username" required>
                    
                    
                      <input type="password" class="form-control form-control-user" id="exampleInputPassword" name="password" placeholder="Password" required>
                    
   
                      <button class="btn btn-primary btn-user btn-block">
                      Login
                    </button>
                    
                     
 </form>

                  
                
              
            
          
        

      

    

  

  <!-- Bootstrap core JavaScript-->
  [removed][removed]
  [removed][removed]

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

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

</body>

</html>

Dari yang dilihat pada script diatas, kode yang sudah kita buat sebelumnya lihat di posting Membuat Website Professional dengan PHP & MySql - PART #3 bagian membuat Halaman Login tidaklah hilang, melainkan disisipkan di kode HTML bootstrap tadi. Lihat hasilnya pada browser apakah sudah seperti gambar dibawah? jika sudah, pastikan semua fungsi PHP berjalan dengan benar.

#2 Membuat Dashboard

Masuk ke dalam folder htdocs lalu folder hospital kemudian buka folder admin dan kemudian buka file dashboard.php di text editor anda.
Bagi menjadi beberapa bagian tujuannya untuk memudahkan anda melakukan perubahan pada halaman admin, jadi anda akan meminimalisir mengetik script HTML berkali-kali disetiap halaman, anda akan memanfaatkan fungsi "include" PHP (Lihat disini penjelasannya)
Jadi anda akan buat file php baru yaitu topbar.php, sidebar.php dan footer.php

Mari mulai dari topbar.php, copy kode berikut:

        
          <!-- Sidebar Toggle (Topbar) -->
          <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
            
          </button>
          <!-- Topbar Search -->
          <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
            
              <input type="text" class="form-control bg-light border-0 small" placeholder="Pencarian..." aria-label="Search" aria-describedby="basic-addon2">
              
                <button class="btn btn-primary" type="button">
                  
                </button>
              
            
          </form>
          <!-- Topbar Navbar -->
          
            <!-- Nav Item - Search Dropdown (Visible Only XS) -->
            
              
                
              
              <!-- Dropdown - Messages -->
              
                <form class="form-inline mr-auto w-100 navbar-search">
                  
                    <input type="text" class="form-control bg-light border-0 small" placeholder="Pencarian..." aria-label="Search" aria-describedby="basic-addon2">
                    
                      <button class="btn btn-primary" type="button">
                        
                      </button>
                    
                  
                </form>
              
            
            <!-- Nav Webiste URL -->
            
              Lihat Website
            
            
            <!-- Nav Item - User Information -->
            
              
                <?php echo $_SESSION['username']; ?>
                
              
              <!-- Dropdown - User Information -->
              
                
                  
                  Profile
                
                
                  
                  Ubah Password

sidebar.php, copy kode berikut:

<!-- Sidebar -->
    

      <!-- Sidebar - Brand -->
      
        
          
        
        Hospital
      

      <!-- Divider -->
      

      <!-- Nav Item - Dashboard -->
      
        
          
          Dashboard
      

      <!-- Divider -->
      

      <!-- Heading -->
      
        Fitur Utama
      

      <!-- Nav Item - Pages Collapse Menu -->
      
        
          
          Halaman
        
        
          
            Manajemen Halaman:
            List Halaman
            Tambah Halaman
          
        
      

      <!-- Nav Item - Utilities Collapse Menu -->
      
        
          
          Post
        
        
          
            Manajemen Post:
            List Post
            Tambah Post
            Kategori
          
        
      

      <!-- Divider -->
      

    

      <!-- Nav Item - Tables -->
      
        
          
          Logout
      

      <!-- Divider -->
      

      <!-- Sidebar Toggler (Sidebar) -->
      
        <button class="rounded-circle border-0" id="sidebarToggle"></button>
      

    
    <!-- End of Sidebar -->

footer.php, copy kode berikut:

 <!-- Footer -->
      
        
          
            © Aditya Subawa 2020
          
        
      
      <!-- End of Footer -->

Dan tentunya dashboard.php tadi, copy kode berikut:

<?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 | Dashboard</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">
</head>
<body id="page-top">

<!-- Page Wrapper -->
  
   <?php include "sidebar.php"; ?>
    
    <!-- Content Wrapper -->
    

      <!-- Main Content -->
      
      
      <?php include "topbar.php";?>
      
       <!-- Begin Page Content -->
        
         <!-- Page Heading -->
           
             Dashboard
           
            
            <!-- Content Row -->
          
          <!-- Greeting -->
            
   Hi <?php echo $_SESSION['username']; ?>! anda telah login.
            
          
          <!-- End Content Row -->
          
        
         <!-- 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]

  <!-- Page level custom scripts -->
  [removed][removed]
  [removed][removed]
</body>
</html>

Saya banyak melakukan modifikasi peletakan script PHP sesuai dengan kecocokan template HTML dari bootstrap. Lihat hasilnya di browser

Anda bisa mendownload file tutorial posting ini disini. Stay Safe & Healthy. Selamat Hari Raya Nyepi...

Membuat Website Professional dengan PHP MySql - PART #4

Admin Login

Manajemen Halaman:

Manajemen Post:

Dashboard

Hi <?php echo $_SESSION['username']; ?>! anda telah login.

Buy Me a Coffee

Categories

Recent Posts

Archives

Membuat Website Professional dengan PHP MySql - PART #4

Admin Login

Manajemen Halaman:

Manajemen Post:

Dashboard

Hi <?php echo $_SESSION['username']; ?>! anda telah login.

Related Post

Membuat Website Professional dengan PHP & MySql - PART #10

Membuat Website Professional dengan PHP & MySql - PART #8

Membuat Website Professional dengan PHP & MySql - PART #14

Buy Me a Coffee

Categories

Recent Posts

Archives