Está en la página 1de 102

PHP y MySQL

Elaborado por: Carlos Eduardo, Pin Indacochea.

CLASE NMERO 1

Introduccin a PHP
Qu significa PHP? PHP Hypertext Pre-processor, conocido al principio como Personal Home Page Tools. Para qu sirve? Para crear pginas Web de forma dinmica y es usado principalmente del lado del servidor. Actualmente se encuentra en la versin 6 que se est implementando, pero la ms usada es la versin 5.X
Referencia en: http://es.wikipedia.org/wiki/PHP Referencia en: http://craftyman.net/10-mejores-practicas-para-php/

Carlos Eduardo, Pin Indacochea

Instalacin de XAMPP y DW

Carlos Eduardo, Pin Indacochea

Estructura PHP Hola Mundo

Carlos Eduardo, Pin Indacochea

Variables PHP

Informacin de variables: http://craftyman.net/10-utiles-variables-de-servidor-en-php/ Carlos Eduardo, Pin Indacochea

Operadores Bsicos PHP


Operadores Aritmticos
+ Suma dos valores

Operadores de Asignacin
= Asigna a la parte derecha el valor izquierdo += Realiza la suma de la derecha con la izquierda y la asigna a la derecha -= Realiza la resta de la derecha con la izquierda y la asigna a la derecha *= Realiza la multiplicacin de la derecha con la izquierda y la asigna a la derecha /= Realiza la divisin de la derecha con la izquierda y la asigna a la derecha %= Se obtiene el resto y se asigna .= Concatena el valor de la izquierda con la derecha y lo asigna a la derecha

Operadores Lgicos
! Operador NO o negacin .Si era true pasa a false y viceversa and Operador Y, si ambos son verdaderos vale verdadero or Operador O, vale verdadero si alguno de los dos es verdadero xor Verdadero si alguno de los dos es true pero nunca ambos && True si ambos lo son

Operadores Condicionales
== Comprueba si nmeros son iguales != Comprueba si nmeros son distintos dos

- Resta dos valores

dos

* Multiplica dos valores

> Mayor que, devuelve true en caso afirmativo < Menor que, devuelve true en caso afirmativo >= Mayor o igual

/ Divide dos valores

% Resto de dividir dos valores

++ Incremento en una unidad

|| True si alguno lo es

<= Menor o igual

-- Decremento en una unidad

Referencia en: http://www.manualdephp.com/manualphp/operadores-php.html Carlos Eduardo, Pin Indacochea 7

IF ... ELSE

Nota: Los operador && y || son exactamente iguales a los de Java. Carlos Eduardo, Pin Indacochea 8

SWITCH

Carlos Eduardo, Pin Indacochea

Ejemplo Sencillo

Carlos Eduardo, Pin Indacochea

10

Ejercicios
1) Realice un programa que muestre un mensaje que diga Bienvenido al Mundo PHP y luego concatnelo y con un salto de lnea muestre tambin Y al Mundo MySQL Realice un programa que determine si un nmero es mayor a 1500 y menor a 3000, y que calcule el 10% del nmero y finalmente muestre el resultado. Realice un programa que ingrese por variable un nmero del 1 al 5 y muestre un mensaje del nmero que es. Realice un programa que ingrese un nmero aravico y lo convierta a nmero romano, considere slo nmeros del 1 al 10.

2)

3)

4)

Carlos Eduardo, Pin Indacochea

11

CLASE NMERO 2

WHILE

Carlos Eduardo, Pin Indacochea

13

DO WHILE

Carlos Eduardo, Pin Indacochea

14

FOR

Carlos Eduardo, Pin Indacochea

15

Arreglos
Hay 2 formas de crear arreglos en PHP: De la siguiente manera:
$arreglo=array(indice1=> valor1,indice2=> valor2, ...m indiceN=>valorN) Importante: El ndice puede ser un nmero o una cadena de texto al igual que el valor. Y la segunda: $miarreglo[0]=Hola; $miarreglo[1]=Que Tal; $cadena=$miarreglo[0]. .$miarreglo[1];

