sábado, 6 de septiembre de 2014

Inicio de sesion - PHP


En este articulo se explicará como realizar un login o inicio de sesión utilizando PHP y Mysql.

Primero creamos una base de datos llamada sesiones y una tabla para almacenar los usuarios:


Estructura tabla usuarios

Luego se crea la página de inicio de sesión con su formulario distintivo:

index.php
 Se crear el archivo el cual recibe las credenciales del formulario para validarse en la base de datos:
 
validar.php

Se crea la página principal a la cual se redirige cuando el usuario inicia sesión:

menu.php

Una vez el usuario es autenticado, se despliega su nombre:

Sesión Iniciada




Cuando el usuario inicia sesión, por defecto el mismo puede acceder a la página del login porque no hay restricción alguna que le impida realizar este proceso, por lo cual esto es incorrecto, ya que normalmente una vez autenticado, el usuario no requiere de un nuevo login, por ende no seria lógico para el sistema. Para corregir esto, se agrega una redirección en la página del login que lo envie a la página correspondiente o menu.php, quedando el index.php de la siguiente manera:

index.php

 luego de realizar lo anterior, si el usuario desea acceder al login, el navegador no le va permitir realizar dicha acción manteniendolo en la página autenticada.


Se crea el archivo que elimina la sesión y permite la redirección al login de la página:
cerrar.php
Por ultimo si el usuario no está autenticado e intenta acceder a la página menu.php, ésta le muestra la opción de iniciar sesión, enviándolo directamente al login principal:


menu.php


jueves, 4 de septiembre de 2014

Ingresar una imagen en una base de datos - PHP


En este articulo vamos a realizar la inserción de una imagen en mysql a través de PHP, como también a recuperar la misma de la base de datos y mostrarla como una vista previa luego de la inserción.


Para realizar ésto, se debe crear una tabla la cual debe contener campos como: nombre del archivo, tipo de extensión de la imagen y la imagen como tal. Para almacenar este archivo primero la tabla deberá tener un campo que acepte este tipo de información, para ello existe un tipo de dato denominado BLOB, el cual permite almacenar una cantidad variable de datos como cadenas de caracteres binarios (Bytes).

Existen 4 tipos de datos BLOB (Binary Large Object) los cuales almacenan cadenas de caracteres binarios:

TINYBLOB: Objeto binario grande de longitud máxima de 255 (2^8 - 1) caracteres.

BLOB:  Objeto binario grande de longitud máxima de 65535 (2^16 - 1) caracteres.

MEDIUMBLOB:  Objeto binario grande de longitud máxima de 16777215 (2^24 - 1) caracteres.

LONGBLOB: Objeto binario grande de longitud máxima de 4294967295 (2^32 - 1) caracteres.

De los cuales se usa normalmente el tipo de dato BLOB, y los otros de acuerdo a las especificaciones individuales.


Para este ejercicio se usa el tipo BLOB:
Nombre base de datos: imagenes.
Nombre Tabla: imagen.

Estructura de la tabla:
Tabla imagen















La tabla imagen contiene tres campos necesarios para el manejo de la imagen:
 
nombre: Campo que almacena el nombre o descripción de la imagen.
imagen:  Campo que almacena la imagen en cadenas de caracteres binarios.
tipo: Campo que almacena la extensión o tipo de imagen. ejemplo (png, jpg, gif).

Primero se crea la página con un formulario desde donde se cargará la imagen:
index.php

Para enviar una imagen desde un formulario se agrega el atributo enctype="multipart/form-data" el cual especifica como se deberían codificar los datos cuando se envíen al servidor (Linea 11).

El atributo enctype solo puede ser usado si  method="POST".

multipart/form-data solo es requerido cuando se tiene un control de carga de archivos.

text/plain los espacios se reemplazan con el símbolo "+", pero los caracteres especiales no son codificados.

Se crea el archivo que contiene todo el código para gestionar la inserción de la imagen en la base de datos, llamado cargarImagen.php:

cargarImagen.php

 Se crea el archivo que selecciona la imagen de la base de datos y la despliega:

mostrarImagen.php

Por ultimo se incluye el archivo cargarImagen.php en la página principal index.php (Linea 16):

index.php

Subiendo una imagen en la base de datos:

seleccionando imagen

Imagen cargada:

