Guardar datos del formulario en tiempo real (LocalStorage)

localstorage-feature

En algún momento te habrás topado con formulario que tienen varias etapas y por algún motivo debes recargar la pagina para seguir al siguiente paso y claro como aun no termina el registro no consideramos apropiado guardar aun esto a la base de datos y es algo engorroso estar creando una tabla temporal.

las soluciones pueden ser meterlo todo en una session en php  o utilizando lo nuevo (OK no tan nuevo) de javascript LocalStorage.

Grabaremos en LocalStorage en tiempo real

para ellos la idea es simple usaremos una función nativa setInterval  para guarde cada segundo lo que tengamos en los input’s.

como funciona?

Explico que hace el script y es algo simple usamos each para hacer un recorrido por todos los input , select y textarea (se puede agregar mas tipos) que tengamos en el DOM y capturamos el valor y lo metemos en variables localstorage que creamos con el nombre del elemento sea input , select o  textarea y con su valor, esto sucedera cada segundo.
Volvemos hacer otro recorrido de lo de los elementos  input , select o  textarea para obtener los datos de los localstorage ya que  para identificarlos necesitamos los nombres de estos elementos.

les dejo un ejemplo en funcionamiento:

El script


$(document).ready(function(){

                $('input[type="text"],select,textarea').each(function(){    
                        var name = $(this).attr('name'); 
                        value=localStorage.getItem(name);
                        var value = $(this).val(value);
                 })

                setInterval(function(){
                    $('input[type="text"],select,textarea').each(function(){    
                        var name = $(this).attr('name');
                        var value = $(this).val();
                        localStorage.setItem(name, value);
                    })
                    

                }, 1000);                 
            })

ejemplo online.

Ver articulo completo.

Minificar código HTML desde Codeigniter

La minificación se refiere a la eliminación de bytes innecesarios, como los espacios adicionales, saltos de línea y sangrías. Al minimizar los códigos HTML se puede acelerar la carga de una página web.

Podemos utilizar multiples herramientas online, preprocesadores, entre otros para generar una versión optimizada del código HTML. En esta oportunidad permítame mostrarle como minificar nuestro código HTML desde el framework codeigniter; usaremos un método donde eliminaremos espacios en blanco innecesarios del HTML generado, excepto Javascript. Sin más empecemos:

1.- Modificar config.php

En el archivo de configuración aplication/config/config.php modificar la variable enable_hooks de FALSE a TRUE.

$config['enable_hooks'] = TRUE;

2.- Modificar hooks.php

Ubicar los el archivo aplication/config/hooks.php y adicionar las siguientes líneas de código:


$hook['display_override'][] = array(
'class' => '',
'function' => 'compress',
'filename' => 'compress.php',
'filepath' => 'hooks'
);

3.- Crear compress.php

Crear el archivo aplication/hooks/compress.php y pegar el siguiente código php:


function compress(){
ini_set("pcre.recursion_limit", "16777");
$CI =& get_instance();
$buffer = $CI->output->get_output();
$re = '%# Collapse whitespace everywhere but in blacklisted elements.
(?> # Match all whitespans other than single space.
[^\S ]\s* # Either one [\t\r\n\f\v] and zero or more ws,
| \s{2,} # or two or more consecutive-any-whitespace.
) # Note: The remaining regex consumes no text at all...
(?= # Ensure we are not in a blacklist tag.
[^<]*+ # Either zero or more non-"<" {normal*}
(?: # Begin {(special normal*)*} construct
< # or a < starting a non-blacklist tag.
(?!/?(?:textarea|pre|script)\b)
[^<]*+ # more non-"<" {normal*}
)*+ # Finish "unrolling-the-loop"
(?: # Begin alternation group.
textarea|pre|script)\b
| \z # or end of file.
) # End alternation group.
) # If we made it here, we are not in a blacklist tag.
%Six';
$new_buffer = preg_replace($re, " ", $buffer);
if ($new_buffer === null){
$new_buffer = $buffer;
}
$CI->output->set_output($new_buffer);
$CI->output->_display();
}

4.- Verificar cambios.

Guarde los cambios realizados y verifique el código fuente de su página web desde el navegador.

Si no notas los resultados, por favor borra la cache de tu navegador y vuelve a verificar el código fuente.

Referencia:

https://github.com/juanjus98/Minificar-codigo-HTML-desde-Codeigniter

Ver articulo completo.

Generar Token de Seguridad Php Mysql

Los token nos sirve para agregar un nivel mas de seguridad a nuestras aplicaciones web que se pueden llegar a utilizar en varios procesos donde el usuario interactúa.

pero para ser mas prácticos brindare un ejemplo y es de la típica sección de olvide mi contraseña que tiene cualquier sistema de ecommerce, blog, intranet, etc.

