UNIVERSIDADE ESTADUAL DO MARANHO

CURSO: TCNICO EM INFORMTICA

DISCIPLINA: PRTICA PROFISSIONAL II
POLO: CETECMA-SLZ

Relatrio Tcnico
Prtica Profissional II

AUTOR: GEORGE VAGNER SILVA DE SOUZA

SO LUIS
2014

AUTOR: GEORGE VAGNER SILVA DE SOUZA

RELATRIO DE PRTICA PROFISSIONAL II

Focado no desenvolvimento e obteno de nota
da disciplina Prtica Profissional II, realizada
durante o mdulo IV do curso tcnico.

So Lus
2014
2

SUMRIO
Introduo..........................................................................................................................................4
Proposta da Prtica.............................................................................................................................5
Objetivos ........................................................................................................................................6
Ferramentas Utilizadas........................................................................................................................6
Projeto Prtico.....................................................................................................................................7
Concluses.........................................................................................................................................14
Referncias.........................................................................................................................................15

INTRODUO

Nessa prtica so apresentados os passos de criao de uma pgina web e posteriormente a sua
associao a um banco de dados no MYSQL, que foi selecionado como nossa ferramenta por
utilizar a linguagem SQL que um grande padro de banco de dados, devido a sua simplicidade e
facilidade de uso, proporcionando um rpido aprendizado para os iniciantes nas linguagens de
bancos de dados.
A pgina desenvolvida bem simples, pois sua funo apenas apresentar de forma direta,
resultados para a proposta da Prtica Profissional II.

PROPOSTA DA PRTICA
A proposta inicial da Atividade 1 da Prtica Profissional II apresentada a seguir:
[1] Caro estudante, nesta atividade voc dever desenvolver uma pgina dinmica integrada a um
banco de dados para suporte on-line aos usurios do sistema SELEO MUSICAL, contendo:

Manual de utilizao do usurio do SISTEMA;

Cartilha (PROCEDIMENTOS) de segurana da informao;

E um formulrio que permita ao usurio do sistema enviar dvidas e sugestes a equipe

desenvolvedora;
Compreende-se que um sistema de software definido no somente pela implementao de rotinas
que ao serem executadas determinam um resultado, mas, tambm, compreende a documentao
necessria para manuse-lo;
Neste contexto, a parte final do projeto SELEO MUSICAL compreender questes de suporte ao
usurio; questes de interface, fundamentos e programao para a web. Procedimentos e tica no
uso de sistemas sero abordados. Voc dever integrar uma pgina web a um banco de dados
MySQL, alm de desenvolver um relatrio que expresse as etapas de projeto MDULO III e
MDULO IV.
Porm, assim como negociado com o tutor a distncia, por recomendao do tutor presencial, foi
feita uma adaptao na proposta, devido o fator de eu ter adquirido dispensa da Prtica Profissional
I que serviria como base para a atividade dessa segunda prtica. Dessa forma foi apresentada a
seguinte proposta, como alternativa proposta inicial:
Irei integrar uma pgina web a um banco de dados MySQL, alm de desenvolver um relatrio que
expresse as etapas de projeto do MDULO IV.
Ou seja, irei criar um site, hospeda-lo em um servidor LOCAL(meu prprio computador, atravs do
WAMPSERVER) e irei integr-lo a um banco de dados atravs de uma tabela armazenada no banco
de dados e exibida no site.
Dessa forma se torna possvel desenvolver uma atividade altamente condizente com afazeres
cotidianos de um profissional de TI do setor de programao web.

[1]Texto extrado da pgina http://ead.uemanet.uema.br/mod/assignment/view.php?id=16299 no

ambiente virtual de aprendizagem.
5

OBJETIVOS

Adquirir e ou aperfeioar as habilidades de programao web.

Adquirir e ou aperfeioar as habilidades de operao com bancos de dados.
Apresentar solues para problemas cotidianos de associao de bancos de dados e
pginas web.
Desenvolver atividades referentes ao campo de atuao de um profissional de TI.
Adquirir as habilidades prticas do campo da informtica.

FERRAMENTAS UTILIZADAS

