Sentencias de control en PHP con jQuery en pginas no recargables

Curso: Ingeniera de software. Docente : Ing. Huarote Zegarra Ral Sesin 9

Objetivo
Conocer las sentencias de control propias del PHP. Crear clases y objetos en paginas web. Manipulacin de cadenas Utilizacin de jQuery en paginas no recargables.

Contenido
Sentencias de control. Orientado a objetos con PHP Jquery

Sentencias de control
Sentencias de control if if (expr) sentencia Como se describe en la seccin sobre expresiones, expr se evala a su valor condicional. Si expr se evala como TRUE, PHP ejecutar la sentencia, y si se evala como FALSE - la ignorar. El siguiente ejemplo mostrara a es mayor que b si $a fuera mayor que $b: if ($a > $b) print "a es mayor que b";

Sentencias de control
Sentencias de control else if (expr) sentencia else sentencia A menudo queremos ejecutar una sentencia si se cumple una cierta condicion, y una sentencia distinta si la condicin no se cumple. Esto es para lo que sirve else. else extiende una sentencia if para ejecutar una sentencia en caso de que la expresin en la sentencia if se evale como FALSE. Por ejemplo, el siguiente cdigo mostrara a es mayor que b si $a fuera mayor que $b, y a NO es mayor que b en cualquier otro caso:

Sentencias de control
Sentencias de control else if ($a > $b) { print "a es mayor que b"; } else { print "a NO es mayor que b"; } La sentencia else se ejecuta solamente si la expresin if se evala como FALSE, y si hubiera alguna expresin elseif - slo si se evaluaron tambin a FALSE (Ver elseif).

Sentencias de control
Sentencias de control elseif elseif, como su nombre sugiere, es una combinacin de if y else. Como else, extiende una sentencia if para ejecutar una sentencia diferente en caso de que la expresin if original se evala como FALSE. No obstante, a diferencia de else, ejecutar esa expresin alternativa solamente si la expresin condicional elseif se evala como TRUE. Por ejemplo, el siguiente cdigo mostrara a es mayor que b, a es igual a b o a es menor que b:

Sentencias de control

Sentencias de control elseif if ($a > $b) { print "a es mayor que b"; } elseif ($a == $b) { print "a es igual que b"; } else { print "a es mayor que b"; }

Sentencias de control
Sentencias while while (expr) sentencia El significado de una sentencia while es simple. Le dice a PHP que ejecute la(s) sentencia(s) anidada(s) repetidamente, mientras la expresin while se evale como TRUE. El valor de la expresin es comprobado cada vez al principio del bucle, as que incluso si este valor cambia durante la ejecucin de la(s) sentencia(s) anidada(s), la ejecucin no parar hasta el fin de la iteracin (cada vez que PHP ejecuta las sentencias en el bucle es una iteracin). A veces, si la expresin while se evala como FALSE desde el principio de todo, la(s) sentencia(s) anidada(s) no se ejecutarn ni siquiera una vez Como con la sentencia if, se pueden agrupar multiples sentencias dentro del mismo bucle while encerrando un grupo de sentencias con llaves, o usando la sintaxis alternativa: while (expr): sentencia ... endwhile;

Sentencias de control
Sentencias while Los siguientes ejemplos son idnticos, y ambos imprimen nmeros del 1 al 10: /* ejemplo 1 */ $i = 1; while ($i <= 10) { print $i++; /* el valor impreso sera $i antes del incremento (post-incremento) */ } /* ejemplo 2 */ $i = 1; while ($i <= 10): print $i; $i++; endwhile;

Sentencias de control
Sentencias dowhile Los bucles do..while son muy similares a los bucles while, excepto que las condiciones se comprueban al final de cada iteracin en vez de al principio. La principal diferencia frente a los bucles regulares while es que se garantiza la ejecucin de la primera iteracin de un bucle do..while (la condicin se comprueba slo al final de la iteracin), mientras que puede no ser necesariamente ejecutada con un bucle while regular (la condicin se comprueba al principio de cada iteracin, si esta se evala como FALSE desde el principio la ejecucin del bucle finalizar inmediatamente). Hay una sola sintaxis para los bucles do..while: $i = 0; do { print $i; } while ($i>0);