olvidecontrasena

el proceso de esta sección ya es muy conocida ingresamos nuestro correo y nos debería llegar un correo que puede ser que nos envié una contraseña aleatoria que es de mal gusto por cualquiera podría ingresar tu correo y ya te cambiaron la contraseña por eso un proceso idóneo es que te llegue un link desde donde podrías cambiar la contraseña y en ese proceso nos enfocaremos.

¿por que deberíamos usar entonces un token?

Pero para entender bien el motivo de utilizar entendamos el problema y es muchas web hacen la sección enviando URL parecidas a esta:

www.dominio.com/olvido-password.php?email=pepito@dominio.com

 

y te manda a la pagina para colocar una nueva contraseña y claramente así cualquiera que vea la URL y  sepa algo de informática se dará cuenta que la web tiene un tremendo agujero de seguridad.

Screenshot_1

¿que podemos hacer?

realmente si nos podemos a pensar un poco mas esto no debería ser un drama ya que con un simple token podemos zafar de este bug de seguridad.
entonces es simple esto ya que al momento de enviar el correo con el aviso al usuario creas una variable aleatoria que puede estar encriptado en md5, base64, etc.

www.dominio.com/olvido-password.php?email=NDUzNTM0NTM0NTM0NTM0NTM0NTc2NDY=

al tener el token lo guardas en un campo de la base de datos por ejemplo en la tabla usuarios en un campo token y enviamos por correo al usuario un link con el token,  cuando abra el usuario el link validamos de que si el token que enviado por GET existe o no.

Estas pequeñas cosas pueden mejorar la seguridad de tus aplicaciones espero que te ayude y si tienes dudas me puedes escribir.

 

 

 

Ver articulo completo.

Crear un chat basico con pubnub

Buen tiempo que deje de publicar articulos por un tema de tiempos pero ya que andaba metido en varios proyectos y en uno de ellos que aun lo llevo en marchar me toco realizar un chat y bueno con el ajax esto deje de ser un drama hace mucho tiempo. Pero si lo intentaste hacer en algun proyecto mediano o grande te habras topado con unos problemas por ejemplo: saturar el servidor con muchas peticiones, limite de conexiones a la base de datos si fuera el caso que estes guardando los chat, etc.

este problema se soluciono definitivamente con node.js que evita el problema de saturar el servidor por peticiones ya que siempre mantienen un puente donde escribe y lee y se mantiene abierto para esta conversacion.

pero podras instalarlo en tu servidor? probablemente no ya que no ocupa una caracteristica tecnica en tu proyecto  y usas una infraestructura LAMP  y es aqui donde PUBNUB viene a ayudarnos y solucionarnos la vida nos enfoca en programar y dejar del lado el lado tecnico del servidor.

se que siempre en mis articulos voy directo al codigo pero era necesario un poco de contexto para que entiendan bien para que viene el PUBNUB al mercado y no se milita a solo hacer chat de hecho puede ser usado para infinidades de cosas.

Entonces a programar!

chat-vista

tenemos esta estructura del chat que es muy similar al de facebook el codigo para esta ventana es (se usa bootstrap y jquery):

<div class="conversacion" style="display: block;">
<div class="ventana-cabecera"><i class="fa fa-circle" aria-hidden="true"></i> Luis Miguel Rodriguez Blas</div>
	<div class="ventana-cuerpo">
 
	   <div class="col-xs-12 el"><span>Broder, vao a pichangear!</span></div>
	   <div class="col-xs-12 yo"><span>sale y vale pero a las 10pm de lo contrario no la hago</span></div>
	   <div class="col-xs-12 el"><span>Broder, vao a pichangear!</span></div>
	   <div class="col-xs-12 yo"><span>sale y vale pero a las 10pm de lo contrario no la hago</span></div>
           <div class="col-xs-12 yo"><span>hola</span></div>
       </div>
       <div class="ventana-escribir">
	<form id="frm-chat">
	   <input type="text" class="form-control" name="" placeholder="Escribe tu mensaje...">
	</form> 
       </div>
</div>

y tenemos un input donde el usuario escribira y es desde donde se desencadenara todo el script pero primero realizamos la conexion del pubnub

/*conexion al servidor del pubnub*/
var pubnub = PUBNUB.init({
        publish_key: 'xxxxxxxxxxxx',
        subscribe_key: 'xxxxxxxxxxxxx'
    });

estos datos de publish_key y subscribe_key te los brindara al registrarse y crear un proyecto dentro de la web de pubnub.com
crear-pubnub

el siguiente paso es crear un canal que servira para la conversacion (puedes crear n cantidad de canales)

