diff --git a/api/recipes/detail.php b/api/recipes/detail.php
new file mode 100644
index 0000000000000000000000000000000000000000..83ed5d3b09ca34d6b6115a6e3002c215d3bc6ec1
--- /dev/null
+++ b/api/recipes/detail.php
@@ -0,0 +1,8 @@
+<?php
+
+$id = 1;
+
+require_once $_SERVER['DOCUMENT_ROOT'] . '/assets/php/Recipe.php';
+
+$recipeObj = new Recipe();
+echo json_encode($recipeObj->get($_GET['id']));
diff --git a/assets/js/getRecipe.js b/assets/js/getRecipe.js
new file mode 100644
index 0000000000000000000000000000000000000000..d18555c75a7901239fd6d7eca41660a92ce3b153
--- /dev/null
+++ b/assets/js/getRecipe.js
@@ -0,0 +1,33 @@
+/**
+fetch('http://localhost:8000/api/recipes/detail.php?id=1')
+ .then((response) => {
+ return response.json()
+ })
+ .then((data) => {
+ console.log(data);
+ })
+**/
+
+// async function loadData(){}
+
+const loadData = async () => {
+ const url = new URLSearchParams(window.location.search)
+ const response = await fetch(`http://localhost:8000/api/recipes/detail.php?id=${url.get('id')}`)
+ const data = await response.json()
+
+ const main = document.querySelector('main')
+
+ const title = document.createElement('h1')
+ title.textContent = data.title
+ main.appendChild(title)
+
+ const img = document.createElement('img')
+ img.src = `/assets/img/${data.thumbnail}`
+ main.insertAdjacentElement('beforeend', img)
+
+ const p = document.createElement('p')
+ p.innerText = data.description
+ main.appendChild(p)
+}
+
+loadData()
\ No newline at end of file
diff --git a/assets/php/Recipe.php b/assets/php/Recipe.php
index d35f3126277e761cd4f7a29314018bfbb521ee23..0670e2df13587d2e4895f745945980cbf5c124f6 100644
--- a/assets/php/Recipe.php
+++ b/assets/php/Recipe.php
@@ -26,4 +26,18 @@ class Recipe extends Database
$statement->execute();
}
+
+ public function getAll()
+ {
+ return $this->db->query('SELECT * FROM recipe')->fetchAll();
+ }
+
+ public function get(string $id)
+ {
+ $stmt = $this->db->prepare('SELECT * FROM recipe WHERE id = :id');
+ $stmt->bindValue(':id', $id);
+ $stmt->execute();
+
+ return $stmt->fetch();
+ }
}
\ No newline at end of file
diff --git a/assets/php/db.sqlite b/assets/php/db.sqlite
index 7441652bea712336b34f325339dfe3a68b23cf33..4587f5da33b47183c1566a3c16317baa079d1952 100644
Binary files a/assets/php/db.sqlite and b/assets/php/db.sqlite differ
diff --git a/create.php b/create.php
index 56166d3fb8b09c588ba720eebabb59ddfdb24a8c..779f9738b6a8f06e584c0f97d0b9fbdd74c78d18 100644
--- a/create.php
+++ b/create.php
@@ -1,3 +1,9 @@
+<?php
+require_once 'assets/php/Recipe.php';
+$recipeObject = new Recipe();
+$recipes = $recipeObject->getAll();
+?>
+
<!doctype html>
<html lang="fr">
<head>
@@ -30,18 +36,16 @@
<button type="submit">Enregistrer</button>
</form>
-<?php
-$pdo = new PDO('sqlite:'. __DIR__. '/assets/php/db.sqlite');
-$entries = $pdo->query('SELECT * FROM recipe')->fetchAll();
-?>
<ul>
-<?php
-foreach ($entries as $entry) {
- ?>
-<li><?php echo $entry['description']?></li>
-<?php
-}
-?>
- </ul>
+ <?php foreach ($recipes as $recipe) : ?>
+ <li>
+ <article>
+ <h2><?= $recipe['title'] ?></h2>
+ <p><?php echo $recipe['description'] ?></p>
+ <p><a href="/recipe.php?id=<?= $recipe['id'] ?>">Voir plus</a></p>
+ </article>
+ </li>
+ <?php endforeach; ?>
+</ul>
</body>
</html>
\ No newline at end of file
diff --git a/recipe.php b/recipe.php
new file mode 100644
index 0000000000000000000000000000000000000000..501c1f48811347adbe399263660ce1ce1fb1f7f4
--- /dev/null
+++ b/recipe.php
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Recipe</title>
+
+ <script src="assets/js/getRecipe.js" type="module"></script>
+</head>
+<body>
+<main></main>
+</body>
+</html>
\ No newline at end of file