Plan

Partie 1 :
Architecture Client/Serveur
Web Statique
Développement Web Bases du langage HTML
Les feuilles de style (CSS)
JavaScript
JQuery et Bootstrap
LST Génie Informatique (S5) Initiation au framework LARAVEL
Activités pratiques: Labs + mini-projet

Partie 2:
Langage de programmation PHP.
M’hamed AIT KBIR Transmission de données entre pages PHP.
Département Génie Manipulation de Bases de données (Mysqli et PDO).
Programmation Orientée Objet en PHP.
Informatique Implémentation du modèle MVC en PHP.
FST de Tanger JQUERY(suite) et AJAX.
Framework LARAVEL(Authentification, CRUD ...)
LST S5 2023-2024 M. AIT KBIR LST S5 2023-2024 2

Web statique/HTML Internet

• ARPAnet : réseau expérimental, premier réseau à transfert
Evolution de Internet et du Web de paquets, créé par l'ARPA (Advanced Research Projects
Les protocoles de Internet Agency dépendant du DOD, Department of Defense) afin
Les standards du Web de relier quatre instituts universitaires.
Les URL et les noms de domaine
Les navigateurs Web et les serveurs Web • La National Science Foundation ( NSF) permet en 1986,
Histoire du HTML avec le projet NSFNET, de créer un accès réseau aux sites
Structure d’une page HTML de superordinateurs des organismes de recherche et
Balises d'éducation.
Attributs
Bases sémantiques de structure
• L’utilisation de Internet était limitée au gouvernement et à
Nouveautés du HTML 5 des fins de recherche et académiques.
• Interdiction commerciale levée en 1991.

M. AIT KBIR LST S5 2023-2024 3 M. AIT KBIR LST S5 2023-2024 4

1
 Internet
Croissance de Internet
Internet abréviation de : "Interconnected network", "International
network“ ou encore "Interoperable network". Définition
Wikipédia "Internet est le réseau informatique mondial accessible
au public. C'est un réseau de réseaux, à commutation de paquets
…"
Internet est la convergence des technologies de la communication,
de l'informatique et de l'audiovisuel. Internet est un grand
ensemble qui comprend, entre autres :
• le Web
• Le transfert des fichiers
• les e-mails
• la messagerie instantanée Distribution des utilisateurs d'Internet dans le monde par
• etc. région géographique.

M. AIT KBIR LST S5 2023-2024 5 M. AIT KBIR LST S5 2023-2024 6

Croissance de l’utilisation de l’Internet Protocoles de Internet

Protocole : Collection de règles de mise en forme, de

L'évolution de Internet est très rapide car tout progrès commande et de contrôle d'erreurs des données envoyées à
technologique dans un des domaines de l'infrastructure du réseau travers un réseau. L'acronyme TCP/IP est généralement utilisé
engendre le développement de nouvelles applications. pour désigner la suite de protocoles réseau composant la suite
de protocoles Internet la plus utilisée.
M. AIT KBIR LST S5 2023-2024 7 M. AIT KBIR LST S5 2023-2024 8

2
 Nom de domaine
Adresse IP
• Chaque appareil connecté à Internet possède une ou plusieurs
interfaces réseaux, chaque interface possède une adresse
numérique unique (Adresse IP).
• Une adresse IP est constituée d’un ensemble de quatre octets.
192.185.225.59 est l’adresse IP du serveur qui héberge le site
de la FST de Tanger.
• A une adresse IP peut correspondre un nom de domaine, qui
est une autre alternative pour localiser une organisation ou
autre entité sur Internet.
• Un serveur DNS permet d’associer à une adresse IP un nom de Le système de noms de domaine: Permet de diviser Internet en groupes
domaine: logiques et compréhensibles de noms. Top-Level Domain (TLD ) correspond
à la partie la plus à droite d'un nom de domaine . Internet Corporation for
Nom du serveur: www.fstt.ac.ma
Assigned Names and Numbers (ICANN) est responsable de la gestion des
Adresse IP: 192.185.225.59 noms de domaine et leur affectation aux adresses IP.

M. AIT KBIR LST S5 2023-2024 9 M. AIT KBIR LST S5 2023-2024 10

URL ( Uniform Resource Locator) HTTP: Hypertext Transfer Protocol

