Comment programmer avec Yii2 Exploration de MVC, des formulaires et des présentations

Ce que vous allez créer

Dans Programmation avec Yii2: Mise en route, nous avons configuré Yii2 localement, créé une application Hello World, configuré un serveur distant et utilisé Github pour déployer notre code. Ce tutoriel couvrira certains des concepts les plus fondamentaux de Yii en rapport avec sa mise en œuvre du framework MVC: modèles, vues et contrôleurs. Nous explorerons également les dispositions et la personnalisation des menus de navigation et des éléments Bootstrap..

Pour ces exemples, imaginons que nous construisons un cadre pour la publication de mises à jour de statut simples, par exemple. notre propre mini-Twitter. Cependant, nous n'irons pas jusqu'à stocker les données dans une base de données. Je garderai cela pour le prochain tutoriel, qui explorera la capacité d'échafaudage de Yii, appelée Gii.

Gii automatise et simplifie tout ce que nous allons faire dans ce tutoriel, mais il est important de passer en revue les concepts de base et d'effectuer ces tâches manuellement au moins une fois..

Des modèles

Qu'est-ce qu'un modèle? Wikipedia dit: "A modèle notifie les vues et les contrôleurs associés en cas de changement d'état. Cette notification permet aux vues de produire une sortie mise à jour et aux contrôleurs de modifier le jeu de commandes disponible. "

Pour moi, les modèles représentent souvent les concepts de tout ce que je construis dans le monde "extérieur". Donc, si nous pensons aux mises à jour de statut, le modèle Status contiendra toutes les propriétés d’une mise à jour de statut et toutes les fonctions ou méthodes liées à la recherche ou à la modification d’un statut ou de statuts.. 

La meilleure pratique consiste à intégrer autant de fonctionnalités et d’intelligence que possible dans vos modèles. Dans la pratique MVC, vous construisez des modèles "lourds" et des contrôleurs et des vues légères. Yii fournit d'excellentes fonctionnalités spécifiques au genre de tâches que vous effectuez dans le développement d'applications Web et qui simplifient la création de modèles, notamment en ce qui concerne les formulaires et les bases de données; la plupart de cela, nous allons explorer dans des tutoriels plus tard.

Créons notre modèle de statut. Pour nos exemples de codage, vous pouvez utiliser le référentiel Git. Je me base sur ce que nous avons créé dans le didacticiel de mise en route: je l’ai marqué ici pour référence. Le référentiel Github du tutoriel terminé est ici.

Nous allons créer Status.php dans /hello/models/Status.php. Pour publier un message d'état, nous devons collecter le texte du message auprès de l'utilisateur. Nous allons également créer un champ de permissions pour publier en public ou en privé.

'Private', self :: PERMISSIONS_PUBLIC => 'Public');  fonction publique getPermissionsLabel ($ permissions) if ($ permissions == self :: PERMISSIONS_PUBLIC) return 'Public';  else return 'Private'; ?>

Notez que la fonction de règles est utilisée par la validation de formulaire de Yii pour garantir que les utilisateurs entrent les informations appropriées dans chaque champ. Yii utilise JavaScript pour valider les formulaires en tant que types d'utilisateurs.

le getPermissions () la fonction que j'ai créée sera utilisée pour les éléments de la liste déroulante du formulaire.

Passons maintenant à la création d’un contrôleur permettant à l’utilisateur de créer et d’afficher les mises à jour du texte..

Contrôleurs

Qu'est-ce qu'un contrôleur? Wikipedia dit: "A manette peut envoyer des commandes au modèle pour mettre à jour l'état du modèle (par exemple, l'édition d'un document). Il peut également envoyer des commandes à sa vue associée pour modifier la présentation du modèle par la vue. "Dans une application Web Yii typique, un chemin URL vers une page appelle un contrôleur pour charger les données de la page à l'aide du modèle et rendre la page à l'aide de la vue. 

Il est préférable de regrouper logiquement les fonctions liées au sein d'un seul contrôleur. Différentes méthodes du contrôleur, appelées actions, implémentent chaque fonction. Celles-ci correspondent souvent à des pages spécifiques. Par exemple, http: // localhost: 8888 / hello / web / status / create invoquera l'action de création de StatusController que nous allons créer..

