MXStudio » Javascript

jQuery Plugin Plus Validate

Ted k' — Mon, 03 Oct 2011 22:30:29 +0000

O Plus Validate é Plugin jQuery, criado por mim, que valida campos de um modo simples e objetivo.

Segue avaliação: DEMO

Com esse plugin você pode validar:
- Se o campo for vazio:
- O mínimo de caracteres para esse campo e colocando uma mensagem de alerta:
- Forçar o usuário a digitar se o campo tem só números:
- Verificar se o E-mail é um endereço eletrônico.

Pra chamar a função identifique primeiro o ID do formulário que irá ser utilizado.

$("#meu_formulario").plusvalidate();

Dentro da função .plusvalidate(); você passa os parâmetros necessario. Vamos ver um exemplo:

$(function(){ $("#meu_formulario").plusvalidate({ animation: { type : "alert" },

cname: { message: "Preencha o campo Nome" },

cemail: { message: "Preencha o campo Email", required: "email", requiredMessage: "Esse campo precisa ter um email eletronico" } }); });

Segue link da documentação completa:

Abraços galera e até a próxima!

Introdução à CANVAS

Wanderson R Silva — Sun, 03 Oct 2010 18:15:21 +0000

Canvas é um recurso interessante que permite a criação de gráficos e animações simples – ou complexas -, ele se baseia no uso do elemento HTML CANVAS juntamente com Javascript. Como uso deste recurso é possível criar desenhos dos mais diversos tipos, gráficos elaborados (como os financeiros) e até jogos (sem a necessidade de instalação de plugins como Flash Player). Canvas é suportado pela grande maioria dos navegadores atuais, o que inclui Firefox, Chrome, Opera, Safari e IE.

O elemento CANVAS normalmente é usado juntamente com as propriedades ID – que define uma string de identificação para o elemento, para este ser localizado via Javascript mais facilmente -, HEIGHT e WIDTH – que servem para definir a altura e largura da tela de pintura do elemento (semelhante ao elemento IMG) -. Este elemento não precisa de uma TAG de encerramento (aquelas que começam com barra antes do nome), mas para dar ao usuário de navegadores antigos (sem suporte à este recurso) é interessante colocar entre uma TAG de abertura e uma de encerramento uma mensagem ou imagem (com uma imagem você define altura e largura para não quebrar o layout da página) para que o usuário tome ciência da deficiência do navegador. Exemplos de uso do elemento podem ser:

Com o elemento criado torna-se possível captura-lo via javascript:

Explicando tudo:

O código foi iniciado na linha “window.onload = function”, esta linha indica que o código entre chaves só será executado após o documento estar totalmente carregado, isto também poderia ser feito se eu desse um nome para a função e acionasse através do atributo onload da TAG BODY:

A ideia de só executar o código depois que tudo estiver pronto, é por que se eu tentar acessar um elemento que não existe (executar o método document.getElementById) eu não vou conseguir acessar o elemento e consequentemente não vou conseguir fazer mais nada.

Em seguida vem um chamado ao método document.getElementById, que retorna a referência a um elemento do documento identificado pela ID, ao obter a referência ao elemento, ela será armazenada na variável canvasEl.

Com uma referência ao elemento válida, precisamos então nos certificar que o navegador dá suporte ao recurso, isso é feito verificando se o método getContext está definido para o objeto (isso é orientação a objetos, muito usada em DOM) com “if(canvasEl.getContext)”, e somente se esta condição for positivada continuaremos. Poderíamos até ter colocado um ELSE ao fim das chaves que delimitam o escopo do IF, assim “else { alert(‘Navegador sem suporte à CANVAS!’) }”.

O que é feito após a verificação, é a obtenção de uma referência ao contexto 2D do elemento CANVAS, isso significa que colocaremos numa variável (na verdade poderíamos usar o endereço completo, as isso faria com que o código ficasse enorme e ruim de ler) e assim, quando quisermos acessar os recursos do CANVAS (desenhar), poderemos nos referia a esta variável. O uso é bastante simples: para modificar uma propriedade fazemos “canvas.propriedade = valor” e para acessar um método fazemos “canvas.metodo(parametros)”.

Em geral, os métodos que desenham uma linha tem o nome iniciado com stroke (como strokeRect) e os que preenchem uma forma tem o nome iniciado com fill (como fillRect).

Para se desenhar um retângulo preenchido o método é fillRect e para se desenhar as linhas de um retângulo o método é strokeRect, ambos métodos aceitam os mesmos parâmetros: x (deslocamento horizontal), y (deslocamento vertical), width (largura) e height (altura). O parâmetro X indica quanto o retângulo será afastado da margem esquerda do elemento, já o parâmetro Y indica quanto ele irá se afastar da margem superior. Width indica a largura e Height indica a altura do retângulo.

canvas.fillRect(10, 10, 150, 100)
canvas.strokeRect(100, 80, 150, 100)

É possível também se modificar a cor para preenchimento ou da linha, para isso basta definir o valor das propriedades fillStyle (preenhimento) e strokeStyle (linha), o valor deve ser uma string em qualquer formato válido de cor, como “#F60″, “rgb(255, 0, 255)”, “rgba(0, 255, 255, 80)” – isso mesmo, há suporte para transparência -.

canvas.fillStyle = ‘rgb(255, 128, 0)’
canvas.strokeStyle = ‘#00F’
canvas.fillRect(10, 10, 150, 100)
canvas.strokeRect(100, 80, 150, 100)

Há também a possibilidade de se desenhar uma sequencia de linhas, funciona da seguinte forma: chama-se o método beginPath para que se defina quando o desenho começa a ser preparado, então segue-se usando o método moveTo para se definir o ponto inicial do desenho e por quantas vezes forem necessárias usa-se o método lineTo, que cria uma linha do ponto anterior até o ponto passado ao método. O método beginPath não recebe parâmetros, já os métodos moveTo e lineTo recebem um par de parâmetros indicando uma coordenada. Após terminar de definir a forma do desenho, usa-se o método stroke para fazer o desenho como linha ou fill para preencher a forma (a forma é automáticamente fechada).

// Definindo a cor do pincel
canvas.strokeStyle = ‘#00F’
// Dando início a figura
canvas.beginPath()
// Definindo o ponto inicial
canvas.moveTo(50, 50)
// Definindo os pontos
canvas.lineTo(75, 100)
canvas.lineTo(280, 195)
canvas.lineTo(250, 10)
//Desenhando
canvas.stroke()

E trocando o “canvas.stroke()” no final por “canvas.fill”:

// Definindo a cor para preencimento
canvas.fillStyle = ‘rgb(255, 128, 0)’
canvas.beginPath()
canvas.moveTo(50, 50)
canvas.lineTo(75, 100)
canvas.lineTo(280, 195)
canvas.lineTo(250, 10)
// Preenchendo
canvas.fill()

E só para testar, vamos usar o fill e o stroke, mas para fechar a figura, vamos colocar um comando lineTo definindo o mesmo ponto inicial:

// Definindo a cor para preenchimento
canvas.fillStyle = ‘rgb(255, 128, 0)’
// Definindo a cor para os contornos
canvas.strokeStyle = ‘#00F’
// Iniciando o desenho
canvas.beginPath()
// Definindo o ponto inicial
canvas.moveTo(50, 50)
canvas.lineTo(75, 100)
canvas.lineTo(280, 195)
canvas.lineTo(250, 10)
// Preenchendo
canvas.fill()
// Para fechar a figura, definindo o ponto final igual ao original
canvas.lineTo(50, 50)
// Desenhando o contorno
canvas.stroke()

Bem, agora já se sabe fazer figuras básicas, voltarei em breve com uma continuação. Até!

Criando Classes em JavaScript com o recurso prototype

