Just Another Underworker

Muitas vezes temos pastas e arquivos que não queremos que entrem nos nossos repositórios ou, quando fazemos builds ou usamos linguagens compiladas não queremos dar commit do resultado sempre. Por exemplo, imagine-se trabalhando num projeto opensource e que você gera pacotes semanais, ou ainda está num projeto escrito em, por exemplo, java, e não quer que a compilação entre no controle de versões.

Nesses casos, você quer que os arquivos .zip, .tar.gz e .bz2 gerados pelo build, ou ainda os arquivos .class gerados da compilação, não apareçam na saída do seu comando de status (svn st).

O Subversion apresenta uma funcionalidade para evitar que esses arquivos sujem a sua saída ao pedir o status da sua cópia local. É a propriedade svn:ignore.

Para usá-la basta fazer da seguinte forma:

$ svn propedit diretorio

Isso irá abrir o editor configurado para o seu ambiente. Agora basta digitar os padrões que devem ser ignorados, por exemplo:

tmp/logs
tmp/cache
*.class
*.zip
*.tar.gz
*.bz2

Salve o arquivo e dê comit pasta:

$ svn ci diretorio

Pronto. Agora sempre que você tiver uma mudança no diretório ‘diretorio’ essa mudança não irá aparecer na saída do ’svn st’.

Uma dica rápida e simples, mas de grande ajuda (principalmente para mim =D).

Quem mora em BH ou redondezas e tiver interesse em conhecer melhor os recursos do PHP já pode se alegrar. Uma nova iniciativa está trazendo para os mineiros treinamentos de qualidade, focados no uso profissional do PHP.

É a PHPrime (www.phprime.com.br) que inicia seus trabalhos oferecendo os cursos PHP Essentials e PHP Zend Certified Engineer e que promete abrir outros cursos em breve, como o PHP Advanced, com o objetivo de ensinar conceitos, técnicas e tecnologias avançadas, voltadas para profissionais que já conhecem PHP.

Quem tiver interesse as inscrições já estão abertas. É só entrar no site e se matricular. Aqueles que tiverem interesse em outros cursos ou quiserem opinar sobre quais tópicos gostariam de ver no PHP Advanced, basta entrar em contato com a escola, no link contato do site.

Sempre vejo algumas pessoas reclamarem da dificuldade de se conseguir instalar o DBDesigner com acesso ao MySQL no Linux. Recentemente, buscando uma forma mais fácil de manter minhas tabelas sincronizadas com os meus DERs, eu resolvi dedicar um tempo à solução desse problema. Felizmente eu consegui e resolvi postar aqui como fazer.

Para os passos abaixo considero que você já tenha o DBDesigner instalado e funcionando, apenas sem conexão com o banco. Se não é o seu caso, pode conferir como instalar por este tutorial no Viva o Linux.

Então vamos lá. Faça o download da biblioteca libsqlmda pelo endereço: http://crlab.com/dbx/dbxmda.tar.gz

Descompacte tudo e mova o arquivo libsqlmda.so.3.10 para a pasta /usr/lib. Crie o Link de /usr/lib/libsqlmda.so.3.10 para /usr/lib/libsqlmda.so .

Entre na pasta do DBDesigner e copie o arquivo Linuxlib/libmysqlclient.so.10.* para /usr/lib. Crie o link de /usr/lib/libmysqlclient.so.10.* para /usr/lib/libmysqlclient.so.10 .

$ wget http://crlab.com/dbx/dbxmda.tar.gz
$ tar zxvf dbxmda.tar.gz
$ cd DbxMda
$ sudo cp libsqlmda.so.3.10 /usr/lib
$ sudo ln -s /usr/lib/libsqlmda.so.3.10 /usr/lib/libsqlmda.so

[Update]
A instrução para o link de libsqlmda.so.* estava errada.
[/Update]

Abra o DBDesigner, vá no menu “Database > Connect To Database“. Crie uma nova conexão com o Banco, no botão “New Database Connection“. Preencha os dados da aba General da forma que for necessário e na aba Advanced modifique os seguintes dados:

GetDriverFunc: getSQLDriverMySQL (Note que já está lá o nome getSQLDriverMYSQL, que deve ser trocado para getSQLDriverMySQL, com y minúsculo)

LibraryName: libsqlmda.so

VendorLib: libmysqlclient.so.10

Após isso, faça a conexão e seja feliz para sempre, ou morda-se de inveja por estar com menos sorte que eu e pegar mais um pouco de problemas para conectar…. :p

Acho que não será muito problema. Testei no Ubuntu Feisty Fawn com MySQL 5 e rodou muito bem, com direito a sincronização do banco com seu modelo e a engenharia reversa do seu banco.

Acho que com isso chegamos ao fim. Com essa funcionalidade “a mais” o DBDesigner torna-se uma ferramenta ainda mais interessante para se trabalhar com banco de dados. Enquanto não chega o MySQL WorkBench, o DBDesigner continuará a ser uma mão na roda

