¿Cómo agregar datos en un archivo JSON a través de un formulario HTML usando PHP?

El propósito de este artículo es agregar datos a un archivo JSON a través de un formulario HTML usando PHP.

Enfoque 1: si no se crea el archivo JSON, creamos un nuevo archivo JSON, le enviamos datos y le agregamos datos. Para ver cómo crear un archivo JSON tomando datos del formulario HTML, consulte este enlace.

Enfoque 2: si el archivo JSON ya está creado, agregamos datos directamente al archivo JSON. Para enviar datos desde un formulario HTML a un archivo JSON, usamos la función json_encode() que devuelve una string codificada en JSON.

Estamos creando una array de valores que el usuario completa en el formulario HTML. Luego pasamos esta array a la función json_encode() . La función json_encode() devuelve una string codificada en JSON. Para crear un archivo JSON usamos PHP file_put_contents() que se usa para escribir datos en un archivo. Pasamos 2 argumentos en la función file_put_contents() . El primer parámetro es nuestro nombre de archivo en el que queremos almacenar datos en formato JSON y el segundo es nuestra función PHP get_data() .

De acuerdo con el primer enfoque, crearemos con éxito un archivo JSON usando la función json_encode() . Ahora nuestro archivo JSON está creado. La siguiente tarea es agregar datos a ese archivo JSON. Para agregar datos al archivo JSON, debemos almacenar los datos anteriores en una variable. Para obtener los datos de nuestro archivo JSON usaremos la función file_get_contents() . file_get_contents () lee un archivo en una string. Para decodificar la string, se usa la función json_decode() , que es una función incorporada en PHP que se usa para decodificar una string JSON. La función convierte una string codificada en JSON en una variable de PHP. Los datos HTML en una array se asignan a nuestra string decodificada. La función json_encode() yfile_put_contents() se utilizan para codificar strings y colocar el contenido en un archivo JSON respectivamente.

Ejemplo: El siguiente código HTML y PHP demuestra el enfoque anterior.

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> 

Código PHP: El siguiente es el archivo “gfg.php” utilizado en el archivo HTML anterior.

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';                
    }
}
       
?>

Salida: el contenido del archivo «StudentsData.json» muestra los datos en formato JSON.

Publicación traducida automáticamente

Artículo escrito por mynkgpt16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *