LOADING . . .

Membuat Website Professional dengan PHP MySql - PART #11 : Halaman Blog & Single Post

0 Comment



Pada posting kali ini saya akan membuat Halaman Blog (untuk menampilkan post loop) dan Single Post (detail dari artikel), bagi yang baru mengikuti seri Membuat Website Professional dengan PHP & MySql silahkan lihat beberapa artikel dibawah ini:

#1 Membuat Halaman Blog

  • Hidupkan XAMPP terlebih dahulu
  • Buat file php baru dan beri nama blog.php (tanpa .php) dan simpan di dalam folder hospital
  • Copy kode berikut dan simpan 
    <?php include "header.php"; ?>
    <!-- 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>Blog</h3>
                            <p><a href="<?php echo $base_url;?>">Home /</a> Blog</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- bradcam_area_end  -->
        
         <!--================Blog Area =================-->
        <section class="blog_area section-padding">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 mb-5 mb-lg-0">
                        <div class="blog_left_sidebar">
                        <?php 
    					 $halaman = 2;
    					 $page = isset($_GET["halaman"]) ? (int)$_GET["halaman"] : 1;
    					 $mulai = ($page>1) ? ($page * $halaman) - $halaman : 0;
    					 $result = mysqli_query($koneksi,"SELECT * FROM post WHERE status='1'");
    					 $total = mysqli_num_rows($result);
    					 $pages = ceil($total/$halaman);            
    					 $query = mysqli_query($koneksi,"select * from post LIMIT $mulai, $halaman");
    					 $no =$mulai+1;
     
     					 while ($row = mysqli_fetch_assoc($query)) { ?>
                            <article class="blog_item">
                                <div class="blog_item_img">
                                    <img class="card-img rounded-0" src="<?php echo $base_url; ?>admin/<?php echo $row['gambar_utama']?>" alt="">
                                    <a href="#" class="blog_item_date">
                                    	<?php $tanggal = $row['publish_date'];?>
                                        <?php $pecah = explode("/", $tanggal); ?>
                                        <h3><?php echo $pecah[0] ?></h3>
                                        <p><?php echo $pecah[1] ?></p>
                                    </a>
                                </div>
    							<?php $slug = preg_replace('~[^\pL\d]+~u', '-', $row['judul']);?> 
                                <div class="blog_details">
                                    <a class="d-inline-block" href="<?php echo $base_url;?>post/<?php echo $row['id']?>/<?php echo strtolower($slug);?>">
                                        <h2><?php echo $row['judul']?></h2>
                                    </a>
                                   <?php echo substr($row['content'], 0, 200) .((strlen($row['content']) > 200) ? '...' : '');?>
                                   <?php $sqlkat = mysqli_query($koneksi, "SELECT * FROM kategori WHERE id='".$row['id_kategori']."'");?>
                                   <ul class="blog-info-link">
                                    <?php $rowkat = mysqli_fetch_array($sqlkat);?>
                                        <li><a href="<?php echo $base_url; ?>kategori/<?php echo $rowkat['id']?>"><i class="fa fa-user"></i> <?php echo $rowkat['judul']?></a></li>   
                                    </ul>
                                </div>
                            </article>
    
                          <?php } ?>
    
                            <nav class="blog-pagination justify-content-center d-flex">
                            <ul class="pagination">
                            <?php for ($i=1; $i<=$pages ; $i++){ ?>
      							<li class="page-item"><a href="?halaman=<?php echo $i; ?>" class="page-link"><?php echo $i; ?></a></li>
     
     						<?php } ?>
      						</ul>
                            </nav>
                        </div>
                    </div>
                    <?php include ('blog-sidebar.php');?>
            </div>
        </section>
        <!--================Blog Area =================-->
        <?php include "footer.php";?>​
  • Lihat baris kode diatas, disana terlihat saya membuat post loop dengan pagination. Dimulai dengan menentukan jumlah post per halaman. 
    $halaman = 2;
  • Dan diakhiri dengan memanggil numbering paginationnya 
    <ul class="pagination">
                            <?php for ($i=1; $i<=$pages ; $i++){ ?>
      							<li class="page-item"><a href="?halaman=<?php echo $i; ?>" class="page-link"><?php echo $i; ?></a></li>
     
     						<?php } ?>
      						</ul>
     
  • Saya juga menggunakan preg_replace untuk menghilangkan "spasi" menjadi "-" pada Judul Post
    <?php $slug = preg_replace('~[^\pL\d]+~u', '-', $row['judul']);?> 
  • Yang akhirnya saya menggunakan sebuah fungsi php kembali yakni strtolower untuk membuat character menjadi huruf kecil. Dan membuatnya menjadi sebuah link SEO friendly mengarah pada halaman single post. 
    <a class="d-inline-block" href="<?php echo $base_url;?>post/<?php echo $row['id']?>/<?php echo strtolower($slug);?>">
                                        <h2><?php echo $row['judul']?></h2>
                                    </a>
  • Kode lengkap blog.php diatas juga terdapat fungsi include untuk memanggil file blog-sidebar.php, jadi selanjutnya adalah membuat blog sidebar.

