Création d'un site web avec système de préinscription en ligne.

CREATION D'UN SITE WEB AVEC SYSTEME

DE PREINSCRIPTION EN LIGNE :

GENIE INFORMATIQUE

I

EPIPHANIE GNALEKA

ORY M. YAO DIBY

:

2017/20189

CAS DE SUP'MANAGEMENT CI PERIEURE

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Dédicaces

Je dédie ce travail en particulier à mon père Ory Amafi Raymond, à ma mère Doudou Gnaleka Béatrice et à mon grand frère Ory Narcisse dont le soutient, la présence et tout l'amour sont mes points d'ancrage dans lesquels je puise mon énergie pour toujours me surpasser et donner le meilleur de moi.

Et en général à toute ma famille.

ORY EPIPHANIE 1

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Remerciements

Je ne saurais commencer ce mémoire sans dire un grand merci à l'Eternel Dieu qui, par sa bonté, sa grâce, sa patience et sa bienveillance, m'a donné la force, le courage et l'énergie nécessaire pour mener à bien et à terme ce projet. Qu'à Lui seul revienne l'honneur et la gloire maintenant et à jamais dans le précieux nom JESUS-CHRIST notre Seigneur.

Merci également à toute ma famille pour son soutient infaillible en toute circonstance.

Par ailleurs, je voudrais remercier l'administration de SUP'MANAGEMENT CI et aussi son corps enseignant pour la formation de qualité dispensée, pour leurs dévouements et leurs assistance tout au long de mon parcours universitaire. Particulièrement, merci à M. YAO DIBY qui nous a suivi ma promotion et moi depuis notre première année ici, toujours présent pour nous conseiller et partager avec nous ses expériences professionnelles et les leçons qu'on doit en tirer et qui a encore répondu présent pour m'encadrer pour ce présent mémoire.

Et comment clore cette série de remerciements sans un grand merci à tous mes condisciples de la LP3 qui m'ont soutenu de près ou de loin tout au long de ce projet et en particulier Mosso Guy qui a toujours répondu présent quand il le fallait.

ORY EPIPHANIE 2

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Avant-propos

Le présent mémoire s'inscrit dans le cadre de mon projet de fin de cycle de la licence professionnelle. Il a pour but la mise en application des connaissances acquises lors de mes années de formation en Génie Informatique à l'Université Intercontinentale Libre Sup'Management Côte d'Ivoire.

Dans notre ère actuel, l'expansion de l'internet est vraiment considérable et il n'y a rien de mieux pour avoir une certaine visibilité, de la notoriété et par la même occasion plus de crédibilité surtout quand on est une école supérieure offrant une formation en informatique. Et on ne peut clairement pas parler d'internet aujourd'hui sans parler du web. C'est dans cette optique de l'utilisation des nouvelles technologies de l'information et de la communication que s'inscrit notre idée de création d'un site web pour l'université intercontinentale libre SUP'MANAGEMENT CI. Par ailleurs, l'utilisation de cet outil peut aider, dans la mesure du possible, les futures étudiants et l'administration de SUP'MANAGEMENT CI dans le processus d'inscription en instaurant un système de préinscription en ligne.

La préinscription en ligne pourrait apporter un plus au niveau de la rapidité dans le service de l'inscription. Les étudiants pourront désormais avoir les informations nécessaires en ligne et se préinscrire au besoin sans nécessairement faire des aller-retours à l'institution. Cela épargnerais au service d'inscription la tâche supplémentaire de soit même entré les mêmes informations dont les étudiants peuvent se charger.

ORY EPIPHANIE 3

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Sommaire

Avant-propos......... ... ............ 3

Liste des tableaux ..5

Liste des figures	6
Introduction générale	7
Problématique	..9

PARTIE I : CADRE DE REFERENCE

Chapitre I structure 11

Présentation de la

Chapitre II : Etude de l'existant .14

PARTIE II : ETUDE TECHNIQUE

Chapitre III : Analyse et conception 24

Chapitre IV : La démarche conceptuelle ..28

PARTIE III : REALISATION

CHAPITRE V : outils utilisés 38

Chapitre VI mise en

oeuvre ..43

CHAPITRE VII : Déploiement .57

ORY EPIPHANIE 4

ORY EPIPHANIE 5

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Liste des tableaux

Tableau 1: Sections et fonctionnalités de notre site 18

Tableau 2: Budget principal 20

Tableau 3: Le dictionnaire de données 32

ORY EPIPHANIE 6

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Liste des figures

Figure 1: Arborescence du Front-End du site 16

Figure 2: Arborescence du Back-End du site 17

Figure 3: Flux d'informations entre l'étudiant et le domaine d'étude 28

Figure 4: Modèle conceptuel de communication 29

Figure 5:Graphe d'ordonnancement des évènements 29

Figure 6: Le Modèle Conceptuel de données 33

Figure 7: Page d'accueil du site web de sup'management ci 42

Figure 8: Page destinée au mot du président du groupe Supm'nagement 43

Figure 9: Page de présentation 43

Figure 10: Personnel Administratif 44

Figure 11: Organisation administrative de sup'management ci 44

Figure 12: Métiers et Débouchés de la licence 45

Figure 13: Conditions d'admission 45

Figure 14: Filière informatique pour la licence 46

Figure 15: Filière informatique pour le master 47

Figure 16: Les emplois du temps téléchargeables 47

Figure 17: Le calendrier scolaire 48

Figure 18: Le formulaire de préinscription en ligne 48

Figure 19: Interface de phpmyadmin 49

Figure 20: La base de données 50

Figure 21: Connexion à la base de données 51

Figure 22: Récupération des données rentrées dans le formulaire 52

Figure 23: Récapitulatif des informations saisies 53

Figure 24: Affichage de l'information saisie 53

Figure 25: Page administrateur 54

Figure 26: Page d'accueil de 000webhost 60

Figure 27: Formulaire d'inscription 000webhost 60

Figure 28: Page intermédiaire 61

Figure 29: Page d'administration de notre domaine 62

Figure 30: Logo FileZilla 62

Figure 31: Bouton de lancement de Filezilla 63

Figure 32: Interface de FileZilla 64

Figure 33: Des fichiers sont hébergés sur notre domaine 65

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

INTRODUCTION GENERALE

L'informatique représente la révolution la plus importante et la plus innovante qui a marqué la vie de l'humanité ces dernières décennies. Et avec l'informatique est venu plus tard internet qui offre une multitude de services. Au nombre de ces services, nous avons le World Wide Web plus communément appelé le web qui permet la consultation, via un navigateur, de pages de sites internet. Un service qui au fil du temps a pris de l'ampleur. Aucun domaine n'est resté étranger à ce service dont l'utilité n'est plus à prouver aussi bien pour l'enseignement ou l'administration que pour l'apprenant.

Depuis quelques années on assiste en effet à une multiplication de sites web qui permettent aux élèves de consolider les connaissances acquises en classe avec leur professeur. Le développement des nouvelles Technologies de l'Information et de la Communication (TIC) a permis aux étudiants de s'affranchir d'un cadre spatio-temporel pour parfaire leur apprentissage en utilisant de telles plates-formes en ligne. La tendance est désormais d'élargir le champ d'utilisation de ses plateformes de sorte à ce que les étudiants viennent en aide, d'une certaine façon, à l'administration scolaire. C'est dans ce sens que s'oriente notre projet portant sur la création d'un site web avec système de préinscription en ligne : Cas de Sup'Management CI.

Pour mener à bien ce projet nous avons présenté l'environnement du projet puis fait une étude technique puis conceptuelle avant de passer au déploiement et à la mise en ligne de notre site.

ORY EPIPHANIE 7

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

PROBLEMATIQUE

L'informatique occupe, aujourd'hui, une place prépondérante dans notre société. C'est donc sans grande surprise que les entreprises et grande écoles se ruent vers cet outil pour améliorer leurs modes de fonctionnement. SUP'MANAGEMNT CI n'a pas de site internet qui lui est propre et cette invisibilité sur la toile la met en marge de l'évolution sociétale. Pas vraiment crédibilisant pour une école supérieure qui offre forme en informatique. Pour avoir des informations précises sur SUP'MANAGEMNT CI les personnes doivent se rendre physiquement sur les lieux. Et la procédure d'inscription se fait par de multiples allez et venus de l'étudiant sur le lieu.

La difficulté de diffusion de l'information et le ralentissement de la procédure d'inscription constatés soulèvent une question essentielle : Quel système mettre en place pour assurer la diffusion de l'information et faciliter la procédure d'inscription ?

