Como configurar meu email no Outlook Express com a opção SSL

Configuração de E-mail com a opção SSL

1º Passo – Abra o Outlook Express e clique em Ferramentas e em seguida Contas.

como-configurar-meu-email-no-outlook-express1

2º Passo – Clique em Adicionar Email.

como-configurar-meu-email-no-outlook-express2

3º Passo – Nessa janela que abriu digite seu nome (o nome que aparecerá nos email). E clique em Avançar.

como-configurar-meu-email-no-outlook-express3

 

4º Passo – Informe seu endereço de e-mail e clique em Avançar.

como-configurar-meu-email-no-outlook-express4

 

5º Passo – Selecione o tipo do seu servidor, que neste caso sera o POP3. Informe o endereço de entrada e saída fornecidos pelo seu provedor (mail.yesbr.com.br).

como-configurar-meu-email-no-outlook-express5

 

6º Passo – Insira seu endereço de email e sua senha. Depois clique em Avançar.

como-configurar-meu-email-no-outlook-express6

7º Passo – Feito as configurações necessárias clique em Concluir.

como-configurar-meu-email-no-outlook-express7

8º Passo – Na janela de Contas na Internet clique em Propriedades.

como-configurar-meu-email-no-outlook-express8

9º Passo – Nessa nova janela insira seu nome na Conta de email e clique na aba Servidores.

como-configurar-meu-email-no-outlook-express9

10º Passo – Selecione “Meu servidor requer autenticação” e em seguida clique em Configurações.

 

como-configurar-meu-email-no-outlook-express10

11º Passo – Na janela que abriu veja se está selecionado a opção “Usar as configurações do servidor de entrada de emails”, caso não esteja selecionado selecione-o e clique em OK.

como-configurar-meu-email-no-outlook-express11

12º Passo – Clique na aba Avançado.como-configurar-meu-email-no-outlook-express12

13º Passo – Agora selecione as opções de SSL para dos emails de entrada e saída. Feitas as alterações clique em OK.

como-configurar-meu-email-no-outlook-express13

14º Passo – Depois de feito as devidas configurações clique em Fechar, e começe a usar seu Outlook Express normalmente.

 

como-configurar-meu-email-no-outlook-express14

 

Opção de salvar cópia no servidor

Caso queira deixar uma cópia das mensagens no servidor a fim de poder acessar de vários computadores ao mesmo tempo os mesmos emails, porém:

Atenção -> neste caso há a necessidade de às vezes acessar o webmail para APAGAR as mensagens no servidor para não lotar a caixa de e-mail, então usar isso com cuidado, só em último caso.

Entre em Ferramentas – Contas – Propriedades. Clique na aba Avançado e selecione a opção “Deixar uma cópia das mensagens no servidor”.

como-configurar-meu-email-no-outlook-express15

Validação de campos usando jQuery

Hoje iremos usar uma linguagem de programação conhecida com jQuery para validar os campos, ou seja no exemplo de um formulário de cadastro onde os usuários não podem deixar o nome, e-mail ou os outros campos em branco, para isso iremos criar o formulário onde ele basicamente vai fazer a seguinte verificação “ se o campo nome estiver vazio vou avisar ao usuário que este campo não pode ser vazio”, ou alguma outra mensagem que você queira colocar, por exemplo “este campo não pode estar vazio” para isso iremos usar um formulário padrão de envio de e-mail.

Antes de podermos brincar com o jQuery precisamos fazer o download de 2 arquivos, o plugin de validação e o jQuery, os arquivos estão dispostos nos seguintes link abaixo:

Baixe o plugin jQuery Validate
Baixe o jQuery aqui

No segundo exemplo você não precisa baixar o arquivo, basta copiar o código que ele gera e copiar em algum arquivo, para que seja usado depois.

Crie um novo arquivo com o seguinte código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemplo de validação de campos com jQuery - YESbr Agência Web</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>

<body>
</form>
<form id="formularioContato" onSubmit="return validar(this);" action="" method="post">
  <table width="577" border="0" align="center" cellpadding="5" cellspacing="0">
    <tr>
      <td colspan="3" align="center" scope="col"><span>Fale Conosco</span></td>
    </tr>
    <tr>
      <td width="123"><div align="right"><strong>Nome(*) </strong></div></td>
      <td width="432"><input type="text" name="nome" size="50" /></td>
    </tr>
    <tr>
      <td><div align="right"><strong>E-mail(*)</strong></div></td>
      <td><input type="text" name="email" size="50" /></td>
    </tr>
    <tr>
      <td><strong><div align="right">Mensagem(*)</div></strong></td>
      <td><textarea name="mensagem" cols="50" rows="5"></textarea></td>
    </tr>
    <tr>
      <td colspan="3" align="center"><input type="submit" name="Enviar" value="Enviar " />
        <input type="reset" name="Limpar" value="Limpar" /></td>
    </tr>
  </table>
</form>
</body>
</html>

Agora criamos um formulário básico de envio de e-mail, contendo o nome do usuário, a mensagem e o e-mail dele pra contato.

Para fazermos uma conexão com nosso script usamos a seguinte tag agora:

<script language="JavaScript" src="jquery/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery/jquery.validate.js" type="text/javascript"></script>

