Département Informatique

Introduction au Web

Ce cours est enseigné aux étudiants de DUT du département Informatique de l’IUT Lyon 1.

Support de cours

Le support du cours d’introduction au Web est consultable en ligne : Cours d’introduction au Web. Merci à son auteur, Pierre-Antoine Champin.

Projet 2015

Objectif

L’objectif de votre projet est de produire, en binôme, la maquette d’un blog.
Ce sera une maquette dans le sens où les fonctionnalités coté serveur (recherche, ajout d’article …) seront simulées.

Cahier des charges

Votre maquette utilisera exclusivement du HTML et du CSS (pas de Javascript ou de PHP).

Votre projet devra, au minimum, comporter :

  • une page d’accueil, affichant un message de bienvenue, ainsi que le résumé d’un article du blog (titre, résumé, image et son dernier commentaire) ;
  • une page de résultat de recherche, affichant une liste de titres et dates d’ajout d’articles sous la forme d’un tableau;
  • une page détaillée d’article, incluant son titre, son illustration, son texte complet, tous ses commentaires et la possibilité d’en ajouter ;
  • une page d’ajout d’article, permettant de créer un nouvel article (saisie du titre, insertion de l’image, saisie du résumé, et du texte complet) ;
  • une page “A propos” présentant le site.

Concernant la structure des pages, chacune devra au minimum comporter :

  • une bannière (bandeau supérieur avec le titre du site) ;
  • un menu comportant les catégories : accueil, ajouter un article, rechercher un article, à propos ;
  • un panneau latéral comprenant une zone de recherche ;
  • un pied de page comportant les noms du binôme.

IMPORTANT :

  • La présentation de votre site devra s’adapter à la largeur de l’écran, afin de présenter une ergonomie différente (et appropriée) sur un écran d’ordinateur et sur un smartphone.
  • Pensez-bien à utiliser les valideurs du W3C pour le code HTML et CSS ; une partie de votre note dépend d’eux !
Constitution du binôme

Chaque binôme m’enverra par mail :

* Les noms et adresses mail des deux étudiants constituant le binôme,
* Le thème choisi pour le projet, fixé jusqu’au rendu,

avant le vendredi 13 février 2015 à 11:59.

Rendu des projets

Chaque binôme m’enverra par mail :

  • l’URL à laquelle son projet est accessible, et
  • l’URL d’un dépôt GIT (par exemple sur github) contenant les fichiers du projet (et démontrant un minimum d’utilisation),

avant le jeudi 26 mars 2015 à 23:59.
Tout retard entraînera un malus dissuasif sur la note.

Quelques indications
  • Vous êtes bien sûr libres de choisir le thème de votre projet et devez imaginer un graphisme cohérent. A la manière d’un blog en vogue, votre projet devra avoir un aspect uniforme d’une page à l’autre.
  • Comme il s’agit d’une maquette, les liens entre les pages doivent simuler de manière cohérente la navigation à l’intérieur du site. Notez que, même si certaines pages (page d’accueil, résultat de recherche) contiennent des liens vers des articles différents, tous ces liens peuvent pointer vers l’unique page détaillée d’article que l’on vous demande d’écrire.
  • Pour simuler un formulaire, il suffit d’utiliser l’adresse de la page résultat comme attribut “action” de la balise “<form>”.

 

 

Programmation Web

Ce cours est enseigné aux étudiants de DUT du département Informatique de l’IUT Lyon 1.

Support de cours

Le support du cours de programmation pour le Web dynamique est consultable en ligne : Cours de programmation Web.

 

Projet 2015

Objectif

L’objectif de votre projet est de produire, en binôme, un blog dynamique.
Votre projet reprendra et adaptera les sources de votre maquette de blog du projet d’introduction au Web.

Cahier des charges

Votre blog utilisera les technologies PHP/MySQL, en plus des éléments déjà écrits en HTML/CSS (toujours pas de Javascript).
La notation ne portera que sur les nouveaux éléments dynamiques (base de données, scripts PHP).
Les deux projets étant évalués de manière indépendante, les ajouts HTML/CSS ne seront pas évalués.
Vous devez implémenter toutes les fonctionalités qui suivent et choisir l’une parmi les 4 proposées dans le dernier paragraphe.

Données à gérer dans une base de données :

  • articles (titre, résumé, date d’ajout, rédacteur, image, contenu, …)
  • commentaires (rédacteur, date d’ajout, contenu, …)
  • utilisateurs (identifiant, mot de passe, type de compte (user/webmaster), date de création du compte …)
  • tout ce que vous jugerez utile …

