Cours de développement web

1
Chapitre 1 : Introduction au développement web 1

1.1. Qu'est-ce que le développement web ?
Le développement Web est le travail nécessaire au développement d'un site

Web pour Internet (World Wide Web ) ou un intranet (un réseau privé). Le
développement Web peut aller du développement d'une simple page
statique unique de texte brut à des applications Web complexes , des
entreprises électroniques et des services de réseaux sociaux .
Une liste plus complète de tâches auxquelles le développement Web fait
généralement référence peut inclure l'ingénierie Web , la conception Web , le
développement de contenu Web , la liaison client, les scripts côté client / côté
serveur , la configuration de la sécurité du serveur Web et du réseau et le
développement du commerce électronique .
Parmi les professionnels du Web, le « développement Web » fait généralement
référence aux principaux aspects non liés à la conception de la création de
sites Web : l'écriture du balisage et le codage .
Le développement Web peut utiliser des systèmes de gestion de contenu (CMS)
pour rendre les modifications de contenu plus faciles et disponibles avec des
compétences techniques de base.
1.2. Les différentes technologies du web (HTML, CSS, JavaScript, etc.)

Les principales technologies utilisées dans le développement web sont :
1. HTML (Hypertext Markup Language) :
 Langage de balisage pour structurer le contenu des pages web.
 Définit les éléments de base comme les titres, paragraphes, liens,
images, etc.
 Fournit une sémantique pour le contenu.
La première page d’un document HTML a pour nom (index.html) et l’extension

d’un fichier html est .html ou .htm
2. CSS (Cascading Style Sheets) :
 Langage de feuilles de style pour contrôler la présentation et la mise en

forme des pages web.
 Permet de définir la typographie, les couleurs, les layouts, etc.
 Offre de puissantes fonctionnalités comme les media queries pour le
responsive design.
L’extension d’une feuille de style Css est .css
Ir. Laurent KOMPANI ESOKELI +243 85 36 35 877 – 81 490 57 52

2
3. JavaScript :
2
 Langage de programmation côté client pour ajouter de l'interactivité aux
pages web.
 Permet de manipuler le DOM (Document Object Model), de gérer les
événements, d'effectuer des requêtes AJAX, etc.
 Utilisé avec des frameworks et bibliothèques comme React, Angular,
Vue.js.
L’extension d’un fichier JavaScript est .js

4. Serveurs web :
 Apache, Nginx, Microsoft IIS, etc.
 Responsables de l'hébergement et de la distribution des pages web.
 Gèrent les requêtes http ou HTTPS et le déploiement des applications
web.
5. Langages côté serveur :

 PHP, Python, Ruby, Java, Node.js, etc.
 Utilisés pour le développement back-end des applications web.
 Permettent de générer dynamiquement le contenu des pages,
d'interagir avec les bases de données, etc.
6. Bases de données :
 MySQL, PostgreSQL, MongoDB, Redis, etc.
 Stockent et gèrent les données utilisées par les applications web.
 Accessibles via des langages côté serveur (SQL).
Ces technologies, combinées de différentes manières, permettent de créer des

sites web et des applications web de plus en plus riches et interactives.
1.3. Environnement de développement web (éditeurs de code,

navigateurs, serveurs web)
L'environnement de développement web fait référence à l'ensemble des outils

et logiciels nécessaires pour créer des sites web. Cela inclut des éditeurs de
code, des navigateurs web, des frameworks, des gestionnaires de versions, etc.
1. Éditeurs de code :
Les éditeurs de code sont des logiciels utilisés par les développeurs pour écrire,
modifier et organiser du code source. Ils offrent souvent des fonctionnalités
telles que la coloration syntaxique, l'indentation automatique, la complétion
automatique, la recherche et le remplacement, et bien d'autres encore.

3
Il existe de nombreux éditeurs de code populaires, tels que Visual Studio Code,
3
Sublime Text, Atom, Notepad++, et bien d'autres encore.
Ils Offrent des fonctionnalités avancées comme la coloration syntaxique,

l'auto-complétion, la gestion de projet et permettent d'éditer efficacement le
code HTML, CSS, JavaScript, etc.
2. Navigateurs web :
La fonction principale d'un navigateur web est de permettre la consultation

d'informations disponibles (« ressource » dans la terminologie du Web) sur
le World Wide Web. Les principales étapes de la consultation d'une ressource
sont les suivantes :
 L'utilisateur donne au navigateur web l'adresse web de la ressource à

consulter. Il existe trois manières de donner une adresse web :
o taper soi-même l'adresse web dans la barre d'adresse du
navigateur ;
o choisir une ressource dans la liste des favoris (ou marque-
pages ou bookmarks), sachant qu'à chaque favori est associée une
adresse web ;
o suivre un hyperlien, sachant qu'à chaque hyperlien est associée
une adresse web.
 Le navigateur se connecte au serveur web hébergeant la ressource visée
et la télécharge. Le protocole de communication généralement utilisé
est HTTP.
 Le moteur de rendu du navigateur traite cette ressource, télécharge les
éventuelles ressources associées et affiche le résultat sur l'écran de
l'utilisateur.
Il existe de nombreux navigateurs web pour toutes sortes de matériels

(ordinateur personnel, tablette tactile, téléphones mobiles, etc.) et pour
différents systèmes d'exploitation (GNU/Linux, Windows, Mac
OS, iOS et Android).
A l’heure actuelle, les plus utilisés sont Google Chrome, Mozilla Firefox, Internet
Explorer/Microsoft Edge, Safari, Opera.

4
CHAPITRE 2 : HTML et structure des pages web 4
Le langage HTML (HyperText Markup Language) est le langage standard pour

créer des pages web. Il utilise des balises pour définir la structure et le contenu
d'une page web.
2.1. Notion des balises HTML
Les balises HTML sont des paires de marqueurs qui définissent des éléments
dans un document HTML. Une balise d'ouverture est généralement composée
du nom de l'élément suivi d'une accolade ouvrante (<), tandis qu'une balise de
fermeture est composée du nom de l'élément suivi d'une barre oblique (/) et
d'une accolade fermante (>).
Il existe deux types de balises HTML :
 Balise paire
Elle fonctionne par deux, une balise ouvrante et une balise fermante. La balise
fermante se distingue par l'ajout du caractère "/". Une balise de ce type agit
sur le texte qu'elle encadre.
Exemple :
<p>Salut à tous </p>
<h1>développement web</h1>
…
 Contrairement aux balises paires, il existe aussi des balises simples,
appelées balises orphelines, qui n'ont pas de balise de fermeture,
comme <br> pour sauter une ligne ou <img> pour insérer une image.
 Commentaire HTML
Les commentaires HTML sont des notes ou des explications qui ne s'affichent
pas dans le rendu final de la page web.
Syntaxe : 

5
 Structure de base d'un document HTML

5
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Ma page web</title>
</head>
<body>
Contenues de la page web
</body>
</html>
Un document HTML de base commence par la balise <!DOCTYPE html>, qui

indique au navigateur qu'il s'agit d'un document HTML. Ensuite, il y a la balise
<html>, qui englobe l'ensemble du contenu de la page web. À l'intérieur de la
balise <html>, on trouve deux sections principales:
 L'en-tête (<head>): Cette section contient des informations

métadonnées sur la page web, telles que le titre, l'encodage des
caractères et les liens vers des feuilles de style externes.
 <meta charset="utf-8"> Cet élément définit le jeu de caractères utilisé

pour le document, ici UTF-8 (qui inclut la plupart des caractères pour
un grand nombre de langues écrites). Ce jeu de caractères permettra de
gérer n'importe quel contenu textuel placé dans le document. Inclure
cette information ne coûte rien et permet d'éviter des problèmes
d'encodage par la suite.
 <meta name="viewport" content="width=device-width">

Cet élément viewport permet que la page soit affichée avec la bonne
largeur par rapport à la zone d'affichage, empêchant les navigateurs
sur mobile d'afficher la page plus largement que la zone d'affichage
avant de la réduire.
 <title></title> définit le titre de la page, qui apparaîtra dans l'onglet

sur lequel la page est chargée. Il sert aussi à décrire la page lorsqu'on
l'ajoute aux favoris ou qu'elle est listée dans les résultats d'un moteur
de recherche.
 Le corps (<body>): Cette section contient le contenu visible de la page

web, tel que le texte, les images, les liens et les formulaires.

6
6
 Balises de structure du contenu web
Les balises de structure du contenu web sont des éléments HTML utilisés pour
organiser et hiérarchiser le contenu d'une page web. Elles permettent de
donner une structure sémantique au document, ce qui facilite la
compréhension et le référencement par les moteurs de recherche.
Les principales balises de structure du contenu web :
1. <header> : Définit l'en-tête de la page ou d'une section.

2. <nav> : Définit un ensemble de liens de navigation.
3. <main> : Définit le contenu principal de la page.
4. <article> : Définit un article indépendant.
5. <section> : Définit une section de contenu.
6. <div> : définit les divisions logiques dans le contenu d'une page web
7. <aside> : Définit un contenu secondaire, comme une sidebar.
8. <footer> : Définit le pied de page de la page ou d'une section.

7
 Baliser du texte
7
 Titres
Les éléments de titre permettent d'indiquer les parties du contenu qui sont
des titres ou des sous-titres. De la même façon qu'un livre peut avoir un titre
principal, des titres de chapitre, des sous-titres, un document HTML peut en
avoir également. HTML contient 6 niveaux de titre <h1> - <h6> :
<h1>Mon titre principal</h1>

<h2>Mon titre de deuxième niveau</h2>
<h3>Mon sous-titre</h3>
<h4>Mon sous-sous-titre</h4>
<h5>Mon sous-sous-sous-titre</h5>
<h6>Le plus petit titre</h6>
 Paragraphes
Les éléments <p> forment des paragraphes de texte. Cet élément est souvent
utilisé pour baliser du texte normal du contenu d'une page :
<p>Voici un paragraphe simple</p>
Listes
Une bonne partie du contenu web prend la forme de listes. HTML possède des
éléments dédiés. Baliser une liste se fait toujours avec au moins deux
éléments. Les types de liste les plus fréquemment utilisés sont les listes
ordonnées et les listes non-ordonnées :
 Les listes non-ordonnées
Utilisées pour les listes où l'ordre des éléments n'a pas d'importance, comme
une liste de courses. Pour celles-ci, on utilise un élément <ul>.
<p>Liste des institutions d’enseignements supérieurs et

universitaire de la ville de Kisangani</p>
<ul>
<li>UNIKIS</li>
<li>ISIG</li>
<li>ULIKIS</li>
</ul>
 UNIKIS
 ISIG
 ULIKIS

8
 Les listes ordonnées

8
Utilisées pour les listes où l'ordre des éléments est important, comme une
recette de cuisine. Pour celles-ci, on utilise un élément <ol>.
<p>Liste des institutions d’enseignements supérieurs et

universitaire de la ville de Kisangani</p>
<ol>
<li>UNIKIS</li>
<li>ISIG</li>
<li>ULIKIS</li>
</ol>
Résultat :
1. UNIKIS
2. ISIG
3. ULIKIS
Chaque élément d'une liste est placé dans un élément <li>.
Liens
Un lien hypertexte permet, en cliquant dessus, d'atteindre un autre endroit de

la page, une autre page ou un autre site. Il a une source (ou origine) et une
destination (ou cible). L'activation de l'élément source d'un hyperlien permet
de passer automatiquement à sa destination.
Un élément <a> (« a » correspondant à « ancre »). Pour placer un lien dans un

paragraphe et l’attribut « href » correspondant au chemin de l’ouverture de la
page cible.
Syntaxe :
<a href=’nom de la page cible.html ou .php’> texte de

représentation </a>
<a href=’dossier de la page/nom de la page cible.html ou

.php’> texte de représentation </a>
<a href=’../dossier de la page/nom de la page cible.html ou

.php’> texte de représentation </a>
Exemple :
<a href="index.html">Acceuil</a>
<a href="contact.html">Contact</a>
<a href="historique.php">Page historique</a>

9
<a href="pages/photo.htm">Gallérie photo</a> <a

href="pages/chat.htm">Chat</a> 9
<a href="../pages/photo.htm">Gallérie photo</a>
L’enseignement en RDC est<a href="article.html">Lire plus</a>
LES TABLEAUX HTML
Les tableaux HTML sont utilisés pour afficher des données sous forme de
grilles composées de lignes et de colonnes. Les balises HTML de base :
<table> définit le début d'un tableau.

<thead> est utilisée pour définir l'en-tête du tableau, qui
contient les titres des colonnes.
<tbody> contient les données du tableau, avec chaque ligne
représentée par la balise <tr> (table row).
<tr>), les données sont structurées avec
les balises <td> (table data cell) pour chaque cellule.
Exemple : Tableau Simple

<table>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th>Colonne 3</th>
</tr>
<tr>
<td>Ligne 1, Cellule 1</td>
</tr>
<tr>
</tr>
</table>
Exemple : Tableau Complexe

<table>
<thead>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th>Colonne 3</th>
</tr>

10
</thead>
<tbody> 10
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
Les formulaires HTML
Les formulaires HTML sont des éléments clés pour permettre aux utilisateurs
d'interagir avec une page web et de soumettre des informations. les principales
notions liées aux formulaires HTML :
1. Balise <form> :
 C'est le conteneur principal du formulaire.
 Il définit les attributs comme action (URL de soumission)
et method (GET ou POST).
2. Champs de saisie :
 <input> : contient différent type de champ tels que :
<input type=’text’>
<input type=’number’>
<input type=’date’>
<input type=’color’>
<input type=’file’>
<input type=’password’>…
 <textarea> : Zone de texte multiligne.

 <select> et <option> : Liste déroulante.
 <checkbox> et <radio> : Cases à cocher et boutons radio.
3. Boutons d'action :
 <button type="submit">Envoyer</button> : Bouton pour
soumettre le formulaire.
 <button type="reset">Effacer</button> : Bouton pour

réinitialiser le formulaire.
4. Attributs des champs :

11
 name : Identifie le champ lors de la soumission.

11
 value : Valeur initiale du champ.
 placeholder : Texte d'aide affiché dans le champ.
 required : Indique que le champ doit être rempli.
 pattern : Expression régulière pour valider le contenu.
 min, max, step : Validation des valeurs numériques.
5. Validation côté client :

 Les attributs HTML comme required, pattern, etc. permettent
une validation de base.
 JavaScript peut être utilisé pour une validation plus avancée.
6. Soumission du formulaire :
 Lorsque l'utilisateur clique sur le bouton "Envoyer", les données
sont envoyées au serveur.
 Le serveur peut alors les traiter, les stocker et renvoyer une
réponse à l'utilisateur.
Exemple : une page Inscription pour permettre aux clients de s’inscrire en

ligne
Remarque : Les formulaires HTML sont essentiels pour permettre aux

utilisateurs de saisir et de soumettre des informations sur une page web. Leur
conception et leur implémentation sont des aspects importants du
développement web.
LES MEDIAS HTML
Les médias en HTML font référence aux éléments et aux attributs utilisés pour
intégrer et gérer différents types de contenu multimédia dans les pages web.
Voici une vue d'ensemble des principaux éléments et attributs HTML utilisés
pour intégrer des médias :
1. Images :
Pour afficher des images sur une page web, on utilise l'élément <img> avec
l'attribut src pour spécifier l'URL de l'image.
Exemple :
<img src="chemin_vers_image.jpg" alt="Description de l'image">
 src : Spécifie l'URL de l'image à afficher.

 alt : Fournit un texte alternatif pour l'image, utilisé par les lecteurs
d'écran et affiché si l'image ne peut pas être chargée.

12
2. Vidéos :
12
Pour intégrer des vidéos sur une page web, on utilise l'élément <video> avec
des balises de support pour différents formats vidéo et des contrôles pour
l'utilisateur.
Exemple :
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Votre navigateur ne supporte pas la vidéo.
</video>
 Controls : Ajoute des contrôles de lecture vidéo (lecture, pause, volume,

etc.).
 <source> : Définit les différentes sources vidéo pour les navigateurs qui
prennent en charge différents formats.
3. Audio :
Pour intégrer des fichiers audio sur une page web, on utilise l'élément <audio>
avec des balises de support pour différents formats audio et des contrôles
similaires à ceux des vidéos.
Exemple :
<audio controls>
<source src="audio.mp3" type="audio/mp3">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
 controls : Ajoute des contrôles de lecture audio.

 <source> : Définit les différentes sources audio pour les navigateurs qui
prennent en charge différents formats.
4. Balise <iframe> :
L'élément <iframe> permet d'intégrer des contenus externes, tels que des
vidéos YouTube, des cartes Google Maps, ou d'autres pages web.
Exemple d'utilisation pour une vidéo YouTube :

13
<iframe width="560" height="315"

13
src="https://www.youtube.com/embed/video_id" frameborder="0"
allowfullscreen></iframe>
 src : Spécifie l'URL de la ressource à intégrer.

 width et height : Définissent la largeur et la hauteur de l'iframe.
 allowfullscreen : Autorise l'iframe à passer en mode plein écran.
5. Balise <canvas> :
La balise <canvas> permet de dessiner des graphiques, des animations, ou

d'autres types de rendus visuels sur une page web à l'aide de JavaScript.
Exemple basique :
<canvas id="myCanvas" width="200" height="100"></canvas>
 width et height : Définissent la largeur et la hauteur du canvas en

pixels.
6. Balise <svg> :
La balise <svg> permet de dessiner des graphiques vectoriels et des images

vectorielles. Elle est souvent utilisée pour créer des graphiques et des icônes.
Exemple simple :
<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3"
fill="red" /></svg>
 Les éléments <circle>, <rect>, <line>, etc., sont utilisés pour dessiner
des formes dans un <svg>.

14
CHAPITRE 3 : CSS et mise en forme des pages web

14
Le CSS (Cascading Style Sheets) est un langage de feuilles de style utilisé pour
décrire la présentation visuelle d'un document HTML (ou XML). Il permet de
contrôler la mise en forme, le style et la disposition des éléments sur une page
web.
Principes de base du CSS :
1. Séparation des préoccupations
Le CSS permet de séparer le contenu (HTML) de la présentation (styles). Cette

séparation offre plusieurs avantages :
 Maintenabilité : Les modifications de style peuvent être apportées sans

altérer le contenu HTML, facilitant ainsi la gestion et la mise à jour du
site web.
 Accessibilité : Les technologies d'assistance peuvent mieux interpréter

le contenu structuré en HTML lorsqu'il est séparé des informations de
style.
2. Syntaxe de base
CSS utilise des règles pour appliquer des styles à des éléments HTML. Une
règle CSS est composée de deux parties principales :
 Sélecteur : Il cible un élément HTML auquel vous souhaitez appliquer le

style. Par exemple, `h1`, `.classe`, `#id`.
 Déclaration : Elle définit les propriétés de style à appliquer à l'élément

ciblé. Chaque déclaration est constituée d'une propriété et d'une valeur.
Par exemple, `color: blue;`, `font-size: 16px;`.
Exemple simple :
/* Style pour tous les éléments h1 */

h1 {
color: navy;
font-size: 24px;
}
/* Style pour les éléments avec la classe "classe-exemple" */

.classe-exemple {
background-color: #f0f0f0;
padding: 10px;

15
}
15
/* Style pour l'élément avec l'id "id-exemple" */
#id-exemple {
border: 1px solid #ccc;
margin-top: 20px;
}
3. Méthodes d'application du CSS
Le CSS peut être appliqué à une page HTML de plusieurs manières :
 Fichier externe : Le CSS est écrit dans un fichier séparé avec une
extension `.css`, puis lié à la page HTML à l'aide de la balise `<link>`
dans la section `<head>` :
<link rel="stylesheet" href="styles.css">
 Style interne : Le CSS est inclus directement dans la balise `<style>`

dans la section `<head>` du document HTML :
Syntaxe :
<style>
/* CSS ici */
</style>
 Style en ligne : Le style est appliqué directement à un élément HTML à

l'aide de l'attribut `style` :
<h1 style="color: red; font-size: 28px;">Titre rouge</h1>
4. Sélecteurs CSS
Les sélecteurs CSS permettent de cibler précisément les éléments à styler.

Quelques types de sélecteurs courants :
 Sélecteurs de type : Cible tous les éléments d'un type spécifique (`h1`,
`p`, `div`, etc.).
 Sélecteurs de classe : Cible tous les éléments ayant une classe

spécifique (`.ma-classe`).
 Sélecteurs d'id : Cible un élément avec un identifiant spécifique

(`#mon-id`).

16
16
 Sélecteurs d'attribut : Cible les éléments ayant un attribut spécifique
(`[type='text']`).
5. Propriétés et valeurs CSS courantes
Il existe des centaines de propriétés CSS pour contrôler tous les aspects de la
mise en page et de la présentation d'une page web. Voici quelques exemples
courants :
 Color : Définit la couleur du texte.

 font-size : Définit la taille de la police.
 background-color : Définit la couleur de fond.
 margin`, `padding` : Contrôle les marges intérieures et extérieures
des éléments.
 border : Définit les bordures des éléments.
 width`, `height` : Définit la largeur et la hauteur des éléments.
Disposition des éléments avec CSS (flottants, flexbox, grille)

En CSS, il existe plusieurs techniques pour disposer et aligner les éléments
sur une page web de manière flexible et responsive. Les méthodes les plus
couramment utilisées sont les flottants (`float`), Flexbox et CSS Grid.
1. Flottants (`float`)
Les flottants étaient historiquement utilisés pour créer des mises en page de
type colonnes avant l'introduction de Flexbox et CSS Grid. Ils déplacent un
élément vers la gauche ou la droite, et les autres éléments flottants les
entourent.
Exemple :
/* Style des éléments flottants */
.element {
float: left;
width: 50%; /* ou toute autre largeur souhaitée */
/* Autres styles */
}
/* Clearfix pour éviter les effets de flottement */

.container::after {
content: "";
display: table;
clear: both; }

17
2. Flexbox
17
Flexbox est une méthode plus moderne et puissante pour la mise en page des
éléments dans une seule dimension (ligne ou colonne). Elle permet un
alignement et une distribution des espaces entre les éléments de manière
flexible.
Exemple :
/* Style du conteneur flex */
.container {
display: flex;
flex-wrap: wrap; /* Permet le retour à la ligne */
justify-content: space-between; /* Alignement des éléments sur
l'espace disponible */
}
/* Style des éléments flex */

.element {
flex: 1 1 300px; /* flex-grow, flex-shrink, flex-basis */
/* Autres styles */
}
3. CSS Grid
CSS Grid est une méthode de mise en page bidimensionnelle qui permet de
gérer facilement les espaces entre les éléments dans les lignes et les colonnes.
C'est idéal pour les mises en page complexes nécessitant un contrôle précis
sur la disposition des éléments.
Exemple :
/* Style du conteneur grid */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Trois colonnes
égales */
grid-gap: 20px; /* Espacement entre les éléments */
}
/* Style des éléments grid */

