Industrial Training Report

on

Web Development
In
Internshala
Submitted as partial fulfilment for the award of
BACHELOR OF TECHNOLOGY DEGREE
Session 2022-23

Computer Science & Engineering

Submitted By:

AMAR RAI

(1900970100013)

CSE-A

Galgotias College of Engineering & Technology

Greater Noida, Uttar Pradesh
India-201306

AFFILIATED TO
DR. A.P.J ABDUL KALAM TECHNICAL UNIVERSITY, LUCKNOW, UP
India-226031
September, 2022

i
 GALGOTIAS COLLEGE OF ENGINEERING & TECHNOLOGY
GREATER NOIDA, UTTER PRADESH, INDIA- 201306.

CERTIFICATE

This is to certify that the Web development industrial Training report on front end and backend training
submitted by Mr. Amar Rai 1900970100013 to the Galgotias College of Engineering & Technology, Greater Noida,
Uttar Pradesh, affiliated to Dr. A.P.J. Abdul Kalam Technical University Lucknow, Uttar Pradesh in partial
fulfillment for the award of Degree of Bachelor of Technology in Computer science & Engineering is a bonafide
record of the project work carried out by them under my supervision during the year 2022-2023.

Name Mr.Dinesh babu Dr. Vishnu Sharma

Assistant Professor Professor and Head
Deptt. of CSE Deptt. of CSE

ii
 GALGOTIAS COLLEGE OF ENGINEERING & TECHNOLOGY
GREATER NOIDA, UTTER PRADESH, INDIA- 201306.

ACKNOWLEDGEMENT

I have taken efforts in this training. However, it would not have been possible without the kind support and help of
many individuals and organizations. I would like to extend my sincere thanks to all of them.
I am highly indebted to Internshala for its guidance and constant supervision. Also, I am highly thankful to them for
providing necessary information regarding the training & also for their support in completing the training.
I am extremely indebted to CEO Sarvesh agrawal, Internshala , and my mentor Mr.Anuj Kalbalia and Adity Sood
valuable suggestions and constant support throughout my project training. I would also like to express our sincere
thanks to all the staff members of Internshala for their support.
I am extremely indebted to Dr. Vishnu Sharma, HOD, and our coordinator Mr. Dinesh Babu Department of Computer
Science and Engineering, GCET for his valuable suggestions and constant support.
I also express gratitude towards our parents for their kind co-operation and encouragement which helped me in
completion of this project. My thanks and appreciations also go to our friends in developing the project and all the
people who have willingly helped me out with their abilities.

Amar Rai
(1900970100013)

iii
 ABSTRACT

In the 6 weeks summer training I had studied about Web Development Front and Back end. I chose this

training because it helps to develop dynamic web pages, and it is useful for my career in Information

technology Industry. Under the guidance of Colt Steele, I learned various new techniques of building

websites from basics to advanced which is the very foundation of big problems solved at various levels in

the industry. Apart from that I learned to change the functionalities of complex web pages & make them

more efficient by managing lines of code & using the latest technologies. at the end I developed a project

called Full stack blog website development, A Full Stack application which helped me solidify my

understanding of all the latest tools and techniques learnt.

KEYWORDS: html , webdevlopmt, css, nodejs, functionality, technology, training, industry,

iv
 INTRODUCTION

Writing a thousand lines of code and turning that into a website is one of the creative and complicated things
for web developers. If you get excited seeing a lot of beautiful websites and thinking to try your hands on it
then we need to open your eyes telling some important things that you should know as a web developer.
Creating a website that gets a lot of users’ attention is not just about learning various programming
languages, you also need to learn some other concepts like DevTools, data formats, testing, APIs,
authentication and a lot of stuff like that once you will dig yourself into this field. The most important skill
or knowledge every developer should learn first is these three basic building blocks i.e, HTML, CSS, and
JavaScript. We will be using HTML and CSS in frontend for interfaces. Just right click on our web browser
and then selecting view page source option does it. We can find the structure of your website where a lot of
HTML tags are used for different purposes. CSS is also used in the frontend that decides the style, design,
layout and how HTML elements need to be displayed on the screen. PHP is high in demand nowadays and it
is basically responsible for making our HTML pages dynamic and interactive. PHP also comes with a
variety of languages like to make our website more interactive. If we’re going to specialize in PHP like
MEAN Stack or MERN stack then we’re going to deep dive into this language because this one will be our
frontend as well as backend language. You can do a lot of stuff using browser DevTools like debugging,
editing HTML elements, editing CSS properties, checking device, tracking javascript error, etc. Every
developer should be aware of using different tabs (elements, console, network, etc.) in DevTools to make
their work easier and faster. Depends on your browser you can use any DevTools or whatever browser you
are using. People generally prefer using Chrome DevTools to develop, test and debug the web application
but again it’s the choice of the developer which browser he/she is using to develop the website.

v
i.Activities of the Organization
The Company:
Internshala Industrial training company provided Services is an independent software testing and test
automation services company, driven by industry experts and thought leaders in software testing and test
automation domain. We work with some of the smartest software-driven businesses around the world
including software product start-ups as well as Fortune 500 companies. As a focused partner globally with
in-depth expertise in testing solutions we provide functional, full stack, API development, blockchain
development, Script less Test Automation, Performance Testing and Mobile application testing services;
serving multiple industries. Internshala understands this gap and bridges it with its best in its class testing
and test automation consulting services. Internshala leverages its extensive expertise in designing and
deploying test automation solutions with a measurable value. We focus on optimizing investment on testing
by deploying industry’s most reliable technology solutions for test automation like unit, functional, GUI
automation, performance, security.

Programmers and opportunities: The Institute combines pioneering research with top class
education. An innovative curriculum allows the student flexibility in selecting courses and projects. Students,
even at the undergraduate level, get to participate in on-going research and technology development - an
opportunity unprecedented in India. As a result, a vibrant undergraduate programmer coexists with a strong
postgraduate programmer.

Methodology: This project is to provide classifieds information. The website will provide different kinds
of facilities to the many projects bootcamps and other web technologies. The user should register to utilize
the site. Each user will be given User Id and password. Using that Id and password user can enter in to the
site and can put the ads. Those who wanted to view the information they can without registration. This
project is implemented using JSP as the front-end and MySQL as back-end.

Key parts of the report: In existed system, the problem about the Coding blogs is not easily available
easily on internet that is why we introduce this concept. An Institute combines pioneering research with top
class education. An innovative curriculum allows the student flexibility in selecting courses and projects.
Students, even at the undergraduate level, get to participate in on-going research and technology
development - an opportunity unprecedented in India.

Benefits to the company / institution through your report: The Institute combines pioneering
research with top class education. An innovative curriculum allows the student flexibility in selecting
courses and projects. Students, even at the undergraduate level, get to participate in on-going research and
technology development - an opportunity unprecedented in India.

vi
ii. Summary of the report
When we're learning to program we often have to sacrifice learning the exciting and current

technologies in favor of the "beginner friendly" classes. With this course, we get the best of both

worlds. This is a course designed for the complete beginner, yet it covers some of the most

exciting and relevant topics in the industry.

The course is constantly updated with new content, projects, and modules. This course is also

