От автора: UberGallery – простой PHP скрипт для создания красивой галереи изображений с генерацией превью на лету. Необходимо лишь загрузить изображения в нужную папку, и галерея для OpenCart будет готова. Наша задача – создать модуль, который будет использовать UberGallery для генерации галереи, но по правилам OpenCart. В back end должна быть возможность изменять параметры, такие как ширина превью, высота превью и т.д. По этим требованиям я создам блок галереи на front end страницах.
Сегодня мы изучим back end часть. Мы создадим файлы, необходимые для формы настроек в back end модуле. Предполагаю, что вы знаете основы процесса модульной разработки в OpenCart, так как мы опустим их. Вы должны работать в последней версии OpenCart, чтобы следовать за кодом.
Создание файлов – быстрый обзор
Давайте быстро пробежимся по файлам back end.
admin/controller/module/uber_gallery.php: файл контроллера, обеспечивающий приложение логикой обычного контроллера OpenCart.
admin/language/english/module/uber_gallery.php: языковой файл для установки языковых лейблов.
admin/view/template/module/uber_gallery.tpl: файл шаблона представления, в котором хранится XHTML код формы настроек.
system/library/uberGallery: сам компонент UberGallery.
Сегодня мы создадим все эти файлы. Я создам кастомную форму настроек для модуля UberGallery, чтобы вы могли настраивать параметры через back end.
Не будем тратить время, перейдем к самому интересному.
Создание back end файлов модуля
Перед созданием файлов скачайте UberGallery с официального сайта и скопируйте папку resource в system/library/uberGallery/resources.
Создайте файл system/library/uberGallery/resources/oc.galleryConfig.ini со следующим кодом.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
; This is the default UberGallery config file. Copy this file to galleryConfig.php ; and change the following values to customize your gallery. [basic_settings] cache_expiration = [cache_expiration] ; Cache expiration time in minutes ; Set to -1 for permanent caching enable_pagination = true ; Set to 'true' to enable pagination paginator_threshold = 10 ; Maximum number of pages to display ; in the paginator before truncating thumbnail_width = [thumbnail_width] ; Thumbnail width (in pixels) thumbnail_height = [thumbnail_height] ; Thumbnail height (in pixels) thumbnail_quality = [thumbnail_quality] ; Thumbnail quality from 1 - 100 ; Higher = better quality / slower theme_name = uber-responsive ; Theme used to style the gallery [advanced_settings] images_per_page = [thumbnail_count] ; Images displayed per page, requires ; enable_pagination be set to 'true' images_sort_by = natcasesort ; Method used to sort image array ; Available sorting options include: ; asort, arsort, ksort, krsort, ; natcasesort, natsort, shuffle reverse_sort = false ; Set to 'true' to reverse sort order enable_debugging = false ; Output debug messages |
Файл схож с файлом настроек UberGallery galleryConfig.ini, но с плейсхолдерами. С его помощью мы будем создавать настоящий файл конфигураций на лету, когда админ будет сохранять форму настроек через back end.
По требованиям UberGallery необходимо скопировать system/library/uberGallery/resources/sample.galleryConfig.ini в system/library/uberGallery/resources/galleryConfig.ini. Проверьте, чтобы файлы system/library/uberGallery/resources/galleryConfig.ini и system/library/uberGallery/resources/cache были доступны для записи с веб-сервера.
Создайте файл admin/controller/module/uber_gallery.php со следующим кодом.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 |
<?php class ControllerModuleUberGallery extends Controller { private $error = array(); public function index() { $this->load->language('module/uber_gallery'); $this->load->model('extension/module'); $this->document->setTitle($this->language->get('heading_title')); if (($this->request->server['REQUEST_METHOD'] == 'POST') && $this->validate()) { if (!isset($this->request->get['module_id'])) { $this->model_extension_module->addModule('uber_gallery', $this->request->post); } else { $this->model_extension_module->editModule($this->request->get['module_id'], $this->request->post); } // update uber config file $config_file = implode("\n",file(DIR_SYSTEM.'library/uberGallery/resources/oc.galleryConfig.ini')); $tokens = array("[cache_expiration]", "[thumbnail_width]", "[thumbnail_height]", "[thumbnail_quality]", "[thumbnail_count]"); $replacements = array( $this->request->post['thumb_caching'], $this->request->post['thumb_width'], $this->request->post['thumb_height'], $this->request->post['thumb_quality'], $this->request->post['thumb_count'] ); $save_config_file = str_replace($tokens, $replacements, $config_file); $fp = fopen(DIR_SYSTEM.'library/uberGallery/resources/galleryConfig.ini', 'w'); @fwrite($fp, $save_config_file, strlen($save_config_file)); $this->session->data['success'] = $this->language->get('text_success'); $this->response->redirect($this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL')); } $data['heading_title'] = $this->language->get('heading_title'); $data['text_edit'] = $this->language->get('text_edit'); $data['text_enabled'] = $this->language->get('text_enabled'); $data['text_disabled'] = $this->language->get('text_disabled'); $data['entry_name'] = $this->language->get('entry_name'); $data['entry_status'] = $this->language->get('entry_status'); $data['entry_thumb_caching'] = $this->language->get('entry_thumb_caching'); $data['entry_thumb_quality'] = $this->language->get('entry_thumb_quality'); $data['entry_thumb_width'] = $this->language->get('entry_thumb_width'); $data['entry_thumb_height'] = $this->language->get('entry_thumb_height'); $data['entry_thumb_count'] = $this->language->get('entry_thumb_count'); $data['entry_enable_module_paging'] = $this->language->get('entry_enable_module_paging'); $data['button_save'] = $this->language->get('button_save'); $data['button_cancel'] = $this->language->get('button_cancel'); if (isset($this->error['warning'])) { $data['error_warning'] = $this->error['warning']; } else { $data['error_warning'] = ''; } if (isset($this->error['error_name'])) { $data['error_name'] = $this->error['error_name']; } else { $data['error_name'] = ''; } if (isset($this->error['error_thumb_width'])) { $data['error_thumb_width'] = $this->error['error_thumb_width']; } else { $data['error_thumb_width'] = ''; } if (isset($this->error['error_thumb_height'])) { $data['error_thumb_height'] = $this->error['error_thumb_height']; } else { $data['error_thumb_height'] = ''; } if (isset($this->error['error_thumb_quality'])) { $data['error_thumb_quality'] = $this->error['error_thumb_quality']; } else { $data['error_thumb_quality'] = ''; } if (isset($this->error['error_thumb_count'])) { $data['error_thumb_count'] = $this->error['error_thumb_count']; } else { $data['error_thumb_count'] = ''; } $data['breadcrumbs'] = array(); $data['breadcrumbs'][] = array( 'text' => $this->language->get('text_home'), 'href' => $this->url->link('common/dashboard', 'token=' . $this->session->data['token'], 'SSL') ); $data['breadcrumbs'][] = array( 'text' => $this->language->get('text_module'), 'href' => $this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL') ); if (!isset($this->request->get['module_id'])) { $data['breadcrumbs'][] = array( 'text' => $this->language->get('heading_title'), 'href' => $this->url->link('module/uber_gallery', 'token=' . $this->session->data['token'], 'SSL') ); } else { $data['breadcrumbs'][] = array( 'text' => $this->language->get('heading_title'), 'href' => $this->url->link('module/uber_gallery', 'token=' . $this->session->data['token'] . '&module_id=' . $this->request->get['module_id'], 'SSL') ); } if (!isset($this->request->get['module_id'])) { $data['action'] = $this->url->link('module/uber_gallery', 'token=' . $this->session->data['token'], 'SSL'); } else { $data['action'] = $this->url->link('module/uber_gallery', 'token=' . $this->session->data['token'] . '&module_id=' . $this->request->get['module_id'], 'SSL'); } $data['cancel'] = $this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL'); if (isset($this->request->get['module_id']) && ($this->request->server['REQUEST_METHOD'] != 'POST')) { $module_info = $this->model_extension_module->getModule($this->request->get['module_id']); } if (isset($this->request->post['name'])) { $data['name'] = $this->request->post['name']; } elseif (!empty($module_info)) { $data['name'] = $module_info['name']; } else { $data['name'] = ''; } if (isset($this->request->post['thumb_width'])) { $data['thumb_width'] = $this->request->post['thumb_width']; } elseif (!empty($module_info)) { $data['thumb_width'] = $module_info['thumb_width']; } else { $data['thumb_width'] = ''; } if (isset($this->request->post['thumb_height'])) { $data['thumb_height'] = $this->request->post['thumb_height']; } elseif (!empty($module_info)) { $data['thumb_height'] = $module_info['thumb_height']; } else { $data['thumb_height'] = ''; } if (isset($this->request->post['thumb_quality'])) { $data['thumb_quality'] = $this->request->post['thumb_quality']; } elseif (!empty($module_info)) { $data['thumb_quality'] = $module_info['thumb_quality']; } else { $data['thumb_quality'] = ''; } if (isset($this->request->post['thumb_count'])) { $data['thumb_count'] = $this->request->post['thumb_count']; } elseif (!empty($module_info)) { $data['thumb_count'] = $module_info['thumb_count']; } else { $data['thumb_count'] = ''; } if (isset($this->request->post['thumb_caching'])) { $data['thumb_caching'] = $this->request->post['thumb_caching']; } elseif (!empty($module_info)) { $data['thumb_caching'] = $module_info['thumb_caching']; } else { $data['thumb_caching'] = ''; } if (isset($this->request->post['enable_module_paging'])) { $data['enable_module_paging'] = $this->request->post['enable_module_paging']; } elseif (!empty($module_info)) { $data['enable_module_paging'] = $module_info['enable_module_paging']; } else { $data['enable_module_paging'] = ''; } if (isset($this->request->post['status'])) { $data['status'] = $this->request->post['status']; } elseif (!empty($module_info)) { $data['status'] = $module_info['status']; } else { $data['status'] = ''; } $data['header'] = $this->load->controller('common/header'); $data['column_left'] = $this->load->controller('common/column_left'); $data['footer'] = $this->load->controller('common/footer'); $this->response->setOutput($this->load->view('module/uber_gallery.tpl', $data)); } protected function validate() { if (!$this->user->hasPermission('modify', 'module/uber_gallery')) { $this->error['warning'] = $this->language->get('error_permission'); } if (!$this->request->post['name']) { $this->error['error_name'] = $this->language->get('error_name'); } if (!$this->request->post['thumb_width']) { $this->error['error_thumb_width'] = $this->language->get('error_thumb_width'); } if (!$this->request->post['thumb_height']) { $this->error['error_thumb_height'] = $this->language->get('error_thumb_height'); } if (!$this->request->post['thumb_quality']) { $this->error['error_thumb_quality'] = $this->language->get('error_thumb_quality'); } if (!$this->request->post['thumb_count']) { $this->error['error_thumb_count'] = $this->language->get('error_thumb_count'); } return !$this->error; } } |
Как обычно, здесь два стандартных метода, как в любом back end файле контроллера – index (обеспечивает стандартную логику хранения значений формы) и validate (используется для валидации формы настроек).
В начале статьи я упомянул, что вы должны знать основы модульно разработки в OpenCart, поэтому мы обсудим только код, относящийся к UberGallery.
Мы не будем разбирать метод index, загрузку языков и модулей, создание переменных для файла шаблона представления. Вместо этого мы разберем один интересный кусок кода в index методе. Давайте посмотрим повнимательнее.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// update uber config file $config_file = implode("\n",file(DIR_SYSTEM.'library/uberGallery/resources/oc.galleryConfig.ini')); $tokens = array("[cache_expiration]", "[thumbnail_width]", "[thumbnail_height]", "[thumbnail_quality]", "[thumbnail_count]"); $replacements = array( $this->request->post['thumb_caching'], $this->request->post['thumb_width'], $this->request->post['thumb_height'], $this->request->post['thumb_quality'], $this->request->post['thumb_count'] ); $save_config_file = str_replace($tokens, $replacements, $config_file); $fp = fopen(DIR_SYSTEM.'library/uberGallery/resources/galleryConfig.ini', 'w'); @fwrite($fp, $save_config_file, strlen($save_config_file)); |
Здесь мы пытаемся достичь следующего: когда админ сохраняет форму настроек UberGallery на back end, файл galleryConfig.ini должен создаваться на лету. Вспомните, в начале раздела мы создали файл oc.galleryConfig.ini. Теперь вы должны понять зачем.
Мы вытягиваем контент system/library/uberGallery/resources/oc.galleryConfig.ini, заменяем плейсхолдеры на реальные значения и сохраняем galleryConfig.ini, переписывая существующий файл.
Создайте файл admin/language/english/module/uber_gallery.php со следующим кодом.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?php // Heading $_['heading_title'] = 'uberGallery'; // Text $_['text_module'] = 'Modules'; $_['text_success'] = 'Success: You have modified module uberGallery!'; $_['text_edit'] = 'Edit uberGallery Module'; // Entry $_['entry_status'] = 'Status'; $_['entry_name'] = 'Module Name'; $_['entry_thumb_caching'] = 'Thumbnail Caching'; $_['entry_thumb_width'] = 'Thumbnail Width'; $_['entry_thumb_height'] = 'Thumbnail Height'; $_['entry_thumb_quality'] = 'Thumbnail Quality'; $_['entry_theme_name'] = 'Theme Name'; $_['entry_thumb_count'] = 'Thumbnail Count'; $_['entry_enable_module_paging'] = 'Module Paging'; // Error $_['error_permission'] = 'Warning: You do not have permission to modify specials module!'; $_['error_name'] = 'Module Name must be between 3 and 64 characters!'; $_['error_thumb_width'] = 'Please enter thumbnail width!'; $_['error_thumb_height'] = 'Please enter thumbnail height!'; $_['error_thumb_quality'] = 'Please enter thumbnail quality!'; $_['error_thumb_count'] = 'Please enter thumbnail count!'; |
Ничего необычного – просто объявляем языковые переменные.
Создадим файл шаблона представления с XHTML кодом формы настроек. Создайте файл admin/view/template/module/uber_gallery.tpl.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
<?php echo $header; ?><?php echo $column_left; ?> <div id="content"> <div class="page-header"> <div class="container-fluid"> <div class="pull-right"> <button type="submit" form="form-uber-gallery" data-toggle="tooltip" title="<?php echo $button_save; ?>" class="btn btn-primary"><i class="fa fa-save"></i></button> <a href="<?php echo $cancel; ?>" data-toggle="tooltip" title="<?php echo $button_cancel; ?>" class="btn btn-default"><i class="fa fa-reply"></i></a></div> <h1><?php echo $heading_title; ?></h1> <ul class="breadcrumb"> <?php foreach ($breadcrumbs as $breadcrumb) { ?> <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li> <?php } ?> </ul> </div> </div> <div class="container-fluid"> <?php if ($error_warning) { ?> <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> <?php echo $error_warning; ?> <button type="button" class="close" data-dismiss="alert">×</button> </div> <?php } ?> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"><i class="fa fa-pencil"></i> <?php echo $text_edit; ?></h3> </div> <div class="panel-body"> <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-special" class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label" for="input-name"><?php echo $entry_name; ?></label> <div class="col-sm-10"> <input type="text" name="name" value="<?php echo $name; ?>" placeholder="<?php echo $entry_name; ?>" id="input-name" class="form-control" /> <?php if ($error_name) { ?> <div class="text-danger"><?php echo $error_name; ?></div> <?php } ?> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="input-thumb-caching"><?php echo $entry_thumb_caching; ?></label> <div class="col-sm-10"> <select name="thumb_caching" id="input-thumb-caching" class="form-control"> <?php if ($thumb_caching) { ?> <option value="-1" selected="selected"><?php echo $text_enabled; ?></option> <option value="0"><?php echo $text_disabled; ?></option> <?php } else { ?> <option value="-1"><?php echo $text_enabled; ?></option> <option value="0" selected="selected"><?php echo $text_disabled; ?></option> <?php } ?> </select> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="input-thumb-width"><?php echo $entry_thumb_width; ?></label> <div class="col-sm-10"> <input type="text" name="thumb_width" value="<?php echo $thumb_width; ?>" placeholder="<?php echo $entry_thumb_width; ?>" id="input-thumb-width" class="form-control" /> <?php if ($error_thumb_width) { ?> <div class="text-danger"><?php echo $error_thumb_width; ?></div> <?php } ?> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="input-thumb-height"><?php echo $entry_thumb_height; ?></label> <div class="col-sm-10"> <input type="text" name="thumb_height" value="<?php echo $thumb_height; ?>" placeholder="<?php echo $entry_thumb_height; ?>" id="input-thumb-height" class="form-control" /> <?php if ($error_thumb_height) { ?> <div class="text-danger"><?php echo $error_thumb_height; ?></div> <?php } ?> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="input-thumb-quality"><?php echo $entry_thumb_quality; ?></label> <div class="col-sm-10"> <input type="text" name="thumb_quality" value="<?php echo $thumb_quality; ?>" placeholder="<?php echo $entry_thumb_quality; ?>" id="input-thumb-quality" class="form-control" /> (between 1-100) <?php if ($error_thumb_quality) { ?> <div class="text-danger"><?php echo $error_thumb_quality; ?></div> <?php } ?> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="input-thumb-count"><?php echo $entry_thumb_count; ?></label> <div class="col-sm-10"> <input type="text" name="thumb_count" value="<?php echo $thumb_count; ?>" placeholder="<?php echo $entry_thumb_count; ?>" id="input-thumb-count" class="form-control" /> <?php if ($error_thumb_count) { ?> <div class="text-danger"><?php echo $error_thumb_count; ?></div> <?php } ?> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="input-enable-module-paging"><?php echo $entry_enable_module_paging; ?></label> <div class="col-sm-10"> <select name="enable_module_paging" id="input-enable-module-paging" class="form-control"> <?php if ($enable_module_paging) { ?> <option value="1" selected="selected"><?php echo $text_enabled; ?></option> <option value="0"><?php echo $text_disabled; ?></option> <?php } else { ?> <option value="1"><?php echo $text_enabled; ?></option> <option value="0" selected="selected"><?php echo $text_disabled; ?></option> <?php } ?> </select> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="input-status"><?php echo $entry_status; ?></label> <div class="col-sm-10"> <select name="status" id="input-status" class="form-control"> <?php if ($status) { ?> <option value="1" selected="selected"><?php echo $text_enabled; ?></option> <option value="0"><?php echo $text_disabled; ?></option> <?php } else { ?> <option value="1"><?php echo $text_enabled; ?></option> <option value="0" selected="selected"><?php echo $text_disabled; ?></option> <?php } ?> </select> </div> </form> </div> </div> </div> </div> <?php echo $footer; ?> |
С созданием back end файлом закончили.
Тестирование формы настроек
Перейдите на back end и далее Extensions > Modules. Установите вновь созданный модуль UberGallery и откройте форму настроек.
Заполните значения и сохраните форму! Это сохранит настройки модуля в базе данных. Но помимо этого создастся новый файл galleryConfig.ini! Откройте файл system/library/uberGallery/resources/galleryConfig.ini, в нем должны быть значения параметров из полей формы настроек.
Мы только что построили механизм генерации galleryConfig.ini на лету с помощью формы редактирования! Он будет использовать на front end, когда мы активируем в модуле отображение галереи.
На сегодня все. Скоро вернусь в следующем уроке.
Заключение
В первой части мы пробежались по back end файлам модуля UberGallery. В следующей части мы разберем front end.
Автор: Sajal Soni
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
