Full-Stack Dance Website
INDUSTRIAL TRAINING PROJECT REPORT
Submitted in partial fulfilment of the requirements for the award of the degree
of
BACHELOR OF TECHNOLOGY
in
INFORMATION TECHNOLOGY
by
Shubham Dubey
Enrollment No: 05196203119
DEPARTMENT OF INFORMATION TECHNOLGY
DR. AKHILESH DASS GUPTA INSTITUTE OF TECH & MGMT
(AFFILIATED TO GURU GOBIND SINGH INDRAPRASTHA UNIVERSITY, DELHI)
NEW DELHI – 110053
1
ABSTRACT
__________________________________________________________________________________
In this project, I created a Full Stack Website with the name Shubham Dance Academy. It is a
website where people who want to learn various styles of dance form can come and contact the
academy. It is a proper website with a proper frontend and backend and is connected to a Database
.In this project, I used HTML, CSS, and JavaScript which helped me in creating this Website.
2
ACKNOWLEDGEMENT
__________________________________________________________________________________
The completion of a task of any kind requires immense efforts with cooperation and coordination,
several hours of hard work, sources of materials, knowledge and energy are the other important inputs
required in making a successful project. I hereby acknowledge that my industrial training and project
has been completed by me.
With a lot of gratitude, I would like to thank IT department of Dr. Akhilesh Das Gupta Institute of
Technology and Management for organizing this Industrial Training for students.
I wish to express my grateful thanks to our Director Sir – Prof. (Dr.) Sanjay Kumar, Department InCharge – Ms. Charul Dewan, Faculty and other staff members who gave us full support to finish the
project work successfully and their constant encouragement, valuable suggestions and helping
tendency made me to carry out and finish the project work successfully.
I would like to thank Training and placement cell of our college for giving me chance to present my
project in front of my teachers.
I would like to express my sincere gratitude to my teacher Mr. Ujjval Jain, Assistant Professor, IT
Department, for granting me the opportunity to undergo the summer training form Udemy.
- Shubham Dubey
(05196203119)
3
CERTIFICATE OF TRAINING
__________________________________________________________________________________
4
TABLE OF CONTENTS
_______________________________________________________________________________________
ABSTRACT
ACKNOWLEDGEMENT
CERTIFICATE
1. INTRODUCTION
1.1
1.2
1.3
1.4
6
Objective
Front-end vs Backend
Essential Functionalities
Setup Used
2. METHODLOGY & TECHNOLOGY USED
9
3. RESULT ANALYSIS
11
4. Responsive Design
13
5. SOURCE CODE OF THE PROJECT
15
6. REFERENCES
26
5
CHAPTER 1: INTRODUCTION
1.1 Objectives
Web development refers to the building, creating, and maintaining of websites. It includes aspects
such as web design, web publishing, web programming, and database management. It is the
creation of an application that works over the internet i.e., websites.
The word Web Development is made up of two words, that is:
Web: It refers to websites, web pages, or anything that works over the internet.
Development: Building the application from scratch.
Web development tools help the developer to test and debug the websites. Nowadays the web
development tool comes with web browsers as add-ons. All web browsers have built-in tools for this
purpose.
These tools allow the web developer to use HTML, CSS, and JavaScript, etc. These are accessed by
hovering over an item on a web page and selecting the “Inspect Element” from the context menu.
Before developing a website, one should keep several aspects in mind like:












What to put on the website?
Who will host it?
How to make it interactive?
How to code it?
How to create a search engine-friendly website?
How to secure the source code frequently?
Will the website design display well in different browsers?
Will the navigation menus be easy to use?
Will the website loads quickly?
How easily will the site pages print?
How easily will visitors find important details specific to the website?
How effectively the style sheets be used on your websites?
1.2 Front-end vs Backend






