Cours de Programmation Web-1 PDF

UNIVERSITE DE DOUALA
UNIVERSITY OF DOUALA
Ecole Supérieure des Sciences Economiques et Commerciales
Advanced School of Economics and Commerce
Cours de programmation Web

Chapitre 1 Introduction à l’internet
1. Historique et Structure
a. Historique
C’est à la fin des années 1960 qu’est n l’Internet, dans le cadre ‘un projet de recherche militaire initié
par le ministre de la Défense américain. Le Gouvernement créa un réseau couvrant une large zone
géographique et capable de résister à une attaque nucléaire. En cas de défaillance d’une partie de ce
réseau, les informations pouvaient circuler par de nouvelles voies, contournant les ordinateurs hors
service.
Le réseau s’est rapidement agrandi, incluant peu à peu des scientifiques t des chercheurs résidant
dans tout le pays des écoles, des entreprises, des divers organismes et des particuliers du monde
entier.
b. Structure
L’Internet se compose de milliers de réseaux interconnectés dans le monde entier. Un réseau est
constitué d’un ensemble d’ordinateurs relier entre eux afin de partager des informations.
Chaque administration, entreprise et organisme présent sur l’Internet prend en charge la gestion de
son propre réseau.
2. Services offerts par Internet

Internet propose de multiples ressources ou services. Le service le plus connu est le World Wide
Web, mais il en existe d'autres : la messagerie électronique (e-mail), les forums de discussion, les
achats en ligne, le transfert de fichiers FTP et les services de discussion en direct (IRC) etc. Nous
allons nous intéresser à quelques-uns notamment :
a. La messagerie électronique
La messagerie électronique, ou e-mail, est le plus vieux service d'Internet (années 70). Il est aussi le
plus utilisé en raison de sa commodité et de sa facilité d'emploi. Ce service permet à tous les
internautes d'envoyer et de recevoir des messages électroniques quasi instantanément. Les
messages se composent de textes et peuvent contenir des fichiers attachés (textes, feuilles de calcul
ou images).
Pour pouvoir bénéficier de ce service, il faut avoir accès à un logiciel de messagerie électronique
(constitué d'une boîte d'envoi et d'une boîte de réception, comparable à une boîte aux lettres ; ex :
Hotmail, Yahoo, Outlook, Gmail, ...) et disposer d'une adresse électronique.
b. L'IRC ou le Chat
Ce service offre la possibilité de dialoguer avec d'autres personnes, en temps réel, soit par écrit
(clavier), soit oralement (écouteur / micro). Il faut pour cela disposer d'un logiciel adapté (Google
Meeting, Zoom ...). L'internaute peut ainsi participer à une téléconférence (dialogue entre plusieurs
personnes). Il peut aussi participer à une visioconférence s'il utilise une caméra spéciale (webcam).
*********************************************
Enseignant : M. Lee MeNGUELE | Tel : 696 47 28 56 | Email : leemenguele@hotmail.com
1
c. Achats en ligne
Vous pouvez commander des produits sur l’Internet sans même quitter votre domicile : livres,
programmes informatiques, vêtements, nourritures, bijoux etc. ne sont que quelques exemples des
produits disponibles.
d. Groupes de discussions
Adhérer à un groupe de discussion permet de rencontrer des gens qui partagent les mêmes centres
d’intérêt dans le monde entier. Vous pouvez poser des questions et aborder tout type de sujet, selon
la spécialité du groupe de discussion.
3. Introduction au Web
a. Le World Wide Web
Le www ou tout simplement le Web est un gigantesque réservoir d'informations se présentant sous
forme de textes, d'images, de sons ou de vidéos (c'est-à-dire sous forme multimédia).
Le Web est constitué de millions de documents : les pages Web (pages écrites en langage HTML).
Certaines de ces pages sont regroupées en une seule et même structure, appelée "site Web", créée
et gérée par une personne en particulier (Webmaster).
Les pages Web sont stockées sur différents ordinateurs appelés "ordinateurs hôte" ou "serveurs".
Ces serveurs, disposant d'une importante capacité en disque dur, sont soit l'ordinateur des
fournisseurs d'accès à Internet (offrant ainsi l'hébergement de pages Web), soit l'ordinateur
d'entreprises d'hébergement de sites ou encore un ordinateur spécifique d'une organisation
quelconque (Université, école, entreprise privée, ...).
Chacune des pages constituant le Web est facilement accessible par les utilisateurs puisqu'elle
possède une adresse URL (Uniform Ressource Locators). Par exemple :
http://www.usborne.co.uk/public/homepage.htm.
b. Le navigateur web
Un navigateur web est un programme qui permet de consulter et de rechercher des informations sur
le Web.
En effet, il s’agit donc d’un logiciel permettant d’interpréter le code source de la page, composé
principalement d’HTML, et de CSS.
Le HTML (Hypertext Markup Language) et le CSS (Cascading Style Sheets) sont donc 2 langages qui,
ensemble, permettent de créer des sites web. Tous les sites web sont basés sur ces langages !
4. Se connecter
Il existe de nos jours plusieurs façons de se connecter à Internet, nous allons donc nous intéresser à
quelques-unes les plus courantes, notamment :
a. Types de connexion
• Modem (câble ou Wifi) : la plupart des utilisateurs se servent d’un modem pour se connecter
à Internet via une ligne téléphonique (téléphone fixe) ou une ligne optique (fibre optique).
*********************************************
2
• 4G (téléphonie mobile) : Des opérateurs proposent des box Internet fonctionnant grâce au
signal 4G. Vous pouvez également bénéficier de ce type de connexion via votre smartphone
4G.
• Autres : il existe plusieurs types de connexions alternatives de se connecter à internet
o Le satellite
o La boucle locale radio (ou Wimax)
o Les réseaux privés virtuels (VPN)
o Etc.
b. Mode de connexion
• Fournisseurs d’accès Internet (FAI) : Un FAI est une société assurant l’accès à internet. La
plupart des FAI vous permettent de passer chaque mois un certain nombre d’heures sur
internet pour un forfait déterminé.
• Cybercafé : Il s’agit d’un local qui met à la disposition de ses clients des ordinateurs
connectés à Internet.
• CoWorking Space : ou cotravail, est une méthode d'organisation du travail qui regroupe un
espace de travail partagé et un réseau de travailleurs indépendants pratiquant l'échange et
l'ouverture. Très souvent ces espaces offrent gratuitement l’accès à internet à leurs abonnés.
• Universités et entreprise : Les universités et les établissements d’enseignement supérieur
proposent souvent aux étudiants et aux enseignants un accès gratuit à Internet. De
nombreuses sociétés permettent également à leurs employés de naviguer gratuitement.
Chapitre 2 : Apprendre les bases de la programmation

