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

Membuat sebuah Jajak Pendapat Web dengan PHP

by
Read Time:17 minsLanguages:

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

Jajak pendapat hampir di mana-mana di web hari ini, dan ada banyak layanan yang akan menyediakan jajak pendapat drop-in untuk Anda. Tetapi bagaimana jika Anda ingin membuatnya sendiri? Tutorial ini akan membawa Anda melalui langkah-langkah untuk membuat polling sederhana berbasis PHP, termasuk setup database, pengolahan voting, dan menampilkan jajak pendapat.


Langkah 1: Rencana & membuat Database

Untuk menyimpan hasil jajak pendapat, kita akan menyimpan tiga potong informasi:

  • Pengidentifikasi jawaban
  • Pengidentifikasi jawaban
  • Jumlah suara yang telah di dapat pertanyaan/jawaban

Untuk tutorial ini, kita akan menggunakan PDO dan SQLite. Jika Anda bekerja dengan SQLite3, Anda dapat membuat database baru melalui command line tool; Jika Anda menggunakan versi yang lebih tua, script PHP cepat akan melakukan trik. Inilah yang digunakan untuk tutorial ini:

Voting Database StructureVoting Database StructureVoting Database Structure

Script sederhana ini akan membuat SQLite database dalam direktori Anda jalankan. Tidak seperti mySQL, database di sini adalah flat file. Jika Anda akrab dengan SQL, create harus masuk akal bagi Anda, meskipun baris terakhir mungkin baru untuk beberapa orang:

Hal ini membuat sebuah composite key untuk database. Entri dalam kolom baik tidak harus unik untuk kolom tersebut, tetapi kombinasi dari dua harus unik.


Langkah 2: Desain polling HTML Anda 

Sebelum Anda mulai menulis PHP apapun, Anda perlu untuk memutuskan bagaimana untuk membuat jajak pendapat Anda dalam hal markup. Kita akan mencoba untuk menjaga markup semantik dan sesederhana mungkin. Polling Anda akan memiliki mungkin terlihat:

  • Pertanyaan yang menunggu untuk dijawab
  • hasil saat ini jajak pendapat

Dalam menulis HTML ini, beberapa kelas akan disertakan untuk membantu dengan CSS kemudian.

Poll View

Karena sebuah jajak pendapat adalah terutama daftar jawaban, kami akan memasukkan daftar unordered berisi jawaban. Untuk pertanyaan itu sendiri, kita akan menggunakan heading tag.

Yang sangat mendasar, tapi tidak termasuk setiap elemen form. Radio button adalah yang paling sesuai karena kita hanya akan mengizinkan satu jawaban per jajak pendapat. Juga, kita akan menggunakan label tag untuk mengasosiasikan jawaban dengan radio button yang tepat. Sekarang form HTML terlihat lebih seperti ini:

Itu sedikit lebih rumit, tapi tidak terlalu buruk. Masih sedikit lebih untuk menambahkan. Kita akan memasukan fieldset tag untuk membuka beberapa pilihan style, dan tentu saja kita perlu submit button!

Untuk setiap jawaban, tag LI baru ditambahkan dan nilai tombol radio bertambah. Akhirnya itu akan dilakukan oleh PHP kita. Tambahan HTML fieldset tag, dan paragraf dibungkus di sekitar button - yang akan digunakan oleh CSS kita.

Answer View

HTML akan menjadi hampir identik untuk tampilan jawaban. Item baris tag tidak mengandung elemen form dan kami akan menambahkan div yang dapat digunakan untuk menunjukkan persentase suara jawaban yang diterima. Berikut adalah bagaimana yang akan terlihat:

Ya, itu adalah gaya inline yang Anda lihat di sana. Style akan digenerate oleh PHP berdasarkan persentase saat ini jawaban setiap individu. Berikut adalah apa yang kita miliki sejauh ini:

Unstyled PollUnstyled PollUnstyled Poll

Langkah 3: Mempercantik Form

HTML yang kami buat dalam langkah terakhir ini tidak sangat menarik. Mari kita lihat apakah kita bisa memperbaikinya sedikit. Kita akan menggunakan perpustakaan CSS3 PIE (progresif Internet Explorer) indah sehingga kita bisa mendapatkan view serupa di semua browser. Untuk membuat Perpustakaan ini bekerja dengan baik, ada banyak kasus di mana Anda harus menerapkan posisi yang relatif elemen. Anda dapat membaca semua rincian situs Perpustakaan.

Style Form Tag

