A

Minor Project Report

ON
BUYVEG ECOMMERCE WEBSITE

for the Partial fulfilment of the award of

Degree of
Bachelors of Computer Application (BCA)

Under the Guidance of : Submitted by:

Lavesh khairajani

Department of Computer Application

JECRC UNIVERSITY, JAIPUR

JULY 2022

Candidate’s Declaration

I hereby declare that the project work, which is being presented in the Project Report, entitled

Daily News using NEWS API which has been developed by Lavesh khairajani , Kartik Pradhan in
partial fulfillment for the award of Degree of “Bachelors of Computer Application” in Deptt. of

Computer Application, JECRC University is a record of my own investigations carried under the

Guidance of ……… ( Guide name).

..................................................................................................................................

I have not submitted the matter presented in this Project Report anywhere for the award of any other

Degree.

Name of Candidate:

Lavesh khairajani (20bcyn017)

Kartik Pradhan (20bcyn010)

Signature

Enrolment No.: ............

Name(s) of Supervisor(s)/Guide
.....................................
.....................................

Countersigned By:
HoD- CA
 Table Of Content

Date Topic
Abstract
Unit -1 Introduction
Unit -2 Feasibility Study Of The Project
Unit -3 System Requirement Analysi
Unit -4 System Design
Unit -5 Coding
Unit -6 Testing
Unit -7 Implementation
Unit -8 Snapshots
Unit -9 Conclusion
Unit -10 Biblography

Abstract of News

The capstone project entitled “News Portal Application” is an online platform

designed and developed in PHP, MySQL and Bootstrap. It was aimed as an
alternative in the current process of news publication. Researchers used the
Rapid Application Development as the software development life cycle, with
this model, the researchers was able to release a prototype based on the
 requirements of the end-user. The news portal application was evaluated by
IT experts and provided their opinions and suggestions on how to improve the
prototype. The output was then presented to the clients or end-users for
testing purposes. In general the application was rated very good by both the
IT experts and the end-users for it will improve the business process and
method of news publication. The researchers therefore recommends the
implementation of the said project for it will not only bring satisfaction and
convenient to the management but for their clients and readers as well.

1 INTRODUCTION

