Código Fácil

2º.Login con PHP, HTML y MYSQL

2016-04-13T18:03:00.003-05:00

Bueno esta entrada es más una actualización del ejemplo de login utilizando el form de html, con php y mysql.
Hago esta actualización por que puedo ver que siguen entrando mucho a ese ejemplo pero ese ejemplo es de hace unos 4 años y pues algunas de las funciones que aparecen ya no son compatibles con las nuevas versiones de PHP por lo que vamos a actualizarnos.
Para dar una comparación pueden ver la antigua entrada aquí.

Para este ejemplo vamos a utilizar 3 archivos:
1.- index.html: Donde pondremos todo el formato html , básicamente será el esqueleto de nuestro de proyecto.
2.- login.php : Este será el archivo donde haremos la conexión con la base de datos.
3.-bienvenido.php: Este archivo solo tienen una linea y será el ejemplo del archivo que se cargaría una vez que los datos fueron ingresados correctamente.

veamos el código del primer archivo (index.html):


<html>
<head>

<style>

   table{
 width:285px;
 height:185px;
 text-align:center;
 background-color:#FFFFCC;
 margin:auto;
  }
</style>

</head>

<body>
<form name="login" method="post" action="login.php">
<table cellpadding="0" cellspacing="0" >
  <tr>
    <th height="39" colspan="2" scope="col">EJEMPLO 1:  LOGIN </th>
  </tr>
  <tr>
    <th width="108" height="49" scope="col">USUARIO</th>
    <th width="176" align="center" scope="col">
    <input name="txtuser" type="text" id="txtuser" /></th>
  </tr>
  <tr>
    <th height="51">PASSWORD</th>
    <td align="center">

       <input name="txtpass" type="password" id="txtpass" />

    </td>
  </tr>
  <tr>
    <td height="46" colspan="2" align="center">
 <input type="submit" name="Submit" value="Iniciar Sesion" />
    </td>
  </tr>
</table>
</form>
</body>
</html>

Expliquemos un poco la diferencia entre este archivo y el de la antigua entrada, no cambio mucho solo que agregamos el estilo desde la sección style que está en el header ya que algunos atributos como align o bgcolor ya no funcionan igual con HTML5.

Pueden observar que al inicio hay una etiqueta de tipo form esto es lo que indica que estamos haciendo un formulario y que por lo tanto vamos a mandar datos. esta etiqueta tiene como atributos el nombre del form que algunas veces no es obligatorio, el metodo que se va a utilizar para el envió de los datos que en este ejemplo utilizaremos el método POST y por ultimo pero no menos importante tenemos un atributo que se llama action en el es donde hacemos la referencia del archivo que va a realizar la validación a la hora de hacer clic en el botón, en este ejemplo pueden ver que hace referencia aun archivo llamado "login.php".
Así luce.

________________________________________________________________

Ahora veamos el código del archivo login.php


