Vous êtes sur la page 1sur 34

Rapport de projet

Sara Houmid
Titre professionnel Développeur Web et Web Mobile

Année scolaire : 2020

Conception et développement d’un site pour


l’adoption des animaux
Table des matières
I. Remerciements .............................................................................................................................................. 3
II. Contexte ......................................................................................................................................................... 4
III. Introduction.................................................................................................................................................... 4
IV. Modules couverts par le projet ...................................................................................................................... 5
V. Cadrage du projet ........................................................................................................................................... 6
1. Analyse du besoin ...................................................................................................................................... 6
2. Organisation du projet ............................................................................................................................... 7
VI. Partie fonctionnelle ........................................................................................................................................ 7
1. Maquettage de l’interface ......................................................................................................................... 7
2. Charte graphique ....................................................................................................................................... 9
3. Modélisation de la base de données ....................................................................................................... 10
4. Jeu d’essai et vérification ......................................................................................................................... 12
VII. Partie technique ........................................................................................................................................... 13
1. Arborescence du projet ........................................................................................................................... 13
2. Architecture du site public ....................................................................................................................... 14
3. Architecture du compte utilisateur .......................................................................................................... 15
4. Réalisation du frontend public ................................................................................................................. 15
5. Création de la base données .................................................................................................................... 23
6. Réalisation du backend compte utilisateur.............................................................................................. 23
7. Sécurité .................................................................................................................................................... 26
8. Le blog ...................................................................................................................................................... 27
VIII. Environnement technique ............................................................................................................................ 30
1. Synthèse ................................................................................................................................................... 30
2. Structure des pages avec HTML ............................................................................................................... 31
3. Décoration du contenu avec CSS ............................................................................................................. 31
4. Traitement des données avec PHP .......................................................................................................... 31
5. Dynamiser les pages avec Javascript........................................................................................................ 31
6. Framework Bootstrap .............................................................................................................................. 31
7. Bibliothèques ........................................................................................................................................... 31
8. Environnement de développement ......................................................................................................... 32
9. Le CMS Wordpress ................................................................................................................................... 32
IX. Benefit of English (ENG) ............................................................................................................................... 32
X. Conclusion .................................................................................................................................................... 34
1. Bilan ......................................................................................................................................................... 34
2. Points forts et axes d’amélioration .......................................................................................................... 34
3. Perspectives ............................................................................................................................................. 34

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 2
I. Remerciements
Je souhaite exprimer mes plus vifs remerciements au corps enseignant de l’institut GRETA pour la
qualité des cours proposés dans le parcours « Développeur Web et Web Mobile ».

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 3
II. Contexte
La situation actuelle de notre pays liée au nouveau virus COVID-19 a modifié notre façon de vivre et
changé notre perception du monde. Plusieurs animaux de compagnie se sont vus abandonnés par leurs
propriétaires par crainte de transmission du virus. Les refuges ont enregistré une hausse des abandons
et des milliers d’animaux sont menacés d’euthanasie. C’est dans ce contexte que j’ai choisi le thème
« adoption des animaux » pour mon projet personnel.

III. Introduction
L’objectif de mon projet personnel est de développer une application Web pour promouvoir l’adoption
des animaux de compagnie. Les utilisateurs pourront créer un compte et déposer des annonces. Les
internautes pourront chercher les annonces déposées grâce à un formulaire de recherche, et consulter
la fiche de l’animal à adopter pour avoir plus d’informations sur le processus à suivre.

Mon application Web contient principalement trois fonctionnalités :

❑ Compte utilisateur
• Enregistrement et connexion
• Déposer des annonces d’adoption
• Consulter et supprimer les annonces déposées
• Modifier les informations personnelles de l’utilisateur

❑ Formulaire de recherche
• Chercher des annonces d’adoption
• Trois critères de recherche (ville, espèce, race)

❑ Fiche de l’animal
• Informations de l’annonce
• Informations de l’animal à adopter
• Informations de contact

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 4
IV. Modules couverts par le projet

N° Module Compétences professionnelles Inclus

1 Maquetter une application

Réaliser une interface utilisateur Web statique et


2
adaptable

3 Développer une interface utilisateur Web dynamique

Réaliser une interface utilisateur avec une solution de


4
gestion de contenu ou e-commerce

5 Créer une base de données

6 Développer les composants d’accès aux données

Développer la partie back-end d’une application Web


7
ou Web mobile

Elaborer et mettre en œuvre des composants dans une


8
application de gestion de contenu ou e-commerce

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 5
V. Cadrage du projet
1. Analyse du besoin
L’analyse des besoins représente une étape primordiale lors de la réalisation d’un projet informatique
car elle permet de définir et cadrer les objectifs du projet en question. Une fois mon thème « adoption
des animaux » choisi, j’ai commencé par définir des objectifs clairs et réalisables pour mon application :

❑ Compte utilisateur

L’application Web contient une partie compte utilisateur qui permet aux utilisateurs de déposer une
annonce en remplissant un formulaire de dépôt d’annonce.

• Enregistrement et connexion

Les utilisateurs doivent s’enregistrer d’abord grâce à un formulaire d’enregistrement pour créer un
compte personnel. Un formulaire de connexion permet l’accès au compte personnel créé.

• Déposer des annonces d’adoption

Les utilisateurs inscrits et connectés peuvent déposer des annonces d’adoption et ainsi les partager
avec les internautes désirant adopter un animal de compagnie

