UNIT-IV

BOOTSTRAP: Introduction, Grid Basic, Tables, Images, Alert, Buttons, Glyph icons,
themes.
NODE JS: Introduction, HTTP Module, File system, Events, Upload File, Email, Node
JS(MySQL as reference) CURD operations.

➢ BOOTSTRAP: Bootstrap is a free, open source front-end development framework for

the creation of websites and web apps. Designed to enable responsive development of
mobile-first websites, Bootstrap provides a collection of syntax for template designs.

What is Responsive Web Design?

Responsive web design is about creating web sites which automatically adjust themselves to
look good on all devices, from small phones to large desktops.

Bootstrap History
• Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released
as an open source product in August 2011 on GitHub.
• In June 2014 Bootstrap was the No.1 project on GitHub!
Bootstrap Versions

• This tutorial follows Bootstrap 3, which was released in 2013. However, we also cover
newer versions; Bootstrap 4 (released 2018) and Bootstrap 5 (released 2021).
• Bootstrap 5 is the newest version of Bootstrap; with new components, faster
stylesheets, more responsiveness etc. It supports the latest, stable releases of all major
browsers and platforms. However, Internet Explorer 11 and down is not supported.
• The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that Bootstrap 5 has
switched to JavaScript instead of jQuery.

Advantages:
• Advantages of Bootstrap:
• Easy to use: Anybody with just basic knowledge of HTML and CSS can start using
Bootstrap
• Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and
desktops
• Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core
framework
• Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome,
Firefox, Internet Explorer, Edge, Safari, and Opera)

Disadvantages:
• One of them is that it can make your website look too similar to others that use the same
framework, unless you customize it extensively.
• Bootstrap also adds a lot of extra code and files to your website, which can affect its
performance and loading speed.

Example:
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
 <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor..</p>
</div>
</div>
</div>
Output:

My First Bootstrap Page

Resize this responsive page to see the effect!

Column 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

Column 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

Column 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...
➢ Bootstrap Grid System:
• Bootstrap's grid system allows up to 12 columns across the page.
• If you do not want to use all 12 columns individually, you can group the columns
together to create wider columns:

span span span span span span span span span span span span
1 1 1 1 1 1 1 1 1 1 1 1

span 4 span 4 span 4

 span 4 span 8

span 6 span 6

span 12
Bootstrap's grid system is responsive, and the columns will re-arrange automatically
depending on the screen size.

Grid Classes
The Bootstrap grid system has four classes:
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
The classes above can be combined to create more dynamic and flexible layouts.

Basic Structure of a Bootstrap Grid

<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>

• Create a row (<div class="row">).

• Add the number of columns, you want in the grid (tags with appropriate .col-*-*
classes).
• Note that numbers in .col-*-* should always add up to 12 for each row.

Bootstrap Basic Table

Bootstrap Tables
We can create different types of Bootstrap tables by using different classes to style them.
Bootstrap Basic Table:
The basic Bootstrap table has a light padding and only horizontal dividers. The .table class is
used to add basic styling to a table.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstra
p.min.css"/>
 </head>
<body>
<div class="container">
<h1>Basic Table Example</h1>
<table class="table">
<tr><th>Id</th><th>Name</th><th>Age</th></tr>
<tr><td>101</td><td>Rahul</td><td>23</td></tr>
<tr><td>102</td><td>Umesh</td><td>22</td></tr>
<tr><td>103</td><td>Max</td><td>29</td></tr>
<tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Output:
Basic Table Example
Id Name Age

101 Rahul 23

102 Umesh 22

103 Max 29

104 Ajeet 21

Bootstrap Striped Rows Table:

The .table-striped class is used to add zebra-stripes to a table:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstra
p.min.css"/>
</head>
<body>
<div class="container">
<h1>Striped Table Example</h1>
<table class="table table-striped">
<tr><th>Id</th><th>Name</th><th>Age</th></tr>
<tr><td>101</td><td>Rahul</td><td>23</td></tr>
<tr><td>102</td><td>Umesh</td><td>22</td></tr>
<tr><td>103</td><td>Max</td><td>29</td></tr>
<tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
 </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script
>
</body>
</html>
Output:
Striped Table Example
Id Name Age

101 Rahul 23

102 Umesh 22

103 Max 29

104 Ajeet 21

Bootstrap Bordered table:

The .table-bordered class is used to add borders on all sides of the table and cells:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstra
p.min.css"/>
</head>
<body>
<div class="container">
<h1>Bordered Table Example</h1>
<table class="table table-striped table-bordered">
<tr><th>Id</th><th>Name</th><th>Age</th></tr>
<tr><td>101</td><td>Rahul</td><td>23</td></tr>
<tr><td>102</td><td>Umesh</td><td>22</td></tr>
<tr><td>103</td><td>Max</td><td>29</td></tr>
<tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>
</html>
Output:
Bordered Table Example
Id Name Age
 101 Rahul 23

102 Umesh 22

103 Max 29

104 Ajeet 21

Bootstrap Hover rows Table:

The .table-hover class is used to enable a hover state on table rows:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstra
p.min.css"/>
</head>
<body>
<div class="container">
<h1>Hower rows Table Example</h1>
<table class="table table-hover">
<tr><th>Id</th><th>Name</th><th>Age</th></tr>
<tr><td>101</td><td>Rahul</td><td>23</td></tr>
<tr><td>102</td><td>Umesh</td><td>22</td></tr>
<tr><td>103</td><td>Max</td><td>29</td></tr>
<tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script
>
</body>
</html>
Output:
Hower rows Table Example
Id Name Age

101 Rahul 23

102 Umesh 22

103 Max 29

104 Ajeet 21
Bootstrap Condensed table:

The .table-condensed class is used to make a table more compact by cutting cell padding in
half:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstra
p.min.css"/>
</head>
<body>
<div class="container">
<h1>Condensed Table Example</h1>
<table class="table table-condensed">
<tr><th>Id</th><th>Name</th><th>Age</th></tr>
<tr><td>101</td><td>Rahul</td><td>23</td></tr>
<tr><td>102</td><td>Umesh</td><td>22</td></tr>
<tr><td>103</td><td>Max</td><td>29</td></tr>
<tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script
>
</body>
</html>
Output:
Condensed Table Example
Id Name Age
101 Rahul 23
102 Umesh 22
103 Max 29
104 Ajeet 21

Bootstrap Contextual classes:.

Contextual classes are used to color table rows (<tr>) or table cells (<td>):
Following are the different contextual classes:
Class Description

.active It is used to apply the hover color to the table row or table cell

.success It indicates a successful or positive action

.info It indicates a neutral informative change or action

 .warning It specifies a warning that might need attention

.danger It indicates a dangerous or potentially negative action

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Contextual classes</h1>
<div class="table-responsive">
<table class="table">
<tr class="success"><th>Id</th><th>Name</th><th>Age</th></tr>
<tr class="active"><td>101</td><td>Rahul</td><td>23</td></tr>
<tr class="danger"><td>102</td><td>Umesh</td><td>22</td></tr>
<tr class="info"><td>103</td><td>Max</td><td>29</td></tr>
<tr class="warning"><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Output:

Contextual classes
Id Name Age

101 Rahul 23

102 Umesh 22

103 Max 29

104 Ajeet 21

Responsive tables:

The .table-responsive class is used to create a responsive table. You can open the
responsible table even on small devices (under 768px). Then the table will be scrolled
horizontally. Displays larger than 768px wide, there is no difference.

See this example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Contextual classes</h1>
<div class="table-responsive">
<table class="table">
<tr class="success"><th>Id</th><th>Name</th><th>Age</th></tr>
<tr class="active"><td>101</td><td>Rahul</td><td>23</td></tr>
<tr class="danger"><td>102</td><td>Umesh</td><td>22</td></tr>
<tr class="info"><td>103</td><td>Max</td><td>29</td></tr>
<tr class="warning"><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Output:
Contextual classes
Id Name Age

101 Rahul 23

102 Umesh 22

103 Max 29

104 Ajeet 21

Black/Dark Table

The .table-dark class is used to add a black background to the table:

Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Black/Dark Table</h2>
<p>The .table-dark class is used to add a black background to the table:</p>
<table class="table table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ajeet</td>
<td>Kumar</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mahesh</td>
<td>Sharma</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Black/Dark Table

The .table-dark class is used to add a black background to the table:

Firstname Lastname Email

Ajeet Kumar [email protected]
Mahesh Sharma [email protected]
Sonoo Jaiswal [email protected]
Dark Striped Table

Combine the .table-dark class and .table-striped class to create a dark, striped table:

Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dark Striped Table</h2>
<p>Combine the .table-dark class and .table-striped class to create a dark, striped table:
</p>
<table class="table table-dark table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ajeet</td>
<td>Kumar</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mahesh</td>
<td>Sharma</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
Output:
Dark Striped Table
Combine the .table-dark class and .table-striped class to create a dark, striped table:
Firstname Lastname Email
Ajeet Kumar [email protected]
Mahesh Sharma [email protected]
Sonoo Jaiswal [email protected]

