Introdução à Programação Cliente/Servidor em Sistemas Web PROF. FELIPE DENIS M. DE OLIVEIRA

Introdução à Programação Cliente/Servidor em Sistemas Web PROF. FELIPE DENIS M. DE OLIVEIRA

Instalação e Configuração dos Aplicativos 2

Servidores Web O Vertrigo é um ambiente de instalação dos servidores de banco de dados e de HTTP mais comumente utilizados, e que são freewares Tanto o Apache como o MySQL são leves e completos Tais servidores permitem que se teste, off-line, páginas, conexões e Web Sites sem a necessidade de publicá-los em um servidor remoto de domínio, sendo excelente para o desenvolvedor dos níveis básico e intermediário. 3

Servidores Web Instalar o Vertrigo (sempre executar no modo administrador, no Windows): 1. Iniciar e concluir a instalação no formato padrão; 2. Ao finalizar, a seguinte tela é exibida, indicando os servidores e aplicativos que ambiente Vertrigo instalou: 4

Servidores Web 3. Clicar no botão Hide this window and start server 4. Podem ser os seguintes, os estados de inicialização dos servidores do Vertrigo: Servidores rodando (MySQL e Apache) Servidores desativados Apenas o Apache rodando Apenas o MySQL rodando 5. OBS: Caso o Firewall do Windows ou outro instalado na máquina solicite permissão para executar os serviços, aceite as execuções. 5

