Kotak komentar di php dengan kode sumber

Dalam tutorial ini, kita akan melihat cara membuat sistem komentar sederhana berbasis AJAX menggunakan PHP. Sistem komentar ini menyertakan fitur untuk menambahkan balasan untuk setiap komentar yang ditambahkan oleh pengguna

Saya telah menggunakan jQuery AJAX untuk menambahkan komentar, membalas ke database dan menunjukkannya kepada pengguna. Karena menggunakan AJAX, itu akan memberikan pengalaman yang mulus kepada pengguna. Ini dirancang untuk balasan komentar berulir tingkat tak terbatas

Setiap komentar akan memiliki id unik dan id ini akan digunakan untuk merujuk elemen HTML yang menampilkan komentar. Id komentar ini akan diteruskan melalui panggilan AJAX untuk melakukan operasi berorientasi komentar seperti menambahkan balasan

Dalam tutorial sebelumnya, kita telah melihat cara membaca dan menulis ke database melalui panggilan AJAX

Tangkapan layar berikut menunjukkan keluaran untuk sistem komentar PHP AJAX

Kode HTML untuk Menampilkan Komentar

Kode ini menampilkan bidang input HTML untuk memasukkan nama dan komentar/balasan yang akan dipublikasikan. Saat mengirimkan komentar pengguna, panggilan AJAX akan dipanggil untuk menambahkan data ke database. Kode AJAX akan menambahkan atau menambahkan komentar/balasan yang diposting oleh pengguna setelah operasi AJAX berhasil

Komentar dan balasan ditambahkan dalam tampilan struktural sebagai elemen induk-turunan. Setiap komentar ditampilkan dengan menggunakan elemen induk yang berisi daftar elemen turunan yang menampilkan balasannya

indeks. php

Comment System using PHP and Ajax




	Comment System using PHP and Ajax
	

		
			

				
Name:
				 
			

			

				
			
			

				
				
Comment added successfully.
			

		
	

	
	

Kode PHP untuk Menerbitkan Komentar/Balasan

Dalam kode PHP ini, ia menerima permintaan AJAX dan menambahkan komentar/balasan yang diposting oleh pengguna. Setelah menambahkan komentar pengguna ke database, kode PHP akan mencetak komentar yang akan dibaca sebagai respons terhadap skrip AJAX

Data respons ini akan ditambahkan ke wadah HTML komentar. Kode berikut menunjukkan program PHP untuk menambah dan menampilkan komentar yang diposting oleh pengguna melalui AJAX

Sumber data. php adalah kelas utilitas database yang umum. Ini tersedia di zip unduhan proyek yang ditautkan di akhir artikel ini

Dalam tutorial ini, kita akan membuat sistem komentar dengan PHP, MySQL, dan AJAX (JavaScript). Sistem komentar akan ditambahkan secara fungsional ke situs web Anda (blog, situs web berita, dll. ) yang dapat digunakan tamu Anda untuk mengirim konten dan berbagi pendapat

Sistem komentar yang akan kita kembangkan hari ini akan minimal, bersih, dan cepat. Dan dengan menggunakan AJAX, Anda dapat mengimplementasikan sistem dengan mulus di halaman web mana pun

Komentar yang dikirimkan akan disimpan dan diambil di dalam dan dari database MySQL dan selanjutnya diisi dengan PHP dan HTML

Termasuk fitur tambahan dan tautan unduhan ke kode sumber

Isi

1. Mulai

Anda perlu menginstal lingkungan server web jika Anda akan menguji sistem komentar di sistem komputer Anda sendiri. Ikuti petunjuk di bawah ini

• Instal paket solusi lingkungan server web — Saya sarankan Anda menginstal XAMPP
• Jika Anda memiliki server produksi sendiri (VPS, Dedicated, dll), Anda harus menginstal PHP, Apache, MySQL, dan phpMyAdmin (Catatan. ini sudah disertakan dengan XAMPP)
• Instal editor kode. Anda dapat menggunakan Notepad tetapi saya tidak merekomendasikannya, gunakan salah satu dari yang berikut ini. Notepad++, Kode Visual Studio, atau Atom

2. Membuat Database dan mengatur Tabel

Kita perlu membuat database MySQL dan membuat tabel komentar karena itulah yang akan kita gunakan untuk menyimpan dan mengambil semua komentar kita. Kita bisa melakukannya dengan phpMyAdmin

