Article

Registro con jquery mobile y codeigniter

1x1.trans

Vamos a crear un formulario de registro con jquery mobile y codeigniter, como veremos, gracias a jquery mobile, tendremos una aplicación para dispositivos móviles completamente funcional con un mínimo esfuerzo. Entre otras cosas tendremos lo siguiente:

En una misma vista podemos tener todas las vistas que necesitemos, tendremos un diseño agradable sin esfuerzo, crear transiciones entre las mismas será cosas de niños etc.

En nuestro caso tendremos tres pages, la primera será donde tengamos el formulario de registro/login. Si pasamos la validación que le hemos impuesto al formulario nos redirigirá a la page2. Aquí nos dará la bienvenida a través de la sesión de usuario que crearemos. En caso contrario nos mostrará los errores que hemos cometido en el mismo.

Una vez iniciada la sesión, tendremos la opción de cerrarla y volver al formulario de registro/login. Cuando hayamos iniciado sesión podremos movernos entre nuestras pages 2 y 3, que serán a las que podamos acceder si tenemos la sesión abierta.

Del mismo modo, si intentamos volver al formulario de registro con la sesión abierta, nos devolverá a la page2, así que como vemos, tenemos la situación bastante controlada.

Para poder utilizar correctamente jquery mobile en la web, debemos entender que aquí no funciona la siguiente instrucción de jquery



En su lugar tenemos muchas otras opciones, vamos a ver algunas de ellas:


  • $(“pagina o selector”).on( “pagebeforechange”, function( event ) { TODO } )


Se activa dos veces durante el cambio de página, primero antes de cualquier carga de la misma o de la transición y la siguiente después de que la siguiente página se haya completado con éxito, pero antes de que el historial del navegador haya sido modificado por el proceso de navegación.


  • $(“pagina o selector”).on( “pagebeforecreate”, function( event ) { TODO } )


Se activa en la página que se está inicializando, antes de que se auto-inicialicen más plugins.


  • $(“pagina o selector”).on( “pagebeforeshow”, function( event ) { TODO } )


Se activa antes de que la página que esperamos se vea, es como una pre.


  • $(“pagina o selector”).on( “pagechange”, function( event ) { TODO } )


Este evento se desencadena al cambiar de página.


  • $(“pagina o selector”).on( “pagecreate”, function( event ) { TODO } )


Se activa cuando la página ha sido creada en el DOM (via ajax u otros) pero antes de que todos los controles han terminado su carga, aún tenemos la opción de poder modificarlos con otro evento. Aquí dejo el enlace con todos los eventos que nos proporciona jquery mobile:

Eventos de jquery mobile

Una vez hayamos podido medio entender el funcionamiento de jquery mobile, dejo aquí unas imágenes de como quedará finalmente nuestro formulario y secciones con jquery mobile.

Formulario para registrarnos e iniciar sesión.

1x1.trans

Una vez hemos iniciado sesión.

1x1.trans

Un popup en otra página que a la vez es una página.

1x1.trans

Con esto ya estamos en condiciones de crear nuestro nuevo proyecto en codeigniter y escribir algo de código, empecemos.

Creamos el proyecto


Nos vamos a la web de codeIgniter y nos descargamos la versión que hay disponible, la guardamos y la extraemos en nuestro directorio raíz, en mi caso C:\xampp\htdocs, una vez tengamos ya la carpeta con los archivos debemos cambiarle el nombre, le podemos poner login_jqm, sugiero que coloquen el mismo así será más sencillo seguir el tutorial.


La base de datos


 

El archivo .htaccess



Con esto ya tenemos la base de datos con la tabla usuarios y hemos evitado tener que utilizar el index.php de codeigniter con el htaccess.

El archivo database.php


Ahora debemos dirigirnos a nuestro archivo database.php que está en la carpeta config y modificar el código para que quede así, siempre dependiendo de nuestros datos de acceso a la base de datos.




El archivo config.php


Aquí debemos colocar nuestra base url:



Modificar el index_page:



Y colocar una clave de encriptación para nuestras sesiones.



El archivo autoload.php


Ahora debemos abrir el archivo config/autoload.php y en el array que nos carga las librerías debemos colocar session para poder utilizar las sesiones.



Con todo lo anterior ya tenemos hecha la configuración de codeigniter para poder empezar a escribir nuestro código.


El controlador home.php


Aquí será donde tendremos la poca lógica que necesitaremos por parte de codeigniter, en el constructor cargaremos las librerías que necesitemos, a continuación tendremos como siempre la función index que será la que se encargue de cargar la única vista que necesitemos y el método registro, éste será el que nos permita registrarnos y hacer login en la página creando la sesión de usuario que necesitaremos.

También necesitaremos una función para cerrar la sesión, pero ya que no queremos permitir al usuario poder volver si ha iniciado la sesión, lo mejor será crear esta función en otro controlador, lo veremos más adelante.

Con todo lo dicho, creamos un nuevo archivo en la carpeta controllers llamado home.php y dentro colocamos el siguiente código.



Hasta aquí creo que no hay nada nuevo(ni lo habrá en este tutorial), todo lo que hay escrito debe ser entendido sin problemas ya que hay 60 tutoriales repitiendo la misma baina:).

Como vemos tenemos que crear el modelo home_model donde haremos la comunicación con la base de datos y guardaremos los datos del usuario, veamos.

El modelo home_model.php


Creamos un nuevo archivo en models llamado home_model.php y dentro colocamos el siguiente código.



Au, ya tenemos el modelo que se encargará de registrar a tantos usuarios como necesitemos, perfecto. Podemos pasar al tema que realmente nos interesa, éste es jquery mobile.

La vista home.php


Como hemos podido ver en el controlador, nuestra vista se llama home, así que creamos un archivo con ese nombre y lo guardamos en la carpeta views. Esta vista será la única de nuestra aplicación, ya que jquery mobile nos permite crear páginas dentro de una misma página, de esta forma no necesitamos mil archivos, es genial.



Como se puede apreciar, lo más importante, que es el tema de las páginas y el código jquery necesario para poder movernos y controlar la funcionalidad de nuestra aplicación está explicado en cada sección, así a medida que se va repasando el código se entiende sin ningún tipo de problema.

Como detalle, es bueno darse cuenta de que no hacemos uso de $(document).ready en ningún momento de toda la aplicación. Esto ya lo hemos explicado al principio del tutorial, pero es importante darse cuenta.

Para poder hacer uso de los eventos click y todos los que necesitemos, es necesario hacerlo en el momento oportuno, eso es saber escoger adecuadamente el tipo de evento que necesitamos, pageinit, pagebeforeshow o el que sea, pero saber cuál es el que se adapta a nuestras circunstancias.

Con todo lo anterior creo que ya tenemos un sistema de registro y login, una mezcla :D, para poder ir haciendo nuestros pinitos en este mundo, que sin duda es realmente importante. Dejo los archivos y espero que sea bien recibido, un saludo.

Registro y login con jquery mobile y codeigniter

5 Comments

  • Muchas gracias por los tutos,

    Como siempre son Perfectos!!!

    P.S

    (Los png de muestra no se ven… )

     

     

    • Gracias, no sé a qué pngs te refieres, las imágenes del post se ven bien.

  • tiene erroress!!!!

    • Muy bien, los puedes arreglar ya que no dices que errores son.

  • Se muestra welcome_message y debería de ser: home.php no se que hice mal!

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


siete + = 13

Templates de ThemeForest
Accede desde tu dispositivo
Acceso premium



Comentarios recientes