SUMMER TRAINING REPORT

On

WEB DEVELOPMENT
Submitted to Guru Gobind Singh Indraprastha University, Delhi (India)
in partial fulfilment of the requirement for the award of the degree of
B.TECH
in
ELECTRONICS AND COMMUNICATION ENGINEERING

Submitted By
SHUBHAM SINGH
Roll. No. - 03096302818

DEPTT. OF ELECTRONICS AND COMMUNICATION

MAHARAJA SURAJMAL INSTITUTE OF TECHNOLOGY,

NEW DELHI-110058
 TABLE OF CONTENTS

ACKNOWLEDGMENT (i)
CERTIFICATE (ii)
DECLARATION (iii)
ORGANIZATION PROFILE (iv)
1. INTRODUCTION TO WEB DEVELOPMENT
1.1 DEFINITION - WHAT DOES WEB DEVELOPMENT MEAN?.............................1
1.2 CLIENT-SIDE SCRIPTING...........................................................................2
1.3 SERVER-SIDE SCRIPTING......................................................................................3
1.4 DATABASE...............................................................................................................4
1.4.1 RELATIONAL DATABASE............................................................................4
1.4.2 CLOUD DATABASE.........................................................................................4
1.5 HOW A WEBSITE WORKS.......................................................................................5-6
1.5.1 IP ADDRESS....................................................................................................... 5
1.5.2 DOMAIN ........................................................................................................ 5
1.5.3 ISP ............................................................................................................5
1.5.4 DNS .............................................................................................................6
1.5.5 TCP/IP .......................................................................................................6
1.5.6 NEWTORK PROTOCOLS..................................................................................6
1.6 WEBSITE ARCHITECTURE......................................................................................7
2. DIFFERENCE BETWEEN WEB DESIGN & WEB DEVELOPMENT 8
3. FRONT END DEVELOPMENT................................................................................9
3.1 HTML...................................................................................................................9-11
3.1.1 HTML TAGS.............................................................................................9-11
3.2 CSS................................................................................................................12
3.2.1 SELECTOR................................................................................................12
3.2.2 PROPERTIES.............................................................................................13
3.3 JAVASCRIPT......................................................................................................14-15
3.3.1 FUNCTIONS..............................................................................................14
3.3.2 LOOPS........................................................................................................15
3.4 JSON....................................................................................................................15-17
3.4.1 DATA TYPES & SYNTAX.......................................................................16
3.4.2 USING JSON IN JAVASCRIPT................................................................17
3.5 DOCUMENT OBJECT MODEL............................................................................17
3.5.1 APPLIACTIONS........................................................................................17
3.6 JQUERY ................................................................................................................18
3.7 AJAX ................................................................................................................19

3.8 BOOTSTRAP..........................................................................................................20

4 BACKEND DEVELOPMENT..............................................................21-31
4.1 RUBY..................................................................................................................21-24
4.1.1 SYNTAX .......................................................................................22
4.1.2 EXAMPLES .......................................................................................23
4.1.2.1 STRINGS ..................................................................23
4.1.2.1 COLLECTIONS...........................................................................23
4.1.3 CLASSES .....................................................................24
4.2 RAILS..................................................................................................................25-28
4.2.1 MVC..........................................................................................................26
4.2.1.1 ADVANTAGES & DISADVANTAGES....................................27
4.2.2 FRAMEWORK STRUCTURE...............................................................27-28
4.2.2.1 ACTIVE RECORD ....................................................................28
4.2.2.1.1 WHAT IS ACTIVE RECORD?.........................................28
4.2.2.1.2 OBJECT RELATIONAL MAPPING…............................28
4.2.2.1.3 CRUD: Reading and Writing Data….................................28
4.3 API ................................................................................................................29
4.4 NODE.JS ................................................................................................................30
4.4.1 SOCKET.IO ...........................................................................................31

TABLE OF FIGURES
1.1 CLIENT-SIDE SCRIPTING 1
1.2 SERVER-SIDE SCRIPTING 3
1.3 WEB ARCHITECTURE 7
1.4 API REQUEST 29
 ACKNOWLEDGEMENT

A research work owes its success from commencement to completion, to the people in love
with researchers at various stages. Let me in this page express my gratitude to all those who helped
us in various stage of this study. First, I would like to express my sincere gratitude indebtedness to
PRADEEP SANGWAN(HOD, Department of Electronics And Communication(Maharaja Surajmal
Institute of Technology ,New delhi ) for allowing me to undergo the summer training of 60 days at
Internshala, New Delhi
I am grateful to our guide Mr. Sushant Beriwal, for the help provided in completion of the
project, which was assigned to me. Without his friendly help and guidance it was difficult to develop
this project.
Last but not least, I pay my sincere thanks and gratitude to all the Staff Members of
Internshala for their support and for making our training valuable and fruitful.

Submitted By- SHUBHAM SINGH

Certificate
 CANDIDATE’S DECLARATION
I, Shubham Singh, Roll No.- 03096302818, B.Tech (Semester- 5th ) of the Maharaja
Surajmal Institute of Technology, New Delhi hereby declare that the Training Report
entitled “WEB DEVELOPMENT” is an original work and data provided in the study is
authentic to the best of my knowledge. This report has not been submitted to any other
Institute for the award of any other degree.

Shubham Singh
(Roll No. 03015002818)
Place: New Delhi
1. INTRODUCTION TO WEB DEVELOPMENT
Web development is the coding or programming that enables website functionality,
per the owner's requirements. It mainly deals with the non-design aspect of
building websites, which includes coding and writing markup. Web development
ranges from creating plain text pages to complex web-based applications, social
network applications and electronic business applications.
There are three kinds of web developer specialization: front-end developer, back-
end developer, and full-stack developer. Front-end developers deal with the layout
and visuals of a website, while back-end developers deal with the functionality of a
website. Back-end developers will program in the functions of a website that will
collect data.
All websites run on three components: the server, the database, and the client. The
client is simply the browser a person is using to view a site, and it’s where client-
side technology is unpacked and processed. The server is at a remote location
anywhere in the world—housing data, running a site’s back-end architecture,
processing requests, and sending pages to the browser. The client is anywhere your
users are viewing your site: mobile devices, laptops, or desktop computers.
Server-side scripting is executed by a web server; client-side scripting is executed
by a browser.
The web development hierarchy is as follows:

● Client-side scripting
● Server-side scripting
● Database technology

1.1 DEFINITION - WHAT DOES WEB DEVELOPMENT MEAN?

Web development is a broad term for the work involved in developing a web
site for the Internet (World Wide Web) or an intranet (a private network). Web
development can range from developing the simplest static single page of plain
text to the most complex web- based internet applications (or just 'web apps')
electronic businesses, and social network services. A more comprehensive list of
tasks to which web development commonly refers, may include web engineering,
web design, web content development, client liaison, client- side/server-side
scripting, web server and network security configuration, and e- commerce
development. Among web professionals, "web development" usually refers to the
main non-design aspects of building web sites: writing markup and coding. Most
recently Web development has come to mean the creation of content management
systems or CMS. These CMS can be made from scratch, proprietary or open
source. In broad terms the CMS acts as middleware between the database and the
user through the browser. A principle benefit of a CMS is that it allows non-
technical people to make changes to their web site without having technical
knowledge.
1.2 CLIENT-SIDE SCRIPTING

Client-side scripting is code that executes in a web browser and determines

what your customers or clients will see when they land on your website.
Client-end scripts are embedded in a website’s HTML markup code, which is
housed on the server in a language that’s compatible with, or compiled to
communicate with, the browser. The browser temporarily downloads that
code, and then, apart from the server, processes it. If it needs to request
additional information in response to user clicks, mouse-overs, etc. (called
“events”), a request is sent back to the server.

1.2.1 HOW DOES CLIENT-SIDE SCRIPTING WORK?

There is overlap between the two technologies as they work in tandem, but there
are core differences. Server-side scripting works in the back end of a site, which
the user doesn’t see. It creates a scaffolding for the site to access its database, all
the behind-the-scenes mechanics that organize and power a website. Client-side
code, however, handles what the user does see.

● Scripts are embedded within and interact with the HTML of your site,
selecting elements of it, then manipulating those elements to provide an
interactive experience.
● Scripts interact with a cascading style sheet (CSS) file that styles the way
the page looks.
● It dictates what work the server-side code is going to have to accomplish
(where utility should be built around these front-end functions), and returns
data that’s pulled from the site in a way that’s readable by the browser. For
example: If there’s a form for updating a profile, the back end is built to
pull specific data from the database to populate that form, while front-end
scripts populate the form with that information.
● Scripts put less stress on the server because they don’t require processing
on the server once they’re downloaded, just when post-backs are made.
“Post-backs” perform specific call-and-answers with the server-side code,
and respond to the user immediately.
1.3 SERVER-SIDE SCRIPTING

Server-side scripting is a technique used in web development which involves

employing scripts on a web server which produce a response customized for each
user's (client's) request to the website. The alternative is for the web server itself to
deliver a static web page. Scripts can be written in any of a number of server-side
scripting languages that are available. Server-side scripting is distinguished from
client-side scripting where embedded scripts, such as JavaScript, are run client-side
in a web browser, but both techniques are often used together.
Server-side scripting is often used to provide a customized interface for the user.
These scripts may assemble client characteristics for use in customizing the
response based on those characteristics, the user's requirements, access rights, etc.
Server-side scripting also enables the website owner to hide the source code that
generates the interface, whereas with client- side scripting, the user has access to
all the code received by the client. A down-side to the use of server-side scripting
is that the client needs to make further requests over the network to the server in
order to show new information to the user via the web browser. These requests can
slow down the experience for the user, place more load on the server, and prevent
use of the application when the user is disconnected from the server.
When the server serves data in a commonly used manner, for example
according to the HTTP or FTP protocols, users may have their choice of a number
of client programs (most modern web browsers can request and receive data using
both of those protocols). In the case of more specialized applications, programmers
may write their own server, client, and communications protocol, that can only be
used with one another.
1.4 DATABASE

