INTERNSHIP REPORT

A report submitted in partial fulfillment of the requirements for the Award of

Degree of

BACHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE AND ENGINEERING (IoT)
By

K.GANESH

Regd.no:20ME1A928
Under supervision of
Mr.Sarvesh Agarwal, CEO
Scholiverse educare pvt.Ltd, Gurgaon.
th
(Duration: 13th September, 2022 to 7 November, 2022)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING (IoT)

RAMACHANDRA COLLEGE OF ENGINEERING
Approved by AICTE, Permanently affiliated to
JNTU, Kakinada
ELURU, ANDHRA PRADESH
2020 – 2024

1
 DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING (IoT)
RAMACHANDRA COLLEGE OF ENGINEERING
Approved by AICTE, Permanently affiliated to JNTU, Kakinada
ELURU, ANDHRA PRADESH
2020 – 2024

CERTIFICATE

This is to certify that the “Internship report” submitted by R.PHANI VARMA (Regd. No:
20ME1A4949) is work done by him and submitted during 2022 – 2023 academic year, in partial
fulfillment of the requirements for the award of the degree of BACHELOR OF
TECHNOLOGY in COMPUTER SCIENCE AND ENGINEERING (IoT), at Scholiverse
educare pvt.Ltd, Gurgaon.

Internship coordinator Mr.P.Chakradhar

Head of the Department
Department of CSE(IoT)

2
-

3
ACKNOWLEDGEMENT

First I would like to thank Mr.Sarvesh Agarwal, CEO, Head, of ,

SCHOLIVERSE, Gurgaon for giving me the opportunity to do an internship within the
organization.

I also would like all the people that worked along with me
SCHOLIVERSE, Gurgaon with their patience and openness they created an
enjoyable working environment.

It is indeed with a great sense of pleasure and immense sense of gratitude

that I acknowledge the help of these individuals.

I am highly indebted to Principal Dr.M.MURALIDHARA RAO, for the

facilities provided to accomplish this internship

I would like to thank my Head of the Department Mr.P.CHAKRADHAR

forhis constructive criticism throughout my internship.

I would like to thank , T.KOTI MANI KUMAR internship coordinator

Department of CSE for their support and advices to get and complete internship in
aboveSaid organization.

I am extremely great full to my department staff members and friends who

helped me in successful completion of this internship
K.GANESH
Regd.no:20ME1A4928.

4
 ABSTRACT
Web development refers to the building, creating, and maintaining of websites.
It includes aspects such as web design, web publishing, web programming, and
database management. It is the creation of an application that works over the
internet i.e. websites.
Nowadays there is a wide prevalence of various devices that can be connected
online for different kind of activities, and among others, for browsing web
pages. Web design is constantly changing and adjusting due to the appearance
of different sizes and types of devices. Web design from the 1990s is greatly
different from current web pages. The main goal of the design, is not the design
itself, but to enable web content transfer on more readable and comprehensible
way, no matter which device is used to present web content, desktop or hybrid
computer, various mobile or wearable device. This paper shows development of
web design from its beginning to nowadays modern design, and what we can
expect in future.

Organisation Information:
Internshala is an internship and online training platform, based in Gurgaon, India.Foundedby
Sarvesh Agarwal, an IIT Madras alumnus, in 2011, the website helps students find
internships with organisations in India. The platform, which was founded in 2010,
started out as a WordPress blog that aggregated internships across India and articles on
education, technology and skill gap.Internshala launched its online trainings in 2014.Asof
2018, the platform had 3.5 million students and 80,000 companies. In 2011, the website became
a part of NASSCOM 10K Startups. In 2015, Internshala was a finalist in People Matters
TechHR 2015 Spotlight Awards under 'Futurism in Recruitment' category.

5
 INDEX
S.no CONTENTS Page no

1 Introduction .............................................................................................. 12

2 Modules .......................................................................................... 13

3 Description of internship ................................................................ 14

4 HTML............................................................................................15

5 CSS ............................................................................................... 16

6 BOOTSTRAP ................................................................................18

7 DBMS ...........................................................................................21

8 PHP...............................................................................................23

9 JAVASCRIPT .............................................................................. 25

10 REACT ....................................................................................... 28

11 Reflection on the internship ............................................................ 30

12 Conclusion ................................................................................... 32

6
 Learning Objectives/Internship Objectives

 Internships are generally thought of to be reserved for college students looking to gain
experience in a particular field. However, a wide array of people can benefit from
Training Internships in order to receive real world experience and develop their skills. 

 An objective for this position should emphasize the skills you already possess in the
area and your interest in learning more

 Internships are utilized in a number of different career fields, including architecture,

engineering, healthcare, economics, advertising and many more.

 Some internship is used to allow individuals to perform scientific research while others
are specifically designed to allow people to gain first-hand experience working.

 Utilizing internships is a great way to build your resume and develop skills that can
be emphasized in your resume for future jobs. When you are applying for a Training
Internship, make sure to highlight any special skills or talents that can make you stand
apart from the rest of the applicants so that you have an improved chance of landing
the position.

