Basic Catalog Excercises

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:

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:

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:

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:

Save it