Anuncios

Sean bienvenidos a este post, en el dia de hoy les mostrare como transformar una pagina creada en el post de API PHP para Mysql pero en esta oportunidad integraremos a todas las paginas creadas con sus respectivas acciones en una sola con Ajax.

Les recomiendo ver estos posts para saber sobre Ajax, vamos a ver la primera pagina, en este caso la llame students.php, aca les dejo el archivo zip conteniendo las dos paginas php pero aca abajo les muestro el codigo de students.php

students.php

<title>Universidad de la Sarasa (Ajax)</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function runAjax(objeto,server){
                var xmlHttp;
                xmlHttp=null;
                if (window.XMLHttpRequest){
                                xmlHttp=new XMLHttpRequest();
                        }
                else if (window.ActiveXObject){
                                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                        }

                if (xmlHttp!=null){
                        var obj=document.getElementById(objeto);
                        xmlHttp.open("GET",server);
                        xmlHttp.onreadystatechange=function(){
                                                if (xmlHttp.readyState==4 && xmlHttp.status==200) {
                                                                obj.innerHTML=xmlHttp.responseText;
                                                        }
                                }
                        }
                else
                        {
                                alert("Este Browser no soporta AJAX");
                        }

                xmlHttp.send(null);
        }

//-->
</script>

<div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:1; left:0; top:0;"></div>
<script language="JavaScript" type="text/JavaScript">
	runAjax('Layer1','ajax.php?id=inicio');
</script>
Anuncios

En esta pagina, de ahora en mas nuestra pagina principal, tenemos una funcion en Javascript llamada runAjax(), esta se encargara de hacer la magia y si desean conocer un poco mas su funcionamiento les recomiendo este post, una breve explicacion sobre esta funcion es basicamente mostrar en un destino la informacion procesada por un archivo de PHP (o algun archivo del lado del servidor), en este caso utilizaremos un div y lo llamaremos Layer1 la cual se encargara de mostrar toda la informacion procesada de nuestro archivo de PHP, en este caso llamado ajax.php. Eso se puede ver despues del div, donde volveremos a utilizar un tag de script, otra vez de Javascript y ahi llamaremos a la funcion antes creada, observen la linea:

runAjax('Layer1','ajax.php?id=inicio');
Anuncios

Como pueden ver, en las primeras comillas simples le indicamos cual div, para este caso pero tambien puede ser una celda de una tabla, vamos a utilizar como receptor de la informacion, y en las segundas comillas simples le informamos el archivo y le pasamos una informacion, es decir le informamos que id va a ser igual a inicio, esto lo vamos a entender un poco mas cuando expliquemos el codigo de ajax.php, a lo cual pasaremos a continuacion, veamos su codigo:

ajax.php

<?php
	header("Content-Type: text/html; charset=UTF-8");
	if (isset($_REQUEST["id"])) { $id=$_REQUEST["id"]; } else { $id=""; }
	if (isset($_REQUEST["sub"])) { $sub=$_REQUEST["sub"]; } else { $sub=""; }
	if (isset($_REQUEST["nombre"])) { $nombre=$_REQUEST["nombre"]; } else { $nombre=""; }
	if (isset($_REQUEST["apellido"])) { $apellido=$_REQUEST["apellido"]; } else { $apellido=""; }
	if (isset($_REQUEST["sexo"])) { $sexo=$_REQUEST["sexo"]; } else { $sexo=""; }
	if (isset($_REQUEST["edad"])) { $edad=$_REQUEST["edad"]; } else { $edad=""; }
	if (isset($_REQUEST["ciudad"])) { $ciudad=$_REQUEST["ciudad"]; } else { $ciudad=""; }
	if (isset($_REQUEST["pcia"])) { $pcia=$_REQUEST["pcia"]; } else { $pcia=""; }
	if (isset($_REQUEST["examen"])) { $examen=$_REQUEST["examen"]; } else { $examen=""; }
	if (isset($_REQUEST["fecha"])) { $fecha=$_REQUEST["fecha"]; } else { $fecha=""; }
	if (isset($_REQUEST["alumno"])) { $alumno=$_REQUEST["alumno"]; } else { $alumno=""; }
	if (isset($_REQUEST["tipo"])) { $tipo=$_REQUEST["tipo"]; } else { $tipo=""; }
	if (isset($_REQUEST["nota"])) { $nota=$_REQUEST["nota"]; } else { $nota=""; }

	include("tutorial.inc");
	tutorial_connect();

