Archive | fevereiro 2011

Autocomplete do jQuery UI com PHP

Olá!!!

Bom… depois de muito suor, bateção de cabeça na minha mesa, muitos xingamentos ao meu computador (que não tinha nada a ver ‘coitado’…)… eu consegui implementar no meu sistema o autocomplete “bunitinho”, “lindinho” e “tchuco-tchuco” do jQuery UI!!!! \o/

Bom.. pra início de conversa, favor baixar aqui a versão mais recente do jQuery UI. Descompacta na sua pastinha de trabalho e mãos à obra.

Vamos precisar de dois arquivos: ‘formulario.php’ e ‘buscaDados.php’. O primeiro é onde estará o seu formulário que conterá seu campo autocomplete e o segundo, logicamente, é onde estará a pesquisa dos dados que retornarão para o autocomplete.

Antes de mais nada, em ‘formulario.php’ vamos fazer as chamadas para os arquivos .css e .js que vamos precisar para implementar o autocomplete. Todos se encontram no arquivo que você baixou e descompactou na pastinha de trabalho. No meu caso estou trabalhando com a versão 1.8.9 do jQuery UI que me trouxe a versão 1.4.4 do jQuery.

<script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js">
</script><link type="text/css" href="jquery-ui-1.8.9.custom/css/redmond/jquery-ui-1.8.9.custom.css" rel="stylesheet"/>

Só para lembrar, estas linhas são inseridas dentro das tag’s  <head>e </head>.  =)

Também no arquivo ‘formulario.php’, vamor criar um <form> </form> e dentro dele criar um textfield que vamos nomear de ‘auto’ para facilitar o processo:

<input type="text" id="auto" />

A propriedade ‘id’ do campo é o que permite a referenciação no jQuery. Agora vamos criar uma função ready para criar o campo autocomplete; esta função vem logo abaixo da referenciação dos arquivos .css e .js.

<script type="text/javascript">
  $(document).ready(function() 	{
    $('#auto').autocomplete(
    {
      source: "buscaDados.php",
      minLength: 2
    });
  });
</script>

Viu!? Estou dizendo que o campo ‘auto’ é um campo ‘autocomplete’ e que os dados virão do source ‘buscaDados.php’. Com a propriedade ‘minLength’ eu estou dizendo que o autocomplete será ativado quando eu tiver um mínimo de 2 caracteres digitados no meu campo ‘auto’.

E para finalizar, no arquivo ‘buscaDados.php’ você vai fazer a conexão com o banco de dados e retornar as informações da tabela que você quer:

$hostname = "localhost";
$user = "root";
$pass = "";
$basedados = "teste";
$connect = mysql_connect($hostname,$user,$pass) or die ("Impossível estabelecer conexão com o servidor de banco de dados");
mysql_select_db($basedados) or die ("Impossivel estabelecer conexão com o banco de dados");

//busca valor digitado no campo autocomplete "$_GET['term']
$text = mysql_real_escape_string($_GET['term']);
$query = "SELECT * FROM tabela WHERE campoTexto LIKE '%$text%' ORDER BY campoTexto ASC";
$result = mysql_query($query);
//formata o resultado para JSON
$json = '[';
$first = true;
while($row = mysql_fetch_array($result))
{
  if (!$first) { $json .=  ','; } else { $first = false; }
  $json .= '{"value":"'.utf8_encode($row['campoTexto']).'"}';
}
$json .= ']';

echo $json;

Então… é assim que se cria um campo autocomplete como o da imagem abaixo, que é um print de um pedaço do meu sistema:

Você pode formatar o autocomplete de várias formas, é possível personalizar um tema ou escolher um pré-existente para baixar aqui.

O exemplo que eu me guiei para conseguir aprender a usar esta funcionalidade foi o do burnmind.com que também disponibiliza o fonte para download e um demo. Obs.: o demo deles está configurado para que o autocomplete apareça a partir da 3ª letra digitada (experimente digitar “col”).

Espero ter ajudado! Qualquer coisa é só comentar aew…. =)