Espero que a dica tenha servido para outras pessoas também conseguirem essa tão sonhada proeza.

Até a próxima.

Todos sabemos bem quem é que nos ajuda quando estamos em apuros com PHP (isso mesmo, quem, a personificação da utilidade). Pois bem, o nosso bom e velho manual (quase) nunca nos deixa na mão, não é verdade? Acho que todos concordamos com isso. Mas ainda assim vou me arriscar a apontar um pequeno problema nele.

Conheço alguns programadores que ainda não sabem fazer uma leitura básica num texto escrito em inglês. Uns dizem que não têm tempo, outros que dá pra se virar com o que há em português sobre programação. Afinal de contas o nosso bom e velho manual tem boa parte de seu conteúdo traduzida para o português. Pra quê aprender inglês?

Nosso querido manual é realmente traduzido para o português, apesar de a documentação de algumas funções ainda não terem sido traduzidas ainda. Mas faço uma pergunta: se por um acaso não pudermos confiar nem no manual do PHP, será que poderemos confiar em algo mais?

Não estou dizendo, de forma alguma, que o manual é uma fonte não confiável para os programadores. Só queria apresentar uma parte dele que não é tão confiável para os brasileiros, principalmente aqueles que não sabem nada de inglês (fui um destes por um tempo também :} )

O motivo deste post? Veja:

http://br2.php.net/manual/pt_BR/function.socket-bind.php

http://br2.php.net/manual/en/function.socket-bind.php

Entende agora o que eu quero dizer ao apontar o manual em português como “confiável mas nem tanto”?

O primeiro link (tradução do manual para português BR) traz um aviso medonho dizendo para usar a função por sua própria conta pois sua estrutura ou nome podem ser mudados ou o suporte a ela descontinuado. Agora quando você visita o manual em inglês vê que não há nada disso. Isso ocorre provavelmente porque a versão do manual em inglês é bem mais nova que a versão traduzida para o português.

Esse problema de desatualização não acontece somente em funções remotas como a socket_bind(). Veja aqui o manual da função file():

http://br2.php.net/manual/pt_BR/function.file.php

agora em inglês:

http://br2.php.net/manual/en/function.file.php

Novamente isso não é, de forma alguma, uma crítica ao manual (que ainda é a fonte mais confiável de informações) nem aos tradutores (que devem estar atolados de trabalho e não tiveram tempo de atualizar algumas funções). Quero apenas alertá-los, principalmente os mais novos na linguagem, que quando você viu o manual da função em português uma coisa, testou e não funcionou como esperado, dê uma lida nela em inglês para ver se não há nenhuma diferença. Pode estar nessa diferença o detalhe que irá evitar de fazê-lo gastar todo o seu dia procurando uma solução.

Vou mandar os links para o pessoal do manual do PHP, que agora conta com um novo editor: Philip Olson

Tenho certeza de que corrigirão o mais rápido possível.

Até a próxima.

Por mais simples que seja, uma aplicação sempre terá uma mensagem dinâmica a passar para o usuário. Sempre damos um jeitinho de mandar a mensagem de formas diferentes em arquivos diferentes. Isso torna o sistema de erros da nossa aplicação uma coisa inextensível e de manutenção custosa.

O CakePHP, apesar de toda sua facilidade, não possui um sistema integrado para exibição de mensagens para o usuário. Para isso criei um pequeno sistema de mensagens amigáveis, composto por um componente, um helper e um elemento. Chamo-o de FriendlyError.

Com o FriendlyError você poderá mostrar três níveis de erro para o seu usuário: message, warning e error (mensagem, aviso e erro, respectivamente).

Seu uso consiste da definição, no controle, da mensagem a ser exibida, e sua captura para exibição, na view.

Exemplo:
controle

1
2
3
4
5

try{
    // ...
} catch (Exception $e) {
    $this->FriendlyError->setError($e->getMessage);
}

view

setError($this); ?>

e teremos um resultado assim:

1
2
3
4

<p class="errors">&nbsp;</p>
 
<p class="friendly_error">
    Ocorreu um erro no sistema!

Para a utilização do FriendlyError você deve fazer alguns ajustes na sua aplicação. O primeiro é indicar o uso do componente e do helper nas variáveis $components e $helpers do seu controller. O segundo é copiar o elemento friendly_error.ctp para a sua pasta de componentes. Se precisar, pode modificar a forma como o elemento exibe os erros.

Feito isso, basta utilizar o componente no seu controller. Os métodos possíveis são setMessage(), setError() e setWarning(). Eles não são declarados no componente, mas são interpretados pelo método __call() (PHP5).

Se precisar de mostrar outras mensagens você poderá utilizar os outros argumentos ($error_array, $warning_array e $message_array) do método setError() do helper para poder exibir suas mensagens junto com as mensagens que estavam na sessão.

O FriendlyError é compatível apenas com o PHP5.

