1

Online Blogging system

A PROJECT REPORT

Submitted by

Ankith Lagupudi (19BCE0478)

Venkata Satya Koppula (19BCI0142)

CSE3002 Internet and Web Programming (EPJ)

Project Guide
Manjula V
Associate Professor Grade 1
School of Information Technology and
Engineering

Winter Semester 2020-2021

 2

ABSTRACT:
Blogging has become such a mania that every second a new and creative blog is being created. A
blog is the best way to present our thoughts and creativity among the online crowd. Blogs are
generally written by a single individual or occasionally by a small group, and often covers a
single subject.

Blog contains the Information related to various things such as Technology, Education, News,
International, Business, Sports, and Entertainment etc. The main aim of this project is to provide
data to the people in only one site. People can collect the information from the site and as well as
give their feedback as comments and create their own blog. People can post their views and
thought and analyze themselves. Besides all such core functionalities, the application also
includes features like giving comments to existing blogs, so as to provide a satisfactory user
experience.

The purpose of Online Blogging System is to automate the existing manual system by the help of
computerised equipments and full-fledged computer software, fulfilling their requirements, so
that valuable data/information can be stored safely and in effective manner for a longer period
with easy accessing and manipulation of the same.

Online Blogging System, as expressed above, can lead to error free, secure, reliable and fast
management system. This helps the user to concentrate on their work rather other activities. By
this user need not to be distracted by information that is not relevant, while being able to reach
the information.
 3

TABLE OF CONTENTS

CHAPTER TITLE PAGE NO.

LIST OF FIGURES

System
architecture……………………………………………………………………….18

User
module……………………………………………………………………………19

Admin
module……………………………………………………………………………20

ER
diagram…………………………………………………………………………..21

Schema of
database………………………………………………………………………….22

Home
page………………………………………………………………………………42

Blog
page………………………………………………………………………………43

Login
page………………………………………………………………………………44
 4

Register
page……………………………………………………………………………….44

About us
page……………………………………………………………………………….45

Posts_index_page…………………………………………………………………46

Create_post_page…………………………………………………………………46

Topics_index_page……………………………………………………………….47

Add_topic_page…………………………………………………………………...47

Users_index_page…………………………………………………………………48

Add_user_page……………………………………………………………………48

LIST OF TABLES
Users
table………………………………………………………………………………22

Admin
table………………………………………………………………………………23

Posts
table………………………………………………………………………………23
 5

Topics
table……………………………………………………………………………….23

Comments
table………………………………………………………………………………23

1 INTRODUCTION

1.1 SYSTEM OVERVIEW……………………………….11

1.2 OBJECTIVE…………………………………………..11

1.3 APPLICATIONS……………………………………..12

1.4 LIMITATIONS………………………………………12

2 SYSTEM ANALYSIS

2.1 EXISTING SYSTEM…………………………………13

2.1.1 Word press

2.1.2 Google Blogger

2.1.3 Medium

2.1.4 Wix

2.2 PROPOSED SYSTEM………………………………14

2.2.1 Benefits of Proposed System…………………15

2.2.1.1 Security
 6

2.2.1.2 Access Control

2.2.1.2.1 Admin

2.2.1.2.2 Usability

3 REQUIREMENT SPECIFICATION

3.1 HARDWARE REQUIREMENTS…………………….16

3.1.1 Minimum Hardware Configurations.

3.1.2 Recommended Hardware Configurations

3.2 SOFTWARE REQUIREMENTS…………………….17

3.2.1 Front End

3.2.1.1 HTML

3.2.1.2 CSS

3.2.1.3 Java script

3.2.2 Back End

3.2.2.1 MYSQL

3.2.2.2 PHP

3.2.2.3 XAMMP
 7

4 SYSTEM DESIGN SPECIFICATION

4.1 SYSTEM ARCHITECTURE…………………………..18

4.2 DETAILED DESIGN…………………………………..19