Hoverable Dark Table

The .table-hover class is used to add a hover effect (grey background color) on table rows:

Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"
></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Hoverable Dark Table</h2>
<p>The .table-
hover class is used to add a hover effect (grey background color) on table rows:</p>

<table class="table table-dark table-hover">

<thead>
<tr>
<th>Firstname</th>
 <th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ajeet</td>
<td>Kumar</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mahesh</td>
<td>Sharma</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
Output:
Hoverable Dark Table

The .table-hover class is used to add a hover effect (grey background color) on table rows:

Firstname Lastname Email

Ajeet Kumar [email protected]
Mahesh Sharma [email protected]
Sonoo Jaiswal [email protected]

➢ IMAGES:

Bootstrap Image Shapes

Circle: Rounded Corners: Thumbnail:

The .img-rounded class adds rounded corners to an image (IE8 does not support rounded
corners):

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Rounded Corners</h2>
<p>The .img-rounded class adds rounded corners to an image (not available in IE8):</p>
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304"
height="236">
</div>

</body>
</html>
Output:

Rounded Corners
The .img-rounded class adds rounded corners to an image (not available in IE8):
Circle

The .img-circle class shapes the image to a circle (IE8 does not support rounded corners):

Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
Output:

Circle
The .img-circle class shapes the image to a circle (not available in IE8):
Thumbnail

The .img-thumbnail class shapes the image to a thumbnail:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
Output:

Thumbnail
The .img-thumbnail class creates a thumbnail of the image:

Responsive Images

Images come in all sizes. So do screens. Responsive images automatically adjust to fit the
size of the screen.

Create responsive images by adding an .img-responsive class to the <img> tag. The image
will then scale nicely to the parent element.

The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to
the image:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
Output:

Image
The .img-responsive class makes the image scale nicely to the parent element (resize the
browser window to see the effect):

Alerts
Bootstrap provides an easy way to create predefined alert
messages:
×Success! This alert box indicates a successful or positive
action.
×Info! This alert box indicates a neutral informative change
or action.
×Warning! This alert box indicates a warning that might need
attention.
×Danger! This alert box indicates a dangerous or potentially
negative action.
Alerts are created with the .alert class, followed by one of the
four contextual classes .alert-success, .alert-info, .alert-
warning or .alert-danger:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bo
otstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.
min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/boot
strap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a
successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a
neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box could indicate a
warning that might need attention.
</div>
 <div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a
dangerous or potentially negative action.
</div>
</div>

</body>
</html>
Output:
Alerts
Success! This alert box could indicate a successful or positive
action.
Info! This alert box could indicate a neutral informative
change or action.
Warning! This alert box could indicate a warning that might
need attention.
Danger! This alert box could indicate a dangerous or
potentially negative action.

Alert Links
Add the alert-link class to any links inside the alert box to
create "matching colored links":
Success! You should read this message.
Info! You should read this message.
Warning! You should read this message.
Danger! You should read this message.
Example
<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bo
otstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.
min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/boot
strap.min.js"></script>
</head>
<body>
Output:
Alert Links
Add the alert-link class to any links inside the alert box to
create "matching colored links".
Success! You should read this message.
Info! You should read this message.
Warning! You should read this message.
Danger! You should read this message.

Closing Alerts
Click on the "x" symbol to the right to close me.
To close the alert message, add a .alert-dismissible class to the
alert container. Then add class="close" and data-
dismiss="alert" to a link or a button element (when you click
on this the alert box will disappear).
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bo
otstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.
min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/boot
strap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Alerts</h2>
<p>The a element with class="close" and data-
dismiss="alert" is used to close the alert box.</p>
<p>The alert-dismissible class adds some extra padding to
the close button.</p>
<div class="alert alert-success alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-
label="close">&times;</a>
<strong>Success!</strong> This alert box could indicate a
successful or positive action.
</div>
<div class="alert alert-info alert-dismissible">
 <a href="#" class="close" data-dismiss="alert" aria-
label="close">&times;</a>
<strong>Info!</strong> This alert box could indicate a
neutral informative change or action.
</div>
<div class="alert alert-warning alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-
label="close">&times;</a>
<strong>Warning!</strong> This alert box could indicate a
warning that might need attention.
</div>
<div class="alert alert-danger alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-
label="close">&times;</a>
<strong>Danger!</strong> This alert box could indicate a
dangerous or potentially negative action.
</div>
</div>

