jueves, noviembre 06, 2014

Una aplicación web (CRUD) con Yii

 

 

Instalar Yii en Ubuntu


sudo apt-get install php5-mcrypt


wget -nd https://github.com/yiisoft/yii/releases/download/1.1.15/yii-1.1.15.022a51.tar.gz
tar -xzvf yii-1.1.15.022a51.tar.gz
rm yii-1.1.15.022a51.tar.gz
sudo mv yii-1.1.15.022a51 /var/www/html/yii



Verificar los requisitos accediendo a la página web:
http://localhost/yii/requirements/

Crear la estructura de la aplicación

cd /var/www/html/yii
framework/yiic webapp miapp
chmod o+w miapp/protected/models/
chmod o+w
miapp/protected/views/
chmod o+w
miapp/protected/controllers/ 

Instalar giix

wget -nd http://www.yiiframework.com/extension/giix/files/giix-1.9.2.zip
mkdir giix
cd giix/
unzip ../giix-1.9.2.zip 

rm ../giix-1.9.2.zip
cp -r giix-co* ../miapp/protected/extensions/
 


Modificar la configuración del fichero protected/config/main.php, para indicar el nombre de la aplicación, idioma español, que se importe la extensión de giix, habilitar gii y establecer la configuración de la base de datos (comentamos sqlite y configuramos Mysql):

'name'=>'Nombre de mi App',
'language'=>'es',
'sourceLanguage' => 'en',
'charset' => 'utf-8',

...
'import'=>array(
        'application.models.*',
        'application.components.*',
        'ext.giix-components.*', // giix components
    ),

...
        'gii'=>array(
            'class'=>'system.gii.GiiModule',
            'password'=>'una clave para entrar a gii',
            'generatorPaths'=> array('ext.giix-core', ),
            'ipFilters'=>array('127.0.0.1','::1'),
        ),

...
        /*'db'=>array(
            'connectionString' => 'sqlite:'.dirname(__FILE__).'/../data/testdrive.db',
        ),
        // uncomment the following to use a MySQL database
        */
        'db'=>array(
            'connectionString' => 'mysql:host=localhost;dbname=mibasededatos',
            'emulatePrepare' => true,
            'username' => 'miusuario',
            'password' => 'clave',
            'charset' => 'utf8',
        ),


...
Podemos ver el prototipo creado en:
http://localhost/yii/miapp/


Generando código automáticamente con Giix


Tablas de ejemplo:

CREATE TABLE localizacion (
  id integer NOT NULL auto_increment PRIMARY KEY,
  localizacion varchar(100) DEFAULT NULL,
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


CREATE TABLE evento (
  id integer NOT NULL auto_increment PRIMARY KEY,
  idlocalizacion integer DEFAULT NULL COMMENT ,
  fecha datetime DEFAULT NULL,
  descripcion varchar(1000) DEFAULT NULL,
  FOREIGN KEY (idlocalizacion) REFERENCES localizacion (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


Accedemos a Gii en:
http://localhost/yii/miapp/index.php?r=gii

Para crear toda la gestión (CRUD) de una tabla ya creada previamente en mysql podemos realizar lo siguiente en Gii:

1.- Generamos el modelo (Giix Model Generator) correspondiente a nuestra tabla, para ello indicamos el nombre de la tabla (localizacion) y el de la clase modelo que ya se nos ofrece automáticamente (Localizacion), pulsamos 'preview' y por último 'generate'. Igual para la tabla evento.

2.- Creamos la gestión del modelo (Giix CRUD Generator), para ello tendremos que indicar el modelo previamente creado: Localizacion y el controlador: localizacion. Como en la ocasión anterior pulsamos 'preview' y por último 'generate'. Igual para el modelo evento.


Veamos la gestión de la tabla funcionando:
http://localhost/yii/miapp/index.php?r=localizacion


Personalizando la aplicación

Menú y pie de página

Editamos el fichero protected/views/layouts/main.php y ahí podemos personalizar nuestro menú y pie de página según nuestras necesidades. Como crear una nueva opción de menú en función de si el usuario está o no identificado, que nos dará acceso de forma privada a la gestión de localizaciones y eventos:


    <div id="mainmenu">
        <?php
            if (Yii::app()->user->isGuest) {
                $this->widget('zii.widgets.CMenu',array(
                'items'=>array(
                    array('label'=>'Inicio', 'url'=>array('/site/index')),
                    array('label'=>'Sobre', 'url'=>array('/site/page', 'view'=>'about')),

                array('label'=>'Contactar', 'url'=>array('/site/contact')),                    array('label'=>'Conectar', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
                    array('label'=>'Desconectar ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)
                ),
                ));
            }
        else {
                $this->widget('zii.widgets.CMenu',array(
                'items'=>array(
                    array('label'=>'Inicio', 'url'=>array('/site/index')),
                    array('label'=>'Sobre', 'url'=>array('/site/page', 'view'=>'about')),

                array('label'=>'Contactar', 'url'=>array('/site/contact')),                    array('label'=>'Gestión', 'url'=>array('/site/page','view'=>'gestion')),
                    array('label'=>'Conectar', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
                    array('label'=>'Desconectar ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)
                ),
                ));           
        }

         ?>
    </div><!-- mainmenu -->

...
    <div id="footer">
        Copyright &copy; <?php echo date('Y'); ?> by Nacho.<br/>
        All Rights Reserved.<br/>

        <?php echo Yii::powered(); ?>
    </div><!-- footer -->


Personalizar la página de inicio, sobre, gestión, etc...

Estas páginas se encuentran en protected/views/site y editando por ejemplo el fichero index.php podremos personalizar los textos iniciales que aparecen al acceder a nuestra página web.

Crear una nueva página de gestión de los eventos y localizaciones, creamos un fichero llamado gestion.php dentro de protected/views/site/pages

<?php

$this->pageTitle=Yii::app()->name . ' - Gestión';
$this->breadcrumbs=array(
    'Gestión',
);
?>

<h1>Gestión</h1>

<?php echo CHtml::link('Localización', array('/localizacion/')); ?></br>
<?php echo CHtml::link('Evento', array('/evento/')); ?>


Usuarios y claves

Editamos el fichero protected/components/UserIdentity.php y ahí establecemos nuestros usuarios y claves:

public function authenticate()
    {
        $users=array(
            // username => password
            'nacho'=>'miclave',           
        );

...


Fuentes de información:
http://www.yiiframework.com/

sudo mv -i /etc/php5/conf.d/mcrypt.ini /etc/php5/mods-available/ - udo mv -i /etc/php5/conf.d/mcrypt.ini /etc/php5/mods-available/

lunes, noviembre 03, 2014

Primeros pasos con Yii 2 Framework

 

 

Instalar Yii 2


sudo apt-get install php5-mcrypt

cd /var/www/html/
sudo mkdir yii

sudo chown mi-usuario.www-data yii
chmod g+w yii/basic/models/
chmod g+w yii/basic/views/
chmod g+w yii/basic/controllers/
cd yii
wget -nd https://github.com/yiisoft/yii2/releases/download/2.0.0/yii-basic-app-2.0.0.tgz
tar -xzvf yii-basic-app-2.0.0.tgz
rm yii-basic-app-2.0.0.tgz
vi basic/config/web.php

'cookieValidationKey' => 'poner aquí una llave - texto al azar',

En ubuntu se produce un error por no detectar la librería de php mcrypt, para ello tendremos que:

sudo mv -i /etc/php5/conf.d/mcrypt.ini /etc/php5/mods-available/
sudo php5enmod mcrypt
sudo /etc/init.d/apache2 restart


Generando código con Gii

Configurar la BD editando el fichero basic/config/db.php con el siguiente contenido, la BD ya debe de estar creada:

<?php

return [
    'class' => 'yii\db\Connection',
    'dsn' => 'mysql:host=localhost;dbname=yii2basic',
    'username' => 'usuario',
    'password' => 'clave',
    'charset' => 'utf8',
];

ya podemos acceder a Gii en:
http://localhost/yii/basic/web/index.php?r=gii

Para crear toda la gestión (CRUD) de una tabla ya creada previamente en mysql podemos realizar lo siguiente en Gii:

1.- Generamos el modelo (Model Generator) correspondiente a nuestra tabla, para ello indicamos el nombre de la tabla (mitabla) y el de la clase modelo (Mimodel), pulsamos 'preview' y por último 'create'.

2.- Creamos la gestión del modelo (CRUD Generator), para ello tendremos que indicar el modelo previamente creado: app\models\Mimodel y un buscador y controlador: app\models\MimodelSearch y app\controllers\MimodelController. Como en la ocasión anterior pulsamos 'preview' y por último 'create'.


Veamos la gestión de la tabla funcionando:
http://localhost/yii/basic/web/index.php?r=mitabla



Fuentes de información:
http://www.yiiframework.com/doc-2.0
http://www.pannix.net/721/ubuntu_php_problem_json_and_mcrypt_missing_in_action/
sudo mv -i /etc/php5/conf.d/mcrypt.ini /etc/php5/mods-available/ sudo mv -i /etc/php5/conf.d/mcrypt.ini /etc/php5/mods-available/

Un editor para desarrollar aplicaciones web: Sublime text 3 y Brackets en Ubuntu

Sublime text 3


Instalación en Ubuntu:
 
sudo add-apt-repository ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get install sublime-text-installer 
 
Software adicional que necesitaremos para la extensiones:
 
sudo apt-get install imagemagick 
sudo apt-get install nodejs 
sudo apt-get install npm
sudo apt-get install python-flake8 
sudo apt-get install python-pip
sudo npm install -g jshint
sudo npm install -g csslint
sudo pip install pep257 
 
 
Para poder instalar extensiones utilizaremos Package Control, por lo que procederemos a su instalación. Abrimos la consola de Sublime text 3 con View->Show Console y pegamos lo siguiente:

import urllib.request,os,hashlib; h = 
'7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0';
 pf = 'Package Control.sublime-package'; ipp = 
sublime.installed_packages_path(); urllib.request.install_opener( 
urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = 
urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', 
'%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error 
validating download (got %s instead of %s), please try manual install' %
 (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
            

Esto puede cambiar según la versión, por lo que es buena opción visitar:
https://sublime.wbond.net/installation

Extensiones a instalar para python y javascript

Para instalar las extensiones pulsar: shift+CTRL+P y buscar Control Package: Install Package.

SublimePythonIDE
Sublimelinter
Sublimelinter-jshint
Sublimelinter-flake8
Sublimelinter-csslint
Sublimelinter-pep257
Djaneiro
Ternjs
GutterColor
Emmet

Atajos de teclado a destacar

CTRL + F: buscar
CTRL + H: buscar y remplazar
CTRL + P: cambiar entre los ficheros.
CTRL + R: saltar entre las clases y métodos del programa.

Selección de varias líneas y SHIFT + CTRL + L: edición simultanea de las líneas. Con CTRL + left o right se va al principio o al final de la línea.

CRTL + D: añadir a la selección y CTRL + K saltar selección para una edición simultanea posterior.

SHIFT+ ALT + ARRIBA o ABAJO: selección en columna.

ALT + .: cierra la etiqueta abierta.

CTRL + M: saltar a la llave o parentesis.




Brackets

Instalación:

sudo add-apt-repository ppa:webupd8team/brackets 
sudo apt-get update 
sudo apt-get install brackets