40 |
41 | 62 | created: 63 |
├── img ├── f.png └── Ellipsis.gif ├── README.md ├── db_conn.php ├── app ├── remove.php ├── add.php └── check.php ├── DB__to_do_list.sql ├── css └── style.css ├── index.php └── js └── jquery-3.2.1.min.js /img/f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingWithElias/php-to-do-list/HEAD/img/f.png -------------------------------------------------------------------------------- /img/Ellipsis.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingWithElias/php-to-do-list/HEAD/img/Ellipsis.gif -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## PHP (PDO), MYSQL and JQuery AJAX Full Project from Scratch. 2 | 3 | ► Subscribe Us: 4 | https://www.youtube.com/codingwithelias?sub_confirmation=1 5 | -------------------------------------------------------------------------------- /db_conn.php: -------------------------------------------------------------------------------- 1 | setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 12 | }catch(PDOException $e){ 13 | echo "Connection failed : ". $e->getMessage(); 14 | } -------------------------------------------------------------------------------- /app/remove.php: -------------------------------------------------------------------------------- 1 | prepare("DELETE FROM todos WHERE id=?"); 12 | $res = $stmt->execute([$id]); 13 | 14 | if($res){ 15 | echo 1; 16 | }else { 17 | echo 0; 18 | } 19 | $conn = null; 20 | exit(); 21 | } 22 | }else { 23 | header("Location: ../index.php?mess=error"); 24 | } -------------------------------------------------------------------------------- /app/add.php: -------------------------------------------------------------------------------- 1 | prepare("INSERT INTO todos(title) VALUE(?)"); 12 | $res = $stmt->execute([$title]); 13 | 14 | if($res){ 15 | header("Location: ../index.php?mess=success"); 16 | }else { 17 | header("Location: ../index.php"); 18 | } 19 | $conn = null; 20 | exit(); 21 | } 22 | }else { 23 | header("Location: ../index.php?mess=error"); 24 | } -------------------------------------------------------------------------------- /app/check.php: -------------------------------------------------------------------------------- 1 | prepare("SELECT id, checked FROM todos WHERE id=?"); 12 | $todos->execute([$id]); 13 | 14 | $todo = $todos->fetch(); 15 | $uId = $todo['id']; 16 | $checked = $todo['checked']; 17 | 18 | $uChecked = $checked ? 0 : 1; 19 | 20 | $res = $conn->query("UPDATE todos SET checked=$uChecked WHERE id=$uId"); 21 | 22 | if($res){ 23 | echo $checked; 24 | }else { 25 | echo "error"; 26 | } 27 | $conn = null; 28 | exit(); 29 | } 30 | }else { 31 | header("Location: ../index.php?mess=error"); 32 | } -------------------------------------------------------------------------------- /DB__to_do_list.sql: -------------------------------------------------------------------------------- 1 | -- phpMyAdmin SQL Dump 2 | -- version 4.9.0.1 3 | -- https://www.phpmyadmin.net/ 4 | -- 5 | -- Host: 127.0.0.1 6 | -- Generation Time: Mar 01, 2020 at 06:55 AM 7 | -- Server version: 10.4.6-MariaDB 8 | -- PHP Version: 7.3.9 9 | 10 | SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; 11 | SET AUTOCOMMIT = 0; 12 | START TRANSACTION; 13 | SET time_zone = "+00:00"; 14 | 15 | 16 | /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; 17 | /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; 18 | /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; 19 | /*!40101 SET NAMES utf8mb4 */; 20 | 21 | -- 22 | -- Database: `to_do_list` 23 | -- 24 | 25 | -- -------------------------------------------------------- 26 | 27 | -- 28 | -- Table structure for table `todos` 29 | -- 30 | 31 | CREATE TABLE `todos` ( 32 | `id` int(11) NOT NULL, 33 | `title` text NOT NULL, 34 | `date_time` datetime NOT NULL DEFAULT current_timestamp(), 35 | `checked` tinyint(1) NOT NULL DEFAULT 0 36 | ) ENGINE=InnoDB DEFAULT CHARSET=latin1; 37 | 38 | -- 39 | -- Indexes for dumped tables 40 | -- 41 | 42 | -- 43 | -- Indexes for table `todos` 44 | -- 45 | ALTER TABLE `todos` 46 | ADD PRIMARY KEY (`id`); 47 | 48 | -- 49 | -- AUTO_INCREMENT for dumped tables 50 | -- 51 | 52 | -- 53 | -- AUTO_INCREMENT for table `todos` 54 | -- 55 | ALTER TABLE `todos` 56 | MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=30; 57 | COMMIT; 58 | 59 | /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; 60 | /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; 61 | /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; 62 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #34495e; 3 | } 4 | 5 | * { 6 | padding: 0px; 7 | margin: 0px; 8 | box-sizing: border-box; 9 | } 10 | 11 | .main-section { 12 | background: transparent; 13 | max-width: 500px; 14 | width: 90%; 15 | height: 500px; 16 | margin: 30px auto; 17 | border-radius: 10px; 18 | } 19 | 20 | .add-section { 21 | width: 100%; 22 | background: #fff; 23 | margin: 0px auto; 24 | padding: 10px; 25 | border-radius: 5px; 26 | } 27 | 28 | .add-section input { 29 | display: block; 30 | width: 95%; 31 | height: 40px; 32 | margin: 10px auto; 33 | border: 2px solid #ccc; 34 | font-size: 16px; 35 | border-radius: 5px; 36 | padding: 0px 5px; 37 | } 38 | 39 | .add-section button { 40 | display: block; 41 | width: 95%; 42 | height: 40px; 43 | margin: 0px auto; 44 | border: none; 45 | outline: none; 46 | background: #0088FF; 47 | color: #fff; 48 | font-family: sans-serif; 49 | font-size: 16px; 50 | border-radius: 5px; 51 | cursor: pointer; 52 | } 53 | 54 | .add-section button:hover { 55 | box-shadow: 0 2px 2px 0 #ccc, 0 2px 3px 0 #ccc; 56 | opacity: 0.7; 57 | } 58 | 59 | .add-section button span { 60 | border: 1px solid #fff; 61 | border-radius: 50%; 62 | display: inline-block; 63 | width: 18px; 64 | height: 18px; 65 | } 66 | 67 | #errorMes { 68 | display: block; 69 | background: #f2dede; 70 | width: 95%; 71 | margin: 0px auto; 72 | color: rgb(139, 19, 19); 73 | padding: 10px; 74 | height: 35px; 75 | } 76 | 77 | .show-todo-section { 78 | width: 100%; 79 | background: #fff; 80 | margin: 30px auto; 81 | padding: 10px; 82 | border-radius: 5px; 83 | } 84 | 85 | .todo-item { 86 | width: 95%; 87 | margin: 10px auto; 88 | padding: 20px 10px; 89 | box-shadow: 0 4px 8px 0 #ccc, 0 6px 20px 0 #ccc; 90 | border-radius: 5px; 91 | } 92 | 93 | .todo-item h2 { 94 | display: inline-block; 95 | padding: 5px 0px; 96 | font-size: 17px; 97 | font-family: sans-serif; 98 | color: #555; 99 | } 100 | 101 | .todo-item small { 102 | display: block; 103 | width: 100%; 104 | padding: 5px 0px; 105 | color: #888; 106 | padding-left: 30px; 107 | font-size: 14px; 108 | font-family: sans-serif; 109 | } 110 | 111 | .remove-to-do { 112 | display: block; 113 | float: right; 114 | width: 20px; 115 | height: 20px; 116 | font-family: sans-serif; 117 | color: rgb(139, 97, 93); 118 | text-decoration: none; 119 | text-align: right; 120 | padding: 0px 5px 8px 0px; 121 | border-radius: 50%; 122 | transition: background 1s; 123 | cursor: pointer; 124 | } 125 | 126 | .remove-to-do:hover { 127 | background: rgb(139, 97, 93); 128 | color: #fff; 129 | } 130 | 131 | .checked { 132 | color: #999 !important; 133 | text-decoration: line-through; 134 | } 135 | 136 | .todo-item input { 137 | margin: 0px 5px; 138 | } 139 | 140 | .empty { 141 | font-family: sans-serif; 142 | font-size: 16px; 143 | text-align: center; 144 | color: #cccc; 145 | } -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |
7 | 8 | 9 | 10 |
40 |
41 |