Gilbert Network

AJAX Proposal - Computer Inventory Reporting System (CIRS)

Preface

This proposal mainly consist of four sections - Introduction, Project Description, Program Architectures and References. Hope that you can have an overview on my AJAX project.

Introduction
This section consists of the Aim and Objective of the project and why AJAX is implemented on the system.
Project Description
In Project Description, it will describe the functionality of CIRS, its database architectures as well as the technologies used in the project.
Program Architectures It is about the programming hierarchal and the relationship of the function and libraries used in the project.
References
References section will list out all websites and components used to build the program.
AJAX Demo
Demonstration section on AJAX program.

1. Introduction

1.1 Aims and Object

Traditionally web applications was suffered from the stateless nature of the HTTP protocol and server have to refreshes for each request which result of ineffective communication. Other than the user have to wait for the refreshed result from server, it will also put a big burden on the servers.

Today we can overcome this drawback by using an innovative technology/idea - AJAX. Our application - Computer Inventory Reporting System (CIRS) try to build an example to this technology and try to use as much advantage as AJAX provided.

1.2 Advantage of using AJAX in our Application

We know that when one administrating a computer network, the trouble frequently comes from the malfunction of computer hardware, cables problem, blue screen, OS upgrade, anti-virus need updating..., all kind of this stuff really make one headache. When someone told you that one of the computers located at somewhere else far away from you is out of order, then you need to have to go to there and just to record the serial number of the machine so as to you can tell the maintenance company which one should be repair.

It is not a big problem if everything fine, however, the computer located maybe occupied which means you have to visit next time, you already forget which company can help you to repair the computer and maybe you lost those company contact. You may already have a well documented inventory or database to record all the stuff. The problem, however, is not gaining centralized management to the inventory. Searching and updating to this database still get one feel annoying.

As stated above or in "About Ajax" at my page, we know that we can update webpage dynamically and edit the table entries in one-click action. Though, this project does not benefit from the reduction of the site performance or data transmission time since the request rate is not that high. On the contrary, this project do benefit from the interactive feature from Javascript, we can handle the data in a more interactive and responsiveness way.

2. Project Description

2.1 Functionality

Computer Inventory Browsing
Network Administrators can browse the inventory using computer name, serial-number, the characters like OS installed, Manufacturer, Location, etc. When the administrators select one of the computers, the relevant data will display at the screen dynamically through the AJAX Engine. On another part of the screen, a location map will be shown to users.
Inventory Manually or Automatically Updating
As network users will login to the computer once a day or once a week, we will incorporate with the login script and update the computer database automatically. Still, administrator can use the traditional way to update the database.
Inventory Report in XHTML+CSS or XML format
Other than the screen play, Administrators can print out the inventory report using XHTML+CSS style and he can also output at XML style.
Online Devices' Driver Search
Users can search the most updated driver from Internet when he highlight any keyword(s) at the driver columns. However, this function may not be implemented as the low accuracy of online searching.

2.2 Database Architectures

My database architectures is very simple, totally we have 10 tables, all information will be put under the "computer" table and if it is related to computer stuff like harddisk, VGA card, RAM, OS, etc., I will use a serial number as the primary key to link up this stuff which stored in the following tables:

comp_avinfo, comp_hardware, comp_others, comp_software

While if it is related to the equipment, I will store it at the following tables. This time I will use an equipment ID to link with "computer".

equipment, equipment_type

The remain three tables is other miscellaneous information and all of them had their unique id to link with "computer";

location, project_type, vendor

2.3 Technologies Incorporated

AJAX PHP Framework
XAJAX is an open source PHP class library which act as a AJAX Framework and simplifying the communication between client/javascript and server.
Kixtart
Kixtart is a free-format scripting language and I use it on user login and administration. I have also use NTDOC's "My Computer Info" script with certain modification to record the computer information on a separate CSV file. You can download the script here. For more information on Kixtart, please go to http://www.kixtart.org
MySQL
MySQL will be the database to store all the computers' information.
AJAX
The following programming language and standard will be used:
- PHP
- JavaScript
- XML
- XHTML + CSS

