Rapport Maj18122008

  • 1,026 views
Uploaded on

 

More in: Travel , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,026
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
10
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 10. Rosalie Virginie – Session DI |Décembre2 |Décembre2008 10
  • 11. Rosalie Virginie – Session DI |Décembre2 |Décembre2008 11
  • 12. Rosalie Virginie – Session DI |Décembre2 |Décembre2008 12
  • 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
  • 16. Diagramme de classes Rosalie Virginie – Session DI |Décembre2008 16
  • 17. Diagramme de séquences Rosalie Virginie – Session DI |Décembre2008 17
  • 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
  • 21. Rosalie Virginie – Session DI |Décembre2008 21
  • 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
  • 34. $MONSITE3->PAGE[0]->COLONNE[1]->ADDCSS("BACKGROUND-REPEAT", "REPEAT-X"); $MONSITE3->PAGE[0]->COLONNE[1]->ADDCSS("BACKGROUND-POSITION", "LEFT"); //TEXTACCUEIL $MONSITE3->PAGE[0]->COLONNE[1]->TEXTE[1]->ADDCSS("BACKGROUND-COLOR", "#FF8C00"); $MONSITE3->PAGE[0]->COLONNE[1]->TEXTE[1]->ADDCSS("PADDING", "20PX"); $MONSITE3->PAGE[0]->COLONNE[1]->TEXTE[1]->ADDCSS("MARGIN-BOTTOM", "20PX"); $MONSITE3->PAGE[0]->COLONNE[1]->TEXTE[1]->ADDCSS("MARGIN-TOP", "20PX"); //COLONNE 2 $MONSITE3->PAGE[0]->COLONNE[2]->ADDCSS("WIDTH", "100%"); $MONSITE3->PAGE[0]->COLONNE[2]->ADDCSS("FLOAT", "LEFT"); $MONSITE3->PAGE[0]->COLONNE[2]->ADDCSS("MARGIN-TOP", "30PX"); $MONSITE3->PAGE[0]->COLONNE[2]->ADDCSS("MARGIN-BOTTOM", "30PX"); $MONSITE3->PAGE[0]->COLONNE[1]->ADDCSS("BACKGROUND-COLOR", "NONE"); //BOITE CONTENANT LES PHOTOS $MONSITE3->PAGE[0]->COLONNE[2]->BOITE[1]->ADDCSS("BACKGROUND-COLOR", "#FFF"); $MONSITE3->PAGE[0]->COLONNE[2]->BOITE[1]->ADDCSS("WIDTH", "250PX"); $MONSITE3->PAGE[0]->COLONNE[2]->BOITE[1]->ADDCSS("MIN-HEIGHT", "300PX"); $MONSITE3->PAGE[0]->COLONNE[2]->BOITE[1]->ADDCSS("MARGIN-LEFT", "40PX"); $MONSITE3->PAGE[0]->COLONNE[2]->BOITE[1]->ADDCSS("DISPLAY", "INLINE"); Cf page1_site martinique Rosalie Virginie – Session DI |Décembre2 |Décembre2008 34
  • 35. 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.<BR/> 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-FAMILY", "ARIAL"); $MONSITE3->PAGE[1]->ADDCSS("FONT-SIZE", 14); $MONSITE3->PAGE[1]->ADDCSS("FONT-COLOR", "#FFF"); //COL1 $MONSITE3->PAGE[1]->COLONNE[1]->ADDCSS("WIDTH", "100%"); $MONSITE3->PAGE[1]->COLONNE[1]->ADDCSS("HEIGHT", "30PX"); $MONSITE3->PAGE[1]->COLONNE[1]->ADDCSS("FLOAT", "LEFT"); $MONSITE3->PAGE[1]->COLONNE[1]->ADDCSS("MARGIN-BOTTOM", "15PX"); $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("WIDTH", "100%"); $MONSITE3->PAGE[1]->COLONNE[2]->ADDCSS("PADDING", "20PX"); $MONSITE3->PAGE[1]->COLONNE[2]->ADDCSS("MARGIN-TOP", "20PX"); $MONSITE3->PAGE[1]->COLONNE[2]->ADDCSS("MARGIN-LEFT", "50PX"); $MONSITE3->PAGE[1]->COLONNE[2]->ADDCSS("FLOAT", "LEFT"); Cf page2_sitemartinique Rosalie Virginie – Session DI |Décembre2008 35
  • 36. Rosalie Virginie – Session DI |Décembre2 |Décembre2008 36
  • 37. 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(5, "", "", "", "TITRE3", "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 $MONSITE3->PAGE[2]->COLONNE[2]->ADDBOITE(1, "", "", "", "TITRE", "SIMPLE", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[2]->ADDBOITE(2, "", "", "", "IMAGE", "SIMPLE", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[2]->ADDBOITE(3, "", "", "", "TITRE2", "SIMPLE", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[2]->ADDBOITE(4, "", "", "", "INGREDIENT", "SIMPLE", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[2]->ADDBOITE(5, "", "", "", "TITRE3", "SIMPLE", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[2]->ADDBOITE(6, "", "", "", "PREPARATION", "SIMPLE", "CLASS"); Rosalie Virginie – Session DI |Décembre2008 37
  • 38. //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[3]->ADDCONTENU(1, "TITRE2", "INGREDIENTS", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[2]->BOITE[4]->ADDCONTENU(1, "INGREDIENTS", "RHUM, SUCRE DE CANNE, CITRON VERT", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[2]->BOITE[5]->ADDCONTENU(1, "TITRE3", "PREPARATION", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[2]->BOITE[6]->ADDCONTENU(1, "PREPARATION", "MELANGER LE TOUT ET SURTOUT N'EN N'ABUSEZ PAS!", "CLASS"); PAGE 3 – COLONNE 3 //COLONNE 3-> AJOUT DES 6 BOITES $MONSITE3->PAGE[2]->COLONNE[3]->ADDBOITE(1, "", "", "", "TITRE", "SIMPLE", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[3]->ADDBOITE(2, "", "", "", "IMAGE", "SIMPLE", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[3]->ADDBOITE(3, "", "", "", "TITRE2", "SIMPLE", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[3]->ADDBOITE(4, "", "", "", "INGREDIENT", "SIMPLE", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[3]->ADDBOITE(5, "", "", "", "TITRE3", "SIMPLE", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[3]->ADDBOITE(6, "", "", "", "PREPARATION", "SIMPLE", "CLASS"); //AJOUT DE CONTENU AUX 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[3]->ADDCONTENU(3, "TITRE2", "INGREDIENTS", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[3]->BOITE[4]->ADDCONTENU(4, "INGREDIENTS", "POULET, CURRY, LAIT DE COCO, SEL, POIVRE", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[3]->BOITE[5]->ADDCONTENU(5, "TITRE3", "PREPARATION", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[3]->BOITE[6]->ADDCONTENU(6, "PREPARATION", "BLA BLA BLA BLA TRO BON! SURTOUT CELUI QUE JE FAIS!", "CLASS"); PAGE 3 – COLONNE 4 //COLONNE 4 -> AJOUT DES 6 BOITES $MONSITE3->PAGE[2]->COLONNE[4]->ADDBOITE(1, "", "", "", "TITRE", "SIMPLE", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[4]->ADDBOITE(2, "", "", "", "IMAGE", "SIMPLE", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[4]->ADDBOITE(3, "", "", "", "TITRE2", "SIMPLE", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[4]->ADDBOITE(4, "", "", "", "INGREDIENT", "SIMPLE", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[4]->ADDBOITE(5, "", "", "", "TITRE3", "SIMPLE", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[4]->ADDBOITE(6, "", "", "", "PREPARATION", "SIMPLE", "CLASS"); //AJOUT DE CONTENU AUX 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[3]->ADDCONTENU(1, "TITRE2", "INGREDIENTS", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[4]->BOITE[4]->ADDCONTENU(1, "INGREDIENTS", "RHUM, ORANGES, CANNELLE, ET ...", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[4]->BOITE[5]->ADDCONTENU(1, "TITRE3", "PREPARATION", "CLASS"); $MONSITE3->PAGE[2]->COLONNE[4]->BOITE[6]->ADDCONTENU(1, "PREPARATION", "TRO TRO BON", "CLASS"); Rosalie Virginie – Session DI |Décembre2008 38
  • 39. CSS DE LA PAGE 3 $MONSITE3->PAGE[2]->ADDCSS("FONT-FAMILY", "ARIAL"); $MONSITE3->PAGE[2]->ADDCSS("FONT-SIZE", 14); //COL1 $MONSITE3->PAGE[2]->COLONNE[1]->ADDCSS("WIDTH", "22%"); $MONSITE3->PAGE[2]->COLONNE[1]->ADDCSS("FLOAT", "LEFT"); $MONSITE3->PAGE[2]->COLONNE[1]->ADDCSS("MARGIN-BOTTOM", "20PX"); $MONSITE3->PAGE[2]->COLONNE[1]->ADDCSS("PADDING", "10PX"); $MONSITE3->PAGE[2]->COLONNE[1]->ADDCSS("MARGIN-LEFT", "6PX"); $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("DISPLAY", "INBLOCK"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[2]->ADDCSS("WIDTH", "220PX"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[2]->ADDCSS("BACKGROUND-COLOR", "#228B22"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[2]->ADDCSS("FLOAT", "LEFT"); //CSS TITRE 2 $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[3]->ADDCSS("DISPLAY", "INBLOCK"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[3]->ADDCSS("WIDTH", "220PX"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[3]->ADDCSS("HEIGHT", "30PX"); $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"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[3]->ADDCSS("FLOAT", "LEFT"); //CSS INGREDIENTS $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[4]->ADDCSS("DISPLAY", "INBLOCK"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[4]->ADDCSS("WIDTH", "220PX"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[4]->ADDCSS("HEIGHT", "50PX"); Rosalie Virginie – Session DI |Décembre2008 39
  • 40. $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[4]->ADDCSS("BACKGROUND-COLOR", "#228B22"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[4]->ADDCSS("FONT-SIZE", "12PX"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[4]->ADDCSS("FONT-COLOR", "#FFF"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[4]->ADDCSS("FONT-WEIGHT", "BOLDER"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[4]->ADDCSS("FLOAT", "LEFT"); //CSS TITRE 3 $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[5]->ADDCSS("DISPLAY", "INBLOCK"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[5]->ADDCSS("WIDTH", "220PX"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[5]->ADDCSS("HEIGHT", "30PX"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[5]->ADDCSS("FONT-SIZE", "14PX"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[5]->ADDCSS("FONT-COLOR", "#228B22"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[5]->ADDCSS("FONT-WEIGHT", "BOLDER"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[5]->ADDCSS("FLOAT", "LEFT"); //CSS PREPARATION $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[6]->ADDCSS("DISPLAY", "INBLOCK"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[6]->ADDCSS("WIDTH", "220PX"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[6]->ADDCSS("HEIGHT", "100PX"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[6]->ADDCSS("BACKGROUND-COLOR", "#228B22"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[6]->ADDCSS("FONT-SIZE", "12PX"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[6]->ADDCSS("FONT-COLOR", "#FFF"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[6]->ADDCSS("FONT-WEIGHT", "BOLDER"); $MONSITE3->PAGE[2]->COLONNE[1]->BOITE[6]->ADDCSS("FLOAT", "LEFT"); Cf page3_sitemartinique Rosalie Virginie – Session DI |Décembre2 |Décembre2008 40
  • 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