Como retirar acentos de um form utilizando javascript?

Já antecipo que estou aprendendo javascript – e evoluíndo bastante com meus estudos para o novo And After, e eis que trabalhando no novo sistema de buscas internos eu queria limpar a acentuação dos formulários de busca sem utilizar server-side, recorri ao Google para aprender o replace em Javascript.

Falhei em um primeiro momento, o replace do javascript faz a substituição apenas uma vez.

Exemplo que não funciona (com replace)

Se você quer retirar os acentos de "É fácil plantar árvores" e usar um replace para substituir "á" por "a" a substituição acontecerá somente no primeiro "á".

Como eu não estou (estava?) familiarizado com javascript, não sabia das manhas. É possível fazer com replace desde que você crie um pequeno loop.

 

Exemplo que funciona (com replace)

No exemplo abaixo eu criei uma função para retirar todos os espaços do valor de um input de texto, o exemplo facilita o entendimento de funciona o replace.

function retiraespaco(x) {
var campo = document.getElementById(x)
novo = novo.replace(" ","-");
campo.value = novo;
}

 

Para retirar todos os espaços eu criei um loop para cada caracter da variável (neste caso o valor do input X). Mas e para retirar todas as possibilidades de acentuação?

Retirando a acentuação de um Input de texto

Você poderia fazer um loop para cada possibilidade, mas seria um trabalhão e o código ficaria grande, recorri novamente ao Google e encontrei em um fórum uma função feita por um tal de Luís, que a seguinte:

function retira_acentos(palavra) {
com_acento = ´áàãâäéèêëíìîïóòõôöúùûüçÁÀÃÂÄÉÈÊËÍÌÎÏÓÒÕÖÔÚÙÛÜÇ´;
sem_acento = ´aaaaaeeeeiiiiooooouuuucAAAAAEEEEIIIIOOOOOUUUUC´;
nova=´´;
for(i=0;i<palavra.length;i++) {
if (com_acento.search(palavra.substr(i,1))>=0) {
nova+=sem_acento.substr(com_acento.search(palavra.substr(i,1)),1);
}
else {
nova+=palavra.substr(i,1);
}
}
return nova;
}

 

Ainda não fiz testes para entender como funciona o search no javascript, mas mesmo sem entender o funcionamento específico de cada linha do código é fácil implementá-lo para uso. No meu caso eu chamei a função para definir o valor de um input enquanto o usuário digita, retirando automaticamente os acentos do formulário de busca, segue o código do formulário

<form class="form_busca" method="get" action="busca.asp" name="busca">
<input type="text" onkeyup="this.value=retira_acentos(this.value);" class="texto_busca" value="BUSCA" id="query" name="query" />
<input align="absmiddle" type="image" src="https://andafter.org/beta/images/botoes/ok.png" name="Buscar" />
</form>

 

Pronto, quando o usuário digitar uma busca automaticamente a função irá retirar os assuntos. Não custa nada chamar a função quando o formulário for enviado, fiz testes e as vezes quando o conteúdo é colado no input os acentos podem "escapar", se chamar a função quando o form for enviado não tem erro! 

Dúvidas, críticas e correções nos comentários! 😉

Cookies em ASP

Dando uma quebra nos textos hard-developer do @chris, resolvi escrever um post simples e rápido sobre um assunto mais simples ainda: cookies em ASP.

Uma leitura rápida sobre:

  1. O que são cookies
  2. Porquê usar cookies?
  3. Programando
    1. Criar um Cookie
    2. Configurar um Cookie
    3. Ler um Cookie
  4.  Dicas e macetes

 

O que são cookies?


Isso são cookies.

 

"Cookies" são dados que ficam armazenados no computador do usuário em formato de texto e podem ser resgatados pelo servidor em outro momento, mesmo que o usuário saia do site e feche o navegador esses dados podem ficar armazenados.

Permitir ou não o uso de cookies é uma opção do usuário e a maioria dos navegadores por padrão aceita o uso deles.

 

Porquê usar cookies?

Usar cookies ou session? Vamos lá…

A session sempre é fechada quando o usuário não está navegando no seu site, para informações que podem ficar guardadas sempre você pode (e deve) utilizar cookies.

Por exemplo, o usuário fez um comentário no seu site, a próxima vez que ele for comentar já estará gravado no formulário o seu nome e e-mail pois estes foram armazenados em cookies quando ele executou essa ação pela primeira vez.

Escrevi aqui como fazer um sistema de login em ASP que utiliza apenas session, quando o usuário fica muito tempo sem nenhuma ação ou quando ele fecha a página ele automaticamente é deslogado, se as informações fossem gravadas através de cookies ele poderia permanecer logado.

