Technologies Du Web

Technologies du Web
Langage HTML
Le langage HTML
 HTML (Hyper Text Mark-up Language) est le langage
universel utilisé pour communiquer sur le Web.
L’information sera ainsi transportée sur le réseau, pour
aboutir sur un poste client puis interpréter grâce à un
programme appelé navigateur ou browser.
 Le logiciel que l'on appelle un browser permet de surfer

sur le Net et d'afficher sur l’écran les "pages" qu'il a
interceptées. Il excite différents browser, dont les plus
connus sont Netscape Navigator et Internet Explorer de
Microsoft mais il en existe beaucoup d'autres.
Les briques : balises et
attributs, commentaires
<p>Ceci est un paragraphe.</p>
<p align="right">Ceci est un paragraphe

aligné à droite.</p>


Structure de base d'une page
HTML
<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>

</body>
</html>
Organisation du texte
Les paragraphes : <p>Bonjour et bienvenue
sur mon site !</p>
Sauter une ligne : <br>
Les titres :
<h1> </h1> : titre très important
<h2> </h2> : titre important
<h3> </h3> : titre un peu moins important
<h4> </h4> : titre encore moins important
<h5> </h5> : titre pas important .
<h6> </h6> : titre vraiment
Les listes :
Liste non ordonnée:
<ul>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ul>
Les listes :
Liste ordonnée:
<ol>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ol>
Exemple
<html>
<head>
<title>Niveaux de titres</title>
</head>
<body>
<h1>Titre super important</h1>
<h2>Titre important</h2>
<h3>Titre un peu moins important (sous-titre)</h3>
<h4>Titre pas trop important</h4>
<h5>Titre pas important</h5>
<h6>Titre vraiment pas important du tout</h6>
</body>
</html>
Création des Liens
Un lien vers un autre site:
<a href="http://www.udl-sba.com">Site de l’université</a>
Un lien vers une autre page de son site:

<a href="page2.html">
<a href=« …………/page2.html">

Les Images
Insertion d'une image :
<p>
Voici une photo que j'ai prise lors de mes dernières vacances
à la montagne :<br >
<img src="images/montagne.jpg" alt="Photo de montagne" />
</p>
Récapitulatif
<HTML> Ceci est le début d'un document de type HTML.
</HTML> Ceci est la fin d'un document de type HTML.

<HEAD> Ceci est le début de la zone d'en-tête
(prologue au document proprement dit
contenant des informations destinées au
browser).
</HEAD> Ceci est la fin de la zone d'en-tête.
<TITLE> Ceci est le début du Titre de la page.
</TITLE> Ceci est la fin du Titre de la page.
<BODY> Ceci est le début du document proprement
dit.
</ BODY> Ceci est la fin du document proprement dit.
Exercice 1
On commence par créer un fichier nommé exercices.html et on y met
les balises : html, head, body. Le titre du document est : Exercices de
HTML.
1. Changer la couleur du fond du document en #00ffff.
2. Placer le titre Corrigé des exercices de HTML centré en haut de la page.
3. Insérer une ligne horizontale de largeur 80% et d’épaisseur 2.
4. Placer le sous-titre Exercice 2 aligné à gauche.
Exercice 2
Reproduisez cette liste :
Les tableaux
Exercice
Les formulaires
CSS: Les feuilles de
style
Mise en forme avec CSS
à quoi sert CSS (Cascading Style Sheets) ?
C' est lui qui vous permet de choisir la couleur de votre texte.
Lui qui vous permet de sélectionner la police utilisée sur votre
site.
Lui encore qui permet de définir la taille du texte, les bordures , le
fond…
La syntaxe de base des CSS
Comment appliquer un style css à un
document HTML ?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>.
Patientez encore un peu !</p>
</body>
</html>
Notion de classes
Notion des ID
Les pseudo-éléments et les pseudo-
classes
Les polices de caractères
Les bordures
Arrière-plans et images de fond
Marges internes et externes
Positionnement
Positionnement
JavaScript
Qu’est-ce que JavaScript
Javascript est un langage de programmation qui, incorporé aux balises
Html, permet d'améliorer la présentation et l'interactivité des pages Web.
• Les instructions JavaScript se placent donc à l'intérieur du code HTML
• Les scripts seront donc (interprétés) par le navigateur de l'utilisateur.
Ceci sans faire appel à des ressources du côté du serveur et sans avoir
à attendre de téléchargement supplémentaire.
• JavaScript n'est pas Java. Bien que ressemblants, ces deux noms
désignent des technologies très différentes.
• JavaScript est un langage objet et événementiel. Le développeur peut
créer des objets sur la page, avec des propriétés et des méthodes et
leur associer des actions en fonction d'événements déclenchés par le
visiteur (passage de souris, clic, saisie clavier, etc...).
Où placer le code ?
Il y a plusieurs endroits dans une page web où il est possible d'intégrer du code
JavaScript :
• dans le corps de la page
• dans l'entête de page
• dans un événement d’un objet de la page
• dans un fichier externe inclus lors de la lecture de la page
dans l'entête
Fonction JavaScript appelée dans un lien :
JavaScript dans un fichier externe :