Revisando la base de datos:


NOTA: el anterior ejemplo es educativo y solo pretende demostrar la utilidad que tiene el uso de los tipos de datos binarios, ya que es una mala practica usar este tipo de almacenamiento por términos de largo plazo reflejado en el rendimiento de la base de datos. Lo mejor para este tipo de casos es reservar una carpeta para el almacenamiento de las imágenes y solo guardar en la base de datos el path que lleva a la imagen directamente.

martes, 26 de agosto de 2014

Directivas en AngularJS


En este articulo vamos a realizar un ejemplo para explicar el concepto de Directivas en AngularJS.


Sabemos que HTML define alrededor de 91 etiquetas para realizar y determinar el comportamiento de una página web html, tales como <section>, <audio>, <title>, <header>, <body>, <canvas>, <span>, <code>, etc.

Pero de igual  forma desearíamos  que existieran etiquetas como <cabecera>, <contenedor>, <graficas>, <mi-etiqueta>, <promedio>, <iniciar-sesion>,<barra-lateral>,<ubicacion>, etc. y muchas otras que se le puedan ocurrir al desarrollador, las cuales pueda brindar más claridad y facilidad para entender el contenido de una página web con solo mirar sus etiquetas.

Las directivas son una propiedad de Angular que permiten editar una parte del documento HTML permitiendo crear etiquetas personalizables, atributos  y manipular el código, haciendo que éste se adapte y  pueda expresar el comportamiento que desea el desarrollador en la aplicación.


Declaración de una directiva:
directive('miDirectiva',function(){
return { 
restrict : 'E', 
templateUrl: 'mi-pagina.html'
};
}); 
restrict : 'E' Define la Directiva para  que sea utilizada como una etiqueta HTML:  <mi-directiva> </mi-directiva>  
restrict : 'A' Define la Directiva para que sea utilizada como un atributo de una etiqueta especifica:  <div mi-directiva> </div> 
restrict : 'C' Define la Directiva para que sea utilizada como una clase:  <div class="mi-directiva"> </div> 
restrict : 'M' Define la Directiva para que sea utilizada como un comentario: <!-- directive: mi-directiva --> 
templateUrl: Proporciona la url de la plantilla (página) para que ésta sea incluida en la página donde se llame la directiva.

Las directivas también permiten incluir controladores en su cuerpo:

directive('miDirectiva',function(){
return { 
restrict : 'E',
templateUrl: 'mi-pagina.html',
controller: function(){
//contenido del controlador
...
},
controllerAs: 'miControlador' //alias del controlador
};
});

Para incluir un controlador en una directiva solo basta con declarar  'controller' y a continuación de éste se declara una función la cual contiene su contenido.

El controlador se usa con un alias el cual permite identificarse en Angular, para el ejemplo anterior este toma el alias de 'miControlador'.


A continuación se usa un ejemplo de recordatorio de notas  para explicar el concepto.
 
 código página principal del recordatorio de notas.



archivo directivas.js que contiene el modulo principal junto con el controlador que permite agregar notas en la tabla.


Se crea un archivo .html donde se alojará todo el contenido del recordatorio de notas  de la página principal, quedando el nuevo archivo de la siguiente manera:
nuevo archivo tablaDeNotas.html con el contenido principal del recordatorio de notas.
 
 página principal después de cortar todo el contenido del recordatorio de notas.


Se crea la nueva directiva llamada recordatorioNotas en el archivo directivas.js:
 archivo directivas.js con la nueva directiva.


  • Se elimina el controlador inicial y luego se crea la directiva (Linea 2).
  • Se declara la propiedad restrict y se le asigna el valor 'E' el cual le indica que será una etiqueta en el cuerpo principal de la página HTML (Linea 4).
  • Se declara la propiedad templateUrl donde se le asignará la ruta del archivo con el contenido separado del recordatorio de notas (Linea 5).
  • Una vez eliminado el controlador ctrlDirectiva se declara la propiedad controller en la directiva, se  pasa una función anónima y luego se asigna el contenido del controlador inicial (Lineas 6 - 14).


Por ultimo una vez hecho todo lo anterior solo queda agregar la directiva en la página principal como una etiqueta mas. Asi:
página principal con la directiva declarada como una etiqueta.
Resultado final


miércoles, 6 de agosto de 2014

