Прокладка маршрута на карте Яндекс имея только названия улиц

Был мной когда-то написан компонет для joomla  и модуль  для Yii называемый транспорт города.  Получая данные из мерии города Тольятти о новых маршрутах газелей, автобусов и троллейбусов на предстоящий год, необходимо было разместить на сайте  в понимаемом для пользователей виде и добавить каую либо динамику в статичную таблицу,  например поиск по маршруту, номеру транспорта и т.д.

Превая версия была написана еще под Joomla 1.0 на чистом php, потом под yii уже с аяксом, ну вот третье перерождение в которое хотел бы добавить отображение маршрута на карте. Буду пробовать по полученным улицам движения транспорта отрисовать его маршрут. Как мне сказали это не возможно и на это есть множество причин вот несколько: нет координат пересечения, нет номеров зданий от которых можно былобы отталкиваться и т.д. Хотя в моем понимании сервисы карт должны понимать изначально точки пересечений улиц, ну попробуем посмотрим.

Начнем с яндекс карты, типа народной, забегая в перед опишу что на фото выше. Мы видим маршрут транспорта по следующим улицам: 

Тольятти, ул. Коммунистическая, Тольятти, ул.Матросова,Тольятти, ул.Громовой,Тольятти, ул.Кунеевская,Тольятти, ул.Комсомольская, Тольятти, ул.Мира

в коде скрипта это выглядит вот так:

// Список точек, которые необходимо посетить [start], { type: 'viaPoint',point: 'Тольятти, ул.Матросова' }, { type: 'viaPoint', point: 'Тольятти, ул.Громовой' }, { type: 'viaPoint',point: 'Тольятти, ул.Кунеевская' }, { type: 'viaPoint',  point: 'Тольятти, ул.Комсомольская' } , [end]]

На простом языке мы задали начальную улицу и конечную, а между ними в нужном порядке точки которые нужно посетить, точки у нас это улицы и вот тут как я сказал точки, как я предполагал будут стоять как раз в месте столкновения с другой улицей, но получилось, что точки яндекс карта поставила в местах усредненного нахождения улицы, можно сказать в центре улицы.

В итоге это максимум что пока я смог получить и кульминация в практическом плане, идеи по отрисовке маршрута на лету  еще за горами, буду пробовать гугл карты.

Редактируемые ячейки таблицы в компоненте Joomla

  Многие пишут свои компоненты, часто возникает необходимость редактировать записи в базе данных. Например если подключится к базе пользователей можно быстро найти скажем нарушителя спокойствия на сайте и принять меры. Данный пример это основа, его можно доработать и об этих доработках буду писать постепенно. Можно добавить фильтрацию по колонкам нажимая на название полей в шапке, накидать кучу полей для авто поиска информации.

В примере мы остановимся в примере на двух полях, но можно обойтись и одним. Будем  заниматься подбором поля инн и фирмы. Результат выводить в виде таблицы. Как это будет выглядеть как  отображено на фото ниже.

 Для чистоты кода мы создадим отдельный файл в корне сайта или откроем любую вьюшку любого компонента Joomla, лучше установить какой нибудь чистый компонент хелло. Итак очистим файл от всего, что нам мешает, команда странная решайте сами.  Первым делом вставим вещи которые мы менять не будем это слили css, подлюxение jquery(как это сделать поищите в гугле), чистсую таблицу, ну вроде все. Должно получится так:

<h2>Редактирование данных рекламодателей</h2>

<p><b> ENTER</b> - сохраняет поля редактирования</p>

<p><b> Esc</b> - отменяет редактирование и нечего не сохраняет</p>
<br>
<table>
<tr>
<td>
<p>
<b>Фирма:</b><br>
<input type="text" size="40" id="firma" class="sarch">
</p>
</td>
<td>
<p>
<b>ИНН:</b><br>
<input type="text" size="40" id="inn" class="sarch">
</p>
</td>
</tr>
</table>
<br>

<style>
#editInput{ }
#searchProfile .odd{
background: none repeat scroll 0 0 #E5F1F4;
}
#searchProfile .even{
background: none repeat scroll 0 0 #F8F8F8;
}
#searchProfile{
border: 1px solid !important;
width: 900px;
}
#searchProfile th{
background-color: #2E6AB1;
font-weight: bold;
color: white;
text-align: center;
}
#searchProfile td{
padding: 2px;
text-align: right;
border-bottom: 1px solid !important;
border-left: 1px solid !important;
}
#searchProfile td:hover{
cursor: pointer;
background: none repeat scroll 0 0 #fff;
}
</style>

 Теперь переместимся пониже и вставим следующий код в котором мы разместим все обработки нашей формы:

<script type="text/javascript">
jQuery(document).ready(function() {

//здесь будем писать все обработки

});
</script>

 Как сделать авто поиск я опишу попозже, думаю что лучше его всё таки написать, мы же перейдем сразу к таблице. У нас на экране таблица после авто поиска по нужным полям. Таблица устроена таким образом, что при генерации таблицы, tr имеет атрибут rel содержащий id записи в базе, а все td ячейки имеют класс равный названию поля ячейки в базе данных. В итоге все колонки имеют один класс и разный id по строке, своя крест на крест мы получаем ячейку.

генерация таблицы

$tr[] = '<tr rel="' . $v->profile_id . '" ' . ($n % 2 == 1 ? ' class="even" ' : ' class="odd" ') . ' >
<td class="name">' . $v->name . '</td>
<td class="inn">' . $v->inn . '</td>
<td class="firma">' . $v->firma . '</td>
<td class="passport">' . $v->passport . '</td>
<td class="street">' . $v->street . '</td> 
<td class="phoneMobi">' . $v->phoneMobi . '</td>
<td class="phoneDom">' . $v->phoneDom . '</td>
</tr>';

Заметьте что все ячейки нашей таблицы не имеют своего id но имеют свой класс, этим мы и воспользуемся. При нажатии на ячейку мы проверим на лету есть ли у неё id , если её нет то эта ячейка наш клиент для редактирования. кажется я внес сумятицу? забежав в перед паровоза, но сейчас вы все поймёте. Если это наш клиент мы присваиваем ему id  = updatetd, что означает что именно эта ячейка будет редактироваться. Теперь зная  подопытного мы получаем чем заполнена наша ячейка, очищаем её и вставляем input заполненный существующим значением ячейки, как это выглядит смотрим на фото выше. Вроде все просто давайте вставим следующий код:

$('#searchProfile td:not([id])').live("click", function(e) {
$(this).attr('id', 'updatetd')
var t = e.target || e.srcElement;
var elm_name = t.tagName.toLowerCase();
if (elm_name == 'input') {
return false;
}
$('#editInput').remove();
$('#editInput').remove();
var colonname = $(this).attr('class');
var id = $(this).attr('class');//название поля
var val = $(this).text().trim();//существующий текст
if (id == 'firma' || id == 'inn') {
$(this).html("<input id='editInput' type='text' value='" + $(this).text() + "' class='" + colonname + "' />");
$('#editInput').focus();
$('#editInput').blur(function() {
var val = $(this).val();
$(this).parent().empty().text(val);//заполняем ячеку новым текстом
$('#updatetd').removeAttr('id')
});
}

});//клик по ячейке

Теперь перейдем к сохранению наших изменений или отмене. Удобно в таких случаях вешать все на клавиши enter и esc. В следующем коду вы получаем значение из поля input и передаем его в наш скрипт php. При этом мы обращаемся к tr родителю нашей ячейки и получаем id записи в базе, берем класс редактируемой ячейки который равен полю редактируемой ячейки в базе сайта. Пр нажатии отмены мы просто возвращаем значение из инпута в ячейку без сохранения в базе.

код получения данных и обработки нажатия клавиш:

$(window).keydown(function(event) {
if (event.keyCode == 13) {
var id = $($('#searchProfile #editInput').parents().get(1)).attr('rel');
var value = $('#searchProfile #editInput').val();
var tdname = $('#searchProfile #editInput').attr('class');
// alert('сохраняю ' + id + '-' + value + '-' + tdname);
var url = "<?php echo CController::createUrl("redaktirovanie/save"); ?>";
$.post(
url,
{
id: id,
value: value,
tdname: tdname
},
function(result) { //обновляю и получю новую сторку в таблице
//alert(result.text);
$('#updatetd').text(value);
$('#editInput').remove(); //удалю форму редактирваония
$('#updatetd').removeAttr('id');//для удаления фона отработанной ячейки
},
"json"
);

}
if (event.keyCode == 27) {
var value = $('#searchProfile #editInput').val();
$('#updatetd').text(value);
$('#updatetd').removeAttr('id');//убираю подсветку ячейки
$('#editInput').remove();
}
});//сохранение или отмена

