Blog de Robert Torres
Pasar valores de formulario en HTML a PHP
En esta entrega, me propongo a explicar el proceso de ingresar datos con un formulario hecho en HTML / Bootstrap y enviarlos al backend PHP (servidor) como primer paso para que puedas entender como PHP recibe los datos desde el frontend (HTML).
Primero que todo tienes que entender la terminología, en este caso, cuando escuches que hablen del frontend debes saber que se están refiriendo a todo el proceso que ocurre del lado del cliente, es decir lo que tu vez en tu computador y dispositivos como HTML, diseño, color y fuentes de letras (CSS) y javascript. Cuando te hablen de backend tienes que entender que se refieren a lo que sucede del lado de servidor, el proceso que se ejecuta detrás de lo que tu vez en pantalla, para ejecutar estos procesos se utilizan gran variedad de lenguajes de programación, en este caso en particular, usaremos PHP.
Entonces, el proceso que haremos es el siguiente:
- crearemos tres programas con extensión (.php) los cuales llamaremos formulario1-front.php, formulario1-back.php y formulario2-back.php.
- Luego, subiremos (copiaremos) esos archivos a nuestro servidor web
- Finalmente Probaremos el código.
En Windows creamos una carpeta que lleve por nombre Curso. Y abrimos el editor de texto en mi caso, yo utilizo el editor sublime-text.
Creamos un nuevo archivo al cual llamaremos formulario1-front.php y escribiremos en el lo siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- SITE TITLE -->
<title>Curso PHP</title>
<!-- Latest Bootstrap min CSS -->
<!-- Google Fonts -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/favicon.png" rel="apple-touch-icon">
<!-- Bootstrap CSS File -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-9">
<h2>Formulario de Envio de Datos Metodo Post</h2>
<form id="form1" action="formulario1-back.php" method="POST">
<div class="mb-3">
<label for="nombre" class="form-label">Nombre</label>
<input type="text" class="form-control" name="nombre" id="nombre" placeholder="Ingrese el Nombre">
</div>
<div class="mb-3">
<label for="direccion" class="form-label">Direccion</label>
<textarea class="form-control" name="direccion" id="direccion" rows="3" placeholder="Ingrese la Direccion"></textarea>
</div>
<div class="mb-3 text-center">
<button type="submit" class="btn btn-primary"> Enviar </button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>El contenido que va entre las equiquetas <head> y </head> ya fue explicado brevemente aquí puedes ir y consultar esa parte. Yo en este caso para ir avanzando, me voy a enfocar en las etiquetas FORM, INPUT y BUTTON
<form id="form1" action="formulario1-back.php" method="POST">En los atributos de FORM tenemos
id="form1" el id es el identificador unico que html le asigna a cada uno de los elementos o etiquetas que componen el sitio web.
action="formulario1-back.php" el action, es el atributo de la etiqueta form que le indica a html que debe hacer en caso de que se produzca el evento “submit” o envío del formulario. En este caso al indicar action=”formulario1-back.php” le estamos incicando que cuando ocurra el evento “submit” debe llamar a el script de formulario1-back.php.
method="POST" el método, es el atributo que indica como se van a enviar los datos, existen dos tipos de métodos comúnmente usados para enviar la información. Estos métodos son: método POST y método GET.
Método POST los datos son enviados al backend de manera oculta y es el método mas usado por HTML y PHP ya que la información es enviada de manera confidencial.
Método GET los datos son enviados como parámetros encadenados en una dirección URL por lo que la información que va del frontend al backend es visible.
<input type="text" class="form-control" name="nombre" id="nombre" placeholder="Ingrese el Nombre">En los atributos de form tenemos:
type="text" type es el atributo que indica el tipo de entrada. Los tipos de entradas mas comunes son :
- text (Para entradas de tipo de texto)
- button (Para botones)
- radio (Para radio botones)
- submit (Para enviar el formulario)
- checkbox (Para campos verdadero/falso)
- email (Para validar correos)
- password (Para ocultar contenido)
class="form-control" el atributo class es para indicar que clase css esta usando ese input. Es estético, indica con que ancho, color y fuente se va a mostrar el input en pantalla.
name="nombre" es el nombre de la variable con la que se va enviar el dato ingresado en el input es el parámetro mas importante en este caso porque su nomenclatura es que que se toma en cuenta para enviar los valores al backend.
Mientras que id="nombre" es un identificador único que html le asigna a cada uno de los elementos o etiquetas que componen el sitio web.
placeholder="Ingrese el Nombre" el placeholder es lo que el input muestra cuando este vacío. En este caso se establece que por defecto muestre la frase "Ingrese el Nombre"
<button type="submit" class="btn btn-primary">type="submit" el type submit como ya lo indicamos anteriormente, es utilizado en los campos de tipo botón y es el que produce el evento “submit” con el cual el formulario ejecuta la acción que le hemos indicado con el atributo action.
Creamos un nuevo archivo al cual llamaremos formulario1-back.php y escribiremos en el lo siguiente:
<?php
if(isset($_POST["nombre"])){
$nombre=$_POST["nombre"];
}
if(isset($_POST["direccion"])){
$direccion=$_POST["direccion"];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- SITE TITLE -->
<title>Curso PHP</title>
<!-- Latest Bootstrap min CSS -->
<!-- Google Fonts -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/favicon.png" rel="apple-touch-icon">
<!-- Bootstrap CSS File -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-9">
<div class="row">
<div class="col text-center">
<h2>Se Han recibido estos datos en el backend:</h2>
</div>
</div>
<form id="form1" action="formulario1-front.php" method="POST">
<div class="mb-3">
<label for="nombre" class="form-label">Nombre</label>
<input type="text" class="form-control" name="nombre" id="nombre" placeholder="Ingrese el Nombre" value="<?php if(!empty($nombre)) { echo $nombre; } ?>" disabled>
</div>
<div class="mb-3">
<label for="direccion" class="form-label">Direccion</label>
<textarea class="form-control" name="direccion" id="direccion" rows="3" placeholder="Ingrese la Direccion" disabled><?php if(!empty($direccion)) { echo $direccion; } ?></textarea>
</div>
<div class="mb-3 text-center">
<button type="submit" class="btn btn-primary"> Regresar </button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>Básicamente es el mismo código con la diferencia de que en este programa, recibiremos los datos de enviados por formulario1-front.php.
Para recibir los datos fíjense en estas primeras lineas:
<?php
if(isset($_POST["nombre"])){
$nombre=$_POST["nombre"];
}
if(isset($_POST["direccion"])){
$direccion=$_POST["direccion"];
}
?>isset() es una funcion de php que determina si una variable esta definida, en este sentido nos permite verificar si realmente, estamos recibiendo valores en la variable $_POST["nombre"] las variables $_POST se utilizan para capturar valores provenientes del método POST es un arreglo con todos los parametros enviados por POST y declarados con el atributo name del INPUT HTML
Entonces, el condicional if indica que si las variables $_POST["nombre"] y $_POST["direccion"] estan definidas, le asigne sus respectivos valores a $nombre=$_POST["nombre"] y $direccion=$_POST["direccion"] con esto ya hemos definido dos variables adicionales ue son $nombre y $direccion. A diferencia de otros lenguajes de programación PHP no tiene una nomenclatura especifica para declarar y definir variables, con solo escribir por ejemplo: $variable=2; PHP interpreta que $variable es una variable de tipo numérico entero. Entonces tenemos ejemplos adicionales:
$variable=’Hola que tal’; Encapsulada entre comillas o comilla simple $variable es de tipo texto.
$variable=2.65; $variable es de tipo decimal o doble precision.
$variable=true; $variable es de tipo boolean (verdadero/falso).
$variable=[‘1’,’Hola’]; $variable es de tipo array (arreglo de varios valores).
Continuando con la explicación de tenemos que el input id=”nombre” tiene el siguiente atributo:
<input type="text" class="form-control" name="nombre" id="nombre" placeholder="Ingrese el Nombre" value="<?php if(!empty($nombre)) { echo $nombre; } ?>" disabled>value="<?php if(!empty($nombre)) { echo $nombre; } ?>"
Aquí se inserta el código PHP dentro del atributo value. El atributo value le asigna un valor por defecto al campo. Entonces, aquí le estamos de una vez asignando el valor contenido en la variable $nombre.
Noten que en el action del form esta definido para que ejecute formulario1-front.php, entonces cuando le hagamos click al boton regresar, el formulario formulario1-back.php retornara a formulario1-front.php.
Importante también el atributo “disabled” que se ha definido en los input para configurarlos como no editables.
El ultimo archivo formulario2-back.php tiene el mismo contenido pero con la diferencia que en el los valores se reciben por método GET esta definido en las primeras lineas de esta manera:
<?php
if(isset($_GET["nombre"])){
$nombre=$_GET["nombre"];
}
if(isset($_GET["direccion"])){
$direccion=$_GET["direccion"];
}
?>Para enviar valores por GET, los datos se encadenan de la siguiente manera:
https:// hosting/programa.php?nombredevariable=valor&nombredevariable2=valor2
En nuestro caso seria algo como así: https:// 10.72.3.105/Curso/formulario2-back.php?nombre=Robert&direccion=Maracay
Esto se escribe directamente en la barra de direcciones del navegador o se llama desde javascript.
En conclusion, en esta entrega te explique en que consisten:
- Atributos de FORM
- Atributos de INPUT
- Tipos de INPUT
- Evento SUBMIT
- Los metodos GET y POST
- Algunos tipos de variables PHP
A continuacion, te dejo el video de como subir los datos al server en este caso yo utilizo una maquina virtual con debian instalado para emular un servidor web y utilizo WINSCP para subir los archivos a ese "hosting" emulado