Hybrid Application Development documentation report (MCA Project)

1
CHAPTER 1
INTRODUCTION
1.1 OVERVIEW OF THE PROJECT
The project “Hybrid Application Development” is a user friendly Web Application
which is used by the Students, Developer, Programmer and Bloggers. This applications is
specially designed for those who are on the first stage of learning web technologies about
the basic languages such as HTML, CSS, JavaScript, jQuery, and AngularJs etc.
Web Application Development to provide Students in an easy and quick manner to
learn and run the program (Try it Yourself) in a single window without having the specific
environment for each programming languages. This application is a Graphic User Interface
(GUI) so it’s very easy to understand the tutorials. So, Students are not confused in the
such things like an web designing languages. We have also include the video tutorials, this
is an one advantage of beginners.
Hybrid application (hybrid apps) is one that combines element of both native and web
Applications. Native applications are developed for a specific platform and installed on a
Computing device. Web applications are generalized for multiple platforms and not
installed locally but made available over the internet through browser.
The main goal of this Web Application Development project is beginners are easily
understand the complicated languages. Some of website tutorials may have very
complicated content will be used, when the student see the tutorials he think it very
complicated we are not able to learn the such languages. It’s an major problem of all other
students even me, so we are develop the original content with easy manner to understand
the languages.
One of the best reason to develop this project, there are many students are eagerly
looking for web technologies languages. But there is no neat content on website yet. So we
are plan to get the new hybrid application for beginners.

2
1.2 EXISTING SYSTEM
There are many existing system will be there in hybrid application development.
But most application will be developed by native application, so its an one of the biggest
problem in existing system.
Many other contents will be used in one website like an Java, PHP, Python, C# and
web technologies. All other languages used in one website so visitors are don’t focus on
one languages. He is very hesitate and going for another website, its also same then he pay
some amount and learn for centers and hate education websites. It’s also one of the
disadvantage on existing system
Like W3schools website are ok for beginners. But we are beat the w3schools
project. There is no video tutorial for w3school website but we are specially add the video
to learn the theory level complicated students.
Good education oriented content also will be there in internet, and it’s made
available on single window option like tutorialspoint. But in this type of website visible on
advertisement. It’s also divert the visitors mind.
1.3 PROPOSED SYSTEM
We are develop the only web technologies languages there is no other content so
web technology interested students are willing to commit our website. Most of website add
many other contents and visible the advertisement but we are never apply the ads, so
students are concentrate on only learn the languages.
Hybrid mobile application are cross-platform apps which can be used between
different app stores without developing the app in two different versions for iOS and
Android. The hybrid application development used in compatible technologies are HTMl5,
CSS, JavaScript, etc.
The hybrid app has much less requirements in comparison with the native app
because only one app is developed for all platforms. The hybrid apps are developed in a
single language and have a single code base thus that makes updating more feasible and
faster in comparison to a native app.

3
1.4 LITERATURE SURVEY
In recent times, Every student need to learn a something like web technology
languages for every beginners and the students and bloggers can work that the new
technologies in need to teach the self made tutorials about every program how the program
worked and how it gets output so in practice of the students they need a Try it Yourself
pattern like help to run the program. By the way of own learning for the students they can
also have this Try it Yourself editor to make them they are in need to learn the program
how it’s getting worked what kind of output we get when we get it. What kind of errors we
get when we typed any wrong. So that I took the survey for the Virtual Labs JavaScript is
a project initiated by the Google Development.
This tool is base on latest technologies like HTML5, CSS3, JavaScript. Does not
required any knowledge of dense programming languse. Instaed of native application
development program work as a framework for easily build mobile apps without the extra
process of learning and languages. This is the biggest advantage of PhoneGap
development tool that support for all major platforms like iOS, Android, Windows,
Blackberry, Symbian etc. such diverse compatibility allows easy to create apps with a
single code runs on different mobile platforms.
PhoneGap app development tool support for various application programming
interfaces like Accelerometer, Geo Location, Media, Network, Notification, Camera,
Storage, etc. With these supporting API’s developers are still able to tap in many of
device build in features.
The PhoneGap development tool provides open source capability to the
developers to create apps only one time and if you want to create more than one
application will charge you monthly basis. The fee may not be a major issue for seasoned
app developer however, for those looking for a free option to learn the developers make
create the criteria.

