under construction

Introduction

Components

Frontend

  • driven by JavaScript and jQuery
  • based on powerful libraries
    • Bootstrap
    • Tabulator
    • Jsonform
    • Dropzone
  • easy to use templates

Backend

  • MySQL
    • your table structrue
  • PHP
    • Data Access class
    • Data Access Rules
    • Ajax interface
  • JSON
    • Datadefinitions
  • HTML
    • Snippets

Website Template <file>.php

Structure of PHP-Files

  • <?php PHP Init
    • _init_page.php, Initialization
      • session_start()
      • include "masterdata/BasicFunctions.php"
      • $headtitle=$domain_name
      • $headdescription
      • $_GET Parameters
    • (_loginlogout_execute.php)
    • (masterdata/datadefinitions.php)
    • (masterdata/class_data_accessclass.php)
    • page=detail, load definition, load recordset
  • <html>
    • html lang=$domain_language
    • <head>
      • $headtitle
      • $headdescrtiption
      • _head_example.php
        • script declaration
        • CSS files
        • your libraries
    • <body>
      • Page header with menu
        • _header_example.php
          • page banner
          • menu
      • Content
        • masterdata
        • listing
        • html element
      • Page footer
        • _footer_kit.php
          • legal notice
          • contact
          • bootstrap script

index.php (Website)