1. Programmation pour débutants : la préparation
Pour apprendre la programmation, il est très important de se documenter. Vous pouvez vous doter
de base nécessaires grâce à une lecture minutieuse, et cela passe d’abord par la lecture des sujets de
forum discussion. Ainsi, la plupart des questions imaginables ont déjà été posées et les internautes y
ont sans doute également apporté une réponse, ou du moins tenté. Si vous ne trouvez pas de
réponse satisfaisante, vous pouvez poser vous-même votre question à la grande communauté des
programmeurs.
2. Quels sont les langages de programmation ?

Une bonne partie de votre recherche et de votre préparation doit consister à découvrir les différents
langages de programmation et à trouver lequel est le plus adéquat pour votre projet. Les plus connus
et utilisés sont les suivants :
• Java
• C
• C++
• C#
• Objective-C
• Python
• Visual Basic .NET
*********************************************
3
• HP
• JavaScript
La complexité de ces langages est variable : certains sont en effet plus difficiles que d’autres à
maîtriser. Vous devez toujours garder en tête la raison pour laquelle vous voulez apprendre à
programmer. Souhaitez-vous concevoir des sites Web à l’avenir ? Souhaitez-vous plutôt programmer
un microcontrôleur qui vous servirait au quotidien (dans votre voiture par exemple) ?
3. Programmation Web
Pour concevoir des pages Internet ou bien adapter une application Web, il faut commencer par les
bases. HTML et CSS ne sont pas des langages de programmation en soi mais ils représentent
cependant la base de la plupart des sites et constituent ainsi le point de départ d’un débutant en
programmation. On peut mettre en place des éléments de pages Web à l’aide de HTML et ainsi
concevoir le squelette d’un site. L’étape suivante est la découverte de HTML5 qui propose plus de
possibilités audiovisuelles.
Avec CSS, il est question de conception et d’organisation. Toutes les caractéristiques des différents
éléments sont fixées par ce biais, à savoir leurs couleurs ou leurs positions par exemple. Cependant,
HTML et CSS ne permettent que la conception de pages fonctionnelles statiques et simples. Si vous
réussissez à prendre en main ces outils de base, vous pourrez faire de la programmation.
Pour des premiers essais avec des pages dynamiques, l’utilisation de JavaScript est le meilleur choix
car elle s’avère assez simple. A l’aide de JavaScript, on peut concevoir des sites Web dynamiques qui
permettent par exemple l’adaptation automatique de la taille des images.
PHP et SQL complètent le paquet de base pour la programmation d’applications Web. PHP est un
langage de script open source et peut être intégré au protocole HTML.
SQL est quant à celui-ci un langage de base de données avec lequel on peut définir la structure des
données, modifier ces dernières ou encore extraire des ensembles de données.
Lors de la conception de pages complexes (incluant une zone d’identification des membres par
exemple), l’utilisation d’un système de gestion de contenu (CMS pour Content Management System)
allège considérablement les connaissances requises sur PHP et SQL.
4. Programmer une application

Afin de programmer des applications comme des jeux, voire des programmes de retouche photo, il
convient de miser sur d’autres bases. Parmi celles-ci on trouve notamment C, C++ et Java. Ces trois
langages présentent une syntaxe similaire. Celui qui maîtrise C ou C++ va ainsi plus facilement
prendre en main Java.
5. Apprendre à programmer en ligne

Que vous soyez employé ou créateur d’une start-up par exemple, posséder des connaissances en
programmation est un atout indéniable dans la branche digitale, mais aussi un gros défi. Il existe de
l’aide sur Internet pour un apprentissage rapide et sans détour : des cours en ligne sont en effet
disponibles pour apprendre la programmation.
*********************************************
4
a. Udemy : https://www.udemy.com/
La plateforme en ligne Udemy propose plus de 40 000 cours en ligne, de la photographie jusqu’à la
programmation, en passant par le design. Les offres de cours en ligne peuvent être gratuites ou
payantes concernant les principaux thèmes d’informatique (logiciels et programmation). Les
utilisateurs peuvent par conséquent trouver des initiations gratuites à Java, HTML5 ou PHP et
d’autres payantes sur les applications mobiles, le e-commerce, etc. Un point positif pour les
développeurs est le cours de programmation pour entrepreneurs à disposition. Les cours sont
principalement en anglais et ne nécessitent pas toujours d’avoir des connaissances de base. Il y a des
cours gratuits et ceux qui sont payants coûtent environ une dizaine d’euros.
b. Openclassroom : https://openclassrooms.com/fr/
OpenClassrooms est un site web de formation en ligne, créé en 1999 sous le nom de Site du Zéro. Il
propose à ses membres des cours certifiants et des parcours débouchant sur des métiers en
croissance. Initialement orientée autour de la programmation informatique, la plate-forme
numérique couvre, depuis 2013, d'autres thématiques telles que l'entrepreneuriat et le marketing
électronique.
Chapitre 3 : Introduction à la création des pages web

1. Prérequis avant de créer des pages Web
Avant de créer des pages web et les diffuser sur le web, il est important de se poser un certain
nombre de questions non exhaustives à savoir :
a. Pourquoi créer une page web ?