Mayor informacin en: http://www.manualdephp.com/manualphp/matrices-array.html Carlos Eduardo, Pin Indacochea

16

Recorrer Arreglos en PHP

Carlos Eduardo, Pin Indacochea

17

Funciones
Slo para refrescar la memoria, las funciones sirven para reutilizar el cdigo sin necesidad de reescribirlo en todo el lugar de nuestra aplicacin, es decir, usar una programacin ordenada e intentar orientarla a objetos en vez de que sea estructurada. Un ejemplo de funcin en PHP es:
[Public / Protected / Private] function [NombreFuncion] ([parmetros si existen]) { lgica de programacin; programacin; return [Algo]; // Si es que hay algo para devolver [Algo]; } Nota: Si no usas Public / Protected / Private se asume como Public en las clases, dentro del cdigo si usas Public / Protected / Private te generar un error de T_ el tipo de declaracin realizada.

Carlos Eduardo, Pin Indacochea

18

Funciones

Carlos Eduardo, Pin Indacochea

19

Introduccin a Clases en PHP


Para usar clases en PHP es igual a Java usamos: class [Nombre]{ lgica; lgica; } En PHP tambin instanciamos las clases, pero antes de ello debemos usar alguno de los siguientes:


include(ruta archivo): Carga el cdigo de un archivo con posibilidad de aadirlo varias veces sin generar errores crticos. require(ruta archivo): Carga el cdigo de un archivo con posibilidad de aadirlo varias veces mostrando cualquier error de forma crtica. require_once(ruta archivo): Carga el cdigo de un archivo una sola vez mostrando cualquier error de forma crtica. include_once(ruta archivo): Carga el cdigo de un archivo una sola vez varias veces sin generar errores crticos.

Mas informacin en: http://www.php-es.com/language.oop5.html


Carlos Eduardo, Pin Indacochea 20

Introduccin a Clases en PHP

Carlos Eduardo, Pin Indacochea

21

Introduccin a Clases en PHP

Carlos Eduardo, Pin Indacochea

22

Estructura HTML
Estructura de una pgina en HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> http-equiv="Contentcharset=utf<title>T&iacute;tulo de Documento</title> </head> <body> Estructura del Documento HTML </body> </html>

Referencia en: Macromedia Dreamweaver CS3


Carlos Eduardo, Pin Indacochea 23

Componentes HTML
Formulario: <form name="form1" method="post/get" action="></form> Caja de Texto: <input type="text" name="textfield" id="textfield"> Caja de Texto Multilinea: <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea> Botn Submit: <input type="submit" name="button" id="button" value="Enviar"> Botn Normal: Normal: <input type=button" name="button" id="button" value="Enviar"> Casilla de Verificacin: <input type="checkbox" name="checkbox" id="checkbox"> Casilla de Opcin: <input type="radio" name="radio" id="radio" value="radio"> Lista/Men: <select name="select" id="select></select> Campo para subir archivo: <input type="file" name="fileField" id="fileField"> Imagen: <img src="imagen" width="ancho" height="alto" alt="descripcion" /> URL: <a href="#" target="formaDeMostrar">LINK</a>

Carlos Eduardo, Pin Indacochea

24

Componentes HTML

Nota: Slo se mencionan algunos componentes, mas informacin acerca de elementos y listados en: http://html.conclase.net/w3c/html401-es/index/elements.html http://www.sidar.org/recur/desdi/mcss/manual/html4.php Carlos Eduardo, Pin Indacochea

25

Creacin Dinmica de Componentes

Carlos Eduardo, Pin Indacochea

26

Resumen 1 de Comandos en PHP

Referencia en: http://www.taringa.net/posts/offtopic/1658216/Funciones-PHP!.html Carlos Eduardo, Pin Indacochea

27

Ejercicios
1) Realice un programa que determine si un nmero es primo o no usando WHILE, DO WHILE y FOR Realice un programa que almacene en un arreglo las notas de un saln de clase (6 notas) y que determine el promedio final de lo ingresado. Realice un programa que calcule el coeficiente de determinacin simple de los datos ingresados para X y Y los cuales son para X: 7,5,3,9,12,15 y para Y: 8,25,9,10,5,7 y el valor de n=6; la frmula es la siguiente: 2)

