Cómo combinar PHP y HTML

Aprende a combiar php y html, distintas formas de hacerlo. Ejemplos prácticos explicados paso a paso.

php y html Programacion web

Para aquellos que no lo tienen claro, o que quieran ver las distintas formas que existen, vamos a ver con este tutorial como combinar php y html para realizar páginas dinámicas.

Para entender cómo trabajan html y php juntos es recomendable que conozcas o te suenen los siguientes conceptos de programación web:

Por qué se utilizan juntos php y html

Combinar php y html es una tarea común cuando se desarrollan aplicaciones web con páginas dinámicas. Usar ambos lenguajes juntos puede confundir a más de uno, y a menudo encuentro programadores que proceden de otros lenguajes, y a principiantes de la programación bastante confusos por esta cuestión.

PHP es un lenguaje que se ejecuta en el servidor, y entre las muchas utilidades que tiene, construir páginas de forma dinámica está entre las más habituales. Gracias a PHP podemos montar en HTML los últimos post de un blog, los resultados de formularios de búsqueda o contruir el html de los productos de una tienda online.

¿Como puede PHP usar HTML?

Para PHP el lenguaje HTML no es más que un mero texto plano, como podría serlo un texto "Hola mundo". Pasa lo mismo con imprimir css u otro lenguaje que se interprete en el cliente (el navegador del visitante web) como puede ser javascript. ¿Por qué? Pues porque PHP es un lenguaje que se ejecuta en el servidor, es decir, se ejecuta mucho antes de que el visitante vea la web, entonces, cuando un visitante visita la página index.php de nuestra web, el PHP programado en esta página se ejecutaría primero, posteriormente el servidor enviaría al cliente la página html definitiva, y por último el navegador (el cliente) interpreta todo el contenido da la página (menos el php que no lo recibe).

Explicación con ejemplo de php combinado con html

Veamos un ejemplo. Tenemos en nuestra web una página principal index.php, y en esta página programo en PHP lo siguiente:

<html>
<head>
     <title>Ejemplo combinar php y html</title>
</head>
<body>
<?php
for($i=0;$i<10;$i++){
    echo 'Hola ' . $i;
}
?>
</body>
</html>

Bien, en este ejemplo tenemos una pequeña porción de PHP en un fichero con contenido HTML. Veamos el orden de ejecución:

  1. El usuario de la web visita el enlace www.srcodigofuente.es.
  2. El servidor busca el fichero index.php en mi directorio raiz.
  3. Apache abre el fichero y como tiene extensión .php lo explora por si tiene que ejecutar código php.
  4. Al explorar el fichero se encuentra con HTML, lenguaje que ignorará ya que no lo puede ejecutar y dejará tal y como está.
  5. Se encuentra con <?php y comienza a interpretar el código que encuentra dentro.
  6. Ejecuta el bucle for que tiene diez iteraciones marcadas por el contador $i.
  7. Como en cada iteración realiza una impresión de texto (echo $i), al contenido del fichero, es decir, lo que es para Apache texto plano, le añade el resultado de los diez echo (Hola 1, Hola 2,...).
  8. Apache termina de interpretar PHP cuando se encuentra ?> y sigue explorando el fichero que ahora vuelve a ser texto plano (HTML).
  9. Cuando Apache alcanza el final del fichero lo envía al cliente. Así el navegador de usuario que visitó el enlace de mi web verá ahora una página HTML con lenguaje a interpretar y que convertirá en el diseño que corresponda.

El fichero que ha recibido y leído el navegador web será: 

<html>
<head>
     <title>Ejemplo combinar php y html</title>
</head>
<body>
Hola 1Hola 2Hola 3Hola 4Hola 5Hola 6Hola 7Hola 8Hola9
</body>
</html>

Como puedes ver no hay ni rastro del PHP, esa porción del fichero ha sido interpretada en su momento en el servidor (Apache) y una vez ejecutado el código solo queda lo que se haya impreso en el fichero (con echo por ejemplo).

Ejemplo 2 Combinar php con html

Visto el ejemplo anterior de html y php juntos veamos ahora un ejemplo más complejo, que lea de base de datos y construya por ejemplo las últimas noticias de mi web.

Primero la conexión y la consulta de los datos desde la base de datos con la clase mysqli:

<?php
$objMysql = mysqli('localhost','root','root','database_blog');
$query = 'SELECT titulo, texto
               FROM noticia
               ORDER BY fecha DESC
               LIMIT 2;';
$result = $objtMysql->query($query);
$objtMysql->close();

 Ahora, si la consulta ha ido bien y $result es distinto de false, voy a mostrar con HTML y PHP un <article> por cada noticia:

if($result != false){
     for($i=0;$i<$result->num_rows;$i++){
           $row = $result->fetch_assoc();
          ?>
           <article>
                   <h2> <?php echo $row['titulo']; ?> </h2>
                   <p> <?php echo $row['texto']; </p>
           </article>
           <?php
     }
}
?>

El código de la discordia aparece contenido en el bucle for. He realizado una programación normal del bucle excepto que dentro de este he cerrado PHP, he escrito HTML de forma normal (si lo copias en tu IDE te lo coloreará como html), y donde quiero que aparezcan valores dinámicos, es decir, valores que proceden de las filas de la consulta y están almacenados en PHP, abro PHP <?php e imprimo el valor de la variable deseada justo antes de cerrar PHP ?> y continuar escribiendo HTML de forma normal. Por último vuelvo a abrir PHP y cierro respectivamente el bucle for, y el if.

Con este código he logrado escribir un trozo de código HTML una sola vez, y que al final el archivo que se le envía al usuario tendrá dos <article> cada uno con la información de una noticia. Este script se adaptará a la información de la base de datos en todo momento, y será por lo tanto una página dinámica.

Lo que a priori puede ser un poco confuso de ver (abrir y cerrar php), pero es la mejor forma de trabajar con html y php juntos, además una vez entendido y probado es una auténtica maravilla. Esto mismo que he realizado es aplicable a código javascript o CSS. Para entender el concepto hay que practicarlo varias veces.

Extra: Ejemplo avanzado php y html combinado

Me gustaría dejar un ejemplo de uso más avanzado (tampoco mucho la verdad), del uso de html dentro de una función php, algo muy útil y que es posible que desconozcas si estás leyendo estas líneas:

<?php
function imprimeArticle($arrayInfo){
?>
      <article>
             <h2><?php echo $arrayInfo['titulo'] ?> </h2>
             <p> <?php echo $arrayInfo['texto'] ?> </p>
      </article>
<?php
}
?>

 En este ejemplo puedes ver una función PHP normal, con un parámetro de entrada con la información de la noticia y, como en el anterior ejemplo, una impresión de HTML con variables intercaladas de PHP completamente dependiente de la función (solo se escribe si se llama a la función). Al igual que si hubiera hecho un echo de todo el HTML, la salida final de la función se compondría dinámicamente con cada llamada y su array de datos de entrada.

La llamada a la función podría introducirla en un recorrido de la base de datos y tendría una versión más limpia de lo programado con anteriorida:

<?php
$objMysql = mysqli('localhost','root','root','database_blog');
$query = 'SELECT titulo, texto
               FROM noticia
               ORDER BY fecha DESC
               LIMIT 2;';
$result = $objtMysql->query($query);
$objtMysql->close();
 
if($result != false){ //ha ido bien la consulta en la base de datos
     for($i=0;$i<$result->num_rows;$i++){
           $row = $result->fetch_assoc();
           imprimeArticle($row);
     }
}
?>
 
Si no te ha quedado claro, te recomiendo copiar todo el código (el de los dos últimos ejemplos) y probarlo con una tabla de tu base de datos local.

Sobre el autor

Javier Gómez Redactor en Srcodigofuente.es

Javier Gómez

Ingeniero técnico en informática de gestión. Desarrollador web freelance y profesor de desarrollo web a partes iguales. Testarudo autodidacta, creativo, perfeccionista y alma libre.

Cargando comentarios

Utilizamos "cookies" para información estadística. Si continúas navegando aceptas su uso.