Download: http://charlesschaefer.net/projetos/cakephp/friendly_error/files/friendly_error.tar.gz

O mundo dos programadores é cercado de palavrinhas estranhas desde o começo da carreira. Para programadores autodidatas (como eu), muitas vezes, entender estas palavrinhas é uma tarefa um tanto quanto difícil, principalmente quando não se acha uma definição para elas no seu dicionário, que nunca o havia deixado na mão (até então) :p

Ultimamente tem-se falado muito em utilização de frameworks. Frameworks para desenvolvimento em PHP, em javascript e para ambos ao mesmo tempo; frameworks baseados no padrão MVC, frameworks com ORM (Object Relational Mapping – essa faz parte de um outro mundo obscuro na programação: as siglas), Active Record, etc.

Mas afinal de contas, o que diabos é um framework?

Joãozinho: Hum, ham, é um conjunto de classes que resolvem cada uma um problema específico, evitando assim que o programador escreva muitos códigos?

Aeh Joãozinho, finalmente algo que presta hein!

Mas hoje em dia, um framework tornou-se mais do que uma série de classes que nos ajudam a resolver um problema específico. Um framework hoje, mais do que ajudar a resolver problemas, dita uma forma específica, padronizada de resolvê-los.

Assim o programador pode se desligar das decisões de como uma determinada tarefa será aplicada, como realizar o acesso aos dados, de que forma exibir estes dados, etc. Tudo o que o programador precisa saber é como resolver o seu problema. O resto, é por conta do framework.

Nos dias atuais, onde o tempo controla a vida das pessoas e das organizações, qualquer que seja a ajuda para poupar tempo será bem-vinda. Não poderia ser diferente com os frameworks. Desenvolvedores de todas as partes do mundo discutem diariamente sobre o uso de frameworks, qual usar, por quê usar, por quê não, quando usar, etc. E estas discussões estão muitas vezes pautadas nas reuniões para implementação de projetos dentro das empresas também.

As organizações precisam poupar o máximo de tempo, mesmo que para isso, as vezes, seja necessário se perder um pouco do desempenho dos sistemas que se desenvolve. E é essa a tarefa de um bom framework: poupar o máximo de tempo possível de um programador.

Mas nem sempre os frameworks irão realizar com sucesso a sua árdua tarefa, principalmente se forem mal escolhidos para determinado projeto. É necessário saber com precisão o que será necessário desenvolver para saber a quem/que recorrer. Além disso é necessário saber também as peculiaridades de cada framework disponível no mercado (ou pelo menos os mais famosos) para conseguir prever os problemas oriundos da adoção deste framework, conseguindo assim subsídios suficientes para a escolha do melhor.

Para nós, programadores PHP, há uma infinidade de frameworks. Eu, particularmente, recomendo os baseados no Ruby on Rails, framework para Ruby que “revolucionou” a forma como se programa para a web. O que mais me agrada é o CakePHP, mas temos ainda o Symphony, o Zend Framework, o PHP on TRAX, entre outros facilmente encontráveis pelo google.

Para você que precisa decidir qual deles escolher, este link pode ser de grande ajuda: http://www.phpit.net/article/ten-different-php-frameworks/.

Ele possui uma tabela comparativa com as características de alguns frameworks para PHP disponíveis no mercado.

Até a próxima!

Com o advento do ajax nós programadores estamos sempre utilizando essa ferramenta para um adicional em nossos sistemas. Seja carregando dados para preencher um dropdown, seja para carregar uma página inteira, as requisições assíncronas, junto do bom e velho “carregando…” viraram rotina em nossas vidas.

Tendo toda essa importância é claro que a JQuery não poderia não ter um módulo só para ajax. Vamos entender um pouco desse módulo da JQuery, e saber como incrementar nossa produtividade com ele.

Para essa nossa brincadeirinha vamos imaginar uma situação em que precisamos pegar as cidades de um estado escolhido por nosso usuário. Essa é uma situação bastante comum nos dias atuais. O usuário escolhe um Estado, nós carregamos as cidades daquele estado, e o usuário, então, escolhe a cidade.

Para isso, vou fazer um arquivo em php bem simples. Como o server-side foge do escopo deste post, vou colocar as cidades e estados como arrays mesmo.

Sendo assim, teremos 4 arquivos, a saber: ajax.js (nosso javascript), css.css (folha de estilos do nosso html), get_xml.php (gerador do xml no servidor) e teste.html (o nosso html para o exemplo).

Para realizar nossa chamada assíncrona com JQuery temos várias opções, que variam conforme sua necessidade. Vamos a algumas:

$.ajax( prop ) -> essa recebe um hash como parametro. Devemos especificar no hash as propriedades necessárias à requisição.

Ex.:

1
2
3
4
5
6
7
8
9
10
11
12
13

$.ajax(
    {
        type: “post”,
        url: “teste.php”,
        data: “parametro1=valor1&parametro2=valor2”,
        success: function (result){
            alert(“resultado da requisição: “+result);
        },
        error: function (){
            alert(“não deu para completar a requisição”);
        }
    }
);

