Часть третья – представление админки.

В этой части будет разобран языковой файл и файл представления (tpl).

! Некоторый код битый, так как информация устарела, статья будет удалена.

Согласно из структуры модуля из первой части, строчки текста лежат у нас у language/russian/module/comments.

Рассматривать почти нечего, вот листинг этого файла:

$_['heading_title'] = 'Комменты админка';
 
// Text
$_['text_module'] = 'Модули';
$_['text_success'] = 'Настройки модуля обновлены!';
$_['text_edit'] = 'Редактирование модуля';
 
// table
$_['table_image'] = 'Аватарка';
$_['table_name'] = 'Имя';
$_['table_text'] = 'Комментарий';
$_['table_header'] = 'Имеющиеся коментарии';
$_['table_edit'] = 'Редактировать';
$_['table_delete'] = 'Удалить';
$_['table_id'] = 'Номер';
$_['title_add'] = 'Добавить/Изменить';
 
// Entry
$_['entry_name'] = 'Название';
$_['entry_banner'] = 'Баннер2';
$_['entry_dimension'] = 'Размеры (Ширина x Высота)2';
$_['entry_width'] = 'Ширина2';
$_['entry_height'] = 'Высота2';
$_['entry_status'] = 'Статус2';
 
// Error
$_['error_permission'] = 'У Вас нет прав для управления этим модулем!2';
$_['error_name'] = 'Название модуля должно быть от 3 до 64 символов!2';
$_['error_width'] = 'Необходимо указать ширину!2';
$_['error_height'] = 'Необходимо указать высоту!2';

Видим, что переменные начинаются с $_ и образуют собой асоциативный массив. Контроллер админки, либо пользовательской части получает доступ к этому массиву через такую функцию:

$this->load->language('module/comments');

Весь этот асоциативный массив подгружается к объекту language, из которого мы в любой части контроллера ПОСЛЕ того, как подключен языковой файл можем вытащить любую строку. К примеру, так:

$this->language->get('heading_title');

“Найти глобальный класс с которыйм мы работаем, найти в нем объект языков (автоматически выберется системный язык, их может быть несоклько), и с помощью метода get получить значение строки heading_title”

Так же эти строки нужно передавать на отрисовку:

$data['heading_title'] = $this->language->get('heading_title');

Это так же строка из контроллера, мы просто передаем массиву data, который уйдет как информация для отрисовки, нужный текст.

Итак, на данный момент у нас есть модель, которая описывает что можно доставать из БД. У нас есть все основные стандартные фразы, которые есть в модуле (или странице, они работают так же). Со всем этим контроллер делает примерно следующее:
– Получает нужные данные из БД
– Получает данные с помощью GET или POST (тот момент, когда происходит клик по чему либо мышкой)
– Получает текстовые строки и объединяет их в массив для отрисовки (может быть несколько языковых файлов с разных мест)
– Обрабатывает все это как нужно программисту (меняет строки, проиводит арифметические действия, сравнивает, проверяет условия и так и далее)
– Результаты обработки запихивает в тот же массив на отрисовку ($data[])
– Отправляет этот массив файлу tpl (либо строкой json, либо еще как надо может быть по заданию).

Что же делает файл tpl? Это точно такой же шаблон, как в десятках других cms.

Нам нужно вывести данные, которые мы успешно обработали контроллер в админской части движка. Что мы должны вывести:

– Свои стили для модуля. Нужно или подключать css файл, или, в данном случае, когда стилей немного – просто написать их в

<style>
.coments-wrap h3 {
    padding-bottom: 15px;
    padding-top: 10px;
    font-weight: bold!important;
}
 
.coments-wrap td {
    text-align: center;
    vertical-align: middle;
    padding: 10px;
    font-size: 14px;
}
 
.coments-wrap table tr:nth-child(2n-1) {
    background: #D8D6D6;
}
 
.coments-wrap thead tr {
    background: #444444!important;
    color: white;
}
 
.coments-wrap img {
    width: 50px;
}
 
input#ret {background: #444444;border: 0;transition: 0.2s;margin-top: 20px;display: block;margin-right: 0;width: 100px;margin-left: auto;padding: 10px;color: white;text-transform: uppercase;border-radius: 4px;font-size: 16px;}

input#ret:hover {
    background: #D8D6D6;
    color: #444444;
    box-shadow: 0px 0px 3px #444444;
}
td#add_text textarea {
    height: 100px;
    width: 500px;
    padding: 5px;
}
 
.add_com input {
    padding: 5px;
}
</style>

 

 

Далее следуют переменные для отладки, их нужно удалить, когда модуль готов:

<!--?php print_r($ret); ?-->
<!--?php print_r($ok); ?-->
<!--?php print_r($success); ?-->

В контроллере мы передавали массив $data[], названия – $data[‘ret’] ячеек массива совпадают с переменной в шаблоне. Таким образом в контроллере можно ввести такую строку:

if ( какое то условие ) {
$data['ret'] = 1;
// какой то код 
} else {
 $data['ret'] = 2;
}

И в браузере мы узнаем – выполнилось ли условие, а с ним и код. Таким образом, если отключены ошибки php можно отлаживать код и искать место на каком он ломается.

Далее по тексту нам нужно вывести все стандартные панели и кнопки – обычно их можно взять с любого модуля, который есть в админке:

 

 

На данном этапе появилась шапка, хлебные крошки и левая панель с кнопками.

  <!--?php if ($error_warning) { ?-->

 

Строка с ошибками, которые контроллер записывает в error_warning, взято тоже из стандартного оформления, но подставлены свои значения в текст.

 

 

 

“/> “/> “/>

 

 

 

 

 

 

 

 

 

 

 

 

А это уже верстка нашего модуля. Верстка на свой вкус, основные рабочие приемы – вместо текста в верстку вставляются переменные из массива $data[], так же эти переменные можно пихать в условия, по типу “Если контроллер передал в этой переменной 1 то выводим эту переменную, если нет – то другую”. Пример такого условия в конце в форме, рассмотрите пример – он позволяет вывести на нужную option у select select=selected. Это нужно для того, чтобы когда человек заходит в админку, выводились те значения, которые записаны в БД, иначе если просто открыть модуль и закрыть – установятся дефолтные значения.
Далее закрывает теги и вставляем стандартный футер:

 

На этом моменту у нас есть верстка и модуль выведется в админке. Но кнопки будут не работать, для этого нужно дописать немного js. (перед футером, так как в футере закрывается)

1. Кнопка редактирования комента:

$('.comments-edit').click(function(){
		tr = $(this).parents('tr');
		temp_id = tr.find('.comment-id').html();
		temp_name = tr.find('.comment-name').html();
		temp_img = tr.find('.comment-image span').html();
		temp_text = tr.find('.comment-text').html();
		$('#add_id').html(temp_id+' <input name="id" type="hidden" value="'+temp_id+'" />');
		$('#add_name input').val(temp_name);
		$('#add_image img').attr({'src':'/image/'+temp_img});
		$('#add_image input').val(temp_img);
		$('#add_text input').val(temp_text);
		return false;
	});

Мы просто записываем данные из нее в форму, включая id.
Затем можно редактировать форму. Вывод формы выбора картинок достоин отдельной статьи, поэтому пока просто принимаем его на веру =)

2. Кнопка удаления комента:

$('.comment-delete').click(function(){
		gems = $(this).find('input');
		$.ajax({
		url: 'index.php?route=module/comments/deleteComment&amp;token=<!--?php echo $token; ?-->',
		type: 'post',
		data: gems,
		dataType: 'json',
		beforeSend: function() {
			console.log(gems);
		},
		error: function (json) {
			console.log(json);		
		},
		success: function(json) {
			console.log(json);		
			location.reload();			
		}
	});
		return false;
	});

Мы ищем input для установления какой же нам нужен id записи и отправляем ajax запрос на удаление к нашему КОНТРОЛЛЕРУ. Т.е. путь к контроллеру/функция контроллера. Так можно получить доступ к любой функции любого контроллера. Если все удачно – перезагружаем страницу.

3. Добавление/изменение комента (по сути это одна почти одна и та же операция)

$('#ret').click(function(){
		$.ajax({
			url: 'index.php?route=module/comments/addComment&amp;token=<!--?php echo $token; ?-->',
			type: 'post',
			data: $('.add_com input[type=\'text\'],.add_com input[type=\'hidden\'],.add_com textarea'),
			dataType: 'json',
			beforeSend: function() {
				console.log($('.add_com input[type=\'text\']'));
			},
			error: function (json) {
				console.log('error');
			console.log(json);		
			},
			success: function(json) {
				console.log('added');
				console.log(json);		
			location.reload();			
			}
		});
		return false;
	});

Тут так же все несложно, ты отправляем функции в контроллере запрос, в котором отправляем поля из формы. Если все хорошо – обновляем страницу.

Полные версии файлов (языковая и представления):
comments.php
comments.tpl

Все части:
Как написать модуль OpenCart (Часть 1)
Как написать модуль OpenCart (Часть 2)
Как написать модуль OpenCart (Часть 4)