WampServer verso 2.5.

MYSQL Workbench verso 5.2 CE
Notepad++ verso 6.6.8
Navegador Google Chrome verso 37.0.2062.124 m
WEBSITE X5 Professional verso 10

PROJETO PRTICO

PRIMEIRA ETAPA
A primeira etapa de desenvolvimento dessa prtica, foi elaborar um plano para o site a ser criado,
esse plano foi desenvolvido em forma de rascunho procurando levantar os objetivos do site e
estruturar as pginas linkacadas, esse passo foi fundamental para dar o pontap inicial do site,
porm, torna-se dispensvel nas fases posteriores.
ESTRUTURA E CORPO DO SITE
Esse site foi desenvolvido para apresentar de forma prtica as minhas capacidades, adquiridas no
decorrer do curso, sobre programao web. Assim, ele tem uma estrutura que procura ir direto ao
ponto nos objetivos dados pela proposta, no entanto, h tambm uma preocupao em tornar o site
um ambiente agradvel para os navegantes, assim preocupa-se com a esttica de cada pgina e
procura-se manter o padro entre as mesmas.
Foram adicionadas cores diferenciais e imagens nas pginas, para tornar o ambiente visualmente
agradvel. Foram criados tambm menus com cores diferenciais para mostrar a pgina atualmente
selecionada no menu que fixo no topo da pgina.
Para se atingir o designer final da pgina, o cdigo HTML foi trabalhado no software WEBSITE
X5 Professional 10, onde foram feitas as formataes da pgina, pois esse seria um trabalho braal
desnecessrio em tal projeto.
O site conta com quatro pginas, distribudas da seguinte forma:

Pgina Inicial_ que trs uma introduo ao site, apresentando os objetivos e a proposta da
prtica.

Sistema de Seleo Musical_ que explica o motivo da alterao da proposta da prtica.

Tcnico em informtica_ que apresenta uma descrio da profisso de tcnico em

informtica e apresenta campos para cadastrar tcnicos no sistema, que justamente a
conexo entre site e banco de dados.

Contato_ que alm de apresentar uma breve descrio do autor, traz tambm, assim como
solicitado na proposta inicial da prtica, um espao para o navegante deixar seus comentrio
e contatar o administrador do site. Nesse espao apresentada a segunda tabela do banco de
dados, onde ira armazenar a sugesto do visitante.

O site conta ainda com um cone que exibido ao lado do nome da pgina na parte superior do
navegador.
Vejamos a seguir imagens das pginas do site.

PAGINA INICIAL

Essa primeira imagem mostra a pgina inicial que apresenta a proposta do projeto.
Podemos observar que o endereo para acessa-la localhost/projeto_completo/index.html, que
significa que a pagina est hospedada em um servidor local, atravs do software wampserver, que
pode ser visto rodando na imagem abaixo.

SERVIDOR WAMPSERVER ONLINE

Este servidor, alm de proporcionar o armazenamento do site, coloca online tambm o mysql, como
pode ser visto na imagem na parte POWERED BY AFTER WAY.
8

PGINA SISTEMA DE SELEO

Essa pgina a mais simples e serve apenas para exibir um texto, alertando o corretor do projeto de
que a proposta adotada tem diferenciais em relao a proposta inicial da prtica, segue abaixo a
transcrio do texto.

Sistema de Seleo Musical

OBSERVAO PARA O TUTOR RESPIONSVEL PELA CORREO DESTA TAREFA

O profissional que tem como funo avaliar minha atividade prtica profissional II, deve levar em
considerao que eu obtive o aproveitamento da prtica I, atravs de estgio externo, logo meu trabalho
procura fazer o solicitado na prtica II, porem desconsiderando a prtica I, logo no trabalharei com o
"desconhecido" sistema de seleo musical. Dessa forma, procuro desenvolver um site, que contemple os
contedos exigidos, mas de uma forma alternativa, apresentando vrios outros recursos da programao
web.

PGINA TCNICO EM INFORMTICA

J na pgina TECNICO EM INFORMATICA, foram apresentados um texto, descrevendo a

