Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Yii
Code

Pengaturcaraan 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

Malay (Melayu) translation by Meyria (you can also view the original English article)

Final product image
What You'll Be Creating

Jika anda bertanya, "Apa Yii?", Lihat Pengenalan kepada Rangka Kerja Yii, yang mengkaji manfaat Yii dan merangkumi gambaran keseluruhan Yii 2.0, dikeluarkan pada bulan Oktober 2014.

Dalam Pengaturcaraan ini Dengan siri Yii2, saya membimbing para pembaca menggunakan Rangka Kerja Yii2 untuk PHP. Dalam tutorial ini, kita akan meneroka pelaksanaan laman interaktif menggunakan Ajax. Secara khusus, saya akan menekankan penggunaan Ajax dalam dua bidang permohonan Mesyuarat Perancang, iaitu I 'm writting siri permulaan anda bangunan ini tentang secara selari.

Mula-mula, kami akan menyemak bagaimana kami memuat Peta Google pada halaman sebagai tindak balas kepada pengguna yang memasuki tempat tertentu. Seperti yang ditunjukkan di bawah, selepas saya masukkan Plum Bistro dan klik pulangan, Peta untuk beban betul dinamik tanpa halaman Muat semula.

Yii Ajax - Google Maps UX Example

Kedua, saya akan menunjukkan kepada anda bagaimana kami merekodkan perubahan pengguna membuat ke mesyuarat semasa fasa perancangan. Perancang Mesyuarat memudahkan para peserta untuk mengenal pasti tempat pilihan mereka dan masa tarikh dan akhirnya memilih yang terakhir.

Yii Ajax - Meeting Planner UX Example

Ajax membuat proses lebih mudah dan lebih cepat, yang membolehkan pengguna meluncurkan beberapa kawalan suis untuk menunjukkan pilihan mereka tanpa sebarang halaman menyegarkan.

Hanya peringatan, saya mengambil bahagian dalam benang komen di bawah. Saya amat berminat jika anda mempunyai pendekatan yang berbeza, idea tambahan atau ingin mencadangkan topik untuk tutorial masa depan. Jika anda mempunyai soalan atau cadangan topik, sila pos di bawah. Anda juga boleh 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

Sekiranya anda baru bermula dengan Ajax dan mahu mula perlahan, Yii Playground mempunyai dua contoh mudah Ajax yang boleh membantu anda untuk meninjau. Satu perubahan teks pada halaman melalui Ajax, dan beban lain menerima respons pada borang pada halaman yang sama, kedua-duanya tanpa menyegarkan, dan masing-masing mengandungi sampel kod terperinci.

Yii Ajax - Yii Playground AJAX Examples

Mari kita menyelami dua contoh utama kami. Anda boleh menemui semua sumber untuk contoh ini dalam repositori kod Perancang Mesyuarat di GitHub.

Interaktif Menampilkan Peta Google

Membina Borang Input

Apabila borang Buat Tempat (/frontend/views/place/create_place_google.php) dimuatkan terlebih dahulu, ia termasuk widget carian Google Places secara langsung:

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

Mengintegrasikan API JavaScript Tempat Google

Borang memuatkan pustaka Google Maps JavaScript dan menghubungkannya ke medan input kotak carian tempat:

Borang _formPlaceGoogle.php sebahagiannya mengandungi beberapa medan tersembunyi di mana hasil dari peta dapat disimpan sebelum seluruh halaman diserahkan, serta div tersembunyi untuk memaparkan peta melalui Ajax.

Jadual Perancang Mesyuarat Tempat menyimpan nama Google, place_id, lokasi, laman web, kawasan sekitar dan full_address untuk penggunaan sepanjang aplikasi.

MapAsset termasuk di atas memuat fail create_place.js kami yang beroperasi di antara Google dan borang kami; ia pada dasarnya menguruskan penghantaran dan tindak balas data melalui Ajax.

Ajax Mengurus JavaScript Kami

Saya akan memandu anda melalui create_place.js dalam keping. Pertama, terdapat setupListeners(), yang dipanggil oleh borang induk:

Apabila pengguna mula menaip, widget jatuh ke bawah pilihan typeahead untuk tempat dunia sebenar, dan acara place_changed diproses dengan setiap akhbar utama. Pendengar keydown di atas menghalang kunci kembali (ASCII 13 atau 0xD untuk anda hex geeks) daripada menyerahkan borang.

Inilah yang kelihatan seperti semasa anda menaip. Saya memasuki Plum untuk Plum Bistro:

Yii Ajax - Google Places Dropdown List

Mengumpul Peta Hasil dan Datanya

Sekiranya orang itu telah memilih masuk atau diklik pada tempat dalam dropdown, maka populateResult() dipanggil; jika tidak, kami tidak berbuat apa-apa.

Ini mengisi semua medan tersembunyi dengan data dari Google dan panggilan loadMap() untuk memaparkan peta:

Yii Ajax - Google Places Load Map via Ajax

Fungsi loadMap() sangat spesifik untuk API Tempat Google dan memaparkan peta yang anda lihat di sebelah kanan:

Pengalaman pengguna pantas dan mengagumkan. Cuba ia!

Saya sangat berminat jika anda mempunyai pemikiran tambahan atau ingin mencadangkan topik untuk tutorial masa depan.

Selanjutnya, mari kita melihat bagaimana kita merekod perubahan kepada rancangan mesyuarat dalam masa nyata. Tiada API Google di sini; ia lebih vanili AJAX dalam Rangka Kerja Yii.

Apabila orang menambah tarikh, masa dan tempat untuk rancangan mesyuarat mereka, anda akan melihat halaman seperti ini:

Yii Ajax - Meeting Planner Planning View with Sliders

Lajur Anda dan Mereka menunjukkan kesesuaian setiap peserta ke tempat-tempat dan masa tarikh. Pilih slider yang lebih besar membolehkan orang membuat keputusan muktamad mengenai tempat pertemuan dan masa.

Terdapat banyak data untuk dikumpulkan daripada orang, dan kami tidak mahu memerlukan halaman menyegarkan dengan setiap perubahan. Ajax adalah penyelesaian yang ideal untuk masalah ini.

Saya akan berjalan melalui kod untuk panel Mesyuarat di atas. Panel Waktu Mesyuarat di atas berfungsi sama.

Mengikuti Kod

Kerana rangka kerja MVC dan keinginan saya untuk menggunakan semula sebahagian kodial, aliran di sini mungkin sukar untuk diikuti. Fungsi pembantu PHP dan JavaScript kadangkala terpaksa diletakkan di dalam fail induk, bukan sebahagiannya mereka paling dekat dengannya. Saya akan cuba memberikan anda gambaran terlebih dahulu. Saya menggalakkan anda untuk membuat beberapa pas bacaan untuk memahami sepenuhnya. Dan sekali lagi, anda boleh menyemak kod melalui GitHub.

Petunjuk: Perlu diingat bahawa nama fail untuk parsial biasanya bermula dengan garis bawah.

  1. Halaman perancang mesyuarat dimuatkan di /frontend/views/meeting/view.php. Fail ini juga termasuk fungsi pembantu JavaScript untuk menguruskan keadaan butang seperti Hantar dan Menyelesaikan (berikutan perubahan ini, bolehkah pengguna kini menghantar jemputan ini? Dengan Perancang Mesyuarat, satu tempat dan satu kali pada amnya mesti dipilih sebelum ia boleh dihantar) dan memaparkan pemberitahuan visual bahawa perubahan akan dihantar kepada peserta lain apabila pengguna selesai.
  2. Apabila memaparkan panel Di mana untuk tempat, ia memuat /frontend/views/meeting-place/_panel.php. Fail ini termasuk fungsi penolong PHP showOwnerStatus() dan showParticipantStatus(), yang akan digunakan semula oleh anaknya, _list.php. Tetapi, yang paling penting, _panel.php termasuk kaedah JavaScript untuk acara pengganti slider Bootstrap.
  3. Fail _panel.php menggunakan _list.php untuk memaparkan setiap baris individu untuk setiap tempat. Fail ini akan menjadikan 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 merekodkan perubahan dalam pangkalan data.

Saya minta maaf penempatan kod berkaitan rumit dan tersebar.

Sekarang, saya akan membimbing anda melalui komponen utama langkah demi langkah.

Kod Ajax Langkah demi Langkah

Di sini Mesyuarat/view.php rendering Meeting-Place/_panel.php. Ini memaparkan sebahagian untuk baris tempat yang mungkin dan pilihan para peserta:

Di bawah ini adalah JavaScript berkaitan dengan tindakan yang bertindak balas terhadap hasil Ajax tetapi tidak diperlukan secara langsung untuk Ajax. Anda tidak perlu memahami apa fungsi ini untuk memahami contoh Ajax ini, tetapi saya menyertakannya kerana ia dipanggil sebagai tindak balas kepada peristiwa Ajax.

Di Tempat Mesyuarat / _panel.php, jadual yang menunjukkan tempat dan pilihan dibuat, menggunakan _list.php:

Lebih penting lagi, ia juga termasuk JavaScript di bawah, yang kami gunakan untuk membuat panggilan Ajax apabila pengguna memindahkan suis, menukar keadaannya. Fungsi PEMILIH sepadan dengan penggelongsor biru pilihan lebih besar, manakala fungsi-fungsi pilihan sesuai dengan slider keutamaan.

Fungsi-fungsi di atas membuat panggilan ke actionSet() dalam MeetingPlaceChoiceController untuk bertindak balas terhadap perubahan suis menggunakan permintaan Ajax:

Tindakan pengawal yang bertindak balas melalui Ajax perlu mempunyai format respons JSON (dengan cara ini Yii tahu mereka tidak dimaksudkan untuk menyampaikan HTML):

Berikut adalah kaedah MeetingPlaceChoice :: set(), yang merekod tindakan pengguna dalam pangkalan data dan membuat entri MeetingLog, yang mengawasi semua perubahan semasa perancangan.

Ciri-ciri Berkaitan Perubahan Mesyuarat

Dalam Perancang Mesyuarat, saya menyimpan log setiap perubahan. Ini membolehkan saya untuk tahu Bilakah beberapa minit sudah berlalu sejak perubahan lepas seseorang dan memaklumkan kepada peserta mesyuarat lain. Ini satu eksperimen yang saya cuba dengan perkhidmatan ini, dan bukannya menghendaki peserta kalahkan setiap kali mereka ingin membuat perubahan.

Walau bagaimanapun, ini memerlukan latihan mereka untuk memahaminya adalah baik-baik saja untuk mengubahnya dan tinggalkan ia, iaitu menutup tetingkap pelayar. Jadi fungsi displayNotifier() memaparkan beberapa kilat kilat untuk membantu dengan ini-saya akhirnya akan menggilap ini dari masa ke masa, dan membuangnya untuk pengguna berpengalaman.

MeetingLog juga membolehkan saya menghasilkan ringkasan teks mengenai sejarah perancangan mesyuarat. Jika anda berminat untuk mempelajari lebih lanjut mengenai ini, saya telah menulis tentangnya dalam Membina Permulaan Anda: Memberitahu Orang Mengenai Perubahan Mesyuarat dan Pemberitahuan Makluman.

Apa yang akan datang?

Saya harap contoh-contoh ini membantu anda memahami asas-asas Ajax dalam Yii. Jika anda berminat dengan Ajax yang lebih maju, saya merancang untuk memasukkan borang yang dimuatkan Ajax dalam siri Perancang Mesyuarat. Dan, diakui, Ajax adalah kawasan di mana komunitas Yii tidak banyak berkongsi banyak contoh. Pada umumnya, Ajax berfungsi sama seperti Yii seperti yang dilakukan dalam PHP dan kerangka lain, sehingga anda dapat belajar dari contoh dari komunitas kerangka kerja yang lain.

Tonton tutorial yang akan datang dalam Pemrograman kami Dengan siri Yii2 kerana kami terus menyelam ke dalam pelbagai aspek rangka kerja. Anda juga mungkin ingin memeriksa Bangunan Kami Permulaan Dengan siri PHP, yang menggunakan templat maju Yii2 sebagai kami membina aplikasi dunia nyata.

Jika anda ingin tahu apabila tutorial Yii2 yang akan datang, ikut saya @reifman di Twitter atau semak halaman pengajar saya. Halaman pengajar saya akan merangkumi semua artikel dari siri ini sebaik sahaja ia diterbitkan.

Pautan Berkaitan

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.