Enviar datos de HTML A PHP por medio del FORM ACTION
Summary
TLDREn este video, el maestro de informática Óscar Bones explica cómo enviar datos desde un formulario HTML a un script PHP para procesarlos y obtener resultados, como en una calculadora web. El objetivo es enseñar a los estudiantes de 12º grado a crear una aplicación web en PHP, aprender a declarar y asignar variables, y trabajar con formularios de datos. Durante la lección, se detallan las mejores prácticas para separar el código HTML y PHP, y se muestra cómo programar de manera eficiente utilizando herramientas como Sublime Text y un servidor local para visualizar los resultados.
Takeaways
- 💻 El objetivo de la clase es aprender a enviar datos de un formulario HTML a PHP para procesar información.
- 📋 Los alumnos van a crear una aplicación web en PHP como parte de la lección.
- 👨🏫 En la clase anterior, se trabajó con operaciones matemáticas usando variables directas.
- 🔄 Se explicará cómo capturar datos ingresados por el usuario en cajas de texto y procesarlos para obtener un resultado.
- 📝 Se usará un formulario en HTML para capturar datos y enviarlos a PHP, que los procesará y devolverá el resultado.
- 📐 Es importante mantener HTML y PHP en archivos separados para evitar confusión y seguir buenas prácticas de programación.
- 🧮 El ejemplo en la clase será una calculadora que permitirá ingresar números, sumarlos y mostrar el resultado en una página web.
- 🔧 Se destaca la importancia de usar lenguajes como HTML, PHP, y CSS (que se usará más adelante para mejorar la estética).
- 📂 Los alumnos aprenderán a montar su proyecto en un servidor local usando WampServer para poder ejecutarlo correctamente.
- 🛠️ Se introducen algunas técnicas y atajos para escribir código más rápido, como el uso del tabulador para completar etiquetas en HTML.
Q & A
¿Cuál es el tema principal del video?
-El tema principal del video es cómo enviar datos de un formulario HTML a un archivo PHP para procesarlos y obtener un resultado, utilizando formularios y variables en PHP.
¿Qué se busca lograr en la clase con el uso de PHP?
-El objetivo es crear una aplicación web en PHP que permita enviar datos de un formulario HTML, procesarlos y devolver un resultado al usuario.
¿Por qué es importante separar el código HTML y PHP en archivos distintos?
-Es importante separar el código HTML y PHP en archivos distintos para mantener un orden adecuado y evitar confusión, siguiendo las mejores prácticas de programación.
¿Qué ejemplos prácticos se utilizan para enseñar el concepto en el video?
-Se utiliza el ejemplo de una calculadora que toma dos números ingresados en un formulario HTML, los envía a un archivo PHP para ser procesados y devuelve el resultado de la suma.
¿Qué función tiene el atributo 'action' en el formulario HTML?
-El atributo 'action' del formulario HTML especifica la página PHP a la que se enviarán los datos para ser procesados.
¿Qué papel juega la variable POST en PHP dentro del contexto del formulario?
-La variable POST en PHP se utiliza para capturar los datos enviados desde el formulario HTML y asignarlos a las variables dentro del código PHP para su procesamiento.
¿Por qué se menciona la importancia de no combinar HTML y PHP en un solo archivo?
-Se menciona que combinar HTML y PHP en un solo archivo puede causar confusión y dificultades al momento de programar, por lo que es mejor mantenerlos separados para facilitar el mantenimiento y la lectura del código.
¿Qué tipo de errores comunes se abordan en el video al programar en PHP?
-El video aborda errores comunes como olvidar el signo de dólar ($) en las variables PHP o no cerrar adecuadamente las etiquetas PHP, lo que impide que el código funcione correctamente.
¿Cómo se visualizan los resultados en la aplicación web creada?
-Los resultados de la suma se visualizan en una nueva página PHP, que muestra el resultado de la operación matemática realizada con los números ingresados en el formulario.
¿Qué herramientas y programas se utilizan en el video para desarrollar el proyecto?
-En el video se utilizan herramientas como Sublime Text para escribir el código y WampServer para montar el proyecto en un servidor local, además del navegador web para visualizar el resultado.
Outlines
💻 Introducción al envío de datos en formularios de HTML a PHP
El video comienza con una introducción al tema del día: el envío de datos desde formularios HTML hacia PHP. Se explica la importancia de procesar información en PHP, cómo declarar variables y asignarlas dentro de código PHP a partir de datos capturados en formularios HTML. Se menciona que en la clase anterior se vieron cálculos con variables directas y que ahora se trabajará con cajas de texto para capturar datos de los usuarios. El objetivo general es crear una aplicación web en PHP que permita realizar estas tareas.
📊 Estructura de la calculadora en HTML
Se presenta un ejemplo de calculadora creada en HTML, con cajas de texto organizadas dentro de una tabla y un botón para enviar los datos. El propósito es ingresar dos números y obtener el resultado de su suma en otra página. Se menciona que el contenido de la página cambia según los datos introducidos por el usuario, y se destaca la importancia de seguir pasos precisos para poner en marcha el servidor y crear las carpetas de trabajo en el entorno adecuado.
🔢 Creación de variables y estructura en PHP
Aquí se explica cómo se declaran las variables en HTML que luego se usarán en el código PHP para realizar la operación de suma. Se detallan los pasos para crear las cajas de texto y asignar nombres a las variables correspondientes. Se resalta el uso de técnicas como el tabulador para completar etiquetas en HTML y la importancia de cerrar correctamente las etiquetas para evitar errores. Finalmente, se guarda el archivo y se muestra cómo visualizar el formulario en el navegador.
⚙️ Creación del archivo PHP para procesar los datos
Se explica cómo crear el archivo PHP que procesará los datos del formulario HTML. Se describe el uso de la declaración de variables con el signo dólar en PHP y cómo se asignan a las variables del formulario HTML a través del método POST. Luego se crea una nueva variable que sumará los valores capturados por las cajas de texto, y se destaca la importancia de evitar errores comunes, como olvidar los signos necesarios para identificar variables en PHP. El proceso culmina con la visualización del resultado en pantalla.
Mindmap
Keywords
💡Formulario HTML
💡PHP
💡Action
💡Variables
💡Sublime Text
💡Servidor local
💡POST
💡Calculadora
💡CSS
💡Resultado
Highlights
Introducción a cómo enviar datos desde formularios en HTML a PHP para procesar información.
Importancia de separar el código HTML y PHP para evitar confusiones y seguir buenas prácticas de programación.
Creación de una aplicación web en PHP cuyo objetivo es realizar operaciones matemáticas utilizando datos ingresados por el usuario.
Uso de variables en PHP para capturar datos desde formularios HTML utilizando el método POST.
En la clase anterior se enseñó cómo realizar cálculos matemáticos con variables directas en PHP.
Explicación detallada de cómo utilizar cajas de texto para capturar datos y procesarlos en PHP.
Proceso para inicializar el servidor local (WAMP Server) y configurar el entorno de desarrollo.
Diferencias entre mantener el código HTML y PHP juntos versus separados para una mejor organización.
Paso a paso para crear una calculadora en HTML que envía datos a un archivo PHP para sumar dos números.
Uso de Sublime Text para escribir y guardar archivos HTML y PHP, destacando técnicas para ahorrar tiempo con el uso del tabulador.
Cómo declarar y usar variables en PHP basadas en los inputs del formulario HTML.
Descripción detallada de la estructura del código HTML para la calculadora, incluyendo el uso de tablas y botones para enviar datos.
Procedimiento para almacenar los archivos del proyecto en la carpeta del servidor local (WAMP Server) y ejecutarlo en el navegador.
Demostración de cómo corregir errores comunes en el código PHP, como la falta del símbolo de dólar en las variables.
Ejemplos prácticos de cómo la calculadora suma correctamente los valores ingresados por el usuario y muestra el resultado en la página PHP.
Transcripts
[Música]
hola muy buenas tardes los días son muy
buenas noches dependiente lugar está
viendo que mi nombre es oscar bones soy
maestro de informática les vamos a traer
un tema nuevo en lo que es el diseño web
dos de los euros de doceavo grado lo que
vamos a ver ahora lo importante es cómo
enviar datos del formulario triunfo
action de html a php
para que esa información pueda
procesar o enviarnos o darnos un
resultado todos los sistemas que vamos a
ver es propiedad del del force action en
html como declarar y asignar variables
en php esas variables que van en el foro
en el fracc son de html y poderlas
asignar dentro del código de php el tema
muy interesante porque en la clase
anterior vimos como
y hacer un cálculo de una operación
matemática pero a través de variables
directas en este caso vamos a utilizar
cajas de textos para que me capturen los
datos que los datos sean
lo que el usuario desea ingresar y
obtener un resultado entonces vamos a el
objetivo general del día de hoy que es
la crear una aplicación web en php vamos
a crear una aplicación web y es el
objetivo de crear una aplicación web en
php
el alumno va a conocer la forma de
enviar datos de un fortachón a php va a
aprender a declarar variables y asignar
variables en php y se va a adaptar a
trabajar de forma individual y creativa
entonces les venía diciendo de que este
tema es muy importante porque ya vamos a
comenzar a trabajar con formularios de
datos y para eso vamos a pagarnos a modo
pantalla a modo pc como vamos a enviar
datos de html a php en qué consiste pues
como toda programación es importante
tener
un código en html y un código php
separado en el cual pueda yo enviar
datos que capturen html y poderlo
mostrar en una página web con un
resultado lo que hace php es hacer ese
proceso por eso decimos que php un
lenguaje de programación que siempre
para procesar información
trabajar de esa forma algo importante
que también hay que recalcar es que
nosotros vamos a trabajar en en páginas
diferentes
s esa es una forma correcta de programar
y hay muchas personas que programan todo
el código de programación html junto con
un ph tsss en un solo código de
programación y eso trae a veces mucha
confusión y
no está de acorde a las reglas de
programación entonces la forma más
ordenado para poder programar es
utilizando html en el caso de html vamos
a crear un formulario donde yo pueda
ingresar los datos de caso vamos a traer
una calculadora en el que yo pueda meter
los datos y enviar esa información ap hp
para que php agarre esos valores y haga
el proceso que corresponde de acuerdo a
la aplicación que se está trabajando
ahorita estamos dejando fuera es css
recuerden que ss ss es un código pues un
lenguaje de codificación que me permite
entrar y crear estilos en las páginas
para que se puedan ver mucho más más
bonitas más atractivas más agradables a
la vista
entonces ya vamos a ir incorporando cada
uno de estos elementos a nuestro sitio
web para que vayan tomando forma y se
vaya viendo más robusta nuestra pago
entonces esto es lo importante de cómo
programar cómo convertir una página web
y hacer inteligente o hacer una
aplicación
vamos a decir
pasamos
muy bien
aquí ustedes pueden observar lo que
nosotros vamos a crear en html es una
calculadora
y pueden observar
que tiene en esta sección
podemos ingresar todos los datos
tiene cajas de textos en este caso lo
hice
en una tabla para que se mire un poco
más ordenado y tiene un botón
com
tienen un botón
[Música]
que me permite enviar los datos que yo
yo introdujo en mi tabla
si ustedes vamos a ver por ejemplo en
inglés sea vamos a colocar
por ejemplo ingresamos el número 100 ahí
ponemos 50 cuando le damos clic acá en
sumar
mi barrio mi barrio área esto me va a
tirar el resultado en una página su
resultado de suma de 150 algo importante
aquí es ver que todos estos datos
el dato que aparece acá
puede cambiar
según los datos del usuario y esto lo
vamos a ver el día de hoy
para que podamos entonces vamos a vamos
a pasar a modo computador lo primero que
vamos a hacer
fíjense vamos a ejecutar el one server y
en la parte de ahí vamos a poner poner
en línea
y después de que hayamos puesto a poner
en línea observen en la parte de ahí
vamos a poner activar todos los
servicios estados services ahí y pueden
observar que es el servidor en línea
bien después de esto voy a crear una
carpeta aquí en el escritorio que se va
a llamar tarea número 3
tarea
número 3
muy bien
ahí vamos a proceder a meter nuestra
acción para eso vamos a utilizar sublime
text
bien tiene la parte de ahí vamos a
comenzar a guardar primero lo que
hacemos es guardar nos vamos al
escritorio a la tarea número 3 y ahí
vamos a elegir vamos a poner aquí el
nombre vamos a poner en este sumar
sumar puntos htm
después el tipo de archivo lo vamos a
elegir lo vamos a seleccionar htm
siempre es importante colocar aquí punto
html si no aparece si no nos aparece le
damos cuerda aquí les voy a enseñar es
una técnica muy importante para eso
vamos a poner
esto para ir viendo más adelante cómo lo
podemos ir desarrollando entonces vamos
a pasar al modo para pantalla completa
para que puedan observar cómo utilizar
algunas técnicas que me van a facilitar
a mí a trabajar de una mejor manera más
rápido para que podamos seguir con este
programa
y bien vamos a comenzar a programar y
esta vez les voy a enseñar un poquito
unos algunos trucos en este caso fíjense
bien esta tecla tabulador solo voy a
poner html y lo que me va a hacer estar
bien todo todo el formato que yo
necesito para trabajar entonces yo lo
único que voy a poner es agregar los
datos que me hace falta por ejemplo aquí
voy a poner que al colaborar con cada de
entrada o con cada de texto muy bien si
ustedes decían aquí en la parte superior
en la parte de abajo yo sólo voy a
utilizar es a escribir algunas palabras
alguna referencia y voy a utilizar la
tecla tabulador para que me complete el
abierto y el cerrado por ejemplo en el
centre enter si aprieto el tabulador y
automáticamente me completa
la etiqueta de cierre y que vamos a
poner calculadora 2020
y vamos a comenzar aquí voy a escribir
un hr
o sea una línea franja de color azul
con un grueso de 20 eso lo que me hacer
una barra una barra de debajo del título
y aquí mira ponga atención ford apretó
el tabulador
miren aquí algo importante primero
subrayó voy a poner el formato es sumar
que va a ser sumar punto php ese va a
ser el nombre de la página de php que
voy a hacer más adelante el mejor post
es un dato que me va a capturar en la
caja de entrada todos los datos que yo
ingresé ok si te decían escribo table y
escribo apretó la tecla tabulador y
automáticamente me aparece el
complemento de la etiqueta de cierre
esto es para que ustedes puedan trabajar
más rápida muy bien lo voy a hacer
dentro de una tabla en la primera celda
voy a poner ingrese el número en la
segunda celda aquí en la parte de abajo
voy a poner
voy a poner un input de texto o sea una
caja de texto que me va a capturar aquí
hay algo importante aquí voy a poner
número 1 que es esto
ahí me dice que es la variable que voy a
utilizar en php muy bien porque porque
el número 1 va a ser el dato que va a
capturar la caja aquí voy a hacer unas
pequeñas modificaciones voy a cambiar la
variable de número 2 porque porque esta
variable muy vuelvo a repetir es una
variable que se va a utilizar en el
código de php más adelante
y ahora voy a hacer otra
otra otra línea trust y la miren siempre
utilizo el tabulador para que no tenga
problemas y el imputado iba a ser un sub
no sea un pequeño botón que se llame
sumar y que aparezca y sume valor
significa que lo que me ha visualizar en
la pantalla es la palabra asume si usted
de bien aquí no tengo nada que hacer
porque porque yo utilicé la barra
espaciadora para que me corrige y me
cerrará entonces me ahorro es de trabajo
y aquí guardo guardo el archivo
abro mi carpeta y está aquí lo puedo
visualizar pero mejor lo voy a abrir en
el navegador
ok vamos a abrir en el navegador para
ver mejor
y voy a tratar de acomodar esta ventana
para que pueda colocar el código y el
navegador a la par
bien ahí
vamos a mejorar aquí en vez de blue esa
barra que sea amarillo
guardo guardo el código y actualizó aquí
mi país
ahí está entonces todo este código de
html es la primera palma ahora voy a
proceder a hacer el código de php muy
bien aquí le voy a dar nuevo archivo
lo mismo
guardar
en guardar en el escritorio abro la
carpeta
tarea n 3 y ahí voy a poner sumar 7
recuerden que aquí voy a poner sumar php
y el tipo de archivo a ser php
no va a ser html aquí tengo que
asegurarme bien para que no me genere
errores aquí pakistán y el nombre este
nombre estoy poniendo php porque es la
función que yo declaré en el código de
html entonces para que esa información
de html me la envíe esta página ya tengo
los dos aquí y voy a comenzar a
codificar es bien sencillo primero para
abrir php es de la siguiente manera este
es voy a declarar la variable recuerden
que el signo dólar es una declaración de
variable y la voy a asignar a quien al
post
asignamos la variable del formulario
html por eso aparece asterisco post
porque es del medio post que yo utilicé
en html
declaro la otra variable número 2 y así
no también miren la variable que utilice
allá en el código de html
ahora sí voy a crear una variable nueva
que se llama suma y esta suma esta
variable me va a sumar las dos variables
número uno + número dos aquí voy a dejar
un error para que ustedes vean que no me
va a correr programas sin este error
recuerde que número dos es una variable
y se identifica con signo ahora hecho es
imprimir el en pantalla o que me muestra
en la página y voy a poner en su
resultado va a ser suma imprimo la
variable suma que recuerda hacer la suma
del número uno número cierro mi código
de php con estas dos cosas sencillo con
estos dos símbolos y guardo
lo que lo que sigue ahora es montar esta
carpeta de esta carpeta con estos
archivos
miren visualizo sumar no porque no está
montado entonces voy a montar corto
cortar me voy a la unidad se del disco
local abro la carpeta wow y en la
carpeta www voy a pegar tarea número 3
que me va a obtener que lo que estoy
haciendo montando mi trabajo mi proyecto
al servidor
después que hago bueno habrá un
navegador y entró a mi localhost es es
mi servidor en la parte de abajo donde
dice your proyecto y dice tarea n 3 ya
está montado mi proyecto
verdad o se abrió y ahí puedo ver los
dos archivos sumar html entonces voy a
comenzar aquí con una suma normal de m
aquí ampliarles y voy a poner 1 1 sume
me va a enviar el resultado a la página
php me aparece en blanco porque hay
errores verdad para volver a corregir
los errores tengo que abrir sublime tec
nuevamente y cargar los archivos porque
recuerden ya no están en el escritorio
sino que los tengo montados en el
servidor dentro de los files
open folder o open file es perdón abrir
el archivo me voy a la unidad se abrió
la carpeta one abro la carpeta www y
seleccionó los dos archivos en la tarea
de perdón tarea número 3 abro y
seleccionó estos archivos
y ahí lograr abrir bien siempre tengo
que hacer esto y ahí me aparecen los dos
códigos de suma y de el primer error es
este no tiene que estar separado php de
la palabra y recuerden el error del
signo dólar de la variable número dos
ahí entonces agregó el signo dólar para
que me asegura que estoy sumando dos
variables
eso es todo son mis dos errores miren
tan pequeños tan insignificantes pero
importantes porque me hacen voy a probar
ahora voy a sumar 20 más 20
tiene que aparecer me en la hoja de php
ahí está su resultado de suma es 40
miren qué sencillo
voy a volver a probar voy atrás acá voy
a cambiar los valores voy a poner 2000
voy a agregar 2000 que sume el número
ama el número b que es el valor de 2000
más 2000 sumar y ahí está su resultado
suma es 4000 ni códigos pero
perfectamente funciona verdad entonces
qué es lo que quiero explicarle aquí
algo importante es que creamos nuestro
primer código de programación ya creamos
nuestra primera aplicación web
aplicación web porque es un programita
que tiene una función matemática que me
puede resultar me puede arrojar
resultados y funciona muy bien entonces
para que ustedes vean voy a regresar
desde el inicio
para que vean miren en el servidor
y vuelvo a abrir otra vez
mi código de suma html y voy a sumar 100
más 50
50 para que ustedes puedan observar la
función
تصفح المزيد من مقاطع الفيديو ذات الصلة
Como hacer un FORMULARIO con HTML y PHP desde cero
🐘 CURSO de PHP desde CERO - 44 SELECT y CHECKBOX multiples en FORMULARIOS PHP
Web 1 - Formularios con Javascript
Crear Base de Datos en Xampp con MySQL Paso a Paso
La ruta de aprendizaje de un desarrollador web en 2024
PHPmyadmin (Tutorial #001) Primera BD
5.0 / 5 (0 votes)