Está en la página 1de 13

Escuela Profesional de Ing.

de Sistemas UNAP

DESARROLLO DE APLICACIONES
WEB AJAX UTILIZANOD JSON,
JQUERY, KOHANA Y MYSQL

Ing. Elvis A. Aliaga Payehuanca

Escuela Profesional de Ing. de Sistemas UNAP

TALLER I
Se le encarga a Ud. la implementacin de una Aplicacin Web para el registro de
Participantes al Evento: DESARROLLO DE APLICACIONES WEB AJAX

UTILIZANOD JSON, JQUERY, KOHANA Y MySQL.


1. Los Datos que los participantes deben de ingresar son los siguientes:


Cdigo de Matrcula

Apellidos Paterno

Apellido Materno

Nombres

Correo Electrnico

Cdigo de Verificacin

El Participante al evento debe de indicar si va a requerir o no el


Certificado del Evento (lo cual tiene costo de S/.5)

2. Se debe de Validar los datos ingresados, los datos obligatorios son: Cdigo de
matrcula (6 dgitos), Apellido paterno, Apellido Materno, Nombres, email
(validar si es correcto), cdigo de verificacin.
3. Se adjunta el script de la base de datos, en la que tambin se tiene una tabla
de estudiantes de la Escuela Profesional de Ing. De sistemas de la UNAP con
la que Ud. Debe de hacer la validacin de los datos ingresados al momento de
registrarse.
4. Un vez validado los datos, la aplicacin debe de enviar un correo a la direccin
electrnica que especific el participante en ella se enviar informacin del
Temario del Curso Taller, Lugar, Fecha y Hora y dems datos que fueran
necesarios.
5. Para los organizadores del Evento se requiere un listado de todos los
participantes inscritos cos los datos: Cdigo de matrcula, Apellidos y Nombres,
Telfono, Fecha y hora de inscripcin y si requieren certificado o no.
6. El anterior reporte se requiere en formato PDF.
La aplicacin deber ser Implementarlo utilizando XHTML, CSS, JavaScript, PHP,
Mysql, las peticiones usando Ajax con Jquery adems el intercambio de datos
deber de realizarse en formato JSON y los reportes utilizando la librera TCPDF.

Ing. Elvis A. Aliaga Payehuanca

Escuela Profesional de Ing. de Sistemas UNAP

FORMULARIO DE REGISTRO DE PARTICIPANTES AL EVENTO:

Ing. Elvis A. Aliaga Payehuanca

Escuela Profesional de Ing. de Sistemas UNAP

