Chapter: 1

BACKGROUND OF THE PROJECT

1
1.1 INTRODUCTION
News Portal Application is a free web and android application on which it helps users to read
news. This news portal application allows customers to read up to date news related to many fields
like Entertainment, National, International, Business, Bollywood, Hollywood, Politics, Sports,
Education etc. without any payment or login. He/ She can also contact us to give suggestions and
can also give us feedback related to our site. New News can be added or post only by the admin
and only admin have the Authorized to update or delete any News. Admin have right to give
authority to other for News update, add or delete.
Using this application registered users can also post their own news to this system by the
authentication of the admin.
This system has mainly two kinds of users admin and application user. Application user side
developed by using android. When application starts, it will automatically synchronize with the
server and display news articles from the server. Users can save newss for offline reading. A very
user friendly searching area will be in the application.

News Portal Application is a complete software for publishers who wants to drive an online
newspaper. All content stored in database and divided into categories. Categories can be easily
modified to browse and contains a self-organized interface to promote top-stories. Software can
be managed with a role-based system similar like a real newspaper. Focus of role-based system to
drive applications in secure mode. Content schedule feature helps us to publish articles and news
at earlier time.

2
1.2 PROJECT DEFINITION AND PURPOSE
In this project, we have built a News Portal Application which is both web and android content
management system that can be used to dynamically manage the content of a simple dynamic
configurable HTML5 website. A technical person having knowledge of HTML5, Angular.js and
Apache Cordova is required to update a portion of the section and Firebase as database
management. The primary objective of this project is to demonstrate how Simple News portal
application engine could be integrated with the Events section pages so that the process of
updating the content becomes faster and easier for the users. The main purpose of this project is to
have a user-friendly content administration interface that includes most common functions
appropriate for small and simple websites and mobile application, so that a novice user can read
and study the website content through the web and android devices from anywhere they like.

3
1.3 OBJECTIVE
The main objectives of project are:
To develop a web and android application for Online News that can aware the people. To
provide all type of instant and important news related to Business, World, World Sports,
National, Education etc.
To those people who dont have time to read the newspaper and always linked with internet
can get more information.
Publish news about local region, town, city and state, national and international.
To allow End user to upload news from anywhere at any time through web, mobile, tablets,
etc. if they are registered and have login id & password.
To enhance the quality of news to the users.
To allow users to make comments about the news topics.
To professionally publish online news publication, corporate press releases, or manage
other content without technical expertise.

4
 Chapter: 2

LITERATURE REVIEW

5
2.1 HTML5
HTML5 is a markup language used for structuring and presenting content on the World Wide
Web. It is the fifth and current version of the HTML standard.

It was published in October 2014 by the World Wide Web Consortium (W3C) to improve the
language with support for the latest multimedia, while keeping it both easily readable by humans
and consistently understood by computers and devices such as web browsers, parsers, etc. HTML5
is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.

HTML5 includes detailed processing models to encourage more interoperable implementations; it

extends, improves and rationalizes the markup available for documents, and introduces markup
and application programming interfaces (APIs) for complex web applications. For the same
reasons, HTML5 is also a candidate for cross-platform mobile applications, because it includes
features designed with low-powered devices in mind.

Many new syntactic features are included. To natively include and handle multimedia and
graphical content, the new <video>, <audio>, and <canvas> elements were added and support for
scalable vector graphics (SVG) content and MathML for mathematical formulas. To enrich the
semantic content of documents, new pages structure elements such as <main>, <section>,
<article>, <header>, <footer>, <aside>, and <figure> are added. New attributes are introduced,
some elements have been removed, and others such as <a>, <cite>, and <menu> have been
changed, redefined or standardized.

2.1.1 Features HTML5

HTML5 introduces a number of new elements and attributes that helps in building a modern
website. Following are great features introduced in HTML5.

New Semantic Elements These are like <header>, <footer>, and <section>.
Forms 2.0 Improvements to HTML web forms where new attributes have been
introduced for <input> tag.
Persistent Local Storage To achieve without resorting to third-party plugins.
Web SocketA next-generation bidirectional communication technology for web
applications.

6
 Server-Sent Events HTML5 introduces events which flow from web server to the web
browsers and they are called Server-Sent Events (SSE).
CanvasThis supports a two-dimensional drawing surface that you can program with
JavaScript.
Audio & VideoYou can embed audio or video on your web pages without resorting to
third-party plugins.
Geolocation Now visitors can choose to share their physical location with your web
application.
Microdata This lets you create your own vocabularies beyond HTML5 and extend your
web pages with custom semantics.
Drag and dropDrag and drop the items from one location to another location on a the
same webpage.

2.2 Angular.js
AngularJS (commonly referred to as "Angular.js" or "AngularJS 1.X") is a JavaScript-based open-
source front-end web application framework mainly maintained by Google and by a community
of individuals and corporations to address many of the challenges encountered in
developing single-page applications.

What is Angular.js?

AngularJS is a structural framework for dynamic web apps. It lets us to use HTML as our template
language and lets us extend HTML's syntax to express our application's components clearly and
succinctly. AngularJS's data binding and dependency injection eliminate much of the code we
would otherwise have to write. And it all happens within the browser, making it an ideal partner
with any server technology.

2.2.1 Features of AngularJS

AngularJS is a powerful JavaScript based development framework to create RICH Internet

Application (RIA).
AngularJS provides developers options to write client side application (using JavaScript)
in a clean MVC (Model View Controller) way.

7
 Application written in AngularJS is cross-browser compliant. AngularJS automatically
handles JavaScript code suitable for each browser.
AngularJS is open source, completely free, and used by thousands of developers around
the world. It is licensed under the Apache License version 2.0.

Overall, AngularJS is a framework to build large scale and high performance web application
while keeping them as easy-to-maintain.

2.2.2 The AngularJS Components

The AngularJS framework can be divided into following three major parts:

ng-app This directive defines and links an AngularJS application to HTML.

ng-model This directive binds the values of AngularJS application data to HTML input
controls.
ng-bind This directive binds the AngularJS Application data to HTML tags.

2.3 Firebase.js
Firebase is a mobile and web development platform. Firebase is made up of complementary
features that developers can mix-and-match to fit their needs. The team is based in San
Francisco and Mountain View, California. The company was founded in 2011 by Andrew Lee and
James Templin. Firebase's initial product was a real-time database, which provides an API that
allows developers to store and sync data across multiple clients. Over time, it has expanded its
product line to become a full suite for app development. The company was acquired by Google in
October 2014 and a significant number of new features were featured in May 2016 at Google I/O.

Firebase is backend platform for building Web, Android and IOS applications. It offers real time
database, different APIs, multiple authentication types and hosting platform.

8
2.4 IDE Web-storm

Web-Storm is a powerful and intelligent IDE that gives you the best coding assistance for
JavaScript, HTML and CSS and a wide range of modern web technologies. Web-Storm is perfectly
equipped for complex client-side development and server-side development with Node.js.

It provides smart code insight, auto-completion, refactoring features, on-the-fly error prevention,
and much more. Together with support for the popular frameworks such as AngularJS and Meteor
and integrated instruments for testing, debugging and code analysis and integration with various
VCS, Web-Storm enhances your productivity and takes your development experience to a whole
new level.

2.5 APACHE SERVER

Often referred to as simply Apache, a public-domain open source Web server developed by a
loosely-knit group of programmers. The first version of Apache, based on the NCSA HTTP Web
server, was developed in 1995.
Core development of the Apache Web server is performed by a group of about 20 volunteer
programmers, called the Apache Group. However, because the source code is freely available,
anyone can adapt the server for specific needs, and there is a large public library of Apache add-
ons. In many respects, development of Apache is similar to development of the Linux operating
system.
The original version of Apache was written for UNIX, but there are now versions that run
under OS/2, Windows and other platforms.
Apache Web Server is an open source Web server creation, deployment and management software.
Initially developed by a group of software programmers, it is now maintained by the Apache
Software Foundation.

Apache Web Server is designed to create Web servers that have the ability to host one or more
HTTP-based websites. Notable features include the ability to support multiple programming
languages, server side scripting, an authentication mechanism and database support. Apache Web
Server can be enhanced by manipulating the code base or adding multiple extensions/add-ons.

9
It is also widely used by Web hosting companies for the purpose of providing shared/virtual
hosting, as by default, Apache Web Server supports and distinguishes between different hosts that
reside on the same machine.

2.6 Android

Android is an open source and Linux-based Operating System for mobile devices such as
smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by
Google, and other companies.

Android offers a unified approach to application development for mobile devices which means
developers need only develop for Android, and their applications should be able to run on
different devices powered by Android.

The first beta version of the Android Software Development Kit (SDK) was released by Google
in 2007 where as the first commercial version, Android 1.0, was released in September 2008.