De cette question principale, ressort deux sous questions : - Comment assurer la diffusion de l'information ?

- Comment faciliter la procédure d'inscription ?

Pour répondre à ces questions, les solutions suivantes peuvent être abordées :

- La mise en place d'un site web. La création d'un site web permettrai à SUP'MANAGEMENT CI d'être vu sur la vitrine nationale et

internationale, de présenter son potentiel. Les étudiants pourront facilement avoir accès aux informations dont ils ont besoins concernant les formations,

les débouchées, la procédure d'inscription, les dossiers nécessaires, les conditions d'admission etc.

- Création d'une application de préinscription en ligne. Le site web sera donc doté d'une application de préinscription en ligne et permettra aux étudiants de se préinscrire en ligne s'ils le souhaitent. Et ne faire qu'un seul déplacement pour le dépôt physique des dossiers et la finalisation de l'inscription. De son côté l'administration sera épargné de la tâche d'enregistrement des données. En outre si les préinscriptions pour l'année suivante sont ouvertes durant toute l'année en cours cela peut permettre à l'école d'avoir une idée du nombre de nouveau étudiants qu'elle pourra accueillir l'année suivante.

Notre objectif est donc de mettre en place un site web doté d'une application de préinscription en ligne. La base de données de l'application va stocker et gérer les informations des étudiants. Ce site web dynamique ne fera que montrer l'ouverture d'esprit de SUP'MANAGEMENT CI aux différentes possibilités d'évolution.

ORY EPIPHANIE 8

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Cette partie consistera en la présentation de l'université Sup'Mangement CI à qui est destinée ce site, aussi à l'étude de l'existant et la faisabilité de notre thème. Ceci afin d'appréhender au mieux les facteurs qui nous conduirons à nos choix.

ORY EPIPHANIE 9

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

CHAPITRE I : Présentation de la structure

I.1- Présentation de Sup'Management CI

Sup'Management Côte d'Ivoire est un détachement du groupe Sup'Management Maroc installé en Côte d'Ivoire en l'an 2002. Le Groupe Sup'Management, fondé en 1995, fort de l'expérience et de l'excellence de son équipe dirigeante et son corps professoral de renommée, est porteur d'un grand projet éducatif, hautement innovateur, conçu pour les nouvelles générations de la jeunesse marocaine et africaine, dans un monde complexe, incertain et en perpétuel changement. Former des leaders entrepreneurs, dotés des qualités de créativité, de challenge, d'ouverture, et ayant un sens élevé de la responsabilité et de l'éthique, est l'objectif majeur autour duquel nous avons bkti un nouveau modèle d'école. Le Programme Grande Ecole du Groupe, traduction directe de ce modèle, offre en effet une formation d'excellence organisée en plusieurs pôles, alliant les savoirs aux compétences, connecté aux valeurs culturelles et sociales de nos sociétés et répondant aux besoins de notre environnement économique. La place réservée à la recherche scientifique dans ce Programme confirme sa richesse et sa qualité, qui a valu au Groupe des prix et des distinctions mondiales reconnues. La dimension internationale du Groupe, de par sa présence sur plusieurs pays du Continent Africain mais aussi son association avec le Groupe E.I.U. implanté sur les USA et des pays de l'Amérique Latine, en fait un cas presque unique dans le Paysage de l'enseignement supérieur marocain et africain

L'ouverture sur l'international, a toujours été une pierre angulaire dans la politique de développement du Groupe. Ainsi, près d'une centaine de partenariats ont été conclus avec des institutions académiques, institutionnelles, industrielles et autres, ainsi que des réseaux d'excellence sur plusieurs pays.

ORY EPIPHANIE 10

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

I.2- Pôles de formation

Sup'Management Côte d'Ivoire est un détachement du groupe Sup'Management Maroc et à l'image du Groupe Sup'Management, met en évidence une démarche d'ingénierie pédagogique basée sur la polyvalence & la spécialisation diversifiée.

Le cycle d'études s'établit de la manière suivante :

Le Cycle BTS : avec 4 filières au choix :

Gestion commerciale

Finance comptabilité et finance d'entreprise Informatique et développement d'application

Logistique et transport

Le Cycle Licence professionnelle : avec 3 filières au choix, (existe

également en cours du soir à partir de la 3ième année) :

Finance - Comptabilité

Marketing

Génie Informatique

Le Cycle Supérieur : Master (Bac+5) avec 3 filières au choix en

double diplomation (en cours du soir) :

Management des ressources humaines

Génie logiciel

Ingénieur des systèmes et réseaux

Le programme des études est conforme aux normes et aux standards internationaux. Sup'Management dispense un accompagnement et un soutien pédagogique continu pendant la formation.

ORY EPIPHANIE 11

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

CHAPITRE II : Etude de l'existant

II.1. Description de l'existant

II.1.1- Matériel et logiciel

- Un serveur de stockage des données de la comptabilité

- Un formulaire de candidature

- Un Rooter

- Deux Switch

- Une connexion WiFi

- La fibre optique

- Un réseau social : facebook

II.1.2- Procédure d'inscription

Un étudiant désirant s'informer sur les modalités d'inscription et éventuellement s'inscrire à l'université Sup'Management CI doit se rendre physiquement sur le site. Et là, il y a deux cas de figure :

- L'étudiant est autonome et décide, sur le champ, de s'inscrire ;

- L'étudiant a besoin de l'accord de ses tuteurs et rentre chez lui avec les fiches d'information (voir annexe) pour peut-être revenir plus tard pour débuter la procédure d'inscription.

L'étudiant voulant s'inscrire reçoit alors un formulaire de candidature (voir annexe) à remplir une fois rentrer chez lui. L'étudiant revient ensuite avec le formulaire dument rempli et avec les dossiers à fournir pour finaliser son inscription.

Au niveau de l'administration de l'université Sup'Management c'est le moment d'entrer les informations de l'étudiant inscrit dans leur base de données.

II.2. Critique de l'existant

Après l'étude de l'existant, nous pouvons relever les problèmes suivants :

- Inexistence d'un site internet

ORY EPIPHANIE 12

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

- Le système d'inscription n'est pas informatisé

- Un volume énorme de travail en début d'année

- Lenteur dans le processus d'inscription

- Inexistence d'un moyen de résolution du problème géographique

pour les étudiants hors d' bidjan

- Inexistence d'un moyen de prévision des étudiants potentiels de

l'année en cours et à venir

II.3- Le cahier de charges

II.3.1- Présentation du projet

Les attentes

Ce site internet aura pour but de :

- Améliorer la visibilité de Sup'Managenent CI sur le net et par la mrme occasion augmenter sa notoriété

- Augmenter la crédibilité de Sup'Management CI

- Donner aux étudiants les informations nécessaires concernant les modalités d'inscription

- Eviter les multiples déplacements des étudiants en leur offrant la possibilité de se préinscrire en ligne

- Epargner à l'administration de Sup'Management CI la tkche supplémentaire de rentrer, elle-même, les informations demandées aux étudiants dans sa base de données

- Permettre à l'administration de Sup'Management CI d'avoir, en avance, une idée du nombre d'étudiants qu'elle pourra accueillir pour l'année suivante

Raisons de l'existence du projet

L'idée de ce projet est née suite aux constats suivants :

ORY EPIPHANIE 13

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

- Absence d'un site internet pour Sup'Management CI, ce qui est assez problématique surtout pour une école supérieure qui offre des formations dans le domaine de l'informatique

- Absence d'un moyen concret de diffusion de l'information concernant Sup'Management CI

- Absence de moyen concret de prévision du nombre d'étudiants potentiels - Absence de moyens pour les étudiants n'étant sur place de se préinscrire

- Saisie assez pénible des informations des étudiants dans la base de

données

II.3.1.1- Objectifs du site

Les objectifs de notre site sont fixés à deux niveaux que sont :

Au niveau de l'étudiant

- Accès aux informations des modalités d'inscription via le site internet

- La possibilité de se préinscrire en ligne via un formulaire fait sur la base du

formulaire de candidature (voir annexe)

- Téléchargement sous forme de PDF d'une fiche attestant sa préinscription

en ligne

- Téléchargement des emplois du temps des différentes classes

- Téléchargement du programme des études

- Téléchargement des prospectus

Au niveau de l'administration des étudiants préinscrits

Notre site doit donc avoir les fonctionnalités suivantes :

Une base de données dans laquelle répertorier les informations concernant les étudiants

ORY EPIPHANIE 14

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Un formulaire d'inscription qui permet d'enregistrer les données dans la base de données

Une page récapitulative des informations saisies pour vérification

