Załóżmy, że nie wiem jak napisać taką funkcję, żeby była elastyczna, po prostu we wnętrzu mam zaszyte id pól formularza:

function count_gros_value(){
   $("#Invoice[gros]").val(
      parseFloat($("#Invoice[net]").val()) *
      parseFloat($("#Invoice[vat]").val())
   );
}
// wywołanie
count_gros_value();

(nie sprawdzałem tego kodu, służy jako przykład i nie mam pojęcia czy dobrze działa).

Oprócz wielkiej nieelastyczności kodu (o czym teraz pisał nie będę) istnieje problem polegający na tym, że nie wiem czy jakiś inny programista nie zdefiniował funkcji count_gros_value gdzieś w layoucie. Oczywiście dostanę error jeśli tak jest, więc poprawię ją na my_count_gros_value() (sic!). Ok, wszystko działa. Jednak przychodzi inny programista i odczuwa potrzebę zdefiniowania funckji my_count_gros_value() w layoucie (no bo count_gros_value() już istnieje, a jego robi coś inaczej/lepiej więc trzeba ją zaimplementować). W ten sposób rozwala twój zaimplementowany fragment i nikt tego nie zauważa.

Jak tego uniknąć? Można zacząć nazywać takie “lokalne” funkcje invoices_index_count_gros_value() ale to zaczyna wyglądać nieestetycznie i aż się ciśnie na usta magiczne słowo “namespace”.

W Javascript nie ma przestrzeni nazw, ale możesz użyć obiektów:

var invoices = {
   index: {
      count_gros_value: function(){
         $("#Invoice[gros]").val(
            parseFloat($("#Invoice[net]").val()) *
            parseFloat($("#Invoice[vat]").val())
         );
      }
   }
}
// wywołanie
invoices.index.cunt_gros_value();

to jest już fajniejsze, ale ma dwa problemy:

1. ciągłe definiowanie obiektów dla namespace’ów jest równie uciążliwe jak nazwa funkcji invoices_index_count…
2. gdy ktoś przed nami zdefiniuje zmienną var invoices = “invoices”; to mu ją nadpiszemy

Dlatego proponuję taką funckję, która definiuje dowolnie głębokie obiekty udające namespace’y i do tego tworzy je wszytkie w zmiennej o pseudolosowej nazwie (w stylu: Namespace12883495048110.1425782083547854):

function Namespace(namespace_path){
	var w = window;

	window.namespaceFrameworkNamespaceName =
		window.namespaceFrameworkNamespaceName ||
		"Namespace"+ new Date().getTime() + new Math.random();

	var arr  = (window.namespaceFrameworkNamespaceName + namespace_path).
						split(".");

	for(i in arr){
		w[ arr[i] ] = w[ arr[i] ] || {};
		w = w[ arr[i] ];
	}
	return w;
}

Ok, jakiś uparciuch mógłby się uprzeć, że ktoś może w aplikacji zmiennej ‘namespaceFrameworkNamespaceName’ – takiego problem nie rozwiązywałbym na poziomie kodu, ale personalnym (zwiałbym z projektu) ;)

tak wygląda definiowanie funkcji w namespace:

Namespace("app.users.index").check_form = function(){
	document.write("my_check_form()");
};

a tak jej wywołanie:

Namespace("app.users.index").check_form();
// lub gdy mamy zamiar wywołać wiele funkcji z danego namespace:
with(Namespace("app.users.index")){
 check_form();
}

Można by z tego zrobić tez fajne rozszerzenie jQuery,
$().nspc(“app.invoices.index”) (pisałem już o rozszerzaniu jQuery w tutorialu “longPolling”)

Tak czy siak, podzielę się z Wami moimi pomysłami.

Zacznijmy od początków. Przeciwieństwem leniwego ładowania jest ładowanie gorliwe (lub zachłanne), to znaczy ładowanie na zapas wszystkiego co może okazać się potrzebne. Warstwa modelu w cake’u mogła by wyglądać tak (duże uproszeczenie, jedyna możliwa relacja to belongsTo).

Eager Loading

class Model {
	function find(){

		$r = new ReflectionClass($this);
		print "calling ".$r->getName()."::find($conditions)";

		$query = "Select * from `".strtolower($r->getName())."s` ".
					"as `".$r->getName()."`";

		var_dump($query);

		//return query result
	}

