CodeIgniter - Crear Proyecto con Netbeans

CodeIgniter (CI) es un framework para aplicaciones web de código abierto para crear sitios web dinámicos con PHP. «Su objetivo es permitir que los desarrolladores puedan realizar proyectos mucho más rápido que creando toda la estructura desde cero, brindando un conjunto de bibliotecas para tareas comunes, así como una interfaz simple y una estructura lógica para acceder esas bibliotecas.»

También hay que destacar que CodeIgniter es más rápido que muchos otros entornos. Incluso en una discusión sobre entornos de desarrollo con PHP, Rasmus Lerdorf, el creador de PHP, expresó que le gustaba CodeIgniter «porque es rápido, ligero y parece poco un entorno».

Fuente

Para configurar Netbeans para CI, debemos instalar su plugin, para lo cual nos vamos a “Tool -> Plugins”, aquí nos vamos a la pestaña “Settings y hacemos clic en “Add”, luego agregamos lo siguiente:

Name: CodeIgniter
URL: https://kenai.com/downloads/nbphpci/Latest_NetBeans730/updates.xml

Según la versión de Netbeans puede cambiar la URL, por ejemplo

• For NetBeans 7.2 use https://kenai.com/downloads/nbphpci/Latest_NetBeans720/updates.xml
• For NetBeans 7.2.1 use https://kenai.com/downloads/nbphpci/Latest_NetBeans721/updates.xml
• For NetBeans 7.3 use https://kenai.com/downloads/nbphpci/Latest_NetBeans730/updates.xml
• For NetBeans 7.3.1 use https://kenai.com/downloads/nbphpci/Latest_NetBeans731/updates.xml

La web donde podemos obtener esta información es:  https://kenai.com/projects/nbphpci/pages/NBInstall

                           

Luego simplemente hacemos clic en “OK”

Ahora nos vamos a la pestaña “Available Plugins” y hacemos clic en “Check for Newest” para que actualice el plugin de CodeIgniter. Con el plugin listo y actualizado, debemos buscar “PHP CI Framework Repository”, lo seleccionamos y damos clic en “install”.

Luego, al más estilo de Windows, lo instalamos del tipo “siguiente, siguiente y siguiente”. Finalizando, hacemos lo mismo con “PHP CI Framework”.

Finalmente debemos ir a “Tools -> Options” aquí nos dirigimos a la pestaña “PHP -> CodeIgniter”, aquí nos vamos a “Base Files”, agregamos el zip del framework descargado desde http://ellislab.com/codeigniter

Ya tenemos todo configurado, por lo que estamos listos para crear nuestro proyecto con el framework CI.

Leer más

PHP - JSON

JSON es un formato ligero de intercambio de datos que desde hace algún tiempo ha comenzado a usarse de una forma tan popular como se uso en su tiempo el XML. JSON es la abreviación de JavaScript Object Notación – Notación de Objetos de JavaScript – También es subconjunto del estándar ECMA 262 publicado en diciembre de 1999. El formato de JSON es ampliamente reconocido por una gran variedad de lenguajes como Java, PHP, JavaScript, C++, C# entre otros, la lista completa se puede consultar desde el sitio web de JSON.

Para muchos, es el compañero perfecto de Ajax. Al igual que XML, sirve para modelar y presentar datos, así que se puede combinar con todo tipo de aplicaciones como lectores RSS, Widgets de WordPress, Mods de Joomla, Gadgets y Badges en diferentes aplicaciones y servidores.

Esta constituido por dos estructuras perfectamente válidas en cualquier lenguaje de programación:

1. Una colección de pares nombre / valor
2. Una lista ordenada de valores

Fuente

Decodificar JSON desde array

Lo primero será crear un simple PHP, el cual contiene un array de prueba, y la transformación a JSON.

 1, 'dos' => 2, 'tres' => 3, 'cuatro' => 4, 'cinco' => 5);
    echo json_encode($numeros);
?>

Como resultado, obtendremos lo siguiente:

{"uno":1,"dos":2,"tres":3,"cuatro":4,"cinco":5}

Decodificar JSON desde MySQL

El segundo ejemplo, es crear un JSON desde datos obtenidos de una consulta a MySQL

Lo que hace el ejemplo, es en primer lugar conectarse a una base de datos, luego guarda los datos obtenidos en un array, finalmente lo toma y muestra en pantalla en formato JSON.

Como resultado obtenemos

[["uno","1"],["dos","2"],["tres","3"],["cuatro","4"],["cinco","5"]]

Codificar array en JSON

Aquí vemos lo inverso a lo hecho anteriormente, tenemos un arreglo con estructura JSON y lo decodificaremos para verlo en un array de PHP.

Leer más

YII - Rules Compare

Es muy probable que necesitemos comparar ciertos parámetros cuando estamos validando un formulario, por ejemplo, podemos querer validar password, entonces, pedimos escribir 2 veces la password, y luego comprobar que ambas son iguales, también podemos querer comparar fechas, por ejemplo, que la fecha de inicio nunca sea mayor a la fecha de término, sólo por nombrar algunas.

En YII, esto lo podemos validar a través del modelo, ya que en este existe la función rules, podemos leer sobre este en http://www.yiiframework.com/wiki/56/#hh7

Leyendo el enlace anterior, podemos darnos cuenta, que para comparar que la fecha de término sea mayor a la inicial, debemos hacer algo como lo siguiente:

array('fer_termino','compare','compareAttribute'=>'fer_inicio','operator'=>'>=','message'=>'Fecha de Término debe ser superior a Fecha de Inicio'),

Lo que hacemos, es que tomamos la fecha_termino, indicamos que lo compararemos con la fecha_inicio, luego indicamos que utilizaremos el operador '>=' (mayor que), si esta regla no se cumple, lanza el mensaje de error especificado en 'message'

Leer más

YII - Generar PDF

Al tener diferentes datos, es muy lógico que vamos a querer exportar esto a un formato, en este caso a PDF. Por suerte, YII trae algunas extensiones que nos facilitan mucho esto, ya que ocupan librerías de PHP para trabajar con PDF, como mpdf y html2pdf. 

La extensión que utilizaremos será yii-pdf, la cual la podemos descargar desde http://www.yiiframework.com/extension/pdf/ 