Kita akan menggunakan form tag sebagai container kita. Itu akan memiliki sudut-sudut bulat yang bagus, dan sedikit drop shadow. Style di bawah ini juga menentukan lebar, dan padding.

Key line di sini adalah atribut perilaku. Ini akan diabaikan oleh browser non-IE dan akan menambah fungsionalitas CSS3 IE6-8.

Basic stylingBasic stylingBasic styling

Masih jelek, tetapi sedikit ada perbaikan.

Kotak jawaban

Selanjutnya, kita akan membuat sebuah kotak yang bagus di sekitar jawaban dan menggunakan sedikit ilusi untuk membuat perbatasan terlihat inset oleh pixel. Hal ini dilakukan oleh mewarnai paling luar border (fieldset) warna interior yang sama, dan kemudian menggunakan daftar unordered tag sebagai border kita. Inilah CSS:

Basic stylingBasic stylingBasic styling

Style jawaban

Selanjutnya kita perlu menambahkan sedikit CSS untuk membuat pilihan kita terlihat lebih baik.

Anda mungkin bertanya mengapa kita menggunakan absolute posisi pada input dan floating label. Alasannya sederhana: jawaban multi-baris. Jika jawaban untuk pertanyaan polling Anda panjang, Anda ingin tombol radio untuk terlihat seperti sebuah peluru pada daftar unordered - menggantung. Ini akan menjaga teks dari membungkus sekitar itu jika beberapa baris.

Ada juga style penargetan IE khusus dengan * hack untuk menyebabkan button untuk baris atas dengan benar dalam IE6-8.

Kita juga perlu style bar digunakan untuk menampilkan hasil. Kami akan menambahkan sekarang:

Ada atribut baru lain di sini:-pie-background, yang memungkinkan kita untuk, dalam hubungannya dengan perpustakaan PIE, menggunakan latar belakang gradien di IE. Masih ada beberapa sentuhan untuk ditambahkan.

Pertanyaan dan Button

Default H4 mungkin tidak menjadi apa yang Anda mencari, jadi mari kita tambahkan beberapa styling.

Dan aku bukan penggemar tombol default, jadi kita akan menggunakan CSS sprite untuk menghidupkan sedikit.

Bagaimana tentang IE6? Tidak mendukung psudo-class hover! Kita dapat baik meninggalkan para pengguna keluar dalam dingin (mereka masih akan melihat keadaan default tombol) atau kita bisa menggunakan sedikit berlisensi GPL Perpustakaan indah lain, Whatever: hover.

Final Poll CSSFinal Poll CSSFinal Poll CSS

Terakhir

Untuk mengakomodasi beberapa kebiasaan IE6, unsur-unsur tertentu harus memiliki sesuatu yang disebut "HasLayout" memicu. Cara termudah untuk melakukannya adalah untuk menetapkan properti dari zoom untuk elemen-elemen ini. Properti akan diabaikan oleh browser non-IE.

Anda juga akan melihat ada border antara setiap pertanyaan. Ini dilakukan dengan kelas tambahan pada tag LI menentukan border. Kelas akan ditugaskan untuk semua tapi item terakhir oleh skrip PHP.

File CSS selesai terkandung di download.


Step 4: Membuat kelas PHP — memutuskan pada interface

Sekarang saatnya untuk membuat PHP untuk menghasilkan jajak pendapat, menunjukkan hasil, dan menangani vote. Saya ingin tetap menggunakan script sesederhana mungkin, jadi saya berencana user terlebih dahulu. Untuk membuat sebuah jajak pendapat di tempat tertentu di halaman, Anda akan menggunakan PHP berikut:

Hanya itu. Anda akan mengirim array ke constructor yang berisi pertanyaan diikuti dengan jawaban. Untuk melacak pertanyaan-pertanyaan dalam database, kami akan membuat hash MD5 pertanyaan untuk digunakan sebagai suatu pengenal.


Langkah 5: Menentukan Class Properti

Data tertentu yang akan dibutuhkan oleh setiap jajak pendapat; kita akan menyimpan beberapa ini di properti kelas. Kita harus menyimpan pertanyaan dan jawaban, HTML dasar, pengenal pertanyaan, dan beberapa informasi tentang cara menggambar Bar hasil. Inilah awal:

Konstanta awal akan digunakan dalam salah satu metode untuk membuatnya lebih mudah dibaca sehingga lebih mudah untuk mengetahui yang terjadi.

Catat dari sini masukan tersembunyi yang telah ditambahkan di sini. Ini adalah pertanyaan pengidentifikasi yang digunakan untuk menyimpan informasi ke database. Semua nilai-nilai dalam HTML dikelilingi oleh tanda persen akan diganti.


