Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Menciptakan Sebuah Jajak Dendapat yang Dinamis dengan PHP dan jQuery

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by wiga (you can also view the original English article)

Ketika Anda menggabungkan beberapa fungsi rapi milik PHP dengan kepandaian jQuery Anda bisa menghasilkan beberapa hasil yang cukup keren. Dalam tutorial ini kita akan membuat sebuah jajak pendapat yang menggunakan PHP dan XHTML, kemudian menggunakan Ajax jQuery beberapa efek untuk menghilangkan kebutuhan untuk refresh halaman, dan untuk memberikan sedikit bagus animasi.

  1. HTML
  2. PHP
    1. Pengenalan
    2. poll_default()
    3. poll_submit()
    4. poll_return_results()
    5. poll_ajax()
  3. CSS
  4. JavaScript
    1. Pengenalan
    2. formProcess()
    3. loadResults()
    4. animateResults()

HTML

Mari kita<head>mengatur:</head>

  • style.CSS akan mengadakan CSS markup.
  • jQuery.js adalah dasar jQuery Perpustakaan.
  • jQuery.cookie.js adalah plugin oleh Klaus Hartl untuk menambahkan cookie manipulasi untuk jQuery.
  • Poll.js akan memiliki Javascript yang membuat jajak pendapat yang dinamis.

Selanjutnya, kita akan membuat bentuk jajak pendapat sederhana:

Poll

Formulir ini akan diproses oleh PHP untuk sekarang, dan ketika kita mendapatkan Javascript menjalankan, dengan jQuery. PHP dan Javascript yang dirancang untuk menarik pilihan ID dari nilai tag. &nbps;hanya HTML entitas dikodekan ruang, dan &rarr; adalah anak panah: →.


PHP

Pengenalan

Jika Javascript dinonaktifkan, PHP akan:

  1. Mengambil permintaan GET/POST dari bentuk
  2. Cek set cookie
  3. Pastikan permintaan berasal dari IP yang unik
  4. Menyimpan suara di flat file DB
  5. Mengembalikan hasil yang disertakan dengan sebuah file HTML

Jika Javascript diaktifkan, PHP akan:

  1. Mengambil permintaan GET/POST dari Javascript
  2. Pastikan permintaan berasal dari IP yang unik
  3. Menyimpan suara di flat file DB
  4. Kembali hasil JSON

Untuk file datar DB kita akan menggunakan sebuah paket yang ditulis oleh Lukas tanaman.

Pertama, kita perlu sebuah array dengan nama dan id pilihan POLLING:

Paket flatfile menggunakan nomor untuk kolom pengidentifikasi, jadi mari kita mengatur beberapa konstanta untuk mengkonversi mereka ke nama:

Bila formulir dikirimkan, PHP perlu tahu apa file untuk memasukkan hasil ke dan kembali, sehingga kami mengatur konstan lain:

Kita perlu termasuk flatfile.php dan menginisialisasi objek database:

Flat file adalah hanya file teks yang tersimpan dalam direktori data:

Jika kita mendapatkan permintaan dengan parameter jajak pendapat, ini adalah bentuk statis, sehingga kami proses itu. Jika permintaan memiliki parameter suara di dalamnya, itu adalah permintaan Ajax. Sebaliknya, kita hanya kembali HTML_FILE.

poll_default()

poll_default() proses permintaan langsung ke script dengan permintaan GET/POST tidak berlaku.

Garis global membuat objek $db tersedia dalam lingkup fungsi.

Script melacak IP yang unik untuk memastikan bahwa Anda hanya dapat memilih sekali, sehingga kami melakukan query untuk memeriksa apakah itu dalam DB:

Jika kita tidak memiliki cookie dan IP query muncul kosong, klien tidak memilih lagi, sehingga kami dapat mengirimkan file HTML yang berisi formulir. Jika tidak, kami hanya mengirim hasil:

poll_submit()

poll_submit() mengambil pada form, cek jika klien telah sudah memilih, dan kemudian update DB dengan suara.

Garis-garis ini mendapatkan ID pilihan yang dipilih, dan menetapkan $id untuk itu:

Kita perlu memeriksa apakah opsi dalam DB belum:

Jika dalam DB (hasil tidak kosong), kita perlu untuk menjalankan updateSetWhere(). Jika kita tidak perlu melakukan insert():

Bagaimanapun, kita perlu memasukkan IP ke DB, dan menetapkan cookie (berakhir dalam satu tahun):

poll_return_results()

poll_return_results() menghasilkan hasil jajak pendapat, HTML file yang diperlukan, menggantikan bentuk dengan hasil, dan mengembalikan file ke klien.

Pertama, mari kita ambil HTML file dan menetapkan $html untuk itu:

Berikutnya, kita mulai struktur hasil HTML:

Untuk membuat hasil HTML kita perlu untuk mendapatkan semua baris (pilihan) dari DB diurutkan berdasarkan jumlah suara:

Kami juga membutuhkan total suara untuk menghitung persentase:

Berikutnya, kita menghitung persentase suara memiliki pilihan saat ini:

HTML untuk hasil akan menjadi daftar definisi (<dl>) gaya dengan CSS untuk membuat grafik batang:</dl>

Juga, kita harus memeriksa apakah opsi saat ini adalah salah satu klien memilih, dan mengubah warna:

Di sini, kita menambahkan total suara hitungan dan menutup tag html:

Ini adalah regex yang menemukan jajak pendapat-kontainer<div>:

Langkah terakhir dalam fungsi ini adalah untuk mengganti bentuk jajak pendapat dengan hasil menggunakan regex dan mengembalikan hasil:

poll_ajax()

poll_ajax() mengambil permintaan dari Javascript, menambah suara DB, dan mengembalikan hasilnya sebagai JSON.

Ada beberapa baris kode yang berbeda dari poll_submit(). Yang pertama akan memeriksa jika Javascript hanya ingin hasil, dan ada yang memilih harus dihitung:

Dua baris lain pilih seluruh DB dan mengembalikannya sebagai JSON:


CSS

Poll Results

Ini gaya CSS hasil kembali oleh PHP atau Javascript.

  • .graph gaya wadah untuk Bar, judul, dan persentase. Lebar akan berbeda untuk setiap situs.
  • .Bar-judul gaya judul untuk grafik batang.
  • .Bar-kontainer gaya individu bar dan persentase wadah
  • .Bar-wadah div gaya div yang diterapkan bar. Untuk membuat Bar, lebar persentase terletak dengan PHP atau Javascript.
  • .Bar-kontainer kuat gaya persentase.
  • #polling-hasil p gaya total suara.

JavaScript

Pengenalan

Javascript akan mencegat tombol kirim, mengirim suara dengan Ajax, dan menghidupkan hasil.

Pertama, beberapa global variabel. Anda harus mengakui tiga pertama dari PHP. votedID toko ID klien memilih opsi.

Sekarang kita perlu jQuery siap fungsi yang berjalan ketika halaman load:

Dalam fungsi kita mendaftar handler untuk tombol vote yang akan menjalankan formProcess saat itu dipicu:

Kita juga perlu untuk memeriksa apakah hasil<div>ada, dan menghidupkan hasil jika tidak:</div>

Jika kita memiliki cookie kita harus melompat langsung ke menghasilkan hasil karena pengguna telah sudah memilih. Untuk melakukan bahwa kita perlu untuk menyingkirkan bentuk jajak pendapat, mendapatkan id dari cookie, ambil hasil dari PHP dan melewati mereka ke loadResults().

formProcess()

formProcess() ini disebut dengan peristiwa yang menyerahkan yang melewati objek acara. Ini mencegah bentuk melakukan kirim normal, cek/set cookie, berjalan Ajax menyerahkan sebagai gantinya, maka panggilan loadResults() untuk mengkonversi hasil ke HTML.

Pertama, kita perlu untuk mencegah aksi default (menyerahkan formulir):

Selanjutnya, kita mendapatkan ID dari opsi yang dipilih saat ini:

input[@Name='poll']:checked adalah jQuery pemilih yang memilih<input>dengan atribut nama = 'polling' yang diperiksa. attr("value") mendapat nilai objek yang dalam kasus kita adalah optn di mana n adalah ID dari pilihan.

Sekarang bahwa kita memiliki ID, kami dapat memproses itu. Untuk memulai, kami memudar formulir jajak pendapat, dan setup fungsi anonim sebagai panggilan balik yang dijalankan ketika memudar selesai. Animasi jangan berhenti script, sehingga hal-hal aneh terjadi jika Anda tidak melakukannya dengan cara ini.

Setelah itu telah memudar kita dapat menghapus bentuk dari DOM menggunakan empty():

Dalam kasus ini, $ (ini) adalah singkatan jQuery untuk elemen DOM yang memudar diterapkan.

jQuery memiliki beberapa cara pintas fungsi lainnya, termasuk $.getJSON() mendapatkan permintaan untuk sebuah objek JSON. Ketika kita memiliki objek, kita memanggil loadResults() dengan itu:

Hal terakhir yang harus dilakukan adalah menetapkan cookie:

loadResults()

loadResults() yang disebut oleh $.getJSON() dan dikirimkan sebuah objek JSON yang berisi hasil DB. Ini adalah hampir sama seperti PHP mitra poll_return_results() dengan beberapa pengecualian. Perbedaan pertama adalah bahwa kita menetapkan lebar pada semua Bar ke 0% karena kita akan menghidupkan mereka. Perbedaan lain adalah bahwa kita menggunakan jQuery append() bukan regex untuk menampilkan hasil. Setelah hasil memudar, fungsi panggilan animateResults().

animateResults()

animateResults() iterates melalui masing-masing dari bar dan menjiwai properti lebar berdasarkan persentase.

Each() adalah fungsi jQuery yang iterates melalui setiap elemen yang dipilih:

Pertama, kita menetapkan persentase teks dari elemen di sebelah bar yang <strong>yang mengandung persentase.</strong>

Kemudian kita pastikan lebar diatur ke 0%, dan menghidupkan itu:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.