Un PDF à télécharger en cas de confirmation de son inscription

Une page d'administration affichant la liste des étudiants inscrits avec évidemment la possibilité pour l'administrateur de mettre à jour ou supprimer des données

La page d'administration ne doit pas rtre accessible à tous donc demande une authentification avant d'y accéder

Le nombre d'étudiants par filière, par niveau et en tout doit rtre affiché sur la page d'administration

La fonction de recherche

II.3.1.2- Arborescence #177; Plan du site

Nous allons faire ressortir ici, dans une première partie, les différentes rubriques de notre site via un organigramme. L'organigramme va seulement prendre en compte l'aspect utilisateur (Front End) de notre site.

Dans une deuxième partie, nous allons faire ressortir « l'arborescence » du côté de l'administration.

ORY EPIPHANIE 15

ORY EPIPHANIE 16

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Commerciale

II.3.1.2.1- Le Front-End

Informatique

Débouchés

Figure 1: Arborescence du Front-End du site

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

E-E : Espace-Etudiant

QSN : Qui somme nous ?

SUPCI : Sup'Management Côte d'Ivoire

Personnel Ad. : Personnel Administratif

LP : Licence Professionnel

MP : Master Professionnel

BTS : Brevet de Technicien Supérieur

ISR : Ingénieur des Systèmes et Réseaux

MRH : Management des Ressources Humaines

FC & FE : Finance Comptabilité et Finance d'Entreprise

IDA : Informatique et Développement d'Application LT :

Logistique et Transport

II.3.1.2.2- Le Back-End

ORY EPIPHANIE 17

Figure 2: Arborescence du Back-End du site

II.3.1.3- Fonctionnalités

Nom section	Fonctionnalité	descriptif
Front-End
Inscription	Préinscription en ligne	Il s'agit d'un lien menant à un formulaire établit selon le modèle du formulaire de candidature de Sup'Management. Les étudiants se préinscrirons via ce formulaire et les données seront transférés dans une base de donnés.
Contenu Informatif	Informer	Le contenu principal du site va présenter Sup'Management et donner les informations sur les modalités

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

		d'inscription, les filières, le fonctionnement et tout autre informations nécessaires.
Back-End
Base de données	Stocker les données des étudiants	Les informations seront récupérées via le formulaire et stocker dans une base de données.
Authentification	Authentifier l'administrateur	L'accès à la page d'administration n'est pas autorisé à tous donc il faut une authentification pour donner l'accès aux ayants droit.
Administration	Administrer les données des étudiants	Récupérer les informations depuis la base de données et les afficher avec la possibilité de mise à jour, de suppression, de modification et de recherche. Sera aussi affiché le nombre total des étudiants par niveau, par filière, par cycle, par cycle×niveau et en tout.

Tableau 1: Sections et fonctionnalités de notre site

II.3.2- Contenu à fournir par Sup'Management CI

Pour les éléments de fond de son site internet, Sup'Management CI devra nous fournir les éléments suivants :

- Les informations selon les différentes rubriques prévues

- Des photos publicitaires de l'université et des étudiants de

Sup'Management CI aux formats jpeg et/ou PNG

- Des photos des différentes activités organisées par Sup'Management CI

aux formats jpeg et/ou PNG

- Le logo de Sup'Management CI au format jpeg

- Les fichiers suivant au format PDF

Les emplois du temps des différents niveaux de chaque filière

La brochure de Sup'Management CI

Le programme d'étude de Sup'Management CI

ORY EPIPHANIE 18

ORY EPIPHANIE 19

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Procédure d'inscription et règlement des frais de scolarité

II.3.3- Prestations attendus

II.3.3.1- Charte graphique

Les couleurs du site seront principalement les couleurs du logo du groupe SUP'MANAGEMNT que sont le blanc, le bleu ciel, le bleu clair, l'orange et le gris. Quant à la police, nous utiliserons Time New Roman, Sans Serif, Arial narrow.

II.3.3.2- Contraintes techniques

Nom de domaine et Hébergement

Le nom de domaine sera réserver chez l'hébergeur choisit. On choisira un hébergement mutualisé avec au moins les caractéristiques suivantes :

Espace disque : 100Go

Trafic mensuel : Illimité

Niveau de classification data center : Tiers III

Temps d'arrrt/an : 2h maximum

Nombre de visiteur simultané : 75

PHP : inclus

Node.js : Inclus

Base de données SQL : 1X200Mo

Assurer la maintenance du site

ORY EPIPHANIE 20

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

II.3.3.3- Enveloppe budgétaire

Les besoins du projet Coût
Coût fixe	L'ordinateur	260 000
	Le webmaster	200000
	Total	460.000
Coût récurrent	Hebergeur	8700/mois
	La maintenance	35000/mois
	Total	43700/mois

tableau 2: Budget principal

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Cette partie consistera en la présentation, d'une part, des différentes méthodes d'analyse pour la modélisation d'une base de données et d'autres parts, en la présentation de notre démarche conceptuelle.

ORY EPIPHANIE 21

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

CHAPITRE III : Analyse et conception

Les méthodes d'analyse nous permettent de modéliser un système d'information. Le système d'information ou SI, peut être défini comme étant l'ensemble des moyens humains, matériels et immatériels mis en oeuvre afin de gérer l'information au sein d'une unité, une entreprise par exemple.

Le SI possède quatre fonctions essentielles :

- La saisie ou collecte de l'information

- La mémorisation de l'information à l'aide de fichier ou de base de données - Le traitement de l'information afin de mieux l'exploiter (consultation, organisation, mise à jour, calculs pour obtenir de nouvelles données,...) - La diffusion de l'information

La modélisation consiste à créer une représentation virtuelle d'une réalité de façon à faire ressortir les points auxquels on s'intéresse.

III.1- Le langageUML (Unified Modeling Language)

UML (Unified Modeling Language), en français « langage de modélisation Unifié ») est un langage visuel constitué de plusieurs diagrammes donnant chacun une vision différente du projet à traiter. UML permet de comprendre et décrire des besoins, spécifier et documenter les systèmes, et sert aussi à esquisser des architectures logicielles, concevoir des solutions et communiquer des points de vue. Le langage UML ne préconise aucune démarche. Chacun est libre d'utiliser les types de diagramme qu'il souhaite, dans l'ordre qu'il veut. Il suffit que les diagrammes réalisés soient cohérents entre eux, avant de passer à la réalisation du logiciel. Mais nous allons quand même citer quelques diagrammes de base :

ORY EPIPHANIE 22

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

- Diagrammes de cas d'utilisation (statique) : servent à représenter les fonctionnalités offertes au système ainsi que les acteurs et comment ils exploitent le système ;

- Diagrammes de séquence (dynamique) : servent à montrer les interactions entre objets du point de vue temporel ;

- Diagrammes de classes (statique): illustre les classes avec les attributs, les méthodes et les relations entre les classes ;

- le diagramme d'objets : permet de vérifier/instancier la validité du diagramme de classe

- «

III.2- La méthode MERISE

MERISE est une méthode d'analyse et de conception des systèmes d'information (SI) d'origine française basée sur le principe de séparation des données et des traitements. Elle a été développée initialement par Hubert Tardieu dans les années 70 puis mise en avant dans les années 80 à la demande du ministère de l'Industrie qui souhaitait une méthode de conception des SI.

MERISE en tant que méthode de conception décrit le système d'information par

trois niveaux :

- Niveau conceptuel.

- Niveau logique (organisationnel).

- Niveau physique.

MERISE en tant que méthode de développement découpe le processus de développement en quatre étapes :

- L'étude préalable. - L'étude détaillée.

ORY EPIPHANIE 23

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

- L'étude technique. - L'étude du logiciel.

III.3- Merise ou UML

Merise et UML sont deux grands principes de modélisation d'un système d'information. Néanmoins, ils ne sont pas aussi proches qu'on pourrait le penser. Il apparait mrmes qu'ils peuvent rtre complémentaires dans certains cas.

UML, de par son origine (la programmation objet) s'affirme comme un ensemble de formalismes pour la conception de logiciel à base de langage objet. MERISE se positionne comme une méthode de conception de SI organisationnel, plus tournée vers la compréhension et la formalisation des besoins du métier que vers la réalisation de logiciel.

Le choix de l'un ou de l'autre se fait selon trois axes à savoir l'accessibilité, la précision et l'exploitabilité. Pour le premier axe (accessibilité) MERISE présente l'intérêt d'avoir des modèles logiques moins détaillés facilement compréhensibles. Tandis que UML conçu pour s'adapter à n'importe quel langage de programmation orientée objet (POO), présente plusieurs modèles (diagrammes) dont leurs compréhensions nécessitent une grande attention.

