Résumé 3 Abstract 4 Introduction 5 Présentation de la société 6 Objet et présentation du projet de stage 8 Présentation du projet 8 Réalisation du projet 8 Audit d’un site «concurrent»





télécharger 101.01 Kb.
titreRésumé 3 Abstract 4 Introduction 5 Présentation de la société 6 Objet et présentation du projet de stage 8 Présentation du projet 8 Réalisation du projet 8 Audit d’un site «concurrent»
page1/2
date de publication02.10.2017
taille101.01 Kb.
typeRésumé
m.20-bal.com > droit > Résumé
  1   2
http://www.ricoud.com/memoireiut/iut.jpg




CHIRON Armand

Licence professionnelle MATIC

Année 2008

Memoire de stage
LE MONDE DU BIO
http://www.lesecretnaturel.com/image%201.png

« Conception d'un site internet non marchand

sur l'actualité des produits biologiques et cosmétiques »


Maître de stage : M. HILDENE Gaëtan

Tuteur de stage : Mme. DE FRAISSINETTE Agnès

Durée du stage : 16 semaines (25/03/2008 au 11/07/2008)

Remerciements

Je tiens à profiter de ce mémoire pour exprimer mes plus vifs remerciements envers tous ceux qui ont, à leur manière, contribué à rendre ce stage si intéressant et enrichissant.

Je remercie l’ensemble des employés de la société le Monde Du Bio pour son accueil, son soutien et sa bonne ambiance.

Je remercie mon tuteur de stage M. Hildène Gaëtan pour m’avoir donné l’opportunité de m’exercer et d’appliquer mes connaissances sur un véritable projet. Je le remercie aussi pour sa constante disponibilité à mon égard et pour m’avoir donné la chance d’effectuer un stage aussi riche d’enseignements.

Je tiens également à remercier les professeurs de l’IUT de Tours qui m’ont apporté certaines des connaissances nécessaires au bon établissement de ce projet.

SOMMAIRE 2

Résumé 3

Abstract 4

Introduction 5

Présentation de la société 6

Objet et présentation du projet de stage 8

Présentation du projet 8

Réalisation du projet 8

Audit d’un site  « concurrent » 10

Présentation générale 11

Avantages et inconvénients 13

Réalisation du site internet « Avenue-Bio » 14

Les outils et langages utilisés 14

Installation de l’environnement 15

Découpage du design 15

Création des bases de données 19

Création des pages HTML et PHP 21

Les comptes utilisateurs 22

La construction des formulaires 24

La fonction de recherche 26

Le référencement 27

L’URL Rewriting 28

Réalisation d’un « back-office » 29

Aperçu général 29

Insertion des données 31

Modification des données 33

Le contenu du site 35

Retouches photos 36

Conclusion 39

Lexique 40

Bibliographie 42

Annexes 43

Résumé

Ce dossier décrit mon stage effectué au sein de la société Le Monde Du Bio, société de services spécialisée dans la vente de produits bio et cosmétiques par correspondance.

Mon projet consistait en la création d'un site internet d'actualité sur les produits naturels et sur l'environnement écologique en générale, ainsi qu'à mettre en application mes connaissances pour améliorer la visibilité du site internet mondebio.com sur le web.

Le site internet dont on m'a confié la réalisation a pour objectif de familiariser les internautes aux nouvelles modes de consommations de produits quotidiens tout en préservant l'environnement avec des articles d'actualité et des dossiers thématique portant sur l'utilisation de produits bio. L'intérêt d'un tel site internet est de faire évoluer la présence de Le Monde Du Bio au delà de la simple vente, et d'apporter aux internautes davantage d'informations et de conseils sur le sujet.

Ce document comporte dans une première partie la présentation de l’environnement du stage, dans une deuxième partie les cahiers des charge des projets et dans une troisième une synthèse de ce que ma présence a pu apporter à une telle société.

La conclusion présente une évaluation du travail effectué ainsi qu’un un bilan personnel.

Mots clés : PHP, MySql, JavaScript, Web, Newsletter, Hébergement, Référencement, Audit

Abstract

This essay describes my internship within the company « Le Monde Du Bio », which is a services company specialized in organic products and cosmetics online selling.
My project was to create a website of news about natural products and ecological environment and to implement my knowledge to improve the visibility of the « mondebio.com » website on the web.

The aim of the website I had to realize is to familiarize users with new modes of consumption of everyday products while preserving the environment with news articles and thematic issues involving the use of organic products . The interest of such a website is to evolve the presence of Le Monde Du Bio beyond the simple sale, and make the Internet more information and advice on the subject.
 
This document includes in the first part the presentation of the internship, in a second part the different achievements and in a third a synthesis about what my presence could bring to such a society and to myself.

The conclusion provides an evaluation of my woork and a personal making-up.

Keywords: PHP, MySql, JavaScript, Web, Newsletter, Logging, Referencing, Audit

Introduction

Dans le cadre de ma formation et en vue de l’obtention de la Licence Professionnelle Marketing et Nouvelles Technologies de l’Information et de la Communication (MATIC), j’ai été amené à effectuer un stage de quatre mois dans le service informatique de l’entreprise « Le Monde Du Bio ».

Le sujet principal de ce stage était la conception d’un site Internet. Tout d’abord, l’enjeu du stage m’a semblé particulièrement intéressant. Le monde de l’Internet est un sujet qui m’intéresse grandement et sur lequel je souhaiterais m’orienter professionnellement par la suite.

