Ejecutar una cadena como consulta en SQL Server #SQLServer

Para ejecutar una cadena en Transact-SQL como una consulta, existe el procedure de nombre sp_sqlexec, este recibe la cadena la cual ejecuta. Esto nos sirve para consultas dinámicas pero no es recomendable a menos que se tenga bien planteada la seguridad para evitar travesuras de los “hackers”.

Ejemplo:

declare @cadena varchar(max)='select * from tabla'

exec sp_sqlexec @cadena

Como hacer que el navegador no cargue datos guardados como usuario y contraseña en un input. #html5

Para hacer que nuestros inputs no carguen datos guardados en el navegador, ya sea usuario y contraseña cargados en el formulario de acceso y se carguen en el formulario de modificar datos de usuario por ejemplo, tenemos que utilizar el atributo: autocomplete con el valor off.

<input type="text" name="usuario" autocomplete="off">

Esto evitara que se cargue el valor guardado de usuario en una caja de texto con el mismo name.

Como detectar cuando se redimensiona la ventana de nuestro navegador con #jquery

Para detectar cuando se redimensiona la ventana de nuestro navegador existe el evento resize. Basta con utilizar el selector en el objeto global window y aplicar la función que deseamos realizar cada que se redimensiona:

$(window).resize(function(){
//aqui el codigo que se ejecutara cuando se redimencione la ventana
var alto=$(window).height();
var ancho=$(window).width();
alert("alto: "+alto+" ancho:"+ancho);
})

Como hacer que una caja de texto solo permita números con #jquery

Algunas veces necesitamos que una caja de texto solo acepte números (puedes ver mi otra entrada: cómo hacer que una caja de texto solo permita letras y espacios con jquery), para hacerlo podemos hacer uso de la siguiente función:

 $(".number").keydown(function (e) {
            // Permite: backspace, delete, tab, escape, enter and .
            if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
                // Permite: Ctrl+A
                (e.keyCode == 65 &amp;&amp; e.ctrlKey === true) ||
                // Permite: home, end, left, right
                (e.keyCode &gt;= 35 &amp;&amp; e.keyCode &lt;= 39)) {
                // solo permitir lo que no este dentro de estas condiciones es un return false
                return;
            }
            // Aseguramos que son numeros
            if ((e.shiftKey || (e.keyCode &lt; 48 || e.keyCode &gt; 57)) &amp;&amp; (e.keyCode &lt; 96 || e.keyCode &gt; 105)) {
                e.preventDefault();
            }
        });

Ayudándome de los selectores de jquery solo basta con poner la clase “number” a mis cajas de texto y con eso ya el usuario no podrá introducir caracteres que no sean números.


<input type="text" class="number">

Como hacer que una caja de texto solo permita letras y espacio con #jquery

Para obligar que una caja de texto solo acepte letras y espacios, sin caracteres especiales (¿¡¨*)¨o números, podemos hacerlo así de sencillo:

Código HTML

<input class="letras" type="text" >
<input class="letras" type="text" >
<input class="letras" type="text" >

Código Javascript/Jquery

$(".letras").keypress(function (key) {
            window.console.log(key.charCode)
            if ((key.charCode < 97 || key.charCode > 122)//letras mayusculas
                && (key.charCode < 65 || key.charCode > 90) //letras minusculas
                && (key.charCode != 45) //retroceso
                && (key.charCode != 241) //ñ
                 && (key.charCode != 209) //Ñ
                 && (key.charCode != 32) //espacio
                 && (key.charCode != 225) //á
                 && (key.charCode != 233) //é
                 && (key.charCode != 237) //í
                 && (key.charCode != 243) //ó
                 && (key.charCode != 250) //ú
                 && (key.charCode != 193) //Á
                 && (key.charCode != 201) //É
                 && (key.charCode != 205) //Í
                 && (key.charCode != 211) //Ó
                 && (key.charCode != 218) //Ú

                )
                return false;
        });

Utilizamos una clase con la cual relacionamos los elementos y en el evento keypress el cual aplicamos por medio del selector de jquery, agregamos el código restringiendo las teclas que no necesitamos.
Este código también tiene anexados los códigos para las letras con acentos y la ñ.

Abstracción en la Programación – Curso de Programación Orientada a Objetos en 10 minutos #6

La abstracción es un tema poco visto cuando estamos en la universidad y estudiamos programación orientada a objetos. Se nos mencionan las clases abstractas, pero esto solo es parte de lo que es la abstracción. He decidido incluir este tema brevemente en este curso, ya que para mí esto es lo que hace la diferencia de un programador bueno de un programador malo, y no cuantos lenguajes de programación domine.

A lo largo de mi experiencia, he llegado a la conclusión que la abstracción nunca termina por mejorarse, y al momento que miras código tuyo de uno o dos años atrás y ves que es un desorden, esto quiere decir que has mejorado.

