JQuery Sesion02

UNIVERSIDAD SAN PEDRO ELECTIVO II TEMA: JQUERY + PHP + MYSQL
Ejemplo: Paso 01: Elaborar una base de datos con la siguiente tabla CREATE TABLE `persona` ( `dni` varchar(8) NOT NULL, `nombres` varchar(50) NOT NULL, èmail` varchar(50) NOT NULL, `ciudad` varchar(50) NOT NULL, PRIMARY KEY (`dni`) ) ENGINE = InnoDB; /* Datos*/ INSERT INTO `persona` (`dni`, `nombres`, èmail`, `ciudad`) VALUES ('32786578', 'Juan Perez', 'bagas@yahoo.com', 'Santa'); INSERT INTO `persona` (`dni`, `nombres`, èmail`, `ciudad`) VALUES ('40885245', 'Marco Ruiz', 'budi@gmail.com', 'Chimbote'); INSERT INTO `persona` (`dni`, `nombres`, èmail`, `ciudad`) VALUES ('30889456', 'Rosmery Ramirez', 'drz@desrizal.com', 'Coishco'); COMMIT; Paso 02: Elaborar una pgina PHP <?php mysql_connect("localhost","root",""); mysql_select_db("electivo2"); $op = $_GET['op']; if($op == "mostrar"){ $rs = mysql_query("SELECT dni FROM persona"); echo "<option>Seleccionar</option>\n"; while($fila = mysql_fetch_array($rs)){ echo "<option>".$fila['dni']."</option>\n"; } } else if($op == "consulta"){ $dni = $_GET['dni']; $rs = mysql_query("SELECT * FROM persona WHERE dni='$dni'"); $d = mysql_fetch_array($rs); echo $d['nombres']."|".$d['email']."|".$d['ciudad']; } else if($op == "update"){ $dni = $_GET['dni']; $nombre = htmlspecialchars($_GET['nombre']); $email = htmlspecialchars($_GET['email']);
UNIVERSIDAD SAN PEDRO ELECTIVO II TEMA: JQUERY + PHP + MYSQL $ciudad = htmlspecialchars($_GET['ciudad']); $rpta = mysql_query("UPDATE persona SET nombres='$nombre',email='$email',ciudad='$ciudad' WHERE dni='$dni'"); if($rpta==true){ echo "exito"; }else{ echo "error"; } }else if($op == "delete"){ $dni = $_GET['dni']; $rpta = mysql_query("DELETE FROM persona WHERE dni='$dni'"); if($rpta==true){ echo "exito"; }else{ echo "error"; } }else if($op=="nuevo"){ $dni = $_GET['dni']; $nombre = htmlspecialchars($_GET['nombre']); $email = htmlspecialchars($_GET['email']); $ciudad = htmlspecialchars($_GET['ciudad']); $rpta = mysql_query("INSERT INTO persona VALUES('$dni','$nombre','$email','$ciudad')"); if($rpta==true){ echo "exito"; }else{ echo "error"; } } ?> Paso 03: Disear la siguiente pgina HTML
<body style="font-family:arial;font-size=9px;"> Seleccione DNI: <select id="cbDni"></select> <br> <a id="tabla" style="cursor:pointer;color:red"><u>Nuevo</u></a> <p style="display:none" id="nuevo"> Dni:<br><input type="text" id="txtDni"> </p> <p> Nombre :<br><input type="text" id="txtNombre"><p> E-mail :<br><input type="text" id="txtEmail"><p> Ciudad :<br><input type="text" id="txtCiudad" size="30"><p> <button id="btnActualizar">Actualizar</button> <button id="btnEliminar">Eliminar</button> <button id="btnAgregar">Agregar</button> <br> <span id="status"></span> <img src="loading.gif" id="loading" style="display:none"> </body> </html>
UNIVERSIDAD SAN PEDRO ELECTIVO II TEMA: JQUERY + PHP + MYSQL Paso 04: Importar librera JQuery <script type="text/javascript" src="jquery.js"> </script> Paso 05: Agregar el siguiente cdigo de Javascript <script> var dni; var nombre; var email; var ciudad; var datos; $(document).ready(function(){ $("#cbDni").load("15.php","op=mostrar"); $("#cbDni").change(function(){ dni = $("#cbDni").val(); $("#status").html("Loading..."); $("#loading").show(); $.ajax({ url: "15.php", data: "op=consulta&dni="+dni, cache: false, success: function(msg){ data = msg.split("|"); $("#txtNombre").val(data[0]); $("#txtEmail").val(data[1]); $("#txtCiudad").val(data[2]); //Mostrar imagen de animacion $("#status").html(""); $("#loading").hide(); } }); }); //Clic en el boton Actualizar $("#btnActualizar").click(function(){ dni = $("#cbDni").val(); if(dni=="seleccionar"){ alert("Debe seleccionar un DNI"); exit(); } nombre = $("#txtNombre").val(); email = $("#txtEmail").val(); ciudad = $("#txtCiudad").val(); datos = "&dni="+dni+"&nombre="+nombre+"&email="+email+"&ciudad="+ciudad; $("#status").html("Actualizando...");
UNIVERSIDAD SAN PEDRO ELECTIVO II TEMA: JQUERY + PHP + MYSQL $("#loading").show(); $.ajax({ url: "15.php", data: "op=update"+datos, cache: false, success: function(msg){ if(msg=="exito"){ $("#status").html("Registro Actualizado....."); }else{ $("#status").html("ERROR.."); } $("#loading").hide(); } }); }); //Clic en el boton Eliminar $("#btnEliminar").click(function(){ dni = $("#cbDni").val(); if(dni=="seleccionar"){ alert("Debe seleccionar DNI"); exit(); } $("#status").html("Eliminando....."); $("#loading").show(); $.ajax({ url: "15.php", data: "op=delete&dni="+dni, cache: false, success: function(msg){ if(msg=="exito"){ $("#status").html("Registro Eliminado..."); }else{ $("#status").html("ERROR.."); } $("#txtNombre").val(""); $("#txtEmail").val(""); $("#txtCiudad").val(""); $("#loading").hide(); $("#cbDni").load("15.php","op=mostrar"); } }); }); //Limpiar controles $("#tabla").click(function(){ $("#nuevo").show(); $("#txtDni").val(""); $("#txtNombre").val("");
UNIVERSIDAD SAN PEDRO ELECTIVO II TEMA: JQUERY + PHP + MYSQL $("#txtEmail").val(""); $("#txtCiudad").val(""); }); //Clic en Agregar $("#btnAgregar").click(function(){ dni = $("#txtDni").val(); if(dni==""){ alert("Debe ingresar DNI"); exit(); } nombre = $("#txtNombre").val(); email = $("#txtEmail").val(); ciudad = $("#txtCiudad").val(); datos = "&dni="+dni+"&nombre="+nombre+"&email="+email+"&ciudad="+ciudad; $("#status").html("Almacenando registro..."); $("#loading").show(); $.ajax({ url: "15.php", data: "op=nuevo"+datos, cache: false, success: function(msg){ alert(msg); if(msg=="exito"){ $("#status").html("Registro Almacenado..."); }else{ $("#status").html("Errror...."); } $("#loading").hide(); $("#cbDni").load("15.php","op=mostrar"); $("#nuevo").hide(); $("#txtDni").val(""); } }); }); }); </script>
UNIVERSIDAD SAN PEDRO ELECTIVO II TEMA: JQUERY + PHP + MYSQL Paso 05: Funcionamiento de la pgina HTML

JQuery Sesion02

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

JQuery Sesion02

Transféré par

Droits d'auteur :

Formats disponibles

UNIVERSIDAD SAN PEDRO ELECTIVO II TEMA: JQUERY + PHP + MYSQL

Vous aimerez peut-être aussi