Desarrollo de aplicaciones web con PHP y MySQL

Introducción a PHP

Sergio Sáez y José Luis Poza

E.T.S. de Ingeniería Informática

Contenidos

Introducción al lenguaje HTML.
Formularios de petición.
Procesando del formulario.

El lenguaje HTML

La estructura de una página HTML es como sigue:

<html>

Cabecera del documento

  <head>
    <title>P&aacute;gina de ejemplo</title>
    <meta http-equiv="Content-Type"
          content="text/html; charset=UTF-8"/>
    <meta name="AUTHOR"
          content="Sergio Sáez" />
  </head>

Cuerpo del documento

  <body>
    <h1>Cabecera de primer nivel</h1>

    <p>Texto de ejemplo para formar un p&aacute;rrafo.</p>

    <h2>Cabecera de segundo nivel</h2>
    <h3>Cabecera de tercer nivel</h3>
    <h4>Cabecera de cuarto nivel</h4>
    <h5>Cabecera de quinto nivel</h5>
  </body>

</html>

Etiquetas HTML

Etiquetas de estilo

<b> </b>

Letra negrita.

<i> </i>

Letra cursiva.

<u> </u>

Letra subrayada.

<font> </font>

Cambio de estilo en la fuente: color, tipo, etc. Está obsoleta en favor de <span>.

<sup> </sup>

Letra en superíndice.

<sub> </sub>

Letra en subíndice.

<span> </span>

Establece atributos de estilo sobre un fragmento de texto.

Etiquetas HTML (cont.)

Ejemplo de etiquetas de estilo

<b>Algo de texto en negrita.</b>

<i>Algo de texto en cursiva.</i>

<u>Algo de texto subrayado.</u>

<font color="blue">Algo de texto en color.</font>

Un <sup>super&iacute;ndice</sup> y un <sub>sub&iacute;ndice</sub>.

<span style="font-size: 180%">Texto de mayor tama&ntilde;o.</span>

Resultado
Algo de texto en negrita. Algo de texto en cursiva. Algo de texto subrayado. Algo de texto en color. Un ^superíndice y un _subíndice. Texto de mayor tamaño.

Etiquetas HTML (cont.)

Etiquetas de párrafo

<h?> </h?>

Cabeceras de sección: h1, h2, h3, h4, h5, ...

<p> </p>

Párrafo de texto.

<br/>

Salto de línea.

<hr/>

División horizontal (mediante una línea).

<pre> </pre>

Texto preformateado. Conserva los espacios en blanco, saltos de línea, etc.

<div> </div>

Establece atributos de estilo sobre un párrafo o conjunto de párrafos.

Etiquetas HTML (cont.)

Ejemplo de etiquetas de párrafo

<h1>Cabecera de primer nivel</h1>
<h2>Cabecera de segundo nivel</h2>
<h3>Cabecera de tercer nivel</h3>
<h4>Cabecera de cuarto nivel</h4>

<p>Texto de ejemplo para formar un párrafo.</p>

<p>Lo mismo pero con salto de l&iacute;nea <br/> y luego sigue
el texto para formar un párrafo.</p>

<hr/>

<pre>
  Aqu&iacute;   se conservan   los espacios en blanco
y los saltos de l&iacute;nea.
</pre>

<div style="border: thin dashed blue; padding: 0.5em;">
Texto dentro de una caja y con margen.
</div>

Etiquetas HTML (cont.)

Resultado

Cabecera de primer nivel

Cabecera de segundo nivel

Cabecera de tercer nivel

Cabecera de cuarto nivel

Texto de ejemplo para formar un p�rrafo.

Lo mismo pero con salto de línea
y luego sigue el texto para formar un p�rrafo.

  Aquí   se conservan   los espacios en blanco
y los saltos de línea.

Texto dentro de una caja y con margen.

Etiquetas HTML (cont.)

Listas

<ul> </ul>

Lista desordenada de elementos.

<ol> </ol>

Lista ordenada de elementos.

<li> </li>

Elemento de una lista ordenada o desordenada.

<dl> </dl>

Lista de descripciones.

<dt> </dt>

