Desarrollo de un Componente MVC/Agregar un mapa
From Joomla! Documentation
Artículos de esta Serie
Agregar un tipo de menú a la parte del sitio
Agregar un modelo a la parte del sitio
Agregar una variable de petición en el tipo de menú
Utilizando la base de datos
Lado servidor básico
Agregar gestión de idioma
Agregar acciones del lado servidor
Agregar decoraciones del lado servidor
Agregar verificaciones
Agregar categorías
Agregar configuración
Agregar un archivo de secuencia de comandos instalar-desinstalar-actualizar
Agregar un formulario del lado cliente
Usar la facilidad filtro de idioma
- Agregar una Modal
- Agregar Asociaciones
- Agregar Comprobación
- Agregar Ordenamiento
- Agregar Niveles
- Agregar Control de Versiones
- Agregar Etiquetas
- Agregar Accesos
- Agregar procesos por lote
- Agregar Caché
- Agregar un Canal de Noticias
Agregar un servidor de actualización
Esta es una serie multi-artículos de tutoriales sobre cómo desarrollar un Componente Modelo-Vista-Controlador para Joomla! Versión
.
Comenzar con la Introducción, y navegar por los artículos de esta serie usando el botón de navegación en la parte inferior o en el cuadro de la derecha (los "Artículos de esta serie").
Este artículo es parte del tutorial Desarrollo de un Componente MVC para Joomla! 3.x. Te invitamos a leer las partes anteriores del tutorial antes de leer esto.
En este paso, agregamos un mapa a la parte del sitio, que proporciona la base para entender cómo podemos hacer que Joomla se vincule a nuestro código JavaScript y CSS.
Un vídeo que acompaña este paso está disponible en Paso 18 Agregar un mapa.
Functionalidad
Actualmente, en nuestra parte del sitio podemos mostrar un saludo de Helloworld en la página web del sitio. Mejoraremos esta página para que también muestre un mapa.
Agregaremos una latitud y una longitud a cada registro de Helloworld para que podamos mostrar una posición asociada en ese mapa.
Enfoque
Agregaremos un campo de latitud y longitud a nuestros registros de hellowworld, para relacionarlos con una posición en un mapa. Esto implicará cambios en nuestra funcionalidad de administración para permitir que los nuevos campos se llenen y vean.
Actualmente, nuestra vista de Helloworld del sitio muestra el saludo de Helloworld, y también la mejoraremos para mostrar el mapa, con la posición del registro de Helloworld (como se define en los campos de latitud y longitud) que se muestra como un marcador en el mapa, y el mapa centralizado en este punto. Sin embargo, no nos molestaremos en actualizar el formulario del lado del sitio para incluir los campos de latitud/longitud.
El mapa será un mapa dinámico (también conocido como slippy), en lugar de un mapa estático (que generalmente se puede generar usando sólo una URL), por lo que la presentación incluirá una biblioteca javascript y algunos CSS para el estilo. Tendremos que decirle a Joomla que incluya nuestro código javascript y CSS, y tendremos que pasar datos de nuestro código php a nuestro código javascript.
Principalmente utilizaremos la biblioteca de código abierto [1], que se basa en los datos de OpenStreetMap. Como alternativa, también incluiremos un código para usar los mapas de Google.
Actualización de la base de datos
Agregue dos campos, latitude y longitude, a nuestro registro de base de datos.
admin/sql/install.mysql.utf8.sql
DROP TABLE IF EXISTS `#__helloworld`;
CREATE TABLE `#__helloworld` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`asset_id` INT(10) NOT NULL DEFAULT '0',
`created` DATETIME NOT NULL DEFAULT '0000-00-00 00:00:00',
`created_by` INT(10) UNSIGNED NOT NULL DEFAULT '0',
`greeting` VARCHAR(25) NOT NULL,
`published` tinyint(4) NOT NULL DEFAULT '1',
`catid` int(11) NOT NULL DEFAULT '0',
`params` VARCHAR(1024) NOT NULL DEFAULT '',
`image` VARCHAR(1024) NOT NULL DEFAULT '',
`latitude` DECIMAL(9,7) NOT NULL DEFAULT 0.0,
`longitude` DECIMAL(10,7) NOT NULL DEFAULT 0.0,
PRIMARY KEY (`id`)
)
ENGINE =MyISAM
AUTO_INCREMENT =0
DEFAULT CHARSET =utf8;
INSERT INTO `#__helloworld` (`greeting`) VALUES
('Hello World!'),
('Goodbye World!');
/admin/sql/updates/mysql/0.0.18.sql
ALTER TABLE `#__helloworld` ADD `latitude` DECIMAL(9,7) NOT NULL DEFAULT 0.0;
ALTER TABLE `#__helloworld` ADD `longitude` DECIMAL(10,7) NOT NULL DEFAULT 0.0;
Formulario de Edición de Helloworld del Administrador
Cambiaremos el formulario de edición para que también incluyan los dos nuevos campos.
admin/models/forms/helloworld.xml
<?xml version="1.0" encoding="utf-8"?>
<form
addrulepath="/administrator/components/com_helloworld/models/rules"
>
<fieldset
name="details"
label="COM_HELLOWORLD_HELLOWORLD_DETAILS"
>
<field
name="id"
type="hidden"
/>
<field
name="greeting"
type="text"
label="COM_HELLOWORLD_HELLOWORLD_GREETING_LABEL"
description="COM_HELLOWORLD_HELLOWORLD_GREETING_DESC"
size="40"
class="inputbox validate-greeting"
validate="greeting"
required="true"
default=""
/>
<field
name="catid"
type="category"
extension="com_helloworld"
class="inputbox"
default=""
label="COM_HELLOWORLD_HELLOWORLD_FIELD_CATID_LABEL"
description="COM_HELLOWORLD_HELLOWORLD_FIELD_CATID_DESC"
required="true"
>
<option value="0">JOPTION_SELECT_CATEGORY</option>
</field>
<field
name="latitude"
type="number"
label="COM_HELLOWORLD_HELLOWORLD_FIELD_LATITUDE_LABEL"
description="COM_HELLOWORLD_HELLOWORLD_FIELD_LATITUDE_DESC"
min="-90.0"
max="90.0"
class="inputbox"
required="true"
default="0.0"
/>
<field
name="longitude"
type="number"
label="COM_HELLOWORLD_HELLOWORLD_FIELD_LONGITUDE_LABEL"
description="COM_HELLOWORLD_HELLOWORLD_FIELD_LONGITUDE_DESC"
min="-180.0"
max="180.0"
class="inputbox"
required="true"
default="0.0"
/>
</fieldset>
<fields name="imageinfo">
<fieldset
name="image-info"
label="COM_HELLOWORLD_IMAGE_FIELDS"
>
<field
name="image"
type="media"
preview="tooltip"
label="COM_HELLOWORLD_HELLOWORLD_FIELD_IMAGE_LABEL"
description="COM_HELLOWORLD_HELLOWORLD_FIELD_IMAGE_DESC" />
<field name="alt"
type="text"
label="COM_HELLOWORLD_HELLOWORLD_FIELD_ALT_LABEL"
description="COM_HELLOWORLD_HELLOWORLD_FIELD_ALT_DESC"
size="30"/>
<field name="caption"
type="text"
label="COM_HELLOWORLD_HELLOWORLD_FIELD_CAPTION_LABEL"
description="COM_HELLOWORLD_HELLOWORLD_FIELD_CAPTION_DESC"
size="30"/>
</fieldset>
</fields>
<fields name="params">
<fieldset
name="params"
label="JGLOBAL_FIELDSET_DISPLAY_OPTIONS"
>
<field
name="show_category"
type="list"
label="COM_HELLOWORLD_HELLOWORLD_FIELD_SHOW_CATEGORY_LABEL"
description="COM_HELLOWORLD_HELLOWORLD_FIELD_SHOW_CATEGORY_DESC"
default=""
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
</field>
</fieldset>
</fields>
<fieldset
name="accesscontrol"
label="COM_HELLOWORLD_FIELDSET_RULES"
>
<field
name="asset_id"
type="hidden"
filter="unset"
/>
<field
name="rules"
type="rules"
label="COM_HELLOWORLD_FIELD_RULES_LABEL"
filter="rules"
validate="rules"
class="inputbox"
component="com_helloworld"
section="message"
/>
</fieldset>
</form>
No tenemos nada más que hacer para que el formulario de edición de administración funcione, pero debe convencerse de que entiende por qué los siguientes aspectos ya están cubiertos:
- Rellenar previamente el formulario con datos de latitud/longitud de la base de datos
- mostrar los campos de latitud/longitud en el archivo de diseño
- funcionalidad de controlador y del modelo para actualizar los registros de latitud/longitud en respuesta al administrador que presiona Guardar.
Lista Vista de Helloworlds del Administrador
Necesitamos actualizar el modelo para que la latitud y la longitud se incluyan en los campos seleccionados en la consulta SQL. No vamos a proporcionar la clasificación por los datos de latitud/longitud, por lo que no es necesario incluir estos campos en la matriz filter_fields.
admin/models/helloworlds.php
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
/**
* HelloWorldList Model
*
* @since 0.0.1
*/
class HelloWorldModelHelloWorlds extends JModelList
{
/**
* Constructor.
*
* @param array $config An optional associative array of configuration settings.
*
* @see JController
* @since 1.6
*/
public function __construct($config = array())
{
if (empty($config['filter_fields']))
{
$config['filter_fields'] = array(
'id',
'greeting',
'author',
'created',
'published'
);
}
parent::__construct($config);
}
/**
* Method to build an SQL query to load the list data.
*
* @return string An SQL query
*/
protected function getListQuery()
{
// Initialize variables.
$db = JFactory::getDbo();
$query = $db->getQuery(true);
// Create the base select statement.
$query->select('a.id as id, a.greeting as greeting, a.published as published, a.created as created,
a.image as imageInfo, a.latitude as latitude, a.longitude as longitude')
->from($db->quoteName('#__helloworld', 'a'));
// Join over the categories.
$query->select($db->quoteName('c.title', 'category_title'))
->join('LEFT', $db->quoteName('#__categories', 'c') . ' ON c.id = a.catid');
// Join with users table to get the username of the author
$query->select($db->quoteName('u.username', 'author'))
->join('LEFT', $db->quoteName('#__users', 'u') . ' ON u.id = a.created_by');
// Filter: like / search
$search = $this->getState('filter.search');
if (!empty($search))
{
$like = $db->quote('%' . $search . '%');
$query->where('greeting LIKE ' . $like);
}
// Filter by published state
$published = $this->getState('filter.published');
if (is_numeric($published))
{
$query->where('a.published = ' . (int) $published);
}
elseif ($published === '')
{
$query->where('(a.published IN (0, 1))');
}
// Add the list ordering clause.
$orderCol = $this->state->get('list.ordering', 'greeting');
$orderDirn = $this->state->get('list.direction', 'asc');
$query->order($db->escape($orderCol) . ' ' . $db->escape($orderDirn));
return $query;
}
}
También necesitamos cambiar el archivo de diseño para comprimir los nuevos campos en la pantalla. Los mostraremos juntos en una columna de Posición, en la forma [lat, long].
admin/views/helloworlds/tmpl/default.php
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
use Joomla\Registry\Registry;
JHtml::_('formbehavior.chosen', 'select');
$listOrder = $this->escape($this->state->get('list.ordering'));
$listDirn = $this->escape($this->state->get('list.direction'));
?>
<form action="index.php?option=com_helloworld&view=helloworlds" method="post" id="adminForm" name="adminForm">
<div id="j-sidebar-container" class="span2">
<?php echo JHtmlSidebar::render(); ?>
</div>
<div id="j-main-container" class="span10">
<div class="row-fluid">
<div class="span6">
<?php echo JText::_('COM_HELLOWORLD_HELLOWORLDS_FILTER'); ?>
<?php
echo JLayoutHelper::render(
'joomla.searchtools.default',
array('view' => $this)
);
?>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th width="1%"><?php echo JText::_('COM_HELLOWORLD_NUM'); ?></th>
<th width="2%">
<?php echo JHtml::_('grid.checkall'); ?>
</th>
<th width="15%">
<?php echo JHtml::_('searchtools.sort', 'COM_HELLOWORLD_HELLOWORLDS_NAME', 'greeting', $listDirn, $listOrder); ?>
</th>
<th width="15%">
<?php echo JText::_('COM_HELLOWORLD_HELLOWORLDS_POSITION'); ?>
</th>
<th width="30%">
<?php echo JText::_('COM_HELLOWORLD_HELLOWORLDS_IMAGE'); ?>
</th>
<th width="15%">
<?php echo JHtml::_('searchtools.sort', 'COM_HELLOWORLD_AUTHOR', 'author', $listDirn, $listOrder); ?>
</th>
<th width="15%">
<?php echo JHtml::_('searchtools.sort', 'COM_HELLOWORLD_CREATED_DATE', 'created', $listDirn, $listOrder); ?>
</th>
<th width="5%">
<?php echo JHtml::_('searchtools.sort', 'COM_HELLOWORLD_PUBLISHED', 'published', $listDirn, $listOrder); ?>
</th>
<th width="2%">
<?php echo JHtml::_('searchtools.sort', 'COM_HELLOWORLD_ID', 'id', $listDirn, $listOrder); ?>
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">
<?php echo $this->pagination->getListFooter(); ?>
</td>
</tr>
</tfoot>
<tbody>
<?php if (!empty($this->items)) : ?>
<?php foreach ($this->items as $i => $row) :
$link = JRoute::_('index.php?option=com_helloworld&task=helloworld.edit&id=' . $row->id);
$row->image = new Registry;
$row->image->loadString($row->imageInfo);
?>
<tr>
<td><?php echo $this->pagination->getRowOffset($i); ?></td>
<td>
<?php echo JHtml::_('grid.id', $i, $row->id); ?>
</td>
<td>
<a href="<?php echo $link; ?>" title="<?php echo JText::_('COM_HELLOWORLD_EDIT_HELLOWORLD'); ?>">
<?php echo $row->greeting; ?>
</a>
<div class="small">
<?php echo JText::_('JCATEGORY') . ': ' . $this->escape($row->category_title); ?>
</div>
</td>
<td align="center">
<?php echo "[" . $row->latitude . ", " . $row->longitude . "]"; ?>
</td>
<td align="center">
<?php
$caption = $row->image->get('caption') ? : '' ;
$src = JURI::root() . ($row->image->get('image') ? :