Au fur et à mesure que vous développez des fonctionnalités liées à Status, vous regrouperez ces fonctions dans un seul StatusController.php. Pour l'instant, nous allons simplement construire une fonction de création.

Dans / bonjour / contrôleurs /, créer StatusController.php:

load (Yii :: $ app-> request-> post ()) && $ model-> validate ()) // données valides reçues dans $ model retournent $ this-> render ('view', ['model' = > $ modèle]);  else // la page est initialement affichée ou il y a une erreur de validation return $ this-> render ('create', ['model' => $ model]); ?>

Les actions de création de formulaire invoquent généralement les données de modèle, puis se divisent en deux selon qu'elles font ou non partie d'une opération POST. Sinon, le formulaire vide est affiché. S'ils reçoivent des données enregistrées, elles sont validées et traitées. Dans notre cas, cela signifie procéder au rendu du fichier de vue..

Des vues

Qu'est-ce qu'une vue? Wikipedia dit: "A vue demande des informations au modèle utilisé pour générer une représentation de sortie pour l'utilisateur. "Dans Yii, la vue utilise un langage de modèle de type PHP pour rendre la sortie de la page au format HTML, en exploitant les données chargées par le modèle et fournies par le contrôleur..

Les vues sont généralement situées dans un seul dossier associé au contrôleur associé, par exemple. les vues StatusController se trouvent dans la vues / statut dossier.

Dans Yii, le code de formulaire est généralement inclus dans ce qu'on appelle une vue partielle. Ces fichiers sont souvent nommés avec un préfixe de soulignement. Ils sont censés être inclus par d'autres points de vue. Cela permet au code de formulaire actuel d'être réutilisé par les pages de création et de mise à jour..

Tout d'abord, nous allons créer la vue Créer qui rend le formulaire. Ensuite, nous allons également créer une vue pour nous montrer la mise à jour de statut que nous publions. Dans les prochains tutoriels, lorsque nous travaillons avec une base de données réelle, stockant et récupérant les données, cela fonctionnera un peu différemment..

Voici un exemple simple de notre /hello/views/status.view.php voir le fichier pour rendre les données postées:

 

Votre mise à jour de statut

:

texte)?>

:

getPermissionsLabel ($ model-> permissions); ?>

Notez comment un fichier de vue est un mélange de HTML et de PHP. Lorsque le contrôleur reçoit les données publiées, il affiche la vue ci-dessus, indiquant les données soumises par l'utilisateur..

Mais maintenant parlons des formulaires et construisons le fichier de création de formulaire.

Formes

Les formulaires sont ce que nous utilisons tous les jours dans le développement Web pour collecter des données de l'utilisateur, souvent pour soumettre des entrées d'utilisateur à une base de données. Yii fournit une grande quantité de code d'assistance pour simplifier le processus de création, de validation, de sécurisation et d'enregistrement des données à partir de formulaires. En Yii, les formulaires sont un type de vue.

Voici un exemple de formulaire pour créer une mise à jour de statut:

  field ($ model, 'text') -> textArea (['rows' => '4']) -> label ('Status Update'); ?> field ($ model, 'permissions') -> dropDownList ($ model-> getPermissions (), ['prompt' => '- Choisissez vos permissions -'])?> 
'btn btn-primary'])?>

Le widget Yii2 ActiveForm est utilisé pour générer du code HTML pour nos champs de saisie. Remarquez comment la liste déroulante appelle le modèle Status obtenirPermissions méthode.

Cliquez sur le bouton Soumettre pour revenir à l'action de création de StatusController. Lorsque les données publiées sont reçues, il rend ensuite le fichier view.php au lieu du fichier de formulaire create.php..

Voici comment le fichier view apparaît lorsqu'il est rendu avec view.php:

Ensuite, mettons à jour la barre de navigation globale pour inclure des liens vers le formulaire de création de statut..

Layouts

