Register & Login

1. Register
2. Activate your account via e-mail
3. Login

Create your data model

1. Click on the Create button
2. Enter your project name and production domain.
3. Click Save
4. Click Add Table. No need to create the User table, it comes out of the box and can be later modified.
5. Fill in the urimap and the name of the table. Urimap is just the link inside the cms. It is used to manage the table's data. When clicked it will show the table's data
6. Click on the Plus button. This one is used to add columns to the table
7. Fill in the column details. Column details are explained here
8. Click Save
9. Once finished click on the tick located on top of the table. That will validate the table. If no errors, it should be green.

Column details

UI controls

Relationship Types

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.

Build and Download

1. Click on the Build button. If everything went well you should see the Download button.
2. Click on the Download button. The whole prebuilt project will be downloaded in the zip format.

Software Dependencies

You will need the following software installed on your computer before starting with the development.

Zip Content

Configuration steps

1. nano /etc/hosts and add the following line to the hosts file 127.0.0.1 dev.mysite.com
2. Create a virtual host in nginx. Google the instructions how to create one for your OS. The nginxVirtualHostConfig.txt which comes in the zip can be reused quickly by replacing the values marked inside the #TODO
3. Restart the Nginx.
4. Open the mysite.com/index.php and modify your site's title
5. In Terminal navigate to mysite.com and execute
   chmod 766 files

   This will allow the uploaded files to be saved under the files directory, otherwise you might be receiving errors during file uploads.
6. Navigate to mysite, open package.json and modify the value for the author key
7. In Terminal navigate to mysite and run npm install
8. Run gulp. Here you might get some errors about missing gulp dependencies located in gulpfile.js. If e.g. gulp-uglify would be throwing errors then install it by using one of the commands npm install -g gulp-uglify or npm install --save-dev gulp-uglify or google the errors. Similar goes for gulp-concat, gulp-clean-css, del, gulp-less, gulp-append-prepend
9. Run composer install
10. Visit the Mailjet website, register and get the key and the secret for your domain. Mailgun, which comes with the prebuilt system, can also be used. If you wish to use another mailing service, then replace the occurences of the Mailjet code.
11. Also on the Mailjet website, make sure to add your domain under Sender domains & addresses. Make sure its status is Active.
12. Enter the key and secret in the mysite/mail/mailjet/MailJetConfig.php
13. Open the mysite/common/Executor.php and modify the database's DEV environment settings YOURDEVDBNAME, YOURDEVUSER, YOURDEVPASSWORD
14. If you open https://dev.mysite.com/contact you will notice there is the Google Captcha. You can either set it up or delete it. In index.php the following lines concern the Captcha <script src="https://www.google.com/recaptcha/api.js" async defer></script> and <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>. The ContactController.php needs this value replaced YOURCAPTCHASECRET. You receive these values from reCAPTCHA Checkbox
15. Open in the browser https://dev.mysite.com/
16. Try to register
17. The activation e-mail was sent to the email provided in the registration form. Click on the activation link.
18. Login with your credentials
19. Now you can test the CMS, modify the colors, fonts, layout as you wish, add new pages. You have full control.

Create a page manually

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:

gulp
gulp watch

Routes

Controller resolution

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.

Request response cycle

Below is the typical flow between the browser and the server.

1. Browser sends the request to the server
2. Server responds with the full html from index.php. From now on only JSON is sent between the browser and the server. Browser executes the following code which loads the registration page inside the initModules. If you wish to load another page, simply replace the "register" route as the input to the routerModule.
   onLoad.js

   $(document).ready(function () {
   addEventHandlers();
   initModules();
    ... });

3. After the user clicks on the submit button, the browser sends a JSON request with act and subAct params to the server. The server resolves the controller from the act param to the RegisterController and invokes its execute method. Inside the execute the subAct will resolve in the invocation of the "register" method.
4. Inside the register method the server will insert the user to the DB.
5. The DB will provide the response to the server.
6. The server returns the JSON response.

Debugging

1. Uncomment these lines
   backend.php

   error_reporting(E_ALL);
   ini_set('display_errors', 1);

2. echo $variableName

3. var_dump($variableName)

4. Configure XDebug with your IDE

5. Use the Inspect tool inside the browser to troubleshoot JSON requests and their responses, javascript calls, css layout and html structure. Right click in your browser, Inspect

Before going to production

//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

Inserting files in database

$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);

Caching

<?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.

Functional testing

Here is a small example on how to test the login page

routerModule.goToRoute("login");
$("#username").val("SomeValidUser")
$("#password").val("SomeValidPassword")
$("#btn-login").click()
...