Last Updated : Jul 1, 2023
For achieve this we must make connection between server and client side (in the sense html webpage side). When make connection need server side language like php.
Because it supports our connection execution so when our server request will success then we can retrieve any data and also any length of data from database.
Here we used ‘XMLHttpRequest’ object for collects data from database. For generating connection with sql server we need to use php server side language.
In php we collects server information like, ‘server_name, user_name, password, database_name’ for execute connection with server and executing query to fetch all data from table ‘info’ encoded to html webpage.
<?php $conn = mysqli_connect("localhost","root","","dbase"); $res=mysqli_query($conn,"SELECT * FROM info"); ?> <table border = 1 cellpadding = 10> <tr> <td>ID</td> <td>name</td> <td>country</td> </tr> <?php $i=1;?> <?php foreach($res as $r) : ?> <tr> <td><?php echo $i++; ?></td> <td><?php echo $r["name"]; ?></td> <td><?php echo $r["country"]; ?></td> </tr> <?php endforeach; ?> </table>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and some websites when need to use external files those links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here. We used ‘onload’ event in <body> tag for generate function when user open browser.
- In <script> we created XMLHttpRequest object name is ‘xhttp’ for request data from server. In script for opening file in server we using ‘xhttp.open()’ method with two parameters.
- Here we are fetching data from server so we used ‘GET’ method, url contain ‘system.php’ it has database connection code.
- The open() method specifies the type of request for server and send() method sends request to the server.
- setInterval() function is commonly used to set a delay for functions that are executed again and again, such as animation. We can cancel the interval using clearInternal().
- That retrieved data’s finally append to <div> with ID ‘tbl’ in html.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
- Before writing system.php file we need to create database ‘dbase’ on mysql server then create a table with two columns namely fname, lname then table name is ‘info’.
- In system.php Mysqli_connect() function used for create new connection and its stored into variable $conn, It has all server informations. mysqli_query() function performs a query against a database. This method executing select query for collects all data from table.
- After table created with header row, three columns and we embeded php code inside table creation. Then foreach() loop used for collected data’s printed within table columns.
When user inserting data’s to database and in webpage all database data’s are updated on html table.