• Raisons personnelles
o Partager des informations personnelles
o Partager des connaissances
o Divertir les lecteurs
o Partager des centre t’intérêt
• Raisons commerciales
o Diffusion d’une information
o Acheter en ligne
o Offre d’emploi
o Prise de contact
b. Quelles sont les étapes de création d’un page web ?

• Concevoir ses pages : Déterminez l'objectif de vos pages Web. Adoptez pour elles un sujet ou
un thème principal, puis définissez le type d'information à y faire figurer.
• Réunir les informations : Regroupez les informations à intégrer dans vos pages Web : textes,
images, schémas et numéros de contacts, notamment. Assurez-vous que ces données se
rapportent bien directement au sujet ou au thème principal retenu pour vos pages Web.
• Structurer les informations : Classez les informations réunies en groupes distincts, chacun
étant destiné à constituer à terme une page Web séparée. Faites e sorte que chaque page
*********************************************
5
Web tra d'un concept ou d'une idée spécifique et qu'elle renferme suffisamment de données
pour occuper l'intégralité d'un écran.
• Saisir le texte : Saisissez le texte à faire figurer dans vos pages Web dans un éditeur ou un
traitement de texte. Créez un document par page Web. Vous pouvez ensuite ajouter au texte
des balises HTML (HyperText Markup Language), afin de convertir ces documents en pages
Web.
• Ajouter des images : En ajoutant des images, vous améliorez la présentation de vos pages
Web. Vous pouvez créer vos propres graphismes, numériser des illustrations sur votre
ordinateur au moyen d'un scanner, acheter des images chez un revendeur informatique ou
en rechercher sur l'Internet.
• Ajouter des liens : Vous pouvez ajouter des liens à vos pages Web, c'est-à-dire du texte ou
des images que les lecteurs peuvent sélectionner en vue d'afficher d'autres pages sur le Web.
Les liens permettent aux visiteurs d'accéder rapidement aux informations qui les intéressent.
• Publier vos pages : Une fois vos pages Web créées, vous pouvez les transférer vers un
ordinateur qui les diffusera sur le Web. Testez alors vos pages, afin de vous assurer que les
liens fonctionnent correctement et que vos données se présentent conformément à votre
attente.
c. Comment organiser les pages d’un site web ?

L’organisation de vos pages web dépend du type d’informations qu’elles renferment et des liens qui
les unissent.
• Linéaire : Dans une organisation linéaire, vos pages Web se suivent de façon continue. Cela
convient parfaitement aux pages à lire dans un ordre précis, comme dans le cas d'une
histoire ou d'instructions étape par étape.
• Hiérarchique : Dans une organisation hiérarchique, toutes les pages Web sont reliées à une
page principale. Celle-ci donne des renseignements d'ordre général, alors que les autres
pages fournissent des informations plus spécifiques.
• Web : Une organisation de type Web est dépourvue de structure globale. Elle convient
parfaitement à des pages Web que les visiteurs peuvent lire dans un ordre quelconque. Elle
permet aux internautes de passer facilement d'une page à l'autre.
• Mixte : Une organisation mixte offre une extrême souplesse de consultation aux lecteurs de
vos pages Web. Vous pouvez par exemple combine les organisations hiérarchiques et de type
Web.
2. Connaitre les bases et les outils du développement web

Depuis la commercialisation d’internet vers les années 90, les internautes réclament des sites Web
interactifs, intuitifs et avec un design élaboré. Pour répondre à cette demande, les développeurs
disposent de nombreux outils afin d’intégrer du contenu dynamique et pour créer des sites sur-
mesure adaptés à leurs utilisateurs. Les conditions requises pour parvenir à cela reposent sur un
hébergement professionnel, disposant des ressources nécessaires et répondant aux normes
actuelles du Web.
a. Les bases techniques d’un site Web

• Domaines : Chaque projet Web a un nom de domaine, c’est-à-dire une adresse Internet
unique qui lui est attribué. L’enregistrement du nom de domaine est effectué via un
*********************************************
6
hébergeur Web. Lors du choix du nom de domaine, il est recommandé d’opter pour une
formulation courte et concise.
• Espace web : Chaque site Web est composé de données mises à disposition sur un serveur
Web pour être chargées sur Internet. C’est pour cela que les packs d’hébergement Web
comprennent toujours un certain espace de stockage pour les documents HTML, les feuilles
de style, les images, vidéos ou encore les bases de données. Le transfert de ces données est
généralement effectué par FTP (File Transfer Protocol). Un Pack d’hébergement Web doit
être choisi en fonction de sa capacité à pouvoir étendre son espace Web.
• Base de données : Les développeurs Web ont souvent recours à des bases de données
relationnelles lorsque les pages du site ne sont pas statiques et doivent être générées
différemment lors de chaque nouveau chargement de page. Avec ce type de gestion des
données, les informations sont structurées par des tableaux et sont mises en relation avec
d’autres ensembles de données par des numéros d’identification (IDs). La communication et
la transmission de ces données s’effectue généralement en SQL (Structured Query
Language), un langage de bases de données. Parmi les bases de données relationnelles, c’est
le logiciel en open source MySQL qui est le plus répandu pour le développement de sites
Web dynamiques.
• Serveur web : En règle générale, les packs d’hébergement Web passent par un hébergement
mutualisé. Ce modèle d’hébergement consiste à ce que plusieurs domaines clients se
partagent le même serveur et ses ressources. Pour les projets professionnels de grande
envergure, les hébergeurs Web proposent différentes variantes de serveurs Web, avec
lesquels les clients peuvent bénéficier d’un matériel sur-mesure, adapté à leurs besoins
précis. Pour les grandes entreprises, les systèmes d’hébergement dédiés sont également une
bonne solution.
b. Les outils principaux de la programmation web

