jueves, 17 de abril de 2014

Creación de una entrada de datos con estilo usando Zend Framework (2a parte)

Nuestro paso inicial es crear el formulario de creación/edición.
Para ello añadiremos el fichero /application/forms/Doc.php:

<?php

class Form_Doc extends Zend_Form
{
    public function init ()
    {
        $this->setMethod('post');
        // Nou element id (hidden)
        $id = $this->createElement('hidden', 'id');
        // Opcions de l'element
        $id->setDecorators(array(
                'ViewHelper'
        ));
        $this->addElement($id);
        // Nou element Títol
        $titol = $this->createElement('text', 'titol')
            ->setLabel('Títol: ')
            ->setRequired(TRUE)
            ->setAttrib('size', 40)
            ->addFilter('StripTags');
        $this->addElement($titol);
        // Nou element descripció
        $descripcio = $this->createElement('text', 'descripcio')
            ->setLabel('Descripció: ')
            ->setRequired(FALSE)
            ->addFilter('StripTags');
        $this->addElement($descripcio);
        // Nou element Autors
        $autors = $this->createElement('multiselect', 'lst_autors')
            ->setLabel('Author: ')
            ->setRequired(TRUE)
            ->setAttrib('class', 'form-field')
            ->setRegisterInArrayValidator(false)
            ->setAttrib('multiple', 'multiple');
        $this->addElement($autors);
        // Nou element submit
        $submit = $this->createElement('submit', 'submit')->setLabel('Submit');
        $this->addElement($submit);
    }
}

En el modelo de datos será necesario incluir la función miembro para la creación del documento. Para ello editaremos el fichero /application/models/Docs.php y añadiremos las siguientes funciones:

    public function createDocs ($titol, $descripcio, $lst_autors)
    {
        // Creació d'un nou registre
        $row = $this->createRow();
        if ($row) {
            // actualitzem valors
            $row->titol = $titol;
            $row->descripcio = $descripcio;
            if ($row->save()) {
                // $id_document = $this->_db->lastInsertId();
                $id_document = $row->id_document;
                $this->salvaAutors($id_document, $lst_autors);
            }
            return true;
        } else {
            throw new Zend_Exception("El document no s'ha pogut crear!");
        }
    }

    private function salvaAutors ($id_document, $lst_autors)
    {
        $db = Zend_Db_Table::getDefaultAdapter();
        foreach ($lst_autors as $id_autor) {
            $data = array(
                    'id_document' => $id_document,
                    'id_autor' => $id_autor
            );
            $rows_affected = $db->insert('autors_documents', $data);
        }
    }

En el controlador añadiremos la acción create para que responda a la petición de creación de nuevo documento, para ello editaremos el fichero /application/controllers/DocsController.php y incluiremos la siguiente función miembro:
    public function createAction ()
    {
        $frm = new Form_Doc();
        if ($this->getRequest()->isPost()) {
            if ($frm->isValid($_POST)) {
                $titol = $frm->getValue('titol');
                $descripcio = $frm->getValue('descripcio');
                $lst_autors = $frm->getValue('lst_autors');
                $mdl = new Model_Docs();
                $result = $mdl->createDocs($titol, $descripcio, $lst_autors);
                if ($result) {
                    // redirecció a l'acció index
                    return $this->_redirect('/docs/index');
                }
            }
        }
        
        $frm->setAction('/docs/create');
        $this->view->form = $frm;
    }

Antes de finalizar hemos de crear una vista para la acción que acabamos de definir, para ello añadiremos el siguiente fichero /application/views/scripts/docs/create.phtml con el contenido:

<h2><?php echo $this->translate('Creació d\' un nou document'); ?></h2>
<p><?php echo $this->translate('Per crear un nou document complementi aquest formulari i polsi acceptar...'); ?></p>
<?php echo $this->form; ?>


Ahora ya podemos ejecutar nuestro formulario para ver que pinta tiene:


Como podemos observar el acabado del multiselección es bastante pobre. Vamos a incluir el plugin de jQuery, a ver que tal queda.
Primero de todo hemos de ubicar los scripts de Multiselect y jQuery en las carpetas adecuadas. Los ficheros deberían ser:
  1. /public/js/jquery.lwMultiSelect.js
  2. /public/js/jquery-1.11.0.js
  3. /public/css/jquery.lwMultiSelect.css
  4. /public/doublearrow.png
Las carpetas /public/js y /public/css deberán ser creadas y ubicar allí los scripts.
Modificaremos la vista de creación de documentos para que incluya los scripts e inicialice el multiselect. Editamos /application/views/scripts/docs/create.phtml:
    
<?php
$this->headScript()->prependFile('/js/jquery.lwMultiSelect.js');
$this->headScript()->prependFile('/js/jquery-1.11.0.js');
$this->headLink()->prependStylesheet('/css/jquery.lwMultiSelect.css');
$strAddAll = $this->translate('Afegir tots');
$strClear = $this->translate('Netejar');
$strSelected = $this->translate('Seleccionats');
$this->headScript()->appendScript('$(document).ready(function() {
$("#lst_autors").lwMultiSelect({
        addAllText:\'' . $strAddAll . '\',
        removeAllText:\'' . $strClear . '\', 
        selectedLabel:\'' . $strSelected . '\'});
});
', $type = 'text/javascript');
?>
<h2><?php echo $this->translate('Creació d\' un nou document'); ?></h2>
<p><?php echo $this->translate('Per crear un nou document complementi aquest formulari i polsi acceptar...'); ?></p>
<?php echo $this->form; ?>


Ahora nuestro formulario tendrá un aspecto mucho más profesional:

No hay comentarios:

Publicar un comentario