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
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
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; }0Kode 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
UnduhGaris
Mata uang kripto
UnduhUntuk 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