PHP / HTML y PHP

Anuncios

Bienvenidos sean a este post, hoy comenzaremos para lo que fue pensado este lenguaje.

Anuncios

Comencemos con el principio como es HTML, HyperText Mark up Language, que es la estructura mas basica para crear una pagina web, este es universalmente interpretado por todos los servidores existentes (Apache, IIS, Tomcat, etc), su forma de trabajo es por tags o etiquetas, el contenido que agreguemos debera estar entre ambas y tiene una estructura basica, muy basica, que debemos respetar:

<html>

<head>
<title>EL titulo de la pagina</title>
</head>

<body>

Todo el contenido que se mostrara en la pagina.

</body>

</html>

Anuncios

Siempre abriremos con html o HTML, es indistinto, porque esto dira que es una pagina web con html, seguido de la etiqueta head que como minimo debe contener a title la cual usaremos para el titulo de la pagina pero aqui dentro podemos incluir otras etiquetas como script, por ejemplo, para que se carguen al comienzo todas las instrucciones de nuestra pagina, y una vez terminado cerramos al tag head con /head, en realidad si observan la estructura todas las tags se cierran de la misma manera, la barra seguida del nombre de la misma, despues de head tenemos a body donde estaran todos los elementos que son la pagina en si, ya sea desde informacion hasta formularios, cerramos a body y cerramos a html, esto es la estructura mas basica que tenemos como buen practica, se pueden agregar mas elementos que identifiquen a la pagina, el tipo de formato que debe manejar, la version de HTML, etc pero yo les garantizo que de esta manera funciona 100% en cualquier servidor, es mas se puede omitir tanto la etiqueta head como body pero les recomiendo que las mantengan para saber que parte son del documento, recuerdan como al principio les comente que se instalen Apache y PHP en un debian virtual o si tienen windows como instalar XAMPP en este post, ahora comenzaremos a utilizarlo y para ello crearemos un nuevo archivo que llamaremos hola.html en la raiz de nuestro servidor para el caso de Debian (Linux) esta sera nuestro directorio:

/var/www/html

Anuncios

Para el caso de windows con XAMPP es:

C:\xampp\htdocs

Anuncios

En ambos casos les hablo de las ubicaciones por defecto pero estas pueden variar en su ubicacion, en el caso de otras distros de Linux les recomiendo verificarlo porque esta es la distro que uso para crear el curso con todo esto aclarado continuemos con el codigo del archivo:

hola.html

<html>
<head>
<title>Hola, Mundo!</title>
</head>
<body>
<h1>Hola, Mundo!</h1>
<a href="https://www.google.com" target="_blank" >Google.com</a>
</body>
</html>

Anuncios

Este es un codigo simple donde aplicaremos al mitico Hola, Mundo!, para ello usaremos la estructura que mencionamos anteriormente con el titulo indicando el nombre de nuestro programa pero observemos el detalle del cuerpo o body:

<body>
<h1>Hola, Mundo!</h1>
<a href="https://www.google.com" target="_blank" >Google.com</a>
</body>

Anuncios

La primera es que mostramos un mensaje en pantalla pero usamos el h1 que le dara al texto la modificacion de mostrarlo como un encabezado grande en la pagina, y observen lo que comente al describir al «lenguaje» donde comenzamos con h1 y lo cerramos con /h1, luego tenemos un link para nuestra pagina y para este caso usamos al tag a y le agregamos un par de modificadores, el primero es href que nos permite cambiar la referencia o ubicacion de la pagina actual y para este caso abrimos a google, el segundo modificador es target y se usa para indicar como debe abrir la pagina informada anteriormente y para esta ocasion al usar _blank le decimos que abra una nueva ventana o pestaña, despues viene el texto donde aplicaremos el link y por ultimo cerramos el tag, con todo esto comentado, con el archivo generado para poder ingresar debemos usar la siguiente url:

http://localhost/hola.html

Anuncios

Una vez ingresada en tu navegador favorito debera aparecer una pagina similar a esta

Anuncios

Como pueden ver es una pagina simple creada donde tenemos varios tags dentro del cuerpo de la pagina y funcional, tomemos esta misma pagina y la convertiremos a PHP, la primera modificacion sera crear un nuevo archivo llamado hola.php en el mismo lugar donde creamos el anterior y le agregaremos el siguiente codigo:

hola.php

<html>
<head>
<title>
<?php 
        $titulo = "Hola, Mundo!";
        echo $titulo; 
?>
</title>
</head>
<body>
<h1>
        <?php echo $titulo;  ?>
</h1>
<a href="https://www.google.com" target="_blank" >
        <?php echo "Google.com"; ?>
</a>
</body>
</html>

Anuncios

Esta es la forma con la cual me siento mas comodo a la hora de trabajar, siendo una fusion entre el codigo HTML y PHP, en este caso observemos que al texto contenido en el tag title lo reemplazamos por el siguiente bloque PHP:

<?php 
        $titulo = "Hola, Mundo!";
        echo $titulo; 
?>

Anuncios

En este caso creamos una nueva variable con el texto original y luego por medio de echo mostraremos a titulo en pantalla o mejor dicho en la pagina, luego reemplazamos el texto del tag h1 por otro bloque php:

<?php echo $titulo;  ?>

Anuncios

En este caso volvemos a mostrar el valor de titulo en la pagina, esto es gracias a que nuestra variable como no esta declarada en ninguna funcion o clase se considera «global» y por lo tanto estara disponible en toda la pagina, ayudando a reutilizar el mensaje del titulo, y por ultimo reemplazamos el mensaje del link por un bloque de PHP y usamos a echo y un literal, para verificarlo debemos usar la siguiente direccion:

http://localhost/hola.php

Anuncios

Como pueden ver se llama de la misma manera pero con la nueva extension, veamos como es la pagina ahora

Anuncios

La pagina es exactamente la misma pero si vemos el codigo fuente de la pagina en si lo veremos de la siguiente manera

Anuncios

Como pueden ver desaparecio el codigo PHP y solo quedo el HTML pero por que? Esto es porque todo lo que hagamos en el bloque PHP se ejecutara del lado del servidor y solo veremos el resultado del mismo, tal como sucede con ASP y por esta razon es uno de los lenguajes mas utilizados y por esta razon les recomiendo manejarse de esta forma: toda la estructura de la pagina la hacen con HTML, es decir tables, divs, tags, etc pero la informacion que debemos mostrar si la muestran por PHP, esto es muy util cuando usamos AJAX pero los mas puristas lo hacen completamente en PHP, lo cual tiene sus pros y contras pero bajo ciertas circunstancias es mas recomendable, les dejo el codigo de la pagina realizado completamente en PHP:

hola.php

<?php 

$titulo = "Hola, Mundo!";

echo "<html><head>";
echo "<title>$titulo</title>";
echo "</head>";

echo "<body>";
echo "<h1>$titulo</h1>";

echo "<a href=\"https://www.google.com\" target=\"_blank\" >Google.com</a>";

echo "</body></html>";

?>

Anuncios

Como pueden ver el codigo va a hacer exactamente lo mismo pero en cierto punto queda mas complejo a simple vista, esto que lo acomode bastante, a la hora de depurarlo puede resultar un poco mas confuso, si es mas practico para manejarse de algunas formas pero para mi gusto prefiero el mixto como comente anteriormente, la pagina va a ser el mismo resultado pero el codigo de la pagina nos quedara asi

Anuncios

Observen que el codigo visto de esta forma nos quedo un poco desagradable pero como digo siempre queda a criterio del programador como hacer las paginas, esto es lo mas basico pero mas adelante veremos como manipular datos desde otras fuentes.

Anuncios

En resumen, hoy hemos visto primero como es HTML, como es su estructura mas basica, como se diagrama con un ejemplo y como es el resultado, despues vimos lo mismo pero con PHP, donde aplicamos primero como usando la estructura en HTML y los «datos» con PHP, por ultimo vimos los pros y contras de hacerlo completamente con PHP y los pros de manejarse con el modo mixto, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Anuncios