Crear una clase en Python



En este blog vamos a crear una clase en Python con algunos métodos.

Para ello se crea un archivo llamado clases.py en el que se incluirá todo el código.

Una vez creado el archivo, se crea una clase llamada OperacionesMatematicas en la que se incluirán los métodos operativos. Así:


Para crear la clase se utiliza la palabra reservada class del lenguaje, seguido del nombre que llevará la clase, como lo muestra la imagen anterior.

Una vez creada la clase se escribe todo su contenido en las lineas siguientes y dejando un espacio de izquierda a derecha (Tabulado) según se tenga configurado en cada editor te texto. En este ejemplo se trabaja con el editor Sublime Text 3 el cual viene con un tabulado de 4 espacios por defecto, suficiente para que la indentación se pueda notar en el archivo clases.py.

Indentación es el concepto de mover un bloque o lineas de código cierta cantidad de espacios a la derecha para que este sea más legible y genere más orden en el código.

En Python es muy importante este concepto ya que permite delimitar el inicio y el final de un bloque de código conformando asi la estructura del programa debidamente ordenada. la cantidad de espacios es relativa, ya depende del programador la cantidad que le sea conveniente manejar.
 
En la imagen anterior se da un ejemplo de indentación.  El método de la linea 3 hace parte de la clase ya que éste está tabulado lo cual genera orden y facilidad para identificar los métodos de la clase. El método de la linea 5 esta por fuera de la clase ya que éste no ha sido indentado (Tabulado) y sigue la misma margen de la clase.


Continuando con el ejercicio primero se declara el método init (constructor) el cual se ejecuta por defecto cuando se haga el llamado a la clase, aun así  cuando no esté declarado, éste se ejecuta por defecto una vez se cree el objeto:


Se pasan dos argumentos por valor (a y b) al constructor los cuales se usarán para realizar los cálculos matemáticos, como también se pasa el argumento self.

self es el argumento que va incluido en cada método de una clase siendo éste una referencia a la instancia actual de la clase, en el constructor  referencia al objeto creado recientemente, y en los demás métodos se refiere a la instancia cuyo método ha sido llamado.
Se usa para referenciar a las demás variables.
Cuando se invoca un método no se especifica este argumento, ya que Python lo hace de manera automática.

Se declara una variable self.a la cual se inicializa con el valor del argumento a (Linea 4).
Se declara una variable self.b la cual se inicializa con el valor del argumento b (Linea 5).

Se declaran los métodos matemáticos a implementar (suma, resta, producto, división):


se realiza la operación correspondiente a cada método (Lineas 8, 11, 14 y 18).
en la linea 17 se evalúa el valor de la variable b  condicionando que si el valor de b es diferente de cero, entonces puede realizar el calculo correspondiente, de lo contrario arroja un mensaje de Error!, ya que las divisiones sobre cero retornan un valor nulo o indefinido.

El script completo seria:
 

En la linea 24 se crea una instancia de la clase OperacionesMatematicas inicializando las variables a y b con los valores (20 , 12) respectivamente.
Y luego solo se llaman los métodos matematicos de la clase.

Para ejecutar este script se abre la consola, se ubica en la carpeta que contiene el archivo .py  y se digita el comando python seguido del nombre del archivo, dando como resultado:



Únete a la página de Python en

miércoles, 30 de julio de 2014

Inyectar una función con Angular



En este blog vamos a demostrar el mecanismo dependency injection por medio del servicio factory pasando su contenido a una variable de un modulo externo y  por medio de ésta desplegarlo finalmente en una página html.

Para ello necesitamos crear dos archivos llamados index.html y angular.js  de los cuales index.html solo contendrá la estructura básica de una página html, y el otro archivo contendrá el código en angular.


En el archivo angular.js se agrega el modulo que será llamado en la página principal y dentro de éste se crea una variable llamada mensajeUno la cual mostrará un mensaje en la página html. Asi:


El nombre del modulo es moduloUno y su controlador se identifica como control, dentro de éste se crea una función anónima en la cual se declara la variable mensajeUno donde ésta recibe una cadena de texto.

A continuación se crea otro modulo llamado moduloDos el cual retorna una cadena por medio del servicio factory llamado funcionf:



Ahora para poder inyectar el moduloDos en el moduloUno, solamente se agrega el nombre de éste en medio de los corchetes que están en el moduloUno (Linea 1) y luego se pasa como variable el nombre del servicio factory en el controlador principal y también como argumento en la función anónima (Linea 2), por ultimo se declara la variable llamada mensajeDos la cual recibirá la cadena que retorna el servicio factory (Linea 4), quedando asi:


Por ultimo solo queda mostrar la información en la página principal:


para ello primero se incluye el framework angular (Lina 5), luego se incluye el script angular.js que se creo previamente (Linea 6), se agregan las directivas ng-app y ng-controller  las cuales permitirán acceder a las variables, ng-app permite identificar y acceder al modulo principal el cual es declarado en la etiqueta html inicial (Linea 2), la directiva ng-controller se agrega en la etiqueta body inicial la cual permite acceder al controlador y a su contenido, por ultimo se agregan los nombre de las variables a usar (Lineas 10 - 11) desplegando el contenido de las variables como resultado:





Join us

miércoles, 25 de junio de 2014

Ingresar datos en una tabla dinamica - Java



En este articulo vamos a hacer una tabla en java que permite ingresar  y borrar datos dinamicamente.


Para ello se crea un archivo JFrame llamado principal el cual contendrá la tabla:

Se agrega un campo para ingresar la información a la tabla, un botón para borrar los datos y la tabla donde estos serán desplegados:



En el código del archivo JFrame se crea una instancia de la clase DefaultTableModel la cual  brindará la dinamicidad de la tabla principal:


Se le asigna el titulo (entrada) a la columna que tendrá la tabla y se le da número de filas que contendrá cuando el programa se ejecute, en este caso se iniciará en cero (linea 23).


Se le asigna un evento a la caja de texto llamado ActionPerformed que permitirá ingresar los datos con un Enter:



Se ingresa el código en el evento que permitirá ingresar los datos a la tabla:


Se va a las propiedades de la tabla, se ingresa al item table model o modelo de la tabla y se digita el nombre de la instancia de la clase DefaultTableModel (dtm) en la opción custom code o código personalizado en español:


 Se agrega el código al botón para borrar los campos de la tabla:


Se corre el programa y se ingresan algunos datos a la tabla:


Se muestra un mensaje si se pretende ingresar una cadena vacia:


Y se borran los datos presionando el botón Borrar filas:


jueves, 19 de junio de 2014

Ingresar y obtener información de base de datos con php a través de Ajax




En este blog vamos a aprender a ingresar y obtener información de una base de datos usando Ajax.


Creamos una carpeta en el servidor en la cual alojaremos las páginas con las que vamos a trabajar, luego creamos la página principal llamada index.html, en ésta crearemos un formulario para ingresar los datos a la base de datos, y también un botón para desplegarlos.

  



Se crean archivos .php para abrir y cerrar la conexión a la base de datos.


Para abrir la conexión. 


Nombre de archivo: Conexion.php 

Para cerrar la conexión.



Nombre de archivo: cerrarConexion.php


 Se crea un archivo .js para enviar la información del usuario a la base de datos, y en él incluimos la función que enviará los datos con ajax.

Se le asigna un evento al formulario el cual ejecuta el método preventDefault() que evita que éste se redireccione cuando envíe los datos (Linea 18).  






Se crea el archivo que recibirá los datos enviados por ajax para ser agregados en la base de datos.



Nombre de archivo: setUsuario.php


Se crea el archivo que organiza la información para ser desplegada en una tabla.


Nombre de archivo: getUsuario.php


Para obtener la información de la base de datos creamos una función en el mismo archivo .js que obtendrá la información con ajax.



En la página index.html se agregan algunos estilos, las librerías para tener acceso a ajax y jquery, también el acceso al archivo .js donde están las funciones ajax setUsuario y usuario que se han creado (Lineas 5-7):



Se llama la función setUsuario que envía los datos a la base de datos (Linea 13).

Se agrega el evento onclick al botón pasandole como parámetro la función usuarios que muestra los usuarios (linea 22) .

 Ingresando los datos de usuarios (nombre,apellido,teléfono,email) a la base de datos.



Otro usuario



y por ultimo se verifica que los datos fueron ingresados correctamente en la base de datos.





Mostrando los datos a través del botón Mostrar usuarios