4
CHAPTER 2
SYSTEM ANALYSIS
2.1 HARDWARE
Processor : Intel Core i3
Ram : 4 GB
System-type : 64-bit Operating System
Hard Disk : 1 TB
2.2 SOFTWARE
Operating System : Windows 10
Frontend : Adobe PhoneGap
Backend : Apache Cordova
2.3 SOFTWARE DESCRIPTIONS
 Adobe PhoneGap
 Apache Cordova
Introduction to PhoneGap
PhoneGap is a software development framework by Adobe System, which is used
to develop the mobile application. To develop apps using PhoneGap, the developer does
not require to have knowledge of mobile programming language but only web
development languages like HTML, CSS and Jscript. PhoneGap produces apps for all
popular mobile OS platforms such as iOS, Android, BlackBerry, and Windows Mobile
OS etc. In this tutorial we will focus on developing App for Android platform.

5
The Pros of Hybrid mobile apps
The cost of developing a hybrid app is lower than a native app. This is one of the
biggest pros of hybrid apps. This means you don’t have to create two separate apps for
Android and iOS, instead of single app is developed for all platforms.
The hybrid app has much less requirement in comparison with the native app because
only one app is developed for all platforms.
The hybrid apps are developed in a single language and have a single code base thus
that makes more feasible and faster in comparison in native app.
The Cons of Hybrid apps
The user experience of hybrid apps can never be like native apps and first user
experience is very important for apps because a bad experience can drop the potential user
and perhaps results in bad reviews.
Each specific operating system has some specific features that are only available in
native apps. Hybrid apps are lot slowers and less polished than the native apps, so running
a high-performance app will be quite frustrating for the end user.
Hybrid apps can have hidden bugs which can lead to errors in the future which will
be difficult to retrospectively remove.
Top 5 Hybrid Mobile App Framework
Ionic Framework – Ionic is one of the best hybrid app frameworks. The ionic framework
has made development a lot easier. The apps developed by Ionic framework work like a
genuine native application.
Sencha Touch Framework – Sencha Touch is the most popular hybrid application
frameworks. This framework has the complete package; framework, UI and MVC all in
one. It’s the fastest mobile app framework.

6
Titanium Appcelerator – It provides a different environment to create impressive native
application across different mobile devices. It also contains a rich group of API’s.
Apache Cordova (PhoneGap) – A developer who is familiar with HTML, CSS,
JavaScript then Cordova will find this the best framework to work with. Cordova allows
reuse of existing web applications in mobile devices. It has various API’s and plug-in’s
which help to interface with native app functionalities. The PhoneGap Application
Development has been a very popular and effective framework in recent years.
Xamarin (Premium) – Xamarin is the only IDE (Integrated development environment)
that allows the development of native Android, iOS, and Windows apps in Microsoft
Visual Studio. It integrates with mostly all mobile features on each sustained device. It also
supports testing of your developed app.
3.3.2 Adobe PhoneGap platform usage:
Building applications for each platform iPhone, Windows, Android, and more
requires different frameworks and languages. PhoneGap solves this by using standards
based web technologies to bridge web applications and mobile devices. Since PhoneGap
apps are standards compliant, they are future proofed to work with browsers.
PhoneGap has been downloaded millions of times and is being used by hundreds
thousands of developers. Thousands of apps built using PhoneGp are available in mobile
app stores and directories.
The PhoneGap code was contributed to the Apache Software Foundation (ASF)
under the Apache Cordova and graduated to top level project status in Oct 2012. Through
the ASF, future PhoneGap development ensure open stewardship of the project. It will
always remain free and open source under the Apache License, version 2.0.