Al descargarla, debemos ubicar el directorio dentro de extensions, quedando: /protected/extensions/yii-pdf Luego debemos descargar las librerías que utiliza esta extensión, las podemos descargar desde: http://www.mpdf1.com/mpdf/download http://html2pdf.fr/en/download Estas las podemos ubicar en el directorio vendors (el directorio vendors lo debemos crear), quedando: /protected/vendors/mpdf /protected/vendors/html2pdf 

*Vendors es donde dejamos los elementos creados por terceros, que no son creados específicamente para el framework YII. 

En sí, no son necesarias ambas, sino, que la extensión nos permite utilizar cualquiera de las dos. Volviendo a la web de la extensión, copiamos el código en el fichero main.php, quedando algo como lo siguiente:

'components'=>array(
'ePdf' => array(
      		'class' => 'ext.yii-pdf.EYiiPdf',
		'params' => array(
             	'mpdf' => array(
'librarySourcePath' => 'application.vendors.mpdf.*',
                   	'constants' => array(
'_MPDF_TEMP_PATH' => Yii::getPathOfAlias('application.runtime'),
                    ),                    

		'class'=>'mpdf',
			
            ),
            'HTML2PDF' => array(
			'librarySourcePath' => 'application.vendors.html2pdf.*',
			'classFile' => 'html2pdf.class.php', 
            )
        ),
    ),
    //Resto del código

*El ejemplo que sale en la web, es mucho más extenso, pero elimine lo comentado. 

Ahora debemos configurar el controlador de donde queremos generar los PDF, según mi punto de vista, a diferencia del excel, en PDF no quiero generar todos los datos, sino, quiero generar fichas, por lo cual, se generará un PDF por registro, producto de lo anterior, debemos crear la función crearPDF, de la siguiente forma:

public function actionCrearPdf($id){
	$mPDF1 = Yii::app()->ePdf->mpdf();
	$mPDF1->WriteHTML(
		$this->render('pdf',array(
			'model'=>$this->loadModel($id), true
		))
	);
	$mPDF1->Output();
}

Luego, debemos crear una vista llamada pdf.php (puede tener otro nombre), por ejemplo, debería quedar algo como /protected/views/usuarios/pdf.php, este fichero debe componerse de la siguiente forma:

            
                RUN: 
                $model->rut-$model->dv
            
            
                Nombres:
                $model->nombre
            
            
                Apellidos:
                $model->apellidos
            
        
HERE;

$mpdf = new mPDF('utf-8','LETTER','','',15,15,25,12,5,7);
$mpdf->SetHeader(Yii::app()->name);
$mpdf->SetFooter('Pie de página');
$mpdf->SetWatermarkImage("/images/logo.jpg");
$mpdf ->showWatermarkImage = true;
$mpdf->WriteHTML($html);
$mpdf->Output('Ficha-Usuario_'.$model->rut.'-'.$model->dv.'.pdf','I');
exit;
?>

En el ejemplo anterior, tenemos una tabla que va mostrando los atributos del modelo, en este caso RUN,NOMBRE, APELLIDOS, luego empezamos a configurar mpdf. Con esto ya tenemos configurado para generar el PDF, ahora, agregaremos un ícono para acceder al PDF, para esto, vamos a la vista admin.php, y buscamos donde tenemos:

array (
	'class'=>'CButtonColumn',
),

y lo reemplazamos por:

array(
   'class'=>'CButtonColumn',
   'template' => '{view} {update} {delete} {pdf}',
   'buttons'=>array(
      'pdf' => array(
         'label'=>'Generar PDF', 
         'url'=>"CHtml::normalizeUrl(array('crearpdf', 'id'=>\$data->idusuarios))",
         'imageUrl'=>Yii::app()->request->baseUrl.'/images/pdf_icon.png', 
         'options' => array('class'=>'pdf'),
      ),
   ),
),

*Debemos tener una imagen de pdf, por ejemplo /images/pdf_icon.png 

Con esto, ya tenemos todo listo, y nos aparecerá un botón para acceder al pdf, como lo siguiente:

Leer más

PHP - Visualizar XML

El trabajo de ficheros XML en PHP no es muy complejo gracias a SimpleXML. La extensión SimpleXML proporciona un conjunto de herramientas muy simple y fácil de usar para convertir XML a un objeto que pueda ser procesado con selectores de propiedades normales e iteradores de arrays.

Para visualizar un XML, podemos seguir un ejemplo básico que aparece en la página de PHP, el cual es el siguiente:

Lo que hace el código, es verificar que existe el fichero text.xml, si existe, guarda en la variable $xml, la sentencia simplexml_load_file y luego lo imprime con un print_r. Por el contrario, si no existe el fichero, envía un mensaje advirtiendo.

Un ejemplo un poco más completo, es el siguiente que he hecho. En primer lugar, tenemos el fichero empleados.xml con el siguiente contenido:

    
        123
        Pedro
        Gerente IT
    
    
        456
        Juan
        Jefe de Proyectos
    
    
        789
        Diego
        Programador
    

Luego tenemos un fichero php, puede llamarse como queramos, en mi caso, se llama test.php

                    
                        
                            RUT
                            NOMBRE
                            CARGO
                        
                    
                    ';
                        foreach ($xml->trabajador as $empleados){
                            echo '
                                    ' . $empleados->rut . '
                                    ' . $empleados->nombre . '
                                    ' . $empleados->cargo . '
                                  ';
                        }
                    '
                ';
        }
    }
    else{
        exit('Ha ocurrido un error inesperado');
    }
?>

A grandes rasgos, lo que hace este código es validar el fichero xml, y validar que este correcto, si está todo correcto, mostramos el XML en una tabla.

Leer más

YII – Exportar datos a Excel

Es muy probable y lógico, que cuando tenemos muchos datos, vamos a querer exportarlos a una hoja de cálculo, como MS Office es lo más conocido, he elegido Excel para exportar, aunque al exportarlo a LibreOffice, no he visto inconvenientes. 

La opción más conocida es modificando las cabeceras, pero el problema que sucede con esto, es que al abrir el fichero, aparece un mensaje, en cambio al hacerlo con PHPExcel, se abre sin mensaje alguno. 

Lo primero que debemos hacer es ir a la página de PHPExcel para descargar el complemento http://phpexcel.codeplex.com/ Aquí podemos hacer clic en “Download” o también irnos al menú “Downloads” y descargar:

PHPExcel x.x.x - with Documentation in MS Office format

Una vez descargado, lo descomprimimos e ingresamos al directorio. Aquí encontraremos el directorio Classes, al cual también ingresamos. Finalmente aquí, encontraremos el directorio PHPExcel y un fichero php llamado PHPExcel.php. Estos 2 elementos los debemos copiar a /protected/vendors

*La carpeta vendors la debemos crear

Ahora ingresamos a /protected/config/main.php y dentro de components, debemos agregar:

'excel'=>array(
                'class'=>'application.vendors.PHPExcel',
            ),

Quedando algo parecido a lo siguiente:

'components'=>array(
        'excel'=>array(
            'class'=>'application.vendors.PHPExcel',
        ),
        //Resto del código

Seguido de esto, debemos crear el fichero LibroExcel (o el nombre que queremos) en:

/protected/vendors/PHPExcel/LibroExcel.php

Quedando una estructura similar a lo siguiente:

fillSheetByArray($objPHPExcel, $array);
            $this->nameSheet($objPHPExcel);
            
            // Redirect output to a client’s web browser (Excel2007)
  header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
            header('Content-Disposition:attachment;filename='.$nombreFichero.'.xlsx');
            header('Cache-Control: max-age=0');
            $objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel2007');
            $objWriter->save('php://output');
            exit;
        }

        function fillSheetByArray($objPHPExcel, $array = null)
        {
            $objPHPExcel->setActiveSheetIndex(0);
            $fila = 1;
            $columna = 0;
            foreach($array[0] as $titulo => $valor)
            {
                $objPHPExcel->getActiveSheet()->setCellValueByColumnAndRow($columna , $fila, $titulo);
                $columna++;
            }
            
            $fila++;

            foreach($array as $cliente)
            {
                $columna = 0;
                foreach($cliente as $dato)
                {
                    $objPHPExcel->getActiveSheet()->setCellValueByColumnAndRow($columna , $fila, $dato);
                    $columna++;
                }

                $fila++;
            }
        }

        function nameSheet($objPHPExcel)
        {
            $objPHPExcel->getActiveSheet()->setTitle('Simple');
        }
    }
?>

Teniendo LibroExcel.php listo, nos vamos al controlador que queremos generar el Excel, en mi caso, es el controlador de empleados, y luego creamos la función actionGenerateExcel(), de la siguiente forma:

public function actionGenerateExcel() { 
 Yii::import('application.vendors.LibroExcel');
 $model=Empleados::model()->findAll();
 $xlsx = new LibroExcel();
 $xlsx->generateExample($model);
}

*Empleados lo debemos cambiar por el nombre del modelo que estamos trabajando.

*LibroExcel() lo debemos cambiar si creamos la clase PHP con otro nombre.

Además, debemos darle privilegios en accessRules() de la siguiente forma:

array('allow',
 'actions'=>array('create','update','admin','delete','generateexcel'),
 'users'=>array('@'),
),

Finalmente lo que necesitamos es hacer en la vista que podamos crear el Excel, en mi caso, lo crearé en el menú lateral, de la vista admin.php

$this->menu=array(
 array('label'=>'Crear Empleados', 'url'=>array('create')),
 array('label'=>'Exportar a Excel', 'url'=>array('generateExcel')),
);

Con esto, ya podemos generar los ficheros Excel.

Leer más

Bootstrap - Creando proyecto Bootstrap

Primero que nada, debemos entender que es Bootstrap, y he encontrado las siguientes definiciones que me han parecido interesantes:

“Twitter Bootstrap es una colección de herramientas de software libre para la creación de sitios y aplicaciones web. Contiene plantillas de diseño basadas en HTML y CSS con tipografías, formularios, botones, gráficos, barras de navegación y demás componentes de interfaz, así como extensiones opcionales de JavaScript.

Es el proyecto más popular en GitHub1 y es usado por la NASA y la MSNBC junto a demás organizaciones”

http://es.wikipedia.org/wiki/Twitter_Bootstrap

“Bootstrap v.2.n es una herramienta para el desarrollo rápido y correcto de aplicaciones y sitios web. Fomenta las buenas prácticas de diseño y desarrollo web, conforme a estándares W3C. Permite diseñar webs adaptables y fluidas, visualizables correctamente en múltiples dispositivos (Responsive Web Design). Incluye una robusta base de HTML5, CSS3 y Javascript, también incluye elementos de diseño, tipografías, tablas, formularios, navegación, alertas, etc.”

http://internoma.github.io/tutorial-bootstrap/

Lo primero que debemos hacer es descargar Bootstrap desde http://twitter.github.io/bootstrap/ 

Una vez descargado, lo descomprimimos, aquí veremos la siguiente estructura:

Para utilizar los js de Bootstrap, debemos descargar jquery desde http://www.jquery.com y descargarlo. Es muy importante el orden en el que se agreguen estos a nuestro proyecto, ya que Jquery, siempre debe estar antes que los js de Bootstrap.

Ahora deberíamos crear un index y tener algo parecido a la siguiente estructura:

En el index, podemos generar un código bastante simple, para saber si nos está o no funcionando Bootstrap, el código es el siguiente:

    
        
        
        
        
        
    
    
        
        

            

                

                    

                        Ormeno
                        

                            
Inicio
                            
Quienes Somos
                            
Contacto
                        
                    
                
            
        
        
        
        
        
    

Luego, nos dirigimos al navegador, y deberíamos ver algo como lo siguiente:

Leer más

YII – Mostrar nombre en vez de ID en Foreign Key

En YII Podemos definir en el modelo lo que es llaves foráneas, esta vez, no explicaré mucho el proceso, producto que, si está definido el modelo de la base de datos, Yii lo tomará automáticamente, por ejemplo, si trabajamos con MySQL y motor InnoDB, y creamos todas las relaciones necesarias, para finalmente crear el modelo con GII, podemos ver una función como la siguiente en el modelo.

public function relations()
{
 // NOTE: you may need to adjust the relation name and the related
 // class name for the relations automatically generated below.
 return array(
  'idcliente0' => array(self::BELONGS_TO, 'Cliente', 'idcliente'),
  'idempleados0' => array(self::BELONGS_TO, 'Empleados', 'idempleados'),
  );
}