?>
<?php if ($id=="inicio") { 
	$queryTotal="select count(*) from alumnos";
	$qTotal=mysql_query($queryTotal);
	while($linea=mysql_fetch_array($qTotal))
	{
		$total=$linea['0'];
	}
?>
<h2>Universidad de la Sarasa</h2>
<br>
Sean bienvenidos a la Universidad de la Sarasa.<br>
<br>
Total de alumnos actualmente: <?php echo $total; ?><br>
<br>
Para ver el listado de alumnos, haz click <a href="" onClick="runAjax('Layer1','ajax.php?id=listado');return false;">aqui</a>.<br>
<br>
Nuevos alumnos, ingresalos por <a href="" onClick="runAjax('Layer1','ajax.php?id=nuevo');return false;">aca</a>.<br>
<br>
Ingresa las notas de los examenes por <a href="" onClick="runAjax('Layer1','ajax.php?id=ingreso');return false;">aqui</a>.
<?php } ?>
<?php if ($id=="listado") { 
	$queryLista = "select concat(apellido,', ',nombre) as nombre, ciudad, edad, id from alumnos order by id asc";
	$qLista = mysql_query($queryLista);
	$l=0;
	while($linea=mysql_fetch_array($qLista))
	{
		$nombre[$l]=$linea['0'];
		$ciudad[$l]=$linea['1'];
		$edad[$l]=$linea['2'];
		$codigo[$l]=$linea['3'];
		$l++;
	}
?>
Listado total de Alumnos<br>
<br>
<table width="500" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;Nombre Completo</td>
    <td>&nbsp;Edad</td>
    <td>&nbsp;Ciudad de Origen</td>
  </tr>
  <?php for($m=0;$m<$l;$m++) {?>
  <tr>
	<td>&nbsp;<a href="" onClick="runAjax('Layer1','ajax.php?id=notas&sub=<?php echo $codigo[$m]; ?>');return false;"><?php echo $nombre[$m]; ?></a></td>
	<td>&nbsp;<?php echo $edad[$m]; ?></td>
	<td>&nbsp;<?php echo $ciudad[$m]; ?></td>
  </tr>
  <?php } ?>
</table>
<br>
<button onClick="location.href='students.php'">Volver</button>
<?php } ?>
<?php if ($id=="notas") { 
	$queryNotas="select concat(alumnos.apellido,', ',alumnos.nombre) as nombre, examenes.fecha, notas.nota, examenes.tipo from notas,examenes,alumnos where notas.alumno_id=$sub and examenes.id=notas.examen_id and alumnos.id=$sub;";
	$qNotas=mysql_query($queryNotas);
	$n=0;
	while($renglon=mysql_fetch_array($qNotas))
	{
		$nombre=$renglon[0];
		$fecha[$n]=$renglon[1];
		$nota[$n]=$renglon[2];
		$tipo[$n]=$renglon[3];
		switch($tipo[$n])
		{
			case "P":
				$tipo[$n]="Parcial";
				break;
			default:
				$tipo[$n]="Examen";
				break;
		}
		$n++;
	}
?>
&nbsp;<?php echo $nombre; ?>
<table width="300" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;Fecha de examen</td>
    <td>&nbsp;Tipo de examen</td>
    <td>&nbsp;Nota</td>
  </tr>
<?php for($m=0;$m<$n;$m++){ ?>  
  <tr>
    <td>&nbsp;<?php echo $fecha[$m]; ?></td>
    <td>&nbsp;<?php echo $tipo[$m]; ?></td>
    <td>&nbsp;<?php echo $nota[$m]; ?></td>
  </tr>
 <?php } ?>
</table><br>
<button onClick="runAjax('Layer1','ajax.php?id=listado');return false;">Volver</button>
<?php } ?>
<?php if ($id=="nuevo") { 
	if ($sub=="subir")
	{
		$queryIngreso="insert into alumnos(id,nombre,apellido,sexo,edad,ciudad,pcia) values (NULL,'$nombre','$apellido','$sexo','$edad','$ciudad','$pcia')";
		$qIngreso=mysql_query($queryIngreso);
	}
?>
  <table width="400" border="1" cellpadding="0" cellspacing="0">
    <tr>
      <td>Nombre</td>
      <td width="252"><input name="nombre" type="text" id="nombre"></td>
    </tr>
    <tr>
      <td>Apellido</td>
      <td><input name="apellido" type="text" id="apellido"></td>
    </tr>
    <tr>
      <td>Sexo</td>
      <td><select name="sexo" id="sexo">
        <option>--</option>
        <option value="F">F</option>
        <option value="M">M</option>
      </select></td>
    </tr>
    <tr>
      <td>Edad</td>
      <td><input name="edad" type="text" id="edad"></td>
    </tr>
    <tr>
      <td>Ciudad de Origen </td>
      <td><input name="ciudad" type="text" id="ciudad"></td>
    </tr>
    <tr>
      <td>Provincia</td>
      <td><input name="pcia" type="text" id="pcia"></td>
    </tr>
  </table>
  <br>
  <button type="button" onClick="runAjax('Layer1','ajax.php?id=nuevo&sub=subir&nombre=' + document.getElementById('nombre').value + '&apellido=' + document.getElementById('apellido').value + '&sexo=' + document.getElementById('sexo').value + '&edad=' + document.getElementById('edad').value + '&ciudad=' + document.getElementById('ciudad').value + '&pcia=' + document.getElementById('pcia').value);return false;">Submitir</button>&nbsp;&nbsp;&nbsp;
  <button type="button" onClick="location.href='students.php'">Cancelar</button>
<?php } ?>
<?php if($id=="ingreso"){ 
	if ($nota!="")
	{
	//echo $examen . ":" . $fecha . ":" . $alumno . ":" . $tipo . ":" . $nota;
		if ($examen=="nuevo")
		{
			$queryExamen="insert into examenes values (NULL,'$fecha','$tipo')";
			//echo $queryExamen;
			$qExamen=mysql_query($queryExamen);
			$queryId="select id from examenes order by id desc limit 1";
			$qId=mysql_query($queryId);
			while($linea=mysql_fetch_array($qId))
			{
				$examen=$linea[0];
			}
		}
		$queryNota="insert into notas values ($alumno, $examen, $nota)";
		//echo $queryNota;
		$qNota=mysql_query($queryNota);
	}
	
	$queryExamenes="select * from examenes order by id asc";
	$qExamenes=mysql_query($queryExamenes);
	
	$queryAlumnos="select id,apellido,nombre from alumnos order by id asc";
	$qAlumnos=mysql_query($queryAlumnos);
	
?>
  <table width="500" border="1" cellpadding="0" cellspacing="0">
   	<?php if($examen!="nuevo") { ?>  
    <tr>
      <td>Elige el examen:</td>
      <td>
	  	<select name="examen" id="examen" onChange="runAjax('Layer1','ajax.php?id=ingreso&examen=' + this.value);return false;">
        <option value="">--</option>
        <option value="nuevo">Nuevo</option>
      	<?php while($linea=mysql_fetch_array($qExamenes)) { ?>  
		<option value="<?php echo $linea[0]; ?>" <?php if ($linea[0]==$examen) { ?>selected<?php } ?>><?php echo $linea[1]; ?></option>
      	<?php } 
			mysql_free_result($linea); ?>  
	  </select></td>
    </tr>
   	<?php } ?>  
   	<?php if($examen=="nuevo") { ?>  
    <tr>
      <td>Ingresa la fecha (AAAA-MM-DD):</td>
      <td><input name="fecha" type="text" id="fecha"><input id="examen" name="examen" type="hidden" value="<?php echo $examen; ?>"></td>
    </tr>
    <tr>
      <td>Elige el tipo de examen </td>
      <td>
		<select name="tipo" id="tipo">
	        <option value="">--</option>			
	        <option value="P">Parcial</option>			
	        <option value="E">Examen</option>			
		</select>
	  </td>
    </tr>
   	<?php } ?>  
    <tr>
      <td>Elige al alumno: </td>
      <td>
	  <select name="alumno" id="alumno">
        <option value="">--</option>
	   	<?php while($linea=mysql_fetch_array($qAlumnos)) { ?>  
        <option value="<?php echo $linea[0]; ?>"><?php echo $linea[1]. ", " . $linea[2]; ?></option>
	   	<?php } 
			mysql_free_result($linea); ?>  
	  </select>
	  </td>
    </tr>
    <tr>
      <td>Ingresa la nota </td>
      <td><input name="nota" type="text" id="nota"></td>
    </tr>
  </table>
  <br>
  <button type="button" onClick="runAjax('Layer1','ajax.php?id=ingreso&examen=' + document.getElementById('examen').value + '&alumno=' + document.getElementById('alumno').value + '&nota=' + document.getElementById('nota').value<?php if ($examen=="nuevo") { ?> + '&fecha=' + document.getElementById('fecha').value + '&tipo=' + document.getElementById('tipo').value<?php } ?>);return false;">Submitir</button>&nbsp;&nbsp;&nbsp;
  <button type="button" onClick="location.href='students.php'">Cancelar</button>
<?php } ?>
Anuncios

