Rapport de stage. Création d un site web. Stage du 20/01/2013 au 21/02/2013

Transcription

1 Rapport de stage Création d un site web Stage du 20/01/2013 au 21/02/2013 Auteur : Antoine Luczak Tuteur professionnel : M. Tison Tuteur scolaire : Mme Girondon Année scolaire : 2013/2014 1

2 Table des matières 1. Introduction 2. L entreprise 3. Objectifs et cahier des charges 3.1. Objectifs du site (analyse des besoins) 3.2. Proposition Cahier des charges 4. CMS 4.1. Qu est-ce qu un CMS? 4.2. Pourquoi un CMS? 4.3. Choix du CMS et explication de ce choix 4.4. Installation et configuration de WordPress 4.5. Les extensions utilisées 5. Bilan et conclusion 5.1. Bilan professionnel 5.2. Bilan personnel 5.3. Conclusion 6. Bibliographie 2

3 1. Introduction Ce rapport est le témoin de cinq semaines de stage au sein de la société Délices pizzas sous la tutelle de Monsieur Jean Michel Tison, dans le cadre d'une deuxième année BTS SIO (Services informatique aux Organisations). L'objectif de ce stage était de développer un site dynamique pour une société. En effet, Délices pizzas avait besoin d'un site pour informer les visiteurs sur les services que la société propose. La mission consistait à analyser les besoins de la société, ensuite de concevoir et développer un site internet répondant à ces critères. Ce rapport est composé de cinq parties. La premiére porte sur une présentation de la société Délices pizzas. La seconde présente les objectifs et le cahier des charges du site web. La troisième expose le choix de l'outil utilisé pour concevoir le site : un CMS. La cinquième présente le site web. Enfin, la cinquième partie est composée du bilan de ce stage, aussi bien personnel que professionnel, et de la conclusion de ce rapport. 2. L entreprise Délices pizzas, comme son nom l indique, correspond à une pizzeria. C est une entreprise de restauration de type rapide dont la spécialité est de faire des pizzas pour ses clients. Le restaurant se situe à Rieux en Cambrésis. 3. Objectifs et cahier des charges 3

4 3.1 Objectifs du site (analyse des besoins) Le responsable qui m a chargé du site m a exprimé ses besoins et ses souhaits concernant le site lors d'un petit entretien dès mon arrivée. Ce dernier était axé autour de trois questions : Quelles informations doivent figurer sur le site? Quelles fonctionnalités désirez-vous voir apparaître sur le site? A quelles caractéristiques de style doit répondre le site? Les réponses formulées lors de cet entretien m ont permis d établir un cahier des charges. 3.2 Cahier des charges Plusieurs objectifs pour le site internet de Délices pizzas ont été mis en avant : Le site devra s afficher de la même façon sur tous les navigateurs, pas de restrictions selon les navigateurs pouvant être utilisées. Le contenu du site devra être centré dans la fenêtre de navigation. Les couleurs du site devront être en harmonie avec les couleurs du logo (cf. la 1 ère page du rapport) Le site devra contenir certains renseignements sur la pizzeria. o Horaires d ouverture et de fermeture o Adresse du restaurant o Numéro de téléphone o La carte du restaurant (Pizzas, boissons, desserts et offres spéciales) o Les renseignements de livraisons o Moyens de paiement Les visiteurs devront pouvoir envoyer des mails facilement au responsable à partir du site. Insérer une carte (google maps) indiquera où se situe la pizzeria. 4

