Este TCC abordará sobre o site que foi desenvolvido para utilização da escola Etec Profº Luiz Pires Barbosa. O site tem como objetivo a informatização da escola, facilitando a administração da mesma. Tem como objetivo a interação dos professores e alunos fora das salas de aulas. Os alunos terão mais facilidade para ver notas, suas frequências e também poderão ter acesso aos arquivos das aulas da em sala de aulas. Os professores poderão enviar as notas dos alunos e disponibilizar os arquivos de suas respectivas aulas.

1. GABRIEL GREGORIO
JEFFERSON SIMÃO GONÇALVES
REGIANE APARECIDA NUNES SÁ
SITE BOLETIM ESCOLAR
UMA PROPOSTA ONLINE NA ETEC LUIZ PIRES BARBOSA
Cândido Mota/SP

2. 2
Jun/2010

3. 3
GABRIEL GREGORIO
JEFFERSON SIMÃO GONÇALVES
REGIANE APARECIDA NUNES SÁ
SITE BOLETIM ESCOLAR
UMA PROPOSTA ONLINE NA ETEC LUIZ PIRES BARBOSA
Cândido Mota/SP
Jun/2010
TCC elaborado na ETEC
Profº. Luiz Pires Barbosa e
supervisionado pela Profº.
Andréia de Cássia no Curso
Técnico de Informática.

4. 4
Cândido Mota, ___ de novembro de _______.
Membros da Banca Examinadora:
1ºMembro:___________________________________________________
Assinatura:________________________
2ºMembro:___________________________________________________
Assinatura:________________________
3ºMembro:___________________________________________________
Assinatura:________________________
Nota final: _________

5. 5
Dedicamos este TCC para os professores da
ETEC Profº Luiz Pires Barbosa que muito nos
incentivaram na conclusão deste trabalho.
Dedicamos também aos nossos pais que
sempre estiveram aos nossos lados nos
apoiando.
Dedicamos também especialmente este TCC
para os professores, Alessandro, e a Andréia
de Cássia que muito nos ajudaram.
E ao Claudinei de Oliveira dos Santos, que
vem dês do inicio apoiando e nos
incentivando no trabalho de conclusão de
curso.

6. 6
Quando uma criatura humana desperta para
um grande sonho e sobre ele lança toda força
de sua alma, todo o universo conspira a seu
favor.
(Goethe)

7. 7
Lista de Figuras
Figura 1 - Requisição no Servidor.........................................................................................................11
Figura 2 – Arquitetura JSF.....................................................................................................................12
Figura 3 - Tela de Login.........................................................................................................................15
Figura 4 - Tela Principal do Administrador ...........................................................................................16
Figura 5 - Cadastro de Aluno................................................................................................................17
Figura 6 - Tela de Cadastro De Funcionário..........................................................................................18
Figura 7 - Tela de Cadastro de Professor..............................................................................................19
Figura 8 - Tela de Listagem de Series....................................................................................................20
Figura 9 - Tela De Filtagem de Series....................................................................................................21

8. 8
Resumo
Este TCC abordará sobre o site que foi desenvolvido para utilização da escola Etec Profº
Luiz Pires Barbosa. O site tem como objetivo a informatização da escola, facilitando a
administração da mesma. Tem como objetivo a interação dos professores e alunos fora das
salas de aulas.
Os alunos terão mais facilidade para ver notas, suas frequências e também poderão ter
acesso aos arquivos das aulas da em sala de aulas.
Os professores poderão enviar as notas dos alunos e disponibilizar os arquivos de suas
respectivas aulas.
Palavras chaves: Site, ETEC Professor Luiz Pires Barbosa, Desenvolvimento do site,
consulta de dados.

9. 9
Sumário
INTRODUÇÃO.......................................................................................................................................10
LINGUAGENS UTILIZADAS.....................................................................................................................11
DESENVOLVIMENTO.............................................................................................................................15
CONCLUSÃO.........................................................................................................................................22
REFERÊNCIAS........................................................................................................................................23
GLOSSÁRIO...........................................................................................................................................24