Como podemos ver este archivo es un poco mas complejo, vamos a analizarlo por bloques pero este va a ser el verdadero contenedor de nuestra paginas, analicemos el primer bloque, el cual va a ser el codigo de PHP:

<?php
	header("Content-Type: text/html; charset=UTF-8");
	if (isset($_REQUEST["id"])) { $id=$_REQUEST["id"]; } else { $id=""; }
	if (isset($_REQUEST["sub"])) { $sub=$_REQUEST["sub"]; } else { $sub=""; }
	if (isset($_REQUEST["nombre"])) { $nombre=$_REQUEST["nombre"]; } else { $nombre=""; }
	if (isset($_REQUEST["apellido"])) { $apellido=$_REQUEST["apellido"]; } else { $apellido=""; }
	if (isset($_REQUEST["sexo"])) { $sexo=$_REQUEST["sexo"]; } else { $sexo=""; }
	if (isset($_REQUEST["edad"])) { $edad=$_REQUEST["edad"]; } else { $edad=""; }
	if (isset($_REQUEST["ciudad"])) { $ciudad=$_REQUEST["ciudad"]; } else { $ciudad=""; }
	if (isset($_REQUEST["pcia"])) { $pcia=$_REQUEST["pcia"]; } else { $pcia=""; }
	if (isset($_REQUEST["examen"])) { $examen=$_REQUEST["examen"]; } else { $examen=""; }
	if (isset($_REQUEST["fecha"])) { $fecha=$_REQUEST["fecha"]; } else { $fecha=""; }
	if (isset($_REQUEST["alumno"])) { $alumno=$_REQUEST["alumno"]; } else { $alumno=""; }
	if (isset($_REQUEST["tipo"])) { $tipo=$_REQUEST["tipo"]; } else { $tipo=""; }
	if (isset($_REQUEST["nota"])) { $nota=$_REQUEST["nota"]; } else { $nota=""; }

	include("tutorial.inc");
	tutorial_connect();

