Simple Notes App

If you are looking for Simple Notes App using JavaScript and PHP/MySQL then you are at the right place. This tutorial is more simplicity in the design as well as the usability of this app. Simple notes app it has a very simple functionality which the insert and delete function.

You can also check the live demo of this simple tutorial, so you can get an idea and you can try this out, let's start coding.

⚙ Live Demo

Simple Notes App - Procedure

We are going to use the jQuery, Ajax, and PHP to do this simple program.

Those are the steps.

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

Creating Table then the Markup

1. CREATE
   
   TABLE
   
   `notes`
   
   (
   
2. `id`
   
   INT
   
   (
   
   11
   
   )
   
   NOT
   
   NULL
   
   ,
   
3. `description`
   
   text NOT
   
   NULL
   
   ,
   
4. `date_added`
   
   datetime NOT
   
   NULL
   
5. )
   
   ENGINE=
   
   InnoDB DEFAULT
   
   CHARSET=
   
   latin1;
   

This is the source code for the Markup

1. <div
   
   class
   
   =
   
   "col-md-1"
   
   style
   
   =
   
   "margin:0 auto; float:none; margin-top:60px; margin-bottom:50px"
   
   >
   
2. <div
   
   class
   
   =
   
   "col-md-1 events-lists-block"
   
   >
   
3. <div
   
   class
   
   =
   
   "cal-day"
   
   >
   
4. <span
   
   >
   
   Date Today</
   
   span
   
   >
   
5. <?php echo date(
   
   'M d, Y h:i:s A l'
   
   ,strtotime(
   
   '+6 hour'
   
   )
   
   )
   
   ;?>
   
6. </
   
   div
   
   >
   
7. <ul
   
   class
   
   =
   
   "event-list"
   
   >
   
8. <?php load_notes(
   
   )
   
   ; ?>
   
9. </
   
   ul
   
   >
   
10. <input
    
    type
    
    =
    
    "text"
    
    class
    
    =
    
    "form-control evnt-input"
    
    placeholder=
    
    "Enter your notes . . . . ."
    
    autofocus=
    
    "autofocus"
    
    /
    
    >
    
11. </
    
    div
    
    >
    
12. </
    
    div
    
    >
    

Output



⚙ Live Demo

For the full source code, kindly click the "Download Code" button below. Hope that this tutorial will help you a lot.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Download