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

Membangun jQuery Plugin "Jajak pendapat" yang canggih

by
Read Time:3 minsLanguages:

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

Dalam tutorial ini kita akan menciptakan sebuah plugin jQuery dari awal hingga selesai; plugin ini akan memungkinkan kita (atau pengembang lain) untuk dengan mudah menambahkan sebuah widget jajak pendapat sederhana ke halaman web atau blog. Dengan jajak pendapat widget, maksudku area di mana pertanyaan yang diajukan pengunjung yang disarankan untuk menjawab. Setelah mereka telah menjawab pertanyaan hasil jajak pendapat akan kemudian ditampilkan.


Produk akhir

Di atas video dan gambar di bawah ini menunjukkan apa yang akan kita ' kerjakan:


Plugin akan menggunakan kelebihan jQuery untuk menghasilkan struktur DOM widget, serta menangkap jawaban untuk pertanyaan dan memasukannya ke server untuk penyimpanan. Kita akan menggunakan sedikit PHP dasar untuk menambahkan voting terbaru ke MySQL database dan kemudian echo kembali hasil terbaru di sebuah objek JSON. jQuery akan kemudian digunakan untuk memproses respon dan menampilkan hasil (seperti yang ditunjukkan di atas) dalam widget.

Meskipun instalasi dan konfigurasi web server, PHP dan MySQL berada di luar cakupan tutorial ini, kita akan melihat semua langkah-langkah yang diperlukan termasuk menyiapkan database. Semua dalam semua, kami akan bekerja dengan CSS, HTML, jQuery, PHP, MySQL dan JSON selama tutorial ini.


Persiapan kerja

Kita harus mengatur area pengembangan pertama-tama. Untuk menjalankan contoh ini pada komputer desktop (untuk pengembangan, pengujian dll) kami akan perlu untuk menjalankan contoh file dari direktori server web kami yang dapat melayani konten. Saya menggunakan Apache dan memiliki folder setup pada drive C saya yang disebut apache site. Ini adalah direktori konten penayangan dari localhost saya. Dalam folder ini (atau setara dengan folder pada sistem Anda), kita harus membuat folder baru bernama poll. Ini adalah dimana semua file contoh kita akan disimpan.

Untuk membuat sebuah plugin jQuery, kita juga akan memerlukan salinan jQuery itu sendiri; Versi terbaru adalah 1.31.js dan dapat ditemukan di http://jquery.com. Downliad dan masuken ke direktori poll yang baru kami buat. Sejauh ini folder akan terlihat seperti ini di Explorer (atau setara file explorer aplikasi):


Selanjutnya kita dapat mengatur database yang akan digunakan untuk menyimpan hasil jajak pendapat; kita dapat melakukan ini dengan cukup mudah menggunakan MySQL Command Line Interface(CLI), meskipun database front-end GUI juga dapat digunakan. Buka MySQL CLI dan buat database baru disebut poll yang menggunakan perintah berikut:

Perintah CREATE DATABASE melakukan persis apa yang tertulis dan menciptakan database baru dengan nama tertentu. Setelah kita memiliki database kita harus membuat sebuah tabel baru di mana untuk menyimpan hasil jajak pendapat. Sebelum kita dapat melakukan ini kita perlu pilih database baru; perinhtah USE akan melakukan ini:

Untuk membuat sebuah tabel baru kami menggunakan perintah CREATE TABLE, menetapkan nama untuk kolom dalam tabel:

Jika kami deploy ini di situs kami dan memulai dengan sebuah tabel kosong, tapi agar kita dapat melihat beberapa hasil tanpa menjawab pertanyaan diri berulang kali, kita bisa masuk beberapa dummy data ke dalam tabel. Cara termudah dan tercepat untuk melakukan ini untuk kecil set data (hanya 5 baris dalam contoh ini) adalah untuk melakukannya secara manual, yang dapat kita lakukan dengan serangkaian perintah berikut:

Perintah harusnya cukup jelas, hanya ingat untuk tekan enter setelah setiap baris. Satu-satunya poin yang layak dicatat adalah bahwa baris pertama adalah choice0 bukan choice1 yang dilakukan untuk membuat bekerja dengan objek JSON di script kami lebih mudah. Pada titik ini CLI Anda harus muncul sesuatu seperti screenshot berikut:


Kita selesai dengan CLI sekarang sehingga kita dapat keluar dan beralih ke tugas berikutnya membuat plugin.


Membangun Plugin

Kami memiliki sejumlah tugas untuk diselesaikan dengan kode plugin; kita perlu membuat struktur DOM untuk widget, tambahkan handler yang akan mendengarkan submision dari pemilihan, masukan hasil ke server dan proses respon, serta menampilkan hasil setelah diolah. Kami juga dapat menambahkan beberapa pemanis dalam form pesan kesalahan dan menganimasikan hasil.

Itu akan mengambil beberapa baris kode pastinya, tetapi harus layak sebagai kita akan bisa melihat betapa mudahnya untuk membuat sebuah plugin yang kuat, fungsional dan maju yang menyediakan interaktivitas dan menambahkan nilai ke halaman. Biarkan memulai; dalam sebuah file baru dalam teks editor Tambahkan kode berikut:

Advertisement
Did you find this post useful?
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.