?>
Anuncios

En este bloque, primero utilizaremos una linea llamada header, en este caso nos permitira mostrar correctamente los caracteres especiales, como la ñ o las palabras acentuadas (á) y algunas mas, despues declararemos las variables a utilizar por cada uno de los bloques, basicamente verifica el estado de la variable informada, por ejemplo vamos a usar id, luego de verificar si id tiene o no contenido pasaremos a un condicional if donde chequea si es verdad, en caso afirmativo crea una variable $id y le asigna el contenido de la misma y en caso contrario crea la variable $id pero la deja vacia, si quieren ver un poco mas en detalle las lineas estas les recomiendo ir a este post, una vez creadas y completas nuestras variables, pasaremos a conectarnos al servidor, como pueden ver volvemos a utilizar nuestro archivo .inc, si desean saber como funciona internamente deben verlo en este post, hasta aqui el primer bloque donde seteamos todas nuestras variables, podriamos llamarlas globales, para el resto de nuestro bloques ahora vamos a ver el segundo

<?php if ($id=="inicio") { 
	$queryTotal="select count(*) from alumnos";
	$qTotal=mysql_query($queryTotal);
	while($linea=mysql_fetch_array($qTotal))
	{
		$total=$linea['0'];
	}
?>
<h2>Universidad de la Sarasa</h2>
<br>
Sean bienvenidos a la Universidad de la Sarasa.<br>
<br>
Total de alumnos actualmente: <?php echo $total; ?><br>
<br>
Para ver el listado de alumnos, haz click <a href="" onClick="runAjax('Layer1','ajax.php?id=listado');return false;">aqui</a>.<br>
<br>
Nuevos alumnos, ingresalos por <a href="" onClick="runAjax('Layer1','ajax.php?id=nuevo');return false;">aca</a>.<br>
<br>
Ingresa las notas de los examenes por <a href="" onClick="runAjax('Layer1','ajax.php?id=ingreso');return false;">aqui</a>.
<?php } ?>
Anuncios

