Desenvolvimento de Sistemas Web

(1)

Desenvolvimento de Sistemas Web

Módulo II:

Programação

lado-servidor

Modelo Cliente-Servidor

Solicita serviço

Envia resultado

Cliente

(2)

! " #$ %& ' ( ) *+ ,- " . "

Tecnologias que implementam estes modelos

z

HyperText Markup Language (HTML)

– Linguagem que permite definir a estrutura de um

documento a ser exibido por um browser

z

Uniform Resource Identifiers (URI)

– Esquema pelo qual os recursos da internet são

endereçados

z

HyperText Transfer Protocol (HTTP)

– Protocolo que define a interação entre um browser

(cliente) e um servidor de documentos hipertextuais.

Modelos e tecnologias em Sistemas Web

K

Arquitetura Cliente-Servidor

K

Hipertexto

K

Protocolo HTTP

K

Linguagem HTML

K

Endereçamento através da URI

HTTP + URI

HTML, GIF, ...

Browser

(cliente)

Usuário

_Servidor

HTTP

Aplicação

Documento

(arquivos

HTML)

Internet

(3)

! " #$ %& ' ( ) *+ ,- " . "

Transação cliente-servidor na Web

Internet

Cliente

Servidor

Software

de TCP/IP

Browser

Software

de TCP/IP

Servidor

HTTP

TCP

HTTP

TCP

Resposta do servidor

Solicitação HTTP

Ligação física

Exemplo de uma sessão Web –1/2

z

1 Usuário solicita

http://www.empresa.com/arq.html

z

2 DNS é consultado e

fornece o endereço IP

– 200.13.16.8

z

3 O browser faz a conexão

e envia a solicitação em

HTTP

– GET /arq.html HTTP / 1.0

– ... (seguem outras

informações)

GET / HTTP /1.0

Browser

(cliente)

Internet

Usuário

http://www.empresa.com

DNS

200.13.16.8

(4)

! " #$ %& ' ( ) *+ ,- " . "

Exemplo de uma sessão Web –2/2

z

5 Servidor recebe

solicitação e procura pelo

recurso (arq.html)

z

6 Servidor:

HTTP/1.1 200 OK

Date: Thu, 23 Oct 1997

21:45:56 GMT

... (após o cabeçalho segue o

conteúdo de arq.html)

z

7 Browser apresenta o

resultado na tela

Browser

(cliente)

Internet

Usuário

Servidor

Cabeçalho +

conteúdo de

arq.html

Tecnologias para Sistemas Web

Internet

Cliente

Interface

de Usuário

HTML

(Forms)

CSS

Scripts

Núcleo funcional:

Programas utilizando

CGI, API, etc.

e Banco de dados

Servidor

S

o

ft

w

a

re

H

a

rd

w

a

re

(5)

! " #$ %& ' ( ) *+ ,- " . "

Tecnologias para programação lado-servidor

Tecnologias para

Sistemas Web

Tecnologias para

programação

lado-cliente

Tecnologias para

programação

lado-servidor

Scripts

Lado-servidor

Programas

Compilados

•Perl + CGI

•PHP

•Active Server Pages

•Cold Fusion

•Programas + CGI

•Programas + API

•Java Servlets

•ASP.NET

Scripts

Lado-cliente

Programas

Compilados

Outras soluções

•Javascript

•VBScript

•Java Applets

•Macromedia Flash

Tecnologias

híbridas

•Java Server Pages

•ASP.NET

Tecnologias do lado cliente

DOM

Scripts

HTML

Módulo Compilado

(Applets, ActiveX)

Plug-in

(6)

! " #$ %& ' ( ) *+ ,- " . "

Tecnologias do lado servidor

Servidor

Internet

Cliente

Servidor

HTTP

Arquivos

HTML,GIF,

Programas

aplicativos

Página

HTML

Solicitação

HTTP

Tecnologias do lado servidor

z

Sistema operacional

– Unix (Aix, Solaris, Linux),

Windows NT

z

Servidor HTTP

– Apache

– Internet Information Server

(IIS),

– Personal Web Server

z

Programas Gateway

– Perl, C/C++, TCL/TK, Lua,

PHP

z

API – Interface de

programação de

aplicações

– ISAPI, NSAPI

z

Java Servlets

z

Scripting

– Server-side JavaScript

– Active Server Pages - ASP

– Cold Fusion - CFM

z

Banco de dados

– Oracle, Sybase, SQLServer,

MSAccess

z

Database Middleware