Está vez, utilizaré un ejemplo de Empleado, Cliente y Atención, en donde en Atención, se guardará la atención que hace el empleado al cliente, por lo cual, está tiene las llaves foráneas de los ID tanto de empleado como cliente.

Como podemos ver, en el modelo, está la función relations(), aquí tenemos un array con elementos, en este caso, los elementos que nombra las relaciones son:

• idcliente0
• idempleados0

Estos son los que debemos utilizar en la vista, en este caso, haré un ejemplo de como hacerlo en la vista admin.

En la vista admin, encontraremos lo siguiente:

widget('zii.widgets.grid.CGridView', array(
 'id'=>'atencion-grid',
 'dataProvider'=>$model->search(),
 'filter'=>$model,
 'columns'=>array(
  'idatencion',
  'hora',
  'motivo',
  'comentario',
  'idcliente',
  'idempleados',
  array(
   'class'=>'CButtonColumn',
  ),
 ),
)); 
?>

Por lo cual 'idcliente' y 'idempleados' lo debemos reemplazar y dejar de la siguiente forma:

widget('zii.widgets.grid.CGridView', array(
 'id'=>'atencion-grid',
 'dataProvider'=>$model->search(),
 'filter'=>$model,
 'columns'=>array(
  'idatencion',
  'hora',
  'motivo',
  'comentario',
  array(
   'name'=>'idcliente',
   'value'=>'$data->idcliente0->nombres',
  ),
  array(
   'name'=>'idempleados',
   'value'=>'$data->idempleados0->nombre',
  ),
  array(
   'class'=>'CButtonColumn',
  ),
 ),
)); 
?>;

Como podemos ver, eliminados lo necesario, y agregamos un array, el cual tiene el nombre, y valor. En valor indicamos 

$data->NOMBRE-RELACION->CAMPO-A-MOSTRAR

Leer más

YII – Visualizar o descargar imágenes desde CDetailView

CdetailView es lo que al menos, por defecto, nos muestra la información de nuestro modelo a través de index.php. Si vemos este fichero, nos encontraremos con un arreglo parecido a este:

widget('zii.widgets.CDetailView', array(
 'data'=>$model,
 'attributes'=>array(
  'idusuario',
  'usuario',
  'password',
  'avatar',
 ),
)); ?>

Aquí nos mostrará los datos respecto, pero si por ejemplo, en avatar, no queremos mostrar la ruta, nombre de la imagen, etc. Y queremos mostrar la imagen o permitir descargarla, debemos cambiar ese valor, por lo siguiente:

Para visualizarla

array(
 'label'=>'avatar',
 'type'=>'raw',
 'value'=> Chtml::image(Yii::app()->baseUrl.'/images/' . $model->avatar),
),

Para descargarla

array(
 'label'=>'avatar',
 'type'=>'raw',
 'value'=> Chtml::link(Yii::app()->baseUrl.'/images/' . $model->avatar),
),

La gran diferencia está entre Chtml::image y Chtml:link. Quedando más o menos de la siguiente manera

widget('zii.widgets.CDetailView', array(
 'data'=>$model,
 'attributes'=>array(
  'idusuario',
  'usuario',
  'password',
  array(
   'label'=>'avatar',
   'type'=>'raw',
   'value'=> Chtml::link(Yii::app()->baseUrl.'/images/' . $model->avatar),
  ),
 ),
)); ?>

Leer más

YII - Adjuntar (subir) fichero a través de un formulario

Algo que necesité al trabajar con YII, fue el tener que adjuntar un fichero en un formulario, ya que, era un sistema en el cual debía adjuntar una fotocopia (imagen) de su carnet de identidad (también conocido como DNI).

Para lograr esto, debemos abrir nuestro proyecto, y haber creado el CRUD, con esto, se nos genera “/protected/views/<nombre-elegido>/_form.php”. Dentro de este archivo veremos un segmento como el siguiente:

beginWidget('CActiveForm', array(
 'id'=>'empleados-form',
 'enableAjaxValidation'=>false,
)); ?>

Aquí simplemente debemos agregar una línea, quedan de la siguiente forma

beginWidget('CActiveForm', array(
 'id'=>'empleados-form',
 'enableAjaxValidation'=>false,
        'htmlOptions'=>array('enctype'=>'multipart/form-data'),
)); ?>

Luego, dentro del mismo fichero, debemos agregar la siguiente línea (la ubicación es a gusto).

Finalmente, nos toca la parte entretenida, y es que vamos a modificar el controlador. Aquí debemos trabajar con las funciones “actionCreate” y “actionUpdate”. En el ejemplo trabajaré con “actionCreate”, pero se debe agregar lo mismo en “actionUpdate”. Nuestro método viene por default de la siguiente forma.

public function actionCreate($id)
{
$model=$this->loadModel($id);

if(isset($_POST['Cliente']))
{
 $model->attributes=$_POST['Cliente'];
 
 if($model->save()){
     $this->redirect(array('view','id'=>$model->idcliente));
 }
}

$this->render('update',array(
 'model'=>$model,
));
}

He quitado una líneas que vienen comentadas. Debemos darnos cuenta que en este caso el nombre del modelo es “Cliente”, y su id  y primary key, es idcliente.

Lo que debemos hacer es agregar lo siguiente:

$model->fotocopiacarnet=CUploadedFile::getInstance($model,'image');
$model->fotocopiacarnet->saveAs('/path/' . CuploadedFile::getInstance($model,'image')->name);

En donde: 

• fotocopiacarnet es el campo (columna) de la base de datos, donde guardará el path del carnet.
• /path/ es la ruta donde dejamos las imagenes, por ejemplo, en mi caso es: /home/nicolas/public_html/proyectoYII/images/

En resumen, nos quedaría algo parecido a esto:

public function actionCreate()
{
 $model=new Cliente;

 if(isset($_POST['Cliente']))
 {
  $model->attributes=$_POST['Cliente'];
  $model->fotocopiacarnet=CUploadedFile::getInstance($model,'image');
   
  if($model->save()){
   $model->fotocopiacarnet->saveAs('/proyectoYII/images/' . CUploadedFile::getInstance($model,'image')->name);
  
   $this->redirect(array('view','id'=>$model->idcliente));
  }
 }

 $this->render('create',array(
  'model'=>$model,
 ));
}