In the current scenario, there is no single platform ( present right now which provides
cybersecurity information, E-Sport information, Science and Technology Information, etc. in
one place. Cybersecurity users have to visit different websites to gather th e news related to
the cyber world. Many people do not have the time to visit different sites to gather
information. Ultimately, this would be a waste of time and effort. Visiting different websites,
the user might get the redundancy in the information. The purpose is to develop an web
application, which will eliminate the problems faced in the current scenario. This application
will provide all the information and news related to cybersecurity, E -sport, Science, and
Technology or that are in trend at one place. So, it will save time and efforts of the users by
making it more efficient. Using, this application will terminate the possibility of information
redundancy.The Motivations and scope behind this project are to connect people through this
web application and provide a medium to share their views on the topic/news/information.
Then, People with the same interest can interact with each other. However, they can even
share more information on the topic.
2 Feasibilty Study

A feasibility study conducted by Global Pulse with UNDP explored how data mining of large -
scale online news data could complement existing tools and information for conflict analysis
and early warning. Taking Tunisia as a test case, analysing news media archives from the period

immediately prior to and following the January 2011 government transition, the study showed
how tracking changes in tone and sentiment of news articles over time could offer insights
about emerging conflicts. This study evidenced the considerable possibilit ies for further

explorations into how mining of online digital content can be leveraged for conflict prevention.
During the study it was also found that Social networking sites such as Twitter and Facebook
have been shown to function as effective social se nsors that can "feel the pulse" of a

community. The aim of the current study is to test the feasibility of designing, implementing
and evaluating a social media-enabled intervention that can be effective for sharing and
changing knowledge, attitudes and behaviours in meaningful ways to We present the design
and implementation details of the campaign followed by summary findings and analysis. This

shows the contribution of social media is also seen for conveying news.

3 Software Requirements Specification

A software requirements specification (SRS) is a description of a software system to be

developed. It is modeled after business requirements specification (CONOPS). The software
requirements specification lays out functional and non-functional requirements , and it may

include a set of use cases that describe user interactions that the software must provide to the
user for perfect interaction.
Software requirements specification establishes the basis for an agreement between customers
and contractors or suppliers on how the software product should function (in a market-driven

project, these roles may be played by the marketing and development divisions). Software
requirements specification is a rigorous assessment of requirements before the more specific
system design stages, and its goal is to reduce later redesign. It should also provide a realistic
basis for estimating product costs, risks, and schedules. Used appropriately, software
requirements specifications can help prevent software project failure.

The software requirements specification document lists sufficient and necessary requirements
for the project development. To derive the requirements, the developer needs to have clear
and thorough understanding of the products under development. This is ac hieved through

detailed and continuous communications with the project team and customer throughout the
software development process.

The SRS may be one of a contract's deliverable data item descriptions or have other forms of
organizationally-mandated content.

3.1 Problem Statement:-

In the current scenario, there is no single platform present right now which provides
cybersecurity information, E-Sport information, Science and Technology Information,
etc. in one place

3.2 Solution we are offering :-

In the current scenario, there is no single platform present right now which provides

cybersecurity information, E-Sport information, Science and Technology Information,

etc. in one place so we are providing soltuion for that my creating a web help which will
help users to obtain news realted to different categories and different date according
to user need

3.3 Features:-
 • Search by categories

• Search by dates

• Multipaging

• Infinite spinning

• Easy scrooling

• Easy one tap redirecting

• No ads & bugs

• Won't track user data

SYSTEM DESIGN

4.1 E-R Diagram →

An Entity-Relationship (ER) Diagram is a flowchart that illustrates how “entities” such as

people, objects, or concepts relate to each other within a system. ER Diagrams are
often used to design or debug relational databases in software engineering, business
information systems, education, and research. Also known as ERDs or ER Models, they
use a defined set of symbols such as rectangles, diamonds, ovals, and connecting lines
to depict the interconnectedness of entities, relationships, and their attributes. They
mirror grammatical structure, with entities as nouns and relationships as verbs.
Software and Technologies we used to develop our Project:-

Operating Systems Used:-

1. Microsoft Windows (Primarily Used):-

Microsoft Windows, also called Windows and Windows OS, computer operating system
(OS) developed by Microsoft Corporation to run personal computers (PCs). Featuring
the first graphical user interface (GUI) for IBM-compatible PCs, the Windows OS soon
dominated the PC market. Approximately 90 percent of PCs run some version of
Windows. The first version of Windows, released in 1985, was simply a GUI offered as
an extension of Microsoft’s existing disk operating system, or MS-DOS. Based in part
on licensed concepts that Apple Inc. had used for its Macintosh System Software,
Windows for the first time allowed DOS users to visually navigate a virtual

desktop, opening graphical “windows” displaying the contents of electronic folders and
files with the click of a mouse button, rather than typing commands and directory paths
at a text prompt.

2. Linux OS (Ubuntu20.04) :-

Ubuntu is a complete desktop Linux operating system, freely available with both
community and professional support. The Ubuntu community is built on the ideas
enshrined in the Ubuntu Manifesto: that software should be available free of charge,
that software tools should be usable by people in their local language and despite any
disabilities, and that people should have the freedom to customize and alter their
software in whatever way they see fit. "Ubuntu" is an ancient African word, meaning
"humanity to others". The Ubuntu distribution brings the spirit of Ubuntu to the software
world. Ubuntu is built on Debian's architecture and infrastructure, and comprises Linux
server, desktop, and discontinued phone and tablet operating system versions.

3 VS code:
Why did we build Visual Studio Code?

Visual Studio Code combines the simplicity of a source code editor with powerful
developer tooling, like IntelliSense code completion and debugging. First and foremost,
it is an editor that gets out of your way. The delightfully frictionless edit-build-debug
cycle means less time fiddling with your environment, and more time executing on your
ideas.

Available for macOS, Linux, and Windows#

Visual Studio Code supports macOS, Linux, and Windows - so you can hit the ground
running, no matter the platform. Visual Studio Code runs on macOS, Linux and
Windows

Edit, build, and debug with ease#

At its heart, Visual Studio Code features a lightning fast source code editor, perfect for
day-to-day use. With support for hundreds of languages, VS Code helps you be
instantly productive with syntax highlighting, bracket-matching, auto-indentation, box-
selection, snippets, and more. Intuitive keyboard shortcuts, easy customization and
community-contributed keyboard shortcut mappings let you navigate your code with
ease. For serious coding, you'll often benefit from tools with more code understanding
than just blocks of text. Visual Studio Code includes built-in support for IntelliSense
code completion, rich semantic code understanding and navigation, and code
refactoring. And when the coding gets tough, the tough get debugging. Debugging is
often the one feature that developers miss most in a leaner coding experience, so we
made it happen. Visual Studio Code includes an interactive debugger, so you can step
through source code, inspect variables, view call stacks, and execute commands in the
console. VS Code also integrates with build and scripting tools to perform common
tasks making everyday workflows faster. VS Code has support for Git so you can work
with source control without leaving the editor including viewing pending changes diffs.

Make it your own#

Customize every feature to your liking and install any number of third-party extensions.
While most scenarios work "out of the box" with no configuration, VS Code also grows
with you, and we encourage you to optimize your experience to suit your unique needs.
VS Code is an open-source project so you can also contribute to the growing and
vibrant community on GitHub.

Built with love for the Web#

VS Code includes enriched built-in support for Node.js development with JavaScript and
TypeScript, powered by the same underlying technologies that drive Visual Studio. VS
Code also includes great tooling for web technologies such as JSX/React, HTML, CSS,
SCSS, Less, and JSON.

Robust and extensible architecture#

Architecturally, Visual Studio Code combines the best of web, native, and language-
specific technologies. Using Electron, VS Code combines web technologies such as
JavaScript and Node.js with the speed and flexibility of native apps. VS Code uses a
newer, faster version of the same industrial-strength HTML-based editor that has
powered the "Monaco" cloud editor, Internet Explorer's F12 Tools, and other projects.
Additionally, VS Code uses a tools service architecture that enables it to integrate with
many of the same technologies that power Visual Studio, including Roslyn for .NET,
TypeScript, the Visual Studio debugging engine, and more. Visual Studio Code includes
a public extensibility model that lets developers build and use extensions, and richly
customize their edit-build-debug experience.

4 News API

News API is a simple HTTP REST API for searching and retrieving live articles from all
over the web. It can help you answer questions like:

What top stories is TechCrunch running right now?

What new articles were published about the next iPhone today?

Has my company or product been mentioned or reviewed by any blogs recently?

You can search for articles with any combination of the following criteria:

Keyword or phrase. Eg: find all articles containing the word 'Microsoft'.

Date published. Eg: find all articles published yesterday.

Source domain name. Eg: find all articles published on thenextweb.com.

Language. Eg: find all articles written in English.

You can sort the results in the following orders:

• Date published

• Relevancy to search keyword

• Popularity of source

You need an API key to use the API - this is a unique key that identifies your requests.
They're free while you're in development.
Technologies Used:-

1. HTML:- (Hypertext Markup Language)

The HyperText Markup Language or HTML is the standard markup language for
documents designed to be displayed in a web browser. Web browsers receive HTML
documents from a web server or from local storage and render the documents into
multimedia web pages. HTML describes the structure of a web page semantically and
originally included cues for the appearance of the document. HTML elements are the
building blocks of HTML pages. HTML provides tags that are used to navigate from one
page to another and are heavily used in internet navigation.HTML5 has native support
for rich experience and is now useful in the gaming development arena as well.

2. CSS:- (Cascading Style Sheets)\

Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language such as HTML. CSS is a
cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS
is designed to enable the separation of presentation and content, including layout,
colors, and fonts. CSS is designed to enable the separation of presentation and content,
including layout, colors, and fonts. 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.

3. Javascript:-
JavaScript was initially created to “make web pages alive”. The programs in this
language are called scripts. They can be written right in a web page’s HTML and run
automatically as the page loads. Scripts are provided and executed as plain text. They
don’t need special preparation or compilation to run. Javascript is the most popular
programming language in the world and that makes it a programmer’s great choice.
Once you learned Javascript, it helps you develop great front-end as well as back-end
software using different Javascript-based frameworks like jQuery, Node.JS, etc.
Javascript is everywhere, it comes installed on every modern web browser and so to
learn Javascript you really do not need any special environment setup.

4 Bootstrap :

Bootstrap is a free, open source front-end development framework for the creation of
websites and web apps. Designed to enable responsive development of mobile-first
websites, Bootstrap provides a collection of syntax for template designs.

As a framework, Bootstrap includes the basics for responsive web development, so

developers only need to insert the code into a pre-defined grid system. The Bootstrap
framework is built on Hypertext Markup Language (HTML), cascading style sheets
(CSS) and JavaScript. Web developers using Bootstrap can build websites much faster
without spending time worrying about basic commands and functions.

What is Bootstrap used for?

Bootstrap makes responsive web design a reality. It makes it possible for a web page or
app to detect the visitor's screen size and orientation and automatically adapt the
display accordingly. The mobile-first approach assumes smartphones, tablets and task-
specific mobile apps are employees' primary tools for getting work done. Bootstrap
addresses the requirements of those technologies in design and includes UI
components, layouts, JavaScript tools and the implementation framework. The software
is available precompiled or as source code.

5 React

The Best Guide to Know What Is React

Lesson 1 of 8By Chinmayee Deshpande

Last updated on Jul 18, 2022260226

The Best Guide to Know What Is React

PreviousNext

Table of Contents

What Is React?Why React?Features of ReactComponents in ReactProps in ReactView

More
The world can't live without mobile and web applications in this day and age. Everything
is digitized, from booking cabs to ordering food to make bank transactions. Thanks to
the efficient frameworks that provide a seamless user experience. One such robust
frontend library is React. This tutorial on ‘what is React’ will help you understand the
library's fundamentals and work with a simple demo.

Post Graduate Program: Full Stack Web Development

in Collaboration with Caltech CTMEENROLL NOWPost Graduate Program: Full Stack

Web Development

What Is React?

React-Frontend_Language

React is a JavaScript-based UI development library. Facebook and an open-source

developer community run it. Although React is a library rather than a language, it is
widely used in web development. The library first appeared in May 2013 and is now one
of the most commonly used frontend libraries for web development.

React offers various extensions for entire application architectural support, such as Flux
and React Native, beyond mere UI.

Why React?

React’s popularity today has eclipsed that of all other front-end development
frameworks. Here is why:
Easy creation of dynamic applications: React makes it easier to create dynamic web
applications because it requires less coding and offers more functionality, as opposed to
JavaScript, where coding often gets complex very quickly.

Improved performance: React uses Virtual DOM, thereby creating web applications
faster. Virtual DOM compares the components’ previous states and updates only the
items in the Real DOM that were changed, instead of updating all of the components
again, as conventional web applications do.

Reusable components: Components are the building blocks of any React application,
and a single app usually consists of multiple components. These components have their
logic and controls, and they can be reused throughout the application, which in turn
dramatically reduces the application’s development time.

Unidirectional data flow: React follows a unidirectional data flow. This means that when
designing a React app, developers often nest child components within parent
components. Since the data flows in a single direction, it becomes easier to debug
errors and know where a problem occurs in an application at the moment in question.

Small learning curve: React is easy to learn, as it mostly combines basic HTML and
JavaScript concepts with some beneficial additions. Still, as is the case with other tools
and frameworks, you have to spend some time to get a proper understanding of React’s
library.

It can be used for the development of both web and mobile apps: We already know that
React is used for the development of web applications, but that’s not all it can do. There
is a framework called React Native, derived from React itself, that is hugely popular and
is used for creating beautiful mobile applications. So, in reality, React can be used for
making both web and mobile applications.

Dedicated tools for easy debugging: Facebook has released a Chrome extension that
can be used to debug React applications. This makes the process of debugging React
web applications faster and easier.
The above reasons more than justify the popularity of the React library and why it is
being adopted by a large number of organizations and businesses. Now let’s familiarize
ourselves with React’s features.

DFD:

DFD is the abbreviation for Data Flow Diagram. The flow of data of a system or a
process is represented by DFD. It also gives insight into the inputs and outputs of each
entity and the process itself. DFD does not have control flow and no loops or decision
rules are present. Specific operations depending on the type of data can be explained
by a flowchart. Data Flow Diagram can be represented in several ways. The DFD
belongs to structured-analysis modeling tools. Data Flow diagrams are very popular
because they help us to visualize the major steps and data involved in software-system
processes.

0 Level DFD

DFD Level 0 is also called a Context Diagram. It’s a basic overview of the whole
system or process being analyzed or modeled. It’s designed to be an at-a-glance view,
showing the system as a single high-level process, with its relationship to external
entities. It should be easily understood by a wide audience, including stakeholders,
business analysts, data analysts and developers.
1 Level DFD

DFD Level 1 provides a more detailed breakout of pieces of the Context Level Diagram.
You will highlight the main functions carried out by the system, as you break down the
high-level process of the Context Diagram into its subprocesses.
2 Level DFD

DFD Level 2 then goes one step deeper into parts of Level 1. It may require more text to
reach the necessary level of detail about the system’s functioning.
6.Testing
6.1 Test Plan
6.1.1 Test Plan Identifier:
BuyVeg release 1.0
6.1.2 Introduction
In order to overcome the drawbacks of existing html based editors (installations, no
centralized updations, unnecessary payment for features that are not going to be
utilized etc),developers of BuyVeg felt the need to be able to offer its clients the
opportunity to develop web pages online. This project's goal is provide a basic online
web page development (which can be enhanced in the future) ASAP.

The initial release of the site and application will be known as BuyVeg release 1.0. The
target audience will initially be for any novice user. Once the system is working
successful, BuyVeg intends to start an aggressive marketing campaign to attract new
clients for the online development of web pages through this application.
Specfically , testing will now consist of the following phases(listed chronologically):
• Unit and Intergration level – adherence to coding standars and successful
communication between units.
5.1.3 Test Items
• Test items -Image, table , radio button , check box , horizontal line , text field,
label , hyperlink

The scope of this testing activity will not include:

© BuyVeg documentation e.g.: Requirements & Design Specifications or User,

Operations &

Installation Guides

5.1.4 Features to be tested

• Accessibility
• Coding standards
• Compatibility
• Functional
• Navigation-
A large number of low priority test cases can be executed using a small amount of
resources A lower priority test is a pre-requisite of another higher priority test e.g, an
expensive and high priority usability test might necessitate many of the inexpensive low
priority navigational tests to have passed

5.1.5 Features Not to Be Tested

It is the intent that all of the individual test cases contained in each test plan will be
performed.

However, if time does not permit, some of the low priority test cases may be
dropped.
 ]5.1.6 Approach/Strategy

