Documente Academic
Documente Profesional
Documente Cultură
RAPPORT DE STAGE Dveloppement dun site web transactionnel pour la section locale 4475
Ralis par : Maxime CAPOLINO Responsable de Stage : ric MAILHOT
Remerciements
Je tiens remercier et tmoigner toute ma reconnaissance aux personnes suivantes, qui mont permis de vivre cette exprience enrichissante et pleine dintrt sur le plan professionnel et personnel durant ces 3 mois dans la ville de Sherbrooke au Qubec. Mes remerciements sont adresss en premier lieu toute lquipe pdagogique de lIUT de Lille 1. Notamment, pour lensemble des connaissances (aussi bien techniques que gnrales) que jai pu acqurir tout au long de ma formation en DUT Informatique. Je tiens remercier tout particulirement Monsieur ric Mailhot ainsi que tous les membres de lexcutif du SCFP 4475 pour mavoir accueilli au sein de leur entreprise, de mavoir fait confiance pour la ralisation de leur site internet et des autres tches qui mont t confi, ainsi que pour leur sympathie de tous les jours. Je remercie galement, Monsieur Patrick Lebgue mon tuteur de stage de Lille et Monsieur Philippe Leduc tant pour leur implication que pour leur suivi rgulier et soutien lors de mon sjour, sans lesquels je naurais pas pu vivre cette exprience. Enfin, je remercie Madame Valrie Buquet du service des Relations Internationales de l'IUT et Madame Sylvie Breault du service des Relations Internationales du Cgep de Sherbrooke, ainsi que l'Office Franco-Qubcois de Jeunesse qui ont jou un rle primordial dans la russite de ce stage.
Rsum
Dans le cadre de mes tudes et pour finaliser ma formation lIUT, jai d effectuer un stage de trois mois en entreprise. Par lintermdiaire des services des relations internationales, jai pu effectuer mon stage ltranger et plus prcisment Sherbrooke au Qubec. Pour la russite du stage, jai d mettre en application toutes mes connaissances acquises durant mes annes de formation en DUT Informatique. Jai d aussi apprendre en autodidacte de nouveaux langages comme le PHP, le JavaScript ainsi que la ralisation danimations en Flash. La principale mission du stage fut de raliser la conception dun site web transactionnel pour la section locale 4475 du Syndicat Canadien de la Fonction Publique (SCFP 4475). Pour le droulement de mon stage, je me suis retrouv sans soutien dinformaticien. Par consquent pour raliser lensemble de mes missions, jai d faire preuve de beaucoup dinitiatives et dautonomie. Ce stage ma donc permis daffirmer ma personnalit, de me donner de la prestance et de lassurance ainsi que de dcouvrir le monde syndical. De plus, jai eu lopportunit de dcouvrir des nouveaux pays (Canada et tats-Unis) ainsi que leurs cultures et mentalits diffrentes.
Abstract
As part of my studies and to complete my training at the IUT, I had to do three months in company. By using of services of international relations, I could do my internship abroad and more specifically in Sherbrooke to Qubec. For the success of the internship, I had to apply all my knowledge gained during my formative years in DUT. I also had to learn new self-taught languages such as PHP, JavaScript and the production of Flash animations. The main task of the internship was to realize the design of a transactional website for Local 4475 of the Canadian Union of Public Employees (CUPE 4475). In the course of my internship, I found myself without computer support. Therefore to complete all my missions, I had to show great initiative and autonomy. This internship has allowed me to assert my personality, to give me the poise and assurance and to discover the unions. In addition, I had the opportunity to discover new countries (Canada and USA) and their different cultures and mentalities.
c) d) 5) a) b) c) d) 6) a) c) 7) a) b) c) III) 1) 2) 3) IV)
Le menu de navigation .......................................................................................................... 29 Le contenu ............................................................................................................................. 30 Ralisation de lespace dadministration .................................................................................. 31 Le besoin de cet espace......................................................................................................... 31 Connexion lespace dadministration ................................................................................. 31 Aperu des formulaires dadministration.............................................................................. 32 Exemple dune procdure de modification ........................................................................... 33 Ralisation dune newsletter..................................................................................................... 34 Expression de ce besoin ........................................................................................................ 34 Aperu de lenvoi des mails automatiques ........................................................................... 35 Mise jour du site web en ligne................................................................................................ 36 Exportation de la base de donnes en local.......................................................................... 36 Importation dans la base de donnes en ligne ..................................................................... 36 Envoi des fichiers en ligne ..................................................................................................... 36 Mes autres missions .................................................................................................................. 37 Ralisation du canevas du journal ............................................................................................. 37 Ralisation de la communication .............................................................................................. 37 Participations des comits ...................................................................................................... 37 Bilan technique et humain ........................................................................................................ 38
Conclusion ............................................................................................................................................. 39 Annexes ................................................................................................................................................. 39 Annexe 1 Aperu de la carte de visite ............................................................................................ 39 Annexe 2 Aperu de lanimation flash de la page dintroduction .................................................. 40 Annexe 3 Aperu de la page daccueil ............................................................................................ 41 Annexe 4 Aperu de la page SST ............................................................................................... 42 Annexe 5 Code HTML de la page SST ....................................................................................... 42 Annexe 6 Code PHP affichage des liens des tracts ......................................................................... 43 Annexe 7 Espace dinscription ........................................................................................................ 43 Annexe 8 Espace de modification du compte dutilisateur............................................................ 44 Annexe 9 Espace de dsinscription ................................................................................................ 44 Annexe 10 Code PHP traitement dsinscription ............................................................................ 44 Annexe 11 Aperu de la page daccueil de lespace dadministration ........................................... 45 Annexe 12 Code PHP du formulaire du calendrier des postes....................................................... 46 Annexe 13 Code PHP traitement du formulaire du calendrier des postes .................................... 47 Maxime CAPOLINO IUT Lille A Dpartement Informatique 2011/2012
5
Introduction
Actuellement tudiant lInstitut Universitaire de Technologie de Lille en seconde anne de DUT Informatique, jai t amen effectuer un stage de fin dtudes dune dure trois mois en entreprise. Par lintermdiaire des services des relations internationales, jai pu effectuer mon stage ltranger et plus prcisment Sherbrooke au Qubec. Dsireux de travailler dans le domaine du web dans ma future vie professionnelle, je souhaitais avant tout de raliser mon stage dans ce mme domaine pour acqurir de lexprience et perfectionner mes connaissances. Par lintermdiaire de Madame Sylvie Breault (service des relations internationales du cgep de Sherbrooke) et de Monsieur Philippe Leduc (enseignant en informatique au cgep de Sherbrooke), jai pu effectuer mon stage en tant que Analyste Programmeur la section locale 4475 du SCFP (Syndicat Canadien de la Fonction Publique) sous la responsabilit dric Mailhot (secrtaire-archiviste). La section locale 4475 possde de nombreuses difficults dans la transmission dinformations vers ses membres. Le SCFP 4475 ne possde pas doutils pour raliser une communication optimale avec ses membres. Pour rsoudre ce problme, jai eu pour principale mission de concevoir un site web transactionnel pour la section locale afin de permettre leurs membres daccder lensemble des documentations et informations ncessaires. De plus, jai eu pour mission de raliser le canevas du journal de la section locale du SCFP 4475, ainsi que de diverses autres missions qui ntait pas prvues dans le contenu de la convention de stage. La section locale ne possdant pas de service informatique ni de personnes possdants des comptences en informatique, jai d raliser lensemble de mes missions en total autonomie sans aucun soutien.
Quelques problmes se posaient avant dentamer la conception du site web: - Comment faciliter au maximum laccs des ressources et des informations aux visiteurs ainsi que leur navigation au sein du site web ? - Comment informer rgulirement les membres du SCFP 4475 de lactualit les concernant ainsi que de la parution de nouvelles ressources et informations sur le site web ? - Comment les membres de lexcutif parviendront-ils maintenir le site vivant ? Le premier problme a t rsolu lors dune runion avec les membres de lexcutif concernant la structure du site web. Suite leurs besoins, je leur ai propos une structure et un design simple comportant 6 pages principales. Ensuite pour le second problme, jai ralis un systme sous forme de newsletter, que je vais vous prsenter dans le rapport, pour contacter le plus rapidement que possible lensemble des membres du SCFP 4475. Pour finir, le principal problme tait de permettre aux membres de lexcutif de maintenir le site vivant aprs la fin de mon stage. Pour cela, jai stock tout le contenu du site web dans une base de donnes MySQL que je mets jour avec des scripts PHP qui sont excuts suite la rception de formulaires dans un espace dadministration que jai conu au sein du site web. Dans une premire partie, je procderai une prsentation de la section locale 4475 du SCFP dans laquelle jai t accueillie, puis je prsenterai le projet qui ma t confi. Ensuite, dans une seconde partie, je prsenterai la ralisation complte du site web. La partie suivante regroupera la prsentation des autres missions que jai effectues comme le canevas du journal par exemple. Enfin, dans la dernire partie, je ferai un bilan technique et humain qui prsentera les diffrentes comptences que jai acquises au cours de mon stage.
I)
Un syndicat est une association de personnes destine la dfense de leurs intrts professionnels communs. Chaque section locale du SCFP ngocie un contrat de travail avec lemployeur (convention collective) et voit lapplication et au respect de cette convention. b) Prsentation du SCFP 4475
Le SCFP est une affiliation de la FTQ. Le SCFP est la plus importante organisation de travailleurs au Canada avec ses 615 000 membres. Le SCFP est un syndicat moderne, dynamique et bien structur qui compte plus de 70 bureaux rpartis dans tout le Canada. Au Qubec, le SCFP compte plus de 105 000 membres rpartis dans plusieurs secteurs dactivits : sant, ducation, hydrolectricit, municipalits, communications, socits dtat, transport en commun et arien, universits. Les reprsentants syndicaux du CSSSIUGS (le Centre de Sant et de Services Sociaux Institut Universitaire de Griatrie de Sherbrooke) que lon appelle excutif, sont au nombre de 7 personnes lues par les membres du SCFP 4475 pour un mandat de 2 ans. La section locale 4475 du SCFP reprsente 1250 employs rpartis sur 11 sites. La loi 25 du gouvernement Qubcois tablit et limite le nombre de catgories de personnel. Les 1250 employs que reprsente le SCFP 4475 font partis des employs dit de catgorie 2 , cela correspond lensemble du personnel para technique, des auxiliaires et de mtiers. Cette notion demploys de catgorie 2 sera importante puisque cela a un impact dans les besoins du SCFP 4475.
c) Les objectifs du SCFP 4475 Les objectifs du SCFP 4475, en tant que travailleuses et travailleurs, sont de continuer et daugmenter notre niveau de vie, damliorer les salaires, les conditions de travail, protger les emplois, dfendre les droits et toutes injustices commises envers ses membres. d) Lieux de travail Le SCFP 4475 reprsente 1250 employs rpartis sur 11 sites au total. Par consquent lors de toute la dure de mon stage, jai d faire preuve de mobilit concernant mon lieu de travail. En effet, jai d effectuer mes diffrentes missions au sein de 4 principaux sites rpartis dans la ville de Sherbrooke : le Pavillon St-Vincent, le Pavillon St-Joseph, le Pavillon Argyll ainsi que le Pavillon Youville.
10
2) Prsentation du projet a) Les besoins du SCFP 4475 Actuellement, le SCFP 4475 reprsente 1250 employs rpartis sur 11 sites. Par consquent, la communication entre les diffrents sites de la section locale et ses membres se doit dtre optimale. Le SCFP 4475 en proposant un nouvel outil de communication disponible 24h/24 souhaite obtenir une meilleure mobilisation de ses membres. En effet, le SCFP 4475 dispose dun extranet pour communiquer entre les sections locales et le FTQ. De plus, le SCFP 4475 utilise un intranet Lotus Notes fournit par lemployeur pour permettre la communication entre le syndicat et lemployeur et le partage dinformations. Cependant, le SCFP 4475 ne possde pas les outils modernes ncessaires pour raliser une bonne communication avec ses membres. En effet, le SCFP 4475 transmet les diffrentes informations par lintermdiaire dun panneau daffichage dans chaque site, ainsi que par ldition dun journal et de tracts. Si un membre souhaite obtenir quelques renseignements, il doit soit venir aux heures ouverts des bureaux du SCFP 4475, soit de contacter par tlphone les diffrents bureaux disponibles. Ce procd ne facilite pas laccs linformation puisque les membres de lexcutif du SCFP 4475 sont souvent occups et ne peuvent pas rpondre lensemble des appels reus leur poste. De plus, comme jai pu vous lannoncer prcdemment, la loi 25 du gouvernement Qubcois tablit et limite le nombre de catgories de personnel. La section locale 4475 du SCFP reprsente tout le personnel appartenant la catgorie 2 , ce qui correspond lensemble du personnel para technique, des auxiliaires et de mtiers. Pour mettre en vidence les diffrences entre les catgories, les employs appartenant la catgorie 3 correspondent lensemble du personnel de bureau, des techniciens et des professionnels de ladministration. Le fait que le SCFP 4475 reprsente le personnel de catgorie 2 entraine une difficult supplmentaire dans la communication. En effet, les employs appartenant la catgorie 2 ne peuvent pas accder aux diverses informations que contient lintranet Lotus Notes durant leurs heures de travail et leurs domiciles. De mme pour les visites aux diffrents bureaux du SCFP 4475, que ce soit pour le personnel de jour ou de nuit, il est difficile de venir sinformer aux heures douvertures des bureaux du syndicat.
11
Ces diffrents lments entrainent une mauvaise communication entre le SCFP 4475 et leurs membres. Cest pour cela, quric Mailhot (secrtaire-archiviste du SCFP 4475) a ralis des dmarches depuis un an avec le Cgep de Sherbrooke pour obtenir un stagiaire en informatique afin de dvelopper un site transactionnel pour rsoudre ce problme. Ce site web permettra de transmettre les informations aux membres trs rapidement et de rendre trs accessible la consultation des divers documents mis en ligne. Le SCFP 4475 possde un autre besoin important qui correspond au canevas du journal de la section locale. En effet lors de chaque dition du journal du SCFP 4475, les diffrents membres de lexcutif ralisent des articles concernant lactualit du syndicat, du CSSS-IUGS ainsi que de la prvention. Suite la rdaction des articles et pour ne pas perdre de temps, les membres de lexcutif du SCFP 4475 envoient lensemble des articles une personne qui se charge de la mise en page du journal. Nanmoins ce travail de mise en page qui est dlgu possde un cot qui nest pas ngligeable. Par consquent, lexcutif du SCFP 4475 souhaite que je ralise le canevas du journal pour leur permettre de raliser par eux-mmes la mise en page du journal en prenant le modle que jaurai ralis. La section locale ne possdant pas de service informatique ni de personne possdant des comptences en informatique, jai d raliser lensemble de mes missions en total autonomie sans aucun soutien. Toute la dure de mon stage, jai d tre autonome, cratif, srieux, flexible et autodidacte. b) Les langages et outils utiliss pour la ralisation du projet Tout dabord, voici les diffrents langages que jai utiliss pour la ralisation du site web transactionnel : Le HTML est un langage qui a pour rle de grer et organiser le contenu d'une page web. C'est un langage de description de donnes, et non un langage de programmation. J'ai utilis le HTML 5 qui est la dernire version du HTML qui est actuellement toujours en dveloppement. Cette version apporte de nombreuses amliorations comme la possibilit d'inclure facilement des vidos, un meilleur agencement du contenu, de nouvelles fonctionnalits pour les formulaires etc. Le rle du CSS est de grer l'apparence de la page web (agencement, positionnement, dcoration, couleurs, taille du texte). Ce langage est le complment du langage HTML pour obtenir une page web avec du style. Le
navigateur parcourt le document HTML. Lorsqu'il rencontre une balise, il demande la CSS de quelle manire il doit l'afficher. Maxime CAPOLINO IUT Lille A Dpartement Informatique 2011/2012
12
Le langage PHP est un langage de programmation web excut ct serveur et non du ct client comme le langage JavaScript. J'ai ralis des scripts PHP pour rendre le site web dynamique et de pouvoir modifier le contenu du site web.
Le code PHP dans chacune des pages HTML agit chaque chargement et rafrachissement de la page web. Lensemble de mes scripts PHP que jai ralis possde tous la mme structure. Tout dabord je me connecte ma base MySQL, ensuite je cre et excute ma requte et pour finir jaffiche le rsultat. MySQL drive directement de SQL (Structured Query Language) qui est un langage de requte vers les bases de donnes exploitant le modle relationnel, mais ne possde pas toute la puissance du langage SQL. Le serveur de base de donnes MySQL est trs souvent utilis avec le langage de cration de pages web dynamiques qui est PHP.
JavaScript est un langage interprt par le navigateur. Le JavaScript est un langage client , c'est--dire excut chez l'utilisateur lorsque la page Web est charge. Il a pour but de dynamiser les sites Internet. Jai implment des fonctions JavaScripts notamment pour dynamiser les formulaires et de raliser un traitement correct lors des envois des formulaires.
Ensuite, voici la liste des outils que jai utiliss pour la ralisation du site web transactionnel : WampServer Jai utilis WampServer puisque cest une plate-forme de dveloppement Web sous Windows pour des applications Web dynamiques. Il ma permis donc de pouvoir concevoir le site web transactionnel en local sur mon ordinateur. WampServer est trs complet puisquil dispose du serveur Apache2, gre des fichiers du langage de scripts PHP et dune base de donnes MySQL. Il possde galement PHPMyAdmin qui permet de grer les bases de donnes.
13
Adobe Dreamweaver Pour la ralisation des pages web du site, jai utilis le logiciel Adobe Dreamweaver qui est un logiciel de cration de sites web.
Si un simple diteur de texte, comme Notepad ou Bloc-notes fait trs bien laffaire. Jai tout de mme choisi dutiliser Adobe Dreamweaver. Tout dabord pour son auto compltion HTML et CSS qui est trs pratique, agrable et rapide. Ainsi que par les diffrents modes de conception offerts, la transition entre les diffrents modes de conception est trs rapide ce que je trouve trs agrable lors du commencement de la structure du site web. Il me permet de voir instantanment si mes lments graphiques ont t correctement appels, structurs et positionns. FileZilla Concernant lenvoi de lensemble de mes fichiers vers lhbergeur web, jai transfr mes fichiers avec le client FTP de FileZilla. FTP signifie File Transfert Protocol ou Protocole de Transfert de Fichiers. C'est un protocole de communication qui permet l'change de fichiers sur internet avec un rseau TCP/IP. Le FTP fonctionne selon le modle client-serveur. Cest--dire, un client depuis lequel on envoie les fichiers et un serveur FTP, sur lequel on envoie les fichiers. Un client FTP est donc un logiciel qui permet de faire la liaison entre le client et le serveur. Pour des raisons de scurit, FileZilla propose un mode dans lequel il ne conserve aucune trace des mots de passe sur lordinateur. Ainsi, une authentification est ncessaire chaque connexion aux serveurs Adobe Flash Professional En plus dAdobe Dreamweaver, jai utilis un autre logiciel de la suite dAdobe qui est Adobe Flash Professional. Cest un puissant logiciel denvironnement de cration d'animations et de contenus multimdias. Il permet de concevoir des animations avec un systme de calques et de timeline. En effet, je lai utilis pour effectuer des animations de bases en ActionScript 3 pour la page dintroduction du site web que je vais vous prsenter ultrieurement dans ce rapport.
14
Pour finir, voici le logiciel avec lequel jai ralis le canevas du journal. Microsoft Publisher Pour la conception du canevas du journal, j'ai utilis Microsoft Publisher afin de raliser un modle de journal avec lequel les membres du syndicat pourront diter leurs diffrents journaux. II) Ralisation du site web 1) Analyse et mise en situation a) Premire prise de contact La premire rencontre avec mes employeurs a permis didentifier le besoin du SCFP 4475 concernant le site web transactionnel. Le SCFP 4475 a un problme dans la communication et la transmission dinformations avec leurs membres. En effet, le SCFP 4475 ne possde pas les outils ncessaires pour raliser une communication optimale avec ses membres. Actuellement, le SCFP utilise un intranet Lotus Notes fourni par lemployeur pour permettre la communication entre le syndicat et lemployeur et la partage dinformations. Le SCFP 4475 transmet les diffrentes informations par lintermdiaire dun panneau daffichage dans chaque site, ainsi que par ldition dun journal tous les 3 mois. En cas de renseignements, les membres du SCFP 4474 doivent contacter les membres de lexcutif soit en allant les rencontrer aux bureaux ou soit par communication tlphonique. Tous ces lments rendent une communication entre le syndicat et les membres assez difficile. Cest pour cela que le SCFP 4475 souhaite possder un site web personnel pour permettre de transmettre les informations aux membres trs rapidement et de rendre trs accessible les divers documents en ligne. Nanmoins, les membres de lexcutif du SCFP 4475 nayant pas de connaissances en informatique ni de mon niveau dans le dveloppement web. Ils ne savaient pas ce quils pouvaient obtenir comme site web. Cest pour cela que mon responsable ric Mailhot ma prsent un site web dune autre section locale du SCFP cette adresse : http://www.scfpchuq.qc.ca/. Comme vous pouvez le voir, le design est trs classique et basique. Le site web comporte un en-tte avec le logo du SCFP et le nom de la section locale ainsi quune image reprsentant les 3 sites de cette section locale. Nous pouvons remarquer que ce site web se base que sur des liens que ce soit des redirections vers dautres sites ou que ce soit des documents mis en ligne.
Maxime CAPOLINO IUT Lille A Dpartement Informatique 2011/2012
15
Suite lanalyse de ce site web, jai pu expliquer aux membres du SCFP 4475 mes comptences dans le dveloppement web, ce que je savais faire et ce que je pourrai faire pour leur site web. Ensuite, jai pu leurs soumettre des propositions concernant la structure et lagencement du site web que jallais raliser mais aussi des fonctionnalits que lon pourrait apporter au site web ainsi et sa prsentation. Par la suite, jai pu leurs expliquer comment le projet allait se drouler. Quelques apprhensions taient au programme avant cette rencontre. Mais au final, suite aux besoins du SCFP 4475 ainsi que mes propositions que jai adresses et de lenthousiasme des membres de lexcutif. Nous avons dbut et donn forme au projet ensemble. La section locale ne possdant pas de service informatique ni de personne possdant des comptences en informatique, jai d raliser lensemble de mes missions en total autonomie sans aucun soutien. Toute la dure de mon stage, jai d tre autonome, cratif, srieux, flexible et autodidacte. b) Les contraintes du projet Les contraintes ont t primordiales de les dfinir avant le dbut de la conception du site web. En effet, le projet venant de natre, les contraintes taient essentielles dfinir, ce qui a permis dtablir des rgles dans la conception du site web afin de connatre dans quelle direction le dbut de la conception du site web allait se diriger. Voici ses contraintes : Le site se doit tre simple dutilisation et de navigation, que ce soit dans ses fonctionnalits ou que ce soit dans son contenu.
En effet, la plupart des membres du SCFP 4475 ne possde pas de connaissance en informatique. Le plus simple pour attirer lensemble voir la totalit des membres du SCFP 4475 est de premirement faciliter la navigation le plus possible puis par la suite de rendre accessible en un ou deux clics linformation recherche au sein du site. tre assez complet pour faciliter la communication entre le syndicat et leurs membres (crations de formulaires, envoi de mails sous forme de newsletter).
Effectivement, la simplicit dutilisation et de navigation cites prcdemment ne doivent pas tre des facteurs ngatifs concernant la richesse du contenu du site. Lensemble des documents que possdent le SCFP 4475 seront mis en ligne sous forme de PDF, que ce soit des calendriers ou que ce soit des documents concernant la Sant et Scurit au Travail. Un systme sous laspect dun formulaire permettra aux membres de lexcutif du SCFP 4475 denvoyer un mail sous forme de newsletter lensemble des membres inscrits au site web.
16
Un design professionnel : il doit tre suffisamment attrayant, interactif et intressant pour donner lutilisateur lenvie daccder lespace dinscription du site.
Pour cela, une page dintroduction sous forme danimation sera ralise en Flash. De plus, le design du site sera propre et clair contenant les couleurs de la section locale. c) Formation aux nouveaux langages tant au niveau dans le langage HTML 5 et CSS 3, cela ma permis de dbuter la conception et la structure du site web assez facilement. De mme, pour le langage MySQL qui drive du langage SQL qui est un langage de requte vers les bases de donnes exploitant le modle relationnel. Cela me permet de construire tout de suite une base de donnes relationnelle qui contiendra le contenu global du site web. Mais pour ce qui est de rendre le site web dynamique, jai eu besoin dapprendre deux nouveaux langages qui sont le langage PHP et le langage JavaScript. Le langage PHP est un
langage de programmation web excut ct serveur et non du ct client comme le langage JavaScript. Jai ralis des scripts en PHP afin denvoyer des requtes ma base de donnes MySQL pour mettre dafficher le contenu dynamiquement. Lensemble de mes scripts possdent plus ou moins la mme structure : je me connecte ma base MySQL, ensuite je cre et excute ma requte et pour finir jaffiche le rsultat. Pour la partie JavaScript, jai implment des fonctions dans ce langage notamment pour
dynamiser les formulaires et de raliser un traitement correct lors des envois des formulaires.
17
2) Les facteurs cls du succs dun site web a) Lhbergement et le nom de domaine Pour ce qui concerne lhbergement, le choix du prestataire et du type dhbergement ne doit pas tre pris la lgre. Cela implique des cots rcurrents et il nest jamais simple de quitter un hbergeur pour un autre. Il existe 4 grandes formes dhbergement, de la solution mutualise au hosting de son propre serveur dans un data center. Aprs avoir consult les diffrentes offres sur le web. Nous avons dcid de choisir un prestataire qubcois situ Montral, qui se nomme Mexxus et qui va par consquent hberger notre site web. Voici leur site web personnel : www.mexxus.com. Ce prestataire nous proposs un tarif trs abordable. En effet, outre le nom de domaine gratuit possdant une extension en .com, lhbergement du site web ne coutera que 2 $CAN par mois la section locale, ce qui correspond environ 1,55 par mois. Le prestataire offre pour cela un hbergement de type virtualis, nous rservant un espace de 100 mga-octets despace de disque et 1 giga-octet de bande passante par mois, un compte e-mail possdant notre nom de domaine ainsi quune base de donnes MySQL etc. Pour ce qui concerne le nom de domaine, un nom de domaine est constitu dune dnomination associ un suffixe qui peut-tre : Une extension gographique comme le .fr pour la France Une extension gnrique comme le .com pour lensemble des entreprises du monde entier.
Nous concernant, les adresses se terminant par .ca possdent un certain cot contrairement aux adresses possdant un suffixe en .com qui sont gratuites. Le choix a t trs vite effectu entre les deux possibilits, et notre adresse web se terminant en .com .
18
Lexploitation du nom dun site ncessite de procder une rservation dun nom de domaine permettant : Son identification sur le Web. La personnalisation de ses adresses lectroniques.
La rservation consiste enregistrer un nom de domaine qui est attribu pour une dure limite et renouvelable. Quel que soit lextension retenue, le nom de domaine reprend le plus souvent : Une dnomination sociale. Une marque dpose. Un nom patronymique.
Formulaire de rservation du nom de domaine sur Mexxus.com Nous concernant, en plus de lextension du site en .com, nous avons dcid que notre nom de domaine sera scfp4475 ce qui correspond tout simplement la dnomination sociale de la section locale 4475 du SCFP. Au final, ladresse de notre site web au complet est www.scfp4475.com. Son adresse simple et courte permettra aux membres de retenir ladresse trs aisment. Le prestataire se charge de services internet se charge au pralable de vrifier que le nom de domaine est disponible et se charge deffectuer toutes les dmarches ncessaires auprs de lassociation qui soccupe des droits du nommage. Nous concernant, le prestataire naura pas effectuer ses dmarches puisque lattribution dun nom de domaine en .com ne ncessite aucun justificatif. Le premier arriv est le premier servi.
Maxime CAPOLINO IUT Lille A Dpartement Informatique 2011/2012
19
b) Le plan de communication La valeur dun site ou dun intranet dpend en premier lieu de son trafic et de son taux de frquentation, car plus les visiteurs sont nombreux et plus le potentiel de communication ou de transaction est important. linverse, un site sans trafic, mme si il est trs bien conu, na aucun intrt. Les oprations de communication et le rfrencement lors du lancement du projet sont donc trs importants. Ces deux techniques sont complmentaires : la campagne de communication vise dvelopper rapidement la notorit du site alors que le rfrencement assure sa visibilit continue. Lobjectif de la campagne de communication est de dvelopper rapidement la notorit du site. Nous concernant, pas besoin danalyse trs spcifique puisque notre seul but est datteindre et dattirer notre cible qui se trouvent tre les membres du SCFP 4475 venir consulter rgulirement notre site web. Pour cela, nous avons ralis plusieurs travaux pour notre campagne de communication. Premirement, les membres de lexcutif du SCFP 4475 et moi-mme avons dcid de raliser une carte daffaire qui servira de promotion lors du lancement de notre site web. Cette carte daffaire a t ralise par mes propres soins. Suite une runion avec la prsidente de lexcutif de la section locale 4475 Suzanne Desloges ainsi que mon responsable de stage ric Mailhot, nous nous sommes accords sur le design de la carte daffaires que vous pouvez apercevoir ci-dessous.
Nous avons ralis cette carte daffaire avec un design simple, propre et classique. Elle reprend sur la face recto, le logo du SCFP ainsi que le nom et numro de la section locale 4475. De plus nous avons ajout le slogan du syndicat ainsi que ladresse de notre site web en gras pour le faire ressortir du reste du contenu. Pour la face verso, nous avons repris les deux bandes latrales SCFP ainsi que len-tte qui se trouvent tous les deux sur le site web de la section locale 4475. Puis nous avons ajout comme contenu, les diffrents sites o se trouvent les bureaux de la section locale avec les numros dextension de chacun qui sont importants au cas o un membre souhaite contacter un des bureaux par tlphone.
Maxime CAPOLINO IUT Lille A Dpartement Informatique 2011/2012
20
De plus, nous allons participer au Comit en Communication pour la Visibilit et la Mobilisation (CCVM). La participation ce comit consiste promouvoir notre site web en se dplaant au sein des diffrents sites sur une priode de deux jours. Nous permettrons aux membres du SCFP de consulter notre site web sur les ordinateurs portables que nous apporterons ainsi que la consultation du nouveau journal ralis avec le canevas du journal que jai cr, qui aura t dit quelques jours auparavant. c) Le rfrencement et positionnement Le rfrencement est la phase incontournable qui permettra de donner de la visibilit au site internet. En effet, pour accder un site, linternaute possde trois possibilits : saisir directement lURL, cliquer sur un lien ou encore utiliser un moteur de recherche. Le premier cas est trait par la campagne de communication. Le second est du ressort de la campagne en ligne. Enfin, le troisime cas est laffaire du rfrencement mais, comme le nombre dinternautes qui recourent aux moteurs de recherches augmentent, le rfrencement ne suffit plus. Une nouvelle notion est donc apparue : le positionnement. Actuellement, le rfrencement dans certains secteurs dactivits se trouve tre difficile. Nous concernant, cela ne devrait pas poser de problme puisquil existe une seule section locale 4475 du SCFP. Pour informations, il existe des mthodes de rfrencement qui sont illgales et sanctionnes par les diffrents moteurs de recherches qui excluent les sites web recourant ce genre de mthodes. Pour effectuer un bon rfrencement, il faut tout dabord trouver de bons mots-cls. Cette tape consiste identifier les requtes qui sont les mots les plus reprsentatives de lactivit. Depuis plusieurs annes, les requtes des internautes sont amenes voluer, en effet, les requtes contiennent de plus en plus souvent plus de deux mots-cls. Ensuite pour effectuer un bon rfrencement, il faut optimiser le code. Cette tape consiste optimiser, la structure du site (rpertoires, nom des images etc.) renseigner les balises HTML avec de bons identifiants et renseigner les balises meta . Actuellement, la balise la plus importante est la balise <title> qui est prise en compte par tous les moteurs de recherche. Pour quelle soit efficace, elle doit tre cohrente avec le contenu de la page et varier de page en page. La balise <keywords> nest plus prise en compte par les outils de recherche. Elle est dsormais plus utilise au sein de la stratgie de rfrencement. Vous pouvez apercevoir cidessous, un exemple dutilisation de la balise <title> sur la page dintroduction du site web de la section locale 4475.
21
Aperu de len-tte du fichier intro.html.php contenant la balise <title> Pour finir et une fois le site optimis, il ne reste plus qu le proposer aux diffrents moteurs de recherche et linscrire dans les annuaires. Inscrire un site dans un moteur de recherches est certainement la plus simple, puisquelle consiste saisir lURL du site dans le champ de saisie prvu cet effet. Chaque moteur fournit sa propre interface. Les principaux moteurs de recherche de nos jours sont Google, Yahoo et MSN. Vous pouvez apercevoir ci-dessous un aperu du formulaire de soumission de site pour google.ca.
Aperu du formulaire de soumission de site En conclusion, pour cette partie sur le rfrencement, cest de ne pas oublier que le rfrencement dun site volue en permanence en fonction des nouvelles soumissions ralises chaque jour. Le suivi du positionnement consiste vrifier tous les mois la position du site dans chaque moteur de recherche. d) La ralisation du design Le design du site web est un lment important pour lutilisateur. Le design du site web doit reprsenter virtuellement lambiance, latmosphre et la qualit de la section locale du SCFP 4475. Si le site possde un bon design refltera notre comptence, notre srieux et limportance que nous accordons la qualit. Nous mettons ainsi nos visiteurs et membres en confiance et amliorons notre rputation et image auprs deux. Pour cela, le design du site sera propre, clair et fidle la section locale ainsi que ses fidles couleurs. Vous pouvez trouver un aperu non dfinitif de la page principale du site web la prochaine page de ce rapport. Le site web comporte divers lments : un en-tte, un menu de navigation, des bandeaux latraux SCFP ainsi que dun pied de page contenant lensemble des liens utiles et infos pratiques. Tout ceci entourant le contenu principal qui se dcoupe en 5 parties : la date de la prochaine assemble gnrale ainsi que 4 rubriques dont deux qui seront des rubriques dinformations et les deux autres des rubriques contenant un lien de redirection vers les autres pages du site afin de permettre une navigation optimale. De plus, une page dintroduction sous forme danimation sera ralise en Flash.
Maxime CAPOLINO IUT Lille A Dpartement Informatique 2011/2012
22
Aperu non dfinitif de la page principale du site web qui est la page daccueil
Maxime CAPOLINO IUT Lille A Dpartement Informatique 2011/2012
23
3) Ralisation de la page dintroduction a) Le besoin du SCFP 4475 Tout dabord pour leur site web, Les membres de lexcutif du SCFP 4475 voulaient se dmarquer des autres sections locales. En effet, ils mont fait part de leur requte et mont prsent leur besoin en sinspirant de nouveau du site web de la section locale 1108 : http://www.scfpchuq.qc.ca/. Comme vous pouvez le constater, sur cette page web, il existe un bandeau contenant 3 images des sites dinstallation de cette section locale avec un effet de transition entre chaque image. Les membres de lexcutif voulaient sen inspirer et reproduire la mme chose sur leur propre site. Aprs avoir analys leur besoin, jen ai conclu que le fait de voir des images des diffrents sites sur la page daccueil ne possde pas un grand intrt puisque ce nest pas une information pertinente communiquer aux visiteurs. Par consquent, je leur ai propos de raliser une page dintroduction au site web dans laquelle nous pourrons retrouver les diffrentes images des sites o les bureaux de la section locale 4475 sont installs. Pour ne pas faire une simple disposition des images des diffrents sites sur la page dintroduction, je leur ai propos une animation en flash dans laquelle jaffiche tour de rle les diffrents sites ainsi que le logo et le slogan de la section locale. Un bouton de redirection vers la page daccueil du site situ en-dessous de lanimation a t positionn pour ne pas tre oblig de regarder lanimation chaque visite du site. b) Loutil utilis : Adobe Flash Professional
Pour raliser cette animation, jai utilis un logiciel de la suite dAdobe qui est Adobe Flash Professional. Cest un puissant logiciel denvironnement de cration d'animations et de contenus multimdias. Il permet de concevoir des animations avec un systme de calques et de timeline. En effet, je lai utilis pour effectuer des animations de bases en ActionScript 3 pour la page dintroduction du site web que je vais vous prsenter ultrieurement dans ce rapport.
24
c) Prsentation de lenvironnement de travail Nayant jamais ralis danimation de ce type ni utilis cet outil, jai d apprendre quelques notions de bases avant de commencer me lancer dans la ralisation de cette animation. Avant de commencer raliser lanimation, il faut paramtrer lanimation en indiquant que version de Flash Player et type de scripts allait vous utiliser pour cette animation. Voici la scne de travail de lanimation, la dimension de la scne est rglable en hauteur et en largueur. Il faut savoir tous les lments se trouvant dans lespace blanc seront visibles contrairement aux parties qui se trouveront dans lespace gris, ils seront en dehors de la scne et par consquent ne seront donc pas visibles. Si lon dsire insrer un lment au sein de la scne, il faut dabord pralablement importer ces lments au sein de la bibliothque de travail. Pour ensuite, les importer lintrieur ou lextrieur de la scne. Ci-dessous est lune des parties les plus importantes dans la conception dune animation en Flash. Ce que vous apercevez se nomme le scnario , il permet de grer les diffrents calques qui seront appliqus la scne et de les manipuler en fonction du timeline que lon peut rgler. Pour cette animation, jai rgl lanimation 24 images par seconde.
Dans la prochaine partie, je vais vous expliquer comment jai procder pour raliser mon animation.
25
d) Procd de la ralisation de lanimation Pour raliser lanimation, jai dabord tabli un scnario. En effet, jai souhait que mon animation se droule selon la manire suivante : le premier aperu sera lapparition du logo du SCFP et de la section locale 4475, ensuite les diffrents sites o sont installs les bureaux du SCFP 4475 vont dfiler tour de rle, pour finir sur le logo du SCFP et son slogan Un Syndicat en Sant ! . Pour effectuer la transition entre les diffrentes images, jai d raliser une interpolation de mouvement sur la totalit de la prsence de limage sur la scne. Cette interpolation de mouvement ma permis de raliser une apparition et une disparition en dgrad de chacune des images. Pour cela, jai modifi la quantit alpha au cours du temps. Vous pouvez observer ci-dessous une courbe reprsentative du % dalpha de limage qui varie au cours du temps. Au dpart, chaque image est transparente puisquelle possde 0% de quantit dalpha. Au fur et mesure du temps, la quantit de % dalpha augmente jusqu atteindre 100%, cela correspond lapparition en fondu de limage. Ensuite, elle reste un certain temps 100%, limage est actuellement visible par les utilisateurs. Pour finir, la quantit de % dalpha diminue sur une pente rgulire jusqu atteindre 0 de % dalpha, ce qui correspond la disparition en fondu de limage.
26
Image 3
Image 4
Image 5
Image 6
Image 7
Image 8
27
4) Ralisation de lensemble des pages a) Cration de la structure dune page Le site se doit tre simple dutilisation et de navigation, que ce soit dans ses fonctionnalits ou que ce soit dans son contenu. En effet, la plupart des membres du SCFP 4475 ne possde pas de connaissances en informatique. Pour attirer lensemble voir la totalit des membres du SCFP 4475, le principal but est de faciliter la navigation le plus que possible. Pour faciliter la navigation, il est obligatoire que lensemble des pages du site web possdent la mme structure et organisation. Cela permet davoir une logique dans la structure des pages, mais aussi de ne pas gner la navigation de lutilisateur, cause des diffrentes structures de page chaque changement de page. Pour cela, jai ralis un modle pour la structure des pages que vous pouvez observer cidessous. La totalit des pages visibles par lutilisateur possderont cette mme structure : Deux bandeaux latraux. Un en-tte de page avec le logo du SCFP et le nom de la section locale. Un menu de navigation complet. Le contenu qui se modifiera selon les pages. Un pied de page avec lensemble des liens et infos pratiques.
Lintrt de procder ainsi est que seul le contenu du site varie dune page lautre, cest pourquoi de page en page on inclue toujours le mme en-tte, le mme menu de navigation et le mme pied de page. Cela vite de devoir implmenter nouveau chaque partie du site, ce qui entraine un gain de temps considrable.
Maxime CAPOLINO IUT Lille A Dpartement Informatique 2011/2012
28
a) Le bandeau latral La structure de chacune des pages est dsormais tablie, je vais vous prsenter les diffrents lments que comporte chacune des pages commencer par le bandeau latral qui entoure gauche et droite len-tte, le menu de navigation et le contenu. Les pages du site web comportant une structure simple et classique centre au milieu de lcran, ainsi que dun larrire-plan compltement blanc, rendait la page assez vide. Pour combler tout cet espace vide, jai ralis ces bandeaux afin de remplir ces espaces. b) Len-tte
Il y a plusieurs bauches concernant len-tte. Tout dabord, il y a eu un en-tte ne comprenant que le logo du SCFP. Pour avertir les visiteurs quils se trouvent sur un site du SCFP mais plus particulirement sur le site de la section locale 4475, nous avons ajout le nom de la section locale sous forme stylise que jai ralis par moi-mme. Ce style qui est apparu sur la carte daffaire notamment que je vous ai prsente plus tt dans ce rapport. c) Le menu de navigation
Le menu de navigation est un lment primordial dans la prsentation dun site web. En effet, il doit permettre de rejoindre aisment les autres pages du site web. Le menu qui a t ralis pour le site web de la section locale fut dans un premier temps ralis avec JavaScript. Cependant, des problmes sont apparus lors des survols de la souris sur les rubriques du menu, le changement daffichage ne seffectuait pas correctement. Par consquent, je suis revenu un menu traditionnel sous forme de liste o le rendu se modifie par lintermdiaire du CSS.
29
d) Le contenu Le contenu de chacune des pages est la partie la plus importante du site web. En effet, ce sera l o apparatront toutes les informations et documentations disponibles et mises en ligne par le syndicat. Le contenu sera entirement dynamique et modifiable par lintermdiaire dun espace dadministration accessible aux membres de lexcutif du SCFP 4475. Lensemble du contenu sera entirement stock dans la base de donnes relationnelle MySQL et sera modifi par des scripts PHP excuts lors denvoi de formulaires venant de lespace dadministration. Ce type de rubrique est extensible en hauteur linfinie ce qui permettra de sadapter nimporte quelle taille de contenu saisi par le syndicat.
e) Le pied de page
Le pied de page se trouvera dans la totalit des pages. Cette partie regroupera lensemble des liens utiles tels que les affiliations ou encore des documents mis en ligne par le syndicat.
Vous pouvez retrouver lensemble des codes et aperu des pages en annexes.
Maxime CAPOLINO IUT Lille A Dpartement Informatique 2011/2012
30
5) Ralisation de lespace dadministration a) Le besoin de cet espace Me concernant, je nai aucun problme pour modifier le contenu, crer de nouvelles pages web, mettre en ligne des documents sous format PDF, raliser des liens externe etc. Nanmoins aprs mon dpart, les membres de lexcutif devront tenir en vie le site web. La totalit de ces membres ne possdant pas de connaissance en informatique, une formation serait trop longue pour leurs transmettre toutes les connaissances savoir. Nanmoins, il fallait trouver un moyen pour permettre aux membres de lexcutif de modifier ce contenu rapidement et facilement. Pour cela, jai dcid de raliser un espace dadministration au sein du site web. Cet espace dadministration contiendra dautres pages html accessibles que par les membres de lexcutif. Ces pages web dadministration auront pour contenu de nombreux formulaire qui correspondront aux contenus que le site web possde. Pour cela, jai eu besoin dutiliser une base de donnes relationnelle MySQL pour stocker tout le contenu du site web. b) Connexion lespace dadministration Pour accder lindentification de lespace dadministration, il suffit de suivre le lien affich sur la page daccueil en dessous de la rubrique SST . Un identifiant et un mot de passe seront ncessaires pour pouvoir franchir cet espace didentification. Je fournirai aux membres de lexcutif ces identifiants de connexion ds que le dveloppement de la partie sera termin. Pour bloquer laccs cet espace et ouvrir une fentre didentification, jai essay de bloquer les fichiers correspondant avec les fichiers .htaccess et .htpasswd . La procdure se droule bien, la fentre souvre, la requte dindentification souvre correctement. Nanmoins, suite louverture de lespace dadministration. Un problme saffiche, une erreur de type 500, le problme vient certainement du fichier .htaccess qui correspond certainement la configuration du serveur dapache. Actuellement, je nai pas encore rsolu le problme, au cas je narriverai pas rsoudre ce problme, jeffectuerai lindentification par lintermdiaire dune page web.
31
c) Aperu des formulaires dadministration Voici ci-dessous un aperu de la page daccueil de lespace dadministration. Vous pouvez remarquer quil existe un menu trs complet cela correspond tous les formulaires qui permet de modifier le contenu du site web dynamiquement. Un bouton de dconnexion situ droite de Section Locale 4475 permet de quitter lespace dadministration et de voir les rsultats effectus sur le site web principal.
32
d) Exemple dune procdure de modification Je vais vous montrez un exemple de modification du contenu que les membres pourront effectuer par lintermdiaire des formulaires. Si par exemple, je souhaite modifier la date de la prochaine assemble gnrale sur la page daccueil. Tout dabord, jai deux possibilits qui me sont offertes pour accder au formulaire ddi. Soit par la page daccueil dadministration soit en cliquant sur assemble gnrale dans le menu de navigation.
Je modifie la valeur dans le formulaire, je remplace le 26 Septembre 2012 par le 28 Septembre 2012 puis je valide en cliquant sur le bouton Envoyer . Lors de lenvoi dun formulaire, un script PHP sexcute allant modifier le contenu de ces valeurs dans la table de la base de donnes o se trouvent ces donnes. De mme, une visualisation du rsultat apparait immdiatement comme vous pouvez le constater ci-dessous.
Si nous souhaitons observer le rsultat sur le site web, suite notre dconnexion de lespace dadministration, nous pouvons observer le mme rsultat.
33
6) Ralisation dune newsletter a) Expression de ce besoin Jai ajout une fonctionnalit au site web qui ntait pas prvue la base dans la conception du site. En effet, pour faciliter la communication entre le syndicat et leurs membres, jai propos aux membres de lexcutif un systme denvoi de mails sous forme de newsletter. b) Ralisation de cette fonctionnalit Pour pouvoir raliser cette fonctionnalit, il me fallait obtenir la liste des adresses courriels de lensemble des membres. Pour ne pas saisir les 1250 adresses courriels diffrentes, jai ralis une page dinscription en html pour inviter les membres sinscrire au site web de la section locale 4475. Cette page dinscription contient forcment le formulaire dinscription mais aussi un formulaire de dsinscription pour permettre aux membres de ne plus recevoir les emails du syndicat sils venaient quitter leur travail. De plus, un espace de connexion permettant de modifier son compte dutilisateur est disponible au cas o le membre change de poste, de numro de matricule ou encore dadresse courriel. Chaque membre va pouvoir venir sinscrire au site web en remplissant ce formulaire dinscription en y indiquant des informations personnels ainsi que son poste actuel et son numro de matricule, son adresse courriel pour recevoir les mails des membres de lexcutif du SCFP ainsi que dun mot de passe qui sera ncessaire pour sidentifier lors de la dsinscription ou modification du compte utilisateur. Lors de lenvoi de formulaire dans cette page html, jai ralis des scripts PHP envoyant automatiquement des mails vers ladresse courriel de lutilisateur lui confirmant que soit son inscription a t correctement effectue , soit que son compte utilisateur a t correctement modifi ou sa demande de dsinscription a t accepte et ralise. Lenvoi des emails se ralise par un serveur SMTP qui prendra en charge lenvoi aprs avoir construit lemail en script PHP. Lenvoi du mail sexcute par la fonction mail ( adresse de destination , intitul du mail , contenu du message , len-tte de lemail ). Des problmes ont t rencontrs concernant le contenu de lemail, je souhaitai raliser un email possdant un contenu en html, mais un problme daffichage du contenu a t dtect lors des tests que jai effectus. En effet, laffichage du contenu html ne se ralise pas en totalit. Notamment, pour ce qui est de laffichage des images insres dans la page html.
34
Chaque membre pourra slectionner son emploi actuel parmi une liste complte de lensemble des emplois existants. Outre les envois de mail automatique lors de linscription, modification et dsinscription dun compte utilisateur. Les membres de lexcutif du SCFP 4475 pourront envoyer des mails contenant des informations spcifiques une catgorie concerne. Cela permettra de donner plus de crdibilit chaque mail que pourra recevoir un membre. c) Aperu de lenvoi des mails automatiques Dans cette partie, je ne vais pas vous montrer toutes les pages html qui rsultent des diffrentes manipulations des formulaires. Nanmoins, vous pouvez retrouver toutes les manipulations possibles en annexes avec des aperus complets.
Vous pouvez voir ci-dessous un exemple demail de bienvenue mis automatiquement en version texte. Vous pouvez remarquer que le contenu texte ne saffiche pas pour le moment
compltement correctement malgr la spcification que jai indique concernant le type du contenu.
35
7) Mise jour du site web en ligne Pour mettre jour le site web en ligne, jeffectue quelques oprations pour mettre jour les fichiers que jai modifis. Les oprations qui seront dcrites dans cette partie correspondent une mise jour complte du site web en ligne. a) Exportation de la base de donnes en local La premire tape consiste exporter la base de donnes relationnelle MySQL. Pour cela, je me connecte PHPMyAdmin qui est une application Web de gestion pour les systmes de gestion de base de donnes MySQL. Suite la slection de la base de donnes, je lexporte par lintermdiaire de longlet correspondant. Suite lexportation, cela me procure une archive contenant un fichier localhost.sql . Avant de procder limportation de cette base sur mon site en ligne, je dois effectuer quelques modifications. En effet, ne possdant pas le mme nom de base de donnes en local et en ligne, je dois modifier le nom du fichier SQL que je viens dexporter en scfpcom_bdd.sql . Pour finir dans ce mme fichier, je modifie len-tte notamment la ligne correspondant la connexion de la base de donnes. Je dois remplacer use scfp ; par use scfpcom_bdd . b) Importation dans la base de donnes en ligne Suite lexportation de la base de donnes et aux modifications qui ont t effectues, je peux me connecter mon panneau de contrle du site web afin daccder nouveau lespace PHPMyAdmin. Les modifications apportes prcdemment permettent une importation de la base de donnes relationnelle avec succs, je dispose dsormais dune base de donnes jour. c) Envoi des fichiers en ligne Pour envoyer mes fichiers en ligne, jai utilis FileZilla que je vous ai prsent au dbut du rapport qui transfre les fichiers en protocole FTP. C'est un protocole de communication qui permet l'change de fichiers sur internet avec un rseau TCP/IP. Suite la saisie correcte du nom dhte, du protocole utilis et des identifiants de connexion, la connexion stablie entre mon ordinateur et lhbergeur web. Suite au transfert russi des nouveaux fichiers, jai une dernire manipulation a effectu qui consiste modifier un script PHP en accdant par le gestionnaire de fichiers sur mon panneau de contrle du site web. En effet, dans chacun de mes scripts PHP, jappelle un fichier nomm test.php qui tablit la connexion avec la fonction mysqli_connect . Cette fonction prend en paramtre le nom dhte, le nom dutilisateur et le mot de passe. Par consquent ne possdant pas les mmes identifiants, je dois modifier les paramtres avec les valeurs correctes afin que mes scripts soient excuts.
Maxime CAPOLINO IUT Lille A Dpartement Informatique 2011/2012
36
III)
Outre la ralisation du site web transactionnel, le SCFP 4475 possdait un autre besoin important qui correspond au canevas du journal de la section locale. Pour rappel, lors de chaque dition du journal du SCFP 4475, les diffrents membres de lexcutif ralisent des articles concernant lactualit du syndicat, du CSSS-IUGS ainsi que de la prvention. Suite la rdaction des articles et pour ne pas perdre de temps, les membres de lexcutif du SCFP 4475 envoient lensemble des articles une personne qui se charge de la mise en page du journal. Nanmoins ce travail de mise en page qui est dlgu possde un cot qui nest pas ngligeable. Par consquent, lexcutif du SCFP 4475 ma demand de raliser le canevas du journal pour leur permettre de raliser par eux-mmes la mise en page du journal en prenant le modle que jaurai ralis. Pour cela, jai utilis Microsoft Publisher pour crer le canevas du journal. Jai pu mappuyer de la forme ainsi que du contenu des journaux qui sont apparus dernirement, pour reprer les lments cls et importants du journal. Jai ralis ce canevas sans difficult apparente. Pour information, si vous souhaitez consulter les pages du canevas du journal, vous pouvez les retrouver en annexes. 2) Ralisation de la communication Jai particip grandement la communication et la promotion du site web et du journal. En effet, comme jai pu vous le dfinir prcdemment dans ce rapport, la communication et la promotion sont des moments cls et importants pour lattractivit et la notorit du site web. Pour cela, jai ralis une carte daffaires que je vous ai prsente prcdemment dans le rapport et que vous pouvez retrouver en annexes. De plus, nous allons participer au Comit en Communication pour la Visibilit et la Mobilisation (CCVM). La participation ce comit consiste promouvoir notre site web en se dplaant au sein des diffrents sites sur une priode de deux jours. Par ces deux lments nous esprons de tout cur rendre attractif notre site web ainsi que notre journal et dobtenir une mobilisation des membres du SCFP 4474. 3) Participations des comits Pour ma culture gnrale, jai pu participer de nombreux comits avec le syndicat lors des rencontres avec les diffrents employeurs. Jai pu notamment dcouvrir la notion de paritarisme dans certains comits. Dsormais, je porte dsormais un autre regard sur ce quest rellement un syndicat, moi qui navait aucune ide de son organisation ni de son fonctionnement.
Maxime CAPOLINO IUT Lille A Dpartement Informatique 2011/2012
37
IV)
Les 3 mois de stage mont apport beaucoup de choses, tant sur le plan professionnel que sur le plan personnel. Sur le plan professionnel, je me suis rvl moi-mme. En effet contrairement lIUT, je me suis retrouv dvelopper un projet web sans aucun soutien extrieur dun informaticien ou dune personne ayant quelques connaissances en informatique. Jai su faire preuve dinitiative, dautonomie et tre autodidacte notamment pour les deux langages que jai assimils qui sont le langage PHP et le langage JavaScript, ainsi que de la ralisation dune animation en Flash. Jai su parfaitement mintgrer au monde professionnel dans lequel je me situais. Ce qui ntait pas forcment facile au dpart puisque que je me situais ltranger, sur un autre continent et une autre culture. De plus, jai travaill au sein du monde syndical, et non pas dans un milieu informatique, ce qui fut une premire exprience intressante me concernant. Jai pu acqurir normment de culture gnrale et possde dsormais des avis critiques concernant mes expriences vcues ici. Sur le plan personnel, jai eu la chance de dcouvrir pour la premire fois un autre pays situ sur un autre continent et ainsi dcouvrir une autre culture. La vie au Qubec est un mlange de mode de vie amricain et europen qui me semble trs attrayant. Jai eu lopportunit de visiter durant la dure dun week-end de 3 jours la ville de New-York nomm The city that never sleeps (la ville qui ne dort jamais). Jai pu dcouvrir des aspects que je naurai peut-tre jamais eu loccasion de dcouvrir et tout ceci grce ce stage au Qubec.
38
Conclusion
Ce stage au Qubec fut une premire et fabuleuse exprience professionnelle et personnelle. En effet, Le fait que je ne disposai pas de soutien dinformation, jai d dvelopper des capacits de travail qui se sont rvles dans ce stage, jai non seulement su madapter cette situation assez particulire, mais jai galement su raliser un travail complet que ce soit dans lanalyse, que dans la cration du design du site web, que dans la conception des pages web ou encore dans la cration de nouvelles fonctionnalits. Les missions ont t toutes effectues dans leurs intgralits avec un rsultat trs satisfaisant que ce soit de mon avis que de lavis des membres de lexcutif du SCFP 4475. Cest pourquoi je suis vraiment fier de ce que jai ralis, et que je suis convaincu que ce stage maidera raliser mon projet professionnel qui est de poursuivre dans le dveloppement web. Je tiens aussi encore remercier ric Mailhot mon responsable de stage de mavoir offert lopportunit de travailler ses cts ainsi qu lensemble des personnes qui ont contribue la russite de ce stage.
Annexes
Annexe 1 Aperu de la carte de visite
39
Image 3
Image 4
Image 5
Image 6
Image 7
Image 8
40
Code HTML de la page SST Maxime CAPOLINO IUT Lille A Dpartement Informatique 2011/2012
42
Espace dinscription
43
Espace de dsinscription
44
45
46
47
Aperu du canevas du journal Maxime CAPOLINO IUT Lille A Dpartement Informatique 2011/2012
48
Glossaire
BDD : une base de donnes en informatique est un lot d'informations stockes dans un dispositif informatique. Les technologies existantes permettent d'organiser et de structurer la base de donnes de manire pouvoir facilement manipuler le contenu et stocker efficacement de trs grandes quantits d'informations. CCV : Comit en Communication pour la Visibilit et la Mobilisation (CCVM). Ce comit consiste promouvoir notre site web en se dplaant au sein des diffrents sites sur une priode de deux jours. CSS : son rle est de grer l'apparence de la page web (agencement, positionnement, dcoration, couleurs, taille du texte). Ce langage est le complment du langage HTML pour obtenir une page web avec du style. CSSS IUGS : abrviation qui signifie Centre de Sant et de Services Sociaux - Institut universitaire de griatrie de Sherbrooke . FileZilla : logiciel de transfert de fichiers par protocole FTP qui permet de mettre jour ou dinsrer ses fichiers sur son hbergeur. HTML : langage qui a pour rle est de grer et organiser le contenu d'une page web. C'est un langage de description de donnes, et non un langage de programmation. JavaScript : langage interprt par le navigateur. Le JavaScript est un langage client , c'est-dire excut chez l'utilisateur lorsque la page Web est charge. Il a pour but de dynamiser les sites Internet. MySQL : langage qui drive directement de SQL (Structured Query Language) qui est un langage de requte vers les bases de donnes exploitant le modle relationnel. Mais ne possde pas toute la puissance du langage SQL. SGBD : Systme de gestionnaire de base de donnes cest--dire est un ensemble de logiciels informatiques qui sert la manipulation des bases de donnes. Il sert effectuer des oprations ordinaires telles que consulter, modifier, construire, organiser, transformer, copier, sauvegarder ou restaurer des bases de donnes. WampServer : plate-forme de dveloppement Web sous Windows pour des applications Web dynamiques. Il est trs complet puisquil dispose du serveur Apache2, gre des fichiers du langage de scripts PHP et dune base de donnes MySQL. Il possde galement PHPMyAdmin qui permet de grer les bases de donnes.
49
Rfrences
Stphane Bordage, Conduite de projet web 6e dition, Paris, Eyrolles, 2011. Micro Application, Dveloppez votre site web HTML 5 CSS JavaScript, Paris, MA EDITIONS, 2012. Kevin Yank, Crer un site web avec base de donnes en PHP & MySQL 4e dition, Paris, Pearson, 2009.
http://www.siteduzero.com : site pour apprendre les connaissances de bases de certains langages. http://www.developpez.com : site dentraide et de formation pour la programmation plus pouss que sur le site du zro.
50