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

Programmation avec Yii2 : Utilisation d’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

French (Français) translation by Ahmad Fauzan (you can also view the original English article)

Final product image
What You'll Be Creating

Si vous le demandez, "ce qui est Yii ?", consultez Introduction au cadre Yii, qui passe en revue les avantages de Yii et comprend un aperçu des Yii 2.0, sorti en octobre 2014.

Dans cette série de programmation avec Yii2, je suis guider les lecteurs dans l’utilisation du cadre Yii2 pour PHP. Dans ce tutoriel, nous allons explorer la mise en œuvre des pages interactives en utilisant Ajax. Plus précisément, je vais mettre en évidence l’utilisation d’Ajax dans deux domaines d’application Meeting Planner, dont j’ai écris la série Building Your Startup sur en parallèle.

Tout d’abord, nous allons revoir comment nous charger une carte Google sur la page en réponse à l’utilisateur d’entrer dans un lieu déterminé. Comme indiqué ci-dessous, après que j’ai entrer Plum Bistro et cliquez sur retour, la carte aux droite de charge dynamiquement sans une actualisation de la page.

Yii Ajax - Google Maps UX Example

Deuxièmement, je vais vous montrer comment on enregistre les modifications un utilisateur apporte à une réunion au cours de la phase de planification. Planificateur de réunion le rend facile pour les participants à identifier leurs endroits préférés et jour fois et puis finalement choisissez celui final.

Yii Ajax - Meeting Planner UX Example

Ajax rend le processus beaucoup plus facile et plus rapide, permettant aux gens de faire glisser un certain nombre de commandes pour indiquer leurs préférences sans aucun rafraîchissement de page.

Juste un rappel, j’y participent les threads commentaire ci-dessous. Je suis particulièrement intéressé si vous avez des approches différentes, des idées supplémentaires ou souhaitez suggérer des sujets pour prochains tutoriels. Si vous avez une question ou une suggestion de rubrique, merci de poster ci-dessous. Vous pouvez également me rejoindre sur Twitter @reifman directement.

Utilisation d’Ajax avec Yii

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

Si vous êtes seulement commencer avec Ajax et voulez commencer lentement, la Cour de récréation Yii a deux exemples simples d’Ajax qui peut être utile pour vous de revoir. On change le texte sur une page via Ajax et une autre charge la réponse à un formulaire sur la même page, tous deux sans actualiser et chacun comprend des exemples de code détaillé.

Yii Ajax - Yii Playground AJAX Examples

Nous allons plonger dans nos deux principaux exemples. Vous pouvez trouver toutes la données source pour ces exemples dans le référentiel de code Meeting Planner sur GitHub.

Affichage interactif Google Maps

Le formulaire de saisie de la construction

Lorsque la créer une forme de lieu (/ frontend/views/place/create_place_google.php) se charge initialement, il inclut le widget de recherche en direct de Google adresses :

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

Intégration de l’API JavaScript de Google Places

La forme charge la bibliothèque JavaScript de Google Maps et le relie à la zone de saisie lieu-searchbox :

La forme partielle _formPlaceGoogle.php inclut des champs masqués dans lequel les résultats de la carte peuvent être stockés avant que la page entière est soumise, ainsi que d’un div cachée à visualiser sur la carte via Ajax.

La table de Meeting Planner Place stocke le Google nom, place_id, lieu, site Web, proximité et full_address pour utilisation dans toute l’application.

Le MapAsset inclus ci-dessus charges notre fichier create_place.js qui opère entre Google et notre formulaire ; Fondamentalement, il gère la transmission et la réponse de données via Ajax.

Notre JavaScript Ajax de gestion

Je vais vous guider dans la create_place.js en morceaux. Tout d’abord, il n’y a setupListeners(), appelée par le formulaire parent :

