Categoría: Frameworks – APIs

¿Cómo hacer que el middleware VerifyCsrfToken de #Laravel nos ignore rutas específicas?

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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'
    ];
}

Cambiar una imagen al dar clic en una imagen en miniatura con #jquery, #galería

Para crear una mini galería básica como la siguiente (den clic en las miniaturas):

Lo podemos hacer de la siguiente forma:

HTML

1
2
3
4
5
6
7
8
<div id="thumbs">
   <img style="width: 50px;" alt="" src="../img/images/at.jpg" data-img="../img/images/a.jpg" />
   <img style="width: 50px;" alt="" src="../img/images/bt.jpg" data-img="../img/images/b.jpg" />
</div>
 
<div>
    <img id="imagenGrande" style="width: 500px;" alt="" src="../img/images/a.jpg" />
</div>

Jquery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(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”)).

Marcar activa una opción de un menú al darle clic con #jquery

Ejemplo (da clic en una opción).

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.

Css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#menu .opcion{
    width:20%;
    float:left;
    cursor:pointer;
    background:#ddd;
    color:#000;
    padding:5px 0px 5px 0px;
    text-align:center;
 
}
 
#menu .opcionActiva{
 
    background:#000;
    color:#fff;
}

Html

1
2
3
4
5
6
7
<div id="menu">
        <div class="opcion">opción 1</div>
        <div class="opcion">opción 2</div>
        <div class="opcion">opción 3</div>
        <div class="opcion">opción 4</div>
        <div class="opcion">opción 5</div>
</div>

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
$(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.

¿Cómo animar el scroll del navegador al dar clic en una liga o menú? #jquery #javascript

Ver ejemplo.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- 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

1
2
3
4
5
6
7
8
9
10
11
12
$(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);  
});
});

Ver ejemplo.

Nota: la función offset nos sirve para obtener la posición de un elemento, en este caso el top de elemento respecto a la página.

¿Cómo obtener los datos de una conexión de base de datos guardada en app.config o web.config? c# csharp #visualstudio

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:

1
2
3
4
5
6
7
8
9
<configuration>
  <configSections>
  </configSections>
  <connectionStrings>
     <add name="conexionPatito" connectionString="Data
     Source=localhost;Initial Catalog=basededatosPatito;User
     ID=pato;Password=patofeo" providerName="System.Data.SqlClient" />
   </connectionStrings>
</configuration>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
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:

1
2
3
4
5
6
7
8
//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);

Nota: Recuerden agregar arriba: using System.Configuration;

Si tienen alguna duda en comentarios pueden preguntar.

Y como siempre el código es para explicar no es la manera formal de hacerlo (por los atributos públicos :().

¿Cómo obtener un hijo por su posición con jquery? #nth-child

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).

A continuación un ejemplo de cómo se utiliza:

Html

1
2
3
4
5
6
7
8
9
10
11
12
<div id="muchosDivs">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
</div>

Jquery

1
2
3
4
5
6
7
8
9
$(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())
 
})

La función alert() nos mostrara el número 3.

Realizar una búsqueda en una columna en específico de una tabla con #jquery.

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:

Ejemplo:

Html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<label>Captura un código</label>
    <input type="text" id="busqueda"/>
    <input onclick="jsBuscar();" type="button" value="Buscar" /><br /><br />
 
    <table id="miTabla">
        <tr>
            <th>Codigo</th>
            <th>Nombre</th>
            <th>Edad</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Pedro</td>
            <td>34 años</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Luis</td>
            <td>34 años</td>
        </tr>
            <tr>
            <td>3</td>
            <td>Juan</td>
            <td>15 años</td>
        </tr>
            <tr>
            <td>4</td>
            <td>Jesus</td>
            <td>20 años</td>
        </tr>
            <tr>
            <td>5</td>
            <td>Pablo</td>
            <td>23 años</td>
        </tr>
    </table>
 
    <div id="mostrarResultado">
 
    </div>

Jquery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//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 []

Clonar una imagen a un conjunto de divs utilizando #jquery, #javascript y #canvas.

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, se puede 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:

div clonados con canvas

Ahora lo interesante, el código que nos ayuda a crear la magia, y como siempre con sus respectivos comentarios:

CSS

1
2
3
4
5
.pixel{        
float:left;        
width:1px;         
height:1px;      
}

HTML

1
2
3
4
5
6
7
<img id="imagen" width="200" height="200"  src="../img/images/galaxia.jpg" />
    <br />
 
<input type="button" value="dibuja en HTML" onclick="dibuja()" />
<div id="mensaje" style="font-weight:bold"></div>
 
<div id="imagenHTML"></div>

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
//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 grandioso elemento agregado en html5 de nombre canvas.
Igual les anexo la liga directa al script para que puedan ver el código directamente: clic aquí.

Algoritmo de ordenamiento Quicksort en Javascript animado con jquery

En esta entrada utilizare el algoritmo de quicksort en javascript que publique anteriormente y lo acomode de una manera especial para poder mostrar poco a poco como se va ordenando un conjunto de números por medio de este método de ordenamiento.

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:

CSS

1
2
3
4
5
6
7
8
9
10
.bloque{
float:left;
margin-left:5px;
margin-bottom:2px;
width:20px;
height:20px;
text-align::center;
padding:5px;
background:#fff;
}

HTML

1
2
<div id="contenido" style=" background:#efefef; height:90px; padding:10px;"></div>
<input id="botonsito" type="button" value="Comenzar" onclick="comenzar()" />

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
//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);
}
}
}

De cualquier forma les dejo la liga directa al ejemplo mostrado, por si surge alguna duda.