Step 6: Membuat jajak pendapat HTML atau jawaban

Karena itu adalah sudah memutuskan jajak pendapat akan dibuat dengan membuat sebuah objek, mari kita periksa metode __construct.

Di baris pertama, kami kupas pertanyaan dari tumpukan array dengan array_shift, dan menyimpannya dalam sebuah properti. Kami juga menyimpan pertanyaan, meninggalkan mereka sebagai array. Kami juga membuat pengenal pertanyaan di sini, dengan membuat md5 hash dari pertanyaan itu sendiri.

Selanjutnya tiga baris melakukan replace beberapa HTML. Pertama menetapkan form action untuk menunjuk pada halaman jajak pendapat adalah salah satu. Kedua menempatkan pengenal pertanyaan kami dalam form input hidden. Ketiga menempatkan pertanyaan kita ke HTML.

Di baris akhir konstruktor kami memeriksa jika user telah memberikan suara pada jajak pendapat ini tertentu, dan jika ia memiliki, kami menampilkan suara. Jika dia tidak, kami menunjukkan jajak pendapat.


Langkah 7: Generate jajak pendapat

keduanya menghasilkan jajak pendapat dan menghasilkan hasil yang sangat mirip. Untuk menjaga kode kita DRY kita break pembuatan ke tiga metode. Yang utama adalah "poll".

DRY: Don't Repeat YourselfDRY: Don't Repeat YourselfDRY: Don't Repeat Yourself

Berikut adalah rincian dari apa yang terjadi dalam fungsi ini:

baris 2 & 3: kita hanya perlu tombol vote jika user tidak memberikan suara. Di sini kita menentukan jika kita akan menggunakan tombol HTML atau tidak, dan kemudian memasukkan HTML, atau mengganti % tombol % pengganti dengan string kosong.

barix 6-8: jika kita tidak menunjukkan jajak pendapat, kita jelas perlu hasil, jadi di sini kita pergi mengambil mereka. Kami juga menghitung total votes cast untuk digunakan kemudian dalam menentukan persentase.

baris 11-12: ini menghasilkan LI tag HTML kami. Tergantung pada jika kita menunjukkan hasil jajak pendapat, atau menghasilkan HTML yang berbeda. Generasi HTML ini adalah menyerahkan ke dua fungsi:

  • pollLine
  • voteLine

baris 15: hanya dump data ke halaman.


Langkah 8: pollLine() metode

Ini adalah metode yang sangat sederhana, yang membawa index saat ini jawaban sebagai argumen.

Ia memeriksa jika ada jawaban setelah satu saat ini pada baris pertama, dan jika ada, berlaku kelas bordered tag LI tersebut. Jawaban terakhir tidak akan mendapatkan kelas ini, memungkinkan kita untuk mencapai efek visual yang dimaksudkan.


Langkah 9: voteLine() metode

Metode ini adalah mendapatkan 3 parameter dikirim ke dalamnya:

  • $answer: jawaban pertanyaan untuk baris ini
  • $result: jumlah suara pilihan yang didapat
  • $votes: jumlah suara vote dalam jajak pendapat ini

Dengan informasi tadi, LI Tag untuk hasil pemungutan suara dapat diproduksi.

Karena mungkin ada tidak ada suara pilihan, itu akan secara efektif meninggalkan $result unset. Jika kami mendeteksi ini kami akan memberikan nilai default 0 suara.

Selanjutnya, kami menentukan berapa persen suara punya pilihan dan akhirnya menggunakan properti scale untuk menentukan lebar, dalam piksel, yang harus dihasilkan bar. Kemudian kita akhirnya kembali HTML yang berisi semua informasi yang.


Langkah 10: Menulis getData() metode

Jika Anda melihat kembali sedikit, Anda akan melihat kita memanggil metode getData() yang didefinisikan sebagai metode statis di kelas. Mengapa statis? Karena jika kita memutuskan untuk meningkatkan jajak pendapat ini kemudian dengan membuat berbasis AJAX, kita ingin menakses ke metode tanpa penciptaan objek. Berikut adalah metodenya:

Pertanyaan ID adalah dikirim ke metode dan itu akan mengembalikan array yang berisi jawaban id dan jumlah suara yang memiliki jawaban. Jika jawaban belum ada suara, itu tidak memiliki entri dalam array, yang kami telah sudah berurusan dengan dalam metode voteLine().