Até mais.

Anúncios

Erros na criação de Foreign Key’s no MySql

MySqlOlha eu aqui de novo…. continuando o meu projeto de remodelagem do banco de dados do sistema que irei desenvolver daqui pra frente me deparei com vários erros ao tentar criar minhas foreign keys… então vou listá-los aqui para explicar tudo que descobri e quem sabe ajudar você colega desenvolvedor que está batendo cabeça num erro não muito claro que o MySql te oferece… tem horas que chega a cansar a beleza…

Erro 1:


alter table [tabela1] add constraint fk_tabela1_x_tabela2 foreign key (idTabela1) references tabela2 (idTabela2) on delete restrict on update cascade;
[Err] 1005 - Can't create table 'basedados.#sql-11e0_4f' (errno: 150)

Solução 1:

ERRNO 150… o que é!?

No meu caso o problema foi o seguinte… não sei porque cargas d’água que em algumas tabelas os campos que seriam a minha foreign key estava com o UNSIGNED ligado. E o campo referenciado (primary key da outra tabela) logicamente não era UNSIGNED.

Para quem não sabe, o UNSIGNED define que um campo inteiro ou numérico não pode receber valores negativos (somente valores sem sinal).

Ou seja, ao criar integridade referencial, os campos envolvidos devem ser UNSIGNED ou SIGNED. Se forem divergentes o MySql retornará o ERRNO 150.

Para acertar, eu tive que fazer um modify na coluna que seria minha FK em cada tabela para retirar o UNSIGNED:

#se a definição do seu campo é algo mais ou menos assim
campo1 int(6) UNSIGNED NOT NULL AUTO_INCREMENT;

#repita-o somente tirando o UNSIGNED
alter table tabela1 modify campo1 int(6) NOT NULL AUTO_INCREMENT;

Erro 2:


[SQL] alter table [tabela1] add constraint fk_tabela1_x_tabela2 foreign key (idTabela1) references tabela2 (idTabela2) on delete restrict on update cascade;
[Err] 1452 - Cannot add or update a child row: a foreign key constraint fails (`basedados`.`#sql-11e0_4f`, CONSTRAINT `fk_tabela1_x_tabela2` FOREIGN KEY (`idTabela1`) REFERENCES `tabela2` (`idTabela2`) ON UPDATE CASCADE)

Solução 2:

Que que ocorre nesse ERR 1452?!?!?!

Esse erro ocorre não só na criação da foreign key, mas pode acontecer também quando a foreign key já existir na tabela e você estiver atualizando ou inserindo dados nesta tabela. No caso, esse erro está indicando que constraint foreign key falhou…. Mas como falhou!?!?

Muito simples… a informação do campo da foreign key não é encontrada na tabela2 (a tabela que possui a primary key referenciada). No meu caso, como estou criando as relações em uma base que já existe e já possui informações cadastradas, significa dizer que na tabela1 que eu estou tentando criar a foreign key eu tenho uma ou mais linhas que estão referenciando uma chave primária que não existe na minha ‘tabela2’ (a tabela referenciada).

Se a foreign key já existir e você receber esse erro, significará que você está editando ou inserindo um registro e passando um valor para o campo da foreign key que não possui um registro na tabela2 referenciada (tabela da primary key).

Na minha situação, como minhas tabelas já possuem registros e eu não posso simplesmente limpar a tabela toda, tive que fazer sql’s que deletassem os registros que estão referenciando informações inválidas. Ficou assim mais ou menos:


delete a from tabela1 a left join tabela2 b on b.idTabela2 = a.idTabela2 where b.idTabela2 is null;

Ou seja, faço um select com left join nas minhas duas tabelas e deleto as linhas que vierem com as informações da tabela2 nulas.

Erro 3:

[SQL]
alter table orcamento add constraint fk_orcamento_x_seguradora foreign key (codSeguradora) references seguradora (codSeguradora) on delete restrict on update cascade;
[Err] 1005 - Can't create table 'tiseg.#sql-11e0_4f' (errno: 121)

