GF Architecte DPLG - Cabinet d`architecture Guy FEIST Architecte

FEIST Damien
GF
Architecte
DPLG
Création d’un site internet de présentation et de gestion
http://GFarchitecteDPLG.free.fr
Licence professionnelle Réseaux et Télécommunications,
SERFA Mulhouse
Septembre 2006
promotion 2005/2006
Remerciements
Je tiens tout d’abord à remercier M. FEIST et son équipe pour leur accueil au
sein du cabinet et pour leur écoute ainsi que leurs conseils tout au long de
mon projet.
Je voudrais également remercier toutes les personnes que j’ai côtoyé pour
m’avoir accordé une part de leur temps de travail pour répondre à mes
questions.
1/51
Sommaire
Introduction
I.
3
Contexte
1. Présentation de la structure
2. Nature du projet
3. But et intérêt
II.
Cahier des charges
1. Analyse de l’existant
2. Analyse des besoins
III. Réalisation du site
1. L’architecture
2. Le graphisme
3. Le contenu
4. L’administration
5. La sécurité
6. Le référencement
Conclusion
Lexique
Webographie
Annexes
2/51
4-5
4
5
5
6-9
6
7-9
10-35
10-11
12-14
15-33
34
34
35
36
37
38
41-51
Introduction
Un client cherchant une entreprise d’un côté, une entreprise cherchant un
client de l’autre.
Comment peuvent-ils se trouver, par la publicité, un site Internet ?
Dans le cas de notre entreprise, uniquement connue par « le bouche à
oreille », c’est la solution d’un site web promotionnel et fonctionnel qui est
retenue.
Nous verrons tout d’abord l’entreprise et ses attentes ; par la suite, nous
définirons un cadre aux projets et nous terminerons par la réalisation du site.
3/51
I.
Contexte
I.1.
La structure
Organigramme
Section 1 : Organigramme du cabinet
GF : Guy FEIST (Architecte et directeur)
PG : Patricia GRICHKO (Dessinatrice)
EZ : Edith ZANINETTI (Secrétaire)
L’entreprise est un cabinet d’architecture dirigé par FEIST Guy
architecte exerçant en profession libérale. Il est secondé par une
dessinatrice (DAO) et une secrétaire.
4/51
I.2.
La nature du projet
Réalisation d’un site web promotionnel et fonctionnel.
Une première partie fonctionnant un peu comme une carte de visite
pour présenter l’entreprise, son équipe et ses réalisations et pour
facilité la découverte de nouveaux clients.
La deuxième partie sera invisible pour le visiteur et ne sera
accessible qu’au personnel habilité du cabinet. Dans cette partie
sécurisée se trouvera une interface de gestion des clients et des
dossiers.
I.3.
But et intérêt
Pour la première partie le but est de créer une vitrine de l’entreprise
pour attirer de nouveaux clients ; renseigner ; partager des
informations.
Pour la deuxième partie, il s’agira de remplacer un fichier « clients »
et « entreprises » obsolète.
Remplacement des fiches bristols par une base de données facilitant
les recherches des fiches clients, ainsi que la recherche
d’entreprises susceptibles de réaliser certains travaux. Un gain de
temps non négligeable, tant pour la recherche d’informations que
pour la mise à jour ou la création des données.
5/51
II. Cahier des charges
II.1.
o
Analyse de l’existant
Côté publicité :
A ce jour, la publicité du cabinet se limite au « bouche à oreille »
et à la publicité sur panneaux de chantiers.
Section 2.1 : Panneau de chantier
o
Côté gestion :
Les clients et les entreprises sont gérés sous formes de fiches
bristols classées alphabétiquement dans des boîtes à fiches
traditionnelles.
Il n’y a aucun numéro client ni système de recherche.
Section 2.2 : Fiches clients et entreprises
6/51
II.2.
Analyse des besoins
a.
La forme
Un site simple, ergonomique, accessible par tous.
Il doit être concis et représenter l’entreprise au mieux.
b.
Le fond : le contenu
Première partie :
¾ Présentation de l’entreprise, logo, organigramme.
¾ Présentation détaillée de l’Architecte
(Diplômes, Spécialités).
¾ Présentation des différents types de projets
réalisés au sein du cabinet (projet neufs,
réhabilitations, reconstructions).
La présentation des projets se fera, dans un
premier temps, sous forme de diaporama photos,
par la suite, l’intégration de vidéos ou d’animations
flash sera à prévoir.
Deuxième partie :
¾ Espace sécurisé
¾ Gestion de fiches clients, entreprises, dossiers.
¾ Fonction de recherche rapide,
pour la recherche d’entreprise par spécialités
recherche rapide de clients, dossiers, entreprise
par n’importe qu’elle information.
¾ Création d’une base de données (CF Annexe MCD
et MR)
7/51
c.
L’hébergement
Tableau comparatif
www.free.fr
Nom de domaine
Espace disponible
Limitation de trafic
Compte email
Programmation
Base de données
Tarif
X
10 Go
X
1
PHP
MySQL (sans innoDB)
ou PostgreSQL
Gratuit
www.1and1.fr
2 domaines inclus
(fr/com/net/org/info)
6 Go
750 Go
200
PHP, Perl, Python
MySQL
4,99€/mois
Pour des raisons de coût c’est le fournisseur d’accès de l’entreprise
qui est retenu.
L’hébergement par 1and1 est mis de côté pour le moment mais reste
très intéressant.
8/51
d.
La sécurité
Première partie :
¾ La sécurité se résume à la protection d’une partie
du contenu graphique qui est propriété de
Monsieur FEIST Guy, toutes ses réalisations
étant protégées au titre d’œuvre d’art.
Mise en place d’un copyright.
Deuxième partie :
¾ Espace sécurisé par session PHP
¾ Un seul utilisateur commun pour tous les
utilisateurs, les employés du cabinet ayant tous le
même droit d’accès aux données.
e.
Le référencement
L’inscription payante dans des annuaires ou autres est proscrite.
Le référencement ne doit nécessiter aucune dépense.
Pour augmenter les chances de bon référencement dans les moteurs
de recherche, l’échange de lien est nécessaire.
Une section spéciale du site sera réservée à ces liens.
9/51
III. Réalisation du site
III.1. L’architecture
Première partie :
Plan
Section 3.1 : Hiérarchisation de la partie publique du site
Deuxième partie :
Plan
Section 3.2 : Hiérarchisation de la partie privée du site
10/51
Les deux parties du site internet sont construites sur un modèle
réseaux hiérarchisés.
Pourquoi un modèle hiérarchisé ?
Tous d’abord, parce qu’il est beaucoup plus simple à aborder par un
internaute qui se présente sur le site et par les futurs utilisateurs
au sein du cabinet d’architecture.
La structure hiérarchisée est une des meilleures façons d'organiser
des blocs d'information complexes. Ce schéma d'organisation
s'adapte particulièrement bien au site Web car les différents
thèmes dépendent ainsi d'une seule et unique page soit la page
d'index.
Par contre, cette structure n’est pas suffisante pour le
fonctionnement du site internet. C’est pourquoi on emploie, en plus,
un modèle en réseaux.
Il permet par exemple la continuité de la présentation de l’entreprise
par le passage à la section « Projets » du site internet.
La structure en réseaux est d’autant plus flagrante dans la partie
privée du site, ou l’on voit l’appel de la page recherche (cherche.php)
par différents liens.
Cette deuxième structure permet une approche différente de
l’information, un utilisateur plus expérimenter pourra parcourir le
site par le menu et accéder directement aux informations souhaitées.
Ce type de structure exploite la pleine puissance des liens vers des
informations à l’intérieur du site et vers des informations situées
dans d’autres sites de la toile.
11/51
III.2. Le graphisme
Section 3.3 : Page accueil
o
Le site
¾ Le site sera centré sur la page encadrée aux
couleurs de l’entreprise (bleu qui correspond au
« blue » CSS)
¾ Le site sera optimisé pour une utilisation en
résolution « 1024x768 ».
¾ Il sera composé de quatre parties :
- En-tête
- Menu
- Contenu
- Pied de page
12/51
o
Les fonds
¾ Le fond principal devra être le plan d’une
construction.
¾ Les autres fonds du site seront blanc pour les
cadres de contenu (tous les cadres contenant du
texte ou autres) et bleu pour les autres
(encadrement).
o
L’entête
¾ Elle comportera le logo de l’entreprise qui
représente les initiales de Guy FEIST.
¾ L’entête des documents de l’entreprise devra y
figurer à côté.
o
Le menu
¾ Création d’un menu déroulant divisant le site en
différentes catégories.
¾ Il sera blanc, écriture noire, avec un surlignage
bleu au passage de la souris
o
Le contenu
¾ Une plage permettant d’insérer du contenu sur un
fond blanc encadré de bleu.
¾ Le texte dans cette partie sera justifié.
13/51
o
Pied de page
¾ Un cadre regroupant une série de liens utiles pour
l’utilisateur, ainsi qu’un lien pour l’accès au contenu
privé.
o
Texte
¾ Les textes normaux :
- alignement : centrer
- couleur : noir
- type : Trebuchet MS, Verdana, Arial, sans-serif
¾ Les liens :
- couleur de base : bleu foncé
- couleur au passage de la souris : bleu
- couleur une fois le lien visiter : gris clair
¾ Les grands titres :
- décoration : soulignée
- taille : quinze
- alignement : centrer
¾ Les titres :
- décoration : soulignée
- décalage : une tabulation (vingt pixels)
14/51
III.3. Le contenu
a.
Le site
Contenu commun :
Pour simplifier la création des pages du site les parties
communes à toutes les pages du site (Partie publique et privée)
ont été regroupées dans un ensemble de pages qui sont les
suivantes :
¾ Page En-tête (CF Annexe 5 en rouge)
<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<HEAD>
<TITLE>Cabinet d'architecture Guy FEIST Architecte DPLG […]</TITLE>
<META name="description" content="Cabinet d'architecture Guy FEIST
Architecte DPLG. […] pratique pour télécharger les documents officiels.">
<META name="keywords" content="architecte, […],entreprises">
<META name="robots" content="index">
<META name="REVISIT-AFTER" content="7 days">
<META http-equiv="Content-Type" content="text/HTML; charset=iso8859-15" />
<META http-equiv="Content-Script-Type" content="text/javascript" />
<META http-equiv="Content-Language" content="fr" />
Le début de la page contient l’en-tête XHTML ainsi que les balises
nécessaires au référencement dans les moteurs de recherche (titre,
description, mots clés, etc.…)
15/51
<script language="JavaScript" type="text/javascript">
function protectionSite(){
alert('Copyright© FEIST Guy Architecte DPLG');
return false;
}
</script>
Une fonction JavaScript permettant une petite protection du
contenu en bloquant le clic droit sur l’ensemble du site et affichant
l’existence d’un copyright sur le site. Cette fonction s’exécute lors de
l’évènement « oncontextmenu » de la balise « body ».
<body oncontextmenu="return protectionSite()">
<?
if(!isset($_SESSION['sessionid'])){
echo '<link rel="stylesheet" href="'.$site.'styles/styles.css"
type="text/css" /><script type="text/javascript"
src="'.$site.'ressources/general.js"></script>';
echo "</head>";
echo "<body oncontextmenu=\"return protectionSite()\">";
echo '<div id="principal">';
echo '<div id="enTeteLogo"><a href="'.$site.'Index.php" rel="Accueil"><div
id="enTeteNom"></div></a></div>';
}else{
[…]
}
?>
La fin de la page représente le début de toute page du site avec la
fin du HEAD et le début du BODY. Un test est effectué sur les
sessions car le fichier CSS est différent entre la partie publique et
privée du site pour des raisons que nous aborderons dans la partie
page menu.
16/51
¾ Page Menu (CF Annexe 5 en vert)
<div id="contabs">
<div class="menuIE">
<a class="boutonIE" href="#nogo">Pr&eacute;sentation
<table><tr><td>
<a class="SousMenu"
href="'.$site.'contenu/Page1Presentation.php">L\'Architecte</a>
[…]
</td></tr></table>
</a>[…]
</div>
</div>
<div id="container">
<div id="contabs">
<div class="boutonFF">Pr&eacute;sentation<br />
<a class="SousMenu"
href="'.$site.'contenu/Page1Presentation.php">L\'Architecte</a>[…]</div></div>
La page menu représente le code nécessaire à l’affichage du menu, on
effectue un test de session au début de la page comme pour le choix
de la feuille de style pour afficher le menu public ou privé. Le menu
est double pour des raisons de compatibilité entre les navigateurs de
type « Firefox » et « Internet Explorer ».
¾ Page Regroupant l’en-tête et le menu
<?
session_start();
require("ressources/site.php");//on récupère la variable $site qui définie
l'adresse du site web
require("ressources/fonctions.php");//fichier regroupant les fonctions
require("EnTete.php");
require("Menu.php");
require("ressources/connection.php");
?>
<div id="contenu">
Cette page appelle toutes les pages nécessaires à la présentation du
site ainsi que les pages pour le fonctionnement (appel des fichiers de
fonctionnement, un fichier de fonction et des fichiers de variables).
17/51
<?
session_start();
require("ressources/site.php");//on récupère la variable $site qui définie
l'adresse du site web
//Controle de session
if(!isset($_SESSION['sessionid'])){
echo "<meta http-equiv='Refresh' content='0;
URL=".$site."Identification.php'>";
}
[…]
Toutes les pages d’administration appellent une page contenant
presque un code identique (à trois lignes prêt) qui permettent de
renvoyer l’utilisateur vers la page d’identification, en cas de non
identification de l’utilisateur.
¾ Page de contenu
<? require("../Hpage.php"); ?>
<!-- Debut du contenu -->
[…]
<!-- Fin du contenu -->
<? require("../Ppage.php"); ?>
</div><!--Fin id principal-->
Pour toutes pages du site, on insère au début la page clé
« Hpage.php » (« HpageAdmin.php » pour les privées) et à la fin du
contenu la page « Ppage.php ».
¾ Page pied de page (CF Annexe 5 en orange)
Cette page ferme les balises de positionnement, ajoute une ligne de
lien et affiche le copyright du site.
18/51
Première partie :
Comme vu précédemment cette partie est une vitrine de
l’entreprise.
Elle est composée de neuf pages. Comme elles sont construites
sur la même base nous aborderons la première page de chaque
catégorie:
¾ Page d’accueil (CF Annexe 1)
Une page introduisant l’entreprise et une brève description du
contenu du site.
¾ Page présentation de l’architecte (CF Annexe 2)
<ul title="Architecte" type="circle"><u><? wikipedia("Architecte"); ?>&nbsp;:</u>
<li><? wikipedia("DPLG"); ?> depuis 1978</li>
<li>Formation de ma&icirc;tre d'apprentissage en 1990</li>
</ul>
Une page énumérant les diplômes de l’Architecte, sous forme de
liste.
Dans le code on peut voir une fonction PHP nommée «wikipedia ». En
lui passant en paramètre un mot elle créée un lien vers la définition
sur le site « fr.wikipedia.org ».
19/51
¾ Page présentation des projets neufs (CF Annexe 3)
<div id="ChangeImage">
<img title="Maison individuel Erhart" align="center" id="ImageProjet"
style="border: 1px solid black;margin-top:-20px;" width="700"
height="300"
src="<?=$site?>design/ImagesProjets/Erhart/exterieur1.JPG"
onClick="AfficheImage( 'ChangeImage',
['<?=$site?>design/ImagesProjets/Erhart/exterieur1.JPG',(…)],
['Maison individuel Erhart',(…)],getElement('ImageProjet').src );">
<br/>
<div style="position:absolute;margin-top:-20px;marginleft:50px;">Maison individuel Erhart</div>
</div>
Pour construire cette page on fait appel à une fonction en JavaScript
qui prend comme paramètres un tableau de liens vers les images à
afficher (…), un tableau des titres des images (…) et le lien de l’image
affichée(…).
Cette fonction change le contenu de la balise
« <div id="ChangeImage"> … </div> » par appel a la fonction
« innerHTML » qui permet d’insérer du contenu dans une page html
sans la recharger (CF Annexe 6). Nous verrons plus en détail
l’utilisation de « innerHTML et l’objet XMLHttpRequest » lors de
l’explication du fonctionnement de la page recherche.
¾ Page informations pour téléchargement de documents
officiels (CF Annexe 4)
<ul title="Permis de construire"><u>Permis de construire ou de clôture : demande
initiale, modification</u>
<li type="circle"><? cerfa('105','46-0399') ?>&nbsp;&nbsp;Demande de […]</li>
[…]
Une page listant les documents officiels présents sur le site du
CERFA (www.cerfa.gouv.fr).
Dans le code on peut voir une fonction PHP nommée «lien » en lui
passant en paramètre un numéro de formulaire et le code formulaire
elle créée un lien vers la page permettant de télécharger le document
ou la notice officielle.
20/51
Deuxième partie :
Cette partie est le côté privé du site. Elle permettra une
gestion simple et efficace des clients, leurs dossiers ainsi que
le réseau d’entreprises. Nous aborderons les pages les plus
importantes car leurs constructions sont similaires aux pages
publiques avec le contrôle de session en plus.
¾ Base de données (CF Annexe MCD et MR)
Pour effectuer une gestion efficace, des recherches rapides, etc…
nous avons besoins de créer une base de données. La base de données
est une base MySQL. Elle est fournie par l’hébergeur. Son modèle a
été créé par la méthode Meurise.
¾ Page Listing clientèle (CF Annexe 7)
On effectue une requête SQL sur la table clientèle (CF Annexe MCD
et MR) qui nous renvoie tout ce qu’elle contient puis on affiche une
partie du retour dans un tableau par un système de boucle«tant que».
On emploi cette méthode pour toutes les pages d’affichages. Le
changement est dans la requête qui est plus complexe lors de
l’affichage de données provenant de plusieurs tables.
21/51
¾ Page Recherche (CF Annexe 8)
L’une des pages les plus complexes du site avec celle permettant
d’ouvrir un nouveau dossier (que nous verrons au prochain point).
Avant de présenter les mécanismes qui composent ce réseau de trois
pages combinant PHP, SQL, HTML et JavaScript nous allons
sommairement expliquer fonctionnement.
Les trois composantes sont :
- cherche.php
- general.js
- recherche.php (CF Annexe 10)
L’énoncé de ces trois pages dans cet ordre n’est pas innocent car
c’est l’ordre dans lequel elles sont employées.
Tout d’abord, l’utilisateur charge la page « cherche.php » où s’affiche
suivant le lien qu’il a utilisé un menu qui, après sélection du champ
recherché, fait apparaître un champ de saisie. Celui-ci apparaît
directement si l’utilisateur fait une recherche sur toutes les fiches
de la base (tous les noms du système et code_dossier).
<label for="powasearch_input_0">Recherche :</label>
<input type="text" name="search" size=12 id="powasearch_input_0"/>
Une fois le champ de recherche affiché, toute les secondes, on fait
appel à la fonction « PowasearchUpdateNoForm() » qui se trouve
dans le fichier « general.js »(CF Annexe 9).
Cette fonction appelle « getElement( id ) » pour récupérer l’objet ou
l’on va insérer le résultat de notre recherche. Comme dans la
fonction d’affichage des images pour la présentation des projets on
utilise « innerHTML » pour insérer du contenu dans une balise
« div ». Mais ici il ne s’agit pas juste d’insérer un lien mais le résultat
complet d’une page PHP sans recharger la page en cours.
22/51
C’est là qu’intervient l’objet XMLHttpRequest. On appelle la fonction
« getXMLHTTP() » pour créer un nouvel objet puis on lance
l’ouverture de la page « recherche.php » par méthode GET.
req.open('GET', ‘recherche.php?target='+targetPage+'&search='
+escape(elem.value)+'&champ='+escape(recherchePar.value)
+'&table='+escape(quelleTable.value) );
req.send(null);
Puis à chaque changement de l’état de la requête (objet « req ») on
exécute la fonction.
req.onreadystatechange = function()
{
if (req.readyState == 4 && req.status == 200){
target.innerHTML =req.responseText;
}
};
Quand les conditions sont réunies (page recherche.php entièrement
chargée), on insère le retour de la requête (la page recheche.php)
dans la page « cherche.php ».
Comme énoncé précédemment, toutes ces opérations s’effectuent
sans aucun rechargement de la page et en toute transparence aux
yeux de l’utilisateur.
¾ Page Ouverture d’un dossier
Cette page permet l’ouverture (la création d’un dossier), le principe
de base est simple. On récupère des informations que l’on enregistre
par une requête dans la base.
Mais pour les dossiers ce n’est pas aussi simple car un dossier peut
être créé par un particulier ou une entreprise ce qui modifie
certaines informations et certaines requêtes de l’insertion des
données dans le système.
La première fois on demande les informations communes (qui ne
nécessitent pas de savoir si on veut ouvrir un dossier pour un
particulier ou autres).
23/51
On recharge la page avec les informations saisies par l’utilisateur
passé en POST, on les enregistre dans une variable qui sera repassée
par méthode POST au dernier rechargement de la page.
if(!isset($_REQUEST['autreInfos'])){
$autre="";
}else{
$autre=$_REQUEST['autreInfos'];
}
$dossier="'".$_REQUEST['num_adresse']."','".$_REQUEST['rue_adresse']."','
".$_REQUEST['code_postal']."','".$_REQUEST['ville']."','".$_REQUEST['ref_
cadastrale']."','".$_REQUEST['surf_fonciere']."','".$autre."','".$_REQUEST['
nom_type']."'";
On effectue cette manipulation car le dossier ne peut être créé sans
son « code_dossier » qui est défini suivant le nom de la personne ou
de l’entreprise qui demande l’ouverture (nous verrons la création au
prochain et dernier rechargement de la page).
Nous sommes donc à l’étape où l’utilisateur choisit si le dossier est
pour un particulier ou un professionnel.
Après ce choix un menu apparaîtra pour qu’il puisse choisir dans la
liste qui est le demandeur du dossier.
Une fois validées, après rechargement de la page et création du
« code_dossier », les données sont insérées dans les bonnes tables
suivant le choix de l’utilisateur.
$code_dossier=substr($resu['nom'],0,3).date("m").date("Y").$_REQUEST['code
_postal'];
Le code de dossier est la concaténation des trois premiers
caractères du nom du demandeur, le mois, l’année et le code postal du
dossier.
Voilà pourquoi les données sont stockées jusqu’au dernier
rechargement.
Pour fluidifier les créations tant pour l’ajout de clients, d’entreprises
ou même de dossiers, la possibilité d’utiliser le système de l’objet
XMLHttpRequest est envisageable.
24/51
b.
But et intérêt
Pour la première partie le but est de réaliser une vitrine pour
présenter l’entreprise.
La page d’accueil introduit très bien l’utilisateur dans le contexte du
site, le message agit comme une invitation à la découverte du cabinet.
Par le menu, le visiteur peut naviguer à son aise sur l’ensemble du
site, où alors il peut suivre le chemin fléché qui lui fera découvrir
l’entreprise puis ses réalisations.
Par la présentation de l’entreprise et ses réalisations, on veut inviter
le visiteur à avoir envie de contacter le cabinet pour des conseils ou
la réalisation d’un projet.
Pour la deuxième partie le but était de faire disparaître un fichier
clients et entreprises dépassé.
La partie privée du site remplie complètement sa fonction et fait
petit à petit disparaître l’ancien fichier dépassé.
25/51
c.
Graphique
Dans cette partie sera fait le détail du fichier « styles.css ».
body {
background-image:url(../design/fond.jpg);
background-position:left;
background-repeat:repeat;
font: normal 80%/1em "Trebuchet MS", Verdana, Arial, sansserif;
color: black;
margin: 0;
padding: 0 0 2em 0;
text-align: center;
}
¾ Le fond principal est le plan d’un projet en
cours (background-image)
¾ Les textes normaux :
- alignement : centrer (text-align)
- couleur : noir (color)
- type : Trebuchet MS, Verdana, Arial, sans-serif
(font)
#texteContenu{
text-align:justify;
}
¾ Cet id renvoie le style d’alignement du texte et
est utilisé dans presque toutes les pages pour la
mise en forme du texte.
26/51
#principal{
background : blue;
width: 824px;
height: 568px;
/* centrer la zone principale */
left: 50%;
margin-left:-412px;
top: 50%;
margin-top:-284px;
position: absolute;
border:0px;
}
¾ L’id de la zone principale qui défini le cadre dans
lequel seront inséré tous les éléments qui
composent le site.
Il défini une zone fixe de 824x568 centrée sur la
page, avec un fond bleu.
27/51
#enTeteLogo{
background-position:left;
background-color:#FFFFFF;
background-image:url(../design/logo_bleu.jpg);
border:0px;
margin-left:0px;
padding:0px;
width: 823px;
height: 113px;
background-repeat:no-repeat;
margin-right:1px;
margin-top:1px;
}
#enTeteNom{
background-position:center;
background-image:url(../design/Feist_Guy_bleu.jpg);
margin-left:113px;
border:0px;
padding:0px;
height: 113px;
background-repeat:no-repeat;
}
¾ Les id « enTeteLogo » et « enTeteNom » vont de
paires. Dans la page « Entete.php » ils s’emboîtent
pour former l’entête du site internet avec le logo
de l’entreprise et le cartouche (CF Annexe 5 en
rouge).
Dans ces définitions CSS on donne les hauteurs,
les longueurs des images et leur positionnement.
28/51
#contenu{
background-color:#FFFFFF;
margin:5px;
margin-top: 25px;
padding:5px;
height:376px;
overflow:auto;
}
¾ L’id pour le positionnement du contenu des pages.
Il défini la couleur blanche du fond centrale du
site (CF Annexe 5 entre le orange et le vert).
#piedPage{
background-color:white;
padding: 5px;
margin:5px;
height:25px;
}
¾ L’id qui défini le positionnement et les dimensions
du pied de page.
Le menu déroulant est constitué de neuf classes. Nous verrons les
quatre classes qui concernent Internet Explorer et une classe
commune pour Firefox et Internet Explorer.
.menuIE {
display:none !important;
display:block;
}
¾ La classe supérieure du menu avec
l’attribut « !important » qui permet de masquer ce
menu si le visiteur utilise Firefox (Dans Firefox la
ligne qui contient « !important » est prise en
compte avant tout et la suivante est ignorée, sous
Internet Explorer c’est la ligne qui contient
« !important » qui est ignorée).
29/51
a.boutonIE, a.boutonIE:link, a.boutonIE:visited, a.boutonIE:active {
color:#0000CC;
width:200px;
height:18px;
display:block;
background:white;
border:1px solid #000;
margin-right:1px;
text-align:center;
float:left;
text-decoration:none;
font-family: verdana;
font-size:10px;
line-height:18px;
overflow:hidden;
}
¾ La class du sous menu qui correspond aux cases
qui apparaissent au passage de la souris sur le
menu.
On défini la couleur du fond à blanc, les
dimensions, les bordures, les caractéristiques du
texte.
a.boutonIE:hover {
color:red;
background:white;
overflow:visible;
}
¾ Le comportement au passage de la souris sur le
menu.
On colore le texte en rouge et on affiche les sous
menu.
30/51
a.boutonIE:hover table {
display:block;
background:#eee;
border-collapse:collapse;
}
¾ Le comportement de la souris au passage sur le
sous menu.
On change la couleur de fond pour surligner la
case ou l’on se trouve.
Aucune profondeur n'est décelée sur les bordures
autour des cellules.
a.Separation, a.Separation:link, a.Separation:visited, a.Separation:active {
display:block;
width:140px !important;
width:135px;
height:1px;
border-bottom:1px solid #000;
text-decoration:none;
color:#000;
font-family: verdana;
font-size:10px;
text-align:center;
background-color:blue;
margin-left:5px !important;
}
¾ La classe commune aux deux menus. Elle permet
de créer une case sous menu vide de couleur pour
séparer certains champs du menu (utiliser
uniquement dans partie privée pour le moment).
31/51
a{
color:#000099;
}
a:hover {
color:blue;
}
a:visited {
color:#666666;
}
¾ Les liens :
- couleur de base : bleu foncé
- couleur au passage de la souris : bleu
- couleur une fois le lien visiter : gris clair
h3 {
text-decoration:underline;
text-align:center;
font-size:15px;
}
¾ Les grands titres :
- décoration : soulignée
- taille : quinze
- alignement : centrer
h2 {
margin: 20px;
padding: 0;
text-decoration:underline;
}
¾ Les titres :
- décoration : soulignée
- décalage : une tabulation (vingt pixels)
32/51
d.
Utilisateurs
Première partie :
Dans la partie publique les utilisateurs ont accès à différentes
fonctionnalités.
Ils peuvent naviguer librement sur le site par le menu, ou utiliser le
plan du site qui est un plant visuel.
Ils ont la possibilité de visionner les différents types de projets
réalisés par le cabinet.
Un service de contact est à leur disposition pour toutes questions sur
le site ou demande d’informations sur l’entreprise.
Une section « Informations » leur permet de télécharger très
facilement des fiches pratiques sur les documents officiels ou bien
même de télécharger ces documents officiels.
Deuxième partie :
Dans la partie privée l’utilisateur pourra enregistrer, lister,
rechercher, les clients, les entreprises et les dossiers.
Il aura accès à des listings plus détaillés comme, par exemple, voir
quelle entreprise travaille sur un dossier en un simple clic.
33/51
III.4. L’administration
L’administration du site est très réduite. Elle permet seulement, pour
l’instant, de modifier l’adresse de contact de l’identifiant, le nom et
le mot de passe de l’utilisateur unique.
Plus tard, une interface permettra de modifier à la volée les liens et
titres des images des différents diaporamas du site.
III.5. La sécurité
La sécurité du site est réalisée par contrôle de session PHP. Sur
chaque page de la partie privée on appelle la page
« HpageAdmin.php » c’est au début de cette page que le contrôle est
effectué par l’instruction suivante.
//Controle de session
if(!isset($_SESSION['sessionid'])){
echo "<meta http-equiv='Refresh' content='0; RL=".$site."Identification.php'>";
}
Si l’utilisateur n’a pas passé la procédure d’identification il est
renvoyé vers la page d’identification.
34/51
III.6. Le référencement
<title>Cabinet d'architecture Guy FEIST Architecte DPLG Projets Neufs
R&eacute;habilitation Reconstruction</title>
<meta name="description" content="Cabinet d'architecture Guy FEIST
Architecte DPLG. Présentation du cabinet d'architecture et de son equipe, de
quelques projets réalisés, ainsi qu'une rubrique pratique pour télécharger les
documents officiels.">
<meta name="keywords"
content="architecte,architectes,architecture,architectures,agence,cabinet,agen
ce d'architecte,d architecte,cabinet d'architecte,agence d'architecture,cabinet
d'architecture,alsace,hautrhin,construction,constructions,construire,construires,permis de
construire,chantier,chantiers,suivi de chantier,suivi de
chantiers,expertise,expert,experts,expertise,estimation,estimations,evaluation,
evaluations,expertises,extension,extensions,aménagement,réhabilitation,aménag
ements,réhabilitations,amenagements,rehabilitations,amenagement,rehabilitation
,renovation,renovations,individuel,individuels,individuelle,individuelles,maison,mais
ons,particulier,particuliers,entreprise,entreprises">
<meta name="robots" content="index">
<meta name="REVISIT-AFTER" content="7 days">
<meta http-equiv="Content-Type" content="text/HTML; charset=iso8859-15" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Language" content="fr" />
Le référencement se fait par les balises présentes dans l’en-tête et
l’inscription dans les index des moteurs de recherche.
Une consultation est lancée auprès des entreprises du bâtiment
travaillant avec le cabinet pour des échanges de liens.
Pour le moment le site est positionné sur une série de moteurs de
recherche régionaux :
- http://www.zeemotor.com
- http://immobilier.toolespros.com
- http://travaux-batiment.toolespros.com
- http://www.coodoeil.com
- http://alsace.moteurs-regionaux.com
35/51
Conclusion
La réalisation du site est presque achevée, il subsiste quelques
problèmes d’intégrité de données qui seront réglés dès que la base de
données de l’hébergeur passera en PostgreSQL.
Malgré ce léger incident et les heures passées dans les sites internet
pour réaliser la fonction de recherche, la réalisation et la mise en
ligne du site se sont bien déroulées. Les utilisateurs sont satisfaits
d’avoir à leur disposition un outil de travail évolué.
Le site fonctionne et est compatible avec le plus grand nombre de
navigateurs. Le référencement est en cours sur les plus grands
moteurs de recherche mais il faut attendre le passage des robots
sur le site.
Il sera complètement achevé une fois bien référencé et dès que les
images des diaporamas pourront être changé à la volé.
Pour conclure, le site est fonctionnel et simple à la fois, accessible
par tous.
Une version allemande pourrait être envisagée.
36/51
Lexique
C
Copyright
CSS
Droits d’auteurs
Cascading Style Sheet, une feuille de style qui regroupe tous les
éléments de style d’un site web par exemple
D
DAO
DPLG
Dessin Assisté par Ordinateur
Diplômé par le gouvernement
I
InnoDB
Fournit à MySQL un gestionnaire de table transactionnelle qui
permet l’utilisation de clé étrangère
J
JavaScript
Langage de type interprété dont la syntaxe est inspirée du langage
Java.
M
MySQL
un système de gestion de bases de données édité par la société
suédoise MySQL AB.
P
PHP-MySQL
PostgreSQL
Langage dynamique de programmation web (HyperText Preprocessor)
et MySQL système de base de données
Projet open source relatif à un système de gestion de bases de
données relationnelles orienté objet.
X
XHTML
eXtensible Hypertext Markup Language, Langage successeur de
HTML 4 qui combine les méthodes de présentation du HTML et la
composition normalisée des documents de XML.
37/51
Webographie
Site d’aide au référencement :
Nom : «Abondance:Audits de pages»
Lien : http://audit.abondance.com
Nom : «Outiref:Utilitaires en ligne pour référencer son site»
Lien : http://www.outiref.com
Site de programmation :
Nom : «Openweb Group Pour les standards du web»
Lien : http://www.openweb.eu.org
Nom : «L’altruiste le guide des langages web»
Lien : http://www.laltruiste.com
Nom : «Alsacréations»
Lien : http://www.alsacreations.com
Nom : «CSS zen garden»
Lien : http://www.csszengarden.com
38/51
Table des matières
3
Introduction
I.
Contexte
1. Présentation de la structure
2. Nature du projet
3. But et intérêt
II.
Cahier des charges
1. Analyse de l’existant
o
Côté publicité
o
Côté gestion
2. Analyse des besoins :
a. La forme
b. Le fond : le contenu
c. L’hébergement
d. La sécurité
e. Le référencement
III. Réalisation du site
1. L’architecture
2. Le graphisme
o
Le site
o
Les fonds
o
L’en-tête
o
Le menu
o
Le contenu
o
Pied de page
o
Texte
3. Le contenu
a. Les pages
b. But et intérêt
39/51
4-5
4
5
5
6-9
6
6
6
7-9
7
7
8
9
9
10-35
10-11
12-14
12
13
13
13
13
14
14
15-33
15-24
25
c. Graphisme
d. Utilisateurs
4. L’administration
5. La sécurité
6. Le référencement
Conclusion
Lexique
Webographie
Annexes
40/51
26-32
33
34
34
35
36
37
38
41-51
Annexes
41/51
Annexe MCD :
Annexe MR :
CLIENT(id_client,nom,prenom,num_adresse,rue_adresse,code_posta
l,ville,num_tel_fixe,num_tel_portable,num_tel_fax,email)
ENTREPRISE(num_RCS,nom,directeur,num_adresse,rue_adresse,cod
e_postal,ville,num_tel_fixe,num_tel_portable,num_tel_fax,email)
DOSSIER(code_dossier, num_adresse,rue_adresse,code_postal,
ville,ref_cadastrale,surface_fonciere,autre_info,#nom_type)
ACTIVITE(nom_activite) DEMANDE(#num_RCS,#code_dossier)
TYPE(nom_type) PEUTEFFECTUER(#num_RCS,#nom_activite)
MISSION(nom_mission) REGROUPE(#code_dossier,#nom_mission)
DIRIGE(#id_client,#code_dossier)
42/51
Annexe 1 : Page d’accueil (Index.php)
Annexe 2 : Présentation de l’architecte (Page1Présentation.php)
43/51
Annexe 3 : Présentation des projets neufs (Page1Projets.php)
Annexe 4 : Page d’information, téléchargement de formulaires
(Page2Infos.php)
44/51
Annexe 5 : En-tête (Entete.php en rouge, Menu.php en vert,
Ppage.php en orange)
45/51
Annexe 6 : Fonction JavaScript changement d’image (Extrait de
general.js)
function AfficheImage( id, fichier, titre,precedent )
{
var target=getElement(id);
var fichierListe="";
var titreListe="";
for(x=0;x<fichier.length;x++){
fichierListe=fichierListe+"'"+fichier[x]+"'";
titreListe=titreListe+"'"+titre[x]+"'";
if((x+1)!=fichier.length){
fichierListe=fichierListe+",";
titreListe=titreListe+",";
}
}
for(x=0;x<fichier.length;x++){
if((precedent==fichier[x]) && (x+1!=fichier.length)){
target.innerHTML ='<img title="'+titre[x+1]+'" align="center"
id="ImageProjet" style="border: 1px solid black;margin-top:-20px;" width="700"
height="300" src="'+fichier[x+1]+'" onClick="AfficheImage(
\''+id+'\',['+fichierListe+'],['+titreListe+'],\''+fichier[x+1]+'\' );"><br/><div
style="position:absolute;margin-top:-20px;marginleft:50px;">'+titre[x+1]+'</div>';
//return true;
}else{
if(precedent==fichier[x] && (x+1==fichier.length)){
target.innerHTML ='<img title="'+titre[0]+'"
align="center" id="ImageProjet" style="border: 1px solid black;margin-top:20px;" width="700" height="300" src="'+fichier[0]+'" onClick="AfficheImage(
\''+id+'\',['+fichierListe+'],['+titreListe+'],\''+fichier[0]+'\' );"><br/><div
style="position:absolute;margin-top:-20px;margin-left:50px;">'+titre[0]+'</div>';
//return true;
}
}
}
}
46/51
Annexe 7 : Listing clientèle (ClientAffiche.php)
Annexe 8 : Page recherche (cherche.php)
<? require("HpageAdmin.php"); ?>
<!-- Debut du contenu -->
<form action="<?=$site?>Deconnection.php" method="post">
<input type="Submit" value="Déconnection">
</form>
<br/><br/>
<div class=powasearch>
<form name="powasearch" action="cherche.php" method="GET">
<?
if(isset($_REQUEST['cherche'])){
if($_REQUEST['cherche']!="activite"){
echo "<label
for=\"RecherchePar\">".ucfirst($_REQUEST['cherche'])." recherche
par:</label>";
echo "<select
onChange=\"getElement('powasearch_input_0').value='';Afficher('ClassInput');
\" id=\"RecherchePar\">";
47/51
echo "<option value=\"vide\"></option>";
//connexion au serveur de données
mysql_connect($host, $user, $pass);
//ouverture d'une base de données
mysql_select_db($bdd);
$list=mysql_query("show columns from
".$_REQUEST['cherche']."");
while($tab=mysql_fetch_row($list)){
echo "<option value=\"".$tab[0]."\">
".$tab[0]."</option>";
}
mysql_close();
echo "</select><br/><br/>";
}
}
?>
<div class=input id="ClassInput">
<label for="powasearch_input_0">Recherche :</label>
<input type="text" name="search" size=12
id="powasearch_input_0">
</div>
<?
if(isset($_REQUEST['cherche'])){
if($_REQUEST['cherche']!="activite"){
echo "<script language=\"javascript\"
type=\"text/javascript\">Cacher('ClassInput');</script>";
}else{
echo "<input type=\"hidden\" name=\"RecherchePar\"
id=\"RecherchePar\" value=\"nom\">";
}
echo "<input type=\"hidden\" name=\"quelleTable\"
id=\"quelleTable\" value=\"".$_REQUEST['cherche']."\">";
}
?>
</form>
</div>
<div style="position: absolute; left: 50% !important;margin-left: -400px;"><div
class=powaresults id="powasearch_input_0_re"></div></div>
<script>window.setInterval( 'PowaSearchUpdateNoForm( "powasearch_input_0",
"cherche.php", 1 );', 1000 );</script>
<!-- Fin du contenu -->
<? require("Ppage.php"); ?>
48/51
Annexe 9 : Page recherche (cherche.php)
function getElement( id )
{
return document.getElementById ? document.getElementById( id ) :
document.all( id );
}
function getXMLHTTP()
{
var xmlhttp = false;
if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
try
{
xmlhttp = new XMLHttpRequest();
}
catch (e)
{
xmlhttp = false;
}
}
return xmlhttp;
}
function PowaSearchUpdateNoForm( id, targetPage, clear )
{
var elem
= getElement( id );
if( !elem ) return;
if( elem.lastVal == elem.value ) return;
elem.lastVal = elem.value;
var target = getElement( id+'_re' );
if( !target ) return;
if( !elem.value )
{
if( clear )
return;
}
target.innerHTML = '';
var req = getXMLHTTP();
49/51
if (req)
{
req.onreadystatechange = function()
{
if (req.readyState == 4 && req.status == 200){
target.innerHTML =req.responseText;
}
};
var quelleTable = getElement( "quelleTable" );
var recherchePar = getElement( "RecherchePar" );
if( recherchePar && quelleTable ){
req.open('GET',
'recherche.php?target='+targetPage+'&search='+escape(elem.value)+'&champ='+
escape(recherchePar.value)+'&table='+escape(quelleTable.value) );
}else{
req.open('GET',
'recherche.php?target='+targetPage+'&search='+escape(elem.value) );
}
req.send(null);
}
}
Annexe 10 : Page de requête pour la recherche (une partie de la page
recherche.php)
<?
[…]
if(isset($_REQUEST['champ'])){
if($_REQUEST['table']=='activite'){
print('<table class="powasearch">
<tr>
<td>
<div class=mbox>');
$requete='SELECT entreprise.nom as
nomEntreprise,entreprise.num_RCS as num_RCS,peuteffectuer.nom as
nomActivite FROM entreprise,peuteffectuer WHERE peuteffectuer.nom LIKE
"'.$_REQUEST['search'].'%" AND
entreprise.num_RCS=peuteffectuer.num_RCS';
}else{
50/51
print('<table class="powasearch">
<tr>
<td width=200>
<div class=mbox>');
$requete='SELECT * FROM '.$_REQUEST['table'].' WHERE
'.$_REQUEST['champ'].' LIKE "'.$_REQUEST['search'].'%"';
}
$resultat=mysql_query($requete);
$nbRep=mysql_num_rows($resultat);
if($_REQUEST['table']=='activite'){
print('<div class=title>'.$nbRep.' entreprise(s) pouvant
r&eacute;alis&eacute;(s) des activit&eacute;s
'.$_REQUEST['search'].'*</div><div class=contents>');
}else{
print('<div class=title>'.$nbRep.' '.$_REQUEST['table'].'
pour '.$_REQUEST['search'].'*</div><div class=contents>');
}
while($retour=mysql_fetch_array($resultat)){
switch ($_REQUEST['table']) {
case "client":
$lien="ClientAfficheDetails.php?id_client=".$retour['id_client'];
break;
[…]
case "activite":
$lien="EntrepriseAfficheDetails.php?num_rcs=".$retour['num_RCS'];
break;
}
if($_REQUEST['table']=='activite'){
echo "<a class=\"SousMenuSearch\"
href=\"".$site."administration/".$lien."\">".$retour['nomEntreprise']."&frasl;".$
retour['nomActivite']."</a><br>";
}else{
echo "<a class=\"SousMenuSearch\"
href=\"".$site."administration/".$lien."\">".$retour['nom']."</a><br>";
}
}
print('</div></div></td></tr></table>');
}else{
[… code similaire mais pour une recherche client, entreprise, dossier]
}
?>
51/51
Cabinet Guy FEIST Architecte DPLG, connu uniquement par le « bouche à oreille » se
modernise en créant son site internet à double vocation, à la fois publicitaire et applicatif.
Quoi de mieux que l’internet pour ouvrir son entreprise à ses clients.
Suivez nous dans cette aventure qu’est la réalisation et le lancement d’un site internet.