Cpe 1202

2
COMO CREAR PAGINAS WEB DINAMICAS CON PHP Y MYSQL

GUIA PASO A PASO
Copyright 2012 Cesar Mayta. Derechos reservados. Prohibida la reproduccin y/o transmisin total o parcial de este documento sin consentimiento por escrito del autor.
Exclusin de Responsabilidad Este Libro ha sido escrito para proveer informacin sobre Como crear pginas web dinmicas con php y mysql. Se han hecho todos los esfuerzos posibles para que este libro sea lo ms exacto y adecuado posible. Sin embargo puede que existan errores ortogrficos y/o de contenido. La informacin est actualizada a la fecha de la publicacin y est basada en la experiencia/investigacin del autor. Por esta razn se debe considerar como una gua nicamente. El propsito del libro es educativo y tanto el autor como la editorial no garantizan que el contenido sea 100% exacto por lo que no se responsabilizan por ningn tipo de error u omisin. Tanto el autor como la editorial se liberan de cualquier tipo de responsabilidad a cualquier persona o entidad por daos o prdidas causados o supuestamente causados, directa o indirectamente por este reporte. Si no est de acuerdo con le exclusin anterior por favor no lea y devuelva este libro para obtener un reembolso completo. Aclaracin de Conexin y Divulgacin Usted debe asumir que el autor y el editor tienen una relacin de afiliados y/o algn otro tipo de conexin material con los proveedores de productos y servicios mencionados en esta gua y pueden ser compensados cuando usted compre de un proveedor. Le recomendamos informase adecuadamente sobre cualquier producto o servicio que vaya a comprar en lnea o fuera de ella.
Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com
Mensaje del Autor
Este libro trata de capacitarte para que puedas desarrollar pginas Web de alto rendimiento que permitirn poder realizar distintas tareas. Programndolas con PHP para que el tratamiento de informacin sea dinmico y almacenando la misma informacin en la base de datos MYSQL.
Tabla de Contenido
CONCEPTOS BASICOS E INSTALACION DE LAMP......................................................... 5 CREANDO PAGINAS WEB ESTATICAS CON HTML ...................................................... 13 APRENDIENDO PHP ............................................................................................................... 43 BASE DE DATOS MYSQL .................................................................................................. 58 PHP Y MYSQL ........................................................................................................................... 64
CONCEPTOS BASICOS E INSTALACION DE LAMP

Una pgina web es un espacio virtual donde puedes publicar toda la informacin necesaria para dar a conocer tu empresa. Cuando hablamos de una pgina web, significa que dispones de una sola pgina web sin ningn vnculo interno a pginas secundarias. Para referirse a un espacio web con muchas pginas accesibles mediante vnculos internos, lo llamamos sitio web. Por lo general, las empresas precisan siempre de la creacin de un sitio web para poder clasificar toda la informacin en secciones. Este sitio web ser accesible por todas aquellas personas que dispongan de una conexin a Internet. Esto significa a da de hoy, que puede ser vista por casi todo el mundo. TIPOS DE PGINAS WEB ESTATICAS. Las pginas web estticas son aquellas realizadas en HTML que pueden mostrar en alguna parte de la pgina objetos en movimiento tales como banners, gifs animados, videos, etc. ACTIVAS O ANIMADAS Las pginas web activas son aquellas que se realizan con la tecnologa FLASH, sta permite que una pgina web presente el contenido con ciertos efectos animados continuados. El uso de esta tecnologa permite diseos ms vanguardistas, modernos y creativos. DINAMICAS Este tipo de pginas a diferencia de las otras 2 son paginas creadas con un lenguaje de programacin que esta embebido en la misma pagina, estos lenguajes generan el cdigo para la pagina web de forma dinmica. INTERNET ( DOMINIO Y HOSTING): Para que una pgina web o un sitio web pueda ser visualizado en Internet se requieren dos servicios previos: un dominio y un alojamiento. A continuacin explicaremos qu significa cada servicio y para qu sirve. Pero para explicar de una forma alegrica diremos que el alojamiento es como si fuera su lugar fsico de residencia (una casa, un piso, etc.) y el dominio es su direccin postal fsica (calle Mayor, n 87 08346 Barcelona, Espaa). De esta manera cuando alguien tiene que visitarle sabe que para llegar tendr que buscar en un mapa (Internet) la direccin para poder visitarle en su casa. DOMINIO: Consiste en un nombre seguido de un punto acabado en una terminacin de alto nivel que puede indicar el origen del dominio o bien la actividad lucrativa o no del dominio. Los dominios de alto nivel de origen suelen ser los .es (Espaa), .uk
6 (Inglaterra), .fr (Francia), y por otra parte los de actividades empresariales o actividades no lucrativas como .com (Comercio), .org (Organizacin), .net (network), .edu (Educacin). Un ejemplo de un nombre de dominio seria red-web.es. Por tanto, el dominio es la direccin que usamos de forma cotidiana para llegar a un sitio web. ALOJAMIENTO O HOSTING: El alojamiento es el espacio que dispondrs para subir el contenido de tu pgina o sitio web. El sistema de crear nombres de dominio (por ejemplo, miempresa.com) se cre para que fuera ms fcil para nosotros acordarnos de la direccin de un sitio web, porque Internet funciona con nmeros IP. De esta manera un nombre de dominio es un alias de una IP. Un nmero IP est formado por cuatro grupos de nmeros inferiores a 256 y separados por puntos: 85.123.45.239. A cada dominio le corresponde una IP, que es la direccin virtual que utilizan los ordenadores para almacenar el contenido de tu pgina. La IP indica donde publicar el contenido de tu sitio web. Para poder asociar un nombre de dominio (por ejemplo, miempresa.com) y una direccin IP necesitamos un servicio de Sistema de Nombres de Dominio (o en ingls Domain Name System = DNS). Este servicio nos permite vincular nuestro dominio redweb.es a una direccin IP virtual para poder almacenar todo nuestro contenido. Si un dominio no est asociado a una IP no sirve de nada. Cuando registras el dominio, por norma general te dan unos datos para acceder al panel de gestin del dominio que te permitir indicar que DNS apuntan a la IP de tu alojamiento. Recordemos que el DNS es el puente que conecta tu dominio a tu IP del alojamiento. Es habitual disponer de dos nombre de DNS, el primario y el secundario, que permitirn conectar tu dominio (red-web.es) con el alojamiento. Estas DNS apuntan a la IP de tu alojamiento. La empresa donde alojas el contenido te indicar tus DNS. Una vez las tienes, tanto la primaria como la secundaria, debes indicarlas en tu panel de gestin del dominio (red-web.es). Si no sabes con certeza donde se tienen que incluir puedes pedir a la empresa donde has registrado el servicio de contratacin del dominio que te realice esta gestin. LAMP: Ahora que ya tenemos estos conceptos podemos empezar a instalar nuestro servidor web que nos ayudara para las pruebas que realizaremos en este curso para esto instalaremos LAMP. El acrnimo LAMP se refiere a un conjunto de subsistemas software necesarios para alcanzar una solucin global, en este caso configurar sitios web o Servidores dinmicos con un esfuerzo reducido. En las tecnologas LAMP esto se consigue mediante la unin de las siguientes
7 tecnologas: Linux, el sistema operativo. Apache, el servidor Web. MySQL, el gestor de bases de datos. Perl, PHP lenguajes de programacin. Linux o GNU/Linux es un sistema operativo libre tipo Unix. Apache HTTP Server Servidor HTTP Apache es un servidor Web libre y de cdigo abierto, el ms popular en cuanto a uso, sirviendo de facto como plataforma de referencia para el diseo y valoracin de otros servidores Web. MySQL es un Sistema de Gestin de Bases de datos (SGBD) tipo SQL, multihilo y multiusuario del que se estiman ms de un milln de instalaciones. PHP (acrnimo recursivo de "PHP: Hypertext Preprocessor") es un lenguaje de programacin diseado para producir sitios Web dinmicos. PHP es utilizado en aplicaciones del lado del servidor, aunque puede ser usado tambin desde una interfaz de lnea de comandos o como aplicacin de escritorio. Para este curso instalaremos todo en un sistema operativo Windows por lo que en si estaremos instalando WAMP pero en Internet los servidores con los que trabajemos sern Linux. INSTALACION DE APPSERV: QUE ES APPSERV? Es una herrramienta OpenSource para Windows que facilita la instalacin de Apache, MySQL y PHP en una sola herramienta, esta caracterstica facilita la tarea al usuario ya que se configuran las aplicaciones de forma automtica. Como extra incorpora phpMyAdmin para el manejo de MySQL. El paquete contiene: Apache Web Server Lenguaje PHP Base de datos MySQL Manejador de base de datos phpMyAdmin Y este paquete lo podemos descargar entrando aqui: http://www.appservnetwork.com/index.php?newlang=spanish
Es muy liviano y de ah mismo podemos bajar la ltima versin.
COMO INSTALAR APPSERV Ya ejecutado la primera pantalla nos muestra la bienvenida y damos clic en siguiente (next).
En esta imagen indica el acuerdo de licencia, ah debemos dar conformidad (I Agree).
En este punto indica en que direccin vamos a dejar nuestro instalacin, es preferible dejarlo por el que viene por default es decir C:\AppServ como se ve en la imagen:
10 Aqu vamos a necesitar los componentes segn las necesidades que tengamos, en este caso lo dejaremos como esta:
En este punto debes indicar el nombre del servidor y el email del administrador del sistema, en mi caso dejo localhost y email root@appservnetwork.com, respectivamente, el puerto 80. Recuerda que puedes dar siguiente y dejar lo que sugiere sin problemas.
11
En esta parte se trata de la configuracin de MySQL, ponemos algn password que recuerdes y algo importante no la olvides porque te servir para acceder a la base de datos.
El usuario ser root, que es por defecto y tu password que acabas de escribir, eso lo usaras para abrir la base de datos, para eso es mejor guardarla antes que todo. Damos siguiente (Next) Por ultimo dejamos esas 2 opciones activadas para poner a correr MySQL y Apache.
12
En este punto si vas a tu navegador, puedes poner http://localhost y debe mostrarse tal como muestra la imagen. Salvo las versiones que el tuyo puede ser mas nuevo.
13
CREANDO PAGINAS WEB ESTATICAS CON HTML

