Vous êtes sur la page 1sur 11

Web

Projet Camagru
42 Staff pedago@staff.42.fr

Rsum: Ce projet a pour but de vous faire raliser une application web un peu plus
complte que les prcdentes, avec un peu moins de moyens.

Table des matires


I

Prambule

II

Introduction

III

Consignes gnrales

IV

V
VI

Partie obligatoire
IV.1
Partie utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
IV.2
Partie montage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
IV.3
Partie galerie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Partie bonus

5
5
6
7
8

Rendu et peer-valuation
VI.1
Fichiers obligatoires . . . . . . . . . . . . . . . . . . . . . . . . . . . .
VI.2
Consignes liminatoires . . . . . . . . . . . . . . . . . . . . . . . . . .

9
9
10

Chapitre I
Prambule
Lhistoire de la communication est aussi ancienne que lhistoire de lhumanit, et
lhomme a su la faire voluer au fil des sicles au travers dincroyables rvolutions.
En 1794, Claude Chappe se pencha sur la problmatique de la communication entre
de longues distances, qui tait lpoque limite la vitesse du cheval au galop. Il mit au
point un ingnieux systme de communication de tlgraphe arien pendant la Rvolution.
Les tours de Chappe taient coiffes dun mt mobile, visible la jumelle de la tour
voisine, distante de 10 km 15 km.

La ligne Paris-Lille fut ainsi oprationnelle ds 1794 et permit par exemple de transmettre des messages entre ces deux villes avec une dure de neuf minutes pour transmettre
une lettre via une quinzaine de tours ; le temps de transmission dun message dpendait
de sa longueur.
En 1844, 534 tours quadrillent le territoire franais reliant sur plus de 5 000 km les
plus importantes agglomrations.
Les gros inconvnients du systme taient quil ne pouvait fonctionner ni la nuit ni par
mauvaise visibilit et quil mobilisait beaucoup doprateurs (deux tous les 15 kilomtres
environ).
Heureusement, nous sommes en 2015.
2

Chapitre II
Introduction
Ce projet vous propose de crer une petite application web permettant de raliser des
montages basiques laide de votre webcam et dimages prdfinies.

Evidemment, ces images auront un canal alpha, sinon votre


superposition naurait pas la prestance escompte !

On pourra par exemple imaginer le moment fatidique dun lancer de chat intergalactique, preuve lappui :

Un utilisateur de votre site devra donc tre capable de slectionner une image dans
une liste dimages superposables (par exemple, des cadres ou des objets lutilit douteuse), prendre une photo depuis sa webcam et admirer le rsultat dun montage digne
de James Cameron.
Toutes les images prises devront tre publiques, likeables et commentables.

Chapitre III
Consignes gnrales
Qui dit site de pointe, dit language de pointe. Vous serez donc contraints dutiliser
PHP pour raliser ce projet.
Vous navez pas le droit dutiliser de framework, micro-framework, librairies ou quoi
que ce soit provenant du monde extrieur (except les polices de caractres), aussi bien
pour le serveur que pour le client, donc pas de Bootstrap, pas de jQuery, pas de Symfony
etc... Seules les extensions instales sur PHP (GD et les drivers SGBD, entre autres), ainsi
que les API javascript natives de vos navigateurs sont autorises.
Vous devez utiliser linterface dabstraction PDO 1 pour acceder votre base de donnes, et dfinir le mode derreur 2 sur PDO::ERRMODE_EXCEPTION.
Vous tes libres dutiliser le serveur web de votre choix, que ce soit Apache, Nginx ou
mme un built-in web server 3 .
Lensemble de votre application devra tre au minimum compatible sur Firefox (>=
41) et Chrome (>= 46).
Votre site devra avoir une mise en page dcente (cest dire au moins un header, une
section principale et un footer), tre prsentable sur mobile, et avoir un comportement
et un layout apadpt sur de petites rsolutions.
Tous vos formulaires doivent avoir des validations correctes, et lensemble de votre
site devra tre scuris. Ce point est OBLIGATOIRE et sera vrifi longuement en soutenance. Pour vous faire une petite ide, voii quelques lments qui ne sont pas considrs
comme scuriss :
Avoir des mots de passe en clair dans une base de donnes.
Pouvoir injecter du code HTML ou JavaScript utilisateur dans des variables mal
protges.
Pouvoir uploader du contenu indsirable.
Pouvoir modifier une requte SQL.
1. http://php.net/manual/en/book.pdo.php
2. http://php.net/manual/en/pdo.error-handling.php
3. http://php.net/manual/en/features.commandline.webserver.php

Chapitre IV
Partie obligatoire
Vous devez donc raliser une application web ayant les fonctionnalites suivantes :

IV.1

Partie utilisateur