<?php

 //Conexion con la base de datos.
 $conexion= new mysqli("localhost","root", "");

 if($conexion->connect_errno){
      echo "Fallo al conectar a MySQL:(". $conexion->connect_errno.")";
 }
 else{
 $conexion->select_db("test");

 //declaramos como variables a los campos de texto del formulario.
 $nombre=$_POST["txtuser"];
 $password=$_POST["txtpass"];

 //Consulta del usuario y el password
 $consulta="SELECT usuario,password FROM usuario

 WHERE usuario='$nombre' and password='$password'";

 if($query= $conexion->query($consulta)){
 $row=$query->fetch_array(); 
 $nr =$query->num_rows;

 //Si existe el usuario lo va a redireccionar a la pagina de Bienvenida.
 if($nr == 1){ 
   header ("Location:bienvenido.php"); 
 }
 //Si no existe lo va a enviar al login otra vez.
 else if($nr <= 0) { 
               header("Location:index.html"); 
 }  
 }
 else{
 echo $conexion->error;  
 }

?>

Los cambios más notables en cuanto a la entrada antigua es el llmado a mysql. Por que antes utilizabamos "=@mysql_connect()" o "mysql_select_db" pero estos comando ya no son válidos si entran a la página de PHP lo podrán corroborar. Ahora recomienda las llamadas por medio de MySQLi o PDO_MySQL .
Bueno expliquemos un poquito el código:

$conexion= new mysqli("localhost","root", "");
La primeras lineas es donde se hace llamado al servidor donde se encuentra ubicada la base de datos. Como estoy utilizando un servidor local (XAMPP o WAMPP) el servidor será localhost, despues los siguientes datos serán el usuario y la contraseña que tienen el permiso para entrar a la base de datos , normalmente estos se quedan como root y sin contraseña.
Lo que sigue es un if() donde validará que se haya podido realizar la conexión, en caso de no poder mandará un error.

Si se pudo conectar correctamente al servidor ahora sigue ingresar el nombre de la base de datos a la que se va a conectar.
$conexion->select_db("test"); Despues tenemos:
$nombre=$_POST["txtuser"];
$password=$_POST["txtpass"];

Estas variables tomarán el valor de los inputs (campos de texto) que se encuentran en el archivo index.html.

Por último la consulta es un select donde vamos a filtrar donde el usuario y el password sean igual a los datos que hay en los campos de texto. si la consulta encuentra aun usuario con estos datos se va a redireccionar la pagina de bienvenida. Si no encuentra ninguno se regresa al login.html, para que se vuelvan a ingresar los datos.

________________________________________________________________

Ahora La pagina de Bienvenida que es "bienvenido.php"


<?php 
echo '<div align=center>

  <font color=Blue><b> Bienvenido sus datos son correctos</b></font>

</div>';
?>

Solo estoy poniendo un mensaje muy sencillo pero se supone que esta seria la página principal a donde se tiene que ir una ves validados los datos.
Y eso sería todo espero que este ejemplo les sigua sirviendo ya con las consultas a mysql actualizadas. Recuerden que es importante entrar a revisar las actulizaciones que cualquier código que utilicen tengan para mantener siempre al día sus proyectos.

Si tienen dudas o recomendaciones al respecto no duden en dejar sus comentarios.

Y no duden en entrar a visitar mi otro ejemplo de login utilizando Ajax en lugar de form. Aquí abajo les dejo la liga:

http://easy-codigo.blogspot.mx/2015/09/ejemplo-1-login-html-ajax-php-mysql.html

"Programar no tiene que ser tan difícil como parece...."

Gráficas con HighCharts (Jquery,js,html)

2016-02-24T14:11:00.002-06:00

En el Blog e posteado algunos tutoriales sobre gráficas utilizando la librería Jpgraph, que para mi es muy completa y sencilla de utilizar. Pero hoy vamos a ver otra librería (Plugin) que nos permite crear gráficas se llama HighCharts.

La principal diferencia entre las dos:

- JpGraph funciona de lado del servidor ya que es una librería PHP.

- HighCharts funciona del lado del cliente usando Js.

Y creo con eso englobo las diferencias jajaja.

Pero si es del lado del cliente entonces ¿Cómo las podrías utilizar para hacerla funcionar con consultas en Mysql?. Bueno una respuesta rápida podría ser Ajax. Así que no hay gran trabajo para utilizarla.

Hoy les voy a dejar el ejemplo de inicio que nos presenta HighCharts en su página oficial, los invito a que la prueben y me dejen sus comentarios, que pros y contras encuentran en utilizar esta utilieria en lugar de Jpgraph. En lo general creo que las 2 son muy buenas. La diferencia rádica tal vez en lo visual.

Bueno para no entrar en más detalle les dejo una imagen de como se vería el resultado Final y empecemos con el código.

Lo que vamos a hacer es una gráfica muy sencilla sobre el consumo de fruta y entonces tenemos en nuestro eje Y las frutas que se han consumido(manzanas,platanos,naranjas) y en el eje X las personas que han consumido(Ana y Juan).

Lo primero que tenemos que hacer es un archivo HTML con la siguiente estructura:


  <html>
 <head>
  <title>Ejemplo 1 Highcharts</title>
 </head>
 
 <body>
  <div id="container" style="width:80%; height:300px;"></div>
 </body>

  </html>

Es una estructura básica con el titulo "Ejemplo 1 HighCharts" y en el body incluí un div con el id="container" al que le indicamos que tenga un 80% de ancho y 300px de alto.

Ahora Para que la utileria HighChart funcione es necesario que se haga referencia a Jquery por lo que antes que otra cosa es necesario que pongamos los links de jquery. En este ejemplo vamos a utilizar los repositorios de la página oficial, pero se pueden descargar y cargar localmente lo que es más recomendable.

Para ver las ultimas versiones y realizar la descarga visita la página. https://jquery.com/download/

Después de Jquery vamos a poner el link de la utilería el cual lo pueden descargar de la página oficial http://www.highcharts.com/docs/getting-started/installation

Los links los vamos a colocar dentro de la sección header de nuestro archivo html.


  <head>
    <title>Ejemplo 1 Highcharts</title>
 
    <!--Links a Jquery-->
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    
    <!--Link de la utileria highcharts -->
    <script src="http://code.highcharts.com/highcharts.js"></script>
  </head>

Ahora vamos a hacer el script donde mandamos llamar a la utileria y creamos la gráfica. Como lo mencione anteriormente esta utilería trabajo con código Js.

Veamos el script y despues lo explicaré:


<script type="text/javascript">
 $(function () { 
 
  $('#container').highcharts({ 
    chart: { type: 'bar'},
    title: { text: 'Consumo de fruta'},
    xAxis: { categories: ['Manzanas', 'Platanos', 'Naranajas']},
    yAxis: { title: { text: 'Frutas consumidas' }},
    series: [
  { name: 'Ana', data: [1, 0, 4]}, 
  { name: 'Juan', data: [5, 7, 3]}
    ]
  });
 });
</script>

Lo primero que hacemos es indicar una función que se ejecutará al cargar el documento.
Dentro de esta función el objeto con id container ( $('#container') ) invoca al constructor highcharts,
y le vamos a pasar los siguientes parámetros(opciones):

chart: Aquí se indican las diferentes opciones referentes al área donde se creará el gráfico. Tiene diferentes opciones que se pueden configurar como son: el tipo(type), color de fondo, margenes, eventos, color del borde, etc.

Dentro de Chart solo vamos a configurar la opción Type que es donde vamos a indicar el tipo de gráfica que vamos a hacer, en este ejemplo estamos utilizando una gráfica de barras por lo que la opción de type será 'bar'.

title: Aqui se configura todo lo referente al tutilo de la gráfica entre sus opciones configurables están alineación, texto, margenes, estilo,etc.

En title lo que vamos a configurar es la opción text: que es donde vamos a poner en sí el titulo de la gráfica que en el ejemplo es "Consumo de fruta".

xAxis: Hace referencia al eje X, esta opción tienen muchisimas categorias que se pueden modificar como son las categoriías, colores, labels, formato del contenido si es campo de fecha, valores decimales, eventos, etc.

Para el ejemplo solo se modificarán las categorias del eje de X y le pondremos los siguientes valores: categories:['Manzanas', 'Platanos', 'Naranjas']

yAxis: Hace referencia al eje Y, al igual que el anterior tienen una cantidad muy grande de atributos que se pueden modificar , en este caso las categorías las dejamos a que automáticamente ponga números.

Para el ejemplo le vamos a configurar su atributo title para que aparezca debajo del eje "frutas consumidas". Por default tiene configurado su atributo allowDecimals como true por eso se ven los valores 0.5 , 1.5 . Este valor también lo podemos desactivar cambiando la opción a false.

Series: Es donde se indican los valores que van a ser graficados, para cada serie de valores se tienen que agregar una linea marcada por llaves{ } dentro de cada linea se van a especificar el nombre de ese valor (name) y las cantidades referidas en el eje X (data[]) por ejemplo:

{name:'Ana', data:[1,0,4]} Esto quiere decir que Ana se comio 1 manzana, 0 platanos y 4 naranjas.
{name:'Juan', data[5,7,3]} Y juan se comió 5 manzanas, 7 platanos y 3 naranjas.

Despues de Series se cierra el constructor y se cierra la función. El Script se pone en la sección head debajo de los links. El código completo quedá de la siguiente manera:


<html>
 <head>
  <title>Ejemplo 1 Highcharts</title>
  
  <!--Links a Jquery-->
  <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
  <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  
  <!--Link de la utileria highcharts -->
  <script src="http://code.highcharts.com/highcharts.js"></script>
  
  <script type="text/javascript">
   $(function () { 
     
         $('#container').highcharts({ 
         chart: { type: 'bar'},
         title: { text: 'Consumo de fruta'},
         xAxis: { categories: ['Manzanas', 'Platanos', 'Naranajas']},
         yAxis: { title: { text: 'Frutas consumidas' }},
         series: [
    { name: 'Ana', data: [1, 0, 4]}, 
    { name: 'Juan', data: [5, 7, 3]}
         ]
       });
   });
  </script>
  
 </head>
 
 <body>
  <div id="container" style="width:80%; height:300px;"></div>
 </body>
</html>

Guardamos el código y corremos y se verá la gráfica de la siguiente manera:

Podemos Observar que tiene efectos visuales muy bonitos y más profesionales que Jpgraph (es la magia del JQuery) Inclusive tiene efectos al pasar el mouse.

Para que cambie los colores se pueden descargar temas desde la página oficial o como en este ejemplo solo agregue la siguiente linea dentro de la función y antes del llamado al constructor.


     Highcharts.setOptions({ 
 colors: ['#058DC7', '#50B432']
     });
  
     $('#container').highcharts({ 
 chart: { type: 'bar'},
 title: { text: 'Consumo de fruta'},
 xAxis: { categories: ['Manzanas', 'Platanos', 'Naranajas']},
 yAxis: { title: { text: 'Frutas consumidas' }},
 series: [
      { name: 'Ana', data: [1, 0, 4]}, 
      { name: 'Juan', data: [5, 7, 3]}
 ]
     });

Con Highcharts.setoptions en su atributo colors, le estoy pasando los tonos azul y verde para que el resultado final sea:

Bueno ese sería el resultado final. Como se pueden dar cuenta en realidad es muy sencillo siempre y cuando tengas al menos el conocimiento básico de JQuery y Js.

Te vuelvo a dejar por aquí el link a la página oficial de HighCharts para que puedas ver todos las posibilidades que te permite.
http://www.highcharts.com/products/highcharts

Espero que te sirva este pequeño tutorial. Como siempre espero tus comentarios y sugerencias para nuevos tutoriales.

"Programar no tiene que ser tan difícil como parece...."

Ejemplo #1 Login Html-Ajax-PHP- mysql

2015-09-01T15:59:00.000-05:00

Hoy les voy a mostrar un ejemplo de login HTML , js, PHP y utilizando Ajax para comunicar al cliente con el servidor.

Anteriormente subí un ejemplo de login con html y PHP utilizando el action del form de HTML pero en esta ocasión vamos a utilizar Ajax.

Una de las ventajas es que al hacer la verificación la página no se refresca ni cambia de ruta, dependiendo de la respuesta del servidor podemos mostrar contenido en algún otro objeto en la misma ventana.

El ejemplo final se verá así:

Este ejemplo es muy sencillo solo vamos a usar dos archivos, uno con el HTML donde vamos a tener los objetos y el script (js) y un archivo PHP donde haremos la conexión con la base de datos.

Nota: En este ejemplo yo supongo que tienes al menos el mínimo tipo de conocimiento creando bases de datos (phpmyadmin), si no es así te recomiendo que revises los tutoriales. Tambien supongo que si estas probando de manera local (lo cual recomiendo) haz de tener instalado los servicios básicos necesarios (Apache, PHP, Mysql) si no es así te recomiendo que descargues XAMPP, WAMP o cualquier otro tipo de estas herramientas que te instalan todo junto.

Aqui te dejo un link para descargar xampp desde su pagina oficial XAMPP

Ok volviendo al tema.

Para este ejemplo necesitamos tener una base de datos con una tabla donde vamos a validar al usuario, mi base de datos se llama test y solo tengo una tabla que se llama usuario y tiene 4 campos (id, usuario, password y nombre)

id de tipo entero con una longitud de 11 a este campo lo puedes marcar como la llave y que sea auto incrementable.

usuario de tipo varchar con longitud de 50 en este campo es donde se va a guardar el usuario que generalmente es un alias o un pseudonimo corto

password de tipo varchar con una longitud de 50

nombre de tipo varchar y una longitud de 100, este campo es más largo por que aquí guarde el nombre completo del usuario para mostrarlo cuando sea validado junto con la leyenda Bienvenido.

Claro que despues de crear la tabla inserte un usuario que voy a utilizar para el ejmplo su id (obvio) fue el 1 el usuario es usuario (perdón por la falta de originalidad jejeje) y la contraseña es (una muy dificil XD) 123456 el nombre completo del usuario es Juan Perez

Una vez completado este proceso vamos al archivo html.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "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" />
<meta http-equiv="content-language" content="es" />
<title>Ejemplo Login con Ajax 1</title> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<script type="text/javascript">  
 function Verifica(){
  var user = document.getElementById("usuario").value;
  var pass = document.getElementById("password").value;
  $.post("conexion.php",{usuario:user,password:pass},function(data){
      if(data!="NO"){ 
        $("#mensaje").html("<span class='verde'>Bienvenido "+ data+ "</span>");
      }
     else{ 
        $("#mensaje").html("<span class='roja'>Usuario no válido.</span>");
     }
  });   
 }
</script>

<style>
 body{
  width:100%;
  margin:auto;
  text-align:center;
 }
 
 .box{
  width:400px;
  margin:auto;
  padding:10px;
  border: solid 1px #ccc;
  border-radius:5px;
  font-size:14px;
  font-weight: 600;
  text-align:left;
 }
  
 .box input{
  margin:5px;
 }

        .verde{color:#06A50B;font-weight: 600;}
        .roja{color:#F11A1A;font-weight: 600;}
  
</style>

</head>

<body>
 <h1>Login Utilizando Ajax Ejemplo1</h1>
 <div class="box">
    <label>usuario: </label><input type="text" id="usuario" /> 
    <br />
    <label>contraseña: </label><input type="password" id="password" /> 
    <br />
    <input type="button" value="Iniciar sesión" onclick="Verifica();"/>
 </div>

 <br />
 <div id="mensaje"></div>
</body>

</html>

Explicaré el código:
Lo primero es estructura básica de HTML con el titulo y los metas, después tenemos una liga muy importante y que es necesaria para que este ejemplo funcione. Es la liga donde mandamos llamar el script de JQuery si no lo llamamos nuestra función JS (Ajax) no va a funcionar.

 src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

Ahora yo aqui la estoy mandando llamar desde los repositorios de google pero tambien se puede descargar el script que es un archivo .js y lo puedes poner en tu carpeta del proyecto y solo mandarlo llamar por ejemplo src="Public/js/jquery.min.js" y listo.

Después tenemos otro <script> que es donde tenemos la función Verifica() ésta la explicamos más adelante.

Ahora los objetos html que tenemos dentro del <body> son un div que es el recuadro redondeado que contiene los campo de texto. Y por ende tenemos 3 input de tipos distintos

input type "text" con un id ="usuario" es el campo de texto donde el usuario pondrá su usuario valga la redundancia.

input type "password" con id="password" que es donde el usuario pondrá la contraseña, es de tipo password por que es lo que le da el efecto de que se vean los puntitos o asteriscos dependiendo del navegador y así la contraseña no sea visible.

input type "button" con el value="Inicia Sesión" y con el atributo onclick que manda llamar a la función Verifica(), este será el botón.

También vamos a tener un div con el id="mensaje" , este div es el que va a recibir el mensaje de estar validado o no.

Es muy importante que se pongan los id por que será con esto que obtengamos sus valores que serán enviados vía POST al archivo PHP.

Ok ahora si la función Verifica()

function Verifica(){
  var user = document.getElementById("usuario").value;
  var pass = document.getElementById("password").value;
  $.post("conexion.php",{usuario:user,password:pass},function(data){
      if(data!="NO"){ 
        $("#mensaje").html("<span class='verde'>Bienvenido "+ data+ "</span>");
      }
     else{ 
        $("#mensaje").html("<span class='roja'>Usuario no válido.</span>");
     }
  });   
 }

Primero tenemos una variable user que va a ser igual al valor que contenga el objeto con id usuario y una variable pass que va a ser igual al valor del objeto con id password.

Después viene lo importante que es la llamada Ajax.

El formato del $post se puede manejar de varias maneras pero este que vamos a manejar es el más sencillo y vamos a manejar 3 datos separados por coma:

$.post("ruta del archivo",{Parametros},function(data){

ruta del archivo al que vamos a hacer conexión. en este caso el archivo PHP donde haremos la consulta se llama conexion.php y lo tengo en la misma ruta de "este" archivo HTML por lo que solo le pongo el nombre "conexión.php".

Parametros que estamos validando, estas variables van a ir entre llaves. Si es más de una variable, dentro de las llaves van separadas por comas y la manera de indicar las variables es:
nombre del parámetro : valor que le queremos pasar.
En este caso en el archivo PHP los parametros los voy a tomar con el nombre de:
usuario que tendrá el valor de la variable user (que explique arriba).
password que tendrá el valor de la variable pass(que explique arriba).

Function es la acción que vamos a realizar una vez que el resultado fue satisfactorio y le pasamos aparte la variable data a la función si esperamos algún dato como respuesta. En nuestro ejemplo a data desde el archivo PHP por medio de un echo le vamos a pasar el nombre completo del usuario en caso de que haya sido validado correctamente y un NO en caso de que el usuario no sea válido.

Por lo tanto podemos ver que dentro de la función tenemos un IF :

    if(data!="NO"){ 
        $("#mensaje").html("<span class='verde'>Bienvenido "+ data+ "</span>");
      }
     else{ 
        $("#mensaje").html("<span class='roja'>Usuario no válido.</span>");
     }

Esto lo que va a hacer es que va a comparar el valor que tenga data si es diferente de NO quiere decir que trae el nombre completo por lo tanto vamos a buscar con $("#mensaje") al objeto con id=mensaje
y le vamos a agregar por medio de .html() un objeto <span></span> que va a tener la leyenda "Bienvenido" y el valor de data que en nuetsro ejemplo va a ser Juan perez. Podemos observar que el <span> tiene como atributo la clase "verde" más adelante explicaré el código de los estilos.

Si por el contrario el data es igual a NO entonces quiere decir que el usuario no es válido y por lo tanto al div "mensaje" le vamos a agregar un <span></span> con la leyenda "Usuario no válido" y este <span > va a tener como atributo la clase "roja" para que el texto tenga color rojo.

Bueno eso es toda la función.

Los estilos estos no son necesarios para el buen funcionamiento del ejercicio es solo estética. Pero bueno tenemos primero las estiquetas <style> que deben estar dentro de la sección <head> del html yo prefiero hacer un archivo aparte y solo poner el link para así tener mejor ordenado y mantener más limpios los códigos pero como es poquito no nos hace daño.

El primer estilo es en el body le estamos dando un ancho del 100% con márgenes automáticos para que nos centre el contenido y alineamos el texto al centro.

Tenemos una clase box que es la clase que tiene el div que contiene los campos de texto, aquí le pusimos un ancho de 400px , margenes automáticos, un padding de 10px para que el contenido no este pegado a los bordes, también le estamos poniendo un borde de un pixel de ancho de color gris y con un radio de 5px, esto es lo que hace que se vea redondeado en las esquinas, le estamos indicando que dentro de este div el tamaño de la letra será de 14px y será de un ancho de 600 lo que hará que tenga el mismo efecto que si le ponemos la etiqueta <b> al texto, y por último le indicamos que el contenido de este div va a estar alineado a la izquierda.

Debajo de .box vemos que hay otra clase que dice .box input{} esto indica que este estilo solo lo tendrán los objetos de tipo input que estén dentro del objeto que tenga la clase box (osea solo los inputs dentro del div) y este le puse un margen de 5px para que no se vean empalmados.

Por último tenemos las clases .verde y .roja que son las clases que le pusimos a los objetos <span> que van a ser los mensaje de validación lo único que tiene es el color , esta indica el color de fuente que va a tener el mensaje verde si esta validado correctamente y roja si no es válido.

<style>
 body{
  width:100%;
  margin:auto;
  text-align:center;
 }
 
 .box{
  width:400px;
  margin:auto;
  padding:10px;
  border: solid 1px #ccc;
  border-radius:5px;
  font-size:14px;
  font-weight: 600;
  text-align:left;
 }
  
 .box input{
  margin:5px;
 }

        .verde{color:#06A50B;font-weight: 600;}
        .roja{color:#F11A1A;font-weight: 600;}
  
</style>

Hasta aquí es todo el HTML Ahora vamos a ver el código del archivo PHP "conexion.php"




<?php    
 
$mysqli= new mysqli("localhost","root", "");
$mysqli->select_db("test");
if($mysqli->connect_errno){
 echo "Fallo al conectar a MySQL:(". $mysqli->connect_errno.")". $mysqli->connect_errno;
}
else{
        $validado="";   
 $user=$_POST["usuario"];
 $pass=$_POST["password"];
  
 if($consulta= $mysqli->query("SELECT * from usuario where usuario='$user' and password='$pass' " )){
  $row_cnt = $consulta->num_rows; 
  //Si existe el usuario lo valida.
  if($row_cnt == 1){ 
   while($row=$consulta->fetch_assoc()){
    $nombreUsuario=$row['nombre'];
   }
       
   $validado=$nombreUsuario;   
  }
  else if($row_cnt <= 0){ $validado="NO"; } 
 }
 else{ $validado= $mysqli->error; }
 $mysqli->close(); //Cierra concexión con la base de datos. 
 echo $validado;  
}
?>

Lo primero que estamos haciendo es la conexión con la base de datos indicando el servidor como estoy trabajando de manera local entonces le agrego localhost el usuario que tiene acceso a la base de datos (root) y la contraseña en caso de tenerla, si no tiene se dejan las comillas sin espacio ("").

Después indico el nombre de la base de datos a la que me voy a conectar (test) y estoy validando, si hubo algún problema con la conexión muestro un mensaje por el contrario sigo y hago la consulta.

dentro del else tengo una variable $validado que inicia vacía, después tengo la variable $user que es igual al parámetro que estoy recibiendo por medio del POST con el nombre de usuario y una variable $pass que es igual al parámetro password (son los parámetros que mandamos desde el $post de AJAX) y luego tenemos dentro de un if una consulta. Donde estoy seleccionado todo de la tabla usuario donde el campo usuario y el campo password sean igual a las varibles $user y $pass.

Si la consulta se realizó con éxito entonces verifico que exista un usuario que haya coincidido con los valores que le pase, esto es contando las filas que me mando la consulta si es ==1 quiere decir que existe el usuario por lo tanto es válido y pongo dentro de una varibale $nombreUsuario el valor del campo nombre de la tabla. Después a la variable $validado le vamos a dar el valor de $nombreUsuario.

En caso de que no haya existido ninguna coincidencia quiere decir que el usuario que estoy ingresando no es válido y a la variable $validado le vamos a dar el valor de "NO".

Si por el contrario la consulta no se realizó con éxito, esto quiere decir que hubo algún error de sintaxis entonces la variable $validado va a ser igual al error que msqli haya encontrado.
Cerramos la conexión con la base de datos e imprimimos el valor de $validado.

En realidad $validado no se va a mostrar en la pantalla si no que lo va a tomar la variable data que tenemos en el Function(data) del $post del script del archivo HTML.

Ahora todo tiene sentido verdad??

Bueno Con eso terminamos nuestro archivo PHP lo último que tenemos que hacer es guardar y correr.

vamos a tener una pantalla como la siguiente

Si ingresamos el usuario "usuario" y la contraseña "123456" y luego damos clic en Iniciar Sesión vamos a tener lo siguiente.

Si ponemos el usuario "usuario" y cualquier otra cosa en la contraseña , o simplemente dejamos en blanco los campos y luego damos clic en Iniciar Sesión vamos a tener lo siguiente.

Y listo quiere decir que nuestro ejemplo funciona correctamente.

Como ven este es un ejemplo muy sencillo , lo puedes mejorar si en lugar de mostrar las leyenda lo rediriges a la siguiente pantalla por medio de un load de jquery.

Bueno espero que este ejercicio les ayude, es una manera sencilla de iniciar por las vías de Ajax en comunicación con mysql.

No se olviden de dejarme sus comentarios, dudas ,sugerencias, o como les gustaría que completáramos este ejemplo o ideas para otros ejercicios.

Si les interesa ver el otro ejemplo de login pero utilizando el form y action denle clic aqui .

Como siempre recuerden que por ningún motivo quiero decir que esta sea la única ni la mejor alternativa para resolver un login, es un ejemplo de los muchos que pueden encontrar y espero que les funcione.

Reciban saludos y hasta pronto.

"Programar no tiene que ser tan difícil como parece...."

2015-08-30T16:05:00.000-05:00

Las cinco nanotecnologías más sorprendentes

Les voy a compartir una nota que publicó la revista MuyInteresante, sobre las 5 nanotencologías más soprendentes (actuales) que ya existen, la mayoría son para el campo farmaceútico pero tambien encontramos unos más casuales como la Ropa antimanchas.

Les adelanto algunos de estos proyectos que aparecen en el artículo:

*El condón perfecto: Es un anticonceptivo creado apartir de fibras que contienen medicamentos, que ayudan a prevenir enfermedades de transmición sexual ente estos el VIH, además se disuelve en horas. Este proyecto lo estan respaldando Bill y Melinda Gates.

*Ropa sin manchas: Es un proyecto de la universidad Deakin en Australia, se trata de una capa protectora creada apartir de peliculas sobrepuestas de cargas positivas y negativas alternadas, que cualquier prenda que la tenga repelerá agua, grasa, lodo ó ácidos.

No cabe duda que la tecnología, aunque aveces parezca que se ha estancado, en realidad ha crecido a pasos agintados, pero en ocaciones es por su costo que no podemos ver el resultado de años de investigación salir a la luz del sol.

Bueno les dejo el link del artículo para que lo chequen completo, en verdad esta Muy Interesante.

Tecnología increíble-Muy Interesante

Probablemente en unos cuantos años más seamos testigos visuales de estos proyectos o hasta los utilicemos casualmente.

Saludos y que esten bien.

30/04/2013

Efecto expander (leer más / leeer menos) en html con js

2015-08-20T11:14:00.001-05:00

En esta entrada vamos a hacer un ejemplo de como expandir o esconder texto o contenido y mostrarlo al darle clic a un botón o liga (leer más / leer menos).

Anteriormente ya había subido un ejemplo utilizando la librería de jquery Expander pero esta es una manera más sencilla.

Aveces en nuestras páginas web existen secciones en donde hay que colocar mucho texto y para el usuario puede ser molesto o cansado ver una página con un montón de lineas que aveces no son de suma importancia para todos, o por ejemplo también podemos querer poner secciones de noticias y mostrar varios bloques con texto que por cuestión de diseño pues no se puede poner el texto completo. Para este tipo de ejemplos el expandir y contraer texto o contenido es una excelente opción.

En el ejemplo vamos a expandir un párrafo o tag <p> pero funciona igual con <div> <table> etc.

Es algo realmente muy sencillo y es uno de esos trocitos de código que nos resuelven el día. El resultado se verá como la imagen pero vamos a ver paso a paso como hacerlo.

Cabe mencionar que este ejemplo te muestra una de las tantas maneras de hacerlo sinceramente es muy fácil y requiere muy poco código además en este ejemplo lo vamos a hacer con código js sin necesidad de utilizar jquery.

Con lo que vamos a trabajar es con la opción display (none/inline); Este atributo se le agrega a la etiqueta por medio del style y lo que hace al ponerle display:none es desaparecer esa etiqueta con todo y su contenido. Funciona parecido al visibility la diferencia es que al usar visibility:hidden aunque no aparece la sección en la pantalla si se puede visualizar el espacio en el que se encuentra, en este caso tendríamos un gran espacio en blanco, y con display none el tamaño de la sección se expande o se contrae si está o no está la sección.

Te invito a que les des una checada a estos atributos de las etiquetas existe muchísima información sobre estos atributos.

Bueno pasemos al ejemplo.

Para este ejemplo vamos a usar un solo archivo al que le voy a llamar vermas.html y para que funcione y se vea como el resultado final voy a usar código js y un poquito de css para darle estilo y colores.

Muy bien lo primero que vamos a hacer es crear un archivo con la estructura básica de html.

dentro del body vamos a crear un div que va a ser el que contenga todo.

Dentro del div vamos a crear un <h1> que va a tener el titulo del ejemplo y otro div que va a hacer el que contenga los párrafos.

Dentro del segundo div vamos a crear dos etiquetas <p> en la primera vamos a poner la cantidad de texto que queremos que este visible y la otra parte del texto la vamos a poner dentro del segundo <p>

Ahora al final del texto del primer <p> vamos a poner una etiqueta <a> a la que le vamos a poner el texto "...[leer más]" y al final del texto del segundo párrafo <p> vamos a poner otra <a> a la que le vamos a añadir el texto "...[leer menos]".

Algo sumamente importante son los id de las etiquetas en este caso a la etiqueta <a> (leeer mas) le puse el id="mas" y a la segunda etiqueta <a> (leer menos) le puse el id="menos". También le puse el id="desplegar" al segundo <p> que es el que se va a expandir o contraer.

El código quedaría de la siguiente manera:


<body>
 <div>
  <div class="parrafo">
    <h2>El águila y la zorra </h2>
 <p>
   Un águila y una zorra que eran muy amigas decidieron vivir juntas 
   con la idea de que eso reforzaría su amistad. Entonces el águila escogió 
   un árbol muy elevado para poner allí sus huevos, mientras que la zorra 
   soltó a sus hijos bajo unas zarzas sobre la tierra al pie del mismo árbol. 
   Un día que la zorra salió a buscar su comida, el águila, que estaba 
   hambrienta cayó sobre las zarzas, se llevó a los zorruelos, y entonces ella 
   y sus crías se regozijaron con un banquete.
  <a href="#" id="mas">... [leer más]</a>
 </p>
 <p id="desplegar">
  Regresó la zorra y más le dolió el no poder vengarse, que saber de la muerte de sus
  pequeños; ¿Cómo podría ella, siendo un animal terrestre, sin poder volar, perseguir 
  a uno que vuela ? Tuvo que conformarse con el usual consuelo de los débiles e 
  impotentes: maldecir desde lejos a su enemigo.
  <br />
  Mas no pasó mucho tiempo para que el águila recibiera el pago de su traición 
  contra  la amistad. Se encontraban en el campo unos pastores sacrificando una cabra; cayó 
  el águila sobre ella y se llevó una víscera que aún conservaba fuego, colocándola 
  en su nido. Vino un fuerte viento y transmitió el fuego a las pajas, ardiendo 
 también sus pequeños aguiluchos, que por pequeños aún no sabían volar, los cuales 
  se vinieron al suelo. Corrió entonces la zorra, y tranquilamente devoró a todos los 
 aguiluchos ante los ojos de su enemiga. 
  <br />
  <b>“Nunca traiciones la amistad sincera, pues si lo hicieras, tarde o temprano 
 del cielo llegará el castigo”.</b>
  <a href="#" id="menos">... [leer menos]</a>
 </p>
     </div>
   </div>
</body>

Hasta ahorita si corremos nuestro ejemplo se vería así:

Ahora sigue lo divertido XD

al segundo párrafo <p> que le pusimos id="desplegar" le vamos a agregar style="display:none;"

Y a las etiquetas <a> le vamos a agrear la acción onclick que va a llamar a una función la cual llamaremos vermas(' ') y le vamos a pasar como parámetro el id de la etiqueta, por lo que quedaría la etiqueta <a href="#" id="mas" onclick="vermas('mas')" > y quedaría igual la segunda solo le pasaríamos como parámetro 'menos'

Para la función js que será la encargada de esconder y mostrar haremos el siguiente script que lo tenemos que poner dentro de la etiqueta head de html.

El código final se vería de la siguiente manera


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head profile="http://gmpg.org/xfn/1"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="es" />
<title>Ejemplo de expansión de contenido en html</title>
  
<script> 
function vermas(id){
if(id=="mas"){
document.getElementById("desplegar").style.display="block";   
document.getElementById("mas").style.display="none"; 
}
else{
document.getElementById("desplegar").style.display="none";
document.getElementById("mas").style.display="inline";
}
}
</script>
</head>

<body>
  <div>
    <div class="parrafo">
 <h2>El águila y la zorra </h2>
 <p>
 Un águila y una zorra que eran muy amigas decidieron vivir juntas 
 con la idea de que eso reforzaría su amistad. Entonces el águila escogió 
 un árbol muy elevado para poner allí sus huevos, mientras que la zorra soltó 
 a sus hijos bajo unas zarzas sobre la tierra al pie del mismo árbol. 
 Un día que la zorra salió a buscar su comida, el águila, que estaba 
 hambrienta cayó sobre las zarzas, se llevó a los zorruelos, y entonces ella 
 y sus crías se regozijaron con un banquete. 
 <a href="#" onclick="vermas('mas');" id="mas">... [leer más]</a>
 </p>
 <p id="desplegar" style="display:none;">
  Regresó la zorra y más le dolió el no poder vengarse, que saber de la 
  muerte de sus pequeños; ¿Cómo podría ella, siendo un animal terrestre,
  sin poder volar, perseguir a uno que vuela? Tuvo que conformarse con
 el usual consuelo de los débiles e impotentes: maldecir desde lejos
  a su enemigo.
  <br />
  Mas no pasó mucho tiempo para que el águila recibiera el pago de su 
traición contra la amistad. Se encontraban en el campo unos pastores
  sacrificando una cabra; cayó el águila sobre ella y se llevó 
  una víscera que aún conservaba fuego, colocándola en su nido. 
  Vino un fuerte viento y transmitió el fuego a las pajas, ardiendo 
 también sus pequeños aguiluchos, que por pequeños aún no sabían volar, 
  los cuales se vinieron al suelo. Corrió entonces la zorra, y tranquilamente
 devoró a todos los aguiluchos ante los ojos de su enemiga. <br />
  <b>“Nunca traiciones la amistad sincera, pues si lo hicieras, tarde 
  o temprano del cielo llegará el castigo”.</b>
  <a href="#" onclick="vermas('menos');" id="menos">... [leer menos]</a>
  </p>
</div>
</div>
</body>
</html>

Revisemos un poco el código js, lo que hace la función es tomar el parámetro desde donde le están dando click mas/menos si es más, lo que hace es buscar el <p> desplegar y le cambia el atributo display de none a block y cambia el atributo de la etiqueta <a> (leer más) a none para que se esconda cuando ya esta desplegado el contenido. Por el contrario si el click viene del menos lo que hace es volver a cambiar el tributo por none al párrafo "desplegar" y vuelve a hacer visible la etiqueta <a> leer más.

Como les dije es muy simple si corren su ejercicio ya debe de estar funcionando. Lo demás es pura vanidad (jajaja) un poco de css para dar color, margenes y forma, le agregue la class="content" al primer div y la class="parrafo" al segundo.

Al body le voy a dar color de fondo azul claro (aliceblue);

A la clase content le vamos a dar un ancho de 940px, un margen automático para que se posicione al centro y un padding de 10px para que el contenido no este pegado a los bordes.

En la clase parrafo solo esta justificando el texto, le puse un borde de un 1px de grosor en color azul y el fondo va a ser de color blanco .

También le agregue estilo a las etiquetas <a> que van dentro del párrafo para que no tengan el típico subrayado, eso se quita con el text-decoration:none; y le cambie el color de texto a morado.

El código css solo hay que pegarlo dentro del head y listo el código es el siguiente:


<style>
   body{
 background-color: aliceblue;
    }
    .content{
 width: 940px;
 padding: 10px;
 margin: auto;
    }
  
    .parrafo{
 text-align: justify;
 border: solid 1px;
 border-color: deepskyblue;
 background-color: white;
 padding: 10px;   
    }
  
    body div p a{
 text-decoration: none;
 color: blueviolet;
    }
</style>

Listo si lo corren ya se va a ver como la imagen

Al oprimir sobre leer más se verá de la siguiente manera.

Esto es todo, como ven fue muy sencillo, espero que este ejemplo les sirva para sus proyectos. Como les comenté al inicio existen varias formas de hacerlo pero esta es de la más sencillas.

Recuerden comentar sus dudas, uds. como lo mejorarían o que le podemos agregar. También me pueden comentar que ejemplos podemos subir.

Ejemplo de menu en html

2015-01-20T12:42:00.002-06:00

Menus: menu horizontal (html, css)

Hola ya tenia tiempo que no posteaba, hoy les dejo un ejemplo básico de menu simple horizontal en html, este ejemplo es con puro css , este será el primero de varios ejemplos que les voy a compartir para crear menus.
Espero que les sea de utilidad, yo se que actualmente hay muchisimos estilos y hasta algunas páginas donde puedes crear tus menus y exportarlos para agregarlos a tu web, pero la mayoria de las veces entre más simple más profesional y hces menos pesada tu página, así que manos a la obra.

El resultado final será algo como la siguiente imagen:

El menú cambiará su color y el estilo del texto al pasar el mouse.

Bueno comensaremos por hacer una lista co la etiqueta ul -> li la cual pondremos dentro de un div al que le pondremos las clase "menu1" la cual crearemos más adelante, el código sería el siguiente:


<html>
<head>
<title>Ejemplo de menu: Menu horizontal</title>
  <style>
     body{
 width:100%;
 margin:0;
 heigth:100%;
     } 
  </style> 
</head>

<body>
   <div class="menu1">
 <ul>
  <li>Opcion1</li>
  <li>Opcion2</li>
  <li>Opcion3</li>
  <li>Opcion4</li>
 </ul> 
   </div>
</body>

</html>

Si corremos nuestro código la ista se verá como la siguiente imagen.

Ahora vamos a darle el estilo, dentro del <style> vamos a crear la clase menu1 ponemos . ~~(el punto indica class y el # indica el id)~~ y el nombre de la clase ".menu1" despues ponemos ul que indica que el ul que encuentre dentro del div con la clase va a tener las siguiente caracteristicas:

un width del 100% y 0 de margen al top y automatico para los demás sentidos.

Despues pondremos .menu il {} que indica que todos los il dentro de la clase menu1 tendran las siguietes caracteristicas: display:inline (hará que se visualicen en linea horizontal), le pondremos un padding de 10px; y un border en color violeta obscuro y un borde de un grosor de 1px;

El código quedaría así:



<html>
<head>
  <title>Ejemplo de menu: Menu horizontal</title>
     <style>
 body{
    width:100%;
    margin:0;
    heigth:100%;
 }
 .menu1 ul{
    margin:0 auto;
    width:100%;    
 }
 .menu1 li{
    display:inline;
    padding:10px;
    border-right: 1px solid #A10051;
 }  
    </style> 
</head>

<body>
   <div class="menu1">
 <ul>
           <li>Opcion1</li>
    <li>Opcion2</li>
    <li>Opcion3</li>
    <li>Opcion4</li>
 </ul> 
   </div>
</body>

</html>

Si corremos el código se visualizará de la siguiente manera:

Podemos ver que ya va tomando forma, ahora solo le aplicamos un poco más de diseño para que se vea más bonito y listo.

al .menu1 ul {} le agregamos un padding:de 10px; y un color de fondo violeta obscuro como el del borde del "li" al .menu1 li {} le agregamos el color del texto en blanco con un grosor normal de 400 y adeás agregamos una nueva case .menu1 li:hover {} esta clase se activará cuando el usuario pase el mouse por alguna de las opciones. A esta clase le ponemos de fondo un tono violeta más claro, el texto más grueso y le agregamos el efecto de subrayado(text-decoration:underline), tambien le ponemos el efecto cursor:pointer para que el puntero del mouse cambie a una manita.
El código quedaría de la siguiente forma:


<html>
<head>
   <title>Ejemplo de menu: Menu horizontal</title>
      <style>
 body{
    width:100%;
    margin:0;
    heigth:100%;
 }
 .menu1 ul{
    background-color:#A10051;
    margin:0 auto;
    width:100%;   
    padding:10px;   
 }
 .menu1 li{
    display:inline;   
    border-right: 1px solid #A10051;   
    color:#FFFFFF;
    font-weight:400;
    padding: 10px;
 }
 .menu1 li:hover{
    background-color:RGB(198,0,99);      
    border-right: 1px solid RGB(225,0,113);
    font-weight:600;
    text-decoration:underline;
    cursor:pointer;
 }  
   </style> 
</head>

<body>
   <div class="menu1">
 <ul>
    <li>Opcion1</li>
    <li>Opcion2</li>
    <li>Opcion3</li>
    <li>Opcion4</li>
 </ul> 
   </div>
</body>

</html>

Listo!! , si corremos el código quedaía de la siguiente manera.

Sería todo, trataré de subir pronto un ejemplo con imagenes de fondo o sombreado, en realidad es muy fácil es cuestion de ir jugando con los efectos que css nos ofrece.

Cabe mencionar que hay muchas maneras de hacer menus pero esta es de las más sencillas y que además se visualiza igual para cuaquier navegador . Practicalo cambia el grosor, los colores, etc, verás que es muy sencillo.

Espero que este sencillo menu te sirva, no te olvides de dejar tus comentarios

"Programar no tiene que ser tan difícil como parece...."

Mi primera App en Android

2014-05-05T12:57:00.000-05:00

Esta es la primera entrada del año lo e dejado un poquito pero trataré de subir más ejemplos.

Bueno como su nombre lo indica , en esta entrada vamos a ver nuestra primera aplicación en Android, va a hacer el tipico "Hola Mundo", pero servirá para irnos familiarizando con el IDE y el SDK.
Si todo funciona como deberia el resultado final del ejercicio se verá así:

Para empezar nuestra aplicación primero necesitamos descargar tanto el sdk como el IDE, así como el equipo en el queremos el resultado (este no es obligatorio por que puedes usar el simulador pero es recomendable). Y de donde lo descargo pues desde la página oficial a la que puedes accesar dede Aqui---> http://developer.android.com/sdk/index.html , da click en Download el SDK ADT Bundle for windows (si es el caso o te manda el sugerido para tu equipo.)
Descargaras un zip, descrompimelo en la ruta en la que quieras empezar a trabajar, el sip contiene lo siguiente :el sdk, y eclipse(IDE).

Corre el sdk para descargues e instales los paquetes necesarios así como actualizaciones.

Una vez hecho esto iniciamos eclipse.

Entren a la carpeta de eclipse y busquen la aplicación .

Esta será la primer pantalla. Aquí les ofrece una guía para desarrollar la primera aplicación en a cuál me estoy basando para este ejemplo (la pueden seguir o pueden seguir aquí jejeje).

Ahora para iniciar una aplicación nueva damos click en File->New->Android Application Project.

Mostrara una ventana como la siguiente, donde tienes que agragar el nombre de la aplicación que estas creando. mi aplicación la llamaré MiAplicación. Ingresa el nombre y oprime en siguiente.

A las siguientes pantallas deja todo como esta y da siguiente, siguiente hasta llegar a la pantalla que dice Blanck Activity deja todo como esta y oprime Finish. (en estas pantallas configuras el icono, el tipo de actividad, etc, pero ahora como será una muy simple lo dejamos tal y como estan todos los datos).

Te va a mostrar la misma ventana de Welcome.. localiza en la barra de la izquierda las ventanitas de java y Restore. Oprime restore para que te muestre tu área de trabajo.

Ya puedes visulizar como se verá la pantalla de la aplicación.

Para el siguiente paso conecta tu dispositivo Android a tu PC, en la barra inferior podrás visualizar que decta el dispositivo.

En la parte superior dentro de la barra de herramientas vas a encontrar los botones para correr la aplicación, busca el icono que parece un "play" en color verde al pasar el mouse despliega la leyenda "Run MiAplicacion" Oprimelo y lanzará una ventana como la siguiente:

En ella te detalla los datos del equipo que ha encontrado. Presiona OK y la aplicación empezará a correr.

Si no mando algun error en tu dsipositivo podrás ver la ventana y el icono de la aplicación.

Ahora ya puedes empezar a jugar un poco con este ejemplo prueba ir cambiando de posición las etiquetas agregando etiquetas nuevas, cambiando el color.

Espero que te haya servido de algo este ejemplo muy básico de como iniciar en este mucndo de las apps.

No olvides dejar tus dudas, quejas sugerencias todo sirve... Saludos..

"Programar no tiene que ser tan difícil como parece...."

Introducción a ZendFramework: Instalación

2013-11-27T12:31:00.002-06:00

Una de las cosas que más me han gustado en programación PHP fue pasar a trabajar con el modelo MVC (modelo vista controlador), aunque no he llegado a ser ni cerquita experta en este arte.. si me ha facilitado mucho mis proyectos, todo por el manejo de los archivos ya que estan organizados de tal manera que el diseño esta separado de la programación y a su vez todo lo referente a las bases de datos por lo que se termina el andar buscando entre miles de lineas de código (cuando es un sistema muy grande).

Por lo que voy a empezar una seríe de tutoriales sobre lo que e ido aprendiendo en Zend Framework, empezando por la instalación.

Lo que tendremos que ver al final de este tutorial es la siguiente pantalla en nuestro explorador.

Cabe mencionar que ahorita ya existe un ZendFramework 2 . Pero vamos a utilizar el ZendFramework1 para fines de conocer primero su manejo.

Y otra cosa estaremos instalando en Windows. (perdón por quienes usan Linux)

Que es lo que vamos a necesitar.
Tener PHP instalado, Apache, MySQL

Descargar ZendFramework yo elegi la opcion Zend Framework 1.12.3 Full al dar clic sobre Download elijan ZIP pesa 30.8MB.

Ese archivo comprimido lo descomprimen dentro de la carpeta de su servidor (local puede ser) yo utilizo XAMPP y la carpeta en donde se guardan los proyectos en htdocs, en otros servidores puede ser la carpeta www.

Una vez descomprimida la carpeta, yo le cambie el nombre de ZendFramework-1.12.3 a ZendFramework.

Tambien necesitamos un ambiente para trabajar con el framework, para esto tambien descargue el zend Studio. Aunque tambien pueden trabajar en eclipse.

El zend yo lo descargue desde la página de Zend y es una versión de prueba por 30 días.
Bajé la versión Zend Studio 10.5 para Windows.

Ok Ahora algo muy importante y que es todo el asunto de la instalación es que vamos a buscar dentro de la carptea de PHP el archivo de configuración o mejor conocido como php.ini

cuando lo abren se ve más o menos así.

Busquen la sección Paths and Directories (Pueden buscarlo en el bloq de notas con Ctrl+B y pegan esas palabras para que lo encuentren más rápido) y agreguen un include path como la siguiente linea.

include_path = ".;\xampp-portable\htdocs\ZendFramework\library"

Nota: esta es mi linea udstedes tienen que basarse en los include que ya trae su archivo php para que lo pongan igual, incluyan su carpeta y la ruta donde se encuentra ZendFramework y despues agregar la ruta de la carpeta library que viene dentro de la carpeta de ZendFramework.

Recuerden que si ya tienen corriendo Apache despues de hacer los cambios al archivo php.ini tienen que reiniciar Apache para que tome los cambios.

Ahora vayamos a Zend Studio para crear un nuevo proyecto.

Abrimos el menú File->New->Local PHP project

Nos va a mostrar uan pantalla como la siguiente:

Project Name: Donde tenemos que poner el nombre del proyecto.

Location: Yo cree una carpeta dentro de mi carpeta del servidor (htdocs) que se llama workspaces para ahí guardar todos los proyectos que genere en Zend. Ustedes pongan la ruta donde quieran guardar sus proyectos.

Content: Tenemos que indicar que vamos a trabajar con Zend Framework, una vez que seleccionan ese radiobutton en la Lista de abajo que dice Version les debe aparecer el Zend que descargamos.

De no ser así, seleccionen Other y ahí opriman el botón Browse.. y seleccionen la ruta donde se encuentra la carpeta de ZendFramework y busquen la carpeta Library que esta dentro de la carpeta de Zend Framework.

Una vez que ya tienen seleccionada la version de Zend opriman el botón Next.

Se selecciona Launch URL en host ponemos la direccion del servidor local y en Base path la ruta de la carpta que se agregara a la url del servidor, en Project URL se pone la ruta completa automaticamente así es como se debe correr la aplicación para que funcione.

ZendFramework maneja una carpeta Public que es donde se coloca todo lo que se va a ver en la web (imagenes, videos, no archivos html), Index es el archivo Inicial. y como pueden ver aquí ya no se usan las extensiones de los archivos cosa, que me agrada mucho.

presionen el botón Next.

Sigue elegir las librerias que podríamos ocupar en el proyecto para esto seleccionen, la de zend si en la ventana donde eligieron la versión de Zend si les mostró ZendFramwork 1 (built in), seleccionen esa, o si uds. seleccionaron la ruta del Zend y les mostró ZendFramwork 1 (Zend User) entonces seleccionen UserZF, JQuery, y JavaScript son importantes. Una vez seleccionadas presionen sobre Finish.

Mientras se construye el archivo puede que marque que el programa No responde no lo cierrren esperense tantito y despues les creará el proyecto

Ahora pueden ver que marca algunos warnings es cuestion de la configuración de las validaciones y esas cosas que no me voy a adentrar ok.

Ahora si corren en su navegador la ruta de proyecto se tendrá que ver.

Que es el contenido que traen los proyectos como ejemplo. Sobre esto podemos ir trabajando.

Bueno si salió esta ventana es que esta funcionando bien. Pueden ver que no corri el proyecto desde el ZendStudio esto es por que me manda un error del PHPUnit que aun no puedo solucionar (si alguien lo pudo solucionar pasenme el tip.).

Hasta aquí queda esta entrada la siguiente trataré de explicarles un poquito como es la distribución de las carpteas.

Espero que hayan podido hacerlo funcionar. Cualquier duda, aclaración o comentario porfavor ponganlo abajo!!

"Programar no tiene que ser tan difícil como parece...."

"Mi cumpleaños"

2013-09-11T09:49:00.001-05:00

Hoy no pondré Código en esta entrada... Solo les quiero compartir que Hoy 11 de Septiembre no solo es un aniversario más de las torres gemelas si no que hoy es MI CUMPLEAÑOS número 26!!! así es aunque soy mujer no me da pena decirlo al contrario..
Yo se que muchos de uds. van a pensar y eso a mi que?? pero ya que estan por aca viendo algunos de mis ejemplos jejejeje no les cuesta nada enterarse que hoy cumple años la monita del blog!! jejejeje.

Me gusta cumplir años , por eso lo comparto, me gusta por que cada año que paso aprendo y más y por lo tanto puedo compartir más con uds.

"Programar no tiene que ser tan difícil como parece...."

Ejemplo de Sorteable y Obtener limites de un elemento en HTML

2013-08-29T14:31:00.001-05:00

Este ejercicio nos va a servir en dos cosas diferentes vamos a ver por un lado un ejemplo muy sencillo de mover elementos de posición con una librería de Jquery y por otro lado tambien vamos aver como obtener las coordenadas de un elemento y así vamos a saber en que orden o posición se encuentran. Para que pues eso ya depende de cada quien jejje.
Cabe mencionar que este ejemplo es en particular para Camilo Andres Lopez Rojas que muy amablemente me dejo sus comentarios y me dio un buen ejemplo espero poder ayudarle un poco.

Bueno el ejemplo funciona así son una lista de 3 items y un boton de guardar cambios si yo oprimo el boton me va a mostrar un alert por cada item y va a mostrar su limite con respecto al top de la pantalla con esto podemos saber si el item 1 se movio a la segunda posición va a estar más lejos del top y así sucesivamente. Claro que esto es solo un ejemplo de como se pueden saber las posiciones y no estoy diciendo que sea la única ni la mejor solo es una idea.

Para el sorteable solo es necesario agregar los links de la librería y una función que manda llamar la acción sorteable y los elementos que son una lista <ul> con el id de sorteable y a cada <li> se le agrega la clase "ui-state-default" y se agrega un elemento <span> con las clases "ui-icon ui-icon-arrowthick-2-n-s", estas clases las obtiene desde uno de los links en esto no me voy a adentrar mucho, ahora el ejercicio original no los incluye pero para que funcione lo de la posición yo le agregue a cada unos de los elementos <li> un id para poderlos obtener desde la función en JS ok.
Tambien tiene un botón de guardar cambios que en su atributo onclick manda llamar la función salvar().

En la función salvar(), tengo una variable texto y despues hago un for que lo que hace es recorrer de 1 hasta3 (que son los itemsque tengo) .Dentro del for lo que hago es que guardo en la variable texto el item, que lo obtengo por medio de document.getElementById("li"+i). i var a ir aumentando y como lo inicio en 1 el primer id seria "li1" e iría cambiando "li2" y "li3".
despues tengo una varibale rect que sería igual a texto.getBoundingClientRect(); (recordando que texto es igual al item)

getBoundingClientRect es un Método que te ayuda a obtener los limites del elementos (márgenes), con ello puedes saber en donde se encuentra en relación con su margen superior, derecho, izquierdo o inferior.

Lo que estamos haciendo aqui es que va a mostrar el tamaño de margen superior que tiene el item y así podremos saber en que orden esta o debajo de cual item está.

Por lo que le decimos a la variable rect que tome el margen superior y quedaria así : rect.top
y lo mostramos en un alert.

alert("item"+i+"="+rect.top)

Como todo esto lo tenemos dentro del for, cada que se oprime el botón de guardar cambios mostrará tres ventanas indicando el item y su margen superior.

El código quedaría así:




<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});

function salvar(){
            var texto=""
            for (var i=1; i<4; i++){
                texto=document.getElementById("li"+i)
                var rect = texto.getBoundingClientRect();

                alert("item"+i+"="+rect.top)
            }
        }
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default" id="li1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default" id="li2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default" id="li3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>

</ul>
<button onclick="salvar()">Guardar cambios</button>
</body>
</html>

Con esta información podemos tener una idea de en que orden se encuentran los items, espero que este ejercicio les sirva de algo. Si tienen otra idea de como conocer las posiciones. No duden en dejarla en la parte de los comentarios.

"Programar no tiene que ser tan difícil como parece...."

JpGraph: Grafíca de 2 barras

2013-08-01T17:35:00.000-05:00

En este ejemplo vamos a crear una gráfica con 2 barras, este ejercicio lo publico gracias a un comentario de uno de nuestros amigos anonimos jeje.
Es muy sencillo, el desarrollo del plano de la gráfica es el mismo que con los otros ejemplos, lo que cambia es que vamos a ir creando "plots" (barras), y las vamos a agrupar para añadirlas al plano.
El ejemplo se verá como la siguiente imagen.

Cabe mencionar que la librería JpGraph tiene una carpeta llamada Examples y de ahí pueden ver muchos ejemplos como los que les comparto en este blog, (claro que no tan bien explicados verdad jejej XD) pero con muchos trucos e ideas para que los adapten a sus gráficas.

OK le pongo el código
y más abajo explico un poco.




<?php // content="text/plain; charset=utf-8"
require_once ('../jpgraph.php');
require_once ('../jpgraph_bar.php');

$datay=array(20,30,50);
$datay2=array(15,55,10);
$datazero=array(0,0,0);


// Crear la gráfica
$graph = new Graph(480,200,"auto");
$graph->title->Set('Ejemplo con dos barras');


// Ingresar las escalas para  Y(barra1) y Y2(barra2)
$graph->SetScale("textlin");
$graph->SetY2Scale("lin");
$graph->yaxis->scale->SetGrace(10);
$graph->y2axis->scale->SetGrace(5);
$graph->ygrid->SetColor('gray','lightgray@0.5');


// Colores de los datos de Y
$graph->y2axis->SetColor('darkred');


// Crea la barra 0 para dar espacio
$bplotzero = new BarPlot($datazero);


// Crea la primer Y (barra1)
$ybplot1 = new BarPlot($datay);
$ybplot1->value->Show();
$ybplot = new GroupBarPlot(array($ybplot1,$bplotzero));


// Crea la "Y2" (barra2)
$ybplot2 = new BarPlot($datay2);
$ybplot2->value->Show();
$ybplot2->value->SetColor('darkred');
$ybplot2->SetFillColor('darkred');
$y2bplot = new GroupBarPlot(array($bplotzero,$ybplot2));
 // Añade las barras agrupadas al plano
$graph->Add($ybplot);
$graph->AddY2($y2bplot);


//Se envia al navegador
$graph->Stroke();
?>

Como pueden ver la gráfica se crea igual que los otros ejemplo, la diferencia es que vemos unos datos nuevos como son SetY2scale y y2axis, en estos dos atributos van las escalas para los datos de la barra2.

Con $graph->ygrid->SetColor('gray','lightgray@0.5'); vamos hacer visible las lineas que dividen los valores del eje Y si omitimos este paso se van a ver muy tenues, y lo que estoy haciendo es darle un color gris que aunque es ligth hará que se visualicen mejor las lineas.

Con $graph->y2axis->SetColor('darkred'); le estoy indicando que los valores del eje Y se vean de color rojo casi vino.

Despues tenemos esta línea que es el truco $bplotzero = new BarPlot($datazero); estamos creando una barras sin ningun valor, como pueden ver en la parte superior del código inicializamos la variable $datazero como array pero con valores de 0 , lo que vamos a hacer es que esta barra nos va a servir de separador al agrupar.

Despues viene la creación de la barra 1, las primeras lineas ya las hemos visto en los ejemplos la nueva linea será $ybplot = new GroupBarPlot(array($ybplot1,$bplotzero)); aquí vamos a crear un grupo de barras que será la barra1 y la barra0.
Esa misma linea la ponemos para la barra2 y de la misma forma es para agrupar y la agruparemos igual con la barra0. $y2bplot = new GroupBarPlot(array($bplotzero,$ybplot2));

Lo último es añadirlo al plano $graph y como pueden ver tenemos dos Add, en el primero añadimos el primer grupo que es la variable $ybplot (la barra0 y la barra1 agrupadas) y en la segunda linea de AddY2 agregamos la variable $y2bplot (la barra0 y la barra2 agrupadas). Despues la mostramos en el navegador con $graph->Stroke(); y LISTO!!!!

Entonces no se trata de hacer planos o $graph=new Graph muchas veces si no que hay que añadir barras y despues añadirlas a un solo plano ($graph).

Espero que les sirva este ejemplo. No olviden dejar sus comentarios, quejas, sugerencias y demás (menos insultos ok).

"Programar no tiene que ser tan difícil como parece...."

JpGraph: Como guardar la gráfica en un archivo tipo PNG (imagen)

2013-07-23T10:37:00.000-05:00

Hola saludos a todos, antes de empezar quiero aclarar que en esta entrada solo vamos a ver algunas lineas que nos ayudarán a que la gráfica que hemos creado se almacene en alguna ruta con formato PNG para poderla visualizar posteriormente o cargarla posterirmente más fácil. Así que, si lo que deseas querido lector es saber como crear la gráfica te recomiendo que visites las otras entradas del blog.

Ahora por que queremos guardarla como imagen, ¿Que no ya es una imagen? hasta ahorita se podría decir que no, por que como lo hemos estado manejando, la ruta que le damos al objeto <img> es la del archivo php en donde generamos la gráfica, cada que queremos ver la gráfica se desarrolla todo el proceso, y si tienes varias gráficas que serán estáticas pues lo mejor es correr un solo proceso generar la imagen y solo cargar la imagen o tambien te puede servir en el caso de que quieras dar la opción de descargar la gráfica. Como en todos los casos esto es solo un ejemplo y tienes un mar de opciones para hacer con el.

Lo que vamos a conseguir en este ejemplo es que cada que corramos la gráfica nos va a generar un archivo PNG con la imagen (mientras no cambiemos el nombre nos estará reemplazando la imagen).

Ok esto es muy sencillo lo único que tenemos que agregrar al código en el archivo php que genera la gráfica son las siguientes lineas


$grafico->Stroke(_IMG_HANDLER);

$fileName = "grafica1.png";
$grafico->img->Stream($fileName);

// mostrarlo en el navegador
$grafico->img->Headers();
$grafico->img->Stream();

Bueno dejen les explico un poquito, lo que hicimos fue que dentro del Stroke() agregamos _IMG_HANDLER esto nos permitirá poder "manejar" mejor nuestra imagen, indicarle el nombre y la extensión que nosotros queremos. Tambien se puede usar _IMG_AUTO_ pero con esta opción la imagen nos la guardará con el nombre del arhcivo PHP y con la extensión que se le haya asignado desde el archivo de configuración, por eso mejor el HANDLER, además de que claro realiza de manera internas otras funciones de la librería.

Ahora, tenemos una variable $fileName en donde alamcenamos ruta,nombre y extensión que tendrá nuestra imagen. Yo le estoy indicando que se va a generar en la misma ruta que el archivo que se esta corriendo pero si lo que quieres es tener una carpeta específica con las imagenes, aquí es donde lo tienes que especificar por ejemplo: $fileName="imagenes/grafica1.png"

Ahora le vamos a indicar al objeto $grafico la imagen que queremos que almacene y despues lo mandamos al navegador, para eso mandamos llamar las cabeceras de la imagen para que se pueda visualizar y la volvemos a cargar con Stream().

El código completo quedaría de la siguiente manera.


<?php
require_once ('jpgraph/src/jpgraph.php');
require_once ('jpgraph/src/jpgraph_bar.php');

$idind = array("y1","y2","y3","y4");
$s1 = array("7","10","25","30");

$grafico = new Graph(500,500,'auto');
$grafico -> SetScale("textlin");
$grafico -> title -> Set ("GRAFICA DE PRUEBA");
$grafico -> yaxis -> title -> Set ("VALOR DE REFERENCIA");
$grafico -> xaxis -> title -> Set ("INDICADORES");
$grafico->xaxis->SetTickLabels($idind);

$bp=new BarPlot($s1);
$bp->SetFillColor("#00CC00");
$bp->SetWidth(35);
$bp->value->Show();

$grafico->Add($bp);

$grafico->Stroke(_IMG_HANDLER);

$fileName = "grafica1.png";
$grafico->img->Stream($fileName);

// Mandarlo al navegador
$grafico->img->Headers();
$grafico->img->Stream();

?>

Al correr el código mostraría la gráfica automáticamente y si ves tu carpeta (según la ruta que hayas dado en $fileName) deberá de aparecer la imagen.

Ahora ya puedes experimentar mezclando ejemplos pasandole el nombre a la imagen por medio de parámetros para que sea dinámica tanto los valores como la imagen.

Espero que este ejemplo te sirva, no dudes en dejar tus comentarios, dudas, quejas, sugerencias o si le detectas algún error al código. Saludos y disfruten sus vacaiones a quienes las tengan. XD

"Programar no tiene que ser tan difícil como parece...."

Manejo de tablas 1: html y js

2013-06-12T16:52:00.001-05:00

Bueno en esta entrada vamos a ver un ejemplo de como podemos utilizar la etiqueta <table> para un poquito más que solo mostrar datos.
Para este ejemplo me base en una petición de un usuario Anónimo que me comentaba que necesitaba pasar datos de una tabla (html) a un arreglo en js. y pues bueno, espero que este ejemplo le sirva.

Anímense a poner su nombre y dejar sus comentarios no importa si es para preguntar, añadir algo al ejemplo, corregir, etc. todo se vale menos insultar pues para eso estamos, compartir información para facilitarnos un poquito la existencia jejeje.

bueno que es lo que este ejemplo tan sencillito hace, va a contar las filas que contiene la tabla , y despues va a obtener el valor contenido en cada fila y lo va a guardar en un arreglo de js. para que pues para utilizarlo despues en alguna cosa jajaja, pasarlo a una base de datos o cualquier otra cosa aqui simplemente ese arreglo lo vamos a convertir en cadena para poder mostrarlo. ok

ok veamos el código y luego les explico más:


<HTML>
<HEAD>
 <TITLE>java script y Html</TITLE>

 <script>

        

        function contarrows(){
                 var miArray=new Array()
                 var i=0
                 var tabla = document.getElementById("tdatos");
                 var total=tabla.rows.length
                 alert(total);

                 for(j=1;j<=total-1;j++){
                    var dato=tabla.rows[j].cells[0].childNodes[0].nodeValue
                    miArray[i]=dato
                    i=i+1
                    var arreglo=miArray.toString();
                    alert(arreglo);
                }
        }

 </script>

</HEAD>

<BODY>

<H2>Ejemplo1: tablas y js </H2>
<br /><br />

<table id="tdatos" border="1" cellpadding="5px" width="400px">
   <tr><td><b>Usuarios</b></td></tr>
   <tr><td>Usuarios1</td></tr>
   <tr><td>Usuarios2</td></tr>
   <tr><td>Usuarios3</td></tr>
</table>
<br /><br />
<input type="submit" onclick="contarrows();" />

</BODY>

</HTML>

OK como pueden ver es de lo más sencillito, como objetos tenemos un H2 que nos va a imprimir el titulo del ejemplo eso no hay que explicarlo.
Despues tenemos una tabla con el id="tdatos" el id es super importante por que con este es que la vamos a mandar llamar.
Como pueden ver tenemos 4 filas, la que va a servir como titulo o encabezado de la tabla que contiene el texto "Usuarios" y después tenemos otras 3 filas respectivamente usuario1, usuario2, usuario3.
Y por último pero muy importante un botón que en su evento onclick vamos a mandar llamar la función "contarrows();" que se encuentra en nuestro script.

Y tenemos la funcion contarrows().
Ahora el script, pueden ver que declaré una variable de tipo Array() que se llama miArray() y una variable i que le di el valor de 0 esta nos va a servir como contador.
Tenemos una variable tabla que va a ser igual al objeto "tdatos" (o sea la tabla que hicimos), la vamos a buscar por medio del id por eso es importante.
Y tenemos una variable que se llama total . que va a ser igual a tabla.rows.length esto nos va a regresar el total de filas que contiene el objeto tabla. Este valor lo estamos imprimiendo por medio de un alert(total) y cuando corren el ejemplo lo que les muestra es un 4 por que, bueno pues son 4 filas jeje.
Después tenemos dentro de un for la variable dato, la variable dato va a ser igual a:

tabla.rows[j].cells[0].childNodes[0].nodeValue

esto que significa :
tabla: es el objeto "tdatos" que buscamos por medio del id.

rows[j]: Es la fila o para que mejor se entienda es la etiqueta <tr> dentro de la tabla. Ahora es muy importante esto, rows[] y cells[] siempre empiezan a contar apartir de 0 (el primer <tr> es el 0), pero como pueden ver en el código yo estoy iniciando a la variable j en 1 esto es por que el primer <tr> es el título o cabecera de la tabla y ese valor no lo quiero guardar en el arreglo.

cells[0]: Es la celda (<td>) dentro de la fila (<tr>)

childNodes[0]:El objeto dentro de la celda (<td>), en el ejemplo tenemos solo texto pero si por ejemplo tuvieras 2 objetos dentro del <td> un <input/> y un <label> según el orden que aparezca en el código sera como lo llames el <input> sería el 0 y el label el 1.

nodeValue: El valor del objeto dentro de la celda (en el ejemplo sería "Usuario1..." respectivamente)

En resumen dato va a ser igual al texto que haya en cada fila.

Este dato lo vamos a almacenar en nuestro arreglo miArray[i]=dato. Acuérdense que a i le dimos el valor de 0 antes de la función;
Después con i=i+1 (i++) estamos incrementando la variable para que el próximo valor en el arreglo sea 1 y no se repitan los indices si no marcaría error.
Ahora declaramos otra variable que se llama arreglo va a ser igual a miArray() convertido en texto esto lo hacemos con miArray.toString(); y lo imprimos en un Alert(arreglo).
Esto se estará repitiendo según el valor de la variable total (el número defilas).

Y listo esto sería todo. Lo contenido en la variable arreglo se puede mandar por Ajax, o por Post o por Get y hacer diferentes usos con esa información.

Espero que este ejemplo les sirva. saludos, comentarios, dudas, quejas, sugerencias todo y más no duden en escribirlo aquí abajo...

"Programar no tiene que ser tan difícil como parece...."

Ajax: envío de datos (uso de ajax sin la librería jquery)

2013-06-04T11:58:00.000-05:00

Bueno este es otro ejemplo de Ajax, en este caso no voy a utilizar la librería jquery como en los ejemplos anteriores si no que voy a realizar la conexión directa utilizando XMLHttpRequest.
Objetivo del ejercicio es un formulario de envió de comentarios. (Basada en un comentario hecho por Alexa.) El comentario se envia por medio de Ajax para no refrescar la página, y se va a insertar en una base de datos, la respuesta del servidor va a ser una leyenda "su comentario ha sido enviado conéxito."

ok se verá así:

Antes de oprimir el botón de enviar

Al oprimir el botón enviar, leyenda de resultado

Bueno voy a utilizar 2 archivos el html que va a contener el formulario y las funciones de Ajax (js) y el archivo php que va a contener la conexión con la base de datos y va a enviar la respuesta ok.

Veamos primero el archivo html el código sería el siguiente y abajo explicaré un poco. ok:


<HTML>
<HEAD>
 <title>AJAX sin jquery</title>
<script type="text/javascript">
function conectar() {
  // Obtener la instancia del objeto XMLHttpRequest
  if(window.XMLHttpRequest) {
    conexion = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) {
    conexion = new ActiveXObject("Microsoft.XMLHTTP");
  }

  var comentarios=encodeURIComponent(document.getElementById("comentarios").value);

  // Preparar la funcion de respuesta
  conexion.onreadystatechange = respuesta;

  // Realizar peticion HTTP
  conexion.open('POST', 'ejemplo2.php');
  conexion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  conexion.send("comentarios="+comentarios+"&nocache="+ Math.random());
}

function respuesta() {
  if(conexion.readyState == 4) {
    if(conexion.status == 200) {
      document.getElementById("respuesta").innerHTML = conexion.responseText;
      window.setTimeout(limpiar,5000)
    }
  }
}
  
function limpiar(){
  var d = document.getElementById("respuesta");
  while (d.hasChildNodes())
        d.removeChild(d.firstChild);
}

</script>
</HEAD>
<BODY>

  <table>
         <tr> <td colspan="2">DEJE SUS COMENTARIOS</td></tr>
         <tr><td><textarea rows="4" cols="50" id="comentarios"></textarea></td></tr>
         <tr><td><button onclick="conectar();">Enviar</button></td></tr>
  </table>
  <div id="respuesta"></div>
  
</BODY>
</HTML>

Bueno dejenme les explico un poquito el código:
De elementos tenemos muy pocos como pueden ver en una tabla tenemos un objeto textarea que es donde los usuarios dejarán sus comentarios a este textarea le ponemos el id="comentarios" muy importante por que lo vamos a mandar llamar por medio de este atributo. Tenemos tambien un boton al que en su propiedad onclick vamos a mandar llamar la función conectar(); . Y por último pero muy importante tenemos un div con el id="respuesta" este es muy importante por que en este div es donde se va a cargar la respuesta a la peticion Ajax ok.

En la sección header tenemos nuestro script js , dentro de el tenemos 3 funciones: conectar() , respuesta() y limpiar():

Conectar():
En conectar tenemos primero un if esto es por que dependiendo del navegador es como se obtiene la instancia XMLHttpRequest que es la clave para realizar la conexión con el servidor.
Hoy en día los navegadores (más conocidos, google chrome, firefox, ie 7 Y 8 , safari) ya tienen de forma nativa este objeto por lo que se puede llamar por medio de window.XMLHttpRequest pero aún hay personitas que siguen utilizando ie 6 y ahí es que se tienen que usar el window.ActiveXObject.

ahí es entonces donde vamos a tener nuestra variable conexión que va a ser igual a la instancia del objeto XMLHttpRequest (según lo anterior ok)

Despues declaramos tambien una variable comentarios que va ser igual al objeto textarea (por eso no hay que olvidar el id ) esta variable va a contener el mensaje que el usuario haya escrito en este objeto.
pueden ver que tiene encodeURIComponent() esta función es muy importante por que evita que marque errores en algunos caracteres a la hora de enviar el dato.

ahora conexion.onreadystatechange = respuesta. Aqui le estamos indicando que cuando nuestra conexion este en estado completo va a llamar a la funcion respuesta(la explicaremos mas adelante).

Ahora se realiza la petición HTTP , el envio de los datos al archivo php.
Primero tenemos conexion.open('POST','ejemplo2.php') aqui vamos a abrir la conexion y le estamos indicando que la conexion será de tipo POST y le vamos a pasar la ruta del archivo al que nos vamos a conectar (como siempre explico aqui es importante que le indiquen bien la ruta yo tengo el archivo php en la misma carpeta que el html pero de no ser así tiene que indicar la ruta completa).
Despues tenemos conexion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); es muy importante que se ponga esta información si no todos los datos enviado el servidor no les va a ser caso, por lo tanto no va a funcionar (generalmente envia error Undefined index:).

Por ultimo tenemos conexion.send("comentarios="+comentarios); Aqui es donde vamos a enviar los datos. La manera en que se envía los datos es una cadena de texto que se vería algo así:
'localhost/ejemplo2.php?comentarios=comentario', Y esa cadena que sigue del signo de interrogación es la que vamos a poner en este campo. Si fueran más datos lo que se enviarían se pone un & y luego el nombre del siguiente dato = y la varibale que va a enviar por ejemplo:
'localhost/ejemplo2.php?comentarios=comentario&otra=otravariable' y quedaría entonces así:
conexion.send("comentarios="+comentarios+"&otra="+otravariable);

respuesta();
La función respuesta es donde vamos a manejar la información que hayamos resivido del archivo php
pero para esto tenemos unas condiciones primero
if(conexion.readyState == 4) esto quiere decir que si el estado de conexión es completo (4) entonces pasamos a la siguiente condición
if(conexion.status == 200) esto quiere decir que si el estado devualto por el HTTP fue "OK" entonces vamos a insertar la respuesta del servidor en forma de texto conexion.responseText dentro del objeto 'respuesta' (que es el div).
Despues le agregue un setTimeout para que despues de 5 segundos mande llamar a la función limpiar();

limpiar()
Y por ultimo lo que la función limpiar va a ser, es remover lo que haya dentro del div 'respuesta'
por lo que 5 segundos despues de que aparezca el mensaje de que el mensaje ha sido enviado correctamente va a desaparecer.

Ahora vamos con el archivo PHP

Antes de todo les comento que hice una bd llamada test y una tabla cometarios (si, sin n, error de dedo jeje a todos nos pasa) en donde tengo dos campos id y mensaje el id es int y autoincremet y el campo mensaje es de tipo TEXT ok.

Ahora si ahí les va a el código:


<?php
$mysqli=new mysqli("localhost", "root", "","test");
if($mysqli->connect_errno){
    echo "Fallo al conectar a MySQL:(". $mysqli->connect_errno.")". $mysqli->connect_errno;
}
$mensaje=$_POST['comentarios'];

$insertar=$mysqli->query("INSERT INTO cometarios (mensaje) VALUES ('$mensaje')");
if($insertar){
     echo "<b>Su mensaje ha sido enviado con &eacute;xtito</b>";
}

mysqli_close($mysqli);

?>

Esta super sencillito es una conexión a mi base de datos donde si no se conecta va a mandar un error. Luego tenemos la variable $mensaje que va a ser igual a 'comentarios' que es la variable que estamos mandando por medio de POST desde el archivo html.
despues hacemos el INSERT vamos a insertar en el campo mensaje el contenido de la variable $mensaje (que es el comentario)
ahora la condición si el insert es TRUE (no hubo error al insertar ) entonces va a imprimir el mensaje de éxito. "Su mensaje ha sido enviado con éxito" el é es para el acento en la e ok se puede poner el encode pero yo ya me acostumbre a hacerlo así jejeje. ok
Despues cerramos la conexión a la base de datos. y Listo

Es todo ahora yo no puse mensaje de error pero uds. si lo podrían poner en caso de que no se haya insertado correctamente mandar un error . que se verá en el div 'respuesta' de su formulario.

Como pueden ver es muy sencillo, aquí no necesitamos conexión a jquery ni nada solo con la condición dependiendo del formulario la conexión a XMLHttpRequest y Listo.
Sigan practicando y ya saben cualquier duda, error en el código, o alguna idea o sugerencia de ejemplo para poner el blog no duden en dejarla en los comentario abajo ↓

"Programar no tiene que ser tan difícil como parece...."

Ajax:Otro ejemplo de cargar un módulo dentro de la página principal

2013-05-29T13:01:00.000-05:00

Bueno este es otro ejemplo de uso de Ajax para cargar "módulos" dentro de otra página. Este ejercicio lo hice gracias a un comentario de un usuario "Anonimo" espero te sirva ok.
Básicamente el ejemplo consta de una página principal que tiene 3 secciones 2 texto y en una un botón para registrar o entrar. al oprimir ese botón mostrará el formulario, sin recargar la página. Donde si refrescará la página es al cerrar el formulario para que vuelva a crear el botón de registrar ok. se vería así:

página principal

página principal despues de oprimir el botón.

ok solo son 2 archivos la página principal html y el archivo php en donde crearé el formulario, ahora a lo mejor se preguntan ¿tiene que ser solo php? no tambien pueden mandar llamar otro archivo html. ok

el archivo html("página principal") sería la siguiente:


<HTML>
<HEAD>
 <TITLE>Mi página principal</TITLE>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
     <script>
        function cargar(){
            var url="registro.php"
            $.ajax({
                type: "POST",
                url:url,
                data:{},
                success: function(datos){
                    $('#registro').html(datos);
                }
            });
        }
     </script>

</HEAD>
<BODY style="margin:0;">
<div style="width:100%;height:100%;text-align:center">
     <div style="width:960px;height:40px;background-color:#F3F781;margin:auto;padding:5px;" >
          <h3><span style="text-align:left;">Mi p&aacutegina principal</span></h3>
     </div>
     <div style="width:960px;height:10px;margin:auto">
          <hr />
          <br />
          <div style="float:left;width:300px;height:200px;background-color:#A9E2F3;padding:5px;border:1px solid;">
               <p>Aqui va algun texto no importa cual solo es un ejemplo de un modulo</p>
          </div>
          <div style="float:left;width:300px;height:200px;padding:5px;border:1px solid;background-color:#A9E2F3;margin-left:5px;">
               <p>Aqui va otro texto no importa cual solo es otro ejemplo de otro modulo</p>
          </div>
          <div style="float:right;width:300px;height:200px;padding:5px;border:1px solid;" id="registro">
                <br />
               <button style="width:100px;height:50px;" onclick="cargar();">Registrate</button>
          </div>
     </div>
</div>
</BODY>
</HTML>

Ok no hay mucho que explicar solo son unos cuantos divs, con su respectivo diseño para que se vea acomodado, el float es para que los divs puedan aparecer uno de lado de otro.

Ahora nos vamos a concentrar en el tercer div donde tenemos el botón de Registrar.
Al div le pusimos el 'id=registro' esto es muy importante ok por que lo vamos a usar para cargar ahí el contenido del archivo php. Y en la función onclick del botón mandamos llamar la función "cargar();"

En la función cargar que aparece en la sección Header del html, vamos a declarar una variable url en donde vamos a poner la ruta del archivo php, yo tengo los dos archivos en la misma ruta por eso solo pongo el nombre y la extencion 'registro.php', pero si tiene el archivo php en otra ruta, se debe escribir completa
ejemplo: 'carpeta/registro.php' ó '../carpeta/registro.php'

ahora type:"POST" aunque tambien pueden ser GET, no le estemos mandando datos, pero si le estamos pidiendo una respuesta por lo que esta dato es obligatorio ok.
despues viene la url y ahí le vamos a pasar la variable que declaramos que se llama url. Ahora si no quieres declarar la variable les puedes pasar directamente la ruta en esta parte quedaría así.
url:"registro.php" ó url:"carpeta/registro.php"
despues viene data y las llaves vacias esto es por que no le vamos a pasar ninguna variable.
Ahora viene lo bueno si pudo encontrar el arhivo regitro.php entonces se va a traer lo que tenga ese archivo y lo voy a imprimir en el div registro (que es el div donde pusimos el botón de registrar).
'datos' es igual a lo que contenga el archivo php(registro.php)
eso sería todo en el archivo html.

El archivo php sta super sencillo.


<?php
  $formulario="<table style='width:250px;margin:auto'>";
  $formulario.="<tr ><td style='text-align:center;' colspan='2'><b>Formulario de Registro</b></td></tr>";
  $formulario.="<tr>
                    <td>Nombre:</td><td><input type='text' name='nombre' /></td>
                </tr>";
  $formulario.="<tr>
                    <td>Contrase&ntilde;a:</td><td><input type='text' name='password' /></td>
                </tr>";
  $formulario.="<tr colspan='2'><td><input type='submit' value='entrar'></td></tr>";
  $formulario.="</table>";
  
  $formulario.="<br/><a href='#' onclick='window.location.reload();'>Cerrar</a>";
  echo $formulario;

?>

Como pueden ver solo es una variable concatenada $formulario. a la que le vamos a dar el valor de una tabla.
Tambien le agregue un link <a>cerrar</a> al que le puse en su función onclik 'window.location.reload()' esto es en js para que recargue la página lo que hará será quitar el formulario y volver a crear el botón de Registrar.
Al final solo mandamos imprimir esa variable echo $formulario;

Y listo, eso es todo acuerdense que es muy importante que en su página principal agreguen el link a la librería de jquery. En este ejemplo aparece arriba del script de la función cargar();

Espero les funcione. Gracias por pasar al blog y pues práctiqun la verdad es muy sencillo y sirve muchisimo.

"Programar no tiene que ser tan difícil como parece...."

Graficas con JpGraph: gráfica de línea

2013-05-09T11:58:00.002-05:00

Bueno en esta entrada vamos a ver otro ejemplo de gráficas con la libería JpGraph, voy a hacer mención que esta entrada esta basada en el comentario de Guillermo Roa.
El preguntaba que como sería un ejemplo utilizando las gráficas de lineas con la librería jpgraph_line.php así que vamos a ver un ejemplo muy básico que se vería como la siguiente imagen.

No me voy a adentrar en los archivos html por que ya se explico en la primer entrada, como mandar llamar la gráfica por medio de una imagen.
Si entraste directo a esta entrada y no has checado las otras relacionadas, te recomiendo que lo hagas dale click a JPGraph en el índice de etiquetas para que tengas una idea mas completa de lo que vamos a hacer.

ok ahora veamos nuestro código PHP


 <?php // content="text/plain; charset=utf-8"
require_once ('jpgraph/src/jpgraph.php');
require_once ('jpgraph/src/jpgraph_line.php');

$datay = array(1,1.5,4,2,7);
$graph = new Graph(400,300,'auto');
$graph->SetScale("textint");
$graph->title->Set("Ejemplo de gráfica lineal");
$graph->title->SetFont(FF_FONT1,FS_BOLD);

$p1 = new LinePlot($datay);
$p1->SetColor("blue");
$p1->SetCenter();
$graph->Add($p1);

$graph->Stroke();

?>

Este sería la version básica de una gráfica de lineas expliquemos un poquito.

Lo primero y más importante es llamar las librerías. Primero se llama la principal jpgraph.php y despues mandamos llamar la librería según el tipo de gráfica que vamos a realizar en este caso es de tipo de linea por lo que mandamos llamar jpgraph_line.php.

Nota:Es necesario revisar bien la ruta, estas librerias se encuetran dentro de la carpeta src, que esta dentro de la carpeta de JpGraph que hayas descargado. Como ya mencione antes yo cambie el nombre de la carpeta de jpgraph por que normalmente es más largo ya que contiene la version algo así como Jpgraph-3.6_1 y por eso yo le cambie el nombre y le deje solo jpgraph.

Declaramos una variable llamada $datay que es de tipo array y contiene los valores del eje "y" que son los valores que deseamos graficar. En este ejemplo tenemos 1, 1.5, 4, 2 y 7

Despues empezamos con la gráfica declaramos una variable llamada $graph que va a ser igual a una nueva Grafica ( new Graph) los valores que se muestran dentro de los parentesis van a ser el alto y ancho que le queremos dar a nuestra gráfica y "auto" se refiere al margen.

NOTA: El margen tambien se puede aplicar utiliando la siguiente linea.

$graph->img->SetMargin(40,40,40,40);

Si se utiliza esta linea solo se dejarían los valores de ancho y al dentro del parentesis de:

$graph=new Graph(400,300)

Bueno $graph->SetScale("textint"), aquí le estamos indicando el tipo de escala que queremos en la gráfica, con textint indicamos que será de tipo entero, existen otras opciones como textlin que mostría decimales.

Despues es el título que queremos que tenga nuestra gráfica en el ejemplo el titulo será "Ejemplo de gráfica lineal" y luego viene el formato del titulo para aparezca en negritas.

Ahora se declara una variable llamada $p1 que será igual una nuevo plot de tipo Lineplot.

Haber nos vamos a detener aqui tantito jeje por que de seguro se quedaron así de, ¿Cómo que un nuevo plot si ya habiamos agregado new graph?.
La variable $graph va a ser igual al fondo (no se lo tomen literal jeje) en esta variable vamos a configurar todo lo referente a los ejes X y Y , al fondo o canvas de la gráfica, y en la variable $p1 se va a manejar todo lo referente al trazo o a lineas que se van a graficar, el color, los efectos, los datos a gráficar, etc.

Bueno una ves visto ese punto continuemos.
con $p1->SetColor("blue"); le indicamos que la linea que se va a gráficar sea de color azul y con $p1->SetCenter(); le indicamos que centre los datos dentro del fondo.

Ahora en $graph->Add($p1); lo que hace es que va a agregar el trazo o la linea que se creo en $p1 dentro del fondo $graph (ya tomo sentido verdad..), y con $graph->Stroke(); La dibuja o la crea.

Si corremos este código la gráfica se verá así:

Hasta aqui ya tenemos nuestra primera gráfica lineal ahora pongamosla con más diseño.
Vamos a añadir unos datos para el eje X, para que en lugar de números del 1 al 5 muestra nombres y tambien vamos a agregar los titulos para cada eje.

declaramos otra variable de tipo array que se llame labels y ahí agregamos nombres para el eje X

$labels=array("luis", "maria", "pepe", "lupita", "jose");

y tambien vamos a agregar a la variable $graph los siguientes atributos:
$graph->xaxis->title->Set("Trabajadores"); //Este sería el titulo del eje X
$graph->xaxis->SetTickLabels($labels); //estos serían los datos que mostraría en lugar del números
$graph->yaxis->title->Set("Horas Trabajadas"); // Este sería el titulo del eje Y

Ahora tambien le vamos a agregar a la linea una marca que indica el punto de su valor (serían los puntitos rojos que aparecen en la primer imagen de la entrada).

$p1->mark->SetType(MARK_FILLEDCIRCLE);
$p1->mark->SetFillColor("red");
$p1->mark->SetWidth(2);

ok el código completo se vería así:


<?php // content="text/plain; charset=utf-8"
require_once ('jpgraph/src/jpgraph.php');
require_once ('jpgraph/src/jpgraph_line.php');

$datay = array(1,1.5,4,2,7);
$labels=array("luis", "maria", "pepe", "lupita", "jose");
$graph = new Graph(400,300,'auto');
$graph->SetScale("textint");
$graph->title->Set("Ejemplo de gráfica lineal");
$graph->title->SetFont(FF_FONT1,FS_BOLD);
$graph->xaxis->title->Set("Trabajadores");
$graph->xaxis->SetTickLabels($labels);
$graph->yaxis->title->Set("Horas Trabajadas");

$p1 = new LinePlot($datay);
$p1->mark->SetType(MARK_FILLEDCIRCLE);
$p1->mark->SetFillColor("red");
$p1->mark->SetWidth(2);
$p1->SetColor("blue");
$p1->SetCenter();
$graph->Add($p1);
$graph->Stroke();

?>

Y la gráfica final se verá:

Este ejemplo esta basado en el ejercicio linegraceex.php que viene dentro de los Ejemplos de la carpeta Examples, claro que le añadí otras cosas para que se viera más completa. Intentelo revisen esa carpeta y muevanle a los ejemplos verán que se encontrarán con cosas bastante interesantes, ya que con JPGraph se pueden crear hasta Tablas.

Bueno espero que este ejemplo les sirva, no duden en dejar sus comentarios dudas, o diganme si el código marca algún error. Saludos...

"Programar no tiene que ser tan difícil como parece...."

Ajax: Envio de datos por POST

2013-05-02T11:55:00.001-05:00

Bueno en esta entrada veremos otro ejemplo de Ajax, tengo que mencionar que lo pongo gracias a un comentario de Edson Cruz ,que tenia dudas al respecto.
Muchas gracias por sus comentarios me da muchísimo gusto saber que estos ejemplos aunque son muy básicos les ayuden con sus proyectos.

Lo que haremos es algo muy similar al ejemplo anterior cargaremos una tabla usando Ajax, la diferencia es que ahora si pasaremos datos por medio de POST y buscaremos este dato en una tabla de mysql, el resultado de la consulta lo mostraremos en una tabla, el ejemplo se verá como la siguiente imagen.

Cabe mencionar que ya no me voy a adentrar mucho en explicar Ajax por que eso ya lo vimos en el ejemplo anterior, si no lo has visto te recomiendo que le des una leída antes de empezar, aquí te dejo el link:
http://easy-codigo.blogspot.mx/2013/01/ejemplo-de-ajax-cargar-paginas-dentro.html

Ok a lo que nos truje XD.

Primero hagamos el archivo html, en este ejemplo lo llamaremos formulario.html

<HTML>
<HEAD>
<TITLE>Ajax:Post</TITLE>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
     <script>
        function buscar(){
            var url="datos.php"
            var user= document.getElementById("nombre").value
            $.ajax({
                type: "POST",
                url:url,
                data:{nombre:user},
                success: function(datos){
                    $('#tabla').html(datos);
                }
            });
        }
     </script>
</HEAD>
<BODY>
<div><h3 style="color:#08298A">Busqueda de Usuarios</h3></div>
<table>
       <tr>
           <td><input type="text" id="nombre" /></td>
           <td><input type="submit" onclick="buscar();" value="Buscar Usuario" /></td>
       </tr>
</table>
<div id="tabla" style="padding-top:10px;"></div>
</BODY>
</HTML>

El ejemplo consiste en una aplicación para que el usuario pueda buscar usuarios registrados.

Como pueden ver es muy sencillito, en cuanto a objetos:
Dentro de una tabla (<table>) para que quede acomodado tengo, un input de tipo text (caja de texto), en donde el usuario va a ingresar el nombre del usuario que esta buscando, a este input le vamos a poner su atributo id="nombre" por que lo vamos a mandar llamar desde la función, y un input de tipo submit (Botón), desde el cual por medio de su atributo onclick podremos mandar llamar a la funcion de Ajax buscar();
Y por último pero muy importante tenemos un div al cual le pusimos a su atributo id el valor de "tabla" y le estoy dando como estilo un margen interior (padding) de 10px, para que no quede muy junto del input.

Ahora el script:
Dentro del header tenemos el script. Primero acuerdense de mandar llamar la librería jquery si no el ejemplo no va a funcionar, yo la mando llamar desde la dirección de googleapis pero si ustedes descargan la librería cambien la ruta por donde lo tengan guardado.

Ahora si la funcion buscar().
Primero tenemos 2 variables:
var url: Esta variable va a ser igual a la ruta donde se encuntra el archivo php con el que vamos a trabajar.
var user: Esta variable va a ser igual al valor de la caja de texto con el id nombre, y ¿como obtenemos el valor?, pues por medio del documen.getElementById("nombre").value, por eso es muy importante que no se les olvide ponerle el id a la caja de texto(input).

ahora si el ajax.
type: Le estamos indicando que el envió va a ser de tipo POST
url: En el campo url vamos a pasarle la variable url (ruta del archivo php al que vamos a mandar el dato).
data:En este campo va la informacion que queremos pasarle al archivo php, en este caso le vamos a pasar el nombre que el usuario ingreso, el cual estamos guardando en la variable user. ¿Como la vamos a pasar?, sencillo entre llaves ponemos el nombre de la variable como la vamos a identificar en el archivo php : y el dato que vamos a pasar.
Ejemplo:{nombre : user}, el primer dato puede ser cualqueir nombre en este archivo no va a afectar en nada en donde lo vamos a utilizar es en el archivo php que sería $_POST["nombre"]. En caso de que sean más datos los que se fueran a pasar se separan por comas, ejemplo: {nombre:user, edad:edad}.
succes:function(datos){}: En caso de que los datos se pasen correctamente y no haya problema con la ruta del archivo php la función entra aquí. datos será lo que mandemos desde el archivo php.
y lo que estoy indicando en $('#tabla').html(datos); es que en el div con el id tabla se va imprimir datos, esto quiere decir que en el div tabla se va a mostrar lo que yo mande del archivo php.
Por eso tambien es muy importante ponerle el id al div, en caso contrario nunca se visualizará nada.

Ok pasemos al archivo php que en mi ejemplo se llama datos.php

<?php
$mysqli=new mysqli("localhost", "root", "","usuarios");
if($mysqli->connect_errno){
    echo "Fallo al conectar a MySQL:(". $mysqli->connect_errno.")". $mysqli->connect_errno;
}

$usuario=$_POST["nombre"];

$resultado=$mysqli->query("SELECT * from users where nombre='$usuario'");

$total=$resultado->num_rows;

if($total>0){
$tabla="<table border=1>";
$tabla.="<tr><td>Nombre</td><td>Apellido</td><td>Edad</td></tr>";
while($row=$resultado->fetch_assoc()){
    $tabla.="<tr>" ;
    $tabla.="<td>".$row['nombre']."</td>";
    $tabla.="<td>".$row['apellido']."</td>";
    $tabla.="<td>".$row['edad']."</td>";
    $tabla.="</tr>" ;
}
    $tabla.="</table>" ;
    echo $tabla;
}
else{
     echo "No hay usuarios registrados con ese nombre";
}
?>

Antes de empezar para este ejemplo se creó una tabla users con los siguientes campos: nombre, apellido y edad .

Es muy sencillo lo primero que tenemos es la conexión a la base de datos, la cual lo tengo de manera local con el clasico usuario root no tiene password y la base de datos se llama usuarios.
Lo sieguiente que muestra es una condición en caso de que no se pueda conectar a la base de datos manda un error.

Ahora declaré una variable $usuario que es igual a $_POST["nombre"], que es la variable que le estoy mandando desde el data de la función buscar(); (osea el nombre que ingresó el usuario en el formulario)

Despues hago la consulta, voy a buscar toda la información que tenga el usuario cuyo nombre sea igual al que ingresó el usuario.

La siguiente variable declarada $total va a ser igual al número de registros que haya encontrado la consulta, si hay registros creo una tabla en donde voy a mostrar la información de esos usarios que tengo en mi base de datos, y la imprimo con echo $tabla.

En caso de que no haya registros con el nombre que el usuario ingresó osea $total=0 en lugar de mandar la tabla va a mandar un mensaje:

echo "No hay usuarios registrados con ese nombre";

Correlo y pruebalo, si todo funciona como debe se tiene que ver como en la siguiente imagen:

Lo siguiente es añadirle un poquito de estilos para que se vea más bonito.

if($total>0){
$tabla="<table border=0 width='300px'>";
$tabla.="<tr style='background-color:#ccc;'><td><b>Nombre</b></td><td><b>Apellido</b></td><td><b>Edad</b></td></tr>";
while($row=$resultado->fetch_assoc()){
    $tabla.="<tr>" ;
    $tabla.="<td>".$row['nombre']."</td>";
    $tabla.="<td>".$row['apellido']."</td>";
    $tabla.="<td>".$row['edad']."</td>";
    $tabla.="</tr>" ;
}
    $tabla.="</table>" ;
    echo $tabla;
}
else{
 echo "<span style='color:#B40404;'>No hay usuarios registrados con ese nombre.</span>";
}

Pues es solo quitarle el 1 del border a la tabla y le indicamos que la queremos de 300px de ancho, despues en la fila de los titulos (<tr>) le agregamos al style un color de fondo gris (background-color) y con la etiqueta <b> indicamos que los titulos se vean en negritas.
En la etiqueta donde indicamos que no hay usuarios lo que hacemos es indicarle el color de la fuente con color:#B40404 que es un rojo.

Y listo queda como la imagen

Espero que te sirva este ejemplo en caso de errores o dudas o mejoras no dudes en poner tu comentario.

"Programar no tiene que ser tan difícil como parece...."

Graficas con JPGRAPH desde un formulario HTML y JS

2013-04-01T11:35:00.000-06:00

Bueno esta entrada sería una continuación a la entrada de Graficas con JPGRAPH, es más bien otro ejemplo de como pasar datos.
Tengo que mencionar que este ejemplo lo hice en base a un comentario publicado por emmanuel levin,

El mencionaba como pasar datos por medio de JQUERY y datos que ingresara un usuario. Pero lo que hice en el ejemplo fue pasar los datos de un formulario (pequeño) por medio de JS.

El resultado se vería así:

Como funciona, pues el usuario ingresa un nombre y una cantidad de horas (basandonos en los ejemplos anteriores de trabajadores y horas trabajadas), y al presionar sobre crear grafica manda por medio de la url y post los datos de los campos al archivo php donde se crea la grafica y la regresa en forma de imagen, la imagen la creamos con js y la insertamos en un div.

Cabe mencionar que es un ejemplo muy sencillo pero en base a este puedes expirmentar mandando arreglos por post para que puedas ver mas datos y no solo uno (que caso una grafica para un usuario).

NOTA: Antes de avanzar al codigo es importante que te informe que no voy a explicar sobre la gráfica por que eso ya esta en la otra entrada. Si no lo has visto te recomiendo que la cheques antes de hacer este ejemplo para que le entiendas mejor
http://easy-codigo.blogspot.mx/2012/06/graficas-con-jpgraph.html

OK ahora si vamos al código(la parte divertida):

archivo html: grafica.html


<HTML>
<HEAD>
 <TITLE>Graficas</TITLE>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
     <script>
        function cargar(){
        
            var nombre= document.getElementById('nombre').value;
            var horas= document.getElementById('horas').value;
            var url="graficas.php?nom="+nombre+"&hrs="+horas;
            fi = document.getElementById('grafica');
            var imagen = document.createElement('img');
            imagen.src=url
            fi.appendChild(imagen);
        }
     </script>
</HEAD>
<BODY>

<table>
       <tr>
           <td>Nombre</td>
           <td><input type="text" id="nombre" /></td>
       </tr>
       <tr>
           <td>Horas</td>
           <td><input type="text" id="horas" /></td>
       </tr>
       <tr>
           <td colspan="2">
               <input type="submit" value="Crear grafica" onclick="cargar()">
           </td>
       </tr>
</table>
<div id="grafica">

</div>
</BODY>
</HTML>

Bueno lo que tenemos aqui es una tabla sencilla en donde agregue dos campos de texto nombre y horas
y un boton "Crear grafica" que al momento de hacer click va a ejecutar la funcion "cargar()".
Creamos tambien un div "grafica" en el cual vamos a cargar la imagen creada.

la funcion cargar():
declaramos 3 variables nombre , horas y url.
Lo primero que hace la funcion es buscar los elementos por medio de su Id y el valor que tengan (osea el texto) lo va a guardar en las variables.
Por lo que la variable nombre va a ser igual a lo que el usuario haya ingresado en el campo de texto nombre y la variable horas lo que haya ingresado en el campo de horas.
La variable url va a ser igual a la ruta donde se encuantre el archivo php donde se crea la grafica. En este ejemplo yo tengo el archivo php en la misma carpeta donde tengo el archivo html, pero de no ser asi tiene que ir toda la ruta. Además le estoy agregando las variables "nom" y "hrs" que son las que va a leer el archivo php, pasados por medio de POST.
nom va a ser igual a la variable nombre y hrs va ser igual a la variable horas.

"graficas.php?nom=" + nombre + "&hrs=" + horas;

nota: recuerden que con el signo + se concatenan las variables en js.

fi va a ser igual al div graficas.
Y por ultimo vamos a declarar una variable imagen que la vamos a crear desde js por medio de la linea
document.createElement('img'); y le vamos a pasar a su atributo src la variable url (la ruta).
Una vez creada la imagen la vamos a insertar dentro del div graficas desde la linea:
fi.appendChild(imagen);

Archivo PHP.

Nota: Nos vamos a basar en el archivo php visto en el primer ejemplo si no lo has visto por favor checa primero ese ejemplo.

En el archivo PHP lo unico que va a cambiar es que vamos a declarar dos variables nombre y horas y por medio de GET va a tomar el valor de nom y hrs (pasados desde html).
$nombre = $_GET["nom"]; y $horas= $_GET["hrs"];

Y le vamos a pasar estos datos a los arreglos $datos =array($horas) y $labels=array($nombre)
quedaria de la siguiente manera:


<?php
 require_once ('jpgraph/src/jpgraph.php');
 require_once ('jpgraph/src/jpgraph_bar.php');

 $nombre=$_GET["nom"];
 $horas=$_GET["hrs"];

// Creamos el grafico
$datos=array($horas);
$labels=array($nombre);

$grafico = new Graph(500, 400, 'auto');
$grafico->SetScale("textint");
$grafico->title->Set("Ejemplo de Grafica");
$grafico->xaxis->title->Set("Trabajadores");
$grafico->xaxis->SetTickLabels($labels);
$grafico->yaxis->title->Set("Horas Trabajadas");
$barplot1 =new BarPlot($datos);
// Un gradiente Horizontal de morados
$barplot1->SetFillGradient("#BE81F7", "#E3CEF6", GRAD_HOR);
// 30 pixeles de ancho para cada barra
$barplot1->SetWidth(30);
$grafico->Add($barplot1);
$grafico->Stroke();

?>

Ahora cuando presionen sobre el botón Cargar Gráfica la imagen con la grafica se va a generar, y sin refrescar la página.

---------------------------------------------------------------------------------------------------------------
ACTUALIZACIÓN

Gracias a un comentario de nuestro amigo Edward Vasquez que encontro una falla, al darle n número de clicks se generaba la imagen sin quitar la anterior, y me comenta que como podemos solucionar ese error. Cabe mencionar que se pueden usar otras formas así que sientase libres de comentar si tienen otra idea. La solución que yo ofrezco es hacer otra función en java script ala que vamos a llamar antes de imprimir la gráfica en el div.

sería la función limpiar(); y quedaría así.


function limpiar(){
            var d = document.getElementById('grafica');
            while (d.hasChildNodes())
            d.removeChild(d.firstChild);
        }

function cargar(){
             var nombre= document.getElementById('nombre').value;
            var horas= document.getElementById('horas').value;

            var url="graficas.php?nom="+nombre+"&hrs="+horas;
             /*aqui mandamos llamar la función que limpia*/

            limpiar();

            /*despues creamos la grafica*/
            fi = document.getElementById('grafica');
            var imagen = document.createElement('img');
            imagen.src=url
            fi.appendChild(imagen);
        }

Lo que hará es buscar el div con el id "grafica" que es donde cargamos la gráfica (obvio jejeje) y busca si tiene "Hijos" (objetos dentro de él) y los elimina lo va a hacer en un while mientras tenga hijos estará removiendolos.

Y despues desde la función que ya expliqué anterirmente que es cargar(); la vamos a mandar llamar antes de crear la gráfica.
------------------------------------------------------------------------------------------------------------
Listo es muy sencillo como les comentaba ahora pueden experimentar mandando arreglos por medio del POST tanto en las horas como en los nombres para generar graficas con más de un dato.

Espero que este ejemplo les sea de utilidad. No duden en dejar sus comentarios, quejas sugerencias y dudas, yo trataré de darle respuesta lo más pronto posible.

"Programar no tiene que ser tan difícil como parece...."

Graficas con JPGRAPH y MySQL

2013-03-19T16:23:00.004-06:00

Bueno esta entrada es un seguimiento a la entrada de Gráficas con Jpgraph en la que vimos como crear una gráfica y mostrarla en una pagina, así como sus atributos.

En el ejemplo que vimos en esa entrada le pasábamos los valores directo en código pero ahora vamos a ver un ejemplo de como pasarle los datos desde una consulta a una base de datos hechas en mysql.

Te recomiendo que hagas la practica anterior, para que puedas entender. El resultado sera:

Partiendo del ultimo código que era este .


<?php
 require_once ('jpgraph/src/jpgraph.php');
 require_once ('jpgraph/src/jpgraph_bar.php');
 
// Creamos el grafico
$datos=array(6,5,8,6);
$labels=array("pepe","juanita","Maria","Luis");

$grafico = new Graph(500, 400, 'auto');
$grafico->SetScale("textint");
$grafico->title->Set("Ejemplo de Grafica");
$grafico->xaxis->title->Set("trabajadores");
$grafico->xaxis->SetTickLabels($labels);
$grafico->yaxis->title->Set("Horas Trabajadas");
$barplot1 =new BarPlot($datos);
// Un gradiente Horizontal de morados
$barplot1->SetFillGradient("#BE81F7", "#E3CEF6", GRAD_HOR);
// 30 pixeles de ancho para cada barra
$barplot1->SetWidth(30);
$grafico->Add($barplot1);
$grafico->Stroke();
?>

que muestra la gráfica de la siguiente manera:

Ahora lo que vamos a hacer es cambiar la variables $datos y la variable $labels, por dos arreglos que vamos a llenar con datos provenientes de una consulta.

Empecemos:

Voy a crear una base de datos desde phpMyadmin que se va a llamar usuarios y en ella voy a crear dos tablas "users" y "horas".
users: solo va a tener dos campo el id auto-incrementable y el nombre (Maria, Jose, Luis, Teresa).
horas: va a tener 3 campos, el id autoincrementable, el id del usuario, y las horas.

ahora vamos a crear una conexion a la base de datos en nuestro archivo php, despues de el segundo require(), pero antes de //creamos el grafico.

el código quedaría de a siguiente manera.



<?php
 require_once ('jpgraph/src/jpgraph.php');
 require_once ('jpgraph/src/jpgraph_bar.php');

//Conexion a la base de datos
 $mysqli= new mysqli("localhost","root", "", "usuarios");

 if($mysqli->connect_errno){

   // echo "Fallo al conectar a MySQL:(". $mysqli->connect_errno.")". $mysqli->connect_errno;
}

// Creamos el grafico

$datos=array(6,5,8,6);
$labels=array("pepe","juanita","Maria","Luis");

$grafico = new Graph(500, 400, 'auto');
$grafico->SetScale("textint");
$grafico->title->Set("Ejemplo de Grafica");
$grafico->xaxis->title->Set("Trabajadores");
$grafico->xaxis->SetTickLabels($labels);
$grafico->yaxis->title->Set("Horas Trabajadas");
$barplot1 =new BarPlot($datos);

// Un gradiente Horizontal de morados
$barplot1->SetFillGradient("#BE81F7", "#E3CEF6", GRAD_HOR);

// 30 pixeles de ancho para cada barra
$barplot1->SetWidth(30);
$grafico->Add($barplot1);
$grafico->Stroke();

?>

Para entender mejor como hacer una conexión a una base de datos visita mi entrada consultas en mysql y php.
Nota: para probar primero tu conexión recuerda comentar todo el código referente a la gráfica o te puede marcar errores por que no se debe mandar imprimir nada antes de la gráfica una vez que la conexión es correcta comenta el error.

Ahora amos a realizar una consulta en la que pediremos el nombre de los trabajadores de la tabla users y sus respectivas horas trabajadas que se encuentran en la tabla horas.

El código quedaría de la siguiente manera:


<?php
 require_once ('jpgraph/src/jpgraph.php');
 require_once ('jpgraph/src/jpgraph_bar.php');

 //Conexion a la base de datos
 $mysqli= new mysqli("localhost","root", "", "usuarios");

 if($mysqli->connect_errno){
   // echo "Fallo al conectar a MySQL:(". $mysqli->connect_errno.")". $mysqli->connect_errno;
}

 //Consulta
$resultado=$mysqli->query("SELECT users.nombre,horas.horas from users, horas where users.id=horas.id_usuario");

//arreglos donde se guardaran los resultados de la consulta.
$usuarios=array();
$horas=array();

//Recorre el resultado de la consulta y los almacena en los arreglos
while($row=$resultado->fetch_assoc()){
   $usuarios[]=$row['nombre'];
   $horas[]=$row['horas'];
}

/*
// Creamos el grafico

$datos=array(6,5,8,6);
$labels=array("pepe","juanita","Maria","Luis");

$grafico = new Graph(500, 400, 'auto');
$grafico->SetScale("textint");
$grafico->title->Set("Ejemplo de Grafica");
$grafico->xaxis->title->Set("Trabajadores");
$grafico->xaxis->SetTickLabels($labels);
$grafico->yaxis->title->Set("Horas Trabajadas");
$barplot1 =new BarPlot($datos);

// Un gradiente Horizontal de morados
$barplot1->SetFillGradient("#BE81F7", "#E3CEF6", GRAD_HOR);

// 30 pixeles de ancho para cada barra
$barplot1->SetWidth(30);
$grafico->Add($barplot1);
$grafico->Stroke();    
*/
?>

Explicare un poquito el codigo de la consulta:
Lo que se hace es declarar dos arreglos(array()) $usuarios y $horas. Después con un while vamos a recorrer el resultado de la consulta y lo va a ir almacenando en su respectivo arreglo, esto quiere decir que cada nombre que muestre el resultado de la consulta lo va a guardar en el arreglo $usuarios y su respectiva hora la va a guardar en el arreglo $horas.

TIP: Con var_dump($usuarios), puedes ver el contenido de tus arreglos par que verifiques que te esta almacenando datos correctamente.

Ahora lo que sigue es remplazar los datos que le estábamos pasando a la gráfica que eran las variables $labels y $datos, por los arreglos que acabamos de crear esto seria en las lineas de codigo:

$grafico->xaxis->SetTickLabels($labes); remplazar por: $grafico->xaxis->SetTickLabels($usuarios);

$barplot1 =new BarPlot($datos); remplazar por: $barplot1 =new BarPlot($horas);

El código quedaría de la siguiente manera:




<?php
 require_once ('jpgraph/src/jpgraph.php');
 require_once ('jpgraph/src/jpgraph_bar.php');

 $mysqli= new mysqli("localhost","root", "", "usuarios");

if($mysqli->connect_errno){
   // echo "Fallo al conectar a MySQL:(". $mysqli->connect_errno.")". $mysqli->connect_errno;
}

$resultado=$mysqli->query("SELECT users.nombre,horas.horas from users, horas where users.id=horas.id_usuario");

$usuarios=array();
$horas=array();

while($row=$resultado->fetch_assoc()){
   $usuarios[]=$row['nombre'];
   $horas[]=$row['horas'];
}

// Creamos el grafico
$grafico = new Graph(500, 400, 'auto');
$grafico->SetScale("textint");
$grafico->title->Set("Ejemplo de Grafica");
$grafico->xaxis->title->Set("Trabajadores");
$grafico->xaxis->SetTickLabels($usuarios);
$grafico->yaxis->title->Set("Horas Trabajadas");
$barplot1 =new BarPlot($horas);
// Un gradiente Horizontal de morados
$barplot1->SetFillGradient("#BE81F7", "#E3CEF6", GRAD_HOR);
// 30 pixeles de ancho para cada barra
$barplot1->SetWidth(30);
$grafico->Add($barplot1);
$grafico->Stroke();
?>

Al correr la grafica se vera de la siguiente manera.

Como pueden ver es muy sencillo obtener datos de una consulta y pasarlos a la gráfica la manera de mostrarla en html es por medio de la etiqueta imagen.

Espero que les haya servido esta continuación del tutorial. Gracias por sus comentarios. cualquier duda, comentario o aportación es bien recibida., no duden en comentar.

"Programar no tiene que ser tan difícil como parece...."

Power Basic

2013-03-08T13:55:00.002-06:00

En esta entrada les voy a compartir un poquito de lineas de código que les pueden servir al programar en Power Basic.
Últimamente he tenido que programar en este lenguaje que para ser sincera no había utilizado, y al buscar información me encuentro con que no hay mucho de donde revisar, básicamente solo la pagina principal y uno que otro foro, ademas todo en ingles. Por lo que me voy a dar a la tarea de compartirles algunas lineas que les puede ser de utilidad así como de ir viendo algunos ejemplos básicos.
En esta primera entrada de Power Basic les dejo este PDF espero que les sirva, y pues si alguno de uds. conoce mas de este lenguaje no duden en compartirlo.

A lo mejor en la entrada la letra se ve pequeña pero pues no duden en descargarlo.

Power Basic Por LadyLukas

"Programar no tiene que ser tan difícil como parece...."

Clonezilla

2013-02-26T10:08:00.000-06:00

Respaldar /Restaurar un disco con Clonezilla

Aqui les comparto un tutorial que hice para respaldar o restaurar un disco por medio de una imagen realizada con el Clonezilla.

Clonezilla es una programa gratuito además de ser open source, que es muy fácil de utilizar por si no tienes experiencia realizando respaldos.

La página oficial de Clonezilla es http://clonezilla.org/, por si necesitas más información.

Y el Software que es una imagen iso la puedes descargar desde aquí. http://clonezilla.org/downloads.php

Aqui les dejo el tutorial.

Clone Zilla por LadyLukas

"Programar no tiene que ser tan difícil como parece...."

Dar formas a un div con css

2013-01-31T13:54:00.000-06:00

Ahora que se acerca este 14 de febrero que te pareceria poner un div en forma de corazón en tu página, o si eres gammer que te pareceria un pacman, claro estarás pensando fácil con imagen, pues no aca te comparto una página en donde te darán el código de css para que le des formas a tus divs sin necesidad de imagenes, desde el más básico cuadrado perfecto hasta el símbolo del ying-yang.

Es tan fácil como poner el código en tu hoja de estilo y darle el id a tu div y listo.

Aqui te dejo el código para hacer las formas del corazon del pacman y de un triángulo Para ver todas las formas posibles visita:

http://css-tricks.com/examples/ShapesOfCSS/


<html lang="en">
<head>
    <title>Formas con divs y css</title>

    <style>

        #heart { position: relative; width: 100px; height: 90px; }

        #heart:before, #heart:after {

            position: absolute;
            content: "";
            left: 50px;
            top: 0;
            width: 50px;
            height: 80px;
            background: red;
            -moz-border-radius: 50px 50px 0 0; 
            border-radius: 50px 50px 0 0;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg); transform: rotate(-45deg);
            -webkit-transform-origin: 0 100%;
            -moz-transform-origin: 0 100%;
            -ms-transform-origin: 0 100%;
            -o-transform-origin: 0 100%;
            transform-origin: 0 100%; }
     
        #heart:after {
            left: 0;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-transform-origin: 100% 100%;
            -moz-transform-origin: 100% 100%;
            -ms-transform-origin: 100% 100%;
            -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
        }
       
        #pacman {
            width: 0px;
            height: 0px;
            border-right: 60px solid transparent;
            border-top: 60px solid yellow;
            border-left: 60px solid yellow;
            border-bottom: 60px solid yellow;
            border-top-left-radius: 60px;
            border-top-right-radius: 60px;
            border-bottom-left-radius: 60px;
            border-bottom-right-radius: 60px; }
       
        #triangle-up {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid blue;
            }

    </style>
      