Solução 3:

E o ERRNO 121??

Mais simples ainda… a sua foreign key já existe!!! Pule para seu próximo comando…. =)

Foreign Key’s no MySql

Hoje passei por uma situação interessante. Estou fazendo a remodelagem de um banco de dados MySql de um sistema que estou trabalhando atualmente. Como o banco é um pouco grande (cerca de 100 tabelas) e está muito mal organizado e sem referenciação nenhuma, resolvi começar pela organização das foreign keys para melhor visualizar o meu modelo relacional.

Porém caí na situação em que eu rodava um comando de criação de foreign key e ela simplesmente não aparecia na minha tabela referente do bd. Pesquiso dali, pesquiso daqui, descobri uma coisa muito interessante:

O ‘problema’ estava acontecendo por causa dos tipos das minhas tabelas…. Isso mesmo, as tabelas do MySql podem ser de vários tipos. Aqui no meu MySql 5.0.51a tenho os seguintes tipos: Memory, MyISAM, Blackhole, MRG_MYISAM, CSV, ARCHIVE e InnoDB.

Por padrão, tabelas criadas no MySql e sem definição do tipo, são criadas sob o tipo MyISAM. Este tipo de tabela não permite a utilização de transações e nem de foreign keys.

Este era o meu problema, as minhas tabelas eram do tipo MyISAM. Então eu tive que convertê-las para o tipo INNODB que me permite gerar foreign keys. Para alterar fiz o seguinte sql:

alter table [tabela] type = INNODB;

O tipo InnoDB prove ao MySql um mecanismo de armazenamento seguro com transações com commit, rollback e recuperação em caso de falhas. O bloqueio é realizado a nível de registro (row locking) ao contrário do MyISAM que faz o bloqueio por tabela (table locking). Isto faz aumentar a performance e concorrência de multi usuários [ele foi desenvolvido para obter o máximo de performance ao processar grande volume de dados].

O InnoDB armazena as tabelas e índices em um espaço de tabela, o qual pode consistir de vários arquivos, diferentemente do MyISAM onde cada tabela é armazenada em um arquivo separado.

Além disso tudo, ainda é o primeiro tipo que suporta restrições Foreign Key…. \o/

Utilizando git + github | Parte 2

Continuando…

Fiquei pensando… e quando já houver um repositório no github?? Como eu faço pra baixar os fontes pro meu pc!? Aprendi… segue abaixo:

cd c:/projetos
mkdir novo_projeto
cd novo_projeto
git clone git://github.com/usuarios/repositorio.git

E tchamrammmmm….. todos os fontes do repositório estão no seu computador… =)

Que que aconteceu aqui!?

Linha 1: me posicionei no diretório onde criarei a cópia do repositório
Linha 2: criei a pasta que armazenará o repositório
Linha 3: entrei na pasta que acabei de criar
Linha 4: clonei um repositório do github para a minha pasta

Enquanto estive pesquisando mais, encontrei dois links muito bacanas com várias informações sobre comandos git: Link1 e Link2 .

Utilizando git + github | Parte 1

Mais uma de meus estudos…  Como estou em uma fase de mudança de emprego e estou indo pra um lugar onde acredito que poderei dar mais sugestões de metodologias de trabalho, tenho estudado várias formas de melhorar não só a produtividade, mas a organização da forma de trabalho também. Sendo assim, após estudar e começar a aplicar a Técnica Pomodoro, começei um estudo sobre a utilização de git e github.

Após ler este post1 e este post2, depois de quebrar a cabeça um pouquinho eu consegui finalmente instalar o git no meu windows e fazer o “push” dos meus arquivos de um projeto para um repositório do github.

Só sei que realmente, enquanto eu estudava a forma de utilização do git, eu me lembrei muito do meu ex-professor @klayson…. Juro que pensei em todo instante: “Porque não me dediquei mais às aulas de TETI*!!!”…rsrsrs… enfimmm… #desabafo