– Oracle Internet Platform

– Informix Internet

Foundation.2000

– Sybase web.sql

(7)

Sistemas de Informação na Web

Arquitetura e

Tecnologias

Arquitetura Típica – 3 camadas

Internet

Browser

_{Servidor HTTP}

_{Servidor de Banco de Dados}

(8)

! " #$ %& ' ( ) *+ ,- " . "

Exemplo de um sistema de comércio eletrônico

Transações em sistemas de informação web?

z

Formulário no cliente

z

Envio de dados para o servidor através da internet

usando o protocolo HTTP

z

Execução de programas no servidor

– Existem diferentes alternativas

z

Acesso a dados em um banco de dados através

(9)

! " #$ %& ' ( ) *+ ,- " . "

Formulário no cliente

Nome:

Sobrenome:

Masculino

Feminino

Enviar consulta

Redefinir

Código HTML

<FORM action=“cgi-bin/programa1” method=“GET”>

<P>

<INPUT type=“text” name=“primnome”><BR>

<INPUT type=“text” name=“sobrenome”><BR>

<INPUT type=“radio” name=”sexo” value=“M”>Masculino

<INPUT type=“radio” name=”sexo” value=“F”>Feminino

<INPUT type=“submit” >

<INPUT type=“reset”></P>

</FORM>

(10)

! " #$ %& ' ( ) *+ ,- " . "

Envio de dados usando HTTP

z

Dados podem ser enviados pelo cliente através de

dois métodos HTTP

z

O método GET

– O programa recebe os dados através da variável de

ambiente QUERY_STRING

z

O método POST

– O programa recebe os dados através da entrada padrão

do sistema operacional

– O número de dados a serem lidos é informado pela

variável CONTENT_LENGTH

Como funciona? – 1/3

z

Cada formulário, além de texto e de outros

elementos HTML, contém um conjunto de

controles que pertencem ao seu escopo

z

Cada controle possui um tipo, um nome, um

valor e outros atributos

z

O tipo determina qual é o controle

z

O nome é associado ao valor fornecido pelo

(11)

! " #$ %& ' ( ) *+ ,- " . "

Como funciona? – 2/3

z

Cada formulário possui alguns elementos chaves

padronizados

z

O atributo action associa o formulário com uma

URI onde deverá estar um programa

z

Este programa deverá ser capaz de processar os

dados fornecidos através do formulário

z

O controle submit é um botão que pode ser

pressionado pelo usuário

Como funciona? – 3/3

z

Após o elemento submit (botão) ter sido

pressionado o browser envia uma série de pares

nome/valor com os dados fornecidos

z

A submissão pode ser feita pelos métodos HTTP

GET ou POST

z

No método GET, os pares nome/valor são

enviados juntos com a URI

z

No método POST os pares nome/valor são

(12)

! " #$ %& ' ( ) *+ ,- " . "

Forma dos dados enviados

z

O usuário fornece os dados preenchendo os

controles de um formulário

z

No código HTML cada controle deve ter um nome,

especificado pelo atributo name

z

O valor fornecido pelo usuário é associado ao

atributo value

z

Os dados são enviados em pares nome=valor da

seguinte forma, por ex.:

primnome=Jair&sobrenome=Leite&sexo=M

Enviando dados pelo método POST

POST /cgi-bin/programa1 HTTP/1.0

Accept : text/plain

Accept : apliation/x-html

Accept :

.

User-Agent: NSCA Mosaic for X Window System/2.4

Content-type application/x-www-form-urlencoded

Content-length: 58

(13)

! " #$ %& ' ( ) *+ ,- " . "

Enviando dados pelo método POST

POST /cgi-bin/programa1 HTTP/1.0

Accept : text/plain

...

Content-length: 58

primnome=Jair&sobrenome=Leite&sexo=M

Enviando dados pelo método GET

GET /cgi-bin/programa1?prinnome=Jair&sobrenome=Leite...

Accept : text/plain

Accept : apliation/x-html

Accept :

.

User-Agent: NSCA Mosaic for X Window System/2.4

(uma linha contendo apenas CRLF)

(14)

! " #$ %& ' ( ) *+ ,- " . "

Arquiteturas alternativas de programação lado-servidor

z

Programas + CGI (gateway)

– Scripts

– Programas compilados

z

Scripts lado-servidor (SSS)

– Interpretados no servidor Web

z

Programas + APIs

– Utiliza APIs do servidor Web

z

Servidores HTTP integrados com Servidores de