unique in the way that it is structured and presented. Many other courses are just a long series of

"watch as I code" things, but this course is different. Colt Steele incorporated everything he learned in

his years of teaching to make this course not only more effective but more engaging. The course

includes:

Lectures
Code
Projects
Exercises
Research Assignments
Slides
Readings

WHAT I GOT TO LEARNED -

Use Bootstrap to create good-looking responsive layouts
Implement responsive navbars on websites
Use JavaScript variables, conditionals, loops, functions, arrays, and objects
Write Javascript functions, and understand scope and higher order functions
Create full-stack web applications from scratch
Manipulate the DOM with vanilla JS
Manipulate the DOM using jQuery
Translate between jQuery and vanillas JS
Write JavaScript based browser games

vii
Use NodeJS to write server-side JavaScript
Write complex web apps with multiple models and data associations
Write a REAL application using everything in the course
Use Express and MongoDB to create full-stack JS applications
Use common JS data structures like Arrays and Objects
Master the command line interface
Use NPM to install all sorts of useful packages
Understand the ins and outs of HTTP requests
Create your own Node modules
Make a beautiful, responsive photographer's portfolio page
Create a beautiful, responsive landing page for a startup
Implement user authentication
Create a beautiful animated to do list application

viii
 TABLE OF CONTENTS

Title
Page

CERTIFICATE ii
ACKNOWLEDGEMENT iii
ABSTRACT iv
CONTENTS ix

CHAPTER 1: BACKGROUND OF COMPANY/ORGANIZATION

1.1 History of Organization
1.2 Organizational Structure of Company
1.3 Title and position of the Officer in responsible

CHAPTER 2: TOOLS AND TECHNOLOGIES

2.1 Hardware requirements
2.2 Software Requirements

CHAPTER 3: SUMMARY OF DUTIES

CHAPTER 4: WORKING EXPERIENCE

4.1 Projects carried out
4.2 Supervisory Works
4.3 Problems Encountered
4.4 Problems Solved

CHAPTER 5: SUMMARY
5.1 Types of Experienced Gained
5.2 Problems
5.3 Views and Recommendations

CHAPTER 6: REFERENCES

CHAPTER 7: APPENDIX

ix
 CHAPTER 1

BACKGROUND OF COMPANY/ORGANIZATION

1.1 HISTORY OF ORGANIZATION

Internshala is a dot com business with the heart of dot org. We are a technology company on a mission
to equip students with relevant skills & practical exposure to help them get the best possible start to their
careers. Imagine a world full of freedom and possibilities. A world where you can discover your passion
and turn it into your career. A world where you graduate fully assured, confident, and prepared to stake
a claim on your place in the world.

How it all started

Sarvesh, founder & CEO, started Internshala as a blog with a mission to bring a culture of meaningful
internships in India. And for the first two years, he hired only virtual interns.

The website launch

After building a small team, we then launched our website with just one goal - to equip every student in
India with their dream internship. And we did it all for free.

Internshala app launch

The next big step could not have been anything other than launching our very own Android app,
bringing Internshala in the ‘hands’ of the students.

The beginning of Internshala Trainings

After many successful years as an internship platform, our motivation to upskill the students only
increased, and that’s when we kickstarted a new journey with Internshala Trainings.

When we launched Fresher Jobs

With Fresher jobs, we embarked on a journey filled with newer challenges, which allowed us to provide
bigger & better opportunities to graduates with 0-2 years of experience.

The launch of Job Oriented Specializations

With an insight that more than 90% of the graduates in India start their careers with a job that pays less
than 3LPA, we came up with Jobs Oriented Specialization programs to help the students start their
careers in their dream profiles.

10
1.2 ORGANIZATIONAL STRUCTURE OF COMPANY
 Dream big
Be it 500K internship selections or a million enrollment in our courses or becoming the super app for
student careers - we dream big, bold, and loud, because you can’t achieve what you don’t dream.
 Make it happen
From scratching our heads to building something from scratch, we revel in what we do. Our
initiatives like Intern with icon where we onboarded personalities like AR Rahman, Deepa Malik,
Vivek Oberoi, Anup Soni, etc., or giving India its first Internship Day say everything about how we
make In Iernshala happen! ;)
 Relentless pursuit of excellence
The race is long and in the end, it is only with yourself. We strive to be a better version of ourselves
every day and that is how we innovate.
 Do the right thing
Over the years, we have equipped millions of students with the right internship, training, and job and
thousands of companies with the right candidates by doing things the right way. And we’re damn
proud of that!
 Have fun at what you do
All work and no fun makes Jack a dull person, and we wouldn’t want to dull down your shine. Our
foosball table, culture sessions, sports hours, and counter strike manias add to the fun.
 Users at the heart of everything we do
Customer service is not a department but a way of life at Internshala. From our rapid response time to
making our product super smooth, we keep our users at the heart of what we do.
 Seek and give feedback
Asking for and giving feedback is an act of courage and we practice it at every opportunity - that is
how we grow.
 Keep it simple
We don’t like being in complicated relationships with anything. From our designs to our copies, we
keep it pretty simple.

 On time every time

Tick-tock round the clock, we come on time, meet our deadline and rock! ;) And we do not want our
6.30 counter strike sessions to be delayed by a single second.
 Cleanliness is Godliness
We believe that greatness comes with cleanliness because a clean mind (and a clean workspace)
makes room for great ideas and opportunities.

1.3 TITLE AND POSITION OF THE OFFICER IN RESPONSIBLE

Sarvesh(CEO)
The one who started it all. It takes a lot of guts to create a start up and he's the one with all of it. Meet the
CEO. Yes, he's got loads of patience and humility. But on that once-in-a-blue-moon day when he breathes
fire, no one dares to tread his territory. He's a master manager and rightfully at the helm of affairs at
Internshala.
11
Shadab(CO-FOUNDER)
The one with the Smily face. He can crack a hilarious joke with the straightest face and an equally lame joke
with a hilariously delighted face. Sarcasm runs in his blood. Don't take our word for that, talk to him and you
will know (we will gladly pass you his number, just ask).

Vikram(CO-FOUNDER)
The one with the humility. The monk in the team; he probably goes into a trance once he sets his earphones
in and starts coding. The only times he comes out of it is when either the CEO calls him or he needs to check
the latest football news.

Shekhar(CFO)
He is finance men, The one with the impeccable taste. His whole world revolves around traffic. During
mornings and evenings, he battles the fierce traffic on roads. In between he strives to increase the 'traffic' on
Internshala. This towering Bong is the gourmet expert in the team and worships the Beatles and Pink Floyd.

Ankur(CTO)
The one with the ever-smiling face. He’s got a singular expression on his face- a smile. An indispensable
member of the Tech team, he never refuses to any fun activity. Play cricket, he’s in. Play poker, he’s in. Play
coding, he’s definitely in!

Aseem(CMO)
He is the Chief Marketing officer of the company providing valuable solution to different different
customers The one with the patience. Prima facie, Aseem's slender frame gives an impression of a freshman
sitting in a class of final year students. But his mighty brain handles all the complex technical aspects of
Internshala. Mostly soft-spoken.

