coincoins

Titre

Terminale SIG.TP html
TP HTML, Les formulaires.
Présentation du TP

Objet

Ce TP est organisé sous forme de projet à réaliser en autonomie (seul).

Ce projet consiste à créer un site web interne (intranet) pour améliorer la saisie des demandes d'assistance informatique.

Pour faciliter (un peu) le travail de ce TP, vous utiliserez l'ensemble des fichiers complémentaires (à télécharger) fournis par ce lien.

Description

Mise en place d'un intranet afin d'améliorer l'assistance informatique en ligne à nos clients abonnés.

Actuellement, la Hotline permet au client de prendre contact avec un assistant de niveau 1 qui répond à 80% des questions d'utilisateurs.

L'assistant de niveau 1 ouvre un dossier de panne pour ce client et y saisit son nom d'assistant, la question du client puis la réponse faite.

Lorsque la réponse est donnée, le dossier est clos.

Il y a un dossier par question et une question par dossier, donc dossier=question.

En cas de question non résolue au niveau 1, l'assistant N1 transmet le dossier à l'assistant de niveau 2.

C'est un technicien spécialisé qui peut traiter les demandes spécifiques ou les problèmes dont la recherche de solution est plus longue, plus difficile. (Voir le schéma événement/résultat annexe A). Ici aussi, assistant N2 s'identifie, saisit ou précise la question, puis renvoie la réponse et clos le dossier.

Mission

Votre mission, si vous l'acceptez (musique!), sera de construire une maquette de pages de l'intranet qui consistera en :

  • une page d'accueil permettant d'expliquer le service et de saisir l'identifiant et le mot de passe de l'utilisateur,
  • une page de questions déjà posées par le client (liste des dossiers),
  • une page permettant d'afficher le contenu d'un dossier/questions
  • un formulaire de création de dossier
  • un formulaire de modification de dossier

Ce message ne s'autodétruira pas dans 5" et vous pourrez y revenir autant de fois que vous voudrez

Note : Un nouveau vocabulaire est introduit à l'occasion de cet exercice. Nous parlerons indiféremment d'écran, de vue ou d'interface pour tout fichier html (ou php) qui permet de communiquer avec l'internaute.
De même, la liste des interactions entre le SI et l'utilisateur peut être appelée "cas d'utilisation", issu de l'UML (universal modeling language).

Architecture prévue de l'application, liste des interfaces (les écrans et/ou formulaires)

Échanges entre le SI et l'utilisateur (processus de gestion des dossier de panne)

La description des interactions entre le client et le site sera le suivant lors du dépôt de la question :

Conditions initiales :

Le code du client et la description de la panne sont donnés verbalement à l'assistant N1 (appel du client).

Cas d'utilisation nominal de l'application :

1. Le HL demande le formulaire de gestion d'assistance

2. Le SI demande les numéros de HL et de client [1].

3. Le HL donne les N° demandés et valide

4. Le SI affiche les données du client et la liste des questions déjà posées [2].

5. Le HL demande la création de dossier d'assistance,

6. Le SI affiche le formulaire de le formulaire de création de dossier d'assistance à remplir avec les références du client, du HL, les dates la description de la panne (la question) et la réponse donnée et valide [3].

7. Le SI enregistre les infos et retourne au point 4.

Remarque :

À l'étape 4, l'utilisateur a la possibilité de demander l'affichage du détail d'un dossier.

À l'étape 4, l'utilisateur a la possibilité de demander la modification d'un dossier.

À tout moment, l'utilisateur a la possibilité de revenir en arrière sans faire de modifications.

Liste des alternatives :

6a. le HL demande l’assistance de niveau 2 et le cas d'utilisation continue au point 7.

Liste des exceptions :

4a. Le SI affiche un message d’erreur sur le n° du client ou celui du HL et retourne au point 2 si l'un ou l'autre n'est pas trouvé.

Résultat :

Le dossier est constitué, la réponse N1 est transmise et le dossier est clos ou le dossier est transmis à l’assistance de niveau 2.

Voir le schéma des écrans en annexe B

