Soutenance Stage L3 INFO Guillaume Ansel Création d’un site Internet dynamique avec le framework Django

Plan Introduction Présentation du sujet choisi Conception Générale Conception Détaillée Synthèse Conclusion Guillaume Ansel

1. Introduction Guillaume Ansel

1. Introduction 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 Guillaume Ansel

2. Présentation du sujet Guillaume Ansel

2. Présentation du sujet « Création d’un site Internet pour la société Studio Odyssée » Guillaume Ansel

2. Présentation du sujet Présentation des activités de la société Logiciel Internet Infographie Marketing & Communication Site dynamique Contenu dynamique Espace client Guillaume Ansel

3. Conception Générale Guillaume Ansel

3. Conception Générale 3.1 Les outils 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) Guillaume Ansel

3. Conception Générale 3.2 Le framework 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) Guillaume Ansel

3. Conception Générale 3.3 Le principe Conception proche du système MVC (Modèle Vue Contrôleur) Guillaume Ansel

3. Conception Générale 3.3 Le principe 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 Guillaume Ansel

3. Conception Générale 3.3 Le principe 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 Guillaume Ansel

3. Conception Générale 3.3 Le principe 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. Guillaume Ansel

3. Conception Générale 3.3 Le principe Template Présentation des données Langage de template puissant Structure conditionnelle Boucle Héritage Filtres Sortie en format texte HTML CSV Texte Guillaume Ansel

4. Conception Détaillée Guillaume Ansel

4. Conception Détaillée 4.1 Les applications 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 Guillaume Ansel

4. Conception Détaillée 4.1 Les applications Liste des applications Index Pages statiques Contact Syndication Actualite Derniers billets Archives Projet Liste des projets Détail d’un projet Membres Espace personnel Contrib Regroupe les fonctions utilitaires Guillaume Ansel

4. Conception Détaillée 4.2 Diagramme de classe UML Guillaume Ansel

4. Conception Détaillée 4.3 Fonctionnement nominal Le visiteur envoie une requête Lien FastCGI entre le serveur Web et processus django Le framework traite la requête (session, identification, …) Redirection vers la vue correspondante 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 Guillaume Ansel

4. Conception Détaillée 4.4 Exemple Modèle: Billet 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() Guillaume Ansel

4. Conception Détaillée 4.4 Exemple Vue: liste_billet def liste_billet(request): try: billets = Billet.objects.all().order_by(‘-publication_date’) except: raise Http404 return render_to_response(‘liste_billet.html’, {‘billets’:billets,}, \ context_instance = RequestContext(request)) Guillaume Ansel

4. Conception Détaillée 4.4 Exemple Template: liste_billet.html <!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> Guillaume Ansel

4. Conception Détaillée 4.4 Exemple Résultat: <!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> <p>contenu deuxième billet.</p> </div> </body> </html> Guillaume Ansel

4. Conception Détaillée 4.5 Déploiement 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 Guillaume Ansel

4. Conception Détaillée 4.5 Déploiement 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 Guillaume Ansel

4. Conception Détaillée 4.5 Déploiement En production Requête HTTP Processus django FastCGI LighTPD socket Réponse HTTP Guillaume Ansel

5. Synthèse Guillaume Ansel

5. Synthèse Préparation Installation des composants Développement Découpage en applications Choix des URL Création des modèles de données Ecriture des vues Rédaction des templates associées Déploiement Apache + mod_python LighTPD + FastCGI Guillaume Ansel

6. Conclusion Guillaume Ansel

6. Conclusion 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 ») Guillaume Ansel

Questions ? Guillaume Ansel