D’autre part, la mise à l’épreuve du savoir théorique dans ce projet relevait de l’innovation et demandait de l’imagination et de la créativité.

En effet, mon stage devait permettre de réaliser un site Internet en plus de celui déjà existant mais portant sur l’actualité et les conseils d’utilisation de produits naturels contrairement au site « mondebio.com » qui lui est un site marchand.

Présentation de la société

Le monde du bio SARL

Société à responsabilité limité
Capital social : 8 000€
Dirigeant : Dumond Guillaume
Adresse du siège social : Rue de la Grange Quillet, 37 700 St Pierre des Corps
Téléphone : 0954 410 410
Fax : 02 47 44 94 56

La société « Le Monde Du Bio » a été fondée en 2006 et compte aujourd’hui huit employés.

Il s’agit d’une société qui exerce son commerce sur Internet par le biai de son site « www.mondebio.com », mais qui dispose tout de même d’une boutique réelle située à Saint Pierre des Corps (37700).

Objet du site

Le site internet « www.mondebio.com » est un site de commerce électronique accessible par le réseau Internet. Il permet de proposer à la vente des produits naturels et biologiques à des internautes ou utilisateurs naviguant sur le site.

Editeur : Le site mondebio.com est produit par Le Monde du Bio SARL

Site hébergé par OVH

L’équipe est constituée de :

  • Dumond Guillaume (Dirigeant)

  • Legard-Pasquier Angélique (Responsable d’achat)

  • Hildène Gaëtan (Informaticien)

  • Droubitch Jacques (Comptable)

Quatre personnes s’occupent de la préparation des commandes, dont une à plein temps et trois autres qui sont en formation d’apprentissage et alternent entre la société et leur centre de formation.

Plan d’accès :



c:\documents and settings\manman\bureau\sans titre-1.jpg

Objet et présentation du projet de stage

Présentation du projet

L'Internet a depuis plusieurs années pris une place prépondérante dans notre société. Cette nouvelle technologie de l’information a bouleversé les entreprises et a donné naissance à de nouvelles demandes et attentes.

Les entreprises qui pratiquent du commerce par le biais d'Internet doivent continuellement s'adapter aux nouvelles technologies, aux nouveaux besoins, et aux nouvelles méthodes de communication.

La société « Le Monde Du Bio » concentre l'essentielle de sa communication sur internet, c'est pourquoi la plus grande partie des clients proviennent de moteurs de recherches, ou de sites affiliés.

La société avait depuis quelques mois pour projet de développer un nouveau site à caractère non commercial mais qui engendrerait une augmentation du nombre de visites du premier (site de vente)

Dans cette perspective, mon projet était de réaliser un nouveau site internet portant sur l'actualité des produits naturels en parallèle au site commercial déjà existant afin d'étendre l'activité au delà de la simple vente, améliorant ainsi la notoriété de « MondeBio.com ».

Réalisation du projet

Les différentes étapes du projet :

La création d'un nouveau site internet nécessite au préalable une étude de ce qui a déjà été fait dans ce domaine, ainsi que des moyens mis à notre disposition pour y parvenir.

J'ai effectué des recherches sur le web concernant les sites internet qui proposent des articles et des produits naturels et environnementaux, et observé quels étaient leurs points forts et points faibles, qu'est-ce qui faisait leur notoriété et leur convivialité, tout en cherchant par quel moyens améliorer leurs défauts.

Parmi les nombreux sites parcourus, l'un d'eux semble parfaitement correspondre aux attentes du site à réaliser, c'est pourquoi j'en ai effectué un court audit.

Tout en suivant l'exemple de sites qui ont déjà fait leurs preuves sur le net, la création d'un nouveau site repose sur l'ensemble des étapes qui se suivent les unes les autres mais dans un ordre bien précis.

En tout premier lieu, il est important de noter quels sont les logiciels dont nous disposons pour réaliser l'ensemble du site, aussi bien au niveau de son design, de son codage, de sa mise en ligne, son exécution...

Design : Adobe Photoshop Illustrator CS2, Macromedia Flash MX

Codage : EditPlus 3

Émulation PHP : EasyPHP 1.8.0.1

FTP : FTP Expert 3

Test : Microsoft Internet Explorer 5, 6 ,7 , Mozilla Firefox 2

Les différentes parties qui séparent la conception du site peuvent se présenter ainsi:

  • Design et découpage des différents éléments graphiques du site

  • Création des pages HTML pour structurer les éléments graphiques

  • Création des bases de données (bases MySQL)

  • Intégration de scripts PHP dans les pages HTML pour communiquer avec les bases de données:

    • Création de sessions avec des comptes utilisateurs

    • Création des formulaires

    • Intégration des articles et dossiers


Audit d'un site « concurrent »

Les recherches sur Internet permettent de trouver un très grand nombre de site concernant les produits biologiques et cosmétiques, mais la plupart de ces sites sont à caractères commerciaux. Il existe en effet une importante concurrence entre les différents revendeurs qui se positionnent sur le net. En revanche, peu de sites n'ont pour objectif que de diffuser l'actualité des produits naturels en générale sans avoir de but lucratif.

Toutefois l'un d'eux a attiré mon attention par rapport aux attentes de l'entreprise « Le Monde Du Bio » et aux objectifs que doit remplir ce nouveau site, il s'agit du site internet « www.chacunsonbio.fr ».

Fiche technique:

Le site « chacunsonbio » a été conçu en 2008 par la société LCRL

Éditeur LCRL

104-112 Avenue de la résistance

