1

“WEB DEVELOPMENT USING [Link]”

Major Project Report

Submitted in Partial Fulfillment of the

Requirements for the Degree of

BACHELOR OF TECHNOLOGY
IN
ELECTRONICS AND COMMUNICATION ENGINEERING
By
Mayank Parmar
(16BEC003)

Department of Electronics and Communication Engineering,

Institute of Technology,
Nirma University,
Ahmedabad 382 481
May 2021
 2

CERTIFICATE
This is to certify that the Major Project Report entitled “Web Development Using [Link]”
submitted by Mr/Ms Parmar Mayank RajeshBhai (16BEC003) towards the partial fulfillment of
the requirements for the award of degree in Bachelor of Technology in the field of Electronics &
Communication Engineering of Nirma University is the record of work carried out by him/her
under our supervision and guidance. The work submitted has in our opinion reached a level
required for being accepted for examination. The results embodied in this major project work to
the best of our knowledge have not been submitted to any other University or Institution for award
of any degree or diploma.

Date:

Industry – Guide Institute – Guide

Pinkesh Patel Prof. Jayesh Patel
Project Manager Assistant Professor

Head of Department Director

Department of Electronics & Communication Institute of Technology,
Engineering, Nirma University,
Institute of Technology, Ahmedabad 382 481
Nirma University,
Ahmedabad 382 481
 4

TO WHOMSOEVER IT MAY CONCERN

 5

Undertaking for Originality of the Work

I, Parmar Mayank RajeshBhai (16BEC003), give undertaking that the Major Project entitled “Web
Development using [Link]” submitted by me, towards the partial fulfillment of the requirements
for the degree of Bachelor of Technology in Electronics and Communication of Nirma University,
Ahmedabad 382 481, is the original work carried out by me and I give assurance that no attempt
of plagiarism has been made. I understand that in the event of any similarity found subsequently
with any other published work or any project report elsewhere; it will result in severe disciplinary
action.

Mayank Parmar

Signature of the Student

Date: 10/5/2021

Place: Ahmedabad

Endorsed by: Pinkesh Patel

(Signature of External Guide) (Signature of Internal Guide)

 7

Acknowledgement

A job project is never the product of a single person; rather, it carries the imprints of a multitude
of individuals who helped directly or indirectly me in completing the present study. We would be
failing in my duties if we don't say a word of thanks to all those who made my training period
educative and pleasurable one. We are thankful to Virtual Height IT Services PVT. LTD.
AHMEDABAD for giving us an opportunity to do Minor Project as Internship in the company.
First and main, considering his incredibly busy schedule, we are extremely grateful to Pinkesh
Patel (Project Manager at virtual height) for his support, motivation, and mentorship during the
internship. Our heartfelt gratitude to him for allowing me to work on this project and for his
unwavering guidance as a mentor.
We would also like to thank all the respondents for giving their precious time and relevant
information and experience, We required, without which the Project would have been incomplete.
Finally, we would like to express our gratitude to everyone, particularly my family, for their
unwavering support and to everyone who has assisted us in the preparation of this project study,
whether directly or indirectly. Finally, we are grateful to all divine light and my family, who have
maintained my motivation and thirst for wisdom throughout the rises and falls of time.
 8

Abstract
The key goal of this internship was to learn how to develop websites using [Link]. There are
several programming languages that can be used to create a web-based application or software.
Any of them are only used with the software's frontend and backend architecture. HTML5, CSS,
and the React Framework are only a few examples. Other programming languages are also used in
the creation of complex functions of the software or application. For [Link], Python
JavaScript etc.
Nowadays there are also some framework's that use vastly. Frameworks are basically structured
programming by using Model, View, and Controller. It is also called as MVC. If we develop web
based application that is very useful for us because we can access it from anywhere of the world.
It is very helpful for our daily life. That is why we choose subject of my report is "WEB
DEVELOPMENT USING [Link]". Working in Insight VIRTUAL HEIGHT huge experiences
in our upcoming career. Solving real life problems was another key issue. This report takes us
through all the Internship details of knowledge and experience gathered during this internship
period.
 9

Content
Chapter Title Page
No. No.
Acknowledgement i
Abstract ii
Index iii
List of Figures iv
List of Tables vi
Nomenclature viii
1 Introduction 10
1.1 Introduction/ Prologue/Background 10
1.2 Motivation 11
1.3 Objective 11
1.4 Problem Statement 11
1.5 Approach 12
2 Literature Review 13
2.1 Introduction of ReactJs 13
2.2 ReactJS Feature 13
2.3 JSX (JavaScript XML) 13
2.4 State 14
2.5 Props 15
2.6 Events in ReactJs 16
2.7 Advantage of ReactJS 17
2.8 Disadvantage of ReactJs 18
 10

3 Results and Discussion 19

4 Conclusions and Future Scope 21

References 23

LIST OF FIGURES

Figure Title Page

No. No.

1 State in ReactJs 14
2 Props in ReactJs 15
3 Event in ReactJS 15
4 Login page in Lms 18
5 Dashboard of LMS 19
6 Listing course on LMS website 19
7 Course Edit and lesson add in LMS websitr 20
 11

Chapter 1 : Introduction
1.1 Company Profile
 VHITS is a thriving and competitive corporate IT community with its headquarters in
Ahmedabad, Gujarat. With a global presence, it has extensive experience in web and mobile
app growth, as well as other IT services such as training, marketing, and placement. After
its founding in 2010, the company has seen rapid growth each year.
 VHITS has a deep and diverse think-tank of respected seasoned experts who continue to be
at the forefront of their creative and diverse abilities.
 VHITS has a deep and diverse think-tank of respected seasoned experts who continue to be
at the forefront of their creative and diverse [Link] have an advantage over our rivals
because of our market acumen and extensive experience. We examine, investigate, develop,
and deliver.
 Today's era can be considered as Mobile era where most of the people surf internet on their
mobile devices. Hence, there's a need to have a responsive web design that is displayed
easily on every type of device. Responsive web design makes it very convenient for users
to go through any website on their mobile device. A perfect colorful website layout that is
compatible with any screen is what is loved the most by mobile users.
 We offer the best responsive website designing services in India and have the best web
developers to help you design a good looking and easy to maintain, access and use website.
We are top rated company in India has seen in recent times. Our client's testimonials are
proof of our work's credibility and quality. Our web designer team is highly efficient and
ensures that they meet project deadlines.
Head Office
Name: Virtual Height services Pvt. Ltd.
Address: 702/703, ISCON EMPORIO,NR. STAR BAZAAR, JODHPUR CROSS
ROADS, SATELLITE, AHMEDABAD-380015
Email: info@[Link]

1.2 Motivation
 12

 In desktop base website creating system is easy to understand. Since we accept Internship
it seems to me We are beginner and primary level to learn web development, so it is easy
and interested to learn and create. Further this project is related of student and we are
introducing to its circumstances so it service technology is under of the understand mine.
Its technology is so interested and charming and easy to build a project by fully JavaScript,
React. Html ,CSS , node

1.3 Objectives
 The objective of the web development is to handle the entire activity of a website. The
software keeps track of all the information about the entire website. The system contains
database where all the information will be stored safely
 Learn web development concepts. Understand java scripts and it flaw. Learn react library
of java script. Basic concepts of HTML, CSS and designing of websites.
 Providing high-quality content on your website, updating it on a daily basis, building
confidence, and promoting it on other websites and social media
 Make website fast, optimize and secure. The system will be much more easy to use and
the operator will feel no difficulty

1.4 Problem Statement

 Normal website take load on render HTML and CSS data. So it not well optimize. And
when we click on any button whole website refresh to just update one component. When
we want to update a small DOM (document object Model) it refresh whole DOM of
website.

 Due to DOM update again and again website make slow performance. User interaction
may be disturb. And when we route one page to another page we request server to serve
our all component like header, footer and content but in every page header and footer are
same so why we request server to serve this component again. It increase our load time.
This are some problem we are facing when we develop modern websites.
 13

 Clients often encounter issues with their website and turn to the designer/developer to
correct them, but when they check the site, it looks fine from their end. Sometimes, these
issues are caused by out-of-date web servers or changes made incorrectly by the
customer. Time spent detecting the source of a problem means a delay in tackling the
problem itself.

1.5 Approach
 The virtual DOM is a representation of the DOM (real DOM) in which the user interface
is kept separate from the physical DOM and stored locally. React uses reconciliation to
synchronize it with the real DOM. It's the method of linking various DOM classes and
matching virtual representations to virtual operations.
 The virtual DOM's key goal is to speed up the upgrade process. The virtual DOM does
not fully restore the tab. Developers can speed up the upgrade process by creating
standalone graphical representations of modified fragments. It will then be compared to
the actual DOM, but only a part of the codebase that has been edited will be processed on
the server.
 Really web development is so best and ultimate interested and hard for me, by the
internship training I could learn an understand many objectives with interest as if was
hard after learn I can understand web development is so interested then other language.
We did solution of CSS and other problem in our training period. Clean code reduces
unexpected errors, which can affect page load. Automated website monitoring solutions
often allow the developers to view their clients' websites in real time and to set alerts to
notify them when potential issues begin to arise. Not only does this allow the developers
to identify a problem before the customer does, in many cases it also gives them the
chance to fix it before the issue has any impact on the client's business.
 14

Chapter 2

2.1 Introduction of ReactJs

 Facebook created the React front-end library. For web and smartphone applications, it is
used to manage the display layer. We can build reusable UI components with ReactJS. It
has a solid base and a huge community behind it, making it one of the most popular
JavaScript libraries.
 React is a library that allows you to build modular user interfaces. It supports the creation
of interchangeable user interface modules that display data that varies over time. React is
sometimes used as the V in MVC. React abstracts the DOM from you, resulting in a more
straightforward programming model and improved performance. React will also use Node
to render on the server and React Native to run native applications. One-way reactive data
flow is implemented in React, which eliminates boilerplate and makes it simpler to think
about than conventional data linking.

2.2 ReactJS Feature

 JSX is a syntax extension for JavaScript. JSX isn't needed for React growth, but it is
highly recommended.
 Components are the backbone of React. All must be considered a variable. When
operating on bigger programmes, this would make it easier to maintain the code.
 Flux and one-way data flow React incorporates one-way data flow, making it simple to
reason for the app. Flux is a pattern that aids in the unidirectional flow of data.
 React is authorized under the terms of the Facebook Inc. The documentation is available
under the Creative Commons Attribution 4.0 International License.
 15

2.3 JSX (JavaScript XML)

 Instead of using standard JavaScript, React uses JSX for templating. It is not necessary to
use it; however, the following are some advantages.
 It's easier because it optimizes code before converting it to JavaScript.
 It's also type-safe, with the majority of errors caught during compilation.
 If you are familiar with HTML, it makes writing templates simpler and quicker.

2.4 State
 State is the place where the data comes from. We should always try to make our state as
simple as possible and minimize the number of stateful components. If we have, for
example, ten components that need data from the state, we should create one container
component that will keep the state for all of them.

Figure 1 State in ReactJS

2.5 Props
 Props are immutable, which is the key distinction between state and props. As a result, the
container component should specify the state that can be modified and altered, while child
components can only use props to transfer data from the state.
 Props is properties of component that we use as attribute in HTML. Props are also use to
communicate between to components.
 16

Figure 2 Props In ReactJs

2.6 Events in ReactJs

 This is a basic example in which only one variable is used. When the button is
pressed, the onClick event is triggered, which calls the updateState operation.
 React event handlers are written inside curly braces: onClick={increase} instead of
onClick=" increase ()"

Figure 3 Events In React

 17

2.7 Advantage of ReactJS

 Easy to use: ReactJS is a lot easier to understand and use than ReactJS. It includes
a lot of notes, tutorials, and instructional materials. Any developer with a JavaScript
experience will quickly learn React and start building mobile apps in a matter of
days. It's the V(view part) of the MVC (Platform-View-Controller) model, and it's
also known as a JavaScript system. It isn't completely featured, but it benefits from
the open-source JavaScript User Interface(UI) library, which aids in task execution.
 Creating Dynamic Web Applications Becomes Easier: It was difficult to build a
dynamic web application with HTML strings because it required complicated scripting, but
React JS solved the problem and made it simpler. It needs less coding while providing more
flexibility. It employs the JSX (JavaScript Extension) syntax, which is a special syntax that
allows HTML quotes and HTML tag syntax to render certain subcomponents. It also allows
you to create machine-readable passwords.
 Reusable component: A ReactJS web application consists of several modules, each
with its own logic and controls. These components are in charge of producing a
lightweight, reusable piece of HTML code that you can use anywhere you need it.
The reusable code makes it easy to create and manage your games. These
Components may be nested with each other to create complex applications from
basic building blocks. To fill data in the HTML DOM, ReactJS uses a virtual DOM-
based mechanism. The virtual DOM is fast because it only modifies individual DOM
components rather than reloading the whole DOM every time.
 Increase performance: The virtual DOM in ReactJS boosts performance. The Document
Object Model (DOM) is a cross-platform and programming API for dealing with HTML,
XML, and XHTML. When the DOM was revamped, most developers encountered a
problem that hampered the application's performance. The introduction of virtual DOM in
ReactJS solved this problem. The React Virtual DOM is a reflection of the web browser's
DOM that resides solely in memory. As a result, we didn't write directly to the DOM while
writing a React part. Instead, we're writing virtual components that respond to the DOM,
resulting in a smoother and faster experience.
 SEO friendly: When it comes to SEO, traditional JavaScript frameworks have an issue.