Debemos tener en cuenta que “if($model->save())” por defecto no viene con { }, esto es debido a que por regla, cuando el if tiene sólo una línea de ejecución, no son necesario, pero como ahora tienen 2 líneas, es necesario hacerlo.

Leer más

PHP - Pasar variables sin usar form

La verdad es que este es un tema sumamente sencillo, uno siempre tiende a pensar en lo complejo, por lo que buscamos una solución sencilla. Para pasar variables sin usar un formulario, simplemente lo hacemos a través de GET, como bien sabemos, GET permite pasar variables a través de URL’s, por lo cual simplemente le damos los valores pertinentes. Por ejemplo:

Hoja 1: index.php

    
    

    
    Abril 2013

Hoja 2: imprimir.php

En la primera hoja (index.php) tenemos una estructura HTML, en la cual está el tag <a > el cual nos redirecciona a la hoja imprimir.php, la diferencia está en que aquí les pasamos las variables que nosotros deseamos.

En el caso de la hoja 2 (imprimir.php), recepcionamos las variables en otras variables ($ano y $mes) y luego las imprimimos con echo, claro está, que si queremos, podemos imprimirlas directamente.

Leer más

Grails - Conexión a una base de datos

Si bien es cierto Grails nos provee de una base de datos, esta es sumamente básica, por lo que generalmente trabajaremos con una base de datos diferente, por ejemplo PostgreSQL, MySQL, Oracle, etc.

Por suerte, gracias a lo que nos ofrece, hacer esto en Grails, no es para nada complicado. En primero lugar creamos la aplicación y luego creamos una base de datos, en este caso lo haremos en Mysql:

$ grails create-apps nombre_aplicacion
$ mysql -u root -p
//Ingresar contraseña
create database testgrailsdb
quit

O también podemos hacerlo un poco más fácil si es que utilizamos un administrador como PhpMyAdmin.

Ahora debemos descargarnos el conector que hará la conexión con la base de datos, en este ejemplo utilizaré MySQL, para esto vamos a http://dev.mysql.com/downloads/connector/j/ y lo dejamos en el directorio lib, si estas en Netbeans lo dejas en Libraries.

Luego creamos un dominio, le creamos atributos y generamos el control y la vista para este. Para hacer esto debemos estar dentro del directorio de nuestra aplicación.

$ grails create-domain-class Persona
$ nano grails-app/domain/
//Agregamos los campos que deseemos, por ejemplo
class Personas {
    String nombre
    String apellido
 
static constraints = {
    }
}
//Ahora generamos el controlador y la vista para esto
grails generate-all Personas

Una vez terminado todo esto debemos ir al fichero DataSource.groovy.

grails-app/conf/DataSource.groovy

O si es como en mi caso, que utilizan Netbeans como IDE de desarrollo, deben ir a:

Configuration/DataSource.groovy

Una vez dentro de este fichero, encontraremos varias líneas de código, parecido a esto:

dataSource {
    pooled = true
    driverClassName = "org.h2.Driver"
    username = "sa"
    password = ""
}
hibernate {
    cache.use_second_level_cache = true
    cache.use_query_cache = false
    cache.region.factory_class = 'net.sf.ehcache.hibernate.EhCacheRegionFactory'
}
// environment specific settings
environments {
    development {
        dataSource {
            dbCreate = "create-drop" // one of 'create', 'create-drop', 'update', 'validate', ''
            url = "jdbc:h2:mem:devDb;MVCC=TRUE"
        }
    }
    test {
        dataSource {
            dbCreate = "update"
            url = "jdbc:h2:mem:testDb;MVCC=TRUE"
        }
    }
    production {
        dataSource {
            dbCreate = "update"
            url = "jdbc:h2:prodDb;MVCC=TRUE"
            pooled = true
            properties {
               maxActive = -1
               minEvictableIdleTimeMillis=1800000
               timeBetweenEvictionRunsMillis=1800000
               numTestsPerEvictionRun=3
               testOnBorrow=true
               testWhileIdle=true
               testOnReturn=true
               validationQuery="SELECT 1"
            }
        }
    }
}

El cual debemos modificarlo y dejar algo parecido a esto:

dataSource {
    pooled = true
    driverClassName = 'com.mysql.jdbc.Driver'
    dbCreate = 'update'
    username = "nombreusuario"
    password = "contraseña"
}
hibernate {
    cache.use_second_level_cache = true
    cache.use_query_cache = false
    cache.region.factory_class = 'net.sf.ehcache.hibernate.EhCacheRegionFactory'
}
// environment specific settings
environments {
    development {
        dataSource {
            url = "jdbc:mysql://localhost:3306/nombredb" // one of 'create', 'create-drop', 'update', 'validate', ''
            username = "nombreusuario"
            password = "contraseña"

        }
    }
    test {
        dataSource {
            url = "jdbc:mysql://localhost:3306/nombredb" // one of 'create', 'create-drop', 'update', 'validate', ''
            username = "nombreusuario"
            password = "contraseña"
        }
    }
    production {
        dataSource {
            url = "jdbc:mysql://localhost:3306/nombredb" // one of 'create', 'create-drop', 'update', 'validate', ''
            username = "nombreusuario"
            password = "contraseña"
            }
        }
    }
}

Este ejemplo mostramos como conectarnos a MySQL, pero la base es muy similar para otros motores de base de datos.


Como dato, dentro de las clases encontramos “Static constraints” dentro de este tenemos harto para jugar, por ejemplo hacer que sea “not null” “unique”, entre otros, ejemplo básico de esto es:

class Personas {
    String nombre
    String apellido
   
    static constraints = {
nombre(unique: true, blank: false)
apellido(blank:false)
    }
}

Leer más

HTML 5 - Inducción

HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5 también es un termino de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript.

La versión anterior y más usada de HTML, HTML4, carece de características necesarias para la creación
de aplicaciones modernas basadas en un navegador. El uso fuerte de Javascript ha ayudado a mejorar esto, gracias a frameworks como jQuery,1 jQuery UI2, Sproutcore3, entre otros.

Flash en especial ha sido usado en reemplazo de HTML para desarrollar web apps que superaran las habilidades de un navegador: Audio, video, webcams, micrófonos, datos binarios, animaciones vectoriales, componentes de interfaz complejos, entre muchas otras cosas. Ahora HTML5 es capaz de hacer esto sin necesidad de plugins y con una gran compatibilidad entre navegadores.

