@comar91: l'ajax n'est pas obligatoire.... Et là pour le coup, pour comprendre la mécanique, non ce n'est pas du tout nécessaire. C'est ce que LenaMora a besoin de comprendre (le traitement serveur) !
@LenaMora:
Pour comprendre la mecanique, je fais passer des paramètres par l'url. En l'occurence, l'id de la ligne dans le json ! Plus tard, tu auras besoin de ce genre de
fonction en php (si tu comptes faire du php)
Si tu as compris la mécanique, tu essaieras de faire une requête ajax (jquery ou en vanillaJS).
Lis ceci :
organisation des fichiers :
https://zupimages.net/up/21/09/nv6f.jpg
php :
<?php
$source = './data.json';
$data = json_decode(file_get_contents($source), true);
if(!empty($_GET['id'])){
foreach ($data as $i => $row) {
if($row['id'] === $_GET['id']){
$data[$i]['click'] = $row['click'] + 1;
}
}
$f = fopen($source, 'w');
fwrite($f, json_encode($data));
fclose($f);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">
<style>
.marketing-hero{
background: #074E68;
overflow: visible;
padding: 2.5rem 0 4.5rem;
position: relative;
text-align: center;
}
.hero-main-header{
color: #fefefe;
font-size: 2.875rem;
font-weight: 200;
margin: 0;
text-align: center;
}
.page-content{
margin: 2.5rem auto;
width: 80%;
}
.desc, .card-divider{
display: flex;
justify-content: space-between;
}
.button{
width: 100%;
}
</style>
</head>
<body>
<header class="marketing-hero">
<h1 class="hero-main-header">membres</h1>
</header>
<article class="page-content">
<div class="grid-x grid-padding-x">
<?php foreach ($data as $row): ?>
<div class="cell large-4">
<div class="card-divider">
<span><?= $row['name'] ?></span>
<span><?= $row['click'] ?></span>
</div>
<img src="<?= $row['picture'] ?>" alt="">
<div class="card-section">
<p class="desc">
<span><?= $row['company'] ?></span>
<span><?= $row['email'] ?></span>
</p>
<p><?= $row['about'] ?></p>
</div>
<a class="button large-expanded" href="<?= $_SERVER['PHP_SELF'] ?>?id=<?= $row['id'] ?>">like</a>
</div>
<?php endforeach; ?>
</div>
</article>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js" integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>
</body>
</html>
le json (si c'était avec un autre langage, je l'aurais traité en csv. Mais là avec le php, c'est mort! Et puis comme je l'ai dit le json est beaucoup mieux) :
[
{
"id": "60417e62d720dd3d601637c0",
"isActive": true,
"picture": "https://picsum.photos/id/1005/900/300",
"age": 34,
"eyeColor": "blue",
"name": "Shari Guy",
"gender": "female",
"company": "DAISU",
"email": "shariguy@daisu.com",
"click": 1,
"about": "Nisi sunt veniam voluptate excepteur sunt enim aliquip duis id fugiat elit. Sunt ex et ullamco ex deserunt consectetur. Nostrud nisi mollit do incididunt consectetur in. Excepteur officia magna ut laborum consequat incididunt quis. Pariatur proident exercitation pariatur ea fugiat id velit deserunt do reprehenderit in ea.\r\n"
},
{
"id": "60417e624082a0f302f5f37a",
"isActive": false,
"picture": "https://picsum.photos/id/1011/900/300",
"age": 32,
"eyeColor": "blue",
"name": "Hutchinson Rowe",
"gender": "male",
"company": "ZILLACON",
"email": "hutchinsonrowe@zillacon.com",
"click": 0,
"about": "Elit duis incididunt minim voluptate tempor deserunt nisi ipsum aute fugiat duis esse anim. Sunt dolor laboris do cillum irure cillum velit ad aliqua est nostrud. Esse eiusmod consectetur eiusmod mollit anim. Anim consequat cillum aute occaecat duis culpa eu. Deserunt pariatur elit eiusmod cillum pariatur.\r\n"
},
{
"id": "60417e62f20fab931c770a1a",
"isActive": true,
"picture": "https://picsum.photos/id/1012/900/300",
"age": 33,
"eyeColor": "brown",
"name": "Sellers Garza",
"gender": "male",
"company": "GAPTEC",
"email": "sellersgarza@gaptec.com",
"click": 0,
"about": "Eiusmod elit excepteur esse magna veniam mollit nostrud laboris irure id consequat elit eu. Sit exercitation laboris veniam consectetur ad tempor aliqua incididunt tempor dolor. Ea laborum ut reprehenderit sit proident non tempor nostrud nulla. Ad eu nostrud ipsum pariatur cillum cupidatat duis velit. Laboris laboris."
}
]
Modifié par niuxe (05 Mar 2021 - 03:19)
