Membangun sistem Rating bintang 5 dengan jQuery, AJAX dan PHP

By Blok CC 20 Apr, 2020 Post a Comment

Dalam tutorial ini, Anda akan belajar bagaimana membangun sistem rating dengan AJAX, PHP dan jQuery. Voting akan direkam dan diperbarui dalam real-time dengan keajaiban AJAX, dan kita juga akan memanfaatkan power dari PHP sehingga Anda bahkan tidak memerlukan database!

Langkah 1. Membangun HTML

Kita akan membuat page sederhana yang berisi daftar dua film, dan memungkinkan Anda untuk menilai mereka. Ini berarti kita perlu bintang-bintang untuk memunculkan rating sekarang, dan untuk memungkinkan voting. Kami juga ingin area untuk menunjukkan total voting, dan rating sekarng ke satu tempat desimal.

Mari kita lihat di HTML/CSS

<div class='movie_choice'>

    Rate: Raiders of the Lost Ark

    <div id="r1" class="rate_widget">

        <div class="star_1 ratings_stars"></div>

        <div class="star_2 ratings_stars"></div>

        <div class="star_3 ratings_stars"></div>

        <div class="star_4 ratings_stars"></div>

        <div class="star_5 ratings_stars"></div>

        <div class="total_votes">vote data</div>

    </div>

</div>

<div class='movie_choice'>

    Rate: The Hunt for Red October

    <div id="r2" class="rate_widget">

        <div class="star_1 ratings_stars"></div>

        <div class="star_2 ratings_stars"></div>

        <div class="star_3 ratings_stars"></div>

        <div class="star_4 ratings_stars"></div>

        <div class="star_5 ratings_stars"></div>

        <div class="total_votes">vote data</div>

    </div>

</div>

Perhatikan bagaimana ada no grafis dalam HTML? Mereka akan ditambahkan dengan CSS. Kami hanya menggunakan HTML untuk membuat framework yang dimana widget bekerja. Sekarang saatnya untuk mulai menambahkan CSS.

.rate_widget {

    border:     1px solid #CCC;

    overflow:   visible;

    padding:    10px;

    position:   relative;

    width:      180px;

    height:     32px;

}

.ratings_stars {

    background: url('star_empty.png') no-repeat;

    float:      left;

    height:     28px;

    padding:    2px;

    width:      32px;

}

.ratings_vote {

    background: url('star_full.png') no-repeat;

}

.ratings_over {

    background: url('star_highlight.png') no-repeat;

}

Bagian pertama dari CSS menyelesaikan beberapa hal:

Memberikan nilai 'kosong' default ke setiap lokasi bintang
Set up classes untuk diisi di bintang, dan bintang-bintang yang disorot
Mendefinisikan dan style bintang 'container'.

Anda dapat menggunakan gambar yang disediakan di download, atau membuat sendiri. Ada kebutuhan untuk grafis untuk masing-masing dari tiga state: kosong, penuh dan highlight.
Selanjutnya kita menambahkan sedikit lebih CSS untuk posisi kotak total suara, dan centering widget sehingga halaman cocok di awal bagian ini.

.total_votes {

    background: #eaeaea;

    top: 58px;

    left: 0;

    padding: 5px;

    position:   absolute;  

} 

.movie_choice {

    font: 10px verdana, sans-serif;

    margin: 0 auto 40px auto;

    width: 180px;

}

Langkah 2. Menambah interaktivitas UI

Pada titik ini, kami memiliki sekelompok bintang-bintang yang kosing, tetapi mereka tidak melakukan banyak saat ini. Ini adalah tempat jQuery datang untuk menyelamatkan.

Langkah pertama kami adalah untuk menambahkan mouseover dan mouseout handler untuk bintang-bintang. Kita perlu menyorot bintang ketika mouse di atas dan semua bintang sebelumnya.

$('.ratings_stars').hover(

    // Handles the mouseover

    function() {

        $(this).prevAll().andSelf().addClass('ratings_over');

        $(this).nextAll().removeClass('ratings_vote'); 

    },

    // Handles the mouseout

    function() {

        $(this).prevAll().andSelf().removeClass('ratings_over');

        set_votes($(this).parent());

    }

);

