Allimports – MVC and Ajax CMS

Allimports is content management system (CMS) that I developed for a car importer locating in Haberfield, Sydney. The system is a fully functional Ajax CMS in which I created a new MVC model on my own.

The website provides all features of a standard CMS and addresses the specific functions required for a car trading website, such as Special Offer, New Arrival list, multiple input search, email spam, to name just a few.

The system is developed by using the cutting edge web techniques, Ajax and MVC. Coining in 2005, for the last couple of years the term Ajax has captured a great concern of all web developers around the world and be considered as the hottest technique nowadays.

Ajax, Asynchronous JavaScript and XML, is a group of interrelated web development techniques used on the client-side to create interactive web applications or rich Internet applications. With Ajax, web applications can retrieve data from the server asynchronously in the background using XMLHttpRequest object  without interfering with the display and behavior of the existing page(wikipedia).

Web site: www.allimports.com.au

Functionalities

Visitor:

  • View car list, special offer, details, photo show (using Mootool framwork)
  • Search, send enquiry, subscribe
  • ....

Users:

  • View cars, add new, update, remove.
  • Add, remove, update photos
  • View enquiries, reply, remove
  • View user, update user state, unsubscribe
  • Manage profile
  • ....

Admin

  • Add, remove users, disable users
  • Change system setting.
  • ....

The new MCV model

Model–view–controller (MVC) is an architectural pattern used in software engineering. Successful use of the pattern isolates business logic from user interface considerations, resulting in an application where it is easier to modify either the visual appearance of the application or the underlying business rules without affecting the other.

- The model represents the information (the data) of the application.
- The view corresponds to elements of the user interface such as text, checkbox items, etc., and is responsible for the communication of data from the model to the user interface.
- The controller manages the communication of data from the user interface to the model, and the application of business rules to this data.

Typically, a view and a controller exist as a pair, and many such pairs exist in an application, each corresponding to very specific user interface elements.

In the analysis phase of the project, I intended to use an open source framework like CakePHP or Zend, therefore  I have CakePHP installed and configured properly on my machine already. However, after examining CakePHP, I realized that the key factor underlying the MVC model of the framework is XMLHttpRequest, so I decided to develop a MVC model on my own using XMLHttpRequest as the request carrier.

MVC model

Below is how models, views and controllers communicate with each other:

  • When a request is sent from a View, such as user clicks a link or submit a search query, a JavaScript function of a Carrier is raised and send a XMLHttpRequest to the controller match with this view.
  • The action of the Controller will user a Model to perform some tasks, the return will be put back to the XMLHttpRequest
  • The View then receives response of the XMLHttpRequest and partially update the page to display the result.

Sample code

class.user.php

PLAIN TEXT
PHP:
require_once('setting.php');
class User{
function addSpecialDeal($car_id){
$start_date = date('Y-m-d');
$query="INSERT INTO specials(car_id,start_date) VALUES(".$car_id.",'".$start_date."')";
$result= mysql_query($query)
or die("Error addSpecialDeal - the query could not be executed\n");
return $result;
}
function updateCarState($car_id,$value){
$query="UPDATE cars SET value=".$value." WHERE car_id=".$car_id;
$result= mysql_query($query)
or die("Error updateCarState - the query could not be executed\n");
return $result;
}
}


controller-subscribe.php

PLAIN TEXT
PHP:
require_once('../model/class.view.php');
$name = $_REQUEST["name"];
$emial = $_REQUEST["email"];
$inform ="";
$check=true;

if($name==""){
$inform =$inform."
Please fill in your name";
$check=false;
}
if($emial==""){
$inform =$inform."
Please fill in your email";
$check=false;
}
if($check==true){
if(View::checkSubscribe($emial)==true){
$result = View::subscribe($name,$emial);
if($result==true){
$inform = '<span class="text_alert">You have joined Allimports.</span>';
}
else $inform = '<span class="text_alert">Please try again.</span>';
}
else $inform = '<span class="text_alert">You already subscibed to Allimports.</span>';
}
print $inform;


class.user.js

PLAIN TEXT
JAVASCRIPT:
var xmlHttp;
function GetXmlHttpObject() {
var xmlHttp = null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function removeEnquiry(id,page){
pos="car_list";
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
alert("Your browser does not support AJAX!");
return;
}
var url = "../controller/controller-remove-enquiry.php?id="+id+"&amp;page="+page;
url=url+"&amp;sid="+Math.random();
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
document.getElementById(pos).innerHTML = xmlHttp.responseText;
}
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}

Screen shots:

Homepage
allimports_screenshot

User dashboard

allimports_user

NDLoc, 27/06/2009

June 27, 2009    Posted in: Web Development

Leave a Reply