Si les développeurs Web ont une grande marge de manœuvre dans la création de leur projet en
programmant avec l’aide d’un éditeur de texte., il est cependant nécessaire de maîtriser les bases de
la programmation Web et des langages tels que HTML, CSS, JavaScript ou encore PHP.
• HTML : Le HTML est un langage (Hypertext Markup Language) qui structure de manière
basique l’écriture de contenus digitaux avec des balises de formatage (tags et éléments
meta). De cette manière les éléments de texte, les titres, les graphiques ou encore les
hyperliens peuvent être mis en place et c’est le code source qui constitue la structure d’un
site Web. Par exemple, un site web statique est tout simplement composé d’une sélection de
documents HTML reliés entre eux. La version actuelle d’HTML5 étend le langage de balisage
extensible aux éléments audio et vidéo. En revanche, la présentation des contenus est
définie par le langage de formatage CSS, qui permet la mise en page.
• CSS : Le langage CSS (Cascading Style Sheets) est un langage de formatage standard pour les
documents HTML permettant leur mise en page. Les développeurs Web utilisent CSS pour
attribuer des règles qui permettront à un navigateur d’interpréter des éléments définis dans
le code en éléments visuels concrets qui seront représentés sur un site Web. La version
actuelle standard CSS3 comprend des fonctionnalités permettant de structurer la mise en
page, les couleurs, la typographie, les effets d’ombre ou encore les animations.
*********************************************
7
• JavaScript : Les sites Web modernes sont interactifs et comprennent des champs de saisie,
des menus en accordéon ou encore des diaporamas. JavaScript est utile lorsque l’on veut
intégrer des contenus dynamiques à une page HTML. Ce langage de script élargit la structure
de base HTML et CSS dans la mesure où les éléments dynamiques peuvent être intégrés
ultérieurement, actualisés ou modifiés.
• PHP : Si les pages Web statiques sont toujours prêtes à être envoyées via le serveur Web, il
n’en va pas de même pour les pages Web dynamiques, qui ne sont générées que sur
demande du navigateur Web. Ce sont les langages de script tels que PHP qui permettent
cela. Le navigateur va établir une requête qui utilise le protocole HTTP et indique la page
demandée, entre autres. Lorsque la requête arrive au serveur, elle transmet l'adresse
demandée, qui est par la suite traitée par un serveur Web. Le serveur Web va l'interpréter,
trouver le fichier demandé et le fichier est par la suite renvoyé en réponse HTTP.
3. Introduction à HTML
Les pages Web sont des documents HTML. Ces derniers se composent de texte et d'instructions
spéciales, appelées balises. Les documents HTML portent l'extension .html ou .htm (exemple:
index.html).
Un navigateur Web interprète les balises figurant dans un document HTML et affiche ce dernier sous
la forme d'une page Web.
Un document HTML peut être affiché sur n'importe quel type d'ordinateur, notamment un
Macintosh ou un poste compatible IBM. En conséquence : vous n'avez pas à créer de documents
HTML différents pour les divers types d'ordinateurs. Par ailleurs, les documents HTML renfermant
exclusivement du texte, leur chargement sur le Web est rapide.
a. Utiliser les balises

• Balises : Chaque balise donne une instruction spéciale, encadrée par des chevrons <>. La
plupart d'entre elles se présentent sous la forme d'une balise d'ouverture et d'une balise de
fermeture, qui affectent le texte qu'elles renferment. La balise de fermeture inclut une barre
oblique (/). Pour certaines balises, seul l'exemplaire d'ouverture est utilisé. Vous pouvez
saisir les balises en majuscules ou en minuscules. La plupart des gens les tapent en lettres
capitales, afin de les distinguer du texte principal.
o <H1>Mirifiques pages Web</H1>
• Attributs : Certaines balises possèdent des attributs qui offrent diverses options. L'attribut
COLOR de la balise , par exemple, permet de changer la couleur du texte.
o 
• Structure d’une page web : Les balises indiquent la structure d'une page Web au navigateur,
mais n'en spécifient pas précisément le mode d'affichage. Chaque navigateur Web peut
interpréter des balises HTML différemment, de sorte qu'une page Web présentée dans des
navigateurs distincts n'a pas forcément la même apparence.
• Visualiser les balises HTML : Lorsque vous trouvez une page Web à votre goût, vous pouvez
visualiser les balises HTML employées par l'auteur de cette page grâce à votre navigateur.
Cela constitue une source d'inspiration formidable pour créer vos propres pages Web.
*********************************************
8
b. Outils de création des pages web

Pour créer des pages web, vous pouvez utiliser soit un programme d’édition ou de traitement de
textes, un éditeur HTML ou encore un éditeur visuel.
• Editeur ou traitement de texte : Pour créer une page Web au moyen d'un éditeur ou d'un
traitement de texte, vous devez en saisir le texte, puis ajouter des balises HTML spécifiant la
mise en forme de ce texte dans la page Web. Il est indispensable de posséder un navigateur
Web pour voir comment se présentera votre page sur le Web.
o Editeur de texte : Un éditeur de texte est un programme élémentaire qui permet de
créer et de modifier des documents renfermant uniquement du texte. Ces
applications n'incluent toutefois pas de fonctionnalités d'édition et de mise en forme
avancées. Parmi les éditeurs de texte connus, citons le Bloc-notes pour Windows et
Simple Text pour Macintosh.
o Traitement de texte : Un traitement de texte est un programme qui propose des
outils d'édition et de mise en forme avancés, à même de vous faciliter la création de
documents. Aucun formatage appliqué au texte n'apparaît lorsque vous consultez
ces documents sur le Web. Microsoft Word et Corel WordPerfect sont des
traitements de texte répandus.
o De nombreux traitements de texte permettent de convertir des documents créés en
pages Web et de produire ainsi des pages Web sans connaître HTML.
• Editeur HTML :
o Un éditeur HTML est un programme qui permet de créer des pages Web. Ces
applications comportent des menus et barres d'outils grâce auxquels vous pouvez
ajouter des balises HTML à vos pages. De nombreux éditeurs HTML incluent un outil
de vérification à même de rechercher d'éventuelles erreurs HTML dans vos pages
Web. Créer une page Web dans un tel programme oblige à connaître le HTML.
o Certains éditeurs HTML permettent de voir comment les pages Web créées se
présenteront sur le Web. Avec d'autres, vous devez visualiser vos pages dans un
navigateur Web.
o Notepad++ et Visual studio sont des éditeurs HTML(mais pas que…) répandus
• Editeur visuel : Un éditeur visuel est un programme qui permet de produire des pages Web
graphiquement. Ces applications insèrent les balises HTML à votre place au fil de la création
de votre page. Elles évitent donc de devoir connaître HTML. Les éditeurs visuels masquent
les balises HTML, de sorte que vous pouvez visualiser la présentation de vos pages Web au
fur et à mesure de leur élaboration.
o C’est le principe de la plupart des CMS comme WordPress avec son plugin phare
Elementor qui est un visual page creator.
Travaux dirigés : Manipulation des balises HTML et les feuilles de style