	function __construct(){
		$r = new ReflectionClass($this);
		print("creating ".$r->getName()."
");
		if(isset($this->belongsTo) && is_array($this->belongsTo)){
			foreach($this->belongsTo as $related){
					$this->{$related} = new $related();
			}
		}
	}
}

class User extends Model{
	protected $belongsTo = array("Group");
}

class Group extends Model{
}

$user =  new User();

$user->find();
echo "
";
$user->Group->find();

Widzimy, że obiekt Group jest inicjowany długo przed użyciem:

creating User
creating Group
calling User::find()

string 'Select * from `users` as `User`' (length=31)

calling Group::find()

string 'Select * from `groups` as `Group`' (length=33)

Mało tego, ładuje się nawet jeśli nigdy nie wywołamy metody w tym obiekcie (zakomentuj $user->Group->find(); żeby się o tym przekonać).

Lazy Loading

class Model {
	function find(){

		$r = new ReflectionClass($this);
		print "calling ".$r->getName()."::find($conditions)";

		$query = "Select * from `".strtolower($r->getName())."s` ".
					"as `".$r->getName()."`";

		var_dump($query);

		//return query result
	}

	function __construct(){
		$r = new ReflectionClass($this);
		print("creating ".$r->getName()."
");
	}

	function __get($property){
		if(!isset($this->{$property})) {
			$this->{$property} = new $property();
		}
		if(in_array($property, $this->belongsTo)){
			return $this->{$property};
		}else{
			$r = new ReflectionClass($this);
			throw new Exception(
				"$property not related with {$r->getName()}"
			);
		}
	}
}

class User extends Model{
	protected $belongsTo = array("Group");
}

class Group extends Model{
}

$user =  new User();

$user->find();
echo "
";
$user->Group->find();

W tym rozwiązaniu obiekt Group nie zostanie stworzony, dopóki nie będziemy go potrzebować. Wykorzystana jest do tego magiczna metoda __get, która jest wywoływana wtedy, gdy próbujemy się odnieść do atrybutu obiektu, który nie istnieje.

ale pozostaje kwestia wyszukiwania w modelu tak, żeby zwrócił powiązane dane
np.: var_dump($user->find());

array
  0 =>
    array
      'User' =>
        array
          'id' => int 1
          'name' => string 'Franek' (length=6)
      'Group' =>
        array
          'id' => int 1
          'name' => string 'Admin' (length=5)
  1 =>
    array
      'User' =>
        array
          'id' => int 2
          'name' => string 'Janek' (length=5)
      'Group' =>
        array
          'id' => int 10
          'name' => string 'User' (length=4)

Wiemy, że belongsTo oznacza, że User powinien mieć pole (group_id), zatem query powinno wyglądać mniej więcej tak:

Select User.id, User.name, Group.id, Group.name from users as User
Inner Join groups as Group on (User.group_id = Group.id)

W tej chwili cakephp zawiera behavior containable, jednak on polega na załadowanych już modelach.

Zostańmy przy terminologii cake’a i przyjmijmy, że będziemy przekazywać informacje na temat powiązanych elementów w zmiennej $contain

function find($contain=null)

Teraz chciałbym powiedzieć: obiekcie $user zwróć mi wszystkich użytkowników z bazy wraz z informacją w jakich są grupach:

$user =  new User();

$user->find(
	array(
		"belongsTo" => array($user->Group)
	)
);

Zatem zaktualizuję metodę find:

	function find($contain=null){

		$r = new ReflectionClass($this);
		print "calling ".$r->getName()."::find($conditions)";

		$query = "Select * from `".strtolower($r->getName())."s` ".
					"as `".$r->getName()."` \n";

		if(!empty($contain) && is_array($contain["belongsTo"])){
			foreach($contain["belongsTo"] as $belongsToModel){
				$query .= $belongsToModel->getBelongsToJoin($this);
			}
		}

		var_dump($query);

		//return query result
	}

która od teraz zakłada, że model posiada metodę, która potrafi utworzyć odpowiedniego joina:

	function getBelongsToJoin($obj){
		$owner_reflection = new ReflectionObject($this);
		$obj_reflection = new ReflectionObject($obj);
		return "INNER JOIN `".strtolower($owner_reflection->getName())."s`
					as `".$owner_reflection->getName()."`
						ON (`".$owner_reflection->getName()."`.`id` = `".$obj_reflection->getName()."`.`".strtolower($owner_reflection->getName())."_id`)
					";
	}

to jest oczywiście bardzo brzydkie ze względu na refleksje. Metodę getName() można jednak zaimplementować w klasie Model.

Tak czy siak, w tym wypadku nawet w find()’zie uwzględniającym relacje można stosować Lazy Loading

Na koniec całość kodu, z większą ilością relacji i przykładem działania (i małym refactoringiem – skoro już mowa o lazy loading to głupio było ładować piętnaście razy ReflectionClass):

class ModelException extends Exception{}

class Model {

	protected $reflection = null;

	function getName(){
		if(is_null($this->reflection)){
			$this->reflection= new ReflectionClass($this);
		}
		return $this->reflection->getName();
	}

	function getTableName(){
		return strtolower( $this->getName() . "s" );
	}

	function getFKName(){
		return strtolower( $this->getName() . "_id");
	}

