Hello World, This is second tutorial of codeigniter tutorial series “Learn Codeigniter from scratch” series.In this previous tutorial we have learnt that how we can setup codeigniter on local machine. In this tutorial we will create static application with codeigniter and bootstrap 3. I have divided this tutorial in following parts:
- Bootstrap Introduction
- Create static application (with controller and view)
Bootstrap Introduction
According to their official documentation:
Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
Create Static application with codeigniter and bootstrap 3
In this series of tutorial we will work on todo list application.
- Create todo folder in application/views folder.
- In this folder create todo.php file with following code.
<!DOCTYPE html>
<html>
<head>
<title><?php echo $page_title; ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('public/bootstrap.min.css') ?>" />
</head>
<body>
<div class="container">
<h1 class="page-header">To-Do List <span class="badge">123</span></h1>
<table class="table table-striped table-bordered">
<tr>
<th>Task</th>
<th>Status</th>
<th>Action</th>
</tr>
<?php
foreach($content as $task){
?>
<tr>
<td><?php echo $task['task_title']; ?></td>
<td><?php echo $task['task_status']; ?></td>
<td>
<a href="#" class="btn btn-xs btn-primary">Edit</a>
<a href="#" class="btn btn-xs btn-danger">Delete</a>
</td>
</tr>
<?php
}
?>
</table>
</div>
</body>
</html>
- Now Create Todo.php in application/controllers folder.
- Add the following code in this file.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Todo extends CI_Controller {
function __construct(){
parent::__construct();
$this->load->helper('url');
}
// todo list
function index(){
$data['page_title']="To-Do List";
$data['content']=array(
array(
'task_title'=>'Task 1',
'task_status'=>'done'
),
array(
'task_title'=>'Task 2',
'task_status'=>'pending'
),
array(
'task_title'=>'Task 3',
'task_status'=>'pending'
),
array(
'task_title'=>'Task 4',
'task_status'=>'pending'
),
array(
'task_title'=>'Task 5',
'task_status'=>'completed'
),
array(
'task_title'=>'Task 6',
'task_status'=>'pending'
)
);
$this->load->view('todo/todo.php',$data);
}
}
Currently, I have added the static code. But in the next tutorial we will fetch data from database.
- Now we have settled up our controller and attached the view in it.
- Lets check our static app in browser. Open the following link in the browser.
http://localhost/your-project-path/index.php/todo
I know you are thinking why we put index.php in path. but Don’t worry it added by codeigniter default. In the next tutorial we will remove this from our path.
- When you open the above path in your browser, you will see the following screen.
Congratulation, You have created static application with codeigniter and Bootstrap 3.
In the next tutorial of this series, we will Connect with database and fetch data from database with codeigniter. I hope you are enjoying this tutorial. Please share you experience via comment.