Ardent Computech Pvt. Ltd. Ardent Computech Pvt. LTD.: De'tourkolkata De'tourkolkata

De`tourkolkata
A Project Report for Winter Industrial Training
Submitted by
Manjarul Hoque
Rahat Jabeen
Drishti Banerjee
TulikaRanjan
Indrani Ray
ArnabMondal
in partial fulfillment for the award of the degree of
B. Tech
in
Computer Science and En

Engineering
BRAINWARE GROUP OF INSTITUTIONS
At
Ardent Computech Pvt. Ltd.

DEC-JAN 2017-18
Ardent Computech Pvt. Ltd.
BONAFIDE CERTIFICATE
Certified that this project work was carried out under my supervision
“De`tourkolkata”is the bonafide work of
DEBOJYOTI MAJUMDER: Signature:
SIGNATURE
Name : DEBOJYOTI MAJUMDER

PROJECT MENTOR
SIGNATURE
EXAMINERS
Ardent Original Seal

Acknowledgement
I take this opportunity to express my deep gratitude and sincerest thank to my project
mentor, DEBOJYOTI MAJUMDER for giving most valuable suggestion, helpful guidance and
encouragement in the execution of this project work.
I will like to give a special mention to my colleagues. Last but not the least I am grateful to
all the faculty members of Ardent Computech Pvt. Ltd. or their support.
Table of Contents Page No
1. Abstract
2. Introduction and Objectives of the Project
3. Project Category
4. Tools/Platform, Hardware and Software Requirement specifications .
5.Basic of HTML, CSS and JS

6. Basic of Angular JS
7. Client Server Architecture

8. Client site and server site technology
9. DOM (Document object model)
10. Template
11. MVC (model view controller)
12. SPA (single page application)
13. Coding
14. User Interface Design
15. Bibliography
1.ABSTRACT
The purpose of this project is to generate an online travel service of kolkata for TOURIST
whodo not have idea about the places of Kolkata.
2.Introduction and Objectives of the Project
The objective of this project is:

 To give TOURIST access to the several places.
 Allows the people to reach out those places easily.
3. Project Category
Web Application/Web Based Project
4.Tools/Platform, Hardware and Software Requirement specifications.
Tools
1. Sublime Text Editor
2. Visual Studio Code
Platform
1. Microsoft Windows 7/8/10
Hardware Requirement Specification
Client Machine Server Machine

HDD 200 MB HDD 320 GB
Processor Pentium 4 or newer Processor Dual Core or newer
processor that processor
supports SSE2
Memory 512 MB Memory 2 GB
Software Requirement Specification
Client Machine
Browser Any standard
browser with
Javascript
interpreter
Client side mark up / HTML, Javascript,
scripting languages AngularJS, CSS
3.Basic of HTML
HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
Example
<! DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
CSS
What is CSS?
 CSS stands for Cascading Style Sheets

 CSS describes how HTML elements are to be displayed on
screen, paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web
pages all at once
 External stylesheets are stored in CSS files
JAVASCRIPT
JavaScript is the programming language of HTML and the Web.
JavaScript is easy to learn.
JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
4.Basic of Angular js
AngularJS extends HTML with new attributes.
AngularJS is perfect for Single Page Applications (SPAs)
AngularJS is easy to learn.
5. Client server architecture
Client/server architecture is a computing model in which the server hosts, delivers and
manages most of the resources and services to be consumed by the client. This type of
architecture has one or more client computers connected to a central server over a network or
internet connection. This system shares computing resources.
Client/server architecture is also known as a networking computing model or client/server

