Développement Web : principes et mise en oeuvre

1. Le web

Le Web est basé sur trois piliers :

  • Les liens hypertextes sur lesquels on peut cliquer et leur protocole (HTTP)

  • le système d'adresses (URL)

  • le langage de construction des pages (HTML)

  • Le Web englobe les sites qui peuvent être consultés dans un navigateur, et n'est qu'une des briques de l'Internet

  • Parmi les autres :

    • le courrier électronique

    • les applications mobiles

    • etc.

https://www.liberation.fr/ecrans/2011/01/19/je-suis-toujours-inquiet-pour-le-web_956620/

source:

Un site Web consiste :

- en un ensemble de fichiers sauvegardés sur un disque dur

- contenant du code informatique appelé HTML.

- il est nécessaire d'avoir un navigateurs web (comme Chrome, Safari, Firefox, etc.) pour lire le contenu d'un site web

- les sites sont stockés sur des serveurs accessibles via le réseau internet grâce à leur adresse IP (Internet Protocol)

 

 

 

 

 

Origines d'Internet

 

 

  • 1969 : ARPANET (l’ancêtre)
    • réseau non centralisé
    • communication par paquets
    • pas de routes prédéterminées

InterNet = Interconnected Network

Fonctionnement d'Internet

  • adresse
  • routeurs
  • paquets

--> fonctionnement proche du courrier postal!

Le protocole http

HTTP = Hyper Text Transfer Protocol : protocole d'échange "hyper texte"

Les URL

URL = Universal Resource Locator

  • L'url est couramment appelée l'"adresse" d'un site web
  • Elle contient différentes informations :
    • adresse IP (nom de domaine)
    • /chemin/vers/fichier
    • variables
    • port d'entrée
    • etc.
  • Exemple :
http://mon.adresse.com/mon_site.php?nom=Pignon&prenom=Francois
   A D R E S S E    RESSOURCE       V A R I A B L E S

Une URL est une adresse web. Vous pouvez voir une URL chaque fois que vous visitez un site web. Elle est visible dans la barre d'adresse de votre navigateur.

Le HTML

HTML = HyperTexte Markup Language

Le HTML est un code :

  • qui est interprété par votre navigateur (Chrome, Firefox ou Safari)
  • et qui permet d'afficher une page web à l'utilisateur.

  • But de ce langage : produire des documents consultables à distance par de navigateurs Web

  • Un système de balises ("Markups") permet de décrire la mise en forme du document

  • Possibilité de définir des liens hypertexte : chaque lien permet d'accéder à de nouveaux documents

  • Possibilité de définir des formulaires qui permettent à l'utilisateur d'envoyer des informations vers le serveur

Un document HTML contient deux parties :

  • L'en-tête, qui contient des contient des informations relatives à l'auteur et au contenu du document

    • Balise <HEAD>

  • Le corps, qui contient le texte et les médias à afficher, avec des indications de mise en page

    • Balise <BODY>

<!DOCTYPE html>
<html>	

  <head>
  <title>Exemple de fichier	HTML valide</title>
  </head>
	
  <body>	
  <p> Un texte	normal	<br/> <em> italique </em>
  <ul>
	<li>un élément de liste</li>
    <li><strong>du gras</strong></li>
  </ul>
  </p>
	
  </body>
</html>

Structure d'une page html 5

De nombreuses ressources web sont disponibles pour apprendre le HTML, voir par exemple

www.w3schools.com/html/

Balises de formatage

  • <h1>Titre 1</h1> pour vos titres les plus importants
  • <h2>Titre 2</h2> pour les sous-titres
  • <h3>Titre 3</h3> ... et ainsi de suite jusqu'à <h6>
  • <p>Un paragraphe contenant du texte</p>
  • <em>texte</em> permet de mettre l'accent sur une partie du texte
  • <strong>texte</strong> permet de mettre encore plus l'accent sur une partie de texte
  • <br> permet d'insérer un saut de ligne (vous ne pouvez rien mettre à l'intérieur d'un élément br et il n'y a pas de balise fermante)
  • <a href="https://djangogirls.org">link</a> permet de créer un lien
  • <ul><li>premier item</li><li>second item</li></ul> permet de créer des listes, comme celle que nous sommes en train de faire !

