Apis Networks  
apnscp esprit Design
  - apnscp Iterations
        -  Page 1
        -  Page 2
  - apnscp esprit Design         -  Page 1

Design is something we pride ourselves on. It does not take a lot of effort to churn out an incomplete and muddled interface. It does take months of planning to churn out a consistent, elegant, and powerful interface though. Several key components make up apnscp esprit. We'll give you a breakdown of what creates what and how it is controlled. First, we'll begin with the login facility.

Login Login Facility:
Problem:  apnscp is built upon Ensim WEBppliance. To put it bluntly, Ensim is an abomination. Cluttered pages strewn about a cluttered and buggy dashboard, accessed via a cluttered login screen. There are four separate login locations. Each for the main administrator, reseller, domain administrators, and sub-users of a site.

Depending upon the role you would like to assume, you have four separate locations to normally login to: /admin/, /reseller/, /admin/, and /user/ for each role respectively. /admin/ redirects to either the primary administrator or the "Site Administrator" as it's called depending on where you access the login redirect. Sounds a little confusing, huh?

Login prompt Solution:  We consolidated the login interface to just one page. Just plug in the username you would like to login as; your domain name, if applicable; and the account password. Once you click login though, the magic begins. Underneath, the system scans through the listing of users and assigns a permission role to the current login session.

Once it has established the proper role of the user, a cURL session is setup to simulate logging into the Ensim WEBppliance control panel. That is right: seamless interoperability between the two. This also gives us the chance to borrow what pages still work in Ensim's system and combine it with our own customized creations.

No longer do you have to memorize forty-thousand different locations, just one location will suffice — it's that easy!

Login Dashboard:
After logging in, you're greeted with the dashboard for your account, but before we go into what is embedded into the dashboard, let's take a look at the template engine that powers it.

Template Engine, Phase One Template Engine, Phase Two
Template Engine Template Engine:
Problem:  Before, in apnscp 1.0, items were distributed across the dashboard in an unruly manner. Sometimes there were gaps in the elements listed. That happened whenever a particular module was not enabled for a domain.
<tr><td>if (some_module_exists): display_links();</td><td>/** other stuff **/</td></tr>
The controlling logic looked a bit like that. Unsightly, yes.

Solution:  An engine was designed to take a list of configuration values defined, each whose display was controlled by a simple assertion, then order and display the values on the page. Think of it as a domino set. The template engine fires up, knocks the first domino over (displays it) and then the following domino is knocked over (item ordered by the engine). If the directive shouldn't display for a specific role, then a trapdoor opens beneath the domino and it falls into the abyss. Repeat the process until all dominoes have been knocked over in the set and you have the basic understanding of the template engine.

Modules Modules:
Problem:  Mining certain data requires elevated privileges; these special privileges are invoked via an elevated backend process that mines the data. The backend Tcl process was structured in such a manner that only a few special functions existed, primarily with database mining and service enabling/disabling.

Solution:  PHP5 replaced Tcl for the backend and now common functions are grouped into relevant classes based upon what purpose is served. The benefit is two-fold: first, the controlling logic is separate from the pages, a la a model-view-controller. This gives us the ability to easily tune data passed to and from the modules and even intercept the calls as they are being made, regardless if the backend process is needed, if it's being called through SOAP, or if it's just a normal page request. Secondly, it arranges the functions into nice little classes that can be invoked through Web Services (SOAP). Write up some documentation inside the class file, run phpDocumentor, and presto, you have Web Service documentation broken down by category.

Quick Menu Collapsed Quick Menu Expanded

Quick Menu Quick Menu:
Problem:  Traditionally apnscp and Ensim WEBppliance make heavy use of frames to display all shortcuts within the browser. Frames take away from the usable space inside a screen and add additional clutter to the control panel. We also wanted to ensure that the control panel would fit snugly into an 800x600 screen resolution. Adding frames impairs the amount of usable space we can use inside the control panel for displaying data.

Solution:  By utilizing PHP Layers Menu System, all of those links can be collapsed into a single drop-down menu taking up just 150 x 20 pixels of real estate. Less clutter to deal with and there is less hunting and pecking for the page you would like to visit. Move your mouse over the "apnscp Actions" image and now you have access to every link in the control panel.

Tooltip, Compact Tooltip, Expanded
Embedded Help Embedded Help:
Problem:  Certain elements of the control panel hold great significance that users often overlook. The administrative e-mail address is one critical component time and time again users neglect to update. Sometimes the important items are taken just at face value or even perhaps the definitions may be hard to understand. It's imperative

Solution:  Windows that pop-up over the cursor during a mouse over, called tooltips, first appeared in the SpamAssassin Configuration Wizard as an easy way to elaborate complex topics to average users. The idea was such a successful one that it carried over into apnscp esprit. If you are even in doubt of what a particular phrase means in the control panel and it looks a little like this, bringing your mouse over the underlined article will bring up an expanded textbox elaborating on it.

Is that all? Of course not. Look forward to another installment coming soon exploring how we implemented a new server news layout, our graphing class, SOAP, the differences between Ensim's dashboard and esprit's dashboard, and the source of inspiration.
All Rights Reserved. Copyright © 2002-2008 Apis Networks, Inc. All trademarks are property of their legal owner.
Acceptable Use Policy | Terms of Service | Privacy Policy | Site Map | Domain Registration Agreement