Posts

Showing posts from December, 2024

Includes

Image
 INCLUDES - it is used to create sub-templates syntax- <%- include("includes/head.ejs") here includes- Folder name head.ejs -file name insta.ejs <%- include ( "includes/head.ejs" ); %>   < body >     < h1 > Welcome to the page of @ <%= data . name %> </ h1 >     < button > Follow </ button >     < button > Message </ button >     < p > Followers: <%= data . followers %> &nbsp;&nbsp; Following: <%= data . following %> </ p >     <!-- LOOP FOR POSTS  -->     <% for ( let post of data . posts ){ %>     < img src = " <%= post . image %> " />     < p > Likes: <%= post . likes %> &nbsp;&nbsp; comments: <%= post . comments %> </ p >     <% } %>     <%- include ( "includes/footer.ejs" ); %>   </ body ...

Serving Static Fields

We use the following statement to serve static fields  app.use(express.static("public")); app.use(express.static(path.join(__dirname,"public"))); index.js const express = require ( "express" ); const app = express (); const path = require ( "path" ); const port = 8080 ; app . use ( express . static ( "public" )); app . use ( express . static ( path . join ( __dirname , "public" ))); app . set ( "view engine" , "ejs" ); app . set ( "views" , path . join ( __dirname , "/views" )); app . get ( "/ig/:username" , ( req , res ) => {   let { username } = req . params ;   const InstaData = require ( "./data.json" );   const data = InstaData [ username ];   if ( data ) {     res . render ( "insta.ejs" , { data });   } else {     res . render ( "error.ejs" );   } }); app . listen ( port , () => {   console . log ( `server is l...

Activity: Instagram EJS

Image
 form the "./data.json" info create a insta page for the users data.json {   "cats" : {     "name" : "cats" ,     "followers" : 25000 ,     "following" : 5 ,     "posts" : [       {         "image" : "https://plus.unsplash.com/premium_photo-1677545182067-26ac518ef64f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8Y2F0c3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60" ,         "likes" : 200 ,         "comments" : 17       },       {         "image" : "https://images.unsplash.com/photo-1592194996308-7b43878e84a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y2F0c3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60" ,         "likes" : 312 ,         "comments" : 19       },       {     ...

Loops in ejs

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Instagram page </ title > </ head > < body >     < h1 > Welcome to the page of @ <%= username %> </ h1 >     < button > Follow </ button >     < button > Message </ button >     < h3 > Followed By </ h3 > < ul >     <% for ( name of followers ) { %>     < li > <%= name %> </ li >     <% } %> </ ul > </ ul > </ body > </ html > app . get ( "/ig/:username" ,( req , res ) => {     const followers = [ "abhii" , "ash" , "bharath" , "vinay" ];     let { username } = req . params ;     res . render ( "insta....

Conditional Statements in EJS

Image
  WE USE THE TAG  "<%" <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > RollDice </ title > </ head > < body >     < h1 > dice value: <%= diceVal %> </ h1 >     <% if ( diceVal == 6 ){ %>         < h2 > TRY AGAIN!!! </ h2 >     <% } %> </ body > </ html >

IG EJS

Image
 insta.ejs <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Instagram page </ title > </ head > < body >     < h1 > Welcome to the page of @ <%= username %> </ h1 >     < button > Follow </ button >     < button > Message </ button > </ body > </ html > index.js const express = require ( "express" ); const app = express (); const path = require ( "path" ); const port = 8080 ; app . set ( "view engine" , "ejs" ); app . set ( "views" , path . join ( __dirname , "/views" )); app . get ( "/ig/:username" ,( req , res ) => {     let { username } = req . params ;     res . render ( "insta.ejs" ,{ username }); }); app . listen...

Passing Data to EJS

Image
 We can pass data using EJS tags rolldice.ejs <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > RollDice </ title > </ head > < body >     < h1 > dice value: <%= diceVal %> </ h1 > </ body > </ html > index.js const express = require ( "express" ); const app = express (); const path = require ( "path" ); const port = 8080 ; app . set ( "view engine" , "ejs" ); app . set ( "views" , path . join ( __dirname , "/views" )); app . get ( "/rolldice" ,( req , res ) => {     let diceVal = Math . floor ( Math . random () * 6 ) + 1 ;     res . render ( "rolldice.ejs" ,{ diceVal }); }) app . listen ( port , () => {   console . log ( `server is liste...

Interpolation Syntax

Image
 Interpolation Syntax refers to the embedding expressions into marked up text in HTML whatever we write as a code it prints in the same way, but by using EJS we can convert into dynamic  using EJS tags  <%  'Scriptlet' tag, for control-flow, no output <%_  ‘Whitespace Slurping’ Scriptlet tag, strips all whitespace before it <%=  Outputs the value into the template (HTML escaped) <%-  Outputs the unescaped value into the template <%#  Comment tag, no execution, no output <%%  Outputs a literal '<%' %>  Plain ending tag -%>  Trim-mode ('newline slurp') tag, trims following newline _%>  ‘Whitespace Slurping’ ending tag, removes all whitespace after it <h1>Demo for INTERPOLATION SYNTAX 1+2</h1>     <h2> <%= 1 + 2 %> </h2>     <h1>Demo for INTERPOLATION SYNTAX  "Abhii"</h1>     <h2> <%= "Abhii" %> </h2> ...

Views directory

Image
 Whenever we are running the server from another directory other than the directory in which the index.js exists an error occurs inorder to solve this we use views directory use this code whenever we use views to run it from different directories const path = require ( "path" ); app . set ( "views" , path . join ( __dirname , "/views" )); use it is as default const express = require ( "express" ); const app = express (); const path = require ( "path" ); const port = 8080 ; app . set ( "view engine" , "ejs" ); app . set ( "views" , path . join ( __dirname , "/views" )); app . get ( "/" , ( req , res ) => {   res . render ( "home.ejs" ); }); app . listen ( port , () => {   console . log ( `server is listening on port ${ port } ` ); }); if we run the server from NODE JS directory ,in the teriminal the command should be : nodemon EJS/index.js

EJS

Image
Embedded Java Script Templates used for creatng a template that can be used for multiple paages(to display) just like for every instagram user there is a different profile page . it is not that every page is coded seperately. We use these templates create a directory EJS within the same directory install express and ejs packages create another in the name of VIEWS in this create  a file home.ejs index.js const express = require ( "express" ); const app = express (); const port = 8080 ; app . set ( "view engine" , "ejs" ); app . get ( "/" ,( req , res ) => {     res . render ( "home.ejs" ); }); app . listen ( port ,() => {     console . log ( `server is listening on port ${ port } ` ); }); home.ejs <! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" ...

Query Strings

Image
 req.query() - used to get the query string(searched) app . get ( "/search" ,( req , res ) => {   let { q } = req . query ;   // console.log(q);   if ( ! q ){     res . send ( "<h1>nothing searched</h1>" );   }   res . send ( `<h1>search results for ${ q } </h1>` ); });

path parameters

Image
 Path Parameters these are variables that change simply like username for insta declared using ":" app . get ( "/:username/:id" ,( req , res ) => { let { username , id } = req . params ; console . log ( req . params ); let htmlStr = `<h1>Welcome to the page of @ ${ username } .</h1>` ;   res . send ( htmlStr ); })

Nodemon

Image
 NODEMON it is a package which is used to automatically restart the server whenever we make a change in the code to install it COMMAND: npm install nodemon installing the package globally is useful npm install -g nodemon app . get ( "/" , ( req , res ) => {   res . send ( "this is the root path" ); }); previously the code was app . get ( "/" , ( req , res ) => {   res . send ( "you searhed for root path" ); });

Routing

Image
 app.get(path,callback function) const express = require ( "express" ); const app = express (); let port = 3000 ; app . listen ( port , () => {   console . log ( `app is listening on port ${ port } ` ); }); app . get ( "/" , ( req , res ) => {   res . send ( "you searched for root path" ); }); app . get ( "/orange" , ( req , res ) => {   res . send ( "you searched for orange path" ); }); app . get ( "/apple" , ( req , res ) => {   res . send ( "you searched for apple path" ); }); app . get ( "*" , ( req , res ) => {   res . send ( "This path doesn't exist" ); }); app . post ( "/" , ( req , res ) => {   res . send ( "you sent a post request" ); });