Un premier script
<HTML>
<HEAD>
<TITLE>Premier script</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("Bonjour tout le monde !")
</SCRIPT>
</BODY>
</HTML>
Règles générales
• Pour rendre plus clair et plus compréhensible notre programme, on
peut placer des commentaires :
– En utilisant le double slash // : tout ce qui se trouve à droite est
commentaire.
– Un commentaire sur plusieurs lignes doit être placé entre /* et */
• Chaque commande doit être terminée par un point-virgule (;).
• Un nombre à virgule est séparé par un point (.) et non par une
virgule (0.5 et non 0,5)
• Javascript est sensible à la casse
Contraintes sur les noms de
variables
• Les noms de variables ne peuvent contenir que des lettres, chiffres, ou le
caractère de _ : Mon_Prenom est un nom valide.
• Les noms de variables ne doivent pas commencer par un chiffre.
• Les caractères spéciaux et accentués sont interdits.
• Les majuscules et les minuscules ont leur importance.
• Un nom de variable ne peut contenir d’espaces.
• Les mots réservés JavaScript ne peuvent être utilisés comme noms de
variable.
Variables
a. Les types
la chaîne de caractères:
• var chaine="Mon nom est " + prenom + " " + nom +".";
Les nombres.
les booléens,
b. Conversion de type
• parseInt() et parseFloat() permettent de convertir une chaîne de
caractères en nombre
• Number() transforme un objet en nombre à la manière de parseFloat() pour
les chaînes de caractères.
• string() transforme un objet en chaîne de caractères.
Déclaration ; affectation de
valeurs
a. Déclaration d'une variable sans affectation de valeur
Une déclaration (sans affectation de valeur) se fait à l'aide du mot-clef var. Par
exemple, var a; déclare l'existence d'une variable s'appelant le nom a, mais
sans lui avoir affecté de valeur. Elle est donc de type undefined.
b. Opérateur d'affectation simple =
c. Opérateurs d'affectation complexe
+=
-=
*=
/=
Tableaux
1. Tableau à une dimension
//Déclaration d'un tableau de 4 éléments :
var tableau1 = new Array(4) ;
//Déclaration d'un tableau dont le nombre d'éléments est a priori inconnu :
var tableau2 = new Array() ;
2. Tableau multidimensionnel
var tableau1 = new Array(4) ;
for (i=0;i<tableau1.length;i++)
{
tableau1[i] = newArray(2) ;
}
Opérateurs
1. Opérateurs binaires mathématiques
+ permet dans le cas de deux nombres leur addition, et dans le cas de deux
chaînes de caractères leur concaténation.
- permet de faire la soustraction de deux nombres.
* permet de faire la multiplication de deux nombres.
/ permet de faire la division du premier nombre par le second.
% renvoie le reste de la division euclidienne de deux nombres.
2. Opérateurs binaires de comparaison
<
<=
>
>=
==
!=
===
!==
3. Opérateurs binaires logiques
&&
||
4. Opérateurs unaires
! est l'opérateur logique de négation
++ est l'opérateur d'incrémentation
-- est l'opérateur de décrémentation
5. Utilisation des opérateurs d'incrémentation et de décrémentation
var a=3 ; var a=3 ;