Estas linhas vão dentro da tag <head></head>.

Então nossa página até o momento esta assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemplo de validação de campos com jQuery - YESbr Agência Web</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" src="jquery/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery/jquery.validate.js" type="text/javascript"></script>
</head>

<body>
</form>
<form id="formularioContato" onSubmit="return validar(this);" action="" method="post">
  <table width="577" border="0" align="center" cellpadding="5" cellspacing="0">
    <tr>
      <td colspan="3" align="center" scope="col"><span>Fale Conosco</span></td>
    </tr>
    <tr>
      <td width="123"><div align="right"><strong>Nome(*) </strong></div></td>
      <td width="432"><input type="text" name="nome" size="50" /></td>
    </tr>
    <tr>
      <td><div align="right"><strong>E-mail(*)</strong></div></td>
      <td><input type="text" name="email" size="50" /></td>
    </tr>
    <tr>
      <td><strong><div align="right">Mensagem(*)</div></strong></td>
      <td><textarea name="mensagem" cols="50" rows="5"></textarea></td>
    </tr>
    <tr>
      <td colspan="3" align="center"><input type="submit" name="Enviar" value="Enviar " />
        <input type="reset" name="Limpar" value="Limpar" /></td>
    </tr>
  </table>
</form>
</body>
</html>

validacao-de-campos-usando-jquery

Porém até agora, temos um formulário de envio de e-mail que por si só já seria algo muito interessante para ser utilizado em um site, porem como podemos deixar mais interessante esta programação? Podemos criar uma programação que por exemplo, impedisse a página de mandar campos em branco por exemplo alguém lhe envia um e-mail interessante, e você deseja enviar uma resposta para essa pessoa, que por descuido não informou o e-mail, para evitar isso iremos criar uma página que faça essa validação ou seja a página ira pegar as informações e fazer uma checagem prévia, vendo se todos os campos estão preenchidos , para isso usaremos uma página de validação.

Para criarmos este formulário de validação nos usaremos o Jquery , lembra que no começo da nossa página HTML colocamos as seguintes tags,

<script language="JavaScript" src="jquery/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery/jquery.validate.js" type="text/javascript"></script>

Essas tags  fazer o seguinte elas vão “buscar” nosso formulário jQuery, e o executa, para criarmos um formulário jQuery usaremos a seguinte programação, ela é a parte que ira executar a validação checando se os campos estão vazios? E se tiver ira executar as mensagem, esta é uma condição semelhante a ifs  usados em outras linguagens imagine da seguinte forma, o código ira fazer a primeira verificação “o campo nome esta vazio?” não então vamos para a segunda parte “o campo e-mail esta vazio?” não então vamos para a próxima e assim por diante.

$(document).ready( function() {
    $("#formularioContato").validate({
        // Define as regras
        rules: {
            nome: {
                // campoNome será obrigatório (required) e terá tamanho mínimo (minLength)
                required: true, minlength: 2
            },
            email: {
                // campoEmail será obrigatório (required) e precisará ser um e-mail válido (email)
                required: true, email: true
            },
            mensagem: {
                // campoMensagem será obrigatório (required) e terá tamanho mínimo (minLength)
                required: true, minlength: 2
            },
        },
        // Define as mensagens de erro para cada regra
        messages: {
            nome: {
                required: "Digite o seu nome", minLength: "O seu nome deve conter, no mínimo, 2 caracteres"
            },
            email: {
                required: "Digite o seu e-mail para contato", email: "Digite um e-mail válido"
            },
            mensagem: {
                required: "Digite a sua mensagem", minLength: "A sua mensagem deve conter, no mínimo, 2 caracteres"
            }
        }
    });
});

Vamos explicar o código, ele faz o seguinte ele diz por exemplo “requerimento” ou seja o campo é requerido em seguida temos a opção “true” o seja verdade oque significa que o requerimento é verdadeiro, e o minLength significa o tamanho mínimo do campo. Então e ele vê se o campo não estiver as condições predeterminadas por você ele executa a parte seguinte do código que é a execução das mensagens de erro, porem não seria legal se pudéssemos mudar a formatação da mensagem? Por exemplo colocar o texto em vermelho, ou em cores que combinem com o site? Bom vamos criar este pequeno trecho de programação em CSS.

* {
    font-family: Verdana;
    font-size: 96%;
}
label {
    display: block;
    margin-top: 10px;
}
label.error {
    float: none;
    color: red;
    margin: 0 .5em 0 0;
    vertical-align: top;
    font-size: 10px
}
p {
    clear: both;
}
.submit {
    margin-top: 1em;
}
em {
    font-weight: bold;
    padding-right: 1em;
    vertical-align: top;
}

Dentro deste formulario criamos a condição “se a mensagem tiver que aparecer, aparecera como eu quero” e damos as condições como cor da fonte, tamanho da letra etc.