Annexe A : schéma événement/résultat actuel du processus.

Note :
Les questions posées représentent une discussion entre le client et l'assistant.

La question est la description du problème rencontré par le client, objet de la demande d'assistance.

Il n'y a qu'une seule question et une seule réponse par dossier ; un dossier ne correspond qu'à un seul client.

Les date et heure d'ouverture du dossier sont données automatiquement par le système et enregistrées dans le dossier.

Dossier (num, question, reponse, date, heure, idHotliner, idClient)

  • clé primaire : num,
  • clé étrangère : idHotliner référence id dans Hotliner
  • clé étrangère : idClient référence id dans Client

les autres tables ne sont pas développées ici.

Vue 1 : Formulaire de saisie du numéro de client et du HL

Vous utiliserez le contennu du prototype de page pour construire cette page ; fichier : prototypeDePage.html du pack de fichiers complémentaires

Données de test pour la liste déroulante :

ValeurDonnées assistant
1Odile Kroch
2Alain Thérieur
3Alex Thérieur
4Ali Gathor
5Sylvain Haibon

Vue 2 : liste des dossiers client

Données de test (à copier et utiliser dans le fichier source) : Client 123 – Boulangerie du Nord ; 15 Route de Schirmeck ; 67000 Strasbourg ; tel 0388 12 34 56

QuestionRéponseStatutOnvertureHeure
4Le programme ne sauvegarde pas les données-En cours N226/09/201517:45:46
3L'écran ne s'allume pasConnecter l'écran au secteurRésolu25/09/201512:45:32
2Le PC ne s'allume pasConnecter l'écran au secteurRésolu25/09/201512:20:42
1L'imprimante n'imprime pasConnecter l'imprimante au PC en USBRésolu01/09/201508:54:44

Vue 3 : Détails d'un dossier client

Rédiger d'abord la structure de cet écran, elle servira de base pour les formulaires de création et de modification des données (vues 4 et 5).

Utiliser le contennu du prototype de page pour commencer, fichier : prototypeDePage.html du pack de fichiers complémentaires

Vues 4 et 5 : Formulaires de création, de modification du dossier


Vue 4 Les champs : réponse et statut sont modifiables


Vue 5 Les champs : Question, réponse et statut sont modifiables.

Boutons disponibles : "Mettre le dossier en attente", "Enregistrer & clore le dossier" et "Retour".

Charte graphique et structure HTML de base

La charte graphique incluse dans le fichier charte.css du dans le pack de fichiers complémentaires qui correspond aux vues ci-dessus. Elle est à reprendre de l'existant et peut être modifiée et améliorée selon vos besoins : changement de couleur, fond d'écran, etc. …

De même, je vous donne le contenu partiel, commun à toutes les pages HTML dans le fichier prototypeDePage.html dans le pack de fichiers complémentaires (pour que vous ne soyez ni ralentis, ni bloqués par certains aspects non vus en cours : javascript).

Ainsi que le cas spécifique de la page de création de dossier : creerDossier.html

Cette page contient un petit code en javascript. Le recopier tel que, sans le changer. Il s'utiliser selon les exemple suivants.

NOTE : pour des raisons de lisibilité, j'ai supprimé certains commentaires.

Ces codes sont à copier/coller dans vos sources (super, non?).

Évolution de l'application [plus tard, dans un autre doc …]

Ce service coûte très cher à l'entreprise et elle envisage d'investir dans un service en ligne comme dans le schéma E/R suivant. L'utilisateur pourra alors consulter un service en ligne de FAQ et déposer des questions pour lesquelles la réponse sera personnalisée. Le client ne saura plus qui postera la réponse mais ce sera indifféremment un technicien de niveau N1 ou N2. Les réponses étant faites de façon asynchrone (en différé, détachée du temps), l'organisation des assistants sera lus facile et plus efficace, les assistant pourront alors se spécialiser et répondre aux questions des utilisateurs quelque soit l'assistant. De même, c'est ici qu'on verra apparaître la collecte des informations qui permettront de constituer la base de connaissances de la FAQ