Desenvolvimento de Sistemas Web

Desenvolvimento de Sistemas Web Módulo II: Programação ladoservidor Modelo Cliente-Servidor Solicita serviço Envia resultado Usuário Cliente Rede Servidor! "# %$ & '! $"#( )+*, -./ 021 34 3 576 8 9#4 8 : 3 ; <= >?@ A B >

K K K K K 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 () Protocolo que define a interação entre um browser (cliente) e um servidor de documentos hipertextuais. Modelos e tecnologias em Sistemas Web Arquitetura Cliente-Servidor Hipertexto Protocolo Linguagem HTML Endereçamento através da URI Usuário Browser (cliente) + URI HTML, GIF,... Internet Servidor ; 9 <9 =>?@ >5 A 9 =!:? B 9 C$5 <:9A 4 < D&9E F G9 H+=?@? I-5 4 < @ 4 B? J <9 6 >5 B? 6 Documento (arquivos HTML) Aplicação (programa) / 0 1 1 2 345 67895 :9

Transação cliente-servidor na Web Browser Solicitação Servidor Resposta do servidor TCP Software de TCP/IP Software de TCP/IP TCP Ligação física Cliente Internet Servidor Exemplo de uma sessão Web 1/2 z 1 Usuário solicita http://www.empresa.com/arq.html z z 2 DNS é consultado e fornece o endereço IP 200.13.16.8 3 O browser faz a conexão e envia a solicitação em GET /arq.html / 1.0... (seguem outras informações) Usuário Browser (cliente) Internet http://www.empresa.com DNS 200.13.16.8 GET / /1.0

Exemplo de uma sessão Web 2/2 z z z 5 Servidor recebe solicitação e procura pelo recurso (arq.html) 6 Servidor: /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) 7 Browser apresenta o resultado na tela Servidor Internet Browser (cliente) Usuário arq.html Cabeçalho + conteúdo de arq.html Tecnologias para Sistemas Web Software Interface de Usuário HTML (Forms) CSS Scripts Núcleo funcional: Programas utilizando CGI, API, etc. e Banco de dados Hardware Cliente Internet Servidor

Tecnologias para programação lado-servidor Tecnologias para Sistemas Web Tecnologias para programação lado-cliente Tecnologias para programação lado-servidor Scripts Lado-cliente Programas Compilados Scripts Lado-servidor Programas Compilados Javascript VBScript Outras soluções Java Applets Macromedia Flash Perl + CGI PHP Active Server Pages Cold Fusion Tecnologias híbridas Programas + CGI Programas + API Java Servlets ASP.NET Java Server Pages ASP.NET Tecnologias do lado cliente DOM Plug-in HTML Scripts Módulo Compilado (Applets, ActiveX) Cliente Internet

Tecnologias do lado servidor Solicitação Página HTML Servidor Arquivos HTML,GIF, Programas Servidor aplicativos Cliente Internet Tecnologias do lado servidor z z z z Sistema operacional Unix (Aix, Solaris, Linux), Windows NT Servidor Apache Internet Information Server (IIS), Personal Web Server Programas Gateway Perl, C/C++, TCL/TK, Lua, PHP API Interface de programação de aplicações ISAPI, NSAPI z z z z Java Servlets Scripting Server-side JavaScript Active Server Pages - ASP Cold Fusion - CFM Banco de dados Oracle, Sybase, SQLServer, MSAccess Database Middleware Oracle Internet Platform Informix Internet Foundation.2000 Sybase web.sql

Sistemas de Informação na Web Arquitetura e Tecnologias Arquitetura Típica 3 camadas Internet Browser Servidor Servidor de Banco de Dados (SGBD)

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 z Execução de programas no servidor Existem diferentes alternativas z Acesso a dados em um banco de dados através de um SGBD

Formulário no cliente Nome: Sobrenome: Masculino Enviar consulta Feminino 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>

Envio de dados usando z Dados podem ser enviados pelo cliente através de dois métodos 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 usuário durante o preenchimento do formulário

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 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 enviados no corpo da solicitação

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 /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 Nome=jair&sobrenome=Leite&sexo=M

Enviando dados pelo método POST POST /cgi-bin/programa1 /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)

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 integrados com Servidores de Banco de Dados (SGBDs) Servidores, Interpretadores/Compiladores e SGBD num único pacote mesmo fabricante. Ilustração Programa Gateway Base de Dados SSS Base de Dados API Base de Dados Browser (cliente) Servidor como Base de Dados

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 ); DELETE FROM clientes WHERE sexo=f

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 comunicam com programas gateway Transações com programas gateway Query String Solicitação Arquivos de dados Browser (cliente) Página HTML Servidor CGI Arquivos HTML,GIF, Programas Gateway Servidor de Banco de Dados Resultados + Código HTML

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 primnome=jair&sobrenome=leite&sexo=m Entrada padrão Programas Gateway Arquivos de dados

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 <HTML><HEAD><TITLE>... Programas Gateway Arquivos de dados Saída padrão Jair

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 <HTML><HEAD> <TITLE>Documento HTML</TITLE>... Linha em branco (CRLF)

Exemplo de resposta do servidor /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 HTML Gera comandos SQL Ler resultados do BD Gera doc HTML incluindo os resultados Dados CGI HTML Programa Gateway Query SQL Resultado da Query Base de Dados

Exemplo: Usando Apache, Perl e MySQL CGI Arquivo Perl Servidor Apache Query SQL Resultado da Query Entrada/Saída padrão MySQL 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) ;

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. z São dependentes da plataforma e do servidor

Interpretação de SS Scripts Solicitação Página HTML Servidor Interpretador Script Scripts Arquivos HTML,GIF, + SCRIPTS BD Internet Cliente! " #$ %&' ( ) *+,- ". " 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

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 Browser HTML Internet Information Server VBScript ASP = Doc HTML + VBScript HTML Interpretador VBScript SQL Componentes ActiveX Base de Dados

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>

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>"); } }! " #$ %&' ( ) *+,- ". "

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 que é requisitado pelo servidor

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; } } SimpleBean.java

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 Solicitação Página HTML Servidor API Arquivos HTML,GIF, BD Programa compilado Cliente Internet

Usando a ISAPI Internet Information Server ISAPI BD Browser HTML Arquivo.dll GetServerVariable( ) ReadClient ( ) WriteClient ( ) ServerSupportFunction ( ) GetExtensionVersion( ) HttpExtensionProc( ) Extension_Control_Block Integração de servidor Web e banco de dados z Alguns fabricantes oferecem produtos que integram o servidor 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 Foundation.2000

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 Oracle Internet Platform visão geral

Oracle Internet Platform arquitetura Gerencia usuários, aplicações e plataforma Java Servlets Enterprise JavaBeans 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.pl programas Perl

Sybase web.sql - arquitetura Conectividade com web.sql HTML Req. HTS HTML CGI ou NSAPI Web.sql SQL SQL BD1 Arquivo HTS ou Perl BD2

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 z Suporte a HTML, XML e Java