5 Donner la possibilité aux visiteurs d avoir accès à la page Facebook de la société. 4. CMS 4.1 Qu est-ce qu un CMS? Les CMS (Content Management System ou en français SGC Systèmes de Gestion de Contenu) sont des outils de conception et de mise à jour de site web disposant de fonctionnalités de publication. Ils offrent en particulier une interface d administration destinée à l administrateur du site pour créer et modifier le contenu et les fonctionnalités du site. Les CMS sont de plus en plus nombreux qu ils soient gratuit, Open Source sous licence GNU/GPL ou payants et offrent de plus en plus de fonctionnalités. 4.2 Pourquoi un CMS? Les CMS apporte tout d abord une certaine facilité dans l administration d un site web. Il permet aux personnes qui ne connaissent pas les langages PHP, HTML et autres de créer, modifier et paramétrer facilement un site. Un CMS a l avantage de séparer forme et contenu. Toute la partie contenu et fonctionnalités du site est stockée dans une base de donnée et est créée dynamiquement lors de l exécution du site. Toute la partie mise en page est gérée par un template. Le template sert à gérer l aspect graphique du site. Il s agit de feuilles de style et de fichiers html dans lequel des emplacements sont prédéfinis. C est dans ces emplacements que l on va insérer notre contenu. 4.3 Choix du CMS et explication de ce choix Le CMS choisi pour la conception du site a été WordPress version WordPress a été choisi pour plusieurs raisons. Tout d abord il répondait aux critères, à savoir la mise en place 5

6 de toutes les fonctionnalités désirées. Ensuite, la communauté WordPress étant étendue, il est facile de trouvé de l aide pour différents problèmes notamment via les forums. L interface d administration étant traduite en français, il facilitera donc la prise en main. De plus beaucoup de développeurs créent de nouvelles extensions qui sont aussi souvent améliorées via des mises à jour. 4.4 Installation et configuration de WordPress L installation de WordPress a tout d abord été faite sur un serveur local. Avant d installer WordPress et de le paramétrer, il a fallu mettre en place un serveur Web et créer une base de données. Pour cela, Wampserver a été téléchargé et installé. Le serveur utilisé est Apache et la base de données est une base de données MySQL. Il s agit tout d abord de créer une base de données qui va contenir le nom de l administrateur qui aura accès au site et pourra le modifier comme il le veut.. Ensuite, il s agit d installer WordPress. J ai donc téléchargé WordPress sur le site francophone. Pour installer WordPress, il suffit de décompressé l archive dans le dossier «C:\wamp\www» et de le renommer avec le nom du site que l on va utiliser. 6

7 Pour configurer WordPress, il suffit d ouvrir le fichier «wpconfig.php» contenu dans le dossier «C:\wamp\www\delicespizzas». Il nous faut renseigner les éléments suivants : - Le nom de la base de données que l on a créé auparavant pour le site - Le nom de l utilisateur de la base de données MySQL - Un mot de passe (pas obligatoire) - Une adresse de l hébergement (ici, localhost) Pour accéder au site, il suffit juste de rentrer dans n importe quel navigateur l adresse suivante (Ne pas oublier d installer le serveur Web) : L installation finie, le site est créé et il ne reste plus qu à le développer. 4.5 Les extensions utilisées Pour pouvoir télécharger et installer les extensions nécessaires à la conception du site, il est important d analyser les fonctionnalités que le site possèdera (cf. cahier des charges). Pour l aspect graphique la seule contrainte était de respecter les couleurs du logo j ai pu utiliser le thème de mon choix. J ai donc décidé d utiliser le thème «twentytwelve» qui est installé de base sur WordPress et qui me convenait parfaitement, Même si d autres aurait pu également faire l affaire. 7