</head>

<body>

   <div id="heart"></div>

   <div id="pacman"></div>

   <div id="triangle-up"></div>
 
</body>

</html>

"Programar no tiene que ser tan difícil como parece...."

Ejemplo de Ajax: Cargar páginas dentro de otra

2013-01-30T18:47:00.002-06:00

Quienes trabajamos con páginas web hemos tenido que cargar páginas dentro de otra para evitar el redireccionamiento, velocidad, por diseño o como sea. Claro que se puede recurrir al frame o iframe pero es bien sabido que para que se vea como queremos en cualquier navegador hay que cambiarle diseño y a demás que es pesado etc.
Algo sencillo que podemos hacer es utilizar Ajax tienen muchísimos pros, entre ellos que podemos cargar vistas en nuestra página sin recargarla (claro que tiene contras).

Para que tengas mas información de lo que es Ajax te recomiendo que le des una checada a esta página en donde te explicaran todo http://www.ajaxya.com.ar/.

Bueno aqui te voy a ofrecer un ejemplo muy básico de como utilizar Ajax en tu proyecto. El ejemplo va a consistir en un link dentro de la página principal que al hacer click sobre el mostrara una tabla sin que la página se recargue. La tabla que va a mostrar se encuentra en otro archivo.

Comencemos por hacer nuestro archivo principal se llamará index.html


