1. Introduction

Toute personne susceptible d'effectuer un travail de recherche sera de plus en plus amenée à consulter des sources en lignes à côté des livres papier habituels. La nature de tels documents leur donne une moindre accessibilité (nécessité d'un ordinateur et d'une connexion internet) comparé à un livre. De plus, un livre peut être annoté dans le texte même à l'aide d'un crayon, alors qu'un écran d'ordinateur ne réagit que peu au contact du graphite. Le but de ce projet est de créer un site web permettant d'enregistrer le code source de pages web afin de les stocker dans une base de données, permettant ainsi le regroupement de sources diverses en un seul point. De plus, il sera possible d'annoter les textes et de conserver la trace desdites notes.

2. Outils et langages utilisés, marche à suivre par étapes

Dans le cadre de ce projet, nous prendrons pour acquis la possession du minimum nécessaire pour faire tourner un serveur web, sans quoi ce projet n'aurait que peu de chances d'aboutir.[1] De même, la maîtrise des langages HTML et CSS est une condition implicite, ceci afin de focaliser ce rapport sur les points essentiels du projet[2]

PHPMYADMIN
Cette interface web permet une gestion aisée de bases de données MySQL.[3]

PHP
Ce langage de programmation permet de rendre un site web dynamique.[4] Dans le cadre de ce projet, les expressions rationnelles seront notamment abordées. Ce système aux allures complexes permet de manipuler des chaînes de caractères.[5]

SQL
Ce langage permet d'exploiter des bases de données[6]

PREREQUIS DIVERS

Toute page web codée avec du php doit être enregistrée avec l'extension .php. Pour éviter tout problème d'encodage du texte, la balise <head> du code HTML de chaque page comporte la ligne suivante :

<meta charset="UTF-8">

Ce projet se décline en 8 fichiers, dont 6 pages web (.php). Nous allons ci-dessous expliquer leur raison d'être ainsi que leur fonctionnement

PREPARER LA BASE DE DONNEES AVEC PHPMYADMIN