#2 Membuat Sidebar

  • Buat file php baru dan beri nama blog-sidebar.php (tanpa .php) dan simpan di dalam folder hospital
  • Copy kode berikut dan simpan 
    <div class="col-lg-4">
                        <div class="blog_right_sidebar">
                            <aside class="single_sidebar_widget search_widget">
                                <form action="<?php echo $base_url; ?>search" method="get">
                                    <div class="form-group">
                                        <div class="input-group mb-3">
                                            <input type="text" name="cari" class="form-control" placeholder='Search Keyword'
                                                onfocus="this.placeholder = ''"
                                                onblur="this.placeholder = 'Search Keyword'">
                                            <div class="input-group-append">
                                                <button class="btn" type="button"><i class="ti-search"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                    <button class="button rounded-0 primary-bg text-white w-100 btn_1 boxed-btn"
                                        type="submit">Search</button>
                                </form>
                            </aside>
    
                            <aside class="single_sidebar_widget post_category_widget">
                                <h4 class="widget_title">Category</h4>
                                <ul class="list cat-list">
                                <?php $sqlkc = mysqli_query($koneksi, "select * from kategori WHERE status='1' ORDER BY id DESC");
    						   while($rowkc = mysqli_fetch_array($sqlkc)){
    						   ?>
                                    <li>
                                        <a href="<?php echo $base_url;?>kategori/<?php echo $rowkc['id']?>" class="d-flex">
                                            <p><?php echo $rowkc['judul']?></p>
                                            <?php $sqlkcount = mysqli_query($koneksi, "select COUNT(judul) as count from post WHERE id_kategori='".$rowkc['id']."' ORDER BY id DESC");
    						   while($rowkcount = mysqli_fetch_array($sqlkcount)){ ?>
                                            <p>(<?php echo $rowkcount['count'];?>)</p>
    										<?php } ?>
                                        </a>
                                    </li>
                                    <?php } ?>
                                </ul>
                            </aside>
    
                            <aside class="single_sidebar_widget popular_post_widget">
                                <h3 class="widget_title">Recent Post</h3>
                                
                               <?php $sqlrp = mysqli_query($koneksi, "select * from post WHERE status='1' ORDER BY id DESC LIMIT 5");
    						   while($rowrp = mysqli_fetch_array($sqlrp)){
    						   ?>
                                <div class="media post_item">
                                    <img style="max-width:100px;" src="<?php echo $base_url;?>admin/<?php echo $rowrp['gambar_utama']?>" alt="post">
                                    <div class="media-body">
                                    <?php $slug = preg_replace('~[^\pL\d]+~u', '-', $rowrp['judul']);?> 
                                        <a href="<?php echo $base_url;?>post/<?php echo $rowrp['id']?>/<?php echo strtolower($slug);?>">
                                            <h3><?php echo $rowrp['judul']?></h3>
                                        </a>
                                        <p><?php echo $rowrp['publish_date']?></p>
                                    </div>
                                </div>
                                <?php } ?>
                            </aside> 
            </div>
    	</div>
    </div>​
     
  • Lihat kode diatas, disana saya membagi sidebar menjadi 3 bagian yang masing2 dipisahkan oleh kode <aside>. Yang pertama adalah block untuk search. 
    <aside class="single_sidebar_widget search_widget">
                                <form action="<?php echo $base_url; ?>search" method="get">
                                    <div class="form-group">
                                        <div class="input-group mb-3">
                                            <input type="text" name="cari" class="form-control" placeholder='Search Keyword'
                                                onfocus="this.placeholder = ''"
                                                onblur="this.placeholder = 'Search Keyword'">
                                            <div class="input-group-append">
                                                <button class="btn" type="button"><i class="ti-search"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                    <button class="button rounded-0 primary-bg text-white w-100 btn_1 boxed-btn"
                                        type="submit">Search</button>
                                </form>
                            </aside>
  • Mengarah ke halaman search menggunakan metode GET. Akan saya posting di Part berikutnya 
    <form action="<?php echo $base_url; ?>search" method="get">
  • Yang kedua adalah List Category dengan Count Artikel, Artinya berapa jumlah post pada masing2 kategori. Untuk URL nya akan diarahkan ke http://localhost/hospital/kategori/1 yang sudah diatur penggunaannya pada file .htaccess (tutorialnya lihat disini)
    <aside class="single_sidebar_widget post_category_widget">
                                <h4 class="widget_title">Category</h4>
                                <ul class="list cat-list">
                                <?php $sqlkc = mysqli_query($koneksi, "select * from kategori WHERE status='1' ORDER BY id DESC");
    						   while($rowkc = mysqli_fetch_array($sqlkc)){
    						   ?>
                                    <li>
                                        <a href="<?php echo $base_url;?>kategori/<?php echo $rowkc['id']?>" class="d-flex">
                                            <p><?php echo $rowkc['judul']?></p>
                                            <?php $sqlkcount = mysqli_query($koneksi, "select COUNT(judul) as count from post WHERE id_kategori='".$rowkc['id']."' ORDER BY id DESC");
    						   while($rowkcount = mysqli_fetch_array($sqlkcount)){ ?>
                                            <p>(<?php echo $rowkcount['count'];?>)</p>
    										<?php } ?>
                                        </a>
                                    </li>
                                    <?php } ?>
                                </ul>
                            </aside>
  • Yang Ketiga Recent Post, logikanya sama dengan pembuatan blog.php tetapi tanpa pagination. 
    <aside class="single_sidebar_widget popular_post_widget">
                                <h3 class="widget_title">Recent Post</h3>
                                
                               <?php $sqlrp = mysqli_query($koneksi, "select * from post WHERE status='1' ORDER BY id DESC LIMIT 5");
    						   while($rowrp = mysqli_fetch_array($sqlrp)){
    						   ?>
                                <div class="media post_item">
                                    <img style="max-width:100px;" src="<?php echo $base_url;?>admin/<?php echo $rowrp['gambar_utama']?>" alt="post">
                                    <div class="media-body">
                                    <?php $slug = preg_replace('~[^\pL\d]+~u', '-', $rowrp['judul']);?> 
                                        <a href="<?php echo $base_url;?>post/<?php echo $rowrp['id']?>/<?php echo strtolower($slug);?>">
                                            <h3><?php echo $rowrp['judul']?></h3>
                                        </a>
                                        <p><?php echo $rowrp['publish_date']?></p>
                                    </div>
                                </div>
                                <?php } ?>
                            </aside> ​
  • Hanya menampilkan 5 post/artikel terbaru. 
    ORDER BY id DESC LIMIT 5

