PHP & AJAX Web Sticky Notes

Submitted by rinvizle on Monday, September 12, 2016 - 08:27.
In this tutorial we will show you a PHP and AJAX Web Sticky Notes system. This project is written in PHP and AJAX. The purpose of this project is to give the user's ability to create notes in the web with a live preview in the screen. Every notes that the user created it will automatically saved in the database by using of AJAX.

Sample Code

Index.php - This script is for calling the variable name by running a query against the output and database.
  1. <?php
  2. error_reporting(E_ALL^E_NOTICE);
  3. require 'connect.php';
  4.  
  5. mysql_query("DELETE FROM message WHERE id>3 AND dt<SUBTIME(NOW(),'0 1:0:0')");
  6.         $query = mysql_query("SELECT * FROM messages ORDER BY id DESC");
  7.         $notes = '';
  8.         $left='';
  9.         $top='';
  10.         $zindex='';
  11.  
  12. while($row=mysql_fetch_assoc($query))
  13. {
  14.         list($left,$top,$zindex) = explode('x',$row['xyz']);
  15.         $notes.= '<div class="note '.$row['color'].'" style="left:'.$left.'px;top:'.$top.'px;z-index:'.$zindex.'">
  16.                 '.htmlspecialchars($row['text']).'
  17.                 <div class="author">'.htmlspecialchars($row['name']).'</div>
  18.                 <span class="data">'.$row['id'].'</span>
  19.         </div>';
  20. }
  21. ?>
Post.php - This file is for the displaying the notes in a live preview form after you created a note.
  1. <?php
  2. error_reporting(E_ALL^E_NOTICE);
  3. require "../connect.php";
  4.  
  5. if(!is_numeric($_POST['zindex']) || !isset($_POST['author']) || !isset($_POST['body']) || !in_array($_POST['color'],array('yellow','white','red','green','blue')))
  6. die("0");
  7.  
  8. if(ini_get('magic_quotes_gpc'))
  9. {
  10.         $_POST['author']=stripslashes($_POST['author']);
  11.         $_POST['body']=stripslashes($_POST['body']);
  12. }
  13.         $author = mysql_real_escape_string(strip_tags($_POST['author']));
  14.         $body = mysql_real_escape_string(strip_tags($_POST['body']));
  15.         $color = mysql_real_escape_string($_POST['color']);
  16.         $zindex = (int)$_POST['zindex'];
  17.  
  18. mysql_query('   INSERT INTO messages (text,name,color,xyz)
  19.                                 VALUES ("'.$body.'","'.$author.'","'.$color.'","0x0x'.$zindex.'")');
  20. if(mysql_affected_rows($link)==1)
  21. {
  22.         echo mysql_insert_id($link);
  23. }
  24. else echo '0';
  25. ?>
result Index.php Html Form - This is for the index.php html form script for the UI design in the page.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>PHP and AJAX Web Sticky Notes</title>
  5.         <script type="text/javascript" src="js/jquery.min.js"></script>
  6.         <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  7.         <script type="text/javascript" src="js/jquery.fancybox.js"></script>
  8.         <link rel="stylesheet" type="text/css" href="js/jquery.fancybox.css" media="screen" />
  9.         <link rel="stylesheet" type="text/css" href="styles.css" />
  10.         <script type="text/javascript" src="script.js"></script>
  11. </head>
  12. <body>
  13. <div class="head">
  14.         <h1>PHP and AJAX Web Sticky Notes</h1>
  15. </div>
  16. <a id="addButton" class="button" href="add_note.html"><button class="primary">Add Note</button></a><br/><br/><br/>
  17. <div id="main">
  18.         <?php echo $notes ?>
  19. </div>
  20. <div>
  21.         <footer align="center"><a href="sourcecodester.com">Sourcecodester 2016</a></footer>
  22. </div>
  23. </body>
  24. </html>
Hope that you learn from this tutorial and don't forget to Like & Share this project and the website. Enjoy Coding...!
Tags
#PHP
AJAX
Notes

Comments

Submitted by Manjula Rathnasiri (not verified) on Fri, 04/28/2017 - 12:36

Hey Rinvizle, thank you so much for this script. I'm still learning code so I'm experimenting around. I have a php app im experimenting with so I've its login system. I want to make these notes viewable only to the poster, its more like personal notes. If so how do I set up the database? Any help would be appriciated Thank you

Submitted by Manjula Rathnasiri (not verified) on Wed, 05/03/2017 - 13:28

I figured out how to set up the session. Now the only part that confuses me is how exactly do i connect this to the mysql database? I've created a DB called notes, what tables do I create, what properties do I give them? Any clarification would be great. Thank you