27
Lycée Technique Alidrissi Centre des classes BTS Agadir ادر ا أآ م ادة ا د أآRéalisé par : ElKHEROUAA M’hand BOUTGAYOUT Abdessamad Encadré par : Mme.ABAZINE Karima Année Académique : 2010/2011

Rapport PFE

  • Upload
    -

  • View
    2.609

  • Download
    7

Embed Size (px)

Citation preview

Page 1: Rapport PFE

Lycée Technique Alidrissi

Centre des classes BTS Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

Réalisé par :

ElKHEROUAA M’hand

BOUTGAYOUT Abdessamad

Encadré par :

Mme.ABAZINE Karima

Année Académique : 2010/2011

Page 2: Rapport PFE

2

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

SOMMAIRESOMMAIRESOMMAIRESOMMAIRE

Remerciement---------------------------------------------------------------- 3 Liste des abréviations-------------------------------------------------------- 4 Introduction générale -------------------------------------------------------- 5

CHAPITRE 1 : CONTEXTE GÉNÉRAL DE PROJET

I- Objectif de notre projet----------------------------------------------------- 6 II- Analyse de sujet ------------------------------------------------------------ 6

1- La méthode MERISE----------------------------------------------------- 6 2- Cardinalité-------------------------------------------------------------- 6

3- Modèle conceptuel des données------------------------------------------- 7 CHAPITRE 2 : CONCEPTION

I- Architecture du système--------------------------------------------------- 9 1- Architecture de l’espace publique ------------------------------------------ 9

2- Architecture de la zone d’administration------------------------------------ 10 II- Envirenement de travail --------------------------------------------------- 10 III- Choix de technique de réalisation----------------------------------------- 12

CHAPITRE 3 : RÉALISATION ET TEST DU SYSTÈME

I- Présentation de l’interface du système------------------------------------- 13 1- Site web ---------------------------------------------------------------- 13

2- Administration ---------------------------------------------------------- 16 II- Codage-------------------------------------------------------------------- 18 III- Teste ---------------------------------------------------------------------- 19

CHAPITRE 4 : INSTALLATION

I- Hébergement-------------------------------------------------------------- 20 II- Domaine ------------------------------------------------------------------ 23

Conclusion-------------------------------------------------------------------- 26 Bibliographie----------------------------------------------------------------- 27

Page 3: Rapport PFE

3

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

REMERCIEMENTREMERCIEMENTREMERCIEMENTREMERCIEMENT

Nous voudrions remercier notre encadrant dans le projet, Mme.ABAZINE, pour son

soutien et ses conseils.

Nous devons chaque bribe de notre connaissance à nos enseignants au Classes

Préparatoires au BTS qui ont si bien mené leur noble quête d’enseigner les bases de

l’informatique. Nous les remercions non seulement pour le savoir qu’ils nous ont transmis,

mais aussi pour la fierté et l’ambition que leurs personnes nous aspirent.

Non loin de tout projet ambitieux, il existe des gens qui partagent sans jamais se lasser

ses meilleurs et ses pires moments. Ce sont des personnes qui nous ont soutenus dans

chacun de nos instants de faiblesse, et qui, sans leur extrême attention et gentillesse, nous ne

serions pas ce que nous sommes devenus aujourd’hui. En tête de liste de ces gens nous

placerons nos familles bien aimées qui n’ont jamais hésité à nous offrir le meilleur qu’elles

pouvaient. Viennent alors tous nos camarades de promotion ainsi que tous nos amis qui nous

ont aidés de façon directe ou tout simplement par leur présence et leur soutien moral.

Page 4: Rapport PFE

4

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

LISTE DES ABRÉVIATIONSLISTE DES ABRÉVIATIONSLISTE DES ABRÉVIATIONSLISTE DES ABRÉVIATIONS

CSS ______________________________________CCCCascading SSSStyle SSSSheet

HTML ______________________________ HHHHyperTTTText MMMMarkup LLLLanguage

HTTP_________________________________HHHHyperttttext TTTTransfer PPPProtocol

Js _______________________________________________ JJJJavaSSSScript

PHP____________________________________ PPPPre-HHHHypertext Processor

SGBD ______________________ SSSSystème de GGGGestion de BBBBase de DDDDonnées

SQL__________________________________ SSSStructured QQQQuery LLLLanguage

Page 5: Rapport PFE

5

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

INTRODUCTIONINTRODUCTIONINTRODUCTIONINTRODUCTION GENGENGENGENEEEERALERALERALERALE

Dans le cadre de notre préparation au BTS (Brevet de Technicien Supérieur) en Génie

Informatique, nous avons été amenés à effectuer notre projet de fin d’études sous

l’encadrement de Mme. ABAZINE.

Il s’agissait au cours de ce projet d’étudier et de développer une revue électronique

spécialisé dans le domaine informatique.

Par ailleurs, partant de la volonté de développer une application en ligne (ou application

web), la première phase de notre travail a consisté à analyser les besoins.

Ce rapport s’articule ainsi en quatre parties. La première partie est réservée à l’analyse

du site. La seconde partie propose des solutions pour la réalisation du projet. Enfin les

troisième et quatrième parties sont consacrées au codage et installation de l’application web.

Page 6: Rapport PFE

6

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

CHAPITRE CHAPITRE CHAPITRE CHAPITRE 1111 : CONTEXTE GÉNÉRAL DU : CONTEXTE GÉNÉRAL DU : CONTEXTE GÉNÉRAL DU : CONTEXTE GÉNÉRAL DU

PROJETPROJETPROJETPROJET

I- Objectifs de notre projet :

Notre travail consiste à réaliser une revue électronique. Les objectifs de départ étaient le

développement d’un site web qui va fournir:

� Une mise à jour dynamique des articles de la revue.

� Une interface d’administration pour faciliter la gestion de l’application web.

� Un forum qui va permettre aux utilisateurs d’ajouter des sujets.

� Une sécurité des comptes d’administrateur et des utilisateurs.

II- Analyse du sujet :

L’analyse est effectuée via la méthode MERISE. Cette méthode va nous permettre de

mettre en place plus facilement l’application.

1111.... La méthode Merise pour la conceLa méthode Merise pour la conceLa méthode Merise pour la conceLa méthode Merise pour la conception de la base de donnéesption de la base de donnéesption de la base de donnéesption de la base de données

Merise est une méthode de conception, de développement et de réalisation des projets

informatiques. Son but est la séparation des données et des traitements à effectuer en

plusieurs modèles conceptuels et physiques.

Merise décompose un système d’information en niveaux évoluant de l’abstrait vers le

concret.

2222.... Cardinalités Cardinalités Cardinalités Cardinalités

Le site est Le site est Le site est Le site est gérégérégérégéré par un et un seul utilisateur. par un et un seul utilisateur. par un et un seul utilisateur. par un et un seul utilisateur.

Les articles sont ajoLes articles sont ajoLes articles sont ajoLes articles sont ajoutéutéutéutéssss par l’administrateur par l’administrateur par l’administrateur par l’administrateur....

Un utilisateur peut ajouter un ou plusieurs sujetUn utilisateur peut ajouter un ou plusieurs sujetUn utilisateur peut ajouter un ou plusieurs sujetUn utilisateur peut ajouter un ou plusieurs sujetssss dans le forum dans le forum dans le forum dans le forum....

Page 7: Rapport PFE

7

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

L’administrateur peut gérL’administrateur peut gérL’administrateur peut gérL’administrateur peut gérer les comptes des utilisateurs.er les comptes des utilisateurs.er les comptes des utilisateurs.er les comptes des utilisateurs.

3333.... Modèle conceptuel de donnéesModèle conceptuel de donnéesModèle conceptuel de donnéesModèle conceptuel de données

Le MCD (Figure 1.1) est composé des entités suivantes :

Figure 1.1: Le modèle conceptuel de données à mettre ici.

1, n 1, n

ARTICLE Id Titre Source Article Rubrique Image

Contrôler

Ajouter

Gérer ADMINISTRATEUR

Login Pass

SUJET Id_sujet Tit_sujet Cont_sujet Pseudo

UTILISTEUR

Pseudo Mot_passe Nom_util Prenom_util Adresse E_mail sexe

Gérer

1, 1 1, n

1, n

1, n

1, 1

1, 1

Page 8: Rapport PFE

8

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

Le dictionnaire de données (Figure1.2) suivant, décrit les propriétés des entités :

CHAMPCHAMPCHAMPCHAMP DESCRIPTIONDESCRIPTIONDESCRIPTIONDESCRIPTION TYPETYPETYPETYPE

Id L’identifiant de l’article Entier

Titre Le titre de l’article Texte (40)

Source La source de l’article Texte (40)

Article Le contenu de l’article Texte (255)

Rubrique Rubrique à laquelle appartient l’article Texte (30)

Image Le chemin de l’image jointe à l’article Texte (255)

Login Login de l’administrateur Texte (30)

Pass Le mot de passe de l’administrateur Texte (255)

Id_sujet L’identifiant du sujet Entier

Tit_sujet Le titre du sujet Texte (60)

Cont_sujet Le contenu du sujet Texte (255)

Pseudo Le pseudo de l’utilisateur Texte (30)

Mot_passe Le mot de passe de l’utilisateur Texte (255)

Nom_util Le nom de l’utilisateur Texte (10)

Prenom_util Le prénom de l’utilisateur Texte (10)

Adresse L’adresse de l’utilisateur Texte (15)

E_mail L’adresse email de l’utilisateur Texte (40)

sexe Le sexe de l’utilisateur Texte (1)

Figure1.2 : Dictionnaire des données.

Page 9: Rapport PFE

9

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

CHAPITRE CHAPITRE CHAPITRE CHAPITRE 2222 : CONCEPTION: CONCEPTION: CONCEPTION: CONCEPTION

I- Architecture du système :

1111.... AAAArchitecture de l’espace publiquerchitecture de l’espace publiquerchitecture de l’espace publiquerchitecture de l’espace publique ::::

Www admin files images includes footer.php header.php leftmenu.php link.php rightmenu.php session.php js contact.js forum.js jquery.js jslider.js styles acceuil.css contact.css forum.css inscription.css recherche.css style.css telechargement.css connexion.php contact.php forum.php index.php inscription.php operation_erreur.php operation_succes.php recherche.php telechargement.php

Page 10: Rapport PFE

10

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

2222.... Architecture de la zone Architecture de la zone Architecture de la zone Architecture de la zone d’d’d’d’administrationadministrationadministrationadministration

admin

articles nouveau.php supprimer.php compte gerecompte.php resultas.php forum sujet.php general confident.php images includes header.php header_interieur.php js jquery.js menu_slide.js rubrique ajouter.php modifier.php supprimer.php admin.php islogged.php logout.php operation_error.php operation_succes style.css

II- Environnement de travail :

1111.... SSSSystème D’ystème D’ystème D’ystème D’EEEExploitationxploitationxploitationxploitation ::::

Le développement de l’application a été fait sur une plateforme Windows.

2222.... WAMPWAMPWAMPWAMP SERVER SERVER SERVER SERVER

WAMP signifie Windows Apache MySQL PHP, c’est un logiciel que nous avons

utilisé pour installer une plateforme complète de développement sous Windows. Dans notre

cas, la version 2 est utilisée car elle gère les dernières versions de PHP et de MySQL afin de

Page 11: Rapport PFE

11

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

profiter des toutes dernières fonctionnalités offertes. Cet outil est utilisé au début du projet

après elle est remplacer par EasyPHP.

3333.... NotepNotepNotepNotepadadadad++

Notepad++ est un éditeur de texte générique codé en C++, qui intègre la coloration

syntaxique de code source.

4444.... FileZilla Client (FileZilla) FileZilla Client (FileZilla) FileZilla Client (FileZilla) FileZilla Client (FileZilla)

Filezilla est un client FTP, développé sous la licence publique générale GNU. Il existe

également un serveur FTP du nom de FileZilla Server.

5555.... EasyPHP : EasyPHP : EasyPHP : EasyPHP :

C’est une plateforme de développement Web, permettant de faire fonctionner

localement (sans se connecter à un serveur externe) des scripts PHP. Il comprend deux

serveurs (Apache et Mysql) et une administration SQL (PhpMyAdmin).

6666.... Dreamweaver Dreamweaver Dreamweaver Dreamweaver

Dreamweaver est un éditeur de site web de type « WYSIWYG » ( what you see is

what you get - ce que l’on voit est ce que l’on obtient). Dreamweaver offre deux modes de

conception par son menu affichage. L'utilisateur peut choisir entre un mode création

permettant d'effectuer la mise en page directement à l'aide d'outils simples, comparables à un