Balises de mise en page

  • <div></div> permet de créer une section au sein de la page
  • <nav></nav> définit un ensemble de liens de navigation
  • <article></article> spécifie du contenu indépendant et autonome
  • <section></section> définit une section dans un document
  • <header></header> spécifie un en-tête pour un document ou une section
  • <main></main> spécifie le contenu principal d'un document
  • <aside></aside> définit du contenu en dehors du contenu dans lequel il est placé (comme une barre latérale)
  • <footer></footer> définit un pied de page pour un document ou une section
  • <time></time> définit un instant spécifique (ou un horodatage)

Web statique : HTML + CSS

  • côté client :

    • construction de l'arbre DOM ⇒ bloc = objet

    • affichage (flux)

  • Les feuilles de style (CSS : Cascading Style Sheets) sont un langage utilisé pour décrire l'apparence et la disposition d'un site écrit en langage de balisage (comme HTML).

Exemples de CSS

body {
    padding-left: 15px;
}
h1 a, h2 a {
    color: #C25100;
    font-family: 'Lobster';
}
em {
    background‐color: black;
    color: red;
}
p {
	text-align: center;
}

voir :

Pages dynamiques

modification du DOM selon les événements produits par l'utilisateur

3 langages sont nécessaires pour réaliser ce schéma:

  • Les seuls langages compréhensibles pour le navigateur sont HTML et CSS et Javascript

  • agrémenté de différentes librairies de mise en forme:

Langage javacript

But:

  • Modification des blocs HTML et des propriétés CSS (l’arbre DOM)
  • Programmation évènementielle : on réagit à des actions de l’utilisateur
  • Transfert d’information entre le client et le serveur (ajax)

voir : https://fr.wikipedia.org/wiki/JavaScript

Attention :

  • Javascript n'est pas  Java (ca n'a rien à voir!)
  • C’est un langage de script objet (comme python)
  • Presque exclusivement utilisé via des
    bibliothèques (comme jQuery)

voir : https://jquery.com/

exemple : https://jqueryui.com/accordion/


HTML :

  • structure
  • liens
  • blocs

CSS :

  • style
  • positionnement
  • couleurs, ...

javascript :

  • animations
  • gestion des évènements
  • communication serveur

Text

Résumé

Web dynamique

Web dynamique

principe général : consultation/mise à jour à distance d'une base de données.

  • CRUD : Create / Read / Update / Delete

  • réponse = données mises en forme au niveau du serveur

Mise en oeuvre

