Criando menu em HTML com CSS

A função do CSS é definir regras de formatação e estilo de texto dentro de páginas web, então em nosso sistema de hoje vamos usar uma página em HTML e uma em CSS para criar um menu que mude de cor, o que gera um efeito muito interessante para sua página.

Primeiramente vamos criar nossa página em HTML com o nome menu.html para criar está página poremos usar varias ferramentas, como Notepad++ um ótimo editor de código e que pode ser encontrado facilmente na internet para download.

Criando o menu em HTML para criarmos o menu primeiro vamos criar uma lista não ordenada (tag UL), com 5 itens contendo um link cada um. Isto deve ser feito diretamente na página HTML, com o seguinte código.

<ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
    <li><a href="#">link 4</a></li>
    <li><a href="#">link 5</a></li>
</ul>

Lembrando que este código deve estar entre as tags <body></body> de sua página.

Cada item LI será um botão do nosso menu, e cada um deles terá seu respectivo link.

Até aqui temos a lista dos links para as páginas que você deseja. Porém como o CSS ira funcionar? Nós colocamos o seguinte comando no topo de nossa página para chamar a folha de estilos:

<link href="css.css" rel="stylesheet" type="text/css" />

Então até agora nossa página se encontra 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>
<title>Exemplo de Menu em HTML com CSS - YESbr Agência Web</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
    <li><a href="#">link 4</a></li>
    <li><a href="#">link 5</a></li>
</ul>
</body>
</html>

Agora iremos criar o arquivo chamado css.css na mesma página que nosso página html, podemos criar em outro lugar porem teremos que alterar o destino no começo de nossa página html.

Criando uma página CSS

Para criação de nossa página de CSS nós temos algumas características que mudam e que podem fazer uma grande diferença futuramente nós podemos comentar algumas linhas, linhas comentadas estão entre as tags /* e */ ou seja tudo que estiver dentro destra linha não será lida pelo sistema portanto podemos comentar o que cada parte do código ira fazer, este tipo de coisa que parece pouco importante pode fazer realente uma grande diferença.

A estrutura de uma página css também é diferente de uma html, pois ela não começa com nenhuma tag html.

Dentro da página CSS, nós iremos colocar o estilo para cada elemento de nosso menu.

Primeiramente iremos atribuir características de fontes para toda a página, apenas para uma melhor exibição:

* {
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
}

Os próximos códigos vamos usar para poder retirar a marcação dos itens da lista, bem como colocá-los sempre na mesma linha, uma vez que, por padrão, eles vem um embaixo do outro. Vamos também redefinir as margins internas e externas.

ul {
    margin: 0;
    padding:0;
}

li {
    list-style: none; 
    margin: 10px;
    display: inline;
}

Agora vamos definir o estilo dos links, para que a visualização dos mesmos fique mais agradável.

