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

2

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

3

SUMRIO

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

4

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.

5

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.

6

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

7

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.

8

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.

9

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

10

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.

11

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.

12

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

13

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.

14

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.

15

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