O código completo da página esta logo abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemplo de validação de campos com jQuery - YESbr Agência Web</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" src="jquery/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery/jquery.validate.js" type="text/javascript"></script>
<style type="text/css">
* {
    font-family: Verdana;
    font-size: 96%;
}
label {
    display: block;
    margin-top: 10px;
}
label.error {
    float: none;
    color: red;
    margin: 0 .5em 0 0;
    vertical-align: top;
    font-size: 10px
}
p {
    clear: both;
}
.submit {
    margin-top: 1em;
}
em {
    font-weight: bold;
    padding-right: 1em;
    vertical-align: top;
}
</style>
<script>
$(document).ready( function() {
    $("#formularioContato").validate({
        // Define as regras
        rules: {
            nome: {
                // campoNome será obrigatório (required) e terá tamanho mínimo (minLength)
                required: true, minlength: 2
            },
            email: {
                // campoEmail será obrigatório (required) e precisará ser um e-mail válido (email)
                required: true, email: true
            },
            mensagem: {
                // campoMensagem será obrigatório (required) e terá tamanho mínimo (minLength)
                required: true, minlength: 2
            },
        },
        // Define as mensagens de erro para cada regra
        messages: {
            nome: {
                required: "Digite o seu nome", minLength: "O seu nome deve conter, no mínimo, 2 caracteres"
            },
            email: {
                required: "Digite o seu e-mail para contato", email: "Digite um e-mail válido"
            },
            mensagem: {
                required: "Digite a sua mensagem", minLength: "A sua mensagem deve conter, no mínimo, 2 caracteres"
            }
        }
    });
});
</script>
</head>

<body>
</form>
<form id="formularioContato" onSubmit="return validar(this);" action="" method="post">
  <table width="577" border="0" align="center" cellpadding="5" cellspacing="0">
    <tr>
      <td colspan="3" align="center" scope="col"><span>Fale Conosco</span></td>
    </tr>
    <tr>
      <td width="123"><div align="right"><strong>Nome(*) </strong></div></td>
      <td width="432"><input type="text" name="nome" size="50" /></td>
    </tr>
    <tr>
      <td><div align="right"><strong>E-mail(*)</strong></div></td>
      <td><input type="text" name="email" size="50" /></td>
    </tr>
    <tr>
      <td><strong><div align="right">Mensagem(*)</div></strong></td>
      <td><textarea name="mensagem" cols="50" rows="5"></textarea></td>
    </tr>
    <tr>
      <td colspan="3" align="center"><input type="submit" name="Enviar" value="Enviar " />
        <input type="reset" name="Limpar" value="Limpar" /></td>
    </tr>
  </table>
</form>
</body>
</html>

Para concluir basta que voce altere os diretórios das pastas do jQuery, para o diretório onde você as salvou.

Confira o exemplo funcionando.

Implementação de Slider

O slider é uma ferramenta muito interessante para qual quer site, pois ele cria efeitos de transições “bonitinhos” em galerias de imagens, exatamente a mesma coisa que um flash, porém com uma grande vantagem em relação ao flash, ele é mais leve, e considerando que um slider padrão normalmente fica na página principal de seu site (considerada a primeira parte de seu site, onde o usuário não tem que usar o botão de scroll lock ) é nesta parte de seu site que o primeiro conteúdo ira aparecer portanto será o melhor lugar para fazer uma boa apresentação de seus produtos, e mesmo com a velocidade de internet sempre aumentando colocar um arquivo em flash ali, pode causar uma certa demora, mesmo que de poucos segundos.

Para que possamos criar nosso exemplo vamos precisar fazer o download dos arquivos.

Download

Estes arquivos já estão completos, e o único arquivo que você ira alterar será arquivo index.html e neste arquivo temos uma galeria com varias fotos. O interessante desta galeria é que ela tem 2 meios de rotação de imagens: 1 deles é clicando nas setas de navegação, o outro é clicando nos botões abaixo da imagem indo diretamente para as fotos que quer.

Vamos ao código

Dentro do arquivo index.html temos a galeria completa basta alterar os link das imagens para onde estão as suas imagens. Para isso abra a página com o programa de edição de código de sua preferência, e alterar o código “img src” para o caminho das suas imagens.

<img src="imagens/slide1.jpg" alt="" />

É basicamente só isso que precisamos alterar para criar esta página, os códigos jQuery, assim como tudo que é necessário já esta disponível nesta postagem para o Download.

Os códigos para ligar o jQuery e o CSS a sua página esta aqui :

<link rel="stylesheet" href="nivo-slider.css" type="text/css" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

Agora basta “chamar” a função do plugin que ativa o slider:

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

O código de nossa página fica assim :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Implementação de Slider com jQuery - YESbr Agência Web</title>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

</head>

<body>

<div style="width:400px;" class="theme-default">
    <div id="slider" class="nivoSlider">
        <img src="imagens/slide1.jpg" alt="" />
        <a href="http://agencia.yesbr.com.br/"><img src="imagens/slide2.jpg" alt="" title="#htmlcaption" /></a>
        <img src="imagens/slide3.jpg" alt="" title="Exemplo de caption" />
    </div>
    <div id="htmlcaption" class="nivo-html-caption">
        <strong>Exemplo</strong> de <em>HTML</em> caption com <a href="#">link</a>.
    </div>
</div>

</body>
</html>

