├── .DS_Store ├── assets ├── images │ ├── like.png │ └── unlike.png ├── css │ └── style.css └── js │ ├── main.js │ └── jquery-3.2.1.min.js ├── includes └── db.php ├── login ├── errors.php ├── server.php ├── login.php └── style.css ├── get-like-unlike.php ├── comment-list.php ├── comment-add.php ├── README.md ├── comment-like-unlike.php ├── index.php └── phpsamples.sql /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vildanbina/php-comment-system/HEAD/.DS_Store -------------------------------------------------------------------------------- /assets/images/like.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vildanbina/php-comment-system/HEAD/assets/images/like.png -------------------------------------------------------------------------------- /assets/images/unlike.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vildanbina/php-comment-system/HEAD/assets/images/unlike.png -------------------------------------------------------------------------------- /includes/db.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /login/errors.php: -------------------------------------------------------------------------------- 1 | 0) : ?> 2 |
3 | 4 | 5 | 8 | 9 | 10 | 11 | 12 |
13 | -------------------------------------------------------------------------------- /get-like-unlike.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /comment-list.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /comment-add.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PHP Comments System 2 | 3 | This comments system allows the user to add comments and to add replies to a particular comment added by some other user. Each comment and reply, it contains thumb icon that is shown to the user to add likes for the comments and replies. Initially, all the icons are in grey will represent that the comments and the replies have not yet been liked by the user. Once the user liked a comment by clicking the grey icon, then it turns to blue to update the status and the like count will also be updated. 4 | 5 | 6 | ## Getting Started 7 | 8 | The first thing we'll need to do is set up our database. 9 | Create a database called **phpsamples**. In source you have a sql file who you can export in your db to execute. 10 | And in 11 | ```inclues/db.php ``` 12 | enter your database config 13 | 14 | ## Authors 15 | 16 | * **Vildan Bina** - *Full Stack Developer* 17 | -------------------------------------------------------------------------------- /comment-like-unlike.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | 2 | .comment-form-container { 3 | background: #fff; 4 | border: #e0dfdf 1px solid; 5 | padding: 20px; 6 | border-radius: 2px; 7 | } 8 | 9 | .input-row { 10 | margin-bottom: 20px; 11 | } 12 | 13 | .input-field { 14 | width: 100%; 15 | border-radius: 2px; 16 | padding: 10px; 17 | border: #e0dfdf 1px solid; 18 | } 19 | 20 | .btn-submit { 21 | padding: 10px 20px; 22 | background: #333; 23 | border: #1d1d1d 1px solid; 24 | color: #f0f0f0; 25 | font-size: 0.9em; 26 | width: 100px; 27 | border-radius: 2px; 28 | cursor: pointer; 29 | } 30 | 31 | ul { 32 | list-style-type: none; 33 | } 34 | 35 | .comment-row { 36 | border-bottom: #e0dfdf 1px solid; 37 | margin-bottom: 15px; 38 | padding: 15px; 39 | } 40 | 41 | .outer-comment { 42 | padding: 10px; 43 | border: #dedddd 1px solid; 44 | background: #FFF; 45 | } 46 | 47 | span.commet-row-label { 48 | font-style: italic; 49 | } 50 | 51 | span.posted-by { 52 | color: #09F; 53 | } 54 | 55 | .comment-info { 56 | font-size: 0.8em; 57 | } 58 | 59 | .comment-text { 60 | margin: 10px 0px; 61 | } 62 | 63 | .btn-reply { 64 | font-size: 0.8em; 65 | text-decoration: underline; 66 | color: #888787; 67 | cursor: pointer; 68 | } 69 | 70 | #comment-message { 71 | margin-left: 20px; 72 | color: #189a18; 73 | display: none; 74 | } 75 | 76 | .like-unlike { 77 | vertical-align: text-bottom; 78 | cursor: pointer; 79 | } 80 | 81 | .post-action { 82 | margin-top: 15px; 83 | font-size: 0.8em; 84 | } 85 | span.posted-at { 86 | color: #929292; 87 | } 88 | 89 | footer{ 90 | background: #fff; 91 | position: fixed; 92 | left: 0; 93 | bottom: 0; 94 | width: 100%; 95 | text-align: center; 96 | } -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 | 17 | 18 | 19 | PHP Comment System with Like Unlike 20 | 21 | 23 | 24 | 25 |
26 | Logout 27 |

