Introdução à Programação
Cliente/Servidor em
Sistemas Web
Instalação e Configuração dos
Aplicativos
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.
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 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:
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.
6.
OBS2: Caso, ao reiniciar o Vetrigo, alguns dos servidores
Servidores rodando (MySQL e Apache)
Servidores desativados
Apenas o Apache rodando
Apenas o MySQL rodando
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
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.
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
•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.
Adobe Dreamweaver CS5
(opcional)
Modelo Cliente/servidor Web
Comunicação entre clientes e servidores:
Modelo Cliente/servidor Web
Comunicação entre clientes e servidores:
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.
Modelo Cliente/servidor Web
Comunicação entre clientes e servidores:
Exemplo: Servidor Proxy.
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.
Modelo Cliente/servidor Web
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>
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
<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! O
resultado da operação de ";
echo $x;
echo " é: ";
echo $y;
?>
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
<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>