7
PhoneGap Beliefs, Goals and Philosophy:
Our goals to are wrought from our beliefs, and development philosophy.
Understanding a free software project, like PhoneGap, requires more than knowledge of
the implementation details. It requires understanding the individuals behind the code.
Knowing the people and what motivates them inform you more about whether the
technology is right for you, your goals, and the people you work with. The world is diverse
and very often this comes across in our code, and the tools we use it.
Background:
PhoneGap was born at Nitobi Software in the summer of 2008. Nitobi was very
much a web consultancy with deep roots in the JavaScript scene, and web dev at large.
Being a consultancy we had a few beliefs that have grown into the PhoneGap project team
members. These views are mine own and shared by many PhoneGap developers and
Apache Cordova committers.
Beliefs:
We have two core tenants of belief:
1. The web solved cross platform
2. All technology deprecates with time.
We believe the web has been the most convincing solution to reaching many devices
of differing capabilities. Truly, C is the only technology that deserves the title but even
then, all readers her know, there be dragons there. HTML, CSS, and JavaScript, for all the
respective warts and quirks, have reached critical mass. This is in no small part due to the
incredibly low barrier forauthoring web technologies. Anyone, at any time, can publish
anything from anywhere. That is the stuff of revolutions, and our evolution as a species.
Goals:

8
Understanding our beliefs makes it easier to understand why we have composed a
development team that is proficient in 8 languages, as many operating systems, and works
daily with enough phones to fill a refrigerator. We would put in the fridge but that’s where
we keep the beer so we built a giant wall. The device wall isn’t something to keep phones
in the proprietary platforms out. Beliefs in hand, let us look at the goals with Phonegap.
We have two high level goals with PhoneGap:
1 .The web as a first class development platform
2. The ultimate purpose of PhoneGap is to cease to exist
The web is decidedly not a first class development platform: opaque introspection,
blunt tools, poor API surface area, and a rather limited set of GUI elements. The web has
host of other problems, or perhaps features, such as the sandbox and many missing API’s
which need addressing which provides fantastic opportunity. In short, we feel the web as a
platform is at a disadvantage, and we are working to those gaps with PhoneGap.
Philosophy:
Many of us are UNIX geeks. We believe in simple, wickedly sharp, built tools.
PhoneGap is a solution much the same. We are not trying to be everything to everyone.
We do believe the web has solved a great many use. Cases in software, and as it improves
will continue to do so.
We know the web is not platform, it can be and we are actively working to improve
it. We recognize thst the limitations of the web platform are harming the viability for a
great many use cases and giving an edge to proprietary solutions with better tools. That is
not the future aligned with our beliefs, nor our goals.
3.3.3 Apache Cordova

9
Apache Cordova is an open source mobile development framework. It allows
you to use standard web technologies – HTML5, CSS3, and JavaScript for cross-platform
development applications execute within wrappers targeted to each platform, and rely on
standards compliant API bindings to access each device’s capabilities such as sensors, data,
network status, etc.
Use Apache Cordova if you are:
1. A mobile developer and want to extend an application across more than one
platform, without having to re-implement with each platform’s language and tool
set.
2. A web developer and wants to deploy a web app that’s packaged for distribution
in various app store portals.
3. A mobile developer interested in mixing native application components with a
webview (special browser window) that can access device level API’s or if you
want to develop a plugin interface between native and webview components.
Development paths:
Cordova provides you two basic workflow to create a mobile app. While you can
often use either workflow to accomplish the same task, they each offer advantages:
Cross-platform (CLI) workflow: Use this workflow if you want your app to run on as
many different mobile operating systems as possible, with little need for platform specific
development. This workflow centers around the cordova CLI. The CLI is a high level tool
that allows you to build projects for many platforms at once, abstracting away much of the
functionality of lower level shell scripts. The CLI copies a common set of web assets into
subdirectories for each mobile platform, makes any necessary configuration changes for
each, runs build scripts to generate application binaries. The CLI also provides a common
interface to apply plugins to your app.
Platform-centered workflow: Use this workflow if you want to focus on building an app
for a single platform and need to be able to modify it at a lower level. You need to use this
approach, for example, if you want your app to mix custom native components with web
based cordova components. As a rule of thumb, use this workflow if you need to modify
the project within the SDK. This workflow relies on a set of lower level shell scripts that

