9.2. La technologie à utiliser
Pour développer un site web, l'environnement de
développement ainsi que les technologies utilisées sont
nombreuses et variées en fonction du type d'application que l'on se
convient de réaliser. Ci-dessous, nous présentons, parmi tant
d'autres, les quelques technologies utilisées pour le cas de notre
travail.
9.2.1. Les langages de programmation web
9.2.1.1. Le HTML (HyperText Markup Language)
Le HTML voit le jour avec le lancement du web vers les
années 1990. Son rôle est de générer et organiser le
contenu des pages web. Il nous permet donc d'écrire ce qui doit
être affiché sur la page : du texte, des liens (hyperliens), des
images, etc.
Ce langage a connu plusieurs améliorations dont le
XHTML lancé par le W3C en l'an 2000, plus rigoureux et plus
délicat à manipuler, il semblait être l'avenir de la
programmation web mais celui-ci n'a pas pu percer comme on
l'espérait.
Le HTML5 est la dernière version, encore peu
répandue mais elle fait beaucoup parler d'elle car elle apporte des
nombreuses améliorations comme un meilleur agencement de contenu, des
nouvelles fonctionnalités pour les formulaires, etc.
16
o Structure d'un document HTML
Une page HTML est composée du texte et des liens vers
des ressources multimédias et d'autres pages. Ceci se réalise
grâce à des balises. Une balise est une
combinaison de texte écrit entre « < » et « >
». Par exemple <textarea>.
Figure 1:Icône d'un fichier HTML
o Exemple de code HTML
<html><head> <title> Titre de ma page
</title> </head> <body>
<p> Ce paragraphe s'affichera facilement dans mon
navigateur. </p> < !-- ceci est un commentaire et ne peut
s'afficher dans le navigateur -->
</body>
</html>
9.2.1.2. Le CSS (Cascading Style Sheet)
Le CSS est un langage utilisé pour rendre attrayante la
présentation des pages HTML. C'est un concept présent dès
l'origine du web. Il nous aide à décrire l'apparence que devra
avoir notre site : la couleur et la police de texte, la taille des titres, les
marges, la position des menus, etc.
Un document CSS, appelée « feuille de style ou
feuille de style en cascade », porte une extension .css.
On peut l'utiliser de trois manières dans un projet web :
É Utilisation du CSS
17
i) La première et la plus
recommandée est d'écrire une feuille de style à part et
s'y connecter en plaçant un lien vers cette feuille à
l'intérieur des balises <head> et </head> du document HTML
comme suit :
<link rel= `stylesheet' media=`screen' type=`text/css'
href=`nom_feuille.css' />
Cette même feuille de style peut concerner toutes les pages
de son site rendant ainsi les modifications plus rapide à
réaliser.
ii) La deuxième méthode, plus fastidieuse que la
première, consiste à écrire le style CSS dans chaque page
HTML entre les balises <head> et </head>.
iii) La troisième méthode, dite la méthode
en ligne « in-line CSS », consiste à noter le style à
l'intérieur de la balise de l'élément concerné pour
lui appliquer un style particulier. Cette méthode est la moins
recommandée.
Figure 2:Feuille de style appelée
design
É Exemple d'application du CSS à la balise
« body »
Sélecteur Déclaration
body :{background-color : red ;} /* Ceci est
un commentaire CSS */
Propriété valeur
Cette portion de code CSS signifie que l'on applique la
couleur de fond rouge à la balise body de notre page HMTL.
20 Apache:
serveur le plus répandu sur Internet. Il s'agit d'une
application fonctionnant à la base sur Unix, mais il a désormais
été porté sur de nombreux systèmes, dont Microsoft
Windows
18
9.2.1.3. Langages pour la dynamisation de nos
pages
Il existe d'autres langages qui, combinés au HTML/CSS,
contribuent au développement des sites web. Ces langages peuvent
être subdivisés en deux :
É Les langages côté client, de l'anglais
« client-side languages » : sont des langages exécutés
par les ordinateurs des visiteurs du site. Parmi les langages clients, le
JavaScript reste le plus répandu.
É Les langages côté serveur, de l'anglais
« server-side languages » : sont des langages qui s'exécutent
sur le serveur hébergeant le site.
Il existe plusieurs langages côté serveur parmi
lesquels on peut citer : PHP, ASP, Perl, JSP,...
9.2.1.3.1. Le PHP
a) Présentation de PHP
Le sigle PHP signifiait à l'origine Personal Home
Page. Pour Rasmus Lerdorf, l'auteur en 1994 de ce qui allait devenir le
langage de script côté serveur incorporable dans un document HTML,
il s'agissait alors d'ajouter quelques fonctionnalités à ses
pages personnelles.
PHP signifie aujourd'hui Php Hypertext Preprocessor car
il renvoie à un navigateur un document HTML construit par le moteur de
script Zend Engine2 de PHP et qui permet de créer des pages Web
dynamiques et interactives.
Pour contenir la masse d'informations collectées, PHP
s'appuie généralement sur un SGBD, généralement
MySQL mais aussi SQLite avec PHP5, et sur des serveurs Apache20.
PHP, MySQL et Apache forment d'ailleurs le trio ultra dominant sur les serveurs
Internet.
Ce langage, qui au début servait pour les traitements des
formulaires et l'accès aux bases de données, est d'ores et
déjà un langage de Programmation Orientée Objet depuis sa
version cinq.
19
b) Fonctionnement de PHP
Comme précédemment énoncé, PHP
est un langage script coté serveur. Cela veut dire que le code qu'on
écrit s'exécute sur un ordinateur hôte appelé
serveur.
Lorsque le client demande une page écrite en PHP, le
serveur lit le code PHP et le traite selon ses instructions et renvoie dans un
format de HTML les données de la page demandée au navigateur du
client qui traite ces données comme il traiterait des simples codes
HTML. Il est à noter que le script PHP peut bel et bien être
incorporé dans du code HTML.
Figure 3: Fonctionnement d'une page PHP Source :
[5]
c) Syntaxe de PHP
Pour écrire du code PHP, il suffit de le placer entre
les balise < ?php et ?>. Tout ce qui
sera écrit entre ces balises sera traité par le serveur comme
étant du script PHP. Tout ce qui est écrit en dehors de ces
balises est renvoyé au navigateur comme du HTML simple.
Il existe d'autres notations peu courantes : <script
language='php'> code PHP </scirpt >
Ou < ? code PHP ?> ou < ?= code
PHP ?>
20
Un fichier PHP porte une extension .php.
Cependant on donne généralement l'extension .inc
ou .inc.php à un fichier contenant des
données jugées confidentielles pour question de
sécurité. Exemple de code PHP :
< ?php
echo "salut" ;
// Ceci est un commentaire en PHP
?>
d) Choix de PHP
Le langage PHP est un langage de script côté
serveur, multiplateforme et supporté par plusieurs hébergeurs.
PHP est un logiciel libre21, gratuit, facile d'apprentissage,
populaire (une grande communauté de programmeurs l'utilise) et puissant,
ce qui le rend aujourd'hui un des langages qui s'imposent surtout dans le
développement web.
Selon Larry ULLMAN dans son ouvrage «
PHP6 and MySQL5 for Dynamic Web Sites », PHP est le
module le plus demandé pour Apache (le serveur web le plus
utilisé). Selon toujours Larry ULLMAN, PHP est un langage sûr et
sécurisé. Il donne l'exemple de Yahoo, qui gère plus de
3,5 milliards de requêtes par jour en utilisant PHP.
Certains de sites et portails web populaires aujourd'hui ont
été développés en PHP dont l'incontournable site
social Facebook, la librairie en ligne Eyrolles et le site
encyclopédique Wikipedia.
21 Logiciel libre:
Un logiciel est qualifié de libre si chacun peut, en toute
légalité, l'utiliser, l'étudier, le modifier et le
diffuser, et faire de même avec ses versions dérivées et
son code source, bref tout le monde peut participer à son
développement.
21
9.2.1.3.2. Le JavaScript
a) Présentation du JavaScript
JavaScript, appelé au départ
LiveScript, est le langage de script par excellence
côté client. Il a été développé par
Brendan Eich de la société Netscape Communications et rendu
public en 1995. Associé à d'autres langages de programmation web,
il permet de développer des pages web dynamiques et interactives.
Il est à noter qu'il y a une différence entre
le JavaScript et le langage Orientée Objet Java, développé
par la société Sun Microsystems. Ce n'est ni une version de cette
dernière. Le JavaScript est au centre de la technologie Ajax
prônée par le Web 2.0.
b) Fonctionnement et syntaxe de JavaScript
Le JavaScript s'exécute entièrement à
l'intérieur du navigateur web du client. Il est placé entre les
balises <script type= "text/javascript"> et
</script>. Cependant il peut être
entièrement écrit dans son propre fichier avec une extension
.js et être joint à une page HTML grâce a
l'instruction src= "chemin_vers_fichier/nom_fichier.js" que
l'on insère à l'intérieur de la balise ouvrante
<script>.
Exemple de code JavaScript : <script type=
"text/javascript">
document.write("Hello World ") ; /* Ceci est un commentaire
*/
alert("Hello World") ;
</script>
La première instruction du script ci-dessous affiche
sur la page web du navigateur le message « Hello World » alors que la
deuxième instruction affiche le message « Hello World » dans
une boîte de dialogue.
22
Figure 4: Affichage d'un message dans la page
web
Figure 5: Affichage d'un message dans une boîte de
dialogue
L'un des inconvénients majeurs du JavaScript est qu'il
est difficilement compatible avec les différents navigateurs connus
actuellement. Il est donc impératif de savoir jusqu'à quel point
tel ou tel autre navigateur peut être compatible avec celui-ci.
c) La bibliothèque jQuery
Ce terme peu connu de nombreux utilisateurs du web, est une
des bibliothèques du langage JavaScript et la plus populaire de nos
jours. Son concept est emprunté de la structure des langages HTML et
CSS. Il a pour objet de rendre des pages web beaucoup plus interactives tout en
réduisant le travail des programmeurs.
Exemple de script JavaScript avec usage du
jQuery
$(document).ready (function () { alert (`Bienvenu sur mon site')
;}
23
d) L'Ajax
AJAX est l'acronyme d'Asynchronous JavaScript And
XML, autrement dit JavaScript et XML Asynchronés.
L'idée derrière AJAX est de faire communiquer
une page web avec un serveur web sans pour autant occasionner le rechargement
de la page. D'où l'utilisation du JavaScript qui se charge
d'établir la connexion entre l'ordinateur du client et le serveur.
Certains programmeurs vont même jusqu'à dire qu'AJAX est un
concept d'utilisation du JavaScript coté serveur.
La structure d'une application AJAX repose sur :
· Le XHTML (Extensible HyperText Markup Language)
· Le DOM (Document Object Model)
· Le JavaScript
· La feuille de style CSS
· Le XML (Extensible Markup Language)
A l'heure actuelle le XML tend à être
délaissé au profit du JSON22 (JavaScript Object
Notation). La combinaison d'Ajax et jQuery permet d'apporter un plus à
une page web tout en réduisant le travail du programmeur qui voit son
temps de codage réduit.
9.2.1.3.3. Le SQL
Le SQL, Langage de Requête Structuré (Structured
Query Language), est un langage standard de création et d'exploitation
des bases de données. Ce langage de requêtes est utilisé
sur presque tous les SGBD connus, dont Oracle, Microsoft SQL, MySQL,...
| 