Este código cria o exemplo de nosso slider, este tipo de slider é usado especialmente para parte principal do site, com descrição de eventos, ou produtos, ou ainda poder ser usado em outras partes de seu site, pois podemos criar galerias de imagens, este tipo de slider é bem utilizado em sites que necessitam de galerias de fotos, como hospedagens, hotéis etc.

É importante ressaltar que a primeira DIV do código serve apenas para limitar a largura do slider (a altura é ajustada automaticamente) e para ativar o tema do slider (mais temas estão disponíveis no arquivo para download). Já a segunda DIV não deve ser alterada (nem “ID”, nem “class”), pois é por meio dela que o plugin inicia o slider.

Você também poderá inserir links nas imagens, como visto na linha 24 do nosso código, e também uma descrição das imagens, que possui duas técnicas diferentes: a primeira é a mais simples; Basta inserir a descrição na tag “alt” da respectiva imagem (vide linha 35). Já a segunda maneira, permite inserir tags html na descrição. Para tal, utilize a tag “title” para indicar o ID da div em que a descrição se encontra (vide linha 24 com o ID da div, e as linhas 27 a 29 com a respectiva DIV).

Confira um exemplo funcionando.

Criando “Crud” em PHP

Código no fim da postagem

As 4 funções básicas do php, presentes em quase todos os programas do mesmo, são Create, Retrive (select) Update e o destroy (delete) essas quatro letras formam o acrônimo CRUD, estas são as 4 funções básicas do php criar/alterar/selecionar/apagar este tipo de coisa aparece muito quando se tem uma conexão entre o php e algum banco de dados, vamos criar aqui uma serie de páginas que façam isso.

Antes de qualquer coisa precisamos criar um banco de dados, usaremos o Cpanel para criar isso, pois é uma opção presente em sites e que facilita muito na criação de baco de dados.

Para criar o banco de dados acesse o Cpanel, depois acesse “banco de dados MySQL©” dentro desta área você pode criar o banco de dados

tutorial_crud_em_php1

tutorial_crud_em_php2

tutorial_crud_em_php3Depois de criado o banco vamos criar o usuário.

tutorial_crud_em_php4

Como vamos usar aqui apenas como exemplo criamos uma senha fraca porem você deve usar uma senha mais complexa.

Depois de inserir 1 usuário para o acesso ao banco de dados precisamos dar as permissões para ele, no nosso caso precisamos que nosso usuário possa criar banco etc então vamos ao “todos os privilégios” porem, normalmente como segurança não fazemos isso de verdade, nos damos os privilégios apenas que o usuário ira usar, e tenha cuidado para não dar privilegio de mais para que por exemplo que o usuário não possa deletar tabelas, isso pode acontecer não por malicia do usuário e sim por falta de conhecimentos mesmo.tutorial_crud_em_php5A partir dai nos temos nosso banco de dados, porem ainda não temos uma tabela, para isso vamos no nosso banco de dados e vamos em “Creat Table” e a partir dai  criar a tabela ou se preferir vá em “SQL” e digite o seguinte código:

CREATE TABLE `produto` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`nome` varchar(45) NOT NULL,
`descricao` varchar(45) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=latin1;

tutorial_crud_em_php6Este código significa “crie a tabela produto” e da as especificações do banco de dados com os seguintes campos “id” “nome” e “descrição” lembrando que não usamos o ‘Ç’ nem o ‘~’ a seguinte linha diz “PRIMARY KEY (‘id’) isso significa que a chave primaria do bando de dados é o ID, o ideal é que todas tabelas do banco de dados tenham um ID pois todos os valores da minha tabelas estão atribuídos aquele id é o mesmo principio de um R.G. todos temos um, e o R.G. é um numero que tem informações sobre as pessoas, no banco de dados não é diferente. Temos então o banco de dados agora vamos criar a conexão entre nossas paginas e o banco de dados.

Conexão com Banco de Dados.

Para que nossas paginas consigam fazer alterações no banco de dados vamos criar a seguinte programação em PHP.

<?php
 
$dbname="NOME DO SEU BANCO DE DADOS"; // Indique o nome do banco de dados que será aberto
 
$usuario="USUARIO QUE VOCÊ CRIOU"; // Indique o nome do usuário que tem acesso
 
$password="SENHA QUE CADASTROU"; // Indique a senha do usuário
 
//1º passo - Conecta ao servidor MySQL
 
if(!($login = @mysql_connect("localhost",$usuario,$password))) {
 
echo "Não foi possível estabelecer uma conexão com o gerenciador MySQL. Favor Contactar o Administrador.";
 
exit;
 
}
 
//2º passo - Seleciona o Banco de Dados
 
if(!($con=@mysql_select_db($dbname,$login))) {
 
echo "Não foi possível estabelecer uma conexão com o gerenciador MySQL. Favor Contactar o Administrador.";
 
exit;
 
}
 
?>

Esta programação seleciona o banco de dados, ele pega o usuário e senha depois para saber por exemplo quais as ações que ele pode fazer, por isso o usuário e senha são importantes. Nesta programação depois disso temos o código que envia a mensagem de erro para o usuário caso ocorra algum problema.

