Встановлення серверної частини Загальна інформація Підготовка сервера Запуск контейнера Підключення та інсталяція Налаштування SSL-сертифіката Налаштування безпеки Оновлення сервера
Середовище розробки Скрипти Кореневі скрипти Модульні скрипти Виклик модульного скрипту Параметри модульного скрипту Робота модульного скрипту Веб-модулі
Довідник Прийняті позначення Типи даних модулів Системні ключі Глобальні ключі Конфігурація Засоби налагодження Сервіс Кешування Продуктивність API Парсер MySql Сесія Emailer IpUtil Xml
Оновлення версій

Веб-модулі

Однією з найважливіших особливостей Melbis Shop 6 є масштабування системи за рахунок інтеграції в локальну програму окремих веб-модулів. На сьогодні абсолютна більшість CMS, блогів і форумів не мають клієнтських додатків, а система їхнього керування (адмін розділ) побудована повністю на HTML-інтерфейсі і, відповідно, керується тільки через браузер. Однак, багато серйозних продуктів, що працюють з більш-менш пристойним обсягом даних, прагнуть розробити додатковий швидкий десктопний інтерфейс.

Коли такий застосунок створює багата компанія, наприклад Google AdWords Editor, то вона витрачає достатньо часу на підтримання його функціоналу, аналогічного для веб-сайту. Саме тому, багато CMS не мають одразу дві версії адмін-частини: веб і десктоп. Більшість розробників обрала веб-варіант, як основний. Що ж це правильно, але це не найкращий варіант із можливих. Історично так склалося, що ми почали розробку Melbis Shop з іншого рішення - десктопної програми, але потім, незабаром змогли зробити інтеграцію в неї веб-модулів, отримавши тим самим іменний кращий варіант CMS. Ми намагалися зробити Melbis Shop максимально функціональним, але з нашої практики ми бачимо, що рано чи пізно у власника виникає необхідність для реалізації власного унікального завдання. На додачу до цього, є ситуації, коли розробка окремих елементів управління або генерація моментальних звітів буде зручнішою через веб-адмінку. Такі веб-інтерфейси легкодоступні на будь-якому пристрої на кшталт смартфона чи планшета і не потребуватимуть встановлення локальної програми.

Саме з цих причин в Melbis Shop 6 реалізовано веб-модулі, і ми настійно рекомендуємо Вам звернути увагу на них, оскільки вважаємо це однією з ключових переваг системи. Розробивши свій веб-модуль, Ви зможете вирішити одразу два завдання: розширити функціонал, плюс додати альтернативний спосіб управління магазином.

Отже, що ж таке ці веб-модулі, і де ми можемо їх використовувати? Для початку зазначимо, що в системі присутні веб-модулі двох типів: вбудовані та зовнішні. Вбудовані - це ті, що вбудовані прямо в інтерфейс додатка Melbis Shop і взаємодіють з ним, отримуючи і передаючи дані. Зовнішні ж, це ті модулі, які насамперед працюватимуть поза додатком Melbis Shop. Тобто, досить знати адресу модуля, щоб відкрити його в будь-якому браузері на будь-якому пристрої. Перш, ніж ми почнемо розповідь про них, рекомендується ознайомитися з розділами"Кореневі скрипти" і"Модульні скрипти", тому що веб-модуль, є ніщо інше як особливий, але все той же модульний скрипт.


Тестовий веб-модуль

Відкрийте в програмі розділи"Ціни","Покупці" або"Замовлення" і натисніть комбінацію клавіш Ctrl-W. У результаті в кожному з цих вікон з'явиться спеціальне вікно "Вбудований веб-модуль". Цей вбудований модуль не що інше, як браузер (на базі Chromium), який був інтегрований у кожне з цих вікон. Ключовий момент цього підходу полягає в тому, що коли Ви виконуєте у вікні будь-які дії (переміщуєтесь по товарах, замовленнях, покупцях), вбудованому веб-модулю передаються певні параметри. Наприклад, у розділі "Ціни" у веб-модуль передається id-товару, а також інформація про те, хто саме виконує дію (про принципи авторизації користувачів докладніше нижче). Таким чином, можна розробити веб-модуль, який розширюватиме будь-який функціонал магазину. Цих модулів може бути багато, їх можна буде перемикати, і до кожного з модулів можна буде задати права доступу для користувачів. Наприклад, для розділу "Ціни" можна розробити такі веб-модулі як: "Перегляд інформації про товар", "Статистика продажів товару", "Складський облік товару" тощо. Для розділів "Замовлення" та/або "Покупці" можна розробити модулі-звіти: "Історія покупок", "Відправлення SMS, E-mail" тощо.