The philosophy of the testing is risk-based testing, i.e. each test case will be
prioritized
as, High, Medium, or Low priority and then scheduled accordingly (Highest first).
Exceptions to this general rule might include instances where.

• A large number of low priority test cases can be executed using a small amount of
resources A lower priority test is a pre-requisite of another higher priority test e.g. an
expensive and high priority usability test might necessitate many of the inexpensive
low priority navigational tests to have passed

The testing will use manual testing. The BuyVeg's source code will be frozen
while being tested. Except for critical fixes that are blocking the testing efforts,
changes will not be scheduled while a unit ofcode is being tested.

5.1.7 Item Pass/Fail Criteria

The entrance criteria's for each phase of testing must be met before the next phase
can commence. Formal approval will be granted by the internal and external project
guide
The guides will retain the decision as to whether the total and/or criticality of any or all
detected incidents/defects warrant the delay (or rework) of the BuyVeg release 1.0.

5, 1.8 Suspension Criteria and Resumption Requirements

In general, testing will only stop if the Web site Under Test (WUT) becomes
unavailable. If testing is suspended due to the Web site becoming unavailable,
testing will be resumed once access to the Web site is reestablished. Certain
individual test cases may be suspended, skipped or reduced if prerequisite tests
have previously failed e.g. usability testing may be skipped if a significant number
ofWeb page navigational tests fail.