</body>
</html>
Output:
Alerts
The a element with class="close" and data-dismiss="alert" is
used to close the alert box.
The alert-dismissible class adds some extra padding to the
close button.
×Success! This alert box could indicate a successful or
positive action.
×Info! This alert box could indicate a neutral informative
change or action.
×Warning! This alert box could indicate a warning that might
need attention.
×Danger! This alert box could indicate a dangerous or
potentially negative action.

Animated Alerts
The .fade and .in classes adds a fading effect when closing the
alert message:
Syntax:
<div class="alert alert-danger fade in">
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bo
otstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.
min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/boot
strap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Animated Alerts</h2>
<p>The .fade and .in classes adds a fading effect when
closing the alert message.</p>
<div class="alert alert-success alert-dismissible fade in">
<a href="#" class="close" data-dismiss="alert" aria-
label="close">&times;</a>
<strong>Success!</strong> This alert box could indicate a
successful or positive action.
</div>
<div class="alert alert-info alert-dismissible fade in">
<a href="#" class="close" data-dismiss="alert" aria-
label="close">&times;</a>
<strong>Info!</strong> This alert box could indicate a
neutral informative change or action.
</div>
<div class="alert alert-warning alert-dismissible fade in">
<a href="#" class="close" data-dismiss="alert" aria-
label="close">&times;</a>
<strong>Warning!</strong> This alert box could indicate a
warning that might need attention.
</div>
<div class="alert alert-danger alert-dismissible fade in">
<a href="#" class="close" data-dismiss="alert" aria-
label="close">&times;</a>
<strong>Danger!</strong> This alert box could indicate a
dangerous or potentially negative action.
</div>
</div>
</body>
</html>
Output:
Animated Alerts
The .fade and .in classes adds a fading effect when closing the
alert message.
×Success! This alert box could indicate a successful or
positive action.
×Info! This alert box could indicate a neutral informative
change or action.
×Warning! This alert box could indicate a warning that might
need attention.
×Danger! This alert box could indicate a dangerous or
potentially negative action.

Bootstrap Buttons:
Button Styles
Bootstrap provides different styles of buttons:
Basic Default Primary Success Info Warning Danger Link
To achieve the button styles above, Bootstrap has the
following classes:

• btn: Adds basic styling to any button.

• .btn-default: Indicates a default/standard button
• .btn-primary: Provides extra visual weight and
identifies the primary action in a set of buttons
• .btn-success: Indicates a successful or positive action
• .btn-info: Contextual button for informational alert
messages
• .btn-warning: Indicates caution should be taken with this
action
• .btn-danger: Indicates dangerous or potentially negative
action.
 • .btn-link: Makes a button look like a link (will still have
a button behaviour).
The following example shows the code for the different
button styles:
Syntax:
<button type="button" class="btn">Basic</button>
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bo
otstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.
min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/boot
strap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-
default">Default</button>
 <button type="button" class="btn btn-
primary">Primary</button>
<button type="button" class="btn btn-
success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-
warning">Warning</button>
<button type="button" class="btn btn-
danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</div>

</body>
</html>
Output:

Button Styles

Basic Default Primary Success Info Warning Danger

Bootstrap Glyphicons:
GLYPHICONS® are precisely prepared monochromatic icons
and symbols, created with an emphasis to simplicity and easy
orientation.
Bootstrap provides 260 glyphicons from
the Glyphicons Halflings set.
Glyphicons can be used in text, buttons, toolbars, navigation,
forms, etc.
Here are some examples of glyphicons:
Envelope glyphicon:
Print glyphicon:
Search glyphicon:
Download glyphicon:
Glyphicon Syntax
A glyphicon is inserted with the following syntax:
<span class="glyphicon glyphicon-name"></span>
The name part in the syntax above must be replaced with the
proper name of the glyphicon.
Glyphicon Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bo
otstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.
min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/boot
strap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Glyphicon Examples</h2>
<p>Envelope icon: <span class="glyphicon glyphicon-
envelope"></span></p>
<p>Envelope icon as a link:
<a href="#"><span class="glyphicon glyphicon-
envelope"></span></a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-
search"></span></p>
<p>Search icon on a button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
Search
</button>
</p>
<p>Search icon on a styled button:
<button type="button" class="btn btn-info">
 <span class="glyphicon glyphicon-search"></span>
Search
</button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-
print"></span></p>
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print
</a>
</p>
</div>

</body>
</html>
Output:
Glyphicon Examples
Envelope icon:
Envelope icon as a link:
Search icon:
Search icon on a button: Search
Search icon on a styled button: Search
Print icon:
Print icon on a styled link button:

NODE JS:
Node.js is a cross-platform, open-source JavaScript
runtime environment that can run on Windows, Linux,
Unix, macOS, and more. Node.js runs on the V8
JavaScript engine, and executes JavaScript code outside
a web browser. Node.js lets developers use JavaScript to
write command line tools and for server-side scripting.
Developers use Node. js to create server-side web
applications, and it is perfect for data-intensive
applications since it uses an asynchronous, event-driven
model. Now that we know
 Parts of NODE JS:
Modules: Modules are like JavaScript libraries that can
be used in a Node.js application to include a set of
functions.
Console: The console is a module that provides a
method for debugging that is similar to the basic
JavaScript console provided by internet browsers.
Cluster: Node.js is built-on on the concept of single-
threaded programming. Cluster is a module that allows
multi-threading by creating child processes that share
the same server port and run simultaneously.
Global: Global objects in Node.js are available in all
modules. These objects are functions, modules, strings,
etc.

Error Handling: Error Handling

Node.js applications experience four types of errors.

Streaming: Streams are the objects that let you read

data or write data continuously. There are four types of
streams:
Readable: These are the types of streams from which
data can be read
Writable: These are the types of streams to which data
can be written
Duplex: These are both readable and writable streams
Transform: Streams that can manipulate the data while
it is being read or written
Transform streams: Transform streams have a
writable side and a readable side, allowing data to be
modified as it is being read from the source.

Buffer: Buffer is a module that allows the handling of

streams that contain only binary data. An empty buffer
of length '10' can be created by this method:

Domain
The domain module intercepts(if error stopping in
before transfer the data) errors that remain unhandled.
Two methods are used for intercepting these errors:
• Internal Binding: Error emitter executes its code
inside the run method
• External Binding: Error emitter is explicitly added
to a domain via its add method

DNS(Domain Name System)

DNS module is used to connect to a DNS server and
perform name resolution by using the following
method:
dns.resolve(): gives hostname
dns.lookup(): used to resolve IP addresses
Debugger: Node.js includes a debugging utility that
can be accessed by a built-in debugging client.
NodeJS is not a framework and it's not a programming
language. Node. js is used to build back-end services
like APIs like Web App or Mobile App.

var http = require('http');

http.createServer(function (req, res) {

res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World!');
}).listen(8080);
Output:
Hello World!
HTTP MODULE: The HTTP module can create an
HTTP server that listens to server ports and gives a
response back to the client.

Functions of HTTP:
• The HttpModule exports the HttpService class,
which exposes Axios-based methods to perform
HTTP requests.
• The library also transforms the resulting HTTP
responses into Observables .
 • Hint You can also use any general purpose Node.js
HTTP client library directly, including got or
undici.
• What is the difference between HTTP and https
module?

• The difference between the two boils down to data

security: One secures data in transit (HTTPS) using
verified identity and public key cryptography while
the other does not (HTTP).16 Nov 2022

HTTP vs HTTPS:

The difference between the two boils down to data

security: One secures data in transit (HTTPS) using
verified identity and public key cryptography while the
other does not (HTTP).
The Built-in HTTP Module
Node.js has a built-in module called HTTP, which
allows Node.js to transfer data over the Hyper Text
Transfer Protocol (HTTP).
To include the HTTP module, use the require() method:
Syntax: var http = require('http');

Node.js as a Web Server

The HTTP module can create an HTTP server that
listens to server ports and gives a response back to the
client.
Use the createServer() method to create an HTTP
server:
var http = require('http');

//create a server object:

http.createServer(function (req, res) {
res.write('Hello World!'); //write a response to the
client
res.end(); //end the response
}).listen(8080); //the server object listens on port 8080

Output:
Hello World!

The function passed into the http.createServer() method,

will be executed when someone tries to access the
computer on port 8080.
Save the code above in a file called "demo_http.js", and
initiate the file:
Initiate demo_http.js:
C:\Users\Your Name>node demo_http.js

Add an HTTP Header

If the response from the HTTP server is supposed to be
displayed as HTML, you should include an HTTP
header with the correct content type:
Example
var http = require('http');

http.createServer(function (req, res) {

// add a HTTP header:
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('Hello World!');
res.end();
}).listen(8080);
Output:
Hello World!
The first argument of the res.writeHead() method is the
status code, 200 means that all is OK, the second
argument is an object containing the response headers.
Read the Query String
The function passed into the http.createServer() has
a req argument that represents the request from the
client, as an object (http.IncomingMessage object).
This object has a property called "url" which holds the
part of the url that comes after the domain name:
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
 res.write(req.url);
res.end();
}).listen(8080);

Save the code above in a file called "demo_http_url.js"

and initiate the file:
Split the Query String
There are built-in modules to easily split the query
string into readable parts, such as the URL module.
Example
Split the query string into readable parts:
var http = require('http');
var url = require('url');

http.createServer(function (req, res) {

res.writeHead(200, {'Content-Type': 'text/html'});
var q = url.parse(req.url, true).query;
var txt = q.year + " " + q.month;
res.end(txt);
}).listen(8080);

Save the code above in a file called

"demo_querystring.js" and initiate the file:
Initiate demo_querystring.js:
C:\Users\Your Name>node demo_querystring.js
The address:
http://localhost:8080/?year=2017&month=July
Will produce this result:
var http = require('http');
var url = require('url');

http.createServer(function (req, res) {

res.writeHead(200, {'Content-Type': 'text/html'});
/*Use the url module to turn the querystring into an
object:*/
var q = url.parse(req.url, true).query;
/*Return the year and month from the query object:*/
var txt = q.year + " " + q.month;
res.end(txt);
➢ }).listen(8080);
Output:
http://localhost:8080/?
year=2017&month=July

➢ FILE SYSTEM:
Node.js as a File Server
The Node.js file system module allows you to work
with the file system on your computer.
To include the File System module, use
the require() method:
Syntax:
var fs = require('fs');
Common use for the File System module:
• Read files
• Append file
• Create files
• Update files
• Delete files
• Rename files
Read Files
The fs.readFile() method is used to read files on your
computer.
Assume we have the following HTML file (located in
the same folder as Node.js):
Example
var http = require('http');
var fs = require('fs');
http.createServer(function (req, res) {
//Open a file on the server and return its content:
fs.readFile('demofile1.html', function(err, data) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
return res.end();
});
}).listen(8080);
Output:
My Header
My paragraph.
Create Files
The File System module has methods for creating new
files:
• fs.appendFile()
• fs.open()
• fs.writeFile()
The fs.appendFile() method appends specified content
to a file. If the file does not exist, the file will be
created:
Example
Create a new file using the appendFile() method:
var fs = require('fs');

//create a file named mynewfile1.txt:

fs.appendFile('mynewfile1.txt', 'Hello content!',
function (err) {
if (err) throw err;
console.log('Saved!');
});
Output:
Saved!
OPEN: The fs.open() method takes a "flag" as the
second argument, if the flag is "w" for "writing", the
specified file is opened for writing. If the file does not
exist, an empty file is created:

var fs = require('fs');

fs.open('mynewfile2.txt', 'w', function (err, file) {

if (err) throw err;
console.log('Saved!');
});
Output:
Saved!
The fs.writeFile() method replaces the specified file and
content if it exists. If the file does not exist, a new file,
containing the specified content, will be created:
Example
Create a new file using the writeFile() method:
var fs = require('fs');

//create a file named mynewfile3.txt:

fs.writeFile('mynewfile3.txt', 'Hello content!', function
(err) {
if (err) throw err;
console.log('Saved!');
});
Output:
Saved!

Update Files
The File System module has methods for updating files:
• fs.appendFile()
• fs.writeFile()
The fs.appendFile() method appends the specified
content at the end of the specified file:
Example
Append "This is my text." to the end of the file
"mynewfile1.txt":
var fs = require('fs');

//append content at the end of the file:

fs.appendFile('mynewfile1.txt', ' This is my text.',
function (err) {
if (err) throw err;
console.log('Updated!');
});
Output:
Updated!

The fs.writeFile() method replaces the specified file and

content:
Example
Replace the content of the file "mynewfile3.txt":
var fs = require('fs');

//Replace the file with a new one:

fs.writeFile('mynewfile3.txt', 'This is my text.', function
(err) {
if (err) throw err;
console.log('Replaced!');
});
Output:
Replaced!

Delete Files
To delete a file with the File System module, use
the fs.unlink() method.
The fs.unlink() method deletes the specified file:
Example
Delete "mynewfile2.txt":
var fs = require('fs');

//Delete the file mynewfile2.txt:

fs.unlink('mynewfile2.txt', function (err) {
if (err) throw err;
console.log('File deleted!');
});
Output:
File deleted!

