docTutoriel sur les bases de HTML et de PHP
download 
Plainte Transcription
Tutoriel sur les bases de HTML et de PHP
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
Créer le répertoire public_html
Le rendre accessible
Le rendre accessible votre répertoire
: > cd
: > mkdir public_html
: > chmod 755 public_html
: > 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
1ere 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.
…….
2eme 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 :
<?php
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>
<form name="mon_formulaire" method="post" action="index.php">
<input type="text" name="pattern" value="">
<input type="submit" value="Rechercher">
</form>
<?php
if(isset($_POST['pattern'])){
echo $_POST['pattern'];
}
?>
</body>
</html>
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
<?php
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