CSS
*********************************************
9
Chapitre 4 : Introduction à la programmation coté serveur

1. Développez un site web dynamique et interactif
L’objectif de ce chapitre est d’apprendre à développer un site web dynamique et interactif à l’aide de
PHP, pour répondre à cet objectif, nous présentons rapidement les fonctionnalités de base du
langage PHP avant d’étudier quelques fonctionnalités nécessaires au développement d’un site web
dynamique et interactif :
• Gestion des formulaires.

• Accès aux bases de données, notamment MySQL.
• Gestion des sessions (authentification, gestion d’un contexte, utilisation des cookies).
• Envoi de courriers électroniques, notamment au format HTML et avec pièce jointe.
• Gestion des fichiers (dont le transfert de fichiers depuis le poste de l’utilisateur vers le
serveur).
•
a. Introduction à PHP
PHP est un langage de script qui s’exécute côté serveur, le code PHP étant inclus dans une page
HTML classique.
Il est différent d’un langage comme le JavaScript, où le code est exécuté côté client (dans le
navigateur) car le code PHP est exécuté côté serveur. Le résultat de cette exécution est intégré dans
la page HTML qui est envoyée au navigateur. Ce dernier n’a aucune connaissance de l’existence du
traitement qui s’est déroulé sur le serveur.
Cette technique permet de réaliser des pages web dynamiques dont le contenu peut être
complètement ou partiellement généré au moment de l’appel de la page, grâce à des informations
récupérées dans un formulaire ou extraites d’une base de données.
Exemple simple de page PHP
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<meta charset="utf-8" />
<title>Exemple de page PHP</title>
</head>
<body>
<?php
echo ’Bonjour Olivier !’;
?>
</body>
</html>
La partie en gras est du code PHP inclus dans la page HTML à l’intérieur des balises <?php et ?>. Sur
cet exemple simple, le code PHP se contente d’afficher un texte statique "Bonjour Olivier !" grâce à la
fonction echo. Dans un vrai programme PHP, il est probable que ce texte serait généré
dynamiquement en fonction de l’identification de l’utilisateur.
*********************************************
10
Pour indiquer au serveur web qu’une page HTML contient du code PHP à exécuter, il suffit de donner
au fichier une extension particulière : .php (sauf configuration particulière du serveur).
Lorsqu’un fichier PHP est demandé au serveur web, le code PHP inclus dans la page HTML est
d’abord exécuté sur le serveur. Le résultat de cette exécution est inséré dans la page à la place du
code PHP et la page est renvoyée au navigateur.
De plus, PHP a été écrit spécialement pour le Web et possède des fonctionnalités parfaitement
adaptées à ce type de développement.
b. Structure d’une page PHP

• La balise :
Comme nous l’avons vu précédemment, le code PHP est inclus dans une page HTML à l’intérieur de
balises (aussi appelées tags). La syntaxe habituelle, recommandée est : <?php ... ?>
• La fonction echo
La fonction echo est la fonction de base de toute page PHP. Elle permet d’afficher une ou plusieurs
chaînes et donc d’inclure du texte dans la page HTML envoyée au navigateur.
Syntaxe
echo(chaîne texte)
echo chaîne texte[,...]
texte : texte à afficher.
La première syntaxe n’accepte qu’un paramètre alors que la deuxième en accepte plusieurs.
Exemple
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<meta charset="utf-8" />
<title>Exemple de page PHP</title>
</head>
<body>

<?php
echo(’Bonjour Olivier !’);
?>
 
<?php
echo ’Bonjour ’,’Valérie ’,’!’;
?>

</body>
</html>
Résultat
*********************************************
11
Bonjour Olivier !
Bonjour Valérie !
• Séparateur d’instruction
En PHP, toutes les instructions doivent se terminer par un point-virgule.
Exemple
<?php
echo ’Bonjour ’;
echo ’Olivier !’;
?>
Résultat
Bonjour Olivier !
En cas d’omission, une erreur est générée.
La seule exception concerne l’instruction qui précède la balise de fin pour laquelle le point-virgule
peut être omis.
• Commentaire
PHP propose deux syntaxes :
// ou # pour insérer du commentaire sur une ligne "dédiée" ou à la suite d’une instruction.
/* ... */ pour insérer du commentaire sur plusieurs lignes.
Exemple
<html>
<?php
// commentaire sur une seule ligne
# commentaire sur une seule ligne
/* commentaire sur
plusieurs lignes */
echo ’Bonjour ’; // commentaire jusqu’à la fin de la ligne
echo ’Olivier’; # commentaire jusqu’à la fin de la ligne
?>
</html>
Résultat
Bonjour Olivier !
c. Les bases du langage PHP

• Constante
La fonction define ou le mot-clé const permettent de définir une constante.
*********************************************
12
Une constante est une zone mémoire identifiée par un nom qui contient une valeur lisible mais non
modifiable dans le programme.
Syntaxe
booléen define(chaîne nom, mixte valeur[, booléen sensible_casse])

