BLOG WEBSITE - CODEIAL

A project report submitted in the partial fulfillment

Of the requirement for the award of degree of
Master of Technology (Computer Science & Engineering)

(Session: 2023-2025)

Submitted to: Submitted by:

Mr. Atul Sharma Mohit Sharma
CSE Department 252352009
UIET, KUK M.Tech. CE-2nd

University Institute of Engineering and Technology

Kurukshetra University, Kurukshetra – 136119
 DECLARATION

I hereby declare that the work, which is being presented in the project report en tled
“Blog Website - Codeial” submi ed as a part of course curriculum for Master OF
TECHNOLOGY in COMPUTER SCIENCE & ENGINEERING is an authen c record of my own
work carried out under the able guidance of Mr. Atul Sharma, Ass . Prof., UIET KUK.

The informa on and data given in the report is authen c to best of my knowledge.

The ma er embodied in the report has not been submi ed for the award of any other
degree.

Mohit Sharma 252352009

tt
ti
tt
ti
tt
tt
ti
ti
 ACKNOWLEDEGMENT

At the very outset, I am highly indebted to The UIET for giving me an opportunity to carry
out my project on “Blog Website - Codeial”. In the course of present work, it has been my
privilege to receive help and assistance from many quarters. I take great pleasure in
acknowledging here, my debt to them.

I am deeply indebted to my project supervisor, Mr. Atul Sharma, Ass . Prof., UIET KUK
whose inspira on and invaluable guidance has been unfailingly available to me at all
stages of my prac cal. It proved an opportunity for me to upgrade my skills and added to
my professional knowledge, in an environment that was intellectually s mula ng one,
moreover that maintained the highest standard of academic excellence.

At more personal level I am thankful to my friends who knowingly or unknowingly helped

in my project in many ways.

I also want to thank my ‘parents’ for their en re support and morale boost in the
development phase of this project.

Mohit Sharma 252352009

ti
ti
ti
tt
ti
ti
 TABLE OF CONTENTS
1. OVERVIEW
1.1 HTML5, CSS3, JAVASCRIPT

1.2 NODE.JS (FOR SERVER-SIDE SCRIPTING)

1.3 EXPRESSJS (NODEJS WEB FRAMEWORK)

1.4 MONGODB

2. INTRODUCTION TO BLOG WEBSITE

3. INTRODUCTION
3.1 ABOUT PROJECT

3.2 MODULES

3.3 PROJECT FRAMEWORK

4. OBJECTIVE OF THE PROJECT

4.1 FUNCTIONALITY

5. PROJECT CATEGORY

6. PROJECT STRUCTURE

7. TOOLS/PLATFORM USED

8. PROJECT DESCRIPTION WITH CODE

9. SNAPSHOTS OF THE WEB PAGES

10. CONCLUSION & FUTURE SCOPE

11. REFERENCES
BLOG WEBSITE -
CODEIAL
 ABSTRACT
Blogging has become such a mania that a new blog is being created every second of
every minute of every hour of every day. A blog is your best bet for a voice among the
online crowd. Blogs were usually the work of a single individual occasionally of a small
group, and often covered a single subject. More recently, "multi-author blogs" (MABs)
have developed, with posts written by large numbers of authors and professionally edited.
MABs from newspapers, other media outlets, universities, think tanks, advocacy groups,
and similar institutions account for an increasing quantity of blog traffic. The rise of
Twitter and other "micro blogging" systems helps integrate MABs and single-author
blogs into societal new streams. Blog can also be used as a verb, meaning to maintain or
add content to a blog. A novel is a long, fictional narrative which describes intimate
human experiences.
CODEIAL is a combination of both Blog as well as Novels. Blog contain the Information
of various things related to Technology, Education, News, International, Business, Sports,
Entertainment and ongoing college activities. The main aim of this project is to provide
data to students in only one site. Students can gather the information from one site as well
as give their feedback and create their own blog. Students can post their views and
thought and analyze themselves. Besides all such core functionalities, the application also
includes features like comment, categories etc. so as to provide a satisfactory user
experience.
 1. OVERVIEW
1.1.1 HTML5 (HyperText Markup Language):

HTML 5 is a markup language used for structuring and presenting content on the World
Wide Web. It is the fifth and current major version of the HTML standards. HTML5 is
cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group (WHATWG).

