Projets d'élèves

1. Introduction

La lecture est une passion qui peut accumuler de nombreux ouvrages derrière elle. Après quelques années, les livres lus peuvent être oubliés. Si jamais une personne souhaiterait savoir quel a été son premier livre, son premier roman policier ou encore quand elle avait fini sa trilogie, il serait agréable d'avoir un endroit où tout est recensé. Cette bibliothèque interactive pourra donc conserver la trace de toutes les lectures. Il est aussi possible d'étendre son utilisation vers les séries vues ou encore les films. L'utilisateur pourra noter toutes les informations qu'il souhaite conserver. Cela peut être le titre, l'auteur, un court résumé...

Il existe déjà de nombreux sites qui proposent des services dans le genre, mais il est toujours intéressant d'essayer d'en faire un par soi-même pour voir de quoi nous sommes capables. Dans ce projet, il s'agira donc de créer un site qui permettra d'archiver des informations. Il faudra plusieurs pages web, pour plus de facilité. Voici donc la solution que j'ai imaginé. La page d'accueil sera la première impression du visiteur. Il sera ensuite redirigé vers une page de formulaire, où il pourra noter toutes les informations qu'il voudra sur les références qu'il souhaite garder. Une page dernière page de confirmation apparaîtra ensuite, récapitulant les informations données.

2. Matériel et méthodes

2.1 Matériel

Ce projet se passera sous une forme virtuelle, il n'y aura pas de matériel à proprement parler, si ce n'est un bon ordinateur. Le code du logiciel sera principalement en langage PHP et HTML. Il y aura aussi du CSS pour la mise en page. Le langage MySQL devrait être utilisé pour sauvegarder les informations.

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
               <link rel="stylesheet" type="text/css" href="main.css">

2.2Méthode

2.2.1 Page d'accueil

La première étape est de créer la page web index.php. Ce sera notre page d'accueil. Elle présentera rapidement le site et conduira à la page du formulaire avec un lien. Sur l'image suivante, nous voyons la page d'accueil et le lien "ici" qui conduit à la page d'après.

Figure 1 : Page d'accueil

Le lien a été réalisé grâce à la commande suivante en code HTML

<a href="formulaire.php">ici</a>@@

Dans cette page, il y aussi du code PHP. J'ai en effet essayé d'intégrer une session. 
><?php

session_start();

$_SESSION['prenom']= 'Mon ami';
$_SESSION['nom'] = 'Nom';
?>@@

Avec ceci, il est possible de remplacer le prénom et le nom du visiteur. Il peut ensuite s'afficher dans le texte comme suivi

<p> Bienvenue <?php echo $_SESSION['prenom']; ?> ! </p>

2.2.2 Formulaire

La page du formulaire présente plusieurs difficultés au niveau du langage PHP. J'ai choisi de mettre plusieurs forme de formulaire. D'abord, il y un une barre déroulante pour le genre.

Figure 2 Barre déroulante

Le code qui est nécessaire est le suivant

<select name"choix">
		<option value="livre">Livre</option>
		<option value="film">Film</option>
		<option value="serietv">Série télévisée</option>
		<option value="BD">Bande dessinée</option>
</select> 

Ensuite, il y a des cases vides dans lesquelles il est possible d'écrire. Dans notre cas, ce sera le nom de l'auteur et le titre.

Figure 3 Case vide pour un texte

Voici comment procéder

<input type="text" name="titre" />

Il y ensuite un choix multiple de case à cocher. Cela est particulièrement utile pour notre cas, comme un livre peut être une romance ET une aventure.

Figure 4 Case à cocher

Voilà le code qu'il faut

<input type="checkbox" name="roman" id="roman" <label for="roman">Roman</label> 
		<input type="checkbox" name="sf" id="sf" <label for="sf">Science-fiction</label>
		[...]
		<input type="checkbox" name="aventure" id="aventure" <label for="aventure">Aventure</label>
		<input type="checkbox" name="biographie" id="biographie" <label for="biographie">Biographie</label>
		<input type="checkbox" name="comedie" id="comedie" <label for="comedie">Comédie</label>

Il est ainsi possible d'ajouter autant de case que nous le souhaitons. Le "label" est utilisé pour donner une valeur unique à notre case, un nom, ce qui permettra de la cocher.