A sub-component of the remote server, the database is a large series of data tables
used to store all the dynamic information generated or used within the website. For
example, the account information of a logged in user would be stored in the
database. Data is organized into rows, columns and tables, and it is indexed to
make it easier to find relevant information. Data gets updated, expanded and
deleted as new information is added. Databases process workloads to create and
update themselves, querying the data they contain and running applications against
it.

Computer databases typically contain aggregations of data records or files, such as

sales transactions, product catalogs and inventories, and customer profiles.
Typically, a database manager provides users with the ability to control read/write
access, specify report generation and analyse usage. Some databases offer ACID
(atomicity, consistency, isolation and durability) compliance to guarantee that data
is consistent and that transactions are complete. Databases are prevalent in large
mainframe systems, but are also present in smaller distributed workstations and
midrange systems, such as IBM's AS/400 and personal computers.

1.4.1 RELATIONAL DATABASE

A relational database, invented by E.F. Codd at IBM in 1970, is a tabular database
in which data is defined so that it can be reorganized and accessed in a number of
different ways.
Relational databases are made up of a set of tables with data that fits into a
predefined category. Each table has at least one data category in a column, and
each row has a certain data instance for the categories which are defined in the
columns.

The Structured Query Language (SQL) is the standard user and application
program interface for a relational database. Relational databases are easy to extend,
and a new data category can be added after the original database creation without
requiring that you modify all the existing applications.

1.4.2 CLOUD DATABASE

A cloud database is a database that has been optimized or built for a virtualized
environment, either in a hybrid cloud, public cloud or private cloud. Cloud
databases provide benefits such as the ability to pay for storage capacity and
bandwidth on a per-use basis, and they provide scalability on demand, along with
high availability.

A cloud database also gives enterprises the opportunity to support business

applications in a software-as-a-service deployment.
 1.5 HOW A WEBSITE WORKS?

To know how a website works, one must be aware of some common web terms. A
website can be generalized as a Web app that requires a Web browser to work.
When you type a web address into your browser:

● The browser goes to the DNS server, and finds the real address of the server that
the website lives on.
● The browser sends an HTTP request message to the server, asking it to send a copy
of the website to the client. This message, and all other data sent between the client
and the server, is sent across your internet connection using TCP/IP.
● Provided the server approves the client's request, the server sends the client a "200
OK" message, which means "Of course you can look at that website! Here it is",
and then starts sending the website's files to the browser as a series of small chunks
called data packets.
● The browser assembles the small chunks into a complete website and displays it to you.

1.5.1 IP ADDRESS

An Internet Protocol address (IP address) is a numerical label assigned to each

device connected to a computer network that uses the Internet Protocol for
communication. An IP address serves two principal functions: host or network
interface identification and location addressing.
Internet Protocol version 4 (IPv4) defines an IP address as a 32-bit number.
However, because of the growth of the Internet and the depletion of available IPv4
addresses, a new version of IP (IPv6), using 128 bits for the IP address, was
developed in 1995, and standardized in December 1998. In July 2017, a final
definition of the protocol was published. IPv6 deployment has been ongoing since
the mid-2000s.
1.5.2 DOMAIN
A domain name is an identification string that defines a realm of administrative
autonomy, authority or control within the Internet. Domain names are formed by
the rules and procedures of the Domain Name System (DNS). Any name registered
in the DNS is a domain name. Domain names are used in various networking
contexts and for application-specific naming and addressing purposes. In general, a
domain name represents an Internet Protocol (IP) resource, such as a personal
computer used to access the Internet, a server computer hosting a web site, or the
web site itself or any other service communicated via the Internet.
1.5.3 ISP
An Internet service provider (ISP) is an organization that provides services for
accessing, using, or participating in the Internet. Internet service providers may be
organized in various forms, such as commercial, community-owned, non-profit, or
otherwise privately owned.
Internet services typically provided by ISPs include Internet access, Internet
transit, domain name registration, web hosting, UseNet service, and colocation.
1.5.4 DNS
Domain Name Servers are like an address book for websites. When you type a web
address in your browser, the browser looks at the DNS to find the web site's real
address before it can retrieve the website. The browser needs to find out which
server the website lives on, so it can send HTTP messages to the right place. This
is like looking up the address of the shop so you can access it.
1.5.5 TCP/IP
The Internet protocol suite is the conceptual model and set of communications
protocols used on the Internet and similar computer networks. It is commonly
known as TCP/IP because the foundational protocols in the suite are the
Transmission Control Protocol (TCP) and the Internet Protocol (IP).The
Internet protocol suite provides end-to-end data communication specifying how
data should be packetized, addressed, transmitted, routed, and received.
1.5.6 NETWORK PROTOCOLS
The Hypertext Transfer Protocol (HTTP) is an application protocol for
distributed, collaborative, and hypermedia information systems. HTTP is the
foundation of data communication for the World Wide Web. Hypertext is
structured text that uses logical links (hyperlinks) between nodes containing text.
HTTP is the protocol to exchange or transfer hypertext.
Simple Mail Transfer Protocol (SMTP) is an Internet standard for electronic
mail (email) transmission. First defined by RFC 821 in 1982, it was updated in
2008 with Extended SMTP additions by RFC 5321, which is the protocol in
widespread use today.
Although electronic mail servers and other mail transfer agents use SMTP to send
and receive mail messages, user-level client mail applications typically use SMTP
only for sending messages to a mail server for relaying. For retrieving messages,
client applications usually use either IMAP or POP3.