The new standard incorporates features like video playback and drag-and-drop that have
been previously dependent on third-party browser plug-ins such as Adobe Flash,
Microsoft Silver light, and Google Gears.

The HTML 5 language has a "custom" HTML syntax that is compatible with HTML 4
and XHTML1 documents published on the Web, but is not compatible with the more
esoteric SGML features of HTML 4.

HTML 5 does not have the same syntax rules as XHTML where we needed lower case
tag names, quoting our attributes; an attribute had to have a value and to close all empty
elements.

HTML5 comes with a lot of flexibility and it supports the following features −

• Uppercase tag names.

• Quotes are optional for attributes.

• Attribute values are optional.

• Closing empty elements are optional.

The DOCTYPE
DOCTYPEs in older versions of HTML were longer because the HTML language was
SGML based and therefore required a reference to a DTD.
HTML 5 authors would use simple syntax to specify DOCTYPE as follows −
<!DOCTYPE html>
The above syntax is case-insensitive.

Character Encoding
HTML 5 authors can use simple syntax to specify Character Encoding as follows −
<meta charset = "UTF-8">
The above syntax is case-insensitive.

The <script> tag

Its common practice to add a type attribute with a value of "text/javascript" to script
elements as follows −
<script type = "text/javascript" src = "scriptfile.js"></script>
HTML 5 removes extra information required and you can use simply following syntax −
<script src = "scriptfile.js"></script>

The <link> tag

So far you were writing <link> as follows −
<link rel = "stylesheet" type = "text/css" href = "stylefile.css">
HTML 5 removes extra information required and you can simply use the following
syntax −
<link rel = "stylesheet" href = "stylefile.css">

HTML5 Elements
HTML5 elements are marked up using start tags and end tags. Tags are delimited using
angle brackets with the tag name in between.
The difference between start tags and end tags is that the latter includes a slash before the
tag name.
Following is the example of an HTML5 element −
<p>...</p>
HTML5 tag names are case insensitive and may be written in all uppercase or mixed
case, although the most common convention is to stick with lowercase.
Most of the elements contain some content like <p>...</p> contains a paragraph. Some
elements, however, are forbidden from containing any content at all and these are known
as void elements. For example, br, hr, link, meta, etc.

HTML5 Attributes
Elements may contain attributes that are used to set various properties of an element.
Some attributes are defined globally and can be used on any element, while others are
defined for specific elements only. All attributes have a name and a value and look like as
shown below in the example.
Following is the example of an HTML5 attribute which illustrates how to mark up a div
element with an attribute named class using a value of "example" −
<div class = "example">...</div>
Attributes may only be specified within start tags and must never be used in end tags.
HTML5 attributes are case insensitive and may be written in all uppercase or mixed case,
although the most common convention is to stick with lowercase.

HTML5 Document
The following tags have been introduced for better structure −
• section − This tag represents a generic document or application section. It can be
used together with h1-h6 to indicate the document structure.
• article − This tag represents an independent piece of content of a document, such
as a blog entry or newspaper article.
• aside − This tag represents a piece of content that is only slightly related to the
rest of the page.
• header − This tag represents the header of a section.
• footer − This tag represents a footer for a section and can contain information
about the author, copyright information, et cetera.
• nav − This tag represents a section of the document intended for navigation.
• dialog − This tag can be used to mark up a conversation.
• figure − This tag can be used to associate a caption together with some embedded
content, such as a graphic or video.
The markup for an HTML 5 document would look like the following −
<!DOCTYPE html>

<html>
<head>
<meta charset = "utf-8">
<title>...</title>
</head>

<body>
<header>...</header>
<nav>...</nav>

<article>
<section> ...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
<html>

1.1.2 CSS3 (Cascading Style Sheet):

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and
formatting of a document written in a markup language.