const nom = valeur
nom Nom de la constante
valeur Valeur de la constante.
Une fois créée, une constante n’est plus modifiable
Le nom d’une constante ne doit pas commencer par un $ car ce préfixe est réservé au nom des
variables
Exemple
<?php
// Définir une constante (dont le nom est par défaut
// sensible à la casse).
define(’CONSTANTE’,’valeur de CONSTANTE’);
// Afficher la valeur de CONSTANTE (=> OK).
echo ’CONSTANTE = ’,CONSTANTE,’ ’;
// Utilisation du mot-clé const (depuis la version 5.3)
const UNE_AUTRE_CONSTANTE = ’PHP 7.0’;
echo ’UNE_AUTRE_CONSTANTE = ’, UNE_AUTRE_CONSTANTE,’ ’;
?>
Résultat
CONSTANTE = valeur de CONSTANTE

UNE_AUTRE_CONSTANTE = PHP 7.0
Traditionnellement, les noms des constantes sont définis en majuscules.
La portée d’une constante est le script dans lequel elle est définie. Une constante peut donc être
définie dans une première section de code PHP et utilisée dans une autre section de code PHP du
même script.
• Variables
Une variable est une zone mémoire identifiée par un nom qui contient une valeur lisible ou
modifiable dans le programme.
En PHP, les variables sont identifiées par le préfixe $ suivi d’un nom qui respectent les règles de
nommage
Le nom des variables est sensible à la casse : $nom et $Nom sont vues par PHP comme deux
variables différentes
Une valeur peut être affectée à une variable grâce à l’opérateur d’affectation "="
*********************************************
13
Exemple
<?php
// Initialiser une variable $nom.
$nom = ’Olivier’;
// Afficher la variable $nom.
echo ’$nom = ’,$nom,’ ’;
// Afficher la variable $Nom.
echo ’$Nom = ’,$Nom;
echo ’ => vide (c\’est une autre variable) ’;
// Modifier la valeur (et le type) de la variable $nom.
$nom = 123;
// Afficher la variable $nom.
echo ’$nom = ’,$nom,’ ’;
?>
Résultat (les erreurs de niveau E_NOTICE ne sont pas affichées)
$nom = Olivier
$Nom = => vide (c’est une autre variable)
$nom = 123
La portée d’une variable est le script dans lequel elle est définie. Une variable peut donc être définie
dans une première section de code PHP et utilisée dans une autre section de code PHP du même
script.
La durée de vie d’une variable est le temps de l’exécution du script. Lorsque le script se termine, les
variables sont supprimées. Si le même script est appelé plus tard, de nouvelles variables sont
définies.
PHP propose quatre types de données scalaires (ne pouvant contenir qu’une valeur), quatre types
composés (pouvant contenir plusieurs valeurs) et deux types spéciaux :
Types scalaires :
§ nombre entier
§ nombre à virgule flottante
§ chaîne de caractères
§ booléen
Types composés :
§ tableau
§ objet
§ fonction de rappel
§ itérable
Types spéciaux :
*********************************************
14
§ NULL
§ Ressource
• Opérateurs
L’opérateur d’affectation est le signe égal (=).
Syntaxe
$variable = expression;
Les opérateurs arithmétiques sont les suivants :
Exemple ($x=13 et
Opération Opérateur
$y=8)
Somme + echo $x + $y;
=> 21
Soustraction - echo $x - $y;
=> 5
Multiplication * echo $x * $y;
=> 104
Division / echo $x / $y;
=> 1.625
Exponentiation ** echo $x ** $y;
=> 815730721
Modulo (reste de la division entière du premier % echo $x % $y;
opérande par le deuxième) => 5
Opposé - echo -$x;
=> -13
Préincrémentation (incrémente la ++ avant echo ++$x;
variable avant de retourner la valeur de la l’opérande => 14
variable)
Postincrémentation (incrémente la ++ après echo $x++;
variable après avoir retourné la valeur de la l’opérande => 13
variable) echo $x;
=> 14
Prédécrémentation (décrémente la -- avant echo --$x;
variable avant de retourner la valeur de la l’opérande => 12
variable)
Postdécrémentation (décrémente la -- après echo $x--;
variable après avoir retourné la valeur de la l’opérande => 13
variable) echo $x;
=> 12
Le seul opérateur de chaîne est l’opérateur de concaténation, égal au point (.).
Syntaxe
chaîne1.chaîne2;
*********************************************
15
Les opérateurs somme (+), différence (-), multiplication (*), division (/), exponentiation
(**), modulo (%) et concaténation (.) peuvent être combinés avec l’opérateur
d’affectation (=) selon la syntaxe suivante :
Syntaxe Équivalent à
$variable += expression $variable = $variable + expression
$variable -= expression $variable = $variable - expression
$variable *= expression $variable = $variable * expression
$variable /= expression $variable = $variable / expression
$variable **= expression $variable = $variable ** expression
$variable %= expression $variable = $variable % expression
$variable .= expression $variable = $variable . expression
Les opérateurs de comparaison sont les suivants :
Opération Opérateur Exemple ($x=13, $y=8, $z="8")

Égalité == $x == $y => FALSE
$y == $z => TRUE
Égalité et types identiques === $x === $y => FALSE
$y === $z => FALSE

Différent != $x != $y => TRUE
$y != $z => FALSE
Différent ou types différents !== $x !== $y => TRUE
$y !== $z => TRUE

Inférieur < $x < $y => FALSE
$y < $x => TRUE
$y < $z => FALSE

Inférieur ou égal <= $x <= $y => FALSE
$y <= $x => TRUE
$y <= $z => TRUE

Supérieur > $x > $y => TRUE
$y > $x => FALSE
$y > $z => FALSE

*********************************************
16
Opération Opérateur Exemple ($x=13, $y=8, $z="8")

