So far we have configured our database and read all records from userlogin table. Let's create another file to insert new record in it. To insert we will use html from and submit form values to PHP to store data to our database. So let's create the file named insert_form.html, copy and paste the code given below. We are using bootstrap front-end framework for faster and easier user interface. You must be online because in this tutorial we are using CDN for bootstrap. To know more about Bootstrap visit this Bootstrap official site
insert_form.html
<!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 class="active"><a href="#">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>Insert Record</h2>
</div>
<form class="form-horizontal" method="POST" action="insert_action.php" >
<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">
</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">
</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">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-10">
<button type="submit" class="btn btn-primary">Add Record</button>
</div>
</div>
</form>
</div>
</body>
</html>The above HTML file provide us the user interface to insert data in a HTML form so that we can pass the form data to the PHP file mentioned in the above file in <form class="form-horizontal" method="POST" action="insert_action.php" >. This is the output if we run the code in browser by typing the following in address bar:
http://localhost/user-management-system/insert_form.html
Let's Start coding the PHP part. Create a PHP file named insert_action.php, copy the following code
insert_action.php
<?php
require_once "connection.php";
$username = mysqli_real_escape_string($dbc, $_POST['username']);
$email = mysqli_real_escape_string($dbc, $_POST['email']);
$password = mysqli_real_escape_string($dbc, $_POST['password']);
$sqlqry = "INSERT INTO userlogin (username, email, password) VALUES ('$username', '$email', '$password')";
if($dbc->query($sqlqry) === TRUE){
echo "<br />Record Added Sucessfully.";
}
else
{
echo "Error" . $sqlqry . "<br/>" . $dbc->error;
}
$dbc->close();
?>
Now run the insert_form.html file again by typing in browser's address bar
http://localhost/user-management-system/insert_form.html and type field data in the form and click Add Record button.
Run the HTML file again and add one more record. Now let's run showrecord.php which was created earlier in Part-3 of this tutorial.
http://localhost/user-management-system/showrecord.php. Here is the screenshot
Now let's beautify the output by modifying the showrecord.php code by adding some HTML code in it. Open the showrecord.php file in your favorite text editor and modify it as per the code given below.
<!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 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>
</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>
</tr><?php
}
}
$retval->free();
$dbc->close();
?>
</tbody>
</div>
</body>
</html>Now run the newly modified showrecord.php file again. Look the difference. Now it's your time to remove Connection Successful! text from the output. Hints! modify connection.php file.
So far we have learned how to add records to the MySql Database using PHP and HTML Form and display records from a table. In Part-5 we will see how to update and delete existing record from MySql database table.
Read Part-3
0 comments:
Post a Comment