PHP

Bagaimana cara menambahkan lebih banyak nilai ke array pada klik tombol menggunakan PHP?

Posted on by administrator
22
Sep

Pada artikel ini, kita akan belajar menambahkan elemen ke array yang ada dengan mengklik tombol menggunakan PHP.

PHP adalah bahasa sisi server, dan hanya menanggapi permintaan (GET, POST, PUT, PATCH, dan DELETE). Tindakan klik tombol terjadi sebagai bagian dari sisi klien untuk langsung memanggil fungsi PHP.

Kami membutuhkan bahasa perantara untuk melakukan tindakan ini. Dalam hal ini, kita akan menggunakan JavaScript. Ketika pengguna akan mengklik tombol, tombol akan memanggil fungsi JavaScript. Fungsi tersebut kemudian akan mengirimkan permintaan POST ke skrip PHP kami di server untuk menambahkan data ke array.

Setiap kali tombol akan diklik, permintaan baru akan dikirim ke skrip PHP dan dengan demikian akan menginisialisasi ulang array kita. Untuk mengatasinya, kami akan menyimpan array kami dalam file JSON di server, dan kemudian untuk setiap permintaan, kami akan menambahkan data ke dalamnya. Kita akan berurusan dengan tiga file “index.html” yang berisi input teks dan tombol, “data.php” yang menangani permintaan, membaca dari file JSON dan menambahkan data ke dalamnya dan “array.json” untuk menyimpan array.

Contoh:

index.html

<!DOCTYPE html>

<html>

 

<head>

    <script src=

    </script>

</head>

 

<body>

 

    

    <input type="text" value="name" id="name" />

 

    

    <button type="button" id="add">Add</button>

 

    <script>

        $(document).ready(function () {

            var he = $("#name").value;

            $("#add").click(function () {

                $.post(

                    "data.php", {

                        data: document.getElementById("name").value,

                    },

                    function (data, status) {

                        alert("Data: " + data + "nStatus: " + status);

                    }

                );

            });

        });

    </script>

</body>

 

</html>

Berikut ini adalah kode PHP untuk “data.php” yang digunakan dalam file HTML di atas. Kami menggunakan metode post() dari jQuery, untuk membuat permintaan.

data.php

<?php

 

if(isset($_POST['data'])) {

    $data= $_POST['data'];

    $inp = file_get_contents('array.json');

    $tempArray = json_decode($inp);

   

    if($tempArray) {

        array_push($tempArray, $data);

        $jsonData = json_encode($tempArray);

    }

    else {

        $jsonData=json_encode(array($data));

    }

     

    file_put_contents('array.json', $jsonData);

    $inp = file_get_contents('array.json');

    $tempArray = json_decode($inp);

    print_r($tempArray);

}

 

?>

Kami menangani permintaan bersama dengan data yang dikirim ke “data.php“. Setiap kali permintaan dikirim, itu membuka file JSON dan membaca larik sebelumnya darinya. Jika tidak ada larik sebelumnya yaitu “array.json” file kosong kemudian membuat array. Ini kemudian menambahkan data ke dalamnya.

Keluaran:

Langkah-langkah eksekusi: Kami pertama-tama akan mengonfirmasi bahwa file “results.json” kami kosong.

file kosong

Kami akan menjalankan “http://localhost/index.html” di browser.

layar entri pengguna

Ketik sesuatu di input yang ingin Anda tambahkan ke array dan klik tombol Add. Anda akan melihat kotak dialog muncul yang mengonfirmasi bahwa data ditambahkan, dan bahkan menampilkan array.

entri pertama

Ulangi ini beberapa kali.


Memeriksa “hasil.json” mengajukan.

Pembaca perhatian! Jangan berhenti belajar sekarang. Dapatkan semua konsep HTML penting dengan Desain Web untuk Pemula | HTML kursus.

administrator