SOUTENANCE STAGE L3 INFOGUILLAUME ANSEL

Création d’un site Internet dynamique avec le framework Django

Plan

Guillaume Ansel

1. Introduction2. Présentation du sujet choisi3. Conception Générale4. Conception Détaillée5. Synthèse6. Conclusion

2

1. INTRODUCTION

Guillaume Ansel3

1. Introduction

Guillaume Ansel

Stage de Licence Informatique Durée : 10 semaines

Sujet : « Création d’un site Internet dynamique pour la société Studio Odyssée »

Entreprise d’accueil : Studio Odyssée

Encadrement : Virginie MARION-POTY

4

2. PRÉSENTATION DU SUJET

Guillaume Ansel5

2. Présentation du sujet

Guillaume Ansel

« Création d’un site Internet pour la société Studio Odyssée »

6

2. Présentation du sujet

Guillaume Ansel7

Présentation des activités de la société Logiciel Internet Infographie Marketing & Communication

Site dynamique Contenu dynamique Espace client

3. CONCEPTION GÉNÉRALE

Guillaume Ansel8

3. Conception Générale3.1 Les outils

Guillaume Ansel9

Développement du site avec le langage Python Utilisation du framework web Django (pre-1.0) Gestion des sources avec Subversion

Codage des pages en XHTML 1.0 Mise en page avec les feuilles de style CSS (Cascading

Style Sheets)

3. Conception Générale3.2 Le framework

Guillaume Ansel10

Le développement du site s’appuie sur l’utilisation du framework django.

Nombreux avantages : Inclus un ORM (Object-Relational Mapping) Interface d’administration générée automatiquement Gestion des URL propre Système de template puissant (Système de mise en cache) (Internationalisation)

3. Conception Générale3.3 Le principe

Guillaume Ansel11

Conception proche du système MVC (Modèle Vue Contrôleur)

3. Conception Générale3.3 Le principe

Guillaume Ansel12

Modèle Couche de données Encapsulées dans des objets grâce à l’ORM Abstraction par rapport au support de stockage Gestion des liaisons de type :

Un à Un Un à Plusieurs Plusieurs à Plusieurs

Gestion des contraintes d’intégrités Django créé la BDD à partir des modèles

3. Conception Générale3.3 Le principe

Guillaume Ansel13

Vue Correspond à une page Web offrant un service spécifique Définit quelle données doit être affichées et renvoie une

réponse HTTP. Différente réponse HTTP selon les cas :

200: requête valide contenant la page demandée 403: requête non autorisée 404: la page demandée n’existe pas 500: erreur dans l’exécution du code de la vue D’autres type de réponses si besoin

3. Conception Générale3.3 Le principe

Guillaume Ansel14

Contrôleur N’apparait pas explicitement du point de vue du

développeur Peut-être considéré comme étant le framework lui-même

Redirige les URL vers la vue correspondante Django utilise une interprétation différente du patron de

conception original MVC, plus proche des besoins des auteurs du framework.

3. Conception Générale3.3 Le principe

Guillaume Ansel15

Template Présentation des données Langage de template puissant

Structure conditionnelle Boucle Héritage Filtres

Sortie en format texte HTML CSV Texte

4. CONCEPTION DÉTAILLÉE

Guillaume Ansel16

4. Conception Détaillée4.1 Les applications

Guillaume Ansel17

Projet vs Application Un projet regroupe un ensemble de fonctionnalités Les fonctionnalités peuvent être regroupées dans des

applications Une application peut-être partagée par plusieurs projets

différents

Nom du projet: studioodyssee

4. Conception Détaillée4.1 Les applications

Guillaume Ansel18

Liste des applications

Index

Actualite

Projet

Membres

Contrib

4. Conception Détaillée4.2 Diagramme de classe UML

Guillaume Ansel19

4. Conception Détaillée4.3 Fonctionnement nominal

Guillaume Ansel20

Le visiteu

r envoie

une requêt

e

Lien FastCGI entre le serveur Web et process

us django

Le framework traite

la requête (session, identification, …)

Redirection

vers la vue

corresponda

nte

La vue réalise les opérations demandées• Charge les

données des modèles

• Traite les formulaires si besoin

• Renvoie une réponse HTTP

Réponse HTTP

(200, 403, 404, 500,

…) contenant

la page demandée par le visiteur

4. Conception Détaillée4.4 Exemple

Guillaume Ansel21

class Billet(models.Model):titre = models.CharField(u’Titre’, max_length=128)contenu = models.TextField(u’Contenu’)contenu_html = models.TextField(editable=False)auteur = models.ForeignKey(User)publication_date = models.DateField(u’Date de publication’, auto_now_add=True)

def save(self):self.contenu_html = textile(self.contenu)super(Billet, self).save()

Modèle: Billet

4. Conception Détaillée4.4 Exemple

Guillaume Ansel22

def liste_billet(request):try:

billets = Billet.objects.all().order_by(‘-publication_date’)except:

raise Http404return render_to_response(‘liste_billet.html’, {‘billets’:billets,}, \

context_instance = RequestContext(request))

Vue: liste_billet

4. Conception Détaillée4.4 Exemple

Guillaume Ansel23

<!DOCTYPE html> <html lang="fr"> <head> <title>Studio Odyssée - Un Projet</title> </head> <body>

<div id="liste-billet">{% for billet in billets %}<h2>{{ billet.titre }}</h2><span class="auteur">{{ billet.auteur }}</span>{{ billet.contenu_html|safe }}

{% endfor %}</div></body>

</html>

Template: liste_billet.html

4. Conception Détaillée4.4 Exemple

Guillaume Ansel24

<!DOCTYPE html> <html lang="fr"> <head> <title>Studio Odyssée - Un Projet</title> </head> <body>

<div id="liste-billet"><h2>Billet 1</h2><span class="auteur">Guillaume</span><p>contenu premier billet.</p><h2>Billet 2</h2><span class="auteur">Guillaume</span><p>contenu deuxième billet.</p>

</div></body>

</html>

Résultat:

4. Conception Détaillée4.5 Déploiement

Guillaume Ansel25

En cours de développement Serveur web Python fournit par le framework Pas besoin de serveur Web dédié (Apache, LighTPD) Configuration automatique (d’après le fichier settings.py)

Interface sur 127.0.0.1:8000 par défaut Mais pas utilisable en production

4. Conception Détaillée4.5 Déploiement

Guillaume Ansel26

En production Méthode recommandée : Apache + mod_python Django est compatible avec les protocoles WSGI (CGI,

FastCGI, SCGI)

Hébergement djangohosting.ch Mise en place du site sur un serveur Web LighTPD Interface FastCGI entre LighTPD et le processus django

4. Conception Détaillée4.5 Déploiement

Guillaume Ansel27

En production

LighTPD Processus djangoFastCGI

socket

Requête HTTP

Réponse HTTP

5. Synthèse

Guillaume Ansel28

5. Synthèse

Guillaume Ansel29

Préparation Installation des composantsDéveloppement Découpage en applications Choix des URL Création des modèles de données Ecriture des vues Rédaction des templates associéesDéploiement Apache + mod_python LighTPD + FastCGI

6. Conclusion

Guillaume Ansel30

6. Conclusion

Guillaume Ansel31

Projet intéressant car s’inscrivant dans le cadre d’une création d’entreprise

Cadre de travail intéressant, participation active dans les choix techniques

Apprentissage d’un nouveau langage de programmation (Python)

Nouvelle technique de développement basé sur l’utilisation du framework django (DRY « Don’t Repeat Yourself »)

Questions ?

Guillaume Ansel32