Ted k' — Wed, 28 Jul 2010 18:13:58 +0000

A utilização de Classes é uma maneira pratica de ter um bom rendimento e organização em suas aplicações web.

A estrutura de Classes em JavaScript é a mesma que usamos em linguagens de programação como ASP ou PHP.

Nesse artigo você irá aprender a usar Classes com o uso da prototype. Vamos a definição do que é a prototype no JavaScript

prototype é um recurso do JavaScript (nesse caso não estou falando do Framework Prototype) que possibilita modificar uma Classe depois que ela foi criada.

Vamos criar uma classe chamada DadosPessoais e dentro dela colocar as variáveis “nome” e “telefone”;

-----------------------------------------------------
function DadosPessoais(){
 var nome;
 var telefone;
}
-----------------------------------------------------

Para dar inicio ao processo das funções dentro da classe usamos a prototype assim:

-----------------------------------------------------
DadosPessoais.prototype.campos = function(){
 this.nome = "Menu Nome";
 this.telefone = "(99) 9999-9999";
}

var obj = new DadosPessoais();
obj.campos();
-----------------------------------------------------

No final, criamos o objeto e chamamos ele…

O Script completo fica assim:

-----------------------------------------------------


Nome: 

Telefone: 

-----------------------------------------------------

Creio que ficou um bom entendimento para todos de como usar Classes no JavaScript usando o recurso prototype.

Abraços a todos.

ASP – Chat com AJAX

X@nBuRzUm — Sat, 08 May 2010 16:09:42 +0000

Este artigo irá mostrar como criar um bate-papo muito legal de comunicar em tempo real com todos os usuários!

A realização deste pedido é bem simples de um ponto de vista prático, mas pode se tornar bastante complexa, mas não no código da sua estrutura, dado que envolvem uma filosofia (relativamente) como novo AJAX.

Abaixo está uma lista de arquivos que usamos no projeto, acompanhado de uma explicação dos mesmos.

chat.mdb – usar um banco de dados para armazenar as mensagens em vez de variáveis aplicação.

config.asp – é o arquivo de configuração do projeto, contendo cabeçalhos para uso em páginas e a conexão ao banco de dados.

default.asp – é a página de acolhimento bate-papo

chat.asp – é a interface do bate-papo para escrever e ler mensagens.

messaggio.asp – é o arquivo que armazena as mensagens no banco de dados.

chat.js – é o arquivo Javascript que através XMLHTTP, invoca o arquivo ASP que mostra mensagens na tela,

ajax.asp – os arquivos para mostrar mensagens na tela!

Criar uma pasta no seu servidor Web chat_ajax. Onde você irá testar o resultado, no seguinte endereço:

[url="http://localhost/chat_ajax/"]http://localhost/chat_ajax/[/url]

Explique o uso dos arquivos citados, teatralmente falando.

A base de dados

Crie o arquivo chat.mdb , criar a tabela mensagens ,composto pelos seguintes campos:
ID – Counter
username – Texto, tamanho 30
mensagem – texto, comprimento 255
Salvar e fechar.

O arquivo de configuração

criar o arquivo config.asp:

Como mencionado na descrição da estrutura visto no anterior, o script não especifica os cabeçalhos das páginas inicial e conectar ao banco de dados, utilizando dois recursos personalizados que necessitamos

A página de login e de bate-papo

Crie o arquivo default.asp que, como previsto no título , será a página de login e de bate-papo.

Para agilizar operações estreitamente relacionadas com o artigo atual, o tópico não iremos criar uma verdadeira login, permitindo que os usuários escolham o nome de usuário que escolhem.

Certamente, desta forma é possível duplicação dos apelidos dos visitantes, e é por isso que o leitor poderá implementar um sistema de login em si.

código do arquivo:

chat ASP /AJAX

Eu recomendo a não alterar o valor atribuído à propriedade Comprimento Máximo 10, uma vez que os usuários serão armazenadas no banco de dados que tem o seu campo máximo de 10 caracteres.

Ao alterar a uma, necessariamente ser mudado mutuamente.

A interface bate-papo

#CHAT
{
background: #DDDDDD;
width: 500px;
height: 300px;
overflow: Auto;
}
#MSG
{
position: Absolute;
visibility: Hidden;
}

chat ASP/AJAX

Bem-vindo

Primeiro, verifique para ter certeza de que há uma sessão ativa.

Não altere o valor do texto 255 Comprimento Máximo, pela mesma razão dada acima.

No final da página crie uma moldura em consonância com nome e identificação MSG. Vemos que se refere à forma com uma meta para este item.

O texto camada CHAT dando-lhe o tamanho e a rolagem automática, assim como uma cor de fundo para distingui-la opticamente.

No final de CSS em cabeçalhos ,o Javascript irá chamar o arquivo chat.js.

A inserção de uma nova mensagem

É chegou a vez do arquivo messaggio.asp, arquivos chamados dentro do iframe, que desempenha um importante trabalho: a inserção de mensagens dos usuários.

código:
<% Dim messaggio messaggio = Server.HTMLEncode(Request.Form("messaggio")) If messaggio "" Then Call ConnOpen() rs.Open "messaggi", cn, 3, 3 rs.AddNew rs("username") = Session("username") rs("messaggio") = messaggio rs.Update rs.Close Call ConnClose() Response.Redirect "messaggio.asp" End If %>

incluir o arquivo de configuração para o banco de dados , estamos inserindo e recuperando a mensagem, se ela realmente foi inserida , irá executar a gravação.

No final você remete a própria página, eliminando, assim, a fim de evitar a atualização escrupulosa da página por usuários.

O arquivo Javascript / AJAX

O arquivo de Javascript como código é bastante longo, mas as funções que levamos em consideração são os três primeiros, bastante curto.

Nós entendemos que o código completo:

function Aggiorna() { return Richiesta(); } window.setInterval("Aggiorna()", 3000)

var XMLHTTP;

function Richiesta()
{
XMLHTTP = RicavaBrowser(CambioStato);
XMLHTTP.open(“GET”, “ajax.asp”, true);
XMLHTTP.send(null);
}

function CambioStato()
{
if (XMLHTTP.readyState == 4)
{
var R = document.getElementById(“CHAT”);
R.innerHTML = XMLHTTP.responseText;
}
}

A função Update (), chamado no corpo da página chat.asp, solicita o pedido, incentivando a cada 3 segundos, para assegurar uma contínua, mas não demasiado intrusiva, refresh (em back-office) Page e atualização mensagens.

A mencionada função Pedido () é realmente necessária, via XMLHTTP, o arquivo mensagens.

A função CambioStat () imprime na tela, no nível de texto identificado como bate-papo, mensagens, enquanto que a função RicavaBrowser () ,verificar que o atual navegador suporta AJAX.

Recordando as mensagens via ASP e AJAX

Chegámos a última etapa deste sobre a criação de um bate-papo com ASP e AJAX.

código ajax.asp:

<% Call ConnOpen() rs.Open "SELECT TOP 10 * FROM messaggi ORDER BY id DESC", cn, 1 If rs.EOF = False Then With Response While rs.EOF = False .Write "" & rs("username") & " " .Write rs("messaggio") & "

”
rs.MoveNext
Wend
End With
End If
rs.Close
Call ConnClose()
%>

Classe para navegar em um recordset paginado

X@nBuRzUm — Sat, 13 Mar 2010 18:35:47 +0000

A classe NaviPage oferece propriedades e métodos que são utilizados para construir o menu de navegação. Por exemplo, se o seu recordset é de 5 páginas, uma navegação NaviPage como esta será exibida:

[Anterior] [1] 2 3 4 5 [Próxima]

As propriedades e os métodos propostos neste código são:

Propriedades:

