Membuat Todo List Sederhana Dengan CodeIgniter

codeigniter logoPada tutorial CodeIgniter kali ini kita akan membuat sebuah web aplikasi todo list sederhana. Aplikasi yang kita akan buat sangat sederhana dan tidak mendukung multi-user.

Pertama kita membuat table yang akan kita gunakan sepanjang tutorial ini, yaitu table untuk menyimpan todo list kita.

CREATE TABLE IF NOT EXISTS `todo` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(255) NOT NULL,
`description` text,
`status` int(11) NOT NULL DEFAULT '1',
PRIMARY KEY  (`id`)
) ;
 
INSERT INTO `todo` (`id`, `title`, `description`, `status`) VALUES
(1, 'Buy flower', 'Buy flower for the girl next door', 1),
(2, 'Phone my dad', NULL, 1);

Pada field status kita gunakan default 1, yang artinya ketika suatu data baru terbentuk maka statusnya adalah aktif, dan jika status menjadi 0 berarti todo tersebut telah non-aktif. Untuk lebih jelasnya kita akan melihat disisi model yang akan kita buat.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
class Todo_model extends Model {
 
    public function __construct()
    {
        // model constructor
        parent::__construct();
    }
 
    function getCompletedTodo()
    {
        $query = $this->db->get_where('todo', array('status' => '0'));		
        return $query->result();
    }
 
    function getNextTodo()
    {
        $query = $this->db->get_where('todo', array('status' => '1'));	
        return $query->result();
    }
}
?>

Untuk controller, kita akan membuat halaman index yang akan menampilkan daftar todo yang harus dilakukan dan daftar todo yang telah selesai.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
class Todo extends Controller {
 
    public function __construct()
    {
        parent::__construct();
        $this->load->model('Todo_model');
    }
 
    function index()
    {
        $data['todo_list'] = $this->Todo_model->getNextTodo();
        $data['completed_list'] = $this->Todo_model->getCompletedTodo();
        $this->load->view('todo/index', $data);
    }
}
?>

Dan terakhir adalah menulis view untuk halaman index

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
    <head>
        <title>CodeIgniter To Do List Application</title>
    </head>
<body>
 
<h1>Welcome to CodeIgniter To Do List Application!</h1>
 
<h2>Next</h2>
<?php if($todo_list): ?>
<ul>
    <?php foreach($todo_list as $todo): ?>
    <li><h3><?= $todo->name ?></h3>
    <?php if($todo->description): ?><p><?= $todo->description ?></p><?php endif ?>
    </li>
    <?php endforeach ?>
</ul>
<?php else: ?>
None
<?php endif ?>
 
<h2>Completed</h2>
<?php if($completed_list): ?>
<ul>
    <?php foreach($completed_list as $todo): ?>
    <li><h3><?= $todo->name ?></h3>
    <?php endforeach ?>
</ul>
<?php else: ?>
None
<?php endif ?>
</body>
</html>

Seperti anda lihat aplikasi ini sangat sederhana dan masih terdapat banyak ruang untuk perbaikan, seperti penambahan pagination, fungsi untuk menandai bahwa sebuah todo telah selesai, atau bahkan fungsi untuk edit dan delete sebuah todo. Silahkan anda tambahkan fungsi-fungsi tersebut, jika terdapat kesulitan silahkan anda memberi komentar, dan saya akan coba untuk membantu.

Related posts:

  1. Membuat Microblog Sederhana Dengan CodeIgniter
  2. Keranjang Belanja Sederhana Dengan PHP
  3. Shopping Cart Dengan CodeIgniter
  4. Pagination Tutorial Dengan CodeIgniter
  5. Membuat Aplikasi Notes Dengan Django

About Gilang Chandrasa

Gilang Chandrasa adalah seorang web developer yang sangat menyukai dunia open source. Memasak adalah salah satu hobinya diluar dunia IT. Pendiri Yumbaa dan Komunitaz ini juga adalah seorang blogger, menulis di berbagai situs termasuk komunitasweb. Mempunyai mimpi untuk memajukan dunia web Indonesia.
This entry was posted in Panduan and tagged , . Bookmark the permalink.

1 Tweet

2 Responses to Membuat Todo List Sederhana Dengan CodeIgniter

  1. twonno says:

    menggabungkan codeigniter dengan jquery gimana ya, apa aja yang diperlkan dan configurasinya seperti apa, kasih contohnya dunks

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Additional comments powered by BackType