I am currently doing on a school project where I am using Arduino and Raspberry Pi. I managed to send the temperature sensor readings from Raspberry Pi to IoT gateway and it is updated to Mysql database. I can display the sensor table using AJAX in IoT gateway. However, the problem is that the sensorInfo table doesn't refresh itself every 30 seconds.
This is what my SensorInfo table is like
sensorInfo table
Serial No | SensorID | Temp | SensorDate
form.html
<!DOCTYPE html>
<html>
<head>
<title>IOT Sensor gateway</title>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","sensor.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<h1>Welcome</h1>
<h2>IoT gateway Sensor Info</h2>
<form method="post">
Select Sensor No:
<select name="users" onchange="showUser(this.value)">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>
<hr>
<br>
<div id="txtHint">Sensor readings will be displayed here...</div>
<script>
$(document).ready(function(){
showUserinfo();
});
function showUserinfo(){
$('#txtHint').load('sensor.php', function(){
setInterval(showUserinfo, 30000);
});
}
</script>
</body>
</html>
sensor.php
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse:collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_GET['q']);
$conn = mysqli_connect('localhost','root','admin','tempSensorReading');
if (!$conn) {
die('Could not connect: ' . mysqli_error($conn));
}
mysqli_select_db($conn,"ajax_demo");
$sql="SELECT * FROM SensorInfo WHERE SensorID = '".$q."' order by SerialNo desc limit 5";
$result = mysqli_query($conn,$sql);
echo "<table>
<tr>
<th>SensorNo</th>
<th>SensorDate</th>
<th>Temp</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['SensorID'] . "</td>";
echo "<td>" . $row['SensorDate'] . "</td>";
echo "<td>" . $row['Temp'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($conn);
?>
</body>
</html>
Have been stuck in this problem for long. Glad if someone can help me. Thanks!
You're doing a few things incorrectly. For one, your jQuery.load() function is being called every 30 seconds, but it's calling it's parent function as well, making the script call twice, and then four times, and it's getting exponentially multiplied every 30 seconds, each time that setInterval gets called. Why don't you remove all your JS and try something like this:
$(document).ready(function() {
//Define your update function.
var showUserInfo = function(userVal) {
$("#txtHint").load("sensor.php?q=" + userVal, function() {
//Anything else you want to do here.
});
};
//Call your update function for the first time.
showUserInfo();
//Set an interval to call your update function every 30 seconds.
setInterval(function() {
showUserInfo($("select[name='users']").val())
}, 30000);
});
Related
I have generated a table from a query and at the end of each row in the table there is a 'book' button. Once this button is selected, a modal asking the user to enter their ID is shown. Once the user enters their ID, a button is clicked and the ID is checked against the database.
What I would like to do is when the button is clicked within the modal have the selected row data and the members ID inserted into the database table. I'm getting confused on how I can get the selected row data after the modal is shown.
An image of php table:
Code for index.php
<table class="table table-bordered">
<tr>
<th width="10%">Class</th>
<th width="35%">Date</th>
<th width="40%">Time</th>
<th width="10%">Location</th>
<th width="5%">Book</th>
</tr>
<?php
while ($row = mysqli_fetch_array($sql)){
$classdescription = $row["class_description"];
$date = $row["date"];
$start = $row["startTime"];
$area = $row["area_description"];
?>
<tr>
<td><?php echo $classdescription?></td>
<td><?php echo $date?></td>
<td><?php echo $start?></td>
<td><?php echo $area?></td>
<td><input type="button" data-toggle="modal" data-target="#myModal" value="Book" name="book"/>
</td>'
</tr>
<?php
}
?>
</table>
</div>
</div>
<!-- Book Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Book Modal content-->
<form id = "bookingform" action="login.php" method="post">
Username: <input type="username" id="username" placeholder="username"></br>
<button id="book">Book</button>
</form>
code for login.php
<?php
$user = $_POST['user'];
require "connectivity.php";
$date = date("Y-m-d");
$query = "SELECT member_forename FROM member WHERE name='$user'";
$result = mysqli_query($con, $query);
if(mysqli_num_rows($result) == 1) {
$row = mysqli_fetch_assoc($result);
}
elseif (mysqli_num_rows($result) == 0) {
echo "Username not recogised";
}
$sql = "INSERT INTO booking (booking_id, booking_date, customer_ID, bschedule_date, bschedule_class_id) VALUES ('15', '$date', '3', '2017-12-32')";
if(mysqli_query($con, $sql)) {
echo "booking made";
}
?>
login.js
$(document).ready(function(){
$("#login_btn").click(function(){
var user = $("#username").val();
var data = "user=" + user;
$.ajax({
method: "post",
url: "login.php?",
data: data,
success: function(data){
$("#login_error").html(data);
}
});
});
This example is based on an example made on the site https://www.w3schools.com
I use PG_QUERYS but you can switch to MYSQL. The rest is what you want. Any doubt is just ask.
getuser.php
<!DOCTYPE html>
<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']);
$dbconn = pg_connect('localhost','peter','abc123','my_db');
if (!$con) {
die('Could not connect');
}
$query = "SELECT * FROM user WHERE id = $1";
$result = pg_prepare($dbconn, "my_query", $query);
$data = array($q);
$result = pg_execute($dbconn, "my_query", $data);
echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = pg_fetch_row($result)) {
echo "<tr>";
echo "<td>" . $row[0] . "</td>";
echo "<td>" . $row[1] . "</td>";
echo "<td>" . $row[2] . "</td>";
echo "<td>" . $row[3] . "</td>";
echo "<td>" . $row[4] . "</td>";
echo "</tr>";
}
echo "</table>";
pg_close($dbconn);
?>
</body>
</html>
The Html
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser.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">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
This is a simple example, for you to understand the basics. If you want more help start programming, and if you have any difficulties ask the community.
In the example above, when a user selects a person in the dropdown list above, a function called "showUser()" is executed.
The function is triggered by the onchange event.
Code explanation:
First, check if person is selected. If no person is selected (str == ""), clear the content of txtHint and exit the function. If a person is selected, do the following:
1) Create an XMLHttpRequest object
2) Create the function to be executed when the server response is ready
3) Send the request off to a file on the server
Notice that a parameter (q) is added to the URL (with the content of the dropdown list)
The page on the server called by the JavaScript above is a PHP file called "getuser.php".
The source code in "getuser.php" runs a preaper execute on a PostgreSQL database, and returns the result in an HTML table.
Explanation: When the query is sent from the JavaScript to the PHP file, the following happens:
1) PHP opens a connection to a PostgreSQL server
2) The correct person is found
3) An HTML table is created, filled with data, and sent back to the "txtHint" placeholder.
What you want is to have the ID of the selected row in the modal, so that you can include it in the form and submit it to the login script. As I see it there are several approaches how you can achieve that.
One is to dynamically generate an individual modal for each row that includes its ID. Here you would move the modal code into the while loop and create a new modal for each row with an individual ID etc. The row ID should be included as hidden input in the form.
Another solution would be to use java script to keep track of which row has been selected. For that you need to
a) call a js function for each "book" button in the table that sets the row ID on a global JS var.
b) do the form submit with Java script and ensure the row ID is set first in the same script
i have a drop down list populated from a database(it is the first cell in a table row) then based on that selection i want it to populate the rest of the row from the same database, each cell is a different table in the database, so far i only have it populating the first cell (calories), i can't figure out how to get it to populate the rest of the cells, thanks
<?php
$link=mysqli_connect("localhost", "root", "");
mysqli_select_db($link,"meal_planner");
?>
<!DOCTYPE html>
<html>
<head>
<title>Meal Planner</title>
<link href="main2.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
// Hide all panels to start
var panels = $('.accordion > dd').hide();
// Show first panel on load (optional). Remove if you want
panels.first().show();
// On click of panel title
$('.accordion > dt > a').click(function() {
var $this = $(this);
// Slide up all other panels
panels.slideUp();
//Slide down target panel
$this.parent().next().slideDown();
return false;
});
});
</script>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<dl class="accordion">
<dt>Monday</dt>
<dd>
<table>
<tr>
<th>Breakfast</th>
<th>Calories</th>
<th>Protein</th>
<th>Carbs</th>
<th>Fat</th>
<th>Serving Sizing</th>
</tr>
<tr>
<td>
<select name="breakfa"s onchange="showUser(this.value)">
<option value="">Select a Protein:</option>
<?php
$res=mysqli_query($link,"select name, protein_id from protein");
while($row=mysqli_fetch_array($res))
{
?>
<option value="<?php echo $row["protein_id"]; ?>"><?php echo $row["name"]; ?></option>
<?php
}
?>
</select>
</td>
<td><div id="txtHint"><b>0</b></div></td>
<td>50</td>
<td>50</td>
<td>50</td>
<td><input type="" name=""></td>
</tr>
</table>
</dd>
<dt>Tuesday</dt>
<dd>TEST</dd>
<dt>Wednesday</dt>
<dd>TEST.</dd>
</dl>
</body>
</html>
php
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','root','','meal_planner');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM protein WHERE protein_id = '".$q."'";
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['calories'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
I'm creating a program in php where the user chooses a letter and then in the screen are printed all the names starting with this letter which are stored in my mysql "presta_prova" database.
Here is my code (php file):
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table,
td,
th {
border: 1px solid black;
padding: 5px;
}
th {
text-align: left;
}
</style>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "presta_prova.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Scegliete una lettera:</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
</form>
<br>
<div id="txtHint"><b>Vedi qui i tipi ti marche:</b>
</div>
<?php $q=i ntval($_GET[ 'q']); $con=m ysqli_connect( 'localhost', 'root', 'evolvia2016', 'presta_prova'); if (!$con) { die( 'Could not connect: ' . mysqli_error($con)); } mysqli_select_db($con, "presta_prova"); $sql="SELECT * FROM presta_prova WHERE marca LIKE '"
.$q%. "' "; $result=m ysqli_query($con,$sql); echo "<table>
<tr>
<th>Marca</th>
<th>Descrizione</th>
</tr>"; while($row=m ysqli_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row[ "marca"] . "</td>"; echo "<td>" . $row[ "descrizione"] . "</td>"; echo "</tr>"; } echo "</table>"; mysqli_close($con); ?>
</body>
</html>
But when I choose a letter this is my output. Instead of my rows of the database this program outputs the head of the table.Have I done something wrong with my code? Maybe this way doesnt work for mysqli database? Thanks!
Here is my database :
If the aim is to populate the table with new rows rather than appending the response into a div which is how it appears then you could restructure the code and use POST like this.
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
ob_clean();
/* Forgot to change this to POST! */
$q=intval($_POST[ 'q']);
$con=mysqli_connect( 'localhost', 'root', 'evolvia2016', 'presta_prova');
if (!$con)die( 'Could not connect: ' . mysqli_error($con));
mysqli_select_db($con, "presta_prova");
$sql="SELECT * FROM presta_prova WHERE marca LIKE '".$q."%' ";
$result=mysqli_query($con,$sql);
$html=array("<tr><th>Marca</th><th>Descrizione</th></tr>");
while( $row=mysqli_fetch_array($result) ) {
$html[]="<tr><td>" . $row[ "marca"] . "</td><td>" . $row[ "descrizione"] . "</td></tr>";
}
mysqli_close($con);
exit( implode(PHP_EOL,$html) );
}
?>
<!DOCTYPE html>
<html>
<head>
<title>gotta have a title</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table,
td,
th {
border: 1px solid black;
padding: 5px;
}
th {
text-align: left;
}
</style>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("results").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("POST", location.href, true );/*"presta_prova.php"*/
/* send the content-type header */
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
/* my mistake here, this should be like this rather than object literal. */
xmlhttp.send( 'q='+str );
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser( this.value )">
<option value="">Scegliete una lettera:</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
</form>
<br>
<div id="txtHint"><b>Vedi qui i tipi ti marche:</b>
</div>
<table id='results'>
<tr>
<th>Marca</th>
<th>Descrizione</th>
</tr>
</table>
</body>
</html>
Fully working example without database interaction but to show the selection mechanism working.
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
ob_clean();
$q=intval( $_POST[ 'q'] );
$t=$_POST['text'];
/* emulated database search and results being generated */
$html=array('<tr><th>Marca</th><th>Descrizione</th></tr>');
for( $i=0; $i < 10; $i++ ) $html[]='<tr><td>Marca:'.$i.' q='.$q.'</td><td>Descrizione:'.$i.' text='.$t.'</td></tr>';
header( 'Content-Type: text/html' );
exit( implode( PHP_EOL, $html ) );
}
?>
<!DOCTYPE html>
<html>
<head>
<title>gotta have a title</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table,
td,
th {
border: 1px solid black;
padding: 5px;
}
th {
text-align: left;
}
</style>
<script>
function showUser(o) {
if (o.value == '') {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("results").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open( "POST", location.href, true );
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlhttp.send( 'q='+o.value+'&text='+o.options[o.options.selectedIndex].text );
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser( this )">
<option value="">Scegliete una lettera:</option>
<?php
/* Generate each letter of the alphabet as an option */
for( $i=0; $i<26; $i++ ){
$char=chr( $i + 65 );
$int=$i+1;
echo "<option value='$int'>$char";
}
?>
</select>
</form>
<br>
<div id="txtHint"><b>Vedi qui i tipi ti marche:</b>
</div>
<table id='results'><!-- results will overwrite the table innerHTML -->
<tr>
<th>Marca</th>
<th>Descrizione</th>
</tr>
</table>
</body>
</html>
I am using ajax to fetch information for my database and im running into a problem. nothing is being shown in return.
I have a select list that calls for a js script to run onchange, that calls for the php file to get the database information and return it in a table.
the problem is that upon the onchange event, I have a table show up with just the table heads but no information below. I checked console and the error Im getting is this:
GET http://lineofcode.com/favicon.ico 401 (Unauthorized)
thats the only error that shows. What am i doing wrong? why is my table blank?
html
<p>Please select a team name from the list to view table</p>
<form>
<select name="users" onchange="showTeam(this.value)">
<option value="">Select a team:</option>
<option value="1">bobcats</option>
<option value="2">rangers</option>
<option value="3">hawks</option>
<option value="4">rockets</option>
</select>
</form>
<br>
<div id="teamInfo"><b></b></div>
JS script
// script for onchange event
function showTeam(str) {
if (str == "") {
document.getElementById("teamInfo").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("teamInfo").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","phpfiles/getTeam.php?q="+str,true);
xmlhttp.send();
}
}
php file
<!DOCTYPE html>
<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','....','.....','....');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM teams WHERE teamname = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>
<tr>
<th>teamname</th>
<th>city</th>
<th>bestplayer</th>
<th>yearformed</th>
<th>website</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['teamname'] . "</td>";
echo "<td>" . $row['city'] . "</td>";
echo "<td>" . $row['bestplayer'] . "</td>";
echo "<td>" . $row['yearformed'] . "</td>";
echo "<td>" . $row['website'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
Just an observation but shouldn`t code be like this ?
xmlhttp.open("GET","phpfiles/getTeam.php?q="+str,true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("teamInfo").innerHTML = xmlhttp.responseText;
}
};
Also try to print_r($_GET) to see if the value is being posted
Not sure if this is the problem but you are using intval() --e.g. for converting input string to integers --and your teamnames in your database won't match that (assuming you've given your teams names and not numbers).
I have a select input having several options in it as html and I want to execute a query on the basis of a selected value in the dropdown list.
<select name="test">
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="mango">mango</option>
</select>
I want to execute the following query with a criterion value selected in the above drop down list.
<?php $sql=mysqli_query($con,"select * from tblsession where sessionid='".$_REQUEST['test']."'"); ?>
pls help.
Okay, in this same page your going to have to use some javascript so you can be capable of working on AJAX.
So here's the code for the first page:
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("para").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("para").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="test" onchange="showUser(this.value)">
<option value="Apple">Apple</option>
<option value="Bannana">Bannana</option>
<option value="Bannana">Mango</option>
</select>
</form>
<br>
<div id="para"><b>What you will excute will be listed here...</b></div>
</body>
</html>
And this is getuser.php
<!DOCTYPE html>
<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('host','username','password','db');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"db");
$sql="SELECT * FROM test WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['apple'] . "</td>";
echo "<td>" . $row['bannana'] . "</td>";
echo "<td>" . $row['mango'] . "</td>";
}
mysqli_close($con);
?>
</body>
</html>