Net Beans Ap Comp JSP

Exemplo 2 - Aplicao com banco de dados usando JSP
Vamos fazer uma aplicao web completa no NetBeans.

A aplicao desenvolvida um sistema de notcias, no qual possvel realizar o cadastro de uma
determinada notcia, inserindo novas informaes e alterando as j existentes, alm de permitir a
excluso de um dado contedo. O sistema de notcias permite o gerenciamento das notcias
existentes e exibi-las ao usurio.
Para comear, abra o NetBeans. Essa a tela inicial:
Toda aplicao chamada de projeto. Portanto, vamos criar um projeto! Clique no menu Arquivo
Novo Projeto.
A seguinte tela surgir, apresentando as opes do projeto.
Nossa aplicao para a Web, portanto selecione Web na coluna da esquerda e, a seguir, Aplicao
Web na coluna da direita. Clique no boto Prximo. A seguinte tela surgir:
Como exemplo, vamos dar o nome de NoticiasJSP ao nosso projeto. Clique no boto Prximo. A
tela seguinte onde escolhemos o servidor web.
O padro o servidor Glassfish 2, mas ns utilizaremos o Tomcat. Escolha o Tomcat na lista e

clique no boto Prximo. A tela seguinte apresenta os frameworks disponveis.
No vamos utilizar nenhum framework, portanto clique no boto Finalizar. Aguarde enquanto o
NetBeans cria um novo projeto.
O NetBeans criou um projeto chamado tagsJSP, que uma aplicao web. Veja no lado direito da
IDE o esqueleto da nossa aplicao:
O NetBeans sempre cria uma pgina JSP chamada index.jsp, que ser chamada automaticamente
quando a aplicao for executada. Podemos alterar isso, mas no momento vamos deixar assim.
Como vamos conectar com banco de dados, preciso incluir no nosso projeto a biblioteca do
MySQL. Para isso, clique com o boto direito sobre a pasta Bibliotecas do projeto NoticiasJSP e
escolha a opo Adicionar biblioteca.
A tela seguinte mostra todas as bibliotecas disponveis no NetBeans. Procure pela biblioteca
MySQL JDBC Driver, selecione-a e clique em Adicionar biblioteca.
Pronto! A biblioteca do MySQL foi includa em nosso projeto, como possvel ver na figura a
seguir:
A nossa aplicao possui 5 arquivos JSP, portanto vamos cri-los.

1 arquivo JSP VisualizaNoticia.jsp
Clique em Arquivo Novo arquivo.
A seguinte tela ser aberta:
Escolha a opo Web na coluna da esquerda e JSP na coluna da direita e clique no boto Prximo.
A prxima tela contm o nome do novo arquivo e sua localizao:
Digite o nome do arquivo como VisualizaNoticia (sem a extenso .jsp) e clique em Finalizar.
O arquivo VisualizaNoticia.jsp foi criado com sucesso. Apague todo o contedo e digite o seguinte
cdigo:
<%@page contentType="text/html" pageEncoding="iso-8859-1"%>
<%@page import="java.sql.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Notícias JSP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>Visualizar Notícias</h1>
Notícias cadastradas:<br/><br/>
<%
try {
Class.forName("com.mysql.jdbc.Driver");
Connection
conn
=
DriverManager.getConnection("jdbc:mysql://localhost/bdnoticias", "root", "");
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM tbnoticias");
while (rs.next()) {
%>
<b>ID:</b> <%= rs.getString("id")%><br>
<b>Título:</b> <%= rs.getString("titulo")%><br>
<b>Data:</b> <%= rs.getString("data")%><br>
<b>Texto:</b> <%= rs.getString("texto")%><br>
<b>Autor:</b> <%= rs.getString("autor")%><br>
<br>
<%
}
%>
</body>
</html>
conn.close();
} catch (Exception e) {
// ocorreu um erro
}
2 arquivo JSP GerenciaNoticias.jsp