4.2.1 User Module

4.2.2 Admin Module

4.3 DATABASE DESIGN…………………………………21

4.3.1 ER Diagram

4.3.2 Schema of Database

4.3.3 Tables

4.3.3.1 User’s Table

4.3.3.2 Admin Table

4.3.3.3 Posts Table

4.3.3.4 Topics Table

4.3.3.5 Comments Table

4.3.4 Keys

5 SYSTEM IMPLEMENTATION

5.1 MODULE DESCRIPTION……………………………25

5.1.1 Modules involved in the project

5.1.1.1 User Module

 8

5.1.1.2 Admin Module

5.1.1.2.1 Search Reference Case

5.1.1.2.2 Other functionalities

5.1.1.2.3 Maintenance

5.2 RESULTS AND IMPLEMETATION…….........................28

5.2.1 The process of becoming Admin User

5.2.1.1 The Process of using contact us form

5.2.2 Comments Section Implementation

5.2.3 The Process of Posting Blog

6 CONCLUSION AND FUTURE ENHANCEMENTS

6.1 Conclusion…………………………………………….35

6.2 Future
enhancements………………………………………..36

7 APPENDICES

7.1 APPENDIX 1 - SAMPLE SOURCE CODE…………37

 9

7.1.1 Home page

7.2 APPENDIX 2 - SCREEN SHOTS /OUTPUTs………..38

7.2.1 Front End

7.2.1.1 User Interface

7.2.1.1.1 Home page

7.2.1.1.2 Blog Page

7.2.1.1.3 Login Page

7.2.1.1.4 Register Page

7.2.1.1.5 About us Page

7.2.1.2 Admin Interface

7.2.1.2.1 Posts_index_page

7.2.1.2.2 Create_Posts_page

7.2.1.2.3 Topics_index_page

7.2.1.2.4 Add_topic_page

7.2.1.2.5 Users_index_page

7.2.1.2.6 Add_user_page

7.2.2 Database Tables

7.2.2.1 User’s Table

 10

7.2.2.2 Topics Table

7.2.2.3 Comments Table

7.2.2.4 Posts Table

8 REFERENCES

8.1 LIST OF WEBSITES (URLs)…………………………50

 11

1. INTRODUCTION

1.1 SYSTEM OVERVIEW:

This website is about blogs where there are normal users (public) and
admin users who take care of maintenance of website. Our System consists of two modules user
module and admin module. Normal users have no access to admin module. We are using
MYSQL database for backend development and for Frontend development we are using html,
CSS, JavaScript.

1.2 OBJECTIVE:

Online Blogging System is a perfect platform for students, normal users

to know about various topics. This helps the user to know about particular topic clearly in a
straight way.

The basic objective of developing this project is:

• To increase motivation for reading and writing.

• To develop critical thinking skills.
• To learn about different Concepts Clearly without any irrelevant information to distract in
the blogs.
• To explain about any topic in detail.
 12

1.3 APPLICATIONS:

Online Blogging system has various applications in today’s World. It is helpful to the general
public , Students , Teachers etc.

• It work as a daily diary- As specialized content management systems, weblog

applications support the authoring, editing, and publishing of blog posts and comments.

• This system also provides special functions for image management, web syndication, and
post and comment moderation.

• This platform helps to the members of organization to communicate with each other.

• E-mail sending- It helps admin to send approval email to the member and members can
also recover their password through e-mail sending.

• This website will provide a personalized environment that would contain the information
related to the blog topic and image related to it.

1.4 LIMITATIONS:

Although we have put my best efforts to make the software flexible, easy to operate but
limitations cannot be ruled out even by us. Though the software presents a broad range of
options to its users some intricate options could not be covered into it; partly because of logistic
and partly due to lack of sophistication. Lack of time was also major constraint, thus it was not
possible to make the software foolproof and dynamic.

