SmartCafe Documentation


Are you a web developer? Then you might be wondering.

SmartCafe is a framework for developing website management systems (admins), CRM systems, and more. To work with this system you need to have experience working with the following technologies:

  • Understanding the relational database, MySQL
  • Understanding Model-View-Controller Technology
  • Programming languages ​​PHP 5.6+, Javascript (jQuery)

SmartCafe supports multilingual interface. The basic equipment is Ukrainian and English. The system provides a multi-user mode of work with the differentiation of access rights in accordance with the powers of users. SmartCafe includes free libraries and widgets for easy data entry and reporting Convenient formats .pdf, .docx, .xml, .jpeg (graphics).

If you are a beginner in web development but have a desire to learn - this framework will be a good foundation for your development and understanding of the web-based development process.


You must have ready hosting to get started with SmartCafe. Download unzip the contents of the folder on your local machine. Before copying the system to the hosting, you need to create tables in the MySQL database and prescribe the user and password for access:

  • With the help of your hosting phpmyadmin, create (if necessary) a database and import the file smartcafe.sql, which is at the root of the unzipped folder.
  • In your favorite text editor, open the /var/config.php file and write it. value of database access options, mail agent, domain name, secret keys and cookie names. In case you want to install the system not at the root of the website, specify the folder name to the variable work_folder , such as /smartcafe .
    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);
    define("mail_host", '', true);
    define("mail_port", "25", true);
    define("mail_user", '', true);
    define("mail_pass", '', true);
    //domain names
    define("work_folder", '', true);
    define("maindomain", '', true);
    define("cookie_domain", '', 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]
  • Upon completion of the above operations, system files are copied to the hosting.

First introduction

In this article, we will assume that the system has been copied to the root of the Web server /public_html . For familiarization and development, SSL support is not critical, but we recommend that you do not neglect traffic crypt for the server. So, by going to the brower at the address of your domain, you will receive a form of logging. When logging in for the first time, we use a couple of login passwords: admin - admin . After successfully logging in, you will fall into the SmartCafe admin panel interface. We recommend that you immediately change the password for the admin user by using the appropriate link in the top bar. On the same panel, on the right, there is a language switch.

The admin panel now consists of six items:

  • Language . In the initial configuration two languages ​​of the interface are written: Ukrainian and English. If you are developing a single-language project, it's enough to deactivate the unnecessary language. If necessary, add another language - use the functionality of the buttons located to the right of the search box above the main table.
  • Dictionary . Actually, in this table there are records with the translation into the languages ​​that are written in the system. Double-click on any entry in the table, a window will appear in which all translations will be presented. The dictionary contains words, phrases that are used for the admin. In designing, you will publish your own phrases with their translations.
  • User . As already mentioned, the system is multi-user, with different access rights for each user group. At the beginning of the system, the user is admin only, which is part of the admin group with the same name. The number of users and groups is limited only by the resources of your server. For more information on creating and describing access rights, see the example below in this article.
  • Widgets . Here are the widgets, js-controls that the author uses in this project. As you noticed, virtually all of them are in the /js folder. If you want to apply another control (widget), you need to describe it in this table and connect it to the desired menu item (see below).
  • Menu . One of the main places of the system. If other admin panel modules are mostly descriptive, then new items are created as well as their resource files.
  • Reports . The work of practically every analytical system is reduced to receiving reports, analyzes and forecasts. In the initial code of SmartCafe three basic formats of paper reports are written: PDF, DOCX, XLS. But if necessary, reporting can be provided on both Google maps and dynamic charts, etc.

The software we recommend for SmartCafe project development.

Develop your project

For example, we will develop a control panel for our blog. Immediately I will say that this example is more to demonstrate the capabilities of the system than the completed full project. Important: All tables on the basis of which the menu items are created must have a primary auto-increment index.

In this example, we will need to create three tables: the category table, the tags and the actual main blog entries table.

Create a Category Item

