WEB INTERATIVA (WEB 1.0/2.0/3.0)

Transcrição

1 WEB INTERATIVA (WEB 1.0/2.0/3.0) Esses termos são motivos de muita confusão e discussões e no fim acaba sendo difícil entender o que realmente é um ou outro. Entenda agora o que são essas nomenclaturas criadas para retratar as constantes mudanças que acontecem e aconteceram com a internet! Em busca de uma definição Muitos acreditam que esses termos nomeiam diferentes versões e /ou atualizações da nossa tão querida rede mundial de computadores, a internet, mas o fato é que a internet sempre foi a mesma, na prática não foi sua tecnologia que mudou e sim o comportamento de seus usuários. Logo, os diferentes momentos da internet, até representam um avanço na tecnologia, porém, estão mais relacionadas a forma que a utilizamos. Web 1.0 O mundo novo É a internet como ela surgiu. Sites de conteúdo estático com pouca interatividade dos internautas e diversos diretórios de links. Ainda com poucos usuários, e esses em sua grande maioria fazendo um uso bastante técnico da rede, predominavam os sites de empresas e instituições recheados de páginas em construção. Evoluindo de suas raízes de uso militar e universitário, a internet começou a caminhar e tomar forma diante das necessidades das pessoas. Essa foi a era do , dos motores de busca simplistas e uma época onde todo site tinha uma seção de links recomendados. Mesmo sendo muito diferente do que conhecemos hoje, a internet foi uma revolução para todos aqueles que dependeram toda a vida de bibliotecas, correios e telefones para trocar informações, aprender ou consultar algo (Eu sei que você está se perguntando como foi que a humanidade conseguiu viver tanto tempo sem a internet, não é mesmo?). Os principais serviços dessa época eram o Altavista, Geocities, Cadê, Hotmail, Yahoo! e, claro, o Google.

2 Web 2.0 A era social A Web 2.0, também chamada de web participativa, foi a revolução dos blogs e chats, das mídias sociais colaborativas, das redes sociais e do conteúdo produzido pelos próprios internautas. Nesse momento, a internet se popularizou em todo o mundo, e começou a abranger muito mais do que algumas empresas para se tornar obrigatória para qualquer um que queira ter sucesso no mercado. Por meio do YouTube, Facebook, Flick, Picasa, Wikipédia, e muitas outras redes sociais, todos passaram a ter voz e essa voz passou a ser escutada e respeitada fielmente. O termo Web 2.0 (e consecutivamente, o Web 1.0) foi criado pelo especialista no setor Tim O Reilly, classificando essa nova forma de utilizar a internet como uma web como plataforma. Os sites criados para esse momento da internet já não são estáticos e possuem um layout claramente focado no consumidor e também na usabilidade dos buscadores. Conceitos de SEO são altamente essenciais para os sites a partir da Web 2.0. Nesse momento a navegação mobile e uso de aplicativos já tem forte presença no dia-a-dia das pessoas.

3 Web 3.0 O que vem por ai Nomear movimentos e acontecimentos da história enquanto eles são vividos é sempre muito difícil, porém o termo Web 3.0 não é exatamente algo inédito e há um tempinho já estamos vendo ele por ai. A Web 3.0 é uma internet onde teremos toda informação de forma organizada para que não somente os humanos possam entender, mas principalmente as máquinas, assim elas podem nos ajudar respondendo pesquisas e perguntas com uma solução concreta, personalizada e ideal. É uma internet cada vez mais próxima da inteligência artificial. É um uso ainda mais inteligente do conhecimento e conteúdo já disponibilizado online, com sites e aplicações mais inteligentes, experiência personalizada e publicidade baseada nas pesquisas e no comportamento de cada indivíduo. Alguns dizem que a Web 3.0 é uma internet móvel, focada em celulares e smartphones, porém esse é um pensamento totalmente errôneo. A Web 3.0 é muito mais ampla do que o conceito mobile, nesse cenário as pessoas estão e estarão conectadas 24 horas por dia nos 7 dias da semana, por meio dos celulares, smartphones, SmartTV s, ipod s, tablets, carros, videogames que são verdadeiras centrais de diversão, e projetos como iwatch e Google Glass, que estão mais próximos de nossa realidade do que imaginamos. O termo Web 3.0 foi criado pelo jornalista John Markoff, do New York Times, baseado na evolução do termo Web 2.0 criado por O Really em Outras denominações desse mesmo momento são Web Semântica ou Web Inteligente. Neste contexto vamos trabalhar como podemos definir dentro da WEB 2.0 e para isso vamos conhecer o AJAX. O que é AJAX? Antes de explicar o que é AJAX, deve-se explicar o que ele não é; AJAX não é um framework, uma API nem uma tecnologia em si, é uma funcionalidade implementada por um conjunto de objetos de JavaScript, sendo o mais importante chamado XMLHttpRequest.