Shobha(MANAGER)
The one who keeps to herself. This doesn’t imply that she’s taciturn. On the contrary, you will always find
her talking on her phone, with which she seems to have a Though the HR insists that she talks only to
different candidates, we are not entirely convinced.

12
Amar(TECHNICAL-HR)
The one who loves to explore. You’ll never see him sitting idle; either he will be coding or exploring places.
And yeah, never ask him out on a lunch date because you’ll end up only with a glass of juice- his staple food.

Ferhan(HR)
The one with the dance moves. Fondly called as Aslam, he loves to doodle in his free time. If you want to
see his uninhibited self, just play a song, and he will own the room. He can also give complex to girls with
his silky hair. Just don’t open your lunch boxes in front of him- you will REGRET it.

Sapna(HR)
The one who loves animation. Thanks to her sweetness, half of the student team is diabetic. The word hard-
working is an understatement for her. If you want to see her rare, excited persona, take her to an animated
movie. She is also a great singer.

13
 CHAPTER 2
TOOLS AND TECHNOLOGIES USED

2.1 HARDWARE REQUIREMENTS:-

Pentium-IV(Processor) Or any processor.
256 MB Ram OR Above
512 KB Cache Memory
Hard disk 10 GB or above
Microsoft Compatible 101 or more Key Board
2.2 SOFTWARE REQUIREMENTS: -
Operating System : Windows 95/98/XP with MS-office or above.
Programming language : JavaScript
IDE : VS Code

Basics & Logic building

Path to be a full stack developer
Installation & basics
VS Code local environment set up
Front End
HTML
CSS
JavaScript
Bootstrap
REACTJS
Back end
Unix(Command line)
NPM
NPX
PHP
SQL
XAMPP

14
Advanced Back end
REST API
Database Associations
Authentication
Passport JS
Authorization
Main Project concepts
RESTful Routing
Maintenance

Web Development
Website is a collection of related web pages. including multimedia content. typically identified
with a common domain name, and published on at least one web server. A website may be
accessible via a public Internet Protocol (IP) network, such as the Internet. or a private local
area network (LAN), by referencing a uniform resource locator (URL) that identifies the site.
Websites can have many functions and can be used in various fashions; a website can be
a personal website, a commercial website for a company, a government website or a non-profit
organization website. Websites are typically dedicated to a particular topic or purpose, ranging
from entertainment and social networking to providing news and education. All publicly
accessible websites collectively constitute the World Wide Web. while private websites. such as
a company's website for its employees, are typically a part of an intranet.
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...

15
2.1What is HTML

HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web
pages and web applications. Let's see what is meant by Hypertext Markup Language, and Web page.

Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a hypertext.
Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext.
HyperText is a way to link two or more web pages (HTML documents) with each other.

Markup language: A markup language is a computer language that is used to apply layout and formatting
conventions to a text document. Markup language makes text more interactive and dynamic. It can turn text
into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and translated by a web
browser. A web page can be identified by entering an URL. A Web page can be of the static or dynamic
type. With the help of HTML only, we can create static web pages.

HTML Tags As told earlier, HTML is a markup language and makes use of various tags to format the
content. These tags are enclosed within angle braces . Except few tags, most of the tags have their
corresponding closing tags. For example, has its closing tag
and
tag has its closing tag
tag etc. Above example of HTML document uses the following tags: Tag Description This tag defines the
document type and HTML version. This tag encloses the complete HTML document and mainly comprises
of document header which is represented by ... and document body which is represented by
...
tags. This tag represents the document's header which can keep other HTML tags like

2.2What is CSS?

CSS (Cascading Style Sheets) is a language for styling the webpage. We can change the appearance and the
layout of the webpage by using CSS. We can also define how a website’s view changes in different screens
like desktops, tablets, and mobile devices.

CSS is not a programming language, like C++ or JavaScript. However, CSS is not as easy as it seems. If you
try to use it without understanding, you will have difficulties in web development. Therefore, learning CSS is
as important as learning a programming language.

16
Let’s continue with an example to reveal the effect of CSS on a website. Below you see how the Facebook
Webpage looks as usual (with CSS):

And here you see how Facebook looks without CSS:

Facebook without CSS

As we can see, CSS makes a website’s visual presentation much better.

CSS Syntax:

Let’s write our first CSS code. For instance, I would like to change the color of the <h1> tag.

<h1>I'm a Header</h1>

Firstly, we need to tell CSS how to find the HTML element. We can do it with a feature called “selector”. A
selector in CSS is used to find HTML elements by their tag name, class name, id and much more.

So below I define a selector for the HTML element, based on its tag name <h1>:
h1 { } // An example of a selector

After that, we can declare CSS rules, between brackets of the selector, each ending up with a semi-colon:
h1 { // CSS rules between brackets
color: red;
}

So based on the defined selector (h1), CSS can now understand where to apply the new rules:

17
There are many different ways to define a CSS selector, below you can see some examples of the selector
types:

 Class Selector: finds HTML elements by their class attribute

 Id Selector: finds elements by their specific Id

 Element Selector: finds elements by their tag name

You can check here for more about CSS Selectors.

How to Add CSS in HTML?

Now you’ve learned why and how to define a selector and write some CSS code. But that’s not enough. We
also need to add CSS inside HTML otherwise it doesn’t recognize the changes.

We can add CSS in an HTML file in 3 different ways:

1. External CSS File:

Keeping CSS code in a separate file is best practice. In real programming world, we need to keep HTML,
CSS and JavaScript code in separate files and later import them where necessary.

We can create a separate CSS file with an extension of .css and include it to HTML. For example, we can
create a CSS file like this one: index.css

Inside index.css, we can write our CSS code:

18
 p{
color: red;
}

Then we can import index.css to HTML with a <link> tag like below:
<head>
<link rel="stylesheet" href="index.css">
</head><body>

<p> I'm a Text </p>

</body>

So now the HTML file has the CSS code and the changes will apply to the elements.

2. Internal CSS with <style> tag:

Another way where you can write CSS code is inside a <style> tag in HTML. This will keep the CSS code
directly inside the HTML file, rather than in a separate file.
<style> p {
color: red;
}</style><body> <p> I'm a Text </p></body>

3. Inline Style:

The third way is to write CSS rules directly inside an HTML element, with the style attribute. In this method,
we define the CSS rules directly inside the tag and don’t need to create a class for it.
<p style="color: blue; font-size: 22px;"> I'm a Text </p>

2.3What is SQL?
Structured query language (SQL) is a programming language for storing and processing information in a relational database. A
relational database stores information in tabular form, with rows and columns representing different data attributes and the
various relationships between the data values. You can use SQL statements to store, update, remove, search, and retrieve
information from the database. You can also use SQL to maintain and optimize database performance.

Why is SQL important?

Structured query language (SQL) is a popular query language that is frequently used in all types of applications. Data analysts
and developers learn and use SQL because it integrates well with different programming languages. For example, they can
embed SQL queries with the Java programming language to build high-performing data processing applications with major
SQL database systems such as Oracle or MS SQL Server. SQL is also fairly easy to learn as it uses common English keywords
in its statements
19
History of SQL
SQL was invented in the 1970s based on the relational data model. It was initially known as the structured English query
language (SEQUEL). The term was later shortened to SQL. Oracle, formerly known as Relational Software, became the first
vendor to offer a commercial SQL relational database management system.

