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

Programming sa Pamamagitan ng Yii2: Ang paggamit ng 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

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Final product image
What You'll Be Creating

Kung nagtatanong ka kung ano ba ang Yii, tignan mo ang naunang tutoryal ko na pinamagatang Introduction to the Yii Framework. Tinalakay ng naunang tutoryal ang mga benepisyo ng Yii at ang pangkalahatang-ideya tungkol sa Yii 2.0 na inilabas noong Oktubre 2014.

Sa serye ito na Programming sa Pamamagitan ng Yii2, ginagabayan ko ang mga nagbabasa gamit ang Yii2 Framework para sa PHP. Sa tutorial na ito, ating paguusapan ang pagpapatupad ng mga interactive na mga pahina gamit ang Ajax.  Sa partikular, tutuunan ko ng pansin ang paggamit ng Ajax sa dalawang lugar ng Meeting Planner application, habang kasabay kong sinusulat para sa Building Ang iyong Startup serye.

Una, susuriin natin kung paano mgload ang isang Google Map sa pahina bilang tugon sa pagpasok ng isang partikular na lugar.  Tulad ng ipinapakita sa ibaba, matapos kong ipasok Plum Bistro at i-click return, ang mapa sa kanan naglo-load dynamic na walang-refresh ng pahina.

Yii Ajax - Google Maps UX Example

Pangalawa, ipapakita ko sa kung paano i-record ang mga pagbabago ng isang gumagamit sa isang pagpupulong habang nasa pagpaplano na phase.  Ang Meeting Planner ay pinapadali para sa mga gumagamit upang makilala ang kanilang mga ginustong mga lugar at oras ng petsa at pagkatapos sa huli piliin ang gagamitin.

Yii Ajax - Meeting Planner UX Example

Ginagawa ng Ajax na masmadali at mas mabilis ang proseso, na nagpapahintulot sa mga tao upang i-slide ang isang bilang ng mga kontrol switch upang ipahiwatig ang kanilang mga kagustuhan nang walang anumang refresh ng pahina.

Isang paalala, ako ay lumalahok sa mga thread ng komento sa ibaba.  Ako ay interesado kung mayroon kang iba't ibang approach na ito, karagdagang mga ideya o nais upang magmungkahi ng mga paksa para sa hinaharap na mga tutorial.  Kung mayroon kang tanong o topic suggestion, paki-post sa ibaba.  Maaari mo ring maabot ako Twitter @reifman direkta.

Ang paggamit ng Ajax Sa Yii

Yii Ajax - Wikipedia Ajax Flow vs HTTP
Nagdaan DanielSHaischt, via Wikimedia Commons, CC BY-SA 3.0

Kung ikaw ay lamang nagsisimula sa Ajax at nais upang simulan ang mabagal, ang Yii Playground ay may dalawang simpleng halimbawa ng Ajax na maaaring maging kapaki-pakinabang para sa iyo upang suriin.  Isang pagbabago ng teksto sa isang pahina sa pamamagitan ng Ajax, at isa pa na naglo-load ang mga tugon sa isang form sa parehong pahina, parehong walang nagre-refresh, at ang bawat may kasamang detalyadong sample code.

Yii Ajax - Yii Playground AJAX Examples

Pagusapan natin ang dalawang pangunahing mga halimbawa.  Maaari mong makita ang lahat ng mga mapagkukunan ng mga halimbawang ito sa Meeting Planner code repository sa GitHub.

Pagpapakita ng Google Maps Interactively

Building ang Input Form

Kapag ang Lumikha ng isang Lugar form (/frontend/views/place/create_place_google.php) una na naglo-load, may kasama itong ang Google Places live na widget ng paghahanap:

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

Pagsasama ng Google Places JavaScript API

Ang form na naglo-load ang Google Maps JavaScript library at nag-uugnay ito sa field ng input place-searchbox:

Ang _formPlaceGoogle.php bahagyang form na may kasamang ilang mga nakatagong mga patlang na kung saan ang mga resulta mula sa mapa ay maaaring ma-imbak sa harap ng buong pahina ay isinumite, pati na rin isang nakatagong div upang ipakita ang mga mapa sa pamamagitan ng Ajax.

Nag-iimbak ng Meeting Planner Place talahanayan pangalan sa Google, place_id, lokasyon, website, paligid at full_address para sa paggamit sa buong application.

Ang MapAsset kasama sa itaas ay naglo-load ang aming create_place.js file na kung saan ay nagpapatakbo ng sa pagitan ng Google at ang aming form; ito talaga namamahala sa ihatid at tugon ng data sa pamamagitan ng Ajax.

Ang aming Ajax Pamamahala JavaScript 

Kukunin ko na gabayan ka sa create_place.js sa mga piraso.  Una, mayroong setupListeners (), na tinatawag sa pamamagitan ng form sa magulang:

Bilang ang user ay nagsisimula pag-type, ang widget ay bumaba down na opsyon Typeahead para sa real-world na mga lugar, at ang place_changed kaganapan ay na-proseso sa bawat key press.  Ang keydown listener itaas pinipigilan ang return key (ASCII 13 o 0xD para sa iyo hex geeks) mula sa pagsusumite ng form.

Narito ang kung ano ang mukhang habang nagta-type ka.  Ako pagpasok Plum para sa Plum Bistro:

Yii Ajax - Google Places Dropdown List

Pagkolekta ng Nagresultang Map at Nito Data

Kung ang tao ay may mga napiling pumasok o nag-click sa isang lugar sa dropdown, at pagkatapos ay populateResult () ay tinatawag; kung hindi, wala tayong ginagawa. 

Ito ay pinunan ang lahat ng mga nakatagong mga patlang na may data mula sa Google at mga tawag loadMap () upang ipakita ang mga mapa:

Yii Ajax - Google Places Load Map via Ajax

Ang loadMap() function ay tunay na tiyak sa Place API ng Google at ipinapakita ang mapa nakikita ninyo sa itaas sa kanan:

Ang karanasan ng gumagamit ay mabilis at kahanga-hangang.  Subukan mo!

Dynamic Recording Meeting Pagbabago

Susunod, tingnan natin kung paano namin i-record ang mga pagbabago sa pagtugon sa mga plano sa real time. Walang Google API dito; ito ay mas vanilla AJAX loob ng Yii Framework.

Tulad ng mga tao si mga petsa, oras at mga lugar sa kanilang mga plano sa pulong, makikita mo ang isang pahina tulad nito:

Yii Ajax - Meeting Planner Planning View with Sliders

Ang Ikaw at Them haligi ipakita favorability bawat kalahok patungo sa lugar at oras ng petsa.  Ang mas malaki Pumili ng slider ay nagbibigay-daan sa mga tao upang gawin ang panghuling pasya tungkol sa mga tagpuan at oras.

May isang pulutong ng mga data upang mangolekta mula sa mga tao, at hindi namin nais na nangangailangan ng isang refresh ng pahina sa bawat pagbabago.  Ajax ay ang perpektong solusyon para sa problemang ito.

Makikita ba akong maglakad sa pamamagitan ng mga code para sa Meeting-Place panel sa itaas.  Ang Pulong-Time panel sa itaas ay gumagana nang katulad.

Kasunod ng Code

Dahil sa MVC framework at ang aking pagnanais na muling gamitin partials code, ang daloy dito ay maaaring makaramdam mahirap na sundan.  PHP helper function at JavaScript minsan had sa ilagay sa parent file, hindi ang partials sila ay pinaka malapit na nauugnay sa.  Kukunin ko na subukan upang bigyan ka ng isang pangkalahatang-ideya muna.  Hinihikayat ko sa iyo upang gumawa ng ilang mga paglilipat sa pagbabasa nito sa paglipas ng upang lubos na maunawaan ito.  At muli, maaari mong i-browse ang code via GitHub.

Pahiwatig: Isaisip na ang filename para partials karaniwang nagsisimula sa isang salungguhit.

  1. Ang Pulong planner pahina ay load sa /frontend/views/meeting/view.php. Ng file na ito ay kabilang din helper JavaScript function upang pamahalaan ang estado ng mga pindutan gaya Magpadala at Finalize (ie matapos ang pagbabagong ito, maaari ang gumagamit na ngayong magpadala ng imbitasyon na ito?  Sa Meeting Planner, isang lugar at isang panahon sa pangkalahatan ay dapat mapili bago ito ma-ipinadala) at pagpapakita ng visual na abiso na ang mga pagbabago ay i-email sa iba pang mga kalahok kung kailan tatapusin user.
  2. Kapag pagpapakita ng Saan panel para sa mga lugar, ito ay naglo-load /frontend/views/meeting-place/_panel.php. Ng file na ito ay nagsasama helper PHP function showOwnerStatus() at showParticipantStatus(), na kung saan ay reused sa pamamagitan ng kanyang anak, _list.php.  Ngunit, pinaka-mahalaga, _panel.php may kasamang pamamaraan JavaScript para sa kaganapan Bootstrap slider switchChange.
  3. Ang _panel.php file ay gumagamit _list.php upang ipakita ang bawat indibidwal na hilera para sa bawat lugar.  Ang file na ito ay i-render ang Bootstrap slider sa pamamagitan ng pagtawag _panel.php function showOwnerStatus() at showParticipantStatus().
  4. Ang switchChange function ay gagawing Ajax tawag sa MeetingPlaceChoiceController.php.
  5. At sa wakas, MeetingPlaceChoiceController.php tawag sa MeetingPlaceChoice.php modelo upang i-record ang mga pagbabago sa database.

Sorry ang paglalagay ng mga kaugnay na code ay kumplikado at bumuka. 