Sentencias de control
Sentencias for Los bucles for son los bucles ms complejos en PHP. Se comportan como su contrapartida en C. La sintaxis de un bucle for es: for (expr1; expr2; expr3) sentencia /* ejemplo 1 */ for ($i = 1; $i <= 10; $i++) { print $i; } /* ejemplo 2 */ for ($i = 1;;$i++) { if ($i > 10) { break; } print $i; }

Sentencias de control
Sentencias foreach incluye una construccin foreach, tal como perl y algunos otros lenguajes. Esto simplemente da un modo fcil de iterar sobre arrays. Hay dos sintaxis; la segunda es una extensin menor, pero til de la primera: foreach(expresion_array as $value) sentencia foreach(expresion_array as $key => $value) sentencia

Sentencias de control
Sentencias foreach La primera forma recorre el array dado por expresion_array. En cada iteracin, el valor del elemento actual se asigna a $value y el puntero interno del array se avanza en una unidad (as en el siguiente paso, se estar mirando el elemento siguiente). La segunda manera hace lo mismo, salvo que la clave del elemento actual ser asignada a la variable $key en cada iteracin.

Sentencias de control
Sentencias switch La sentencia switch es similar a una serie de sentencias IF en la misma expresin. En muchas ocasiones, se quiere comparar la misma variable (o expresin) con nuchos valores diferentes, y ejecutar una parte de cdigo distinta dependiendo de a qu valor es igual. Para ello sirve la sentencia switch. Los siguientes dos ejemplos son dos modos distintos if ($i == 0) { print "i es igual a 0"; } if ($i == 1) { print "i es igual a 1"; } if ($i == 2) { print "i es igual a 2"; }

Sentencias de control
Sentencias switch switch ($i) { case 0: print "i es igual a 0"; break; case 1: print "i es igual a 1"; break; case 2: print "i es igual a 2"; break; }

Orientado a objetos en PHP

Una clase es una coleccin de variables y de funciones que acceden a esas variables. Una clase se define con la siguiente sintaxis:

Orientado a objetos en PHP

