Dynamic pages

Server-side rendering

Heroes Page

codes/heroes/heroes.php:

<?php
  $heroes = [
    [
      "name" => "Bruce Wayne",
      "hero" => "Batman",
      "city" => "Gothan City"
    ],
    [
      "name" => "Peter Parker",
      "hero" => "Homem Aranha",
      "city" => "New York"
    ],
    [
      "name" => "Clark Kent",
      "hero" => "Super Homem",
      "city" => "Metropolis"
    ]
  ]; 
?>

codes/heroes/index.php:

<?php require('heroes.php'); ?>
<!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">
  <title>Document</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Nome</th>
        <th>Herói</th>
        <th>Cidade</th>
      </tr>
    </thead>
    <tbody>
      <?php foreach ($heroes as $hero): ?>
        <tr>
          <td><?php echo implode("</td><td>", $hero); ?></td>
        </tr>
      <?php endforeach; ?>
    </tbody>
  </table>
</body>
</html>

http://localhost:8080/php/web/dynamic-pages/codes/heroes/

Heroes JSON

codes/heroes-json/heroes.json:

[
  {
    "name": "Bruce Wayne",
    "hero": "Batman",
    "city": "Gothan City"
  },
  {
    "name": "Peter Parker",
    "hero": "Homem Aranha",
    "city": "New York"
  },
  {
    "name": "Clark Kent",
    "hero": "Super Homem",
    "city": "Metropolis"
  }
]

codes/heroes-json/index.php:

<?php $heroes = json_decode(file_get_contents("heroes.json"), true); ?>
<!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">
  <title>Document</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Nome</th>
        <th>Herói</th>
        <th>Cidade</th>
      </tr>
    </thead>
    <tbody>
      <?php foreach ($heroes as $hero): ?>
        <tr>
          <td><?php echo implode("</td><td>", $hero); ?></td>
        </tr>
      <?php endforeach; ?>
    </tbody>
  </table>
</body>
</html>

http://localhost:8080/php/web/dynamic-pages/codes/heroes-json/

Hello Compact

codes/post-hello-compact/index.php:

<?php $name = $_POST['name'] ?? null; ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
    <input type="text" name="name">
    <input type="submit" value="Olá...">
  </form>
  <?php if($name){ ?>
    <div>
      <?php echo "Olá $name"; ?>
    </div>
  <?php } ?>
</body>
</html>

http://localhost:8080/php/web/dynamic-pages/codes/post-hello-compact/

Layout

layout
├── index.php
├── page1.php
└── page2.php

codes/layout/index.php:

<?php	$page = $_GET['page'] ?? "page1"; ?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <nav><a href="index.php?page=page1">pagina 1</a><a href="index.php?page=page2">pagina 2</a></nav>
  <div>
    <?php include($page.".html"); ?>
  </div>
</body>
</html>

codes/layout/page1.html:

<h1>Page 1</h1>

codes/layout/page2.html:

<h1>Page 2</h1>

http://localhost:8080/php/web/dynamic-pages/codes/layout/

Client-side rendering

Hello GET

codes/get-hello-fetch/public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="">
    <input type="text" name="name">
    <input type="submit" value="Olá...">
  </form>
  <div id="hello-message"></div>
  <script src="js/main.js"></script>
</body>
</html>

codes/get-hello-fetch/public/js/main.js:

const name = document.querySelector('input[type=text]')
const submit = document.querySelector('input[type=submit]')
const helloMessage = document.querySelector('#hello-message')

submit.addEventListener('click', function(event) {
  event.preventDefault()
  const url = `../api/hello.php?name=${name.value}`
  fetch(url)
    .then(res => res.json())
    .then(json => loadHello(json))
})

function loadHello(message) {
  helloMessage.innerHTML = message.body
}

codes/get-hello-fetch/api/hello.php:

<?php
  $name = $_GET['name'] ?? '';
  $result = [];
  $result['body'] = "Olá $name";

  header("Content-type: application/json; charset=UTF-8");
  header("Access-Control-Allow-Origin: *");
  echo json_encode($result);
?>

http://localhost:8080/php/web/dynamic-pages/codes/get-hello-fetch/public/

Hello POST

codes/post-hello-fetch/public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="">
    <input type="text" name="name">
    <input type="submit" value="Olá...">
  </form>
  <div id="hello-message"></div>
  <script src="js/main.js"></script>
</body>
</html>

codes/post-hello-fetch/public/js/main.js:

const name = document.querySelector('input[type=text]')
const submit = document.querySelector('input[type=submit]')
const helloMessage = document.querySelector('#hello-message')

submit.addEventListener('click', function(event) {
  event.preventDefault()
  
  const url = `../api/hello.php`
  const config = {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: `name=${name.value}`
  }
  
  fetch(url, config)
    .then(res => res.json())
    .then(json => loadHello(json))
})

function loadHello(message) {
  helloMessage.innerHTML = message.body
}

codes/post-hello-fetch/api/hello.php:

<?php
  $name = $_POST['name'] ?? '';
  $result = [];
  $result['body'] = "Olá $name";

  header("Content-type: application/json; charset=UTF-8");
  header("Access-Control-Allow-Origin: *");
  echo json_encode($result);
?>

http://localhost:8080/php/web/dynamic-pages/codes/post-hello-fetch/public/