.element {
/* Propriétés pour contrôler la position dans la grille */
}
```
Choix de la méthode :

18
- **Flottants (`float`)** : Utilisés principalement pour des mises en page

18
simples et lorsque la compatibilité avec les anciens navigateurs est une
considération importante.
- **Flexbox** : Idéal pour les mises en page unidimensionnelles, comme les

barres latérales et les alignements verticaux ou horizontaux simples.
- **CSS Grid** : Parfait pour les mises en page plus complexes avec des grilles
bidimensionnelles, comme les mises en page de magazine ou les tableaux de
bord.
 Responsive design avec CSS

Le design responsive avec CSS permet de créer des sites web qui s'adaptent et
répondent de manière dynamique aux différentes tailles d'écrans et aux
dispositifs des utilisateurs, comme les ordinateurs de bureau, les tablettes et
les smartphones. Voici les principes fondamentaux pour mettre en œuvre un
design responsive efficace avec CSS :
1. Utilisation des Media Queries

Les Media Queries sont des règles CSS qui permettent d'appliquer des styles
spécifiques en fonction des caractéristiques du périphérique de visualisation,
telles que la largeur de l'écran.
Exemple de Media Query simple :
/* Style par défaut pour les éléments */
.element {
width: 100%;
}
/* Media Query pour les écrans plus larges que 768px */

@media (min-width: 768px) {
.element {
width: 50%;
}
}
Dans cet exemple, `.element` prendra 100% de la largeur par défaut, mais
seulement 50% lorsque la largeur de l'écran sera supérieure à 768 pixels.

19
2. Utilisation des Unités Relatives

19
Pour un design responsive, utilisez des unités relatives comme `%`, èm`, `rem`
plutôt que des unités absolues comme `px`. Cela permet aux éléments de
s'adapter proportionnellement à la taille de la fenêtre du navigateur ou à la
taille de la police de base.
/* Exemple avec des unités relatives */
.container {
width: 90%;
margin: 0 auto; /* Centre le conteneur */
padding: 20px;
}
.element {
width: 100%;
padding: 10px;
}
3. Images et Médias Responsive
Utilisez `max-width : 100%;` sur les images pour éviter leur débordement des
conteneurs parent et pour garantir qu'elles se redimensionnent
proportionnellement à la taille de l'écran :
/* Image responsive */
img {
max-width: 100%;
height: auto;
}

20
CHAPITRE 4 : Back-end et serveurs web 20

En informatique, le back-end (ou backend) fait référence à la partie d'une
application ou d'un système informatique qui n'est pas directement accessible
aux utilisateurs finaux. Il comprend principalement la gestion des données, la
logique métier, l'accès aux bases de données, et d'autres fonctionnalités
nécessaires au bon fonctionnement de l'application.
4.1. Introduction aux langages de programmation côté serveur : PHP
PHP (Hypertext Preprocessor) est un langage de programmation côté serveur

très populaire, principalement utilisé pour le développement web dynamique.
Les principaux aspects et fonctionnalités de PHP :
1. Origines et Caractéristiques
 Origines : PHP a été créé par Rasmus Lerdorf en 1994. Initialement,

PHP signifiait "Personal Home Page" (Pages Personnelles), mais il est
maintenant souvent appelé "PHP: Hypertext Preprocessor".
 Langage de Script Côté Serveur : PHP est principalement utilisé pour
générer des pages web dynamiques à partir du serveur. Cela signifie
qu'il est exécuté sur le serveur web avant que le contenu ne soit envoyé
au navigateur de l'utilisateur.
2. Fonctionnalités Principales
 Intégration HTML : PHP peut être facilement intégré dans du code

HTML, ce qui permet aux développeurs de combiner logique et
présentation dans le même fichier.
 Compatibilité avec de Nombreuses Bases de Données : PHP supporte
une large gamme de systèmes de gestion de bases de données (SGBD),
ce qui en fait un choix polyvalent pour le développement web.
 Large Communauté et Support : PHP bénéficie d'une large
communauté de développeurs et est bien documenté, avec de nombreux
frameworks et bibliothèques disponibles pour faciliter le développement.

21
3. Principales Versions de PHP

21
1. PHP 3 :
o Lancée en 1997.
o Première version largement utilisée.
o Support initial de l'objet et gestion améliorée des formulaires.
2. PHP 4 :
o Lancée en 2000.
o Introduction de nombreuses fonctionnalités clés, notamment la
gestion des sessions, les classes et les méthodes, les
constructeurs et destructeurs, ainsi que la prise en charge des
objets et l'extension du support des modules.
3. PHP 5 :
o Lancée en 2004.
o Refonte majeure avec une architecture orientée objet plus
robuste.
o Introduction des espaces de noms, des exceptions, des
générateurs, de la gestion améliorée des erreurs, des expressions
régulières améliorées, et des améliorations significatives de la
gestion des bases de données.
4. PHP 5.3 :
o Lancée en 2009.
o Introduction des noms de fonctions anonymes (closures), de la
prise en charge de la classe DateTime, des namespaces, et des
performances accrues.
5. PHP 5.4 :
o Lancée en 2012.
o Introduit le support pour les traits (traits), la syntaxe raccourcie
pour les tableaux ([]), et amélioré la gestion de la session et des
exceptions.
6. PHP 5.5 :
o Lancée en 2013.
o Introduit le support pour les générateurs, les mots-clés finally et
yield, et des améliorations significatives des performances.
22
7. PHP 5.6 :
22
o Lancée en 2014.
o Amélioration des performances, introduction de constantes
scalaires, de la vérification des types, et d'autres améliorations.
8. PHP 7 :
o Lancée en 2015.
o Refonte majeure avec une amélioration significative des
performances.
o Introduit les déclarations de type scalaires, l'opérateur de fusion
null (??), les déclarations de retour de type, et bien plus encore.
9. PHP 7.1 à PHP 7.4 :
o Versions successives avec des améliorations continues des
performances et l'ajout de nouvelles fonctionnalités comme les
propriétés de classe visibles en privé, les types de retour nullable,
la décomposition list, etc.
10. PHP 8 :
o Lancée en 2020.
o Introduit de nombreuses nouvelles fonctionnalités et
améliorations majeures, y compris le typage strict, les attributs,
les propriétés de promotion, le match expression, et des
améliorations significatives des performances.
 Installation de PHP
Pour configurer un environnement de développement PHP, plusieurs solutions

populaires sont disponibles, notamment XAMPP, WAMP, MAMP, et LAMP.
Chacune de ces solutions combine Apache, MySQL (ou MariaDB), PHP et
parfois d'autres outils comme phpMyAdmin pour faciliter le développement
web sur un ordinateur local.
Voici un aperçu de chacune de ces solutions :
1. XAMPP : est une plateforme de développement web multi-plateforme,

fonctionnant sur Windows, macOS et Linux. Il comprend les composants
suivants :

23
23
 Apache : Serveur web open-source.
 MySQL : Système de gestion de base de données relationnelle.
 PHP : Langage de script côté serveur.
 phpMyAdmin : Outil de gestion de base de données MySQL via une
interface web.
 Configuration :
 Téléchargez et installez XAMPP depuis le site officiel.

 Lancez XAMPP Control Panel pour démarrer Apache et MySQL.
 Accédez à `http://localhost` dans votre navigateur pour voir la page
d'accueil de XAMPP et `http://localhost/phpmyadmin` pour gérer vos
bases de données.
2. WAMP : est une plateforme similaire à XAMPP mais spécifiquement

conçue pour Windows. Elle comprend :
 Apache : Serveur web open-source.

 MySQL : Système de gestion de base de données relationnelle.
 PHP : Langage de script côté serveur.
 phpMyAdmin : Outil de gestion de base de données MySQL via une
interface web.
 Configuration :
 Téléchargez et installez WAMP Server à partir du site officiel.

 Démarrez WAMP Server. L'icône de WAMP dans la barre des tâches doit
être verte pour indiquer que les services Apache et MySQL sont actifs.
 Accédez à `http://localhost` dans votre navigateur pour accéder à votre
serveur web local et à phpMyAdmin via
`http://localhost/phpmyadmin`.
3. MAMP : est une solution populaire pour les utilisateurs macOS, bien que
sa version MAMP pour Windows existe également. Les composants incluent :

24
4. LAMP : est une solution open-source pour les distributions Linux qui
24
installe Apache, MySQL (ou MariaDB), PHP et PHPMyAdmin en utilisant les
gestionnaires de paquets de la distribution Linux (comme apt pour Ubuntu).
Configuration :
 Installez les packages Apache, MySQL/MariaDB et PHP via votre

gestionnaire de paquets.
 Démarrez les services Apache et MySQL/MariaDB.
 Accédez à `http://localhost` dans votre navigateur pour voir le serveur
web par défaut d'Apache et configurez PHPMyAdmin si nécessaire.
 Choix de la Solution
 XAMPP : est polyvalent et disponible sur plusieurs plateformes.
 WAMP : est spécifiquement conçu pour Windows.
 MAMP : est idéal pour les utilisateurs macOS.
 LAMP : est intégré aux distributions Linux, offrant un contrôle plus fin
sur la configuration.
Noté Bien : Chaque solution a ses propres avantages et il est recommandé de

choisir celle qui correspond le mieux à votre système d'exploitation et à vos
besoins en développement web local.
4.2.1. Structure de base d'un fichier PHP
La structure de base d'un fichier PHP est relativement simple et comprend des
balises PHP intégrées dans un document HTML. Voici un exemple typique de
structure de fichier PHP :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
</head>
<body>

<h1>Exemple de page PHP</h1>

25
<?php
// Code PHP ici 25
$message = "Bonjour, monde !";
echo "<p>$message</p>";
?>
</body>
</html>
 Intégration de PHP
Les balises PHP <?php ... ?> permettent d'insérer du code PHP à n'importe
quel endroit dans le fichier. Dans l'exemple ci-dessus :
o Les variables PHP comme $message, $variable, et $nombre sont

définies et utilisées pour générer du contenu dynamique.
o Les instructions PHP comme echo sont utilisées pour produire du
contenu HTML dynamique, comme des paragraphes (<p>).
 Exécution du code PHP :
Lorsque ce fichier est traité par un serveur web avec PHP installé, le code PHP
est exécuté côté serveur avant que le résultat ne soit envoyé au navigateur de
l'utilisateur. Cela permet de générer des pages web dynamiques basées sur
des variables, des boucles, des conditions, etc.
 Points Importants :
 Mélange de PHP et HTML : PHP peut être intégré dans n'importe

quelle partie d'un fichier HTML, permettant une manipulation facile
des données et une génération dynamique de contenu.
 Commentaires : Les commentaires PHP sont des lignes précédées
de // pour les commentaires sur une ligne, ou /* ... */ pour les
commentaires multi-lignes, tout comme dans d'autres langages de
programmation.
Cette structure de base permet de commencer à créer des applications web

dynamiques en utilisant PHP pour la manipulation des données et la
génération de contenu côté serveur.

26
4.1.2. Variables et Types de Données

26
4.1.2.1. Variables
Les variables sont utilisées pour stocker des données et peuvent contenir
différents types de valeurs, comme des entiers, des nombres à virgule flottante,
des chaînes de caractères, des tableaux, des objets, et plus encore.
Les principaux points sur les variables PHP :
 Déclaration de Variables
Les variables sont déclarées avec le symbole $ suivi du nom de la variable.
Exemples :
// Déclaration d'une variable contenant un entier

$nombre = 10;
// Déclaration d'une variable contenant un nombre à virgule

flottante
$prix = 19.99;
// Déclaration d'une variable contenant une chaîne de caractères

$message = "Bonjour, monde !";
// Déclaration d'une variable contenant un tableau

$fruits = array("Pomme", "Banane", "Orange");
// Déclaration d'une variable vide

$vide = null;
 Types de Données en PHP
