Information Systems:Notes on Infonet Development

Overview

This page probably won't last, the topic is massive. Nonetheless, an area needs to be devoted to discussing development in Infonet (therefore, mostly talk related to WebSmart). That starts here.

Bootstrap redesign and new conventions

October 2016 (ongoing): In terms of web UI/UX code (but also the PML), Infonet (and Web Orders for that matter) are very outdated. There is heavy use of HTML tables for styling, the Javascript and jQuery functionality is cut-and-paste, and re-usable code is not centralized, but rather also cut-and-pasted into every page/programs where those functions are necessary.

The main feature of WebSmart v11 is Bootstrap. Bootstrap is a CSS/js UI framework (web design template) that has grown exponentially in popularity because it makes sites responsive to screen resolution (i.e. responsive design), and as such, makes web pages very mobile-friendly. Exware designed medicinecentre.com with Bootstrap. Bootstrap is similar to jQuery in that they are both web frameworks, but they do not interfere with each other. In fact, Bootstrap requires jQuery as a dependency. Keep in mind that jQuery UI however does somewhat overlap with Bootstrap (buttons, modals/pop-ups, datepicker, typeahead), and so in areas where they do overlap, Bootstrap will be used in place of jQuery UI.

When it comes to developing new WebSmart programs or adding functionality to existing ones, I have been redesigning the entire page/program with Bootstrap (unless the change is very small). Rather than copy-and-pasting existing programs, I study the program logic instead (the PML), and migrate that over to new source code started from scratch, while scrapping the old HTML/CSS.

Note: Programs developed in this manner are prefixed with IN2.

Notes

Code standardization

Google Analytics - PML include

Google Analytics (GA) is a service that allows you to track and analyze web usage. read more about the implementation of GA at uniPHARM here. While the tracking code is just a small HTML snippet invoking a javascript function to send data to GA servers, the fact that we have a test and production environment complicates things. Basically, we use one WebSmart source file per program and simply compile it into two different objects residing in different environments. Meanwhile, the GA tracking code must be unique to report different statistics for the dev and production environments (yes, both are tracked separately).

Therefore, a PML function should be included in every page as follows:

func z_ga(){
 if (scanstr("WEBDEVP",pgmf_pgmlib) <> 0){
  include("/webroot/unipharm/in2/includes/in2_ga_dev.html");
 }
 else if (scanstr("WEBPRDP",pgmf_pgmlib) <> 0){
  include("/webroot/unipharm/in2/includes/in2_ga_prd.html");
 }
 else return;	
}

This PML function is invoked in the HTML header.

JSON

WebSmart is including more and more JSON functionality with every release, and this will allow Infonet development to have more web-service/API-based functionality. The intent will be to make customer names and numbers clickable wherever they exist, and that will in turn call (through AJAX) a central program that will return customer information via JSON.

The development for that has started in in2_srvapi.pgm.

SQL PML functions

There are two main PML query functions - sqlquery and sqlexec.

Polymorphism in sqlexec is done through the following syntax (memorize this!):

sqlexec("select column1, column2 into :some_variable from some_table where pml_variable_column_name='" + PML_variable + "'")

I've forgotten this a million and one times.