Utilisation de jQuery

Cégep de Sherbrooke
Laboratoire 4 – Fonctionnalité AJAX, jQuery, Paypal
Buts :



Comprendre la relation entre PHP, HTML et JavaScript.
Découvrir les principales fonctionnalités de la bibliothèque jQuery
S’initier au commerce électronique avec PayPal
Durée : 5 cours
Implémentation d’AJAX
1. Gestion de production
Votre page gestion de production devrait actuellement permettre l’ajout et la modification d’une
production. Dans cette même page, il devra être possible de créer de nouveaux comédiens sans
devoir recharger de la page pour ensuite l’associer à la production en ajoutant le ou les noms de
personnages, la photo et la petite réplique d’un des personnage.
Les comédiens déjà créés doivent être sélectionnables d’une certaine manière. Près de cette liste,
ajoutez un bouton « Créer un comédien» qui fera apparaitre un formulaire qui permettra l’ajout d’un
comédien à la base de données et donc à la liste. Le tout doit se faire sans recharger la page.
2. Publication de commentaire
Le même principe doit être implanté pour les commentaires d’une production. C’est-à-dire que le
visiteur doit pouvoir entrer son nom, son courriel, une cote sur 5 représentée par des étoiles (mais
en int dans la bd) et un commentaire puis ces informations seront ajoutés à la base de données puis
le commentaire est affiché sur la page sans devoir recharger la page.
Note : vous devez utiliser l’approche standard
pour une des deux situations et utiliser l’approche jQuery l’autre.
Billetterie avec PayPal
Pour cette partie vous allez expérimenter le commerce électronique à l’aide de PayPal. Pour ce faire
vous aurez besoin d’un compte PayPal et d’un compte PayPal sandbox. Ne vous inquiétez pas vous
n’aurez pas besoin de carte de crédit.
Sur votre page billetterie, vous devez permettre de choisir la représentation, le nombre de billets et
en cliquant sur un bouton vous êtes dirigés sur PayPal pour compléter la transaction. Un courriel
contenant les informations de la transaction générée doit être envoyé au client et à l’administrateur
du site. Davantage de détail vous seront fournis lors de la démonstration de PayPal.
Si vous voulez joindre un billet numérique en pdf que les visiteurs imprimeront, vous pouvez le faire,
mais c’est laissé en bonus. Le modèle de billet pour la troupe existe déjà et vous devriez vous en
inspirer. Les numéros de billets seront sous le format suivant W1, W2 ou le nombre est incrémenté.
Page 1
Utilisation de jQuery
Tel que mentionné dans la section AJAX, vous devrez utiliser jQuery pour faire des requêtes AJAX. De
plus, vous devrez utiliser jQuery à diverses sauces dans la page des statistiques de vente. JQuery
étant la bibliothèque par référence pour JavaScript, il serait dommage de s’en priver.
1. Liste des ventes
Cette page servira à valider les billets numériques des spectateurs qui arrivent le soir de
représentation. Pour ce faire, vous devrez produire un tableau affichant les informations suivantes :
(une ligne par billet)
-
No de confirmation PayPal
Nom et Prénom de l’acheteur
Adresse de l’acheteur
Date de représentation
No du billet
Le prix du billet
Le tableau doit être regroupé par ordre de date de représentation et trié par numéro de
confirmation paypal se trouvant dans le mail de confirmation ou sur le billet, il sera facile de trouver
la transaction dans la liste pour cocher que le visiteur est venu voir le show et qu’il a bien acheté un
billet.
Pour faire le filtre et le tri, nous vous recommandons d’explorer le plugin jQuery tablesorter.
Disponible à cette adresse : http://tablesorter.com/docs/
Par défaut, toutes les ventes des
représentations à venir sont
affichées dans le tableau et
regroupé. Il doit être possible de
choisir une production et de
sélectionner
des
dates
de
représentation qui filtre le tableau
de données en éliminant les autres
représentations.
Voici un exemple de page pour
vous inspirer, mais celle-ci n’est pas
complète, il manque le total de
billet vendu en bas du tableau et
les billets sont W1, et non WEB, car
ça ne rentra pas dans la bulle
prévue pour l’écriture du no.
Il doit y avoir un effet de transition lorsqu’une production est sélectionnée. Il doit être facile de
distinguer la production sélectionnée. Cette transition doit être faites avec jQuery. Les dates de
représentation et les données affichées dans le tableau varient en fonction de la production choisie,
et ce sans recharger la page et sans utiliser de requête AJAX. Vous devrez jouer avec les propriétés
CSS à partir de jQuery pour y arriver. Les évènements clic sur les productions doivent être géré par
les évènements jQuery.
Page 2
2. Carrousel (Plugin jQuery)
Une page d’accueil se veut d’abord et avant tout un tape à l’œil. Cette page doit capter l’attention du
visiteur. C’est pourquoi la majorité des sites web intègre un carrousel d’image qui défile. Il y a un
nombre impressionnant de plugin jQuery qui permettent facilement l’intégration d’un carrousel.
Vous devez donc intégrer minimalement un carrousel sur votre site.
Remise : 8 octobre avant le début du cours
La remise sera sous forme d’un accès Web. L’enseignant responsable de la correction prendra une
copie de votre site web pour en faire la validation du code.
Votre site web doit se trouver dans un répertoire nommé lab4.
Prévoyez dans vos liens qu’à la fin de ce laboratoire vous devrez copier votre site web de « lab4 »
vers un nouveau dossier qui sera nommé « lab5 » pour débuter votre 5e laboratoire. Cela a pour but
de laisser une version dans l’état final de votre 4e laboratoire. Ce qui laissera aux enseignants le
temps de corriger votre travail sans que vous soyez en train de travailler sur cette même version.
Page 3