PHP est un langage faiblement typé, ce qui signifie que les types de données
sont généralement déterminés automatiquement en fonction du contexte.
Les principaux types de données en PHP :
1. Entiers (integers) : Ils représentent des nombres entiers sans

décimales.

27
Exemple : $nombre = 10;

27
2. Nombres à virgule flottante (floats) : Ils représentent des nombres
décimaux.
Exemple : $prix = 19.99;
3. Chaînes de caractères (strings) : Elles représentent des séquences de

caractères.
Exemple : $message = "Bonjour, monde !";
4. Tableaux (arrays) : Ils sont utilisés pour stocker plusieurs valeurs

dans une seule variable.
Exemple : $fruits = array("Pomme", "Banane", "Orange");
5. Booléens (booleans) : Ils représentent des valeurs de vérité, true ou

false.
Exemple : $estVrai = true;
6. Null : Il représente une variable sans valeur.
Exemple : $vide = null;
 Portée des Variables
La portée d'une variable détermine où elle peut être utilisée dans le code.
Les principales portées sont :
 Locale : Déclarée à l'intérieur d'une fonction ou d'un bloc de code

spécifique et n'est pas accessible en dehors de ce contexte.
 Globale : Déclarée en dehors de toutes les fonctions et accessible
partout dans le script PHP.
 Statique : Une variable statique conserve sa valeur entre les appels de
fonction.

28
 Nom de Variables
28
 Les noms de variables en PHP sont sensibles à la casse ($message est

différent de $Message).
 Ils doivent commencer par une lettre ou un trait de soulignement (_).
 Ils peuvent contenir des lettres, des chiffres et des traits de
soulignement.
 Ils ne doivent pas contenir d'espaces ou de caractères spéciaux, à
l'exception du trait de soulignement.
Exemple d'utilisation de Variable
$nom = "John Doe";

$age = 30;
echo "Bonjour, je m'appelle $nom et j'ai $age ans.";
// Accès à un élément d'un tableau

echo "Mon fruit préféré est " . $fruits[0] . ".";
4.2.3. Constantes
Les constantes sont des identificateurs (noms) qui représentent des valeurs
qui ne peuvent pas changer pendant l'exécution du script. Contrairement aux
variables, les constantes sont définies une fois et ne peuvent pas être
modifiées par la suite. Voici les principaux points à connaître sur les
constantes en PHP :
 Définition et Syntaxe
Les constantes sont définies à l'aide de la fonction define() ou de l'opérateur

const (disponible à partir de PHP 5.3) :
1. À l'aide de define() : define("NOM_DE_CONSTANTE", valeur);
Exemple : define("PI", 3.14);
define("NOM_SITE", "Mon site web");
2. À l'aide de const : const NOM_DE_CONSTANTE = valeur;

29
Exemple :
29
const ANNEE_EN_COURS = 2024;

const MAX_UTILISATEURS = 100;
 Caractéristiques des Constantes
 Les noms de constantes sont sensibles à la casse (NOM_DE_CONSTANTE

est différent de nom_de_constante).
 Ils ne nécessitent pas de préfixe $ comme les variables.
 Ils peuvent être définis à l'intérieur ou à l'extérieur des classes.
 Une fois définies, les constantes ne peuvent pas être redéfinies ni
supprimées pendant l'exécution du script.
 Utilisation des Constantes
Les constantes sont largement utilisées pour stocker des valeurs fixes et
répétitives qui sont utilisées à plusieurs endroits dans le code.
Exemple :
const PI = 3.14;
// Utilisation dans des calculs

$rayon = 5;
$aire = PI * $rayon * $rayon;
// Utilisation dans des chaînes de caractères

echo "Bienvenue sur " . NOM_SITE . "!";
// Utilisation dans des conditions

if (ANNEE_EN_COURS == 2024) {
echo "Nous sommes en 2024.";
}
 Avantages des Constantes
 Clarté du Code : Les constantes améliorent la lisibilité du code en

remplaçant des valeurs littérales par des noms significatifs.

30
 Maintenance Facile : Si une valeur doit être modifiée, il suffit de la

30
changer à un seul endroit (dans la déclaration de la constante) pour que
la modification soit appliquée partout où la constante est utilisée.
 Prévention des Erreurs : L'utilisation de constantes réduit les risques
d'erreurs de frappe et facilite la détection des erreurs lors de la
compilation.
 Constantes Prédéfinies
PHP possède également de nombreuses constantes prédéfinies, comme

PHP_VERSION, PHP_OS, et d'autres qui fournissent des informations sur
l'environnement d'exécution PHP. Ces constantes peuvent être utilisées
directement dans le script sans avoir besoin de les définir.
4.4. Opérateurs
Les opérateurs en PHP sont des symboles spéciaux utilisés pour effectuer des
opérations sur des variables et des valeurs. Ils peuvent être utilisés pour
effectuer des calculs mathématiques, des comparaisons, des affectations, des
opérations logiques, et bien plus encore. Voici une vue d'ensemble des
principaux types d'opérateurs disponibles en PHP :
 Types d'Opérateurs
1. Opérateurs Arithmétiques
Les opérateurs arithmétiques sont utilisés pour effectuer des opérations

mathématiques de base :
o + : Addition
o - : Soustraction
o * : Multiplication
o / : Division
o % : Modulo (reste de la division)
Exemple :
$a = 10;
$b = 3;
$somme = $a + $b; // $somme vaut 13
$difference = $a - $b; // $difference vaut 7

31
$produit = $a * $b; // $produit vaut 30

$quotient = $a / $b; // $quotient vaut 3.3333... 31
$reste = $a % $b; // $reste vaut 1
2. Opérateurs d'Affectation
Les opérateurs d'affectation sont utilisés pour assigner des valeurs à des
variables :
o = : Affectation simple
o +=, -=, *=, /=, %= : Opérateurs combinés d'addition, soustraction,
multiplication, division et modulo
Exemple :
$x = 10;
$x += 5; // Équivaut à $x = $x + 5; donc $x vaut maintenant 15
$y = 20;
$y *= 2; // Équivaut à $y = $y * 2; donc $y vaut maintenant 40
3. Opérateurs de Comparaison
Les opérateurs de comparaison sont utilisés pour comparer deux valeurs :
o == : Égal à
o != ou <> : Différent de
o === : Égal à en valeur et en type
o !== : Différent de en valeur ou en type
o > : Supérieur à
o < : Inférieur à
o >= : Supérieur ou égal à
o <= : Inférieur ou égal à
Exemple :
$a = 10;
$b = 5;
if ($a > $b) {
echo "a est supérieur à b";
} else {
echo "a n'est pas supérieur à b";
}

32
4. Opérateurs Logiques
32
Les opérateurs logiques sont utilisés pour combiner des expressions

booléennes :
o && ou and : ET logique

o || ou or : OU logique
o ! ou not : NON logique (négation)
Exemple :
$x = true;
$y = false;
if ($x && !$y) {
echo "x est vrai et y est faux";
}
5. Opérateur ternaire (Booléen)
true et false ou vrai ou faux
4.5. Structures de Contrôle
Les structures de contrôle sont utilisées pour contrôler le flux d'exécution des
instructions en fonction de certaines conditions. Elles permettent de prendre
des décisions, d'itérer sur des blocs de code ou d'exécuter des instructions en
fonction de conditions spécifiques.
Les principales structures de contrôle disponibles en PHP :
4.5.1. Structures conditionnelles
Les structures conditionnelles if, else et elseif en PHP permettent d'exécuter

différents blocs de code en fonction de l'évaluation de conditions spécifiques.
Elles sont essentielles pour prendre des décisions dans vos scripts en fonction
des données fournies ou des conditions définies.

33
1. if ()
33
La structure if permet d'exécuter un bloc de code si une condition est évaluée

comme vraie (true).
Syntaxe :
if (condition) {
// Code à exécuter si la condition est vraie
}
Exemple :
$age = 20;
if ($age >= 18) {

echo "Vous êtes majeur.";
}
2. else()
La structure else est utilisée en conjonction avec if pour exécuter un bloc de

code si la condition if évaluée est fausse (false).
Syntaxe :
if (condition) {
// Code à exécuter si la condition est vraie
} else {
// Code à exécuter si la condition est fausse
}
Exemple :
$age = 15;
if ($age >= 18) {

echo "Vous êtes majeur.";
} else {
echo "Vous êtes mineur.";
}

34
3. elseif()
34
La structure elseif permet d'ajouter des conditions supplémentaires à évaluer

si la condition if initiale est fausse. Vous pouvez ajouter plusieurs elseif après
un if et avant un éventuel else.
Syntaxe :
if (condition1) {
// Code à exécuter si condition1 est vraie
} elseif (condition2) {
// Code à exécuter si condition2 est vraie et condition1 est
fausse
} elseif (condition3) {
// Code à exécuter si condition3 est vraie et condition1 et
condition2 sont fausses
} else {
// Code à exécuter si aucune des conditions précédentes n'est
vraie
}
Exemple :
$heure = date("H");
if ($heure < 12) {

echo "Bonjour !";
} elseif ($heure < 18) {
echo "Bon après-midi !";
} else {
echo "Bonsoir !";
}
 Remarques sur les Structures Conditionnelles
 Les conditions dans les structures conditionnelles peuvent être des

expressions simples ou complexes, et elles doivent se terminer par un
point-virgule (;).

35
 Vous pouvez imbriquer des structures if, elseif et else pour gérer des
35
situations plus complexes.
 Assurez-vous de comprendre l'ordre dans lequel les conditions sont
évaluées, car cela peut affecter le comportement de votre programme.
4.5.2. Structures répétitives (boucle)
Les structures répétitives (ou boucles) permettent d'exécuter plusieurs fois un

bloc de code en fonction d'une condition spécifiée. Elles sont essentielles pour
automatiser les tâches répétitives telles que le traitement de listes de données,
la génération de séquences, ou l'itération sur des tableaux.
Les principales structures répétitives disponibles en PHP :
1. while Loop
La boucle while répète un bloc de code tant qu'une condition spécifiée est
vraie.
Syntaxe :
while (condition) {
// Code à répéter tant que la condition est vraie
}
Exemple :
$i = 1;
while ($i <= 5) {
echo "Numéro : $i <br>";
$i++;
}
2. do-while Loop
La boucle do-while est similaire à while, mais elle garantit au moins une
exécution du bloc de code avant de vérifier la condition.
Syntaxe :
do {
// Code à exécuter au moins une fois
} while (condition);

36
Exemple :
36
$i = 1;
do {
$i++;
} while ($i <= 5);
3. for Loop
La boucle for est utilisée lorsque le nombre d'itérations est connu à l'avance.
Elle permet de spécifier une initialisation, une condition de continuation et
une mise à jour dans une seule ligne.
Syntaxe :
for (initialisation; condition; mise_à_jour) {

// Code à répéter
}
Exemple :
for ($i = 1; $i <= 5; $i++) {

}
4. foreach Loop
La boucle foreach est spécifiquement utilisée pour itérer sur les éléments d'un
tableau ou d'un objet.
Syntaxe :
foreach ($array as $value) {

// Code à exécuter pour chaque élément du tableau
}
Exemple avec un tableau :
$fruits = array("Pomme", "Banane", "Orange");

foreach ($fruits as $fruit) {

37
echo "$fruit <br>";

37
}
Exemple avec un tableau associatif :
$personne = array("nom" => "John", "age" => 30);

foreach ($personne as $cle => $valeur) {
echo "$cle : $valeur <br>";
}
 Utilisation des Structures Répétitives
 while et do-while sont utilisés lorsque la condition de bouclage peut

être vraie ou fausse dès le début de l'exécution.
 for est utile lorsque le nombre d'itérations est connu à l'avance, comme