registro.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta scheme="" content="EPISUNAP.net - E. P. Ing. Sistemas UNA Puno" name="SearchTitle"/>
<meta scheme="" content="www.episunap.net, episunap.net, episunap, informatica, consultoria, web, 2.0,
estudiantes, alumnos, universidad, una puno, altiplano" name="Keywords"/>
<title>CURSO TALLER: Desarrollo de Aplicaciones Web Ajax con JSON, Jquery, Kohana y Mysql</title>
<link rel=stylesheet href="css/estilos.css" type="text/css">
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/funciones.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$('#txtCodigo').focus();
});
</script>
</head>
<body>
<div id="dDocument" >
<div id="dBody" >
<div style="margin:auto; text-align:center; width:1001px; padding-top:0px; ">
<br />
<div class="tbg">
<table class="text" >
<tr>
<td>
<p class="t1">Desarrollo de Aplicaciones Web Ajax utilizando JSON, Jquery, Kohana y Mysql</p>
<p class="text">Fecha: S&aacute;bado 30 de Abril del 2011, Hora: 09:00am (Lab. 01 Escuela Prof. de
Ing. de Sistemas)</p>
<p class="text">
<ul>
<li>MVC (Patr&oacute;n Modelo Vista Controlador)</li>
<li>XHTML, CSS, JAVASCRIPT, DOM</li>
<li>AJAX (Asynchronous JavaScript and XML), JSON</li>
<li>Framework JavaScript Jquery</li>
<li>Framework PHP Kohana</li>
<li>Mysql</li>
<li>Reportes con Tcpdf</li>
</ul>
</p>
<table class="text" cellpadding="5" >
<tr><td><div id="mensaje"></div></td></tr>
<tr>
<td align="right">C&oacute;digo de Matr&iacute;cula:</td>
<td><input name="txtCodigo" id="txtCodigo" type="text" style="width:70px;"
onkeypress="return isNumberKey(event)" MaxLength="6"></td>
</tr>
<tr>
<td align="right">Apellido Paterno:</td>
<td><input name="txtPaterno" id="txtPaterno" type="text" style="width:200px;"
onChange="this.value=this.value.toUpperCase();"></td>
</tr>
<tr>
<td align="right">Apellido Materno:</td>
<td><input name="txtMaterno" id="txtMaterno" type="text" style="width:200px;"
onChange="this.value=this.value.toUpperCase();"></td>
</tr>
<tr>
<td align="right">Nombres:</td>
<td><input name="txtNombres" id="txtNombres" type="text" style="width:250px;"
onChange="this.value=this.value.toUpperCase();"></td>
</tr>
<tr>
<td align="right">e-mail:</td>
<td><input name="txtEmail" id="txtEmail" type="text" style="width:200px;"
onChange="this.value=this.value.toLowerCase();"></td>
</tr>
<tr>
<td align="right">Tel&eacute;fono Movil:</td>
<td><input name="txtFono" id="txtFono" type="text" style="width:150px;"></td>

Ing. Elvis A. Aliaga Payehuanca

Escuela Profesional de Ing. de Sistemas UNAP

</tr>
<tr>
<td align="right">Cod. Verificaci&oacute;n:</td>
<td>
<img src="captcha.php?.png" /><br>(Case Sensitive)<br><input name="txtVerifica"
id="txtVerifica" type="text" style="width:140px;" ></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td><input type="button" value="Registrar" class="enviar" onClick=guardarDatos()></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

Ing. Elvis A. Aliaga Payehuanca

Escuela Profesional de Ing. de Sistemas UNAP

FORMULARIO DE LISTADO DE INSCRITOS:

Ing. Elvis A. Aliaga Payehuanca

Escuela Profesional de Ing. de Sistemas UNAP

listado.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta scheme="" content="EPISUNAP.net - E. P. Ing. Sistemas UNA Puno" name="SearchTitle"/>
<meta scheme="" content="www.episunap.net, episunap.net, episunap, informatica, consultoria, web, 2.0,
estudiantes, alumnos, universidad, una puno, altiplano" name="Keywords"/>
<title>CURSO TALLER: Desarrollo de Aplicaciones Web Ajax con JSON, Jquery, Kohana y Mysql</title>
<link rel=stylesheet href="css/estilos.css" type="text/css">
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/funciones.js'></script>
</head>
<body>
<div id="dDocument" >
<div id="dBody" >
<div style="margin:auto; text-align:center; width:1001px; padding-top:0px; ">
<br />
<div class="tbg">
<table class="text" >
<tr>
<td>
<p class="t1">Desarrollo de Aplicaciones Web Ajax utilizando JSON, Jquery, Kohana y Mysql</p>
<p class="text">Fecha: S&aacute;bado 30 de Abril del 2011, Hora: 09:00am (Lab. 01 Escuela Prof. de
Ing. de Sistemas)</p>
<p class="text">
<ul>
<li>MVC (Patr&oacute;n Modelo Vista Controlador)</li>
<li>XHTML, CSS, JAVASCRIPT, DOM</li>
<li>AJAX (Asynchronous JavaScript and XML), JSON</li>
<li>Framework JavaScript Jquery</li>
<li>Framework PHP Kohana</li>
<li>Mysql</li>
<li>Reportes con Tcpdf</li>
</ul>
</p>
</td>
</tr>
</table>
<tr><td><input type="button" value="Listar Inscritos" onClick=cargarListado() class="enviar" /> </td></tr>
</div>
</div>
</div>
<div id="listado" ></div>
</div>
</body>
</html>