/*abrimos el canal*/
pubnub.subscribe({
          channel: 'chat-1',
          message: function(m){escribir_chat(m)} 
    });

ya tenemos el canal abiero de este medio y en message le pasamos una funcion que la llamamos escribir_chat() que lleva una variable donde enviaremos lo que nos pasa el usuario al chatear pero para tener mas claro vemos como procede el script desde el momento del enter en el input del chat.

/*aqui creamos el evento que cuando de ENTER en la input se dispare y llame a la funcion publish */
$("#frm-chat input[type='text']" ).keypress(function(e) {
        mensaje=$( "#frm-chat input[type='text']" ).val();
        if(e.which == 13) {
            publish(mensaje);
            return false;
     }
});

la funcion publish enviamos el dato escrito

/*el fin de la funcion es para decir al pubnub a que canal y que mensaje envia */
function publish(mensaje=null,input) {
        pubnub.publish({
            channel: 'chat-1',
            message: {"text":mensaje}
        });
    }

ahora insertamos al canal los datos enviados para que el usuario del otro lado del chat lo vea.

/*mandamos al canal y ejecutamos una funcion que escribira en el html */
pubnub.subscribe({
          channel: 'chat-1',
          message: function(m){escribir_chat(m)} 
 });

la funcion escribir_chat basicamente creara la linea de conversacion en el html del chat y se vera una fluidez de conversacion

function escribir_chat(m)
    {   
        console.log(m)
 
        if (m.text!="")
        { 
            var html='<div class="col-xs-12 yo">';
            html+='    <span>'+m.text+'</span>';
            html+='</div>';
            $(".ventana-cuerpo").append(html);
            $("#frm-chat input[type='text']").val(''); 
            /*esta linea es para que siempre la ventana div se mantenga en el bottom 0*/
            $(".ventana-cuerpo").scrollTop($(".ventana-cuerpo")[0].scrollHeight);
        }
 
    }

ya con esto tendras el chat funcionando y seguro te preguntas pero si solo creamos 1 venta de la conversacion como hacemos para el otro usuario que estara del otro lado?.
ejecuta su chat en 2 tabs del navegador al mismo tiempo y comienza escribir y veras que lo tienes todo.

realizare otro post mejorando este chat que estamos armando, espero que te ayude o te de mejor idea del pubnub y estoy abierto a sugerencias y mejoras de este chat que como menciono esta en una primera version basica.

Ver articulo completo.

Experiencia de compra online en ripley.com.pe

nike-zapatillas-air-max-819474-01Ripley como suele hacer mando ofertas por 48 horas que en su pagina web y realmente encontre un producto que me gusto mucho que ya lo habia visto por tienda pero el precio no me animaba mucho pero al ver que realmente en la web si era un descuento llamativo me anime a comprarlo.

Experiencia de compra online en ripley.com.pe

Proceso de compra

Al seleccionar y tener mi producto ya en el carrito de compras procedi a comprarlo que es a lo que venimos! ya por experiencia se que puede que el delivery tome mucho tiempo asi que decidi recoger el producto en la tienda seleccionando esta opcion. screenshot_1 y cuando procedi a continuar me mando un mensaje “No se pudo consolidar las tiendas”  que realmente no entendi nunca el problema ya que pense que era por cosas raras del diablo y actualice la pagina pero nunca pude proceder con la compra por ese medio de retiro y tuve que selecciona despacho a domicilio que y me di con la sorpresa que tiene un costo estandar para enviar a cualquier distrito a 10 soles y  lo genial que era de un dia para otro y sin dudarlo mucho realice el pago en linea y finalizada la compra.

Me llegaron 2 correos:

  • Orden de compra
  • Comprobante electronico

en la orden de compra me llego con este texto que copio:

¡Gracias por preferir Ripley.com! Te enviamos los detalles de tu orden de compra. Recuerda que durante el día de la entrega podrás hacer SEGUIMIENTO A TU PEDIDO EN www.ripley.com.pe/seguimiento. Te recordamos que debes de estar presente para la entrega en el día y hora que indicaste durante tu compra. Si tienes alguna duda o inconveniente, por favor llámanos al 611-5959.

lo genial de todo el texto es que nos dan una forma de seguimiento a nuestro producto que se activa el mismo dia que te enviaran el producto y en tiempo real te muestra donde esta el producto.

solo el detalle que no es solo en ripley es mucho tiendas online que siempre te dan un rango mi largo de horarios para esperar el producto que esto te hace encerrarte en casa a esperar el producto.

Conclusión

Fue una experiencia gratificante pero podria mejorar en horarios de envio y reparar errores que tiene en la parte de entrega o pueda ser que sea algo que hice mal para habilitar la opcion entonces que sea mas facil de entenderlo.

Ver articulo completo.