Término de una descripción.

<dd> </dd>

Descripción de un término.

Etiquetas HTML (cont.)

Ejemplo de listas

<ul>
  <li>Un elemento</li>
  <li>Otro elemento</li>
</ul>

<ol>
  <li>Un elemento</li>
  <li>Otro elemento</li>
</ol>

<dl>
  <dt>Un término</dt>
  <dd>Una descripci&oacute;n</dt>
  <dt>Otro término</dt>
  <dd>Otra descripci&oacute;n</dt>
</dl>

Resultado
- Un elemento
- Otro elemento
1. Un elemento
2. Otro elemento
Un t�rmino

Una descripción
Otro t�rmino

Otra descripción

Etiquetas HTML (cont.)

Tablas

<table> </table>

Comienzo y fin de tabla.

cellspacing="N"

Distancia entre celdas.

cellpadding="N"

Distancia entre el contenido y el borde de la celda.

<tr> </tr>

Comienzo y fin de la fila de una tabla.

<th> </th>

Comienzo y fin de una celda de tipo cabecera. Está obsoleto.

<td> </td>

Comienzo y fin de una celda de tabla.

colspan="N"

La celda ocupará N columnas.

rowspan="N"

La celda ocupará N filas.

Etiquetas HTML (cont.)

Ejemplo de tablas

<table border="1" cellpadding="16"
  <tr>
    <th></th>
    <th>a</th>
    <th>b</th>
    <th>c</th>
  </tr>
  <tr>
    <th>1</th>
    <td>1.a</td>
    <td colspan="2">1.b</td>

  </tr>
  <tr>
    <th>2</th>
    <td rowspan="2">2.a</td>
    <td>2.b</td>
    <td>2.c</td>
  </tr>
  <tr>
    <th>3</th>

    <td>3.b</td>
    <td>3.c</td>
  </tr>
</table>

Resultado

	a	b	c
1	1.a	1.b
2	2.a	2.b	2.c
3	2.a	3.b	3.c

Etiquetas HTML (cont.)

Enlaces

<a> </a>

Hipervínculo. Permite enlazar con otra página HTML u otra parte de la misma página.

href="..."

Dirección URL del recurso referenciado.

name="..."

Nombre del un enlace dentro de una página.

target="..."

Nombre de la ventana en la que se debe abrir el nuevo recurso.
Imágenes

<img ... />

Incluye una imágen en la página HTML.

src

Dirección URL de la imagen que se debe insertar.

width y height

Ancho y alto con los que se debe visualizar la imagen.

Etiquetas HTML (cont.)

Ejemplo de enlaces e imágenes

<a href="http://viver.disca.upv.es/~ssaez/"
   target="_BLANK">Nueva ventana</a>
<br />

<a href="#slide2">Enlace con la transparencia 2</a>
<br />

<img src="../images/elephpant_php_2.png">

Nueva ventana
Enlace con la transparencia 2

¿Cómo funcionan los hipervínculos?

Las peticiones a un servidor web se realizan mediante el protocolo HTTP.
- El usuario pincha en un hipervínculo.
- El navegador solicita al servidor web la nueva página.
- El servidor web determina que tipo de página es en función de la extensión.
- El servidor accede a disco y deveuleve la respuesta.
- El navegador muestra la página solicitada.

¿Cómo funcionan los hipervínculos? (cont.)

Un hipervínculo del tipo
```
<a href="http://viver.disca.upv.es:8080/~ssaez/web-eso/es/index.html">ESO</a>
```
genera las siguientes acciones:
- El navegador determina el nombre del servidor y el puerto: viver.disca.upv.es y 8080.
- El navegador realiza la petición del recurso /~ssaez/web-eso/es/index.html al servidor mediante un mensaje HTTP.

GET /~ssaez/web-eso/es/index.html HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (X11; U; Linux i686; es-ES; rv:1.8.1.12) Gecko/20090207 Ubuntu/7.10 (gutsy) Firefox/2.0.0.12
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: es-es,es;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive

¿Cómo funcionan los hipervínculos? (cont.)

