SmartCafe Documentation

Вітання
Старт
Перше знайомство
Рекомендоване ПЗ
Розробляємо свій проект
Створюємо пункт Категорії
Ресурсні файли
Створюємо пункт Теги
Створюємо пункт Блог
Створюємо пункт Фото
Створюємо користувачів
Ваша думка

Вітання

Ви веб-розробник? Тоді вам може бути це цікаво.

SmartCafe це фреймворк для розробки систем керування сайтом (адмінки), CRM-систем, тощо. Для роботи з цією системою потрібно мати досвід роботи з наступними технологіями:

Розуміння реляційної бази даних, MySQL
Розуміння технології Моде́ль–вигляд–контро́лер
Мови програмування PHP 5.6+, Javascript (jQuery)

SmartCafe підтримує багатомовний інтерфейс. В базовій комплектації - українська та англійська мови. В системі передбачено багатокористувацький режим роботи з розмежуванням прав доступу у відповідності до повноважень користувачів. В SmartCafe включені безкоштовні бібліотеки та віджети для зручного внесення інформації та отримання звітності у зручні формати .pdf, .docx, .xml, .jpeg (графіки).

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

Старт

Для початку роботи з SmartCafe у вас повинен бути готовий хостінг. Завантажте smartcafe.zip, розархівуйте вміст папки у себе на локальній машині. Перед тим, як скопіювати систему на хостінг, потрібно створити таблиці у базі даних MySQL та прописати користувача та пароль для доступу:

За допомого phpmyadmin вашого хостінга створіть (якщо потрібно) базу даних та імпортуйте файл smartcafe.sql, який знаходиться в корені розархівованої папки.

В улюбленому текстовому редакторі відкрийте файл /var/config.php та пропишіть значення параметрів доступу до бази даних, поштового агента, ім'я домену, секретні ключі та назви для створення cookie. В разі, якщо ви хочете встановити систему не в корені веб-сайту, вкажіть назву папки змінній work_folder, наприклад /smartcafe.

//db
define("db_server", 'localhost', true);
define("db_database", 'admin_cafe', true);
define("db_username", 'admin_cafe', true);
define("db_password", '', true);
define("charset", 'utf8', true);
define("lc_time_names", 'uk_UA', true);
define("group_concat_max_len", '4096', true);
define("query_cache_type", 'OFF', true);

//mail
define("mail_host", 'mail.rising.com.ua', true);
define("mail_port", "25", true);
define("mail_user", 'support@rising.com.ua', true);
define("mail_pass", '', true);

//domain names
define("work_folder", '', true);
define("maindomain", 'cafe.rising.com.ua', true);
define("cookie_domain", '.cafe.rising.com.ua', true);
define("cookie_key", 'change_me', true);
define("cookie_name", 'CAFEUSER', true);
define("cookie_expiration", 2592000, true);

Якщо на вашому хостингу не встановлено SSL - в такому разі закоментуйте нижче вказані рядки в файлі .htaccess, що знаходиться в корені системи:
```
#RewriteCond %{HTTPS} off
#RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
```
По завершені вище вказаних операцій файли системи копіюємо на хостінг.

Перше знайомство

В цій статті будемо вважати, що систему скопійовано в кореневу папку веб-сервера /public_html. Для ознайомлення та розробки підтримка SSL сервером не є критичною, але для робочого сервера рекомендуємо не нехтувати криптуванням трафіку. Отже, зайшовши бровзером за адресою вашого домену, ви отримаєте форму логування. При першому логуванні використовуємо пару логін-пароль: admin - admin. Після успішного логування, ви потрапляєте в інтерфейс Адмін-панелі SmartCafe. Рекомендуємо зразу змінити пароль для користувача admin, скориставшись відповідним лінком на верхній панелі. На цій же панелі, праворуч, знаходиться перемикач мов.

Адмін Панель на разі складається з шести пунктів:

