Header Image

DND Web Portal

Overview

Access limitations

The DND/ CF Support Web Portal is hosted on a private network, and is not accessible to the public over the internet.

Note: On 21 April 2008, at DND’s request, I removed all the portal screen captures and reworded the text to preserve the anonymity of the client.

Web Portal purpose and function

The bilingual Web Portal gives authorized personnel around the world a real-time, 24×7 access to incidents (aka technical problems) tracking and technical documentation. Myself and a junior Webmaster developed the entire Web Portal from design and implementation to deployment.

The Web Portal extracts most of its content from a Axio’s Assyst database. The server-side software uses advanced joint SQL statements to access the data elements stored in dozens of tables, and presents this data to the user in coherent and visually pleasing screens.

The Web Portal has two main functions:

  • retrieve and present technical and administrative support documents (in Excel, Word, PowerPoint, and PDF formats) catalogued in the database; and,
  • retrieve and display incidents tracking information stored in the database.

The following sections describe the portal main features from a web development and programming perspective.

Standards

The portal layout follows the GoC Common Look and Feel (CLF), and the W3C html and design standards. Although the environment was Internet-Explorer 6 only, the design was validated for Gecko compliant browsers like Firefox 2.

Support for the two official languages

The Portal is structured as a fully bilingual site, and each page has a link in the top institution bar (Français in the English page, English in the French page) connected to its equivalent page in the other official language. I provided the translation services.

Usage of Advanced Techniques and Technology

CSS Positioning

I used advanced CSS Positioning (CSS-P) techniques to create a table-less, liquiddesign based on the box-model that allows users to view the web pages at anybrowser width on any display. I modified and adapted the CSS-P and JavaScript of the open source Tigra Menu for the multi-level pull down menu making up the main navigation bar on the left.

CSS-P was also used to create pop down menus based on a map Hot-sports.

XML based applications

I developed an XML based application that uses map hot spots to activate xml based applications that translate xml-defined object into HTML dynamic menus by means of XSL transformations.

Microsoft .NET technologies

The portal dynamically generates most of its pages with information extracted from a large database using the Microsoft .NET framework hosted on a Microsoft Windows 2003 IIS server.

The core applications use a combination of ASP.NET (a.k.a. aspx), ADO.NET and VB.NET for the data access and database connectivity. Advanced .NET application controls like DataGrid, DataTable, DropDownList and CheckBox are used to pull, manipulate and present the information to the user’s browser.
For example, selecting Report » Incidents in the navigation bar, then activating the search with the shown criteria displays a pop up table of matching incidents. Each incident row contains a link (the No. field) which, when clicked, pulls the incident details from the database and displays them in an expanded box.

I also developed the method to convert an html table into an Excel-ready table. When the user clicks the excel button shown at the end of the incidents list, the list is converted into an Excel table which can be saved as a native Excel document.

I used the .NET framework components to solve complex forms processing issuesthat require the building of cascading lists where a list content depends on the selection in a previous list.
For instance, in a “Select Items” form, selecting a division in the Division drop down menu dynamically populates the Branch drop down menu with all the branches belonging to the selected division. Similarly, selecting a specific Branch dynamically populates the Section menu, and selecting a Section menu item would in turn populate the Department menu.

Login and document access validation

I developed the server-side code to validate usersusing their browser information against database entries, to allow authorizedusers access to restricted documents and information.
For example, upon selecting Reports » Support Statistics in the left navigation bar, a regular user would see a “not all privileges granted ” message, and the display would not include the files in the individual Reports section, while a user listed as a manager would have access to the files listed under the Individual Reports section.

Access to documents in their native format

I developed the server-side code to extract and display documents and files in either a browser application or a native application (e.g., Excel, Word, PowerPoint). For example, when a privileged user selects Documents » Service Management » Document Mgt on the left navigation bar, and clicks on the highlighted document hyperlink in the resulting page, the linked MS Word document opens in the native Microsoft Word application, and may then be edited and saved in its native MS Word format.

