Desarrollo de aplicaciones web con PHP y MySQL
Introducción a PHP
Sergio Sáez y José Luis Poza
© 2015 Sergio Sáez y José Luis Poza

1. Contenidos

2. El lenguaje HTML

<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>

3. Etiquetas HTML

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.
  • 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
  • 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 3.b 3.c 
<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

4. ¿Cómo funcionan los hipervínculos?

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

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>

5. Formularios

6. Etiquetas de formularios

7. 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>
Nombre

Dirección

Ciudad Estado Pais

Tarjeta de crédito Número Expira

Tipo de producto: Grande Mediano Pequeño

Sugerencias

Gracias por comprar un artículo AASA. El mejor artículo del mercado!

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.1
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,im
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=Es

8. Ejecución 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>
<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 18:35, 21st July</p></body>
</html>

9. 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!!

10. Procesamiento de un formulario

Ejemplo de procesamiento de un formulario con PHP

Tienda de recambios de Pep

Producto Cantidad
Frenos
Aceite
Ruedas 
<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="numfrenos" size="3" maxlength="3">
  </td>
</tr>
<tr valign="middle">
  <td>Aceite</td>
  <td align="center">
    <input type="text" name="numaceite" size="3" maxlength="3">
  </td>
</tr>
<tr valign="middle">
  <td>Ruedas</td>
  <td align="center">
    <input type="text" name="numruedas" 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>
<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_numfrenos." frenos<br>\n";
   echo $f_numaceite." botellas de aceite<br>\n";
   echo $f_numruedas." ruedas<br>\n";
   $totalcant = 0;
   $totaleuros = 0.00;
   define("PRECIOFRENO", 10);
   define("PRECIOACEITE", 5);
   define("PRECIORUEDA", 100);
   $totalcant = $f_numfrenos + $f_numaceite + $f_numruedas;
   $totaleuros = $f_numfrenos * PRECIOFRENO
                  + $f_numaceite * PRECIOACEITE
                  + $f_numruedas * 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> 
<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>
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