7
 WEEKLY OVERVIEW OF INTERNSHIP ACTIVITIES

1 st DATE DAY NAME OF THE TOPIC/MODULE

WEEK COMPLETED
Tuesday Setting up local environment
13/09/22
Wednesday Introduction to HTML
14/09/22
15/09/22 Thursday HTML Tags
16/09/22 Friday Lists,Tables and Forms
17/09/22 Saturday CSS selectors
19/09/22 Monday Length and Colors

2
nd DATE DAY NAME OF THE TOPIC/MODULE
WEEK COMPLETED
Tuesday CSS properties
20/09/22
Wednesday Box Model
21/09/22
Thursday Inspect Element
22/09/22
Friday Display and Position
23/09/22
Saturday Structuring a Web Page
24/09/22
Monday Flex box,Media Queries
26/09/22

8
3
rd DATE DAY NAME OF THE TOPIC/MODULE
WEEK COMPLETED
Tuesday Introduction to BootStrap
27/09/22
Wednesday Layout and Components
28/09/22
Thursday Introduction to DBMS
29/09/22
Friday Basic components and Terminologies
30/09/22
Saturday SQL Queries -Data base Related
01/10/22
Monday SQL Queries- tables related
03/10/22

4 th DATE DAY NAME OF THE TOPIC/MODULE

WEEK COMPLETED
Tuesday SQL Queries-Records Related
04/10/22
Wednesday Designing a Database
05/10/22
Thursday Database Relationships
06/10/22
Friday Join Queries
07/10/22
Saturday Importing and Exporting a DataBase
08/10/22
Monday PHP:Introduction and Installation
10/10/22

9
5
th DATE DAY NAME OF THE TOPIC/MODULE
WEEK COMPLETED
Tuesday Variables and Operators
11/10/22
Wednesday Conditional Statements
12/10/22
Thursday Loops
13/10/22
Friday Arrays
14/10/22
Saturday Strings and Functions
15/10/22
Monday Form Submission
17/10/22

6 th DATE DAY NAME OF THE TOPIC/MODULE

WEEK COMPLETED
Tuesday Data Base Communication
18/10/22
Wednesday Cookies and Sessions
19/10/22
Thursday Introduction to Javascript
20/10/22
Friday Variables and Operators
21/10/22
Saturday Conditional Statements and Loops
22/10/22
Monday Functions, Objects and Classes
24/10/22

10
7
th DATE DAY NAME OF THE TOPIC/MODULE
WEEK COMPLETED
Tuesday Arrays, Strings
25/10/22
Wednesday Debugging JS using inspect element
26/10/22
Thursday Introduction to React
27/10/22
Friday Creating an Element
28/10/22
Saturday JavaScript: JSX
29/10/22
Monday JS: Components
31/10/22

8 th DATE DAY NAME OF THE TOPIC/MODULE

WEEK COMPLETED
Tuesday Props
01/11/22
Wednesday States
02/11/22
Thursday Managing States and DataFlow
03/11/22
Friday Create React App
04/11/22
Saturday Breaking into Modules
05/11/22
Monday Building project using React
07/11/22

11
1. INTRODUCTION
Web Site is an assortment of related web pages, including mixed media content, typically
related to a typical name, and distributed on at least one web server. A site might be open
through a public Web Protocol (IP) network, such as the Internet, or a confidential nearby are
network (LAN), by referring to a uniform asset locator (URL) that recognizes the webpage.

Web Sites can have many capabilities and can be utilized in different fashions; a site can be
an individual website, a business site for a company, a government site or a non-benefit
association website. Websites are commonly devoted to a specific subject or purpose, ranging
from diversion and person to person communication to giving news and education. All freely
open sites all in all comprise the overall web, while private sites, ,for example, an
organization's site for its employees, are regularly a piece of an intranet.

Web improvement is an expansive term for the work engaged with fostering a site for the
web or an intranet. Web advancement can go from fostering the simplest static single page of
plain text to the most intricate marry based web applications electronic businesses, and
informal community services. Among web professionals, "web advancement" typically
alludes to the fundamental non-plan parts of building websites: writing markup and coding…
..
In 2009 the Internet celebrated its 40th anniversary, and the World Wide Web had been in
existence for over 15 years. The concepts of computer networks and hypertext on which these
technologies rely are only a little older. And yet the speed of development of these
technologies, the speed of uptake by companies, and the speed of acceptance by consumers is
unlike anything mankind has witnessed. Although both the Internet and the Web are firmly
rooted in academic, altruistic endeavour, there is no doubt that the commercial interests are
currently driving much of the technological development. This module aims to prepare you
for contributing to this endeavour by helping you to understand the basic ideas and
technologies behind the Internet, and giving you the opportunity to design and write Web
pages using HTML5 and JavaScript.

How to Setup a Website?