b=(a++)*2 ; b=(++a)*2 ;
Tests et boucles
a. Instruction if
if (choix == 1)
{
alert("Vous avez fait le premier choix") ;
}
if (choix == 1)
{
}
else
{
alert("Vous n'avez pas fait le premier choix") ;
}
b. Instruction switch
switch (choix)
{
case 1:
break ;
case 2:
alert("Vous avez fait le deuxième choix") ;
break ;
case 3:
alert("Vous avez fait le troisième choix") ;
break ;
default :
alert("Vous avez fait un choix au moins égal à 4") ;
}
a. do... while et while
var compteur = 1 ;
var compteur = 1 ;
while (compteur<1)
do
{
{
compteur++ ;
compteur++ ;
alert(compteur) ;
alert(compteur) ;
}
}
while (compteur<1)
b. Boucles for
for (var i=0;i<3;i++)
{
//Suite d'instructions...
}
Fonctions
a. Déclaration d’une fonction
function nomFonction(liste éventuelle des arguments)

{ (...) }
function surfaceRectangle(longueur, largeur)
{
return longueur*largeur ;
}
Un appel à cette fonction se fait par exemple ainsi :
alert(surfaceRectangle(2.5, 3))
b. Fonctions récursives
function fact(n) {
if (n==0) return 1
else return (n*fact(n-1))
}
n=prompt("Entrer un entier positive","0");
document.write(n+"!="+fact(n));
Afficher une fenêtre d'alerte
<HTML>
<HEAD>
<TITLE>Message d'alerte</TITLE>
document.write("On va afficher un message d'alerte")
function afficher()
{
alert("Vous venez de cliquer sur le bouton!")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" value="Cliquez ici" onclick="afficher()">
</FORM>
</BODY>
Exercice
Créez une page avec deux boutons "oui" et "non". Quand
on cliquera sur "oui", le message "Vous avez dit oui"
apparaîtra. Quand on cliquera sur "non", le message "Vous
avez dit non" apparaîtra.
Passage d'un paramètre
<HTML>
<HEAD>
<TITLE>Votre nom</TITLE>
function afficher(mot)
{
alert("Bonjour "+mot)
alert("Votre nom contient "+mot.length+" lettres")
}
</SCRIPT>
</HEAD>
<BODY>
Ecrivez votre nom ci-dessous:<BR>
<FORM>
<INPUT TYPE=Text NAME="VotreNom" SIZE="30">
<INPUT type="button" value="Cliquez ici" onclick="afficher(VotreNom.value)">
</FORM>
</BODY>
</HTML>
Exercice
Modifiez le programme ci-dessus pour qu'il demande le
nom et le prénom dans deux champs séparés, et qui
utilisera les réponses pour afficher "Bonsoir [prénom]
[nom]". Par exemple "Bonsoir GRABA Abdelmadjid".
if ... else ...
<HTML>
<HEAD>
<TITLE>Orthographe d'un nombre</TITLE>
function controler(mot)
{
if (mot=="trois cent vingt et un") {alert("Bravo\nVous avez bien orthographié")}
else {alert("Vous avez écrit "+mot+"\nIl fallait écrire trois cent vingt et un")}
}
</SCRIPT>
</HEAD>
<BODY>
Ecrivez en lettres le nombre 321:<BR>
<FORM>
<INPUT TYPE=Text NAME="nombre" SIZE="30">
<INPUT type="button" value="Cliquez ici" onclick="controler(nombre.value)">
</FORM>
</BODY>
</HTML>
Exercice
Modifiez le programme ci-dessus pour qu'il demande la
capitale de l’Algerie (Alger) et donne deux réponses
possibles, soit "Bravo", soit la correction.
Choix multiples
<HTML>
<HEAD>
<TITLE>Capitale de la Suisse</TITLE>
function controler()
{
if (document.question.Choix1[2].checked) {alert("Bravo")}
else {alert("Non, la capitale de la Suisse est Berne")}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="question">
<H3>Question 1</H3>
Quelle est la capitale de la Suisse ?<BR>
<INPUT TYPE="radio" NAME="Choix1" VALUE="1">Geneve<BR>
<INPUT TYPE="radio" NAME="Choix1" VALUE="2" >Zurich<BR>
<INPUT TYPE="radio" NAME="Choix1" VALUE="3" >Berne<P>
<INPUT TYPE="button" VALUE="Vérifier" onclick="controler()">
</FORM>
</BODY>
</HTML>
Exercice
Modifiez le programme ci-dessus pour ajouter une question
au questionnaire et demandez la capitale d'un autre pays.
Le programme donnera la bonne réponse des deux
questions séparément.
instructions de boucle
<HTML>
<HEAD>
<TITLE>Livret entre 2 et 12</TITLE>
n=0
while((n<2) || (n>12)) {
n = prompt("Entrez un nombre entre 2 et 12")
}
document.write("<H3>Livret de ",n,"</H3>")
for(i=1; i<13; i++) {
document.write(i," x ",n," = ",i*n,"<BR>")
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Exercice
Modifiez le programme ci-dessus pour écrire
tous les livrets de 2 à 12, sans demander
quoi que ce soit à l'utilisateur. Il faudra donc
imbriquer une boucle dans une autre.
Fonctions prédéfinies
Généralités
Hiérarchie des objets du navigateur
Propriétés et méthodes
Objet Navigator
Objet window
Objet window
Objet document
Objet document
Objet history
Objet history
Objet Math
Objet Image
Objet Date()
Objet Date()
Objet Date()
Objet Date()
Les évènements
Les évènements
Les évènements
PHP
• Apache : c'est ce qu'on appelle un serveur web. Il s'agit
du plus important de tous les programmes, car c'est lui
qui est chargé de délivrer les pages web aux visiteurs.
• PHP : c'est un plug-in pour Apache qui le rend capable
de traiter des pages web dynamiques en PHP. En clair,
en combinant Apache et PHP, notre ordinateur sera
capable de lire des pages web en PHP.
• MySQL : c'est le logiciel de gestion de bases de
données. Il permet d'enregistrer des données de
manière organisée.
Sous Windows : WAMP
Il existe plusieurs paquetages tout prêts
pour Windows. Je vous propose d'utiliser
WAMP Server qui a l'avantage d'être
régulièrement mis à jour et disponible en
français.
Les balises PHP
• Le code PHP vient s'insérer au milieu du
code HTML. On va progressivement
placer dans nos pages web des morceaux
de code PHP à l'intérieur du HTML.
• Ces bouts de code PHP seront les parties
dynamiques de la page, c'est-à-dire les
parties qui peuvent changer toutes seules
(c'est pour cela qu'on dit qu'elles
sont dynamiques).
La forme d'une balise PHP
<?php et se termine par ?>
À l'intérieur, on écrira donc du code source PHP :

<?php /* Le code PHP se met ici */ ?>
Insérer une balise PHP au
milieu du code HTML
<!DOCTYPE html>
<html>
<head>
<title>Ceci est une page de test avec des balises PHP</title>
</head>
<body>
<h2>Page de test</h2>
<p>
Cette page contient du code HTML avec des balises PHP.<br />
<?php /* Insérer du code PHP ici */ ?>
Voici quelques petits tests :
</p>
<ul>
<li style="color: blue;">Texte en bleu</li>
<li style="color: red;">Texte en rouge</li>
<li style="color: green;">Texte en vert</li>
</ul>
<?php
/* Encore du PHP
Toujours du PHP */
?>
</body>
balise PHP dans l'en-tête de
la page
<!DOCTYPE html>
<html>
<head>
<title>Ceci est une page de test <?php
/* Code PHP */ ?></title>
</head>
balise PHP au milieu d'une
balise HTML
<!DOCTYPE html>
<html>
<head>
<title>Ceci est une page de test</title>
<meta <?php /* Code PHP */ ?>
charset="utf-8" />
</head>
Afficher du texte
• L'instruction echo
<?php echo "Ceci est du texte"; ?>

<?php echo "Cette ligne a été écrite \"uniquement\" en PHP."; ?>
Enregistrer une page PHP
• Enregistrez la page avec l'extension .php,
par exemple affichertexte.php, dans le
dossier tests. Il doit se trouver dans
C:\wamp\www\tests sous Windows.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Ma page web</title>
</head>
<body>
<h1>Ma page web</h1>
<p>Aujourd'hui nous sommes le <?php echo date('d/m/Y h:i:s');
?>.</p>
</body>
</html>
Les variables
Les chaînes de caractères (string)
Les nombres entiers (int)
Les nombres décimaux (float)
Les booléens (bool)
Rien (NULL)
Affecter une valeur à une
variable
<?php
$age_du_visiteur = 17;
echo $age_du_visiteur;
?>
La concaténation
<?php
echo "Le visiteur a ";
echo $age_du_visiteur;
echo " ans";
?>
Concaténer avec des
guillemets doubles
<?php
echo "Le visiteur a $age_du_visiteur ans";
?>
• Ça affiche :Le visiteur a 17 ans.

Concaténer avec des
guillemets simples
<?php
echo 'Le visiteur a $age_du_visiteur ans'; //
Ne marche pas
?>
Ça affiche : Le visiteur a $age_du_visiteur ans.
<?php
echo 'Le visiteur a ' . $age_du_visiteur . '
ans';
?>
Cette fois, ça affiche bien comme on
voulait :Le visiteur a 17 ans.
Les opérations de base :
addition, soustraction…
<?php
$nombre = 2 + 4; // $nombre prend la valeur 6
$nombre = 5 - 1; // $nombre prend la valeur 4
$nombre = 3 * 5; // $nombre prend la valeur 15
$nombre = 10 / 2; // $nombre prend la valeur 5
$nombre = 10 % 3; // $nombre prend la valeur 1 car il reste 1
// Allez on rajoute un peu de difficulté
$nombre = 3 * 5 + 1; // $nombre prend la valeur 16
$nombre = (1 + 2) * 2; // $nombre prend la valeur 6
?>
Les symboles à connaître
== Est égal à
> Est supérieur à
< Est inférieur à
>= Est supérieur ou égal à
<= Est inférieur ou égal à
!= Est différent de
La structure if… else
<?php
$age = 8;
if ($age <= 12) // SI l'âge est inférieur ou égal à 12

{
echo "Salut gamin ! Bienvenue sur mon site !<br />";
$autorisation_entrer = "Oui";
}
else // SINON
{
echo "Ceci est un site pour enfants, vous êtes trop vieux pour pouvoir entrer. Au
revoir !<br />";
$autorisation_entrer = "Non";
}
echo "Avez-vous l'autorisation d'entrer ? La réponse est : $autorisation_entrer";

?>
La structure if… elseif
<?php
$autorisation_entrer = "Oui";
if ($autorisation_entrer == "Oui") // SI on a l'autorisation d'entrer

{
// instructions à exécuter quand on est autorisé à entrer
}
elseif ($autorisation_entrer == "Non") // SINON SI on n'a pas l'autorisation d'entrer
{
// instructions à exécuter quand on n'est pas autorisé à entrer
}
else // SINON (la variable ne contient ni Oui ni Non, on ne peut pas agir)
{
echo "Euh, je ne connais pas ton âge, tu peux me le rappeler s'il te plaît ?";
}
?>
Des conditions multiples
Mot-clé Signification Symbole équivalent

AND Et &&
OR Ou ||
<?php
$age = 8;
$langue = "anglais";
if ($age <= 12 AND $langue == "français")

{
echo "Bienvenue sur mon site !";
}
elseif ($age <= 12 AND $langue == "anglais")
{
echo "Welcome to my website!";
}
?>
Une alternative pratique : switch
<?php
$note = 16;
if ($note == 0) { echo "Tu es vraiment un gros nul !!!";}
elseif ($note == 5) { echo "Tu es très mauvais";}
elseif ($note == 7) { echo "Tu es mauvais";}
elseif ($note == 10) { echo "Tu as pile poil la moyenne, c'est un peu juste…"; }
elseif ($note == 12) { echo "Tu es assez bon"; }
elseif ($note == 16) { echo "Tu te débrouilles très bien !";}
elseif ($note == 20) { echo "Excellent travail, c'est parfait !";}
else { echo "Désolé, je n'ai pas de message à afficher pour cette note"; }
?>
<?php
$note = 10;
switch ($note)
{
case 0: // dans le cas où $note vaut 0
echo "Tu es vraiment un gros nul !!!"; break;
case 5: echo "Tu es très mauvais"; break;
case 7: echo "Tu es mauvais";break;
case 10: echo "Tu as pile poil la moyenne, c'est un peu juste…"; break;
case 12: echo "Tu es assez bon";break;
case 16: echo "Tu te débrouilles très bien !"; break;
case 20: echo "Excellent travail, c'est parfait !"; break;
default: echo "Désolé, je n'ai pas de message à afficher pour cette note";
}
?>
Une boucle simple : while
<?php
$nombre_de_lignes = 1;
while ($nombre_de_lignes <= 100)

{
echo 'Ceci est la ligne n°' . $nombre_de_lignes . '<br />';
$nombre_de_lignes++;
}
?>
Une boucle plus complexe : for
<?php
for ($nombre_de_lignes = 1; $nombre_de_lignes <= 100;
$nombre_de_lignes++)
{
echo 'Ceci est la ligne n°' . $nombre_de_lignes . '<br />';
}
?>
Les tableaux numérotés
<?php
// La fonction array permet de créer un array
$prenoms = array ('François', 'Michel', 'Nicole', 'Véronique', 'Benoît');
?>
<?php
$prenoms[0] = 'François';
$prenoms[1] = 'Michel';
$prenoms[2] = 'Nicole';
?>
Les tableaux associatifs
<?php
// On crée notre array $coordonnees
$coordonnees = array (
'prenom' => 'François',
'nom' => 'Dupont',
'adresse' => '3 Rue du Paradis',
'ville' => 'Marseille');
?>
<?php
$coordonnees['prenom'] = 'François';
$coordonnees['nom'] = 'Dupont';
$coordonnees['adresse'] = '3 Rue du Paradis';
$coordonnees['ville'] = 'Marseille';
?>
Parcourir un tableau
<?php
// On crée notre array $prenoms
$prenoms = array ('François', 'Michel', 'Nicole', 'Véronique',
'Benoît');
// Puis on fait une boucle pour tout afficher :

for ($numero = 0; $numero < 5; $numero++)
{
echo $prenoms[$numero] . '<br />';
}
?>
<?php
$prenoms = array ('François', 'Michel', 'Nicole',
'Véronique', 'Benoît');
foreach($prenoms as $element)
{
echo $element . '<br />';
}
?>
Les fonctions
Les fonctions prêtes à l'emploi de PHP:
<?php
$phrase = 'Bonjour tout le monde ! Je suis une phrase !';
$longueur = strlen($phrase);
echo 'La phrase ci-dessous comporte ' . $longueur . ' caractères :<br
/>' . $phrase;
?>
<?php
$ma_variable = str_replace('b', 'p', 'bim bam boum');
echo $ma_variable;
?>
is_integer($var), is_double($var), is_string($var), is_bool($var),

is_array($var), is_null($var).
Créer ses propres fonctions
<?php
function DireBonjour($nom)
{
echo 'Bonjour ' . $nom . ' !<br />';
}
DireBonjour('Marie');
DireBonjour('Patrice');
DireBonjour('Edouard');
DireBonjour('Pascale');
DireBonjour('François');
DireBonjour('Benoît');
DireBonjour('Père Noël');
?>
Présentation des bases de données
Une base de données permet d'enregistrer
des données de façon organisée et
hiérarchisée. Certes, vous connaissez les
variables, mais celles-ci restent en mémoire
seulement le temps de la génération de la
page. Mais dès que vous avez beaucoup de
données à enregistrer cela devient vite très
compliqué .
Le langage SQL et les bases de
données
La base de données (BDD) est un système
qui enregistre des informations. Ce qui est
très important ici, c'est que ces informations
sont toujours classées. Et c'est ça qui fait
que la BDD est si pratique : c'est un moyen
simple de ranger des informations.
Les SGBD s'occupent du
stockage
• Les plus connus sont, pour rappel :
• MySQL : libre et gratuit, c'est probablement le SGBD le
plus connu.
• PostgreSQL : libre et gratuit comme MySQL, avec plus
de fonctionnalités mais un peu moins connu ;
• SQLite: libre et gratuit, très léger mais très limité en
fonctionnalités ;
• Oracle : utilisé par les très grosses entreprises ; sans
aucun doute un des SGBD les plus complets, mais il
n'est pas libre et on le paie le plus souvent très cher ;
• Microsoft SQL Server : le SGBD de Microsoft.
Communication entre PHP et
MySQL
Structure d'une base de
données
• L'armoire est appelée la base dans le langage SQL.
C'est le gros meuble dans lequel les secrétaires ont
l'habitude de classer les informations.
• Dans une armoire, il y a plusieurs tiroirs. Un tiroir, en
SQL, c'est ce qu'on appelle une table. Chaque tiroir
contient des données différentes. Par exemple, on peut
imaginer un tiroir qui contient les pseudonymes et infos
sur vos visiteurs, un autre qui contient les messages
postés sur votre forum…
• Mais que contient une table ? C'est là que sont
enregistrées les données, sous la forme d'un tableau.
Dans ce tableau, les colonnes sont appelées des
champs, et les lignes sont appelées des entrées.
Clés primaires
La clé primaire d'une table est une contrainte d'unicité,
composée d'une ou plusieurs colonnes, et qui permet
d'identifier de manière unique chaque ligne de la table.
CREATE TABLE Nom_table (

colonne1 description_colonne1 PRIMARY KEY,
colonne2 description_colonne2,
)
Clés étrangères
• Une clé étrangère est un attribut ou un groupe d'attributs
d'une relation R1 devant apparaître comme clé primaire
dans une relation R2 afin de matérialiser une référence
entre les tuples de R1 et les tuples de R2.
• Une clé étrangère d'un tuple référence une clé primaire
d'un autre tuple.
CREATE TABLE [Nom_table] (
FOREIGN KEY (colonne(s)_clé_étrangère) REFERENCES
table_référence (colonne(s)_référence)
)
En résumé
• Une base de données est un outil qui stocke vos
données de manière organisée et vous permet de les
retrouver facilement par la suite.
• On communique avec MySQL grâce au langage SQL.
Ce langage est commun à tous les systèmes de gestion
de base de données (avec quelques petites différences
néanmoins pour certaines fonctionnalités plus
avancées).
• PHP fait l'intermédiaire entre vous et MySQL.
• Une base de données contient plusieurs tables.
• Chaque table est un tableau où les colonnes sont
appelées « champs » et les lignes « entrées ».
Introduction au langage SQL
Grâce au langage SQL, vous pourrez rechercher
certains enregistrements afin de les extraire, dans
l'ordre dans lequel vous souhaitez les extraire. Par
exemple, vous pouvez créer une instruction SQL
qui extrait les informations de plusieurs tables
simultanément, ou alors un enregistrement
spécifique.
Créations d’une Table
CREATE TABLE etudiants(id int, nom VARCHAR(10),
prenom VARCHAR(12),email VARCHAR(15));
• INT : nombre entier ;

• VARCHAR : texte court (entre 1 et 255 caractères) ;
• TEXT : long texte (on peut y stocker un roman sans
problème) ;
• DATE : date (jour, mois, année).
l'instruction SELECT
• cette instruction est utilisée pour renvoyer des champs
spécifiques d'une ou de plusieurs tables de la base de
données. Exemple:
SELECT * FROM etudiants
SELECT nom, prenom FROM etudiants

La clause WHERE
• La clause WHERE va permettre de spécifier les
conditions : seule une partie des enregistrements seront
concernés. Exemple:
SELECT * FROM etudiants WHERE adresse = 'sba‘
SELECT * FROM etudiants WHERE adresse != 'sba‘

Clause WHERE… BETWEEN
• Nous pouvons sélectionner quelques enregistrements se
trouvant entre deux critères de recherche spécifiés.
SELECT * FROM etudiants WHERE DateNaissance

BETWEEN ‘2011-01-01’ AND ‘2011-01-31’
La clause WHERE… LIKE
• Cette clause permet de renvoyer tous les
enregistrements pour lesquels il existe une condition
particulière dans un champ donné. Ci-dessous la
commande qui permet de rechercher tous les etudiants
dont le nom commence par un « s » :
SELECT * FROM etidiants WHERE Nom LIKE 's%'

La clause ORDER BY
• La clause ORDER BY permet de renvoyer les
enregistrements dans un ordre donné. Il en existe deux :
SELECT * FROM etudiants ORDER BY Nom DESC,

SELECT * FROM etudiants ORDER BY Prenom ASC
Ajouter des informations
• Grâce au SQL, nous pouvons aussi ajouter des
informations dans une table avec la commande INSERT
INTO
INSERT INTO etudiants (Nom, Prenom, Adresse) VALUES

(‘amar', ‘amor', ‘SBA')
La mise à jour d'informations
• On peut modifier certains champs d'enregistrements
existants grâce au mot-clé UPDATE :
UPDATE etudiants SET ville = ‘sba' WHERE Numero = 4

Supprimer des informations
• Il se peut que l'on soit amené à supprimer un ou
plusieurs enregistrements d'une table, il existe pour cela
l'instruction DELETE FROM.
DELETE FROM etudiants WHERE Numero = 2

formulaire
Champs à valeurs multiples
Transfert de fichier
Transfert de fichier
C’est quoi une session
Exemple et fonctions de session
Création d’une Base de données
Fonctionnement
Connexion au serveur et sélection de la
base
Requêtes
Requêtes
Requêtes
Appel d’un fichier php
Redirection du navigateur

Technologies Du Web

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Technologies Du Web

Transféré par

Droits d'auteur :

Formats disponibles

Technologies du Web

 Le logiciel que l'on appelle un browser permet de surfer

<p>Ceci est un paragraphe.</p>

<p align="right">Ceci est un paragraphe

Un lien vers une autre page de son site:

<a href=« …………/page2.html">

</HTML> Ceci est la fin d'un document de type HTML.

JavaScript dans un fichier externe :

var a=3 ; var a=3 ;

function nomFonction(liste éventuelle des arguments)

À l'intérieur, on écrira donc du code source PHP :

<?php echo "Ceci est du texte"; ?>

• Ça affiche :Le visiteur a 17 ans.

if ($age <= 12) // SI l'âge est inférieur ou égal à 12

echo "Avez-vous l'autorisation d'entrer ? La réponse est : $autorisation_entrer";

if ($autorisation_entrer == "Oui") // SI on a l'autorisation d'entrer

Mot-clé Signification Symbole équivalent

if ($age <= 12 AND $langue == "français")

if ($note == 0) { echo "Tu es vraiment un gros nul !!!";}

elseif ($note == 5) { echo "Tu es très mauvais";}

elseif ($note == 7) { echo "Tu es mauvais";}

elseif ($note == 12) { echo "Tu es assez bon"; }

elseif ($note == 16) { echo "Tu te débrouilles très bien !";}

elseif ($note == 20) { echo "Excellent travail, c'est parfait !";}

case 5: echo "Tu es très mauvais"; break;

case 7: echo "Tu es mauvais";break;

case 12: echo "Tu es assez bon";break;

case 16: echo "Tu te débrouilles très bien !"; break;

case 20: echo "Excellent travail, c'est parfait !"; break;

while ($nombre_de_lignes <= 100)

// Puis on fait une boucle pour tout afficher :

is_integer($var), is_double($var), is_string($var), is_bool($var),

CREATE TABLE Nom_table (

• INT : nombre entier ;

SELECT * FROM etudiants

SELECT nom, prenom FROM etudiants

SELECT * FROM etudiants WHERE adresse = 'sba‘

SELECT * FROM etudiants WHERE adresse != 'sba‘

SELECT * FROM etudiants WHERE DateNaissance

SELECT * FROM etidiants WHERE Nom LIKE 's%'

SELECT * FROM etudiants ORDER BY Nom DESC,

INSERT INTO etudiants (Nom, Prenom, Adresse) VALUES

UPDATE etudiants SET ville = ‘sba' WHERE Numero = 4

DELETE FROM etudiants WHERE Numero = 2

Vous aimerez peut-être aussi