Definir quando utilizar Cookies e Sessions depende da intenção e segurança que a aplicação que está sendo desenvolvida deve ter.

 

Programando

Agora que você já sabe como funciona e quando deve ser utilizado, vamos botar a mão na massa e descobrir como criar, ler e configurar cookies em ASP[bb] . 😀

Como criar um Cookie em ASP?

Para criar um cookie em ASP é extremamente simples, vamos ao código:

<%
Response.Cookies("usuario").item("apelido") = "Guilherme Serrano"
Response.Cookies("usuario").item("site") = "https://andafter.org"
%>

Neste caso foi armazenado um cookie chamado usuario que tem dois itens, um chamado apelido com valo de Guilherme Serrano e outro chamado site com valor de https://andafter.org

 

Como configurar um Cookie em ASP?

Cookies não tem muito o que configurar, mas você pode determinar o tempo de expiração, ou seja, até quando este cookie deve ficar armazenado no computador do usuário.

<%
Response.Cookies(“usuario”).Expires = “01/07/2008”
%>

Neste exemplo você tem uma data definida para que o cookie expire, e esta linha só serve para ilustrar como funciona pois dificilmente você determina datas fixas para um cookie expirar, né?

Então você pode usar o seguinte código:

<%
Response.Cookies(“usuario”).Expires = DateAdd("d",7,Now)
%>

Agora você definiu que o cookie usuário tem 7 dias de duração, através do DateAdd. O que você fez foi somar 7 dias "d",7 a data atual Now.

 

Como ler um Cookie em ASP?

Você gravou as informações no computador do usuário, vamos ao código para receber essas informações:

<%=Request.Cookies(“usuario”).item("apelido")%>

Simples assim, usando o exemplo anterior nesse caso você teria como retorno Guilherme Serrano. Um exemplo prático, no formulário de comentar deixar preenchido com o apelido do usuário:

<form action="comentar.asp" method="post">
<input type="text" value="<%=Request.Cookies(“usuario”).item("apelido")%>">
</form>

 

Dicas e macetes

Quando você não define data de expiração o cookir funciona como uma session (chamado cookie de sessão) e é apagado logo que o usuário sai da página.

Pense bem se é melhor usas cookies ou session, cookies não oferecem segurança: as informações gravadas podem ser acessadas a qualquer momento por qualquer usuário do computador que saiba (ou não!) o que está fazendo. Não grave senhas e dados confidenciais em cookies, se isso for necessário (nunca é, pois sempre existem outros métodos) utilize algum sistema de criptografia.

Em um sistema de login por exemplo, se o usuário estiver em um computador público ele ficará logado e a próxima pessoa que acessar o site terá acesso a conta da pessoa – para evitar isso o usuário deve ter a opção ao se logar de "lembrar de mim" ou não. 😉

Para gerar corretamente cookies que utilizam variáveis dinâmicas para o nome você precisa deixar a opção Buffer como true, pra isso insira no início da página a linha:

<%
´Torna o Buffer True
Response.Buffer = True
variavel = "apelido"
´Gera um cookie com uma variável, se o buffer não estivesse como true esse cookie não seria gerado corretamente.
Response.Cookies("usuario").item("" & variavel & "") = "Guilherme Serrano"
%>

 

Bom, se alguém tiver alguma coisa para adicionar comentem aí que eu atualizo o post, certo? 😉

O Cara da Informática

1) O CARA DA INFORMÁTICA dorme. Pode parecer mentira, mas o CARA DA NFORMÁTICA precisa dormir como qualquer outra pessoa. Esqueça que ele tem celular e telefone em casa, ligue só para o escritório;

 

2) O CARA DA INFORMÁTICA come. Parece inacreditável, mas é verdade. O CARA DA INFORMÁTICA também precisa se alimentar e tem hora para isso;

 

3) CARA DA INFORMÁTICA pode ter família. Essa é a mais incrível de todas: Mesmo sendo um CARA DA INFORMÁTICA, a pessoa precisa descansar no final de semana para poder dar atenção à família, aos amigos e a si próprio, sem pensar ou falar em informática, impostos, formulários,  concertos e demonstrações, manutenção, vírus e etc.;

 

4) CARA DA INFORMÁTICA, como qualquer cidadão, precisa de dinheiro. Por essa você não esperava, né? É surpreendente, mas o CARA DA INFORMÁTICA também paga impostos, compra comida, precisa de combustível, roupas e sapatos, e ainda consome Lexotan para conseguir relaxar… Não peça aquilo pelo que não pode pagar ao CARA DA INFORMÁTICA;

 

