Cargando



Yii Framework 2.0 - Desarrollo de aplicaciones web

Veremos en este tutorial como configurar una web utilizando Yii 2.0 Avanzado.


ago 17 2015 13:58
Profesional

yii.jpg



Yii es un framework escrito en php para hacer mas agil y estándar el desarrollo de aplicaciones web empresariales. Su arquitectura basada en componentes, es muy adecuado para el desarrollo de aplicaciones que deberán soportar mucho tráfico, que requieran métodos de desarrollo estándar y bien documentados, este framework sirve para cualquier aplicación web como portales, sistemas de gestión empresariales, sistemas de gestión de contenidos (CMS), sitios web de ecommerce.


Algunas características respecto de otros framework


Utiliza el patrón MVC (Modelo/Vista/Controlador), a diferencia de otros framework separa cada componente en carpetas para una mejor orden y mantenimiento.
  • Generación de Código: Yii puede generar código CRUD a partir de un tabla de bases de datos, creando las consultas, listados y los formularios.
  • Soporte jQuery y Bootstrap framework integrado
  • Métodos de control de acceso incorporados de autenticación y autorización de roles
  • Incorpora un sistema de seguridad y prevención de ataques externo a la web.
  • Soporta widgets y extensiones desarrollados por la comunidad
  • Soporta el uso de plantillas de diseño


Instalación de Yii Framework


Existen dos versiones de Yii, una Básica y otra Avanzada. La versión básica los archivos de usuario y los de administrador están juntos, en la versión avanzada se separan en dos carpetas como sistemas independientes Frontend y Backend

Para instalar Yii 2.0, debemos descargar los archivos desde la web de Yii Framework 2.0 desde las siguiente url Yii 2.0 Básico y Yii 2.0 Avanzado.

Una vez descargado descomprimimos el archivo y copiamos la carpeta advanced en nuestro servidor local y lo renombramos con el nombre de nuestro proyecto web, en este caso lo lamamos yiidemo.

A continuación desde la terminal, deberemos instalar los archivos de la estructura de al web para ello ejecutamos lo siguiente:
sudo php init
Nos preguntara si queremos ejecutarlo en modo Desarrollo o Producción elegiremos Desarrollo y luego confirmamos, asi se copiará toda la estructura por defecto necesaria.

yii-2.jpg


Si vamos a la carpeta de la web yiidemo, veremos que se instalaron varias carpetas y las dos que contendrán los archivos de la web backend para el administrador y frontend para la web pública.

Podemos ver en un navegador el Backend desde la url:

http://localhost/yiidemo/backend/web/

yii-3.jpg


También podremos ver la plantilla de la home:

http://localhost/yiidemo/frontend/web/


Como vemos tiene algunas paginas de muestra pero el login o el registro de usuario no son funcionales ya que no conectan a ninguna base de datos, pero sirven de base de código para comenzar, ademas el diseño es responsivo.

A continuación crearemos la base de datos desde phpmyadmin la que denominaremos yiidemodb.

La tablapara el administrador tendrá la siguiente estructura
-- Estructura de tabla para la tabla `administrador`

--

CREATE TABLE IF NOT EXISTS `administrador` (
  `id` tinyint(3) NOT NULL,

  `usuario` varchar(50) DEFAULT NULL,
  `clave` varchar(50) DEFAULT NULL,

  `email` varchar(100) DEFAULT NULL
) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;


--

-- Volcado de datos para la tabla `administrador`
--


INSERT INTO `administrador` (`id`, `usuario`, `clave`, `email`) VALUES

(1, 'admin', 'admin', 'demo@gmail.com');



A continuación deberemos configurar enlazar la base de datos con Yii para ello vamos la carpeta /common/config y abrimos el archivo main_local.php, aqui iran las configuraciones comunes tanto para el backend como el frontend


<? return [

    'class' => 'yii\db\Connection',
    'dsn' => 'mysql:host=localhost;dbname=yiidemodb',

    'username' => 'root',
    'password' => '',

    'charset' => 'utf8',
]; ?>
A continuación deberemos crear el modelo, el controlador y la vista del administrador, para ello utilizaremos la URL: http://localhost/yii...index.php?r=gii


yii-5.jpg



Después de definir que tabla queremos generar el modelo pulsamos el boton Preview para ver como quedaría el archivo y luego Generate para generar el código.

A continuación vamos a Crud generator para crear el código e vista, controlador y funcionalidades de mínimas para interactuar con la tabla. CRUD es la sigla de Crear, Obtener, Actualizar y Borrar.

yii-6.jpg


En el crud deberemos definir las rutas del model y el controlador que se creara, ademas podremos añadir un modelo para búsquedas.

Model Class: backend\models\Administrador
Search model class: backend\models\Administrador\AdministradorBuscar
Controller class: backend\controllers\AdministradorController

Luego presionamos Preview y Generate

A continuación podemos probar el crud que generamos desde la siguiente url
http://localhost/yii...r=administrador

yii-7.jpg


A continuación vamos a la carpeta \backend\config y abrimos el archivo main.php, donde modificaremos la siguiente linea de código:
'identityClass' => 'common\models\User'
Cambiamos por nuestro modelo de administrador
'identityClass' => backend\models\Administrador
Indicamos que para loguearnos en el backend usaremos el modelo Administrador que se encuentra en la ruta especificada.

