Suma de dos números en un mismo documento PHP y HTML5

Normalmente cuando comenzamos a programar en PHP vemos que una tarea tan sencilla como sumar dos
números puede volverse un dolor de cabeza y no por el hecho de no lograr hacer la suma, sino por cuestión de
presentación de los datos.

Trataré de explicarme… normalmente lo que hacemos es colocar el formulario en un archivo html (por aquello
de las hojas de estilo) y las operaciones en otro archivo php por separado, hasta ahí todo bien podremos ver
que en un documento html estará el formulario pidiéndonos los números.

SumaDatos.html

Y luego el resultado lo veremos en otra página PHP que nos mostrará el resultado de la operación:

SumaOperacion.php

El problema de esto es la presentación de datos, es decir, para ver el resultado los datos del formulario se dejan
de mostrar, debido a que se invoca al archivo PHP, lo que muchos hacen es enviar todos los datos y mostrarlos
en el PHP, algo como esto:

Primer número: 3
Segundo número: 8
La suma entre 3 y 8 es 11

Ahora pensemos que no queremos presentar los datos de esta manera, sino que queremos aprovechar las
bondades de las hojas de estilo que estemos usando y darle formato a la presentación de los datos, todo en un
mismo archivo, algo como esto:

Todo mostrado en
un mismo archivo

Para ello el procedimiento es el siguiente:

1. Crear un archivo con la extensión .php en el cual haremos el formulario y el código php embebido.
2. Y colocar el siguiente código:
  Es una combinación de HTML y código embebido de PHP, podemos ver dos secciones de PHP y por ahí
vemos también el código del formulario.
 Ahora analicemos el código, comencemos con el formulario:

Tenemos dos inputs y un botón y en action se referencia a si mismo, ya que código PHP está en el mismo
archivo, probablemente lo único que podría causar confusión es lo que hay en el value, vemos que ahí también
hay embebido un código PHP, péro eso se explica más adelante, realmente no hay mucho que explicar en este
código con respecto al formulario, es importante aclara que por simplicidad no se han utilizado hojas de estilo.
  Ahora veamoe el primer código PHP:
Primero declaramos dos variables num1 y num2 que
almacenarán los datos tecleados en los inputs del
formulario.
preguntamos a través del if si se han enviado datos
(eso sucede cuando pulsamos el botón del formulario),
por cierto, en el formulario hay dos inpust (se llaman
“numero1” y “numero2”), que reciben los datos que se
tecleen para que se envien a los PHP a través de POST
para que hagan las operaciones.
Si la condición se cumple, recuperamos los datos que se hayan tecleado en los inputs… y es todo lo que
se hace, las operaciones se hacen en el otro código PHP embebido.

 Ahora veamos el código que falta

En este código, primero se vuelve a preguntar si hay datos posteados, de ser así se procede a hacer la
suma y mostrar el resultado en pantalla.

La pregunta es ¿Porque lo puse aparte? Traté de ponerlo después del formulario para que la respuesta
se vea justo ahí (Después del formulario)

Ya para terminar, ¿Por qué coloco ese código embebido en el value de los inputs?

La respuesta es simple, se pone ese código en los value de los

inputs para que los datos no se pierdan, sino lo pusiéramos,
al pulsar el botón del formulario los inputs perderían su valor
xq fueron enviados al PHP a través del método POST.

Con esto terminamos este ejemplo, hay muchas validaciones pendientes que no se vieron en este ejemplo
sencillo, así como tampoco se utilizaron hojas de estilo.