A small MVC framework built with
📦mvc
┣ 📂application
┃ ┣ 📂config
┃ ┃ ┣ 📜database.js
┃ ┃ ┗ 📜routes.js
┃ ┣ 📂controllers
┃ ┃ ┗📜main.js
┃ ┣ 📂models
┃ ┃ ┗📜connection.js
┃ ┗ 📂views
┃ ┗ 📂main
┃ ┣ 📂partials
┃ ┃ ┣ 📜header.ejs
┃ ┃ ┗ 📜footer.ejs
┃ ┗ 📜index.ejs
┣ 📂assets
┃ ┣ 📂scripts
┃ ┣ 📂css
┃ ┗ 📂svg
┣ 📜app.js
┣ 📜.gitignore
┣ 📜LICENSE
┣ 📜package-lock.json
┣ 📜package.json
┗ 📜README.md
- Install nodejs.
- Install nodemon.
npm install -g nodemon- Clone the repository.
- After cloning the repository, type in your terminal.
cd probable-octo-happiness
npm installThis will install the following.
- express
- body-parser
- ejs
- mysql
To start the server, type in your terminal.
nodemon app.jsNavigate to application\config\database.js and put your database info.
const DatabaseConnectionInfo = {
host: "localhost",
port: "3306",
user: "root",
password: "",
connectionLimit: 50,
database: "jsmysql",
};- Navigate to
application\config\routes.js - Import your controller
const MyController = require("../controllers/MyController");- Add the new route
Routes.get("/myNewRoute", function(req,res){
return new MyController(req,res).myFunction();
});- Navigate to
application\controllers - Your controller and class name must be the same. Example:
MyController.js MyController.jsclass should look like:
class MyController{
#req;
#res;
constructor(req,res){
this.#req = req;
this.#res = res;
}
myFunction = async function(){
// your code here
}
}
module.exports = MyController;- Navigate to
application\models - Your model and class name must be the same. Example:
MyModel.js - Import database connection and mysql.
const DatabaseConnection = require("../config/database");
const Mysql = require("mysql");MyModel.jsclass should look like:
const DatabaseConnection = require("../config/database");
const Mysql = require("mysql");
class MyModel{
async myModelFunction() {
// your code here
}
}
module.exports = MyModel;- Navigate to
application\views - You may directly create a view inside the
viewsfolder, but I recommend to create a folder with the name of the controller then create the view inside the folder. See the folder structure. Example:MyController/MyView.ejs MyView.ejsshould look like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>MyView.ejsshould look like:
<%- include("partials/header.ejs") %>
<main>
<h1>Hello Universe!</h1>
</main>
<%- include("partials/footer.ejs") %>- inside
partials\header.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<title><%= title%></title>
</head>
<body>- inside
partials\footer.ejs
</body>
</html>Features are to be added in the future.