10
are tailored for each supported platform, and a separate utility that allows you to apply
plugins. While you can use this workflow to build cross-platform apps, it’s generally more
difficult because the lack of higher level tool means separate build cycles and plugin
modifications for each platform.
Installing Apache Cordova:
The installation of Cordova differ depending on the workflow above you choose:
1. Cross-platform workflow
2. Platform-centered workflow

11
CHAPTER 3
3.1 Architecture Diagram
Fig 4.1 Architecture Diagram for Hybrid application
4.2 Data Flow Diagram
Data Flow diagram contains many Data store. It contains data that can be used for
many processes. The data flow from one process to another based on the purpose and
Web
technology
Blogging and
SEO
Homepage
Template
and
Projects
HTML,
CSS,JS
PHP,jQu
ery
Java and
.Net

12
priority. Whenever a person tries to learn, all of video tutorial is added for specially
beginners.
Fig 4.2 Data Flow Diagram for Home Page
Login/uname to
to
Students Homepage Web Technologies
Blogging and SEO

13
CHAPTER 4
IMPLEMENTATION
4.1 Coding
AngularJS:
<!DOCTYPE html>
<html>
<title>AngularJs Tutorial</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-
dpi" />
<link rel="SHORTCUT ICON" href="../img/logo.png" />
<link rel="stylesheet" href="../cs/first.css">
<link rel="stylesheet" href="../cs/second.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="../cs/third.css">
<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "arial", sans-serif}
.w3-sidenav a,.w3-sidenav h4{padding:12px;}
.w3-navbar a{padding-top:15px !important;padding-bottom:15px !important;}
.w3-btn{border-radius:3px;float:left;width:185px;height:55px;margin-left:65px;margin-
top:41px;letter-spacing:3px}
.vetri{margin-left:200px;margin-top:-98.4%}
</style>
<body>

<ul class="w3-navbar w3-theme w3-top w3-left-align w3-large" style="z-index:4;">
<li class="w3-opennav w3-right w3-hide-large">

14
<a class="w3-hover-white w3-large w3-theme-l1" href="javascript:void(0)"
onclick="w3_open()"><i class="fa fa-bars"></i></a>
</li>
<li><a href="#" class="w3-theme-l1">Home</a></li>
<li class="w3-hide-small"><a href="#" class="w3-hover-white">Web
Technology</a></li>
<li class="w3-hide-small"><a href="#" class="w3-hover-white">Projects</a></li>
<li class="w3-hide-small"><a href="#" class="w3-hover-white">Blogging</a></li>
<li class="w3-hide-small"><a href="#" class="w3-hover-white">Template</a></li>
<li class="w3-hide-medium w3-hide-small"><a href="#" class="w3-hover-
white">Clients</a></li>
white">About us</a></li>
</ul>

<nav class="w3-sidenav w3-collapse w3-theme-l5 w3-animate-left" style="z-
index:3;width:250px;">
<a href="javascript:void(0)" onclick="w3_close()" class="w3-right w3-xlarge w3-
padding-large w3-hover-black w3-hide-large" title="close menu">×</a>
<h4><b style="color:blue;letter-spacing:1px">Learn AngularJS</b></h4>
<a href="index.html" class="w3-hover-black"><li>AngularJS Overview</li></a>
<a href="angularjs_introduction.html" class="w3-hover-black"><li>AngularJS
Introduction</li></a>
<a href="angularjs_directives.html" class="w3-hover-black"><li>AngularJS
Directives</li></a>
<a href="angularjs_modules.html" class="w3-hover-black"><li>AngularJS
Modules</li></a>
<a href="angularjs_expressions.html" class="w3-hover-black"><li>AngularJS
Expressions</li></a>

15
<a href="angularjs_scopes.html" class="w3-hover-black"><li>AngularJS
Scopes</li></a>
<a href="angularjs_forms.html" class="w3-hover-black"><li>AngularJS
Forms</li></a>
<a href="angularjs_tables.html" class="w3-hover-black"><li>AngularJS
Tables</li></a>
<a href="angularjs_filters.html" class="w3-hover-black"><li>AngularJS
Filters</li></a>
<a href="angularjs_validation.html" class="w3-hover-black"><li>AngularJS
Validation</li></a>
<a href="angularjs_services.html" class="w3-hover-black"><li>AngularJS
Services</li></a>
<a href="angularjs_includes.html" class="w3-hover-black"><li>AngularJS
Includes</li></a>
<a href="angularjs_events.html" class="w3-hover-black"><li>AngularJS
Events</li></a>
</nav>
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer"
title="close side menu"></div>
<div><img src="../img/angular.png" style="margin-left:270px;margin-
top:30px;"/></div>