En el lado del servidor
- El recibe la petición.
- Accede al fichero index.html en su sistema de ficheros.
- Genera la respuesta en formato HTTP.

HTTP/1.1 200 OK
Date: Mon, 11 Feb 2008 03:07:25 GMT
Server: Apache/2.2.4 (Ubuntu) DAV/2 SVN/1.4.4 PHP/5.2.3-1ubuntu6.3
Last-Modified: Mon, 17 Dec 2007 09:55:06 GMT
ETag: "3930467-15fe-68255280"
Accept-Ranges: bytes
Content-Length: 5630
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
  <head>
    <title>ESO / DSO. Información</title>
    <meta name="GENERATOR" content="XCGen" />
 </head>
  <body bgcolor="#faf6e3">
    <a name="top"></a>
...
  </body>
</html>

Formularios

Los formularios permiten enviar información desde el cliente al servidor.
- La página debe especificar en HTML que datos se están solicitando.
- El navegador enviará esos datos a la dirección especificada en el formulario.
- El servidor web atenderá esa petición, invocando probablemente a algún tipo de interprete, que analizará el contenido del formulario y devolvera un resultado.

Etiquetas de formularios

Definición del formulario

<form ...> campos </form>

Define un formulario. Al contrario que los campos del propio formulario, éste no tiene una interfaz visual asociada.

Su comportamiento lo definen sus atributos.

action="..."

Define el URL que recibirá la información del formulario. Suele hacer referencia a una página dinámica.

name="..."

Define una etiqueta que identifica al formulario.

method="..."

Especifica el método de envío de la información del formulario.

Los dos métodos más habituales son GET y POST. Se podrían comparar con el envío de información mediante una postal o mediante una carta convencional, respectivamente.

Etiquetas de formularios (cont.)

Campos de entrada

<input ... />

Campo de entrada de un formulario.

type="..."

Define que tipo de campo de entrada es: text, radio, checkbox, button, hidden, password, submit...

name="..."

Define una etiqueta para este campo.

value="..."

Define el valor por omisión de un campo.

size="..."

Define el tamaño visual del campo.

maxlength="..."

Define el tamaño máximo de la entrada.

<textarea ...> </textarea>

Campo de entrada de texto de múltiples líneas.

rows="..."

Define el número de líneas del campo de entrada.

Etiquetas de formularios (cont.)

Campos de entrada complejos

<select ...></select>

Define una lista de selección.

name="..."

Define la etiqueta del selector.

<option ...> etiqueta </option>

Opción de una lista de selección.

etiqueta

Etiqueta de texto que aparecerá en la lista de selección.

value="..."

Define el valor que tomará el selector si esta es la opción seleccionada.

<input type="submit" name="nombre" value="Etiqueta"

Caso especial de un campo de entrada en forma de botón. Permite enviar el contenido del formulario.

Etiqueta

Etiqueta que parecerá en el botón de envío.

nombre

Etiqueta que define la utilización de este botón de envío.

Ejemplos de formularios

<form action="entrega.php" method="post">

Nombre <input name="cliente" size="51"> <p>

Direcci&oacute;n <input name="direccion" size="49"> <p>

Ciudad <input name="ciudad" size=20>
Estado <input name="estado" size=4>
Pais <input name="pais" size=10> <p>

Tarjeta de cr&eacute;dito

<select name="cc">
      <option value="mastercard"> M/C
      <option value="visa"> VISA
      <option value="amex"> AMEX
</select>

N&uacute;mero <input name="credit" size=10>
Expira <input name="expira" size=4><p>

Tipo de producto:
Grande <input name="producto" type=radio value="caro">
Mediano <input name="producto" type=radio value="economico">
Peque&ntilde;o <input name="producto" type=radio value="barato">
<p>
Sugerencias
<textarea name="suge" rows="2" cols="37" wrap="soft" >
</textarea>

<p>
<input type=submit value="Enviar Orden">

<p>Gracias por comprar un art&iacute;culo AASA.
El mejor art&iacute;culo del mercado!
</form>

Ejemplos de formularios (cont.)

La petición enviada podría ser:

POST /~ssaez/php-2008-P-A/01-introduccion/entrega.php HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (X11; U; Linux i686; es-ES; rv:1.8.1.12) Gecko/20080207 Ubuntu/7.10 (gutsy) Firefox/2.0.0.12
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: es-es,es;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://localhost/~ssaez/php-2008-P-A/01-introduccion/peticion.html
Cookie: PHPSESSID=ddeebad3525eebb091b2a50125731248
Content-Type: application/x-www-form-urlencoded
Content-Length: 173

cliente=Sergio+Saez&direccion=Camino+de+vera+s%2Fn&ciudad=Valencia&estado=Valencia&pais=Espa%C3%B1a&cc=visa...

Ejecución de código PHP

Ejemplo de código PHP


<html><head>
  <title>Tienda de recambios de Bob - Resultados</title>
</head>
<body>
<h1>Tienda de recambios de Bob</h1>
<h2>Resultados</h2>
<?php
  echo "<p>Petición procesada.</p>";
?>
</body>
</html>

<html><head>
  <title>Tienda de recambios de Bob - Resultados</title>
</head>
<body>
<h1>Tienda de recambios de Bob</h1>
<h2>Resultados</h2>
<p>Petición procesada.</p></body>
</html>

Ejecución de código PHP (cont.)

El HTML generado puede ser dinámico


<html><head>
  <title>Tienda de recambios de Bob - Resultados</title>
</head>
<body>
<h1>Tienda de recambios de Bob</h1>
<h2>Resultados</h2>
<?php
  echo "<p>Petición procesada a las ". date('H:i, jS F') ."</p>";
?>
</body>
</html>

<html><head>
  <title>Tienda de recambios de Bob - Resultados</title>
</head>
<body>
<h1>Tienda de recambios de Bob</h1>
<h2>Resultados</h2>
<p>Petición procesada a las 17:52, 6th March</p></body>
</html>

Marcas de inserción de código PHP

Tipo XML: Son las más portables. Siempre están habilitadas.
<?php echo("para servir documentos XHTML o XML\n"); ?> <?= expression # Igual a "<?php echo expression ?>" ?>
Tipo SGML: Etiquetas cortas. Están deshabilitadas en la configuración (php 5.5).
<? echo ("versión simple del tipo de procesado SGML \n"); ?>
Tipo SCRIPT: Etiqueta tipo javascript. Usar sólo en caso necesario.
<script language="php"> echo ("muchos editores (como FrontPage) no aceptan instrucciones de procesado"); </script>
Tipo ASP: Imitan al etiquetado de ASP y están obsoletas.
<% echo ("Opcionalmente, puedes usar las etiquetas ASP"); %> <%= $variable; # Esto es una abreviatura de "<% echo . . ." %>

El código que utiliza etiquetas no habilitadas no se ejecuta!!

Procesamiento de un formulario

Ejemplo de procesamiento de un formulario con PHP

Tienda de recambios de Pep

Procesamiento de un formulario (cont.)

<h1>Tienda de recambios de Pep</h1>

<form action="procesaorden.php" method="post">
<table border="1" bgcolor="#f0f0f0">
<tr bgcolor="#cccccc">
  <td width="300">Producto</td>
  <td width="200">Cantidad</td>
</tr>
<tr valign="middle">
  <td>Frenos</td>
  <td align="center">
    <input type="text" name="frenos" size="3" maxlength="3">
  </td>
</tr>
<tr valign="middle">
  <td>Aceite</td>
  <td align="center">
    <input type="text" name="aceite" size="3" maxlength="3">
  </td>
</tr>
<tr valign="middle">
  <td>Ruedas</td>
  <td align="center">
    <input type="text" name="ruedas" size="3" maxlength="3">
  </td>
</tr>
<tr valign="middle">
  <td align="center" colspan="2">
    <input type="submit" value="Realizar petici&oacute;n">
  </td>
</tr>
</table>
</form>

Procesamiento de un formulario (cont.)

Procesamiento de las peticiones


<html>
<head>
   <title>Tienda de recambios de Pep - Resultados</title>
