Tutoriels Vidéo
Parcourez ma collection de tutoriels vidéo sur le développement web, JavaScript, PHP, les bases de données et bien plus encore.
Serveur Web Apache - 1. Config de base
Comment configurer les serveur Web Apache. 1. Fichiers de configuration et leurs structure 2. Les directives et les sections de configurations (Listen, Directory, AllowOverride, Require, ...) 3. Répertoire de base du site web (DocumentRoot) 4. Options et droits d'accès aux ressources (Options, Require, ...) 5. Les répertoires virtuels (Alias) Voir la suite : https://youtu.be/JqwsTUkbEVA
xampp - Environnement de développement pour PHP
Comment mettre en place un environnement de développement pour PHP. Il vous faut un serveur Web comme Apache, configurer pour passer les requêtes à l'interpréteur PHP. Un serveur de bases de données comme MySQL ou MariaDB avec PhpMyAdmin pour le gérer. Dans cet vidéos, je montre les aspects important à tenir en compte pour mettre en place un tel environnement : 1. Aperçu et installation de XAMPP 2. Description détaillée de Xampp Control Panel 3. Démarrage et diagnostique des erreurs des serveurs 4. Localisation des programmes et des fichier de configuration. Dans la vidéo suivante, je vais montrer la configuration de base du serveur Web Apache.
sp-slides ou comment créer des présentations html dynamiques
sp-slides permet de créer des présentation html pour expliquer les concepts du Web en général. sp-slides est Open Source. 1. Créer une nouvelle présentation 2. Exécuter la présentation 3. Ajouter des slides simples 4. Ajouter des slides contenant du code HTML, CSS et JS dynamique 5. Synchroniser les slides avec les séquences d'une ou plusieurs vidéos Youtube. J'ai développé cette application pour mes besoins personnels, car aucune des solutions Open Source ne répond vraiment à mes attentes. Voici quelque liens de présentations que vous pouvez utiliser comme exemple : 1. https://gc.daaif.net 2. https://css-layouts.daaif.net 3. https://js2.daaif.net
Simple Web Server avec Express et Node JS.
Créer un site Web pour servir des pages statiques. 1. Initialisation d'une application Node avec npm init 2. Installation du package Express 3. Création du fichier d'entrée de l'application 4. Ajout du dossier publique et des pages html 5. Démarrage de l'application 6. Ajout de feuilles de style. Le but est de montrer qu'on peut créer un vrai Serveur Web avec quatre ligne de code.
4# Javascript asynchrone, async/await
async/await permettent d'écrire du code asynchrone comme s'il s'agit d'un code synchrone. Cela simplifie la lisibilité du code. Cette vidéo fait partie de la série js-async : 1 - https://youtu.be/7Gevq7rZIPI 2 - https://youtu.be/VAw4-umCOck 3 - https://youtu.be/52e_CWjMCf8
1# Javascript asynchrone, pourquoi et comment ?
Comment s'exécute le code asynchrone dans Javascript ? Pourquoi l'ordre d'exécution des instructions peut être difficile à prédire ? A travers des exemples simple, je montre : 1. Création et appelle d'une fonction asynchrone 2. Création d'une fonction utilisant XMLHttpRequest pour faire une requête GET et récupérer un fichier JSON. 3. Comment synchroniser plusieurs appels asynchrone ? Cette vidéo fait partie de la série js-async : 2 - https://youtu.be/VAw4-umCOck 3 - https://youtu.be/52e_CWjMCf8 4 - https://youtu.be/y-JAqyqSPc8
3# Javascript asynchrone, Promise
Les promesses en Javascript ou comment gérer efficacement le code asynchrone. A travers un exemple, je montre : 1. C'est quoi une promesse 2. cycle de vie d'une promesse 3. Créer une promesse pour requête HTTP avec XMLHttpRequest 4. Ecrire l'exécuteur de la promesse 5. Utiliser la promesse avec les méthodes then() et catch() 6. Utiliser Promise.all() Cette vidéo fait partie de la série js-async : 1 - https://youtu.be/7Gevq7rZIPI 2 - https://youtu.be/VAw4-umCOck 4 - https://youtu.be/y-JAqyqSPc8
2# Javascript asynchrone, Callback hell ?
Le code asynchrone peut devenir difficile à lire et à maintenir. Cette vidéo montre la structure du code nommée Callback hell ou montagnes de callbacks. Cette vidéo fait partie de la série js-async : 1 - https://youtu.be/7Gevq7rZIPI 3 - https://youtu.be/52e_CWjMCf8 4 - https://youtu.be/y-JAqyqSPc8
☕ Caractères unicode et Javascript ⛲⛲⛲
Présentation de l'application web Unicode Viewer. Elle permet de visualiser l'étendu des caractères unicode et leur utilisation. La démo est accessible à https://utf.daaif.net Le code source à : https://github.com/a-daaif/unicode
React Router ou comment créer une application SPA avec ReactJS
Créer une application SPA (Single Page Application) avec React est facile et intuitif. A travers l'exemple d'un Blog, cette vidéo montre : 1. Comment créer une application SPA simple contenant trois pages (Home, A propos et Blog) 2. Comment créer et structurer les composants de la page 3. Installer le package react-router-dom 4. Utiliser les composants BrowserRouter, Route et Link de react-router-dom pour créer le système de navigation de la SPA. 5. Tester avec la barre de Navigation et dans la barre d'adresse 6. Utiliser l'API Fetch et useEffect() pour récupérer des données JSON du serveur. 7. Utiliser useState() pour rafraîchir l'état d'un composant 8. Utiliser des liens paramétrés et récupérer les valeurs des paramètres
5# Création d'un site Web Wordpress de A à Z - Elementor
Utilisation de l'extension Elementor pour la création de la page d'accueil.
4# Création d'un site Web Wordpress de A à Z - Personnalisation
Personnalisation du thème OceanWP . 1. Barre supérieure et réseaux sociaux 2. Entête, logo, menu et recherche 3. Page d'accueil et page du blog 4. Barre latérale 5. Pied de page et Widgets 6. Bas du pied de page.