Voir le flux RSS

Blog de CinéPhil

[Actualité] FramElem : mon framework PHP pas à pas - 2. Création du projet et structure des pages du site

Noter ce billet
par , 21/06/2019 à 02h20 (1437 Affichages)
Avant propos

Dans le premier article consacré à la construction de mon framework PHP, j'ai défini les principes de celui-ci.

Passons maintenant aux choses sérieuses en commençant par la création du projet dans l'environnement de développement et la définition de la structure générale des pages du futur site.

1. Création du projet

Comme dit dans la première partie, j'utilise l'environnement de développement Eclipse avec les "Php Development Tools" et les manipulations que je donnerai seront faites sous cet environnement.
Vous pouvez vous en passer et utiliser un autre environnement ou bien un éditeur de texte mais, dans ce dernier cas, choisissez-en quand même un évolué qui reconnaît le langage, utilise la coloration syntaxique...

Et maintenant, au boulot !

Dans le menu Eclipse, choisir "File / New / PHP Project".
On arrive sur la fenêtre suivante ; on y tape le nom du projet et on laisse les options par défaut. On peut ensuite directement cliquer sur le bouton "Finish".

Nom : Capture_Framelem_Creation_projet_Eclipse.png
Affichages : 2036
Taille : 56,3 Ko

Eclipse a automatiquement créé l'arborescence de projet suivante :

Nom : Capture_framelem_arborescence_2.png
Affichages : 1933
Taille : 11,0 Ko

Sur le disque dur (sur mon ordinateur, dans le dossier /home/philippe/eclipse-workspace/), Eclipse n'a en réalité créé que le dossier "framelem" et les sous-dossiers "application" et "public", ainsi que le dossier caché ".settings" et quelques fichiers à l'intérieur, plus, à la racine du projet, les fichiers cachés ".project" et ".buildpath". Ces derniers éléments cachés ne sont utiles qu'à Eclipse et aucunement au futur site web. Les autres éléments visibles dans l'arborescence présentée ci-dessus sont des liens uniquement utiles à Eclipse.
Si vous n'utilisez pas Eclipse, vous pouvez vous contenter de créer le dossier "framelem" et les sous-dossiers "application" et "public".

Complétons ensuite l'arborescence embryonnaire des sous-dossiers présentés dans le premier article :

Nom : Capture_framelem_arborescence_1.png
Affichages : 1941
Taille : 10,1 Ko

Dans un premier temps, contentons-nous de créer dans le dossier "application" le sous-dossier "views". Pour ce faire, dans Eclipse, faire un clic droit sur le dossier "application" puis choisir "New => Folder". Donner le nom "views" au sous-dossier et cliquer sur "Finish" :

Nom : Capture_framelem_creation_dossier.png
Affichages : 1957
Taille : 35,6 Ko

Vous pouvez ainsi créer toute l'arborescence si vous le souhaitez mais je donnerai la création des autres dossiers au moment où ils seront nécessaires dans l'exposé du développement.

C'est dans ce dossier "application/views" que nous allons créer nos premiers fichiers de vues, c'est à dire les fichiers contenant le code HTML commun à toutes les pages du site.

2. Structure d'une page du site

L'écrasante majorité des sites web - et quelle que soit la technique qui a été utilisée pour les fabriquer - ont des pages qui se composent :
  • d'un en-tête, appelé aussi "header" qui contient généralement un logo, un titre, un menu... ;
  • d'un corps contenant les informations publiées par le site et qui peut être divisé en plusieurs parties (il est souvent appelé "content") ;
  • d'un pied de page, appelé aussi "footer" qui contient généralement des liens vers les conditions générales, la page de contact ou autres outils secondaires.


En plus de ces parties visibles par l'internaute, le code HTML commence par une partie entourée par les balises <head></head> et qui comprend les métadonnées de la page, les liens vers les fichiers CSS ou Javascript à charger par le navigateur web.

La structure de toutes les pages du site sera donc (pour commencer), la suivante :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
	<!-- Contient les méta-données et les liens vers les fichiers CSS et Javascript à charger par le navigateur -->
</head>
<body>
<div id="header">
	<!-- Contient l'en-tête de la page -->
</div>
<div id="content">
	<!-- Contient les informations publiées par le site -->
</div>
<div id="footer">
	<!-- Contient le pied de page !-->
</div>
</body>
</html>

Nous allons créer ces différentes parties dans un fichier "page.phtml" placé dans le dossier application/view. Pour ce faire, dans Eclipse, faire un clic droit sur le dossier "application/view" et choisir "New => PHP File", donner le nom "page.phtml" puis cliquer sur "Finish" :

Nom : Capture_framelem_creation_fichier.png
Affichages : 1946
Taille : 37,1 Ko

Nota : J'ai choisi l'extension ".phtml" pour les fichiers de vues qui contiendront du PHP et du HTML.

L'éditeur d'Eclipse ouvre automatiquement ce fichier.

Nota : Vous pouvez définir un modèle dans "Window / Préférences" puis "PHP / Code style / Code Templates / Simple php file" pour créer automatiquement le fichier avec l'entête que vous souhaitez. Mon modèle donne ceci :
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
/**
 * One line description ending with a dot.
 * 
 * Complementary description (many lines possible)
 *
 * @filesource		page.phtml
 * @author		Philippe Leménager
 * @version		0.1 - 21 juin 2019 - plemenager - Création
 */
 
/* Historique :
 * 
 */ 
?>

Complétons ce modèle avec le code HTML vu plus haut et commençons le remplissage de la partie <head></head> :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?=php
/**
 * Gabarit général des pages web.
 *
 * @filesource  page.phtml
 * @author              Philippe Leménager
 * @version             0.1 - 21 juin 2019 - plemenager - Création
 */
 
/* Historique :
 *
 */
?>
<!DOCTYPE html>
<html>
<head>
	<title>FramElem - Accueil</title>
	<meta charset="utf-8" />
	<meta name="description" lang="fr" content="FramElem - Un framework PHP élémentaire" />
	<meta name="author" lang="fr" content="Philippe LEMÉNAGER" />
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="Public/css/general.css" type="text/css">
</head>
<body>
<div id="header">
	<!-- Contient l'en-tête de la page -->
</div>
<div id="content">
	<!-- Contient les informations publiées par le site -->
</div>
<div id="footer">
	<!-- Contient le pied de page !-->
</div>
</body>
</html>

Tout ceci est bien statique et n'affichera rien puisque les différentes parties du <body> ne contiennent aucune information visible. Rassurez-vous, ça va changer !
Mais il faut d'abord construire le moteur qui va permettre d'afficher cette page perdue quelque part dans l'arborescence du site. Nous verrons ça dans les prochains articles, en commençant par la réécriture d'URL et le routage...

Envoyer le billet « FramElem : mon framework PHP pas à pas - 2. Création du projet et structure des pages du site » dans le blog Viadeo Envoyer le billet « FramElem : mon framework PHP pas à pas - 2. Création du projet et structure des pages du site » dans le blog Twitter Envoyer le billet « FramElem : mon framework PHP pas à pas - 2. Création du projet et structure des pages du site » dans le blog Google Envoyer le billet « FramElem : mon framework PHP pas à pas - 2. Création du projet et structure des pages du site » dans le blog Facebook Envoyer le billet « FramElem : mon framework PHP pas à pas - 2. Création du projet et structure des pages du site » dans le blog Digg Envoyer le billet « FramElem : mon framework PHP pas à pas - 2. Création du projet et structure des pages du site » dans le blog Delicious Envoyer le billet « FramElem : mon framework PHP pas à pas - 2. Création du projet et structure des pages du site » dans le blog MySpace Envoyer le billet « FramElem : mon framework PHP pas à pas - 2. Création du projet et structure des pages du site » dans le blog Yahoo

Mis à jour 18/10/2019 à 15h00 par Malick

Catégories
PHP , Développement Web , PHP

Commentaires

  1. Avatar de captain2019
    • |
    • permalink
    Déçu (voire limite désappointé façon Zorg dans « Le 5ème élément » ) par les frameworks que j’ai tenté d’essayer d’adopter (c’est vous dire si les « grands » frameworks m’ont déçu)
    • Quelles étaient ces frameworks ?
    • En quoi etaient ils décevants ?
  2. Avatar de MICROPERSO
    • |
    • permalink
    La démarche est intéressante pour faire comprendre la structure d'un framework..............mas il va falloir aller ben plus loin, et longtemps, pour obtenir un environnement exploitable. Alors pourquoi ne pas expliquer en détail un C.M.S existant??????
  3. Avatar de CinePhil
    • |
    • permalink
    Citation Envoyé par captain2019
    • Quelles étaient ces frameworks ?
    • En quoi etaient ils décevants ?
    J'ai essayé Zend Framework 1 puis 2. Le 1 était relativement facile à prendre en mains ; le 2 beaucoup moins. J'avais l'impression de ne remplir que des fichiers de configuration au lieu de coder. Et à la première erreur dans une classe obscure du framework, bonjour pour trouver à quoi c'était dû.
    J'ai aussi essayé JBoss Seam. Le clickodrome est sympa mais là aussi, ça n'a pas été facile de comprendre les mécanismes.
    Symfony, idem ; j'ai vite abandonné.
    J'ai eu à modifier un projet fait sous Laravel : galère pour comprendre comment ça fonctionne !

    Et à chaque fois que j'ai décortiqué le fonctionnement de ces framework pour trouver d'où venait l'erreur qui s'affichait, j'ai vu s'enchaîner une multitude de classes pour afficher une banale page d'accueil.
  4. Avatar de CinePhil
    • |
    • permalink
    Citation Envoyé par MICROPERSO
    La démarche est intéressante pour faire comprendre la structure d'un framework..............mas il va falloir aller ben plus loin, et longtemps, pour obtenir un environnement exploitable. Alors pourquoi ne pas expliquer en détail un C.M.S existant??????
    Je ne parle pas ici de CMS mais de framework de programmation !

    Les CMS, c'est pareil, j'en suis un peu revenu : base de données mal foutue, prise en mains pas toujours évidente et ils ont tendance à se complexifier au fil des versions. Drupal, par exemple, est devenu très lourd.
  5. Avatar de Cryde
    • |
    • permalink
    Citation Envoyé par CinePhil
    J'ai essayé Zend Framework 1 puis 2. Le 1 était relativement facile à prendre en mains ; le 2 beaucoup moins. J'avais l'impression de ne remplir que des fichiers de configuration au lieu de coder. Et à la première erreur dans une classe obscure du framework, bonjour pour trouver à quoi c'était dû.
    J'ai aussi essayé JBoss Seam. Le clickodrome est sympa mais là aussi, ça n'a pas été facile de comprendre les mécanismes.
    Symfony, idem ; j'ai vite abandonné.
    J'ai eu à modifier un projet fait sous Laravel : galère pour comprendre comment ça fonctionne !

    Et à chaque fois que j'ai décortiqué le fonctionnement de ces framework pour trouver d'où venait l'erreur qui s'affichait, j'ai vu s'enchaîner une multitude de classes pour afficher une banale page d'accueil.
    Lolwhut ?
    Faudra m'expliquer comment tu peux avoir eut du mal avec Symfony/Laravel car bon niveau prise en main y a pas plus simple ... (a part si tu veux faire le foufou et pas lire la doc)
  6. Avatar de Sodium
    • |
    • permalink
    Donc tu n'as tout simplement pas compris ces frameworks...

    Citation Envoyé par CinePhil
    le 2 beaucoup moins. J'avais l'impression de ne remplir que des fichiers de configuration au lieu de coder.
    C'est le principe des frameworks, factoriser les tâches répétitives au maximum afin de limiter le code pour se concentrer sur la logique. Il est parfaitement logique de ne faire que de la configuration pour un routage ou un modèle.

    Citation Envoyé par CinePhil
    Et à la première erreur dans une classe obscure du framework, bonjour pour trouver à quoi c'était dû..
    C'est d'une mauvaise foi absolue, le rapport d'erreur d'un Symfony est extrêmement simple et détaillé, tandis que Laravel affiche carrément le code qui a posé problème. Si tu as des erreurs dans "une classe obscure du framework", c'est probablement que tu as essayé de faire quelque chose que tu n'aurais pas dû faire.

    Citation Envoyé par CinePhil
    J'ai eu à modifier un projet fait sous Laravel : galère pour comprendre comment ça fonctionne !
    Oui, si on se lance dans la modification d'un projet sous un framework sans s'être formé au-dit framework c'est compliqué...

    Citation Envoyé par CinePhil
    Et à chaque fois que j'ai décortiqué le fonctionnement de ces framework pour trouver d'où venait l'erreur qui s'affichait, j'ai vu s'enchaîner une multitude de classes pour afficher une banale page d'accueil.
    Sauf que le but d'un framework n'est pas d'afficher une page d'accueil mais une application avec ses couches routage/authentification/modèles/templating/cache/sécurité/etc.

    Bref, encore un Rambo de plus qui pense qu'il va faire mieux tout seul qu'une communauté travaillant sur un projet depuis des années, tout ça parce qu'il a la flemme de se former correctement. Faire son propre framework c'est très bien pour s'améliorer en code, par contre il y a zéro intérêt pour que d'autres personnes l'utilisent.

    Arrête de te faire du mal et de te fatiguer à poster des articles de blog, je peux te garantir que ton projet n'intéresse que toi.
  7. Avatar de starlinux
    • |
    • permalink
    Merci CinePhil

    Arrête de te faire du mal et de te fatiguer à poster des articles de blog, je peux te garantir que ton projet n'intéresse que toi.
    n'essaye jamais de détruire le travail de quelqu'un . j'ai les mêmes idées que CinePhil. et je suis très intéressé .