introdução a programção web

70
INTRODUÇÃO A PROGRAMAÇÃO WEB COM CONEXÃO A BANCO DE DADOS 2012 Tutor: SILVIO FERNANDES M. VASCONCELOS Fone: (79) 9929-2920 [email protected] [email protected] (Uso só pra entrar no MSN)

Upload: diego-de-almeida-menezes

Post on 12-Sep-2015

6 views

Category:

Documents


1 download

DESCRIPTION

Introdução a programção web com conexão a banco de dados. JavascriptBanco de dados usado: Firebird.

TRANSCRIPT

introduo a programao web cOM conexo a banco de dados 2012

introduo a programao web cOM conexo a banco de dados 2012Tutor: SILVIO FERNANDES M. VASCONCELOS Fone: (79) 9929-2920 [email protected] [email protected] (Uso s pra entrar no MSN)

1Programao Web 2012Esta apresentao demonstrar a definio de programa, suas declaraes de variveis, constantes, arrays (vetores) e operadores: Lgicos, aritmticos e relacionais.

As estruturas: - Condicionais;- Repetio;- Try-catch ()Tambm os programas necessrios para o desenvolvimento e execuo de aplicao web, bem como a utilizao do JSP.

2Definio e utilizao3DefinioProgramao um conjunto de instrues dada ao computador e uma determinada linguagem numa certa ordem para que possa ser executado uma determinada tarefa. 4VariveisPara guardarmos esses dados, precisamos solicitar ao computador que ele reserve um espao na memria para nosso uso. A forma de solicitar ao computador que reserve memria chamada de declarao de variveis.A sintaxe para a declarao de variveis em Java dada abaixo:

Sintaxe:tipo_da_variavel nome_da_variavel = valor inicial / objeto;

Exemplo: String nome = ""; int idade = 0; Vector vt = new Vector();REGRASEXEMPLOSInicie sempre por uma caractere alfabtico, nunca por nmeroNome (correto) 1nome (errado)No utilize caracteres especiais como , ( ) / *; +.Nome (M); N*BNo coloque espaos em branco ou hfen entre nomes.salario-brutoUtilize, se necessrio, underlinesalario_brutoCrie suas variveis com nomes sugestivos. Se vai guardar salrio defuncionrios, d varivelo nome salario.OBS: Lembrando que java case sensitive, isto , letra maiscula diferente de letra minscula. 5Tipos de variveisTipoDescrioboeleanPode assumir dois valores: true ou false.charCaractere em notao Unicode de 16 bits. Serve para a armazenagem de dados alfanumricos. Tambm pode ser usado como um dado inteiro com valores na faixa entre 0 e 65535.StringArmazena caractere em notao de 16 bits. Serve para a armazenagem de dados alfanumricos. Tambm pode ser usado como um dado inteiro com valores na faixa entre 0 e 65535.intTipo numrico inteiro, pode assumir valores numa faixa de -32768 a +32767, ocupa 2 byte de memria. shortArmazena nmeros inteiros de 16 bits em notao de complemento de dois. Os valores possvels cobrem a faixa de -2-15=-32.768 a 215-1=32.767.longAloca inteiros de 64 bits. Pode assumir valores entre -263e 263-1.floatRepresenta nmeros em notao de ponto flutuante, normalizada em preciso simples de 32bits. O menor valor positivo representado por esse tipo 1.40239846e-46 e o maior 3.40282347e+38.doubleRepresenta nmeros em notao de ponto flutuante normalizada em preciso dupla de 64 bits em conformidade com a norma IEEE 754-1985. Omenor valor positivo representvel 4.94065645841246544e-324 e o maior 1.7976931348623157e+308.6Arrays (vetores) Arrays so conjuntos de variveis com o mesmo nome e diferenciadas entre si por um ndice. Eles so teis para manipularmos grandes quantidades de dados de um mesmo tipo, pois evitam a declarao de diversas variveis.

Sintaxe:

Tipo_da_Variavel[] nome_da_variavel ;

1 Exemplo: String[] nome; int[] idade;

2 Exemplo: String[][] nome; int[][] idade;

OBS: Lembrando que o java j tem um objeto chamado Vector que cira vertor com seus mtodos (funes) pr definidas.

7Estrutura de atribuioComando de Atribuio:Para armazenar um determinado valor durante a execuo do programa. Para isso, utilizamos o comando de atribuio que, em Java, representado por igual (=), conforme sintaxe abaixo:

Sintaxe: identificador = expressoidentificadorNome da varivel ou constante a ser utilizada

