A1
a19836/sql-to-diagram
SQL to Diagram is a library that enables bidirectional conversion between SQL statements and visual workflow diagrams. It transforms SQL statements into visual diagrams, and converts those diagrams back into fully functional SQL statements. This approach allows non-programmers to design SQL queries visually, while still producing clean SQL.
SQL to Diagram
Original Repos:
- PHP Code Lib: https://github.com/a19836/sql-to-diagram/
- Bloxtor: https://github.com/a19836/bloxtor/
Overview
SQL to Diagram is a library that enables bidirectional conversion between SQL statements and visual workflow diagrams.
It transforms SQL statements into visual diagrams, and converts those diagrams back into fully functional SQL statements.
This approach allows non-programmers to design and maintain SQL queries visually, while still producing clean, structured, and executable SQL statements. At the same time, developers benefit from a controlled, standardized, and predictable architecture, reducing errors and improving maintainability.
With this library, users can:
- Design SQL queries visually using workflows and other no-code fields
- Generate SQL statements automatically from diagrams
- Convert existing SQL statements into editable visual workflows and no-code fields
- Enforce standardized SQL patterns and execution SQL Statements
- Reduce complexity while maintaining full control over application behavior
This library bridges the gap between visual tools and traditional development, making it ideal for data-access modeling, data-fetch automation, and collaborative environments where both technical and non-technical users participate.
To see a working example, open index.php on your server.
Requirements:
- jquerytaskflowchart
- jquerymystatusmessage
- acecodeeditor
Screenshots
Usage
Short Example:
<?php
//create section to edit SQL statements visually.
$rand_number = 552; //choose a number to create multiple sections to edit SQL statements visually.
$sql = "select * from product"; //optional
echo getQueryHtml($rand_number, $sql);
?><script>
var rand_number = 552; //same number than above
var force = true;
//call this function to convert the diagram into SQL statement and no-code settings
autoUpdateSqlFromUI(rand_number, force);
//call this function to convert the SQL statements into a diagram or no-code settings
autoUpdateUIFromSql(rand_number, force);
</script>Complete Example:
Similiar to examples/index.php.
<?php
include_once __DIR__ . "/init.php";
$rand_number = 552; //choose a number to create multiple sections to edit SQL statements visually.
$default_sql = "
SELECT
`product`.`product_id`,
`product`.`name`,
`product`.`price`,
`product`.`product_type_id`
FROM `product`
WHERE `product`.`product_id` = '#id#'";
//call this function to create a section to edit SQL statements visually.
function getQueryHtml($rand_number, $sql = "") {
return '
<div rand_number="' . $rand_number . '" class="query">
<ul class="tabs tabs_transparent query_tabs">
<li class="query_design_tab"><a href="#query_obj_tabs_' . $rand_number . '-1" onClick="initQueryDesign(this, rand_number)">UI</a></li>
<li class="query_sql_tab"><a href="#query_obj_tabs_' . $rand_number . '-2" onClick="initQuerySql(this, rand_number)">SQL</a></li>
</ul>
<div id="query_obj_tabs_' . $rand_number . '-1">
<div class="query_insert_update_delete" style="display:none">
<div class="query_table">
<label>Table:</label>
<input type="text" value="" onBlur="onBlurQueryInputField(this, rand_number)" />
<span class="icon search" onClick="getTableFromDB(this, rand_number)">Search</span>
</div>
<ul class="tabs tabs_transparent query_insert_update_delete_tabs">
<li class="query_insert_update_delete_tabs_attributes"><a href="#query_insert_update_delete_tabs_' . $rand_number . '-1">Attributes</a></li>
<li class="query_insert_update_delete_tabs_conditions"><a href="#query_insert_update_delete_tabs_' . $rand_number . '-2">Conditions</a></li>
</ul>
<div id="query_insert_update_delete_tabs_' . $rand_number . '-1" class="attributes query_insert_update_delete_tab">
<table>
<thead class="fields_title">
<tr>
<th class="column table_header">Column</th>
<th class="value table_header">Value</th>
<th class="icon_cell table_header"><span class="icon add" onClick="addQueryAttribute2(this, rand_number)">Add</span></span></th>
</tr>
</thead>
<tbody class="fields">
</tbody>
</table>
</div>
<div id="query_insert_update_delete_tabs_' . $rand_number . '-2" class="conditions query_insert_update_delete_tab">
<table>
<thead class="fields_title">
<tr>
<th class="column table_header">Column</th>
<th class="operator table_header">Operator</th>
<th class="value table_header">Value</th>
<th class="icon_cell table_header"><span class="icon add" onClick="addQueryCondition2(this, rand_number)">Add</span></span></th>
</tr>
</thead>
<tbody class="fields">
</tbody>
</table>
</div>
</div>
<div class="query_select">
<div class="query_ui">
<div id="taskflowchart_' . $rand_number . '" class="taskflowchart">
<div id="workflow_menu" class="workflow_menu" onClick="openSubmenu(this)">
<ul class="dropdown">
<li class="add_new_table" title="Add new Table"><a class="icon" onClick="return addNewTask(rand_number);">Add new Table</a></li>
<li class="update_tables_attributes" title="Update Tables\' Attributes"><a class="icon" onClick="return updateQueryDBBroker(rand_number, false);">Update Tables\' Attributes</a></li>
<li class="toggle_ui" title="Toggle UI"><a class="icon" onClick="return showOrHideQueryUI(this, rand_number);">Toggle UI</a></li>
<li class="toggle_settings" title="Toggle Settings"><a class="icon" onClick="return showOrHideQuerySettings(this, rand_number);">Toggle Settings</a></li>
</ul>
</div>
<div class="tasks_flow" sync_ui_and_settings="1">
<div id="" class="myfancypopup choose_table_or_attribute with_title">
<div class="title">Choose a DB Table or Attribute</div>
<div class="contents">
<div class="db_broker single_broker hidden">
<label>DB Broker:</label>
<select onChange="updateDBDrivers(this)">
<option></option>
<option selected>dbdata</option>
</select>
</div>
<div class="db_driver" >
<label>DB Driver:</label>
<select onChange="updateDBTables(this, ' . $rand_number . ')">
<option></option>
<option selected>mysql</option>
<option>sqlsvr</option>
<option>postgrges</option>
</select>
</div>
<div class="type hidden" >
<label>Type:</label>
<select onChange="updateDBTables(this, ' . $rand_number . ')">
<option value="db" >From DB Server</option>
<option value="diagram" selected>From DB Diagram</option>
</select>
</div>
<div class="db_table" >
<label>DB Table:</label>
<select onChange="updateDBAttributes(this, ' . $rand_number . ')"></select>
<span class="icon refresh" onClick="refreshDBTables(this)"></span>
</div>
<div class="db_attribute" >
<label>DB Attribute:</label>
<select></select>
<span class="icon refresh" onClick="refreshDBAttributes(this)"></span>
</div>
</div>
<div class="button">
<input type="button" value="update" onClick="taskFlowChartObj_' . $rand_number . '.getMyFancyPopupObj().settings.updateFunction(this)" />
</div>
</div>
</div>
</div>
<script>
;(function() {
addTaskFlowChart(rand_number, true);
setTimeout(function() {//wait until taskFlowChartObj is initialized.
updateQueryUITableFromQuerySettings(rand_number);
}, 1000);
})();
</script>
</div>
<div class="query_settings">
<ul class="tabs tabs_transparent query_settings_tabs">
<li class="query_settings_tabs_attributes"><a href="#query_settings_tabs_' . $rand_number . '-1">Attributes</a></li>
<li class="query_settings_tabs_keys"><a href="#query_settings_tabs_' . $rand_number . '-2">Keys</a></li>
<li class="query_settings_tabs_conditions"><a href="#query_settings_tabs_' . $rand_number . '-3">Conditions</a></li>
<li class="query_settings_tabs_group_by"><a href="#query_settings_tabs_' . $rand_number . '-4">Group By</a></li>
<li class="query_settings_tabs_sorting"><a href="#query_settings_tabs_' . $rand_number . '-5">Sorting</a></li>
<li class="query_settings_tabs_limit"><a href="#query_settings_tabs_' . $rand_number . '-6">Limit/Start</a></li>
</ul>
<div id="" class="myfancypopup choose_table_or_attribute with_title">
<div class="title">Choose a DB Table or Attribute</div>
<div class="contents">
<div class="db_broker single_broker hidden">
<label>DB Broker:</label>
<select onChange="updateDBDrivers(this)">
<option></option>
<option selected>dbdata</option>
</select>
</div>
<div class="db_driver" >
<label>DB Driver:</label>
<select onChange="updateDBTables(this, ' . $rand_number . ')">
<option></option>
<option selected>mysql</option>
<option>sqlsvr</option>
<option>postgrges</option>
</select>
</div>
<div class="type hidden" >
<label>Type:</label>
<select onChange="updateDBTables(this, ' . $rand_number . ')">
<option value="db" >From DB Server</option>
<option value="diagram" selected>From DB Diagram</option>
</select>
</div>
<div class="db_table" >
<label>DB Table:</label>
<select onChange="updateDBAttributes(this, ' . $rand_number . ')"></select>
<span class="icon refresh" onClick="refreshDBTables(this)"></span>
</div>
<div class="db_attribute" >
<label>DB Attribute:</label>
<select></select>
<span class="icon refresh" onClick="refreshDBAttributes(this)"></span>
</div>
</div>
<div class="button">
<input type="button" value="update" onClick="taskFlowChartObj_' . $rand_number . '.getMyFancyPopupObj().settings.updateFunction(this)" />
</div>
</div>
<span class="icon view advanced_query_settings" onClick="showOrHideExtraQuerySettings(this, rand_number)">Toggle Advanced Settings</span>
<div id="query_settings_tabs_' . $rand_number . '-1" class="attributes query_settings_tab">
<table>
<thead class="fields_title">
<tr>
<th class="table table_header">Table</th>
<th class="column table_header">Column</th>
<th class="name table_header">Name</th>
<th class="icon_cell table_header"><span class="icon add" onClick="addQueryAttribute1(this, rand_number)">Add</span></th>
</tr>
</thead>
<tbody class="fields">
</tbody>
</table>
</div>
<div id="query_settings_tabs_' . $rand_number . '-2" class="keys query_settings_tab">
<table>
<thead class="fields_title">
<tr>
<th class="ptable table_header">Primary Table</th>
<th class="pcolumn table_header">Primary Column</th>
<th class="operator table_header">Operator</th>
<th class="ftable table_header">Foreign Table</th>
<th class="fcolumn table_header">Foreign Column</th>
<th class="value table_header">Value</th>
<th class="join table_header">Join</th>
<th class="icon_cell table_header"><span class="icon add" onClick="addQueryKey(this, rand_number)">Add</span></th>
</tr>
</thead>
<tbody class="fields">
</tbody>
</table>
</div>
<div id="query_settings_tabs_' . $rand_number . '-3" class="conditions query_settings_tab">
<table>
<thead class="fields_title">
<tr>
<th class="table table_header">Table</th>
<th class="column table_header">Column</th>
<th class="operator table_header">Operator</th>
<th class="value table_header">Value</th>
<th class="icon_cell table_header"><span class="icon add" onClick="addQueryCondition1(this, rand_number)">Add</span></th>
</tr>
</thead>
<tbody class="fields">
</tbody>
</table>
</div>
<div id="query_settings_tabs_' . $rand_number . '-4" class="groups_by query_settings_tab">
<table>
<thead class="fields_title">
<tr>
<th class="table table_header">Table</th>
<th class="column table_header">Column</th>
<th class="icon_cell table_header"><span class="icon add" onClick="addQueryGroupBy(this, rand_number)">Add</span></th>
</tr>
</thead>
<tbody class="fields">
</tbody>
</table>
</div>
<div id="query_settings_tabs_' . $rand_number . '-5" class="sorts query_settings_tab">
<table>
<thead class="fields_title">
<tr>
<th class="table table_header">Table</th>
<th class="column table_header">Column</th>
<th class="order table_header">Order</th>
<th class="icon_cell table_header"><span class="icon add" onClick="addQuerySort(this, rand_number)">Add</span></th>
</tr>
</thead>
<tbody class="fields">
</tbody>
</table>
</div>
<div id="query_settings_tabs_' . $rand_number . '-6" class="limit_start query_settings_tab">
<div class="sub_limit_start">
<div class="start">
<label>Start:</label>
<input type="text" value="" onBlur="onBlurQueryInputField(this, rand_number)" />
</div>
<div class="limit">
<label>Limit:</label>
<input type="text" value="" onBlur="onBlurQueryInputField(this, rand_number)" />
</div>
</div>
</div>
</div>
</div>
</div>
<div id="query_obj_tabs_' . $rand_number . '-2" class="sql_text_area">
<textarea>' . $sql . '</textarea>
</div>
</div>';
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="icon" href="data:;base64,=" />
<!-- DIAGRAM -->
<link rel="stylesheet" href="css/global.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="css/bloxtor_global.css" type="text/css" charset="utf-8" />
<script language="javascript" type="text/javascript" src="js/global.js"></script>
<!-- DIAGRAM - Add Fontawsome Icons CSS -->
<link rel="stylesheet" href="../jquerytaskflowchart/examples/logic_workflow/lib/fontawesome/css/all.min.css">
<!-- DIAGRAM - Add Icons CSS files -->
<link rel="stylesheet" href="css/icons.css" type="text/css" charset="utf-8" />
<!-- DIAGRAM - Colors -->
<script language="javascript" type="text/javascript" src="../jquerytaskflowchart/examples/logic_workflow/js/color.js"></script>
<!-- DIAGRAM - Add jquery lib -->
<script language="javascript" type="text/javascript" src="../jquerytaskflowchart/lib/jquery/js/jquery-1.8.1.min.js"></script>
<script language="javascript" type="text/javascript" src="../jquerytaskflowchart/lib/jquery/js/jquery.center.js"></script>
<!-- DIAGRAM - Add Jquery UI JS and CSS files -->
<link rel="stylesheet" href="../jquerytaskflowchart/lib/jqueryui/css/jquery-ui-1.11.4.css" type="text/css" />
<script language="javascript" type="text/javascript" src="../jquerytaskflowchart/lib/jqueryui/js/jquery-ui-1.11.4.min.js"></script>
<!-- DIAGRAM - Add Jquery Tap-Hold Event JS file -->
<script language="javascript" type="text/javascript" src="../jquerytaskflowchart/lib/jquerytaphold/taphold.js"></script>
<!-- DIAGRAM - Jquery Touch Punch to work on mobile devices with touch -->
<script type="text/javascript" src="../jquerytaskflowchart/lib/jqueryuitouchpunch/jquery.ui.touch-punch.min.js"></script>
<!-- DIAGRAM - Add Fancy LighBox lib -->
<link rel="stylesheet" href="../jquerytaskflowchart/lib/jquerymyfancylightbox/css/style.css" type="text/css" charset="utf-8" media="screen, projection" />
<script language="javascript" type="text/javascript" src="../jquerytaskflowchart/lib/jquerymyfancylightbox/js/jquery.myfancybox.js"></script>
<!-- DIAGRAM - Add LeaderLine main JS and CSS files -->
<link rel="stylesheet" href="../jquerytaskflowchart/lib/leaderline/leader-line.css" type="text/css" charset="utf-8" />
<script language="javascript" type="text/javascript" src="../jquerytaskflowchart/lib/leaderline/leader-line.js"></script>
<script language="javascript" type="text/javascript" src="../jquerytaskflowchart/lib/leaderline/LeaderLineFlowHandler.js"></script>
<!-- DIAGRAM - Add TaskFlowChart main JS and CSS files -->
<link rel="stylesheet" href="../jquerytaskflowchart/css/style.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="../jquerytaskflowchart/css/print.css" type="text/css" charset="utf-8" media="print" />
<script type="text/javascript" src="../jquerytaskflowchart/js/ExternalLibHandler.js"></script>
<script type="text/javascript" src="../jquerytaskflowchart/js/TaskFlowChart.js"></script>
<!-- DIAGRAM - Add ContextMenu main JS and CSS files -->
<link rel="stylesheet" href="../jquerytaskflowchart/lib/jquerymycontextmenu/css/style.css" type="text/css" charset="utf-8" />
<script language="javascript" type="text/javascript" src="../jquerytaskflowchart/lib/jquerymycontextmenu/js/jquery.mycontextmenu.js"></script>
<!-- DIAGRAM - Parse_Str -->
<script type="text/javascript" src="../jquerytaskflowchart/lib/phpjs/functions/strings/parse_str.js"></script>
<!-- DIAGRAM - Add DropDowns main JS and CSS files -->
<link rel="stylesheet" href="../jquerytaskflowchart/lib/jquerysimpledropdowns/css/style.css" type="text/css" charset="utf-8" />
<!--[if lte IE 7]>
<link rel="stylesheet" href="../jquerytaskflowchart/lib/jquerysimpledropdowns/css/ie.css" type="text/css" charset="utf-8" />
<![endif]-->
<script language="javascript" type="text/javascript" src="../jquerytaskflowchart/lib/jquerysimpledropdowns/js/jquery.dropdownPlain.js"></script>
<!-- DIAGRAM - Add MD5 JS File -->
<script language="javascript" type="text/javascript" src="../jquerytaskflowchart/lib/jquery/js/jquery.md5.js"></script>
<!-- DIAGRAM - Add Menus JS file -->
<script language="javascript" type="text/javascript" src="../jquerytaskflowchart/js/menu.js"></script>
<!-- DIAGRAM - Add TASKS JS and CSS files -->
<link rel="stylesheet" href="task/css/global.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="task/css/task_query.css" type="text/css" charset="utf-8" />
<script language="javascript" type="text/javascript" src="task/js/global.js"></script>
<script language="javascript" type="text/javascript" src="task/js/diagram_global.js"></script>
<script language="javascript" type="text/javascript" src="task/js/task_query.js"></script>
<!-- CODE -->
<!-- CODE - Add ACE-Editor -->
<script type="text/javascript" src="../vendor/acecodeeditor/src-min-noconflict/ace.js"></script>
<script type="text/javascript" src="../vendor/acecodeeditor/src-min-noconflict/ext-language_tools.js"></script>
<!-- CODE - Message -->
<link rel="stylesheet" href="../vendor/jquerymystatusmessage/css/style.css" type="text/css" charset="utf-8" />
<script language="javascript" type="text/javascript" src="../vendor/jquerymystatusmessage/js/statusmessage.js"></script>
<!-- Edit QUERY JS and CSS files -->
<link rel="stylesheet" href="css/edit_query.css" type="text/css" charset="utf-8" />
<script language="javascript" type="text/javascript" src="js/edit_query.js"></script>
<link rel="stylesheet" href="css/edit_single_query.css" type="text/css" charset="utf-8" />
<script language="javascript" type="text/javascript" src="js/edit_single_query.js"></script>
<!-- LOCAL -->
<link rel="stylesheet" type="text/css" href="css/bloxtor_layout.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script>
var new_relationship_attribute1_html = ' <tr class="field"> <td class="table"> <input type="text" value="" onFocus="onFocusTableField(this)" onBlur="onBlurQueryTableField(this, #rand#)" /> <span class="icon search" onClick="getQueryTableFromDB(this, #rand#)">Search</span> </td> <td class="column"> <input type="text" value="" onFocus="onFocusAttributeField(this)" onBlur="onBlurQueryAttributeField(this, #rand#)" /> <span class="icon search" onClick="getQueryTableAttributeFromDB(this, \'input\', #rand#)">Search</span> </td> <td class="name"> <input type="text" value="" onBlur="onBlurQueryInputField(this, #rand#)" /> </td> <td class="icon_cell table_header"><span class="icon delete" onClick="deleteQueryAttribute(this, #rand#);">Remove</span></td> </tr>';
var new_relationship_attribute2_html = ' <tr class="field"> <td class="column"> <input type="text" value="" onBlur="onBlurQueryInputField(this, #rand#)" /> <span class="icon search" onClick="getTableAttributeFromDB(this, \'input\', #rand#)">Search</span> </td> <td class="value"> <input type="text" value="" onBlur="onBlurQueryInputField(this, #rand#)" /> </td> <td class="icon_cell table_header"><span class="icon delete" onClick="deleteQueryField(this, #rand#);">Remove</span></td> </tr>';
var new_relationship_key_html = ' <tr class="field"> <td class="ptable"> <input type="text" value="" onFocus="onFocusQueryKey(this);" onBlur="onBlurQueryKey(this, #rand#);" /> <span class="icon search" onClick="getQueryTableFromDB(this, #rand#)">Search</span> </td> <td class="pcolumn"> <input type="text" value="" onFocus="onFocusQueryKey(this);" onBlur="onBlurQueryKey(this, #rand#);" /> <span class="icon search" onClick="getQueryTableAttributeFromDB(this, \'input\', #rand#)">Search</span> </td> <td class="operator"> <select onFocus="onFocusQueryKey(this);" onChange="onBlurQueryKey(this, #rand#);"> <option></option> <option >=</option> <option >!=</option> <option >></option> <option >>=</option> <option ><=</option> <option >like</option> <option >not like</option> <option >in</option> <option >not in</option> <option >is</option> <option >is not</option> </select> </td> <td class="ftable"> <input type="text" value="" onFocus="onFocusQueryKey(this);" onBlur="onBlurQueryKey(this, #rand#);" /> <span class="icon search" onClick="getQueryTableFromDB(this, #rand#)">Search</span> </td> <td class="fcolumn"> <input type="text" value="" onFocus="onFocusQueryKey(this);" onBlur="onBlurQueryKey(this, #rand#);" /> <span class="icon search" onClick="getQueryTableAttributeFromDB(this, \'input\', #rand#)">Search</span> </td> <td class="value"> <input type="text" value="" onFocus="onFocusQueryKey(this);" onBlur="onBlurQueryKey(this, #rand#);" /> </td> <td class="join"> <select onFocus="onFocusQueryKey(this);" onChange="onBlurQueryKey(this, #rand#);"> <option >inner</option> <option >left</option> <option >right</option> </select> </td> <td class="icon_cell table_header"><span class="icon delete" onClick="deleteQueryKey(this, #rand#);">Remove</span></td> </tr>';
var new_relationship_condition1_html = ' <tr class="field"> <td class="table"> <input type="text" value="" onBlur="onBlurQueryInputField(this, #rand#)" /> <span class="icon search" onClick="getQueryTableFromDB(this, #rand#)">Search</span> </td> <td class="column"> <input type="text" value="" onBlur="onBlurQueryInputField(this, #rand#)" /> <span class="icon search" onClick="getQueryTableAttributeFromDB(this, \'input\', #rand#)">Search</span> </td> <td class="operator"> <select onChange="onBlurQueryInputField(this, #rand#)"> <option></option> <option >=</option> <option >!=</option> <option >></option> <option >>=</option> <option ><=</option> <option >like</option> <option >not like</option> <option >in</option> <option >not in</option> <option >is</option> <option >is not</option> </select> </td> <td class="value"> <input type="text" value="" onBlur="onBlurQueryInputField(this, #rand#)" /> </td> <td class="icon_cell table_header"><span class="icon delete" onClick="deleteQueryField(this, #rand#);">Remove</span></td> </tr>';
var new_relationship_condition2_html = ' <tr class="field"> <td class="column"> <input type="text" value="" onBlur="onBlurQueryInputField(this, #rand#)" /> <span class="icon search" onClick="getTableAttributeFromDB(this, \'input\', #rand#)">Search</span> </td> <td class="operator"> <select onChange="onBlurQueryInputField(this, #rand#)"> <option></option> <option >=</option> <option >!=</option> <option >></option> <option >>=</option> <option ><=</option> <option >like</option> <option >not like</option> <option >in</option> <option >not in</option> <option >is</option> <option >is not</option> </select> </td> <td class="value"> <input type="text" value="" onBlur="onBlurQueryInputField(this, #rand#)" /> </td> <td class="icon_cell table_header"><span class="icon delete" onClick="deleteQueryField(this, #rand#);">Remove</span></td> </tr>';
var new_relationship_group_by_html = ' <tr class="field"> <td class="table"> <input type="text" value="" onBlur="onBlurQueryInputField(this, #rand#)" /> <span class="icon search" onClick="getQueryTableFromDB(this, #rand#)">Search</span> </td> <td class="column"> <input type="text" value="" onBlur="onBlurQueryInputField(this, #rand#)" /> <span class="icon search" onClick="getQueryTableAttributeFromDB(this, \'input\', #rand#)">Search</span> </td> <td class="icon_cell table_header"><span class="icon delete" onClick="deleteQueryField(this, #rand#);">Remove</span></td> </tr>';
var new_relationship_sort_html = ' <tr class="field"> <td class="table"> <input type="text" value="" onBlur="onBlurQueryInputField(this, #rand#)" /> <span class="icon search" onClick="getQueryTableFromDB(this, #rand#)">Search</span> </td> <td class="column"> <input type="text" value="" onBlur="onBlurQueryInputField(this, #rand#)" /> <span class="icon search" onClick="getQueryTableAttributeFromDB(this, \'input\', #rand#)">Search</span> </td> <td class="order"> <select onChange="onBlurQueryInputField(this, #rand#)"> <option >ASC</option> <option >DESC</option> </select> </td> <td class="icon_cell table_header"><span class="icon delete" onClick="deleteQueryField(this, #rand#);">Remove</span></td> </tr>';
var task_table_type_id = "d0d250c0";
var tasks_settings = {
"d0d250c0": {
"task_menu": {
"show_properties_menu": false
},
"connection_menu": {
"show_set_label_menu": false,
"show_overlay_types_menu": false
},
"callback": {
"on_load_connection_properties": DBQueryTaskPropertyObj.onLoadConnectionProperties,
"on_submit_connection_properties": DBQueryTaskPropertyObj.onSubmitConnectionProperties,
"on_complete_connection_properties": DBQueryTaskPropertyObj.onCompleteConnectionProperties,
"on_cancel_connection_properties": DBQueryTaskPropertyObj.onCancelConnectionProperties,
"on_start_task_label": DBQueryTaskPropertyObj.onStartLabel,
"on_check_task_label": DBQueryTaskPropertyObj.onCheckLabel,
"on_complete_task_label": DBQueryTaskPropertyObj.onCompleteLabel,
"on_cancel_task_label": DBQueryTaskPropertyObj.onCompleteLabel,
"on_complete_select_start_task": DBQueryTaskPropertyObj.onCompleteSelectStartTask,
"on_success_task_creation": DBQueryTaskPropertyObj.onTaskCreation,
"on_success_connection_drag": DBQueryTaskPropertyObj.onSuccessConnectionDrag,
"on_success_connection_drop": DBQueryTaskPropertyObj.onSuccessConnectionDrop,
"on_success_connection_deletion": DBQueryTaskPropertyObj.onSuccessConnectionDeletion,
"on_show_task_menu": DBQueryTaskPropertyObj.onShowTaskMenu,
"on_click_connection": showConnectionPropertiesIfExists
},
"center_inner_elements": false
}
};
DBQueryTaskPropertyObj.on_click_checkbox = onClickQueryAtributeCheckBox;
DBQueryTaskPropertyObj.on_delete_table = onDeleteQueryTable;
DBQueryTaskPropertyObj.on_complete_table_label = prepareTableLabelSettings;
DBQueryTaskPropertyObj.on_complete_connection_properties = prepareTablesRelationshipKeys;
DBQueryTaskPropertyObj.on_complete_select_start_task = prepareTableStartTask;
var get_sql_from_query_obj = "server/get_sql_from_query_obj.php?db_broker=#db_broker#&db_driver=#db_driver#";
var get_query_obj_from_sql = "server/get_query_obj_from_sql.php?db_broker=#db_broker#&db_driver=#db_driver#";
var get_broker_db_data_url = "server/get_broker_db_data.php";
var default_dal_broker = "dbdata";
var default_db_driver = "mysql";
var default_db_type = "diagram";
var default_db_table = "product";
if (typeof db_brokers_drivers_tables_attributes == "undefined") {
var db_brokers_drivers_tables_attributes = {};
db_brokers_drivers_tables_attributes["dbdata"] = {};
db_brokers_drivers_tables_attributes["dbdata"]["mysql"] = {
db: {},
diagram: {}
};
db_brokers_drivers_tables_attributes["dbdata"]["sqlsvr"] = {
db: {},
diagram: {}
};
db_brokers_drivers_tables_attributes["dbdata"]["postgres"] = {
db: {},
diagram: {}
};
}
getDBAttributes(default_dal_broker, default_db_driver, default_db_type, default_db_table);
var rand_number = <? echo $rand_number; ?>;
</script>
</head>
<body>
<div id="main_column">
<!-- taskflowchart global -->
<div id="taskflowchart_global">
<div class="tasks_menu scroll">
<ul class="tasks_groups">
<li class="tasks_group tasks_group_others">
<div class="tasks_group_tasks">
<div class="task task_menu task_d0d250c0 task_query" type="d0d250c0" tag="query" title="QUERY"><span>QUERY</span></div>
</div>
<div style="clear:left; float:none;"></div>
</li>
</ul>
</div>
<div class="tasks_properties hidden">
<div class="task_properties task_properties_d0d250c0">
<div class="db_query_task_html">
<div class="task_property_exit" exit_id="layer_exit" exit_color="#31498f" exit_type="Flowchart" exit_overlay="No Arrows With Directional Arrow"></div>
</div>
</div>
</div>
<div class="connections_properties hidden">
<div class="connection_properties connection_properties_d0d250c0">
<div class="db_table_connection_html">
<div class="header">
<label>Tables Join:</label>
<select class="connection_property_field tables_join" name="tables_join">
<option>inner</option>
<option>left</option>
<option>righ</option>
</select>
<input class="connection_property_field source_table" type="text" name="source_table" value="" />
<input class="connection_property_field target_table" type="text" name="target_table" value="" />
</div>
<table>
<thead>
<tr>
<th class="source_column table_header"></th>
<th class="operator table_header">operator</th>
<th class="target_column table_header"></th>
<th class="column_value table_header">value</th>
<th class="table_attr_icons">
<a class="icon add" onClick="DBQueryTaskPropertyObj.addTableJoinKey(this)">ADD</a>
</th>
</tr>
</thead>
<tbody class="table_attrs">
</tbody>
</table>
<div class="delete_connection_button">
<button onClick="removeTableConnectionFromConnectionProperties(this)">Delete Connection Between Tables</button>
</div>
</div>
</div>
</div>
</div>
<div class="edit_single_query covertable_sql">
<div class="menu top_bar">
<ul class="dropdown">
<li class="select_query" title="Table">
<a>Table</a>
<ul>
<li class="add_new_table select_query" title="Add new Table"><a onclick="return addNewTask(rand_number);"><i class="icon add"></i> Add Table</a></li>
<li class="update_tables_attributes select_query" title="Update Tables' Attributes"><a onclick="return updateQueryDBBroker(rand_number, false);"><i class="icon update_tables_attributes"></i> Update Tables' Attributes</a></li>
<li class="select_query" title="Empty Diagram">
<a onClick="emptyTablesDiagam(rand_number);return false;"><i class="icon empty_diagram"></i> Empty Diagram</a>
</li>
</ul>
</li>
<li class="" title="Panels">
<a>Panels</a>
<ul>
<li class="is_convertable_sql" title="Is SQL convertable"><a onClick="onChangeIsConvertableSQL(this)" previous_auto_convert="1"><i class="icon toggle_ids"></i> <span>Disable SQL convertable</span> <input type="checkbox" checked/></a></li>
<li class="toggle_ui select_query" title="Toggle Query Diagram"><a class="toggle_icon active" onclick="return showOrHideSingleQueryUI(this, rand_number);"><i class="icon toggle_ui"></i> <span>Hide Query Diagram</span> <input type="checkbox" checked/></a></li>
<li class="toggle_settings" title="Toggle Query Settings"><a class="toggle_icon active" onclick="return showOrHideSingleQuerySettings(this, rand_number);"><i class="icon toggle_settings"></i> <span>Hide Query Settings</span> <input type="checkbox" checked/></a></li>
</ul>
</li>
<li class="select_query" title="Generate">
<a>Generate</a>
<ul>
<li class="create_sql_from_ui select_query" title="Generate SQL From Diagram"><a onClick="autoUpdateSqlFromUI(rand_number, true)"><i class="icon create_sql_from_ui"></i> Generate SQL From Diagram</a></li>
<li class="create_ui_from_sql select_query" title="Generate Diagram From Settings"><a onClick="autoUpdateUIFromSql(rand_number, true)"><i class="icon create_ui_from_sql"></i> Generate Diagram From Settings</a></li>
</ul>
</li>
</ul>
</div>
<div id="choose_db_table_or_attribute" class="myfancypopup choose_table_or_attribute with_title">
<div class="title">Choose a DB Table or Attribute</div>
<div class="contents">
<div class="db_broker single_broker hidden">
<label>DB Broker:</label>
<select onChange="updateDBDrivers(this)">
<option></option>
<option selected>dbdata</option>
</select>
</div>
<div class="db_driver" >
<label>DB Driver:</label>
<select onChange="updateDBTables(this)">
<option></option>
<option selected>mysql</option>
<option>sqlsvr</option>
<option>postgrges</option>
</select>
</div>
<div class="type hidden" >
<label>Type:</label>
<select onChange="updateDBTables(this)">
<option value="db" >From DB Server</option>
<option value="diagram" selected>From DB Diagram</option>
</select>
</div>
<div class="db_table" >
<label>DB Table:</label>
<select onChange="updateDBAttributes(this)"></select>
<span class="icon refresh" onClick="refreshDBTables(this)"></span>
</div>
<div class="db_attribute" >
<label>DB Attribute:</label>
<select></select>
<span class="icon refresh" onClick="refreshDBAttributes(this)"></span>
</div>
</div>
<div class="button">
<input type="button" value="update" onClick="MyFancyPopup.settings.updateFunction(this)" />
</div>
</div>
<div class="data_access_obj with_top_bar_section">
<div class="relationships">
<div class="rels">
<div class="relationship">
<div class="rel_type">
<label>Relationship Type:</label>
<select onChange="updateRelationshipType(this, rand_number);">
<option >insert</option>
<option >update</option>
<option >delete</option>
<option selected>select</option>
<option >procedure</option>
</select>
</div>
<div style="float:none; clear:both;"></div>
<?php echo getQueryHtml($rand_number, $default_sql); ?>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>On this page
Contributors
Latest Release
1.0.0December 26, 2025Other
Created December 26, 2025
Updated December 26, 2025