<docbook><section><title>HTML5ODBCExplorerSampleProg</title><title> ODBC Explorer: A Sample HTML5 Program </title> ODBC Explorer: A Sample HTML5 Program 
<para>The ODBC Explorer is a simple iSQL-like sample HTML5 program which allows connection to any browser-local ODBC DSN (Data Source Name).</para><para>Once connected, a list of available database catalogs is displayed, and users can easily explore the database schema and/or execute queries against it.</para><bridgehead class="http://www.w3.org/1999/xhtml:h2"> Setup </bridgehead>
<orderedlist spacing="compact"><listitem> Prerequisite: <ulink url="InstallConfigODBCHTML5Bridge">Install and configure the HTML5 WebDB-to-ODBC Bridge</ulink>.
</listitem>
<listitem> You can <itemizedlist mark="bullet" spacing="compact"><listitem> <ulink url="http://demo.openlinksw.com/ODBCexplorer/ODBCexplorer.html">run the ODBC Explorer immediately, by loading it from our hosted copy</ulink>; or </listitem>
<listitem> <ulink url="http://demo.openlinksw.com/ODBCexplorer.zip">download a zip file containing all source files</ulink>, allowing local use or hosting on your own Web server.
</listitem>
</itemizedlist></listitem>
<listitem> Make sure you have an ODBC DSN configured, or configure one now.
 In the example below, we&#39;ll connect to the publicly-accessible demo instance of Virtuoso -- <itemizedlist mark="bullet" spacing="compact"><listitem> <emphasis>host</emphasis> demo.openlinksw.com </listitem>
<listitem> <emphasis>port</emphasis> 1111 </listitem>
<listitem> <emphasis>username</emphasis> demo </listitem>
<listitem> <emphasis>password</emphasis> demo</listitem>
</itemizedlist></listitem>
</orderedlist><bridgehead class="http://www.w3.org/1999/xhtml:h2"> Usage </bridgehead>
<orderedlist spacing="compact"><listitem> Load the ODBC Explorer sample program in your web browser.
</listitem>
<listitem> Choose your desired ODBC DSN from the drop down list box, enter username and password (if needed), and click the <emphasis>connect</emphasis> button.
<figure><graphic fileref="HTML5ODBCExplorerSampleProg/ODBCexp1DSN.png" /></figure> </listitem>
<listitem> Upon successful connection, a list of available DbCatalogs (as in the 3-part identification of database objects -- <computeroutput>DbCatalog.Owner.Table</computeroutput>) will be listed in the left frame.
<figure><graphic fileref="HTML5ODBCExplorerSampleProg/ODBCexp2DbCatalogs.png" /></figure> </listitem>
<listitem> Drill down into a DbCatalog (e.g., <computeroutput>Demo</computeroutput>) to see the Owner(s) (e.g., <computeroutput>demo</computeroutput>), and Object(s) therein.
<figure><graphic fileref="HTML5ODBCExplorerSampleProg/ODBCexp3Demodemo.png" /></figure> </listitem>
<listitem> Double-click an Object (e.g., <computeroutput>Countries</computeroutput>) to get a quick and easy look at its <itemizedlist mark="bullet" spacing="compact"><listitem> Structure <figure><graphic fileref="HTML5ODBCExplorerSampleProg/ODBCexp4CountriesStructure.png" /></figure> </listitem>
<listitem> Indexes <figure><graphic fileref="HTML5ODBCExplorerSampleProg/ODBCexp5CountriesIndexes.png" /></figure> </listitem>
<listitem> Foreign Keys <figure><graphic fileref="HTML5ODBCExplorerSampleProg/ODBCexp6CountriesFKeys.png" /></figure> </listitem>
<listitem> References (i.e., the Foreign Key inverse) <figure><graphic fileref="HTML5ODBCExplorerSampleProg/ODBCexp7CountriesRefs.png" /></figure> </listitem>
</itemizedlist></listitem>
<listitem> When you drill into an object, the &quot;Execute SQL&quot; tab will be pre-populated with a default query -- <programlisting>SELECT * FROM &lt;object&gt;
</programlisting><figure><graphic fileref="HTML5ODBCExplorerSampleProg/ODBCexp8CountriesExecSQL.png" /></figure> </listitem>
<listitem> You can edit this, or just click on the &quot;Run SQL&quot; button to execute.
<figure><graphic fileref="HTML5ODBCExplorerSampleProg/ODBCexp9CountriesSelStar.png" /></figure> </listitem>
<listitem> SPARQL queries can also be executed with clickable anchor links generated for URIs.
<figure><graphic fileref="HTML5ODBCExplorerSampleProg/ODBCexpAspasql.png" /></figure></listitem>
</orderedlist><bridgehead class="http://www.w3.org/1999/xhtml:h2"> Related Links </bridgehead>
<itemizedlist mark="bullet" spacing="compact"><listitem> <ulink url="InstallConfigODBCHTML5Bridge">HTML5 ODBC Bridge Installation and Configuration</ulink> </listitem>
<listitem> <ulink url="http://dev.w3.org/html5/webdatabase/">Web SQL Database API Spec</ulink> </listitem>
<listitem> <ulink url="http://virtuoso.openlinksw.com/">OpenLink Virtuoso Website</ulink> </listitem>
<listitem> <ulink url="http://iodbc.org/">Platform-Independent iODBC Project Home Page</ulink> </listitem>
<listitem> <ulink url="http://virtuoso.openlinksw.com/dataspace/dav/wiki/Main/VirtFOAFSLLODBCLogin">Using WebID for Virtuoso ODBC login</ulink> </listitem>
</itemizedlist></section></docbook>