Considerable efforts have made the software easy to operate even for the people not
related to the field of computers but it is acknowledged that a layman may find it a bit
problematic at the first instance. The user is provided help at each step for his convenience in
interacting with the software.
 13

2. SYSTEM ANALYSIS

2.1 EXISTING SYSTEM:

2.1.1 Word press:

Word press is one of the most popular blog websites to start your hobbies or
business website. Serious bloggers prefer this platform.

2.1.2 Google blogger:

Blogger is one of the best free blogging platforms that offer a secure and reliable
way to create a blog.

2.1.3 Medium:

Medium is one of the simplest blogging systems in our list as it follows no-frills
approach to content publishing as it allows bloggers to write what they are passionate about.

2.1.4 Wix:

As medium, you don’t need any prior coding experience or web development
expertise to build a website or blog in Wix too, but way more customizable than Medium
 14

2.2 PROPOSED SYSTEM:

A user registration system that manages two types of users: Admin and Normal Users (Public).
The blog will have an admin area and a public area separate from each other. The admin area
will be accessible only to logged in admin users and the public area to the normal users and the
general public.

• In the admin section,

 Admin can create, view, update, publish/unpublish and delete ANY post.
 Admin can also create, view, update and delete topics.
 An Admin user can create another admin user, Can view, update and
delete other admin users.
• Only published posts are displayed in the public area for viewing.
• Each post is created under a particular topic.
• A many-to-many relationship exists between posts and topics.
• The public page lists posts; each post displayed with a featured image, author, and date of
creation.
• The user can browse through all posts listings under a particular topic by clicking on the
topic.
• When a user clicks on a post, they can view the full post and comment at the bottom of
the posts.
• A commenting system is implemented which allows users to comment.
 15

2.2.1 Benefits of Proposed System:

Our online blogging system is more focused on Security, Access control and usability.

2.2.1.1 Security:

Hashed value (SHA-256) of corresponding Password will be saved in the

database, In Case of data leak.

2.2.1.2 Access control:

2.2.1.2.1 Admin:

An Admin user can create another admin user and can view, update and delete
other admin users.

2.2.1.2.2 Usability:

We can filter the Blogs by selecting a list of topics provided. This saves a lot of
time to the user. An innovative search bar which users can use to find any blog easily by Blog
name or even the content.
 16

3. REQUIREMENT SPECIFICATION

3.1 HARDWARE REQUIREMENTS:

3.1.1 Minimum Hardware Configurations:

• Processor: 800MHz Intel Pentium III or equivalent

• Memory: 512 MB
• Disk space: 750 MB of free disk space.
• Screen resolution is 1024x768 pixels.

3.1.2 Recommended Hardware Configurations:

• Processor: Intel Core i5 or equivalent.

• Memory: 2 GB (32-bit), 4 GB (64-bit).
• Disk space: 1.5 GB of free disk space.
• Screen resolution is 1024x768 pixels.
 17

3.2 SOFTWARE REQUIREMENTS:

3.2.1 Front end:

3.2.1.1 HTML:

HTML (Hypertext Markup Language) is the standard markup language for documents
designed to be displayed in a web browser. We have designed the web pages in our Blog
Website using HTML-5.

3.2.1.2 CSS:

We will be using CSS3 in our Online Blogging system project to customize various aspects of
web pages like font size, style, color, etc in order to make our web pages attractive.

3.2.1.3 Java script:

We have used Java script in our Blog Website to fetch the required details and make the page
responsive.

3.2.2 Backend:

3.2.2.1 MySQL:

We will be using MySQL as the relational database management system in our project in
order to the Blog website.

3.2.2.2 PHP:

Used as a bridge between database and website.

 18

3.2.2.3 XAMPP Server:

We will be using XAMPP for running the local server that we used for testing PHP scripts
and to check the functionality of other parts of our Blog Website.

4. SYSTEM DESIGN SPECIFICATION

In our project we basically followed Repository model for system architecture which takes all the
data from the database and in detailed design we showed the interaction between the pages of
user side and the admin side