Advantages of CSS
• CSS saves time − You can write CSS once and then reuse same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as
many Web pages as you want.
• Pages load faster − If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So less code means faster download times.
• Easy maintenance − To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
• Superior styles to HTML − CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison to
HTML attributes.
• Multiple Device Compatibility − Style sheets allow content to be optimized for
more than one type of device. By using the same HTML document, different
versions of a website can be presented for handheld devices such as PDAs and
cell phones or for printing.
• Global web standards − Now HTML attributes are being deprecated and it is
being recommended to use CSS. So its a good idea to start using CSS in all the
HTML pages to make them compatible to future browsers.
• Offline Browsing − CSS can store web applications locally with the help of an
offline cache. Using of this, we can view offline websites. The cache also ensures
faster loading and better overall performance of the website.
• Platform Independence − The Script offer consistent platform independence and
can support latest browsers as well.
CSS Syntax
A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts −

• Selector − A selector is an HTML tag at which a style will be applied. This could
be any tag like <h1> or <table> etc.
• Property - A property is a type of attribute of HTML tag. Put simply, all the
HTML attributes are converted into CSS properties. They could be color, border
etc.
 • Value - Values are assigned to properties. For example, color property can have
value either red or #F1F1F1 etc.
You can put CSS Style Rule Syntax as follows −
selector { property: value }

CSS-Inclusion

There are four ways to associate styles with your HTML document. Most commonly used
methods are inline CSS and External CSS.

Inline CSS - The style Attribute

You can use style attribute of any HTML element to define style rules. These rules will be
applied to that element only. Here is the generic syntax −
<element style = "...style rules....">

External CSS - The <link> Element

The <link> element can be used to include an external stylesheet file in your HTML
document.
An external style sheet is a separate text file with .css extension. You define all the Style
rules within this text file and then you can include this file in any HTML document using
<link> element.
Here is the generic syntax of including external CSS file −
<head>
<link type = "text/css" href = "..." >
</head>

1.1.3 JavaScript:

What is JavaScript?

JavaScript is a dynamic computer programming language. It is lightweight and most

commonly used as a part of web pages, whose implementations allow client-side script to
interact with the user and make dynamic pages. It is an interpreted programming
language with object-oriented capabilities.
JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript,
possibly because of the excitement being generated by Java. JavaScript made its first
appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core
of the language has been embedded in Netscape, Internet Explorer, and other web
browsers.
Client-side JavaScript
Client-side JavaScript is the most common form of the language. The script should be
included in or referenced by an HTML document for the code to be interpreted by the
browser.
It means that a web page need not be a static HTML, but can include programs that
interact with the user, control the browser, and dynamically create HTML content.
The JavaScript client-side mechanism provides many advantages over traditional CGI
server-side scripts. For example, you might use JavaScript to check if the user has entered
a valid e-mail address in a form field.
The JavaScript code is executed when the user submits the form, and only if all the
entries are valid, they would be submitted to the Web Server.
JavaScript can be used to trap user-initiated events such as button clicks, link navigation,
and other actions that the user initiates explicitly or implicitly.
Advantages of JavaScript

The merits of using JavaScript are −

• Less server interaction − You can validate user input before sending the page off
to the server. This saves server traffic, which means less load on your server.
• Immediate feedback to the visitors − They don't have to wait for a page reload
to see if they have forgotten to enter something.
• Increased interactivity − You can create interfaces that react when the user
hovers over them with a mouse or activates them via the keyboard.
• Richer interfaces − You can use JavaScript to include such items as drag-and-
drop components and sliders to give a Rich Interface to your site visitors.
JavaScript-Syntax
JavaScript can be implemented using JavaScript statements that are placed within the
<script>... </script>.
You can place the <script> tags, containing your JavaScript, anywhere within your web
page, but it is normally recommended that you should keep it within the <head> tags.
The <script> tag alerts the browser program to start interpreting all the text between these
tags as a script. A simple syntax of your JavaScript will appear as follows.
<script ...>
JavaScript code
</script>
The script tag takes two important attributes −
• Language − This attribute specifies what scripting language you are using.
Typically, its value will be JavaScript. Although recent versions of HTML (and
XHTML, its successor) have phased out the use of this attribute.
• Type − This attribute is what is now recommended to indicate the scripting
language in use and its value should be set to "text/javascript".
So your JavaScript segment will look like −
<script language="javascript" type="text/javascript">
JavaScript code
</script>

First JavaScript Script

