Overview
It is assumed that you use a database corresponding to PDO of PHP, such as MySQL. Suppose that the database is running and INTER-Mediator is installed. At this time, create the following two files. In principle any of the files can be located anywhere, but it is common to make the definition file on the same computer as the database server.
- HTML file to load into browser (named "page file")
- PHP file describing settings such as database connection (named "definition file")
Description of definition file
We will make the definition file a PHP file. Therefore, it must be placed on a server that can process PHP. In the file, INTER-Mediator.php have to include and call IM_Entry function as follows. How to specify the argument of this function is described later.
<?php
require_once ('INTER-Mediator/INTER-Mediator.php');
IM_Entry( $tableDefs, $optionDefs, $dbDefs, true );
?>In the sample, the sample_form_FMS_include.php and sample_form_MySQL_include.php files correspond to the definition file. The contents that can be described in the definition file are here.
Description of page file
In the page file, the definition file has to be red by the script tag in the header area. The definition file returns the JavaScript source, and there is a flow to retrieve database data when the page is opened.
<html>
<head>
<script src="sample_form_MySQL_include.php"></script>
</head>
<body>
:
<td><input type="text" data-im="contact@datetime"/></td>If you prepare the above, adding a description to the data-im attribute of the tag in the page file will set the data retrieved from the database for that tag's value and other attributes I will. Attribute value is described as "contact @ datetime". I will call this description "target designation". Also, a tag with a target designation is called a "link node". Details of target specification will be explained later.
In the sample, the sample_form_FMS.html and sample_form_MySQL.html files are equivalent to page files.
Display page
After preparing as above, we will access the page file from the browser. Then, based on the specification of the target of the link node and the specification in the definition file, the page is constructed by taking the data of the database. The contents of the database are displayed, but if there are multiple records, it will repeat list display etc.
Web page generation by INTER-Mediator
INTER-Mediator follows the DOM structure of the Web page and looks for a node (hereinafter referred to as "link node") to link with the database. Then, it follows the node above the link node and looks for a node that is "enclosure" and "repeater". Access the database by collecting all link nodes included in the repeater itself or repeaters. Then repeat the repeater for the number of records and display the contents of the database on the page.
Target specification at link node
- Any element can be a link node.
- We regard the data-im attribute described in the description of "table @ field @ target" as a link node. Currently this method of description is recommended.
- When setting multiple settings, describe the value as a space separated by a space such as "table@field@target table@field@target ...".
About target designation
"table @ field @ target" becomes a target group specification.
- table describes the table name. The value of the name attribute of the array specified in the first argument of the IM_Entry function can be described.
- field specifies the field name. If a field is included in the table access corresponding to the name attribute in the array specified as the first argument of the IM_Entry function, the value of the field is used to change or set the value of the link node I will.
- target specifies which attribute of the node to insert the field value into.
The target specification is as follows.
- If omitted, set it as the value of the node.
- For "innerHTML", set the value of the field to the innerHTML attribute of the node.
- For "nodeText", create a text node and add it as a child node.
- For "style.STYLENAME", add as a value to the style specified by STYLENAME. For example, "style.backgroundColor" specifies a value for the style attribute of the background color.
- If the first character of target is "#", if innerHTML or attribute is specified, it will be added to the existing node's data.
- If the first letter of target is "$", replace the $ part in the data of the existing node with the value of the database field.
Enclosure and Repeater
The following table shows combinations of possible enclosure and repeater nodes.
| form | Enclosure | Repeater | Linked Element |
|---|---|---|---|
| Table | TBODY | TR | any elements |
| Number List | OL | LI | LI itself or inside of LI elements |
| Bullets | UL | LI | LI itself or inside of LI elements |
| Popup, list | SELECT | OPTION | OPTION itself |
| Generic | tag with data-im-control = "enclosure" specification | tag with data-im-control = "repeater" specified | any elements |
I will explain it in the case of a table. For example, suppose that there is a link node described by a DIV tag etc. in a cell with a table, surrounded by a TD tag. From the link node to the upper node, let TR be a repeater. The node one level higher than TR is necessarily in TBODY. That TBODY is the enclosure. The table is known from the information described in the link node, and the table is accessed. The value of the record is reflected in the node according to the definition of the link node. If there are multiple records, duplicates the repeater and processes the link node to the duplicated series of nodes. When creating a page file, elements with TR tags usually make one table, but the number of rows will increase by the number of records. There may be more than one TR tag element that becomes a repeater. As many sets of TRs as the number of records are duplicated, the data is reflected.
At the stage of Ver.5.3-dev, the function was expanded so that it can become an enclosure or repeater by specifying data-im-control attribute for arbitrary tag. That is, no attributes are specified for TBOD / TR, OL / LI, UL / LI, SELECT / OPTION, and if link nodes are included, it functions as an enclosure / repeater. For other tag combinations, specify the data-im-control attribute. In addition, it is necessary to describe a repeater as a child element directly under the enclosure.
Display when there is no record
If there is a record, duplicating repeaters makes some objects appear on the page, but if you do not have it, you will have no repeaters if you do not have it. Therefore, one data - im - control attribute of the repeater is set to "noresult", or the class attribute is "_im_for _ noresult -". Then, this repeater is simply deleted if there is a record, but when there is no record, only one repeater is placed in the enclosure. You can incorporate a description such as "There is no record" in this way.
Cancel the operation of enclosure and repeater
The table containing the link node will be expanded automatically. In order not to do that expansion, the value of the data-im-control attribute is set to "ignore_enc_rep". For example, if you want to expand fields from multiple contexts in one table, write TR as follows so that TR is not recognized as a repeater.
<table>
<tr data-im-control="ignore_enc_rep">
<td>
<span data-im-control="enclosure">
<span data-im-control="repeater">
<input data-im="context1@field1" />
</span>
</span>
</td>
</tr>
<tr data-im-control="ignore_enc_rep">
<td>
<span data-im-control="enclosure">
<span data-im-control="repeater">
<input data-im="context2@field2" />
</span>
</span>
</td>
</tr>
</table>
Special repeater
You can also specify tag elements with data-im-control attribute "header" "separator" "footer". Following the header, repeaters are repeated by the number of records, but the tag element of separartor is appended between repeaters, and the tag element of footer is displayed at the end.
HTML element not updating
In the HTML form element, if the target specification is given, the value of the field is displayed, and normally, when changing its value, the change result is updated to the database and overwritten. However, if you describe the attribute data-im-control = "unbind" on that element, the value of the field is displayed, but it is not updated. I want to reflect the contents of the database in the element, but you can use this method when you want to describe the later processing by JavaScript etc. independently.
Search and sort action and designation
INTER-Mediator has the following three setting parts regarding search. Alternatively, the following retrieval condition is given and the database is read out.
- Setting query in context of definition file
- additionalCondition property (JavaScript) of INTERMediator object
- Correspondence between foreign key and correspondence key determined by relation (setting relation in context of definition file)
Setting in query in the definition file is useful for giving "search condition you want to apply at all times". For example, you always select only those whose value is "3", or if you only have records that are not deleted because there are erased fields.
On the other hand, data like retrieval conditions entered by the user can be specified using the additionalCondition property of the INTERMediator object. If you want to give the text or the calculation results you entered in the text field to the search condition, specify it in this way.
Then, when the enclosure and the repeater included are enclosed and expanded by the enclosure and the repeater, referring to the relation setting of the inner context, a relation corresponding to the outer record, that is, a related record It gives the condition for extracting.
These three conditions are unconditionally combined with AND.
How to specify context query
query in the definition file context specifies an array with field, operator, value as the key. As multiple specifications can be specified, the value for the query key is an array of arrays as a result.
Utilizing a PDO-enabled database access class, we simply build an expression with the form "field operator 'value'". The value is processed by the quote method. Thus, one such example is specified as array ('field' =>'age', 'operator' =>'>', 'value' =>'19'). When using a wildcard of a character string, it is necessary to describe according to the database engine. For example, to prefix with MySQL, specify an array like array ('field' =>'name', 'operator' =>'LIKE', 'value' =>'% Tataro') To do. If operator is omitted, it is regarded as =.
If there is an item with '__operation__' in 'field', put a delimiter there. Then, for each divided partitions, an expression with AND condition is created, and an OR operation is applied to the chunks divided by the delimiter. Also, if 'operator' of 'field' value '__operation__' is 'ex', OR and AND are exchanged. In other words, if you do not do anything, it can be bound by an AND condition, but it is also possible to specify conditions combined with AND and OR. There can be any number of items with 'field' value of '__ operation__'.
'query' => array(
array( 'field'=>'age', 'operator'=>'>', 'value'=>'19' ),
array( 'field'=>'year', 'operator'=>'>', 'value'=>'1980' ))
Generated Condition Clause: age > '19' AND year > '1980'
'query' => array(
array( 'field'=>'age', 'operator'=>'>', 'value'=>'19' ),
array( 'field'=>'year', 'operator'=>'>', 'value'=>'1980' ),
array( 'field'=>'__operation__' ),
array( 'field'=>'age', 'operator'=>'<', 'value'=>'39' ),
array( 'field'=>'year', 'operator'=>'<', 'value'=>'2006' ))
Generated Condition Clause: (age > '19' AND year > '1980') OR (age < '39' AND year < '2006')
'query' => array(
array( 'field'=>'age', 'operator'=>'>', 'value'=>'19' ),
array( 'field'=>'year', 'operator'=>'>', 'value'=>'1980' ),
array( 'field'=>'__operation__', 'operator'=>'ex' ),
array( 'field'=>'age', 'operator'=>'<', 'value'=>'39' ),
array( 'field'=>'year', 'operator'=>'<', 'value'=>'2006' ))
Generated Condition Clause: (age > '19' OR year > '1980') AND (age < '39' OR year <'2006')
'query' => array(
array( 'field'=>'age', 'operator'=>'>', 'value'=>'19' ),
array( 'field'=>'year', 'operator'=>'>', 'value'=>'1980' ),
array( 'field'=>'__operation__', 'operator'=>'ex' ))
Generated Condition Clause: age > '19' OR year > '1980'
Although it may seem that only combinations of AND and OR are possible, since there is the theorem that all logical expressions can be expressed in a logical OR standard form or a logical product standard form, It can be said that logical expression can be described.
In the case of FileMaker Server, as a limitation on the specification of FileMaker side, it is possible only to connect all search conditions by AND or all OR. You can not combine AND and OR. If you add 'array (' field '=>' __ operation__ ',' operator '=>' or ') "to the context's query key value or addtionalCondition, OR operation is performed. If this is not specified, AND operation is performed. When OR operation is specified, the retrieval condition of the foreign key also becomes OR, and the relation can not be obtained accurately, so carefully that point is necessary.
Search condition specified in additionalCondition property of INTERMediator object
In a JavaScript program, for example, execute the following program before executing INTERMediator.construct (true). The additionalCondition property is an array, the first index specifies the context name, that is, the value corresponding to the name key in the definition file. However, since it is a property that defines a setter, use the addCondition method of the INTERMediator class to set the value. The condition on the right hand side, of course, only applies to the relevant context. The value of the object is generally in common with the description about the previous query. You can also describe such conditions that OR condition and AND condition both appear. If the condition is one set, it can be described as an object. When there are two or more, describe it as an array of objects.
INTERMediator.addCondition("contextName", {field:'age', operator:'>', value: 19});
INTERMediator.addCondition("contextName", [
{field:'age', operator:'>', value: 19},
{field:'year', operator:'>', value: 1999}
]);
Context relation key value
As with query, it takes the form of an array of arrays. The key is different from query. Suppose you have an outer enclosure / repeater and its inner enclosure / repeater. Suppose that the outside is defined as master and the inside is defined as context name.
array(
array(
'name' =>'master',
'key' =>'id'
),
array(
'name' =>'detail',
'relation' =>array(
array( 'foreign-field' =>'master_id','join-field' =>'id', 'operator' =>'=' )
)
), ....When processing one record of the outer context, we find the enclosure / repeater inside it. At that time, it refers to the value of the relation key whose context name is detail. For the join - field key, retrieve the value that exists in the outer one record, and make the search condition using the value of the foreign - field key and the value of the operator key. For example, if the value of the id field of the outer record is 34, create the condition "master_id = '34'" and add it as an AND condition. There can be multiple arrays of relation arrays. In that case, AND of conditional expressions generated by all specifications is taken.
The join-field specification is mandatory. Although it may seem unnecessary, designation is mandatory because it is not necessarily linked with the primary key.
About rearranging search results
INTER-Mediator has the following two setting parts for sorting search results. For search queries, you can specify a field on which to determine the order of sorting.
- Setting sort in the definition file context
- additionalSortKey property (JavaScript) of INTERMediator object
The setting in sort of the definition file is always the sort key applied. On the other hand, the additionalSortKey property is a sort key that is programmatically set according to the situation. When searching, they are composited and rearranged. The priority is higher in the additionalSortKey property. Also, in each setting, it becomes a sort field of higher order in the specified order. In either case, specify in the form of an array and specify the key field and direction. The value for the field key specifies one field name. The value for direction follows the database engine. For example, MySQL specifies ASC or DESC, but FileMaker Server specifies ascend or descend. For the additionalSortKey property, like the addtionalCondition property, the first index specifies the context name, followed by the object or array of objects.
Construction of page movement navigation
Navigate page navigation, if there is a node with id "IM_NAVIGATOR" in the page, create the navigation by replacing the contents of that node. If there is no id node of "IM_NAVIGATOR", the navigation will not be displayed. In general, it is a good idea to make the elements of the div tag "
The INTER-Mediator.construct method finds the node and automatically makes page navigation, but we set the following classes for those elements. In other words, if you define these styles with style sheets on the page, you can freely set the appearance.
| Element name. Class name | Setting destination |
|---|---|
| .IM_NAV_panel | Navigation itself. That is, it is set to a node whose id is "IM_NAVIGATOR" |
| span.IM_NAV_info | Set to display character information |
| span.IM_NAV_button | Set for clickable buttons |
| span.IM_NAV_disabled | Set for non-clickable buttons |
Words and phrases in the navigation area can be set arbitrarily by setting an array in INTERMediator.navigationLabel. The index of the array and the corresponding part are shown in the table below. If you do not set anything in INTERMediator.navigationLabel, the default value of the table will be visible on the screen.
| index | Setting target | Default value | Hide |
|---|---|---|---|
| 0 | Back to the first record | & lt; & lt; | Index 0 - 3 |
| 1 | Back to the previous page | & lt; | irrelevant |
| 2 | Go to the next page | & gt; | irrelevant |
| 3 | Proceed to the last record | & gt; & gt; | irrelevant |
| 4 | Just before the record number | Record number | Indexes 4 to 7 |
| 5 | String between record number range | - | irrelevant |
| 6 | String between record number range and total number of records | / | irrelevant |
| 7 | String after the total number of records | (empty string) | irrelevant |
| 8 | Name of update button | Update | Index 8 |
| 9 | Presence / absence of button display such as record creation | Buttons for record operation such as creation and deletion | Index 9 |
| 10 | Save as button | Save | Index 10 |
| 11 | Logout button name | Logout | Index 11 |
The array specified in INTERMediator.navigationLabel specifies 12 elements. Each element corresponds to an index. If the element is null, it defaults to the default value. If you specify a character string, it will be replaced with that string. For elements with indices 0, 4, 8, 9, 10, and 11, setting the value to false hides what is shown in the "hidden" column. For example, in the following description, only the update button disappears and others are displayed as default. Customize buttons such as "create record" in index 9 with the button-names key in the context definition.
INTERMediator.navigationLabel = [null, null, null, null, null, null, null, null, false];
Handling HTML UI components
Text field
If the type attribute of the INPUT tag element is text, the third specification of the target specification can be omitted. In that case, the value is set to the value attribute. Also, since the calling program of INTERMediator.changeValue (*) is registered in the onchange attribute, the contents of the text field are written back to the database when editing the text and moving the focus to another field.
Text area
The third specification of target specification can be omitted. It will be set as the text of the TEXTAREA tag element.
Popup menu / list
The element of the SELECT tag itself is a component with values. If you omit the third item of the target designation of the SELECT tag element, it is specified as the selection value of the SELECT element. Also, although OPTION tags can be decided, values can also be set from the database. At this time, the SELECT / OPTION tag automatically becomes the enclosure / repeater. The OPTION tag will require two settings, the value attribute corresponding to the selection value of the SELECT tag element and the text of the OPTION tag element that actually appears as a menu item. Therefore, we create only one tag element in SELECT with two target specifications such as & lt; option data-im = "contact_way @ id @ value contact_way @ name" & lt; / option & gt; Then, describe the context definition of the first name of the target specification in the definition file.
check box
If the data of a specific field read from the database is linked with the INPUT tag element of the check box, check the value attribute of that tag. Then check if data and value attribute match. Check the match with value, not the presence or absence of data. When rewriting, when the check is entered, the value of the value attribute is written back, and if there is no check, the empty string is written back. Normally, in a numeric field, it is best to have data such as check if 1, otherwise no check.
radio button
If you want to expand to a radio button, arrange items with type attribute "radio" with the same target specification INPUT tag. Then, the name attribute is automatically set so that even when multiple records are repeated, it can be processed without problems. Each value attribute of each INPUT tag element has its own value. The same value is selected by comparing the value of the database field with the value of the value attribute.
Hidden field
Although the type attribute of the INPUT tag element "hidden" is often used, it is possible to use a means of keeping the display style of the outermost element at the most by using div or span. For example, you can use the hands of unpacking the value of the master as a tag element that is not visible, and getting them with JavaScript.
Creating an input form type page
Here we will explain how to create a page just like creating a new record with an input form like the questionnaire answer. The necessary items to create such a page are as follows.
- Make a form in HTML but do not need a FORM tag. Create necessary text fields and registration buttons. However, text fields etc. should be put together in one enclosure.
- In the definition file, define the context in which records can be created.
- Set the data-im-control attribute of the enclosure you want to be the input form to "post".
- Make the input element of HTML form a link node. That is, data - im = "context @ field" is described in the tag for the context name and the field name of the corresponding table.
- Create "Register" button with BUTTON tag and "post" as data-im-control attribute. Button name is optional.
For the action after pressing the registration button, there are three items starting with "post-" that can be defined in the context. To avoid pressing the button many times, you can replace the button with a message, move to a different page, or redraw the page.
The validation specified in the context is also set, but unlike at the time of editing, when the registration button is pressed, a determination is made for the input items at once, an error is displayed in the page You can also display dialog boxes.
When using this function, page synthesis can be done normally for enclosures outside the enclosure where "post" is specified as the data-im-control attribute, so the result of database access and the input form It can also be mixed. Also, enclosures inside the input form are processed as usual as well, so you can build pop-ups from the contents of the master.
If you want to add your own program after clicking the Register button, define the function as described below. If message display, page resynthesis, and page movement have been defined, execute the functions defined below before them. processingBeforePostOnlyContext is performed before writing to the database, if the return value is false, it will not do the database processing and do not move the page etc. processingAfterPostOnlyContext is executed after database processing and no return value is specified.
INTERMediatorOnPage.processingBeforePostOnlyContext = function(node){
// any program here.
};
INTERMediatorOnPage.processingAfterPostOnlyContext = function(node){
// any program here.
};
How to check the browser version
Sometimes I want to check the version of the browser so that it can not be displayed except certain ones. We made this function available as necessary.
First, define a variable named $ browserCompatibility in the $ params file in the same directory as INTER-Mediator.php and describe it as an array. The method of describing the array is shown in the table. I will also introduce creation examples. .
| dimension | Specified content | Examples of values to specify |
|---|---|---|
| First dimension | Browser type | msie, firefox, safari, chrome, opera |
| Second dimension | Array (key indicating OS) | mac, win |
| Version description character string | 3+, 4 - | |
| Third dimension | Version description character string (when the second dimension is an array) | 3+, 4 - |
$ browserCompatibility = array (
'chrome' =>'1+',
'msie' =>'7+',
'firefox' =>'2+',
'safari' =>array ('win' =>'4+', 'mac' =>'3+'),
'opera' =>'1+',
);
Specify "Version description character string" with a number, plus or minus. "3+" means 3 or more, "3" means that it can be used with version 3 or less. If you do not add plus or minus, it is only that version version. Browser names and operating systems are not case sensitive.
In the previous example, only Safari branches for each OS. It shows that it can be used if it is Ver.4 or higher on Windows and Ver.3 or higher on Mac.
Display browser compatibility as a message
For INTER-Mediator running on JavaScript basis, this may be the most difficult job. Depending on the browser, JavaScript may not work. In order to handle this situation well, consider the following points.
- Prepare a message in the page file that the INTER-Mediator is not done at all just under the body tag element. For example, the div tag element of id = nonsupportedmessage in index.html of "WebSite" in the sample file. If the operation of INTER-Mediator is successful, delete this node or do not display it. This makes it possible to see some message even when JavaScript does not move at all.
- Set up the page file as follows. Check the compatibility of the browser according to the definition of the variable in the $ params file described earlier in the INTERMediatorCheckBrowser function. If it is not compliant it will return false, so do not build a page. Also, in that case, clear the contents of the body element at once, and display only the message. Delete the node indicated by node if it supports it. The node may be null or unspecified.
Of the two above, one may do it, and you can do both. Also, if you do not need to check it, you can simply call INTERMediator.construct (true);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<title>Page Title</title>
<script type="text/javascript" src="context.php"></script>
<script type="text/javascript">
INTERMediatorOnPage.doAfterConstruct = function () {
var contentNode = document.getElementById('container');
contentNode.style.display = "block";
}
</script>
</head>
<body>
<div id="nonsupportmessage" style="background-color:#333333">
<div style="text-align:center;color:yellow">
If you see this, you must use any unsupported web browser. Or constructing the page.
</div>
<div style="text-align:center;color:yellow">
この表示が見えている場合、描画処理中です。しばらくお待ちください。長時間見えている場合は、非対応ブラウザで参照しています。
</div>
</div>
<div id="container" style="display: none">
// Contents of the page
</div>
</body>
</html>