Hướng dẫn php pdo comment system - hệ thống bình luận php pdo

Question

Trong hướng dẫn này, chúng tôi sẽ tạo ra một hệ thống bình luận với PHP, MySQL và Ajax (JavaScript). Hệ thống nhận xét sẽ thêm chức năng vào trang web của bạn (blog, trang web tin tức, v.v.) mà khách của bạn có thể sử dụng để gửi nội dung và chia sẻ ý kiến.

Nội dung chính Show

1. Bắt đầu
2. Tạo cơ sở dữ liệu và bảng thiết lập
3. Tạo bảng kiểu (CSS3)
Sự kết luận

Hệ thống bình luận chúng tôi sẽ phát triển ngày hôm nay sẽ tối thiểu, sạch sẽ và nhanh chóng! Và với việc sử dụng AJAX, bạn có thể triển khai hệ thống một cách liền mạch trên bất kỳ trang web nào.

Nhận xét đã gửi sẽ được lưu trữ và truy xuất trong và từ cơ sở dữ liệu MySQL và sau đó được điền với PHP và HTML.

Gói nâng cao bao gồm các tính năng bổ sung và liên kết tải xuống đến mã nguồn.

1. Bắt đầu

Bạn sẽ cần cài đặt môi trường máy chủ web nếu bạn sẽ kiểm tra hệ thống bình luận trên hệ thống máy tính của riêng bạn. Thực hiện theo các hướng dẫn dưới đây.

Cài đặt gói giải pháp môi trường máy chủ web - Tôi khuyên bạn nên cài đặt XAMPP.
Nếu bạn có máy chủ sản xuất của riêng mình (VPS, chuyên dụng, v.v.), bạn sẽ cần cài đặt PHP, Apache, MySQL và PHPMyAdmin (lưu ý: Chúng đã được bao gồm với XAMPP).
Cài đặt một trình soạn thảo mã. Bạn có thể sử dụng Notepad nhưng tôi không khuyên bạn nên sử dụng một trong những điều sau đây: Notepad ++, Visual Studio Code hoặc Atom.

2. Tạo cơ sở dữ liệu và bảng thiết lập

Chúng tôi cần tạo cơ sở dữ liệu MySQL và tạo bảng nhận xét vì đó là những gì chúng tôi sẽ sử dụng để lưu trữ và truy xuất tất cả các nhận xét của chúng tôi. Chúng ta có thể làm điều đó với phpmyadmin.

