Vinícius Amaral em 5 janeiro 2009 
2 comentários
tags: DRY, framework, MVC, php, server-side, spaghetti
Olá pessoal!
Depois de muuuuuito tempo, volto ao batente… Peço desculpas, por tanto tempo sem blogar, mas realmente estou com muito trabalho e 2009 vai ser complicado… hehehe!
Mas venho aqui, compartilhar com vocês um grande presente que descobri para iniciar o ano com o pé direito.
O Rafael Marin e o Julio Greff desenvolveram e já publicaram o projeto Spaghetti*, que pode ser definido como um framework MVC para desenvolvimento de aplicações Web, escrito em PHP, totalmente open source, e que visa o estímulo ao desenvolvimento Web produtivo e divertido. Legal não?! 
Já estou começando a fazer meus primeiros testes com o Spaghetti* e já já pretendo desenvolver minhas próprias aplicações usando o mesmo. Ainda pretendo colaborar bastante com o projeto… já estou dando minhas sugestões de novas features para o Rafael e para o Julio, criando aplicações de exemplo, etc.
Alguns detalhes que me chamaram bastante atenção no Spaghetti* e me fizeram escolhe-lo:
- Design pattern MVC - pra mim, sem isso, não dá 
- Documentação bem detalhada, e em Português
- Sintaxe bastante semelhante ao CakePHP
- DRY - Don´t repeat yourself
- Helpers/Componentes - embora AINDA poucos, sei que futuramente teremos muito mais
Porém, o que mais me motivou a usá-lo e ajudar no projeto, foi ver como o Rafael e o Julio estão realmente animados e dispostos a “tocar o pau” e fazer de tudo para facilitar a vida do pessoal. Por isso, não fique preso! Usou o Spaghetti*? Achou algo complicado? Tem idéias de como facilitar? Sugestões de novas features? Achou algum problema? Reporte no TRAC do projeto, e ajude a Comunidade e o Projeto a crescerem.
Eles já até me falaram de algumas possíveis novas features para a próxima versão, tais como: integração com linha de commando para criação de controllers, models, views… singularização de fields nos Models, scaffolding, mais helpers, etc…
Então é isso, pessoal! Parabéns para o pessoal do Spaghetti* e que vocês tenham um 2009 de bastante sucesso!!!
Vinícius Amaral em 28 novembro 2008 sem comentários
tags: off
Já fiz minha parte, ajude também! Muitas famílias precisam da sua contribuição!
Vinícius Amaral em 12 novembro 2008 3 comentários
tags: client-side, javascript, jquery, php, server-side
Outra feature que se tornou bastante comum nos Sistemas de hoje em dia é a opção de o usuário entrar com um determinado CEP e apartir deste valor os campos referentes ao endereço serem automaticamente completados.
E isto não é nem um pouco difícil de se implementar, tendo em vista que já temos pronto um Webservice que faz a conexão com o Sistema dos Correios, obtem os dados e devolve pra gente em um formato de fácil manipulação.
Tá curioso em saber como fazer, né?! Eu sei! Então vamos lá…
Nossa implementação se baseia em 3 arquivos, que são:
- form.html - formulário HTML
![[bb]](http://boo-box.com/bbli)
básico com os campos necessários
- buscaendereco.php - neste arquivo montamos um “gateway” server->webservice, ou seja, uma conexão/ponte entre nosso servidor onde estará armazenada a aplicação e o webservice que nos retornará os dados para manipulação. A criação deste arquivo foi necessária devido ao fato de o Javascript por questões de segurança não permitir acesso externo a um server
- buscaendereco.js - toda parte client-side. Aqui trataremos a resposta do webservice para ser jogada aos respectivos campos de endereço do nosso form (claro, em Ajax)
form.html
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
53
54
55
56
57
58
59
60
61
62
63
| <html>
<head>
<title>Autocompletar Endereço dado CEP</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="buscaendereco.js"></script>
<style>
#status { display:inline; }
</style>
</head>
<body>
<form method="POST" id="form">
CEP:
<br />
<input type="text" id="cep" size="8" />
<div id="status"></div>
<br />
Estado:
<br />
<select name="estado" id="estado">
<option>Selecione</option>
<option value="AC">AC</option>
<option value="AL">AL</option>
<option value="AP">AP</option>
<option value="AM">AM</option>
<option value="BA">BA</option>
<option value="CE">CE</option>
<option value="ES">ES</option>
<option value="DF">DF</option>
<option value="MA">MA</option>
<option value="MT">MT</option>
<option value="MS">MS</option>
<option value="MG">MG</option>
<option value="PA">PA</option>
<option value="PB">PB</option>
<option value="PR">PR</option>
<option value="PE">PE</option>
<option value="PI">PI</option>
<option value="RJ">RJ</option>
<option value="RN">RN</option>
<option value="RS">RS</option>
<option value="RO">RO</option>
<option value="RR">RR</option>
<option value="SC">SC</option>
<option value="SP">SP</option>
<option value="SE">SE</option>
<option value="TO">TO</option>
</select>
<br />
Cidade:
<br />
<input type="text" id="cidade" /> <br />
Bairro:
<br />
<input type="text" id="bairro" /> <br />
Endereço:
<br />
<input type="text" id="endereco" /> <br />
</form>
</body>
</html> |
buscaendereco.php
1
2
3
| < ?php
echo file_get_contents('http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep='.$_GET['cep'].'');
?> |
buscaendereco.js
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
| $(function() {
// Ao mudar o cursor do campo CEP, ou pressionar TAB para avançar o campo
$('#cep').blur(function(){
// Pegamos o valor do input CEP
var cep = $('#cep').attr('value')
// Se o CEP não estiver em branco
if(cep != '') {
// Adiciona imagem de "Loading"
$('#status').html('<img src="ajax-loader.gif"/>')
/*
Aqui usamos a função $.getScript da jQuery já que nosso retorno
se baseia em um script baseado na variável resultadoCEP
*/
$.getScript('buscaendereco.php?cep='+cep, function(data){
// A cada nova requisição zeramos os campos do form
$('#status').html('')
$('#estado').val('Selecione')
$('#cidade').val('')
$('#bairro').val('')
$('#endereco').val('')
/*
Abaixo fazemos verificações de flags cedidas pelo próprio Webservice, que são:
0 - CEP não encontrado
1 - CEP completo, todos os campos (estado, cidade, bairro, endereço) disponíveis
2 - CEP incompleto, apenas alguns dados disponíveis (estado, cidade)
*/
if(resultadoCEP.resultado == 0)
alert('Não foi encontrado nenhum endereço para este CEP!\nCaso ele realmente exista, preencha o endereço manualmente!')
else if(resultadoCEP.resultado == 1) {
$('#estado').val(resultadoCEP.uf)
$('#cidade').val(unescape(resultadoCEP.cidade))
$('#bairro').val(unescape(resultadoCEP.bairro))
$('#endereco').val(unescape(resultadoCEP.logradouro))
}
else {
$('#estado').val(resultadoCEP.uf)
$('#cidade').val(unescape(resultadoCEP.cidade))
// Jogamos o cursor para o campo bairro, já que é o próximo campo além dos já preenchidos
$('#bairro').focus()
}
})
}
// Se o campo CEP estiver em branco, apresenta mensagem de erro
else
alert('Para que o endereço seja completado automaticamente você deve preencher o campo CEP!')
return false
})
}) |
Pronto, pessoal, é só isso! Não se esqueçam de incluir a jQuery ao projeto e também baixem para a mesma pasta da aplicação a imagem ajax-loader.gif usada na mesma! Isto é muito importante!
Segue o link para a mesma: http://www.viniciusamaral.com/download/ajax-loader.gif
E até o próximo post!
Vinícius Amaral em 6 novembro 2008 5 comentários
tags: client-side, er, javascript, jquery, regex
Olá, pessoal! Como vão vocês? Espero que bem!
O assunto de hoje é: como criar uma solução que informe ao usuário o nível/grau de uma senha em um formulário de cadastro de um determinado Sistema! (Já que isso se tornou comum nos serviços WEB 2.0 de hoje em dia, certo?!)
Nossa solução se baseia em apenas client-side, ou seja, Javascript puro com auxílio da jesusQuery!
Então… vamos lá!!
Criaremos 4 arquivos, que serão os seguintes:
- form.html - formulário HTML com um form, um input com a senha a ser verificada e um div que conterá a resposta do nível da senha
- nivel.js - contendo uma função nivelSenha() que irá retornar um nível(valor inteiro) da senha em questão
- senha.js - toda a parte de client-side pra valer vai estar aqui. Obtenção/Verificação de dados do form, manipulação de HTML, etc.
- css.css - CSS com algumas classes que serão usadas ao decorrer da solução
E o conteúdo dos arquivos:
form.html
<html>
<head>
<title>Nível Senha</title>
<link rel="stylesheet" href="css.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="nivel.js"></script>
<script type="text/javascript" src="senha.js"></script>
</head>
<body>
<form method="POST" id="form">
<input type="text" id="senha" />
<input type="submit" value="OK" />
<div id="nivel"></div>
</form>
</body>
</html>
nivel.js
function nivelSenha(senha) {
// Expressões regulares
var er = {
'especial' : /[@!#$%&*+=?|-]/, // Caracteres especiais
'maiuscula' : /[A-Z]/, // Maíusculas
'minuscula' : /[a-z]/, // Minúsculas
'numero' : /[0-9]/ // Números
};
var nivel = 0;
// Se alguma ER for casada, incrementa o nível
if(er.especial.test(senha)) nivel++;
if(er.maiuscula.test(senha)) nivel++;
if(er.minuscula.test(senha)) nivel++;
if(er.numero.test(senha)) nivel++;
return nivel;
}senha.js
$(function(){
$('#form').submit(function(){
// Conteúdo do input senha
var senha = $('#senha').attr('value')
// Tamanho(quantidade de caracteres) da senha
var tamanho = senha.length
// Nivel da senha (obtido através da função nivelSenha())
var nivel = nivelSenha(senha)
// Se o input não estiver em branco, então...
if(senha != '') {
/*
Aqui criamos nossas regras para definir o grau/nível da senha
- Tamanho >= 8 E nível >= 3
- Forte
- Tamanho >= 8 E nível >= 2 OU Tamanho >= 6 E nível >= 3
- Média
- Nenhum dos casos acima
- Fraca
ps: Fique a vontade para mudar da melhor forma que quiser!
*/
if((tamanho >= 8) && (nivel >= 3)) {
/*
- Adicionamos ao div #nivel o conteúdo "Forte"
- Adicionamos ao div #nivel a classe "forte" e removemos as demais classes
*/
$('#nivel').html('Forte')
.removeClass('fraca media')
.addClass('forte')
}
else if(((tamanho >= 8) && (nivel >= 2)) || ((tamanho >= 6) && (nivel >= 3))) {
/*
- Adicionamos ao div #nivel o conteúdo "Média"
- Adicionamos ao div #nivel a classe "média" e removemos as demais classes
*/
$('#nivel').html('Média')
.removeClass('fraca forte')
.addClass('media')
}
/*
- Adicionamos ao div #nivel o conteúdo "Fraca"
- Adicionamos ao div #nivel a classe "fraca" e removemos as demais classes
*/
else {
$('#nivel').html('Fraca')
.removeClass('media forte')
.addClass('fraca')
}
}
// Se o input senha estiver em branco, então apresenta mensagem de erro
else
alert('Senha em branco')
// Para o formulário não avançar
return false
})
})css.css
.forte {
color:green;
}
.media {
color:orange;
}
.fraca {
color:red;
}E claro! Não esqueça de incluir a jQuery ao projeto!
Tentei explicar o máximo possível pelos comentários o que é feito em cada linha, mas qualquer dúvida que surgir posta um comentário aí que vou ter o maior prazer em ajudá-lo ok?
E por hoje é só, cambada!
Vejo vocês no próximo post!
Vinícius Amaral em 5 novembro 2008 sem comentários
tags:
Isso mesmo!!!
Temos em 2008 o PRIMEIRO PRESIDENTE NEGRO DOS ESTADOS UNIDOS DA AMÉRICA!
Sem palavras para um momento desses…
Congratulations, Mr Obama!!!
YES, WE CAN!!!
