More

    Building A Blog Application in CodeIgniter | Part-5

    Before going through, read the previous post. In this blog, I’ll guide you through building a blog application in CodeIgniter. I’ll use Bootstrap for web page design. However, I won’t explain about bootstrap code in this post.

    You can find the project file to download at the bottom of this tutorial post.

    Cleaning up CodeIgniter Directory

    CodeIgniter framework has multiple directories. It has a folder for application, system and user_guide along with few files. Delete the user_guide folder as it contains a guide manual, which can increase your project file size, and you don’t want to show the user guide when the web application is live.

    In the base directory, delete all files except the application folder, system folder and “index.php” file.

    Base Directory
    CodeIgniter Base Directory

    Basic Setting

    Following the part-4 post, you need to set up your CodeIgniter application. Go to the “application/config/autoload.php” file. Add the following lines of code in your application.

    $autoload['helper'] = array('url');

    Go to the “application/config/config.php” file. Add the following lines of code in your application.

    $config['base_url']  =  "http://".$_SERVER['HTTP_HOST'];
    $config['base_url'] .= preg_replace('@/+$@', '', dirname($_SERVER['SCRIPT_NAME'])).'/';
    

    I’ll set up configuration regarding database in my next post.

    Now open your favourite web browser and go to your local development server through the following link.

    http://localhost:81/dokocrunch/

    welcome to codeigniter
    Showing Welcome to CodeIgniter when configured correctly

    “Don’t forget to start your local development environment through the XAMPP control panel. Start Apache and MySQL module.”

    Managing webpage and asset

    On the base directory, create a directory with the name “assets” for assets files.

    Under the “assets” folder, create the “css” folder for your CSS files.

    Under the “assets” folder, create the “images” folder for your images files.

     Go to “application/views” and create a folder named “pages” for your webpage files.

    Creating Your First Webpage

    Go to “application/views/pages” and create a “blog_home.php” file.

    Please copy the following lines of code and paste it into your file.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Blog Home - DokoCrunch</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="http://netdna.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="<?= base_url('assets/css/blog_home.css');?>">
    </head>
    <body>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
    <section class="blog-listing gray-bg">
            <div class="container">
                <div class="row align-items-start">
                    <div class="col-lg-8 m-15px-tb">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="blog-grid">
                                    <div class="blog-img">
                                        <div class="date">
                                            <span>04</span>
                                            <label>FEB</label>
                                        </div>
                                        <a href="#">
                                            <img src="https://via.placeholder.com/400x200/FFB6C1/000000" title="" alt="">
                                        </a>
                                    </div>
                                    <div class="blog-info">
                                        <h5><a href="#">Prevent 75% of visitors from google analytics</a></h5>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                        <div class="btn-bar">
                                            <a href="#" class="px-btn-arrow">
                                                <span>Read More</span>
                                                <i class="arrow"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="blog-grid">
                                    <div class="blog-img">
                                        <div class="date">
                                            <span>04</span>
                                            <label>FEB</label>
                                        </div>
                                        <a href="#">
                                            <img src="https://via.placeholder.com/400x200/D3D3D3/000000" title="" alt="">
                                        </a>
                                    </div>
                                    <div class="blog-info">
                                        <h5><a href="#">Prevent 75% of visitors from google analytics</a></h5>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                        <div class="btn-bar">
                                            <a href="#" class="px-btn-arrow">
                                                <span>Read More</span>
                                                <i class="arrow"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="blog-grid">
                                    <div class="blog-img">
                                        <div class="date">
                                            <span>04</span>
                                            <label>FEB</label>
                                        </div>
                                        <a href="#">
                                            <img src="https://via.placeholder.com/400x200/87CEFA/000000" title="" alt="">
                                        </a>
                                    </div>
                                    <div class="blog-info">
                                        <h5><a href="#">Prevent 75% of visitors from google analytics</a></h5>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                        <div class="btn-bar">
                                            <a href="#" class="px-btn-arrow">
                                                <span>Read More</span>
                                                <i class="arrow"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="blog-grid">
                                    <div class="blog-img">
                                        <div class="date">
                                            <span>04</span>
                                            <label>FEB</label>
                                        </div>
                                        <a href="#">
                                            <img src="https://via.placeholder.com/400x200/D3D3D3/000000" title="" alt="">
                                        </a>
                                    </div>
                                    <div class="blog-info">
                                        <h5><a href="#">Prevent 75% of visitors from google analytics</a></h5>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                        <div class="btn-bar">
                                            <a href="#" class="px-btn-arrow">
                                                <span>Read More</span>
                                                <i class="arrow"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="blog-grid">
                                    <div class="blog-img">
                                        <div class="date">
                                            <span>04</span>
                                            <label>FEB</label>
                                        </div>
                                        <a href="#">
                                            <img src="https://via.placeholder.com/400x200/E0FFFF/000000" title="" alt="">
                                        </a>
                                    </div>
                                    <div class="blog-info">
                                        <h5><a href="#">Prevent 75% of visitors from google analytics</a></h5>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                        <div class="btn-bar">
                                            <a href="#" class="px-btn-arrow">
                                                <span>Read More</span>
                                                <i class="arrow"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="blog-grid">
                                    <div class="blog-img">
                                        <div class="date">
                                            <span>04</span>
                                            <label>FEB</label>
                                        </div>
                                        <a href="#">
                                            <img src="https://via.placeholder.com/400x200/FFF0F5/000000" title="" alt="">
                                        </a>
                                    </div>
                                    <div class="blog-info">
                                        <h5><a href="#">Prevent 75% of visitors from google analytics</a></h5>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                        <div class="btn-bar">
                                            <a href="#" class="px-btn-arrow">
                                                <span>Read More</span>
                                                <i class="arrow"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <ul class="pagination justify-content-center">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#" tabindex="-1"><i class="fas fa-chevron-left"></i></a>
                                    </li>
                                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                                    <li class="page-item active">
                                        <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
                                    </li>
                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                    <li class="page-item">
                                        <a class="page-link" href="#"><i class="fas fa-chevron-right"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
    
                    <div class="col-lg-4 m-15px-tb blog-aside">
                        <!-- Author -->
                        <div class="widget widget-author">
                            <div class="widget-title">
                                <h3>Author</h3>
                            </div>
                            <div class="widget-body">
                                <div class="media align-items-center">
                                    <div class="avatar">
                                        <img src="https://bootdey.com/img/Content/avatar/avatar6.png" title="" alt="">
                                    </div>
                                    <div class="media-body">
                                        <h6>Hello, I'm<br> Sangam Jung Gauli</h6>
                                    </div>
                                </div>
                                <p>I write blog post on AI, Tutorial seires, Robotics, Technology, Reviews, etc.  </p>
                            </div>
                        </div>
                        <!-- End Author -->
    
                        <!-- Trending Post -->
                        <div class="widget widget-post">
                            <div class="widget-title">
                                <h3>Trending Now</h3>
                            </div>
                            <div class="widget-body">
    
                            </div>
                        </div>
                        <!-- End Trending Post -->
    
                        <!-- Latest Post -->
                        <div class="widget widget-latest-post">
                            <div class="widget-title">
                                <h3>Latest Post</h3>
                            </div>
                            <div class="widget-body">
                                <div class="latest-post-aside media">
                                    <div class="lpa-left media-body">
                                        <div class="lpa-title">
                                            <h5><a href="#">Prevent 75% of visitors from google analytics</a></h5>
                                        </div>
                                        <div class="lpa-meta">
                                            <a class="name" href="#">
                                                Rachel Roth
                                            </a>
                                            <a class="date" href="#">
                                                26 FEB 2020
                                            </a>
                                        </div>
                                    </div>
                                    <div class="lpa-right">
                                        <a href="#">
                                            <img src="https://via.placeholder.com/400x200/E6E6FA/000000" title="" alt="">
                                        </a>
                                    </div>
                                </div>
    
                                <div class="latest-post-aside media">
                                    <div class="lpa-left media-body">
                                        <div class="lpa-title">
                                            <h5><a href="#">Prevent 75% of visitors from google analytics</a></h5>
                                        </div>
                                        <div class="lpa-meta">
                                            <a class="name" href="#">
                                                Rachel Roth
                                            </a>
                                            <a class="date" href="#">
                                                26 FEB 2020
                                            </a>
                                        </div>
                                    </div>
                                    <div class="lpa-right">
                                        <a href="#">
                                            <img src="https://via.placeholder.com/400x200/FFA07A/000000" title="" alt="">
                                        </a>
                                    </div>
                                </div>
    
                                <div class="latest-post-aside media">
                                    <div class="lpa-left media-body">
                                        <div class="lpa-title">
                                            <h5><a href="#">Prevent 75% of visitors from google analytics</a></h5>
                                        </div>
                                        <div class="lpa-meta">
                                            <a class="name" href="#">
                                                Rachel Roth
                                            </a>
                                            <a class="date" href="#">
                                                26 FEB 2020
                                            </a>
                                        </div>
                                    </div>
                                    <div class="lpa-right">
                                        <a href="#">
                                            <img src="https://via.placeholder.com/400x200/FFF0F5/000000" title="" alt="">
                                        </a>
                                    </div>
                                </div>
    
                            </div>
                        </div>
                        <!-- End Latest Post -->
    
                        <!-- widget Tags -->
                        <div class="widget widget-tags">
                            <div class="widget-title">
                                <h3>Latest Tags</h3>
                            </div>
                            <div class="widget-body">
                                <div class="nav tag-cloud">
                                    <a href="#">Design</a>
                                    <a href="#">Development</a>
                                    <a href="#">Travel</a>
                                    <a href="#">Web Design</a>
                                    <a href="#">Marketing</a>
                                    <a href="#">Research</a>
                                    <a href="#">Managment</a>
                                </div>
                            </div>
                        </div>
                        <!-- End widget Tags -->
                    </div>
                </div>
            </div>
        </section>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    	
    </script>
    </body>
    </html>

    Go to “assets/css” and create a “blog_home.css” file.

    Please copy the following lines of code and paste it into your file.

    body{margin-top:20px;}
    
    .blog-listing {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .gray-bg {
        background-color: #f5f5f5;
    }
    /* Blog 
    ---------------------*/
    .blog-grid {
      box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
      border-radius: 5px;
      overflow: hidden;
      background: #ffffff;
      margin-top: 15px;
      margin-bottom: 15px;
    }
    .blog-grid .blog-img {
      position: relative;
    }
    .blog-grid .blog-img .date {
      position: absolute;
      background: #fc5356;
      color: #ffffff;
      padding: 8px 15px;
      left: 10px;
      top: 10px;
      border-radius: 4px;
    }
    .blog-grid .blog-img .date span {
      font-size: 22px;
      display: block;
      line-height: 22px;
      font-weight: 700;
    }
    .blog-grid .blog-img .date label {
      font-size: 14px;
      margin: 0;
    }
    .blog-grid .blog-info {
      padding: 20px;
    }
    .blog-grid .blog-info h5 {
      font-size: 22px;
      font-weight: 700;
      margin: 0 0 10px;
    }
    .blog-grid .blog-info h5 a {
      color: #20247b;
    }
    .blog-grid .blog-info p {
      margin: 0;
    }
    .blog-grid .blog-info .btn-bar {
      margin-top: 20px;
    }
    
    
    /* Blog Sidebar
    -------------------*/
    .blog-aside .widget {
      box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
      border-radius: 5px;
      overflow: hidden;
      background: #ffffff;
      margin-top: 15px;
      margin-bottom: 15px;
      width: 100%;
      display: inline-block;
      vertical-align: top;
    }
    .blog-aside .widget-body {
      padding: 15px;
    }
    .blog-aside .widget-title {
      padding: 15px;
      border-bottom: 1px solid #eee;
    }
    .blog-aside .widget-title h3 {
      font-size: 20px;
      font-weight: 700;
      color: #fc5356;
      margin: 0;
    }
    .blog-aside .widget-author .media {
      margin-bottom: 15px;
    }
    .blog-aside .widget-author p {
      font-size: 16px;
      margin: 0;
    }
    .blog-aside .widget-author .avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      overflow: hidden;
    }
    .blog-aside .widget-author h6 {
      font-weight: 600;
      color: #20247b;
      font-size: 22px;
      margin: 0;
      padding-left: 20px;
    }
    .blog-aside .post-aside {
      margin-bottom: 15px;
    }
    .blog-aside .post-aside .post-aside-title h5 {
      margin: 0;
    }
    .blog-aside .post-aside .post-aside-title a {
      font-size: 18px;
      color: #20247b;
      font-weight: 600;
    }
    .blog-aside .post-aside .post-aside-meta {
      padding-bottom: 10px;
    }
    .blog-aside .post-aside .post-aside-meta a {
      color: #6F8BA4;
      font-size: 12px;
      text-transform: uppercase;
      display: inline-block;
      margin-right: 10px;
    }
    .blog-aside .latest-post-aside + .latest-post-aside {
      border-top: 1px solid #eee;
      padding-top: 15px;
      margin-top: 15px;
    }
    .blog-aside .latest-post-aside .lpa-right {
      width: 90px;
    }
    .blog-aside .latest-post-aside .lpa-right img {
      border-radius: 3px;
    }
    .blog-aside .latest-post-aside .lpa-left {
      padding-right: 15px;
    }
    .blog-aside .latest-post-aside .lpa-title h5 {
      margin: 0;
      font-size: 15px;
    }
    .blog-aside .latest-post-aside .lpa-title a {
      color: #20247b;
      font-weight: 600;
    }
    .blog-aside .latest-post-aside .lpa-meta a {
      color: #6F8BA4;
      font-size: 12px;
      text-transform: uppercase;
      display: inline-block;
      margin-right: 10px;
    }
    
    .tag-cloud a {
      padding: 4px 15px;
      font-size: 13px;
      color: #ffffff;
      background: #20247b;
      border-radius: 3px;
      margin-right: 4px;
      margin-bottom: 4px;
    }
    .tag-cloud a:hover {
      background: #fc5356;
    }
    
    .blog-single {
      padding-top: 30px;
      padding-bottom: 30px;
    }
    
    .article {
      box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
      border-radius: 5px;
      overflow: hidden;
      background: #ffffff;
      padding: 15px;
      margin: 15px 0 30px;
    }
    .article .article-title {
      padding: 15px 0 20px;
    }
    .article .article-title h6 {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 20px;
    }
    .article .article-title h6 a {
      text-transform: uppercase;
      color: #fc5356;
      border-bottom: 1px solid #fc5356;
    }
    .article .article-title h2 {
      color: #20247b;
      font-weight: 600;
    }
    .article .article-title .media {
      padding-top: 15px;
      border-bottom: 1px dashed #ddd;
      padding-bottom: 20px;
    }
    .article .article-title .media .avatar {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      overflow: hidden;
    }
    .article .article-title .media .media-body {
      padding-left: 8px;
    }
    .article .article-title .media .media-body label {
      font-weight: 600;
      color: #fc5356;
      margin: 0;
    }
    .article .article-title .media .media-body span {
      display: block;
      font-size: 12px;
    }
    .article .article-content h1,
    .article .article-content h2,
    .article .article-content h3,
    .article .article-content h4,
    .article .article-content h5,
    .article .article-content h6 {
      color: #20247b;
      font-weight: 600;
      margin-bottom: 15px;
    }
    .article .article-content blockquote {
      max-width: 600px;
      padding: 15px 0 30px 0;
      margin: 0;
    }
    .article .article-content blockquote p {
      font-size: 20px;
      font-weight: 500;
      color: #fc5356;
      margin: 0;
    }
    .article .article-content blockquote .blockquote-footer {
      color: #20247b;
      font-size: 16px;
    }
    .article .article-content blockquote .blockquote-footer cite {
      font-weight: 600;
    }
    .article .tag-cloud {
      padding-top: 10px;
    }
    
    .article-comment {
      box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
      border-radius: 5px;
      overflow: hidden;
      background: #ffffff;
      padding: 20px;
    }
    .article-comment h4 {
      color: #20247b;
      font-weight: 700;
      margin-bottom: 25px;
      font-size: 22px;
    }
    img {
        max-width: 100%;
    }
    img {
        vertical-align: middle;
        border-style: none;
    }

    I took the above working template code from bootdey.

    Your First Controller

    You need to set up your first controller class file. Go to the “application/controllers” directory and create a controller file named “Blog.php” and copy-paste the following code lines.

    <?php
    class Blog extends CI_Controller{
    
    	public function index()
    	{
    		echo 'Welcome to DokoCrunch Blog!';
    	}
    }

    Go to the “application/config/routes.php” file and make the following changes.

    Change the default_controller “welcome” to “blog” in the first line of code.

    welcome text
    PHP echo welcome text

    This code prints the welcome message on the webpage. If you want to change the welcome print  view to the webpage you created on “application/views/pages”, you can render your webpage with $this->load->view();”

    Above load->view() function takes two parameter i.e. view(webpage_name, data).

    First, I’ll guide you about the first parameter, i.e. webpage_name. Put your webpage name you want to render in the browser.

    <?php
    
    class Blog extends CI_Controller{
    
    	public function index()
    	{
    		$this->load->view('pages/blog_home');
    	}
    }

    You don’t have to write file extension “.php” on pages/blog_homes as CodeIgniter is a PHP framework and it use .php extension as default file extension.

    Now visit your local development server.

    You will get the following view.

    blog home view
    Blog Home View

    Adding Blog Detail

    The above code displays the blog template only. Let’s add a blog detail page now.

    Go to “application/views/pages” and create a “blog_detail.php” file.

    Please copy the following lines of code and paste it into your file.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <!--  This file has been downloaded from bootdey.com    @bootdey on twitter -->
        <!--  All snippets are MIT license http://bootdey.com/license -->
        <title>blog detail page - Bootdey.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="http://netdna.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="<?= base_url('assets/css/blog_detail.css');?>">
    </head>
    <body>
    <div class="blog-single gray-bg">
            <div class="container">
                <div class="row align-items-start">
                    <div class="col-lg-8 m-15px-tb">
                        <article class="article">
                            <div class="article-img">
                                <img src="https://via.placeholder.com/800x350/87CEFA/000000" title="" alt="">
                            </div>
                            <div class="article-title">
                                <h6><a href="#">Lifestyle</a></h6>
                                <h2>They Now Bade Farewell To The Kind But Unseen People</h2>
                                <div class="media">
                                    <div class="avatar">
                                        <img src="https://bootdey.com/img/Content/avatar/avatar1.png" title="" alt="">
                                    </div>
                                    <div class="media-body">
                                        <label>Rachel Roth</label>
                                        <span>26 FEB 2020</span>
                                    </div>
                                </div>
                            </div>
                            <div class="article-content">
                                <p>Aenean eleifend ante maecenas pulvinar montes lorem et pede dis dolor pretium donec dictum. Vici consequat justo enim. Venenatis eget adipiscing luctus lorem. Adipiscing veni amet luctus enim sem libero tellus viverra venenatis aliquam. Commodo natoque quam pulvinar elit.</p>
                                <p>Eget aenean tellus venenatis. Donec odio tempus. Felis arcu pretium metus nullam quam aenean sociis quis sem neque vici libero. Venenatis nullam fringilla pretium magnis aliquam nunc vulputate integer augue ultricies cras. Eget viverra feugiat cras ut. Sit natoque montes tempus ligula eget vitae pede rhoncus maecenas consectetuer commodo condimentum aenean.</p>
                                <h4>What are my payment options?</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                <blockquote>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                                    <p class="blockquote-footer">Someone famous in <cite title="Source Title">Dick Grayson</cite></p>
                                </blockquote>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            </div>
                            <div class="nav tag-cloud">
                                <a href="#">Design</a>
                                <a href="#">Development</a>
                                <a href="#">Travel</a>
                                <a href="#">Web Design</a>
                                <a href="#">Marketing</a>
                                <a href="#">Research</a>
                                <a href="#">Managment</a>
                            </div>
                        </article>
                        <div class="contact-form article-comment">
                            <h4>Leave a Reply</h4>
                            <form id="contact-form" method="POST">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input name="Name" id="name" placeholder="Name *" class="form-control" type="text">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input name="Email" id="email" placeholder="Email *" class="form-control" type="email">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <textarea name="message" id="message" placeholder="Your message *" rows="4" class="form-control"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="send">
                                            <button class="px-btn theme"><span>Submit</span> <i class="arrow"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-lg-4 m-15px-tb blog-aside">
                        <!-- Author -->
                       <div class="widget widget-author">
                            <div class="widget-title">
                                <h3>Author</h3>
                            </div>
                            <div class="widget-body">
                                <div class="media align-items-center">
                                    <div class="avatar">
                                        <img src="https://bootdey.com/img/Content/avatar/avatar6.png" title="" alt="">
                                    </div>
                                    <div class="media-body">
                                        <h6>Hello, I'm<br> Sangam Jung Gauli</h6>
                                    </div>
                                </div>
                                <p>I write blog post on AI, Tutorial seires, Robotics, Technology, Reviews, etc.  </p>
                            </div>
                        </div>
                        <!-- End Author -->
                        <!-- Trending Post -->
                        <div class="widget widget-post">
                            <div class="widget-title">
                                <h3>Trending Now</h3>
                            </div>
                            <div class="widget-body">
    
                            </div>
                        </div>
                        <!-- End Trending Post -->
                        <!-- Latest Post -->
                        <div class="widget widget-latest-post">
                            <div class="widget-title">
                                <h3>Latest Post</h3>
                            </div>
                            <div class="widget-body">
                                <div class="latest-post-aside media">
                                    <div class="lpa-left media-body">
                                        <div class="lpa-title">
                                            <h5><a href="#">Prevent 75% of visitors from google analytics</a></h5>
                                        </div>
                                        <div class="lpa-meta">
                                            <a class="name" href="#">
                                                Rachel Roth
                                            </a>
                                            <a class="date" href="#">
                                                26 FEB 2020
                                            </a>
                                        </div>
                                    </div>
                                    <div class="lpa-right">
                                        <a href="#">
                                            <img src="https://via.placeholder.com/400x200/FFB6C1/000000" title="" alt="">
                                        </a>
                                    </div>
                                </div>
                                <div class="latest-post-aside media">
                                    <div class="lpa-left media-body">
                                        <div class="lpa-title">
                                            <h5><a href="#">Prevent 75% of visitors from google analytics</a></h5>
                                        </div>
                                        <div class="lpa-meta">
                                            <a class="name" href="#">
                                                Rachel Roth
                                            </a>
                                            <a class="date" href="#">
                                                26 FEB 2020
                                            </a>
                                        </div>
                                    </div>
                                    <div class="lpa-right">
                                        <a href="#">
                                            <img src="https://via.placeholder.com/400x200/FFB6C1/000000" title="" alt="">
                                        </a>
                                    </div>
                                </div>
                                <div class="latest-post-aside media">
                                    <div class="lpa-left media-body">
                                        <div class="lpa-title">
                                            <h5><a href="#">Prevent 75% of visitors from google analytics</a></h5>
                                        </div>
                                        <div class="lpa-meta">
                                            <a class="name" href="#">
                                                Rachel Roth
                                            </a>
                                            <a class="date" href="#">
                                                26 FEB 2020
                                            </a>
                                        </div>
                                    </div>
                                    <div class="lpa-right">
                                        <a href="#">
                                            <img src="https://via.placeholder.com/400x200/FFB6C1/000000" title="" alt="">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Latest Post -->
                        <!-- widget Tags -->
                        <div class="widget widget-tags">
                            <div class="widget-title">
                                <h3>Latest Tags</h3>
                            </div>
                            <div class="widget-body">
                                <div class="nav tag-cloud">
                                    <a href="#">Design</a>
                                    <a href="#">Development</a>
                                    <a href="#">Travel</a>
                                    <a href="#">Web Design</a>
                                    <a href="#">Marketing</a>
                                    <a href="#">Research</a>
                                    <a href="#">Managment</a>
                                </div>
                            </div>
                        </div>
                        <!-- End widget Tags -->
                    </div>
                </div>
            </div>
        </div>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    	
    </script>
    </body>
    </html>

    Go to “assets/css” and create a “blog_detail.css” file.

    Please copy the following lines of code and paste it into your file.

    body{margin-top:20px;}
    .blog-listing {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .gray-bg {
        background-color: #f5f5f5;
    }
    /* Blog 
    ---------------------*/
    .blog-grid {
      box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
      border-radius: 5px;
      overflow: hidden;
      background: #ffffff;
      margin-top: 15px;
      margin-bottom: 15px;
    }
    .blog-grid .blog-img {
      position: relative;
    }
    .blog-grid .blog-img .date {
      position: absolute;
      background: #fc5356;
      color: #ffffff;
      padding: 8px 15px;
      left: 10px;
      top: 10px;
      border-radius: 4px;
    }
    .blog-grid .blog-img .date span {
      font-size: 22px;
      display: block;
      line-height: 22px;
      font-weight: 700;
    }
    .blog-grid .blog-img .date label {
      font-size: 14px;
      margin: 0;
    }
    .blog-grid .blog-info {
      padding: 20px;
    }
    .blog-grid .blog-info h5 {
      font-size: 22px;
      font-weight: 700;
      margin: 0 0 10px;
    }
    .blog-grid .blog-info h5 a {
      color: #20247b;
    }
    .blog-grid .blog-info p {
      margin: 0;
    }
    .blog-grid .blog-info .btn-bar {
      margin-top: 20px;
    }
    
    
    /* Blog Sidebar
    -------------------*/
    .blog-aside .widget {
      box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
      border-radius: 5px;
      overflow: hidden;
      background: #ffffff;
      margin-top: 15px;
      margin-bottom: 15px;
      width: 100%;
      display: inline-block;
      vertical-align: top;
    }
    .blog-aside .widget-body {
      padding: 15px;
    }
    .blog-aside .widget-title {
      padding: 15px;
      border-bottom: 1px solid #eee;
    }
    .blog-aside .widget-title h3 {
      font-size: 20px;
      font-weight: 700;
      color: #fc5356;
      margin: 0;
    }
    .blog-aside .widget-author .media {
      margin-bottom: 15px;
    }
    .blog-aside .widget-author p {
      font-size: 16px;
      margin: 0;
    }
    .blog-aside .widget-author .avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      overflow: hidden;
    }
    .blog-aside .widget-author h6 {
      font-weight: 600;
      color: #20247b;
      font-size: 22px;
      margin: 0;
      padding-left: 20px;
    }
    .blog-aside .post-aside {
      margin-bottom: 15px;
    }
    .blog-aside .post-aside .post-aside-title h5 {
      margin: 0;
    }
    .blog-aside .post-aside .post-aside-title a {
      font-size: 18px;
      color: #20247b;
      font-weight: 600;
    }
    .blog-aside .post-aside .post-aside-meta {
      padding-bottom: 10px;
    }
    .blog-aside .post-aside .post-aside-meta a {
      color: #6F8BA4;
      font-size: 12px;
      text-transform: uppercase;
      display: inline-block;
      margin-right: 10px;
    }
    .blog-aside .latest-post-aside + .latest-post-aside {
      border-top: 1px solid #eee;
      padding-top: 15px;
      margin-top: 15px;
    }
    .blog-aside .latest-post-aside .lpa-right {
      width: 90px;
    }
    .blog-aside .latest-post-aside .lpa-right img {
      border-radius: 3px;
    }
    .blog-aside .latest-post-aside .lpa-left {
      padding-right: 15px;
    }
    .blog-aside .latest-post-aside .lpa-title h5 {
      margin: 0;
      font-size: 15px;
    }
    .blog-aside .latest-post-aside .lpa-title a {
      color: #20247b;
      font-weight: 600;
    }
    .blog-aside .latest-post-aside .lpa-meta a {
      color: #6F8BA4;
      font-size: 12px;
      text-transform: uppercase;
      display: inline-block;
      margin-right: 10px;
    }
    
    .tag-cloud a {
      padding: 4px 15px;
      font-size: 13px;
      color: #ffffff;
      background: #20247b;
      border-radius: 3px;
      margin-right: 4px;
      margin-bottom: 4px;
    }
    .tag-cloud a:hover {
      background: #fc5356;
    }
    
    .blog-single {
      padding-top: 30px;
      padding-bottom: 30px;
    }
    
    .article {
      box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
      border-radius: 5px;
      overflow: hidden;
      background: #ffffff;
      padding: 15px;
      margin: 15px 0 30px;
    }
    .article .article-title {
      padding: 15px 0 20px;
    }
    .article .article-title h6 {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 20px;
    }
    .article .article-title h6 a {
      text-transform: uppercase;
      color: #fc5356;
      border-bottom: 1px solid #fc5356;
    }
    .article .article-title h2 {
      color: #20247b;
      font-weight: 600;
    }
    .article .article-title .media {
      padding-top: 15px;
      border-bottom: 1px dashed #ddd;
      padding-bottom: 20px;
    }
    .article .article-title .media .avatar {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      overflow: hidden;
    }
    .article .article-title .media .media-body {
      padding-left: 8px;
    }
    .article .article-title .media .media-body label {
      font-weight: 600;
      color: #fc5356;
      margin: 0;
    }
    .article .article-title .media .media-body span {
      display: block;
      font-size: 12px;
    }
    .article .article-content h1,
    .article .article-content h2,
    .article .article-content h3,
    .article .article-content h4,
    .article .article-content h5,
    .article .article-content h6 {
      color: #20247b;
      font-weight: 600;
      margin-bottom: 15px;
    }
    .article .article-content blockquote {
      max-width: 600px;
      padding: 15px 0 30px 0;
      margin: 0;
    }
    .article .article-content blockquote p {
      font-size: 20px;
      font-weight: 500;
      color: #fc5356;
      margin: 0;
    }
    .article .article-content blockquote .blockquote-footer {
      color: #20247b;
      font-size: 16px;
    }
    .article .article-content blockquote .blockquote-footer cite {
      font-weight: 600;
    }
    .article .tag-cloud {
      padding-top: 10px;
    }
    
    .article-comment {
      box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
      border-radius: 5px;
      overflow: hidden;
      background: #ffffff;
      padding: 20px;
    }
    .article-comment h4 {
      color: #20247b;
      font-weight: 700;
      margin-bottom: 25px;
      font-size: 22px;
    }
    img {
        max-width: 100%;
    }
    img {
        vertical-align: middle;
        border-style: none;
    }
    
    /* Contact Us
    ---------------------*/
    .contact-name {
      margin-bottom: 30px;
    }
    .contact-name h5 {
      font-size: 22px;
      color: #20247b;
      margin-bottom: 5px;
      font-weight: 600;
    }
    .contact-name p {
      font-size: 18px;
      margin: 0;
    }
    
    .social-share a {
      width: 40px;
      height: 40px;
      line-height: 40px;
      border-radius: 50%;
      color: #ffffff;
      text-align: center;
      margin-right: 10px;
    }
    .social-share .dribbble {
      box-shadow: 0 8px 30px -4px rgba(234, 76, 137, 0.5);
      background-color: #ea4c89;
    }
    .social-share .behance {
      box-shadow: 0 8px 30px -4px rgba(0, 103, 255, 0.5);
      background-color: #0067ff;
    }
    .social-share .linkedin {
      box-shadow: 0 8px 30px -4px rgba(1, 119, 172, 0.5);
      background-color: #0177ac;
    }
    
    .contact-form .form-control {
      border: none;
      border-bottom: 1px solid #20247b;
      background: transparent;
      border-radius: 0;
      padding-left: 0;
      box-shadow: none !important;
    }
    .contact-form .form-control:focus {
      border-bottom: 1px solid #fc5356;
    }
    .contact-form .form-control.invalid {
      border-bottom: 1px solid #ff0000;
    }
    .contact-form .send {
      margin-top: 20px;
    }
    @media (max-width: 767px) {
      .contact-form .send {
        margin-bottom: 20px;
      }
    }
    
    .section-title h2 {
        font-weight: 700;
        color: #20247b;
        font-size: 45px;
        margin: 0 0 15px;
        border-left: 5px solid #fc5356;
        padding-left: 15px;
    }
    .section-title {
        padding-bottom: 45px;
    }
    .contact-form .send {
        margin-top: 20px;
    }
    .px-btn {
        padding: 0 50px 0 20px;
        line-height: 60px;
        position: relative;
        display: inline-block;
        color: #20247b;
        background: none;
        border: none;
    }
    .px-btn:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        border-radius: 30px;
        background: transparent;
        border: 1px solid rgba(252, 83, 86, 0.6);
        border-right: 1px solid transparent;
        -moz-transition: ease all 0.35s;
        -o-transition: ease all 0.35s;
        -webkit-transition: ease all 0.35s;
        transition: ease all 0.35s;
        width: 60px;
        height: 60px;
    }
    .px-btn .arrow {
        width: 13px;
        height: 2px;
        background: currentColor;
        display: inline-block;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: 25px;
    }
    .px-btn .arrow:after {
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-top: 2px solid currentColor;
        content: "";
        position: absolute;
        top: -3px;
        right: 0;
        display: inline-block;
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    

    If you want to view the blog detail page on http://localhost:81/dokocrunch/blog_detail URL, you must configure the “routes.php” file.

    Visiting the above URL shows you the below screenshot.

    error in URL segment
    Error occurred when index.php is not used in URL segment.

    It is due to unwanted “index.php”  in the URL segment, i.e. you must include index.php as “localhost:81/dokocrunch/index.php/blog_detail”

    index.php in url
    index.php in URL segment

    You can see that the “404 page not found” error as there is no set up for that url routes.

    Removing index.php from URL Segment

    You can remove index.php from the URL segment by using simple rules.

    Go to your web application base directory and create a file name “.htaccess” from your editor and add the following codes.

    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php/$1 [L]

    Setting Up Routes

    You can configure a webpage for your URL segment.

    Go to the “application/config/routes.php” file and add routes config for blog detail.

    You can do so by using the “$route[]” code.

    Add the following code to your “routes.php” file.

    $route[‘blog_detail’] = ‘blog/blog_detail’;

    Here $route[‘blog_detail‘] shows the URL segment and ‘blog/blog_detail’ is controller_name/controller_method

    Let’s add the blog_detail method to the Blog controller.

    <?php
    
    class Blog extends CI_Controller{
    
    	public function index()
    	{
    		$this->load->view('pages/blog_home');
    	}
    
    	public function blog_detail()
    	{
    		$this->load->view('pages/blog_detail');
    	}
    }

    Now visit http://localhost:81/blog/blog_detail . You will see it working.

    blog detail view
    Blog Detail View

    Building a blog application in CodeIgniter post comes to an end. Share your views on how you feel regarding this tutorial series post. Please share this post with our friends, share it on different social media to show us some love. Comment down your reviews, suggestions so that I can make progress on the next blog post. I hope you love my building a blog application in CodeIgniter post. Have a great day!!

    You can download the project file from the below link.

    Recent Articles

    spot_img

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Get new notification

    Subscribe to our newsletter

    To be updated with all the latest news, offers and special announcements.