$.get( url, params, callback) -> uma chamada padrão do tipo “GET”. Params é um hash com pares atributo/valor para passar como parâmetros da url.

$.post( url, params, callback) -> como $.get(), mas este faz uma requisição do tipo “POST”.

Bom, já sabemos como utilizar, agora vamos ao nosso pequeno exemplo.

Começemos pelo HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

 
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
 
    <script src="jquery.js" type="text/javascript"></script>
    <script src="ajax.js" type="text/javascript"></script>
<link href="css.css" type="text/css" rel="stylesheet" />
<p id="content">
<h3>Teste do ajax com jquery</h3>
<form name="form1" action="pega_valores.php">
        <fieldset>
          <legend>Escolha um estado abaixo:</legend>
          <label for="estado">Estado:</label>
<select name="estado">            <option selected="selected">Escolha um estado</option>            <option value="sp">São Paulo</option>            <option value="rj">Rio de Janeiro</option>            <option value="mg">Minas Gerais</option>          </select>
 
          <label for="cidade">Cidade:</label>
<select name="cidade">            <option selected="selected">Escolha uma cidade</option>          </select>
 
        </fieldset>
      </form>
<p id="loading" class="loading_hide">
        Carregando...

Este é uma página simples, com um formulário com dois dropdowns e um div que será nosso “carregando…”. Veja que não utilizamos nenhum evento dentro do html. Então estamos com lógica separada de conteúdo. Ótimo.

Vamos agora à nossa folha de estilos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* css.css */
 
fieldset {
    border: 1px solid green;
}
legend {
    color: #999;
}
 
#loading {
    background: red;
    color: white;
    font-weight: bolder;
    padding: 2px;
    position: absolute;
    left: 0;
    top: 0;
}
 
.loading_hide {
    display: none;
}

Aqui não tem muito segredo. Algumas cores, uma borda, e lá no final, a declaração que esconde o nosso “Carregando…”.

Vamos ver como ficou nosso arquivo de geração de xml no servidor, em php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

$arr_cidades = array(
    "sp" => array(
        "São Paulo",
        1 => "São Caetano",
        2 => "Santo Amaro",
        3 => "Santos"
    ),
    "rj" => array(
        1 => "Rio de Janeiro",
        2 => "Campos",
        3 => "Niterói"
    ),
    "mg" => array(
        1 => "Belo Horizonte",
        2 => "Contagem",
        3 => "Ouro preto",
        4 => "Diamantina",
        5 => "Poços de caldas"
    )
);
 
if (!isset($_GET['estado'])) {
    die("Erro, tente outra vez");
}
$str_estado = $_GET['estado'];
$arr_resultado_cidades = $arr_cidades[$str_estado];
header("Content-type: text/xml");
echo "";
echo "<estado val="" . $str_estado . "">";
 
foreach ($arr_resultado_cidades as $int_index =&gt; $str_cidade) {
    echo "<cidade cdg="" . $int_index . "">" . $str_cidade . "</cidade>";
}
 
echo "</estado>";
?&gt;

Aqui também nada demais. Talvez seja até simplório demais, mas como php não é a nossa intenção neste post, fiz assim mesmo, simplificado.

Agora o que realmente faz a coisa funcionar. Nosso arquivo javascript. O script está bem comentado, então acho que não teremos muitos problemas. Veja que nosso script tem menos de 50 linhas. Se acha muito, tente fazer isso no braço e verá como ficará.

Nosso script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

//ajax.jswindow.onload = start;
 
function start(){
    var form1 = $("form[@name=form1]");//nosso form
    var estados = form1.find("select[@name=estado]");//select dos estados
 
    //chama a função loadCities quando o valor do select é modificado
    $(estados[0]).change(
        function (){
            loadCities( this.value);
        }
     );
}
 
function loadCities( estado ){
    var url = "get_xml.php";
    $("#loading").show("slow");//mostra o carregando...
 
    //ajax em jquery, quando por get, use $.get(), quando por post, use $.post()
    $.get( url , {"estado": estado} , setCities);
    //os parametros são a url, os parametros da url, e a função callback.
    //Se vc não fornecer os parametros da url e o segundo parametro da função
    //for uma outra função, essa passa a ser a de callback.
    //veja http://jquery.com/docs/AJAXModule/
}
 
function setCities(xmlCidades){
    var cidades =$("form[@name=form1]").find("select[@name=cidade]");
    xml_cidades = $("estado", xmlCidades);
    cidades.empty();//tira os elementos 'antigos' do select
    var oldOption = $(document.createElement("option"));//option com o valor 'Escolha uma cidade'
    oldOption.append("Escolha uma cidade");//passamos o valor
    //inserimos o option antigo no select
    cidades.append(oldOption).change(
        function(){
            form1.submit();
        }
    );//na hora que escolher a cidade, dispara o submit do form. O poder do encadeamento.
    //colocamos as cidades no dropdown
    xml_cidades.find("cidade").each(
        function(){
            //graças ao encadeamento, criamos um elemento gastando apenas uma
            //linha (tudo bem, quebrada para melhorar a leitura).
            var nOption = $( document.createElement( "option" ) )
               .val( $( this ).attr( "cdg" ) )
               .append( this.childNodes[0].nodeValue );
 
            cidades.append(nOption);
        }
    );
    $("#loading").hide("slow");//esconde o carregando...
}

