Click here for video class - How to connect with database
Listen free IoT (internet of things) classes
https://youtube.com/playlist?
Subscribe for more videos
Step 1
Use this code to insert the data into Database
Save this file as search.php
<html>
<head>
<title>Insert into page</title>
</head>
<body>
<center>
<?php
// servername => localhost
// username => root1
// password => root
// database name => staff
$conn = mysqli_connect("localhost", "peter", "abc123", "ajax_demo");
// Check connection
if($conn === false){
die("ERROR: Could not connect. "
. mysqli_connect_error());
}
// Taking all 5 values from the form data(input)
$id = $_REQUEST['id'];
$FirstName = $_REQUEST['FirstName'];
$LastName = $_REQUEST['LastName'];
$Age = $_REQUEST['Age'];
$Hometown = $_REQUEST['Hometown'];
$Job = $_REQUEST['Job'];
// Performing insert query execution
// here our table name is college
$sql = "INSERT INTO user VALUES ('$id','$FirstName',
'$LastName','$Age','$Hometown','$Job')";
if(mysqli_query($conn, $sql)){
echo "<h3>data stored in a database successfully."
. " Please browse your localhost php my admin"
. " to view the updated data</h3>";
echo nl2br("\n$id\n$FirstName\n $LastName\n "
. "$Age\n $Hometown\n $Job");
} else{
echo "ERROR: Hush! Sorry $sql. "
. mysqli_error($conn);
}
// Close connection
mysqli_close($conn);
?>
</center>
</body>
</html>
Step-2
Use this code to display the html page front view
Save this file as db.php
<html lang="en">
<head>
<title>GFG- Store Data</title>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box}
</style>
</head>
<body>
<center>
<h1>Storing Form data in Database</h1>
<form action="search.php" method="post">
<p>
<label for="id">id</label>
<input type="text" name="id" id="id">
</p>
<p>
<label for="firstName">FirstName:</label>
<input type="text" name="FirstName" id="FirstName">
</p>
<p>
<label for="lastName">LastName:</label>
<input type="text" name="LastName" id="LastName">
</p>
<p>
<label for="Gender">Age</label>
<input type="text" name="Age" id="Age">
</p>
<p>
<label for="Address">Hometown</label>
<input type="text" name="Hometown" id="Hometown">
</p>
<p>
<label for="emailAddress">Job</label>
<input type="text" name="Job" id="Job">
</p>
<input type="submit" value="Submit">
</form>
</center>
</body>
</html>
Step-3
Use this code to retrieve data from Database
Save this file as getuser1.php
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','peter','abc123');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>
Step-4
Html & javascript code to search data from Database & to display data
Save this file as user.html
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser1.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
Thank you
No comments:
Post a Comment