What are the components of a SQL system?

Relational database management systems use structured query language (SQL) to store and manage data. The system stores
multiple database tables that relate to each other. MS SQL Server, MySQL, or MS Access are examples of relational database
management systems. The following are the components of such a system.

SQL table
A SQL table is the basic element of a relational database. The SQL database table consists of rows and columns. Database
engineers create relationships between multiple database tables to optimize data storage space.

For example, the database engineer creates a SQL table for products in a store:
Product ID Product Name Color ID
0001 Mattress Color 1
0002 Pillow Color 2

Then the database engineer links the product table to the color table with the Color ID:
Color ID Color Name
Color 1 Blue
Color 2 Red

SQL statements
SQL statements, or SQL queries, are valid instructions that relational database management systems understand. Software
developers build SQL statements by using different SQL language elements. SQL language elements are components such as
identifiers, variables, and search conditions that form a correct SQL statement.

For example, the following SQL statement uses a SQL INSERT command to store Mattress Brand A, priced $499, into a table
named Mattress_table, with column names brand_name and cost:

INSERT INTO Mattress_table (brand_name, cost)

VALUES(‘A’,’499’);

Stored procedures
Stored procedures are a collection of one or more SQL statements stored in the relational database. Software developers use
stored procedures to improve efficiency and performance. For example, they can create a stored procedure for updating sales
tables instead of writing the same SQL statement in different applications.

How does SQL work?

Structured query language (SQL) implementation involves a server machine that processes the database queries and returns the
results. The SQL process goes through several software components, including the following.

Parser

20
The parser starts by tokenizing, or replacing, some of the words in the SQL statement with special symbols. It then checks the
statement for the following:

Correctness

The parser verifies that the SQL statement conforms to SQL semantics, or rules, that ensure the correctness of the query
statement. For example, the parser checks if the SQL command ends with a semi-colon. If the semi-colon is missing, the parser
returns an error.

Authorization

The parser also validates that the user running the query has the necessary authorization to manipulate the respective data. For
example, only admin users might have the right to delete data.

Relational engine
The relational engine, or query processor, creates a plan for retrieving, writing, or updating the corresponding data in the most
effective manner. For example, it checks for similar queries, reuses previous data manipulation methods, or creates a new one.
It writes the plan in an intermediate-level representation of the SQL statement called byte code. Relational databases use byte
code to efficiently perform database searches and modifications.

Storage engine
The storage engine, or database engine, is the software component that processes the byte code and runs the intended SQL
statement. It reads and stores the data in the database files on physical disk storage. Upon completion, the storage engine returns
the result to the requesting application.

What are SQL commands?

Structured query language (SQL) commands are specific keywords or SQL statements that developers use to manipulate the
data stored in a relational database. You can categorize SQL commands as follows.

Data definition language

Data definition language (DDL) refers to SQL commands that design the database structure. Database engineers use DDL to
create and modify database objects based on the business requirements. For example, the database engineer uses the CREATE
command to create database objects such as tables, views, and indexes.

Data query language

Data query language (DQL) consists of instructions for retrieving data stored in relational databases. Software applications use
the SELECT command to filter and return specific results from a SQL table.

Data manipulation language

Data manipulation language (DML) statements write new information or modify existing records in a relational database. For
example, an application uses the INSERT command to store a new record in the database.

Data control language

Database administrators use data control language (DCL) to manage or authorize database access for other users. For example,
they can use the GRANT command to permit certain applications to manipulate one or more tables.

Transaction control language

21
The relational engine uses transaction control language (TCL) to automatically make database changes. For example, the
database uses the ROLLBACK command to undo an erroneous transaction.

What are SQL standards?

SQL standards are a set of formally defined guidelines of the structured query language (SQL). The American National
Standards Institute (ANSI) and International Organization for Standardization (ISO) adopted the SQL standards in 1986.
Software vendors use the ANSI SQL standards to build SQL database software for developers.

What is SQL injection?

SQL injection is a cyberattack that involves tricking the database with SQL queries. Hackers use SQL injection to retrieve,
modify, or corrupt data in a SQL database. For example, they might fill in a SQL query instead of a person's name in a
submission form to carry out a SQL injection attack.

What is MySQL?
MySQL is an open-source relational database management system offered by Oracle. Developers can download and use
MySQL without paying a licensing fee. They can install MySQL on different operating systems or cloud servers. MySQL is a
popular database system for web applications.

SQL vs. MySQL

Structured query language (SQL) is a standard language for database creation and manipulation. MySQL is a relational database
program that uses SQL queries. While SQL commands are defined by international standards, the MySQL software undergoes
continual upgrades and improvements.

The world can't live without mobile and web applications in this day and age. Everything is digitized, from
booking cabs to ordering food to make bank transactions. Thanks to the efficient frameworks that provide a
seamless user experience. One such robust frontend library is React. This tutorial on ‘what is React’ will
help you understand the library's fundamentals and work with a simple demo.

2.4What Is React?

React is a JavaScript-based UI development library. Facebook and an open-source developer community run
it. Although React is a library rather than a language, it is widely used in web development. The library first
appeared in May 2013 and is now one of the most commonly used frontend libraries for web development.

React offers various extensions for entire application architectural support, such as Flux and React Native,
beyond mere UI.

22
ReactJS History

When compared to other technologies on the market, React is a new technology. Jordan Walke, a software
engineer at Facebook, founded the library in 2011, giving it life. The likes of XHP, a straightforward HTML
component framework for PHP, have an influence on React. React's newsfeed was its debut application in
2011. Later, Instagram picks it up and incorporates it into their platform.

Why React?

React’s popularity today has eclipsed that of all other front-end development frameworks. Here is why:

 Easy creation of dynamic applications: React makes it easier to create dynamic web applications
because it requires less coding and offers more functionality, as opposed to JavaScript, where
coding often gets complex very quickly.

 Improved performance: React uses Virtual DOM, thereby creating web applications faster. Virtual
DOM compares the components’ previous states and updates only the items in the Real DOM that
were changed, instead of updating all of the components again, as conventional web applications
do.

23
  Reusable components: Components are the building blocks of any React application, and a single
app usually consists of multiple components. These components have their logic and controls, and
they can be reused throughout the application, which in turn dramatically reduces the
application’s development time.

 Unidirectional data flow: React follows a unidirectional data flow. This means that when
designing a React app, developers often nest child components within parent components. Since
the data flows in a single direction, it becomes easier to debug errors and know where a problem
occurs in an application at the moment in question.

 Small learning curve: React is easy to learn, as it mostly combines basic HTML and JavaScript
concepts with some beneficial additions. Still, as is the case with other tools and frameworks, you
have to spend some time to get a proper understanding of React’s library.

 It can be used for the development of both web and mobile apps: We already know that React is
used for the development of web applications, but that’s not all it can do. There is a framework
called React Native, derived from React itself, that is hugely popular and is used for creating
beautiful mobile applications. So, in reality, React can be used for making both web and mobile
applications.

 Dedicated tools for easy debugging: Facebook has released a Chrome extension that can be used
to debug React applications. This makes the process of debugging React web applications faster
and easier.

