11092 sujets

JavaScript, DOM et API Web HTML5

bonjour alors voilà j'ai un petit code qui me permet d'afficher un text à chaque bouton
mais j'aimerais stocker ces lignes de text dans un fichier csv ou text
je vous met mon bout de code qui permet d'écrire mes lignes de text :


<meta charset="utf-8"/>
<p id="txt"></p>
<li><a id="btn" href="#"> Modéle </a></li>


<script>
const btn = document.getElementById('btn');
const txt = document.getElementById('txt');

btn.addEventListener('click', () => {
    txt.textContent += "Modéle de données\n"
});
</script>


merci d'avance
Modérateur
Et l'eau,
Dans ton sujet, tu n'expliques pas vraiment la situation du pourquoi.
Pourquoi veux-tu stocker du contenu ? Veux tu mutualiser du contenu ? Le localstorage/sessionstorage ne sont ils pas adapté à ta situation ?

En frontend, tu ne peux pas le faire directement. Obligatoirement, tu dois passer par une technologie serveur. Si tu veux rester en JS, je t'invite à regarder le module fs (file system) que propose nodeJS. Sinon, si tu veux ecrire du csv via nodjs, va falloir regarder du côté de npm puisque nativement en nodejs tu n'as pas ce genre de choses. Il y a surement quelque chose à ce sujet.

Sache que côté serveur, tu n'es pas du tout obligé d'utiliser le JS. D'autres langages savent très bien le faire et certains sont mêmes adaptées à ce genre de situation :
- PHP (fputcsv, fgetcsv)
- Python (module std csv)
- Ruby (connais pas le sujet, mais apparemment, il y a une class csv)


ps : csv, c'est très bien, mais json, c'est mieux, plus rapide et plus facile à gérer.
Modifié par niuxe (04 Mar 2021 - 10:42)
niuxe a écrit :
Et l'eau,
Dans ton sujet, tu n'expliques pas vraiment la situation du pourquoi.
Pourquoi veux-tu stocker du contenu ? Veux tu mutualiser du contenu ? Le localstorage/sessionstorage ne sont ils pas adapté à ta situation ?

En frontend, tu ne peux pas le faire directement. Obligatoirement, tu dois passer par une technologie serveur. Si tu veux rester en JS, je t'invite à regarder le module fs (file system) que propose nodeJS. Sinon, si tu veux ecrire du csv via nodjs, va falloir regarder du côté de npm puisque nativement en nodejs tu n'as pas ce genre de choses. Il y a surement quelque chose à ce sujet.

Sache que côté serveur, tu n'es pas du tout obligé d'utiliser le JS. D'autres langages savent très bien le faire et certains sont mêmes adaptées à ce genre de situation :
- PHP (fputcsv, fgetcsv)
- Python (module std csv)
- Ruby (connais pas le sujet, mais apparemment, il y a une class csv)


ps : csv, c'est très bien, mais json, c'est mieux, plus rapide et plus facile à gérer.



Bonjour merci pour votre réponse, en effet je veux stocker ces lignes dans un fichier pour pouvoir gérer ces données (stat ect ...). Oui j'ai déjà essayer en php mais le problème que j'avais rencontrer c'est que je n'arrivais pas à détecter le clic du bouton et du coup d'afficher une ligne de text a chaque fois (j'ai essayer de faire une boucle mais je me suis rendu compte que ça allait me bloquer par la suite). Si vous avez une solution pour ce dernier je suis preneuse
Merci d'avance,
Modérateur
@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)