Karena kesalahan database dalam jajak pendapat web terutama tragis, kita hanya akan mengembalikan array kosong jika satu terjadi. Pengguna akan mendapatkan 0 suara untuk setiap hasil. Dalam lingkungan produksi, Anda mungkin ingin untuk log kesalahan ini ke sebuah file, atau mengirim admin email.


Langkah 11: Penanganan suara

Kita akan menambahkan kedua metode statis kelas, dan ini akan menangani suara yang masuk. Suara akan dihitung hanya jika pengguna belum memilih sebelumnya (seperti yang ditentukan oleh cookie) dan setelah pengguna telah memilih kita akan menetapkan cookie menunjukkan ini.

Dalam jenis aplikasi web, hampir mustahil untuk menghentikan beberapa suara tanpa mengecualikan beberapa user yang sah. Menetapkan cookie adalah hanya dasar tindakan pencegahan.

Ini adalah salah satu metode yang lebih kompleks di kelas webPoll kita, dan kita akan melihatnya dalam tiga bagian.

Memanggil metode vote() yang akan di bagian atas halaman PHP kami, jadi hal pertama yang kita ingin lakukan adalah memutuskan apakah ada suara untuk memproses atau tidak. Pernyataan di atas adalah bagaimana kita menentukan ini. Berikut adalah apa yang dikatakan:

  • Jika tidak ada pertanyaan pengenal di POST data kami (OR!!)
  • Jika tidak ada jawaban pengenal di POST data kami (OR!!)
  • Jika cookie telah ditetapkan sudah pencocokan pengenal pertanyaan

Jika salah satu dari mereka benar, kita tidak perlu proses pemungutan suara, dan kami meninggalkan metode.

Ini terlihat jauh lebih rumit dari aslinya. Apa yang terjadi di sini adalah kita memeriksa jika jawaban tertentu yang telah mendapat suara sebelumnya. Jika belum kami buat record baru untuk jawaban itu, dan memberikan satu suara. Jika tidak, kami memperbarui record yang sudah ada. Jadi bagaimana itu yang memutuskan untuk dilakukan?

PDO exception magic.

Ingat pada awal kami membuat kami multi-kolom primary key? Ketika kita mencoba untuk memasukkan data ke dalam tabel yang sesuai dengan pasangan QID bantuan yang ada, exception thrown, dan khususnya exception kode 23000 (duplikat key).

Jika insert throws exception, kita akan memeriksa kode ex exception, dan jika cocok 23000, kami akan mencoba untuk meng-update record sebagai gantinya. Tentu saja jika insert gagal untuk alasan yang berbeda, atau gagal update juga, kita akan hanya masalah panggilan ke metode yang disebut db_error() yang hanya echos pesan galat generik. Seperti sebelumnya, lingkungan produksi akan log kesalahan ini dan/atau memberitahu admin.

Using PDO ExceptionsUsing PDO ExceptionsUsing PDO Exceptions

Akhirnya, pada akhir metode:

Dengan menggunakan rowCount() kami dapat memastikan bahwa kami telah diperbarui atau dimasukkan ke pemungutan suara. Jika suara telah berhasil terdaftar kami menetapkan kuki menunjukkan lebih banyak, menggunakan pengenal pertanyaan sebagai nama cookie.

Selain menetapkan cookie, kita mempopulasikan Super global $_COOKIE, jadi ketika menampilkan jajak pendapat, itu menunjukkan jawaban daripada menampilkan jajak pendapat lagi.


Langkah 12: Menempatkan itu semua ke dalam tindakan

Kami sudah ditulis dalam PHP, mengatur CSS dan HTML, sekarang saatnya untuk menempatkan itu semua ke dalam penggunaan. Dalam contoh ini, kita hanya akan drop segala sesuatu ke dalam halaman yang lain kosong. Di bagian paling atas halaman, masukkan berikut:

Penting bahwa ini menjadi bagian paling atas halaman, sebelum HTML apapun. Mengapa? Karena jika ada suara untuk memproses, cookie dapat ditulis, dan Anda tidak bisa menulis cookie setelah apa pun telah dikirim. emanggilan ke vote() metode statis kembali jika tidak ada data POST yang tepat untuk di proses.

Selanjutnya, kami akan memasukkan semua style yang kita menulis sebagai stylesheet terpisah. Juga, kita akan memiliki gaya tertentu hanya untuk IE yang disebutkan sebelumnya untuk mengaktifkan: hover psudo-class.

Di badan halaman HTML Anda, Anda akan drop di PHP berikut untuk menyisipkan jajak pendapat:

Itu saja! Terima kasih telah membaca. Ada ide, pertanyaan atau saran?

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.