How to connect to relational database

Everyone who has ever made reports or pivot tables with relational databases has most probably faced the problem with finding a suitable component that not only performs all required functions but also executes them fast. Flexmonster solved this problem and created Flexmonster Data Compressor – a special server-side compression tool that helps you to increase data loading speed from server to customer’s browser.

Advantages of Flexmonster Compressor:

• Easy convert response from database with few lines of code
• Stream large datasets with minimum delay to the user
• Lightweight and simple format which does not require significant amount of RAM and CPU power
• Available for various platforms and databases

Step 1: Embed the component into your web page

Embedding Flexmonster Pivot is a simple copy-paste procedure that takes just minutes!

• Copy contents of client/ folder into the web project root to your server.
• Create <div> container for the component:

  <div id="pivotContainer">The component will appear here</div>
  

• Include flexmonster.js into your HTML page. Please note, that your page should be in the same folder as flexmonster/:

  <div id="pivotContainer">The component will appear here</div>
  <script type="text/javascript" src="flexmonster/flexmonster.js"></script>
  

• Add simple script to embed the component:

  <div id="pivotContainer">The component will appear here</div>
  <script type="text/javascript" src="flexmonster/flexmonster.js"></script>
  
  <script>
     var pivot = new Flexmonster({
        container: "pivotContainer",
        toolbar: true,
        licenseKey: "Z7CJ-XF9J50-5J4J6X-2H136N-2L036W-1A0O01-6S5S6R-0W0T20-3C"
     });
  </script>
  

Run your web page and see the empty table. The next step is to see your own data on the grid.

Step 2: Setup Data Compressor on the server

The package has compressor tools and samples for three server-side technologies:

• .NET - server/.net/ folder contains ASP.NET Web API 2 sample project
• Java - server/java/ folder contains sample for Java compression tool
• PHP - server/php/ folder contains PHP library and samples for static files and MySQL database

Please visit our documentation for step-by-step tutorials:

• Connecting to relational database with .NET
• Connecting to relational database with Java
• Connecting to relational database with PHP

Step 3: Enable cross-origin resource sharing (CORS).

By default, browser prevents JavaScript from making requests across domain boundaries. CORS allows web applications to make cross-domain requests. Here are some useful links explain how to setup CORS on your server:

• IIS - CORS on IIS
• Apache - CORS on Apache
• Tomcat - Configuration Reference (CORS Filter)
• Jetty - Jetty/Feature/Cross Origin Filter
• JBOSS - CORS Filter Installation

Step 4: Configure report with your own data

Now it’s time to configure Flexmonster Pivot Component on the web page. Let’s create a minimal report for this (replace filename and other parameters with your specific values):

var pivot = new Flexmonster({
   container: "pivotContainer",
   toolbar: true,
   report: {
      dataSource: {
         dataSourceType: "ocsv",

         /* URL to the Data Compressor .NET */  
         filename: "http://localhost:55772/api/flexmonster/get",

         /* OR URL to the Data Compressor Java */
         /* filename: "http://localhost:8400/FlexmonsterCompressor/get", */

         /* OR URL to the Data Compressor PHP */
         /* filename: "http://localhost/demo-compress-mysql.php", */
      }
   },
   licenseKey: "Z7CJ-XF9J50-5J4J6X-2H136N-2L036W-1A0O01-6S5S6R-0W0T20-3C"
);

Launch the web page from browser — here you go! A pivot table is embedded into your project.

See live demo

See how Data Compressor is used in client/index.html and connect to your own database.