LOADING . . .
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.
Baca Juga: Bangkitnya Semangat UKM Indonesia
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
<!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>
#2 Membuat Dashboard
<!-- Sidebar -->
<!-- End of Sidebar --> <!-- Footer -->
<!-- End of Footer --><?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>
Anda bisa mendownload file tutorial posting ini disini. Stay Safe & Healthy. Selamat Hari Raya Nyepi...
Selamat Malam, setelah posting saya sebelumnya Membuat Website Professional dengan PHP & MySql - PART #1 yang mana hanya membahas pengertian…
Selamat siang, pada posting kali ini saya akan melanjutkan seri Membuat Website Professional dengan PHP & MySql yang sudah sampai ke…
Membuat Konversi Mata Uang Otomatis dengan PHP - Malam masbro-masbro yang budiman serta dermawan, tidak sombong dan rajin menabung. Pada…
mantap bang, aku tunggu lanjutannya