Arahkan ke phpMyAdmin (mis. g. http. //localhost/phpmyadmin/) di browser Anda dan ikuti petunjuk di bawah ini

• Klik tab Database di bagian atas
• Di bawah Buat database, ketik phpcomments di kotak teks
• Pilih utf8_general_ci sebagai pemeriksaan (UTF-8 adalah penyandian default di HTML5)
• Klik Buat

Saat database dipilih, klik tab SQL dan jalankan kode pernyataan berikut

SQL

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');

Pernyataan SQL di atas akan membuat tabel komentar dengan kolom berikut

• adalah — ID komentar unik
• page_id — Ini akan menentukan komentar mana untuk halaman mana, itu akan menjadi ID halaman yang dapat Anda tentukan di halaman web mana pun
• parent_id — ID komentar induk yang akan kita gunakan untuk balasan komentar
• nama — Nama pengguna (mis. g. Joe Bloggs)
• konten — Konten komentar akan menjadi apa yang dimasukkan pengguna melalui formulir
• submit_date — Tanggal komentar diposting

Data yang kami masukkan ke dalam tabel komentar akan digunakan untuk tujuan pengujian

Di phpMyAdmin struktur tabel akan terlihat seperti berikut

http. //localhost/phpmyadmin/

3. Membuat Stylesheet (CSS3)

Kami akan membuat dua lembar gaya untuk sistem komentar kami - satu untuk halaman beranda kami karena halaman ini akan digunakan sebagai contoh bagaimana kami akan menerapkan sistem komentar. Lembar gaya lainnya akan digunakan untuk sistem komentar itu sendiri

Stylesheet digunakan untuk memformat tata letak sistem komentar kami

Ciptakan gaya. file css dan tambahkan

CSS

* {
    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 h1, .navtop div a {
    display: inline-flex;
    align-items: center;
}
.navtop div h1 {
    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;
}

Buat komentar. file css dan tambahkan

CSS

.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;
}

Jangan ragu untuk menyesuaikan stylesheet di atas dan tambahkan aturan CSS Anda sendiri

4. Membuat Sistem Komentar dengan PHP

Kami sekarang akan mulai mengkodekan sistem komentar kami dengan PHP. Pada bagian ini, kita akan terhubung ke database menggunakan PDO, membuat fungsi template, dan mengeksekusi kueri menggunakan pernyataan yang telah disiapkan (mencegah injeksi SQL)

Buat komentar. php dan tambahkan

PHP

<?php
// Update the details below with your MySQL details
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phpcomments';
try {
    $pdo = new PDO('mysql:host=' . $DATABASE_HOST . ';dbname=' . $DATABASE_NAME . ';charset=utf8', $DATABASE_USER, $DATABASE_PASS);
} catch (PDOException $exception) {
    // If there is an error with the connection, stop the script and display the error
    exit('Failed to connect to database!');
}

Kode di atas akan terhubung ke database MySQL kami menggunakan antarmuka PDO. Ingatlah untuk memperbarui variabel koneksi jika milik Anda berbeda

Tambahkan setelah

PHP

// 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';
}

Fungsi di atas akan mengonversi tanggal dan waktu kita menjadi string yang berlalu, yang akan muncul sebagai "1 hari yang lalu" dll di bagian komentar

Tambahkan setelah

PHP

// This function will populate the comments and comments replies using a loop
function show_comments($comments, $parent_id = -1) {
    $html = '';
    if ($parent_id != -1) {
        // If the comments are replies sort them by the "submit_date" column
        array_multisort(array_column($comments, 'submit_date'), SORT_ASC, $comments);
    }
    // Iterate the comments using the foreach loop
    foreach ($comments as $comment) {
        if ($comment['parent_id'] == $parent_id) {
            // Add the comment to the $html variable
            $html .= '
            <div class="comment">
                <div>
                    <h3 class="name">' . htmlspecialchars($comment['name'], ENT_QUOTES) . '</h3>
                    <span class="date">' . time_elapsed_string($comment['submit_date']) . '</span>
                </div>
                <p class="content">' . nl2br(htmlspecialchars($comment['content'], ENT_QUOTES)) . '</p>
                <a class="reply_comment_btn" href="#" data-comment-id="' . $comment['id'] . '">Reply</a>
                ' . show_write_comment_form($comment['id']) . '
                <div class="replies">
                ' . show_comments($comments, $comment['id']) . '
                </div>
            </div>
            ';
        }
    }
    return $html;
}

Fungsi ini akan mengisi array komentar dan mengembalikan nilai dalam format HTML. Balasan diisi dengan menjalankan fungsi yang sama bersama dengan ID komentar induk

