Adding Search and Pagination to Your Blog Section : Day-9

Welcome to Day 9 Adding Search and Pagination of our journey to build a portfolio website with CodeIgniter! Today, we’ll enhance the blog section of our website by adding search functionality and pagination. These features will improve user experience and make navigating through blog posts easier.

Implementing Search Functionality

Step 1: Modify Blog Controller and Views

1. Update Blog Controller: Modify Blog.php controller in application/controllers/:

<?php class Blog extends CI_Controller { public function __construct() { parent::__construct(); $this->load->model('blog_model'); $this->load->library('form_validation'); $this->load->library('session'); } public function index() { $search = $this->input->get('search'); $config['base_url'] = base_url('blog/index'); $config['total_rows'] = $this->blog_model->count_posts($search); $config['per_page'] = 5; // Number of posts per page $config['uri_segment'] = 3; // Segment containing pagination offset $this->pagination->initialize($config); $data['posts'] = $this->blog_model->get_posts($config['per_page'], $this->uri->segment(3), $search); $data['pagination_links'] = $this->pagination->create_links(); $this->load->view('header'); $this->load->view('blog/posts', $data); $this->load->view('footer'); } public function search() { $search = $this->input->post('search'); redirect('blog/index?search=' . urlencode($search)); } } ?>

1. Update Blog Model: Modify Blog_model.php in application/models/ to include methods for pagination and search:

<?php class Blog_model extends CI_Model { public function get_posts($limit, $offset, $search = null) { // Retrieve blog posts with pagination } public function count_posts($search = null) { // Count total number of blog posts for pagination } public function search_posts($search) { // Search for blog posts matching the search query } } ?>

1. Update Blog Views: Modify posts.php view to include search form and pagination links:

<!-- Search Form --> <section> <h2>Search Blog</h2> <form action="<?php echo base_url('blog/search'); ?>" method="post"> <input type="text" name="search" placeholder="Search..." /> <button type="submit">Search</button> </form> </section> <!-- List of Blog Posts --> <section> <h2>Blog Posts</h2> <?php foreach ($posts as $post): ?> <div class="post"> <h3><?php echo $post['title']; ?></h3> <p><?php echo $post['body']; ?></p> <a href="#">Edit Post</a> </div> <?php endforeach; ?> </section> <!-- Pagination Links --> <section> <?php echo $pagination_links; ?> </section>

Testing Search and Pagination

1. Search Functionality: Enter a search term in the form and submit. Verify that blog posts matching the search query are displayed.
2. Pagination: Navigate through multiple pages of blog posts using pagination links. Ensure each page displays the correct set of posts.

Conclusion

Congratulations! You’ve successfully added search functionality and pagination to the blog section of your portfolio website using CodeIgniter. Users can now search for specific blog posts and navigate through posts more efficiently. In Day 10, we’ll focus on optimizing the website for performance and adding final touches.