expressoValor ou expresso a ser armazenado (veremos ainda neste captulo que podemos ter expresses aritmticas e expresses lgicas).Exemplo: String nome = ""; double nota = 0.0; nome = "Silvio"; nota = 9.5;8Operadores aritmticos, lgicos e relacionais.OperadorOperao Matemtica+Adio-Subtrao/Diviso*Multiplicao%Resto da diviso inteira^PotenciaoOperadores aritmticosOperadorOperao lgica&&E (Disjuno)||OU (Conjuno)!NO (Negao)Operadores lgicosOperadorOperao Relacional==Igual!=Diferente>Maior>=Maior ou igual. Mas enquanto as tags HTML so processadas pelo navegador do cliente para mostrar a pgina, as tags de JSP so usadas pelo servidor web para gerar contedo dinmico. A seguir esto os tipos de tags vlidos em JSP:

20Aplicao Web1.1. Aes JSPExecutam diversas funes e estendem a capacidade de JSP. Usam sintaxe parecida com XML, e so usadas (entre outras coisas) para manipular Java Beans. Abaixo segue algumas delas:

Este elemento transfere o objeto request contendo informao da requisio do cliente de uma pgina JSP para outro arquivo. Este pode ser um arquivo HTML, outro arquivo JSP ou um servlet, desde que faa parte da mesma aplicao.Sintaxe:

21Aplicao WebOu

Este elemento captura o valor da propriedade de um bean usando o mtodo get da propriedade e mostra o valor na pgina JSP. necessrio criar ou localizar o bean com antes de usar .Sintaxe:

22Aplicao Web

Localiza ou instancia um componente. Primeiro tenta localizar uma instncia do bean. Se no existe, instancia ele a partir da classe especificada. Para localizar ou instanciar o bean, so seguidos os seguintes passos, nesta ordem:1. Tenta localizar o bean com o escopo e o nome especificados.2. Define uma varivel de referncia ao objeto com o nome especificado.3. Se o bean for encontrado, armazena uma referncia ao objeto na varivel. Se foi especificado o tipo, converte o bean para este tipo.4. Se no encontrar, instancia-o pela classe especificada, armazenando uma referncia ao objeto na nova varivel.5. Se o bean tiver sido instanciado (ao invs de localizado), e ele tem tags de corpo (entre e ), executa estas tags.

23Aplicao WebSintaxe:

O elemento ajusta o valor de uma ou mais propriedades em um bean, usando os mtodos de ajuste (set) dele. necessrio declarar o bean com antes de ajustar uma propriedade. Estas duas aes trabalham juntas, portanto o nome de instncia usada nas duas deve ser igual.

24Aplicao WebSintaxe:

1.2. DiretivasSo instrues processadas quando a pgina JSP compilada em um servlet. Diretivas so usadas para ajustar instrues no nvel da pgina, inserir dados de arquivos externos, e especificar tag libraries. Diretivas so definidas entre . Existem trs tipos de diretivas:

25Aplicao WebIncludeInclui um arquivo esttico em uma pgina JSP.Sintaxe:

PageDefine atributos que so aplicados a todo o arquivo JSP, e a todos os seus arquivos includos estaticamente.

26Aplicao WebSintaxe:

27Aplicao Web1.3. DeclaraesSo similares com as declaraes de variveis em Java, e definem variveis para uso subsequente em expresses ou scriptlets. So definidas entre .Sintaxe:

1.4. ExpressesContm um comando vlido da linguagem Java que avaliado, convertido para um String, e inserido onde a expresso aparece no arquivo JSP. No usado ponte e vrgula para terminar a expresso, e s pode haver uma entre .Sintaxe:

28Aplicao Web1.5. ScriptletsSo blocos de cdigo Java embutidos numa pgina JSP. O cdigo do scriptlet inserido literalmente no servlet gerado pela pgina. definido entre .Sintaxe:

1.6. ComentriosSo similares aos comentrios HTML, mas so tirados da pgina quando o arquivo JSP compilado em servlet. Isto significa que os comentrios JSP no aparecem no cdigo fonte da pgina visualizada pelo navegador do usurio. Comentrios em HTML so feitos entre , enquanto comentrios em JSP so entre

29Aplicao WebECLIPSE 3.5 (superior)

O Eclipse IDE um ambiente de desenvolvimento integrado gratuito e e de cdigo aberto para desenvolve-dores de software. O IDE executado em muitas plataformas, como Windows, Linux, Solaris e MacOS. fcil de instalar e usar.