<?php class Cart { var $items; // Items en nuestro carro de la compra // Aadir $num artculos de tipo $artnr al carro function add_item ($artnr, $num) { $this->items[$artnr] += $num; } // Sacar $num artculos del tipo $artnr del carro function remove_item ($artnr, $num) { if ($this->items[$artnr] > $num) { $this->items[$artnr] -= $num; return true; } else { return false; } } } ?>

Orientado a objetos en PHP

El ejemplo define una clase llamada Cart que consiste en un array asociativo de artculos en el carro y dos funciones para meter y sacar tems del carro Las clases son tipos, es decir, son plantillas para variables. Tienes que crear una variable del tipo deseado con el operador new. $cart = new Cart; $cart->add_item("10", 1);

Orientado a objetos en PHP

Este ejemplo crea un objeto $cart de clase Cart. La funcin add_item() de ese objeto se llama para aadir un item del artculo nmero 10 al carro. Las Clases pueden ser extensiones de otras clases. Las clases extendidas o derivadas tienen todas las variables y funciones de la clase base y lo que les aadas al extender la definicin. La herencia mltiple no est soportada.

Orientado a objetos en PHP

class Named_Cart extends Cart { var $owner; function set_owner ($name) { $this->owner = $name; } }

Orientado a objetos en PHP

Ese ejemplo define una clase Named_Cart (carro con nombre o dueo) que tiene todas las variables y funciones de Cart, y adems aade la variable $owner y una funcin adicional set_owner(). Un carro con nombre se crea de la forma habitual y, una vez hecho, puedes acceder al propietario del carro. En los carros con nombre tambin puedes acceder a las funciones normales del carro: $ncart = new Named_Cart; // Creamos un carro con nombre $ncart->set_owner ("kris"); // Nombramos el carro print $ncart->owner; // Imprimimos el nombre del propietario $ncart->add_item ("10", 1); // Funcionalidad heredada de Cart

Manejo con jQuery

jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manejar eventos, agregar interaccin con la tcnica AJAX a pginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. jQuery es software libre y de cdigo abierto, posee un doble licenciamiento bajo la Licencia MIT y la Licencia Pblica General de GNU v2, permitiendo su uso en proyectos libres y privativos.1 jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requeriran de mucho ms cdigo, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.

Manejo con Ajax

Que es Ajax? AJAX son las siglas de Asynchronous JavaScript And XML. No es un lenguaje de programacin sino un conjunto de tecnologas (HTML-JavaScript-CSS-DHTMLPHP/ASP.NET/JSP-XML) que nos permiten hacer pginas de internet ms interactivas. La caracterstica fundamental de AJAX es permitir actualizar parte de una pgina con informacin que se encuentra en el servidor sin tener que refrescar completamente la pgina. De modo similar podemos enviar informacin al servidor. La complejidad se encuentra en que debemos domininar varias tecnologas: HTML o XHTML CSS JavaScript PHP o algn otro lenguaje que se ejecute en el servidor tambin como el ASP.Net/JSP

Manejo con Ajax

Ventajas Utiliza tecnologas ya existentes. Soportada por la mayora de los navegadores modernos. Interactividad. El usuario no tiene que esperar hasta que llegen los datos del servidor. Portabilidad (no requiere plug-in como Flash y Applet de Java) Mayor velocidad, esto debido que no hay que retornar toda la pgina nuevamente. La pgina se asemeja a una aplicacin de escritorio. Desventajas Se pierde el concepto de volver a la pgina anterior. Si se guarda en favoritos no necesariamente al visitar nuevamente el sitio se ubique donde nos encontrabamos al grabarla. La existencia de pginas con AJAX y otras sin esta tecnologa hace que el usuario se desoriente. Problemas con navegadores antiguos que no implementan esta tecnologa. No funciona si el usuario tiene desactivado el JavaScript en su navegador. Requiere programadores que conozcan todas las tecnologas que intervienen en AJAX. Dependiendo de la carga del servidor podemos experimentar tiempos tardos de respuesta que desconciertan al visitante.

Ejemplo
Primero debemos tener en cuenta nuestra estructura de carpeta: Formas establecidas en sesiones anteriores.

Ejemplo
Donde css contiene: Donde img contiene:

Donde js contiene:

Ejemplo
Formato de trabajo

Men u Id=hoja

Id=contenido

Ejemplo
Donde php contiene:

Parte del cdigo de index.php tenemos (donde se encuentra la section):

Cabe resaltar que estamos creando un <div id=hoja></div> con el fin de ah introducir nuestro cdigo por medio del ajax

Ejemplo
Parte del cdigo de index.php tenemos (donde pertenece a la cabecera):

Cabe resaltar que se va a invocar a la funcin inicialcliente() cuando se le de un click al men

Ejemplo
Cabe destacar que inicialcliente() es el cdigo en el cual va a invocar al mijs.js que esta dentro de la carpeta js, y el cdigo es el siguiente: 1 function inicialcliente(){ 2 if(window.XMLHttpRequest){ 3 xmlhttp = new XMLHttpRequest(); 4 }else{ 5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 6 } 7 xmlhttp.onreadystatechange = function(){ 8 if(xmlhttp.readyState==4 && xmlhttp.status==200){ 9 10 document.getElementById("hoja").innerHTML = xmlhttp.responseText; 12 } 13 } 14 xmlhttp.open("GET","cliente/inicialcliente.php",true); 15 xmlhttp.send(null); 16 }

Ejemplo
Lnea: 1: Inicializa el nombre de la funcin propia del java script 2: Evala si es que el tipo de navegador lo soporta tales como Mozilla, Google Crone, Opera. 3: asigna a xmlhttp como objeto de la clase XMLHttpRequest(); 4: Condicional de que no lo soporte 5: asigna a xmlhttp como objeto de la clase XMLHttpRequest(); considerando que el navegador es IE. 6: termino de la condicion de la linea 2 7 al 13: evalua si es que la pagina esta totalmente cargada y lista.

Ejemplo
Lnea: 14: invoca mediante el mtodo get al un archivo php con la ruta correspondiente y la respuesta lo almacena en el Id = hoja establecido en la lnea 10 15: Termina el envo de datos al id correspondiente NOTA: Lo que hace el codigo es invocar al arvhivo inicialcliente.php y obtener lo que se desee escribir e incrustarlo dentro del contenido del div id=hoja Veremos lo que contiene el archivo incialcliente.php

Ejemplo
incialcliente.php <?php $c = "<p align=\"right\">Buscar Cliente: <input type=\"text\" class=\"round\" id=\"nombre\" onkeyup=\"sugerenciacliente(this.value);\" /><a href=\"#\" onclick=\"agregarcliente()\" class=\"button small blue\">Nuevo</a></p><br><div id=\"contenido\"></div>"; echo $c; ?>

Primero centro hacia la derecha Buscar Cliente seguido de colocar una caja de texto, donde que al presionar una caja de texto se ejecuta el evento sugerenciacliente(this.value) que obviamente esta dentro del mijs.js y un boton Nuevo. Adicionalmente creo otro div para colocar el contenido

Ejemplo
Mostrndose de la siguiente manera:

Ejemplo
Debemos ver que hace la funcin sugerenciacliente(this.value) dentro del mijs.js function sugerenciacliente(str) { var xmlhttp; if(str.length==0){ document.getElementById("contenido").innerHTML=""; return; } if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("contenido").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET","cliente/sugerenciacliente.php?q="+str,true); xmlhttp.send(null); }

Ejemplo
Anlogamente a la funcin java script anterior, lo que hace es obtener lo que est por escribir dentro del archivo sugerenciacliente.php y se almacena en el id= contenido Nota: Tomar en cuenta que estas funciones usan cdigos correspondientes al Ajax y estos no son recargables, puesto que se almacenan dentro del div asignado. Considerar que la tabla Cliente tiene los siguientes campos CREATE TABLE `cliente` ( `idcliente` int(11) NOT NULL AUTO_INCREMENT, `nombres` varchar(20) NOT NULL, `apellidos` varchar(20) NOT NULL, `ruc_dni` varchar(12) NOT NULL, `direccion` varchar(50) NOT NULL, `razonsocial` varchar(50) NOT NULL, `telefono` varchar(20) NOT NULL, `email` varchar(20) NOT NULL, `usuario` varchar(20) NOT NULL, `clave` varchar(33) NOT NULL, PRIMARY KEY (`idcliente`));

Ejemplo
sugerenciacliente.php include("../conexion.php"); $db = new MySQL(); $result = $db->consulta("select * from cliente where (nombres like '%".$_GET['q']."%' or apellidos like '%".$_GET['q']."%') order by apellidos,nombres"); $num_registros = is_resource($result) ? mysql_num_rows($result) : 0; if($num_registros==0){ $c = "<center><font color=\"red\"><b>no hay coincidencias</b></font><center>"; }else { $c = "<center><table>"; $c .= "<thead><th>Persona</th><th>RUC o DNI</th><th>Direccion</th><th>Razon Social</th><th>Telefono</th><th>Email</th><th>Usuario</th><th>-</th><th>-</th></thead>"; while($row = mysql_fetch_array($result)){ $c .= "<tr><td> $row[1] $row[2]</td><td> $row[3] </td><td> $row[4] </td><td> $row[5] </td><td> $row[6] </td><td> $row[7] </td><td> $row[8] </td><td><a href=\"#\" onclick =\"modificarcliente($row[0],'$row[1]','$row[2]','$row[3]','$row[4]','$row[5]','$row[6]','$row[7]','$row[8]' );\"><img src=\"../img/editar.jpg\" border=\"0\"></a></td><td><a href=\"#\" onclick =\"eliminarcliente($row[0],'$row[1]','$row[2]');\"><img src=\"../img/eliminar.jpg\" border=\"0\"></a></td></tr>"; } $c .= "</table></center>"; } $db->close(); echo $c;

Ejemplo
Anlogamente a la funcin java script anterior, lo que hace es obtener lo que est por escribir dentro del archivo sugerenciacliente.php y se almacena en el id= contenido Nota: Tomar en cuenta que estas funciones usan cdigos correspondientes al Ajax y estos no son recargables, puesto que se almacenan dentro del div asignado.

Ejemplo
La pantalla que se muestra es la siguiente:

TAREA DE CLASE

Implementar la misma secuencia usando ajax para la tabla producto: CREATE TABLE IF NOT EXISTS `producto` ( `idproducto` int(11) NOT NULL AUTO_INCREMENT, `nombre` varchar(50) NOT NULL, `cantidad` int(11) NOT NULL, `preciounitario` decimal(10,0) NOT NULL, `unidad` varchar(20) NOT NULL, `estado` tinyint(4) NOT NULL, `reposicion` tinyint(4) NOT NULL, PRIMARY KEY (`idproducto`))

TAREA DE LABORATORIO

Crear un formulario emergente para producto.