JavaScript-heavy programmes are usually difficult for search engines to read. This is an
 18

issue that many web developers have expressed their dissatisfaction with. ReactJS solves
this challenge making it easier for developers.

2.8 Disadvantage of ReactJs

 Poor documentation: Another disadvantage of actively upgrading technologies is
this. React developments are evolving and accelerating at such a rapid pace that there
is little time to properly track them. To get around this, developers write their own
directions as new releases and tools in their current projects evolve.
 JSX as barrier: JSX is used for ReactJS. It's a syntax extension that lets you
combine HTML and JavaScript. While this method has its advantages, some
members of the development community regard JSX as a barrier, especially for new
developers. Developers lament about the learning curve's difficulty.
 19

Chapter 3
3.1 Results

Figure 4 Login Page of LMS

 Login page of LMS: this logon page of LMS website where user can login in
website this login page is user interactive where user can get wither password or
email are wrong or right. It also check user exist or [Link] user forgot their password
he or she can forget by using ther register email.
 20

Figure 5 Dashboard of LMS

 Dashboard of LMS: Dashboard ate main page of any admin panel where admin
can get all information of their website and also control all information of his
website. Here we can see that admin can get information about total instructor,
total course of website total student and total company register in his website.

Figure 6 Listing of Course On LMS Website

 21

 Listing of Course On LMS Website: here we can see all the course which create by
student and instructor. There are many functionality available here which can use by
admin for delete course , edit course and also duplicate te course and assign another
instructor.

Figure 7 Course Edit and lesson Add page in LMS

 Course Edit and lesson Add page in LMS: course edit is functionality where admin
can edit available course and also add lesson on it. In lesson add page user also get
video , document and many more about lesson can get student to clear their problem

3.2 Discussion
 The current work is the initial background report for the website development project. This
report aims to provide a critical review of the relevant literature in the web field and also to
describe key aspects of the methodology that will be applied throughout the project. This
report tries to examine various issues that arise while building a website.
 It is important to highlight, that websites are not simple software artifacts. Mastering the
necessary software skills and tools to build a website does not guarantee its success. For
this reason, following the guidance and the advice of Our Internal Guide professor, this
report focuses on many other challenges that come up through the development process,
 22

like performing website evaluation, conducting market research and choosing the right
business model for the website proposal.
 These are the first and most crucial steps that will ensure that the final IT employment
website, will be developed according to the requirements of the market and will be tailored
to the needs of its users The decision will be based on evaluating case studies of website
development, in order to examine a vast variety of techniques and software tools that have
been applied successfully in real projects. Furthermore, further research will be conducted
to spot the strong points of various techniques and justify the choice that will be finally
made
 Finally, an attempt will be made to contact some experienced web developers and ideally
some web developers who have worked on similar projects, in order to absorb valuable
knowledge from their experience.
 23

Chapter 4
4.1 Conclusions
 As a conclusion, I can say that this internship was a great experience. Thanks to this
project, we acquired deeper knowledge concerning my technical skills but We also
personally benefited. Currently JavaScript and it library like ReactJS made web
pages are a common part of web applications, and one of the most popular language
for web development used by developers worldwide. If we surf internet we can see
millions of websites built with ReactJS. We learn to live in a different environment
from the one we are used to. Indeed, I grew more independent in work and also in
everyday life. We realized that We could do more things than We thought like
learning new things by myself.
 There are huge opportunities available for the students who want to work in this field.
Many private and public organizations hire web designer for their online work and
website development. With the rapid advent of online industry, the demand of web
development professionals is increasing and this has created a huge job opportunity
for the aspirants in the upcoming days.
 Also an experienced person in this field can also work as a freelancer; there are many
online companies which provide online projects to the individuals.

4.2 Future scope

 Especially if We don't have Much experience. Finding work can be a real challenge.
A successful internship can help us turn an experience into a career opportunity. So
as a successful internship my future scopes will be:
 To be work IT company.
 Can work as a Software Engineer.
 Can work as a Web Designer.
 Can work as a Web Developer.
 24

References
[1] [Link]
[2] [Link]
[3] [Link]
c3aa686ec0b3#:~:text=It%20uses%20Virtual%20DOM%20that%20makes%20the%20a
pp%20fast.&text=Therefore%2C%20the%20idea%20of%20Virtual,in%20enhancing%2
0the%20user%20experience.
[4] [Link]
[5] [Link]
[6] [Link]