Hi friends i would like to thankful for the html5. It has many syntactical  features that every programmer know. Drag and drop is one of the great feature that user can drag the object and place it any location. Today i am sharing something interesting, this tutorial is focused on sticky notes where user can create and stick multiple sticky notes with different colors on dashboard. Sticky notes are useful for the user to track their day to day work and activities. This application is bulit on using JQuery, Ajax, Php, Json, and MySql. We also used Jquery UI and Bootstrap Css framework.

Features :

• 1. User Registration.
• 2. User Login.
• 3. Create single or multiple sticky note and stick on the dashboard.
• 4. Sticky note created with different colors.
• 5. Drag the sticky note and placed it on any position.
• 6. Delete the created sticky notes.

Files include :

• - Bootstrap css and js
• - Jquery UI Framework
• - Jquery nice css and js
• - sticky.js
• - index.php
• - add.php
• - save.php
• - authentication.php
• - registeration.php
• - config.php
• - dashboard.php
• - footer.php
• - header.php
• - logout.php

Jquery:

function getText(id){
	var popover = $('#pop-'+id);
	var id =id;
	var text = $("#"+id).val();

	 position = $('#draggable-'+id).attr("style");
	data = {
            id: id,
			text: text
             };
	 $.ajax({
      url: "save.php",
      type: "post",
      data: data,
      success: function(datas){
		  popover.popover('destroy').popover({
			  		title: 'Edit ×',
                       content: $('#popoverContent'+id).html(datas.other), 
                    })
                    .popover('show');		
		   $('#content-'+id).html(datas.data);
		 // $('.success_msg').show().fadeIn(2000).fadeOut(4000);
		 jQuery.HP({
		title : "Success!",
        message: "saved...!"
      });
      },
      error:function(){
         jQuery.HP.error({
		title : "Fail!",
        message: "Error in saving...!"
      });
      }   
    }); 
}

PHP:

//--- Authenticate code begins here ---
session_start();
//checks if the login session is true
if(!$_SESSION['username']){
header("location:index.php");
}
$username = $_SESSION['username'];
if (isset($_POST['note'])) { $note = $_POST['note'];  } ;
 if (isset($_POST['color'])) { $color = $_POST['color'];  } ;
 if (isset($_REQUEST['delete'])) { $delete = $_REQUEST['delete'];  } ;


if(isset($note)) 
{
$query = mysqli_query($con,"INSERT INTO sticky_notes (username, message, color) VALUES ('$username', '$note', '$color')");
}

if(isset($delete)) 
{
$success = mysqli_query($con,"DELETE FROM sticky_notes WHERE id='$delete'");
}
$document_get = mysqli_query($con,"SELECT * FROM users WHERE email='$username'");
$match_value = mysqli_fetch_array($document_get,MYSQLI_ASSOC);
$fullname = $match_value['fullname'];

By Thirumani Raj posted on - 6th Mar 2016

Live Demo Download Script