Follow the steps shown below to convert an HTML template into a CodeIgniter project.

Steps:

1. Download CodeIgniter3 from CodeIgniter site.
2. Download any free responsive HTML template. the template that is used in this tutorial can be downloaded from the following link.

Delicious

3. Make a copy of CodeIgniter folder and rename the folder by your project name.
4. Copy all required folders from the template folder to root folder.
5. 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]

6. Create database.
7. Set the database connection.

8. Create a default controller with the following code.

<?php
class Recipe extends CI_Controller {
public function __construct(){
parent::__construct();
$this->load->helper('url');
$this->load->model('recipe_model');
$this->load->database();
}
public function index()
{
$data['recipelist'] = $this->recipe_model->get_all_recipes();
$this->load->view("recipe",$data);
}
}
?>

9. Create a model with the following code.

<?php
class Recipe_model extends CI_model{
public function get_all_recipes(){
return $this->db->get('recipe_items');
}

public function get_recipe_details($id)
{
$this->db->where('id', $id);
return $this->db->get('recipe_items');
}
}

?>

10. Create a view file for the default controller by modifying an index.html file of HTML template
Use the following script to link images, js and CSS files.

<?php echo base_url(); ?>

11. Set the base URL and default controller.
12. Run the project.
13. Create a folder in the root folder and add some images.
14. Modify the best recipe part of the view by fetching data from the database.

<div class="row">
<?php $counter=1;
foreach($recipelist->result() as $row) :
if ($counter > 6) break;
?>
<!-- Single Best Receipe Area -->
<div class="col-12 col-sm-6 col-lg-4">
<div class="single-best-receipe-area mb-30">
<img src="images/<?php echo $row->id;?>.jpg" alt="">
<div class="receipe-content">
<a href="post/details/<?php echo $row->id;?>">
<h5><?php echo $row->title; ?></h5>
</a>
<div class="ratings">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<?php $counter++; continue; ?>
<div class="col-12 col-sm-6 col-lg-4">
<div class="single-best-receipe-area mb-30">
<img src="images/<?php echo $row->id;?>.jpg" alt="">
<div class="receipe-content">
<a href="post">
<h5><?php echo $row->title; ?></h5>
</a>
<div class="ratings">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<?php $counter++; continue; ?>
<div class="col-12 col-sm-6 col-lg-4">
<div class="single-best-receipe-area mb-30">
<img src="images/<?php echo $row->id;?>.jpg" alt="">
<div class="receipe-content">
<a href="post">
<h5><?php echo $row->title; ?></h5>
</a>
<div class="ratings">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
</div>
</div>
</div>

<?php
$counter++;
endforeach ;
?>
</div>

15. Run the project.
16. Add another controller to show particular post details.

<?php

class Post extends CI_Controller {

public function __construct(){

parent::__construct();
$this->load->helper('url');
$this->load->model('recipe_model');
$this->load->database();

}
public function details()
{
$id = $this->uri->segment(3);
$data['details'] = $this->recipe_model->get_recipe_details($id);
$this->load->view("post_details",$data);
}
}
?>

17. Create a view for the controller by modifying the specific HTML file of HTML template.

18. Modify the view file, post_details.php with the following code.

<div class="col-12 col-md-8">
<div class="receipe-headline my-5">
<span><?php echo $entrydate; ?></span>
<h2><?php echo $title; ?></h2>
<div class="receipe-duration">
<h6>Preparation Time:<?php echo $prep_time; ?></h6>
<h6>Cook Time:<?php echo $cook_time; ?></h6>
<h6>Serve:<?php echo $serve; ?></h6>
</div>
</div>
</div>

19. Run the project.
You have to follow the following video link to practice this tutorial.