CRUD OPERATIONIS *****QOURA POSTS***

 









INDEX.JS

const express = require("express");
const app = express();
const port = 8080;

const path = require("path");
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "views"));
app.use(express.static(path.join(__dirname, "public")));
app.use(express.urlencoded({ extended: true }));
const { v4: uuidv4 } = require("uuid");
const methodOverride = require("method-override");
app.use(methodOverride("_method"));

app.get("/", (req, res) => {
  res.send("server working..");
});

let posts = [
  {
    id: uuidv4(),
    username: "abhi",
    content: "manchiga undandi bros",
  },
  {
    id: uuidv4(),
    username: "ash",
    content: "ee sala cup uu lollipup uu",
  },
  {
    id: uuidv4(),
    username: "bharath",
    content: "psych lepakandi",
  },
  {
    id: uuidv4(),
    username: "vinay",
    content: "ee sala cup namde",
  },
];
app.get("/", (req, res) => {
  res.send("server working");
});

// TO VIEW POSTS
app.get("/posts", (req, res) => {
  res.render("index.ejs", { posts });
});

// TO ADD NEW POSTS
app.get("/posts/new", (req, res) => {
  res.render("new.ejs");
});

// TO REDIRECT AND CREATE ID'S
app.post("/posts", (req, res) => {
  let { username, content } = req.body;
  let id = uuidv4();
  posts.push({ id, username, content });
  res.redirect("/posts");
});

// TO VIEW INDIVIDUAL POSTS
app.get("/posts/:id", (req, res) => {
  let { id } = req.params;
  let post = posts.find((p) => id === p.id);
  res.render("show.ejs", { post });
});

// TO UPDATE SPECIFIC POST
app.patch("/posts/:id", (req, res) => {
  let { id } = req.params;
  let newContent = req.body.content;
  let post = posts.find((p) => id === p.id);
  post.content = newContent;
  console.log(post);
  res.redirect("/posts");
});

app.get("/posts/:id/edit", (req, res) => {
  let { id } = req.params;
  let post = posts.find((p) => id === p.id);
  res.render("edit.ejs", { post });
});

// TO DELETE A POST
app.delete("/posts/:id",(req,res)=>{
  let {id}=req.params;
  posts=posts.filter((p)=> id!=p.id);
  res.redirect("/posts");
});
app.listen(port, () => {
  console.log(`listening to port:${port}`);
});



VIEWS FOLER

*INDEX.EJS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Qoura posts</title>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <h1>Qoura Posts</h1>
    <% for (post of posts) { %>
    <div class="post">
      <h3 class="user">@ <%= post.username %></h3>
      <h4 class="content"><%= post.content %></h4>
      <a href="http://localhost:8080/posts/<%=post.id%>">See in detail</a>
      <a href="http://localhost:8080/posts/<%= post.id%>/edit">Edit</a>
      <form method="post" action="/posts/<%=post.id%>?_method=DELETE">
        <button>Delete post</button>
      </form>
    </div>
    <% } %>
    <a href="http://localhost:8080/posts/new">Create new post</a>
  </body>
</html>


*NEW.EJS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Create new post</title>
  </head>
  <body>
    <form method="post" action="/posts">
      <input placeholder="enter username" name="username" /><br /><br />
      <textarea placeholder="write your content" name="content"></textarea
      ><br /><br />
      <button>submit</button>
    </form>
  </body>
</html>


*SHOW.EJS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>See Posts in detail</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <h2>Here is your post in detail</h2>
    <p>post id: <%= post.id %></p>
    <div class="post">
        <h3 class="user">@<%=post.username %></h3>
        <h4><%= post.content %></h4>
    </div>
</body>
</html>


*EDIT.EJS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit</title>
</head>
<body>
    <h2>Edit your Post</h2>
    <p>Post id:<%=post.id%></p>
    <p>Post username:<%=post.username%></p>
    <form method="post" action="/posts/<%= post.id%>?_method=PATCH">
        <textarea name="content" rows="10" cols="30"><%=post.content%></textarea>
        <button>Submit</button>
    </form>
</body>
</html>


PUBLIC FOLDER

*STYLE.CSS

h1{
    color: maroon;
}
.post{
    background-color: blanchedalmond;
}
.user{
    font-style: italic;
}

Comments

Post a Comment

Popular posts from this blog

DATABASE RELATIONSHIPS

Image
 RELATIONSHIPS INCLUDE  ONE - TO -ONE (1x 1)   ONE ENTITY OF A TABLE IS IN RELATION WITH ONLY ONE ENTITY OF ANOTHER. ONE - TO -MANY (1x N)   ONE ENTITY IS IN RELATION WITH MANY MANY - TO - MANY(NxN)   MANY ENTITIES ARE IN RELATION WITH MANY OTHER. ONE- TO-MANY IS MORE HARDER TO BE REPRESENTED THAN ONE - TO - ONE AND MANY - TO - MANY ONE- TO -MANY IT IS CATEGORIZED INTO 3 BASED ON MANY MANY CAN BE IN 3 TYPES 1. ONE -TO-FEW:  SMALL NUMBER (2,5 ,100,500) STORE THE CHILD DOCUMENT INSIDE PARENT TAKE ZOMATO OR AMAZON FOR EXAMPLE, A SINGLE USER CAN HAVE MULTIPLE ADDRESSES. HERE WE DONOT CREATE TWO MODELS FOR USER AND ADDRESS, AS ADDRESS IS ASSOCIATED WITH USER DIRECTILY, WE STORE THE CHILD DOCUMENT INSIDE PARENT. const mongoose = require ( "mongoose" ); const { Schema } = mongoose ; main ()   . then (() => {     console . log ( "connection successful" );   })   . catch (( err ) => {     console . log ( err );...
Read more

ROUTING (GET /) home route

Image
  app . get ( "/" , ( req , res ) => {   let q = 'SELECT COUNT(*) FROM user' ;   try {   connection . query ( q , ( err , result ) => {     if ( err ) throw err ;     let count = result [ 0 ][ 'COUNT(*)' ];     console . log ( count );     res . render ( "home.ejs" ,{ count });   }); } catch ( err ) {   console . log ( err );   res . send ( "error occured" ); } }); app . listen ( port , () => {   console . log ( `listening to 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" >     < title > home </ title > </ head > < body >     < h2 > Total count of users: <%= count %> </ h2 > </ body > </ html >
Read more

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>` ); });
Read more