K8 Web Kit
Download Web Kit bootstrap 5

Documentation

Download and install

  • Download
  • Unzip
  • Install: copy it in your php server folder
  • Create your mysql database
  • Execute the sql scripts
  • set the mysql connection: "masterdata/_mysql.php"
  • set the domain variables: "masterdata/_init.php"

Set the mysql connection

Open the file "masterdata/_mysql.php" and set the connection parameter to your mysql-server: server, username, password and database.

Execute the SQL script

Please execute the following scripts from the folder "mysql":

  • k8basic.sql
  • k8examples.sql

the username admin, password admin is also added. Dont forget to register new user for testing.

masterdata/_init.php

here are the global variables declared:

  • domain_name
  • ...
  • domain_languages
  • domain_nativelanguage
  • ...
  • domain_datadeffiles

You have to write your project-datadefinition file in this array, for example:

  • myproject/_datadefinition_myproject.php

Getting started

index.php

Please open your web project in your browser. You get the "K8 Web Kit" page with menu and login form. The menu contains the following items:

  • K8 Web Kit / Home
  • Example
  • Register / My data
  • Admin
Home

This is the main page of your website. Here you get the heighest attention. In our example the login / logout dialog is displayed. To change this part look in the file for "Home".

Example

The datadefID=1, "Persons List", is displayed. This is an easy master data example without a table in the database and without right check.

Change the datadefID in the url: "index.php?page=masterdata&datadefID=2". Now the "Item master data" is displayed. This datadefinition depends on the table "k8components" and the right check is enabled. You have to login 1st; than your data is displayed.

Register / My Data

To use the data access rights you have first to register and to login. After registration and login you can upload a profile picture and add other user as friends.

Admin

this menu is only displayed, when an admin is logged in. In the admin/user list all registered user are displayed.

project structure

index.php

  • css
    • example.css
      put your style sheets here
  • js
    • example.js
      write your Javascript here
  • img
    put your images here
  • uploads
    all uploads are saved here
  • myproject
    • _datadefinition_myproject
      declare your datadefinition here
    • _select_myproject
      define your selects here
    • add your project files here
  • _init_page.php
    pages array
  • _head.php
    link for Javascript and style sheets
  • _header.php
    the menu
  • _footer.php
    the footer

check it out: index.php

Menu

The header of the page, banner and menu, contains "_header.php". In the "ul", class "navbar-nav" the menu items are listed. Here you can modify your menu. Please search for "datadefID=1" and replace it with "datadefID=2". So you have changed the "Example" from "Persons list" to "Item master data".

The item catalog example

Introduction

This classic web catalog brings the person who have an offer together with the persons who accept the offer.

The catalog items can inserted by registered user. Images can be uploaded. The post can be prepared, published and closed. After a search in the catalog, the details will be displayed on a detail page. By choosing an item your individual programminig starts.

Basic table for the items is: k8components:

Generate a new datadefinition for k8components

The datadefinition contains details for reading, saving and displaying a recordset. For more informations look: datadefinition.

The following steps are necessary to create your own datadefinition:

  • create your table: k8components
  • generate your datadefinition
    • here, have a look to:
      new datadefintion
    • in your developement:
      get_datadefinition.php?table=k8components&datadefID=111
  • save the datadefinition in your folder myproject with the name "k8components_111" as json file.
  • add your datadefintion in myproject/_datadefinitions.php with a datadefID.
  • look in your browser:
    index.php?datadefID=111&page=masterdata

the container snippet myproject/k8components_111.json:

myproject/_datadefinitions.php

your 1st master data form: item master data

Optimize your datadefinition

This are the main parts of your datadefintion which we want to extend:

  • displaycolumn
  • displaydescription
  • headertitle
  • headerdescription
  • masterdata
    • filters_catalog
    • sql_derived
    • rights
  • tabulator
    • change visibilty
    • add column: username
  • jsonform
    • change layout to display 2 blocks
    • remove unnecessary fields

Display your definition as masterdata form in the browser:

  • index.php?page=masterdata&datadefID=111
    (you only can insert data, when you are registered and logged in!)

the container snippet myproject/k8components_111.json:

later we use this item list for administration overview

