Kumbiaphp: Creacion de registro de usuario y login en la aplicación [Actualizado]

Una vez configurado todo lo primero es hacer nuestro formulario de registro de usuarios.

Este formulario posee los datos que hemos definido en nuestra base de datos, Nombre, Email, Password y le hemos agregado un CAPTCHA para evitar usuarios Spam o Bots.

Ya tenemos nuestra pagina estática, ahora vamos a agregarle los enlaces para registro y login, para esto vamos a modificar la vista de nuestra home creada previamiente y agregamos el siguiente código.


<?php echo link_to("registrar","title: Create una cuenta","class: button", "style: display:block; float:none; width:95%; clear:both; margin:2em 2em 1em 0;") ?>
 <?php echo link_to("ingresar","title: Ingresa a tu sesion","class: button", "style: display:block; float:none; width:95%; clear:both; margin:1em 2em 1em 0;") ?>

Y modificamos el codigo de nuestra hoja Css por el siguiente:

/* Formatea los mensajes de KumbiaPHP */
.notice_message, .success_message, .warning_message, .error_message, .validation_message {
 border: 1px solid;
 margin: 1px 0;
 padding:3px 10px 3px 50px;
 background-repeat: no-repeat;
 background-position: 10px center;
}

.error_message {
 color: #D8000C;
 background-color: #FFBABA;
 background-image: url('../img/default/error.png');
}

.notice_message {
 color: #00529B;
 background-color: #BDE5F8;
 background-image: url('../img/default/info.png');
}

.success_message {
 color: #4F8A10;
 background-color: #DFF2BF;
 background-image:url('../img/default/valid.png');
}

.warning_message {
 color: #9F6000;
 background-color: #FEEFB3;
 background-image: url('../img/default/warning.png');
}

.validation_message {
 color: #D63301;
 background-color: #FFCCBA;
 background-image: url('../img/default/warning.png');
}

.highlight {
 background: #FFFFDF;
}

.empty{
 width: 100%;
 clear: both;
}

.float-right-quarter{
 width: 25%;
 float: right;
}

.float-left-half{
 float:left; width:50%;
}

.floated{
 position: absolute;
}

.glass{
 -moz-opacity:.9; 
 opacity:.9;
}

a{
 text-decoration: none;
}

table{
 border-collapse: collapse;
 border: none; 
 width:100%;
 -moz-box-shadow:0px 1px 2px #888;
    -webkit-box-shadow:0px 1px 2px #888;
    box-shadow:0px 1px 2px #888;
}