URL-Parameters:

  • page
    • Home
    • Register
    • Login
    • Contact
    • LegalNotice
    • Masterdata
    • List
    • Form
    • Html
    • Detail
    • Catalog
    • Lineedit
  • datadefID
  • page_mode (1=no header and footer

element.php (Website template)

This website template contains header and footer.

Parameters:

  • page:
    • masterdata or empty
    • list
    • html
    • catalog
    • lineedit
  • datadefID

You can also use it as template for your individual website.

detail.php (Website template)

This is a template with header and footer to display a detail page.

Parameters:

  • page:
    • form
    • detail
  • datadefID

You can also use it as template for your individual website.

the data is already read with php. The title and description in the head meta is filled out. To transfer the data to javascript use this command:

var data=<?php echo json_encode($dataws,JSON_NUMERIC_CHECK);?>;

objectdata_form.php (Test-File)

This file is for testing your datadefintion. In this simple file the login file is implemented. The following elements are supported:

  • page
    • Masterdata
    • List
    • Form
    • Html
    • Detail
    • Catalog
    • Lineedit
  • datadefID

masterdata_form.php (Test-File)

This easy template displays a masterdata form. Its implemented for compatibilty reasons.

JavaScript / jQuery

Plugin masterdata

well known invoice

The masterdata plugin displays 3 elements:

  • master data form
  • listing (only the list)
  • form (only the form)

Plugin searchbox

well known invoice

The searchbox opens the listing as overlay. With the filter line the right record is searched. With a click on the record all record data is transfered to the result function and the overlay is closed.

Plugin catalog (HTML)

well known invoice

The catalog plugin displays 1 or more records. It supports the modes:

  • catalog
  • detail
  • line edit

object k8.displayImage

well known invoice

The mode defines:

  • mode=0, single image
  • mode=1, multiple images

User and Registration

Frontend

  • Registration, my Data, add Friends
    • index.php?page=register
      • register
      • my data
      • picture upload
      • add friends
      • user searchbox
  • Login, Logout, send Password
    • dialogs:
      • login
      • logout
      • send password
    • snippets:
      • _loginlogout_execute.php
      • _loginlogout_form.php

Backend

  • Tables
    • k8login
    • k8loginfriends
  • functions, BasicFunctions.php
    • login($name,$pwd,$error,$rememberme=0)
    • logout()
    • Send Password
      gbSendPwd($postfields,&$error,&$message)
  • datadefinitions
    • 5, table: k8login
      • k8login.json
    • 6, table: k8loginfriends
      • k8loginfriends.json
    • 7, table: k8login, search user
      • k8login_searchuser.json

Registration, my Data, add Friends

Registration

Registration and My Data is displayed by index.php?page=register. Here are 3 datadefintions involved:

  • 5, k8login.json
  • 6, k8loginfriends.json
  • 7, k8login_searchuser.json

For the registration only k8login.json is necessary. The default value for roles is set in the datadefinition (k8login.columns.roles). Actual this are the roles: 3:member and 5:friends.

After succesful registration the login page is opened:

My Data

You can change your data and also upload an image. Additional to the registration you also can add friends. In the datadefinition "k8login.json" the setting masterdata.addfriends:true determines if the "Friends" table is shown. With "+" the user searchbox is openend.

Of course you an add you own fields and add more functionality due to your application.

Search User

This Searchbox depends on the datadefinition "7". Only userID and username are read. By click on the line the user is added to the friends list.

Login, Logout, send Password

Login / Logout

you have the following 3 views:

  • login with username and password
  • logout button, actual username is displayed
  • send password with username and email

Where to build it in?

_loginlogout_execute.php

include it after "_init_page.php". The PHP functions for: login, logout and send password are called.


_loginlogout_form.php,

include it in your HTML exactly where you want to display the form. It contains the form and Javascript for the user interface.

Master data

Elements

  • Masterdata classic
  • master data form only
  • object data
  • master detail

Features

  • automatic generated
  • easy to use
  • various configurations

Master data HTML

datadefinition

  • name: displayed in the form headline
  • table: if columns is not defined, the table structure is read and stored in the columns array
  • key: Primary key field of the thable
  • objectclass: name of the data access class
  • requiredfile: php file of the objectclass
  • masterdata: url for the data access
  • columns: array of the table fields. The "column" part of the definition is important for the data access class. Only this fields are saved to the database
  • tabulator: definition for the recordset list in the header
    please change the listing here!
  • jsonform: definition for the fields in the form
    please change the form here!
  • jsonform_conf: configuration of vertical and horizontal form

Introduction

the buttons:

  • Save
    • ...
  • Cancel
    • ...
  • New
    • ...

the controls

  • click on line
  • edit
  • delete

call back functions

  • dataNew(el_md,dat)
  • dataLoad(el_md,dat)
  • dataChange(el_md,el)
  • dataBeforeSave(el_md,dat)
  • dataAfterSave(el_md,dat)

returned properties and methods

  • el_md, the masterdata element
  • tableTab, the tabulator object
  • getRow(), the actual tabulator.row object

Master Data, Listing and Form

HTML and JavaScript

Declare the master data element

The id "masterdata" is the container for the master data form. In JavaScript the variable "settings" is filled with the datadefinition "2". In the next line the plugin "masterdata" for displaying the form is joined to the id="masterdata". The list is creaed by tabulator. The form is generated by jsonform.

Master Data, Form only

HTML and JavaScript

The id="masterdata" is the container for the master data form. The variable "settings2" is filled with the datadefinition. In the next line the plugin "masterdata" is set to the element id="masterdata".

Keyvalue is the main parameter:

  • keyvaule not set or =0: New record
  • keyvaule is set: Edit the record

edittype, returnflag, window_mode

  • returnflag
    • returnflag

Master Data, Complex Objects

HTML and JavaScript

differences in the datadefinition

The datadefinition is extended in this sections:

In the "masterdata/_datadefintion.php the html is loaded into the datadefintion:

Look for more examples at:

Additional scripts for the items table

jsonform is extended with HTML to display the special datastructure of an objects. For the items the HTML-container and HTML-record are created. For the calculation the JavaScript file: object_invoice is added.

the container snippet masterdata/object_invoice_container.html:

the recordset snippet masterdata/object_invoice_record.html:

object_invoice.js

In each line the total of quantity and price has to be calculated. The Sum of quantity and price has to be displayed in the document foot.
The javascritpt file: object_invoice.js:

Master Detail

Initializing datadefinition and appending a listing in Detail area

Using call back functions

First the datadefinitions "settings_invoices" and "settings_customer" are initialized.

Master: settings_customer, here are 2 callback functions used:

  • dataLoad
  • dataNew

Both callback function call the function "setInvoices".

Detail: settings_invoices

the function SetArrayAll(object,property,value) is used to turn off the headerfilter.

setInvoices(clause)

setInvoices appends a container to the bottom of the masterform. This conainer is empty by a new record. The key "accountID" is transfered as SQL-clause. When a record is selected. The invoice list will be filled.

Listings with tabulator

Templates

  • Listing with control elements
  • Search list

based on tabulator

  • powerful Tool
  • various configurations
  • easy to adopt

List with controls

HTML and JavaScript

Introduction

The masterdata plugin is used. The differences are:

  • bnoform=true
  • optional CONTROLS

HTML

All elements: button and inputs are inside an input-group. With the class "k8-flex-row" all items inside become flex items.

JavaScript

searchBox_open(el,datadefID,insertfunction,datadefinition)
  • el, clicked element
  • datadefID, optional if datadefID is set, the datadefinition is loaded
  • insertfunction, optional if not set "seachBox_insert(obj)" is called
  • datadefinition, optional id datadefID is not set, this must be set

This function opens the searchbox

searchBox_insert(obj)
  • obj
    • obj.js_return.form
    • obj.js_return.myIDfield
    • obj.js_return.mydisplayfield
    • obj.data

This function is called by the search box, when a record is selected. Its inserts the data in the form.

searchBox_delete(el)
  • el, clicked element

This function empties the form field values: myIDfield, mydisplayfield and the fields of the data-fieldlist.

input-group data-fieldlist

Example:

<div class="input-group" data-fieldlist="name1,street,code,city">

All form elements in data-fieldlist are filled with values from the search box recordset.

List with Line Edit

HTML and JavaScript

Introduction

In this example are 2 elements used:

  • listing (masterdata.bnoform)
  • html element

After selecting a customer out of the list the "html element" with the contacts is overwritten. Both elements are joined by the "accountID".

Html Output

Templates

  • Catalog
  • Detail Page
  • Line Edit

Controls

  • Standard
    • js_rec_new
    • js_rec_edit
    • js_rec_delete
  • Extend for line edit
    • js_rec_save
    • js_rec_cancel

Structure

  • js_rec_container
    • js_rec_head
    • js_rec_records
      • js_rec_record data-keyvalue="10" data-rec_index="0"
      • js_rec_record data-keyvalue="15" data-rec_index="1"
    • js_rec_foot
  • External Methods
    • replaceRecord(dat,selector)
    • insertRecord(dat,selector,method)
      first,before,after,last

HTML Catalog

HTML and JavaScript

Implement Filter and Catalog

In the backend are the following HTML snippets prepared:

  • filterform
  • blank
  • container
  • record
  • nodata

For introduction I will show you the 2 main snippets: container and record.

Container

The container file: myweb/HRhelprequest_catalog_container.html

Record

The container file: myweb/HRhelprequest_catalog_record.html

HTML Detail

PHP after _init_page.php

HTML and JavaScript

Introduction

By initializing the PHP page the $_GET parameters: page and keyvalue are set. Directly after the classes for datadefinition and data access are included. The record is read and stored in the array: $dataws. The variables for the page meta: $headtitle and $headdescription are set.

For introduction I will show you the 2 main snippets: container and record.

Container

The container file: myweb/HRhelprequest_detail_container.html

Record

The container file: myweb/HRhelprequest_detail_record.html

HTML Line Edit

HTML and JavaScript

The line edit mode allows you to edit the data in the current line.

The main settings are:

  • datadefinition
    • masterdata
      • edittype
      • clause
      • pagination
      • paginationsize
      • htmlout
      • defaultvalues
    • html
      • container
      • record

You need to prepare the form with the controls you need. The <inputs> are automatically changed to <div> containers when the new record is added to the list. Controls with the class="js_controls" are hidden.

HTML Snippets

Like in all HTML elements the following snippets are needed:

  • container
  • record
Container

The container file: masterdata/er_employee_lineedit_container.html

Record

The container file: masterdata/er_employee_lineedit_record.html

Specials

  • smart Controls
  • conditional Output
  • loop arrays
  • load elements (planing)

Edit methods (edittype)

  • 0 link in this window
  • 1 insert with reload
  • 2 overlay
  • 3 innerHTML
  • 4 new tab
  • 5 new window
  • 6 own line

Pagination

the pagination parameters:

  • pagination=internal (default) / external
  • paginationsize=0 (default),you have to set paginationsize>0
  • paginationscale=[10, 25,50]
  • paginationalways=false
  • paginationtemplate (HTML Template)
  • masterdata.paginationtemplatebtn (HTML Template)

Plugin catalog

this example is an overview for

  • calling the plugin "catalog"
  • call back functions
  • "methods"

Conditional Output

Condition

The condition has to be a valid JavaScript expression:

  • JavaScript variables
  • the actual data-Array, example:
    data[i]['creatorID']
  • all JavaScript functions
  • placeholders like #ls#mytext#

Loop array

data-loop_object

The data-loop_object contains the name of the array. The placeholders contain an asterix: "[image_orientation*]" or "{{image_orientation*}}"

Image Support

Common

  • assign images to your main recordset / object:
    • by reading the main recordset, the following columns are added:
      • image_ID
      • image_file
      • image_orientation
      • image_aspectratio
      • image_width
      • image_height
      • image_count
      • image_array
        • array with images, same the columns above

Advantages

  • easy assignement to object
  • smart

Frontend

  • Upload
    • add image upload in your form
      • 1 image only
      • any images with gallery
    • <head> for image upload the dropzone libary is refered:
      <link href="css/dropzone.css" type="text/css" rel="stylesheet"&>
      <script src="js/dropzone.js"></script>
    • upload of the images is made with dropzone.js. Reference of the image:
      • basetype: object or table name
      • baseID: ID or key value of the object
      • type: "image"
    • masterdata.js k8.displayImage({options})
      upload, display, delete, sort
  • Display
    • display images on your page
      • catalog with the first image only
      • image with thumbnail list
  • css, to display the images in a cube css classes are added in masterdata.css

Backend

  • images and refrences to the main objects are stored in the table: k8reference
  • the datadefinition is defined in k8references.json with datadefID=8
  • all images are saved in the folder:
    uploads
  • image file name is the: object name + k8references.ID
  • datadefintion
    • masterdata
      • upload
        • enabled:true
        • for more parameters look in k8.displayImage()

Upload images

3 different states are coded:

  • blank, no base object ist selected, no upload, dropzone is not displayed
  • dropzone, the base object has no image yet, you can upload a new image with dropzone
  • with Image, images are displayed, you can delete the image

Upload image configuration

the k8 library offers the function "displayImage". Display a single image or multiple images can by configured by the mode (0 or 1)

the necessary configuration:

  • (selector)
  • basetype
  • for image upload:
    • baseID
    • parent_rightuser_update
    • mode:
      0=upload 1 image
      1=upload multiple image

the full configuration:

Upload 1 image

To integrate the image upload into the form, the form-wrapper is extended with an image container "pic_ph":

Upload multiple images

css

sortable

Each image get an ID like this:

image_<keyvalue>

the records are bind to the plugin "sortable". After the drop event the ID-array is send to the server by ajax. The column "sort" of each record get the new position.

Display 1 image in catalog

HTML

the snippet (masterdata/k8references_1_image.html):

Image with thumbnail list

HTML

the snippet (masterdata/k8references_image_thumbnails.html):

JavaScript

to display the thumbnails by click in the picture frame:

Datadefinitions

Example of a datadefinition

Attention Json, please regard to enclose your collection keys in quotes. So you can easily check your json datastructure in jsonlint!

Signification of the properties:

  • datadefID: ID in the datadefinitions array
  • name: displayed in the form headline
  • table: if columns is not defined, the table structure is read and stored in the columns array
  • key: Primary key field of the table
  • objectclass: name of the data access class
  • requiredfile: php file of the objectclass
  • masterdata: masterdata details of the datadefinition
  • columns: array of the table fields. The "column" part of the definition is important for the data access class. Only this fields are saved to the database
  • tabulator: definition for the recordset list in the header
    please change the listing here!
  • jsonform: definition for the fields in the form
    please change the form here!
  • jsonform_conf: configuration of vertical and horizontal form

tabulator, used properties:

  • ajaxFiltering":true
  • "height":205
  • "layout"=>"fitColumns", to spread the columns along the whole list width
  • columns
    • name
    • title
    • headerfilter (true ,false)
    • headerSort (default:true, false)
    • width (in px)
    • align (left|center|right)
    • formatter: money, date
    • formatterparams, http://tabulator.info/docs/4.4/format#format-builtin)
    • date (http://tabulator.info/docs/4.1/format)

jsonform, used schema properties:

  • name
  • title
  • type (string, number, integer, boolean, array, object)
  • step ("0.01" allows 2 decimal places)
  • required
  • maxLength
  • enum (for select,['value1','value2'])
  • readOnly
  • default

k8-CSS

k8-flex-table

Example contacts

For table formatting "k8-flex-table" is used, its based on "display:flex".

Contacts

My footline

HTML

CSS

Backend

Datadefinition

  • masterdata
    • placeholder_mode:
      • 0=placeholder
      • 1=[placeholder] default actual
      • 2={{placeholder}} future default
      • 3=[placeholder*] and {{placeholder*}} for data-loop_object

Datadefinition an Javascript übergeben

only HTML-Snippets in page

datadefinition in page

datadefinition with Ajax

BasicFuncitons.php

  • used variables
    • $_SESSION for login
    • domain_language
    • for emails
      • domain_name
      • domain_email

class_data_accessclass.php

datadefinition

  • masterdata
    • include (to extend the standard functions, you can include php snippets)
      • validate: filename
  • columns
    • "fieldname": "clientID",
    • "Type": "int(10)",
    • "mytype": "INT",
    • "size": 10,
    • "mynull": "NO",
    • "mykey": "",
    • "mydefault": null,

validation

gbcheckinputcol($colobject,$postfields,&$error,$exeptions='',$labels='')

php methods and data access

object_data_form.php

The object_data_form.php is the template for loading the object data form.

datadefinitions.php

For the basic datadefintion have a look to Master data.

The datadefinition contains the html frontend and refers the php classes of the object. In the website you have to add stylesheet and javascript and load the object.

Example for object datadefintion[x]:

  • rightcheck
  • json/form html container
    ['jsonform']['form'][1]['value']=gsread_file('object_invoice_container.html')
  • masterdata
    • save_mode=1
    • record=!!!
    • rightuser_create=true/false
    • rights
      • create
        • 0:public=1
        • 1:admin=1
        • 2:superuser=2
        • 3:member=3
      • read
        ...
      • update
      • delete
  • childs, array for child tables
    • child table definition 1
      • child table definition 1.1
      • child table definition 1.2
    • child table definition 2
  • js_rec_record
    • objectname 1: html template 1
    • objectname 2: html template 2

the configuration of the data access class with child classes:

Each of my tables has 1 primary key. The table, the key and the data class are the most important terms. The "child" array can contain any number of children and can be nested. Additional you must set the master key, the column which contains the parentkey. Rightmode=3 turns off the right checking in the child table. fieldname is the column name of the array.

ProcessData.php

All ajax requests are send to "ProcessData.php".

Parameter:

  • process_action
  • datadefID
  • filters
  • clause
  • keyvalue
  • arr
  • prefix

ProcessData.php contains the following methods:

  • GetObject
    • return Json:
      • bok
      • data
      • error
  • ReadFilter
    • return Json:
      • array with records
  • (getRecords)
    • return Json:
      • array with records
  • Init
  • Load
    • return Json:
      • bok
      • error
      • dat, (record)
  • Save
    • return Json:
      • bok
      • error
      • dat, (record)
  • Delete
    • return Json:
      • bok
      • error
  • Sort

data access class

The data access class has the following methods:

  • __construct($datadefinition)
  • init()
  • bexist($ID)
  • bload($ID)
  • getEntries($clause)
  • bvalidate($postfields)
  • save()
  • add()
  • update()
  • delete($ID)

The data access class support child classes. For each child in the datadefintion a new child class object is declared.

data access rights

Access rights can only be granted by using login and php sessions. The access check is activated for an object in the datadefinition by setting "rightcheck=1". In the data table the column "creatorID" is added. Each user can be member in 1 or more roles. By opening the website the user is assigned to the role "0" (public). By login the role public is replaced by the roles in the login table: k8login.roles="3,5". For each object or table, for each CRUD operation (create, read, update, delete) and role an access check is implemented.

This is the data access definition in the datadefinition (masterdata.rights):

  • CRUD Operation
    • Role ID
      • Access check

CRUD Operation, SQL methods
OperationSQL commandReturn values
CreateINSERT true / false
ReadSELECT join
clause
condition for rightuser_update: true/false
condition for rightuser_delete: true/false
UpdateUPDATEtrue / false
DeleteDELETEtrue / false
Roles
IDRoleComment
0publicuser not logged in
1adminall rights in a client
2superuserall rights in the table / object
3memberlogged in user
5friendsassigned in table: k8loginfriends
xotherscreate by yourself
Access check
NumberCheck method
0no rights
1access permission in this client: table.clientID=$_SESSION[clientID]
2permission granted
3user logged in: $_SESSION[userID]<>0
10table.creatorID=$_SESSION[userID]
11check friend k8loginfriends.friendID=$_SESSION[userID]
1000check parent table access rights
...programm your own check

By each CRUD operation the rights are checked. If the operation is not granted an error is returned.

The results of the access check are returned in advance like this (example):

  • with the datadefinitition:
    • masterdata.rightuser_create: true
  • by reading the recordset:
    • clause: userID=creatorID
  • by the record:
    • rightuser_update: true
    • rightuser_delete: true

This are the default rights in the data access class (masterdata.defaultrights=true (default)).

access matrix, cell number=Access check
Operation0:public1:admin2:superuser3:member
Create0121
Read01210
Update01210
Delete01210

Rights from the datadefinition overwrite it. To allow the roles: public and member to read all records in the object, add in the datadefinition: