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.
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.
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?
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!
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.
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.
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.
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.
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.
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.
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.
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
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.