3)

4)

Realice un programa que cree de forma dinmica con la estructura de FOR; 5 cajas de texto; 5 cajas de verificacin; 5 cajas para subir archivos; 5 botones para enviar y 5 vnculos dinmicos (URL) que direccionen a http://www.google.com.pe Realice el diseo en HTML y las clases correspondientes en PHP para el ingreso de una FACTURA para la venta nica de productos en un mercado, asuma el diseo de interfaz y el diseo de las tablas.

5)

Carlos Eduardo, Pin Indacochea

28

CLASE NMERO 3

$_GET y $_POST
$_GET: Sirve pasar variables por la URL _GET: $_POST: Sirve para enviar variables o datos al dar _POST: un SUBMIT a un formulario. Nota: El $_GET se puede usar sin formulario o con formulario mientras que el $_POST es necesario un formulario para que se genere el evento, tambin puede darse por botn o por Script generado por el usuario.

Carlos Eduardo, Pin Indacochea

30

$_GET y $_POST

Carlos Eduardo, Pin Indacochea

31

$_GET y $_POST

Carlos Eduardo, Pin Indacochea

32

Manejo de Fechas

Referencia en: http://www.manualdephp.com/manualphp/fechas.html Mas informacin en: http://www.ignside.net/man/php/fechas.php Carlos Eduardo, Pin Indacochea 33

Manejo de Fechas

Carlos Eduardo, Pin Indacochea

34

Manejo de Ficheros
Los ficheros son archivos de texto, los Modos en los ficheros son:
y y y

r Slo lectura. El puntero al comienzo del archivo r+ Lectura y escritura; apuntador al inicio del archivo w Slo escritura, si no existe el archivo lo crea, si existe lo convierte en fichero de longitud cero y el apuntador se coloca en el inicio (sobrescribe el contenido, vamos) w+ Lectura y escritura, si existe lo trunca a tamao cero, y se sita al inicio, si no existe lo crea a Modo append, slo escritura, si no existe lo crea. Si existe, el apuntador se coloca al final del fichero (listo para escribir a continuacin del contenido) a+ Modo append, lectura y escritura, si no existe lo crea; apuntador al final del archivo

Carlos Eduardo, Pin Indacochea

35

Manejo de Ficheros

Carlos Eduardo, Pin Indacochea

36

Enviar correos con PHP


La funcin mail es: mail($destino, $asunto, $mensaje, $encabezados); mail($ encabezados); Donde: $destino: Es la direccin del mensaje a donde se enviar el correo. $asunto: Es el asunto del mensaje. $mensaje: Es el mensaje a enviar. $encabezados: Aqu se anexa por ejemplo quien enva el mensaje, si el mensaje va ir con copia para, si el mensaje va ir con copia oculta para, si tendr formato html, etc.

Carlos Eduardo, Pin Indacochea

37

Enviar correos con PHP


Ejemplo de el Encabezado:
// Para el envo en formato HTML $encabezado= "MIME-Versin: 1.0\r\n; $ encabezado.= "Content-type: text/html; charset=iso-8859-1\r\n"; // Direccin del remitente $ encabezado.= "From: Carlos Pin <carlos.pinan@gmail.com>\r\n"; // Direccin de respuesta, si queremos que sea distinta que la del remitente $ encabezado.= "Reply-To: orhiana_jimenez@hotmail.com \r\n"; // Ruta del mensaje desde origen a destino $ encabezado.= "Return-path: carlos_75_2004@hotmail.com \r\n"; // Direcciones que recibirn copia $ encabezado.= "Cc: carlos752004@gmail.com \r\n"; // Direcciones que recibirn copia oculta $ encabezado.= "Bcc: erick@hotmail.com, juan@hotmail.con \r\n";

