Blog site Mini project (without a database)

Blog site Mini project (without a database)

Introduction

  • A blog site is pretty self explanatory so... I'll just say how its different(for now).

  • It doesn't have a database so when we restart the server all the blogs get wiped.

  • There's also no logins or accounts, so for now you just write, view and edit.

Content

  • For this project im not writing any HTML, technically, instead we will be writing ejs files i.e. Embedded JavaScript.

  • Its basically just HTML with JavaScript.

  • we can split this into different files called partials, we do this to avoid rewriting a lot.

  • when writing for different pages instead of writing the same header and footer for every HTML file, we make different files for header and footer and only the body has to be written for other pages.

  • In my project i had header, footer and a nav bar file to be reused as partials

  • The header :-

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Our blog</title>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <linkß
            href="https://fonts.googleapis.com/css2?family=Radio+Canada+Big:ital,wght@0,500;1,500&display=swap"
            rel="stylesheet"
        />
        <link href="styles/style.css" rel="stylesheet" />
    </head>
    <body class="radio-canada-big-font">
  • The footer :-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 
<script src="script.js"></script>
</body>
</html>
  • The nav bar :-
<%- include("header.ejs") %>

<div class="container">
    <div class="nav-bar">
        <div><h1 class="title">Our blog</h1></div>

        <div class="profile">
            <div class="feed button">
                <a href="/">My Feed</a>
            </div>
            <div class="button write">
                <a href="/writing">Write</a>
            </div>
            <div class="button darkmode">
                <div class="circle">
                    <img src="media/svg/icons8-sun.svg" height="20px" />
                </div>
            </div>
            <div class="button profile-pic">
                <img src="media/images/image.png" height="50px" />
            </div>
        </div>
    </div>
</div>

Body

  • The body has 3 parts the feed, the writing/editing and viewing.
<%- include("partials/nav_bar.ejs") %>

<% var titles = title %> <% var num=0; %>
<div class="feeds">
    <% if (titles.length !=0){ %>
    <% titles.forEach(function(item){ %> 
        <% var idValue="feed-"+num; %>
         <% num++%>
        <%-include("partials/post.ejs",{title:item, idVal:idValue}) %>
         <% }) %>
         <%}else{%>
            <h3 class="empty"> It's a little empty try writing something...</h3>
            <% } %>
</div>

<%- include("partials/footer.ejs") %>
  • The feed page will render as many rectangles/divs (idk what to call it) as the number of blogs written.

  • The divs are rendered form a different file.

<div class="post" id="<%= idVal %>">
    <div class="banner">
        <img class="banner-img" />
    </div>
    <div class="title">
        <h1 class="title-text"><%= title %></h1>
    </div>
</div>
  • Now for writing the blog we have another file.
<%- include("partials/nav_bar.ejs") %>
<div class="content">
    <% if(locals.content && locals.title){%>
        <% var postId= id %>
        <form action="/submit?new=0&id=<%= postId%>" method="POST" class="new-post">
            <div class="inp">
                <textarea
                    class="text blog-title"
                    type="text"
                    name="title"
                    placeholder="Title"
                    onkeyup="adjustHeight(this)"
                ><%= title %></textarea>
            </div>
            <div class="text-body inp">
                <textarea
                    class="text body-text"
                    type="text"
                    name="content"
                    placeholder="Enter text here"
                    onkeyup="adjustHeight(this)"
                ><%= content %></textarea>
            </div>
            <div class="submit-btn inp">
                <input class="publish radio-canada-big-font btn" type="submit" value="Publish" />
            </div>
        </form>
    <% }else{ %>
    <form action="/submit?new=1" method="POST" class="new-post">
        <div class="inp">
            <textarea
                class="text blog-title"
                type="text"
                name="title"
                placeholder="Title"
                onkeyup="adjustHeight(this)"
            ></textarea>
        </div>
        <div class="text-body inp">
            <textarea
                class="text body-text"
                type="text"
                name="content"
                placeholder="Enter text here"
                onkeyup="adjustHeight(this)"
            ></textarea>
        </div>
        <div class="submit-btn inp">
            <input class="publish radio-canada-big-font btn" type="submit" value="Publish" />
        </div>
    </form>
    <% } %>
</div>
<%- include("partials/footer.ejs") %>
  • We will be using this file in two ways one for editing and one for writing.

  • We simply check if the title and content exists and if they do, they will already be in the text area.

  • And when you submit, it was edited it doesn't add it to the blogs it just changes the existing blog, else it will add a new blog to the list.

  • Now for viewing the blog, this is quite simple as you just have to print the title and content.

<%- include("nav_bar.ejs") %> <% var postId=id %> 
<% var url="/edit?postId="+postId %>
<div class="the-blog">
    <div class="blog-content">
    <h1 class="blog-title"><%= title %></h1>
    <p class="body-text"><%= content %></p>
</div>
    <div class="edit btn"><a href="<%= url %>">Edit</a></div>
</div>
<%- include("footer.ejs") %>

Backend

  • The backend code is written in javasrcipt with node and express.

  • requests to handle :-

    • get /

    • post /submit

    • get /writing

    • get /edit

    • get /post

  • GET / :-

  • For the this request i simpy render the feed body and give the list of titles and the numbers as parameters.

app.get("/", (req, res) => {
    res.render("index.ejs", {
        feed: numberOfSubmits,
        title: titles,
    });
});
  • POST /submit

  • For this i check if it is a a new post or an edited post based on a query parameter and append to the list of titles and content if it is new and edit the existing one if it is old.

app.post("/submit", (req, res) => {
    var newPost = req.query.new;

    if (newPost == 1) {
        numberOfSubmits++;
        titles.push(req.body.title);
        contents.push(req.body.content);
    } else {
        var postId = req.query.id;
        titles[postId] = req.body.title;
        contents[postId] = req.body.content;
    }
    res.redirect("/");
});
  • GET /writing

  • For this one we simply render the body.

app.get("/writing", (req, res) => {
    res.render("new_blog.ejs");
});
  • GET /edit

  • Here we render the same page as writing but we also provide the title and content of the blog to be edited.

app.get("/edit", (req, res) => {
    var editNumber = req.query.postId;
    res.render("new_blog.ejs", {
        title: titles[editNumber],
        content: contents[editNumber],
        id: editNumber,
    });
});
  • GET /post

  • For this we render a page to view the title and content of the blog clicked on.

app.get("/post", (req, res) => {
    var post = req.query.post;
    res.render("partials/blog.ejs", {
        title: titles[post],
        content: contents[post],
        id: post,
    });
});

Conclusion

Did you find this article valuable?

Support Manmohan P M by becoming a sponsor. Any amount is appreciated!