Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Suspects DB</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <!-- font awesome for the external icon -->
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">


    <script>
    function openWin(id)
        {   //with the ,"", we open a new popup window

            // var newWindow = window.open("\img/"+id+".jpg" ,"", "width=300,heigth=400");

            //troubleshooting
            console.log(id + ".jpg");

            //newId = parseInt(id) //no need, POST sends string anyway

            // POST to update.php for the myslq query
            $.ajax({
                url: "update.php",
                data: {id : id},
                // processData: false,
                // contentType: false,
                type: "POST",


                success: function(data){console.log("reply: " + data)}


            }
            );
        }


</script>

</head>
<body>
<!-- jquery & JS -->
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>


todo:<br>
To develop and implement a functionality for adding/updating/deleting NUMBER elements in the table. <br>


</body>
</html>

<?php
$servername = "localhost";
$username = "root";
$password = "secret";
$dbname = "test";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
//echo "Connected successfully";
$selectAll = "SELECT * FROM suspects";
$result = $conn->query($selectAll);

if ($result->num_rows > 0) {
            // // prepare the table headers
    echo "<div class=\"container\">";
            echo "<table>
                <tr>
                    <th>Name</th>
                    <th>Image</th>
                    <th>Count</th>
                </tr>";
    //output data on each row

    while ($row = $result->fetch_assoc()) {
        //variables for easier access
        $name = $row["name"];
        $id = $row["id"];

        //output data for each row
        echo "<tr><td>"."$name"."</td><td>".
             "<button onclick=\"openWin($id)\">
             <i class=\"fa fa-external-link fa-lg\" aria-hidden=\"true\"></i>
             <a class=\"thumb\" href=img/$id.jpg></a></button>".
             "</td><td class = \"id\" >".$row["count"]."</td></tr>";
    }
    echo "</table>";
    echo "</div>";
}
$conn->close();

//echo "Connection closed!"

?>