Untitled

<?php
$databaseHost = "mysqlstudent";
$databaseName = "xavieralletog7gi";
$databaseUser = "xavieralletog7gi";
$databasePassword = "OhsaeP1ahx6a";

$pdo = new PDO("mysql:host=$databaseHost;dbname=$databaseName", $databaseUser, $databasePassword);
$pdo->exec("SET CHARACTER SET utf8");
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 if(isset($_POST)) {
   $id = $_GET['id'];
   $sql = "UPDATE ic_likes set likes = likes + 1 where id = $id";
  $stmt = $pdo->prepare($sql);
  $stmt->execute();
}
}

$sql = "SELECT * FROM `ic_items` INNER JOIN `ic_likes` where `ic_items`.id = `ic_likes`.id";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$items = $stmt->fetchAll(PDO::FETCH_ASSOC);

?>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="author" content="Xavier Allen" />
  <meta name="description" content="Content" />
  <meta name="keywords" content="Keywords" />
  <title>Document</title>
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" type="text/css" href="../css/style.css">
</head>

<body>
  <div class="container">

    <nav>
      <ul class="menu">
        <li><a href="../index.html" class="menu-link">Home</a></li>
        <li><a href="#" class="menu-link">Collection</a></li>
      </ul>
    </nav>

    <div class="compassHeaderContainer">
      <img class="compassHeader" src="../assets/img/compassHeader.png" alt="Header image compass" height="396" width="538">
    </div>


    <?php     foreach($items as $key=>$value) {
        var_dump($value);
        var_dump($key);

        $class = "leftSide";
        if($key % 2 == 0) {
            $class = "rightSide";
        }}

        die;
    ?>

    <article class="collectibleContainer">
      <div class="<?php echo $class ?>">
        <h1><?php echo $item['title']; ?></h1>

        <div class="textContainer">
          <div class="verticalLine"></div>
          <p class="textAlignLeft"><?php echo $item['text']; ?></p>
        </div>


        <div class="likeButton">
          <form class="" action="collection.php?id=<?php echo $item['id'];?>" method="post">
            <button type="submit"><p>like</p></button>
          </form>

          <p class="amountLikes"><?php echo $item['likes'];?> likes</p>
        </div>
      </div>

      <div class="compassImage">
        <img class="jungleCompass" src="../assets/img/<?php echo $item['img']; ?>" alt="jungle compass" height="355" width="399">
      </div>
    </article>


    <?php   $i++; if($i == 4) {break;}} ?>

  </div>
  <script src="../js/script.js"></script>

</body>

</html>