Programmation avec Yii2 : Utilisation d’Ajax

() translation by (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 aperçu des Yii 2.0, sorti en octobre 2014.

Dans cette sé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 précisément, je vais mettre en évidence l’utilisation d’Ajax dans deux domaines d’application Meeting Planner, dont j’ai écris la série Building Your Startup sur en parallèle.

Tout d’abord, nous allons revoir comment nous charger une carte Google sur la page en réponse à l’utilisateur d’entrer dans un lieu déterminé. Comme indiqué ci-dessous, après que j’ai entrer Plum Bistro et cliquez sur retour, la carte aux droite de charge dynamiquement sans une actualisation de la page.

Deuxièmement, je vais vous montrer comment on enregistre les modifications un utilisateur apporte à une réunion au cours de la phase de planification. Planificateur de réunion le rend facile pour les participants à identifier leurs endroits préférés et jour fois et puis finalement choisissez celui final.

Ajax rend le processus beaucoup plus facile et plus rapide, permettant aux gens de faire glisser un certain nombre de commandes pour indiquer leurs préférences sans aucun rafraîchissement de page.

Juste un rappel, j’y participent les threads commentaire ci-dessous. Je suis particulièrement intéressé si vous avez des approches différentes, des idées supplémentaires ou souhaitez suggérer des sujets pour prochains tutoriels. Si vous avez une question ou une suggestion de rubrique, merci de poster ci-dessous. Vous pouvez é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 êtes seulement commencer avec Ajax et voulez commencer lentement, la Cour de récréation Yii a deux exemples simples d’Ajax qui peut être utile pour vous de revoir. On change le texte sur une page via Ajax et une autre charge la réponse à un formulaire sur la même page, tous deux sans actualiser et chacun comprend des exemples de code détaillé.

Nous allons plonger dans nos deux principaux exemples. Vous pouvez trouver toutes la données source pour ces exemples dans le référentiel de code Meeting Planner sur GitHub.

Affichage interactif Google Maps

Le formulaire de saisie de la construction

Lorsque la cré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

Intégration de l’API JavaScript de Google Places

La forme charge la bibliothèque JavaScript de Google Maps et le relie à la zone de saisie lieu-searchbox :

$gpJsLink= 'https://maps.googleapis.com/maps/api/js?' . http_build_query(array(
                          'key' => Yii::$app->params['google_maps_key'],
                          'libraries' => 'places',
                  ));
  echo $this->registerJsFile($gpJsLink);

  $options = '{"types":["establishment"],"componentRestrictions":{"country":"us"}}';
  echo $this->registerJs("(function(){
        var input = document.getElementById('place-searchbox');
        var options = $options;
        searchbox = new google.maps.places.Autocomplete(input, options);
        setupListeners('place');
})();" , \yii\web\View::POS_END );

La forme partielle _formPlaceGoogle.php inclut des champs masqués dans lequel les résultats de la carte peuvent être stockés avant que la page entière est soumise, ainsi que d’un div cachée à visualiser sur la carte via Ajax.

use frontend\assets\MapAsset;
MapAsset::register($this);
...
    <?= BaseHtml::activeHiddenInput($model, 'name'); ?>
    <?= BaseHtml::activeHiddenInput($model, 'google_place_id'); ?>
    <?= BaseHtml::activeHiddenInput($model, 'location'); ?>
    <?= BaseHtml::activeHiddenInput($model, 'website'); ?>
    <?= BaseHtml::activeHiddenInput($model, 'vicinity'); ?>
    <?= BaseHtml::activeHiddenInput($model, 'full_address'); ?>
...
<div class="col-md-6">
  <article></article>
</div> <!-- end col2 -->

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

Le MapAsset inclus ci-dessus charges notre fichier create_place.js qui opère entre Google et notre formulaire ; Fondamentalement, il gère la transmission et la réponse de donné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(), appelée par le formulaire parent :

function setupListeners(model) {
    // searchbox is the var for the google places object created on the page
    google.maps.event.addListener(searchbox, 'place_changed', function() {
      var place = searchbox.getPlace();
      if (!place.geometry) {
        // Inform the user that a place was not found and return.
        return;
      }  else {
        // migrates JSON data from Google to hidden form fields
        populateResult(place,model);
      }
    });
    var place_input = document.getElementById(model+'-searchbox');
    google.maps.event.addDomListener(place_input, 'keydown', function(e) {
        if (e.keyCode == 13) {
            e.preventDefault();
        }
      });
}

