PHP

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

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

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

Table of contents



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.


Artikel Terkait