En breves palabras la abstracción es resumir o disminuir un elemento a lo que lo define sin incluir otros elementos, en este caso los objetos de la Programación Orientada a Objetos (POO). Para explicar esto siempre recurro al triangulo y al círculo, los dos son figuras geométricas, un triángulo tiene 3 lados y siempre tendrá 3 lados aquí y al otro lado del universo, y un circulo siempre será una línea conectada, esto es abstracción, se definen las figuras en una o dos líneas de descripción sin llegar a meternos en más detalle.

¿Pero esto para que nos sirve o qué? Sirve para hacer la diferencia de un mal programador a un buen o magnifico desarrollador de sistemas.

Ya dejando atrás el círculo y el triángulo veamos un ejemplo de día a día cuando se desarrolla un sistema.

Un sistema de ventas:

  • El cliente pide un sistema que tenga usuarios.
  • Los usuarios pueden ser clientes o vendedores o administradores.
  • Los usuarios tendrán un password para acceder al sistema.
  • Los clientes compran, los vendedores venden.

Lo que un programador con bajo nivel de abstracción hará es:

Creará una clase Administrador, una clase Cliente y una clase Vendedor y las tres tendrán el campo password el campo usuario y los métodos para autentificarse.

Por ejemplo:

Clase Administrador

class Administrador{
string usuario="";
string password="";

//todos los atributos de administrador por ejemplo
string nombre;
string apellido;

//etc

public bool Ingresar(string usuario, string password){
//codigo ingreso
}

public bool Salir(){
//codigo salir
}

//aqui metodos de administrador etc...
}

Clase Cliente

class Cliente{
string usuario="";
string password="";

//todos los atributos de cliente por ejemplo
string nombre;
string apellido;
string empresa;
//etc

public bool Ingresar(string usuario, string password){
//codigo ingreso
}

public bool Salir(){
//codigo salir
}

//metodos de cliente
}

Clase Vendedor

class Vendedor{
string usuario="";
string password="";

//todos los atributos de vendedor por ejemplo
string nombre;
string apellido;
string email;
decimal comision;
//etc

public bool Ingresar(string usuario, string password){
//codigo ingreso
}

public bool Salir(){
//codigo salir
}

//metodos de vendedor
}

Y esto es normal, funcionara y el sistema para el usuario estará perfecto, el problema viene cuando vienen los cambios en el sistema, por ejemplo nos piden modificar el método de acceso al sistema, digamos antes se hacía la conexión directa, ahora se hará por un webservice y utilizar un certificado. Entonces la cosa se convierte en un cambio en 3 sitios distintos, más trabajo por falta de abstracción, y si es más trabajo es más tiempo por lo cual es más caro y por lo cual es más crítico a darse errores.

Cuando una persona tiene un nivel más alto de abstracción podrá pensar en métodos alternativos para evitar estos problemas, estos métodos nacen por la experiencia que se tienen en sistemas hechos anteriormente y es cuando hacemos cosas más organizadas con un nivel más alto de abstracción como el siguiente ejemplo, que nos ayudaremos de la herencia:

Clase Usuario

class Usuario{
string usuario="";
string password="";
public bool Ingresar(string usuario, string password){
//codigo ingreso
}

public bool Salir(){
//codigo salir
}
}

Clase Administrador

class Administrador : Usuario{

//todos los atributos de administrador por ejemplo
string nombre;
string apellido;
}

Clase Cliente

class Cliente : Usuario{
//todos los atributos de cliente por ejemplo
string nombre;
string apellido;
string empresa;
//etc

//metodos de cliente
}

Clase Vendedor

class Vendedor : Usuario{

//todos los atributos de vendedor por ejemplo
string nombre;
string apellido;
string email;
decimal comision;
//etc

//metodos de vendedor
}

Nota: Los dos puntos (:) en c# sirven para heredar, lo mismo que en java es extends.

Como vemos los métodos de ingresos quedan en la clase Usuario de la cual todas las otras clases: Cliente, Administrador, Vendedor heredan, y esto ya muestra más madurez que las clases anteriores, ya que si surge un cambio en el ingreso solo tendríamos que modificar el metodo en la clase Usuario. Pero aun así podemos mejorarlo más analizando las similitudes de nuestras clases y viendo cómo podemos crear otra entidad por ejemplo una clase Persona que tenga el atributo nombre y apellido los cuales comparten las otras clases y a su vez que herede de Usuario.

El propósito de esta entrada es que ustedes como programadores no tomen a la ligera la manera que hacen y organizan su código, ya que esto puede ser la diferencia en ser un programador malo a uno bueno, a parte que si su código es formal y elegante puede ser fácil entendible por otro programador.

Con esto doy por terminado este curso de Programación Orientada a Objetos en 10 minutos, cualquier duda o comentario hágamelo saber en el apartado de comentarios o en el formulario de contacto.