10. 10
INTRODUÇÃO
Hoje em dia, com o grande avanço da tecnologia, vários tipos de produtos,
estabelecimentos, serviços, etc., são divulgados na internet, proporcionando vários
benefícios. As páginas de web, comumente chamados de sites, são as ferramentas que
possibilitam isto.
Este TCC tratará do desenvolvimento de um site para a ETEC (escola técnica) Prof°
Luis Pires Barbosa, onde se verificou a necessidade dele.
O site tem como objetivo a interação da escola com seus alunos e pais, através da
visualização de notas, freqüências e consultas de arquivos das aulas. Foi analisada a
situação atual da escola e notaram-se algumas dificuldades na comunicação entre as
atividades da escola (palestras, reuniões e eventos) e os pais e alunos, disponibilidade de
material didático aos alunos, demora para notificar os alunos e pais sobre as notas e
freqüência e também falta de divulgação da instituição perante a comunidade. Sendo assim
o site fará uma melhora nessa comunicação entre a escola, os pais e alunos.
Basicamente o site se dividirá em três tipos de acessos: administrador, professor e
aluno. O administrador será o responsável por cadastrar, alterar, consultar e excluir dados,
ou seja, fará a atualização do site.
Para que se haja um controle, o administrador cadastrará no site os alunos da escola,
que somente através desse cadastro poderão acessá-lo e consultar seus dados. Também
cadastrará professores que poderão consultar alunos, disponibilizar e alterar notas.

11. 11
LINGUAGENS UTILIZADAS
No desenvolvimento foi utilizadas as seguintes linguagem: JSP e java.
1.1 JSP
1.1.1 O que é JSP?
JSP é uma combinação de HTML e Java dentro de uma mesma página.
Através de Tags especiais podemos introduzir código Java em qualquer parte da página, e
todo o código, fora destas tags especiais, é HTML puro.
1.1.2 O que pode ser feito?
Basicamente, qualquer coisa pode ser feita com JSP desde coletar dados de
formulários até gerar páginas dinâmicas oriundas de fontes de dados quaisquer.
1.1.3 Diagrama
Uma requisição para o JSP funciona assim:
1. O Browser faz uma requisição ao Servidor Web;
2. O Servidor Web detecta que trata-se de uma página JSP e encaminha a requisição a
Engine JSP;
3. A engine JSP faz os processamentos necessários, inclusive acessos a bancos de dados
e outros recursos e devolve o HTML para o Servidor Web;
4. O Servidor Web devolve O HTML ao Browser.
No diagrama abaixo você visualiza estas etapas:
Figura 1 - Requisição no Servidor

12. 12
1.2 JSF
JSF é uma tecnologia que incorpora padrões de um framework MVC para o
desenvolvimento de paginas WEB. Por basear-se no padrão de projeto MVC, uma de suas
melhores vantagens é a clara separação entre a visualização e regras de negócio e modelo.
No JSF, o controle é composto por um servlet denominado FacesServlet, por arquivos
de configuração e por um conjunto de manipuladores de ações e observadores de eventos.
O FacesServlet é responsável por receber requisições da WEB, redirecioná-las para o
modelo e então remeter uma resposta. Os arquivos de configuração são responsáveis por
realizar associações e mapeamentos de ações e pela definição de regras de navegação. Os
manipuladores de eventos são responsáveis por receber os dados vindos da camada de
visualização, acessar o modelo, e então devolver o resultado para o FacesServlet.
O JSF é atualmente considerado pela comunidade Java como a última palavra em
termos de desenvolvimento de aplicações Web utilizando Java, resultado da experiência e
maturidade adquiridas com o JSP/Servlet
A Figura (2) mostra a arquitetura do JavaServer Faces baseada no modelo MVC.
Figura 2 – Arquitetura JSF.
Com esta pequena e resumida definição podemos notar algumas das principais
características e facilidade que o JSF proporciona a quem o utiliza são diversas, com esta
definição fica certo que JSF é mais que um framework para desenvolver aplicações web de
forma ágil também se aplica especificações da J2EE.

13. 13
Mais que um framework para desenvolver aplicações web de forma ágil, JSF foi
incorporado ao especificação J2EE.
1.3 Por que usar JSP se já existe PHP, ASP, etc.?
Existem várias linguagens usadas para criar aplicações web. Entre elas ASP, PHP,
ColdFusion e Perl. Por que usar JSP então?
• JSP usa Java
Java é uma das linguagens mais populares atualmente e é interpretada,
portanto o código escrito em uma arquitetura pode ser portado para qualquer outra.
• JSP é parte do pacote J2EE
J2EE é um dos modelos mais usados para construir aplicações de grande porte, e é
suportado por várias gigantes da computação como IBM, Oracle, Sun, etc.
• Programação em rede é inerente a Java
O suporte inerente de Java para a área de redes faz dela uma ótima linguagem para a
Internet.
• JSP x ASP
Uma das diferenças que pode ser fundamental para a escolha entre estas duas
tecnologias é que ASP é da Microsoft e só roda em ambiente Windows, e também todo
software necessário é pago. JSP, feito pela Sun, roda em qualquer plataforma que tenha a
máquina virtual de Java, e tem vários softwares gratuitos para disponibilizar a aplicação
(GlassFish por exemplo).
1.4 Banco de Dados
JDBC é a interface padrão usada pelo Java para acessar bancos de dados
relacionais.
Cada fabricante de bancos de dados fornece um ou mais drivers JDBC que devem ser
instalados no servidor para que o Java possa fazer o respectivo acesso. Um driver JDBC

14. 14
implementa todas interfaces do pacote Java.sql, fornecendo assim, todo código necessário
para acessar e manipular os dados.
1.4.1 MySQL
O MySQL é sistema gerenciador de banco de dados utilizado para acessar a base de
que estará disponível no site.
Para acessar bases de dados MySQL você deve baixar o driver JDBC oficial para
MySQL e instalá-lo.
Os comandos descritos a seguir foram utilizados para que o usuário pudesse se
conectar à base de dados ,pudesse consultar informações por último manipular informações
contidas nela.
• Conectando
Class.forName("com.mysql.jdbc.Driver").newInstance();
java.sql.Connection conn;
conn = DriverManager.getConnection(
"jdbc:mysql://localhost/test?user=blah&password=blah");
• Selecionando dados
String sql = “select * from clientes”;
Statement stmt = conn.createStatement();
ResultSet rset = stmt.executeQuery(sql);
• Inserindo/Atualizando/Apagando
String sql = “delete from clientes”;
Statement stmt = conn.createStatement();
int linhas = stmt.executeUpdate(sql);

15. 15
DESENVOLVIMENTO
Este Capítulo abordará o desenvolvimento do WebSite como o design e codificação
das páginas.
1.5 Telas de Login
Foi desenvolvida uma única tela de login para o site que direcionará o usuário para a
área restrita de acesso do mesmo. Para ter acesso à área restrita o usuário deve ter
permissão dada pelo administrador do sistema no momento do cadastro.
Para acessar o site o usuário deverá digitar o login no campo usuário e a senha no
campo senha e clicar no botão entrar. Se o status do usuário estiver inativo o mesmo não
poderá acessar o site.
Figura 3 - Tela de Login

16. 16
1.6 Tela Principal do administrador
Nesta tela o administrador tem o acesso a todos os recursos do site.
O administrador tem permissão especial porque não é qualquer usuário que tem
acesso a esta área restrita. Ele pode fazer alterações, cadastros e consultas no banco de
dados.
Figura 4 - Tela Principal do Administrador
1.7 Telas de Cadastros
As informações dos cadastros abaixo serão armazenadas no banco de dados utilizado
para o desenvolvimento do sistema em um SGBD MySQL, através de uma classe de
conexão feita em Java demonstrada no apêndice A.

17. 17
1.7.1 Cadastro de Aluno
Figura 5 - Cadastro de Aluno
Na tela de cadastro de Aluno o administrador poderá cadastrar os dados pessoais dos
alunos nos campos mostrado na imagem acima. Além da tela de cadastro o sistema terá
uma tela em que será matriculado o aluno no curso que ele escolheu fazer. O administrador
para matricular, precisará do Nome do Curso que carregará automaticamente as turmas
pertencentes ao curso, depois as séries da turma, por exemplo: módulo 1, módulo 2....
1.7.2 Cadastro de funcionário

18. 18
Figura 6 - Tela de Cadastro De Funcionário
Na tela de cadastro de Funcionário o administrador poderá cadastrar os dados nos
campos mostrado na imagem acima. Os dados a serem cadastrados são: Dados pessoais e
função. O Cadastro de funcionário servirá para ter o controle, e mais acessibilidade na
administração da escola.

19. 19
1.7.3 Cadastro de professor
Figura 7 - Tela de Cadastro de Professor
Na tela de cadastro de Professor o administrador poderá cadastrar os dados nos
campos mostrado na imagem acima. Os dados a serem cadastrados são: Dados pessoais e
função.
No sistema conterá o coordenador do curso que precisará do professor e o curso para
ser cadastrado. E também cadastrar o professor na turma disciplina que será utilizado para
entregar as nota referentes aos seus alunos da turma disciplina.

