DEV Community: Jethron Kashira

Comprendre le Design Pattern MVC avec Node.js, Express et MongoDB

Jethron Kashira — Mon, 06 Jan 2025 13:55:32 +0000

Le design pattern MVC (Model-View-Controller) est une approche populaire pour organiser le code des applications web. Il permet de séparer les responsabilités, rendant le code plus propre, maintenable et évolutif. Dans cet article, nous allons expliquer le concept de MVC et construire un exemple simple avec Node.js, Express, et MongoDB.

Qu'est-ce que le pattern MVC ? Le pattern MVC divise une application en trois parties principales :

Model (Modèle) : Gère les données, les règles métier et la logique. Il interagit souvent avec une base de données.
View (Vue) : Gère l'affichage et l'interface utilisateur. Elle reçoit les données du contrôleur pour les présenter.
Controller (Contrôleur) : Sert de pont entre le modèle et la vue. Il reçoit les requêtes de l'utilisateur, appelle les méthodes du modèle, et envoie les données à la vue.

Exemple visuel d'un flux MVC :

L'utilisateur envoie une requête HTTP via le navigateur.
Le Controller reçoit la requête, interagit avec le Model pour obtenir des données.

Le Model retourne les données au Controller, qui les passe à la View pour l'affichage.

Mise en œuvre de MVC avec Node.js, Express et MongoDB

Nous allons créer une simple application de gestion de tâches. L'utilisateur pourra ajouter, afficher et supprimer des tâches.

Étape 1 : Configuration du projet

Créez un dossier pour votre projet et initialisez un projet Node.js.

Terminal

mkdir mvc-tasks
cd mvc-tasks
npm init -y

Installez les dépendances nécessaires :

Terminal
npm install express mongoose ejs body-parser

Étape 2 : Structure du projet

Organisez votre projet comme suit :

Structure du projet

mvc-tasks/
├── models/        // Contient les fichiers pour le modèle (base de données)
├── views/         // Contient les fichiers pour la vue (HTML, EJS, etc.)
├── controllers/   // Contient les fichiers pour les contrôleurs
├── public/        // Contient les fichiers statiques (CSS, JS, images)
├── app.js         // Point d'entrée de l'application
└── package.json

Étape 3 : Créer le modèle (Model)

Dans le dossier models, créez un fichier Task.js :

code Javascript

import mongoose from "mongoose";

// Définir le schéma
const taskSchema = new mongoose.Schema({
  title: { type: String, required: true },
  completed: { type: Boolean, default: false },
});

// Exporter le modèle
export default mongoose.model("Task", taskSchema)

Étape 4 : Créer le contrôleur (Controller)

Dans le dossier controllers, créez un fichier taskController.js :

code javascript

import Task from "../models/Task");

// Afficher toutes les tâches depuis la base de donnée

export const getAllTasks = async (req, res) => {
  try {
    const tasks = await Task.find();
    res.render("index", { tasks });
  } catch (error) {
    res.status(500).send("Erreur lors de la récupération des tâches");
  }
};

// Ajouter une nouvelle tâche
code Javascript

export const addTask = async (req, res) => {
  try {
    const { title } = req.body;
    await Task.create({ title });
    res.redirect("/");
  } catch (error) {
    res.status(500).send("Erreur lors de l'ajout de la tâche");
  }
};

// Supprimer une tâche
code Javascript

export const deleteTask = async (req, res) => {
  try {
    const { id } = req.params;
    await Task.findByIdAndDelete(id);
    res.redirect("/");
  } catch (error) {
    res.status(500).send("Erreur lors de la suppression de la tâche");
  }
};

Étape 5 : Créer la vue (View)

Dans le dossier views, créez un fichier index.ejs :

code html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gestion des tâches</title>
</head>
<body>
  <h1>Liste des tâches</h1>

  <form action="/tasks" method="POST">
    <input type="text" name="title" placeholder="Ajouter une tâche" required />
    <button type="submit">Ajouter</button>
  </form>

  <ul>
    <% tasks.forEach(task => { %>
      <li>
        <%= task.title %> 
        <a href="/tasks/delete/<%= task._id %>">Supprimer</a>
      </li>
    <% }); %>
  </ul>
</body>
</html>

Étape 6 : Configurer Express (dans le fichier App.js)

Voici le contenu de app.js :

code javascript

import express from "express";
import mongoose from "mongoose"
import bodyParser from "body-parser";
import taskController from "./controllers");
import {getAllTasks, addTask, deleteTask } from "../controllers/taskController.js"

const app = express();

