Centre d'aide au développement d'applications web avec Symfony

Formation express

Mis à jour le 16/01/2022

Avant de commencer

Si vous avez suivi notre guide étape par étape, vous devriez avoir configuré et installé tous les composants nécessaires à la création d'une application web.
Si ce n'est pas le cas, assurez-vous de vous référer aux prérequis.

Dans cette rubrique, nous verrons comment afficher une page d'accueil contenant une liste de produits provenant d'une base de données MySQL. Une deuxième page permettra d'afficher les détails d'un produit. Par convention, nous nommerons "home" la page qui présente la liste des entrées dans la table de notre base de données. Sur le même principe la page qui présente le produit avec un identifiant unique sera nommée "produit". Ces termes ont l'avantage de s'adapter à la plupart des situations en restant relativement équivoque.

Si vous êtes habitués à coder des sites internet avec un éditeur de texte, sans logiciel externe, il vous suffit de créer un nouveau dossier depuis l'explorateur de Windows. Ensuite, vous créer un à un ou en utilisant des copier-coller vos fichiers Html ou Php.
Avec Symfony, c'est différent. Il vous faudra exécuter une commande dans un terminal. Cette commande crée un nouveau dossier et télécharge automatiquement tous les fichiers nécessaires à l'utilisation du framework. On y trouvera de quoi configurer de nombreux éléments. Seront également téléchargés depuis cette commande tous les fichiers permettant de démarrer un serveur web, de se connecter à une base de données, etc.

Nous n'explorerons pas dans les détails tous ces fichiers, d'autant plus que certains sont rarement utilisés et d'autres jamais. Afin de vous montrer des résultats rapidement, nous nous pencherons sur ceux qui nous sont vraiment cruciaux.

Programmer un site internet avec Symfony

Tout d'abord, nous allons faire un nouveau projet dans le dossier de développement situé sur votre ordinateur. Dans notre exemple, il s'agit du dossier C:\sites
Au bout de quelques secondes, ou de quelques minutes en fonction de votre machine et de votre connexion internet, vous serez prêt pour la mise en fonction du serveur.

Après avoir l'avoir démarré, il faudra alors de créer un contrôleur. Celui-ci nous permettra dans un premier temps d'afficher notre page d'accueil. Nous verrons immédiatement après comment afficher également la page que l'on appellera produit.

Je vous expliquerai alors comment configurer l'accès à votre base de données. Après l'avoir crée, nous étudierons la manière dont s'opère le fonctionnement des tables au sein du projet.

Pour l'instant, nous n'allons pas nous encombrer avec un espace d'administration, celui-ci est le sujet d'une future étape d'une autre formation avancée.
En revanche, nous allons effectuer à l'aide d'instructions SQL quelques insertions de produits dans notre base de données.
Ceci étant fait, nous afficherons alors la liste des produits que nous venons d'insérer sous forme de liens hypertextes.
Enfin, nous nous occuperons de la gestion de l'affichage de la page de description du produit avec comme paramètre l'identifiant unique sélectionné dans la liste.

Pour ce qui est de la mise en page, nous utiliserons Bootstrap. C'est un modèle de mise en forme avec des styles CSS. Conforme aux normes du W3C, Bootstrap est largement utilisé dans le domaine des applications de site internet. Nous analyserons ensemble cet outil afin d'obtenir de belles interfaces rapidement et efficacement. Vous verrez que ce système offre une grande compatibilité entre les différents navigateurs tel que Google Chrome, Edge, Safari ou encore Opera.

Etape suivante

Procédez à toutes les étapes listées ci-dessous. Il est primordial de respecter l'ordre.

Démarrage de notre e-commerce avec Symfony

La méthode pour réaliser un site web par le biais de l'éditeur Visual Code Studio est décrite dans cette étape.

Affichage de la page d'accueil

Le contrôleur affiche la liste des articles ou des produits de la base de données. La route permet de définir l'url d'une page internet.

Création d'une base de données Sql dans Symfony

Dans cette documentation, vous retrouverez les étapes à suivre afin de mettre en place une base de données MySQL ou PostgreSQL dans Symfony.

Affichons une liste des produits d'une requête SQL

L'utilisation du composant Doctrine nous donnera la possibilité de nous connecter à la base de données MySQL et d'afficher la liste des articles.

Affichons un produit de notre base de données

Suite à notre requête SQL sur la base de données, nous allons afficher le détail d'un article après avoir cliqué sur un lien hypertexte.
Menu