Admin Interfaces (For Developers)

Admin Interfaces using DataTables

Developed by Vinayak Pande

This document explains how we can make changes to every feature of the tool and explains the important pieces of code in particular files. The tool is built using PHP, Javascript and MySQL

Making changes to the Login Page

The login functionality is built using the PHP Secure, Advanced Login System

Important Files

db_dump/login_tables_mysql.sql

• This file is a dump file of the DB schema for login functions. It has all the SQL queries we need to run to implement the login functionality on a new database.
• It creates the tables in the database required for the login functionality.

html/admin/config.php

• This file is used to set the configurations for the login page such as basic login or two-step login, to specify the web page for successful login, pages that require login to be accessed and other relevant features.
• This file is included in the each of the web pages of the tool.
• This file needs to be potentially removed and aggegated into the global credentials file (which is not on Github).

html/admin/login.php

• This file contains the PHP code to validate user logins.
• We are using PHP session variables and checking the $_SESSION['login_true'] variable in each PHP file to check if a user is logged in.
• The rest of the file contains the HTML code to build the page.

Visualization Page in the Admin Interface (Menu Item)

The visualizations are built using D3Plus.

html/admin/home.php

• This page contains the HTML elemennts to be displayed on the visualization page.
• This page also contains the d3plus code to build the three visualizations.
• A few of the important functions are :
  • viz() - to initiate the visualization
  • containter() - to specify the id of the html element
  • data() - to specify the data source
  • type() - to specify the viz type i.e. bar, pie chart
  • id() - x axis value
  • size() - y axis value
  • color(), background(), legend() - these are formatting functions
  • draw() - to draw the vizualization on the map

html/admin/viz/gethomestat.php

• This file contains the code for the ticker of the number of entries. The code is similar to the code used on the homepage of the Open Data Impact Map website.
• The total number of entries are obtained from the "viz/total.php" and then displayed using this file.
• This file is included in the home.php file.

html/admin/viz/pie1.php

• This file is used to get the data for the following visualizations:
  • Month by Month Entries into the database
  • Research vs Survey Entries
  • Status of records
• The file contains SQL queries to get the data from the MySQL database and convert it into JSON format.

Management Page in the Admin Interface (Menu Item)

This page is built using DataTables_ Editor.

html/admin/Datatables-editor/examples/php/staff.php

• This file is used to get the data to be displayed in the DataTables editor created in the simple.html page
• It also contains joins between different tables and validations on each field of the database
• If you need to make a field drop down, add or remove validations or add new fields, you need to start from this file to get the data first.
• A few important functions :
  • Field::inst() - used to instantiate a field
  • validator() - used to write validations and error messages (even custom ones)
  • leftJoin() - used to join two tables
  • Mjoin() - used to join tables with one-to-many relationships (org_profiles and ord_data_use in our case)

html/admin/Datatables-editor/examples/inline-editing/simple.html

• This file is used to create the instance of the DataTables editor.
• We use the editor variable to create an instance of the editor table (to include editor functionality) and specify the fields to be displayed.
• It then creates the table variable to create an instance of the DataTable (to include DataTable functionalities).
• We use this declaration to specify the column widths, column visibility, the buttons and their working and to create the filters in the footer for each column
• Most of the functionalities are included as inline scripts in the header tags
• A few important functions :
  • table - specify table name of the DataTable
  • fields - specify the fields to be included in the table
  • colDefs - columns widths
  • editField - field to the edited
  • visible - fields to be shown or not

The following code is used to add a search box under the 'data type used column'

     $('#example tfoot th:nth-child(35)').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search Data type used'+title+'" />' );
    } );

This example code is used to activate an inline edit on a click of a table cell and to submit the entire row which is pressed then the focus is moved to another place.

$('#example').on( 'click', 'tbody td:not(:first-child, :nth-child(2))', function (e) {
	editor.inline( this , {
			submit: 'allIfChanged'  //Added by Vinayak
	});
});

html/admin/Datatables-editor/examples/php/dependant/datause.php

• Clicking the "Edit Data Use' button generates a page with multiple data-use for a particular organization.
• This file is used to get the multiple data-uses for a particular organization and to build the front end and to provide the editing capability.
• The file is created in PHP and has HTML elements echoed in the 'echo' keyword.

Data Migration to the ArcGIS

On the Management page, if you click the "Migrate to Dev" button, it migrates the data in the MySQL DB (production) to the ArcGIS' development database. If you click the "Migrate to Prod" button, it migrates the data from MySQL production to the ArcGIS' production database. Used files are as follows:

html/admin/Datatables-editor/examples/inline-editing/simple.html As mentioned above, this file defines all the menu items. "Migrate to Dev" and "Migrate to Prod" buttons are linked to migrate_trigger.php and migrate_trigger_prod.php, respectively.

html/admin/Datatables-editor/examples/inline-editing/migrate_trigger.php

• This is a very basic, un-styled interface that shows the progress of data migration.
• This PHP file triggers html/admin/Datatables-editor/examples/inline-editing/agol-integration/agol_integration.py and outputs the results on the webpage.
• migrate_trigger_prod.php works in the same way, but it puts a different environment variable to target production database on ArcGIS.
• In order to show the output of the Python scripts, it sets "output_buffering" to "off" so the browser shows whatever that receives from the scripts.