• Consulter et supprimer les annonces déposées

Les utilisateurs inscrits et connectés peuvent consulter et supprimer les annonces d’adoption déposées

• Modifier les informations personnelles de l’utilisateur

Les utilisateurs inscrits peuvent à tout moment consulter et modifier leurs informations personnelles.

❑ Formulaire de recherche
• Chercher des annonces d’adoption

La partie publique contient un formulaire de recherche qui permet à toute personne de chercher les
annonces déposées par les utilisateurs inscrits.

• Trois critères de recherche (ville, espèce, race)

Les critères de recherche sont essentiellement la ville, l’espèce de l’animal et la race.

❑ Fiche de l’animal

Les critères de recherches sélectionnées et envoyés via le formulaire de recherche, affichent une liste
des animaux disponibles sous forme de cartes. La consultation d’une carte spécifique permet de
visualiser la fiche de l’animal concerné qui contient les informations suivantes :

• Informations de l’annonce
• Informations de l’animal à adopter
• Informations de contact

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 6
2. Organisation du projet
Lors de mon stage en entreprise, j’ai appris l’importance de diviser mon projet sous forme de plusieurs
tâches et estimer une durée de réalisation pour chaque tâche. Etant donné que la période de
réalisation du projet personnel est de 32 jours, j’ai utilisé le diagramme de Gantt qui permet de définir
les différentes étapes de mon projet et leur durée de réalisation. Cette manière d’organiser mon travail
m’a permis de garder les pieds sur terre et ne pas trop m’aventurer sur des fonctionnalités poussées
pour mon application Web.

Fig 1 : Diagramme Gantt du projet

VI. Partie fonctionnelle


1. Maquettage de l’interface
La phase de maquettage d’une application Web est un passage obligatoire lors du développement d’un
site Internet. Elle permet de donner une idée sur le résultat final attendu avant de déployer les moyens
pour développer un site Internet. Dans le cadre de mon projet personnel, j’ai commencé par créer les
maquettes de mon application Web aussi bien côté public que côté compte utilisateur.

Coté public j’ai dessiné 5 maquettes qui correspondent à :

⚫ Recherche des annonces


⚫ Résultat de la recherche
⚫ Fiche de l’animal
⚫ Page de connexion
⚫ Page d’enregistrement

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 7
Fig 2 : Maquette de la page recherche animal

Coté compte utilisateur j’ai dessiné 3 maquettes qui correspondent à :

⚫ Liste des annonces déposées


⚫ Dépôt d’une annonce
⚫ Changement des informations personnelles

Fig 3 : Maquette du compte utilisateur

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 8
2. Charte graphique
La charte graphique contient l'ensemble des règles fondamentales d'utilisation des signes graphiques
qui constituent l'identité graphique d'une application Web. La charte graphique s'applique à définir le
logo, les polices à utiliser, les choix de couleur, les icônes et d’autres éléments de design.

Pour mon projet j’ai défini les éléments graphiques suivants :

⚫ Couleurs

Mon application Web contient trois couleurs de base utilisées à différentes nuances :

Bleu
Vert
Orange

⚫ Fonts

Pacifico : J’ai utilisé le font « Pacifico » pour la création du slogan de mon logo.

Balsamiq : J’ai utilisé le font Google « Balsamiq » pour les titres.

⚫ Logo

Mon logo reprend les couleurs de base et le font « Pacifico ». Il se compose de deux illustrations « un
chat et un chien » et du slogan « Adopte moi ».

Le compte utilisateur contient également un logo avec les mêmes illustrations et le slogan « Adop
compte »

⚫ Background

La couleur blanche est la couleur par défaut de l’arrière-plan de toutes les pages.

⚫ Icones

J’ai utilisé les icones de la bibliothèque « fontawsome.js » avec des couleurs personnalisées.

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 9
3. Modélisation de la base de données
Les bases de données sont de nos jours d’une importance majeure, car ils permettent aux organismes
et entreprises de stocker différents types de données afin de les traiter ultérieurement. Parmi les
domaines d’utilisation pratique, les réservations (hôtel, billetterie) et les inventaires (stock, magasin).

MERISE est une méthode française de conception des bases de données, elle permet d’analyser et
modéliser les données ainsi que leurs traitements grâce à un ensemble de formalisme et de règles.
Dans le cadre de mon projet personnel j’ai conçu une base de données en utilisant la méthode MERISE
qui me servira d’emplacement pour enregistrer les annonces d’adoption déposées par les utilisateurs.

La modélisation d’une base de données est une phase très importante des projets informatique. Un
modèle bien défini permet une bonne gestion des données recueillies. Afin de concevoir ma base de
données, j’ai d’abord commencé par définir les entités de mon application Web, leurs propriétés et les
relations entres elles. Ensuite j’ai défini le MCD (Modèle Conceptuel de Données).

Fig 4 : Modèle Conceptuel de Données

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 10
Ma base de données se compose principalement de 4 entités qui permettent de stocker les
informations suivantes :

Entité Description

Animal Informations sur l’animal à adopter

Annonce Informations sur l’annonce d’adoption

Utilisateur Informations sur les utilisateurs qui déposent des annonces

Type animal Informations sur l’espèce de l’animal à adopter

Une fois mon modèle conceptuel élaboré, j’ai créé le MPD (Modèle Physique de Données)

Fig 5 : Modèle Physique de Données

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 11
4. Jeu d’essai et vérification
Afin de valider le bon fonctionnement de mon application Web j’ai défini un jeu d’essai sous forme
de tableau pour les fonctionnalités les plus importantes.

ID Description Résultat attendu Prérequis

Partie publique du site

- La page est affichée


- Accéder à la page de recherche
- Les listes déroulantes sont affichées
P1 - Renseigner une ville, espèce et race Aucun prérequis
- L’envoie de la requête est bien effectué
- Appuyer sur le bouton « Chercher »
- la page des annonces est affichée

- La page est affichée


- Accéder à la page d’enregistrement
- Les champs sont présents
P2 - Renseigner les informations Aucun prérequis
- L’envoi de la requête est bien effectué
- Appuyer sur le bouton « Enregistrer »
- la page de connexion est affichée

- La page est affichée


Login et
- Accéder à la page de connexion - Les champs sont présents
password :
P3 - Renseigner les identifiants - L’envoi de la requête est bien effectué
test@gmail.com
- Appuyer sur le bouton « connexion » - la page compte utilisateur est affichée
test
- Les annonces sont affichées

Partie compte utilisateur

- La page est affichée


- Accéder à la page dépôt annonce - Les champs sont présents
Photo au format
C1 - Renseigner les informations - L’envoi de la requête est bien effectué
jpg, jpeg ou png
- Appuyer sur le bouton « déposer » - L’annonce est enregistrée
- L’annonce est visible dans la liste

- La page est affichée


- Accéder à la page liste des annonces Au moins une
- Les annonces sont affichées
C2 - Supprimer une annonce annonce
- L’annonce est supprimée
- Appuyer sur le bouton « supprimer » enregistrée
- La page est rechargée

- La page est affichée


- Accéder à la page mon profile
- Les informations sont affichées
C3 - Changer les informations Aucun prérequis
- Les informations sont modifiées
- Appuyer sur le bouton « modifier »
- La page est rechargée

- La session de l’utilisateur est fermée


- Appuyer sur le bouton déconnexion - L’utilisateur est redirigé au site public
C4 Aucun prérequis
- Accéder à la page mon compte - Le mot de passe et login sont requis

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 12
VII. Partie technique
1. Arborescence du projet
L’arborescence permet d’avoir une vision globale du site Web et des parcours de navigation possibles.
Elle permet aux développeurs de se réorienter facilement, non seulement lors de la phase de
développement, mais également lors de la mise à jour d’un code source ou l’ajout d’une nouvelle
fonctionnalité. Enfin, mais non des moindres, une arborescence bien définie permet un meilleur
référencement au niveau des moteurs de recherche.

L’arborescence de mon projet se compose des dossiers suivants :

▪ Front : contient les pages visibles par les visiteurs du site et se compose de deux dossiers
⚫ Public : les pages visibles par les internautes
⚫ Compte : les pages visibles seulement par les utilisateurs inscrits et connectés
▪ Back : contient les requêtes pour interroger la base de données et des contrôles
⚫ Public : requêtes SQL des pages et contrôles des pages publiques
⚫ Compte : requêtes SQL des pages et contrôles des pages compte utilisateur
▪ Public
Css
⚫ : fichiers CSS des pages front
⚫ Js : fichiers Javascript des pages front
⚫ Img : images utilisées dans les pages front
⚫ Fonts : fonts utilisés dans les pages front

▪ Uploads : contient les images des annonces déposées

Fig 6 : Arborescence du projet

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 13
2. Architecture du site public
Avant de commencer le développement, j’ai d’abord réfléchi à la manière optimale d’organiser mon
code. Le débogage du code informatique est une étape à laquelle on est confronté pendant la phase
de développement, et qui peut s’avérer difficile si le code n’est pas bien organisé. C’est pour cette
raison que j’ai décidé d’organiser mon code sous forme de plusieurs fichiers.

Fig 7 : Composants PHP du site public

⚫ Top.php et footer.php

Le fichier top.php contient le header de l’application : logo et menu

Le fichier footer.php contient le footer de l’application : informations de contact

⚫ Les fichiers front « _F »

Les fichiers front contiennent le code html, CSS ou Javascript ainsi que les appels aux fonctions de la
partie back.

⚫ Les fichiers back « _B »

Les fichiers back contiennent les requêtes SQL pour interroger la base de données ainsi que des
fonctions de contrôle.

⚫ Le fichier constant.php

Le fichier constant.php contient les constantes de connexion à la base de données

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 14
3. Architecture du compte utilisateur
Le compte utilisateur est également organisé de la même manière que la partie publique de
l’application Web.

Fig 8 : Composants PHP du compte utilisateur

⚫ compte_top.php

Le fichier compte_top.php contient le header de l’application : logo et menu

⚫ Les fichiers front « _F »

Les fichiers front contiennent le code html, CSS ou Javascript ainsi que les appels aux fonctions de la
partie back.

⚫ Les fichiers back « _B »

Les fichiers back contiennent les requêtes SQL pour interroger la base de données ainsi que des
fonctions de contrôle.

⚫ Le fichier constant.php

Le fichier constant.php contient les constantes de connexion à la base de données.

4. Réalisation du front-end public


Cette partie détaille le code utilisé pour développer le front du site public et présente comme exemple
le formulaire de recherche des annonces.

Afin d’atteindre le résultat visuel souhaité, j’ai utilisé HTML pour structurer ma page, Bootstrap et CSS
pour le style et Javascript pour dynamiser l’affichage du contenu des listes déroulantes ainsi que la
validation du formulaire.

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 15
Fig 9 : Page recherche des annonces

Code source du formulaire de recherche

<div class="container">
<div class="row recherche-div mt-5">
<!-- formulaire de recherche des annonces -->
<div class="col-md-7 col-lg-6">
<div class="espece">
<ul class="list-inline mt-3 mr-3">
<li class="list-inline-item px-2">
<a href="#">S&eacute;lectionnez vos crit&egrave;res de recherche</a>
</li>
</ul>
</div>
<form id="form_recherche" action="liste_cards_ano_f.php" method="post" class="mt-4">

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 16
<div class="row">
<div class="input-group col-lg-12 mb-4">
<select id="ville_id" name="ville" class="form-control">
<option value="none" selected hidden>Ville</option>
<option value="colombes">Colombes</option>
<option value="puteaux">Puteaux</option>
</select>
</div>

<div class="input-group col-lg-6 mb-4">


<select id="animal_id" name="animal" class="form-control">
<option value="none" selected hidden>Esp&egrave;ce</option>
<option value="chat">Chat</option>
<option value="chaton">Chaton</option>
<option value="chien">Chien</option>
<option value="chiot">Chiot</option>
</select>
</div>

<div class="input-group col-lg-6 mb-4">


<select id="race_id" name="race" class="form-control" disabled>
<option value="none" selected hidden>Race</option>
</select>
</div>

<div class="form-group col-lg-12">


<button id="btn_chercher" type="submit" class="btn btn-success py-2">Chercher</button>
</div>
</div>
</form>
</div>

<div class="col-md-5 col-lg-6">


<div class="d-flex justify-content-center">
<h1 class="mt-2 text-green font-pacifico">Adopte le compagnon ideal</h1>
</div>
<div class="mt-2 d-flex justify-content-center">
<img src="../../public/img/cane.png" width="50%" />
</div>
</div>
</div>
</div>

Résultat du code source

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 17
Code source CSS correspondant

/* imortation du font pacifico*/