4.1 SYSTEM ARCHITECTURE:

Our Project can be represented in Repository model, because a central

database/Repository has been used to store/read/edit/remove data.
 19

4.2 DETAILED DESIGN:

4.2.1 User Module:

The Actor tags for each page and user navigation is represented in the below flow chart . the
navigation is designed in such a way that user can find a way back to home page
 20

4.2.2 Admin Module:

Navigation between the Admin side is shown in the below flow chart

Admin can navigate freely through the pages to manage posts, topics and users
 21

4.3 DATABASE DESIGN:

4.3.1 ER Diagram:
 22

4.3.2 Schema of database:

4.3.3 Tables:

4.3.3.1 Users table:

Attribute Type
User_id INT
Fname VARCHAR(255)
Lname VARCHAR(255)
Admin BOOLEAN
DOB DATE
Age INT
Email VARCHAR(255)
Password VARCHAR(255)
 23

4.3.3.2 Posts table:

Attribute Type
Post_Id INT
Topic_Id INT
Id INT
Title VARCHAR(255)
Image BLOB
Body TEXT
Published BOOLEAN
Created_at DATE

4.3.3.3 Topics table:

Attribute Type
Topic_Id INT
Name VARCHAR(255)
Description TEXT

4.3.3.4 Comments table:

Attribute Type
Comment_id INT
Name VARCHAR(255)
Post_id INT
Comment TEXT
Time TEXT
 24

4.3.4 Keys:

• Users table:-
o user_id(Primary key)
o Email(unique key)
• Posts table:-
o Post_Id(Primary key)
o Id(foreign key)
• Topics table:-
o Topic_Id(Primary key)
• Comment table:-
o Comment_id(Primary key)
o Post_id(foreign key)
 25

5. SYSTEM IMPLEMENTATION

5.1 MODULE DESCRIPTION:

5.1.1 Modules involved in the project:

• User module
• Admin module

5.1.1.1 User module:

This Module basically handles user side of our project which involves tasks
like sign in, login, viewing post, Comment on the post etc

 User can login

o User can enter an email
o User can enter a Password
o System validates the Gmail and password
o System checks the mandatory fields
 User can register
o User can Enter first name and last name
o User can enter email
o User can enter Phone number
o User can enter DOB
o User can enter password
o User can re-enter password for conformation
o System checks for mandatory fields
o System validated phone number, DOB, email
 User can view Trending and recent posts
 User can Click on ‘Read more’ option to open the Detailed blog post
 User can filter the Blog posts
o User can filter by selecting particular Topic
 26

o User can Search for a Blog by Entering a Keyword in search bar

provided
 User can comment on a blog post
 User can logout

5.1.1.2 Admin module:

This Module handles the information of user module like adding post,
managing post, Adding users, Managing users etc.

 Admin can add blog posts

o Admin can enter a title
o Admin can enter the content for the blog
o Admin can upload the image
o Admin can assign a topic
 Admin can modify the visibility of the post
 Admin can update/modify the post
 Admin can add a user
 Admin can update/modify the User details
 Admin can delete a User
 Admin can Add/update/modify a topic
 Admin can delete a topic
 Admin can delete a post.

5.1.1.2.1 Search Reference Case:

System will provide an interface for searching comprehensively
the reference information from the blogs of application on the basis of various
parameters, like Title of blogs and content of the blog.
 27

5.1.1.2.2 Other functionalities:

There are some other functionalities included in our project which are essential for the
completeness and security of Blogging system
 User can contact us by entering his email address and message at the footer
of the homepage
 Some quick links will be provided at the footer.
 Hash value of password will be saved in the database for security purposes.
5.1.1.2.3 Maintenance:
The following are maintained by the admin after deployment of the website
 Manage Blogs
 Manage Blogs topics
 Manage Recent posts
 Manage users
 Manage images
 Manage Comment
 Manage Contact us
 Manage Mails from contact us
 28

5.2 RESULTS AND IMPLEMENTATION:

5.2.1 The Process of becoming an Admin user:

Step-1:Creating an account:

Step-2:Trying to Log In:

 29

Step-3:Successfully Logged In:

The logged in user (Lokesh) is not an Admin user now.

 30

5.2.1.1 The Process of using contact us form to become Admin user :

Step-1:Fill in the Request:

Step-2:Success page:
 31

Step-3:User will get an Acknowledgement email :

Step-4:Admin gets the request:

 32

Step-5(for Admin):Admin Will approve the request and make the normal user as
Admin user:

5.2.2 Comments Section Implementation:

Step-1:Comment Section:

Step-2:Comment Posted:
 33

5.2.3 The Process of Posting a blog:

Step-1:Add post:
 34

Step-2:After Publish of post:

Post updated in database:

 35

6 .CONCLUSION AND FUTURE ENHANCEMENTS:

6.1 Conclusion:

While developing the system a conscious effort has been made to create and develop a
software package, making use of available tools, techniques and resources – that would generate
a proper system for cases.

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 have been some shortcomings in the
development of this system also.

6.2 Future Enhancements:

This project was developed to fulfill the requirement of common blogging platform. However,
there is lots of scope to improve the performance of the Online Blogging System in the area of
user interface, database performance, and query processing time etc.

So, there are many things for future enhancement of this project. The future enhancements
that are possible in the project are as follows:

• Web based interface for generate reports, like who has published more contents, who has
commented most, the logged in time etc.

• Development of mobile application which can run on multiple OS and devices.

• We can give more advance software for online Blogging System including more facilities
 36

• We can 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.

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 then it is possible to implement them.
 37

7. APPENDICES

7.1 APPENDIX 1 - SAMPLE SOURCE CODE:

Home page: index.php

<?php
include("path.php");
include(ROOT_PATH . "/app/controllers/topics.php");

$posts = array();
$postsTitle = 'Recent Posts';

if (isset($_GET['t_id'])) {
$posts = getPostsByTopicId($_GET['t_id']);
$postsTitle = "You searched for posts under '" . $_GET['name'] . "'";
} else if (isset($_POST['search-term'])) {
$postsTitle = "You searched for '" . $_POST['search-term'] . "'";
$posts = searchPosts($_POST['search-term']);
} else {
$posts = getPublishedPosts();
}

?>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<!-- Font Awesome -->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-
fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous">

<!-- Google Fonts -->

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap"
rel="stylesheet">
 38

<link rel="preconnect" href="https://fonts.gstatic.com">

<link href="https://fonts.googleapis.com/css2?family=Trade+Winds&display=swap"
rel="stylesheet">

<!-- Custom Styling -->

<link rel="stylesheet" href="assets/css/style.css">

<title>Blog</title>
</head>

<body>

<?php include(ROOT_PATH . "/app/includes/header.php"); ?>

<?php include(ROOT_PATH . "/app/includes/messages.php"); ?>

<!-- Page Wrapper -->

<div class="page-wrapper">

<!-- Post Slider -->

<div class="post-slider">
<h1 class="slider-title">Trending Posts</h1>
<i class="fas fa-chevron-left prev"></i>
<i class="fas fa-chevron-right next"></i>

<div class="post-wrapper">

<?php foreach ($posts as $post): ?>

<div class="post">
<img src="<?php echo BASE_URL . '/assets/images/' . $post['image']; ?>" alt=""
class="slider-image">
<div class="post-info">
<h4><a href="single.php?id=<?php echo $post['id']; ?>"><?php echo $post['title'];
?></a></h4>
<i class="far fa-user"> <?php echo $post['username']; ?></i>
&nbsp;
<i class="far fa-calendar"> <?php echo date('F j, Y', strtotime($post['created_at']));
?></i>
</div>
</div>
<?php endforeach; ?>