Le dernier type de formulaire est une grande zone de texte qui servira au résumé de l'oeuvre.

Figure 5 Grande zone de texte

Voici la méthode que j'ai utilisé

<textarea name="resume" rows="8" cols="45"> Ici, les éléments importants de votre intrigue sont suffisants ! </textarea>

Il est possible de déjà y mettre un texte par défaut, ce que j'ai fait.

Enfin pour terminer cette page, un petit bouton servira à envoyer les informations sur une page "new.php"

Figure 5 Validation

C'est ici que vient aussi la méthode du formulaire. Au début du code il faut mettre

 <form action="new.php" method="post">

Et pour envoyer ces informations, un bouton sera créer avec

<input type="submit" value="C'est bon !" />

Et voilà pour la page du formulaire !

2.2.3 Page de vérification

Cette page va demander au visiteur si ces informations sont correctes. Il lui donne aussi la possibilité de revenir en arrière avec la commande <a> que nous avons vu précédemment, en cliquant sur "page précédente"

Cette page va donc afficher les informations qui ont été envoyées. Pour cela, j'ai procédé ainsi :

<tr><td>Type</td>
		<td> <?php echo $_POST['choix']; ?></td></tr>
		<tr><td>Titre</td>
		<td> <?php echo $_POST['titre']; ?></td></tr>
		<tr><td>Auteur</td>
		<td> <?php echo $_POST['auteur']; ?></td></tr>
		<tr><td>Genre</td>
		<td> <?php echo $_POST['roman']; ?></td></tr>
		<tr><td>Résumé</td>
		<td> <?php echo $_POST['resume']; ?></td></tr>

Voilà ce que cela donne

Figure 6 Vérification

Pour la mise en page de toutes la pages voici le code CSS

html {
        background : silver;
        font-family : sans-serif;
}

h1 {
        font-size : 20pt;
        color : black;
}

p {
        margin-left : 30px;
        color : white;
        line-height : 125%
        èadding : 5px;
        width : 70%;
        border : 5px inset gray;

}

Et c'est tout !

3. Résultats

Les résultats obtenus sont mitigés. D'un côté, la page formulaire fonctionne très bien, tout comme la page d'accueil. La mise en page n'est pas désagréable même si elle reste très simple. Sur la page du formulaire, toutes les cases fonctionnent. Par contre le transfert des informations n'est pas très concluant. Si les textes écrits, en l'occurrence, le titre, l'auteur et le résumé, sont transmis sans problèmes, les choix multiples et cases à cocher présentent des difficultés. Sur la figure précédente nous voyons que les erreurs sont affichées. Je pense que la commande avec $_POST devrait être modifiée en ce qui les concerne. ll faudrait peut-être aussi mettre des conditions avec "if". C'est encore une chose à améliorer.

Il y a aussi le problème de la sauvegarde des données. Les bases de données et le langage MySQL n'a pas été utilisé. Par conséquent, il n'y a pas d'archivage. C'est une grande déception du projet initial.

4. Discussion

Il y a donc encore beaucoup de choses qui peuvent être améliorées. Tout d'abord, le langage MySQL pourrait être utilisé, les bases de données et les tables. Cela amènerait la sauvegarde qu'il manque. ensuite, le langage PHP pourrait être utilisé au maximum de son potentiel aussi. La première partir du formulaire fonctionne très bien, mais il reste des modifications à faire pour les choix multiples qui ne s'affichent pas. Néanmoins, ce projet m'a permis d'aborder le langage HTML, CSS et PHP d'un autre point de vue. Il est aussi assez satisfaisant de voir qu'avec quelques lignes de codes, une pages peut être créé. Cela m'encourage à continuer à découvrir les options qui sont encore possibles.

5. Conclusion

Ce projet présente de nombreux avantages quant à son utilité. En effet, une fois le système compris il est possible de l'étendre dans de nombreux domaines différents. Ici, il s'agit d'un archivage mais c'est tout autant possible de le faire avec d'autre genres d'informations. Pourquoi pas faire un agenda virtuel, un carnet de note ? Les possibilités sont très grandes.

6. Référence