The File Transfer Program (FTP) is a standard network protocol used for the
transfer of computer files between a client and server on a computer network.
FTP is built on a client-server model architecture separate control and data
connections between the client and the server. FTP users may authenticate
themselves with a clear- text sign-in protocol, normally in the form of a username
and password, but can connect anonymously if the server is configured to allow it.
For secure transmission that protects the username and password, and
encrypts the content, FTP is often secured with SSL/TLS (FTPS)
or replaced with SSH File Transfer Protocol (SFTP).
1.6 WEBSITE ARCHITECTURE
Website architecture is the planning and design of the technical, functional and
visual components of a website - before it is designed, developed and deployed. It
is used by website designers and developers as a means to design and develop a
website.
Website architecture is used in creating a logical layout of a website in line with
the user and/or business requirements. It defines the different components that will
make up a website and the services each component or the website will provide in
whole.
Some of the factors that are part of website architecture are:
● Technical constraints such as server, storage. memory and communication
interfaces.
● Functional aspects such as the type of services or processes the website will
provide.
● Visual appearance, i.e. the user interface, colours, buttons and other visual
design elements.
● Security parameters i.e. how the website will ensure secure access control
and transactions.
2. DIFFERENCE BETWEEN WEB DESIGN & WEB
DEVELOPMENT

In essence, web design refers to both the aesthetic portion of the website and its
usability. Web designers use various design programs such as Adobe Photoshop to
create the layout and other visual elements of the website. Web Developers on the
other hand, take a website design and actually make a functioning website from it.
Web developers use HTML, CSS, JavaScript, PHP and other programming
languages to bring to life the design files.

Web designers must always begin by considering a client’s website objectives and
then move on to an Information Architecture (IA) to set a website’s information
hierarchy and help guide the design process. Next, web designers can start creating
wireframes and finally move to the design stage. Web designers may use several
basic design principles to achieve an aesthetically pleasing layout which also offers
excellent user experience.

Web developers, sometimes called programmers, take the design created and build
a fully functioning website. To put it (very) simply, think of the design as a non-
interactive “picture” of a website. Developers take that design and break it up into
its components. They then either use just HTML or a more dynamic approach
incorporating programming languages such as PHP to develop the various website
pages. More advanced web developers may choose to utilize a Content
Management System (CMS) like WordPress or Joomla in order to streamline
development and allow clients an easy way to maintain and update their website.
Web developers may convert a static layout into a dynamic website by using image
and content sliders, active states for links and buttons, and other interactive
elements.
3. FRONT END DEVELOPMENT
Front-end web development is the practice of converting data to graphical
interface for user to view and interact with data through digital interaction using
HTML, CSS and JavaScript. There are several tools and platform (WordPress,
Magento etc..) available that can be used to develop the front end of a website, and
understanding which tools are best fit for specific tasks marks the difference
between developing a hacked site and a well-designed, scalable site.

3.1 HTML
Hypertext Markup Language (HTML) is the standard markup language for
creating web pages and web applications. With Cascading Style Sheets (CSS) and
JavaScript, it forms a triad of cornerstone technologies for the World Wide Web.
Web browsers receive HTML documents from a web server or from local
storage and render the documents into multimedia web pages. HTML describes
the structure of a web page semantically and originally included cues for the
appearance of the document.
HTML elements are the building blocks of HTML pages. With HTML
constructs, images and other objects such as interactive forms may be embedded
into the rendered page. HTML provides a means to create structured documents by
denoting structural semantics for text such as headings, paragraphs, lists, links,
quotes and other items. HTML elements are delineated by tags, written
using angle brackets. Tags such as <img /> and <input /> directly introduce
content into the page. Other tags such as <p> surround and provide
information about document text and may include other tags as sub-elements.
Browsers do not display the HTML tags, but use them to interpret the content of
the page.
HTML can embed programs written in a scripting language such as JavaScript,
which affects the behaviour and content of web pages. Inclusion of CSS defines
the look and layout of content.
3.1.1 HTML TAGS
HTML documents imply a structure of nested HTML elements. These are
indicated in the document by HTML tags, enclosed in angle brackets thus: <p>.
In the simple, general case, the extent of an element is indicated by a pair of tags: a
"start tag" <p> and "end tag" </p>. The text content of the element, if any, is
placed between these tags.
Tags may also enclose further tag markup between the start and end, including a
mixture of tags and text. This indicates further (nested) elements, as children of the
parent element.
The start tag may also include attributes within the tag. These indicate other
information, such as identifiers for sections within the document, identifiers used
to bind style information to the presentation of the document, and for some tags
such as the <img> used to embed images, the reference to the image resource.
Tag Description

<!--...--> Defines a comment

<!DOCTYPE> Defines the document type

<a> Defines a hyperlink

<audio> Defines sound content

<body> Defines the document's body

<br> Defines a single line break

<button> Defines a clickable button

<div> Defines a section in a document

<dl> Defines a description list

<dt> Defines a term/name in a description list

<em> Defines emphasized text

<embed> Defines a container for an external (non-HTML) application

<form> Defines an HTML form for user input

<h1> to <h6> Defines HTML headings

<head> Defines information about the document

<header> Defines a header for a document or section

<hr> Defines a thematic change in the content

<html> Defines the root of an HTML document

<i> Defines a part of text in an alternate voice or mood

<input> Defines an input control

<li> Defines a list item

<link> Defines the relationship between a document and an external resource

(most used to link to style sheets)
<main> Specifies the main content of a document

<meta> Defines metadata about an HTML document

<nav> Defines navigation links

<ol> Defines an ordered list

<output> Defines the result of a calculation

<p> Defines a paragraph

<param> Defines a parameter for an object

<script> Defines a client-side script

<section> Defines a section in a document

<select> Defines a drop-down list

<source> Defines multiple media resources for media elements (<video> and
<audio>)

<strong> Defines important text

<style> Defines style information for a document

<sub> Defines subscripted text

<td> Defines a cell in a table

<template> Defines a template

<textarea> Defines a multiline input control (text area)

<th> Defines a header cell in a table

<title> Defines a title for the document

<tr> Defines a row in a table

<u> Defines text that should be stylistically different from normal text

<ul> Defines an unordered list

<var> Defines a variable

<video> Defines a video or movie