Carlos Eduardo, Pin Indacochea

38

Enviar correos con PHP

Carlos Eduardo, Pin Indacochea

39

CLASE NMERO 4

Comandos MySQL


SELECT [ * / CAMPOS] FROM [TABLA] WHERE [PARAMETROS] GROUP BY [CAMPO] ORDER BY [CAMPOS] LIMIT [INICIO,FIN]; INSERT INTO [TABLA] VALUES([CAMPOS DE LA TABLA]); UPDATE [TABLA] SET [C1=N1,,CN=NN] WHERE [PARAMETROS] DELETE FROM [TABLA] WHERE [PARAMETROS] ejemplo de sintaxis SELECT mas detallado http://dev.mysql.com/doc/refman/5.0/es/select.html lo podemos encontrar en:

Un

SELECT [ALL | DISTINCT | DISTINCTROW ] [HIGH_PRIORITY] [STRAIGHT_JOIN] [SQL_SMALL_RESULT] [SQL_BIG_RESULT] [SQL_BUFFER_RESULT] [SQL_CACHE | SQL_NO_CACHE] [SQL_CALC_FOUND_ROWS] select_expr, ... [INTO OUTFILE 'file_name' export_options | INTO DUMPFILE 'file_name'] [FROM table_references [WHERE where_definition] [GROUP BY {col_name | expr | position} [ASC | DESC], ... [WITH ROLLUP]] [HAVING where_definition] [ORDER BY {col_name | expr | position} [ASC | DESC] , ...] [LIMIT {[offset,] row_count | row_count OFFSET offset}] [PROCEDURE procedure_name(argument_list)] [FOR UPDATE | LOCK IN SHARE MODE]]

Carlos Eduardo, Pin Indacochea

41

Conexin MySQL con PHP


Para conectar a la base de datos de MySQL con PHP, primero debemos conectarnos a la base de datos y luego seleccionar la base de datos, a continuacin vemos el cdigo para conectarnos a la base de datos: $link=mysql_connect(SERVIDOR,USUARIO,CLAVE) $link=mysql_connect(SERVIDOR,USUARIO,CLAVE) mysql_select_db(BASE mysql_select_db(BASE DE DATOS,$link) DATOS,$link)

Carlos Eduardo, Pin Indacochea

42

Consultas con MySQL y PHP

Carlos Eduardo, Pin Indacochea

43

Consultas con MySQL y PHP

Carlos Eduardo, Pin Indacochea

44

Ingresar registros a MySQL con PHP