itérer un nombre spécifique de fois.
 foreach est idéal pour parcourir tous les éléments d'un tableau ou les
propriétés d'un objet sans avoir besoin de connaître à l'avance le nombre
d'éléments.
 Considérations
 Assurez-vous de mettre à jour les variables de contrôle à l'intérieur des

boucles ($i++, $i--, etc.) pour éviter les boucles infinies.
 Vous pouvez imbriquer des boucles pour gérer des structures de
données multidimensionnelles ou des itérations complexes.
4.6. Fonctions
Les fonctions sont des blocs de code réutilisables qui effectuent une tâche
spécifique. Elles permettent d'organiser le code en le divisant en tâches plus
petites et plus gérables, ce qui facilite la maintenance et la réutilisation du
code. Voici comment définir et utiliser des fonctions en PHP :
 Définition d'une Fonction
En PHP, une fonction est définie à l'aide du mot-clé function, suivi du nom
de la fonction et des paramètres éventuels entre parenthèses.

38
La syntaxe générale :
38
function nom_de_la_fonction(paramètre1, paramètre2, ...) {

// Bloc de code à exécuter
}
Exemple Simple :
Définissons une fonction qui affiche un message de salutation en fonction d'un

nom passé en paramètre :
function saluer($nom) {
echo "Bonjour, $nom !";
}
// Appel de la fonction
saluer("John");
 Utilisation des Paramètres
Les paramètres sont des valeurs que vous pouvez passer à une fonction pour
qu'elle les utilise lors de son exécution. Vous pouvez spécifier autant de
paramètres que nécessaire entre les parenthèses de la définition de la fonction.
Exemple avec Paramètres :
function calculerSomme($a, $b) {

$somme = $a + $b;
echo "La somme de $a et $b est : $somme";
}
// Appel de la fonction
calculerSomme(5, 3); // Affiche : La somme de 5 et 3 est : 8
 Valeur de Retour
Les fonctions en PHP peuvent également retourner une valeur à l'endroit où

elles ont été appelées à l'aide du mot-clé return.
Exemple avec Valeur de Retour :

39
function calculerProduit($x, $y) {

39
$produit = $x * $y;
return $produit;
}
// Appel de la fonction et récupération de la valeur retournée

$resultat = calculerProduit(4, 6);
echo "Le produit est : $resultat"; // Affiche : Le produit est
: 24
 Portée des Variables
Les variables déclarées à l'intérieur d'une fonction ont une portée locale par
défaut, ce qui signifie qu'elles ne sont accessibles qu’à l'intérieur de la
fonction. Les variables déclarées en dehors d'une fonction ont une portée
globale et peuvent être utilisées partout dans le script.
 Fonctions Prédéfinies
PHP dispose de nombreuses fonctions prédéfinies qui simplifient les tâches

courantes comme la manipulation des chaînes de caractères, le traitement des
tableaux, la gestion des fichiers, etc. Par exemple, strlen() pour obtenir la
longueur d'une chaîne, array_push() pour ajouter un élément à un tableau,
etc.
4.7. Tableaux et Structures de Données
Les tableaux sont des structures de données très flexibles et puissantes qui
permettent de stocker plusieurs valeurs dans une seule variable. Ils peuvent
contenir des éléments de différents types (comme des entiers, des chaînes de
caractères, des objets, d'autres tableaux, etc.) et sont essentiels pour
manipuler des collections de données de manière efficace.

40
1. Tableaux Indéxés
40
Les tableaux indexés sont des tableaux où chaque élément est associé à un
index numérique commençant généralement à zéro.
 Définition d'un Tableau Indéxé :
// Définition d'un tableau indexé

$prenoms = array("John", "Jane", "Michael", "Emily");
// Accès aux éléments du tableau par leur indice

echo $prenoms[0]; // Affiche "John"
echo $prenoms[1]; // Affiche "Jane"
2. Tableaux Associatifs
Les tableaux associatifs utilisent des clés au lieu d'indices numériques pour
accéder aux valeurs. Chaque élément est associé à une clé unique.
 Définition d'un Tableau Associatif :
// Définition d'un tableau associatif

$personne = array(
"nom" => "John",
"age" => 30,
"ville" => "Paris"
);
// Accès aux éléments du tableau par leur clé

echo $personne["nom"]; // Affiche "John"
echo $personne["age"]; // Affiche 30
echo $personne["ville"]; // Affiche "Paris"

41
3. Tableaux Multidimensionnels
41
Les tableaux multidimensionnels sont des tableaux qui contiennent d'autres

tableaux (ou des matrices). Ils permettent de représenter des données plus
complexes avec des niveaux de profondeur.
 Définition d'un Tableau Multidimensionnel :
// Définition d'un tableau multidimensionnel

$employes = array(
array("nom" => "John", "age" => 30, "poste" =>
"Développeur"),
array("nom" => "Jane", "age" => 25, "poste" => "Designer"),
array("nom" => "Michael", "age" => 35, "poste" => "Manager")
);
// Accès aux éléments du tableau multidimensionnel

echo $employes[0]["nom"]; // Affiche "John"
echo $employes[1]["poste"]; // Affiche "Designer"
4. Structures de Données Prédéfinies
En plus des tableaux, PHP propose d'autres structures de données prédéfinies

telles que les listes (Listes doublement chaînées), les piles (Stacks), les files
d'attente (Queues), et les ensembles (Sets). Ces structures facilitent la
manipulation et le traitement de données spécifiques selon les besoins de votre
application.
 Utilisation et Manipulation des Structures de Données
 Ajouter des éléments : Utilisez array_push() pour ajouter des

éléments à la fin d'un tableau.
 Supprimer des éléments : Utilisez unset() pour supprimer un
élément spécifique d'un tableau.
 Parcourir un tableau : Utilisez des boucles foreach pour itérer sur les
éléments d'un tableau de manière efficace.

42
 Fonctions de manipulation : PHP propose une gamme étendue de

42
fonctions intégrées pour trier, fusionner, filtrer et transformer des
tableaux selon divers critères.

43
4.6. Introduction au traitement des formulaires HTML

43
Le traitement des formulaires HTML en PHP est une compétence essentielle

pour interagir avec les utilisateurs à travers les pages web. Cela permet de
collecter des données saisies par les utilisateurs et de les traiter côté serveur.
Méthodes GET et POST
Les méthodes GET et POST sont utilisées pour transmettre des données d'un
formulaire HTML vers un script PHP pour traitement. Elles diffèrent
principalement par la manière dont les données sont envoyées et gérées côté
serveur.
 Méthode GET
La méthode GET est utilisée pour envoyer des données au serveur via l'URL.
Les données sont visibles dans l'URL et peuvent être bookmarkées (ajoutées
aux favoris) ou partagées facilement. Elle est souvent utilisée pour des
requêtes non sensibles et pour récupérer des données depuis le serveur.
 Caractéristiques de la méthode GET :
 Les données sont envoyées en tant que chaîne de requête (query string)
dans l'URL.
 Les données sont limitées en taille (généralement jusqu'à 2048
caractères dans les navigateurs modernes).
 Peut être mis en cache par le navigateur et reste dans l'historique de
navigation.
 Moins sécurisé que POST car les données sont visibles dans l'URL.
 Utilisé principalement pour récupérer des données.
Exemple d'utilisation dans un formulaire HTML :
<form action="traitement.php" method="get">

<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">
<input type="submit" name=’envoyer’ value="Envoyer">
</form>

44
L'URL résultante après soumission du formulaire pourrait ressembler à ceci :