Lapplication doit permettre un utilisateur de sinscrire, en demandant au minimum une adresse email, un nom dutilisateur et un mot de passe un tant soit peu
scuris. La fin de linscription doit tre complte avec un mail de confirmation.
Lutilisateur doit ensuite tre capable de se connecter avec son nom dutilisateur
et son mot de passe. Il doit galement pouvoir recevoir un mail de rinitialisation
de son mot de passe en cas doubli.
Lutilisateur doit pouvoir se dconnecter en un seul clic depuis nimporte quelle
page du site.

Web

Projet Camagru

IV.2

Partie montage
Figure IV.1 Une vague ide du layout de la page de montage

Cette partie ne doit tre accessible quaux utilisateurs connects, et rejeter poliment
linternaute 1 dans le cas contraire.
Cette page devra etre compose de deux sections :
Une section principale, contenant lapercu de votre webcam, la liste des images
superposables disponibles et un bouton permettant de prendre la photo.
Une section latrale, affichant les miniatures de toutes les photos prises prcedemment.
Votre mise en page doit donc normalement ressembler la Figure IV.1.
Les images superposables doivent tre slectionnables, et le bouton permettant de
prendre la photo ne doit pas tre cliquable tant quaucune image nest slectionne.
Le traitement de limage finale (donc entre autres la superposition des deux images)
doit tre fait cot serveur, en PHP.
Parce que tout le monde na pas de webcam, vous devez laisser la possibilit
duploader une image au lieu de la prendre depuis la camra.
Lutilisateur doit pouvoir supprimer ses montages, et uniquement les siens.
1. oui, le mot internaute vient dtre cit

Web

Projet Camagru

IV.3

Partie galerie

Cette partie doit afficher lintgralit des images prises par les membres du site,
tries par date de cration, et doit pouvoir permettre lutilisateur de les commenter et de les liker.
Lorsque une image reoit un nouveau commentaire, lauteur de cette image doit
en tre inform par mail.
La liste des images doit tre pagine.

Chapitre V
Partie bonus
Si la partie obligatoire a t ralise entirement et parfaitement, vous pouvez ajouter
les bonus que vous souhaitez ; ils seront valus la discrtion de vos correcteurs. Vous
devez nanmoins toujours respecter les contraintes de base. Par exemple, le traitement
de limage doit imprativement se faire ct serveur.
Si vous linspiration vous manque, voii quelques pistes :
Faire un aperu du rendu final en live, directement sur laperu de la camra. On
notera que cest bien plus simple quil ny parat.
AJAXifier les changes avec le serveur.
Faire une pagination infinie sur la partie galerie.
Pouvoir partager ses images sur les rseaux sociaux.
Pouvoir faire un rendu dun GIF anim.

Chapitre VI
Rendu et peer-valuation
Les consignes suivantes seront prsentes dans le barme de soutenance. Soyez trs
attentifs lors de lapplication de ces dernires car elles seront sanctionnes par un 0 sans
appel.

VI.1

Fichiers obligatoires

Votre projet doit comporter imprativement :


Un fichier index.php, contenant le point dentre de votre site, et situ la racine
de votre arborescence.
Un fichier config/database.php, contenant la configuration de votre base de
donnes qui sera instancie via PDO au format suivant :
<?php
$DB_DSN = ...;
$DB_USER = ...;
$DB_PASSWORD = ...;
?>

Le DSN (Data Source Name) contient les informations requises pour se connecter
la base, par exemple mysql:dbname=testdb;host=127.0.0.1.
En gnral, un DSN est constitu du nom du pilote PDO, suivi dune syntaxe
spcifique au pilote. Plus de dtails sont disponibles dans la documentation PDO
de chaque pilote 1 .
Un fichier config/setup.php, capable de crer ou recrer le schma de la base de
donnes, en utilisant les infos contenues dans le fichier config/database.php.

1. Pour plus dinformations, voir la documentation du constructeur de PDO

Web

Projet Camagru

VI.2

Consignes liminatoires

Votre code ne doit produire aucune erreur, warning ou notice, cot serveur et cot
client, dans la console web.
Comme nonc dans les consignes gnrales, lutilisation dun framework, dun
micro-framework, dune librairy, etc... est rigoureusement interdite, et vous devez
utiliser PDO.
Dailleurs, tout ce qui nest pas explicitement autoris est interdit.
Enfin, la moindre faille de scurit entrainera un 0. Vous devez au minimum grer
ce qui est indiqu dans les consignes gnrales, cad ne pas avoir de mot de passe
en clair, tre protg contre les injections SQL, et avoir une validation de tous les
formulaires de saisie et dupload.
Vous pouvez poser vos questions sur le forum, Jabber, Slack, etc...
Bon courage tous !

10

Vous aimerez peut-être aussi