How do I display a database line by line through a click on a Javascript button?

PHP
1 
HTML Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial scale = 1.0">
        <link rel="stylesheet" type="text/css" href="css/booklist.css">
        <title>Library Book Catalogue</title>
    </head>
    <body>
        <h1>Library System</h1>
        <div id="header">
            <h2 style="padding: 10px; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif ;">The Readers Plane</h2>
        </div>
        <div class = "book-list">
            <form method ="POST" action="php2/num10.php">
            <table>
                <tr>
                    <th>Product</th>
                    <th>Quantity</th>
                    <th>Availability</th>
                </tr>
                <tr>
                    <td>
                        <div class = "features">
                            <img src = "img/oxford.jpeg">
                            <div>
                                <h3>Oxford Dictionary of Idioms</h3>
                                <p>Price : RM48.90</p>
                            </div>
                        </div>
                    </td>
                    <td><input type="number" value="1"></td>
                    <td><button type="submit" onclick="" id="">Add to Borrow List</button></td>
                </tr>
                <tr>
                    <td>
                        <div class = "features">
                            <img src = "img/python.jpeg">
                            <div>
                                <h3>Python Programming</h3>
                                <p>Price : RM62.90</p>
                            </div>
                        </div>
                    </td>
                    <td><input type="number" value="1"></td>
                    <td><button type="submit" onclick="" id="">Add to Borrow List</button></td>
                </tr>
                <tr>
                    <td>
                        <div class = "features">
                            <img src = "img/recipe.jpeg">
                            <div>
                                <h3>What Mummy Makes</h3>
                                <p>Price : RM41.50</p>
                            </div>
                        </div>
                    </td>
                    <td><input type="number" value="1"></td>
                    <td><button type="submit" onclick="" id="">Add to Borrow List</button></td>
                </tr>
                <tr>
                    <td>
                        <div class = "features">
                            <img src = "img/chemical.jpg">
                            <div>
                                <h3>Introductory Chemical Engineering Thermodynamics</h3>
                                <p>Price : RM124.70</p>
                            </div>
                        </div>
                    </td>
                    <td><input type="number" value="1"></td>
                    <td><button type="submit" onclick="" id="">Add to Borrow List</button></td>
                </tr>
                <tr>
                    <td>
                        <div class = "features">
                            <img src = "img/a&f.jpg">
                            <div>
                                <h3>Finance and Accounting: An Introduction</h3>
                                <p>Price : RM124.70</p>
                            </div>
                        </div>
                    </td>
                    <td><input type="number" value="1"></td>
                    <td><button type="submit" onclick="" id="">Add to Borrow List</button></td>
                </tr>
                <tr>
                    <td>
                        <div class = "features">
                            <img src = "img/electrical.jpg">
                            <div>
                                <h3>Electrical Engineering Textbook</h3>
                                <p>Price : RM112.80</p>
                            </div>
                        </div>
                    </td>
                    <td><input type="number" value="1"></td>
                    <td><button type="submit" onclick="" id="">Add to Borrow List</button></td>
                </tr>
                <tr>
                    <td>
                        <div class = "features">
                            <img src = "img/record.jpeg">
                            <div>
                                <h3>Guinness World Records 2021</h3>
                                <p>Price : RM43.30</p>
                            </div>
                        </div>
                    </td>
                    <td><input type="number" value="1"></td>
                    <td><button type="submit" onclick="" id="">Add to Borrow List</button></td>
                </tr>
                <tr>
                    <td>
                        <div class = "features">
                            <img src = "img/steven.jpeg">
                            <div>
                                <h3>Steven Gerrard: My Story</h3>
                                <p>Price : RM35.00</p>
                            </div>
                        </div>
                    </td>
                    <td><input type="number" value="1"></td>
                    <td><button type="submit" onclick="" id="">Add to Borrow List</button></td>
                </tr>
                <tr>
                    <td>
                        <div class = "features">
                            <img src = "img/pharma.jpg">
                            <div>
                                <h3>Pharmacology: A Patient-Centered Nursing Process Approach</h3>
                                <p>Price : RM155.00</p>
                            </div>
                        </div>
                    </td>
                    <td><input type="number" value="1"></td>
                    <td><button type="submit" onclick="" id="">Add to Borrow List</button></td>
                </tr>
                <tr>
                    <td>
                        <div class = "features">
                            <img src = "img/cs.jpg">
                            <div>
                                <h3>Computer Science: An Overview, Global Edition</h3>
                                <p>Price : RM111.90</p>
                            </div>
                        </div>
                    </td>
                    <td><input type="number" value="1"></td>
                    <td><button type="submit"  onclick="" id="" value="">Add to Borrow List</button></td>
                </tr>
            </table>
           </form> 
        </div>

        
        
    </body>