Simples, não?

Agora temos um dos processos mais utilizados hoje em dia, em apenas alguns minutos de códigos.

Então é isso, aproveite a biblioteca e crie outras brincadeiras, mas não esqueça de mostrar pra gente hein?

Até a próxima.

Dias atrás eu falei sobre a biblioteca JQuery. Hoje vou postar um exemplo bastante útil para a maioria de nós: o efeito hover em elementos que não o permitem com css puro.

Primeiramente, eu estou postando esse exemplo influenciado pela função aplicarHover(), postada pelo Jean Carlo no seu blog.

Mas mãos a obra.

Primeiro, vamos utilizar um html simples, só pra servir de referência. Queremos um efeito Hover em todas as div’s com a classe comments.

O HTML:

1
2
3
4

<h3 class="”comments_title”">
    comentário simples</h3>
<p class="”comments”">
    Este é apenas um comentário.

Temos então uma estrutura de comentários no HTML e queremos aplicar nesses comentários um efeito que faça trocar a cor de fundo, borda e fonte na hora que o mouse estiver sobre o elemento.

Vamos ao CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

h3.comments_title {
    color: #82A5CB;
}
 
.comments {
    border: 1px solid silver;
    background: #E6E6E6;
    color: #666;
}
 
.comments_hover {
    border: 1px solid #6E85AF !important;
    background: #B4D0F8 !important;
}

Acima temos as regras para os elementos ‘normais’ e os que estiverem sob a seta do mouse (comments_hover). Note o !important nas declarações do comments_hover. Isso é necessário, pois não vamos ‘trocar’ de classes, vamos apenas inserir e remover a classe hover, e como ela tem declarações já feitas antes, para evitar conflitos colocamos o !important.

Vamos agora ao javascript para nosso exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!--primeiro carregamos a biblioteca JQuery -->
 
<script src="jquery.latest.js" type="”text/javascript”"></script>
 
<!-- agora o código que vai fazer a troca de classes conforme a mudança de estado -->
<script type="”text/javascript”">
window.onload = inicia;function inicia(){
    $(“div.comments”).mouseover(
        function (){
            $(this).addClass(“comments_hover”);
        }
    ).mouseout(
        function (){
            $(this).removeClass(“comments_hover”);
        }
    );
}
</script>

Pronto! Só isso tudo! Simples ou não? E o melhor: divertido.

Se você quiser trabalhar diferente, pode criar uma função que receba como parâmetros os tipos de elementos e a classe do estado hover, e fazer a mudança a partir daí. Por exemplo:

1
2
3
4
5
6
7
8
9
10
11

function setHover(elementTp, classHover){
    $(elementTp).mouseover(
        function (){
            $(this).addClass(classHover);
        }
    ).mouseout(
        function (){
            $(this).removeClass(classHover);
        }
    );
}

então você pode usar pra fazer o efeito hover onde quiser. Veja:

1

setHover(“quote.livros”, “livros_hover”);

Isso vai fazer acontecer a mudança no estado over em todos os elementos quote com classe livros, adicionando/tirando a classe livros_hover

Legal, não?

Vemos que aos poucos tarefas antes bastante complexas ou demoradas ficam fáceis e as já fáceis e ágeis ficam ainda mais fáceis e ágeis com JQuery.

É isso então, vamos ver mais alguns bons exemplos de diversão com javascript e a JQuery em breve.
Até lá.

Recentemente, quando entrei no mundo do ajax, tive contato com uma grande quantidade de frameworks. Antes eu fazia tudo na mão, até porque não fazia muita coisa: era uma troca de classes, um evento onclick, etc. Nesse contato com diversos frameworks eu me encantei com o Prototype, que era utilizado por vários outros que eu havia conhecido (script.aculo.us, mooFx, Rico, etc).

Passei a usar o Prototype em meus programas. Mas com o passar do tempo eu fui notando uma deficiência na documentação dele. Nesse período conheci o motivo deste post: a biblioteca JQuery. De cara, eu já me apaixonei pelo fato de o site da JQuery ter muita coisa falando sobre como utilizar a biblioteca, e como a falta de documentação era minha decepção com o prototype, eu resolvi testar a JQuery. Por conta daquele teste eu estou utilizando JQuery até hoje em minhas aplicações.