Мова. В первинній комплектації прописано дві мови інтефейсу: українська та англійська. Якщо ви розробляєте одномовний проект, достатньо деактивувати непотрібну мову. В разі потреби додати іншу мову - скористайтеся функціоналом кнопок, що знаходяться праворуч поля пошуку над основною таблицею.
Словник. Власне в цій таблиці знаходяться записи з перекладом на мови, що прописані у системі. Двічі клікніть на будь який запис у таблиці, з'явиться вікно в якому буде представлено всі переклади. В словнику вказані слова, словосполучення, які використовуються для адмінки. При розробці ви будете довати власні словосполучення з їх перекладами.
Користувач. Як вже згадувалося, система є багатокористувацькою, з різними правами доступу кожної групи користувачів. На початку роботи в системі прописаний лише користувач admin, який входить в однойменну групу admin. Кількість користувачів та груп обмежена лише ресурсами вашого сервера. Детальніше про створення та опис прав доступу буде розглянуто на прикладі, нижче в цій статті.
Віджети. Тут описані віджети, js-контроли, які автор використовує в цьому проекті. Як ви помітили, практично всі вони знаходяться в папці /js. В разі, якщо необхідно застосувати інший контрол(віджет), потрібно описати його в цій таблиці та під'єднати до потрібного пункту меню (як див.далі).
Меню. Одне з головних місць системи. Якщо інші модулі Адмін-панелі мають в основному описовий характер, то тут створюються нові пункти, а також їх ресурсні файли.
Звіти. Робота практично кожної аналітичної системи зводиться до отримання звітності, аналізу та прогнозів. В початковому коді SmartCafe прописані три основні формати паперової звітності: PDF, DOCX, XLS. Але при потребі, звітність може подаватися як на Google-maps так і динамічними графіками, тощо.

Програмне забезпечення, яке ми рекомендуємо при розробці проекту на основі SmartCafe.

Розробляємо свій проект

Для прикладу розробимо панель керування своїм блогом. Відразу скажу, що цей приклад більше для демонстрації можливостей системи, аніж завершений повноційнний проект. Важливо: Всі таблиці, на основі яких створюються пункти меню повинні мати первинний індекс з автоінкрементом.

В цьому прикладі нам потрібно буде створити три таблиці: таблиця категорій, тегів та власне основна таблиця записів блогу.

Створюємо пункт Категорії

Переходимо в пункт "Меню" та натискаємо кнопку "Додати". Поля, що потрібно заповнити розглянемо детальніше:

Назва. Тут все просто - вводимо назву нового пункту меню. В нашому випадку "Категорії".
Батько. Це поле вказує батьківський пункт меню. Вибираємо значення "Корінь".
href. Це назва ссилки, по якій ми будемо попадати в цей пункт меню. Увага, назва ссилки не може співпадати з полем "Джерело", що знаходиться нижче. Вказуємо значення categories
Джерело. Значенням цього поля потрібно вказати назву таблиці MySQL, код структури вказано нижче. Вказуємо category. В нашому проекті, категорії можуть мати підкатегорії і т.д. Тобто категорії це деревовидна структура. Відповідно код створення таблиці буде мати такий вигляд:
```
CREATE TABLE `category` (
	`idcat` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
	`idparent` INT(10) UNSIGNED NOT NULL DEFAULT '0',
	`name` VARCHAR(250) NOT NULL DEFAULT '',
	PRIMARY KEY (`idcat`)
)
COLLATE='utf8_general_ci';
```
Картинка. Це поле вказує піктограмку, яка буде поряд з назвою пункта меню. Відкрийте графічним редактором файл /img/control/control_tot.png. В первинній комлектації в ньому є 17-рядків по 10 піктограм 16x16px. Нехай, для даного пункту нам потрібно вказати піктограмку, яка знаходиться в другому рядку - п'ятою. Нумерація починається з нуля. Перша літера коду "a", два наступних символи - це номер рядку (починається з 00), в нас другий рядок - відповідно "01". І останній симвом - індекс в рядку, в нашому випадку "4". Отже, повний код картинки a014, так і вказуємо в це поле.
Порядок. Порядковий номер пункта меню.
Група. Вказуємо групу (-и) користувачів, які будуть мати доступ до цього пункту меню.

В закладці "JS-READY" вказуємо скрипт, який змінює висоту робочої таблиці на весь екран. В разі потреби - змінюємо від'ємник:

