Fala pessoal!

Estou desenvolvendo um servidor PHP para a engine Unity3d. A ideia é ter serviços básicos como login, registro de acessos, highscores dentre outras coisas. Mas o conceito se expande no momento em que teremos uma aplicação web para análise e manutenção dos registros gerados pela Unity.

Em função dessa situação toda me motivei a criar de uma vez um serviço web que tenha um suporte alto a dispositivos móveis. Na verdade isto está muito relacionado com o fato de que meus futuros jogos rodarem em dispositivos móveis, graças a Unity3d.

Por fim, após alguns estudos, defini que não precisaria de algo muito complexo, mas que gostaria de utilizar orientação a objetos e dentro do possível utilizaria bibliotecas prontas.

Optei por não utilizar um framework 100% pronto para manter uma independência do código, pois servidores de jogos tem uma tendência muito alta a sofrerem ataques hackers, nesse caso, quanto mais “pessoal” o código, mas difícil de quebrar. Obviamente, desde que observe algumas técnicas básicas de segurança.

Em função destes objetivos fiz algumas escolhas.

• PHP: é a linguagem que trabalho normalmente e conheço a fundo, 100% relacionada com aplicações webs.
• DOM: bibliotecas padrão do php que tem objetivo principal de criar conteúdo html utilizando orientação a objetos.
• PDO: Camada de abstração de conexão a base de dados.
• Jquery e JqueryMobile : biblioteca javascript que garante o ótimo funcionando em diversos dispositivos móveis.

Obs.: A questão da implementação direta com a Unity3D ficará para outro artigo.

DOM – Document Object Model:

Dom é uma forma definida de acessar/criar elementos HTML. A estrutura DOM foi criada e é mantida pela W3C. Basicamente é uma forma orientadas a objetos de manipulação de elementos html/xml.

Caso você queira saber um pouco mais sobre dom, ficadica http://pt.wikipedia.org/wiki/Modelo_de_Objeto_de_Documentos.

Diversas linguagens e frameworks implementam a especificação DOM, no caso o PHP também implementa.

A implementação do PHP é bultin, ou seja, não é necessário instalar nada para que seu código funcione.

A documentação pode ser encontrada em: http://php.net/dom.

Vamos a um exemplo prático:

$doc = new DOMDocument("1.0"); //cria o documento
$div = $doc->createElement("div"); //cria uma Div
$div->setAttribute('style', 'padding: 10px; background-color: red'); //adiciona um fundo vermelho a div
$div->appendChild( $doc->createTextNode('conteúdo da div'));  //colocamos um texto dentro da div
$span = $doc->createElement("span"); //criamos um span
$span->appendChild( $doc->createTextNode( 'conteúdo do span' ) ); //adicionamos um conteúdo ao span
$span->setAttribute('style', 'padding: 10px; background-color: blue'); //definimos o span com fundo azul
$div->appendChild($span); //adicionamos o span dentro da div
$doc->appendChild($div); //adicionamos a div ao elemento
echo $doc->saveHTML(); //efetuamos o output do html

O exemplo acima é bem simples, conforme comentado no código, nele criamos um documento Dom, criamos uma div e um span e atribuímos alguns estilos a ele. É obvio que esse não é um html válido, pois faltou toda a estrutura padrão do documento html, head, body e etc, mas é um exemplo válido.

Isto tudo é bem lega, mas na prática do dia a dia existe a tendência disso se tornar mais lento do que criar html direto.

É nesse ponto que entra a orientação a objetos.

class Div extends DomElement
{
    public function __construct($id, $element= NULL, $class = NULL )
    {
        parent::__construct('div');
        global $doc;
        $doc->appendChild($this);
        $this->setAttribute('id', $id );
        $this->appendChild($element);
        $this->setAttribute('class', $class );
    }
}

No exemplo cima criamos uma classe Div que extende um elemento DOM ( DomElement). Na prática fazer uma chamada de $doc->createElement(‘div’) ou efetuar um new DomElement(‘div’) da na mesma.

A única diferença é que no caso do new DomElement precisamos adicionar ele a um DomDocument, o que não é necessário no outro caso.

Com essa classe criada podemos criar uma div diretamente.