Comme l’utilisateur commence à taper, le widget descende typeahead options pour des lieux réels, et l’événement place_changed est traité avec chaque pression de touche. L’auditeur keydown ci-dessus empêche l’envoi du formulaire la touche retour (ASCII 13 ou 0xD vous geeks de sortilège).

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

Collecte de ses données et la carte obtenue

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

function populateResult(place,model) {
  // moves JSON data retrieve from Google to hidden form fields
  // so Yii2 can post the data
    $('#'+model+'-location').val(JSON.stringify(place['geometry']['location']));
    $('#'+model+'-google_place_id').val(place['place_id']);
    $('#'+model+'-full_address').val(place['formatted_address']);
    $('#'+model+'-website').val(place['website']);
    $('#'+model+'-vicinity').val(place['vicinity']);
    $('#'+model+'-name').val(place['name']);
    loadMap(place['geometry']['location'],place['name']);
}

Cela remplit tous les champs cachés avec les données de Google et appelle loadMap() pour visualiser sur la carte :

Yii Ajax - Google Places Load Map via Ajax

La fonction loadMap() est très spécifique à l’API de Google Place et affiche la carte que vous voyez ci-dessus à droite :

function loadMap(gps,name) {
  var gps_parse = gps.toString().replace("(", "").replace(")", "").split(", ");
  var gps_lat = parseFloat(gps_parse[0]);
  var gps_lng = parseFloat(gps_parse[1]);

  if (document.querySelector('article').children.length==0) {
    var mapcanvas = document.createElement('div');
    mapcanvas.id = 'mapcanvas';
    mapcanvas.style.height = '300px';
    mapcanvas.style.width = '300px';
    mapcanvas.style.border = '1px solid black';
    document.querySelector('article').appendChild(mapcanvas);
  }
  var latlng = new google.maps.LatLng(gps_lat,gps_lng); // gps['k'], gps['D']);

  var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeControl: false,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
  var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:name
  });
}

L’expérience utilisateur est rapide et impressionnante. Essaie !

Changements dynamiquement enregistrement de réunion

Ensuite, nous allons étudier comment nous enregistrer des modifications apportées aux plans en temps réel de la ré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 à leurs plans de réunion, vous verrez une page comme celle-ci :

Yii Ajax - Meeting Planner Planning View with Sliders

Les colonnes vous et eux voir la favorabilité de chaque participant vers les lieux et dates heures. Le curseur de choix plus grand permet à la personne à prendre la décision finale sur le lieu de rencontre et le temps.

Il y a beaucoup de données à collecter des gens, et nous ne voulons pas besoin d’un rafraîchissement de page à chaque changement. Ajax est la solution idéale pour ce problème.

Je vais parcourir le code pour le panneau de lieu de rencontre qui précède. Le Comité de la réunion-temps ci-dessus fonctionne de manière similaire.

Le Code suivant

En raison de l’infrastructure MVC et mon désir de réutiliser des parties de code, le flux ici peut-être se sentir difficile à suivre. Fonctions d’assistance PHP et JavaScript parfois devaient être placées dans les fichiers de parent, pas partiels qu’ils étaient plus proches de. Je vais essayer de vous donner un aperçu en premier. Je vous encourage à 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.