3 niveaux d'interprétation sont nécessaires pour réaliser ce schéma:

  • Un langage d'édition interprété au niveau du navigateur

    • Les seuls langages compréhensibles pour le navigateur sont HTML et CSS et Javascript

  • Un langage de développement interprété côté serveur

    • Le choix est vaste (n'importe quel langage de programmation)

    • Les plus courants sont (par ordre de popularité):

      • PHP

      • Java (avec la librairie Spring MVC)

      • Python (avec la librairie Django)

      • Javascript (librairie Node.js)

      • etc.

  • Un langage de requêtes (interprété côté serveur) pour communiquer avec la base de données et enregistrer les mise à jour

Transmission des données

Transmission de données "en clair"

Variables GET :

  • Les variables sont inscrites dans l'URL transmise au serveur:

  http://mon.adresse.com/mon_site.php?nom=Pignon&prenom=Francois
       A D R E S S E      RESSOURCE       V A R I A B L E S

Le serveur exécute le script (php, python, java, …), c'est à dire :

  • traite les variables

  • exécute des opérations de lecture/écriture

  • transmet un contenu au client (en général html mais aussi xml ou json…)

Transmission des données

Transmission de données de données par formulaire

Variables POST (n'apparaissent pas dans l'URL)

  • utilisation de Formulaires HTML :

  • le fichier cible est défini comme attribut du formulaire :

 

 

  • les balises INPUT définissent les variables à transmettre:
  • l'INPUT de type submit lance la requête : la page cible est chargée et remplace la page courante:
<FORM method="post" action="cible.php"> 
    ... 
</FORM>
<form method ="post" action = "bonjour.php" >
	Votre nom : <input type="text" name="nom"/> <br/>
	Votre prénom : <input type="text" name="prenom"/> <br/>
	<input type="submit" value="Envoyer">
</form>

Conservation des données

  • Le web dynamique repose sur :

    • des données mises à jour en continu

    • stockées dans une base de données

    • et manipulées côté serveur

  • Mise en œuvre :

    • Node.js + Express (backend léger, moderne)

    • MongoDB + Mongoose (ORM / ODM orienté documents)

    • Python + Django

    • Java + Hibernate + Spring MVC

  • Le patron MVC reste la référence pour organiser les applications Web modernes.

  • Dans l’écosystème JavaScript, on retrouve cette structure dans Express (routes = contrôleurs, modèles = Mongoose, vues = templates ou API JSON).

  • Pour une comparaison utile : le tutoriel Django reste un bon point de repère pédagogique 1871426-le-fonctionnement-de-django

Modèle - Vue - Contrôleur

Django

Django (/ˈdʒæŋɡoʊ/ jang-goh) est un framework web gratuit et open-source écrit en Python.

Un framework web est un ensemble de composants prêts à l'emploi qui vous aide à développer des sites web plus rapidement et plus facilement.

Lorsque vous créez un site web, vous avez souvent besoin de la même chose :

  • une manière de gérer l'authentification de vos utilisateurs (créer un compte, se connecter, se déconnecter),
  • une partie dédiée à la gestion de votre site,
  • des formulaires,
  • une manière de mettre en ligne des fichiers,
  • etc.

 

Fonctionnement de Django 

 Django gère lui-même la partie contrôleur (gestion des requêtes du client, des droits sur les actions…).

Concrètement, lorsque l'internaute appelle une page,  la vue  récupère les données du modèle et génère un rendu HTML à partir du template et de ces données.

Un template est un fichier HTML, aussi appelé en français « gabarit ». Il sera récupéré par la vue et envoyé au visiteur ;  avant d'être envoyé, il sera analysé et "complété" avec les données provenant du modèle.

On distingue les quatre parties qu'un développeur doit gérer :

  • Le routage des requêtes, en fonction de l'URL ;
  • La représentation des données dans l'application, avec leur gestion (ajout, édition, suppression…), c'est-à-dire les modèles ;
  • L'affichage de ces données et de toute autre information au format HTML, c'est-à-dire les templates ;
  • Enfin le lien entre les deux derniers points : la vue qui récupère les données et génère le template selon celles-ci.

Développement d'un site en Django

Les modèles dans Django

Un modèle Django est essentiellement un schéma de données

  • géré par l'ORM (Object Relational Mapper) de Django,
  • en lien avec une base de données.
  • le gestionnaire de données SQLite est utilisé par défaut dans Django.
from django.db import models
 
class Equipement(models.Model):
    id_equip = models.CharField(max_length=100, primary_key=True)
    disponibilite = models.CharField(max_length=20)
    photo = models.CharField(max_length=200)
    def __str__(self):
        return self.id_equip
 
 
class Animal(models.Model):
    id_animal = models.CharField(max_length=100, primary_key=True)
    etat = models.CharField(max_length=20)
    type = models.CharField(max_length=20)
    race = models.CharField(max_length=20)
    photo = models.CharField(max_length=200)
    lieu = models.ForeignKey(Equipement, on_delete=models.CASCADE)
    def __str__(self):
        return self.id_animal

La gestion des urls

Il faut renseigner une liste de modèles d'url (urlpatterns) pour faire correspondre les URL et les vues.

Django vérifie dans l'ordre les modèles d'url, et si correspondance il y a, alors il transmet la requête à la fonction associée (appelé vue).

from django.urls import path
from . import views
 
urlpatterns = [
    path('', views.animal_list, name='animal_list'),
    path('animal/<str:id_animal>/', views.animal_detail, name='animal_detail'),
    path('animal/<str:id_animal>/?<str:message>', views.animal_detail, name='animal_detail_mes'),
]

Vue

La vue contient toute la partie "logique" de notre application. C'est elle qui va se charger d'aller chercher les informations liées à notre modèle et de les passer à un template

from django.shortcuts import render, get_object_or_404, redirect
from .forms import MoveForm
from .models import Animal, Equipement
 
# Create your views here.
def animal_list(request):
    animals = Animal.objects.filter()
    return render(request, 'animalerie/animal_list.html', {'animals': animals})
 
def animal_detail(request, id_animal):
    animal = get_object_or_404(Animal, id_animal=id_animal)
    lieu = animal.lieu
    form=MoveForm()
    return render(request,
                  'animalerie/animal_detail.html',
                  {'animal': animal, 'lieu': lieu, 'form': form})

Template

Les Balises de template Django permettent de transferer des variables Python dans du HTML

Pour insérer une variable dans un template, on utilise des doubles accolades avec le nom de la variable.

<header>
    <h1><a href="/">Animalerie</a></h1>
</header>

{% for animal in animals %}
    <article>
        <h2><a href="">{{ animal.id_animal }}</a></h2>
        <p>{{ animal.etat }}</p>
        <p>{{ animal.lieu }}</p>
    </article>
{% endfor %}
Made with Slides.com