A continuación vamos a la carpeta common\models y copiamos el archivo LoginForm.php en la carpeta backend\models, de esta manera separamos el login que esta en forma común para el backend y el frontend.

El controlador que invoca el login es SiteController.php.php, deberemos abrir el archivo y modificar la línea:
use common\models\LoginForm;
Por la linea:
use backend\models\LoginForm;
De esta forma al ser enviado el formulario buscara LoginForm.php en backend\models\Administrador como definimos más arriba.

A continuación debemos modificar el LoginForm para adaptarlo al modelo administrador de la siguiente manera:
<?php
namespace backend\models;


use Yii;

use yii\base\Model;

class LoginForm extends Model
{


//Campos del formulario vista

    public $username;
    public $password;

    public $rememberMe = true;

    private $_user;

    public function rules()
    {

        return [
            // reglas de datos seran ambos requeridos

            [['username', 'password'], 'required'],
            // recordarme sera booleano 0 o 1

            ['rememberMe', 'boolean'],
            // passwordsera validado por la función validatePassword()

            ['password', 'validatePassword'],
        ];

    }

   //funcion para validar clave
    public function validatePassword($attribute, $params)

    {
                 $user = $this->getUser();

        
            if (!$user || !$user->validatePassword($this->password)) {

                $this->addError($attribute, 'Incorrect username or password.');
            }

        }


 

    public function login()
    {

      if ($this->validate()) {
    echo 'hola';

    return Yii::$app->user->login($this->getUser(), $this->rememberMe ? 3600 * 24 * 30 : 0);
       } else {

            return false;
        }

    }

    //funcion que busca un usuario por su nombre de usuario
    protected function getUser()

    {
        if ($this->_user === null) {

   //si existe obtiene un array con todos los datos
          $this->_user = Administrador::findByUsername($this->username);

       }


      return $this->_user;

    }
}


?>
A continuación modificamos el modelo Administrador generado, y le añadiremos IdentityInterface que es una clase que proporciona varias funciones de seguridad avanzada para control de acceso. En este caso nuestro ejemplo es sencillo pero debemos tenerlas implementadas aunque no las utilicemos.
<?php


namespace backend\models;


use Yii;


class Administrador extends \yii\db\ActiveRecord implements \yii\web\IdentityInterface


{

   //tabla a utilizar generada
    public static function tableName()

    {
        return 'administrador';

    }

   //reglas de campos
    public function rules()

    {
        return [

            [['usuario', 'clave'], 'string', 'max' => 50],
            [['email'], 'string', 'max' => 100]

        ];
    }


  //Campos de la tabla

    public function attributeLabels()
    {

        return [
            'id' => 'ID',

            'usuario' => 'Usuario',
            'clave' => 'Clave',

            'email' => 'Email',
        ];

}

//función predefinida en IdentityInterface para buscar usuario por nombre   
     public static function findByUsername($username)

    {
        return static::findOne(['usuario' => $username]);

    }

/función predfinida en IdentityInterface para buscar clave  
public function validatePassword($password)

    {
        return static::findOne(['clave' => $password]);

    }
   

//función predefinida en IdentityInterface para buscar usuario por id  
    public static function findIdentity($id)

    {
        return static::findOne($id);

    }
   

//función predefinida en IdentityInterface para buscar usuario por marcador o señal  
     public static function findIdentityByAccessToken($token, $type = null)

    {
      //  return static::findOne(['access_token' => $token]);

    }

//Devuelve el ID de usuario
public function getId()

    {
        return $this->id;

    }
//Devuelve una clave que se puede utilizar para comprobar la validez de un ID

public function getAuthKey()
    {

      //  return $this->auth_key;
}


//Valida la clave devuelta por la funcion anterior.


  public function validateAuthKey($authKey)

    {
        //return $this->getAuthKey() === $authKey;

    }   
}
A continuación nos que cambiar en el diseño en backend\view\layout, abrimos el archivo main.php
Buscamos las lineas de código:
//Modificamos el nombre de la web My Company
    NavBar::begin([

        'brandLabel' => 'My Company',
        'brandUrl' => Yii::$app->homeUrl,

        'options' => [
            'class' => 'navbar-inverse navbar-fixed-top',

        ],
]);


'brandLabel' => 'My Company',

Cambiamos por

'brandLabel' => 'Mi Demo Yii',


//Si estoy logueado muestro el enlace Login

if (Yii::$app->user->isGuest) {
        $menuItems[] = ['label' => 'Login', 'url' => ['/site/login']];

} else {
//Sino estoy lohueago mostrare otros enlaces en el menú

        $menuItems[] = [
            'label' => 'Logout (' . Yii::$app->user->identity->username . ')',

            'url' => ['/site/logout'],
            'linkOptions' => ['data-method' => 'post']

        ];

    }
Aquí cambiamos el usuario
'label' => 'Logout (' . Yii::$app->user->identity->username . ')',
Cambiamos por nuestro campo usuario
'label' => 'Logout (' . Yii::$app->user->identity->usuario . ')',
Finalmente podremos loguearnos:
http://localhost/pro...mo/backend/web/
  • Usuario admin
  • Clave admin



La pagina principal se modifica desde \backend\views\site.

En otro tutorial veremos como cambiar el diseño de la pagina principal, crear menús, enlazar páginas y añadir funcionalidades. Estar atentos y seguirme si os interesa.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X