Passer au contenu

Des cartes postales virtuelles avec ColdFusion et Dreamweaver

Le haut niveau d’intégration des logiciels d’Allaire et de Macromedia, ainsi que leur facilité d’utilisation permettent de créer un service de cartes postales virtuelles en quelques heures.

Le marketing viral s’appuie sur de nombreux outils tels que les cartes postales virtuelles qui permettent d’utiliser l’intérêt que l’internaute porte à votre site comme un vecteur publicitaire. Cette mise en ?”uvre entend montrer comment mettre en place une telle prestation en s’appuyant sur l’excellente intégration de ColdFusion Studio avec Dreamweaver. L’exemple est volontairement simplifié pour des raisons de clarté mais il peut être développé en ayant notamment recours à une base de données.

Proposer un choix de cartes postales

La première étape consiste à présenter un éventail de cartes postales à l’utilisateur et à lui permettre de saisir les différents paramètres nécessaires à l’envoi.1. Récupérez les paramètres de l’utilisateur

Pour cela, appuyez-vous sur un simple formulaire dans lequel figureront les nom et adresse e-mail de l’utilisateur, ainsi que les coordonnées du destinataire (nom, e-mail) et le texte de la carte postale.

Prévisualiser la carte

Lorsque les données utilisateur sont recueillies, il ne reste plus qu’à mettre en forme la carte et à permettre à l’internaute de prévisualiser le résultat final avant l’envoi.2. Affichez les variables du formulaire

L’instruction “CFOUTPUT” vous permet de réaliser cette étape. Utilisez-la, à la fois pour alimenter le formulaire caché et pour afficher les paramètres de l’utilisateur à l’écran.3. Passez les variables au formulaire d’envoi

Pour pouvoir envoyer l’e-mail, vous allez devoir disposer de l’adresse, ainsi que des autres paramètres saisis par l’utilisateur. Passez ces paramètres à la page “envoi.cfm” en utilisant un formulaire dont l’ensemble des champs est de type “hidden” (invisible). Leur valeur est renseignée directement par la variable récupérée du formulaire utilisateur (choix.cfm) grâce à l’instruction “#form.xxx#” où “xxxx” qui représente le nom du champ du formulaire à récupérer.4. Positionnez les données avec des calques

La mise en page de la carte postale est assez complexe et le recours à un éditeur HTML Wysiwyg (What You See Is What You Get) facilite grandement la tâche. ColdFusion Studio 4.5 et Dreamweaver 3.0 sont parfaitement intégrés. Rendez-vous dans le menu “Options/settings” de ColdFusion Studio et cliquez sur l’item “Dreamweaver”, puis vérifiez que la case “Enable Dreamweaver integration” est bien cochée.
Créez une nouvelle page en cliquant sur “New” de la barre d’outils et donnez-lui pour nom “carte.cfm”. Ensuite, à nouveau dans la barre d’outils de l’éditeur de code, cliquez sur l’icône “Macromedia Dreamweaver”. Vous retrouvez votre page dans Dreamweaver. Positionnez les calques de façon à obtenir une mise en page qui vous convienne.5. Insérez les variables

Lorsque le design est achevé, intégrez les variables passées par le formulaire dans chaque calque. N’oubliez pas d’inclure dans le calque principal l’image qui constitue le fond de la carte postale.

Générer la carte postale

6. Stockez la page statique

Vous allez maintenant transformer cette page dynamique en une page statique stockée dans un fichier, afin que le destinataire ait exactement le même résultat à l’écran que l’expéditeur. Pour cela, copiez-collez le code généré par Dreamweaver (code compris entre le point 4 et le point 6) et remplacez les guillemets présents dans le bloc par de simples cotes ” ` “. Encadrez ensuite ce code par l’instruction ““, laquelle permet d’affecter l’ensemble du code copié-collé à la variable “#content#”.7. Enregistrez le code statique

À présent, enregistrez le code statique généré dans un fichier dont le nom ne sera pas ambigu. Choisissez pour cela l’adresse e-mail du destinataire que vous concaténerez avec une extension “.html”. Cliquez sur “CFML Advanced” et sur “CFFILE”. Sélectionnez ensuite “WRITE” et insérez la variable “#content#”, que vous venez de définir, dans le champ “output”. Enfin, indiquez “#destmail#.html” comme nom de fichier.

Envoyer la carte postale

8. Paramétrez l’envoi

Adressez un e-mail au destinataire pour lui indiquer qu’une carte postale virtuelle l’attend sur votre site Web. Sélectionnez l’icône “CFMAIL” puis renseignez les différents paramètres avec les variables (“#form.destmail#”, “#form.destnom#”, etc.) que vous venez de passer au travers du formulaire caché de la page “carte.cfm”.9.Créez une URL dynamique

Pour finir, construisez dynamiquement l’URL (adresse Internet) permettant d’accéder à la carte postale virtuelle. Pour cela, vous devez concaténer l’adresse de votre site Web www.mondomaine.com/cards/ avec le nom du fichier “#form.destmail#.html”.

🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.


Frédéric Bordage