result after optimizing: optimzed item form

Webpages

This will be the pages of your Website:

  • public
    • Home
    • Catalog
    • Detail
    • Register
  • member
    • My Items
      • in preparation
      • open items
      • closed items
  • admin
    • Users
    • items

New pages:

  • catalog
  • detail
  • member
  • admin
    • item list
Preparing the pages

For the member and item list a login is necessary. This has to be defined in the pages array in "_init_page.php".

The login flag is set to true (1). Purpose: if you are not logged in the login dialog appears first. Set the js_display property to masterdata1; so javascript appends it to the masterdata1 element.

Menu

We will enter additional pages in the menu. This is build up in the php file: _header.php

Open the file and put in your example. The member menu is only shown, if you a member is logged in. The admin menu is only shown when an admin is logged in.

You have to set the admin flag by help of your mysql administration tools. The user 'admin', password 'admin' is already inserted by the sql script.

The file for the menu: _header.php:
<!-- insert the menu lines here -->

Please login as admin 1st!

menu with item list

The Catalog

For the catalog we need the following html files:

  • layout
  • container
  • record
  • blank
  • nodata

The layout defines the area for header, search and resultarea.

the container snippet myproject/k8components_catalog_layout.html:

the container snippet myproject/k8components_catalog_blank.html:

the container snippet myproject/k8components_catalog_container.html:

the container snippet myproject/k8components_catalog_record.html:

the container snippet myproject/k8components_catalog_nodata.html:

to register the html files, you have to add them in: myprojects/_datadefinition_myproject.php. Your file look like this:

catalog

detail page

The desired record is already read by php. The title and description of the website is taken out of the defined columns in the datadefinition. The record is transfered to Javascript and displayed by the HTML element. The HTML Element needs 2 templates:

  • container
  • record

The templates are similar to the catalog. The image takes half of the website wide. More images are in the thumbnail galery. The long description of the item is displayed beneath the image.

the container snippet myproject/k8components_detail_container.html:

myproject/k8components_detail_record.html:

add your html files to the datadefinition, myprojects/_datadefinition_myproject.php:

detail

member page

Here on the member page we want to dispay the catalog entries of the member in 3 categories:

  • in preparation
  • published
  • closed

The url for the page is: index.php?page=member.

So we prepage the HTML layout with 3 HTML tags for each category (k8components_member_layout). With Javascript the catalog elements are placed in the HTML tags. There for we add the Javascript snippet in js/example.js.

myproject/k8components_member_layout:

This JavaScript snippet has to be inserted in js/example.js:

at /* insert your code here */

add your html files to the datadefinition, myprojects/_datadefinition_myproject.php:

member

Catalog Example

This classic web catalog brings the person who request help together with the persons who offer their help.

Websites

  • public
    • Home
    • Catalog
      • Filter
        • status
        • title
        • city
    • Detail
    • Register
  • member
    • My Help requests, sordted by startdate
      • in preparation
      • open requests
      • closed requests
    • My Help offers
      • open offers
      • closed offers
    • My data

Tables, master data

Table hrhelprequest

The table hrhelprequest stores all requests for help

Table hrhelpoffer

The table hrhelpoffer stores all offers for help

Try out some more datadefinitions

list

index.php?datadefID=101&page=list

Create at minimum 1 new recordset (Button; New). Fillout some data and save it (Button: Save). This record is saved with the requestID=1. We need this record for the next example.

form

index.php?datadefID=101&page=form&keyvalue=1

detail.php?datadefID=101&page=form&keyvalue=1&page_mode=1

catalog

element.php?datadefID=101&page=catalog

detail

detail.php?datadefID=101&page=detail&keyvalue=1

lineedit

objectdata_form.php?datadefID=22&page=lineedit&keyvalue=1

Appendix

Helpful Links

The folders and files

css

All your stylesheets are placed here. The "example.css" contains the style definitions for the examples.

img

Images for your website are placed here.

js

This is the standard folder for Javascript files.

uploads

All uploaded files are saved in this folder.

myproject

Put your project files in this folder.

_datadefinition_myproject

Enter all datadefinition of your project here.

_select_myproject

All select statements with a datasource out of tables are inserted here.