I. Prérequis▲
Je vous invite à lire dans un premier temps mon tutoriel sur la découverte et la prise en main de WebMatrix avant de vous lancer dans la lecture de celui-ci.
II. Introduction▲
L'environnement de développement Web gratuit de Microsoft WebMatrix, intègre plusieurs outils visant à rendre facile le développement et la publication des sites Web ASP.NET et PHP.
Dans cet article, nous verrons comment utiliser les Helpers dans WebMatrix, ainsi que la galerie Web qui met à la disposition du développeur un ensemble de projets Web open source comme WordPress, Dupral, Joomla, BlogEngine ou encore DotNetNuke, qui peuvent être téléchargés, modifiés et publiés sans quitter l'environnement de développement.
Pour les exemples, ce tutoriel décrira comment intégrer des plugins de réseaux sociaux dans un site, intégrer la recherche sur le Web avec Bing et comment créer un blog WordPress à partir de WebMatrix.
III. Utilisation des Helpers▲
Les Helpers sont des composants contenant des méthodes qui vont simplifier le rendu de code HTML dans la vue. Très faciles d'utilisation, ils s'avèrent assez utiles dans le développement. Les Helpers fournissent au développeur débutant ou expérimenté, un moyen simple et cohérent d'effectuer des tâches de développement Web dynamique qui, autrement, exigeraient beaucoup de code personnalisé.
Grâce aux Helpers, avec quelques lignes de code, vous serez en mesure d'intégrer un profil Twitter ou une page Facebook à votre site, stocker des informations sur Windows Azure Storage, afficher une interface de recherche Bing sur votre site et bien plus.
III-A. Accès aux Helpers dans WebMatrix▲
Il existe un moyen simple pour télécharger les contrôles open source Helpers dans WebMatrix.
Pour cela, créez un nouveau site.
Dans l'espace de travail, cliquez sur le lien " Administration d'ASP.NET Web Pages ", pour accéder à l'interface d'administration de votre site.
À défaut, vous pouvez exécuter votre site Web, dans la barre d'adresse de la page qui s'affiche dans votre navigateur, : remplacez la page affichée par _Admin.
Votre URL doit ressembler à ceci :
http://localhost:56241/_Admin.Validez ensuite sur "Entrer". Puisque c'est votre premier accès à cette page, une fenêtre de création d'un mot de passe s'affiche comme l'illustre la capture ci-dessous :
Renseignez votre mot de passe, ensuite cliquez sur le bouton "Create Password".
Pour des raisons de sécurité, votre mot de passe est créé et enregistré dans un fichier nommé _Password.config dans le dossier App_Data/Admin de votre site.
Pour permettre l'administration du site, vous devez renommer le fichier "_Password.config" en "Password.config" (supprimez juste le "_" devant le nom du fichier).
Revenez ensuite sur la page d'administration de votre site et entrez votre mot de passe nouvellement créé. La page suivante s'affiche avec par défaut la liste des packages déjà installés.
Cliquez sur le lien " Install packages from an online feed " comme l'illustre la capture ci-dessous :
Une page contenant un ensemble de composants WebMatrix s'affiche. Dans la liste des Helpers qui sont affichés, sélectionnez le package Facebook.Helper 1.0 et cliquez ensuite sur le bouton "Install" pour que le téléchargement et l'installation du composant dans votre application Web soient effectués automatiquement par WebMatrix.
Lorsque l'installation va s'achever, vous aurez la page de confirmation de la fin de l'installation qui va s'afficher.
Procédez également à l'installation du package ASP.NET Web Helpers Library 1.1 pour le composant contenant des contrôles Twitter, Bing, etc.
Revenons maintenant dans l'interface de notre EDI WebMatrix, et voyons comment avec un minimum de code, nous pouvons exploiter ces composants dans nos pages Web.
III-B. Utilisation du Helper Twitter▲
Le Helper Twitter permet de faire interagir votre site Web avec la plateforme de micro-blogging Twitter. Vous pouvez l'utiliser pour ajouter dans une page Web votre profil Twitter, des boutons " Follow Me " et " Tweet ", ou la recherche Twitter.
Dans l'espace de travail de WebMatrix, ajoutez un nouveau fichier avec comme nom twitter.cshtml, et copiez-y les lignes de code suivantes :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Twitter Helpers </title>
</head>
<body>
@Twitter.Search("Developpez")
</body>
</html>La fonction @Twitter.Search("Developpez") va faire une veille en temps réel et afficher un flux Twitter pour la chaine de recherche (Developpez) passée en paramètre.
À l'exécution, vous obtenez le résultat suivant :
Dans le second exemple, nous allons afficher dans un panel au sein de notre site les tweets d'un compte Twitter. Pour cela, il suffit juste d'ajouter les lignes de code suivantes à votre page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Twitter Helpers </title>
</head>
<body>
@Twitter.Profile("Developpez")
</body>
</html>Pour notre exemple, nous avons spécifié comme profil Developpez.com.
À l'exécution, nous obtenons le résultat suivant :
III-C. Utilisation du Helper Facebook▲
Le Helper Facebook a été conçu pour permettre d'intégrer les plugins sociaux Facebook dans votre site WebMatrix assez facilement. Vous pouvez l'utiliser pour ajouter par exemple le bouton Like de Facebook, les commentaires, Facepile, le bouton Login, etc. Cela avec le minimum de lignes de code.
Il permet également d'intégrer facilement votre site avec le mécanisme de connexion de Facebook, afin que les utilisateurs n'aient plus à créer un autre compte juste pour accéder à votre site Web.
III-C-1. Ajout d'un LikeButon▲
Vous pouvez ajouter à l'aide d'une seule ligne de code le bouton (j'aime) "Like" de Facebook, qui permet aux internautes de poster directement sur leur profil qu'ils aiment le contenu d'une page.
Vous avez le choix entre trois types d'affichage : standard, Button count et Box count. Le code ci-dessous vous montre comment utiliser les trois types d'affichage du bouton Like.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
@Facebook.LikeButton("http://www.developpez.com") <br/>
@Facebook.LikeButton( href: "http://www.developpez.com",
buttonLayout: "button_count") <br/>
@Facebook.LikeButton( href: "http://www.developpez.com",
buttonLayout: "Box_count") <br/>
</body>
</html>Après exécution, vous obtenez le résultat suivant :
III-C-2. Actvity Feed▲
Le Plugin ActivityFeed affiche sur votre site l'activité la plus récente et intéressante transmise à Facebook par vos internautes. Comme le contenu est hébergé par Facebook, le plugin permet d'afficher un contenu personnalisé que l'utilisateur soit connecté à votre site ou non.
Pour intégrer le Plugin ActivityFeed, vous devez tout simplement ajouter la ligne de code suivante à votre site :
@Facebook.ActivityFeed("http://dotnet.developpez.com")Le nom de votre site doit être passé en paramètre. Pour cet exemple, nous avons utilisé celui de la rubrique DotNet de developpez. À l'exécution, vous obtenez le résultat suivant :
III-C-3. Les commentaires▲
Certains plugins Facebook requièrent une initialisation. C'est le cas notamment du plugin "Comments". Ce qui signifie que vous devez donner explicitement au Helper Facebook l'accès à votre compte.
Dans cette section, nous verrons comment utiliser une fonctionnalité du package qui requiert une initialisation. Pour cela, nous devons dans un premier temps inscrire notre application sur Facebook, et récupérer l'ID et la clé secrète qui seront générés par Facebook.
Pour créer ces informations vous devez vous rendre sur la page suivante :
www.facebook.com/developers/createapp.phpRenseignez le nom de votre application et cliquez sur le bouton "Créer une application".
Vous devez ensuite renseigner l'URL et le nom de domaine de votre site.
Lorsque c'est fait, cliquez sur le bouton "Enregistrer les modifications". La fonction qui sera utilisée pour l'initialisation est la suivante :
Facebook.Initialize("ID de l'application", "Clé secrète");Vous devez renseigner donc l'ID de l'application et la clé secrète générés par Facebook. Le code complet pour ajouter les commentaires Facebook dans votre site Web est le suivant :
@{
Facebook.Initialize("xxxxxxxxxxx", "yyyyyyyyyyyyyyyyyyyyyy");
}
<!DOCTYPE html>
<html lang="fr" @Facebook.FbmlNamespaces() >
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
@Facebook.GetInitializationScripts()
@Facebook.Comments()
</body>
</html>Notez l'ajout de la fonction @Facebook.FbmlNamespaces() à l'intérieur de la balise HTML.
À l'exécution, vous obtiendrez le résultat suivant :
III-D. Utilisation du Helper Bing▲
Pour boucler avec les Helpers, voyons comment utiliser Bing Helper pour ajouter une fonctionnalité de recherche à notre site.
L'ajout de ce contrôle va permettre aux internautes d'effectuer des recherches sur le Web en utilisant le moteur de recherche Bing sans avoir à quitter votre site. Il permettra également aux utilisateurs d'effectuer une recherche d'informations contenues dans votre site.
Nous allons à titre d'exemple, ajouter une zone de recherche Bing à notre site, permettant d'effectuer une recherche sur Developpez.com et sur le Web.
Le code complet que nous allons utiliser est le suivant :
@{
Bing.SiteUrl = "www.developpez.com";
Bing.SiteTitle = "Developpez.com";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
@Bing.SearchBox()
</body>
</html>Bing.SiteUrl doit contenir l'URL du site sur lequel la recherche doit être effectuée. Par défaut, vous devez spécifier cele de votre site pour permettre aux utilisateurs de retrouver facilement une information sur celui-ci.
Bing.SiteTitle est le nom qui sera affiché à l'écran. Par défaut, vous devez renseigner celui de votre site.
À l'exécution du code, vous obtenez le résultat suivant :
IV. Utilisation de la galerie d'applications : cas de WordPress.▲
WebMatrix dispose d'une galerie Web pouvant se connecter au "Web Application Gallery" de Microsoft pour proposer aux développeurs une vaste collection de CMS et applications open source populaires comme WordPress, Dupral, Joomla, mopCommerce, blogEngine.NET ou encore DotNetNuke, pouvant être installés, édités et publiés directement à partir de WebMatrix.
Nous verrons dans cette section comme utiliser WebMatrix et sa galerie d'applications pour télécharger, configurer, éditer et publier une application open source avec le minimum d'effort. L'exemple d'application va porter sur le célèbre moteur de blog open source WordPress.
IV-A. Téléchargement de WordPress▲
Lancez votre EDI WebMatrix. Dans la fenêtre de démarrage rapide, sélectionnez dans la liste des propositions "Site à partir de le galerie Web".
Une fenêtre s'affiche vous présentant un ensemble de projets open source disponibles dans la galerie d'applications que vous pouvez télécharger à partir de WebMatrix.
Sélectionnez l'application WordPress, renseignez le nom de votre blog et cliquez ensuite sur le bouton suivant.
La fenêtre qui s'affiche ensuite vous propose l'installation du moteur de base de données MySQL. Vous avez le choix entre utiliser une instance distante de MySQL ou procéder à une installation du SGBD sur votre poste.
Pour notre cas, nous allons choisir l'option "Oui, l'installer sur mon ordinateur" et cliquer sur suivant.
Puisque nous avons choisi une installation locale, nous devons spécifier le mot de passe pour le compte Admin de MySQL afin que WebMatrix se charge de la configuration automatique du moteur de base de données.
Lorsque c'est fait, cliquez sur suivant pour accéder à la fenêtre suivante. Cette fenêtre vous affiche les composants additionnels qui seront téléchargés et installés avec WebMatrix et le contrat de licence y afférant.
Il est à noter que WorPress en plus de MySQL aura besoin du connecteur .NET pour MYSQL et de PHP.
L'étape suivante permettra la création de la nouvelle base de données MySQL qui sera utilisée. Sélectionnez l'option "Créer une nouvelle base de données", définissez un nouvel utilisateur et un mot de passe pour la base de données. Prenez la peine de définir un mot de passe différent de celui de l'utilisateur root dans la zone mot de passe de base de données.
Renseignez ensuite le mot de passe administrateur (root) que vous avez défini précédemment et cliquez sur suivant.
Pour des raisons de sécurité, vous pouvez générer des clés uniques pour protéger davantage les mots de passe qui seront stockés dans la base de données.
Cliquez ensuite sur suivant. Le téléchargement sera effectué automatiquement et vous verrez la fenêtre de notification de la fin d'installation de l'application suivante :
Après l'installation, votre site apparait dans WebMatrix. Cliquez sur "Exécuter" pour lancer celui-ci.
Pour une première exécution, vous verrez la fenêtre permettant de procéder à la dernière phase d'installation de WordPress.
Renseignez le nom du site, le nom d'utilisateur, le mot de passe, une adresse email. Cochez l'option "Allow my site to appear in search engines like Google and Technorati.", pour autoriser aux moteurs de recherche d'indexer votre site, et cliquez enfin sur "Install WordPress".
Et voilà c'est tout, vous venez d'installer complètement WordPress.
Vous pouvez vous connecter maintenant avec vos paramètres créés précédemment pour administrer votre blog.
La fenêtre d'administration qui s'affiche est la suivante :
IV-B. Edition des fichiers▲
Revenons maintenant dans l'interface de WebMatrix. Vous pouvez si vous le désirez utiliser l'EDI pour procéder à quelques modifications de code avant la publication de votre projet.
Vous pouvez également procéder à des modifications de la base de données WordPress directement avec WebMatrix. Il vous suffira juste dans le panel de sélection d'espace de travail, de choisir l'espace de travail " Bases de données ". Et là , vous verrez les différents objets de votre base de données que vous pouvez modifier.
IV-C. Publication de votre application▲
Une fois que vous avez achevé les modifications, vous pouvez maintenant publier votre site sans toutefois avoir besoin de quitter l'interface de WebMatrix.
Si vous ne disposez pas déjà d'un hébergeur Web, à partir de WebMatrix vous pouvez effectuer une recherche d'un hébergeur qui répond à vos attentes. Pour cela, il suffit simplement de cliquer sur le bouton "Publier" dans la barre d'outil et ensuite sur "Rechercher un hébergement Web".
Pour transférer votre site sur votre espace d'hébergement, cliquez sur le bouton "Publier" et ensuite sur "Paramètres", après avoir bien évidemment obtenu vos paramètres FTP auprès de votre hébergeur.
Une fenêtre de renseignement de vos paramètres de publication s'affiche. Vous avez le choix entre l'utilisation du protocole FTP ou du protocole Web Deploy.
Renseignez vos paramètres de publication et cliquez sur "Valider la connexion", pour que WebMatrix essaye d'établir une connexion avec l'hôte distant. Si vos paramètres sont corrects, la connexion sera établie avec succès.
V. Conclusion▲
Microsoft a essayé de réunir au sein d'un seul environnement de développement plusieurs outils dont nous avons besoin pour la création et la publication rapide d'un site Web. Nous vous avons présenté dans ce tutoriel une infime partie des Helpers disponibles avec WebMatrix, et comment vous pouvez exploiter une application open source PHP à partir de l'environnement de développement de Microsoft.
VI. Liens▲
VII. Remerciements▲
Je tiens à remercier jacques_jean pour sa relecture et correction orthographique