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

Pemrograman Dengan Yii2: Menggunakan Ajax

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called How to Program With Yii2.
Programming With Yii2: Helpers
Programming With Yii2: Security

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

Final product image
What You'll Be Creating

Jika Anda bertanya, 'Apa itu Yii?', Periksa Pengantar Framework Yii, yang meninjau manfaat Yii dan menyertakan ikhtisar Yii 2.0, yang dirilis pada Oktober 2014.

Dalam seri Programming With Yii2 ini, saya membimbing pembaca dalam menggunakan Framework Yii2 untuk PHP. Dalam tutorial ini, kita akan menjelajahi implementasi halaman interaktif menggunakan Ajax. Secara khusus, saya akan menyoroti penggunaan Ajax di dua area aplikasi Perencana Pertemuan, yang saya tulis dalam seri Membangun Startup Anda secara paralel.

Pertama, kami akan meninjau cara kami memuat Google Map di halaman sebagai tanggapan terhadap pengguna yang memasuki tempat tertentu. Seperti yang ditunjukkan di bawah ini, setelah saya memasukkan Plum Bistro dan klik kembali, peta di sebelah kanan memuat secara dinamis tanpa refresh halaman.

Yii Ajax - Google Maps UX Example

Kedua, saya akan menunjukkan kepada Anda bagaimana kami mencatat perubahan yang dilakukan pengguna ke pertemuan selama fase perencanaan. Perencana Pertemuan memudahkan peserta untuk mengidentifikasi tempat dan waktu tanggal pilihan mereka dan akhirnya memilih yang terakhir.

Yii Ajax - Meeting Planner UX Example

Ajax membuat proses lebih mudah dan lebih cepat, memungkinkan orang untuk menggeser sejumlah kontrol saklar untuk menunjukkan preferensi mereka tanpa penyegaran halaman.

Sekadar mengingatkan, saya berpartisipasi dalam rangkaian komentar di bawah ini. Saya terutama tertarik jika Anda memiliki pendekatan yang berbeda, ide tambahan atau ingin menyarankan topik untuk tutorial selanjutnya. Jika Anda memiliki pertanyaan atau saran topik, silakan posting di bawah ini. Anda juga dapat menghubungi saya di Twitter @reifman secara langsung.

Menggunakan Ajax dengan Yii

Yii Ajax - Wikipedia Ajax Flow vs HTTP
Oleh DanielSHaischt, melalui Wikimedia Commons, CC BY-SA 3.0

Jika Anda baru memulai dengan Ajax dan ingin memulai dengan lambat, Yii Playground memiliki dua contoh sederhana Ajax yang mungkin berguna untuk Anda tinjau. Satu mengubah teks pada halaman melalui Ajax, dan yang lain memuat respons ke formulir pada halaman yang sama, keduanya tanpa menyegarkan, dan masing-masing menyertakan sampel kode terperinci.

Yii Ajax - Yii Playground AJAX Examples

Mari selami dua contoh utama kami. Anda dapat menemukan semua sumber untuk contoh-contoh ini dalam repositori Kode Perencana Pertemuan di GitHub.

Secara Interaktif Menampilkan Google Maps

Bangunan Input Form

Saat Membuat formulir Tempat (/frontend/views/place/create_place_google.php) awalnya memuat, ini termasuk widget pencarian langsung Google Places:

Yii Ajax - Create a Place in Meeting Planner Using Google Places

Mengintegrasikan API JavaScript Google Places

The form loads the Google Maps JavaScript library and connects it to the place-searchbox input field:

Bentuk parsial _formPlaceGoogle.php berisi beberapa bidang tersembunyi di mana hasil dari peta dapat disimpan sebelum seluruh halaman dikirimkan, serta div tersembunyi untuk menampilkan peta melalui Ajax.

Meja Meeting Planner Place menyimpan nama Google, place_id, lokasi, situs web, sekitar dan full_address untuk penggunaan di seluruh aplikasi.

MapAsset yang disertakan di atas memuat file create_place.js kami yang beroperasi antara Google dan formulir kami; pada dasarnya mengelola transmisi dan respons data melalui Ajax.

Ajax Kita mengelola JavaScript

Saya akan memandu Anda melalui create_place.js terpotong-potong. Pertama, ada setupListeners(), yang dipanggil oleh bentuk induk:

Saat pengguna mulai mengetik, widget akan turun ke opsi ketikahead untuk tempat-tempat di dunia nyata, dan acara place_changed diproses dengan setiap penekanan tombol. Pendengar keydown di atas mencegah kunci pengembalian (ASCII 13 atau 0xD untuk Anda hex Geeks) dari mengirimkan formulir.

Inilah yang terlihat saat Anda mengetik. Saya memasukkan Plum untuk Plum Bistro:

Yii Ajax - Google Places Dropdown List

Mengumpulkan Peta Hasil dan Data-nya

Jika orang tersebut telah memilih masuk atau mengklik tempat di dropdown, maka populateResult() dipanggil; jika tidak, kita tidak melakukan apa-apa.

Ini mengisi semua field tersembunyi dengan data dari Google dan memanggil loadMap() untuk menampilkan peta:

Yii Ajax - Google Places Load Map via Ajax

Fungsi loadMap() sangat spesifik untuk Google Place API dan menampilkan peta yang Anda lihat di atas di kanan:

Pengalaman pengguna cepat dan mengesankan. Cobalah!

Secara dinamis rekaman pertemuan perubahan

Selanjutnya, mari kita lihat bagaimana kami mencatat perubahan pada rencana pertemuan secara waktu nyata. Tidak ada Google API di sini; itu lebih vanilla AJAX dalam Framework Yii.

Saat orang menambahkan tanggal, waktu, dan tempat ke rencana pertemuan mereka, Anda akan melihat halaman seperti ini:

Yii Ajax - Meeting Planner Planning View with Sliders

Kolom You and Them menunjukkan kesukaan masing-masing peserta terhadap tempat dan tanggal waktu. Penggeser Pilih yang lebih besar memungkinkan orang untuk membuat keputusan akhir tentang tempat dan waktu rapat.

Ada banyak data untuk dikumpulkan dari orang-orang, dan kami tidak ingin memerlukan penyegaran halaman dengan setiap perubahan. Ajax adalah solusi ideal untuk masalah ini.

Saya akan menelusuri kode untuk panel Meeting-Place di atas. Panel Meeting-Time di atas berfungsi sama.

Ikuti Kode

Karena framework MVC dan keinginan saya untuk menggunakan kembali kode parsial, aliran di sini mungkin merasa sulit untuk diikuti. Fungsi pembantu PHP dan JavaScript kadang-kadang harus ditempatkan di file orangtua, tidak parsial mereka yang paling erat terkait dengan. Saya akan mencoba untuk memberikan Anda gambaran pertama. Saya mendorong Anda untuk membuat beberapa tiket membacanya untuk sepenuhnya memahami ini. Dan lagi, Anda dapat menelusuri kode melalui GitHub.

Petunjuk: Perlu diingat bahwa nama file untuk parsial biasanya dimulai dengan garis bawah.

  1. Halaman perencana Pertemuan dimuat di /frontend/views/meeting/view.php. File ini juga menyertakan fungsi JavaScript pembantu untuk mengelola status tombol seperti Kirim dan Selesaikan (misal. Setelah perubahan ini, dapatkah pengguna sekarang mengirim undangan ini? Dengan Perencana Pertemuan, satu tempat dan satu waktu umumnya harus dipilih sebelum dapat dikirim) dan menampilkan pemberitahuan visual bahwa perubahan akan dikirim melalui email ke peserta lain ketika pengguna selesai.
  2. Saat menampilkan Dimana panel untuk tempat, memuat /frontend/views/meeting-place/_panel.php. File ini termasuk fungsi PHP pembantu showOwnerStatus() dan showParticipantStatus(), yang akan digunakan kembali oleh anaknya, _list.php. Namun, yang paling penting, _panel.php menyertakan metode JavaScript untuk acara Bootswap slider switchChange.
  3. File _panel.php menggunakan _list.php untuk menampilkan setiap baris individu untuk setiap tempat. File ini akan merender slider Bootstrap dengan memanggil fungsi _panel.php showOwnerStatus() dan showParticipantStatus().
  4. Fungsi switchChange akan membuat panggilan Ajax ke MeetingPlaceChoiceController.php.
  5. Dan akhirnya, MeetingPlaceChoiceController.php memanggil model MeetingPlaceChoice.php untuk mencatat perubahan dalam database.