A website is composed of several elements and while setting up a website, you would have to take
care of each of them.

 To set up a website and make it live, you should first purchase a hosting plan.

 Select a domain name for this website.

 Point the DNS records to the server or the hosting provider.

 Develop the content that you want to publish on the website.

 Check if you need to purchase a public certificate and install it.

12
 2. MODULES

1. WEB DEVELOPMENT WITH HTML

2. WEB DEVELOPMENT WITH CSS

3. WEB DEVELOPMENT WITH BOOTSTRAP

4. WEB DEVELOPMENT WITH DBMS

5. WEB DEVELOPMENT WITH PHP

6. WEB DEVELOPMENT WITH JS

7. WEB DEVELOPMENT WITH REACT

13
 3. DESCRIPTION OF INTERNSHIP

The Web Development internship offers practical work experience and an introduction to creating
and improving web-based systems. This internship will involve challenging opportunities, real
world projects, and regular interaction with staff. It’s a fantastic opportunity to gain hands-on
experience in the web and/or app development field with an award-winning innovation team.

 Use their learned skills, knowledge and abilities to develop web sites for the internet 
 Apply basic design principles to present ideas, information, products, and services on
websites
 Apply basic programming principles to the construction of websites
 Effectively manage website projects using available resources
 Demonstrate communication skills, service management skills, and presentation skills
 Complete job preparation tasks including writing resumes and cover letters,
conducting job interviews and developing an ePortfolio
 Apply employability skills including fundamental skills, personal management skills,
and teamwork skills
Upon successful completion of the INTERNSHIP, graduates should be able to:

 Develop front end website architecture

 Design user interactions on web pages
 Develop back end website applications
 Create servers and databases for functionality
 Develop adaptive content for multiple devices (cell phone, tablets, etc.)Ensure cross-
platform optimization for mobile phones
 Ensure responsiveness of applications
 Work alongside graphic designers for web design features
 Manage a project from conception to finished product
 Design and develop Application Programming Interfaces (APIs)
 Meet both technical and consumer needs for a web development project 
 Learn to research new methods of development in web applications and programming
languages
 Prepare mock-ups and storyboards for a web development project
 Consult with clients to develop and document web site requirements
 Demonstrate communication skills, service management skills, and presentation skills
 Complete job preparation tasks including writing resumes and cover letters,
conducting job interviews and developing an ePortfolio

14
4. HTML
HTML is a format that tells a computer how to display a web page. The documents
themselves are plain text files with special "tags" or codes that a web browser uses to
interpret and display information on your computer screen. HTML stands for Hyper Text
Markup Language .An HTML file is a text file containing small markup tags . The markup
tags tell the Web browser how to display the page An HTML file must have an htm or
html file extension.
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Save the file as mypage.html. Start your Internet browser. Select Open (or Open Page) in the
File menu of your browser. A dialog box will appear. Select Browse (or Choose File) and
locate the html file you just created - mypage.html - select it and click Open. Now you should
see an address in the dialog box, for example C:\MyDocuments\mypage.html. Click OK, and
the browser will display the page.
HTM or HTML Extension?
When you save an HTML file, you can use either the .htm or the .html extension. The .htm
extension comes from the past when some of the commonly used software only allowed three
letter extensions. It is perfectly safe to use either .html or .htm, but be consistent. mypage.htm
and mypage.html are treated as different files by the browser. How to View HTML Source A
good way to learn HTML is to look at how other people have coded their html pages. To find
out, simply click on the View option in your browsers toolbar and select Source or Page
Source. This will open a window that shows you the actual HTML of the page.
HTML Tags
HTML tags
HTML tags are used to mark-up HTML elements
HTML tags are surrounded by the two characters < and >
The surrounding characters are called angle brackets
HTML tags normally come in pairs like<b> and </b>.
The first tag in a pair is the start tag, the second tag is the end tag
The text between the start and end tags is the element content
HTML tags are not case sensitive<b>and <B> means the same.

15
5. CSS
The main styling is stored in an external spreadsheet, although the HTML DOM style object
has also been used to change some settings while the JavaScript is being loaded. For
example the Save button for the edit module has set visibility 8 to “hidden” in the external
stylesheet, but the property changes to “visible” when the edit button is clicked to avoid
potential confusion. Another method I have used to change properties inside JS is the jQuery
css ()method. I have found it to be effective in changing background and border properties of
objects.
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a
document written in HTML or XML (including XML dialects such as SVG, MathML Or
XHTML). CSS describes how elements should be rendered on screen, on paper, in speech,
or on other media.
CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter
the font, colour, size, and spacing of your content, split it into multiple columns, or add
animations and other decorative features. This module provides a gentle beginning to your
path towards CSS mastery with the basics of how it works, what the syntax looks like, and
how you can start using it to add styling to HTML.

CSS Styling text

With the basics of the CSS language covered, the next CSS topic for you to concentrate on is
styling text — one of the most common things you'll do with CSS. Here we look at text
styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop
shadows, and other text features. We round off the module by looking at applying custom
fonts to your page, and styling lists and links.

CSS Lay out

