ripples

<?php
    function connectDB() {
      $servername = "localhost";
      $username = "root";
      $password = "";
      $dbname = "tappw";

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

      // Check connection
      if (!$conn) {
        die("Connection failed: " + mysqli_connect_error());
      }
      return $conn;
  }

  function selectAllFromTableBook($table) {
    $conn = connectDB();

    $sql = "SELECT img_path, title, author,publisher,quantity FROM $table";

    if(!$result = mysqli_query($conn, $sql)) {
      die("Error: $sql");
    }
    mysqli_close($conn);
    return $result;
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  if($_POST['command'] === 'insert') {
    insertUser();
    } else if($_POST['command'] === 'update') {
    updateUser($_POST['userid']);
    } else if($_POST['command'] === 'delete') {
    deleteUser($_POST['userid']);
  }
}

 ?>

<!DOCTYPE html>
<html lang="id">
  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="libs/bootstrap-material-design/dist/css/bootstrap-material-design.css">
    <link rel="stylesheet" type="text/css" href="libs/bootstrap-material-design/dist/css/ripples.css">
    <script type="text/javascript" src="libs/bootstrap-material-design/dist/js/material.js"></script>
    <script type="text/javascript" src="libs/bootstrap-material-design/dist/js/ripples.js"></script>

    <script type="text/javascript">
      $.material.init();
      $.material.input();

    </script>
    <link rel="stylesheet" type="text/css" href="src/css/style.css">
    <meta charset="utf-8">
    <title>PerpusOnline.com | Baca Buku ? Disini aja !</title>
  </head>
  <body>


    <div class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="javascript:void(0)">PerpusOnline.com</a>
    </div>
    <div class="navbar-collapse collapse navbar-responsive-collapse">
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control col-md-8" placeholder="Search">
        </div>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="login.php">Log In</a></li>
        <li><a href="javascript:void(0)">Sign Up</a></li>
        </li>
      </ul>
    </div>
  </div>
</div>

  <div class="jumbotron">
    <h1 id="perpus">PerpusOnline.com</h1>
    <p id="descPerpus" class="text-primary">Baca Buku ? Disini aja !</p>
  </div>

   <div class="container-fluid">
     <div class="tableBook">
       <table class="table table-striped table-hover table-bordered">
         <thead>
            <tr class="success">
              <th class="head">Buku</th>
              <th class="head">Judul</th>
              <th class="head">Pengarang</th>
              <th class="head">Penerbit</th>
              <th class="head">Jumlah</th>
              <th class="head">Action</th>
            </tr>
          </thead>
          <tbody  >
          <?php

              $books = selectAllFromTableBook("book");

              while ($row = mysqli_fetch_row($books)) {


                 echo "<tr class='info'>";
                  foreach($row as $key => $value) {
                      if ($key == 'img_path') {
                        echo "<td>

                        <a href='$value' data-toggle='tooltip' title='Click to See Book Image' ><img data-toggle='modal' data-target='#myModal' src='$value' alt='gambar buku' height='150' width='100'/></a>


                        </td>";
                          //echo "<td><img  src='$value' alt='gambar buku' height='150' width='100'/></td>";
                      }
                      else {
                          echo "<td>$value</td>";
                      }
                 }
                 echo '<td>
                 <form action="tutorial.php" method="post">
                   <input type="hidden" id="delete-userid" name="userid" value="'.$row[0].'">
                   <input type="hidden" id="delete-command" name="command" value="delete">
                   <button type="submit" class="btn btn-raised btn-primary">PINJAM</button>

                   <input type="hidden" id="delete-userid" name="userid" value="'.$row[0].'">
                   <input type="hidden" id="delete-command" name="command" value="delete">
                   <button type="submit" class="btn btn-raised btn-primary">DETAILS</button>
                 </form>
                 </td>';
                 echo "</tr>";
             }
           ?>
         </tbody>
       </table>
     </div>
  </div>


  </body>
</html>