Modified showrecord.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>SOLOCODING.NET PHP MYSQL Tutorial</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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.1/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
User Management System
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">All Records</a></li>
<li><a href="insert_form.html">Insert</a></li>
<li><a href="#">Update</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="text-center" >
<h2>Display Records</h2>
</div>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>User Name</th>
<th>Email</th>
<th>Password</th>
<th>Created at</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php
require_once "connection.php";
$sql = 'SELECT * FROM userlogin';
$retval = $dbc->query($sql);
if(! $retval ) {
die('Could not get data: ' . mysqli_error());
}
else{
while($row = $retval->fetch_assoc()) { ?>
<tr>
<td> <?php echo "{$row['id']}"; ?></td>
<td> <?php echo "{$row['username']}"; ?></td>
<td> <?php echo "{$row['email']}"; ?></td>
<td> <?php echo "{$row['password']}"; ?></td>
<td> <?php echo "{$row['created_at']}"; ?></td>
<td> <a href="edit_record.php?edit_id=<?php echo "{$row['id']}";?>" alt="edit"><i class="fa fa-pencil" aria-hidden="true"></a></i>
</td>
</tr><?php
}
}
$retval->free();
$dbc->close();
?>
</tbody>
</div>
</body>
</html>By modifying the above code we added a editable link for each record so that we can get the selected record id by the application user. To show the pencil icon edit link, we have added Font Awesome CDN css to our code. To know more about Font Awesome visit the Font Awesome official site. Here is the screenshot. Let's add the functionality of the edit pencil button.
Now let's create the user interface and functionality to edit selected record. Create another file edit_record.php and type the following code.
edit_record.php
<?php
require_once "connection.php";
//Get ID from Database
if(isset($_GET['edit_id'])){
$sql = "SELECT * FROM userlogin WHERE id =" .$_GET['edit_id'];
$result = mysqli_query($dbc, $sql);
$row = mysqli_fetch_array($result);
}
//Update Information
if(isset($_POST['btn-update'])){
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['password'];
$update = "UPDATE userlogin SET username='$username', email='$email', password='$password' WHERE id=". $_GET['edit_id'];
$up = mysqli_query($dbc, $update);
if(!isset($sql)){
die ("Error $sql" .mysqli_connect_error());
}
else
{
header("location: showrecord.php");
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>SOLOCODING.NET PHP MYSQL Tutorial</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.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
User Management System
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="insert_form.php">Insert</a></li>
<li class="active"><a href="showrecord.php">Update</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="text-center" >
<h2>Update Record</h2>
</div>
<form class="form-horizontal" method="POST">
<div class="form-group">
<label class="control-label col-sm-3" for="Username">Username:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="username" placeholder="Enter Username" name="username" value="<?php echo $row['username']; ?>">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="email">Email:</label>
<div class="col-sm-6">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email" value="<?php echo $row['email']; ?>">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pwd">Password:</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="password" placeholder="Enter password" name="password" value="<?php echo $row['passworc']; ?>">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-10">
<button type="submit" name="btn-update" id="btn-update" class="btn btn-primary" onClick="update()">Update Record</button>
<a href="showrecord.php"><button type="button" class="btn btn-info" value="button">Cancel</button></a>
</div>
</div>
</form>
</div>
<!-- Alert for record Update -->
<script>
function update(){
var upd;
if(confirm("Record Updated Sucessfully") == true){
upd= "update";
}
}
</script>
</body>
</html>Now let's execute our edit_record.php. This PHP file executes when user click the edit pencil button from showrecord.php. So in browser's address bar type
http://localhost/user-management-system/showrecord.php
Here are the screenshots:
User clicked the record ID 2
Displayed the selected record in a form for modification.
User updated the field value and clicked Update Record button.
A confirmation message pops up on successful update. On pressing OK user will redirected to showrecord.php to display all updated records.
Let's move on to Part-6 of the tutorial where we will integrate delete functionality to our user-management-system
Read Part-4
0 comments:
Post a Comment