IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

MVC Music Store

MVC Music Store


précédentsommairesuivant

Traduction

Cet article est la traduction non officielle de l'article original de Jon Galloway,MVC Music Store

Le code source ainsi que le support technique sont disponibles à cette adresse : http://mvcmusicstore.codeplex.com

I.1. Aperçu

Le MVC Music Store est une application d'étude qui introduit et explique étape par étape comment utiliser ASP.NET MVC et Visual Web Developer pour faire du développement web. Nous allons débuter lentement, donc pour ceux qui n'ont pas ou peu d'expérience en développement web, ce tutoriel leur conviendra.

L'application que nous allons construire est un magasin de musique simplifié. Il y a trois principales parties dans cette application : l'achat, le contrôle et l'administration.

Image non disponible

Les visiteurs peuvent parcourir les albums par genre :

Image non disponible

Ils peuvent afficher un seul album et l'ajouter au panier :

Image non disponible

Ils peuvent visualiser leur panier et enlever les éléments dont ils ne veulent plus :

Image non disponible

Accéder au paiement les invitera à se connecter ou créer un nouveau compte d'utilisateur.

Image non disponible
Image non disponible

Après avoir créé un compte, ils peuvent compléter la commande en remplissant les informations de paiement et de livraison. Pour garder les choses simples, nous allons mettre en place une promotion étonnante : tout est gratuit s'ils entrent le code de promotion " FREE " !

Image non disponible

Après avoir commandé, ils voient un simple écran de confirmation :

Image non disponible

En plus des pages de profils client, nous allons aussi construire une section administration qui affichera une liste des albums à partir de laquelle les administrateurs pourront créer, modifier et supprimer des albums :

Image non disponible

I.2. Fichier -> Nouveau Projet

I.2.1. Installer le logiciel

On va commencer ce tutoriel en créant un nouveau projet ASP.NET MVC 3 grâce à Visual Web Developper 2010 Express (qui est gratuit), puis nous ajouterons au fur et à mesure des fonctionnalités afin de créer une application complète et fonctionnelle. Tout au long de notre parcours, nous couvrirons l'accès à la base de données, l'aspect métier, la validation des données, l'utilisation de pages maîtres pour une mise en page cohérente, l'utilisation d'AJAX pour la validation et la mise à jour des pages, l'authentification d'utilisateurs et bien d'autres.

Vous pouvez suivre étape par étape, ou bien télécharger l'application complète depuis : http://mvcmusicstore.codeplex.com.

Vous pouvez utiliser Visual Studio 2010 SP1 ou Visual Web Developer 2010 Express SP1 (une version gratuite de Visual Studio 2010) pour construire cette application. Nous allons utiliser le SQL Server Compact (gratuit également) afin d'héberger la base de données. Avant de commencer, assurez-vous d'avoir installé les prérequis ci-dessous. Vous pouvez les installer en utilisant Web Platform Installer grâce à ce lien : http://www.microsoft.com/web/gallery/install.aspx?appid=VWD2010SP1Pack

Note : vous pouvez trouver ce lien sur le gros bouton vert sur ce lien (facile à retenir): http://asp.net/mvc.

Image non disponible

Web Platform Installer va se charger de vérifier les éléments déjà installés et télécharger ceux dont vous avez besoin.

Image non disponible

Si vous souhaitez installer chaque prérequis de façon individuelle en utilisant les liens suivants au lieu du lien ci-dessus, utilisez les liens suivants (écrits au cas où vous utilisez une version imprimée du tutoriel) :

Note : si vous utilisez Visual Studio 2010 au lieu de Visual Web Developer 2010, installez les prérequis en utilisant plutôt ce lien :

Visual Studio Web Developer Express SP1 prerequisites. http://www.microsoft.com/web/gallery/install.aspx?appid=VWD2010SP1Pack.

Je vous recommande fortement d'utiliser le lien Web Platform Installer, qui s'assurera que vous ayez tout configuré correctement.

I.2.2. Créer un nouveau projet ASP.NET MVC 3

Nous allons commencer en sélectionnant "New Project" à partir du menu File de Visual Web Developer. Ceci fera apparaître la boîte de dialogue New Project.

Image non disponible

Nous allons sélectionner Visual C# -> Web dans les Installed Templates sur la gauche, puis choisir "ASP.NET MVC 3 Web Application" dans la colonne centrale. Nommez votre projet MvcMusicStore puis cliquez sur le bouton OK.

Image non disponible

Ceci fera apparaître une deuxième boîte de dialogue qui nous permettra d'effectuer quelques réglages spécifiques à MVC pour notre projet. Sélectionnez les éléments suivants :

Project Template - sélectionnez Empty ;

View Engine - sélectionnez Razor ;

Cochez Use HTML5 semantic markup.

Vérifiez que vos réglages sont comme ci-dessous, puis cliquez sur le bouton OK.

Image non disponible

Cela aura pour effet de créer notre projet. Jetons un œil aux dossiers qui ont été ajoutés à notre application dans l'explorateur de solution à droite.

Image non disponible

Le template Empty n'est pas complètement vide - il ajoute une structure composée des dossiers de base :

Image non disponible

ASP.NET MVC utilise des conventions de nommage pour les noms de dossiers :

Dossier Objectif
/Controllers Les contrôleurs répondent à une entrée en provenance du navigateur, décident de ce qu'ils doivent en faire, puis renvoient la réponse à l'utilisateur.
/Views Les vues s'en tiennent à l'organisation des modèles UI.
/Models Les modèles s'en tiennent à l'organisation et la manipulation de données.
/Content Ce dossier contient nos images, CSS et tout autre contenu statique.
/Scripts Ce dossier contient nos fichiers JavaScript.


Ces dossiers sont inclus, même dans les applications ASP.NET MVC ayant le template Empty car le framework ASP.NET MVC utilise par défaut une approche "convention plutôt que configuration" et fait certaines hypothèses par défaut basées sur les conventions de nommage des dossiers. Par exemple, les contrôleurs recherchent les vues dans le dossier Views par défaut sans que vous l'ayez explicitement spécifié dans votre code. S'en tenir aux conventions par défaut réduit la quantité de code que vous aurez à écrire, et peut également faciliter auprès d'autres développeurs, la compréhension de votre projet. Nous détaillerons un peu plus ces conventions quand nous aurons avancé dans la construction de notre application.

Vous pouvez utiliser les discussions disponibles sur http://mvcmusicstore.codeplex.com pour toutes questions ou tous commentaires.


précédentsommairesuivant

Copyright © 2012 Jon Galloway. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.