PHP Comment System with Like Unlike

28 |
29 |
30 |
31 | 32 |
33 |
34 | 35 |
36 |
37 | 38 |
Comments Added Successfully!
39 |
40 |
41 |
42 |
43 |
44 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /login/server.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /login/login.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Registration system PHP and MySQL 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Login

18 |
19 | 20 |

Click on button in image container

21 |
22 | 23 | 24 |
25 | 26 | 47 |
48 |
49 |
50 |
51 |

New here?

52 |

Sign up and discover great amount of new opportunities!

53 |
54 |
55 |

One of us?

56 |

If you already has an account, just sign in. We've missed you!

57 |
58 |
59 | Sign Up 60 | Sign In 61 |
62 |
63 |
64 | 81 |
82 |
83 |
84 | 85 | 90 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /phpsamples.sql: -------------------------------------------------------------------------------- 1 | -- phpMyAdmin SQL Dump 2 | -- version 4.8.3 3 | -- https://www.phpmyadmin.net/ 4 | -- 5 | -- Host: 127.0.0.1 6 | -- Generation Time: Nov 09, 2018 at 10:57 AM 7 | -- Server version: 10.1.36-MariaDB 8 | -- PHP Version: 7.2.11 9 | -- Author: Vildan Bina 10 | 11 | SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; 12 | SET AUTOCOMMIT = 0; 13 | START TRANSACTION; 14 | SET time_zone = "+00:00"; 15 | 16 | 17 | /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; 18 | /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; 19 | /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; 20 | /*!40101 SET NAMES utf8mb4 */; 21 | 22 | -- 23 | -- Database: `phpsamples` 24 | -- 25 | 26 | -- -------------------------------------------------------- 27 | 28 | -- 29 | -- Table structure for table `tbl_comment` 30 | -- 31 | 32 | CREATE TABLE `tbl_comment` ( 33 | `comment_id` int(11) NOT NULL, 34 | `parent_comment_id` int(11) DEFAULT NULL, 35 | `comment` varchar(200) NOT NULL, 36 | `comment_sender_name` varchar(40) NOT NULL, 37 | `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP 38 | ) ENGINE=InnoDB DEFAULT CHARSET=latin1; 39 | 40 | -- 41 | -- Dumping data for table `tbl_comment` 42 | -- 43 | 44 | INSERT INTO `tbl_comment` (`comment_id`, `parent_comment_id`, `comment`, `comment_sender_name`, `date`) VALUES 45 | (70, 0, ' hello from test', 'test', '2018-11-09 09:47:39'), 46 | (71, 70, 'Hello from vildanbina ', 'vildanbina', '2018-11-09 09:47:55'), 47 | (72, 71, 'hello from admin ', 'admin', '2018-11-09 09:48:05'), 48 | (73, 0, 'Admin test', 'admin', '2018-11-09 09:48:13'), 49 | (74, 73, 'Hi\r\n ', 'test', '2018-11-09 09:48:23'); 50 | 51 | -- -------------------------------------------------------- 52 | 53 | -- 54 | -- Table structure for table `tbl_like_unlike` 55 | -- 56 | 57 | CREATE TABLE `tbl_like_unlike` ( 58 | `id` int(11) NOT NULL, 59 | `member_id` int(11) NOT NULL, 60 | `comment_id` int(11) NOT NULL, 61 | `like_unlike` int(2) NOT NULL, 62 | `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP 63 | ) ENGINE=InnoDB DEFAULT CHARSET=latin1; 64 | 65 | -- 66 | -- Dumping data for table `tbl_like_unlike` 67 | -- 68 | 69 | INSERT INTO `tbl_like_unlike` (`id`, `member_id`, `comment_id`, `like_unlike`, `date`) VALUES 70 | (54, 9, 70, 1, '2018-11-09 09:47:50'), 71 | (55, 10, 71, 1, '2018-11-09 09:48:01'), 72 | (56, 10, 70, 1, '2018-11-09 09:48:06'), 73 | (57, 11, 73, 1, '2018-11-09 09:48:20'); 74 | 75 | -- -------------------------------------------------------- 76 | 77 | -- 78 | -- Table structure for table `tbl_users` 79 | -- 80 | 81 | CREATE TABLE `tbl_users` ( 82 | `id` int(11) NOT NULL, 83 | `username` varchar(100) NOT NULL, 84 | `email` varchar(100) NOT NULL, 85 | `password` varchar(100) NOT NULL 86 | ) ENGINE=InnoDB DEFAULT CHARSET=latin1; 87 | 88 | -- 89 | -- Dumping data for table `tbl_users` 90 | -- 91 | 92 | INSERT INTO `tbl_users` (`id`, `username`, `email`, `password`) VALUES 93 | (9, 'vildanbina', 'vildanbina@gmail.com', '3bbc42becf853333d46101900ce65da3'), 94 | (10, 'admin', 'admin@gmail.com', '21232f297a57a5a743894a0e4a801fc3'), 95 | (11, 'test', 'test@gmail.com', '098f6bcd4621d373cade4e832627b4f6'); 96 | 97 | -- 98 | -- Indexes for dumped tables 99 | -- 100 | 101 | -- 102 | -- Indexes for table `tbl_comment` 103 | -- 104 | ALTER TABLE `tbl_comment` 105 | ADD PRIMARY KEY (`comment_id`); 106 | 107 | -- 108 | -- Indexes for table `tbl_like_unlike` 109 | -- 110 | ALTER TABLE `tbl_like_unlike` 111 | ADD PRIMARY KEY (`id`); 112 | 113 | -- 114 | -- Indexes for table `tbl_users` 115 | -- 116 | ALTER TABLE `tbl_users` 117 | ADD PRIMARY KEY (`id`); 118 | 119 | -- 120 | -- AUTO_INCREMENT for dumped tables 121 | -- 122 | 123 | -- 124 | -- AUTO_INCREMENT for table `tbl_comment` 125 | -- 126 | ALTER TABLE `tbl_comment` 127 | MODIFY `comment_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=75; 128 | 129 | -- 130 | -- AUTO_INCREMENT for table `tbl_like_unlike` 131 | -- 132 | ALTER TABLE `tbl_like_unlike` 133 | MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=58; 134 | 135 | -- 136 | -- AUTO_INCREMENT for table `tbl_users` 137 | -- 138 | ALTER TABLE `tbl_users` 139 | MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12; 140 | COMMIT; 141 | 142 | /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; 143 | /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; 144 | /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; 145 | -------------------------------------------------------------------------------- /login/style.css: -------------------------------------------------------------------------------- 1 | *, *:before, *:after { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; background: #ededed; 9 | } 10 | 11 | input, button { 12 | border: none; 13 | outline: none; 14 | background: none; 15 | font-family: 'Open Sans', Helvetica, Arial, sans-serif; 16 | } 17 | 18 | .tip { 19 | font-size: 20px; 20 | margin: 40px auto 50px; 21 | text-align: center; 22 | } 23 | 24 | .cont { 25 | overflow: hidden; 26 | position: relative; 27 | width: 900px; 28 | height: 550px; 29 | margin: 0 auto 100px; 30 | background: #fff; 31 | } 32 | 33 | .form { 34 | position: relative; 35 | width: 640px; 36 | height: 100%; 37 | transition: -webkit-transform 1.2s ease-in-out; 38 | transition: transform 1.2s ease-in-out; 39 | transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out; 40 | padding: 50px 30px 0; 41 | } 42 | 43 | .sub-cont { 44 | overflow: hidden; 45 | position: absolute; 46 | left: 640px; 47 | top: 0; 48 | width: 900px; 49 | height: 100%; 50 | padding-left: 260px; 51 | background: #fff; 52 | transition: -webkit-transform 1.2s ease-in-out; 53 | transition: transform 1.2s ease-in-out; 54 | transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out; 55 | } 56 | .cont.s--signup .sub-cont { 57 | -webkit-transform: translate3d(-640px, 0, 0); 58 | transform: translate3d(-640px, 0, 0); 59 | } 60 | 61 | button { 62 | display: block; 63 | margin: 0 auto; 64 | width: 260px; 65 | height: 36px; 66 | border-radius: 30px; 67 | color: #fff; 68 | font-size: 15px; 69 | cursor: pointer; 70 | } 71 | 72 | .img { 73 | overflow: hidden; 74 | z-index: 2; 75 | position: absolute; 76 | left: 0; 77 | top: 0; 78 | width: 260px; 79 | height: 100%; 80 | padding-top: 360px; 81 | } 82 | .img:before { 83 | content: ''; 84 | position: absolute; 85 | right: 0; 86 | top: 0; 87 | width: 900px; 88 | height: 100%; 89 | background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sections-3.jpg"); 90 | background-size: cover; 91 | transition: -webkit-transform 1.2s ease-in-out; 92 | transition: transform 1.2s ease-in-out; 93 | transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out; 94 | } 95 | .img:after { 96 | content: ''; 97 | position: absolute; 98 | left: 0; 99 | top: 0; 100 | width: 100%; 101 | height: 100%; 102 | background: rgba(0, 0, 0, 0.6); 103 | } 104 | .cont.s--signup .img:before { 105 | -webkit-transform: translate3d(640px, 0, 0); 106 | transform: translate3d(640px, 0, 0); 107 | } 108 | .img__text { 109 | z-index: 2; 110 | position: absolute; 111 | left: 0; 112 | top: 50px; 113 | width: 100%; 114 | padding: 0 20px; 115 | text-align: center; 116 | color: #fff; 117 | transition: -webkit-transform 1.2s ease-in-out; 118 | transition: transform 1.2s ease-in-out; 119 | transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out; 120 | } 121 | .img__text h2 { 122 | margin-bottom: 10px; 123 | font-weight: normal; 124 | } 125 | .img__text p { 126 | font-size: 14px; 127 | line-height: 1.5; 128 | } 129 | .cont.s--signup .img__text.m--up { 130 | -webkit-transform: translateX(520px); 131 | transform: translateX(520px); 132 | } 133 | .img__text.m--in { 134 | -webkit-transform: translateX(-520px); 135 | transform: translateX(-520px); 136 | } 137 | .cont.s--signup .img__text.m--in { 138 | -webkit-transform: translateX(0); 139 | transform: translateX(0); 140 | } 141 | .img__btn { 142 | overflow: hidden; 143 | z-index: 2; 144 | position: relative; 145 | width: 100px; 146 | height: 36px; 147 | margin: 0 auto; 148 | background: transparent; 149 | color: #fff; 150 | text-transform: uppercase; 151 | font-size: 15px; 152 | cursor: pointer; 153 | } 154 | .img__btn:after { 155 | content: ''; 156 | z-index: 2; 157 | position: absolute; 158 | left: 0; 159 | top: 0; 160 | width: 100%; 161 | height: 100%; 162 | border: 2px solid #fff; 163 | border-radius: 30px; 164 | } 165 | .img__btn span { 166 | position: absolute; 167 | left: 0; 168 | top: 0; 169 | display: flex; 170 | justify-content: center; 171 | align-items: center; 172 | width: 100%; 173 | height: 100%; 174 | transition: -webkit-transform 1.2s; 175 | transition: transform 1.2s; 176 | transition: transform 1.2s, -webkit-transform 1.2s; 177 | } 178 | .img__btn span.m--in { 179 | -webkit-transform: translateY(-72px); 180 | transform: translateY(-72px); 181 | } 182 | .cont.s--signup .img__btn span.m--in { 183 | -webkit-transform: translateY(0); 184 | transform: translateY(0); 185 | } 186 | .cont.s--signup .img__btn span.m--up { 187 | -webkit-transform: translateY(72px); 188 | transform: translateY(72px); 189 | } 190 | 191 | h2 { 192 | width: 100%; 193 | font-size: 26px; 194 | text-align: center; 195 | } 196 | 197 | label { 198 | display: block; 199 | width: 260px; 200 | margin: 25px auto 0; 201 | text-align: center; 202 | } 203 | label span { 204 | font-size: 12px; 205 | color: #cfcfcf; 206 | text-transform: uppercase; 207 | } 208 | 209 | input { 210 | display: block; 211 | width: 100%; 212 | margin-top: 5px; 213 | padding-bottom: 5px; 214 | font-size: 16px; 215 | border-bottom: 1px solid rgba(0, 0, 0, 0.4); 216 | text-align: center; 217 | } 218 | 219 | .forgot-pass { 220 | margin-top: 15px; 221 | text-align: center; 222 | font-size: 12px; 223 | color: #cfcfcf; 224 | } 225 | 226 | .submit { 227 | margin-top: 40px; 228 | margin-bottom: 20px; 229 | background: #d4af7a; 230 | text-transform: uppercase; 231 | } 232 | 233 | .fb-btn { 234 | border: 2px solid #d3dae9; 235 | color: #8fa1c7; 236 | } 237 | .fb-btn span { 238 | font-weight: bold; 239 | color: #455a81; 240 | } 241 | 242 | .sign-in { 243 | transition-timing-function: ease-out; 244 | } 245 | .cont.s--signup .sign-in { 246 | transition-timing-function: ease-in-out; 247 | transition-duration: 1.2s; 248 | -webkit-transform: translate3d(640px, 0, 0); 249 | transform: translate3d(640px, 0, 0); 250 | } 251 | 252 | .sign-up { 253 | -webkit-transform: translate3d(-900px, 0, 0); 254 | transform: translate3d(-900px, 0, 0); 255 | } 256 | .cont.s--signup .sign-up { 257 | -webkit-transform: translate3d(0, 0, 0); 258 | transform: translate3d(0, 0, 0); 259 | } 260 | 261 | .icon-link { 262 | position: absolute; 263 | left: 5px; 264 | bottom: 5px; 265 | width: 32px; 266 | } 267 | .icon-link img { 268 | width: 100%; 269 | vertical-align: top; 270 | } 271 | .icon-link--twitter { 272 | left: auto; 273 | right: 5px; 274 | } 275 | #pageMessages { 276 | position: fixed; 277 | bottom: 15px; 278 | right: 15px; 279 | width: 30%; 280 | } 281 | 282 | .alert { 283 | position: relative; 284 | } 285 | 286 | .alert .close { 287 | position: absolute; 288 | top: 5px; 289 | right: 5px; 290 | font-size: 1em; 291 | } 292 | 293 | .alert .fa { 294 | margin-right:.3em; 295 | } 296 | .alert-danger { 297 | color: #a94442; 298 | background-color: #f2dede; 299 | border-color: #ebccd1; 300 | width: 75%; 301 | 302 | } 303 | .alert { 304 | padding: 15px; 305 | border: 1px solid transparent; 306 | } 307 | .alert { 308 | position: relative; 309 | } 310 | 311 | .text-center { 312 | text-align: center!important; 313 | } 314 | .pb-3, .py-3 { 315 | padding-bottom: 1rem!important; 316 | } 317 | .pt-3, .py-3 { 318 | padding-top: 1rem!important; 319 | } 320 | a { 321 | color: #007bff; 322 | text-decoration: none; 323 | background-color: transparent; 324 | -webkit-text-decoration-skip: objects; 325 | } 326 | footer{ 327 | background: #fff; 328 | position: fixed; 329 | left: 0; 330 | bottom: 0; 331 | width: 100%; 332 | text-align: center; 333 | } -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | var totalLikes = 0; 2 | var totalUnlikes = 0; 3 | 4 | function postReply(commentId) { 5 | $('#commentId').val(commentId); 6 | $("#comment").focus(); 7 | } 8 | 9 | $("#submitButton").click(function () { 10 | $("#comment-message").css('display', 'none'); 11 | var str = $("#frm-comment").serialize(); 12 | 13 | $.ajax({ 14 | url: "comment-add.php", 15 | data: str, 16 | type: 'post', 17 | success: function (response) { 18 | var result = eval('(' + response + ')'); 19 | if (response) { 20 | $("#comment-message").css('display', 'inline-block'); 21 | $("#comment").val(""); 22 | $("#commentId").val(""); 23 | listComment(); 24 | } else { 25 | alert("Failed to add comments !"); 26 | return false; 27 | } 28 | } 29 | }); 30 | }); 31 | 32 | $(document).ready(function () { 33 | listComment(); 34 | }); 35 | 36 | function listComment() { 37 | $.post("comment-list.php", 38 | function (data) { 39 | var data = JSON.parse(data); 40 | 41 | var comments = ""; 42 | var replies = ""; 43 | var item = ""; 44 | var parent = -1; 45 | var results = new Array(); 46 | 47 | var list = $("