NodeJs Tutorials
- NodeJs
- Install NodeJs
- Why use NodeJs
- NodeJs Process Model
- create First Application
- Run NodeJs Application
- Node.js Console
- Node.Js Modules
- URL Modules
- node.js Callback
- Node.js Events
- Upload Files
- Upload single & Multiple Files
- NodeJs File System
- NodeJs Email
- Debugging NodeJs
- .ENV
- NodeJs Mysql
- Helpers
- encription and decription in nodeJs
- Query string
- Date & Time
- Express Js
- Template Engine with Express
- MVC Pattern in Node.Js
- list of NPM Module
- Middleware
- Body Parser
- Render
- Nodemon module
- Morgan module
- Flash Message in ExpressJs
- Session
- Session store in database
- Cookies
- Helmet
- Multer
- Router: How To Use Routing In Node.Js
- App.Js
- express.json() and express.urlencoded()
- REST APIs in NodeJs
- Gloabal Objects
- Submit Form Data
- How to get Post Data in Node.js
- How to Get URL Parameters in Node.js
- How to create Node Project
- How to Insert Form Data Into the MySql Table Using Node.js
- How to fetch Data from MySQL database table using Node.js
- CRUD Example
- Await and Async
- Promises
- Login Example
- Password Encription
- How to validate Form (Form Validation) in Node.Js?
- Registration & Login form usingn Node.Js & MySql?
- Forgot & Reset Password
- File Upload in Node.Js with ExpressJs
- Resize Image Before Upload using Multer Sharp
- Upload multiple file using node.js with multer module
- Upload file using node.js with multer module
- Client IP Address
- REST API Downloading File in NodeJs
- Export and Download CSV From MySQL Database
- CRUD REST API
- CRUD REST API Example 2
- Enable HTTPS using Node
- How to send EMAIL using NodeJs?
- Dynamic dependent dropdown using NodeJs?
- Autocomplete Search
- Get and Send Data From Ajax Request
- Get and Post Data using Ajax
- Passport Authentication
- Node Js Data type
- Node Js Error
- Node Js Array Function
- Node Js String Function
- Puppeter Module
MVC design pattern in NodeJs?
Model, View and Controllers (MVC)
MVC is the most popular & useful design pattern for web application.
File Name :
Model :- model is used to handle the database. in model you can write the logics related to the Database like CRUD (create, read, update, delete queries). It takes the query request from the controller & sends the response back to the controller.
Views :- view is used to handle the view pages. In view page, you can write HTML code for displaying a web page on the web browser. Even you can send the data from the controller to view for displaying data dynamically.
Controllers :- controllers control the request & response of Model & View. in controller file you can write the functionality & logic to develop dynamic web applications. Even it takes the data request from the views & sends it to the model and sends the response back to the view page.
c:/> npx express --view=ejs project_name
when you run this command on your terminal it creates a directory project_name. and also create multiple directory in this project directory. It provides only views folder.
but It will not generate Controllers & Models folder in your project directory(folder).
so you have to create manually controllers and model folder in your project.
File Name :
Model :-
File Name : crud_model.js
module.exports={
createCrud:function(){
data="Form data was inserted";
return data;
},
fetchCrud:function(){
data="data was fetched";
return data;
},
editCrud:function(editData){
data= "Data is edited by id: "+editData;
return data;
},
UpdateCrud:function(updateId){
data= "Data was updated by id: "+updateId;
return data;
},
deleteCrud:function(deleteId){
data= "Data was deleted by id: "+deleteId;
return data;
}
}
views:-
File Name :
<!DOCTYPE html>
<html>
<head>
<title>CRUD</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<style>
table, td, th {
border: 1px solid #ddd;
text-align: left;}
table {
border-collapse: collapse;
width: 50%;}
.table-data{
position: relative;
left:150px;
top:100px;}
th, td {
padding: 15px;}
</style>
</head>
<body>
<% if(typeof editData!='undefined'){ %>
<h1><%= editData %></h1>
<form method="POST" action="/crud/edit/<%=editId %>">
<input type="submit" value="Update Data">
</form>
<% } else{ %>
<h1>Crud Operation</h1>
<h3>This is View Page</h3>
<h4>Create Data</h4>
<form method="POST" action="/crud/create">
<input type="submit" value="Create Data">
</form>
<% } %>
<br><br> <br><br>
<table border="1" >
<tr>
<th><a href="/crud/form">Crud Form</a></th>
<th><a href="/crud/fetch">Fetch Data</a></th>
<th><a href="/crud/edit/5">Edit Data</a></th>
<th><a href="/crud/delete/5">Delete Data</a></th>
</tr>
</table>
</body>
</html>
Include model file crud-model.js in the controller file crud-controller.js .
var crudModel=require('../models/crud_model');
render the view page.
res.render('crud-view');
Controller :-
File Name : crud-controller.js
var crudModel=require('../models/crud_model');
module.exports={
crudForm:function(req, res) {
res.render('crud-view');
},
createCrud:function(req,res){
const createData=crudModel.createCrud();
res.send('<h1>'+createData+'</h1>');
},
fetchCrud:function(req,res){
const fetchData=crudModel.fetchCrud();
res.send('<h1>'+fetchData+'</h1>');
},
editCrud:function(req,res){
const editId=req.params.id;
const editData= crudModel.editCrud(editId);
res.render('crud-operation',{editData:editData,editId:editId});
},
UpdateCrud:function(req,res){
const updateId=req.params.id;
const updateData= crudModel.UpdateCrud(updateId);
res.send('<h1>'+updateData+'</h1>');
},
deleteCrud:function(req,res){
const deleteId=req.params.id;
const deleteData= crudModel.deleteCrud(deleteId);
res.send('<h1>'+deleteData+'</h1>');
}
}