Dica do meu amigo Otávio.

Primeiramente, você deverá ter um servidor com suporte PHP instalado em seu computador, ou então alguma hospedagem, para testar a aplicação. Se desejar instalar um servidor e não souber como, leia o tutorial de instalação do EasyPHP que escrevi a alguns meses.

Vamos começar!

Primeiramente, crie o banco de dados. No nosso caso escolhi o nome “tutoriais”, pois irei utilizá-lo em outros artigos.

Depois que o banco estiver criado, o próximo passo é criar a tabela de usuarios.

CREATE TABLE IF NOT EXISTS `usuario` (
  `id` int(6) NOT NULL AUTO_INCREMENT,
  `nome` varchar(255) NOT NULL,
  `login` varchar(255) NOT NULL,
  `senha` varchar(255) NOT NULL,
  PRIMARY KEY (`id`));

Com a tabela criada, vamos agora povoá-la:

INSERT INTO `usuario` (`id`, `nome`, `login`, `senha`) VALUES (1, 'Arthur Sorriso', 'sorriso', '698dc19d489c4e4db73e28a713eab07b');

O campo senha, está encriptado no formato MD5, para uma melhor segurança. Aqui ela significa apenas “teste”.

Agora, o próximo passo é criar o formulário de login.

form_login.php

<strong>Sistema de Login</strong>
<form action="autenticar.php" method="post">
Login: <input name="login" type="text" />
Senha: <input name="senha" type="password" />
<input type="submit" value="Acessar" /></form>

Explicando o código:

A primeira linha é apenas um título, para ficar organizado. Nada de mais.

Na segunda começamos a criar o formulário. Utilizamos a tag form. O parâmetro action informa o destino que a página vai quando o botão “Acessar” é presionado. O parâmetro “method” pode ser “get” ou “post”. Para este utilizaremos “post” por ser mais seguro. No “get”, os dados do formulário serão enviados via endereço no browser, o que não queremos.

Na terceira linha criaremos o campo para o usuário digitar o login. Para isso utilizamos a tag “input” com tipo texto.

Na quarta linha criaremos o campo para senha. É análogo ao campo de login, a única diferença é o tipo, que agora passa a ser “password” de forma que quando o usuário digitar algo, isto aparecerar como asterisco(*).

Na quinta linha criaremos o botão para submeter o nosso formulário. Para isso utilizamos a tag “input” com tipo “submit”. E depois fechamos o formulário.

Vamos agora criar a página que fará a conexão com o nosso banco de dados.
connect.php

<?php
$host = "localhost";
$user = "root";
$password = "";
$dbname = "tutoriais";
mysql_connect($host, $user, $password) or die("Erro ao tentar se conectar!");
mysql_select_db($dbname)or die("Erro ao selecionar o banco!");
?>

Explicando o código:

Primeiramente pegamos as variáveis necessárias para a conexão no banco de dados. A primeira é o host para conectar. Na maioria dos casos será localhost mesmo. Depois usuário e senha do banco de dados. E por último o banco de dados que será utilizado. Como falei lá em cima, o banco que utilizarei é o tutoriais.

Depois criaremos a nossa conexão. Para isso utilizaremos a função mysql_connect e passaremos como parâmetros as variáveis de cima. Caso ocorra um erro, será mostrada a mensagem escrita dentro do die().

Por fim fazemos a seleção do banco de dados que iremos utilizar.
Simples.

Agora vamos para a parte mais complicada, mas não difícil, do tutorial. A página que será responsável pela autenticação do usuário, criando assim sua sessão.

autenticar.php

<?php
include("connect.php");
 
//Recebendo os dados do formulário
$login = addslashes($_POST["login"]);
$senha = md5(addslashes($_POST["senha"]));
 
$sql = "SELECT * FROM usuario WHERE login = '$login' AND senha = '$senha'";
$rs = mysql_query($sql);
 