Supérieur ou égal >= $x >= $y => TRUE
$y >= $x => FALSE
$y >= $z => TRUE
Ne confondez pas l’opérateur d’affectation (=) avec l’opérateur de comparaison (==).
Ces opérateurs fonctionnent avec tous les types de données de PHP (voir la
documentation pour les règles de comparaison des types de données autres que les
nombres et les chaînes de caractères).
Les opérateurs logiques sont les suivants :
Opération Opérateur(s) Exemple

Et logique and TRUE and TRUE =>
TRUE
&&
TRUE and FALSE =>
FALSE
FALSE and FALSE =>

FALSE
Ou logique or TRUE or TRUE =>
TRUE
||
TRUE or FALSE =>
TRUE
FALSE or FALSE =>

FALSE
Ou logique exclusif (FALSE si les deux xor TRUE xor TRUE =>
opérandes sont TRUE) FALSE
TRUE xor FALSE =>

TRUE
FALSE xor FALSE =>

FALSE
Non logique ! ! TRUE => FALSE
! FALSE => TRUE
*********************************************
17
d. Manipulation des variables

• Adapter le comportement de votre application à l’aide des conditions
Les conditions permettent à PHP de prendre des décisions en fonction de la valeur des variables.
La forme de condition la plus courante est if ... elseif ... else qui signifie « si »… « sinon si »… «
sinon ».
On peut combiner des conditions avec les instructions && (« et ») et|| (« ou »).
Il est indispensable de retenir les symboles suivants pour bien maitriser l’utilisation des structures
conditionnelles :
Symbole Signification
== Est égal à
> Est supérieur à
< Est inférieur à
>= Est supérieur ou égal à
<= Est inférieur ou égal à
!= Est différent de
La structure conditionnelle que nous allons expérimenter est la suivante if… else
Voici ce qu'on doit écrire, dans l'ordre, pour utiliser cette condition.
• Pour introduire une condition, on utilise le mot if qui signifie « si », en anglais.

