A Web Portal in Dart

In my previous post I shared my initial views on programming with Dart. To date I have developed a few projects, both in the private and business realm, and my experiences have been extremely favourable.

The most recent projects entailed a web portal for company. Considering that my Javascriot/JQuery has never been my strength, Dart evolved as a natural substitute for the limited PHP/JQuery skills set I had. The high level features of the web portal are:

• Web technology based portal.
• Dart front end.
• JSON based back end integration.
• User login based access control.

Web Portal in Dart

Needless to say, the back end server is developed in PHP and primarily serves to interface the portal to a MySQL database by means of JSON. However, in the future the PHP implementation will be replaced by either a Golang or Dart version.

Below is a code snippet used to render the most recent articles on the portal:

void xhrFetchJson_articles(HttpRequest request, String aContext, String aUrlAction) {
  /* 
   * Function is used to list actual imagery content as retrieved from a database table.
   * 
   * 1. This function initiates an HttpRequest to fetch json data from a PHP backend script.
   * 2. The JSON data is decoded in a dart Map structure to enable the relevant fields.
   * 3. The relevant MAP structure fields are the used to generate a table that includes an edit buton.
  */  
    
  print("[Debug] Evoked function rxhrFetchJson_articles");
  print("[Debug] Function argument aContext   = " + aContext);
  print("[Debug] Function argument aUrlAction = " + aUrlAction);
  print("[Debug] ---------------End.");

  if(request.status == 200) {
    print("[Debug] function xhrFetchJson_articles Data fetched from http server (200).");
    
    if(request.responseText == "zero.rows.found"){
      
      window.alert("Alert: No content found.");
      querySelector("#output").appendHtml(gallery.displayGallery_WIP("images/contentnotfound.png"));
      
      return;
  }
  
  //Proceeed if valid content has been returned:
    
    //Debug messages to print responsetext received from the xhr function: 
//      print(request.responseText);
    
    querySelector("#output").text = "";

    JsonObject data = new JsonObject.fromJsonString(request.responseText);    
    
    String aArticleAuthor   = "";
    String aArticleTitle    = "";
    String aArticlePubDate  = "";
    String aArticleText     = "";
    String aArticleImageUrl    = "";
    
    //Loop through the JSON data instance and creaye a link navigation menus:
    for(int i = 0; i < data.length; i++) {
      aArticleAuthor    = data[i].author.toString();
      aArticleTitle     = data[i].title.toString();
      aArticlePubDate   = data[i].date_pub.toString();
      aArticleText      = data[i].article_text.toString();
      aArticleImageUrl     = data[i].url_image_intro.toString();
      
//      displayNews_Content(String aTitle, String aAuthor, String aPubDate, String aArticleText, String aFilename) {

      querySelector("#output").appendHtml(displayNews_Content(aArticleTitle,
                                                              aArticleAuthor,
                                                              aArticlePubDate,
                                                              aArticleText,
                                                              aArticleImageUrl));
            
    }
    
  }    
}

In comparison to other web oriented development environments I have used before, I really found that Dart is a very capable, suitable  and powerful in its ability to manipulate the HTML DOM and processing of JSON interfaces.

It may be  noteworthy to mention that 3rd party frameworks are not incorporated into the web application. However, I did make use of a 3rd party JSON Object library as indicated below:

import 'dart:html';
import 'package:json_object/json_object.dart';
//import 'dart:convert';
//import 'nlc_serverroom.dart' as server;
import 'nlc_lib_contacts.dart' as contacts;
import 'nlc_lib_galleries.dart' as gallery;
import 'nlc_lib_pbx.dart' as pbx;
import 'nlc_lib_assets.dart' as assets;
import "fn_authentication.dart" as libAuthenticate;
import 'trials.dart' as trial;
import 'package:intl/intl.dart';