</div>

</div>
 39

<!-- // Post Slider -->

<!-- Content -->

<div class="content clearfix">

<!-- Main Content -->

<div class="main-content">
<h1 class="recent-post-title"><?php echo $postsTitle ?></h1>

<?php foreach ($posts as $post): ?>

<div class="post clearfix">
<img src="<?php echo BASE_URL . '/assets/images/' . $post['image']; ?>" alt=""
class="post-image">
<div class="post-preview">
<h2><a href="single.php?id=<?php echo $post['id']; ?>"><?php echo $post['title'];
?></a></h2>
<i class="far fa-user"> <?php echo $post['username']; ?></i>
&nbsp;
<i class="far fa-calendar"> <?php echo date('F j, Y', strtotime($post['created_at']));
?></i>
<p class="preview-text">
<?php echo html_entity_decode(substr($post['body'], 0, 150) . '...'); ?>
</p>
<a href="single.php?id=<?php echo $post['id']; ?>" class="btn read-more">Read
More</a>
</div>
</div>
<?php endforeach; ?>

</div>
<!-- // Main Content -->

<div class="sidebar">

<div class="section search">

<h2 class="section-title">Search</h2>
<form action="index.php" method="post">
<input type="text" name="search-term" class="text-input" placeholder="Search...">
</form>
</div>

<div class="section topics">

<h2 class="section-title">Topics</h2>
<ul>
 40

<?php foreach ($topics as $key => $topic): ?>

<li><a href="<?php echo BASE_URL . '/index.php?t_id=' . $topic['id'] . '&name=' .
$topic['name'] ?>"><?php echo $topic['name']; ?></a></li>
<?php endforeach; ?>
</ul>
</div>

</div>

</div>
<!-- // Content -->

</div>
<!-- // Page Wrapper -->

<?php include(ROOT_PATH . "/app/includes/footer.php"); ?>

<!-- JQuery -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Slick Carousel -->

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-
carousel@1.8.1/slick/slick.min.js"></script>

<!-- Custom Script -->

<script src="assets/js/scripts.js"></script>

</body>

</html>
 41

7.2 APPENDIX 2 - SCREEN SHOTS /OUTPUTs:

7.2.1 Front-end:

No. of pages for the project: 12

The following design parameters are taken:

7.2.1.1 User interface: (5 pages)

7.2.1.1.1 Home page:

42
 43

7.2.1.1.2 Blog_Page:
 44

7.2.1.1.3 Login page:

7.2.1.1.4 Register page:

 45

7.2.1.1.5 About us page:

 46

7.2.1.2 Admin interface: (6 pages)

7.2.1.2.1 Posts_index_page:

7.2.1.2.2 Create_post_page:
 47

7.2.1.2.3 Topics_index_page:

7.2.1.2.4 Add_topic_page:
 48

7.2.1.2.5 Users_index_page:

7.2.1.2.6 Add_user_page:
 49

7.2.2 Database Tables:

7.2.2.1 User’s Table:

7.2.2.2 Topics Table:

7.2.2.3 Comment’s Table:

7.2.2.4 Post’s Table:

 50

8. REFERENCES
8.1 LIST OF WEBSITES (URLs):
[1] https://www.therandomblogs.in/
[2] https://stackoverflow.com/questions/16675753/php-fastest-way-
to-handle-undefined-array-key
[3] https://www.w3schools.com/css/css3_buttons.asp
[4] https://www.w3schools.com/php/default.asp
[5] https://www.thapatechnical.com/2020/03/how-to-send-mail-
from-localhost-xampp.html
[6] https://www.w3schools.com/php/php_sessions.asp
[7] https://api.jquery.com/category/css/
[8] https://www.w3schools.com/php/php_file_upload.asp
[9] https://stackoverflow.com/questions/67762573/css-change-only-
background-not-border
[10] https://www.w3schools.com/html/default.asp