Escolha a opo Web na coluna da esquerda e Servlet na coluna da direita e clique no boto
Prximo. A prxima tela contm o nome do novo arquivo e sua localizao:
Digite o nome do arquivo como GerenciaNoticias (sem a extenso .jsp) e clique em Finalizar.
O arquivo GerenciaNoticias.jsp foi criado com sucesso. Apague todo o contedo e digite o
seguinte cdigo:
<html>
<head>
</head>
<body>
<h1>Gerenciar Notícias</h1>
Notícias cadastradas:<br/><br/>
<%
try {
Connection
conn
=
ResultSet rs = stmt.executeQuery("SELECT id, titulo FROM
tbnoticias");
%>
<table width="100%" border="1">
<%
while (rs.next()) {
%>
<tr>
<td><%= rs.getString("id")%></td>
<td><%= rs.getString("titulo")%></td>
<td><a href="AlteraNoticia.jsp?id=<%= rs.getString("id")
%>">Alterar</a></td>
<td><a href="ExcluiNoticia.jsp?id=<%= rs.getString("id")
%>">Excluir</a></td>
</tr>
<%
}
%>
</table>
<br/><a href="InsereNoticia.jsp">Clique aqui</a> para inserir uma nova
notícia.
<%
conn.close();
// ocorreu um erro
}
%>
</body>
</html>
3 arquivo JSP InsereNoticia.jsp

Digite o nome dao arquivo como InsereNoticia (sem a extenso .jsp) e clique em Finalizar.
O arquivo InsereNoticia.jsp foi criado com sucesso. Apague todo o contedo e digite o seguinte
cdigo:
<html>
<head>
</head>
<body>
<%
if (request.getMethod() != "POST") {
%>
<h1>Insere Notícia</h1>
<br/>
<form action="InsereNoticia.jsp" method="POST">
<p>Título: <input type="text" name="txttitulo" /></p>
<p>Data: <input type="text" name="txtdata" /></p>
<p>Texto: <textarea name="txttexto"></textarea></p>
<p>Autor: <input type="text" name="txtautor" /></p>
<p><input type="submit" value="Insere" name="btninsere" /></p>
</form>
<%
%>
} else {
<h1>Insere Notícia</h1>
<br/>
<%
try {
Connection
conn
int rs = stmt.executeUpdate("INSERT INTO tbnoticias(titulo,

data, texto, autor) VALUES('" + request.getParameter("txttitulo") + "', '" +
request.getParameter("txtdata") + "', '" + request.getParameter("txttexto") +
"', '" + request.getParameter("txtautor") + "');");
if (rs == 0) {
%>
Ocorreu um erro na inserção.<br/>
<%
%>
} else {
Notícia inserida com sucesso.<br/>

<%
%>
</body>
</html>
}
conn.close();
// ocorreu um erro
}
}
4 arquivo JSP AlteraNoticia.jsp

Digite o nome do arquivo como AlteraNoticia (sem a extenso .jsp) e clique em Finalizar.
O arquivo AlteraNoticia.jsp foi criado com sucesso. Apague todo o contedo e digite o seguinte
cdigo:
<html>
<head>
</head>
<body>
<%
%>
if (request.getMethod() != "POST") {
<h1>Altera Notícia</h1>
<br/>
<%
try {
Connection
conn
ResultSet rs = stmt.executeQuery("SELECT * FROM tbnoticias WHERE

id=" + request.getParameter("id"));
rs.next();
%>
<form action="AlteraNoticia.jsp" method="POST">");
<input type="hidden" name="id" value="<%= request.getParameter("id")
%>" >
<p>Título: <input type="text" name="txttitulo" value="<%=

rs.getString("titulo")%>" /></p>
<p>Data: <input type="text" name="txtdata" value="<%=
rs.getString("data")%>" /></p>
<p>Texto: <textarea name="txttexto"><%= rs.getString("texto")
%></textarea></p>
<p>Autor: <input type="text" name="txtautor" value="<%=
rs.getString("autor")%>" /></p>
<p><input type="submit" value="Altera" name="btnaltera" /></p>
</form>
<%
conn.close();
// tratar erro
}
} else {
%>
<h1>Altera Notícia</h1>
<br/>
<%
try {
Connection
conn
int rs = stmt.executeUpdate("UPDATE tbnoticias SET titulo='"

request.getParameter("txttitulo")
+
"',
data='"
request.getParameter("txtdata")
+
"',
texto='"
request.getParameter("txttexto")
+
"',
autor='"
request.getParameter("txtautor") + "' WHERE id=" + request.getParameter("id")
";");
+
+
+
+
+
if (rs == 0) {
%>
Ocorreu um erro na alteração.<br/>
<%
} else {
%>
Notícia alterada com sucesso.<br/>
<%
}
conn.close();
// trata erro
}
%>
</body>
</html>
5 arquivo JSP ExcluiNoticia.jsp

Digite o nome do arquivo como ExcluiNoticia (sem a extenso .jsp) e clique em Finalizar.
O arquivo ExcluiNoticia.jsp foi criado com sucesso. Apague todo o contedo e digite o seguinte
cdigo:
<html>
<head>
</head>
<body>
<h1>Exclui Notícia</h1>
<br/>
<%
try {
Connection
conn
=
int rs = stmt.executeUpdate("DELETE FROM tbnoticias WHERE id=" +
request.getParameter("id") + ";");
if (rs == 0) {
%>
Ocorreu um erro na exclusão.<br/>
<%
} else {
%>
Notícia excluída com sucesso.<br/>
<%
}
conn.close();
// tratar erro
}
%>
</body>
</html>
Vamos criar o arquivo index.html, que ser a pgina principal da nossa aplicao. Clique em
Arquivo Novo arquivo.
Escolha a opo HTML na coluna da direita e clique no boto Prximo. Apesar do NetBeans
possuir a opo XHTML, ns optamos por escolher o HTML porque o NetBeans coloca extenso
.xhtml para arquivos XHTML, o que foge ao padro adotado nessa disciplina. Assim, apesar do
arquivo possuir a extenso .html, ele ser XHTML. A prxima tela contm o nome do novo arquivo
e sua localizao:
Digite o nome do arquivo XHTML sem a extenso .html e clique em Finalizar.

O arquivo index.html foi criado com sucesso. Apague o contedo dele e digite o seguinte cdigo:
<html>
<head>
</head>
<body>
<h1>Notícias JSP</h1>
Escolha a opção abaixo:<br/>
<ul>
<li><a href="VisualizaNoticia.jsp">Visualizar notícias</a></li>
<li><a href="GerenciaNoticias.jsp">Gerenciar notícias</a></li>
</ul>
</body>
</html>
Pronto, nossa primeira aplicao web est quase pronta! Vamos alterar o arquivo principal de nossa
aplicao. No navegador de arquivos no NetBeans, abra a pasta WEB-INF e localize o arquivo
web.xml.
D um duplo-clique para edit-lo. A seguinte tela surgir:
Clique na aba Pginas. A seguinte tela surgir:
Clique no boto Procurar.
Selecione o arquivo index.html e clique em Selecione o arquivo. Clique no boto Salvar.
Falta criarmos o banco de dados para nossa aplicao poder conectar. Para isso, temos que abrir o
MySQL Command Line Client, clicando em Iniciar Programas MySQL MySQL
Server 5.1 MySQL Line Client. A seguinte tela surgir:
Como no definimos senha para nossa configurao do MySQL, simplesmente tecle ENTER. A
tela de prompt ser exibida:
Para criar o banco de dados da nossa aplicao web bdnoticias digite o seguinte comando no
terminal:
create database bdnoticias;
Agora, precisamos dizer ao MySQL qual banco iremos usar para os prximos comandos. Digite o
seguinte comando:
use bdnoticias;
Vamos criar a tabela de notcias tbnoticias que contm um campo identificador autoincremento, a data de postagem, o ttulo da notcia, o texto e o autor. Digite o seguinte comando no
terminal:
CREATE TABLE `bdnoticias`.`tbnoticias` (
ìd` int(10) unsigned NOT NULL auto_increment,
`data` datetime NOT NULL,
`titulo` varchar(100) NOT NULL,
`texto` text NOT NULL,
àutor` varchar(100) NOT NULL,
PRIMARY KEY (ìd`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Pronto! O banco est criado e com a tabela necessria para ser usada por nossa aplicao web!
Para sair do terminal do MySQL, digite:

quit;
Voltando ao NetBeans, clique no seguinte boto para rodar a aplicao web:
A aplicao web ser executada:

Tela inicial
Gerenciar notcias
Inserindo uma notcia
Gerenciar notcias
Visualizar notcias
Alterando notcia
Visualizando novamente a notcia
Veja que, ao contrrio do Tomcat original, o Tomcat do NetBeans roda na porta 8084 ao invs
da porta 8080. Isso feito propositalmente para evitar conflitos de portas.

Net Beans Ap Comp JSP

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Net Beans Ap Comp JSP

Enviado por

Direitos autorais:

Formatos disponíveis

Exemplo 2 - Aplicao com banco de dados usando JSP

Vamos fazer uma aplicao web completa no NetBeans.

A seguinte tela surgir, apresentando as opes do projeto.

O padro o servidor Glassfish 2, mas ns utilizaremos o Tomcat. Escolha o Tomcat na lista e

A nossa aplicao possui 5 arquivos JSP, portanto vamos cri-los.

A seguinte tela ser aberta:

2 arquivo JSP GerenciaNoticias.jsp

A seguinte tela ser aberta:

3 arquivo JSP InsereNoticia.jsp

A seguinte tela ser aberta:

int rs = stmt.executeUpdate("INSERT INTO tbnoticias(titulo,

Not&iacute;cia inserida com sucesso.<br/>

4 arquivo JSP AlteraNoticia.jsp

A seguinte tela ser aberta:

ResultSet rs = stmt.executeQuery("SELECT * FROM tbnoticias WHERE

<p>T&iacute;tulo: <input type="text" name="txttitulo" value="<%=

int rs = stmt.executeUpdate("UPDATE tbnoticias SET titulo='"

5 arquivo JSP ExcluiNoticia.jsp

A seguinte tela ser aberta:

A seguinte tela ser aberta:

Digite o nome do arquivo XHTML sem a extenso .html e clique em Finalizar.

D um duplo-clique para edit-lo. A seguinte tela surgir:

Clique na aba Pginas. A seguinte tela surgir:

Clique no boto Procurar.

Selecione o arquivo index.html e clique em Selecione o arquivo. Clique no boto Salvar.

Para sair do terminal do MySQL, digite:

Voltando ao NetBeans, clique no seguinte boto para rodar a aplicao web:

A aplicao web ser executada:

Inserindo uma notcia

Visualizando novamente a notcia

Você também pode gostar

Notícia inserida com sucesso.<br/>

<p>Título: <input type="text" name="txttitulo" value="<%=