network because all the requests and services are delivered over a network.
6.Clientsite and server site technology
Client-side means that the action takes place on the user’s (the client’s)
computer. Server-side means that the action takes place on a web server.
Almost every computer in the world understands one programming language: JavaScript. For
this reason, most things that can be accomplished using JavaScript can be done without
needing access to a web server. Thus, though you are usually connected to the Internet when
you run JavaScript scripts, you could just as easily disconnect from the Internet and run those
same scripts on your computer (the client-side).
On the other hand, if you want to use a programming language (Ruby, PHP, and Python, etc)
you need access to a server that understands the language. Tasks that need to be
accomplished with those languages happen on that server, meaning they are done server-side.
7.DOM(Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects:

With the object model, JavaScript gets all the power it needs to create dynamic HTML:
 JavaScript can change all the HTML elements in the page

 JavaScript can change all the HTML attributes in the page
 JavaScript can change all the CSS styles in the page
 JavaScript can remove existing HTML elements and attributes
 JavaScript can add new HTML elements and attributes
 JavaScript can react to all existing HTML events in the page
 JavaScript can create new HTML events in the page
8.Template
Templates. In AngularJS, templates are written with HTML that
contains AngularJS-specific elements and attributes. ... These are the
types of AngularJS elements and attributes you can use: Directive — An
attribute or element that augments an existing DOM element or
represents a reusable DOM component
9.MVC(Model view controller)

Model–view–controller (MVC) is an architectural pattern commonly
used for developing user interfaces that divides an application into three
interconnected parts. This is done to separate internal representations of
information from the ways information is presented to and accepted from
the user.[1][2] The MVC design pattern decouples these major components
allowing for efficient code reuse and parallel development.
10.SPA
SPA (Simple Page Application)
A single-page
page application (SPA) is a web application or web site that
interacts with the user by dynamically rewriting the current page rather
than loading entire new pages from a server. This approach avoids
interruption of the user experience between successive pages, making the
application behave more like a desktop application. In an
n SPA, either all
necessary code – HTML, JavaScript
JavaScript, and CSS – is retrieved
rieved with a single
page load,[1] or the appropriate resources are dynamically
y loaded and
added to the page as necessary, usually in response to user actions. The
page does not reload at any point in the process, nor does control transfer
to another page, although the location hash or the HTML5History
History API can
be used to provide the perception and navigability of separate logical
pages in the application.[2] Interaction with the single page application
often involves dynamic
ic communication with the web server behind the
scenes.
11.Coding
Home page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper
.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="../style/model.css">
<link rel="stylesheet" type="text/css" href="../style/styles.css">
<link rel="stylesheet" type="text/css" href="../style/foot.css">
<link rel="stylesheet" type="text/css" href="../style/slide.css">
<link rel="stylesheet" type="text/css" href="../style/log.css">
<script src="../script/angular.min.js"></script>
<script src="../script/signupOpen.js"></script>
<script src="../script/menu.js"></script>
<link rel="stylesheet" type='text/css' href="../style/bootstrap.min.css">
<script src='../script/bootstrap.min.js'></script>
<style>
#menus>ulli{
float:right;
}
#menus{
top:-15px;
}
</style>
</head>
<body ng-app="mod1" ng-controller="con1" id="bdy">
<div id="nav">
<div id="nv" style="float:left;">
<abbr title="Home Page"><a href="final.html"><img class="logoclass"
src="../image/LOGO.jpg" width="200px" height="100px" style="
position:absolute;padding-top: 0px; margin-top:0px; overflow:
hidden;top:0px;"></a></abbr>
</div>
<div id="homologo"style="float:left;">
<a
href="final.html"><imgsrc="../image/home.png" width="50px"
height="50px" style="padding-top: 5px; position:relative; text-align:
center; margin-left:250px"></a>
</div>
<div id="menus" style="position: relative;">
<ulng-repeat="x in mnubar">
<li><a href="">{{x.mnu}}</a>

<ulng-repeat="y in x.submnu">
<li>
<a href="">{{y.name}}</a>
</li>

</ul>
</li>

