Atelier Info Tonic : Les règles d’or pour créer son site Web
Rapport Maj18122008
1. Projet :
Développement d’une API permettant de générer le code HTML et CSS.
Adresse :
10 rue d’Orient – 13010 MARSEILLE
Contact :
Laurent LEMONNIER
Adresse :
http://accro-web.fr
Réalisation :
Mme ROSALIE Virginie
Rosalie Virginie – Session DI |Décembre2008 1
2. 1 ère Partie
CAHIER DES CHARGES
A - Présentation de l’entreprise ACCRO-WEB
B - Présentation du projet
Rôles
Objectifs du site
A qui s’adresse le site?
Contenus
Arborescence
C - Prestations attendues
Charte graphique et éditoriale
Création et récupération de contenus
Développement
Maquette du site
D - Livrables attendus
ANALYSE
Diagramme de cas d’utilisation
Diagramme de cas d’utilisation sur la partie développée
Diagramme de classes
Diagramme de séquences
Rosalie Virginie – Session DI |Décembre2008 2
3. 2ème Partie
API
Présentation des différentes classes et de leurs fonctionnalités
Classe Interfaces
Classe Site
Classe Header
Classe Footer
Classe Page
Classe Colonne
Classe Boîte
Classe Champformulaire
Classe Formulaire
Classe Contenu
Classe Image
Classe Css
Exemples d’utilisation de l’API
A – Site Martinique
Rosalie Virginie – Session DI |Décembre2008 3
4. Dans le cadre de notre formation « développeur informatique », nous avons effectué une
période d’activité en entreprise d’une durée de 8 semaines soit du 2 juin au 25 juillet 2008.
Ce stage devait nous permettre de nous familiariser avec le métier de développeur, mettre en
pratique nos connaissances acquises au cours de la formation dans un contexte
professionnel. En d’autres termes, « voir comment travaille un développeur ! ».
Je souhaitais effectuer ce stage dans une entreprise de développement web. Ce choix me
semblait plus cohérent du point de vue de la formation suivie et de mes objectifs
professionnels actuels. Mes recherches se sont orientées vers des sociétés de développement
web. La société ACCRO-WEB a eu l’amabilité de m’accueillir durant cette période.
Je vais, par ce rapport, vous faire part de mon expérience, vous présenter en quelques lignes
la société qui m’a accueillie et son activité. Ensuite je vous présenterai le projet qui nous a été
confié grâce au cahier des charges, ensuite nous verrons plus en détail l’analyse grâce aux
diagrammes de cas d’utilisation, diagramme de classes et diagrammes de séquences.
Nous verrons ensuite le projet de l’API avec le détail de chaque classe et leur utilisation par le
développement d’un site sur la Martinique. Ce site sert uniquement à mettre en pratique
l’API et à constater de son fonctionnement.
J’ai effectué ce stage en collaboration avec un autre stagiaire VALLEE ASNAR Damien.
Je tiens également à remercier la société ACCRO-WEB pour son accueil et bien entendu
l’AFPA, nos formateurs Daphnée ALLIES, Thierry ANSELME, Régine FISSEUX, Jean Paul
PICHON pour leurs présences et leurs enseignements.
Je remercie aussi Dominique MULLER de m’avoir accueillie durant cette session pour valider
mon titre.
Rosalie Virginie – Session DI |Décembre2008 4
5. 1 ère Partie
Cahier des charges
A – Présentation de l’entreprise
Besoin d’un conseil, envie d’avancer de vous faire connaître la société ACCRO-WEB vous propose ses
solutions dans un but unique celui de vous satisfaire et d’optimiser le retour sur investissement de
votre projet informatique par leurs conseils.
Accro-web est une société de création de sites internet qui s’est basé sur 3 axes principaux :
- Spécification – étape préliminaire
- Modélisation – traduction des besoins
- Conception – phase de développement
Son objectif principal est de proposer un service le plus adapté possible aux besoins de ces
clients pour un prix minimum.
Elle propose ainsi :
- la réalisation de logiciels sur mesure avec des solutions packagées en fonction des besoins les
plus courants pour ainsi faciliter le choix de ses clients. Il existe 4 packs : pack vitrine, pack
artisanat, pack hôtel, pack e-commerce.
- Création multiplateforme
- Création de sites internet: développement sur mesure par le biais des idées de leurs clients et
de leur expertise en posant les désirs et l’imagination de leurs clients sur un écran.
B – Présentation du projet
Rôles
De la société Accro-web :
- Proposition du projet de création d’un site internet pour créer des sites
- Validation de nos choix
Des stagiaires :
- Spécification en réalisant le cahier des charges
- Proposition de réalisation des étapes, des choix qui semblent judicieux pour faciliter
l’utilisation du site
Rosalie Virginie – Session DI |Décembre2008 5
6. - Modélisation des données à informatiser afin de pouvoir créer le code d’un site en récupérant
les informations données par l’utilisateur
- Développement d’une API capable de créer un site internet de plusieurs pages en une seule
page de code.
Objectifs du site
Le projet initial est la création d’un site internet permettant à ses utilisateurs après s’être
identifié de créer leurs propres sites web en quelques clics de souris et en suivant les étapes
qui sont :
- Identification et enregistrement
- Mise en forme générale : nombre de pages, de zones dans chacune des pages.
- Ajout du contenu : texte, photos…
- Mise en forme particulière en fonctions des zones créées.
- Choix des options : newsletter, formulaire de contact, compteur de visiteurs,
- Paiement et mise en ligne
L’objectif du site est de permettre à des usagers peu ou pas expérimentés de pouvoir des créer
des petits sites vitrines sur le web. Ces sites n’ont pas de vocation à devenir marchand mais
simplement de faire connaître l’activité d’une petite société, d’une association ou autres.
Afin de faciliter la récupération des informations transmises par l’utilisateur, l’étape préliminaire est
le développement d’une API destinée à faciliter de développement du site. Le code peut ainsi s’écrire
sur une seule et même page.
A qui s’adresse le site ?
A de petites entreprises ou à des associations qui veulent se faire connaître leurs activités.
On sait aujourd’hui que toutes entreprises ou associations doit être présentes sur le web si elles
veulent communiquer sur leurs activités professionnelles et les services qu’elles proposent.
Cette offre leur permet de créer en quelques clics et dans un format assez simple et pré-formaté un
site vitrine qui va leur permettre de communiquer sur leurs activités et éventuellement d’être
contacté. Contenus
- Proposition de plusieurs mises en page (couleurs, styles et dispositions différentes)
- Proposition de polices de caractères
- Proposition de couleurs de police
- Possibilité d’importer des fichiers photos afin de créer une galerie de photos
- Importation d’images perso pour la bannière et le pied de la page
- Choix des contenus dans le sens des différentes parties à ajouter
Rosalie Virginie – Session DI |Décembre2008 6
7. Arborescence
Accueil
Identification
Formulaire d'inscription Enregistrement
Mise en forme générale
Layout Titre Pages Bannière Pied de page
Ajout du contenu
Fichier
Colonnes Boites Images Formulaire Texte
images
Mise en forme particulière
Police Couleurs Styles
Options
Newsletter Compteur Livre d'or
Paiement et mise en ligne
Paiement Validation Mise en ligne
Rosalie Virginie – Session DI |Décembre2
|Décembre2008 7
8. ACCUEIL
Etape 1 :
Identification
Validation du
formulaire
Etape 2 :
Mise en forme générale
Page du
site
Etape 3 :
Ajout du contenu
Etape 4 :
Mise en forme particulière
Validation SITE X
Non
Etape suivante ?
Oui
Etape 5 :
Choix des options
Etape 6 :
Paiement et mise en ligne
Rosalie Virginie – Session DI |Décembre2008 8
9. C – Prestations attendues
Charte graphique et charte éditoriale
- Pas de charte graphique particulière mais simplement le pied de page des sites qui seront
crées devront obligatoirement faire apparaître le nom de la société ACCRO-WEB.
- La navigation au sein du site : l’utilisateur devra obligatoirement suivre les étapes de
conception qui lui sont proposés pour la création.
Création et récupération des contenus
- A moi de proposer un contenu des plus adaptés et ergonomiques pour une facilité
d’utilisation et rendre la création la plus simple possible. Ne pas oublié que l’utilisateur doit
être guidé tout au long de la création de son site.
- L’interface n’étant pas la priorité dans un premier temps, je dois d’abord me concentrer sur
l’API qui doit permettre de créer le code du site en une simple page de code et en un minimum
de lignes.
Développement
- Développement d’un formulaire qui doit permettre l’enregistrement de l’utilisateur et son
identification lors de toutes connexions
- Développement de l’API en PHP5
- Proposition de l’interface web pour l’utilisateur
Maquette
Vous verrez dans les pages suivantes une élaboration des pages qui s’afficheront à l’utilisateur et lui
permettront ainsi de créer son site.
Rosalie Virginie – Session DI |Décembre2008 9
13. D – Livrables attendus
Notre étude s’est porté en premier lieu sur une interface web permettant de générer le code HTML et
CSS des pages ainsi conçues.
Après étude des différents paramètres nécessaires pour le squelette d’une page basique et suite à la
demande de l’entreprise, il a été convenu de travailler sur le développement d’une API qui permettrait
de
de générer ce code en un minimum de lignes.
Il suffirait ensuite de construire, si l’entreprise le désire une interface web afin de récupérer les
désire,
informations transmises par l’utilisateur.
Mais la priorité reste l’API.
Rosalie Virginie – Session DI |Décembre2
|Décembre2008 13
14. ANALYSE
Diagramme de cas d’utilisation
Ci-dessous le diagramme qui représente l’essentiel des fonctionnalités que doit proposer
dessous
l’interface web à son utilisateur. Au vue des livrables attendus par l’entreprise, et en fonction
du développement de l’API, nous nous sommes particulièrement concentrés sur le cas
d’utilisation « CREER ».
Rosalie Virginie – Session DI |Décembre2
|Décembre2008 14
15. Diagramme de cas d’utilisation détaillé
Dans ce diagramme, nous verrons les cas d’utilisation de la partie « CREER » qui nous concerne. Donc on sait
que le nouveau client, une fois identifié, peut ainsi créer son site en y ajoutant des éléments et le mettre en
forme en choisissant un « layout », ou bien en y ajoutant ses mises en formes particulières.
Rosalie Virginie – Session DI |Décembre2
|Décembre2008 15
18. 2ème Partie
API
Le but de cette API est de constituer une bibliothèque de fonctions permettant de faciliter la création
de sites internet en utilisant….
Classe Interface
Toutes les autres classes héritent de cette classe, ce qui permet d’ajouter des colonnes, des boîtes, du
contenu texte, des images, des galeries de photos et bien entendu des propriétés css à chacun des
éléments d’une page.
Classe Site
Cette classe nous permet de créer l’objet « site » auquel on pourra ajouter un « header », un
« footer » et des pages.
Le « header » et le « footer » un fois ajouter au site seront identiques pour chacune des pages.
Cette classe hérite de la classe Interfaces afin que l’on puisse ajouter des composants aux pages. On
peut, à partir de l’objet site, écrire le fichier css et la totalité du code de chacune des pages du site.
Classe Header
Cette classe nous permet de créer l’objet « header » c’est-à-dire l’en-tête du site. On rentre en
paramètre le titre du site, le texte éventuel que l’on veut ajouter dans la bannière et le logo de la
société ou une autre image que l’on veut ajouter dans la bannière.
La mise en page du header sera faite en fonction du layout choisi par l’utilisateur en premier lieu.
Classe Footer
Cette classe fonctionne un peu comme la classe header. Elle crée l’objet « footer » du site. Il contient
un lien vers la société Accro-web et le texte ou bien le code html saisi en paramètre lors de son ajout
dans le site.
Rosalie Virginie – Session DI |Décembre2008 18
19. Classe Page
Cette classe nous permet de créer l’objet Page. On peut ainsi lui écrire le code de la page en fonction
des paramètres qui lui ont été passés.
Cette classe hérite de la classe Interfaces afin que l’on puisse lui ajouter des colonnes, des boîtes, un
formulaire, des css, une galerie de photos.
On peut lui ajouter des propriétés css particulières.
Classe Colonne
Cette classe nous permet de créer les objets colonnes. Une colonne correspond à une zone de la Page
que l’on distingue du reste de la page. On peut ajouter plusieurs zones à une même page. Bien
entendu on doit ajuster les dimensions des colonnes en fonction de la Page.
On peut lui ajouter les différents contenus définis.
On peut lui ajouter des propriétés css particulières.
Classe Boîte
Cette classe crée l’objet boîte que nous appellerons « box ». La « box » représente, dans la logique de
cette API, une zone distingue de la page qui doit être plus petite que la colonne.
On peut lui ajouter tous les éléments de contenus définis, texte, image, photos.
On peut lui ajouter des propriétés css particulières.
Classe Formulaire
Cette classe crée l’objet « formulaire » qui sera ajouté à une page ou à une colonne. Ce formulaire est
vide. Il permet simplement de déterminer l’action et la méthode qui lui seront passés en paramètres
lors de son instanciation.
On lui ajoute des champs qui lui sont nécessaires grâce à la classe « Champformulaire ».
Rosalie Virginie – Session DI |Décembre2008 19
20. Classe Contenu
La classe Contenu permet d’ajouter du contenu type texte ou html dans une page, une colonne, une
boîte.
Classe Image
Cette classe nous permet d’ajouter une image de la hauteur et de la largeur, qui ont été passés en
paramètres lors de son ajout à une page, à une colonne, à une boîte.
Classe CSS
On peut ajouter des css particulières à tous les composants du site excepté le « header » et le
« footer ». Leurs mises en forme est choisi en fonction du layout.
Rosalie Virginie – Session DI |Décembre2008 20
22. CLASSE INTERFACES
Include
CLASSE CONTENU -> CONTENU.PHP
CLASSE CSS -> CLASS_CSS.PHP
CLASSE CHAMPFORMULAIRE ->CLASS_FORM.PHP
CLASS FORMULAIRE -> CLASS_FORM.PHP
Attributs
$TEXTE
$CSS
$GALLERY
$IMAGE
$FORM
$CHAMP
$COLONNE
$BOITE
OPERATIONS
-ADDCOLONNE($ID, $TITRECOL, $TYPE_DIV)
$ID -> INDICE CLASSEMENT
$TITRECOL -> TITRE DE LA COLONNE QUI SERA ENSUITE UTILISE POUR LA DIV OU LA CLASS
DANS L’ECRITURE DU CODE HTML ET DANS LE FICHIER CSS
$TYPE_DIV ->PERMET DE SAVOIR SI LE FORMAT DE LA COLONNE SERA REUTILISE POUR
D’AUTRE COLONNES DONC DEUX CHOIX POSSIBLE ID OU CLASS. SI L’ON CHOISIT
« CLASS » IL FAUT PENSER A UTILISER LE MEME TITRE DE COLONNE POUR CELLE A
QUI ONT VEUT ATTRIBUER LES MEMES CSS. DE CETTE FAÇON, SI ON VEUT AJOUTER
DES CSS PARTICULIERES IL SUFFIT DES LES SAISIR UNE SEULE FOIS SUR UNE DES
COLONNES. DANS LE FICHIER CSS ÇA DONNERA L’ECRITURE D’UN « .TITRECOL » ET
AUTOMATIQUEMENT TOUTES LES COLONNES AVEC TYPE_DIV=CLASS ET AVEC UN
« TITRECOL » IDENTIQUE AURONT LES MEMES CSS.
Rosalie Virginie – Session DI |Décembre2008 22
23. -ADDBOITE($ID, $HAUT, $MILIEU, $BAS, $TITRE, $TYPE, $TYPE_DIV_BTE)
$ID -> INDICE DE CLASSEMENT DANS LE TABLEAU.
$HAUT -> PARTIE HAUTE DE LA BOITE, DOIT POUVOIR CONTENIR UN TITRE OU BIEN UNE
IMAGE.
$MILIEU -> PARTIE CENTRALE DE LA BOITE, PEUT EGALEMENT CONTENIR UNE IMAGE OU DU
TEXTE EN FONCTION DU TYPE DE LA BOITE.
$BAS -> PARTIE BASSE DE LA BOITE IDEM PEUT CONTENIR IMAGE ET TEXTE.
$TITRE -> TITRE DE LA BOITE UTILISE POUR LE FICHIER CSS ET POUR LA DIV.
$TYPE -> TYPE DE LA BOITE. ON PEUT CHOISIR SIMPLE, QUI SIGNIFIE EN UNE SIMPLE
PARTIE PAR EXEMPLE POUR CONTENIR UNE IMAGE OU UNE PHOTO ET DANS CE CAS
IL N’Y AURA PAS DE PARTIE HAUTE, CENTRALE ET BASSE. SI ON NE CHOISIT PAS
« SIMPLE » AUTOMATIQUEMENT CELA SERA UNE BOITE AVEC PARTIE HAUTE,
CENTRALE ET BASSE. ET DANS CE CAS IL FAUDRA REMPLIR LES PARAMETRES.
$TYPE_DIV_BTE ->ON CHOISIT « ID » OU « CLASS » SELON SI ON VEUT APPLIQUER LE MEME STYLE
A PLUSIEURS BOITES. ON UTILISE LE MEME SYSTEME QUE POUR LES COLONNES
C’EST-A-DIRE QUE L’ON RECUPERE LE TITRE DE LA BOITE POUR CREER DANS LE
FICHIER CSS « #TITRE » OU « .TITRE ». DONC SI ON VEUT APPLIQUER LE MEME
STYLE A PLUSIEURS BOITES NE PAS OUBLIER DE LEUR DONNER LE MEME TITRE ET
AINSI ON AJOUTE LES CSS PARTICULIERES A UNE SEULE DES BOITES.
-ADDCONTENU($ID, $TITRE, $CONTENU, $TYPE_DIV)
$ID -> INDICE POUR CLASSEMENT DANS LE TABLEAU.
$TITRE -> TITRE QUE L’ON DONNE AU TEXTE UTILISE POUR LA DIV.
$CONTENU -> TEXTE A AJOUTER DANS LA PAGE, LA COLONNE OU LA BOITE.
$TYPE_DIV -> ON CHOISIT « ID » OU « CLASS » POUR QUE L’ON PUISSE ATTRIBUER
LES MEMES CSS A PLUSIEURS ZONES DE TEXTE.
-ADDCSS($ATTRIBUT, $VALEUR_ATTRIBUT)
$ATTRIBUT -> PROPRIETE CSS
$VALEUR_ATTRIBUT-> VALEUR DE LA PROPRIETE CSS
Rosalie Virginie – Session DI |Décembre2008 23
24. -ADDGALLERY($ID, $TITRE, $SOURCE, $CLASS)
$ID -> INDICE
$TITRE -> TITRE DE LA GALERIE DE PHOTOS QUE L’ON VEUT AJOUTER
$SOURCE -> NOM DU FICHIER SOURCE OU SE TROUVE LES PHOTOS QUE L’ON VEUT
AJOUTER
$CLASS ->
-ADDIMAGE($ID, $URL, $HAUTEUR, $LARGEUR)
$ID -> INDICE
$URL -> ADRESSE DE L’IMAGE QUE L’ON VEUT AJOUTER
$HAUTEUR -> SA HAUTEUR
$LARGEUR -> SA LARGEUR
-ADDCHAMP($ID, $TYPECHAMP, $NOM, $VALUE, $TEXTE)
$ID -> INDICE
$TYPECHAMP -> TYPE DE CHAMP QUE L’ON VEUT AJOUTER SOIT TEXT, TEXTAREA OU
LABEL.
$NOM -> LE NOM DU CHAMP QUI VIENDRA DANS NAME= « $NOM ».
$VALUE -> LA VALEUR VALUE= « $VALUE ».
$TEXTE -> LE TEXTE POUR LE LABEL.
-ADDFORM($ID, $METHOD, $ACTION)
$ID -> INDICE SI EVENTUELLEMENT ON VEUT AJOUTER PLUSIEURS
FORMULAIRE
$METHOD -> LA METHODE APPLIQUEE AU FORMULAIRE.
$ACTION -> L’ADRESSE A LAQUELLE IL SERA RETOURNE UNE FOIS COMPLETEE
Rosalie Virginie – Session DI |Décembre2008 24
25. CLASSE SITE
HERITE DE LA CLASSE INTERFACES
INCLUDE
CLASSE INTERFACES ->CLASS_INTERFACE.PHP
CLASSE MENU ->CLASS_MENU.PHP
CLASSE HEADER ->CLASS_HTML.PHP
CLASSE FOOTER ->CLASS_HTML.PHP
CLASSE PAGE ->CLASS_PAGE.PHP
ATTRIBUTS
$PAGE=ARRAY() ;
$MONMENU=ARRAY() ;
$LAYOUT=ARRAY() ;
OPÉRATIONS
-ADDPAGE($TYPE, $TITREPAGE)
$TYPE -> ON A DEFINIT 4 TYPES DE PAGES POUR LE MOMENT QUI DEVRONT PAR LA SUITE
SE MULTIPLIER ET OFFRIR DES OPTIONS OU DES MISES EN PAGES EN FONCTION DU
TYPE SELECTIONNE. POUR LE MOMENT ÇA CREE LA DIV CORRESPONDANTE.
$TITREPAGE -> TITRE DE LA PAGE
-ADDHEADER($TITRE, $TEXTE, $LOGO)
$TITRE -> TITRE DU SITE QUI APPARAITRA DANS LA BANNIERE
$TEXTE -> TEXTE EVENTUEL QUE L’ON VEUT AJOUTER IL APPARAITRA SOUS LE TITRE DANS
LA BANNIERE
$LOGO -> IMAGE QUI APPARAITRA EGALEMENT DANS LA BANNIERE
Rosalie Virginie – Session DI |Décembre2008 25
26. -ADDFOOTER($SAISIE)
$SAISIE -> TEXTE QUI APPARAITRA DANS LE FOOTER, ON PEUT EGALEMENT Y AJOUTER DES
BALISES HTML.
-ECRIRE_PAGE_SITE($NOMFICHIERCSS, $LAYOUT)
$NOMFICHIERCSS -> NOM DU FICHIER CSS DANS LEQUEL SERONT AJOUTER LES CSS PARTICULIERES
$LAYOUT -> FICHIER CSS QUI EST AJOUTE EN FONCTION DU LAYOUT SELECTIONNE.
->CETTE FONCTION ECRIT AU FUR ET A MESURE L’ENSEMBLE DES PAGES EN FONCTION DE CE
QUI A ETE AJOUTE A L’OBJET SITE. ELLE PART DE SITE ET EN FONCTION DU NOMBRE DE
PAGES, ELLE PARCOURT L’ENSEMBLE DES PAGES ET CE QUI A ETE AJOUTE POUR ECRIRE
CHACUNE DES PAGES PETIT A PETIT.
-ECRIRE_FICHIER_CSS($NOM)
$NOM -> NOM DU FICHIER DANS LEQUEL LES CSS PARTICULIERES VONT ETRE ECRITES.
->CETTE FONCTION ECRIT LE FICHIER DE CSS EN FONCTION DES CSS QUI AURONT ETE
AJOUTEES A CHAQUE ELEMENT DE LA PAGE ET SELON LES TYPES. AINSI ELLE ECRIRA AUSSI
BIEN LES ID QUE LES CLASS.
Rosalie Virginie – Session DI |Décembre2008 26
27. CLASSE HEADER
HERITE DE LA CLASSE INTERFACES
ATTRIBUTS
$TITRE ->TITRE DU SITE
$TEXT ->LE TEXTE CONTENU DANS LA BANNIERE
$LOGO ->IMAGE CONTENU DANS LA BANNIERE POUVANT ETRE UN LOGO OU IMAGE DE SON CHOIX
OPERATIONS
-ECRIRE($FICHIER, $TITRECSS, $LAYOUT)
$FICHIER -> NOM DU FICHIER DANS LEQUEL ON VA ECRIRE LE CODE HTML
CORRESPONDANT AU HEADER.
$TITRECSS -> NOM DU FICHIER CSS DANS LEQUEL SERONT LES CSS DU SITE.
$LAYOUT -> NOM DU FICHIER CSS CORRESPONDANT AU LAYOUT SELECTIONNE.
->CETTE FONCTION ECRIT TOUT LE DEBUT DU CODE DE LA PAGE HTML, LES BALISES POUR
L’AFFICHAGE ET LES PREMIERES DE LA PAGE. ELLE CREE EGALEMENT LES LIENS VERS LES
PAGES CSS CORRESPONDANTES AU SITE.
CLASSE FOOTER
HERITE DE LA CLASSE INTERFACES
ATTRIBUTS
$TEXT
OPERATIONS
-ECRIRE($FICHIER)
$FICHIER ->NOM DU FICHIER OU SERA ECRIS LE CODE HTML DU FOOTER.
Rosalie Virginie – Session DI |Décembre2008 27
28. CLASSE PAGE
HERITE DE LA CLASSE INTERFACES
ATTRIBUTS
$TITRE ->TITRE DE LA PAGE POUR
$TYPE ->TYPE DE PAGE
OPERATIONS
- ECRIRE_PAGE_HTML($FICHIER)
-FERMER_PAGE($FICHIER)
->CES DEUX FONCTIONS ECRIVENT LE CODE QUI OUVRE ET QUI FERME LES DIV DES PAGES.
CLASSE COLONNE
HERITE DE LA CLASSE INTERFACES
ATTRIBUTS
$TITRE
$TYPE_DIV
OPERATIONS
-ECRIRE_COLONNE($FICHIER)
-ECRIRE_FERMER_COLONNE($FICHIER)
->CES DEUX FONCTIONS ECRIVENT LE CODE QUI OUVRE ET FERME LES DIV DES COLONNES.
Rosalie Virginie – Session DI |Décembre2008 28
29. CLASSE BOITE
HERITE DE LA CLASSE INTERFACES
ATTRIBUTS
$TYPE -> VARIABLE QUI PERMET DE DETERMINER LE CONTENU DE LA BOITE
$HAUT ->
$MILIEU ->
$BAS ->
$TITRE ->TITRE DE LA BOITE UTILISE POUR LA DIV
$TYPE_DIV_BTE -> TYPE « ID » OU « CLASS »
OPERATIONS
-ECRIRE_BOITE($FICHIER)
-ECRIRE_FERMER_BOITE($FICHIER)
-> CES DEUX FONCTIONS ECRIVENT LE CODE QUI OUVRE ET FERME LA BOITE DANS LE FICHIER
PASSE EN PARAMETRE.
CLASSE CHAMPFORMULAIRE
HERITE DE LA CLASSE INTERFACES
ATTRIBUTS
$TYPE_DE_CHAMP -> TYPE DE CHAMP : LABEL, TEXT OU TEXTAREA
$NOM_DU_CHAMP ->NOM DU CHAMP
$VALUE -> VALEUR
$TEXT -> TEXTE
OPERATIONS
-ECRIRE_CHAMP($FICHIER)
$FICHIER -> NOM DU FICHIER DANS LEQUEL SERA ECRIS LE CODE DU CHAMP EN FONCTION
DE SON TYPE.
->CETTE FONCTION VA ETRE UTILISEE DANS LA CLASSE FORMULAIRE. ELLE PERMETTRA
D’ECRIRE LES CHAMPS QUI ONT ETE AJOUTE AU FORMULAIRE.
Rosalie Virginie – Session DI |Décembre2008 29
30. CLASSE FORMULAIRE
HERITE DE LA CLASSE INTERFACES
ATTRIBUTS
$METHOD -> METHOD C’EST-A-DIRE « POST » OU « GET »
$ACTION ->EXEMPLE L’ADRESSE A LAQUELLE SERA ENVOYE LE CONTENU DU FORMULAIRE
SI METHOD « POST »
OPERATIONS
-CREER_FORMULAIRE($FICHIER)
$FICHIER -> NOM DU FICHIER DANS LEQUEL SERA AJOUTE LE CODE DE L’ENSEMBLE DU
FORMULAIRE
->CETTE FONCTION CREE LA TOTALITE DU FORMULAIRE. EN FAIT ON AJOUTE UN
FORMULAIRE A UNE PAGE OU UNE COLONNE ENSUITE ON AJOUTE DES CHAMPS A CE
FORMULAIRE. A PARTIR DE LA ON APPELLE LA FONCTION SUR L’OBJET FORM CREEE, ET LE
CODE EST ECRIS A LA PAGE ET DEUX BOUTONS POUR ENVOYER ET EFFACER.
CLASSE CONTENU
HERITE DE LA CLASSE INTERFACES
ATTRIBUTS
$TITRE -> TITRE UTILISE POUR LE TITRE DE LA « ID » OU DE LA « CLASS »
$SAISIE -> CE QUI DOIT ETRE AJOUTER
$TYPE_DIV -> PERMET DE DETERMINER SI ON VA AJOUTER UN « ID » OU UNE « CLASS »
OPÉRATIONS
- ECRIRE_TEXTE($FICHIER)
$FICHIER ->NOM DU FICHIER DANS LEQUEL ON VA ECRIRE LE CODE HTML
- AJOUTER_GALLERY($FICHIER, $POP)
$FICHIER ->NOM DU FICHIER DANS LEQUEL ON VA ECRIRE LE CODE HTML
$POP ->VARIABLE BOOLEENNE
->CETTE FONCTION VA ECRIRE DANS LE FICHIER LE CODE DE LA GALERIE DE PHOTOS.
ELLE RECUPERE LE FICHIER SOURCE QUI CONTIENT ET RECUPERE L’ENSEMBLE DES
PHOTOS QU’IL CONTIENT.
Rosalie Virginie – Session DI |Décembre2008 30
31. CLASSE IMAGE
HERITE DE LA CLASSE INTERFACES
ATTRIBUTS
$URL ->ADRESSE DE L’IMAGE QUE L’ON SOUHAITE AJOUTER
$HAUTEUR -> SA HAUTEUR
$LARGEUR -> SA LARGEUR
OPÉRATIONS
i. AJOUTER_IMAGE($FICHIER)
$FICHIER ->NOM DU FICHIER DANS LEQUEL ON VA AJOUTER LE CODE
->CETTE FONCTION PERMET D’AJOUTER UNE IMAGE DANS UNE PAGE, COLONNE, BOITE.
CLASSE CSS
HERITE DE LA CLASSE INTERFACES
ATTRIBUTS
$ATTRIBUT ->PROPRIETE CSS
$ELEMENT ->VALEUR DE LA PROPRIETE CSS
OPERATIONS
- ECRIRE($FICHIER)
$FICHIER ->NOM DU FICHIER CSS DANS LEQUEL SERONT ECRITES LES CSS
->CETTE FONCTION ECRIT LE FICHIER DE CSS A PARTIR DES CSS QUI ONT ETE AJOUTEES A
CHAQUE ELEMENT DU SITE.
ELLE EST UTILISEE PAR LA FONCTION ECRIRE_FICHIER_CSS DANS LA CLASSE SITE.
Rosalie Virginie – Session DI |Décembre2008 31
32. Exemple d’utilisation de l’API
En local par un cas pratique
Développons par exemple un site sur la Martinique, avec une page d’accueil, une page galerie de
photos, une page recettes typiques des Antilles et enfin une page formulaire de contact.
Cet exemple, assez basique dans le contenu, représente en fait les 4 types de pages qui pourront ainsi
être développées.
SITE 1 – LA MARTINIQUE
LE DEVELOPPEMENT DU SITE :
<?PHP
INCLUDE("CLASS_SITE_2.PHP");
$MONSITE3=NEW SITE("ESSAISTYLE1.CSS");
ON CREE UN NOUVEL OBJET SITE EN PASSANT EN PARAMETRE UN FICHIER CSS QUI CORRESPOND AU
LAYOUT DE BASE DU SITE.
$MONSITE3->ADDHEADER("BIENVENUE EN MARTINIQUE", "KONTAN WE ZOT A MADININA", "LOGO.JPG");
$MONSITE3->ADDFOOTER("<P> OFFICE DU TOURISME DE LA MARTINIQUE, <BR/> 320 CHEMIN DE STE
MARTHE <BR/> 13014 MARSEILLE</P>");
ON AJOUTE LE HEADER ET LE FOOTER
ON AJOUTE DES PAGES AU SITE
DONC VOILA NOS 4 PAGES AINSI CREEES ILS NOUS FAUT MAINTENANT Y AJOUTER DU CONTENU.
$MONSITE3->ADDPAGE("TEXTE", "ACCUEIL"); //PAGE ACCUEIL
$MONSITE3->ADDPAGE("GALLERY", "GALERIE"); //PAGE GALERIE DE PHOTOS
$MONSITE3->ADDPAGE("TEXTE", "CUISINE"); //PAGE RECETTES DE CUISINE
$MONSITE3->ADDPAGE("CONTACT", "CONTACT"); //PAGE FORMULAIRE DE CONTACT
Rosalie Virginie – Session DI |Décembre2008 32
33. 1ERE PAGE
C’EST UNE PAGE D’ACCUEIL DANS LAQUELLE ON VA METTRE UN PETIT TEXTE DE BIENVENUE ET QUELQUES PHOTOS.
AJOUT DES COLONNES
$MONSITE3->PAGE[0]->ADDCOLONNE(1, "COL_ACCUEIL", "ID"); //PAGE 1 - COLONNE 1
$MONSITE3->PAGE[0]->ADDCOLONNE(2, "COL_ACCUEIL2", "ID"); //PAGE 1 - COLONNE 2
COLONNE 1 -> COL_ACCUEIL ->DANS LA COLONNE 1 ON AJOUTE UN PETIT TEXTE DE BIENVENUE
$MONSITE3->PAGE[0]->COLONNE[1]->ADDCONTENU(1, "TEXTACCUEIL",
"BONJOUR, BIENVENUE SUR MON SITE! <BR/>JE VAIS ESSAYER DE VOUS FAIRE DECOUVRIR LA MARTINIQUE A TRAVERS QUELQUES-
UNES DE MES PHOTOS DE VACANCES ET DES SPECIALITES LOCALES QUE J'AI PU APPRECIER AU COURS DE MON VOYAGE!<BR/> JE
VOUS SOUHAITE UNE AGREABLE BALADE ET UN PEU DE DEPAYSEMENT ÇA FAIT DU BIEN!<BR>", "ID");
COLONNE2 -> COL_ACCUEIL2 -> ON AJOUTE 5 BOITES A LA COLONNE
$MONSITE3->PAGE[0]->COLONNE[2]->ADDBOITE(1, "", "", "", "PHOTOS", "SIMPLE", "CLASS");
$MONSITE3->PAGE[0]->COLONNE[2]->ADDBOITE(2, "", "", "", "PHOTOS", "SIMPLE", "CLASS");
$MONSITE3->PAGE[0]->COLONNE[2]->ADDBOITE(3, "", "", "", "PHOTOS", "SIMPLE", "CLASS");
$MONSITE3->PAGE[0]->COLONNE[2]->ADDBOITE(4, "", "", "", "PHOTOS", "SIMPLE", "CLASS");
ON LEUR DONNE LE MEME NOM ET UN TYPE CLASS POUR QUE NOUS N’AYONS PAS BESOIN DE SAISIR LES CSS POUR TOUTES LES BOITES.
ON SAISIRA LES CSS SUR UNE SEULE BOITE.
COLONNE2 -> COL_ACCUEIL2 -> BOITE-> ON AJOUTE DES IMAGES DANS LES BOITES
$MONSITE3->PAGE[0]->COLONNE[2]->BOITE[1]->ADDIMAGE(1, "MARTINIQUE/PALMIER.JPG", "150PX", "200PX");
$MONSITE3->PAGE[0]->COLONNE[2]->BOITE[2]->ADDIMAGE(1, "MARTINIQUE/SOLEIL.JPG", "150PX", "200PX");
$MONSITE3->PAGE[0]->COLONNE[2]->BOITE[3]->ADDIMAGE(1, "MARTINIQUE/PAYSAGE.JPG", "150PX", "200PX");
$MONSITE3->PAGE[0]->COLONNE[2]->BOITE[4]->ADDIMAGE(1, "MARTINIQUE/DIAMANT.JPG", "150PX", "200PX");
CSS DE LA PAGE 1
$MONSITE3->PAGE[0]->ADDCSS("FONT-FAMILY", "ARIAL");
$MONSITE3->PAGE[0]->ADDCSS("FONT-SIZE", 14);
$MONSITE3->PAGE[0]->ADDCSS("COLOR", "#FFF");
//COLONNE 1
$MONSITE3->PAGE[0]->COLONNE[1]->ADDCSS("WIDTH", "100%");
$MONSITE3->PAGE[0]->COLONNE[1]->ADDCSS("FLOAT", "LEFT");
$MONSITE3->PAGE[0]->COLONNE[1]->ADDCSS("MARGIN-BOTTOM", "30PX");
$MONSITE3->PAGE[0]->COLONNE[1]->ADDCSS("FONT-SIZE", "20PX");
$MONSITE3->PAGE[0]->COLONNE[1]->ADDCSS("FONT-FAMILY", "COMIC SANS MS");
$MONSITE3->PAGE[0]->COLONNE[1]->ADDCSS("FONT-WEIGHT", "BOLDER");
$MONSITE3->PAGE[0]->COLONNE[1]->ADDCSS("TEXT-ALIGN", "CENTER");
$MONSITE3->PAGE[0]->COLONNE[1]->ADDCSS("LINE-HEIGHT", "30PX");
$MONSITE3->PAGE[0]->COLONNE[1]->ADDCSS("BACKGROUND-IMAGE", "URL(MADRAS.JPG)");
Rosalie Virginie – Session DI |Décembre2008 33
41. 4EME PAGE
C’EST UNE PAGE DE CONTACT DANS LAQUELLE ON VA AJOUTER UN FORMULAIRE AINSI QU’UNE CARTE DE LA MARTINIQUE.
AJOUT DE 2 COLONNES. UNE COLONNE POUR LE FORMULAIRE ET UNE AUTRE POUR LA CARTE
$MONSITE3->PAGE[3]->ADDCOLONNE(1, "FORMULAIRE", "ID"); //PAGE 4 – COLONNE 1
$MONSITE3->PAGE[3]->ADDCOLONNE(2, "CARTE", "ID"); //PAGE 4 – COLONNE 2
PAGE 4 – COLONNE 1
//FORMULAIRE
$MONSITE3->PAGE[3]->COLONNE[1]->ADDFORM(1, "POST", "#");
ON AJOUTE D’ABORD L’OBJET « FORM » AUQUEL ON VA AJOUTER LES CHAMPS.
//NOM
$MONSITE3->PAGE[3]->COLONNE[1]->FORM[1]->ADDCHAMP(1, "LABEL", "NOM", "", "VOTRE NOM");
$MONSITE3->PAGE[3]->COLONNE[1]->FORM[1]->ADDCHAMP(2, "TEXTE", "NOM", "", "");
//PRENOM
$MONSITE3->PAGE[3]->COLONNE[1]->FORM[1]->ADDCHAMP(3, "LABEL", "PRENOM", "", "VOTRE PRENOM");
$MONSITE3->PAGE[3]->COLONNE[1]->FORM[1]->ADDCHAMP(4, "TEXTE", "PRENOM", "", "");
//ADRESSE
$MONSITE3->PAGE[3]->COLONNE[1]->FORM[1]->ADDCHAMP(5, "LABEL", "ADRESSE", "", "VOTRE ADRESSE");
$MONSITE3->PAGE[3]->COLONNE[1]->FORM[1]->ADDCHAMP(6, "TEXTE", "ADRESSE", "", "");
//CP
$MONSITE3->PAGE[3]->COLONNE[1]->FORM[1]->ADDCHAMP(7, "LABEL", "CP", "", "CODE POSTAL");
$MONSITE3->PAGE[3]->COLONNE[1]->FORM[1]->ADDCHAMP(8, "TEXTE", "CP", "", "");
//VILLE
$MONSITE3->PAGE[3]->COLONNE[1]->FORM[1]->ADDCHAMP(9, "LABEL", "VILLE", "", "VILLE");
$MONSITE3->PAGE[3]->COLONNE[1]->FORM[1]->ADDCHAMP(10, "TEXTE", "VILLE", "", "");
//MAIL
$MONSITE3->PAGE[3]->COLONNE[1]->FORM[1]->ADDCHAMP(11, "LABEL", "MAIL", "", "MAIL(FACULTATIF)");
$MONSITE3->PAGE[3]->COLONNE[1]->FORM[1]->ADDCHAMP(12, "TEXTE", "MAIL", "@", "");
//PHONE
$MONSITE3->PAGE[3]->COLONNE[1]->FORM[1]->ADDCHAMP(13, "LABEL", "PHONE", "", "TELEPHONE(FACULTATIF)");
$MONSITE3->PAGE[3]->COLONNE[1]->FORM[1]->ADDCHAMP(14, "TEXTE", "PHONE", "", "");
//COMMENTAIRES
$MONSITE3->PAGE[3]->COLONNE[1]->FORM[1]->ADDCHAMP(15, "LABEL", "COMMENTAIRES", "", "VOS COMMENTAIRES");
$MONSITE3->PAGE[3]->COLONNE[1]->FORM[1]->ADDCHAMP(16, "TEXTAREA", "COMMENTAIRES", "", "TAPEZ ICI VOS
COMMENTAIRES");
PAGE 4 – COLONNE 2
$MONSITE3->PAGE[3]->COLONNE[2]->ADDIMAGE(1, "MADININA_CARTE.JPG", "350PX", "320PX");
CSS DE LA PAGE 4
$MONSITE3->PAGE[3]->ADDCSS("FONT-FAMILY", "ARIAL");
$MONSITE3->PAGE[3]->ADDCSS("FONT-SIZE", 14);
$MONSITE3->PAGE[3]->ADDCSS("COLOR", "#7CFC10");
//CARTE
$MONSITE3->PAGE[3]->COLONNE[2]->ADDCSS("WIDTH", "350PX");
Rosalie Virginie – Session DI |Décembre2008 41
42. $MONSITE3->PAGE[3]->COLONNE[2]->ADDCSS("FLOAT", "RIGHT");
$MONSITE3->PAGE[3]->COLONNE[2]->ADDCSS("PADDING", "5PX");
$MONSITE3->PAGE[3]->COLONNE[2]->ADDCSS("MARGIN-RIGHT", "10PX");
$MONSITE3->PAGE[3]->COLONNE[2]->ADDCSS("MARGIN-TOP", "20PX");
//FORMULAIRE
$MONSITE3->PAGE[3]->COLONNE[1]->ADDCSS("WIDTH", "600PX");
$MONSITE3->PAGE[3]->COLONNE[1]->ADDCSS("FLOAT", "LEFT");
$MONSITE3->PAGE[3]->COLONNE[1]->ADDCSS("PADDING", "20PX");
$MONSITE3->PAGE[3]->COLONNE[1]->ADDCSS("COLOR", "#FFF");
$MONSITE3->PAGE[3]->COLONNE[1]->ADDCSS("FONT-SIZE", "14PX");
ON VA ALORS PROCEDER A L’ECRITURE DES FICHIER HTML ET CSS
FICHIERS
$MONSITE3->ECRIRE_PAGE_SITE("ESSAISTYLE1.CSS", "MONSITE.CSS");
$MONSITE3->ECRIRE_FICHIER_CSS("MONSITE");
?>
Voilà le code de ces 4 pages de site est terminé. Vous avez pu voir au fur et à mesure le code et le
rendu de la page.
Bien entendu pour le moment, l’écriture de ce code en ligne et de tout ajouter peut sembler un peu
fastidieux mais le but est qu’une fois mis en place il doit réduire le temps de travail pour des sites peu
complexes.
Dans ce cas nous avons rajoutés par exemple beaucoup de css pour la page 3 de notre site qui
exemple
contenait plus d’éléments que les autres. Cela peut être géré par un layout plus complet.
Rosalie Virginie – Session DI |Décembre2
|Décembre2008 42
43. UTILISATION PAR UNE INTERFACE MISE EN LIGNE
Au départ de notre projet, nous sommes partis de l’idée de notre maître de stage de développer un
site web qui permettrait à toutes personnes le désirant de créer son site en quelques clics.
Nous avons établis les étapes que l’internaute devra suivre pour compléter son site. Cette API nous
permet de centraliser la récupération des informations en vue du développement du code. Mais elle
ne gère pas toutes les étapes de développement.
Les contraintes de l’interface web.
- Gérer l’ensemble des contrôles de saisies au niveau des champs que l’internaute
doit renseigner.
- Proposer en fonction des ajouts dans chaque page des solutions optimales, c’est-
à-dire que l’internaute ne va pas contrôler si le contenu peut tenir dans la page.
C’est encore des contrôles qui sont primordiaux dans la conception, contrôle de
dimensions des zones, contrôles des polices, des couleurs.
- Proposer des solutions pour guider l’internaute dans ces choix.
- Faciliter au maximum la manipulation des informations.
Rosalie Virginie – Session DI |Décembre2008 43
44. Conclusion
Sur API
Ce projet peut paraître simple dans son idée, il est vrai qu’il existe déjà une quantité de sites qui nous
permettent de créer blogs et autres sites perso. Mais l’atout d’un tel projet doit être de cibler des
professionnels en leurs proposant des services vraiment adaptés, donc l’API en elle-même n’est
qu’une partie de ce projet.
Je pense que le réel intérêt est dans la conception d’une interface vraiment ergonomique et
dynamique qui doit avant tout guider l’utilisateur dans sa conception. Il ne faut pas oublier qu’une
personne initiée pourra créer son site seule si elle le désire. La cible est les personnes qui ont du mal
avec internet mais qui ont un besoin de communication.
Bien entendu dans ce projet il nous a été demandé de développer la partie « créer », mais il ne faut
pas oublier qu’il reste deux cas d’utilisation « modifier » et « ajouter ».
Le projet étant encore à l’étude en ce qui concerne la société ACCRO-WEB, aucun prix n’a été
déterminé et de son côté la société s’est concentrée sur d’autres projets à courts termes.
Personnel
Pour conclure, ce stage m’a permis de développer mes connaissances en programmation orientée
objet, de mieux comprendre la conduite d’un projet, mais également de me familiariser avec le
langage PHP.
Mon échec sur le CCP Analyse à la session de juillet m’a permis de comprendre l’importance de
déterminer les axes de développement, les besoins, les attentes de la société ou personne qui nous
confie un projet.
Rosalie Virginie – Session DI |Décembre2008 44