CurrentPage

Opcional. Obtém ou define a página atual.

PageCount

Necessário. O número de páginas para ser exibido.

QueryString

Opcional. Uma QueryString é necessária para ser transmitida entre as páginas. Querystrings devem ter este formato:

PageUrl

Necessário. A URL onde todos os links de navegação são exibidos.

LinkStyle

Opcional. Estilo CSS, código para as tags âncora de links criados pela classe.

SelectedPageStyle

Opcional. Estilo CSS para a página selecionada.

Width

Opcional. O numérico ou percentual de toda a largura do menu. Exemplos de valores válidos são “100%”, 500, 563, “55%”, etc.

Métodos:

RenderMenu

Necessário.Página gerada, menu de navegação do browser.

Este método deve ser chamado depois que todas as propriedades foram ajustadas.

sintaxe:

CurrentPage

Opcional. Obtém ou define a página atual.

PageCount

Necessário. O número de páginas para ser exibido.

QueryString

Opcional. Uma QueryString é necessária para ser transmitida entre as páginas. Querystrings devem ter este formato:

Dim qs qs = qs & "& s =" & Server.UrlEncode (request ( "s")) qs = qs & "& t =" & Server.UrlEncode (request ( "t")) qs = qs & "& u =" & Server.UrlEncode (request ( "u")) Obj.Querystring = qs

PageUrl

Necessário. A URL onde todos os links de navegação são exibidos.

LinkStyle

Opcional. Estilo CSS, código para as tags âncora de links criados pela classe.

SelectedPageStyle

Opcional. Estilo CSS para a página selecionada.

Width

Opcional. O numérico ou percentual de toda a largura do menu. Exemplos de valores válidos são “100%”, 500, 563, “55%”, etc.

Métodos:

RenderMenu

Necessário.Página gerada, menu de navegação do browser.

Este método deve ser chamado depois que todas as propriedades foram ajustadas.

sintaxe:

Set object = New NaviPage

exemplo:

Dim p, qs´construir QueryString para passar de página em páginaqs = "" qs = qs & "&s=" & Server.UrlEncode(request("s")) qs = qs & "&t=" & Server.UrlEncode(request("t")) qs = qs & "&u=" & Server.UrlEncode(request("u"))´cria nav menu Set p = New NaviPage´set widthp.Width = "100%"´conjunto estilo da página Links p.LinkStyle = "font-family:helvetica;font-size:12pt;" ´estilo de página selecionada p.SelectedPageStyle = "font-family:helvetica;font-size:12pt;font-weight:bold;" ´número total de páginas "paginável" recordsetp.PageCount = 3 ´conjunto da QueryString usada pelo recordset para gerar filasp.QueryString = qs ´definir a página onde cada página link deve apontar p.PageUrl = Request.ServerVariables("SCRIPT_NAME") ´response.write o menu para o browserp.RenderMenu´liberar memória Set p = Nothing´impressões: [1] 2 3 [Próxima>>] ´Isso é exatamente a mesma classe qeu uso para fazer a paginação

código:

Dim p, qs

‘construir QueryString para passar de página em página

qs = “”

qs = qs & “&s=” & Server.UrlEncode(request(“s”))

qs = qs & “&t=” & Server.UrlEncode(request(“t”))

qs = qs & “&u=” & Server.UrlEncode(request(“u”))

‘cria nav menu

Set p = New NaviPage

‘set width

p.Width = “100%”

‘conjunto estilo da página Links

p.LinkStyle = “font-family:helvetica;font-size:12pt;”

‘estilo de página selecionada

p.SelectedPageStyle = “font-family:helvetica;font-size:12pt;font-weight:bold;”

‘número total de páginas “paginável” recordset

p.PageCount = 3

‘conjunto da QueryString usada pelo recordset para gerar filas

p.QueryString = qs

‘definir a página onde cada página link deve apontar

p.PageUrl = Request.ServerVariables(“SCRIPT_NAME”)

‘response.write o menu para o browser

p.RenderMenu

‘liberar memória

Set p = Nothing

‘impressões: [1] 2 3 [Próxima>>]

‘Isso é exatamente a mesma classe que uso para fazer a paginação

código:

<%

