Catégories
Internet

Initialisation HTML, CGI

Le langage HTML (ou Hyper Tex Modeling Language) permet d’écrire en texte ASCII du texte qui sera interprété par les navigateurs Web pour afficher des documents mis en forme. La mise en forme, ainsi que les liens hypertexte, etc… sont indiqués dans le source HTML par des balises. Voici un exemple basique de codage HTML pour un titre;

<html>
<head>
<title>Mon premier gros titre</title>
</head>
<body>
<center><h1>Ceci est mon gros titre</h1></center>
<p>
« Ici on place le texte dans un paragraphe »
<br>
« On peut aller à la ligne avec une balise BR« 
</p>
<p>
« lorsque nous créons un deuxième paragraphe on saute une ligne. »
</p>
<p>
« ici on place un lien »
<a href= »https://pctamalou.fr/hackoibon« >Cliquez ici</a>
</p>
</body>
</html>

Voilà pour une premières idées de la conceptions, je vais vous donnez quelques balises HTML assez intéressantes si ce n’est indispensables;

<HTML> </HTML> Balises de début et de fin de fichier HTML.
<HEAD> </HEAD> Balises de début et de fin de l’entête du fichier (l’en-tête du fichier peut contenir le titre, la couleur du texte, la couleur du fond,…( <TITLE> </TITLE> Pour ajouter un titre, se place généralement dans l’entête)).
<BODY> </BODY>Le corps de la page HTML (après l’entête), contient le corps du document proprement dit.
<br> Passer à la ligne.
<CENTER> </CENTER> bien évidement centrer le texte.
<Hx> </Hx> Permet de placer un titre x compris entre 1 et 6
(<h1>Titre de la page</h1>
Paragraphe d’introduction…
<h2>Titre du paragraphe 1</h2>
Texte du paragraphe 1.1…
<h2>Titre du paragraphe 2</h2>
<h3>Titre du paragraphe 2.1</h3>
Texte du paragraphe 2.1…) pour exemple.
<img scr= »/chemin/fichier/d’image« > Insérer une image
<A HREF= »https://pctamalou.fr« > </a> Place un hyperlien vers un document ou un programme CGI que l’on verra certainement aussi. Il existe énormément d’autres balises dont je vous invite à en faire la recherche, les cours sont importants.

Un script CGI est un programme exécutable sur le serveur, qui peut être réalisé dans n’importe quel langage (C,C++,shell bash,…).
Les scripts CGI doivent être placés par le webmaster dans certains répertoires particuliers (généralement appelés cgi-bin).
La sortie standard du script génère du code (par exemple du code HTML) interprétable par un navigateur.
L’appel à un script « monscript.cgi » dans le répertoire /cgi-bin à la racine du serveur sera effectuée par l’ouverture de /URL:
https://serveur/cgi-bin/monscript.cgi dans un navigateur.


Voici un exemple de script CGI écrit en bash. La première ligne « Content-type », est obligatoire et décrit le langage du code généré par le script.

#!/bin/bash
echo -e « Content-type: text/html\n\n »
echo « <html> »
echo « <body> »
echo -n « Bonjour, ceci est monscript \$(basename \$0) »
echo « du repertoire \$(pwd) »
echo « <BR> »
echo « En date du \$(date +%d/%m/%Y) et, il est \$(date +%Hh%Mmn) »
echo « </body> »
echo « </html> »

Venons au formulaires, qu’est-ce que c’est? et bien un formulaire est un élément d’une page HTML permettant à l’internaute (le client) de saisir des données qui sont transmises à un script CGI sur un serveur http. Le script construit dynamiquement une page HTML pour l’envoyer au client.


Un petit exemple de formulaire;

<FORM NAME= »Nom du formulaire« 
ACTION= »adresse url de votre programme« 
METHOD= POST {\em ou} GET>
Corps du formulaire
</FORM>

Deux façon d’appel de programme sont proposées;


•Méthode Get:

Par défaut, c’est cette méthodes qui est appliquées et passent dans la variable d’environnement QUERY_STRING et sont visibles depuis le navigateur. Il faut utilisé cette méthodes le moins possibles pour des raisons de sécurité.


•Méthode Post:

Dans ce cas là, les arguments sont émis vers l’entrée standard stdin du programme appelé. Les données ne sont pas visibles par le navigateur.

Les balises INPUT et SELECT permettent de faire saisir par le client les données qui peuvent être transmises à un script CGI.
La balise INPUT crée des des champs dans une page HTML permettant de recueillir soit du texte, soit un choix parmi une liste, soit un booléen.


Voici ça syntaxe;

<INPUT TYPE= »text » {\em ou} « submit » {\em ou} checkbox {\em ou} radio
NAME=nom_de_l’entrée
SIZE= taille du champs
VALUE= »valeur par défaut du champ ou étiquette du bouton submit« 
>

La balise SELECT crée une liste déroulante où l’utilisateur n’a plus qu’à sélectionner sur l’un des choix proposés.

Voici ça syntaxe;

<SELECT NAME= »nom_de_l’entrée« >
<OPTION> un choix que vous voulez mettre
<OPTION> un autre choix
</SELECT>

Vous pouvez placez autant de choix que  vous le désirez.

Bon allez un petit exemple de formulaire HTML, avec ses script.cgi écrit en bash qui traite les données.

<html>
<head>
<title>mon script</title>
</head>
<body>
<p>
Veuillez saisir les données suivantes :
</p>
<br>
<form name= »formulaire exemple« 
action=/cgi-bin/monscript.cgi method= »post« >
<p>
Nom pseudo
<input type= »text » name=nom size=12 value= » »>
</p>
<p>
Genre
<select name=sexe value= »Choisissez« >
<option>Choisissez
<option>Masculin
<option>Féminin
<option>autre
</select>
</p>
<p>
Cochez ici pour accepter les conditions
<input type= »checkbox » name=accepte value= »true » unchecked>
</p>
<p>
<input type= »submit » value= »Envoyer« >
<input type= »reset » value= »Tout effacer« >
</p>
</form>
</body>
</html>

monscript.cgi

#!/bin/bash
echo -e « Content-type: text/html\n\n »
read ENTREE
echo « L’enr&eacute;e standard du script est : »
echo « <br> »
echo $ENTREE
echo « <br> »
echo « Votre nom est : « 
echo $ENTREE | cut -d’&’ -f1 |cut -d’=’ -f 2
echo « <BR> »
echo « Vous êtes de sexe « 
echo $ENTREE | cut -d’&’ -f2 |cut -d’=’ -f 2
echo « <BR> »CHAMP3=$(
echo $ENTREE | cut -d’&’ -f3 |grep true)

if [ -n « $CHAMP3 » ]
then
echo « Vous avez acceptée les conditions »
else
echo « Vous avez refusée les conditions »
fi

Voilà, en espérant que cela vous à donner une petites idée et l’envie d’en apprendre plus.

By Platon-y.