/*====================ui 1====================*/
.ui1 .panel-options{
 font:normal 10pt "Helvetica", "arial", "sans-serif";
 border: solid 0.2em #fff;
 color:#fff;
 margin:0; padding:0.5em; 
 background: -moz-linear-gradient(0% 100% 90deg, #1A1A1A, #353535 60%); 
 background: -webkit-gradient(linear, left top, left 70%, from(#353535), to(#1A1A1A));

 -moz-box-shadow:0px 0px .5em #353535;
    -webkit-box-shadow:0px 0px .5em #353535;
    box-shadow:0px 0px .5em #353535;
 
 -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
 border-radius: 5px; 
  
 height:25px;
}

.ui1 .panel-options  a{
 text-decoration:none;
 color: #fff;
}

.ui1 .panel-options .option{
 float:left;
 display:block;
 height: 17px;
 width:auto; 
 margin:0 0.3em 0 0.3em;
 background: -moz-linear-gradient(0% 100% 90deg, #1A1A1A, #353535 60%); 
 background: -webkit-gradient(linear, left top, left 70%, from(#353535), to(#1A1A1A));
}

.ui1 .panel-options .list-select {
 border: solid 1px #555;
 -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
 border-radius: 5px; 
 width:8em;
 padding:0.1em;
}

.ui1 .panel-options .list-select a{
 margin: 0.1em;
}

.ui1 .panel-options .list-select ul, .ui1 .panel-options .list-select li, .ui1 .panel-options .list-select a{
 float:none;
 display:block;
}

.ui1 .panel-options .list-select ul{
 list-style:none; 
 display:none; float:none;
 width:8em; height:auto;
 margin:0; padding:0;
 position: absolute;
 background: -moz-linear-gradient(0% 100% 90deg, #1A1A1A, #353535 60%); 
 background: -webkit-gradient(linear, left top, left 70%, from(#353535), to(#1A1A1A));
 border: solid 1px #353535;
 border-top:none;
 -moz-border-radius-bottomleft: 5px;
 -moz-border-radius-bottomright: 5px;
 
  -webkit-border-radius: 5px;
 border-radius: 5px;  
}

.ui1 .panel-options .list-select ul a{
 padding:0.2em;
}

.ui1 .panel-options .list-select ul a:hover{
 background: -moz-linear-gradient(0% 100% 90deg, #353535, #d45500 100%);
 background: -webkit-gradient(linear, left top, left bottom, from(#d45500), to(#353535)); 
}

.ui1 .panel-options .list-select:hover ul{
 display: block;
}

.ui1 .panel-options .navigator{
 margin-top:0.3em;
 float: right;
 border: solid 1px #555;
 -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
 border-radius: 5px;
 background: -moz-linear-gradient(0% 100% 90deg, #1A1A1A, #353535 60%); 
 background: -webkit-gradient(linear, left top, left 70%, from(#353535), to(#1A1A1A));
 height:1.3em;
}

.ui1 .panel-options .navigator a{
 display:block;
 float:left;
 height: 100%;
 width: 1em;
 text-align:center;
 border-left: solid 1px #353535;
}

.ui1 .panel-options .navigator a:first-child{
 -moz-border-radius-topleft: 5px;
 -moz-border-radius-bottomleft: 5px;
 
  -webkit-border-radius: 5px;
 border-radius: 5px;
}

.ui1 .panel-options .navigator a:last-child{
 -moz-border-radius-topright: 5px;
 -moz-border-radius-bottomright: 5px;
 
  -webkit-border-radius: 5px;
 border-radius: 5px;
 
 border-left:none;
 border-right: solid 1px #353535;
}

.ui1 .panel-options .navigator a:hover{
 background-color:#d45500; 
}



.ui1 form { 
 font:normal 10pt "Helvetica", "arial", "sans-serif";
 margin:0.5em; padding:1em; 
 background: -moz-linear-gradient(0% 100% 90deg, #1A1A1A, #353535 100%); 
 background: -webkit-gradient(linear, left top, left bottom, from(#353535), to(#1A1A1A)); 
  
 border: solid 0.5em #000000;
 color: #fff;
 
 -moz-box-shadow:0px 0px .5em #353535;
    -webkit-box-shadow:0px 0px .5em #353535;
    box-shadow:0px 0px .5em #353535;
 
 -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
 border-radius: 5px;
 
 line-height:0.1em;
}

.ui1 form *{
 margin:0.5em auto; 
}

.ui1 fieldset{
 border: none;
}

.ui1 label { 
 display:block; 
 width:30%; 
 float:left; 
 text-shadow:1px 1px 1px #000;
 font-weight:bold;
 margin-top:1em;
}

.ui1 label a{
 text-decoration:none;
 color:#fff;
 margin-left:0.3em;
}

.ui1 label a span{

 position:absolute;
 width: 150px;
 height:auto;
 top: auto;
 left: auto;
 padding:0.2em;
 margin:-2em auto auto 5%;
 
 background: -moz-linear-gradient(0% 100% 90deg, #1A1A1A, #353535 100%); 
 background: -webkit-gradient(linear, left top, left bottom, from(#353535), to(#1A1A1A)); 
  
 border: solid 0.2em #fff;
 color: #fff;
 
 -moz-box-shadow:0px 0px .5em #353535;
    -webkit-box-shadow:0px 0px .5em #353535;
    box-shadow:0px 0px .5em #353535;
 
 -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
 border-radius: 5px;
 
 opacity: .75;
    -moz-opacity: .75;
    filter:alpha(opacity=75);
 
 display: none;
}

.ui1 label a:hover span{
 display:block;
}

.ui1 input, .ui1 textarea, .ui1 select,.ui1 .button{
 
 padding:0.2em;
 
 border: solid 1px #ffffff;
 
 -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
 border-radius: 6px;
 
 background-color: #fff;
 
}

.ui1 .button{
 color:#fff;
 height:15px;
 width:auto;
 text-align: center;
}

.ui1 input:hover, .ui1 input:focus,.ui1 textarea:hover,.ui1 textarea:focus, .ui1 select:hover, .ui1 select:focus, .ui1 .button:hover
{
 -moz-box-shadow:0px 0px .5em #339aff;
    -webkit-box-shadow:0px 0px .5em #339aff;
    box-shadow:0px 0px .5em #339aff;
 
 border:solid 1px #339aff;
 color:#339aff;
}

.ui1 input[type='submit'], .ui1 input[type='reset'], .ui1 .button{
 background: -moz-linear-gradient(0% 100% 90deg, #1A1A1A, #353535 100%); 
 background: -webkit-gradient(linear, left top, left bottom, from(#353535), to(#1A1A1A)); 
 color:#fff;
 -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
 border-radius: 3px;
}

.ui1 input[type='submit']:hover, .ui1 input[type='reset']:hover, .ui1 .button:hover{
 text-shadow:0px 0px 5px #339aff;
 color: #fff;
}

.ui1 input[type='reset']{
 float:right;
}

/*====================table 1====================*/
.table1 thead tr{ 
 background: -moz-linear-gradient(0% 100% 90deg, #1A1A1A, #353535 100%); 
 background: -webkit-gradient(linear, left top, left bottom, from(#353535), to(#1A1A1A)); 
}

.table1 th{
 color:#808080;
 text-shadow:1px 1px 1px #000;
 padding:.5em;
 font-weight: bold;
}

.table1 th:hover{
 background: -moz-linear-gradient(0% 100% 90deg, #353535, #d45500 100%);
 background: -webkit-gradient(linear, left top, left bottom, from(#d45500), to(#353535)); 
 color: #fff;
 -moz-box-shadow:0px 1px 2px #fff;
    -webkit-box-shadow:0px 1px 2px #fff;
    box-shadow:0px 1px 2px #fff;
}

.table1 th{
 color:#808080;
 text-shadow:1px 1px 1px #000;
 padding:.5em;
 font-weight: bold; 
 line-height:1em; 
 vertical-align: middle;
}

.table1 th .arrows{
 margin:0;
 padding:0;
 width:1em; 
 float:right;
 border:solid 1px #aaa; 
 text-align:center;
 background: -moz-linear-gradient(0% 100% 0deg, #2A2A2A, #454545 100%);  
 -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
 border-radius: 7px;
}

.table1 th .arrows a{
 display:block;
 margin:0;
 padding:0; 
 color: #aaa; 
 height:0.5m;
 font-weight:bold;
 text-decoration:none;
 width:100%;
}

.table1 th .arrows a.up{
 -moz-border-radius-topleft: 7px;
 -moz-border-radius-topright: 7px;
  -webkit-border-radius: 7px;
 border-radius: 7px;
}

.table1 th .arrows a.down{
 -moz-border-radius-bottomleft: 7px;
 -moz-border-radius-bottomright: 7px;
  -webkit-border-radius: 7px;
 border-radius: 7px;
}

.table1 th .arrows a:hover, .table1 th .arrows a:focus , .table1 th .arrows a:active{
 color:#fff;
 background-color:#d45500;
 text-shadow:solid 1px #fff;
}

.table1 th:hover{
 background: -moz-linear-gradient(0% 100% 90deg, #353535, #d45500 100%) repeat scroll 0 0 transparent;
 color: #fff;
 -moz-box-shadow:0px 1px 2px #fff;
    -webkit-box-shadow:0px 1px 2px #fff;
    box-shadow:0px 1px 2px #fff;
}

.table1 th:first-child{
 width:30px; 
 color:#808080;
}

.table1 tr td{
 padding:.5em;
 border: solid 1px #888;
}

.table1 tr td:first-child{
 background: -moz-linear-gradient(0% 100% 0deg, #1A1A1A, #353535 100%);
 background: -webkit-gradient(linear, left top, left bottom, from(#353535), to(#1A1A1A)); 
 text-align: center;
 color:#808080;
 border: none; border-right:solid 1px #fff;
}

.table1 tr.odd{
 background-color:#cccccc;
}

.table1 tr.even{
 background-color:#ececec;
}

.table1 tbody tr:hover{
 background-color:#aaccff;
 -moz-box-shadow:0px 1px 3px #888;
    -webkit-box-shadow:0px 1px 3px #888;
    box-shadow:0px 1px 3px #888;
}

.table1 tbody tr:hover td:first-child{
 background: -moz-linear-gradient(0% 100% 0deg, #d45500, #353535 100%);
 background: -webkit-gradient(linear, left top, right top, from(#d45500), to(#353535)); 
 color: #fff;
 -moz-box-shadow:0px 1px 2px #fff;
    -webkit-box-shadow:0px 1px 2px #fff;
    box-shadow:0px 1px 2px #fff;
}

.table1{
 border-collapse: collapse;
 border: none; 
 width:100%;
}

.table1 thead tr{ 
 background: -moz-linear-gradient(0% 100% 90deg, #1A1A1A, #353535 100%); 
 background: -webkit-gradient(linear, left top, left bottom, from(#353535), to(#1A1A1A)); 
}

.table1 th{
 color:#808080;
 text-shadow:1px 1px 1px #000;
 padding:.5em;
 font-weight: bold;
}

.table1 th:hover{
 background: -moz-linear-gradient(0% 100% 90deg, #353535, #d45500 100%);
 background: -webkit-gradient(linear, left top, left bottom, from(#d45500), to(#353535)); 
 color: #fff;
 -moz-box-shadow:0px 1px 2px #fff;
    -webkit-box-shadow:0px 1px 2px #fff;
    box-shadow:0px 1px 2px #fff;
}

.table1 th:first-child{
 width:30px; 
 color:#808080;
}

.table1 tr td{
 padding:.5em;
 border: solid 1px #888;
}

.table1 tr td:first-child{
 background: -moz-linear-gradient(0% 100% 0deg, #1A1A1A, #353535 100%);
 background: -webkit-gradient(linear, left top, left bottom, from(#353535), to(#1A1A1A)); 
 text-align: center;
 color:#808080;
 border: none; border-right:solid 1px #fff;
}

.table1 tr.odd{
 background-color:#cccccc;
}

.table1 tr.even{
 background-color:#ececec;
}

.table1 tbody tr:hover{
 background-color:#aaccff;
 -moz-box-shadow:0px 1px 3px #888;
    -webkit-box-shadow:0px 1px 3px #888;
    box-shadow:0px 1px 3px #888;
}

.table1 tbody tr:hover td:first-child{
 background: -moz-linear-gradient(0% 100% 0deg, #d45500, #353535 100%);
 background: -webkit-gradient(linear, left top, left bottom, from(#d45500), to(#353535)); 
 color: #fff;
 -moz-box-shadow:0px 1px 2px #fff;
    -webkit-box-shadow:0px 1px 2px #fff;
    box-shadow:0px 1px 2px #fff;
}

body{
 background: #676767 url('../img/body_background.png') repeat-x;
}

#content{
 margin:auto;
 padding:0;
 width:950px;
 font: normal 1em sans-serif; 
}

#body{
 background: #676767 url('../img/body_background.png') repeat-x; 
}

#footer{
 background-color: #000;
 color: #fff;
 text-align:right;
 padding-right:0.3em;
 }
 
#home_text{
 background: #999999 url('../img/home_text.png') no-repeat;
 width: 570px;
 padding-top: 80px;
 margin: 2em;
 text-align: justify;
}

#home_text img{
  float:left;
 }
 
#home_text p{
  margin: 0.7em;
 }

Ok ya tenemos nuestra vista modificada, y ahora se verá así:

Bueno ya tenemos las vistas pasemos a crear los modelos. Llamamos modelos a las clases que sirven para interactuar con las tablas de la base de datos. Kumbiaphp utiliza para interactuar con los datos el Patrón ActiveRecord, cuya idea es que cada registro es un objeto que tiene por atributos las mismos campos de la tabla a la cual hace referencia.
Creamos un archivo denominado usuario.php dentro de la carpeta /myprojectmanager/app/models/ y le agregaremos el siguiente código:

class Usuario extends ActiveRecord {
  
 }

Ahora crearemos el controlador usuario_controller.php, dicho controlador lo ubicaremos en /myprojectmanager/app/controllers/, junto con el siguiente código:

class UsuarioController extends ApplicationController {
/**
Cargamos los modelos ha utilizar
*/
  public $models=array("usuario");

Accion o metodo registrar

/**
Accion que registra los usuarios
*/  
public function registrar() {
/**
Comprobamos si hemos enviado datos al llamar a la accion, si se han enviado datos
se crea un objeto de clase Usuario, que en realidad es un registro de la tabla.
*/
   if($this->has_post("usuario")){
if ($this->has_post("captcha")) {
/** 
Verificamos si se mando la variable captcha por metodo post     
Instanciamos secureimage
*/
    $img = new Securimage();
/**
Comprobamos si el codigo enviado es valido
*/
    $valid = $img->check( $this->post('captcha') );

    if($valid == true){
/** 
creamos un objeto que se carga en base a los datos enviados por el metodo post
*/
    $obj=new Usuario($this->post("usuario"));
/**
el metodo save() de la clase ActiveRecord, 
que es de la cual se heredan todas las clases de los modelos,
devuelve true si la operacion fue exitosa, 
en este caso comprobamos si retorna falso indica que hubo un error,
sino cargaremos nuestra vista login
*/
    if(!$obj->save()){ 
     Flash::error("Hubo un error en el registro del usuario");
    }else{
     Flash::success("Registro exitoso");
     $this->redirect("usuario/login","3");
    }
   }
                    }
  }

Accion o metodo login

 /**
  *autentica el ingreso a la aplicacion
  *
  */
 public function login() {
  /**
   * comprobamos si el metodo post tiene la variable @usuario
   */
  if($this->has_post('usuario')){

   /**
    *asignamos los datos a sus respectivas variables
    *y le quitamos los espacios en blanco
    *asi mismo por seguridad eliminamos ciertos caracteres y ciertos
    *caracteres
    */
   $username= mysql_real_escape_string(trim($this->post('usuario.email')));
   $password= mysql_real_escape_string(trim($this->post('usuario.pwd')));

   /**
    * instanciamos un objeto de la clase Auth
    * la cual nos ayuda a gestionar las sesiones de usuarios
    * los parametros son:
    * tipo de autenticacion
    * clase que interactuca con la BD
    * datos para la autenticacion
    */
   $auth = new Auth("model", "class: usuario", "email: $username", "pwd: $password");

/*
    * validamos la autenticacion
    */
   if ($auth->authenticate()) {
    /*
     * si fue correcta mostraremos la vista
     * workspace
     */
    $this->redirect("usuario/workspace");
   } else {
    /*
     * si hubo un error mostraremos un mensaje
     */
    Flash::error(htmlentities('Su email o clave no son correctas'));
    $this->usuario = $this->post('usuario');
   }  }
 }

 }

Tenemos el modelo y el controlador nos falta crear la vista, crearemos un archivo registrar.phtml dentro de /myprojectmanager/app/views/usuario (se debe crear una carpeta usuario dentro de views). En esta vista utilizaremos el siguiente código:

<?php
 View::content();
?>


Nombre
 


Mail
 


Password
 


Digite el texto de la imagen
 

 
 
'="" captcha="" href="#" onclick="document.getElementById('captcha').src = ''+ Math.random(); return false" >
<?php echo img_tag( "refresh.gif", "alt: Reload Image", "onClick: 'this.blur()' " ) ?>

Esto nos dará una vista similar a esta:

Probaremos lo hecho hasta ahora, ingresamos los datos, algo asi:

En caso que no hemos escrito bien el texto de la imagen tendremos un error similiar al siguiente:

Si todo fue correcto entonces nos enviará al login de la aplicación.

El codigo de la vista login.phtml es :

<?php
View::content()
?>


Usuario



Contraseña


</form>

Espero ser lo suficiente explicativo, por si no han visto los anteriores posts:

Descarga avance de la aplicacion

DEMO

Desarrollo y otras inquietudes

Pages

martes, 30 de noviembre de 2010

Kumbiaphp: Creacion de registro de usuario y login en la aplicación [Actualizado]

No hay comentarios:

Publicar un comentario

Buscar este blog

Google Translator

Lo mas visto

Apoyame

Entradas

Etiquetas

Mi lista de blogs

Gana dinero con