3.2CASCADING STYLE SHEETS(CSS)

Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation of a document written in a markup language like
HTML. CSS is a cornerstone technology of the World Wide Web, alongside
HTML and JavaScript. CSS is designed to enable the separation of presentation
and content, including layout, colors, and fonts. This separation can improve
content accessibility, provide more flexibility and control in the specification of
presentation characteristics, enable multiple web pages to share formatting by
specifying the relevant CSS in a separate .css file, and reduce complexity and
repetition in the structural content.
Separation of formatting and content also makes it feasible to present the same
markup page in different styles for different rendering methods, such as on-screen,
in print, by voice (via speech-based browser or screen reader), and on Braille-
based tactile devices. CSS also has rules for alternate formatting if the content
is accessed on a mobile device. The name cascading comes from the specified
priority scheme to determine which style rule applies if more than one rule
matches a particular element. This cascading priority scheme is predictable.
CSS has a simple syntax and uses a number of English keywords to specify the
names of various style properties. A style sheet consists of a list of rules. Each rule
or rule-set consists of one or more selectors, and a declaration block.
3.2.1 SELECTOR
In CSS, selectors declare which part of the markup a style applies to by matching
tags and attributes in the markup itself.
Selectors may apply to:

● all elements of a specific type, e.g. the second-level headers h2

● elements specified by attribute, in particular:
● id: an identifier unique within the document
● class: an identifier that can annotate multiple elements in a document
● elements depending on how they are placed relative to others in the document tree.
Classes and IDs are case-sensitive, start with letters, and can include alphanumeric
characters and underscores. A class may apply to any number of instances of any
elements. An ID may only be applied to a single element.
Pseudo-classes are used in CSS selectors to permit formatting based on
information that is not contained in the document tree. One example of a widely
used pseudo-class is: hover, which identifies content only when the user “points
to” the visible element, usually by holding the mouse cursor over it. It
is appended to a selector as in a:hover or #elementid:hover. A
pseudo-class classifies document elements, such as :link or :visited, whereas
a pseudo-element makes a selection that may consist of partial elements, such as
::first-line or ::first-letter.
Selectors may be combined in many ways to achieve great specificity and
flexibility.[7] Multiple selectors may be joined in a spaced list to specify elements
by location, element type, id, class, or any combination thereof. The order of the
selectors is important. For example, div .myClass {color: red;} applies to all
elements of class myClass that are inside div elements, whereas .myClass div
{color: red;} applies to all div elements that are in elements of class myClass.

3.2.2 PROPERTIES

align-content Specifies the alignment between the lines inside a flexible

container when the items do not use all available space

align-items Specifies the alignment for items inside a flexible container

align-self Specifies the alignment for selected items inside a flexible

container

all Resets all properties (except unicode-bidi and direction)

animation A shorthand property for all the animation-* properties

background-color Specifies the background color of an element

background-image Specifies one or more background images for an element

background-origin Specifies the origin position of a background image

background-position Specifies the position of a background image

background-repeat Sets if/how a background image will be repeated

background-size Specifies the size of the background images

border A shorthand property for border-width, border-style and border-

color

flex A shorthand property for the flex-grow, flex-shrink, and the flex-
basis properties
flex-basis Specifies the initial length of a flexible item

flex-direction Specifies the direction of the flexible items

3.3 JAVASCRIPT
JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented
language with first-class functions, and is best known as the scripting language for
Web pages, but it's used in many non-browser environments as well. It is a
prototype-based, multi-paradigm scripting language that is dynamic, and supports
object-oriented, imperative, and functional programming styles.
JavaScript runs on the client side of the web, which can be used to design /
program how the web pages behave on the occurrence of an event. JavaScript is an
easy to learn and also powerful scripting language, widely used for controlling web
page behaviour.

Contrary to popular misconception, JavaScript is not "Interpreted Java". In a

nutshell, JavaScript is a dynamic scripting language supporting prototype based
object construction. The basic syntax is intentionally similar to both Java and C++
to reduce the number of new concepts required to learn the language.
Language constructs, such as if statements, for and while loops, and switch
and try ... catch blocks function the same as in these languages (or nearly so).
JavaScript can function as both a procedural and an object oriented language.
Objects are created programmatically in JavaScript, by attaching methods and
properties to otherwise empty objects at run time, as opposed to the syntactic class
definitions common in compiled languages like C++ and Java. Once an object has
been constructed it can be used as a blueprint (or prototype) for creating similar
objects.
JavaScript's dynamic capabilities include runtime object construction, variable
parameter lists, function variables, dynamic script creation (via eval), object
introspection (via for ... in), and source code recovery (JavaScript programs can
decompile function bodies back into their source text).

3.3.1 FUNCTIONS
A JavaScript function is a block of code designed to perform a particular task and
is executed when "something" invokes it .
Syntax
A JavaScript function is defined with the function keyword, followed by a name,
followed by parentheses ().
Function names can contain letters, digits, underscores, and dollar signs (same
rules as variables).
The parentheses may include parameter names separated by
commas:
(parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}

function myFunction(p1,p2)
{
return p1 * p2; // The function returns the product of p1 and p2
}

3.3.2 LOOPS

Loops can execute a block of code a number of times. Loops are handy, if we want
to run the same code over and over again, each time with a different value.
Often this is the case when working with arrays:
Instead of writing:

text +=
cars[0] +
"<br>"; text
+= cars[1] +
"<br>"; text
+= cars[2] +
"<br>"; text
+= cars[3] +
"<br>"; text
+= cars[4] +
"<br>"; text
+= cars[5] +
"<br>";
We can write:

var i;
for (i = 0; i <
cars.length; i++)
{ text += cars[i] +
"<br>";
}

JavaScript supports different kinds of loops:

● for - loops through a block of code a number of times

● for/in - loops through the properties of an object
● while - loops through a block of code while a specified condition is true
● do/while - also loops through a block of code while a specified condition is true

3.4 JSON
In computing, JavaScript Object Notation or JSON is an open-standard file
format that uses human-readable text to transmit data objects consisting of
attribute–value pairs and array data types (or any other serializable value). It
is a very common data format used for asynchronous browser–server
communication, including as a replacement for XML in some AJAX-style systems.
JSON is a language-independent data format. It was derived from JavaScript, but
as of 2017 many programming languages include code to generate and
parseJSON-format data. The official Internet media type for JSON is
application/json. JSON filenames use the extension .json.
3.4.1 DATA TYPES & SYNTAX
JSON's basic data types are:

● Number: a signed decimal number that may contain a fractional part and may
use exponential E notation, but cannot include non-numbers such as NaN. The
format makes no distinction between integer and floating-point. JavaScript
uses a double-precision floating-point format for all its numeric values, but
other languages implementing JSON may encode numbers differently.
● String: a sequence of zero or more Unicode characters. Strings are delimited
with double- quotation marks and support a backslash escaping syntax.
● Boolean: either of the values true or false
● Array: an ordered list of zero or more values, each of which may be of any
type. Arrays use square bracket notation and elements are comma-separated.
● Object: an unordered collection of name–value pairs where the names (also
called keys) are strings. Since objects are intended to represent associative
arrays,[14] it is recommended, though not required, [15] that each key is unique
within an object. Objects are delimited with curly brackets and use commas to
separate each pair, while within each pair the colon ':' character separates the
key or name from its value.
● null: An empty value, using the word null
Limited whitespace is allowed and ignored around or between syntactic elements
(values and punctuation, but not within a string value). Only four specific
characters are considered whitespace for this purpose: space, horizontal tab, line
feed, and carriage return. In particular, the byte order mark must not be generated
by a conforming implementation (though it may be accepted when parsing JSON).
JSON does not provide syntax for comments. The following example shows a
possible JSON representation describing a person.
{
"firstName": "John",
"lastName
":
"Smith",
"isAlive":
true,
"age": 27,
"address": {
"streetAddress": "21
2nd Street", "city":
"New York",
"state": "NY",
"postalCode":
"10021-3100"
},
"phoneNumbers": [
{
"type": "home",
"number": "212 555-1234"
},
{
"type": "office",
 "number": "646
555-4567"
},
{
 "type":
"mobile",
"number": "123
456-7890"
}
],
"chil
dren"
: [],
"spo
use":
null
}
3.4.2 USING JSON IN JAVASCRIPT
Any browser supporting ECMAScript fifth edition at minimum is able to parse
JSON (as of 2018, all major browsers support at least fifth edition ECMAScript).
Parsing JSON, using the JSON.parse(input) DOM API, however, is not
intrinsically safe and should not be performed without—ideally both—safeguards
or relative certainty of the provenance of the JSON data to be parsed. In cases
where CORS is not possible, a common workaround minimal safeguard includes
the use of JSONP, or JSON with padding, which wraps the JSON data in an
additional set of curly braces which renders the output of the parsed JSON as an
object and not itself, the inputted JSON, as simultaneously valid and potentially
dangerous JavaScript script.
var p = JSON.parse(json_string);