Let us take a sample example to print out "Hello World". We added an optional HTML
comment that surrounds our JavaScript code. This is to save our code from a browser that
does not support JavaScript. The comment ends with a "//-->". Here "//" signifies a
comment in JavaScript, so we add that to prevent a browser from reading the end of the
HTML comment as a piece of JavaScript code. Next, we call a function document.write
which writes a string into our HTML document.
This function can be used to write text, HTML, or both. Take a look at the following
code.
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>
This code will produce the following result −
Hello World!
JavaScript –Placement in HTML document

There is a flexibility given to include JavaScript code anywhere in an HTML document.

However the most preferred ways to include JavaScript in an HTML file are as follows −

• Script in <head>...</head> section.

• Script in <body>...</body> section.
• Script in <body>...</body> and <head>...</head> sections.
• Script in an external file and then include in <head>...</head> section.

1.2 Node.js (for Server-side Scrip ng):

Node.js is an open-source, cross-platform JavaScript run-time environment that executes

JavaScript code outside the browser. Historically, JavaScript was used primarily for
client-side scripting, in which scripts written in JavaScript are embedded in a webpage's
HTML and run client-side by a JavaScript engine in the user's web browser. Node.js lets
developers use JavaScript to write Command Line tools and for server-side scripting—
running scripts server-side to produce dynamic web page content before the page is sent
ti
to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere"
paradigm, unifying web application development around a single programming language,
rather than different languages for server side and client side scripts.
Though .js is the conventional filename extension for JavaScript code, the name
"Node.js" does not refer to a particular file in this context and is merely the name of the
product. Node.js has an event-driven architecture capable of asynchronous I/O. These
design choices aim to optimize throughput and scalability in web applications with many
input/output operations, as well as for real-time Web applications (e.g., real-time
communication programs and browser games).
History

Node.js was originally written by Ryan Dahl in 2009, about thirteen years after the
introduction of the first server-side JavaScript environment, Netscape's LiveWire Pro
Web. The initial release supported only Linux and Mac OS X. Its development and
maintenance was led by Dahl and later sponsored by Joyent.
Dahl was inspired to create Node.js after seeing a file upload progress bar on Flickr. The
browser did not know how much of the file had been uploaded and had to query the Web
server. Dahl desired an easier way.
Dahl criticized the limited possibilities of the most popular web server in 2009, Apache
HTTP Server, to handle a lot of concurrent connections (up to 10,000 and more) and the
most common way of creating code (sequential programming), when code either blocked
the entire process or implied multiple execution stacks in the case of simultaneous
connections.
Dahl demonstrated the project at the inaugural European JSConf on November 8, 2009.
Node.js combined Google's V8 JavaScript engine, an event loop, and a low-level I/O
API.
npm (Centralized Package Manager for Node.js)

In January 2010, a package manager was introduced for the Node.js environment called
npm. The package manager makes it easier for programmers to publish and share source
code of Node.js libraries and is designed to simplify installation, updating, and
uninstallation of libraries.

Overview

Node.js allows the creation of Web servers and networking tools using JavaScript and a
collection of "modules" that handle various core functionalities. Modules are provided for
file system I/O, networking (DNS, HTTP, TCP, TLS/SSL, or UDP), binary data (buffers),
cryptography functions, data streams, and other core functions. Node.js's modules use an
API designed to reduce the complexity of writing server applications.

What Can Node.js Do?

 • Node.js can generate dynamic page content
• Node.js can create, open, read, write, delete, and close files on the server
• Node.js can collect form data
• Node.js can add, delete, modify data in your database
1.3 ExpressJS (Node.js Web Applica on Framework):

ExpressJS is a web application framework that provides you with a simple API to build websites,
web apps and back ends. With ExpressJS, you need not worry about low level protocols,
processes, etc.
Express is a fast, assertive, essential and moderate web framework of Node.js. You can assume
express as a layer built on the top of the Node.js that helps manage a server and routes. It
provides a robust set of features to develop web and mobile applications.
Let's see some of the core features of Express framework:
• It can be used to design single-page, multi-page and hybrid web applications.
• It allows to setup middlewares to respond to HTTP Requests.
• It defines a routing table which is used to perform different actions based on HTTP
method and URL.
• It allows to dynamically render HTML Pages based on passing arguments to templates.
Why use Express?
• Ultra fast I/O
• Asynchronous and single threaded
• MVC like structure
• Robust API makes routing easy
How does Express look like