код получения данных из скрипта выше и запись в базу:

//сохранение
function actionSave() {
$pole = trim($_POST['tdname']);
$poletext = trim($_POST['value']);
$idzapis = (int) $_POST['id'];
if ($idzapis != 0) {
$model = new Profile();
$attributes = array($pole => $poletext);
Profile::model()->updateByPk($idzapis, $attributes);
}
$text = $pole . ' -' . $poletext . '- ' . $idzapis;
$result = array('text' => $text);
print json_encode($result);
}

 На что стоит обратить в этом примере, все значения лучше обрабатывать через trim() чтобы обрезать лишние пробелы на всякий случай.

Всплывающее окно для пользы дела

Когда встает задача повысить продажи, увеличить посещаемость, расширить круг подписчиков на помощь приходит использование всплывающих окон. Всплывающее окно необходимо реализовать так чтобы не отпугнуть посетителя, не навязываться ему, желательно дать возможность управления окном и исключить лишнее отображение окна пользователю.

Так вот, порой необходимо и достаточно правильно использовать отсев пользователей, тем более если у вас сформировался основной слой постоянных посетителей сайта, то есть правило: не надоедать одному и тому же пользователю с выводом окна тут главнейшее. Как это сделать? Решений тут несколько рассмотрим одно из них и реализуем запоминание действий пользователя через технологию cookies.

Cookies - это механизм хранения данных браузером удаленного компьютера для идентификации возвращающихся посетителей и хранения параметров веб-страниц (например, переменных). На обычном языке мы запишем в браузер посетителя его решение, от которого и будем в дальнейшем действовать.

Основные (минимальные) свойства всплывающего окна:

Ссылка для перехода на нужную страницу или сайт

Кнопка закрытия окна

Свёртывание всплывающего окна через определенное время

Ссылка для перехода на нужную страницу или сайт -

Растравим время жизни действий пользователя в следующем порядке, напомню что это не постоянные данные и вы можете выстраивать под себя.

Время жизни Cookies при следующих действиях пользователя:

Ссылка для перехода на нужную страницу или сайт - 30 дней

Кнопка закрытия окна —7 дней

Свёртывание всплывающего окна через определенное время (15 секунд) — 1 день

Для реализации нам понадобятся следующие плагины jQuery:

jquery.сookies.js - создание, удаление, изменение Cookies средствами ява скрипта (js)
jquery.jcarousel.js — известный плагин прокрутки фотографий, если конечно они у нас есть. Благодаря ему мы отобразим в окне блок с прокруткой превьюшек (карусель).

По мимо всего прочего постараемся избежать лишнего веса нашей вертки html путем использования иконок от font awesome.

Когда наше окно будет готова стоит настроить яндекс метрику на отслеживание нажатий на наши точки перехода и закрытия всплывающего окна. Например в данном примере разумно поставить цени на места указанные на скриншоте. Ну вроде вводная информация достаточно, в следующем материале мы напишем данный плагин или модуль под Joomla.

Пишем модуль для joomla - группа в контакте

В очередном заказе огласился пункт в котором нужно разместить на сайте клиента модуль с отображением списка пользователей из группы в социальной сети в контакте. Можно поискать подобный модуль, но сейчас я накидаю пример как быстро пишутся такие модули, нам понадобится шаблон или можно взять готовый другой модуль, это позволяет MVC которое используется в joomla. конечный продукт на фотограффи ниже, а потом по порядку.

И так поехали, назовем модуль mod_vkblock, основными файлами которые нам нужны являются(кусок их файла установки):

  <files>
        <filename module="mod_vkblock">mod_vkblock.php  </filename>
        <folder>tmpl</folder>
        <filename>helper.php</filename>
        <filename>index.html</filename>
        <filename>css/index.html</filename>
        <filename>css/css.css</filename>
        <filename>js/mod_vkblock.js</filename>
        <filename>js/index.html</filename>
        <filename>mod_vkblock.xml</filename>
    </files>

 быстро пробежимся по файлам которые нужно изменить под себя если вы используете допустим стандартный модуль авторизации для нашего примера.