Go to the "Menu" and click the "Add" button. Please fill out the fields that need to be filled in more detail:

  • Name . Here everything is simple - we enter the name of a new menu item. In our case, "Categories."
  • Father . This field is indicated by the parent item of the menu. Select the root value
  • href . This is the name of the link on which we will fall into this menu item. Note, the link name may not match the "Source" field below. Specify the categories
  • value
  • Source . The value of this field should be the name of the MySQL table, the structure code is listed below. Specifies the category . In our project, categories may have subcategories, etc. That is, the category is a tree structure. Accordingly, the table creation code will look like this:
    CREATE TABLE `category` (
    	`idparent` INT(10) UNSIGNED NOT NULL DEFAULT '0',
    	`name` VARCHAR(250) NOT NULL DEFAULT '',
    	PRIMARY KEY (`idcat`)
  • Picture . This field specifies the icon that will be next to the menu item's name. Open the /img/control/control_tot.png file with the graphic editor. In the initial set it contains 17 lines with 10 icons 16x16px. Let, for this item, we need to specify a pictogram, which is in the second line - heel. The numbering starts from scratch. The first letter of the "a" code, the two subsequent characters is the line number (beginning with 00), in our second line, respectively, "01" . And the last symbol is the index in the line, in our case "4". So, the full code of the a014 image is also listed in this field.
  • Order . Item number of the menu item.
  • Group . Specify the group (s) of users who will have access to this menu item.

In the "JS-READY" tab, we specify a script that changes the height of the worksheet to the full screen. If necessary, we will change the negative:

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

The "JS-INCLUDES" tab is required to specify the widgets that will be used in this menu item. At the moment, nothing changes in it. Required widgets will automatically be added when creating a code for this menu item.

We confirm the data entered by clicking the "OK" button.

We create (by the phantom of phpmyadmin) in the database of the category table, see the code above.

Resource files

Click on the newly created "Categories" item and click on the "Source" button in the top panel of the table. Now you need to describe the table and the input fields.

Source Tab

  • Module type . Since the categories are tree-like, select Tree with Dialog .
  • Panel buttons . Specify add, edit, remove, expand, collapse.
  • Search panel . Put a check mark.

After the Source tab, tabs appear with the fields in the table, we will describe them with which controls to enter data in these fields.

Idcat Tab

  • Parent ID . Specify the idparent field.

Tab idparent . Here we leave everything unchanged. The get_idparent method will return all possible values ​​for the parent node.

Name tab

  • Required . Put a check mark.
  • For header . Put a check mark.
  • Table . Put a check mark.

Click the "OK" button. Go to ftp-manager on the site, copy the newly created folder with all contents/public_html/modules/ category into the/modules of our project on the local computer. Open our project with NetBeans IDE.

The SmartCafe module (catalog) consists of five files. In the newly created files, the code is unformatted, but it is easily removed by means of NetBeans. Open the file, for example, category_class.php, press the Alt + Shift + F key or the Source-> Format menu item.

The transfer of data from forms is done using AJAX technology. Data is sent to processing the file with the ending _json.php for each directory.

Files with the expiry _table.php and _dlg.php is a representation of the tables and dialogs of the module.

The file with the expiry _class.php is the class of the MySQL table, which stores the module data.

And the latest ready_js.php file is a javascript-code that frames tables and dialogs, ensures the implementation of the fields for input, transmission and receipt of data from the server. The modules on which the ready_js.php is based are in the /js/smartcafe/ directory. You can add them - expanding the functionality of your project.

Let's move on to the newly created "Categories" item and make a few entries.

Please note that the table header is ua: category: NotSet . This means that the dictionary does not have the meaning of the Ukrainian language (ua :) for the word "category". Go to the Dictionary menu item and add the entry [name: category, uk: Category, english: Category].

Create an Item Tag

The formation algorithm is similar to the creation of the preceding item, so let's briefly describe the parameters. Create the following table in the database:

	PRIMARY KEY (`idtag`)

Go to the "Menu" and create a new one with the following options:

  • Name: Tag .
  • Parent: Root .
  • href: tags .
  • Source: tag .
  • Picture: a066 .
  • Order: 11 .
  • Group: admin .

In the js-ready tab:

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

Create resource files: mark the item and click on the "Source" button. Specify the following options in the dialog:

Source Tab:

  • Module type: Table with Dialog .
  • Panel buttons: add, edit, remove .
  • Search panel: Check .

The idtag tab remains unchanged, the input field must have a hidden type.

Name tab:

  • Required: Check .
  • For a title: Check .
  • In the table: Check .

Confirmation by pressing the "OK" button.

Go to the tad item and add the entries.

Create a Blog item

Add an entry in the "Menu" with the following options:

  • Name: post .
  • Parent: Root .
  • href: posts .
  • Source: post .
  • Picture: a139 .
  • Order: 12 .
  • Group: admin .

In the js-ready tab:

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

Let's create the following table in the database:

	`title` VARCHAR(250) NOT NULL DEFAULT '',
	`post` TEXT NOT NULL,
	`active` ENUM('Y','N') NOT NULL DEFAULT 'Y',
	PRIMARY KEY (`idpost`)

Make a note of the newly created item and click on the "Source" button:


  • Module type: Table with Dialog .
  • Panel buttons: add, edit. remove .
  • Search panel: Check .
  • Start Table: table1 .
  • Number of bookmarks: 4 . There will be three additional fields, for the names of bookmarks, we fill them with the following data:
  • tab # 1 dictionary label: data .
  • tab # 2 dictionary label: post .
  • tab # 3 dictionary label: tag .
  • tab # 4 dictionary label: photo . In the tab, we'll attach photos to your blog post.

The "idpost" tab in the "Tablet" section:

  • Check: checkbox-control PriKey , specify tad: idtag (table: primary key), DisplayField: name (field to be displayed) , Intab: tab3 (tab in which this table will be displayed) .
  • Check: gallary-control . Intab: tab4 (tab in which this table will be displayed) .

"idcat" tab:

  • In the table: Check . The system will try to find the primary idcat key among the tables of our database, and in our case it will find, because previously it was created a table `category` with the key 'idcat'. If the primary directory key does not match the name of the field, you will need to manually correct the selection in the file class. see below.

"dt" tab:

  • Required: Check .
  • In the table: Check .
  • In the tab: tab1 .

"title" tab:

  • Required: Check .
  • For a title: Check .
  • In the table: Check .
  • In the tab: tab1 .

"post" tab:

  • Input field: ckeditor .
  • In the tab: tab2 .

"Active" tab:

  • Advanced options change values ​​to: Y: yes, N: no .
  • In the table: Check .
  • In the tab: tab1 .

We check the correctness of the description and click on the "OK" button.

As noted earlier, you need to correct the post_class.php file. So download the directory/public_htmp/modelses/ post . Replace the get_idcat ($id) method with the following:

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

and in the post_dlg.php file in the idcat entry field section, instead of

Corrected files are copied to hosting.

In addition, a post_gallery table will be created in the database, in which posts of attached photos will be saved to posts. If desired, you can create another item with the post_gallery source (table) to edit the uploaded photos. Please refresh the page and try adding a new blog entry.

Create a photo item

Please note that the gallary-control option was used when creating the previous module. The system automatically created a post_gallary table to capture gallery files:

CREATE TABLE `post_gallary` (
	PRIMARY KEY (`rowid`)

Based on this table, we will create a new item and also show how to add reports to the menu items.

Add a new menu item with the following options:

  • Name: photo .
  • Parent: Root .
  • href: photos .
  • Source: post_gallary .
  • Picture: a113 .
  • Order: 13 .
  • Group: admin .

In the js-ready tab:

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

Make a note of the newly created item and click on the "Source" button:

Source tab:

  • Module type: Table with Dialog
  • Panel buttons: add, edit, remove, PRINT
  • Panel Search: Check
  • Start Table: table1
  • Number of bookmarks: 0

The tabs "rowid" and "idpost" are left unchanged. In the "name" tab, specify the following:

  • Input field: file
  • Advanced options: ../post/gallary, pic_+ time
  • Required: Check .
  • For a title: Check .
  • In the table: Check .

In the "note" tab:

  • In the table: Check .

Click the "OK" button. Download the resource files for this item, the directory/modules/post_gallary. For the correct operation of the item, you need to replace the get_idpost method in the post_gallary_class.php file with:

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

Also in the post_gallary_dlg.php file


Replace with


Copy the managed files to the hosting and check the robotability of the item.

Please note that the button "Print" appeared next to the buttons for editing records. Clicking on it will get an empty report table. You can add a report entry in the Reports section of the same name, before you prepare a file with the corresponding code. Three template report files are included in the primary assembly. These files are located in the/report folder. We recommend that you create reports based on them. For a report to appear at a specific point for a particular user group, you must specify the "Group of Users" in the account description ("Reports") and in the "Item Name" tab - activate the report for the specified item.

Creating Users

After completing the project development, you need to create the users who will be entering the data. We go to the "User" item. Add a note. When describing the user fields, we will stop at the field group. It is not recommended to include other users in the "admin" group. So create a group, for example: "postmaster". Click the button with three dots [...], which is located after the group name field, in the dialog add a new postmaster group. Close the group manager window. For the new user, assign the above group. Fill in other fields and click "OK."

It remains to indicate the menu items that the postmaster group sees. Go to the "Menu", double-click on the "Categories", in the edit box, in the "Group" box, check the box next to "postmaster". Similarly, we distribute rights for other newly created items of our project. To check, you can log in and log in under the newly created user, make sure all of the items listed are available.

Your Opinion