logiciel de traitement de texte (insertion de tableau, d'image, etc.). Il est également possible

d'afficher et d'éditer directement le code (HTML ou autre) qui compose la page. On peut

passer très facilement d'un mode d'affichage à l'autre ou opter pour un affichage mixte. Cette

dernière option est particulièrement intéressante pour les débutants, qui à terme, souhaitent

se familiariser avec le langage HTML.

7777.... IETesterIETesterIETesterIETester ::::

Outil utilisé par les développeurs web, pour tester la compatibilité des scripts

programmés avec les différentes versions du navigateur Internet Explorer.

Page 12: Rapport PFE

12

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

III- Choix de techniques de réalisation :

Le processus de conception a nécessité de définir clairement les langages utilisés dans le

codage de l’application web. Nous aurons donc des pages HTML et CSS générées par des

scripts PHP, Javascript et JQuery.

1111.... HTMLHTMLHTMLHTML

Utilisé pour définir le format de données conçu pour représenter les pages web.

2222.... CSSCSSCSSCSS

Feuilles de style en cascade en français, est un langage informatique qui sert à décrire la

présentation des documents HTML

3333.... SQL SQL SQL SQL

SQL est le langage de base et universel de base de donnée par conséquent nous

l’avons utilisé avec le PHP.

4444.... PHPPHPPHPPHP

PHP est un langage qui permet de développer des applications Web dynamiques

puissantes. Ses avantages résident dans son indépendance de la plate forme. En effet, il existe

pour les différentes versions de Windows, Unix et Linux. De plus, c'est un langage de script

embarqué dans les pages HTML et traité par le serveur. PHP permet de construire

dynamiquement des pages HTML contenant des résultats de calcul ou de requêtes SQL

adressées à un système de gestion de bases de données.

5555.... JQueryJQueryJQueryJQuery

JQuery est une bibliothèque Javascript libre qui porte sur l'interaction entre JavaScript

et HTML, et a pour but de simplifier des commandes communes de Javascript.

6666.... SSSSGBDGBDGBDGBD

Le système de gestion des bases de donnés utilisé dans ce projet est MySQL, il s’agit

d’un SGBD libre et gratuit. Il est très utilisé et très populaire. MySQL est un serveur de bases

de donnés relationnelles SQL.

Page 13: Rapport PFE

13

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

CHAPITRE 3CHAPITRE 3CHAPITRE 3CHAPITRE 3 : : : : RÉALISATIONRÉALISATIONRÉALISATIONRÉALISATION ET TEST ET TEST ET TEST ET TEST DU DU DU DU

SYSTÈMESYSTÈMESYSTÈMESYSTÈME

Dans cette section nous expliquons comment nous avons utilisé les outils étudiés dans

la section précédente pour mettre en place l’application web étudié en nous basant sur

l’architecture présentée dans le chapitre précédent. Au début de cette étape nous avons

devisé le travail entre nos deux, l’un de nous a travaillé sur le PHP et MySQL l’autre sur

JQUERY et Javascript.

I- Présentation de l’interface du système :

Dans cette partie sont présenté quelques exemples de page de l’application web réalisé.

1111.... Site Web Site Web Site Web Site Web

L'interface illustrée par la figure 2.1 représente la page d’index de notre application.

Figure 2.1 : Page d’index.

Dans cette page, sont affichés les titres des huit derniers articles ajoutés au site. La page

contient aussi une zone de connexion réservée à l’administration (voir figure 2.2), cette zone

Page 14: Rapport PFE

14

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

est toujours disponible dans les autres pages du site, ainsi que le sondage (voir figure 2.3), le

menu des rubriques et la zone d’annonces.

La figure 2.4 représente la page d’inscription qui permet aux visiteurs du site de

s’inscrire dans le forum.

Figure 2.4 : Page d’inscription au forum.

Pour s’inscrire au forum l’utilisateur doit entrer un pseudo non utilisé d’avance par un

autre utilisateur, ainsi que tous les champs doivent être remplis.

La figure 2.5 représente la page de recherche.

Figure 2.2 : Zone d’administration. Figure 2.3 : Sondage.

Page 15: Rapport PFE

15

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

Figure 2.5 : Page de recherche.

La page de recherche permet de chercher un article dans le site. Pour chercher un

article, l’utilisateur a le choix entre une recherche simple qui utilise comme moyen de

recherche un mot clé donné par l’utilisateur ou bien une recherche avancée qui ajoute en

plus la rubrique au quelle appartient l’article.

La figure 2.6 représente la page de contact.

Figure 2.6 : Page de contact.

Cette page permet aux utilisateurs de rester en communication avec l’administration du

site.

Page 16: Rapport PFE

16

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

2222.... AdministrationAdministrationAdministrationAdministration ::::

La figure 2.5 représente l’index de l’administration.

Figure 2.5 : Page de d’index de l’administration

Quand l’administrateur ouvre une nouvelle session, il est automatiquement redirigé vers

cette page.

La figure 2.6 représente la page de la recherche des utilisateurs.

Figure 2.6 : Page de recherche des utilisateurs

Page 17: Rapport PFE

17

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

Pour chercher un utilisateur, l’administrateur doit saisir le nom d’utilisateur et son e-mail.

Si les informations entré sont correct les informations de l’utilisateur sont alors affiché

(exemple: voir la figure 2.7).

Figure 2.8 : Page affichage d’un utilisateur

La figure 2.9 représente la page d’ajout des articles.

Figure 2.9 : Page d’ajout des articles

Page 18: Rapport PFE

18

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

Pour ajouter un article l’administrateur doit saisir le titre de l’article, sa source, son image

jointe et le corps de texte.

II- Codage:

1111.... HTMLHTMLHTMLHTML et et et et CSSCSSCSSCSS ::::

La première étape était de définir le format de données en utilisant le HTML, ensuite

personnaliser l’apparence avec le CSS, c’est en effet ce qu’on appelle le design du site. Nous

avons commencé avec le design du site web publique, ensuite on est passé au design de

l’administration.

2222.... JQUERY JQUERY JQUERY JQUERY ::::

JQuery a été utilisé pour rendre l’apparence du site dynamique. Elle a été

principalement utilisée pour animer l’affichage des derniers articles, optimiser l’affichage des

pages de contact et de connexion au forum en ce qui concerne le site web publique, ainsi

que des autres effets pour les menus de l’administration du site.

3333.... PHP et MySQL PHP et MySQL PHP et MySQL PHP et MySQL ::::

Le PHP et MySQL ont été utilisé pour l’accès dynamique aux données stocker dans la

base de données, ainsi que pour rendre les pages web interactive avec le visiteur.

4444.... Eléments de Eléments de Eléments de Eléments de sécurité sécurité sécurité sécurité ::::

aaaa.... Sécurité informatiqueSécurité informatiqueSécurité informatiqueSécurité informatique ::::

La sécurité informatique est l'ensemble des techniques qui assurent que les ressources du

système d'information (matérielles ou logicielles) sont utilisées uniquement dans le cadre où il

est prévu qu'elles le soient.

bbbb.... L'aL'aL'aL'authentificationuthentificationuthentificationuthentification ::::

L'authentification consiste à assurer l'identité d'un utilisateur, c'est-à-dire de garantir à

chacun des correspondants que son partenaire est bien celui qu'il croit être. Un contrôle

d'accès peut permettre (par exemple par le moyen d'un mot de passe) l'accès à des ressources