8 J ai pu disposer les différents renseignements qui devaient être visible sur le site à travers différents onglets. Pour les onglets qui concernent la carte des pizzas, des boissons, des desserts et des offres, j ai utilisé le plugin «wppizza». Tout d abord qu est-ce qu un plugin? C est très simple. Un plugin est un script qui permet d automatiser des tâches sur un site. Pour reprendre le plugin «wppizza», il me permet de simplement renseigner sur le ou les prix des différents produits directement dans la page d administration WordPress. Il m a permis de remplir la carte des pizzas, des boissons, des desserts et des offres, le tout se mettant automatiquement en page. Pour remplir la fonctionnalité d envoi de mails automatique au responsable, j ai utilisé le plugin «contact-form-7». Ce plugin me permet de créer un formulaire tout simple d envoi de mail (nom de l utilisateur, mail de l utilisateur, sujet du mail, message du mail, insérer pièces jointes). L utilisateur n a qu à remplir le formulaire et cliquer sur le bouton «envoyer». Pour paramétrer l adresse mail du responsable qui va le recevoir. On passe par la page d administration WordPress, on choisit le plugin contact-form-7 et il faut simplement renseigner l adresse mail de la personne qui va recevoir le mail. 8

9 Pour insérer la carte qui m a été demandé d insérer, j ai utilisé le plugin «wp-google-maps». Comme son nom l indique, il permet d afficher une carte de google maps. Il suffit de paramétrer l adresse du lieu que l on veut afficher à l écran, toujours à partir de la page d administration. Il est également possible de payer pour afficher quelques renseignements supplémentaires sur la société (Logo de la société, description, etc ). 9

10 Il m a également été demandé de permettre aux utilisateurs de pouvoir accéder à la page Facebook de Délices pizzas. J ai donc ajouté le plugin «kn-social-slide» qui me permet d ajouter un slide en haut à droite de l écran (ou à gauche, au choix) dans lequel apparaîtra un aperçu de la page Facebook de Délices Pizzas lorsque l on passe la souris dessus. 5. Bilan et conclusion 5.1 Bilan professionnel 10

11 Ce stage m a apporté une nouvelle expérience professionnelle enrichissante. Malgré l absence d informaticien confirmé dans le domaine de site web via CMS, j ai tout de même acquis de nouvelles connaissances. Ce stage aura était très constructif. En effet, j ai pu développer mes compétences professionnelles. J ai eu la charge de la conception d un site, du cahier des charges à la réalisation tout en respectant les souhaits formulés par les responsables de la société. Tous les objectifs du cahier des charges ont été respectés. Travaillé avec un CMS tel que WordPress a été bénéfique puisque j ai pu développer mes connaissances des langages PHP, HTML et CSS. J ai bien entendu rencontrer quelques problèmes lors de la conception notamment lors de la création de la base de données et de la configuration du WordPress n étant pas habitué à travailler avec cet outil. J ai également dû adapter les couleurs du thème en changeant le code couleur hexadécimal qu il a fallu chercher dans plusieurs fichiers php contenant énormément de ligne de code ce qui ne facilite pas la tâche. Malgré tout, ces problèmes ont tous été résolus et m ont apporté de nouveaux savoirs. 5.2 Bilan personnel Tout comme au niveau professionnel, ce stage m a aidé à développer mes connaissances personnelles et m a fait découvrir de nouveaux outils. Ces cinq semaines m ont permis de réaliser un site web et de maîtriser le CMS WordPress. Il s agit d un outil que je ne connaissais que de nom et que j ai appris à utiliser lors de ce stage. Le fait d être livré à moi-même pour réaliser ce site web m a poussé à faire des recherches de façon autonome et de faire des recherches personnelles hors de mon stage pour ne pas être bloqué devant un problème. Ce stage aura été pour moi très constructif. 5.3 Conclusion 11

12 En conclusion, la société Délices pizzas dispose maintenant d un site fonctionnel répondant à leurs attentes. Actuellement ce site n est pas en ligne car le responsable se renseigne sur le choix de l hébergeur. Il possède toutes les données nécessaire à sa mise en ligne. Ce stage m a apporté de nouvelles connaissances et a augmenté mes capacités de compréhensions. En effet, la principale difficulté a été de respecter le cahier des charges et donc de ne pas s égarer des besoins formulés par les responsables. 6. Bibliographie : site officiel de WordPress : Site d aide communautaire : Site spécialisé dans l informatique (tutoriels, projets suivis, etc ) 12