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

Operadores de
Asignacin

Operadores
Lgicos

Operadores
Condicionales

+ Suma dos valores

= Asigna a la parte
derecha
el
valor
izquierdo

!
Operador
NO
o
negacin .Si era true
pasa a false y viceversa

== Comprueba si dos
nmeros son iguales

- Resta dos valores

+= Realiza la suma de
la
derecha
con
la
izquierda y la asigna a
la derecha

and Operador Y, si
ambos son verdaderos
vale verdadero

!= Comprueba si dos
nmeros son distintos

* Multiplica dos valores

-= Realiza la resta de la
derecha con la izquierda
y la asigna a la derecha

or Operador O, vale
verdadero si alguno de
los dos es verdadero

> Mayor que, devuelve


true en caso afirmativo

/ Divide dos valores

*=
Realiza
la
multiplicacin
de
la
derecha con la izquierda
y la asigna a la derecha

xor Verdadero si alguno


de los dos es true pero
nunca ambos

< Menor que, devuelve


true en caso afirmativo

% Resto de dividir dos


valores

/= Realiza la divisin de
la
derecha
con
la
izquierda y la asigna a
la derecha

&& True si ambos lo son

>= Mayor o igual

++ Incremento en una
unidad

%= Se obtiene el resto
y se asigna

|| True si alguno lo es

<= Menor o igual

-- Decremento en una
unidad

.= Concatena el valor
de la izquierda con la
derecha y lo asigna a la
derecha

Referencia en: http://www.manualdephp.com/manualphp/operadores-php.html


Carlos Eduardo, Pin Indacochea

IF ... ELSE

Nota: Los operador && y || son exactamente iguales a los de Java.


Carlos Eduardo, Pin Indacochea

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
2) 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.
3) Realice un programa que ingrese por variable un nmero del 1 al
5 y muestre un mensaje del nmero que es.
4)

Realice un programa que ingrese un nmero aravico y lo


convierta a nmero romano, considere slo nmeros del 1 al 10.

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;
return [Algo]; // Si es que hay algo para devolver
}
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;
}
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-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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:
<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

2)

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.

3)

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:

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

5)

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.
Carlos Eduardo, Pin Indacochea

28

CLASE NMERO 3

$_GET y $_POST
$_GET: Sirve pasar variables por la URL
$_POST: Sirve para enviar variables o datos al dar
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:

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);
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]

Un

ejemplo de sintaxis SELECT mas detallado


http://dev.mysql.com/doc/refman/5.0/es/select.html

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

lo

podemos

encontrar

Carlos Eduardo, Pin Indacochea

en:

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)
mysql_select_db(BASE DE 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){
$query="INSERT INTO t_persona
VALUES('$a1','$a2','$a3','$a4','$a5','$a6')";
$query=mysql_query($query);
return $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 email; 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]);
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)]
AS sentencia_
select [WITH [CASCADED | LOCAL] CHECK OPTION]

Para llamarla:
SELECT * FROM [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
sentencia_disp

momento_disp

evento_disp ON nombre_tabla FOR EACH ROW

Nota de la referencia: Un disparador es un objeto con nombre en una base de datos que se asocia con
una tabla, y 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(); // Permite el uso de sesiones, debe ir en la cabecera de la pgina PHP

$_SESSION[VALOR]=VALUE; // Crea una sesin

unset($_SESSION[VALOR]); // Elimina una sesin en especial.

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: Cascading Style Sheets; es el lenguaje de hojas de estilos ms
utilizado para la creacin de pginas Web llamativas y de esta forma
mejorar el aspecto visual.
Hay 3 formas de utilizar las CSS:
a)

Asignando el estilo dentro de cada elemento HTML (No


recomendado)

b)

Dentro del mismo cdigo (No recomendado)

c)

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
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
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,
body, etc; y van sin punto (.) ni #; simplemente como su nombre lo
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/cgi-bin/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 sobrecarga de la pgina innecesaria.
La estructura bsica del objeto de AJAX es la siguiente:
function getXMLHttpRequest(){
var xmlhttp=false;
try{
// Crea objeto AJAX para navegadores diferentes a Internet Explorer
xmlhttp=new ActiveXObject("Msxml12.XMLHTTP");
}catch(e){
try{
// Crea objeto AJAX para navegadores de Internet Explorer
xmlhttp=new ActiveXObject("Microsoft:XMLHTTP");
}catch(E){
if(!xmlhttp && typeof XMLHttpRequest!='undefined'){
xmlhttp=new XMLHttpRequest();
}
}
}
return 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>
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);
Un ejemplo:

$(document).ready(function(){
// Aqui tu cdigo
});
Carlos Eduardo, Pin Indacochea

99

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

comparativo

entre

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

Carlos Eduardo, Pin Indacochea

10

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-rapido-con
-jquery
/

http://
www.noupe.com/jquery/50-amazing-jquery-examples-part1.html

Carlos Eduardo, Pin Indacochea

10

Carlos Eduardo, Pin Indacochea

10

También podría gustarte