</html>

PHP Code

<?php
require "num1.php";
?>

<!DOCTYPE html>
<html lang="en">
 
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Practical 10</title>
 
 <style>
 table {
 border-collapse: collapse;
 margin-top: 20px;
 }
 
 th,
 td {
 border: 1px solid black;
 }
 
 th:first-of-type,
 td:first-of-type {
 text-align: center;
 width: 20px;
 }
 
 th:not(:first-of-type),
 td:not(:first-of-type) {
 padding-left: 10px;
 padding-right: 10px;
 }
 
 </style>
 </head>
 
 <body>
 <h1>Student Records</h1>
 
 <table>
 <tr>
 <th>#</th>
 <th>Product Name</th>
 <th>Quantity</th>
 <th>Returned Date</th>
 </tr>

<?php
 $sql = "SELECT * FROM `table3`;";
 
 $sql_run = $conn->query($sql); // contain SQL results, FALSE if there's an error
 
 if($sql_run) { // if it is not false, then proceed
 if($sql_run->num_rows > 0) { // num_rows will check if there are row(s) of results
 while($row = $sql_run->fetch_assoc()) {
 ?>
 <tr>
 <td><?= $row['id']; ?></td>
 <td><?= $row['product_name']; ?></td>
 <td><?= $row['quantity']; ?></td>
 <td><?= $row['returned_date']; ?></td>
 </tr>
 <?php
 }
 } else
 echo "No table rows found.";
 } else
 echo "Error retrieving table rows: " . $conn->error;
 
 ?>
 </table>
</body>
</html>

My database are all connected to phpMyAdmin. I am able to display the database but not one by one. I want a particular item to be added to the database based on the row of each item as each row has a particular button to be added to the database.

2

Can you clarify please? Do you want to submit items to the database, or display items from the database?

If you show your code for doing that, perhaps someone can show an easy way to display items one by one.

I suspect you mean they are all stored in MySQL - phpMyAdmin is just an admin tool that also connects to MySQL (and perhaps other databases).

What stage are you at with PHP? For example, have you done a basic form submission page, to allow you to type in your book details and submit them to the database? If not, that would be a good first step. You’ll see then how to surround the required fields in <form> tags, how to name each field so you can access it in PHP, and how to validate, sanitise and store your data.

3

I would want to submit items to the database but according to the button I clicked. So, basically, the database will appear one by one instead of all together.

4

Have you got some basic form input code working yet? What stage have you got to?

5

I have learnt quite some time but still couldn’t really figure out the problem

6

I also tried my best figuring out this solutions for days but still couldn’t crack the code.

7

Sounds like you want pagination where you can control how many lines are displayed at once?

I would search the internet on pagination to find a tutorial as I think it will get you there?

Here’s a snippet of my website full page pagination?

   $query = 'SELECT id, user_id, author, page, thumb_path, path, post, page, Model, ExposureTime, Aperture, ISO, FocalLength, heading, content, DATE_FORMAT(date_added, "%M %e, %Y") as date_added, date_added as myDate FROM cms ORDER BY myDate DESC LIMIT :perPage OFFSET :blogOffset';
8

I would prefer not to use any Query language as I have not learn any Query language yet. However, I heard that this problem can be solve even by using Javascript and PHP only.

9

If you want to store this information in your database, you’ll need to use a query to do it. It’s reasonably straightforward to start off with, so that would be a good place to start. When you create a new database row in phpMyAdmin, I think it shows you the query it used to insert it as part of the status display, so that should give you some pointers.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.