Before wrap up let's modify our new user registration form. Open the HTML file insert_form.html in text editor and modify the code as shown below.
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><a href="showrecord.php">All Records</a></li>
<li class="active"><a href="insert_form.html">Insert</a></li>
<li><a href="showrecord">Update</a></li>
<li><a href="showrecord">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" required>
</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" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="password">Password:</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="password" placeholder="Enter password" name="password" required>
</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>
Now open the file insert_action.php and modify the code as shown below.
<?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();
header("location: showrecord.php");
?>
Our application is almost ready! To start this application, we must type any existing file after http://localhost/user-management-system/ . To get rid of this, let's create a new page which will act as landing page in our application named index.php and type the following code given below.
index.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>
<div class="jumbotron text-center">
<h2>User Management System</h2>
<p>Welcome to my first application based on MySql and PHP</p>
</div>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">type a Heading Text</div>
<div class="panel-body">
<p>Type something interesting</p>
</div>
</div>
</div>
<footer class="navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<span>You will be auto redirect to main page in 10 seconds !</span>
</div>
</footer>
</body>
</html>
<script>
setTimeout(function(){
window.location='showrecord.php';
}, 10000);
</script>
The above index.html page is the default home page in apache server. So by default your web server loads the index.html file first. Let's type http://localhost/user-management-system in your browser's address bar and your web server automatically loads the above file. We have added small javascript code to load showrecord.php file in 10 seconds.
If you like this tutorial, please subscribe to our blog and for any suggestions/improvements, feel free to write in the comments! Thank you.
0 comments:
Post a Comment