Basic setup and learning how to learn
Web standards and best practices (such as accessibility and cross-browser compatibility)
HTML, the language that gives web content structure and meaning
CSS, the language used to style web pages
JavaScript, the scripting language used to create dynamic functionality on the web
Tooling that is used to facilitate modern client-side web development.
6
Backend
Backend development languages handle the ‘behind-the-scenes’ functionality of web
applications. It’s code that connects the web to a database, manages user connections, and
powers the web application itself. Backend development works in tandem with the front
end to deliver the final product to the end-user.
1.3 Essential Functionalities
1) An assortment of strategies for analysing and figuring out how tasks that go past records and
mirror the upsides of current assets.
2) The awkward property, for example, when it turns into the default spot for ordinary errands where
updates can be fulfilled.
3) Promptly turns on, taking into consideration fast information and clear view. Regular plans for
the day are ordinarily deserted because of slow, tedious information and frail result.
4) No conventional set of working responsibilities, order, or deterioration is expected from clients,
and any level of reflection for nuclear errand sections should be allowed.
5) An instrument for managing old, low-need tasks that are turning out to be less inclined to be
performed yet have not been expressly erased.
1.4 Setup Used
Visual Studio Code is a source-code editor made by Microsoft for Windows, Linux,
and macOS.[9] Features include support for debugging, syntax highlighting, intelligent code
completion, snippets, code refactoring, and embedded Git. Users can change the theme, keyboard
shortcuts, preferences, and install extensions that add additional functionality.
Visual Studio Code was first announced on April 29, 2015, by Microsoft at the
2015 Build conference. A preview build was released shortly thereafter.[10]
On November 18, 2015, the source of Visual Studio Code was released under the MIT License, and
made available on GitHub. Extension support was also announced.[11] On April 14, 2016, Visual
Studio Code graduated from the public preview stage and was released to the Web.[12] Microsoft
has released most of Visual Studio Code's source code on GitHub under the permissive MIT
License,[5][13] while the releases by Microsoft are proprietary freeware.
Web Browser (Google Chrome)
A web browser (commonly referred to as a browser) is application software for accessing
the World Wide Web. When a user requests a web page from a particular website, the web browser
retrieves the necessary content from a web server and then displays the page on the user's device. A
7
web browser is not the same thing as a search engine, though the two are often confused.[1][2] A
search engine is a website that provides links to other websites. However, to connect to a website's
server and display its web pages, a user must have a web browser installed. Web browsers are used
on a range of devices, including desktops, laptops, tablets, and smartphones. In 2020,estimated 4.9
billion people used a browser.[4]The most used browser is Google Chrome, with a 65% global
market share on all devices, followed by Safari with 18%.
8
CHAPTER 2: METHODOLOGIES & TECHNOLOGY USED
1) Hypertext Mark-up Language (HTML5)
HTML is the basic language of web. It is a markup language used for structuring and
presenting content on the World Wide Web. It is the fifth and the latest HTML version. HTML
is written in the form of HTML elements, which are tags contained in angle brackets. HTML
components serve as the foundation for all websites. HTML enables for the embedding of
pictures and objects, and it may be used to construct interactive forms. It enables the creation
of structured documents by indicating structural semantics for text elements including as
headers, paragraphs, lists, links, quotations, and other elements.
2) Cascading Style Sheets (CSS3)
Cascading Style Sheets Level 3 (CSS3) is the iteration of the CSS standard used in the styling
and formatting of Web pages. Cascading Style Sheets (CSS) is a language that is used to
illustrate the look, style, and format of a document written in any markup language. In simple
words, it is used to style and organize the layout of Web pages. CSS3 is the latest version of
an earlier CSS version, CSS2. A significant change in CSS3 in comparison to CSS2 is the
introduction of modules.
3) JavaScript
JavaScript is a light-weight object-oriented programming language which is used by several
websites for scripting the webpages. JavaScript is used to create client-side dynamic pages. It
is an interpreted, full-fledged programming language that enables dynamic interactivity on
websites when applied to an HTML document. It was introduced in the year 1995 for adding
programs to the webpages. JavaScript is among the most powerful and flexible programming
languages of the web. The main design ideas of JavaScript are inspired by the computer
languages Self and Scheme. It is a multiparadigm language that may be used to program in
object-oriented, imperative, or functional ways.
9
4) Node.js:
Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs
on the V8 engine and executes JavaScript code outside a 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.
5) Visual Studio Code:
Visual Studio Code, also commonly referred to as VS Code, is a source-code editor made by
Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax
highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. Users
can change the theme, keyboard shortcuts, preferences, and install extensions that add
additional functionality.
10
CHAPTER 3: RESULT ANALYSIS
Img-1 – Shows landing page of the Website.
Img-1
11
Img-2 – landing page
Img-2
Img-3 – Contact
12
Img-3
13
Responsive Design
Responsive web design (RWD) or responsive design is an approach to web design that aims to
make web pages render well on a variety of devices and window or screen sizes from minimum to
maximum display size to ensure usability and satisfaction.[1][2][3][4]
A responsive design adapts the web-page layout to the viewing environment[1] by using techniques
such as fluid proportion-based grids,[5][6] flexible images,[7][8][9] and CSS3 media queries,[3][10][11] an
extension of the @media rule,[12] in the following ways:




The fluid grid concept calls for page element sizing to be in relative units like
percentages, rather than absolute units like pixels or points.[6]
Flexible images are also sized in relative units, so as to prevent them from displaying
outside their containing element.[7]
Media queries allow the page to use different CSS style rules based on characteristics of
the device the site is being displayed on, e.g. width of the rendering surface (browser
window width or a physical display size).
Responsive layouts automatically adjust and adapt to any device screen size, whether it
is a desktop, a laptop, a tablet, or a mobile phone.
Responsive web design became more important as users of mobile devices came to account for the
majority of web site visitors.[13][14] In 2015, for instance, Google announced Mobilegeddon and
started to boost the page ranking of mobile-friendly sites when searching from a mobile device.[15]
Responsive web design is an example of user interface plasticity.
Concept of Responsive Web Design
The term responsive design was coined by Ethan Marcotte in 2010 and described the use of three
techniques in combination.
1. The first was the idea of fluid grids, something which was already being explored by Gillen
water, and can be read up on in Marcotte's article, Fluid Grids (published in 2009 on A List
Apart).
2. The second technique was the idea of fluid images. Using a very simple technique of setting
the max-width property to 100%, images would scale down smaller if their containing
column became narrower than the image's intrinsic size, but never grow larger. This enables
an image to scale down to fit in a flexibly-sized column, rather than overflow it, but not
grow larger and become pixelated if the column becomes wider than the image.
3. The third key component was the media query. Media Queries enable the type of layout
switch that Cameron Adams had previously explored using JavaScript, using only CSS.
Rather than having one layout for all screen sizes, the layout could be changed. Sidebars
could be repositioned for the smaller screen, or alternate navigation could be displayed.
14
CHAPTER 5: Source Code of the Project
Base.pug:
html
head
title Shubham Dance Academy
block scripts
block style
body
nav#navbar
ul
div#logo
img(src="/static/logod.jpg")
| SDA
li #[a(href="/") Home]
li #[a(href="/") About]
li #[a(href="/") Services]
li #[a(href="/") Class Info]
li #[a(href="/Contact") Contact Us]
block content
footer#footer
| copyright 2022 ShubhamDanceAcademy © | All rights Reserved
Contact.pug
extends base
block scripts
script(src=' ../static/index.js')
15
block style
style
include ../static/style.css
include ../static/stylecontact.css
block content
div.container
h1 Contact Us
form(action="/contact", method="post", class="myForm")
input(type="text", class="myInput", name="name", placeholder="Enter your
name")
input(type="phone", class="myInput", name="phone", placeholder="Enter your
phone")
input(type="email", class="myInput", name="email", placeholder="Enter your
email id")
input(type="text", class="myInput", name="address", placeholder="Enter your
address")
input(type="text", class="myInput", name="desc", placeholder="Enter your
concern")
button(class="btn")
| Submit
Home.pug
extends base
block scripts
script(src=' ../static/index.js')
block style
style
16
include ../static/style.css
block content
section#introSection
div Shubham Dubey's Dance Lessons
div.small best dance classes in entire world
section#missionSection
h2 Mission Section
div.card
h3 Ballet Lessons
div.card-box
div.card-img
img(src="static/ballet.jpg")
div.card-content
p ballet is one of the classiest dance form
div.card
h3 Contemporary
div.card-box
div.card-img
img(src="static/dance2.jpg")
div.card-content
p Contemporary is one of the classiest dance form
17
div.card
h3 Jazz Style
div.card-box
div.card-img
img(src="static/dance 11.png")
div.card-content
p Jazz is one of the classiest dance form
section#sponsorsSection
h2 Section for sponsors
div.sponsors
img(src="static/apple.jpeg", alt="Apple", class="spImage" )
img(src="static/google.jpg", alt="Apple", class="spImage")
img(src="static/facebook.png", alt="Apple", class="spImage")
img(src="static/paytm.jpg", alt="Apple", class="spImage")
img(src="static/netflix.png", alt="Apple", class="spImage")
Styles.css:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: "Montserrat", sans-serif;
}
body {
background: #eee;
padding: 0 16px;
background-image: url("https://www.transparenttextures.com/patterns/food.png");
}
18
header {
background-color: #f5ba13;
margin: auto -16px;
padding: 16px 32px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
header h1 {
color: #fff;
font-family: "Merienda", cursive;
font-weight: 200;
}
footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
height: 2.5rem;
}
footer p {
color: #ccc;
}
.note {
background: #fff;
border-radius: 7px;
box-shadow: 0 2px 5px #ccc;
padding: 10px;
width: 240px;
margin: 16px;
float: left;
}
.note h1 {
font-size: 1.1em;
margin-bottom: 6px;
}
.note p {
font-size: 1.1em;
margin-bottom: 10px;
white-space: pre-wrap;
word-wrap: break-word;
}
.note button {
position: relative;
19
float: right;
margin-right: 10px;
color: #f5ba13;
border: none;
width: 36px;
height: 36px;
cursor: pointer;
outline: none;
}
form.create-note {
position: relative;
width: 480px;
margin: 30px auto 20px auto;
background: #fff;
padding: 15px;
border-radius: 7px;
box-shadow: 0 1px 5px rgb(138, 137, 137);
}
form.create-note input,
form.create-note textarea {
width: 100%;
border: none;
padding: 4px;
outline: none;
font-size: 1.2em;
font-family: inherit;
resize: none;
}
form.create-note button {
position: absolute;
right: 18px;
bottom: -18px;
background: #f5ba13;
color: #fff;
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
cursor: pointer;
outline: none;
}
App.js:
20
import React from "react";
import Header from "./Header";
import Footer from "./Footer";
import Note from "./Note";
import CreateArea from "./CreateArea";
function App() {
const [notesArr, addInArr] = React.useState([]);
function updateArr(newnote) {
addInArr(prevValue => {
return [...prevValue, newnote];
})
console.log(notesArr);
}
function deleteNote(id) {
addInArr(prevItems => {
return notesArr.filter((note, index) =>
{return index !== id;}
);
})
}
return (
<div>
<Header />
<CreateArea
clicker={updateArr}
/>
{notesArr.map((note, index) =>
<Note
key={index}
id={index}
tit={note.title}
text={note.text}
delItem={deleteNote}
/>
)}
<Footer />
</div>
);
}
21
export default App;
App.js
const express = require("express");
const path = require("path");
const app = express();
const mongoose = require('mongoose');
const bodyparser = require("body-parser") //post req k through database me data
save karane k liye bodyparser module install kiya
mongoose.connect(`mongodb://localhost/contactDance`, {useNewUrlParser: true})
//moongoose ko mongodb se connect kara
const port = 8000;
//require('./connection')
//define mongoose schema
var contactSchema = new mongoose.Schema({
required block hai saare block jo ki honge
//schema banaya jisme form k sab
name: String,
phone: String,
email: String,
address: String,
desc: String
});
var Contact = mongoose.model('Contact', contactSchema);
bana diya contact naam ka
// schema ka model
22
// EXPRESS SPECIFIC STUFF
app.use('/static', express.static('static')) // For serving static files
app.use(express.urlencoded())
express me lane k liye use kiya jata hai
//ye middleware, html forms ka data hame
// PUG SPECIFIC STUFF
app.set('view engine', 'pug') // Set the template engine as pug
app.set('views', path.join(__dirname, 'views')) // jo bhi template views directory
me rakkhe hai unke liye path set kar dia
// ENDPOINTS
app.get('/', (req, res)=>{
const params = { }
res.status(200).render('home.pug', params);
})
app.get('/contact', (req, res)=>{
const params = { }
res.status(200).render('contact.pug', params);
})
app.post('/contact', (req, res)=>{
kuch bhi likha hoga use lene k liye
//contact form me jo
var myData = new Contact(req.body);
contact model ki jo info aayi hai wo save ho jayegi
//variable myData me
myData.save().then(()=>{
save kar dia
//mydata ko database me
res.send("This item has been saved to the database")
kar dia
}).catch(()=>{
karne k liye block lagaya
res.status(400).send("item was not saved to the database")
throw hoga
//ye response send
//error catch
//ye message
});
23
//res.status(200).render('contact.pug', params);
req kar rha tha contact page ko isi liye error a sakta hai
//ye bhi status
})
// START THE SERVER
app.listen(port, ()=>{
console.log(`The application started successfully on port ${port}`);
});
Footer.js:
import React from "react";
function Footer() {
const year = new Date().getFullYear();
return (
<footer>
<p>Copyright ⓒ {year}</p>
</footer>
);
}
export default Footer;
Notes.js:
import React from "react";
import DeleteIcon from '@material-ui/icons/Delete';
function Note(props) {
24
return (
<div className="note">
<h1>{props.tit}</h1>
<p>{props.text}</p>
<button onClick={() => {props.delItem(props.id)}}>
<DeleteIcon />
</button>
</div>
);
}
export default Note;
index.js:
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App />, document.getElementById("root"));
25
REFERENCES
[1] https://www.ShawAcademy.com
[2] https://www.wikipedia.org
[3] https://www.w3schools.com
[4] https://www.tutorialspoint.com/css/css3_tutorial.htm
[5] https://www.tutorialrepublic.com
[6] https://www.geeksforgeeks.org
26