Comme l’utilisateur commence à taper, le widget descende typeahead options pour des lieux réels, et l’événement place_changed est traité avec chaque pression de touche. L’auditeur keydown ci-dessus empêche l’envoi du formulaire la touche retour (ASCII 13 ou 0xD vous geeks de sortilège).

Voici ce qu’il ressemble à mesure que vous tapez. Je suis entrer dans prune pour Plum Bistro :

Yii Ajax - Google Places Dropdown List

Collecte de ses données et la carte obtenue

Si la personne a choisi entrer ou cliqué sur une place dans la liste déroulante, puis populateResult() est appelée ; Si ce n’est pas le cas, nous ne faisons rien.

Cela remplit tous les champs cachés avec les données de Google et appelle loadMap() pour visualiser sur la carte :

Yii Ajax - Google Places Load Map via Ajax

La fonction loadMap() est très spécifique à l’API de Google Place et affiche la carte que vous voyez ci-dessus à droite :

L’expérience utilisateur est rapide et impressionnante. Essaie !

Changements dynamiquement enregistrement de réunion

Ensuite, nous allons étudier comment nous enregistrer des modifications apportées aux plans en temps réel de la réunion. Il n’y a aucune API Google ici ; Il est plus vanille AJAX dans le cadre de Yii.

Comme les gens ajoutent des dates, heures et lieux à leurs plans de réunion, vous verrez une page comme celle-ci :

Yii Ajax - Meeting Planner Planning View with Sliders

Les colonnes vous et eux voir la favorabilité de chaque participant vers les lieux et dates heures. Le curseur de choix plus grand permet à la personne à prendre la décision finale sur le lieu de rencontre et le temps.

Il y a beaucoup de données à collecter des gens, et nous ne voulons pas besoin d’un rafraîchissement de page à chaque changement. Ajax est la solution idéale pour ce problème.

Je vais parcourir le code pour le panneau de lieu de rencontre qui précède. Le Comité de la réunion-temps ci-dessus fonctionne de manière similaire.

Le Code suivant

En raison de l’infrastructure MVC et mon désir de réutiliser des parties de code, le flux ici peut-être se sentir difficile à suivre. Fonctions d’assistance PHP et JavaScript parfois devaient être placées dans les fichiers de parent, pas partiels qu’ils étaient plus proches de. Je vais essayer de vous donner un aperçu en premier. Je vous encourage à faire quelques passes lire du pour comprendre pleinement. Et encore une fois, vous pouvez parcourir le code via GitHub.