#3 Membuat Halaman Single Post (Artikel)

  • Buat file php baru dan beri nama post.php (tanpa .php) dan simpan di dalam folder hospital
  • Note: penggunaan file post.php juga saya atur di .htaccess. Jika ingin mengubah namanya pastikan baris kode di .htacess juga diubah. 
    RewriteRule ^post/(\d+)/([A-Za-z]+) ./post.php?id=$1&$url=$2​
  • Copy kode berikut dan simpan 
    <?php include "header.php"; ?>
    <!-- bradcam_area_start  -->
    <?php $id=$_GET['id'];?>
    <?php $sql = mysqli_query($koneksi, "select * from post where id='$id'");?>
    <?php while ($row=mysqli_fetch_array($sql)){ ?>
        <div class="bradcam_area breadcam_bg bradcam_overlay">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="bradcam_text">
                            <h3><?php echo $row['judul']?></h3>
                            <p><a href="blog.php">Blog /</a> <?php echo $row['judul']?></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- bradcam_area_end  -->
        
        <!-- welcome_docmed_area_start -->
        <div class="welcome_docmed_area">
            <div class="container">
                <div class="row">
                    <?php echo $row['content']?>
                </div>
            </div>
        </div>
        <!-- welcome_docmed_area_end -->
        <?php } ?>
    	
        <?php include "footer.php"; ?>​
  • Lihat kode diatas, post.php akan mendapatkan id post dari url yang dikirim oleh blog.php atau blog-sidebar.php 
    <?php $id=$_GET['id'];?>
    <?php $sql = mysqli_query($koneksi, "select * from post where id='$id'");?>​
  • Lihat pada browser dengan mengetikan http://localhost/hospital/blog, jika sudah sperti gambar dibawah berarti anda sudah benar :D 

Sekian dulu posting Membuat Website Professional dengan PHP MySql - PART #11 : Halaman Blog & Single Post,silahkan download file untuk tutorial "download disini". Sampai bertemu lagi di posting selanjutnya, Stay  Save & Healthy.




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