Tutoriel sur les bases de HTML et de PHP Cours : Inf7214 Développement de logiciel Date : Hiver 2009 Ce tutoriel vous donne un aperçu du développement d application WEB avec les langages HTML et PHP. Vous devrez développer une page WEB permettant d afficher une série de séquences comprenant un motif recherché. Sites de référence : HTML : http://www.w3schools.com/ PHP : http://www.php.net/ PREAMBULE Toutes les étapes décrites ci-dessous doivent être effectuées dans un environnent LINUX. 1) Ouverture des programmes nécessaires. Démarrez votre ordinateur sous LINUX. Ouvrez un Terminal. Ouvrez un éditeur texte. 2) Mise en place de l environnement de travail. Pour que votre site web soit visible vous devez placer vos fichiers dans le sous-répertoire public_html, et ils doivent être accessibles à tous en lecture et exécution. Les commandes suivantes doivent être tapées dans le Terminal. Placez-vous dans le répertoire initial : > cd Créer le répertoire public_html : > mkdir public_html Le rendre accessible : > chmod 755 public_html Le rendre accessible votre répertoire : > chmod -R 755 /home/codepermanent Si votre répertoire est déjà créé, vous aurez un message d erreur à la deuxième commande. 3) Vérifiez que tout est fonctionnel. Créez un fichier texte, test.txt, avec votre éditeur et incluez y un message de votre choix, ex : «bonjour le monde». Sauvegardez le dans le répertoire public_html. La commande suivante, à taper dans le terminal, permet de s assurer que le fichier sera visible : >chmod 755 test.txt Ouvrez un navigateur WEB (ex : Firefox ou Konqueror) et accédez à l adresse suivante : http://adn.bioinfo.uqam.ca/~codepermanent/test.txt. TOUT EST PRÊT, ON PEUT COMMENCER!!! 1
1 ere PARTIE : HTML HTML est le langage utilisé pour présenter des pages WEB. Il existe des logiciels permettant de construire des pages WEB de façon graphique que vous pourrez découvrir seul. 1) Structure d une page Web Dans une page WEB on retrouve 2 parties, l entête et le corps. L entête contient des informations sur la page (méta données, ex : titre, auteurs, ) et le corps, le contenu que l on veut afficher. Avec votre éditeur, créez une page WEB, index.html, en y incluant un titre dans l entête (qui apparaitra dans la barre supérieure de votre navigateur) et une phrase innocente dans le corps (ex : bonjour le monde). <html> <head> <titre>ma premiere page web</titre> <meta name="author" content="alix Boc" </head> <body> Bonjour le monde </body> </html> Sauvegarder votre fichier dans le répertoire public_html et visualiser la dans votre navigateur WEB : http://adn.bioinfo.uqam.ca/~codepermanent/index.html. 2) Les images Le format général pour afficher est une image est le suivant : <img src= "mon_image.jpg" width="150" height="200" alt="ma superbe image"> La source peut être une image dans un répertoire ou d un site web (url). Les champs width, height et alt sont optionnels. Ajouter 2 images dans le corps de votre fichier index.html, une que vous aurez sauvegardé dans votre répertoire public_html et une présente sur le WEB. Visualisez le résultat. 3) Les liens hypertextes Un lien hypertexte permet d accéder à une autre page par un simple clic. La forme générale est la suivante : <a href="http://www.google.com"> mon moteur de recherche préféré</a> Ajoutez quelques liens hypertextes dans le corps de votre page WEB. Vous devez mettre une ligne différente pour chaque lien. Note : pour sauter une ligne vous devez utiliser : <br> 2
4) Les tableaux Pour structurer la page WEB, on utilise des tableaux. Un tableau est définit comme étant une série de lignes contenant des cellules. L alignement des cellules forme des colonnes. La balise table définit un tableau, tr une ligne, td une colonne. Le code suivant : <table> <tr> <td>nom </td><td>prenom </td></tr> <tr> <td>boc </td><td>alix </td></tr> <tr> <td>smith </td><td>john </td></tr> </table> Donne un tableau de la forme suivante : Nom Boc Smith Prénom Alix John Créez un tableau de la forme suivante dans le corps de votre page WEB index.html, vous noterez que l on retrouve des liens hypertextes dans la première colonne : Liens google Yahoo rbc Descriptions Mon moteur de recherche préféré Mon portail préféré Ma banque favorite Note : Il est possible de mettre n importe quel élément HTML à l intérieur d une cellule. 5) Les formulaires Un formulaire permet d envoyer des données vers une autre page WEB, l usage de formulaire implique la notion de WEB dynamique. Un formulaire est identifié par la balise form : <form name="mon_formulaire" method="get" action="http://www.google.fr/search"> <input type="text" name="q" value=""> <input type="submit" value="rechercher"> </form> Rajouter ce formulaire dans le corps de votre page "index.html", et visualisez le résultat dans votre navigateur favoris. 3
Note : Il existe beaucoup de paramètres pour chacun des éléments vu ci-dessus que vous pouvez découvrir seul. On peut, par exemple : Changer la couleur, la taille, la police du texte. Centrer le tableau. Centrer le texte dans les cellules d un tableau. Changer le fond de la page. Mettre un lien hypertexte sur une image.. 2 eme PARTIE : PHP Le PHP est un langage de type script que l on peut utiliser pour générer des pages WEB. Comme tous les langages, on retrouve des variables, des boucles, des e/s, etc Un fichier généré avec PHP doit avoir l extension.php. 1) Afficher de l HTML Maintenant votre fichier doit se nommer index.php Tout ce qui est affiché dans la fonction echo apparaitra dans la page WEB finale. Ex : le code ci-dessous permet de créez une page WEB avec un lien hypertexte : echo "<a href=\"http://www.google.com\"> mon moteur de recherche préféré</a>"; 2) Lire les données d un formulaire <html> <head> <titre>ma premiere page web</titre> <meta name="author" content="alix Boc" </head> <body> </body> </html> <form name="mon_formulaire" method="post" action="index.php"> <input type="text" name="pattern" value=""> <input type="submit" value="rechercher"> </form> if(isset($_post['pattern'])){ echo $_POST['pattern']; 4
Créez une nouvelle page, index.php et insérez y le code ci-dessus. Que se passe-t-il quand vous cliquez sur le bouton Rechercher? 3) Afficher le contenu d un fichier if (!$fp = fopen("sequences.dat","r")) { echo "Echec de l'ouverture du fichier"; else { while(!feof($fp)) { $Ligne = fgets($fp); // On récupère une ligne echo $Ligne; // On affiche la ligne fclose($fp); // On ferme le fichier Téléchargez le fichier sequences.dat et ajouter ce code dans votre fichier index.php. Visualisez le résultat. Modifier ce code pour afficher une séquence par ligne. Indice : vous devez rajouter un saut de ligne (<br>). Exercice : Créez une page WEB, index.php, permettant d afficher dans un tableau le numéro d accession et la séquence correspondant à un motif passé dans le formulaire. Vous aurez besoin du fichier sequences.dat. Chaque ligne de ce fichier contient un numéro d accession suivi d une séquence, séparé par un espace. De plus vous devrez utiliser une fonction vous permettant de savoir si un motif est compris dans une chaine. Trouvez les fonctions nécessaires pour effectuer ces différentes opérations avant de commencer à coder la partie PHP de votre page WEB. Bonus : afficher la zone d équivalence dans la séquence en rouge. 5