Let's see a basic Express.js app.

File: basic_express.js
var express = require('express');
var app = express();
app.get('/', func on (req, res) {
res.send('Welcome to JavaTpoint!');
});
var server = app.listen(8000, func on () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at h p://%s:%s', host, port);
});
ti
ti
tt
ti
1.4 MongoDB:

MongoDB is an open-source document database and leading NoSQL database.

MongoDB is written in C++. This tutorial will give you great understanding on
MongoDB concepts needed to create and deploy a highly scalable and performance-
oriented database.

MongoDB is a cross-platform, document oriented database that provides, high

performance, high availability, and easy scalability. MongoDB works on concept of
collection and document.

Database

Database is a physical container for collections. Each database gets its own set of files on
the file system. A single MongoDB server typically has multiple databases.

Collection

Collection is a group of MongoDB documents. It is the equivalent of an RDBMS table. A

collection exists within a single database. Collections do not enforce a schema.
Documents within a collection can have different fields. Typically, all documents in a
collection are of similar or related purpose.

Document

A document is a set of key-value pairs. Documents have dynamic schema. Dynamic

schema means that documents in the same collection do not need to have the same set of
fields or structure, and common fields in a collection's documents may hold different
types of data.

The following table shows the relationship of RDBMS terminology with MongoDB.

Sample Document