20. 20
1.7.4 Telas de alterações de cadastro
No sistema tem os servlets que fazem todos os processos de busca no banco de
dados que são enviados para a página de cadastro.
Na página de cadastro é montado todos os dados que servlet enviou para página.
Depois de carregar as informações o administrador poderá fazer alterações nos
dados.
1.7.5 Telas de Listagens
Na tela de listagem de aluno o administrador poderá filtrar os alunos, colocando o
nome do aluno na caixa de filtrar Registro, como mostra na imagem acima. O filtro de
listagem poderá filtrar os registros por nome.
Figura 8 - Tela de Listagem de Series
Na tela de listagem de series e todos os registros da tabela Serie.
O administrador poderá filtrar os registros digitando no campo filtrar registros. Por
exemplo:

21. 21
Figura 9 - Tela De Filtagem de Series
OBS: O campo Filtrar Registros poderá filtrar todos os registros da tabela
independente das colunas.

22. 22
CONCLUSÃO
O site proposto para ser desenvolvido como objeto de estudo do TCC não pode ser
totalmente implementado até a data de entrega do trabalho. Porém, há possibilidade para
que possa ser implementado posteriormente. A área restrita para o administrador não está
com a página Matricular Aluno construída. As demais áreas restritas: Alunos e Professores
ainda não foram implementadas.
No desenvolvimento do trabalho de conclusão de curso foi possível aprender a utilizar
novas linguagens de programação, e buscar alternativas para o desenvolvimento de um site
que é uma ferramenta indispensável nos dias de hoje para aqueles que desejam se
destacar no mercado.
O site desenvolvido além de colocar a ETEC Professor Luis Pires Barbosa disponível
e acessível para toda a comunidade local, também colocará a ETEC em evidência para
seus alunos e professores poderem desfrutar de recursos que antes eram penosos como
consultar notas e freqüências, fazer alterações nos dados cadastrais, etc.

23. 23
REFERÊNCIAS
Arquivos de Códigos.net – Disponível em:
http://www.arquivodecodigos.net/arquivo/tutoriais/jsp/desenvolvendo jsp 1 1.php. Acessado
em 14/06/2010
FILHO, Rafle Della Croce; RIBEIRO, Carlos Eduardo. Habilitação Técnica em Informática 4 -
Programação de computadores.
jQuery plugin: Tablesorter 2.0 – Disponível em: http://tablesorter.com/docs/ - acessado em
22/05/2010
PIVA, Gustavo Dibbern; OLIVEIRA, Wilson José. Habilitação Técnica em Informática 3 -
Análise e gerenciamento de dados.
Portal GUJ - Disponível em:http://www.guj.com.br – Acessado em 15/03/2010

24. 24
GLOSSÁRIO
CSS - Trata-se de um padrão de formatação para páginas web que vai além das
limitações impostas pelo html. O Cascading Style Sheet permite uma versatilidade maior na
programação do layout de páginas web sem aumentar o seu tamanho em Kb, pois oferece
várias possibilidades que antes só eram conseguidas com a utilização de gifs e jpgs.
DWR - Biblioteca Java e Open Source para construção de web-sites com Ajax.
Dividido em dois componentes: Java Servlet que processa requests e devolve a resposta
pro browser. JavaScript que envia requests e atualiza a página dinâmicamente. Gera
dinamicamente classes JavaScript baseado em classes Java. Gera dinamicamente uma
class AjaxService pra tratar código server side, Provê a DWRUtil.js com funções para tratar
as respostas.
HTML - A Linguagem HTML (Hypertext Markup Language – Linguagem de marcação
de hipertexto) foi utilizada no desenvolvimento do site estruturando as páginas.
Java script - JavaScript é uma linguagem que permite injetar lógica em páginas
escritas em HTML .As páginas HTML podem ser escritas utilizando-se editores de texto,
como o NotePad, Write, etc. Porém, existem editores próprios para gerar HTML, tais como
HotDog e (mais recomendado) Microsoft FrontPage.
MVC - O modelo de três camadas físicas ( 3-tier ) divide um aplicativo de modo que a
lógica de negócio resida no meio das três camadas físicas. Isto é chamado de camada física
intermediária ou camada física de negócios. A maior parte do código escrito reside na
camada de apresentação e de negócio. A arquitetura MVC - (Modelo Visualização
Controle) fornece uma maneira de dividir a funcionalidade envolvida na manutenção e
apresentação dos dados de uma aplicação. A arquitetura MVC não é nova e foi
originalmente desenvolvida para mapear as tarefas tradicionais de entrada , processamento
e saída para o modelo de interação com o usuário. Usando o padrão MVC fica fácil mapear
esses conceitos no domínio de aplicações Web multicamadas.
NetBeans e DreamWeaver - Para o desenvolvimento do site foi utilizado a ferramenta
NetBeans da empresa Sun Microsystems e DreamWeaver da empresa Adobe que
auxiliaram em todo o desenvolvimento como por exemplo: a comunicação com o banco de
dados,a criação das páginas,e toda a parte de códigos.
Java - Java é uma linguagem de programação orientada a objetos desenvolvida pela
Sun Micro systems. Modelada depois de C++, a linguagem Java foi projetada para ser
pequena simples e portável a todas as plataformas e sistemas operacionais, tanto o código
fonte como os binários. Esta portabilidade é obtida pelo fato da linguagem ser interpretada,
ou seja, o compilador gera um código independente de máquina chamado byte-code. No
momento da execução este byte-code é interpretado por uma máquina virtual instalado na
máquina. Para portar Java para uma arquitetura hadware/s específica, basta instalar a
máquina virtual (interpretador). Além de ser integrada à Internet, Java também é uma
excelente linguagem para desenvolvimento de aplicações em geral. Dá suporte ao
desenvolvimento de software em larga escala.

