Mostefai Mohammed Amine's Blog

Say That I Was Here !

Tutoriel 6.2 : Connexion à une base de données en utilisant Entity Framework

L’objectif de ce tutoriel (deuxième du module 6) est d’utiliser EntityFramework pour effectuer des requêtes sur une base de données. En introduisant une année et en cliquant sur un bouton, l’utilisateur affichera tous les films dont l’année est supérieure à l’année entrée. L’objectif de cette étape est de créer la page permettant la recherche et l’affichage des résultats Lancez VS 2012 Créez une application ASP.NET vide appelée « LinqToEntitiesTest » Ajoutez une forme web appelée « Default.aspx » Glissez un « Label » avec la propriété « Text » à « Année » Glissez un « TextBox » à droite du libellé avec la propriété « ID » à « txtSearch » Ajoutez un bouton à droite de la zone de texte avec la propriété « Text » à « Chercher » et « ID » à « btnSearch » A partir de l’onglet « Données », glissez un « GridView » en dessous des contrôles que vous venez d’ajouter Etape 2 : Création du contexte EntityFramework L’objectif de cette étape est de créer l’objet « Contexte » permettant de se connecter à la base de données de films. Dans l’explorateur de solutions, ajoutez un nouvel élément au projet « LinqToEntitiesTest » Dans les catégories à gauche, choisissez « Données » Dans le modèle, choisissez « Modèle Entité ADO.NET » Dans la zone « Nom » entrez « FormationModel » Cliquez sur le bouton « Ajouter » Visual Studio, demande si on doit générer le modèle à partir d’une base de données existante ou générer un nouveau modèle. Cliquez sur « Générer à partir d’une base de données » puis sur « Suivant » VS demande la chaîne de connexion à utiliser.   Si la chaîne n’existe pas, cliquez sur « Nouvelle Connexion ». Dans la zone serveur entrez « . » ou « .\SQLExpress » selon la version de SQL server installée Dans la zone « base de données » sélectionnez la base de données « Formation » Cliquez sur « Tester la connexion » pour valider Cliquez sur « OK » Cliquez sur « Suivant » Dans le nœud « Tables », cochez la table « Formation » Cochez « pluraliser ou singulariser les entités générées » Cliquez sur « Terminer » VS 2012 génère automatiquement le modèle et l’ouvre en mode conception Remarquez que le modèle contient une seule entité « Film » Etape 3 : Exécution de la requête en utilisant le contexte L’objectif de cette étape est d’utiliser le contexte généré par Visual Studio dans la page web afin de chercher les films dont l’année est supérieure à l’année fournie. Ouvrez la page « Default.aspx » en mode conception Double-cliquez sur le bouton afin de générer l’évènement de clic Dans l’évènement généré, insérez le code suivant: int numero = int.Parse(txtSearch.Text); using (FormationEntities context = new FormationEntities()) { var requete = from entite in context.Films where entite.Annee > numero select entite; GridView1.DataSource = requete.ToList(); GridView1.DataBind();   } Appuyez sur « F5 » pour exécuter Examinez la requête « Linq » et sa syntaxte var requete = from entite in context.Films where entite.Annee > numero select entite; Linq utilise une syntaxe proche du SQL pour permettre aux développeurs d’exécuter des requêtes sur des contextes qui sont traduites par EntityFramework en requêtes SQL Pour télécharger le code, cliquez ici

Création d’un site web statique avec Visual Studio 2012 (Tutoriel 1.1)

L’objectif de ce tutoriel est de créer un site web statique avec Visual Studio. Le site sera composé d’une page HTML, une feuille de style CSS et d’un fichier Javascript. Ce tutoriel est relatif au module “introduction à ASP.NET et Visual Studio 2012” Etape 1 – Lancer Visual Studio L’objectif de cette étape est de se familiariser avec la création de site web sous VS 2012. Lancer VS 2012 Choisir Fichier -> Nouveau -> Site Web Choisir le modèle « site web ASP.NET vide » Choisir l’emplacement du site (répertoire) Cliquez sur OK Etape 2 – Création d’une page web L’objectif de cette étape est de créer des pages HTML avec Visual Studio et d’y ajouter des balises HTML. Cliquez sur le menu « Fichierà Nouveau à Fichier » Dans les modèles, choisissez « Page HTML » Dans le nom entrez « index.html » Cliquez sur OK Dans l’éditeur, tapez le code suivant entre <body> et </body> <p>Bienvenue à la <span id="mot">formation</span> ASP.NET et de développement web</p> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } En utilisant la barre d’outils, glissez un « div » juste après la balise fermante </p> Dans la fenêtre de propriétés, entrez « footer» dans la zone « ID » <div id="footer"></div>   Etape 3 : Modification de la page en mode « Conception » L’objectif de cette étape est d’apprendre à modifier les pages HTML en utilisant le designer de Visual Studio. Basculez en mode conception de « Index.html » en appuyant sur le bouton « Conception » de l’éditeur Ajoutez les mots suivants : « et de développement web » à la fin du paragraphe   Etape 4 – Création de fichiers CSS et Javascript Cliquez sur Fichierà Nouveau à Fichier Dans les modèles, choisissez feuille de style Dans la zone nom, entrez « Site.css » Cliquez sur le bouton OK Entrez le code suivant dans le fichier CSS : body { }   span#mot { color : red; }   div#footer { margin 5; min-height : 40px; background-color : green; } Enregistrez le fichier Par un glisser-déposer, faites glisser le fichier CSS à partir de l’explorateur de solutions sur le fichier HTML et remarquez comment le style a été appliqué sur la page   Cliquez sur Fichier à Nouveau à Fichier Dans le modèle, choissez « Javascript » Dans la zone nom, entrez « MyScript.JS » Dans l’éditeur tapez le code suivant : function sayHello(me) { alert('hello ' + me); } Ouvrez le fichier « Index.html » en mode source Faites un glisser déposer du fichier « MyScript.js » vers « index.html » (entre les balises HEAD » Modifiez le code HTML comme suit : <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="Site.css" rel="stylesheet" type="text/css" /> <script src="MyScript.js"></script> </head> <body> <p> Bienvenue à la <span id="mot" onclick="sayHello(‘Votre nom);">formation</span> ASP.NET et de développement web </p> <div id="footer"></div> </body> </html> Cliquez sur le bouton « Exécuter » Etape 5 : Débogage L’objecif de cette étape est d’utiliser les fonctions de débogage de Visual Studio afin de créer un point d’arrêt sur un script JavaScript et d’évaluer une variable dans une fonction JavaScript. Fermez la fenêtre du site Ouvrez MyScript.js Insérez un point d’arrêt sur l’instruction « alert » en double-cliquant sur la barre latérale   Exécutez le site en appuyant sur « F5 » Appuyez sur le texte « formation » Remarquez VS qui se met en mode « debogage » et renvoie sur le fichier « MyScript.js »   Faites passer la sourir sur la variable « me » Vérifiez que cette variable correspond à la valeur passée lors de l’appel Appuyez sur F5 pour continuer l’exécution Fermez la fenêtre du site Pour télécharger le code source, cliquez ici.