<div class="w3-main" style="margin-left:400px;margin-top:-215px;font-
family:arial;font-size:19px;letter-spacing:0.2px">
<div class="w3-row w3-padding-64">
<div class="w3-twothird w3-container">
<p>AngularJS is an JavaScript Framework.</p>
<P>AngularJS perfect for Single Page Application (SPA) projects.</p>
<p>AngularJs is an open source, completely free.</p>
</div>

16
</div>
</div>
family:arial;font-size:17px;line-height:2;letter-spacing:0.2px;lit:35px">
<p><h4><strong>Overview of AngularJS:</strong></h4></p>
<P>          Before you
study AngularJS, you should have a basic understanding of web technologies such as
HTML, CSS, JavaScript etc.
As we are going to develop web based application using
AngularJs, so you have basic knowledge of JavaScript and any text editor (like
<i>Notepad++</i>, <i>Sublime text</i>).</p>
<p>          It
was originally developed by Google employee, Misko Hevery in 2009. Now officially
supported by Google company.
AngularJS is a structural framework for dynamic web apps. Overall,
AngularJS is a framework to build large scale and high performance web
application.</p>
<p>          AngularJS
is a powerful JavaScript based development framework to create RICH Internet
Application(RIA). AngularJS provides data binding capability to HTML thus giving user
a rich and responsive experience. </p>
</div>
</div>
</div>

17
<div class="w3-card-4 w3-margin" style="width:65%;font-family:arial;font-size:16px;">
<header class="w3-container w3-blue">
<h4>AngularJS Demo</h4>
</header>
<div style="line-height:15px;letter-spacing:1.5px" class="w3-container">
<p style="color:red"><!DOCTYPE html></p>
<p><html lang="en-US"></p>
<p style="color:#0066ff"><script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script&
gt;</p>
<p><body></p>
<p style="color:#0066ff"><div ng-app=""></P>
<p style="color:#0066ff">      <p> Your
Name: <input type="text" ng-model="name"> </p></p>
<p style="color:#0066ff">      <h1>
Welcome {{yourname}} &lt/h1></p>
<p style="color:#0066ff"></div></p>
<p></body></p>
<p></html></p>
</div>
<footer class="w3-container w3-blue">
<p><a href="tryit/one.html" target="_blank"><button class="w3-dark-grey">Run the
file</button></a></p>
</footer>
</div><br/><br/><br/>

18
family:arial;font-size:17px;line-height:2;letter-spacing:0.2px;lit:35px">
<p><h4><strong>Features of AngularJS</strong></h4></p>
<P>          <b>1.</b>
AngularJS provides capability to create Single Page Application in a very clean and
maintainable way.</p>
<p>          <b>2.</b>
AngularJS, views are pure html pages, and controllers written in JavaScript do the
business processing.</p>
<p>          <b>3.</b>
AngularJS provides data binding capability to HTML thus giving user a rich and
responsive experience.</p>
<p>          <b>
4.</b> AngularJS automatically handles JavaScript code suitable for each browser.</p>
<p>          <b>
5.</b> AngularJS provides reusable components.</p>
</div>
</div>
</div>

<script>
// Script to open and close the sidenav
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";

19
document.getElementsByClassName("w3-overlay")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
document.getElementsByClassName("w3-overlay")[0].style.display = "none";
}
</script>
</body>
</html>
Bootstrap:
<!DOCTYPE html>
<html>
<title>AngularJs Tutorial</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-
dpi" />
<link rel="SHORTCUT ICON" href="../img/logo.png" />
<link rel="stylesheet" href="../cs/first.css">
<link rel="stylesheet" href="../cs/second.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="../cs/third.css">
<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "arial", sans-serif}
.w3-sidenav a,.w3-sidenav h4{padding:12px;}
.w3-navbar a{padding-top:15px !important;padding-bottom:15px !important;}
.w3-btn{border-radius:3px;float:left;width:185px;height:55px;margin-left:65px;margin-
top:41px;letter-spacing:3px}
.vetri{margin-left:200px;margin-top:-98.4%}
</style>
<body>

20

<ul class="w3-navbar w3-theme w3-top w3-left-align w3-large" style="z-index:4;">
<li class="w3-opennav w3-right w3-hide-large">
<a class="w3-hover-white w3-large w3-theme-l1" href="javascript:void(0)"
onclick="w3_open()"><i class="fa fa-bars"></i></a>
</li>
<li><a href="#" class="w3-theme-l1">Home</a></li>
<li class="w3-hide-small"><a href="#" class="w3-hover-white">Web
Technology</a></li>
<li class="w3-hide-small"><a href="#" class="w3-hover-white">Projects</a></li>
<li class="w3-hide-small"><a href="#" class="w3-hover-white">Blogging</a></li>
<li class="w3-hide-small"><a href="#" class="w3-hover-white">Template</a></li>
white">Clients</a></li>
white">About us</a></li>
</ul>

<nav class="w3-sidenav w3-collapse w3-theme-l5 w3-animate-left" style="z-
index:3;width:250px;">
<a href="javascript:void(0)" onclick="w3_close()" class="w3-right w3-xlarge w3-
padding-large w3-hover-black w3-hide-large" title="close menu">×</a>
<h4><b style="color:blue;letter-spacing:1px">Learn AngularJS</b></h4>
<a href="index.html" class="w3-hover-black"><li>Bootstrap Overview</li></a>
<a href="angularjs_introduction.html" class="w3-hover-black"><li>Bootstrap
Introduction</li></a>
<a href="angularjs_directives.html" class="w3-hover-black"><li>Bootstrap Grid
System</li></a>

21
<a href="angularjs_modules.html" class="w3-hover-black"><li>Bootstrap
Typography</li></a>
<a href="angularjs_expressions.html" class="w3-hover-black"><li>Bootstrap
Alerts</li></a>
<a href="angularjs_scopes.html" class="w3-hover-black"><li>Bootstrap
Buttons</li></a>
<a href="angularjs_forms.html" class="w3-hover-black"><li>Bootstrap
Tables</li></a>
<a href="angularjs_tables.html" class="w3-hover-black"><li>Bootstrap
Pagination</li></a>
<a href="angularjs_filters.html" class="w3-hover-black"><li>Bootstrap
Images</li></a>
<a href="angularjs_validation.html" class="w3-hover-black"><li>Bootstrap
Navbar</li></a>
<a href="angularjs_services.html" class="w3-hover-black"><li>Bootstrap
Dropdowns</li></a>
<a href="angularjs_includes.html" class="w3-hover-black"><li>Bootstrap
Labels</li></a>
<a href="angularjs_events.html" class="w3-hover-black"><li>Bootstrap
Panels</li></a>
<a href="angularjs_tables.html" class="w3-hover-black"><li>Bootstrap Wells</li></a>
<a href="angularjs_filters.html" class="w3-hover-black"><li>Bootstrap
Popover</li></a>
Tooltip</li></a>
<a href="angularjs_services.html" class="w3-hover-black"><li>Bootstrap List
Group</li></a>
<a href="angularjs_includes.html" class="w3-hover-black"><li>Bootstrap
Affix</li></a>
Carousel</li></a>

22
<a href="angularjs_tables.html" class="w3-hover-black"><li>Bootstrap
Collapse</li></a>
<a href="angularjs_filters.html" class="w3-hover-black"><li>Bootstrap Inputs</li></a>
Modal</li></a>
<a href="angularjs_services.html" class="w3-hover-black"><li>Bootstrap Progress
Bar</li></a>
<a href="angularjs_includes.html" class="w3-hover-black"><li>Bootstrap Page
Header</li></a>
Thumbnails</li></a>
</nav>
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer"
title="close side menu"></div>