4 Framework Um framework em desenvolvimento de software, é uma abstração que une códigos comuns entre vários projetos de software provendo uma funcionalidade genérica. Um framework pode atingir uma funcionalidade específica, por configuração, durante a programação de uma aplicação. Ao contrário das bibliotecas, é o framework quem dita o fluxo de controle da aplicação. API API é um conjunto de rotinas e padrões de programação para acesso a um aplicativo de software ou plataforma baseado na Web. A sigla API refere-se ao termo em inglês "Application Programming Interface" que significa em tradução para o português "Interface de Programação de Aplicativos". Uma API é criada quando uma empresa de software tem a intenção de que outros criadores de software desenvolvam produtos associados ao seu serviço. Este objeto, que trata uma requisição ou resposta de servidor com um documento XML DOM, contém uma série de métodos que possibilita que o browser possa realizar requisições e receber respostas do servidor sem que este tenha que atualizar (refresh) a tela. Modelo Clica e espera versus modelo Interativo Desde do surgimento da internet, o modelo de interação entre usuário e o servidor via HTTP é baseado em um sistema simples de hipertexto. Ou seja, você clica em um link para requisitar um documento e então espera... o servidor responde, processando sua requisição e devolvendo-lhe o documento. Depois de usufruir desse documento você clica em mais um link e espera...e assim por diante. Veja figura abaixo Podemos dizer que a técnica chamada Ajax, apesar de existir bastante tempo, só ganhou notoriedade quando antigas restrições foram superadas, como incompatibilidade de sistemas operacionais com o navegador do usuário (browser), falta de plug-ins instalados nas maquinas clientes e a baixa conexão que utilizávamos. Com o Ajax temos o modelo interativo. Na foto abaixo podemos notar que a interação entre navegador e o servidor não ocorre de forma totalmente

5 direta, mas por meio da ferramenta Ajax que é ativado por uma chamada Javascript, o usuário pode permanecer visualizando a página normalmente enquanto ocorre a comunicação com o servidor WEB. O servidor processa a solicitação do Ajax (por exemplo, realizando alguma pesquisa ou simplesmente atualizando alguma informação no banco de dados) e envia uma resposta. Caso o servidor retorne dados, o Ajax poderá utilizar esses dados para fazer a atualização de apenas uma parte da página que o usuário está visualizando, sem que seja necessário recarrega-la totalmente. Caso contrário, o usuário também poderá continuar usufruindo normalmente da página, mas ela não sofrerá qualquer alteração visual. Ou seja. É como se a página pudesse ouvir e falar simultaneamente. Veja figura abaixo Alguns benefícios do uso do Ajax 1. Validação em tempo real: Validações que não possam ser feitas do lado do cliente, como,1 por exemplo, verificar se usuário já está cadastrado ou se a data informada é anterior à data atual. 2. Auto Complemento: Possibilita que o ao mesmo tempo em que o usuário for digitando, possa aparecer uma lista de possíveis respostas. 3. Controles de interface de usuário sofisticados: Controles dinâmicos como arvore de diretórios, menus, barras de progresso e interface ricas como aplicações RIA ou até mesmo jogos podem ser implementados sem necessidade de refresh. RIA Aplicações de Internet Rica (da sigla em inglês RIA - Rich Internet Application) são Aplicações Web que tem características e funcionalidades de softwares tradicionais do tipo Desktop. RIA típicos transferem todo o processamento da interface para o navegador da internet, porém mantém a maior parte dos dados (como por exemplo, o estado do programa, dados do banco) no servidor de aplicação.