@font-face {
font-family: 'pacifico';
src:url('../fonts/Pacifico-Regular.ttf') ;

/* déclaration du font pacifico pour utilisation*/


.font-pacifico{
font-family: 'pacifico', Arial, serif;
}

/*font Balsamiq importé de google fonts est inclus dans le fichier top.php*/
.font-balsamic{
font-family: 'Balsamiq Sans', cursive;
}

/*Couleur verte*/
.text-green{
color: #3dea08;
}

/*style du form control*/


.recherche-div .form-control {
background: #f7f7f7;
border: 1px solid #d4d4d4;
border-radius: 4px;
}

/*gradient de couleur bleu pour le formulaire de recherche*/


.recherche-div {
background: rgb(66,165,245);
background: linear-gradient(90deg, rgba(66,165,245,0.9443374762014181) 0%,
rgba(66,165,245,0.6894355154171043) 35%, rgba(66,165,245,0.09559798040309875) 72%,
rgba(66,165,245,0.12360918488489148) 100%);
border-radius: 20px;

/*Styliser le bouton de recherche : orange*/


.recherche-div .btn.btn-success {
background: #f0ad4e;
border-color: #f0ad4e;
color: #ffffff;
font-weight: bold;
font-size: 18px;
width: 100%;
padding: 0;
}

/*Styliser le click sur le bouton : devient vert*/


.recherche-div .btn-success:active:focus {
background-color: #3ef805;
border-color: #74D14C;
}

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 18
/*Styliser le lien chat chat : devient vert*/
/*fonctionnalité désactivée et replacé par la mention
selectionnez vos criteres de recherche
*/
.espece a{
font-weight: bold;
font-size: 18px;
color: #ffffff;
}
/*Changer la couleur lors du passage de la souris : devient vert*/
.espece a:hover{
color: #3dea08;
text-decoration: none;
}

Code javascript (JQuery) correspondant

<script>
//Changer la race selon l'espece
$('#animal_id').on('change', function() {

//activation du select de la race


$("#race_id").prop( "disabled", false );
//Vider le select race
$('#race_id').html('');

//changer la valeur de la race selon l'espece


if( this.value == 'chat' || this.value == 'chaton' ){
$('#race_id').html('<option value="europeen">Europeen</option><option
value="scottish">Scottish</option>');
}

if( this.value == 'chien' || this.value == 'chiot' ){


$('#race_id').html('<option value="dalmatian">Dalmatian</option><option
value="caniche">Caniche</option>');
}
});

//tester si l'utilisateur a bien rempli les champs

//sur l'action du submit du formulaire


$('#form_recherche').submit(function (e) {
//variable pour savoir si le formulaire est bien validé par défaut à oui
var validation = true;

//border à 0
$("#ville_id").css("border","0px");
$("#animal_id").css("border","0px");
$("#race_id").css("border","0px");

//récuperer les valeurs des select


var val_ville = $('#ville_id').val();
var val_animal = $('#animal_id').val();
var val_race = $('#race_id').val();

//tester si les select sont bien rempli


if( val_ville == 'none'){
$("#ville_id").css("border","1px solid red");
validation = false;

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 19
}
if( val_animal == 'none'){
$("#animal_id").css("border","1px solid red");
validation = false;
}
if( val_race == 'none'){
$("#race_id").css("border","1px solid red");
validation = false;
}

//empecher le submit du formulaire si validation est à false


if (!validation) {
e.preventDefault();
return false;
}
});

</script>

Une fois le formulaire de recherche rempli et validé, la page « list_cards_ano_f.php » prend le relais et
affiche le résultat de la recherche sous forme de cartes.

Fig 10 : Page liste des annonces

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 20
La consultation d’une annonce spécifique renvoi l’utilisateur vers la page « fiche_animal_f.php ». Elle
contient les informations de l’animal, les informations de contact et le processus d’adoption.

Fig 11 : Page fiche de l’animal

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 21
Le dépôt d’une annonce nécessite la création d’un compte utilisateur sur la page d’enregistrement.

Fig 11 : Page d’enregistrement

Les utilisateurs inscrits peuvent se connecter à leur espace personnel grâce au formulaire de
connexion.

Fig 12 : Page de connexion

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 22
5. Création de la base données
J’ai créé ma base de données en utilisant le langage d’interrogation des données SQL. Ci-dessous un
exemple de création de la table annonce.
CREATE TABLE `annonce` (
`id_ano` INT(11) NOT NULL AUTO_INCREMENT,
`titre_ano` VARCHAR(50) NOT NULL,
`detail_ano` VARCHAR(2000) NOT NULL,
`date_ano` DATE NOT NULL,
`ville_ano` VARCHAR(50) NOT NULL,
`tel_ano` VARCHAR(50) NOT NULL,
`email_ano` VARCHAR(50) NOT NULL,
`statut_ano` INT(10) NOT NULL COMMENT '0 :désactivée, 1: en ligne',
`id_util` INT(11) NOT NULL,
`id_anim` INT(11) NOT NULL,
PRIMARY KEY (`id_ano`),
INDEX `FK_id_util2` (`id_util`),
INDEX `FK_id_anim` (`id_anim`),
CONSTRAINT `FK_id_anim` FOREIGN KEY (`id_anim`) REFERENCES `animal` (`id_anim`),
CONSTRAINT `FK_id_util2` FOREIGN KEY (`id_util`) REFERENCES `utilisateur` (`id_util`)
)
COLLATE='utf8mb4_general_ci'
ENGINE=InnoDB;

6. Réalisation du back-end compte utilisateur


Cette partie détaille le code utilisé pour développer le back-end du compte utilisateur, et présente
comme exemple la page qui liste les annonces déjà déposées. J’ai utilisé principalement des fonctions
pour l’intégralité du back-end.

Connexion à la base de données dans le fichier : constant.php

<?php
// Definition des constantes de connexion à la base de données
define('LOGIN', 'adopte');
define('MDP_DB','Adb20@!Grt89P&');
define('IP_DB', '127.0.0.1');
define('CONNEX_DB', 'adoptemoi');
define('UPLOADS_COMPTE', '../../uploads/');
define('UPLOADS_PUBLIC', '../../uploads/');

//Fonction pour se connecter à la BDD


function db_connect(){

try{

$db_connex = new PDO('mysql:host='.IP_DB.';dbname='.CONNEX_DB, LOGIN, MDP_DB );


$db_connex->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

}catch (PDOException $e){

echo "Erreur : " . $e->getMessage();


}
return $db_connex;

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 23
Déclaration des fonctions dans le fichier back : list_adop_b.php

<?php

/**
*Fonction qui permet de récupérer les informations d'une annonce
*d'un utilisateur spécifique grâce à son id_util
*Affiche seulement les annonces en active --> statut_ano = 1
*Effectue un tri par date des annonces déposées --> order by ano.date_ano DESC
**/
function list_annonces ($id_util){

$db_connect = db_connect();
$requete = "SELECT ano.id_ano, ano.titre_ano, ano.date_ano, ano.id_util,
ano.id_anim, anim.photo1_anim
FROM annonce as ano, animal as anim
WHERE ano.id_anim = anim.id_anim
AND ano.id_util = ?
AND ano.statut_ano = 1 order by ano.date_ano DESC";

$params_req = array($id_util);
$stmt = $db_connect->prepare($requete);
$stmt->execute($params_req);

return $stmt;
}

/**
*Fonction qui permet de supprimer une annonce grâce à l'id de l'annonce
*Ce n'est pas une suppression mais un update de son statut --> statut_ano = 0
*
**/
function supprimer_annonce($id_ano){

$db_connect = db_connect();
$requete = "UPDATE annonce SET statut_ano = 0 WHERE id_ano = ?";
$params_req = array($id_ano);

$stmt = $db_connect->prepare($requete);
$resultat = $stmt->execute($params_req);

return $resultat;
}

?>

Appel des fonctions dans le fichier front : list_adop_F.php

<?php
//appel des constantes
include_once '../../back/constant.php';
//appel du back
include_once '../../back/compte/list_adop_b.php';
?>

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 24
<div class=" mt-1 col-lg-12">

<table class="table table-hover table-striped text-center">


<thead>
<tr>
<th scope="col" colspan="6" class="text-blue font-balsamic">Liste de vos annonces
d'adoption</th>
</tr>
</thead>
<tbody>
<?php
$data = list_annonces ($_SESSION['id_util']);
while ($row = $data->fetch(PDO::FETCH_ASSOC)) {
echo '<tr>';
echo '<td class=" align-middle"><img src="'.UPLOADS_COMPTE.$row['photo1_anim'].'"
width="50" class="shadow rounded"></td>';
echo '<td class=" align-middle">'.$row['titre_ano'].'</td>';
echo '<td class=" align-middle text-green"><i class="fas fa-thumbs-up fa-
lg"></i></td>';
echo '<td class=" align-middle"><a
href="list_adop_f.php?action=del_ano&id_ano='.$row['id_ano'].'" class="text-dark"><i class="fas
fa-trash-alt"></i></a></td>';
echo '</tr>';
}

?>
</tbody>
</table>
</div>

Résultat

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 25
7. Sécurité

⚫ Authentification sécurisée à la base de données

L’accès aux données nécessite la création d’un utilisateur disposant de droits limités et identifié par un
mot de passe respectant les exigences de sécurité en vigueur :

- Longueur minimale de 10 caractères


- Caractères minuscules
- Caractères majuscules
- Caractères spéciaux

J’ai créé pour mon application Web l’utilisateur « adopte » identifié par le mot de passe
« Adb20@!Grt89P& », et je lui ai affecté seulement les droits nécessaires : SELECT, INSERT, UPDATE.

CREATE USER 'adopte'@'127.0.0.1' IDENTIFIED BY 'Adb20@!Grt89P&';

GRANT SELECT, INSERT, UPDATE ON adoptemoi.* TO 'adopte'@'127.0.0.1'


IDENTIFIED BY 'Adb20@!Grt89P&';

⚫ Configuration sécurisée du serveur

Une mauvaise configuration de la sécurité se produit lorsque les paramètres de sécurité sur un serveur
Web sont conservés par défaut. Le renforcement de la sécurité nécessite une configuration
personnalisée pour le serveur Web. Il ne doit pas lister le contenu des répertoires contenant les fichiers
exécutables de l’application et les comptes par défaut doivent être désactivés :

- Ajout d’un fichier « index.php » dans tous les dossiers


- Désactivation du compte Mysql « root » sans mot de passe

⚫ Validation des entrées utilisateur

L’application valide toutes les entrées fournies par les utilisateurs afin de neutraliser tout code
malveillant pouvant être intégré et interprété, La validation se fait coté serveur grâce à la fonction
htmlspecialchars()

⚫ Stockage sécurisé des identifiants de connexion

Il est important de stocker les mots de passe des utilisateurs de manière à éviter qu'ils ne soient
obtenus par un attaquant, même si l'application ou la base de données est compromise. Le mécanisme
de stockage du mot de passe doit être réversible et résister aux techniques de cassage. J’ai utilisé une
combinaison de l’algorithme SHA1 et l’algorithme MD5 pour crypter les mots de passe.
$pass_crypt = sha1( md5($mdp) . sha1($email) );

⚫ Veille technique sur les failles de sécurité

La consultation de site spécialisées dans les nouvelles failles de sécurité est nécessaire dans le cadre
de mon projet car j’utilise un CMS et des bibliothèques externes. Ces programmes tierces font souvent
objet de bug de sécurité.

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 26
8. Le blog
Mon application Web fait référence à un blog qui traite l’actualité des animaux. J’ai utilisé WordPress
pour créer le site vitrine ainsi qu’un plugin pour créer un formulaire personnalisé de contact, un
formulaire de connexion admin et une page pour lister les messages envoyés.

Cette partie détaille le code utilisé pour se connecter au compte administrateur afin de visualiser les
demandes de contact.

Fig 13 : formulaire de contact

⚫ Entête du plugin

La création d’un plugin nécessite la déclaration d’un entête spécifique et la définition des constantes.
/*
Plugin Name: Amix formulaire de contact
Plugin URI: http://animaux-le-mag.com
Description: Formulaire de contact personnalisé
Version: 1.0
Author: Sara Houmid
Author URI: http://adoptemoi.fr
*/

Plugin Name : correspond au nom du plugin tel qu’il sera affiché dans la partie administrateur.

Plugin URI : correspond à l’URL du plugin sur le répertoire officiel.

Description : correspond à la description des fonctionnalités du plugin.

Author : correspond à l’identité du créateur du plugin.

Version : correspond au numéro de version du plugin.

Author URI : fait le lien avec le site de l’extension.

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 27
Formulaire de connexion administrateur

//1-fonction qui permet d'afficher le formulaire de connexion admin


//elle récupère le login et le mot de passe et l'envoi à la même page
//pour traitement par la suite par la fonction de vérification de connexion
function form_connexion_admin() {
echo '<form action="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" method="post">';
echo '<p>';
echo'<br/><br/>';
echo 'Votre Login* <br/>';
echo '<input type="text" name="login" size="40" />';
echo '</p>';
echo '<p>';
echo 'Votre Mot de paase* <br/>';
echo '<input type="password" name="password" size="40" />';
echo '</p>';
echo '<p><input type="submit" name="cf-submitted" value="Connexion"></p>';
echo '</form>';
}

Fonction de vérification de connexion

//2-fonction qui permet de vérifier si les valeurs entrées par l'utilisateur sont correctes
//si c'est bon elle appelle la fonction html_contact_list pour lister la table des contacts
//sinon si les valeurs rentrés ne sont pas bonnes et affiche le formulaire + un message d'erreur
function verifier_connexion($login, $password){
if(($login =="sara") && ($password =="Adb20@!Grt89P&")) {
//si les identifiants de connexion sont OK afficher la liste des contacts
html_contact_list();
}else{
//si les identifiants de connexion ne sont pas OK afficher le formulaire de contact
form_connexion_admin();
echo "Merci de remplir les identifiants";
}
}

Fonctions du shortcode

//3-fonction du shortcode : elle permet d'afficher d'abord le formulaire de connexion


//si les variables post ne sont pas défini puis appelle la fonction verifier_connexion()
function cf_liste_contacts_shortcode() {
ob_start();
if( !isset( $_POST["login"] ) && !isset( $_POST["password"] )){
form_connexion_admin();
}else{
$login = sanitize_text_field($_POST["login"]);
$password = sanitize_text_field($_POST["password"]);
verifier_connexion($login, $password);
}
return ob_get_clean();
}
//function qui permet d'appeler le shortcode sur la page wordpress
add_shortcode( 'amix_contact_liste', 'cf_liste_contacts_shortcode' );

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 28
Résultat

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 29
VIII. Environnement technique
1. Synthèse
Le tableau ci-dessous synthétise les langages de programmation, bibliothèques et Framework utilisés.

Client Serveur Interrogation des données


HTML5 PHP 7.4.0 SQL
Langages
CSS3
informatique
Javascript

JQuery 3.5.1
Bibliothèques
FontAwsome 5.11.2

Framework Bootstrap 4.0.0

Le tableau ci-dessous synthétise les outils utilisés pour la réalisation du projet.

Version Domaine d’utilisation

Balsamiq 4.0 Maquettage de l’interface utilisateur

AnalyseSi 0.8 Conception du MCD de la base de données

MySQL Workbench 8.0 Elaboration du MPD de la base de données

Maria DB 10.4 Système de Gestion de Base de Données

Heidi SQL 9.3 Interrogation de la base de données

Eclipse PHP 4.15 Environnement de développement

WampServer 3.2 Serveur local

Gantt Project 2.8 Déterminer les dates des différentes taches

Wordpress 5.3.2 CMS pour développer le blog

cssgradient.io En ligne Créer des gradient CSS

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 30
2. Structure des pages avec HTML
HTML est un langage de balisage conçu pour créer des pages Web. Il permet d’écrire un document qui
sera interprété par un navigateur Web grâce à plusieurs balises définies. HTML permet également
d’inclure des ressources multimédias comme des images, des vidéos, des formulaires de saisie et des
feuilles de styles.

3. Décoration du contenu avec CSS


CSS signifie feuilles de style en cascade avec un accent sur le « style ». Alors que HTML est utilisé pour
structurer un document Web, CSS vient à travers et spécifie le style d’un document HTML. Les mises
en page, les couleurs et les polices sont toutes déterminées avec CSS.

4. Traitement des données avec PHP


PHP est un langage de programmation côté serveur qui permet de créer des pages Web dynamiques.
La page contenant du code PHP s’exécute au niveau du serveur, et retourne le résultat au client sous
forme d’une page HTML. La classe PDO fait partie de nombreuses fonctionnalités proposées par PHP
utilisées dans ce projet, elle permet de se connecter à une base de données afin d’exécuter des
instructions SQL.

5. Dynamiser les pages avec Javascript


JavaScript est un langage de programmation qui s’exécute côté client. Il est souvent utilisé comme
partie de pages Web, dont l’objectif est d'interagir avec l'utilisateur. Le script doit être inclus dans un
document HTML pour que le code soit interprété par le navigateur. J’ai utilisé du code Javascript lors
de la suppression d’une annonce afin de confirmer le choix de l’utilisateur.

6. Framework Bootstrap
Un Framework est un ensemble de composants structurés qui sert à créer les bases et à organiser le
code informatique pour faciliter le travail des programmeurs, que ce soit en termes de productivité ou
de simplification de la maintenance.

Bootstrap est une collection d'outils utiles à la création du design (graphisme, animation et interactions
avec la page dans le navigateur, etc.) de sites et d'applications Web. C'est un ensemble qui contient
des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs,
ainsi que des extensions JavaScript en option.

7. Bibliothèques
En informatique, une bibliothèque logicielle est une collection de fonctions, qui peuvent être déjà
existantes et prêtes à être utilisées par des programmes.

JQuery est une bibliothèque JavaScript libre et multiplateforme créée pour faciliter l'écriture de scripts
côté client dans le code HTML des pages Web. Le but de la bibliothèque étant le parcours et la
modification du DOM, elle contient de nombreuses fonctionnalités, notamment des animations, la
manipulation des feuilles de style (accessibilité des classes et attributs), la gestion des évènements,
etc.

FontAwsome est une police Web utilisée par les concepteurs et développeurs de sites Web pour les
icônes au lieu des anciennes icônes ou images traditionnelles. Elle est flexible en termes de coloration
et de dimensionnement. Pour l’utiliser il suffit de l’inclure dans le fichier HTML souhaité puis l’appliquer
dans la page.
<i class="fas fa-paw mr-2">

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 31
8. Environnement de développement
L’environnement de développement intégré est un environnement de programmation complet qui se
présente sous la forme d’un logiciel. Il se compose d’un éditeur de texte et plusieurs fonctionnalités
qui permettent aux développeurs de coder, et déboguer leur code grâce au débogueur intégré.

Pour développer mon site j’ai utilisé l’environnement de développement Eclipse pour PHP.

9. Le CMS WordPress
Un système de gestion de contenu ou CMS est un logiciel conçu pour aider les utilisateurs à créer et à
modifier un site Web. Il est important de noter que les CMS font plus que de gérer le contenu texte et
image affiché sur les pages Web. Ils ont évolué pour aider à concevoir l'apparence globale d’un site,
suivre les sessions des utilisateurs, gérer les recherches, collecter les commentaires des visiteurs,
héberger les forums et bien plus encore.

WordPress est le CMS le plus populaire pour créer des sites Web. Il est capable de créer n'importe quel
style de site Web, d'un simple blog à un site Web d'entreprise complet. Il peut également être utilisé
pour créer une boutique en ligne en utilisant le plugin Woo Commerce. Il est possible d’inclure d’autres
plugins comme « Elemontor » pour des fonctionnalités de conception plus poussées.

IX. Benefit of English (ENG)


English ranks first among the languages most spoken in professional life. Its use is common in different
fields especially the IT sector. technological revolution made this field more than ever concerned with
the use of the English language. In United States the giants of this sector began to develop, and they
used English terms for programming. Thus, the use of English words in the syntax of programming
languages has become common. It is therefore essential to justify certain bases in English to be able
to employ these programming languages.

I had different errors written in English during the development phase of my school project, in order
to fix them, I was constrained to search solutions in English.

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 32
A concrete example is the use of bootstrap shortcuts for margins, I needed to find the solution for my
margin problems, and I have interrogated my best friend in this adventure “stackoverflow”.

The request was: bootstrap margin pixels

The solution proposed by “stackoverflow” was helpful and it helped me a lot it for the development of
my entire project.

Bootstrap has a wide range of responsive margin and padding utility classes. They
work for all breakpoints:

xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px))


The classes are used in the format:

{property}{sides}-{size} for xs & {property}{sides}-{breakpoint}-{size} for sm, md,


lg, and xl.
m - sets margin
p - sets padding

t - sets margin-top or padding-top


b - sets margin-bottom or padding-bottom
l - sets margin-left or padding-left
r - sets margin-right or padding-right
x - sets both padding-left and padding-right or margin-left and margin-right
y - sets both padding-top and padding-bottom or margin-top and margin-bottom
blank - sets a margin or padding on all 4 sides of the element

0 - sets margin or padding to 0


1 - sets margin or padding to .25rem (4px if font-size is 16px)
2 - sets margin or padding to .5rem (8px if font-size is 16px)
3 - sets margin or padding to 1rem (16px if font-size is 16px)
4 - sets margin or padding to 1.5rem (24px if font-size is 16px)
5 - sets margin or padding to 3rem (48px if font-size is 16px)
auto - sets margin to auto

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 33
X. Conclusion
1. Bilan
Par rapport à l’organisation initiale, j’ai réalisé :

⚫ L’ensemble des maquettes


⚫ La modélisation de la base de données
⚫ Une application Web fonctionnelle qui demanderait à être encore plus robuste

En réalité, la durée de réalisation du projet de 32 jours comprenait également la rédaction du dossier


professionnel, la rédaction du présent rapport, la préparation pour la soutenance et quelques cours
suivis en parallèle. J’ai dû redoubler d’effort pour respecter mon planning et j’ai renoncé à l’ajout de
plusieurs fonctionnalités supplémentaires pour respecter les délais.

2. Points forts et axes d’amélioration


Mon back-end est entièrement développé à l’aide de fonctions qui prennent des paramètres,
exécutent une suite d’instructions et retournent un résultat. Cette manière d’organiser le code le rend
lisible, réutilisable et facile à mettre à jour.

Malgré l’utilisation des fonctions de sécurité pour les entrées des utilisateurs, l’aspect sécurité reste
un point faible de mon application web. Plusieurs failles de sécurité sont à corriger, à titre d’exemple
la gestion de la session du compte utilisateur, et des contrôles moins poussés coté back-end qui offrent
l’opportunité aux pirates de modifier les requêtes POST en utilisant des outils dédiés.

3. Perspectives
Ma base de données a évolué depuis le début du projet plusieurs propriétés et entités sont ajoutées :

Statut utilisateur : permet de définir le statut d’un utilisateur (association, refuge ou particulier)

Demande : permet de stocker les demandes d’adoption pour les annonces sans téléphone

Parallèlement à ce projet, j’améliore mes compétences techniques, et je travaille sur une version plus
élaborée en utilisant l’architecture MVC.

Le cadre juridique est un point à prendre en compte minutieusement, car je me suis rendu compte
qu’un site Web d’adoption d’animaux existe déjà sous le même nom « Adopte moi ». Pour la suite du
projet je suis contrainte de changer le nom de mon site pour éviter d’éventuels ennuis juridiques.

Cookie est un chat appartenant à la race « scottish » née chez moi sans iris, son handicap me motive
plus que jamais pour continuer le projet afin de lui trouver la famille idéale qui va l’adopter. Dès son
lancement, elle sera le premier animal à adopter sur mon site.

Sara Houmid Conception et développement d’un site pour l’adoption des animaux 34