La liste des fonctionnalités attendues par page est la suivante :

  • page accueil :
    • résumé de l’article le plus récent du blog (titre, résumé, image)
    • commentaire le plus récent de l’article le plus récent (le cas échéant ; identifiant, date d’ajout et contenu du commentaire)
  • page de résultat de recherche :
    • tableau de titres et dates d’ajout d’articles correspondants aux mots clés entrés
    • affichage d’une copie de la zone de recherche et d’un message si la requête n’a pas abouti (pas de requête ou pas de résultat)
  • page détaillée d’article :
    • accessible via l’URL (ex : article.php?id=12)
    • affichage du titre, de l’illustration, du texte complet,et de tous les commentaires associés
    • possiblité d’ajout de commentaire si l’utilisateur est connecté (en tant que “user” ou “webmaster”). L’ajout d’un commentaire doit actualiser la page.
    • chaque commentaire doit afficher le nom de l’utilisateur qui l’a écrit, la date d’ajout et son contenu.
  • page d’ajout d’article :
    • accessible uniquement si l’utilisateur est connecté en tant que “webmaster”
    • permet de créer et d’ajouter un nouvel article à la base de données (avec tous les champs).
    • affiche des messages d’erreur s’il manque des informations ou un message pour indiquer le bon déroulement de la procédure d’ajout (avec l’URL de l’article ajouté).

 

Concernant la structure des pages, chacune devra au minimum comporter :

  • une bannière (bandeau supérieur avec le titre du site) ;
  • un menu comportant les catégories : accueil, ajouter un article (uniquement si l’utilisateur est connecté en tant que “webmaster”), rechercher un article, à propos ;
  • un panneau latéral comprenant une zone de recherche ET une zone d’authentification (si l’utilisateur n’est pas connecté) ou les informations et statistiques de l’utilisateur (ex : “connecté en tant que : nom de l’utilisateur, inscrit le xx/xx/xxxx, nombre d’articles écrits (si webmaster), nombre de commentaires (si webmaster/user)”) et un lien de déconnexion);
  • un pied de page comportant les noms du binôme.

Fonctionnalités au choix (1 est à réaliser parmi les suivantes) :

  • Pagination : sur la page d’accueil faire un système de pagination (1 … 3 … 8) et afficher les résumés d’article les plus récents. Limiter le nombre d’articles à 5 par page (page d’accueil). L’affichage doit passer par l’URL (index.php?page=1) et gérer les erreurs.
  • Recherche Avancée : enrichir la fonction de recherche avec des paramètres avancés et implémenter la fonction de recherche évoluée (ex: 5 articles les plus récents contenant “mot” et écrits par l’utilisateur “login”).
  • Mode Edition  :permettre la modification des articles existants via la même page que pour l’ajout. Et ajouter une date de dernière modification (affichée à la place de la date de création si non vide).
  • Gestion des utilisateurs : créer une page de création de compte utilisateur permettant de s’enregistrer sur le site via un bouton “s’enregistrer” dans la zone d’authentification.

IMPORTANT :

  • La structure des pages devra être la plus modulaire possible (découpez votre page en plusieurs fichiers réutilisés plusieurs fois).
  • Vous devez concevoir votre base de données le plus simplement possible en prenant en compte les fonctionnalités demandées.
  • Accédez toujours à votre base de données (connexion) grâce à une fonction écrite dans un fichier séparé (et inclut dans les pages qui en ont besoin).
Constitution du binôme

Vous travaillerez dans le même binôme que celui constitué pour le projet d’Introduction au Web.
Le thème de votre blog restera lui-aussi identique.

 

Rendu des projets

Chaque binôme m’enverra par mail  :

  •  l’URL à laquelle son projet est accessible, et
  • l’URL d’un dépôt GIT (par exemple sur github) contenant les fichiers du projet (et démontrant un minimum d’utilisation),
  • Votre base de données exportée au format .sql
  • le nom de la fonctionnalité au choix choisie.

avant le mercredi 13 mai 2015 à 23:59.
Tout retard entraînera un malus dissuasif sur la note.

Quelques indications
  • Bien sûr, l’implémentation de certaines fonctionnalités va nécessiter d’écrire un peu de HTML/CSS. Limitez ces ajouts au strict minimum et privilégiez l’aspect dynamique (grâce à PHP).
  • Prenez le temps de réfléchir à la structure des tables de votre base de données ; plus elles seront simples et cohérentes, et plus le traitement des données sera facilité.
  • Pour l’ajout de fichiers (images d’un article), vous pouvez renommer le fichier reçu (après tous les tests) pour qu’il prenne comme nom l’identifiant de l’article créé. Cela simplifiera son affichage par la suite et résoudra les problèmes de doublons. Se référer à la fonction PHP lastinsertid().
  • Vous pouvez réutiliser le votre dépôt GIT (en créant une nouvelle branche) ou en créer un nouveau.