93100 MONTREUIL

SAS au capital de 40.000 €

N° SIRET : 501 582 332 00018

N° TVA intra : FR73 01 501 582 332

Hébergeur www.ovh.com

Présentation générale



D'un point de vue esthétique, le site « chacunsonbio » est attrayant, les formes sont simples et efficaces, la disposition des éléments sont favorables à une bonne visibilité et l'ensemble des couleurs est plutôt bien agencé.

Détails des éléments graphiques :

Le logo :

Il est simple et efficace, avec des formes et des couleurs qui rappellent les produits naturels et l'environnement. Sa lisibilité se fait immédiatement sans difficultés.



Le menu :

Le menu se présente sous forme de barre horizontale dont chaque bouton est encadré, le fond de se cadre changeant de couleur au survol de la souris. Il n'est pas très élaboré esthétiquement mais permet une navigation intuitive et immédiate.

Menu classique :



Menu au survol de la souris :



La partie centrale :



Cette partie se décompose en trois sous-parties qui sont la colonne de gauche qui concerne l’internaute, un cadre permettant de se connecter à son compte personnalisé, ainsi que des éléments lui permettant de participer à la vie du site. Au centre, on peut visualiser les dernières actualités, puis dans la partie de droite plusieurs cadres publicitaires.

Avantages et inconvénients

Le site “ Chacunsonbio ” ne présente pratiquement aucun gros défauts, on ne peut lui repprocher qu’un menu de navigation un peu trop simpliste et d’un design médiocre. Le menu pourrait intégrer des listes déroulantes au survol de la souris qui donneraient aux visiteurs un moyen de se rendre directement dans certaine rubrique du site. D’autre part, les publicités par leur nombre et leur taille peuvent très rapidement devenir envahissentes et repousser les visiteurs.

Parmis les bon points à retenir et à partir desquels il serait bon de s’inspirer sont sa simplicité de navigation et sa rapidité d’affichage, d’intégrer un cadre de connexion qui conserve sa place sur chacune des pages puis d’inciter les internautes à participer au site.

Réalisation du site internet « Avenue-Bio »

Les outils et langages utilisés

L’ensemble des logiciels nécessaires à la création du site internet ont été :

  • EditPlus

  • Photoshop CS2

  • Flash MX

Le site a été conçu dans son intégralité avec un simple éditeur de texte, ce qui permet de réellement s’exercer et de comprendre les mécanismes de la programmation.

Les langages de programmation qui constituent le site se déclinent sous trois différents types : les scripts HTML qui permettent la mise en page des différents éléments graphiques et des textes, les scripts PHP qui servent à toutes les fonctions « intéractives » qui nécessites des variables, c’est à dire qui adaptent le site en fonction de son visiteur (sessions, formulaires, ...) ou tout ce qui se rapporte au contenu dynamique en générale, ainsi que toutes les informations provenant de la base de données. Puis dans un dernier temps on peut noter également l’utilisation du langage JavaScript qui permet lui aussi un contenu dynamique mais qui est directement exécuté sur l’ordinateur de l’internaute.

Un autre langage, nettement moins utilisé, a été requis pour les animations Flash, il s’agit de l’ActionScript, dont le code se place directement au sain des animations lors de leur création avec le logiciel Flash.

Installation de l'environnement

L’ ordinateurs que me confie la société « Le Monde du Bio » n’a pas des logiciels adaptés à mon projet. Il m’a donc fallu les installer sur mon poste. Mais en premier lieu j’ai dû choisir ceux que je devais ou pouvais installer - tout simplement parce que certains logiciels sont gratuits alors que d’autres nécessitent des licences d’utilisation.

Afin de travailler sur la conception d’un site internet, notament avec le langage de programmation PHP, il est nécessaire de simuler un serveur sur l’ordinateur, puisque PHP est un langage serveur qui ne s’éxecute pas sur l’ordinateur de l’internaute qui visite le site, c’est pourquoi un logiciel tel que EasyPHP doit préalablement être installé pour visionner en temps réel ce que l’on concoit.



Découpage du design

  • La bannière supérieure



Celle-ci se compose du logo du site situé sur la gauche, puis d’une animation à caractère publicitaire destinée à rediriger les visiteurs vers le site marchand « Le Monde du Bio » qui vente les atouts du site par son nombre de produits référencés ainsi que d’autres avantages commerciaux.

  • Le logo

f:\avenuebio\pics\logo_avenuebio.png

  • L’animation Flash







  • Le menu de navigation

Le menu du site est présenté de facon horizontale occupant la largeur de la page, et faisant apparaître un sous-menu déroulant lors du survol d’un des boutons avec la souris afin d’accéder instantanément aux différentes sous-catégories des rubriques du site.



Les textes des boutons sont légèrement grisés à l’état normal puis deviennent blanc lorsque le curseur de souris vient à les survoler, tandis que les boutons des sous-menus changent leurs couleurs de fond qui donne un effet d’éclaircissement lors du survol.

c:\documents and settings\manman\bureau\sans titre-2.jpg

c:\documents and settings\manman\bureau\sans titre-2.jpg

  • La partie centrale

La page d’accueil du site affiche les articles les plus récents de chaque rubrique du site, ainsi que les derniers messages du forum et des petites annonces. Elle s’articule sur trois colonnes qui contiennent les premières lignes des articles et certaines images provenant de ces derniers.



  • La partie droite