3.5 DOCUMENT OBJECT MODEL(DOM)

The DOM is cross-platform and language independent application
programming interface that treats an HTML, XHTML, or XML document as a
tree structure wherein each node is an object representing a part of the document.
The objects can be manipulated programmatically and any visible changes
occurring as a result may then be reflected in the display of the document.
The principal standardization of DOM was handled by the World Wide Web
Consortium, which last developed a recommendation in 2004.
3.5.1 APPLI
CATIONS
Web
browsers
To render a document such as an HTML page, most web browsers use an internal
model similar to the DOM. The nodes of every document are organized in a tree
structure, called the DOM tree, with the topmost node named as "Document
object". When an HTML page is rendered in browsers, the browser downloads the
HTML into local memory and automatically parses it to display the page on
screen.
JavaScript
When a web page is loaded, the browser creates a Document Object Model of the
page, which is an object oriented representation of an HTML document, that acts
as an interface between JavaScript and the document itself and allows the creation
of dynamic web pages:

● JavaScript can add, change, and remove all of the HTML elements and
attributes in the page.
● JavaScript can change all of the CSS styles in the page.
● JavaScript can react to all of the existing events in the page.
● JavaScript can create new events within the page.
.

3.6 JQUERY
jQuery is a cross-platform JavaScript library designed to simplify the client-
side scripting of HTML. It is free, open-source software using the
permissive MIT License. Web analysis indicates that it is the most widely
deployed JavaScript library by a large margin.
jQuery's syntax is designed to make it easier to navigate a document, select DOM
elements, create animations, handle events, and develop Ajax applications. jQuery
also provides capabilities for developers to create plug-ins on top of the JavaScript
library. This enables developers to create abstractions for low-level interaction and
animation, advanced effects and high-level, theme able widgets. The modular
approach to the jQuery library allows the creation of powerful dynamic web pages
and Web applications.
jQuery, at its core, is a Document Object Model (DOM) manipulation library. The
DOM is a tree-structure representation of all the elements of a Web page. jQuery
simplifies the syntax for finding, selecting, and manipulating these DOM elements.
For example, jQuery can be used for finding an element in the document with a
certain property (e.g. all elements with an h1 tag), changing one or more of its
attributes (e.g. color, visibility), or making it respond to an event (e.g. a mouse
click).
jQuery also provides a paradigm for event handling that goes beyond basic DOM
element selection and manipulation. The event assignment and the event callback
function definition are done in a single step in a single location in the code. jQuery
also aims to incorporate other highly used JavaScript functionality (e.g. fade ins
and fade outs when hiding elements, animations by manipulating CSS properties).
The principles of developing with jQuery are:

● Separation of JavaScript and HTML: The jQuery library provides simple

syntax for adding event handlers to the DOM using JavaScript, rather than
adding HTML event attributes to call JavaScript functions. Thus, it encourages
developers to completely separate JavaScript code from HTML markup.
● Brevity and clarity: jQuery promotes brevity and clarity with features like
"chainable" functions and shorthand function names.
● Elimination of cross-browser incompatibilities: The JavaScript engines of
different browsers differ slightly so JavaScript code that works for one browser
may not work for another. Like other JavaScript toolkits, jQuery handles all
these cross-browser inconsistencies and provides a consistent interface that
works across different browsers.
● Extensibility: New events, elements, and methods can be easily added and then
reused as a plugin.

JQUERY SYNTAX
The jQuery syntax is tailor-made for selecting HTML elements and
performing some action on the element(s).
Basic syntax is: $(selector).action()

● A $ sign to define/access jQuery

● A (selector) to "query (or find)" HTML elements
● A jQuery action() to be performed on the element(s)
 3.7 AJAX

Ajax (Asynchronous JavaScript And XML) is a set of Web development

techniques using many Web technologies on the client side to create asynchronous
Web applications. With Ajax, Web applications can send and retrieve data from a
server asynchronously (in the background) without interfering with the display and
behavior of the existing page. By decoupling the data interchange layer from the
presentation layer, Ajax allows Web pages, and by extension Web applications, to
change content dynamically without the need to reload the entire page. [3] In
practice, modern implementations commonly utilize JSON instead of XML due to
the advantages of JSON being native to JavaScript.[4]
Ajax is not a single technology, but rather a group of technologies. HTML and
CSS can be used in combination to mark up and style information. The webpage
can then be modified by JavaScript to dynamically display – and allow the user to
interact with — the new information. The built-in XMLHttpRequest object within
JavaScript is commonly used to execute Ajax on webpages allowing websites to
load content onto the screen without refreshing the page. Ajax is not a new
technology, or different language, just existing technologies used in new ways.
An example of a simple Ajax request using the GET method, written in
JavaScript. get-ajax-data.js:

// This is the client-side script.

// Initialize the HTTP request.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');

// Track the state changes of the request.

xhr.onreadystatechange = function () {
var DONE = 4; // readyState 4 means the request is done.
var OK = 200; // status 200 is a successful return.
if (xhr.readyState === DONE) {
if (xhr.status === OK) {
console.log(xhr.responseText); // 'This is the output.'
} else {
console.log('Error: ' + xhr.status); // An error occurred during
the request.
}
}
};

// Send the request to send-ajax-data.php

xhr.send(null);
3.8 BOOTSTRAP
Bootstrap is a free and open-source front-end framework for designing websites
and web applications. It contains HTML- and CSS-based design templates for
typography, forms, buttons, navigation and other interface components, as well as
optional JavaScript extensions. Unlike many earlier web frameworks, it concerns
itself with front-end development only.
Bootstrap is modular and consists of a series of Less stylesheets that implement the
various components of the toolkit. These stylesheets are generally compiled into a
bundle and included in web pages, but individual components can be included or
removed. Bootstrap provides a number of configuration variables that control
things such as color and padding of various components.
Since Bootstrap 2, the Bootstrap documentation has included a customization
wizard which generates a customized version of Bootstrap based on the requested
components and various settings. As of Bootstrap 4, Sass is used instead of Less
for the stylesheets. Each Bootstrap component consists of an HTML structure, CSS
declarations, and in some cases accompanying JavaScript code.
Grid system and responsive design comes standard with an 1170 pixel wide grid
layout. Alternatively, the developer can use a variable-width layout. For both
cases, the toolkit has four variations to make use of different resolutions and types
of devices: mobile phones, portrait and landscape, tablets and PCs with low and
high resolution. Each variation adjusts the width of the columns.

WHY USE BOOTSTRAP?