Ngayon, kukunin ko na gabayan ka sa mga key components hakbang-hakbang.

Ajax Code Sunud-sunod 

Narito ang Meeting/view.php pag-render Meeting-Place/_panel.php. Ito ay nagpapakita ng bahagyang para sa mga hilera ng mga posibleng mga lugar at mga seleksyon sa mga kalahok ':

Sa ibaba na JavaScript na may kaugnayan sa mga aksyon na tumugon sa Ajax resulta ngunit hindi direkta na kailangan para sa Ajax.  Hindi mo na kailangan upang maunawaan kung ano ang mga pag-andar gawin upang maunawaan ang Ajax halimbawa, ngunit isinama ko ang mga ito dahil sila ay tinatawag bilang tugon sa Ajax kaganapan.

Dito sa Meeting-Place/_panel.php, ang talahanayan na nagpapakita ng mga lugar at mga seleksyon ay nilikha, invoking _list.php:

Mas mahalaga, ito rin ay nagsasama ng JavaScript sa ibaba, na ginagamit namin upang gumawa ng Ajax tawag kapag gumagalaw ang user ay isang switch, pagbabago ng estado nito.  Ang tagapili ng mga pag-andar ay tumutugma sa mga mas malaki na asul na pagpipilian slider, habang ang pagpili function ay tumutugma sa mga kagustuhan slider.

Ang mga pag-andar sa itaas gawin ang mga tawag sa actionSet() sa MeetingPlaceChoiceController upang tumugon sa ang pagbabago switch gamit Ajax kahilingan:

Aksyon Controller na tumugon sa pamamagitan ng Ajax kailangan upang magkaroon ng isang JSON tugon format (sa ganitong paraan Yii alam ang mga ito ay hindi ginawa upang maghatid ng HTML):

Narito ang MeetingPlaceChoice::set() method, na nagtatala ng mga aksyon ng gumagamit sa database at lumilikha ng MeetingLog entry, na kung saan relo ang lahat ng mga pagbabago sa panahon ng pagpaplano.

Mga Tampok na May Kaugnayan sa Meeting Pagbabago

Sa Meeting Planner, panatilihin ko ang isang log ng bawat solong pagbabago.  Ito ay nagpapahintulot sa akin upang malaman kapag ang isang ilang mga minuto lumipas mula noong huling pagbabago ng isang tao at i-notify iba pang mga kalahok pulong.  Ito ay isang eksperimento sinusubukan ko sa serbisyong ito, sa halip na nangangailangan na ang mga kalahok ay pindutin isumite sa bawat oras na nais nilang gumawa ng pagbabago (s). 

Gayunman, ito ay nangangailangan ng pagsasanay sa kanila upang maunawaan kung okay lang na baguhin ito at iwanan ito, ibig sabihin, isara ang window ng browser.  Kaya ang displayNotifier() function magpakita ng ilang mga flash alerto upang makatulong sa ito-Kukunin ko sa huli polish ang mga sa paglipas ng panahon, at alisin ang mga ito para sa mga bihasang gumagamit.

Ang MeetingLog ay nagpapahintulot din sa akin upang bumuo ng isang text buod ng kasaysayan ng pagpaplano pulong ni.  Kung ikaw ay interesado sa matuto nang higit pa tungkol dito, ko na nakasulat tungkol sa mga ito sa Building Ang iyong Startup: aabiso People Tungkol Meeting Pagbabago at Paghahatid ng Abiso.

Ano ang Susunod?

Umaasa ako mga halimbawang ito matulungan kang maunawaan ang mga pangunahing kaalaman ng Ajax sa Yii.  Kung ikaw ay interesado sa mas maraming mga advanced Ajax, ako pagpaplano upang isama Ajax-load mga form sa Meeting Planner serye.  At, tinatanggap na, Ajax ay isang lugar kung saan ang mga Yii na komunidad ay hindi ibabahagi isang pulutong ng mga halimbawa.  Sa pangkalahatan, Ajax gumagana nang katulad sa Yii tulad ng ginagawa nito sa PHP at iba pang mga frameworks, para makita mo matuto mula sa halimbawa mula sa iba pang mga komunidad framework.

Abangan ang nalalapit na tutorial sa aming serye ito na Programming sa Pamamagitan ng Yii2 habang patuloy naming diving sa iba't-ibang mga aspeto ng framework.  Baka gusto mo ring tingnan ang aming Building Ang iyong Startup Sa PHP serye, na kung saan ay gumagamit ng mga advanced na template ni Yii2 bilang namin bumuo ng isang real-mundo application.

Kung gusto mo na malaman kung kailan dumating ang susunod na Yii2 tutorial, sumunod kayo sa akin @reifman sa Twitter o tingnan ang aking tagapagturo pahina.  Aking tagapagturo pahina ay isama ang lahat ng mga artikulo mula sa seryeng ito sa lalong madaling ang mga ito ay nai-publish. 

Related Links

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.