En ce qui concerne le deuxième critère (précision), MERISE est moins préférable. Malgré sa clarté, il manque une précision du fait qu'elle est éloignée du langage donc difficile à implémenter alors que UML intègre les éléments communs des différents langages, sa volonté est d'être fidèle à la réalisation finale. Elle est beaucoup plus complète avec ses différents diagrammes.

ORY EPIPHANIE 24

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Pour en finir avec l'exploitabilité, MERISE est une méthode plus généraliste. Elle donne une vue globale de la solution sans autant entrer dans les petits détails. Contrairement à UML qui est conçu pour l'implémentation objet avec ses différents détails et sa portabilité (s'adapte à n'importe quelle plateforme) elle est donc plus exploitable.

L'une ou l'autre présente des avantages et des inconvénients. Il est réservé au concepteur de choisir la méthode la mieux adaptée pour son cas. Si on cherche la précision et l'exploitabilité UML devance MERISE. Tandis que, si c'est la clarté et l'accessibilité qui sont en question MERISE est préférable.

Mon application gère des données moins complexes d'où MERISE est la mieux recommandée, vu qu'elle rend la modélisation plus simple à implémenter.

ORY EPIPHANIE 25

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

CHAPITRE IV : La démarche conceptuelle

Cette partie est consacrée aux étapes fondamentales pour le développement de notre système de gestion des inscriptions des étudiants. Pour ce faire nous allons débuter par l'étude préalable. Cette étude permet d'établir un diagnostic de la situation à modéliser en fonction des objectifs et des contraintes globalement définis.

IV.1- Etude préalable

Il est question ici d'une étude et d'une conception globale mais laissant la possibilité de détailler certains points. Cette étape commence par l'analyse de la situation actuelle et permet de proposer une architecture globale de la solution, en tenant compte des orientations de gestion d'organisation et de choix technique.

IV.1.1- Domaine d'étude (D.E)

IV.1.2.- Existant

Pour faciliter la procédure d'inscription tant pour Sup'Management CI que pour l'étudiant voulant s'y inscrire, une solution de site internet avec possibilité de préinscription en ligne a été proposée. La procédure existante consiste en ce qu'un étudiant souhaitant s'informer et éventuellement s'inscrire à Sup'Management CI doit s'y rendre physiquement. En effet, l'étudiant se rend au secrétariat de l'établissement où il reçoit les informations nécessaires et un formulaire à remplir, s'il le souhaite. Le formulaire dument rempli est remis au secrétariat qui à son tour le transmet au bureau de la Directrice Générale Adjointe qui statue sur l'acceptation ou non de l'étudiant. La décision prise est retournée au secrétariat qui à son tour informe l'étudiant de la décision prise.

ORY EPIPHANIE 26

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Acteur externe : L'étudiant

Acteurs internes : Le Secrétaire Général et La Directrice Générale Adjointe

IV.1.3- Liste des entités et propriétés

A partir de l'analyse du formulaire de candidature (voir annexe) qui est le document principal ici utilisé, nous avons pu faire ressortir les entités et les propriétés suivantes :

- Etudiant : N° Carte d'identité, nom, prénoms, date de naissance, lieu de

naissance, domicile, téléphone, e-mail, photo.

- Nationalité : libellé de la nationalité.

- Tuteur : nom du tuteur, prénom du tuteur, domicile du tuteur, téléphone

du tuteur

- Civilité : libellé de la civilité

- Baccalauréat : numéro du BAC, série du BAC, année du BAC,

établissement d'origine

- Formation : diplôme, spécialité, année du diplôme, institution

- Langue : libellé de la langue, niveau

- Cycle : libellé du cycle, le niveau dans le cycle

- Filière : libellé de la filière

IV.1.4- Le flux d'information

1) Demande d'informations

2) Non-disponibilité de l'information

3) Disponibilité de l'information

4) Demande du formulaire de candidature

5) Transmission du formulaire à l'étudiant

ORY EPIPHANIE 27

ORY EPIPHANIE 28

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

6) Retour du formulaire rempli au secrétaire

7) Transmission du formulaire à la Directrice Générale Adjointe

8) Transmission de la décision d'acceptation prise au secrétariat

10) Transmission de la décision de refus au secrétariat

11) Transmission de la décision de refus au candidat

12) Transmission de la décision d'acceptation au candidat

Modèle de contexte

Figure 3: Flux d'informations entre l'étudiant et le domaine d'étude

Ce premier modèle met en exergue le flux d'information échangé entre l'acteur externe qui est l'étudiant et le domaine d'étude sans prendre en compte l'échange qui a lieu au sein du domaine d'étude.

Le Modèle Conceptuel de Communication (MCC)

Ce modèle fait non seulement ressortir le flux d'informations échangé entre le domaine d'étude et l'acteur mais également le flux d'informations à l'intérieur du domaine d'étude.

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Figure 4: Modèle conceptuel de communication

Graphe d'ordonnancement des évènements

ORY EPIPHANIE 29

Figure 5:Graphe d'ordonnancement des évènements

IV.2- Etude détaillée

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Cette étude a pour but la description de la solution à réaliser en analysant les données et recenser les traitements à exécuter sur ces données. Cette analyse respecte un formalisme précis à trois niveaux que sont :

- Niveaux conceptuel

- Niveau organisationnel

- Niveaux opérationnel

IV.2.1- Dictionnaire de données

Le dictionnaire de données est un document (ensemble de tableaux) regroupant toutes les données que nous aurons à conserver dans notre base. Pour chaque donnée le dictionnaire indique le code mnémonique (libellé désignant une donnée), la taille du champ, la désignation et le type de donnée qui peut être Alphabétique (noté : A), Numérique (noté : N), une date ou Alphanumérique (noté : AN).

ORY EPIPHANIE 30

prenom_Et

photo

lib_Nat Libellé de la nationalité A 45

tuteur

id_tut Identifiant du tuteur N Identifiant

nom_tut Nom du tuteur A 20

prenom tut Prénom du tuteur A 45

num_CNI Numéro de la carte nationale d'identité AN 11 Identifiant

nom Et Nom de l'étudiant A 20

tel_Et

tel_tut

num_Bac Numéro du BAC AN 10 Identifiant

Id form Identifiant de la formation universitaire N Identifiant

Le diplôme obtenu à l'issu de cette

Diplôme A 45

formationSpecialite Quelle spécialité de la formation A 45

Annee dip _ Année d'obtention du diplôme AN 4

niveau_lang

id cycle Identifiant du cycle N Identifiant

lib_cycle Libellé du cycle A 20

niveau cycle Niveau du cycle AN 20

filiere

Id_fil Identifiant de la filière N Identifiant

Lib fil

date_Nais

lieu

domicile_Et

email

nationalite

Identifiant de la nationalité de

id_Nat

l'étudiant

domicile_tut

id civ Identifiant de la civilité N

lib civ Libellé de la civilité A 5

annee_bac

etab org Etablissement d'origine A 50

institution

id_lang

lib_lang

Code Désignation Type Taille Observation

serie

Numéro de téléphone de l'étudiant AN 30

Domicile du tuteur

Niveau de la langue

Prénoms de l'étudiant

Date de naissance de l'étudiant

Lieu de naissance de l'étudiant

Domicile de l'étudiant AN 45

Adresse mail de l'étudiant AN

La photo de l'étudiant

Année d'obtention du BAC

L'institution dans laquelle l'étudiant a suivi la formation

Libellé de la langue

Libellé de la filière

Téléphone du tuteur

Identifiant de la langue

Série du BAC

baccalaureat

formation

etudiant

civilite

langue

cycle

Date

AN

AN

AN 4

N Identifiant

N Identifiant

A

A

A 45

A 1

45

A

A

A

A

100

100

45

45

45

45

60

15

Identifiant

ORY EPIPHANIE 31

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Tableau 3: Le dictionnaire de données

IV.2.2- Règle de gestion

- Un étudiant est associé à une et une seule civilité

Zéro ou une civilité est associé à un ou plusieurs étudiants

- Un étudiant appartient à une et une seule nationalité

Zéro ou une nationalité appartient à un ou plusieurs étudiants

- Un étudiant est inscrit dans un et un seul cycle

Zéro ou un cycle a en son sein un ou plusieurs étudiants inscrits

- Zéro ou un étudiant a suivi une ou plusieurs formations

Une formation a été suivie par un ou plusieurs étudiants

- Un étudiant a un et un seul tuteur