6 4. Atualização de dados na página: Atualização de informações na página em tempo real sem a necessidade de refresh possibilita, por exemplo, o desenvolvimento de chats, acompanhamento de ações de bolsa, notícias ou aplicações semelhantes. Os pilares do Ajax Podemos afirmar que os pilares da tecnologia Ajax são. Javascript XML CSS PHP Como estamos já trabalhando com o PHP vamos continuar nossos estudos nele e após vamos ao Javascript. Principais serviços a serem utilizados Servidor WEB (Apache) MySql Servidor Apache O Servidor WEB é o programa responsável pela publicação de documentos, imagens ou qualquer outro objeto que venha a ser acessado por um cliente através de um navegador. Este Servidor WEB pode ser configurado para ser acessado apenas em uma rede interna (Intranet) ou uma rede externa (Internet), cada qual com suas funcionalidades definidas pelas necessidades da publicação. O Servidor WEB mais utilizado no mundo segundo a pesquisa realizada "TOP SERVERS ACROSS ALL DOMAINS AUGUST OCTOBER 2006" da NETCRAFT ( é conhecido como? Alguém arrisca? o nosso bom Apache, chegando a 61.44% de reconhecimento e utilização, ficando na frente de outras grandes empresas (Microsoft, Zeus e Sun). Logo, durante nossa Jornada no mundo dos Servidores WEB Apache, estaremos tratando de um assunto que tem reconhecimento e aceitação mundial. Algumas boas e importantes qualidades do Apache é ele ser configurável, robusto, de alta performance (quando bem configurado todas essas qualidades são vistas

7 facilmente), de fácil instalação e seu código fonte ser distribuído gratuitamente pela equipe de desenvolvedores do Apache Software Foundation ( MySQL O MySQL é um sistema de gerenciamento de banco de dados (SGBD), que utiliza a linguagem SQL (Linguagem de Consulta Estruturada, do inglês Structured Query Language) como interface. É atualmente um dos sistemas de gerenciamento de bancos de dados mais populares, com mais de 10 milhões de instalações pelo mundo. Entre os usuários do banco de dados MySQL estão: NASA, Friendster, Banco Bradesco, Dataprev, HP, Nokia, Sony, Lufthansa, U.S. Army, U.S. Federal Reserve Bank, Associated Press, Alcatel, Slashdot, Cisco Systems, Google, entre outros. O MySQL foi criado na Suécia por suecos e um finlandês: David Axmark, Allan Larsson e Michael "Monty" Widenius, que têm trabalhado juntos desde a década de Hoje seu desenvolvimento e manutenção empregam aproximadamente 400 profissionais no mundo inteiro, e mais de mil contribuem testando o software, integrando-o a outros produtos, e escrevendo a respeito dele. Características Portabilidade (suporta praticamente qualquer plataforma atual); Compatibilidade (existem drivers ODBC, JDBC e.net e módulos de interface para diversas linguagens de programação, como Delphi, Java, C/C++, C#, Visual Basic, Python, Perl, PHP, ASP e Ruby) Excelente desempenho e estabilidade; Pouco exigente quanto a recursos de novos hardwares; Facilidade no manuseio; Instalando EasyPHP Vamos instalar o EasyPHP que automaticamente instalará os dois serviços que necessitamos, o Apache e MySQL. Podemos baixar o EasyPHP no site na guia Downloads

8 Pode ser que demore um pouco para baixar do Google Drive, portanto aguarde. Depois de baixar de um duplo clique sobre o arquivo e vamos a instalação Escolha a língua de instalação Inglês/Frances Clique OK

9 Apenas clique em Next nesta tela. Marque o campo I accept the agreement Clique em Next Apenas clique em Next

10 Nesta tela clique em Browse, escolha Disco Local C: na janela que irá abrir, clique em OK e depois Next. Nesta tela apenas clique em Next Clique em Install

11 Espere o programa fazer a instalação. Clique em Finish, pronto programa instalado Abrirá uma pagina do EasyPHP, não se preocupe. Vamos testar na barra de endereço digite localhost

12 Irá mostrar uma página contendo 3 pastas isso e sinal que nosso EasyPHP está funcionando. Caso esteja usando Windows 8/10 clique embaixo em Mostrar ícone ocultos e veja o ícone do EasyPHP clique duas vezes, e note que abriu uma nova janela onde mostra o Servidor Apache e o Servidor Mysql funcionando pois tem um sinal verde, do lado dos mesmos. Para tirar da janela principal clique em MINIMIZAR, pois se não pedirá para fechar o programa Vamos criar uma pasta com nosso nome para colocarmos nossos arquivos php. Abra o Disco Local C:\EasyPHP-DevServer- 14.1VC9\data\localweb e dentro desta pasta crie uma pasta com se nome.

13 Veja se a pasta esta criada Volte ao navegador e de um F5 para atualizar e note que aparece a pasta que você criou. Agora vamos salvar nossos arquivos dentro desta pasta para que possamos fazer testes nos nossos arquivos. PHP GET / POST Sendo informal e direto, o HTTP Hypertext Transfer Protocol(Protocolo de Transferência de Dados) é um protocolo ou padrão de rede implementado em cima do TCP para que browsers e servidores possam se comunicar. Um cliente HTTP é um browser, ou seja, Chrome, Firefox, Internet Explore, entre outros, são softwares que se comunicam com servidores através do HTTP. O tipo de servidor a que me refiro aqui também são softwares, como por exemplo, o Apache e o IIS (Microsoft). Os principais métodos de comunicação HTTP são: GET e POST. Vamos ver suas principais diferenças.

14 Visibilidade A grande diferença entre os métodos GET e POST provavelmente é a visibilidade. Uma requisição GET é enviada como string anexada a URL, enquanto que a requisição POST é encapsulada junto ao corpo da requisição HTTP e não pode ser vista. Tamanho Como a requisição GET é feita via URL, obviamente há uma limitação no tamanho da mensagem enviada. A string não pode conter mais que 255 caracteres (embora exista diferenças entre navegadores, mas em geral o limite é 255). Já na requisição POST não há limitações de comprimento da mensagem, já que a mesma é enviada no corpo da requisição HTTP. Performance A requisição GET é relativamente mais rápida, já que ela é mais simples. Na requisição POST há uma perda de tempo no encapsulamento da mensagem. Tipos Já que GET é enviado via URL, então nós sabemos que ela só transporta textos. A requisição POST não tem restrições, pode transportar tanto texto, como dados binários. Método HTML Padrão GET é o método HTML padrão. Para submeter um formulário HTML usando POST é preciso especificar no atributo method o valor POST. Dados As requisições GET são limitadas ao padrão ASCII, enquanto que requisições POST também podem usar o atributo enctype com o valor multipart/form-data, que faz uso do padrão UCS(Universal Multiple-Octet Coded Character Set). usando_get.php <html> <head> <meta charset="utf-8"/> <title>usando Get</title> </head> <body> Usando GET <?php echo "<a href=usando_get.php?nome=evando Jose Vieira>Você está passando um nome via get</a><br>"; if(isset($_get["nome"])){ $nome=$_get["nome"]; echo $nome; } echo "<hr>";

15 echo "<br>resolvendo o problema com nomes com espaço<br>"; $string1="evando Jose Vieira"; $string1 = urlencode($string1); //urlencode Codifica uma URL echo "<br><a href=usando_get.php?nome1=$string1>você está passando um nome(com espaços)via get</a><br>"; if(isset($_get["nome1"])){ $nome1=$_get["nome1"]; echo $nome1; } echo "<hr>"; echo "<br>passando mais de dois parâmetros<br>"; $string2="evando Jose Vieira"; $string2 = urlencode($string2); //urlencode Codifica uma URL echo "<br><a href=usando_get.php?nome2=$string2&idade=50>passando dois parâmetros nome e idade</a><br>"; if(isset($_get["nome2"])){ $nome2=$_get["nome2"]; echo "Seu Nome: ",$nome2; $idade=$_get["idade"]; echo " Sua idade: ",$idade; } echo "<br><br><a href=usando_get.php>limpar</a>";?> </body> </html>

16 Usando POST Usamos requisições do tipo POST geralmente quando vamos criar formulários para passagem de dados para o servidor WEB. usando_post.php <doctype html!> <head> <meta charset="utf-8"/> <title>usando POST</title> </head> <body> <form method=post action=usando_post.php> Nome Usuário:<input type=text name=usuario><br><br> <input type=hidden name=enviar value=1> Sexo: <input type=radio name=sexo value="m" CHECKED>Masculino <input type=radio name=sexo value="f">feminino <br><br> <input type="checkbox" name="transp[]" value="carro">carro<br> <input type="checkbox" name="transp[]" value="moto">moto<br> <input type="checkbox" name="transp[]" value="bicicleta">bicicleta<br><br> Estado : <select size="1" name="uf"> <option value=" ">Escolha Estado </option> <option value="pr">paraná </option> <option value="sc">santa Catarina </option> <option value="rs">rio Grande do Sul </option> </select> <br><br> <textarea name="assunto" rows=5 cols=20>digite seu assunto</textarea> <BR><BR> <input type=submit value="enviar"> </form>

17 <?php if(isset($_post["enviar"])){ $nome=$_post["usuario"]; $sexo=$_post["sexo"]; $transp=$_post["transp"]; $estado=$_post["uf"]; $assunto=$_post["assunto"]; echo $nome,"<br>"; echo $sexo,"<br>"; foreach($transp as $valores){ echo $valores,"<br>"; } echo $estado,"<br>"; echo $assunto; }?> </body> </html>

18 Acessando o phpmyadmin phpmyadmin é um aplicativo web livre e de código aberto desenvolvido em PHP para administração do MySQL pela Internet. A partir deste sistema é possível criar e remover bases de dados, criar, remover e alterar tabelas, inserir, remover e editar campos, executar códigos SQL e manipular campos chaves. O phpmyadmin é muito utilizado por programadores web que muitas vezes necessitam manipular bases de dados. Normalmente, o phpmyadmin é tratado como uma ferramenta obrigatória em quase todas as hospedagens da web, além de pacotes off-line, como o WAMPServer, XAMPP, EasyPHP e PHP Triad. Para abrirmos o phpmyadmin podemos usar dois modos vamos ao primeiro modo. Na barra de endereço digite: localhost/home/ Irá aparecer uma tela de configurações do EasyPHP, procure MODULES embaixo deve estar escrito MySQL Administration : PhpMyAdmin 4.1.4, Clique em Open O outro modo e diretamente no ícone do EasyPHP, vamos ver como é o funcionamento. Clique em Mostrar Ícones Ocultos irá abrir a janela do EasyPHP.

19 Depois clique no ícone do EasyPHP do lado do botão Apache e ira aparecer um menu clique na guia Administration Irá aparecer uma tela de configurações do EasyPHP, procure MODULES embaixo deve estar escrito MySQL Administration : PhpMyAdmin 4.1.4, Clique em Open

20 Criação de banco de dados e tabelas Qual seja a forma que você usou para abrir o phpmyadmin, aparecerá esta tela. Vamos usar o velho modo manual da criação de bancos de dados de um clique na Guia SQL. Dentro dela vamos criar o banco trabalho_escola. CREATE DATABASE trabalho_escola Clique em Executar Clique em executar e de um F5 para atualizar a tela.

21 Note que foi criado o banco trabalho_escola, agora vamos criar as tabelas. Vamos criar uma tabela chamada usuarios CREATE TABLE usuarios ( id INT PRIMARY KEY AUTO_INCREMENT, nome VARCHAR(50), login VARCHAR(50), senha VARCHAR(50), priv INT ) Clique em Executar Dê um F5 para atualizar a página Vamos ver outro modo de criar banco de dados e tabelas da forma visual. Para deletar a tabela apenas vamos no SQL e digitamos: DROP TABLE usuários E executar, mas para excluirmos o banco de dados precisamos clicar no banco que queremos deletar e depois procuramos a guia Operações, clicamos em Apagar Base de Dados(DROP) vai estar em vermelho, clique e confirme, pronto de F5 e atualiza a página, e vera que não nenhum banco criado.

22 Vamos fazer a criação do banco e das tabelas de forma visual agora, dentro da caixa de texto create database coloque o nome do banco e clique em Criar

23 Para criar a tabela clique sobre o banco de dados e aparecera uma janela com o nome da tabela e a quantidade de campos necessários para a criação desta tabela, no nosso caso o Nome usuarios 4 no numbers of columns (números de colunas), e clique em Executar. Na próxima tela apenas vamos configurar os campos com seus tipos e especificações. Como podemos notar já podemos definir a chave primaria (Índice) e se o campo vai ser auto incremento (AI), depois clicar em Guarda, pronto esta criada a tabela.

24 Já que estamos aqui vamos inserir um usuário, vamos clicar em Insere, vamos inserir apenas um usuário, note que não precisa preencher o campo id, pois o mesmo é auto incremento apenas preenchemos nome, login, senha e priv, depois e so clicar em Executar A próxima tela vai mostrar o código SQL que que ocorreu.

25 Depois clique em Procurar e mostrará os dados incluídos no nosso caso apenas um registro. Bem já temos nosso primeiro registro no banco vamos começar a trabalhar o PHP com banco de dados. Primeiramente vamos baixar o site modelo que está no site na agenda de cada turma tem seu modelo. Aqui na apostila como nas aulas terá a pasta Evandro com os arquivos necessários para as aulas.

26 Primeiro vamos abrir o navegador digitar localhost Clicamos na pasta que criamos no caso aqui Evandro Para abrir nosso site vamos clicar no arquivo primeiro.php

27 Agora vamos dar uma olhada no código fonte deste arquivo que é responsável pela abertura e controle do conteúdo. primeiro.php <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/principal.css"> </head> <body> <div class="sitetotal"> <div class="cabecalho"> <img src = "imagens/logo_curso.jpg"> </br> Aluno: Fulano de Tal<br/> Turma XXX <div class="menu"> <ul> <li><a href="primeiro.php?id=capa">inicio</a> </li> <li><a>programação WEB</a> <ul> <li><a href="primeiro.php?id=html">html</a> </li> <li><a href="primeiro.php?id=css">css</a> </li> <li><a href="primeiro.php?id=javascript">javascript</a> </li> <li><a href="primeiro.php?id=php">php</a> </li> </li> </ul> <li><a href="primeiro.php?id=intranet">intranet</a> </li> </ul> </div> </div> <div class="conteudo"> <?php if(!isset($_get['id'])){ $id="capa"; include("$id.php"); }else { $id=$_get['id']; if(file_exists("$id.php")){ include("$id.php"); }else { include("404.php"); } }?>

28 </div> </div> </body> </html> Trabalhando com PDO no PHP PDO (PHP Data Objects) é uma extensão que fornece uma interface padronizada para trabalhar com bancos de dados, cuja finalidade é abstrair a conexão e interações com os bancos, ou seja, independente do banco de dados que estiver sendo utilizado os métodos executados serão os mesmos, mas isso não significa que seu sistema será portável entre diversos bancos de dados, por mais que o uso do PDO facilite a portabilidade, esta interface significa apenas que você se comunicará com qualquer banco de dados através de um determinado conjunto de métodos e classes. Abstração é a habilidade de concentrar nos aspectos essenciais de um contexto qualquer, ignorando características menos importantes ou acidentais. 1- Vamos criar o arquivo funcoes.php, este arquivo será responsável pela conexão com o banco de dados funcoes.php <?php function conectar(){ define( 'MYSQL_HOST', 'localhost' ); define( 'MYSQL_USER', 'root' ); define( 'MYSQL_PASSWORD', '' ); define( 'MYSQL_DB_NAME', 'trabalho_escola' ); try { $conexao= new PDO( 'mysql:host='. MYSQL_HOST. ';dbname='. MYSQL_DB_NAME, MYSQL_USER, MYSQL_PASSWORD ); $conexao->setattribute(pdo::attr_errmode, PDO::ERRMODE_EXCEPTION); } catch(pdoexception $e) { echo 'ERROR: '. $e->getmessage(); } return $conexao; }?>

29 2 - Vamos criar arquivo intranet.php, este será a tela de login. Intranet.php <div align=center> <form method= post" action="primeiro.php?id=controle"> <br><br> Usuário<br> <input type="text" name=usuario required/> <br> Senha:<br> <input type="password" name=senha required/> <br><br> <button submit>entrar</button> </form> </div> Bem depois de criarmos o arquivo de login vamos criar o arquivo que será responsável pela autenticação do usuário. Mas vamos pensar, quando o usuário logar, como vamos guardar se nome e seu controle sobre o que tem acesso? Para saber o controle sobre seu acesso nós temos o campo priv dentro da tabela que o seu nível de privilégio de controle, e quanto manter ele logado no sistema vamos usar sessões. Afinal o que são sessões? Então pense na seguinte situação quando você acessa uma página já sabemos que o navegador envia uma requisição ao servidor, através do protocolo HTTP, mas o problema que o este protocolo não armazena informações de estado, ou seja ele trata de forma independente cada requisição de página que recebe. Por exemplo, se você acessar as páginas teste1.php, teste2.php e teste3.php e outra pessoa acessar essas mesmas três páginas, o servidor irá tratar esses acessos como sendo 6 requisições independentes. Ele não saberá que foram duas pessoas diferentes que acessaram 3 páginas cada. Por isso que usaremos o mecanismo sessões, pois permite armazenar informações que poderão ser utilizadas enquanto o usuário estiver navegando entre as páginas do site.

30 Uma sessão é um período de tempo durante o qual uma pessoa navega pelas páginas de um site. Quando um usuário entrar no site, podemos abrir uma sessão e nela registrar diversas variáveis que poderão ser acessadas a qualquer momento, em qualquer página do site, enquanto a sessão estiver aberta. Quando um usuário entra no site e criamos uma sessão, ela recebe um número de identificação único, que chamamos session id Criando o arquivo controle.php <?php session_start(); include_once("funcoes.php"); $login = $_POST['usuario']; $senha =$_POST['senha']; $PDO = conectar(); $sql = "SELECT * FROM usuarios WHERE login = :login AND senha = :senha"; $pesquisa= $PDO->prepare($sql); $pesquisa->bindparam(':login', $login); $pesquisa->bindparam(':senha', $senha); $pesquisa->execute(); $resultado = $pesquisa->fetch(pdo::fetch_assoc); $nome=$resultado['nome']; $privilegio= $resultado['priv']; if(isset($privilegio)){ $_SESSION['logado']=1; $_SESSION['priv']=$privilegio; $_SESSION['nome']=$nome; header("location: primeiro.php?id=menus"); }else { header("location: primeiro.php?id=erro_login") ; }?> Criando os arquivos erro_login.php e menus.php erro_login.php <html> <body> <div align=center> <br><br> <img src="imagens/erro_senha.png"> </div> </body> </html> menus.php if(!isset($_session['logado'])){ header("location: primeiro.php?id=erro_login") ; exit; }else { $privilegio= $_SESSION['priv']; $nome= $_SESSION['nome'];

31 $logado=$_session['logado'];?> <!doctype html> <html lang='pt-br'> <head> <meta charset='utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/styles_menu.css"> </head> <body> <br><br> <?php if($privilegio==7){?> <div id='cssmenu'> <ul> <li ><span><b>bem vindo <?php echo $nome?></span></li> <li class='active'><a href='#'><span>cadastro de Usuários</span></a></li> <li><a href='#'><span>alteração/exclusão Usuários</span></a></li> <li><a href='#'><span>leitura Mensagens</span></a></li> <li><a href='#'><span>alteração/exclusão Mensagens</span></a></li> <li><a href='#'><span>inclusão de Notícias</span></a></li> <li><a href='#'><span>alteração/exclusão Notícias</span></a></li> <li class='last'><a href='primeiro.php?id=logout'><span>sair Sistema</span></a></li> </ul> </div> <?php }?> </body> <html> <?php $_SESSION['logado']=1; }?> imagem Login Correto

32 Imagem Login Incorreto Agora vamos voltar ao arquivo intranet.php e faremos algumas mudanças como o arquivo abaixo. intranet.php if(isset($_session['logado'])){ $logado=$_session['logado']; }else { $logado=0; } if($logado==1){ header("location: primeiro.php?id=menus"); }else {?> <div align=center> <form method="post" action="primeiro.php?id=controle"> <br><br> Usuário<br> <input type="text" name=usuario required/> <br> Senha:<br> <input type="password" name=senha required/> <br><br> <button submit>entrar</button> </form> </div> <?php }?> Criando logout.php <?php session_start(); session_destroy(); header("location:primeiro.php?id=capa"); exit();?>