M107 Développer des sites

web dynamiques
A. Introduction
1

Filière: Développement Digital

2 PLAN DU MODULE

A. Introduction

B. Programmer en PHP

C. Manipuler les données

D. Réaliser un site web avec l’architecture MVC

3 Objectifs :

 Notion Client Serveur

 Introduction au langage PHP
 Préparation de l’environnement de travail
Notion Client Serveur

4 Architecture web
Notion Client Serveur

5 Architecture web - PHP

Introduction au langage PHP

6 Qu’est ce que PHP?

 PHP (Hypertext Preprocessor) est un langage de scripts généraliste et

Open Source, spécialement conçu pour le développement d’applications
web.

 Il peut être intégré facilement au code HTML

 PHP est un langage de script qui s’exécute coté serveur.

Introduction au langage PHP

7 Qu’est ce que PHP?

 Langage interprété
— Pas de compilation
— Exécuté instruction par instruction
— Multi-plateformes
 Spécialisé dans la génération de texte ou de documents
— HTML
— PDF
— Images
 Fichiers d’extension .php
— Code inséré dans une page HTML
— Entre balises < ?php et ?>
Introduction au langage PHP

8 PHP : Utilisation
 Utilisation
— Grand succès
— Utilisation par de très grands sites
— beaucoup de code libre disponible.
— des dizaines de millions de sites Web l’utilisent à travers le monde comme Le
Monde, Facebook, Yahoo, Wikipedia …
 CMS
Les grands CMS Content Management Systems ou Systèmes de Gestion de
Contenus utilisent PHP, comme :
— Wordpress
— Joomla
— Drupal
— Prestashop
— Magento
Introduction au langage PHP

9 Frameworks PHP

De grands Frameworks de développement Web aussi sont

disponibles en PHP :
— Symfony
— Zend
— Laravel
— Phalcon
— CakePHP
— Yii
— Slim
Introduction au langage PHP

10 Les versions de PHP

 Le langage PHP a été mis au point au début d’automne 1994 par Rasmus Lerdorf

1.8 juin 1995: Version 1.0 10.1er mars 2012: Version 5.4
2.1er novembre 1997:Version 2.0 11.20 juin 2013: Version 5.5
3.6 juin 1998: Version 3.0 12.28 août 2014: Version 5.6
4.22 mai 2000: Version 4.0 13.3 décembre 2015: Version 7.0
5.10 décembre 2001: Version 4.1 14.1er décembre 2016: Version 7.1
6.13 juillet 2004: Version 5.0 15.30 novembre 2017: Version 7.2
7.24 novembre 2005: Version 5.1 16.6 décembre 2018: Version 7.3
8.2 novembre 2006: Version 5.2 17.21 novembre 2019: Version 7.4
9.30 juin 2009: Version 5.3 18.23 septembre 2021: Version 8.0
Introduction au langage PHP

11 Fonctionnement de l’interprétation
 L’interpréteur lit un fichier source .php puis génère un flux de sortie avec les
règles suivantes :
• toute ligne située à l’extérieur d’un bloc PHP ( entre < ?php et ?>) est recopiée
inchangée dans le flux de sortie
• le code PHP est interprété et génère éventuellement des résultats intégrés eux aussi au
flux de sortie
• les erreurs éventuelles donnent lieu à des messages d’erreurs qu’on retrouve
également dans le flux de sortie (selon la configuration du serveur)
• une page html pure sauvegardée avec l’extension .php sera donc non modifiée et
renvoyée telle quelle . . .
Introduction au langage PHP

12 Fonctionnement
de l’interprétation
Préparation de l’environnement de travail

13 Choix d’un serveur web

 Pour développer un site web et toutes applications PHP, il est beaucoup plus pratique d’avoir un serveur web en
local.
 Pour travailler avec un serveur web, plusieurs solutions sont offertes. Le choix est déterminé en fonction du