The above reasons more than justify the popularity of the React library and why it is being adopted by a
large number of organizations and businesses. Now let’s familiarize ourselves with React’s features.

ReactJS Advantages

1. React.js builds a customized virtual DOM. Because the JavaScript virtual DOM is quicker than
the conventional DOM, this will enhance the performance of apps.

2. ReactJS makes an amazing UI possible.

3. Search - engine friendly ReactJS.

4. Modules and valid data make larger apps easier to manage by increasing readability.

5. React integrates various architectures.

6. React makes the entire scripting environment process simpler.

24
 7. It makes advanced maintenance easier and boosts output.

8. Guarantees quicker rendering

9. The availability of a script for developing mobile apps is the best feature of React.

10. ReactJS is supported by a large community.

Advantages and Limitations (Pros and Cons)

Advantages

1. Makes use of the JavaScript structure known as virtual DOM. Since JavaScript's virtual DOM is
quicker than the conventional DOM, this will boost the speed of programs.

2. Can be used with various systems and on both client and server sides is commendable.

3. Components and identify trends make larger apps easier to manage by increasing clarity.

Limitations

1. Only addresses the app's angle and distance; as a result, additional techniques must be selected if
you want a full collection of development tools.

2. Employs inline scripting and JSX, which some programmers might find uncomfortable.

Features of React

React offers some outstanding features that make it the most widely adopted library for frontend app
development. Here is the list of those salient features.

25
JSX

JSX is a JavaScript syntactic extension. It's a term used in React to describe how the user interface should
seem. You can write HTML structures in the same file as JavaScript code by utilizing JSX.

const name = 'Simplilearn';

const greet = <h1>Hello, {name}</h1>;

The above code shows how JSX is implemented in React. It is neither a string nor HTML. Instead, it embeds
HTML into JavaScript code.

Virtual Document Object Model (DOM)

26
The Virtual DOM is React's lightweight version of the Real DOM. Real DOM manipulation is substantially
slower than virtual DOM manipulation. When an object's state changes, Virtual DOM updates only that
object in the real DOM rather than all of them.

 What is the Document Object Model (DOM)?

Fig: DOM of a Webpage

DOM (Document Object Model) treats an XML or HTML document as a tree structure in which each node
is an object representing a part of the document.

 How do Virtual DOM and React DOM interact with each other?

When the state of an object changes in a React application, VDOM gets updated. It then compares its
previous state and then updates only those objects in the real DOM instead of updating all of the objects.
This makes things move fast, especially when compared to other front-end technologies that have to update
each object even if only a single object changes in the web application.

Architecture

In a Model View Controller(MVC) architecture, React is the 'View' responsible for how the app looks and
feels.

27
MVC is an architectural pattern that splits the application layer into Model, View, and Controller. The model
relates to all data-related logic; the view is used for the UI logic of the application, and the controller is an
interface between the Model and View.

Data Binding

Since React employs one-way data binding, all activities stay modular and quick. Moreover, the
unidirectional data flow means that it's common to nest child components within parent components when
developing a React project.

Fig: One-way data binding

Debugging

Since a broad developer community exists, React applications are straightforward and easy to test. Facebook
provides a browser extension that simplifies and expedites React debugging.

This extension, for example, adds a React tab in the developer tools option within the Chrome web browser.
The tab makes it easy to inspect React components directly.

Now that you know the key features of React, let’s move on to understanding the pillars of React.

What is PHP?
PHP is a server side scripting language. that is used to develop Static websites or Dynamic websites or Web
applications. PHP stands for Hypertext Pre-processor, that earlier stood for Personal Home Pages.

PHP scripts can only be interpreted on a server that has PHP installed.

The client computers accessing the PHP scripts require a web browser only.

A PHP file contains PHP tags and ends with the extension “.php”.

What is a Scripting Language?

28
A script is a set of programming instructions that is interpreted at runtime.

A scripting language is a language that interprets scripts at runtime. Scripts are usually embedded into other
software environments.

The purpose of the scripts is usually to enhance the performance or perform routine tasks for an application.

Server side scripts are interpreted on the server while client side scripts are interpreted by the client
application.

PHP is a server side script that is interpreted on the server while JavaScript is an example of a client side
script that is interpreted by the client browser. Both PHP and JavaScript can be embedded into HTML pages.

What does PHP stand for?

PHP means – Personal Home Page, but it now stands for the recursive backronym PHP: Hypertext
Preprocessor.

PHP code may be embedded into HTML code, or it can be used in combination with various web template
systems, web content management system and web frameworks.

PHP Syntax

A PHP file can also contain tags such as HTML and client side scripts such as JavaScript.

 HTML is an added advantage when learning PHP Language. You can even learn PHP without
knowing HTML but it’s recommended you at least know the basics of HTML.
 Database management systems DBMS for database powered applications.
 For more advanced topics such as interactive applications and web services, you will
need JavaScript and XML.

The flowchart diagram shown below illustrates the basic architecture of a PHP web application and how the
server handles the requests.

29
Why use PHP?
You have obviously heard of a number of programming languages out there; you may be
wondering why we would want to use PHP as our poison for the web programming. Below are
some of the compelling reasons.

 PHP is open source and free.

 Short learning curve compared to other languages such as JSP, ASP etc.
 Large community document
 Most web hosting servers support PHP by default unlike other languages such as ASP that
need IIS. This makes PHP a cost effective choice.
 PHP is regular updated to keep abreast with the latest technology trends.
 Other benefit that you get with PHP is that it’s a server side scripting language; this
means you only need to install it on the server and client computers requesting for
resources from the server do not need to have PHP installed; only a web browser would
be enough.
 PHP has in built support for working hand in hand with MySQL; this doesn’t mean
you can’t use PHP with other database management systems. You can still use PHP with
 Postgres
 Oracle
 MS SQL Server
 ODBC etc.
 PHP is cross platform; this means you can deploy your application on a number of
different operating systems such as windows, Linux, Mac OS etc.
30
What is PHP used for & Market share
In terms of market share, there are over 20 million websites and application on the internet
developed using PHP scripting language.

This may be attributed to the points raised above;

The diagram below shows some of the popular sites that use PHP

1. What is Bootstrap?

The web app development toolkit was created by former Twitter employees Mark Otto and
Jacob Thornton (pictured).

The official Bootstrap website describes it as “The most popular HTML, CSS, and JS
framework for developing responsive, mobile-first projects on the web.”

Here’s what that means in plainer terms:

Bootstrap is a giant collection of handy, reusable bits of code written in HTML, CSS,
and JavaScript. It’s also a frontend development framework that enables developers and
designers to quickly build fully responsive websites.

Essentially, Bootstrap saves you from writing lots of CSS code, giving you more time to
spend on designing webpages.

31
It’s also FREE! It’s currently hosted on GitHub and can be downloaded easily from the official
site.

Now that we’ve looked at what exactly it is, let’s look at some other advantages it has for coders
(on top of being free, naturally).

2. Why is Bootstrap used for?

Its responsive grid

No more spending hours coding your own grid—Bootstrap comes with its own grid system
predefined.

Now, you can get straight to filling your containers with content.

Defining custom breakpoints for each column is a snap using their extra small, small, medium,
large, and extra large breaks. You can also simply stick to the default as it might already meet
the needs of your site.