Criando o programa para incluir dados no banco de dados, aqui usaremos o seguinte esquema uma página e dentro desta página principal ela ira “chamar” as páginas menores, por exemplo quando formos fazer o sistema de inserção no banco de dados, teremos nosso form padrão e ele ira pegar as informações e executar a apenas a parte desejável do programa isso é interessante para sites maiores por exemplo um site em que o usuário possa inserir dados em 8 tabelas diferentes criamos uma página chamada inserir. Php( não necessariamente precisa deste nome porém é o mais recomendável para não se confundir por ser um nome genérico), este mesmo principio podemos usar para o excluir e para o alterar.

Criando o form de inserção de dados

O form de inserção de dados é algo extremamente simples:

<form action="inserir.php?t=produtos" method="post" id="formulario">

<table width="100%" cellpadding="5" cellspacing="0" border="0" align="center" class="interna">
<tr>
<th>
<p>Nome<br />
<input name="nome" type="text" id="nome" maxlength="100" /></p>

<p>Descricao<br />
<input name="descricao" type="text" id="login" maxlength="100" /></p>

<p><input type="button" class="salvar" /></p>
</th>
</tr>
</table>
</form>

Basta copiar esta programação e a colar entre as tag <body> </body> esta programação cria os campos onde serão inseridas as variáveis, que mais tarde serão inseridas no banco de dados. Este form vai buscar a função “inserir” onde teremos o código de inserção.

Para criar a função de inserção nos copiamos este código, dentro de um arquivo .php no caso para nosso exemplo usaremos o nome de funções.php note que, ele cria uma condição se a classe $t==”produtos” for executada ( ele sabe qual classe procurar pelo form de envio de dados) ele executa o resto da programação, até achar a classe que ele procura.

<?php
 
class crud
 