Following example shows the document structure of a blog site, which is simply a
comma, separated key value pair.
 {

_id: ObjectId(7df78ad8902c)

tle: 'MongoDB Overview',

descrip on: 'MongoDB is no sql database',

by: Rohit Singla',

url: 'h p://www.codeial.com',

tags: ['mongodb', 'database', 'NoSQL'],

likes: 100,

comments: [

user:'user1',

message: 'My rst comment',

dateCreated: new Date(2011,1,20,2,15),

like: 0

},

user:'user2',

message: 'My second comments',

dateCreated: new Date(2011,1,25,7,45),

like: 5

_id is a 12 bytes hexadecimal number which assures the uniqueness of every document.
You can provide _id while inserting the document. If you don’t provide then MongoDB
provides a unique id for every document. These 12 bytes first 4 bytes for the current
timestamp, next 3 bytes for machine id, next 2 bytes for process id of MongoDB server
and remaining 3 bytes are simple incremental VALUE.
ti
tt
ti
fi
 2. INTRODUCTION TO BLOG WEBSITE

The purpose of Blog Website is to automate the existing manual system by the help of
computerized equipments and full-fledged computer software, fulfilling their
requirements, so that their valuable data/information can be stored for a longer period
with easy accessing and manipulation of the same. The required software and hardware
are easily available and easy to work with.

Blog Website, as described above, can lead to error free, secure, reliable and fast
management system. It can assist the user to concentrate on their other activities rather to
concentrate on the record keeping. Thus it will help organization in better utilization of
resources. The organization can maintain computerized records without redundant
entries. That means that one need not be distracted by information that is not relevant,
while being able to reach the information.

The Blog Website has been developed to override the problems prevailing in the
practicing manual system. This software is supported to eliminate and in some cases
reduce the hardships faced by this existing system. Moreover this system is designed for
the particular need of the company to carry out operations in a smooth and effective
manner.
 3. INTRODUCTION

3.1 About Project:

The application is reduced as much as possible to avoid errors while entering the data, it
also provides error messages while entering invalid data (like credentials). No formal
knowledge is needed for the user to use the system. Thus by this all it proves it is user-
friendly, Blog Website, as described above, can lead to error free, secure, reliable and fast
management system. It can assist the user to concentrate on their other activities rather to
concentrate on the record keeping. Thus it will help organization in better utilization of
resources.

If a user wants to comment on a blog post, then his/her comment will be submitted for
review to the admin. Now, if admin approve this comment, then this comment will be
shown on the blog post page along with the username.

3.2 Modules of Blog Website:

• Login Module: Used for managing the login details.

• New Blog Module: Used for managing the new blog details.

• New Category Module: Used for managing the new category details.

• Comment Management Module: Used for managing the information and details of
the comment.
• Blog Management Module: Used for managing the blog details.

• Users Module: Used for managing the users of the system.

3.3 Project Framework:

User sign-up and sign-in activity management in my project is shown in the following
activity diagrams:

SignUp Activity:

On signup page there is a form with two input fields. One is for entering the e-mail and
another is for entering the password.

If the email that the user enters, is already in use, then there will be an error in signing
up .Otherwise user will be registered successfully.

SignUp Activity Diagram:

SignIn Activity:

On login page there will be again two input fields. One is for entering the email used
while signing up and another is for entering the password.

If the email that the user enters doesn’t exist in the database then it will show error “No
such user”.

If the password entered by the user is incorrect then it will show an error “Incorrect
Password”.

SignIn Activity Diagram:

Edit Profile:

User can edit his profile and can also change the password. Clicking the update button
will update the user’s details in the database.

Comment on Blog:

User can comment on the blogs created by other users. Now this comment is submitted
for review by the admin. This comment is visible on the blog post only if admin approves
it.

All Posts:

User can show all the post created by him. Each blog post has two actions edit and delete,
where user can edit the post or delete the post from the database.

New Post:

User can create new post by providing all the necessary details.

All Comments:

User can see all the comments done on posts maintained by this user. Here user has a
option to approve or discard the comments.

Categories:
Admin can add new categories of the post and can edit or delete the existing categories.

4. OBJECTIVE OF THE PROJECT

The main objective of the Blog website is to manage the details of blogs, comment, new
category, and new blog. It manages all the information about blogs, comments, and
categories. The website is totally built at administrative end and thus only the
administrator is guaranteed the access. The purpose of the website is to build an
application program to reduce the manual work for managing the blogs, comments and
categories. It tracks all the details about the new category, new blog, and new comment.

4.1 Functionalities provided by Blog Website are as follows:

• It manages the comment details online for new blog details.

• It tracks and manages all the information of comment, blog etc.
• Shows the information and description of the blog post along with its category
and username.
• To increase efficiency of managing the blogs, comment.
• It deals with monitoring the information and transactions of new blog.
• Editing, adding and updating of records is improved which results in proper
resource management of blogs data.
• Integration of all records of blogs.
• Shows the information about the user (only when authentication is successful),
along with having a functionality of editing and updating the details of the user.
 5. PROJECT CATEGORY

The undergoing project falls under Online Web Portal category since the project is
mainly responsible for creation of the portal with the online database at backend. As we
know that, the Internet is huge client server architecture. The client is the web browser, it
is requesting a web based data, a file, or whatever, from some computer somewhere –
anywhere – in the world. The server is that computer that holds the information you want.
Node.js is a cross-platform for creating server-side scripting. It offers outstanding support
for both developers and administrators, providing improved ease-of-use, tool support,
reliability, scalability, administration and security.

Web Portal Features:

● Easy to understand.
● Interactive and attractive.
● Easy to use.
● Supports almost every Operating System.
● Efficient and reliable.
● Users can easily manage their account.
● Supports almost every Web Browser.

How to use?

1. Users can signup or signin using his credentials to manage their account.
2. User can easily view the list of all the blogs on the index page.
3. User can edit and update blog posts and category from the dashboard section.
4. User has an option to approve the comments made by the other users.
 5. User can create new blog post or a new category from the dashboard section after
logging in.

6. PROJECT STRUCTURE

Analysis Report:

System analysis is the first step towards the building of any web application . The
purpose of system analysis is to understand the system requirements, identify the data,
functional and behavioral requirements and building the models of the system for better
understanding of the system.

In the process of system analysis, one should first understand that, what the present
system is what it does, how it works (i.e. its functioning). After analyzing these points,
we become able to identify the problems the present system is facing. Upon evaluating
current problems and desired information (input and output to the system), the analyst
looks towards one or more solutions. The models created during the system analysis
process helps in better understanding of data and control flow, functional processing,
operational behavioral and information content.

Working Process of Proposed System:

• You can use blog website to create blogs or to read blogs maintained by other
users.
• The user login information is kept safe from others.
• When user uses the website for the first time he/she is shown the user login page
through which he can login to his account and can read or create the blog posts.
User can also comment on other blogs, which is visible on the blog post only
when approved by the admin.
• If the user is new to the system, then he/she will be redirected to signup page to
register in the system.
 7. TOOLS/ PLATFORM USED
For the undergoing project, following platforms are used:

IDE : Visual Studio Code 2020.1.45

The Operating System : Windows 10

The other tools/frameworks used are described below:

• Bootstrap 4:
It is the most popular HTML, CSS, and JS framework in the world for building
responsive, mobile-first projects on the web.

• ExpressJS (Node.js web application framework):

ExpressJS is a web application framework that provides you with a simple API to
build websites, web apps and back ends.

• Passport.js:
Passport is authentication middleware for Node. It is designed to serve a
singular purpose: authenticate requests. When writing modules, encapsulation is a
virtue, so Passport delegates all other functionality to the application. This
separation of concerns keeps code clean and maintainable, and makes Passport
extremely easy to integrate into an application.

In modern web applications, authentication can take a variety of forms. Traditionally,

users log in by providing a username and password. With the rise of social networking,
single sign-on using an OAuth provider such as Facebook or Twitter has become a
popular authentication method. Services that expose an API often require token-based
credentials to protect access.

Passport recognizes that each application has unique authentication requirements.

Authentication mechanisms, known as strategies, are packaged as individual modules.
Applications can choose which strategies to employ, without creating unnecessary
dependencies.
 • Mongoose: (For Storing Data in the Database)
Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js.
It manages relationships between data, provides schema validation, and is used to
translate between objects in code and the representation of those objects in
MongoDB.

8. PROJECT DESCRIPTION WITH CODE

Sign-up and sign-in Authentication (using passport.js):
Local Strategies are made for both signup and signin for authentication and security
purpose. The code for the same is given below:
const express = require('express');

const router = express.Router();

const defaultController = require('../controllers/defaultController');

const passport = require('passport');

const LocalStrategy = require('passport-local').Strategy;

const bcrypt = require('bcryptjs');

const User = require('../models/UserModel').User;

router.all('/*', (req, res, next) => {

req.app.locals.layout = 'default';

next();

});

// noinspec on JSCheckFunc onSignatures

router.route('/')

.get(defaultController.index);

// De ning Local Strategy

passport.use(new LocalStrategy({

usernameField: 'email',

passReqToCallback: true
fi
ti
ti
 }, (req, email, password, done) => {

User. ndOne({email: email}).then(user => {

if (!user) {

return done(null, false, req. ash('error-message', 'User not found with this email.'));

bcrypt.compare(password, user.password, (err, passwordMatched) => {

if (err) {

return err;

if (!passwordMatched) {

return done(null, false, req. ash('error-message', 'Invalid Username or Password'));

return done(null, user, req. ash('success-message', 'Login Successful'));

});

});

}));

passport.serializeUser(func on(user, done) {

done(null, user.id);

});

passport.deserializeUser(func on(id, done) {

User. ndById(id, func on(err, user) {

done(err, user);

});

});

// noinspec on JSCheckFunc onSignatures

router.route('/login')

.get(defaultController.loginGet)
fi
fi
ti
ti
ti
ti
ti
fl
fl
fl
 .post(passport.authen cate('local', {

successRedirect: '/',

failureRedirect: '/login',

failureFlash: true,

successFlash: true,

session: true

}) ,defaultController.loginPost);

// noinspec on JSCheckFunc onSignatures

router.route('/register')

.get(defaultController.registerGet)

.post(defaultController.registerPost);

router.route('/post/:id')

.get(defaultController.getSinglePost)

.post(defaultController.submitComment);

router.route('/pro le/:id')

.get(defaultController.pro leGet)

.post(defaultController.pro lePost);

router.get('/logout', (req, res) => {

req.logOut();

req. ash('success-message', 'Logout was successful');

res.redirect('/');

});

module.exports = router;

Creating a database for storing blog posts (using mongoose):

Blogs are stored in the database with the following fields in the document:

a. Post-title
fl
ti
fi
ti
fi
ti
fi
 b. Post-status
c. Post-description
d. User of the post
e. Post-category
f. Post-comments
g. Allow-comments
h. Post-image

The code for the same is given below:

const mongoose = require('mongoose');

mongoose.connect(mongoDbUrl, { useNewUrlParser: true })

.then(response => {

console.log("MongoDB Connected Successfully.");

}).catch(err => {

console.log("Database connec on failed.");

});

const Schema = mongoose.Schema;

const PostSchema = new Schema({

tle: {

type: String,

required: true

},

status: {

type: String,

default: 'public'

},

descrip on: {

type: String,

required: true

},
ti
ti
ti
 user: {

type: Schema.Types.ObjectId,

ref: 'user'

},

category: {

type: Schema.Types.ObjectId,

ref: 'category'

},

comments: [

type: Schema.Types.ObjectId,

ref: 'comment'

],

allowComments: {

type: Boolean,

default: false

},

le: {

type: String,

default: ''

},{

mestamps: true

});

module.exports = {Post: mongoose.model('post', PostSchema )};

Creating a database for storing users (using mongoose):

ti
fi
 Users are stored in the database with the following fields in the document:

a. First Name
b. Last Name
c. Email
d. Password
e. IsAdmin

The code for the same is given below:

const mongoose = require('mongoose');

mongoose.connect(mongoDbUrl, { useNewUrlParser: true })

.then(response => {

console.log("MongoDB Connected Successfully.");

}).catch(err => {

console.log("Database connec on failed.");

});

const Schema = mongoose.Schema;

const UserSchema = new Schema({

rstName: {

type: String,

required: true

},

lastName: {

type: String,

required: true

},

email: {

type: String,

required: true

},
fi
ti
 password: {

type: String,

required: true

},

isAdmin: {

type: Boolean,

required: true

});

module.exports = {User: mongoose.model('user', UserSchema )};

Creating a database for storing comment (using mongoose):

Comments are stored in the database with the following fields in the document:

a. Body
b. User of the comment
c. Date
d. IscommentApproved
e. Post

The code for the same is given below:

const mongoose = require('mongoose');

mongoose.connect(mongoDbUrl, { useNewUrlParser: true })

.then(response => {

console.log("MongoDB Connected Successfully.");

}).catch(err => {

console.log("Database connec on failed.");

});

const Schema = mongoose.Schema;

const CommentSchema = new Schema({

ti
 body: {

type: String,

required: true

},

user: {

type: Schema.Types.ObjectId,

ref: 'user'

},

date: {

type: Date,

default: Date.now()

},

commentIsApproved: {

type: Boolean,

default: false

},

post: {

type: Schema.Types.ObjectId,

ref: 'Post'

});

module.exports = {Comment: mongoose.model('comment', CommentSchema)};

 9. SNAPSHOTS OF THE WEB PAGES

SignIn Page:

SignUp Page:
Timeline/Index Page:
Edit Profile:

Single Post:
Comment on Post submitted for review:
Admin Dashboard:

All Posts:
New Post:

Edit Post:
All Categories:

Edit Category:
All comments:

Edit Comment:
Logout:
 10. CONCLUSION AND FUTURE SCOPE
While developing the system a conscious effort has been made to create and develop a
software package, making us of available tools, techniques and resources – that would
generate a proper system for causes.

While making the system, an eye has been kept on making it as user-friendly. As such
one may hope that the system will be acceptable to any user and will adequately meet his/
her needs. As in case of any system development process where there are a number of
short comings, there has been some shortcomings in the development of this system also.

In a nutshell, it can be summarized that the future scope of the project circles around
maintaining information regarding:
• We can give more advance software for Blog Website including facilities.
• We will host the platform on online servers to make it accessible worldwide.
• Integrate multiple load balancers to distribute the loads of the system.
• Create the master and slave database structure to reduce the overload of the
database queries.
• Implement the backup mechanism for taking backup of codebase and database on
regular basis on different servers.

The above mentioned points are the enhancements which can be done to increase the
applicability and usage of this project. Here we can maintain the records of Blogs and
Comments. Enhancements can be done to maintain all the Blogs, Comment, New
Category, New Blog and Technology Blog.

We have left all the options open so that if there is any other future requirement in the
system by the user for the enhancement of the system that it is possible to implement
them. In the last we would like to thanks all the persons involved in the development of
the system directly or indirectly. We hope that the project will serve its purpose for which
it is develop there by underlining success of process.
 11. REFERENCES
There are various sites which I had referred in order to complete my project. Some of
them are mentioned below:
• https://www.w3schools.com/
• https://getbootstrap.com/
• https://www.tutorialspoint.com/