Un tuteur peut avoir un ou plusieurs étudiants

- Un étudiant fait une et une seule filière

Zéro ou une filière est faite par un ou plusieurs étudiants

- Un étudiant a obtenu un et un seul BAC

Un BAC a été obtenu par un ou plusieurs étudiants

- Un étudiant parle une ou plusieurs langues

Une langue est parlée par un ou plusieurs étudiants

IV.2.3- Modèle Conceptuel de Données (MCD)

Le Modèle Conceptuel des Données (MCD) fait référence à tous les objets du système d'informations et aux relations entre ces objets.

Le modèle se base selon 3 concepts principaux : les entités, les relations et les cardinalités.

ORY EPIPHANIE 32

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Figure 6: Le Modèle Conceptuel de données

IV.2.4- Modèle Logique de Données (MLD)

Le MLD (modèle logique des données) reprend le contenu du MCD précédent, mais fournit une description des données tenant compte des moyens informatiques mis en oeuvre. Il complète le MCD en introduisant la notion d'organisation. Il indique donc comment les données seront organisées et implémentées.

cycle (id_cycle, lib_cycle, niveau_cycle)

civilite (id_civ, lib_civ)

nationalite (id_nat, lib_nat)

formation (id_form, diplôme, specialite, annee_dip, institution)

tuteur (id_tut, nom_tut, prenom_tut, domicile_tut, tel_tut)

filiere (id_fil, lib_fil)

baccalaureat (num_Bac, serie, annee_bac, etab_org)

ORY EPIPHANIE 33

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

langue (id_lang, lib_lang, niveau_lang)

