anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Como criar uma página de login em PHP?

Que tal criar uma página com um formulário simples com campos de Login e Senha utilizando PHP e que ao ser preenchido e enviado, revela o conteúdo de um site? Com o tutorial a seguir, você vai descobrir que o processo pode ser mais simples do que imagina!

É sempre bom termos uma verificação de Login e Senha para entrarmos nas páginas de controle do nosso site. Este sistema é bem interessante para quem pretende restringir acesso a uma página, e muitas pessoas têm dúvidas em como fazer isso utilizando o PHP. Nesta demonstração, não irei me preocupar em criar um banco de dados para armazenar as informações, mas prometo que demonstrarei isso em um próximo post. Desta vez, apenas criaremos o formulário e a página de conteúdo sem nenhuma preocupação com o tempo ou com a estética do projeto. O importante é compreender o processo, pois você poderá repeti-lo e aperfeiçoá-lo utilizando-o nos seus trabalhos quando necessitar.

Para esse tipo de trabalho, você vai precisar de:

  • Um editor de códigos – neste tutorial, utilizarei o Dreamweaver, pois você irá perceber que muitos recursos mostrados aqui pertencem exclusivamente a esse programa. Caso não o possua em seu computador, você poderá baixa-lo Aqui e experimenta-lo por um período de 30 dias antes da ativação.
  • Um servidor web – usaremos um programa que simula um servidor para web, com um pacote de instalação que contenha o Apache, PHP, MySQL e também o PHPMyAdmin, ideal para quem deseja ter um servidor rodando no seu computador. Existem várias ferramentas gratuitas que fazem isso, como O Wamp e o EasyPHP. Você pode baixar qualquer um dos dois Aqui e Aqui. Neste tutorial, utilizarei o Wamp como modelo.

Com o Dreamweaver devidamente instalado e o servidor ativado em seu computador, vamos criar as pastas do site para configurar no Dreamweaver. Como você deve saber, para ver as páginas PHP em funcionamento, vamos ter de criar a nossa pasta dentro da pasta WWW do Wamp.  Vá até o diretório onde ela se encontra e cria uma pasta dentro dela. Você pode dar o nome que desejar para a sua pasta, no meu caso, utilizarei o nome “Site”.

img r 1

img r 2

Agora iremos configurar nosso site no Dreamweaver. Esta parte sempre é importante porque o Dreamweaver nos ajuda a gerenciar os arquivos do site e no caso do PHP isso é fundamental para o funcionamento de todo o processo.  Abra o programa e na tela inicial, escolha Criar Novo>Site do Dreamweaver.

img r 3

Coloque um nome para o site. Neste caso, usarei o nome Login_e_senha, mas você poderá usar o nome que quiser. Em Pasta do Site Local, clique no ícone da pasta e indique a pasta que acabou de criar. O diretório ficará gravado na linha de endereço do programa. Clique em Salvar para gravar as configurações.

img r 4

img r 5

De volta à tela inicial do programa, agora escolheremos a opção “Mais”.

img2

Em seguida, escolheremos a opção PHP, para abrir um novo documento em branco em PHP.

img3

Agora já temos uma pagina pronta para incluir os nossos códigos. Em primeiro lugar, faremos a parte do layout. Com o botão ”Design” ativado, começaremos a inserir os campos do nosso formulário, que serão dois: um para que o usuário digite o nome e outro para que digite a senha.  Clique na opção “Inserir” e depois em “Formulários” (caso a opção não esteja visível, use o atalho F2 para ativa-la).

img4

img5

Após clicar na opção Formulários, aparecerá um traçado vermelho em nossa pagina. Essa linha é importante, pois é o campo de delimitação do formulário. Todos os elementos devem ficar dentro dela para que funcionem corretamente.

img6

img7

No próximo passo, clique em “Campo de Texto” no mesmo painel “Inserir”.

img8

Uma janela será aberta, onde colocaremos o “ID” como login (identificador do campo que servirá como o código de busca para o PHP)e o “Rótulo” também como Login (que é como ele aparecerá no navegador). Perceba que utilizei letras minúsculas para o ID e no Rótulo utilizei letra maiúscula, nele posso ter mais liberdades com relação a isso, já que ele não influenciará em nossa programação.

img9

img10

Os campos de nosso campo de formulário estão prontos. Agora, vamos inserir os nossos botões de “ok” (para enviar os dados) e de limpar (que servirá para redefinir o campo caso queira digitar outros valores). De volta na guia Inserir, clique em “Botão”. Na janela que abrirá, preencheremos apenas o seu ID com o texto de “ok”.

img11

img12

Por padrão do programa, o texto do botão virá como “Enviar”, trocaremos para “Entrar”. Basta mudar o valor na Barra de Propriedades na parte inferior do programa.

img13

Repetiremos a mesma operação para criar um novo botão, com o nome de “Limpar”. Mas ao final, você terá que alterar também o Valor para “Limpar”, e clicar em “Redefinir Formulário” na Barra de Propriedades.

img14

img15

Agora, salve a página com o nome de “formulario_login.php”. É fundamental que salve o documento com a extensão “.PHP “ para que tudo funcione corretamente.

 img16

img17

Na sequência, vamos criar um novo documento PHP. No menu principal do programa, clique em “Novo” e em seguida escolha “PHP” novamente.

img18

img19

Neste novo documento, trabalharemos diretamente com os códigos, então ative essa opção no botão de Código do programa. Apague completamente qualquer código automático que esteja na página, deixando-a originalmente em branco.

img20

Começaremos agora incluir nossos primeiros códigos, as declarações de variáveis. Não se esqueçam de abrir e fechar os delimitadores PHP (<?php e ?>)

img21

Compreendendo o código: com $lg e $sn estamos criando duas variáveis, onde as buscamos pelo método $_POST do PHP, dos campos de ‘login’ e ‘senha’ do outro arquivo que salvamos como formulario_login.php.

E então escreveremos o restante do código. Copie tudo respeitando maiúsculas e minúsculas, não esqueça que PHP é Case sensitive, ou seja, sensível a letras maiúsculas e minúsculas.

img22

Neste if($lg == “marcelo” & $sn == “senha”) estamos comparando se a variável $lg é igual ao usuário “marcelo” e se a variável $sn é igual a senha “senha”.

No primeiro echo estamos exibindo uma mensagem que o Login e a Senha estão corretos, e na linha debaixo onde temos “location,href=’bemvindo.php’ ” estamos redirecionando o usuário para uma nova pagina que criaremos a seguir.

No segundo echo, será exibida uma mensagem de Login ou Senha incorretos, caso a pessoa digite-os de maneira errada, e que chamará novamente a pagina do formulário_login.php.

 Agora, salvaremos este código que fizemos com o nome de “codigo_login.php

img23

Volte então para o primeiro arquivo que criamos, o formulário_login.php. Clique em qualquer parte vazia da página, fora da área vermelha do formulário (não importa onde). Na Barra de Propriedades aparecerá a opção “Ação”. Escreva ali qual será o destino deste Formulário, no caso, “código_login.php”.

img24

img25

Crie mais um arquivo em branco, novamente em PHP (Arquivo > Novo >PHP).

img26

img27

Nesta página (que é para onde o usuário será redirecionado caso tenha digitado as informações de Login e Senha corretos), escreva uma mensagem de boas vindas e salve-a com o nome de “bemvindo.php”.

img28

img29

Agora com tudo pronto, vamos testar a nossa página. Abra o Wamp e clique no diretório WWW para exibir nossa pasta com os arquivos do Site.

ult img

Clique na página de formulário e faça o teste. O resultado é simples, mas muito interessante, já que servirá de base para muita coisa que fará com o PHP no futuro. É importante lembrar que você poderá incrementar a parte visual ou acrescentar outra mensagem, imagens, cores etc. e poderá incluir esses códigos normalmente em seu site, sem nenhuma dificuldade. Mas deve ter notado que, criando uma página de login e senha deste modo, ainda não há a possibilidade de inserir novos usuários, ou mesmo alterar o nome e a senha, se não for pelo código. Fiquem ligados, pois em breve postarei uma segunda parte deste tutorial agora com a inclusão de um banco de dados onde poderemos realizar a adição de novos usuários. Não se esqueça de deixar o seu comentário, dizendo o que achou do tutorial e também se tudo funcionou perfeitamente. Se gostar, não deixe de Curtir e Compartilhar para seus amigos!

Até o próximo post!

Próximo

Postado por