La partie droite de la page, qui reste en place quelle que soit la page du site sur laquelle se trouve le visiteur, développe les produits naturels les plus appréciés par les internautes et redirigent ces derniers sur les sites commerciaux qui en font la vente. Cette colonne affiche aussi bien des produits que différents boutiques, qui ont été noté par les visiteurs et sont classé par ordre de préférence.



Création des bases de données

Le site internet « AvenueBio » étant un site complexe avec de nombreuses rubriques et un contenu dynamique assez important, la base de données occupe une place primordiale aussi bien lors de sa conception que de son utilisation, puisqu’il s’agit de la partie avec laquelle on va communiquer sans cesse pour observer les actions des différents visiteurs sur les pages, et donc l’ensemble des statistiques, mais également pour effectuer l’ensemble des mises à jour sans avoir à intervenir à nouveau au niveau du code.

Les différentes tables de la bases de données sont interconnectées pour permettre d’identifier les éléments de manière unique. La base de données a par exemple une table nommée « rubriques » qui contient l’identifiant et le nom de chacune des rubriques (Beauté, Grossesse, Nutrition.. etc). C’est pourquoi la table « dossiers » a par conséquent un champs nommé « id_rubrique » qui va permettre de préciser à quelle rubrique appartient chacun des dossiers, sans avoir à indiquer durant chaque enregistrement le nom complet de la rubrique.

Ensemble des tables de la base (excepté celle du forum) :





Les informations de toutes les pages proviennent directement de la base de données. On peut observer sur l’image ci-dessus que la table « dossiers » contient les renseignements nécessaires pour stocker en mémoire les différents dossiers qui seront présents sur le site.

Ces dossiers disposent chacun d’un identifiant (id_dossier) afin d’être différencier, de la rubrique à laquelle il correspondent (id_rubrique), ainsi que des informations d’affichage et de classement telles que la date de leur parution, leurs titres, leurs contenus et éventuellement une image qui leur est associée.

Les autres tables de la base de données suivent plus ou moins ce modèle, c’est à dire avec toutes les données d’identification, les données de liaisons avec d’autres tables, puis les données concernant le contenu de chaque enregistrement.

Création des pages HTML et PHP

Une fois l’interface graphique « découpée » sous forme de cellules d’un tableau, il faut composer une page HTML qui intégre l’ensemble des différents éléments positionnés de manière spécifique. Mes connaissances en programmation HTML acquises au cours de mon DUT ainsi que celles acquises durant l’année de Licence Matic m’ont permis d’effectuer cette opération sans grande difficultés.

Le site conserve une architecture unique sur l’ensemble de ses pages, c’est à dire avec un tableau constitué de deux lignes horizontales dans la partie supérieure qui englobe le logo, l’animation Flash ainsi que le menu. Viennent ensuite en partie centrale un second tableau formé de deux colonnes, la première affichant le contenu des différentes pages selon la navigation, puis la colonne de droite qui affiche continuellement les articles préférés des internautes et des liens commerciaux.

Architecture simplifiée du site :



Ne s’agissant pas d’un site vitrine mais d’un site qui va évolué au jour le jour en fonction de son contenu et de ce qu’apporteront les visiteurs, le langage PHP est indispensable. Quasiment toutes les pages du site en sont pourvues puisque le contenu informationel s’adapte à chacun des visiteurs selon leurs préférences mais également affichent la majorité des textes et articles à partir d’une base de données.

Les comptes utilisateurs

La gestion multi-utilisateur permet comme son nom l'indique de gérer plusieurs comptes utilisateurs, et est de plus en plus utilisée sur les sites Web (marchand, jeux, ...etc), ainsi vous remplissez un formulaire une seule fois et grâce à un login et un mot de passe vous pouvez vous identifier auprès du serveur.



Pour cet exemple de gestion multi-utilisateur on utilise les sessions, et la sauvegarde des données de chaque utilisateur dans une base de données par le biais d'un formulaire d'inscription en HTML (voir plus bas la partie sur les formualires). Ce formulaire sera traité par le script PHP de la page subscribe.php, les deux scripts étant placés dans le même fichier PHP. Après il ne reste plus qu'à se logguer et on arrive sur la page d'accueil réservé aux utilisateurs inscrits.



Lorsque le visiteur tape son login et son mot de passe, les variables sont transmisent à une page nommée « verif.php » qui se charge de vérifier que le membre est bien présent dans la base de données puis vérifie également que le mot de passe correspond au login.

Qu'est ce que les sessions en PHP ?

Les sessions sont apparues depuis la version 4 du PHP, elles permettent de sauvegarder des informations (contenu dans des variables) sur le visiteur du site Web, sans perdre ces données entre plusieurs accés (lors de la navigation sur le site).

Avant de démarrer une session on peut indiquer un chemin vers lequel les sessions seront sauvegardées et chargées grâce à la fonction session_save_path("chemin_de_la_session").

Le principe est très simple, une session est crée lors de l'arrivée du visiteur avec la fonction session_start() (cette fonction retourne toujours true (vrai)), alors coté serveur web un numéro d'identificateur unique est conçu pour cet utilisateur, ce numéro unique correspond au nom du fichier qui est enregistré sur le disque dur dans un répertoire temporaire, ce fichier contient les variables enregistrées avec la fonction session_register("nomdelavariable"), cette fonction retourne true (vrai) si la variable à été correctement enregistrée.

Pour supprimer une variable de la session en cours on utilise la fonction session_unregister("nomdelavariable"), on peut aussi vérifier si une variable a été enregistrée avec la fonction session_is_registered("nomdelavariable") qui retourne true (vrai) si une variable a été enregistrée ou false (faux) dans le cas contraire.