<html lang="en">
<head>
    <title>Ejemplo de ajax</title>
    
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
     <script> 
        function cargar(){
            var url="tabla.php"
            $.ajax({   
                type: "POST",
                url:url,
                data:{},
                success: function(datos){       
                    $('#tabla').html(datos);
                }
            });
        }
     </script>
    
</head>
<body>
<p>
   Ejemplo utilizando ajax: Da click sobre el link para cargar una tabla sin cambiar de página.
</p>

   <div>
    <a href="#" onclick="cargar();">Ver tabla de alumnos</a>
   </div>
   <div id="tabla">
    
   </div>
</body>
</html>

Bueno les explicare un poquito el código es un esqueleto de html normal y dentro de la etiqueta body creamos un link con la etiqueta <a> y le estamos indicando que al momento en que hagan click sobre el va a llamar a la función cargar() la cual estamos declarando en el script.

Tambien creamos un div en el que no vamos a poner nada por el momento solo le vamos a crear su id para poderlo identificar yo le puse id="tabla", por que es ahí donde vamos a imprimir el resultado de ajax.

Vamos a la parte del script de javascript que es donde vamos a declarar la función cargar, recuerden que el script debe ir en la sección head del html.

Ahora dentro de la función cargar() es donde vamos a poner el código de ajax. ( $.ajax({}); ), dentro de esta función vemos que tiene diferentes atributos:

type: En este ejemplo estaremos usando el metodo POST aunque en realidad no estamos enviando ninguna variable pero lo puse para que tengan el ejemplo, tambien se pueden pasar datos utilizando el método GET.

data: En caso de que estuviéramos pasando variables aqui seria donde las pondríamos por ejemplo, si quisiera mandar el dato de una maestra la forma de mandarlo seria:
data:{maestra:"angelita"}
donde maestra seria el nombre de la variable que tomaria en mi archivo php, por ejemplo la recibiría de la siguiente manera:
$maestra=$_POST["maestra"]; lo que sería igual a $maestra="angelita"; .

url: Aqui pasamos la ruta de donde se encuentra el archivo que queremos cargar, en este ejemplo mi archivo esta en la misma carpeta que mi archivo html por lo que solo le paso el nombre "tabla.php" el cual declare en la variable url var url="tabla.php".

succes function (datos){}: Lo que se ponga dentro de las llaves es lo que ocurrirá en caso de que se haya realizado con éxito la conexión con el archivo que le pasamos a la función y datos seria lo que estamos recibiendo de este archivo, en mi ejemplo datos seria la tabla que estoy mandando imprimir desde mi archivo "tabla.php". Lo que estoy indicando en este ejemplo es que si la conexión se realizó cón éxito imprima a datos ( la tabla que mando desde tabla.php) dentro del div al que le puse el id="tabla", es importante que indiquen a donde quieren mandar el resultado si no por mas que le den click en link los resultados nunca se mostrarán.