Par défaut, le nom d'utilisateur est root et aucun mot de passe n'est requis. Dans l'onglet Base de données, on donne un nom à une nouvelle base et on clique sur créer. Il est ensuite proposé de créer une nouvelle table, ce qu'il faut faire en donnant un nom suffisamment clair pour indiquer le contenu de la table (ici, la base ainsi que la table s'appellent sources). Après cela, il faut doter la table de 4 colonnes, dont les noms seront id, titre, texte" et "notes. Le type de id doit être "INT", son index "PRIMARY" et la case "AUTO_INCREMENT" cochée. "Titre" a le type "VARCHAR" ce qui nécessite d'indiquer une taille limite (pas plus de 255 caractères). Les deux colonnes restantes doivent avoir le type "TEXT", ce qui permettra d'y stocker du texte en plus grande quantité. Ces différentes colonnes permettront stocker le texte des pages ainsi que les notes afférentes, le tout doté d'un id unique et d'un titre court.

LA PAGE D'ACCUEIL

Lorsqu'on arrive sur le site, cette première page offre au visiteur deux possibilités : enregistrer une nouvelle page ou consulter celles déjà présentes. Le premier choix se fait sous la forme d'un formulaire écrit en HTML et qui demande une URL :

<input type="url" value="http://www." name="url" />

On voit qu'il renverra la variable url. La méthode utilisée est la méthode POST et l'utilisateur est redirigé vers la page que nous dirons d'enregistrement.

LA PAGE D'ENREGISTREMENT

Cette page sert à insérer le code source de la page indiquée dans la base de données. Il faut d'abord lui indiquer la base de données que nous utilisons :

$base = new PDO("mysql:host=localhost; dbname=sources; charset=utf8", "root", "");

La page précédente renvoie une variable contenant une URL. Pour en extraire le code source et le stocker dans une variable, la fonction file_get_content est utile :

$codesource= file_get_contents("$url");

Il faut aussi, de ce code source, extraire le titre de la page afin qu'il soit automatiquement intégré dans la table de données plus tard. C'est ici que sert une expression régulière qui isole la balise "<title>". Le résultat renvoyé par l'expression est stocké dans un tableau. On simplifie en le stockant dans une variable :

preg_match("#<title>(.*)<\/title>#", $codesource, $resultat); $titre = $resultat1;

On utilise ensuite une requête SQL qui enverra le code ainsi que le titre dans la table de données : $requete = $base->prepare("INSERT INTO sources(titre, texte) VALUES(?, ?)"); $requete->execute(array($titre, $codesource));

Etant donné que cette page exécute tout automatiquement et qu'il n'est rien demandé à l'utilisateur, on le redirige immédiatement vers la page précédente ;

header("Location: page1.php"); exit;

SECONDE OPTION DE LA PAGE D'ACCUEIL
Si l'utilisateur ne veut pas enregistrer de page, un simple lien (balise "<a>" en HTML) le permet d'aller à la page suivante.

INDEX
Cette page affiche l'index de toutes les sources déjà entrées dans la base de données. Elle le fait à l'aide d'une boucle qui affiche un tableau de toutes les entrées : <?php

       while($resultat = $requete->fetch())
                 {
                 ?>
               <tr>
               <td><?php echo $resultat"id"; ?></td>
               <td><?php echo $resultat"titre"; ?></td>
               <td><?php echo $resultat"notes"; ?></td>
               </tr>
                       
        <?php
                }
                
       ?>

A noter que la variable $resultat est la requête SQL faite à la base de données (sélectionner toutes les entrées) : @@<?php

       $base = new PDO("mysql:host=localhost; dbname=sources; charset=utf8", "root", "");
       $requete = $base->query("SELECT * FROM sources");
       ?>@@

Si l'utilisateur désire consulter une entrée, un formulaire lui demande d'écrire l'id de celle désirée avant de le rediriger vers la page de consultation.

PAGE DE CONSULTATION

Une requête SQL va chercher dans la table l'entrée dont l'id correspond à la valeur renvoyée par le formulaire en page précédente : @@$requete = $base->prepare("SELECT * FROM sources WHERE id = ? ");

       $requete->execute(array($numero));@@

et : @@ echo $resultat"texte"; @@

INDEX, SECONDE OPTION
Un lien renvoie l'utilisateur qui le désire vers la page de notes.

PAGE DE NOTES
Cette page est similaire à la page d'index (affichage des entrées), à la différence qu'un formulaire renvoie deux valeurs vers la page d'enregistrement des notes, l'id de l'entrée concernée et le texte désiré. <form method="POST" action="p5.php"> Eventuelles prises de notes: <br/> <textarea rows="15" cols="60" name="notes"> </textarea> <br/>Entrez le numéro de la page que vous désirez annoter : <br/><input type="text" name="numero">

  	 		<input type="submit" value="Tout envoyer"><br/>

</form>

DERNIERE PAGE
Le fonctionnement est similaire à la page dite d'enregistrement vue ci-dessus. Une requête SQL se charge d'entrer les valeurs reçues dans la table, avant qu'une redirection ne renvoie l'utilisateur à la page précédente : $requete = $base->prepare("UPDATE sources SET notes = ? WHERE id = ?");

           $requete->execute(array($notation, $numero));

PHP.INI ET FEUILLE DE STYLE Intégrer une mise en forme CSS se fait via la balise "<link>" : <link href="style.css" rel="stylesheet" media="all" type="text/css"> Il faut indiquer en premier paramètre où se trouve la feuille de style.

PHP.ini est un fichier qu'il faut créer dans le même répertoire que les autres et y noter : allow_url_fopen = on Cela sert à permettre à la fonction "file_get_contents" d'opérer.

3. Résultats et discussion

Le site ainsi obtenu est fonctionnel et permet de réunir en une seule base de données plusieurs sources internet. Il comporte 6 pages web. Il manque cependant d'ergonomie et de fonctionnalités. Un usage plus étendu d'expressions régulières permettrait de manipuler les textes et offrir des possibilités de travail intéressantes. On pourrait aussi imaginer d'ajouter un système de session afin de permettre à plusieurs personne d'utiliser ce site. Il serait aussi souhaitable de permettre la création de catégories de sources, afin de ne pas tout mélanger.

5. Conclusion

Ce projet est en définitive fonctionnel bien que léger. Il n'offre pas de réelle souplesse dans son maniement, et si le fait de pouvoir concentrer des pages web en un point est intéressant, il faudrait pouvoir en faire plus.

Notes

[1] A ce propos, voir notamment : https://fr.wikipedia.org/wiki/WAMP

[2] Plus de détails sur le langage HTML :https://fr.wikipedia.org/wiki/Hypertext_Markup_Language, ainsi que le langage CSS : https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade

[3] https://www.phpmyadmin.net/

[4] http://php.net/

[5] Un site français pour aborder ce thème : http://www.expreg.com/presentation.php

[6] Plus de détails : https://fr.wikipedia.org/wiki/Structured_Query_Language