Banco de Dados (SGBDs)

– Servidores, Interpretadores/Compiladores e SGBD num

único pacote – mesmo fabricante.

Ilustração

Programa

Gateway

Programa

Gateway

Browser

Base de

Dados

Base de

Dados

API

Base de

Dados

SSS

(15)

! " #$ %& ' ( ) *+ ,- " . "

Conexão com banco de dados

z

ODBC – Open DataBase Connectivity

– Interface de padrão de conexão a banco de dados

– Principais fabricantes fornecem drivers ODBC

– Portabilidade

z

SQL – Structured Query Language

– Linguagem padrão de consulta a banco de dados

relacionais

– Desenvolvida pela IBM

– Interpretada pelos principais banco de dados

SQL – Structured Query Language

z

Exemplos de comandos SQL

SELECT primnome, sobrenome FROM clientes

WHERE sexo=M

ORDER BY primnome, sobrenome ;

INSERT INTO clientes (primnome, sobrenome )

VALUES (Jair', ‘Leite’);

(16)

! " #$ %& ' ( ) *+ ,- " . "

Programas Gateway

z

Programas Gateway são aqueles que podem ser

ativados pelo servidor

z

A Common Gateway Interface (CGI) define

mecanismos pelo qual servidores HTTP

comunicam com programas gateway

Transações com programas gateway

Browser

(cliente)

Página HTML

Query String

Solicitação

HTTP

Resultados

+

Código HTML

Servidor

HTTP

Programas

Gateway

Servidor

de Banco

de Dados

CGI

Arquivos

de dados

Arquivos

HTML,GIF,

(17)

! " #$ %& ' ( ) *+ ,- " . "

A CGI

z

Interface para troca de dados servidor- programa

gateway

z

No sentido servidor-programa

– Variáveis de ambiente

– Argumentos de linha de comando

– Entrada padrão

z

No sentido programa-servidor

– Saída padrão

Enviando dados pela entrada padrão

z

Quando o browser utiliza o método POST o

servidor coloca a query string na entrada padrão

z

O programa deve ler estes dados e processa-los

Servidor

HTTP

Programas

Gateway

primnome=Jair&sobrenome=Leite&sexo=M

Entrada padrão

Arquivos

de dados

(18)

! " #$ %& ' ( ) *+ ,- " . "

Decodificando os dados

z

O programa CGI deve decodificar os dados

z

Separar cada par nome=valor identificando o “&”

z

Identificar os nomes e valores

z

Processar os valores adequadamente

Enviando dados CGI-Servidor

z

Usa-se a saída padrão

z

O programa deve colocar na saída padrão o

documento HTML junto com os dados que foram

processados

Servidor

HTTP

Programas

Gateway

<HTML><HEAD><TITLE>....

Saída padrão

Arquivos

de dados

Jair

(19)

! " #$ %& ' ( ) *+ ,- " . "

Enviando documentos ao servidor

z

O programa CGI pode enviar ao cliente, através

do servidor diversos tipos de documentos

– Documentos HTML

– Arquivos texto, imagens, áudio, etc.

z

Qualquer que seja o tipo do arquivo, o programa

deve enviar uma seqüência de bytes através da

saída padrão

Informando o tipo do conteúdo

z

O programa CGI deve especificar qual o tipo do

conteúdo que está sendo enviado

z

O documento ou referência deve ser especificado

através de um pequeno cabeçalho antes do

conteúdo

Content-type: text/html

Linha em branco (CRLF)

<HTML><HEAD>

<TITLE>Documento HTML</TITLE>

...

(20)

! " #$ %& ' ( ) *+ ,- " . "

Exemplo de resposta do servidor

HTTP/1.0 200 OK

Date: Friday, 18-aug-99 21:45:00 GTM

Server: NCSA/1.3

MIME-version: 1.0

Last-modified: Friday, 10-jul-99 20:44:00 GTM

Content-length: 106

Content-type: text/html

(CRLF)

<html><head><title>Teste HTML</title></head>

<body><h1>Olá

Jair!</h1></body></html>

Conectividade baseada em CGI

Programa

Gateway

Programa

Gateway

Base de Dados

HTML

HTTP

•Gera comandos SQL

•Ler resultados do BD

•Gera doc HTML

incluindo os resultados

CGI

Dados

HTML

Query

SQL

Resultado

da Query

(21)

! " #$ %& ' ( ) *+ ,- " . "

Exemplo: Usando Apache, Perl e MySQL

Arquivo Perl

MySQL

Query

SQL

Servidor

Apache

Resultado

da Query

Entrada/Saída padrão

CGI

Conectividade usando Perl e SQL

#!/usr/bin/perl

...

print “

<h1> Doc HTML </h1><p>

”

foreach $key (keys(%FORM)) {

print "$key = $FORM{$key}<br>";

print

“INSERT INTO Students (lastname,

firstname) VALUES

($nome, &sobrenome

)

”;

}

(22)

! " #$ %& ' ( ) *+ ,- " . "

Características da conectividade com CGI

z

Grande portabilidade e flexibilidade

z

Baixo custo

z

Maior esforço de programação

z

Difícil manutenção

z

Baixo desempenho

Scripts do lado servidor (SSS)

z

Documentos HTML contém um script

z

O servidor possui interpretador de scripts

z

Script é executado antes de ser enviado

z

Podem interagir com base de dados, sistema de

arquivos, etc.

(23)

! " #$ %& ' ( ) *+ ,- " . "

Interpretação de SS Scripts

Internet

Cliente

Servidor

HTTP

Arquivos

HTML,GIF,

+ SCRIPTS

Interpretador

Script

BD

Scripts

Página

HTML

Solicitação

HTTP

Scripts mais comuns (1/2)

z

Server-Side JavaScript

– Utilizado com a ferramenta LiveWire para servidores

Netscape

– Integração com componentes Java

z

Active Server Pages (ASP)

– Extensão do Internet Information Server (IIS) da

Microsoft para programas do lado servidor e execução

de scripts

– Independente da linguagem script

– Permite o desenvolvimento de Componentes

ActiveX/COM

(24)

! " #$ %& ' ( ) *+ ,- " . "

Scripts mais comuns (1/2)

z

Java Servlets

– Programa Java no lado-servidor

– Utiliza browsers específicos: Tomcat, Sun Java Web

Server, Allaire JRun, etc.

– JavaServer Web Development Kit

z

Java Server Pages (JSP)

– Versão Java para a ASP.

– Scripts são traduzidos em Java Servlets

– Mais fácil de programar do que servlets

Tecnologia ASP - Active Server Pages

Base de Dados

Interpretador

VBScript

Interpretador

VBScript

ASP =

Doc HTML

+

VBScript

Componentes

ActiveX

HTML

Internet

Information

Server

Browser

HTTP

SQL

HTML

(25)

! " #$ %& ' ( ) *+ ,- " . "

Exemplo ASP – conectando com um banco de

dados

<%@ LANGUAGE="VBScript" %>

<%

Option Explicit

Dim Connection

Dim RS

Dim SQLStmt

Dim SSN, Firstname, Lastname

Set Connection =

Server.CreateObject("ADODB.Connection")

Connection.Open "DSN=Clientes; UID=sa“

Exemplo ASP – solicitando dados com SQL

SQLStmt = "

SELECT SSN, primnome, sobrenome

"

SQLStmt = SQLStmt & "

FROM Clientes

"

SQLStmt = SQLStmt & "

ORDER BY primnome

"

Set RS = Connection.Execute(SQLStmt)

%>

<html><head>...</head>

<body>

<h1>Oi RS.Fields(“primnome") </h1>

</body></html>

(26)

! " #$ %& ' ( ) *+ ,- " . "

Java Servlets

z

Programas Java do lado servidor

z

Solução Java para programas gateway

z

Equivalentes aos Applets

z

Funcionamento semelhante às API’s

z

Programa “compilado”

z

Geração de código HTML trabalhosa

Exemplo de Java Servlet -1

package hall;

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class HelloWWW extends HttpServlet {

public void doGet(HttpServletRequest request,

HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("

text/html

");

PrintWriter out = response.getWriter();

out.println("

<HTML>\n" +

"<HEAD><TITLE>Hello WWW</TITLE></HEAD>\n" +

"<BODY>\n" +

"<H1>Hello WWW</H1>\n" +

"</BODY></HTML>

");

(27)

! " #$ %& ' ( ) *+ ,- " . "

Exemplo de Java Servlet -2

String title = “Exemplo com três parâmetros de formulário";

out.println(ServletUtilities.headWithTitle(title) +

"

<BODY>\

n" +

"

<H1 ALIGN=CENTER>

" + title + "

</H1>

\n" +

"

<UL>

\n" +

"

<LI>

param1: "

+ request.getParameter(“primnome

") + "\n" +

"

<LI>

param2: "

+ request.getParameter(“sobrenome

") + "\n" +

"

<LI>

param3: "

+ request.getParameter(“sexo

") + "\n" +

"

</UL>

\n" +

"

</BODY></HTML>

");

Java Server Pages

z

Tecnologia que permite incluir num mesmo

arquivo comandos HTML com construtores JSP

z

Os construtores JSP são:

– Elementos script – código Java

– Diretivas – estrutura o servlet resultande

– Ações – especificação de componentes existentes

z

O JSP é traduzido em Servlets na primeira vez

(28)

! " #$ %& ' ( ) *+ ,- " . "

Exemplo de JSP -1

<HTML>

<HEAD><TITLE>Banco de Negócios</TITLE></HEAD>

<BODY>

<H1>Banco de Negócios</H1>

<P>Olá,

<!– Se UserName for vazio, escreve “Novo usuário” -->

<% out.println(Utils.getUserNameFromCookie(request)); %>

Para acessar sua conta, clique

<A HREF="Account-Settings.html">aqui.</A></P>

<P>

Aqui segue o restante do código HTML da página do banco.

</BODY></HTML>

Exemplo de JSP - 2

<P><jsp:useBean id="test" class="hall.SimpleBean" />

<jsp:setProperty name="test"

property="message"

value="Hello WWW" />

<H1>Mensagem: <I>

<jsp:getProperty name="test" property="message" /></I></H1>

<P> <jsp:include page="news/Item1.html" flush="true"/></P>

package hall;

public class SimpleBean {

private String message = “Vazio";

public String getMessage() {

return(message);

}

public void setMessage(String message) {

this.message = message;

(29)

! " #$ %& ' ( ) *+ ,- " . "

Servidores com API’s

z

Interfaces de Programação de Aplicações

(Applications Programming Interface – API)

z

NSAPI – proposta Netscape

z

ISAPI – proposta Microsoft para desenvolvedores

Windows NT

z

São análogos aos plug-ins do lado cliente

z

Melhor desempenho que as CGIs

API’s em servidores HTTP

Servidor

HTTP

Arquivos

HTML,GIF,

API

_BD

Programa compilado

Página

HTML

Solicitação

HTTP

(30)

! " #$ %& ' ( ) *+ ,- " . "

Usando a ISAPI

HTML

Internet

Information

Server

Browser

HTTP

Arquivo.dll

•GetExtensionVersion( )

•HttpExtensionProc( )

•Extension_Control_Block

ISAPI

•GetServerVariable( )

•ReadClient ( )

•WriteClient ( )

•ServerSupportFunction ( )

BD

Integração de servidor Web e banco de dados

z

Alguns fabricantes oferecem produtos que

integram o servidor HTTP com um servidor de

banco de dados

z

Solução da Oracle: Oracle Internet Platform

z

Solução da Sybase: web.sql

z

Solução da Informix: Informix Internet

(31)

! " #$ %& ' ( ) *+ ,- " . "

Oracle Internet Platform

z

Possui três componentes básicos

– Browsers de clientes

– Servidores de aplicação

– Banco de dados Oracle 8i

z

Browser

– Responsável pela apresentação

z

Servidor da aplicação e banco de dados

– Funcionalidade da aplicação

– Armazenamento de dados

(32)

! " #$ %& ' ( ) *+ ,- " . "

Oracle Internet Platform – arquitetura

•Java

Servlets

•Enterprise

JavaBeans

Gerencia

usuários,

aplicações e

plataforma

Sybase web.sql

z

Oferece acesso a BD relacionais

z

Gera um documento HTML final de forma

dinâmica e personalizada

z

Comando SQL e scripts Perl podem ser

introduzidos no documento HTML

z

Elimina a necessidade de CGI

z

Processa dois tipos de arquivos

– .hts – hypertext sybase

(33)

! " #$ %& ' ( ) *+ ,- " . "

Sybase web.sql - arquitetura

Conectividade com web.sql

Web.sql

HTML

HTTP

_{Req. HTS}

HTML

Arquivo HTS

BD1

SQL

CGI ou NSAPI

BD2

SQL

(34)

! " #$ %& ' ( ) *+ ,- " . "

Informix Internet Foundation.2000

z

Plataforma integrada

– Informix Dynamic Server.2000 – maquina básica

– Informix J/Foundation – implementa a JVM

– Informix Office Connect – conexão com produtos

MSOficce

– Informix Web DataBlade – consultas SQL a BD

– Excalibur Text Data Blade Module – pesquisa

z

Integra dados e conteúdos