5.1.9 Test Deliverables

The following documents will be generated as a result of these testing activities;

• Master test plan (MTP - this document)

• Deliverable documents: test plan

The guides will retain the decision as to whether the total and/or criticality of any or all detected incidents/defects warrant the
delay (or rework) of the BuyVeg release 1.0.
 5, 1.8 Suspension Criteria and Resumption Requirements
In general, testing will only stop if the Web site Under Test (WUT) becomes
unavailable. If testing is suspended due to the Web site becoming unavailable,
testing will be resumed once access to the Web site is reestablished. Certain
individual test cases may be suspended, skipped or reduced if prerequisite tests
have previously failed e.g. usability testing may be skipped if a significant number
ofWeb page navigational tests fail.

5.1.9 Test Deliverables

The following documents will be generated as a result of these testing activities;

• Master test plan (MTP - this document)

Deliverable documents: test plan
5.1.10 Test Environments

• Software Requirement-
l. Silverlight 1.1/2 plug-in installed.
2. The PC is connected to internet/ intranet.

• Hardware Requirements1. 512 GB RAM

2, 1024 X 768 monitors resolution with 24 bit color,
3, Graphics processor that is 9-capable,

5.1.11 Staffing and Training Needs

• General development & testing techniques

• BuyVeg application development lifecycle methodology

