Welcome back to Electronics Eternity! In our latest video, we dive deep into enhancing the security of our remote control project. If you’ve been following along, you’ll remember that in our previous video, we demonstrated how to remotely control endpoint devices using a simple web interface. While this functionality is exciting, it also raised some valid concerns about security, particularly in shared environments.
Imagine a situation where multiple users are connected to the same network. Without proper security measures, anyone could access the control page and interfere with your device settings. For example, if you and a sibling are arguing over whether to keep the room heater on or off, both of you could potentially change the setting at will, leading to unnecessary disputes. To address this issue, we set out to implement a secure solution.
In this tutorial, we introduce a username and password authentication mechanism, ensuring that only authorized users can make changes to the endpoint device.
Below is the code that is used to create our Control page. As you could see, very little change was done to the code except for the part highlighted in the red font.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Enhanced Control Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
input[type="radio"] {
width: 4.2em;
height: 4.2em;
position: relative;
bottom: 17px;
right: 7px;
background-color: rgb(253, 253, 253);
border-color: rgb(102, 98, 98);
}
input[type="radio"]:checked {
width: 4.2em;
height: 4.2em;
position: relative;
bottom: 17px;
right: 7px;
background-color: rgb(73, 26, 215);
border-color: aliceblue;
}
div.custom2 {
background-color: rgb(73, 26, 215);
color: #ffffff;
margin-top: 0.5%;
padding: 0.5%;
}
</style>
</head>
<body>
<div class="custom2">
<h1>Welcome to LED Control Page</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<div class="row">
<div class="col">
<div class="container mt-3">
<form action="action_page_modal.php" target="_self" method="post">
<div class="mb-3 mt-3">
<label for="Username">Username:</label>
<input type="text" class="form-control" id="Username" placeholder="Enter Username" name="Username">
</div>
<div class="mb-3">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<div class="form-check mt-4 mb-5 mx-3">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1"
value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
ON
</label>
</div>
<div class="form-check mt-10 mx-3 mb-5">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2"
value="option2">
<label class="form-check-label" for="exampleRadios2">
OFF
</label>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</div>
</form>
</div>
</div>
<div class="col"></div>
</div>
</body>
</html>
Next, let's look at the action page :
<html>
<head>
<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>
<style>
#myBtn {
width: 300px;
padding: 10px;
font-size: 20px;
position: absolute;
margin: 0 auto;
right: 0;
left: 0;
bottom: 50px;
z-index: 9999;
}
</style>
<body>
<div class="container">
<button type="button" class="btn btn-info btn-md" id="myBtn">Close</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">You have changed your button state</h4>
</div>
<div class="modal-body">
<p>Click the Close button at the bottom to go back to Control Page again</p>
</div>
</div>
</div>
</div>
</div>
<?php
$exampleRadios = $_POST['exampleRadios'];
$Username = $_POST['Username'];
$pswd = $_POST['pswd'];
$dbhost = "localhost";
$dbuser = $Username;
$dbpass = $pswd;
$dbname = "testingdatabase";
$connect = @mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);
if (!$connect) {
echo "Error: " . mysqli_connect_error();
exit();
}
if ($exampleRadios == "option1") {
$query = "INSERT INTO buttonstate (id, Created_at, State) VALUES (NULL, current_timestamp(), 'ON');";
} else {
$query = "INSERT INTO buttonstate (id, Created_at, State) VALUES (NULL, current_timestamp(), 'OFF');";
}
$result = mysqli_query($connect, $query);
if ($result) {
echo "<script>";
echo "$(document).ready(function(){";
echo "$('#myModal').modal('show');";
echo "$('#myBtn').click(function(){";
echo "$('#myModal').modal('hide');";
echo "window.location.assign('http://localhost/Bootstrap%20from%20Desktop/Password/Basic_Login.html');";
echo "});";
echo "});";
echo "</script>";
}
?>
</body>
</html>
There is a lot changes done to the Action page. Let's look into it in detail so that we can understand what we have changed.
<html>
<head>
<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>Bootstrap CSS: Links the Bootstrap 3.4.1 library for styling.
jQuery: Loads jQuery 3.7.1 for DOM manipulation and interactivity.
Bootstrap JS: Includes Bootstrap JavaScript for modal functionality.
<style>
#myBtn {
width: 300px;
padding: 10px;
font-size: 20px;
position: absolute;
margin: 0 auto;
right: 0;
left: 0;
bottom: 50px;
z-index: 9999;
}
</style>Styles the "Close" button (#myBtn) to:
Center horizontally and position at the bottom.
Apply dimensions and font size.
Set high z-index to ensure it overlays other content.
<body>
<div class="container">
<button type="button" class="btn btn-info btn-md" id="myBtn">Close</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">You have changed your button state</h4>
</div>
<div class="modal-body">
<p>Click the Close button at the bottom to go back to Control Page again</p>
</div>
</div>
</div>
</div>
</div>Button (#myBtn): A Bootstrap-styled button to trigger modal behavior or an action.
Modal (#myModal):
Modal Header: Displays a message: "You have changed your button state."
Modal Body: Informs the user to click the "Close" button to return to the control page.
Uses Bootstrap's modal structure for styling and animations.
if ($exampleRadios == "option1") {
$query = "INSERT INTO buttonstate (id, Created_at, State) VALUES (NULL, current_timestamp(), 'ON');";
} else {
$query = "INSERT INTO buttonstate (id, Created_at, State) VALUES (NULL, current_timestamp(), 'OFF');";
}
$result = mysqli_query($connect, $query);Based on the radio button state (exampleRadios):
If "ON", inserts ON into the buttonstate table.
If "OFF", inserts OFF into the buttonstate table.
Executes the query using mysqli_query().
if ($result) {
echo "<script>";
echo "$(document).ready(function(){";
echo "$('#myModal').modal('show');";
echo "$('#myBtn').click(function(){";
echo "$('#myModal').modal('hide');";
echo "window.location.assign('http://localhost/Bootstrap%20from%20Desktop/Password/Basic_Login.html');";
echo "});";
echo "});";
echo "</script>";
}If the database operation is successful:
Displays the modal (#myModal).
Handles the "Close" button:
Hides the modal on click.
Redirects the user to the control page (Basic_Login.html).
And that wraps up our tutorial! We’ve successfully implemented an additional layer of security by requiring user credentials to modify the state of our endpoint device. The credentials used are PHP accounts with database access, leveraging PHP's robust security policies and controls. To fully grasp the concepts covered here, it’s important to have a fair understanding of Bootstrap modals. If you find any part of this tutorial unclear, consider revisiting the topic for a deeper dive.
Thank You for Watching. Please Don't Forget to Like and Subscribe!!
For further explanation, feel free to check out my YouTube video below :
Comments