Розглянемо тепер, як створити свій вбудований веб-модуль. Насамперед слід зайти в розділ "Проектування/Опції модулів", далі перейти за закладкою "Вбудовані веб-модулі" та обрати, для чого саме створюватиметься веб-модуль. На вибір пропонуються три групи: "Товари", "Покупець", "Замовлення", "Планувальник" і "Невидимі". Після цього можна додати модуль і вказати його параметри: назву, адресу модуля і ключ - символьний код модуля. Наприклад, за замовчуванням у базовому постачанні магазину присутній тестовий модуль із такими параметрами:

  • Назва: Тестовий модуль
  • Адреса модуля: http://ms6.com/?mod=melbis_web_test
  • Ключ: TEST

Зверніть увагу, що для модуля вказана опція"Потрібна ідентифікація користувача". Цей пункт є додатковим (необов'язковим) прапором, який позначає, що під час звернення до цього модуля необхідно додати і перевірити атрибути користувача (логін і пароль), щоб провести його авторизацію. Наприклад, для товарного модуля, крім id-товару, будуть додатково надіслані поля"логін" і"пароль", які вказані в параметрах підключення. Зверніть увагу, що пароль передається в закодованому вигляді (PHP-функція md5()). Наприклад, для тестового модуля буде передано такі дані:

array ( 'get' => array ( 'mod' => 'melbis_web_test', ), 'post' => array ( 'melbis' => '', 'login' => 'admin', 'pass_code' => '3240e96ca45f6e45b36f7b56a093ce0a', 'topic_id' => '4', 'store_id' => '1' ), )

Отже, Ви дізналися, де визначаються та налаштовуються вбудовані веб-модулі. Наступним кроком ми розповімо про те, як влаштований і працює базовий тестовий веб-модуль melbis_web_test.php. Але, перш ніж перейти до нього, слід згадати про кореневий скрипт index.php. Насправді, ми про нього вже детально розповіли в розділі"Кореневі скрипти". Тому, якщо Ви не знайомі з цим розділом, прочитайте його, щоб розуміти, яким чином буде викликатися модуль melbis_web_test.php.

Розбір модуля почнемо з його вхідних параметрів, які визначені стандартно для модуля, що викликається кореневим скриптом index.php:

get: serial, post: serial

Тобто, на вході ми отримаємо масив з усіма даними, переданими методами GET і POST.

/** * Function MELBIS_WEB_TEST **/ function MELBIS_WEB_TEST($mVars) { global $gParser; return MELBIS_INC_AUTH(__FUNCTION__, $mVars); }

А ось так виглядає головна функція MELBIS_WEB_TEST, яка буде викликана автоматично. Власне, вона досить проста і складається з виклику функції MELBIS_INC_AUTH з модуля-бібліотеки melbis_inc_auth.php. Це універсальний модуль, написаний нами спеціально для веб-модулів. У ньому є спеціальний функції, які ми рекомендуємо використовувати Вам для спрощення розробки. Усе що Вам потрібно, це викликати функцію MELBIS_INC_AUTH, передавши їй два параметри: ім'я модуля і масив вхідних даних GET і POST. Ця функція автоматично зробить ідентифікацію користувача, визначить тип модуля і права на його запуск. Після цього, ця функція автоматично передасть управління назад у модуль, шляхом виклику функції типу"ім'я_модуля_default", з такими трьома параметрами:

  • $mUserId - визначений ID-користувача(0, якщо не був визначений)
  • $mResultAuth - код результату авторизації, може набувати таких значень:
    • accept - успішна авторизація і доступ користувача до модуля
    • denied - успішна авторизація, але доступ користувача до модуля закритий
    • wrong - авторизація користувача пройшла з помилкою
    • start - початок процесу авторизації (спроби авторизації не було)
  • $mVars - масив вхідних даних GET і POST з якими викликався модуль спочатку.

/** * Function MELBIS_WEB_TEST_default **/ function MELBIS_WEB_TEST_default($mUserId, $mResultAuth, $mVars) { global $gParser; // Create $tpl = $gParser->TplCreate();   
                                                           
    // Auth if ( $mResultAuth == 'accept' ) { // Підготувати права MELBIS_INC_AUTH_web_key_prepare($mUserId);
        
        // Показуємо demo post vars $gParser->TplAssign($tpl, 'VARS', var_export($mVars, true)); // Демонстрація демо-версії зміни замовлень $order = ( isset($mVars['post']['order']) ) ? $mVars['post']['order'] : '{}'; $gParser->TplAssign($tpl, 'ORDER', $order); // Скрипти $gParser->TplParse($tpl, 'SCRIPTS', 'scripts'); // Main $gParser->TplParse($tpl, 'MAIN', 'main'); } else { // Auth $gParser->TplParse($tpl, 'MAIN', 'auth'); } return $gParser->TplFree($tpl, 'MAIN'); }

Ось так виглядає default-функція для розглянутого нами модуля. Якщо ідентифікація пройшла успішно, то ми готуємо необхідні ключі та шаблони і формуємо відповідь на основі шаблону main.htm. В іншому разі, якщо авторизація неуспішна, то ми виводимо шаблон auth.htm. Він являє собою виклик окремого модуля авторизація melbis_web_auth.php. Загалом, це певний універсальний підхід, на той випадок, якщо модуль буде викликатися і як вбудований в Melbis Shop, і як зовнішній через будь-який браузер (тоді потрібно запросити логін і пароль для ідентифікації користувача). Якщо ж Ви знаєте, що це буде веб-модуль тільки для внутрішнього використання, тоді замість шаблону auth.htm, можна додати інший, в якому просто написати, що доступ закритий.


Зворотний зв'язок веб-модуля

Для веб-модуля вбудованого у вікно редагування замовлення, Вам, найімовірніше, знадобиться можливість зворотного зв'язку. Наприклад, якщо захочете вести прорахунок будь-яких даних у веб-модулі, а потім повертати їх у замовлення. Якщо йдеться, звісно, про одне поле, то його можна і просто скопіювати. Але не рідкісні ті випадки, коли оновлюється відразу цілі масиви даних замовлення. Найпопулярніший приклад - це інтеграція магазину з АТС, коли скрипт модуля виконує запит до АТС і, отримавши відповідь, повинен автоматично визначити і підставити покупця в замовлення.

Для подібних ситуацій Вам буде потрібно, використовуючи JavaScript, підготувати відповідь і відправити її в консоль, разом зі спеціальним кодовим словом. Повернемося до нашого тестового модуля melbis_web_test.php і розглянемо весь шлях роботи з даними. Отже, оскільки цей модуль вбудований, то всередині масиву $mVars['post']['order'], ми отримаємо представлення замовлення в JSON-форматі, щось у цьому дусі:

{ "version":[ { "id": "1", "order_id": "44", "user_id":null, "client_id": "515", "date_time": "2019-06-23 20:02:43", "total_sum":"10" } ], "client_field":[ { "id": "1", "version_id": "1", "field_id": "1", "field_skey": "NAME", "field_name": "Ім'я (ПІБ)", "field_tindex":"0", "field_tlevel": "0", "field_absindex": "0", "field_folder": "0", "field_kind_key": "kRequired", "field_spec_key": "kDefault", "value_id":null, "value_skey":"", "value_code":"", "value_kind_key":"", "value_txt": "Tester" }, { "id": "2", "version_id":"1", "field_id": "2", "field_skey": "COMPANY", "field_name": "Компанія", "field_tindex": "0", "field_tlevel": "0", "field_absindex":"1", "field_folder": "0", "field_kind_key": "kDefault", "field_spec_key": "kDefault", "value_id":null, "value_skey":"", "value_code":"", "value_kind_key":"", "value_txt": "test" }, { "id": "3", "version_id": "1", "field_id": "3", "field_skey": "EMAIL", "field_name":"Електронна пошта", "field_tindex": "0", "field_tlevel": "0", "field_absindex": "2", "field_folder": "0", "field_kind_key":"kRequired", "field_spec_key": "kDefault", "value_id":null, "value_skey":"", "value_code":"", "value_kind_key":"", "value_txt":"test@mail.ru" }, { "id": "4", "version_id": "1", "field_id": "4", "field_skey": "PHONE", "field_name": "Телефон", "field_tindex":"0", "field_tlevel": "0", "field_absindex": "3", "field_folder": "0", "field_kind_key": "kDefault", "field_spec_key": "kDefault", "value_id":null, "value_skey":"", "value_code":"", "value_kind_key":"", "value_txt": "+380(50)111-11-11" } ], "store":[ { "id":"1", "version_id": "1", "store_id": "24", "store_provider_id": "2", "store_brand_id": "4", "store_pprice": "0", "store_rprice": "0", "store_price": "0", "store_price":"10", "store_price2": "0", "store_price3": "0", "store_how": "1", "store_code_shop": "AMATEUR_START", "store_code_prov":"", "store_code_made":"", "store_meas":"", "store_name": "Стартовий платіж", "store_kind_key": "kLicenseDomain", "store_status_key": "kExist", "store_state_key":"kDefault", "store_min_order": "0", "store_step_order": "0", "recalc": "0", "out_price": "10", "amount": "1", "notice": "myshop.com", "auto_notice": "Calculated", "pos": "1" } ], "store_option":[ ], "option":[ { "id": "1", "version_id": "1", "option_id":"3", "option_skey": "CREATOR", "option_name": "Творець", "option_kind_key": "kDefault", "option_pos": "1", "value_id": "9", "value_skey":"USER", "value_name": "Користувач", "value_kind_key": "kDefault", "value_modify_sum": "0", "value_oper_num": "0", "value_source_num": "0", "notice":"" }, { "id": "2", "version_id": "1", "option_id": "1", "option_skey": "STATUS", "option_name": "Статус", "option_kind_key":"kDefault", "option_pos": "2", "value_id": "3", "value_skey": "ABORT", "value_name": "Анульовано", "value_kind_key": "kDefault", "value_modify_sum":"0", "value_oper_num": "0", "value_source_num": "0", "notice":"" }, { "id": "3", "version_id": "1", "option_id":"2", "option_skey": "PAYMENT", "option_name": "Оплата", "option_kind_key": "kDefault", "option_pos": "3", "value_id": "5", "value_skey":"CARD", "value_name": "LiqPay", "value_kind_key": "kDefault", "value_modify_sum": "0", "value_oper_num": "0", "value_source_num": "0", "notice":"" } } }

Це і є таблиці замовлення, представлені у вигляді JSON-об'єкта, який ми передамо далі в шаблон scripts.htm під ключем {ORDER}. Ось код у скрипті:

       // Order change back demo $order = ( isset($mVars['post']['order']) ) ? $mVars['post']['order'] : '{}'; $gParser->TplAssign($tpl, 'ORDER', $order);

А ось код у scripts.htm, де ми визначаємо змінну melbis_order:

var melbis_order = {ORDER};

Після того, як користувач вибере режим редагування даних замовлення, ми запускаємо функцію ініціювання даних, щоб показати поточні значення полів таблиць замовлення:

// Init change back function melbis_init_back() { for ( var table in melbis_order ) { var data = melbis_order[table]; var columns = []; for (var c in data[0]) { columns.push({field: c, title: c}); } $('.melbis_table_order[data-table="" + table + '""]').bootstrapTable({ columns: columns, data: data }); } } }

У результаті чого формуються Bootstrap-таблиці, які можна редагувати за подією натискання на будь-яку клітинку. Для цього додано таку функцію:

// Змінити значення поля $('.melbis_table_order').on('click-cell.bs.table', function (event, field, value, row) { var table = event.target.dataset.table; bootbox.prompt({title: "Редагувати значення "" + field + ''''", value: value, callback: function (result) { var update = {}; update[table] = []; update[table].push({ id: row.id, [field]: result }); console.log('MELBIS_ORDER_UPDATE' + JSON.stringify(update)); } } }); });

Як Ви бачите, тут ми використовуємо js-компонент bootbox.js, який створює prompt-запит на редагування комірки. І при отриманні відповіді ми формуємо JSON-масив update, який просто виводиться в консоль браузера командою console.log, додавши в самий початок кодове слово MELBIS_ORDER_UPDATE:

           var update = {}; update[table] = []; update[table].push({id: row.id, [field]: result }); console.log('MELBIS_ORDER_UPDATE' + JSON.stringify(update));

Зверніть увагу, що обов'язково треба додати поле id, щоб однозначно визначити, який рядок таблиці потрібно оновити. Тому Ви без проблем можете за раз оновлювати необмежену кількість таблиць і їхніх рядків.

На цьому розгляд веб-модулів можна завершити. Насамкінець зверніть увагу на таку ідею. Ви можете використовувати в якості зовнішніх веб-модулів і будь-які інші сайти. Ваші співробітники отримують готовий набір часто використовуваних сайтів прямо в клієнтському середовищі Melbis Shop 6. Наприклад, це можуть бути сайти поштової служби, транспортної компанії, форуму магазину, групи магазину в соціальних мережах тощо.