Admin Interface Development

The admin interface can be developed using the same logic that was applied for the user account interface, but there are additional possibilities that we will review.

The first thing you do, as usual, is create an HTML page which will serve as the design basis, import e2c.js, e2ca.js, and then e2cadmin.js, which contains additional code for admin functions.

The second thing you will need is an admin user credential, so that you may experience and test the admin features.

Remember that in order to get the user properly authenticated for interaction with Salmon, in $(document).ready(function() {...} you should set isAccount=true;.

The admin has access to a database tool for administration purposes. You may or may not want to add it to your admin interface. The tool is not a replacement for an elaborate database management suite like phpMyAdmin, but it does help with day to day tasks.

Should you want to add it, here is how to implement it. To begin, you should set a <select> element in your HTML where you want the list of tables to be populated. It must have the id e2c_tables and have an onclick event set to javascript: e2c_admin_db_table();.

In order to allow browsing a different number of rows than default, you should add an <input> field with the ID e2c_rows and a button with onclick event set to javascript: e2c_admin_db_rows();.

Your code would look similar to this:

<div id="e2ac_admin_menu">
            <select id="e2c_tables" onclick="javascript: e2c_admin_db_table();">
            <option value="">--- browse Salmon database ---</option>
            </select>
             See <input id="e2c_rows" value="" style="width: 40px;"> rows/page <input type="button" onclick="javascript: e2c_admin_db_rows();" value="go">
            </div>

Now you would likely want pagination, such as this:

<div class="paging">
            	<p class="bold"><span id="e2citemspagicount">1-90</span> IN <span id="e2citemstotal">4934 ITEMS</span></p>
                <ul id="e2citemspagi">
                	<li><a href="#" class="prev2"> <span class="dis_none">Previous</span></a></li>
                    <li><a style="color:#808080;" id="e2citemspagi0" href="#"></a></li>
                    <li><a style="color:#808080;" id="e2citemspagi1" href="#"></a></li>
                    <li><a style="color:#808080;" id="e2citemspagi2" href="#"></a></li>
                    <li class="e2c_pagi_cur"><a style="color:#333333;" id="e2citemspagi3" href="#"></a></li>
                    <li><a style="color:#808080;" id="e2citemspagi4" href="#"></a></li>
                    <li><a style="color:#808080;" id="e2citemspagi5" href="#"></a></li>
                    <li><a style="color:#808080;" id="e2citemspagi6" href="#"></a></li>
                    <li><a href="#" class="next2"> <span class="dis_none">Next</span></a></li>
                </ul>
                <div class="clear"></div>
            </div>

Finally you would need to render the table's content in an element with the ID e2cadmin

<div id="e2cadmin" class="e2cadmin">	
            </div>	 

Then, in your $(document).ready(function() {...}, you should add e2cadgt();, as this helper will get the database tables names. Additionally, it will keep data in the tableCount buffer, primarily for keeping the count of rows in the table.

The e2cadmin.js has some other helpful code you may want to take advanage of. For example, it sets data buffers such as var datamod=new Array(); var datamod2=new Array(); var datamod3=new Array();, and has an interesting e2c_admin_edit(a,b) function to generate forms out of data buffers.

In any case, apart of these particularities, which you may want to use or not, building the admin interface is similar to the technique you would use for any user interface.