système d’exploitation :
 MAMP (pour MacOS),
 LAMP (concernant Linux)
 WAMP (à destination de windows)
 XAMPPpropose une approche multi-plateforme.
Préparation de l’environnement de travail

14 XAMPP: Définition
 XAMPP est un environnement de développement PHP gratuit multiplateformes (Windows,
macOS ou Linux).
 Il s’agit d’un ensemble de logiciels qui permet d’héberger localement des sites web en imitant
les fonctions d’un serveur en production.
 XAMPP est une distribution Apache contenant MySQL (BD), PHP et Perl.
 Le paquetage open source XAMPP a été mis au point pour être facile à installer et à utiliser
Préparation de l’environnement de travail

15 Installation et configuration de XAMPP

 Lien de téléchargement : https://www.apachefriends.org/fr/index.html
Préparation de l’environnement de travail

16 Installation et configuration de XAMPP

 Le port par défaut du serveur Apache est bien 80.
 Toutefois, ce port peut être occupé par un autre service.
 Pour modifier le port, on peut suivre les étapes suivantes:
1. Démarrer XAMPP en tant qu’administrateur :

2. Cliquer le bouton « config »

(en haut à droite)
Préparation de l’environnement de travail

17 Installation et configuration de XAMPP

3. Cliquer le bouton « Services and Port Settings »:
Changer le numéro de port principal en un autre( ici : 8080 au lieu de 80)
et le numéro de port SSL en un autre (ici 4443 au lieu de 443)
Préparation de l’environnement de travail

18 Installation et configuration de XAMPP

4. Sur la même ligne de Apache, cliquer le bouton
config => Apache (httpd.config)
5. Chercher le port 80 et remplacer le par le
nouveau port (ici c’est 8080)
Préparation de l’environnement de travail

19 Installation et configuration de XAMPP

6. Chercher le port SSL 443 et

remplacer le par le nouveau port
(ici c’est 4443)
Préparation de l’environnement de travail

20 Installation et configuration de XAMPP

 Démarrer les serveurs Apache et MySql:
Préparation de l’environnement de travail

21 Premier Exemple
• Dans le dossier d’installation de
XAMPP, on trouve le répertoire
« htdocs »
(le chemin d’une installation
standard: C:\xampp\htdocs )
• Le dossier htdocs comporte déjà
des fichiers servant à la
configuration du serveur Web.
• Les projets à créer doivent être
placés dans ce dossier.
• Créant un projet de test et
l’appelant: « HelloPHP »
• Dans le dossier HelloPHP, on
ajoute un fichier vide « index.php »
Préparation de l’environnement de travail

22 Premier Exemple
 Ajoutant le code suivant à la page index.php:
<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Premier exemple</title>
</head>
<body>
    <h1>Un premier exemple PHP</h1>
    <?php
    echo "Bonjour tout le monde";
    ?>
</body>
</html>
Préparation de l’environnement de travail

23 Premier Exemple
 Pour lancer le test, il suffit d’indiquer au navigateur le lien suivant:
localhost:8080/HelloPHP
 Le port 8080 peut être remplacé par votre port (port standard=80)
 Et HelloPHP par le nom de votre projet
Préparation de l’environnement de travail

24 Installation des extensions nécessaires (VSCode)

 Sous Visual Studio Code, chercher dans les extensiosn:

• PHP intelephense

• PHP Extension Pack

• Open PHP/HTML/JS

Sous les paramètres de cette extension :

o Configurer Custom Host: localhost:8080 (80 pour le port standard)
o Modifier Root Folder : C:\xampp\htdocs\ (selon votre installation)
o Selected Browser : sélectionner votre navigateur par défaut
o Url To Open : http://localhost/
Préparation de l’environnement de travail

25 Configuration de VSCode :

Modifier les paramètres de VSCode en cliquant simultanément sur « ctr » et « , »

o chercher "suggest basic" ==> puis décocher "control whether ..."

o chercher "format" ==> cocher format and save

o chercher "emmet" ==> inculde langages ==> Add item ==> key: php, value:html