At this point we've already looked at CSS fundamentals, how to style text, and how to style
and manipulate the boxes that your content sits inside. Now it's time to look at how to place
your boxes in the right place in relation to the viewport, and to each other. We have covered
the necessary prerequisites so we can now dive deep into CSS layout, looking at different
display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the
legacy techniques you might still want to know about.

CSS selectors
CSS selectors define the pattern to select elements to which a set of CSS rules are then
applied.

Basic selectors

16
Universal selector

Selects all elements. Optionally, it may be restricted to a specific namespace or

to all namespaces.

Syntax: * ns|* *|*

Example: * will match all the elements of the document

Type selector

Selects all elements that have the given node name.

Syntax: elementname

Example: input will match any <input> element.

Class selector

Selects all elements that have the given class attribute.

Syntax: .classname

Example: .index will match any element that has class="index".

ID Selector

Selects an element based on the value of its id attribute. There should be only
one element with a given ID in a document.

Syntax: #idname

Example: #toc will match the element that has id="toc".

Attribute selector

Selects all elements that have the given attribute.

Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [a

ttr$=value] [attr*=value]

17
6. BOOTSTRAP

Bootstrap is a coding language which uses HTML, CSS, JavaScript, J Query and
other markup or scripting languages to code websites.

 HTML, CSS displays websites perfectly only for one particular device like a
desktop.
 So will not be properly viewable to other devices like mobile.
 Imperative for developers to develop different websites compatible with
different devices.
 With the use of Bootstrap, an enterprise needs to have only one website which
will automatically resized depending on the device used.
 So Bootstrap addresses this constraint by making one website compatible with
all devices.

Bootstrap is an HTML, CSS & JS Library that focuses on simplifying the development of
informative web pages (as opposed to web apps). The primary purpose of adding it to a web
project is to apply Bootstrap's choices of colour, size, font and layout to that project. As such,
the primary factor is whether the developers in charge find those choices to their liking. Once
added to a project, Bootstrap provides basic style definitions for all HTML elements. The
result is a uniform appearance for prose, tables and form elements across web browsers. In
addition, developers can take advantage of CSS classes defined in Bootstrap to further
customize the appearance of their contents. For example, Bootstrap has provisioned for light-
and dark-coloured tables, page headings, more prominent pull quotes, and text with a
highlight.

The most prominent components of Bootstrap are its layout components, as they affect an
entire web page. The basic layout component is called "Container", as every other element in
the page is placed in it. Developers can choose between a fixed-width container and a fluid-
width container. While the latter always fills the width with the web page, the former uses
one of the five predefined fixed widths, depending on the size of the screen showing the
page:

 Smaller than 576 pixels

 576–768 pixels
 768–992 pixels
 992–1200 pixels
 Larger than 1200 pixels

18
8 Reasons Why You Should Use Bootstrap
Bootstrap gained immediate popularity after its launch and for several good reasons.
Here are just some of the features to show how game-changing this framework is
and why you should consider using it.

1. Time-saving

Working on a project that has a number of templates can be time-consuming.

Furthermore, even a small design change can lead to hours of manual editing
over multiple webpages, especially if you’re not careful.

With Bootstrap, you get to use pre-made design themes and templates as your
starting point. It allows modification of its code to make the framework suit
your project’s needs. In addition, any changes you make during the
development process will also affect all of the webpages altered by Bootstrap.
So, say goodbye to hours of coding from scratch!

2. Easy to Use

Bootstrap is very simple to use – the setup process doesn’t take too long and is
relatively easy, even for beginners. While it’s not mandatory, having basic
knowledge of HTML, CSS and JavaScript will undoubtedly help you modify
the code with ease. Check out Bootstrap’s documentation page to learn more.

3. Responsive Grid System

One of today’s most significant demands in terms of web development is

making sure that websites are responsive and mobile-friendly. Bootstrap has
that covered with their dedicated mobile-first grid system – it can divide the
screen into twelve columns to accommodate various screen sizes, thus making
its web design adaptable to all kinds of devices.

Moreover, by taking advantage of the grid system’s classes, you can make
certain elements visible only on a specific type of device.

4. Customizable

If you’re not happy with Bootstrap’s design template, you can add your own
twist to its CSS file. You can also combine it with the existing code and make
them complement each other’s functions. This ability is particularly useful if

19
you want to create a unique look for your website but don’t have the time or
CSS knowledge to start everything from scratch.

You can also create a custom version of Bootstrap via its customization page. In
order to do this, you have to exclude all of the components and plugins that you
don’t need before downloading the Bootstrap file. Additionally, there’s a
section where you can change variable values, thus allowing you to make
templates of your own.

5. Cross-browser Compatible

Bootstrap is compatible with the latest versions of all modern browsers and
platforms. While Bootstrap claims that it doesn’t support older or proxy
browsers, that shouldn’t affect its display and function.

6. Maintain Consistency

Both Mark Otto and Jacob Thornton developed Bootstrap specifically to solve
the inconsistency issue between front-end and back-end developers, and it truly
delivers. Bootstrap eliminates the use of libraries that always differ from one
developer to the other. Thus, you get to maintain the stability of your project
elements no matter who is tackling them.