Si queremos saber si nuestro web browser es compatible con HTML 5, les recomiendo que accedan a este link: http://caniuse.com/#cats=HTML5 en el cual podrán ver la compatibilidad.

Bueno, sin más preambulos y sin tanta explicación de las cosas, intentaré realizar prácticas sencillas. Les dejare Drag & Drop y la inserción de videos que me parecieron interesantes, obviamente existen muchas otras mejoras, pero al menos aquí se podrán formar una idea.

Drag & Drop

Para el que no sepa que es esto, esto significa “Arrastrar y Soltar”, lo cual a mi parecer es un toque fabuloso de HTML 5. Para lo primero que debemos  hacer es crear el elemento que podrá ser arrastrado, esto se lográ con el atributo draggable="true, además de agregarle un evento script, una forma sencilla es con ondragstart. En este ejemplo trabajaremos con un párrafo (<p></p>), pero bien lo propiamo hacer con otro elemento como un div o directamente una imagen. Esto nos deberia estar quedando de la siguiente forma:

Ahora dentro del párrafo le agregaremos una imagen a arrastrar, nos debería quedar de la siguiente forma:

Ahora crearemos un contenedor el cual tendrá la función de recibir lo que nosotros arrastremos. Este debe tener los atributos “ondrop”, “ondragenter” y “ondragover”.



El atributo “ondrop” permitirá llamar la función Javascript para llevar la tarea una vez que el elemento ha sido soltado sobre el contenedor. Dado que el comportamiento por defecto del navegador es cancelar soltados, devolver false en los atributos “dragenter” y “dragover” permitirá el movimiento. El contenedor también va dentro del body.

Arrastrar

El estilo aplicado es para que diferenciemos el contenedor.

Ya con esto tenemos todo el body listo, ahora solo nos queda introducir en el head (<head></head>) las funciones Javascript, crearemos 2 funciones, la función drag que es para tomar el elemento y la función drop que es para dejar el elemento tomado.

Con esto ya tenemos todos los elementos necesarios para crear un elementos arrastrable, obviamente esta una forma muy sencilla de hacerlo.

Agregar un video

Ahora la inserción de un video a nuestra página web ahora lo hacemos gracias al tag video. Un sintaxis simple seria:

Lo que hacemos aquí es que la opción controls nos permite justamente eso, controlar el video, reproducir, pausar, adelantar, retroceder, subir o bajar el volumen. En cambio src es donde indicamos la ruta del video. Para darle un ancho y alto, lo hacemos con height y width.

En el caso que no queramos que tenga controles, le debemos quitar “controls” el problema es que el video no se reproducira, para eso le debemos dar autoplay, de la siguiente forma:

Una recomendación, es que si bien es cierto de la forma descrita se reproducirá el video, es buena práctica indicar el tipo del archivo, por ejemplo si queremos un video mp4, hacerlo de la siguiente forma:

En el caso que deseemos que nos de un mensaje de error si el navegador no soporta HTML 5, lo debemos hacer de la siguiente manera:

Los atributos que ofrece el tag video son: autoplay, controls, height, loop, muted, poster, preload, src, widht.

Fuente: HTML 5 – Maestros del Web

http://html5facil.com/

Algunos ejemplos los saque de diferentes web y no recuerdo cuales, mil disculpas

Leer más

Grails - Instalar Grails Framework en Debian

Grails es un framework para aplicaciones web libre desarrollado sobre el lenguaje de programación Groovy (el cual a su vez se basa en la Java platform). Grails pretende ser un marco de trabajo altamente productivo siguiendo paradigmas tales como convención sobre configuración o no te repitas (DRY), proporcionando un entorno de desarrollo estandarizado y ocultando gran parte de los detalles de configuración al programador.

Grails es basicamente un Framework de desarrollo de aplicaciones web, en el que usamos principalmente el lenguaje de Java y Groovy, incluso se puede mesclar el codigo.Es un framework que funciona bajo un modelo conocido como MVC o "modelo vista controlador", en el que principalmente lo que se hace es crear "Controladores" que son como servicios que manipulan nuestra aplicación web, y todo el codigo de estos controladores es ejecutado en el servidor web.

Una forma sencilla de instalar Grails en Debian es agregando repositorios de Ubuntu, de la siguiente forma:

En primera instancia agregamos los repositorios:

echo "deb http://ppa.launchpad.net/groovy-dev/grails/ubuntu lucid main" >> /etc/apt/sources.list

Luego instalamos la key:

apt-key adv --keyserver keyserver.ubuntu.com --recv-keys E354FBD902A9EC29

Hacemos un update

aptitude update

Finalmente solo lo instalamos:

aptitude install grails

La verdad no se porque esta opción ya no me ha resultado, en vista de eso he instalado Grails de la manera tradicional, he creado un script para instalar la versión 2.1.0, el cual es el siguiente:

#!/bin/bash
#name           :       Nicolas Ormeno Rojas
#email          :       ni.ormeno at gmail dot com
#licence        :       GLPv3
#date           :       20120814
#description    :       grails installation in debian 

#instalamos java jdk
aptitude install default-jdk 

#descargamos grails 2.1.0
wget http://dist.springframework.org.s3.amazonaws.com/release/GRAILS/grails-2.1.0.zip 

#descomprimimos y copiamos directorio grails
aptitude install zip unzip
unzip grails-2.1.0.zip
sudo cp -r grails-2.1.0/ /opt/ 

#configuramos
export JAVA_HOME=/usr/lib/jvm/default-java
export GRAILS_HOME=/opt/grails-2.1.0/
export PATH=$PATH:$GRAILS_HOME/bin

También dejo para descargar el script, simplemente le damos permisos de ejecución y luego lo ejecutamos

Descargar Script

Leer más

Acerca de: Framework WaveMaker

Actualmente he estado averiguando y aprendiendo bastante sobre framework, ahora me tope con un framework que al menos, a primera impresión, se ve bastante interesante. El framework es WaveMaker.

Este framework es para desarrollar en el lenguaje Java enfocado al desarrollo web. Wikipedia nos dice lo siguiente sobre WaveMaker:

El framework WaveMaker (anteriormente ActiveGrid) es un software de código abierto que permite crear aplicaciones AJAX. La biblioteca integra ACEGI, Dojo 1.0, autenticación, LDAP, ActiveDirectory y POJOs, y sus productos incluyen Visual Ajax Studio 4.0 para el desarrollo de aplicaciones RIA y WaveMaker Rapid Deployment Server para aplicaciones Java.

WaveMaker está licenciado bajo la Licencia Pública General de Affero versión 3 y bajo una licencia no-comercial.

Las aplicaciones se crean con WaveMaker Studio, un editor WYSIWYG que se ejecuta en un navegador web y permite el arrastrado y soltado siguiendo el modelo MVC. WaveMaker Studio está basado en TurnoAjax Studio y es desarrollado por Scott Miles y Steve Orvell.

Las aplicaciones se ejecutan en un servidor estándar de Java basado en Apache Tomcat, Dojo Toolkit, Spring e Hibernate. Actualmente está soportado para Microsoft Windows, Linux y Macintosh.

Actualmente he estado creando aplicaciones sencillas para testear el framework y la verdad es que acelera bastante el desarrollo de una aplicación web, tiene muchas utilidades, entre ellas una que me llamo mucho la atención fue la de insertar rápidamente mapas de Google Maps.

Sin duda es un framework que debemos conocer.

Páginas web referente al framework:

http://www.wavemaker.com/
http://dev.wavemaker.com/wiki/bin/Tutorials
http://dev.wavemaker.com/wiki/bin/wmdoc/
http://dev.wavemaker.com/forums/?q=node/1912
http://www.youtube.com/user/wavemakersoftwaresf?feature=watch

Leer más

Django - Sincronización con la base de datos

Ya teniendo instalado django y todo bien configurado, una de las cosas que debemos hacer es configurar la base de datos con la que empezaremos a trabajar. Si no es así pueden ver este artículo: ARTICULO. La verdad que indicar estos parámetros es sumamente fácil, lo que debemos hacer es ingresar a la carpeta de nuestro proyecto y luego ingresar al archivo settings.py, en el cual debemos buscar el siguiente código:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.', # Add 'postgresql_psycopg2', 'postgresql', 'mysql', 'sqlite3' or 'oracle'.
        'NAME': '', # Or path to database file if using sqlite3.
        'USER': '', # Not used with sqlite3.
        'PASSWORD': '', # Not used with sqlite3.
        'HOST': '', # Set to empty string for localhost. Not used with sqlite3.
        'PORT': '', # Set to empty string for default. Not used with sqlite3.
    }
}

Este es el códigoo que debemos modificar, es muy simple:

• engine: motor de la base de datos, mysql, postgres, etc.
• name: nombre de la base de datos, debe estar creada con anterioridad.
• user: nombre de usuario de la base de datos.
• password: contraseña de la base de datos.
• host: dirección del host, normalmente localhost o 127.0.0.1.
• port: este es el puerto de conexión de la base de datos, si usas mysql es 3306.

Un ejemplo simple de una conexión a mysql puede ser el siguiente:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql', # Add 'postgresql_psycopg2', 'postgresql', 'mysql', 'sqlite3' or 'oracle'.
        'NAME': 'django', # Or path to database file if using sqlite3.
        'USER': 'root', # Not used with sqlite3.
        'PASSWORD': '', # Not used with sqlite3.
        'HOST': 'localhost', # Set to empty string for localhost. Not used with sqlite3.
        'PORT': '3306', # Set to empty string for default. Not used with sqlite3.
    }
}

Debemos tener en cuenta que los datos que ingresamos deben estar entre las ' ' (comillas simples), por ejemplo: 'root'.

Ahora guardamos y salimos del archivo, lo que debemos hacer ahora es sincronizar nuestro proyecto con la base de datos:

python manage.py syncdb

Si nos da un error parecido a esto:

Error loading MySQLdb module: No module named MySQLdb

Lo que debemos hacer es instalar python-mysqldb

$ sudo aptitude install python-mysqldb

Si no existen problemas nos empezará a hacer una serie de preguntas para configurar el superusuario.

Ahora simplemente ingresamos a ver nuestra base de datos y veremos que la db ya no está vacia.

Leer más

Python - Instalando Django

Cuando estuve interiorizandome en el desarrollo de websites, en primera instancia me fije en todo lo relacionado con con html, php, javascript, etc, posteriormente estuve aventurandome con .net, para luego llegar a conocer Python Django, el cual es un framework open source escrito en Python para el desarrollo de websites. Su método de instalación es el siguiente:

Doy por obvio que se tiene instalado correctamente Python, por lo que en primera instancia debemos instalar Django, para esto tenemos 2 opciones, la primera es descargar Django o instalando desde los repositorios.

Si lo descargamos, debemos ingresar a la siguiente página (la versión puede variar)

http://www.djangoproject.com/download/1.3.1/tarball/

Luego, simplemente trabajamos el archivo descargado:

tar xzvf Django-1.3.1.tar.gz
cd Django-1.3.1
sudo python setup.py install

Ahora, para comprobar que esta todo bien instalado creamos un archivo “.py”.

import django
print django.get_version()

Luego, si ejecutamos el archivos y nos muestra la versión, significa que esta todo correctamente instalado.

La otra forma, al menos en Debian Wheezy, es instalarlo desde los repositorios:

$ sudo aptitude install python-django

Con todo lo anterior ya tenemos lista la instalación de Django, ahora debemos ejecutar:

django-admin.py startproject [nombresitio]

Si lo instalamos desde los repositorios es sin el .py

django-admin startproject [nombresitio]

Donde nombresitio es un nombre cualquiera. Esto nos creará una carpeta con el “nombre del sitio”, en el cual encontraremos los siguientes archivos:

• __init__.py: Un archivo vacío que le dice a Python que este directorio debería ser considerado un paquete Python. (Lee más sobre paquetes en la documentación oficial de Python si eres principiante).
• manage.py: Una utilidad de línea de comandos que te permite interactuar de distintas formas con este proyecto Django. Puedes leer todos los detalles sobre manage.py en django-admin.py y manage.py.
• settings.py: Configuración para este proyecto Django. En Django settings puedes entender más sobre como funciona la configuración.
• urls.py: Las URLs para este proyecto Django; una "tabla de contenidos" de tu sitio basado en Django. Puedes leer más sobre URLs en Despachador de URLs.

