Informatique et Techniques Numériques en Economie
-
TD - Bonus : Site commercial dynamique

Présentation Générale

L'objectif de ce TD est de réaliser votre propre site commercial dynamique.

Compétences à acquérir au cours du TD

• Compréhension de l'architecture d'un site internet dynamique
• Compréhension des mécanismes PHP/MySQL mis en oeuvre pour la réalisation du site

Préparation

Avant toute chose vous devez avoir créé votre base de donnée, et choisi les produits mis en ventre sur votre site. Ce TD ne s'intéresse qu'à la réalisation des pages dynamiques du site.

0- Principe d'un site dynamique

Ce schéma présente les différentes étapes de traitement de l'information sur un site dynamique. Les trois blocs représentent les 3 modules essentiels d'un tel site.

Le navigateur internet permet d'interagir avec l'utilisateur, on y requeille les demandes et les informations fournies par l'utilisateur, et on y restitue le résultat du traitement sous forme de page HTML.

Le serveur PHP traite les demandes et les informations fournies par l'utilisateur, et éventuellement interagit avec la base de données SQL. C'est lui qui génère la page HTML de réponse à la fin du traitement.

Le serveur SQL stocke les données dans une base, et les restitue à la demande.

La réalisation d'un site dynamique nécessite donc la connaissance des trois langages associés à chacun des blocs : HTML, PHP et SQL.

1- Architecture générale du site

La figure ci-dessus décrit l'architecture du site internet. Elle décrit les différentes pages du site et les liens de navigation entre ces pages. Eventuellement le lien comporte l'information qui doit être passée d'un page à une autre.

Le principe du site est le suivant est de stocker les informations sur le client qu'il achète ou non. On lui demande donc de répondre à un questionnaire avant de lui présenter la liste des produits. Ensuite si le client achète le produit, on retient le produit qu'il a choisi.

Bien sûr cette architecture n'est pas très réaliste, aucun site ne vous demande d'information avant d'acheter. Mais on peut imaginer une opération promotionnelle visant à récolter des informations pour une étude de marché (offres spéciales pour les clients qui acceptent de répondre au questionnaire par exemple). Ou bien que les informations sur le client sont disponibles par ailleurs (compte ouvert après une premier achat, carte de fidélité). Au final l'objectif ici est de savoir réaliser un site qui va remplir notre base de données.

2- Page d'accueil et qui sommes nous ?

Le principe de ces deux pages est de réaliser des pages HTML simples, avec des liens de navigation entre elles.

La page d'accueil doit contenir le nom du site, et une description générale des produits vendus sur le site.

La page "Qui sommes-nous ?" doit contenir les noms, prénoms, le groupe de TD et le Master suivi par les auteurs.

Un lien doit permettre d'aller d'une page à l'autre.

(Si vous avez besoin d'un rafraîchissement en HTML : Elements sur HTML)

2- Questionnaire client

Cette page doit être accessible depuis la page d'accueil, ajoutez y un lien.

Le questionnaire est géré par deux pages distinctes : une page d'affichage du questionnaire en HTML et une page de traitement en PHP.

La page HTML doit afficher un message commercial pour introduire le questionnaire (par ex. "afin de mieux vous servir, merci de nous fournir ces quelques renseignements"). Puis un formulaire permettant saisir les caractéristiques des clients (age, sexe, csp, styel).

La page PHP, appellée par le formulaire, doit permettre de stocker ces information dans la base SQL.

Une fois le traitement terminé, il faut rediriger vers la liste des produits, en n'oubliant pas de passer comme paramètre la référence du client, afin de pouvoir ensuite mentionner un éventuel achat.

Indications

• Le formulaire ne doit pas poser de problème si vous avez correctement compris le TD3
• Pour rediriger vers une page utiliser la fonction PHP header()
• Pour passer l'identifiant du client à la page des produits utiliser la methode GET
• La combinaison de ces deux indications donnent :

header("location: produits.php?idClient=$idClient");

• Pour générer des identifiants de client uniques, utilisez dans la base SQL un champ 'idClient' en clé primaire avec comme option 'auto-increment'. (Ces options se trouvent à la fin de la ligne de création d'un nouveau champ dans phpmyadmin)
• Après l'insertion d'un nouvel enregistrement dans la base (INSERT), la fonction PHP mysql_insert_id(), permet de récupérer l'identifiant créé :

$idClient = mysql_insert_id();

3- Liste des produits et achat

Comme pour le questionnaire, l'achat est géré par deux pages, mais ce coup-ci elles sont toutes les deux en php.

La liste des produits doit être générée automatiquement en php, a partir de la lecture de la table produit.

Cette liste doit être présentée dans un formulaire, avec un bouton radio par produit, permettant de choisir le produit acheté, et deux boutons d'action, permettant d'acheter ou non.

La page de traitement de ce formulaire doit uniquement renvoyer vers la page d'acceuil si le client ne souhaite pas acheter. En cas d'achat il faut inscrire cet achat dans la base (UPDATE) et afficher une confirmation.

Indications

• Commencez par simplement afficher la liste des produits. Cela ne doit pas poser de problèmes si vous avez bien fait l'exercice 9-1 du TD3.
• Entourez la liste par les balises d'un formulaire, et ajoutez un bouton radio devant chaque produit. (attention à garder le même nom pour tous les boutons et à ne changer que la valeur).
• N'oubliez pas d'ajouter un champ caché (<input type="hidden">) permettant d'envoyer l'identifiant du client a la page de traitement.
• Ajouter les deux boutons d'envoi. Afin de pouvoir savoir si le client a acheter ou pas faites comme pour les boutons radios : donner le même nom aux deux boutons mais changer la valeur.
• La page de traitement ne pose normalement pas de problème.
• Il faut d'abord déterminer quelle est l'action choisie (la valeur du bouton d'envoi pressé).
• Si le client n'achète pas, on le renvoie directement vers la page d'acceuil (header("location: index.html")).
• En cas d'achat il faut mettre à jour la table des visites (UPDATE), c'est pour cela qu'il faut connaître l'identifiant du client.
• Ensuite on affiche un message de confirmation ("achat enregistré"), et un lien vers la page d'acceuil.

4- Test du site

Vérifiez que chaque page fonctionne. Il est recommandé de tester les pages une par une. A chaque fois vérifiez que les modifications de la base de donnée se passe bien.

Indications

• Pour chaque page PHP qui reçoit des informations, affichez les informations reçues en haut de la page.

$idClient = $_GET['idClient'];

echo "<p>DEBUG: idClient = $idClient</p>";

• Vérifiez que chaque requête SQL se termine bien.

$sql = "SELECT * FROM produits";

$resultat = mysql_query($sql)

if($resultat == 0) echo "Erreur dans la requete '$sql'";

Facultatif- Design du site.

Une fois qui tout marche bien, et seulement lorsque tout marche bien, vous pouvez améliorer le design du site. Par exemple vous pouvez ajouter un cadre spécifique à votre site, ou afficher des photos pour vos produits (indication: stockez le nom des photos dans la table des produits), etc.

Bien entendu cela ne doit pas altérer le fonctionnement de votre site !