Creating Boiler Plate (phase-b)
CREATE A LAYOUT FOLDER IN VIEWS FOLDER
IN WHICH A boilerplate.ejs is CREATED
BOILER PLATE - IS THE COMMON CODE FOR EVERY TEMPLATE
boilerplate.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel Website</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h2>Wanderlust</h2>
<div class="container">
<%- body %>
</div>
</body>
</html>
NOW IN INDEX.EJS AND SHOW.EJS REMOVE ALL THE CONTENT EXCEPT THE CONTENT OF BODY
INDEX.EJS
<% layout("/layout/boilerplate")%>
<body>
<h2>All Lists</h2>
<form method="get" action="/listings/new">
<button>Add new Listing</button>
</form>
<% for(listing of AllListings){%>
<ul>
<a href="/listings/<%=listing._id%>"><%= listing.title%></a>
</ul>
<%}%>
</body>
SHOW.EJS
<%- layout("/layout/boilerplate") %>
<body>
<h2>Details</h2>
<ul>
<li><%= listing.title %></li>
<li><%= listing.description %></li>
<li>₹<%= listing.price.toLocaleString("en-IN") %></li>
<li><%= listing.location %></li>
<li><%= listing.country %></li>
</ul>
<form method="get" action="/listings/<%= listing._id %>/edit">
<button>EDIT</button>
</form>
<br /><br />
<form method="post" action="/listings/<%= listing._id %>?_method=delete">
<button>DELETE</button>
</form>
</body>
CSS CAN ALSO BE ADDED
IN APP.JS
app.use(express.static(path.join(__dirname,"/public")));
CREATE A FOLDER PUBLIC AND CSS IN IT .
IT IS USED TO STORE ALL THE CSS RELATED FILES IN IT.
SAMPLE TESTING:
STYLE.CSS
body{
background-color: beige;
}
Comments
Post a Comment