L'enregistrement des variables dans le fichier se fait à la fin du script PHP, du coté client (le visiteur) un cookie est créé et contient le numéro de session, si les cookies ne sont pas supportés par le navigateur du visiteur l'identificateur de session et passé par l'URL du site (exemple: http://titan.nexen.net/page2.php?PHPSESSID=f08b925af0ecb52b), pour que le numéro de session soit automatiquement passé en paramètre à l'URL de manière transparente il faut que le PHP soit compilé avec l'option --enable-trans-sid (la version PHP de EasyPHP1.1.0 n'a pas été compilé avec cette option).

On peut aussi donner un nom à une session avec la fonction session_name("nom_de_la_session"), par défaut le nom de la session et PHPSESSID.

La session sera détruite automatiquement lorsque le visiteur quittera son navigateur, où la destruction peut être forcée avec la fonction session_destroy() qui détruira toutes les données associées à cette session.

Construction des formulaires

Les formulaires sont indispensables et en grand nombre dans un site internet tel que celui-ci car ils permettent aux visiteurs de se créer un compte, mais également de participer au contenu du site en y ajoutant des articles ou bien en déposant des petites annonces ou recettes de cuisine.. etc.

Les formulaires sont créer en HTML mais peuvent inclure des variables PHP lorsque les informations contenu dans le formulaire proviennent par exemple de la base de données.



L’exemple de formulaire ci-dessus est le formulaire d’inscription, sa construction est simple à mettre en oeuvre car il ne nécessite pas de récolter des données externes puisqu’il s’agit d’un formulaire d’entrée d’informations et non de modifications comme nous allons le voir prochainement. Afin de réduire la taille des pages au niveau du code, les traitements des formulaires, c’est à dire l’interprétation des données entrées par l’utilisateur et leur enregistrement dans la base de données, s’effectuent au sain de la même page avec une variable PHP qui va communiquer à la page de formulaire à quelle étape de l’enregistrement elle se situe.

Il convient au niveau des formulaires d’adapter le langage PHP aux différentes étapes de leur processus. On a régulièrement l’habitude d’observer ces techniques sur la plupart des sites web lorsque l’adresse URL de la page sur laquelle on navigue évolue en fonction des actions de l’internaute avec de multiples extensions :



Tel que l’on peut observer sur l’image ci-dessus, la page d’inscription (subscribe.php) affiche le formulaire d’inscription d’origine lorsque l’adresse ne comporte aucune extension. En revanche on peut noter que la page est en cours de traitement, avec par exemple l’apparition de messages d’avertissement signalant au visiteur qu’il a oublié de préciser certaines informations dans le formulaire ou que la confirmation du mot de passe est erronée, à la vue des extensions comme ici « ?chk » et « &verif=1 ». Les URL peuvent contenir à la suite du nom de la page (subscribe.php) un point d’interrogation « ? » qui signifie que la page prend en compte un ou plusieurs paramètres. Ces différents paramètres, s’il y’en a plusieurs, sont séparés par une esperluette « & » et peuvent également prendre une valeur après le signe égal (=), numérique ou en toutes lettres . Dans le cas présent l’adresse nous indique que la page prend en compte un paramètre nommé « chk » qui indique que la page vérifie les informations soumises (chk pour check, verification en anglais), puis qu’un seconde paramètre nommé « véri f » intervient de même dans l’éxécution de la page et que celui-ci est de valeur « 1 ».

Les formulaires sont nombreux sur l’ensemble des pages car la participation des visiteurs est l’un des premiers objectif du site. Les rubriques telles que les recettes, les petites annonces, les revendeurs, les articles, les dossiers, le forum.. etc



La fonction de recherche

Pour l’instant, seul la partie « recettes » du site dispose d’un module de recherche, c’est à dire d’un moteur de recherche interne au site. Les visiteurs ont à leur disposition dans cette rubrique un champ spécifique pour la recherche immédiate d’une recette selon le ou les mots clé qu’ils tapent, ainsi que par le nom de l’auteur de la recette s’ils le connaissent.

Ce genre de fonction fait typiquement appel à la programmation PHP, car il est question d’enregistrer dans des variables les mots clés entrés par l’utilisateur, puis de comparer ces derniers au contenu de l’ensemble des recettes de la base de données, après y avoir établi une connexion et une recherche en SQL pour analyser les champs de la table.



A ce champ de recherche a été ajouté un lien comme on en a l’habitude de voir sur de nombreux site qui permet une recherche plus détaillée. Dans le cas présent, celle-ci sert à taper plusieurs mots clés et le nom de l’auteur de la recette. L’ensemble des données de la table « recettes » ne comportent pas assez d’élément pouvant supporter une recherche plus approfondie.



Le référencement

Le référencement est la première étape d'une campagne de marketing sur Internet.
Les outils de recherche (annuaires, moteurs) sont désormais indispensables pour rechercher une information sur internet. L’acte de référencement est donc devenu incontournable dans la promotion web, dont le principal objectif est d'inscrire le site web dans les principaux outils de recherche, et le faire apparaître dans les premiers résultats liés à votre secteur d'activité.

Ne pas confondre référencement et positionnement.