Le sigle URL, auquel se substitue le terme adresse web, Protocole développé par Tim Berners-Lee au CERN
désigne une chaîne de caractères utilisée pour adresser (Suisse), un ensemble de règles pour l'échange de fichiers
les ressources du World Wide Web:
: textes, images , audio, vidéo etc.
document HTML, image, son, boîte aux lettres
électronique … . • Les Navigateurs Web envoient des requêtes HTTP pour
récupérer les pages Web ou autres fichiers associés.
(http://fr.wikipedia.org/wiki/Uniform_Resource_Locator) . • Serveurs Web envoient des réponses HTTP vers les navigateurs
répertoire Web.
http://www.fstt.ac.ma/Portail/index.php
Protocol e HTTP Nom de domaine
Nom de la page

Nom du serveur Web

M. AIT KBIR
LST S5 2023-2024 M. AIT KBIR LST S5 2023-2024 12
11

3
 Les clients HTTP Part de marché des navigateurs

http://gs.statcounter.com/
M. AIT KBIR LST S5 2023-2024 13 M. AIT KBIR LST S5 2023-2024 14

Serveurs Web
Serveurs Web

• Serveur web (http daemon) : logiciel qui sert des

pages Web aux clients, capable d'interpréter les
requêtes http arrivant sur le port associé au Le serveur open source
Apache reste largement
protocole HTTP (port 80 par défaut) et de fournir
devant Nginx qui
une réponse avec ce même protocole. progresse fortement.
• Par extension, on appelle souvent la machine
physique sur laquelle tourne le logiciel un "serveur
web".
• Les pages renvoyées par les serveurs Web sont soit
statiques soit dynamiques.
M. AIT KBIR LST S5 2023-2024 15 M. AIT KBIR LST S5 2023-2024 16

4
 PHP/MySQL
Apache a pour rôle de recevoir les requêtes émises par les navigateurs, de chercher la
page demandée puis de la renvoyer. PHP (Hypertext Preprocessor) est un langage de
script interprété côté serveur, utilisé pour produire des pages Web dynamiques ( qui
dépondent de certains variables). MySQL est un système de gestion de base de
données relationnelles, utile pour stocker et manipuler les données, sous forme de
tables, à travers le langage de requête SQL.
M. AIT KBIR LST S5 2023-2024 17
HTML
• SGML (Standard Generalized Markup Language): Un
standard pour la spécification d'un langage de
balisage.
• HTML (Hypertext Markup Language): L'ensemble de
symboles de codes (balises) placés dans un fichier
destiné à être affiché sur un navigateur Web.
• XML (eXtensible Markup Language): Un langage qui
sert à décrire, fournir et échanger des informations
structurées à base de texte, il étend la puissance de
HTML en séparant les données de la présentation.
M. AIT KBIR LST S5 2023-2024 19
HTTP vs HTML
HTTP est un protocole d'application qui décrit comment les informations sont
échangées entre un client et un serveur Web. Alors que HTML un langage de
balisage qui écrit la façon dont les pages Web sont formatées et affichées sur les
navigateurs Web. HTML est donc un langage de description permettant de
présenter des informations transmises via HTTP.
M. AIT KBIR LST S5 2023-2024 18
HTML
Le langage HTML a été inventé par Tim Berners-Lee en
1991. Tim Berners-Lee a aussi crée le World Wide Web
Consortium (W3C) qui définit les nouvelles versions des
langages liés au Web. Il a aussi créé en septembre 2008,
la World Wide Web Foundation qui analyse et suit
l'évolution du Web.
XHTML est une variante de HTML qui se veut plus
rigoureuse, lancée par le W3C en l’an 2000. Il a été
abandonné en 2009 pour retourner au HTML et le faire
évoluer.
M. AIT KBIR LST S5 2023-2024 20
5
 HTML: Les versions Première page HTML5
• HTML1 : Première version créée par TimBerners-Lee en 1991. <!DOCTYPE html>
• HTML2 : apparaît en 1994 avec des règles de fonctionnement <html>
qui sont cette fois données par W3C. <head>
• HTML3 : apparaît en 1996, de nombreuses possibilités ont été <title>Titre de la page</title>
ajoutées au langage : les tableaux, les applets, les scripts, le <meta charset="utf-8">
positionnement du texte autour des images. </head>
• HTML4 : apparaît en 1998, propose l’utilisation des frames, des <body>
tableaux plus complexes, des améliorations sur les formulaires <!-- Un commentaire ... -->
et surtout l’utilisation des feuilles de style (langage CSS). ... balises HTML et texte ...
• HTML5 : apparaît en l’an 2009, donne la possibilité d’inclure </body>
facilement des vidéos, un meilleur agencement du contenu, de </html>
nouvelle fonctionnalités pour les formulaires, etc.

M. AIT KBIR LST S5 2023-2024 21 M. AIT KBIR LST S5 2023-2024 22

HTML: <HTML> </HTML> HTML: DTD

L'élément HTML indique que le document est de type HTML. Tout le
contenu du document doit être compris entre les deux balises (balise
de fin optionnelle).
• L'attribut LANG="Langue" indique la langue utilisée (FR pour
la France, DE pour l'Allemagne, ES pour l'Espagne EN pour
l'Angleterre, EN-US pour les Etats-Unis, etc)
• L'attribut DIR="Direction" spécifie l'orientation ( de droite
vers la gauche RTL (Right To Left) ou de la gauche vers la
droite LTR (Left To Right))
Le doctype : souvent appelé DTD (Déclaration ou définition de Type
de Document), est l’ensemble des balises pour identifier les éléments
d’un document HTML et les règles formelles qui décrivent sa
structure.
HTML5:
<!DOCTYPE html>
HTML4.01 strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“
"http://www.w3.org/TR/html4/strict.dtd">
XHTML1.0 strict :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

M. AIT KBIR LST S5 2023-2024 23 M. AIT KBIR LST S5 2023-2024 24

6
 HTML: <HEAD> … </HEAD> HTML: Attributs Balise META
Se positionne après la balise <HTML> et avant la balise <BODY>, elle sert à
fournir des informations au sujet du document. (balise de fin optionnelle).
Marqueur Description
Peut renfermer les balises:
Author Nom de l'auteur
• <TITLE>…</TITLE> (balise de fin requise): Titre de la fenêtre où
s'affiche la page Description Texte descriptif du site

• <BASE> (balise de fin interdite) : Permet de redéfinir une URL de base Keywords Mots clés se rapportant au site

au sein d'un document HTML en cas d'erreur d'exploration. Robots Indexation de la page : index ou noindex
Indexation des pages liées : follow ou nofollow
• <META>(balise de fin interdite): permet de mettre directement à la
Made Indication de l'adresse eMail
disposition des moteurs de recherche des informations relatives à un
site. L'attribut CHARSET définit l'ensemble des caractères à utiliser avec Owns Propriétaire du document courant
le document HTML. Lang Langue du document
• <LINK>(balise de fin interdite): établir un lien vers un fichier externe Indication du logiciel avec lequel le site a été développé
Generator
(feuille de styles, autre document HTML, etc.).
• < SCRIPT > </SCRIPT> balise de fin requise: introduire un script dans un Exemple:
document HTML. Le code du script peut être écrit dans un fichier <META NAME="keywords" CONTENT="homepage, informatique, LSI">
externe, l’attribut src indique l’ URL du fichier en question.

M. AIT KBIR LST S5 2023-2024 25 M. AIT KBIR LST S5 2023-2024 26

HTML: <BODY> … </BODY> HTML: Quelques Code de couleurs basiques

Placé immédiatement après la balise </HEAD>, balise de fin optionnelle, elle Chaque composante couleur (Rouge, Vert ou Bleu) est codée en
permet de délimiter le corps du document et définir l'apparence du fond de HTML sur 8 bit en hexadécimal soit de 00 à FF (de 0 à 255).
l'écran et la couleur du texte.
<BODY BGCOLOR="#RRVVBB" BACKGROUND=" fichier_image" Valeurs possibles :
LINK="#RRVVBB" VLINK="#RRVVBB" #RRVVBB (codage classique) (Voir : http://www.code-couleur.com/)
TEXT="#RRVVBB" ALINK="#RRVVBB"> Valeur symbolique (red, blue, green … )
BGCOLOR : couleur de fond de la fenêtre
BACKGROUND : image de fond (répétée sous forme de mosaïque)
TEXT : couleur du texte ordinaire
LINK : couleur du texte/de la bordure d'une image qui est un lien
VLINK : couleur du texte/de la bordure d'une image qui est un lien vers
une page déjà vue
ALINK : couleur prise par un lien tant qu'on clique dessus
M. AIT KBIR LST S5 2023-2024 27 M. AIT KBIR LST S5 2023-2024 28

7
 HTML: Code Couleur
Langage HTML: Syntaxe
Balise = <marqueur attribut="argument">
Exemples :
<p> Cette page contient <strong>uniquement</strong> du code
HTML.<br /> Voici des exemples : </p>

<p title="Texte important" > un paragraphe avec info-bulle</p>

Une autre syntaxe:
<marqueur attribut="argument1:valeur1; argument2:valeur2;">
</marqueur>
Exemple:
<p style="font-size:50px;color:green;"> … </p>

Voir : http://www.code-couleur.com/
M. AIT KBIR LST S5 2023-2024 29 M. AIT KBIR LST S5 2023-2024 30

Langage HTML: caractères spéciaux HTML: Liens utiles

&nbsp; Espace insécable &brvbar; | &plusmn; ±

&pound; £ &yen; ¥ &Oslash; Ø
&copy;  &reg;  &deg; ° HTML5 - CSS - JavaScript:
2 3 https://www.w3schools.com/
&sup2; &sup3; &amp; &
&frac14; ¼ &frac12; ½ &frac34; ¾ VSCode:
https://code.visualstudio.com/download
&agrave; à &Agrave À &oelig; œ
Abréviations de Emmet: https://docs.emmet.io/cheat-sheet/
&eacute; é &Eacute; É &euml; ë
&icirc; î &Icirc; Î &ccedil; ç Ajouter l’extension Server Live à VSCode

&quot; " &szlig; ß &ntilde; ñ

&lt; < &gt; > &micro; µ

M. AIT KBIR LST S5 2023-2024 31 M. AIT KBIR LST S5 2023-2024 32