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.

8

Goals:

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.

9

3.3.3 Apache Cordova

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

10

to modify the project within the SDK. This workflow relies on a set of lower level shell

scripts that 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,jQuery

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

Blogging and SEO

Web TechnologiesHomepageStudents

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>



<div class="w3-card-4 w3-margin" style="width:65%;font-family:arial;font-size:16px;">

17

<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></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/>


family:arial;font-size:17px;line-height:2;letter-spacing:0.2px;lit:35px">

18



<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";

document.getElementsByClassName("w3-overlay")[0].style.display = "block";

19

}

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>

<a href="angularjs_modules.html" class="w3-hover-black"><li>Bootstrap

Typography</li></a>

21

<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>

<a href="angularjs_tables.html" class="w3-hover-black"><li>Bootstrap

Collapse</li></a>

22

<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

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>.

23

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/

https://aspnetcompiler.codeplex.com/