Comment créé une application web
pour illustré mes information je vais utilisé l'application web que j'ai faite Duran un stage a la SAFRA
l'objectif était de créer un outil pratique et dynamique pour montre en temp et en heure l'état des différent service de la SAFRA (en ligne / hors ligne / en maintenance) Pour cela, j'ai donc eu besoin de créer une application web.
mais c’est quoi une application web? il y a quoi de différent avec un site web?
Une application web est un programme informatique accessible via un navigateur web, offrant une expérience interactive et dynamique aux utilisateurs. Contrairement à un site web qui présente des informations statiques, une application web permet des interactions avancées comme la manipulation de données en temps réel, la personnalisation, et des fonctionnalités complexes.
Exemple : À la SAFRA, j'ai développé une application web pour suivre l'état des différents services (en ligne, hors ligne, en maintenance) en temps réel.
En résumé, un site web est plus axé sur la présentation de contenu, tandis qu'une application web offre une expérience utilisateur plus dynamique et interactive.
quel logiciel faut-il installé?
Éditeur de texte
Pour créer notre application web on va avoir besoin d’un éditeur de texte comme:
- Notepad++
- Visual studio code (VScode)
- bloc note par
(il en existe d’autre mais voici quelque exemple)
image des logiciel
mais c’est quoi VS code?
VS Code est un éditeur de code puissant, gratuit et open-source, populaire auprès des développeurs pour son interface conviviale et ses fonctionnalités avancées.
Serveur local et base de données
Pour tester et développer votre application web localement, vous aurez besoin d'un serveur web et d'une base de données. Voici deux solutions populaires :
- XAMPP
- WAMP
(il en existe d’autre mais voici quelque exemple)
image des logiciel
(la suite des instruction on été réalisé avec le logiciel WAMP)
mais c’est quoi WAMP?
Wamp (Windows, Apache, MySQL, PHP) est un ensemble de logiciels open-source permettant de créer un environnement de développement web sur des systèmes Windows.
Il est utilisé par les développeurs pour créer et tester des sites web et des applications web en utilisant les technologies PHP, MySQL et Apache.
Wamp offre un moyen pratique d'installer et de configurer ces logiciels sur un seul système, facilitant ainsi le développement local de projets web avant de les déployer sur des serveurs en ligne.
En résumé, Wamp est utile pour créer un environnement de développement web complet sur Windows, permettant aux développeurs de travailler efficacement sur leurs projets locaux.
les différent langages de programmation
Pour créer une application web, plusieurs langages de programmation sont utilisés, chacun ayant un rôle spécifique. (HTML CSS JAVASCRIPT PHP SQL)
c’est quoi l’HTML CSS JAVASCRIPT PHP et SQL ?
- HTML (HyperText Markup Language) est utilisé pour structurer et organiser le contenu d'une page web basiquement c’est le “squelette” de la page.
exemple de code HTML
- CSS (Cascading Style Sheets) permet de styliser et de mettre en forme le contenu HTML, rendant la page web plus attractive. il permet de “décorer” la page web.
exemple de code CSS
- JavaScript rend la page interactive en ajoutant des fonctionnalités dynamiques comme des menus déroulants, des animations, et des formulaires interactifs.
exemple de code JS
- PHP est un langage de programmation côté serveur utilisé pour générer du contenu dynamique et interagir avec les bases de données.
exemple de code PHP
- SQL est un langage de requête utilisé pour gérer et manipuler les données stockées dans une base de données.
exemple de code SQL
Création d'une base de données avec phpMyAdmin
Qu'est-ce que phpMyAdmin ?
phpMyAdmin est un outil de gestion de base de données MySQL/MariaDB basé sur le web. Il permet de créer, modifier et gérer des bases de données de manière simple et intuitive.
Étapes pour créer une base de données
Accéder à phpMyAdmin :
Ouvrez votre navigateur web et allez à http://localhost/phpmyadmin. Connectez-vous avec l'utilisateur root (par défaut) et le mot de passe que vous avez défini lors de l'installation de WAMP.(par défaut il n'y a pas de mots de passe)
Créer une nouvelle base de données :
Dans l'interface phpMyAdmin, cliquez sur "Bases de données" dans le menu en haut. Entrez le nom de votre base de données, par exemple safra_services, et cliquez sur "Créer".
Créer une table :
Cliquez sur la base de données que vous venez de créer dans la colonne de gauche. Cliquez sur "Nouvelle table" et entrez le nom de la table, par exemple services, et le nombre de colonnes.
Définissez les colonnes nécessaires, par exemple :
- id (INT, AUTO_INCREMENT, PRIMARY KEY)
- service_name (VARCHAR(255))
- status (VARCHAR(50))
Cliquez sur "Enregistrer" pour créer la table avec les colonnes définies.
Exemple d'interface phpMyAdmin
Déploiement de l'application web
Hébergement sur un serveur distant
Pour rendre votre application web accessible en ligne, vous devez la déployer sur un serveur web. Voici les étapes pour le faire :
Choisir un fournisseur d'hébergement web :
Il existe de nombreux fournisseurs, comme:
- Bluehost
- HostGator
- SiteGround
- etc.
Choisissez un plan d'hébergement qui correspond à vos besoins.
Configurer le serveur web :
Connectez-vous à votre compte d'hébergement et accédez au Panel ou à l'interface de gestion de votre serveur. Créez une base de données sur le serveur, similaire à ce que vous avez fait avec phpMyAdmin localement.
Transférer les fichiers de l'application :
Utilisez un client FTP comme FileZilla pour transférer les fichiers de votre application web depuis votre ordinateur local vers le serveur web. Connectez-vous avec les informations FTP fournies par votre hébergeur et transférez tous les fichiers et dossiers de votre projet.
Configurer les fichiers de configuration :
Modifiez les fichiers de configuration de votre application (par exemple, les fichiers de connexion à la base de données) pour qu'ils utilisent les informations de la base de données de votre serveur web.
Tester l'application en ligne :
Accédez à votre domaine pour vérifier que l'application fonctionne correctement en ligne. Testez toutes les fonctionnalités et corrigez les éventuels problèmes.
Hébergement sur un serveur local
Vous pouvez également héberger votre application web vous-même en utilisant un serveur local. Voici les avantages et inconvénients de cette méthode :
Avantages :
- Contrôle total : Vous avez un contrôle total sur la configuration du serveur et les données.
- Pas de frais d'hébergement : Vous n'avez pas à payer pour un service d'hébergement.
- Flexibilité : Vous pouvez personnaliser l'environnement de développement selon vos besoins spécifiques.
Inconvénients :
- Maintenance : Vous êtes responsable de la maintenance et de la sécurité du serveur.
- Disponibilité : Votre serveur doit être en ligne en permanence pour que l'application soit accessible.
- Bande passante : La capacité de votre connexion internet peut limiter le nombre d'utilisateurs pouvant accéder à l'application simultanément.
Étapes pour héberger une application web sur un serveur local
Installer un serveur web local :
Vous pouvez utiliser WAMP (Windows) ou MAMP (Mac) pour configurer un serveur local. Installez le logiciel et démarrez les services Apache et MySQL.
Déployer l'application localement :
Placez les fichiers de votre application dans le répertoire www (WAMP) ou htdocs (MAMP). Par exemple, pour WAMP, copiez votre projet dans C:\wamp\www\mon_application.
Configurer la base de données :
Utilisez phpMyAdmin pour créer une base de données localement, comme expliqué précédemment. Modifiez les fichiers de configuration de votre application pour utiliser les informations de la base de données locale.
Accéder à l'application :
Ouvrez votre navigateur web et allez à http://localhost/mon_application pour accéder à votre application localement.
Configurer un accès externe (optionnel) :
Si vous souhaitez que d'autres utilisateurs accèdent à votre application via internet, configurez votre routeur pour rediriger le trafic vers votre serveur local (NAT/PAT). Assurez-vous que votre connexion internet a une adresse IP fixe ou utilisez un service de DNS dynamique.
Conclusion
Créer une application web est un processus qui implique plusieurs étapes et technologies. En suivant ce guide, vous pouvez développer une application web fonctionnelle et interactive. Vous pouvez choisir de déployer votre application sur un serveur distant pour une accessibilité en ligne, ou l'héberger vous-même pour un contrôle total et des coûts réduits. Chaque option a ses avantages et inconvénients, et le choix dépendra de vos besoins spécifiques et de vos ressources.