25. 25
J2EE - J2EE significa Java 2 Enterprise Edition. O termo Java 2 passou a ser usado a
partir do lançamento do Java 1.2, tido como um avanço considerável em relação às versões
anteriores. Esse termo é usado até hoje para referenciar as edições J2SE, J2EE e J2ME,
porém com a chegada do Java 1.5 (ou simplesmente, Java 5.0), esse “dois” está sendo
abandonado. Assim, a partir da versão 1.5, chamamos as edições simplesmente de JSE,
JEE e JME.
Mais precisamente, o J2EE provê uma série de serviços, que juntos estabelecem uma
infra-estrutura que visa facilitar o desenvolvimento e manutenção de aplicações distribuídas,
ou seja, aquelas aplicações que estão “espalhadas” pela rede (por exemplo uma aplicação
web, onde o browser contém a interface da aplicação e o servidor web, a lógica de
funcionamento).
Ou seja, se o que você quer é fazer uma agenda de telefones ou uma calculadora,
você provavelmente não necessita dos serviços J2EE. Mais: provavelmente você não
necessitará utilizar todos os recursos do J2EE para desenvolver sua aplicação, e de fato
você não é obrigado a isso.
Ajax - AJAX (acrônimo em língua inglesa de Asyncronous Javascript And XML) é
baseado em codigos Javascript e XML para tornar o navegador mais dinâmico com o
usuário, utilizando-se de solicitações assíncronas de informações. AJAX não é somente um
novo modelo de desenvolvimento, é também uma iniciativa na construção de aplicações
web mais dinâmicas e criativas. AJAX não é uma tecnologia, são várias tecnologias
trabalhando junta, cada uma fazendo sua parte, oferecendo novas funcionalidades.
AJAX incorpora em seu modelo:
• Apresentação baseada em padrões, usando XHTML e CSS;
• Exposição e interação dinâmica usando o DOM;
• Intercâmbio e manipulação de dados usando XML e XSLT;
• Recuperação assíncrona de dados usando o objeto XMLHttpRequest;
• Javascript unindo todas elas em conjunto.
O modelo clássico de aplicação web trabalha assim: A maioria das ações do usuário
na interface dispara uma solicitação HTTP para o servidor web. O servidor processa algo e
recupera dados, conversando com vários sistemas,até mesmo os de codigos legados e
então retorna uma página HTML para o cliente.
Esta aproximação possui muito dos sentidos técnicos, mas não faz tudo que um
usuário experiente poderia fazer. Enquanto o servidor está fazendo seu trabalho, o que o
usuário estará fazendo? O que é certo, esperando o resultado de uma determinada ação.
A maior vantagem das aplicações AJAX é que elas rodam no próprio navegador web.

26. 26
Então, para estar hábil a executar aplicações AJAX, bastar possuir algum dos
navegadores modernos, ou seja, lançados após 2001. São eles: Mozilla Firefox, Internet
Explorer 5+,Opera, Konqueror e Safari.