Class NaviPage

       Private Sub Class_Initialize()

             CurrentPage = 1

             PageCount = 1

             QueryString = “”

             PageUrl = Request.ServerVariables(“SCRIPT_NAME”)

             LinkStyle = “font-family:helvetica;font-size:10pt;”

             SelectedPageStyle = “font-family:helvetica;font-size:12pt;font-weight:bold;”

             Width = “100%”

       End Sub

       Public Property Get CurrentPage

             dim p

             on error resume next

             p = clng(Request(“Page”))

             if err.number <> 0 then p = 1

             if p < 1 then p = 1

             CurrentPage = p

       End Property

       Public Property Let CurrentPage(byval page)

             CurrentPage = page

       End Property

       Public PageCount

       Public QueryString

       Public PageUrl

       Public LinkStyle

       Public SelectedPageStyle

       Public Width

       Public Sub RenderMenu()

             Dim strTempNavL, strTempNavR, strTempNavC, iEverySinglePage

             ‘input validação

             if clng(PageCount) < 1 Then

                    PageCount = 1

             end if

             If clng(CurrentPage) > clng(PageCount) Then

                    CurrentPage = PageCount

             End If

             If clng(CurrentPage) < 1 Then

                    CurrentPage = 1

             End If

             if Len(Trim(QueryString)) > 0 Then

                    if Left(QueryString, 1) = “&” Then

                           QueryString = Mid(QueryString, 2)

                    End If

             End If

             ‘criação menu

             If clng(CurrentPage) <> 1 Then

                    strTempNavL = strTempNavL & “
                           clng(CurrentPage) – 1 & “&” & QueryString & _

                           “”" style=”"” & LinkStyle & “”">[<< back]”

             else

                    strTempNavL = strTempNavL & “ ”

             End If

             If clng(CurrentPage) < clng(PageCount) Then

                    strTempNavR = strTempNavR & “
                           clng(CurrentPage) + 1 & “&” & QueryString & _

                           “”" style=”"” & LinkStyle & “”">[next >>]”

             else

                    strTempNavR = strTempNavR & “ ”

             End If

             iEverySinglePage = 1

             Do Until iEverySinglePage > PageCount

                    if iEverySinglePage = clng(CurrentPage) then

                           strTempNavC = strTempNavC & “[
                                  SelectedPageStyle & """>" & iEverySinglePage & _

                                  "]  ”

                    else

                           strTempNavC = strTempNavC & “
                                  “”" href=”"” & PageUrl & “?page=” & _

                                  iEverySinglePage & “&” & QueryString & “”">” & _

                                  iEverySinglePage & “  ”

                    end if

                    iEverySinglePage = iEverySinglePage + 1

             LOOP

             ‘render nav menu

             response.write “
” & vbCrLf
             response.write “
” & vbCrLf
             response.write “
” & vbCrLf
             response.write “
” & vbCrLf
             response.write “
” & vbCrLf
             response.write “
” & vbCrLf
              response.write “

” & vbCrLf

             response.write strTempNavL & vbCrLf

             response.write “
” & vbCrLf

             response.write strTempNavC & vbCrLf

             response.write “
” & vbCrLf

             response.write strTempNavR & vbCrLf

             response.write “

” & vbCrLf

       End Sub

End Class

%>

Desenvolvendo um game educativo em Java

Elzo — Mon, 08 Mar 2010 14:05:44 +0000

Bom hoje nós vamos desenvolver um game educativo bem simples em Java, desenvolvi esse game para ensinar as pessoas que estão começando a mexer no computador e tem problemas com o mouse, ele consiste em vários quadradinhos na tela e a jogador tem que ir passando o mouse no quadradinho vermelho que vai mudando de lugar.

O game que vamos desenvolver tem essa aparência, são 30 quadradinhos que ao passar o mouse eles vão mudando de cor, mas eles têm que passar o mouse em uma ordem se não, não tem sentido o game né.

Pronto, vamos por a mão no código ehehehh.

Primeiro vamos criar uma classe para fazer os quadradinhos, então crie a classe Quadrado.

O quadrado tem que ter, posição X, Y, largura, altura, e uma cor.

import java.awt.Color;

public class Quadrado {
        private int x;
        private int y;
        private int width;
        private int height;
       private Color cor;

    public Quadrado(int x, int y, int width, int height) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }

public Quadrado(){

}

    public Color getCor() {
        return cor;
    }

    public void setCor(Color cor) {
        this.cor = cor;
    }

    public int getHeight() {
        return height;
    }

    public void setHeight(int height) {
        this.height = height;
    }

    public int getWidth() {
        return width;
    }

    public void setWidth(int width) {
        this.width = width;
    }

    public int getX() {
        return x;
    }

public void setX(int x) {
this.x = x;

}

    public int getY() {
        return y;
    }

    public void setY(int y) {
        this.y = y;
    }
}

Pronto já temos os quadradinhos precisamos criar agora nossa janela, a janela é mais complicada porque temos que criar um modelo de como vai ser a tela, para depois quando formos criar a tela do game programaremos somente que vamos usar.

A Classe Janela deverá estender a JFrame, pois assim teremos uma janela, precisaremos também implementar duas interfaces a MouseListener e a MouseMotionListener para controlarmos o mouse, deixaremos essa classe abstrata.

Então ficará assim:

import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import javax.swing.JFrame;

public abstract class Janela extends JFrame implements MouseListener, MouseMotionListener{
}

Você não precisa, mas é interessante implementar todos os métodos das classes MouseListener, MouseMotionListener, porque depois só sobrescrevemos só aqueles que vamos usar entendeu??? Hehehhe.

Então até agora a classe Janela está assim:

public abstract class Janela extends JFrame implements MouseListener, MouseMotionListener {

public void mouseClicked(MouseEvent e) {
}

public void mousePressed(MouseEvent e) {
}

public void mouseReleased(MouseEvent e) {
}

public void mouseEntered(MouseEvent e) {
}

public void mouseExited(MouseEvent e) {
}

public void mouseDragged(MouseEvent e) {
}

public void mouseMoved(MouseEvent e) {
}
}

Continuando a classe janela precisamos de uma variável para guardar em que fase nos estamos e precisamos também criar os quadradinhos.

    private int numeroDaFase;
    public int getNumeroDaFase() {
        return numeroDaFase;
    }

    public void setNumeroDaFase(int numeroDaFase) {
        this.numeroDaFase = numeroDaFase;
    }

protected ArrayList quad = new ArrayList();

    public ArrayList getQuad() {
        return quad;
    }

    public void setQuad(ArrayList quad) {
        this.quad = quad;
    }

Vamos criar inicializar os componentes e fazer um teste?

Para isso precisamos criar mais outro método e depois uma classe, o método é o inicializarComponetes(), assim inicializamos tudo em um único método assim fica mais fácil depois.

public void inicializaComponetes() {
    addMouseListener(this);
    addMouseMotionListener(this);
     setResizable(false);
     setSize(740, 640);
     setTitle(“:: Elzo Brito – Game ::”);
     setDefaultCloseOperation(EXIT_ON_CLOSE);
    show();
}

Agora vamos criar a classe MinhaTela com ela vamos criar a tela, no primeiro momento só para testar a classe Janela depois vamos usar ela para ser nossa tela.

public class MinhaTela extends Janela{

public MinhaTela(){

inicializaComponetes();

}

Pronto agora na classe Main crie uma instancia de MinhaTela e veja o que fizemos até agora…

public class Main {

public static void main(String[] args) {

MinhaTela mt = new MinhaTela();

}

Pode não parecer, mas 50% do nosso game já está pronto J, vamos dar continuidade e desenhar na tela os quadrados que compõe a tela, para isso vamos criar outra classe para facilitar nosso trabalho, criaremos então a classe Fase é nela que estarão os elementos que vamos usar no jogo.

A classe Fase tem um array com 30 quadrados que formarão a tela, alem dos dos métodos setQ() que servirá para setar a posição dos quadrados na classe e getQ() para recuperar os quadrados depois, o construtor da classe cria os 30 quadradinhos já passando a posição que cada um vai estar na tela.

public class Fase {

private Quadrado[] q = new Quadrado[30];

public Quadrado[] getQ() {

return q;

}

public void setQ(Quadrado[] q) {

this.q = q;

}

public Fase() {

Quadrado[] q = new Quadrado[30];

q[0] = new Quadrado(20, 40, 100, 100);

q[1] = new Quadrado(140, 40, 100, 100);

q[2] = new Quadrado(260, 40, 100, 100);

q[3] = new Quadrado(380, 40, 100, 100);

q[4] = new Quadrado(500, 40, 100, 100);

q[5] = new Quadrado(620, 40, 100, 100);

q[6] = new Quadrado(20, 160, 100, 100);

q[7] = new Quadrado(140, 160, 100, 100);

q[8] = new Quadrado(260, 160, 100, 100);

q[9] = new Quadrado(380, 160, 100, 100);

q[10] = new Quadrado(500, 160, 100, 100);

q[11] = new Quadrado(620, 160, 100, 100);

q[12] = new Quadrado(20, 280, 100, 100);

q[13] = new Quadrado(140, 280, 100, 100);

q[14] = new Quadrado(260, 280, 100, 100);

q[15] = new Quadrado(380, 280, 100, 100);

q[16] = new Quadrado(500, 280, 100, 100);

q[17] = new Quadrado(620, 280, 100, 100);

q[18] = new Quadrado(20, 400, 100, 100);

q[19] = new Quadrado(140, 400, 100, 100);

q[20] = new Quadrado(260, 400, 100, 100);

q[21] = new Quadrado(380, 400, 100, 100);

q[22] = new Quadrado(500, 400, 100, 100);

q[23] = new Quadrado(620, 400, 100, 100);

q[24] = new Quadrado(20, 520, 100, 100);

q[25] = new Quadrado(140, 520, 100, 100);

q[26] = new Quadrado(260, 520, 100, 100);

q[27] = new Quadrado(380, 520, 100, 100);

q[28] = new Quadrado(500, 520, 100, 100);

q[29] = new Quadrado(620, 520, 100, 100);

setQ(q);

}

Agora vamos terminar a classe Janela(), nela vamos criar mais um método e sobrescrever outro, o método que vamos criar é o MyTela(), ele servirá para setar a posição dos quadradinhos na classe janela().

public void myTela(){

Fase f = new Fase();

Quadrado[] q = new Quadrado[30];

q = f.getQ();

for(int i=0;i<30;i++){

q[i].setCor(Color.BLACK);

quad.add(q[i]);

}

q[0].setCor(Color.red);

}

Pronto ele cria uma instancia de fase e adiciona no nosso ArrayList a posição de todos os quadradinhos, agora precisamos sobrescrever o método Paint(Graphics g) ele é responsável por desenhar a tela e como queremos desenhar os quadradinhos na tela então precisamos dar uma arrumada nele.

@Override

public void paint(Graphics g) {

g.setColor(Color.WHITE);

g.fillRect(0, 0, 20, 650);

g.fillRect(120, 0, 20, 650);

g.fillRect(240, 0, 20, 650);

g.fillRect(360, 0, 20, 650);

g.fillRect(480, 0, 20, 650);

g.fillRect(600, 0, 20, 650);

g.fillRect(720, 0, 20, 650);

g.fillRect(0, 0, 740, 40);

g.fillRect(0, 140, 740, 20);

g.fillRect(0, 260, 740, 20);

g.fillRect(0, 380, 740, 20);

g.fillRect(0, 500, 740, 20);

g.fillRect(0, 620, 740, 20);

for(int i=0;i<30;i++){

g.setColor(quad.get(i).getCor());

g.fill3DRect(quad.get(i).getX(), quad.get(i).getY(), quad.get(i).getWidth(), quad.get(i).getHeight(), true);

}

Quase pronto vamos alterar o método inicializaComponentes() para chamar o MyTela() pois se não, não conseguiremos desenhar a tela sem a posição dos quadradinho correto???

public void inicializaComponetes() {

addMouseListener(this);

addMouseMotionListener(this);

setResizable(false);

setSize(740, 640);

setTitle(“:: Elzo Brito – Game ::”);
setDefaultCloseOperation(EXIT_ON_CLOSE);

myTela();

show();

}

Como será que a tela ficou??

Só falta agora a lógica do game, como havíamos pensando antes, o nosso game é para pessoas que não sabem mexer com o mouse então quando passar o mouse no quadradinho vermelho ele tem que mudar de lugar forçando a pessoa a seguir-lo com o mouse, vamos então para a classe MinhaTela() pois é nela que iremos por um pouco da lógica do nosso game.

public void pintarQuad(int x){

try {

if (quad.get(x – 1).getCor() == Color.ORANGE) {

quad.get(x + 1).setCor(Color.RED);

quad.get(x – 1).setCor(Color.PINK);

quad.get(x).setCor(Color.ORANGE);

}

catch(java.lang.ArrayIndexOutOfBoundsException ex){

if(quad.get(0).getCor() == Color.RED){

quad.get(1).setCor(Color.RED);

quad.get(0).setCor(Color.ORANGE);

}

catch(java.lang.IndexOutOfBoundsException ex){}

repaint();

}

Adicione esse método pintarQuad(int x), ele serve para pintar o quadrado onde passamos o mouse, se passamos o mouse no 1º quadradinho ele deve ficar amarelo e o 2º quadradinho deve ficar vermelho se passarmos o mouse no 2º quadradinho ele deve ficar amarelo o 3º quadradinho deve ficar vermelho e o 1º quadradinho fica rosinha.

Para finalizar precisamos do movimento do mouse correto? Isso então vamos criar uma classe para trabalharmos só com o movimento do mouse, vamos criar então a classe FaseMouseMove() nela trabalharemos o movimento do mouse sobre os quadradinhos, ela deve importar o MouseEvent, estender a MinhaTela() e sobrescrever o método mouseMoved(MouseEvent e).

import java.awt.event.MouseEvent;

public class FaseMouseMove extends MinhaTela{

@Override

public void mouseMoved(MouseEvent e) {

for(int i=0;i<30;i++){

if(e.getX() > quad.get(i).getX() && e.getX() < (quad.get(i).getWidth() + quad.get(i).getX()) && e.getY() > quad.get(i).getY() && e.getY() < (quad.get(i).getHeight()+quad.get(i).getY())){

pintarQuad(i);

}

Esse IF gigante testa a condição do ponteiro do mouse, se o ponteiro do mouse estiver dentro do quadradinho ele chama então o metodo pintarQua(int i) passando o número do quadradinho que o mouse estar em cima, pronto o game esta criado basta apenas criar uma instancia da classe FaseMouseMove() na classe Main() e pronto é só jogarrrr

public class Main {

public static void main(String[] args) {

FaseMouseMove fmm = new FaseMouseMove();

}

Pronto galera espero que tenham gostado do artigo, quem quiser fazer o download do projeto basta clicar no link abaixo, ele foi desenvolvido no NetBeans.

http://elzobrito.com/arquivos/desenvolvimento/gameeducativo/GameEducativo.zip

Plugin Twitter para o Mootools – Parte 1

Marcio Silva — Tue, 27 Oct 2009 15:53:20 +0000

Olá Pessoal,

Nesta primeira parte será mostrado a construção de um plugin/extensão do Mootools para recuperar tweets do twitter desejado. Para o correto funcionamento deste tutorial você deverá baixar a versão 1.2 ou superior do mootools.

Agora, crie um arquivo chamado Twitter.js, é nele que o plugin será desenvolvido. Utilizando o ferramental disponilizado pelo mootools a implementação inicia-se com a definição da classe Twitter:

var Twitter = new Class ({

	Implements : [Options,Events],

	getOptions : function()
	{
		return {
			url :  "http://localhost/twitter.php?user_timeline=", //proxy para carregar os tweets
			refreshTime : 5000, //intervalo de tempo para atualizar os tweets
			user : 'mapsiva', //login do usuário
			count : 2, //quantidade de tweets que devem ser retornados
			container : $('twitterContainer') //elemento HTML que onde os tweets serão listados
		};
	},

	initialize: function (options)
	{
		this.setOptions(this.getOptions(), options);
	},

No trecho de código acima apenas definimos a classe Twitter, é informado que será estendido as classes Events e Options do mootools.

O método initialize(), é o construtor da classe Twitter, portanto quando fizermos new Twitter() este método será invocado. Nele apenas são recuperados os opções como parâmetro.
O método getOptions() servirá para retornar as opções configuráveis de nosso plugin.

        getPublicTimeLine : function ()
	{
		var url = this.options.url + this.options.user ;

		this._ajax (url);
	},

Por opção própria, adotei todos os métodos “privados” ou internos começados por ‘_’ (anderline). O método getPublicTimeLine() é responsável por requisitar os tweets do usuário configurado.

        _ajax : function (_url)
	{
		new Request(
		{
			method: 'get',
			url: _url,
			data: {'count' : this.options.count},
			onRequest: this._onRequest.bind(this),
			onComplete: this._onComplete.bind(this),
			onFailure: this._onFailure.bind(this)

		}).send();
	},

O método _ajax() faz uma requição via Ajax para o proxy de tweets configurado, por que não podemos fazer requisições direto ao site do twitter via javascript por razões de segurança. Algumas funcões Handler são informadas.

        _onComplete : function (response)
	{
		var tweets = JSON.decode (response);

		tweets.each (this._showTweet.bind(this));
	},

O método _onComplete() será invocado quando a requisição resultar em sucesso, a requisição feita pelo proxy ao Twitter retornará um conjunto de dados no formado JSON, portanto devemos decodifiá-los utilizando a JSON do mootools. Logo após, a função _showTweet() se responsabiliza por mostrar os tweets no HTML.

	_onRequest : function (response)
	{
		//TODO
	},

O método _onRequest() é invocado quando a requisição de tweets é iniciada, com ela possível mostrar um gif com um aguarde para o usuário, que posteriormente pode ser removido no método _onComplete().

	_onFailure : function (xhr)
	{
		//TODO
	},

O método _onFailure() será invocado quando ocorrer um erro na requisição.

        _showTweet : function (item, index, array)
	{
		if (!$defined(this.options.container))
			return;

		var tweet = new Element ('div').addClass('tweetItem').set('html', item.text).injectInside(this.options.container);
	}
});

Para mostrar um tweet, o método _showTweet() verifica a existência do container onde os tweets serão inseridos. Um elemento DIV é criado com o atributo class setado para tweetItem, dessa forma você poderá construir seu CSS para formatá-lo da forma que desejar.

Twitter.implement(new Options);
Twitter.implement(new Events);

Logo após a definição da classe os objetos da classe Options e Events utilizando o implement do mootools são instanciados.

Para executar a busca de tweets logo após o seu site carregar basta colocar o código ao fim do arquivo Twitter.js ou logo após a inclusão do mesmo na página HTML.

window.addEvent('domready', function()
{
	var twitter = new Twitter();

	twitter.getPublicTimeLine ();
});

O proxy PHP chamado twitter.php tem a finalidade de buscar os tweets recebendo a quantidade de tweets a serem buscados e de que usuário eles são. Para realizar essa busca será utilizado a biblioteca CURL do PHP, verifique se seu servidor Web possui esta biblioteca instalada, caso contrário deverá instalá-la.

Um exemplo de utilização deste plugin é mostrado no código HTML abaixo:

Pronto, com isso é possível recuperar os tweets de usuários via JS. Na parte 2 iremos definir os métodos que irão ‘parsear’ cada tweet incluindo os links, link para perfils como @mapsiva ou para #topics.

Gostaria de ajudar no desenvolvimento deste plugin? Acesse http://code.google.com/p/mootwitter/ ou mande email para marcio arroba marciosilva ponto net.

Website: http://marciosilva.net/
Twitter: http://twitter.com/mapsiva

Baixe os arquivos fontes deste tutorial.
http://www.mxstudio.com.br/wp-content/uploads/2009/10/twitter.zip

ASP + jQuery

X@nBuRzUm — Tue, 01 Sep 2009 01:05:16 +0000

jQuery é uma biblioteca que é projetada para ajudar desenvolvedores web com Javascript de uma maneira muito mais simples. Internamente, ele lida com um monte de bobagens que os desenvolvedores têm que trabalhar com em termos de incompatibilidades cross-browser e sua sintaxe e habilidades ,que resulta em muito menos código a ser escrito.

O cenário – uma Select box contendo os nomes das empresas do banco de dados Northwind, com o endereço e outros detalhes a ser recuperados de forma assíncrona quando a empresa é selecionada. Estes serão exibidos em uma área específica na página. Há uma diferença – para além da utilização de jQuery – em que os dados relativos aos detalhes da empresa será gerado como uma string JSON, ao invés de um trecho de html.

<%@LANGUAGE=”VBSCRIPT” CODEPAGE=”65001″%>

”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

strConn = “Data Source=127.0.0.1;Initial Catalog=NorthWind;Integrated Security=SSPI;”

Set Conn = Server.CreateObject(“ADODB.Connection”)

Conn.Open strConn

Set rs = Conn.Execute(“SELECT [CustomerID], [CompanyName] FROM [Customers]“)

If Not rs.EOF Then

arrCustomer = rs.GetRows

rs.Close

Set rs = Nothing

Conn.Close

Set Conn = Nothing

Else

rs.Close

Set rs = Nothing

Conn.Close

Set Conn = Nothing

Response.Write “

Algo errado ocorreu

”

End If

O VBScript se conecta a um banco de dados SQL Server local Northwind e obtém o ID e o nome da empresa para todos os clientes. Supondo-se que eles foram recuperados com êxito, eles são colocados em uma matriz através da metodo RecordSet.GetRows () . A matriz é iterada através de elementos

”>

Email:

”>

Senha:

”>

<% ‘FECHO O RS

set rs=nothing

‘fecha a conexao

call fechaconexao%>

Após, exibir os dados corretos,em um form, agora vamos atualizá-lo, como os novos dados digitados pelos user. Para atualizar os dados usando a SQL UPDATE é usada para atualizar os registros existentes em uma tabela.

SQL UPDATE Sintaxe

UPDATE table_name
SET column1=value, column2=value2,…
WHERE some_column=some_value

A cláusula WHERE especifica qual registro ou registros que devem ser atualizadas. Se você omitir a cláusula WHERE, todos os registros serão atualizados

Atualizar_action_treina.asp

<% ‘aplicação para fazer o update dos dados do form atualizar_form.asp

‘onde recupero todos os dados dos campos do form,dou um replace nos ‘ por “”

‘e crio a SQL para efetuar o update depois redireciono p/ administracao.asp

‘ com passagem de parametro na URL msg=2

option explicit

‘declaro as var

dim conexao, conDBQ, constring, rs, SQL, varcodigo, varlogin, varsenha, varemail

‘recupero as var

varcodigo=trim(request.form(“codigo”))

varlogin=trim(request.form(“login”))

varsenha=trim(request.form(“senha”))

varemail=trim(request.form(“email”))

‘ retiro qqer erro de digitaçao do user ,no caso ( aspas simples ‘)

varlogin=replace (varlogin,”‘”,”")

varsenha=replace (varsenha,”‘”,”")

varemail=replace(varemail,”‘”,”")

‘crio a conexao%>

<% ‘abro a conexao

call abreconexao

‘crio o rs

set rs=Server.createobject(“ADODB.Recordset”)

‘crio a SQL

SQL=”UPDATE login SET login=’”&varlogin&”‘,senha=’”&varsenha&”‘,email=’”&varemail&”‘ WHERE codigo=”&varcodigo&”"

rs.open SQL,conexao,1,3

if session(“login”) = “admin” then

response.redirect(“administracao_treina.asp?msg=2″)

else

response.redirect(“administracao1.asp?msg=2″)

end if

‘fecho o rs

set rs=nothing

‘fecho a conexao

call fechaconexao%>

Vejam também, que após realizar a atualização, o user é redirecionado para a pagina de administração, com um parâmetro na querystring, que será recuperado e exibido uma mensagem de sucesso.

Excluindo Dados

O mesmo conceito é usado para excluir os dados.

<% ‘excluir_form.asp recebe o codigo pela url, dou um request.querystring

‘e atribuo a varcodigo para poder fazer a SQL,monto um form com um input

‘ type hidden para passar o codigo para excluir_action.asp ( action do form)

option explicit

‘declaro as var

dim conexao, conDBQ, constring, rs, SQL, varcodigo

‘recupero a var

varcodigo=request.querystring(“codigo”)

if session(“login”) <> “admin” then

response.redirect(“administracao.asp?msgeof=11″)

else

‘crio a conexao%>

<% ‘abro a conexao

call abreconexao

‘crio o rs

set rs=Server.CreateObject(“ADODB.Recordset”)

‘crio a SQL

SQL=”SELECT * FROM login WHERE codigo=”&varcodigo&”"

rs.open SQL,conexao,1,3%>

Excluir Usuário

::

Excluir

Usuário

”>
<%’fecha o rs
set rs=nothing
‘fecha a conexao
call fechaconexao
end if%>

Código

Login

Senha

Email

<%=rs(“codigo”)%>

<%=rs(“login”)%>

<%=rs(“senha”)%>

<%=rs(“email”)%>

Nesta exclusão, antes de efetuar , verificamos se o suer está querendo excluir o “admin”, caso o user seja igual ao admin, ele é redirecionado para a pagina de administração com uma mensagem de erro.Aqui usando a SQL DELETE é usada para excluir linhas em uma tabela.

SQL DELETE Sintaxe

DELETE FROM table_name
WHERE some_column=some_value

Observe a cláusula WHERE na sintaxe DELETE. A cláusula WHERE especifica qual registro ou registros que deveriam ser suprimidas. Se você omitir a cláusula WHERE, todos os registros serão apagados!

Excluir_action_terina.asp

<% ‘aplicação para excluir os dados da base de dados do access,onde recupero

‘o codigo passado pelo excluir_form.asp do hidden,que no mesmo jah verifica

‘se o session = do admin (xanburzum);

‘depois de recuperar o codigo crio a conexao, o rs , o SQL dois SQL’z

‘um para selecionar o login para verificar se é o admin o outro

‘para executar a exclusaun e abro

‘se o rs(“login”) = xanburzum redireciono para administracao?msgeof=12

‘onde lá receberá uma popup k naun pode me excluir,senaun executa o sql

Option explicit

‘declaro as var

dim conexao, conDBQ, constring, rs, SQL, rsdel, SQLdel, varcodigo

‘recupero a var

varcodigo=Trim(request.form(“codigo”))

‘crio a conexao %>

<% ‘abro a conexao

call abreconexao

‘crio o rs

set rs=server.createobject(“ADODB.Recordset”)

‘crio o SQL

SQL=”SELECT login FROM login WHERE codigo=”&varcodigo&”"

rs.open SQL,conexao,1,3

‘verifico atravez do select se o login é do admin

if rs(“login”)= “admin” then

response.redirect(“administracao.asp?msgeof=12″)

set rs=nothing ‘fecho o rs do select

else

‘crio o rsdel para excluir o registro

set rsdel=server.createobject(“ADODB.Recordset”)

SQLdel=”DELETE FROM login WHERE codigo=”&varcodigo&”"

rsdel.open SQLdel,conexao,1,3

response.redirect(“administracao_treina.asp?msg=3″)

set rsdel=nothing

end if

‘fecha a conexao

call fechaconexao %>

Inserindo Dados

Com um formulário de entrada de dados para o cliente , iremos recuperar os mesmos, e submeter a uma pagina para inserir.

Incluir_form_treina.asp

<% ‘aplicação para efetuar a inclusao de dados

‘onde através de um form com os campos p/ inserir os valores

‘e serem postados para o inserir_action.asp

Option explicit

‘declaro as var

dim varmsgeof

varmsgeof=request.querystring(“msgeof”) ‘no caso de erro no incluir_action

%>

<%

if varmsgeof <> “” then

response.write(“”)

end if

if Session(“logado”)=”falso” then

response.write(“”)

end if

%>

Incluir Login

::

Cadastro

de Login

Entre

com o login:

Entre

com sua senha:

Entre

com o email:

Mas ,antes de inserir, iremos verificar através de uma consulta, se os dados , já existem no banco, caso exista, iremos redirecionar o user para a pagina de formulário novamente, com uma mensagem de erro, faremos isso através da SQL:

“SELECT login FROM login WHERE login=’”&varlogin&”‘”

rsselect.open SQLselect,conexao,1,3

if not rsselect.eof then

response.redirect(“incluir_form_treina.asp?msgeof=1″)

Precebam que nesta parte do código, if not rsselect.eof then, se não for final do arquivo, ou seja, já existe os dados, caso contrário, inserimos ele, e redirecionamos, para a pagina de administração com sucesso.

Incluir_action_treina.asp

<% ‘incluir_action.asp => fazer a inclusao no BD, antes fazendo uma verificaçao

‘no BD através de SQL Select if not rs.eof then

‘redireciono para incluir_form.asp?msgeof=1 else

‘incluo no bd atraves da SQL Insert e redireciono para adiministraçao.asp?msg=1

‘e lá receberá um mensagem de sucesso

Option explicit

‘declaro as var

dim varlogin, varemail, varsenha, conexao, conDBQ, constring, rsselect, SQLselect, rsinsert, SQLinsert

‘recupero todos os dados

varlogin=trim(request.form(“login”))

varsenha=trim(request.form(“senha”))

varemail=trim(request.form(“email”))

‘crio a conexao

%>

<% ‘abrir a conexao

call abreconexao

‘crio o rsselect para verificar se os dados jah estaun cadastrados

set rsselect=server.createobject(“ADODB.Recordset”)

‘crio o SQLselect

SQLselect=”SELECT login FROM login WHERE login=’”&varlogin&”‘”

rsselect.open SQLselect,conexao,1,3

if not rsselect.eof then

response.redirect(“incluir_form_treina.asp?msgeof=1″)

set rsselect=nothing

else

‘crio o rsinsert para inseiri os dados no bd

set rsinsert=server.createobject(“ADODB.Recordset”)

‘crio o SQLinsert pra incluir no bd

SQLinsert=”INSERT INTO login(login,senha,email) values(‘”&varlogin&”‘,’”&varsenha&”‘,’”&varemail&”‘)”

rsinsert.open SQLinsert,conexao,1,3

response.redirect(“administracao_treina.asp?msg=1″)

set rsinsert=nothing

end if

call fechaconexao %>

Pesquisando Dados

Para efetuar a busca nos registro da BD,onde através de um form com input type text onde o user entra com pesquisa que será submetida para o pesquisa_action.asp,fazendo a SQL, nesta aplicação darei um request da varmsgeof ,que irá retornar no caso de erro no action fazendo um if e mostrando um window.open.Usamos o operador LIKE ,que é usado em uma cláusula WHERE para procurar um determinado padrão em uma coluna.

Sintaxe SQL LIKE

SELECT column_name(s)
FROM table_name
WHERE column_name LIKE pattern

Pesquisa_form_treina.asp

<%

Option Explicit

‘declaro as var

dim varmsgeof

‘recupero a var

varmsgeof=request.querystring(“msgeof”)

%>

<%

if varmsgeof = 1 then ‘porque naun achou nada na SQL select

response.write(“”)

end if

‘no caso de fazer uma pesquisa mais avançada com 2 tab.

‘eu aqui criaria a conexao,crio o rs, crio am SQL

‘sql=”select * from categoria order by categoria”

‘rs.open sql,conexao,1,3

‘crio o form com action para pesquisa_action.asp

‘crio o

‘{%fecha o rs

‘set rs=nothing

‘fecha a conexao

‘call fechaconexao

‘crio o input type text da pesquisa

‘

%>

Pesquisa

Pesquisa

Entre

com a Pesquisa:

Pesquisa_action_treina.asp

<%

Option Explicit

‘declaro as var

dim conexao, conDBQ, constring, rs, SQL, varpesquisa

‘recupero a pesquisa

varpesquisa=trim(request.form(“pesquisa”))

‘crio a conexao

%>

<%’abro a conexao

call abreconexao

‘crio o rs

set rs=server.createobject(“ADODB.Recordset”)

‘crio a SQL

SQL=”SELECT * FROM login WHERE login LIKE ‘%”&VARPESQUISA&”%’ ORDER BY login”

rs.open SQL,conexao,1,3

if rs.eof then

response.redirect(“pesquisa_form_treina.asp?msgeof=1″)

else%>

Dados Encontrados

<% while not rs.eof %>
<%rs.movenext
wend%>
<% ‘fecha o rs
set rs=nothing
‘fecha a conexao
call fechaconexao
end if %>

Pesquisa

de <%= Ucase(varpesquisa)%>

Código

Login

Senha

Email

<%=rs(“codigo”)%>

<%=rs(“login”)%>

<%=rs(“senha”)%>

<%=rs(“email”)%>

Foram

encontrados <%=rs.recordcount%> registros para sua pesquisa.

Página

<%=rs.pagecount%> de <%=rs.pagecount%>

Resolução

mínima 800×600.

© Copyright 2000-2002 – Todos os direitos reservados

Recuperando Senha

Vários sistemas, utilizam este recurso, para que quando o user esquecer ou perder sua senha, a mesma seja enviada via email para o “esquecidinho”, teremos um formulário, omde o user irá entrar com seu login, nome e email, com esses dados faremos uma consulta no bd e depois enviar a senha por email, este é um simples método, mas pode mos implementar muito mais, para ter maior segurança, como por exemplo validar algumas outros informações.

Esqsenha_form_treina.asp

<% Option Explicit

‘declara as var

dim varmsgeof,varmsg

‘recupera a msgeof do erro no login_action

varmsgeof=request.querystring(“msgeof”)

varmsg=request.querystring(“msg”)%>

<%

if varmsg = 1 then

response.Write(“”)

end if

Select case varmsgeof

case 1 ‘nome vazio

response.write(“”)

case 2 ‘login vazio

response.write(“”)

case 3 ‘email vazio

response.write(“”)

case 4 ‘login incorreto

response.write(“”)

case 5 ‘email incorreto

response.write(“”)

end select %>

Recuperação de senha

::

Entre com as informções para receber sua senha por email.

::

Por favor entre com seu login e email

Nome:

Login:

Email:

Abaixo o action que irá validar e enviar a senha.

Esqsenha_action_treina.asp

<% Option Explicit

‘ Declaro as variaveis

Dim varnome,varlogin,varemail,conDBQ,constring,conexao,rs,SQL,objmail

‘ recupero as variaveis

varnome=Trim(request.Form(“nome”))

varemail=Trim(request.Form(“email”))

varlogin=Trim(request.Form(“login”))

if varnome = “” then

response.redirect(“esqsenha_form_treina.asp?msgeof=1″)

end if

if varlogin = “” then

response.redirect(“esqsenha_form_treina.asp?msgeof=2″)

end if

if varemail = “” then

response.redirect(“esqsenha_form_treina.asp?msgeof=3″)

end if

‘ crio a conexao

%>

<%

‘ abro a conexao

call abreconexao

‘ crio o rs

Set rs= server.createobject(“ADODB.Recordset”)

‘ crio o SQL

SQL=”SELECT * FROM login WHERE login=’”&varlogin&”‘”

rs.open SQL,conexao,1,3

if rs.eof then

response.Redirect(“esqsenha_form_treina.asp?msgeof=4″)

else

if LCase(varemail) <> LCase (rs(“email”)) then

response.Redirect(“esqsenha_form_treina.asp?msgeof=5″)

else

‘ crio o objeto para envio de email

Set objmail= Server.CreateObject(“CDONTS.NewMail”)

objmail.from=”xanburzum@terra.com.br”

objmail.to=varemail

objmail.subject=”Sua senha”

objmail.body=”Caro(a) ” & varnome & ” segue sua senha: ” &rs(“senha”)

objmail.send

set objmail=nothing

end if

end if

response.Redirect(“esqsenha_form_treina.asp?msg=1″)

call fechanexaonexao

%>

Finalizando agora teremos este arquivo que permite ao usuário a alterar sua senha, para isso é preciso fornecer a senha atual , a nova senha e redigitar a nova senha para confirmação.

Alterasenha_form_treina.asp

Administradores

Alteração

de senha do Login: <%=UCase(Session(“Login”))%>

Senha

atual :

Nova

senha:

Confirma

senha:

Abaixo o arquivo que irá trocar a senha.

Alterasenha_action_treina.asp

<%

Option Explicit

‘Admin – alteração de senhas

%>

<%

Dim strSQL, Conexao, rs, varSenha, varSenhaAtual, varSenhaNova, varSenhaConfirma, varLinha

varSenhaAtual = Trim(Request.Form(“SenhaAtual”))

varSenhaNova = Trim(Request.Form(“SenhaNova”))

varSenhaConfirma = Trim(Request.Form(“SenhaConfirma”))

varSenha = Session(“Senha”)

varSenha = Replace(varSenha, “‘”, “”)

varSenhaNova = Replace(varSenhaNova, “‘”, “”)

varSenhaConfirma = Replace(varSenhaConfirma, “‘”, “”)

IF varSenha = varSenhaAtual AND varSenhaNova = varSenhaConfirma then

strSQL = “UPDATE Login SET TXT_Senha = ‘” & varSenhaNova & “‘ “

strSQL = strSQL & “WHERE TXT_Nome = ‘” & Session(“Login”) & “‘”

‘abre a conexao

Call abre_conexao

‘executa a instrução SQL

Set rs = Conexao.Execute(strSQL)

‘fecha a conexao

Call fecha_conexao

Set rs = Nothing

varLinha = 1

Else

varLinha = 2

End IF

%>

<%
IF varlinha = 1 then
%>

<%
Else
%>

<%
End If
%>

Senha

alterada com

S

U C E S S O ! ! !

!

Senhas

nova e confirma estão

I N C O R R E T A S

! ! !

E por ultimo , a apgina de erro.

Erro_treina.asp

Erro em tempo de execução

–>

ERRO

Ocorreu

algum erro da seguinte procedência:

# inclusão, login inválido, senha

incorreta, logon ativo, dados pendentes #

Resolução

mínima 800×600.

© Copyright 2000-2014 – Todos os direitos reservados

Fazendo LogOff

Terminar_treina.asp

<%response.buffer=true%>

<%Session.abandon%>

Encerrar sessão

Obrigado

<%=Ucase(session(“login”)) %>

Você

saiu da sessão Restrita.

Resolução

mínima 800×600.

© Copyright 2000-2002 – Todos os direitos reservados

E a pagina de sucesso

Sucesso_treina.asp

Sucesso

Sucesso

Operação

realizada com sucesso. Obrigado <%=Ucase(session(“login”)) %>

Resolução

mínima 800×600.

© Copyright 2000-2014 – Todos os direitos reservados

Usando jQuery para cadastrar dados

Ted k' — Thu, 26 Feb 2009 12:49:10 +0000

A linguagem em si para fazer o cadastramento no banco não é o foco no momento, usei ASP com JScript para isso e usei o jQuery com efeito .fadeIn(”slow”); para isso então vamos lá:

Criei um arquivo chamado funcao_jquery.js para colocar a função de efeito do jQuery:

O Script completo e comentado para ter uma idéia de como funciona:

funcao_jquery.js
————————–
$(document).ready(function(){
$(‘#btn_enviar’).click(function(){
// Pega valor dos campos Nome e E-Mail
var nome_post = $(‘#Nome’).val();
var email_post = $(‘#EMail’).val();
// Envia para a função criada em ASP
$.post(“Cadastro_JQuery.asp?Cadastrar=Ok”,{nome: nome_post, email: email_post},function(){
// Lista dentro de uma UL>LI os dados postados
$(“ul li:last”).after(”

” + nome_post + ” : ” + email_post + “

“).next().fadeIn(“slow”);
});
// Apaga os Dados do Campo Nome e E-Mail
$(‘#Nome’).val(“”);
$(‘#EMail’).val(“”);

return false;
});
});
————————–
Na tela inicial temos esse modelo aqui com campo de Nome e E-Mail só para exemplo:

Quando você cadastra ele gera uma LI dinamicamente sem refresh e com efeito fade:

Segue o código completo:
————————–
<%@ Language=”JavaScript” %>
<%
// Conexao com o Banco de Dados
var Conexao = Server.CreateObject(“Adodb.Connection”);
Conexao.ConnectionString = “Driver=MySQL ODBC 3.51 Driver; DataBase=paineldevendas13; Server=localhost; Uid=root; PassWord=root;”;
Conexao.Open;
%>

JQuery Cadastrando com ASP

JQuery Cadastrando com ASP

”+rs(“Nome”)+” : “+rs(“EMail”)+”

INSIRA DADOS NO BANCO

<%
// Função para cadastrar no banco
if (Request.QueryString(“Cadastrar”) == “Ok”) {
Conexao.Execute(“Insert Into Teste (Nome, EMail) Values (‘”+Request.Form(“Nome”)+”‘, ‘”+Request.Form(“EMail”)+”‘)”);
Response.Write(“”);
}
%>
————————–
Baixar : jquery-1.2.6.js

Pesquisa de <%= Ucase(varpesquisa)%>

Código	Login	Senha	Email
<%=rs(“codigo”)%>	<%=rs(“login”)%>	<%=rs(“senha”)%>	<%=rs(“email”)%>
Foram encontrados <%=rs.recordcount%> registros para sua pesquisa.
Página <%=rs.pagecount%> de <%=rs.pagecount%>