Rapport Maj18122008

Rosalie Virginie – Session DI |Décembre2008 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


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


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


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.


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


- 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

Arborescence

Paiement

Newsletter

Police

Colonnes Boites

Layout Titre

Formulaire d'inscription

Rosalie Virginie – Session DI |Décembre2

Paiement et mise en ligne

Validation

Options

Compteur

Mise en forme particulière

Couleurs

Ajout du contenu

Boites ImagesFichier

imagesFormulaire

Mise en forme générale

Titre Pages Bannière

Identification

Formulaire d'inscription Enregistrement

Accueil

|Décembre2008 7

Mise en ligne

Livre d'or

Styles

Formulaire Texte

Bannière Pied de page

Enregistrement


ACCUEIL

Etape 1 :

Identification

Etape 2 :

Mise en forme générale

Etape 3 :

Ajout du contenu

Etape 4 :

Mise en forme particulière

Etape 5 :

Choix des options

Etape 6 :

Paiement et mise en ligne

Validation du

formulaire

Page du

site

SITE X Validation

Etape suivante ?

Oui

Non


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écembre2|Décembre2008 10



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 d

de générer ce code en un minimum de lignes.

Il suffirait ensuite de construire, si l’entreprise le désire

informations transmises par l’utilisateur.

Mais la priorité reste l’API.


porté en premier lieu sur une interface web permettant de générer le code HTML et


demande de l’entreprise, il a été convenu de travailler sur le développement d’une API qui permettrait

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

informations transmises par l’utilisateur.

|Décembre2008 13

porté en premier lieu sur une interface web permettant de générer le code HTML et


e travailler sur le développement d’une API qui permettrait

interface web afin de récupérer les

ANALYSE


Ci-dessous le diagramme qui représente l’essentiel des fonctionnalités que doit proposer

l’interface web à son utilisateur. Au vue des

du développement de l’API, nous nous sommes particulièrement concentrés sur le cas

d’utilisation « CREER ».



dessous le diagramme qui représente l’essentiel des fonctionnalités que doit proposer

l’interface web à son utilisateur. Au vue des livrables attendus par l’entreprise, et en fonction

développement de l’API, nous nous sommes particulièrement concentrés sur le cas

|Décembre2008 14

dessous le diagramme qui représente l’essentiel des fonctionnalités que doit proposer

livrables attendus par l’entreprise, et en fonction

développement de l’API, nous nous sommes particulièrement concentrés sur le cas

Diagramme de cas d’utilisation détaillé

Dans ce diagramme, nous verrons les cas d’utilisation de la partie «

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.


Diagramme de cas d’utilisation détaillé

Dans ce diagramme, nous verrons les cas d’utilisation de la partie « CREER » qui nous concerne.


», ou bien en y ajoutant ses mises en formes particulières.

|Décembre2008 15

» qui nous concerne. Donc on sait


», ou bien en y ajoutant ses mises en formes particulières.


Diagramme de classes


Diagramme de séquences


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.


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.


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.


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 ».


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.



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.


-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


-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


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


-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.


CLASSE HEADER


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


ATTRIBUTS

$TEXT

OPERATIONS

-ECRIRE($FICHIER)

$FICHIER ->NOM DU FICHIER OU SERA ECRIS LE CODE HTML DU FOOTER.


CLASSE PAGE


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


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.


CLASSE BOITE


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


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.


CLASSE FORMULAIRE


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


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.