	function getBelongsToJoin($obj){
		$owner_reflection = new ReflectionObject($this);
		$obj_reflection = new ReflectionObject($obj);
		return "INNER JOIN `".$this->getTableName()."`
					as `".$this->getName()."`
						ON (`".$this->getName()."`.`id` = `".$obj->getName()."`.`".$this->getFKName()."`)
					";
	}

	function find($contain=null){

		$r = new ReflectionClass($this);
		print "calling ".$r->getName()."::find($conditions)";

		$query = "\nSelect * from `".strtolower($r->getName())."s` ".
					"as `".$r->getName()."` \n";

		if(!empty($contain) && is_array($contain["belongsTo"])){
			foreach($contain["belongsTo"] as $belongsToModel){
				$query .= $belongsToModel->getBelongsToJoin($this);
			}
		}

		var_dump($query);

		//return query result
	}

	function __construct(){
		$r = new ReflectionClass($this);
		print("creating ".$r->getName()."
");
	}

	function __get($property){
		if(!isset($this->{$property})) {
			$this->{$property} = new $property();
		}
		if(in_array($property, $this->belongsTo)){
			return $this->{$property};
		}else{
			$r = new ReflectionClass($this);
			throw new ModelException(
				"$property not related with {$r->getName()}"
			);
		}
	}
}

class User extends Model{
	protected $belongsTo = array("Group", "Unit", "Company");
}

class Group extends Model{
}

class Unit extends Model{}
class Company extends Model{}

$user =  new User();

$user->find(
	array(
		"belongsTo" => array($user->Unit, $user->Company)
	)
);

As You could already see at wikipedia, long pooling means just requests (in our case ajax requests) which can wait quite a long time for server response. Server doesn’t send a single bit of information until something interesting (for the request) appears.

There are two possible results:

1. something appears (in our case – new post in database), so server sends this info, request hits a success and do something with received data
2. nothing appears for some time, and request time-outs.

Both possible paths ends the same – request starts another one to wait for something to happen.

You probably already have some ideas how to solve it. If so – please try it (and if it differs from mine solution – I’d love to see it, please post it in comments.)

There are some pitfalls, though. I’ll show most of them.

assumptions

Thing to remember at this point is where request are always going. So it’s not a good way to send html code back and forth. XHttpRequests should expect JSON responses (cleaned of white-spaces if possible).
Another conclusion is: if there’s nothing to send from server it’s better for xhr to timeout than receive response “nothing new”. Even though this is not elegant solution (time-out is still some kind of error).

We should decide how much of information should be send to server in order to get new messages in the thread. The minimum is the thread’s root id and last message id (biggest one). With that information it is possible to get all messages that are in the subtree which is rooted in particular id and their id is bigger than the very last one. But in that case we at least need to make two queries: one to get root lft and rght values, second to get all his children (which ids are between roots lft and rght).

The second approach is to send all messages ids in thread and just get all messages that have parent_id in that set.

My approach is that one should use cleaner solution (1st one) because we don’t have enough data to decide which one is faster (when the application is in production mode You could do some research. Of course we could make some fancy simulations but it is not the point of this tutorial).

So create an action that takes two parameters (tree root id and last message id in the thread) and sending back new messages (if any) or do nothing (not even sending empty response).

//controllers/posts_controller.php
	function get_new($rootId, $lastMessageId){
		$root = $this->Post->read(null, $rootId);

		$posts = array();

		while(empty($posts)){
			$posts = $this->Post->find(
				"all",
				array(
					"conditions"=>array(
						"and"=> array(
							"Post.lft > " => $root["Post"]["lft"],
							"Post.lft < " => $root["Post"]["rght"],
							"Post.id >" => $lastMessageId
						)
					)
				)
			);
			if(empty($posts)){
				sleep(2); // sleep for two seconds
			}
		}
		$this->set("posts", $posts);
		$this->render("get_new", false);
	}

// views/posts/get_new.ctp

You can try it out in Your browser. But if You choose /posts/get_new/1/8 when 8 is the very last message in this thread it would choke your server up ;) For testing use parameters where at least one message will appear (in the example: /posts/get_new/1/7).

Server issue

This clash on server is connected to sessions. Apache waits to the end of every scripts until it saves session data, at the end it implicitly closes session. For some reason Apache cannot release thread for this request if session is not closed (even if You hit cancel in Your browser, what triggers kill for the processing request in the most of the cases). What you need is to add session_commit(); at the very beginning of actions which are long polled. (if You need to write to session – do it as fast as it’s possible before while loop).

//controllers/posts_controller.php
	function get_new($rootId, $lastMessageId){
		session_commit();
		$root = $this->Post->read(null, $rootId);
		//...

Now we have nice action which gives us JSON string with new messages. Lets load them to our thread.

First of all we’ll need root id and last post id stored in Thread object. Root id is in the first element’s parent_id, last post we’ll find while generating thread tree.
Let’s add those properties to Thread class:

//webroot/js/thread.js
(function(window, document, udefined){
	window.Thread = function(_posts) {
		this.posts = _posts;
		this.rootId = false; //<==
		this.lastId = false; //<==
		this.extendJQuery();
		return this;
	};

})(window, document);

Store root's and last message ids in createThread function:

//webroot/js/thread.js
Thread.prototype.createThread = function(){
	if(this.posts.length <1){
		return this;
	}
	this.rootId = this.lastId = posts[0].Post.parent_id; //<==
	var _this = this; //need to remember this, because in each method this means actual object from collection we iterate through
	$(this.posts).each(function(k, v){
		if($("#"+v.Post.parent_id).find("ul").length == 0){
			if($("#"+v.Post.parent_id).find("div.reply").length == 0){
				_this.createReplyDiv().appendTo("#"+v.Post.parent_id);
			}
	        $("
", {class: "posts children"}).appendTo("#"+v.Post.parent_id);
		}
	     $("
", {
	    	  id: v.Post.id,
	    	  innerHTML: "
"+v.Post.message+"

"
	    	  ,
	    	  class: "post child"
	     }).
	     append(_this.createReplyDiv()).
	     appendTo("#"+v.Post.parent_id+">ul");
	     if(v.Post.id>_this.lastId){ //<==
	    	 _this.lastId = v.Post.id;
	     }
	});
	return this;
};

Now I want to get data from get_new action, but my thread object have no idea where to get it from. Let's allow to pass endpoint url to constructor.

//webroot/js/thread.js
(function(window, document, udefined){
	window.Thread = function(_posts, _updateEndpoint) {//<==
		this.posts = _posts;
		this.rootId = false;
		this.lastId = false;
		this.updateEndpoint = _updateEndpoint; //<==
		this.extendJQuery();
		return this;
	};

})(window, document);

update Thread object creation:

//views/layouts/default.ctp
		$(document).ready(function(){
			if(!window.posts) return false;
			window.thread = new Thread(
				posts,
				"<?php echo $html->url(
							array(
							'controller'=>'posts',
							'action'=>'get_new')
				);?>"
			).createThread();
			console.log(thread);
		});

and create update() method. It should get JSON with new posts, and in case of either success or time-out Thread.update() should be called again:

//webroot/js/thread.js
Thread.prototype.update = function(){
	if(!this.updateEndpoint || !this.rootId || !this.lastId){
		alert("Thread corrupted");
		return false;
	}
	_this = this;
	$.ajax({
		url: this.updateEndpoint +"/"+ this.rootId+ "/" + this.lastId,
		dataType: 'json',
		timeout: 5000,
		success: function(){
			_this.update();
		},
		error: function(){
			_this.update();
		}
	});
	return true;
}

bug #1

I've found a bug after adding post with id=10 to the thread. It appears that I was storing lastId - the biggest id but in... dictionary order (check in JS: "10">"9" => false). Please patch last if statement in Thread.addPost() like that:

//...
		if(parseInt(v.Post.id)>_this.lastId){
			_this.lastId = parseInt(v.Post.id);
		}
}

Call newly created method in Thread.createThread():

Thread.prototype.createThread = function(){
	var _this = this;
	if(this.posts.length <1){
		return this;
	}
	this.rootId = this.lastId = posts[0].Post.parent_id;
	$(this.posts).each(function(k, v){
		if($("#"+v.Post.parent_id).find("ul").length == 0){
			if($("#"+v.Post.parent_id).find("div.reply").length == 0){
				_this.createReplyDiv().appendTo("#"+v.Post.parent_id);
			}
        	$("
", {class: "posts children"}).appendTo("#"+v.Post.parent_id);
		}

		$("
", {
			id: v.Post.id,
			innerHTML: "
"+v.Post.message+"

",
			class: "post child"
		}).
		append(_this.createReplyDiv()).
		appendTo("#"+v.Post.parent_id+">ul");
		if(parseInt(v.Post.id)>_this.lastId){
		 _this.lastId = parseInt(v.Post.id);
		}
	});
	this.update(); //<==
	return this;
}

You can check now if it's trying to get new data again and again. Try to add new post in other browser and see what happens with request...
As You can see - there's ok response but from now on every request is getting the same response, and the thread isn't updated. We'll fix that now. First extract the method that creates post elements from createThread method - we will reuse it...

Thread.createThread should look like that:

Thread.prototype.createThread = function(){
	if(this.posts.length <1){
		return this;
	}
	this.rootId = this.lastId = posts[0].Post.parent_id;
	var _this = this; //need to remember this, because in each method this means actual object from collection we iterate through
	$(this.posts).each(function(k, v){
		_this.addPost(v.Post.id, v.Post.parent_id, v.Post.message); //<==
	});
	this.update();
	return this;
};

and our new method Thread.addPost:

Thread.prototype.addPost = function(id, parentId, message){
	if($("#"+parentId).find("ul").length == 0){
		if($("#"+parentId).find("div.reply").length == 0){
			this.createReplyDiv().appendTo("#"+parentId);
		}
        $("
", {class: "posts children"}).appendTo("#"+parentId);
	}
     $("
", {
    	  id: id,
    	  innerHTML: "
"+message+"

"
    	  ,
    	  class: "post child"
     }).
     append(this.createReplyDiv()).
     appendTo("#"+parentId+">ul");
     if(id>this.lastId){
    	 this.lastId = id;
     }
}

bug #2

I encountered even more important bug - we caused a memory leak in our server (just wait long enough with get_new requests running) - after xhr time-out the script is not terminating.
I added a simple counter to get_new method:

//controllers/posts.php
	function get_new($rootId, $lastMessageId){
		//...
		$counter = 2; //<==
		while(empty($posts)){
			$posts = $this->Post->find(
				"all",
				array(/*...*/)
			);
			if($counter>5){ //<==
				break; //<==
			}else{ //<==
				$counter += 2; //<==
			} //<==
			if(empty($posts)){
				sleep(2); // sleep for two seconds
			}
		}
		$this->set("posts", $posts);
		$this->render("get_new", '');
	}

Why is it incremented by two? It's because there's 2 seconds sleep, so I'm checking if the script slept for at least 5 seconds altogether (5 seconds is the timeout of ajax request).

To finish - call extracted method in success callback:

//webroot/js/thread.js
Thread.prototype.update = function(){
	if(!this.updateEndpoint || !this.rootId || !this.lastId){
		alert("Thread corrupted");
		return false;
	}
	_this = this;
	$.ajax({
		url: this.updateEndpoint +"/"+ this.rootId+ "/" + this.lastId,
		dataType: 'json',
		timeout: 5000,
		success: function(data){ //<==
			$(data).each(function(k,v){
				_this.addPost(v.Post.id, v.Post.parent_id, v.Post.message); //<==
			});
			_this.update();
		},
		error: function(){
			_this.update();
		}
	});
	return true;
}

That's all. Of course with longPooling (and soon with web sockets) you can implement some more cool stuff. You can display information about somebody typing a reply right now in some particular place.

There are some details to be polished, maybe newly added post should attract attention (blink?), but it's not the case of this tutorial.

I hope you enjoyed it, please let me know what you think about it.

Dlatego pod każdym elementem li.post utwórzmy div’a, którym będzie konterem dla formularza odpowiedzi. Znajdź w thread.js linie odpowiedzialne za tworzenie elementów li zawierających posty i dodaj html z div’em do parametru innerHTML:

//app/webroot/js/thread.js
$("
", {
	    	  id: v.Post.id,
	    	  innerHTML: "
"+v.Post.message+"

" +
	    	  			 "
" //<---
	    	  ,
	 class: "post child"
	 }).
	 appendto("#"+v.post.parent_id+">ul");

