-1

I am trying to build an web application of showing restaurant lists & informations

If you click any button on the id="category_lists" (I will mention it as "list 1"), SQL query works and shows another additional list of restaurants in that specific category (I will mention it as "list 2").

I succeeded until this point.

I want my users to click specific restaurants name among the "list 2" and to check out specifications of the clicked restaurant without reloading a webpage. (like name, phone number, specific location,, etc)

I already have informations about those specific informations in my DB. But I cannot set up my app to query again from 'clicking' an item among the list which is also been queried from a DB.

I couldn't figure out how to set up my link on the line 46..

Thank you for reading this.

Here is my code.

<?php
  $hostname = "hostname";
  $admin_id = "admin_id";
  $admin_pw = "admin_pw";
  $db_name = "db_name";
  $conn = mysqli_connect($hostname, $admin_id, $admin_pw);
  mysqli_select_db($conn, $db_name);
?>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=8u4miwdm7j"></script>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="zulmoc.css?after">
    <title>Zulmoc</title>
  </head>
  <body>

    <center>
      <h1><a href="./index.php">Zulmoc!</a></h1>
    </center>

    <nav>
      <ol>
        <li id="category_lists"><a href="./index.php?id=1">Beef</a></li>
        <li id="category_lists"><a href="./index.php?id=2">Pork</a></li>
        <li id="category_lists"><a href="./index.php?id=3">Chicken</a></li>
        <li id="category_lists"><a href="./index.php?id=4">Seafood</a></li>
        <li id="category_lists"><a href="./index.php?id=5">Noodles</a></li>
        <li id="category_lists"><a href="./index.php?id=6">Bread</a></li>
        <li id="category_lists"><a href="./index.php?id=7">Meal</a></li>
        <li id="category_lists"><a href="./index.php?id=8">Table</a></li>
        <li id="category_lists"><a href="./index.php?id=9">Course</a></li>
      </ol>
    </nav>

    <article id="lists_of_one_category">
      <?php
      $sql = "SELECT rest_lists.name FROM rest_lists WHERE rest_lists.category=".$_GET['id'];
      $result = mysqli_query($conn, $sql);
        while( $row = mysqli_fetch_assoc($result)){
          echo '<li><a href="XXXXXXXXXXXXX'.$row['id'].'">'.$row['name'].'</a></li>'."\n";
        }
      ?>
    </article>

    <div id="map" style="width:50%;height:200px;"></div>

    <div id="rest_images">Images</div>
    <div id="rest_description">Description</div>

    </div>

    <script type="text/javascript" src="map.js"></script>
  </body>
</html>
Dharman
  • 30,962
  • 25
  • 85
  • 135
TAK
  • 3
  • 3
  • Look into AJAX requests - this seems to be what you're looking for. It allows you to send a separate web request and handle it via JavaScript instead of reloading the page. – Rylee Apr 08 '22 at 04:49
  • **Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/32391315) – Dharman Apr 08 '22 at 09:46

1 Answers1

0

first, you need to escape the user inputs to prevent SQL INJECTION attacks please use mysqli_real_escape_string to protect your query.

for the restaurant info, you can use ajax request to get the restaurant info something like this.

<script>
    function getResturantInfo(resturantId) {

        $.ajax('/resturant.php', {
            type: 'POST',
            data: {
                resturant_id: resturantId
            }, // data to submit
            success: function(data, status, xhr) {
                // here you can handle where you want to display the resturant data 
            },
            error: function(jqXhr, textStatus, errorMessage) {

            }
        });

    }

</script>

and in line 46 replaced with event onclick something like this

      echo '<li><a onclick="getResturantInfo('. $row['id'] .')" href="javascript:void(0);">'.$row['name'].'</a></li>'."\n";

I hope it's helpful

Ahmed Hassan
  • 579
  • 2
  • 6