Chargement de la page de planificateur de réunion à /frontend/views/meeting/view.php. Ce fichier comprend également des fonctions JavaScript d’assistance pour gérer l’état des boutons envoyer et Finalize (c'est-à-dire après ce changement, peut l’utilisateur maintenant envoyer cette invitation ? Avec le planificateur de réunions, un seul endroit et une fois en général doivent être sélectionnés avant qu’il peut être envoyé) et l’affichage des notifications visuelles que les changements seront envoyés aux autres participants lorsque l’utilisateur termine.
Quand afficher l’où 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 réutilisées par son enfant, _list.php. Mais, surtout, _panel.php inclut des méthodes JavaScript pour l’événement switchChange de curseur Bootstrap.
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().
Les fonctions de switchChange feront appels Ajax à MeetingPlaceChoiceController.php.
Et enfin, MeetingPlaceChoiceController.php appelle le modèle MeetingPlaceChoice.php pour enregistrer les modifications dans la base de données.

Je suis désolé le placement du code correspondant est compliqué et étaler.

Maintenant, je vais vous guider dans les composantes clés étape par étape.

Code Ajax étape par étape

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

<?php
          // where
          if (!($model->meeting_type == \frontend\models\Meeting::TYPE_PHONE || $model->meeting_type == \frontend\models\Meeting::TYPE_VIDEO)) {
            echo $this->render('../meeting-place/_panel', [
              'model'=>$model,
              'placeProvider' => $placeProvider,
              'isOwner' => $isOwner,
              'viewer' => $viewer,
          ]);
          }
           ?>

Ci-dessous qui est que JavaScript lié à des actions qui répondent aux résultats d’Ajax, mais ne sont pas directement né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 appelés en réponse aux événements de l’Ajax.

<?php
$script = <<< JS
var notifierOkay; // meeting sent already and no page change session flash

if  ($('#notifierOkay').val() == 'on') {
  notifierOkay = true;
} else {
  notifierOkay = false;
}

function displayNotifier(mode) {
  if (notifierOkay) {
    if (mode == 'time') {
      $('#notifierTime').show();
    } else if (mode == 'place') {
       $('#notifierPlace').show();
    } else {
      alert("We\'ll automatically notify the organizer when you're done making changes.");
    }
    notifierOkay=false;
  }
}

function refreshSend() {
  $.ajax({
     url: '$urlPrefix/meeting/cansend',
     data: {id: $model->id, 'viewer_id': $viewer},
     success: function(data) {
       if (data)
         $('#actionSend').removeClass("disabled");
        else
        $('#actionSend').addClass("disabled");
       return true;
     }
  });
}

function refreshFinalize() {
  $.ajax({
     url: '$urlPrefix/meeting/canfinalize',
     data: {id: $model->id, 'viewer_id': $viewer},
     success: function(data) {
       if (data)
         $('#actionFinalize').removeClass("disabled");
        else
        $('#actionFinalize').addClass("disabled");
       return true;
     }
  });
}

JS;
$position = \yii\web\View::POS_READY;
$this->registerJs($script, $position);
?>

Ici à la réunion-Place/_panel.php, le tableau indiquant les lieux et les sélections est créé, invoquant _list.php :

  <table class="table">
     <thead>
     <tr class="small-header">
       <td></td>
       <td ><?=Yii::t('frontend','You') ?></td>
       <td ><?=Yii::t('frontend','Them') ?></td>
        <td >
          <?php
           if ($placeProvider->count>1 && ($isOwner || $model->meetingSettings['participant_choose_place'])) echo Yii::t('frontend','Choose');
          ?></td>
    </tr>
    </thead>
    <?= ListView::widget([
           'dataProvider' => $placeProvider,
           'itemOptions' => ['class' => 'item'],
           'layout' => '{items}',
           'itemView' => '_list',
           'viewParams' => ['placeCount'=>$placeProvider->count,'isOwner'=>$isOwner,'participant_choose_place'=>$model->meetingSettings['participant_choose_place']],
       ]) ?>
  </table>
  <?php else: ?>
  <?php endif; ?>

Plus important encore, il inclut également le code JavaScript ci-dessous, qui nous permet de faire des appels Ajax lorsque l’utilisateur déplace un commutateur de changement de son état. Les fonctions de sélecteur correspondant au curseur bleu choix plus grand, tandis que les fonctions de choix correspondent à des curseurs de préférence.

$script = <<< JS
placeCount = $placeProvider->count;
// allows user to set the final place
$('input[name="place-chooser"]').on('switchChange.bootstrapSwitch', function(e, s) {
  // console.log(e.target.value); // true | false
  // turn on mpc for user
  $.ajax({
     url: '$urlPrefix/meeting-place/choose',
     data: {id: $model->id, 'val': e.target.value},
     // e.target.value is selected MeetingPlaceChoice model
     success: function(data) {
       displayNotifier('place');
       refreshSend();
       refreshFinalize();
       return true;
     }
  });
});

// users can say if a place is an option for them
$('input[name="meeting-place-choice"]').on('switchChange.bootstrapSwitch', function(e, s) {
  //console.log(e.target.id,s); // true | false
  // set intval to pass via AJAX from boolean state
  if (s)
    state = 1;
  else
    state =0;
  $.ajax({
     url: '$urlPrefix/meeting-place-choice/set',
     data: {id: e.target.id, 'state': state},
     success: function(data) {
       displayNotifier('place');
       refreshSend();
       refreshFinalize();
       return true;
     }
  });
});

JS;
$position = \yii\web\View::POS_READY;
$this->registerJs($script, $position);
?>

Les fonctions ci-dessus faites l’appel à actionSet() à MeetingPlaceChoiceController de répondre au changement interrupteur à l’aide de requêtes Ajax :

public function actionSet($id,$state)
    {
      Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
      // caution - incoming AJAX type issues with val
      $id=str_replace('mpc-','',$id);
      //if (Yii::$app->user->getId()!=$mpc->user_id) return false;
      if (intval($state) == 0 or $state=='false')
        $status = MeetingPlaceChoice::STATUS_NO;
      else
        $status = MeetingPlaceChoice::STATUS_YES;
      //$mpc->save();
      MeetingPlaceChoice::set($id,$status,Yii::$app->user->getId());
      return $id;
    }

Actions du contrôleur qui répondent via Ajax ont besoin d’avoir un format JSON de la réponse (de cette façon Yii sait qu'ils ne sont pas destinés à livrer HTML) :

1	Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;

Voici la méthode MeetingPlaceChoice::set(), qui enregistre les actions de l’utilisateur dans la base de données et crée une entrée de MeetingLog, qui regarde toutes les modifications lors de la planification.

public static function set($id,$status,$user_id = 0,$bulkMode=false)
    {
      $mpc = MeetingPlaceChoice::findOne($id);
      if ($mpc->user_id==$user_id) {
        $mpc->status = $status;
        $mpc->save();
        if (!$bulkMode) {
          // log only when not in bulk mode i.e. accept all
          // see setAll for more details
          if ($status==MeetingPlaceChoice::STATUS_YES) {
            $command = MeetingLog::ACTION_ACCEPT_PLACE;
          } else {
            $command = MeetingLog::ACTION_REJECT_PLACE;
          }
          MeetingLog::add($mpc->meetingPlace->meeting_id,$command,$mpc->user_id,$mpc->meeting_place_id);
        }
        return $mpc->id;
      } else {
        return false;
      }
    }

Caractéristiques liées à l’évolution de la réunion

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

Cependant, cette technique nécessite formation à comprendre c’est OK changer et laissez-le, c'est-à-dire de fermer la fenêtre du navigateur. Ainsi les fonctions de displayNotifier() montrer certaines alertes flash pour aider à cela, je vais finalement polonais de ceux-ci au fil du temps et retirez-les pour les utilisateurs expérimentés.

Le MeetingLog me permet aussi de générer un résumé du texte de l’histoire de planification de la réunion. Si vous êtes intéressé à en apprendre plus à ce sujet, j’ai écrit à ce sujet dans Building Your Startup : notification personnes sur réunion changements et fournir des Notifications.

Ce qui est prévu ?

J’espère que ces exemples vous aident à comprendre les bases d’Ajax dans Yii. Si vous êtes intéressé par Ajax plus avancé, j’ai l’intention d’inclure des formulaires Ajax chargé dans la série de Meeting Planner. Et, certes, Ajax est un domaine où la communauté Yii n’a pas partagé beaucoup d’exemples. En règle générale, Ajax fonctionne de manière similaire dans Yii comme elle le fait en PHP et d’autres cadres, vous pouvez apprendre des exemples d’autres communautés de cadre.

Surveillez les prochains tutoriels dans notre série de programmation avec Yii2 alors que nous continuons à plonger dans les différents aspects du cadre. Vous pouvez également consultez notre série de bâtiment votre démarrage avec PHP, qui utilise le modèle de pointe de Yii2 que nous créons une application ré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 série dès qu’elles sont publiées.

Liens connexes

Ajax (Wikipedia)
Mise en route - Ajax (réseau de développeurs Mozilla)
Yii2 Developer Exchange, mon site de ressources Yii2