Ajax Todo List system with Codeigniter
Category:Ajax applications::Todo List Category:Contributions::Applications::Todo List Category:Tutorials::Todo List
Ajax Todo List system with Codeigniter Part 1
Ajax Todo List system with Codeigniter Part 2
I am going to write how to create an ajax message/todo system with Codeigniter. All the following features will be done with Ajax. And the message will be stored in a database.There will be Todo list and Completed list loaded with jquery.
Adding a todo list without page reload.
Clicking a link in a todo list will change to a completed list.
The list clicked will slide up and removed. The completed list will fade out and fade in with a new list added from todo list.
There will be the same button in a completed list. This will change the status from complete to todo. It will slide up and removed. Todo list will fade out and in with a list from the completed list.
Delete button will be added in completed lists. When you click this, it will be removed from the database and it will slide up and removed.
(click to enlarge)
There will be three parts to develop this system.
Setting up Codeigniter and BackendPro.
Create message system with codeigniter. It should work without js.
Add jquery ajax.
It will be too long to cover all of these. I will cover the first two in this entry and the last one will be the next time.
You can find a quite few login systems in Codeigniter wiki. So far I like BackendPro and Pyrocms. I will use BackendPro for the login system.
Download Codeigniter ,BackendPro and install them. You can find here how to install the BackendPro.
However this is what I did on my localhost. I am using XAMPP.
Create a folder called ci_bep like this C:\xampp\htdocs\ci_bep.Unzip the Codeigniter in this folder.
Unzip the BackendPro and move all the folders in C:\xampp\htdocs\ci_bep as well.
Create a database called ci_bep or any name as you like.
Go to http://127.0.0.1/ci_bep/install/ or http://localhost/ci_bep/install/ and proceed the installation process.
Enter your database details, User account and reCAPTCHA information if you wish. You can get your public and private key here. I am not using this in this tutorial so you can skip it if you like.
Click INSTALL BACKENDPRO at the bottom. That's it.
Use your email and password which you entered during the installation to login the BackendPro.
... ... ...