Le référencement est une déclaration (soumission ou inscription) de votre site dans les moteurs et annuaires de recherche. Il ne garantit pas le bon classement. En soi le référencement n'est qu'une simple déclaration de l'existence de votre site. Un robot passera, l'indexera. Le positionnement quant à lui, est un référencement doublé d'une optimisation de votre site sur plusieurs niveaux. Ce référencement "Pro" permet une meilleure indexation de votre site par les robots et de ressortir parmi les premiers résultats à la requête contenant vos mots-clefs.

Parmis les nombreuses méthodes et astuces qui permettent d’améliorer le référencement et le positionnement, la première fut de rensigner les pages du site par des mots clé spécifiques :



















Avenue-Bio : Toute l’actualité cosmétique bio certifiée BDIH, Cosme bio,...

L’URL Rewriting 

En plus des mots clés, une méthode nommée l’URL Rewriting a beaucoup d’influence sur la façon dont les moteurs de recherches analysent les pages.

L'URL Rewriting est une technique utilisée pour optimiser le référencement des sites dynamiques (utilisant des pages dynamiques). Les pages dynamiques sont caractérisées par des URL complexes, comportant en général un point d'interrogation, éventuellement le caractère & ainsi que des noms de variables et des valeurs comme on l’a vu précemment avec les formulaires.

Exemple : article.php?id=12&page=2&rubrique=5
Dans cet exemple, le fichier article.php est utilisé pour afficher un article dont le texte vient d'une base de données. C'est un fichier générique, qui peut afficher n'importe quel article, de n'importe quelle rubrique, page par page. Ici on cherche à afficher la page 2 de l'article numéro 12 qui fait partie de la rubrique 5.

Le problème est que certains moteurs n'indexent pas les pages ayant des URL de ce type. Google par exemple n'indexe en général que les pages ayant au maximum 2 paramètres dans l'URL : il n'indexe donc pas une page comme celle de notre exemple.

Grâce à l'URL Rewriting, Google ainsi que n'importe quel robot va pouvoir indexer les pages dynamiques. L'intérêt est par exemple d'avoir plusieurs milliers de pages de votre site indexées dans Google (le catalogue de tous vos produits, votre forum, etc.).

Principe de l'Url rewriting

Le principe est très simple : sur un site qui utilise l'URL Rewriting, on ne peut plus se rendre compte qu'il est basé sur des pages dynamiques. En effet, les URL sont "propres" : elles ne contiennent plus tous les caractères spéciaux comme ? ou &. Personne ne peut savoir qu'il s'agit de pages dynamiques, que ce soit un robot d'indexation ou un internaute.

Quand un internaute demande une page, le serveur va appliquer une règle de réécriture d'URL (décrite dans un fichier .htaccess) et renvoyer la même chose que si l'internaute avait demandé la page article.php?id=12&page=2&rubrique=5.

Remarque : même si l'URL Rewriting est mis en place, on peut toujours accéder aux pages en utilisant l'ancienne URL. Il faut donc veiller à changer tous les liens à l'intérieur de son site pour qu'ils soient tous au nouveau format...

Réalisation d’un « back-office »

Ce que l’on entend par « back-office » concernant la création d’un site internet est un programme concu de manière à permettre à l’entreprise qui gère ce site d’intervenir au niveau du contenu de se site sans pour autant reprogrammer les pages web une par une, mais en utilisant des pages « administratives » qui sont directement reliées à la base de données.

En prenant exemple sur les pages « admin » déjà existentes du site « MondeBio.com », la réalisation de ce programme, ou plus simplement de ce « mimi-site », consiste à répertorier sur chacune de ses pages les différentes rubriques de la base de données. Cela permet à l’administrateur d’oberser en quelques cliques l’activité globale du site, son nombre de membres, de visiteurs, les derniers articles et dossiers, les petites annonces postées.. etc

Aperçu général



L’objectif d’une partie administration telle que celle-ci est d’accélérer la gestion quotidienne du site, c’est pourquoi elle est d’un design le plus simple possible et n’est constitué seulement du menu supérieur et de la partie centrale d’affichage.

La conception de chacune des pages se divise en trois étapes :

  • La connexion à la base de données pour afficher tous les éléments dans un tableau HTML

  • La création d’un formulaire d’insertion et son traitement

  • La création d’un formulaire de modification et son traitement

Récupération des informations depuis la base de données :

En prenant l’exemple de l’aperçu ci-dessus qui est la page des « membres », le but est de développer un script qui va aller chercher l’ensemble des informations contenu dans la table « users » de la base de données puis de les afficher dans un tableau que l’on peut trier selon chacune des colonnes.

La table « users » contient les champs suivant :

c:\documents and settings\manman\bureau\sans titre-1.jpg

Chacun des champs est récupéré depuis la base de données puis intégrer comme titre de colonne dans la page « membres » de l’administration :



Ils sont transformés en liens HTML pour trier le tableau selon différents critères. Les données sont triées par défaut en fonction de leur identifiant unique (ID), mais on peut par exemple en cliquant sur « Sexe » trier les membres par sexe, dans un sens, puis dans l’autre s’il on clique à nouveau.

Insertion des données

L’insertion de données dans la table sans passer par la page de gestion SQL est l’un des premiers objectifs d’un « back-office » tel que celui-ci. Il est effectivement nettement plus rapide d’ajouter une recette dans la partie « recettes » grace au formulaire d’insertion plutôt que de devoir se connecter en tant qu’administrateur sur le site et d’aller dans la rubrique « ajouter une recette » ou même de se connecter à la base de données.



La création du formulaire d’insertion reprend les éléments de la table concernée puis s’adapte aux différents type de données. Dans l’exemple présent, la table « recettes » est formée des champs (ID,Rubrique,Date,Auteur,Nom,Texte,Image,Semaine,Valide).