Maaf, penempatan kode yang relevan rumit dan menyebar.

Sekarang, saya akan memandu Anda melalui komponen kunci selangkah demi selangkah.

Kode Ajax Langkah demi Langkah

Berikut adalah Meeting/view.php rendering Meeting-Place/_panel.php. Ini menampilkan sebagian untuk baris tempat yang mungkin dan pilihan peserta:

Di bawah ini adalah JavaScript yang terkait dengan tindakan yang menanggapi hasil Ajax tetapi tidak secara langsung diperlukan untuk Ajax. Anda tidak perlu memahami apa fungsi-fungsi ini untuk memahami contoh Ajax ini, tetapi saya memasukkannya karena dipanggil untuk menanggapi peristiwa Ajax.

Di sini, Meeting-Place/_panel.php, tabel yang menunjukkan tempat dan pilihan dibuat, menerapkan _list.php:

Lebih penting lagi, ini juga termasuk JavaScript di bawah ini, yang kami gunakan untuk membuat panggilan Ajax ketika pengguna memindahkan switch, mengubah statusnya. Fungsi pemilih sesuai dengan slider pilihan biru yang lebih besar, sementara fungsi pilihan sesuai dengan slider preferensi.

Fungsi di atas membuat panggilan ke actionSet() di MeetingPlaceChoiceController untuk menanggapi perubahan beralih menggunakan permintaan Ajax:

Tindakan pengontrol yang merespons melalui Ajax harus memiliki format respons JSON (cara ini Yii tahu mereka tidak dimaksudkan untuk mengirimkan HTML):

Berikut metode MeetingPlaceChoice::set(), yang mencatat tindakan pengguna dalam basis data dan membuat entri MeetingLog, yang melihat semua perubahan selama perencanaan.

Fitur Terkait Perubahan Pertemuan

Dalam Meeting Planner, saya menyimpan catatan setiap perubahan. Ini memungkinkan saya untuk mengetahui kapan beberapa menit telah berlalu sejak perubahan terakhir seseorang dan memberi tahu peserta rapat lainnya. Ini adalah eksperimen yang saya coba dengan layanan ini, daripada mengharuskan peserta untuk mengirimkan mengirimkan setiap kali mereka ingin melakukan perubahan.

Namun, ini membutuhkan pelatihan untuk memahami bahwa boleh saja untuk mengubahnya dan meninggalkannya, yaitu menutup jendela browser. Jadi fungsi displayNotifier() menampilkan beberapa peringatan flash untuk membantu hal ini — Saya akan memolesnya dari waktu ke waktu, dan menghapusnya untuk pengguna yang berpengalaman.

The MeetingLog juga memungkinkan saya untuk menghasilkan ringkasan teks dari sejarah perencanaan pertemuan. Jika Anda tertarik untuk mempelajari lebih lanjut tentang ini, saya telah menulis tentang hal itu dalam Membangun Startup Anda: Memberitahu Orang Tentang Perubahan Pertemuan dan Menyampaikan Pemberitahuan.

Apa berikutnya?

Saya harap contoh-contoh ini membantu Anda memahami dasar-dasar Ajax dalam Yii. Jika Anda tertarik dengan Ajax yang lebih maju, saya berencana memasukkan formulir Ajax yang dimuat dalam rangkaian Perencana Pertemuan. Dan, diakui, Ajax adalah area di mana komunitas Yii belum berbagi banyak contoh. Secara umum, Ajax bekerja sama dalam Yii seperti halnya di PHP dan framework lainnya, sehingga Anda dapat belajar dari contoh-contoh dari komunitas framework lainnya.

Tonton tutorial mendatang dalam seri Programming With Yii2 kami karena kami terus menyelam ke dalam berbagai aspek framework. Anda juga mungkin ingin memeriksa seri Membangun Startup Anda Dengan PHP kami, yang menggunakan template canggih Yii2 saat kami membangun aplikasi dunia nyata.

Jika Anda ingin tahu kapan tutorial Yii2 berikutnya tiba, ikuti saya @reifman di Twitter atau periksa halaman instruktur saya. Halaman instruktur saya akan mencakup semua artikel dari seri ini segera setelah diterbitkan.

Tautan yang Berhubungan

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.