Nueva Funcin: public function grabarDatos($a1,$a2,$a3,$a4,$a5,$a6){ grabarDatos($a1,$a2,$a3,$a4,$a5,$a6){ $query="INSERT INTO t_persona VALUES('$a1','$a2','$a3','$a4','$a5','$a6')"; query="INSERT $query=mysql_query($query); query=mysql_query($query); return $query; $query; }
Carlos Eduardo, Pin Indacochea 45

Ingresar registros a MySQL con PHP

Carlos Eduardo, Pin Indacochea

46

Ingresar registros a MySQL con PHP

Carlos Eduardo, Pin Indacochea

47

Caso 1 - MySQL con PHP


Crear un sistema para el ingreso de productos de una tienda de venta de videos; entre los datos que debe poseer esta tienda son:
   

Pantalla para iniciar sesin. Pantalla para ingreso de productos. Reportes de productos existentes. Capacidad de poder aadir nuevos usuarios.

Nota: Asuma el diseo de las tablas, por lo general deben ir las tablas: producto, usuario y perfil de usuario; puede aadir la elaboracin de comprobantes de pago; realice el sistema con clases y ordnelo en carpetas; el producto ingresado debe tener la fecha de ingreso exacta y la hora de ingreso exacta. Finalmente agregue una forma de exportar los reportes a un fichero, para que se genere un backup diario de los productos de la tienda. Adems la tabla usuario debe tener un campo e-mail; para que al momento de registrar a un nuevo usuario se le enve automticamente un correo electrnico con un mensaje de Bienvenida.
Carlos Eduardo, Pin Indacochea 48

CLASE NMERO 5

Eliminar registros en MySQL con PHP

Carlos Eduardo, Pin Indacochea

50

Eliminar registros en MySQL con PHP

Carlos Eduardo, Pin Indacochea

51

Eliminar registros en MySQL con PHP

Carlos Eduardo, Pin Indacochea

52

Eliminar registros en MySQL con PHP

Carlos Eduardo, Pin Indacochea

53

Actualizar registros en MySQL con PHP

Carlos Eduardo, Pin Indacochea

54

Actualizar registros en MySQL con PHP

Carlos Eduardo, Pin Indacochea

55

Actualizar registros en MySQL con PHP

Carlos Eduardo, Pin Indacochea

56

Cargar datos a una Lista/Men con PHP

Carlos Eduardo, Pin Indacochea

57

Cargar datos a una Lista/Men con PHP

Carlos Eduardo, Pin Indacochea

58

Cargar datos a una Lista/Men con PHP

Carlos Eduardo, Pin Indacochea

59

Subir imgenes con PHP

Carlos Eduardo, Pin Indacochea

60

Subir imgenes con PHP

Carlos Eduardo, Pin Indacochea

61

Subir imgenes con PHP

Carlos Eduardo, Pin Indacochea

62

Caso 2 - MySQL con PHP


Al caso anterior, agregarle los siguientes parmetros.
    

Pantalla para actualizacin de productos. Pantalla para eliminar productos. Mostrar la lista de productos en un SELECT La tabla productos debe tener imgenes. Aadir diferentes tipos reportes y con diferentes filtros.

Carlos Eduardo, Pin Indacochea

63

CLASE NMERO 6

Procedimientos Almacenados MySQL


La estructura de un procedimiento almacenado es la siguiente:
DELIMITER $$ DROP PROCEDURE IF EXISTS [NOMBRE_PROC]$$ CREATE PROCEDURE [NOMBRE_PROC]([IN/OUT] [ALIASDECAMPO] [TIPO: VARCHAR, INT, ETC]) BEGIN [LGICA DE PROGRAMACIN] END$$ DELIMITER ;

Para llamar al procedimiento almacenado se utiliza el siguiente comando:


CALL [NOMBRE_PROC]([PARAMETOS DEL PROCEDIMIENTO ALMACENADO]); ALMACENADO]); Nota: El DELIMITER se usa para cambiar el final de la lnea de comando, esto sirve para indicar cuando va a terminar el procedimiento almacenado, esto lo veremos con el PHPMYADMIN

Mayor informacin en: http://sentidoweb.com/2007/06/20/laboratorio-triggers-y-procedimientos-almacenados-en-mysql.php http://www.nosolocodigo.com/procedimientos-almacenados-con-mysql-5 http://www.fpress.com/revista/num1205/art.htm

Carlos Eduardo, Pin Indacochea

65

Procedimientos Almacenados MySQL

Carlos Eduardo, Pin Indacochea

66

Vistas en MySQL
La estructura de una Vista es:
CREATE [OR REPLACE] [ALGORITHM = {UNDEFINED | MERGE | TEMPTABLE}] VIEW [nombre_vista] [(columnas)] [nombre_vista] [(columnas)] AS sentencia_ select [WITH [CASCADED | LOCAL] CHECK OPTION]

Para llamarla:
SELECT * FROM [nombre_vista] [nombre_vista]

Un ejemplo:
CREATE VIEW v1 AS SELECT * FROM t2 WHERE EXISTS (SELECT 1 FROM t1 WHERE t1.a = t2.a); UPDATE t1, v2 SET t1.a = 1 WHERE t1.b = v2.b;

