LOADING . . .

Membuat Website Professional dengan PHP MySql - PART #10: Manajemen Frontend / Pengaturan Awal



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

  • 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;
    }
}

$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

  • 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 
    
    
    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
    
     
  • 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]>
                

    You are using an outdated browser. Please upgrade your browser to improve your experience and security.

    <![endif]--> <!-- header-start -->
    <!-- header-end -->​
  • Buat file php dan beri nama footer.php, simpan di dalam folder hospital. Dan copy script header dibawah 
    <!-- footer start -->
        

    <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> Copyright ©[removed][removed](new Date().getFullYear());[removed] All rights reserved | This template is made with by Colorlib <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->

    <!-- footer end --> <!-- link that opens popup --> <!-- JS here --> [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] <!--contact js--> [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed] $('#datepicker').datepicker({ iconsLibrary: 'fontawesome', icons: { rightIcon: '' } }); $('#datepicker2').datepicker({ iconsLibrary: 'fontawesome', icons: { rightIcon: '' } }); $(document).ready(function() { $('.js-example-basic-multiple').select2(); }); [removed] </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  -->
        

    Home

    Selamat Datang di Rumah Sakit Kami

    <!-- bradcam_area_end --> <!-- welcome_docmed_area_start -->
    <?php echo $row['deskripsi']?>
    <!-- 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 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





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

  • Arik Nurdin January 28, 2021

    tutorialnya lajutin dong mas, aku lagi belajar native PHP