Comme on l’a vu précédemment concernant la création de la base de données, les tables sont interconnectées. Ce qui apporte un avantage considérable puisque dans le formulaire présent, seules les rubriques déjà présentes dans la tables « rubriques » apparaitront dans le menu de selection. Il en va de même pour les auteurs, dont la liste est générée à partir de la table des membres. Ces listes déroulantes formées en fonction du contenu d’autres tables permet de ne pas enregistrer d’erreurs ou d’apporter de confusions dans les données, car selon toute logique, seuls les auteurs déja enregistrés sont concernés par l’ajout d’une recette ou autre contenu. Le choix de la rubrique se fait par une liste également pour ne pas avoir de doublons ou de rubriques qui se ressembles, les rubriques étant créées préalablement dans leur propre table.

Pour ajouter une recette, il faut renseigner les champs « rubrique » et « auteur » qui reprennent les valeurs situées dans les tables « rubriques » et « membres », puis les champs « nom », « texte », « image », « semaine, » et « valide ». Les champs « nom », « texte » et « image » sont libres et dépendent du contenu que l’on souhaite insérer, le champ « semaine » permet à la page du site « recettes de la semaine » de n’afficher que les recettes qui ont comme valeur « 1 » pour ce champs, enfin le champ « valide » sert à l’administrateur afin qu’il vérifie que le contenu apporté par les membres respectent les règles du site. Lors de l’insertion depuis le site par l’un des membres, ce champ est automatiquement sur « 0 » et n’apparait sur les pages qu’après validation.

A noter que l’insertion d’une image n’est pas obligatoire, c’est pour cela que le champ en question est grisé par défaut et devient actif lorsque l’on clique sur le bouton « avec ».

Les autres pages suivent le même principe en adaptant le contenu des tables et la formes des différents formulaires d’insertion, qui reprennent à chaque fois les informations qui dépendent d’autres tables sous formes de pré-selections (ex : les auteurs, les rubriques, nom des produits, ..etc)

c:\documents and settings\manman\bureau\sans titre-1.jpg

Modification des données 

En bout de chacune des lignes des tableaux sont placées deux petites icones qui servent à effectuer une modification des données de la ligne concernée ou à supprimer l’intégralité de la ligne.

c:\documents and settings\manman\bureau\sans titre-1.jpg

Lors du clique sur la croix afin de supprimer les données, un message de confirmation apparaît avant la suppression définitive pour ne pas perdre les informations en cas de clique par erreur. Le bouton en forme de crayon, quant lui, est relatif à cette partie et cocerne la modification des données. Le clique dessus redirige vers un formulaire de modification qui ressemble à quelques détails près au formulaire d’insertion, à l’exception du fait que celui-ci va aller chercher les informations déjà présentes dans les tables et sera afficher avec ses champs déjà remplis.

Pour expliquer un peu plus en détails, le bouton de modification du premier produit de la page « produits » (aperçu ci-dessus) va mener à la page suivante :



Le formulaire contient évidemment les mêmes champs que le formulaire d’insertion puisqu’il va simplement effectuer des modifications au sein de la base de données et en aucun cas créer de nouveax champs ou changer quelconque paramètres.

Comme on peut le voir sur l’aperçu ci-dessus, les champs contiennet les données qui sont déjà présentent pour ce produit afin que l’on puisse observer directement les modifications que l’on souhaite effectuer. On peut noter également que les images de la marque et du produit sont également affichées et peuvent être changer par un champ d’insertion de fichier, sans être forcer de transférer les images avec un logiciel FTP vers le serveur du site.

Pour les champs générés automatiquement par des données provenant d’autres tables comme la liste des membres ou des rubriques, une ligne de code permet à cette liste déroulante d’être par défaut selectionnée sur l’élément concerné par la modification. Par exemple, en cliquant sur le bouton « modifier » du deuxième dossier de la page « dossiers », le champs rubrique sera par défaut selectionné sur la rubrique « Grossesse et bébé » plutôt que sur le premier de la liste.

c:\documents and settings\manman\bureau\sans titre-1.jpg

Le contenu du site

Lorsque le site est terminé, il est bien évidemment vide de contenu, et cela est problématique car une fois mis en ligne et accessible à tous les internautes il ne sera pas attrayant.

Bien que les internautes soient les premiers participant aux contenus du site, et que l’ « avenir » du site, si on peut dire ainsi, repose sur le taux d’investissement qu’apporteront les internautes, le site doit avoir un contenu de « départ ». On en a tous fait l’expérience, malgré un design attrayant et de très bonnes idées, nous avons déjà fermer une page web car il nous paraissait inutile de s’atarder en raison d’un réel manque de contenu. Sachant qu’un véritable manque de contenu est synonyme d’un très bas nombre de visites.

Afin de combler les vides du site « Avenue-Bio », nous avons été autorisé à reproduire le contenu de deux revues de type papier. Il s’agit d’un échange dans le quel tout le monde y gagne, car cela fait de la publicité à ces revues sur le net, puis nous apporte un contenu de départ. Nous avons été en mesure de s’inspirer des revues « Nouveau Consommateur » et « Ecolomag ».

Les retouches photos

En parallèle de la conception du site internet « Avenue Bio », j’ai été amené à réaliser certaines retouches photo afin de mettre en ligne les nouveaux produits du site « Monde Bio ».