Первое заходим меняем название фалов установки и запуска модуля на название нашего модуля mod_vkblock, заходим потом в установочный файл и меняем начиная с  <name>mod_login</name> на  <name>mod_vkblock</name> и так шерстим весь файл установки модуля.

Теперь замените все что в   <files>  </files> на тот код который написан выше, конечно нам понадобятся не все файлы но так вы уже поймете что лучше сразу закладывать в модули чтобы потом было легче из расширять. Заходим в главный фал модуля mod_vkblock.php вот его код который должен у нас получится:

<?php
    defined('_JEXEC') or die; // no direct access allowed
    require_once dirname(__FILE__) . DS . 'helper.php';
    $class_sfx = htmlspecialchars($params->get('class_sfx'));
    $doc = & JFactory::getDocument();
    $doc->addStylesheet(JURI::root(true) . "/modules/mod_vkblock/css/css.css");
    $doc->addCustomTag('<script src="//vk.com/js/api/openapi.js?92"></script>');
    $html = vkblockHelper::getModul($params);
    require JModuleHelper::getLayoutPath('mod_vkblock');
?>

 Рассмотрим что мы тут делаем, первое это подключаем суффикс модуля он понадобится для дальнейшей верстки отображения модуля, $doc->addStylesheet подключит наши стили css, $doc->addCustomTag добавит нужные теги которые мы возьмем на странице социальной сети в контакте, по сути это подключение api, сразу скажу для критиков, что знаю и о других способах, но под рукой именно этот. Опять заменяем везде упоминания старого модуля на наше название. Внимательно смотрим на строку $html = vkblockHelper::getModul($params);  убираем название запускаемого хелпера на наше.

 Заглянем в хелпер, в нем больше удалять чем менять итоговый файл будет такого вида, опять оговорюсь он нечего выдавать в данном примере не станет, потому что не надо, но можно конечно вывести сюда  код подученный от соцсетки и  сделать проверки на указание группы, тут я обойдусь тем что задам значения группы по умолчанию.

 <?php
    defined('_JEXEC') or die;
    class vkblockHelper {
        function getModul($params) {
        }
    }
?>

Переходм к самому главному отчего все начаналось и чем закончится, вконтакте дает такой код для размещения на сайте:

<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "200", height: "290"}, 20003922);
</script>

  Теперь нам необходимо заменить все заначения на свои для этого нам нужно в файле установки добавить параметры настройки модуля смотрим код, коментивароть его не смысла, информацию по таким фалом можно найти.

  <fieldset name="basic">
                <field
                    name="idgroupvk"
                    type="text"
                    default="39207120"
                    label="id группы"
                    description="" />
                
                <field
                    name="width"
                    type="text"
                    default="270"
                    label="width"
                    description="ширина блока" />
                <field
                    name="height"
                    type="text"
                    default="290"
                    label="height"
                    description="высота блока" />
                <field
                    name="color1"
                    type="text"
                    default="FFFFFF"
                    label="цвет текста на шапке и в подвале"
                    description="" />    

                <field
                    name="color2"
                    type="text"
                    default="000000"
                    label="цвет жирного текста"
                    description="" />
                
                <field
                    name="color3"
                    type="text"
                    default="ED008C"
                    label="цвет фона шапки и подвала"
                    description="класс колонки" />        
    
            </fieldset>

 Вернемся к нашим слоникам, файл отображаения на сайте пользователю будет выглядеть теперь таким образом:

<?php
defined('_JEXEC') or die;
//echo $html;
?>
<div id="vkFrend">
    <div  id="vkFrend<?=$params->get('idgroupvk');?>"></div>
    <script type="text/javascript">
        VK.Widgets.Group("vkFrend<?=$params->get('idgroupvk');?>", {mode: 0, wide: 0, width: "<?=$params->get('width');?>", height: "<?=$params->get('height');?>", color1: '<?=$params->get('color1');?>', color2: '<?=$params->get('color2');?>', color3: '<?=$params->get('color3');?>'}, <?=$params->get('idgroupvk');?>);
    </script>
</div>

 Такие вставки как эта <?=$params->get('idgroupvk');?> подставляет в скрип наши значения из настроек модуля, в и тоге мы подключаем модуль сделанный своими руками  меняем размеры, цвета, группы, удачи. А да загоняем все zip архив и устанавливаем.