Its responsive images

Bootstrap comes with its own code for automatically resizing images based on the current screen
size. Just add the .img-responsive class to your images, and the predefined CSS rules take care
of the rest.

Let Bootstrap resize your images for you!

It can even change the shape of your images with the addition of classes like img-circle and img-
rounded, and that’s without going back and forth between the code and your design software.

Its components

Bootstrap comes with a whole barrelful of components you can easily tack onto your web page,
including:

 Navigation bars
 Dropdowns
 Progress bars
 Thumbnails
32
Not only is it a breeze to add eye-catching design elements to your webpage, you’ll also be able
to rest assured knowing that every one of them will look great no matter the screen size or
device used to view them. That’s a lot of ready-made functionality right at your fingertips.

For a more complete list of addable features, check out the component documentation.

What is Heroku and What is it Used For?

Heroku’s simple setup makes it an ideal tool for limited budgets or businesses beginning to test
opportunities in the cloud.

Heroku is a cloud service platform whose popularity has grown in recent years. Heroku is so easy to use that
it’s a top choice for many development projects.

With a special focus on supporting customer-focused apps, it enables simple application development and
deployment. Since the Heroku platform manages hardware and servers, businesses that use Heroku are able
to focus on perfecting their apps. And not the infrastructure that supports them.

More time goes towards ensuring that users receive the highest quality experiences as possible.

JSON Web Token (JWT) is an open standard that defines a compact and self-contained way for securely
transmitting information between parties as a JSON object. This information can be verified and trusted
because it is digitally signed. JWTs can be signed using a secret (with HMAC algorithm) or a public/private
key pair using RSA.

Let’s explain some concepts of this definition further.

 Compact: Because of its size, it can be sent through an URL, POST parameter, or inside an HTTP
header. Additionally, due to its size its transmission is fast.
 Self-contained: The payload contains all the required information about the user, to avoid querying
the database more than once.

When should you use JSON Web Tokens?

These are some scenarios where JSON Web Tokens are useful:

 Authentication: This is the typical scenario for using JWT, once the user is logged in, each
subsequent request will include the JWT, allowing the user to access routes, services, and resources
that are permitted with that token. Single Sign On is a feature that widely uses JWT nowadays,
because of its small overhead and its ability to be easily used among systems of different domains.
 Information Exchange: JWTs are a good way of securely transmitting information between parties,
because as they can be signed, for example using a public/private key pair, you can be sure that the
sender is who they say they are. Additionally, as the signature is calculated using the header and the
payload, you can also verify that the content hasn’t changed.

33
What is JavaScript ?

JavaScript is a dynamic computer programming language. It is lightweight and most commonly used as a
part of web pages, whose implementations allow client-side script to interact with the user and make
dynamic pages. It is an interpreted programming language with object-oriented capabilities.
JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of
the excitement being generated by Java. JavaScript made its first appearance in Netscape 2.0 in 1995 with
the name LiveScript. The general-purpose core of the language has been embedded in Netscape, Internet
Explorer, and other web browsers.
The ECMA-262 Specification defined a standard version of the core JavaScript language.

 JavaScript is a lightweight, interpreted programming language.

 Designed for creating network-centric applications.
 Complementary to and integrated with Java.
 Complementary to and integrated with HTML.
 Open and cross-platform

Client-Side JavaScript

Client-side JavaScript is the most common form of the language. The script should be included in or
referenced by an HTML document for the code to be interpreted by the browser.
It means that a web page need not be a static HTML, but can include programs that interact with the user,
control the browser, and dynamically create HTML content.
The JavaScript client-side mechanism provides many advantages over traditional CGI server-side scripts.
For example, you might use JavaScript to check if the user has entered a valid e-mail address in a form field.
The JavaScript code is executed when the user submits the form, and only if all the entries are valid, they
would be submitted to the Web Server.
34
JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other actions
that the user initiates explicitly or implicitly.

Advantages of JavaScript

The merits of using JavaScript are −

 Less server interaction − You can validate user input before sending the page off to the
server. This saves server traffic, which means less load on your server.
 Immediate feedback to the visitors − They don't have to wait for a page reload to see if they
have forgotten to enter something.
 Increased interactivity − You can create interfaces that react when the user hovers over them
with a mouse or activates them via the keyboard.
 Richer interfaces − You can use JavaScript to include such items as drag-and-drop
components and sliders to give a Rich Interface to your site visitors.

Limitations of JavaScript

We cannot treat JavaScript as a full-fledged programming language. It lacks the following important features
−
 Client-side JavaScript does not allow the reading or writing of files. This has been kept for
security reason.
 JavaScript cannot be used for networking applications because there is no such support
available.
 JavaScript doesn't have any multi-threading or multiprocessor capabilities.
Once again, JavaScript is a lightweight, interpreted programming language that allows you to build
interactivity into otherwise static HTML pages.

JavaScript Development Tools

One of major strengths of JavaScript is that it does not require expensive development tools. You can start
with a simple text editor such as Notepad. Since it is an interpreted language inside the context of a web
browser, you don't even need to buy a compiler.
To make our life simpler, various vendors have come up with very nice JavaScript editing tools. Some of
them are listed here −
 Microsoft FrontPage − Microsoft has developed a popular HTML editor called FrontPage.
FrontPage also provides web developers with a number of JavaScript tools to assist in the
creation of interactive websites.
 Macromedia Dreamweaver MX − Macromedia Dreamweaver MX is a very popular HTML
and JavaScript editor in the professional web development crowd. It provides several handy
prebuilt JavaScript components, integrates well with databases, and conforms to new
standards such as XHTML and XML.
 Macromedia HomeSite 5 − HomeSite 5 is a well-liked HTML and JavaScript editor from
Macromedia that can be used to manage personal websites effectively.

Where is JavaScript Today ?

The ECMAScript Edition 5 standard will be the first update to be released in over four years. JavaScript 2.0
conforms to Edition 5 of the ECMAScript standard, and the difference between the two is extremely minor.

35
The specification for JavaScript 2.0 can be found on the following site: http://www.ecmascript.org/
Today, Netscape's JavaScript and Microsoft's JScript conform to the ECMAScript standard, although both
the languages still support the features that are not a part of the standard.

CHAPTER 3

36
 SUMMARY OF DUTIES

I have been assigned the task to provide translation(internationalization) for collecting web extension the
Assistant of Anuj Kalbalia and Adity sood, and suggest a solution making dynamic content of a webpage in
general. As previously mentioned, the object contains information of the user traces such as date and Mobile
Application where I fit in. For a better user experience, an option to choose a language of preference had to
be added to the pages displaying and managing the web app This is way of
establishing good communication with the user, while making it accessible for a wider audience.
Furthermore, the solution had to be extended and modified in order to comply with any web page written in
HTML. More details on my weekly tasks can be found in Appendix A. Implementations will be discussed
further ahead in the report.

Technical Aspect:
For the completion of the tasks the following web languages and scripts have been used: HTML for the
construction of the layout, CSS for the design of the layout,
JavaScript for dynamic functioning and JSON for data storage.
NPM – node package manager is cross-browser extension platform was used to provide compatibility to the
extension for all major browsers. The NPM includes useful features.
Along with the options to write background scripts that process large data in background and browser
management, the Heroku storage has been found useful to including storing user made changes, such as the
language preference.

