Projet – Partie 1

Introduction à la programmation web serveur – IFM26086

Mise en situation
Vous travaillez pour le petit restaurant de votre quartier. À cause d’une pandémie mondiale, vous devez
fermer boutique. Après plusieurs semaines d’attente, le restaurant décide de rouvrir ses activités, mais
en faisant de la livraison de nourriture à domicile. Les commandes se prendront en ligne à partir d’un
site Web.

Le restaurant ne souhaite ne pas payer les frais de plateforme comme Uber Eats. Puisque vos patrons
savent que vous étudiez en programmation informatique, ils vous demandent donc de faire la
plateforme de commande par vous-même.

Équipe
Le projet se fait en équipe de 3 ou 4 personnes.

Assurez-vous de vous joindre à des coéquipiers en qui vous avez confiance. Personne n’aime travailler
sur un projet où certains coéquipiers ne font rien. N’hésitez donc pas à dire « non » si vous ne voulez pas
travailler avec quelqu’un.

Vous devez écrire à votre enseignant par Teams ou par courriel en indiquant les membres de votre
équipe avant le 23 octobre à 13h00.

Si le professeur ne reçoit pas de message de votre part, il fera les équipes par lui-même.

Remise
Le projet aura une durée d’environ 4 semaines. La remise se fera dans le pigeonnier correspondant sur
eCité. La date de remise sera aussi indiquée sur eCité.

Durant certaines semaines, vous devrez peut-être présenter vos avancements en équipe au professeur.
Celui-ci vous tiendra au courant si c’est nécessaire.

Design des interfaces

Le projet ne sera nullement évalué sur la qualité vos interfaces graphiques. Tant que l’information
nécessaire est présente et qu’elle est facile à trouver dans votre interface, vous ne serez pas pénalisé.

Je vous suggère toutefois de vous forcer à faire une belle interface graphique. Beaucoup d’entreprises
en Web demandent des portfolios et c’est le genre de projet qui démontre vraiment bien vos forces
autant aux yeux des ressources humaines qu’aux yeux des autres programmeurs. C’est aussi le genre de
projet qui est facilement déployable en ligne pour le montrer à vos futurs employeurs.

Si vous n’êtes pas super bon en design, n’hésitez pas à vous inspirer (et non copier) de sites Web de
commandes connu, comme celui de Uber Eats, Doordash, SkipTheDishes ou autres. N’hésitez pas non
plus à utiliser des librairies de code CSS comme Bootstrap ou Tailwind pour vous aider.

© Collège La Cité | Jonathan Wilkie 1

Fonctionnalités
Votre application Web doit avoir les fonctionnalités suivantes :

• Une page pour visualiser le menu du restaurant et ajouter des éléments à votre
commande/panier. Pour le moment, puisque nous n’avons pas de système d’utilisateurs, une
seule commande ou panier pourra être faite à la fois. Sur cette page vous permettrez à
l’utilisateur de faire les opérations suivantes :
o Permettre à un utilisateur d’ajouter un élément du menu ou plusieurs fois le même
élément de menu dans sa commande/panier
• Une page pour pouvoir réviser la commande ou panier courant et l’envoyer si vous êtes satisfait
avec ce qu’il contient. Sur cette page, vous devez offrir les options suivantes :
o Permettre à un utilisateur de supprimer la commande/panier
o Permettre à un utilisateur de supprimer certaines parties de la commande/panier
(exemple : supprimer une boisson de trop dans de la commande)
o Permettre à l’utilisateur de soumettre la commande
• Une page pour voir toutes les commandes qui ont été soumises dans le système jusqu’à
présent. Chaque commande va avoir un état qui va avoir l’une des valeurs suivantes : « En
Cuisine », « En Livraison » et « Terminée » qui doit être visible. Sur cette page, vous devez
permettre les opérations suivantes :
o Permettre à l’utilisateur de changer l’état de chaque commande pour une des valeurs
acceptées.

Si vous voulez séparer certaines de ces fonctionnalités en plusieurs plus petites interfaces ou si vous
voulez les combiner dans une seule interface, c’est possible, mais assurez-vous de communiquer avec
votre professeur pour qu’il confirme ce que vous essayez de faire.

Ce que vous n’avez pas besoin de faire

