NEWS BLOG WEB APPLICATION

A PROJECT REPORT
Submitted by

19BCE2697 – Ayush Pandya

19BCE2614 - Devanshi Choudhary
19BCE0771 – Arunabh Kumar

Under the Guidance of

Prof. S. JENICKA

For the course

Course Code: CSE4015

Course Name: HUMAN COMPUTER INTERACTION

Semester: Winter 2022

 CONTENTS

SNo. Topic Page Number

1. Title Page 1
2. Contents 2
3. Acknowledgement 3
4. Abstract 4
5. Introduction 5
6. Requirement Analysis 6
7. Task Analysis 7
8. Survey 10

9. User Profiles 15
10. Data Flow 16
11. Description 20
12. Screenshots 23
13. Heuristic evaluation 27
14. Conclusion 34
15. References 36
 ACKNOWLEDGEMENT
The contentment that follows the fortunate fulfilment of a task would not be complete
without the mention of those who made it feasible whose constant advice and inspiration
helped us in gaining valuable knowledge. For completing our project, we had to take the
support and guidance of some esteemed individuals, who deserve our deepest
acknowledgement.

We would like to extend our gratefulness to Prof, S. Jenicka, VIT University for giving
us a good direction for project throughout several discussions. Many individuals
including our team members itself, have made worthy recommendations on this project
which gave us an inventiveness to enrich our project. We acknowledge all individuals
for their assistance directly or indirectly to finish our project.
Team Members:

Ayush Pandya(19BCE2697)
Devanshi Choudhary(19BCE2614)
Arunabh Kumar(19BCE0771)
 ABSTRACT

This project aims to develop a computerized and easy to access the day-to-day news without having
to wait. This system will consist of 3 portals namely admin, user and author who can perform various
actions that they are given access to. The Project “News Blog web application” is aimed at developing such
an efficient website that helps in providing up to date news about various happenings around the world. The
information provided in the portal will aim to garner to the taste of people from all age groups and all walks
of life who are interested in different kinds of news. This system allows the user to have a friendly user
interaction and provides greater efficiency with better service. This system also gives an opportunity to
anyone with the skills and interest to write. One just has to enroll and become an author for the portal and
can write about what interests them so that they can share the story to the world in their own words.

The information displayed in the portal will be stored in a carefully designed database for the
admin to retrieve and insert data with ease as an when required. The database consists of various tables
that are normalized so that there is no repetition of data and data is stored in an optimized way. The
objective with which we have worked to complete this project is to use the concepts learnt in Human
Computer Interaction and apply it to implement a detailed yet feasible project that allows the operation
and working of the portal in an efficient manner.

The news articles are and grouped into various categories and a search function is also present
for the ease of searching of a particular article in the portal without this searching will probably be like
searching for a needle in a haystack. The main aim of this project is to build a news portal that is easily
accessible for all and have access to the various features designed for them. Overall, this project aims
to have news articles in a clutter free manner and maintain the data in the best way possible to reduce
the human efforts.
 INTRODUCTION

Our Website is a news portal that displays news with respect to various genres. The main
functionalities for a user include browsing through the home page, searching the website for a particular
article, bookmarking an article for future reading. On the admin side the functionalities include adding a
genre for new articles to be written, to make a particular article trending, to enable or disable an article from
being visible on the website for the user to view and delete a particular article. On the author side the main
functionalities include writing a new article in the genre they wish to write, editing their other articles,
viewing all the articles written by them, deleting an article, changing their name and password.

Overview:

This project is basically a News Portal where admin, the author of the news articles and the users have
separate logins.

• Each of the above mentioned can login using their correct username (email address) and
password and alter their details in their respective portals.
• The admin can enable an article to be in the trending section, can enable or disable an article
for being on the user portal for public view, can delete an article permanently from the
website and therefore the database. Only the admin can add and new categories and he can
also edit the details of already existing categories. He can change his password and has the
details of the number of premium users that use our web app.
• Users can be of two types. Premium users and free users. Free users can view and read all the
news articles available in the portal. Whereas the Premium users have the additional abilities
to bookmark or save their favorite news articles that they would want to come back to and
download the article that they want.
• Authors have the facility to write their news articles in the particular genre which it belongs
to. He can update or modify and delete his own previous articles. He can also view the
number of Premium users who have bookmarked his articles. He can change his password
and name (that is visible to users as the name of the author).

2
 REQUIREMENT ANALYSIS

● Languages and Frameworks Used: HTML, CSS, Javascript, PHP, MySQL

● What does the website do?

The website provides a platform where people from any class of society can write the article. Our
website has a strict policy against the hate speech and clickbait news. Our website would not be
owned by any corporate and it would run on the public money. And this would make our website
much more reliable as we won’t be answerable to anyone except the readers. Unlike the television
news where there is just shouting at each other we would be having civilized debates of ideas with
the help of article and counter article. Articles and news would be fact checked and then only would
be put up on the website.

● Who are the users?

Students, adults and almost anyone who wants to read news and knows how to use the internet on
laptop or computer or even mobile phones.

● What does the user need to do?

The user just needs to login with their respective credentials and navigate via our user-friendly
website to their required service. The navigation bar contains all the links necessary to get all the
services.

● Performance requirements?

The most important requirement would be that all the users should be able to access the website
simultaneously. And, that our website should consume less bandwidth so that people who do not
have good quality internet could also get the news.
 TASK ANALYSIS

● Plan 0: To create a news blog website

● Plan 1: Visual Studio for developing the website.
● Plan 2: Deciding the implementation tools that we would require to build the
website
● Plan 3: Home Page
● 3.1: Category of news or article
● 3.2: Bookmarks
● 3.3: Login page
● 3.3.1: User Login page
● 3.3.1.1: Validation from the database
● 3.3.2: User Signup page
● 3.3.3: Author Login page
● 3.3.3.1: Validation from the database
● 3.3.4: Author Signup page
● 3.4: Search an article based on category, date, name of author, title of the
article
● Plan 4: Premium User
● 4.1: Search article based on category, date, name of author, title of the article
● 4.2: Bookmark the article
● 4.2.1: Favorite article
● 4.2.2: Remove from bookmark
● 4.3: Access Premium articles
● 4.4: View trending articles
● Plan 5: Free user
● 5.1: Bookmark the article (but has to sign up)
● Plan 6: Author
 ● 6.1: Write a new article
● 6.1.1: Choose category in which article is written
● 6.1.2: Choose relevant image describing the article
● 6.2: View article
● 6.3: Check views on their article
● Plan 7: Admin
● 7.1: Choose the trending article
● 7.2: Enable or disable false or fake news
● 7.3: Delete an articles
● 7.4: Enable or disable an author or user
● 7.5 Create a new category
● Plan 0: To create a news blog website
● Plan 1: Visual Studio for developing the website.
● Plan 2: Deciding the implementation tools that we would require to build the
website
● Plan 3: Home Page
● 3.1: Category of news or article
● 3.2: Bookmarks
● 3.3: Login page
● 3.3.1: User Login page
● 3.3.1.1: Validation from the database
● 3.3.2: User Signup page
● 3.3.3: Author Login page
● 3.3.3.1: Validation from the database
● 3.3.4: Author Signup page
● 3.4: Search an article based on category, date, name of author, title of the
article
● Plan 4: Premium User
● 4.1: Search article based on category, date, name of author, title of the article
 ● 4.2: Bookmark the article
● 4.2.1: Favorite article
● 4.2.2: Remove from bookmark
● 4.3: Access Premium articles
● 4.4: View trending articles
● Plan 5: Free user
● 5.1: Bookmark the article (but has to sign up)
● Plan 6: Author
● 6.1: Write a new article
● 6.1.1: Choose category in which article is written
● 6.1.2: Choose relevant image describing the article
● 6.2: View article
● 6.3: Check views on their article
● Plan 7: Admin
● 7.1: Choose the trending article
● 7.2: Enable or disable false or fake news
● 7.3: Delete an articles
● 7.4: Enable or disable an author or user
● 7.5 Create a new category
SURVEY
PRIMARY USER

Profile

Secondary User Profile

Tertiary User Profile

 DATA FLOW
HTA

STORY BOARD

Home Page
Categories Page

Search Page
News Article Page

Author Login Page

User Login Page
 MODULE DESCRIPTION
The entire project as a whole can be divided into 5 modules to make explanations simple, the three
modules being:

• The Premium user portal

• The free user portal
• The author portal
• The admin portal

• Plagiarism Checker

Module: Premium User

This module begins off with the user requiring to enter the username (email address) and password to
enter his portal. The entered data is then matched with all the user details present in the database. If no
match appears then access is denied. If match appears then access to enter the portal is granted. The
Premium user can change his password.

A user can search for news articles based on his preferred category like food, sports, entertainment,
politics etc. Each category consists of the respective article in that category. In the home page new
articles that the recently updated are displayed. The user can view all the articles irrespective of the
category when he clicks the more button in the home page. He can also look up the trending or popular
articles of the week. He can also search the articles date wise and view the articles posted on a
particular date of choice. User can search for a particular article by giving keywords like the title of the
article, name of the author etc.

When the user visits the article page wherein the entire article is displayed the user can also view similar
articles and the trending article on a side bar as people also read and must read respectively.

Additionally, a logged in user can bookmark his favorite article and visit it again when needed. When the
bookmarked article is not needed any further that article can also be removed from bookmark. The
bookmarked articles will be displayed in a separate bookmark page where all his bookmarked articles will
be present. The Premium user can also download the article, if necessary, need arises.

4
Module: Free User

A free user does not need to login. The portal can be directly accessed by anyone. If a free user wants
to bookmark any article for future reference, he has to create an account and login to avail that feature.

A user can search for news articles based on his preferred genre like food, sports, entertainment,
politics etc. He can also look up the trending or popular articles of the week. He can also search for
articles date wise and view the articles posted on a particular date of choice. User can search for a
particular article by giving keywords like the title of the article, name of the author etc.

