JAVAWEB AULA 2 Prof. Daniela Pires Sumário

Transcrição

1 Sumário 1. Projeto WEB Conexão com o banco de dados Include

2 1. Projeto WEB Crie um novo projeto WEB, como mostram as telas abaixo: 2

3 Após criar seu website, copie todos os arquivos do site 2014 para dentro dessa estrutura de website. 3

4 Crie uma pasta template e mova todos os HTML para dentro. 4

5 Transporte todos os HTML para dentro dessa pasta. 2. Conexão com o banco de dados Vamos criar uma conexão com o banco de dados, mas antes disso é necessário, cadastrar o plugin do MYSQL no NETBEANS. Acesse e baixe o plugin do MYSQL, salve em uma pasta. Agora acesse Bibliotecas -> Adicionar JAR/Pasta, como mostram as telas abaixo. Vá até a pasta que salvou o JAR 5

6 E clique em abrir e pronto estará instalado o banco de dados MYSQL no NETBEANS e no projeto web. Agora clique com o botão direito do mouse em cima das pastas de arquivo web. Novo -> JSP e copie e cole o script abaixo nesta área. <%@page language="java" import="java.sql.*" %> <% String connectionurl = "jdbc:mysql://localhost/site_noticia"; String User = "root"; String Pass = "fmu"; Connection connection = null; Statement statement = null; ResultSet rs = null; %> 6

7 Se você fizer isso antes de anexar o plugin do MYSQL dará erro. Faça isso execute e veja se funcionou, se sim, pronto, conectamos com o banco de dados e agora vamos produzir nosso site de notícias. 3. Include São instruções utilizadas para incluir um arquivo dentro de outro arquivo. Ou seja, é permitido ler o conteúdo de outro arquivo dentro do script de um arquivo. Crie agora o index.jsp que irá incluir o arquivo template/index.html e o conecta.jsp. 7

8 Apague todo o script acima e vamos começar a criar nosso website dinâmico. Escreva as linhas abaixo. E execute e veremos nosso website que criamos em HTML rodando em JSP, como mostra a próxima tela. 8

9 Ele incluiu conexão com o banco de dados e o template, porém a parte de notícias dentro site está em HTML será o próximo passo que iremos avançar. Vamos primeiro abstrair o menu e rodapé de todos os templates, criar uma pasta inc e mover para ela o conecta.jsp, e o menu.html e o rodapé.html e nos templates vamos incluir os mesmos. 9

10 Arraste o conecta pra dentro dessa pasta e corrija no index.jsp. Abra o index.html para abstrair o menu e o rodapé. 10

11 Apague tudo e cole o menu que colou volte ao index.html e coloque o include do menu. 11

12 Antes disso corrija o link do menu para que todas as paginas sejam JSP como mostra abaixo. 12

13 Insira o menu conforme o exemplo acima e faça isso em todos os templates. E depois de save as em no index.jsp e salve os outros e teste a navegação se abre todas as telas e daí iremos criar então as classes de listar noticias. 13

14 Faça o mesmo procedimento para noticias.jsp e contato.jsp, não faça para noticias2 pois iremos fabricar ele no noticias.jsp. Todos os arquivos criados vamos partir para a inclusão de apenas uma variável na página de notícias e da index para enfim criarmos a mesma com conexão com o banco de dados. 14

15 Retire tudo e coloque a variável noticias. 15

16 Para ter certeza absoluta que dará certo. Transponha o código cortado para o index.jsp e crie uma variável noticias com ele. Como mostra abaixo e execute. Perfeito então vamos agora conectar com a tabela de noticias e transpor o código para as variáveis de banco de dados. 16

17 Com a string acima fiz a conexão com o banco e listei as notícias da tabela noticia no banco de dados. Veja abaixo como aparece no site. Class.forName("com.mysql.jdbc.Driver").newInstance(); connection = DriverManager.getConnection(connectionURL, User, Pass); statement = connection.createstatement(); String noticias; 17

18 noticias = "<h2>notícias</h2>"; noticias += "<ul>"; JAVAWEB AULA 2 rs = statement.executequery("select * FROM noticia order by not_data DESC limit 5"); while (rs.next()) { noticias += "<li><img src=\"img/noticia/" + rs.getstring("not_img")+ "\" class=\"foto\" /><a href=\"noticias.jsp?id=" + rs.getstring("not_id")+ "\">" + rs.getstring("not_titulo")+ "</a></li>"; } rs.close(); noticias += "</ul><div align=\"right\"><a href=\"noticias.jsp\">+notícias</a></div>"; E a primeira parte do código está feita vamos agora produzir o detalhe das noticias. 18