Bom…. após realizar o seu cadastro em github.com você pode criar um novo repositório aqui. Um repositório é o local onde ficam armazenados os arquivos do projeto, versões e históricos. É neste local que os desenvolvedores podem submeter as suas alterações para o projeto. Qual é a idéia!?…. A idéia é a de que você tenha um repositório uma central de arquivos e que a sua equipe de desenvolvedores possam manter os fontes do sistema de uma maneira mais organizada, onde cada desenvolvedor pode e DEVE informar as alterações realizadas no código a cada commit realizado.

Só clareando a idéia aqui, um commit é um ponto histórico no desenvolvimento do projeto, e esses pontos podem ser recuperados quando necessário.

Como utilizo windows, tive que baixar esse git aqui que nada mais é do que um git para windows…. =) … Após baixar e instalar, abra o GitBash, o terminal git onde você fará todos os comandos.

Configurando sua identidade:

A primeira coisa a se fazer é configurar a sua identidade, que será utilizada cada vez que você realizar um commit. Então digite essas linhas no seu terminal, somente trocando para as suas informações…. #logico

git config --global user.name "Nome do Usuário"
git config --global user.email "emailusuario@gmail.com"

Após ter feito esta configuração, é possível verificá-las com o comando:

git config --list

Conectando o git ao github:

Para conectar o seu git ao github é necessário gerar uma chave pública e informá-la na sua conta do github. No terminal execute o seguinte comando:

ssh-keygen -t -rsa

Se estiver no windows, vá em ‘c:/usuários/seu_usuario/.ssh’ e abra o arquivo ‘id_rsa.pub’ no bloco de notas e copie todo o seu conteúdo.
Acesse a configuração de conta no github, vá em ‘SSH Public Keys’ clique em ‘Add another public key’ e cole a informação copiada no campo ‘Key’.
Depois digite no seu terminal o comando abaixo, se estiver tudo certo você receberá uma mensagem de boas vindas:

ssh git@github.com

Enviando um repositório para o github:

Agora vem a parte mais bacana, para enviar um projeto para o repositório que criamos lá em cima você deve seguir estes passos no bash: se posicionar no diretório do projeto, inicializar o git, adicionar os arquivos do projeto para o repositório e enviá-los. Simples assim… \o/

cd c:/caminho/pastadoprojeto
git init
git add --all
git commit -m 'Teste de github'
git remote add origin git@github.com:usuario/repositoriogithub.git
git push origin master

Explicando:
Se diferente de mim você se lembra do que estudou nas aulas de Linux ou se já conhece mesmo, deve identificar que o comando ‘cd’  (linha 1) te leva para um diretório. Estou levando em consideração que você já tenha o seu projeto que deseja enviar para o github… assim como era o meu caso… existem inúmeros post por aí que levam em consideração que você ainda vai criar este diretório (mkdir ok?) … =)

Linha 1 : estou me posicionando no diretório em que estão os fontes do meu projeto
Linha 2: inicialização do git
Linha 3: como já estou posicionada no diretório de trabalho e já tenho todo o meu projeto nesta pasta, vou adicionar ao meu repositório todos os meus fontes [–all] (arquivos e pastas)
Linha 4: o comando commit deve ser feito toda vez que você deseja salvar as informações adicionadas ou modificadas no repositório. O [-m] me permite adicionar uma mensagem explicativa deste commit.
Linha 5: estou informando o caminho do meu repositório no github
Linha 6: estou efetivando o envio

Por enquanto já sabemos enviar um projeto para o github e consequentemente realizar atualizações nesse repositório [add e commit]…. Conforme eu for aprendendo o resto vou postando… Até mais… 😉

* TETI = Tópicos Especiais em Tecnologia da Informação – matéria da UVV em que o professor “escolhe” o que vai dar… se você conhece o Klayson já deve imaginar que estudamos Linux né!? Pois é… foi isso mesmo…rs 😉

Técnica Pomodoro

Entãooo….

