Logo - laConsole

Créer framework PHP : Ressources Statiques (JS, CSS, Images...)

Les utilisateurs du framework ont la possibilité d'ajouter des ressources (CSS, JS, images...) à leur projet au sein du répertoire « public ».

Icône de calendrier
Avancé
10 chapitres

Vous avez une totale liberté sur l’exploitation du dossier 📁 public pour y stocker les ressources (aussi appelées « assets ») du projet. On y créera généralement un sous-dossier par type de contenu.

Créer les ressources

Feuille de style

Le style d’un projet pourrait par exemple se situer dans un dossier 📁 public/css.

📁 public
├── 📁 css
│   └── 📄 app.css

Script

Les scripts d’un projet pourraient par exemple se situer dans un dossier 📁 public/js.

📁 public
├── 📁 js
│   └── 📄 app.js

Médias (images, vidéos…)

On pourrait imaginer avoir un dossier 📁 public/brand contenant les ressources relatives à l’identité de marque du site, comme par exemple :

📁 public
├── 📁 brand
│   ├── 🖼️ logo.svg
│   ├── 🖼️ favicon.svg
│   ├── 🖼️ background.jpg
│   └── 📼 trailer.mp4

On pourrait aussi imaginer avoir un dossier 📁 uploads stockant tous les fichiers téléchargés par les utilisateurs via la plateforme. Ce dossier pourrait ainsi contenir d’autres sous-dossiers, pour classifier ces contenus, comme par exemple :

📁 public
├── 📁 uploads
│   ├── 📁 avatars
│   └── 📁 articles

Lier les ressources

Pour lier des feuilles CSS ou JavaScript, il suffira de se placer dans le 📄 layout.php, et d’y inclure classiquement les balises link et script.

layout.php
copié ! 
<!DOCTYPE html>
<html lang="fr">
	<head>
		...
		<link rel="stylesheet" href="css/app.css">
	</head>
	<body>
		...
		<script src="js/app.js"></script>
	</body>
</html>

Pour lier une ressource média (comme une image par exemple) depuis n’importe quelle page, on précisera son chemin au sein de l’attribut HTML src.

copié ! 
<img src="uploads/avatars/5673uh23y.jpg" alt="Avatar de Toto">