Servidores Web ***** OBSERVAÇÕES IMPORTANTES ***** Caso o Firewall do Windows ou outro instalado na máquina solicite permissão para executar os serviços, aceite as execuções. Se, ao reiniciar o Vetrigo, alguns dos servidores não tenha sido inicializado corretamente, verifique se na sua máquina não exista outro servidor HTTP instalado, o que pode dar conflito com o Vertrigo e desinstale-o; caso não exista, deixe o Vetrigo executando em modo administrador (botão direito no atalho do Vertrigo/propriedades/compatibilidade/marcar Executar este programa como administrador 6

Servidores Web Diretório de Hospedagem das páginas Por padrão, o Vertrigo permite o teste das páginas Web criadas quando inseridas à partir da pasta WWW, dentro da pasta padrão onde o mesmo foi instalado. Para alterar o caminho dessa pasta: 1. Inicie o Vertrigo; 2. Clique no icone do Vertrigo na área de notificação e, no menu suspenso, escolha Config files/vertigo.conf 3. No arquivo-texto que aparece, procure a instrução DocumentRoot, comente-a (com um # na frente da mesma), abra uma nova linha, redigite a instrução, seguida do caminho onde os arquivos www estarão, entre aspas. Ex: DocumentRoot F:\Meus documentos\www (cuidado em manter minúsculas e maiúsculas) 4. Repita o mesmo procedimento para a tag <Directory> que contenha o caminho padrão das páginas Web do Vertrigo 5. Salve e feche o arquivo e reinicie o Vertrigo. OBS: Não é recomendado alterar o diretório, em vistas de se manter o padrão com a interface do Vertrigo. 7

Servidores Web Configurando a chamada automática da home-page Por padrão, o Vertrigo, através do servidor Apache, configura os arquivos index.html, index.html.var, index.php e index.php5 como arquivos padrões para chamada automática da home-page. Caso, por exemplo, desejemos que o arquivo index.htm seja também reconhecido, faremos o seguinte: 1. Inicie o Vertrigo; 2. Clique no icone do Vertrigo na área de notificação e, no menu suspenso, escolha Config files/httpd.conf 3. No arquivo-texto que aparece, procure a instrução DirectoryIndex e insira, na frente dos outros arquivos, o nome index.htm 4. Salve e feche o arquivo e reinicie o Vertrigo. 8

Adobe Dreamweaver CS5 (opcional) Utilizado para criação e edição de páginas/sites Web 1. Baixe a versão em Português Brasileiro da Internet; 2. Instale-a como usuário teste ou compre a licensa 3. Instale todos os componentes (Media Player é opcional) 4. Execute o Dreamweaver para checar se foi instalado corretamente. 9

Modelo Cliente/servidor Web Comunicação entre clientes e servidores Web: 10

Modelo Cliente/servidor Web Comunicação entre clientes e servidores: 11

Modelo Cliente/servidor Web Comunicação entre clientes e servidores: 12

Modelo Cliente/servidor Web Comunicação entre clientes e servidores: A generalidade dos serviços básicos disponíveis na internet se adaptam ao modelo cliente servidor. Pedidos e resposta codificadas como texto (embora os usuários utilizem na maioria dos casos interfaces gráficas). Exemplos: FTP: transferência de arquivos. SMTP: servidor de e-mail Messenger : mensagem instantânea. Skype : voz sobre ip. 13

Modelo Cliente/servidor Web Comunicação entre clientes e servidores: Exemplo: Servidor Proxy. 14

Modelo Cliente/servidor Web Comunicação entre clientes e servidores: Exercício: Utilizar o aplicativo telnet para se conectar a um servidor web remoto e baixar página inicial. c:> telnet www.google.com.br 80 Digitar: GET index.xml Veja o cabeçalho da resposta e o conteúdo da mensagem. 15

Formulários HTML Todo formulário em HTML é construído usando elementos dentro de um bloco <FORM> O bloco <FORM> define a URL que receberá o formulário e pode definir também o método usado <FORM NAME = form_exemplo ACTION="URL para onde serão enviado os dados" METHOD="método HTTP (pode ser GET ou POST)... Tags em HTML que comporão o formuláro... </FORM> 16

Envio de dados Vários elementos HTML servem para entrada de dados e são usados dentro de formulários. Todos os elementos de entrada de dados têm um nome e enviam um valor Exemplo de formulário para entrada de dados <FORM ACTION="/cgi-bin/catalogo.pl" METHOD="POST"> <H3>Consulta preço de livro</h3> <P>ISBN: <INPUT TYPE="text" NAME="isbn"/></P> <INPUT TYPE="Submit" VALUE="Enviar"/> </FORM> POST /cgi-bin/catalogo.pl HTTP/1.0 Content-type: text/x-www-form-urlencoded Content-length: 15 isbn=2877142566 17

Exemplo de Envio de Dados Método GET 1- Descompactar, na pasta www, o arquivo form.zip, disponível no link Programas da minha página; 2 Após, abrir, via vetrigo, o arquivo ex_form_get.htm e utilizar o formulário 3 Observar tudo o que ocorre no navegador <form action= calc_get.php" method= get" name="cd" id= "cd"> <div align="center"> Valor 1: <input name="v1" type="text" id="v1"> </p> </div> <p align="center"> Valor 2: <input name="v2" type="text" id="v2"> </p> <p align="center"> <input name="r" type="submit" id="r" value="calcular"> </p> <p align="center"> <input type=radio name= "operac" value="soma" id = "operac" > Soma <input type=radio name="operac" value="subtracao" id ="operac"> Subtração <input type=radio name="operac" value="multiplicacao" id ="operac"> Multiplicação <input type=radio name="operac" value="divisao" id ="operac"> Divisão <p> </p> </form> </p> <label></label> <? $x = $_GET["operac"]; $v1 = $_GET["v1"]; $v2 = $_GET["v2"]; if ($x=="soma"){ $y = $v1 + $v2; } if ($x=="subtracao"){ $y = $v1 - $v2; } if ($x=="multiplicacao"){ $y = $v1 * $v2; } if ($x=="divisao"){ $y = $v1 / $v2; } echo "Dados submetidos com sucesso! resultado da operação de "; echo $x; echo " é: "; echo $y;?> O Arquivo ex_form_get.htm Arquivo calc_get.php18

Exemplo de Envio de Dados Método POST 1- Abrir, via vetrigo, o arquivo ex_form_post.htm e utilizar o formulário 2 Observar tudo o que ocorre no formulário 3 Qual a diferença notada entre o método GET e o método POST e porque? <form action= calc_post.php" method= post" name="cd" id= "cd"> <div align="center"> Valor 1: <input name="v1" type="text" id="v1"> </p> </div> <p align="center"> Valor 2: <input name="v2" type="text" id="v2"> </p> <p align="center"> <input name="r" type="submit" id="r" value="calcular"> </p> <p align="center"> <input type=radio name= "operac" value="soma" id = "operac" > Soma <input type=radio name="operac" value="subtracao" id ="operac"> Subtração <input type=radio name="operac" value="multiplicacao" id ="operac"> Multiplicação <input type=radio name="operac" value="divisao" id ="operac"> Divisão <p> </p> </form> </p> <label></label> <? $x = $_POST["operac"]; $v1 = $_POST["v1"]; $v2 = $_POST["v2"]; if ($x=="soma"){ $y = $v1 + $v2; } if ($x=="subtracao"){ $y = $v1 - $v2; } if ($x=="multiplicacao"){ $y = $v1 * $v2; } if ($x=="divisao"){ $y = $v1 / $v2; } echo "Dados submetidos com sucesso! resultado da operação de "; echo $x; echo " é: "; echo $y;?> O Arquivo ex_form_post.htm Arquivo calc_post.php 19