Ejemplo de Polimorfismo en Java
agosto 4, 2012 a las 7:34 pm | Publicado en Java | Deja un comentarioEtiquetas: figura, java, polimorfismo
Vamos a ver un ejemplo de polimorfismo en Java con el uso de interfaces. En la definición de Polimorfismo tenemos:
El polimorfismo es un concepto de la programación orientada a objetos que nos permite programar en forma general, en lugar de hacerlo en forma específica. En general nos sirve para programar objetos con características comunes y que todos estos compartan la misma superclase en una jerarquía de clases, como si todas fueran objetos de la superclase. Esto nos simplifica la programación.
No nos vamos a enfocar mucho en la teoría sino en la parte práctica. Vamos a usar una interfaz para aplicar el concepto de polimorfismo.
Primero creamos un proyecto Java en Eclipse. y vamos a crear en el src el package llamado com.practica.polimorfismo.
Ahora vamos a crear la clase Figura.java que contendrá el siguiente código:
publicclass Figura {
private String nombre;
private String color;
public Figura(String nombre) {
super();
this.nombre = nombre;
}
public Figura(String nombre, String color) {
super();
this.nombre = nombre;
this.color = color;
}
public String getNombre() {
return nombre;
}
publicvoid setNombre(String nombre) {
this.nombre = nombre;
}
public String getColor() {
return color;
}
publicvoid setColor(String color) {
this.color = color;
}
}
Esta va a ser nuestra super clase de la cual heredarán otro tipo de figuras. Esta clase es simplemente un POJO que tiene el nombre y el colo de la figura y sus getters y setters y dos constructores, aunque solo usaremos uno.
Ahora vamos a crear una interfaz. En Eclipse nos vamos a File -> New -> Other -> Interface. La interfaz se llamara OperacionesFigura.java Esta interfaz contendrá el siguiente código:
package com.practica.polimorfismo;
publicinterface OperacionesFigura {
double calcularArea();
Figura figura();
}
Básicamente la interfaz tendrá dos métodos. Uno es el método calcularArea() que devolverá un double con el valor del área de la figura, y otro método que nos devolverá todo el objeto Figura. Como sabemos cada figura tiene diferente forma de calcular el área, pero todas tienen esta característica por eso las figuras que implementen esta interfaz deberán implementar estos dos métodos.
Ahora vamos a crear la clase Triángulo.java. Esta clase va a extender o heredar de Figura y a implementar la interfaz OperacionesFigura.
package com.practica.polimorfismo;
publicclass Triangulo extends Figura implements OperacionesFigura {
privatedouble base;
private Double altura;
public Triangulo(String nombre, String color, double base, Double altura) {
super(nombre, color);
this.base = base;
this.altura = altura;
}
@Override
publicdouble calcularArea() {
return (base * altura) / 2;
}
publicdouble getBase() {
return base;
}
publicvoid setBase(double base) {
this.base = base;
}
public Double getAltura() {
return altura;
}
publicvoid setAltura(Double altura) {
this.altura = altura;
}
@Override
public Figura figura() {
return new Figura(getNombre(), getColor());
}
}
Triangulo.java tendrá los atributos propios de un triángulo que son base y altura y además los atributos de la super clase Figura, es decir el nombre y el color. Aquí al implementar la interfaz tenemos el método calcularArea() que es base * altura dividido para 2, en el método figura retornamos una nueva Figura obteniendo el nombre y el color de la super clase. Además tenemos un constructor con todos los atributos de Triangulo y de la super clase Figura.
Ahora aplicamos lo mismo a otra figura. Creamos la clase Circulo.java:
package com.practica.polimorfismo;
importstatic java.lang.Math.*;
publicclass Circulo extends Figura implements OperacionesFigura {
privatedouble radio;
public Circulo(String nombre, String color, double radio) {
super(nombre, color);
this.radio = radio;
}
/*
* (non-Javadoc)
*
* @see com.practica.polimorfismo.OperacionesFigura#calcularArea()
*/
@Override
publicdouble calcularArea() {
returnPI * pow(radio, 2);
}
publicdouble getRadio() {
return radio;
}
publicvoid setRadio(double radio) {
this.radio = radio;
}
@Override
public Figura figura() {
returnnew Figura(getNombre(), getColor());
}
}
Tiene la misma estructura que Triangulo. En este caso tiene como atributo el radio del círculo y en calcularArea() aplicamos la fórmula del área del círculo.
Una vez realizado esto vamos a ver cómo ejecutar estos procedimientos. Para ello creamos la clase CalcularOperacionesFigura.java que contendrá el siguiente código:
package com.practica.polimorfismo;
import java.util.ArrayList;
import java.util.List;public class CalcularOperacionesFigura {
/**
* @param args
*/public static void main(String[] args) {
OperacionesFigura of = new Triangulo(«Triangulo», «Azul», 15.0, 3.0);
OperacionesFigura of2 = new Circulo(«Circulo», «Verde», 12.3);
List<OperacionesFigura> lista = new ArrayList<OperacionesFigura>();
lista.add(of);
lista.add(of2);calcularArea(lista);
}public static void calcularArea(List<OperacionesFigura> listaOperacionesFiguras) {
for (OperacionesFigura of : listaOperacionesFiguras) {
System.out.println(«Area es: » + of.calcularArea());
System.out.println(«Nombre es: » + of.figura().getNombre());
System.out.println(«Color es: » + of.figura().getColor());
}
}}
Analicemos un poco el código.
En el método main creamos una instancia de la interfaz OperacionesFigura y le decimos que es igual a new Triángulo y llenamos los valores del constructor: nombre, color, base, altura. Podemos hacer esto porque Triángulo implementa OperacionesFigura. Luego hacemos lo propio para Circulo.java y le instanciamos desde la interfaz.
Hecho esto creamos una lista genérica de la interfaz List<OperacionesFigura> lista, como es genérica solo se puede agregar a la lista objetos de tipo OperacionesFigura. Hecho eso agregamos a la lista las dos interfaces que instanciamos anteriormente
Ahora creamos un método que se llama calcularArea que recibe como parámetro una lista de interfaz de tipo OperacionesFigura. Luego con un foreach recorremos nuestra lista y accedemos a los métodos de la interfaz que son calcularArea() y figura() y de esa manera podemos obtener el área de la Figura que creamos en la instancia. Nótese que se accede a los métodos de la interfaz y no de Triangulo o Circulo. De esta manera la interfaz sabrá qué calculo debe hacer para obtener el área gracias a la implementación de la interfaz.
Este es un ejemplo sencillo de polimorfismo.
Para descargar el código fuente se puede ir a: http://mygnet.net/codigos/java/varios/ejemplo_de_polimorfismo_en_java.3541
Validar el ingreso del RUC de Ecuador en Java – Tercera parte
febrero 20, 2011 a las 5:37 pm | Publicado en Java, Programacion | 1 comentarioEtiquetas: cedula, java, ruc
En la primera parte les mostré cómo validar el RUC de una persona natural. En la segunda parte les mostré cómo validar el RUC para persona jurídica o extranjera. Ahora les mostraré cómo validar el RUC para empresas públicas.
RUC para empresas públicas
La estructura de este tipo de RUC se muestra en la siguiente figura:
La validación de este tipo de RUC se basa en el algoritmo de Módulo 11. Los coeficientes son: 3, 2, 7, 6, 5, 4, 3, 2.
El procedimiento es el siguiente:
- Se multiplican los primeros nueve dígitos del RUC por cada uno de los coeficientes que le corresponde en la misma posición.
- Se suma ese resultado.
- Se divide ese resultado para el módulo, como este RUC es módulo 11, se divide la suma para 11, y se obtiene su residuo.
- Se resta el módulo (en este caso 11) de el residuo de la división anterior.
- El resultado es el dígito verificador. Si ese número coincide con el número del RUC de la posición 9 el RUC es correcto.
Excepción: Si el residuo es cero, el dígito verificador es cero.
Ejemplo:
Coeficiente: 3 2 7 6 5 4 3 2
RUC: 1 7 6 0 0 0 1 5 5 0 0 0 1
Producto: 3 14 42 0 0 0 3 10 14
Sumatoria: 72
Residuo: 72 dividido para 11 da como respuesta 6, y como residuo 6.
Resta: 11 – 6 = 5.
5 Es el dígito verificador.
El código es el siguiente:
public class ValidaRucEP {
public static final int num_provincias = 24;
public static Boolean validaRucEP(String ruc){
int prov = Integer.parseInt(ruc.substring(0, 2));
boolean val = false;if (!((prov > 0) && (prov <= num_provincias))) {
return val;
}Integer v1,v2,v3,v4,v5,v6,v7,v8,v9;
Integer sumatoria;
Integer modulo;
Integer digito;
Integer sustraendo;
int[] d = new int[ruc.length()];for (int i = 0; i < d.length; i++) {
d[i] = Integer.parseInt(ruc.charAt(i) + «»);
}v1 = d[0]* 3;
v2 = d[1]* 2;
v3 = d[2]* 7;
v4 = d[3]* 6;
v5 = d[4]* 5;
v6 = d[5]* 4;
v7 = d[6]* 3;
v8 = d[7]* 2;
v9 = d[8];sumatoria = v1+v2+v3+v4+v5+v6+v7+v8;
modulo = sumatoria % 11;
sustraendo = modulo * 11;
digito = 11-(sumatoria – sustraendo);
System.out.println(«Digito RUC –> «+digito);
System.out.println(«Digito Calculado –> «+v9);if(digito == v9){
val = true;
}else
val = false;
return val;
}public static void main(String[] args) {
String ruc_dato = «1760001550001»;
if (validaRucEP(ruc_dato)) {
System.out.println(«El RUC es correcto»);
} else
System.out.println(«El RUC es incorrecto»);
}
}
Espero que les sirva.
Pueden descargarse el código fuente de esta explicación en el siguiente enlace: http://mygnet.net/codigos/java/varios/validar_la_cedula_y_el_ruc_de_ecuador_en_java.3335
Validar el ingreso del RUC de Ecuador en Java – Segunda parte
febrero 20, 2011 a las 5:26 pm | Publicado en Java, Programacion | 2 comentariosEtiquetas: java, ruc-ecuador, validar
En la primera parte les mostré cómo validar el RUC de una persona natural. Ahora les mostraré cómo validar el RUC de una persona jurídica o extranjera.
RUC de persona jurídica o extranjera
La estructura de este tipo de RUC se muestra en la siguiente figura:
La validación de este tipo de RUC se basa en el algoritmo de Módulo 11. Los coeficientes son: 4, 3, 2, 7, 6, 5, 4, 3, 2.
El procedimiento es el siguiente:
- Se multiplican los primeros nueve dígitos del RUC por cada uno de los coeficientes que le corresponde en la misma posición.
- Se suma ese resultado.
- Se divide ese resultado para el módulo, como este RUC es módulo 11, se divide la suma para 11, y se obtiene su residuo.
- Se resta el módulo (en este caso 11) de el residuo de la división anterior.
- El resultado es el dígito verificador. Si ese número coincide con el número del RUC de la posición 10 el RUC es correcto.
Excepción: Si el residuo es cero, el dígito verificador es cero.
Ejemplo:
Coeficiente: 4 3 2 7 6 5 4 3 2
RUC: 1 7 9 0 0 1 1 6 7 4 0 0 1
Producto: 4 21 18 0 0 5 4 18 14
Sumatoria: 84
Residuo: 84 dividido para 11 da como respuesta 7, y como residuo 7.
Resta: 11 – 7 = 4.
4 Es el dígito verificador.
El código es el siguiente:
public class ValidaRucSociedades {
/**
* @param args
*/
private static final int num_provincias = 24;
//public static String rucPrueba = “1790011674001″;
private static int[] coeficientes = {4,3,2,7,6,5,4,3,2};
private static int constante = 11;public static Boolean validacionRUC(String ruc){
//verifica que los dos primeros dígitos correspondan a un valor entre 1 y NUMERO_DE_PROVINCIAS
int prov = Integer.parseInt(ruc.substring(0, 2));if (!((prov > 0) && (prov <= num_provincias))) {
System.out.println(«Error: ruc ingresada mal»);
return false;
}//verifica que el último dígito de la cédula sea válido
int[] d = new int[10];
int suma = 0;//Asignamos el string a un array
for (int i = 0; i < d.length; i++) {
d[i] = Integer.parseInt(ruc.charAt(i) + «»);
}for (int i=0; i< d.length – 1; i++) {
d[i] = d[i] * coeficientes[i];
suma += d[i];
//System.out.println(“Vector d en ” + i + ” es ” + d[i]);
}System.out.println(«Suma es: » + suma);
int aux, resp;
aux = suma % constante;
resp = constante – aux;resp = (resp == 10) ? 0 : resp;
System.out.println(«Aux: » + aux);
System.out.println(«Resp » + resp);
System.out.println(«d[9] » + d[9]);if (resp == d[9]) {
return true;
}
else
return false;
}public static void main(String[] args) {
String ruc_dato = «1790011674001»;
if (validacionRUC(ruc_dato))
System.out.println(«El RUC es correcto»);
else
System.out.println(«El RUC es incorrecto»);
}
}
En la tercera parte les enseñaré a validar el RUC para empresas públicas.
Pueden descargarse el código fuente de esta explicación en el siguiente enlace: http://mygnet.net/codigos/java/varios/validar_la_cedula_y_el_ruc_de_ecuador_en_java.3335
Validar el ingreso del RUC de Ecuador en Java – Primera parte
febrero 20, 2011 a las 4:58 pm | Publicado en Java, Programacion | 1 comentarioEtiquetas: cedula, java, ruc-ecuador, validar
En este nuevo tutorial les voy a enseñar a validar el RUC ecuatoriano. La validación de la cédula del Ecuador lo pueden encontrar en el siguiente enlace: http://www.coplec.org/?q=2008/07/01/validador-de-c%C3%A9dula-ecuatoriana
Les puse ese enlace porque usaremos ese código para validar uno de los tres tipos de RUC que existen en el Ecuador.
Los tres tipos de RUC son:
- RUC de persona jurídica o extranjera.- Es del tipo 1790011674001
- RUC de persona pública (entidades estatales).- Es del tipo 1760001550001
- RUC de persona natura.- Es del tipo 1701300103001
Se mostrará la validación por partes según cada tipo de RUC.
RUC de personas naturales
La estructura de este tipo de RUC se muestra en la siguiente figura:
Su validación se explica a continuación:
- El RUC de una persona natural será 13 dígitos, sin letras, sin caracteres especiales , únicamente números, de los cuales los 10 primeros será la cédula de identidad.
- Las 2 primeras posiciones corresponden a la provincia donde fue expedida, por lo cual los dos primeros números no será mayor a 24 ni menor a 1.
- El tercer dígito es menor a 6 ( 0,1,2,3,4,5 ).
- Del cuarto al noveno dígito es un número consecutivo de 6 dígitos.
- El décimo dígito es el dígito verificador.
- Del décimo primer dígito al décimo tercer dígito, identifican en forma consecutiva el número de establecimientos. Empieza siempre con el 0001.
El número de RUC es: 1710034065001 independientemente del número de establecimientos que tenga el contribuyente, no existe un número de RUC tal como 1710034065002.
La validación de la cédula de Identidad pasa un algoritmo «Módulo 10». Al número se lo divide en 13 partes, las 9 primeras son el número mismo, la 10 es el dígito autoverificador, y las 3 restantes indican si es principal o establecimiento adicional. Los coeficientes usados para verificar el décimo dígito de la cédula, mediante el algoritmo «Módulo 10» son: 2.1.2.1.2.1.2.1.2
Como se ve en la imagen se usan los 9 primeros dígitos del RUC. Los números de las posiciones impares e multiplican por 2, y los números de las posiciones pares se multiplican por 1. Si el resultado de multiplicar por 2 es mayor a 9, se resta 9. Como en la figura, 12 – 9 = 3.
Luego se suman todos los valores del producto. En este caso la respuesta es 25.
Luego se resta este número de su decena superior. La decena superior a 25 es 30. Por lo tanto queda: 30 – 25 = 5.
Y 5 es el dígito verificador, si este número coincide con el décimo dígito del RUC la cédula es correcta.
Excepción: Si el resultado de la resta es 10, el dígito verificador será 0.
Usando el código de la página que les puse arriba y haciéndole una pequeña modificación, el resultado queda:
public class ValidaCedula {
private static final int num_provincias = 24;public static Boolean validacionCedula(String cedula){
//verifica que los dos primeros dígitos correspondan a un valor entre 1 y NUMERO_DE_PROVINCIAS
int prov = Integer.parseInt(cedula.substring(0, 2));if (!((prov > 0) && (prov <= num_provincias))) {
//addError(«La cédula ingresada no es válida»);
System.out.println(«Error: cedula ingresada mal»);
return false;
}//verifica que el último dígito de la cédula sea válido
int[] d = new int[10];
//Asignamos el string a un array
for (int i = 0; i < d.length; i++) {
d[i] = Integer.parseInt(cedula.charAt(i) + «»);
}int imp = 0;
int par = 0;//sumamos los duplos de posición impar
for (int i = 0; i < d.length; i += 2) {
d[i] = ((d[i] * 2) > 9) ? ((d[i] * 2) – 9) : (d[i] * 2);
imp += d[i];
}//sumamos los digitos de posición par
for (int i = 1; i < (d.length – 1); i += 2) {
par += d[i];
}//Sumamos los dos resultados
int suma = imp + par;//Restamos de la decena superior
int d10 = Integer.parseInt(String.valueOf(suma + 10).substring(0, 1) +
«0») – suma;//Si es diez el décimo dígito es cero
d10 = (d10 == 10) ? 0 : d10;//si el décimo dígito calculado es igual al digitado la cédula es correcta
if (d10 == d[9]) {
return true;
}else {
//addError(«La cédula ingresada no es válida»);
return false;
}
}public static void main(String[] args) {
String ruc_dato = «1710034065001»;
if (validacionCedula(ruc_dato.substring(0, 10)))
System.out.println(«El RUC es correcto»);
else
System.out.println(«El RUC es incorrecto»);
}
}
Una explicación del código. Hay una parte donde dice:
d[i] = ((d[i] * 2) > 9) ? ((d[i] * 2) – 9) : (d[i] * 2);
El uso del símbolo de pregunta ? es un equivalente al uso del if. Todo lo que está entre el ? y los dos puntos será lo que suceda en caso de ser verdadero, y lo que está después de los dos puntos sucederá en caso de ser falso.
Validar el ingreso del RUC de Ecuador en Java – Segunda parte
Validar el ingreso del RUC de Ecuador en Java – Tercera parte
Para conocer un poco más sobre la estructura del RUC pueden visitar el siguiente sitio: http://www.campvs.org/legislacion/index.php?option=com_content&task=view&id=18&Itemid=69
Pueden descargarse el código fuente de esta explicación en el siguiente enlace: http://mygnet.net/codigos/java/varios/validar_la_cedula_y_el_ruc_de_ecuador_en_java.3335
Añadir imágenes a una base de datos y cargarlas usando PHP y MySQL
agosto 26, 2010 a las 4:50 pm | Publicado en PHP, Programacion | 48 comentariosEtiquetas: base-datos, dreamweaver, imagenes, mysql, php
En este tutorial les voy a enseñar a trabajar con imágenes y una base de datos con PHP y MySQL. Vamos a utilizar Dreamweaver CS5, el cual nos va a ahorrar bastante tiempo en algunas cosas.
Al trabajar con imágenes y bases de datos tenemos dos opciones, la primera es guardar la imagen en la base de datos, y la segunda es guardar la ruta de la imagen en la base de datos. El primer caso haría que la base de datos se vuelva un poco pesada, así que usaremos el segundo caso, almacenando únicamente la ruta de la imagen en la base de datos. Esta forma es más fácil y práctico de trabajar con imágenes.
Bueno ahora empecemos. Primero en Dreamweaver vamos a crear un nuevo sitio. Nos vamos al menú Sitio y escogemos Nuevo sitio en la pestaña Sitio, le ponemos un nombre y su ruta:
Clic en la imagen para ampliar
Luego nos vamos a la pestaña Servidores, ahí damos clic en el símbolo + y llenamos con la siguiente información (en mi caso uso el puerto 8081, si usan otro deben modificar eso):
Clic en la imagen para ampliar
Luego en la pestaña avanzadas realizamos lo siguiente:
Clic en la imagen para ampliar
Luego damos clic en Guardar, en la primera ventana y seleccionamos el servidor que creamos:
Clic en la imagen para ampliar
Luego damos clic en Guardar.
Este proceso es en la version CS5 de Dreamweaver, en la versión 8 es un poco diferente.
Una vez hecho esto creamos un nuevo archivo PHP y lo guardamos en la ruta del sitio, en mi caso C:\xampp\htdocs\PracticaImagenes le vamos a poner el nombre de formulario.php.
Ahora vamos a crear la base de datos que contendrá la información de las imágenes. Usando el phpMyAdmin que trae el XAMPP vamos a crear la base ImagenesPractica y dentro la tabla Catalogo con los siguientes campos:
Ahora en Dreamweaver en el archivo formulario.php nos vamos al menú Ventana -> Bases de datos. En el panel que aparece damos clic en el símbolo + y escogemos «Conexión MySQL» y llenamos los datos como se muestra:
Clic en la imagen para ampliar
Ahora vamos a crear una página que se llame ingreso_exitoso.php la cual contendrá el texto «El dato ha sido ingresado correctamente».
Cerramos el archivo ingreso_exitoso.php y luego nos vamos al archivo formulario.php. Allí vamos a crear un formulario como el que se muestra en la imagen:
Clic en la imagen para ampliar
Junto a cada elemento del formulario puse el nombre que tiene cada uno, y el cuadro de la derecha muestra los atributos de la lista Tipo. Bueno en la imagen me faltó un botón que se diga Enviar. Ahí lo incluyen. Una vez hecho esto vamos al menú Insertar -> Objetos de datos -> Insertar registros -> Insertar registro y llenamos como se muestra:
Se debe ir escogiendo cada columna y asignarle el valor correspondiente. En tras insertar, ir a escogemos la página que creamos antes que solo tiene un texto. Damos clic en Aceptar.
Ahora en la ruta del sitio que en mi caso es C:\xampp\htdocs\PracticaImagenes vamos a crear una carpeta llamada images y dentro de ella dos carpetas, una llamada Camisetas y otra llamada Accesorios.
Hasta el momento lo que hace Dreamweaver es llenar la base de datos con lo que tenemos en el formulario. Pero todavia no almacena la ruta de la imagen. Eso vamos a hacer ahora. Antes tenemos un combobox que nos pide el tipo, ya sea Camiseta o Accesorio (suponiendo que es una tienda deportiva) si escogemos camiseta se debe guardar la imagen en C:\xampp\htdocs\PracticaImagenes\images\Camisetas y si escogemos Accesorio se debe guardar en C:\xampp\htdocs\PracticaImagenes\images\Accesorios y además almacenar esa ruta en la base de datos.
Estando en el archivo formulario.php nos vamos en Dreamweaver a la opción de Código (Ver -> Código) y ubicamos la siguiente línea de código:
Clic en la imagen para ampliar
Debajo de la línea subrayada vamos a insertar el siguiente código PHP:
$tipo_prod = $_POST[«lstTipo»];
//Guardar imagen
if(is_uploaded_file($_FILES[‘fleImagen’][‘tmp_name’])) { // verifica haya sido cargado el archivo
$ruta= «images/$tipo_prod/».$_FILES[‘fleImagen’][‘name’];
move_uploaded_file($_FILES[‘fleImagen’][‘tmp_name’], $ruta);
}
Más abajo tenemos el código:
GetSQLValueString($_POST[‘fleImagen’], «text»),
Lo modificamos y le ponemos lo siguiente:
GetSQLValueString($ruta, «text»),
Listo ahora guardamos el archivo formulario.php y probamos la página web en el navegador.
Al llenar el formulario y escoger una imagen ésta se guarda en la carpeta correspondiente según sea Camiseta o Accesorio y su ruta se guarda en la base de datos:
Clic en la imagen para ampliarla
Ahora vamos a mostrar los datos en otro archivo. Creamos un nuevo archivo llamado catalogo.php
Vamos al menú Ventana -> Vinculaciones. En el panel damos clic en el símbolo + y llenamos el cuadro de diálogo como se muestra:
Clic en la imagen para ampliar
Damos clic en Aceptar. Ahora vamos al menú Insertar -> Objetos de datos -> Datos dinámicos -> Tabla dinámica:
Clic en la imagen para ampliar
Guardamos la página y la ejecutamos en el navegador, y podemos ver los datos de la base. Ahora para ver la imagen en lugar de la ruta nos vamos al código y ubicamos el siguiente código:
Clic en la imagen para ampliar
En la parte que dice <td><?php echo $row_catalogo_imag[‘Imagen’]; ?></td> le modificamos por lo siguiente:
<td><img src=»<?php echo $row_catalogo_imag[‘Imagen’]; ?>» / ></td>
Actualizamos la página y vemos las imágenes:
Clic en la imagen para ampliar
Espero que les haya gustado este tutorial. Espero sus comentarios y preguntas.
Pueden descargar el programa completo en: http://www.mygnet.net/codigos/php/manejodebasedatos/insertar_imagenes_en_una_base_de_datos_de_mysql_con_php.3238
Programa de encriptación simétrica con el método matricial hecho en Java
agosto 4, 2010 a las 10:03 pm | Publicado en Java, Programacion | 3 comentariosEtiquetas: desencriptacion, encriptación, java, programa
Este es un programa que hicimos en la universidad. Está hecho en un applet de Java en Netbeans. Primero les explico cómo funciona este método de encriptación y desencriptación y luego el funcionamiento del programa.
El método de encriptación simétrica se llama así porque usa la misma clave para encriptar y desencriptar. La clave es un valor numérico.
Para entender cómo funciona vamos a usar un ejemplo.
El mensaje a encriptar será: HOLA MUNDO ES UNA FRASE COMUN y la clave va a ser 4.
Lo que hacemos es agrupar el texto en número de caracteres según la clave y formar una matriz. Así con esa frase y esa clave nos quedaría:
H O L A
_ M U N
D O _ E
S _ U N
A _ F R
A S E _
C O M U
N _ _ _
Para el ejemplo reemplacé los espacios con guiones bajos. Viendo esa frase en una línea sería:
HOLA | _MUN |DO_E | S_UN |A_FR | ASE_ | COMU | N_ _ _ |
Al último puse 3 guiones bajos para completar los 4 caracteres finales. Para encriptar la frase viendo la matriz vamos cogiendo los caracteres de la primera columna, luego de la segunda, etc, la frase nos queda:
H_DSAACN -> Primera columna
OMO__SO_ -> Segunda columna
LU_UFEM_ -> Tercera columna
ANENR_U_ -> Cuarta columna
La frase encriptada completa nos queda:
H_DSAACNOMO__SO_LU_UFEM_ANENR_U_
Tomando en cuenta que los guiones bajos son en realidad espacios.
Ahora analizando el número de caracteres tenemos que la frase original tiene 29 caracteres incluyendo los espacios, mientras que la frase encriptada tiene 31 caracteres (no se toma en cuenta el último espacio).
Este dato necesitamos para el proceso de desencriptación. Para eso se parte de la frase encriptada y se divide el número de caracteres para la clave. Si el residuo es cero, la respuesta de la división es el número de filas de la matriz, si no es cero el número de filas de la matriz es la respuesta d ela división más uno.
Si dividimos 31 para 4 la respuesta es 7 con residuo 3, como no es exacta entonces el número de filas será 7 + 1 = 8. Quiere decir que debemos agrupar la frase encriptada en grupo de 8 caracteres así:
H_DSAACNOMO__SO_LU_UFEM_ANENR_U -> Frase encriptada
H_DSAACN | OMO__SO_ | LU_UFEM_ | ANENR_U
Para formar la matriz cada grupo de caracteres es una columna de la matriz, nos queda por tanto:
H O L A
_ M U N
D O _ E
S _ U N
A _ F R
A S E _
C O M U
N _ _
Nuevamente volvemos a la matriz original y ya es cuestión de leer las filas en orden y se obtiene el mensaje desencriptado.
Esto es lo que haremos en el programa hecho en Java.
Lo pueden descargar del siguiente enlace: http://www.mygnet.net/codigos/java/criptografia/encriptacion_simetrica_con_metodo_matricial.3224
Manipulación de GoogleMaps con ASP.Net
May 15, 2010 a las 4:34 pm | Publicado en ASP, Programacion | 8 comentariosEtiquetas: asp.net, googlemaps, manipular, visual-studio-2008
Ahora les traigo otro tutorial muy interesante. Vamos a hacer lo siguiente:
- Vamos a tener en una página de asp.net insertado el GoogleMaps.
- Vamos a crear un buscador con Visual Studio.Net 2008 para encontrar cualquier lugar en GoogleMaps.
- El buscador será de dos tipos: podremos buscar por coordenadas, o podremos buscar por el nombre de algún lugar específico.
Esto será lo que vamos a crear:
Clic en la imagen para ampliar
Como se puede ver en la imagen tenemos el buscador por coordenadas o por localidad. Y el resultado nos mostrará en el GoogleMaps que insertamos en nuestra página web.
Para la programación utilizaremos el Visual Studio 2008 (con la versión 2005 también funciona igual). Y vamos a necesitar algunas cosas más que lo iremos diciendo en el tutorial. Ahora si, manos a la obra!!!
Para hacer este programa utilizaremos un API llamado GoogleMaps de Subgurim, para ello nos vamos a la siguiente dirección:
Allí nos descargamos un archivo comprimido que contiene el archivo GMaps.dll
Luego con el Visual Studio 2008 creamos un nuevo Sitio web. En el Explorador de soluciones, damos clic derecho al proyecto y escogemos «Agregar referencia»:
Clic en la imagen para ampliar
En la pantalla que aparece nos vamos a la pestaña Examinar y buscamos el archivo dll que nos descargamos:
Clic en la imagen para ampliar
Automáticamente en el Explorador de soluciones se habrá creado una carpeta llamada Bin que contiene el archivo GMaps.dll
Ahora antes de continuar debemos comentarles que para hacer uso del API de Google de GoogleMaps es necesario obtener una clave que nos proporciona Google en la siguiente dirección:
Allí nos vamos donde dice «Regístrate para obtener una clave de API de Google Maps»:
Clic en la imagen para ampliar
Ahi Google nos pide que aceptemos el contrato e ingresemos el sitio web donde lo vamos a usar, yo puse el sitio de mi blog, si no tienes página web entonces ingresa http://localhost. Y luego Google te proporciona la clave que vamos a necesitar. También es importante decir que para que Google te proporcione el API debes tener una cuenta en Gmail:
Clic en la imagen para ampliar
Listo una vez que tengamos la clave del API, nos vamos al Visual Studio .Net al Explorador de soluciones y damos doble clic en el archivo web.config allí vamos a encontrar la siguiente línea de código:
<appSettings/>
Allí borramos esa línea de código e insertamos la siguiente:
<appSettings>
<add key=»googlemaps.subgurim.net» value=»tuClave_yourKey«/>
</appSettings>
La parte que está en rojo debe ser reemplazada por el código API que obtuvieron anteriormente en la página de Google. Guardamos el archivo web.config y lo cerramos.
Ahora volvemos a la página principal que es Default.aspx y nos vamos a la sección de Código. Allí al comienzo del documento encontramos la siguiente línea:
<%@ Page Language=»VB» AutoEventWireup=»false» CodeFile=»Default.aspx.vb» Inherits=»_Default» %>
Debajo de esa línea de código escribimos la siguiente:
<%@ Register Assembly=»GMaps» Namespace=»Subgurim.Controles» TagPrefix=»cc» %>
Ahora dentro del código HTML tenemos la etiqueta <form> y dentro una etiqueta <div></div> entre esas dos etiquetas div insertamos la siguiente línea de código:
<cc:GMap ID=»GMap1″ runat=»server» />
El nombre del mapa será GMap1 y ese nombre nos servirá para manipularlo. Ahora nos vamos a la parte de Diseño y podremos ver que aparece un recuadro como el siguiente:
Clic en la imagen para ampliar
Estando en el modo Diseño damos doble clic en cualquier parte blanca de la página para ingresar al método Page_Load. Esto abrirá el archivo Default.aspx.vb y cargará el método Page_Load, nos vamos al inicio de ese archivo e importamos las siguientes librerías:
Imports System
Imports System.Web.UI
Imports Subgurim.Controles
Ahora dentro del método Page_Load vamos a insertar el siguiente código:
‘Establecemos la longitud y latitud que se mostrará al cargar la página web
Dim latitud As Double
Dim longitud As Double
latitud = 40.381090
longitud = -3.622205‘Carga el mapa con los valores establecidos anteriormente
Dim ubicacion As New GLatLng(latitud, longitud)
GMap1.setCenter(ubicacion, 15)‘Establecemos alto y ancho en px
GMap1.Height = 300
GMap1.Width = 400‘Adiciona el control de la parte izq superior (moverse, ampliar y reducir)
GMap1.addControl(New GControl(GControl.preBuilt.LargeMapControl))‘GControl.preBuilt.MapTypeControl: permite elegir un tipo de mapa y otro.
GMap1.addControl(New GControl(GControl.preBuilt.MapTypeControl))‘Permite hacer zoom con la rueda del mouse
GMap1.enableHookMouseWheelToZoom = True‘Tipo de mapa a mostrar
GMap1.mapType = GMapType.GTypes.Normal
La explicación del código aparece en los comentarios. Ahí puse un ejemplo de longitud y latitud reales. Puedes probar con estos otros ejemplos de latitud y longitud válidos:
Quito
-0,229498
-78,524277New York
40,7142691
-74,0059729Londres
51,5001524
-0,1262362
Luego te mostraré cómo puedes obtener las coordenadas de cualquier lugar en este mismo tutorial. Ahora presionamos Ctrl + F5 para probar el mapa. Te debe cargar algo como esto:
Clic en la imagen para ampliar
Ahora volvemos al archivo Default.aspx a la vista de Diseño y sobre el mapa vamos a insertar los siguientes controles:
Clic en la imagen para ampliar
En la imagen se muestra los nombres de los componentes. Se debe respetar eso para que funcione el código que vamos a poner a continuación.
El RadioButtonList llamado RbtOpciones debe tener habilitada la opción AutoPostBack:
Clic en la imagen para ampliar
Ahora damos doble clic en el elemento rbtOpciones y carga el método rbtOpciones_SelectedIndexChanged allí vamos a copiar el siguiente código:
Dim val As Integer
‘Obtenemos en una variable el índice de la opción escogida
val = rbtOpciones.SelectedIndex()‘Opcióm cero es por coordenadas y habilitamos los elementos que se requieren para buscar por coordenadas
If val = 0 Then
txtLatitud.Enabled = True
txtLongitud.Enabled = True
btnIr.Enabled = True
txtCiudad.Enabled = False
btnCiudad.Enabled = False‘Opción uno es por ubicación y habilitamos los elementos que se requieren para buscar por ubicación
ElseIf val = 1 Then
txtLatitud.Enabled = False
txtLongitud.Enabled = False
btnIr.Enabled = False
txtCiudad.Enabled = True
btnCiudad.Enabled = True
End If
Ahora vamos al botón que se llama btnIr (el que contiene el texto Cambiar) le damos doble clic y en el método Click agregamos el siguiente código:
Dim latitud As Double
Dim longitud As Double‘Almacenamos en variables los datos de los campos de texto de longitud y latitud
latitud = Me.txtLatitud.Text
longitud = Me.txtLongitud.Text‘Mostramos el mapa en esa ubicación por coordenadas
Dim ubicacion As New GLatLng(latitud, longitud)
GMap1.setCenter(ubicacion, 15)
Ahora nos vamos al botón btnCiudad (el que tiene el texto Ir…) y le damos doble clic y en el método Clic insertamos el siguiente código:
Try
Dim GeoCode As Subgurim.Controles.GeoCode
Dim sMapKey As String = System.Configuration.ConfigurationManager.AppSettings(«googlemaps.subgurim.net»)‘Obtenemos la ubicación del campo de texto txtCiudad
GeoCode = GMap.geoCodeRequest(Me.txtCiudad.Text, sMapKey)
If GeoCode.valid = True Then
‘Mostramos la longitud y latitud de la ubicación en los labels
Me.lblLatitud.Text = GeoCode.Placemark.coordinates.lat
Me.lblLongitud.Text = GeoCode.Placemark.coordinates.lng‘Cargamos el mapa en la ubicación por la que se hizo la búsqueda
Dim gLatLng As New Subgurim.Controles.GLatLng(GeoCode.Placemark.coordinates.lat, GeoCode.Placemark.coordinates.lng)GMap1.setCenter(gLatLng, 16, Subgurim.Controles.GMapType.GTypes.Normal)
‘Mostramos mediante una marca la ubicación
AddMarker(GeoCode.Placemark.coordinates.lat, GeoCode.Placemark.coordinates.lng)Else
Msg(«No se puede encontrar la ubicación»)
End If
Catch ex As Exception
Msg(ex.Message)
End Try
Ahí seguramente te aparecen dos errores. No te preocupes. Ahora nos salimos del método Clic, donde termina el End Sub. Allí copiamos el siguiente código:
Private Sub AddMarker(ByVal dLat As Double, ByVal dLong As Double)
Try
Dim gLatLng As New Subgurim.Controles.GLatLng(dLat, dLong)Dim oOption As New Subgurim.Controles.GMarkerOptions
oOption.draggable = TrueGMap1.resetMarkers()
GMap1.resetListeners()oMarker = New Subgurim.Controles.GMarker(gLatLng, oOption)
GMap1.addGMarker(oMarker)
GMap1.addListener(New Subgurim.Controles.GListener(oMarker.ID, Subgurim.Controles.GListener.Event.dragend, _
«function(){ document.getElementById(‘hidLat’).value=» & oMarker.ID & «.getPoint().lat();document.getElementById(‘hidLng’).value=» & oMarker.ID & «.getPoint().lng() }»))
Catch ex As Exception
Msg(ex.Message)
End Try
End Sub
Fuera de ese método copiamos el siguiente código:
Private Sub Msg(ByVal sText As String)
Response.Write(«<script type=’text/javascript’>alert(‘» & sText & «‘);</script>»)
End Sub
Volvemos al modo Diseño y damos doble clic en el botón btnTipoMapa y dentro copiamos el siguiente código:
Dim val As Integer
Dim tipo_datos As Integertipo_datos = rbtOpciones.SelectedIndex()
val = lstTipoMapa.SelectedIndex()
If tipo_datos = 0 Then
If val = 0 Then
btnIr_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Normal
ElseIf val = 1 Then
btnIr_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Satellite
ElseIf val = 2 Then
btnIr_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Hybrid
ElseIf val = 3 Then
btnIr_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Physical
End If
ElseIf tipo_datos = 1 Then
If val = 0 Then
btnCiudad_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Normal
ElseIf val = 1 Then
btnCiudad_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Satellite
ElseIf val = 2 Then
btnCiudad_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Hybrid
ElseIf val = 3 Then
btnCiudad_Click(sender, e)
GMap1.mapType = GMapType.GTypes.Physical
End If
End If
Listo el programa ha sido finalizado. Presionamos F5 para probar. Puedes buscar por coordenadas (arriba te dejé unas 3 coordenadas para que pruebes) o puedes buscar por ubicación. Puedes poner por ejemplo Torre Eiffel, además cuando buscas por ubicación puedes conocer las coordenadas del sitio que buscaste. Además puedes cambiar el tipo de Mapa desde el formulario.
No olvides dejar sus comentarios, sugerencias o preguntas. Por cierto en la versión 2005 del Visual Studio .Net también funciona este tutorial.
Se pueden descargar el programa de la siguiente página: http://www.mygnet.net/codigos/aspdotnet/net/manipular_googleearth_desde_asp_dot_net.3190
Para ejecutarlo deben ingresar el API de Google en el archivo web.config
Publiqué unos videos sobre este tutorial. Aquí les comparto:
-
Primera parte
-
Segunda parte
-
Tercera parte
Créditos del video:
Realizador del video: Hugo Mora (cyberexplorador)
Voz y edición del video: Pablo Yacelga
Consultar, insertar y modificar registros de una base de datos de MySQL con PHP sin programar nada
marzo 27, 2010 a las 7:16 pm | Publicado en PHP, Programacion | 84 comentariosEtiquetas: base, datos, dreamweaver, mysql, php
En otro manual les expliqué cómo realizar manejo se sesiones con PHP y MySQL sin programar nada con Dreamweaver. Esta vez les voy a explicar cómo realizar consultas a bases de datos, ingreso de registros a bases de datos y modificación de estos registros sin programar nada usando Dreamweaver. En este caso usaré una vez más la versión 8 de Dreamweaver (cuando todavía era de Macromedia), sin embargo, ya hice la misma práctica con la versión de Adobe CS3 y es exactamente igual.
Vamos a copiar algunos parámetros del otro manual que hice ya que el comienzo es exactamente igual.
Las herramientas que vamos a utilizar son:
- Wamp Server
- Dreamweaver 8.0 o superior
- Mozilla Firefox o Internet Explorer o cualquier otro navegador
Una vez que tengamos instalado nuestro servidor web, en este caso Wamp Server vamos a proceder a explicar este tutorial.
Primero vamos a crear una base de datos en MySQL usando phpmyadmin que viene con el WAMP Server. La base de datos para este tutorial se llamará «tienda» y contendrá una tabla llamada «Libros» (sin comillas). Esta tabla contiene 5 campos:
Vamos a ingresar 3 libros para tener datos en la base:
Ahora vamos a realizar la página web. Primero creamos una carpeta en el directorio de nuestro servidor web. Es este caso el servidor web es WAMP, por lo tanto voy a crear un directorio llamado TiendaPráctica en la ruta C:\wamp\www
Esa ruta varía según el servidor que usemos. Así por ejemplo si el servidor es XAMPP, la ruta sería C:\xampp\htdocs
Una vez realizado eso nos vamos a Dreamweaver, y antes de abrir algún tipo de documento nos vamos a Sitio -> Nuevo sitio. Vamos a la opción «Avanzadas» y en la opción Datos locales llenamos los campos como muestra la figura:
Clic en la imagen para ampliar
Luego en la opción de Servidor de pruebas ponemos los siguientes datos:
Clic en la imagen para ampliar
No estoy dando muchas explicaciones de los campos debido a que ya lo hice en el otro tutorial. Sin embargo, en este último paso solo vale acotar que deberían cambiar (de ser necesario) el «Prefijo de URL», yo uso el url http://localhost:8081/TiendaPractica con el puerto 8082, debido a que le configuré al Apache para salir por ese puerto, ya que el puerto por defecto (el 80) lo usa el IIS. Así que ese campo deben cambiar de ser necesario.
No olviden realizar estos pasos previos, si no no funcionará la conexión a la base de datos.
Luego nos vamos al menú Archivo -> Nuevo y seleccionamos un archivo de tipo PHP. Vamos a guardar el archivo como index.php en la ruta que creamos anteriormente C:\wamp\www\TiendaPractica
Ahora vamos a enlazar la base de datos que creamos a Dreamweaver. Nos vamos al menú Ventana -> Bases de datos. Se abre un panel lateral a la derecha. Ahí damos clic en el símbolo + y damos clic en «Conexión MySQL». Se abre un cuadro de diálogo y lo llenamos con los siguientes datos:
Clic en la imagen para ampliar
En el campo nombre de la conexión va cualquier nombre. En el panel de la derecha aparece la conexión a la base de datos especificada.
Ahora nos vamos al menú Ventana -> Vinculaciones. Se aparece un panel en la parte derecha, se da clic en el símbolo +, y seleccionar «Juegos de registro (consulta)» . Ahí llenar los datos de la siguiente manera:
Clic en la imagen para ampliar
Ya tenemos la conexión a la base de datos. Ahora vamos a visualizar los datos en la página web. Vamos al menú Insertar -> Objetos de aplicación -> Datos dinámicos -> Tabla dinámica. Llenamos el cuadro que aparece de la siguiente manera:
Clic en la imagen para ampliar
Esto se ha creado automáticamente en Dreamweaver:
Clic en la imagen para ampliar
Ahí podemos modificar los encabezados de las columnas y presionamos F12 para visualizar una vista previa de la página en el explorador:
Visualización de los datos. Clic en la imagen para ampliar
Hasta el momento hemos cargado los datos de una base de datos sin programar absolutamente nada. Todo lo ha hecho Dreamweaver. Por cierto, arriba especificamos que nos muestre solo 10 registros cada vez, en caso de haber más registros se crearán enlaces de navegación para mostrar los siguientes registros.
Ingresar registros
Ahora vamos a ingresar registros a la base de datos. Vamos a usar el mismo archivo.
Primero vamos a crear una página web PHP llamada ingreso_exitoso.php Usaremos esa página para decirle al usuario que el dato que ingresó en la base se insertó correctamente. Esa página solo tendrá un mensaje y un enlace, el enlace será hacia la página index.php como se muestra en la figura:
Clic en la imagen para ampliar
Ahora nos vamos al archivo index.php y ubicamos el cursor después de la tabla creada por Dreamweaver, Luego nos vamos al menú Insertar -> Objetos de aplicación -> Insertar registro -> Asistente de formulario de inserción de registros. Allí llenamos el cuadro de diálogo con las siguientes opciones:
Clic en la imagen para ampliar
Automáticamente Dreamweaver agrega un formulario para poder ingresar registros a la base de datos:
Clic en la imagen para ampliar
Ahora presionamos F12 para probar el ingreso de datos.
En esta versión de Dreamweaver no se inserta el menú de navegación de registros automáticamente. Para hacer eso nos ubicamos debajo de la tabla que contiene los datos y vamos al menú Insertar -> Objetos de aplicación -> Paginación de juegos de registros -> Barra de navegación de juego de registros. En el cuadro que se aparece llenamos de la siguiente manera:
Clic en la imagen para ampliar
En la página web nos queda así:
Clic en la imagen para ampliar
Ahora tenemos un formulario que nos permite ingresar datos a la base de datos de MySQL con PHP y no hemos ingresado una sola línea de código.
Modificar un registro
Para modificar un registro vamos a usar un poco de código PHP adicional. Primero debemos agregar lo siguiente en el archivo index.php En la tabla de los datos vamos a ingresar dos columnas al final de forma que tengamos lo siguiente:
Clic en la imagen para ampliar
Una vez hecho eso vamos a crear una página web nueva que se llame modificar.php y creamos una pagina php que se llame modificar_exitoso.php. Es ésta última página insertamos un mensaje que diga «El dato ha sido actualizado correctamente» y debe tener un enlace a la página index.php tal cual como se hizo con ingreso_exitoso.php.
Ahora regresamos a la página modificar.php y debemos crear una vinculación de juegos de registros (la conexión a la base de datos se crea una sola vez para todo el sitio web, sin embargo, las vinculaciones se deben crear en cada nueva página web del sitio). Para ello nos vamos a Ventana -> Vinculaciones. En el símbolo + damos clic en Juego de Registros (consulta). Ponemos un nombre a la consulta y seguimos los pasos anteriores para hacer una vinculación.
Hecho eso vamos al menú Insertar -> Objetos de aplicación -> Actualizar registro -> Asistente de formulario de actualización de registro y llenamos el cuadro de diálogo con la siguiente información (en mi caso le puse de nombre a la vinculación modificar_consulta):
Clic en la imagen para ampliar
Al dar clic en Aceptar se creará automáticamente un formulario como el siguiente:
Ahora vamos a buscar el siguiente código en la página web que hizo Dreamweaver:
Clic en la imagen para ampliar
Ahí vamos a insertar la siguiente línea después de mysql_select_db($database_conexion_libros, $conexion_libros);:
$valor = $_GET[‘IdLibro’];
Y la línea que dice $query_modificar_consulta = «SELECT * FROM libros»; la modificamos de la siguiente manera:
$query_modificar_consulta = «SELECT * FROM libros where IdLibro=$valor»;
Nos queda algo así:
Clic en la imagen para ampliar
Como vemos lo único que hacemos es usar el método GET para obtener el ID del libro y cargamos los datos completos que se refieren a ese libro. Ahora nos vamos a index.php y seleccionamos la palabra Modificar y le hacemos un vínculo al siguiente enlace:
modificar.php?IdLibro=<?php echo $row_consulta_libros[‘IdLibro’]; ?>
Nos queda de la siguiente manera:
Clic en la imagen para ampliar
Presionamos F12 para probar.
Eliminar un registro
Primero creamos una página web llamada borrado_exitoso.php allí escribimos un mensaje que diga «El dato ha sido borrado correctamente» y ponemos un link a la página index.php.
Una vez hecho eso creamos un archivo llamado borrar.php y nos vamos al menú Insertar -> Objetos de aplicación -> Eliminar registro y llenamos el cuadro de diálogo con la siguiente información:
Clic en la imagen para ampliar
Hecho eso regresamos al archivo index.php y seleccionamos la palabra Borrar y le hacemos un link al siguiente enlace:
borrar.php?IdLibro=<?php echo $row_consulta_libros[‘IdLibro’]; ?>
Hecho eso presionamos F12 para probar la página web.
Listo!! Hemos creado una página web que permite interactuar con una base de datos de MySQL usando PHP sin programa casi nada. Todo lo hizo Dreamweaver.
Detalle de registros
Ahora les voy a enseñar una última opción que tiene Dreamweaver. Consiste en mostrar, para este caso, el Id del libro y el nombre. Al dar clic sobre el nombre nos mostrará toda la información del libro obtenida de la base de datos, y al igual que antes, sin programar absolutamente nada.
En el archivo index.php debajo y fuera del formulario de ingreso creamos un link a una página llamada libros.php (esto es solo para poder dirigirnos a la página que vamos a crear).
Hecho eso creamos una página llamada libros.php. En esa página creamos una nueva vinculación a la base de datos con el método que ya explicamos antes. A esta vinculación la llamaremos libros_consulta.
Ahora creamos otra página web que se llamará detalles_libros.php.
Hecho eso volvemos a la página libros.php y nos vamos a Insertar -> Objetos de aplicación -> Juego de páginas Maestro/Detalle. Llenamos el cuadro de diálogo de la siguiente manera:
Clic en la imagen para ampliar
Ahora explicaremos cada campo:
- Juego de registros: Es el nombre de la vinculación.
- Campos de página maestro: Son los campos que se visualizarán en la página maestro. En este caso solo queremos ver el Id del libro y el nombre del autor. Para quitar registros lo seleccionamos y damos clic en el símbolo menos.
- Vincular con detalle desde: Es el campo que contendrá el enlace para ver el detalle del registro.
- Pasar clave exclusiva: Es la clave primaria de la tabla.
- Mostrar: Es el número de registros que se podrán ver en la tabla maestro.
- Nombre de página detalle: Dirección de la página web donde se mostrará los detalles del registro.
- Campos de la página Detalle: Son los campos que mostrará la página al dar clic en un elemento.
Damos clic en Aceptar. Hecho eso guardamos la página libros.php y la página detalle_libros.php. Pues ya te habrás dado cuenta que ambas páginas se modificaron.
Esto se crea en la página libros.php:
Clic en la imagen para ampliar
Y esto se crea en la página detalle_libros.php:
Clic en la imagen para ampliar
Ahora vamos a la página index.php y presionamos F12 para probar. Damos clic en el enlace a la página libros.php y tenemos lo siguiente:
Clic en la imagen para ampliar
Al dar clic en el nombre de un libro nos dará más detalles sobre el mismo:
Detalle de registros
Bien este es el final del tutorial Espero que les sirva. No olviden dejar sus preguntas, comentarios o sugerencias.
Pueden descargarse el programa completo en la siguiente dirección: http://mygnet.net/codigos/php/manejodebasedatos/consultar_ingresar_modificar_y_eliminar_registros_de_una_base_de_datos_de_mysql_con_php.3164
Tutorial: Como hacer un mapa interactivo en Flash
diciembre 4, 2009 a las 10:45 am | Publicado en Flash, Programacion | 78 comentariosEtiquetas: Flash, interactivo, mapa, tutorial
En esta ocasión haré un tutorial donde aprenderemos a hacer un mapa interactivo usando Flash.
En la universidad nos enviaron a hacer un mapa así en Flash, y la verdad nunca antes había hecho algo así. Después de buscar en Google algún tutorial en español, vi que no había suficiente información al respecto. Fue entonces que hice una búsqueda en inglés, puse en Google algo como «how to create an interactive map with flash» o «how to make an interactive map with flash». Así conseguí dos páginas muy interesantes. Una de esas me sirvió para hacer el mapa y lo explicaré aquí. El otro me puede servir algún otro momento. Aunque ambos tutoriales son en inglés, están muy fáciles de entender, y si no lo entiendes puedes usar el traductor de Google.
Las páginas son:
- http://www.republicofcode.com/tutorials/flash/interactive_map/ (las indicaciones de esta página serán usadas en este tutorial)
- http://flashexplained.com/design/making-an-interactive-country-map/
Bueno ahora si pongamos manos a la obra. La herramienta que vamos a necesitar será Flash. En mi caso uso Macromedia Flash 8 (ahora de la Adobe). Con la versión CS3 y CS4 debe ser igual.
En este tutorial haremos un mapa interactivo del Ecuador. Ecuador tiene 24 provincias, en este ejemplo usaremos solo 2. El proceso con cada provincia es similar. En la Universidad hicimos un mapa de las provincias de Ecuador, pero como son 24 sería muy extenso explicarlo aquí.
Creando el mapa
1. Primero debemos conseguirnos un mapa el cual usaremos para el trabajo. Yo usaré este mapa:
Mapa político del Ecuador (clic en la imagen para ampliar)
2. Dentro del programa Flash nos vamos a Archivo -> Importar -> Importar a biblioteca y seleccionamos la imagen del mapa a usar.
3. Cambiamos las dimensiones del escenario de acuerdo a las dimensiones del mapa. En este caso las dimensiones son 700 x 492 pixeles. Como se muestra en la siguiente figura:
Clic en la imagen para ampliar
4. Arrastramos la imagen desde la Biblioteca al escenario y mientras está seleccionada la imagen en el panel de propiedades en posición X y posición Y escribimos el cero.
Clic en la imagen para ampliar
5. Cambiamos el nombre de la capa a «Fondo» (sin comillas, para cambiar el nombre damos doble clic sobre Capa 1) y la bloqueamos:
6. Ahora agregamos otra capa en Insertar -> Línea de tiempo -> Capa y la nombramos Mapa.
7. Escogemos la herramienta Pincel del panel de herramientas o presionamos la tecla B. Escogemos el tamaño del pincel que aparece en segundo lugar y el tipo circular y escogemos un color como se muestra en la siguiente figura:
Clic en la imagen para ampliar
7. Una vez seleccionada la herramienta pincel procedemos a pintar las provincias de la cual mostraremos algún tipo de información. En este caso solo serán dos provincias. Entonces siguiendo el mapa de fondo dibujamos de nuevo las provincias con el pincel, es decir, vamos a dibujar los botones del mapa interactivo:
Clic en la imagen para ampliar
En la imagen como pueden ver dibujé con el pincel dos provincias y luego usando la herramienta Cubo de pintura con el color #FFCC00 pinté sobre las provincias que acabé de dibujar.
8. Ahora damos clic en cualquier lugar fuera del escenario para asegurarnos que nada esté seleccionado. Luego seleccionamos con la herramienta Selección cualquiera de las provincias que hemos dibujado. Y mientras está seleccionada presionamos F8 para convertir en símbolo (también ésta opción está en Modificar -> Convertir en símbolo). En las opciones que aparecen le ponemos un nombre cualquiera y en tipo escogemos la opción Botón.
Luego hacemos lo mismo con la otra provincia pero le ponemos otro nombre, en mi caso le pondré Guayas.
9. Ahora le pondremos un nombre a la instancia del botón. Para ello seleccionamos la provincia dándole un solo clic y en el panel de propiedades le ponemos un nombre, en este caso será pichincha_btn el primer botón y guayas_btn el segundo botón como se muestra en la siguiente imagen:
Clic en la imagen para ampliar
10. Damos doble clic en cualquiera de los botones (provincias) que tenemos para entrar en la opción del botón. Ahí tenemos cuatro opciones:
- Reposo: Es cuando el botón aparece en la pantalla.
- Sobre: Es cuando el puntero está sobre el botón.
- Presionado: Es cuando se da clic sobre el botón pero sin soltar el clic.
- Zona activa: Es el área del botón.
Lo que debemos hacer es dar clic sobre la opción Sobre y presionar 3 veces F6. De esta forma estamos creando fotogramas clave en la opción Reposo (que ya es fotograma clave por defecto), Sobre, Presionado y Zona Activa. Nos queda de esta manera:
11. Ahora damos clic sobre la opción Sobre y seleccionamos la provincia que creamos y en el panel de propiedades escogemos otro color:
Clic en la imagen para ampliar
Se debe hacer lo mismo con cada provincia. Lo que estamos haciendo es que la provincia cambie de color cuando el puntero pase por encima de la provincia. Se puede probar la aplicación presionado Ctrl + Enter.
Se puede hacer lo mismo en la opción Presionado (cambiar el color).
Una vez terminados estos pasos bloqueamos la capa.
12. Creamos otra capa y la nombramos Marker. Con esa capa seleccionada importamos al escenario la siguiente imagen:
Aceptamos tal cual aparecen las opciones. Ubicamos esta imagen fuera del escenario como se muestra en la siguiente figura:
Clic en la imagen para ampliar
13. Damos clic en cualquier parte fuera del escenario para asegurarnos que nada está seleccionado. Luego seleccionamos la imagen que acabamos de insertar y presionamos F8 para convertirlo en símbolo.
En el cuadro que aparece le ponemos el nombre myMarker y en tipo escogemos Clip de película como se muestra en la siguiente imagen.
14. Damos doble clic en la imagen del marker para entrar al clip de película. Ahí encontramos la imagen del marker y un símbolo de más en el centro de la figura:
Lo que debemos hacer es seleccionar la figura del marker y moverlo hasta que el símbolo del + aparezca en la punta inferior de la figura, como se muestra a continuación:
15. Estando dentro del marker renombramos la Capa1 y la llamamos Marker y añadimos otra capa adicional llamada Cities:
16. Seleccionamos el Fotograma 1 de la capa Cities y presionamos F9 para entrar al panel de Acciones, ahí escribimos el código:
stop();
Clic en la imagen para ampliar
17. Ahora seleccionamos el fotograma 1 de la capa Marker y presionamos F5 (estamos solo agregando un fotograma, no un fotograma clave) el número de veces que tengamos botones o en este caso provincias. Para este ejemplo, tengo dos provincias, por lo tanto presionaré F5 dos veces.
18. Damos clic en el fotograma 2 de la capa Cities y presionamos F6 para crear un fotograma clave. Y hacemos el mismo procedimiento en el fotograma 3 de la capa Cities y tenemos algo así:
Antes de avanzar para este ejemplo voy a usar las siguientes imágenes:
Thumbnail de la provincia de Pichincha
Thumbnail de la provincia del Guayas
19. Damos clic en el fotograma 2 de la capa Cities. Nos vamos a Archivo -> Importar -> Importar a escenario y escogemos la imagen pichincha.jpg que está arriba. En el mensaje que aparece escogemos «No reemplazar elementos ya existentes». Si la imagen no aparece con las dimensiones que es, la seleccionamos y en propiedades ponemos en ancho 150 y en alto 100. Ubicamos la imagen sobre la imagen marker. Luego con la herramienta Texto (letra T) escribimos la palabra Pichincha y la ponemos bajo la imagen.
Nos debe quedar algo como esto:
Cuando escribimos la palabra Pichincha seleccionamos el texto y en el panel de propiedades debemos asegurarnos que no esté habilitada la opción «Seleccionable»:
Clic en la imagen para ampliar
20. Ahora seleccionamos el mismo fotograma 2 de la capa Cities y en el panel de propiedades le ponemos el nombre «pichincha» (sin comillas).
Clic en la imagen para ampliar
21. Ahora repetimos los pasos 19 y 20 en el fotograma 3 de la capa Cities, pero usamos la imagen guayas.jpg el texto será Guayas y el nombre del fotograma 3 es guayas:
Clic en la imagen para ampliar
No olvidemos guardar el documento. Ahora bloqueamos ambas capas y volvemos al escenario principal dando clic en Escena 1.
Estando en el escenario seleccionamos la figura marker y en el panel de propiedades el ponemos el nombre marker_mc:
22. Creamos una nueva capa llamada Actions (no olvidemos que ya estamos en el escenario principal, es decir, fuera de la imagen marker). Damos clic en el fotograma 1 de la capa Actions y presionamos F9. Ahí vamos a ingresar el siguiente código que saqué de una de las páginas web que puse anteriormente:
stop();
import mx.transitions.Tween;
import mx.transitions.easing.*;var cities:Array = [«pichincha», «guayas»]
function mover (targetX, targetY){
currentX = marker_mc._x;
currentY = marker_mc._y;
var xTween:Tween = new Tween(marker_mc, «_x»,
Strong.easeOut, currentX, targetX, .5, true);
var yTween:Tween = new Tween(marker_mc, «_y»,
Back.easeOut, currentY, targetY, 1.5, true);
}for (var i = 0; i<cities.length; i++){
var my_btn = this[cities[i]+»_btn»];
my_btn.myCity = cities[i];
my_btn.onRollOver = function() {
mover( this._x, this._y);
marker_mc.gotoAndStop(this.myCity);
}my_btn.onRollOut = function() {
mover( 0, 0);
marker_mc.gotoAndStop(this.myCity);
}
}
Dentro de la variable var cities:Array = [«pichincha», «guayas»] debemos agregar los nombre de cada botón que hemos creado (cada provincia que dibujamos con el pincel es un botón). El nombre pichincha ES EL MISMO NOMBRE QUE TIENE EL FOTOGRAMA 1 DE LA CAPA CITIES DE MARKER QUE HICIMOS ANTERIORMENTE. Debe ser el mismo nombre. Además recordemos que pusimos al botón el nombre pichincha_btn, pichincha antes del btn debe ser igual al nombre del array también.
Con este código estamos dando el efecto para que el marker se aparezca sobre la provincia cuando el puntero esté encima, y cuando quitemos el puntero el marker regresa a la posición X=0 y Y=0.
Guardamos el documento y presi0namos Ctrl + Enter. Ahora cuando pongamos el puntero sobre una provincia nos debe aparecer la imagen:
Clic en la imagen para ampliar
Agregando contenido al mapa
Ahora vamos a la segunda parte de este tutorial. Vamos a hacer que al dar clic en la provincia aparezca un menú, y según donde demos clic nos muestre cierta información.
Vamos a bloquear las capas Fondo, Mapa, Marker y Actions dando clic en el candado en la capa correspondiente.
23. Estando en la Escena 1 vamos a crear una nueva capa llamada «stop» (sin comillas). Nos ubicamos en el fotograma 1 y presionamos F6 dos veces (porque tenemos solo dos botones o provincias).
24. Damos clic en el fotograma 1 de la capa stop y presionamos F9 y escribimos el código:
stop();
Y repetimos el mismo paso en los fotogramas 2 y 3 de la capa stop. Uva vez finalizado bloqueamos la capa stop. Recordemos que podemos agregar código ActionScript a una capa aunque esté bloqueada. No olvidemos desbloquear una capa si necesitamos modificar algo en ella.
25. Creamos una nueva capa llamada «Contenido» (sin comillas). Damos clic en el fotograma 1 de la capa Contenido y presionamos F6 dos veces (porque tenemos dos provincias).
26. Seleccionamos el fotograma 1 de la capa Contenido y le ponemos el nombre de instancia «Inicio» (sin comillas), repetimos el procedimiento con el fotograma 2 pero le llamamos «cont_pichincha» y al fotograma 3 le llamamos «cont_guayas» (ambos sin comillas).
Tenemos algo así:
Clic en la imagen para ampliar
27. Damos clic en el fotograma 2 de la capa Contenido (es decir, en el fotograma llamado cont_pichincha). Escogemos la herramienta Rectángulo escogemos un color de fondo blanco y sin línea de borde. y dibujamos un rectángulo que cubra todo el escenario (no importa que se salga de los límites).
28. Una vez dibujado tenemos un escenario blanco, ahora seleccionamos el rectángulo que acabamos de dibujar y vamos al panel de Mezclador de colores (si no aparece vamos al menú Ventana -> Mezclador de colores) damos clic en el botón color de relleno y en la opción Alfa escogemos 92%:
Clic en la imagen para ampliar
29. Dentro del rectángulo escribimos el texto Pichincha o cualquier otra cosa que queramos mostrar. Recordemos que estamos en el fotograma 2 de la capa Contenido.
Luego repetimos el procedimiento para el fotograma 3 de la capa Contenido, es decir, cont_guayas.
A partir de aquí explicaré los ejemplos solo para la provincia de Pichincha. Se debe hacer lo mismo para cada provincia o botón que tenga nuestro mapa interactivo.
Una vez tengamos el texto que queramos mostrar en cada capa de cada provincia bloqueamos la capa. En mi caso me quedó así:
Clic en la imagen para ampliar.
30. Ahora creamos otra capa que se llamará «Volver» (sin comillas). Y damos clic en el fotograma 2 de la capa Volver y presionamos F6 una sola vez. En esta capa lo que vamos a hacer es que aparezca la palabra Volver, para regresar a la pantalla principal. Obviamente este texto debe aparecer únicamente desde el fotograma 2, ya que el 1 es a donde queremos volver. Así que si tenemos en la capa contenido 24 fotogramas de las 24 provincias del Ecuador, basta con poner el fotograma clave en el fotograma 2 de la capa Volver y no en cada fotograma. Para entender mejor haz la prueba con este ejercicio. Tenemos el fotograma cont_pichincha y cont_guayas, con solo poner el fotograma clave en el fotograma 2 de la capa volver aparecerá el texto en todos los fotogramas de la capa Contenido desde el fotograma 2 en adelante.
31. Damos clic en el fotograma 2 de la capa Volver y escogemos la herramienta de texto y escribimos la palabra Volver en cualquier parte del rectángulo que dibujamos anteriormente.
32. Seleccionamos el texto que acabamos de escribir y presionamos F8 para convertirlo en símbolo. Le ponemos el nombre volver_btn y en tipo escogemos Botón:
33. Damos doble clic al texto volver para entrar en las opciones de botón. Damos clic en la opción Sobre y presionamos F6 tres veces.
34. Damos clic en Sobre, seleccionamos el texto y lo cambiamos de color.
35. Damos clic en Zona activa y escogemos la herramienta Rectángulo, escogemos cualquier color de fondo y dibujamos un rectángulo que cubra la palabra Volver (así el usuario podrá dar clic sobre el rectángulo que dibujamos y no necesariamente sobre la palabra Volver, además tomemos en cuenta que el rectángulo será invisible, por eso no importa el color que escojamos).
Clic en la imagen para ampliar
Volvemos a Escena 1 y bloqueamos la capa Volver.
36. Creamos otra capa llamada Menu_botones. Vamos al fotograma 1 de la capa Menu_botones y presionamos F6 una vez.
37. Damos clic en el fotograma 2 de la capa Menu_botones y escogemos la herramienta Rectángulo y dibujamos un rectángulo de 160 x 35 pixeles con cualquier color y lo ubicamos a la izquierda del escenario. Mientras esté seleccionado el rectángulo nos vamos al panel Mezclador de colores y en tipo escogemos Lineal. El color de la izquierda le ponemos #FFCC00 y el de la derecha le ponemos #000000 (blanco).
Clic en la imagen para ampliar
38. Seleccionamos el rectángulo y presionamos F8. Le ponemos el nombre menu_btn y el tipo Botón.
39. Damos doble clic el rectángulo para ingresar a las propiedades del botón. Damos clic en Sobre y presionamos F6 tres veces.
40. Damos clic de nuevo en Sobre seleccionamos el rectángulo y vamos al menú Modificar -> Transformar -> Voltear Horizontalmente. Luego regresamos a Escena 1.
41. En la Biblioteca (Ventana -> Biblioteca) nos aparece el símbolo que acabamos de crear, lo seleccionamos y lo arrastramos al escenario. Así tenemos dos botones. Escogemos la herramienta de Texto y escribimos sobre cada rectángulo cualquier texto. En mi caso voy a poner «Menú 1» y «Menú 2». Este texto también tiene que tener deshabilitada la opción Seleccionable. Tenemos algo así:
Clic en la imagen para ampliar
41. Ahora que ya tenemos el menú damos clic en el fotograma 3 de la capa Menu_botones y presionamos F6 para que el menú se copie en esa capa.
Antes de asignar los eventos a los botones vamos a agregar un poco de código ActionScript.
42. Vamos a la capa Contenido y hacemos clic en el fotograma 2 (en nuestro caso el fotograma que se llama cont_pichincha) y presionamos la tecla F9 y agregamos el siguiente código:
marker_mc._visible=false
pichincha_btn.enabled=false
guayas_btn.enabled=false
De esta forma estamos haciendo invisible al marker y estamos inhabilitando las provincias (botones).
43. Repetimos el paso anterior en el fotograma 3 de la capa Contenido (cont_guayas).
44. Damos clic en el fotograma 2 de la capa Volver y seleccionamos el texto Volver que escribimos antes (primero debemos asegurarnos que la capa esté desbloqueada). Una vez SELECCIONADA la palabra Volver vamos al menú Ventana -> Comportamientos. Damos clic en el símbolo del + luego a Clip de película -> Ir y detener en fotograma o etiqueta:
Clic en la imagen para ampliar
En el cuadro de diálogo donde dice «Especifique el número o la etiqueta del fotograma en el que desea detener la reproducción de la película» escribimos Inicio (es el nombre del fotograma 1 de la capa Contenido) . Y damos clic en Aceptar.
45. Estando seleccionado el texto Volver presionamos F9 y vemos que Flash ha escrito automáticamente el siguiente código ActionScript:
on (release) {
//Movieclip GotoAndStop Behavior
this.gotoAndStop(«Inicio»);
//End Behavior}
Después de donde dice //End Behavior agregamos el siguiente código:
//activar mapa
marker_mc._visible=true
pichincha_btn.enabled=true
guayas_btn.enabled=true
Con esto hacemos visible el marker y habilitamos los botones del mapa.
46. Ahora vamos a dar comportamientos a las provincias. Para eso desbloqueamos la capa Mapa y seleccionamos la provincia Pichincha (es la que está en la parte superior, al medio) y nos vamos al menú Ventana -> Comportamientos y seguimos los mismos pasos que antes: damos clic en el símbolo del + luego a Clip de película -> Ir y detener en fotograma o etiqueta y en «Especifique el número o la etiqueta del fotograma en el que desea detener la reproducción de la película» escribimos cont_pichincha y damos clic en Aceptar.
47. Repetimos el paso anterior para la provincia del Guayas, ahí el nombre del fotograma a especificar es cont_guayas.
Guardamos el proyecto y presionamos Ctrl + Enter para probar nuestra película. Ahora al dar clic sobre una provincia se aparece el contenido de cada una de ellas.
Ahora vamos a crear las pantallas que se mostrarán al hacer clic sobre Menú 1 y Menú 2-
48. Creamos una capa capa y la nombramos «Menu 1» (sin comillas). Hacemos clic en el fotograma 2 de la capa Menu 1 y presionamos F6 y nombramos a este fotograma como «menu1_pichincha» (sin comillas).
Clic en la imagen para ampliar
49. Estando en ese fotograma escogemos la herramienta texto y escribimos cualquier cosa en el espacio que tenemos. En mi caso me quedó así:
Clic en la imagen para ampliar
En las propiedades el texto debemos asegurarnos que en tipo de línea esté multilínea:
Clic en la imagen para ampliar
50. Escogemos el texto que escribimos con la herramienta de selección y le ponemos el nombre de instancia «txt_pichinchainfo»:
Clic en la imagen para ampliar
51. Escogemos el fotograma 2 de la capa Menu 1 (el que se llama menu1_pichincha) y presionamos F9 allí escribimos el siguiente código:
txt_pichinchainfo._visible=false
Con esto estamos haciendo invisible el cuadro de texto que creamos antes.
52. Damos clic en el fotograma 3 de la capa Menu 1 y presionamos F6 para copiar el contenido del anterior fotograma. Llamamos a este fotograma «menu1_guayas» (sin comillas). Escogemos el texto que aparece y le cambiamos. Seleccionamos el texto y le ponemos como nombre de instancia «txt_guayasinfo» (sin comillas). Seleccionamos el fotograma 3 de la capa Menú 1 y presionamos F9 y agregamos el código:
txt_guayasinfo._visible=false
Hasta ahora tenemos el contenido del Menú 1. Vamos a hacer el contenido del Menú 2.
53. Creamos otra capa y le llamamos «Menu 2» (sin comillas). Luego bloqueamos y hacemos invisible la capa Menu 1, para eso hacemos clic en la imagen del candado y del ojo a lado de la capa:
54. Damos clic en el fotograma 2 de la capa Menu 2 y presionamos F6 y nombramos al fotograma como «menu2_pichincha» (sin comillas).
55. Escogemos la herramienta de texto y escribimos cualquier texto. Seleccionamos el texto con la herramienta de Selección (V) y le ponemos el nombre de instancia «txt_pichinchainfo2» (sin comillas).
Clic en la imagen para ampliar
56. Damos clic en el fotograma 2 de la capa Menu 2 y presionamos F9 y agregamos el siguiente código:
txt_pichinchainfo2._visible=false
57. Damos clic en el fotograma 3 de la capa Menu 2 y presionamos F6. Llamamos a este fotograma «menu2_guayas» (sin comillas). Cambiamos el contenido del texto, lo seleccionamos y lo llamamos «txt_guayasinfo2» (sin comillas). Damos clic en el fotograma 3 de la capa Menu 2 y presionamos F9, ahi escribimos el siguiente código:
txt_guayasinfo2._visible=false
Ya para finalizar vamos a llamarles a estos contenidos con los botones que creamos anteriormente. Ahora bloqueamos y hacemos invisible la capa Menu 2.
58. Vamos a la capa Menu_botones (nos aseguramos de que esté desbloqueada) y damos clic en el fotograma 2 y seleccionamos el primer botón (el que tiene el texto Menú 1, pero nos aseguramos que esté seleccionado el botón, no el texto pues son dos elementos distintos). Luego vamos a Ventana -> Comportamientos. Damos clic en el símbolo del + luego a Clip de película -> Ir y detener en fotograma o etiqueta y en «Especifique el número o la etiqueta del fotograma en el que desea detener la reproducción de la película» escribimos «menu1_pichincha» (sin comillas) y damos clic en Aceptar.
Clic en la imagen para ampliar
59. Ahora seleccionamos nuevamente el botón del menú 1 y presionamos F9. Ahí aparece el siguiente código:
on (release) {
//Movieclip GotoAndStop Behavior
this.gotoAndStop(«menu1_pichincha»);
//End Behavior}
Después de //End Behavior agregamos el siguiente código:
txt_pichinchainfo._visible=true
txt_pichinchainfo2._visible=false
Con esto hacemos visible el contenido de txt_pichinchainfo y hacemos invisible el contenido de txt_pichinchainfo2.
60. Ahora seleccionamos el botón que dice Menú 2 y seguimos los pasos anteriores: vamos a Ventana -> Comportamientos. Damos clic en el símbolo del + luego a Clip de película -> Ir y detener en fotograma o etiqueta y en «Especifique el número o la etiqueta del fotograma en el que desea detener la reproducción de la película» escribimos «menu2_pichincha» (sin comillas) y damos clic en Aceptar.
61. Seleccionamos el botón del Menú 2 y presionamos F9 y existe el siguiente código:
on (release) {
//Movieclip GotoAndStop Behavior
this.gotoAndStop(«menu2_pichincha»);
//End Behavior}
Después de //End Behavior escribimos el siguiente código:
txt_pichinchainfo._visible=false
txt_pichinchainfo2._visible=true
Presionamos Ctrl + Enter para probar la película. Por el momento debe funcionar la provincia de Pichincha con su respectivo menú.
Ahora le vamos a dar funciones al menú de la provincia del Guayas.
62. Damos clic en el fotograma 3 de la capa Menu_botones. Damos clic fuera del escenario para asegurarnos que nada esté seleccionado. Luego seleccionamos el botón que dice Menú 1 y seguimos los pasos anteriores: vamos a Ventana -> Comportamientos. Damos clic en el símbolo del + luego a Clip de película -> Ir y detener en fotograma o etiqueta y en «Especifique el número o la etiqueta del fotograma en el que desea detener la reproducción de la película» escribimos «menu1_guayas» (sin comillas) y damos clic en Aceptar.
63. Seleccionamos el botón de Menú 1 y presionamos F9 y aparece el código:
on (release) {
//Movieclip GotoAndStop Behavior
this.gotoAndStop(«menu1_guayas»);
//End Behavior}
Después de //End Behavior agregamos el código:
txt_guayasinfo._visible=true
txt_guayasinfo2._visible=false
64. Repetimos los pasos 62 y 63 pero el nombre del comportamiento será: menu2_guayas. Al presionar F9 al código existente le agregamos:
txt_guayasinfo._visible=false
txt_guayasinfo2._visible=true
Guardamos el proyecto y presionamos Ctrl + Enter para probar la película.
Y eso es todo para este tutorial. Como pueden ver hacer un mapa interactivo es de mucho trabajo, aquí expliqué solo con 2 provincias, en la universidad tocó hacer con las 24 provincias y cada una tenía un menú con tres opciones.
Espero que les guste este tutorial. No olviden dejar sus comentarios, preguntas o sugerencias.
Pueden descargar el programa completo en el siguiente enlace: http://mygnet.net/it/descargas/codigos/mapa_interactivo_hecho_en_flash.3125.zip
Autenticación de usuarios con PHP y MySQL sin programar nada – Manejo de sesiones
septiembre 2, 2009 a las 6:18 pm | Publicado en PHP, Programacion | 77 comentariosEtiquetas: autenticacion, dreamweaver, manejo, mysql, php, sesiones, usuarios, validar
Pues es verdad, te voy a explicar cómo restringir el acceso a una página web mediante un usuario y contraseña o manejo de sesiones que estén en una base de datos de MySQL sin que programes una sola línea de código. Esto no significa que no necesites saber programación PHP, lo necesitas pero aquí te daré algunos pasos para que hagas todo más rápido y si conoces PHP pues lo mejores a tu gusto.
Las herramientas que vamos a utilizar son:
- Wamp Server
- Dreamweaver 8.0 o superior
- Mozilla Firefox o Internet Explorer o cualquier otro navegador
Una vez que tengamos instalado nuestro servidor web, en este caso Wamp Server vamos a proceder a explicar este tutorial.
Primero crearemos una base de datos, en este caso se llama «manejo_usuarios» ésta contiene una tabla llamada «usuarios» con dos campos: «user» y «password». Podemos agregar dos registros para hacer la prueba. Puedes crear la base usando phpMyAdmin que trae el propio WAMP. Entonces tenemos algo así:
Clic en la imagen para ampliar
Una vez creada la base de datos vamos a crear las páginas web, vamos a necesitar para esta prueba 3 páginas PHP. Recuerda guardarlas en la ruta C:\wamp\www para poder visualizarlas. Bueno de hecho al abrir Dreamweaver (en este caso usaré la versión CS) antes de crear cualquier archivo debemos ir al menú «Sitio» -> «Nuevo sitio». Yo dentro de la ruta C:\wamp\www creé una carpeta llamada «UsuariosenPHP» y dentro una carpeta llamada «images». Respecto a esto último hay que destacar que todas las imágenes que insertes en el sitio desde cualquier ruta se copiará automáticamente a la carpeta «images». Entonces llenamos con los datos necesarios:
- Nombre del sitio: Le puedes poner cualquier nombre
- Carpeta raíz local: Aquí escogemos la carpeta donde está el sitio, en mi caso C:\wamp\www\UsuariosenPHP
- Carpeta predeterminada de imágenes: La ruta de la carpeta que creamos antes C:\wamp\www\UsuariosenPHP\images
Entonces nos queda algo así:
Clic en la imagen para ampliar
Ahora dentro de la misma ventana nos vamos a «Servidor de pruebas», en Modelo de servidor seleccionamos «PHP MySQL» y en Acceso escogemos «Local/Red». En Carpeta de servidor escogemos la ruta del WAMP, en este caso C:\wamp y en prefijo del URL escogemos la ruta con la que cargaremos nuestro sitio web, para este caso sería: http://localhost/UsuariosenPHP/.
Nota: Si usas otro servidor web como XAMPP tienes que cambiar esas rutas.
Entonces nos queda algo así:
Clic en la imagen para ampliar
Damos clic en Aceptar. No olvides realizar este paso o tendrás problemas más adelante.
Ahora crearemos las páginas web. Como mencioné antes serán 3 páginas web sencillas las que necesitamos para esta prueba:
- index.php –> Esta página será la principal, tendrá un título y un enlace a la página ingreso.php
- ingreso.php –> Tendrá un formulario donde se ingresará el usuario y la contraseña para autenticarse.
- entrar.php –> Es la página donde ingresaremos si la autenticación fue exitosa.
Ahora veamos qué tiene cada página:
-
index.php
Tendrá únicamente un título y un enlace a la página ingreso.php como se muestra en la siguiente figura:
Clic en la imagen para ampliar
-
ingreso.php
Esta página contendrá un formulario que pida el nombre de usuario y la contraseña. El campo de texto del usuario se llamará «usuario» (sin comillas) y el campo de texto del password se llamará «contrasena» (sin comillas). Entonces tenemos algo así:
Clic en la imagen para ampliar
-
entrar.php
Esta página tiene un título, tiene una tabla que dirá el nombre del usuario que accedió y tendrá un link que diga Desconectar que permitirá cerrar la sesión (ya explicaré cómo hacer eso):
Clic en la imagen para ampliar
Antes de validar los usuarios (que es lo que nos interesa) debemos hacer algo en esta página entrar.php. Debemos restringir el acceso a ella, pues la idea es que sea visible solo por quien inicia sesión. Bien para ello nos vamos al menú Insertar -> Objetos de aplicación -> Autenticación de usuarios -> Restringir acceso a página:
Clic en la imagen para ampliar
En el cuadro de opciones establecemos los siguientes parámetros:
Clic en la imagen para ampliar
Ahora cada vez que alguien quiera acceder a esa página sin haber iniciado sesión, será redireccionado automáticamente a la página ingreso.php.
-
Validar usuarios
Bien ahora si vamos a validar el ingreso de los usuarios. En mi base de datos tengo dos usuarios registrados que son:
- Usuario #1: usuario = usuario1, contraseña = prueba1
- Usuario #2: usuario = usuario2, contraseña = prueba2
La validación lo haremos en la página ingreso.php nos vamos al menú Ventana -> Bases de datos y se nos carga una ventana en el panel derecho, si seguiste los pasos anteriores al crear Nuevo sitio y al configurar el servidor de prueba, entonces no tendrás problemas en este paso.
En la ventana de Bases de datos damos clic en el símbolo + y luego en «Conexión MySQL». Se nos aparece una ventana y llenamos con los siguientes datos:
- Nombre de conexión: cualquier nombre, en mi caso se llama conexion_usuarios.
- Servidor MySQL: si la base de datos está en la misma máquina escribimos «localhost» (sin comillas).
- Nombre de usuario: por lo general el nombre por defecto es «root» (sin comillas).
- Contraseña: por lo general se deja el espacio en blanco.
- Base de datos: damos clic en «Seleccionar» y escogemos la base de datos que creamos, en mi caso «manejo_usuarios».
Nos quedaría así:
Clic en la imagen para ampliar
Ahora en la ventana «Bases de datos» aparece la base seleccionada con el nombre que le pusimos. Ahora nos vamos al menú Ventana -> Vinculaciones. En la ventana que aparece en el menú lateral damos clic en el signo + y escogemos «Juego de registros (consulta)» y escribimos los siguientes datos:
- Nombre: cualquier nombre que queramos darle a la consulta o recordset, en mi caso se llama «consulta_usuarios» (sin comillas).
- Conexión: seleccionamos la conexión que creamos anteriormente.
- Table: escogemos la tabla que contiene los datos, en mi caso «usuarios».
- Columnas: escogemos la opción todo, ya que queremos los datos tanto del usuario como del password.
Nos queda algo así:
Clic en la imagen para ampliar
Si damos clic en Prueba podemos ver todos los registros que tiene esta consulta. Damos clic en aceptar. Automáticamente Dreamweaver crea el código PHP, sin que hayamos programado absolutamente nada. Yo uso la versión CS o versión 8, aquí el código PHP se crea en el mismo archivo, pero en versiones superiores como la CS4 crea el código en un archivo separado.
Bien, una vez hecha la conexión a la base de datos vamos a validar el usuario. Nos vamos al menú Insertar -> Objetos de aplicación -> Autenticación de usuarios -> Conectar usuario. Se nos aparece un cuadro y establecemos los siguientes parámetros:
- Obtener entrada de formulario: aquí va el nombre del formulario, por defecto se llama form1, pero si le cambiaron de nombre va el nombre que le pusieron.
- Campo nombre de usuario: se escoge el nombre del campo de texto que contiene al usuario, en mi caso se llama «usuario» (sin comillas).
- Campo contraseña: se escoge el nombre del campo de texto que contiene la contraseña, en mi caso se llama «contrasena» (sin comillas).
- Validar utilizando conexión: escogemos el nombre de la conexión a la base de datos que creamos antes, en mi caso «conexion_usuarios» (sin comillas).
- Tabla: escogemos el nombre de la tabla que contiene los usuarios, en mi caso «usuarios» (sin comillas).
- Columna nombre de usuario: escogemos la columna que contiene los usuarios, en mi caso «user» (sin comillas).
- Columna contraseña: escogemos la columna que contiene las contraseñas, en mi caso «password» (sin comillas).
- Si la conexión es correcta, ir a: aquí escogemos la página web a donde se redireccionará al usuario si los datos ingresados son correctos, en este caso entrar.php.
- Si falla la conexión, ir a: aquí escogemos la página web a donde se redireccionará al usuario si los datos ingresados son erróneos, en mi caso ingreso.php.
Nos queda así:
Clic en la imagen para ampliar
Listo!!! Ahora para ingresar a la página entrar.php debemos validarnos en la página ingreso.php, no hemos escrito nada de código PHP, todo lo hizo Dreamweaver.
Ahora vamos a terminar el programa dándole los últimos toques a la página entrar.php.
Al crear la conexión a la base de datos se crea automáticamente en todas las páginas del sitio, pero las vinculaciones se deben crear una para cada página según se necesite. Entonces en la página entrar.php agregamos una nueva vinculación con el signo + y escogemos «Juego de registros (consulta)» y lo llenamos con los siguientes datos:
Clic en la imagen para ampliar
Ya sé lo que te estás preguntando ¿qué es eso de Filtro: user = Variable de sesión MM_Username? Bien ¿recuerdas que te dije que no necesitas programar nada, pero que si debes conocer algo de PHP? Bien, si te fijas en el código PHP que Dreamweaver creó en la página ingreso.php te fijarás que existe lo siguiente:
//declare two session variables and assign them
$_SESSION[‘MM_Username’] = $loginUsername;
$_SESSION[‘MM_UserGroup‘] = $loginStrGroup;
Pues ahí tienes la variable MM_Username, ésta variable contiene el nombre de sesión con el que navegarás por la página web, y el nombre de sesión es igual al usuario que tienes en la base de datos. Entonces en esta consulta lo que estamos haciendo es obtener el nombre de usuario donde user (la variable que tenemos en la base de datos) sea igual a la variable MM_Username de inicio de sesión. Pues queremos imprimir ese dato en una parte de la página web, toma en cuenta que por esa razón en Columnas escogí Seleccionado y escogí la columna user únicamente, pues no me interesa imprimir la columna password, sería una gran error.
Bien una vez hecha esta consulta, ponemos el cursor donde queremos imprimir el nombre del usuario y nos vamos al menú Insertar -> Objetos de aplicación -> Datos dinámicos -> Texto dinámico. Nos aparece un cuadro y escogemos la consulta que acabamos de hacer:
Clic en la imagen para ampliar
Te aparecerá un cuadro que contiene la consulta PHP.
Finalmente vamos a crear el enlace para cerrar sesión. Solo ponemos el cursor donde queremos que esté el enlace, y nos vamos al menú Insertar -> Objetos de aplicación -> Autenticación de usuarios -> Desconectar usuario. Nos aparece una ventana y llenamos con los siguientes parámetros:
Clic en la imagen para ampliar
Si en vez de la palabra Desconectar quieres, por ejemplo, las palabras Cerrar sesión, entonces la escribes, la seleccionas y sigues el procedimiento anterior.
Así se ve cuando ingresas al área restringida después de validarte, en este caso como usuario2:
Clic en la imagen para ampliar
Listo!!! Acabas de crear una página web que valida el ingreso de usuarios que están en una base de datos de MySQL sin programar nada.
Trata de probar los demás componentes que trae el menú Insertar -> Objetos de aplicación. Te ahorrarás mucho tiempo haciendo páginas web gracias a Dreamweaver.
Por cierto subí todos los códigos generados a esta página: http://mygnet.net/codigos/php/manejodebasedatos/validar_ingreso_de_usuarios_con_php_y_mysql.3046 ahí los pueden descargar.
Donar
Si te pareció útil la información que encontraste en mi blog te invito a dejar una pequeña donación.
El Simbolo Perdido
Publicidad
Síguenos en Twitter
Síguenos en Twitter en la siguiente dirección:
Ver series
Mira las mejores series en www.series21.com
Comparte este blog
Crea un blog o un sitio web gratuitos con WordPress.com.
Entries y comentarios feeds.
Cyberexplorador's Blog 