Todo esto que hago es para todo los programadores que comienzan o de una u otra forma llegaron a un problema que yo ya solucione, y los comentarios son una motivación para mí. Gracias lector por visitar mi sitio web.

Ir Capítulo Anterior (5.- Polimorfismo)

Ejecutar código #javascript ya cargadas todas las imágenes con #jquery

En algunas ocasiones tenemos la necesidad de ejecutar algún código javascript hasta que este cargado todo el DOM pero también cargadas todas las imágenes, comúnmente utilizamos:

$(document).ready(function(){    
//script que se ejecuta cuando se cargo el DOM
});

Pero nos damos cuenta que se ejecuta aunque no se hayan cargado las imágenes y es por el hecho de que el DOM ya está cargado ósea el código que plasma esa imagen (<img>).

Para poder lograr que se ejecute un script terminando de cargar DOM e imágenes basta con utilizar:

$(window).load(function(){
    //script que se ejecuta cuando se cargo el DOM y las IMAGENES
})

¿Cómo hacer una petición ajax por medio de submit? #jquery #ejemplos

Algunas veces nuestras peticiones de formulario son pesadas (cargar archivos por ejemplo) y esto puede ocasionar que el usuario se estrese o siga presionando botones, para ello yo en estos casos recurro a realizar una petición ajax remplazando el submit del form (a la vez bloqueo la pantalla para que no estén haciendo peticiones a lo bestia, pueden utilizar algo como esto: [bloquear la pantalla con un div]).
Para ello podemos ayudarnos de la función serialize() de jquery, con la cual nos regresa la cadena de parámetros que están en nuestro form (valor1=1&valor2=2&valor3=3…).
Tenemos que tener cuidado en poner el return false al final, ya que con eso evitamos que se continúe con el submit común.
El siguiente ejemplo muestra fácilmente como podemos realizar esa petición (leer los comentarios):

Código HTML

    <form id="miForm" action="/peticion.php">
    	<input name="cajaTexto" type="value" value="pato" />
        <input type="submit" value="Enviar" />
    </form>

Código Jquery

//selector sobre el form seguido de la función submit
$("#miForm").submit(function(){
		//de esta manera remplazamos

		//ahora obtendremos los atributos que necesitaremos
		url=$(this).prop("action")
		//la función serialize nos regresa los input, es importante ponerles name
		parametros=$(this).serialize()

		//aqui utilizamos la petición, en este caso post
		$.post(url,parametros,function(data){
			//aqui es cuando ya se hizo nuestra petición
			//regularmente yo regreso 1 para mostrar exito
				if(data=="1"){
					alert("exito")
				}else{
					//si no regreso el 1, regreso el error y asi lo muestro
					alert(data)
				}
		})

		//ESTO ES MUY IMPORTANTE, YA QUE SI NO SE PONE SE REALIZA LAS DOS PETICIONES
		//TANTO AJAX COMO LA PETICIÓN NORMAL DE FORMULARIO
		//REFRESCANDO TODA LA PAGINA.
		return false;

})

De esta manera podremos remplazar la petición submit normal, y hacer una petición ajax, que es mas formal y elegante.

Nota: el archivo peticion.php del action del form, es un proceso x en el cual se realiza una operación ya sea inserción, validación, etc. Y nos regresa en caso de éxito un “1”, sino el error.

¿Cómo obtener los valores del atributo data de HTML5 con #jquery? ejemplos

A partir de HTML5 fueron creados los atributos data.
Estos atributos nos sirven para guardar cualquier cosa y su utilización es la siguiente:

<div id="divDireccion"
     data-direccion="Calle Lorenzo Higareda"
     data-numero="18"
     data-colonia="tetlan">
                           Un div lleno de datas</div>

Recuerda poner la palabra data seguida de un guión (data-*) y despues el nombre de tu atributo.

Con jquery, existen una manera fácil de obtener los valores, y para ello utilizaremos la función data() y dentro el nombre de nuestro atributo.
El siguiente ejemplo explica de una manera rápida y fácil como podemos obtener los valores:

//utilizando el div anterior obtenemos los valores con la función data y el selector sobre el div que los contiene
direccion=$("#divDireccion").data("direccion")
numero=$("#divDireccion").data("numero")
colonia=$("#divDireccion").data("colonia")
//mostramos los 3 valores
alert(direccion+" "+numero+" "+colonia)

El nombre que se pone dentro de la función data(), es sin el data- que lo precede

Para asignar un valor a los atributos data por medio de jquery, es de la siguiente manera:

//utilizando el mismo div puesto con anterioridad
$("#divDireccion").data("direccion","Calle Sta Ana")
//obtenemos el valor de data nuevamente
direccion=$("#divDireccion").data("direccion")
//mostramos en un alert, veremos el nuevo valor
alert(direccion)