Kami mengambil keuntungan dari jQuery's .prevAll() dan .nextAll() metode untuk mendapatkan bintang segerea sebelum dan mengikuti saat ini moused atas bintang.
Kode di atas kemudian menambahkan dan menghapus kelas untuk membuat bintang-bintang di bawah mouse dan sebelum 'disorot' dan bintang setelah 'tidak disorot'.

Bagaimana set_votes()?

Ini adalah fungsi memeriksa bintang-bintang yang harus dalam keadaan 'penuh', dan hubungan erat dengan langkah berikutnya, dimana kita ambil remote data dari server.

Langkah 3. Mengambil Data dari Server

Bintang yang kita soroti ketika memindahkan mouse di atas mereka, dan itu adalah awal yang baik. Tapi bagaimana tentang bintang merah yang menampilkan vote saat ini? Untuk mencapai langkah ini, kita perlu untuk mendapatkan informasi dari server, dan menulis beberapa JavaScript untuk menangani data tersebut.

$('.rate_widget').each(function(i) {

    var widget = this;

    var out_data = {

        widget_id : $(widget).attr('id'),

        fetch: 1

    };

    $.post(

        'ratings.php',

        out_data,

        function(INFO) {

            $(widget).data( 'fsr', INFO );

            set_votes(widget);

        },

        'json'

    );

});

Blok kode ini - benar-benar semua JavaScript - berjalan dalam document.ready blok. Kode tertentu ini di eksekusi segera. Itu meng-kueri server dan mendapat beberapa informasi pada setiap vote widget pada halaman.
Pertama kita membuat sebuah objek, out_data, mengandung informasi yang kita kirim ke server. Script PHP kami mengharapkan untuk melihat 'fetch' ketika hanya meraih data, sehingga kami memasukkannya di sini. Kami juga menyertakan ID dari widget, yang memungkinkan script sisi server tahu data apa yang kami harapkan. Ketika callback di panggil, berisi objek JavaScript yang terlihat seperti ini:

{

    "widget_id"     : "r1",

    "number_votes"  : 129,

    "total_points"  : 344,

    "dec_avg"       : 2.7,

    "whole_avg"     : 3

}

Metode .data() adalah sedikit sihir jQuery yang memungkinkan Anda untuk menghubungkan data yang sewenang-wenang dengan DOM
objek.

Jika Anda melihat dari dekat kode, Anda akan melihat kami mengambil objek (disimpan dalam variabel INFO) dan
melakukan sesuatu dengan itu melalui .data() metode.
Metode .data() adalah sedikit sihir jQuery yang memungkinkan Anda untuk menghubungkan data yang sewenang-wenang dengan DOM
objek. Dalam kasus ini, kami menyimpan data dalam widget div. Ini dapat diakses kemudian seperti ini:

$('#one_of_your_widgets).data('fsr').widget_id;

set_votes(), akhirnya.

Setelah data telah dikembalikan dari server, yang tidak langsung ke set_votes().

function set_votes(widget) {

    var avg = $(widget).data('fsr').whole_avg;

    var votes = $(widget).data('fsr').number_votes;

    var exact = $(widget).data('fsr').dec_avg;

    $(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote');

    $(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote'); 

    $(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' );

}

Pertama tiga baris adalah untuk mudah dibaca, seperti nama-nama variabel yang cukup panjang. Jadi mari kita lihat apa yang terjadi di sini.
Baris 7: 'avg' adalah angka keseluruhan, rata-rata bulat vote widget ini. Karena memiliki
nomor 1-5, kita dapat menggunakannya untuk menemukan bintang yang tepat di widget, dan mengubahnya, dan
dan mengisi graphic sebelumnya. Perhatikan penggunaan .andSelf() termasuk bintang yang
kami telah pilih.
Baris 8: Ini sangat mirip dengan baris tujuh, tapi kami akan menghapus grafis yang diisi dari bintang-bintang kemudian. Ini
diperlukan dalam kasus rata-rata untuk widget ini telah turun sejak vote terakhir.
Baris 9: Di sini kita sedang memperbarui kotak abu-abu di bawah widget, yang menunjukkan penilaian yang lebih akurat,
dan memungkinkan pengunjung tahu berapa banyak suara telah dilemparkan.

Langkah 4. Mari mulai pemungutan suara

Langkah terakhir untuk UI adalah untuk memungkinkan pemungutan suara. Kita akan menambahkan sebuah klik handler untuk masing-masing dari bintang-bintang. klik handler ini akan bertanggung jawab untuk mengirim data vote ke server.

Berikut adalah klik handler:

$('.ratings_stars').bind('click', function() {

    var star = this;

    var widget = $(this).parent();

    var clicked_data = {

        clicked_on : $(star).attr('class'),

        widget_id : widget.attr('id')

    };

    $.post(

        'ratings.php',

        clicked_data,

        function(INFO) {

            widget.data( 'fsr', INFO );

            set_votes(widget);

        },

        'json'

    ); 

});

Dalam blok kode ini, kami memulai dengan membuat beberapa variabel tidak hanya untuk kejelasan, tapi, dalam hal ini, sehingga mereka dapat digunakan dalam callback .post. Ingat klik handler di-assign ke bintang-bintang, jadi kita juga perlu widget variabel kedua itu, untuk memiliki objek yang berisi data.
Pertama, kami menyiapkan data yang akan keluar, yang kita letakkan di clicked_data objek. Kita ambil kelas yang mencakup nama kelas dalam format star_ # memberitahu kita vote apa yang diberikan, dan mempersiapkan untuk mengirim ke server, bersama dengan widget ID.
Widget ID adalah batu penjuru yang mengandalkan sistem pemungutan suara ini. Hal ini memungkinkan kita untuk mencari data yang tersimpan, dan untuk dengan mudah menunjukkan data kepada pengunjung.
Akhirnya, pada baris baris, kami mengirimkan informasi ini ke server. Server akan menambahkan vote ke total vote saat ini, dan mengirim informasi kembali ke browser yang berisi data yang diperbarui. Nilai-nilai yang ditampilkan oleh widget kemudian diperbarui dengan set_votes().

Langkah 5. PHP: Membuat kelas

Sekarang sudah UI selesai, kita perlu membuat script sisi server untuk menyimpan dan mengambil voting data.

Kita akan membuat kelas sangat sederhana dalam PHP, disebut 'Ratings', dan menggunakannya untuk menangani permintaan server untuk sistem peringkat kami. Hanya akan menjadi dua metode, ditambah invocation. Penggunaan kelas kami akan terlihat seperti:

# New Object

$rating = new ratings($_POST['widget_id']);

# either return ratings, or process a vote

isset($_POST['fetch']) ? $rating->get_ratings() : $rating->vote();

Jika Anda kembali ke bagian empat, Anda akan melihat kita memuat data dengan variable 'fetch' - itu kenapa kita mencari disini di baris lima. Jika tidak ditetapkan, maka mengolah vote.
Hal pertama yang kita akan lihat di awal kelas, dan, lebih khusus lagi, konstruktor.

class ratings {

    private $data_file = './ratings.data.txt';

    private $widget_id;

    private $data = array();

function __construct($wid) {

    $this->widget_id = $wid;

    $all = file_get_contents($this->data_file);

    if($all) {

        $this->data = unserialize($all);

    }

}

serialize() dan unserialize adalah cara yang bagus untuk dengan mudah menyimpan
PHP struktur data pada disk.

Ada banyak terjadi di sini di sangat sedikit barus, jadi aku akan meng-cover yang penting saja.
Baris 3: Hal ini perlu diatur ke file teks yang Anda ingin gunakan untuk menyimpan data Anda. Kami tidak menggunakan database untuk proyek ini, meskipun Anda bisa dengan mudah. File sederhana akan cukup untuk kebutuhan kita.
Baris 7: Konstruktor. Ini disebut ketika kita membuat objek, dan segera menyimpan ID dari widget.
Baris 11: Kami mencoba untuk memuat file teks. Jika file tidak ada, tidak apa-apa, tetapi pada beberapa sistem yang Anda harus membuatnya terlebih dahulu dan memberikan izin yang tepat untuk PHP untuk dapat membaca dan menulis untuk itu.
Baris 14: Baris ini penting. Dibutuhkan data dari file teks - jika ada satu - dan unserializes() itu. File ini berisi array PHP yang kompleks yang akan dikonversi ke teks biasa representasi, melalui serialize(), memungkinkan kita untuk menyimpan itu dan membaca kembali sebagai array nantinya.

Langkah 6. get_ratings() metode.

Metode ini dipanggil sendiri atau dari metode vote(). INi akan menemukan data untuk ID tertentu widget dan kembali ke halaman yang meminta, dalam JSON format.

public function get_ratings() {

    if($this->data[$this->widget_id]) {

        echo json_encode($this->data[$this->widget_id]);

    }

    else {

        $data['widget_id'] = $this->widget_id;

        $data['number_votes'] = 0;

        $data['total_points'] = 0;

        $data['dec_avg'] = 0;

        $data['whole_avg'] = 0;

        echo json_encode($data);

    } 

}

Ini hanya terlihat rumit - itu sebenarnya cukup sederhana. Hal pertama yang kita lakukan adalah memeriksa jika memiliki array yang disimpan dalam $this->data mempunyai key ynag sama dengan widget ID kita. Jika tidak, kita hanya mengembalikan informasi tersebut, karena data widget tersebut ke halaman yang meminta.
Kita tidak perlu melakukan apa pun untuk data itu karena yang sudah dalam bentuk array. $this->data adalah hanya sebuah array dari array. Kami encode array yang kita inginkan dengan json_encode() dan mengirimkannya kembali ke browser.
Jika tidak ada data untuk ID widget yang kita minta, kita membuat record dengan semua nilai nol, dan mengirimkannya kembali ke browser.

Langkah 7. vote() metode

Selanjutnya, kita perlu membuat metode untuk menangani vote yang masuk. Ketika metode selesai, itu harus memanggil get_ratings() untuk mengirim informasi yang diperbarui kembali ke web browser.

Metode awal

public function vote() {

    # Get the value of the vote

    preg_match('/star_([1-5]{1})/', $_POST['clicked_on'], $match);

    $vote = $match[1];

Hal pertama yang kita lakukan adalah mendapatkan nilai vote. Ingat bahwa di suatu tempat di 'clicked_on' adalah nama kelas dalam format star_ #. "star_4", misalnya. Untuk mendapatkan nilai, kita menggunakan regular expression dan menangkap nilai nomor untuk $match [1].

Metode Middle

$ID = $this->widget_id;

# Update the record if it exists

if($this->data[$ID]) {

    $this->data[$ID]['number_votes'] += 1;

    $this->data[$ID]['total_points'] += $vote;

}

# Create a new one if it does not

else {

    $this->data[$ID]['number_votes'] = 1;

    $this->data[$ID]['total_points'] = $vote;

}

Di sini kita menyimpan $this->widget_id ke $ID kejelasan - kode berikut semakin sedikit kasar pada mata tanpa itu.
Kami memeriksa jika ada informasi untuk ID ini, dan, jika demikian, kami menambahkan vote ke penghitungan total vote, dan menambahkan poin dari vote yang diterima. Ini adalah menjalankan total semua vote; Jadi jika seseorang memberikan lima bintang, dan lain, tiga, itu adalah total delapan poin.
Jika catatan tidak ada, kami akan membuat satu, dengan satu suara, dan hanya poin dari vote masuk.

Menyelesaikan

    $this->data[$ID]['dec_avg'] = round( $this->data[$ID]['total_points'] / $this->data[$ID]['number_votes'], 1 );

    $this->data[$ID]['whole_avg'] = round( $this->data[$ID]['dec_avg'] );

    file_put_contents($this->data_file, serialize($this->data));

    $this->get_ratings();

}

Setelah kita memperbarui vote dan total point, kita harus menghitung kedua rata-rata dinyatakan sebagai bilangan, dan untuk satu titik desimal. Untuk menghindari keharusan untuk melakukan matematika dua kali, kita pertama menghitung rata-rata untuk satu desimal baris satu, dan kemudian putaran bahwa dari seluruh nomor, pada baris dua.
Pada baris empat, kami menyimpan informasi yang berubah kembali pada disk setelah pengolahan dengan serialize() Setelah data telah tersimpan secara aman, kita memanggil $this->get_ratings() untuk mengirimkan informasi baru, diperbarui ke browser.

Kesimpulan

Demi kesederhanaan, ini bukan solusi lengkap 100%. Untuk memperluas proyek ini, kami harus menyimpan cookie membuat yakin orang hanya memilih sekali, atau bahkan merekam IP address. Hal ini juga mungkin bahwa dua pasangan pertama-suara terjadi secara simultan, dan hanya satu mungkin disimpan. Ini adalah, bagaimanapun, ini permulaan yang besar, dan lebih kemudian cocok untuk melacak vote pada beberapa segenggam item di website Anda. Pikiran? Terima kasih telah membaca!