LOADING . . .
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.
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.
Baca Juga: EF Adults Kursus Bahasa Inggris Profesional
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
<?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;
}
}
$base_url = base_url();
$site_title = 'Suba Hospital';
$site_desc = 'Just Another Rumah Sakit PHP Site';
$email = 'me@adityasubawa.com';
$phone = '08174741422';
$fb_link = 'https://www.facebook.com/deddy.aditya';
$ig_link = 'https://www.instagram.com/adityasubawa';
$address = 'Jalan Pucuk Indah No 9, Br. Kesambi
+6281 747 414 22
';
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
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
RewriteRule ^(.*)$ $1.php
RewriteRule ^post/(\d+)/([A-Za-z]+) ./post.php?id=$1&$url=$2
ErrorDocument 404 /hospital/404.php
#3 Halaman Home
<?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 -->
<!-- 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>
<?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";?>
<?php $sql = mysqli_query($koneksi, 'SELECT * FROM halaman where id="4"');?>
Untuk pengaturan awal Halaman frontend cukup sekian dulu. File untuk tutorial ini bisa anda download disini. Sampai bertemu lagi di posting selanjutnya, Keep Save & Healthy.
Baca juga: Bangkitnya Semangat UKM Indonesia
tutorialnya lajutin dong mas, aku lagi belajar native PHP
good article here man
Mari kita lanjutkan ke step berikutnya kak
Kalau PHP 8 bagaimana syntaxnya kak?
Thnk you for sharing this code
Thank kk