Rename Files
To rename a file with the File System module, use
the fs.rename() method.
The fs.rename() method renames the specified file:
Example
Rename "mynewfile1.txt" to "myrenamedfile.txt":
EVENTS:
Node.js is perfect for event-driven applications.
Events in Node.js
Every action on a computer is an event. Like when a
connection is made or a file is opened.
Objects in Node.js can fire events, like the readStream
object fires events when opening and closing a file:
var fs = require('fs');

var readStream = fs.createReadStream('./demofile.txt');

/*Write to the console when the file is opened:*/

readStream.on('open', function () {
console.log('The file is open');
});
Output:
The file is open

Events Module
Node.js has a built-in module, called "Events", where
you can create-, fire-, and listen for- your own events.
To include the built-in Events module use
the require() method. In addition, all event properties
and methods are an instance of an EventEmitter object.
To be able to access these properties and methods,
create an EventEmitter object:
var events = require('events');
var eventEmitter = new events.EventEmitter();
The EventEmitter Object
You can assign event handlers to your own events with
the EventEmitter object.
In the example below we have created a function that
will be executed when a "scream" event is fired.
To fire an event, use the emit() method.
Example:
var events = require('events');
var eventEmitter = new events.EventEmitter();
//Create an event handler:
var myEventHandler = function () {
console.log('I hear a scream!');
}

//Assign the eventhandler to an event:

eventEmitter.on('scream', myEventHandler);

//Fire the 'scream' event:

eventEmitter.emit('scream');
Output:
I hear a scream!

NODE J S UPLOAD FILE:

The Formidable Module

There is a very good module for working with file
uploads, called "Formidable".
The Formidable module can be downloaded and
installed using NPM:
C:\Users\Your Name>npm install formidable
After you have downloaded the Formidable module,
you can include the module in any application:
var formidable = require('formidable');
Upload Files
Now you are ready to make a web page in Node.js that
lets the user upload files to your computer:
Step 1: Create an Upload Form
Create a Node.js file that writes an HTML form, with
an upload field:
Example
This code will produce an HTML form:
var http = require('http');