• Gérer les informations de paiement
o On ne se connectera pas aux services de Visa, Mastercard ou Interac.
o Vous pouvez quand même faire semblant et demander d’entrer le numéro de carte de
crédit dans la page de révision de commande, même si vous ne l’utiliserez pas en
arrière-plan.
• Gérer la partie de la livraison
o Vous pouvez quand même faire semblant et demander d’entrer l’adresse dans la page
de révision de commande, même si vous ne l’utiliserez pas en arrière-plan.
• Ajouter des pages superflues, comme une page « À Propos » ou « Contactez-nous ».
o Si vous en ajoutez, elles ne seront pas évaluées.
o Ce type de page contribue toutefois à rendre votre application beaucoup plus réaliste,
donc n’hésitez pas en ajouter si vous avez le temps et la motivation!
• Gérer les comptes pour accéder au site web. Nous ferons la gestion des comptes dans la 2ème
partie du projet.

© Collège La Cité | Jonathan Wilkie 2

Pondération
À la remise du projet, vous serez évalué sur les critères suivants.

Fonctionnalité Pondération
Page de visionnement du menu
Génération de la page avec un modèle 8%
Programmation de routes 10%
Validation des données 6%
Utilisation de la base de données 10%
Page de révision de commande/panier
Génération de la page avec un modèle 8%
Programmation de routes 10%
Validation des données 6%
Utilisation de la base de données 10%
Page de visionnement de toutes le commandes
Génération de la page avec un modèle 6%
Programmation de routes 10%
Validation des données 6%
Utilisation de la base de données 10%

Technologies et librairies
Vous devez utiliser les librairies de code et les technologies vu en classe pour faire le projet. Si vous
désirez utiliser d’autres librairies de code, demandez à votre instructeur s’il l’autorise en premier lieu. Si
vous utilisez une librairie de code non accepté par le professeur, celui-ci pourra vous donner la note de
zéro sur les parties de l’application affectées.

Bonnes pratiques
Jusqu’à 10% de la note pourra être pénalisé pour le non-respect des bonnes pratiques de
programmation. Assurez-vous de de me remettre un projet de qualité qui réponds entre autres aux
critères suivants :

• Le code doit être commenté

• La structure du projet doit suivre celle vu en classe
• Le code doit être bien indenté
• Le HTML et le CSS doivent être valide
• Les variables et fonctions sont bien nommées
• Le node_modules est bien supprimé à la soumission du projet
• Etc…

© Collège La Cité | Jonathan Wilkie 3

Échéancier
Voici un échéancier que je vous recommande fortement de suivre. Vous pouvez l’ajuster selon vos
besoins, mais assurez-vous d’avoir assez de temps pour compléter le projet au complet.

Semaine du 16 octobre
• Création de votre équipe (à soumettre avant le 23 octobre)
• Trouver votre type de restaurant et effectuer des recherches d’inspiration pour l’interface
graphique
• Créer votre projet à partir d’un gabarit de base
• Créer la base de votre interface graphique en HTML et CSS
• Planifier et codez la structure de vos routes

Semaine du 23 octobre (semaine d’étude)

• Remplir la base de données avec les données de votre restaurant
• Créer la couche de données de votre serveur qui va accéder à la base de données
• Programmer les routes pour qu’elles accèdent aux données
• Tester vos routes avec Postman

Semaine du 30 octobre
• Modifier les interfaces graphiques pour utiliser les engins de modélisation
• Programmer le client pour utiliser les fonctionnalités du serveur et modifier l’interface
graphique lorsque nécessaire

Semaine du 6 novembre
• Ajouter la validation du côté client
• Ajouter la validation du côté serveur

Semaine du 13 novembre
• Temps supplémentaire pour compléter et peaufiner le projet
• Remise du projet

© Collège La Cité | Jonathan Wilkie 4

Modèle de données
Pour la base de données, je vous demande d’utiliser le modèle ci-dessous. N’hésitez pas à ajouter des
tables ou des champs dans le modèle selon vos propres besoins. Vous aurez d’ailleurs un script
« connexion.js » que je vais vous fournir qui crée la base de données ci-dessous dans votre application
avec quelques données de test.

Bien que le concept d’utilisateur soit déjà présent dans la base de données, nous l’ignorerons pour
l’instant. Il sera toutefois très important plus tard. On utilisera donc un utilisateur par défaut avec le
« id_utilisateur » à 1. Tous les utilisateurs de votre application web utiliseront ce même utilisateur pour
l’instant.

Vous remarquerez que la date est entrée comme un nombre entier. Nous utilisons le standard EPOCH
en millisecondes pour représenter la date et l’heure d’une commande. EPOCH est le nombre de
millisecondes écoulé depuis le 1er janvier 1970. Vous trouverez différentes fonctions en Javascript ou
avec SQLite pour manipuler ces valeurs en effectuant des recherches sur le web.

© Collège La Cité | Jonathan Wilkie 5