CLASSE IMAGE


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


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.


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(" OFFICE DU TOURISME DE LA MARTINIQUE, 320 CHEMIN DE STE

MARTHE 13014 MARSEILLE");

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


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! 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! JE

VOUS SOUHAITE UNE AGREABLE BALADE ET UN PEU DE DEPAYSEMENT ÇA FAIT DU BIEN! ", "ID");

COLONNE2 -> COL_ACCUEIL2 -> ON AJOUTE 5 BOITES A LA COLONNE

$MONSITE3->PAGE[0]->COLONNE[2]->ADDBOITE(1, "", "", "", "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)");

$MONSITE3->PAGE[0]->COLONNE[1]->ADD


//TEXTACCUEIL

$MONSITE3->PAGE[0]->COLONNE[1]->TEXTE




//COLONNE 2






//BOITE CONTENANT LES PHOTOS

$MONSITE3->PAGE[0]->COLONNE[2]->BOITE





Cf page1_site martinique


ADDCSS("BACKGROUND-REPEAT", "REPEAT-X");

ADDCSS("BACKGROUND-POSITION", "LEFT");

TEXTE[1]->ADDCSS("BACKGROUND-COLOR", "#FF8C00");

TEXTE[1]->ADDCSS("PADDING", "20PX");

TEXTE[1]->ADDCSS("MARGIN-BOTTOM", "20PX");

TEXTE[1]->ADDCSS("MARGIN-TOP", "20PX");

ADDCSS("WIDTH", "100%");

ADDCSS("FLOAT", "LEFT");

ADDCSS("MARGIN-TOP", "30PX");

ADDCSS("MARGIN-BOTTOM", "30PX");

ADDCSS("BACKGROUND-COLOR", "NONE");

BOITE[1]->ADDCSS("BACKGROUND-COLOR", "#FFF");

BOITE[1]->ADDCSS("WIDTH", "250PX");

BOITE[1]->ADDCSS("MIN-HEIGHT", "300PX");

BOITE[1]->ADDCSS("MARGIN-LEFT", "40PX");

BOITE[1]->ADDCSS("DISPLAY", "INLINE");

|Décembre2008 34


2EME PAGE

C’EST UNE PAGE CONTENANT UNE GALERIE DE PHOTOS

AJOUT DES COLONNES

$MONSITE3->PAGE[1]->ADDCOLONNE(1, "COL1", "ID"); //PAGE 2 – COLONNE 1

$MONSITE3->PAGE[1]->ADDCOLONNE(2, "COL_GALLERY", "ID"); //PAGE 2 – COLONNE 2

//PAGE1 - COL1

$MONSITE3->PAGE[1]->COLONNE[1]->ADDCONTENU(1, "TEXTEPAGEGALERIE", "JE VAIS VOUS PRESENTER QUELQUES UNES DE

MES PHOTOS DE VACANCES A LA MARTINIQUE. PAYSAGES MAGNIFIQUES, PLAGES DE SABLE FIN ET COCOTIER, LE REVE!",

"ID");

//PAGE 1 - COL_GALLERY

$MONSITE3->PAGE[1]->COLONNE[2]->ADDGALLERY(1,"MESPHOTOS", "MARTINIQUE", "CLASS");

CSS DE LA PAGE 2



$MONSITE3->PAGE[1]->ADDCSS("FONT-COLOR", "#FFF");

//COL1


$MONSITE3->PAGE[1]->COLONNE[1]->ADDCSS("HEIGHT", "30PX");



$MONSITE3->PAGE[1]->COLONNE[1]->ADDCSS("FONT-SIZE", "20PX");

$MONSITE3->PAGE[1]->COLONNE[1]->ADDCSS("FONT-FAMILY", "COMIC SANS MS");

$MONSITE3->PAGE[1]->COLONNE[1]->ADDCSS("FONT-WEIGHT", "BOLDER");

$MONSITE3->PAGE[1]->COLONNE[1]->ADDCSS("TEXT-ALIGN", "CENTER");

$MONSITE3->PAGE[1]->COLONNE[1]->ADDCSS("LINE-HEIGHT", "30PX");

$MONSITE3->PAGE[1]->COLONNE[1]->ADDCSS("MARGIN-LEFT", "5PX");

//COL_GALLERY


$MONSITE3->PAGE[1]->COLONNE[2]->ADDCSS("PADDING", "20PX");

$MONSITE3->PAGE[1]->COLONNE[2]->ADDCSS("MARGIN-TOP", "20PX");



Cf page2_sitemartinique



3EME PAGE

ON VA METTRE DANS CETTE PAGE DES FICHES DE CUISINE POUR DES PLATS OU COCKTAILS TRADITIONNELS DES ANTILLES

AJOUT DE 4 COLONNES

$MONSITE3->PAGE[2]->ADDCOLONNE(1, "RECETTE", "CLASS"); //PAGE 3 – COLONNE 1

$MONSITE3->PAGE[2]->ADDCOLONNE(2, "RECETTE", "CLASS"); / /PAGE3 – COLONNE 2

$MONSITE3->PAGE[2]->ADDCOLONNE(3, "RECETTE", "CLASS"); / /PAGE 3 – COLONNE 3

$MONSITE3->PAGE[2]->ADDCOLONNE(4, "RECETTE", "CLASS"); / /PAGE 3 – COLONNE 4

ELLES ONT LE MEME TITRE ET LE MEME TYPE PUISQUE NOUS VOULONS QU’ELLES AIENT TOUTES LES MEMES STYLES.

PAGE 3 – COLONNE 1

//COLONNE 1 -> AJOUTE DE 6 BOITES

ON AJOUTE LES MEMES BOITES A CHACUNE DES COLONNES TOUJOURS POUR LE PRINCIPE DES CSS . DANS CE CAS PRECIS LES

BOITES ET LES COLONNES VONT ETRE REPETEES A L’IDENTIQUE.

$MONSITE3->PAGE[2]->COLONNE[1]->ADDBOITE(1, "", "", "", "TITRE", "SIMPLE", "CLASS");

$MONSITE3->PAGE[2]->COLONNE[1]->ADDBOITE(2, "", "", "", "IMAGE", "SIMPLE", "CLASS");

$MONSITE3->PAGE[2]->COLONNE[1]->ADDBOITE(3, "", "", "", "TITRE2", "SIMPLE", "CLASS");

$MONSITE3->PAGE[2]->COLONNE[1]->ADDBOITE(4, "", "", "", "INGREDIENT", "SIMPLE", "CLASS");


$MONSITE3->PAGE[2]->COLONNE[1]->ADDBOITE(6, "", "", "", "PREPARATION", "SIMPLE", "CLASS");

//COLONNE 1 - AJOUT DE CONTENU AUX BOITES

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[1]->ADDCONTENU(1, "TITRE", "ACCRAS", "CLASS");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[2]->ADDIMAGE(1, "MADININACOOK/ACCRAS.JPG","100PX", "200PX");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[3]->ADDCONTENU(1, "TITRE2", "INGREDIENTS", "CLASS");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[4]->ADDCONTENU(1, "INGREDIENTS", "FARINE, SEL, POIVRE, PIMENT, TEMPS",

"CLASS");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[5]->ADDCONTENU(1, "TITRE3", "PREPARATION", "CLASS");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[6]->ADDCONTENU(1, "PREPARATION", "MELANGER LE TOUT FAIRE FRIRE ET C'EST

PRET", "CLASS");

PAGE 3 - COLONNE 2

//COLONNE 2 -> AJOUT DES 6 BOITES








//AJOUT DE CONTENU AUX BOITES

$MONSITE3->PAGE[2]->COLONNE[2]->BOITE[1]->ADDCONTENU(1, "TITRE", " TI PUNCH ", "CLASS");

$MONSITE3->PAGE[2]->COLONNE[2]->BOITE[2]->ADDIMAGE(1, "MADININACOOK/TIPUNCH.JPG","100PX", "200PX");


$MONSITE3->PAGE[2]->COLONNE[2]->BOITE[4]->ADDCONTENU(1, "INGREDIENTS", "RHUM, SUCRE DE CANNE, CITRON VERT",

"CLASS");


$MONSITE3->PAGE[2]->COLONNE[2]->BOITE[6]->ADDCONTENU(1, "PREPARATION", "MELANGER LE TOUT ET SURTOUT N'EN

N'ABUSEZ PAS!", "CLASS");


//COLONNE 3-> AJOUT DES 6 BOITES








$MONSITE3->PAGE[2]->COLONNE[3]->BOITE[1]->ADDCONTENU(1, "TITRE", "POULET LAIT DE COCO", "CLASS");

$MONSITE3->PAGE[2]->COLONNE[3]->BOITE[2]->ADDIMAGE(1, "MADININACOOK/COCO.JPG","100PX", "200PX");


$MONSITE3->PAGE[2]->COLONNE[3]->BOITE[4]->ADDCONTENU(4, "INGREDIENTS", "POULET, CURRY, LAIT DE COCO, SEL,

POIVRE", "CLASS");


$MONSITE3->PAGE[2]->COLONNE[3]->BOITE[6]->ADDCONTENU(6, "PREPARATION", "BLA BLA BLA BLA TRO BON! SURTOUT CELUI

QUE JE FAIS!", "CLASS");


//COLONNE 4 -> AJOUT DES 6 BOITES








$MONSITE3->PAGE[2]->COLONNE[4]->BOITE[1]->ADDCONTENU(1, "TITRE", "SHRUB", "CLASS");

$MONSITE3->PAGE[2]->COLONNE[4]->BOITE[2]->ADDIMAGE(1, "MADININACOOK/SHRUB.JPG","100PX", "200PX");


$MONSITE3->PAGE[2]->COLONNE[4]->BOITE[4]->ADDCONTENU(1, "INGREDIENTS", "RHUM, ORANGES, CANNELLE, ET ...",

"CLASS");


$MONSITE3->PAGE[2]->COLONNE[4]->BOITE[6]->ADDCONTENU(1, "PREPARATION", "TRO TRO BON", "CLASS");


CSS DE LA PAGE 3



//COL1




$MONSITE3->PAGE[2]->COLONNE[1]->ADDCSS("PADDING", "10PX");


$MONSITE3->PAGE[2]->COLONNE[1]->ADDCSS("DISPLAY", "INLINE");

$MONSITE3->PAGE[2]->COLONNE[1]->ADDCSS("BACKGROUND-IMAGE", "URL(MADRAS.JPG)");

//CSS TITRE

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[1]->ADDCSS("DISPLAY", "INBLOCK");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[1]->ADDCSS("WIDTH", "220PX");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[1]->ADDCSS("HEIGHT", "50PX");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[1]->ADDCSS("BACKGROUND-IMAGE", "URL(FEUILPALMIER.JPG)");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[1]->ADDCSS("BACKGROUND-POSITION", "LEFT");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[1]->ADDCSS("BACKGROUND-REPEAT", "NO-REPEAT");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[1]->ADDCSS("BACKGROUND-COLOR", "#FFF");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[1]->ADDCSS("FONT-SIZE", "16PX");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[1]->ADDCSS("FONT-COLOR", "#2E8B57");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[1]->ADDCSS("FONT-WEIGHT", "BOLDER");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[1]->ADDCSS("FLOAT", "LEFT");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[1]->ADDCSS("MARGIN-TOP", "5PX");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[1]->ADDCSS("TEXT-ALIGN", "CENTER");

//CSS IMG



$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[2]->ADDCSS("BACKGROUND-COLOR", "#228B22");


//CSS TITRE 2




$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[3]->ADDCSS("FONT-SIZE", "14PX");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[3]->ADDCSS("FONT-COLOR", "#228B22");

$MONSITE3->PAGE[2]->COLONNE[1]->BOITE[3]->ADDCSS("FONT-WEIGHT", "BOLDER");


//CSS INGREDIENTS









//CSS TITRE 3








//CSS PREPARATION









Cf page3_sitemartinique


BOITE[4]->ADDCSS("BACKGROUND-COLOR", "#228B22");

BOITE[4]->ADDCSS("FONT-SIZE", "12PX");

BOITE[4]->ADDCSS("FONT-COLOR", "#FFF");

BOITE[4]->ADDCSS("FONT-WEIGHT", "BOLDER");

BOITE[4]->ADDCSS("FLOAT", "LEFT");

BOITE[5]->ADDCSS("DISPLAY", "INBLOCK");


BOITE[5]->ADDCSS("HEIGHT", "30PX");


BOITE[5]->ADDCSS("FONT-COLOR", "#228B22");



BOITE[6]->ADDCSS("DISPLAY", "INBLOCK");


BOITE[6]->ADDCSS("HEIGHT", "100PX");

BOITE[6]->ADDCSS("BACKGROUND-COLOR", "#228B22");


BOITE[6]->ADDCSS("FONT-COLOR", "#FFF");



|Décembre2008 40


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


//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");


$MONSITE3->PAGE[3]->COLONNE[2]->ADDIMAGE(1, "MADININA_CARTE.JPG", "350PX", "320PX");

CSS DE LA PAGE 4



$MONSITE3->PAGE[3]->ADDCSS("COLOR", "#7CFC10");

//CARTE

$MONSITE3->PAGE[3]->COLONNE[2]->ADDCSS("WIDTH", "350PX");





//FORMULAIRE






ON VA ALORS PROCEDER A L’ECRITURE DES FICHIER

$MONSITE3->ECRIRE_PAGE_SITE("ESSAISTYLE

$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 excontenait plus d’éléments que les autres. Cela peut être géré par un layout plus complet.


ADDCSS("FLOAT", "RIGHT");

ADDCSS("PADDING", "5PX");

ADDCSS("MARGIN-RIGHT", "10PX");

ADDCSS("MARGIN-TOP", "20PX");

ADDCSS("WIDTH", "600PX");

ADDCSS("FLOAT", "LEFT");

ADDCSS("PADDING", "20PX");

ADDCSS("COLOR", "#FFF");

ADDCSS("FONT-SIZE", "14PX");

ECRITURE DES FICHIERS HTML ET CSS

ESSAISTYLE1.CSS", "MONSITE.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

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

Dans ce cas nous avons rajoutés par exemple beaucoup de css pour la page 3 de notre site qui contenait plus d’éléments que les autres. Cela peut être géré par un layout plus complet.

|Décembre2008 42

Voilà le code de ces 4 pages de site est terminé. Vous avez pu voir au fur et à mesure le code et le

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

emple beaucoup de css pour la page 3 de notre site qui contenait plus d’éléments que les autres. Cela peut être géré par un layout plus complet.


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.


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.

Travel

Rapport Maj18122008