En este bloque vamos a ver el inicio de nuestra pagina, como pueden ver esta encerrado entre dos tags de PHP, el primero va a verificar si $id es igual a inicio, en caso afirmativo va a mostrar el contenido entre los dos tags, en caso contrario lo omite, en este bloque solamente veremos la cantidad de alumnos y los tres “links” para las acciones permitidas, los tres links son para ver el listado de alumnos, agregar nuevos alumnos y agregar las notas de los alumnos, si se dieron cuenta de un detalle de la pagina students.php nosotros resaltaremos esta linea:

runAjax('Layer1','ajax.php?id=inicio');
Anuncios

Observen como al pasar la pagina de donde conseguir todo lo relacionado a Ajax, le pase un dato via url donde le digo el nombre, id, y va a ser igual a inicio, cuando llega a ajax.php este lo procesa con el primer bloque visto anteriormente y nos permte ver el segundo bloque, como pueden darse cuenta esta va a ser nuestra forma de llamar a las distintas secciones, veamos uno de los links de ejemplo:

<a href="" onClick="runAjax('Layer1','ajax.php?id=listado');return false;">aqui</a>
Anuncios

En esta linea pueden ver como utilizo un link (href) para llamar a otra pagina o en este caso seccion, observen que no informo ninguna pagina y la dejo en blanco luego le agrego un evento donde se activa si se hizo click sobre el mismo, en este caso llamamos a la funcion runAjax() donde mantenemos el div de destino, y luego en el archivo modificamos el valor de id para cargar el siguiente bloque, en este caso listado, observen a los otros links y veran como varia id para llamar a sus respectivos bloques, donde id es igual a nuevo es para ingresar nuevos alumnos y id igual a ingreso para ingresar nuevas notas, por ultimo observen que a diferencia de la pagina students.php cuando invocamos a nuestro comando runAjax() lo seguimos con un return false, esto es para evitar la accion del link, en el caso de students.php como solo lo invocamos y no es parte de ningun evento no es necesario usar el return false, ahora veremos el siguiente bloque, en este caso listado

<?php if ($id=="listado") { 
	$queryLista = "select concat(apellido,', ',nombre) as nombre, ciudad, edad, id from alumnos order by id asc";
	$qLista = mysql_query($queryLista);
	$l=0;
	while($linea=mysql_fetch_array($qLista))
	{
		$nombre[$l]=$linea['0'];
		$ciudad[$l]=$linea['1'];
		$edad[$l]=$linea['2'];
		$codigo[$l]=$linea['3'];
		$l++;
	}
?>
Listado total de Alumnos<br>
<br>
<table width="500" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;Nombre Completo</td>
    <td>&nbsp;Edad</td>
    <td>&nbsp;Ciudad de Origen</td>
  </tr>
  <?php for($m=0;$m<$l;$m++) {?>
  <tr>
	<td>&nbsp;<a href="" onClick="runAjax('Layer1','ajax.php?id=notas&sub=<?php echo $codigo[$m]; ?>');return false;"><?php echo $nombre[$m]; ?></a></td>
	<td>&nbsp;<?php echo $edad[$m]; ?></td>
	<td>&nbsp;<?php echo $ciudad[$m]; ?></td>
  </tr>
  <?php } ?>
</table>
<br>
<button onClick="location.href='students.php'">Volver</button>
<?php } ?>
Anuncios

En este bloque dentro del php vamos a crear un listado de los alumnos, los datos los vamos a almacenar en variables del tipo array, el indice de posiciones lo iremos incrementando en el ciclo del while cuando obtenemos la informacion y el valor lo almacenaremos en $l y en ellas almacenaremos algunos de sus datos, como son el codigo de alumno, nombre completo (Apellido y Nombre), edad y ciudad, luego haremos una tabla con tres celdas para indicar el nombre de los campos, luego utilizaremos un bucle for, con el limite establecido por $l, en este bucle crearemos las celdas y le pondremos la informacion a mostrar, en la primer celda vamos a crear un link para ver las notas de cada alumno, observen como usamos el metodo anteriormente pero con una sutil diferencia en el runAjax():