Ing. Elvis A. Aliaga Payehuanca

Escuela Profesional de Ing. de Sistemas UNAP

funciones.js
// Validar y Guardar los datos de registro
function guardarDatos(){
var var_codigo = $("#txtCodigo").val();
var var_paterno = $("#txtPaterno").val();
var var_materno = $("#txtMaterno").val();
var var_nombres = $("#txtNombres").val();
var var_email = $("#txtEmail").val();
var var_fono = $("#txtFono").val();
var var_verifica = $("#txtVerifica").val();
if(var_codigo==''){
alert('Por favor ingrese su Codigo de Matricula.');
$("#txtCodigo").focus();
return;
}
if(var_paterno==''){
alert('Por favor ingrese su Apellido Paterno.');
$("#txtPaterno").focus();
return;
}
if(var_materno==''){
alert('Por favor ingrese su Apellido Materno.');
$("#txtMaterno").focus();
return;
}
if(var_nombres==''){
alert('Por favor ingrese su Nombre.');
$("#txtNombres").focus();
return;
}
if(!validaCorreo(var_email)){
alert('La direccion de Correo Electronico es Incorrecta.');
$("#txtEmail").focus();
return;
}
$.ajax({
type: "POST",
url: "guardar.php",
data:
"codigo="+var_codigo+"&paterno="+var_paterno+"&materno="+var_materno+"&nombres="+var_nombres+"&email
="+var_email+"&fono="+var_fono+"&verifica="+var_verifica,
success: function(respuesta){
if(respuesta != "Ok"){
alert(respuesta);
}
else{
alert('Felicitaciones...!!! Sus Datos has sido registrados correctamente. \n Se ha enviado un mensaje a su Email
con indicaciones a cerca del Curso Taller.');
location.reload();
}
}
});
}
// Validar una direccin de correo electrnico
function validaCorreo(valor)
{
var reg=/(^[a-zA-Z0-9._-]{1,30})@([a-zA-Z0-9.-]{1,30}$)/;
if(reg.test(valor)) return true;
else return false;
}
// Slo nmeros
function isNumberKey(evt)
{ var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}

Ing. Elvis A. Aliaga Payehuanca

Escuela Profesional de Ing. de Sistemas UNAP

// Cargar listado de inscritos


function cargarListado() {
$.ajax({
type: "POST",
url: "getlistado.php",
success: function(datos){
alert("");
texto = "";
texto += "<table align='center' class='data'>";
texto += "<tr><td colspan='5' align='center'>PARTICIPANTES INSCRITOS AL CURSO
TALLER</td></tr>";
texto +=
"<tr><th>C&oacute;digo</th><th>Nombre</th><th>Email</th><th>Telefono</th><th>Fecha y
Hora</th></tr>";
registros = eval(datos);
var_sumatotal = 0.00;
for (var i=0; i < registros.length; i++) {
texto += "<tr><td align='center'>"+registros[i].codigo+"</td>";
texto += "<td>"+registros[i].nombres+"</td>";
texto += "<td>"+registros[i].email+"</td>";
texto += "<td>"+registros[i].fono+"</td>";
texto += "<td>"+registros[i].hora+"</td></tr>";
}
texto += "<tr><td colspan='5' style='text-align:right'></td></tr>";
texto += "</table>";
$('#listado').append(texto);
}
});
}

Ing. Elvis A. Aliaga Payehuanca

Escuela Profesional de Ing. de Sistemas UNAP

cn_on.php
<?php
$hostname = "localhost";
$database = "taller";
$username = "root";
$password = "12345";
$link = mysql_connect($hostname, $username, $password);
mysql_select_db("taller", $link);
?>

cn_off.php
<?php
if(isset($link))
mysql_close($link);
?>

Ing. Elvis A. Aliaga Payehuanca

Escuela Profesional de Ing. de Sistemas UNAP

guardar.php
<?php
session_start();
include 'connections/cn_on.php';
$var_codigo = $_POST['codigo'];
$var_paterno = $_POST['paterno'];
$var_materno = $_POST['materno'];
$var_nombres = $_POST['nombres'];
$var_email = $_POST['email'];
$var_fono = $_POST['fono'];
$var_verifica = $_POST['verifica'];
$_SESSION['mensaje'] = "Ok";
$SQLquery = "select count(*) as num from estudiante where num_mat='$var_codigo'";
$SQLresult = mysql_query($SQLquery,$link);
$SQLrow = mysql_fetch_array($SQLresult);
$var_registro = $SQLrow['num'];
if ($var_registro <= 0) {
$_SESSION['mensaje'] = "Error. Codigo de Matricula No Valido.";
echo $_SESSION['mensaje'];
die();
}
if ($_SESSION['CAPTCHAString'] != $var_verifica) {
$_SESSION['mensaje'] = "Codigo de verificacion incorrecto";
echo $_SESSION['mensaje'];
die();
}

$SQLquery = "insert into inscritos (codigo,paterno,materno,nombres,email,fono,hora)


values('$var_codigo','$var_paterno','$var_materno','$var_nombres','$var_email','$var_fono',CURRENT_TIMESTAMP)";
mysql_query($SQLquery,$link);
$asunto = "Nuevo Participante Inscrito al Curso Taller";
$msj = "---------------------------------------------------------------------------------------------------------------------------------------------------- \n";
$msj.= "
Desarrollo de Aplicaciones Web Ajax utilizando JSON, Jquery, Kohana y Mysql
\n";
$msj = "---------------------------------------------------------------------------------------------------------------------------------------------------- \n";
$msj.= "CODIGO DE MATRICULA: ".$var_codigo."\n";
$msj.= "NOMBRE: ".$var_nombres. " " . $var_paterno . " " . $var_materno . "\n";
$msj.= "EMAIL:
".$var_email."\n";
$msj.= "TELEFONO:
".$var_fono."\n";
$msj.= "FECHA Y HORA DE REGISTRO: ".date("d/m/Y")." ".date("h:i:s a")."\n";
$msj.= "---------------------------------------------------------------------------------------------------------------------------------------------------- \n";
$msj.= "Esta Ud. cordialmente invitado al Curso Taller: Desarrollo de Aplicaciones Web Ajax utilizando JSON, Jquery,
Kohana y Mysql, dicho evento netamente prctico se llevar acabo en el Laboratorio 01 de la Escuela Profesional de
Ing. de Sistemas de la UNAP el da sbado 30 de Abril a horas 08:00am.\n\n";
mail($var_email,$asunto,$msj,"FROM: Elvis A. Aliaga Payehuanca <elvis.aliaga@gmail.com>");
include 'connections/cn_off.php';
echo $_SESSION['mensaje'];
?>

Ing. Elvis A. Aliaga Payehuanca

Escuela Profesional de Ing. de Sistemas UNAP

getlistado.php
<?php
include 'connections/cn_on.php';
$SQLquery = "select codigo,paterno,materno,nombres,email,fono,hora from inscritos";
$SQLresult = mysql_query($SQLquery,$link);
$total_registros = mysql_num_rows($SQLresult);
$i = 0;
while($SQLrow = mysql_fetch_array($SQLresult)){
$registros[$i] = array( codigo =>$SQLrow['codigo'],
paterno =>$SQLrow['paterno'],
materno =>$SQLrow['materno'],
nombres =>$SQLrow['nombres'],
email =>$SQLrow['email'],
fono =>$SQLrow['fono'],
hora => $SQLrow['hora']
);
$i++;
}
$output = json_encode($registros);
print($output);
mysql_free_result($SQLresult);
include 'connections/cn_on.php';
?>

Ing. Elvis A. Aliaga Payehuanca

Escuela Profesional de Ing. de Sistemas UNAP

TALLER II
Se trabajar la misma aplicacin pero esta vez se utilizar el Framework PHP
MVC Kohana.

Ing. Elvis A. Aliaga Payehuanca