$('.table1 .table_body').height($(window).height()-133);

Вкладка "JS-INCLUDES" потрібна для вказання віджетів, що будуть використовуватися в даному пункті меню. На разі нічого не змінюємо в ній. Потрібні віджети автоматично додадуться при створені коду для цього пункту меню.

Підтверджуємо внесені дані натисканням кнопки "OK".

Створюємо (за домопогою phpmyadmin) в базі даних таблицю category, код див.вище.

Ресурсні файли

Клікніть на новостворений пункт "Категорії" та натисніть кнопку "Джерело" з верхньої панелі таблиці. Тепер потрібно описати таблицю та поля вводу.

Вкладка Джерело

Тип модуля. Оскільки категорії є деревовидної структури - вибираємо Tree with Dialog.
Кнопки панелі. Вказуємо add, edit, remove, expand, collapse.
Пошук на панелі. Ставимо галочку.

Після вкладки Джерело, йдуть вкладки з полями таблиці, опишемо їх, якими контролами вносити дані в ці поля.

Вкладка idcat

Батьківський ІД. Вказуємо поле idparent.

Вкладка idparent.Тут залишаємо все без змін. Метод get_idparent буде повертати всі можливі значення для батьківського вузла.

Вкладка name

Обов'язкове. Ставимо галочку.
Для заголовку. Ставимо галочку.
У таблиці. Ставимо галочку.

Натискаємо кнопку "ОК". Заходимо ftp-менеджером на сайт, копіюємо новостворену папку з усім вмістом /public_html/modules/category в папку /modules нашого проекта на локальному комп'ютері. Відкриємо наш проект за допомогою NetBeans IDE.

Модуль (каталог) в системі SmartCafe складається з п'яти файлів. У новостворених файлів код є неформатованим, але це легко усувається засобами NetBeans. Відкриваємо файл, наприклад category_class.php, натисніть комбінацію клавіш "Alt+Shift+F" або пункт меню Source->Format.

Передача даних з форм відбувається за допомогою технології AJAX. Дані надсилаються в обробку файлу з закінченням _json.php відповідно кожного каталога.

Файли з закінченням _table.php та _dlg.php це представлення таблиць та діалогів модуля.

Файл з закінченням _class.php - відповідно клас роботи з таблицею MySQL, в якій зберігіються дані модуля.

І останній файл ready_js.php - це javascript-код, який обрамлює таблиці та діалоги, забезпечує фунціонування полів вводу, передачу та отримання даних з сервера. Модулі, на основі яких формується ready_js.php знаходяться в каталозі /js/smartcafe/. Ви можете дописувати їх - розширюючи функціонал вашого проекту.

Перейдемо в новостворений пункт "Категорії" та внесемо декілька записів.

Зверніть увагу, що у заголовку таблиці вказано ua:category:NotSet. Це означає, що в словнику немає значення української мови (ua:) для слова "category". Перейдіть в пункт меню "Словник" та додайте запис [назва: category, укр: Категорія, анг: Category].

Створюємо пункт Теги

Алгоритм сворення подібний до створення попереднього пункту, тому опишемо коротко параметри. Створимо в базі наступну таблицю:

CREATE TABLE `tag` (
	`idtag` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
	`name` VARCHAR(250) NOT NULL DEFAULT '',
	PRIMARY KEY (`idtag`)
)
COLLATE='utf8_general_ci';

Переходимо в пункт "Меню" та створюємо новий з наступними параметрами:

Назва: tag.
Батько: Корінь.
href: tags.
Джерело: tag.
Картинка: a066.
Порядок: 11.
Група: admin.

В закладці js-ready:

$('.table1 .table_body').height($(window).height()-133);

Створюємо ресурсні файли: відмічаємо пункт та натискаємо кнопку "Джерело". Вказуємо наступні параметри у діалоговому вікні.

Вкладка Джерело:

Тип модуля: Table with Dialog.
Кнопки панелі: add, edit, remove.
Пошук на панелі: Ставимо галочку.

Вкладка idtag залишаємо без змін, поле вводу має мати тип hidden.

