Cette simulation de E-Commerce, intitulée « La Boutique », vient dans le prolongement du support de cours PHP. Elle en est la suite logique dans la mesure où elle en est l’objectif.

Il me parait important vis à vis de l’apprenant, pour garder son attention, sa motivation et palier à l’aspect « abstrait » d’un script, de lui proposer une application immédiate. Cela va se matérialiser par la mise en place de fonctionnalités basiques. C’est par exemple la pagination dans le back-office, pour afficher tous les utilisateurs ou les produits en vente dans un tableau (avec fonctionnalités d’ajout, modification ou suppression), par dizaines. La génération automatique via la méthode GET des catégories dans l’onglet title.

Toujours avec la méthode GET, combinée avec PDO, afficher tous les produits d’une même catégorie en FRONT, par trois (pagination à nouveau). Bref, il s’agit d’utiliser toutes les techniques (et seulement celles proposées dans le support de cours), simples comme complexes, combinées pour élaborer un site E-Commerce, jusqu’au Panier (fonctionnalité qui va nécessiter un script plus complexe).

Bootstrap pour la mise en page

Une fois de plus, comme pour le support de cours PHP, j’ai fait le choix délibéré de ne pas ajouter un fichier CSS. La totalité de la mise en page sera assurée avec de la syntaxe Bootstrap, que ce soit pour les tableaux, les vignettes, pagination, onglets actifs de la nav, le panier etc…

Appréciant énormément ce Framework, j’espère ainsi les amener à l’utiliser (ne serait-ce que pour avoir un site responsive), tout en ajoutant bien sur un fichier CSS personnel.

Éco-conception et optimisation

Et toujours en parallèle, je mets en place les conditions dans mon script, pour que le poids en CO2 de mes pages soit le plus bas possible, optimisant ainsi le chargement des pages du site et améliorant leur référencement !

L’article Simulation de E-Commerce est apparu en premier sur Fatz Studios.

Quel public pour ce support de cours ?

J’ai mis en ligne ce site dans le cadre de mon travail de formateur EVogue, à destination des grands débutants.

Il débute avec le b.a-ba de la syntaxe du langage PHP, pour ensuite monter progressivement vers les aspects plus complexes, tels que les conditions, les boucles, PDO ou encore la sécurité.

Je tenais, avec ce « tutoriel », à relier chaque chapitre avec son application concrète pour construire une simulation de E Boutique. L’élaboration de cette dernière concluant chaque intervention de ma part auprès des apprenants.

Par expérience, et c’est aussi ainsi que j’ai été formé a PHP, l’apprenant sera plus attentif si le bout de code « barbare » permet en fait de mettre en place une fonctionnalité qu’il a rencontre au gré de sa navigation.

En adéquation avec la philosophie et la pédagogie de EVogue, je pense qu’il faut en permanence permettre à l’élève de garder en perspective l’utilité du bagage qu’il lui est proposé, d’une manière ludique. Il débute, je dois l’intéresser et surtout ne pas le perdre !

Bootstrap pour la mise en page

J’ai aussi tenu, presque comme un défi, à ne pas ajouter une seule ligne de CSS. Utilisant seulement la syntaxe et les fonctionnalités du framework Bootstrap (version 4.6). Que cela soit pour les onglets actifs, les listes, tableaux, accordéons ou fenêtres modales.

L’éco-conception pour l’optimisation

Et comme j’en ai désormais l’habitude (un gros coucou a toute la famille Wexample), je fais en sorte de coder propre, dans tous les sens du terme. Et comme en plus cela optimise le chargement des pages … !

L’article Support de cours PHP est apparu en premier sur Fatz Studios.

Un système de recherche

En plus d’un profil public détaillé consultable, Set & Match met a la disposition de ses utilisateurs un système de recherche simple et efficace.

Une barre de recherche par mots clés, pour cibler une spécialité recherchée, un budget équivalent etc…

Il sera aussi possible de rechercher par dates de disponibilités. Ces dernières seront liées à un lieu particulier, par exemple, du 02/03/2021 au 10/03/2021 à Londres.

Les technos utilisées

L’application Set & Match est bâtie sur les frameworks Symfony 4.4 et Bootstrap 4.5.

Pour que l’utilisateur puisse télécharger son portrait, j’ai installé le Vich-uploader Bundle.

J’ai aussi utilisé le plugin DataTables en JQuery pour le CRUD dans l’onglet d’administration.

Très pratique pour son système de pagination, sa barre de recherche et autres filtres intégrés.

La base de données de Set & Match

Une base de données avec une table principale, User, autour de laquelle gravitent les autres (en relations ManyToMany ou OneToMany).

J’ai aussi indexé divers champs, les plus pertinents, pour accélérer la recherche par mots clés.

Le résultat de l’optimisation

Et toutes ces techniques, apprises notamment chez Wexample, ont donné de bons résultats, en performances pures comme en éco-conception.

GreenIt Analysis (plugin Mozilla et Chrome)

Ecograder

Website Carbon

PageSpeed Insights

GTmetrix

L’article Set & Match est apparu en premier sur Fatz Studios.

Lecteur JS qui sélectionne la Playlist en aléatoire
Navigation interne pour écouter les morceaux de la Playlist (presque 600 tracks) de manière individuelle

Plugin JQuery DataTables
pour la pagination du Back Office
Barre de recherche pour filtrer:
– Les albums par année
– Les musiciens
– Les styles musicaux, etc…

Zone de commentaire pour les utilisateurs
sous chaque Player Mp3

L’article MW Radio est apparu en premier sur Fatz Studios.

Codé en PHP – SQL
Bouton « inscription » cliquable
pour alimenter la Base de Données

L’article Tonton & Fils est apparu en premier sur Fatz Studios.