</head>
<body>
<h1>Tienda de recambios de Pep</h1>
<h2>Resultados</h2>
<?php
   /* Extrae los campos enviados por método POST y
     los pone en variables con el prefijo 'f_' */
   extract($_POST, EXTR_PREFIX_ALL, "f");

   echo "<p>Petición procesada a las ";
   echo date("H:i, jS F");
   echo "<br>\n";
   echo "<p>Su petición es la siguiente:";
   echo "<br>\n";
   echo $f_frenos." frenos<br>\n";
   echo $f_aceite." botellas de aceite<br>\n";
   echo $f_ruedas." ruedas<br>\n";
   $totalcant = 0;
   $totaleuros = 0.00;
   define("PRECIOFRENO", 10);
   define("PRECIOACEITE", 5);
   define("PRECIORUEDA", 100);
   $totalcant = $f_frenos + $f_aceite + $f_ruedas;
   $totaleuros = $f_frenos * PRECIOFRENO
                  + $f_aceite * PRECIOACEITE
                  + $f_ruedas * PRECIORUEDA;
   echo "<br>\n";
   echo "Elementos:             ".$totalcant."<br>\n";
   echo "Subtotal:             $";
   echo number_format($totaleuros, 2);
   echo "<br>\n";
   $iva = 0.21; // IVA
   $totaleuros = $totaleuros * (1 + $iva);
   $totaleuros = number_format($totaleuros, 2);
   echo "Total m&aacute;s IVA: $".$totaleuros."<br>\n";
?>
</body>
</html>

Procesamiento de un formulario (cont.)

<html>
<head>
   <title>Tienda de recambios de Pep - Resultados</title>
</head>
<body>
<h1>Tienda de recambios de Pep</h1>
<h2>Resultados</h2>
<p>Petición procesada a las 15:54, 30th June<br>
<p>Su petición es la siguiente:<br>
4 frenos<br>
1 botellas de aceite<br>
5 ruedas<br>
<br>

Elementos:             10<br>
Subtotal:             $545.00<br>
Total m&aacute;s IVA: $659,45<br>
</body>
</html>

Procesamiento de un formulario (cont.)

Tienda de recambios de Pep - Resultados

Tienda de recambios de Pep

Resultados

Petici�n procesada a las 15:54, 30th June

Su petici�n es la siguiente:
4 frenos
1 botellas de aceite
5 ruedas

Elementos: 10
Subtotal: $545.00
Total más IVA: $659,45

Producto	Cantidad
Frenos
Aceite
Ruedas

Desarrollo de aplicaciones web con PHP y MySQL

© 2019 Sergio Sáez y José Luis Poza

Desarrollo de aplicaciones web con PHP y MySQL

Introducción a PHP

Sergio Sáez y José Luis Poza

E.T.S. de Ingeniería Informática

Contenidos

El lenguaje HTML

Etiquetas HTML

Etiquetas HTML (cont.)

Etiquetas HTML (cont.)

Etiquetas HTML (cont.)

Etiquetas HTML (cont.)

Cabecera de primer nivel

Cabecera de segundo nivel

Cabecera de tercer nivel

Cabecera de cuarto nivel

Etiquetas HTML (cont.)

Etiquetas HTML (cont.)

Etiquetas HTML (cont.)

Etiquetas HTML (cont.)

Etiquetas HTML (cont.)

Etiquetas HTML (cont.)

¿Cómo funcionan los hipervínculos?

¿Cómo funcionan los hipervínculos? (cont.)

¿Cómo funcionan los hipervínculos? (cont.)

Formularios

Etiquetas de formularios

Etiquetas de formularios (cont.)

Etiquetas de formularios (cont.)

Ejemplos de formularios

Ejemplos de formularios (cont.)

Ejemplos de formularios (cont.)

Ejecución de código PHP

Ejecución de código PHP (cont.)

Marcas de inserción de código PHP

Procesamiento de un formulario

Tienda de recambios de Pep

Procesamiento de un formulario (cont.)

Procesamiento de un formulario (cont.)

Procesamiento de un formulario (cont.)

Procesamiento de un formulario (cont.)

Tienda de recambios de Pep

Resultados