Fungsi htmlspecialchars akan mengubah karakter khusus menjadi entitas HTML, yang akan mencegah serangan XSS

Tambahkan setelah

PHP

// This function is the template for the write comment form
function show_write_comment_form($parent_id = -1) {
    $html = '
    <div class="write_comment" data-comment-id="' . $parent_id . '">
        <form>
            <input name="parent_id" type="hidden" value="' . $parent_id . '">
            <input name="name" type="text" placeholder="Your Name" required>
            <textarea name="content" placeholder="Write your comment here..." required></textarea>
            <button type="submit">Submit Comment</button>
        </form>
    </div>
    ';
    return $html;
}

Fungsi ini berisi template untuk formulir "tulis komentar", yang akan digunakan oleh pengunjung untuk menulis komentar dan mengirimkannya

Tambahkan setelah

PHP

// Page ID needs to exist, this is used to determine which comments are for which page
if (isset($_GET['page_id'])) {
    // Check if the submitted form variables exist
    if (isset($_POST['name'], $_POST['content'])) {
        // POST variables exist, insert a new comment into the MySQL comments table (user submitted form)
        $stmt = $pdo->prepare('INSERT INTO comments (page_id, parent_id, name, content, submit_date) VALUES (?,?,?,?,NOW())');
        $stmt->execute([ $_GET['page_id'], $_POST['parent_id'], $_POST['name'], $_POST['content'] ]);
        exit('Your comment has been submitted!');
    }
    // Get all comments by the Page ID ordered by the submit date
    $stmt = $pdo->prepare('SELECT * FROM comments WHERE page_id = ? ORDER BY submit_date DESC');
    $stmt->execute([ $_GET['page_id'] ]);
    $comments = $stmt->fetchAll(PDO::FETCH_ASSOC);
    // Get the total number of comments
    $stmt = $pdo->prepare('SELECT COUNT(*) AS total_comments FROM comments WHERE page_id = ?');
    $stmt->execute([ $_GET['page_id'] ]);
    $comments_info = $stmt->fetch(PDO::FETCH_ASSOC);
} else {
    exit('No page ID specified!');
}
?>

Kode di atas akan memeriksa apakah variabel ID halaman ditentukan karena ini digunakan untuk menentukan komentar mana yang akan ditampilkan di halaman mana. Jika ID halaman tidak ditentukan, hentikan skrip dan tampilkan kesalahan

Komentar kemudian diambil dari database (diurutkan berdasarkan tanggal pengiriman dalam urutan menurun) dan disimpan dalam array asosiatif. Jumlah total komentar dihitung menggunakan fungsi MySQL COUNT(*).

Tambahkan setelah

PHP

<div class="comment_header">
    <span class="total"><?=$comments_info['total_comments']?> comments</span>
    <a href="#" class="write_comment_btn" data-comment-id="-1">Write Comment</a>
</div>

<?=show_write_comment_form()?>

<?=show_comments($comments)?>

Ini adalah template untuk sistem komentar kita, komentar diisi dengan menjalankan fungsi show_comments() bersama dengan variabel array asosiatif komentar yang sebelumnya kita definisikan

Fungsi show_write_comment_form() akan menampilkan form yang dapat digunakan pengunjung untuk menulis dan mengirimkan komentar

Itu semua yang kita butuhkan untuk kode dalam file ini. Langkah selanjutnya adalah mengimplementasikan sistem komentar pada halaman web menggunakan AJAX

5. Menerapkan Sistem Komentar ke dalam Halaman Web kami dengan AJAX

Sekarang setelah file PHP sisi server kami dibuat, kami dapat menerapkan sistem komentar di halaman web kami

Buat indeks. html dan tambahkan

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Comments System</title>
		<link href="style.css" rel="stylesheet" type="text/css">
		<link href="comments.css" rel="stylesheet" type="text/css">
	</head>
	<body>

	    <nav class="navtop">
	    	<div>
	    		<h1>Comments System</h1>
	    	</div>
	    </nav>

		<div class="content home">

			<h2>Article</h2>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique vel leo a vestibulum. Praesent varius ex elit, vitae pretium felis laoreet in. Nullam sit amet pretium nulla. Aliquam convallis sem vitae tincidunt pulvinar. Integer id ex efficitur, vulputate ante et, vulputate risus. Maecenas ac nunc est. Donec nisl turpis, aliquet quis turpis mollis, dictum pulvinar est. Vivamus ut suscipit turpis. Sed metus leo, dignissim non vehicula non, tincidunt ac velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

			<p>Nunc id lacinia mauris. Aliquam pellentesque orci et neque egestas, vel lobortis risus egestas. Curabitur non rhoncus nibh. Donec ante lorem, luctus eget ex eget, malesuada ornare nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam consectetur egestas magna non dignissim. Pellentesque sit amet mollis mauris. Nunc quis arcu ac diam tempus auctor. Proin nec commodo nisl. Duis gravida lorem quis ipsum mattis, id finibus tortor pretium. Nam maximus pretium nisi, ullamcorper tincidunt dolor sagittis ac. Donec suscipit neque lectus, id fringilla tortor pellentesque ut. Maecenas quam lectus, pharetra vitae commodo sit amet, iaculis quis massa. Aenean varius quam quis posuere viverra. Nullam varius condimentum sem, sit amet bibendum augue porttitor in.</p>

			<p>Morbi purus turpis, finibus vel fermentum nec, egestas eu elit. Fusce eleifend ac massa sit amet eleifend. Suspendisse sit amet facilisis augue. Praesent vitae dui lacus. Suspendisse sodales nisl massa, quis vehicula ante rutrum vitae. Proin scelerisque vestibulum purus, ac ultrices sapien malesuada vel. Proin sit amet tristique orci. Vestibulum in tortor ante.</p>
			
		</div>

	</body>
</html>

Ini adalah contoh halaman yang akan kita gunakan untuk menampilkan komentar kita, file tidak perlu dalam format PHP karena kita akan menggunakan AJAX untuk mengambil komentar dari komentar kita. halaman php

Tambahkan kode ini tepat sebelum tag body penutup

HTML

* {
    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 h1, .navtop div a {
    display: inline-flex;
    align-items: center;
}
.navtop div h1 {
    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;
}

Kode JavaScript di atas akan mengambil komentar menggunakan API pengambilan dan menambahkannya ke wadah komentar

Jika Anda akan menambahkan komentar di halaman lain, Anda harus memperbarui variabel comments_page_id karena nomornya harus unik di setiap halaman, kecuali jika Anda akan menampilkan komentar yang sama

Dan sekarang jika kita menavigasi ke file ini di browser web Anda (melalui localhost), kita akan melihat sesuatu seperti berikut

http. //localhost/phpcomments/index. html

Ingatlah untuk menguji fitur sistem komentar dan memastikan semuanya berfungsi sebagaimana mestinya

Kesimpulan

Selamat. Anda telah berhasil membuat sistem komentar dengan PHP, MySQL, dan AJAX

Apa selanjutnya?

Jangan ragu untuk membagikan artikel ini dan berikan komentar jika Anda menikmatinya

Jika Anda ingin mendukung kami, pertimbangkan untuk membeli paket di bawah karena ini akan sangat membantu kami membuat lebih banyak tutorial dan menjaga agar server kami tetap aktif dan berjalan. Paket termasuk kode yang ditingkatkan dan fitur yang lebih inovatif

Canggih

Kode sumber

File SQL basis data

Sistem komentar yang aman

Contoh halaman rumah

Komentar kelas JavaScript

Urutkan berdasarkan fitur (suara, terbaru, terlama)

Fitur voting komentar

Fitur foto komentar

Fitur pembuatan akun

Fitur pemformatan komentar

Fitur persetujuan

Fitur paginasi

Kode yang ditingkatkan

panel admin
— Dasbor
— Lihat/buat/edit komentar
— Menyetujui komentar
— Filter
- Mengelola akun
— Pengaturan

Desain Responsif (ramah seluler)

berkas SCSS

Kode yang dikomentari

Pembaruan & dukungan gratis (bug dan masalah kecil)

Panduan pengguna

* Pembayaran diproses dengan PayPal/Stripe
* Paket lanjutan juga menyertakan sumber tutorial

$20. 00

PayPal

Garis

Mata uang kripto

Untuk informasi lebih detail mengenai paket lanjutan, klik di sini

Tentang Penulis

David Adams

Pengembang situs web yang antusias, saya telah merancang dan mengembangkan aplikasi web selama lebih dari 10 tahun, saya menikmati kreativitas yang saya masukkan ke dalam proyek saya dan menikmati apa yang dibawa orang lain ke web yang luar biasa. Tujuan saya adalah membantu pendatang baru mempelajari cara-cara web

Bagaimana cara mengomentari kode sumber PHP?

Bagaimana cara memasukkan kotak komentar di PHP?

Apa tombol pintas untuk komentar di PHP?

Bagaimana Anda menambahkan kotak komentar di HTML?