tch099-demo-web-app

Ce dépôt sera utilisé comme application web PHP démo à déployer sur le cloud Azure

Example Anis

1. DB
2. MyMobileApp
3. API
4. Frontend

Prérequis

• Docker
• Docker Compose
• Compte Azure Student

Fonctionnalités

• Points de terminaison API: Créez des points de terminaison API personnalisés pour votre application.
• Authentification utilisateur: Implémentez l'authentification utilisateur avec les fonctionnalités de connexion, inscription et déconnexion.
• Intégration de base de données: Utilisez la base de données MySQL pour stocker les données des utilisateurs et autres informations.
• Pages Frontend: Créez des pages frontend avec HTML, CSS et JavaScript.
• Support Docker: Exécutez l'application localement en utilisant Docker Compose.

Configuration de l'environnement

DB_HOST=tch099-db
MYSQL_ROOT_PASSWORD=rootpassword
MYSQL_DATABASE=mydatabase
MYSQL_USER=user
MYSQL_PASSWORD=password

Utilisation de Docker

Pour exécuter l'application localement en utilisant Docker:

- App: http://localhost:8001

- DB: mysql:host=localhost;port=3306;dbname=mydatabase

- Phpmyadmin: http://localhost:8060

Nom d'utilisateur: admin
Mot de passe: rootpassword

Nom d'utilisateur: user
Mot de passe: password

docker-compose up -d --build

Initialisation de la base de données

cd db
python3 -m pip3 install mysql-connector-python python-dotenv
python3 db.py

or

to phpmyadmin

Structure du projet

/

├── api/                        # Dossier contenant les scripts de points de terminaison API
└── utils/                      # Dossier contenant les scripts utilitaires
    └── utils.php               # Fonctions utilitaires pour l'application
│   ├── hello-world.php         # Point de terminaison API pour les messages Hello World
│   ├── login.php               # Point de terminaison API pour la connexion utilisateur
│   ├── logout.php              # Point de terminaison API pour la déconnexion utilisateur
│   ├── randomimage.php         # Point de terminaison API pour obtenir une image aléatoire
│   ├── signup.php              # Point de terminaison API pour l'inscription utilisateur
│   ├── user_details.php        # Point de terminaison API pour récupérer les détails de l'utilisateur
│   └── clients.php             # Point de terminaison API pour récupérer tous les clients

├── db/                         # Dossier contenant les scripts SQL pour la configuration de la base de données
│   ├── 1create.sql             # Script SQL pour créer les tables de la base de données
│   ├── 2contraines.sql         # Script SQL pour ajouter des contraintes
│   ├── 3insert.sql             # Script SQL pour insérer les données initiales dans les tables de la base de données
│   └── db.py                   # Script Python pour créer, modifier et insérer les données initiales dans les tables de la base de données

├── frontend/                   # Dossier contenant les actifs et les pages frontend
│   ├── css/                    # Dossier contenant les fichiers CSS
│   │   └── styles.css          # Feuille de style principale pour le frontend
│   ├── images/                 # Dossier pour stocker les actifs d'image
│   ├── js/                     # Dossier contenant les fichiers JavaScript
│   │   └── script.js           # Fichier JavaScript principal pour le frontend
│   └── pages/                  # Dossier contenant les pages HTML
│       ├── hello-world.html    # Page HTML pour la fonctionnalité Hello World
│       ├── index.html          # Page HTML pour la page d'accueil
│       ├── admin.html          # Page HTML qui voit tous les clients
│       ├── login.html          # Page HTML pour le formulaire de connexion
│       ├── random-image.html   # Page HTML pour afficher une image aléatoire
│       ├── signup.html         # Page HTML pour le formulaire d'inscription
│       └── 404.html            # Page HTML pour les erreurs 404 Not Found

