Pom’ De Blog
Pom’ De Blog
Ici, j’ai créé un site blog, nommé « Pom’ De Blog ». Ce projet avait pour but d’apprendre la gestion du backend avec une base de données. Un travail dans le cadre du cours de « Développement Back », durant l’option « Informatique » de ma première année, en Bachelor Cycle Web et Multimédia, à MyDigitalSchool de Vannes.
Compétences
Développement du backend d’un site web
Gestion d’une base de données
Logiciels
Utilisation du langage PHP
Utilisation d’une base de données SQL
Utilisation du langage HTML
Utilisation du langage CSS
Développement du projet
Recherche d'une structure pour le site, des tables de données utiles pour le blog, de l'arborescence du site entre le côté "client" et le côté "admin".- Le serveur est géré par Docker, qui est un conteneur qui a permis de reproduire un événement serveur, avec les fichiers docker-compose.yml et Dockerfile à la racine du projet. Ces fichiers permettent de créer un conteneur et une image, afin de voir le site web en local.
- Pour la conception de ce site, j'ai utilisé la bibliothèque Flight, afin de le structurer, en réglant le Header et le Footer "admin" et "client", pour le réutiliser sur chacune des pages. Vous pouvez retrouver ces structures dans le dossier "templates" puis "parts" sur le GitHub du projet. La structure de chaque page est inscrite dans le fichier index.php, à la racine du projet.
- La base de données (BdB) a été créée en SQL, avec un visuel sur PHP MyAdmin. La connexion à la BdB se fait dans le dossier "inc" placé dans le fichier db.php.
- Chaque page est ensuite codée en HTML et PHP dans le dossier "templates" puis "pages". La relation avec la base de données est aussi faite sur index.php.
- Le style en frontend du site est réalisé grâce au CSS avec les fichiers reset.css (qui permettent de réinitialiser le css automatique des navigateurs) et style.css dans le dossier "css". Il y a aussi les fichier style-backoffice.css et style-frontoffice.css, afin de pouvoir gérer du css pour une partie restreinte du site. Ces deux derniers fichiers n'ont pas été nécessaires, car le style est très simple et épuré, car le projet se concentrer principalement sur le fonctionnement du site aussi bien du côté backend que frontend.
- Ce site de blog a plusieurs fonctionnalités du côté "client" :
- Voir l'ensemble des articles avec une image, un titre, l'auteur, la date et la méta-description
- Regarder l'article en détails, dans une page unique
- Avoir une page de contact fonctionnelle et sécuriser les données d'entrées
- Ce blog a aussi plusieurs fonctionnalités du côté "admin" :
- Pouvoir se connecter à son espace personnel, avec un email et un mot de passe sécurisé
- Voir l'ensemble des articles publiés ou non
- Ajouter un article, grâce à un formulaire
- Supprimer un article à la fois
- Regarder les messages envoyés, via le formulaire de contact
- Une page compte, pour avoir les informations sur le compte connecté.
- Se déconnecter de sa session
- Ce projet m’a permis d'apprendre à faire un site, en gérant le backend avec PHP et SQL, voir les difficultés de sécurisation des formulaires. Ce site n'est pas visible en direct pour une raison de sécurité, mais le code est retrouvable sur mon GitHub qui permet d'être testé en local.
Recherche
Recherche d’une structure pour le site, des tables de données utiles pour le blog, de l’arborescence du site entre le côté « client » et le côté « admin ».
Développement
Création du serveur
Le serveur est géré par Docker, qui est un conteneur qui a permis de reproduire un événement serveur, avec les fichiers docker-compose.yml et Dockerfile à la racine du projet. Ces fichiers permettent de créer un conteneur et une image, afin de voir le site web en local.
Zoning du site
Pour la conception de ce site, j’ai utilisé la bibliothèque Flight, afin de le structurer, en réglant le Header et le Footer « admin » et « client », pour le réutiliser sur chacune des pages. Vous pouvez retrouver ces structures dans le dossier « templates » puis « parts » sur le GitHub du projet. La structure de chaque page est inscrite dans le fichier index.php, à la racine du projet.
Base de données
La base de données (BdB) a été créée en SQL, avec un visuel sur PHP MyAdmin. La connexion à la BdB se fait dans le dossier « inc » placé dans le fichier db.php.
Pages
Chaque page est ensuite codée en HTML et PHP dans le dossier « templates » puis « pages ». La relation avec la base de données est aussi faite sur index.php.
Style du site
Le style en frontend du site est réalisé grâce au CSS avec les fichiers reset.css (qui permettent de réinitialiser le css automatique des navigateurs) et style.css dans le dossier « css ». Il y a aussi les fichier style-backoffice.css et style-frontoffice.css, afin de pouvoir gérer du css pour une partie restreinte du site. Ces deux derniers fichiers n’ont pas été nécessaires, car le style est très simple et épuré, car le projet se concentrer principalement sur le fonctionnement du site aussi bien du côté backend que frontend.
Fonctionnement du site
Ce site de blog a plusieurs fonctionnalités du côté « client » :
- Voir l’ensemble des articles avec une image, un titre, l’auteur, la date et la méta-description
- Regarder l’article en détails, dans une page unique
- Avoir une page de contact fonctionnelle et sécuriser les données d’entrées
Ce blog a aussi plusieurs fonctionnalités du côté « admin » :
- Pouvoir se connecter à son espace personnel, avec un email et un mot de passe sécurisé
- Voir l’ensemble des articles publiés ou non
- Ajouter un article, grâce à un formulaire
- Supprimer un article à la fois
- Regarder les messages envoyés, via le formulaire de contact
- Une page compte, pour avoir les informations sur le compte connecté.
- Se déconnecter de sa session
Conclusion
Ce projet m’a permis d’apprendre à faire un site, en gérant le backend avec PHP et SQL, voir les difficultés de sécurisation des formulaires. Ce site n’est pas visible en direct pour une raison de sécurité, mais le code est retrouvable sur mon GitHub qui permet d’être testé en local.
Quelques visuels
Lien
Vous pouvez retrouver le code de ce site web, sur mon compte GitHub, grâce au bouton ci-dessous :