La société « Le Monde Du Bio » recoit régulièrement de nouveaux produits à tester ou dont elle a déjà fait les commande afin de les commercialiser. Seulement peu de ces nouveaux arrivages sont livrés avec des photographies des produits pouvant être directement mises en ligne sur le site, c’est pourquoi la société dispose d’un appareil photographique et d’un emplacement réservé à la prise de photo (fond totalement blanc bien éclairé). Une fois les photos des nouveaux produits réalisées, j’étais en charge de retouché ces photos pour améliorer les couleurs, le cadre, mais principalement de détourer au mieux possible les produits pour que les images et vignettes du site soient le plus propres possible. Enfin, pour que le droit des images soit respecter, on y insérer un filigramme au logo de la société. Ces retouches sont réalisées avec le logiciel Adobe Photoshop CS.

Photos originales :

f:\stage\img_0495b.jpg

f:\stage\img_0497b.jpg

f:\stage\img_0499b.jpg

Photos après retouches :

f:\stage\premi2.jpg

f:\stage\premi1.jpg

f:\stage\premib2.jpg

f:\stage\premib1.jpg

Conclusion

Le projet de ce stage s’est avéré plus long à réaliser qu’il ne parraissait, c’est pourquoi certaines études complémentaires qui auraient pu être intéressantes n’ont malheureusement été mises en oeuvres.

Je regrette de n’avoir eu le temps d’analyser les effets du site sur les internautes, de mesurer de manière générale son efficacité et de mettre en place des démarches pour améliorer sa notoriété.

Le projet initial de ce stage qui consistait à concevoir le site « www.avenue-bio.com » a toutefois abouti dans les temps, et la création d’un site internet d’une telle ampleur m’a apporté de nombreuses connaissances et méthodes de travail :

  • L’apprentissage de nombreuses techniques de programmation que je ne connaissais pas jusqu’alors.

  • Le fait de mener ce projet seul. Néanmoins, le fait d’être seul a été particulièrement enrichissant, car cela m’a permis de couvrir tous les problèmes pouvant apparaître durant un projet de cette envergure.

  • D’avoir une certaine liberté d’action dans la conception du site tout en étant assisté à dès que j’en ai le besoin.

  • Etre à présent capable de programmer un site internet dans son intégralité et y intégerer quasiment toutes les fonctionnalités dont un site peut dispoer.

D’un point de vue strictement personnel, la programmation est un domaine qui m’intéresse énormément et le déroulement de ce stage m’a apporté les connaissances indispensables afin de pouvoir m’orienter à l’avenir dans ce domaine.

Lexique

  1   2

similaire:

Résumé 3 Abstract 4 Introduction 5 Présentation de la société 6 Objet et présentation du projet de stage 8 Présentation du projet 8 Réalisation du projet 8 Audit d’un site «concurrent» iconRésumé Ce document est le référentiel du kit de gestion de projet...

Résumé 3 Abstract 4 Introduction 5 Présentation de la société 6 Objet et présentation du projet de stage 8 Présentation du projet 8 Réalisation du projet 8 Audit d’un site «concurrent» iconPrésentation du projet

Résumé 3 Abstract 4 Introduction 5 Présentation de la société 6 Objet et présentation du projet de stage 8 Présentation du projet 8 Réalisation du projet 8 Audit d’un site «concurrent» icon1. Généralités Présentation du projet

Résumé 3 Abstract 4 Introduction 5 Présentation de la société 6 Objet et présentation du projet de stage 8 Présentation du projet 8 Réalisation du projet 8 Audit d’un site «concurrent» iconDossier de présentation et de validation du sujet de projet

Résumé 3 Abstract 4 Introduction 5 Présentation de la société 6 Objet et présentation du projet de stage 8 Présentation du projet 8 Réalisation du projet 8 Audit d’un site «concurrent» iconParticipation du public Note de présentation du projet de texte

Résumé 3 Abstract 4 Introduction 5 Présentation de la société 6 Objet et présentation du projet de stage 8 Présentation du projet 8 Réalisation du projet 8 Audit d’un site «concurrent» icon1. Présentation du projet
«gagner» en mettant en place une base de données : augmenter les profits d’un café

Résumé 3 Abstract 4 Introduction 5 Présentation de la société 6 Objet et présentation du projet de stage 8 Présentation du projet 8 Réalisation du projet 8 Audit d’un site «concurrent» iconParticipation du public Note de présentation du projet de texte
«embouchure du Rizzanese» sur la commune de Propriano, afin de garantir l’équilibre biologique des milieux et la conservation des...

Résumé 3 Abstract 4 Introduction 5 Présentation de la société 6 Objet et présentation du projet de stage 8 Présentation du projet 8 Réalisation du projet 8 Audit d’un site «concurrent» iconProjet de protection de la forêt primaire d'Ambodiriana (ong adefa) Présentation de l’ong adefa

Résumé 3 Abstract 4 Introduction 5 Présentation de la société 6 Objet et présentation du projet de stage 8 Présentation du projet 8 Réalisation du projet 8 Audit d’un site «concurrent» iconRésumé Les travaux de la présente thèse prennent place dans le cadre...

Résumé 3 Abstract 4 Introduction 5 Présentation de la société 6 Objet et présentation du projet de stage 8 Présentation du projet 8 Réalisation du projet 8 Audit d’un site «concurrent» iconPartie 1: Présentation générale du cancer
«Présentation des facteurs de risque 6» que l’on appelle mutations qui surviennent lors de la duplication de





Tous droits réservés. Copyright © 2016
contacts
m.20-bal.com