>

Ce tutorial n'est pas à prendre comme « unique document de référence » en la matière. D'autres solutions techniques ou architecturales sont probablement disponibles. Il s'agit donc de mon point de vue, hérité à l'origine de celui d'Olivier. Mon tutorial n'est ni une copie, ni une adaptation du sien, mais il peut parfois, bien sûr, sur certains points y ressembler. Il se veut le reflet de ce que je pense nécessaire de faire et de savoir pour réaliser un site simplifié d'envoi de cartes de voeux.




En fait, cela dépend de ce que vous recherchez. Si vous voulez juste implémenter rapidement un site ou une partie 'cartes de voeux', peu de notions sont nécessaires (comme pour moi au début).
Par contre, si vous voulez améliorer le site, le personnaliser et ajouter d'autres fonctionnalités (comme pour moi après !) il sera nécessaire de posséder quelques bases (minimes, rassurez-vous !) en HTML, PHP et MySQL.
En tout cas, l'utilisation d'un éditeur de pages web est conseillée.




La démarche est simple.
Un internaute choisit parmi plusieurs visuels celui qui agrémentera son message. Après la rédaction de ce dernier (et éventuellement le choix d'options d'envoi), la carte est envoyée. Mais pour des raisons de taille en particulier, la carte n'est pas envoyée au destinataire. Il recevra un message d'invite comportant un lien Internet où il pourra consulter son message.
Ceci nous permet de diviser la tâche en quatre parties :
- le choix d'une carte
- la rédaction du message
- l'envoi de la carte et le stockage du message dans une base de données
- la lecture par le destinataire du message
C'est ce plan que nous suivrons ensuite.

Vous devez évidemment disposer de quelques visuels en deux tailles : une même image doit être disponible en 'thumbnail' ou encore miniature, et en taille normale. Ce que je propose c'est respectivement '200x133'et '500x300' en pixels. Pour le choix des cartes, on va réaliser une page de prévisualisation des différentes cartes proposées et on va donc utiliser les miniatures.
L'architecture que je propose est celle-ci : les cartes sont organisées en deux colonnes et pour en choisir une, il suffit de cliquer dessus.
Voici ce que cela donne visuellement :
Quelque soit l'image sur laquelle on clique, on affiche toujours la même page. Mais ce qui décide de l'image affichée, c'est le paramètre 'image' transmis avec l'adresse de la page. Ce paramètre contient le nom de l'image qui correspond à celle choisie. Ce paramètre est placé après l'adresse URL en ajoutant '?' puis 'image=xxx.jpg'.
Le choix est fait, on a envoyé à la page suivante le nom de l'image choisie dans le paramètre 'image'.



La page suivante doit être capable de réagir dynamiquement : elle doit afficher l'image version « grand format » correspondant au nom transmis dans l'adresse. Elle sera donc en partie rédigée en PHP. L'organisation est la suivante : 2 champs de texte pour demander le nom et l'adresse e-mail de l'expéditeur, 2 autres pour le destinataire et un dernier pour le message lui-même. Ces champs sont insérés dans un formulaire HTML. L'envoi est commandé par un bouton « envoyer », en bas de la page.
Lorsque la rédaction est terminée, l'appui sur le bouton « envoyer » provoque l'envoi des informations contenues dans les différents champs, ainsi que le nom de l'image choisie (dans une variable cachée) vers une autre page qui va s'occuper de l'envoi effectif du message.

La page qui s'occupe de l'envoi de la carte va recevoir les données de la page précédente. Après s'être connectée à la base de données, elle va y inscrire un numéro d'ind unique identifiant le message, puis les informations relatives à l'expéditeur et au destinataire ainsi que le message. Ceci est effectué grâce à des instructions MySQL, qui sont les suivantes :


/* Connexion à la base de données */
mysql_connect('hôte', 'votre_login', 'mot_de_passe');


/* Choix d'un ind d'identification unique */
$ind = rand();
$reponse = mysql_db_query("nom_de_votre_base_de_données","INSERT INTO cartes (ind,nom_exp,email_exp,nom_dest,email_dest,message,numero,image) VALUES ('$ind','$nom_exp','$email_exp','$nom_dest','$email_dest','$message','$carte','$image')");


$nom_exp, $email_exp, $nom_dest, $email_dest, $message, $carte, $image sont les données transférées par la page précédente.
On aura bien sûr au préalable pris soin de créer une table « cartes » dans la base de données avec la structure suivante :

# # Structure de la table `cartes` # CREATE TABLE `cartes` ( `ind` int(11) NOT NULL default '0', `nom_exp` varchar(100) default NULL, `email_exp` varchar(100) default NULL, `nom_dest` varchar(100) default NULL, `email_dest` varchar(100) default NULL, `message` text, `image` varchar(100) default NULL, PRIMARY KEY (`ind`) ) TYPE=MyISAM;

Ces informations seront nécessaires pour que le destinataire puisse récupérer sa carte.

L'envoi à proprement parler, s'effectue grâce à la même page. En effet, on va utiliser les mêmes données afin de construire le message e-mail qui va inviter le destinataire à venir consulter sa carte sur votre site.
Si votre hébergeur le permet, voici les instructions PHP à rédiger, afin de mettre en place l'en-tête de l'e-mail et envoyer le message.

$texte = $nom_exp." vous a envoyé une carte électronique !\n\nPour voir votre carte, suivez ce lien :\n\nhttp://votresite/cartes/?n=".$ind."\n\n";

$texte = $texte."\n\nVous pouvez envoyer vos propres cartes de voeux virtuelles grâce à Votre site !\nhttp://votresite ";
$entete = "From: ".$email."\nReply-To:".$email."\nX-Mailer: PHP/" . phpversion();
mail($email_dest, "Une carte postale pour vous", $texte,$entete);

C'est la fameuse fonction 'mail' de PHP qui nous permet cet envoi.
Lorsque l'envoi est effectué, un message s'affiche, invitant l'expéditeur à consulter lui-même la carte qu'il vient d'envoyer. Un lien envoie vers la même page qui est proposée au destinataire. Il comporte l'ind unique de la carte, afin d'accéder directement à la carte choisie et au message.



La page prend en paramètre l'ind de la carte. Grâce à cet ind, la page va recherche dans la base de données les différentes informations tels que la carte et le message, encore une fois grâce à MySQL. Les requêtes employées sont très simples :

$reponse = mysql_db_query("nom_de_votre_base_de_données","SELECT * FROM cartes WHERE ind='$n'");
$nom_exp = mysql_result($reponse,0,"nom_exp");
$email_exp = mysql_result($reponse,0,"email_exp");
$nom_dest = mysql_result($reponse,0,"nom_dest");
$email_dest = mysql_result($reponse,0,"email_dest");
$message = mysql_result($result,0,"message");
$image = mysql_result($result,0,"image");

Il suffit alors d'afficher ces résultats sur la page, et voilà !