Mayor informacin en: http://dev.mysql.com/doc/refman/5.0/es/create-view.html http://dev.mysql.com/doc/refman/5.0/es/view-restrictions.html http://dev.mysql.com/doc/refman/5.0/es/create-view.html

Carlos Eduardo, Pin Indacochea

67

Vistas en MySQL

Carlos Eduardo, Pin Indacochea

68

Desencadenadores en MySQL
Los Desencadenadores o Trigger se ejecutan automticamente ya que trabajan a nivel de tabla, y cuando se da un evento en dicha tabla se genera automticamente dicho evento, la estructura es la siguiente:
CREATE TRIGGER nombre_disp momento_disp evento_disp ON nombre_tabla FOR EACH ROW sentencia_disp Nota de la referencia: Un disparador es un objeto con nombre en una base de datos que se asocia con una tabla, y referencia: se activa cuando ocurre un evento en particular para esa tabla. El disparador queda asociado a la tabla nombre_tabla. Esta debe ser una tabla permanente, no puede ser una tabla TEMPORARY ni una vista.


momento_disp es el momento en que el disparador entra en accin. Puede ser BEFORE (antes) o AFTER (despues), para indicar que el disparador se ejecute antes o despus que la sentencia que lo activa. evento_disp indica la clase de sentencia que activa al disparador. Puede ser INSERT, UPDATE, o DELETE. Por ejemplo, un disparador BEFORE para sentencias INSERT podra utilizarse para validar los valores a insertar. No puede haber dos disparadores en una misma tabla que correspondan al mismo momento y sentencia. Por ejemplo, no se pueden tener dos disparadores BEFORE UPDATE. Pero s es posible tener los disparadores BEFORE UPDATE y BEFORE INSERT o BEFORE UPDATE y AFTER UPDATE.

sentencia_disp es la sentencia que se ejecuta cuando se activa el disparador. Si se desean ejecutar mltiples sentencias, deben colocarse entre BEGIN ... END, el constructor de sentencias compuestas. Esto adems posibilita emplear las mismas sentencias permitidas en rutinas almacenadas.

Mayor informacin en: http://dev.mysql.com/doc/refman/5.0/es/triggers.html

Carlos Eduardo, Pin Indacochea

69

Desencadenadores en MySQL

Carlos Eduardo, Pin Indacochea

70

Desencadenadores en MySQL

Carlos Eduardo, Pin Indacochea

71

Manejo de Sesiones ($_SESSION)


Las sesiones en PHP son muy tiles, debido a que permiten mantener el valor de una variable mientras el sitio est activo, hay que recordar que una aplicacin Web es muy diferente a una aplicacin de escritorio, a continuacin tenemos una serie de comandos ms usados para el manejo de sesiones en PHP:


session_start(); session_start(); // Permite el uso de sesiones, debe ir en la cabecera de la pgina PHP $_SESSION[VALOR]=VALUE; // Crea una sesin _SESSION[VALOR]=VALUE; unset($_SESSION[VALOR]); unset($_SESSION[VALOR]); // Elimina una sesin en especial. session_destroy(); session_destroy(); // Destruye todas las sesiones creadas.

Mayor informacin en: http://www.desarrolloweb.com/articulos/235.php

Carlos Eduardo, Pin Indacochea

72

Manejo de Sesiones ($_SESSION)

Carlos Eduardo, Pin Indacochea

73

Caso 3 Carrito de Compras Simple


Crear una simulacin de un carrito de compras sencillo, de la misma forma del ejemplo que se ubica en: http://www.webestilo.com/php/ejem/ejem12e.phtml Finalmente grabar todos los pedidos en una base de datos que ser elaborada de la mejor forma que le convenga.

Carlos Eduardo, Pin Indacochea

74

CLASE NMERO 7

ESTILOS (CSS)
CSS: CSS: Cascading Style Sheets; es el lenguaje de hojas de estilos ms Sheets; utilizado para la creacin de pginas Web llamativas y de esta forma mejorar el aspecto visual. Hay 3 formas de utilizar las CSS:
a) b) c)