li a {
    padding: 5px 10px; 
    margin:0;
    border: 0px solid #f00; 
    background: #903;
    text-decoration: none;
    color:#FFF;
    /* cantos arredondados */
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
li a:hover {
    background: #CCC;
    color: #000; 
    border-color: #000;
}

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

* {
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
}

ul {
    margin: 0;
    padding:0;
}

li {
    list-style: none; 
    margin: 10px;
    display: inline;
}
li a {
    padding: 5px 10px; 
    margin:0;
    border: 0px solid #f00; 
    background: #903;
    text-decoration: none;
    color:#FFF;
    /* cantos arredondados */
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
li a:hover {
    background: #CCC;
    color: #000; 
    border-color: #000;
}

Não se esqueça, quando copiar o código ou digitar comente o código ( usando o /*comentário*/ ) pois assim fica mais fácil de interpretar o código depois, e mais fácil de não se perder no meio da sua própria programação. Depois de criada a página você pode brincar a vontade com ela alterando as cores e fazendo varias combinações diferentes até achar uma que lhe agrade.

Confira dois exemplos funcionando aqui e aqui.

Como configurar o Google Webmaster Tools e solicitar nova verificação de Malware

1º Passo – Crie uma conta de email no seu site como “admin”, depois entre no site do google. Clique em Efetuar Login]

como-configurar-o-google-webmaster-tools-e-solicitar-nova-verificacao-de-malware1

2º Passo – Em seguida clique em Crie uma conta agora.

como-configurar-o-google-webmaster-tools-e-solicitar-nova-verificacao-de-malware2

3º Passo – Use a conta admin que você criou no seu site, para criar a conta no google. Como mostra a imagem abaixo.

como-configurar-o-google-webmaster-tools-e-solicitar-nova-verificacao-de-malware3

4º Passo – Depois de criada sua conta no google, você será redirecionado para a página do google. No canto superior direito clique em Minha conta.

como-configurar-o-google-webmaster-tools-e-solicitar-nova-verificacao-de-malware4

5º Passo – Assim que entrar na sua conta, clique em Ferramentas para Webmasters

como-configurar-o-google-webmaster-tools-e-solicitar-nova-verificacao-de-malware5

6º Passo – Nesta página você adiciona o site em que irá fazer a verificação. Digite o nome do site por completo, como por exemplo www.yesbr.com.br, na caixa de texto e clique em Adicionar site.

como-configurar-o-google-webmaster-tools-e-solicitar-nova-verificacao-de-malware6

7º Passo – Assim que o site for adicionado clique nele.

como-configurar-o-google-webmaster-tools-e-solicitar-nova-verificacao-de-malware7

8º Passo – Quando entrar na Visão geral do site, clique em Verifique seu site.

como-configurar-o-google-webmaster-tools-e-solicitar-nova-verificacao-de-malware8

9º Passo – Para fazer a verificação do site, você terá que confirmar ser o proprietário do site. Para isso existem 2 escolhas.

como-configurar-o-google-webmaster-tools-e-solicitar-nova-verificacao-de-malware9

10.1º Passo – Você pode escolher incluir um meta tag dentro do parâmetro <HEAD> na Index do seu site.

como-configurar-o-google-webmaster-tools-e-solicitar-nova-verificacao-de-malware10

10.2º Passo – Ou criar um arquivo qualquer com o nome especificado pela google e fazer o upload do mesmo em seu site. Feita 1 das opções clique em Verificar.

como-configurar-o-google-webmaster-tools-e-solicitar-nova-verificacao-de-malware10-2

11º Passo- Caso seu site contenha algum vírus, a visualização sera semelhante a imagem abaixo. Basta corrigir as páginas indicadas pelo google. Feita a correção é só clicar em Solicitar uma revisão.

como-configurar-o-google-webmaster-tools-e-solicitar-nova-verificacao-de-malware11

12º Passo – Caso seu site esteja limpo, você visualizará uma página semelhante a essa abaixo.

como-configurar-o-google-webmaster-tools-e-solicitar-nova-verificacao-de-malware12

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

Tutorial – Outlook Express

Configuração de E-mail com a opção IMAP.

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

como-configurar-meu-email-no-outlook-express-com-a-opcao-imap1

2º Passo – Clique em Adicionar Email.

como-configurar-meu-email-no-outlook-express-com-a-opcao-imap2

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

como-configurar-meu-email-no-outlook-express-com-a-opcao-imap3

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

como-configurar-meu-email-no-outlook-express-com-a-opcao-imap4

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

como-configurar-meu-email-no-outlook-express-com-a-opcao-imap5

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

como-configurar-meu-email-no-outlook-express-com-a-opcao-imap6

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

como-configurar-meu-email-no-outlook-express-com-a-opcao-imap7

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

como-configurar-meu-email-no-outlook-express-com-a-opcao-imap8

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

como-configurar-meu-email-no-outlook-express-com-a-opcao-imap9

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

como-configurar-meu-email-no-outlook-express-com-a-opcao-imap10

11º Passo – Na janela que abriu veja se esta 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-express-com-a-opcao-imap11

12º Passo – Feito as alterações clique em OK.

como-configurar-meu-email-no-outlook-express-com-a-opcao-imap12

13º Passo – Para terminar clique em Fechar.

como-configurar-meu-email-no-outlook-express-com-a-opcao-imap13

14º Passo – Aparecera uma nova janela para fazer o download das pastas do servidores e clique em OK.

como-configurar-meu-email-no-outlook-express-com-a-opcao-imap14

15º Passo – Em seguida abrira uma nova janela onde você selecionara as pastas que quer visualizar no Outlook Express. Clique em Mostrar e depois OK.

como-configurar-meu-email-no-outlook-express-com-a-opcao-imap15

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-express-com-a-opcao-imap16

Como configurar meu email no IncrediMail com a opção IMAP

Configurando com a opção IMAP.

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

como-configurar-meu-email-no-incredimail-com-a-opcao-imap1

2º Passo – Clique em Adicionar.

como-configurar-meu-email-no-incredimail-com-a-opcao-imap2

3º Passo – No assistente da conta selecione “Configurarei os ajustes sozinho”. E clique em Avançar.

como-configurar-meu-email-no-incredimail-com-a-opcao-imap3

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

como-configurar-meu-email-no-incredimail-com-a-opcao-imap4

5º Passo – Selecione o tipo do seu servidor, que neste caso sera o IMAP. Informe o endereço de entrada e saída fornecido pelo seu provedor (mail.yesbr.com.br). E clique em Avançar.

como-configurar-meu-email-no-incredimail-com-a-opcao-imap5

6º Passo – Insira seu endereço de e-mail e sua senha em seguida clique em Concluir.

como-configurar-meu-email-no-incredimail-com-a-opcao-imap6

7º Passo – No final aparecerá uma janela como esta abaixo informando que sua conta foi criada com êxito. Clique em OK.

como-configurar-meu-email-no-incredimail-com-a-opcao-imap7

8º Passo – Ainda na janela de “Contas de e-mail”, clique em Propriedades.

como-configurar-meu-email-no-incredimail-com-a-opcao-imap8

9º Passo – Nessa janela que abriu clique na aba Servidores.

como-configurar-meu-email-no-incredimail-com-a-opcao-imap9

10º Passo – Selecione “Meu servidor requer autenticação” em seguida clique na aba Avançado.

como-configurar-meu-email-no-incredimail-com-a-opcao-imap10

11º Passo – Agora selecione as opções “Este servidor exige uma conexão segura(SSL) e clique em OK.

como-configurar-meu-email-no-incredimail-com-a-opcao-imap11

12º Passo – Feito as configurações clique em Fechar.

como-configurar-meu-email-no-incredimail-com-a-opcao-imap12

13º Passo – Em seguida aparecerá uma janela informando o certificado de segurança clique em OK.

como-configurar-meu-email-no-incredimail-com-a-opcao-imap13

14º Passo – Logo após surgirá uma janela pedindo para informar o seu e-mail e senha, depois clique em OK. E começe a usar seu gerenciador de e-mail normalmente.

como-configurar-meu-email-no-incredimail-com-a-opcao-imap14

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-incredimail-com-a-opcao-imap15

Como configurar meu email no ThunderBird com a opção IMAP

Configurando o TunderBird com a opção IMAP.

1º Passo – Abra o thunderbird clique em Ferramentas e em seguida Configurar contas.

como-configurar-meu-email-no-thunderbird1

2º Passo – Clique em Nova conta.

como-configurar-meu-email-no-thunderbird2

3º Passo – No assistente de contas selecione a opção desejada, no caso Conta de email. E clique em Avançar.

como-configurar-meu-email-no-thunderbird3

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

como-configurar-meu-email-no-thunderbird4

5º Passo – Selecione o tipo do seu servidor, que neste caso sera o IMAP. Informe o endereço de entrada fornecido pelo seu provedor.

como-configurar-meu-email-no-thunderbird5

6º Passo – Insira seu endereço de e-mail. Depois clique em Avançar.

como-configurar-meu-email-no-thunderbird6

7º Passo – Entre com seu endereço de e-mail novamente. E clique em Avançar.

como-configurar-meu-email-no-thunderbird7

8º Passo – Feito as configurações clique em Concluir.

como-configurar-meu-email-no-thunderbird8

9º Passo – Na janela Configurar contas clique em Servidor de envio(SMTP) e depois em Adicionar.

como-configurar-meu-email-no-thunderbird9

10º Passo – Insira o endereço do seu servidor de saída. Selecione “O servidor requer autenticação” e “Usar autenticação segura” em seguida clique em OK. Como mostra a figura abaixo.

como-configurar-meu-email-no-thunderbird10

 

11º Passo – Feito as configurações clique em OK.

como-configurar-meu-email-no-thunderbird11

12º Passo – Em seguida aparecera uma janela pedindo sua senha, depois de inseri-la é so clicar em OK. E podera usar seu gerenciador de e-mails normalmente.

como-configurar-meu-email-no-thunderbird12

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

Configurando com a opção SSL.

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

como-configurar-meu-email-no-incredimail1

2º Passo – Clique em Adicionar.como-configurar-meu-email-no-incredimail2

3º Passo – No assistente da conta selecione “Configurarei os ajustes sozinho”. E clique em Avançar.

como-configurar-meu-email-no-incredimail3

 

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

como-configurar-meu-email-no-incredimail4
5º Passo – Selecione o tipo do seu servidor, que neste caso sera o POP3. Informe o endereço de entrada e saída fornecido pelo seu provedor (mail.yesbr.com.br). E clique em Avançar.

como-configurar-meu-email-no-incredimail5

 

6º Passo – Insira seu endereço de e-mail e sua senha em seguida clique em Concluir.

como-configurar-meu-email-no-incredimail6
7º Passo – No final aparecerá uma janela como esta abaixo informando que sua conta foi criada com êxito. Clique em OK.
como-configurar-meu-email-no-incredimail7
8º Passo – Ainda na janela de “Contas de e-mail”, clique em Propriedades.

como-configurar-meu-email-no-incredimail8

9º Passo – Nessa janela que abriu clique na aba Servidores.

como-configurar-meu-email-no-incredimail9

 

 

10º Passo – Selecione “Meu servidor requer autenticação” em seguida clique na aba Avançado.

como-configurar-meu-email-no-incredimail10
11º Passo – Agora selecione as opções “Este servidor exige uma conexão segura(SSL) e clique em OK.

como-configurar-meu-email-no-incredimail11

 

12º Passo – Feito as configurações clique em Fechar. E começe a usar seu gerenciador de e-mail normalmente.

como-configurar-meu-email-no-incredimail12
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-incredimail13

 

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”