Category Filter in Codeigniter

-
Category Filter in Codeigniter

Filter Products as per Category using Codeigniter


1.  Database 

--
-- Table structure for table `category`
--

CREATE TABLE `category` (
  `c_id` int(11) NOT NULL,
  `c_name` varchar(100) NOT NULL,
  `c_status` int(1) NOT NULL DEFAULT '1'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `category`
--

INSERT INTO `category` (`c_id`, `c_name`, `c_status`) VALUES
(1, 'JACKET', 1),
(2, 'SHIRT', 1),
(3, 'DRESS MATERIAL', 1);

-- --------------------------------------------------------

--
-- Table structure for table `product`
--

CREATE TABLE `product` (
  `pid` int(11) NOT NULL,
  `c_id` int(11) NOT NULL,
  `ptitle` varchar(255) NOT NULL,
  `status` int(11) NOT NULL DEFAULT '1'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `product`
--

INSERT INTO `product` (`pid`, `c_id`, `ptitle`, `status`) VALUES
(1, 1, 'jacket', 1),
(2, 2, 'DEAR SHIRT', 1),
(3, 3, 'Women\'s Dress Material', 1),
(4, 3, 'Women\'s Printed Unstitched Regular Wear Salwar Suit Dress Material', 1);

--
-- Indexes for dumped tables
--

--
-- Indexes for table `category`
--
ALTER TABLE `category`
  ADD PRIMARY KEY (`c_id`);

--
-- Indexes for table `product`
--
ALTER TABLE `product`
  ADD PRIMARY KEY (`pid`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `category`
--
ALTER TABLE `category`
  MODIFY `c_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=29;

--
-- AUTO_INCREMENT for table `product`
--
ALTER TABLE `product`
  MODIFY `pid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
COMMIT;

2.  Controller file :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
public function __construct(){
         parent::__construct();
         $this->load->model('Product_model');
         $this->load->helper(array('form', 'url'));
         $this->load->library('form_validation');
         $this->load->library("pagination");
         $this->load->helper('security');
    }
      public function index()
    {
         $data['title'] = 'Product Filter';
         $data['description'] = 'Category Filter in codeigniter';
         $data['product'] = $this->Product_model->getproduct();
         $data['category'] = $this->Product_model->getcategory();
         $this->load->view('productlisting', $data);
    }
}

3.  Model file :
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

class Product_model extends CI_Model
{
         function getproduct()
         {
               return $this->db->select('*')
                                             ->from('product')
                                             ->get()->result();
          }
          function getcategory()
          {
                   return $this->db->select('*')
                                                ->from('category')
                                                ->get()->result();
           }
}


4. View Page :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?php echo $title; ?></title>
<link rel="stylesheet" href="<?php echo base_url(); ?>template/css/bootstrap.min.css">
<script src="<?php echo base_url(); ?>template/js/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>template/js/bootstrap.min.js"></script>
<style>
.pro-block{
height:200px;
}
.img{
height:160px;
width: 100%;
}
.title{
text-transform: uppercase;
}
</style>
<script type="text/javascript">
 $('.filter').change(function(){     
    //on each click, refresh visible / hidden for each product
    $('li.result').each(function(i, item){
      var category = $(this).data('category');
      var visible = $('input.filter[data-category="' + category + '"]:checked').length > 0;
      visible ? $(this).show() : $(this).hide();
    });
    //if no checkboxes are checked, show all products
    if($('input.filter:checked').length === 0) $('li.result').show();
});
</script>
</head>
<body>

<div class="container">    
    <div class="row">
        <div class="col-xs-12 col-md-12 col-sm-12 text-center">
            <h3 class="text-center"> Category Filter in codeigniter</h3>
        </div>
        <div class="col-md-12 col-sm-6 col-xs-12">
         <div class="col-md-3">
         <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
         <!-- Categories Panel -->
          <div class="panel panel-default">
          <!-- Heading -->
           <div class="panel-heading" role="tab" id="headingOne">
             <!-- Title -->
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <span> Categories</span>
                </a>
             </h4>
            <!-- Title End -->
           </div>
           <!-- Content -->
        <div id="collapseOne" class="panel-collapse" role="tabpanel" aria-labelledby="headingOne">
           <div class="panel-body categories">
               <ul>
                <?php $cnt=0; foreach ($category as $row):$cnt+=1;?>
                    <li>
                       <input type="checkbox" class="filter" data-category="<?php echo $row->c_id; ?>"  > <?php echo $row->c_name; ?>
                    </li>
                   <?php endforeach; ?>
               </ul>
            </div>
         </div>
         </div>
        <!-- Categories Panel End -->
        <!-- Brands Panel -->
        </div>
</div>
<div class="col-md-9">      
 <ul>
<?php foreach ($product as $l_row): ?>
 <li class="result" data-category="<?php echo $l_row->c_id; ?>">
  <div class="col-md-3 col-sm-6 col-xs-12">
             <div class="pro-block">
                <div>
                    <img class="img" alt="<?php echo $l_row->ptitle; ?>" title="<?php echo $l_row->ptitle; ?>" src="<?php echo base_url(); ?>template/uploads/pro_<?php echo $l_row->pid; ?>_1.jpg">
</div>
                    <h6 class="text-center title"><?php echo $l_row->ptitle; ?></h6>
              </div>
      </div>
 </li>
    <?php endforeach; ?>
</ul>

</div>
</div>   
</div>           
</div>
</body>
</html>





Comments

  1. Nisa Humaira9 May 2020 at 01:51

    Hi, I have followed your tutorial and when I tick the checkbox, it seems like the code is not function, can you help me? Because I have followed other tutorial also but I cannot get it. Is this full code or not?

    ReplyDelete
    Replies
    1. Ankita Salve29 May 2020 at 04:59

      can you send your code or send your email id?

      Delete
  2. Nathan Duference6 October 2020 at 23:10

    I read over your blog, and I found it inquisitive. Also, you may also find about top Codeigniter Development Company Interested.

    ReplyDelete
  3. Unknown10 July 2021 at 00:53

    can you please give me entire code..

    ReplyDelete
  4. Microsidd India4 April 2022 at 07:01

    https://in.microsidd.com/product/accuchek-softclix-lancing-device-compatible-with-accu-check-active-go-performa-advantage-sensor-aviva-meter/
    https://in.microsidd.com/product/alere-g1-100-glucometer-strips/
    https://in.microsidd.com/product/ovulation-test-kit-also-called-lh-kit/
    https://in.microsidd.com/product/4th-generation-hiv-test-kit/
    https://in.microsidd.com/product/hiv-hcv-hbsag-test-kit-combo/

    ReplyDelete
  5. Smile Orthodontic and Implant Center4 April 2022 at 07:14

    orthodontist
    orthodontist near me
    braces near me
    orthodontics near me
    orthodontic treatment
    smile orthodontics
    best orthodontist near me

    ReplyDelete
  6. Motichur Sweets and Snacks4 April 2022 at 07:20

    "Motichur Sweets and Snacks
    "
    "Best sweet shop in Karnataka
    "
    "Online sweet shop in Bangalore
    "
    "Best ladoo online
    "
    "Online Snacks
    "
    "Sweet gift box online in Bangalore
    "
    "best wedding sweets in Karnataka
    "

    ReplyDelete

Post a Comment

Popular posts from this blog

Profile Form in Codeigniter with Image upload and Validation

-
Image
In this tutorial , we learn how to create user Profile Form in Codeigniter with Image upload , Validation  and insert user data in MySQL database. We will then retrieve the information from the database and display it on the user profile details  page. Follow following steps: 1.  Database Database: `forms` -- -------------------------------------------------------- CREATE TABLE `profile` (   `id` int(11) NOT NULL,   `name` varchar(255) NOT NULL,   `email` varchar(255) NOT NULL,   `mobnum` varchar(255) NOT NULL,   `gender` varchar(255) NOT NULL,   `educ` varchar(255) NOT NULL,   `hobbies` varchar(500) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- - INSERT INTO `profile` (`id`, `name`, `email`, `mobnum`, `gender`, `educ`, `hobbies`) VALUES (1, 'John', 'john@gmail.com', '1111111111', 'Male', 'MBA/MCA', 'Photography, Mountain climbing'), (2, 'Mary', 'mary@gmail...
Read more

Multi Item Slider in Codeigniter using JQuery

-
Image
Multi Item Slider in Codeigniter using JQuery  Database Queries : CREATE DATABASE IF NOT EXISTS `slider` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci; USE `slider`; CREATE TABLE `slider` (   `s_id` int(11) NOT NULL,   `s_title` varchar(50) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; INSERT INTO `slider` (`s_id`, `s_title`) VALUES (1, 'Rose'), (2, 'Tulips'), (3, 'Lotus'); ALTER TABLE `slider`   ADD PRIMARY KEY (`s_id`); ALTER TABLE `slider`   MODIFY `s_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4; COMMIT; Database.php <?php defined('BASEPATH') OR exit('No direct script access allowed'); $active_group = 'default'; $query_builder = TRUE; $db['default'] = array( 'dsn'   => '', 'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'database' => 'slider...
Read more