Conteúdo Dinâmico. Introdução. Interação Browser x Servidor Web. Interação Browser x Servidor Web

Transcrição

1 Introdução Formulários rios & Conteúdo Dinâmico Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA A Web surgiu inicialmente como uma nova forma de comunicação de informações, fazendo uso de recursos de hipertexto e multimídia. Ultimamente, tem sido vista como uma plataforma de desenvolvimento de aplicações cliente/servidor, com várias soluções possíveis. A solução precursora foi o CGI (Common Gateway Interface). mario@deinf.ufma.br Outras: ASP, Cold Fusion, Java, PHP, Servlets, JSP, CORBA... Formulários & CGI 2 Interação Browser x Servidor Web Interação Browser x Servidor Web Modelo mais usual: Utilizando CGI: Formulários & CGI 3 Formulários & CGI 4

2 Conteúdo Dinâmico Funcionamento Deve-se definir um protocolo que especifique como as informações são trocadas entre um browser e um servidor web. Informações: parâmetros de entrada para programas localizados no servidor. O usuário solicita a execução de um programa no servidor web, indo além da mera funcionalidade de apresentação de informações da linguagem HTML. Aplicações: serviços de busca, , bancos de dados, comércio eletrônico... Programa ou Script? Depende da linguagem de programação utilizada. Um script/programa pode ser acionado diretamente por meio de uma URL ou a partir de um formulário HTML (mais comum). Cada abordagem possui sua própria forma de acionamento dos scripts (processos, threads, pool...) O servidor web executa o script e passa-lhe os dados de entrada que recebeu do cliente. Formulários & CGI 5 Formulários & CGI 6 Funcionamento Dados de entrada Funções do Script: Lê os dados enviados pelo usuário; Decodifica a string de entrada (extrai os parâmetros); Realiza o processamento que lhe cabe; Monta uma página HTML de resultados, que é enviada de volta ao usuário. O desenvolvedor pode, então, produzir páginas HTML dinamicamente, em resposta às ações dos usuários. As páginas produzidas podem conter qualquer elemento HTML válido, até mesmo outro formulário. Os dados podem ser enviados ao servidor por dois métodos: GET e POST. Qualquer que seja o método empregado, o formato dos dados de entrada é sempre o mesmo: nome1=valor1&nome2=valor2&... &nomek=valork... A string recebida contém uma seqüência de pares nome/valor, separados por um &. nome - identificação do campo no formulário valor - conteúdo do campo Formulários & CGI 7 Formulários & CGI 8

3 O Método GET O Método POST Este método faz com que os dados sejam passados ao programa anexados à URL utilizada para invocar o programa, após um? O programa pode obter os dados de entrada a partir de variáveis de ambiente. Há um limite máximo de 1024 bytes para o tamanho dos dados passados. GET só deve ser usado para uma pequena quantidade de dados de entrada, por exemplo, em consultas ao servidor. GET é um método menos seguro, pois expõe os dados enviados pelo usuário na URL. O método POST faz com que os dados sejam enviados ao servidor em uma mensagem separada e não anexados após uma URL. O script lê os dados a partir da entrada padrão (stdin) e não há limitação para o tamanho do fluxo de dados. Porém, é preciso verificar o tamanho dos dados enviados, em uma variável de ambiente. É sempre preferível usar o método POST no lugar do GET, principalmente se a quantidade de dados for grande, como no caso de ações que atualizam arquivos no servidor. Formulários & CGI 9 Formulários & CGI 10 Formulários A tag FORM Os formulários, na maioria das vezes, são a porta de entrada para um programa/script no servidor web. A HTML possui tags especiais para a criação de formulários: FORM INPUT SELECT TEXTAREA Um formulário é sempre definido no corpo de um documento HTML e pode estar misturado com outras tags. Formulários & CGI 11 Encapsula todo o conteúdo do formulário. Define a URL do programa invocado e o método de envio dos dados ao servidor. <FORM METHOD=GET/POST ACTION= >... </FORM> Qualquer elemento HTML válido pode estar dentro de uma tag <FORM>, exceto outro formulário. Formulários & CGI 12

4 A tag INPUT A tag INPUT Especifica um ponto de entrada de dados no formulário. <INPUT TYPE=... NAME=... VALUE=......> TYPE indica o tipo do campo. Pode ser: text, password, checkbox, radio submit - Botão de envio de dados ao servidor reset - Botão para limpar os campos do form ou retorná-los aos seus valores iniciais NAME é o nome interno do campo, usado para formar os pares nome/valor na string enviada ao servidor. VALUE é o conteúdo default dos campos text e password. Para radio ou checkbox, define o valor do campo quando ele é selecionado. Para submit e reset, especifica o rótulo do botão. CHECKED define se o botão de rádio ou caixa de verificação vai estar selecionado por default. SIZE define o tamanho físico do campo, na tela do computador. MAXLENGTH é o número máximo de caracteres que o campo aceitará como entrada. Formulários & CGI 13 Formulários & CGI 14 A tag SELECT A tag SELECT Esta tag serve para criar menus de opções ou listas de rolagem. <SELECT NAME=... > <OPTION> primeira opção <OPTION> segunda opção <OPTION>... </SELECT> Atributos para SELECT: NAME é o nome interno do controle. SIZE é o tamanho da área de seleção; 1 é o default. Se SIZE for maior que um, o campo é apresentado como uma lista de rolagem. MULTIPLE possibilita múltiplas escolhas. Atributos para OPTION: SELECTED especifica que a opção aparecerá selecionada por default. Formulários & CGI 15 Formulários & CGI 16

5 A tag TEXTAREA Exemplo de Formulário É utilizada para colocar um campo de entrada no formulário, com múltiplas linhas (campo memo). <TEXTAREA NAME=... ROWS=... COLS=... >... </TEXTAREA> NAME é o nome interno do campo. ROWS indica o número de linhas do campo. COLS indica o número de colunas. Formulários & CGI 17 Formulários & CGI 18 <html> <head><title>formulario de Inclusao</title> </head> <body> <form method=post action=" <h3>dados Pessoais</h3> <hr> <p>codigo:<br> <input name="codigo" size=11 maxlength=10> <p>nome do aluno:<br> <input name="nome" size=35><br> <p>endereco:<br> <input name="ender" size=50><br> <p><input type=submit value="incluir"> <input type=reset value="limpar"> <hr> </form> </body> </html> Formulários & CGI 19