K8 Web Kit

Basic Catalog Excercises

catalog

The first catalog example needs no tables. Take an easy Javascript datastructre and simple HTML templates for the first 3 exercises:


In this excercise you create the following pages:

  • a simple phone list
  • an editable phone list
  • an easy catalog

Crud functions:

  • Create, New record
  • Read, Load record
  • Update, Save record
  • Delete record

HTML template with all libraries

Preparation

This example has no connection to the database. Its Html, JavaScript and jQuery. Please create a HTML template for the exercises of this lesson.

Please do this:

  • Create your file sample_test.html in the root folder
  • Copy the Html "<!DOCTYPE html>" in it.
  • Save it.

Look for the comment:

<!-- put your html here -->

Later you will insert the HTML of your exercises here.

For our 1st example, only this libraries are necessary:

  • jQuery
  • bootstrap
  • masterdata

Just ignore the rest.

Simple Phone list

We use an easy basic setting for an output:

  • data array
  • masterdata properties
  • html template: container and record
Javascript: js/sample_test_simple.js

Create the sample_test_simple.js in the js folder.

The object settings is prepared with the following properties:

  • data, an array with the records to be displayed
  • masterdata
    • htmlout: catalog, this is the html category with is filled in the html tag
    • placeholder_mode: 2, the placeholders are encapsulated with {{placeholder}}
  • html/catalog
    • container, this html contains header, headline and footline
    • record, the html for each recordset

In JavaSript its easy to put the html code in 1 line. To format or to compress it, the following links are helpful:

Html: sample_test_simple.html

Please do this:

  • Copy the sample_test.html to
    sample_test_simple.html
  • Insert this html in your test file at this position:
    <!-- put your html here -->
  • Save it

Phone list with controls

This is still your phone list with the same data. The html template now consists a flex box containers to display the table. The controls are also part of your html. The JavaScript functionality for the controls is added by the masterdata plugin.

Controls and the JavaScript class:

  • js_rec_new, plus, adds a new line
  • js_rec_edit, edit the line
  • js_rec_cancel, cancel editing
  • js_rec_save, save line, this button is added automatically to the element with the class="js_contain_submit".
  • js_rec_delete, delete the line
html for the container: kitsamples/test_html_lineedit_container.html
html for the records: kitsamples/test_html_lineedit_record.html

First the HTML has to be created. We need 2 HTML snippets:

  • headline: test_html_lineedit_container.html
  • record: test_html_lineedit_record.html

Both snippets contain the controls. The JavaScript for the controls is part of the masterdata library. "test_html_lineedit_record.html" contains 2 "<input>" with the names „name“ and „phone“. By displaying the data records the inputs are transferred into "<div>" and the values are inserted.

Please do this:

  • Create the folder "kitsamples"
  • Create the html file: test_html_lineedit_container.html
  • Paste the content from this site and save it
  • Create the html file: test_html_lineedit_record.html
  • Paste the content from this site and save it
JavasScript: js/sample_test_lineedit.js

The settings2 object cotains:

  • data: the records
  • masterdata:
    • htmlout: the output files are in the section "html.catalog"
    • placeholder: placeholders are in brackets:{{column}}
  • html.catalog: in this propety the html snippets "container" and "record" are loaded with Ajax

With Ajax: $.ajax(...) we load the HTML snippets.

Please do this:

  • Create the JavaScript file „sample_test_lineedit.js“ in the „js“ folder
  • Insert the JavaScript code in it
  • Save it
Html: sample_test_lineedit.html

Please do this:

  • Copy the sample_test.html to
    sample_test_lineedit.html
  • Insert this html in your test file at this position:
    <!-- put your html here -->
  • Save it

Catalog, external methods

Plugin catalog

The plugin returns the following methods:

  • getData()[<index>]
  • insertRecord(dat,selector,method)
  • replaceRecord(dat,selector)
  • deleteRecord(record,selector)

With this external methods you can add, replace and delete records of your catalog. Other methods will be available by connecting the plugin by Ajax with a dataset.

Each record is unique by the following selectors:

  • .js_rec_record[data-rec_index="0"]
    "0" is the index
  • .js_rec_record[data-keyvalue="0815"]
    "0815" is the key of the record

To use "keyvalue", you need a key column.

More button

Have a look to the button "More", .js_mybtn. In the parent ".js_rec_record" the dataset "rec_index" is assigend to the variable index. With the function getData()[<index>] you get acces to the properties of the record; example for text1:

catalog.getData()[<index>]['text1']

html for the container: kitsamples/test_html_catalog_container.html
html for the records: kitsamples/test_html_catalog_record.html

The container snippet contains the 2 classes:

  • class="js_rec_container"
    • class="js_rec_records"

The class "js_rec_records" is filled with the record snippet: "test_html_catalog_record.html"

The record snippet contains the class with dataset:

  • class="js_rec_record"
    dataset (example)_
    • data-keyvalue="0815"
    • data-rec_index="0"

The record snippet contains the picture on the left side and title and description on the right side.

Please do this:

  • (if not already done) Create the folder "kitsamples"
  • Create the html file: test_html_catalog_container.html
  • Paste the content from this site and save it
  • Create the html file: test_html_catalog_record.html
  • Paste the content from this site and save it
JavasScript: js/sample_test_catalog.js

The following 3 subjects are programmed in JavaScript:

  • settings3: object declaration
  • ajax: the html sinppets are loaded
  • click events of the 3 buttons

Please do this:

  • Create the JavaScript file sample_test_catalog.js in the js folder
  • Insert this JavaScript into
  • Save it
HTML: sample_test_catalog.html

The catalog will be appended to the element, id="html3". With the 3 buttons the external methods are executed.

Please do this:

  • Copy the sample_test.html to
    sample_test_simple.html
  • Insert this html in your test file at this position:
    <!-- put your html here -->
  • Save it