• On ajoute à la suite entre parenthèses la condition en elle-même (vous allez voir que vous
pouvez inventer une infinité de conditions).
• Enfin, on ouvre des accolades à l'intérieur desquelles on placera les instructions à exécuter si
la condition est remplie.
• Si la condition n’est pas remplie on peut (dans ce cas on ignore toutes les instructions qui
sont entre les accolades) :
o Soit utiliser une autre condition grâce au mot elseif qui fonctionne exactement
comme if (voir l’exemple ci-dessous)
o Soit mettre fin à la condition en utilisant le mot else qui vous permettre si vous
voulez d’exécuter d’autre instructions au cas où aucune conditions précédente n’a
été remplie.
Exemple :
<?php
$isAllowedToEnter = "Oui";
// Si on a l'autorisation d'entrer
if ($isAllowedToEnter == "Oui") {
// instructions à exécuter quand on est autorisé à entrer
*********************************************
18
echo "Vous êtes autorisé(e) à accéder au site";
} // SINON SI on n'a pas l'autorisation d'entrer
elseif ($isAllowedToEnter == "Non") {
// instructions à exécuter quand on n'est pas autorisé à entrer
echo "Vous n’êtes autorisé(e) à accéder au site";
} // SINON (la variable ne contient ni Oui ni Non, on ne peut pas agir)
else {
echo "Euh, je ne comprends pas ton choix, tu peux me le rappeler s'il te plaît ?";
?>
Pour combiner plusieurs conditions, il faut connaitre les mots clés suivants :
Mot-clé Signification Symbole équivalent

AND Et &&
OR Ou ||
Exemple :
<?php
$isEnabled = true;
$isOwner = false;
$isAdmin = true;
if (($isEnabled && $isOwner) || $isAdmin) {
echo 'Accès à la recette validé';
} else {
echo 'Accès à la recette interdit !';
?>
C'est tout simple, en fait, et ça se comprend très bien : si l'utilisateur est actif et qu'il est l'auteur, il
peut accéder à la recette validée. Sinon, il verra s'afficher un message de refus.
• Utilisez les boucles
Une boucle est une structure qui fonctionne sur le même principe qu'une condition if… else
*********************************************
19
Elle permet de répéter des instructions plusieurs fois : c'est un gain de temps, c'est très pratique, et
bien souvent indispensable.
Pour mettre fin à un boucle, il faut indiquer une condition quel que soit le type de boucle qu’on
utiliser while ou for. Ainsi, tant que la condition est remplie, les instructions dans la boucle vont se
réexécuter et dès que la condition n’est plus remplie, on sort de la boucle.
• La boucle while : l’on peut traduire while par tant que
<?php
$lines = 1;
while ($lines <= 100) {
echo 'Je ne dois pas regarder les mouches voler quand j\'apprends le PHP. ';
$lines++; // $lines = $lines + 1
?>
Dans cette boucle, il y a deux instructions :
• echo permet d'afficher du texte en PHP. À noter qu'il y a une balise HTML à la fin :
cela permet d'aller à la ligne (vu que vous connaissez le HTML, ça n'a rien de surprenant :
chaque phrase sera écrite sur une seule ligne).
• $lines++; est une façon plus courte d'ajouter 1 à la variable. On appelle
cela l'incrémentation (ce nom barbare signifie tout simplement que l'on a ajouté 1 à la
variable).
Chaque fois qu'on fait une boucle, la valeur de la variable augmente : 1, 2, 3, 4… 99, 100…
Dès que la variable atteint 101, on arrête la boucle.
Et voilà, on a écrit 100 lignes en un clin d'œil.
• La boucle for : for est un autre type de boucle qui a une forme un peu plus condensée et plus
commode à écrire. Elle est donc fréquemment utilisée.
<?php
for ($lines = 0; $lines <= 2; $lines++)
echo $users[$lines][0] . ' ' . $users[$lines][1] . ' ';
?>
*********************************************
20
e. Travailler avec une base de données

• Définition : Une base de données est un outil qui stocke vos données de manière organisée
et vous permet de les retrouver facilement par la suite.
Pour manipuler nos données, il faut recourir à un Système de Gestion des Bases de Données comme
MySQL, PostgreSQL ou encore Oracle.
Pour communiquer avec notre SGBD et lui donner l’ordre par exemple de récupérer ou d’enregistrer
les données, on utiliser le langage SQL (Structured Query Language)
La bonne nouvelle, c'est que le langage SQL est un standard, c'est-à-dire que quel que soit le SGBD
que vous utilisez, vous vous servirez du langage SQL. La mauvaise, c'est qu'il y a en fait quelques
petites variantes d'un SGBD à l'autre, mais cela concerne généralement les commandes les plus
avancées.
Voici un exemple de commande en langage SQL :
SELECT id, auteur, message, datemsg FROM livreor ORDER BY datemsg DESC
Ce schéma permet de comprendre le fonctionnement d’un site web dynamique.
En effet, C'est donc PHP qui va faire l'intermédiaire entre vous et MySQL. On devra demander à PHP :
"Va dire à MySQL de faire ceci".
• Comprendre la structurer des bases de données
Pour comprendre la structure d’une base de données, imaginez une armoire :
• L'armoire est appelée "la base" dans le langage SQL. C'est le gros meuble dans lequel les
secrétaires ont l'habitude de classer les informations.
*********************************************
21
• Dans une armoire, il y a plusieurs tiroirs. Un tiroir, en SQL, c'est ce qu'on appelle "une table".
Chaque tiroir contient des données différentes. Par exemple, on peut imaginer un tiroir qui
contient les pseudonymes et informations sur vos visiteurs, un autre qui contient les
messages postés sur votre forum, etc.
• Mais que contient une table ? C'est là que sont enregistrées les données, sous la forme d'un
tableau. Dans ce tableau, les colonnes sont appelées des "champs", et les lignes sont
appelées des "entrées".
Number Full name Email Age Password

1 Mathieu Nebra mathieu.nebra@exemple.com 34 P4ssW0rd
2 Laurène laurene.castor@exemple.com 28 jm_les_cookies
Castor
3 Mickaël mickael.andrieu@exemple.com 34 s3cr3t
Andrieu
4 Vous vous@exemple.com 29 123456
… … … …
Ce tableau représente le contenu d'une table (c'est-à-dire le tiroir de l'armoire).
Chaque ligne est une entrée. Ici, il y en a quatre, mais une table peut très bien contenir 100, 1 000,
ou même 100 000 entrées.
En résumé :
• Une base de données est un outil qui stocke vos données de manière organisée et vous
permet de les retrouver facilement par la suite.
• On communique avec MySQL grâce au langage SQL. Ce langage est commun à tous les
systèmes de gestion de base de données (avec quelques petites différences néanmoins pour
certaines fonctionnalités plus avancées).
• PHP fait l'intermédiaire entre vous et MySQL.
• Une base de données contient plusieurs tables.
• Chaque table est un tableau où les colonnes sont appelées « champs » et les lignes
« entrées ».
*********************************************
22

Cours de Programmation Web-1 PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours de Programmation Web-1 PDF

Transféré par

Droits d'auteur :

Formats disponibles

UNIVERSITE DE DOUALA

Cours de programmation Web

2. Services offerts par Internet

Chapitre 2 : Apprendre les bases de la programmation

2. Quels sont les langages de programmation ?

4. Programmer une application

5. Apprendre à programmer en ligne

Chapitre 3 : Introduction à la création des pages web

a. Pourquoi créer une page web ?

b. Quelles sont les étapes de création d’un page web ?

c. Comment organiser les pages d’un site web ?

2. Connaitre les bases et les outils du développement web

a. Les bases techniques d’un site Web

b. Les outils principaux de la programmation web

a. Utiliser les balises

b. Outils de création des pages web

Travaux dirigés : Manipulation des balises HTML et les feuilles de style

Chapitre 4 : Introduction à la programmation coté serveur

• Gestion des formulaires.

Exemple simple de page PHP

b. Structure d’une page PHP

En PHP, toutes les instructions doivent se terminer par un point-virgule.

En cas d’omission, une erreur est générée.

PHP propose deux syntaxes :

/* ... */ pour insérer du commentaire sur plusieurs lignes.

c. Les bases du langage PHP

La fonction define ou le mot-clé const permettent de définir une constante.

booléen define(chaîne nom, mixte valeur[, booléen sensible_casse])

nom Nom de la constante

valeur Valeur de la constante.

Une fois créée, une constante n’est plus modifiable

CONSTANTE = valeur de CONSTANTE

Traditionnellement, les noms des constantes sont définis en majuscules.

§ nombre à virgule flottante

L’opérateur d’affectation est le signe égal (=).

Les opérateurs arithmétiques sont les suivants :

Le seul opérateur de chaîne est l’opérateur de concaténation, égal au point (.).

Les opérateurs de comparaison sont les suivants :

Opération Opérateur Exemple ($x=13, $y=8, $z="8")

$y === $z => FALSE

$y !== $z => TRUE

$y < $x => TRUE

$y < $z => FALSE

$y <= $x => TRUE

$y <= $z => TRUE

$y > $x => FALSE

$y > $z => FALSE

Opération Opérateur Exemple ($x=13, $y=8, $z="8")

$y >= $x => FALSE

$y >= $z => TRUE

Ne confondez pas l’opérateur d’affectation (=) avec l’opérateur de comparaison (==).

Les opérateurs logiques sont les suivants :

Opération Opérateur(s) Exemple

FALSE and FALSE =>

FALSE or FALSE =>

TRUE xor FALSE =>

FALSE xor FALSE =>

! FALSE => TRUE

d. Manipulation des variables

• Pour introduire une condition, on utilise le mot if qui signifie « si », en anglais.

// instructions à exécuter quand on est autorisé à entrer

echo "Vous êtes autorisé(e) à accéder au site";

} // SINON SI on n'a pas l'autorisation d'entrer