Mas vamos ao que interessa: afinal de contas, o que é essa tal de JQuery?
Como o próprio criador sugere: “JQuery é um novo tipo de biblioteca javascript. Não é um framework enorme, ‘inflado’ que promete ser o melhor em AJAX – nem é apenas um jogo de melhorias complexas e desnecessárias – JQuery foi projetado para mudar a forma como você escreve em javascript.”

JQuery é uma biblioteca que considera que “programar em javascript precisa ser divertido”. E realmente proporciona diversão a quem utilizá-la. Escrever seus códigos em javascript, como já deve ter notado, é uma terefa repetitiva. Para todo elemento que vamos pegar escrevemos uma quantidade enorme (e desnecessária) de código. JQuery elimina essas tarefas repetitivas, simplificando ao máximo a programação em javascript.

Neste momento você deve estar se perguntando: “Ora Charles, mas prototype também faz isso. Por que preciso utilizar a JQuery?”. Pois peço só mais um pouco de paciência. Já entenderá o porquê. Mas já pra matar um pouco a curiosidade, vou lhe dar um pequeno exemplo, utilizando JQuery. Vamos pegar todos os elementos “div” com a classe ‘hiddenComments’, adicionar a eles a classe ’showedComments’, e então mostrá-los, devagar:

1

$(“div.hiddenComments”).addClass(“showedComments”).show(“slow”);

Simples, não? Vamos fazer com prototype?

1
2
3
4
5
6
7

$A(document.getElementsByClassName(“hiddenComments”)).each(
	function (div){
		Element.removeClassName( div, “hiddenComments”);
		Element.addClassName(div, “showedComments”);
		Element.show(div);
	}
);

Ainda simples, mas mais complicado não é?

Pois bem. Vamos adiante. Vou lhe explicar algumas vantagens da biblioteca JQuery, e, ao final, você terá subsídio suficiente para decidir entre ficar com prototype, que não é má escolha, e ficar com JQuery, que, na minha opinião, é a melhor escolha.

Sintaxe de seleção:
JQuery suporta a sintaxe de seleção de elementos utilizada pelas CSS de versão 1 a 3, e o básico da sintaxe XPath.

Tamanho:
JQuery tem aproximadamente 15Kb. Perfeita para aplicações que precisam utilizar pouca banda.

Compatibilidade:
JQuery é cross-browser, trabalha em, praticamente, todos os browsers atuais com suporte a javascript. São eles (os mais utilizados): Internet Explorer 5.5+, Firefox 1.0+, Safari 1.3+ e Opera 8.5+.
Outra compatibilidade muito importante: ela permite que você use o prototype também. Você só precisa incluir ele na página antes de incluir a JQuery.

Documentação:
JQuery tem uma documentação de sua API que é uma mão na roda. Muito boa. Completíssima. Você pode encontrá-la em http://jquery.com/api/. Essa é a documentação no formato texto, apesar de ser um dos formatos texto mais elegantes que já vi. Mas você também pode utilizar uma documentação auxiliar, a Visual JQuery (http://www.visualjquery.com/). É uma documentação visual, muito legal, e que quebra o galho na hora de procurar alguma coisa que você não sabe ao certo o que é. Além disso, o site ainda disponibiliza vários tutoriais e links para sites que ensinam a usar a biblioteca, além de um mapa gráfico dela.

Métodos encadeáveis:
Essa é uma grande vantagem de se trabalhar com JQuery. Todos os métodos da biblioteca retornam um objeto JQuery. Assim você pode encadear ações de forma a ter um código mais limpo. Por isso conseguimos, no exemplo acima, fazer tudo o que fizemos em apenas uma linha de código.

Plugins:
No site da biblioteca você poderá encontrar uma infinidade de plugins, bem como uma pequena explicação sobre como criar seu próprio plugin. Há plugins de todos os tipos. Exemplo disso é o JQuery Slideshow, o checkbox (que troca os checkboxes html por outros, muito mais bonitos), entre outros. Eu consegui contar (com a ajuda da própria biblioteca) 103 plugins, divididos entre as categorias “User Interface”, “JQuery Navigation”, “JQuery Forms” e “JQuery Extension”.

Humm! Muito legal, hein! Agora vamos brincar um pouco, por que ninguém é de ferro:

Vamos validar uns formulários?

Então pega ai:

O formulário:

1
2
3
4
5
6
7
8

<form>
	<label for="”nome”">Nome:</label>
<input id="”nome”" type="”text”" />
 
	<label for="”email”">E-mail:</label>
<input id="”email”" type="”text”" />
<input value="”enviar”" type="”submit”" />
</form>

A validação:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

//usamos a função $(), com sintaxe simples mesmo.
//usamos o encadeamento para já passar um onsubmit junto da seleção do elemento
$("form").submit(
	function(e){
		e.stopPropagation();
		e.preventDefault();
		if(validar(this) == false){
			this.submit();
		} else {
			return false;
		}
	}
);
 
