class: center, middle # CIR1 : Développement Web --- class: center, middle ## Agenda --- 1. S1: Introduction - Les bases du web - Les premières lignes de PHP - Installation de l'environnement de travail, utilisation des outils - TP1 : Le jeu de la vie 2. S2: Jouer avec les données utilisateur - Formulaires - Fichiers - Un peu de sécurité - TP2: Un blog statique. 3. S3: La base de données, quelques bases - Se connecter, lire et écrire dans une bdd mysql/mariadb - TP3: Un mini chat 4. S4: Un peu plus loin dans le SQL - Les jointures - Les aggrégations - Les dates 5. S5: Un peu de POO - Utilisation des objets de la SPL et de `DateTime` - Les normes PSR et les namespace - Les fonctions magiques - Lien entre BDD et objet 6. S6: Un code de qualité & en production - Les tests - Les analyses du code - Le concept d'intégration continue - L'opcode - Déployer votre site --- class: center, middle # Introduction --- # Qui suis-je? - François Dambrine (ISEN, CIR, promo56) .inlineimg[![photo](https://scontent.flux1-1.fna.fbcdn.net/v/t1.0-9/10003522_610694192333147_860122324_n.jpg?oh=deb23430536ff1b4aae3a086a6781fe0&oe=5AC2819D)] - Développeur chez Vadesecure .inlineimg[![vadesecure](https://www.vadesecure.com/wp-content/uploads/vade-secure-logo@2x.png)] - Développeur Open Source pour Zeste De Savoir .inlineimg[![zds](./zds.png)] - Pour poser vos questions : francois.dambrine@isen-lille.fr --- # Mais pourquoi PHP? - Quoi qu'il arrive le navigateur voit du HTML et du CSS - PHP est un langage de **programmation**, HTML un langage de **description** - [82.4%* des sites](https://w3techs.com/technologies/details/pl-php/all/all) internet utilisent PHP (Facebook, Wikipedia...) **Avec PHP vous générez *dynamiquement* du HTML et l'envoyez au navigateur** --- ## Créer un site HTML
graph TD html(Écrire le code HTML à la main) --> ftp(Envoyer le fichier html, les images et le CSS sur l'hébergement) ftp --> nav(Affichage sur le navigateur)
A chaque fois que vous désirez changer quelque chose (texte, image) il faut tout refaire. --- ## Avec PHP
graph TD php(Créer la logique qui permet d'afficher la page) --> ftp(Envoyer le fichier php, les images et le CSS sur l'hébergement) ftp --> nav(Affichage sur le navigateur) nav --> blog(Entrer le nouveau texte sur la page de rédaction) blog --> nav
--- # Client/Serveur (1/2) ![modèle client server](./client_server.png) 1. Requête HTTP du client au serveur; 2. Exécution du code PHP; 3. Réponse HTTP du serveur au client. ??? L'utilisation de page web est basée sur le modèle client/serveur et le protocole HTTP. A distance, un serveur "écoute" le port 80 (ou le port 443). Le client (le navigateur) envoie une requête HTTP. Le serveur la reçoit et lance la génération du HTML. Puis renvoie la page via une réponse HTTP. --- # Client/server (2/2) ## URL (Unified ressource locator) https://fr.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Historique?lang=fr
graph BT subgraph proto[https://] dom[fr.wikipedia.org] path["/wiki/Hypertext_Transfer_Protocol"] tag["#Historique"] qstring[?lang=fr] end subgraph e_proto[Protocole] --> proto e_dom[Domaine ou FQDN] --> dom e_path["Chemin (path) vers la page désirée"] --> path e_tag[Tag ou ancre] --> tag e_qstring[Query string] --> qstring end
??? C'est avec les URLs qu'on arrive à envoyer des requêtes au serveur et que celui-ci sait ce qu'il doit faire. Comme vous pouvez le remarquer lorsque vous utilisiez le html vous regardiez `file://....` alors que pour les sites dynamiques on utilise `http/https`. Dans un premier temps on va simplifier la gestion des urls à "le path est le chemin vers le fichier html ou PHP qu'on demande" on ira plus loin à la fin du cours. --- # Le protocole HTTP - Créé au CERN pour partager les connaissances sur ARPANet - Protocole textuel - 2 parties : Entête et Corps .px300[![T.Berners Lee](./berners_lee.png)] ??? Le protocole HTTP (Hyper Text Transfert Protocole) est un protocole de la couche **applicative** du modèle OSI. Créé par le CEA pour partager les recherches et permettre à toutes les universités et centres de recherche d'avoir leur base d'articles/recherches tout en liant aux recherche des autres universités. Protocole textuel <=> un humain peut le lire. C'est du texte qui parcourt les tuyau. Inverse des protocoles binaires tels que bit torrent. La requête et la réponse contiennent potentiellement deux parties: les entêtes et le corps. --- # Entêtes La requête ET la réponse en ont Exemple: ``` Host: fr.wikipedia.org User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate, br Cookie: WMF-Last-Access-Global=18-Dec-2017; WMF-Last-Access=18-Dec-2017; CP=H2; GeoIP=FR:HDF:Lille:50.63:3.06:v4 Connection: keep-alive Upgrade-Insecure-Requests: 1 If-Modified-Since: Sun, 17 Dec 2017 14:18:37 GMT Cache-Control: max-age=0 ``` ??? Utiliser firefox, avec la touche F12 pour montrer les requêtes. --- # Corps Facultatif, contient les données de la ressource. - Le HTML, les images, le CSS... pour la réponse; - Ce que vous envoyez au serveur pour la requête. **On en reparlera avec les formulaires et les superglobales** --- class: center, middle # Let's go to code --- class: center, middle # À votre avis, que faut-il faire? ??? --- ## Créer un code qui génère du HTML ## Démarrer un serveur web ## Entrer la bonne url dans votre navigateur --- # Générer du HTML créer un fichier index.php ```php
Mon premier site en PHP