5) Ler, estudar também é trabalho. E trabalho sério. Pode parar de rir. Não é piada. Quando um CARA DA INFORMÁTICA está concentrado num livro ou publicação especializada ele está se aprimorando como profissional, logo trabalhando;

 

6) De uma vez por todas, vale reforçar: O CARA DA INFORMÁTICA não é vidente, não joga tarô e nem tem bola de cristal, pois se você achou isto demita-o e contrate um PARANORMAL OU DETETIVE. Ele precisa planejar, se organizar e assim ter condições de fazer um bom trabalho, seja de que tamanho for. Prazos são essenciais e não um luxo… Se você quer um milagre, ore bastante, faça jejum, e deixe o pobre do CARA DA INFORMÁTICA em paz;

 

7) Em reuniões de amigos ou festas de família, o CARA DA INFORMÁTICA deixa de ser o CARA DA INFORMÁTICA e reassume seu posto de amigo ou parente, exatamente como era antes dele ingressar nesta profissão. Não peça conselhos, dicas… ele tem direito de se divertir;

 

8) Não existe apenas um "levantamentozinho" , uma "pesquisazinha" , nem um "resuminho", um "programinha pra controlar minha loja", um "probleminha que a maquina não liga", um "sisteminha" , uma "passadinha rápida(ALIAS CONTA-SE DE ONDE SAIMOS E ATÉ CHEGARMOS)", pois esqueça os "inha e os inho (programinha, sisteminha, olhadinha, )" pois OS CARAS DA INFORMATICA não resolvem este tipo de problema. Levantamentos, pesquisas e resumos são frutos de análises cuidadosas e requerem atenção, dedicação. Esses tópicos podem parecer inconcebíveis a uma boa parte da população, mas servem para tornar a vida do CARA DA INFORMATICA mais suportável;

 

9) Quanto ao uso do celular: celular é ferramenta de trabalho. Por favor, ligue, apenas, quando necessário. Fora do horário de expediente, mesmo que você ainda duvide, o CARA DA INFORMATICA pode estar fazendo algumas coisas que você nem pensou que ele fazia, como dormir ou namorar, por exemplo;

 

10) Pedir a mesma coisa várias vezes não faz o CARA DA INFORMATICA trabalhar mais rápido. Solicite, depois aguarde o prazo dado pelo CARA DA INFORMATICA;

 

11) Quando o horário de trabalho do período da manhã vai até 12h, não significa que você pode ligar às 11:58 horas. Se você pretendia cometer essa gafe, vá e ligue após o horário do almo&cccedil;o (relembre o item 2). O mesmo vale para a parte da tarde: ligue no dia seguinte;

 

12) Quando CARA DA INFORMATICA estiver apresentando um projeto, por favor, não fique bombardeando com milhares de perguntas durante o atendimento. Isso tira a concentração, além de torrar a paciência. ATENÇÃO: Evite perguntas que não tenham relação com o projeto, tipo como…. vocês entendem é claro….;

 

13) O CARA DA INFORMATICA não inventa problemas, não muda versão de WINDOWS, não tem relação com vírus, NÃO É CULPADO PELO MAL USO DE EQUIPAMENTOS, INTERNET E AFINS. Não reclame! O CARA DA INFORMATICA com certeza fez o possível para você pagar menos. Se quer EMENDAR, EMENDE, mas antes demita o CARA DA INFORMATICA e contrate um QUEBRA GALHO;

 

14) Os CARAS DA INFORMATICA não são os criadores dos ditados "o barato sai caro" e "quem paga mal paga em dobro". Mas eles concordam… ;

 

15) E, finalmente, o CARA DA INFORMATICA também é filho de DEUS e não

 

filho disso que você pensou…

 

O CARA DA INFORMATICA agradece.

Como usar o Syntax Highlighter?

O que é Syntax Highlighter

O Syntax Highlighter é uma ferramenta em javascript[bb] que permite que você ajude seus usuários a entenderem códigos publicados em seu blog ou site, ideal para quem quer compartilhar programações ou exemplificar e explicar alguns códigos.

O que ele faz é entender a sintaxe da programação como se fosse um editor, deixando o código mais "amigável", veja esse exemplo em funcionamento ou a imagem exemplificando o resultado.

 

Para o leitor a vantagem é óbvia: "código colorido" é mais fácil de entender, as linhas contadas facilitam o autor (no caso você)  a explicar a programação e para os leitores que querem copiar o código existe um botão específico para isso.

 

Como aplicar o Syntax Highlighter?

A aplicação é muito simples, primeiro você precisa baixar os arquivos (aqui a v versão 1.51) e pode fazer isso no Google Code.

Com os arquivos já dentro da pasta do seu site ou blo você precisa inseri-los na página que irá ter o código, segue o código:

 

