Sumário 1. Projeto WEB... 2 2. Conexão com o banco de dados... 5 3. Include... 7 1
1. Projeto WEB Crie um novo projeto WEB, como mostram as telas abaixo: 2
Após criar seu website, copie todos os arquivos do site 2014 para dentro dessa estrutura de website. 3
Crie uma pasta template e mova todos os HTML para dentro. 4
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 http://dev.mysql.com/downloads/mirror.php?id=404191 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
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
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
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
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
Arraste o conecta pra dentro dessa pasta e corrija no index.jsp. Abra o index.html para abstrair o menu e o rodapé. 10
Apague tudo e cole o menu que colou volte ao index.html e coloque o include do menu. 11
Antes disso corrija o link do menu para que todas as paginas sejam JSP como mostra abaixo. 12
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
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
Retire tudo e coloque a variável noticias. 15
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
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
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