● Mobile first approach − Bootstrap 3, framework consists of Mobile first
styles throughout the entire library instead them of in separate files.
● Browser Support − It is supported by all popular browsers.

● Easy to get started − With just the knowledge of HTML and CSS anyone
can get started with Bootstrap. Also the Bootstrap official site has a good
documentation.
● Responsive design − Bootstrap's responsive CSS adjusts to Desktops,
Tablets and Mobiles. More about the responsive design is in the chapter
Bootstrap Responsive Design.

● Provides a clean and uniform solution for building an interface for developers.
● It contains beautiful and functional built-in components which are easy to
customize.
● It also provides web based customization.
● And best of all it is an open source.
4 BACKEND DEVELOPMENT
The backend of a web application is an enabler for a frontend experience. An
application’s frontend may be the most beautifully crafted web page, but if the
application itself doesn’t work, the application will be a failure. The backend of an
application is responsible for things like calculations, business logic, database
interactions, and performance. Most of the code that is required to make an
application work will be done on the backend. Backend code is run on the server,
as opposed to the client. This means that backend developers not only need to
understand programming languages and databases, but they must have an
understanding of server architecture as well. If an application is slow, crashes
often, or constantly throws errors at users, it’s likely because of backend problems.

Backend development is not all ones and zeros though. Much like frontend
development, backend development has a human aspect to it as well. Since most of
the code for an application is written on the backend, it should be easy to
understand and work with. Most backend languages – like Ruby and Python – have
standardized styles and idioms that make reading and writing code more efficient
and enjoyable.

4.1 RUBY

Ruby is a dynamic, interpreted, reflective, object-oriented, general-purpose

programming language. It was designed and developed in the mid-1990s by
Yukihiro "Matz" Matsumoto in Japan. Ruby is a programming language created
to be fun and efficient. Ruby syntax is easy to read, even for people who don’t
know Ruby. Ruby was thrust into the mainstream thanks to Ruby on Rails, which
is a framework (built with Ruby) for building web applications. Ruby on Rails is
one of the most popular web development tools for small businesses and startups.
Companies like Twitter, Hulu and Github all started and / or still use Ruby on
Rails in some capacity. Ruby can be used to code business logic, calculate data and
distribute servers for better performance.

Ruby is object-oriented: every value is an object, including classes and instances of

types that many other languages designate as primitives (such as integers,
booleans, and "null"). Variables always hold references to objects. Every function
is a method and methods are always called on an object. Methods defined at the
top level scope become methods of the Object class. Since this class is an ancestor
of every other class, such methods can be called on any object. They are also
visible in all scopes, effectively serving as "global" procedures. Ruby supports
inheritance with dynamic dispatch, mixins and singleton methods (belonging to,
and defined for, a single instance rather than being defined on the class). Though
Ruby does not support multiple inheritance, classes can import modules as mixins.
Ruby has been described as a multi-paradigm programming language: it allows
procedural programming (defining functions/variables outside classes makes them
part of the root, 'self' Object), with object orientation (everything is an object) or
functional programming (it has anonymous functions, closures, and
continuations; statements all have values, and functions return the last evaluation).
 4.1.1 SYNTAX
The syntax of Ruby is broadly similar to that of Perl and Python. Class and method
definitions are signaled by keywords, whereas code blocks can be both defined by
keywords or braces. In contrast to Perl, variables are not obligatorily prefixed with
a sigil. When used, the sigil changes the semantics of scope of the variable. For
practical purposes there is no distinction between expressions and statements. Line
breaks are significant and taken as the end of a statement; a semicolon may be
equivalently used. Unlike Python, indentation is not significant.
One of the differences from Python and Perl is that Ruby keeps all of its instance
variables completely private to the class and only exposes them through accessor
methods (attr_writer, attr_reader, etc.). Unlike the "getter" and "setter" methods of
other languages like C++ or Java, accessor methods in Ruby can be created with
a single line of code via metaprogramming; however, accessor methods can
also be created in the traditional fashion of C++ and Java. As invocation of these
methods does not require the use of parentheses, it is trivial to change an instance
variable into a full function, without modifying a single line of calling code or
having to do any refactoring achieving similar functionality to C# and VB.NET
property members.
Python's property descriptors are similar, but come with a tradeoff in the
development process. If one begins in Python by using a publicly exposed instance
variable, and later changes the implementation to use a private instance variable
exposed through a property descriptor, code internal to the class may need to be
adjusted to use the private variable rather than the public property. Ruby’s design
forces all instance variables to be private, but also provides a simple way to declare
set and get methods. This is in keeping with the idea that in Ruby, one never
directly accesses the internal members of a class from outside the class; rather, one
passes a message to the class and receives a response.
4.1.2 EXAMPLES
Hello world example:

puts 'Hello World!'

Some basic Ruby code:

# Everything, including a literal, is an object, so this works:

-199.abs # => 199
'ice is nice'.length # => 11
'ruby is cool.'.index('u') # => 1
"Nice Day Isn't It?".downcase.split('').uniq.sort.join
# => " '?acdeinsty"

Input:

print 'Please type name >'

name = gets.chomp
puts "Hello #{name}."

Conversions:
 puts 'Give me a number'
number = gets.chomp
puts number.to_i
output_number = number.to_i + 1
puts output_number.to_s + ' is a bigger number.'

4.1.2.1 Strings
There are a variety of ways to define
strings in Ruby. The following
assignments are equivalent:

a = "\nThis is a double-quoted string\n"

a = %Q{\nThis is a double-quoted string\n}
a = %{\nThis is a double-quoted string\n}
a = %/\nThis is a double-quoted string\n/
a = <<-BLOCK

This is a double-quoted string

BLOCK

4.1.2.1 Collections
Constructing and using an array:

a = [1, 'hi', 3.14, 1, 2, [4, 5]]

a[2] # => 3.14

a.[](2) # => 3.14
a.reverse # => [[4, 5], 2, 1, 3.14, 'hi', 1]
a.flatten.uniq # => [1, 'hi', 3.14, 2, 4, 5]

