Student Registration Form
INTERNSHIP PROJECT REPORT
Submitted By:
Members University Roll No
1. ARYAN SRIVASTAVA 2100100109005
2. INDRA PRATAP SINGH 2100100109008
3. SUYASH SRIVASTAVA 2100100109016
Submitted To:
MR. KULDEEEP GUPTA
(IBM Trainer)
Department of Computer Science United College of Engineering &
Research, Prayagraj Dr. A.P.J. Abdul Kalam Technical University
A-31, UPSIDC, Industrial Area, Naini, Prayagraj
ACKNOWLEDGEMENT
We would like to express our gratitude and appreciation to all those who gave
us the opportunity to complete this training. Especially, we want to thank Mr.
Kuldeep Gupta Sir for his support during the training. We are thankful to our
Head of Department (H.O.D) Mr. Vijay Dwivedi Sir, for providing necessary
departmental facilities, moral support and encouragement. We are also grateful
to IBM for giving us the opportunity of doing this training.
TABLE OF CONTENTS
[Link]. Content Page
No.
1 Project Description 1
2 Full Stack Development 2
3 HTML 3
4 CSS 7
5 JavaScript 12
6 NodeJS 14
7 Mongodb 19
8 Project Screenshots 21
9 Code 24
10 Reference 27
PROJECT DESCRIPTION
We made a complete TRAVELING WEBSITE form where everyone can get
best places to visit in UTTRAKHAND and also get best offers and economical
ticket prices. We added lots of places where tourist can travel in
UTTRAKHAND.
TECHNOLOGY USED:
HTML
CSS
JavaScript
NodeJS
MongoDB
What is Full Stack Development?
Full-stack Development refers to the development of both front end (client
side) and back end (server side) portions of web application. Full-stack
technology refers to the entire depth of a computer system application and full
stack web developers are those who are capable of developing both the front
end and the back end of web development. All of the features that are visible to
the client or the viewer of the site are included in the front end.
Benefits of Full Stack Development
o Demand is high
Full-stack developers are in high demand. This is the case because full-
stack engineers work on all three stages of the process: display, logic, and
database. Employers also desire multi-skilled personnel that can keep up
with the market and fills a variety of tasks.
o Creative Flexibility
Full-stack developers are well-versed in a variety of development topics.
Consequently, they will have greater flexibility in their work. They have
greater control over the product they're working on as they are well-
versed with both sides.
o Increased Productivity
Familiarity with numerous technologies is one of the qualities of a full-
stack developer. They are familiar with all of them, whether it's adding
graphics to a web page or constructing a database. They have an
advantage over other developers since they have the potential to make
technical decisions more quickly and see the big picture.
HTML:
What is HTML?
• HTML stands for Hyper Text Markup Language.
• HTML is used to create web pages.
• HTML provides simple mechanism for formatting text, adding links, creating
list, inserting images, embedding audio and video, etc.
• HTML documents have extension .html or .htm
• The current version is HTML5
Basic Structure of HTML page:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>
HTML Tags
Some HTML tags:
• <html> … </html> - Defines the root of an html document.
• <head> … </head> - Contains metadata for the document.
• <title> … </title> - Defines a title for the document.
• <body> … </body> - Defines the document's body.
• <header> … </header> -Defines a header for the document.
• <main> … </main> - Specifies the main content of a
document.
• <footer> … </footer> -Defines a footer for the document.
• <h1> to <h6> - Defines html headings.
• <div> … </div> - Defines a block level element in a
document.
• <hr> - Defines a thematic change in the content.
• <br> - Defines a single line break.
• <a> … </a> - Defines a hyperlink.
• <img> - Defines an image.
• <span> … </span> - Defines an inline element.
• <video> … </video> - Defines embedded video content.
• <audio> … </audio> - Defines embedded sound content.
• <table> … </table> - Defines a table.
• <tr> … </tr> - Defines a row in a table.
• <th> … </th> - Defines a header in a table.
• <td> … </td> - Defines data in a table.
• <li> … </li> - Defines a list item.
• <ol> … </ol> - Defines an ordered list.
• <ul> … </ul> - Defines an unordered list.
• <form> … </form> - Defines an HTML form for user input.
• <label> … </label> - Defines a label for an <input> element.
• <input> - Defines an input control. A wide variety of type of
input data are available.
• <select> … </select> - Represents a control that provides a
menu of options.
• <option> … </option> - Defines options in drop down list.
• <textarea> … </textarea> - Defines a multiline input
control(textarea).
• <p > … </p> - Defines a paragraph.
• <pre> … </pre> - Defines preformatted text.
• <b> … </b> - Defines a bold text.
• <sub> … </sub> - Defines subscripted text.
• <sup> … </sup> - Defines superscripted text.
• <button> … </button> - Defines a clickable button.
• <strong> … </strong> - Defines important text.
HTML Forms
An HTML form is used to collect user input. The user input is most often sent
to a server for processing.
The HTML <form> element is used to create an HTML form for user input. The
<form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio buttons, submit buttons, etc.
The HTML <input> element is the most used form element. An <input>
element can be displayed in many ways, depending on the type attribute.
Some examples of <input> tag
<input type="text"> - Displays a single-line text input field.
<input type="radio"> - Displays a radio button (for selecting one of many
choices).
<input type="checkbox"> - Displays a checkbox (for selecting zero or more of
many choices).
<input type="submit"> - Displays a submit button (for submitting the form).
<input type="button"> - Displays a clickable button.
CSS:
What is CSS?
o CSS stands for Cascading Style Sheets.
o CSS is used for styling of webpage.
o CSS makes a webpage attractive.
Why to use CSS?
Styling is the essential property for any website. It increases the
standards and overall look of the website that makes it easier for the
user to interact with it. A website can be made without CSS but it will
not look attractive so no user would want to interact with a dull and
shabby website.
Types of CSS
1. Inline CSS – Using style attribute.
2. Internal CSS - Using style tag.
3. External CSS – Adding stylesheet (CSS) to HTML using <link> tag.
Advantages of CSS
CSS saves time − You can write CSS once and then reuse same sheet in
multiple HTML pages. You can define a style for each HTML element
and apply it to as many Web pages as you want.
Pages load faster − If you are using CSS, you do not need to write
HTML tag attributes every time. Just write one CSS rule of a tag and
apply it to all the occurrences of that tag. So less code means faster
download times.
Easy maintenance − To make a global change, simply change the style,
and all elements in all the web pages will be updated automatically.
Superior styles to HTML − CSS have a much wider array of attributes
than HTML, so you can give a far better look to your HTML page in
comparison to HTML attributes.
Multiple Device Compatibility − Style sheets allow content to be
optimized for more than one type of device. By using the same HTML
document, different versions of a website can be presented for handheld
devices such as PDAs and cell phones or for printing.
Global web standards − Now HTML attributes are being deprecated and
it is being recommended to use CSS. So, it’s a good idea to start using
CSS in all the HTML pages to make them compatible to future browsers.
CSS Selectors
CSS Selectors are used to target HTML elements. Selectors make it easy for us
to easily target single/multiple HTML elements in the markup.
We can divide CSS selectors into five categories:
Simple selectors (select elements based on name, id, class).
Combinator selectors (select elements based on a specific relationship
between them).
Pseudo-class selectors (select elements based on a certain state).
Pseudo-elements selectors (select and style a part of an element).
Attribute selectors (select elements based on an attribute or attribute
value).
Basic properties
CSS Text-Property
CSS has a lot of properties for formatting text.
Text Color
The color property is used to set the color of the text. The color is specified by:
a color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb (255,0,0)"
Font-property
Choosing the right font has a huge impact on how the readers experience a
website. The right font can create a strong identity for your brand. Using a font
that is easy to read is important. The font adds value to your text. It is also
important to choose the correct color and text size for the font.
Generic Font Families
In CSS there are five generic font families:
1. Serif fonts have a small stroke at the edges of each letter. They create a
sense of formality and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create
a modern and minimalistic look.
3. Monospace fonts - here all the letters have the same fixed width. They
create a mechanical look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.
Font-family Property
In CSS, we use the font-family property to specify the font of a text.
CSS Margins
The CSS margin properties are used to create space around elements, outside of
any defined borders.
With CSS, you have full control over the margins. There are properties for
setting the margin for each side of an element (top, right, bottom, and left).
CSS has properties for specifying the margin for each side of an element:
margin-top
margin-right
margin-bottom
margin-left
CSS Padding
The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties for
setting the padding for each side of an element (top, right, bottom, and left).
CSS Borders
The CSS border properties allow you to specify the style, width, and color of an
element's border.
CSS Backgrounds
The CSS background properties are used to add background effects for
elements.
background-color
background-image
background-repeat
background-attachment
background-position
CSS Animations
CSS allows animation of HTML elements without using JavaScript.
Example:
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
JavaScript
JavaScript is a dynamic computer programming language. It is lightweight and
most commonly used as a part of web pages, whose implementations allow
client-side script to interact with the user and make dynamic pages. It is an
interpreted programming language with object-oriented capabilities.
There are following three particular ways to put JavaScript into an HTML Page:
• Inline JavaScript
Inline JavaScript is achieved by following methods or we can also create a
function in script tag and call it by using button tag.
• Internal JavaScript
In HTML, JavaScript code is inserted between tags. You can place any number
of scripts in an HTML document. Scripts can be placed in the, or in the section
of an HTML page, or in both.
• External JavaScript
External scripts are practical when the same code is used in many different web
the name of the script file in the src (source) attribute of a <script> tag:
Variables
Variables are containers for storing data (storing data values). Always declare
JavaScript variables with var, let, or const. The var keyword is used in all
JavaScript code from 1995 to 2015. The let and const keywords were added to
JavaScript in 2015. If you want your code to run in older browsers, you must
use var.
JavaScript Events
HTML events are "things" that happen to HTML elements. When JavaScript is
used in HTML pages, JavaScript can "react" on these events.
Here is a list of some common HTML events:
onchange-An HTML element has been changed
onclick-The user clicks an HTML element
onmouseover-The user moves the mouse over an HTML element
onmouseout-The user moves the mouse away from an HTML element
onkeydown-The user pushes a keyboard key
onload-The browser has finished loading the page
[Link]
[Link] is an open-source, cross-platform backend JavaScript runtime
environment that runs on js engine. [Link] also provides a rich library of
various JavaScript modules which simplifies the development of web
applications using [Link] to a great extent.
Features of [Link]
Asynchronous and Event Driven − All APIs of [Link] library are
asynchronous that is non-blocking. It essentially means a [Link] based
server never waits for an API to return data. The server moves to the next
API after calling it and a notification mechanism of Events of [Link]
helps the server to get a response from the previous API call.
Very Fast − Being built on Google Chrome's V8 JavaScript Engine,
[Link] library is very fast in code execution.
Single Threaded but Highly Scalable − [Link] uses a single threaded
model with event looping. Event mechanism helps the server to respond
in a non-blocking way and makes the server highly scalable as opposed to
traditional servers which create limited threads to handle requests.
[Link] uses a single threaded program and the same program can
provide service to a much larger number of requests than traditional
servers like Apache HTTP Server.
No Buffering − [Link] applications never buffer any data.
[Link] NPM
NPM is a package manager for [Link] packages or modules. A package in
[Link] contains all the files you need for a module. Modules are JavaScript
libraries you can include in your project.
[Link] Modules
Modules are set of functions you want to include in your application.
[Link] Built-in Modules
[Link] has a set of built-in modules which you can use without any further
installation. To include a module, use the require() function with the name of
the module. For example:
var http = require('http');
Now your application has access to the HTTP module, and is able to create a
server:
[Link](function (req, res) {
[Link](200, {'Content-Type': 'text/html'});
[Link]('Hello World!');
}).listen(8080);
User-defined modules
You can create your own modules, and easily include them in your applications.
Example:
Create a module that returns the current date and time.
[Link] = function () {
return Date();
};
[Link] HTTP Module
[Link] has a built-in module called HTTP, which allows [Link] to transfer
data over the Hyper Text Transfer Protocol (HTTP).
To include the HTTP module, use the require() method:
[Link] as a Web Server
The HTTP module can create an HTTP server that listens to server ports and
gives a response back to the client.
Use the createServer() method to create an HTTP server:
Example:
var http = require('http');
//create a server object:
[Link](function (req, res) {
[Link]('Hello World!'); //write a response to the client
[Link](); //end the response
}).listen(8080); //the server object listens on port 8080
The function passed into the [Link]() method, will be executed when
someone tries to access the computer on port 8080.
Save the code above in a file called "demo_http.js", and initiate the file.
[Link] URL Module
The URL module splits up a web address into readable parts. To include the
URL module, use the require() method. Parse an address with
the [Link]() method, and it will return a URL object with each part of the
address as properties.
Example:
var url = require('url');
var adr = '[Link]
var q = [Link](adr, true);
[Link]([Link]); //returns 'localhost:8080'
[Link]([Link]); //returns '/[Link]'
[Link]([Link]); //returns '?year=2022&month= September '
var qdata = [Link]; //returns an object: { year: 2022, month: ‘September ‘ }
[Link]([Link]); //returns ' September '
[Link] File System Module
The [Link] file system module allows you to work with the file system on your
computer. To include the File System module, use the require() method.
Common use for the File System module:
Read files
Create files
Update files
Delete files
Rename files
[Link] Events
Every action on a computer is an event. Like when a connection is made or a
file is opened. Objects in [Link] can fire events, like the readStream object
fires events when opening and closing a file.
Example:
var fs = require('fs');
var rs = [Link]('./[Link]');
[Link]('open', function () {
[Link]('The file is open');
});
The Nodemailer Module
The Nodemailer module makes it easy to send emails from your computer. The
Nodemailer module can be downloaded and installed using npm.
After you have downloaded the Nodemailer module, you can include the
module in any application.
var nodemailer = require('nodemailer');
Now you are ready to send emails from your server. Use the username and
password from your selected email provider to send an email.
var nodemailer = require('nodemailer');
var transporter = [Link]({
service: 'gmail',
auth: {
user: 'youremail@[Link]',
pass: 'yourpassword'
}
});
var mailOptions = {
from: 'youremail@[Link]',
to: 'myfriend@[Link]',
subject: 'Sending Email using [Link]',
text: 'That was easy!'
};
[Link](mailOptions, function(error, info){
if (error) {
[Link](error);
} else {
[Link]('Email sent: ' + [Link]);
}
});
MongoDB
MongoDB is a source-available cross-platform document-oriented
database program. Classified as a NoSQL database program, MongoDB
uses JSON-like documents with optional schemas.
Features of MongoDB
Support ad hoc queries-In MongoDB, you can search by field, range query
and it also supports regular expression searches.
Indexing-You can index any field in a document.
Replication-MongoDB supports Master Slave replication. A master can
perform Reads and Writes and a Slave copies data from the master and can
only be used for reads or back up.
Duplication of data-MongoDB can run over multiple servers. The data is
duplicated to keep the system up and also keep its running condition in case
of hardware failure.
Load balancing-It has an automatic load balancing configuration because
of data placed in shards.
Supports map reduce and aggregation tools.
Uses JavaScript instead of Procedures.
It is a schema-less database written in C++.
Provides high performance.
Stores files of any size easily without complicating your stack.
Easy to administer in the case of failures.
Creating a Database
To create a database in MongoDB, start by creating a MongoClient object, then
specify a connection URL with the correct ip address and the name of the
database you want to [Link] will create the database if it does not
exist, and make a connection to it.
Example:
Create a database called "mydb":
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/mydb";
[Link](url, function(err, db) {
if (err) throw err;
[Link]("Database created!");
[Link]();
});
Creating a Collection
To create a collection in MongoDB, use the createCollection() method.
Example:
Create a collection called "customers".
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";
[Link](url, function(err, db) {
if (err) throw err;
var dbo = [Link]("mydb");
[Link]("customers", function(err, res) {
if (err) throw err;
[Link]("Collection created!");
[Link]();
});
});
Project Screenshots:
HOMEPAGE
REGISTRATION PAGE
CODE
REFERENCE
[Link]
[Link]
[Link]