if(mysql_num_rows($rs) == 1) {
	$user = mysql_fetch_array($rs);
	//conferindo o login e senha para segurança
	if($login == $user['login']){
		//se entrou, entao o login é igual
		if($senha == $user['senha']){
			//se entrou, então a senha também é igual
			$logado = "1";
			$id_user = $user['id'];
 
			//criando a sessão
			session_start();
			$_SESSION["id_user"] = $id_user;
			$_SESSION["logado"] = $logado;
 
			//depois que criarmos a sessão, 
                        //vamos redirecionar para a página privada
			header("Location: cadastro.php");
		} else {
			echo "A senha não confere!";
 
		}
	} else {
		echo "O usuário não confere!";
	}
}else {
	echo "Usuário ou senha inválidos. Tente novamente.";
}
?>

Explicando o código:

Primeiramente incluimos o arquivo connect.php, a fim de estabelecermos a conexão com o banco de dados.

//Recebendo os dados do formulário
$login = addslashes($_POST["login"]);
$senha = md5(addslashes($_POST["senha"]));

Depois iremos receber as variáveis passadas pelo formulário. A função addslashes() serve para tratarmos nossas Strings recebidas, afim de evitar qualquer ataque de Sql Injection. Ela funciona da seguinte forma: sempre que encontrar qualquer aspa simples (’) ou dupla (”), ele adiciona uma barra invertida antes dela, ficando por exemplo \’. Uma das formas de invasão de sites mais simples é esta, digitando por exemplo ‘or 1=1 –. Esta é uma forma de se evitar. Continuando, a função md5() serve para encriptar a senha, já que a do banco está encriptada, a que se passa no formulário deverá também o ser, para comparamos.

Na próxima criamos uma variável para receber nossa string sql. Ela seleciona tudo (*) da tabela usuario, onde o login for igual ao da variável e a senha também. Simples.

Na próxima linha executamos o sql.