runAjax('Layer1','ajax.php?id=notas&sub=<?php echo $codigo[$m]; ?>');return false
Anuncios

Observen como definimos id para un nuevo bloque y agregamos una variable llamada sub donde le pondremos el valor del codigo del alumno, un ejemplo de como queda nuestra pagina es algo asi:

web00
Anuncios

Y si observan el codigo del bloque veran como modifique al boton volver para ir a students.php porque en este caso necesita volver al principio de todo y por ende podemos hacerlo ir directamente a la pagina. Pasemos al siguiente bloque mostrar las notas del alumno

<?php if ($id=="notas") { 
	$queryNotas="select concat(alumnos.apellido,', ',alumnos.nombre) as nombre, examenes.fecha, notas.nota, examenes.tipo from notas,examenes,alumnos where notas.alumno_id=$sub and examenes.id=notas.examen_id and alumnos.id=$sub;";
	$qNotas=mysql_query($queryNotas);
	$n=0;
	while($renglon=mysql_fetch_array($qNotas))
	{
		$nombre=$renglon[0];
		$fecha[$n]=$renglon[1];
		$nota[$n]=$renglon[2];
		$tipo[$n]=$renglon[3];
		switch($tipo[$n])
		{
			case "P":
				$tipo[$n]="Parcial";
				break;
			default:
				$tipo[$n]="Examen";
				break;
		}
		$n++;
	}
?>
&nbsp;<?php echo $nombre; ?>
<table width="300" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;Fecha de examen</td>
    <td>&nbsp;Tipo de examen</td>
    <td>&nbsp;Nota</td>
  </tr>
<?php for($m=0;$m<$n;$m++){ ?>  
  <tr>
    <td>&nbsp;<?php echo $fecha[$m]; ?></td>
    <td>&nbsp;<?php echo $tipo[$m]; ?></td>
    <td>&nbsp;<?php echo $nota[$m]; ?></td>
  </tr>
 <?php } ?>
</table><br>
<button onClick="runAjax('Layer1','ajax.php?id=listado');return false;">Volver</button>
<?php } ?>
Anuncios

En este bloque lograremos mostrar unicamente las notas del alumno solicitado, en base a ese complejo query, donde extraeremos toda la informacion necesaria, les recomiendo este post donde hablo sobre el comando select y como crear este tipo de queries, una vez obtenida nuestra informacion volvemos a utilizar el procedimiento del array para almacenar nuestra informacion y luego la mostraremos con un bucle for, y vamos a utilizar un boton volver pero esta vez llamara al runAjax() para volver a nuestro listado de alumnos, la salida es asi:

web01
Anuncios

Ahora vamos a pasar a uno de los bloques mas complicados pero no el mas complicado, en este caso el ingreso de nuevos alumnos

<?php if ($id=="nuevo") { 
	if ($sub=="subir")
	{
		$queryIngreso="insert into alumnos(id,nombre,apellido,sexo,edad,ciudad,pcia) values (NULL,'$nombre','$apellido','$sexo','$edad','$ciudad','$pcia')";
		$qIngreso=mysql_query($queryIngreso);
	}
?>
  <table width="400" border="1" cellpadding="0" cellspacing="0">
    <tr>
      <td>Nombre</td>
      <td width="252"><input name="nombre" type="text" id="nombre"></td>
    </tr>
    <tr>
      <td>Apellido</td>
      <td><input name="apellido" type="text" id="apellido"></td>
    </tr>
    <tr>
      <td>Sexo</td>
      <td><select name="sexo" id="sexo">
        <option>--</option>
        <option value="F">F</option>
        <option value="M">M</option>
      </select></td>
    </tr>
    <tr>
      <td>Edad</td>
      <td><input name="edad" type="text" id="edad"></td>
    </tr>
    <tr>
      <td>Ciudad de Origen </td>
      <td><input name="ciudad" type="text" id="ciudad"></td>
    </tr>
    <tr>
      <td>Provincia</td>
      <td><input name="pcia" type="text" id="pcia"></td>
    </tr>
  </table>
  <br>
  <button type="button" onClick="runAjax('Layer1','ajax.php?id=nuevo&sub=subir&nombre=' + document.getElementById('nombre').value + '&apellido=' + document.getElementById('apellido').value + '&sexo=' + document.getElementById('sexo').value + '&edad=' + document.getElementById('edad').value + '&ciudad=' + document.getElementById('ciudad').value + '&pcia=' + document.getElementById('pcia').value);return false;">Submitir</button>&nbsp;&nbsp;&nbsp;
  <button type="button" onClick="location.href='students.php'">Cancelar</button>
<?php } ?>
Anuncios

En este caso vamos a tener una tabla donde ingresaremos toda la informacion de nuestro nuevo alumno, en este caso van a ser nombre, apellido, sexo, edad, ciudad y provincia, y tendremos dos botones uno para volver, donde nos llevara a students.php y el otro boton nos permitira submitir (enviar) la informacion antes mencionada, esto lo hacemos a traves de runAjax() pero esta vez por cada variable deberemos usar el siguiente comando:

document.getElementById('nombre del elemento').value;
Anuncios

En este caso, este comando se encargara de buscar un elemento de la pagina en base al id informado en el parentesis, por ejemplo nombre, ira a este elemento y traera el valor almacenado en el mismo, cuando informamos la direccion de la pagina para Ajax informamos todos los datos de la tabla, por medio del comando antes comentado, por eso cuando vayamos ahi y toda esta informacion sera recolectada por el primer bloque y nos la procesara y almacenara en nuestras variables “globales”, entre todos los datos informados le dijimos a sub tener el valor de subir y este cuando llegue al bloque de nuevo se encontrara con un condicional if el chequeara el valor de $sub, y si $sub es subir este procedera a tomar toda la informacion y subirla a la tabla alumnos. Esto es basicamente lo hecho por el codigo, ahora pasemos al bloque final

<?php if($id=="ingreso"){ 
	if ($nota!="")
	{
	//echo $examen . ":" . $fecha . ":" . $alumno . ":" . $tipo . ":" . $nota;
		if ($examen=="nuevo")
		{
			$queryExamen="insert into examenes values (NULL,'$fecha','$tipo')";
			//echo $queryExamen;
			$qExamen=mysql_query($queryExamen);
			$queryId="select id from examenes order by id desc limit 1";
			$qId=mysql_query($queryId);
			while($linea=mysql_fetch_array($qId))
			{
				$examen=$linea[0];
			}
		}
		$queryNota="insert into notas values ($alumno, $examen, $nota)";
		//echo $queryNota;
		$qNota=mysql_query($queryNota);
	}
	
	$queryExamenes="select * from examenes order by id asc";
	$qExamenes=mysql_query($queryExamenes);
	
	$queryAlumnos="select id,apellido,nombre from alumnos order by id asc";
	$qAlumnos=mysql_query($queryAlumnos);
	
?>
  <table width="500" border="1" cellpadding="0" cellspacing="0">
   	<?php if($examen!="nuevo") { ?>  
    <tr>
      <td>Elige el examen:</td>
      <td>
	  	<select name="examen" id="examen" onChange="runAjax('Layer1','ajax.php?id=ingreso&examen=' + this.value);return false;">
        <option value="">--</option>
        <option value="nuevo">Nuevo</option>
      	<?php while($linea=mysql_fetch_array($qExamenes)) { ?>  
		<option value="<?php echo $linea[0]; ?>" <?php if ($linea[0]==$examen) { ?>selected<?php } ?>><?php echo $linea[1]; ?></option>
      	<?php } 
			mysql_free_result($linea); ?>  
	  </select></td>
    </tr>
   	<?php } ?>  
   	<?php if($examen=="nuevo") { ?>  
    <tr>
      <td>Ingresa la fecha (AAAA-MM-DD):</td>
      <td><input name="fecha" type="text" id="fecha"><input id="examen" name="examen" type="hidden" value="<?php echo $examen; ?>"></td>
    </tr>
    <tr>
      <td>Elige el tipo de examen </td>
      <td>
		<select name="tipo" id="tipo">
	        <option value="">--</option>			
	        <option value="P">Parcial</option>			
	        <option value="E">Examen</option>			
		</select>
	  </td>
    </tr>
   	<?php } ?>  
    <tr>
      <td>Elige al alumno: </td>
      <td>
	  <select name="alumno" id="alumno">
        <option value="">--</option>
	   	<?php while($linea=mysql_fetch_array($qAlumnos)) { ?>  
        <option value="<?php echo $linea[0]; ?>"><?php echo $linea[1]. ", " . $linea[2]; ?></option>
	   	<?php } 
			mysql_free_result($linea); ?>  
	  </select>
	  </td>
    </tr>
    <tr>
      <td>Ingresa la nota </td>
      <td><input name="nota" type="text" id="nota"></td>
    </tr>
  </table>
  <br>
  <button type="button" onClick="runAjax('Layer1','ajax.php?id=ingreso&examen=' + document.getElementById('examen').value + '&alumno=' + document.getElementById('alumno').value + '&nota=' + document.getElementById('nota').value<?php if ($examen=="nuevo") { ?> + '&fecha=' + document.getElementById('fecha').value + '&tipo=' + document.getElementById('tipo').value<?php } ?>);return false;">Submitir</button>&nbsp;&nbsp;&nbsp;
  <button type="button" onClick="location.href='students.php'">Cancelar</button>
<?php } ?>
Anuncios

