{"id":144,"date":"2009-12-08T02:59:26","date_gmt":"2009-12-08T10:59:26","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=144"},"modified":"2023-05-09T12:29:17","modified_gmt":"2023-05-09T09:29:17","slug":"dhx-quick-tables-pilot","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhx-quick-tables-pilot\/","title":{"rendered":"DHX Quick Tables. Pilot"},"content":{"rendered":"<p><strong><strong>Update: DHX Quick Tables were deprecated. Now you can use DHTMLX <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSpreadsheet\/\" rel=\"noopener\" target=\"_blank\">JavaScript spreadsheet<\/a> instead.<\/strong><\/strong><\/p>\n<p><em>The latest version of Quick Tables was released on November 5, 2010. To learn more, <a href=\"https:\/\/dhtmlx.com\/blog\/quick-tables-updated\/\">read this post<\/a> or just download the latest package: <a href=\"https:\/\/dhtmlx.com\/x\/download\/regular\/labs\/quick_tables_installation_101110.zip\">Single PHP file installation<\/a> or <a href=\"https:\/\/dhtmlx.com\/x\/download\/regular\/labs\/quick_tables_sources_101110.zip\">PHP\/JavaScript sources<\/a>.<\/em><\/p>\n<p>It\u2019s a first step in our attempt to get the DHTMLX library closer to people who do not want or do not know how to write the code, but need to have something for showing\/updating the data they store in the database. Even programmers sometimes need this to minimize the time spent on routine tasks.<\/p>\n<p><strong>Wanna Get a Data Table Quickly? <\/strong><\/p>\n<p>It is based on dhtmlxGrid Standard Edition, dhtmlxLayout, and dhtmlxConnector. The tool is distributed under GNU GPL for free. We call it\u2026 Well, we&#8217;re still choosing the name for the &#8220;baby&#8221;. I\u2019ll call it DHX Quick Tables. After all, it creates tables really quickly&#8230;<\/p>\n<p>So what can it be used for, and how does it work? Let&#8217;s say, for example, that you need a back end for your site, which is built on a database. Or maybe you want to show your price list on the site, or any other information stored in the database. You can spend some time building forms and linking them to the database. This is the usual way, but not always necessary. Our solution offers a simpler and faster alternative.<\/p>\n<p>With Quick Tables, you get the necessary number of web pages with tables linked to the database records. Two access modes are available: for guests (just view the tables) and for the administrator (view, edit, add\/delete pages). Thus, you can put Quick Tables on the back end of your database-driven site and be able to access and update data. Or you can show the resulting table on your website, if tabulated data is what you need. <\/p>\n<p>Visitors will be able to navigate through a huge number of records (as we\u2019ve added smart rendering to the page), then sort and filter the information. In the next build of the tool, we\u2019ll also add printing and other nice features.<\/p>\n<p><!--more--><strong>First Run<\/strong><\/p>\n<p>OK, first you need to download the installation file and unpack install.php. This is the only file you need. Then upload it onto your site into some folder (PHP support is required, of course). The name of my folder is EH65DBN09G1DF100 (yes, it&#8217;s quite complicated), but you can choose any other name for the folder. It doesn\u2019t matter. So put install.php there, and load it through the browser &#8211; like this:<br \/>\nhttp:\/\/www.yoursite.com\/EH65DBN09G1DF100\/install.php<\/p>\n<p>The tool will be installed, and the wizard will be loaded right away.<\/p>\n<p><strong>Wizard Steps:<\/strong><\/p>\n<p>1. You need to connect the tool to your database. If you have the database, you definitely have connection parameters. So just enter them here:<\/p>\n<div id=\"attachment_1130\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1130\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image1.gif\" alt=\"Quick Tables - Grid Installation\" title=\"Quick Tables - Grid Installation\" width=\"600\" height=\"483\" class=\"size-full wp-image-1130\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image1.gif 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image1-300x241.gif 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-1130\" class=\"wp-caption-text\">Quick Tables - Grid Installation<\/p><\/div>\n<p>&nbsp;<br \/>\n2. If connection is successful, you\u2019ll get the following screen:<\/p>\n<div id=\"attachment_1133\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1133\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image2.gif\" alt=\"Quick Tables - Installation\" title=\"Quick Tables - Installation\" width=\"600\" height=\"319\" class=\"size-full wp-image-1133\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image2.gif 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image2-300x159.gif 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-1133\" class=\"wp-caption-text\">Quick Tables - Installation<\/p><\/div>\n<p>&nbsp;<br \/>\nWhen you continue, you\u2019ll need to choose the name for the page and select the database table. Headers and footers are also allowed, but we\u2019ll skip them for now. Also I\u2019ll leave the checkbox not checked to choose the necessary table fields in the next step.<\/p>\n<div id=\"attachment_1134\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1134\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image3.gif\" alt=\"Quick Tables - Installation\" title=\"Quick Tables - Installation\" width=\"600\" height=\"293\" class=\"size-full wp-image-1134\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image3.gif 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image3-300x146.gif 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-1134\" class=\"wp-caption-text\">Quick Tables - Installation<\/p><\/div>\n<p>&nbsp;<br \/>\nNow choose what fields to show in the table. I choose all, since I don&#8217;t have so many to choose from\u2026<\/p>\n<div id=\"attachment_1136\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1136\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image4.gif\" alt=\"Quick Tables - Installation\" title=\"Quick Tables - Installation\" width=\"600\" height=\"217\" class=\"size-full wp-image-1136\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image4.gif 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image4-300x108.gif 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-1136\" class=\"wp-caption-text\">Quick Tables - Installation<\/p><\/div>\n<p>&nbsp;<br \/>\nNow you define the title for each field, its position, sorting, filtering, and type (editable, read only, checkbox, etc.).<\/p>\n<div id=\"attachment_1137\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1137\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image5.gif\" alt=\"Quick Tables - Configuration\" title=\"Quick Tables - Configuration\" width=\"600\" height=\"305\" class=\"size-full wp-image-1137\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image5.gif 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image5-300x152.gif 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-1137\" class=\"wp-caption-text\">Quick Tables - Configuration<\/p><\/div>\n<p>&nbsp;<br \/>\nGenerally, that is all you need to create a page. Click Save and Finish!, and you\u2019ll get this:<\/p>\n<div id=\"attachment_1138\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1138\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image6.gif\" alt=\"Quick Tables - Application Created\" title=\"Quick Tables - Application Created\" width=\"600\" height=\"243\" class=\"size-full wp-image-1138\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image6.gif 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image6-300x121.gif 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-1138\" class=\"wp-caption-text\">Quick Tables - Application Created<\/p><\/div>\n<p>&nbsp;<br \/>\nThe first link is for guests. Visitors can look, but not edit. You can use it for your site&#8217;s public side, for example. To enter\/update data, use the second link. Here is what you get:<\/p>\n<div id=\"attachment_1139\" style=\"width: 559px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1139\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image7.gif\" alt=\"Quick Tables - GridView\" title=\"Quick Tables - GridView\" width=\"549\" height=\"450\" class=\"size-full wp-image-1139\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image7.gif 549w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image7-300x245.gif 300w\" sizes=\"auto, (max-width: 549px) 100vw, 549px\" \/><p id=\"caption-attachment-1139\" class=\"wp-caption-text\">Quick Tables - GridView<\/p><\/div>\n<p>&nbsp;<br \/>\n<strong>Back to The Beginning<\/strong><\/p>\n<p>You can access pages through the tool&#8217;s control panel. Just browse to the directory you started at. In my example it is http:\/\/localhost\/EH65DBN09G1DF100\/). The control panel works in two modes: Guest (just view the data) and Admin (everything else):<\/p>\n<div id=\"attachment_1140\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1140\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image8.gif\" alt=\"Quick Tables - Control Panel\" title=\"Quick Tables - Control Panel\" width=\"600\" height=\"170\" class=\"size-full wp-image-1140\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image8.gif 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image8-300x85.gif 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-1140\" class=\"wp-caption-text\">Quick Tables - Control Panel<\/p><\/div>\n<p>&nbsp;<br \/>\nTo enter Admin mode, you\u2019ll need to put the code into the text field. The code was shown in  the second step. You can see it in conf\/db_config.ini as well. So I entered the code, and now I\u2019m in Admin mode:<\/p>\n<div id=\"attachment_1142\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1142\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image9.gif\" alt=\"Quick Tables - Admin Mode\" title=\"Quick Tables - Admin Mode\" width=\"600\" height=\"200\" class=\"size-full wp-image-1142\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image9.gif 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2009\/12\/image9-300x100.gif 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-1142\" class=\"wp-caption-text\">Quick Tables - Admin Mode<\/p><\/div>\n<p>&nbsp;<br \/>\nAs you can see, here we can add\/delete pages, edit configuration file, or return to the Guest mode. And of course, we can open pages in Admin mode (add\/delete\/update records).<\/p>\n<p>And again, the goal is to offer a way to build simple applications without needing to be a JavaScript guru or even a professional programmer.\u00a0And this is the first step to the goal.<\/p>\n<p><small>Posted by Inga Kravtsova<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Update: DHX Quick Tables were deprecated. Now you can use DHTMLX JavaScript spreadsheet instead. The latest version of Quick Tables was released on November 5, 2010. To learn more, &#8230;<\/p>\n","protected":false},"author":1,"featured_media":3440,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1],"tags":[33,6,14,26],"class_list":["post-144","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","tag-all-posts","tag-dhtmlxgrid","tag-tips","tag-quick-tables"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=144"}],"version-history":[{"count":1,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/144\/revisions"}],"predecessor-version":[{"id":10849,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/144\/revisions\/10849"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3440"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}