</ul>
</div>
</div>
<div>
<div id="logslide">
<div id="frm">
<div id="container" >
<div class="logbox">
<imgng-src="../image/login.png" height="100px" width="100px"
id="logimage" alt="logimage">
<h2 class="logh">Login Here</h2>
<form>
<p class="logp">UserName</p>
<input required type="text" placeholder="User Name">
<p class="logp">Password</p>
<input required type="password" placeholder="EnterPassword">
<input type="Submit">
<a herf="">Forgot password</a><br>
<input type='button' value="Sign Up" >
</form>
</div>
</div>
</div>
<div id="slide" ng-include="'slide.html'">
</div>
</div>
<div id="footer">
<div id="menu">
<ul>
<li><a href="final.html">Home</a></li>
<li><a>Help</a></li>
<li>About Us</li>
<li>About Project</li>
<li><a href="http://www.ardentcollaborations.com"
target="_blank">About Ardent</a></li>
</ul>
</div>
<div id="back">
<p id="feedp">Feedback</p>
Name*<input type="text" id="name"><br>
Email*<input type="email" id="mail"><br>
Message*<textarea cols="33" rows="2"
id="msg"></textarea><br>
<input type="submit" id="btn" value="LogIn">
</div>
<div id="about">
<h2><a href="" id="us">Contact Us</a></h2>
<h5>Like Us / Join Us</h5>
<div id="media">
<div class="box" id="facebook"></div>
<div class="box" id="twiter"></div>
<div class="box" id="google"></div>
<div class="box" id="insta"></div>
</div>
</div>
<div id="mark">
<marquee style="font-family:sans-serif;font-size:25;font-weight:
100;padding-top: 20px;">Ardent ComputerTech,BF
88,AngularJs</marquee>
</div>
</div>
</div>
</body>
</html>
INDEX:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
<script
</script>
<script
.min.js"></script>
<style>
#menus>ulli{
float:right;
}
#menus{
top:-15px;
}
</style>
</head>
<div id="nav">
src="../image/LOGO.jpg" width="200px" height="100px" style="
hidden;top:0px;"></a></abbr>
</div>
<a
</div>
<li><a href="">{{x.mnu}}</a>
<li>
</li>
</ul>
</li>
<ul>
</ul>
</li>
</ul>
</div>
</div>
<div>
<div id="logslide">
<div id="frm">
<div id="container" >
<div class="logbox">
<imgng-src="../image/login.png" height="100px" width="100px"
id="logimage" alt="logimage">
<h2 class="logh">Login Here</h2>
<form>
<p class="logp">UserName</p>
<input required type="text" placeholder="User Name">
<p class="logp">Password</p>
<input required type="password" placeholder="EnterPassword">
<input type="Submit">
<a herf="">Forgot password</a><br>
<input type='button' value="Sign Up" >
</form>
</div>
</div>
</div>
<div id="slide" ng-include="'slide.html'">
</div>
</div>
<div id="footer">
<div id="menu">
<ul>
<li>About Us</li>
</ul>
</div>
<div id="back">
Name*<input type="text" id="name"><br>
Email*<input type="email" id="mail"><br>
Message*<textarea cols="33" rows="2"
id="msg"></textarea><br>
<input type="submit" id="btn" value="LogIn">
</div>
<div id="about">
<div id="media">
<div class="box" id="facebook"></div>
<div class="box" id="twiter"></div>
<div class="box" id="google"></div>
<div class="box" id="insta"></div>
</div>
</div>
<div id="mark">
</div>
</div>
</div>
</body>
</html>
AboutUs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link
rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
<script
</script>
<script
.min.js"></script>
<link rel="stylesheet" type="text/css"
href="../style/aboutus.css">
<style>
#menus>ulli{
float:right;
}
#menus{
top:-15px;
}
</style>
</head>
<div id="nav">