O Eclipse oferece aos desenvolvedores todas as ferramentas necessrias para criar aplicativos profissionais de desktop, empresariais, Web e mveis multiplataformas. Podendo ser baixado em: http://www.eclipse.org/downloads/packages/release/galileo/r

30Definio e utilizao do HTML31DefinioOs comandos em HTML so chamados de tags, e eles iro dizer ao navegador como o texto, a informao e as imagens sero formatadas e exibidas. Por exemplo, uma tag pode dizer que um determinado texto ser exibido em negrito, itlico e com um tipo de fonte qualquer. Alm de formatao de texto uma tag tambm pode dizer que na verdade um determinado bloco desse texto est ligado um endereo para outra pgina Web. As tags HTML so identificadas pelos smbolos (em uma tag de abertu-

ra) e (em uma tag de fechamento). Ou seja, quando voc especifica uma tag de abertura para a formatao de um bloco de texto, voc dever tambm, specificar a tag de fechamento, logo no fmal desse bloco de texto. Portanto, a maioria das tags so duplas. O formato mais comum : contedo .As tags HTML no so sensveis a maisculas e minsculas, ou seja, tanto faz escrever .32Estrutura do documento em HTMLUm programa HTML dividido em trs partes bsicas: a estrutura principal, o cabealho e corpo de texto. Estrutura Principal Cabealho Corpo de Texto A estrutura bsica de um documento HTML so as linhas obrigatrias e essenciais para um bom funcionamento de uma pgina Web. Observe a seguir essa estrutura: Titulo da pgina Aqui ser montada a pgina. 33Tag Atravs de atributos da tag , podemos definir cores para os textos, links e para o fundo das pginas, bem como uma imagem de fundo para um documento.Atributos da tag body: bgcolor cor de fundo da pgina. Se no for indicada uma cor de fundo, o navegador exibir o valor padro, que pode ser cinza ou branco. Exemplo: text: cor do texto do documento. O valor padro preto. Exemplo: background: indica o endereo da imagem que ser aplicada no fundo da pgina. Exemplo: Lembrando que no precisa repetir varias vezes o comando (tag) para cada atributo, digita somente o comando uma vez e depois seus atributis separado de espao em cada para cada um.Exemplo:34Tag
Quando voc precisar forar uma quebra de linha em uma frase, voc poder utilizar a tag
. Isso porque, quando voc utiliza a tag , ela acrescenta uma linha em branco entre os dois pargrafos. A tag
no precisa de uma tag de fechamento. Um uso comum para o elemento
em pgina, seria na descrio de um endereo postal: Exemplo:Casa Verde
Av. 21 de Julho, 66
Bairro Centro
CEP: 16550-000 Observe que no importa a forma como escrevemos o cdigo no editor, a formatao ser definida pelas tags.35Tag A tag delimita os pargrafos e insere uma linha em branco entre eles. Isso porque, o interpretador de HTML no sabe onde um pargrafo termina e outro comea. Ento se voc digitar um bloco de texto sem utilizar a tag , esse mesmo bloco de texto ser exibido como uma longa linha de texto na pgina. A tag possui a tag de fechamento , porm o seu uso opcional.Exemplo: Este pargrafo Atributos da tag p: align: esse atributo define uma posio de alinhamento para o elemento que est sendo formatado pela tag. Os valores do atributo podem ser: LEFT (esquerda), CENTER (centralizado), RIGHT (direita) ou JUSTIFY(justificado). style: os valores desse atributo alteram as propriedades: cor, fonte, tamanho, sublinhado e estilo do texto marcado. 36Cores para WebPara alterar a cor de link.s, tabelas, textos, entre outros, necessrio atribuir um valor para o atributo que define a cor. Os valores das cores so especificados por padres alfanumricos, no modo de cor RGB (Red vermelho, Green - verde e Blue -azul) com base hexadecimal. Por exemplo, a cor branca representada pelo valor FFFFFF, j o preto, que a ausncia de cores, representado pelo valor 000000. As cores podem ser especificadas pelo seu valor e tambm usando o seu prprio nome.37Tag ... utilizada para modificar propriedades das fontes. Essa tag um recipiente cujo contedo renderizado com caractersticas particulares definidas por seus atributos.Atributos da tag ...: color = "valor": atributo que ajusta a cor de todo o texto que est localizado entre as tags ... . Exemplo: ... size = "valor": utilizado para especificar um tamanho em pontos para fonte que ser apresentada. possvel utilizar um valor inteiro ou relativo. Os valores inteiros vo de 1 a 7. Os valores relativos, utilizam o tamanho da fonte padro do navegador para se ajustar na tela. Por exemplo, se o tamanho da fonte padro do navegador for 3, voc poder especificar um valor + 3, para que a fonte seja trs vezes maior que a fonte padro do navegador. Porm, o tamanho da fonte ser sempre ajustado dentro da faixa de valores de 1 a 7. Exemplo: ..... .... 38Tag s..., ..., ... e ... utilizada para aplicar o efeito de Negrito em todo bloco de texto entre ..... utilizada para aplicar o efeito de Itlico em todo bloco de texto entre ..... utilizada para aplicar o efeito de trachado em todo bloco de texto entre ..... utilizada para aplicar o efeito de Sublinhado em todo bloco de texto entre .....39LINKCom a linguagem HTML possvel criar documentos com o conceito de hipertexto, ou seja, documentos que se comunicam com outros documentos. Por meio de ligaes especiais conhecidas como links ou hiperlinks. Essas ligaes podem ser entre elementos do prprio documento, como reas ou sees distintas do documento, ou em outra pgina da Web. A utilizao de links facilita muito a criao de pginas extensas, ou sites com muitas pginas, pois por meio deles possvel acessar rapidamente o assunto desejado. Para compreender melhor imagine uma pgina que contenha um assunto divi-dido em tpicos e que tenha no incio da pgina um sumrio indicando cada tpico, como em um livro. Para acessar um assunto especfico basta clicar sobre o tpico desejado e ele ser exibido imediatamente. Nas pginas da Web os links so muito utilizados para que o visitante possa acessar as vrias pginas do site.40Tag ...A tag utilizada para criar um link a tag , mas para que um texto ou imagem receba uma ligao necessrio utilizar os atributos dessa tag. Atributos da tag ...: href : o atributo da tag utilizado para criar links o HREF. Esse atributo o responsvel por determinar o destino do link. A criao de um link bsico realizada com o seguinte cdigo: Texto Onde: URL - o caminho absoluto ou relativo do documento de destino; Texto - um bloco de texto ou imagem que ser utilizado como a ligao entre o elemento especificado no atributo HREF e o documento que possui o link. Resumindo, o texto que ser clicado pelo usurio para que o link possa funcionar. Veja um exemplo de um link: Exemplo: AlfabticoUma caixa de seleo ou "checkbox" utilizada para configurar objetos de seleo predefinidos. Ou seja, cada opo possui uma caixa de seleo e o usurio dica na caixa de seleo para fazer a escolha. Nas caixas de seleo, o usurio alterna cada resposta para Ativa ou Inativa. As opes das caixas de seleo funcionam independentemente. O usurio poder selecionar mais de uma opo em um grupo de caixas de seleo. 56Tag - Campo Opo (RADIO) Os botes de opo funcionam como um grupo e fornecem valores de seleo mutuamente exclusivos. possvel selecionar apenas uma opo em um grupo de botes de opo. O nome definido para o atributo NAME deve ser o mesmo para todos os botes de um grupo, e os valores do atributo VALUE deve ser diferente para cada um deles, como nas caixas de seleo.Exemplo:Maculino:Os botes controlam as operaes relacionadas aos formulrios. Para criar um boto de ao, voc utilizar a tag . No atributo TYPE dessa tag, voc poder especificar trs possveis tipos de boto de ao: SUBMIT, RESET e BUTTON. SUBMIT: boto utilizado para enviar as informaes que o usurio digitou para a URL especificada no atributo ACTION da tag ; RESET: boto utilizado para redefinir todo o contedo do formulrio; 58Tag ... Exemplo: Insira o texto aqui. O campo rea de texto fornece ao usurio uma rea maior, na qual possvel digitar uma mensagem. Para criar um campo de texto de mltiplas linhas, utiliza-se a tag . Essa tag possui dois atributos, ROWS e COLS, que especificam, respectivamente, o nmero mximo de linhas e colunas que se deseja mostrar para o usurio. Se o texto digitado ultrapassar as definies, o campo se estende de acordo com a definio especificada no atributo de quebra de linha. Veja a seguir um exemplo de um campo de texto de mltiplas linhas:59Tag ... Exemplos: Azul Vermelho AmareloQuando desejar apresentar diversas opes ao usurio em um espao limitado, utilize uma lista de opes ou menu. Embora as listas e menus de formulrios sejam criados utilizando a mesma tag , estes componentes fornecem ao usurio recursos de funcionalidade diferentes. Acompanhe a sintaxe da tag :NAME: atributo obrigatrio para a identificao da lista; OPTION: cria cada item da lista; VALUE: valor que ser retomado.60Banco de dados61Banco de DadosBanco de Dados: uma coleo de dados inter-relacionados, representan-do informaes sobre um domnio especfico.Exemplos: lista telefnica, controle do acervo de uma biblioteca, sistema de controle dos recursos humanos de uma empresa.Sistema de Gerenciamento de Bancos de Dados (SGBD): um software com recursos especficos para facilitar a manipulao das infor-maes dos bancos de dados e o desenvolvimento de programas aplicativos.Exemplos: Oracle, SqlServer, MySql, FireBird, PosterGre.62Banco de DadosTabelas: Os bancos de dados relacionais so compostos de relaes, mais comumente chamadas de tabelas. Uma tabela exatamente o que o nome sugere - uma tabela de dados. Se alguma vez utilizou uma planilha eletrnico, j utilizou uma tabela relacional.Toda tabela composta por colunas, cada uma correspondendo a um fragmento diferente de dados e linhas que correspondem a registros individuais.Colunas/campo: Cada coluna na tabela tem um nome nico e contm dados diferentes. Cada coluna tem um tipo de dados associados. As colunas so comumente chamadas de campos ou atributos.Linhas/registro: Cada linha em uma tabela representa um registro diferente. Por causa do formato tabular, todas elas tm os mesmos atributos. As linhas tambm so comumente chamadas de registros ou tuplas.Valores: Cada linha consiste em um conjunto de valores individuais que correspondem a colunas. Cada valor deve ter o tipo de dados especificado pela sua coluna.Chave: A coluna de identificao em uma tabela chamada de chave ou chave primria. Uma chave tambm pode consistir em mltiplas colunas. Por exemplo, podemos refirir a um registro especfico combinando os campos correpondentes a ele, mas no tendo a garantia de ser nica.63Normalmente os bancos de dados consistem em mltiplas tabelas e utilizam uma chave como uma referncia de uma tabela para outra. O termo de banco de dados relacional para esse relacionamento chave estrangeira. O identificador de uma tabela, quando aparece em outra tabela, referido como uma chave estrangeira.Exemplo:Banco de DadosCod_idNometelefone1Silvio Fernandes(79) 999999992Patrcia Elizabeth(79) 888888883Anthony Fernandes(79) 7777777777Coluna/CampoLinha/RegitroValoresTabela64Banco de Dados FireBirdO Firebird um poderoso banco de dados Cliente/Servidor relacional que compatvel com SQL-ANSI-92, e foi desenvolvido para ser um banco de dados independente de plataformas e de sistemas operacionais. Este banco de dados, dispensa maiores estruturas dentro da empresa, (DBA / Preparao), onde basta instalar o software e usar-lo, sem a interferncia freqente de profissionais, especializados na manuteno do banco de dados de produo.Onde usaremos o FireBird para criar nosso banco de dados que iremos cadastrar os comprimissos.Sabendo-se que na linguagem SQL so usados cinco comando principais, so eles: create insert into update delete from select65Comandos em SQLCreate: Serve para criar tabela no banco de dados.Ex: create table tabela ( cod_id int not null, nome varchar(40) not null, telefone varchar(14), primary key (cod_id) );Insert into: Serve para adicionar(incluir) dados na tabela.Ex: insert into tabela(cod_id,nome,telefone) Values (1, Silvio Fernandes, (79) 99999999)Update: Serve para alterar(mudar) dados na tabela.Ex: update tabela set nome=Andre Silva where cod_id=1NomeTipoNo permite ser nulo66Comandos em SQLDelete from: Serve para excluir(apagar) dados na tabela.Ex: delete from tabela (para apagar todos os registro da tabela) detete from tabela where cod_id = 1 (para apagar somente o registro que o cdigo for igual a 1)Select: Serve para selecionar(mostrar) dados na tabela.Ex: select * from tabela (mostrar todos os dados da tabela inteira) select * from tabela where cod_id=1 (mostrar os dados da tabela que o cdigo for igual a 1)Com isso, vamos criar agora o nosso banco de dados chamado db_dados, com uma tabela chamada dad_dados no MySql Query Browser. Sabendo que a tabela seguir a estrutura a baixo. 67Tabela dos Dados de Compromisso68Generation e Triges do Fire BirdPara tornar um campo da tabela do tipo Auto-Emcremente, ser necessrio criar um generation e uma trige no Firebird. Como exemplo a baixo:69Obrigado pela ateno !!!70