profisso de TI e logo abaixo foi apresentado um formulrio para cadastrar tcnicos no sistema,
contendo os campos, nome, email e telefone

PGINA CONTATO

Nesta ultima pgina do site, apresentado uma rpida descrio do autor, junto com a imagem do
mesmo, logo em seguida apresentada a opo de o navegante enviar uma sugesto.
Essa sugesto ser enviada para o banco de dados e alocada na tabela SUGESTAO.
BANCO DE DADOS
O banco de dados utilizado foi o MySQL, onde foi criado o banco chamado PROJETO e duas
tabelas chamadas PROFISSIONAL e SUGESTAO, que seguem a seguinte destinao:
Tabela PROFISSIONAL_ essa tabela do banco de dados esta destinada a armazenar os dados
cadastrais de tcnicos em informtica, atravs da pgina TCNICO EM INFORMTICA.
Tabela SUGESTAO_ essa tabela do banco de dados esta destinada a armazenar as sugestes dos
visitantes, atravs da pgina CONTATO.
Na imagem abaixo podemos olhar o banco de dados sendo acessado atravs do phpMyAdmin que
a pgina na qual utilizamos o wapserver.

10

BANCO DE DADOS PROJETO

Nessa imagem podemos visualizar o banco de dados chamado PROJETO que contem as tabelas,
PROFISSIONAL e SUGESTAO.
Na imagem seguinte podemos ver a estrutura da tabela profissional, que contem os campos Id, para
cadastrar automaticamente o ndice de cada novo profissional cadastrado, o campo nome, o campo
email e o campo telefone.

TABELA PROFISSIONAL

Na imagem seguinte podemos ver a estrutura da tabela sugestao, que contem os campos Id, para
cadastrar automaticamente o ndice de cada nova sugesto cadastrada, o campo sugesto e o campo
email.

TABELA SUGESTAO

Nas tabelas acima podemos observar que que os campos ID so as chaves primrias e so do tipo
int e auto incremento, para que eles criem um numero em sequncia para cada novo cadastro.

11

O link entre os campos na pgina do site e as tabelas do banco de dados foram feitas atravs do
software Website X5 e seguem os seguintes passos:
A disponibilizao do banco de dados para o projeto do site, que pode ser visualizada na imagem a
seguir, onde so cadastradas as informaes do banco e conexo estabelecida.

CONEXO COM O BD

O passo seguinte, consiste em fazer a conexo de cada campo do site sua respectiva tabela no
banco de dados e pode ser visualizada a seguir.

CONEXAO DA TABELA PROFISSIONAL

12

Nesta imagem a tabela profissional est sendo conectada aos campos de cadastro de tcnicos,
atravs da conexo criada no passo anterior. Estou ocultando a conexo da tabela sugesto, pois ela
feita do mesmo modo, apenas mudando o nome da tabela de profissional para sugesto.

*OBS: O arquivo foi enviado em formato zipado junto aos cdigos em HTML, que se apresentam
no arquivo .txt.

13

CONCLUSO
Durante o desenvolvimento desse projeto foi possvel conhecer novas ferramentas e assimilar novos
conhecimentos, assim como, foi possvel tambm, melhorar as habilidades j adquiridas em outras
disciplinas. Essa prtica foi importante tambm para aprender a fazer a associao entre contedos
de mais de uma disciplina, resultando em um projeto muito interessante e de aplicao prtica muito
comum para os profissionais de TI.
Assim, de acordo com os objetivos da prtica profissional, podemos perceber, como satisfatria, a
prtica profissional desenvolvida atravs desse projeto.

14

REFERNCIAS

GUIA DE PRTICA PROFISIONAL UEMA ETEC

ROTEIRO DE PRTICAS UEMA - ETEC

Pgina TCNICO EM INFORMTICA DA WIKIPDIA - Disponvel em

http://pt.wikipedia.org/wiki/Tcnico_em_informtica e acessada em 15/10/2014.

Pgina do AMBIENTE VIRTUAL DE APRENDIZAGEM Disponvel em

http://ead.uemanet.uema.br/mod/assignment/view.php?id=16299 e acessada em 15/102014

15