global $doc;
$doc = new DOMDocument("1.0");
$div2 = new Div('myDiv', $doc->createTextNode('conteúdo interno'), 'algumaClasse');
$div2->setAttribute('style', 'background-color: green');
echo $doc->saveHTML();

Isso torna a criação bem mais simples.

Nesse ponto poderíamos criar uma classe para cada tag html e após isso criar classes que agrupam funcionalidades. Como por exemplo uma classe Page que poderia fazer toda a criação de head, body, form criando toda a estrutura básica necessária para uma página.

Aqui começamos a ganhar produtividade.

PDO – PHP Data Object

PDO é uma camada de abstração de acesso a base de dados. Você pode fazer conexões com Mysql, Postgres, MSQL, SqLite e mais uma grande série de bancos.

http://net.tutsplus.com/tutorials/php/why-you-should-be-using-phps-pdo-for-database-access/

O artigo acima  ( em inglês) demonstra com clareza os motivos técnicos para usar PDO, com certeza vale a leitura, mas vou listar alguns aqui:

• Compatibilidade com diversos bancos
• Características contra sql injection.
• Integração total com PHP ( bultin)
• Tipos de retornos variados, inclusive classes próprias.

Brincando com PDO em 4 linhas:

$pdo = new Pdo('mysql:host=localhost;dbname=dbname', 'user', 'password'); //conecta no banco
$ret = $pdo->prepare( 'SELECT * from access LIMIT 1' ); //prepara o sql
$ret->execute( $args ); //executa
$dbData = $ret->fetchObject(); //retorna o sql como um objeto stdClass

Muito simples e efetivo.

Juntando tudo:

<?php
 
class Div extends DomElement
{
    public function __construct($id, $element= NULL, $class = NULL )
    {
        parent::__construct('div');
        global $doc;
        $doc->appendChild($this);
        $this->setAttribute('id', $id );
        $this->appendChild($element);
        $this->setAttribute('class', $class );
    }
}
 
//parte do pdo
$pdo = new Pdo('mysql:host=localhost;dbname=nome_do_banco', 'root', 'senha');
$ret = $pdo->prepare( 'SELECT * from access LIMIT 1' );
$ret->execute( $args );
$dbData = $ret->fetchObject();
 
global $doc;
//parte do dom
$doc = new DOMDocument("1.0");
$div = $doc->createElement("div");
$div->setAttribute('style', 'padding: 10px; background-color: red');
$div->appendChild( $doc->createTextNode('conteúdo da div'));
$span = $doc->createElement("span");
$span->appendChild( $doc->createTextNode( $dbData->useragent ) );
$span->setAttribute('style', 'padding: 10px; background-color: blue');
$div->appendChild($span);
 
$doc->appendChild($div);
 
$div2 = new Div('myDiv', $doc->createTextNode('conteúdo interno'), 'algumaClasse');
$div2->setAttribute('style', 'background-color: green');
 
echo $doc->saveHTML();
 
?>

O código acima é 100% válido, desde que você configure uma base com uma tabela chamada access.

Jquery Mobile

Como terceira ferramenta nesse projeto utilizaríamos a poderosa biblioteca Jquery Mobile.

http://jquerymobile.com/demos/1.2.0/

Com poucas linhas montamos uma bela interface web.

<div <strong>data-role="page"</strong>>
<div <strong>data-role="header"</strong>>
<h1>My Title</h1> </div>
<div <strong>data-role="content"</strong>>
<p>Hello world</p>
</div>
</div>

Utilizando atributos do tipo data  (data-role por exemplo) a biblioteca jQuery mobile identifica tudo que é necessário para a sua página, o legal é que caso o navegador mobile não suporte javascript tudo continua funcionando, de forma mais simples, mas continua.

Repare como os formulários e aplicações ficam  bonitos.

http://www.youtube.com/watch?v=fmytaHlxaOM

O video acima mostra um exemplo prático de um website feito com a tecnologia.

Conclusão:

No final utilizamos as nossas classe orientadas a objetos com DOM para gerar os nossos conteúdos html do jquery mobile.

Por fim temos segurança e abstração de banco de dados com PDO, temos html orientado a objetos com suporte a elementos complexos com DOM e temos conteúdo bonito e pronto para mobile com Jquery mobile.

Banco de dados, servidor e cliente. Tudo prontinho para por a mão na massa!

Valeu pessoal!