SlideShare uma empresa Scribd logo
1 de 57
Baixar para ler offline
“Desarrollo de Extensiones Typo3”
Víctor Aravena
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
Tabla de Contenidos.
1. DESARROLLO DE EXTENSIONES.................................................................... 3
1.1 KICKSTARTER. ....................................................................................... 3
1.2 DESARROLLO DE EXTENSIÓN BÁSICA............................................................ 4
2. ESTANDAR DE DESARROLLO EXTENSIONES. ....................................................12
2.1 MODELO VISTA CONTROLADOR (MVC). ........................................................12
3. ESTÁNDAR DE DESARROLLO DE EXTENSIONES HECHAS EN TYPO3.........................13
4. IMPLEMENTACION FORMULARIO APLICANDO MVC.............................................20
4.1 CONTROLADOR.....................................................................................20
4.2 MODELO. ............................................................................................24
4.3 VISTA.................................................................................................25
4.4 IMPLEMENTACIÓN..................................................................................26
5. CONSIDERACIONES GENERALES...................................................................26
6. ANEXO A. .............................................................................................28
6.1 MODIFICANDO EL EJEMPLO. .....................................................................28
7. ANEXO B. .............................................................................................45
7.1. MOSTRAR DATOS..................................................................................45
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
1. DESARROLLO DE EXTENSIONES.
1.1 Kickstarter.
Typo3 posee la extensión KickStarter que nos permite crear nuevas extensiones y editarlas una vez
que éstas fueron creadas. A partir de la versión 4.6 de Typo3, dicha extensión debe ser instalada
(revisar manual básico de typo3, instalación de extensiones).
Una vez que tenemos instalada la extensión, nos vamos al módulo Tools>Ext Manager>Menu y
seleccionamos “Make new extensión”.
En la pantalla desplegada tenemos el marco de trabajo para el desarrollo de extensiones.
Si hacemos click en el signo más podremos ir viendo las distintas opciones de configuración que
tenemos para la nueva extensión.
En “Enter extensión key”, debemos poner un identificador, el cual será único para cada extensión.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
1.2 Desarrollo de extensión básica.
Debemos ir al módulo Tools>Ext Manager>Menu y seleccionamos “Make new extensión”.
Lo primero que haremos será darle el key identificador de nuestra extensión, que será
“lz_extensionejemplo”, en el nombre de nuestra extensión, el prefijo “lz” corresponde al estándar de
desarrollo de la empresa Lazos. Importante recordar que dos extensiones no podrán tener el mismo
nombre.
En información general tendremos la siguiente configuración. Hacemos click en Update y los cambios
son guardados.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
En “New Database Tables” damos el nombre a la tabla que será creada en nuestra base de datos y
además crearemos dos campos: nombre y apellido, que serán de tipo “text area”.
Para crear los campos tenemos que ir al final de la pantalla, darle el nombre al campo, el tipo y
hacemos click en “Update”, automáticamente Typo3 nos dará la opción de crear otro campo,
nuevamente le damos el nombre del campo, el tipo y hacemos click en “Update”. Por cada campo que
se quiera crear se deben seguir los pasos anteriores.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
En “Frontend Plugins”, asignamos el nombre que se mostrará en la lista de Plugins cuando se inserte
nuestra extensión como Plugins de una página. Hacemos click en “Update” y los cambios son guardados.
En “Services” le damos el título “mvc” (que corresponde a nuestro Modelo Vista Controlador). Con ello
se crea la carpeta “sv1” de la extensión. Con los servicios, podemos extender las funcionalidades de las
extensiones, permitiendo desarrollar un código más robusto implementando el patrón de diseño MVC.
Guardamos los cambios haciendo click en “Update”.
Una vez que tenemos todos los parámetros de configuración listos, hacemos click en “View result” y
finalmente hacemos click en “WRITE”.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Aceptamos el mensaje y nuestra extensión ha sido creada con éxito.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Para instalar la extensión, hacemos click en “Install extensión”. La pantalla desplegada nos muestra los
cambios que se harán en la base de datos. Hacemos click en “Make updates” y la extensión ha sido
instalada.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Si vamos a Tool>Ext Manager>Menu>Loaded extensions, veremos la extensión.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
2. ESTANDAR DE DESARROLLO EXTENSIONES.
2.1 Modelo vista controlador (MVC).
Modelo Vista Controlador (MVC) es un patrón de arquitectura de software que separa los datos de una
aplicación, la interfaz de usuario, y la lógica de control en tres componentes distintos. El patrón MVC se
ve frecuentemente en aplicaciones web, donde la vista es la página HTML y el código que provee de
datos dinámicos a la página; el modelo es el Sistema de Gestión de Base de Datos y la Lógica de
negocio; y el controlador es el responsable de recibir los eventos de entrada desde la vista.
 Modelo: Esta es la representación específica de la información con la cual el sistema opera. La
lógica de datos asegura la integridad de éstos y permite derivar nuevos datos; por ejemplo, no
permitiendo comprar un número de unidades negativo, calculando si hoy es el cumpleaños del
usuario o los totales, impuestos o importes en un carrito de la compra.
 Vista: Este presenta el modelo en un formato adecuado para interactuar, usualmente con la
interfaz de usuario.
 Controlador: Este responde a eventos, usualmente acciones del usuario e invoca cambios en el
