Puede buscarla en Chrome Web Store como "Button generator" o simplemente ingresando a: http://www.bestcssbuttongenerator.com/
Hasta pronto.
domingo, 28 de julio de 2013
Botones CSS
Si lo que buscas es hacer botones CSS de manera rápida y sin meterse tanto en la gramática css, puedes entonces usar: Button Generator.
Su interfaz es sencilla pero funcional y rápida.
Puede buscarla en Chrome Web Store como "Button generator" o simplemente ingresando a: http://www.bestcssbuttongenerator.com/
Hasta pronto.
Puede buscarla en Chrome Web Store como "Button generator" o simplemente ingresando a: http://www.bestcssbuttongenerator.com/
Hasta pronto.
lunes, 15 de julio de 2013
domingo, 14 de julio de 2013
Rain [Photography]
En estos días de lluvia que mejor que estas fotos inspiradoras.
Hard Rain
80 Rain Photography taken by Talented Photographers
Hard Rain
Raining
Stormy Days
Paper Boats
A Rain Lover
Fuente:
50 Examples of Remarkable Photography in the Rain80 Rain Photography taken by Talented Photographers
Selects con AJAX, JQuery y PHP [Tutorial]
Si en algún momento necesitaste insertar una gran cantidad de valores por medio un select y que estos vayan desapareciendo según se usen... entonces sigue leyendo.
Se tiene una base de datos llamada "combos" y dentro dos tablas: "datos" y "colores".
Tabla colores
Primero creamos el archivo de configuración, conectando nuestra base de datos al proyecto:
Posteriormente creamos el archivo index.php y se hace el include de la base de datos:
Después hacemos la consulta para cargar nuestro primer select:
Explico: Primero hacemos la consulta trayendo el id y el nombre de la tabla datos, posteriormente construimos el select y dentro del while en $row[0] hacemos mención al id, pero el usuario verá $row[1] que hace referencia al nombre de usuario.
Label será para desplegar mensajes de errores (se verá mas adelante).
Una vez realizado lo anterior, construimos el siguiente combo:
Explico: Primero hacemos la consulta trayendo el idColor y colores de la tabla colores, posteriormente construimos el select y dentro del while en $row[0] hacemos mención al idColor, pero el usuario verá $row[1] que hace referencia al color de dicho id.
Label será para desplegar mensajes de errores (se verá mas adelante).
Ahora, es importante añadir el botón que nos permitirá guardar la información.
Explico: En button se agregará con onclick la función addRecord() definida en un archivo JS, para poder procesar la información.
Por otro lado el div loading cargará un gif para mostrar al usuario que se esta procesando la información.
Y div success cargará una información de que si ha sido almacenda adecuadamente la info.
Hasta el momento se tiene un select simple y sin funcionalidad alguna, he ahí cuando entra AJAX, para ello en <head> se incluye la librería jquery y un archivo llamado add.js:
Ahora crearemos nuestro archivo add.js
Primero creamos nuestra función, la cual se llama addRecord()
Ahi definimos variables y las relacionamos a nuestros selects, y con option:selected tomamos el valor seleccionado.
Luego es importante hacer la validación de nuestros selects y añadir mensajes de error en nuestros <label> en caso de vacios:
En caso de que no haya campos vacios, se quitará cualquier mensaje de error y se carga nuestro gif:
Definimos a donde enviar la información (más adelante crearemos guardar.php), definimos el tipo de envio (POST) y en data, las variables a enviar según nuestro select.
Por último si todo sale bien realizamos el siguiente proceso:
Por último creamos el archivo guardar.php e incluimos nuevamente la conexion.php
En este tutorial no se manejaran selects dependientes (eso es harina de otro costal), por ahora veremos como hacer el concepto mencionado anteriormente.
Para ello es necesario enfocarnos en el siguiente contexto:
Se tiene una base de datos llamada "combos" y dentro dos tablas: "datos" y "colores".
Tabla datos.
- id (Con información)
- usuario (Con información)
- idColor (Sin información)
- 1-Maria-null
- 2-Jose-null
- 3-Luis-null
Tabla colores
- idColor (Con información)
- colores (Con información)
Info colores:
- 1-rojo
- 2-amarillo
- 3-rosa
- 4-azul
- 5-verde
Teniendo el contexto anterior, y con una base de datos definida, empezamos a crear el proyecto.
Primero creamos el archivo de configuración, conectando nuestra base de datos al proyecto:
Posteriormente creamos el archivo index.php y se hace el include de la base de datos:
Después hacemos la consulta para cargar nuestro primer select:
Label será para desplegar mensajes de errores (se verá mas adelante).
Una vez realizado lo anterior, construimos el siguiente combo:
Explico: Primero hacemos la consulta trayendo el idColor y colores de la tabla colores, posteriormente construimos el select y dentro del while en $row[0] hacemos mención al idColor, pero el usuario verá $row[1] que hace referencia al color de dicho id.
Label será para desplegar mensajes de errores (se verá mas adelante).
Ahora, es importante añadir el botón que nos permitirá guardar la información.
Por otro lado el div loading cargará un gif para mostrar al usuario que se esta procesando la información.
Y div success cargará una información de que si ha sido almacenda adecuadamente la info.
Hasta el momento se tiene un select simple y sin funcionalidad alguna, he ahí cuando entra AJAX, para ello en <head> se incluye la librería jquery y un archivo llamado add.js:
Ahora crearemos nuestro archivo add.js
Primero creamos nuestra función, la cual se llama addRecord()
Luego es importante hacer la validación de nuestros selects y añadir mensajes de error en nuestros <label> en caso de vacios:
En caso de que no haya campos vacios, se quitará cualquier mensaje de error y se carga nuestro gif:
Ahora si, mandamos los valores seleccionados en el select con AJAX :D
Por último si todo sale bien realizamos el siguiente proceso:
Quitamos el gif,o bien pones el texto que desees; los valores seleccionados los removemos del select (considera que solo es un color por usuario), y desplegamos el contenido de satisfactoria en #success (este vendrá de guardar.php)
Por último creamos el archivo guardar.php e incluimos nuevamente la conexion.php
Agarro las variables del name de nuestros selects:
Con dichas variables realizamos el update de la tabla datos:
Si todo sale bien, el mensaje que imprimimos Correct se desplegará en el div #success.
Ahora la prueba...
Y comprobamos que Luis y rojo ya no están en el select
Y bueno, con esto termina el tutorial con una solución simple y rápida para gestionar datos de un select y almacenarlos en base de datos según necesitemos. Claro, no es la única opción pero esta es una de ellas.
Suscribirse a:
Comentarios (Atom)