function validar ( el ){
	//transformamos o elemento puro em objeto jquery
	el = $(el);
	//alert(el.find("input[@type=text]").size());
	//find procura o elemento fornecido dentro do objeto jquery. Aceita sintaxe xpath e css
	el.find("input[@type=text]").each(
		function (){
		        //this chega pra gente como objeto HTMLObject, temos
		        //que fazê-lo um objeto jquery
			var field = $(this);
		        if( field.val() == "") {
		            //com o encadeamento (concatenacao) podemos mudar
		            //a borda do campo vazio, e então
				//criar um span de erro depois dele.
				field.css({ border:"1px solid red" }) .
				    after("<span>Preenchimento obrigatório</span>");
				field.keyup(function(){
					$(this).css({border: "1px groove black"});
					$("span.error").remove();//destruímos
				});
				return false;
			}
		}
	);
	return true;
}

Pronto!
Um validador de formulários, feito em uns 5 minutos. E então?
Lógico que isso também pode ser feito rápido assim com prototype também, mas já é um exemplo para você ver como funciona a JQuery no mundo real.

Com Prototype, javascript fica fácil. Com JQuery, javascript além de fácil, fica divertido.

Gostou? Então segue alguns links para você se divertir:
JQuery - http://jquery.com
JQuery blog – http://jquery.com/blog
Visual JQuery – http://visualjquery.com/
Tutoriais JQuery - http://jquery.com/docs/Tutorials/
Documentação JQuery - http://jquery.com/docs/
O criador da JQuery - http://ejohn.org/

Muitos desenvolvedores que começam a programar em php trabalham sob a plataforma do tio Bill, e pelas ferramentas que eles têm nessa plataforma, como IDEs, editores, manipuladores de BD, entre outros, elem preferem não migrar para o GNU/Linux.

Não estou aqui para criticar essas pessoas, pois eu também comecei a programar no windows, já que não tinha acesso a internet com o linux, e nem tinha certeza de que conseguiria configurar as coisas no linux como eu conseguia no windows.

Mas uma vez que eu passei a programar no GNU/Linux, e tenho muito a agradecer por isso, eu mantive meu nível de produção muito mais elevado, isso devido, principalmente, à velocidade que eu tenho disponível no GNU/Linux, e à qualidade e infinidade das ferramentas de desenvolvimento disponíveis.

Vou tentar apresentar algumas dessas ferramentas, e espero com isso, mostrar que é possível sim migrar para o GNU/Linux e manter sua produtividade, e, com uns dias de experiência, atá dobrá-la, principalmente no que tange ao desenvolvimento em PHP. Para isso vou utilizar a distribuição Ubuntu (por estar “na moda” nesse momento), o php5, o apache2 e alguns editores.

**Como não é o escopo desse post, eu não vou descrever os passos para a instalação do Ubuntu, e vou considerar que você o tenha istalado e pronto pra conectar-se à internet.