5.1.12 Schedule
The following tentative schedule will hopefillly be met:
• Test design (this document) is expected to be completed by the end of March,
• Test execution is expected to last no more than two weeks and to start immediately
after the test plans have been approved and the Web application has been hosted

5.1.13 Risks and Contingencies

The following seeks to identify some of the more likely project risks and propose
possible contingencies;

• Web site becomes unavailable — Testing will be delayed until this situation is
rectified
• A large number ofdefects/incidents makes it functionally impossible to run till of the
test cases
• Not enough time to complete all test cases. If time cannot be extended, individual
test cases will be skipped, stmting with the lowest priority.

5.1.14 Approvals
The Internal and External guide must approve this plan.
BuyVeg release 1.0 NITP 1.0

UNIT & INTEGRATION TEST PLAN

5.1.15 Test Plan Identifier

BuyVeg release 1.0 UNTP 1.0

5.1.16 Introduction

This testing phase will use a number of testing techniques. The decision as to which
technique(s) to use for any given unit of code will reside with the team leader
responsible for signing-off on the Module,

5.1.17 Features and Functions to Test

• Accessibility
UIACI - Low
The colours used on this Web page are friendly to colour blind viewers

• Compatibility
UICOI - Medium
Size of BuyVeg application resized automatically according to screen, Cross Browser
support.
• Coding standards
Each of the units of code that make up the module being tested (typically a
single fully tunctional Web page) must be coded to all of the following coding standards,
any deviations from the standard must be documented and approved

UICSI - High
The code must pass the following syntax and design requirements:

• Each unit ofcode has been inherited or copied from the most appropriate object
class or
Template.
• HTML code must be coded to the W3C HTML 4.0 standard and validated via the
W3C validation service.
• Error messages do not describe the internal workings of the program

UICS2 - Medium
Any Form used on the Web page meets the following requirements;

• If radio controls are used, a default is always selected

• The browser places the cursor on the most appropriate field/control when the Form
is first viewed
• Using the browsers Tab key allows the client to tab through the input fields on the
Form in a top to bottom, left to right order
• All data entry fields are checked for invalid data and an appropriate error message
is displayed if the data is found to be invalid
• All validations are performed (and error messages displayed) in a top-down, left-to-
right
Fashion
• Using equivalence partitioning techniques, all data entry fields will be checked to
ensure that they are able to accept valid values and that their error checking
routines can handle invalid data UlCS3 - Low
Any Pop-up used on the Web page meets the following requirements:

• The pop-up follows BuyVeg GUI standard

• The pop-up is not too large for the parent window
• The pop-up' s initial screen positioning is appropriate

• Functional
l. Cut, Copy, Paste, and Zoom.
• Menu bar options,
• Toolbar options-
Insert -table, images, buttons, hyperlinks,
Format — Applying Bold, Italics, left, right, center alignment, indent, out dent, ordered
and unordered list, subscript, superscript, strikethrough, font size, font style, font color.
Edit Table — Add rows & columns, delete row and column are the features in BuyVeg
are to be tested
• Navigation

UINAI - High
All the links on the Web page will be checked to ensure that they meet the following
specifications:
• The link should not be broken (unless the target has not yet been developed)
and goes to the most appropriate location
• The link will not alter the browser' s default link colours
• The link must have an associated ' 'Title" link tag specified
• Internal links must use lowercase characters for the address
• Security

UISEI - High
Input data received from the client must be parsed to make sure that it does not contain
"out of bounds" or ''buffer overflow" input data

UISE2 - High
Input data received from the client must be parsed to make sure that it does not contain
inappropriate meta-character sequences e.g. &&

Usability

UIUSI - Low
Mandatory data entry fields may be flagged with a visual cue e.g. highlight in red

UlUS2 - Low
Related information is grouped together on the Web page to m inimized eye movement

UltJS3 - Low
When viewed via the clients anticipated hardware/software the page fits without the
need for a horizontal scroll bar

5.1.18 Features and Functions not to Test

Notable features and functions that will not be tested include: None
WebyWeb release I .0 Test Plan Version I .0

5.2 Test Procedure

All the tests are conducted using manual testing. Testing includes
5.2.1 Black Box Testing
Black box testing takes an external perspective of the test object to derive test
cases. These tests can be functional or non-functional. Here, the valid and invalid
input is selected and the correct output is determined. The testing is carried out
for:-
• Authentication of user
• Generation of Web page using WebyWeb
5.2.2 Regression Testing
 Regression testing seeks to uncover regression bugs. Regression testing is used
not only for testing the correctness of a program, but it is also often used to track
the quality of its output. The testing is carried out for: Database
• Rich text box formatting (Bullets and numbering, Alignment)
• Code conversion Engine
• Menu and event hand lers

5.2.3 Integration Testing

Integration testing, also known as integration and testing (I& T), is a software
development process which program units are combined and tested as groups in
multiple ways, The testing is carried out for:-
• Database integration into Main Editor
• Inclusion of tested and approved HTML editor into Main Editor Integration of
Ultra Rich web elements with WebyWeb editor

Implementation
This application is completely developed using the HTML, CSS, BOOTSTRAP ,
JAVASCRIPT, REACT . Some visuals of our code are:
 Code
import "./App.css";
import React, { Component } from "react";
import Navbar from "./components/Navbar";
import News from "./components/News";
import Newsitem from "./components/Newsitem";
import { BrowserRouter, Routes, Route } from "react-router-dom";

export default class App extends Component {

render() {
return (
<>
<BrowserRouter>
<Navbar />
<Routes>
<Route
exact
path="/"
element={<News key="home" category="general" />}
/>
<Route
exact
path="/home"
element={<News key="home" category="general" />}
/>
<Route
 exact
path="/Sports"
element={<News key="sports" category="sports" />}
/>
<Route
exact
path="/Science"
element={<News key="science" category="science" />}
/>
<Route
exact
path="/business"
element={<News key="business" category="business" />}
/>
</Routes>{" "}
</BrowserRouter>{" "}
</>
);
}
}
NAVBAR
import PropTypes from "prop-types";
import React, { Component } from "react";
import { Link } from "react-router-dom";
export class Navbar extends Component {
render() {
return (
<div>
<nav className="navbar navbar-expand-lg bg-light">
<div className="container-fluid">
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div
className="collapse navbar-collapse"
id="navbarSupportedContent"
>
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
 <Link
className="nav-link active"
aria-current="page"
to="home/"
>
Home
</Link>
</li>

<li className="nav-item dropdown">

<a
className="nav-link dropdown-toggle"
href="/"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Categories
</a>
<ul
className="dropdown-menu"
aria-labelledby="navbarDropdown"
>
 <li>
<Link className="dropdown-item" to="/Science">
Science
</Link>
</li>
<li>
<Link className="dropdown-item" to="/Sports">
Sports
</Link>
</li>

<li>
<Link className="dropdown-item" to="/business">
Business
</Link>
</li>
</ul>
</li>
</ul>
<form className="d-flex" role="search">
<input
className="form-control me-2"
type="search"
placeholder="Search"
 aria-label="Search"
/>
<button className="btn btn-outline-success" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
</div>
);
}
}

export default Navbar;

NEWSITEM
import React, { Component } from "react";