Les mises en page sont les modèles de la plupart des éléments extérieurs répétés d'un site Web, tels que l'enveloppe de document HTML, l'en-tête, la barre de navigation et le pied de page. Étant donné qu'ils sont communs à la plupart des pages d'un site Web, ils sont construits une fois dans la présentation et ne sont pas répétés partout dans le code..

Si vous regardez \ hello \ views \ layouts \ main.php, vous pouvez voir la structure de la mise en page externe:

 beginPage ()?>       <?= Html::encode($this->titre)?> tête ()?>   beginBody ()?> 
'Ma société', 'brandUrl' => Yii :: $ app-> homeUrl, 'options' => ['class' => 'navbar-inverse navbar-fixed-top',],]); echo Nav :: widget (['options' => ['class' => 'navbar-nav navbar-right'], 'items' => [['label' => 'Home', 'url' => [ '/ site / index']], ['label' => 'À propos de', 'url' => ['/ site / à propos']], ['label' => 'Contact', 'url' => [ '/ site / contact']], Yii :: $ app-> user-> isGuest? ['label' => 'Login', 'url' => ['/ site / login']]: ['label' => 'Déconnexion ('. Yii :: $ app-> utilisateur-> identité-> nom d'utilisateur. ')', 'Url' => ['/ site / déconnexion'], 'linkOptions' => ['data-method '=>' post ']],],]); NavBar :: end (); ?>
isset ($ this-> params ["breadcrumbs"])? $ this-> params ['breadcrumbs']: [],])?>

© Mon entreprise

endBody ()?> endPage ()?>

Les vues représentent principalement les corps de page internes à un site Web, entre l’en-tête et la barre de navigation et le début du pied de page. Ils sont rendus lorsque la mise en page fait écho $ contenu:

 
isset ($ this-> params ["breadcrumbs"])? $ this-> params ['breadcrumbs']: [],])?>

Yii vous permet de créer plusieurs mises en page par application, bien que cela ne soit pas toujours nécessaire. Cela dépend de votre application. Les contrôleurs offrent une présentation par défaut que vous pouvez remplacer pour toute action donnée. Si vos contrôleurs regroupent logiquement des activités liées, il est probable que l'interface utilisateur utilise la même présentation pour toutes les actions d'un contrôleur..

Maintenant, mettons à jour la barre de navigation pour inclure un menu État avec une action "créer". Puisque Yii2 utilise Bootstrap pour ses dispositions et ses styles, il suffit de lui indiquer de créer un menu déroulant Bootstrap..

Mettre à jour le Nav :: widget avoir un tableau imbriqué:

 echo Nav :: widget (['options' => ['class' => 'navbar-nav navbar-right'], 'items' => [['label' => 'Home', 'url' => [ '/ site / index']], ['label' => 'Statut', 'items' => [['label' => 'Create', 'url' => ['/ status / create']], ],], ['label' => 'À propos', 'url' => ['/ site / sur']], ['label' => 'Contact', 'url' => ['/ site / contact ']], Yii :: $ app-> user-> isGuest? [' Label '=>' Login ',' url '=> [' / site / login ']]: [' label '=>' Déconnexion ( '. Yii :: $ app-> utilisateur-> identité-> nom d'utilisateur.') ',' Url '=> [' / site / logout '],' linkOptions '=> [' data-method '=>' post ']],],]); 

Voici ce que vous devriez voir:

Et après?

Maintenant que vous connaissez un peu le fonctionnement pratique de l’architecture MVC de Yii, notamment les modèles, les vues, les contrôleurs, les formulaires et les présentations, nous allons créer un schéma de base de données pour les statuts et utiliser le générateur d’échafaudages de Yii, Gii, pour construire tout cela automatiquement. nous. Les choses vont commencer à aller un peu plus vite.

Si vous souhaitez savoir quand le prochain tutoriel Yii2 arrive, suivez-moi @reifman sur Twitter ou consultez ma page d'instructeurs Tuts +. Ma page d’instructeur comprendra tous les articles de cette série dès leur publication..

Liens connexes

  • Yii Framework Site
  • Introduction au framework Yii (Tuts +) 
  • Programmation avec Yii2: Mise en route (Tuts +)
  • Autres exemples de développeurs Yii de logiciels libres et Open Source de l'auteur