{
 
private $sql_ins="";
 
private $tabela="";
 
private $sql_sel="";
 
public function inserir($campos, $valores) // funçao de inserção, campos e seus respectivos valores como parâmetros
 
{
 
$this->sql_ins = "INSERT INTO " . $this->tabela . " ($campos) VALUES ($valores)";
 
if(!$this->ins = mysql_query($this->sql_ins))
 
{
 
die ("<center>Erro na inclusão " . '<br>Linha: ' . __LINE__ . "<br>" . mysql_error() . "<br>
 
<a href='index.php'>Voltar ao Menu</a></center>");
 
}else{
 
print "<script>location='index.php';</script>";
 
}
 
}

Note que não finalizamos nossa página com o ?>, isso pois não finalizamos esta página iremos antes disso criar outras classes dentro desta página.
Vamos criar agora um form que faça a alteração e a exclusão dos dados. Para isso iremos criar um formulário que liste todos nossos dados e assim poderemos alterar e excluir oque for necessário. O código fica assim:

<?php
 
require_once 'conexao.php';
 
require_once 'crud.php';
 
$con = new conexao(); // instancia classe de conexão
 
$con->connect(); // abre conexao com o banco
 
?>
 
<!DOCTYPE html>
 
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<title></title>
 
</head>
 
<body>
 
<?php
 
//apenas testando a conexao
 
if($con->connect() == true){
 
echo 'Conectou';
 
}else{
 
echo 'Não conectou';
 
}
 
?>
 
<a href="formulario.php">
 
Novo
 
</a>
 
<table style="border: 1px solid red;">
 
<thead>
 
<tr>
 
<th>
 
Nome
 
</th>
 
<th>
 
Descri&ccedil;&atilde;o
 
</th>
 
</tr>
 
</thead>
 
<tbody>
 
<?php
 
$consulta = mysql_query("SELECT * FROM produto"); // query que busca todos os dados da tabela PRODUTO
 
while($campo = mysql_fetch_array($consulta)){ // laço de repetiçao que vai trazer todos os resultados da consulta
 
?>
 
<tr>
 
<td>
 
<?php echo $campo['nome']; // mostrando o campo NOME da tabela ?>
 
</td>
 
<td>
 
<?php echo $campo['descricao']; // mostrando o campo DESCRICAO da tabela ?>
 
</td>
 
<td>
 
<a href="formulario.php?id=<?php echo $campo['id']; //pega o campo ID para a ediçao ?>">
 
Editar
 
</a>
 
</td>
 
<td>
 
<a href="excluir.php?id=<?php echo $campo['id'];  //pega o campo ID para a exclusao ?>">
 
Excluir
 
</a>
 
</td>
 
</tr>
 
<?php } ?>
 
</tbody>
 
</table>
 
</body>
 
</html>
 
<?php $con->disconnect(); // fecha conexao com o banco ?>

Note que antes mesmo da Tag <!DOCTYPE html> temos algumas linhas de código antes estas linhas criam uma conexão com banco de dados, lembrando que estamos montando nossas paginas da seguinte maneira, criamos uma conexão, e apenas uma vez, então fazemos um “link” em todas nossas paginas PHP fazendo então com que não seja preciso caso aja alguma alteração alterar em todas as paginas apenas na conexão.

Note também que o botão “exclusão” chama a função exclusão, podemos jogar esta função dentro de qual quer página contando que consiga fazer o link correto, portando para que fique mais fácil de compreender, junto ao arquivo onde temos a função inserir colocaremos o código para criar o formulário de exclusão

public function excluir($where = NULL) // funçao de exclusao, campo que define a linha a ser editada como parametro
 
{
 
if ($where)
 
{
 
$this->sql_sel = "SELECT * FROM " . $this->tabela . " WHERE $where";
 
$this->sql_del = "DELETE FROM " . $this->tabela . " WHERE $where";
 
}else{
 
$this->sql_sel = "SELECT * FROM " . $this->tabela;
 
$this->sql_del = "DELETE FROM " . $this->tabela;
 
}
 
$sel=mysql_query($this->sql_sel);
 
$regs=mysql_num_rows($sel);
 
if ($regs > 0){
 
if(!$this->del = mysql_query($this->sql_del))
 
{
 
die ("<center>Erro na exclusão " . '<br>Linha: ' . __LINE__ . "<br>" .mysql_error() ."<br>
 
<a href='index.php'>Voltar ao Menu</a></center>" );
 
}else{
 
print "<center>Registro Excluído com Sucesso!<br><a href='index.php'>Voltar ao Menu</a></center>";
 
}
 
}else{
 
print "<center>Registro Não encontrado!<br><a href='index.php'>Voltar ao Menu</a></center>";
 
}
 
}

Este código é o responsável por apagar algum dado da tabela.

Vimos na nossa tabela de seleção de dados, que ao lado do botão excluir, temos a opção editar , isso nos levara para esta página:

<?php
 
require_once 'conexao.php';
 
require_once 'crud.php';
 
$con = new conexao(); // instancia classe de conexão
 
$con->connect(); // abre conexao com o banco
 
@$getId = $_GET['id'];  //pega id para ediçao caso exista
 
if(@$getId){ //se existir recupera os dados e trás os campos preenchidos
 
$consulta = mysql_query("SELECT * FROM produto WHERE id = + $getId");
 
$campo = mysql_fetch_array($consulta);
 
}
 
if(isset ($_POST['cadastrar'])){  // caso não seja passado o id via GET cadastra
 
$nome = $_POST['nome'];  //pega o elemento com o pelo NAME
 
$descricao = $_POST['descricao']; //pega o elemento com o pelo NAME
 
$crud = new crud('produto');  // instancia classe com as operações crud, passando o nome da tabela como parametro
 
$crud->inserir("nome,descricao", "'$nome','$descricao'"); // utiliza a funçao INSERIR da classe crud
 
header("Location: index.php"); // redireciona para a listagem
 
}
 
if(isset ($_POST['editar'])){ // caso  seja passado o id via GET edita
 
$nome = $_POST['nome']; //pega o elemento com o pelo NAME
 
$descricao = $_POST['descricao']; //pega o elemento com o pelo NAME
 
$crud = new crud('produto'); // instancia classe com as operações crud, passando o nome da tabela como parametro
 
$crud->atualizar("nome='$nome',descricao='$descricao'", "id='$getId'"); // utiliza a funçao ATUALIZAR da classe crud
 
header("Location: index.php"); // redireciona para a listagem
 
}
 
?>
 
<!DOCTYPE html>
 
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<title></title>
 
</head>
 
<body>
 
<form action="" method="post"><!--   formulario carrega a si mesmo com o action vazio  -->
 
<label>Nome:</label>
 
<input type="text" name="nome" value="<?php echo @$campo['nome']; // trazendo campo preenchido caso esteja no modo de ediçao ?>" />
 
<br />
 
<br />
 
<label>Descri&ccedil;&atilde;o:</label>
 
<input type="text" name="descricao" value="<?php echo @$campo['descricao']; // trazendo campo preenchido caso esteja no modo de ediçao ?>" />
 
<br />
 
<br />
 
<?php
 
if(@!$campo['id']){ // se não passar o id via GET não está editando, mostra o botão de cadastro
 
?>
 
<input type="submit" name="cadastrar" value="Cadastrar" />
 
<?php }else{ // se  passar o id via GET  está editando, mostra o botão de ediçao ?>
 
<input type="submit" name="editar" value="Editar" />
 
<?php } ?>
 
</form>
 
</body>
 
</html>
 
<?php $con->disconnect(); // fecha conexao com o banco ?>

Dentro desta página ele faz uma verificação simples “se o dado não existe crie uma linha com este nome e esta descrição” ou “se existe algum dado com esse nome altere sua descrição”

Tutorial de Ajax e jQuery

Neste tutorial, vamos criar um sistema simples usando o jQuery e Ajax, para que o sistema complete os dados quando inserimos uma chave, por exemplo um locadora, cada filme cadastrado teria uma ID, ou um cliente se colocarmos o CPF cadastrado, o sistema vai completar os dados automaticamente.

Primeiramente vamos criar a página index.html que é a página onde teremos o formulário, meramente para demonstração iremos criar um sistema com 3 dados, o cpf do cliente, o seu nome e sua data de nascimento.

Vamos ao código, chame a página de index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 
<head>
 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<title>Exemplo</title>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 
<script type="text/javascript" src="aplicacao.js"></script>
 
</head>
 
<body>
 
<div style="width:500px; margin:auto;">
 
<fieldset>
 
<legend>Dados do Cliente
 
</legend><p>
 
<label for="cpf">CPF: </label>
 
<input type="text" id="cpf" name="cpf" />
 
</p>
 
<p>
 
<label for="nome">Nome: </label>
 
<input type="text" id="nome" name="nome" />
 
</p>
 
<p>
 
<label for="dataNascimento">Data Nascimento: </label>
 
<input type="text" id="dataNascimento" name="dataNascimento" />
 
</p>
 
</fieldset>
 
</div>
 
</body>
 
</html>

Depois de criada esta página, vamos criar nosso arquivo .js ele fica responsável por “jogar” as informações em seus respectivos campos, vamos chamar nossa página de aplicação.js dentro dela vamos digitar o seguinte código:

$(function () {
 
$("#cpf").blur(function () {
 
var cpf = $(this).val();
 
$.ajax({
 
type: "GET",
 
url: "pessoas.php",
 
data: "cpf="+cpf,
 
success: function(pessoa){
 
informacoesPessoa = pessoa.split("-");
 
$("#nome").val(informacoesPessoa[0]);
 
$("#dataNascimento").val(informacoesPessoa[1]);
 
}
 
});
 
});
 
});

Por fim, vamos criar o arquivos de onde podemos retirar os dados dos clientes, neste passo temos duas opções criar os dados no arquivo .php ou fazer uma busca em um banco de dados, aqui vamos criar o modelo onde nós mesmo cadastramos as informações em uma página .php, para fazer a página buscar em um banco de dados, só precisamos criar uma busca simples, aqui como nosso intuito é demonstrar um exemplo funcionando vamos criar uma simples página .php dentro dela cole o seguinte código.

<?php
$cpf = $_GET['cpf'];

$pessoas['000.000.000-00']['nome'] = "Exemplo1"; 
$pessoas['000.000.000-00']['dataNascimento'] = "16/06/1986";

$pessoas['111.111.111-11']['nome'] = "Exemplo2"; 
$pessoas['111.111.111-11']['dataNascimento'] = "20/01/1932";  

$pessoas['222.222.222-22']['nome'] = "Exemplo3";
$pessoas['222.222.222-22']['dataNascimento'] = "23/04/1914";
 
echo $pessoas[$cpf]['nome'] ."-". $pessoas[$cpf]['dataNascimento']; 
?>

Veja o exemplo funcionando.

DICA: Você pode também implementar a máscara para o campo CPF, como ensinado neste tutorial.

Como criar um Auto Completar

A função auto completar é muito interessante para se aplicar em muitos lugares, por exemplo, se criamos um site onde vamos fazer o cadastro de clientes, e precisamos do estado (exemplo São Paulo) ter de digitar o nome completo pode ser muito trabalhoso, então criamos a função auto completar onde o usuário, digita apenas algumas letras do nome, e as “opções” que tiverem as primeiras letras digitadas são selecionadas em nosso banco de dados, isso pode ser usado com varias finalidades não só nomes, podemos usar este tipo de função para checar, por exemplo cadastros de clientes, de produtos etc, esta ferramenta junta com outras como por exemplo, o tutorial de Ajax e jQuery, imagine um sistema por exemplo de uma locadora, onde você “vai digitando” e os nomes dos clientes que tenham essas letras aparecem na tela, você então seleciona o nome do cliente que quer e o sistema preenche todas as informações dele para por exemplo fazer a locação de um filme, de modo que você saberá exatamente com qual cliente você esta trabalhando.

Para fazer o auto completar, vamos precisa copiar dois arquivos javascript dentro de uma pasta chamada “js”.

Arquivo 1 (Lembrando de manter os mesmo nomes dos arquivos)
Arquivo 2 (Lembrando de manter os mesmo nomes dos arquivos)

Depois de ter copiado dos arquivos vamos coloca-los em uma pasta chamada js, criada a pasta e colocada os dentro precisamos então criar dois arquivos um onde vamos digitar o que estamos procurando, e outra página que é quem terá o script para que se faça a busca no banco de dados.

Primeiramente vamos criar o arquivo index.html que será responsável por captar as informações que serão buscadas
O código de nossa página principal é o seguinte:

<script type="text/javascript" src="js/autocomplete.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/autocomplete.css">
<script type="text/javascript">
$(document).ready(function(){
 
    new Autocomplete("campo_estado", function() {
        this.setValue = function( id, estado, sigla ) {
            $("#id_val").val(id);
            $("#estado_val").val(estado);
            $("#sigla_val").val(sigla);
        }
        if ( this.isModified )
            this.setValue("");
        if ( this.value.length < 1 &#038;& this.isNotClick ) 
            return ;
        return "ajax.php?q=" + this.value;
    });
 
});
</script>
 
 
<h1>Tutorial de auto complete em Ajax</h1>
Insira um estado:
<input type="text" name="campo_estado" id="campo_estado">

Esta página, pega o que for digitado no campo input, e manda os dados para o php que vai fazer uma consulta letra a letra.

Em seguida crie o a página php com o nome de ajax.php este é código que vai fazer a busca nos servidores, lembre-se de mudar o nome o usuário de banco de dados, senha e suas tabelas.

<?php
  
$hostname = 'localhost';
$username = 'seu usuario';
$password = 'sua senha';
$dbname = 'seu banco de dados';
 
mysql_connect( $hostname, $username, $password ) or die ( 'Erro ao tentar conectar ao banco de dados.' );
mysql_select_db( $dbname );
 
$q = mysql_real_escape_string( $_GET['q'] );
 
$sql = "SELECT * FROM estados where locate('$q',estado) --> 0 order by locate('$q',estado) limit 10";
 
$res = mysql_query( $sql );
 
while( $campo = mysql_fetch_array( $res ) ) {
    $id = $campo['id'];
    $estado = $campo['estado'];
    $sigla = $campo['sigla'];
    $estado = addslashes($estado);
    $html = preg_replace("/(" . $q . ")/i", "<span style="\"font-weight:bold\"">\$1</span>", $estado);
    echo "<li onselect="\"this.setText('$estado').setValue('$id','$estado','$sigla');\"">$html ($sigla)</li>\n";
}
?>

De modo simplificado o esquema de como funcionam os dois programas ( este e o tutorial anterior tutorial Ajax e jQuery).

Imagine um sistema de locação de veículos onde, tem vários clientes cadastrados no banco de dados, então o operador do computador começa a digitar o R.G. de um cliente no sistema, o sistema faz uma varredura no banco de dados, selecionando o cliente que tenha este R.G. completo. Então através do sistema de Ajax e jQuery que apresentamos no tutorial anterior completa todos os demais campos com as informações dos clientes, de modo que o operador tem um redução no tempo de busca do cliente, pois não necessita preencher todos os campos com informações de clientes.

Confira o exemplo funcionando.

Utilizando Máscara com jQuery

Máscaras têm uma função muito interessante para programação. Por exemplo, se no formulário de preenchimento de dados onde um usuário esta fazendo um cadastro online, você não quer que no lugar de CEP ele digite letras, o mesmo vale para telefone etc.

Então criamos para esse campos as máscaras com a ajuda do jQuery. Elas irão impedir que o usuário digite algum caractere não estipulado por você. Caso você decida que um campo só poderá ter letras, o usuário não pode colocar um número, e vice versa.

Para tal, utilizaremos o plugin Masked Input (download do arquivo no final do tutorial).

Ao criarmos o formulário, precisamos definir as propriedades dos campos para saber que tipo de valor ele vai aceitar.

Para isso vamos dividir aqui o código em duas partes, porém isso é para mera didática. Na primeira parte do código, vamos chamar o jQuery e o plugin Masked Input. Vamos também indicar quais são os campos do formulário e suas respectivas máscaras:

<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<title>Criando máscaras com jquery</title>
 
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript" src="jquery.maskedinput.js"></script>
 
</head>
 
<script type="text/javascript">
 
$(document).ready(function(){
 
$("input.data").mask("99/99/9999");
 
$("input.cpf").mask("999.999.999-99");
 
$("input.cep").mask("99.999-999");
 
});
 
</script>

Considerando a linha $(“input.data”).mask(“99/99/9999”):

Isso significa que os dados neste campo (input com a classe “data”, como indicado entre aspas) vão seguir uma ordem aparecendo no formato de data, ou seja, dias, meses e anos.

Neste exemplo usamos apenas números, porém temos ainda outros parâmetros que podemos usar com:

a – Representa qualquer letra (A-Z,a-z)
9 – Representa qualquer número (0-9)
* – Representa qualquer caractere alfanumérico (A-Z,a-z,0-9)

A segunda parte de nosso código, nós temos o formulário com os campos que iremos colocar os dados(inputs).

<body>
 
<h1>Usando máscaras com jquery</h1>
 
<label for="data">Data:</label><br>
 
<input type="text" class="data" id="data" name="data" /><br><br>
 
  
 
<label for="cpf">CPF:</label><br>
 
<input type="text" class="cpf" id="cpf" name="cpf" /><br><br>
 
  
 
<label for="cep">CEP:</label><br>
 
<input type="text" class="cep" id="cep" name="cep" /><br><br>
 
  
 
</body>
 
</html>

Nesta parte oque fizemos foi criar os campos de Data de CPF e de CEP, para que eles buscassem no começo da página para que cada input tivesse as regras para seguir.

O código completo de nossa página ficou assim:

<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<title>Criando máscaras com jquery</title>
 
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript" src="jquery.maskedinput.js"></script>
 
</head>
 
<script type="text/javascript">
 
$(document).ready(function(){
 
$("input.data").mask("99/99/9999");
 
$("input.cpf").mask("999.999.999-99");
 
$("input.cep").mask("99.999-999");
 
});
 
</script>
 
<body>
 
<h1>Usando máscaras com jquery</h1>
 
<label for="data">Data:</label><br>
 
<input type="text" class="data" id="data" name="data" /><br><br>
 
  
 
<label for="cpf">CPF:</label><br>
 
<input type="text" class="cpf" id="cpf" name="cpf" /><br><br>
 
  
 
<label for="cep">CEP:</label><br>
 
<input type="text" class="cep" id="cep" name="cep" /><br><br>
 
  
 
</body>
 
</html>

Confira uma exemplo funcionando.

Arquivos utilizados neste tutorial:

jQuery v1.7.1

Plugin Masked Input