http.createServer(function (req, res) {

res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post"
enctype="multipart/form-data">');
res.write('<input type="file"
name="filetoupload"><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}).listen(8080);

Step 2: Parse the Uploaded File

Include the Formidable module to be able to parse the
uploaded file once it reaches the server.
When the file is uploaded and parsed, it gets placed on a
temporary folder on your computer.
Example
The file will be uploaded, and placed on a temporary
folder:
var http = require('http');
var formidable = require('formidable');

http.createServer(function (req, res) {

if (req.url == '/fileupload') {
var form = new formidable.IncomingForm();
form.parse(req, function (err, fields, files) {
res.write('File uploaded');
res.end();
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post"
enctype="multipart/form-data">');
res.write('<input type="file"
name="filetoupload"><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);
Step 3: Save the File
When a file is successfully uploaded to the server, it is
placed on a temporary folder.
The path to this directory can be found in the "files"
object, passed as the third argument in
the parse() method's callback function.
To move the file to the folder of your choice, use the
File System module, and rename the file:
Example
Include the fs module, and move the file to the current
folder:
var http = require('http');
var formidable = require('formidable');
var fs = require('fs');

http.createServer(function (req, res) {

if (req.url == '/fileupload') {
var form = new formidable.IncomingForm();
form.parse(req, function (err, fields, files) {
var oldpath = files.filetoupload.filepath;
var newpath = 'C:/Users/Your Name/' +
files.filetoupload.originalFilename;
fs.rename(oldpath, newpath, function (err) {
if (err) throw err;
res.write('File uploaded and moved!');
res.end();
});
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post"
enctype="multipart/form-data">');
res.write('<input type="file"
name="filetoupload"><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);
NODE JS EMAIL:
Node.js Send an Email
The Nodemailer Module
The Nodemailer module makes it easy to send emails
from your computer.
The Nodemailer module can be downloaded and
installed using npm:
C:\Users\Your Name>npm install nodemailer
After you have downloaded the Nodemailer module,
you can include the module in any application:
var nodemailer = require('nodemailer');
Send an Email
Now you are ready to send emails from your server.
Use the username and password from your selected
email provider to send an email. This tutorial will show
you how to use your Gmail account to send an email:
var nodemailer = require('nodemailer');

var transporter = nodemailer.createTransport({

service: 'gmail',
auth: {
user: '[email protected]',
pass: 'yourpassword'
}
});

var mailOptions = {
from: '[email protected]',
to: '[email protected]',
subject: 'Sending Email using Node.js',
text: 'That was easy!'
};

transporter.sendMail(mailOptions, function(error,
info){
if (error) {
console.log(error);
} else {
console.log('Email sent: ' + info.response);
}
});
And that's it! Now your server is able to send emails.
Multiple Receivers
To send an email to more than one receiver, add them to
the "to" property of the mailOptions object, separated
by commas:
Example
Send email to more than one address:
var mailOptions = {
from: '[email protected]',
to: '[email protected], [email protected]
m',
subject: 'Sending Email using Node.js',
text: 'That was easy!'
}
Example
Send email containing HTML:
var mailOptions = {
from: '[email protected]',
to: '[email protected]',
subject: 'Sending Email using Node.js',
html: '<h1>Welcome</h1><p>That was easy!</p>'
}

NODE JS(MYSQL AS REFERENCE) CURD

OPERATIONS:
MySQL is a popular open-source relational database management system
that integrates seamlessly with JavaScript and Node.js applications. In this
tutorial, we will explore how to perform CRUD (Create, Read, Update,
Delete) operations with MySQL using JavaScript and Node.js. By the end of
this article, you’ll have a solid understanding of how to interact with a
MySQL database from your JavaScript applications.

Prerequisites
1. Node.js installed on your machine.
2. A running MySQL server.
3. Basic knowledge of JavaScript and Node.js.

Step 1: Install Required Packages

Before we start working with MySQL, let’s make sure we have the necessary packages
installed. We’ll use the mysql2 package for connecting to the database and executing queries.

npm install mysql2

Step 2: Set Up the Database Connection

In your Node.js application, you need to establish a connection to the MySQL database.
Create a JavaScript file (e.g., db.js) and add the following code:

const mysql = require("mysql2")

const connection = mysql.createConnection({

host: "your-database-host",
user: "your-username",
password: "your-password",
database: "your-database-name"
})

connection.connect((err) => {
if (err) {
console.error("Error connecting to MySQL:", err)
return
}
console.log("Connected to MySQL")
})
module.exports = connection

Replace 'your-database-host', 'your-username', 'your-password', and 'your-

database-name' with your MySQL server details.

Step 3: Create a New Record (Create - C)

Now, let’s create a function to insert data into a MySQL table. Create a JavaScript file
(e.g., create.js) and add the following code:

const connection = require("./db")

function createRecord(name, email) {

const sql = "INSERT INTO users (name, email) VALUES (?, ?)"
connection.query(sql, [name, email], (err, result) => {
if (err) {
console.error("Error creating record:", err)
return
}
console.log(`New record added with ID: ${result.insertId}`)
})
}

createRecord("John Doe", "[email protected]")

This code defines a function createRecord that inserts a new user into a ‘users’ table.

Step 4: Read Data (Read - R)

To read data from the database, create another JavaScript file (e.g., read.js) with the
following code:

const connection = require("./db")

function readRecords() {
const sql = "SELECT * FROM users"
connection.query(sql, (err, rows) => {
if (err) {
console.error("Error reading records:", err)
return
}
rows.forEach((row) => {
console.log(`ID: ${row.id}, Name: ${row.name}, Email: ${row.email}`)
})
})
}
readRecords()

This code defines a function readRecords that retrieves all user records from the ‘users’ table
and prints them to the console.

Step 5: Update Data (Update - U)

To update existing records, create a JavaScript file (e.g., update.js) with the following code:

const connection = require("./db")

function updateRecord(id, newName) {

const sql = "UPDATE users SET name = ? WHERE id = ?"
connection.query(sql, [newName, id], (err, result) => {
if (err) {
console.error("Error updating record:", err)
return
}
console.log(`Record updated: ${result.affectedRows} rows affected`)
})
}

updateRecord(1, "Jane Doe")

This code defines a function updateRecord that updates a user’s name based on their ID.

Step 6: Delete Data (Delete - D)

To delete records, create a JavaScript file (e.g., delete.js) with the following code:

const connection = require("./db")

function deleteRecord(id) {
const sql = "DELETE FROM users WHERE id = ?"
connection.query(sql, [id], (err, result) => {
if (err) {
console.error("Error deleting record:", err)
return
}
console.log(`Record deleted: ${result.affectedRows} rows affected`)
})
}

deleteRecord(1)
This code defines a function deleteRecord that deletes a user record based
on their ID.

Conclusion
In this article, we’ve covered the fundamental CRUD operations using
MySQL with JavaScript and Node.js. You’ve learned how to establish a
database connection, create, read, update, and delete records. This
knowledge will empower you to build more complex applications that
interact with MySQL databases seamlessly. Remember to handle errors
gracefully and adapt these examples to suit your specific project
requirements.