The same document accessed by a non-privileged user would open in the browser window application and could only be saved on the user’s local PC.

Browser to server documents upload

I extensively modified open source code to allow designatedusers to upload files from their PC to selected folders on the web server. The list of folders is dynamically generated from the server-side directory listing rooted at a pre-defined folder, selected by the user from a drop-down list.

Server-side files and folders manipulations

I developed the code to recursively traverse web folders rooted at a pre-selected location and display viewable documents as hyperlinks that will open in their native format in a new browser window.

Email creation and delivery

I developed the code to capture, validate and send the formatted content of user forms via a remote mailserver.
For example, when the user clicks the Comment/ Suggestions hyperlink at the bottom of any web page, fills out the input boxes and sends the email, the form content is sent to the web team with a copy to the originator, and a confirmation message is also displayed on the browser.

Usage of Indexing Services and AJAX

I developed the browser and server-side code in ASP and JavaScript to search the build-in Index databases (created by the Microsoft Indexing Services) with SQL queries for documents or pages matching specific keywords, and pass the results back to the client Browser active page using the AJAX technology.
For Example, activating the search with the keyword portal extracts documents from the Assyst Items Database, ensures that the documents are "viewable" by the user, and displays them as hyperlinks in the active browser page. Activating a hyperlink would open the document in its native format in a separate browser window.

Development tools and strategy

The Assyst database has hundreds of tables, some containing thousands of records with dozens of fields. Most of the information required by the portal had to be extracted from several tables and be accessible to the code as a single result set for processing.

To achieve this multiple-table lookup, I first used the Microsoft Access Query Application as a modeling tool to allowed me to visually link the tables and fields needed to pull the desired type of records from a mock-up database. Example:

query tool output

I could then disassemble, modify and rebuild the MS Sql code generated by the tool…

SELECT DISTINCT dbo_incident.incident_ref AS [Number], dbo_item_1.item_sc AS Item_B, dbo_inc_cat.inc_cat_sc AS Incident, dbo_sectn_dept.sectn_dept_sc AS Sectn_Dept, dbo_usr_1.usr_sc AS Aff_User, dbo_usr_2.usr_sc AS Serviced_By
FROM (((dbo_item INNER JOIN dbo_item_rel ON dbo_item.item_id = dbo_item_rel.item_id) INNER JOIN dbo_item AS dbo_item_1 ON dbo_item_rel.item_rel_id = dbo_item_1.item_id) INNER JOIN (dbo_inc_data INNER JOIN ((dbo_incident AS dbo_incident_3 INNER JOIN (dbo_incident AS dbo_incident_2 INNER JOIN ((dbo_incident AS dbo_incident_1 INNER JOIN (dbo_usr INNER JOIN (dbo_prod_cls INNER JOIN ((dbo_inc_cat INNER JOIN dbo_incident ON dbo_inc_cat.inc_cat_id = dbo_incident.inc_cat_id) INNER JOIN dbo_inc_prior ON dbo_incident.inc_prior_id = dbo_inc_prior.inc_prior_id) ON dbo_prod_cls.csg_id = dbo_incident.csg_id) ON dbo_usr.usr_id = dbo_incident.ass_usr_id) ON dbo_incident_1.incident_id = dbo_incident.incident_id) INNER JOIN dbo_sectn_dept ON dbo_incident.sectn_dept_id = dbo_sectn_dept.sectn_dept_id) ON dbo_incident_2.incident_id = dbo_incident.incident_id) ON dbo_incident_3.incident_id = dbo_incident.incident_id) INNER JOIN dbo_usr AS dbo_usr_2 ON dbo_incident.ass_usr_id = dbo_usr_2.usr_id) ON dbo_inc_data.incident_id = dbo_incident.incident_id) ON dbo_item_1.item_id = dbo_incident.item_id) INNER JOIN dbo_usr AS dbo_usr_1 ON dbo_incident.aff_usr_id = dbo_usr_1.usr_id
WHERE (((dbo_incident.incident_ref)=30397));

…to construct the .NET SQL query code needed to match the fields selected by the user.