Y recuerden que para que todo funcione tenemos que mandar llamar la libreria jquery en este caso yo estoy mandandolo llamar desde una liga :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

Si no lo agregan les va a marcar errores y no funcionará.

Ahora veamos nuestro archivo tabla.php

<?php

$nombres=array("maria","jose", "luis", "lupita");

$tabla="<table style='text-align:center;margin-top:10px;' border='1'>
            <tr>
                <td>No. de Alumno</td>
                <td>Nombre del Alumno</td>
            </tr> ";

            $num=1;

         foreach($nombres as $td)
         {
            $tabla.="<tr>
                        <td>$num</td>
                        <td>$td</td>
                    </tr>";
            $num++;
         }

         $tabla.='</table>';
         echo $tabla;
?>

Esta super sencillo solo estamos poniendo un array($nombres) con los nombres de los alumnos y vamos a crear una tabla donde se muestren estos nombres y un numero($num) que se va a ir incrementado($num++) para identificar a los alumnos, para mostrarla la mandamos por medio de un echo(echo $tabla).

Y listo ahora cuando des clic sobre el link este llamara a la función cargar que por medio de ajax cargará la tabla que creamos en el archivo tabla.php todo esto sin que se recargue la página.

Te muestro las imagenes de como se ve.

puedes crear otro link que haga que desaparezca la tabla

