├── README.md ├── database.sql ├── dbconn.php ├── index.php └── update_item_status.php /README.md: -------------------------------------------------------------------------------- 1 | # jquery-drag-drop-todo-List-with-php-mysql 2 | 3 | Programmer Blog: http://programmerblog.net 4 | 5 | Source code for Programmer blog article: https://programmerblog.net/jquery-drag-drop-todo-list-php-mysql/ 6 | 7 | 8 | Following tasks are performed in this tutorial 9 | 10 | 11 | 1. Create a MySQL database and database table for todo list items 12 | 13 | 2. PHP code to connect to database. 14 | 15 | 3. Create php code to fetch incomplete and complete todo list items 16 | 17 | 4. Display records on page in incomplete todo list items to the left side of page. 18 | 19 | 5. Incomplete list items will be draggable. 20 | 21 | 6. Complete list items will be displayed to the right side of the page. 22 | 23 | 7. Completed list item area will be droppable. 24 | 25 | 8. Add drag and drop jQuery code. 26 | 27 | 9. After the item is dragged send an AJAX request to update status of list item as completed. 28 | -------------------------------------------------------------------------------- /database.sql: -------------------------------------------------------------------------------- 1 | #Database SQL Script 2 | 3 | CREATE DATABASE test; 4 | 5 | CREATE TABLE `listitems` ( 6 | 7 | `id` int(11) NOT NULL, 8 | 9 | `name` varchar(100) NOT NULL, 10 | 11 | `detail` varchar(400) NOT NULL, 12 | 13 | `is_completed` enum('yes','no') 14 | 15 | NOT NULL DEFAULT 'no' ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1; 16 | 17 | ALTER TABLE `listitems` ADD PRIMARY KEY (`id`); 18 | 19 | -- -- Dumping data for table `listitems` -- 20 | 21 | INSERT INTO `listitems` (`id`, `name`, `detail`, `is_completed`) 22 | 23 | VALUES (1, 'Shopping', 'Go for shopping on weekend', 'no'), 24 | 25 | (2, 'Watch Movie', 'After Shopping, go to Cinema and watch movie', 'no'), 26 | 27 | (3, 'Buy Books', 'Buy books from market', 'no'), 28 | 29 | (4, 'Go for Running', 'In morning go out to park for running', 'no'), 30 | 31 | (5, 'Cooking', 'Do cooking this weekend', 'no'), 32 | 33 | (6, 'Write and Article', 'Write an article for the blog', 'no'); 34 | -------------------------------------------------------------------------------- /dbconn.php: -------------------------------------------------------------------------------- 1 | connect_error) { 15 | die("Connection to database failed: " .$conn->connect_error); 16 | } -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | jQuery Drag and Drop TODO List with PHP MySQL 40 | 41 | 42 | 43 | 67 | 68 | 69 | 70 | 71 |

jQuery Drag and Drop TODO List with PHP MySQL

72 |
73 | 74 | $item) { ?> 75 | 76 |
> 77 | 78 |

79 | 80 |
81 | 82 |

83 | 84 |
85 | 86 | 87 | 88 |
89 | 90 |
91 | 92 | $citem) { ?> 93 | 94 |
95 | 96 |

97 | 98 |
99 | 100 |

101 | 102 |
103 | 104 | 105 | 106 |
107 | 108 | 109 | 110 | 111 | 112 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /update_item_status.php: -------------------------------------------------------------------------------- 1 | query($sql); 13 | 14 | $conn->close(); 15 | 16 | //send a JSON encded array to client 17 | 18 | echo json_encode(array('success'=>1)); --------------------------------------------------------------------------------