Consistency also applies to the web display, meaning that you’ll notice a
uniform output regardless of what web browser you’ll be using for your project.

7. Open Source

Bootstrap is an open-source framework, meaning that you can use and modify it
without purchasing any license. Respectively, it also allows it to grow rapidly
with the help of over a thousand willing contributors on GitHub.

8. Community - centred

Bootstrap has the full support of its community who offer tutorials and
assistance for anyone who might need it. The developers keep the community
informed by providing the latest news and updates regarding the framework’s
growth via Bootstrap’s official blog. This gesture encourages direct feedback
from its userbase.

20
In return, the community members can showcase their projects on the Bootstrap
Expo webpage. You can use this website as a source of inspiration in case you
want to know how Bootstrap can improve your project.

7.DBMS
Before understanding what a database is, we need to understand what exactly data is. Data is
a collection of objects ranging from plain simple facts to complex images which provide us
with necessary information about a particular entity. A database is an organised and
structured collection of this data and a Data Base Management System(DBMS) is a tool
which manages, organises and interacts with the databases.

There are several different types of database management systems. Four major types are –
Navigational DBMS, Relational DBMS, SQL DBMS and Object-Oriented DBMS. The scope
of this blog is to deal with SQL Data Base Management Systems but to understand that, a
little introduction of Relational DBMS is necessary.
Relational DBMS is essentially a database management system wherein data is stored in the
form of relations. On the other hand, SQL DBMS utilizes Structured Query Language (SQL)
to perform operations like insert, search, update and delete. It helps in optimizing and
maintaining the data within the database.

Web technologies are advancing fast. While you are wondering what ‘web applications’ are,
developers have started to transition to ‘progressive web applications.’ Almost every web
application on the web requires a database. A shopping application requires a database to
interact with the products and the customers.

A dynamic web application such as a news application or a blog requires instant and frequent
updating of web pages. For such an application, altering and creating a new HTML page is a
tedious task. This is where a database comes into the picture and eases a developer’s life.

Not only retrieval and updating of data, but a database also helps in authentication which is
observed in websites having a login and signup functionality. Such websites display
customised web pages based on the logged in user. Databases can be a real boon to a web
developer if used correctly.

Different types of databases which use SQL

1. PostgreSQL

PostgreSQL is a relational database management system which is open source

and has been used by developers since a really long time. It has several features
which add to the performance of a website. PostgreSQL offers basic to advanced
features which makes it a pretty versatile tool.

Popular companies which use PostgreSQL – Apple, Skype, Instagram, NASA,

Twitch, Spotify, IMDb, Reddit etc.

2. MySQL

21
 has been ranked as the most popular relational database in existence. It is open-
source, extremely easy to use and has been widely accepted by several
companies and websites. MySQL is also the first database management system
most developers come across. If you are beginner, this is a good DBMS to start
with.

Popular companies which use MySQL – Uber, Airbnb, Netflix, Amazon,

Twitter, Shopify etc.

o SQLite

SQLite is not exactly a database management system but is a database engine

which provides local data storage services for a large number of applications and
devices. SQLite is preferred for embedded devices and devices which utilize the
concepts of the internet of things. It is also used on desktops as an on-disk file
format. If you have a small or a medium scaled website, SQLite will be your
saviour.

Popular companies which use SQLite – Career Club, Internet Brands Inc.,
Airgas, Hyatt Hotels Corporation, SAS etc.

o Oracle

Oracle Database is a paid service but is a high-performing and widely available

database management system. It is easy to use and offers multiple functionalities
to make the developer’s and the user’s job easier. It is an SQL based database
management system. However, the syntax differs a little from the other database
management systems.

Popular companies which use Oracle Database – JPMorgan Chase, Fiserv,

Lockheed Martin, Webster Bank etc.

NoSQL databases do not have a well-defined schema which makes it flexible. It means, if you
have an application which will require a database that has the functionality of altering the schema
based on the entity, then NoSQL databases like MongoDB, DynamoDB etc. are preferred.

NoSQL databases are preferred when speed is a priority, they can access and retrieve large
volumes of data within a short amount of time. The null values are handled really well in a NoSQL
DBMS. In an SQL based database management system, updating one attribute might take a
month to execute if the dataset is humongous, however in a NoSQL database, that canbe done
within no time and hence becomes cost-effective both in terms of money and computational
power, and developer friendly since it saves a lot of time and effort.

Databases which use SQL are relational databases. Such databases have a strictly defined schema
which cannot change for specific tuples (entries/entities/rows). It is fairly easy to connect to and
retrieve data from different tables. NoSQL databases have a huge drawback of duplicity of data.
This means that if you have to connect one entry to another, separate space

22
 and effort would be required. However, in SQL databases, connections can be made using ‘joins’
and ‘keys’ which makes the job a lot easier.