On June 27, 2012, at the Google I/O conference, Google announced the next Android version, 4.1
Jelly Bean. Jelly Bean is an incremental update, with the primary aim of improving the user
interface, both in terms of functionality and performance.

The source code for Android is available under free and open source software licenses. Google
publishes most of the code under the Apache License version 2.0 and the rest, Linux kernel
changes, under the GNU General Public License version 2.

10
2.6.1 Why Android?
It is open source
Increased Marketing
Inter App Integration
Reduced Cost of development
Higher success ratio
Rich development environment

2.6.2 Features of Android

Android is a powerful Operating System supporting a large number of applications in Smart
Phones. These applications make life more comfortable and advanced for the users. Android are
mainly based on ARM architecture platform. Android comes with an Android market which is an
online software store. It was developed by Google. It allows Android users to select, and download
applications developed by third party developers and use them. There are around 2.0 lack+ games,
application and widgets available on the market for users. The main features of android are listed
below:
Easy to operate- Most of the users prefer the devices that are easy to operate. Android is
very easy to operate due to its simplicity and also the operating system is less prone to
crashing which makes it very convenient for the users.
Alternate Keyboards- Android supports multiple keyboards and makes them easy to
install; the Swift Key, Skype, and 8pen apps all offer ways to quickly change up your
keyboard style.
Infrared Transmission-The Android operating system supports a built-in infrared
transmitter, allowing you to use your phone or tablet as a remote control.
No-Touch Control- Using Android apps such as Wave Control, users can control their
phones touch- free, using only gestures.
Automation-The Tasker app lets you not only control app permissions but also automate
them. Do you only want your location services to be active during the day? Want to create
a customized way to start your musicfor example, with a voice command and at a
certain volume? Tasker can help.

11
 Cost effective- Phones that run the android OS come with Google play, which is a pre-
installed software store application that allows user to find the various applications at one
point.
Storage and Battery Swap- Android phones also have unique hardware capabilities. In
addition, Android phones come with SD card slots for expandable storage.
Custom Home Screens- While its possible to hack certain phones to customize the home
screen, Android comes with this capability from the get-go.
Superior security- Android OS is proven to have the superior security as compared to the
other mobile devices

2.7 Hybrid Application

A hybrid app is a mobile app that contains an isolated browser instance, often called a Web View,
to run a web application inside of a native app. It uses a native app wrapper that can communicate
with the native device platform and the Web View. This means web applications can run on a
mobile device and have access to the device, such as the camera or GPS features.
Tools that facilitate the communication between the Web View and the native platform make
hybrid apps possible. These tools arent part of the official iOS or Android platforms, but are third-
party tools such as Apache Cordova, which is used in this proposed project. When a hybrid app
compiles, our web application transforms into a native app.

Figure: 1 Hybrid app architecture

12
2.8 Apache Cordova
Apache Cordova is an open-source mobile development framework. It allows you to use standard
web technologies such as HTML5, CSS3, and JavaScript for cross-platform development,
avoiding each mobile platform native development language. Applications execute within
wrappers targeted to each platform, and rely on standards-compliant API bindings to access each
device's sensors, data, and network status.

2.7.1 Cordova Features

Command Line Interface (Cordova CLI)
This tool can be used for starting projects, building processes for different platforms, installing
plugins and lot of other useful things that make the development process easier. You will learn
how to use the Command Line Interface in the subsequent chapters.
Cordova Core Components
Cordova offers a set of core components that every mobile application needs. These components
will be used for creating base of the app so we can spend more time to implement our own logic.
Cordova Plugins
Cordova offers API that will be used for implementing native mobile functions to our JavaScript
app.
License
Cordova is licensed under the Apache License, Version 2.0. Apache and the Apache feather logos
are trademarks of The Apache Software Foundation.

13
 CHAPTER: 3
ANALYSIS OF THE PROJECT

14
3.1 SYSTEM DEVELOPMENT METHODOLOGY
A system development methodology in software engineering is a framework that is used to
structure, plan, and control the process of developing an information system. Common
methodologies include waterfall, prototyping, iterative and incremental development, spiral
development, rapid application development, and extreme programming. A methodology can
also include aspects of the development environment (i.e. IDEs), model-based development,
computer aided software development, and the utilization of particular frameworks.