Asignando el estilo dentro de cada elemento HTML (No recomendado) Dentro del mismo cdigo (No recomendado) En una hoja de estilos a parte (Recomendado)

Nosotros slo utilizaremos la tercera, la sintaxis HTML bsica para llamar a un documento CSS de un archivo es:
<link rel="stylesheet" type="text/css" href=UBICACIN CSS" />
Mayor informacin en: http://www.w3c.es/divulgacion/guiasbreves/HojasEstilo http://es.kioskea.net/contents/css/cssposition.php3

Carlos Eduardo, Pin Indacochea

76

ESTILOS (CSS)
Las hojas de estilos se dividen en componentes HTML, clases y ID, cada una de ellas se simboliza de la siguiente manera: Clases (.[NOMBRE]): Seala a un grupo de objetos que puede llevar la [NOMBRE]): misma clase, es llamada dentro del componente HTML de la siguiente manera: <div class=[CLASE]>ALGO</div>; cuando se lleva un punto (.); automticamente HTML lo reconoce como CLASE. ID (#[NOMBRE]): Es una llave primaria, es decir, nicamente lo puede (#[NOMBRE]): llevar un objeto HTML ya que es la mejor prctica, por lo general se usa en casos muy concisos o para trabajar anidado a JavaScript y finalmente formar AJAX. Los componentes HTML son: h1, h2, h3, h4, span, div, input, select, span, div, select, body, etc; y van sin punto (.) ni #; simplemente como su nombre lo etc; indica. indica.

Carlos Eduardo, Pin Indacochea

77

ESTILOS (CSS)

Nota: La extensin de las hojas de estilos es *.CSS (.css); podemos encontrar varios ejemplos en Internet y tambin en el mismo DreamWeaver

Carlos Eduardo, Pin Indacochea

78

Caso 3 Armar una pgina con CSS


Use el caso 2 y cree una hoja de estilos para darle un aspecto visual agradable y que finalmente se convierta en un sistema pequeo con un diseo sencillo.

Carlos Eduardo, Pin Indacochea

79

CLASE NMERO 8

Introduccin al patrn MVC


El patrn MVC (Modelo Vista Controlador) es un patrn de diseo que nos ayuda a darle cierta estructura lgica a nuestras aplicaciones. El principal objetivo es separar la lgica del negocio de la lgica de presentacin interfaz.

Mayor informacin en: http://www.proactiva-calidad.com/java/patrones/mvc.html Carlos Eduardo, Pin Indacochea 81

Introduccin al patrn MVC


MODELO

Carlos Eduardo, Pin Indacochea

82

Introduccin al patrn MVC


VISTA

Carlos Eduardo, Pin Indacochea

83

Introduccin al patrn MVC


CONTROLADOR

Carlos Eduardo, Pin Indacochea

84

JavaScript

Carlos Eduardo, Pin Indacochea

85

JavaScript

Carlos Eduardo, Pin Indacochea

86

JavaScript
Para llevar la parte de JavaScript usaremos:


http://www.ulpgc.es/otros/tutoriales/JavaScript/index.htm http://www.elcodigo.net/cgibin/DBread.cgi?tabla=herramientas&campo=0&clave=49&info=1 http://www.htmlpoint.com/javascript/tutorial/ http://librosweb.es/ajax/ (RECOMENDADO)

Carlos Eduardo, Pin Indacochea

87

Ejercicios
Incorpore al Caso 2 los patrones de diseo MVC y vea la mejor forma de incorporar JavaScript en los eventos, sea para re direccionar, mensajes de alerta, etc.

Carlos Eduardo, Pin Indacochea

88

CLASE NMERO 9

Introduccin a AJAX (XMLHttpRequest)


AJAX (Asynchronous JavaScript And XML); es una tcnica de desarrollo Web para evitar la XML); sobrecarga de la pgina innecesaria. La estructura bsica del objeto de AJAX es la siguiente:
function getXMLHttpRequest(){ getXMLHttpRequest(){ var xmlhttp=false; xmlhttp=false; try{ // Crea objeto AJAX para navegadores diferentes a Internet Explorer xmlhttp=new ActiveXObject("Msxml12.XMLHTTP"); xmlhttp=new ActiveXObject("Msxml12.XMLHTTP"); }catch(e){ try{ // Crea objeto AJAX para navegadores de Internet Explorer xmlhttp=new ActiveXObject("Microsoft:XMLHTTP"); xmlhttp=new ActiveXObject("Microsoft:XMLHTTP"); }catch(E){ if(!xmlhttp && typeof XMLHttpRequest!='undefined'){ if (!xmlhttp XMLHttpRequest!='undefined'){ xmlhttp=new XMLHttpRequest(); xmlhttp=new XMLHttpRequest(); } } } return xmlhttp; xmlhttp; } Mayor informacin en: http://librosweb.es/ajax/index.html http://www.cristalab.com/tutoriales/introduccion-a-ajax-con-php-y-formularios-c165l/

Carlos Eduardo, Pin Indacochea

90

Autocompletado con AJAX

Carlos Eduardo, Pin Indacochea

91

Autocompletado con AJAX

Carlos Eduardo, Pin Indacochea

92

Autocompletado con AJAX

Carlos Eduardo, Pin Indacochea

93

Autocompletado con AJAX

Carlos Eduardo, Pin Indacochea

94

Autocompletado con AJAX

Carlos Eduardo, Pin Indacochea

95

Ejercicios
Incorpore al autocompletado elaborado con AJAX la posibilidad que al hacer CLICK en un TEXTO que aparece por debajo del texto digitado, se copie y pegue a la caja de texto original y desaparezca el auto sugeridor para completar la palabra.

Carlos Eduardo, Pin Indacochea

96

CLASE NMERO 10

Introduccin a JQUERY
jQuery es una librera JavaScript muy rpida y muy ligera que simplifica el desarrollo de la parte de cliente de las aplicaciones Web. En otras palabras, jQuery incluye muchas utilidades para crear fcilmente las pginas web de las aplicaciones dinmicas complejas. Las libreras jQuery son un archivo .JS que se invoca de la siguiente manera:
<script type="text/javascript src="jquery.js"></script> type="text/javascript

Carlos Eduardo, Pin Indacochea

98

JQUERY
jQuery tiene una sintaxis muy sencilla. Los comandos se reconocen por comenzar con el smbolo "$". Ahora, la forma de una sentencia es la siguiente: $(elemento).evento(funcin-o-parmetro); (elemento).evento(funcin- parmetro); Un ejemplo:

$(document).ready(function(){ (document). // Aqui tu cdigo }); });


Carlos Eduardo, Pin Indacochea 99

JQUERY
Veamos un ejemplo JAVASCRIPT y JQUERY:
JAVASCRIPT
// Seleccionar un elemento document.getElementById("miParrafo"); document.getElementById("miParrafo"); // Seleccionar todos los enlaces document.getElementsByTagName("a"); document.getElementsByTagName("a"); // Seleccionar todo lo anterior ? // Seleccionar mediante la clase CSS ?

comparativo

entre

JQUERY
// Seleccionar un elemento $("#miParrafo"); $("#miParrafo"); // Seleccionar todos los enlaces $("a"); // Seleccionar todo lo anterior $("#miParrafo, $("#miParrafo, a") // Seleccionar mediante la clase CSS $(".miClase") $(".miClase")

Carlos Eduardo, Pin Indacochea

100

JQUERY
Referencias en:


http://www.cristalab.com/tutoriales/tutorial-de-jquery-c214l/ http://www.desarrolloweb.com/manuales/manual-jquery.html http://www.maestrosdelweb.com/editorial/javascript-facil-y-rapidocon-jquery/ http://www.noupe.com/jquery/50-amazing-jquery-examplespart1.html

Carlos Eduardo, Pin Indacochea

101

Carlos Eduardo, Pin Indacochea

102