export default class Newsitem extends Component {

render() {
let { title, description, imageUrl, readmoreurl, author, date } =
this.props;
return (
<div>
 <div className="card" style={{ width: "18rem" }}>
<img className="card-img-top" src={imageUrl} alt="Card image cap" />
<div className="card-body">
<h5 className="card-title">{title}</h5>
<p className="card-text">{description}</p>
<p className="card-text">
<small className="text-muted">
By {!author ? "Unkown" : author}
</small>
</p>

<a
href={readmoreurl}
target="_blank"
className="btn btn-sm btn-dark"
>
Read More...
</a>
</div>
</div>
</div>
);
}
}
News.js
import React, { Component } from "react";
import Newsitem from "./Newsitem";
import Spinner from "./Spinner";
import PropTypes from "prop-types";
import InfiniteScroll from "react-infinite-scroll-component";

export default class extends Component {

constructor(props) {
super(props);
this.state = {
article: [],
loading: false,
page: 1,
};
document.title = `${this.props.category}`;
}

async updateNews() {
const url = `https://newsapi.org/v2/top-
headlines?country=us&category=${this.props.category}&apiKey=a67ef4bd380040
11be7eefa09206d6ec&pageSize=5&page=${this.state.page}`;
this.setState({ loading: false })
let data = await fetch(url);
let parsedData = await data.json();
 console.log(parsedData);
this.setState({
article: parsedData.articles,
totalResults: parsedData.totalResults,
loading: false,
page: this.state.page + 1,
});
}

async componentDidMount() {
this.updateNews();
}

fetchMoreData = async () => {

const url = `https://newsapi.org/v2/top-

headlines?country=us&category=${this.props.category}&apiKey=a67ef4bd380040
11be7eefa09206d6ec&pageSize=5&page=${this.state.page}`;
let data = await fetch(url);
let parsedData = await data.json();
console.log(parsedData);
this.setState({

totalResults: parsedData.totalResults,
article: this.state.article.concat(parsedData.articles),
 loading: false,
});

};
render() {
return (
<>
<h1 style={{ textAlign: "center" }}>
News Mate - Top headlines on {`${this.props.category}`}
</h1>
{/* {this.state.loading && <Spinner />} */}

<InfiniteScroll
dataLength={this.state.article.length}
next={this.fetchMoreData}
style={{ display: "flex", flexDirection: "column-reverse" }} //To put
endMessage and loader to the top.
hasMore={this.state.article.length !== this.totalResults}
loader={<Spinner />}
>
<div className="row">
{!this.state.loading &&
this.state.article.map((e) => {
return (
 <div className="col-md-4 kmy-4 " key={e.url}>
<Newsitem
title={e.title}
description={e.description}
imageUrl={e.urlToImage}
readmoreurl={e.url}
author={e.author}
publishedAt={e.publishedAt}
/>
</div>
);
})}
</div>
</InfiniteScroll>
</>
);
}
}
Spinner.js
import React, { Component } from "react";
import img from "./loading.gif";
export default class Spinner extends Component {
render() {
return (
 <div>
<div className="text-center">
<img src={img} alt="" />
</div>
</div>
);
}
}

Output:
As you scroll down the news will autometically fetch and
called and it will be shown on browser.

CONCLUSION

CONCLUSION

We have developed this website in HTML , CSS and JavaScript, boorstrap , React
On this website we learnt a lot about web technologies, this project helped me to leran
about API and fetching data from it and displaying it to broweser. And we experienced
of working together in a team. In the project we faced a lots of problems and knew how
to solve and got help from various sources , these were very useful for us. After project
completion we are feeling very good that we have provided solutions for people who
wants to read news in short or want news at one place this site will delivering the
solution of the desired problem

FUTURE ENHANCEMENTS
●Login/signup

● Testing Engineer.

● User review

● Analytics Data.

Bibilography
References
Visual Studio Code
https://code.visualstudio.com/
Node.js
https://nodejs.org/en/

MDN DOCS
https://nodejs.org/en/

NEWS API
https://newsapi.org/docs

BOOTSTRAP
https://getbootstrap.com/docs/5.0/getting-started/introduction/

React

https://reactjs.org/docs/getting-started.html

W3 SCHOOLS

https://www.w3schools.com/