Preparando o ambiente:
Para que possamos trabalhar e testar nossos scripts no GNU/Linux, teremos que instalar nossos velhos conhecidos: PHP, Apache e MySQL.
Para isso, edite o seu source-list, para poder baixar o trio infernal.
Você vai, basicamente, descomentar (retirar o símbolo # da frente) as linhas onde há algo como deb http:// … e algo como deb-src http:// …
feito isso, abra o synaptic (Sistema > Administração > Gerenciador de Pacotes Synaptic), digite sua senha, e clique no botão Recarregar.
Quando o processo tiver terminado, clique na área onde se vê vários pacotes e digite apache. O sistema de busca vai marcar o apache, então você marca a caixa de seleção para instalá-lo. Repita o mesmo para o PHP5, e o MySQL (para o mysql você deve marcar o mysql-server, e o mysql-client). Ao marcar esses pacotes, será aberta uma janela indicando que ele depende de outros programas e perguntando se você deseja que eles sejam instalados. Clique em marcar e eles serão instalados (se você clicar em cancelar, o pacote não será instalado).

Esses tres programas nós já conhecemos, mas precisamos de muitas outras coisas no windows para conseguir rodar nossos scripts, como as extensões do php. Para isso você deve procurar no synaptic pelas suas extensões, que seguem o padrão PHP{versão}-{nome da extensão} (ex.: php5-mysql)
Eu aconselho instalar, basicamente, as extensões php5-gd, php5-mysql, php5-cli, e php5-curl.

Como muitas vezes nós precisamos visualizar nossos dados no MySQL e nem sempre queremos fazê-lo no phpmyadmin, eu aconselho a instalação do mysql-query-browser.

Se você trabalha com o PEAR, você também pode instalá-lo pelo synaptic marcando o php-pear.

Bom, temos nosso servidor pronto para ser instalado. Mas nem só de servidor vive um programador. Precisamos também arrumar uns editores bons.

Eu aconselho instalar e testar os seguintes:

> Quanta
> Bluefish
> Scite
> gPHPEdit
> Eclipse (esse você terá que procurar a extensão php-eclipse e instalá-la na unha)
> Emacs (você pode utilizá-lo no modo texto, ou instalar o xemacs, para usar no modo gráfico)

Existem algumas extensões para o quanta que o deixam com cara de IDE, com direito a debugger e tudo mais, mas não me lembro onde achar essa extensão e eu nunca utilizei também, então não posso falar se é boa.

Para aqueles que utilizam diagramas, temos as melhores ferramentas no GNU/Linux:
> Dia (gera diagramas de tudo quanto é jeito. Tem uns tipos que eu nem sabia que existia)
> Umbrello (esse é só para UML, mas é ótimo também, e gera o código automaticamente para php, javascript, C++, JAVA, entre outras)
** Aconselho instalar os dois, pois são relativamente pequenos, e você pode testar e utilizar o que preferir

Àqueles que adoram ficar horas testando suas expressões regulares no browser, o visual-regexp não serve nem de perto, pois os testes ficam muito rápidos. Agora, quem acha esse tipo de teste no browser um saco (como eu) pode instalar. Ele é uma ótima ferramenta para teste de ER.

Quem precisa editar HTML/XHTML também, temos ferramentas ótimas para edição do código, e uma ferramenta muito boa para edição gráfica, mas que ainda deixa a desejar para os fanáticos por DremWeaver. Eu, particularmente, não vejo diferença, já que ambos geram um código embolado, a não ser que você trabalhe com tabelas, pois ai os dois geram um código incrivelemente limpo. Uso a edição gráfica só para agilizar o processo de criação de formulários, o resto, eu faço na mão. Mas vamos aos programas:

> Bluefish (denovo)
> Quanta (denovo) - também tem edição gráfica, mas não é tão boa quanto a do NVU
> Scite (denovo)
> NVU (nesse você pode editar graficamente suas páginas

Quem trabalha com php-GTK, pode usar o Glade para criar suas interfaces.

Quem precisa criar layouts para suas páginas, tem uma ótima opção no gimp, um ótimo prgrama de edição de fotos, mas que pode servir (e serve, com glória) para designers gráficos e para os web-devel-designers.

Bom, então vamos revisar o que temos marcado até agora:
Servidor:
> Apache2 + dependências
> PHP5 + dependências + extensões gd, mysql, cli e curl
> MySQL + dependências + mysql-query-browser
Edição:
> Bluefish
> Scite
> Quanta
> XEmacs
> gPHPEdit
> NVU
Diagramas:
> Umbrello
> Dia
Expressões Regulares:
> Visual-regexp
Edição Gráfica:
> Gimp
Criação de interfaces para GTK:
> Glade

Tendo todos eles marcados, você pode clicar Aplicar e esperar terminar de baixar e instalar.
Atenção: Na hora de instalar qualquer programa no Ubuntu, coloque o CD de instalação no driver, para instalar do cd os programas que estiverem neles, economizando o uso da internet (alguns programas estão no cd e na internet).

Após o processo ter se acabado, você pode abrir o firefox e acessar o localhost.

Para ter a certeza de que está tudo funcionando, crie um arquivo, de preferência com um dos editores que você instalou, com o seguinte:

e salve em /var/www com o nome de phpinfo.php

acesse esse documento pelo firefox, abrindo o endereço http://localhost/phpinfo.php
Se aparecer a página de configuração do php, está tudo instalado e funcionando perfeitamente. Agora é você testar seus editores e passar a utilizar o seu preferido.

Quem usava um IDE mais avançado no windows, e sentir falta, pode utilizar o ZendStudio (pago), o NuSphere PHPEd (pago) ou o PHPEclipse (plugin para o eclipse, de graça).
São todos muito bons (eu prefiro o ZendStudio) e possuem recursos avançados, como code-complete, debug, entre outras.

Chegamos ao fim do post, e você está com água na boca para experimentar essas delícias todas agora? O que está esperando? Ahh! Não tem o cd do Ubuntu? Você pode baixá-lo no seguinte endereço:
http://www.Ubuntu.com/download/
Sua internet é muito lenta? Você pode pedir o cd pelo site do Ubuntu, mas ele demora de 3 a 4 meses para chegar aqui no Brasil. O endereço é:
https://shipit.Ubuntu.com/
Não gosta do Ubuntu? Você pode baixar o cd do Debian-CDD-BR. É uma distro Debian regional, criada por uma galera de brasucas que têm a manha. O endereço é:
http://cdd.Debian-br.org/project/
Você pode baixar ou pedir o cd pelo telefone de um dos representantes do Debian-CDD-BR na sua cidade. Alguns deles podem cobrar o frete e o valor do cd virgem, mas vale a pena.
Você pode seguir os mesmos passos que eu descrevi para o Ubuntu. O único problema é que a lista de repositórios que vem por default no Debian é menor que a do Ubuntu, mas você vai conseguir baixar os programas acima do mesmo jeito.

Se você mora na grande BH (MG) pode me pedir os cds pelo e-mail charlesschaefer[em]gmail[ponto]com

Até a próxima.