Astuce : N’oubliez pas que les noms de fichiers pour les partiels commencent habituellement par un trait de soulignement.

  1. Chargement de la page de planificateur de réunion à /frontend/views/meeting/view.php. Ce fichier comprend également des fonctions JavaScript d’assistance pour gérer l’état des boutons envoyer et Finalize (c'est-à-dire après ce changement, peut l’utilisateur maintenant envoyer cette invitation ? Avec le planificateur de réunions, un seul endroit et une fois en général doivent être sélectionnés avant qu’il peut être envoyé) et l’affichage des notifications visuelles que les changements seront envoyés aux autres participants lorsque l’utilisateur termine.
  2. Quand afficher l’où les panneau pour les places, il charge /frontend/views/meeting-place/_panel.php. Ce fichier contient d’assistance PHP fonctions showOwnerStatus() et showParticipantStatus(), qui seront réutilisées par son enfant, _list.php. Mais, surtout, _panel.php inclut des méthodes JavaScript pour l’événement switchChange de curseur Bootstrap.
  3. Le fichier _panel.php utilise _list.php pour afficher chaque ligne individuelle pour chaque place. Ce fichier sera rendu les curseurs Bootstrap en appelant showParticipantStatus() et _panel.php des fonctions showOwnerStatus().
  4. Les fonctions de switchChange feront appels Ajax à MeetingPlaceChoiceController.php.
  5. Et enfin, MeetingPlaceChoiceController.php appelle le modèle MeetingPlaceChoice.php pour enregistrer les modifications dans la base de données.

Je suis désolé le placement du code correspondant est compliqué et étaler.

Maintenant, je vais vous guider dans les composantes clés étape par étape.

Code Ajax étape par étape

Voici Meeting/view.php rendu réunion-Place/_panel.php. Cela permet d’afficher la partielle pour les lignes des endroits possibles et les choix des participants :

Ci-dessous qui est que JavaScript lié à des actions qui répondent aux résultats d’Ajax, mais ne sont pas directement nécessaires pour l’Ajax. Vous n’avez pas besoin de comprendre ce que ces fonctions font pour comprendre cet exemple Ajax, mais j’ai inclus les car ils sont appelés en réponse aux événements de l’Ajax.

Ici à la réunion-Place/_panel.php, le tableau indiquant les lieux et les sélections est créé, invoquant _list.php :

Plus important encore, il inclut également le code JavaScript ci-dessous, qui nous permet de faire des appels Ajax lorsque l’utilisateur déplace un commutateur de changement de son état. Les fonctions de sélecteur correspondant au curseur bleu choix plus grand, tandis que les fonctions de choix correspondent à des curseurs de préférence.

Les fonctions ci-dessus faites l’appel à actionSet()MeetingPlaceChoiceController de répondre au changement interrupteur à l’aide de requêtes Ajax :

Actions du contrôleur qui répondent via Ajax ont besoin d’avoir un format JSON de la réponse (de cette façon Yii sait qu'ils ne sont pas destinés à livrer HTML) :

Voici la méthode MeetingPlaceChoice::set(), qui enregistre les actions de l’utilisateur dans la base de données et crée une entrée de MeetingLog, qui regarde toutes les modifications lors de la planification.

Caractéristiques liées à l’évolution de la réunion

En Meeting Planner, j’ai garder un journal de chaque modification unique. Cela me permet de savoir quand quelques minutes se sont écoulées depuis le dernier changement de la personne et de notifier les autres participants à la réunion. C’est une expérience que j’essaie avec ce service, au lieu de demander qui a frappé les participants soumettre chaque fois qu’ils veulent faire des changements.

Cependant, cette technique nécessite formation à comprendre c’est OK changer et laissez-le, c'est-à-dire de fermer la fenêtre du navigateur. Ainsi les fonctions de displayNotifier() montrer certaines alertes flash pour aider à cela, je vais finalement polonais de ceux-ci au fil du temps et retirez-les pour les utilisateurs expérimentés.

Le MeetingLog me permet aussi de générer un résumé du texte de l’histoire de planification de la réunion. Si vous êtes intéressé à en apprendre plus à ce sujet, j’ai écrit à ce sujet dans Building Your Startup : notification personnes sur réunion changements et fournir des Notifications.

Ce qui est prévu ?

J’espère que ces exemples vous aident à comprendre les bases d’Ajax dans Yii. Si vous êtes intéressé par Ajax plus avancé, j’ai l’intention d’inclure des formulaires Ajax chargé dans la série de Meeting Planner. Et, certes, Ajax est un domaine où la communauté Yii n’a pas partagé beaucoup d’exemples. En règle générale, Ajax fonctionne de manière similaire dans Yii comme elle le fait en PHP et d’autres cadres, vous pouvez apprendre des exemples d’autres communautés de cadre.

Surveillez les prochains tutoriels dans notre série de programmation avec Yii2 alors que nous continuons à plonger dans les différents aspects du cadre. Vous pouvez également consultez notre série de bâtiment votre démarrage avec PHP, qui utilise le modèle de pointe de Yii2 que nous créons une application réelle.

Si vous souhaitez savoir quand le prochain tutoriel de Yii2 arrive, me suivre @reifman sur Twitter ou voir ma page de l’instructeur. Ma page instructeur comprendra tous les articles de cette série dès qu’elles sont publiées.

Liens connexes

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.