Solutions:
During the first half of my internship I was working on the translation of the web plug-in .The extension
consists of a blog window which allows the user to choose when traces are collected by a. Notifications are
therefore used to notify the user whether tracesare collected while they are browsing. Additional option page
is availableinorder to manually add a new trace.
As seen on the figure 1 and 2 (see page *), a list of three flags of the countriesof
the languages are displayed on the upper right corner of both pop-up andoptionwindows. A single click
changes the language settings of the extension, storingthe preference in local storage for future reference.
I have used two different strategies for the translation of the windows. However, ageneral solution has been
developed and will be further explained in the report.
For better display in the po-up I have decided to include the image buttonsasanother header cell, whereas in
the option window they are stored insidealist
table.
The solution is specific for the extension as all text values are collectedandreplaced using id recognition of
predefined id’s.
By clicking a flag, a function according to the desired language is called. What thefunction does, is create a
JSON object which contains the new text values tobedisplayed and replace the previous ones by calling the
tags by their id’s

Future Scopes:
I gained so much experience from this Internship. If I did not had this experience it would every hard for me
to find a suitable job. As we know finding work can be a challenge anticompetitive world. In my career
opportunity, this internship will support me. And my future scopes will be after a good internship:
• I can work in an IT farm.
• Working as a software engineer is possible.
• Can persue career in web design.
• Woking as a web developer is a possibility
. • Can persue Mobile app developing.
• Can work as a QA Tester

37
Conclusion:
As we all know, our country is a developing country and it dreams to be a developed country soon
Day by day our job sector is getting more and more competitive. As a result every other company is
searching for experienced candidates. Finally, I can claim it's internship that helps me gain experience.
Thanks to Internshala private limited, I gained so much more in-depth knowledge of technical skills and
personal skills This project helped me gather theoretical and practical knowledge about HTML4/5, CSS,
PHP, MYSQL,reactjs and other programming language. Beforehand I was confident about frontend of
websites. Now I am also confident and competent in backbends. For those students who are willing to work
in web development, there are huge opportunity available. To give them the scope for online work and
development of website, most private and public organizations employ web designers. With the rapid
emergence of the digital industry, web development professionals ' demand is growing, and in the coming
days this has already availed so many job opportunity for newcomers. My Industrial training gave me a good
scope to learn and discover my potentials. I am very grateful to them. Now I am able to develop web and
mobile applications. I was fortunate forgetting the chance to meet the real life software development
environment.

Challenges:
During the design of the code, different types of problems have to be met. Also widespread:
• Syntax error.
• Fatal error
• Find out the problem and try to solve that.

Problems and their Solutions

Issues based on development can be faced as the result it requires more vocabulary of form markups,
methods, objects, modifiers, and many ways to build software or plan. And it's not just web development
issues that have more solution that can be easy and quick.

Problems
I faced so many problems to create while working with CSS. It's very easy, but sometimes it doesn't match
my expectations and is placed in the right place. Web design is not a simple task. To come up with a unique
web design it takes a lot of creativity, brainstorming, cooperation of the group and uniqueness. A web
designer goes through a lot of obstacles in regular basis. Only the web designs that were in the process of
constant development and recursive thinking can satisfy the target market and clients. This creates a
challenging environment for designing websites. On the opposite, web designers face some other obstacles.
Such tasks include maintaining a website that is sensitive enough to be viewed and accessed on all phones.
Websites sometimes take time to load, so making website loading faster is one of the toughest challenges for
web design to provide a better user experience. There is another issue that happens most often. Clients face
issues with the website and complainit the the developer. But when developers check the website it look
absolutely fine tothem. These issues can be caused by out dated web servers or when clients make incorrect
change to them. Finding the sources of these issues can be time consuming and developer had to tackle this
in a daily basis.

38
 Implementation Using

W eb
Development

39
40
  

Info
 This is a blogging PWA with user authentication and authorization. There is also a social login
option, to login using your Twitter or Google accounts. The blog posts are displayed in the reverse
chronological order by default.
 There is no exploitation of data, as the app only requires access to your accounts to fetch your unique
ID for authentication/authorization purposes, and no personal details(except your registred user name
on the social account) is used by the application.

41
  The frontend of the app is built using React and I have used Bootstrap classes for styling the
compnents in addition to my local CSS styles.
 It is a blog app that lets users read the existing blog posts without logging in, and lets them share
their thoughts using the anonymous comment section.
 Each comment has a unique jdenticon icon to represent the user who commented anonymously
 There is also a profanity filter to disallow usage of certain NSFW words in the comments' section.
This is not an attempt to hinder freedom of speech, but instead it is a necessary aid to prevent misuse
of the platform by nefarious users.
 In order to write a new blog post, the user has to login using one of the social media login options
provided. The react-social-login package is being used to provide the user authentication and
authorization.
 It has been deployed using Heroku's free tier and the Mongodb Atlas's cloud service is used for the
database service. The access to the database is restricted to only 1 authorised user, and as mentioned
earlier, there is no personal user data stored in it.
 The rich editor used is the CKEditor 5's React WYSIWYG component (What You See Is What You
Get) with a toolkit that supports bold, italics, hyperlinks, image embeds, indentations, blockquotes,
video embeds, lists (ordered and unordered) and options to undo and redo changes as needed.
 The application currently has more then 60 registered users, you can check out the app here or by
using the link in the description section

Challenges faced
There were a few challenges that came up during the development of the application. In this section, I aim to
clarify my approach in overcoming these challeges, as a way to help you understand the code better, in case
you decide to dive in!

Handling user authentication and user authorization

I initially intended on using the authentication token strategy to authenticate users, but that process of
authentication seemed to be a little more cumbersome for the final user. This is why the social logins was the
next solution to try and implement using the passport-google-oauth and the passport-twitter strategies. The
server side of the implementation involves obtaining a JWT from the client, based on the unique IDs
assigned by either Google/Twitter and processing it to validate the user session or revoke it. The client side
implementation involves displaying the correct social login buttons using react-google-login and react-
twitter-login. Note that these npm packages aren't meant to be used as stand-alone modes of user
authentication in production sites. They are only used to obtain the valid JWT in each case, these session
cookies are stored in the local storage of the user's browser for a day, and are then timed out (user is logged
out) in case of inactivity. The credentials for the google and twitter login can be obtained using the developer
accounts for both platforms.

Handling rich editor text/sanitizing the blog data