src="../image/LOGO.png" width="300px" height="130px" style="
hidden;top:-15px; left:-60px;"></a></abbr>
</div>
<a
</div>
<li><a href="">{{x.mnu}}</a>
<li>
</li>
</ul>
</li>
<ul>
</ul>
</li>
</ul>
</div>
</div>
<div>
<div id="logslide" style="height: 1050px">
<div class="sec" style="float:left; width:100%; height:350px" >
<button class="back"><a href="final.html"
>❮</a></button>
<div class="personalinfo" style="margin-
left:33%;">
<imgng-src="{{sirpic}}"
class="personalpic" >
<p class="prsn">Personal Details
written</p>
</div>
</div>
<div class="sec" style="float:right; width:100%;
height:350px" >
<div class="personalinfo">
<imgng-src="{{manjapic}}"
class="personalpic">
<p class="prsn">{{manjainfo}}</p>
</div>
<imgsrc="" class="personalpic">
<p class="prsn">arnab</p>
</div>
<imgng-src="{{indrapic}}"
<p class="prsn">indranip>
</div>
<imgng-src={{sidphoto}}
<p class="prsn">{{sidsinfo}}</p>
</div>
</div>
<div class="sec" style="float:right; width:100%;
height:350px" >
<p class="prsn">Rahat</p>
</div>
<p class="prsn">Tulika</p>
</div>
<p class="prsn">Saket</p>
</div>
<p class="prsn">Dristi</p>
</div>
</div>
</div>
<div id="footer">
<div id="menu">
<ulng-repeat="menulist in footermenu">
<li><a
href={{menulist.page}}>{{menulist.nme}}</a></li>
</ul>

</div>
<div id="back">
Name*<input type="text" id="msgname"><br>
Email*<input type="email" id="msgmail"><br>
Message*<textarea cols="33" rows="2" id="msg"
id="textarea"></textarea><br>
<input type="submit" id="btn" value="Submit" onclick="put()">
</div>
<div id="about">
<div id="media">
<div class="box" id="facebook"><a
href="https://www.facebook.com/login"
target="_blank"></a></div>
<div class="box" id="twiter"><a
href="https://twitter.com/login"></a></div>
<div class="box" id="google"><a
href="https://plus.google.com/117302453758282711096"></a
></div>
<div class="box" id="insta"><a
href="https://www.instagram.com/?hl=en"></a></div>
</div>
</div>
<div id="mark">
</div>
</div>
</div>
</body>
</html>
User Interface Design

Home page:
Login:
About us & Feedback
Bibliography:
1. www.google.com
2. www.w3school.com
3. www.Youtube.com

Ardent Computech Pvt. Ltd. Ardent Computech Pvt. LTD.: De'tourkolkata De'tourkolkata

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Ardent Computech Pvt. Ltd. Ardent Computech Pvt. LTD.: De'tourkolkata De'tourkolkata

Diunggah oleh

Hak Cipta:

Format Tersedia

De`tourkolkata

A Project Report for Winter Industrial Training

in partial fulfillment for the award of the degree of

Computer Science and En

Ardent Computech Pvt. Ltd.

Ardent Computech Pvt. Ltd.

“De`tourkolkata”is the bonafide work of

DEBOJYOTI MAJUMDER: Signature:

Name : DEBOJYOTI MAJUMDER

Ardent Original Seal

Table of Contents Page No

4. Tools/Platform, Hardware and Software Requirement specifications .

5.Basic of HTML, CSS and JS

7. Client Server Architecture

2.Introduction and Objectives of the Project

The objective of this project is:

4.Tools/Platform, Hardware and Software Requirement specifications.

Hardware Requirement Specification

Client Machine Server Machine

Software Requirement Specification

<h1>My First Heading</h1>

 CSS stands for Cascading Style Sheets

JavaScript is the programming language of HTML and the Web.

JavaScript is easy to learn.

JavaScript is one of the 3 languages all web developers must learn:

1. HTML to define the content of web pages

2. CSS to specify the layout of web pages

3. JavaScript to program the behavior of web pages

AngularJS is perfect for Single Page Applications (SPAs)

AngularJS is easy to learn.

5. Client server architecture

Client/server architecture is also known as a networking computing model or client/server

7.DOM(Document Object Model)

The HTML DOM model is constructed as a tree of Objects:

 JavaScript can change all the HTML elements in the page

9.MVC(Model view controller)

<abbr title="Home Page"><a href="final.html"><img class="logoclass"

User Interface Design

Anda mungkin juga menyukai