Index.php - PHP Online

Form of PHP Sandbox

Enter Your PHP code here for testing/debugging in the Online PHP Sandbox. As in the usual PHP files, you can also add HTML, but do not forget to add the tag <?php in the places where the PHP script should be executed.



Your result can be seen below.

Result of php executing





Full code of Index.php.php

  1. <?php
  2.  
  3.         $url = 'http://country.io/names.json';                                                                       //url para consumir y obtener los paises
  4.  
  5.         $curlSession = curl_init();                                                                                           //inicializacion y propiedades del metodo curl para obtener datos
  6.         curl_setopt($curlSession, CURLOPT_URL, $url);
  7.         curl_setopt($curlSession, CURLOPT_BINARYTRANSFER, true);
  8.         curl_setopt($curlSession, CURLOPT_RETURNTRANSFER, true);
  9.  
  10.         $jsonData = json_decode(curl_exec($curlSession));                                             //parse de datos json
  11.         curl_close($curlSession);
  12.        
  13.         $buffer ='<select name="pais" id="pais">';                                                           //construccion de select box
  14.         foreach($jsonData as $key => $name){
  15.                 $buffer .='<option value="'.$key.'">'.$key.' - '.$name.'</option>';
  16.         }
  17.         $buffer .= '</select>';      
  18.        
  19. ?>
  20. <!DOCTYPE html>
  21. <html>
  22.  
  23. <head>
  24. <meta charset="UTF-8">
  25. </head>
  26.  
  27. <body>
  28.         <h1>Formulario de Registro</h1>
  29.         <form name="registro" method="POST" action="/registro.php">
  30.                 <label for="nombre">Nombre:</label>
  31.                 <input type="text" id="nombre" name="nombre" required>
  32.                 <br><br>
  33.  
  34.                 <label for="pais">Pais:</label>
  35.                 <?=$buffer?>
  36.                 <br><br>
  37.                 <label for="celular">Celular:</label>
  38.                 <input type="text" id="celular" name="celular" required>
  39.                 <br><br>
  40.                 <label for="email">Correo Electornico:</label>
  41.                 <input type="text" id="email" name="email" required>
  42.                 <br><br>
  43.                 <button type="submit" value="submit">Submit</button>
  44.         </form>
  45.         <p>Nota: el formulario utilizara un archivo json local como base de datos.
  46.         <h1>Usuarios Registrados:</h1>
  47.         <div id="usuarios"></div>
  48.         <script type="text/javascript">
  49.        
  50.                 document.addEventListener("DOMContentLoaded", function () {
  51.                        
  52.                        
  53.                         //analisis de json para construir el hader
  54.                        
  55.                         function addHeaders(table, keys) {
  56.                                 var row = table.insertRow();
  57.                                 for( var i = 0; i < keys.length; i++ ) {
  58.                                         var cell = row.insertCell();
  59.                                         cell.appendChild(document.createTextNode(keys[i]));
  60.                                 }
  61.                         }
  62.                        
  63.                         //funcion que dibuja la tabla
  64.                        
  65.                         function dibujartabla(data){
  66.                                 var children = data;
  67.                                 var table = document.createElement('table');
  68.                                 table.style.border = "1px solid";
  69.                                 table.setAttribute("border", "1");
  70.                                 for( var i = 0; i < children.length; i++ ) {
  71.                                         var child = children[i];
  72.                                         if(i === 0 ) {
  73.                                                 addHeaders(table, Object.keys(child));
  74.                                         }
  75.                                         var row = table.insertRow();
  76.                                         Object.keys(child).forEach(function(k) {
  77.                                                 var cell = row.insertCell();
  78.                                                 cell.appendChild(document.createTextNode(child[k]));
  79.                                         })
  80.                                 }
  81.  
  82.                                 document.getElementById('usuarios').appendChild(table);
  83.                         }
  84.                        
  85.                         //fetch para leer los datos de los usuarios registrdos
  86.                        
  87.                         fetch('registros.json')
  88.                           .then(response => response.json())
  89.                           .then(data => dibujartabla(data))
  90.                           .catch(error => console.log(error));
  91.                           
  92.                 });
  93.                 </script>
  94. </body>
  95.  
  96. </html>
  97.