[go: up one dir, main page]
Scribd
Upload
287 views144 pages

ExpressJs Handwritten Notes

Uploaded by

Ritesh Raj

1. ExpressJS is a fast, unopinionated, and minimalist web framework for Node.js that doesn't force developers to structure their files in a particular way. 2. Middleware functions in Express have access to the request and response objects and can perform tasks like executing code, modifying request/response objects, ending the request-response cycle, or calling the next middleware. 3. Adding static assets like CSS, JS, and image files in Express just requires placing them in a folder like /public and accessing them without setting the full path - Express will serve them automatically from that folder.

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt

ExpressJs Handwritten Notes

Uploaded by

Ritesh Raj
287 views144 pages
1. ExpressJS is a fast, unopinionated, and minimalist web framework for Node.js that doesn't force developers to structure their files in a particular way. 2. Middleware functions in Express have access to the request and response objects and can perform tasks like executing code, modifying request/response objects, ending the request-response cycle, or calling the next middleware. 3. Adding static assets like CSS, JS, and image files in Express just requires placing them in a folder like /public and accessing them without setting the full path - Express will serve them automatically from that folder.

Original Title

ExpressJs handwritten Notes

Copyright

© © All Rights Reserved

Available Formats

PDF, TXT or read online from Scribd

Did you find this document useful?

Is this content inappropriate?

1. ExpressJS is a fast, unopinionated, and minimalist web framework for Node.js that doesn't force developers to structure their files in a particular way. 2. Middleware functions in Express have access to the request and response objects and can perform tasks like executing code, modifying request/response objects, ending the request-response cycle, or calling the next middleware. 3. Adding static assets like CSS, JS, and image files in Express just requires placing them in a folder like /public and accessing them without setting the full path - Express will serve them automatically from that folder.

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
287 views144 pages

ExpressJs Handwritten Notes

Uploaded by

Ritesh Raj
1. ExpressJS is a fast, unopinionated, and minimalist web framework for Node.js that doesn't force developers to structure their files in a particular way. 2. Middleware functions in Express have access to the request and response objects and can perform tasks like executing code, modifying request/response objects, ending the request-response cycle, or calling the next middleware. 3. Adding static assets like CSS, JS, and image files in Express just requires placing them in a folder like /public and accessing them without setting the full path - Express will serve them automatically from that folder.

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
You are on page 1/ 144

ExpressJs :

Fast , unopionated,
minimalist web
framework for Node.js.

----> Unopinionated means, doesn't you HOW TO STRUCTURE YOUR


Files.
Angular
Sails.js
Meteor
Next.js
Svelte
automatically handles by express
prevoius we had to
use Switch cases.
Non-Ajax or Synchronous object.
_ _ dirname: __dirname is an environment variable
that tells you the absolute path
of the directory
containing the currently executing file.

View: View is the file that is viewed by the users.


How to setup use ejs?

Tell express
that ejs will be the
view Engine/
Template engine
that will be used.
tell express
where
the views
file
is kept.
so, whenever html changes
it doesn't
get precompiled.
creating a
controller
for
practice
html file.
for loop
in html
if statement.

It will
always be true.
passing contact list as
one of our locals.
using method
post since, we have to some
change in the database.
before view show us
we pages.

make a route
in controller.
now it will take you to the
other page. /practice
form Filled

Submit

Action Required

Redirected

analyze the data


in parse.
create server (write at last) app.listen(port, function(err){

Express const app = express();


app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

app.get('/', function(req, res){


return res.render ('home', {
// locals or 'context'
title: "Contact List",
contact_list : contactList
});
})

practice.ejs is file app.get('/practice', (req, res)=> {


return res.render ('practice', {
app.get(route, controller function) title: "let us play with ejs"
});

app.post('/contact-list', function(req, res){


return res.redirect
index.js
const express = require('express');
const path = require('path'); app.get('/practice', (req, res)=> {
return res.render('practice', {
const port = 8000; title: "let us play with ejs"
});
const app = express(); });
//setting template engine
app.set('view engine', 'ejs'); //for post html request.
//setting path to views app.post('/contact-list', function(req, res){
app.set('views', path.join(__dirname, 'views')); return res.redirect('/practice');
});
var contactList = [
{
name: "Sharielle", app.listen(port, function(err){
phone: 1233434347 }, if(err){
{ console.log('hey kariel, Error in running the server');
name: "Dante", }
phone: 2123343434 }, console.log(`Yup,Hey fallen Angel,
{ My Express server is running on port: ${port}`);
name: "Mark", })
phone: 3233434348 }
]

app.get('/', function(req, res){


return res.render('home', {
// locals or 'context'
title: "Contact List",
contact_list : contactList
});
})

home.ejs

<html>
<head>
<title><%=title %></title>
</head>
<body>
<h1>Contact List</h1>
<div>
<ul>
<% for(let i of contact_list) {%>
<li>
<p> <%=i.name%></p>
<p><%= i.type%></p>
</li>
<%}%>
</ul>
</div>

<form action="/contact-list" method="POST">


<input type="text" name="name" placeholder="Enter Name">
<input type="text" name="phone" placeholder="Enter Phone">
<button type="submit">Add Contact</button>
</form>

</body>
</html>
th

TTT

to append into
contactList
code

added the parser


which is
middleware.
code
1. controller

2. added a parser
which is middleware.

3.added parse data to our Controller


contact list.

note: After refreshing the


compile file is removed from the
ram. and so from webpage.
create server (write at last) app.listen(port, function(err){

Express const app = express();


app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

app.get('/', function(req, res){


return res.render ('home', {
// locals or 'context'
title: "Contact List",
contact_list : contactList
});
})

practice.ejs is file app.get('/practice', (req, res)=> {


return res.render ('practice', {
app.get(route, controller function) title: "let us play with ejs"
});

app.post('/contact-list', function(req, res){


return res.redirect
index.js
const express = require('express');
const path = require('path'); app.get('/practice', (req, res)=> {
return res.render('practice', {
const port = 8000; title: "let us play with ejs"
});
const app = express(); });
//setting template engine
app.set('view engine', 'ejs'); //for post html request.
//setting path to views app.post('/contact-list', function(req, res){
app.set('views', path.join(__dirname, 'views')); return res.redirect('/practice');
});
var contactList = [
{
name: "Sharielle", app.listen(port, function(err){
phone: 1233434347 }, if(err){
{ console.log('hey kariel, Error in running the server');
name: "Dante", }
phone: 2123343434 }, console.log(`Yup,Hey fallen Angel,
{ My Express server is running on port: ${port}`);
name: "Mark", })
phone: 3233434348 }
]

app.get('/', function(req, res){


return res.render('home', {
// locals or 'context'
title: "Contact List",
contact_list : contactList
});
})

home.ejs

<html>
<head>
<title><%=title %></title>
</head>
<body>
<h1>Contact List</h1>
<div>
<ul>
<% for(let i of contact_list) {%>
<li>
<p> <%=i.name%></p>
<p><%= i.type%></p>
</li>
<%}%>
</ul>
</div>

<form action="/contact-list" method="POST">


<input type="text" name="name" placeholder="Enter Name">
<input type="text" name="phone" placeholder="Enter Phone">
<button type="submit">Add Contact</button>
</form>

</body>
</html>
Middleware
Middleware functions are functions
that have access to the
request object (req), the response object (res), and the next()
in the application’s request-response cycle.

The next() in the Express router


which, when invoked
executes the middleware
succeeding the current middleware.

Middleware functions can perform the following tasks:


Execute any code.
Make changes to the request and the response objects.
End the request-response cycle.
Call the next middleware in the stack.
Web pages doesn't go the
next controller.
Code
3.

4.

2.

Q. why is middle ware


executed twice the number.?
code

myName is set over here in req body.


code
C 7.
Adding css and images
in express app.
c
why not?

/assets/css/home.css
why not?

/assets/js/home.js
note:
writing the path
in the following ways.

so we don't need to set "/assets/css/home.css"


to override any css
put your css below
any other css.
10. Query & String params:
10. Query & String params:
param & query param
code
check in inspect.
since we have
set that
with
note: here we create "--KEYS--" --- /<%= i.phone%>
and in home.ejs we get "--values--"

but
:phone
is creating a
key named value
and take values from a tag.
There was a query
here. <%= i.phone %>

method="GET"

controller takes the


values
as

{phone: Arpan}
value for controller to use
-- :phone -- here

Here, we are getting through


get method.
It reads only the data that is
submmited through the form.
like here a tag
uses
"get" method
to post.
query params:
same in
url
2.
Note: Now, You don't need to
put
1. app.get('/delete-contact/:phone/:name ', function)

3. since we have generated keys this ways.

we now don't have to write these


Keys in controller.
code

remove the name as keys.


12. Delete A Contact
note:
think what
array becomes
and what it returns.
ob
code
code

You might also like