Hola, Selamat Malam pembaca yang sedang duduk manis dirumah atau sedang "Work From Home" akibat pendemi CORONA COVID-19 di seluruh dunia. Bagi yang sedang mengikuti seri Membuat Website Professional dengan PHP & MySql silahkan dibaca terlebih dahulu beberapa posting terkait.
- Membuat Website Professional dengan PHP & MySql - PART #1 : Pengertian Dasar & Tools
- Membuat Website Professional dengan PHP & MySql - PART #2 : Setup Database, Table & Hirarki Folder
- Membuat Website Professional dengan PHP & MySql - PART #3 : Membuat Login Admin & Dashboard
- Membuat Website Professional dengan PHP & MySql - PART #4 : Customized Login Admin & Dashboard
- Membuat Website Professional dengan PHP & MySql - PART #5 : Membuat Halaman Profile Admin & Integrasi Gravatar
- Membuat Website Professional dengan PHP & MySql - PART #6 : Manajemen Halaman
- Membuat Website Professional dengan PHP & MySql - PART #7 : Manajemen Kategori
- Membuat Website Professional dengan PHP & MySql - PART #8 : Manajemen Post
- Membuat Website Professional dengan PHP & MySql - PART #9 : Manajemen Password Admin
Pada sore ini posting saya sudah menyentuh Halaman Frontend, apa yang harus anda siapkan terlebih dahulu? Pada halaman frontend saya akan menggunakan template HTML bernama "docmed" dari colorlib, silahkan anda download disini terlebih dahulu atau download file tutorial ini di bagian akhir.
Frontend sendiri akan berisi 4 buah halaman utama, yaitu Home, About, Blog & Contact. Jadi, sebelum melakukan itu anda diharuskan membuat halaman di admin/dasboard atau yang belum mengetahui caranya lihat Membuat Website Professional dengan PHP & MySql - PART #6 : Manajemen Halaman
#1 Pengaturan Awal
- Buat file php dan beri nama base.php simpan didalam folder config.
- Copy kode berikut dan simpan.
<?php
if (!function_exists('base_url')) {
function base_url($atRoot=FALSE, $atCore=FALSE, $parse=FALSE){
if (isset($_SERVER['HTTP_HOST'])) {
$http = isset($_SERVER['HTTPS']) && strtolower($_SERVER['HTTPS']) !== 'off' ? 'https' : 'http';
$hostname = $_SERVER['HTTP_HOST'];
$dir = str_replace(basename($_SERVER['SCRIPT_NAME']), '', $_SERVER['SCRIPT_NAME']);
$core = preg_split('@/@', str_replace($_SERVER['DOCUMENT_ROOT'], '', realpath(dirname(__FILE__))), NULL, PREG_SPLIT_NO_EMPTY);
$core = $core[0];
$tmplt = $atRoot ? ($atCore ? "%s://%s/%s/" : "%s://%s/") : ($atCore ? "%s://%s/%s/" : "%s://%s%s");
$end = $atRoot ? ($atCore ? $core : $hostname) : ($atCore ? $core : $dir);
$base_url = sprintf( $tmplt, $http, $hostname, $end );
}
else $base_url = 'http://localhost/';
if ($parse) {
$base_url = parse_url($base_url);
if (isset($base_url['path'])) if ($base_url['path'] == '/') $base_url['path'] = '';
}
return $base_url;
}
}
// PENGATURAN GLOBAL
$base_url = base_url();
$site_title = 'Suba Hospital';
$site_desc = 'Just Another Rumah Sakit PHP Site';
// TOOLBAR
$email = 'me@adityasubawa.com';
$phone = '08174741422';
$fb_link = 'https://www.facebook.com/deddy.aditya';
$ig_link = 'https://www.instagram.com/adityasubawa';
// FOOTER
$address = 'Jalan Pucuk Indah No 9, Br. Kesambi<br>
+6281 747 414 22<br>';
// SEO + SOCIAL GRAPH
if (!function_exists('seo_graph')) {
function seo_graph(){
$seo_graph ='<meta name="description" content="Just Another PHP Site">
<!-- Essential META Tags -->
<meta property="og:title" content="Suba Hospital">
<meta property="og:description" content="Just Another Rumah Sakit PHP Site.">
<meta property="og:image" content="'.base_url().'img/about/2.png">
<meta property="og:url" content="'.base_url().'">
<meta name="twitter:card" content="summary_large_image">
<!-- Non-Essential, But Recommended -->
<meta property="og:site_name" content="Just Another Rumah Sakit PHP Site.">
<meta name="twitter:image:alt" content="Alt text for image">
<!-- Non-Essential, But Required for Analytics -->
<meta property="fb:app_id" content="your_app_id" />
<meta name="twitter:site" content="@adityasubawa">
';
return $seo_graph;
}
}
$seo_graph = seo_graph();
?>Note: Fungsi base.php adalah sebagai pembantu anda agar mudah mengedit/merubah deskripsi utama dari project rumah sakit ini.
#2 Membuat htaccess
- htaccess adalah sebuah file text sederhana atau ASCII yang memiliki beragam fungsi untuk website. Biasanya file jenis ini dipakai untuk mengubah halaman default index dan juga memberi proteksi atau password kepada direktori yang dituju. Dalam Seri ini, fungsi htaccess sendiri saya gunakan untuk memanipulasi Url agar terlihat lebih cantik.
- Note: Agar mendapatkan posisi terbaik pada Search Engine, salah satu hal yang paling utama harus Anda lakukan adalah mengatur SEO Friendly URL di website, untuk memudahkan search engine dalam melakukan indexing. URL yang sesuai dengan konten artikel, memiliki reputasi lebih baik dimata search engine, sehingga bisa meningkatkan peringkat artikel atau website kita.
- Contoh perbedaan antara Default URL dengan Friendly URL: Default URL : http://localhost/hospital/index.php?id_category=9&controller=category Friendly URL : http://localhost/hospital/9-casual-dresses
- Jadi, untuk mengakalinya, buat file baru dan beri nama .htaccess (dot htaccess). Copy kode berikut
<IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{SCRIPT_FILENAME} !-d RewriteCond %{SCRIPT_FILENAME} !-f RewriteRule ^(.*)$ $1.php RewriteRule ^post/(\d+)/([A-Za-z]+) ./post.php?id=$1&$url=$2 RewriteRule ^kategori/(.*)$ ./kategori.php?id=$1 ErrorDocument 404 /hospital/404.php </IfModule> - Lihat sedikit kode yang terdapat pada file htaccess.
- Baris kode berikut berfungsi untuk menghilangkan ektensi .php. contoh http://localhost/hospital/about.php akan menjadi http://localhost/hospital/about tanpa merusak fungsinya.
RewriteRule ^(.*)$ $1.php - Baris kode berikut memiliki fungsi agar url post nantinya akan lebih SEO friendly. Project yang anda bangun mempunyai default url http://localhost/hospital/post.php?id=1&slug=lorem-ipsum-dolor. Dengan menambahkan baris kode ini url akan menjadi http://localhost/hospital/post/1/lorem-ipsum-dolor
RewriteRule ^post/(\d+)/([A-Za-z]+) ./post.php?id=$1&$url=$2 - Baris kode ini hanya untuk mengarahkan halaman yang tidak ada atau salah mengakses url ke halaman 404
ErrorDocument 404 /hospital/404.php
#3 Halaman Home
- Hidupkan XAMPP anda.
- Copy seluruh file assets (js, css, img, sass dan fonts) pada folder download template "docmed" tadi, letakkan atau paste di dalam folder hospital seperti yang terlihat pada gambar dibawah ini.
- Buat file php dan beri nama header.php, simpan di dalam folder hospital. Dan copy script header dibawah
<?php include('config/koneksi.php'); include('config/base.php'); ?> <!doctype html> <html class="no-js" lang="zxx"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Suba Hospital</title> <?php echo $seo_graph;?> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <link rel="manifest" href="site.webmanifest"> --> <link rel="shortcut icon" type="image/x-icon" href="<?php echo $base_url; ?>img/fav.png"> <!-- Place favicon.ico in the root directory --> <!-- CSS here --> <link rel="stylesheet" href="<?php echo $base_url; ?>css/bootstrap.min.css"> <link rel="stylesheet" href="<?php echo $base_url; ?>css/owl.carousel.min.css"> <link rel="stylesheet" href="<?php echo $base_url; ?>css/magnific-popup.css"> <link rel="stylesheet" href="<?php echo $base_url; ?>css/font-awesome.min.css"> <link rel="stylesheet" href="<?php echo $base_url; ?>css/themify-icons.css"> <link rel="stylesheet" href="<?php echo $base_url; ?>css/nice-select.css"> <link rel="stylesheet" href="<?php echo $base_url; ?>css/flaticon.css"> <link rel="stylesheet" href="<?php echo $base_url; ?>css/gijgo.css"> <link rel="stylesheet" href="<?php echo $base_url; ?>css/animate.css"> <link rel="stylesheet" href="<?php echo $base_url; ?>css/slicknav.css"> <link rel="stylesheet" href="<?php echo $base_url; ?>css/style.css"> <!-- <link rel="stylesheet" href="css/responsive.css"> --> </head> <body> <!--[if lte IE 9]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p> <![endif]--> <!-- header-start --> <header> <div class="header-area "> <div class="header-top_area"> <div class="container"> <div class="row"> <div class="col-xl-6 col-md-6 "> <div class="social_media_links"> <a href="<?php echo $fb_link;?>"> <i class="fa fa-facebook"></i> </a> <a href="<?php echo $ig_link;?>"> <i class="fa fa-instagram"></i> </a> </div> </div> <div class="col-xl-6 col-md-6"> <div class="short_contact_list"> <ul> <li><a href="#"> <i class="fa fa-envelope"></i> <?php echo $email;?></a></li> <li><a href="#"> <i class="fa fa-phone"></i> <?php echo $phone;?></a></li> </ul> </div> </div> </div> </div> </div> <div id="sticky-header" class="main-header-area"> <div class="container"> <div class="row align-items-center"> <div class="col-xl-3 col-lg-2"> <div class="logo"> <a href="index.php"> <img src="<?php echo $base_url; ?>img/logo.png" alt=""> </a> </div> </div> <div class="col-xl-6 col-lg-7"> <div class="main-menu d-none d-lg-block"> <nav> <ul id="navigation"> <li><a class="active" href="<?php echo $base_url; ?>">Home</a></li> <li><a href="<?php echo $base_url;?>about">About</a></li> <li><a href="<?php echo $base_url;?>blog">Blog</a></li> <li><a href="<?php echo $base_url;?>contact">Contact</a></li> </ul> </nav> </div> </div> <div class="col-12"> <div class="mobile_menu d-block d-lg-none"></div> </div> </div> </div> </div> </div> </header> <!-- header-end --> - Buat file php dan beri nama footer.php, simpan di dalam folder hospital. Dan copy script header dibawah
<!-- footer start --> <footer class="footer"> <div class="footer_top"> <div class="container"> <div class="row"> <div class="col-xl-4 col-md-6 col-lg-4"> <div class="footer_widget"> <div class="footer_logo"> <a href="#"> <img src="<?php echo $base_url; ?>img/footer_logo.png" alt=""> </a> </div> <p> <?php echo $site_desc;?> </p> <div class="socail_links"> <ul> <li> <a href="<?php echo $fb_link;?>"> <i class="ti-facebook"></i> </a> </li> <li> <a href="<?php echo $ig_link;?>"> <i class="fa fa-instagram"></i> </a> </li> </ul> </div> </div> </div> <div class="col-xl-3 col-md-6 col-lg-3"> <div class="footer_widget"> <h3 class="footer_title"> Recent Post </h3> <ul> <?php $sqlrp = mysqli_query($koneksi, "select * from post WHERE status='1' ORDER BY id DESC LIMIT 5"); while($rowrp = mysqli_fetch_array($sqlrp)){ ?> <li><?php $slug = preg_replace('~[^\pL\d]+~u', '-', $rowrp['judul']);?> <a href="<?php echo $base_url;?>post/<?php echo $rowrp['id']?>/<?php echo strtolower($slug);?>"> <?php echo $rowrp['judul']?> </a></li> <?php } ?> </ul> </div> </div> <div class="col-xl-4 col-md-6 col-lg-4"> <div class="footer_widget"> <h3 class="footer_title"> Address </h3> <p> <?php echo $address;?> </p> </div> </div> </div> </div> </div> <div class="copy-right_text"> <div class="container"> <div class="footer_border"></div> <div class="row"> <div class="col-xl-12"> <p class="copy_right text-center"> <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a> <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> </p> </div> </div> </div> </div> </footer> <!-- footer end --> <!-- link that opens popup --> <!-- JS here --> <script src="<?php echo $base_url; ?>js/vendor/modernizr-3.5.0.min.js"></script> <script src="<?php echo $base_url; ?>js/vendor/jquery-1.12.4.min.js"></script> <script src="<?php echo $base_url; ?>js/popper.min.js"></script> <script src="<?php echo $base_url; ?>js/bootstrap.min.js"></script> <script src="<?php echo $base_url; ?>js/owl.carousel.min.js"></script> <script src="<?php echo $base_url; ?>js/isotope.pkgd.min.js"></script> <script src="<?php echo $base_url; ?>js/ajax-form.js"></script> <script src="<?php echo $base_url; ?>js/waypoints.min.js"></script> <script src="<?php echo $base_url; ?>js/jquery.counterup.min.js"></script> <script src="<?php echo $base_url; ?>js/imagesloaded.pkgd.min.js"></script> <script src="<?php echo $base_url; ?>js/scrollIt.js"></script> <script src="<?php echo $base_url; ?>js/jquery.scrollUp.min.js"></script> <script src="<?php echo $base_url; ?>js/wow.min.js"></script> <script src="<?php echo $base_url; ?>js/nice-select.min.js"></script> <script src="<?php echo $base_url; ?>js/jquery.slicknav.min.js"></script> <script src="<?php echo $base_url; ?>js/jquery.magnific-popup.min.js"></script> <script src="<?php echo $base_url; ?>js/plugins.js"></script> <script src="<?php echo $base_url; ?>js/gijgo.min.js"></script> <!--contact js--> <script src="<?php echo $base_url; ?>js/contact.js"></script> <script src="<?php echo $base_url; ?>js/jquery.ajaxchimp.min.js"></script> <script src="<?php echo $base_url; ?>js/jquery.form.js"></script> <script src="<?php echo $base_url; ?>js/jquery.validate.min.js"></script> <script src="<?php echo $base_url; ?>js/mail-script.js"></script> <script src="<?php echo $base_url; ?>js/main.js"></script> <script> $('#datepicker').datepicker({ iconsLibrary: 'fontawesome', icons: { rightIcon: '<span class="fa fa-caret-down"></span>' } }); $('#datepicker2').datepicker({ iconsLibrary: 'fontawesome', icons: { rightIcon: '<span class="fa fa-caret-down"></span>' } }); $(document).ready(function() { $('.js-example-basic-multiple').select2(); }); </script> </body> </html> - Buat file php dan beri nama index.php, simpan di dalam folder hospital. Dan copy script header dibawah
<?php include "header.php"; ?> <?php $sql = mysqli_query($koneksi, 'SELECT * FROM halaman where id="4"');?> <?php $row = mysqli_fetch_array($sql);?> <!-- bradcam_area_start --> <div class="bradcam_area breadcam_bg bradcam_overlay"> <div class="container"> <div class="row"> <div class="col-xl-12"> <div class="bradcam_text"> <h3>Home</h3> <p>Selamat Datang di Rumah Sakit Kami</p> </div> </div> </div> </div> </div> <!-- bradcam_area_end --> <!-- welcome_docmed_area_start --> <div class="welcome_docmed_area"> <div class="container"> <div class="row"> <div class="col-xl-6 col-lg-6"> <div class="welcome_thumb"> <div class="thumb_1"> <img src="img/about/1.png" alt=""> </div> <div class="thumb_2"> <img src="img/about/2.png" alt=""> </div> </div> </div> <div class="col-xl-6 col-lg-6"> <div class="welcome_docmed_info"> <?php echo $row['deskripsi']?> </div> </div> </div> </div> </div> <!-- welcome_docmed_area_end --> <?php include "footer.php";?> - Baris kode berikut adalah melakukan query ke table halaman dengan id 4
<?php $sql = mysqli_query($koneksi, 'SELECT * FROM halaman where id="4"');?> - Lihat id di halaman admin seperti pada gambar berikut , sesuaikan dengan id halaman anda.
- Hapus file index.html kemudian refresh browser anda.
Untuk pengaturan awal Hlaman frontend cukup sekian dulu. File untuk tutorial ini bisa anda download disini. Sampai bertemu lagi di posting selanjutnya, Keep Save & Healthy.
