Loading

Module 1: Introdução ao MYSQL Database e Java

Nota de Estudos
Study Reminders
Support
Text Version

Implementa Consultas em Banco de Dados

Set your study reminders

We will email you at these times to remind you to study.
  • Monday

    -

    7am

    +

    Tuesday

    -

    7am

    +

    Wednesday

    -

    7am

    +

    Thursday

    -

    7am

    +

    Friday

    -

    7am

    +

    Saturday

    -

    7am

    +

    Sunday

    -

    7am

    +

Nós vamos analisar como é que a tela que criamos na última parte será usadapara a aplicação real.
Como funciona o sizing html?Para desenhar a tela, criamos um arquivo chamado register.html. É apenas um layout para que você possaexperimentar o que se passa antes de realmente torná-lo uma parte do aplicativo.
Nós vimos que se você quiser obter uma distância estável de 20% a partir da parte superior, então você tem que usaralgo chamado dimensões de viewport que diz padding-top= ” 20 vh ”. Ele divide a altura verticalem 100 partes e leva 20 delas para falar sobre quanto espaço usar, mas eleé algo interessante, se você olhar o tamanho real do corpo como pode ver o navegadormostra que o corpo é de 909,6 pixels por 259 e o corpo em fato termina logo após os botõesserem feitos.
Então, assim que isso for feito, o corpo está terminando.
E quanto ao resto do espaço que estava abaixo desta parte da página?
A resposta é que a altura do corpo em html normal é determinada pelo conteúdo eque não é apenas o corpo, todas as tags em html são expressas em porcentagens do tamanho de seu container. Por isso, o container para o corpo é na verdade a tag chamada html e é o tamanho da taghtml que decide como o corpo será medido e assim por diante como partes da estrutura.
A exceção a isso é o uso direto de tamanhos de viewport.
O conteúdo disponível decide o tamanho da página e não a página em si, mas ao pensarsobre esses tipos de aplicativos, aqueles que enviam informações obtêm-na e assim em que sãonão necessariamente necessariamente documentais, é útil ser capaz de pensar em todo o visordisponível como a sua página e ser capaz de estender o corpo para o fundo sempre que o conteúdo formenor.
Isso torna um pouco mais fácil de ver o que está acontecendo e você pode realmente conseguir isso porfazendo o seguinte:
Adicionar estilo para o corpo que diz o seguinte: margem do corpo deve ser 0, o preenchimentodeve ser 0, e a altura mínima do corpo, portanto, mínimo significa se não houver conteúdosuficiente, então a altura deve ser de 100% da altura do viewport.
Vou torná-lo tão pequeno que uma barra de rolagem aparece e nesse caso o corpo agora estáse estendendo abaixo da dobra porque a scrollbar irá assumir o restante da área. Portanto, este écomo o espaço é usado no html.Como vimos na última vez, criamos essa coisa toda usando uma tabela, embora em algumas maismaneiras avançadas de usar CSS.
Então, primeiro quando visitamos este app, a página se parece com isso:
Nesse desenvolvimento do app, nós só vamos olhar para o uso de uma parte do app querecupera informações que já estão no banco de dados. Depois, veremos o que é preciso para colocar as informaçõesno banco de dados; primeiro na forma de um simples programa de java e depois vamosincluir isso no app real. Enquanto a consulta ao banco de dados para obter os dados é relativamente simples,a atualização do banco de dados não é. O motivo é que os comportamentos que queremos do app quandoele vem para atualizações não são nada simples de entender.
Por que a atualização do banco de dados a partir de um aplicativo web mais difícil do que implementar consultando?Suponha que você tenha três funcionalidades para implementar: registrar usuários, inserir despesas e obter o relatório.Embora pareça tarefas diretas, algumas complicações surgem enquanto implementam.
Exemplo:● Registro de usuário: E se a mesma pessoa já tiver registrado? E se 2 pessoas tiveremo mesmo nome? Por isso, até algo tão simples como o registro não é em tudo realmentesimples e em parte resolvemos esse problema através de alguns mecanismos do banco de dados e emparte por alguns mecanismos dentro do próprio programa.
● Digite despesas: E se houver um erro em um gasto informado anteriormente? Então agora todo umrepente percebemos que precisamos apoiar a exclusão quando na verdade você não planejou nenhumtal coisa. E se você entrar acidentalmente em despesas duplicadas?
● Obter relatório: Por se trata de uma consulta, as coisas são relativamente simples.
Implementar apenas consultas no aplicativo web (sem atualizações)No nptel do banco de dados, há essas 3 tabelas (gastos e usuários, já vistos na última palestra) enquanto users2 é uma nova tabela.
Usando a consulta: descreva despesas; ele mostra o ID de despesa de campos, tempo de criação de despesas,ID do usuário e o valor gasto como mostrado na figura acima. Todos os 3 minutos de expid, ectime, usrid são64 bit identificadores e o expido é a chave primária.
A tabela de usuários tem uma estrutura semelhante com um ID de usuário, tempo de criação e nome do usuário.Aqui, a chave primária é o usrid.
O tempo de unix padrão, que é milissegundos a partir de um certo instante escolhido em 1970 pode ser usadopara estampas de tempo. Há razões diferentes para usar esta notação particular para o tempo. Entreoutras coisas, é fácil compartilhar entre diferentes concorrentes e você pode convertá-lo paravárias formas no lado de saída.
Registrar um novo usuário usando o aplicativo web, inserindo dados no campo de entrada e clicando emo botão de registro no aplicativo da web. O sistema vai simplesmente ignorar a nova entrada comoainda não implementamos a funcionalidade de registro a partir do navegador. Ao clicaro botão de registro, a tabela de usuários previamente preenchida é exibida.
Ao clicar em botão registrar:
O interessante é comparado com o aplicativo java que desenvolvemos para exibir a tabela dos sers, temos uma saída bem estruturada usando HTML.
Ao clicar em botão de despesa:
Ele exibe a tabela de despesas em banco de dados nptel, sem o id do gasto como ele pode ser irrelevantepara o usuário final.
O botão de relatório atualiza o app e exibe a tabela Expense Report, que exibe as despesas deincorridas e o tempo convertido de inteiro para um formato mais legível.
Como conseguimos a tabela de Relatório de Despesa acima?Primeiro, dê uma olhada na estrutura do arquivo html
A tabela de relatórios de despesas combina dados da tabela de usuários, o que lhe dá um nome e a tabela de despesas doem si que são escritas em termos de Ids e mostra-lhe o resultado
adequadamente.
Como visto nas figuras acima, temos 4 telas neste app. Uma coisa que está acontecendo éporque estamos fazendo isso como uma sucessão de solicitações de post, como você verá; todas essas visitasaparecerão na história do navegador.
Este app simplesmente recupera o que o banco de dados tiver, e exibe no navegador.
O que está no arquivo de guerra deste aplicativo?
Em primeiro lugar, tvf no comando jar significa:● v é para verbose● t é para mostrar o conteúdo● f é para o próprio arquivo de guerra
O comando jar cria● diretórios META-INF e MANIFESTO, como vimos anteriormente.● Dentro do diretório jsp, há 4 jsps correspondentes às 4 páginas.● Existe um arquivo de classe no diretório de classes: fairShareShow.class.● No diretório lib, temos bibliotecas de tags. As bibliotecas de tags são para as tags jsp como temos
visto antes.● o web.xml mostra como as URLs da web estão conectadas aos métodos de servlets java● o context.xml é destinado para conectar o banco de dados via JNDI como também vimosanteriormente.
Deixe-nos olhar o web.xml deste aplicativo:
1. <resource-ref> conta onde fica o banco de dados.2. Nome do servlet é app e a classe do servlet é nptel.FairShareShow3. O mapeamento diz que a URL /, que é a única URL neste app é mapeada para o servlet.4. Não há URLs especiais, essa URL única está sendo reutilizada para tudo porquenão há fluxo de páginas. Estamos atualizando a mesma página de novo e de novo. Esse estiloàs vezes é chamado de app de página única e se você olhar para discussões na web, elestendem a ser um tanto elaborados sobre o que este app é para, não tem que ser tãocomplicado como eles fazem para fora. Ao mesmo tempo, há uma razão técnica por queessas coisas são chamadas de apps de página única, enquanto que o tipo de app que somosconstruindo, que reconstrói toda a página a partir do servidor toda vez não é bemchamado isso, mas o efeito é o mesmo.5. Nós não estamos alterando a URL, estamos mantendo a URL a mesma e mostrando o
resultados do que é que nós obtemos. Poderíamos fazer um design diferente no qual o relatório que está sendomostrado para a instância não está na mesma página e cada relatório tem um resultado distinto, masque é meio desajeitado para usar para um app como este.
FairShareShow.java tem um monte de importações
FairShareShow estende HttpServlet como usual.
Os dois métodos fundamentais são o doGet e o doPost, como em um servlet. O método doGet realmente apenasconfigura o atributo usando campos de classe sem digitar explicitamente o valor e o passa para baixo parapost.
Nós configuramos um atributo para o título usando req.setAttribute como visto anteriormente. Nós procuramos parâmetros de solicitaçãousando req.getParameter (), que retornam os valores de botão no formulário, o valornão é nulo se o botão é clicado atualmente.
init.jsp:
O valor do nome do botão aparece como um parâmetro (aqui, btnRegister).
Então, você pode ter 3 tipos de botões e se esse parâmetro não for nulo, então isso significa que o botãofoi pressionado.
Em uma variável booleana fazemos algo bastante direto. Você se conecta ao banco de dados. Sefor um comando register, execute a consulta que está relacionada ao registro, converta o conteúdo emuma lista de hashmaps como vimos anteriormente, configure que consulta dados como dados do usuário e, em seguida, incluaesta coisa.
Se for relatório, a consulta é um tanto complicada como vimos nas últimas palestras, elacombina duas tabelas usando junção.
Então, nós tiramos esta consulta e colocamos em uma string em fairShareShow.java:
Como usar as strings de consulta?
Quando você visita a URL pela primeira vez, ligue para init.jsp e o processamento permanece o mesmo. Sehouver uma falha, então você tem uma exceção SQL que você pode lixar.
Se houver alguma outra falha, então nós estamos atualmente apenas indo imprimir um rastreio de pilha. Eventualmente,vamos obter esses rastros no log e na página web, mas por enquanto, vamos simplesmente deixá-lo para serdump.
O texto destacado é para testes com tomcat incorporado. Se obtermos tempo, olharemos para o Tomcat incorporado, pelo menos mencionaremos o que está acontecendo aqui.
Finalmente, fechamos o banco de dados.
O que o init.jsp contém?init.jsp é apenas a página de layout que temos discutido com atributos de altura e largura.
register.jsp.: Ele basicamente tem o mesmo código e adiciona uma tabela chamada Usuários Registrados.
Temos uma tabela e a largura da tabela é 22em. Razão para a escolha da largura é teruma tabela que é um pouco mais larga que a área estendida pela tabela que tem um campo de entrada e3 botões.Ao criar a altura da legenda, criei algum espaço em torno dele e o estilo das fronteiras de tabela, muitos designers de interface com o usuário aprenderam ao longo do tempo que a mais simples tipo de tabelacoloca essas linhas horizontais e deixa as colunas sem nenhuma separações de colunas, enão é aquela aparência ruim, então vamos grudar com ela.
Nessa tabela, o que temos são cabeçalhos de mesa e parte do laço forEach produz as linhas. Eleobtém os dados do usuário e lembra que dados do usuário são do FairShareShow.
Nós obtemos um mapa hash e o mapa hash informa qual ID de usuário, ctime e uname são, quais sãoos resultados retornados pela consulta. Todas as descrições de células, os elementos td, têm algochamado de classe, td bottom e os cabeçalhos possuem outra classe chamada th top e bottom. Esse tipo decoisa de classe é novamente uma parte do CSS.
Para cada nó em html, você pode adicionar uma classe que diz que este cabeçalho específico é do
digite a parte superior e inferior, portanto cabeçalho de tabela com a parte superior e inferior, e esta célula de tabela aqui é detipo td inferior, portanto, só tem uma única fronteira é o que queremos dizer.
O que uma classe define é um estilo, de modo que em vez de usar atributos de estilo explícito, como temosvisto antes, seremos capazes de obter algumas informações da seção de estilo.
Nós reunimos informações em uma classe e dizemos que ela possui uma borda inferior e ela tem uma borda superior,e para a própria tabela, o que fizemos foi não especificamos uma fronteira em todo e assimnão há fronteira implícita. Na verdade chegamos a dizer o que é isso, e para as células da mesa, vamosdizer que o alinhamento tem que estar no centro.
O alinhamento para o cabeçalho já está center que é dado simplesmente usando th e, portanto,com este CSS, temos a aparência de tabela que desejávamos. Como de costume, se você quiser realmentebrincar com ele e observar alguns dos detalhes, você pode sempre abrir as ferramentas de desenvolvedor webe começar a olhar para o que tudo está envolvido.
É assim que obtemos um layout relativamente limpo das informações.