Angular Js TODO App Example With Bootstrap And PHP MySQL
- With Code Example
- March 13, 2024
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.
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.
Demo — https://serene-plateau-17761.herokuapp.com/
Installation Process:
- 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
- Change the directory into
angularjs-todo-app
by the following command —cd angularjs-todo-app
- Import the database using the file ngTodo.sql located in the root directory of the project.
- Connect to your database by editing the file located in the /api/application/config/database.
- Run the application by
http://localhost/angularjs-todo-app
- If everything is correct then it will show the screen as above image.
- Now you can Create, Edit, Update and Delete the records,
- Contact if facing an issue — [email protected]
- 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)
);