Facebook seperti rating emoji adalah salah satu fitur favorit saya yang dapat menjadi alat yang sangat berguna untuk halaman web. Terutama untuk mengumpulkan emotion pengguna ketika mereka menambahkan peringkat atau suka. Dalam tutorial ini, saya akan mensimulasikan fitur ini dengan contoh PHP menggunakan jQuery AJAX.

Dalam contoh ini, daftar catatan ditampilkan dari database. Setiap catatan berisi opsi kepada pengguna untuk menambahkan suka. Saat opsi hover “like” yang ditampilkan di halaman contoh, ikon emoji akan muncul untuk menambahkan suka dengan berbagi emotion.

Halaman HTML untuk Menampilkan Hasil Dinamis dengan Opsi Nilai Emoji

Dalam contoh ini, saya telah menggunakan data tbl_tutorial untuk ditampilkan secara dinamis di halaman landing. Tabel ini berisi 3 catatan dengan nama dan deskripsi tutorial masing-masing. Untuk setiap baris, opsi serupa akan ditampilkan. Saat melayang opsi serupa, ikon emoji akan ditampilkan. Dengan mengklik ikon emoji tertentu, data emosi yang terkait akan diposkan ke PHP melalui AJAX. Sebelumnya, kami telah belajar cara membuat sistem komentar PHP untuk memposting komentar teks dengan emoji.

Dalam contoh ini, antarmuka pengguna akan memiliki data emotion yang tersimpan untuk setiap catatan pada pemuatan halaman. Dan, data ini akan diperbarui melalui AJAX pada setiap tindakan serupa yang dilakukan oleh pengguna.

Menampilkan Emoji dan menambahkan Perbarui Rating menggunakan jQuery AJAX

Skrip ini menunjukkan fungsi jQuery yang dibuat untuk menampilkan / menyembunyikan ikon emoji pada gerakan mouse sehubungan dengan elemen “suka” di UI. Juga, ini berisi fungsi untuk melakukan penambahan / pembaruan peringkat emoji via AJAX.

Fungsi showEmojiPanel dan hideEmojiPanel dipanggil pada acara mouse-over dan mouse-out dari tautan teks “seperti” yang ada di setiap baris. Fungsi-fungsi ini mengaktifkan hide show jQuery untuk mengubah elemen penampung ikon emoji. Saat mengklik ikon emoji, fungsi addUpdateRating () dipanggil. Dalam fungsi ini, permintaan AJAX akan dikirim ke PHP.

Metode AJAX memanggil addUpdateRating.php dengan memposting ident baris dan data emosi sebagai parameter. Setelah alur AJAX berhasil, callback sukses akan menerima respons dari sisi server untuk memperbarui UI. Dalam contoh ini, ia menerima ikon Suka Hitung dan Perbedaan emoji dalam format HTML.

Kode PHP untuk Memproses Permintaan Rating Emoji

Dalam kode PHP ini, permintaan AJAX diterima dengan parameter yang diposting tutorial_id dan emoji_rating. Di dalamnya termasuk kelas PHP Rate.php untuk menjalankan fungsi membaca dan memperbarui basis data peringkat.

Dalam kode ini, fungsi getRatingByTutorialForMember membaca hasil basis data untuk memeriksa apakah pengguna sudah menambahkan suka untuk tutorial. Jika tidak, catatan baru akan ditambahkan ke tabel tbl_member_rating dengan menjalankan fungsi addRating. Jika sudah ada entri pada basis data peringkat, maka peringkat anggota akan diperbarui.

Setelah melakukan penambahan atau memperbarui hitungan rating dan data emosi terbentuk dalam format HTML. Data HTML ini akan dikirim ke respons permintaan AJAX untuk memperbarui UI.

Kelas PHP untuk Akses dan Perbarui Basis Data

Dalam contoh ini, saya telah membuat dua kelas PHP untuk mengakses dan melakukan penyisipan atau pembaruan basis data pada tabel peringkat. Kelas Rate.php berisi fungsi untuk membuat kueri basis data dan membentuk tipe param kueri dan larik nilai. Kelas DBController.php akan mengatur koneksi dan menyiapkan pernyataan permintaan yang diperlukan untuk melakukan operasi terkait database.

Rate.php

File ini berisi fungsi untuk mendapatkan semua rekaman dari database dengan data rating. Fungsi getAllPosts menggunakan kueri bergabung kiri untuk mendapatkan tutorial dan data ratingnya. Fungsi group_concat digunakan untuk mendapatkan data emosi kolektif yang berbeda dari database.

Ini juga berisi fungsi untuk mendapatkan basis data tutorial berdasarkan id anggota dan untuk mendapatkan data rating berdasarkan id tutorial. Fungsi addRating dan updateDating membentuk data peringkat yang diposting dan mengetik dalam format array. Array ini akan digunakan untuk mengikat array param dengan pernyataan query pada kelas DBController.

DBController.php

Facebook Seperti Emoji Rating Output

Screenshot berikut menunjukkan output dari contoh ths mensimulasikan Facebook seperti rating emoji.

Facebook Like Emoji Rating dengan PHP menggunakan jQuery AJAX

 

Oke itulah tadi pembahasan saya tentang Facebook Like Emoji Rating dengan PHP menggunakan jQuery AJAX, semoga bermanfaat.

WhatsApp chat