<div class="w3-main" style="margin-left:250px;margin-top:-60px;font-family:arial;font-
size:17px;line-height:2;letter-spacing:0.2px;lit:35px">
<p><h4><strong>Bootstrap Grid System</strong></h4></p>
<P>          Bootstrap
includes a responsive, mobile first fluid grid system that appropriately scales up to 12
columns as the device or viewport size
increases. It includes predefined classes for easy layout options, as
well as powerful mixins for generating more semantic layouts.</p>
<p><h4><strong>Basic Structure of Bootstrap Grid</strong></h4></p>
<p>          Grid

23
columns are created by specifying the number of 12 available columns you wish to span.
For example, three equal columns would use three <mark>.col-sm-4</mark>.
Columns create gutters (gaps between column content) via
padding. That padding is offset in rows for the first and last column via negative margin
on <mark>.rows</mark>.</p>
<p><h4><strong>Grid System Rules</strong></h4></p>
<p>         <b>1.</b>
  Rows must be placed within a <mark>.container</mark> (fixed-width) or
<mark>.container-fluid</mark> (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.</p>
<p>         <b>2.</b>
Content should be placed within columns, and only columns may be immediate children
of rows. Predefined classes like .row and .col-sm-4 are available for quickly making grid
layouts</p>
</div>
</div>
</div>

<div class="w3-card-4 w3-margin" style="width:65%;font-family:arial;font-size:16px;">
<header class="w3-container w3-blue">
<h4>Bootstrap Grid System</h4>
</header>
</div>
</body>
</html>

24
4.2 Testing
Software testing is a process of executing a program or application with the intent
of finding the software bugs. It can also be started as the process of validating and
verifying that a software program or application or product. Meets the business and
technical requirements that guided by design and development.
Unit Testing
Unit testing, a testing techniques using which individual modules are tested to
determine if there are any issues by the developer himself. It’s concerned with functional
correctness of the standalone modules.
Integration Testing
Integration testing is a systematic technique for constructing the program structure
while at the same time conducting tests to uncover errors associated with interfacing.
This integration testing specifies to perform the environment variables to check along
with the modules.
Manual Testing
Manual testing is a testing process that is carried out manually in order to
find defects without the usage of tools or automation scripting. A test plan
document is prepared that acts as a guide to testing process in order to have the
complete test coverage.
Use Case Testing
Use Case Testing is a functional black box testing techniques that helpstesters
to identify test scenarios that exercise the whole system on each transaction basis
from start to finish.

25
Validation Testing
In the validation testing the user click any one of the web technology
languages like HTML, CSS, JavaScript and Bootstrap etc. All the web pages will
be opened in single window there is no bugs displayed yet. Whenever the students
are enter some value code for Try it yourself online editor.
Try it Yourself editor – It have an some code to run the program, otherwise it will
not be get the correct result. Click to See Result button.
Function run code( )
{
var ifr = document.createElement("iframe");
ifr.setAttribute("frameborder", "0");
if (ifrw.document.body && !ifrw.document.body.isContentEditable) {
ifrw.document.body.contentEditable = true;
ifrw.document.body.contentEditable = false;
}
}
In that JavaScript code contain the online editor tool execute an specific scripting
function of all other code. If you check the see result button it will provide the
perfect answer for users.
The process of evaluating software during the development process or at the end of
the development process to determine whether it satisfies specified business
requirements.

26
<script>
// Script to open and close the sidenav
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
document.getElementsByClassName("w3-overlay")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
document.getElementsByClassName("w3-overlay")[0].style.display = "none";
}
</script>
Data Integrity Testing:
Data Integrity corresponds to the quality of data in the databases and to the
level by which users examine data quality, integrity and reliability. Data integrity
testing verifies that the data in the database and functions as expected within a given
application.
Performance Testing
Performance testing, a non-functional testing technique performed to
determine the system parameters in terms of responsiveness and stability under
various workload. Performance testing measures the quality attributes of the
system, such as scalability, reliability and resource usage.

