Property | Description |
---|---|
Column name | Name of your column |
Auto increment | Set this value only on the id which should also be primary key |
Primary Key | Set if the column contains the primary key. Composite primary keys are not supported through the UI. However they can be manually adjusted once the code is downloaded. |
Can be null | If the column can contain null value. Useful for optional values. |
Data Type | Select from the list of data types compatible with MariaDB or MySQL |
Alias | The label which appears on the form inside the CMS |
UI Control | The control which will be used inside the CMS to manage the value of the column. Supported UI controls can be seen here. In case you wish to choose the control not on the list, choose one of the existing ones and replace it later on manually. |
Foreign Table | If the column contains a foreign key then you should select the referenced table |
Foreign Key Id | That is the column being referenced in the foreign table. The id of the foreign table |
Foreign Display Value | The user friendly value display to the user in the select control |
Foreign Key on Update | What occurs if the foreign key gets updates in the referenced table. Check the DB docs for more info on these values |
Foreign Key on Delete | What occurs if the foreign key gets deleted in the referenced table. Check the DB docs for more info on these values |
Foreign Key Relationship | Two types supported OneToMany and ManyToMany. Both are created with OneToMany relationship. Select OneToMany when the column contains the foreign key. Relationship types are described here |
Name | Type |
---|---|
Checkbox | |
Date | |
File | |
Hidden | Can be only seen in the source code |
NicEdit rich text editor | More info about NicEdit can be found here |
Password | |
Select | |
Text | |
Textarea | |
Tigra calendar | A free cross-browser Javascript calendar control. There is also the paid vesion with more features. More info can be found here |
Single table having columns without any relationships to other tables. |
One to many relationship. Table A contains a column which references the id column of table B. In this case the best is to choose the Select as the UI Control, Foreign Table = TABLE B, Foreign Key Id = id, Foreign Display Value is one of the columns containing user friendly values to display from table B. Foreign Key Relationship = ONE TO MANY. Select will contain the id and user friendly column from table B in the UI. |
Many to many relationship. Table C should contain the id, foreign key to table A and foreign key to table B. Column id is auto increment and primary key. Column fk_table_A has the Select as the UI Control, Foreign Table = TABLE A, Foreign Key Id = id from table A, Foreign Display Value is one of the columns containing user friendly values to display from table A, Foreign Key Relationship = ONE TO MANY.Column fk_table_B has the Select as the UI Control, Foreign Table = TABLE B, Foreign Key Id = id from table B, Foreign Display Value is one of the columns containing user friendly values to display from table B, Foreign Key Relationship = ONE TO MANY. |
You will need the following software installed on your computer before starting with the development.
Name | Description |
---|---|
Nginx | Nginx will be used as our web application server. However you can use others like Apache or another PHP compatible web app server. More info on the installation of Nginx can be found here |
PHP-FPM | This one is needed to run the PHP scripts. Any version above 7.x.x should be ok. Probably also versions below 7. Installation instructions can be found here |
Node | Any version above 14.x.x should be ok. Installation instructions are here |
Npm | Installation instructions are here. NPM 8.x.x. or above. |
Gulp | Download link. Version 2.x.x should be ok. |
Composer | Can be downloaded from here. Version 2.x.x should be ok. |
MariaDB or MySQL | MariaDB can be downloaded here. If you would like to use MySQL for commercial purposes, verify its license. Seems it is no longer free for commercial purposes. |
Name | Description |
---|---|
db | Contains the db.sql script compatible with MariaDB or MySQL. Connect to your database server, open and run it with your favorite SQL editor. You can also use MySQLWorkbench, which is free and can be downloaded here |
html | Contains a folder which should be publicly exposed to the visitors of your website. On Linux Nginx serves files by default from /var/www/html. Just drop the mysite.com to /var/www/html/mysite.com. The prebuilt system expects the folder to end with the html, otherwise the destPath in gulpfile.js needs to be modified. |
nginx | Contains a sample virtual host config file |
mysite | This one should not be publicly visible for security reasons and should be placed two folders higher from /var/www/html/mysite.com. In this case to /var/www/mysite |
chmod 766 files
Pages in pBullet are represented with sections. They are stacked on top of each other on the z axis as depicted below. The whole html gets loaded after the first response. Afterwards only JSON is used for communication between the browser and the server. This is called the single page application (SPA).
Below we will use a section with the id="samplePage" as an example. To create a page you will need the following:
Name | Description |
---|---|
section | Add a new section with the id="samplePage" in the index.php. |
route | Add a new route to routes.js Routes are composed of 5 properties described here |
samplePage.less | This one will contain all your CSS related to this page written in LESS. It should start with section#samplePage. Don't forget to include the z-index Consult an existing sample to see how it should look like. It should be imported to master.less if you will be creating the page outside the CMS otherwise to masterCms.less |
samplePage.js | This one will contain the Javascript related to this page. It should be included in the gulpfile.js. If you will be creating the page outside the CMS add it inside the function js() otherwise to jsCms(). |
SamplePageController.php | Optional. Include it if your page will need some processing on the server side or access to the DB. Simply copy an existing controller from the folder mysite/controller. Make sure the controller extends the AbstractController class and that you modify also the name of the class inside the controller. Controller has the execute method which is invoked based on the act and subAct params received in JSON request. Modify these according to your wishes. Controller must be registered inside the mysite.com/backend.php inside the $listOfActions and properly included with the require_once statement. Controller resolution is described here |
gulp
gulp watch
Name | Description |
---|---|
name | This is just a name of your route. Assign something meaningful e.g. samplePage. Router can display pages based on the route name. |
path | Links can be created with this path e.g. /samplePage. If you have a link with this path, if clicked, it will open the corresponding page (section). It will also appear in the address bar. |
sectionId | This is the id of the page (section) you want to display once the link with this path has been clicked or if programmatically the router moved to a route with this name. |
pageTitle | The title which will be set when this page (section) will be shown. |
initFunction | Optional. The function which will be invoked every time when moving to this page. Specify a meaningful name. If set, this function should be included in samplePage.js. |
The following two parameters can be sent inside the JSON request. They are used to resolve the controller and its method passing the whole JSON to the method. Some of them are already used by the framework.
Name | Description |
---|---|
act | Stands for action. It is used to resolve the controller e.g. act=login will resolve to the LoginController |
subAct | Stands for sub action. It is used for method resolution inside the controller once the execute method is invoked. The following subAct values are used by the framework: add, edit, del, list, showItem, oneToMany |
Below is the typical flow between the browser and the server.
$(document).ready(function () {
addEventHandlers();
initModules();
... });
error_reporting(E_ALL);
ini_set('display_errors', 1);
echo $variableName
var_dump($variableName)
Configure XDebug with your IDE
//error_reporting(E_ALL);
//ini_set('display_errors', 1);
$this->connection = new PDO('mysql:host=YOURDBIP;dbname=YOURDBNAME', 'YOURUSER', 'YOURPASSWORD');
private static $DEV_DOMAIN = "dev.YOURDOMAIN";
private static $PROD_DOMAIN = "YOURDOMAIN";
//.pipe(uglify())
Add the Google Analytics or other tracking script to index.php
$filePropertyNames = ["..."];
$this->handleFiles($this->jsonObject, $filePropertyNames);
However if you really wish to insert the files in the database then comment or delete the two lines below and the $dataTypes must include PDO::PARAM_LOB for each uploaded file.
//$filePropertyNames = ["..."];
//$this->handleFiles($this->jsonObject, $filePropertyNames);
$dataTypes = array(':uploadFile' => PDO::PARAM_LOB);
<?php
include "enableCache.php";
?>
<!doctype html>
<html lang="en">
...
etag on;
expires 30d;
add_header Cache-Control private;
The above code will tell the browser to cache the index page for 30 days before asking for a fresh version. If you wish to force the browser to invalidate its cache just use the terminal command touch index.php or overwrite it with via SFTP. That will modify its timestamp. Next time the browser checks if there is any change on the server it will receive yes and load the most recent page. This technique is usually done after the deployment of a new website version to production.
Here is a small example on how to test the login page
routerModule.goToRoute("login");
$("#username").val("SomeValidUser")
$("#password").val("SomeValidPassword")
$("#btn-login").click()
...