For this project we have used spiral model. The spiral model is a risk-driven process model
generator for software projects. Based on the unique risk patterns of a given project, the spiral
model guides a team to adopt elements of one or more process models, such as incremental,
waterfall, or evolutionary prototyping. The spiral model is similar to the incremental model, with
more emphasis placed on risk analysis.

Figure: 2 Spiral model

15
1. Determine Objective: Requirements are gathered during this phase.

2. Identify and Resolve risk: In this process, a process is undertaken to identify risk and alternate
solutions. A prototype is produced at the end of the risk analysis phase. If any risk is found
during the risk analysis then alternate solutions are suggested and implemented.

3. Development and Test: In this phase software is developed, along with testing at the end of the
phase. Hence in this phase the development and testing is done.

4. Plan the next iteration: This phase allows the customer to evaluate the output of the project to
date before the project continues to the next spiral.

3.1.1 Advantages of Spiral model:

High amount of risk analysis hence, avoidance of Risk is enhanced.

Good for large and mission-critical projects.
Strong approval and documentation control.
Additional Functionality can be added at a later date.
Software is produced early in the software life cycle.

3.1.2 Disadvantages of Spiral model:

Can be a costly model to use.

Risk analysis requires highly specific expertise.
Projects success is highly dependent on the risk analysis phase.
Doesnt work well for smaller projects.

16
3.2 SYSTEM ANALYSIS

3. 2.1 Understanding the Problem

This step is the initiation of the project where the concept was developed along with the
identification of the problem. The problem is analyzed thoroughly before proceeding so that no
design flaws are later encountered.

3.2.2 Feasibility Analysis

Feasibility study is carried out on the following criteria. It includes four parts which are given
below:

a) Technical Feasibility

b) Operational Feasibility

c) Economic Feasibility

d) Schedule Feasibility

a) Technical Feasibility

Due to the availability of different tools and knowledge about the tools make the Project
technically feasible. Technical knowledge about different tools helps to develop the project
quickly. There are different programming tools and editor available for creating the web
application and android application and techniques for web mining. Technical guidance is also
necessary for completion of project.

b) Operational Feasibility

The operational feasibility of this project can be defined as that the project is feasible from the
point of operation because for the purpose of its implementation, users having general
knowledge of the computer or internet can handle. Since the implementation is very easy. Thus it
is operationally feasible.

c) Economic Feasibility

17
The proposed system does not cost high because it is just a service with simple software added to
the existing system.

d) Schedule Feasibility

It seems initially that the project needs longer study period but later on the project development
goes rapidly as per the schedule. Thus the assigned period of time in developing is sufficient to
produce the desired result.

18
3.3 Specification

3.3.1 Hardware

Hardware Recommended

Primary Memory 4GB

Hardware Platform Intel based/Mac OS

Processor 933MHz

Secondary Memory 1 to 2 GB

Android Mobile Above 4.1 - 7.1.1

Table No: 1

3.3.2 Software

Software Recommended

Apache webserver Apache webserver version( 5 plus)

Angular.js Angular.js version 1.4.8

Firebase.js -

IDE Web storm -

Apache Cordova Apache Cordova 6.3 version/plus

Table No: 2

19
 CHAPTER: 4
SYSTEM DESIGN

20
4.1 SYSTEM DESIGN
Systems design is simply the design of systems. It implies a systematic and rigorous approach to
designan approach demanded by the scale and complexity of many systems problems.
Systems design is the process of defining the architecture, components, modules, interfaces, and
data for a system to satisfy specified requirements. Systems design could be seen as the
application of systems theory to product development.

4.1.1 Data Flow Diagram (DFD)

The Data Flow Diagram (DFD) is a graphical representation of the flow of data through an
information system. It enables you to represent the processes in your information system from
the viewpoint of data. The DFD lets you visualize how the system operates, what the system
accomplishes and how it will be implemented, when it is refined with further specification.

Logical data flow diagrams - are implementation-independent and describe the system,
rather than how activities are accomplished.
Physical data flow diagrams - are implementation-dependent and describe the actual
entities (devices, department, people, etc.) involved in the current system.

Figure: 3 0-Level DFD

21
 Admin
Admin
News Portal Service &

Login Application Information

User
User

Figure: 4 Context Level DFD

4.1.2 Data flow diagram for News Portal Application for the User

Login
User/
Database Process Result
Visitor

Figure: 5 Data flow diagram for News Portal Application for the User

4.1.3 Data flow diagram for News Portal Application for the Admin

Data
Input News
Admin Stored
Portal Result
Data
Application In

Database