3. Program Architectures

Code Snippets

AJAX call - Here we see an asynchronous HTTP request by user and call a registered xajax function (here is xajax_displayDB) to process the data. Later on, program will do the queries from database and returns the results.

<!-- Begin ajax_block1 -->
<div id="ajax_block1">
<h2>Inventory Display</h2>
<div id="aj_menu">
<b>Menu</b>
<a href="#"
onclick="xajax_displayDB('comp_others','computer_name','ASC');
document.getElementById('ajax_map').style.height='500px';
return false;">General Info</a>
<a href="#"
onclick="xajax_displayDB('comp_hardware','computer_name','ASC');
document.getElementById('ajax_map').style.height='500px';
return false;">Hardware</a>
<a href="#"
onclick="xajax_displayDB('comp_software','computer_name','ASC');
document.getElementById('ajax_map').style.height='500px';
return false;">Software</a>
<a href="#"
onclick="xajax_displayDB('comp_avinfo','computer_name','ASC');
document.getElementById('ajax_map').style.height='500px';
return false;">
.............................
.............................
</div><!-- Eng ajax_block1 -->

PHP Processing - The PHP script uses the variables passed and insert into the query and returned result will then inputed into the XAJAX for processing. Finally results was returned.

function displayDB($table,$sort_key,$order)
{
//Display Database
$id_data=showDB($table,$sort_key,$order);

//Display Input filed selected by $table
$serial_number="";
$id_input=createInputField($table,$serial_number);

//Operation on ajax
$objResponse = new xajaxResponse();
$objResponse->addAssign("ajax_data","innerHTML",$id_data);
$objResponse->addAssign("ajax_input","innerHTML",$id_input);
return $objResponse->getXML();
}

Result Return and Display - Here is result that's returned and displayed on the following location <div>

Result Returned

Tue Mar 28 2006 20:46:30 GMT+0800: Received: &lt?xml version="1.0" 
encoding="utf-8" ?><xjx><cmd n="as" t="ajax_data" 
p="innerHTML"><!...................................... 
onclick="xajax_displayDB('comp_hardware','serial_number','ASC');
return....... [long response] ...

Tue Mar 28 2006 20:46:29 GMT+0800: 
Calling displayDB uri=cirs.server.php 
(post:xajax=displayDB&xajaxr=1143549989953&
xajaxargs[]=comp_hardware&
xajaxargs[]=computer_name&xajaxargs[]=ASC)

Tue Mar 28 2006 20:46:29 GMT+0800: Initializing Request Object.

Tue Mar 28 2006 20:46:29 GMT+0800: Starting xajax...

Display Location

<div id="ajax_data">

</div>

Functions description
We have the following funcitons and some of them are regester with XAJAX framework and some of them are normal function called by PHP. All of the functions will be described in detail.
- Functions registered with XAJAX
  - displayDB This is the main seciton of the program. In this function, we will display the database result by AJAX call(on index page) and use showDB() to display the returned restult. While in the returned result, we have employ a lot of AJAX call on the returned filed such that we can process more AJAX properity.
  - updateInputField Under the displayDB(), displayed data is clickable and those data will transfer to the input filed(created by displayDB()) under this function.
  - deleteRecord Database record can be deleted and successful message will displayed asynchronously.
- Function called normally in PHP
  - showDB - called by displayDB or by deleteRecord to display the Database information.
  - createInputField - called by index page or by updateInputField to display the input field for users.
  - sanitize - used to sanitizes user inputs, avoid like SQL Injection, Malicious input, etc.

4. Reference

5. Demo

6. Statement of Academic Honesty

This assignment/paper represents my own work. I have not incorporated into this assignment/paper any unacknowledged material from the work of another person, including papers, words, ideas, information, computer code, data, evidence-organizing principles, or style of presentation taken from the Internet, books, periodicals, or other sources.