Algunas veces tenemos la necesidad de que el middleware VerifyCsrfToken ignore rutas específicas, ya sea por una petición en la cual no enviemos el token o ya sea por utilizar algún framework externo a Laravel, para eso solo basta con ir al middleware VerifyCsrfToken y agregar en el arreglo $except las rutas deseadas:
namespace AppHttpMiddleware;
use IlluminateFoundationHttpMiddlewareVerifyCsrfToken as BaseVerifier;
class VerifyCsrfToken extends BaseVerifier
{
/**
* The URIs that should be excluded from CSRF verification.
*
* @var array
*/
protected $except = [
//
'ruta/pato',
'ruta2/pato2'
];
}
$(document).ready(function(){
//selector de imagenes a aplicar la funcionalidad de click
$("#thumbs img").click(function(){
//obtenemos la imagen a mostrar
urlImagenGrande=$(this).data("img");
//asignamos la imagen por medio de prop
$("#imagenGrande").prop("src",urlImagenGrande);
})
});
Utilizando la propiedad prop procedemos a cambiar el atributo src de img al momento que se da clic en la miniatura. De esta manera queda la funcionalidad dinámica gracias al selector de jquery ($(“#thumbs img”)).
Para hacer que un menú nos indique cual es la opción activa, o la sección en que nos encontramos en una página web podemos hacer uso de los selectores de jquery y la función addClass y removeClass.
A continuación anexo el código que permite hacer esto.
$(document).ready(function(){
//selector a la clase opcion para darle función al evento click
$(".opcion").click(function(){
//eliminamos la clase activa por si una opción la contiene
$(".opcion").removeClass("opcionActiva");
//asignamos la clase opcionActiva a la opción presionada
$(this).addClass("opcionActiva")
})
})
Simplemente hago uso de addClass y removeClass de jquery para añadir o remover la clase de CSS opcionActiva.
La función addClass sirve para agregar una clase de css a un elemento y la función removeClass sirve para lo contrario.
Para realizar un movimiento del scroll en el navegador de forma animada, vamos a hacer uso de la función anímate de jquery(puedes visitar mi entrada donde hablo a fondo de esta función) y también haremos uso de la función offset para obtener el valor de nuestro elemento destino.
El siguiente código hace posible la animación del scroll de una manera rápida y fácil:
Html
<!-- menu para dar clic -->
<div style="height:50%; width:120px; position:fixed; top:100px; font-size:20px; background:#000; color:#fff; opacity:.5; padding:10px;">
<a href="#opcion1" class="scroll">Ir a opcion 1</a><br />
<a href="#opcion2" class="scroll">Ir a opcion 2</a><br />
<a href="#opcion3" class="scroll">Ir a opcion 3</a><br />
<a href="#opcion4" class="scroll">Ir a opcion 4</a><br />
<a href="#opcion5" class="scroll">Ir a opcion 5</a><br />
<a href="#opcion6" class="scroll">Ir a opcion 6</a><br />
</div>
<!-- los elementos destino -->
<div style="height:500px; background:#fff;">
<p id="opcion1">Un pato</p>
</div>
<div style="height:500px; background:#eee;">
<p id="opcion2">Dos pato</p>
</div>
<div style="height:500px; background:#ddd;">
<p id="opcion3">Tres pato</p>
</div>
<div style="height:500px; background:#ccc;">
<p id="opcion4">Cuatro pato</p>
</div>
<div style="height:500px; background:#bbb;">
<p id="opcion5">Cinco pato</p>
</div>
<div style="height:500px; background:#aaa;">
<p id="opcion6">Seis pato</p>
</div>
Javascript
$(document).ready(function(){
$(".scroll").click(function(event){
//bloqueamos la función del anchor original
event.preventDefault();
//dirigimos de manera animada al id del anchor
$('html,body').animate({
//le indicamos al scroll vertical que se dirija al objeto con el id
//guardado en el anchor a su posición top.
scrollTop:$(this.hash).offset().top
},1000);
});
});
Para obtener los datos de conexión a una base de datos que tenemos guardados en nuestro archivo app.config o web.config (dependiendo el tipo de proyecto), haremos uso de la clase ConnectionStringSettingsCollection y ConfigurationManager.
En nuestro archivo de configuración (app.config o web.config), se encuentra una sección en la cual estan guardadas las cadenas de conexión, por ejemplo:
Para acceder a esos datos y saber cual es el servidor o el nombre de la base de datos, a continuación escribo una clase comentada paso por paso:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Configuration;
namespace Pato {
/// <summary>
/// Clase encargada de la capa de datos del modulo de configuracion de conexion
/// Héctor de León
/// 07/01/2013
/// </summary>
class Conexion {
//atributos
public string servidor = "";
public string usuario = "";
public string password = "";
public string baseDeDatos = "";
//nombre de la conexión a modificar
private string nombreConexion = "conexionPatito";
/// <summary>
/// obtiene los datos de la conexión para ser utilizados en el formulario
/// </summary>
/// <returns></returns>
public bool getData() {
bool exito = false;
// se obtienen las conexiones
System.Configuration.ConnectionStringSettingsCollection connections = ConfigurationManager.ConnectionStrings;
//si existe por lo menos una conexión continuamos
if (connections.Count != 0) {
//Recorremos las conexiones existentes
foreach(ConnectionStringSettings connection in connections) {
//asignamos el nombre
string name = connection.Name;
//obtenemos el proveedor, solo por demostración, no lo utilizaremos ni nada.
string provider = connection.ProviderName;
//obtenemos la cadena
string connectionString = connection.ConnectionString;
//comparamos el nombre al de nuestro atributo de la clase para verificar si es la cadena
//de conexión que modificaremos
if (name.Equals(nombreConexion)) {
//separamos la conexión en un arreglo tomando ; como separador
string[] sC = connectionString.Split(';');
foreach(String s in sC) {
//separamos por el simbolo = para obtener el campo y el valor
string[] spliter = s.Split('=');
//comparamos los valores
switch (spliter[0].ToUpper()) {
case "DATA SOURCE":
servidor = spliter[1];
break;
case "USER ID":
usuario = spliter[1];
break;
case "PASSWORD":
password = spliter[1];
break;
case "INITIAL CATALOG":
baseDeDatos = spliter[1];
break;
}
}
}
}
} else {
Console.WriteLine("No existe la conexión");
}
return exito;
}
}
Ahora de esta manera la podemos utilizar:
//creamos nuestro objeto
Conexion oConexion = new Conexion();
//ejecutamos el metodo
oConexion.getData();
//imprimimos el resultado
Console.WriteLine("servidor " + oConexion.servidor + " base de datos: " + oConexion.baseDeDatos + " usuario: " + oConexion.usuario + " password: " + oConexion.password);
Para obtener un hijo por su posición con jquery haremos uso de la pseudo-clase de css nth-child, esta pseudo-clase sirve para seleccionar un elemento hijo por su posición la cual tiene la siguiente sintaxis: grupoElementos:nth-child(posición).
$(function(){
//seleccionamos del conjunto de divs hijos de #muchosDivs el tercer div
$divTres=$("#muchosDivs div:nth-child(3)");
//mostramos el div seleccionado
alert($divTres.html())
})
Para realizar una búsqueda en una columna en específico de una tabla podemos hacer uso del filtro eq que nos sirve para seleccionar el número de la columna de elementos, de esta manera podemos realizar la búsqueda solo por una columna en particular.
En el siguiente ejemplo muestro como se puede buscar un valor en la primera columna, y después obtener la fila entera (por medio de la función parent() de jquery) para mostrar su resultado (o lo que deseen hacer ustedes con esos datos).
En seguida muestro el ejemplo en el cual pueden ver el resultado, y debajo el código que hace posible esta funcionalidad:
//función que realiza la busqueda
function jsBuscar(){
//obtenemos el valor insertado a buscar
buscar=$("#busqueda").prop("value")
//utilizamos esta variable solo de ayuda y mostrar que se encontro
encontradoResultado=false;
//realizamos el recorrido solo por las celdas que contienen el código, que es la primera
$("#miTabla tr").find('td:eq(0)').each(function () {
//obtenemos el codigo de la celda
codigo = $(this).html();
//comparamos para ver si el código es igual a la busqueda
if(codigo==buscar){
//aqui ya que tenemos el td que contiene el codigo utilizaremos parent para obtener el tr.
trDelResultado=$(this).parent();
//ya que tenemos el tr seleccionado ahora podemos navegar a las otras celdas con find
nombre=trDelResultado.find("td:eq(1)").html();
edad=trDelResultado.find("td:eq(2)").html();
//mostramos el resultado en el div
$("#mostrarResultado").html("El nombre es: "+nombre+", la edad es: "+edad)
encontradoResultado=true;
}
})
//si no se encontro resultado mostramos que no existe.
if(!encontradoResultado)
$("#mostrarResultado").html("No existe el código: "+buscar)
}
Nota: eq sirve para seleccionar un indice de los elementos seleccionados, como en un arreglo los corchetes []
Esta entrada veremos cómo podemos clonar una imagen (jpg, png) a código html, es decir, pintar por medio de divs una imagen deseada.
Recalco que no es muy útil hacer esto, la utilidad de esta entrada es que vean como por medio de canvas, sepuede recorrer una imagen y a su vez obtener pixel a pixel de esta.
A continuación pongo el ejemplo corriendo, solo den clic en el botón “dibuja en HTML” y esperen ya que tarda algunos segundos en realizar la acción.
Y podemos ver en esta imagen que son divs sin duda:
Ahora lo interesante, el código que nos ayuda a crear la magia, y como siempre con sus respectivos comentarios:
//función que ejecuta el botón
function dibuja(){
$("#mensaje").html("Espere un momentos, se esta dibujando la imagen!");
//comienza a dibujar despues de 1 segundo, para mostrar el mensaje anterior.
setTimeout(dibujar,1000)
}
//Esta es la función que realiza la acción principal
//funcion que realiza la clonacion de la imagen a divs
function dibujar(){
//guardamos la imagen en una variable
var img = $('#imagen')[0];
//creamos un canvas y le definimos el mismo tamaño a la imagen
var canvas = $('<canvas/>')[0];
canvas.width = img.width;
canvas.height = img.height;
//Le asignamos la imagen al canvas, ya que nos ayudara el canvas para poder obtener los pixeles de la imagen real
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
//definimos el tamaño del div para que sea el mismo ancho de la imagen
//de esta manera al pintar los divs hijos que representaran los pixeles
//formen la imagen y den el salto automatico cuando corresponda
$("#imagenHTML").html("")
$("#imagenHTML").css({"width":canvas.width+"px"})
//realizamos el recorrido de los pixeles del canvas tomando el ALTO como maximo valor a recorrer
for(y=0;y<canvas.height;y++){
//realizamos el recorrido de los pixeles del canvas tomando el ANCHO como maximo valor a recorrer
for(x=0;x<canvas.width;x++){
//obtenemos el color en rgb del pixel actual
var rgb = canvas.getContext('2d').getImageData(x,y,x+1,y+1).data;
//obtenemos el rojo verde y azul del rgb anterior
var red = quitaCero(rgb[0].toString(16), 2);
var green = quitaCero(rgb[1].toString(16), 2);
var blue = quitaCero(rgb[2].toString(16), 2);
//obtenemos el hexadecimal con lso colores anteriores
var hex = red + green + blue;
//y por ultimo creamos un div con la clase pixel que tiene el color hexadecimal
$("#imagenHTML").append("<div class='pixel' style='background:#"+hex+"'></div>");
}
}
//se termino de pintar y borramos el mensaje de texto que se puso al inicio
$("#mensaje").html("");
}
//Función que nos ayuda a agregar al arreglo un 0 a una cadena cuando la longitud recibida no se cumple
var quitaCero = function(num, longitud) {
return Array(longitud + 1 - (num + '').length).join('0') + num;
}
Quizá no sirva de mucho hacer esto ya que es lento, pero les servirá para algo el saber que pueden recorrer una imagen por sus pixeles por medio de javascript y el grandiosoelemento agregado en html5 de nombre canvas. Igual les anexo la liga directa al script para que puedan ver el código directamente: clic aquí.
Para el que no conozca la función que estoy utilizando setTimeout, esta simplemente se encarga de ejecutar una función o un código después de pasar cierto tiempo, en este caso puse 500 que es medio segundo. Hago uso de esta función par que se pueda notar el ordenamiento y no sea instantáneo.
A continuación anexo el ejemplo animado, solo denle clic en el botón comenzar:
Y ahora el código que hace posible esta demostración:
//arreglo a ordenar
arreglo=[10,9,19,8,1,12,14,0,5,6,9,17,10,4,5,3,2,3,4,5,6,7,88,77,66,55,44,33,21,2,33,44,73,78,9,2,3,0,1,8,1,13];
imprimirArreglo();
function comenzar(){
//llamamos la función mandando 0 en el primer parametro
//y mandando la longitud del arreglo -1
quicksort(0,(arreglo.length-1));
//desabilitamos boton
$("#botonsito").prop("disabled",true)
}
//funcion que plasma el arreglo para poder ser visualizado
function imprimirArreglo(){
//borramos el contenido del div del contenido
$("#contenido").html("");
//imprimimos los elementos en forma de div
for(i_=0;i_<arreglo.length;i_++){
//anexamos un div con clase bloque
$("#contenido").append("<div class='bloque'>"+arreglo[i_]+"</div>");
}
}
//función quicksort
function quicksort(primero,ultimo){
//definimos variables indices
i = primero
j = ultimo
//sacamos el pivote de la mitad del arreglo
pivote = arreglo[parseInt((i+j)/2)];
iteracionQS(i,j,pivote,primero,ultimo)
}
//funcion que suplanta el while y se llama recursivamente
function iteracionQS(i,j,pivote,primero,ultimo){
//mientras arreglo[i] sea menor a pivote
while(arreglo[i]<pivote)
i++;
//mientras j sea mayor a pivote
while(arreglo[j]>pivote)
j--;
//si el indice i es menor o igual a j entonces intercambiamos
if(i<=j){
//variable temporal auxiliar para guardar valor de arreglo[j]
aux=arreglo[j];
//intercambiamos los valores de arreglo[j] y arreglo[i]
arreglo[j] = arreglo[i]
arreglo[i] = aux
// incrementamos y decrementamos i y j
i++;
j--;
imprimirArreglo(arreglo);
}
//repetimos
if(i<j){
//hacemos una pausa de medio segundo
setTimeout(function(){
iteracionQS(i,j,pivote,primero,ultimo)
},500);
}else{
//si primero es menor a j llamamos la funcion nuevamente
if(primero<j){
//pausa de medio segundo
setTimeout(function(){
quicksort(primero,j);
},500);
}
//si ultimo es mayor que i llamamos la funcion nuevamente
if(ultimo>i){
//pausa de medio segundo
setTimeout(function(){
quicksort(i,ultimo)
}
,500);
}
}
}