├── config.php                  # Fichier de configuration principal pour le projet
├── router.php                  # Fichier de routage principal pour la gestion du routage URL
├── routes.php                  # Fichier définissant les routes pour l'application
├── Dockerfile                  # Dockerfile pour construire l'image docker
├── docker-compose.yml          # Fichier de configuration Docker Compose pour configurer l'environnement de développement
├── composer.json               # Gestionnaire de dépendances PHP
├── nginx.conf                  # Configuration nginx pour le déploiement Azure

Acteurs

• Utilisateur: Un utilisateur qui interagit avec l'application en se connectant, s'inscrivant et accédant à diverses fonctionnalités.
• Administrateur: Un utilisateur avec des privilèges élevés qui peut gérer les utilisateurs et d'autres aspects de l'application.

Cas d'utilisation

Diagramme de classe

Points de terminaison API

Authentification utilisateur

Connexion

Point de terminaison: /api/login.php

Méthode: POST

Corps de la requête:

{
  "username": "exemple",
  "password": "motdepasse"
}

Réponse:

{
  "status": "success",
  "message": "Connexion réussie"
}

Inscription

Point de terminaison: /api/signup.php

Méthode: POST

Corps de la requête:

{
  "username": "exemple",
  "password": "motdepasse",
  "email": "[email protected]",
  "role": "utilisateur"
}

Réponse:

{
  "status": "success",
  "message": "Inscription réussie"
}

Déconnexion

Point de terminaison: /api/logout.php

Méthode: POST

Réponse:

{
  "status": "success",
  "message": "Déconnexion réussie"
}

Détails de l'utilisateur

Point de terminaison: /api/user_details.php

Méthode: GET

Réponse:

{
  "status": "success",
  "data": {
    "username": "exemple",
    "email": "[email protected]",
    "role": "utilisateur"
  }
}

Admin

Hello World

Obtenir le message de salutation

Point de terminaison: /api/hello-world/$langue

Méthode: GET ou POST

Paramètres de requête:

• nom (optionnel)
• prenom (optionnel)

Réponse:

{
  "nom": "Doe",
  "prenom": "John",
  "langue": "fr",
  "message": "Bonjour le monde John Doe!"
}

Image aléatoire

Point de terminaison: /api/random-image

Méthode: GET

Réponse:

Une URL d'image aléatoire.

Déploiement sur Azure VM

Après d'avoir créer ta machine virtuel connect par ssh change le user et le ip

ssh [email protected]

Enter password

git clone https://github.com/antoinebou12/TCH099

sudo apt-get update
sudo apt-get install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update

sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

sudo chmod +x /usr/local/bin/docker-compose

cd TCH099
sudo docker-compose up -d

Déploiement sur Azure avec le portail

Diagramme de déploiement

• Source 1: https://learn.microsoft.com/fr-fr/azure/app-service/quickstart-php?tabs=cli&pivots=platform-linux
• Source 2: https://learn.microsoft.com/fr-fr/azure/app-service/configure-language-php?pivots=platform-linux
• Source 3: https://learn.microsoft.com/en-us/azure/app-service/tutorial-php-mysql-app#2---set-up-database-connectivity

1. Créer un service d'application web et une base de données

2. Choisir MySQL et PHP

3. Centre de déploiement pour créer la CI/CD

4. Ajouter une commande de démarrage

# mettre cette ligne dans la commande de démarrage
cp /home/site/wwwroot/nginx.conf /etc/nginx/sites-available/default && service nginx reload

5. Vérifier les variables d'environnement

6. SSH dans le conteneur

7. Créer un fichier .ENV avec les bonnes variables en fonction de l'environnement Azure

DB_HOST=tch099-db
MYSQL_ROOT_PASSWORD=rootpassword
MYSQL_DATABASE=mydatabase
MYSQL_USER=user
MYSQL_PASSWORD=password

8. Assure toi d'avoir un private link

Naviguer sur la page de la base de données MySQL dans votre groupe de ressources pour accéder à votre base de données.

Naviguer sur la page de la base de données MySQL dans votre groupe de ressources pour accéder à votre base de données.

Ouvrir le firewall pour votre base de données

Utiliser DB beaver pour accéder à votre base de données

Utiliser SSL pour ce connecter sur la base de données