Another important issue that I realized during the development process was that the blog input is basically an
open ended user input that is being stored in the DB and is displayed to the user screens(for users who
haven't registered, as well as registered users). This could lead to potential XSS attacks as any malicious
code injection can also take place in the comment section/ blog post input. To avoid any such risks, it is
important to sanitize the user input before POSTing it to the DB. The sanitize-html-react package is a handy
subsidiary to the more widely used sanitize-html package, which removes any potential script tags from
begin executed as part of the user input blog post/comment.

Rich Editor/Markdown Editor

42
Although it may seem obvious that the editor used in a blogging platform needs to support multiple text
editing options, it was a little challenging to find the appropriate solution to fit the needs of the current
project. There were many WYSIWYG editors which provided sufficient documentation too, but in the end,
the most optimal solution to the issue was to use the CKeditor rich HTML editor's React component
implementation, with a custom toolbar configuration.

Responsive Design/PWA implementation

The Bootstrap classes allowed for the design of the app to become a responsive onw, without many custom
CSS media queries. The app design is minimal by design, and the emphasis is laid on the blog posts itself,
rather than the design of the app's compnents. The app also has PWA support due to React's ability to
activate service workers to cache the required data, as set by the developer. It is not an ideal type of app
structure to facilitate the PWA design, but it can work to cache specific blog posts incase it was already
accessed beforehand.

Dealing with an anonymous comment section

The choice to make the comment section anonymous was a deliberate design choice, as it makes it easier to
let users engage with the application without much hassle. But the downside to this is that the comment
section can seem dull/artificial, without a user name or photo associated with the comment. To overcome
this, I have included a unique Jdenticon or user icon, for every comment made under the blog post. The
comments are displayed in reverse chronological order and will always have a unique icon associated with it!
The other issue with the anonymous comments section, which became apparent after the initial build being
pushed to production, was that users now used language that was NSFW. Since this is a project I intend to
display on my portfolio, for potential employers, it was necessary to deal with words can be deemed NSFW.
The easiest solution is to restrict only authenticated users to comment, along with their public social media
name. But trolls with a fake account can easily bypass this. Hence it became necessary to censor certain
words from the posted comments using * symbols. This was accomplised using the package bad-
words package to censor NSFW words unconditionally. There is scope for improvement in terms of
implementing a custom profanity filter, but that seemed to be overkill for the task at hand. It is not my
intention to hinder anybody's freedom of speech, but a reactionary decision against a few bad actors, in an
effort to maintain the application's presentability.

Potential Improvements
 A UX refactor.
 Dashboard implementation for all registered users.
 More social login options including the likes of Github, Facebook, Amazon or Apple.
 Fuzzy Search implementation.
 Integrations with popular blogging platforms like Medium or dev.to, to import already published
articles.
 A system to 'like' or upvote potentially useful articles.

Any more suggestions are always welcome in the PRs!

Technologies Used
Some of the technologies used in the development of this web application are as follow:

 SQL: it is database to store data in tables collections.

 React.js: A JavaScript library for building user interfaces.
43
  Php: A Scripting language to use front end as well backed to provide seemless experience.
 Heroku: A platform(PaaS) to deploy full stack web applications for free.
 JSON Web Tokens or JWTs: A standard to securely authenticate HTTP requests
 Bootstrap5: A popular framework for building responsive, mobile-first sites.

It can be noted that React can be swapped out in favor of any other popular frontend framework like Vue,
Angular, Svelte or Ember. The server side can be implemented using Deno/Koa, flask/Django and similarly
the data can also be modelled using the similar idea but with a SQL type DB like PS-SQL or MSSQL

44
 CHAPTER 4
WORKING EXPERIENCE

4.1PROJECTS CARRIED OUT

We are developed a Blog website that delivers blogs of coding those provide a better platefrom to learn
new things that can’t be available on the internate, this ull stack blog helps many students.

4.2 SUPERVISORY WORKS

In super vision of our mentor Anuj and Aditya we gain lots of experience and he helped us to solve many
problem regarding web development, he help us to improve speed of learning and provide a wireframe
concept to visualize problem and technique to solve a problem.

4.3PROBLEMS ENCOUNTERED

I faced so many problems to create while working with CSS. It's very easy, but sometimes it doesn't match
my expectations and is placed in the right place. Web design is not a simple task. To come up with a unique
web design it takes a lot of creativity, brainstorming, cooperation of the group and uniqueness. A web
designer goes through a lot of obstacles in regular basis. Only the web designs that were in the process of
constant development and recursive thinking can satisfy the target market and clients. This creates a
challenging environment for designing websites. On the opposite, web designers face some other obstacles.
Such tasks include maintaining a website that is sensitive enough to be viewed and accessed on all phones.
Websites sometimes take time to load, so making website loading faster is one of the toughest challenges for
web design to provide a better user experience. There is another issue that happens most often. Clients face
issues with the website and complaint the developer. But when developers check the websites it look
absolutely fine to them. These issues can be caused by out dated web servers or when clients make incorrect
changes to them. Finding the sources of these issues can be time consuming and developer had to tackle this
in a daily basis.

4.4 PROBLEMS SOLVED

Web development really is so fascinating and at the same time tough to me, I will learn and understand
several goals with interest through internship training as if after studying I could understand web
development and it is so interesting then all the other languages to me. During my training period, I solved
the CSS and other problems. Clean software eliminate errors that can impact the load of site. Automated
website monitoring solutions frequently enable developers to view the websites of their customers in real
time and set alert to notify them when potential issues arise. Not only does this allow developers to
recognize an issue before the customer does it, it also gives them the opportunity to address it in many
situations before the problem affects the business.

45
 CHAPTER 5

SUMMARY

Student should provide an overall discussion in this section and arrive at a conclusion with regards
to the industrial training undergone. Subjects that may be presented are:

5.1TYPES OF EXPERIENCE GAINED

There is good time in industrial training the many problem we solved along with project, many helping
hands provide guidance of project to improve better skills and enhance our talent. We gain lots of exposure
and people help and also we make network with them.

5.2PROBLEMS

Web development really is so fascinating and at the same time tough to me, I will learn and understand
several goals with interest through internship training as if after studying I could understand web
development and it is so interesting then all the other languages to me. During my training period, I solved
the CSS and other problems. Clean software eliminates unforeseen errors that can impact the load of site.
Automated website monitoring solutions frequently enable developers to view the websites of their
customers in real time and set alerts to notify them when potential issues arise. Not only does this allow
developers to recognize an issue before the customer does it, it also gives them the opportunity to address it
in many situations before the problem affects the business.

5.3VIEWS AND RECOMMENDATIONS

I would like to refer to internshala to provide great learning experience and good explore about web
development industry,

I would like to thanks CEO of internshala to provide a great platform for learning.

46
 CHAPTER 6

REFERENCES

[1] https://itsourcecode.com/uml/e-commerce-website-dfd-levels-0-1-2-best-dataflow-diagrams-for-2021/
[2] https://stackoverflow.com/
[3] https://www.w3schools.com/html/
[4] https://getbootstrap.com/
[5] https://trainings.internshala.com/?
[6] https://reactjs.org/
[7] https://www.php.net/

47
 CHAPTER 7

APPENDIX

• MERN- Mongodb, Express, React, Node

• Html- Hypertext Markup Language

• CSS- Cascading Style Sheet

• DevTools- Development Tools

• API- Application Programming Interface

• GUI- Graphical User Interface

• MySQL- My Structured Query Language

• DOM- Document Object Model

• JS- Javascript

• HTTP- Hypertext Transfer Protocol

• NPM- Node Package Manager

• URL- Uniform Resource Locator

• IP- Internet Protocol

• LAN- Local Area Network

• XAMPP- X-operating system, Apache, MySQL, PHP, Perl

• PHP- Hypertext Preprocessor
48