Page 19: Rapport PFE

19

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

uniquement aux personnes autorisées. Dans notre site quand un utilisateur veut se connecter

il doit s’authentifier, ainsi que pour l’administrateur du site.

cccc.... Le cryptageLe cryptageLe cryptageLe cryptage ():():():():

Chiffrements en français, est le procédé grâce auquel on souhaite rendre la

compréhension d'un document impossible à toute personne qui n'a pas la clé de chiffrement.

Dans notre projet nous avons travaillé sur le cryptage des mots de passes des utilisateur et

d’administrateur du forum en utilisant la fonction PHP shashashasha1111 ( ( ( ( )))) qui assure cette opération.

dddd.... SSSSessionsessionsessionsessions : : : :

Avec une saisie d'un nom et d'un mot de passe, on parle d'authentification ou de

connexion. Lors, de chaque nouvelle connexion les informations de l’utilisateur ou

d’administrateur sont sauvegarder, un script islogged.php islogged.php islogged.php islogged.php vérifie la connectivité de l’utilisateur

ou d’administrateur à chaque fois qu’il ouvre une nouvelle page, si il n’est plus connecté il est

rediriger vers l’index du site. Cela nous a permis aussi de sécuriser le dossier Admin qui

contient les fichiers d’administration. Cette opération est assurée par les sessions.

III- Teste :

Au fur et à mesure qu’on développe on teste la compatibilité des scripts créés avec les

différents navigateurs Firefiox, Opera, et l’outil IETester pour tester la compatibilité avec les

différents navigateurs de Microsoft (Internet Explorer), quand nous rencontrons un problème,

notre équipe essaye de trouver une solution, et on ne passe à l’étape suivante que si le

problème est résolu.

Les problèmes rencontrésLes problèmes rencontrésLes problèmes rencontrésLes problèmes rencontrés ::::

Le plus gros problème rencontré était sans nul doute le manque de temps. En analysant

un peu, on se rend compte que plusieurs petites choses ont amené ce problème.

Quelques semaines après le début du projet, l'ordinateur de M’hand tombe en panne.

Plusieurs heures de programmation perdues ainsi qu'un programmeur sans machine pendant

