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; Class.forName("com.mysql.jdbc.Driver").newInstance(); 6
connection = DriverManager.getConnection(connectionURL, User, Pass); statement = connection.createstatement(); %> 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
4. Lista News da HOME Abra o index.html em templates e corte todo o código abaixo 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. String noticias; noticias = "<h2>notícias</h2>"; noticias += "<ul>"; rs = statement.executequery("select * FROM noticia order by not_data DESC"); 17
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>"; Concorda que o script acima é parecido para a página de notícias? Então abra agora a página de notícias.html e tire todo o código e coloque a variável noticias, e vamos produzir o script para página de notícias. Veja o script. String noticias; if( request.getparameter("id")!=null ) { noticias = request.getparameter("id"); rs = statement.executequery("select * FROM noticia where not_id='"+request.getparameter("id")+"'"); rs.next(); noticias = "<h2>"+rs.getstring("not_titulo")+"</h2>"; noticias += "<img src=\"img/noticia/"+ rs.getstring("not_img")+ "\" class=\"foto\" />" + rs.getstring("not_texto"); 18
}else{ noticias = "<h2>notícias</h2>"; noticias += "<ul>"; rs = statement.executequery("select * FROM noticia order by not_data DESC"); while (rs.next()) { noticias += "<li><img src=\"img/noticia/" + rs.getstring("not_img")+ "\" class=\"foto\" /><a href=\"noticias.jsp?id=" + rs.getint("not_id")+ "\">" + rs.getstring("not_titulo")+ "</a></li>"; } rs.close(); } Na primeira parte do script criamos a variável do tipo string noticias. E agora vem uma explicação muito importante. Repare que temos um script (if( request.getparameter("id")!=null ) { ) que testará se uma variável do tipo get, recuperada pela URL com o nome ID existe e é diferente de nula. Se ela existir o script para em cima e exibe o detalhe da notícia, caso ela não exista ele vai para a instrução abaixo que irá listar as notícias. Veja agora as telas de ambas partes do script. SERM VARIAVEL GET ID COM VARIAVEL GET ID 19
PÁGINA COM DETALHES DA NOTICIA. 20