Therefore, a free user can basically avail all the features and do all the things that a premium user does
except for the bookmarking and downloading for articles feature. If they want to avail it they have to
create and account and login to our web app.

Module: Author

This module begins off with the author requiring entering the author username (email address) and
password to enter his portal. The entered data is then matched with all the author details present in the
database. If no match appears then access is denied. If match appears then access to enter the portal is
granted.

The author can write new articles and post it in the portal by selecting the appropriate category in
which the article is written and to be displayed. The news article will contain a relevant picture
describing the content of the article. The author can view all his articles and when he had published it.

The author can also modify and delete his old articles from the portal if he wishes to do so. The author
can change his password and name. The author can also view the number of times his articles has
gotten bookmarked by premium users.
Module: Admin

This module begins off with the admin requiring to enter the admin username and password to enter
his portal. The entered data is then matched with all the admin details present in the database. If no
match appears then access is denied. If match appears then access to enter the portal is granted.

The admin can mainly enable the articles to be in the trending section, can enable or disable the
articles from being displayed in the user side. Therefore, from this we can see that when the author
writes a new article and posts’ it, the article does not directly get updated on the user side, the admin
has to approve and enable the article so that it can be visible to the user. The admin can also delete
an article permanently from the website and therein the database.

The admin can also create a new category and give it a description. We can also assign it a color to
distinctly identify the category. The admin can also change his password.

Module: Plagiarism Checker

This module would be present in one of the tab in home page. It will have a text box where we can
put the text that we want to verify. It would give all the links of the text we are finding the
plagiarism for from the web.
 SCREENSHOTS

Home Page
Categories Page (Category wise news)
Search Page
Plagiarism Detection
Author Dashboard
 HEURISTICS EVALUATION

H1-1: Simple and natural dialog

We have included dialogs from the system to the user which will give user the
feedback of his/her actions. For example, we have included a dialog box after the
logout process which will great the user once he has logged out

H1-2: Speak the users’ language

As we can see that all the options in the navigation bar have easy to understand words
written in English, thus it becomes easy for the users to remember the task they came
to perform, and the steps needed to perform those tasks.
H1-3: Minimize users’ memory load

There is a Bookmarks section included in the application which will allow the user to
note down the articles read thus reducing his memory load
H1-4: Consistency

The UI of our application is consistent as the design and overall structure remains
same for most of the pages. Users would not be shocked once they open a diff page
coz all the pages have similar looking components thus maintaining the overall
consistency of the application.
H1-5: Feedback

We have given social link in the footer of every page of the application. This will
allow the users to send feedback regarding the UI of the project or any other
suggestion.
H1-6: Clearly marked exits

Our website has clearly marked exits. When the reader is done using the website as
reader and now wants to switch their profile as author, they can directly go to the nav
bar and log out as reader. The exit is as simple as that.

H1-7: Shortcuts

The website allows the users to use shortcut to search the article they wish to read by
applying filters. The short cut is basically for telling the website all the requirement of
the user.
H1-8: Precise & constructive error messages

The error messages are precise enough to make the user aware of the exact error that
they are making and also give suggestions to correct the error.

H1-9: Prevent errors

To prevent any type of error, the website gives out error messages before hand.
H1-10: Help and documentation

We have provided various links at the bottom of the website for any kind of help. The
links will direct the users to our social media handles from where they can directly
contact us.
 CONCLUSION

In this project a user friendly and an easy news portal is created using HTML, CSS, JavaScript, PHP
and MySQL database. This project facilitates the user to read articles on various topics that are to their
liking without much hassle as the portal has been designed in such a way that anyone and everyone can
understand. The main aim of this project is to use the knowledge gained in the course Human
Computer Interaction and apply it to our project to make it more user friendly and have a very
interactive user interface.

Each portal for the premium user, free user, author and admin are carefully designed to let each of them
have maximum benefit and easy access to everything that is available for them. When the free user
tries to access the facilities that are available exclusively only of the premium user they are directly
redirected to the login or sign-up page to give them the opportunity to sign up and become a premium
user to avail those facilities. The main functionality in the author’s portal is the place where they write
a new article which is very easily understandable (as to where the title should be written or where the
picture that goes with the article should be uploaded and where he main content of the article should be
written). In the admin module the admin has to approve of the article that the author has written for it
to be displayed in the main news portal otherwise it will not be displayed. He can also remove an
article from the main news portal at any time for any valid reason.

The new concepts which we have learnt while implementing this is main two things. The download
option that is visible in the main news portal inside the article and the activation and deactivation of
articles in the admin module.
 REFERENCES

1. mPDF, PHP library to generate PDF files from UTF-8 encoded HTML, based on FPDF and
HTML2FPDF with a number of enhancements.

2. PHP- MySQL Documentation.

3. Enablingbiz Solutions, Case Studies News Website Development – Pubic News.

4. Adam M. Erickson, “Developing a Web BasedContent Management System Using PHP”,

Bachelors of Science in Information Systems Management Ferris State University, 2012.

5. Build a CMS in an Afternoon with PHP and MySQL, 14 May 2019 Updated for PHP7
compatibility.