Figure: 6 Data flow diagram for News Portal Application for the Admin

22
4.2 Use Case Diagram
A use case is a list of steps, typically defining interactions between a role (admin, user) and a
system, to achieve a goal. The admin/user can be a human or an external system.

News Portal Application

Login &
Create/Edit/View
Account

Login &
Create/Edit/View
Account
Post Blogs

Create
Category View content
& Gallery
Admin
User

Add post &

Remove
Post Comments &
Give
Feedback

Comments & Give

Feedback/Suggesti
ons
Logout

Logout

Figure 4: Use Case Diagram

23
 CHAPTER: 7
LIMITATIONS AND FUTURE
ENHANCEMENT

24
7.1 PROJECT LIMITATIONS
An individual cannot create/build a new template using Simple CMS. There is only one editable
region on a page. One can edit a simple website that has a homepage with all the other pages as
the tabbed menu/navigation bar. There can be only one navigation bar whose pages can be
modified. The application that runs only in android not in IOs.

7.2 PROJECT ENCHANCEMENT

Here we have restricted different functions for user/customers. An individual are not allowed to
modify/create/build the new template using CMS, and also they cannot edit the page.

Thus to make a more user interface system we are planning to upgrade following features in this
system. Some are mentioned below:

Can create/build a new template using Simple CMS

Can edit on a content page
Authorized user can go to the administration interface and modify their own profile and
content.
Can be used by the IOs user also in near future

25
CHAPTER: 8
CONCLUSION

26
8.1 CONCLUSION
Depending on the requirements and the budget, News Portal Application system can either be built
from scratch or one can use an existing open source or commercial product. We have successfully
implemented the Simple content management system in both web and android devices. The
primary features of News Portal Application are:

Easily editable content,

User authentication, and
Workflow management.

The administration interface is relatively simple. It features one navigation bar that has different
tabs for respective functions, such as Home Page, and Categories report. It has a workflow which
will only allow the publishing of the new content when it is approved by the administrator. Admin
are responsible to add, delete or update content within the website andin any android devices. The
admin can easily integrate a new menus, which is basically the HTML5, Angular.js and Apache
Cordova files, into this application. Once it is integrated, the admin can easily format and edit the
page content using the rich text editor without having to deal with the HTML5or the Angular.js
code. Thus this project will be useful to the users with less technical expertise, allowing them to
easily view and get the idea of the content of the page.

Now we can make a system which can enhance the features of a news portal which can be viewed
by any person having a little knowledge about the computer and keep themselves updated
regarding the news. Here we have created back end which can be accessed only by the authorized
person and will have the right to manipulate the news and other tasks regarding the web site and
android application.

27
28
REFERENCES

WEBRESOURCES:

1. Ionicframework

http://ionicframework.com/docs/v1/concepts/structure.html

Accessed on: 28, june, 2017

2. w3schools

https://www.w3schools.com/angular/default.asp

Accessed on: 28, June, 2017

3. Angular.js

https://docs.angularjs.org/guide/concepts

Accessed on: 30, June, 2017

4. Firebase Console

https://console.firebase.google.com/u/0/project/news-portal-7ab50/database/data

Accessed on: 01, Aug, 2017

5. Bitbucket

https://bitbucket.org/clientele/news_cms

Accessed on: 03, Aug, 2017

6. Cardova Apache

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-device/index.html

Accessed on: 04, Aug, 2017

29
AngularJS

https://www.tutorialspoint.com/angularjs/angularjs_overview.html

Accessed on: 10, Aug, 2017

HTML5

https://www.tutorialspoint.com/html5/html5_syntax.html

Accessed on: 13, Aug 2107

Slide-share

https://www.slideshare.net/armanreza161/news-portal-75286597?qid=71d6da29-0c5e-4bce-
a632-0bb008f9c942&v=&b=&from_search=4

Accessed on: 17, Sep, 2017

Apache Cordova

https://cordova.apache.org/docs/en/latest/guide/overview/

Accessed on: 19, Sep, 2107

Webserver

https://www.tutorialspoint.com/internet_technologies/web_servers.html

Accessed on: 1, Oct, 2107

Android

https://www.tutorialspoint.com/android/android_overview.html

Accessed on: 12, Oct, 2017

Apache Cordova

https://en.wikipedia.org/wiki/Apache_Cordova

Accessed on: 12, Oct, 2017

30
Android

https://developer.android.com/guide/index.html

Accessed on: 13, Nov, 2017

31