<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = ´/flash/clipboard.swf´;
dp.SyntaxHighlighter.HighlightAll(´code´);
</script>

 

Dica básica: cuidado com o caminho dos arquivos, qualquer caminho errado prejudicará a exibição correta do código.

Com os arquivos já inseridos na página o único trabalho que você precisa fazer é definir no seu conteúdo onde está o bloco (ou blocos) de código a serem interpretados e qual a linguagem de programação utilizada.

Para isso você pode usar textarea ou pre, eu utilizo pre, e aqui vai um exemplo do html utilizado para exibir a inclusão dos arquivos (que aparece aí em acima).

 

<pre name="code" class="html">
&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;css/SyntaxHighlighter.css&quot;&gt;&lt;/link&gt;
&lt;script language=&quot;javascript&quot; src=&quot;js/shCore.js&quot;&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot; src=&quot;js/shBrushCSharp.js&quot;&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot; src=&quot;js/shBrushXml.js&quot;&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
dp.SyntaxHighlighter.ClipboardSwf = ´/flash/clipboard.swf´;
dp.SyntaxHighlighter.HighlightAll(´code´);
&lt;/script&gt;
</pre>

 

O nome da tag (textarea ou pre) sempre deve ser code, e a class é que define a linguagem de programação utilizada, que pode ser:

C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt

Exemplo:

<pre name="code" class="vb">

Programação aqui

</pre>

Você também pode fazer algumas personalizações, selecionar o número de contagem inicial das linhas (para exibir códigos grandes, segmentados por exemplo)…

Simples e útil, né? Mais informações aqui. 😉

Como fazer um login em ASP sem banco de dados

Buenas povo!

Aqui vai um exemplo prático de como fazer um sistema de login simples em ASP[bb] , com dois níveis de usuários (e apenas dois usuários) mas sem utilizar Banco de Dados[bb]

Vamos iniciar fazendo o formulário de login, que ficará no arquivo default.asp, e será assim:

 

<form action="login.asp?a=login" method="post" name="flogin" id="flogin">
<p>Usuário
<input type="text" name="usuario" id="usuario">
</p>
<p>Senha
<input type="text" name="senha" id="senha">
</p>
<input type="submit" name="Login" id="Login" value="Login">
</form>
<%
response.write session("mensagem")
session("mensagem") = ""
%>

 

 

Perceba que a página do formulário imprime a sessão "mensagem", logo você vai entender o motivo. Com o formulário criado, precisamos de uma página que vá:

  1. Receber os dados do formulário
  2. Verificar o usuário e a senha
  3. Criar os cookies ou sessões para autenticar o usuário

A página que fará isso se chamará login.asp, e o código dela:

<%
if request.querystring("a") = "login" then
    dim user
    dim senha
    user = request.form("usuario")
    senha = request.form("senha")
    ´Verifica se é o administrador
    if user = "andafter" then
        if senha = "senhaaqui" then
            ´ Se usuário e senha conferem cria as sessões e redireciona para a página logado.asp
            session("usuarioOD") = "andafter"
            session("nivelOD") = 10
            response.redirect "logado.asp"
        else
            ´ Se a senha não conferir manda devolta para o formulário, com a sessão mensagem informando erro no usuário ou senha
            session("mensagem") = "Usuário ou senha não encontrados"
            response.redirect "default.asp"
        end if
    end if
    if user = "odesenvolvedor" then
        if senha = "blabla" then
            session("usuarioOD") = "odesenvolvedor"
            session("nivelOD") = 5
            response.redirect "logado.asp"
        else
            session("mensagem") = "Usuário ou senha não encontrados"
            response.redirect "default.asp"
        end if
    end if
    ´Se não veio com ação nenhuma envia para o formulário
    session("mensagem") = "Usuário ou senha não encontrados"
    response.redirect "default.asp"
end if
%>

Agora o usuário já está "logado" e o que falta é impedir o acesso as páginas restritas para quem não estiver logado. Vamos fazer isso verificando a existência da session "nivelOD".

Como essa verificação é necessária em todas as páginas, vamos criar um arquivo chamado seguro.asp que fará a verificação, depois usando include vocêd eve adicionar esse arquivo em todas as páginas restritas do site.

Código do seguro.asp:

<%
if session("nivelOD") = "" then
    session("mensagem") = "Você não está autorizado a acessar esta página."
    response.redirect "default.asp"
end if
%>

Pronto, os usuários que não estiverem logados serão redirecionados para a default.asp, tudo o que você precisa fazer é dar um include da página seguro.asp no início de todas as página protegidas.

Fácil, não?

Se tiverem dúvidas perguntem pro Chris Benseler, críticas e sugestões utilizem os comentários.