Codeigniter todo application

Hello, I am providing the tutorial for todo appilcation using codeigniter 3, angular js and bootstrap. This tutorial is helful for begginers to learn and implement the technologies used.

Features 

Application provides responsive interface to create, edit, delete and mark as complete task with little animation. For demo please watch video or visit to the application link for demo Click Here

This application is avaliable on github you can download code. Click here 

Installation Process

  1. Clone the project to your local server directories such as htdocs (if using xampp) or www (if using wamp) from GitHub by running the following command?—?“git clone https://github.com/harendra21/angularjs-todo-app”
  2. Change directory into angularjs-todo-app by the following command?—?“cd angularjs-todo-app”
  3. Run the following command to install node package manager dependencies?—?“npm install”
  4. Import the database using the file ngTodo.sql located in the root directory of the project.
  5. Connect to your database by editing the file located in the /api/application/config/database.
  6. Run the application by “http://localhost/angularjs-todo-app”
  7. If everything is correct then it will show the screen as above image.
  8. Now you can Create, Edit, Update and Delete the records,
  9. Contact if facing an issue?—?harendraverma21@gmail.com
  10. Enjoy !

Create Database

run following query to create database and table to store data.

CREATE DATABASE /*!32312 IF NOT EXISTS*/`ngtodo` /*!40100 DEFAULT CHARACTER SET latin1 */;
USE `ngtodo`;
/*Table structure for table `task` */
DROP TABLE IF EXISTS `task`;
CREATE TABLE `task` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) DEFAULT NULL,
  `status` varchar(255) DEFAULT NULL,
  `description` text,
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `updated_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=latin1;

Database configuration

To change database setting for your application it required to edit `/application/config/database.php` file 

<?php
defined('BASEPATH') or exit('No direct script access allowed');

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
	'dsn'	=> '',
	 'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'ngTodo',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

/application/controllers/TaskCtrl.php if used to intract with the application

<?php


defined('BASEPATH') or exit('No direct script access allowed');

class TaskCtrl extends CI_Controller
{

    public function index()
    {
        $this->load->view('home');
    }

    public function add_update_task()
    {
        $json = file_get_contents('php://input');
        $data = json_decode($json, TRUE);


        $id = $data['id'];
        $title = $data['title'];
        $status = $data['status'];
        $description = $data['description'];
        $data_array = array(
            'title' => $title,
            'status' => $status,
            'description' => $description
        );
        if (empty($id)) {
            $this->db->insert('task', $data_array);
        } else {
            $this->db->where('id', $id);
            $this->db->update('task', $data_array);
        }

        echo '1';
    }

    public function get_task()
    {
        $data = $this->db->where('status !=', 'delete')->order_by('id', 'DESC')->get('task');
        if ($data->num_rows() > 0) {
            print_r(json_encode($data->result_array()));
        }
    }

    public function action_task()
    {
        $json = file_get_contents('php://input');
        $data = json_decode($json, TRUE);


        $id = $data['formData']['id'];
        $data_array = array(
            'title' => $data['formData']['title'],
            'status' => $data['action'],
            'description' => $data['formData']['description']
        );

        $this->db->where('id', $id);
        $this->db->update('task', $data_array);
    }
}

/public/src/app.js is used to intract with tahe backend of the application

var app = angular.module("myApp", ["ngRoute"]);

app.constant("BASEURL", base_url);

app.config(function ($routeProvider) {
  $routeProvider
    .when("/home", {
      templateUrl: "public/views/home.html",
      controller: "HomeCtrl",
    })
    .otherwise({
      redirectTo: "/home",
    });
});

app.filter("capitalize", function () {
  return function (input) {
    return !!input
      ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase()
      : "";
  };
});

app.controller("mainCtrl", function () {});
app.controller("HomeCtrl", [
  "$scope",
  "BASEURL",
  "$http",
  function ($scope, BASEURL, $http) {
    $scope.addTask = false;
    $scope.pageTitle = "Tasks";
    $scope.tasks = "";
    $scope.addBtn = true;

    $scope.addTaskClick = function (val) {
      $scope.addTask = val;
      $scope.task = {};
    };

    $scope.getTasks = function () {
      $http({
        method: "get",
        url: BASEURL + "get-task",
      }).then(
        function mySuccess(response) {
          $scope.tasks = response.data;
        },
        function myError(response) {}
      );
    };

    $scope.addUpdateTask = function (formData) {
      $http({
        method: "POST",
        url: BASEURL + "add-update-task",
        data: formData,
        headers: { "Content-Type": "application/json" },
      }).then(
        function mySuccess(response) {
          $scope.getTasks();
        },
        function myError(response) {}
      );
      $scope.addBtn = true;
      $scope.task = {};
      $scope.addTask = false;
    };

    $scope.editTask = function (data) {
      $scope.addTask = true;
      $scope.addBtn = false;
      $scope.task = data;
    };

    $scope.reset = function () {
      $scope.addBtn = true;
      $scope.task = {};
    };

    $scope.action = function (formData, action) {
      var data = { formData: formData, action: action };
      $http({
        method: "POST",
        url: BASEURL + "action-task",
        data: data,
        headers: { "Content-Type": "application/json" },
      }).then(
        function mySuccess(response) {
          $scope.getTasks();
        },
        function myError(response) {}
      );
      $scope.addBtn = true;
      $scope.task = {};
    };
  },
]);

/public/views/home.html is used to show data in frontend 

<div class="well text-center">
    <h2><b><i class="fa fa-list text-success" aria-hidden="true"></i> <span class="text-success">TASK</span>
            <i>Manager</i></b></h2>
    <p>Keep your work up to date.</p>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 text-right">
            <br>
            <button class="btn btn-primary btn-sm" ng-if="!addTask" ng-click="addTaskClick(true)"><i class="fa fa-plus"
                    aria-hidden="true">
                </i> Add New
                Task</button>
            <button class="btn btn-danger btn-sm" ng-if="addTask" ng-click="addTaskClick(false)"><i class="fa fa-minus"
                    aria-hidden="true">
                </i> Close</button>
            <br>
        </div>
        <div class="col-sm-12 animate__animated animate__backInDown" ng-if="addTask">
            <div class="card">
                <div class="card-body">
                    <form class="form-group">
                        <div class="form-group row">
                            <div class="col-sm-6">
                                <label>Task Title : </label>
                                <input type="hidden" ng-model="task.id">
                                <input type="text" class="form-control" ng-model="task.title">
                            </div>
                            <div class="col-sm-6">
                                <label>Task Status : </label>
                                <select class="form-control" ng-model="task.status">
                                    <option value="assigned">Assigned</option>
                                    <option value="pending">Pending</option>
                                    <option value="running">Running</option>
                                    <option value="complete">Complete</option>
                                    <option value="incomplete">Incomplete</option>
                                </select>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col">
                                <label>Task Description : </label>
                                <textarea class="form-control" ng-model="task.description"></textarea>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col text-right">
                                <button class="btn btn-danger btn-sm" ng-click="reset()"><i class="fa fa-eraser"
                                        aria-hidden="true"></i> Clear</button>
                                <button ng-show="addBtn" class="btn btn-primary btn-sm"
                                    ng-click="addUpdateTask(task)"><i class="fa fa-plus-square" aria-hidden="true"></i>
                                    Add Task</button>
                                <button ng-show="!addBtn" class="btn btn-success btn-sm"
                                    ng-click="addUpdateTask(task)"><i class="fa fa-pencil-square-o"
                                        aria-hidden="true"></i> Update Task</button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
        <br><br>
        <div class="col-sm-12 animate__animated animate__backInDown" ng-init="getTasks()" ng-if="!addTask">
            <div class="row">
                <div class="col-sm-12" ng-if="tasks.length > 0" ng-repeat="task in tasks">
                    <div class="card">

                        <div class="card-body">

                            <div class=" pull-right">
                                <button class="btn btn-success btn-sm" ng-click="action(task,'complete')"><i
                                        class="fa fa-check-circle-o" aria-hidden="true"></i></button>

                                <button class="btn btn-primary btn-sm" ng-click="editTask(task)"><i
                                        class="fa fa-pencil-square-o" aria-hidden="true"></i></button>

                                <button class="btn btn-danger btn-sm" ng-click="action(task,'delete')"><i
                                        class="fa fa-trash-o" aria-hidden="true"></i></button>
                            </div>

                            <b>{{ task.title }}</b>
                            <small>( {{ task.status | capitalize}} )</small>
                            <p>{{ task.description }}</p>
                        </div>
                    </div>
                    <br>
                </div>
                <div class="col-sm-12 text-center" ng-if="tasks.length == 0">
                    <b>No record found</b>
                </div>
            </div>
        </div>
    </div>
</div>

Thank you!

Categories