Home / Ajax / Simple notes app using jQuery, Ajax and PHP

Simple notes app using jQuery, Ajax and PHP

No wonder there is a huge list on notes app with amazing designs on the internet. Having in mind their functionality I’m writing a tutorial on the same with more simplicity in the design as well as the usability. This app will have a very simple insert and delete functionality and can be easily integrated into any other web app as it depends only on jQuery plugin and slimScroll library.

Notes app – Procedure

We will be using jquery, ajax and php to do all the operations using JSON

The steps are very straight forward.

1. The Markup for notes
2. The CSS design
3. The PHP Script for functionality and
4. The Javascript (jQuery + Ajax)

Lets get started by creating a table and then the Markup

The Markup is very simple

The CSS is pretty much easy we don’t need to see them here. Have a look in the downloaded file. Let us give a deep thought to the jQuery and PHP script. The whole process is split into three parts for easy understanding.

Step1: Apply the slimscroll to the event-list class using the slimscroll()

Now that we have our layout ready with a beautiful crispy CSS and slimscroll embedded to the list area, we need to identify if the user has pressed enter key. If pressed then we need to pass the text to the PHP file which will do the rest.

Step 2A: Feed the information to the database

Step 2B : Get the data from ajax and process to achieve mentioned in Step 2A using PHP

Now that we have set up the data insertion properly lets see how to delete a specific note!

Step 3A : Send delete request from ajax

Step 3B : Get the ID of the note and delete it

That’s it! You can play with the design and achieve a lot more using jQuery. Ideas aren’t limited…

Download   Preview

About Ashik

I am a Full Stack Developer and love to work on APIs and Apps. Hardcore lover of Ionic and Laravel <3

Check Also

Weather forecast API using jQuery, Ajax and PHP

Weather forecast API is widely used as widgets in small blogs to huge news website …

Do you wan't to get notified?

I will not spam your inbox. I will only send email whenever I publish a new article or to share information about technology

You have Successfully Subscribed!