s outenance s tage l3 info g uillaume a nsel création dun site internet dynamique avec le framework...
TRANSCRIPT
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