Вкладка name:

Обов'язкове: Ставимо галочку.
Для заголовку: Ставимо галочку.
У таблиці: Ставимо галочку.

Підтверджуємо натисканням кнопки "OK".

Переходимо в пункт tad та додаємо записи.

Створюємо пункт Блог

Додаємо запис в пункті "Меню" з наступними параметрами:

Назва: post.
Батько: Корінь.
href: posts.
Джерело: post.
Картинка: a139.
Порядок: 12.
Група: admin.

В закладці js-ready:

$('.table1 .table_body').height($(window).height()-133);

Створимо в базі наступну таблицю:

CREATE TABLE `post` (
	`idpost` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT,
	`idcat` INT(11) UNSIGNED NOT NULL DEFAULT '0',
	`dt` DATETIME NOT NULL,
	`title` VARCHAR(250) NOT NULL DEFAULT '',
	`post` TEXT NOT NULL,
	`active` ENUM('Y','N') NOT NULL DEFAULT 'Y',
	PRIMARY KEY (`idpost`)
)
COLLATE='utf8_general_ci';

Відмічаємо новостворений пункт та натискаємо кнопку "Джерело":

Вкладка "Джерело":

Тип модуля: Table with Dialog.
Кнопки панелі: add, edit. remove.
Пошук на панелі: Ставимо галочку.
Старт Таблиця: table1.
Кількість закладок: 4. З'явиться ще три додаткових поля, для назв закладок, заповнюємо їх наступними даними:
tab #1 dictionary label: data.
tab #2 dictionary label: post.
tab #3 dictionary label: tag.
tab #4 dictionary label: photo. В закладці будемо прикріпляти фото до запису блогу.

Вкладка "idpost", в секції "Підтаблиці":

Ставимо галочку : checkbox-control PriKey, вказуємо значення tad: idtag (таблиця:первинний ключ), DisplayField:name (поле, що буде відображатися), Intab: tab3 (Вкладка в якій буде відображатися дана таблиця).
Ставимо галочку : gallary-control. Intab: tab4 (Вкладка в якій буде відображатися дана таблиця).

Вкладка "idcat":

У таблиці: Ставимо галочку. Система спробує знайти первинний ключ "idcat" серед таблиць нашої бази, і в нашому випадку знайде, оскільки раніше було створено таблицю `category` з ключом "idcat". В разі, якщо первинний ключ довідника не співпаде з назвою поля, потрібно буде підправити вручну селект у файлі-класі. див.нижче.

Вкладка "dt":

Обов'язкове: Ставимо галочку.
У таблиці: Ставимо галочку.
В закладці: tab1.

Вкладка "title":

Обов'язкове: Ставимо галочку.
Для заголовку: Ставимо галочку.
У таблиці: Ставимо галочку.
В закладці: tab1.

Вкладка "post":

Поле введення: ckeditor.
В закладці: tab2.

Вкладка "active":

Додаткові опції змінюємо значення на: Y:yes,N:no.
У таблиці: Ставимо галочку.
В закладці: tab1.

Перевіряємо правильність опису та натискаємо кнопку "OK".

Як зазначалось раніше, потрібно відкорегувати файл post_class.php. Тому скачуємо каталог /public_htmp/modeles/post. Замінюємо метод get_idcat($id) на наступний:

public function get_idcat() {
        $rs = mysqli_query($this->connection, 'SELECT  a.idcat, a.name FROM category a ORDER BY a.name');
        return $rs;
}

і відповідно в файлі post_dlg.php в секції поля вводу idcat, замість

 $record['name_idcat']

вказати

 $record['name']

Виправлені файли копіюємо на хостінг.

Також, в базі буде створено таблиця post_gallery, в якій будуть зберігатися записи прикріплених фото до постів. При бажанні, можна створити ще один пункт з джерелом (таблицею) post_gallery, для редагування завантажених фото. Оновіть сторінку та спробуйте додати новий запис в блог.

Створюємо пункт Фото

Зверніть увагу, при створені попереднього модуля була використана опція gallary-control. Для обліку файлів-картинок галереї система автоматично створила таблицю post_gallary:

CREATE TABLE `post_gallary` (
	`rowid` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
	`idpost` INT(10) UNSIGNED NOT NULL DEFAULT '0',
	`name` VARCHAR(50) NOT NULL DEFAULT '',
	`note` VARCHAR(250) NOT NULL DEFAULT '',
	PRIMARY KEY (`rowid`)
)
COLLATE='utf8_general_ci';

На основі цієї таблиці створимо новий пункт, а також продемонструємо як додавати звіти до пунктів меню.

Додаємо новий пункт меню з наступними параметрами:

Назва: photo.
Батько: Корінь.
href: photos.
Джерело: post_gallary.
Картинка: a113.
Порядок: 13.
Група: admin.

В закладці js-ready:

$('.table1 .table_body').height($(window).height()-133);

Відмічаємо новостворений пункт та натискаємо кнопку "Джерело":

вкладка "Джерело":

Тип модуля: Table with Dialog.
Кнопки панелі: add, edit, remove, PRINT.
Пошук на панелі: Ставимо галочку.
Старт Таблиця: table1.
Кількість закладок: 0.

вкладки "rowid" та "idpost" залишаємо без змін. В закладці "name" вказуємо наступне:

Поле введення: file.
Додаткові опції: ../post/gallary,pic_+time.
Обов'язкове: Ставимо галочку.
Для заголовку: Ставимо галочку.
У таблиці: Ставимо галочку.

В закладці "note":

У таблиці: Ставимо галочку.

Натискаємо кнопку "OK". Скачуємо ресурсні файли для цього пункту, каталог /modules/post_gallary. Для коректної роботи пункту потрібно замінити метод get_idpost в файлі post_gallary_class.php на:

public function get_idpost() {
 $rs = mysqli_query($this->connection, 'SELECT  a.idpost, a.title FROM post a ORDER BY a.title');
 return $rs;
}

А також в файлі post_gallary_dlg.php код

$record['name_idpost']

Замінити на

htmlspecialchars($record['title'])

Закопійовуємо правлені файли на хостінг і перевіряємо роботоздатність пункту.

Зверніть увагу, що біля кнопок редагування записами, з'явилась кнопка "Друку". Натиснувши на неї отримаєте пусту таблицю звітів. Додати запис звіту можна в однойменному пункті "Звіти", перед тим підготувавши файл з відповідним кодом. В первинну збірку включено три шаблонних файла звіту. Ці файли знаходяться в папці /report. Рекомендуємо створювати звіти на їх основі. Щоб звіт появився в певному пункті для певної групи користувачів, потрібно в описі звіта (пункт "Звіти") вказати "Групу користувачів" та в закладці "Назва пункту" - активувати звіт для вказаного пункту.

Створюємо користувачів

Після завершення розробки проекту, потрібно створити користувачів, які будуть вносити дані. Переходимо в пункт "Користувач". Додаємо запис. При описі полів користувача зупинемося на полі група. Не рекомендується включати інших користувачів в групу "admin". Тому створимо групу, наприклад: "postmaster". Клікніть на кнопці з трьома крапками [...], що знаходиться після поля назв груп, у діалоговому вікні додайте нову групу "postmaster". Закрийте вікно менеджера груп. Новому користувачу присвойте вище вказану групу. Заповніть інші поля та натисніть кнопку "OK".

Залишилося вказати пункти меню, котрі бачить група "postmaster". Переходимо в пункт "Меню", двічі клацємо на запис "Категорії", у вікні редагування, в полі "Група" ставимо галочку навпроти "postmaster". Аналогічно роздаємо права для інших новостворених пунктів нашого проекту. Для перевірки, можна вилогуватися та зайти під новоствореним користувачем, переконатися чи всі вказані пункти доступно.

Вітання

Старт

Перше знайомство

Програмне забезпечення, яке ми рекомендуємо при розробці проекту на основі SmartCafe.

Розробляємо свій проект

Створюємо пункт Категорії

Ресурсні файли

Створюємо пункт Теги

Створюємо пункт Блог

Створюємо пункт Фото

Створюємо користувачів

Ваша думка