logo
Published on

Angular Js TODO app example with Bootstrap and PHP MySQL

featured Image
Authors

Here I am with an awesome todo app built using AngularJS, Bootstrap, PHP (Codeigniter 3 framework)and MySql Database to manage the tasks and keep tracking the status of the task.

Angular JS

AngularJS is a JavaScript-based open-source front-end web framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.

Why AngularJS

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. click here for more details

Codeigniter

CodeIgniter is a PHP MVC framework used for developing web applications rapidly. CodeIgniter provides out of the box libraries for connecting to the database and performing various operations like sending emails, uploading files, managing sessions, etc.

Why Codeigniter

CodeIgniter lets you creatively focus on your project by minimizing the amount of code needed for a given task. Codeigniter Development is one of the best PHP framework in web Application Development. … As compared to the other frameworks, Codeigniter Development is fast, reliable, its time and speed is significant. Click here to read more

Angular Firbase Crud App
_Edit description_serene-plateau-17761.herokuapp.com

Demo

Click here for demo

Add Task

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. Import the database using the file ngTodo.sql located in the root directory of the project.
  4. Connect to your database by editing the file located in the /api/application/config/database.
  5. Run the application by “http://localhost/[angularjs-todo-app](https://github.com/harendra21/angularjs-todo-app)”
  6. If everything is correct then it will show the screen as above image.
  7. Now you can Create, Edit, Update and Delete the records,
  8. Contact if facing an issue — [email protected]
  9. Enjoy !

Watch video for demo

Watch video for demo

Database

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`)
);

Thanks you for reading !