cour.sti2K25
cour.sti2K25
cour.sti2K25
Manuel de cours
Modules du cours :
➢ Partie 1 : Acquérir des concepts
Systèmes &
technologies de
fondamentaux de base de
données pour gérer les
données.
l’informatique
➢ Partie 2 : Exploiter des
techniques de développement
pour créer et publier un site
web dynamique.
4ème Sciences de l’informatique
Mr H’mida Mohamed
Classe : 4ème sI 1
Nom et prénom : ……………………
A.S : 2023/2024
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Partie 1 :
Acquérir des concepts
2
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Module 1 :
Les notions fondamentales d’une base de données
1. Qu’est-ce qu’une base de données ?
Vidéo 1 : https://www.youtube.com/watch?v=UHuNz-LaOMQ
3
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
4
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Module 2 :
Les concepts fondamentaux d’une BD relationnelles
(BDR)
1. Qu’est-ce qu’une Base de Données Relationnelle (BDR) :
5
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
6
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
7
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Lien : Un lien entre les tables peut être définie à l'aide de clés
étrangères. Une clé étrangère est un champ d'une table (fille)
qui est lié à la clé primaire d'une autre table (mère). Dans
certain cas pour assurer une liaison entre deux tables, nous
somme obligés de créer une table intermédiaire.
8
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
9
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
10
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
………………………………………..………………………………………..…………………………………………………..
………………………………………..………………………………………..…………………………………………………..
11
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Courriel
12
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Activité 3 : un jeune étudiant qui fait son stage dans une bibliothèque municipale, il
est demandé de classer les livres d’une façon automatique. Il a créé une base de données
qui contient cette table :
………………………………………..………………………………………..…………………………………………………..
………………………………………..………………………………………..…………………………………………………..
………………………………………..………………………………………..…………………………………………………..
………………………………………..………………………………………..…………………………………………………..
………………………………………..………………………………………..…………………………………………………..
………………………………………..………………………………………..…………………………………………………..
………………………………………..………………………………………..…………………………………………………..
13
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
………………………………………..………………………………………..…………………………………………………..
………………………………………..………………………………………..…………………………………………………..
………………………………………..………………………………………..…………………………………………………..
………………………………………..………………………………………..…………………………………………………..
14
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Dans cette BD, Combien a-t-on de relation entre les différentes tables ? ……………..
Pour chaque relation, indiquer la table mère, la table fille, la clé primaire et la clé
étrangère :
……………………………………………………………………………………………………………………………………..
……………………………………………………………………………………………………………………………………..
……………………………………………………………………………………………………………………………………..
……………………………………………………………………………………………………………………………………..
……………………………………………………………………………………………………………………………………..
15
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Activité 6 : On souhaite créer une base de données pour gérer les activités d’une
entreprise. Une première étude a mis en évidence trois tables. Pour chacune des tables,
la clé primaire est soulignée.
EMPLOYE (NumEmp, Nom, Prénom, Adresse, Téléphone, Qualification)
SERVICE (NomService, Résponsable, Téléphone)
PROJET (NomProjet, DateDeb, DateFin, NumEmp#)
En considérant les possibilités offertes par ce schéma, répondre aux questions suivantes
en justifiant vos réponses par rapport à la sémantique intuitive des relations :
1) Un employé peut-il avoir plusieurs qualifications ? (Oui / Non).
………………………………………………………………………………………………………
………………………………………………………………………………………………………
2) Un employé peut-il faire plusieurs projets en même temps ? (Oui / Non).
………………………………………………………………………………………………………
………………………………………………………………………………………………………
3) Une personne peut-elle être responsable de plusieurs services ? (Oui / Non).
………………………………………………………………………………………………………
………………………………………………………………………………………………………
4) Un service peut-il avoir plusieurs responsables ? (Oui / Non).
………………………………………………………………………………………………………
………………………………………………………………………………………………………
Activité 7 : soit la base de données « Gestion de location » représentées par les tables
ci-dessous ainsi que les valeurs saisies dans ces différentes tables.
Table voiture
immatriculation marque model couleur kilométrage Prix
9812 TU 125 Renault kadjar Noir 12 000 100 DT
5487 TU 200 Citroën C5 air cross Bleu 9 000 -105 DT
1593 TU 220 Peugeot 3008 Blanc 53 000 110 DT
1111 TU 234 Geely CoolRay blanc -10 000 150 DT
16
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Pour chaque table de la base, proposer la (les) colonne(s) qui forme(ent) la clé primaire.
Table Voiture …………………………………………………………………………………………………………….
Table Client ………………………………………………………………………………………………………………
Table Location ……………………………………………………………………………………………………………
En se référant sur les valeurs des différentes tables, détecter les anomalies, les
contraintes d’intégrités non respecter et donner une contrainte pour corriger cette
anomalie.
Activité 8 : soit la représentation textuelle d’une base de données « Emprunt » qui gère
les emprunts des livres d’une bibliothèque d’une faculté.
Etudiant (NumEtd, NomEtd, PrenomEdt, AdresseEtd)
Livre (NumLivre, TitreLivre, NumAuteur, NumEditeur, NumTheme, AnneeEdition)
Auteur (NumAuteur, NomAuteur, AdresseAuteur)
Editeur (NumEditeur, NomEditeur, AdresseEditeur)
Thème (NumTheme, IntituléTheme)
Prêt (NumEtd, NumLivre, DatePret, DateRetour)
17
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
............................................................................................................................. .............................
................................................................................................................................... .......................
Table
Colonne
Un étudiant peut-il emprunter le même livre plusieurs fois ? (Oui / Non).
..........................................................................................................................................................
réécrire la représentation textuelle de la base après les corrections apporter dans les
questions et .
............................................................................................................................. .............................
..........................................................................................................................................................
............................................................................................................................. .............................
..........................................................................................................................................................
..........................................................................................................................................................
............................................................................................................................. .............................
..........................................................................................................................................................
18
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Table
Clé primaire
Déceler les liens entre les différentes tables, en remplissant le tableau ci-dessous :
Table mère Table fille Clé primaire Clé étrangère
...............................................................................................................................................................
.................................................................................................................... ..........................................
............................................................................................................................. ..................................
............................................................................................... ................................................................
............................................................................................................................................. ..................
...............................................................................................................................................................
19
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Module 3 :
Manipuler la structure d’une base de données
relationnelle en mode SQL
1. Introduction :
Vidéo 1 (introduction au SQL) : https://www.youtube.com/watch?v=CyyoFvveSkw
………………………………………………………………………………… :
commandes de création, modification et suppression des
différentes structures de la BD.
……………………………………………………………………………….. :
commandes de manipulation de contenu de la BD (modifier,
consulter ou de supprimer des lignes dans les tables de la BD).
……………………………………………………………………………….. :
commandes de contrôle de l’utilisation de la BD (sécurité de la
base, intégrité des données, cohérences des données).
…………………………………………………………………
20
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
21
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
22
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
……………………………………………………. …………………………………………………….
……………………………………………………. …………………………………………………….
……………………………………………………. …………………………………………………….
……………………………………………………. …………………………………………………….
……………………………………………………. …………………………………………………….
Créer la table CLIENT
…………………………………………………….…………………………………………………….
…………………………………………………….…………………………………………………….
…………………………………………………….…………………………………………………….
…………………………………………………….…………………………………………………….
…………………………………………………….…………………………………………………….
…………………………………………………….…………………………………………………….
…………………………………………………….…………………………………………………….
…………………………………………………….…………………………………………………….
…………………………………………………….…………………………………………………….
…………………………………………………….…………………………………………………….
Créer les tables COMMANDE et LIGNECOMMANDE
……………………………………………………. …………………………………………………….
……………………………………………………. …………………………………………………….
……………………………………………………. …………………………………………………….
……………………………………………………. …………………………………………………….
……………………………………………………. …………………………………………………….
……………………………………………………. …………………………………………………….
……………………………………………………. …………………………………………………….
3. Les requêtes pour modifier la structure d’une table.
Après avoir créé une table, on peut modifier sa structure suite à une erreur ou
omission :
23
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
…………………………… : Pour ajouter une nouvelle colonne dans une table existante.
…………………………… : Pour ajouter une contrainte d’intégrité à une colonne existante.
……………… : Pour modifier une ou plusieurs caractéristique(s) d’une colonne existante.
…………………………… : Pour renommer (changer le nom) une colonne.
Activité 2 : Donner les requêtes SQL pour répondre aux traitements demandés.
Changer la clé primaire de la table LIGNECOMMANDE pour être (numCo et numPr).
……………………………………………………. …………………………………………………….
……………………………………………………. …………………………………………………….
……………………………………………………. …………………………………………………….
Changer le nom de la colonne prix de la table PRODUIT par PU en gardant les mêmes
propriétés.
……………………………………………………………………………………………………………….
……………………………………………………………………………………………………………….
……………………………………………………………………………………………………………….
Changer la propriété de la colonne AdrClt de la table CLIENT pour que la saisie d’une
valeur est obligatoire (la colonne ne doit pas laissée vide).
……………………………………………………………………………………………………………….
……………………………………………………………………………………………………………….
……………………………………………………………………………………………………………….
Changer la propriété de la colonne telClt de la table CLIENT pour les clients qui n’ont
pas de téléphone et les valeurs doivent être entières ayant la même longueur.
……………………………………………………………………………………………………………….
……………………………………………………………………………………………………………….
……………………………………………………………………………………………………………….
Change le type de la colonne dateCo de la table COMMANDE pour être de type
cohérent.
……………………………………………………………………………………………………………….
……………………………………………………………………………………………………………….
……………………………………………………………………………………………………………….
Changer le type de la colonne remise de la table CATEGORIE pour être de la forme
00.00
……………………………………………………………………………………………………………….
……………………………………………………………………………………………………………….
……………………………………………………………………………………………………………….
24
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Changer la taille de la colonne desPr de la table PRODUIT pour qu’elle soit 50.
……………………………………………………………………………………………………………….
……………………………………………………………………………………………………………….
……………………………………………………………………………………………………………….
25
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
26
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Chambre Réservation
27
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
PK1
PK2
PK3
PK4
FK1
28
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
FK2
FK3
CD1
CD2
29
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Module 4 :
Manipuler des données d’une base de données
relationnelle en mode SQL
1. Introduction :
Après avoir finalisé la structure d’une base de données, on passe à la manipulation des
données des différentes tables (insertion, modification et suppression des données).
2. Insertion de données :
2.1. Définition :
2.2. Syntaxe :
30
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
3. Modification de données :
3.1. Définition :
3.2. Syntaxe :
31
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Exemple 3 : (Modifier toutes les valeurs d’une colonne sans la clause WHERE)
UPDATE client
SET pays = 'BELGIQUE'
4. Suppression de données :
4.1. Définition :
4.2. Syntaxe :
Table “utilisateur” :
32
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Commande
Oui / Non
33
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Commande
Oui / Non
Commande
Oui / Non
Commande
Oui / Non
34
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Table Location :
Cin Imat DateLoc DateRet
55555555 9012 TU 232 2022-03-13 2022-03-19
44444444 1234 TU 230 2022-02-25 2022-03-15
22222222 5678 TU 231 2022-05-07 2022-05-31
11111111 1029 TU 229 2022-09-15 2022-10-01
22222222 1234 TU 230 2022-08-17 2022-09-11
Ajouter le client suivant en respectant le même ordre proposé :
(Nom : Mayel ; Tel : ; Prénom : Ramzi ; Cin : 66666666)
……………………………………………………………………………………………………………….
……………………………………………………………………………………………………………….
Table Cin Imat DateLoc DateRet
Description Location 11111111 5678 TU 231 2022-10-27 2022-10-27
Commande
Oui / Non
35
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Module 5 :
Interroger une base de données relationnelle en
mode SQL
1. Introduction :
Après avoir insérer des données dans la base, on peut à tout moment consulter
(chercher) les données d’une ou de plusieurs tables en utilisant la commande SELECT.
La commande ayant les opérateurs suivants :
• SELECT
• FROM
• WHERE
• GROUP BY
• HAVING
• ORDER BY
2. Les requêtes mono-table :
36
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
37
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
38
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Activité 1
Créer une base de données : tables, liens et contraintes
Toutes les clés étrangères seront mises à jour et supprimées automatiquement lors de
la même opération réalisée sur les clés primaires.
39
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Table Vol
CodeV Villedép Villearr heuredép jourdép heurearr jourarr CodeP CodeA CodeC
L453 Nfidha Berlin 23 :30 Samedi 01 :10 Dimanche P130 Elissa Luftansa
Abu
A540 Tunis 08 : 45 Dimanche 15 : 30 Dimanche P150 Nafta Tunisair
dhabi
AF09
EcrireNfidha Istanbul
les requêtes SQL 11
qui: 30 Samedi
permettent de 14
: : 30 Samedi P100 Carthage AirFrance
AF67 Monastir Nice 08 : 20 Lundi 10 : 05 Lundi P150 Hannibal Alitalia
40
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
1) Mettre à jour la table VOL par les valeurs suivantes jour de départ = Vendredi, jour
d’arrivé = samedi, heure de départ = 23 : 30, heure d’arrivé = 01 : 25 du vol dont
la ville de départ = Tunis, la ville d’arrivée = Abu Dhabi et du jour de départ =
Dimanche.
2) L’avion Nafta a été remplacer par AirBus A320 faire cette mise à jour.
3) Afficher les codes des compagnes (CodeC) qui ont réalisés des vol.
4) Reprendre la requête précédente en éliminant les répétitions.
5) Afficher les vols (CodeV, Villedep, Villearr) qui décolle de Tunis. Trier dans l’ordre
croissant selon le CodeV.
6) Afficher les pilotes dont le prénom commence par A. trier dans l’ordre décroissant
selon le nom.
7) Afficher les noms et prénoms des pilotes dont le nom se termine par I. trier dans
l’ordre croissant des noms puis décroissant des prénoms.
8) Afficher les prénoms des pilotes dont le prénom contient M.
9) Afficher les prénoms des pilotes dont le 2ème caractère est A.
10) Afficher les vols (code, ville départ et ville arrivé) dont le jour d’arriver est
indéterminé.
11) Afficher les codes des vols dont l’heure d’arrivé est connue.
12) Afficher les pilotes (nom et prénom) dont le salaire est supérieur ou égal à 4500.
13) Afficher les pilotes (Code, nom, prénom et téléphone) dont le salaire est entre 4400
et 4800 trié par ordre alphabétique des noms.
14) Afficher la somme des salaires mensuels des pilotes. (Salaire Mensuel)
15) Afficher le nombre dans avion dont la capacité est supérieure à 150. (Nombre
d’avion).
16) Afficher la moyenne des salaires des pilotes. (Moyenne des salaires).
17) Afficher la plus grande capacité des avions. (Plus grande capacité).
18) Afficher le plus petit salaire. (Salaire minimum).
41
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
26) Afficher les vols (code, ville départ et ville arrivé) grouper par ville de départ.
27) Afficher les vols (code, ville départ et ville arrivé) par code compagnie.
28) Afficher le vols (ville départ, ville arrivé, heure départ et jour de départ) par code
avion.
29) Afficher les pilotes (nom, prénom et téléphone) ayant le plus bas salaire.
30) Afficher les pilotes (nom, prénom et salaire) ayant le plus haut salaire.
31) Afficher le pilotes (nom, prénom, nombre d’heure et la moyenne des nombre heure
(Moyenne des heures de vol)) ayant un nombre d’heure supérieur à la moyenne des
nombres d’heure.
32) Afficher le pilote (nom et prénom) qui a piloté le vol de code "TU250".
33) Afficher les codes des avions qui sont piloté par le pilote né le "09-10-1999".
34) Afficher l’origine de l’avion de code "Hannibal".
35) Afficher l’origine des compagnies des vols réalisés par le pilote "Chatti Ahmed".
36) Afficher les jours de départ du pilote "Chatti walid".
37) Afficher les pilotes (nom et prénom) qui ont un vol qui départ le "Jeudi".
Requête imbriquée
38) Afficher les pilotes qui n’ont pas réaliser des vol.
39) Afficher les compagnies qui n’ont pas réaliser des vols.
42
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Annexe
SQL V2 (Contexte Général) : https://www.youtube.com/watch?v=Wq0yMQw2EtY
SQL V3 (CREATE / Les Types de Données / Les Contraintes SQL / DROP) :
https://www.youtube.com/watch?v=9qNXA7UVRQg
SQL V4 (INSERT / UPDATE / DELETE) :
https://www.youtube.com/watch?v=PJrlGiMqngE
SQL V5 (SELECT / DISTINCT / WHERE) :
https://www.youtube.com/watch?v=yv6slK6eXs4
SQL V6 ((Partie 1): Les Opérateurs de Comparaison et Les Opérateurs Logiques) :
https://www.youtube.com/watch?v=vN9WOpimPG0&list=PLN9kfJtyH31JG6yeO4x6i2
-QDjPOyJNn9&index=6
SQL V6 ((Partie 2): Les Opérateurs IN - BETWEEN - LIKE - IS NULL / IS NOT NULL) :
https://www.youtube.com/watch?v=ORlCif2oztQ&list=PLN9kfJtyH31JG6yeO4x6i2-
QDjPOyJNn9&index=7
SQL V7 (Les Fonctions d'agrégation (SUM, COUNT, ...) - L' alias AS) :
https://www.youtube.com/watch?v=vblBgNREaM4&list=PLN9kfJtyH31JG6yeO4x6i2-
QDjPOyJNn9&index=8
SQL V8 (GROUP BY / HAVING):
https://www.youtube.com/watch?v=LzVyZEFhQ1w&list=PLN9kfJtyH31JG6yeO4x6i2-
QDjPOyJNn9&index=9
SQL V9 (Order By):
https://www.youtube.com/watch?v=d58UngiIl0U&list=PLN9kfJtyH31JG6yeO4x6i2-
QDjPOyJNn9&index=10
SQL V12 (Alter) :
https://www.youtube.com/watch?v=yKrd7p0Ykos&list=PLN9kfJtyH31JG6yeO4x6i2-
QDjPOyJNn9&index=13
SQL V15 (jointure) :
https://www.youtube.com/watch?v=AEOrcYjJ574&list=PLN9kfJtyH31JG6yeO4x6i2-
QDjPOyJNn9&index=16
SQL V22 (Exercices Corrigées - Les Jointures) :
https://www.youtube.com/watch?v=Cswhk5Sh55c&list=PLN9kfJtyH31JG6yeO4x6i2-
QDjPOyJNn9&index=23
43
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Partie 2 :
Exploiter des techniques de
développement pour créer et
publier un site web dynamique.
44
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
45
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Module 1 :
Créer un site web interactif
1. Créer des documents web en utilisant HTML5 :
La structure générale d’un document web :
Pour un document web on trouve plusieurs structures chacun son choix :
<!DOCTYPE html>
<html lang="fr">
<head>
<!--Encodage des caractères-->
<meta charset='utf-8'>
<!--Actualiser le document toutes les 30 secondes-->
<meta http-equiv='refresh' content='30'>
<!--Définissez une description de votre page Web-->
<meta name="description" content="Cours HTML et CSS">
<!--Définissez des mots-clés pour les moteurs de recherche-->
<meta name="keywords" content="html,css">
<!--Définir l'auteur d'une page-->
<meta name="author" content="H’mida Med">
<!--Configuration de la fenêtre d'affichage-->
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!--Définir un titre pour la page-->
<title>Page Title</title>
<!--charger un lien vers un fichier css nommé main-->
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<!--charger un lien vers un fichier javascipt nommé main-->
<script src='main.js'></script>
</head>
<body>
<!-- Le contenu de la page -->
</body>
</html>
46
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
<figure> <figure>
Figure <img src="animal.jpg"
<figcaption> <figcaption>Eléphan</figcaption>
Titre de figure </figure>
<table>
<table border="1">
Tableau
<caption>Client</caption>
<tr>
<tr> <th>Nom</th> <th>Age</th>
Ligne du tableau
</tr>
<th>
<tr> <td>ali</td> < td>33</td>
Cellule entête
</tr>
<td>
<tr> <td>Sonia</td> <td>26 </td>
Cellule donnée
</tr>
<caption>
</table>
Titre du tableau
47
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
<form> <form name="f" method="post"> </form> Post : envoyer les données par http
Formulaire <form name="f" method="get"> </form> Get : envoyer les données par URL
<input type="text" name="pseudo"
placeholder ="Ex: Zazor" size="30"
maxlength="10">
<input type="password">
48
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
49
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Syntaxe :
balise1
{
propriete1 : valeur1;
propriete2 : valeur2;
}
balise2
{
propriete1 : valeur1;
propriete2 : valeur2;
propriete3 : valeur3;
}
balise3
{
propriete1 : valeur1;
}
Exemple
Les unités absolues en CSS
L’élément box aura la même
px Les pixels .box { dimension (150 x 150 pixels),
width : 150 px ; quelle que soit la taille de
in Les pouces
l’écran.
cm Les centimètres height : 150 px ;
mm Les millimètres
pc Les picas
pt Les points
50
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
background-image:
background-image
url("neige.png");
51
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
background-repeat:repeat;
background-repeat:repeat-x;
background-repeat
background-repeat:repeat-y;
background-repeat:no-repeat;
background-size:cover;
background-size
filter: blur(5px);
filter:invert(75%);
52
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
border-collapse: separate;
border-color: red;
border-color
border-color: red yellow blue
green;
border-radius: 30px;
border-width: thick;
thick:large thin:mince
medium : moyen
border-width
border-width: 0 4px 8px 12px;
(par défaut)
Définit la façon dont
un élément est position: fixed;
positionné dans un
document. position: relative;
Les propriétés top: 20px; left: 40px;
✓ top, (Décalé, par rapport à lui-même)
53
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
/* vertical | horizontal */
Ou bien :
✓ padding-right
✓ padding-top padding: 10px 50px 20px;
✓ padding-bottom
✓ padding-left /* haut | horizontal | bas */
Margin
Ou bien : margin: 10px 50px 20px 0;
✓ margin-right
✓ margin -top /* haut | droit | bas |gauche */
✓ margin -bottom Meme propriété que padding
✓ margin -left
text-shadow: red 1px 0 10px;
text-shadow /* color | offset-x | offset-y | blur-
radius */
54
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
overflow: hidden;
overflow: scroll;
overflow: auto;
list-style-type: circle;
list-style-type:lower-alpha;
list-style-position: inside;
list-style-position
list-style-position: outside;
a:hover (Quand la
souris est sur le lien)
a
a:active (au moment
{color: red;}
du clic)
a:hover
a:visited (après avoir
{color: green;}
visité le lien)
a:link (lien non visité)
: rotate(45deg);
Transform:translate(-50%,-50%)
55
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
HTML
<img src=" chat.jpg" id="chat" />
CSS
Transition #chat
{width: 250px;
height: 250px;
border-radius: 20% 0% 20% 0%;
transition-property: all;
transition-duration: 2s;
transition-delay: 1s;
}
#chat:hover
{border-radius: 0% 20% 0% 20%;
opacity: 0.2;}
56
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Onsubmit :
Définition et utilisation :
L'événement onsubmit se produit lorsqu'un formulaire est soumis.
Exemple :
Saisir le code HYML suivant :
<body>
<h1>Evénements HTML </h1>
<h2> L'événement onsubmit </h2>
<p> Lorsque vous soumettez le formulaire, une fonction est déclenchée qui alerte du
texte.</p>
<form action="/action_page.php" onsubmit="myFunction()">
Entrer votre nom : <input type="text" name="fname">
<input type="submit" value="Envoyer">
</form>
<script>
onfocus :
function myFunction()
{ alert("Le formulaire a été envoyé"); }
</script>
</body>
onload :
Définition et utilisation :
L'événement onload se produit lorsqu'un objet a été chargé.
57
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
onload est le plus souvent utilisé dans l'élément <body> pour exécuter un script une
fois qu'une page Web a complètement chargé tout le contenu (y compris les images, les
fichiers de script, les fichiers CSS, etc.).
L'événement onload peut être utilisé pour vérifier le type et la version du navigateur du
visiteur, et charger la version appropriée de la page Web en fonction des informations.
L'événement onload peut également être utilisé pour traiter les cookies (voir "Plus
d'exemples" ci-dessous).
Exemple :
Saisir le code HYML suivant :
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction()
{ alert("Page chargée"); }
</script>
</body>
Onchange :
Définition et utilisation :
L'événement onchange se produit lorsque la valeur d'un élément a été modifiée.
Pour les boutons radio et les cases à cocher, l'événement onchange se produit lorsque
l'état coché a été modifié.
Conseil : cet événement est similaire à l'événement oninput. La différence est que
l'événement oninput se produit immédiatement après la modification de la valeur d'un
élément, tandis que onchange se produit lorsque l'élément perd le focus, après que le
contenu a été modifié. L'autre différence est que l'événement onchange fonctionne
également sur les éléments <select>.
Exemple 1 :
Saisir le code HYML suivant :
<body>
<p> Modifiez le texte dans le champ de saisie, puis cliquez en dehors du champ
pour déclencher l'événement onchange.</p>
Entrer un texte : <input type="text" name="txt" value="Hello"
onchange="myFunction(this.value)">
<script>
function myFunction(val) {
alert("La valeur d'entrée a changé. La nouvelle valeur est : " + val);
}
</script>
</body>
58
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Exemple 2 :
Saisir le code HYML suivant :
<body>
<p> Sélectionnez une nouvelle voiture dans la liste.</p>
<select id="mySelect" onchange="myFunction()">
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Volvo">Volvo</option>
</select>
<p> Lorsque vous sélectionnez une nouvelle voiture, une fonction est déclenchée qui
affiche la valeur de la voiture sélectionnée.</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
onblur :
Définition et utilisation :
✓ L'événement onblur se produit lorsqu'un élément perd le focus.
✓ L'événement onblur est souvent utilisé sur les champs de saisie.
✓ L'événement onblur est souvent utilisé avec la validation de formulaire (lorsque
l'utilisateur quitte un champ de formulaire).
Exemple :
Saisir le code HYML suivant :
<body>
<h1>Evénements HTML </h1>
<h2> L'événement blur </h2>
Entrer votre nom : <input type="text" id="fname" onblur="myFunction()">
<p> Lorsque vous quittez le champ de saisie, une fonction est déclenchée qui
transforme le texte saisi en majuscule.</p>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
onfocus
</script> :
</body>
59
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
60
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
61
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Exemple 2 :
La méthode getDay() renvoie le jour de la semaine sous la forme d'un nombre compris
entre 0 et 6.
Si aujourd'hui n'est ni samedi (6) ni dimanche (0), écrivez un message par défaut :
<body>
<h2>JavaScript switch</h2>
<p id="demo"></p>
<script>
let text;
switch (new Date().getDay()) {
case 6:
text = " Aujourd'hui c'est samedi ";
break;
case 0:
text = " Aujourd'hui c’est dimanche ";
break;
default:
text = "Dans l'attente du week-end ";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
62
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Exemple :
<body> Dans l'exemple ci-contre, vous
<h2> la boucle JavaScript pour </h2> pouvez lire :
<p id="demo"></p> L'expression 1 : définit une
<script> variable avant le début de la
let text = ""; boucle (soit i = 0).
for (let i = 0; i < 5; i++) L'expression 2 : définit la
{ condition d'exécution de la
text += " Le nombre est " + i + "<br>"; boucle (i doit être inférieur à 5).
}
L'expression 3 : augmente
document.getElementById("demo").innerHTML = text; une valeur (i++) chaque fois
</script> que le bloc de code dans la
</body> boucle a été exécuté.
<body>
<h2> Boucle JavaScript tant que </h2>
<p id="demo"></p>
<script>
let text = "";
let i = 0;
while (i < 10) {
text += "<br> Le nombre est " + i;
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
63
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Syntaxe :
do {
// bloc de code à exécuter
}
while (condition)
Exemple :
<body>
<h2>La boucle JavaScript Do While </h2>
<p id="demo"></p>
<script>
let text = ""
let i = 0;
do {
text += "<br> Le nombre est " " + i;
i++;
}
while (i < 10);
document.getElementById("demo").innerHTML = text;
</script>
</body>
Les fonctions :
Définition et utilisation :
Une fonction JavaScript est un bloc de code conçu pour effectuer une tâche particulière.
Une fonction JavaScript est exécutée lorsque "quelque chose" l'invoque (l'appelle).
Exemple : Fonction pour calculer le produit de p1 et p2
<body>
<h2> Fonctions JavaScript </h2>
<p> Cet exemple appelle une fonction qui effectue un calcul et renvoie le résultat :</p>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
64
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
65
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Pourquoi Fonctions ?
Vous pouvez réutiliser le code : définissez le code une fois et réutilisez-le plusieurs fois.
Vous pouvez utiliser le même code plusieurs fois avec des arguments différents, pour
produire des résultats différents.
Fonctions utilisées comme valeurs variables :
Les fonctions peuvent être utilisées de la même manière que vous utilisez des variables,
dans tous les types de formules, d'affectations et de calculs.
Variables locales :
Les variables déclarées dans une fonction JavaScript deviennent LOCALES à la
fonction.
Les variables locales ne sont accessibles qu'à partir de la fonction.
66
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
2) Créer un fichier « TP1.js » contenant le script ci-dessous, puis assurer la liaison avec
le fichier HTML :
function valider()
{ var zoneSaisie = document.getElementById("donnée").value ;
alert("La zone de saisie contient : " + zoneSaisie) ;
}
67
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
TP 3 :
68
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Module 2 :
Créer un site web dynamique
1. Reconnaître le principe de fonctionnement d’un site web
dynamique.
Rappel d’un site web statique :
Une page Web statique est une page Web dont la machine (le serveur Web, l’ordinateur)
sur laquelle celle-ci est stockée, ne fait aucun effort pour la créer lorsque celle-ci est
demandée par la machine qui veut l’affichée à travers son navigateur Web.
On dit alors que le serveur reste statique pour la création de la page Internet (il ne fait
rien pour créer la page Web).
Les pages statiques impliquent donc que celles-ci doivent déjà exister sur
la machine (le serveur Web, l’ordinateur), avant que l’on en face la demande d’affichage.
Ces pages web dites statiques en générale sont créées par un Webmaster. La page Web
statique a aussi une autre particularité, l’intégralité du code qui la compose va être
interprété, compris directement par le navigateur, on dit que le code de la page
programmée est équivalent au code de la page affichée (page programmée = page
affichée).
Les pages dites statiques portent en générale l’extension .html ou .htm.
Rmq : les sites Internet fait intégralement de pages web statiques sont de nos jours
très rares dû à l’évolution et des besoins des utilisateurs et du Web.
69
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Rmq : Pour comprendre facilement pourquoi à ton besoin de créer des pages
Web seulement lors de leur demande (leur appelle), il est simple de le comprendre avec
la demande d’afficher une page d’un produit telle une voiture en fonction d’un choix
d’options sélectionnés telles que la couleur, le choix du moteur, … On dit que
l’internaute, en fonction des « paramètres » (sélections réalisées, …) fait générer au
serveur Web la page Web.
Rappel important : Les pages dynamiques sont dites pages sécurisées car on ne peut
jamais (à partir du navigateur) voir le(s) code(s) de construction de la page Internet,
mais seulement le code source de la page Internet générée (code source visible
depuis le navigateur).
70
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
2. Environnement de travail :
Pour créer un site web dynamique on a besoin des logicielles qui permettent la gestion
des pages web, les base de données et la relation client serveur. Pour notre cours on va
utiliser le logiciel XAMPP-Lite.
Apache : il permet au serveur de distribuer des pages
web, il ne connait que le HTML.
PHP : PHP est comme un plugin d’Apache. Il a besoin
d’Apache pour fonctionner, pour travailler sur des
pages PHP. Apache + PHP = serveur PHP.
MySQL : Logiciel pour gérer les bases de données.
PHPmyAdmin : il permet de gérer les bases de
données.
71
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
72
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
isset (nom_variable) — Détermine si une variable est déclarée et est différente de null.
Exemple :
$var = '';
if (isset($var)) // Ceci est vrai
settype (nom_variable, type) — Affecte un type à une variable.
Type peut être : ("boolean" ou "bool", "integer" ou "int", "float" ou "double", "string",
"array", "null")
Exemple :
$foo = "5bar"; // chaîne
$bar = true; // booléen
settype($foo, "integer"); // $foo vaut maintenant 5 (integer)
settype($bar, "string"); // $bar vaut maintenant "1" (string)
Gettype (nom_variable) — Retourne le type de la variable
Exemple :
$foo = "5bar"; // chaîne
echo gettype($foo ); // string
Les opérateurs arithmétiques :
Les opérateurs de calcul permettent de modifier mathématiquement la valeur d'une
variable.
Exemple :
Opérateur Dénomination Effet Exemple Résultat (x=7)
+ Addition Ajoute deux valeurs $x + 3 10
- Soustraction Soustrait deux valeurs $x - 3 4
* Multiplication Multiplie deux valeurs $x * 3 21
/ Division Divise deux valeurs $x / 3 2.333333
Affecte une valeur à une
= Affectation $x = 3 Met 3 dans $x
variable
% Modulo Reste de la division entière $x % 3 1
73
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Les entrées/sorties :
✓ Pour entrer des données à une page php vous pouvez :
o Récupérer les données depuis un formulaire on utilisant les tableaux prédéfinis
$_GET['nom_objet'] ou $_POST['nom_objet'] suivant la méthode utilise lors de la
déclaration du formulaire.
o Récupérer les données à travers les paramètres envoyés vers la première page
http://adr_url/nom_fichier.php?var1=val1 & var2=val2...
✓ Pour afficher le contenu d'une variable ou un message, on peut utiliser la méthode
"echo", ou utiliser un objet d'un formulaire :
<input type= "text" name="np" value="< ?php echo($np) ; ?>">
Les structures de contrôle :
Structures conditionnelles :
if … else switch
if (condition) switch (variable)
{ code à exécuter ; } { case valeur1 : liste d’instruction ; break ;
elseif (condition) case valeur2 : liste d’instruction ; break ;
{ code à exécuter ; } ----------------
else case valeurn : liste d’instruction ; break ;
{ code à exécuter ; } default : liste d’instruction ; break ;
}
Exemple : Exemple :
<?php <?php
$t = date("H"); $favcolor = "red";
if ($t < "10") switch ($favcolor) {
case "red":
{echo " bonne matinée!";} echo "Your favorite color is red!"; break;
elseif ($t < "20") case "blue":
{echo "bonjour!";} echo "Your favorite color is blue!";break;
case "green":
else
echo "Your favorite color is green!";break;
{echo "bonne nuit!";} default:
?> echo "Your favorite color is neither red,
blue, nor green!";
}
?>
74
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Structures itératives :
For
for (init compteur ; condition compteur ; incrémenter compteur)
{
Liste d'instructions
}
Exemple :
<?php
for ($x = 0; $x <= 100; $x+=10)
{ echo "The number is: $x <br>"; }
?>
While Do … while
while (condition est vrai) do
{ {
Liste d'instructions Liste d'instructions
} } while (condition est vrai)
Exemple : Exemple :
<?php <?php
$x = 1; $x = 1;
while($x <= 5) { do {
echo "The number is: $x <br>"; echo "The number is: $x <br>";
$x++; $x++;
} } while ($x <= 5);
?> ?>
75
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
echo(rand(10,100)); // retourne 67
?>
76
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
<?php
echo strpos("I love php, I love php too!","php"); // retourne 7
?>
77
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
<?php
$rest = substr("abcdef", 0, -1); // retourne "abcde"
$rest = substr("abcdef", 2, -1); // retourne "cde"
$rest = substr("abcdef", 4, -4); // retourne ""
$rest = substr("abcdef", -3, -1); // retourne "de"
?>
78
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
<?php
/* Une chaîne qui ne contient pas de délimiteur va retourner un tableau contenant qu'un
seul élément représentant la chaîne originale */
$input1 = "hello";
$input2 = "hello,there";
$input3 = ',';
var_dump( explode( ',', $input1 ) ); //[0] => string(5) "hello"
var_dump( explode( ',', $input2 ) ); //[0] => string(5) "hello"
[1] => string(5) "there"
var_dump( explode( ',', $input3 ) ); //[0] => string(0) ""
[1] => string(0) ""
?>
Les fonctions sur type date :
date() : récupère la date système sous forme de chaine.
Exemple :
<?php
// Aujourd'hui, le 10 Mars 2001, 5:16:18 pm,
$today = date("l"); // Monday
$today = date("F j, Y, g:i a"); // March 10, 2001, 5:16 pm
$today = date("m.d.y"); // 03.10.01
$today = date("j, n, Y"); // 10, 3, 2001
$today = date("Ymd"); // 20010310
?>
Time() : retourne l’heure système en seconde depuis (1er janvier 1970 00:00:00 GMT).
Exemple :
<?php
echo 'Aujourd'hui : '. time(); // Aujourd'hui : 1660338149
?>
strtotime ("date") : analyse une date/heure textuelle en anglais en un horodatage Unix
(le nombre de secondes depuis le 1er janvier 1970 00:00:00 GMT).
Exemple :
<?php
echo (strtotime("now") . "<br>"); //1589972726
echo (strtotime("3 October 2005") . "<br>"); //1128297600
echo (strtotime("+5 hours") . "<br>"); //1589990726
echo (strtotime("+1 week") . "<br>"); //1590577526
echo (strtotime("+1 week 3 days 7 hours 5 seconds") . "<br>");//1590861931
echo (strtotime("next Monday") . "<br>"); //1590364800
echo (strtotime("last Sunday")); //1589673600
?>
4. PHP et MySQL :
Connexion :
Connexion au serveur et à la base :
<?php
$mysqli = new mysqli("localhost", "user",79"password", "nom_base");
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
Exemple :
<?php
$conx = new mysqli ("localhost", "root", "", "BD123456");
...
?>
<?php
$nom_requete = " requête SQL" ;
?>
Exemple :
<?php
$req = "SELECT * FROM client WHERE id = 1" ;
?>
<?php
…
$nom_resultat = $mysqli -> query($nom_requete) ;
?>
Exemple :
<?php
…
$res = $conx -> query($req) ;
?>
80
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
<?php
$mysqli = new mysqli("localhost", "root", "password", "BD");
$result = $mysqli -> query ("SELECT Code, Name FROM Country ");
$nbre = $result->num_rows;
echo ("Il y a " . $nbre . " lignes. " );
...
?>
<?php
$mysqli = new mysqli("localhost", "root", "password", "BD");
$query = "SELECT Name, CountryCode FROM City ORDER BY ID ";
$result = $mysqli->query($query);
/* Tableau numérique */
$tab = $result->fetch_array(MYSQLI_NUM);
echo("<br/>", $tab [0], $tab[1]);
/* Tableau associatif */
$tab = $result->fetch_array(MYSQLI_ASSOC);
echo("<br/>", $tab["Name"], $tab["CountryCode"]);
/* Tableau associatif et numérique */
$tab = $result->fetch_array() ;
echo("<br/>", $tab[0], $tab["CountryCode"]);
/* Tableau associatif et numérique utiliser boucle while ; tant qu’il y a
des résultat ou de lignes on affiche*/
while ($tab = $result->fetch_array()){
echo("<br/>", $tab[0], $tab["CountryCode"]);
}
?>
- fetch_row( ): Retourne une ligne de résultat MySQL sous la forme d'un tableau.
81
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
<?php
$mysqli = new mysqli("localhost", "root", "password", "BD");
$query = "SELECT Name, CountryCode FROM City ORDER BY ID DESC";
$result = $mysqli->query($query);
/* Récupère un tableau d'objets */
while ($row = $result->fetch_row())
{ echo($row[0]. "<br>". $row[1]); }
?>
Fermer la Connexion :
<?php
…
$mysqli -> close() ;
?>
Exemple :
<?php
…
$conx -> close() ;
?>
82
Manuel de systèmes & technologies de l’informatique
4ème Sciences de l’informatique Prof : H’MIDA Med
83