How you can create multiple pages by using multiple controllers and search data in the database are shown in this tutorial. Follow the steps properly to complete the tutorial.
Steps:
1. Create a view file named browse_job.php under views folder and copy the content from jobs.html of the template into that file.
2. Create a controlller named browse_job.php under controllers and add the following script.
<?php
class Browse_job extends CI_Controller {
public function __construct(){
parent::__construct();
$this->load->helper('url');
$this->load->model('jp_model');
$this->load->database();
}
public function index()
{
$data['joblist'] = $this->jp_model->get_all_jobs();
$this->load->view("browse_job",$data);
}
public function search_job()
{
$keyword=$this->input->post('kw');
$this->load->model('src_job_model');
if($keyword !="")
{
$data['joblist']=$this->src_job_model->src_keyword($keyword);
}
if($this->input->post('location') != 'Location')
{
$data['joblist']=$this->src_job_model->src_location($this->input->post('location'));
}
$this->load->view("browse_job",$data);
}
}
?>
3. Create a model named src_job_model.php under models folder and add the following script.
<?php class Src_job_model extends CI_model{
public function src_keyword($kw)
{
if($kw=="all" || $kw=="")
return $this->db->query("select * from job ");
else
return $this->db->query("select * from job where post like '%$kw%' or category like '%$kw%' or type like '%$kw%'");
}
public function src_location($loc)
{
return $this->db->query("select * from job where company_addr like '%$loc%'");
}
} ?>
4. Run the project.
5. Header and footer part of each view file is same. Create header.php and footer.php under views folder to apply same header and footer for each view by including these files.
6. Remove the following header part from each view file and add it into header.php.
<!doctype html>
<html class="no-js" lang="zxx">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Job Board</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="manifest" href="site.webmanifest"> -->
<link rel="shortcut icon" type="image/x-icon" href="<?php echo base_url(); ?>img/favicon.png">
<!-- Place favicon.ico in the root directory -->
<!-- CSS here -->
<link rel="stylesheet" href="<?php echo base_url(); ?>css/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/owl.carousel.min.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/magnific-popup.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/font-awesome.min.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/themify-icons.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/nice-select.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/flaticon.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/gijgo.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/animate.min.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/slicknav.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/style.css">
<!-- <link rel="stylesheet" href="<?php echo base_url(); ?>css/responsive.css"> -->
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!-- header-start -->
<header>
<div class="header-area ">
<div id="sticky-header" class="main-header-area">
<div class="container-fluid ">
<div class="header_bottom_border">
<div class="row align-items-center">
<div class="col-xl-3 col-lg-2">
<div class="logo">
<a href="index.html">
<img src="<?php echo base_url(); ?>img/logo.png" alt="">
</a>
</div>
</div>
<div class="col-xl-6 col-lg-7">
<div class="main-menu d-none d-lg-block">
<nav>
<ul id="navigation">
<li><a href="<?php echo base_url(); ?>">home</a></li>
<li><a href="<?php echo base_url(); ?>browse_job/">Browse Job</a></li>
<li><a href="#">pages <i class="ti-angle-down"></i></a>
<ul class="submenu">
<li><a href="candidate.html">Candidates </a></li>
<li><a href="job_details.html">job details </a></li>
<li><a href="elements.html">elements</a></li>
</ul>
</li>
<li><a href="#">blog <i class="ti-angle-down"></i></a>
<ul class="submenu">
<li><a href="blog.html">blog</a></li>
<li><a href="single-blog.html">single-blog</a></li>
</ul>
</li>
<li><a href="<?php echo base_url(); ?>contact/">Contact</a></li>
</ul>
</nav>
</div>
</div>
<div class="col-xl-3 col-lg-3 d-none d-lg-block">
<div class="Appointment">
<div class="phone_num d-none d-xl-block">
<a href="#">Log in</a>
</div>
<div class="d-none d-lg-block">
<a class="boxed-btn3" href="#">Post a Job</a>
</div>
</div>
</div>
<div class="col-12">
<div class="mobile_menu d-block d-lg-none"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- header-end -->
7. Add the following line at the beginning of each view file.
<?php include_once('header.php'); ?>
8. Remove the following footer part from each view file and add it into footer.php.
<!-- footer start -->
<footer class="footer">
<div class="footer_top">
<div class="container">
<div class="row">
<div class="col-xl-3 col-md-6 col-lg-3">
<div class="footer_widget wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s">
<div class="footer_logo">
<a href="#">
<img src="<?php echo base_url(); ?>img/logo.png" alt="">
</a>
</div>
<p>
finloan@support.com <br>
+10 873 672 6782 <br>
600/D, Green road, NewYork
</p>
<div class="socail_links">
<ul>
<li>
<a href="#">
<i class="ti-facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xl-2 col-md-6 col-lg-2">
<div class="footer_widget wow fadeInUp" data-wow-duration="1.1s" data-wow-delay=".4s">
<h3 class="footer_title">
Company
</h3>
<ul>
<li><a href="#">About </a></li>
<li><a href="#"> Pricing</a></li>
<li><a href="#">Carrier Tips</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
</div>
<div class="col-xl-3 col-md-6 col-lg-3">
<div class="footer_widget wow fadeInUp" data-wow-duration="1.2s" data-wow-delay=".5s">
<h3 class="footer_title">
Category
</h3>
<ul>
<li><a href="#">Design & Art</a></li>
<li><a href="#">Engineering</a></li>
<li><a href="#">Sales & Marketing</a></li>
<li><a href="#">Finance</a></li>
</ul>
</div>
</div>
<div class="col-xl-4 col-md-6 col-lg-4">
<div class="footer_widget wow fadeInUp" data-wow-duration="1.3s" data-wow-delay=".6s">
<h3 class="footer_title">
Subscribe
</h3>
<form action="#" class="newsletter_form">
<input type="text" placeholder="Enter your mail">
<button type="submit">Subscribe</button>
</form>
<p class="newsletter_text">Esteem spirit temper too say adieus who direct esteem esteems
luckily.</p>
</div>
</div>
</div>
</div>
</div>
<div class="copy-right_text wow fadeInUp" data-wow-duration="1.4s" data-wow-delay=".3s">
<div class="container">
<div class="footer_border"></div>
<div class="row">
<div class="col-xl-12">
<p class="copy_right text-center">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</div>
</footer>
<!--/ footer end -->
<!-- link that opens popup -->
<!-- JS here -->
<script src="<?php echo base_url(); ?>js/vendor/modernizr-3.5.0.min.js"></script>
<script src="<?php echo base_url(); ?>js/vendor/jquery-1.12.4.min.js"></script>
<script src="<?php echo base_url(); ?>js/popper.min.js"></script>
<script src="<?php echo base_url(); ?>js/bootstrap.min.js"></script>
<script src="<?php echo base_url(); ?>js/owl.carousel.min.js"></script>
<script src="<?php echo base_url(); ?>js/isotope.pkgd.min.js"></script>
<script src="<?php echo base_url(); ?>js/ajax-form.js"></script>
<script src="<?php echo base_url(); ?>js/waypoints.min.js"></script>
<script src="<?php echo base_url(); ?>js/jquery.counterup.min.js"></script>
<script src="<?php echo base_url(); ?>js/imagesloaded.pkgd.min.js"></script>
<script src="<?php echo base_url(); ?>js/scrollIt.js"></script>
<script src="<?php echo base_url(); ?>js/jquery.scrollUp.min.js"></script>
<script src="<?php echo base_url(); ?>js/wow.min.js"></script>
<script src="<?php echo base_url(); ?>js/nice-select.min.js"></script>
<script src="<?php echo base_url(); ?>js/jquery.slicknav.min.js"></script>
<script src="<?php echo base_url(); ?>js/jquery.magnific-popup.min.js"></script>
<script src="<?php echo base_url(); ?>js/plugins.js"></script>
<!-- <script src="<?php echo base_url(); ?>js/gijgo.min.js"></script> -->
<script src="<?php echo base_url(); ?>js/range.js"></script>
<!--contact js-->
<script src="<?php echo base_url(); ?>js/contact.js"></script>
<script src="<?php echo base_url(); ?>js/jquery.ajaxchimp.min.js"></script>
<script src="<?php echo base_url(); ?>js/jquery.form.js"></script>
<script src="<?php echo base_url(); ?>js/jquery.validate.min.js"></script>
<script src="<?php echo base_url(); ?>js/mail-script.js"></script>
<script src="<?php echo base_url(); ?>js/main.js"></script>
<script>
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 24600,
values: [ 750, 24600 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] +"/ Year" );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) + "/ Year");
} );
</script>
9. Add the following line at the end of each view file.
<?php include_once('footer.php'); ?>
10. Modify the Job Listing part of browse_job.php file under views folder like previous tutorial to display the data from database.
11. Add the name attribute for search textbox (kw) and Location drowdown (location) to perform the search operation. [You can see the video to clear the step].
12. Add onChange attribute for Location dropdown and add the following value.
onchange="this.form.submit()"
11. Run the project.