How to append data in JSON file through HTML form using PHP ? - GeeksforGeeks

23 Sep, 2020
The purpose of this article is to append data to a JSON file through HTML form using PHP.
Approach 1: If the JSON file is not created then we create a new JSON file, send data to it, and append data in it. To see how to create a JSON file by taking data from the HTML form, refer this link.
Approach 2: If the JSON file is already created then we directly append data to the JSON file. To send data from HTML form to JSON file we are using json_encode() function which returns a JSON encoded string.
We are making an array of values that the user fills in the HTML form. Then we pass this array into json_encode() function. The json_encode() function returns a JSON encoded string. To create a JSON file we used PHP file_put_contents() which is used to write data to a file. We pass 2 arguments in file_put_contents() function. The first parameter is our file name in which we want to store data in the JSON format and the second is our PHP get_data() function.
According to the first approach, we will successfully create a JSON file using the json_encode() function. Now our JSON file is created. The next task is to append data to that JSON file. To append data to the JSON file we have to store the previous data to a variable. To get the data of our JSON file we will be using the file_get_contents() function. The file_get_contents() reads a file into a string. To decode the string, the json_decode() function is used which is an in-built function in PHP used to decode a JSON string. The function converts a JSON encoded string into a PHP variable. The HTML data in an array is assigned to our decoded string. The json_encode() function and file_put_contents() are used to encode string and put the contents to JSON file respectively.
Example: The following HTML and PHP code demonstrates the above approach.
HTML
<html>   <head>     <meta charset="UTF-8">       <style>         h3 {             text-align: center;         }           img {             display: block;             margin: auto;             height: 150px;             width: 150px;         }           .input {             margin: 6px;             padding: 10px;             display: block;             margin: auto;             color: palevioletred;             font-size: 30px;         }           input {             width: 90%;             display: block;             margin-left: 12px;             background: none;             background-color: lightyellow;         }           select {             width: 90%;             display: block;             margin-left: 12px;             background: none;             background-color: lightyellow;         }           #heading {             font-family: cursive;             text-align: center;             color: green;             padding-top: 20px;           }           #form_page {             height: 500px;             width: 50%;             display: flex;             flex-wrap: wrap;             flex-direction: row;             margin: auto;           }           #form_body {             border-radius: 12px;             height: 330px;             width: 450px;             background-color: beige;             border: 1px solid pink;             margin: auto;             margin-top: 12px;         }           #text {             color: red;             width: 100px;         }           #head {             border-bottom: 2px solid red;             height: 100px;             background-color: aliceblue;         }           #submit {             background-color: white;             width: 70px;         }     </style> </head>   <body>     <form method="post" action="gfg.php">           <div id="form_page">               <div id="form_body">                 <div id="head">                     <h1 id="heading">GFG</h1>                 </div>                 <br />                 <div id="input_name" class="input">                     <input id="name" type="text"                        Placeholder="Name" name="name"                        required>                 </div>                 <div id="input_class" class="input">                     <input type="text" placeholder=                         "Branch" name="branch" required>                 </div>                 <div id="input_year" class="input">                     <input id="school" type="text"                        name="year"                        placeholder="Year">                 </div>                   <div class="id input">                     <input id="submit" type="submit"                        name="submit" value="submit"                        onclick="on_submit()">                 </div>             </div>         </div>     </form> </body>    </html> 
PHP Code: The following is the “gfg.php” file used in the above HTML file.
PHP
<?php       if ($_SERVER['REQUEST_METHOD'] == 'POST') {                       function get_data() {        $name = $_POST['name'];        $file_name='StudentsData'. '.json';           if(file_exists("$file_name")) {             $current_data=file_get_contents("$file_name");            $array_data=json_decode($current_data, true);                                           $extra=array(                'Name' => $_POST['name'],                'Branch' => $_POST['branch'],                'Year' => $_POST['year'],            );            $array_data[]=$extra;            echo "file exist<br/>";            return json_encode($array_data);        }        else {            $datae=array();            $datae[]=array(                'Name' => $_POST['name'],                'Branch' => $_POST['branch'],                'Year' => $_POST['year'],            );            echo "file not exist<br/>";            return json_encode($datae);           }    }      $file_name='StudentsData'. '.json';          if(file_put_contents("$file_name", get_data())) {        echo 'success';    }                    else {        echo 'There is some error';                    }}       ?>
Output: The content of the “StudentsData.json” file shows the data in JSON format.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
PHP-Misc
CSS
HTML
PHP
PHP Programs
Web Technologies
HTML
PHP
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
HTML Cheat Sheet - A Basic Guide to HTML
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)