Fazendo algumas pesquisas na internet há algum tempo atrás sobre metodologias para aumentar a produtividade, eu encontrei várias citações sobre uma tal de Técnica Pomodoro. Que “diacho” seria isso!? … Bom… pra variar, naquele momento eu não tive a oportunidade de estudar melhor sobre o assunto, porque a maioria dos posts, textos e manuais que encontrei estavam em inglês…. (#fail !!! sei muito pouco de inglês…)… Então há umas duas semanas atrás eu voltei a procurar sobre o assunto, já que estou tendo um tempinho meio que sobrando … =)

A situação não mudou muito, maioria dos posts e textos em inglês, porém da minha última pesquisa até o momento já surgiram alguns posts em português… \o/ …. e estão bacanas…. podem ler… Post 1 e Post 2 (este saiu do ar).

Se tú tão bom no inglês, é bacana que leia também as informações no site da própria técnica: http://www.pomodorotechnique.com/. Lá você pode baixar o Manual Original da Técnica Pomodoro (Inglês), que nada mais é do que a explicação completíssima de pra que, porque e como usar a técnica.

Vamos a alguns itens da técnica:

  • É uma metodologia de gerenciamento do tempo que pode ser aplicada para qualquer tipo de tarefa (estudar, trabalhar, organizar algo, rever algo, enfim…).
  • Tem como objetivo melhorar o foco e a concentração reduzindo interrupções; aumentar a motivação; reforçar a determinação; tornar o tempo um aliado, etc.
  • É necessário ter alguns materiais, sendo eles: lápis, papel, borracha e um timer de cozinha… 🙂
  • Com os materiais citados acima, faremos um “inventário de atividades” (onde todas as atividades que precisam ser feitas são listadas); uma “lista de ‘A fazer hoje’” (onde as atividades que deverão ser feitas naquele determinado dia são listadas) e uma “folha de registros” (onde as tarefas realizadas são listadas contendo suas informações de número de pomodoros gastos, descrição e data da realização).

Peraí?! Número de pomodoros gastos?!!?!?

Sim sim… =) …. Um Pomodoro é constituído de uma divisão de tempo de 30 minutos, geralmente.

Ao passo que você tem em mãos uma lista de tarefas a fazer num dia, você estima quanto tempo mais ou menos acha que gastaria para realizar cada tarefa da lista (medida em Pomodoros de 30 minutos). Ao fazer essa definição para toda a sua lista, você inicia o seu dia de trabalho. Marque 25 minutos e concentre-se em fazer a primeira atividade selecionada da lista. Após passados os 25 minutos faça um descanso de 5 minutos. Pronto! Passou-se UM Pomodoro. Marque um X ao lado da tarefa que está sendo feita, e você saberá que já gastou um Pomodoro realizando-a. Depois é só seguir este mesmo ciclo para finalizar a tarefa iniciada e dar continuidade às demais.

A cada grupo de 4 (quatro) Pomodoros, faça um descanso maior.. cerca de 15 a 30 minutos.

No resumo bem resumido, a técnica é mais ou menos isso. Maiores informações para os que não são experts em inglês estão no Manual da Técnica Pomodoro (traduzido Português) . Isso aí…. após alguns dias trabalhando em cima disso, eu fiz uma versãozinha traduzida do manual!! =) Apenas uma observação: você se lembra que no início do post eu disse que sei muito pouco de inglês?!?!? Entãoo… isso é VERDADE!… o que eu fiz foi baixar o manual em inglês e passá-lo no Google Translate…. Juro que tentei melhorar o texto para ficar entendível…. mas não sei se está muito bom… inclusive se você quiser ajudar, fique a vontade para fazer suas melhorias e me mandar… =)

Durante o meu estudo sobre a técnica encontrei algumas ferramentas que podem auxiliar no tratamento das listas de atividades a fazer (Remember the Milk) e para simular o timer de cozinha (Pomodairo).

Acho que é isso… quem tiver algo a incrementar, perguntar ou qualquer outra coisa… a área de comentários está logo ali… =)

%d blogueiros gostam disto: