You can convert any responsive HTML template into a CodeIgniter project by following this tutorial. You will need a free HTML template, CodeIgniter3 to practice this tutorial. Follow the steps shown below to convert an HTML template into a CodeIgniter project.
Steps:
1. A free html template is used in this tutorial to show conversion process. Download the template from the following link.
2. Download CodeIgniter3 from CodeIgniter site.
https://codeigniter.com/en/download
3. Unzip the downloaded codeigniter file and copy the folder in ‘c:\xampp\htdocs\’ folder. Rename the folder by your project name. Here, ‘ci_project‘ is set.
4. Copy all required folders from the template folder to root folder.
5. Set the following setting in application/config/config.php file.
$config['base_url'] = 'http://localhost/ci_project/';
$config['index_page'] = '';
6. Add a .htaccess file with the following content in the root folder.
RewriteEngine on
RewriteCond $1 !^(index.php|resources|robots.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]
7. Create database named ‘ci_pro‘.
8. Run the following SQL commands to create the required tables.
CREATE TABLE job(
`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`category` varchar(50) NOT NULL,
`post` varchar(50) NOT NULL,
`type` varchar(50) NOT NULL,
`total_post` int(11) NOT NULL,
`job_detail` text NOT NULL,
`salary` varchar(10) NOT NULL,
`deadline` varchar(15) NOT NULL,
`company_name` varchar(50) NOT NULL,
`company_addr` varchar(255) NOT NULL,
`company_email` varchar(50) NOT NULL,
`company_url` varchar(50) NULL,
`company_phone` varchar(50) NULL
);
insert into job (id,category,post, type,total_post,job_detail,salary,deadline,company_name,company_addr,company_email,company_url,company_phone)
values
(null, 'Marketing','Digital Marketer','Full Time',6,'Marketing products.....','50000','2020-02-12','ABC','Dhaka','','',''),
(null, 'Software and Web','Web Developer','Part Time',5,'Developing website.....','Negotiable','2020-03-10','Informatics','Rajshahi','','',''),
(null, 'Teaching and Education','Math Teacher','Full Time',26,'Teaching Math.....','Negotiable','2020-02-02','Wordbreeze School','Dhaka','','',''),
(null, 'Administration','Accountant','Full Time',3,'Accounting tasks.....',55000,'2020-03-05','Rahim Afroz','Khulna','','','');
CREATE TABLE candidate(
`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`name` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`phone` varchar(50) NOT NULL,
`current_post` varchar(50) NOT NULL,
`experience` text NULL,
`education` text NOT NULL
);
insert into candidate (id,name,email,phone,current_post,experience,education)
values
(null, 'Masudur Rahman','masud@gmail.com','01864586756','Web Developer','1 years in CCSL','MSc., BSc.'),
(null, 'Nusrat Jahan','nusrat@gmail.com','01977886750','Fresher','No Experience','MSc., BSc.'),
(null, 'Walliur Rahman','wali@gmail.com','01564586756','Digital Marketer','2 years in TCL','MSc.'),
(null, 'Mahmuda','mahmuda@gmail.com','01833897987','Creative Designer','3 years in Tata','MSc.'),
(null, 'Habbibur Rahman','habib@gmail.com','0189875643','Fresher','No Experience','MSc., BSc.');
CREATE TABLE feedback(
`id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`name` varchar(50) NOT NULL,
`message` text NOT NULL
);
insert into feedback(id,name,message)
values
(null, 'Helal Uddin','Working in conjunction with himanitrain aid agencies....'),
(null, 'Amran','Working in conjunction with himanitrain aid agencies....'),
(null, 'Kabir','Working in conjunction with himanitrain aid agencies....');
9. Set the database connection by editing application/config/database.php file.
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'ci_pro',
10. Create a default controller with the following code.
<?php
class Job_portal 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();
$data['catlist'] = $this->jp_model->get_all_category();
$data['candlist'] = $this->jp_model->get_all_candidate();
$data['top_company'] = $this->jp_model->get_top_company();
$data['feedback'] = $this->jp_model->get_feedback();
$this->load->view("job",$data);
}
}
?>
11. Set the default controller name in application/config/routes.php file.
$route['default_controller'] = 'Job_portal';
12. Create a model named ‘Jp_model‘ with the following code.
<?php class Jp_model extends CI_model{
public function get_all_jobs()
{
return $this->db->get('job');
}
public function get_job_details($id)
{
$this->db->where('id', $id);
return $this->db->get('job');
}
public function get_all_category()
{
$records=$this->db->query("select category, sum(total_post) as total from job group by category");
return $records;
}
public function get_all_candidate()
{
$records=$this->db->query("select * from candidate");
return $records;
}
public function get_top_company()
{
$records=$this->db->query("select id, company_name,total_post as total from job order by total desc limit 4");
return $records;
}
public function get_feedback()
{
$records=$this->db->query("select * from feedback");
return $records;
}
} ?>
13. Create a view file named ‘job.php‘ under view folder and copy the code from index.html file of HTML template.
14. Add the following script to link with all images, js and CSS files in the view file.
<?php echo base_url(); ?>
15. Run the project.
16. Modify the view file in different parts using foreach loop to display data from the database [You can check the video to do the process properly].
<?php foreach($var->result() as $row) :?>
<?php endforeach ; ?>
17. Run the project.
Next part of this tutorial given here.