// Configuration de la base de données
mongoose
  .connect("mongodb://127.0.0.1:27017/mvc-tasks", 
{ 
  useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log("Connecté à MongoDB"))
  .catch((error) => console.log("Erreur de connexion à MongoDB :", error));

// Configuration de l'application
app.use(bodyParser.urlencoded({ extended: true }));
app.set("view engine", "ejs");

// Routes
app.get("/", getAllTasks);
app.post("/tasks", addTask);
app.get("/tasks/delete/:id", deleteTask);

// Démarrage du serveur
app.listen(3000, () => console.log("Serveur démarré sur http://localhost:3000"));

Nous avons séparé les responsabilités de notre application :

Model : **Gestion des données (MongoDB).
**Controller : **Logique de l'application.
**View : Interface utilisateur (EJS).

Cette structure rend votre code plus clair et plus facile à maintenir. Vous pouvez étendre cette application en ajoutant des fonctionnalités comme la modification des tâches ou la gestion des utilisateurs.

J'espère que vous avez aimé.. Des questions ? Mettez-les en commentaire.

Débutez en programmation avec Javascript.

Jethron Kashira — Fri, 17 Mar 2023 19:47:51 +0000

Bienvenu sur ce mini tutoriel sur javascript !

Nous allons aborder 4 points dans cet article.

introduction
Les bases de Javascript
Les variables en javascript
Les opérateurs en javascript
Les fonctions
Les boucles et conditions

et enfin

La conclusion (en bref).

1. INTRODUCTION

C'est quoi Javascript ?

Bien..

Javascript est un langage de programmation très populaire aujourd'hui. Avec sa popularité croissante, il est devenu un langage de base pour les développeurs web.

Si vous êtes débutant en programmation ou que vous cherchez simplement à apprendre Javascript, vous êtes au bon endroit. Dans cet article, nous allons vous donner un aperçu des bases de la programmation en Javascript.

2. Les bases de Javascript

Pour commencer, il est important que vous compreniez que Javascript est un langage de programmation basé sur les objets. Cela signifie que tout en Javascript est un objet, qu'il s'agisse d'une chaîne de caractères, d'un nombre ou même d'une fonction. Pour créer des objets Javascript, vous pouvez utiliser des "constructeurs" qui vous permettent de créer des objets personnalisés avec des propriétés et des méthodes particulières.

3. Les Variables en Javascript

Avant de pouvoir commencer à travailler avec des objets, il est important de comprendre comment fonctionnent les variables en Javascript. Bon, ce pas si grave! Allons-y doucement ! Les variables sont des emplacements dans la mémoire de votre ordinateur où vous pouvez stocker des données. Pour créer une variable en Javascript, vous pouvez utiliser le mot clé "let", "const" et "var".

😫 Mais, c'est quoi encore c'est truc de letconstVar ! Ça casse toute ma compréhension !

Non ! Allons-y molo molo...😇

"var" Déclare une variable globale ou locale. Les variables déclarées avec "var" sont toujours fonction-scope...

🤦 Arrete ! fonction-scope ?

Oui, pour dire qu'elles sont attachées aux objets "function" et peuvent être utilisées à l'extérieur de la fonction si elles sont déclarées en dehors de la fonction. "var" est utilisé dans les versions précédentes de JavaScript et est toujours pris en charge dans les versions les plus récentes de JavaScript.

Par exemple:

var x = 5;
function alpha() {
  var y = 10;
}
console.log(x);

🤭 aaaah ouii.. je me rappelle que "console.log()" est une méthode JavaScript qui permet d'afficher du texte dans la console du navigateur ou de l'EDI (l'environnement de développement intégré comme Visual Studio Code).

Oui, tu as raison, et là tu commences à comprendre les choses petit à petit.. 😇 Okay, on continue..

Dans cet exemple, "x" est une variable globale, tandis que "y" est une variable locale à la fonction "alpha".

Par ailleurs,

"let" Déclare une variable locale avec la portée de bloc, ce qui signifie que la variable n'existe que dans le bloc où elle est déclarée et dans les sous-blocs de ce bloc. "let" est disponible à partir d'ECMAScript 6.

Observe cet exemple :

let x = 5;
if (true) {
  let y = 10;
  console.log(x);
}
console.log(y);

Dans cet exemple, "x" est accessible à l'intérieur du bloc "if", mais "y" n'est accessible que dans le bloc "if".

et enfin,

"const" Déclare une variable constante en lecture seule avec une portée de bloc. Les variables déclarées avec "const" ne peuvent pas être réaffectées ou redéclarées, ce qui les rend idéales pour déclarer des constantes, des listes de choix ou des valeurs arbitraires dans votre code. "const" est également disponible depuis ECMAScript 6.

Par Exemple:

const decimalNumber = 3.14;
console.log(decimalNumber);

Dans cet exemple, "decimalNumber" est une variable constante en lecture seule qui ne peut pas être réaffectée ou redéfinie.

4. Les Opérateurs en Javascript

Les opérateurs en Javascript sont les symboles utilisés pour effectuer des opérations mathématiques de base, telles que l'addition, la soustraction, la division et la multiplication. En Javascript, il existe plusieurs opérateurs arithmétiques tels que :

" + " : pour l'addition

" - " : pour la soustraction

" * " : pour la multiplication

" / " : pour la division

et l'opérateur :

" % " : .....

🤔 non attends ! Ça je connais.. L'opérateur "pourcentage" pour calculer les pourcentage en javascript...!

Nooooooon... là carrément tu tape le mur de jericho 😍 !

Tenez !

En JavaScript, l'opérateur % représente l'opération de modulo, qui renvoie le reste entier de la division d'un nombre par un autre.

Par exemple, si on utilise l'opérateur % dans l'expression 15 % 4, alors le résultat sera 3, car c'est le reste de la division entière de 15 par 4.

En effet :

15 = 3 x 4 + 3

J'espère que là on se comprend et tu vas plus croire que l'opérateur % calcule les pourcentage en javascript..

Passons aux fonctions alors..

5. Les Fonctions en JavaScript

Les fonctions en Javascript sont des blocs de code qui effectuent des tâches spécifiques. Les fonctions sont très utiles car elles vous permettent de réutiliser le même code plusieurs fois sans avoir à le réécrire chaque fois.

Pour créer une fonction en Javascript, vous pouvez utiliser le mot-clé "function":

function somme(nombre1, nombre2) {
  return nombre1 + nombre2;
}

Dans cet exemple, nous avons créé une fonction appelée "somme" qui prend deux paramètres (nombre1 et nombre2) et retourne la somme de ces deux nombres.

6. Boucles et Conditions

Les boucles et les conditions sont des éléments essentiels de la programmation dans tous les langages de programmation. Avec les boucles, vous pouvez exécuter le même bloc de code plusieurs fois, tandis qu'avec les conditions, vous pouvez exécuter un bloc de code si une condition particulière est remplie. Là, on est d'accord !

Observez cet exemple :

if (age < 18) {
  console.log("Vous n'êtes pas majeur.");
} else {
  console.log("Vous êtes majeur.");
}

Dans cet exemple, nous avons créé une condition qui teste si l'âge est inférieur à 18 ans. Si la condition est vraie, nous affichons un message disant que la personne n'est pas majeure. Si la condition est fausse, nous affichons un message disant que la personne est majeure.

7. En bref,

Comprenez que Javascript est un langage de programmation très populaire et la compréhension de ses bases est essentielle pour tout développeur web. Nous espérons que cet article vous a fourni un aperçu des bases de la programmation en Javascript et que vous êtes prêt à commencer à coder en Javascript. Avec un peu de pratique, vous pourrez bientôt créer de superbes sites web dynamiques et interactifs en utilisant Javascript.

Jéthron Kashira

Comment réaliser un Timer en Javascript

Jethron Kashira — Fri, 16 Dec 2022 10:12:37 +0000

Pour créer un Timer en Javascript, tout d'abord il faut commencer par créer 3 fichiers dans votre dossier: un fichier HTML, Un fichier CSS pour le style et un fichier Javascript pour interagir avec le DOM ( Notre fichier HTML ).

Index.html
app.css
main.js

Ensuite, nous allons vite créer un div qui va contenir notre Timer. Le Timer que nous allons créer va décrémenter à partir de 25min, lorsque vous le lancez.


 <div class="container">  
        <h1 id="counter">
            <span id="text"> 25 : 00 </span>
        </h1>
 </div>

N'oubliez pas de relier vos fichiers pour qu'ils interagissent entre eux ! Dans notre cas ici, nous allons relier notre fichier Javascript à l’intérieur de notre HTML comme ceci :


 <script src="./main.js"></script>

Ce qui nous reste maintenant, c'est d'aller écrire du code dans notre main.js.
Pour interagir avec le DOM, nous devons sélectionner l'élément que nous souhaitons modifier, à partir de notre fichier Javascript. Et cela, nous allons le faire comme ceci :

document.getElementById("counter").textContent = "00 : 00"

Ce code, nous allons le mettre à l'intérieur de la fonction setInterval. En JavaScript, setInterval est plus utilisé pour déclencher des action après un intervalle de temps donné, ou de la répéter après un intervalle de temps. Voici ce que cela va nous donner:

setInterval(function () {
    if (minutes == 0 && secondes === 1) {
        document.getElementById("counter").textContent = "00 : 00"
    }

À ce niveau nous avons crée une fonction avec la méthode setInterval. Nous avons posé une condition qui est tel que, les minutes lorqu'ils serons à 0 et les secondes à 1, que l'élément "counter" qui est sélectionné puisse afficher "00 : 00", dans le cas contraire, il va décrémenter !

else {
        secondes--;
        if (secondes == 0) {

            minutes--;
            secondes = 60;
            if (minutes == 0) {
                minutes = minutes

            }

Puis Ceci :

if (minutes.toString().length == 1) {
            minutes = "0" + minutes;
        } if (secondes.toString().length == 1) {
            secondes = "0" + secondes;
        }
        document.getElementById("counter").textContent = minutes + ":" + secondes;
    }
}, 1000)

et enfin voilà, la décrémentation de notre Timer va débuter à partir de 25 min et les seconde décrémenterons à partir de 60min..

Tapez un like si tu as aimé..

Créez votre premier serveur avec node.js

Jethron Kashira — Thu, 15 Dec 2022 09:37:12 +0000

Pour créer un serveur avec node, faites seulement ceci :
const http = require('http');

const server = http.createServer((req, res) => {
    res.end('Voilà la réponse du serveur !');
});

server.listen(process.env.PORT || 5000);

Ah bon ? Seulement ça ? 😇

Oui, là nous avons crée notre premier serveur avec node, mais avant de vous expliquez très bien le code, comprenons d'abord c'est quoi un serveur et c'est quoi Node !

Quand vous naviguez sur internet, vous faites la plupart de fois une demande à un autre ordinateur connecté sur internet, qui vous fournit alors la page web en réponse. L’ordinateur avec lequel vous parlez au travers internet c'est un serveur web. Un serveur web reçoit des requêtes HTTP d’un client, comme par exemple votre navigateur, et fournit ensuite une réponse HTTP, comme une page HTML ou du JSON d’une API.

Et en quoi est-ce que node intervient dans tout ça...🤔

Node.js est un runtime qui nous facilite l'écriture de nos taches coté serveur

Créez votre premier serveur avec node.js

Jethron Kashira — Tue, 01 Nov 2022 03:07:36 +0000

Pour créer un serveur avec node, faites seulement ceci :

const http = require('http');
const server = http.createServer((req, res) => {
    res.end('Voilà la réponse du serveur !');
});

server.listen(5000);

Ah bon ? Seulement ça ? Et je viens de créer tout un serveur ? 😇

Oui, tout un serveur!

Là nous avons crée notre premier serveur avec node, mais avant de vous expliquer très bien le code, comprenons d'abord c'est quoi un serveur et c'est quoi Node !

Quand vous naviguez sur internet, vous faites la plupart de fois une demande à un autre ordinateur distant connecté sur internet, qui vous fournit alors la page web en réponse.

L’ordinateur avec lequel vous parlez au travers internet c'est ce qu'on appelle 'Un serveur web'. Un serveur web reçoit des requêtes HTTP d’un client(Votre navigateur), et fournit ensuite une réponse HTTP, comme une page HTML ou du JSON d’une API.

Et en quoi est-ce que node intervient dans tout ça...🤔

Node.js est un runtime qui nous facilite l'écriture de nos taches coté serveur. Il est basé sur le moteur V8 qu'on retouve dans chrome. Comprenez SIMPLEMENT que, node.js, c'est du Javascript coté serveur. C'est bon n'est ce pas 😍

Oui, et alors, son avantage c'est quoi donc..

Avec Node, vous avez la possibilité de créer des applications RTA (Real Time Application). C'est une catégorie d'application qui auront besoin de se mettre à jour fréquemment et en temps réel. Par exemple quand vous faites la messagerie instatannée avec whats'app, c'est du Real Time ! Ça donne envie d'aller plus loin, mais, laissez-moi vite passer vous expliquer le code là ! là en haut.. Nous l'avions déjà oublié 😇

const http = require('http');

Ici, nous venons d'importer le package HTTP inclus nativement dans node pour créer notre serveur. Nous l'avons passé une fonction qui l'executera à chaque fois qu'il y aura un appel vers ce serveur. Le mot clé 'require' nous sert simplement de désigner l'importation de notre module (Au lieu de 'import').

const server = http.createServer((req, res) => {
    res.send('Hey, c'est ça ma réponse 😍  !');
});

Ensuite, là nous venons de créer une fonction appélée 'server' qui va recevoir deux objets en arguments : 'request' et 'response'. vers la fin, nous avons utilisé dans cet exemple la méthode 'send' de l'objet 'response', pour renvoyer une réponse du type string au client.

server.listen(5000);

Et voilà le code qui nous permet d'écouter notre serveur au port 5000.

Est-ce que ça va marcher si j'essayes ?

Oui, ça va marcher! Essayes seulement en lançant le serveur. Faites : node server.js/

Bravo ! Vous avez crée et lancer votre premier serveur avec Node.js !

Écrit par Jéthron Kashira.