44
traitement.php?nom=John.
En PHP, pour récupérer la valeur soumise via GET :
<?php
if(isset($_GET['non du boutton']){
// caste de variable avec les formulaires
$nom = $_GET['name du formulaire nom'];

$postnom = $_GET['name du formulaire postnom'];
// exemple
$nom = $_GET['nom'];
$postnom = $_GET['postnom'];
// affichage
echo $nom .'<br>';

echo $postnom .'<br>';
}
?>
 Méthode POST
La méthode POST est utilisée pour envoyer des données au serveur de manière
invisible. Les données ne sont pas visibles dans l'URL et ne peuvent pas être
bookmarkées facilement. Elle est souvent utilisée pour des requêtes sensibles
ou lorsqu'il est nécessaire de transmettre des données volumineuses.
Caractéristiques de la méthode POST :
 Les données sont envoyées dans le corps de la requête HTTP.

 Les données ne sont pas visibles dans l'URL et ne sont pas limitées en
taille par les spécifications HTTP.
 Ne peut pas être mis en cache par le navigateur et ne reste pas dans
l'historique de navigation.
 Plus sécurisé que GET car les données ne sont pas visibles dans l'URL.
 Utilisé principalement pour soumettre des données sensibles (comme
des mots de passe) ou des données qui modifient l'état du serveur.

45
Exemple d'utilisation dans un formulaire HTML :

45
<form action="traitement.php" method="post">

<input type="text" id="nom" name="nom">
</form>
Pour récupérer la valeur soumise via POST :
<?php
if(isset($_POST['non du boutton']){
// caste de variable avec les formulaires
$nom = $_POST['name du formulaire nom'];

$postnom = $_POST['name du formulaire postnom'];
// exemple
$nom = $_POST['nom'];
$postnom = $_POST['postnom'];
// affichage
echo $nom .'<br>';

echo $postnom .'<br>';
}
?>
 Quand Utiliser GET ou POST ?
 GET est approprié lorsque les données sont non sensibles et que vous
souhaitez les récupérer ou les afficher (par exemple, une recherche sur
un site web).
 POST est approprié lorsque les données sont sensibles (comme des mots
de passe) ou lorsque vous effectuez des modifications sur le serveur
(comme l'ajout ou la mise à jour de données).

46
 Sécurité
46
 GET : Évitez de transmettre des données sensibles via GET car elles
sont visibles dans l'URL et peuvent être interceptées.
 POST : Utilisez POST pour les données sensibles car elles sont envoyées
de manière sécurisée dans le corps de la requête HTTP.
Étapes Fondamentales du Traitement d'un Formulaire HTML
1. Création du Formulaire HTML
Tout d'abord, vous devez créer un formulaire HTML dans votre fichier HTML
ou PHP.
Exemple simple de formulaire HTML qui utilise la méthode POST pour envoyer
les données au serveur:

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Formulaire HTML</title>
</head>
<body>
<form action="traitement.php" method="post">

<input type="text" id="nom" name="nom"><br><br>
<label for="email">Email :</label>

<input type="email" id="email" name="email"><br><br>

47
<label for="message">Message :</label><br>

47
<textarea id="message" name="message" rows="4"
cols="50"></textarea><br><br>

</form>
</body>
</html>
2. Soumission du Formulaire et Traitement des Données
Lorsque l'utilisateur remplit le formulaire et appuie sur le bouton "Envoyer",

les données sont envoyées au script PHP spécifié dans l'attribut action du
formulaire (traitement.php dans notre exemple). Le formulaire utilise la
méthode POST, ce qui signifie que les données seront envoyées de manière
invisible et sécurisée au serveur.
3. Création du Script PHP de Traitement
Vous devez maintenant créer le script PHP (traitement.php) qui recevra et

traitera les données envoyées par le formulaire. Ce script récupérera les
données à l'aide des superglobales PHP $_POST et $_GET, selon la méthode
utilisée dans le formulaire (POST dans notre exemple).
Voici comment vous pouvez récupérer et afficher les données soumises dans
traitement.php :
// traitement.php
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Traitement du Formulaire</title>

48
</head>
48
<body>
<h2>Récapitulatif du Formulaire</h2>
<?php
// Vérifie si les données ont été soumises via POST
if (ISSET($_POST[‘envoyer’]){
// Récupérer et afficher les données du formulaire
$email = $_POST['email'];
$message = $_POST['message'];
echo "<p>Nom : $nom</p>";

echo "<p>Email : $email</p>";
echo "<p>Message : $message</p>";
} else {
// Redirection ou message d'erreur si le formulaire n'a pas
été soumis
echo "Le formulaire n'a pas été soumis.";
}
?>
</body>
</html>

49
4.7. Fonctions Avancées

49
 Manipulation des chaînes de caractères
La manipulation des chaînes de caractères est une tâche courante et

essentielle pour traiter et transformer des données textuelles.
Les principales techniques et fonctions utilisées pour manipuler les chaînes

de caractères en PHP :
1. Concaténation de Chaînes
La concaténation est le processus de fusion de plusieurs chaînes de caractères

en une seule.
Exemple de Concaténation :
$nom = "John";
$prenom = "Doe";
// Utilisation de l'opérateur de concaténation (.)

$message = "Bonjour, " . $prenom . " " . $nom;
echo $message; // Affiche "Bonjour, Doe John"
2. Longueur d'une Chaîne
Pour obtenir la longueur d'une chaîne de caractères, utilisez la fonction strlen().
Exemple de Calcul de Longueur :
$nom = "Smith";
$longueur = strlen($nom);
echo $longueur; // Affiche 5

50
3. Extraction de Sous-chaînes
50
Vous pouvez extraire une partie spécifique d'une chaîne de caractères en

utilisant la fonction substr().
Exemple d'Extraction de Sous-chaîne :
$phrase = "Bonjour tout le monde";

$sous_phrase = substr($phrase, 8, 4);
echo $sous_phrase; // Affiche "tout"
4. Recherche dans une Chaîne
Pour rechercher la position d'une sous-chaîne dans une chaîne principale,

utilisez les fonctions strpos() ou strstr().
Exemple de Recherche de Sous-chaîne :
$phrase = "Le chat dort sur le tapis";

$position = strpos($phrase, "chat");
echo $position; // Affiche 3 (position du mot "chat" dans la

chaîne)
5. Remplacement dans une Chaîne
Pour remplacer une sous-chaîne par une autre dans une chaîne principale,
utilisez la fonction str_replace().
Exemple de Remplacement de Sous-chaîne :
$phrase = "Bonjour tout le monde";

$nouvelle_phrase = str_replace("Bonjour", "Bonsoir", $phrase);
echo $nouvelle_phrase; // Affiche "Bonsoir tout le monde"

51
6. Conversion de la Casse
51
Pour convertir une chaîne en majuscules ou en minuscules, utilisez les

fonctions strtoupper() et strtolower().
Exemple de Conversion de Casse :
$mot = "Hello World";

$en_majuscules = strtoupper($mot);
$en_minuscules = strtolower($mot);
echo $en_majuscules; // Affiche "HELLO WORLD"

echo $en_minuscules; // Affiche "hello world"
7. Suppression des Espaces
Pour supprimer les espaces en début et en fin de chaîne, utilisez les fonctions
trim(), ltrim() et rtrim().
Exemple de Suppression des Espaces :
$mot = " Hello World ";

$nettoye = trim($mot);
echo $nettoye; // Affiche "Hello World"
8. Formatage de Chaînes
Pour formater des chaînes selon des modèles spécifiques, utilisez sprintf() ou
printf() pour l'affichage direct.
Exemple d'Utilisation de sprintf() :
$nom = "John";
$age = 30;

52
$message = sprintf("Bonjour, je m'appelle %s et j'ai %d ans.",

52
$nom, $age);
echo $message; // Affiche "Bonjour, je m'appelle John et j'ai 30

ans."
 Fonctions mathématique
Il existe de nombreuses fonctions intégrées pour effectuer diverses opérations

mathématiques. Voici quelques exemples courants de fonctions
mathématiques disponibles :
 Fonctions mathématiques simples :
1. Puissance :
o pow(x, y) : Exponentiation de x à la puissance y. Par exemple,
pow(2, 3) retourne 8.
2. Racine carrée :
o sqrt(x) : Racine carrée de x. Par exemple, sqrt(16) retourne 4.
3. Valeur absolue :
o abs(x) : Valeur absolue de x. Par exemple, abs(-5) retourne 5.
4. Arrondi :
o round(x) : Arrondit x au nombre entier le plus proche.
o ceil(x) : Arrondit x à l'entier supérieur.
o floor(x) : Arrondit x à l'entier inférieur.
 Fonctions trigonométriques :
1. Trigonométrie :
o sin(x), cos(x), tan(x) : Fonctions trigonométriques de x en radians.
o asin(x), acos(x), atan(x) : Arcsine, arccosine et arctangente de x.
 Constantes mathématiques :
1. Constantes :
o pi() : Valeur de π (pi).

53
o M_PI : Constante de π (pi).

53
o M_E : Constante de e (base du logarithme naturel).
 Fonctions logarithmiques et exponentielles :
1. Logarithmes :
o log(x) : Logarithme naturel de x.
o log10(x) : Logarithme base 10 de x.
2. Exponentielles :
o exp(x) : Exponentielle de x, c'est-à-dire e^x.
o pow(e, x) : Exponentielle de x avec la base e.
Ces fonctions peuvent être utilisées directement dans les scripts PHP pour
effectuer des calculs mathématiques complexes ou simples selon vos besoins.
Assurez-vous de consulter la documentation PHP pour plus de détails et
d'exemples d'utilisation spécifiques à chaque fonction.
 Dates et Heures
Fonctions de manipulation de la date et de l'heure :
1. date(format, timestamp) :
o Cette fonction retourne la date formatée selon le format spécifié à
partir d'un timestamp donné (ou de l'heure actuelle si aucun
timestamp n'est fourni).
o Exemple : echo date('Y-m-d H:i:s'); retourne la date et
l'heure actuelles au format Année-mois-jour Heure: minute:
seconde.
2. strtotime(time_string, now) :
o Convertit une chaîne de texte représentant une date/heure en
timestamp Unix (nombre de secondes écoulées depuis le 1er
janvier 1970 à 00:00:00 UTC).
o Exemple : $timestamp = strtotime('2024-06-16
14:30:00'); convertit la chaîne '2024-06-16 14:30:00' en
timestamp.

54
3. time() :
54
o Retourne l'heure actuelle sous forme de timestamp Unix.
o Exemple : $timestamp = time(); retourne le timestamp
actuel.
4. mktime(hour, minute, second, month, day, year) :
o Retourne le timestamp Unix pour une date spécifique en utilisant
les paramètres fournis (heure, minute, seconde, mois, jour,
année).
o Exemple : $timestamp = mktime(14, 30, 0, 6, 16, 2024);
retourne le timestamp pour le 16 juin 2024 à 14h30.
5. date_create(format) et date_format(datetime, format) :
o date_create(format) crée un objet DateTime à partir d'une chaîne
de format de date.
o date_format(datetime, format) formate un objet DateTime selon le
format spécifié.
Exemple :
$date = date_create('2024-06-16');
echo date_format($date, 'Y-m-d'); // Affiche '2024-
06-16'

55
Chapitre 5 : Introduction aux Bases de Données 55

5.1. Qu'est-ce qu'une Base de Données ?
Une base de données (BD) est un ensemble organisé de données structurées

qui permet de stocker, gérer et récupérer des informations de manière efficace.
Plutôt que de simplement stocker des fichiers individuels, une base de
données organise les données en tables, qui sont interconnectées pour
permettre des requêtes et des relations complexes.
 Éléments Clés d'une Base de Données :
1. Tables :
o Les tables sont des structures de données principales dans une
base de données. Chaque table est constituée de colonnes
(champs) et de lignes (enregistrements ou tuples). Chaque
colonne représente un attribut particulier et chaque ligne contient
une instance spécifique de données.
2. Schéma :
o Le schéma d'une base de données définit la structure de la base
de données, y compris les tables, les champs, les types de
données, les contraintes, etc. Il décrit comment les données sont
organisées et quelles relations existent entre les différentes tables.
3. Requêtes :
o Les requêtes permettent d'interagir avec la base de données pour
récupérer, insérer, mettre à jour ou supprimer des données. Les
requêtes sont généralement écrites dans un langage spécifique
comme SQL (Structured Query Language).
4. Clés Primaires et Clés Étrangères :
o Une clé primaire est un attribut (ou un ensemble d'attributs) qui
identifie de manière unique chaque enregistrement dans une
table. Une clé étrangère est un attribut qui crée une relation entre
deux tables en référençant la clé primaire d'une autre table.
5. Index :
o Un index est une structure de données qui améliore la vitesse de
récupération des données en permettant un accès rapide à des
enregistrements spécifiques dans une table.
 Types de Bases de Données :
1. Bases de Données Relationnelles :

o Les bases de données relationnelles (comme MySQL, PostgreSQL,
SQL Server) organisent les données en tables avec des relations

56
définies entre elles. Elles utilisent le langage SQL pour interagir

56
avec les données.
2. Bases de Données NoSQL :
o Les bases de données NoSQL (comme MongoDB, Cassandra,
Redis) utilisent des modèles de données différents et sont souvent
utilisées pour des applications nécessitant une évolutivité
horizontale et une flexibilité de schéma.
 Utilisation des Bases de Données :
Les bases de données sont largement utilisées dans de nombreux domaines,

y compris :
 Applications Web : Stockage des informations des utilisateurs, gestion

de contenu, etc.
 Applications Mobiles : Stockage des données locales, synchronisation
avec les services cloud.
 Systèmes d'Entreprise : Gestion des données clients, des transactions,
des inventaires, etc.
 Analyse de Données : Exploration de données, rapports, visualisations.
 Connexion PHP à une base de données
Pour établir une connexion à une base de données en PHP, vous avez besoin
de plusieurs éléments clés : les informations de connexion (hôte, nom
d'utilisateur, mot de passe), la sélection de la base de données (si nécessaire),
et la gestion des erreurs de connexion.
Les étapes générales pour se connecter à une base de données en PHP, en

utilisant MySQL :
Étapes pour se connecter à une base de données MySQL en PHP :
1. Installer un pilote de base de données : Assurez-vous d'avoir installé

et activé un pilote de base de données adapté à votre système. Pour
MySQL, vous pouvez utiliser mysqli ou PDO.
2. Collecter les informations de connexion : Vous aurez besoin des
informations suivantes :
o Hôte de la base de données (généralement localhost si la base de
données est sur le même serveur).
o Nom d'utilisateur et mot de passe pour accéder à la base de
données.

57
oNom de la base de données que vous souhaitez utiliser (si vous

57
avez plusieurs bases de données).
3. Établir la connexion :
Avec mysqli :
<?php
// Informations de connexion à la base de données
$host = 'localhost';
$user = 'votre_nom_utilisateur';
$password = 'votre_mot_de_passe';
$database = 'nom_de_votre_base_de_donnees';
// Connexion à la base de données

$mysqli = new mysqli($host, $user, $password, $database);
// Vérification de la connexion
if ($mysqli->connect_error) {
die('Erreur de connexion (' . $mysqli->connect_errno
. ') '
. $mysqli->connect_error);
} else {
echo 'Connexion réussie à la base de données';
// Vous pouvez commencer à exécuter des requêtes ici
}
?>
o $mysqli est l'objet de connexion à la base de données créé avec

les informations de connexion.
4. Gestion des erreurs : Il est essentiel de vérifier si la connexion a réussi
ou non à l'aide de $mysqli->connect_error. En cas d'échec de la
connexion, un message d'erreur approprié est affiché avec les détails de
l'erreur.
5. Fermer la connexion : Il est recommandé de fermer la connexion
lorsque vous avez terminé d'utiliser la base de données pour libérer les
ressources serveur.

58
// Fermeture de la connexion
$mysqli->close(); 58
 Utilisation de PDO pour la connexion :
Avec PDO, les étapes sont similaires mais avec une syntaxe légèrement
différente. Voici un exemple de connexion avec PDO :
<?php
// Informations de connexion à la base de données
$host = 'localhost';
$user = 'votre_nom_utilisateur';
$password = 'votre_mot_de_passe';
$database = 'nom_de_votre_base_de_donnees';
// Chaîne de connexion PDO

$dsn = "mysql:host=$host;dbname=$database;charset=utf8mb4";
// Options de PDO pour gérer les erreurs

$options = [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
];
// Tentative de connexion
try {
$pdo = new PDO($dsn, $user, $password, $options);
echo 'Connexion réussie à la base de données';
// Vous pouvez commencer à exécuter des requêtes ici
} catch (PDOException $e) {
die('Erreur de connexion : ' . $e->getMessage());
}
?>
 $pdo est l'objet de connexion à la base de données créé avec PDO.

59
Remarques importantes :
59
 Assurez-vous d'utiliser des informations de connexion correctes et

sécurisées (évitez d'utiliser des mots de passe en clair dans votre code).
 Il est conseillé d'utiliser des requêtes préparées avec PDO ou mysqli
pour éviter les attaques par injection SQL.
 Fermez toujours la connexion lorsque vous avez terminé pour
optimiser les ressources serveur.
Pour exécuter des requêtes SQL (SELECT, INSERT, UPDATE, DELETE) en

PHP, vous pouvez utiliser soit l'extension mysqli soit PDO (PHP Data Objects).
Procédure pour chacune de ces opérations :
Exemple : Création d’une application web pour la gestion des inscriptions des
étudiants.
Règle à suivre :
Structure de base :
 Créez une page d'accueil avec un menu permettant d'accéder aux
différentes fonctionnalités.
 Chaque fonctionnalité aura sa propre page HTML.
 Utilisez des formulaires HTML pour les opérations d'insertion, de
modification et de preuve de paiement.
 Affichez les données dans des tableaux HTML.
Fonctionnalités :
1. Insertion :
 Créez un formulaire HTML avec les champs nécessaires (nom,
prénom, email, etc.).
 Utilisez PHP pour insérer les données dans la base de données
SQL.
2. Suppression :
 Affichez la liste des étudiants inscrits dans un tableau HTML.
 Ajoutez des boutons de suppression à chaque ligne du tableau.
 Utilisez PHP pour supprimer l'étudiant sélectionné de la base de
données.
60
3. Modification :
60
 Affichez la liste des étudiants inscrits dans un tableau HTML.
 Ajoutez des liens de modification à chaque ligne du tableau.
 Créez une page de modification avec un formulaire pré-rempli
avec les données de l'étudiant sélectionné.
 Utilisez PHP pour mettre à jour les informations dans la base de
données.
4. Preuve de paiement :
 Créez un formulaire HTML avec un champ pour télécharger un
justificatif de paiement.
 Utilisez PHP pour enregistrer le fichier sur le serveur et mettre à
jour les informations de l'étudiant dans la base de données.
5. Liste des étudiants inscrits :
 Utilisez PHP pour récupérer les données des étudiants inscrits
depuis la base de données.
 Affichez les informations dans un tableau HTML.
Côté technique :
 Utilisez CSS pour styliser l'interface et la rendre attractive.
Résolution de l’exemple :
1. Page index.php
<!DOCTYPE html>
<?php
require_once 'connect.php'; // Récuperation du fichier de
la connexion
?>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Application web</title>
</head>

61
<body>
61
<center><h1>Gestion des inscriptions</h1></center><hr>
<form action="ajoutinscription.php" method="POST">

<fieldset>
<legend>Formulaire d'inscription</legend>
<label>Nom </label><br>
<input type="text" name="nom" required><br>
<label>Postnom </label><br>
<input type="text" name="postnom" required><br>
<label>Prenom </label><br>
<input type="text" name="prenom" required><br>
<label>Genre </label><br>
<select name="genre" required>
<option></option>
<option>Masculin</option>
<option>Feminin</option>
</select>
<label>Faculté </label><br>
<select name="faculte" required>
<option></option>
<option>DROIT</option>
<option>INFORMATIQUE</option>
<option>SIC</option>
<option>FSSAP</option>
<option>MEDECINE</option>
<option>ISTM</option>
</select>
<label>Auditoire </label><br>
<input type="text" name="auditoire" required><br>
<label>Entrer le montant </label><br>
<input type="number" name="montant" required><br>

62
<button name="inscrir">Enregistrer</button>
62
</fieldset>
</form>
</body>
</html>
2. Connexion à la base de données ( connect.php)
<?php
$nomserveur = "localhost";
$nomuser = "root";
$mdp = "";
$nombasededonnees = "inscription";
$conn = new mysqli($nomserveur, $nomuser, $mdp,
$nombasededonnees)or die(mysqli_error());
?>
3. Page : ajoutinscription.php (INSERT INTO)
<?php
la connexion
//début cast
if(isset($_POST['inscrir']){
$prenom = $_POST['prenom'];
$genre = $_POST['genre'];
$faculte = $_POST['faculte'];
$auditoire = $_POST['auditoire'];
$montant = $_POST['montant'];

63
$conn -> query("INSERT INTO `ìnscriptions` VALUES('', '$nom', 63
'$postnom', '$prenom', '$genre', '$faculte', '$auditoire',

'$montant', NOW())") or die (mysqli_error ());
header('location : donnees.php');
}?>
4. Page : Donnees.php SELECT SQL
<!DOCTYPE html>
<?php
la connexion
?>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Application web</title>
</head>
<body>
<center><h1>Données des étudiants inscrits </h1></center><hr>
<table>
<thead>
<tr>
<th>N°</th>
<th>Nom</th>
<th>Postnom</th>
<th>Prènom</th>
<th>Genre</th>
<th>Faculté</th>
<th>Auditoire</th>
<th>Montant</th>
<th>Date inscrit</th>
<th>Option</th>
</tr>
</thead>
<tbody>
<?php
$insert = $conn -> query("SELECT * FROM ìnscription`") or
die(myqli_error());
$num = 1 ;
while($trouve = $insert->fetch_array()){

64
?>
64
<tr>
<td><?php echo $num; ?></td>
<td><?php echo $trouve['nom']; ?></td>
<td><?php echo $trouve['postnom']; ?></td>
<td><?php echo $trouve['prenom']; ?></td>
<td><?php echo $trouve['genre']; ?></td>
<td><?php echo $trouve['faculte']; ?></td>
<td><?php echo $trouve['auditoire']; ?></td>
<td><?php echo $trouve['montant']; ?></td>
<td><?php echo $trouve['date']; ?></td>
<td>
<a href="modifier.php?id=<?php echo $trouve['id']
?>">Modifier</a> |
<a href="effacer.php?id=<?php echo $trouve['id']
?>">Effacer</a> |
<a href="imprimer.php?id=<?php echo $trouve['id']
?>">Imprimer</a>
</td>
</tr>
<?php
$num++; // incrementation automatique des lignes
}
?>
</tbody>
</table>
</body>
</html>
4.1. Page donnees.php : Bouton Modifier

<?php
require_once 'connect.php'; // Récuperation du fichier de la
connexion
$select = $conn -> query("SELECT * FROM ìnscription` WHERE
ìd`='$_REQUEST[id]'") or die(myqli_error());
$trouver = $select->fetch_array();
?>

65
<form action="ajoutmodofier.php?id=<?php echo $id ?>"

65
method="POST">
<fieldset>
<legend>MODIFICATION DE DONNEES INSCRIPTION DE
L'ETUDIANT</legend>
<label>Nom </label><br>
<input type="text" name="nom" value = '<?php echo
$trouver['nom']; ?>' required><br>
<label>Postnom </label><br>
<input type="text" name="postnom" value = '<?php echo
$trouver['postnom']; ?>' required><br>
<label>Prenom </label><br>
<input type="text" name="prenom" value = '<?php echo
$trouver['prenom']; ?>' required><br>
<label>Genre </label><br>
<select name="genre" required>
<option value = '<?php echo $trouver['genre'];
?>'></option>
<option>Masculin</option>
<option>Feminin</option>
</select>
<label>Faculté </label><br>
<select name="faculte" required>
<option value = '<?php echo $trouver['faculte'];
?>'></option>
<option>DROIT</option>
<option>INFORMATIQUE</option>
<option>SIC</option>
<option>FSSAP</option>
<option>MEDECINE</option>
<option>ISTM</option>
</select>
<label>Auditoire </label><br>

66
<input type="text" name="auditoire" value = '<?php echo

66
$trouver['auditoire']; ?>' required><br>
<label>Entrer le montant </label><br>
<input type="number" name="montant" value = '<?php echo
$trouver['montant']; ?>' required><br>
<button name="modifier">Modifier</button>
</fieldset>
</form>
</body>
</html>
4.1. Page ajoutmodofier.php : UPDATE SQL

<?php
la connexion
if(isset($_POST['modifier']){
$prenom = $_POST['prenom'];
$genre = $_POST['genre'];
$faculte = $_POST['faculte'];
$auditoire = $_POST['auditoire'];
$montant = $_POST['montant'];
$conn -> query("UPDATE ìnscription` SET `nom`='$nom',

`postnom`='$postnom', `prenom`='$prenom', `genre`='$prenom',
`faculte`='$faculte', àuditoire`='$auditoire',

67
`montant`='$montant' WHERE ìd`='$_REQUEST[id]'") or

67
die(myqli_error());
header('location:donnees.php');
}
?>
4.2. Page effacer.php : bouton Effacer DELETE SQL

<?php
require_once 'connect.php'; // Récuperation du fichier de la
connexion
$conn -> query("DELETE * FROM ìnscription` WHERE

ìd`='$_REQUEST[id]'") or die(myqli_error());
header('location:donnees.php');
?>
4.3. Page imprime.php : bouton Imprimer SELECT SQL
<Center><h1>UNIVERSUTE TECHNOLOGIQUE </h1></center><HR>
<?php
require_once 'connect.php';
$select = $conn -> query("SELECT * FROM ìnscription` WHERE
ìd` ='$_REQUEST[id]' ") or die(myqli_error());
$donnee = $select->fetch_array();
?><center><h2>Réçu numéro : <?php echo $donnee['id']; ?>
<fieldset>
<tr>
<td>Nom :</td>
<td><?php echo $donnee['nom']; ?></td>
</tr>
<tr>
<td>Postnom :</td>
<td><?php echo $donnee['postnom']; ?></td>
</tr>

68
<tr>
68
<td>Prenom :</td>
<td><?php echo $donnee['prenom']; ?></td>
</tr>
<tr>
<td>Genre :</td>
<td><?php echo $donnee['genre']; ?></td>
</tr>
<tr>
<td>Faculte :</td>
<td><?php echo $donnee['faculte']; ?></td>
</tr>
<tr>
<td>Auditoire :</td>
<td><?php echo $donnee['audtoire']; ?></td>
</tr>
<tr>
<td>Montant payé :</td>
<td><?php echo $donnee['montant']; ?></td>
</tr>
<tr>
<td>Date de paiement :</td>
<td><?php echo $donnee['date']; ?></td>
</tr>
</fieldset>
<center>Fait à Kisangani le, <?php echo date('d-m-
Y')?><br><br>
<b>Comptable </b>

69
Chapitre 6. Introduction aux Sessions et Cookies 69
Les sessions et les cookies sont des mécanismes importants en PHP pour
maintenir l'état des utilisateurs entre différentes requêtes HTTP.
 Sessions en PHP :
Les sessions permettent de stocker des données spécifiques à chaque

utilisateur pendant qu'il navigue sur un site web. Chaque session est associée
à un identifiant de session unique, souvent stocké dans un cookie ou passé
par l'URL. Voici les étapes typiques pour utiliser les sessions en PHP :
1. Démarrage de la session : Avant d'accéder ou de modifier des variables

de session, vous devez démarrer la session. Cela se fait généralement
au début de chaque script PHP où vous avez besoin de sessions.
<?php
session_start();
?>
2. Définition de variables de session : Vous pouvez définir des variables

de session en utilisant le tableau $_SESSION.
<?php
// Définition de variables de session
$_SESSION['utilisateur_id'] = 1;
$_SESSION['nom_utilisateur'] = 'John Doe';
?>
3. Accès aux variables de session : Pour accéder aux données de session,

utilisez simplement $_SESSION comme suit :
<?php
// Accès aux variables de session
echo 'ID Utilisateur : ' . $_SESSION['utilisateur_id'];
echo 'Nom Utilisateur : ' . $_SESSION['nom_utilisateur'];

70
?>
70
4. Suppression de variables de session : Vous pouvez supprimer des

variables de session spécifiques en utilisant unset() ou toutes les
variables de session en appelant session_unset().
<?php
// Suppression d'une variable de session
unset($_SESSION['nom_utilisateur']);
// Suppression de toutes les variables de session

session_unset();
?>
5. Fermeture de la session : Pour terminer une session et libérer toutes

les ressources associées, utilisez session_destroy().
<?php
// Fermeture de la session
session_destroy();
?>
 Cookies en PHP :
Les cookies sont de petits morceaux de données envoyés par le serveur web et
stockés sur le côté client (dans le navigateur). Ils sont souvent utilisés pour
stocker des informations persistantes sur l'ordinateur de l'utilisateur. Voici
comment utiliser les cookies en PHP :
1. Définition d'un cookie : Utilisez la fonction setcookie() pour définir un

cookie. Vous pouvez spécifier diverses options comme le nom, la valeur,
la durée de vie, le chemin, le domaine, etc.
<?php
// Définition d'un cookie qui expire dans 1 heure
setcookie('nom_utilisateur', 'John', time() + 3600);
?>

71
2. Accès à un cookie : Les cookies sont accessibles via le tableau

71
$_COOKIE après qu'ils ont été définis.
<?php
// Accès à un cookie
echo 'Nom Utilisateur : ' . $_COOKIE['nom_utilisateur'];
?>
3. Modification d'un cookie : Vous pouvez modifier un cookie en

redéfinissant ses valeurs à l'aide de setcookie().
<?php
// Modification d'un cookie
setcookie('nom_utilisateur', 'Jane', time() + 3600);
?>
4. Suppression d'un cookie : Pour supprimer un cookie, définissez sa

durée de vie à une date antérieure à l'heure actuelle.
<?php
// Suppression d'un cookie
setcookie('nom_utilisateur', '', time() - 3600);
?>
 Sécurité et Précautions :
 Sécurité des sessions : Assurez-vous de stocker uniquement des

données sensibles dans les sessions et non dans les cookies, car ces
derniers sont stockés côté client.
 Sécurité des cookies : Évitez de stocker des informations sensibles
dans les cookies car ils peuvent être lus ou modifiés par l'utilisateur.

72
ANNEXE
72
DEPLOIEMENT D'UNE APPLICATION WEB
Le déploiement d'une application PHP implique de rendre votre application

accessible via un serveur web, généralement sur Internet. Voici les étapes
générales pour déployer une application PHP :
1. Préparation de l'Application PHP :
Avant le déploiement, assurez-vous que votre application PHP est prête :
 Assurez-vous que votre code est prêt : Vérifiez que votre application
PHP fonctionne correctement localement. Testez toutes les
fonctionnalités et assurez-vous qu'il n'y a pas d'erreurs ou de bogues
critiques.
 Configuration de la base de données : Assurez-vous que la
configuration de la base de données dans votre application correspond
aux paramètres du serveur de production.
 Gestion des dépendances : Si votre application utilise des
dépendances externes (comme des bibliothèques PHP), assurez-vous
qu'elles sont incluses dans votre déploiement ou que le serveur de
production peut les installer.
2. Choix d'un Environnement de Déploiement :
Pour déployer une application PHP, vous aurez besoin d'un serveur web
configuré pour exécuter PHP. Les options courantes incluent :
 Serveurs web populaires : Apache, Nginx.

 Solutions de déploiement clés en main : Services d'hébergement web,
plateformes de cloud computing (comme AWS, Google Cloud, Azure).
3. Préparation du Serveur de Production :
 Configurer le serveur web : Installez et configurez Apache, Nginx ou

un autre serveur web sur votre serveur de production. Assurez-vous que

73
PHP est également installé et configuré correctement avec le serveur

73
web.
 Base de données : Assurez-vous que la base de données nécessaire
pour votre application est installée et accessible depuis le serveur web.
 Sécurité : Configurez les règles de pare-feu et sécurisez votre serveur
pour protéger votre application contre les attaques potentielles.
4. Transfert des Fichiers :
Une fois que votre serveur est prêt, transférez les fichiers de votre application
PHP vers le serveur de production. Vous pouvez utiliser plusieurs méthodes
pour transférer les fichiers :
 FTP (File Transfer Protocol) : Utilisez des outils comme FileZilla pour
transférer manuellement les fichiers de votre machine locale vers le
serveur.
 Git : Si vous utilisez Git pour versionner votre application, vous pouvez
cloner le dépôt sur le serveur de production et tirer les dernières
modifications.
5. Configuration de l'Application sur le Serveur :
 Configuration du virtual host (hôte virtuel) : Configurez Apache ou

Nginx pour diriger les requêtes vers votre application PHP. Cela implique
généralement de créer un fichier de configuration pour définir le
document root, les règles de réécriture (si nécessaire) et d'autres
paramètres spécifiques à votre application.
 Permissions des fichiers : Assurez-vous que les permissions des
fichiers sur le serveur sont correctement configurées pour que votre
application puisse lire et écrire les fichiers nécessaires.
6. Tests et Validation :
 Tests de fonctionnement : Testez votre application sur le serveur de

production pour vous assurer que tout fonctionne correctement.

74
Assurez-vous que toutes les fonctionnalités, les formulaires, les

74
requêtes à la base de données, etc., fonctionnent comme prévu.
 Tests de performance : Vérifiez les performances de votre application
sous charge pour identifier les éventuels goulets d'étranglement.
7. Maintenance et Mise à Jour :
 Sauvegardes : Mettez en place des stratégies de sauvegarde régulières

pour vos données et votre application.
 Mises à jour : Assurez-vous de maintenir votre application et ses
dépendances à jour pour bénéficier des dernières fonctionnalités et
correctifs de sécurité.
En suivant ces étapes, vous serez en mesure de déployer votre application PHP
de manière sécurisée et efficace, en la rendant accessible aux utilisateurs sur
Internet tout en maintenant une performance optimale et une stabilité.
Assurez-vous de documenter votre processus de déploiement pour faciliter la
gestion future de votre application.

75
WEBOGRAPHIE
75
1. MDN Web Docs : https://developer.mozilla.org/en-US/docs/Web

2. W3Schools : https://www.w3schools.com/
3. Stack Overflow : https://stackoverflow.com/
4. CSS-Tricks : https://css-tricks.com/
5. Smashing Magazine : https://www.smashingmagazine.com/
6. A List Apart : https://alistapart.com/
7. SitePoint : https://www.sitepoint.com/
8. Codecademy : https://www.codecademy.com/
9. FreeCodeCamp : https://www.freecodecamp.org/
10. DEV Community : https://dev.to/
Ces ressources en ligne offrent une variété de tutoriels, articles, forums de

discussion et cours pour vous aider à améliorer vos compétences en
développement web.

Cours de développement web

Transféré par

Droits d'auteur :

Formats disponibles

Cours de développement web

Transféré par

Informations du document

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

Cours de développement web

Transféré par

Droits d'auteur :

Formats disponibles

1

Chapitre 1 : Introduction au développement web 1

Le développement Web est le travail nécessaire au développement d'un site

1.2. Les différentes technologies du web (HTML, CSS, JavaScript, etc.)

La première page d’un document HTML a pour nom (index.html) et l’extension

2. CSS (Cascading Style Sheets) :

 Langage de feuilles de style pour contrôler la présentation et la mise en

L’extension d’une feuille de style Css est .css

Ir. Laurent KOMPANI ESOKELI +243 85 36 35 877 – 81 490 57 52

L’extension d’un fichier JavaScript est .js

5. Langages côté serveur :

Ces technologies, combinées de différentes manières, permettent de créer des

1.3. Environnement de développement web (éditeurs de code,

L'environnement de développement web fait référence à l'ensemble des outils

Ir. Laurent KOMPANI ESOKELI +243 85 36 35 877 – 81 490 57 52

Ils Offrent des fonctionnalités avancées comme la coloration syntaxique,

La fonction principale d'un navigateur web est de permettre la consultation

 L'utilisateur donne au navigateur web l'adresse web de la ressource à

Il existe de nombreux navigateurs web pour toutes sortes de matériels

Ir. Laurent KOMPANI ESOKELI +243 85 36 35 877 – 81 490 57 52

CHAPITRE 2 : HTML et structure des pages web 4

Le langage HTML (HyperText Markup Language) est le langage standard pour

2.1. Notion des balises HTML

Il existe deux types de balises HTML :

Syntaxe :

Ir. Laurent KOMPANI ESOKELI +243 85 36 35 877 – 81 490 57 52

 Structure de base d'un document HTML

Un document HTML de base commence par la balise <!DOCTYPE html>, qui

 L'en-tête (<head>): Cette section contient des informations

 <meta charset="utf-8"> Cet élément définit le jeu de caractères utilisé

 <meta name="viewport" content="width=device-width">

 <title></title> définit le titre de la page, qui apparaîtra dans l'onglet

 Le corps (<body>): Cette section contient le contenu visible de la page

Ir. Laurent KOMPANI ESOKELI +243 85 36 35 877 – 81 490 57 52

Les principales balises de structure du contenu web :

1. <header> : Définit l'en-tête de la page ou d'une section.

Ir. Laurent KOMPANI ESOKELI +243 85 36 35 877 – 81 490 57 52

<h1>Mon titre principal</h1>

<p>Voici un paragraphe simple</p>

 Les listes non-ordonnées

<p>Liste des institutions d’enseignements supérieurs et

Ir. Laurent KOMPANI ESOKELI +243 85 36 35 877 – 81 490 57 52

 Les listes ordonnées

<p>Liste des institutions d’enseignements supérieurs et

Chaque élément d'une liste est placé dans un élément <li>.

Un lien hypertexte permet, en cliquant dessus, d'atteindre un autre endroit de

Un élément <a> (« a » correspondant à « ancre »). Pour placer un lien dans un

<a href=’nom de la page cible.html ou .php’> texte de

<a href=’dossier de la page/nom de la page cible.html ou

<a href=’../dossier de la page/nom de la page cible.html ou

Ir. Laurent KOMPANI ESOKELI +243 85 36 35 877 – 81 490 57 52

<a href="pages/photo.htm">Gallérie photo</a> <a

L’enseignement en RDC est<a href="article.html">Lire plus</a>

LES TABLEAUX HTML

<table> définit le début d'un tableau.

Exemple : Tableau Simple

Exemple : Tableau Complexe

Ir. Laurent KOMPANI ESOKELI +243 85 36 35 877 – 81 490 57 52

Les formulaires HTML

 <textarea> : Zone de texte multiligne.

- Flottants (`float`) : Utilisés principalement pour des mises en page

- Flexbox : Idéal pour les mises en page unidimensionnelles, comme les