$sql = "SELECT * FROM usuario WHERE login = '$login' AND senha = '$senha'";
$rs = mysql_query($sql);
if(mysql_num_rows($rs) == 1) {

A seguir, testamos se o comando retornou alguma linha na consulta. Se não, o usuário e a senha poderá ter sido escrito errado, ou até mesmo não existir.

Se a consulta estiver correta, entraremos no nosso if.

$user = mysql_fetch_array($rs);
//conferindo o login e senha para segurança
if($login == $user['login']){
	//se entrou, entao o login é igual
	if($senha == $user['senha']){

A primeira linha dentro do if cria um array na variável $user com os dados coletados no banco de dados.

A seguir, conferimos se o conteúdo da variável é igual ao conteúdo vindo pelo formulário, evitando assim também alguma invasão.

Depois de conferidos o usuário e a senha, iremos ao próximo trecho:

//se entrou, então a senha também é igual
$logado = "1";
$id_user = $user['id'];
//criando a sessão
session_start();
$_SESSION["id_user"] = $id_user;
$_SESSION["logado"] = $logado;
//depois que criarmos a sessão, vamos redirecionar para a página privada
header("Location: cadastro.php");

Primeiramente atribuimos o valor 1 à variável $logado, já que o usuário escreveu tudo corretamente, e depois guardamos o id do usuário no banco na variável $id_user.

Agora podemos criar nossa sessão inicializando ela primeiramente, e depois criando suas variáveis.

A seguir, redirecionamos à página que queremos que os usuários logados acessem.

As próximas linhas são apenas fechamentos dos ifs e tratamentos de erros, com os elses.

Agora iremos para a nossa página privada, que só poderá ter seu conteúdo visto se o usuário estiver logado.

cadastro.php

<?php
//Iniciando a sessão
session_start();
include("connect.php");
if($_SESSION['logado'] == 1){
	$sql = "SELECT * FROM usuario WHERE id = ".$_SESSION['id_user'];
	$rs = mysql_query($sql);
	if(mysql_num_rows($rs)) {
		$user = mysql_fetch_array($rs);
		echo "<strong> Olá ".$user['nome']."!</strong> ";
		echo "<a href="logout.php">Sair</a>";
		echo "Esta é sua página privada. 
                Nos próximos tutoriais continuaremos com esta página.";
	}
}else {
	echo "Você não está logado. Tudo está oculto para você!";
}
?>

Explicando o código:

session_start();
include("connect.php");
if($_SESSION['logado'] == 1){

Nas primeiras linhas iniciamos a nossa sessão, e incluímos o arquivo de conexão com o banco. A seguir testamos se usuário está realmente logado, vendo se o conteúdo da variável de sessão $_SESSION['logado'] é igual a 1, conforme definimos no arquivo autenticar.php.

$sql = "SELECT * FROM usuario WHERE id = ".$_SESSION['id_user'];
$rs = mysql_query($sql);
if(mysql_num_rows($rs)) {
	$user = mysql_fetch_array($rs);
	echo "<strong> Olá ".$user['nome']."!</strong> ";
	echo "<a href="logout.php">Sair</a>";
	echo "Esta é sua página privada. 
        Nos próximos tutoriais continuaremos com esta página.";
}

Agora escrevemos o nosso conteúdo oculto a não logados. Aqui fiz apenas uma simples consulta para pegar o nome do usuário, e exibí-lo nas boas vindas. Em seguida, apresentei o link para o usuário se deslogar do sistema.

O restante do código é apenas fechamento de if, e um else para os usuários não logados.

Por fim, a página de logout.

logout.php

<?php
//Iniciando a sessão
session_start();
//destruindo a sessão
session_destroy();
 
Header("Location: form_login.php");
?>

Nela nós destruimos a sessão, e redirecionamos para a página de login.

No próximo tutorial, irei abordar a parte de inserção no banco de dados. Pretendo fazê-lo como uma continuação deste, modificando nossa página cadastro.php, a fim de cadastrar novos usuários.

Bom por hoje é só. Espero ter sido claro no tutorial.

Se tiverem dúvidas é só perguntar nos comentários.

Arquivos do artigo para download

Abraço.

Irei começar uma série quase infinita (não sei até quando ou onde vai) de tutoriais para aqueles interessados em aprender a linguagem de programação para Web PHP.

As principais características do PHP são:

• Velocidade e robustez;
• Estruturado e orientado a objeto;
• Portabilidade – roda em qualquer lugar;
• Tipagem fraca;
• Sintaxe similar a C/C++.

Instalação do Servidor

Para que possamos executar nossas páginas e códigos PHP em nosso computador, temos que ter um servidor instalado. Para isso utilizaremos neste tutorial o EasyPHP.

O EasyPHP é uma ferramenta que monta um Servidor Web em sua máquina com Apache, PHP e MySQL. Com algumas configurações a mais poderemos adicionar outros Bancos de dados, como o PostgreSQL por exemplo.

Para baixar o EasyPHP em sua versão mais recente, a 3.0, clique AQUI.

Como qualquer instalação do Windows, ela consiste apenas em Aceitar e Próximo.

Execute o arquivo EasyPHP-3.0-setup.exe.

Primeiramente selecione o idioma para a instalação, como mostra a figura abaixo:

A tela de boas vindas será apresentada, com algumas recomendações. Clique em avançar.

A tela seguinte trás o contrato de licença de uso. Se costuma ler, vá em frente. Se concordar, basta aceitar e avançar para prosseguir com a instalação.

A próxima tela trás algumas advertências como fazer um backup dos arquivos caso tenha outra versão instalada, fechar a mesma se estiver aberta, entre outras coisas. Quando estiver pronto clique em avançar.

Neste próximo passo você poderá escolher onde o EasyPHP será instalado. Normalmente deixa-se como está. Ao final, clique em avançar.

A próxima tela apenas mostra como aparecerá no Menu Iniciar. Deixe como está e clique em avançar.

A tela seguinte mostra como será instalado, de acordo com as configurações que você escolheu, como o local onde será instalado e o atalho no Menu Iniciar. Clique em instalar para começar a instalação.

Agora a instalação está em curso. Aguarde enquanto a barra de progresso é completada.

Pronto! Você agora tem o EasyPHP instalado em seu computador. Clique em concluir para finalizar a instalação.

Junto com o EasyPHP vem o PHPMyAdmin. Este sistema serve para facilitar no uso do SGBD MySQL. Para utilizá-lo entre no diretório em que você instalou o EasyPHP (se não tiver mudado nada na instalação está em C:\Arquivos de Programas\EasyPHP 3.0). Lá, você encontrará o diretório phpmyadmin. Arraste-o para www e pronto.

Para executar o EasyPHP é simples. Basta procurá-lo no Menu Iniciar, e executar. Repare que o ícone do EasyPHP irá aparecer ao lado do relógio, na barra de tarefas. Clicando com o botão direito nele é possível ver todas opções e configurações.

Se tudo estiver bem, ao posicionar o Mouse em cima do ícone o texto “EasyPHP (Iniciado)” será apresentado. Caso contrário, basta clicar com o botão esquerdo do Mouse, e tentar iniciar os serviços que estiverem parados.

Uma vez executado, abra o seu navegador, e digite na barra de endereços http://localhost.

Todo o conteúdo que está na pasta www será apresentado em forma de lista, como mostrado a seguir:

Como por enquanto só temos a pasta do phpmyadmin no nosso servidor, somente ela será apresentada.

Agora você possui um servidor web com Apache, PHP e MySQL instalado em seu computador. Sempre que for escrever alguma página ou script PHP, salve o conteúdo na pasta www, execute o EasyPHP, e escreva localhost em seu navegador para testa-lo.

Espero ter sido claro no tutorial. Nos próximos pularemos toda essa parte introdutória, portanto, prestem atenção neste.

Dúvidas, é só utilizar os comentários.

Pesquisas indicam que a maioria dos usuários de buscadores (Google, Yahoo…) não ultrapassam da terceira página de resultados, logo, se quiser que seu site obtenha mais visitas, deverá aparecer nas primeiras páginas de busca.

Para isso utilizamos técnicas de SEO (Search Engine Optimization, ou Otimização para sistemas de busca). SEO consiste em um conjunto de técnicas que visam melhorar o código e conteúdo do site para que os algoritmos buscadores possam indexar seus conteúdos mais facilmente. Maiores informações sobre SEO vocês poderão encontrar aqui.

Então, vamos às algumas técnicas básicas:

Palavra chave no título

É interessante descrever um título que contenha algum identificador de seu site, pois este título é a primeira informação que será apresentada nos buscadores.

Utilização de Meta Tags

Meta tags são linhas de código HTML que descrevem o conteúdo de seu site aos buscadores. Utilizada corretamente, esta é uma importante ferramenta. Nela podemos adicionar palavras chaves, descrição do site, autor e informações para os robots dos buscadores. Meta tags deverão ser utilizadas entre as tags <head></head>. Um ótimo exemplo de meta tags pode ser visto a seguir:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Descrição do seu site." />
<meta name="author" content="Arthur Sorriso" />
<meta name="keywords" content="Palavras chaves que deverão estar no seu site" />
<meta name="robots" content="INDEX,FOLLOW" />

Links Amigáveis

É muito comum encontrarmos sites, principalmente aqueles de notícias, com o seguinte endereço www.site.com.br/noticias.php?id=3, mas como podemos ver, o endereço da notícia não traz nenhuma pista do conteúdo da mesma. Essa dúvida também ocorre com os buscadores, pois os mesmos não conseguem associar seu endereço com qualquer termo de busca. Um link amigável seria do tipo www.site.com.br/noticias.php/titulo-da-noticia, como o que utilizo neste blog.

Utilização correta das tags <h1>, <h2> e <h3>

É  importante diferenciar as informações no seu site, como por exemplo o título de um artigo. As tags <h1> e <h2> geralmente são utilizadas nos títulos, tanto dos artigos, como do próprio site. A tag <h3> geralmente deve utilizada nos resultados de pesquisas ou descrições por exemplo.

Palavras chaves em imagens

Os buscadores não conseguem interpretar as imagens, porém conseguem captar seu nome e o conteúdo descrito na tag alt, que funciona como uma descrição da imagem. Eis um exemplo de seu uso: <img src = “imagem.jpg” alt=”descricao da imagem” />.

Linkar suas próprias páginas

Sempre que possível relacionar algumas das postagens de seu site, em outras postagens, despertando assim, ao leitor, visitar outras páginas relacionadas ao assunto, ou não, e não sair sem visitar mais nada. Com isso, diminui-se o índice de rejeição e melhora o PageRank de seu site.

Utilizar robots.txt

O uso do arquivo robots.txt facilita o “trabalho” dos robots dos buscadores, melhorando assim a indexação do conteúdo de seu site.

Utilização de sitemap

O sitemap é um arquivo XML que lista todos os links de seu site. Sua utilização faz com que os buscadores indexem mais rapidamente seu conteúdo, e interpretem as prioridades definidas. É uma das ferramentas mais importantes.

Palavras chaves

A utilizaçãode palavras chaves, ou keywords, é um fator que influencia muito na indexação de seu site. Elas podem ser utilizadas tanto no início de artigos, como tags relacionadas, ou no próprio conteúdo, através da núvem de tags. Também pode ser utilizada em imagens, como falei anteriormente. Deve-se ter, porém, um cuidado com estas palavras chaves, pois a utilização inadequada, palavras chaves que não estão relacionadas em nada com o conteúdo, poderá fazer o site perder pontos com os buscadores.

Estas são umas das técnicas mais simples e eficientes. A aplicação correta delas fará com que consiga alguns “pontinhos” com os buscadores. Utilizei destas regras neste blog, e em menos de um mês, o conteúdo foi indexado pelos buscadores, e, alguns termos de pesquisa já figuram entre os primeiros resultados, como por exemplo “Caricatura Edmundo“. Deve-se salientar também, que o número de visitas de seu site também influencia muito em sua colocação, portanto, procurem escrever algo de qualidade, e que despertem o interesse do visitante. Outro fator que influencia também é a quantidade de links encontrados direcionados ao seu, vindos de outros sites. Parceirias são bem vindas.

Procurem se cadastrar na ferramenta de webmasters do Google. Lá vocês poderão cadastrar seus sites, enviar seus sitemaps, e acompanhar todo o andamento do processo de indexação. Procurem informações também sobre PageRank e bounce rate.

Um site muito interessante, o qual aprendi muito sobre SEO, e obtive estas técnicas, é o www.fique-rico.com. Aconselho muito a visita.

Por enquanto é só. Posteriormente postarei como criar Sitemaps e Robots.txt.

Quaisquer dúvidas, é só perguntar.

A seguir detalho os passos…

Primeiramente veremos de onde pegar as informações do tempo. Escolhi o tempoagora, pois ao fim do endereço insere-se a cidade de onde deseja buscar a previsão, facilitando assim nosso trabalho.

No meu caso seria http://tempoagora.uol.com.br/previsaodotempo.html/brasil/Natal-RN.

Agora vamos ao que interessa.

O Script completo desse tutorial fica assim:

 <?php
   //Definimos a cidade
   $cidade = 'Natal-RN';
   //Capturamos o conteudo do site
   $file = file_get_contents("http://tempoagora.uol.com.br/previsaodotempo.html/brasil/".$cidade);
 
   //Capturamos a imagem
   $img = explode("mini-",$file);
   $img = explode(".gif",$img[2]);         
 
   switch($img[0]) {
     case 'PI':   print "Pouco ensolarado"; break;
     case 'CC':   print "Céu Claro"; break;
     case 'PC':   print "Pancadas de chuva"; break;
     case 'NC':   print "Nublado com chuva"; break;
     case 'CH':   print "Chuvoso"; break;
     case 'NB':	  print "Nublado"; break;
     case 'PN':   print "Poucas núvens"; break;
     default:     print "Céu claro"; break;
     }
?>

Agora vamos às explicações…

   //Definimos a cidade
   $cidade = 'Natal-RN';
   //Capturamos o conteudo do site
   $file = file_get_contents("http://tempoagora.uol.com.br/previsaodotempo.html/brasil/".$cidade);

Neste trecho de código, primeiramente, definimos a cidade à qual estamos interessados em saber a previsão do tempo. A seguir, utilizando-se da função file_get_contents, capturamos o conteúdo da página como um arquivo. Repare que a variável $cidade aparece concatenada em seguida com o endereço, completando assim o mesmo.

   //Dividimos o conteudo em partes
   $sep = explode("°C",$file);
 
   //Capturamos a imagem
   $img = explode("mini-",$file);
   $img = explode(".gif",$img[2]);

De posse dos dados do conteúdo site na variável $file, iremos tratá-lo agora. Com o site aberto, percebemos que uma imagem é apresentada, com o desenho da previsão (como neste site). É em cima dela que iremos trabalhar.

Clicando em ‘exibir imagem’ com o botão direito vemos que o endereço segue um padrão, como por exemplo mini-NB.gif, para nublado. E é isso que vem depois do ‘mini-’ que irá nos interessar.

Com o auxílio da função explode, quebramos o conteúdo de $file cada vez que aparecer ‘mini-’, e depois fazemos outro explode, mas dessa vez com $img[2], cada vez que encontrarmos ‘.gif’, que é para restar apenas as duas letras correspondentes à previsão, como ‘NB’ por exemplo.

Pronto! Agora para finalizar:

   switch($img[0]) {
     case 'PI':   print "Pouco ensolarado"; break;
     case 'CC':   print "Céu Claro"; break;
     case 'PC':   print "Pancadas de chuva"; break;
     case 'NC':   print "Nublado com chuva"; break;
     case 'CH':   print "Chuvoso"; break;
     case 'NB':	  print "Nublado"; break;
     case 'PN':   print "Poucas núvens"; break;
     default:     print "Céu claro"; break;
     }

No passo anterior fizemos um explode na imagem, e gravamos o resultado na variável $img. Esta variável é um vetor de Strings, e se imprimirmos a posição zero desse vetor, teremos o resultado que desejamos.

Todas as possíveis situações são: PI, CC, PC, NC, CH, NB e PN. Como podem ver, fiz apenas um switch com $img[0], mas vocês podem adaptar da forma que desejarem.

Bom isso é só. Espero ter explicado direitinho.

Quaisquer dúvidas, podem perguntar nos comentários. Estarei à disposição.

Primeiramente, pensei em fazer algo que fosse interativo, mudasse constantemente, e que seria um diferencial. Mas o que fazer em um blog?

Então foi que surgiu a idéia das previsões do tempo, e para fazê-lo de forma mais amigável, e engraçada, resolvi criar um cabeçalho para cada ocasião, que é o topo da página, com uma paisagem. A Seguir mostro os vários tipos de cabeçalho:

Céu claro:

Chuvoso:

Nublado:

Nublado com Chuva:

Pancadas de chuva:

Parcialmente Chuvoso:

Poucas nuvens:

Para cada ocasião, o respectivo cabeçalho irá mudar no topo da página. Inicialmente, as previsões são apenas para a cidade de Natal (onde resido), mas futuramente, quem sabe, possa estender mais essa funcionalidade.

Os dados das previsões são pegos do portal http://tempoagora.uol.com.br e atualizados automaticamente. Em outras postagens irei explicar o código PHP utilizado para tal.

Outra coisa que gostaria de destacar é o uso dos padrões da Web 2.0 na logo e nas imagens, padrão este que utiliza fontes simples, imagens suaves e o uso de algumas transparências e reflexos.

Bom, por enquanto é só.

Nos comentários falem o que acharam, e se puderem, algumas sugestões de melhoria. Ficarei muito grato.