8. PHP
PHP (or PHP Hypertext Pre processor) is a server-side scripting language that is used to create
dynamic web pages that can interact with databases. It is a widely-used open source language that
is specifically used for web application development and can be embedded within HTML.
The distinguishing feature of PHP is that the scripting code is executed on the server, which
generates HTML that is sent back to the client. The client receives the result of executing
the script without knowing the underlying code. Developers can configure the web server to
process all the HTML files (containing the PHP script).

PHP, as a scripting language, is popular among web developers because of its ability to
interact with database systems including Oracle and MySQL.

This article discusses the use of PHP scripting language with the MySQL database. Any
website can require a variety of data or information to display and to retrieve them from
the database. This can include display of a simple list to the running of the website based
on data stored in the database.

Listed below are some examples where PHP and MySQL can be used together:

 Digital Ad banners, where the PHP script can be used to retrieve a digital banner from
the database, which then selects a random banner from its table records and sends it
back to the calling script. The PHP script can also maintain a count of banner views
and clicks from the website. 
 Internet forums or digital boards, which use PHP and MySQL to store and retrieve
user messages.
 Website designing, where the design of an entire website can be changed using a
couple of PHP scripts, instead of changing and uploading each web page. The PHP
script can access the MySQL database to retrieve all information about the web page.

Here are some key PHP benefits that help explain why it is still so
important in web development.

23
 It’s easy to learn and use: One of the main reasons PHP became so commonplace is
that it is relatively simple to get started with. Even without extensive knowledge or
experience in web development, most people could create a web page with a single
PHP file in a relatively short period of time. The syntax is simple and command
functions are easy to learn, meaning the barriers to entry with PHP are lower than
with many other languages. 

 It’s open source (and therefore free!): This also helps developers get started with
PHP - it can be installed quickly and at zero cost. There is also open access to a wide
range of PHP frameworks, such as Symfony. This feature is also appealing to
companies as it helps control the costs of web development.
 It’s versatile: One of the major benefits of PHP is that it is platform independent,
meaning it can be used on Mac OS, Windows, Linux and supports most web
browsers. It also supports all the major web servers, making it easy to deploy on
different systems and platforms at minimal additional cost.

 It enjoys strong community support: As a veteran scripting language that is widely

used, PHP now has a large and loyal community base to support it. There are tons of
tutorials, FAQs, and tips to help new PHP developers and to continue pushing the
boundaries of what the language can achieve through regular updates.

 It’s fast and secure: Two things that every organization wants their website or
application to be are fast and secure. PHP uses its own memory and competes well on
speed, especially when using the newer versions. There have been questions in the
past about PHP security, though it is important to note that it is not inherently more or
less secure than other programming languages. One important benefit is that because
of its widespread use and community support there are now many tools, frameworks
and best practices to help fix vulnerabilities and protect against cyberattacks.

 It is well connected with databases: PHP makes it easy to connect securely with
almost any kind of database. This gives developers more freedom when choosing
which database is best suited for the application being built.

 It is tried and tested: One major benefit of being around for a quarter century is that
PHP code has been put to the test in all kinds of real-life environments. The main
bugs have been found and fixed, making the language more stable and trusted by
developers. Moreover, many frameworks and tools have been built over time, helping
to make PHP web development more secure, efficient and effective. 

 There’s a lot of legacy code: OK, this isn’t really a benefit of using PHP in itself, but
when so many existing websites have been written with PHP it becomes an important
consideration. Put simply, it is usually easier to make updates in the same language
rather than try to rewrite everything in another. This helps PHP endure even when
some younger developers may have a personal preference for another language. This
legacy effect also means it is usually easier to find a PHP developer for your
organization.

24
9. JAVA SCRIPT
Java Script is a programming language that allows you to implement complex things on web
pages. Every time a web page does more than just sit there and display static information for
you to look at—displaying timely content updates, interactive maps, animated 2D/3D
graphics, scrolling video jukeboxes, or more—you can bet that JavaScript is probably
involved.

When writing client-side JavaScript for web sites or applications, you will quickly
encounter Application Programming Interfaces (APIs). APIs are programming features for
manipulating different aspects of the browser and operating system the site is running on, or
manipulating data from other web sites or services. In this module, we will explore what
APIs are, and how to use some of the most common APIs you'll come across often in your
development work.