27
4.3 Module description
In the project “Hybrid Application Development” has been developed by web
technology languages like an HTML5, CSS, JavaScript and Bootstrap etc. Apache
Cordova used for run the backend process in hybrid app development.
 AngularJS Module
 Bootstrap Module
 CSS Module
 PHP Module
 HTML Module
 jQuery Module
 JavaScript Module
AngularJS Module
AngularJS is a powerful JavaScript based development framework to create RICH
Internet Application (RIA). AngularJS provides data binding capability to HTML thus
giving user a rich and responsive experience.
Bootstrap Module
Bootstrap is the most popular front end framework in the recent time. It’s sleek,
intuitive, and powerful mobile first front-end framework for faster and easier web
development. It uses the HTML, CSS and JavaScript.
CSS Module
CSS is used to control the style of a web document in a simple and easy way. CSS
is the acronym for “Cascading Style Sheet”. This tutorial covers both the versions CSS1,
CSS2 and CSS3, and gives a complete understanding of CSS, starting from its basics to
advanced concepts

28
PHP Module
The PHP Hypertext Preprocessor (PHP) is a programming language that allows web
developers to create dynamic content that interacts with databases. PHP is basically used
for developing web based software application. This tutorial helps you to build your base
with PHP.
HTML Module
HMTL is being widely used to format web pages with the help of different tags
available in HTML language. Hypertext refers to the way in which web pages (HTML
documents) are linked together. Thus the link available on a web page are called as
Hypertext language.
jQuery Module
jQuery is a fast and concise JavaScript library created by John Resig in 2006. jQuery
simplifies HTML document traversing, event handling, animating and Ajax interactions
for Rapid web development. The purpose of jQuery is to make it much easier to use
JavaScript on your website.
JavaScript Module
JavaScript is a lightweight, interpreted programming languages. It’s designed for
creating network-centric applications. It’s complimentary to and integrated with Java.
JavaScript is very easy to implement because it’s integrated with HTML. It is open
source and cross-platform.

29
RESULT
4.2 Screenshot
Fig 6.1 Homepage Form

30
Fig 6.2 AngularJS Form
Fig 6.3 AngularJS Demo File

31
Fig 6.4 Bootstrap Homepage
Fig 6.4 Bootstrap Demo File

32
Fig 6.5 HTML Homepage
Fig 6.6 HTML Demo File

33
Fig 6.7 PHP Homepage
Fig 6.8 PHP Demo File

34
Fig 6.9 jQuery Homepage
Fig 6.10 jQuery Demo File

35
CHAPTER 5
CONCLUSION
In this “hybrid application development" helps to all of students who is looking for web
technologies languages like HTML5, CSS3, and JavaScript etc. We have to add the Try it Yourself
online editor, in this editor very helpful for whose learn the program to solve the each and every
languages. There is no advertisement for website it’s an one of the advantage of every students
because the advertisements are totally divert the mind and waste the time for preparation learning.
So we are strictly remove the ads its specially for students who is eagerly learn the web technology
languages.
FUTURE ENHANCEMENT
In the future enhancement it will be extend to video a file which will add on the all
other languages. Hybrid application are quite slow so we have to create some software to
speed the web application content. It’s take long time for loading the app when used the
API’s like an Geo Location, camera and media etc.

36
REFERENCES
BOOKS REFERENCES
1. Matthew MacDonald, “web technology: The Complete Reference,” 1st Edition,
McGraw-Hill Education India Private Limited, 2002.
2. Andrew Troelsen,”HTML,CSS with .w3c,” Special Edition , Apress,2007.
3. Anne Boehm, Mary Delamater, Angular 2.0 Web Programming with VB 2012.
WEB REFERENCES
1. http://www.w3schools.com/uploadfile/dommym/building-a-web-based-html -css
javascript-using-w3c/
2. http://stackoverflow.com/questions/9016888/cordova-limits
3. https://aspnetcompiler.codeplex.com/

Hybrid Application Development documentation report (MCA Project)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Hybrid Application Development documentation report (MCA Project)

Similar to Hybrid Application Development documentation report (MCA Project) (20)

Recently uploaded

Recently uploaded (20)

Hybrid Application Development documentation report (MCA Project)