modelo y probablemente en la vista.
Muchos sistemas informáticos utilizan un Sistema de Gestión de Base de Datos para gestionar los datos.
En MVC corresponde al modelo.
Aunque se pueden encontrar diferentes implementaciones de MVC, el flujo que sigue el control
generalmente es el siguiente:
1. El usuario interactúa con la interfaz de usuario de alguna forma (por ejemplo, el usuario pulsa
un botón, enlace, etc.)
2. El controlador recibe (por parte de los objetos de la interfaz-vista) la notificación de la acción
solicitada por el usuario. El controlador gestiona el evento que llega, frecuentemente a través
de un gestor de eventos (handler) o callback.
3. El controlador accede al modelo, actualizándolo, posiblemente modificándolo de forma
adecuada a la acción solicitada por el usuario (por ejemplo, el controlador actualiza el carro de
la compra del usuario). Los controladores complejos están a menudo estructurados usando un
patrón de comando que encapsula las acciones y simplifica su extensión.
4. El controlador delega a los objetos de la vista la tarea de desplegar la interfaz de usuario. La
vista obtiene sus datos del modelo para generar la interfaz apropiada para el usuario donde se
refleja los cambios en el modelo (por ejemplo, produce un listado del contenido del carro de la
compra). El modelo no debe tener conocimiento directo sobre la vista. Sin embargo, el patrón
de observador puede ser utilizado para proveer cierta dirección entre el modelo y la vista,
permitiendo al modelo notificar a los interesados de cualquier cambio. Un objeto vista puede
registrarse con el modelo y esperar a los cambios, pero aun así el modelo en sí mismo sigue sin
saber nada de la vista. El controlador no pasa objetos de dominio (el modelo) a la vista aunque
puede dar la orden a la vista para que se actualice. Nota: En algunas implementaciones la vista
no tiene acceso directo al modelo, dejando que el controlador envíe los datos del modelo a la
vista.
5. La interfaz de usuario espera nuevas interacciones del usuario, comenzando el ciclo
nuevamente.
Fuente: http://es.wikipedia.org/wiki/Modelo_Vista_Controlador.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
3. ESTÁNDAR DE DESARROLLO DE EXTENSIONES HECHAS EN TYPO3.
Para el desarrollo de las extensiones se recomienda trabajar con la herramienta “EasyEclpipse for
PHP”, la cual se puede descargar de la página oficial del proyecto, http://www.easyeclipse.org.
El Workspace del “EasyEcplise for PHP” debe ser la carpeta “typo3conf” que está dentro de la carpeta
de “Typo3” (en mi caso “C:TYPO3_xxhtdocsDummytypo3conf”). Creamos un proyecto PHP de
nombre “ext”. Automáticamente se cargaran todos las extensiones instalas.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Según el patrón MVC se deben crear cuatro carpetas dentro de la carpeta “sv1” (que se crea por
defecto al crear una extensión). Las carpetas son: “Modelo”, “Vista”, “Controlador” y “Otros”.
Al momento de crear la extensión se añadió un Plugins a ésta, el método main de la clase
“class.tx_lzextensionejemplo_pi1.php” que se encuentra dentro de la carpeta “pi1” (plugins 1). El
código del archivo correspondiente a la función debe ser reemplazado por el que se muestra a
continuación. El código está en la siguiente página.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
function main($content,$conf) {
$this->conf=$conf;
$this->pi_setPiVarDefaults();
$this->pi_loadLL();
global $TYPO3_CONF_VARS;
$parameters = unserialize($TYPO3_CONF_VARS['EXT']['extConf'][$this->extKey]);
require(t3lib_extMgm::extPath($this-
>extKey)."sv1/Controlador/Controlador.class.php");
$oControlador = new Controlador($this,$version="v00",$confLocal = $conf,$confGlobal
= $parameters ,$confFlex = null,"CONTENT_EXTENSION");
/*
* Se carga la configuracion inicial
*/
$oControlador->actionEvent($_POST);
$content.= $oControlador->getHtml($_GET);
/*$GLOBALS['TSFE']->additionalHeaderData[$this->prefixId] = $oControlador-
>getHeader(false,true);*/
$content = '<form name="frmsolicitudes" method="post" id="frmsolicitudes"
action="">' .
'<div id="div_menu">
'.$content.'
</div>
</form>';
return $this->pi_wrapInBaseClass($content);
}
La carpeta controlador se compone de:
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
La clase “Controlador.class.php” se compone de los siguientes métodos. Los cuales pueden ser
diferentes de acuerdo a la clase.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
La clase “Xajax_Controlador.class.php” se compone de los siguientes métodos, los cuales pueden ser
diferentes dependiendo de la extensión.
La carpeta “Vista” está compuesta por los siguientes archivos:
El html, css y js deben cumplir la siguiente regla:
• Deben estar validados con W3C html 4.01.
• Deben estar validados los estilos según la W3C.
• Deben estar validados con TAW A (Accesibilidad uno).
• Los estilos debe estar agrupados en clases.
• En el JavaScript, al traer el valor de un elemento este deberá ser llamado
por getelementById.
• En caso de ser necesario crear dos hojas de estilo, una para pantalla y otra para impresión.
• La estructura del sitio en html debe estar contenida en tablas.
• Deben ser probados en el navegador Firefox, Opera e Internet Explorer.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Las plantillas html deben tener la siguiente estructura:
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Quanta Plus">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="Controlador.css">
<script type='text/javascript' src='Controlador.js'>
</script>
</head>
<body>
<!--###TEMPLATE### begin-->
<!--###CONTENT### -->
##############################
…
… ESTRUCTURA Del html de la extension
…
<!--###CONTENT### -->
<!--###TEMPLATE### end-->
</body>
</html>
Las subpartes o pantallas del formulario se deben marcar en la plantilla html con el siguiente estándar.
<!--###CONTENT_VER### start -->
CONTENIDO
<!--###CONTENT_VER### stop -->
Para el detalle del contenido.
<!--###DETALLE_VER### start -->
CONTENIDO ITERACTIVO. ....
<!--###DETALLE_VER### stop -->
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
La carpeta “Modelo” se compone sólo de la clase que contendrá los componentes del Modelo de
acuerdo al MVC. Para nuestro ejemplo esta se llama “SqlModelo.class.php”.
Por cada conexión que se realice a la base datos se debe agregar un método en la clase
“SqlModelo.class.php” que deberá retornar un arreglo de datos. A continuación se da un ejemplo.
function getDatosFotoPortada($idFoto = NULL){
$where_clause = ' deleted!="1" AND hidden !="1"';
$sql = 'SELECT * FROM tx_lzmantenedorgaleriaalbum_foto WHERE
uid="'.$idFoto.'" AND '.$where_clause;
$res = $GLOBALS['TYPO3_DB']->sql_query($sql);
$line = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($res);
$arrayDatosFoto['ancho'] = $line['ancho_foto'];
$arrayDatosFoto['alto'] = $line['alto_foto'];
return $arrayDatosFoto;
}
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
La carpeta Otros contiene todas las clases adicionales que ocuparemos en nuestro desarrollo. Por
ejemplo la clase forms es la clase que a través de métodos genera elementos formulario html (Combo
Box, Tex tarea).
4. IMPLEMENTACION FORMULARIO APLICANDO MVC.
A continuación, se implementará un formulario que permite la inserción de dos campos en la base de
datos (nombre y apellido), campos que fueron creados como ejemplo cuando se creó la extensión
lz_extensionejemplo.
4.1 Controlador.
En la carpeta sv1Controlador (del MVC) crearemos la clase Controlador.class.php que tendrá el
código que viene a continuación.
- Esta clase tiene la función que carga los valores iniciales del formulario (initForm), la función
que carga el html del formulario (getHtml), la función que controla los eventos (actionEvent),
el controlador correspondiente a la clase y la declaración de las variables respectivas.
<?php
class Controlador {
/**
* @var object Contiene una instancia a la clase que almacena las consultas
*/
var $oSql;
/**
* @var object Contiene un instancia al plugins para herender las propiedades
*/
var $oPlugins;
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
/**
* @var object Contiene un instancia al plugins para herender las propiedades
*/
var $oForm;
/**
* @var string Prefijo del directorio del servicio
*/
var $sv;
/**
* @var array Contiene la configuracion Local
*/
var $confLocal;
/**
* @var array Contiene la configuracion Global
*/
var $confGlobal;
/**
* @var array Contiene contenido extra al content
*/
var $addContent;
/**
* @var array Contiene la seccion por defecto del template
*/
var $posSeccionTemplate;
/**
* Constructor de la clases
*/
function Controlador($oPlugins,$version,$confLocal = null,$confGlobal = null,$confFlex = null,
$posSeccionTemplate = null) {
/*
* Asigno los valores a las variables basica del sistema
*/
$this->sv = "sv1/";
$this->oPlugins = $oPlugins;
$this->sRuta=t3lib_extMgm::siteRelPath($this->oPlugins->extKey).$this->sv;
$this->addHeader= "";
$this->addContent = "";
/*
* Asigno las variables de configuracion
*/
$this->confGlobal = $confGlobal;
$this->confLocal = $confLocal;
$this->confFlex = $confFlex;
/*
* Asigno los atributos que son instanciados
*/
require_once($this->sRuta.'Modelo/SqlModelo.class.php');
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
$this->oSql = new SqlModelo_Convenio_Iniciar($this->oPlugins->cObj->data['pages']);
$this->posSeccionTemplate = $posSeccionTemplate;
}
/**
* Metodo que carga los valores iniciales del formulario
*/
function initForm(){
}
/**
* Obtiene el html de la extension
*/
function getHtml($data=null) {
$this->initForm();
$subpartArray = array();
$markerArray = array();
/**
* Template Traspasar
*/
if($this->template == ""){
$this->templateHTML = 'EXT:'.$this->oPlugins->extKey.'/'.$this-
>sv.'/Vista/Controlador.html';
}
else{
$this->templateHTML = $this->confLocal["template"];
}
/*
* Obtiene el Template
*/
$this->templateCode = $this->oPlugins->cObj->fileResource($this->templateHTML);
switch ($this->posSeccionTemplate){
case "CONTENT_EXTENSION":
$template['template'] = $this->oPlugins->cObj->getSubpart($this-
>templateCode,'###'.$this->posSeccionTemplate.'###');
//$subpartArray['###CONTENT_SUBPART###']=$this->oSql-
>getNombreFeUser($GLOBALS["TSFE"]->fe_user->user["uid"]);
break;
case "CONTENT_INGRESADO":
$template['template'] = $this->oPlugins->cObj->getSubpart($this-
>templateCode,'###'.$this->posSeccionTemplate.'###');
break;
}
$content = $this->oPlugins->cObj->substituteMarkerArrayCached($template['template'],
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
$markerArray, $subpartArray);
$content.=$this->addContent;
return $content;
}
/**
* Metodo que controla los Eventos
* @param $_POST $_POST Contiene las variables del pasada desde el formulario
*/
function actionEvent ($_POST) {
if ($_POST ['ingresar']){
$nombre=$_POST["nombre"];
$apellido=$_POST["apellido"];
$valorInset = $this->oSql->insertarUsuario($nombre,$apellido);
if ($valorInset)
$this->posSeccionTemplate= 'CONTENT_INGRESADO';
}
}
}
?>
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
4.2 Modelo.
En la carpeta sv1Modelo (del MVC) crearemos la clase SqlModelo.class.php, que contendrá el
constructor de la clase y la función con la cual insertaremos el registro en la base de datos. Para la
implementación de nuestro formulario el código es el siguiente (recuerde cambiar el nombre de la tabla
por la que especificó al momento de crear el plugin.
<?php
class SqlModelo_Convenio_Iniciar {
var $pid;
/**
* Constructor de la clases
*/
function SqlModelo_Convenio_Iniciar($pid) {
$this->pid = $pid;
}
function insertarUsuario($nombre,$apellido){
$sql = 'insert into tx_lzextensionprueba_extprueba (campo1, campo2)
values("'.$nombre.'","'.$apellido.'")';
$resultset = $GLOBALS['TYPO3_DB']->sql_query($sql);
$line = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($resultset);
return $resultset;
}
}
?>
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
4.3 Vista.
En la carpeta sv1Vista (del MVC) crearemos la clase Controlador.html, que contendrá todo el código
html que forma nuestro formulario. El código necesario para la implementación de nuestro
formulario es el siguiente.
<!--###TEMPLATE### begin-->
<!--###CONTENT### -->
<!--###CONTENT_EXTENSION###-->
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" summary=""
class="espacioIzquierdo">
<td>Nombre</td>
<td>
<input type="text" name="nombre" id="nombre" />
</td>
</tr>
<tr>
<td>Apellido</td>
<td>
<input type="text" name="apellido" id="apellido" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="ingresar" id="ingresar" value="Ingresar" />
</td>
</tr>
</table>
<input type="hidden" name="que" id="que">
<!--###CONTENT_EXTENSION###-->
<!--###CONTENT_INGRESADO###-->
<p>correcto</p>
<!--###CONTENT_INGRESADO### end-->
<!--###CONTENT### -->
<!--###TEMPLATE### end-->
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
4.4 Implementación.
Finalmente creamos una página de prueba donde insertaremos como contenido el plugins de la
extensión que hemos creado, y ya podemos ver nuestro formulario funcionando.
5. CONSIDERACIONES GENERALES.
 El modelo debe poseer las tres capas de desarrollo.
 No se aceptan procedimientos almacenados.
 El motor de base de datos por defecto es MySQL.
 Para conectarse al modelo de datos se deben utilizar las API de Typo3.
 El código debe estar documentado según el formato phpDoc.
 Las variables deben tener nombres significativos, y su prefijo debe ser el tipo que es.
Tipo de dato Prefijo
Entero i
Flotante f
Array a
Double d
String s
objeto o
 Se recomienda utilizar el ide de Ecplise para php.
http://www.easyeclipse.org/site/distributions/php.html
 El nombre de la extensión debe mantener el siguiente formato.
o <identificación del proyecto>_<identificación del módulo>_<identificación
funcionalidad>
Ejemplo:
 ilz_multi_galfoto
 red_multi_albunfoto
 El nombre del plugins debe tener el siguiente formato:
o <<identificación del proyecto>_<identificación del módulo>_<identificación
funcionalidad>
Ejemplo:
 ilz_multi_galfoto
 red_multi_albunfoto
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
 Se debe utilizar la siguiente vía de la configuración (mas información en
http://wiki.typo3.org/index.php/Main_Page )
o GLOBAL: En el archivo ext_conf_template.txt
o Local: en el archivo ext_typoscript_setup.txt
o XML: Flexform.
 Se debe disponer de una carpeta de servicio.
 Se debe crear una extensión lz_<sistema>_versión_core que contenga el modelo de datos
creado según el estándar de Typo3.
 Mayor información en http://typo3.org/documentation/document-library/core-
documentation/doc_core_api/current/view/.
 Mayor información en http://wiki.typo3.org/index.php/Overview_Developer_Manuals.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
6. ANEXO A.
6.1 Modificando el ejemplo.
Ahora que ya sabemos cómo crear un formulario, modificaremos nuestro ejemplo agregándole dos
campos más, mail y cuidad para completar el registro.
Para agregar los campos nos vamos a “Ext ManagerInstall extensions” y buscamos nuestra extensión.
Para ello podemos utilizar el buscador o lo podemos hacer directamente en la lista de extensión que
tenemos instaladas.
Hacemos click en el nombre de la extensión y seleccionamos “Edit in Kickstarter” en la combobox del
esquina superior derecha.
A continuación crearemos una nueva tabla en la base de datos que contendrá las ciudades.
Para ello debemos hacer click en el símbolo más del ítem “New Database Tables”.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Le damos en nombre y el título a la nueva tabla.
Nos vamos al final de la página y creamos lo campos que tendrá la tabla.
Para ello le damos en nombre del campo, el título de este y el tipo de dato. Hacemos click en update.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Para agregar el email y la ciudad a la tabla que donde anteriormente guardábamos solo el nombre y el
apellido debemos hacer click en “Extension Ejemplo” del ítem “New Database Tables”.
En la pantalla desplegada, debemos ir al final de la página y en “NEW FIELD” agregar el nombre del
nuevo campo, el title de este y el tipo de dato. Para nuestro ejemplo los parámetros son los siguientes.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Hacemos click en “update” y podemos ver nuestro nuevo campo creado.
Ahora debemos crear el campo ciudad, el cual apuntara al campo código_ciudad de la tabla que hemos
creado anteriormente.
Importante: el tipo de dato para este campo es Database relation, lo cual nos permite indicar a que
tabla apunta nuestro campo.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Hacemos click en update y debemos indicar a que tabla apunta el campo código_ciudad que hemos
creado.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Ahora debemos guardar los cambios en nuestra extensión.
Para ello hacemos click en Update, y luego en View Result.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
En la pantalla desplegada hacemos click en “Update result” y luego en “WRITE”.
Aceptamos el mensaje
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Vemos los cambios que se realizaran y hacemos click en “Make Update”.
Ahora crearemos una carpeta en nuestro sitio que permitirá ver e ingresar nuevos registros a la tabla
donde tenemos almacenadas las ciudades.
Para ello vamos al menú de Typo3, “WebPage”, hacemos click con el botón secundario en New Typo3
Site (para nuestro ejemplo) y seleccionamos New.
A continuación hacemos click en “Page (inside)”.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
En “Type” seleccionamos “SysFolder” y en Title le damos el nombre a la carpeta.
A continuación, nos vamos al menú “List”, pinchamos en la carpeta que hemos creado recién.
Debemos hacemos click en “Create New Record”.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Buscamos el título que le hemos dado a nuestra tabla ciudades. Hacemos click y podremos ingresar una
nueva ciudad.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Guardamos los cambios, la nueva ciudad ha sido guardada.
Ahora cada vez que queramos ingresar una nueva ciudad solo debemos hacer click el icono de “New
Record” como muestra la siguiente imagen.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
A continuación, comenzaremos a modificar el código de nuestra extensión.
Primero que todo dentro de la carpeta sv1 crearemos una nueva carpeta, que la llamaremos Otros,
carpeta que tendrá las clases que prestan funcionalidades adicionales al sistema.
Dentro de la carpeta crearemos la clase Form.class.php, que tendrá la función que permite llenar la
combobox, código que se muestra a continuación.
<?php
/**
* Clase que permite Insertar Campo de Formularios
* * Uso:
* $frm= new DoForm();
* @package res.formulario
* @author Victor Aravena victor.aravena@gmail.com
* @version 1.1
* @copyright Opensource
*/
class DoForm {
/**
* Muestra un select pasando una arreglo unidemensional o bidimensional
* Usage:
* $frm->select( array(array("1","v1"), array("2","v2"),array("3","v3"),
array("4","v4")),"test","id_test", 4 ,"");
* @param string|integer $array Arreglo bidemensional o unidemensional con los
valores y la descripcion
* @param string $nombre Nombre del Select
* @param string $id Nombre id del select
* @param string|integer $defecto Valor por defecto
* @param string $extraTag Configuracion extra
* @return string Codigo html generado del select
*/
function select($array,$nombre,$id,$defecto,$extraTag)
{
$i=0;
$x=count($array);
$salida='<select name="'.$nombre.'" id="'.$id.'" '.$extraTag.'>';
//$salida.="<option value='0' selected>";
//$salida.="----.-----</option>";
if ($x != "0"){
while ($i<$x){
$ck='';
if($array[$i][1])
{
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
if($array[$i][1]==$defecto)
{
$ck=' selected';
}
}
else
{
if($array[$i][0]==$defecto)
{
$ck=' selected';
}
}
if($array[$i][0]==$defecto){
$ck=' selected';
}
$salida.="<option value='".$array[$i][0]."' $ck>";
if($array[$i][1]) {
$salida.=$array[$i][1]."</option>";
}
else {
$salida.=$array[$i][0]."</option>";
}
$i=$i+1;
}//fin while
}
$salida=$salida."</select>";
return $salida;
}
}
?>
En nuestra clase Controlador.class.php que se encuentra en sv1Controlador, haremos las siguientes
modificaciones.
Debemos declarar la variable extKey.
El controlador de la clase debe recibir como parámetro aConfigExt, además de los que ya recibe.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Agregamos la asignación del valor de nuestra nueva variable en nuestro controlador.
$this->extKey=$aConfigExt['extKey'];
En el constructor de la clase Controlador.class.php debemos agregar el parámetro que acabamos de
declarar ($aConfigExt) en el método constructor. El código final es el siguiente:
function Controlador($aConfigExt, $oPlugins,$version,$confLocal = null,$confGlobal = null,$confFlex =
null, $posSeccionTemplate = null)
Creamos la instancia a la clase Form.class.php.
require_once(t3lib_extMgm::extPath($this->extKey).'/sv1/Otros/Forms.class.php');
$this->oForm = new DoForm();
En el case CONTENT_EXTENSION de la función getHtml debemos agregar el código que nos permite
llenar la combobox.
$markerArray['###CIUDAD###'] = $this->oForm->select($this->oSql->ciudad(), "codigo_ciudad",
"codigo_ciudad",' ', '');
Este código debe copiarse después del siguiente código:
case "CONTENT_EXTENSION":
$template['template'] = $this->oPlugins->cObj->getSubpart($this->templateCode,'###'.$this-
>posSeccionTemplate.'###');
En la función actionEvent, debemos obtener los valores de nuestros nuevos campos y pasárselos a la
función que permite insertar el nuevo registro en la base de datos.
function actionEvent ($_POST) {
if ($_POST ['ingresar']){
$nombre=$_POST["nombre"];
$apellido=$_POST["apellido"];
$email=$_POST["email"];
$codigociudad=$_POST["codigo_ciudad"];
$valorInset = $this->oSql->insertarUsuario($nombre,$apellido,$email,$codigociudad);
if ($valorInset) {
$this->posSeccionTemplate= 'CONTENT_INGRESADO';
}
}
}
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
En la carpeta sv1Modelo (del MVC) debemos modificar la clase SqlModelo.class.php. Para la
implementación de nuestro formulario el código es el siguiente (recuerde cambiar el nombre de la tabla
por la que especificó al momento de crear el plugin.
<?php
class SqlModelo_Convenio_Iniciar {
var $pid;
/**
* Constructor de la clases
*/
function SqlModelo_Convenio_Iniciar($pid) {
$this->pid = $pid;
}
function insertarUsuario($nombre,$apellido,$email,$codigociudad){
$sql = 'insert into tx_lzextensionprueba_extprueba
(campo1, campo2 , campo3, campo4)
values("'.$nombre.'","'.$apellido.'","'.$ email.'","'.$ codigociudad.'")';
$resultset = $GLOBALS['TYPO3_DB']->sql_query($sql);
$line = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($resultset);
return $resultset;
}
}
?>
En la clase class.tx_lzextensionejemplo_pi1.php de la carpeta pi1 debemos realizar las siguientes
modificaciones.
En la función main debemos agregar la siguiente línea de código.
$aConfigFlexForm['extKey']=$this->extKey;
Se debe editar la instancia al objeto Controlador del archivo class.tx_lzextensionejemplo_pi1.php. El
código final debe quedar de la siguiente forma:
$oControlador = new Controlador($aConfigFlexForm, $this,$version="v00",$confLocal =
$conf,$confGlobal = $parameters ,$confFlex = null,"CONTENT_EXTENSION");
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
En la clase SqlModelo.class.php debemos modificar la función que ingresar el registro a la base de datos
y agregar la función que nos retorna el arreglo con los nombres de las ciudades. El código es el
siguiente.
function ciudad(){
$sql = 'SELECT uid, nombre_ciudad FROM tx_lzextensionejemplo_ciudad';
$res = $GLOBALS['TYPO3_DB']->sql_query($sql);
$arrayDatos[0][0] = 0;
$arrayDatos[0][1] = "------ Seleccione Ciudad ------";
$contador = 1;
while ($lineFormulario = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($res)) {
$arrayDatos[$contador][0] = $lineFormulario["uid"];
$arrayDatos[$contador][1] = $lineFormulario["nombre_ciudad"];
$contador++;
}
$GLOBALS['TYPO3_DB']->sql_free_result($res);
return $arrayDatos;
}
}
?>
También debemos modificar la función insertarUsuario y agregar los nuevos parámetros
correspondientes a “email” y “ciudad”:
function insertarUsuario($nombre,$apellido, $email, $ciudad){
$sql = 'insert into tx_lzextensionejemplo_extensionejemplo
(nombre, apellido, email, codigo_ciudad) ' .
'values("'.$nombre.'","'.$apellido.'","'.$email.'","'.$ciudad.'")';
$resultset = $GLOBALS['TYPO3_DB']->sql_query($sql);
$line = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($resultset);
return $resultset;
}
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
En la clase Controlador.html de la carpeta sv1Vista, agregaremos el código que permite mostrar los
dos nuevos campos de nuestro formulario.
<tr>
<td>Email</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td>
Ciudad
</td>
<td >
<p>###CIUDAD###</p>
</td>
</tr>
El código anterior se debe copiar antes del botón Ingresar. Debe copiarse ante del siguiente texto:
<tr>
<td></td>
<td>
<input type="submit" name="ingresar" id="ingresar" value="Ingresar" />
</td>
</tr>
Si vamos a la página donde tenemos insertado nuestro formulario, y podemos ver este con los cambios
realizados.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
7. ANEXO B.
7.1. Mostrar datos.
A continuación crearemos una extensión que permita mostrar los datos que hemos insertado en nuestra
base de datos.
Para comenzar debemos ir al módulo Tools>Ext Manager>Menu y seleccionar la opción “Make new
extensión”. Lo primero que haremos será darle el key identificador de nuestra extensión, que será
“lz_exntensionmostrardatos”. Importante recordar que dos extensiones no podrán tener el mismo
nombre.
En información general tendremos la siguiente configuración. Hacemos click en Update y los cambios
son guardados.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
En “Frontend Plugins”, asignamos el nombre que se mostrará en la lista de Plugins cuando se inserte
nuestra extensión como Plugins de una página. Hacemos click en “Update” y los cambios son guardados.
En “Services” le damos el título “mvc” (que corresponde a nuestro Modelo Vista Controlador). Con ello
se crea la carpeta “sv1” de la extensión. Con los servicios, podemos extender las funcionalidades de las
extensiones, permitiendo desarrollar un código más robusto implementando el patrón de diseño MVC.
Guardamos los cambios haciendo click en “Update”.
Una vez que tenemos todos los parámetros de configuración listos, hacemos click en “View result” y
finalmente hacemos click en “WRITE”.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Aceptamos el mensaje y nuestra extensión ha sido creada con éxito.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Para instalar la extensión, hacemos click en “Install extensión”. La pantalla desplegada nos muestra los
cambios que se harán en la base de datos. Hacemos click en “Make updates” y la extensión ha sido
instalada.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Si vamos a Tool>Ext Manager>Menu>Loaded extensions, veremos la extensión.
Ahora crearemos el código que permitirá a la nueva extensión, mostrar los datos.
Ingresamos a nuestro EasyEclipse for PHP. Vamos a nuestra extensión y lo primero que haremos será
crear las carpetas que las cuales estructuraremos el código de acuerdo al Patrón MVC.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Hacemos click derecho sobre la carpeta sv1, seleccionamos “NewFolder”, le damos el nombre a la
carpeta, hacemos click en Finish y así hemos creado nuestra primera carpeta. Para crea la demás
carpeta (Vista y Controlador) debemos realizar los mismos pasos.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
A continuación, debemos crear las clases que darán las funcionalidades a nuestra extensión.
En la carpeta “sv1Controlador” crearemos la clase Controlador.class.php que permitirá cargar el
template y mostrar los datos en pantalla. El código de la clase es el siguiente.
<?php
class Controlador {
var $oSql;
var $oPlugins;
var $sv;
var $confLocal;
var $confGlobal;
var $addContent;
var $posSeccionTemplate;
var $extKey;
/**
* Constructor de la clases
*/
function Controlador( $oPlugins,$version,$confLocal = null,$confGlobal = null,$confFlex = null,
$posSeccionTemplate = null) {
/*
* Asigno los valores a las variables basica del sistema
*/
$this->sv = "sv1/";
$this->oPlugins = $oPlugins;
$this->sRuta=t3lib_extMgm::siteRelPath($this->oPlugins->extKey).$this->sv;
$this->addHeader= "";
$this->addContent = "";
/*
* Asigno las variables de configuracion
*/
$this->confGlobal = $confGlobal;
$this->confLocal = $confLocal;
$this->confFlex = $confFlex;
/*
* Asigno los atributos que son instanciados
*/
require_once($this->sRuta.'Modelo/SqlModelo.class.php');
$this->oSql = new SqlModelo();
/*
* Creacion de Objeto que maneja los formularios
*/
$this->posSeccionTemplate = $posSeccionTemplate;
}
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
/**
* Metodo que carga los valores iniciales del formulario
*/
function initForm(){
}
/**
* Obtiene el html de la extension
*/
function getHtml($data=null) {
$this->initForm();
$subpartArray = array();
$markerArray = array();
/**
* Template Traspasar
*/
if($this->template == ""){
$this->templateHTML = 'EXT:'.$this->oPlugins->extKey.'/'.$this-
>sv.'/Vista/Controlador.html';
}
else{
$this->templateHTML = $this->confLocal["template"];
}
/*
* Obtiene el Template
*/
$this->templateCode = $this->oPlugins->cObj->fileResource($this->templateHTML);
switch ($this->posSeccionTemplate){
case "CONTENT_EXTENSION":
$template['template'] = $this->oPlugins->cObj->getSubpart($this->templateCode,'###'.$this-
>posSeccionTemplate.'###');
$registro = $this->oSql->obtenerRegistros();
for ($i=0;$i<$registro['contador'];$i++){
$template['VER_REGISTROS'] = $this->oPlugins->cObj-
>getSubpart($this->templateCode,'###VER_REGISTROS###');
$markerArray['###NOMBRE###']= $registro[$i]['nombre'];
$markerArray['###APELLIDO###']= $registro[$i]['apellido'];
$markerArray['###EMAIL###'] = $registro[$i]['email'];
$markerArray['###CIUDAD###']=$registro[$i]['nombre_ciudad'];
$contentComentarios .= $this->oPlugins->cObj-
>substituteMarkerArrayCached($template['VER_REGISTROS'], $markerArray);
}
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
$subpartArray['###VER_REGISTROS###']=$contentComentarios;
break;
}
$content = $this->oPlugins->cObj->substituteMarkerArrayCached($template['template'],
$markerArray, $subpartArray);
$content.=$this->addContent;
return $content;
}
}
?>
En la carpeta “sv1Modelo” crearemos la clase SqlModelo.class.php que contendrá el sql que retornara
un arregle de datos con los registros que tenemos en nuestra base de datos. El código de esta clase es
el siguiente.
<?php
class SqlModelo {
/**
* Constructor de la clases
*/
function SqlModelo() {
}
function obtenerRegistros(){
$strSQL = "SELECT registro.nombre as nombre, registro.apellido, registro.email,
ciudad.nombre_ciudad FROM tx_lzextensionejemplo_extensionejemplo registro,
tx_lzextensionejemplo_ciudades ciudad
WHERE registro.codigo_ciudad = ciudad.uid
ORDER BY registro.nombre ";
$resultset = $GLOBALS['TYPO3_DB']->sql_query($strSQL);
$arrayRegistros = array();
if(!empty($resultset)){
$iContador = 0;
while ($line = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($resultset)) {
$arrayRegistros[$iContador]['nombre'] = $line["nombre"];
$arrayRegistros[$iContador]['apellido'] = $line["apellido"];
$arrayRegistros[$iContador]['email'] = $line["email"];
$arrayRegistros[$iContador]['nombre_ciudad']=$line["nombre_ciudad"];
$iContador++;
}
$arrayRegistros['contador']=$iContador;
}
else{
$arrayRegistros['contador']= "No hay registros";
}
return $arrayRegistros;
}
}
?>
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
En la carpeta “sv1Vista” crearemos la clase Controlador.html, clase que contendrá el código que
permite visualizar en pantalla los registros y la forma en que estos se mostraran. El código de la clase
es el siguiente.
<!--###TEMPLATE### begin-->
<!--###CONTENT### -->
<!--###CONTENT_EXTENSION###-->
<table class="tabla_principal" border="0" cellpadding="0" cellspacing="0" width="600px">
<tr>
<td> Registros</td>
</tr>
<tr>
<td>
Nombre
</td>
<td >
Apellido
</td>
<td >
Email
</td>
<td>
Ciudad
</td>
</tr>
<!--###VER_REGISTROS###-->
<tr >
<td>
###NOMBRE###
</td>
<td>
###APELLIDO###
</td>
<td>
###EMAIL###
</td>
<td>
###CIUDAD###
</td>
</tr>
<!--###VER_REGISTROS###-->
</table>
<!--###CONTENT_EXTENSION###-->
<!--###CONTENT### -->
<!--###TEMPLATE### end-->
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Finalmente en la clase class.tx_lzexntensionmostrardatos_pi1.php de la carpeta pi1, agregaremos
dentro del método main, la instancia a la clase Controlador.class.php de la carpeta sv1Controlador y
llamaremos a la función que permite cargar el template. Las líneas de código son las siguientes.
function main($content,$conf) {
$this->conf=$conf;
$this->pi_setPiVarDefaults();
$this->pi_loadLL();
global $TYPO3_CONF_VARS;
$parameters = unserialize($TYPO3_CONF_VARS['EXT']['extConf'][$this->extKey]);
require(t3lib_extMgm::extPath($this-
>extKey)."sv1/Controlador/Controlador.class.php");
$oControlador = new Controlador($this,$version="v00",$confLocal = $conf,$confGlobal
= $parameters ,$confFlex = null,"CONTENT_EXTENSION");
/*
* Se carga la configuracion inicial
*/
$content.= $oControlador->getHtml($_GET);
/*$GLOBALS['TSFE']->additionalHeaderData[$this->prefixId] = $oControlador-
>getHeader(false,true);*/
$content = '<form name="frmsolicitudes" method="post" id="frmsolicitudes"
action="">' .
'<div id="div_menu">
'.$content.'
</div>
</form>';
return $this->pi_wrapInBaseClass($content);
}
Con esto hemos terminando de darle las funcionalidades a nuestra extensión.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
Ahora iremos al backend de Typo3 y crearemos una página en la cual mostraremos los registros, que
tendrá como contenido el plugins de nuestra extensión.
Para instalar el plugins en la nueva página debemos ir a al menú “WebPage”, hacemos click en
nuestra página y hacemos click en “Create page content”
En la pantalla desplegada vamos a Plugins y hacemos click en la opción “General Plugin”.
Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2
Víctor Aravena Díaz, victor.aravena@ceisufro.cl;
Jorge Colipe, jorge.colipe@lazos.cl
Ronald Morales, ronald.morales@opensystem.cl
www.lazos.cl
En la siguiente pantalla, seleccionamos el combo box Plugin.
Buscamos el nombre del título que le dimos a nuestra extensión (para nuestro ejemplo: Mostrar datos),
aceptamos el mensaje y así hemos instalado el plugins de nuestra extensión en la página.
Abrimos nuestro sitio en el navegador, nos vamos a la página que creamos y le instalamos el plugins de
nuestra extensión y veremos todos los registros que hemos ingresado.

Mais conteúdo relacionado

Mais procurados

JavaScript
JavaScriptJavaScript
JavaScriptJomicast
 
Visual basic
Visual basicVisual basic
Visual basicjosser96
 
Manual de presta shop
Manual de presta shopManual de presta shop
Manual de presta shopNamek Studio
 
1 clase entorno grafico de visual basic
1 clase entorno grafico de visual basic1 clase entorno grafico de visual basic
1 clase entorno grafico de visual basicRaul Cota
 
Manual cmaptools lourdesluengo
Manual cmaptools lourdesluengoManual cmaptools lourdesluengo
Manual cmaptools lourdesluengoIrene Pringle
 
Manual cmaptools lourdesluengo
Manual cmaptools lourdesluengoManual cmaptools lourdesluengo
Manual cmaptools lourdesluengoUDELAS
 
USO DE HERRAMIENTAS IDE VISUAL C++
USO DE HERRAMIENTAS IDE VISUAL C++USO DE HERRAMIENTAS IDE VISUAL C++
USO DE HERRAMIENTAS IDE VISUAL C++Luz Fa Calderòn
 
Construcción de componente basado en fluid viewhelper y FEDext
Construcción de componente basado en fluid viewhelper y FEDextConstrucción de componente basado en fluid viewhelper y FEDext
Construcción de componente basado en fluid viewhelper y FEDextFrancisco Llanquipichun
 
Estructura general de una app
Estructura general de una app Estructura general de una app
Estructura general de una app Angel Ayala
 
Formulario
FormularioFormulario
Formularioljds
 
09. manual gestion de tablet primaria y acceso al hp classroom manager
09. manual gestion de tablet primaria y acceso al hp classroom manager09. manual gestion de tablet primaria y acceso al hp classroom manager
09. manual gestion de tablet primaria y acceso al hp classroom managerKarito Lizeth Benites Socola
 

Mais procurados (17)

Programacion2
Programacion2Programacion2
Programacion2
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Visual basic
Visual basicVisual basic
Visual basic
 
Manual de presta shop
Manual de presta shopManual de presta shop
Manual de presta shop
 
Proyecto visual studio
Proyecto visual studioProyecto visual studio
Proyecto visual studio
 
Como editar wiki
Como editar wikiComo editar wiki
Como editar wiki
 
1 clase entorno grafico de visual basic
1 clase entorno grafico de visual basic1 clase entorno grafico de visual basic
1 clase entorno grafico de visual basic
 
Manual cmaptools lourdesluengo
Manual cmaptools lourdesluengoManual cmaptools lourdesluengo
Manual cmaptools lourdesluengo
 
Manual cmaptools lourdesluengo
Manual cmaptools lourdesluengoManual cmaptools lourdesluengo
Manual cmaptools lourdesluengo
 
crear una web
crear una web crear una web
crear una web
 
Manual de dreamweaver listo
Manual de dreamweaver listoManual de dreamweaver listo
Manual de dreamweaver listo
 
USO DE HERRAMIENTAS IDE VISUAL C++
USO DE HERRAMIENTAS IDE VISUAL C++USO DE HERRAMIENTAS IDE VISUAL C++
USO DE HERRAMIENTAS IDE VISUAL C++
 
Construcción de componente basado en fluid viewhelper y FEDext
Construcción de componente basado en fluid viewhelper y FEDextConstrucción de componente basado en fluid viewhelper y FEDext
Construcción de componente basado en fluid viewhelper y FEDext
 
Estructura general de una app
Estructura general de una app Estructura general de una app
Estructura general de una app
 
Unidad 1 margara
Unidad 1 margaraUnidad 1 margara
Unidad 1 margara
 
Formulario
FormularioFormulario
Formulario
 
09. manual gestion de tablet primaria y acceso al hp classroom manager
09. manual gestion de tablet primaria y acceso al hp classroom manager09. manual gestion de tablet primaria y acceso al hp classroom manager
09. manual gestion de tablet primaria y acceso al hp classroom manager
 

Destaque

Kinderzeitung Juni09
Kinderzeitung Juni09Kinderzeitung Juni09
Kinderzeitung Juni09guest2b7c0692
 
Periódico El baúl edición provincia de Tenerife
Periódico El baúl edición  provincia de  TenerifePeriódico El baúl edición  provincia de  Tenerife
Periódico El baúl edición provincia de TenerifeElBaúl ServTec
 
Ira hot ira topics
Ira   hot ira topicsIra   hot ira topics
Ira hot ira topicsgeann123
 
Presentación zona-informática
Presentación zona-informáticaPresentación zona-informática
Presentación zona-informáticaAbigail bellodas
 
LOESCHE: OVERVIEW
LOESCHE: OVERVIEWLOESCHE: OVERVIEW
LOESCHE: OVERVIEWLOESCHE
 
Algunos proyectos en ceip son quint
Algunos proyectos en ceip son quintAlgunos proyectos en ceip son quint
Algunos proyectos en ceip son quintjmsegui
 
Insertar Elemento de Contenido PHP en Typo3 6.0+ 6.2+
Insertar Elemento de Contenido PHP en Typo3 6.0+ 6.2+Insertar Elemento de Contenido PHP en Typo3 6.0+ 6.2+
Insertar Elemento de Contenido PHP en Typo3 6.0+ 6.2+Victor Aravena
 
Contaminación del agua y del aire..
Contaminación del agua y del aire..Contaminación del agua y del aire..
Contaminación del agua y del aire..Irene Romero
 
A critical review of using the peukert equation for determining the remaining...
A critical review of using the peukert equation for determining the remaining...A critical review of using the peukert equation for determining the remaining...
A critical review of using the peukert equation for determining the remaining...componer
 
Impulsseminar werden sie ein kunden unternehmen - wissensraum 20130606
Impulsseminar werden sie ein kunden unternehmen - wissensraum 20130606Impulsseminar werden sie ein kunden unternehmen - wissensraum 20130606
Impulsseminar werden sie ein kunden unternehmen - wissensraum 20130606ihrepartner.ch gmbh
 
Morfogénesis Panicum coloratum y Tetrachne dregei
Morfogénesis Panicum coloratum y Tetrachne dregeiMorfogénesis Panicum coloratum y Tetrachne dregei
Morfogénesis Panicum coloratum y Tetrachne dregeiUNSL
 
N 20100315 nicolás copérnico
N 20100315 nicolás copérnicoN 20100315 nicolás copérnico
N 20100315 nicolás copérnicorubindecelis32
 
Observatorio de la accesibilidad universal en el transporte.
Observatorio de la accesibilidad universal en el transporte.Observatorio de la accesibilidad universal en el transporte.
Observatorio de la accesibilidad universal en el transporte.José María
 
Curso monitor musculación y fitness
Curso monitor musculación y fitnessCurso monitor musculación y fitness
Curso monitor musculación y fitnessEuroinnova Formación
 
BYOD - Bring your own data. Wearable Tech und Shared Data für die Medizin
BYOD - Bring your own data. Wearable Tech und Shared Data für die MedizinBYOD - Bring your own data. Wearable Tech und Shared Data für die Medizin
BYOD - Bring your own data. Wearable Tech und Shared Data für die MedizinJoerg Blumtritt
 

Destaque (20)

red tienda444
red tienda444red tienda444
red tienda444
 
Kinderzeitung Juni09
Kinderzeitung Juni09Kinderzeitung Juni09
Kinderzeitung Juni09
 
Periódico El baúl edición provincia de Tenerife
Periódico El baúl edición  provincia de  TenerifePeriódico El baúl edición  provincia de  Tenerife
Periódico El baúl edición provincia de Tenerife
 
Ira hot ira topics
Ira   hot ira topicsIra   hot ira topics
Ira hot ira topics
 
Presentación zona-informática
Presentación zona-informáticaPresentación zona-informática
Presentación zona-informática
 
LOESCHE: OVERVIEW
LOESCHE: OVERVIEWLOESCHE: OVERVIEW
LOESCHE: OVERVIEW
 
Abp master uc 2015 16
Abp master uc 2015 16Abp master uc 2015 16
Abp master uc 2015 16
 
Algunos proyectos en ceip son quint
Algunos proyectos en ceip son quintAlgunos proyectos en ceip son quint
Algunos proyectos en ceip son quint
 
Insertar Elemento de Contenido PHP en Typo3 6.0+ 6.2+
Insertar Elemento de Contenido PHP en Typo3 6.0+ 6.2+Insertar Elemento de Contenido PHP en Typo3 6.0+ 6.2+
Insertar Elemento de Contenido PHP en Typo3 6.0+ 6.2+
 
Saber y complejidad
Saber y complejidadSaber y complejidad
Saber y complejidad
 
Lingüística andina histórica
Lingüística andina históricaLingüística andina histórica
Lingüística andina histórica
 
Contaminación del agua y del aire..
Contaminación del agua y del aire..Contaminación del agua y del aire..
Contaminación del agua y del aire..
 
A critical review of using the peukert equation for determining the remaining...
A critical review of using the peukert equation for determining the remaining...A critical review of using the peukert equation for determining the remaining...
A critical review of using the peukert equation for determining the remaining...
 
Impulsseminar werden sie ein kunden unternehmen - wissensraum 20130606
Impulsseminar werden sie ein kunden unternehmen - wissensraum 20130606Impulsseminar werden sie ein kunden unternehmen - wissensraum 20130606
Impulsseminar werden sie ein kunden unternehmen - wissensraum 20130606
 
Morfogénesis Panicum coloratum y Tetrachne dregei
Morfogénesis Panicum coloratum y Tetrachne dregeiMorfogénesis Panicum coloratum y Tetrachne dregei
Morfogénesis Panicum coloratum y Tetrachne dregei
 
N 20100315 nicolás copérnico
N 20100315 nicolás copérnicoN 20100315 nicolás copérnico
N 20100315 nicolás copérnico
 
Observatorio de la accesibilidad universal en el transporte.
Observatorio de la accesibilidad universal en el transporte.Observatorio de la accesibilidad universal en el transporte.
Observatorio de la accesibilidad universal en el transporte.
 
Curso monitor musculación y fitness
Curso monitor musculación y fitnessCurso monitor musculación y fitness
Curso monitor musculación y fitness
 
D resume
D resumeD resume
D resume
 
BYOD - Bring your own data. Wearable Tech und Shared Data für die Medizin
BYOD - Bring your own data. Wearable Tech und Shared Data für die MedizinBYOD - Bring your own data. Wearable Tech und Shared Data für die Medizin
BYOD - Bring your own data. Wearable Tech und Shared Data für die Medizin
 

Semelhante a Manual desarrollo extensiones typo3

modelo vista controlador
modelo vista controladormodelo vista controlador
modelo vista controladorcom2merwil
 
Anexo 21-actividad-6
Anexo 21-actividad-6Anexo 21-actividad-6
Anexo 21-actividad-6Draven Draven
 
Backend middleware frontend (2)
Backend middleware frontend (2)Backend middleware frontend (2)
Backend middleware frontend (2)VirgCSan
 
Sistema de ventas, compras y almacén
Sistema de ventas, compras y almacénSistema de ventas, compras y almacén
Sistema de ventas, compras y almacénLeo Ruelas Rojas
 
Maestrosdelweb guia-android
Maestrosdelweb guia-androidMaestrosdelweb guia-android
Maestrosdelweb guia-androidNilson Gongora
 
Mdw guia-android-1.3
Mdw guia-android-1.3Mdw guia-android-1.3
Mdw guia-android-1.3ERWIN AGUILAR
 
Mdw guia-android-1.3
Mdw guia-android-1.3Mdw guia-android-1.3
Mdw guia-android-1.3Leo31146695
 
Maestrosdelweb guia-android
Maestrosdelweb guia-androidMaestrosdelweb guia-android
Maestrosdelweb guia-androidCarlitos Sosa
 
Fundamentos de la arquitectura de software
Fundamentos de la arquitectura de softwareFundamentos de la arquitectura de software
Fundamentos de la arquitectura de softwarePaco Rivera
 
Smgp dap (definicion del-alcance)-v2-docx
Smgp dap (definicion del-alcance)-v2-docxSmgp dap (definicion del-alcance)-v2-docx
Smgp dap (definicion del-alcance)-v2-docxJose Farias
 

Semelhante a Manual desarrollo extensiones typo3 (20)

Practica int 3
Practica int 3Practica int 3
Practica int 3
 
modelo vista controlador
modelo vista controladormodelo vista controlador
modelo vista controlador
 
modelo MVC.pptx
modelo MVC.pptxmodelo MVC.pptx
modelo MVC.pptx
 
Anexo 26-practica-7
Anexo 26-practica-7Anexo 26-practica-7
Anexo 26-practica-7
 
Anexo 21-actividad-6
Anexo 21-actividad-6Anexo 21-actividad-6
Anexo 21-actividad-6
 
Tema 3
Tema 3Tema 3
Tema 3
 
patrón MVC.pdf
patrón MVC.pdfpatrón MVC.pdf
patrón MVC.pdf
 
Backend middleware frontend (2)
Backend middleware frontend (2)Backend middleware frontend (2)
Backend middleware frontend (2)
 
Sistema de ventas, compras y almacén
Sistema de ventas, compras y almacénSistema de ventas, compras y almacén
Sistema de ventas, compras y almacén
 
Android
AndroidAndroid
Android
 
Maestrosdelweb guia-android
Maestrosdelweb guia-androidMaestrosdelweb guia-android
Maestrosdelweb guia-android
 
Mdw guia-android-1.3
Mdw guia-android-1.3Mdw guia-android-1.3
Mdw guia-android-1.3
 
Guía Android
Guía AndroidGuía Android
Guía Android
 
Mdw guia-android-1.3
Mdw guia-android-1.3Mdw guia-android-1.3
Mdw guia-android-1.3
 
Mdw guia-android
Mdw guia-androidMdw guia-android
Mdw guia-android
 
Maestrosdelweb guia-android
Maestrosdelweb guia-androidMaestrosdelweb guia-android
Maestrosdelweb guia-android
 
Fundamentos de la arquitectura de software
Fundamentos de la arquitectura de softwareFundamentos de la arquitectura de software
Fundamentos de la arquitectura de software
 
Smgp dap (definicion del-alcance)-v2-docx
Smgp dap (definicion del-alcance)-v2-docxSmgp dap (definicion del-alcance)-v2-docx
Smgp dap (definicion del-alcance)-v2-docx
 
Anexo 27-practica-8
Anexo 27-practica-8Anexo 27-practica-8
Anexo 27-practica-8
 
ejemplo de diseño
ejemplo de diseñoejemplo de diseño
ejemplo de diseño
 

Mais de Victor Aravena

Personajes y comerciantes del mercado municipal
Personajes y comerciantes del mercado municipalPersonajes y comerciantes del mercado municipal
Personajes y comerciantes del mercado municipalVictor Aravena
 
Presentación CISTI 2016 "Distinciones Conceptuales para la Trazabilidad de l...
Presentación CISTI 2016 "Distinciones Conceptuales para la Trazabilidad de l...Presentación CISTI 2016 "Distinciones Conceptuales para la Trazabilidad de l...
Presentación CISTI 2016 "Distinciones Conceptuales para la Trazabilidad de l...Victor Aravena
 
Taller generación codigopersistenciaderby-netbeans
Taller generación codigopersistenciaderby-netbeansTaller generación codigopersistenciaderby-netbeans
Taller generación codigopersistenciaderby-netbeansVictor Aravena
 
Estrategia e Implementación de Sistema Sidra en Chile!!!
Estrategia e Implementación de Sistema Sidra en Chile!!!Estrategia e Implementación de Sistema Sidra en Chile!!!
Estrategia e Implementación de Sistema Sidra en Chile!!!Victor Aravena
 
1. tutorial unity3d introducción
1.  tutorial unity3d introducción1.  tutorial unity3d introducción
1. tutorial unity3d introducciónVictor Aravena
 
2. tutorial unity3d-disparo
2.  tutorial unity3d-disparo2.  tutorial unity3d-disparo
2. tutorial unity3d-disparoVictor Aravena
 
6. revisión y modificación del juego -“space blaster”- Construct 5 - VideoGame
6.  revisión y modificación del juego -“space blaster”- Construct 5 - VideoGame6.  revisión y modificación del juego -“space blaster”- Construct 5 - VideoGame
6. revisión y modificación del juego -“space blaster”- Construct 5 - VideoGameVictor Aravena
 
4. elementos apoyotaller-tutorialguiabasica 2014
4.  elementos apoyotaller-tutorialguiabasica 20144.  elementos apoyotaller-tutorialguiabasica 2014
4. elementos apoyotaller-tutorialguiabasica 2014Victor Aravena
 
3. tutorialguiabasico 2014
3.  tutorialguiabasico 20143.  tutorialguiabasico 2014
3. tutorialguiabasico 2014Victor Aravena
 
2. principales elementos
2.  principales elementos2.  principales elementos
2. principales elementosVictor Aravena
 
1. instalaciondeconstruct2 2014
1.  instalaciondeconstruct2 20141.  instalaciondeconstruct2 2014
1. instalaciondeconstruct2 2014Victor Aravena
 
5. taller tutorial-guiabasica 2014
5.  taller tutorial-guiabasica 20145.  taller tutorial-guiabasica 2014
5. taller tutorial-guiabasica 2014Victor Aravena
 
1. tutorial unity3d introducción
1.  tutorial unity3d introducción1.  tutorial unity3d introducción
1. tutorial unity3d introducciónVictor Aravena
 
2. tutorial unity3d-disparo
2.  tutorial unity3d-disparo2.  tutorial unity3d-disparo
2. tutorial unity3d-disparoVictor Aravena
 
Acm ioi-olimpiada informática - universidad frontera 2013
Acm ioi-olimpiada informática - universidad frontera 2013Acm ioi-olimpiada informática - universidad frontera 2013
Acm ioi-olimpiada informática - universidad frontera 2013Victor Aravena
 
Curso veranovideojuegos 2014
Curso veranovideojuegos 2014Curso veranovideojuegos 2014
Curso veranovideojuegos 2014Victor Aravena
 
Factorial again! Olimpiada Informática Media IOI- ACM
Factorial again! Olimpiada  Informática Media IOI- ACMFactorial again! Olimpiada  Informática Media IOI- ACM
Factorial again! Olimpiada Informática Media IOI- ACMVictor Aravena
 
Formulario de implementación de componentes de software transaccional de amb...
Formulario de implementación de  componentes de software transaccional de amb...Formulario de implementación de  componentes de software transaccional de amb...
Formulario de implementación de componentes de software transaccional de amb...Victor Aravena
 
Taller1 generación codigopersistencia
Taller1 generación codigopersistenciaTaller1 generación codigopersistencia
Taller1 generación codigopersistenciaVictor Aravena
 

Mais de Victor Aravena (20)

Personajes y comerciantes del mercado municipal
Personajes y comerciantes del mercado municipalPersonajes y comerciantes del mercado municipal
Personajes y comerciantes del mercado municipal
 
Presentación CISTI 2016 "Distinciones Conceptuales para la Trazabilidad de l...
Presentación CISTI 2016 "Distinciones Conceptuales para la Trazabilidad de l...Presentación CISTI 2016 "Distinciones Conceptuales para la Trazabilidad de l...
Presentación CISTI 2016 "Distinciones Conceptuales para la Trazabilidad de l...
 
Taller generación codigopersistenciaderby-netbeans
Taller generación codigopersistenciaderby-netbeansTaller generación codigopersistenciaderby-netbeans
Taller generación codigopersistenciaderby-netbeans
 
Estrategia e Implementación de Sistema Sidra en Chile!!!
Estrategia e Implementación de Sistema Sidra en Chile!!!Estrategia e Implementación de Sistema Sidra en Chile!!!
Estrategia e Implementación de Sistema Sidra en Chile!!!
 
1. tutorial unity3d introducción
1.  tutorial unity3d introducción1.  tutorial unity3d introducción
1. tutorial unity3d introducción
 
2. tutorial unity3d-disparo
2.  tutorial unity3d-disparo2.  tutorial unity3d-disparo
2. tutorial unity3d-disparo
 
6. revisión y modificación del juego -“space blaster”- Construct 5 - VideoGame
6.  revisión y modificación del juego -“space blaster”- Construct 5 - VideoGame6.  revisión y modificación del juego -“space blaster”- Construct 5 - VideoGame
6. revisión y modificación del juego -“space blaster”- Construct 5 - VideoGame
 
4. elementos apoyotaller-tutorialguiabasica 2014
4.  elementos apoyotaller-tutorialguiabasica 20144.  elementos apoyotaller-tutorialguiabasica 2014
4. elementos apoyotaller-tutorialguiabasica 2014
 
3. tutorialguiabasico 2014
3.  tutorialguiabasico 20143.  tutorialguiabasico 2014
3. tutorialguiabasico 2014
 
2. principales elementos
2.  principales elementos2.  principales elementos
2. principales elementos
 
1. instalaciondeconstruct2 2014
1.  instalaciondeconstruct2 20141.  instalaciondeconstruct2 2014
1. instalaciondeconstruct2 2014
 
5. taller tutorial-guiabasica 2014
5.  taller tutorial-guiabasica 20145.  taller tutorial-guiabasica 2014
5. taller tutorial-guiabasica 2014
 
1. tutorial unity3d introducción
1.  tutorial unity3d introducción1.  tutorial unity3d introducción
1. tutorial unity3d introducción
 
2. tutorial unity3d-disparo
2.  tutorial unity3d-disparo2.  tutorial unity3d-disparo
2. tutorial unity3d-disparo
 
Acm ioi-olimpiada informática - universidad frontera 2013
Acm ioi-olimpiada informática - universidad frontera 2013Acm ioi-olimpiada informática - universidad frontera 2013
Acm ioi-olimpiada informática - universidad frontera 2013
 
Curso veranovideojuegos 2014
Curso veranovideojuegos 2014Curso veranovideojuegos 2014
Curso veranovideojuegos 2014
 
Factorial again! Olimpiada Informática Media IOI- ACM
Factorial again! Olimpiada  Informática Media IOI- ACMFactorial again! Olimpiada  Informática Media IOI- ACM
Factorial again! Olimpiada Informática Media IOI- ACM
 
Formulario de implementación de componentes de software transaccional de amb...
Formulario de implementación de  componentes de software transaccional de amb...Formulario de implementación de  componentes de software transaccional de amb...
Formulario de implementación de componentes de software transaccional de amb...
 
Encuentro linux 2013
Encuentro linux 2013Encuentro linux 2013
Encuentro linux 2013
 
Taller1 generación codigopersistencia
Taller1 generación codigopersistenciaTaller1 generación codigopersistencia
Taller1 generación codigopersistencia
 

Último

Herramientas de corte de alta velocidad.pptx
Herramientas de corte de alta velocidad.pptxHerramientas de corte de alta velocidad.pptx
Herramientas de corte de alta velocidad.pptxRogerPrieto3
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesFundación YOD YOD
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricKeyla Dolores Méndez
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveFagnerLisboa3
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíassuserf18419
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITMaricarmen Sánchez Ruiz
 
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxPresentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxLolaBunny11
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan JosephBRAYANJOSEPHPEREZGOM
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfsoporteupcology
 
9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudianteAndreaHuertas24
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...silviayucra2
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)GDGSucre
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdfIsabellaMontaomurill
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx241521559
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIAWilbisVega
 

Último (15)

Herramientas de corte de alta velocidad.pptx
Herramientas de corte de alta velocidad.pptxHerramientas de corte de alta velocidad.pptx
Herramientas de corte de alta velocidad.pptx
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxPresentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptx
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
 
9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
 

Manual desarrollo extensiones typo3

  • 1. “Desarrollo de Extensiones Typo3” Víctor Aravena
  • 2. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl Tabla de Contenidos. 1. DESARROLLO DE EXTENSIONES.................................................................... 3 1.1 KICKSTARTER. ....................................................................................... 3 1.2 DESARROLLO DE EXTENSIÓN BÁSICA............................................................ 4 2. ESTANDAR DE DESARROLLO EXTENSIONES. ....................................................12 2.1 MODELO VISTA CONTROLADOR (MVC). ........................................................12 3. ESTÁNDAR DE DESARROLLO DE EXTENSIONES HECHAS EN TYPO3.........................13 4. IMPLEMENTACION FORMULARIO APLICANDO MVC.............................................20 4.1 CONTROLADOR.....................................................................................20 4.2 MODELO. ............................................................................................24 4.3 VISTA.................................................................................................25 4.4 IMPLEMENTACIÓN..................................................................................26 5. CONSIDERACIONES GENERALES...................................................................26 6. ANEXO A. .............................................................................................28 6.1 MODIFICANDO EL EJEMPLO. .....................................................................28 7. ANEXO B. .............................................................................................45 7.1. MOSTRAR DATOS..................................................................................45
  • 3. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl 1. DESARROLLO DE EXTENSIONES. 1.1 Kickstarter. Typo3 posee la extensión KickStarter que nos permite crear nuevas extensiones y editarlas una vez que éstas fueron creadas. A partir de la versión 4.6 de Typo3, dicha extensión debe ser instalada (revisar manual básico de typo3, instalación de extensiones). Una vez que tenemos instalada la extensión, nos vamos al módulo Tools>Ext Manager>Menu y seleccionamos “Make new extensión”. En la pantalla desplegada tenemos el marco de trabajo para el desarrollo de extensiones. Si hacemos click en el signo más podremos ir viendo las distintas opciones de configuración que tenemos para la nueva extensión. En “Enter extensión key”, debemos poner un identificador, el cual será único para cada extensión.
  • 4. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl 1.2 Desarrollo de extensión básica. Debemos ir al módulo Tools>Ext Manager>Menu y seleccionamos “Make new extensión”. Lo primero que haremos será darle el key identificador de nuestra extensión, que será “lz_extensionejemplo”, en el nombre de nuestra extensión, el prefijo “lz” corresponde al estándar de desarrollo de la empresa Lazos. Importante recordar que dos extensiones no podrán tener el mismo nombre. En información general tendremos la siguiente configuración. Hacemos click en Update y los cambios son guardados.
  • 5. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl En “New Database Tables” damos el nombre a la tabla que será creada en nuestra base de datos y además crearemos dos campos: nombre y apellido, que serán de tipo “text area”. Para crear los campos tenemos que ir al final de la pantalla, darle el nombre al campo, el tipo y hacemos click en “Update”, automáticamente Typo3 nos dará la opción de crear otro campo, nuevamente le damos el nombre del campo, el tipo y hacemos click en “Update”. Por cada campo que se quiera crear se deben seguir los pasos anteriores.
  • 6. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl
  • 7. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl En “Frontend Plugins”, asignamos el nombre que se mostrará en la lista de Plugins cuando se inserte nuestra extensión como Plugins de una página. Hacemos click en “Update” y los cambios son guardados. En “Services” le damos el título “mvc” (que corresponde a nuestro Modelo Vista Controlador). Con ello se crea la carpeta “sv1” de la extensión. Con los servicios, podemos extender las funcionalidades de las extensiones, permitiendo desarrollar un código más robusto implementando el patrón de diseño MVC. Guardamos los cambios haciendo click en “Update”. Una vez que tenemos todos los parámetros de configuración listos, hacemos click en “View result” y finalmente hacemos click en “WRITE”.
  • 8. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Aceptamos el mensaje y nuestra extensión ha sido creada con éxito.
  • 9. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Para instalar la extensión, hacemos click en “Install extensión”. La pantalla desplegada nos muestra los cambios que se harán en la base de datos. Hacemos click en “Make updates” y la extensión ha sido instalada.
  • 10. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl
  • 11. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Si vamos a Tool>Ext Manager>Menu>Loaded extensions, veremos la extensión.
  • 12. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl 2. ESTANDAR DE DESARROLLO EXTENSIONES. 2.1 Modelo vista controlador (MVC). Modelo Vista Controlador (MVC) es un patrón de arquitectura de software que separa los datos de una aplicación, la interfaz de usuario, y la lógica de control en tres componentes distintos. El patrón MVC se ve frecuentemente en aplicaciones web, donde la vista es la página HTML y el código que provee de datos dinámicos a la página; el modelo es el Sistema de Gestión de Base de Datos y la Lógica de negocio; y el controlador es el responsable de recibir los eventos de entrada desde la vista.  Modelo: Esta es la representación específica de la información con la cual el sistema opera. La lógica de datos asegura la integridad de éstos y permite derivar nuevos datos; por ejemplo, no permitiendo comprar un número de unidades negativo, calculando si hoy es el cumpleaños del usuario o los totales, impuestos o importes en un carrito de la compra.  Vista: Este presenta el modelo en un formato adecuado para interactuar, usualmente con la interfaz de usuario.  Controlador: Este responde a eventos, usualmente acciones del usuario e invoca cambios en el modelo y probablemente en la vista. Muchos sistemas informáticos utilizan un Sistema de Gestión de Base de Datos para gestionar los datos. En MVC corresponde al modelo. Aunque se pueden encontrar diferentes implementaciones de MVC, el flujo que sigue el control generalmente es el siguiente: 1. El usuario interactúa con la interfaz de usuario de alguna forma (por ejemplo, el usuario pulsa un botón, enlace, etc.) 2. El controlador recibe (por parte de los objetos de la interfaz-vista) la notificación de la acción solicitada por el usuario. El controlador gestiona el evento que llega, frecuentemente a través de un gestor de eventos (handler) o callback. 3. El controlador accede al modelo, actualizándolo, posiblemente modificándolo de forma adecuada a la acción solicitada por el usuario (por ejemplo, el controlador actualiza el carro de la compra del usuario). Los controladores complejos están a menudo estructurados usando un patrón de comando que encapsula las acciones y simplifica su extensión. 4. El controlador delega a los objetos de la vista la tarea de desplegar la interfaz de usuario. La vista obtiene sus datos del modelo para generar la interfaz apropiada para el usuario donde se refleja los cambios en el modelo (por ejemplo, produce un listado del contenido del carro de la compra). El modelo no debe tener conocimiento directo sobre la vista. Sin embargo, el patrón de observador puede ser utilizado para proveer cierta dirección entre el modelo y la vista, permitiendo al modelo notificar a los interesados de cualquier cambio. Un objeto vista puede registrarse con el modelo y esperar a los cambios, pero aun así el modelo en sí mismo sigue sin saber nada de la vista. El controlador no pasa objetos de dominio (el modelo) a la vista aunque puede dar la orden a la vista para que se actualice. Nota: En algunas implementaciones la vista no tiene acceso directo al modelo, dejando que el controlador envíe los datos del modelo a la vista. 5. La interfaz de usuario espera nuevas interacciones del usuario, comenzando el ciclo nuevamente. Fuente: http://es.wikipedia.org/wiki/Modelo_Vista_Controlador.
  • 13. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl 3. ESTÁNDAR DE DESARROLLO DE EXTENSIONES HECHAS EN TYPO3. Para el desarrollo de las extensiones se recomienda trabajar con la herramienta “EasyEclpipse for PHP”, la cual se puede descargar de la página oficial del proyecto, http://www.easyeclipse.org. El Workspace del “EasyEcplise for PHP” debe ser la carpeta “typo3conf” que está dentro de la carpeta de “Typo3” (en mi caso “C:TYPO3_xxhtdocsDummytypo3conf”). Creamos un proyecto PHP de nombre “ext”. Automáticamente se cargaran todos las extensiones instalas.
  • 14. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Según el patrón MVC se deben crear cuatro carpetas dentro de la carpeta “sv1” (que se crea por defecto al crear una extensión). Las carpetas son: “Modelo”, “Vista”, “Controlador” y “Otros”. Al momento de crear la extensión se añadió un Plugins a ésta, el método main de la clase “class.tx_lzextensionejemplo_pi1.php” que se encuentra dentro de la carpeta “pi1” (plugins 1). El código del archivo correspondiente a la función debe ser reemplazado por el que se muestra a continuación. El código está en la siguiente página.
  • 15. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl function main($content,$conf) { $this->conf=$conf; $this->pi_setPiVarDefaults(); $this->pi_loadLL(); global $TYPO3_CONF_VARS; $parameters = unserialize($TYPO3_CONF_VARS['EXT']['extConf'][$this->extKey]); require(t3lib_extMgm::extPath($this- >extKey)."sv1/Controlador/Controlador.class.php"); $oControlador = new Controlador($this,$version="v00",$confLocal = $conf,$confGlobal = $parameters ,$confFlex = null,"CONTENT_EXTENSION"); /* * Se carga la configuracion inicial */ $oControlador->actionEvent($_POST); $content.= $oControlador->getHtml($_GET); /*$GLOBALS['TSFE']->additionalHeaderData[$this->prefixId] = $oControlador- >getHeader(false,true);*/ $content = '<form name="frmsolicitudes" method="post" id="frmsolicitudes" action="">' . '<div id="div_menu"> '.$content.' </div> </form>'; return $this->pi_wrapInBaseClass($content); } La carpeta controlador se compone de:
  • 16. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl La clase “Controlador.class.php” se compone de los siguientes métodos. Los cuales pueden ser diferentes de acuerdo a la clase.
  • 17. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl La clase “Xajax_Controlador.class.php” se compone de los siguientes métodos, los cuales pueden ser diferentes dependiendo de la extensión. La carpeta “Vista” está compuesta por los siguientes archivos: El html, css y js deben cumplir la siguiente regla: • Deben estar validados con W3C html 4.01. • Deben estar validados los estilos según la W3C. • Deben estar validados con TAW A (Accesibilidad uno). • Los estilos debe estar agrupados en clases. • En el JavaScript, al traer el valor de un elemento este deberá ser llamado por getelementById. • En caso de ser necesario crear dos hojas de estilo, una para pantalla y otra para impresión. • La estructura del sitio en html debe estar contenida en tablas. • Deben ser probados en el navegador Firefox, Opera e Internet Explorer.
  • 18. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Las plantillas html deben tener la siguiente estructura: <html> <head> <title></title> <meta name="GENERATOR" content="Quanta Plus"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="Controlador.css"> <script type='text/javascript' src='Controlador.js'> </script> </head> <body> <!--###TEMPLATE### begin--> <!--###CONTENT### --> ############################## … … ESTRUCTURA Del html de la extension … <!--###CONTENT### --> <!--###TEMPLATE### end--> </body> </html> Las subpartes o pantallas del formulario se deben marcar en la plantilla html con el siguiente estándar. <!--###CONTENT_VER### start --> CONTENIDO <!--###CONTENT_VER### stop --> Para el detalle del contenido. <!--###DETALLE_VER### start --> CONTENIDO ITERACTIVO. .... <!--###DETALLE_VER### stop -->
  • 19. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl La carpeta “Modelo” se compone sólo de la clase que contendrá los componentes del Modelo de acuerdo al MVC. Para nuestro ejemplo esta se llama “SqlModelo.class.php”. Por cada conexión que se realice a la base datos se debe agregar un método en la clase “SqlModelo.class.php” que deberá retornar un arreglo de datos. A continuación se da un ejemplo. function getDatosFotoPortada($idFoto = NULL){ $where_clause = ' deleted!="1" AND hidden !="1"'; $sql = 'SELECT * FROM tx_lzmantenedorgaleriaalbum_foto WHERE uid="'.$idFoto.'" AND '.$where_clause; $res = $GLOBALS['TYPO3_DB']->sql_query($sql); $line = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($res); $arrayDatosFoto['ancho'] = $line['ancho_foto']; $arrayDatosFoto['alto'] = $line['alto_foto']; return $arrayDatosFoto; }
  • 20. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl La carpeta Otros contiene todas las clases adicionales que ocuparemos en nuestro desarrollo. Por ejemplo la clase forms es la clase que a través de métodos genera elementos formulario html (Combo Box, Tex tarea). 4. IMPLEMENTACION FORMULARIO APLICANDO MVC. A continuación, se implementará un formulario que permite la inserción de dos campos en la base de datos (nombre y apellido), campos que fueron creados como ejemplo cuando se creó la extensión lz_extensionejemplo. 4.1 Controlador. En la carpeta sv1Controlador (del MVC) crearemos la clase Controlador.class.php que tendrá el código que viene a continuación. - Esta clase tiene la función que carga los valores iniciales del formulario (initForm), la función que carga el html del formulario (getHtml), la función que controla los eventos (actionEvent), el controlador correspondiente a la clase y la declaración de las variables respectivas. <?php class Controlador { /** * @var object Contiene una instancia a la clase que almacena las consultas */ var $oSql; /** * @var object Contiene un instancia al plugins para herender las propiedades */ var $oPlugins;
  • 21. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl /** * @var object Contiene un instancia al plugins para herender las propiedades */ var $oForm; /** * @var string Prefijo del directorio del servicio */ var $sv; /** * @var array Contiene la configuracion Local */ var $confLocal; /** * @var array Contiene la configuracion Global */ var $confGlobal; /** * @var array Contiene contenido extra al content */ var $addContent; /** * @var array Contiene la seccion por defecto del template */ var $posSeccionTemplate; /** * Constructor de la clases */ function Controlador($oPlugins,$version,$confLocal = null,$confGlobal = null,$confFlex = null, $posSeccionTemplate = null) { /* * Asigno los valores a las variables basica del sistema */ $this->sv = "sv1/"; $this->oPlugins = $oPlugins; $this->sRuta=t3lib_extMgm::siteRelPath($this->oPlugins->extKey).$this->sv; $this->addHeader= ""; $this->addContent = ""; /* * Asigno las variables de configuracion */ $this->confGlobal = $confGlobal; $this->confLocal = $confLocal; $this->confFlex = $confFlex; /* * Asigno los atributos que son instanciados */ require_once($this->sRuta.'Modelo/SqlModelo.class.php');
  • 22. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl $this->oSql = new SqlModelo_Convenio_Iniciar($this->oPlugins->cObj->data['pages']); $this->posSeccionTemplate = $posSeccionTemplate; } /** * Metodo que carga los valores iniciales del formulario */ function initForm(){ } /** * Obtiene el html de la extension */ function getHtml($data=null) { $this->initForm(); $subpartArray = array(); $markerArray = array(); /** * Template Traspasar */ if($this->template == ""){ $this->templateHTML = 'EXT:'.$this->oPlugins->extKey.'/'.$this- >sv.'/Vista/Controlador.html'; } else{ $this->templateHTML = $this->confLocal["template"]; } /* * Obtiene el Template */ $this->templateCode = $this->oPlugins->cObj->fileResource($this->templateHTML); switch ($this->posSeccionTemplate){ case "CONTENT_EXTENSION": $template['template'] = $this->oPlugins->cObj->getSubpart($this- >templateCode,'###'.$this->posSeccionTemplate.'###'); //$subpartArray['###CONTENT_SUBPART###']=$this->oSql- >getNombreFeUser($GLOBALS["TSFE"]->fe_user->user["uid"]); break; case "CONTENT_INGRESADO": $template['template'] = $this->oPlugins->cObj->getSubpart($this- >templateCode,'###'.$this->posSeccionTemplate.'###'); break; } $content = $this->oPlugins->cObj->substituteMarkerArrayCached($template['template'],
  • 23. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl $markerArray, $subpartArray); $content.=$this->addContent; return $content; } /** * Metodo que controla los Eventos * @param $_POST $_POST Contiene las variables del pasada desde el formulario */ function actionEvent ($_POST) { if ($_POST ['ingresar']){ $nombre=$_POST["nombre"]; $apellido=$_POST["apellido"]; $valorInset = $this->oSql->insertarUsuario($nombre,$apellido); if ($valorInset) $this->posSeccionTemplate= 'CONTENT_INGRESADO'; } } } ?>
  • 24. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl 4.2 Modelo. En la carpeta sv1Modelo (del MVC) crearemos la clase SqlModelo.class.php, que contendrá el constructor de la clase y la función con la cual insertaremos el registro en la base de datos. Para la implementación de nuestro formulario el código es el siguiente (recuerde cambiar el nombre de la tabla por la que especificó al momento de crear el plugin. <?php class SqlModelo_Convenio_Iniciar { var $pid; /** * Constructor de la clases */ function SqlModelo_Convenio_Iniciar($pid) { $this->pid = $pid; } function insertarUsuario($nombre,$apellido){ $sql = 'insert into tx_lzextensionprueba_extprueba (campo1, campo2) values("'.$nombre.'","'.$apellido.'")'; $resultset = $GLOBALS['TYPO3_DB']->sql_query($sql); $line = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($resultset); return $resultset; } } ?>
  • 25. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl 4.3 Vista. En la carpeta sv1Vista (del MVC) crearemos la clase Controlador.html, que contendrá todo el código html que forma nuestro formulario. El código necesario para la implementación de nuestro formulario es el siguiente. <!--###TEMPLATE### begin--> <!--###CONTENT### --> <!--###CONTENT_EXTENSION###--> <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" summary="" class="espacioIzquierdo"> <td>Nombre</td> <td> <input type="text" name="nombre" id="nombre" /> </td> </tr> <tr> <td>Apellido</td> <td> <input type="text" name="apellido" id="apellido" /> </td> </tr> <tr> <td></td> <td> <input type="submit" name="ingresar" id="ingresar" value="Ingresar" /> </td> </tr> </table> <input type="hidden" name="que" id="que"> <!--###CONTENT_EXTENSION###--> <!--###CONTENT_INGRESADO###--> <p>correcto</p> <!--###CONTENT_INGRESADO### end--> <!--###CONTENT### --> <!--###TEMPLATE### end-->
  • 26. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl 4.4 Implementación. Finalmente creamos una página de prueba donde insertaremos como contenido el plugins de la extensión que hemos creado, y ya podemos ver nuestro formulario funcionando. 5. CONSIDERACIONES GENERALES.  El modelo debe poseer las tres capas de desarrollo.  No se aceptan procedimientos almacenados.  El motor de base de datos por defecto es MySQL.  Para conectarse al modelo de datos se deben utilizar las API de Typo3.  El código debe estar documentado según el formato phpDoc.  Las variables deben tener nombres significativos, y su prefijo debe ser el tipo que es. Tipo de dato Prefijo Entero i Flotante f Array a Double d String s objeto o  Se recomienda utilizar el ide de Ecplise para php. http://www.easyeclipse.org/site/distributions/php.html  El nombre de la extensión debe mantener el siguiente formato. o <identificación del proyecto>_<identificación del módulo>_<identificación funcionalidad> Ejemplo:  ilz_multi_galfoto  red_multi_albunfoto  El nombre del plugins debe tener el siguiente formato: o <<identificación del proyecto>_<identificación del módulo>_<identificación funcionalidad> Ejemplo:  ilz_multi_galfoto  red_multi_albunfoto
  • 27. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl  Se debe utilizar la siguiente vía de la configuración (mas información en http://wiki.typo3.org/index.php/Main_Page ) o GLOBAL: En el archivo ext_conf_template.txt o Local: en el archivo ext_typoscript_setup.txt o XML: Flexform.  Se debe disponer de una carpeta de servicio.  Se debe crear una extensión lz_<sistema>_versión_core que contenga el modelo de datos creado según el estándar de Typo3.  Mayor información en http://typo3.org/documentation/document-library/core- documentation/doc_core_api/current/view/.  Mayor información en http://wiki.typo3.org/index.php/Overview_Developer_Manuals.
  • 28. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl 6. ANEXO A. 6.1 Modificando el ejemplo. Ahora que ya sabemos cómo crear un formulario, modificaremos nuestro ejemplo agregándole dos campos más, mail y cuidad para completar el registro. Para agregar los campos nos vamos a “Ext ManagerInstall extensions” y buscamos nuestra extensión. Para ello podemos utilizar el buscador o lo podemos hacer directamente en la lista de extensión que tenemos instaladas. Hacemos click en el nombre de la extensión y seleccionamos “Edit in Kickstarter” en la combobox del esquina superior derecha. A continuación crearemos una nueva tabla en la base de datos que contendrá las ciudades. Para ello debemos hacer click en el símbolo más del ítem “New Database Tables”.
  • 29. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Le damos en nombre y el título a la nueva tabla. Nos vamos al final de la página y creamos lo campos que tendrá la tabla. Para ello le damos en nombre del campo, el título de este y el tipo de dato. Hacemos click en update.
  • 30. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Para agregar el email y la ciudad a la tabla que donde anteriormente guardábamos solo el nombre y el apellido debemos hacer click en “Extension Ejemplo” del ítem “New Database Tables”. En la pantalla desplegada, debemos ir al final de la página y en “NEW FIELD” agregar el nombre del nuevo campo, el title de este y el tipo de dato. Para nuestro ejemplo los parámetros son los siguientes.
  • 31. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Hacemos click en “update” y podemos ver nuestro nuevo campo creado. Ahora debemos crear el campo ciudad, el cual apuntara al campo código_ciudad de la tabla que hemos creado anteriormente. Importante: el tipo de dato para este campo es Database relation, lo cual nos permite indicar a que tabla apunta nuestro campo.
  • 32. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Hacemos click en update y debemos indicar a que tabla apunta el campo código_ciudad que hemos creado.
  • 33. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Ahora debemos guardar los cambios en nuestra extensión. Para ello hacemos click en Update, y luego en View Result.
  • 34. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl En la pantalla desplegada hacemos click en “Update result” y luego en “WRITE”. Aceptamos el mensaje
  • 35. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Vemos los cambios que se realizaran y hacemos click en “Make Update”. Ahora crearemos una carpeta en nuestro sitio que permitirá ver e ingresar nuevos registros a la tabla donde tenemos almacenadas las ciudades. Para ello vamos al menú de Typo3, “WebPage”, hacemos click con el botón secundario en New Typo3 Site (para nuestro ejemplo) y seleccionamos New. A continuación hacemos click en “Page (inside)”.
  • 36. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl En “Type” seleccionamos “SysFolder” y en Title le damos el nombre a la carpeta. A continuación, nos vamos al menú “List”, pinchamos en la carpeta que hemos creado recién. Debemos hacemos click en “Create New Record”.
  • 37. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Buscamos el título que le hemos dado a nuestra tabla ciudades. Hacemos click y podremos ingresar una nueva ciudad.
  • 38. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Guardamos los cambios, la nueva ciudad ha sido guardada. Ahora cada vez que queramos ingresar una nueva ciudad solo debemos hacer click el icono de “New Record” como muestra la siguiente imagen.
  • 39. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl A continuación, comenzaremos a modificar el código de nuestra extensión. Primero que todo dentro de la carpeta sv1 crearemos una nueva carpeta, que la llamaremos Otros, carpeta que tendrá las clases que prestan funcionalidades adicionales al sistema. Dentro de la carpeta crearemos la clase Form.class.php, que tendrá la función que permite llenar la combobox, código que se muestra a continuación. <?php /** * Clase que permite Insertar Campo de Formularios * * Uso: * $frm= new DoForm(); * @package res.formulario * @author Victor Aravena victor.aravena@gmail.com * @version 1.1 * @copyright Opensource */ class DoForm { /** * Muestra un select pasando una arreglo unidemensional o bidimensional * Usage: * $frm->select( array(array("1","v1"), array("2","v2"),array("3","v3"), array("4","v4")),"test","id_test", 4 ,""); * @param string|integer $array Arreglo bidemensional o unidemensional con los valores y la descripcion * @param string $nombre Nombre del Select * @param string $id Nombre id del select * @param string|integer $defecto Valor por defecto * @param string $extraTag Configuracion extra * @return string Codigo html generado del select */ function select($array,$nombre,$id,$defecto,$extraTag) { $i=0; $x=count($array); $salida='<select name="'.$nombre.'" id="'.$id.'" '.$extraTag.'>'; //$salida.="<option value='0' selected>"; //$salida.="----.-----</option>"; if ($x != "0"){ while ($i<$x){ $ck=''; if($array[$i][1]) {
  • 40. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl if($array[$i][1]==$defecto) { $ck=' selected'; } } else { if($array[$i][0]==$defecto) { $ck=' selected'; } } if($array[$i][0]==$defecto){ $ck=' selected'; } $salida.="<option value='".$array[$i][0]."' $ck>"; if($array[$i][1]) { $salida.=$array[$i][1]."</option>"; } else { $salida.=$array[$i][0]."</option>"; } $i=$i+1; }//fin while } $salida=$salida."</select>"; return $salida; } } ?> En nuestra clase Controlador.class.php que se encuentra en sv1Controlador, haremos las siguientes modificaciones. Debemos declarar la variable extKey. El controlador de la clase debe recibir como parámetro aConfigExt, además de los que ya recibe.
  • 41. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Agregamos la asignación del valor de nuestra nueva variable en nuestro controlador. $this->extKey=$aConfigExt['extKey']; En el constructor de la clase Controlador.class.php debemos agregar el parámetro que acabamos de declarar ($aConfigExt) en el método constructor. El código final es el siguiente: function Controlador($aConfigExt, $oPlugins,$version,$confLocal = null,$confGlobal = null,$confFlex = null, $posSeccionTemplate = null) Creamos la instancia a la clase Form.class.php. require_once(t3lib_extMgm::extPath($this->extKey).'/sv1/Otros/Forms.class.php'); $this->oForm = new DoForm(); En el case CONTENT_EXTENSION de la función getHtml debemos agregar el código que nos permite llenar la combobox. $markerArray['###CIUDAD###'] = $this->oForm->select($this->oSql->ciudad(), "codigo_ciudad", "codigo_ciudad",' ', ''); Este código debe copiarse después del siguiente código: case "CONTENT_EXTENSION": $template['template'] = $this->oPlugins->cObj->getSubpart($this->templateCode,'###'.$this- >posSeccionTemplate.'###'); En la función actionEvent, debemos obtener los valores de nuestros nuevos campos y pasárselos a la función que permite insertar el nuevo registro en la base de datos. function actionEvent ($_POST) { if ($_POST ['ingresar']){ $nombre=$_POST["nombre"]; $apellido=$_POST["apellido"]; $email=$_POST["email"]; $codigociudad=$_POST["codigo_ciudad"]; $valorInset = $this->oSql->insertarUsuario($nombre,$apellido,$email,$codigociudad); if ($valorInset) { $this->posSeccionTemplate= 'CONTENT_INGRESADO'; } } }
  • 42. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl En la carpeta sv1Modelo (del MVC) debemos modificar la clase SqlModelo.class.php. Para la implementación de nuestro formulario el código es el siguiente (recuerde cambiar el nombre de la tabla por la que especificó al momento de crear el plugin. <?php class SqlModelo_Convenio_Iniciar { var $pid; /** * Constructor de la clases */ function SqlModelo_Convenio_Iniciar($pid) { $this->pid = $pid; } function insertarUsuario($nombre,$apellido,$email,$codigociudad){ $sql = 'insert into tx_lzextensionprueba_extprueba (campo1, campo2 , campo3, campo4) values("'.$nombre.'","'.$apellido.'","'.$ email.'","'.$ codigociudad.'")'; $resultset = $GLOBALS['TYPO3_DB']->sql_query($sql); $line = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($resultset); return $resultset; } } ?> En la clase class.tx_lzextensionejemplo_pi1.php de la carpeta pi1 debemos realizar las siguientes modificaciones. En la función main debemos agregar la siguiente línea de código. $aConfigFlexForm['extKey']=$this->extKey; Se debe editar la instancia al objeto Controlador del archivo class.tx_lzextensionejemplo_pi1.php. El código final debe quedar de la siguiente forma: $oControlador = new Controlador($aConfigFlexForm, $this,$version="v00",$confLocal = $conf,$confGlobal = $parameters ,$confFlex = null,"CONTENT_EXTENSION");
  • 43. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl En la clase SqlModelo.class.php debemos modificar la función que ingresar el registro a la base de datos y agregar la función que nos retorna el arreglo con los nombres de las ciudades. El código es el siguiente. function ciudad(){ $sql = 'SELECT uid, nombre_ciudad FROM tx_lzextensionejemplo_ciudad'; $res = $GLOBALS['TYPO3_DB']->sql_query($sql); $arrayDatos[0][0] = 0; $arrayDatos[0][1] = "------ Seleccione Ciudad ------"; $contador = 1; while ($lineFormulario = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($res)) { $arrayDatos[$contador][0] = $lineFormulario["uid"]; $arrayDatos[$contador][1] = $lineFormulario["nombre_ciudad"]; $contador++; } $GLOBALS['TYPO3_DB']->sql_free_result($res); return $arrayDatos; } } ?> También debemos modificar la función insertarUsuario y agregar los nuevos parámetros correspondientes a “email” y “ciudad”: function insertarUsuario($nombre,$apellido, $email, $ciudad){ $sql = 'insert into tx_lzextensionejemplo_extensionejemplo (nombre, apellido, email, codigo_ciudad) ' . 'values("'.$nombre.'","'.$apellido.'","'.$email.'","'.$ciudad.'")'; $resultset = $GLOBALS['TYPO3_DB']->sql_query($sql); $line = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($resultset); return $resultset; }
  • 44. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl En la clase Controlador.html de la carpeta sv1Vista, agregaremos el código que permite mostrar los dos nuevos campos de nuestro formulario. <tr> <td>Email</td> <td> <input type="text" name="email" id="email" /> </td> </tr> <tr> <td> Ciudad </td> <td > <p>###CIUDAD###</p> </td> </tr> El código anterior se debe copiar antes del botón Ingresar. Debe copiarse ante del siguiente texto: <tr> <td></td> <td> <input type="submit" name="ingresar" id="ingresar" value="Ingresar" /> </td> </tr> Si vamos a la página donde tenemos insertado nuestro formulario, y podemos ver este con los cambios realizados.
  • 45. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl 7. ANEXO B. 7.1. Mostrar datos. A continuación crearemos una extensión que permita mostrar los datos que hemos insertado en nuestra base de datos. Para comenzar debemos ir al módulo Tools>Ext Manager>Menu y seleccionar la opción “Make new extensión”. Lo primero que haremos será darle el key identificador de nuestra extensión, que será “lz_exntensionmostrardatos”. Importante recordar que dos extensiones no podrán tener el mismo nombre. En información general tendremos la siguiente configuración. Hacemos click en Update y los cambios son guardados.
  • 46. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl En “Frontend Plugins”, asignamos el nombre que se mostrará en la lista de Plugins cuando se inserte nuestra extensión como Plugins de una página. Hacemos click en “Update” y los cambios son guardados. En “Services” le damos el título “mvc” (que corresponde a nuestro Modelo Vista Controlador). Con ello se crea la carpeta “sv1” de la extensión. Con los servicios, podemos extender las funcionalidades de las extensiones, permitiendo desarrollar un código más robusto implementando el patrón de diseño MVC. Guardamos los cambios haciendo click en “Update”. Una vez que tenemos todos los parámetros de configuración listos, hacemos click en “View result” y finalmente hacemos click en “WRITE”.
  • 47. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Aceptamos el mensaje y nuestra extensión ha sido creada con éxito.
  • 48. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Para instalar la extensión, hacemos click en “Install extensión”. La pantalla desplegada nos muestra los cambios que se harán en la base de datos. Hacemos click en “Make updates” y la extensión ha sido instalada.
  • 49. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Si vamos a Tool>Ext Manager>Menu>Loaded extensions, veremos la extensión. Ahora crearemos el código que permitirá a la nueva extensión, mostrar los datos. Ingresamos a nuestro EasyEclipse for PHP. Vamos a nuestra extensión y lo primero que haremos será crear las carpetas que las cuales estructuraremos el código de acuerdo al Patrón MVC.
  • 50. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Hacemos click derecho sobre la carpeta sv1, seleccionamos “NewFolder”, le damos el nombre a la carpeta, hacemos click en Finish y así hemos creado nuestra primera carpeta. Para crea la demás carpeta (Vista y Controlador) debemos realizar los mismos pasos.
  • 51. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl A continuación, debemos crear las clases que darán las funcionalidades a nuestra extensión. En la carpeta “sv1Controlador” crearemos la clase Controlador.class.php que permitirá cargar el template y mostrar los datos en pantalla. El código de la clase es el siguiente. <?php class Controlador { var $oSql; var $oPlugins; var $sv; var $confLocal; var $confGlobal; var $addContent; var $posSeccionTemplate; var $extKey; /** * Constructor de la clases */ function Controlador( $oPlugins,$version,$confLocal = null,$confGlobal = null,$confFlex = null, $posSeccionTemplate = null) { /* * Asigno los valores a las variables basica del sistema */ $this->sv = "sv1/"; $this->oPlugins = $oPlugins; $this->sRuta=t3lib_extMgm::siteRelPath($this->oPlugins->extKey).$this->sv; $this->addHeader= ""; $this->addContent = ""; /* * Asigno las variables de configuracion */ $this->confGlobal = $confGlobal; $this->confLocal = $confLocal; $this->confFlex = $confFlex; /* * Asigno los atributos que son instanciados */ require_once($this->sRuta.'Modelo/SqlModelo.class.php'); $this->oSql = new SqlModelo(); /* * Creacion de Objeto que maneja los formularios */ $this->posSeccionTemplate = $posSeccionTemplate; }
  • 52. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl /** * Metodo que carga los valores iniciales del formulario */ function initForm(){ } /** * Obtiene el html de la extension */ function getHtml($data=null) { $this->initForm(); $subpartArray = array(); $markerArray = array(); /** * Template Traspasar */ if($this->template == ""){ $this->templateHTML = 'EXT:'.$this->oPlugins->extKey.'/'.$this- >sv.'/Vista/Controlador.html'; } else{ $this->templateHTML = $this->confLocal["template"]; } /* * Obtiene el Template */ $this->templateCode = $this->oPlugins->cObj->fileResource($this->templateHTML); switch ($this->posSeccionTemplate){ case "CONTENT_EXTENSION": $template['template'] = $this->oPlugins->cObj->getSubpart($this->templateCode,'###'.$this- >posSeccionTemplate.'###'); $registro = $this->oSql->obtenerRegistros(); for ($i=0;$i<$registro['contador'];$i++){ $template['VER_REGISTROS'] = $this->oPlugins->cObj- >getSubpart($this->templateCode,'###VER_REGISTROS###'); $markerArray['###NOMBRE###']= $registro[$i]['nombre']; $markerArray['###APELLIDO###']= $registro[$i]['apellido']; $markerArray['###EMAIL###'] = $registro[$i]['email']; $markerArray['###CIUDAD###']=$registro[$i]['nombre_ciudad']; $contentComentarios .= $this->oPlugins->cObj- >substituteMarkerArrayCached($template['VER_REGISTROS'], $markerArray); }
  • 53. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl $subpartArray['###VER_REGISTROS###']=$contentComentarios; break; } $content = $this->oPlugins->cObj->substituteMarkerArrayCached($template['template'], $markerArray, $subpartArray); $content.=$this->addContent; return $content; } } ?> En la carpeta “sv1Modelo” crearemos la clase SqlModelo.class.php que contendrá el sql que retornara un arregle de datos con los registros que tenemos en nuestra base de datos. El código de esta clase es el siguiente. <?php class SqlModelo { /** * Constructor de la clases */ function SqlModelo() { } function obtenerRegistros(){ $strSQL = "SELECT registro.nombre as nombre, registro.apellido, registro.email, ciudad.nombre_ciudad FROM tx_lzextensionejemplo_extensionejemplo registro, tx_lzextensionejemplo_ciudades ciudad WHERE registro.codigo_ciudad = ciudad.uid ORDER BY registro.nombre "; $resultset = $GLOBALS['TYPO3_DB']->sql_query($strSQL); $arrayRegistros = array(); if(!empty($resultset)){ $iContador = 0; while ($line = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($resultset)) { $arrayRegistros[$iContador]['nombre'] = $line["nombre"]; $arrayRegistros[$iContador]['apellido'] = $line["apellido"]; $arrayRegistros[$iContador]['email'] = $line["email"]; $arrayRegistros[$iContador]['nombre_ciudad']=$line["nombre_ciudad"]; $iContador++; } $arrayRegistros['contador']=$iContador; } else{ $arrayRegistros['contador']= "No hay registros"; } return $arrayRegistros; } } ?>
  • 54. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl En la carpeta “sv1Vista” crearemos la clase Controlador.html, clase que contendrá el código que permite visualizar en pantalla los registros y la forma en que estos se mostraran. El código de la clase es el siguiente. <!--###TEMPLATE### begin--> <!--###CONTENT### --> <!--###CONTENT_EXTENSION###--> <table class="tabla_principal" border="0" cellpadding="0" cellspacing="0" width="600px"> <tr> <td> Registros</td> </tr> <tr> <td> Nombre </td> <td > Apellido </td> <td > Email </td> <td> Ciudad </td> </tr> <!--###VER_REGISTROS###--> <tr > <td> ###NOMBRE### </td> <td> ###APELLIDO### </td> <td> ###EMAIL### </td> <td> ###CIUDAD### </td> </tr> <!--###VER_REGISTROS###--> </table> <!--###CONTENT_EXTENSION###--> <!--###CONTENT### --> <!--###TEMPLATE### end-->
  • 55. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Finalmente en la clase class.tx_lzexntensionmostrardatos_pi1.php de la carpeta pi1, agregaremos dentro del método main, la instancia a la clase Controlador.class.php de la carpeta sv1Controlador y llamaremos a la función que permite cargar el template. Las líneas de código son las siguientes. function main($content,$conf) { $this->conf=$conf; $this->pi_setPiVarDefaults(); $this->pi_loadLL(); global $TYPO3_CONF_VARS; $parameters = unserialize($TYPO3_CONF_VARS['EXT']['extConf'][$this->extKey]); require(t3lib_extMgm::extPath($this- >extKey)."sv1/Controlador/Controlador.class.php"); $oControlador = new Controlador($this,$version="v00",$confLocal = $conf,$confGlobal = $parameters ,$confFlex = null,"CONTENT_EXTENSION"); /* * Se carga la configuracion inicial */ $content.= $oControlador->getHtml($_GET); /*$GLOBALS['TSFE']->additionalHeaderData[$this->prefixId] = $oControlador- >getHeader(false,true);*/ $content = '<form name="frmsolicitudes" method="post" id="frmsolicitudes" action="">' . '<div id="div_menu"> '.$content.' </div> </form>'; return $this->pi_wrapInBaseClass($content); } Con esto hemos terminando de darle las funcionalidades a nuestra extensión.
  • 56. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl Ahora iremos al backend de Typo3 y crearemos una página en la cual mostraremos los registros, que tendrá como contenido el plugins de nuestra extensión. Para instalar el plugins en la nueva página debemos ir a al menú “WebPage”, hacemos click en nuestra página y hacemos click en “Create page content” En la pantalla desplegada vamos a Plugins y hacemos click en la opción “General Plugin”.
  • 57. Centro de Estudio de Ingeniería de Software, Laboratorio OpenSystem. - Distribución Licencia Creative Common2 Víctor Aravena Díaz, victor.aravena@ceisufro.cl; Jorge Colipe, jorge.colipe@lazos.cl Ronald Morales, ronald.morales@opensystem.cl www.lazos.cl En la siguiente pantalla, seleccionamos el combo box Plugin. Buscamos el nombre del título que le dimos a nuestra extensión (para nuestro ejemplo: Mostrar datos), aceptamos el mensaje y así hemos instalado el plugins de nuestra extensión en la página. Abrimos nuestro sitio en el navegador, nos vamos a la página que creamos y le instalamos el plugins de nuestra extensión y veremos todos los registros que hemos ingresado.