4.1.3 CLASSES
The following code defines a class named Person. In addition to initialize, the
usual constructor to create new objects, it has two methods: one to override the
<=> comparison operator (so Array#sort can sort by age) and the other to
override the to_s method (so Kernel#puts can format its output). Here,
attr_reader is an example of metaprogramming in Ruby: attr_accessordefines
getter and setter methods of instance variables, but attr_reader only
getter methods. The last evaluated statement in a method is its return value,

class Person
attr_reader :name, :age
allowing the omission of an explicit returnstatement.
 The preceding code prints three names in reverse age order:

Person is a constant and is a reference to a Class object.

def initialize(name, age) @name, @age = name, age end
def <=>(person) # the comparison operator for sorting
@age <=> person.age
end
def to_s
"#{@name} (#{@age})"
end end
group = [ Person.new("Bob", 33),
Person.new("Chris", 16),
Person.new("Ash", 23)
]
puts group.sort.reverse

Chris (16)
Bob (33)
Ash (23)
4.2 RUBY ON RAILS
Ruby on Rails, or Rails, is a server-side web application framework written in
Ruby under the MIT License. Rails is a model–view–controller (MVC)
framework, providing default structures for a database, a web service, and web
pages. It encourages and facilitates the use of web standards such as JSON or
XML for data transfer, and HTML, CSS and JavaScript for display and user
interfacing. In addition to MVC, Rails emphasizes the use of other well- known
software engineering patterns and paradigms, including convention over
configuration (CoC), don't repeat yourself (DRY), and the active record pattern.
Ruby on Rails' emergence in the 2000s greatly influenced web app development,
through innovative features such as seamless database table creations, migrations,
and scaffolding of views to enable rapid application development. Ruby on Rails'
influence on other web frameworks remains apparent today, with many
frameworks in other languages borrowing its ideas, including Django in Python,
Laravel in PHP, Phoenix in Elixir, and Sails.js in Node.js.
The Rails philosophy includes two major guiding principles:

● Don't Repeat Yourself: DRY is a principle of software development

which states that "Every piece of knowledge must have a single,
unambiguous, authoritative representation within a system." By not writing
the same information over and over again, our code is more maintainable,
more extensible, and less buggy.
● Convention Over Configuration: Rails has opinions about the best way to
do many things in a web application, and defaults to this set of conventions,
rather than require that you specify minutiae through endless configuration
files.

Ruby on Rails uses the model–view–controller (MVC) pattern to organize

application programming.
In a default configuration, a model in the Ruby on Rails framework maps to a table
in a database and to a Ruby file. For example, a model class User will usually be
defined in the file 'user.rb' in the app/models directory, and linked to the table
'users' in the database. While developers are free to ignore this convention and
choose differing names for their models, files, and database table, this is not
common practice and is usually discouraged in accordance with the "convention-
over-configuration" philosophy.
A controller is a server-side component of Rails that responds to external requests
from the web server to the application, by determining which view file to render.
The controller may also have to query one or more models for information and
pass these on to the view. For example, in an airline reservation system, a
controller implementing a flight-search function would need to query a model
representing individual flights to find flights matching the search, and might also
need to query models representing airports and airlines to find related secondary
data. The controller might then pass some subset of the flight data to the
corresponding view, which would contain a mixture of static HTML and logic that
use the flight data to create an HTML document containing a table with one row
per flight. A controller may provide one or more actions. In Ruby on Rails, an
action is typically a basic unit that describes how to respond to a specific external
web-browser request. Also, note that the controller/action will be accessible for
external web requests only if a corresponding route is mapped to it. Rails
encourages developers to use RESTful routes, which include actions such as
create, new, edit, update, destroy, show, and index. These mappings of incoming
requests/routes to controller actions can be easily set up in the routes.rb
configuration file.
A view in the default configuration of Rails is an erb file, which is evaluated and
converted to HTML at run-time. Alternatively, many other templating systems can
be used for views.
Ruby on Rails includes tools that make common development tasks easier "out-of-
the-box", such as scaffolding that can automatically construct some of the models
and views needed for a basic website. Also included are WEBrick, a simple Ruby
web server that is distributed with Ruby, and Rake, a build system, distributed as a
gem. Together with Ruby on Rails, these tools provide a basic development
environment.

4.2.1 MODEL-VIEW-CONTROLLER
Model–view–controller 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.
Traditionally used for desktop graphical user interfaces (GUIs), this architecture
has become popular for designing web applications and even mobile, desktop and
other clients.[3] Popular programming languages like Java, C#, Ruby, PHP have
MVC frameworks that are used in web application development straight out of the
box.
MVC expresses the "core of the solution" to a problem while allowing it to be
adapted for each system. Particular MVC architectures can vary significantly from
the traditional description here.
Components

● The model is the central component of the pattern. It is the application's

dynamic data structure, independent of the user interface. [6] It directly manages
the data, logic and rules of the application.
● A view can be any output representation of information, such as a chart or a
diagram. Multiple views of the same information are possible, such as a bar
chart for management and a tabular view for accountants.
● The third part or section, the controller, accepts input and converts it to
commands for the model or view.

Interactions
In addition to dividing the application into three kinds of components, the model–
view– controller design defines the interactions between them.[8]

● The model is responsible for managing the data of the application. It receives
user input from the controller.
● The view means presentation of the model in a particular format.
● The controller responds to the user input and performs interactions on the data
model objects. The controller receives the input, optionally validates it and
then passes the input to the model.
4.2.1.1 Advantages &
Disadvantages
Advantages
● Simultaneous development – Multiple developers can work simultaneously on
the model, controller and views.

● High cohesion – MVC enables logical grouping of related actions on a

controller together. The views for a specific model are also grouped together.
● Low coupling – The very nature of the MVC framework is such that there is
low coupling among models, views or controllers
● Ease of modification – Because of the separation of responsibilities, future
development or modification is easier
● Multiple views for a model – Models can have multiple views

Disadvantages

● Code navigability – The framework navigation can be complex because it

introduces new layers of abstraction and requires users to adapt to the
decomposition criteria of MVC.
● Multi-artifact consistency – Decomposing a feature into three artifacts causes
scattering. Thus, requiring developers to maintain the consistency of multiple
representations at once.
● Pronounced learning curve – Knowledge on multiple technologies becomes
the norm. Developers using MVC need to be skilled in multiple technologies.

4.2.2 FRAMEWORK STRUCTURE

Ruby on Rails is separated into various packages, namely ActiveRecord (an object-
relational mapping system for database access), Active Resource (provides web
services), Action Pack, Active Support and Action Mailer. Prior to version 2.0,
Ruby on Rails also included the Action Web Service package that is now replaced
by Active Resource. Apart from standard packages, developers can make plugins
to extend existing packages. Earlier Rails supported plugins within their own
custom framework; version 3.2 deprecates these in favor of standard Ruby "gems".
4.2.2.1 ACTIVE RECORD
This guide will get you started with models, persistence to database, and the Active
Record pattern and library.
4.2.2.1.1 What is Active Record?
Active Record is the M in MVC - the model - which is the layer of the system
responsible for representing business data and logic. Active Record facilitates the
creation and use of business objects whose data requires persistent storage to a
database. It is an implementation of the Active Record pattern which itself is a
description of an Object Relational Mapping system.
4.2.2.1.2 Object Relational Mapping

Object Relational Mapping, commonly referred to as its abbreviation ORM, is a

technique that connects the rich objects of an application to tables in a relational
database management system. Using ORM, the properties and relationships of the
objects in an application can be easily stored and retrieved from a database without
writing SQL statements directly and with less overall database access code.

4.2.2.1.3 CRUD: Reading and Writing Data

CRUD is an acronym for the four verbs we use to operate on data: Create, Read,
Update and Delete. Active Record automatically creates methods to allow an
application to read and manipulate data stored within its tables.

4.2.2.1.3.1 Create

Active Record objects can be created from a hash, a block or have their attributes
manually set after creation. The new method will return a new object while create
will return the object and save it to the database.
For example, given a model User with attributes of name and occupation, the
create method call will create and save a new record into the database:
user = User.create(name: "David", occupation: "Code Artist")
4.2.2.1.3.2 Read

Active Record provides a rich API for accessing data within a database.
Below are a few examples of different data access methods provided by
Active Record.

users = User.all # return a collection with all users

4.2.2.1.3.3 Update

Once an Active Record object has been retrieved, its attributes can be
modified and it can be saved to the database.
user = User.find_by(name:
'David') user.name =
'Dave'
user.save

4.2.2.1.3.4 Delete
Once retrieved an Active Record object can be destroyed which removes it from
the database. User.first.destroy #destroys first user

If you'd like to delete several records in bulk, you may use

destroy_all method: User.all.destroy #destroys all users
4.3 API’s
An Application programming interface (API) is a set of subroutine definitions,
protocols, and tools for building software and applications. A Web API is an
application programming interface for either a web server or a web browser. It is a
web development concept, usually limited to a web application's client-side
(including any web frameworks being used), and thus usually does not include web
server or browser implementation details such as SAPIs or APIs unless publicly
accessible by a remote web application.

A server-side web API is a programmatic interface consisting of one or more

publicly exposed endpoints to a defined request–response message system,
typically expressed in JSON or XML, which is exposed via the web—most
commonly by means of an HTTP- based web server. Mashups are web
applications which combine the use of multiple server- side web APIs. Webhooks
are server-side web APIs that take as input an Uniform Resource Identifier (URI)
that is designed to be used like a remote named pipe or a type of
callback such that the server acts as a client to dereference the provided URI and
trigger an event on another server which handles this event thus providing a type of
peer-to-peer IPC.

A client-side web API is a programmatic interface to extend functionality within a

web browser or other HTTP client. Originally these were most commonly in the
form of native plug-in extensions however most newer ones target standardized
JavaScript bindings.
The Mozilla Foundation created their WebAPI specification which is designed to
help replace native mobile applications with HTML5 applications.
Google created their Native Client architecture which is designed to help replace
insecure native plug-ins with secure native sandboxed extensions and applications.
They have also made this portable by employing a modified LLVM AOT
compiler.
4.4 NODE.JS
Node.js is an open-source, cross-platform JavaScript run-time environment that
executes JavaScript code outside of a browser. Historically, JavaScript was used
primarily for client- side scripting, in which scripts written in JavaScript are
embedded in a webpage's HTML and run client-side by a JavaScript engine in the
user's web browser. Node.js lets developers use JavaScript to write Command Line
tools and for server-side scripting—running scripts server-side to produce dynamic
web page content before the page is sent to the user's web browser. Consequently,
Node.js represents a "JavaScript everywhere" paradigm, unifying web
application development around a single programming language, rather than
different languages for server side and client side scripts.
Though .js is the conventional filename extension for JavaScript code, the name
"Node.js" does not refer to a particular file in this context and is merely the name
of the product. Node.js has an event-driven architecture capable of asynchronous
I/O. These design choices aim to optimize throughput and scalability in web
applications with many input/output operations, as well as for real-time Web
applications (e.g., real-time communication programs and browser games).
Node.js allows the creation of Web servers and networking tools using JavaScript
and a collection of "modules" that handle various core functionality. Modules are
provided for file system I/O, networking (DNS, HTTP, TCP, TLS/SSL, or
UDP), binary data (buffers), cryptography functions, data streams, and other core
functions. Node.js's modules use an API designed to reduce the complexity of
writing server applications.
Though initially the module system was based on commonjs module pattern, the
recent introduction of modules in the ECMAScript specification has shifted the
direction of using ECMAScript Modules in Node.js by default instead.Node.js
is officially supported on Linux, macOS, Microsoft Windows, SmartOS,
FreeBSD, and IBM AIX. The provided source code may also be built on similar
operating systems or be modified by third parties to support others such as
Nonstop and Unix servers. Alternatively, they can be written with
CoffeeScript (a JavaScript alternative), Dart or TypeScript (strongly typed forms
of JavaScript), or any other language that can compile to JavaScript.
Node.js is primarily used to build network programs such as Web servers. The
biggest difference between Node.js and PHP is that most functions in PHP block
until completion (commands execute only after previous commands finish), while
Node.js functions are non- blocking (commands execute concurrently or even in
parallel, and use callbacks to signal completion or failure).
Node.js operates on a single thread, using non-blocking I/O calls, allowing it to
support tens of thousands of concurrent connections without incurring the cost of
thread context switching. The design of sharing a single thread among all the
requests that use the observer pattern is intended for building highly concurrent
applications, where any function performing I/O must use a callback. To
accommodate the single-threaded event loop, Node.js uses the libuv library—
which, in turn, uses a fixed-sized thread pool that handles some of the non-
blocking asynchronous I/O operations.
A downside of this single-threaded approach is that Node.js doesn't allow vertical
scaling by increasing the number of CPU cores of the machine it is running on
without using an additional module, such as cluster, StrongLoop Process Manager,
or pm2. However,
developers can increase the default number of threads in the libuv thread pool.
The server operating system (OS) is likely to distribute these threads across
multiple cores.
4.4.1 SOCKET.IO
Socket.IO is a JavaScript library for real-time web applications. It enables real-
time, bi- directional communication between web clients and servers. It has two
parts: a client-side library that runs in the browser, and a server-side library for
node.js. Both components have an identical API.
REAL-TIME APPLICATIONS
A real-time application (RTA) is an application that functions within a period that
the user senses as immediate or current.
Some examples of real-time applications are −
● Instant messengers − Chat apps like Whatsapp, Facebook Messenger,
etc. You need not refresh your app/website to receive new messages.
● Push Notifications − When someone tags you in a picture on Facebook,
you receive a notification instantly.
● Collaboration Applications − Apps like google docs, which allow
multiple people to update same documents simultaneously and apply
changes to all people's instances.
● Online Gaming − Games like Counter Strike, Call of Duty, etc., are also
some examples of real-time applications.
WHY SOCKET.IO?
Writing a real-time application with popular web applications stacks like LAMP
(PHP) has traditionally been very hard. It involves polling the server for changes,
keeping track of timestamps, and it is a lot slower than it should be.
Sockets have traditionally been the solution around which most real-time systems
are architected, providing a bi-directional communication channel between a
client and a server. This means that the server can push messages to clients.
Whenever an event occurs, the idea is that the server will get it and push it to the
concerned connected clients.
Socket.IO is quite popular, it is used by Microsoft Office, Yammer, Zendesk,
Trello, and numerous other organizations to build robust real-time systems. It one
of the most powerful JavaScript frameworks on GitHub, and most depended-
upon NPM (Node Package Manager) module. Socket.IO also has a huge
community, which means finding help is quite easy.
 CONCLUSION

We want to conclude that Web Designing and Web Developing Services are
must and should for all kinds of business. Even small scale business will
grow to large extent after creating their business website.
The standard tools used for creating the website will ensure that things such
as navigation, menus and loyout conform to current practices with which
every web user is familiar with.
There are many reasons building a website requires that we obtain the right
tools and resources.
There are huge opportunities available for the students who want to work in
this field. Many private ond public organizations hire web designer for their
online work and website development.
 REFERENCES

 www.wikipedia.org
 www.w3schools.com
 MAHARAJA SURAJMAL INSTITUTE OF TECHNOLOGY

Summer/Industrial Training Evaluation Form F05 (MSIT-EXM-P-02)

(Year 20…… -- 20……)

Details of the Student Details of the Organisation
Name………………………………………………. Name and address of
organisation……………………….
Roll No……………………………………………..
…………………………………………………………………………….
Branch and Semester……………………… Broader
Area………………………………………………………..
Mobile No……………………………………….. Name of
Instructor…………………………………………….…
E-mail ID…………………………………………… Designation and Contact
No………………………………..
Student Performance Record
No. of days Number of Curriculum Scheduled for the Curriculum actually covered
Scheduled for days student by the student
the training actually
attended

Week 1

Week 2

Week 3

Week 4

Week 5

Week 6

(Signature of
the student)
Any comments or suggestions for the student performance during the training program(to be filled by
instructor)
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
……………………………………………………………………………………………………………
………………………………….

(Signature of the Instructor)

along with Seal
Note: Every student has to fill and submit this Performa duly signed by his/her instructor to the
faculty-in-charge by first week of September.