etudiant (num_CNI, nom_Et, prenom_Et, date_Nais, lieu, domicile_Et, email, tel_Et, photo, #id_civ, #id_nat, #id_tut, #id_fil, #num_Bac, #id_form) inscrire (#id_cycle, #num_CNI, date_inscrip)

parler (#num_Bac, #id_lang)

N.B : les clés primaires sont soulignées et les clés étrangères sont précédées d'un #.

ORY EPIPHANIE 34

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Cette partie consistera en la présentation des différents outils matériels et logiciels utilisés pour la réalisation de notre projet, suivie de la mise en oeuvre avant de terminer par le déploiement de notre site.

ORY EPIPHANIE 35

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

CHAPITRE V : Outils utilisés

V.1- Environnement matériel

Pour développer notre application nous avons utilisé un ordinateur HP avec les

caractéristiques suivantes :

Mémoire RAM : 4 Go.

Taille disque dur : 500 Go.

Processeur : Intel(R) Core(TM) i3-4005U CPU @ 1.70GHz.

Type de système : Windows 10 prexesseur×64

V.2- Environnement Logiciel

V.2.1- XAMPPServer

XAMPP se définit comme multi-plateforme (X), Apache (A), MySQL (M), PHP (P) et Perl (P). C'est une distribution Apache simple, légère et rapide d'installation qui permet aux développeurs de créer facilement un serveur web local à des fins de test. Cette distribution se chargera donc d'installer les éléments dont nous aurons besoin à savoir PHP, phpMyAdmin, MySQl qui va nous servir pour notre base de données et Apache qui servira de serveur web. XAMPP est multi-plateforme, ce qui signifie qu'il fonctionne aussi bien sur Linux, Mac que Windows. Comme la plupart des déploiements de serveurs Web actuels utilisent les mrmes composants que XAMPP, la transition d'un serveur de test en local à l'hébergement en ligne est extrrmement simple. En outre, XAMPP a plusieurs autres utilitaires intégrés comme FileZilla (dont nous verront l'utilité plus dans la partie destinée à l'hébergemennt) et d'autres dont nous n'aurons pas besoins ici. Il existe d'autres alternatives à XAMPP comme WampServer ou easyPHP mais nous avons préféré XAMPP car il peut s'installer sur une clé USB et rtre

ORY EPIPHANIE 36

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

transporter n'importe où contrairement aux deux autres et comme nous l'avons dit plutôt, il est multiplateforme.

Voyons un peu en détail les éléments que comporte XAMPP V.2.1.1- Apache

Apache est l'application de serveur Web qui traite et livre le contenu Web à un ordinateur. Apache est le serveur web le plus populaire en ligne, alimentant près de 54% des sites web.

V.2.1.2- MySQL (My Structured Qiuery Language)

Chaque application web, simple ou compliquée, nécessite une base de données pour stocker les données collectées. MySQL, qui est open source, est le système de gestion de base de données le plus populaire au monde.

V.2.1.3- PHP

PHP signifie Hypertext Preprocessor. C'est un langage de script côté serveur qui alimente certains des sites Web les plus populaires au monde. Il est open source, relativement facile à apprendre, et fonctionne parfaitement avec MySQL, ce qui en fait un choix populaire pour les développeurs web.

V.2.1.4- phpMyAdmin

phpMyAdmin est une application web de gestion pour les systèmes de gestion de base de données MySQL réalisés en PHP. Il s'agit de l'une des plus célèbres interfaces pour gérer une base de données MySQL sur un server PHP.

Cette interface pratique permet d'exécuter, très facilement et sans grandes connaissances en base de données des requêtes comme les créations de table de données, insertion, mise à jour, suppression et modification de structure de la base

ORY EPIPHANIE 37

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

de données. Toutefois les requêtes SQL restent possibles, ce qui permet de les tester interactivement lors de la création d'un site. De nombreux hébergeurs gratuits comme payant le proposent comme c'est le cas ici de XAMPP.

V.2.2- Atom

Dans le top quatre des éditeurs de code source nouvelle génération aux côtés de SublimeText, Brackets et Visual Studio Code, Atom est certainement l'un des plus hackable (personnalisable) comme l'annonce son slogan.

Outre ce qui fait la force de tous les éditeurs récents (commandes rapidement accessibles, thèmes, extensions, arborescence des fichiers) ses avantages sont :

Multi-plateforme (Windows, macOS, Linux) Mis à jour très régulière

Installation des extensions (packages) facile directement dans
l'interface (plus simple que SublimeText).

Tous les raccourcis clavier facilement personnalisables dans les paramètres.

Rechercher/remplacer visuel et puissant (multiples fichiers, expressions régulières, etc).

Auto-complétion pour la quasi-totalité des langages

Des panneaux multiples pour visualiser plusieurs fichiers ouverts en même temps ou comparer.

V.2.3- Composer

Composer est un outil de gestion de la dépendance en PHP. Il permet de déclarer les bibliothèques dont dépend notre projet et il les gérera (installera / mettra à jour) pour nous.

ORY EPIPHANIE 38

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Supposer:

1. Vous avez un projet qui dépend de plusieurs bibliothèques.

2. Certaines de ces bibliothèques dépendent d'autres bibliothèques.

Composer:

1. Vous permet de déclarer les bibliothèques dont vous dépendez.

2. Détermine quelles versions des packages peuvent et doivent être installés, et les installe (ce qui signifie qu'elles les téléchargent dans votre projet).

V.2.4- FPDF

FPDF est un outil basé sur qui va vous permettre de mettre en place rapidement une API pour convertir différents types de documents au format PDF.

V.3- Langages utilisés

V.3.1- HTML version 5

L'HyperText Markup Language, généralement abrégé HTML, est le langage de balisage conçu pour représenter les pages web. C'est un langage permettant d'écrire de l'hypertexte, d'où son nom. HTML permet également de structurer sémantiquement et logiquement et de mettre en forme le contenu des pages, d'inclure des ressources multimédias dont des images, des formulaires de saisie, et des programmes informatiques. Il permet de créer des documents inter-opérables avec des équipements très variés de manière conforme aux exigences de l'accessibilité du web. Il est souvent utilisé conjointement avec le langage de programmation JavaScript et des feuilles de style en cascade (CSS).

V.3.2- CSS (Cascading Style Sheets) version 3

ORY EPIPHANIE 39

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Les feuilles de style en cascade, abrégés CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML. CSS permet de prendre en charge la mise en forme d'une page web.

V.3.3- JavaScript

JavaScript est un langage de script qui permet d'insérer des animations dynamiques dans une page HTML.

V.3.5- SQL

SQL (Structured Query Langage) est un langage de définition de données (il permet de créer des tables dans une base de données relationnelle), la manipulation de données (il permet de sélectionner, insérer, modifier, supprimer des données d'une table d'une base de données relationnelle) et la protection d'accès (possibilité de définir des permissions au niveau des utilisateurs d'une base de données relationnelle).

Outre l'aspect de manipulation des données, la partie langage de définition des données permet de créer et de modifier l'organisation des données dans la base de données, la partie langage de contrôle de transaction permet de commencer et de terminer des transactions.

La syntaxe de SQL fait l'objet de la norme ISO 9075. Cette norme laisse la possibilité aux producteurs de SGBD (Système de Gestion de Base de Données) d'y ajouter des instructions spécifiques et non normalisées. La norme a évolué au cours des années en vue de s'adapter aux demandes, et les éditeurs de SGBD ont souvent ajouté des possibilités à leurs produits avant que celle-ci fassent objet de normes ce qui provoque des variations dans la compréhension et l'interprétation

ORY EPIPHANIE 40

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

qui est faite d'un code source en SQL par les différents logiciels de SGBD. Ces différences font qu'un code source écrit sans précaution pour un SGBD donné ne fonctionnera pas forcément avec un autre.

Pour justement pallier à ce problème nous avons décidé de travailler avec les classes PDO (PHP Objects Data), disponible depuis la version 4 de PHP, qui est une intégration de la programmation orientée objet en PHP. L'un des principaux avantages de PDO est la facilité de migration d'un SGBDR à un autre en ce sens où l'on a pas besoin de réécrire tout le code comme on le ferait lorsqu'on utilise les fonction mysql_ *(), mysqli_*()«. Il suffit juste de modifier les paramètres de connexion à la base de données au moment de l'instanciation de l'objet PDO.

ORY EPIPHANIE 41

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

CHAPITRE VI : Mise en oeuvre

Pour la mise en oeuvre de notre projet nous avons procédé comme suit : V.1- Le Front-End

La page d'accueil du site

La toute première partie de notre travail a été de mettre en oeuvre la page d'accueil. Cette page est assez primordiale car elle reflète l'image de l'établissement, nous l'avons donc voulu sobre, claire et menant facilement à l'information voulu.

Figure 7: Page d'accueil du site web de sup'management ci

ORY EPIPHANIE 42

Page `Présentation et missions'

ORY EPIPHANIE 43

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

La page `mot du président

Figure 8: page destinée au mot du président du groupe Supm'nagement

Figure 9: Page de présentation

ORY EPIPHANIE 44

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

page `Organisation'

Page `Personnel Administratif'

Figure 11: Organisation administrative de sup'management ci

Figure 10: Personnel Administratif

ORY EPIPHANIE 45

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Page `Admission'

Figure 13: Conditions d'admission

Page `Métiers et débouchés'

Figure 12: Métiers et Débouchés de la licence

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Page `Informatique' pour la licence

Figure 14:Filière informatique pour la licence

Toutes les autres filières de la licence sont basées sur le même modèle que la page informatique

Page `Informatique' pour le Master

Les autres filières du master ont un modèle identique à celui de la page `Informatiques

ORY EPIPHANIE 46

ORY EPIPHANIE 47

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Figure 15: Filière informatique pour le master

Figure 16:Les emplois du temps téléchargeables

La page `Emplois du temps'

ORY EPIPHANIE 48

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Page `Calendriers'

Figure 17: Le calendrier scolaire

Figure 18: le formulaire de préinscription en ligne

Le formulaire

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

V.2- Le Back-End

V.2.1- Création de la base de données

Pour créer la base de données on commence par lancer XAMPP puis on accède à l'interface phpMyAdmin qui se présente comme suit :

Figure 19: Interface de phpmyadmin

La base de données

On entre alors dans le menu « SQL » encadré au rouge sur la figure puis on saisit les lignes de code suivantes :

CREATE DATABASE preinscrits CHARACTER SET 'utf8';

Le nom de la base est « preinscrits » et l'encodage est « utf8 ».

ORY EPIPHANIE 49

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Les tables

L'interface phpmyadmin est assez intuitive et offre une grande facilité dans la création des tables. Voici donc notre base de données avec les tables

Figure 20: La base de données

Après la création de la base de données nous entamons la page de traitement du formulaire en langage PHP.

V.2.2- Traitement du formulaire

Pour commencer, nous créons une page connexion.php sous Atom dans laquelle nous entrons le code qui va nous permettre de nous connecter à notre base de données. Le code est le suivant :

ORY EPIPHANIE 50

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Figure 21: connexion à la base de données

Cette ligne de code permet de nous connecter à la base de données à travers le nom de la base qui est « preinscrits », le nom de l'administrateur qui est « root » et on a les doubles côtes vident par ce qu'elles sont sensé encadrer le mot de passe de l'administrateur mais notre administrateur n'a pas de mot de passe.

Le catch (PDOException) est présent pour les gérer les éventuelles erreurs.

Après la création de notre page connexion.php, nous allons maintenant venir implémenter notre page de traitement.

ORY EPIPHANIE 51

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Figure 22: Récupération des données rentrées dans le formulaire

La capture d'écran qui suit est une suite de la mrme page de traitement et permet d'afficher un récapitulatif des informations données par l'étudiant

ORY EPIPHANIE 52

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Figure 24: Affichage de l'information saisie

Htmlspecialchare()

Les informations stockés dans la base de données sont récupérées et affichées sur la page suivante :

Figure 23: Récapitulatif des informations saisies

ORY EPIPHANIE 53

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

A ce niveau l'étudiant peut télécharger sous forme de PDF cette page de validation. Pendant ce temps les informations sont allées se stocker dans la base de données. Concernant les images, celles-ci vont se stocker dans un sous dossier d'upload nommé photos et ce sont les chemins qui sont stockés dans la base de données.

V.2.3- La page d'administration

Du point de vue de l'administrateur, celui-ci peut accéder à une page admin.php sur laquelle il y a un tableau comportant la liste de tous les étudiants inscrits avec la possibilité de mise à jour et de suppression. On y trouve également le nombre total d'étudiant inscrit.

Figure 25: page administrateur

L'accès à la page d'administration est soumis à une authentification. Pour se faire nous avons créé un sous dossier nommé admin dans lequel nous avons mis tous les fichiers admin du site à savoir supprimer.php, modifier.php et admin.php. Le

ORY EPIPHANIE 54

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

dossier admin est alors protéger par les fichiers .htaccess et .htpasswd (dans lequel nous avons entré le login et le mot de passe de l'administrateur). Ainsi, à toute tentative d'accès aux fichiers du dossier admin il sera demandé le login et le mot de passe de l'administrateur.

ORY EPIPHANIE 55

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

CHAPITRE VII : Déploiement

Ici il est question de faire ressortir les étapes et les outils nécessaires à l'hébergement de notre site internet.

VII.1- Le nom de domaine

Un nom de domaine représente une adresse sur le web. developpez.net est par exemple un nom de domaine. Un nom de domaine est constitué de deux parties : developpez.net

developpez : le nom de domaine proprement dit. Il s'agit d'un nom que l'on peut en général choisir librement, tant que personne ne l'a réservé avant nous. Il peut contenir des lettres et des chiffres, mais pas de symboles particuliers (comme le « ç » français, le « é », le « è », les espaces, etc.).

.net : l'extension. Pour faire simple, Il existe une extension par pays

(.fr pour la France, .ci pour la Côte d'Ivoire, .ma pour le Maroc, etc.). Toutefois, il y a aussi des extensions utilisées au niveau international comme .com, .net, .org. Elles étaient au départ réservées aux sites commerciaux, aux organisations etc. mais cela fait longtemps que tout le monde peut les réserver. D'ailleurs, .com est

très probablement l'extension la plus utilisée sur le Web.

En général, un site web voit son adresse précédée par www, comme par exemple www.developpez.net. Cela ne fait pas partie du nom de domaine : en fait, www est ce qu'on appelle un sous-domaine, et on peut en théorie en créer autant qu'on veut une fois qu'on est propriétaire du nom de domaine. Le www a été adopté par tous les webmasters, c'est une sorte de convention, mais elle n'est absolument pas obligatoire.

ORY EPIPHANIE 56

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

VII.2- L'hébergement

Toute entreprise possède - ou devrait envisager - d'avoir un site internet pour sa visibilité. Sans hébergement, cela reste impossible : tout site web requiert un ordinateur spécifique, appelé serveur, en permanence connecté en très haut débit pour permettre l'accessibilité aux internautes. Héberger son site internet soi-même reste possible. Cette fonction, par sa complexité requiert des compétences appropriées, et demeure dans la majorité des cas confiée à un prestataire spécialisé appelé hébergeur.

L'hébergeur est une entreprise qui se charge de s'assurer du bon fonctionnement des serveurs 24h/24, 7j/7. En effet, si l'un d'eux tombe en panne, tous les sites présents sur la machine deviennent inaccessibles.

VII.2.1- Les principaux types d'hébergement Nous en avons deux catégories : gratuit et payant.

.2.1.1- Hébergement gratuit

L'hébergement de site web gratuit est le plus souvent offert en échange de la diffusion de messages publicitaires. Le principal inconvénient étant que les sites hébergés gratuitement ont des heures d'indisponibilité généralement la nuit.

VII.2.1.2- Hébergement payant

L'hébergement mutualisé

Il s'agit de la solution la plus économique, mais également d'une solution de piètre qualité. Le fonctionnement d'un hébergement partagé est le suivant :

ORY EPIPHANIE 57

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

plusieurs sites web #177; voire de 1 000 à 3 000 sites web #177; se partagent les ressources d'UN SEUL serveur.

Est-ce que l'hébergement partagé peut rtre une bonne option ? OUI ! Pour les sites web en développement, les sites de tests ou encore ceux où la vitesse de chargement n'est pas un élément important.

L'hébergement VPS

L'hébergement VPS (pour Virtual Private Server) est une excellente solution en matière de ratio qualité-prix. Bien qu'il s'agisse également d'un environnement partagé, ce type d'hébergement web est limité à maximum 20 sites sur le mrme serveur.

L'hébergement VPS est une solution égalitaire : tous les sites d'un serveur sont dotés de la même mémoire et du même espace sur le disque dur du serveur. Le VPS est flexible sur le plan de la configuration et donne beaucoup d'options aux développeurs. Enfin, les meilleures solutions VPS sont souvent beaucoup plus puissantes que les moins bons hébergeurs dédiés.

L'hébergement dédié

Option à privilégier pour les sites qui accueillent plus de 100 000 visiteurs par mois. Le nom l'indique, il s'agit d'un serveur unique qui est l'hôte d'un site web unique.

Le principal désavantage de l'hébergement dédié réside dans le fait qu'il nécessite des compétences supérieures en matière d'informatique et d'hébergement.

L'hébergement dédié est essentiel pour les deux types de sites web suivants : ceux qui ont des besoins hyper pointus sur le plan du matériel informatique et ceux pour qui la confidentialité des données est la priorité.

ORY EPIPHANIE 58

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Le cloud

Dernier type d'hébergement web, le cloud ou hébergement nuagique est essentiellement une version améliorée du VPS. Il offre notamment la possibilité d'utiliser les ressources de plusieurs serveurs sur un mrme réseau. Il s'agit d'une option pour les grandes entreprises en raison des nombreuses options offertes en matière de sécurité informatique. Ce type d'hébergement a été conçu pour résister à des attaques de pirates informatiques.

VII.2.2- Choix du type d'hébergement

Vu que notre site est un nouveau site et qu'il ne nécessite une grande sécurité informatique, nous avons choisi l'hébergement mutualisé. Il est à un prix très abordable et il nous suffit amplement pour le moment.

VII.3. Mise en ligne de notre site

Etant donné que nous sommes encore dans la phase de test de notre site, nous avons opté pour un hébergement gratuit afin de vérifier le bon fonctionnement de notre site une fois en ligne.

VII.3.1. Hébergeur choisi

Il existe des centaines d'offre d'hébergement gratuit sur le net et nous avons choisi le service de l'hébergement gratuit 000webhost de l'entreprise

HOSTINGER. En effet, 000webhost a l'avantage, contrairement à la majorité des hébergeurs gratuits, d'héberger des sites web dynamiques PHP avec support complet de base de données MySQL et absolument aucune annonce. Nous avons également la possibilité d'utiliser PHP fonction mail () pour des mails professionnels et tout cela sans grande restriction.

ORY EPIPHANIE 59

ORY EPIPHANIE 60

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

VII.3.2. Procédure de l'acquisition du nom de domaine

Maintenant que nous avons choisi notre hébergeur, nous allons procéder à l'acquisition d'un nom de domaine. Pour se faire, nous allons sur la page d'accueil de notre hébergeur sur le site fr.000webhost.com.

Figure 26: Page d'accueil de 000webhost

A ce niveau, il faut cliquer sur le menu « s'inscrire » afin de se créer un compte et rtre répertorié en tant que propriété d'un domaine chez l'hébergeur. Nous somme alors redirigés vers la page suivante :

Figure 27: formulaire d'inscription 000webhost

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Après avoir procédé à l'inscription, nous somme redirigés sur la page suivante :

Figure 28: page intermédiaire

A ce niveau, il faut cliquer sur « construire un site ». Un formulaire nous est alors proposé dans lequel il faut entrer le nom de notre site et le mot de passe avec lequel nous allons pouvoir nous connecter à notre domaine en temps voulu. Il faut savoir que par défaut, tout site sur 000webhost est accessible via son domaine 000webhost, qui a la forme [nom_du_site] .000webhostapp.com. De ce fait le nom de domaine de notre site est : supmanagement.000webhostapp.com

Ce stade, notre domaine et voici comment il se présente :

ORY EPIPHANIE 61

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Figure 29: page d'administration de notre domaine

Un détail qu'il faut noter c'est que le FTP est ici activé par défaut. Bien évidemment ce n'est pas le cas de tous les hébergeurs.

VII.3.3. Utiliser un client FTP (File Transfert Protocol)

Après l'acquisition de notre nom de domaine, nous devons maintenant passer au transfert de notre site qui est encore sur notre ordinateur vers notre domaine afin qu'il soit visible sur la toile. Pour se faire nous avons besoins d'utiliser un client FTP.

FTP signifie File Transfer Protocol et, pour faire court et simple, c'est le moyen que l'on utilise pour envoyer nos fichiers. Il existe des logiciels permettant d'utiliser le FTP pour transférer vos fichiers sur Internet. Bien entendu, des logiciels FTP, il en existe des centaines, gratuits, payants, français, anglais, etc.

Nous avons opté pour le logiciel FileZilla par ce qu'il est gratuit, en français, multiplateforme et par défaut incorporé dans XAMPP.

Figure 30: logo FileZilla

ORY EPIPHANIE 62

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

VII.3.2.1. Installation de FileZilla

Comme nous l'avons dit plutôt, Filezilla est incorporé à XAMPP donc il ne nécessite pas une installation particulière. Il suffit juste de le lancer depuis l'interface de XAMPP en cliquant sur le bouton « start » encadré en bleue sur la figure suivante :

Figure 31: bouton de lancement de Filezilla

L'interface de FileZilla se présenta alors sous cette forme :

ORY EPIPHANIE 63

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Figure 32: Interface de FileZilla

Il y a quatre grandes zones à connaître dans la fenêtre :

1. En haut, apparait les erreurs et les messages qu'envoie et reçoit le logiciel lors de l'envoie de fichiers.

2. À gauche, c'est le disque dur. Dans la partie du haut affiche les dossiers et la partie du bas, la liste des fichiers du dossier actuel.

3. À droite, c'est la liste des fichiers envoyés sur le serveur sur Internet.

4. Enfin, en bas, apparait les fichiers en cours d'envoi (et le pourcentage d'envoi). La première étape va être de se connecter au serveur de notre hébergeur.

VII.3.2.2. Configuration de FileZilla

Pour pouvoir nous connecter notre hébergeur, nous utiliserons les informations suivantes dans les zones dédiées sur l'interface puis cliquer sur « connexion

ORY EPIPHANIE 64

ORY EPIPHANIE 65

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

rapide » :

- L'hôte : Il s'agit ici de l'adresse du serveur sur lequel est héberger notre domaine - Le login : Le login choisit lors de la création du compte FTP - Le mot de passe : Le mot de passe créer lors de notre inscription

VII.3.2.2. Le transfert de fichiers

Après la connexion, dans la partie de gauche, nous partons récupérer, sur votre disque dur, nos fichiers. Nous faisons un double-clic sur le fichier que nous devons transférer. Au bout de quelques secondes, il apparait à droite, et nous indique qu'il a été correctement envoyé sur le serveur, et donc qu'il est accessible sur Internet.

Figure 33: Des fichiers sont hébergés sur notre domaine

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

CONCLUSION GENERALE

Afin de résoudre le problème le principal problème de diffusion de l'information et la lenteur du processus d'inscription, l'objectif visé dans ce projet de fin d'études etait la création d'un site web avec système de préinscription en ligne. Pour atteindre notre objectif, nous avons présenté les différentes étapes de la conception et la réalisation de l'application pour la gestion des inscriptions des étudiants de l'université Sup'Management Côte d'Ivoire.

Afin de satisfaire les besoins des utilisateurs nous avons commencé la conception en utilisant le formalisme de Merise et la mise en oeuvre des bases de données avec le gestionnaire de bases de données phpMyAdmin ensuite l'implémentation des requêtes SQL pour la manipulation des données et enfin la concrétisation de l'application sous l'environnement de programmation Atom. Ce projet a fait l'objet d'une expérience intéressante, qui nous a permis d'améliorer nos connaissances et nos compétences dans le domaine de la programmation web.

ORY EPIPHANIE 66

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Liste des abréviations

TIC : Technologie de l'Information et de la Communication

CI : Côte d'Ivoire

E-E : Espace-Etudiant

QSN : Qui Somme Nous

Personnel Ad : Personnel Administratif

LP : Licence Professionnel

MP : Master Professionnel

BTS : Brevet de Technicien Supérieur

ISR : Ingénieur des Systèmes et Réseaux

MRH : Management des Ressources Humaines

FC&FE : Finance Comptabilité et Finance d'Entreprise

IDA : Informatique et Développement d'Application LT :

Logistique et Transport

SI : Système d'Information

UML : Unified Modeling Language

DE : Domaine d'Etude

MCC : Modèle Conceptuel de Communication

MCD : Modèle Conceptuel de Données

XAMPP : X Appache MySQL PHP Pearl

MLD : Modèle Logique de Données

MySQL : My Structured Query Langage

HTML : HyperText Markup Language

CSS : Cascading Style Sheets

VPS : Virtual Private Server

FTP : File Transfert Protocole

ORY EPIPHANIE 67

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Table des matières

Dédicaces«««««««««««««««««««««««««««..1

Remerciements«««««««««««««««««««««««« 2
Avant-propos««««««««««««««««««««««««««3 Liste des tableaux««««««««««««««««««««««««5

Liste des figures 6
Introduction générale«««««««««««««..«««««««««7 Problématique«««««««««««««««««««««««««..9 PARTIE I : CADRE DE REFERENCE

Chapitre I : Présentation de la structure 11

I.1 : Présentation de Sup'Management CI«««««..«««««««11

I.2 : Pôles de formation«««««««««««««««««««..12

Chapitre II : Etude de l'existant««««««««««««...«««««14

II.1 : Description de l'existant«««««««««««««««««14 II.1.1 : Matériel et logiciel«««««««..««««««««.14 II.1.2 : Procédure d'inscription«««««««««««...««.14

II.2 : Critique de l'existant«««««««««««««««««.«14

II.3 : Le cahier de charges««««««««««««««««««..15 II.3.1 : Présentation du projet««««««««««««««...15 II.3.1.1 : Objectif du site internet«««««««««..«.16 II.3.1.2 : Arborescence-Plan du site«««««««««...17 II.3.1.2.1 : Le Front-End««««««««««.«.17 II.3.1.2.2 : Le Back-End««««««««««.«.19

II.3.1.3 : Fonctionnalitésggggggggggggggggggg.gg19

II.3.2 : Contenu à fournir par Sup'Management CI«««««««..«.20

II.3.3 : Prestations attendus« 21

II.3.3.1 : Charte graphique«««««««««««««««...21 II.3.3.2 : Contraintes techniques«««««««««««««..21

II.3.3.3 : Enveloppe budgétaire«««««««.««..««««.22

ORY EPIPHANIE 68

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

PARTIE II : ETUDE TECHNIQUE

Chapitre III : Analyse et conception«««««««««««.«««««24 III.1- Le langageUML (Unified Modeling Language)««««««.«.«..24 III.2- La méthode MERISE«««««««««««««««««.««25 III.3- Merise ou UML««««««««««««««««..««.««..26

Chapitre IV : La démarche conceptuelle««««««««««..«.««..28 IV.1- Etude préalable««««««««««««««««.«..«««..28

IV.1.1- Domaine d'étude (D.E)«««««««««««««««..25 IV.1.2.- Existant«««««««««««««««««««««.28

IV.1.3- Liste des entités et propriétés «««««««««««...«29

IV.1.4- Le flux d'information««««««««««..«««««..29

IV.2- Etude détaillée«««««««««««««««««««.««.31 IV.2.1- Dictionnaire de données«««««««««««««..«..32 IV.2.2- Règle de gestion««««««««««...«««.««««.34 IV.2.3- Modèle Conceptuel de Données (MCD)«««««.«««..34 IV.2.4- Modèle Logique de Données (MLD)««««««««««.35

PARTIE III : REALISATION

CHAPITRE V : outils utilisés««««««««««««««...««««38

V.1- Environnement matériel««««««««««««««««««.38

V.2- Environnement Logiciel««««««««««««««««««.38

V.2.1- XAMPPServer«««««...««««««««««««««.38

V.2.1.1- Apache 39
V.2.1.2- MySQL (My Structured Qiuery Language)««««..«39 V.2.1.3- PHP««««««««««««««««...««««39

V.2.1.4- phpMyAdmin««««««««...««««««««.39

V.2.2- Atom««««.«««««««««««««««««««..40

ORY EPIPHANIE 69

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

V.2.3- Composer«««««««««««««««««««««...40

V.2.4- Fpdf««««««««««««««..«««««.«««.«41

V.3- Langages utilisés««««««««««««««««««...«.40 V.3.1- HTML version 5««««««...««««««««««40

V.3.2- CSS (Cascading Style Sheets) version 3«««««.««.41 V.3.3- JavaScript«««.««««««««««««««««41

V.3.4- SQL«««««..««««««««««««««««41 Chapitre VI : Mise en oeuvre «««««««..«««««««««««.43

V.1- Le Front-End«««««...«««««««..««««««««.44

V.2- Le Back-End«««««««««««««««««««««..51 V.2.1- Création de la base de données««««««..««««..51

V.2.2- Traitement du formulaire«««««««««««« 52
V.2.3- La page d'administration««««««««««.«««56 CHAPITRE VII : Déploiement««««««««..«««««««««..57

VII.1- Le nom de domaine«««««««««««««««..«.«.57 VII.2- L'hébergement««««««««««««««««««««59 VII.2.1- Les principaux types d'hébergement««««««...«..59 VII.2.1.1- Hébergement gratuit ««««««««...««.59 VII.2.1.2- Hébergement payant«««««««««.««59

VII.2.2- Choix du type d'hébergement «««««««««...«.61

VII.3. Mise en ligne de notre site«««««««««««««.««.61 VII.3.1. Hébergeur choisi «««««««««««««««...61 VII.3.2. Procédure de l'acquisition du nom de domaine «««... 62 VII.3.3. Utiliser un client FTP (File Transfert Protocol)««««64

VII.3.2.1. Installation de FileZilla««««.««««« 65
VII.3.2.2. Configuration de FileZilla«««««««««66 VII.3.2.2. Le transfert de fichiers««««««««««..66

ORY EPIPHANIE 70

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

CONCLUSION GENERALE.««««««««««.««««67 Liste des abréviations«««««««««««««««««««.«..«.70

Webographie«««««««««««««««««««««««««..76 Bibliographie«««««««««««««««««««««««««..77 Annexe««««««««««««««««««««««..«««««..78

ORY EPIPHANIE 71

ORY EPIPHANIE 72

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Webographie

https://ads.weblogy.net/clients/supmanagement/2010/ci/website/supmanagementci.htm

https://www.supmanagement.ma/index.php

https://www.apachefriends.org/fr/index.html

https://github.com/google/recaptcha

https://olance.developpez.com/articles/web/javascript/modification-inline

https://www.php.net/

https://getcomposer.org/doc/03-cli.md#clear-cache-clearcache-

https://atom.io/

https://getbootstrap.com/docs/4.3/components/carousel/

https://fr.000webhost.com/

https://getcomposer.org/

https://www.developpez.net/forums/d157167/general-developpement/alm/methodes/methodes-

difference-entre-uml-merise/

https://www.developpez.net/forums/d2929/general-developpement/alm/methodes/debat-merise-

versus-uml-avenir-merise/

https://www.youtube.com/watch?v=C1B1Fx3XKOg&t=145s

https://alsacreations.com/ https://packagist.org/

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

Bibliographie

Réalisez votre site web avec html5 et css3 par Mathieu Nebra

Concevez votre site web avec php et mysql par Mathieu Nebra Administrez vos bases de donnees avec mysql par Chantal Gribaumont Initiation à la conception de bases de données relationnelles avec MERISE Par Idriss NEUMANN

ORY EPIPHANIE 73

Création d'un site web avec système de préinscription en ligne : cas de Sup'Management CI

ANNEXE

ORY EPIPHANIE 74