Điều hướng đến phpmyadmin (ví dụ: http: // localhost/phpmyadmin/) trong trình duyệt của bạn và làm theo các hướng dẫn dưới đây:

Nhấp vào tab Cơ sở dữ liệu ở trên cùng
Trong Tạo cơ sở dữ liệu, nhập PhpComments trong hộp văn bản
Chọn UTF8_General_Ci làm đối chiếu (UTF-8 là mã hóa mặc định trong HTML5)
Nhấp vào Tạo

Trong khi cơ sở dữ liệu được chọn, hãy nhấp vào tab SQL và thực hiện mã câu lệnh sau:

CREATE TABLE IF NOT EXISTS `comments` (
	`id` int(11) NOT NULL AUTO_INCREMENT,
	`page_id` int(11) NOT NULL,
	`parent_id` int(11) NOT NULL DEFAULT '-1',
	`name` varchar(255) NOT NULL,
	`content` text NOT NULL,
	`submit_date` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
	PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;

INSERT INTO `comments` (`id`, `page_id`, `parent_id`, `name`, `content`, `submit_date`) VALUES
(1, 1, -1, 'John Doe', 'Thank you for taking the time to write this article, I really enjoyed reading it!\r\n\r\nThank you, David!', '2020-07-22 14:35:15'),
(2, 1, 11, 'David Adams', 'It''s good to hear that you enjoyed this article.', '2020-07-22 14:36:19'),
(3, 1, -1, 'Michael', 'I appreciate the time and effort you spent writing this article, good job!', '2020-07-22 14:37:43');

Câu lệnh SQL trên sẽ tạo bảng nhận xét với các cột sau:

ID - ID bình luận độc đáo.
Trang_ID - Điều này sẽ xác định nhận xét nào là trang nào, đó sẽ là ID trang mà bạn có thể chỉ định trên bất kỳ trang web nào.
Parent_id - ID bình luận cha mẹ mà chúng tôi sẽ sử dụng để trả lời bình luận.
Tên - Tên của người dùng (ví dụ: Joe Bloggs).
Nội dung - Nội dung nhận xét sẽ là những gì người dùng nhập thông qua biểu mẫu.
đệ trình_date - ngày nhận xét đã được đăng.

Dữ liệu mà chúng tôi chèn vào bảng bình luận sẽ là cho mục đích kiểm tra.

Trong phpmyadmin, cấu trúc bảng sẽ trông giống như sau:

http://localhost/phpmyadmin/

Hướng dẫn php pdo comment system - hệ thống bình luận php pdo

3. Tạo bảng kiểu (CSS3)

Chúng tôi sẽ tạo hai bảng kiểu cho hệ thống bình luận của chúng tôi - một sẽ dành cho trang chủ của chúng tôi vì trang này sẽ được sử dụng như một ví dụ về cách chúng tôi thực hiện hệ thống bình luận. Các kiểu dáng khác sẽ được sử dụng cho chính hệ thống bình luận.

Các kiểu dáng được sử dụng để định dạng bố cục của hệ thống nhận xét của chúng tôi.

Tạo tệp style.css và thêm:

* {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    background-color: #FFFFFF;
    margin: 0;
}
.navtop {
    background-color: #3f69a8;
    height: 60px;
    width: 100%;
    border: 0;
}
.navtop div {
    display: flex;
    margin: 0 auto;
    width: 1000px;
    height: 100%;
}
.navtop div h2, .navtop div a {
    display: inline-flex;
    align-items: center;
}
.navtop div h2 {
    flex: 1;
    font-size: 24px;
    padding: 0;
    margin: 0;
    color: #ecf0f6;
    font-weight: normal;
}
.navtop div a {
    padding: 0 20px;
    text-decoration: none;
    color: #c5d2e5;
    font-weight: bold;
}
.navtop div a i {
    padding: 2px 8px 0 0;
}
.navtop div a:hover {
    color: #ecf0f6;
}
.content {
    width: 1000px;
    margin: 0 auto;
}
.content h2 {
    margin: 0;
    padding: 25px 0;
    font-size: 22px;
    border-bottom: 1px solid #ebebeb;
    color: #666666;
}

Tạo tệp bình luận.css và thêm:

.comments .comment_header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    margin-bottom: 10px;
    align-items: center;
}
.comments .comment_header .total {
    color: #777777;
    font-size: 14px;
}
.comments .comment_header .write_comment_btn {
    margin: 0;
}
.comments .write_comment_btn, .comments .write_comment button {
    display: inline-block;
    background-color: #565656;
    color: #fff;
    text-decoration: none;
    margin: 10px 0 0 0;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    border: 0;
}
.comments .write_comment_btn:hover, .comments .write_comment button:hover {
    background-color: #636363;
}
.comments .write_comment {
    display: none;
    padding: 20px 0 10px 0;
}
.comments .write_comment textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    height: 150px;
    margin-top: 10px;
}
.comments .write_comment input {
    display: block;
    width: 250px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: 10px;
}
.comments .write_comment button {
    cursor: pointer;
}
.comments .comment {
    padding-top: 10px;
}
.comments .comment .name {
    display: inline;
    padding: 0 5px 3px 0;
    margin: 0;
    font-size: 16px;
    color: #555555;
}
.comments .comment .date {
    color: #888888;
    font-size: 14px;
}
.comments .comment .content {
    padding: 5px 0 5px 0;
}
.comments .comment .reply_comment_btn {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 10px;
    font-size: 14px;
    color: #888888;
}
.comments .comment .replies {
    padding-left: 30px;
}

Hãy thoải mái tùy chỉnh các bảng kiểu ở trên và thêm các quy tắc CSS của riêng bạn.

Bây giờ chúng tôi sẽ bắt đầu mã hóa hệ thống bình luận của chúng tôi với PHP. Trong phần này, chúng tôi sẽ kết nối với cơ sở dữ liệu bằng cách sử dụng PDO, tạo các chức năng mẫu và thực hiện các truy vấn bằng cách sử dụng các câu lệnh đã chuẩn bị (ngăn chặn SQL tiêm).

Tạo tệp bình luận.php và thêm:

Mã trên sẽ kết nối với cơ sở dữ liệu MySQL của chúng tôi bằng giao diện PDO. Hãy nhớ cập nhật các biến kết nối nếu bạn khác nhau.

Thêm vào sau:

// Below function will convert datetime to time elapsed string
function time_elapsed_string($datetime, $full = false) {
    $now = new DateTime;
    $ago = new DateTime($datetime);
    $diff = $now->diff($ago);
    $diff->w = floor($diff->d / 7);
    $diff->d -= $diff->w * 7;
    $string = array('y' => 'year', 'm' => 'month', 'w' => 'week', 'd' => 'day', 'h' => 'hour', 'i' => 'minute', 's' => 'second');
    foreach ($string as $k => &$v) {
        if ($diff->$k) {
            $v = $diff->$k . ' ' . $v . ($diff->$k > 1 ? 's' : '');
        } else {
            unset($string[$k]);
        }
    }
    if (!$full) $string = array_slice($string, 0, 1);
    return $string ? implode(', ', $string) . ' ago' : 'just now';
}