QU ES EL HTML? HTML (HyperText Markup Language) es un lenguaje que se utiliza para la creacin de pginas web. Es muy fcil de usar y est basado en lo que se llaman etiquetas (o tags, en ingls). Las etiquetas definen la forma del documento HTML. Existe una organizacin llamada W3Consortium (www.w3.org que es la encargada de definir los estndares del HTML. Este estandar es el que indica cmo se debe construir un documento HTML, qu etiquetas se pueden usar y cmo. Han publicado varios estndares, el ltimo el 4.01. Anteriormente estuvieron el 4.0, 3.2, 3.0 y 2.0). Cuando ya se tiene un estndar hay que crear un navegador (como el netscape, internet explorer, amaya, lynx...) que permita ver los documentos que lo cumplen. Por ejemplo un navegador antiguo (digamos Internet Explorer 3.0) no puede ver correctamente documentos HTML que sigan el estndar 4.0. El problema del html es que cada compaa ha implantado cada estndar como ha querido, creando nuevas etiquetas que no venan en el original o modificando su comportamiento. El resultado de esto ha sido malo para el HTML. Y tambin para los webmasters, no es fcil hacer una pgina que se vea igual en todos los navegadores. Por eso cuando se crea una pgina hay que probarla en al menos dos navegadores. No ha sido este el nico problema del HTML. Lo peor ha sido quizs su xito. Esto puede resultar extrao pero es cierto. El HTML ha tenido un tremendo xito, y la gente quera de l cada vez ms y ms. Se pretenda que el HTML hiciera de todo. CREANDO MI PRIMERA PAGINA A continuacin crearemos una pgina de ejemplo Abre tu editor de texto sea cual sea (notepad) Copia el siguiente cdigo. <html> <head> <title>Tu primera pgina</title> </head> <body> Hola, me llamo PON TU NOMBRE. </body> </html> Sustituye "PON TU NOMBRE" por tu nombre.
14 Guarda la pgina en tu directorio de pginas web. Ponle el nombre que quieras pero con extensin htm html (se recomienda esta ltima).
VER LA PGINA CREADA Ahora ya solo queda ver cmo ha quedado la pgina. Si usas windows entra en el directorio donde esta guardada y haz doble click en el documento html que acabas de crear. Se abrir tu navegador y mostrar tu pgina. Un poco sosa no? No te preocupes, ya vers cmo con muy poco esfuerzo consigues resultados mucho ms espectaculares. ESTRUCTURA DE UN DOCUMENTO HTML Vamos a ver cmo es la estructura de un documento html con el ejemplo anterior. Este ejemplo muesta la estructura bsica de un documento, todos los documentos html deben contenerlas: <html> <head> <title>Tu primera pgina</title> </head> <body> Hola, me llamo PON TU NOMBRE. </body> </html> La base del html son la Etiquetas, estas son las palabras que se encuentran encerradas entre los smbolos '<' y '>'. En el ejemplo usamos las etiquetas html, title, head y body. Las etiquetas definen un documento html. Cada una de ellas cumple una funcin determinada. La mayora de las etiquetas van por parejas (<html> y </html>, <head> y </head>...), una indica el principio y otra el final. En el ejemplo todas son de este tipo. Es conveniente poner las etiquetas siempre en minsculas. La etiqueta html Esta es la etiqueta que contiene a TODO el documento html. La etiqueta <html> indica el comienzo del documento y </html> el final. No debe haber etiquetas fuera de estas dos (excepto un par de excepciones que ya veremos).
15
head Esta etiqueta contiene la cabecera (o encabezamiento) del documento. Esta cabecera contiene entre otras cosas el ttulo de la pgina. La cabecera contiene informacin que no se muesta con la pgina (exceptuando el ttulo), es la informacin que usan los navegadores y buscadores de internet para mostrar o indexar las pginas. title El ttulo de la pgina. Este se muestra en la barra de tareas (en windows), no en la propia pgina. Tambin se muestra en la parte superior de la ventana del navegador. Si te fijas en el ejemplo el ttulo es "Tu primera pgina" que no aparece mas que en la barra de tareas y en la parte de arriba de tu navegador. Cuando alguien ponga un marcador (o bookmark, o favorito) a nuestra pgina el nombre con el que se guardar ser este ttulo. body Aqu es donde va el texto de la pgina, y las imgenes, y las tablas y todo lo que le pongamos. El contenido de body es lo que se muestra en el navegador. INTRODUCIR TEXTO Ya hemos visto en el ejemplo anterior cmo escribir texto en una pgina, basta con escribirlo dentro de las etiquetas <body>. Sin embargo el HTML tiene una peculiaridad, no muestra el texto tal y como lo escribimos. Para comprobarlo veamos un ejemplo: <html> <head> <title>Tu primera pgina</title> </head> <body> Hola, me llamo PON TU NOMBRE.
Esta es mi primera pgina web. HTML es una cosa muy fcil. </body> </html> Es lgico pensar que la pgina tendr este aspecto:
Hola, me llamo PON TU NOMBRE.
16
Esta es mi primera pgina web. HTML es muy fcil.
Sin embargo este es el aspecto real
Hola, me llamo PON TU NOMBRE.Esta es mi primera pgina web.HTML es muy fcil.
Saltos de lnea Como ves nos escribe todas las lneas seguidas, no pone saltos de lnea. Tenemos que ponerlos nosotros. La forma de saltar a la lnea siguiente es usando la etiqueta <br>. Esta es una de las pocas etiquetas que no tiene pareja, no existe una etiqueta </br>. <html> <head> <title>Tu primera pgina</title> </head> <body> Hola, me llamo PON TU NOMBRE.<br> Esta es mi primera pgina web.<br> HTML es una cosa muy fcil.<br> </body> </html> Comprueba cmo efectivamente ahora funciona Podemos poner todos los saltos que queramos entre lneas, cada <br> hace que saltemos a la lnea siguiente. Espacios Vamos a hacer una segunda prueba, creamos una pgina con un montn de espacios entre algunas palabras: <html> <head> <title>Tu primera pgina</title> </head> <body>
17 Hola, me llamo PON TU NOMBRE.<br> Esta es mi primera pgina web.<br> HTML es una cosa muy fcil.<br> </body> </html> Seguramente esperars que tenga este aspecto: Hola, me llamo PON TU NOMBRE. Esta es mi primera pgina web. HTML es una cosa muy fcil. Pero no es as, los espacios adicionales se eliminan y tan slo se deja un espacio entre dos palabras. Entonces cmo metemos espacios adicionales? Existen en HTML lo que se llaman cdigos, cada cdigo representa una letra o un carcter. Por ejemplo el cdigo del espacio en blanco es (Non Breaking SPace). Si escribimos obtendremos un espacio adicional: <html> <head> <title>Tu primera pgina</title> </head> <body> Hola, me llamo PON TU NOMBRE.<br> </body> </html>
Texto sin formatear Existe una forma de mostrar el texto con saltos de lnea y espacios sin tener que usar <br> y . Es el texto preformateado. Cuando ponemos texto en una pgina el navegador lo formatea, le quita los saltos de lnea y los espacios adicionales. Podemos indicarle que no haga esto usando las etiquetas <pre> y </pre>. Cuando rodeamos un texto con estas etiquetas queda preformateado, es decir, queda tal cual: <html> <head> <title>Tu primera pgina</title> </head> <body>
18
<pre> Hola, me llamo PON TU NOMBRE. Esta es mi primera pgina web. HTML es una cosa muy fcil. </pre> </body> </html> Este texto queda: Hola, me llamo PON TU NOMBRE. Esta es mi primera pgina web. HTML es una cosa muy fcil. Prrafos Una forma ms ordenada de introducir el texto es utilizando <p> y <p>. Todo lo que va entre estas dos etiquetas es un prrafo. Probablemente vers muchas pginas que utilizan slo la primera etiqueta (<p>), esto es vlido pero se recomienda usar ambas. La forma correcta de usar lo prrafos es colocando <p> al principio del prrafo y </p> al final.
ADORNANDO EL TEXTO Ahora que sabemos cmo se mete texto en la pgina vamos a darle algunos efectos interesantes como la negrita, cursiva, subrayado... Negrita Con las etiquetas <b> y </b> se consigue poner el texto en negrita (bold). Se recomienda no usar esta etiqueta con bloques de texto muy grandes porque puede dificultar su lectura. Este el el efecto que se consigue: <b>Negrita</b> -> Negrita Existe otra etiqueta <strong> que es similar y que veremos ms adelante. Cursiva Para mostrar un texto en cursiva: <i>Cursiva</i> -> Cursiva Subrayado Para tener un texto subrayado usamos la etiqueta <u> (underline):
19
<u>Subrayado</u> -> Subrayado Algunos navegadores no muestran esta etiqueta porque puede confundirse con los enlaces (que tambin aparecen subrayados). No se recomienda su uso, en su lugar es mejor usar <i>, o <em> o <cite>. Tachado Para el texto tachado se usa la etiqueta <strike> (strikeout): <strike>Tachado</strike> -> Tachado Puede no estar implementada en todos los navegadores. Teletipo Se puede mostrar el texto como si fuese escrito por una mquina de escribir usando la etiqueta <tt> (TeleType): Con esta etiqueta el texto no sale preformateado como con pre, se eliminan los espacios adicionales. Grande Con las etiquetas <big> y</big> el texto aparece con un tamao mayor al normal. <big>Grande</big> -> Grande Se pueden encadenar varios <big> pero no se asegura que el texto sea ms grande que uno solo.
Con un big -> Grande Con 3 big -> Grande Se puede usar tambin las etiquetas <font size="+1"> y </font>. Pequeo Es lo opuesto a la etiqueta big, con esta tenemos un texto ms pequeo de lo normal: <small>Pequeo</small> -> Pequeo Al igual que con big, se pueden encadenar varios small. Superndice Si usamos frmulas matemticas esta etiqueta es muy interesante. Muestra el texto ms elevado que lo normal y con letra ms pequea. No est implementado en todos los navegadores as que sera bueno asegurarse de que el texto se
20 entiende aunque no funcione la etiqueta. <sup>Superndice</sup> -> NormalSuperndice Subndice Similar a la anterior pero el texto aparece ms bajo de lo normal. <sub>Subndice</sub> -> NormalSubndice Centrado Esta etiqueta centra el texto y adems introduce un salto de lnea antes y despus. Se puede usar tambin <p align=center">. para centrar texto. Con <center>Centrado</center> se tiene: Centrado Lnea Horizontal Para dibujar una lnea horizontal usamos la etiqueta <hr>. Esta es otra de las etiquetas sin compaera. Con <hr> se tiene una lnea horizontal Esta etiqueta tiene una serie de opciones: ALIGN=left|right|center : Para poner la etiqueta a la izda, centrada o a la derecha. NOSHADE : Para dibujar la etiqueta sin sombra. SIZE=n : Especifica la altura (o grosor) de la etiqueta. WIDTH=n|p% : Especifica la anchura de la etiqueta en pixels (en puntos) o en tanto por ciento respecto a la anchura de la pantalla. Ejemplos: Con <hr noshade> Con <hr widht="30%"> Parpadeo Esta etiqueta produce un texto parpadeante. No est implementada en todos los navegadores (creo que slo est en el navigator). No se recomienda su uso, es MUY incmodo leer pginas con texto parpadeante. Si en tu navegador no funciona te puedes considerar afortunado: <blink>Parpadeo</blink> -> Parpadeo TITULOS Los ttulos son la forma de tener ordenado el documento. Algunos buscadores hacen un resumen de nuestro documento utilizando los ttulos. Tambin puede ser que den ms importancia a las palabras que aparecen en nuestros ttulos.
21
Estos ttulos s aparecen en la pgina, son diferentes de <title>. No es obligatorio poner estos tipos de ttulos en una pgina. Es recomendable si tu pgina contiene un curso con captulos, apartados y subapartados. Tambin es recomendable si son instrucciones, un informe, un catlogo,... Los ttulos se indican con las etiquetas h1,h2,h3,h4,h5,h6 (la h viene de heading, encabezamiento) y van de mayor nivel (<h1>) a menor nivel (<h6>). <h1> El ttulo de mayor nivel se indica con las etiquetas <h1> y </h1>. Conviene respetar el orden de los ttulos, poner primero los de nivel 1, luego de nivel 2, nivel 3,... Los ttulos normalmente se muestran con un tamao de letra mayor que el normal aunque no tiene por qu ser as. Esta y las siguientes etiquetas de ttulo tienen unas opcines que indican cmo se debe alinear el texto: ALIGN= left | center | right. Si no se indica nada se coloca a la izquierda. Si queremos alinear el texto en el centro: <h1 align=center>Este es mi ttulo</h1>
As tambin para h2,h3h6 LOS ENLACES Los enlaces (o hiperenlaces) nos permiten saltar de una pgina a otra con un simple click. Tambin nos permiten acceder a ficheros e imgenes. En general un enlace tiene la forma: <a href="direccin_destino">descripcin_del_destino</a> En direccin_destino debemos poner la direccin de la pgina, fichero, o imagen a la que queremos saltar. La descripcin_del_destino debe ser una pequea descripcin del sitio o la pgina a la que nos conduce el enlace.
Enlaces a otras pginas Si queremos poner un enlace a una pgina fuera de nuestro sitio tenemos que indicar su direccin completa (incluyendo el http://). Si quisiramos por ejemplo enlazar con la pgina del Web Consortium cuya direccin es http://www.w3.org
22 deberamos hacer: <a href="http://www.w3.org">Web Consortium</a> Y este enlace se ver como: Web Consortium. Si pinchas sobre este enlace irs a su pgina web.
TRABAJO CON IMAGENES Cuidado con las imgenes Las imgenes pueden dar colorido a nuestras pginas y hacerlas ms atractivas. Las imgenes pueden convertir nuestra pgina en una maravilla, pero tambin puede convertirla en una pesadilla (toma pareado). Las imgenes tienen unas cuantas pegas: Hacen muy lenta la carga de las pginas. Por muy artstica que nos quede la pgina poca gente esperar a que se cargue un grfico grande. Si la gente espera mucho se aburre mucho y se va a otro sitio. Pueden recargar la pgina y distraer al usuario del verdadero contenido. Si estn mal elegidas pueden complicar la lectura o hacerla imposible. No debemos basar nuestra pgina en las imgenes; hay gente que tiene navegador de texto (sin imgenes) o el navegador configurado para no ver imgenes (as se cargan las pginas ms rpido).
Una pista: una pgina con muchos grficos es muy probable que sea pobre de contenidos (a no ser que la pgina sea una galera de imgenes). Al principio a todos nos gusta tener una pgina con muchos grficos y colores para hacerla ms vistosa, pero hay que contenerse. Piensa en los sufridos internautas que tienen una conexin lenta. NOTA: Cuando un navegador carga una imagen la guarda en la cach (en el disco para entendernos), de tal forma que si pasamos a otra pgina en nuestro sitio que use la misma imagen no necesita cargarla de nuevo. Una Imagen como fondo Un primer efecto bastante bueno lo podemos conseguir poniendo una imagen como fondo. Es muy fcil, basta aadir un par de cosas a la etiqueta body: <body background="nombre_de_la_imagen"> Lo que hace el navegador es ir colocando la imagen indicada hasta llenar el fondo.
23 Sin embargo tienes que tener cuidado con el fondo, no escojas una imagen muy grande. Ten cuidado que contraste bien con el texto para que se pueda leer con comodidad. Por ejemplo mira esta imagen:
"es un precioso muro con esos colores, esa definicin, mmm, me gusta, voy a ponerla como fondo" , ahora al colocarla coloca texto , veras que no se puede leer. Mostrar imgenes Para insertar una imagen en nuestra pgina debemos hacer: <img src="nombre_de_la_imagen"> src es la abreviatura de SouRCe. La etiqueta img no tiene pareja, no existe una etiqueta <img>. Esta etiqueta tiene varias opciones: ALT = "descripcin" ALIGN = left / right / top / middle / bottom HEIGHT / WIDTH BORDER HSPACE / VSPACE
ALT La descripcin que se mete en alt es la que se muestra en caso que de la imagen no se pueda cargar por el motivo que sea. Esto es conveniente para que la gente que tiene un navegador de texto o las imgenes desactivadas no se pierda en nuestra pgina. Esta descripcin tambin se muestra si ponemos el ratn sobre la imagen y lo dejamos quieto unos segundos. El siguiente ejemplo muestra una imagen y al poner el ratn encima muestra el mensaje "Grfico que representa un muro": <center><IMG SRC="fondo-piedra.gif" width="96" height="96" ALT="Grfico que representa un muro"></center> ALIGN Con esta etiqueta podemos alinear el texto con respecto a la imagen. Con unos ejemplos es como mejor se explica: <img img="fondo-piedra.gif" align=top> Este texto va arriba Este texto va arriba <img src="fondo-piedra.gif" align=middle> Este texto va en medio Este texto va en medio
24 <img src="fondo-piedra.gif" align=bottom> Este texto va abajo Este texto va abajo Existen otras dos posibilidades (left y right): <IMG SRC="fondo-piedra.gif" align=right width="96" height="96" ALT="Grfico que representa un muro"> Bla, bla, bla, ... <IMG SRC="fondo-piedra.gif" align=left width="96" height="96" ALT="Grfico que representa un muro"> Bla, bla, bla, ... HEIGHT / WIDTH Estas opciones definen el tamao (heigth=altura, width=anchura) con el que se mostrar la imagen. Si no especificamos nada la imagen se muestra con su tamao real. La imagen que venimos usando (el muro) tiene unas dimensiones de 96x96. Si cambiamos estas dimensiones, por ejemplo a 96x48 la imagen quedara as: <IMG SRC="fondo-piedra.gif" width="96" height="48" ALT="Imagen reducida"> Pero tambin podemos agrandarla (196x98): <IMG SRC="fondo-piedra.gif" width="192" height="96" ALT="Imagen reducida"> NOTA: Es importante poner las dimensiones siempre, aunque sean las originales, para facilitar al navegador la representacin de la imagen. BORDER Con esta opcin podemos poner un borde a la imagen. <IMG SRC="puppy.jpg" width="192" height="96" ALT="Imagen ampliada" border=0> <IMG SRC="puppy.jpg" width="192" height="96" ALT="Imagen ampliada" border=6> HSPACE / VSPACE Con estas opciones podemos especificar cuntos pixels queremos de separacin entre la imagen y el resto del documento. Comprueba en esta tabla la diferencia entre usar vspace=20 y no usarlo. Si lo usamos el texto queda separado por arriba y por abajo 20 pixels: <IMG SRC="puppy.jpg"> <IMG SRC="puppy.jpg" vspace=20> Usar imgenes como enlaces Ahora vamos a ver cmo se usan las imgenes para que sirvan como enlaces grficos.
25 Para poner una imagen como enlace debemos meterla dentro de una etiqueta <a href>: <A HREF="http://www.linux.org/"><IMG SRC="linux-logo.gif" width="92" height="39" ALT="Tux, el pingino de Linux"></A>
y ya tenemos nuestro enlace grfico. Fjate que aparece un borde alrededor de la imagen. Este borde indica que se trata de un enlace, pero si quieres quitarlo basta con usar la opcin border=0. TIPOS DE LETRA La etiqueta BASEFONT La etiqueta BASEFONT (fuente base) nos sirve para controlar el tamao de letra que queremos para nuestro documento. Todo el documento utilizar este tamao de letra. Si queremos un tamao mayor o menor debemos usar <big>,<small> o la etiqueta <font> (ver ms abajo). El formato de esta etiqueta es: <basefont size=tamao> No necesita una etiqueta final, no existe <basefont>. El tamao ms pequeo es 1 y el mayor 7. Por ejemplo: <basefont size=7>
Algunos navegadores tambin admiten la opcin face dentro de basefont. Con esta opcin podemos especificar el tipo de letra que queremos. Para poner una pgina con tipo de letra Arial: <basefont face="Arial"> Atencin: Esta opcin no la admiten todos los navegadores. Si usamos una fuente que el usuario no tiene instalada en su ordenador, se ver con la fuente por defecto, as que no conviene usar tipos de letra extraos. Para asegurarnos de que la pgina se vea como queremos podemos especificar ms de un tipo de letra (separadas por comas). Si la primera no est en el ordenador se pasa a la segunda: <basefont face="Arial, helvetica, comic sans ms">
26
La etiqueta FONT Con la etiqueta font (fuente) podemos controlar la apariencia del texto, tanto en tamao como en color. Esta etiqueta necesita una de apertura (<font>) y otra de cierre (</font>), y slo afecta al texto que encierra. Las opciones de FONT son: size=tamao color=#color face="tipo de letra" size Con FONT podemos especificar el tamao de la letra al igual que hacamos con BASEFONT (1 es el tamao menor y 7 el mayor): <font size=7>Este texto tiene tamao 7</font> Tambin podemos dar valores relativos al tamao base usando los smbolos + y -. Cada unidad que sumemos har la letra un paso ms grande (algo equivalente a <big> y <small>). Se usa de la siguiente manera: <font size="+2"> Esto har que se muestre la letra ms grande que el resto. color Con el atributo color podemos especificar el color con el que se mostrar el texto (creo que ya te lo imaginabas). Existen dos formas de indicar el color: Usando la forma RGB (red, green, blue): color=#RRGGBB. RR indica la intensidad del rojo (en hexadecimal), GG la del verde y BB la del azul. El color resultante depende de la cantidad de cada uno. Consulta la tabla de abajo para ver algunos ejemplos. Usando el nombre del color: existen una serie de colores preestablecidos. No todos los navegadores los entienden, as que es mejor usar la forma anterior. Los colores se especifican de la siguiente forma: Para la forma RGB: <font color="#008000">Texto</font> Usando nombres: <font color=green>Texto</font> Como referencia aqu queda una tabla con algunos colores (se debe usar el nombre en ingls no en castellano): Color Muestra Valor RGB Nombre Negro Muestra #000000 black Verde Muestra #008000 green
27 Plata Muestra #C0C0C0 silver Lima Muestra #00FF00 lime Gris Muestra #808080 gray Aceituna Muestra #808000 olive Blanco Muestra #FFFFFF white Amarillo Muestra #FFFF00 yellow Castao Muestra #800000 maroon Azul Marino Muestra #000080 navy Rojo Muestra #FF0000 red Azul Muestra #0000FF blue Morado Muestra #800080 purple Teal Muestra #008080 teal Fucsia Muestra #FF00FF fuchsia Agua Muestra #00FFFF aqua
face La etiqueta face sirve para cambiar el tipo de letra que estamos usando. Se usa de la siguiente forma: <font face="nombre del tipo de letra"> Esta etiqueta tiene dos peligros: no la admiten todos los navegadores, si el usuario no tiene instalada la fuente en su ordenador no funciona. COLORES Color del texto Existe otra forma para cambiar el color por defecto del documento, con unas opciones de la etiqueta BODY (igual que hacamos con la opcin background). Con estas opciones podemos cambiar el color del texto, el del fondo y el de los enlaces. Las posibles opciones son: text bgcolor link vlink alink Para cambiar el color del texto debemos escoger la primera opcin; text. Se usa igual que la opcin color de la etiqueta font (se puede especificar el color por su nombre o por su cdigo hexadecimal, ver captulo anterior).
28 Si ponemos el sisguiente cdigo tendremos el texto de nuestra pgina de color azul: <body text=blue> Color de fondo Tambin podemos cambiar el color de fondo de nuestro documento simplemente usando la opcin bgcolor (igual que text. Para tener un fondo de color azul y texto blanco: <body text=white bgcolor=blue> Color de los enlaces Quiz te hayas fijado que cuando pones un enlace en tu pgina se muestra de color azul. Si el enlace ya ha sido visitado aparece con otro azul ms claro (se usan colores diferentes para que el usuario sepa si ya ha visitado la pgina o no). Esto lo podemos cambiar a nuestro gusto. Enlaces no visitados Para cambiar el color de los enlaces a pginas que an no han sido visitadas se usa la opcin link. Para poner estos enlaces de color amarillo: <body link=yellow> Enlaces visitados El color de los enlaces a pginas ya visitadas se establece con la opcin vlink (Visited Link). Si queremos que sea verde: <body vlink=green> Enlaces activos En el momento que pinchamos sobre un enlace este cambia de color. Para especificar este color se usa alink (Active Link): <body alink=red> NOTA: Algunos navegadores permiten al usuario establecer los colores con los que quiere visualizar las pginas. Si tiene esta opcin activada no obedecer a lo que nosotros especifiquemos. EMAIL DE CONTACTO Cuando mantenemos una pgina web es muy importante indicar a nuestros lectores la forma de ponerse en contacto con nosotros. De esta forma sabremos que es lo que la gente opina de nuestra pgina, lo que hacemos mal y lo que hacemos bien. La mejor forma de contacto es el correo electrnico, pero creo que no tengo que
29 convencer a nadie de eso. Poner nuestra direccin de correo en nuestra pgina es muy sencillo, basta con insertar el siguiente cdigo: <a href="mailto:direccin_correo_electrnico">Nombre</a> Donde pone Nombre podemos poner nuestro nombre, direccin de correo o lo que queramos. Funciona como un enlace normal, la diferencia es que si alguien pincha sobre ese enlace en vez de ir a otra pgina se abrir el programa de correo electrnico con nuestra direccin. Pincha aqu para comprobarlo: Escrbeme. (No se debe olvidar la palabra mailto:) Al abrirse el programa de correo electrnico aparece un nuevo mensaje con nuestra direccin. El usuario tan slo tiene que poner el asunto, escribir el mensaje y enviarlo. Podemos tambin especificar nosotros el asunto del mensaje (esto es interesante porque mucha gente olvida poner el asunto) utilizando el siguiente formato: <a href="mailto:gorkau@geocities.com?subject=consulta_curso_html">Nombre</a> TRABAJANDO CON LISTAS Listas numeradas Con html podemos crear listas numeradas de forma sencilla. El comienzo de la lista se marca con <ol> y el final con </ol> (ol=ordered list). Cada elemento de la lista debe ir precedido por <li>. Por ejemplo vamos a hacer una ficticia lista de las herramientas:
<ol> <li>martillos <li>clavos <li>destornilladores <li>tornillos </ol> La etiqueta OL tiene varias opciones. La primera, type, sirve para especificar el tipo de numeracin que queremos: 1 - Nmeros (1,2,3,4,...) A - Letras maysculas (A, B, C, D,...) a - Letras minsculas (a, b, c, d,...) I - Nmeros romanos en maysculas (I, II, III, IV,...) i - Nmeros romanos en minsculas (i, ii, iii, iv,...) Se puede especificar tambin el nmero en el que queremos que empiece la lista con la opcin start=n, aunque no lo admiten todos los navegadores.
30
Sin numerar Se pueden tambin utilizar listas que usen un pequeo smbolo al comienzo de la lnea en vez de un nmero. Estas lneas se delimitan por <ul> y </ul>. La lista de antes queda as con ul en vez de ol: El smbolo que aparece al principio se puede cambiar con type. Las posibles opciones son disc (disco) square (cuadrado) y circle (crculo). Listas de Definiciones Existe otro tipo de lista que sirve para definir trminos, como por ejemplo un diccionario. La lista se delimita con <dl> y </dl>. Cada elemento consta de dos partes, el trmino a definir <dt> (definition term) y la definicin del trmino <dd> (definition). Como ejemplo el siguiente cdigo servira para definir los trminos "ordenador" y "televisin": <dl> <dt>Ordenador <dd>Caja de alto precio que rara vez se usa para otra cosa que no sea jugar. <dt>Televisin <dd>Reproductor de imgenes en el que rara vez se ven cosas inteligentes. </dl>
TRABAJANDO CON TABLAS Definicin de una tabla Las tablas son muy tiles para mostrar la informacin con un formato flexible y ms elegante que una simple lista o que con texto formateado. Se usan mucho para dar formato a la pgina; es lo que usan las pginas que muestran la informacin en varias columnas. Por supuesto esto no se recomienda puesto que en un navegador que no admita tablas el diseo se ir a la porra. A pesar de esto cada vez se usan ms para este propsito. Para montar una tabla en nuestro documento lo primero es usar las etiquetas <table> y </table>. Esta etiqueta tiene varios atributos que analizaremos en el siguiente captulo.
31 Dentro de la tabla slo podemos meter el ttulo de la tabla (caption) o filas (tr), no puede haber otros elementos dentro de la tabla. Donde s podemos meter otros elementos es dentro de las filas (encabezamientos celdas). Para mostrarlo grficamente: TABLE +----Caption +----TR +----TH +----TD Veamos una tabla ejemplo. El siguiente cdigo: <table border=1> <caption>Tabla Ejemplo</caption> <tr> <th>Columna 1 </th> <th>Columna 2 </th> <tr> <td>10 </td> <td>20 </td> </tr> </table> produce la siguiente tabla: Tabla Ejemplo Columna 1 Columna 2 10 20 Ahora vamos a analizar los elementos uno a uno:
Caption Con este podemos ponerle un ttulo a la tabla. Este ttulo puede ir encima o debajo de la tabla. Para indicar dnde lo queremos usamos la opcin align y sus valores posible son top o bottom. Si no especificamos nada se coloca encima de la tabla. El ejemplo anterior usando <caption align=bottom>: Columna 1 Columna 2 10 20 Tabla Ejemplo
32 No es necesario poner un ttulo a la tabla, pero si se pone debe ir justo debajo de la etiqueta <table> y slo puede haber uno. TR (table row) Despus de colocar el ttulo colocamos las lneas. <tr> indica el comienzo de una lnea y </tr> el final. Dentro de una lnea slo podemos meter elementos td o tr. Esta etiqueta tiene unas opciones para alinear la etiquetas que contiene horizontalmente y verticalmente. Esto lo veremos en el siguiente captulo. TH (Table header) Con las etiquetas <th> y </th> podemos colocar encabezamientos a las columnas. Estos encabezamientos en algunos navegadores aparecen en negrita. Esta etiqueta tiene las misma opciones que la etiqueta td. Esta etiqute se suele usar poco, yo apenas la he visto en ninguna pgina. TD (table data) Esta etiqueta puede contener cualquier cosa en su interior, desde lista hasta otras tablas. Debe ir dentro del par de etiquetas <tr> </tr> Opciones de table Border (Ancho de los bordes) Una tabla puede ir con un borde que lo enmarque. El grosor de este borde se establece con la opcin Border: Usando Border=1 Tabla con borde Usa border=1 Usando border=5 Tabla con borde Usa border=5 Si hubisemos cogido el valor border=0 no se mostrara el marco (en algunos navegadores antiguos puede que s). Si slo se poner border sin especificar ningn valor aparece un borde de tamao 1. Width Si te has fijado, hasta ahora, la tabla tiene la anchura adecuada para acomodar el texto que contiene. Con el atributo width podemos especificar el ancho de la tabla que deseemos. El ancho se puede establecer de dos formas: en pixels o en tanto por ciento:
33 PIXEL: Si te acercas a la pantalla podrs apreciar que est compuesta de pequeos puntos, cada uno de esos pequeos puntos se llama pixel. Si especificamos el ancho en pixels la anchura de la tabla ser siempre la misma. Por ejemplo si usamos width=800 esto significa que la tabla debe tener una anchura de 800 puntos. Todos los navegadores intentarn dibujar una tabla de 800 puntos. Pero qu sucede si uno tiene la pantalla de 640 puntos? la tabla no le cabr y aparecer una barra de desplazamiento en la parte inferior de la ventana. Esto puede hacer la visita a la pgina una experiencia muy incmoda. Comprueba en este ejemplo la incomodidad de una tabla de 2000 pixels de ancho (no creo que nadie tenga por ahora una configuracin de pantalla tan grande): ejemplo12.html. Molesto verdad? Quiero destacar que no todo el mundo tiene en su ordenador la ltima tarjeta grfica con una resolucin bestial; hay mucha gente con una modesta tarjeta grfica de 640x480 y se les debe tener en cuenta. Tengo entendido que hoy en dia la configuracin ms comn son 800x600. Por supuesto podramos hacer tablas de menos de 640 pixels para que todos la vieran igual. Una forma mejor de indicar la anchura de tabla deseada es usar tantos por ciento: width="50%" (con comillas). El 50% hace que la tabla ocupe el 50% del ancho de la pgina. De esta forma no importa la configuracin de pantalla que se tenga, a todos les ocupar la tabla la mitad de la pantalla. Sin especificar anchura: <table border=5> Tabla con borde Usa border=5 Tabla que ocupa la mitad de la pantalla<table border=5 width="50%"> Tabla con borde Usa border=5
Align Con esta opcin podemos alinear la tabla a la izquierda (left, es la opcin por defecto), centro (center), o a la derecha (right). En algunas viejas versiones de Netscape esta opcin no funcionaba. La tabla queda centrada pero no su contenido: Tabla Centrada Los elementos de dentro no estn centrados Y su cdigo es: <table align=center border=1>
34 <tr> <td>Tabla Centrada</td> </tr> <tr> <td>Los elementos de dentro no estn centrados</td> </tr> </table> Cellspacing Si queremos separar las celdas unas de otras podemos usar cellspacing. Con cellspacing podemos especificar cuntos pixels queremos que se separen. Para especificar esta distancia: <table align=center border=1 cellspacing=10> Las opciones de <td> Width (establece el ancho) Con width podemos indicar al navegador la anchura que queremos para una celda en concreto. La anchura podemos establecerla en pixels o en tantos por ciento. Un ejemplo en pixels: <table border=1> <tr> <td width=100>Ancho = 100 </td> </tr> </table> Acho = 100 Y el mismo ejemplo en tanto por ciento: <table border=1> <tr> <td width="50%">Acho = 50% del ancho de la tabla </td> </tr> </table> Esto del % no funciona igual en todos los navegadores y los antiguos no lo admiten. As que si lo usamos debemos comprobar que se ve bien en varios navegadores. Por otra parte es aconsejable poner la misma anchura para todas las celdas de una misma columna. Si ponemos distintas anchuras pueden tenerse resultados extraos, o en el mejor de los casos se adaptan todas a la de mayor anchura. Veamos un ejemplo:
35 <table border=1><tr> <td width=100>Ancho = 100 </td> </tr> <tr> <td width=130>Ancho = 130 </td> <tr> <td width=200>Ancho = 200 </td> </tr></table> Y ahora comprueba cmo se ve en tu navegador: Ancho = 100 Ancho = 130 Ancho = 200 Para comparar aqu tienes una celca de anchura=100: Acho = 100 En mi navegador (Netscape 4.7) todas las celdas toman el ancho de la ms grande (la de 200 pixels). Height (altura) Con height podemos especificar la altura en pixels de una celda. <table border=1> <tr> <td heigth=100>Alto = 100</td> </tr> </table>
Alto = 100
Al igual que con width no conviene poner distintas alturas para celdas de la misma fila. Align Con align le decimos al navegador cmo queremos colocar el contenido de la celda: a la izquierda (left, es la opcin predeterminada), a la derecha (right) o centrada (center):
36 <table border=1 width="70%" align=center> <tr> <td align=right>Texto a la dcha </td> </tr> </table> Texto a la dcha Valign Con valign controlamos la alineacin vertical dentro de las celdas. Las posibles opciones son: top, middle, bottom. Veamos en un ejemplo el comportamiento normal si tenemos en una fila una celda ms alta que las otras: Esta primera celda es ms larga que la segunda. Por eso la altura de Esta la fila se Efectivamente tambin acomoda a sta. esta lnea es es ms La siguiente ms corta. corta. celda aparece centrada. Este es el comportamiento normal.
Si usamos top en una celda de las que son ms cortas el texto quedar arriba: <TABLE align=center border=1 width="40%"> <TR> <td> Esta primera celda es ...(bla,bla) </td> <td valign=top> Efectivamente esta lnea es ms corta. </td> <td> Esta tambin es ms corta. </td> </TR> </TABLE>
37
Esta primera celda es ms larga que la segunda. Por eso la altura de la fila se acomoda a sta. La siguiente celda aparece centrada. Este es el comportamiento normal.
Ahora esta queda arriba. Esta tambin es ms corta.
Con bottom se produce el efecto contrario, la celda queda alineada abajo: Esta primera celda es ms larga que la segunda. Por eso la altura de la fila se acomoda a sta. La siguiente celda aparece centrada. Este es el comportamiento normal.
Esta tambin es ms corta. Ahora esta queda abajo.
Y con middle quedan centradas verticalmente.
Tanto el atributo align como valign se pueden especificar en tr en vez de en td y se aplicar a toda la fila: <TABLE align=center border=1 width="40%"> <TR valign=bottom> <TD> Esta primera celda es... (bla,bla) </TD> <TD> Ahora esta queda abajo. </TD>
38 <TD> Esta tambin es ms corta. </TD> </TR> </TABLE> Al poner valign=bottom en tr todas las celdas de la fila quedan alineadas abajo: Esta primera celda es ms larga que la segunda. Por eso la altura de la fila se acomoda a sta. La siguiente celda aparece centrada. Este es el comportamiento normal. Colspan Cuando hacemos una tabla como hemos visto hasta ahora tenemos que todas las celdas en una misma columna ocupan el mismo espacio. Pero existe una forma de hacer que una celda ocupe ms de una columna: usando colspan. Aqu tenemos una tabla normal: <table border=1 width="60%" align=center> <tr align=center> <td>Celda 1,1</td>...<td>Celda 1,4</td> </tr> <tr align=center> <td>Celda 2,1 </td> ... <td>Celda 2,4 </td> </tr> </table>
Ahora esta queda abajo.
Esta tambin es ms corta.
que se muestra as: Celda 1,1 Celda 2,1 Celda 1,2 Celda 2,2 Celda 1,3 Celda 2,3 Celda 1,4 Celda 2,4
39 Pero ahora supongamos que queremos que la celda 1,1 ocupe el sitio de la 1,1 y la 1,2, es decir que quede as: Celda 1,1 Celda 2,1 Celda 2,2 Celda 1,3 Celda 2,3 Celda 1,4 Celda 2,4
Esto se consigue con el siguiente cdigo usando colspan: <table border=1 width="60%" align=center> <tr align=center> <td colspan=2>Celda 1,1 </td> <td>Celda 1,3 </td> <td>Celda 1,4 </td> </tr> <tr align=center> <td>Celda 2,1 </td> <td>Celda 2,2 </td> <td>Celda 2,3 </td> <td>Celda 2,4 </td> </tr> </table> Fjate que como la celda 1,1 ocupa dos columnas debemos quitar alguna, en este caso hemos quitado la 1,2. Recuerda que todas las filas deben tener el mismo nmero de columnas. Y las celdas que ocupan dos columnas cuentan como dos. Si no tenemos cuidado con esto podemos tener resultados extraos como ste: Celda 1,1 Celda 2,1 Rowspan Con rowspan podemos hacer lo mismo que con colspan pero con filas. Podemos hacer que una celda ocupe dos o ms filas: Celda 1,1 Celda 1,2 Celda 2,2 Celda 1,3 Celda 2,3 Celda 1,4 Celda 2,4 Celda 2,2 Celda 1,2 Celda 2,3 Celda 1,3 Celda 2,4 Celda 1,4
Y esto se consigue usando rowspan as: <table border=1 width="60%" align=center> <tr align=center>
40 <td rowspan=2>Celda 1,1 </td> <td>Celda 1,2 </td> <td>Celda 1,3 </td> <td>Celda 1,4 </td> </tr> <tr align=center> <td>Celda 2,2 </td> <td>Celda 2,3 </td> <td>Celda 2,4 </td> </tr> </table> Y de nuevo tenemos que tener cuidado con el nmero de celdas que ponemos. En este caso debamos eliminar la 2,1 por que si no podramos tener algo como: Celda 1,1 Celda 1,2 Celda 2,1 Celda 1,3 Celda 2,2 Celda 1,4 Celda 2,3 Celda 2,4
Nowrap Cuando tenemos un texto demasiado largo ste se corta y se acomoda en varias lneas. Sin embago, si usamos el atributo nowrap el texto se mostrar todo en una lnea: Tabla sin usar nowrap Esta es una celda larga y el Esta Esta texto celda celda no aparece en tampoco usa dos lneas. usa nowrap. Aqu no nowrap. usamos nowrap. Tabla que usa nowrap Esta Esta es una celda larga y el texto aparece todo en la misma lnea. Usamos nowrap. celda no usa
Esta celda tampoco
41 nowrap. usa nowrap. La forma de usar nowrap es poner en la celda deseada: <TD nowrap>
Formularios HTML (Articulos) | 12/11/03 | Versiones Un formulario es un entorno de interaccion con el visitante de una pgina web, en su interior encontramos un seguido de campos de formulario editables por el usuario, que le permiten enviar informacion a nuestro servidor donde la podremos tratar por ejemplo con PHP. El formulario engloba todos los campos de formulario que encontramos entre las etiquetas de inicio y final de formulario, <form> y </form> respectivamente: Campo de texto - El usuario puede insertar un texto de una linea Area de texto - El usuario puede insertar un texto de tantas lineas cmo quiera Casilla de verificacion - El usuario seleccionar o no una opcion Boton de opcin - El usuario puede seleccionar una opcion de una lista Campo desplegable - El usuario puede escoger una o mas opciones de la lista Campo de archivo - El usuario puede enviar un archivo al servidor ... Asimismo y para configurar dicho formulario, en la etiqueta de inicio de formulario podemos aadir ciertos atributos cmo por ejemplo: action - Define la direccion del programa que tratar los datos enviados, esta ser asimismo la direccion que ver el usuario una vez enviados los datos method - Define la manera en que sn enviados los datos del formulario, pudiendo ser GET ( Datos visibles en la barra de direccion ) o POST. enctype - Define como encriptar los datos del formulario, no es frecuente usarlo. Veamos un ejemplo de formulario con unos campos variados en su interior: <form method="POST" action="index.php"> Nombre<br> <input type="text" name="T1" size="20"> <br><br> Texto<br> <textarea rows="2" name="S1" cols="20"></textarea> <br><br> <input type="submit" value="Enviar" name="B1">
42 <input type="reset" value="Restablecer" name="B2"> </form>
Este formulario contiene un campo de texto, uno de texto multilinea, un boton enviar y uno reestablecer.
43
APRENDIENDO PHP
INTRODUCCION A PHP QUE ES PHP? PHP es un lenguaje de script del lado del servidor. Los scripts PHP estn incrustados en los documentos HTML y el servidor los interpreta y ejecuta antes de servir las pginas al cliente El cliente no ve el cdigo PHP sino los resultados que produce Cmo funciona PHP? A diferencia de Java o JavaScript que se ejecutan en el navegador, PHP se ejecuta en el servidor, por eso nos permite acceder a los recursos que tenga el servidor como por ejemplo podra ser una base de datos. El programa PHP es ejecutado en el servidor y el resultado enviado al navegador. El resultado es normalmente una pgina HTML.
MI PRIMER SCRIPT Vamos a crear un script sencillo para entender como funciona php <HTML> <HEAD> <TITLE>Mi primer programa en PHP</TITLE> </HEAD> <BODY> <?php echo (<P>Hola mundo</P>); ?>
44 </BODY> </HTML> Parece una pagina html comun pero lo que se encuentra dentro de los smbolos <?php y ?> es codigo php que el servidor interpretara para mostrar las etiquetas correspondiente
CONOCIENDO LA SINTAXIS DE PHP Ahora aprenderemos rpidamente la sintaxis de este lenguaje, es decir como se compone su lenguaje. VARIABLES: Las variables son espacios de memoria que sirven para almacenar datos que pueden variar durante el progreso del programa, en PHP deben estar precedidas por signo dlar ($), y le asignamos contenido con el signo igual (=). PHP distingue entre maysculas y minsculas, por lo que no es lo mismo $myvar que $Myvar, stas son dos variables totalmente distintas. <html> <body> <?php $myvar = "SEVILLA"; $Myvar = "MADRID"; //Esto imprimir SEVILLA echo($myvar.<br>); //Esto imprimir MADRID echo($Myvar.<br>); ?> </body> </html> Como ven se ha utilizado dos formas de escribir echo, en maysculas y en minsculas, para indicar que PHP no las distingue a la hora de usar funciones o sentencias del lenguaje. CONSTANTES: Las constantes son similares a las variables, con la salvedad de que no llevan el signo dlar delante, y slo la podemos asignar una vez. Para definir una constantes usaremos la funcin define como sigue: <html> <body> <?php define ("CONSTANTE", "Hola Mundo");
45 printf (CONSTANTE); ?> </body> </html>
OPERADORES: ARITMTICOS: $a + $b Suma $a - $b Resta $a * $b Multiplicacin $a / $b &ss=codigoenlinea>$a / $b Divisin $a % $b Resto de la divisin de $a por $b $a++ Incrementa en 1 a $a $a-- Resta 1 a $a
CONCATENADORES: La concatenacin de cadenas se maneja con el punto. $a = "Hola"; $b = $a . "Mundo"; // Ahora $b contiene "Hola Mundo" En este punto hay que hacer una distincin, la interpretacin que hace PHP de las simples y dobles comillas. En el segundo caso PHP interpretar el contenido de la cadena. $a = "Mundo"; echo = 'Hola $a'; //Esto escribir "Hola $a" echo = "Hola $a"; //Esto escribir "Hola Mundo&q; //Esto escribir "Hola Mundo"
COMPARADORES: $a $a $a $a $a $a < $b $a menor que $b > $b $a mayor que $b <= $b $a menor o igual que $b >= $b $a mayor o igual que $b == $b $a igual que $b != $b $a distinto que $b
46 LOGICOS: $a AND $b Verdadero si ambos son verdadero $a && $b Verdadero si ambos son verdadero $a OR $b Verdadero si alguno de los dos es verdadero $a !! $b Verdadero si alguno de los dos es verdadero $a XOR $b Verdadero si slo uno de los dos es verdadero<BP; de verdadero !$a Verdadero si $a es falso, y recprocamente
DE ASIGNACION: $a $a $a $a $a $a = $b Asigna a $a el contenido de $b += $b Le suma a $b a $a -= $b Le resta a $b a $a *= $b Multiplica $a por $b y lo asigna a $a /= $b Divide $a por $b y lo asigna a $a .= $b Aade la cadena $b a la cadena $a
SENTENCIAS CONDICIONALES: Las sentencias de control permiten ejecutar bloque de cdigos dependiendo de unas condiciones. Para PHP el 0 es equivalente a Falso y cualquier otro nmero es Verdadero. IF...ELSE La sentencia IF...ELSE permite ejecutar un bloque de instrucciones si la condicin es Verdadera y otro bloque de instrucciones si sta es Falsa. Es importante tener en cuenta q instrucciones si sta es Falsa. Es importante tener en cuenta que la condicin que evaluemos ha de estar encerrada entre parntesis (esto es aplicable a todas la sentencias de control). if (condicin) { Este bloque se ejecuta si la condicin es VERDADERA } else { Este bloque se ejecuta si la condicin es FALSA } Existe una forma sencilla de usar la sentencia IF cuando no tenemos que usar el ELSE y solo tenemos que ejecutar una lnea de cdigo.
47 if ($a > 4) echo "$a es mayor que 4"; IF...ELSEIF...ELSE La sentencia IF...ELSEIF...ELSE permite ejecuta varias condiciones en cascada. Para este caso veremos un ejemplo, en el que utilizaremos los operadores lgicos. <?php if ($nombre == ""){ echo "T no tienes nombre"; } elseif (($nombre=="eva") OR ($nombre=="Eva")) { echo " echo "Tu nombre es EVA";< } else { echo "Tu nombre es " . $nombre; }
SWITCH...CASE...DEFAULT Una alternativa a IF...ELSEIF...ELSE, es la sentencia SWITCH, la cul evala y compara cada expresin de la sentencia CASE con la expresin que evaluamos, si llegamos al final de la lista de CASE y encuentra una condicin Verdadera , ejecuta el cdigo de bloque que haya en DEFAULT. Si encontramos una condicin verdadera debemos ejecutar un BREAK para que la sentencia SWITCH no siga buscando en la lista de CASE. Veamos un ejemplo. <?php switch ($dia) { case "Lunes": echo "Hoy es break; "Martes": echo "Hoy es break; "Miercoles": echo "Hoy es break; "Jueves": echo "Hoy es break; "Viernes": echo "Hoy es break; "Sbado": echo "Hoy es Lunes";
case
Martes";
case
Miercoles";
case
Jueves"; Viernes";
case
case
Sbado";
48 break; case "Domingo": echo "Hoy es Domingo"; break; default: echo "Esa cadena no corresponde a ningn da de la semana"; } ?> SENTENCIAS CICLICAS O BUCLES: nos permiten iterar conjuntos de instrucciones, es decir repetir la ejecucin de un conjunto de instrucciones mientras se cumpla una condicin. WHILE: La sentencia WHILE ejecuta un bloque de cdigo mientras se cumpla una determinada condicin. <?php $num = 1; while ($num < 5) { echo $num; $num++ } ?> Podemos romper un bucle WHILE utilizando la sentencia BREAK. <?php $num = 1; while ($num < 5) { echo $num; if ($num == 3){ echo "Aqu nos salimos \n"; break } $num++ } ?> DO...WHILE: Esta sentencia es similar a WHILE, salvo que con esta sentencia primero ejecutamos el bloque de cdigo y despus se evala la condicin, por lo que el bloque de cdigo se ejecuta siempre al menos una vez. <?php $num = 1; do { echo $num; if ($num == 3){
49 echo "Aqu nos salimos \n"; break } $num++ } while ($num < 5); ?> FOR: El bucle FOR no es estrictamente necesario, cualquier bucle FOR puede ser sustituido fcilmente por otro WHILE. Sin embargo, el bucle FOR resulta muy til cuando debemos ejecutar un bloque de cdigo a condicin de que una variable se encuentre entre un valor mnimo y otro mximo. El bucle FOR tambin se puede romper mediante la sentencia BREAK. <?php for ($num = 1; Snum <=5; $num++){ echo $num; if ($num == 3){ echo "Aqu nos salimos \n"; break } } ?> ARRAYS: Las tablas (o array en ingls), son muy importantes en PHP, ya que generalmente, las funciones que devuelven varios valores, como las funciones ligadas a las bases de datos, lo hacen en forma de tabla. En PHP disponemos de dos tipos de tablas. El primero sera el clsico, utilizando ndices: <?php $ciudad[] = "Pars"; $ciudad[] = "Pars"; $ciudad[] = "Roma"; $ciudad[] = "Sevilla"; $ciudad[] = "Londres"; print ("yo vivo en " . $ciudad[2] . "<BR>\n"); ?> Esta es una forma de asignar elementos a una tabla, pero una forma ms formal es utilizando la funcin array $ciudad = array("Pars", "Roma", "Sevilla", "Londres"); //contamos el nmero de elementos de la tabla
50 $numelentos = count($ciudad); //imprimimos todos los elementos de la tabla for ($i=0; $i < $numelentos; $i++) { print ("La ciudad $i es $ciudad[$i] <BR>\n"); } ?> Sino se especifica, el primer ndice es el cero, pero podemos utilizar el operador => para especificar el indice inicial. $ciudad = array(1=>"Pars", "Roma", "Sevilla", "Londres"); Un segundo tipo, son las tablas asociativas, en las cules a cada elemento se le asigna un valor (key) para acceder a l. Para entenderlo, que mejor que un ejemplo, supongamos que tenemos una tabla en al que cada elemento almacena el nmero de visitas a nuestra web por cada da de la semana. Utilizando el mtodo clsico de ndices, cada da de la semana se representara por un entero, 0 para lunes, 1 para martes, etc. $visitas[0] = 200; $visitas[1] = 186; si usamos las tablas asociativas sera $visitas["lunes"] = 200; $visitas["martes"] = 186;
o bien, $visitas = array("luodigo">$visitas = array("lunes"=>200; "martes"=>186); Ahora bien, recorrer una tabla y mostrar su contenido es sencillo utilizando los ndices, pero cmo hacerlo en las tablas asociativas?. La manipulacin de las tabas asociativas se a hace travs de funciones que actan sobre un puntero interno que indica la posicin. Por defecto, el puntero se situa en el primer elemento aadido en la tabla, hasta que es movido por una funcin: current - devuelve el valor del elemento que indica el puntero pos - realiza la misma funcin que current reset - mueve el puntero al primer elemento de la tabla end - mueve el puntero al ltimo elemento de la tabla next - mueve el puntero al elemento siquiente prev - mueve el puntero al elemento anterior count&n count - devuelve el nmero de elementos de una tabla. Veamos un ejemplo de las funciones anteriores:
51
<?php $semana = array("lunes", "martes", "mircoles", "jueves", "viernes", "sbado", "domindo"); echo count($semana); //7 //situamos el puntero en el primer elemento reset($semana); echo current($semana); //lunes next($semana); echo pos($semana); //martes end($semana) echo pos($semana); //domingo prev($semana); echo current($semana); //sbado ?> Recorrer una tabla con las funciones anteriores se hace un poco lioso, para ello se recomienda utilizar la funcin each(). <?php $visitas = array("lunes"=>200, "martes"=>186, "mircoles"=>190, "jueves"=>175); reset($visitas); while (list($clave, $valor) = each($visitas)) { echo "el da $clave ha tenido $valor visitas<BR>"; } ?> La funcin each()devuelve el valor del elemento actual, en este caso, el valor del elemento actual y su clave, y desplaza el puntero al siguiente, cuando llega al final devuelve FALSO, y termina el bucle while().
FUNCIONES: Muchas veces, cuando trabajamos en el desarrolo de una aplicacin, nos surge la necesidad de ejectar un mismo bloque de cdigo en diferentes partes de nuestra aplicacin. Una Funcin no es ms que un bloque de cdigo al que le pasamos una serie de parmetros y nos devuelve un valor. Como todos los lenguaje de programacin, PHP trae una gran cantidad de funciones para nuestro uso, pero las funciones ms gran cantidad de funciones para nuestro uso, pero las funciones ms importantes son las que nosotros creamos. Para declara una funcion debemos utilizar la instruccin function seguido del nombre que le vamos a dar, y despus entre parentesis la lista de argumentos separados por comas, aunque tambin habr funciones que no recogan ningn
52 argumento. function nombre_de_funcion (arg_1, arg_2, ..., arg_n) { bloque de cdigo } Cualquier instruccin vlida de PHP puede aparecer en el cuerpo (lo que antes hemos llamado bloque de cdigo) de una funcin, incluso otras funciones y definiciones de clases. En PHP no podemos redefinir una funcin previamente declarada, y adems en PHP3, las funciones deben definirse siempre antes de que se invoquen, en PHP4 este requerimiento ya no existe.
LA INSTRUCCIN RETURN: Cuando invocamos una funcin, la ejecucin del programa pasa a ejecutar las lneas de cdigo que contenga la funcin, y una vez terminado, el programa continua su ejecucin desde el punto en que fu llamada la funcin. Existe una manera de terminar la ejecucin de la funcin aunque an haya cdigo por ejecutar, mediante el u haya cdigo por ejecutar, mediante el uso de la instrucin return terminamos la ejecucin del cdigo de una funcin y devolvemos un valor. Podemos tener varios return en nuestra funcin, pero por lo general, cuantos ms return tengamos menos reutilizable ser nuestra funcin. <?php function mayor ($x, $y) { if ($x > $y) { return $x." es mayor que ".$y; } else { return $y." es mayor que ".$x; } } ?> Aunque quedari mejor: <?php function mayor ($x, $y) { $msg = ""; if ($x > $y) { $msg = $x." es mayor que ".$y; } else { $msg = $y." es mayor que ".$x;
53 } return $msg; } ?> Con la instrucin return puede devolverse cualquier tipo de valor, incluyendo tablas y objetos. PHP solo permite a las funciones devolver un valor, y para solventar este pequeo problema, si queremos que nuestra funcin devuelva varios tenemos que utilizar una tabla (array). PARMETROS: Existen dos formas de pasar los parmetros a una funcin, por valor o por referencia. Cuando pasamos una variable por valor a una funcion, ocurra lo que ocurra en sta en nada modificar el contenido de la variable. Mientras que si lo hacemos por referencia, cualquier cambio acontecido en la funcin sobre la variable lo har para siempre. E variable lo har para siempre. En PHP, por defecto, las variables se pasan por valor. Para hacerlo por referencia debemos anteponer un ampersand (&) a la variable. <?php function suma ($x, $y) { $x = $x + 1; return $x+$y; } $a = 1; $b = 2; //parmetros por valor echo suma ($a, $b); // imprimir 4 echo $a; // imprimir 1 //parmetros por referencia echo suma (&$a, $b); // imprimir 4 echo $a; //imprimir 2 ?> Si queremos que un parmetro de una funcin se pase siempre por referencia debemos anteponer un ampersand (&) al nombre del parmetro en la definicin de la funcin. En PHP podemos definir valores por defecto para los parmetro de una funcin. Estos valores tienen que ser una expresin constante, y no una variable o miembro de una clase. Adems cuando usamos parmetros por defectos, stos deben estar a la derecha de cualquier parmetro sin valor por defecto, de otra forma PHP nos devolver un error.
54 <?php function suma ($x=1, $y) { $x = $x + 1; return $x+$y; } ?> Si ejecutarmos esta funcin nos dara error, ya que hemos dado a $x el valor 1 por defecto y la hemos colocado a la izquierda de un parmetro que no tiene valor por defecto. La forma correcta es: <?php function suma ($y, $x=1) { $x = $x + 1; return $x+$y; } ?> Cabe destacar que PHP3 no soporta un nmero variables de parmetros, pero PHP4 s. Llegados a este punto, damos un paso atrs y volvemos a las variables, para distinguir entre variables estticas (static) y globales (global). Las variables estticas se definen dentro de una funcin, la primera vez que es llamada dicha funcin la variable se inicializa, guardando su valor para posteriores llamadas. <?php function contador () { static $count = 0; $count = $count + 1; return $count; } echo contador()."<BR>"; // imprimir 1 echo contador()."<BR>"; // imprimir 2 echo contador()."<BR>"; // imprimir 3 ?> Las variables globales, no se pueden declarar dentro de una funcin, lo que hacemos el llamar a una variable que ya ha sido declarada, tomando el valor que tenga en ese momento, pudiendo se modificado en la funcin. <?php var $a = 1; function ver_a() {
55 global $a; echo $a."<BR>"; // imprimir el valor de $a $a += 1; // sumamos 1 a $a } echo ver_a(); // imprimir 1 echo ver_a(); // imprimir 2 $a = 7; echo ver_a(); // imprimir 7 echo ver_a(); // imprimir 8 ?> BIBLIOTECA DE FUNCIONES: Existen muchas bibliotecas de funciones en PHP Algunos ejemplos: Funciones Funciones Funciones Funciones Funciones Funciones Funciones de manipulacin de cadenas de fecha y hora de arrays de ficheros matemticas de bases de datos de red
Algunas bibliotecas requieren la instalacin de componentes adicionales Todas las funciones de biblioteca estn comentadas en la documentacin de PHP
FUNCIONES DE MANIPULACIN DE CADENAS: explode() Divide una cadena en subcadenas array explode (string separator, string string [, int limit]) rtrim(), ltrim(), trim() Eliminan caracteres a la derecha, a la izquierda o por ambos lados de una cadena string rtrim ( string str [, string charlist]) strstr() Busca la primera ocurrencia de una subcadena strtolower() / strtoupper() Convierte una cadena a minscula / mayscula strcmp() / strcasecmp() Compara dos cadenas con/sin distincin de maysculas
56 strlen() Calcula la longitud de una cadena
FUNCIONES DE FECHA Y HORA: date() Formatea una fecha segn un formato dado Ejemplo: $fecha = date ("j/n/Y H:i"); print ("$fecha"); Resultado: 26/9/2005 17:36 strtotime() Convierte una fecha en un timestamp de UNIX Ejemplo: $fecha = date ("j/n/Y", strtotime(5 april 2001")); print ("$fecha"); Resultado: 5/4/2001 FUNCIONES DE ARRAYS: array_count_values() Calcula la frecuencia de cada uno de los elementos de un array array_search() Busca un elemento en un array count() Cuenta los elementos de un array sort(), rsort() Ordena y reindexa un array (r=decreciente) ksort(), krsort() Ordena por claves un array (r=decreciente)
AHORRANDO CODIGO: Cmo ahorramos lneas de cdigo Por lo general, todos nuestros script tienen partes de cdigo iguales, las funcines include() y require() nos van ahorrar muchas de estas lineas de cdigo. Ambas funciones hacen una llamada a un determinado fichero pero de dos maneras
57 diferentes, con include(), insertamos lo que contenga el fichero que llamemos de manera literal en nuestro script, mientras que con require(), le decimos que el script necesitar parte de cdigo de se encuentra en el fichero que llama require(). Como todo esto es un poco lioso, veamos unos ejemplos que nos lo aclar. <?php include ("header.inc"); echo "Hola Mundo"; include ("footer.inc"); ?> Si tenemos encuenta que el fichero header.inc contiene: <html> <body> y el fichero footer.inc contiene: </body> </html> Nuestro script sera equivalente a: <html> <body> <?php <?php echo "Hola Mundo"; ?> </body> </html> Ahora veamos el script de ejemplo para la funcin require(): <?php require ("config.inc"); include ("header.inc"); echo $cadena; include ("footer.inc"); ?> Donde el fichero config.inc tendra algo como sto: <?php $cadena = "Hola Mundo"; ?>
58
BASE DE DATOS MYSQL
QUE ES UNA BASE DE DATOS: Una base de datos (sea cual sea) es un soporte digital que tiene como fin el almacenamiento masivo de informacin en formato texto plano. Aunque existen formas de guardar otro tipo de datos como imgenes y archivos no es recomendable hacerlo , lo mejor en esos casos es guardar dichos archivos en un directorio y guardar la ruta en la base de datos. Las bases de datos, son utilizadas en sistemas que requieren una interaccin fluida con la aplicacin; estas se encargan muchas veces de administrar, editar, y dar de alta. Usualmente la base de datos, esta ligada a la programacin directa del site, causando que una edicin en ella cause una modificacin directa en lo que ve el usuario. Ejemplos de aplicacin de una base de datos (entindase que estn ligadas a un lenguaje dinmico como PHP o ASP): E comerce, Agendas, Libros de visitas, foros, portales, etc ESTRUCTURA NORMAL DE UNA DB: Una base de datos, a fin de ordenar la informacin de manera lgica, posee un orden que debe ser cumplido para acceder la informacin de manera coherente. Cada base de datos tiene una o ms tablas, las cuales cumplen la funcin de contener los campos. Un ejemplo de tabla sera contactos. Para entender mejor esto, sera como un libro en el excel. Mientras que los campos seran las columnas del excel donde se ordena cada datos insertado al libro. Ejemplo id, nombres, apellidos, telfono. Y luego finalmente tenemos las filas (row), que son la informacin propiamente dicha. Por consiguiente una base de datos posee el siguiente orden jerrquico: Tablas Campos Registros MYSQL: Es una base de datos con licencia GPL basada en un servidor, puede ser slo creada por cdigo. Usualmente se utiliza el programa phpMyAdmin como soporte para administrar la base de datos en el nivel de programacin (a un usuario
59 normal le resultara complicado utilizarla desde linea de comandos).
MANEJO DE MYSQL CON PHPMYADMIN ASPECTOS BSICOS DE PHPMYADMIN phpMyAdmin es una herramienta escrita en PHP diseada para la administracin de las bases de datos MySQL en la Web. Actualmente, phpMyAdmin puede crear y eliminar bases de datos, crear/eliminar/modificar tablas, eliminar/modificar/incluir registros, ejecutar sentencias de SQL, y manejar campos con llaves. Al acceder a la base de datos deberas logearte con un usuario y password (recuerda el usuario por default y administrador es root y el password es el que colocaste en la instalacion de appserv) CREAR UNA TABLA EN BASE DE DATOS La parte izquierda se usa para navegacin en phpMyAdmin. All podrs encontrar tus bases de datos, en caso tengas alguna. Tan pronto como crees tablas, se mostrarn debajo exactamente de la base de datos a la que pertenecen.
Crearemos una tabla que se llame "Distrito". Usa la opcin de Create new table. Escribe en el lugar correcto el nombre de la table: Distrito, y la cantidad de columnas que tendr la tabla (3 en este caso) en el cajn de texto FIELDS. Puedes eliminar la tabla usando la funcin DROP.
Da clic en CONTINUAR y debes ver algo parecido a la grfica siguiente:
60
El nombre de cada columna escrbelo en el FIELD. Ahora captura la informacin adecuada en los respectivos cajones de texto: ID int 6 delegacion char 100 colonia char 100 La columna LENGHT indica el valor mximo que se permite en ese campo para captura. Hay distintos tipos de valores que se puede utilizar para la columna TYPE. char, varchar, int, numeric, etc. En este caso utilizaremos char, que tiene un valor fijo y acepta caracteres alfanmericos. Los tipos TYPES especificados en este ejemplo no necesariamente son los ms eficientes a la hora de su uso. Debemos determinar cuidadosamente el tipo de valor que se utilizar dependiendo de la informacin que se almacenar. La columna ID se usar como llave primaria, o Primary Key, para esta tabla, y se colocar en el tip auto_increment, el cual generar de manera automtica un nmero consecutivo. Coloca el Default en cero 0. Cuando finalices de capturar los datos, da clic en SAVE, o guardar. Aparecer una ventana similar a la siguiente:
!Felicidades Has creado tu primera tabla. Los datos correspondientes a los comandos utilizados para crear los campos tambin se muestra en la pantalla. No es obligatorio ni indispensable, pero con el tiempo empezars a reconocer comandos de MySQL en los mensajes de phpMyAdmin. Puedes utilizar DROP para eliminar una tabla o alguno de sus campos. INSERTANDO DATOS EN UNA TABLA Da clic en INSERT y una pantalla como la siguiente aparecer:
61
Ahora captura los datos correspondientes a cada record. La columna ID es automtica de manera que no debes de colocarla. Es importante saber que si te sientes perdido en phpMyAdmin, es suficiente darle clic a HOME en la parte izquierda y te llevar exactamente al lugar de inicio. Dale clic a SAVE y la informacin se almacenar en la tabla Distrito. La imagen que se mostr con anterioridad es la que aparece cuando insertas informacin en una tabla usando el comando INSERT de SQL. Puedes aadir ms ms de un registro por medio de utilizar el botn de radio Insert Another new row, en la forma de insercin. Cuando finalices la insercin de datos, puedes confirmar su insercin y navegar la informacin dndole clic a BROWSE. Puedes darle clic a cada registro para editarlo o eliminarlo.
62
LENGUAJE SQL: Este es el lenguaje que se utiliza para conectarse a una base de datos. Son sentencias, que realizan un query (consulta) a la DB a fin de que esta les responda con una cantidad de datos limitada segn lo buscado. Bsicamente, existen muchsimas funciones de SQL, pero detallar las ms usuales, con las cuales se pueden lograr una interaccin buena con la DB. INSERTAR DATOS A UNA TABLA ESPECIFICA: INSERT INTO `Nombre Tabla` (` Nombre Campo ` , ` Nombre Campo ` , `Nombre Campo`) VALUES ('Valor', ' Valor', ' Valor '); EDITAR DATOS DE UNA FILA ESPECIFICA UPDATE ` Nombre Tabla ` SET ` Nombre Campo ` = 'Valor', ` Nombre Campo ` = ' Valor',` Nombre Campo ` = ' Valor' WHERE `id` = 'Numero Fila'; Nota: Siempre se incluye el campo id, a fin de identificar con un valor numrico una fila. BORRAR UNA FILA DELETE FROM ` Nombre Tabla ` WHERE `id`='Numero Fila'; SELECCIONAR DATOS DE UNA FILA SELECT Nombre Campo, Nombre Campo FROM Nombre Tabla where id = Numero Fila; BUSCAR DATOS DENTRO DE UNA TABLA SELECT Nombre Campo FROM Nombre Tabla where Nombre Campo LIKE '%".Concepto de Bsqueda."%; CONTAR REGISTROS TOTALES EN UN CAMPO SELECT COUNT (Nombre Campo) FROM Nombre Tabla;
BACKUPS DE LA BASE DE DATOS:
63 Realiza siempre un respaldo de tu base de datos de manera peridica. Da clic sobre el nombre de la base de datos en el men del lado izquierdo. Da clic en EXPORT.
Selecciona las tablas que desees respaldar. Selecciona los botones de radio STRUCTURE y DATA Selecciona los campos DROP TABLE Y ADD IF NOT EXITS Selecciona ENCLOSE TABLE AND FIELNAMES WITH BACKQUOTES. Selecciona los check boxes SAVE AS FILE y ZIPPED.
Al final solo haz clic en GO para exportar las tablas seleccionados.
64
PHP Y MYSQL
En el tema 4 vimos como manejar una base de datos MySQL , como interactuar con ella usando las sentencias SQL, las cuales nos permitan seleccionar, actualizar, insertar y eliminar registros de nuestras tablas. Ahora aprenderemos como usar estas sentencias pero usando PHP para por ejemplo hace un programa que me muestre mi lista de contactos en una pagina web.
CONECTAR A MYSQL DESDE PHP: Para conectarnos a una base de datos desde php usaremos la funcion mysql_connect() ,veamos un ejemplo: <?php $Connec= mysql_connect("localhost", "root","root"); echo ya estas conectado; ?> Solo necesitamos especificar el Host o servidor, el usuario y si es que fuese necesario el password para poder validarnos en la base de datos. El resultado de la conexin es almacenado en la variable $Connec.
Ahora veamos como poder seleccionar una base de datos y enviar una consulta SQL para despus mostrarla en php.
<?php $Connec= mysql_connect("localhost", "root","root"); mysql_select_db("web", $Connec); $result = mysql_query("SELECT * FROM agenda", $Connec); echo "Nombre: ".mysql_result($result, 0, "nombre")."<br>"; echo "Direccin: ".mysql_result($result, 0, "direccion")."<br>"; echo "Telfono :".mysql_result($result, 0, "telefono")."<br>"; echo "E-Mail :".mysql_result($result, 0, "email")."<br>"; ?> Con mysql_select_db() PHP le dice al servidor que en la conexin $Connecnos queremos conectar a la base de datos mydb. Podramos establecer distintas conexiones a la BD en diferentes servidores, pero nos conformaremos con una. La siguiente funcin mysql_query(), es la que hace el trabajo duro, usando el identificador de la conexin ($link), enva una instruccin SQL al servidor MySQL
65 para que ste la procese. El resultado de sta operacin es almacenado en la variable $result. Finalmente, mysql_result() es usado para mostrar los valores de los campos devueltos por la consulta ($result). En este ejemplo mostramos los valores del registro 0, que es el primer registro, y mostramos el valor de los campos especificados. MOSTRAR TODOS LOS DATOS DE UNA CONSULTA SQL: Ahora veremos como mostrar todos datos de una consulta. <html> <body> <?php $Connec= mysql_connect("localhost", "root","root"); mysql_select_db("web", $Connec); $result = mysql_query("SELECT nombre, email FROM agenda", $Connec); echo "<table border = '1'> \n"; echo "<tr><td>Nombre</td><td>E-Mail</td></tr> \n"; $total_rows = mysql_num_rows($result); for($i=0;$i<=$total_rows;$i++) { $nombre = mysql_result($result, $i, "nombre"); $email = mysql_result($result, $i, "email"); echo "<tr><td>$nombre</td><td>$email</td></tr> ";
} echo "</table> "; ?> </body> </html> Como podemos observar hemos usado la funcion mysql_num_rows que devuelve el nmero de filas de un resultado asi en el ciclo FOR sabemos la cantidad de veces que se mostrara el registro. Ntese que reemplazamos el 0 de la funcion mysql_result por la variable $i para ir avanzando entre registros. Tambin se puede mostrar los resultados de una consulta usando otras funciones como veremos a continuacin.
66
<html> <body> <?php $Connec= mysql_connect("localhost", "root","root"); mysql_select_db("web", $Connec); $result = mysql_query("SELECT nombre, email FROM agenda", $Connec); echo "<table border = '1'> \n"; echo "<tr><td>Nombre</td><td>E-Mail</td></tr> \n"; while ($row = mysql_fetch_row($result)){ echo ""<tr><td>$row[0]</td><td>$row[1]</td></tr> \n"; } echo "</table> \n"; ?> </body> </html> En este script hemos introducido dos novedades, la ms obvia es la sentencia de control while(), que tiene un funcionamiento similar al de otros lenguajes, ejecuta una cosa mientras la condicin sea verdadera. En esta ocasin while() evalua la funcin mysql_fetch_row(), que devuelve un array con el contenido del registro actual (que se almacena en $row) y avanza una posicin en la lista de registros devueltos en la consulta SQL. La funcin mysql_fetch_row() tiene un pequeo problema, es que el array que devuelve slo admite referencias numricas a los campos obtenidos de la consulta. El primer campo referenciado es el 0, el segundo el 1 y as sucesivamente. En el siguiente script solucionaremos este pequeo inconveniente. <?php $Connec= mysql_connect("localhost", "root","root"); mysql_select_db("web", $Connec); $result = mysql_query("SELECT nombre, email FROM agenda", $Connec); if ($row = mysql_fetch_array($result)){ echo "<table border = '1'> \n"; echo "<tr><td>Nombre</td><td>E-Mail</td></tr> \n"; do { echo "<tr><td>".$row["nombre"]."</td><td>".$row["email"]."</td></tr> \n"; } while ($row = mysql_fetch_array($result)); echo "</table> \n"; } else { echo " No se ha encontrado ningn registro !";
67 } ?> Esencialmente, este script hace lo mismo que el anterior. Almacenamos en $row el registro actual con la funcin mysql_fetch_array() que hace exactamente lo mismo que mysql_fetch_row(), con la exepcin que podemos referenciar a los campos por su nombre ($row["email"]), en vez de por un nmero. Con la sentencia if/else, asignamos a $row el primer registro de la consulta, y en caso de no haber ninguno (else) mostramos un mensaje ("No se ha encontrado..."). Mientras que con la sentencia do/while, nos aseguramos que se nos muestren todos los registros devueltos por la consulta en caso de haber ms de uno. Hay que destacar la utilizacin del punto (.), como operador para concatenar cadenas.
AADIR REGISTROS A NUESTRA BASE DE DATOS: Ahora veremos como podemos aadir nuevos registros a nuesta BD. La recogida de datos la vamos a hacer a traves de un interfaz de web. En primer lugar vamos a crear una pgina web con un simple formulario, con los campos que deseamos. Formulario inicial aadir BD <html> <body> <form method="post" action="insertar_reg.php"> Nombre :<input type="Text" name="nombre"><br> Direccin:<input type="Text" name="direccion"><br> Telfono :<input type="Text" name="telefono"><br> E-mail :<input type="Text" name="email"><br> <input type="Submit" name="enviar" value="Aceptar informacin"> </form> </body> </html> Hemos creado un formulario donde recoger los datos, y una vez introducidos ejecutamos un script llamado insertar_reg.php, pues veamos como es este script.
<html> <body> <?php

68 // process form $Connec= mysql_connect("localhost", "root", "root"); mysql_select_db("web", $Connec); $sql = "INSERT INTO agenda (nombre, direccion, telefono, email) ". "VALUES ('$nombre', '$direccion', '$telefono', '$email')"; $result = mysql_query($sql,$Connec); echo "Gracias! Hemos recibido sus datos.\n"; </body> </html> Como se puede ver, para introducir un nuevo registro, utilizamos la ya conocida funcin mysql_query(), la cul tambin usamos para las consultas, y usaremos para las actualizaciones, es decir una seora funcin. Una cosa muy importante, para poder aadir o modificar registros debemos tener permiso para ello en el servidor MySQL, por eso en este caso me conecto como root, pero podra ser cualquier otro usuario. MODIFICAR REGISTROS DE NUESTRA BASE DE DATOS: Lo primero, es lo primero, para modificar hay que tener permiso para ello en el servidor de BD, el resto nos viene de corrido. Primero seleccionamos el registro que deseamos modificar, y luego, mandamos una consulta con las modificaciones, o ambas cosas a la vez. Suponemos que las modificaciones las recogemos de un formulario como el de la leccin anterior. <html> <body> <?php if (isset($id)){ // process form $Connec= mysql_connect("localhost", "root",root); mysql_select_db("web", $Connec); $sql = "SELECT * FROM agenda WHERE id = $id" $result = mysql_query($sql,$Connec); $sql = "UPDATE agenda SET nombre='$nombre', direccion='$direccion',". "telefono='$telefono', email='$email'"; $result = mysql_query($sql); }else{ echo "Debe especificar un 'id'.\n"; } </body> </html>
69 Tambin podra hacerlo de esta forma <?php if (isset($id)){ // process form $Connec= mysql_connect("localhost", "root",root); mysql_select_db("web", $Connec); $sql = "UPDATE agenda SET nombre='$nombre', direccion='$direccion',". "telefono='$telefono', email='$email' WHERE id=$id"; $result = mysql_query($sql,$Connec); }else{ echo "Debe especificar un 'id'.\n"; }
BORRAR REGISTROS DE NUESTRA BASE DE DATOS: El proceso de borrar un registro es idntico al de modificar, solo que en vez de utilizar UPDATE utilizamos DELETE en la sentencia SQL. Por tanto el script quedara como sigue. <html> <body> <?php if (isset($id)){ // process form $Connec= mysql_connect("localhost", "root",root); mysql_select_db("web", $Connec); $sql = "DELETE agenda WHERE id=$id") $result = mysql_query($sql,$Connec); }else{ echo "Debe especificar un 'id'.\n"; } </body> </html>

Cpe 1202

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Cpe 1202

Caricato da

Copyright:

Formati disponibili

2

COMO CREAR PAGINAS WEB DINAMICAS CON PHP Y MYSQL

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

Mensaje del Autor

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

CONCEPTOS BASICOS E INSTALACION DE LAMP

Es muy liviano y de ah mismo podemos bajar la ltima versin.

En esta imagen indica el acuerdo de licencia, ah debemos dar conformidad (I Agree).

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

CREANDO PAGINAS WEB ESTATICAS CON HTML

Hola, me llamo PON TU NOMBRE.

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

Esta es mi primera pgina web. HTML es muy fcil.

Sin embargo este es el aspecto real

Hola, me llamo PON TU NOMBRE.Esta es mi primera pgina web.HTML es muy fcil.

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

Ahora esta queda arriba. Esta tambin es ms corta.

Esta tambin es ms corta. Ahora esta queda abajo.

Y con middle quedan centradas verticalmente.

Ahora esta queda abajo.

Esta tambin es ms corta.

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

Esta celda tampoco

42 <input type="reset" value="Restablecer" name="B2"> </form>

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

45 printf (CONSTANTE); ?> </body> </html>

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

56 strlen() Calcula la longitud de una cadena

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

BASE DE DATOS MYSQL

59 normal le resultara complicado utilizarla desde linea de comandos).

Da clic en CONTINUAR y debes ver algo parecido a la grfica siguiente:

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

BACKUPS DE LA BASE DE DATOS:

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

Al final solo haz clic en GO para exportar las tablas seleccionados.

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

<html> <body> <?php

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

Copyright 2012 Cesar Mayta - Derechos Reservados www.clubdeprogramacion.com

Potrebbero piacerti anche