<a href="#" onclick="borrar();" id="cerrar" style="visibility: hidden;">Cerrar tabla</a>

Como puedes ver a este link le configure unos atributos que al otro no, por ejemplo le estoy dando un id(id="cerrar") y le estoy indicando en el estilo que no se muestre (style="visibility:"hidden"), te preguntaras por que lo estoy haciendo invisible, bueno esto es por que por medio del javascript vamos a hacer que se muestre solo cuando la tabla sea mostrada si no pues que caso tendría XD.
Bueno tambien le estoy indicando que al hacer click va a llamar a la función borrar();

Dentro de nuestro script debajo de la función cargar() declaramos la función borrar():


function borrar(){

            var d = document.getElementById("tabla");

            while (d.hasChildNodes())

            d.removeChild(d.firstChild);
      
            document.getElementById("cerrar").style.visibility="hidden";
        }

Bueno que hace va a buscar el div "tabla" (var d) y va a remover todos los objetos que contenga, en este caso va a borrar la tabla, y va a volver a poner en modo invisible la liga. ¿Y para que se vea ? bueno pues dentro del succes del ajax vamos a poner que ponga en modo visible el link :

  success: function(datos){      
   $('#tabla').html(datos);
   document.getElementById("cerrar").style.visibility="visible";
 }

Y listo ahora se vería así:

Intentalo verás que es muy fácil de usar y te ahorrarás muchos dolores de cabeza. Espero que este ejemplo te sirva tanto como a mi me ha servido.
Tus comentarios dudas o aclaraciones acuerdate que son importantes no olvides dejarlos abajo...

"Programar no tiene que ser tan difícil como parece...."

Caja de texto redondeada

2012-12-22T11:36:00.000-06:00

En los trozitos de código hoy vamos a ver un estilo para lograr que las cajas de texto o casi cualquier otro objeto se vean redondeados en lugar de el rectángulo normal.

Esto es mero diseño pero en ocasiones tenemos nuestra web, con un diseño e imagenes muy trabajadas pero al entrar al login los inputs no encajan con el diseño general.

En realidad es muy sencillo vamos hacer uno muy básico.

Hacemos nuestro archivo html y vamos a crear un input lo voy a hacer en una tabla.

<html>
<head>
    <TITLE>objetos redondeados</TITLE>
</head>

<body>

 <div id="formulario" >

    <table style="background-color:#F5F6CE;">
        <tr>
            <td>Ingrese su nombre:</td>
            <td><input type="text" id="nombre" /></td>
        </tr>
    </table>

 </div>

</body>

</html>

Bueno es muy sencillo es una tabla(table) que simula un formulario sencillo de un solo campo donde solicito que el usuario ingrese su nombre y en la otra columna puse un input de tipo text (caja de texto ) que es la que vamos a redondear.

Ahora vamos a poner el estilo. NOTA:"si no manejas una hoja de estilos y el componente lleva mucho estilo es mejor que se le ponga en el head en lugar de en el mismo componente para llevar un mejor control, aunque es mucho más recomendable que generes una hoja de estilo y así tengas más limpio tu archivo html".

Como aqui no te quiero revolver lo voy a poner en el head el siguiente estilo.

<style>

        .round {
 background-color: #fff;
 width: auto;
 height: auto;
 margin: 0 auto 15px auto;
 padding: 5px;
 border: 1px solid #ccc;


 -moz-border-radius: 11px;
 -webkit-border-radius: 11px;
 border-radius: 11px;
 behavior: url(border-radius.htc);
    }
</style>

Bueno la clase se va a llamar round y le pusimos de color de fondo blanco, el ancho y el largo serán automáticos le agregamos un margen y padding y un borde de un pixel de color gris.
El behavior se utiliza para que este efecto tambien funcione en Internet Explorer.

Este archivo "border-radius.htc" lo puedes descargar aquí .
Este archivo yo lo tengo junto a mi archivo html pero si manejas carpetas asegurate de poner bien la rita dentro de los parentesis de url().

Ahora a nuestro input le vamos a poner la clase : clase="round" y listo. solo es cuestion de darle estilo a la tabla para se vean acomodados.

El código final sería este.



<html>

<head>

    <TITLE>objetos redondeados</TITLE>

    <style>

        .round {

 background-color: #fff;
 width: auto;
 height: auto;
 margin: 0 auto 15px auto;
 padding: 5px;
 border: 1px solid #ccc;

 -moz-border-radius: 11px;
 -webkit-border-radius: 11px;
 border-radius: 11px;
 behavior: url(border-radius.htc);

    }

    </style>

</head>

<body>

 <div id="formulario" >

    <table style="background-color:#F5F6CE;">

        <tr>
            <td style="vertical-align: top;padding-top:5px; ">Ingrese su nombre:</td>
            <td><input type="text" class="round" id="nombre" /></td>

        </tr>

    </table>

 </div>

</body>

</html>

El resultado sería como la siguiente imagen:

Como ven es muy sencillo y funciona en todos los navegadores.
Espero les sirva este trocito de código.
Si la liga del archivo no funciona dejame un comentario y lo vuelvo a subir.

Creo que esta es la última publicación del año así que muchas gracias por visitar este blog y les deseos felices fiestas!!!

"Programar no tiene que ser tan difícil como parece...."

ECLIPSE TOTAL DE SOL

2012-11-13T14:02:00.002-06:00

La Nueva del día: ECLIPSE TOTAL DE SOL

Hola a todos el día de hoy se podrá apreciar un eclipse total de sol, que solo se podrá ver en algunas zonas de Australia y parcialmente en algunos países de Europa y Sudamérica.
Pero gracias a la increíble existencia del Internet, la página http://events.slooh.com/ estará transmitiendo en vivo todo el trayecto de este magnifico evento.
Por supuesto les comparto la página para que puedan seguir el eclipse.

Si el video no funciona pueden ir a la página http://events.slooh.com/ en la cual también nos comparten mapas del trayecto, las imagenes que irán tomando del eclipse entre otros.

Actualizo la entrada y desde esta página pueden ver desde Argentina el trayecto del eclipse.

http://www.sky-live.tv/

"Programar no tiene que ser tan difícil como parece...."