Angular Js TODO App Example With Bootstrap And PHP MySQL

Create a feature-rich TODO app using Angular JS and Bootstrap

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

todo-ootodttt_zaCFym68_15468911447248360158.jpg

Angular Js TODO app

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. 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. Click here to read more.

Demohttps://serene-plateau-17761.herokuapp.com/

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 the 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
  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!

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