deux semaines, cela ne nous a pas aidé.

Page 20: Rapport PFE

20

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

CHAPITRE 4CHAPITRE 4CHAPITRE 4CHAPITRE 4 :::: INSTALLATIONINSTALLATIONINSTALLATIONINSTALLATION

Dans cette partie est présentée une description des procédures suivies lors de

l’installation de l’application dans un hébergement ainsi la réservation du domaine.

I- Hébergement :

Pour l’hébergement nous avons choisi p2h.info car, il offre un hébergement gratuit avec

des meilleures fonctionnalités :

Figure 3.1 : caractéristiques de l’hébergement.

Page 21: Rapport PFE

21

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

1111.... InscripInscripInscripInscriptiontiontiontion ::::

Dans cette étape on a vérifie la disponibilité du nom de l’application qui est

INFOMAGAZINE, on a trouvé que le nom est disponible, puis on l’a réservé. Après on a

activé note compte, et notre hébergeur nous envoyer un mail qui contient les informations

du compte.

Figure 3.2 : Inscription

2222.... Importation de la base de donnéesImportation de la base de donnéesImportation de la base de donnéesImportation de la base de données ::::

La première étape après l’inscription était de se connecter au vista panel.

Figure 3.3 : interface de connexion au vista panel

Page 22: Rapport PFE

22

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

Dans le vista panel on a choisi le PhpMyAdmin, et après nous avons importé la base

de données.

Figure 3.4 : vista panel de notre site

3333.... Transfert du site vers l’espace d’hébergementTransfert du site vers l’espace d’hébergementTransfert du site vers l’espace d’hébergementTransfert du site vers l’espace d’hébergement ::::

Pour le transfert des fichiers du site web, nous avons utilisé le client ftp FileZilla.

La figure suivante a été prise lors d’une connexion à l’espace d’hébergement.

Figure 3.5 : client FileZilla

Page 23: Rapport PFE

23

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

La figure suivante a été prise lors du transfert du site web.

Figure 3.6 : FileZilla lors de l’envoi des fichiers du site

On peut alors maintenant visiter notre site dont le lien est :

http://infomagazine.p2h.info.

II- Domaine :

Dans notre cas nous avons choisi le domaine c.lac.lac.lac.la car, c’est un domaine gratuit.

La première étape effectuer est la vérification de la disponibilité du nom de domaine.

Page 24: Rapport PFE

24

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

Figure 3.7 : vérification de la disponibilité du nom de domaine

Le nom été disponible, donc il faut réserver le nom de domaine.

Figure 3.8 : formulaire des informations du site

Page 25: Rapport PFE

25

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

Et en fin, nous avons réservé le domaine et pour accéder au site il suffit de taper l’url

suivant : http://infomagazine.c.la .

Page 26: Rapport PFE

26

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

CONCLUSIONCONCLUSIONCONCLUSIONCONCLUSION : : : :

Ayant terminé la rédaction de ce rapport, nous avouons que ce projet a été pour

nous très intéressant, il nous a permis de prendre conscience des responsabilités que nous

serons appelés à confronter dans notre vie professionnelle ultérieure.

Le projet nous a permis de nous familiariser avec le domaine du travail et d'avoir

une expérience professionnelle. Ainsi faire savoir notre savoir faire. C'est une période très

enrichissante permettant de surmonter les difficultés et déceler les obstacles qui peuvent

s'élever sur notre chemin.

Page 27: Rapport PFE

27

Lycée Technique Alidrissi Centre des classes BTS

Agadir

������ ا�در� ا���������دة ا���� ا����م��آ� أ�� ����

أآ�د��

BIBLIOGRAPHIEBIBLIOGRAPHIEBIBLIOGRAPHIEBIBLIOGRAPHIE ::::

1111.... Ouvrages Ouvrages Ouvrages Ouvrages ::::

� PHP 5, Edition Eyrolles, cours et exercices, 2ième édition, Jean Engels.

� XHTML et CSS, Edition Eyrolles, cours et exercices, Jean Engels.

� Formation au langage PHP-MYSQL – KEBIR Mohamed Ines – 2005.

2222.... Sites web Sites web Sites web Sites web ::::

� www.developpez.com

� www.siteduzero.com

� www.jquery.com

� www.fr.tuto .com/

3333.... Formation Formation Formation Formation VidéoVidéoVidéoVidéo ::::

� Formation PHP & MySQL – Elephorm.

� Formation PHP & MySQL – Video2Brain.

� Formation CSS – Elephorm.