Lo que debemos hacer ahora es ingresar a la carpeta de nuestra página web e ingresar a él y ejecutamos:

$python manage.py runserver

Con esto ya empezamos a correr Django, por lo que para comprobar que este todo correcto, simplemente en nuestro navegador web escribimos http://127.0.0.1:8000/ ó http://localhost:8000/ y veremos la web por default que nos crea Django.

Como podemos darnos cuenta, runserver arranca por defecto en el puerto 8000, esto no significa que tengamos que ocupar ese puerto ya que lo podemos cambiar, si ese es nuestro caso, podemos en vez de escribir $python manage.py runserver debemos escribir:

python manage.py runserver 8080

Leer más

jQuery - Validar fomularios con Vanadium

Una de las cosas más comunes en el momento de realizar algo web, es la validación de formularios, si esto lo hacemos “a mano”, puede resultar bastante tedioso (dependiendo de lo que queramos hacer), sin embargo, he encontrado algo bastante útil, y que al menos para mis necesidades actuales, me ha funcionado perfecto, se trata de vanadium.

Para utilizar vanadium, debemos descargar JQuery y Vanadium, el cual pueden descargarlo de las siguientes páginas:

http://jquery.com/
http://vanadiumjs.com/

Luego de descargarlos, debemos integrarlos a nuestros proyectos, para ingresarlo a la hoja que tenemos el formulario debemos hacer algo parecido a esto:

<script type="text/javascript" src="Script/jquery-1.7.js"></script>
<script type="text/javascript" src="Script/vanadium.js"></script>

Ya con esto solo debemos agregar las opciones que nos ofrece vanadium, por ejemplo, si queremos que un input sea obligatorio debemos ingresar class=':required', por ejemplo

Usuario: <input type="text" name="user" class=':required' />

Todos los atributos que agregemos serán usadas en el momento de perder el foco o apretar submit. En el caso que queramos ocupar más de una class, por ejemplo que sea obligatorio y solo números debemos agregar simplemente los dos atributos: class=':required :number'

Algunas de las opciones que podemos encontrar son:

:required Campo obligatorio
:int Solo enteros
:float Solo decimales
:number Solo números
:alpha Solo letras
:digits Solo dígitos

En realidad hay más, simplemente si quieren saber más opciones deben leer el archivo vanadium.js y encontrarán todas las opciones que trae, de igual forma, si quieren cambiar el texto por ejemplo a español, deben modificarlo desde el archivo.

Por si quieren que sea con color todo lo que vayan validando, les dejo un código css, lo deben guardar por ejemplo vanadium.css, luego importarlo a la hoja de trabajo y solo hará lo demás. Cabe destacar que el archivo CSS no fue creado por mi, el problema es que no recuerdo de donde fue descargado.

@charset "UTF-8";/* CSS Document */body { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; color: #333;}input { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; color: #666; border: solid 2px #CCC; padding: 4px 4px; margin-right: 6px;}fieldset{    color: #666;}/* Vanadium Styles */ div.vanadium-invalid {  border-color: red !important;  border-style: solid !important;}div.vanadium-valid {  border-color: green !important;  border-style: solid !important;}.vanadium-message-value {  font-style: italic;  text-decoration: underline;}.vanadium-advice.vanadium-invalid, .vanadium-advice.vanadium-invalid * {  color: red;}div {  margin: 10px;  padding: 10px;  border-color: blue;  border-style: solid;}input.vanadium-valid {  border-color: greenyellow;}input.vanadium-invalid {  border-color: red;}#messages {  height: 70px;  padding: 0;  border-color: yellow;}input.vanadium-valid ~ .vanadium-valid-advice {  display: inline !important;  color: green;}

Leer más

Javascript - Redireccionar a otra página

Cuando creamos por ejemplo un alert, y queremos que luego de realizar este alert, nos redirija a una página específica, no necsitamos php ni nada por el estilo, ya que podemos realizarlo diretamente con javascript gracias a la opción document.location, por ejemplo, debemos generar un código como el siguiente:

"<script type='text/javascript'>
       alert('Hola’);
       document.location=('direccion_a_ir');
</script>";

Esto lo podemos colocar donde queramos, despues de realizar una acción, al entrar a la página, etc.

Leer más

Python - Código simple para enviar email

Una utilidad muy interesante que encontré al empezar a trabajar con Python, es lo fácil que resulta enviar y/o recibir correos, en mi caso no he trabajo en la recepción de correos, pero lo que si he hecho es enviar correos a través de Gmail, pero por lo tengo entendido, para ocupar otro que no sea Gmail, simplemente cambiamos los parámetros de conexión por el indicado. Un ejemplo de como enviar un correo electrónico, es el siguiente:

# Importar librerias necesarias
import smtplib 

#Importamos modulos necesarios
from email.mime.text import MIMEText 

#Crear el mensaje
msg = MIMEText("Mensaje enviado desde mi programa en lenguaje Python")
msg['Subject'] = 'Correo desde Python' #Asunto
msg['From'] = 'Emisor' #Desde
msg['To'] = 'Receptor' #hasta 

#Autentificacion
mailServer = smtplib.SMTP('smtp.gmail.com',587)
mailServer.ehlo()
mailServer.starttls()
mailServer.ehlo()
mailServer.login("correo@gmail.com","contraseña") 

#Enviar mensaje, desde - hasta
mailServer.sendmail("mailemisor@gmail.com", "mailreceptor@gmail.com", msg.as_string()) 

#Cerrar la conexion
mailServer.close()

*Si les llegara a dar algún error, eliminen los comentarios, desconozco el motivo, pero en una ocasión estos me daban problemas.

• Lo primero es importar smtplib, el cual es un modulo que define una sesión cliente de SMTP.
• La segunda línea from email.mime.text import MIMEText, es el modulo de email que necesitaremos.
• Luego tenemos los datos del mensaje: Asunto, emisor y receptor.
• Despues vienen todos los datos referente al correo, en este caso son los datos necesarios para conectarnos a Gmail.
• Ahora vienen los datos para enviar el correo, el correo del emisor y el correo del receptor deben estar entre ellos.
• Finalmente cerramos la conexión

Leer más