Client-side storage works on similar principles, but has different uses. It consists of
JavaScript APIs that allow you to store data on the client (i.e. on the user's machine) and then
retrieve it when needed. This has many distinct uses, such as:

 Personalizing site preferences (e.g. showing a user's choice of custom widgets, color
scheme, or font size). 
 Persisting previous site activity (e.g. storing the contents of a shopping cart from a
previous session, remembering if a user was previously logged in).
 Saving data and assets locally so a site will be quicker (and potentially less expensive)
to download, or be usable without a network connection.
 Saving web application generated documents locally for use offline

Often client-side and server-side storage are used together. For example, you could download
a batch of music files (perhaps used by a web game or music player application), store them
inside a client-side database, and play them as needed. The user would only have to
download the music files once — on subsequent visits they would be retrieved from the
database instead.

Dynamic and weak typing

JavaScript is a dynamic language with dynamic types. Variables in JavaScript are not directly
associated with any particular value type, and any variable can be assigned (and re-assigned)
values of all types:

let foo = 42; // foo is now a number

foo = "bar"; // foo is now a string
foo = true; // foo is now a boolean

25
JavaScript is also a weak typed language, which means it allows implicit type conversion
when an operation involves mismatched types, instead of throwing type errors.

const foo = 42; // foo is a number

const result = foo + "1"; // JavaScript coerces foo to a string, so it can
be concatenated with the other operand
console.log(result); // 421

Implicit coercions is very convenient, but can be a potential footgun if developers didn't
intend to do the conversion, or intend to convert in the other direction (for example, string to
number instead of number to string). For symbols and Bigints, JavaScript has intentionally
disallowed certain implicit type conversions.

Primitive values
All types except Object define immutable values represented directly at the lowest level of
the language. We refer to values of these types as primitive values.

All primitive types, except null, can be tested by the typeof operator. typeof
null returns "object", so one has to use === null to test for null.

All primitive types, except null and undefined, have their corresponding object wrapper
types, which provide useful methods for working with the primitive values. For example,
the number object provides methods like to potential(). When a property is accessed on a
primitive value, JavaScript automatically wraps the value into the corresponding wrapper
object and accesses the property on the object instead. However, accessing a property
on null or undefined throws a TypeError exception, which necessitates the introduction of
the optional changing operator.

Type typeof return value Object wrapper

Null "object" N/A

Undefined "undefined" N/A

Boolean "boolean" Boolean

Number "number" Number

BigInt "bigint" BigInt

String "string" String

Symbol "symbol" Symbol

Conceptually, undefined indicates the absence of a value, while null indicates the absence
of an object (which could also make up an excuse for typeof null === "object"). The
language usually defaults to undefined when something is devoid of a value:

 A return statement with no value (return;) implicitly returns undefined.

 Accessing a nonexistent object property (obj.iDontExist) returns undefined.

26
  A variable declaration without initialization (let x;) implicitly initializes the variable
to undefined.
 Many methods, such as Array.prototype.get() and Map.prototype.get(),
return undefined when no element is found.

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.

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.

27
10. REACT
As its official tagline states, React is a library for building user interfaces. React is not a
framework – it's not even exclusive to the web. It's used with other libraries to render to
certain environments. For instance, React Native can be used to build mobile applications.

To build for the web, developers use React in tandem with React DOM. React and
ReactDOM are often discussed in the same spaces as — and utilized to solve the same
problems as — other true web development frameworks. When we refer to React as a
"framework", we're working with that colloquial understanding.

React's primary goal is to minimize the bugs that occur when developers are building UIs. It
does this through the use of components — self-contained, logical pieces of code that
describe a portion of the user interface. These components can be composed together to
create a full UI, and React abstracts away much of the rendering work, leaving you to
concentrate on the UI design.

Use cases
Unlike the other frameworks covered in this module, React does not enforce strict rules
around code conventions or file organization. This allows teams to set conventions that work
best for them, and to adopt React in any way they would like to. React can handle a single
button, a few pieces of an interface, or an app's entire user interface.

While React can be used for small pieces of an interface, it's not as easy to "drop into" an
application as a library like jQuery, or even a framework like Vue — it is more approachable
when you build your entire app with React.

In addition, many of the developer-experience benefits of a React app, such as writing

interfaces with JSX, require a compilation process. Adding a compiler like Babel to a website
makes the code on it run slowly, so developers often set up such tooling with a build step.
React arguably has a heavy tooling requirement, but it can be learned.

Accessibility in React

Including keyboard users

At this point, we've accomplished all of the features we set out to implement. A user can add
a new task, check and uncheck tasks, delete tasks, or edit task names. And they can filter their
task list by all, active, or completed tasks.

Or, at least: they can do all of these things with a mouse. Unfortunately, these features are not
very accessible to keyboard-only users. Let's explore this now.

Exploring the keyboard usability problem

28
Start by clicking on the input at the top of our app, as if you're going to add a new task. You'll
see a thick, dashed outline around that input. This outline is your visual indicator that the
browser is currently focused on this element. Press the Tab key, and you will see the outline
appear around the "Add" button beneath the input. This shows you that the browser's focus
has moved.

Press Tab a few more times, and you will see this dashed focus indicator move between each
of the filter buttons. Keep going until the focus indicator is around the first "Edit" button.
Press Enter.

The <Todo /> component will switch templates, as we designed, and you'll see a form that
lets us edit the name of the task.

Component-level Styles

Although this tutorial doesn't use this approach, many React applications define their styles
on a per-component basis, rather than in a single, monolithic stylesheet.

create-react-app makes it possible to import CSS files into JavaScript modules, so that CSS is
only sent to your user when the corresponding component is rendered. For this app, we could
have for example written a dedicated Form.css file to house the styles of those respective
components, then imported the styles into their respective modules like this:

import Form from "./Form";

import "./Form.css";

This approach makes it easy to identify and manage the CSS that belongs to a specific
component. However, it also fragments your stylesheet across your codebase, and this
fragmentation might not be worthwhile. For larger applications with hundreds of unique
views and lots of moving parts, it makes sense to limit the amount of irrelevant code that's
sent to your user. You'll likely have app-wide styles and specific component styles that built
on top of those.

29
 11. REFLECTION ON THE INTERNSHIP

I did complete the project related to the challenges in the web developmen t. In
today's Web development, a good page design is essential. A bad design will lead
to the loss of visitors and that can lead to a loss of business. In general, a good page
layout has to satisfy the basic elements of a good page design. This includes color
contrast, text organization, font selection, style of a page, page size, graphics used,
and consistency. In order to create a well-designed page for a specific audience. The
developer needs to organized and analyze the users' statistics and the background
of the users. Although it can be hard to come up with a design that is well suited to
all of the users, there will be a design that is appropriate for most of the audience.
The better the page design, the more hits a page will get. That impliesan increase in
accessibility and a possible increase in business.

After analyzing all the researched information and feedback from different users,
I would recommend that a general purposed Web site should use non-frame
pages and graphics navigation bar with rollover effects. In addition to the graphic
navigation bar with rollover effects, each page should also have a text-only
navigation bar for easy control. The developer should also create a Cascading
Style Sheet to control the font and font-size and use the style sheet throughout
the site to obtain a consistent look and feel.

The emergence of responsive web design , more than six years ago, showed us
the vision for our future sites: a world where users can have great experiences
no matter what devices or what screen sizes they have those experiences on.
However, it was also clear to us that this change was not going to happen
without effort—and a tremendous one, at that. The beautiful thing about
responsive retrofitting projects —and what can also make them look so scary—
is the number of improvements that can be validated by the need to make
your site’s experience better on any device.

As professional web designers and developers, we often know perfectly well

what our sites need in order to be greatly improved. But sometimes the task
ahead seems too complex, too riddled with obstacles, and too big to feel
realistic and achievable. Our teams are not made up of an infinite number of
people who can work on our responsive retrofitting projects day in and day
out, leaving everything else on standby. So it is key that any retrofitting project

30
be thoughtfully planned and broken down into digestible chunks that you, your
team, and your team’s schedule can comfortably handle. My hope is that this
book has made what can often seem like an insurmountable task feel a little
more attainable. The technologies of the Web change quickly. Some of the
techniques I have mentioned here will likely be surpassed soon after this book
goes to print. But hopefully the core ideas about how to approach planning,
content, design, and development will be helpful regardless. Even though this
is where this book ends, this is certainly not the end of your journey into
responsive web design. There are many excellent resources that can take you
further into understanding how best to design and build a responsive site. You
will find some helpful resources in the appendix, and you are bound to also
discover others that I have not included in that short list.

Becoming a web developer is more than just working in the browser. Web
developers write applications, and you are on that path. I encourage you to
continue learning HTML, JavaScript, and PHP. But when you're comfortable,
branch out to other languages and platforms. The more exposure and experience
you have with other languages and platforms, the better you'll become as a
developer.

To sum up, your website is the digital window to your business. All your
products, services, information and contact details are in one place, your
online shop. Your aim is to drive traffic to your website and turn potential
leads into customers and sales.

Furthermore, by using a tool such as google analytics, you can also track what’s
happening when people visit your website. Thus, you can gather extremely
useful data about your website visitors.

Hopefully you can see how important it is to have a good website for your
business. One that is visually appealing, but also useful as a resource and a way
of engaging with customers.

31
12. CONCLUSION
In the conclusion section of your internship report, you can talk
about the whole internship experience. You can also include
what kind of skills or qualities you would like to develop or work
more on. What areas of the firm you would have loved to work
with.
Web development is the building and maintenance of websites; it’s the
work that happens behind the scenes to make a website look great, work
fast and perform well with a seamless user experience.

Web developers, or ‘devs’, do this by using a variety of coding languages.

The languages they use depends on the types of tasks they are preforming
and the platforms on which they are working.

Web development skills are in high demand worldwide and well paid too –
making development a great career option. It is one of the easiest
accessible higher paid fields as you do not need a traditional university
degree to become qualified.

The field of web development is generally broken down into front-end (the
user-facing side) and back-end (the server side).

Once the page is designed, and the content is added, the page should be
saved, and then previewed in a browser for colour accuracy, and image
reference verification. Once you are sure that the page is constructed
correctly, it should be uploaded, as well as it's dependent images, via ftp to
your directory on the graphics web server. After file transfer, use a browser
to view your live page via the internet. Go to your website to be sure that
your page loads automatically, loads correctly, and the image shows up
properly. Once that is verified, you can continue creating the sitemap page
in the same order. Designers should test for functionality, navigation and
ease of use. Refer to peer and teacher feedback for improvements,
assessments, and structural commentary.

32