En este bloque, hablamos sobre como agregar las notas de los examenes de los alumnos, lo mas notorio sera reemplazar la rutina para la carga de un nuevo examen, en el post de este ejemplo utilizamos el metodo submit() del form para refrescar la pagina y hacer el cambio, aca en cambio deberemos rellamar al Ajax pero le pasamos el valor de examen, si es nuevo desaparece el listado de examenes y nos aparece un cuadro de texto para ingresar la fecha en formato mysql (AAAA-MM-DD) y luego el tipo de examen, entre parcial y examen, luego elegiremos al alumno y por ultimo ingresaremos la nota del examen, despues habra dos botones, uno para volver a students.php y otro como en el caso anterior, donde ejecutaremos a runAjax(), en la parte del archivo enviaremos toda la data para la carga pero agregaremos una excepcion, vean la linea de abajo:

<button type="button" onClick="runAjax('Layer1','ajax.php?id=ingreso&examen=' + document.getElementById('examen').value + '&alumno=' + document.getElementById('alumno').value + '&nota=' + document.getElementById('nota').value<?php if ($examen=="nuevo") { ?> + '&fecha=' + document.getElementById('fecha').value + '&tipo=' + document.getElementById('tipo').value<?php } ?>);return false;">Submitir</button>
Anuncios

Como pueden ver primero vamos a enviar los tres valores basicos, los cuales son examen, alumno y nota, despues agregaremos un condicional if en php el cual en caso de $examen sea igual a nuevo, ahi habilitara la fecha y el tipo para subirlo junto con el resto de los datos, una vez rellamado el ajax con toda la data veran como chequea si $nota tiene un valor, en caso de no tener pasa de largo y continua con lo anterior descripto, en caso de tener uno pasa a verificar si $examen es igual a nuevo, en caso afirmativo crea una nueva entrada en examenes, luego le pediremos obtener el id generado para este examen, una vez obtenido reemplazara el valor en $examen y luego cargara la nota en la tabla notas, donde primero cargara el id del alumno, luego el id del examen y por ultimo la nota, en caso de $examen no haber tenido el valor de nuevo, hubiera ejecutado esta accion directamente. Con esto terminamos nuestra explicacion de Ajax, aca les dejo un video de como trabaja

Hasta aqui hemos transformado nuestra pagina de ejemplo utilizada por el API de PHP para mysql, y en lugar de tener cuatro archivos para ejecutar nuestras tareas utilizaremos solamente dos.

Anuncios

En resumen, creamos una pagina de base y otra para nuestras acciones, hemos repasado como utilizar PHP, volvmos a ver algunas implementaciones explicadas anteriormente, como utilizar Ajax para enviar informacion en reemplazo de un formulario, por eso en este post explique porque era poco practico pero como aca manejamos poca informacion no nos afecto mucho pero para mostrar listados y/o informacion es mucho mas practico, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Anuncios

Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.

Tambien podes donar

Es para mantenimiento del sitio, gracias!

$1.00