Przyda się teraz nieco css’ów. Kontener powinien zajmować nieco więcej miejsca (żeby łatwiej było w niego kliknąć) oraz po najechaniu na niego myszką powinien zmienić kolor, sugerując użytkownikowi, że może tam kliknąć. Podlinkuj nowy plik css do layoutu:

//app/views/layouts/default.ctp
echo $this->Html->css('cake.generic');
echo $this->Html->css('thread'); //<-add this
echo $this->Javascript->link(array("thread"));

a następnie stwórz plik thread.css z taką zawartością:

/* app/webroot/css/thread.css */
div.reply {
	height: 5px;
	cursor: text;
}
div.reply:hover{
	background-color: #8EAFEB;
}

Tak to powinno wyglądać teraz:

Bardziej spostrzegawczy zauważyli od razu, że miejsce pod pierwszą wypowiedzią w wątku nie zachowuje się tak jak powinno, poprawmy nieco thread.js:

if($("#"+v.Post.parent_id).find("ul").length == 0){
	if($("#"+v.Post.parent_id).find("div.reply").length == 0){
		$("
", {class: "reply"}).appendTo("#"+v.Post.parent_id);
	}
	$("
", {class: "posts children"}).appendTo("#"+v.Post.parent_id);
}

Teraz pojawiło nam się odrobinę redundancji w kodzie – dwa miejsca, gdzie jest tworzony element div.reply. Naprawmy to. Usuniemy dodawanie stringa

<div class='reply'/>

i zastąpimy go tworzeniem elementu DOM przy pomocy jQuery, a następnie wyekstrahujemy motodę, która to robi. Ostatecznie kod powinien wyglądać tak:

(function(window, document, udefined){
	window.Thread = function(_posts) {
		this.posts = _posts;
		return this;
	};
})(window, document);

Thread.prototype.createReplyDiv = function(){
	return $("
", {class: "reply"});
}

Thread.prototype.createThread = function(){
	if(this.posts.length <1){
		return this;
	}
	var _this = this; //* patrz poniżej
	$(this.posts).each(function(k, v){
		if($("#"+v.Post.parent_id).find("ul").length == 0){
			if($("#"+v.Post.parent_id).find("div.reply").length == 0){
				_this.createReplyDiv().appendTo("#"+v.Post.parent_id);
			}
	        $("
", {class: "posts children"}).appendTo("#"+v.Post.parent_id);
		}
	     $("
", {
	    	  id: v.Post.id,
	    	  innerHTML: "
"+v.Post.message+"

"
	    	  ,
	    	  class: "post child"
	     }).
	     append(_this.createReplyDiv()).
	     appendTo("#"+v.Post.parent_id+">ul");
	});
	return this;
}

(*)Jeśli zastanawiasz się po co zapamiętujemy `this` w zmiennej `_this` śpieszę z wyjaśnieniem. W kodzie chcemy wywołać, wyodrębnioną dopiero co, metodę createReplyDiv. Niestety w anonimowej funkcji, która jest przekazana do metody each(), `this` wskazuje już na konkretny element z kolekcji po której ów each() iteruje. Musimy zapamiętać “starą” referencję `this` (czyli obiekt klasy Thread).

I was encouraged by good response on my first tutorial, so started to work on another. Unfortunately I didn’t finish it before my vacation, so I almost lost track of what I was doing. So I decided to ship it to you in parts, so by doing every part before publishing I’ll be back on track, and find more mistakes, so hopefully it will be error-free. Enjoy.

What’s long pooling

Long pooling is one of the method that mimics “server push” behavior on stateless HTTP protocol (which is based on “server pull” principle) . Even though there are web sockets coming, I think it’s a good idea to get familiar with that kind of technique.

We’ll try to create just a bit of simple idea. Combination of chat and bulletin board, where You can post Your messages and can see other users messages appearing in “real time”.

We’ll do it with cakePHP on the server side and http://jquery.com/ on the client side. I assume You are a little bit familiar with that tools – I wouldn’t explain how to configure database connection in cakePHP etc.

The only features on this system are

• creating new discussion
• replying in a discussion without reloading a page
• getting users to see other people replies without reloading the page

on top of that we’ll keep in mind that we are on small budget, so we want our application to be as light for the server as possible (to do that we’ll push as much work to client side as we can).

Preparing project

Let’s get last stable version of cake to get started fast:

$ git clone http://github.com/cakephp/cakephp.git longPolling

Then let’s create a database for our discussions

CREATE TABLE `posts` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `parent_id` int(11) DEFAULT NULL,
  `user_id` int(11) DEFAULT NULL,
  `lft` int(11) DEFAULT NULL,
  `rght` int(11) DEFAULT NULL,
  `message` text COLLATE utf8_unicode_ci NOT NULL,
  `modified` datetime NOT NULL,
  UNIQUE KEY `id` (`id`),
  KEY `parent_id` (`parent_id`),
  KEY `lft` (`lft`),
  KEY `rght` (`rght`),
  KEY `user_id` (`user_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci

As You can see, we’ll use “Nested set model” which is implemented by Treebehavior. For maximum simplicity discussions don’t have topics and so, and to start discussion one should just post first message outside of any discussion.

Let’s bake model, controller and views for CRUD – this will be a foundation we’ll be working on. Just don’t mind validation and associations, neither admin routing – it’s not crucial to the topic. Add Tree behavior to Post model.

Cleanup

Now, we have some mess in our code already. `add` and `edit` views duplicate themselves, so I’ll remove `add` view and force PostsController::add() to render `edit` view:

//posts_controller.php
	function add() {
		if (!empty($this->data)) {
			$this->Post->create();
			if ($this->Post->save($this->data)) {
				$this->Session->setFlash(__('The post has been saved', true));
				$this->redirect(array('action' => 'index'));
			} else {
				$this->Session->setFlash(__('The post could not be saved. Please, try again.', true));
			}
		}
		$this->render("edit");
	}

and, just to make it not look silly – surround code that generates “delete” link with one if statement:

		<?php if(!empty($this->data["Post"]["id"])): ?>
			<li>Html->link(__('Delete', true), array('action' => 'delete', $this->Form->value('Post.id')), null, sprintf(__('Are you sure you want to delete # %s?', true), $this->Form->value('Post.id'))); ?>

		<?php endif; ?>

To finally polish it – remove user_id, lft, rght, modified fields from the form (because there will be automatically filled).

Oh! I almost forgot, to be able to pick some of the existing topics as parent for message you are adding – create that method in PostsController and call it in add and edit actions:

//posts_controller.php
function _getParentPosts(){
	$this->set('parents', $this->Post->find("list"));
}

Now create at least one discussion, so we can start working on some stuff. If it’s not fun for You just run this query:

INSERT INTO `posts` VALUES (1,NULL,NULL,1,8,'first message in the topic.','0000-00-00 00:00:00'),
(2,1,NULL,2,5,'my very first reply to the very first message!','0000-00-00 00:00:00'),
(3,1,NULL,6,7,'I just have some opinion about first message, and will share it with you... soon.','0000-00-00 00:00:00'),
(4,2,NULL,3,4,'I think you shouldn\'t make off-topics here','0000-00-00 00:00:00');

Now we’re up and running, and ready for the fun stuff.

controllers/module/module_things_controller.php
class ModuleThingsController extends AppController {
}
models/module/module_thing.php
class ModuleThing extends AppModel{
}

(Moduły uznałbym za coś pośredniego między kupą kontrolerów, a pluginami. Nie wymagają mocniejszego rozdzielenia zależności między kontrolerami w przeciwieństwie do pluginów, dla których jest to dobrą praktyką. Z drugiej strony wprowadzają nieco porządku w plikach źródłowych)

Od razu rzuca się w oczy fakt powtarzania nazwy modułu w katalogu i nazwie pliku (oraz w definicji klasy). Wynika to po pierwsze z konieczności jednoznacznego nazywania klas w ramach jednego projektu. Po drugie, jeśli istnieją dwa pliki od tej samej nazwie i definicji klasy (ale jeden w podkatalogu) to domyślnie będzie używany ten z katalogu głównego.

Tak czy siak warto wprowadzić nieco porządku do swoich projektów. Można to zrobić nawet z marszu – po prostu przenieść pliki do podkatalogów (jednak należy pamiętać o tym co może się wydarzać, gdy przez przypadek zdefiniujemy dwa kontrolery o takiej samej nazwie w różnych podkatalogach.)

Niestety w widokach nie udało mi się jeszcze w ten sposób wykorzystać podkatalogów. Dlatego w naszym przykładzie widoki należy umieścić w

/views/module_things/

Jednak już w ramach tego katalogu można zadbać o większy porządek:
/views/module_things/forms/add_edit_form.ctp
i explicite wywoływać dany widok:

class ModuleThingsController extends AppController {
 //...
 function add(){
   //...
   $this->render("forms/add_edit_form");
 }
}

Przydatne, jeśli potrzebujesz zdefiniowany łańcuch w którym podmieniasz tylko niektóre fragmenty:

$wiadomosc = ":name ma :pet";
echo String::insert(
   $wiadomosc,
   array(
      "name"=>"Ala",
      "pet" => "Kota"
   )
); // Ala ma Kota

Z pewnością uprości to Twój kod, jeśli znikną z niego wszystkie str_replace itp.

Polecam też resztę klasy String i innych w cake/lib – często okazują się przydatne.

I don’t mind that, but don’t want to leave You without any help. So I’ll leave a road mark for You:
Feature rich, customizable comments plugin

When You have this pluggin up and running in Your app – drop in back to me and read about how to make cool web 2.0 dashboard view and learn some of jQuery features.

Good luck!

Jednak mimo, że osobiście nie mam nic do zaoferowania w tej kwestii – mogę pozostawić drogowskaz dla wszystkich poszukujących:
Plugin komentarzy cakePHP

Jak już podepniecie ten mechanizm w swoich systemach – wpadnijcie znów do mnie i poczytajcie o tym jak stworzyć fajny widok zbiorczy web 2.0 i poznać przy okazji możliwości jQuery.

Powodzenia!

Can You tell which of two methods in baked controller are almost identical? If not – check out which two views are even more similar. It’s not much of a riddle if You read title of this post again, though. That’s right.

Lets look at views first (in this example we have Thing model wit one field called ‘name’):

// app/views/things/add.ctp
<div class="things form">
<?php echo $this->Form->create('Thing');?>
   <fieldset>
      <legend>
         <?php printf(__('Add %s', true), __('Thing', true)); ?>
      </legend>
   <?php
      echo $this->Form->input('name');
   ?>
      </fieldset>
<?php echo $this->Form->end(__('Submit', true));?>
</div>
<div class="actions">
   <h3><?php __('Actions'); ?></h3>
   <ul>
      <li>
         <?php echo $this->Html->link(
            sprintf(
               __('List %s', true),
               __('Things', true)
            ),
            array('action' => 'index')
         );?>
      </li>
   </ul>
</div>

// app/views/things/edit.ctp
<div class="things form">
<?php echo $this->Form->create('Thing');?>
   <fieldset>
      <legend>
         <?php printf(__('Edit %s', true), __('Thing', true)); ?>
      </legend>
   <?php
      echo $this->Form->input('id');
      echo $this->Form->input('name');
   ?>
   </fieldset>
<?php echo $this->Form->end(__('Submit', true));?>
</div>
<div class="actions">
   <h3><?php __('Actions'); ?></h3>
   <ul>
      <li>
         <?php echo $this->Html->link(
            __('Delete', true),
            array('action' => 'delete', $this->Form->value('Thing.id')),
            null,
            sprintf(
               __('Are you sure you want to delete # %s?', true),
               $this->Form->value('Thing.id')
            )
         ); ?>
      </li>
      <li>
         <?php echo $this->Html->link(
            sprintf(__('List %s', true), __('Things', true)),
            array('action' => 'index')
         );?>
      </li>
</ul>
</div>

They differ in 3 line (of 16). If there’s a change in model (ie. adding one field) – It’s needed to edit two files. That’s stupid.
Lets take a look at methods:

// app/controllers/things_controller.ctp
function add() {
   if (!empty($this->data)) {
      $this->Thing->create();
      if ($this->Thing->save($this->data)) {
         $this->Session->setFlash(__('The thing has been saved', true));
         $this->redirect(array('action' => 'index'));
      } else {
         $this->Session->setFlash(
            __('The thing could not be saved. Please, try again.', true)
         );
      }
   }
}

function edit($id = null) {
   if (!$id && empty($this->data)) {
      $this->Session->setFlash(__('Invalid thing', true));
      $this->redirect(array('action' => 'index'));
   }
   if (!empty($this->data)) {
      if ($this->Thing->save($this->data)) {
         $this->Session->setFlash(__('The thing has been saved', true));
         $this->redirect(array('action' => 'index'));
      } else {
         $this->Session->setFlash(
            __('The thing could not be saved. Please, try again.', true)
         );
      }
   }
   if (empty($this->data)) {
      $this->data = $this->Thing->read(null, $id);
   }
}

It’s clear that edit() metdod encloses add() method body. There would be no much change if You just paste add() method into second if statement, wouldn’t it?

We’ll fix it with few tricks. We need to know how $this->Thing->create() exactly works. It forces adding of a new element into DB (because save() method works as ‘update’ or ‘create’ and it depends on current model state). But if You don’t pass any parameters to create() method the only thing it does is cleaning $this->data and $this->id (‘this’ means model Thing in current context).
There’s no way that $this->Thing->data contains any junk while executed, so it’s safe to drop this line – it will still work (is it?! – spoiler).
Now whole method body is identical with code block in edit method. Lets drop add() method and it’s view. Alter old links pointing at /things/add to /things/edit/ (without param).
Lets try out how does it work right now?

Based on version – 1.2 will crush, 1.3 shows “Invalid thing” alert. I’ll focus on 1.3 version (as far as I remember changing method signature from edit($id) to edit($id=null) should get You back on track in 1.2).

From now on we can assume that when there’s no id in url – it means that someone want to add new Thing, so it’s ok to delete this if statement:

// app/controllers/things_controller.php
		if (!$id && empty($this->data)) {
			$this->Session->setFlash(__('Invalid thing', true));
			$this->redirect(array('action' => 'index'));
		}

Now we can add new Things through edit() form- everything works ok now.
It’s good to polish this view, though. “edit” header look silly while adding new Thing… so delete button.

pimp up Your legend tag:

// app/views/things/edit.ctp
 		<legend>
 		   <?php printf(
 		      (!is_null($this->data["Thing"]["id"])?__('Edit %s', true): __('Add %s', true)),
 		      __('Thing', true));
 		   ?>
 		 </legend>

and surround first li element in if block:

// app/views/things/edit.ctp
<?php if(!is_null($this->data["Thing"]["id"])): ?>
   <li>
      <?php echo $this->Html->link(
         __('Delete', true),
         array('action' => 'delete', $this->Form->value('Thing.id')),
         null,
         sprintf(
            __('Are you sure you want to delete # %s?', true),
            $this->Form->value('Thing.id')
         )
      ); ?>
   </li>
<?php endif; ?>

That’s it.

Removing $this->Thing->create() not so secure?
I said that after deleting this line nothing bad will happen.
It’s true, but only if You make all the changes explained in this post. If You just remove $this->Thing->create() You’ll get an security issue. Someone could send prepared post request to this address with field named “data[Thing][id]” and edit an element through add action.
If you heavily depends on ACL authorisation, and one group of users can add Things, and other can edit them – member of the first group can raise his privileges by well prepared post request.
I think it’s rather rare situation. If You are interested in fixing this – please comment this post.