Programação - Web - Modulo I

Curso Tcnico em Informtica
Programao Web
Robson Braga de Andrade

Presidente da Confederao Nacional da Indstria
Rafael Lucchesi
Diretor do Departamento Nacional do SENAI
Regina Maria de Ftima Torres

Diretora de Operaes do Departamento Nacional do SENAI
Alcantaro Corra
Presidente da Federao da Indstria do Estado de Santa Catarina
Srgio Roberto Arruda

Diretor Regional do SENAI/SC
Antnio Jos Carradore

Diretor de Educao e Tecnologia do SENAI/SC
Marco Antnio Dociatti

Diretor de Desenvolvimento Organizacional do SENAI/SC
Confederao Nacional da Indstria

Servio Nacional de Aprendizagem Industrial
Curso Tcnico em Informtica
Programao Web
Silvio Luis de Sousa
Florianpolis/SC
2011
proibida a reproduo total ou parcial deste material por qualquer meio ou sistema sem o prvio consentimento
do editor.
Autor
Fotografias
Banco de Imagens SENAI/SC
http://www.sxc.hu/
http://office.microsoft.com/en-us/ images/
http://www.morguefile.com/
http://www.bancodemidia.cni.org.br/
Ficha catalogrfica elaborada por Luciana Effting CRB14/937 - Biblioteca do SENAI/SC Florianpolis
S725p
Sousa, Silvio Luis de
Programao web / Silvio Luis de Sousa. Florianpolis : SENAI/SC/DR,
2011.
127 p. : il. color ; 30 cm.
Inclui bibliografias.
1. Programao (Computadores). 2. Sites da web - Desenvolvimento. 3.
Folhas de estilo. 4. HTML (Linguagem de programao de computador). 5.
PHP (Linguagem de programao de computador). I. SENAI. Departamento
Regional de Santa Catarina. II. Ttulo.
CDU 004.43
SENAI/SC Servio Nacional de Aprendizagem Industrial

Rodovia Admar Gonzaga, 2.765 Itacorubi Florianpolis/SC
CEP: 88034-001
Fone: (48) 0800 48 12 12
www.sc.senai.br
Prefcio
Voc faz parte da maior instituio de educao profissional do estado.
Uma rede de Educao e Tecnologia, formada por 35 unidades conectadas e estrategicamente instaladas em todas as regies de Santa Catarina.
No SENAI, o conhecimento a mais realidade. A proximidade com as
necessidades da indstria, a infraestrutura de primeira linha e as aulas
tericas, e realmente prticas, so a essncia de um modelo de Educao
por Competncias que possibilita ao aluno adquirir conhecimentos, desenvolver habilidade e garantir seu espao no mercado de trabalho.
Com acesso livre a uma eficiente estrutura laboratorial, com o que existe
de mais moderno no mundo da tecnologia, voc est construindo o seu
futuro profissional em uma instituio que, desde 1954, se preocupa em
oferecer um modelo de educao atual e de qualidade.
Estruturado com o objetivo de atualizar constantemente os mtodos de
ensino-aprendizagem da instituio, o Programa Educao em Movimento promove a discusso, a reviso e o aprimoramento dos processos
de educao do SENAI. Buscando manter o alinhamento com as necessidades do mercado, ampliar as possibilidades do processo educacional,
oferecer recursos didticos de excelncia e consolidar o modelo de Educao por Competncias, em todos os seus cursos.
nesse contexto que este livro foi produzido e chega s suas mos.
Todos os materiais didticos do SENAI Santa Catarina so produes
colaborativas dos professores mais qualificados e experientes, e contam
com ambiente virtual, mini-aulas e apresentaes, muitas com animaes, tornando a aula mais interativa e atraente.
Mais de 1,6 milhes de alunos j escolheram o SENAI. Voc faz parte
deste universo. Seja bem-vindo e aproveite por completo a Indstria
do Conhecimento.
Sumrio
Contedo Formativo
Apresentao
Finalizando
123
11
Referncias
125
12 Unidade de estudo 1
Quer Programar para
Internet?
13
Seo 1 - Tecnologias de
desenvolvimento para web
13
Seo 2 - Ambiente de desenvolvimento web
16
Seo 3 - Instalao do ambiente de desenvolvimento

web
Desenvolvendo
Aplicaes Dinmicas
para a Internet
25
Seo 1 - Abordagem inicial
25
Seo 2 - Script HTML
48
Seo 3 - Script CSS
59
Seo 4 - Linguagem de
programao PHP
Exemplo Prtico
89
Seo 1 - Abordagem da
aplicao
89
Seo 2 - Desenvolvimento
da aplicao
121 Seo 3 - Publicao do seu

web site
CURSOS TCNICOS SENAI
Contedo Formativo
Carga horria da dedicao
Carga horria: 150 horas
Competncias
Desenvolver aplicaes para web.
Conhecimentos
Aplicaes cliente-servidor.
Tecnologias de desenvolvimento para web.
Requisies remotas.
Controle de sesses.
Arquitetura de sistemas web.
Habilidades
Analisar e implementar as tecnologias de desenvolvimento para web.
Utilizar os padres de projeto em aplicaes web.
Utilizar normas de Segurana da informao na web.
Atitudes
Organizao e zelo na utilizao de equipamentos.
Foco no contedo trabalhado.
Acesso a stios relacionados ao tema trabalhado.
Organizao e limpeza dos ambientes coletivos.
Dedicao e empenho nas atividades curriculares e extracurriculares.
Capacidade de abstrao.
Trabalho em equipe.
Apresentao de novas solues para situaes problemas.
Cumprimento de prazos.
Anlise crtica de suas produes.
PROGRAMAO WEB
Apresentao
O que acha de compreender os fundamentos de programao para web
a partir do conhecimento do ambiente e seus elementos, das tecnologias de software bsicas, de tcnicas de programao para aperfeioar as
rotinas de programas e como publicar seu web site?
Fica aqui um convite para que compartilhe destes e outros conhecimentos na garantia de que possa iniciar sua caminhada como desenvolvedor
web.
O mercado de desenvolvimento para aplicaes web crescente, mas s
sobrevive aquele que trabalha com qualidade e sabe que em programao, conquistar qualidade conhecer os fundamentos das linguagens,
praticar muito e estar atualizado buscando novos recursos para dinamizar suas aplicaes. Desta forma est preparando-se para desenvolver
habilidades como, analisar e implementar as tecnologias de desenvolvimento web a partir de padres de projetos pr-definidos buscando implementar ao mximo normas de segurana da informao.
Sua trajetria de aprendizagem ser ainda mais prazerosa se os seus momentos de estudos forem regados de motivao, disciplina e autonomia.
Bons estudos!

graduado em Processamento
de Dados e Sistemas de Informao. Ps-graduado em Formao docente para o Ensino
Superior. Scio proprietrio da
LM&SL Treinamento, Desenvolvimento e Consultoria em Informtica com atuao em Joinville
e regio. Atua no SENAI em Joinville como instrutor de cursos
de qualificao e tcnicos com
experincia profissional em
Treinamento e Desenvolvimento de projeto de software.
PROGRAMAO WEB
11
Unidade de
estudo 1
Sees de estudo
Seo 1 Tecnologias de desenvolvimento para
web
Seo 2 Ambiente de desenvolvimento web
Seo 3 Instalao do ambiente de desenvolvimento web
Quer Programar para

a Internet?
Seo 1
Tecnologias de desenvolvimento para web

Cada vez mais a Internet conquista espaos, um deles o da programao. Graas s tecnologias
desenvolvidas para a web, notria sua evoluo nesse segmento,
como observado em sites de comrcio eletrnico, nos famosos
CMS (Content Management System)
traduzindo, Sistema Gerenciador
de Contedo e tambm nas no
menos famosas redes sociais, dentre outros.
Tais tecnologias, conjugadas com
metodologias de desenvolvimento de software, garantem aos aplicativos web, flexibilidade, escalabilidade e melhor desempenho.
Nosso estudo prope levar ao seu
conhecimento tudo que lhe garanta a compreenso e possibilidade para que domine o desenvolvimento de aplicaes web dentro
das regras de boas prticas.
necessrio compreender que
existem vrias tecnologias utilizadas
para desenvolver aplicaes para
web, desde as mais elementares, e
no menos importantes, as mais
avanadas. Nesse contexto conhecer sobre arquitetura cliente-servidor, linguagens de programao
como HTML, CSS, Javascript,
PHP, interao entre aplicao web
e banco de dados MySQL.
importante tambm compreender que alm das tecnologias destacadas como objeto de estudo,
existem vrias outras, mas ento
porque no estud-las tambm?
Bom, como esta unidade curricular
contempla 150 horas de estudos e
o compromisso que voc aprenda
a desenvolver aplicaes para a
Internet, ento sero adotadas as
tecnologias que julgamos serem
as mais viveis neste processo de
aprendizagem, sendo que, uma
vez que se desenvolva bem, ser
capaz de absorver e desenvolverse satisfatoriamente, em qualquer
outra tecnologia.
Voc precisa ter a conscincia de
que est em um processo de aprendizado, ento notar que em toda
e qualquer rotina de programao
ter que escrever os cdigos, isto
para que pratique e conhea ao
mximo das linguagens que estar
trabalhando, assim, quando fizer
uso de ferramentas de produtividade, saber customiz-la uma
vez que domina o cdigo que
gerado pelas mesmas. Inicialmente pode parecer desagradvel, mas
quando tiver mais experincia e
se deparar com a necessidade de
customizar o cdigo gerado por
uma ferramenta, perceber a importncia do assunto.
O que acha de comear logo o
processo? Ento, vamos para a
prxima sesso!
Seo 2
Ambiente de desenvolvimento web

Quando se trata de desenvolver
aplicaes web, importante atentar para as tecnologias referentes
ao ambiente em que as aplicaes
sero desenvolvidas e executadas.
Primeiramente voc deve saber
que aplicaes desenvolvidas em
linguagem PHP podem ser utilizadas tanto na plataforma Linux,
como Windows e independente
da plataforma, deve conhecer os
componentes envolvidos neste
ambiente.
E que componentes so esses?
Os componentes envolvidos no
ambiente web so:
Sistema operacional Win-
dows ou Linux como voc

j sabe um sistema operacional
trata do software bsico instalado
em uma mquina para que possa
fazer uso de outras aplicaes,
porm, nesta unidade curricular
ser priorizado o sistema operacional Windows.
PROGRAMAO WEB
13
Servidor web Apache
trata-se de um software que recria

um ambiente para publicao
de aplicaes para a internet
podendo, inclusive, ser utilizado
localmente em seu computador
permitindo que desenvolva e
execute suas aplicaes web sem a
necessidade de estar conectado a
internet.
Foi desenvolvido pela Apache
Software Foundation um
software de cdigo aberto,
de muitos recursos, seguro e
disponibilizado livremente na
internet.
SAIBA MAIS
Para saber mais sobre o
servidor web Apache, visite o site <http://httpd.
apache.org>.
Servidor MySQL um
servidor de banco de dados e a
exemplo do servidor Apache, de
cdigo aberto, distribudo gratuitamente na internet e podendo
ser utilizado localmente.
Acesse <http://php.net>.
Navegador web software
SAIBA MAIS
Para saber mais sobre o
servidor MySQL, visite o
site <http://mysql.org>.
PHP - linguagem de programao dinmica, baseada em

scripts, atualmente mais utilizada para a elaborao de aplicaes para internet. Tambm de
cdigo aberto, possui recursos de
segurana muito eficazes e suporte a orientao. Objetos que lhe
conferem, atualmente, como a
linguagem com inmeras comunidades de grupos de discusses
no mundo todo.
Figura 1: Estrutura bsica de um ambiente web

Fonte: Adaptado de Melo e Nascimento (2007, p. 30)
14
SAIBA MAIS
que permite o acesso as pginas

da Internet encontradas no servidor web, existem vrios navegadores a nossa disposio como.
Internet Explorer. Mozilla Firefox. pera. Google Chrome, e
outros.
Agora que voc conhece os componentes do ambiente de desenvolvimento e execuo de aplicaes web, confira na figura a seguir
como funciona este ambiente, segundo Melo e Nascimento (2007,
p. 30).
Perceba que a figura anterior permite visualizar todos os componentes do ambiente de desenvolvimento e execuo de aplicaes,
como funcionam, na prtica, as
aplicaes web e qual o papel dos
componentes envolvidos.
Tambm, a partir da figura, voc
pode verificar que o ambiente
dividido em 2, por um lado o
cliente da aplicao que far as
solicitaes ao servidor web e por
outro, o servidor, que por sua vez,
o local onde as aplicaes so
executadas a partir da solicitao
do cliente. Ento podemos definir
que o ambiente web dividido em
lado cliente e lado servidor, esse
um assunto a ser detalhado mais
adiante em nosso estudo.
Funcionamento de
uma aplicao web.
1. O usurio cliente, por meio de
um navegador, faz a solicitao
ao servidor web.
2. O servidor web, por sua vez, recebe essa solicitao ou requisio e de acordo com o que
foi requisitado, executa uma
determinada tarefa. Caso seja
a requisio de um arquivo em
HTML ou figura, ele consulta o sistema de arquivos, esse
arquivo estando disponvel,
retornado ao usurio cliente.
Se a requisio for de um arquivo com extenso especial,
que no HTML ou figura como, por exemplo, PHP, esta desviada

ao seu responsvel, neste caso, arquivo PHP para que possa interpretar as instrues PHP e traduzi-las em respostas HTML, para serem
devolvidas ao usurio cliente. Caso seja verificada a necessidade de
consulta ao banco de dados, essa tambm executada e retornada ao
usurio cliente.
3. O usurio cliente visualiza a pgina web solicitada.
Agora que voc j conhece os componentes e funcionamento das aplicaes web em seu ambiente, importante estudar a diviso desse ambiente, lado cliente e lado servidor, uma vez que o conceito e estrutura
desses, voc ver neste livro em diversos momentos.
Lado cliente/Lado servidor

Voc viu no tpico anterior que no contexto do ambiente web temos o
lado cliente e lado servidor, mas o que caracterizam e/ou compreendem?
De acordo com Melo e Nascimento (2007, p. 44) o lado cliente de uma
aplicao onde so processadas diversas formas de interao ente o
usurio e o sistema. Desta forma, quando um internauta visita sua pgina, o meio pelo qual ele interage com ela o navegador.
Continuando Melo e Nascimento (2007, p. 43) definem o seguinte sobre

lado servidor [...] pode ser entendido como a estao onde esto sendo
executados os aplicativos aos quais os acessos so feitos. Quando voc
acessa um site web, uma requisio enviada via protocolo HTTP para
um servidor que ento lhe envia a resposta.
No ambiente web as linguagens de programao como: HTML, CSS,

Javascript, PHP, servidor de banco de dados e web, assim como cookies
e sesses so elementos que trabalham conjuntamente para que as aplicaes web cumpram suas funes. Porm, alguns desses elementos so
executados no lado cliente e outros no lado servidor, cada qual cumprindo sua funo, mas integrados em fazer com que as solicitaes do
cliente sejam feitas ao servidor e este fornece sua resposta.
Observe na figura a seguir as linguagens, recursos e/ou tecnologias que
so executados no lado cliente e no lado servidor.
PROGRAMAO WEB
15
Figura 2: Composio lado cliente e servidor

Fonte: Melo e Nascimento (2007, p. 43)
Melo e Nascimento (2007, p. 43) ainda reforam que Em linhas gerais

podemos dizer que o navegador do cliente faz o trabalho de ponte entre ambos os lados, em que este envia a requisio e o servidor fornece
sua resposta.
Agora que conhece bem sobre o ambiente de desenvolvimento e execuo de aplicaes web voc convidado a acompanhar os conhecimentos
da prxima sesso que sero muito importantes para que possa preparar,
na prtica, o ambiente web. Preparado para mais este desafio?
Seo 3
Instalao do ambiente de desenvolvimento web

Anteriormente voc estudou que as aplicaes PHP podem ser desenvolvidas e executadas tanto nas plataformas Linux ou Windows, caso
queira fazer uso do Linux, deve-se instalar um ambiente LAMP, sigla
que representa a juno dos nomes dos softwares que necessita instalar no
ambiente, L de Linux, A de Apache ou servidor Apache, M de MySQL
e P de PHP.
Caso queira fazer uso do Windows instale um ambiente WAMP, sigla
que tambm representa a juno dos nomes dos softwares que necessita
instalar no ambiente, W de Windows, A de Apache ou servidor Apache,
M de MySQL e P de PHP.
16
Voc pode instalar um ambiente

LAMP ou WAMP, primeiramente escolhendo o tipo de ambiente
que deseja trabalhar, feita a escolha voc deve fazer a instalao de
2 maneiras distintas.
4. A partir de pacotes de softwares
pr-configurados, disponibilizados, gratuitamente na internet e no necessitando de
nenhum tipo de configurao
para a instalao do ambiente.
5. A partir da instalao manual
do ambiente, iniciando pelo
download dos softwares, servidor
web Apache, servidor de Banco
de Dados e da linguagem PHP
na verso pretendida. Aps
o download, instalar os softwares para depois partir para os
procedimentos de configurao dos servidores, linguagem
de programao e do sistema
operacional onde este ambiente ser instalado.
As duas formas so interessantes

mais trazem consigo caractersticas e aplicabilidades prprias veja.
Pacotes de software
Sobre a instalao do ambiente
a partir de pacotes de softwares
comentam Melo e Nascimento
(2007, p. 31)
Existem alguns projetos para manuteno e pr-configurao de
ambientes LAMP e WAMP. Na
grande maioria dos casos, eles
podem ser baixados gratuitamente em seus sites oficiais pela
internet. A grande vantagem da
instalao de um servidor por
este mtodo em relao ao
tempo demandado e a facilidade em sua execuo. a opo
mais recomendada para usurios
inexperientes no ambiente, [...].
Ainda fazem uma analogia com o

mtodo manual,
Ao invs de instalar e configurar
cada um dos componentes envolvidos, estes pacotes oferecem
ao usurio uma configurao bsica pr-montada.
E sobre as desvantagens desse mtodo Melo e Nascimento

(2007, p. 31) afirmam
[...] nem sempre o usurio poder alterar uma configurao com
facilidade ou a atualizao individual de um componente nem
sempre ser possvel. Neste caso,
necessrio que os responsveis
pelo projeto atualizem e disponibilizem uma nova verso do seu
produto.
Existem vrios pacotes de softwares bons e gratuitos na internet,

confira!
EasyPHP disponvel para

a plataforma Windows contm
atualmente o PHP 5, servidor web
Apache 2, servidor de banco de
dados MySQL 5, contm tambm o aplicativo phpMyAdmin 3
e Xdebug 2.
Seu site oficial <http://easy

php.org>
Vertrigo disponvel para a

plataforma Windows contm os
seguintes componentes, servidor
web Apache 2, PHP 5, servidor de
banco de dados MySQL 5, SQLite 3, Smarty 3, phpMyAdmin 3,
ZendOptimizer 3 e SQLiteManager 1.
Seu site oficial <http://vertrigo.sourceforge.net>
XAMPP ao contrrio dos

anteriores, neste pacote voc
encontra verses disponveis para
as seguintes plataformas: Windows, Linux, Mac OS X e Solaris.
Contm os seguintes componentes, PHP 5, servidor web Apache
2, MySQL 5, SQLite, phpMyAdmin.
Seu site oficial <http://apachefriends.org/en/xampp.

html>
Instalao manual
Sobre este mtodo de instalao
Melo e Nascimento (2007, p. 34)
comentam
Esta certamente a forma mais
flexvel de instalao do servidor,
uma vez que cada componente
do ambiente LAMP ou WAMP
instalado e parametrizado de
maneira manual e individual pelo
prprio usurio.
No caso da instalao manual

voc ter que efetuar o download
dos softwares relativos aos componentes do ambiente web, conforme voc estudou na seo anterior, ou seja:
servidor Apache, encontrado

em http://httpd.apache.org;
linguagem PHP, encontrada
em http://php.net;
servidor MySQL, encontrado

em http://mysql.org.
Neste tipo de instalao existem
algumas particularidades importantes a serem consideradas, elas
so relacionadas aos ambientes
LAMP e WAMP. O Linux possui
vrias distribuies como: Conectiva, Ubunto, Had Rat, Suse, Slackware dentre outros, o mesmo
acontece no ambiente Windows
existente nas verses XP e Windows 7 dentre outros tambm.
Mas o que isso tem a ver com a instalao manual?
Tem tudo a ver, pois para cada

plataforma existe uma srie de
procedimentos de instalao e
configurao a serem executados
at a concluso do processo.
PROGRAMAO WEB
17
Sendo assim, se voc optar pela instalao manual confira a seguir alguns
links teis que orientam tais instalaes.
Ambiente LAMP
<http://www.phpbrasil.com/articles/article.php/id/492>.
<http://www.vivaolinux.com.br/artigo/Ambiente-LAMP-no-
-Debian/>.
<http://www.vivaolinux.com.br/artigo/Instalando-Apache2-
-PHP4-e-MySQL/>.
Ambiente WAMP
<http://www.portaldigidesign.com.br/showarticle.
php?articleID=25>.
<http://www.imasters.com.br/artigo/1309>.
<http://phpbrasil.com/articles.php/id/847>.
Figura 3: Estrutura da pasta VertrigoServ do pacote Vertrigo

Fonte:
18
Preparando o nosso
ambiente web
Seu estudo far uso de pacotes de
software justamente pelo fato de
voc ainda no ter muita experincia para instalar um ambiente
manual. Utilizaremos o pacote
do Vertrigo, por ser um pacote
bastante estvel, principalmente
no Windows 7 Ultimate, que a
plataforma utilizada para o seu
estudo.
Voc estar trabalhando em um
ambiente web de forma local, portanto, como procedimento inicial
deve fazer o download do Vertrigo,
de preferncia em seu site oficial.
Aps o download, deve instalar,
preferencialmente, na pasta Arquivos de Programas, feito isto
localize a pasta VertrigoServ e
acesse seu contedo, que apresenta a seguinte estrutura:
Vale conhecer o contedo de algumas das pastas encontradas

nesta estrutura.
Apache nesta pasta voc

encontra outras pastas contendo
os arquivos de programas do
servidor web Apache, ou seja,
esses programas que permitem
a execuo desse servidor. Aqui
tambm encontra os arquivos
ABOUT_APACHE e LICENSE
respectivamente, arquivo contendo informaes gerais sobre
o Apache e arquivo contendo
informaes sobre a licena de
uso do Apache.
ATENO! Evite modificar o

contedo de quaisquer arquivos dessa pasta sem o prvio
conhecimento do que est
fazendo. Tambm no exclua
nenhum arquivo desta pasta.
Mysql aqui voc encontra
outras pastas contendo os arquivos de programas do servidor de

banco de dados MySQL, ou seja,
esses programas que permitem a
execuo desse servidor. Outra
pasta o arquivo my, contendo
algumas configuraes padro
do servidor Mysql como, por
exemplo, em que pastas os
bancos de dados criados devem
ser gravados, qual a porta lgica
o servidor Mysql estar utilizando dentre outras informaes
importantes.

Php nesta pasta voc tem
acesso a outras pastas contendo

os arquivos de programas da linguagem PHP que permitiro que
voc desenvolva suas aplicaes
nesta linguagem. Aqui tambm
encontra vrios arquivos de configurao do PHP.

contedo de quaisquer arquivos desta pasta sem o prvio
Phpmyadmin trata-se da
pasta contendo os arquivos de

programas do utilitrio que permite criar estruturas de banco de
dados no servidor MySQL. Esse
utilitrio voc j conhece, fizemos uso dele na unidade curricular de Banco de dados mdulos
I e II. Aqui voc far uso desse
utilitrio tambm, sempre que
precisar fazer alguma tratativa
com banco de dados em nossas
aplicaes PHP.

www esta pasta muito im-
portante, o servidor Apache vem

pr-configurado para reconhecer
a pasta www como aquela em
que encontram-se os arquivos
de programas web que devem ser
executados a partir da solicitao
dos clientes via browser. Isto quer
dizer que todas as aplicaes web
que desenvolver devem ser salvas
nessa pgina, pois caso contrrio,
no sero executadas pelo servidor Apache.
ATENO! Aqui voc tem a

liberdade de modificar e/
ou excluir as pastas e arquivos das aplicaes que voc
criou. Deve ter percebido
que existem alguns arquivos
que no foram criados por
voc, nestes, no deve modificar nem tampouco excluir,
pois tratam-se de arquivos do
Vertrigo.
Para encerrar o processo de reconhecimento da estrutura da pasta

VertrigoServ, voc conhecer alguns arquivos encontrados nesta
pasta como.
PROGRAMAO WEB
19
Uninstall (tipo aplicativo)
trata-se do arquivo do programa que desinstala o pacote do

Vertrigo da sua mquina.
ATENO! Ao desinstalar
este pacote, seus bancos de
dados, encontrados em VertrigoServ/Mysql/data, como
tambm suas aplicaes encontradas em VertrigoServ/
WWW, sero excludas, portanto, se houverem banco
de dados e aplicaes faa o
backup destes, antes de desinstalar este pacote de sua
mquina.
Vertrigo (tipo aplicativo)
o arquivo do programa executvel do Vertrigo, ou seja, com

2 cliques do boto esquerdo do
mouse ou pressionando a tecla enter neste arquivo, estar executando o Vertrigo. Sugere-se que crie
um cone deste arquivo na rea
de trabalho de sua mquina.
Figura 4: Janela inicial do pacote Vertrigo
20
ATENO! No exclua este

arquivo.
Vertrigo (tipo Parmetros

de configurao) - Este
o arquivo de configurao do
Vertrigo com especificaes
de configurao dos softwares
embarcados no Vertrigo, como o
servidor Apache, Mysql e como
o status destes servidores ao
executar o Vertrigo, dentre outras
configuraes.

contedo deste arquivo sem
o prvio conhecimento do
que est fazendo. Evite tambm exclu-lo.
O assunto est muito interessante,

certo? Continue atento.
Testando o ambiente web

instalado
Agora que j instalou o Vertrigo
e tambm conheceu sobre sua estrutura bsica, deve fazer o teste
para saber se o ambiente web encontra-se pronto para ser utilizado. Como? Siga os procedimentos
indicados a seguir.
1. Execute o programa do Vertrigo;
Pode ser executado a partir do
arquivo VertrigoServ/Vertrigo,
aquele identificado com uma estrela antes de seu nome ou a partir do cone da rea de trabalho,
caso o tenha criado, este tambm
identificado por uma estrela. Para
executar o programa, no custa
lembrar, basta clicar 2 vezes com
o boto esquerdo do mouse ou
pressionar a tecla enter.
Aps a execuo do Vertrigo, aparecer uma janela Windows como
mostra a figura a seguir.
Note que aparece, no lado esquerdo da janela, a relao dos softwares

embarcados no pacote Vertrigo
com suas respectivas verses, ao
lado direito aparecem 3 sesses
que orientam, basicamente, voc
no seguinte.
Tray icons
So mostradas as imagens de um
servidor com sinalizaes em verde, vermelho, amarelo e azul, isto
orienta voc sobre qual o status ou
estado dos servidores Apache e
MySQL, no momento em que o
Vertrigo executado.
Servidores MySQL e Apache em execuo.
Settings
a sesso que permite, em Program, voc modificar a configurao do
programa, como: status, estado inicial dos servidores, aparncia da apresentao dos menus de acordo com a verso do Windows utilizada, dentre outros. Alm disso, permite, em Extensions, configurar as extenses
de arquivos, aceitas para o servidor Apache e linguagem PHP. Tambm
permite configurar, em Components, os recursos do PHP, MySQL e Apache aceitos no ambiente e por ltimo, permite, em Aliases and dirs, configurar os caminhos e diretrios para acesso s pastas de publicao de
pginas, dos cones do servidor Apache, do utilitrio do Phpmyadmin e
do utilitrio do banco de dados Sqlitemanager.
Iniciando o Vertrigo
Para efetivar a execuo do Vertrigo e consequentemente a inicializao
dos servidores web Apache e de banco de dados MySQL, deve clicar com
o boto esquerdo do mouse, no boto Hide this window and start Server ,
localizado na base da janela do vertrigo, como mostra a figura anterior.
Aps o procedimento anterior, o Vertrigo entra em execuo e voc
pode visualizar, na barra de tarefas, do desktop do Windows, um cone
com a imagem de um servidor, sinalizando o status, ou estado, dos servidores naquele momento, como mostra a figura a seguir.
Servidores MySQL e Apache parados.
Somente o servidor MySQL em execuo.

Figura 5: cone indicativo do Vertrigo em execuo
Somente o servidor Apache em execuo.
Documentation
Clique neste link para acessar a
ajuda do aplicativo, sugere-se que
realmente acesse essa ajuda para
que conhea mais detalhes sobre
o Vertrigo.
Aparentemente o seu ambiente est pronto para poder iniciar seus trabalhos, mas s ter certeza disto testando-o, ento, o que acha de partirmos agora para o teste do ambiente?
Apenas como informao, voc escrever um pequeno script em PHP
salvando-o no servidor Apache e para escrever as instrues desse script
utilizaremos o editor de texto Notepad++.
Para executar as aplicaes web desenvolvidas, utilizaremos o browser Mozilla Firefox.
2. Teste o ambiente web
PROGRAMAO WEB
21
Proceda da seguinte maneira:
execute o VertrigoSev e certifique-se que os servidores esto em
execuo;
acesse a pasta Arquivos de Programas/VertrigoServ/www;

na pasta www, crie uma pasta com o nome de testeambiente;
abra o seu editor de programas;
escreva o seguinte script:

<?php

?>
phpinfo();
Salve esse script, com o nome de testeambiente.php, na pasta

Programas/VertrigoServ/WWW /testeambiente/;
DICA
Lembre-se que a pasta www a pasta que o servidor web Apache
reconhece as aplicaes web que ele deve executar e entregar ao
cliente browser.
agora, abra o browser e solicite ao servidor Apache, a pgina web,
criada por voc, a partir do seguinte endereo:
Figura 6: Pgina web contendo a configurao do seu ambiente web
22
<http://127.0.0.1/testeambiente/testeambiente.php>
DICA
Em caso de algum problema, certifique-se de que o
servidor web Apache est
iniciado, se sim, verifique se
cometeu algum erro ortogrfico no endereo digitado,
ou equivocou-se no nome
da pasta ou arquivo, se tudo
estiver ok e mesmo assim o
problema persistir, troque
o endereo ip 127.0.0.1 por
localhost.
Se tudo correu bem, receber

como retorno do servidor Apache, uma pgina web, contendo
todas as informaes da configurao do seu ambiente web instalado, inclusive com as informaes
dos componentes desse ambiente,
servidor web Apache, PHP, servidor MySQL, como na figura a
seguir.
3. Finalizando o VertrigoServ
Para finalizar o VertrigoServ faa o seguinte.
Clique, com o boto esquerdo do mouse, no cone do VertrigoServ,

localizado na barra de tarefa do seu desktop Windows.
Aps a execuo do procedimento anterior, voc ver um menu,
escolha o comando shutdown and exit, este comando desconecta o servidor e sai do VertrigoServ.
A partir dessa ao voc no conta mais com o ambiente web inicializado, ou seja, qualquer tentativa
de executar suas aplicaes web
no ser bem sucedida, para isto
deve executar novamente o Vertrigo.
Assim, voc chega ao fim desta
seo de estudo e com a certeza de que contribumos bastante
para o seu conhecimento em ambiente de aplicaes web. Agora
que j conhece o bsico necessrio para iniciar o estudo do desenvolvimento de aplicaes para
web, a partir da prxima unidade
voc conhecer as tecnologias referentes a linguagens de programao, que permitiro que voc
desenvolva web sites dinmicos,
softwares aplicativos e outros para a
internet. Vamos juntos para mais
um percurso de aprendizagem?
Figura 7: Apresentao do menu principal do Vertrigo
PROGRAMAO WEB
23
Unidade de
estudo 2
Sees de estudo
Seo 1 Abordagem inicial
Seo 2 Script HTML
Seo 3 Script CSS
Seo 4 Linguagem de programao PHP
Desenvolvendo Aplicaes
Dinmicas para a Internet
Seo 1
Abordagem inicial
A partir dos conhecimentos propostos para esta unidade, voc
ter condies de desenvolver
scripts web para o desenvolvimento
de pginas dinmicas para a Internet, bem como softwares aplicativos nos padres web.
A unidade prope levar a voc
os conhecimentos sobre as tecnologias de programao como:
HTML (importante na apresentao final das pginas web), CSS
(importante na implementao
de estilos nas pginas web), PHP
(linguagem dinmica que auxilia o
HTML no acesso a arquivos), validao e tratamentos de campos
de formulrios, acesso a banco de
dados, utilizao de cookies e sesses, dentre outras importantes
recursos.
importante que no decorrer dos
seus estudos voc pratique todos
os comandos, instrues e rotinas
apresentadas, pois para que possa
aprender para valer nada melhor do
que praticar. Lembre-se: desenvolva as atividades propostas para
adquirir volume e ritmo de trabalho
em programao.
Para a prtica dos conhecimentos
desta unidade utilize:
Navegador Mozilla Firefox e Internet Explorer.

Editor de programas Notepad++.
Pacote VertrigoServ Servidor web Apache, Servidor de Banco de
dados Mysql, linguagem de programao PHP e utilitrio PHPMyAdmin.

Agora que j tem conhecimento sobre a temtica desta unidade, hora
de conhecer tudo sobre HTML. Siga, ento, para a prxima seo.
Seo 2
Script HTML
Esta seo prope o conhecimento bsico da HTML a partir de sua
definio, estrutura bsica, comandos e recursos, que permitam juntamente com as demais tecnologias a ser estudado, o desenvolvimento de
aplicaes web dinmicas.
Relembrando que para a prtica voc precisar de um editor de programas e um navegador internet, respectivamente, o Notepad++, Mozilla
Firefox e testes tambm no Internet Explorer.
HTML (HyperText Markup Language)

Traduzindo, no ao p da letra, mas na sua aplicao, o significado de
HTML pode ser entendido como, linguagem de formatao que permite
a elaborao de web sites com hiper-textos.
Ao contrrio do que muitos se referem HTML no uma linguagem de
programao, mas sim, uma linguagem de formatao, que interpretada
pelo navegador internet, reproduz uma pgina web. Isto quer dizer que
enquanto estiver escrevendo seus scripts em HTML voc estar formatando uma pgina web que ser visualizada por meio de um navegador da
internet. Confira a seguir a estrutura bsica de um script HTML.
PROGRAMAO WEB
25
Estrutura bsica de um
script HTML
Mas, antes da estrutura, importante que voc conhea a definio de TAG, j que este elemento
base de tudo nesta linguagem.
TAG
Chamada por alguns como marca
e por outros de rtulo, voc a utilizar em seu script para formatar
sua aplicao e tambm a partir
dela que aplicar os comandos
de formatao HTML que sero
interpretados pelo browser (navegador internet) para a reproduo
de pginas web.
Sua sintaxe ou forma de escrita simples, comea com

o smbolo de < e termina com >, como exemplo,
<html>, na prtica, como j
comentado, representam os
comandos de formatao que
sero interpretados pelos navegadores.
muito comum voc ouvir

programadores web referir-se
a tags HTML como comandos
HTML, na realidade voc aplica
os comandos HTML a partir de
tags, mas isto no significativo,
o que interessa saber utiliz-las
da melhor maneira para alcanar
seus objetivos.
Linha de comentrio HTML

Outro recurso importante o de linha de comentrio.
Uma linha de comentrio serve para documentar as instrues do programa que o programador escreve, no sentido de esclarecer e/ou organizar o script, estas no so interpretadas e nem tampouco geram nenhum
resultado, realmente apenas servem para documentao.
Exemplificando, suponha que voc deseja elaborar uma instruo
HTML e queira documentar o que esta faz, com o propsito de que, se
em algum momento, houver a necessidade de se efetuar a manuteno
no script do programa, saber do que se trata a instruo:

<meta name=keywords content=curso,programao Wb, SENAI>
Note que no exemplo voc encontra primeiramente a linha de comentrio que explica a funo da instruo, logo abaixo. Sintaxe de escrita
A linha de comentrio em HTML inicia com o smbolo .
Cor em HTML
No sero poucos os momentos em que voc precisar atribuir cores em
sua pgina HTML, seja para atribuir cor ao texto, ao fundo da pgina,
tabelas e assim por diante.
Sendo assim, importante saber que as cores que voc utiliza podem ser
utilizadas em 2 formatos:
Bsico
aquele em que voc utiliza a cor fazendo referncia ao seu nome em

ingls, por exemplo, suponha que deseja escrever em sua pgina a palavra
HTML em vermelho, ficaria assim:
<font color= red>HTML</font>
Existem 2 tipos de tags, as

de abertura <html> e as de
fechamento </html>, o script
que voc escrever entre elas,
o que ser interpretado e
processado pelo navegador
internet.
26
A instruo <font color = red> aplica ao texto HTML a cor vermelha e para finalizar o comando utilizada a tag </font>, no se preocupe
agora com isto, voc ver em detalhes logo adiante.
Repare na palavra red no comando, trata-se da palavra, em ingls, para a
cor vermelha, isto significa que est aplicando a cor de fonte vermelha
no texto. Como resultado dessa instruo em sua pgina web voc teria
HTML (manter em vermelho).
Cdigo RGB (Red Green Blue)

o formato em que voc utiliza um cdigo hexadecimal do padro
RGB (Red Green Blue) para a formatao HTML, por exemplo, vamos
aplicar a cor vermelha novamente s que em cdigo hexadecimal, agora,
ficaria assim:
<font color= #FF0000> HTML </font>
Perceba que a cor agora atribuda a partir de um cdigo hexadecimal,

neste caso, para a cor vermelha e que como resultado voc obteria o
mesmo do exemplo anterior, ou seja, HTML.
Comando - <title>
Definio
Acrescenta um ttulo para a sua
pgina web, mais precisamente, na
barra de ttulo do browser.
Sintaxe de uso
<head>
DICA
Para ter acesso tabela de cores hexadecimal HTML pode acessar
o site <http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm>, por exemplo.
Agora sim chegou o momento de conhecer a estrutura script HTML
Estrutura script HTML

<html>
Cabealho do documento
HTML
<head>
</head>
<body>
Aqui deve informar tudo o que quiser que aparea
em sua pgina web.
</body>
</html>
<title>Este texto ser

apresentado na barra
de ttulo do seu browser</title>
</head>
Comentrios
Este comando deve ser escrito
dentro da tag <head>, na sua estrutura HTML.
Observe que a sintaxe de escrita deste comando inicia com a
abertura da tag <title>, seguida
do ttulo que deseja mostrar na
barra de ttulo do browser e, aps
o ttulo, o encerramento com a tag
</title>.
Corpo do documento HTML
Para a execuo dos comandos
interessante que seja feita localmente e no no servidor web,
isto porque trata-se do estudo da
HTML, que por sua vez, roda no
lado cliente dispensando o uso do
servidor web neste caso.
Sugiro que crie sua pasta no drive
local de sua mquina e nesta, voc
armazene, em pastas especficas
as aplicaes com as prticas dos
comandos repassados.
PROGRAMAO WEB
27
Comandos para formatao do texto

Comando - <center>
Definio
Centraliza, na pgina, tudo o que estiver escrito em sua rea de abrangncia.
Sintaxe de uso
<body>
<center>Este texto ser centralizado na pgina web</center>
</body>
Comentrios
Veja que este comando deve ser escrito dentro da tag <body>, na sua
estrutura HTML.
Veja que a sintaxe de escrita deste comando inicia com a abertura da tag
<center>, seguida do que voc deseja que seja centralizado no corpo da
pgina web e logo aps, o encerramento com a tag </center>.
caracterstica de alguns comandos HTML.

3. Importante tambm destacar
que se voc omitir o atributo
face (nome da fonte), a fonte
aplicada ser aquela padro
da mquina cliente em que a
pgina executada, normalmente Times New Roman. O
que tambm acontece com o
tamanho e cor da fonte, neste
caso ser adotado o tamanho e
cor da fonte padronizados da
mquina cliente, ou seja, no
teria motivo para utilizar este
comando.
4. Este comando finalizado
com a utilizao da tag de encerramento </font>.
5. Observe a utilizao do cdigo
hexadecimal #B22222 para a
cor da fonte, neste caso utilizamos a cor de nome Firebrick.
Comando <font>
c - Comando <p>
Definio
Permite a formatao do texto de sua pgina, possibilitando identificar:
nome da fonte = atributo face;
tamanho da fonte = atributo size;
cor da fonte = atributo color;
Sintaxe de uso
Definio
A letra p na tag <p> a abreviatura para paragraph (pargrafo)
que exatamente o que o texto
um texto pargrafo. Deve aplicar
somente quando o texto da pgina tratar-se de um pargrafo, do
contrrio, no h necessidade de
uso deste comando.
<body>
<font face = verdana size = 12 color = #B22222>Texto
formatado</font>
</body>
Sintaxe de uso
<body>
Comentrios
1. Este comando deve ser escrito dentro da tag <body>, na sua estrutura HTML.
2. Uma particularidade importante a de que este comando necessita de
alguns atributos, como face (nome da fonte), size (tamanho da fonte)
e color (cor da fonte), para a formatao correta. Note que isto uma
28
<p>Exemplo de um
texto escrito na pgina ... </p>
</body>
Comentrios
dentro da tag <body>, na sua estrutura HTML.
Perceba tambm que a sintaxe de
escrita deste comando inicia com
a abertura da tag <p>, seguida do
pargrafo, logo aps, o encerramento com a tag </p>.
<body>
Este um exemplo de quebra de linha ao final de um texto.
<br />
<br />
Esta linha ser impressa abaixo da anterior aps uma linha
em branco.
</body>
Comando <br>
Como resultado
Este um exemplo de quebra de linha ao final de um texto.
Definio
Esta linha ser impressa abaixo da anterior.
Permite que voc determine uma

quebra de linha na sua pgina web,
podendo esta ocorrer no meio de
um texto, como por exemplo:
Observe que entre as duas linhas foi implementado tambm um comando <br /> que faz com que uma linha em branco seja impressa
entre elas.
Sintaxe de uso
<body>
Este um exemplo
de<br />quebra de
linha em HTML
<br />no meio de
um texto.
</body>
Comentrios
Este comando deve ser escrito dentro da tag <body>, na sua estrutura
HTML.
A sintaxe de escrita deste comando um pouco diferenciado dos comandos anteriores, a indicao de abertura e fechamento do comando
feito na prpria tag <br />. Isto acontece com outros comandos HTML
tambm.
Comando - <b>
Como resultado
Este um exemplo de
quebra de linha em HTML
no meio de um texto.
Permite tambm a quebra de linha ao final do texto e tambm
entrelinhas do texto, como por
exemplo:
Definio
A letra b na tag <b> a abreviatura para bold (negrito). Deve aplicar

quando voc deseja formatar um texto ou palavra em negrito.
Sintaxe de uso
<body>
<b>Estou em negrito</b>
</body
Comentrios
HTML.
A sintaxe de escrita deste comando inicia com a abertura da tag <b>,
seguida do texto, logo aps, o encerramento com a tag </b>.
PROGRAMAO WEB
29
Uma particularidade a de que

este comando est caindo em desuso, sendo, aos poucos, substitudo pelo comando <strong>.
Comando - <strong>
Definio
Como relatado, um comando
que aparece em substituio ao
comando <b>, sendo sua aplicao a mesma, ou seja, deve aplicar
quando voc deseja formatar um
texto ou palavra em negrito.
Sintaxe de uso
<body>
<i>Estou em itlico</i>
</body>
Comentrios
HTML.
A sintaxe de escrita deste comando inicia com a abertura da tag <i>,
seguida do texto, logo aps, o encerramento com a tag </i>.
Podemos prosseguir? Ainda h muita informao interessante sobre
HTML.
Sintaxe de uso
<body>
<strong>Tambm estou em negrito
</strong>
</body>
Comentrios

escrita deste comando inicia com
a abertura da tag <strong>, seguida do texto, logo aps, o encerramento com a tag </strong>.
Alguns comandos HTML podem ser utilizados em conjunto, isto chamado de mltiplos comandos, possvel fazer uso de vrios comandos em uma instruo HTML.
Exemplo:
<center>
<h1>
<font face=verdana >
<strong>Mltiplos comandos HTML
</strong>
</font>
</h1>
</center>
Comando - <i>
Comando - <small>
Definio
Definio
Permite a exibio de um texto ou palavra em tamanho reduzido.
A letra i na tag <i> a abreviatura

para italic (itlico). Deve aplicar
quando voc deseja formatar um
texto ou palavra em itlico.
Sintaxe de uso
<body>
<small>Este texto visualizado em um tamanho bem reduzido
</small>
</body>
30
Comentrios
Sintaxe de escrita deste comando inicia com a abertura da tag
<small>, seguida do texto, logo
aps, o encerramento com a tag
</small>.
Como resultado:
Subttulo nvel 1
Subttulos nvel 2
Subttulos nvel 3
Comandos para subttulos
Subttulos nvel 4
Definio
Subttulos nvel 5
Subttulos em pginas web so os

ttulos implementados no corpo da
pgina, so considerados subttulos
porque ttulo aquele implementado
na tag <title>Ttulo da pgina</
title> como mostrado anteriormente, ento, caso necessite trabalhar com estrutura de subttulos
em suas pginas web, voc conta
com os seguintes comandos:
Sintaxe de uso
Subttulos nvel 6
Figura 8: ttulos em tag HTML
Comentrios
HTML.
O nvel mximo que pode utilizar para esse comando o <h6> como
pode observar no exemplo, veja tambm que, medida que utiliza um
comando com um nvel maior o tamanho da fonte diminui, tambm
possvel observar que a fonte obtida aquela reconhecida pela mquina
como padro. Caso queira formatar a fonte destes ttulos, utilize o comando <font>.
<h1>Subttulo nvel 1</h1>
Comando para barra horizontal

<h2>Subttulos nvel 2</h2>
Comando - <hr>
Definio
Permite a exibio de uma linha horizontal no local onde o comando
escrito.
Sintaxe de uso
<body>
<h1>
<font face=verdana color=#FF0000>Abaixo uma
linha sublinhada
</font>
</h1>
<hr />
</body>
PROGRAMAO WEB
31
Comentrios
HTML.
A sintaxe de escrita deste comando, a exemplo do comando <br />,
tambm possui a indicao de abertura e fechamento do comando na
prpria tag <hr />.
Comandos para listas de opes
Sintaxe de uso
<body>
<ol>
<li>Um item de
lista</li>
<li>Outro item
de lista</li>
</ol>
</body>
Comando - <ul>
Definio
Permite a criao de uma lista de itens de informao com um marcador.
Sintaxe de uso
<body>
<ul>
<li>Um item de lista</li>
<li>Outro item de lista</li>
</ul>
</body>
Como resultado:
um item de lista;
outro item de lista.
Comentrios
HTML.
O comando <ul> responsvel pelo recuo da lista de itens e que o comando <li> responsvel pela impresso do marcador dos itens.
A sintaxe de escrita dos comandos inicia com a abertura das tags <ul> e
<li> e encerra-se com as tags </li> e </ul> respectivamente.
Comando - <ol>
Definio
Permite a criao de uma lista de itens de informao com uma numerao.
32
Como resultado:
6. primeiro item lista;
7. segundo item da lista.
Comentrios

O comando <ol> responsvel
pelo recuo da lista de itens e que
o comando <li> responsvel
pela impresso da numerao dos
itens.
escrita dos comandos inicia com
a abertura das tags <ol> e <li>
e encerra-se com as tags </ol> e
</li>.
Exemplo prtico da
etapa 1
Crie, em drive local, uma pasta
chamada, pratica1html, abra o seu
editor de programas, ser utilizado o Notepad++.
Digite o script de uma pequena
aplicao apenas para praticar os
comandos passados at o momento, no existe pretenso nenhuma em desenvolver, um web
site mais elaborado.
Voc observou que o nome da pasta no est acentuado?

Isto comum em pastas e arquivos de aplicativos web, uma vez que
esses podem ser publicados em algum servidor web que no interprete
acentuao de nenhum tipo, da o fato de adotar esse critrio, desde j,
mesmo que ainda no esteja publicando as aplicaes em servidor web,
tanto para pastas como para arquivos de aplicaes web.
O script da aplicao didtica proposta

Com o seu editor aberto escreva o script a seguir:
<html>
<head>
<title>Aplicativo web - prtica 1 HTML</title>
</head>
<body>
<center>
<h1>
<font face=verdana color=#5F9EA0>PRTICA HTML - PARTE 1</font>
</h1>
</center>
<hr />
<font face=verdana>
<p>Traduzindo, no ao p da letra, mas na sua aplicao, o significado de <strong><i>HTML</strong></i> pode ser entendido
como, linguagem de formatao que permite a elaborao de
web sites com hiper-textos. Ao contrrio do que muitos se referem, <strong><i> HTML </strong></i>no uma linguagem
de programao, mas sim, uma linguagem de formatao que
interpretada pelo navegador internet, reproduz uma pgina
web.</p>
<h2><font color=#5F9EA0>RESUMINDO HTML</font></h2>
<ul>
<li><b><i>HTML</b></i><font color=red> Hypertext Markup Language</font>,ou seja, Linguagem de marcao ou
formatao de hipertexto;</li>
<li><b><i>HTML</b></i><font color=red> no</font>
linguagem de programao e <font color=red>sim</font>
de formatao; </li>
<li><b><i>HTML</b></i> <font color=red>interpretada</
font> pelo seu browser (navegador internet);</li>
<li><b><i>HTML</b></i> responsvel pela apresentao
da pgina web em um navegador internet.</li>
</ul>
<h2><font color=#5F9EA0>INFORMAES ADICIONAIS</
font></h2>
<ol>
<li><strong><i>HTML</i></strong> a base das aplicaes
web;</li>
PROGRAMAO WEB
33
<li>Por ser base das aplicaes web, integra-se com outras linguagens estticas como,<font color=red>Javascript</font>,
e dinmicas como <font color=red>PHP</font>; </li>
<li>Por se tratar de uma linguagem de formatao de fcil aprendizado e manuseio</li>
<li>Para entender a <strong><i>HTML</i></strong> necessrio conhecer sua estrutura e comandos e efetuar a prtica
dos mesmos.</li>
</ol>
</font>
<hr />
</body>
</html>
Salvando e executando seu script

Salve este script, na pasta pagina1html com o nome de index.html, cuidado, certifique-se de que salvou corretamente este arquivo com o nome
solicitado, pois qualquer erro no nome deste arquivo o browser (navegador internet) no interpretar seu script e nem tampouco reproduzir
sua pgina web. Por exemplo, se seu arquivo for salvo como index.txt.
html, esse no reconhecido pelo browser, ento basta voc acessar esse
arquivo e eliminar a extenso .txt, aps confirmar esse procedimento o
arquivo deve permanecer como index.html, agora sim.
Mas e agora? Como executar minha aplicao?
Isto pode ser feito de 2 formas.
Diretamente do arquivo acesse o arquivo index.html e execute,

com um duplo clique com o boto esquerdo do mouse, como se trata
de um arquivo HTML sua pgina ser executada, a partir do browser
configurado como padro em sua mquina.
A partir do browser abra o browser de sua preferncia e a partir
deste abra o arquivo index.html.

Confira algumas dicas para facilitar seu trabalho.
Evite copiar e colar as instrues do script durante a escrita deste.
Escreva o script em pequenos trechos, salve-o e execute-o, assim se houver algum erro ser mais fcil encontr-lo uma vez que a quantidade
de instrues pequena, por exemplo, comece escrevendo os scripts de
<html> at </html>, salve o arquivo, execute-o e veja o resultado parcial de sua pgina, no se assuste neste caso o resultado ser apenas do
texto Aplicativo web - prtica 1 HTML na barra de ttulo do browser em
funo dos comandos que escreveu neste trecho.
34
Mas a vantagem a seguinte, caso

haja algum problema que tenha
impedido este resultado a quantidade de comandos para visualizar
o erro pequena, assim fica fcil
detectar o erro.
Continue escrevendo seu script
mantendo o editor aberto, lgico, e o browser ativo, assim, medida que implementa outras linhas
de comando no seu editor, basta
acessar o browser e pressionar a tecla f5, isto far com que sua aplicao seja atualizada mostrando
as implementaes no seu script e
este procedimento deve ser repetido durante o desenvolvimento.
Voc deve ter observado que a
aplicao e a exceo do comando <br> e <small>, contempla
todos os comandos apresentados
at o momento, mas a medida que
novos comandos so apresentados voc estar implementando
nesta aplicao, portanto, logo
estar de volta ao script para acrescentar novos comandos. Vamos
em frente? O prximo tpico
tambm muito importante na
criao do seu web site.
Inserindo Imagens
muito comum voc necessitar
inserir imagens no seu web site e
quando isto ocorrer, basta recorrer ao comando.
<img src>
Supondo que deseja carregar uma

imagem, cujo arquivo seja do tipo
GIF e encontra-se na mesma pasta do programa onde escrever o
script para carregar a imagem.
Border este atributo
permite atribuir, imagem, uma

borda, o valor da borda atribudo em pixels, no exemplo, 1
pixel de espessura de borda para a
imagem.
Width este atributo permite atribuir, imagem, um valor

referente largura da imagem,
podendo esse ser em pixels ou
em %, no exemplo, este valor
de 20%, o que equivale a 20% da
visualizao total da pgina.
Figura 9: Localizao pasta imagem.gif
A sintaxe de uso ficaria assim:

<img src=imagem.gif>
Perceba que basta, em src, atribuir o nome do arquivo que deseja carregar, no esquecendo a extenso do arquivo, que neste caso GIF.
Agora suponha que o arquivo com a imagem desejada no encontra-se
na mesma pasta do programa onde escrever o cdigo, agora o arquivo
encontra-se, por exemplo, na pasta imagens, como representado a seguir:
Height este atributo permite atribuir, imagem, um valor

referente largura da imagem,
podendo esse, tambm, ser em
pixels ou em %, no exemplo, este
valor de 20%, o que equivale
a 20% da visualizao total da
pgina.
Align este atributo permite
atribuir, imagem, um valor referente ao alinhamento da imagem,
podendo esse ser:
left (alinhamento a esquerda);

right (alinhamento a direita);
center (alinhamento ao centro).
Title este atributo permite

atribuir, imagem, uma mensagem informativa. Essa mensagem
visualizada ao passar o mouse
sobre a imagem.
Figura 10: Localizao pasta imagem.gif na pasta imagens
A sintaxe de uso ficaria assim:

<img src=imagens/ imagem.gif>
A sintaxe para a insero de

imagens em pginas web so
sempre estas apresentadas
aqui, seja para inserir imagens em textos, tabelas ou
outros.
Perceba que no houve muita alterao para a situao anterior, continua atribuindo src a imagem que deseja carregar, s que agora informando que esta encontra-se na pasta imagens, imagens/ imagem.gif .
Se desejar, pode aplicar alguns atributos imagem, por exemplo:
<img src=imagem.gif border=1 width=20% height=20%
align=center title=Mensagem>
PROGRAMAO WEB
35
Comandos para links

Definio links em pginas web,
como j deve saber, so aqueles
textos ou imagens, que aparecem
geralmente sublinhados e que
normalmente esto interligados a
outros textos (hipertextos), pginas no mesmo documento, outras
pginas do mesmo web site e at
mesmo a outras pginas da internet de outros provedores.
Categorias de links
a. Links relativos
So aqueles que utilizam em
seu web site para acessar outras pginas, podendo essas
estar no mesmo diretrio ou
em diretrio diferente de onde
encontra-se a pgina deste link.
b. Link no mesmo documento
Suponha que queira interligar
parte de um texto a outro em
uma pgina, por exemplo, se
quiser em sua pgina index.
html, do seu aplicativo didtico, ir para o topo da pgina, onde encontra-se o ttulo
PRTICA HTML-PARTE
1 deve fazer o seguinte:
No script do arquivo index.
html localize a linha de instruo do ttulo da pgina PRTICA HTML-PARTE 1 e antes deste insira o comando <a
name=PRTICA>, a instruo no script ficaria assim:
<center>
<h1>
<font face=verdana
color=#5F9EA0>
<a name=PRTICA>
PRTICA HTML - PARTE 1
</a>
</font>
</h1>
</center>
36
Cria-se uma ancora com um nome

que deseja acessar de qualquer
parte do documento, no caso, o
nome escolhido foi PRTICA, por ser a primeira palavra
do ttulo, tambm por saber que
no haver em nenhum outro trecho da pgina esta palavra e por
ltimo esta encontra-se no topo
da pgina, local que desejamos
nos dirigir a partir do clique do
link.
Mas o processo no terminou por
a, precisamos agora implementar,
em algum trecho da pgina, o link
que ao ser clicado nos levar para
o topo da mesma.
Localizado o trecho da pgina,
deve escrever a instruo para a
criao do link como mostrado a
seguir:
<a href=#PRTICA>Ir para o topo</
a>
A instruo representa o comando principal utilizado nos links em

geral, veja o comando <a>, conhecido como ncora, ele o responsvel pela ligao hipertexto,
aps este comando aparece a referncia para onde o link deve ser
desviado, no caso, para um trecho
da pgina onde houver a palavra
PRTICA. Observe o uso do
caractere # antes da palavra a
ser procurada, isto significa que o
link interno, ou seja, na mesma
pgina.
Veja tambm que ao lado do comando foi escrito o texto do link
Ir para o topo, este, quando a
pgina for executada o texto que
aparecer para o usurio na cor
azul padro e sublinhado, ou seja,
o link a ser clicado na pgina web.
Agora sim, o link no mesmo documento est pronto para ser utilizado na pgina.
c. Link para outros documentos

d. muito comum que em aplicaes web voc necessite criar
um link para acessar outra pgina de seu web site, isto o que
aprender agora e bem simples.
Suponha que queira criar um

link para outra pgina em seu
aplicativo didtico, a instruo
ficaria assim:
<a href=nomedapagina.html>Texto
do link</a>
A sintaxe muito simples, inicia

com a ncora seguida da referncia para onde o link deve se
dirigir, no caso para uma pgina
HTML, e a seguir o texto do link,
que aparecer para o usurio no
sentido de orient-lo para onde o
link o levar.
e. Links absolutos
So aqueles links que utilizados
na pgina do seu web site que
acessam outros web sites de outros provedores da internet.
A sintaxe de uso desses tipos de
links muito simples, a exemplo
do que voc estudou anteriormente. Suponha que queira criar
um link em sua aplicao didtica
para acessar o site da GOOGLE.
< a href=http://www.google.com.
br> Acessar o GOOGLE
Tabela em HTML
Uma tabela um recurso muito
utilizado em editores de textos,
planilhas eletrnicas, bem como,
pginas web para demonstrar, de
forma organizada e clara, informaes importantes sobre um determinado assunto.
Tabela 1: Exemplo de tabela HTML
Linguagens para aplicao web

Nome
Definio
Aplicao
HTML (Hiper text markup language)
Linguagem de formatao que permite a

elaborao de web sites com hipertextos.
Responsvel pela reproduo de uma

pgina web.
CSS (Cascading style

sheets)
Linguagem de estilo utilizada para definir

apresentao das pginas HTML.
Responsvel por separar a formatao e

o contedo de uma pgina web, cabendo a esta a formatao.
Javascript
Linguagem de programao que permite

a implementao de estruturas lgicas,
funes,efeitos e animaes em pginas
web.
Responsvel por oferecer suporte a

HTML, principalmente em estruturas
lgicas de programao no lado cliente.
Linguagem de programao que permite a

implementao de estruturas lgicas, funes, acesso a arquivos e banco de dados em
pginas web.
Responsvel por oferecer suporte a

HTML, principalmente em estruturas
lgicas de programao, acesso a arquivos e banco de dados, no lado servidor.
PHP (Personal hypertext Processor)
Estrutura de uma tabela HTML
<html>
<head>
<title>TABELAS HTML</title>
</head>
<body>
<table border=1>
<tr>
<td>Coluna1</td><! Abre a coluna com <td>, escreve o
contedo da coluna, no caso, Coluna1, e aps encerra a coluna com </td> .-->
<td>Coluna2</td><!abre a coluna com <td>, escreve o
contedo da
coluna, no caso, Coluna2, e aps encerra a coluna com </td>
.-->
</tr> >
<tr>
contedo da coluna, no caso, Coluna1, e aps encerra a coluna com </td> .-->
contedo
da coluna, no caso, Coluna2, e aps encerra a coluna com </
td> .-->
</tr> >
</table>
</body>
</html>
Se voc implementar e executar

o script anterior obter o seguinte
resultado:
Figura 11: Exemplo da estrutura da

tabela HTML implementada
Uma tabela 2 x 2, ou seja, uma tabela com 2 linhas e 2 colunas.

A seguir confira como configura
tabela
Voc pode configurar a tabela
para, por exemplo, receber uma
cor de fundo, para isso basta fazer
o seguinte:
<table style=background-color:
#B0C4DE; boder=1>
PROGRAMAO WEB
37
#B0C4DE; border = 1 cellspacing=4>
Figura 12: Exemplo de tabela HTML

com cor de fundo
Observe que foi implementada

na tag <table> o atributo style, estilo = cor de fundo, para
a implementao da cor de fundo
na tabela.

com espaamento entre colunas
Inserindo bordas na tabela
Foi implementada na tag <table>

o atributo cellspacing, espao entre clulas, com o espaamento de
5 pixels.
Tambm pode configurar borda

com a espessura desejada, para
isso, basta fazer o seguinte:
Mais alguns recursos
#B0C4DE; border=1>
Veja que foi implementada na tag

<table> o atributo border, borda, com a espessura de 1 pixel.
Caso omita este atributo, ou

atribua 0 como valor para
este atributo, sua tabela fica
sem borda.

sem borda
Espaamento entre colunas

Caso queira determinar um espaamento entre as colunas (clulas)
da tabela deve fazer o seguinte:
38
<html>
<head>
<title>MAIS RECURSOS TABELAS</title>
</head>
<body>
<center>
<font face=verdana>
<table style=background-color : #FFFFFF; border=1 >
<tr>
<td colspan=2 align=center><font face=Calibri
color=red>COLUNAS MESCLADAS</font></td>
</tr>
<tr>
<td><font face = Arial color=green>Coluna1</
font></td>
<td><font face = Arial color=green>Coluna2</
font></td>
</tr>
<tr>
<td><font color=blue>Coluna1</font></td>
<td><font color=blue>Coluna2</font></td>
</tr>
</table>
</font>
</center>
</body>
</html>
Se voc implementar e executar

o script anterior obter o seguinte
resultado:
DICA
Voc pode formatar fonte
tambm de outras maneiras,
caso queira aprofundar este
estudo, baixe na internet tutoriais bsicos sobre HTML.
contendo links com imagens

com colunas mescladas e cores de
fonte
Centralizando
Para centralizar uma tabela basta
inserir a tag <center> antes da
tag <table>, mas no esquea de
finaliz-la tambm, veja no script
anterior.
Formatando fonte
Se desejar atribuir um nome, tamanho ou cor da fonte para a
sua tabela, basta tambm inserir a
tag<font>, com seus respectivos
atributos, antes da tag <table>,
lembrando que esse atuar para
toda a tabela ou para aquelas colunas que no houver configuraes
de fonte, por exemplo:
Observe no script anterior, que
configuramos a fonte verdana
para os textos da tabela, porm,
este s ter efeito para as colunas 1 e 2 da linha 3, porque estas
no foram configuradas com outra fonte, o mesmo no acontece
para a coluna da linha 1 e colunas
1 e 2 da linha 2, pois estas foram
configuradas para outras fontes,
respectivamente Calibri e Arial.
Mesclando clulas
Em algumas situaes interessante intitular a tabela de forma
que esteja integrada mesma,
conforme voc pde ver na figura
anterior da nossa tabela modelo,
para que isso seja possvel proceda da seguinte forma.
Primeiramente voc deve antever
quantas colunas, por linha, que
utilizar em sua tabela, pois sem
esta informao no conseguir
mesclar clulas.
Sabendo a quantidade total de
colunas por linha, da sua tabela
deve iniciar o script de sua tabela
normalmente e criar a coluna que
deseja mesclar, confira na figura
a seguir. Reparem no script o atributo colspan responsvel por
mesclar as clulas na tabela, a ele
foi atribudo o valor 2, que significa o nmero de clulas (colunas)
que deve mesclar, que por sua vez,
o nmero de clulas (colunas)
por linha que utilizado na tabela
em questo.
importante atentar para o
atributo align tambm na coluna mesclada, isto para alinhar
o contedo da clula, neste caso,
ao centro. O alinhamento pode
ser feito para qualquer outra coluna, seja ela mesclada ou no.
Links com imagens em tabela

Para inserir um link com imagem
em uma clula (coluna), de uma
tabela basta utilizar os comandos
de link e insero de imagens,
conjuntamente, dentro da coluna
que desejar. Em nosso exemplo
tivemos que inserir uma 3 coluna
nas 2 linhas da tabela e respectivamente nestas.
Para a coluna com a imagem link
do lpis:
<td><a href=><img src=editar.
jpg title=clique aqui></a></td>
Para a coluna com a imagem link

do X:
<td><a href=><img src=excluir.
jpg title=clique aqui></a></td>
No exemplo as imagens encontram-se na mesma pasta do programa onde foi escrito o script do
link imagem.
DICA
Caso queira retirar aquela
borda de link da imagem,
basta fazer o seguinte:
<td><a href=><img
src=editar.jpg title=clique
aqui border=0></a></td>
Insira o atributo border na
tag <img> e atribua o valor 0.
PROGRAMAO WEB
39
Formulrio em HTML
mais um dos recursos impor-tantes no universo da construo de
aplicaes web, seja permitindo o envio de dados por e-mail ou auxiliando
no cadastramento de usurios em sites ou mesmo auxiliando no armazenamento de informaes em banco de dados, assim como em outras
atividades.
type (tipo) identifica que o
tipo do componente. Deve ser do

tipo text (texto);
name identifica o nome do

componente text no formulrio;
maxlength nmero mximo de caracteres que pode ser
digitado em seu interior;
size nmero que representa
a largura do componente dada
em pixels.
DICA
Figura 17: Exemplo de formulrio
Componentes bsicos
Importante que antes de partir para a construo do formulrio conhea
alguns dos seus componentes bsicos:
Label ou rtulo
Nome:
Identifica no formulrio o que o usurio deve informar em um respectivo campo do formulrio.
Sintaxe de uso
<label>Nome:</label>
Text
Este componente permite uma entrada de dados na forma de texto em
uma nica linha. Para implementar esse componente no formulrio deve
utilizar o comando:
<input> - significa entrada.
Neste comando so utilizados os seguintes atributos:
40
Para determinar a largura do

componente text, verifique
o tamanho mximo de caracteres registrado em maxlength, acrescente para size
15 ou 20 pixels.
Exemplo se em maxlength
voc registrou 50, atribua
para size 65 ou 70, desta
forma voc est garantindo
que caso o usurio preencha
todas as posies estas sero
visualizadas pelo usurio do
formulrio.
Sintaxe de uso
<input type=text name=txtnome

maxlength=30 size=45>
Select
Este componente permite que a
informao entrada para o formulrio seja feita por meio da
seleo de opes registrada em
uma lista. Para implementar esse
componente no formulrio deve
utilizar o comando
<select> - seleo
Neste comando estamos utilizando o seguinte atributo
name identifica o nome do componente select no formulrio.

Dentro do comando <select> devem ser implementadas as opes
do select a partir do comando <option>:

<option value=0>---Escolha o sexo---</option>
<option value=feminino>Feminino</option>
<option value=masculino>Masculino</option>
No comando <option> foi utilizado o atributo value, este
atributo serve para determinar o valor da opo selecionada, ou seja,

se escolher o sexo como Feminino, o valor de entrada no formulrio
feminino e assim por diante.
Sintaxe de uso
<select name=selsexo>
<option value=masculino>Feminino</option>
</select>
Radio Buttom (Boto de rdio)

No
Este componente permite a entrada de dados no formulrio clicando
no boto de rdio, vias de regra existe mais de um boto de rdio como
opo, mas somente um dentre vrios que pode ser escolhido, ou seja,
nesse tipo de componente somente uma, das vrias opes, que pode
ser escolhida.
Para implementar esse componente no formulrio deve utilizar o comando
type (tipo) identifica que o tipo do componente. Deve ser do
tipo rdio;
Aqui cabe uma observao

importante, o nome dos botes e rdio deve ser o mesmo
para aquela entrada de dados
do formulrio desejado. Por
exemplo, se deseja fazer uma
entrada de dados no formulrio para informar se tem
filhos ou no, vai utilizar 2 botes de rdio, como no nosso
exemplo, isto significa que na
propriedade name destes, os
valores com os nomes devem
ser os mesmos, isto porque,
assim no momento em que o
formulrio for utilizado apenas um dos botes poder
ser escolhido, caso contrrio,
se atribuir nomes diferentes
aos componentes todos os
botes de rdio podero ser
escolhidos, o que foge as caractersticas do componente.
Sintaxe de uso
<input type=radio
name=rdbtnfilhos
value=Sim> Sim
<input type=radio
name=rdbtnfilhos
value=No>No
Reparem que aqui estamos
implementando no formulrio 2 componentes do tipo
rdio e os dois com o mesmo
nome.
name identifica o nome do componente no formulrio;

value determina o valor das opes dos botes de rdio, por
exemplo, se o usurio escolher o boto de rdio Sim, o valor deste

campo passa a ser aquele atribudo por este atributo para este componente, no caso foi atribudo Sim, do contrrio o valor do campo passa
a ser aquele atribudo para o atributo value do componente No, ou
seja, o valor atribudo neste caso foi No. Confira a seguir.
PROGRAMAO WEB
41
CheckBox (Caixa de seleo)

Caminhada
Este componente permite a entrada de dados no formulrio, a partir do
clique do mouse na caixa de seleo, a exemplo do boto de rdio, devem
existir vrias caixas de seleo como opo para o usurio, mas ao contrrio do boto de rdio, mais de uma opo pode ser escolhida.
Para implementar esse componente no formulrio deve utilizar o comando
type tipo, identifica que o tipo do componente deve ser do tipo
componente no formulrio;
cols identifica a quantidade de colunas que deseja que o

componente contenha;
rows identifica a quantidade de linhas que deseja que o

componente contenha;
Esse componente no aceita o
atributo value, caso queira inserir,
em tempo de programao, um
valor nesse componente deve fazer o seguinte:
checkbox;
name identifica o nome do componente no formulrio;

value determina o valor das opes das caixas de seleo, por
exemplo, se o usurio escolher a caixa de seleo Caminhada, o valor

deste campo passa a ser aquele atribudo por este atributo para este
componente, no caso foi atribudo Caminhada, e assim por diante.
Apesar de serem vrias caixas de seleo juntas para que o usurio faa
sua entrada de dados no formulrio, trata-se de componentes diferentes um do outro, cada checkbox tem o seu prprio nome e valor.
Sintaxe de uso
<inserir destaque>
<input type=checkbox name=chbxfuma value=Fuma>Fuma
<input type=checkbox name=chbxcaminhada
value=Caminhada>Caminhada
<input type=checkbox name=chbxleitura value=Leitura>Leitura
<fechar destaque>
TextArea
<textarea
name=txtareanome
cols=10 rows=3>Digite
aqui seu texto</textarea>
O texto escrito entre o comando que inicia e termina o componente textarea, isto permite inserir,
previamente, um texto no componente.
Boto Submit (enviar)

Este componente responsvel
por enviar os dados do formulrio
ao destino que lhe for orientado.
Para implementar esse componente no formulrio utilize o comando
Este componente permite uma entrada de dados na forma de texto em

vrias linhas. Para implementar esse componente no formulrio deve
utilizar o comando
Nesse comando so utilizados os

seguintes atributos:
type tipo, identifica que o
<textarea> - significa rea de texto.
tipo do componente deve ser do

tipo submit (enviar);
42
value determina o valor do
boto, ou seja, o que armazenado quando este clicado e

tambm, ao contrrio dos demais
que utilizam este atributo, exibe
no boto o valor atribudo a esse
atributo, exemplo, a imagem do
boto acima aparece com o texto
Enviar, porque esta palavra
que encontra-se no atributo value
desse boto.
DICA
Os recursos aqui apresentados so aqueles considerados como bsicos necessrios para a construo de suas aplicaes web. Caso queira aprofundar-se em outros recursos HTML, baixe tutoriais HTML
para conhecer mais como, por exemplo, em: <http://pt-br.html.net/
tutorials/html/>.
Est preparado para prosseguir sua viagem de conhecimento? Muitos

caminhos ainda esto por vir.
Sintaxe de uso
<input type=submit
name=btnenvia value=Enviar>
Boto Reset (limpar)

Este componente responsvel
em limpar os contedos dos campos do formulrio, apagar mesmo.
Para implementar esse componente no formulrio deve utilizar
o comando
Exemplo prtico da etapa 2

Para praticar os recursos apresentados, resgate a primeira implementao de sua aplicao, esclarecendo que a estrutura de pasta considerada
na aplicao a seguinte:
Nesse comando so utilizados os

seguintes atributos:
type tipo, identifica que o
tipo do componente deve ser do

tipo reset (reiniciar);

value determina o valor do
boto, ou seja, o que armazenado quando esse clicado a

imagem do boto acima aparece
com o texto Enviar, porque
esta palavra que encontra-se no
atributo value desse boto.
Sintaxe de uso
<input type=reset
name=btnlimpa value=Limpar>
Figura 18: Estrutura de pastas aplicativo pratica1html
Para esta implementao, insira na pasta imagens um arquivo chamado

alias_path.gif nas especificaes de 16 pixels de largura por 11 pixels de
altura, que refere-se a uma imagem de uma seta que ser implementada
antes dos links conforme script a seguir.
Inicialmente abra o arquivo index.html localizado na pasta pratica1html
e implemente os scripts conforme orientaes.
Como primeira ao, prepare o ttulo da pgina para a utilizao de um
link interno, para isso faa o seguinte no script:
<center>

<h1>

<font face=verdana color=#5F9EA0>

<a name=PRTICA>

PRTICA HTML - PARTE 1

</a>

</font>

</h1>
</center>
PROGRAMAO WEB
43
As demais aes para o link interno encontrar no script a seguir.

Agora, localize no script a tag </ol> e a tag<hr />, entre estas tags que
dever inserir os scripts escritos a seguir:
</ol>
<h2>
<font color=#5F9EA0>COMENTRIOS</font>
</h2>
<p>
a linguagem HTML fornece alguns recursos como insero de
imagens e links, bem como, a aplicao de tabelas e formulrios,
possibilitando assim a construo de pginas para a internet com
organizao, clareza e navegabilidade.
<br>
Vale lembrar que nem todos os comandos, bem como, recursos
esto contemplados neste estudo, a preocupao maior com o
fundamento da linguagem, para que possa desenvolver as atividades, futuramente propostas.
</p>
<h2>
<font color=#5F9EA0>LINKS TEIS</font>
</h2>
<img src=imagens/alias_path.gif>

<a href=http://pt-br.html.net/tutorials/html/> Tutorial HTML
</a>
<br />

<a href=tabcores.html>Resumo cores HTML
</a>
<br />

<a href=>Cadastre-se
</a>
<br />
<br />
<center>
<a href=#PRTICA>Ir para o topo</a>
</center>
<br /><!instruo que refere-se ao link interno, ou seja, ao clicar
neste link a pgina desviada para o topo da pgina.-->
<hr />
44
A pgina index.html est pronta,

mas voc implementou 2 links
Resumo cores HTML e Cadastre-se, estes devem acessar, respectivamente, pginas que ainda no
existem, portanto, se clicar em
um destes links uma mensagem
dizendo que as pginas no foram
encontradas ser enviada.
Sendo assim, agora execute a pgina index.html para ver se est
tudo OK, caso tenha algum problema, corrija, se estiver tudo correto teste os links externo (Tutorial HTML) e interno (Ir para o
topo), a execuo dos links Resumo cores HTML e Cadastre-se
ainda no so possveis, temos
que avanar um pouco mais.
Continuando, vamos agora implementar os scripts necessrios para
o acesso dos links Resumo cores
HTML e Cadastre-se, primeiramente prepare o script da pgina
que mostrar o Resumo cores
HTML, para isso atente para o
seguinte:
1. inicie um novo documento no
seu editor de programas;
2. este script deve ser salvo na
pasta pratica1html, juntamente com o arquivo index.html,
com o nome de tabcores.html.
A seguir o script desta pgina:
<html>
<head>
<title>Aplicativo web - prtica 1 HTML - RESUMO CORES HTML</title>
</head>
<body>
<center>
<h1>
<font face=verdana color=#5F9EA0>
<a name=PRTICA>TABELA RESUMO DE CORES HTML</a>
</font>
</h1>
</center>
<hr />
<center>
<font face=verdana>
<p align=left>
As cores em HTML, como j estudou, podem ser atribudas em vrias situaes em
um pgina web, seja como fundo da pgina, tabela ou formulrio, como tambm
nos textos.
Estas podem ser informadas de 2 maneiras a saber.
</p>
<table style=background-color:#B0C4DE; border=1 cellspacing=2>
<tr>
<td colspan=3 align=center>
<font face=Calibri color=black>
<strong>ATRIBUIR AS CORES</strong>
</font>
</td>
</tr>
<tr>
<td align=center>
<font face = Calibri color=black><strong>Cor</strong></font>
</td>
<td align=center>
<font face = Calibri color=black><strong>Pelo nome</strong></font>
</td>
<td align=center>
<font face = Calibri color=black>
<strong>Pelo cdigo hexadecimal</strong>
</font>
</td>
</tr>
<tr>
<td align=center><font face = Arial color=white>Branca</font></td>
<td align=center><font face = Arial color=white>White</font></td>
<td align=center><font face = Arial color=#FFFFFF>#FFFFFF</font></td>
</tr>
<tr>
<td align=center><font face =Arial color=black>Preta</font></td>
<td align=center><font face=Arial color=black>Black</font></td>
<td align=center><font face = Arial color=#000000>#000000</font></td>
PROGRAMAO WEB
45
</tr>
<tr>
<td align=center> <font face =Arial color=blue>Azul</font> </td>
<td align=center> <font face=Arial color=blue>Blue</font> </td>
<td align=center><font face = Arial color=#0000FF> #0000FF </font> </td>
</tr>
<tr>
<td align=center><font face =Arial color=yellow>Amarelo</font></td>
<td align=center><font face=Arial color=yellow>Yellow</font></td>
<td align=center><font face = Arial color=#FFFF00>#FFFF00</font></td>

</tr>

<tr>

<td align=center><font face =Arial color=green>Verde</font></td>

<td align=center><font face=Arial color=green>Verde</font></td>

<td align=center><font face = Arial color=#2E8B57>#2E8B57</font></td>
</tr>
<tr>

<td align=center><font face =Arial color=red>Vermelha</font></td>

<td align=center><font face=Arial color=red>Red</font></td>
<td align=center><font face = Arial color=#FF0000>#FF0000</font></td>
</tr>
<tr>

<td align=center><font face =Arial color=gray>Cinza</font></td>

<td align=center><font face=Arial color=gray>Gray</font></td>

<td align=center><font face = Arial color=#696969>#696969</font></td>
</tr>
</table>
</center>
<p>Dica </br>
D preferncia para a atribuio das cores em cdigo hexadecimal, voc dispe de
muito mais opes, para isso consulte a tabelas de cores em http://www.mxstudio.
com.br/Conteudos/Dreamweaver/Cores.htm.
</p>
<center>
<a href=index.html>Principal</a>
<a href=cadastro.html>Cadastre-se</a>
</center>
<br />
<hr />
</font>
</body>
</html>
Se voc j implementou o script

anterior, o salvou, agora execute
a pgina index.html para ver se
est tudo OK, se constatar algum
erro, faa a correo e quando
no houver mais erros, teste o
link Resumo cores HTML, verifique se este o desvia para a pgina
Tabela Resumo de Cores HTML,
se sim, est funcionando.
46
Ainda no encerrou a aplicao,

j implementou o script da pgina
Resumo cores HTML, agora falta implementar o script necessrio
para o acesso do link Cadastre-se,
atente para o seguinte:
1. inicie um novo documento no
seu editor de programas;
2. este script deve ser salvo na pasta pratica1html, juntamente

com o arquivo index.html,
com o nome de cadastro.html.
A seguir o script desta pgina:
<html>
<head>
<title>Aplicativo web - prtica 1 HTML - CADASTRE-SE</title>
</head>
<body>
<center><h1><font face=verdana color=#5F9EA0>FORMULRIO EM HTML</font>
</h1></center><br />
<br />
<center><font face=verdana>
<table>
<form name=frmcadastro action= method=>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td align=right>Nome :</td>
<td align=left><input type=text name=txtnome maxlength=30 size=45></td>
</tr>
<tr>
<td align=right>Endereo :</td>
<td align=left><input type=text name=txtendereco maxlength=50 size=75></
td>
</tr>
<tr>
<td align=right>Sexo :</td>
<td align=left><select name=selsexo>
<option value=masculino>Feminino</option>
</select>
</td>
<tr>
<td align=right>Filhos :</td>
<td align=left><input type=radio name=rdbtnsim value=Sim>Sim
<input type=radio name=rdbtnsim value=No>No</td>
</tr>
<tr>
<td align=right>Hbitos :</td>
<td align=left><input type=checkbox name=chbxfuma value=Fuma>Fuma
<input type=checkbox name=chbxfuma value=Caminhada>Caminhada
<input type=checkbox name=chbxleitura value=Leitura>Leitura</td>
</tr>
<tr>
<td>Observao :</td>
<td><textarea name=txtarobs cols=20 rows=5></textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
PROGRAMAO WEB
47
<tr>
<td><input type=submit name=btnenvia value=Enviar></td>
<td align=left><input type=reset name=btnlimpa
value=Limpar></td>
</tr>
</form>
</table><br />
<a href=index.html>Principal</a>
<a href=tabcores.html> Resumo cores html</a>
</center><br />
</body>
</html>
Aps implementar o script anterior, salve-o, agora execute a pgina index.

html para ver se est tudo OK, se constatar algum erro, faa a correo e
quando no houver mais erros, teste o link Cadastre-se, verifique se este
o desvia para a pgina Formulrio em HTML, se sim, est funcionando.
Agora sim, a aplicao proposta est encerrada. Nesta seo voc conheceu os fundamentos da linguagem HTML e por consequncia deu um
grande passo para a construo de aplicaes web e web sites dinmicos.
A HTML por si s no permite a construo de aplicaes dinmicas,
para isto, necessrio a aplicao de outras linguagens, ento prossiga
para a prxima seo e conhea tambm sobre CSS, este assunto muito
importante para o seu desenvolvimento.
CSS X HTML
Como voc j sabe a HTML
uma linguagem de formatao, a
partir do seu uso consegue estruturar e marcar textos, cabealhos,
pargrafos, links, botes, imagens,
formulrios e outros, j a CSS permite a padronizao visual destes
elementos na pgina como cores,
estilos de linhas, bordas, posicionamento de textos, layout, assim
por diante.
Voc poder verificar no decorrer desta seo, que existe uma
relao muito forte entre as duas
linguagens, ver que quando aplicar estilos CSS, estes trabalham,
totalmente na padronizao visual das pginas HTML a partir de
seus elementos como, o corpo da
pgina, links, pargrafos, tabelas,
formulrios e outros. Com isto a
responsabilidade do padro visual da pgina retirada da HTML
e passada para a CSS restando a
HTML a responsabilidade sobre a
estrutura e contedo das pginas
web.
Seo 3
Script CSS
importante frisar que neste momento resgatar os conhecimentos sobre os fundamentos da HTML para que possa compreender e trabalhar
os conhecimentos sobre CSS.
Agora hora de conhecer CSS, sua definio, relao com a HTML,
estrutura bsica de uso, elementos bsicos de uso e aplicao prtica.
CSS (Cascading Style Sheet)

A exemplo da HTML, no se trata de uma linguagem de programao,
pode-se tratar como linguagem, mas tambm no linguagem de formatao, esta o HTML, mas ento, linguagem do que? Linguagem que
permite a aplicao de estilos em pginas web, isto mesmo, linguagem de
estilos.
48
Com esta parceria entre a CSS

e HTML suas aplicaes ficam
mais organizadas, leves e fceis de aplicar manuteno,
pois os scripts encontram-se
organizados em arquivos diferentes e em tamanho reduzidos.
Estrutura bsica CSS

A melhor maneira de se compreender a relao CSS X HTML praticando no acha? o que far a partir de agora, s precisa preparar o
ambiente para isto, ento, antes de prosseguir faa o seguinte:
Crie, em drive local, uma pasta chamada, pratica1css, agora crie uma pasta, chamada css dentro da pasta pratica1css e em seguida abra o seu
editor de programas, o Notepad++e aguarde novas orientaes.
Sintaxe e componentes CSS

A estrutura bsica de uma estrutura CSS segue a seguinte sintaxe:
elemento {
atributo1 : valor;
atributo2 : valor;
atributo3 : valor;
}
Conhecendo os componentes envolvidos.
Elemento - define o elemento ao qual o estilo ser aplicado, podendo este ser uma marca (tag) HTML, sem os sinais de maior e menor,
este tambm conhecido como seletor.
Neste script CSS estamos determinando que todas as pginas

HTML que contiverem um corpo
<body> devem seguir a configurao de:
margem zero;
famlia de fonte Verdana ou
Arial ou Helvtica ou sans-serif;
tamanho da fonte 12;

cor de fundo cinza;
texto alinhado ao centro;
cor de primeiro plano branca.

Neste caso, isto atingir o texto.
Isto mesmo! Todas as pginas
HTML com a tag <body> utilizaro essa formatao.
Salve o script na pasta css com o
nome de layout.css. Cuidado,
certifique-se que salvou este arquivo corretamente, principalmente com a extenso css, pois
do contrrio no ter sucesso.
Agora, abra um novo documento
no seu editor de programas e escreva o seguinte script HTML:
Atributo - so as caractersticas ou propriedades que deseja definir
ao elemento como, por exemplo, font-size (tamanho da fonte), cuidado,

deve ser um atributo vlido CSS.
Valor do atributo - so os valores vlidos atribudos aos atributos
do elemento CSS. Cuidado esses valores devem ser vlidos para o

atributo utilizado.
Faa o seguinte, abra um novo documento no seu editor de programas
e escreva o script a seguir:
body{ /*Estilo para o corpo de uma pgina HTML*/

margin : 0px ; /*Tamanho de todas as 4 margens da pgina */

font-family : Verdana, Arial, Helvetica, sans-serif ;

/*Tipo de fonte*/

font-size : 12px ; /*Tamanho da fonte atribudo em pixels*/

background-color : #FEE4AB ; /*Cor de fundo ou transparncia*/

text-align : center ; /*Alinhamento do texto*/

color : #FFFFFF;/*Cor de primeiro plano*/
}
<html>
<head>
<title>Aplicando CSS - prtica 1</title>

<link href=css/layout.css
rel=stylesheet />
</head>
<body>
<h1>TESTE ARQUIVO DE
CONFIGURAO CSS 1</h1>
</body>
</html>
PROGRAMAO WEB
49
Salve este script na pasta pratica1css com o nome de index.html.

Ao executar esta pgina, ter como resultado uma pgina com o fundo
na cor cinza, zero de margem esquerda, direita, superior e inferior, o
texto aparece alinhado ao centro, na fonte Verdana e cor branca.
Figura 19: Resultado pgina configurada com CSS externo
Percebeu que ao aplicar uma configurao CSS para um elemento HTML

est determinando uma regra ou padro para os referidos elementos da
sua aplicao web?
Por isso voc tem que conhecer muito bem o HTML como o CSS para
que possa fazer uso desses recursos dentro das regras de boas prticas.
Modalidade de implementao
CSS pode ser aplicado de 3 modalidades diferentes, confira!
1. Externo como mostra o exemplo anterior, observe o script com as
configuraes CSS este est em um arquivo separado, requerendo
que seu script HTML faa um link com este para que a pgina possa utilizar estas configuraes. Esta modalidade lhe permite escrever
scripts CSS em um ou mais arquivos que, por sua vez, podem ser aplicados em uma ou mais pginas web.
2. Incorporado o script com as configuraes CSS escrito no cabealho do script HTML onde deseja aplicar a configurao. Isto faz
com que essas configuraes sejam aplicadas somente esta pgina.
50
Exemplo:
Abra o script HTML index.html que salvou na pasta pratica1css e implemente o seguinte, abaixo da tag <title>, o script CSS e em <body>,
mais precisamente, abaixo do ttulo da pgina, implemente o pargrafo,
ambas as implementaes confira a seguir.
<html>
<head>

<style type=text/css>
p{

font-family:Calibri;

font-size:20px;

color:#B0C4DE;

text-align:left;
}
</style>

<link href=css/layout.css rel=stylesheet />
</head>
<body>
<h1>TESTE ARQUIVO DE CONFIGURAO CSS 1</h1>
<p>Aqui um texto formatado com CSS incorporado<br> nesta
pgina.</p>
</body>
</html>
Salve novamente este script para atualiz-lo com as novas implementaes.

Observe o incio da declarao CSS em <style type=text/css>, dentro desta a configurao CSS para pargrafo, ou seja, est configurando
a fonte Calibri, o tamanho de 20px, cor azul clara e texto alinhado a
esquerda, para todos os pargrafos implementados, nesta pgina, pois
estas configuraes so locais.
Perceba tambm que nosso script est fazendo uso de configuraes CSS
externa e local, at o presente momento. Externa para configurar o corpo da pgina e local para pargrafos.
na cor cinza, zero de margem esquerda, direita, superior e inferior, o
ttulo aparece alinhado ao centro, na fonte verdana e cor branca e agora
tambm com um pargrafo na fonte Calibri tamanho 20 px na cor azul
clara e alinhado a esquerda.
PROGRAMAO WEB
51
Figura 20: Resultado pgina configurada com CSS incorporado
3. Inline o script com as configuraes CSS escrito diretamente na tag HTML, afetando
somente o contedo associado
a esta.
Exemplo:
Abra o script HTML index.html

que salvou na pasta pratica1css e
implemente o seguinte; abaixo da
tag<p></p><br> implemente
a tag de link com a configurao
CSS para que o link aparea sem
o sublinhado e o texto na cor
branca. Veja que abaixo desta,
voc tem outro tag link sem estilo,
para comprovar que a configurao CSS do link anterior Inline,
ou seja, s ter efeito para a linha
onde foi escrita.
52
<html>
<head>
<style type=text/css>
p{
font-size:20px;
color:#B0C4DE;
text-align:left;
}
</style>

</head>
<body>
<p>Aqui um texto formatado com CSS incorporado

<br> nesta pgina.</p><br>
<a style=text-decoration:none ; color:#fff href=http://pt-br.html.
net/tutorials/html/>Tutorial HTML</a><br>

<a href=http://pt-br.html.net/tutorials/html/>Tutorial HTML
</a><br />
</body>
</html>

na cor cinza, zero de margem esquerda, direita, superior e inferior, o ttulo aparece alinhado ao centro, na fonte verdana e cor branca, configuraes CSS externa, tambm com um pargrafo na fonte calibri tamanho
20 px na cor azul clara e alinhado a esquerda.
Configurao CSS incorporada e agora um link estilizado sem sublinhado na cor branca, configurao CSS Inline e abaixo deste, um link sem
nenhum estilo, mas utilizando as configuraes externas, para fonte e
alinhamento de texto.
Tutorial HTML
Figura 21: Resultado pgina configurada com CSS inline
Tags personalizadas
Voc pode dar um tratamento todo especial as suas tags HTML como,
por exemplo, criar configuraes CSS para personalizar textos, links,
imagens, formulrios e outros e aplicar aos componentes que desejar e
quando desejar. Essas configuraes podem ser aplicadas tanto na modalidade externa como incorporada.
Abra o script CSS que salvou na pasta css da sua aplicao pratica1css e
neste implemente, abaixo do script de configurao do body{},as seguintes tags personalizadas:
.alinha_direita{
text-align:right;
} /* usada para
alinhar contedo a direita */
.alinha_centro{
text-align:center;
} /* usada para
alinhar contedo ao centro*/
.alinha_esquerda{
text-align:left;
} /* usada para
alinhar a esquerda*/
PROGRAMAO WEB
53

Observe que antes do nome dos elementos agora voc escreve o .
Identificando um elemento especial, personalizado, chamado classe
que, por sua vez, contm configuraes que podem ser utilizadas, no
obrigatoriamente, mas para qualquer contedo HTML.
Agora abra o script HTML index.html que salvou na pasta pratica1css
e implemente o seguinte, abaixo da instruo do ltimo link ,TUTORIAL HTML, as tags com os textos alinhados respectivamente, a direita, centro e a esquerda, como mostra o script a seguir.
<html>
<head>
p{
font-size:20px;
color:#B0C4DE;
text-align:left;
}
</style>

</head>
<body>
<p>Aqui um texto formatado com CSS incorporado</br>
nesta pgina.
</p><br>
<a style=text-decoration:none;color:#fff
href=http://pt-br.html.net/tutorials/html/>
Tutorial HTML</a><br>
<a href=http://pt-br.html.net/tutorials/html/>
Tutorial HTML</a><br />

<p class=alinha_direita>Texto utilizando a configurao personalizada CSS para alinhamento a direita</p>
<p class=alinha_centro>Texto utilizando a configurao personalizada CSS para alinhamento ao centro</p>
<p class=alinha_esquerda>Texto utilizando a configurao personalizada CSS para alinhamento ao centro</p>
</body>
</html>
54
Salve novamente este script para

atualiz-lo com as novas implementaes.
Ao executar esta pgina, ter
como resultado uma pgina com
o fundo na cor cinza, zero de
margem esquerda, direita, superior e inferior, o ttulo aparece
alinhado ao centro, na fonte verdana e cor branca, configuraes
CSS externa, tambm com um pargrafo na fonte Calibri tamanho
20 px na cor azul clara e alinhado
a esquerda.
Configurao CSS Incorporada,
um link estilizado sem sublinhado
na cor branca, configurao CSS
Inline, abaixo deste, um link sem
nenhum estilo, mas utilizando as
configuraes externas, para fonte e alinhamento de texto e agora
trs linhas com textos alinhados,
respectivamente, direita, centro
e a esquerda a partir das configuraes personalizadas implementadas externamente.
Tutorial HTML
Figura 22: Resultado pgina configurada com CSS personalizado
Aqui cabe uma observao importante, note que implementamos nas

tags <p class=alinha_direita> a chamada das configuraes CSS personalizadas (classes), respectivamente.
Mas uma curiosidade, porque os textos alm de alinhados de acordo
com a classe solicitada, tambm encontram-se naquela cor, tamanho e
tipo de fonte?
simples, que como estamos trabalhando com a tag <p>, alm das
classes estilizadas, est tambm utilizando as configuraes Incorporadas para esta tag.
Configuraco CSS para a tag <DIV>.

DIV uma tag HTML utilizada para formatar um grande bloco,
diviso, de uma pgina web, abrangendo textos e/ou outros elementos.

timo recurso para a criao de layouts em pginas web.
Para praticar o uso de configuraes CSS para DIV crie, em drive local,
uma pasta chamada, pratica2css, na sequencia, crie uma pasta, chamada
css dentro da pasta pratica2css e em seguida abra o seu editor de programas.
A ideia criar uma aplicao web com uma estrutura de DIVS do tipo
cabealho, lado esquerdo, centro e rodap. Para que possa, no futuro,
desenvolver a estrutura de layout que lhe convir.
Ento vamos l! Escreva o script a seguir:
PROGRAMAO WEB
55
body{
margin:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#FEE4AB;
text-align:center;
}
div#tudo{
margin:0px auto;
width:766px;
height:580px;
border-right:1px solid #000000;
border-left:1px solid #000000;
} /* Delimita o espao til do contedo e sua pgina e engloba todas as outras divs. */
div#cabecalho{
width:765px;
height:140;
background-color: #FFFFFF;
font-size:22px;
line-height:150px;
text-align:center;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
}/*Div do cabealho do corpo da pgina*/
div#esquerda{
width:200px;
height:368px;
float:left;
font-size:12px;
line-height:350px;
text-align:center;
border-right:1px solid #000000;
}/*Div lateral esquerda do corpo da pgina*/
div#centro{
width:564px;
height:370px;
float:right;
font-size:22px;
line-height:350px;
text-align:center;
background-color:#ffffff;
overflow:auto;
}/*Div central do corpo da pgina*/
div#rodape{
width:765px;
height:67px;
clear:both;
font-size:22px;
line-height:70px;
text-align:center;
text-align:center;
}/*Div do rodap do corpo da pgina*/
56
Salve este script na pasta css que,

por sua vez, encontra-se na pasta pratica2css, com o nome de
layout1.css.
Agora abra um novo documento
no seu editor de programas e escreva o seguinte script:
<html>
<head>
<link
href=css/layout.
css rel=stylesheet />
</head>
<body>

<div id=tudo>

<div id=cabecalho>

DIV DO CABEALHO DA PGINA
</div>

<div id=esquerda>

DIV DA ESQUERDA DA PGINA
</div>

<div id=centro>

DIV DO CENTRO DA PGINA
</div>

<div id=rodape>

DIV DO RODAP DA PGINA
</div>

</div>

</body>
</html>
Salve este script na pasta pratica2css, com o nome de index.

html.
Ao executar esta pgina, ter como resultado uma pgina web com uma
estrutura de div delimitando o cabealho, lateral esquerda, centro e rodap da pgina.
Figura 23: Resultado layout de pgina com uso de div em CSS
Nestas divs voc pode inserir o elemento que desejar texto, imagem,
link, formulrio, tabela e assim por diante, no existe restrio. Se desejar inserir uma imagem diretamente em uma div, por exemplo, na div
cabealho, deve implementar o seguinte nas configuraes CSS deste
elemento:
div#cabecalho{

width:765px;

height:140;

color: #FFFFFF;
background-image: url(../imagens/imgempxyz.jpg);


font-size:22px;

line-height:150px;

text-align:center;


}/*Div do cabealho do corpo da pgina*/
A seguir a relao de alguns atributos dos elementos CSS, por ordem de

utilizao:
PROGRAMAO WEB
57
Tabela 2: Atributos dos elementos CSS utilizados no estudo
Atributo
margin
font-family
font-size
background-color
Definio
Tamanho de todas as 4 margens da pgina web.
Tipo de fonte.
Tamanho da fonte atribudo em pixels.
Cor de fundo ou transparncia.
text-align
Alinhamento do texto.
color
Cor de primeiro plano.
text-decoration
Sublinhado ou riscado.
width
Largura do elemento.
height
Altura do elemento.
border-right
Largura, estilo e cor da borda da direita.
border-left
Largura, estilo e cor da borda da esquerda.
line-height
Distncia entre linhas de base.
border-top
Largura, estilo e cor da borda superior.
border-bottom
Largura, estilo e cor da borda inferior.
float
Determina se o elemento flutua na pgina, se para

esquerda, direita ou centro.
overflow
Exibio de contedos que so maiores do que

suas molduras
clear
Elementos flutuantes esquerda ou a direita de

um elemento.
Quer aprofundar-se mais em css? Ento procure alguns bons tutoriais,

como, por exemplo, em <http://pt-br.html.net/tutorials/css/>.
58
DICA
Quando desenvolver uma
soluo para web site, durante o desenvolvimento, teste os resultados em
mais de um navegador, por
exemplo, Mozilla Firefox e
Internet Explorer, pois existe
uma boa diferena quanto a
resoluo visual entre eles, e
tambm em relao a outros
navegadores, que o Firefox
e o IE so os mais populares.
A medida que ajustes devem ser

efetuados, faa-os para que no
haja muita diferena da apresentao visual nos dois navegadores.
Assim, voc chega ao fim dos estudos desta seo sobre CSS. Que
os fundamentos repassados aqui
possam ajud-lo no desenvolvimento da apresentao visual de
suas aplicaes web. Prepare-se
para um novo percurso de aprendizagem que traz mais um assunto
extremamente importante para o
seu desenvolvimento tcnico.
Seo 4
Linguagem de
programao PHP
A opo pela PHP como linguagem dinmica para o desenvolvimento de nosso estudo no foi
por acaso, segundo os especialistas, a linguagem para web que
mais evoluiu em utilizao nos
ltimos tempos. Tambm uma
linguagem cujo script aberto,
dinmico e licena sem custo nenhum, por pertencer a categoria
de cdigo livre.
Sobre isso, segundo Melo e Nascimento (2007, p. 23 ) [...]pode ser
instalado em qualquer mquina,
para qualquer nmero de usurio,
sem que isto denote a violao de
alguma lei de direito autoral.
muito importante iniciar o estudo de uma tecnologia compreendendo, principalmente, o
significado de seu nome, algumas caractersticas, benefcios, estruturas de progra-mao, tipos de dados, interao
com outras linguagens, recursos,
sua conectividade com banco de
dados e sua capacidade de estruturao. Conhecendo isto e agregando aos demais conhecimentos,
voc garante um bom comeo
para o seu desenvolvimento profissional em programao para
web. Ento no perca tempo! Siga
adiante!
O que significa a sigla PHP?
Essa sigla significa Hypertext Preprocessor (Pr-Processador de Hipertexto).
Surgiu na dcada de 90, mais precisamente no final de 1994, Rasmus

Lerdorf desenvolveu alguns programinhas utilitrios para controlar sua
pgina web pessoal para saber como andavam as visitas. Da para frente
linguagem desenvolveu-se, primeiramente, a partir de implementaes
feitas por Rasmus, o que lhe garantiu a obteno do ncleo da linguagem, mais tarde o cdigo foi aberto para comunidade de desenvolvedores at chegar linguagem que temos hoje.
Caractersticas
No tem custo de licena.
Total integrao com HTML, Javascript e outras tecnologias deriva-
das.
Totalmente dinmica.
Permite o acesso a arquivos de textos, imagens e outros tipos de
arquivos.
Privilegia a segurana de dados a partir da criptografia de dados.

Suporte a banco de dados variados com acesso nativo a: Firebird,
Interbase, MySQL, SQLServerver, Oracle,PostGresSql entre outros.
Roda no lado do servidor, o que garante a integridade de seu script.
Ambiente
Como j mencionado a PHP roda no lado do servidor isto significa que
a partir deste momento voc j deve conhecer sobre o ambiente de desenvolvimento web, termos como lado cliente e lado servidor, a pasta em
que as aplicaes devem ser salvas e tudo que se refere relao cliente
x servidor. Lembrando que estas e outras informaes encontram-se na
Unidade de estudo 1.
Fundamentos
A linguagem PHP evoluiu bastante desde a sua criao e continua em
constante evoluo, neste contexto correto afirmar que medida que
evolui, novos recursos so implementados, tornando sua arquitetura
cada vez mais complexa. Inicialmente o que precisa conhecer a sintaxe
de uso, a forma de interao com o ambiente web, como trabalha com
variveis e constantes, quais e como utiliza operadores, comandos e funes bsicas para que possa fundamentar-se bem na linguagem a fim de
avanar no estudo.
Como e quando surgiu?
PROGRAMAO WEB
59
Sintaxe de escrita
Toda linguagem de programao tem as suas regras de escrita,
a PHP no diferente e se voc
no respeitar estas regras erros de
interpretao sero gerados quando da compilao do script, ento,
muita ateno nas regras e na hora
da escrita dos seus scripts PHP.
A exemplo da HTML, quando
escreve instrues em PHP, deve
delimitar o incio e trmino deste
script, como? Observe a seguir:
<?php
scripts
?>
Esta notao a mais recomendada para uso, a partir da verso

5 da PHP, mas vale ressaltar que
voc pode configurar para trabalhar com outras tags para delimitar
o incio e trmino do script, como
por exemplo:
<script language=php>
scripts </script> - padro
estilo HTML;
<? scripts ?> - padro
abreviado de <?php ?>, apresentado anteriormente, neste cabe

salientar que este o delimitador
padro para as verses anteriores
a verso 5 da PHP;
<% scripts %> - padro de
tag no estilo da linguagem ASP.

Para modificar o padro destas
tags necessrio habilit-las no
arquivo, da PHP, chamado php.
ini.
60
Testando a sintaxe geral de escrita

da PHP, v at Arquivos de Programas/VertrigoServ/www e crie
uma pasta chamada testesintaxephp, na sequencia abra o seu
editor de programas e escreva o
seguinte script:
<?php
echo Testando a sintaxe
geral da PHP;
?>
Salve este script na pasta testesintaxephp com o nome de testesintaxephp.php.

Veja que o arquivo salvou com a
extenso.php, todo e qualquer
script que contenha qualquer instruo escrita em PHP, mesmo
que 1 linha de instruo, deve ser
salvo com esta extenso pois, do
contrrio, este no interpretado
no servidor web.
Outro detalhe o uso do comando echo no script, este comando serve para que imprima algum
contedo na pgina, neste caso, a
frase que est entre aspas. Aproveitando, tambm pode utilizar o
comando print () para isto, com a
sintaxe um pouco diferente, por
exemplo, a frase com o comando
print () ficaria assim:
Print (Testando a sintaxe geral da PHP);
Em ambos os casos o texto a ser

impresso aparece entre aspas, pois
trata-se de uma cadeia de caracteres, aqui chamada de String.
Repare tambm que em ambos
os casos a instruo termina com
o uso do ; ponto e vrgula, isto
determina para o compilador que
a instruo terminou ali.
Para executar o script, lembre-se que agora sua aplicao encontra-se em um servidor web,
portanto, no deve executar de
forma local, como feito para
HTML, deve antes de mais nada,
startar os servios do pacote
VertrigoServ,servidor Apache
e MySQL, feito isto, acesse seu
navegador e na barra de endereo
deste faa a solicitao da pgina
que deseja, da seguinte maneira:
localhost/nomedapasta/nomedoarquivo.extenso
ou
127.0.0.1/nomedapasta/nomedoarquivo.extenso
Lembrando que localhost o

termo que refere-se localizao
do endereo da pgina que deseja
chamar, a ele atribudo um
endereo IP 127.0.0.1, por isto
que se no conseguir chamar a
pgina por localhost, tente pelo seu
endereo IP.
Esta situao de s conseguir chamar a pgina ou por localhost ou
pelo seu endereo IP, deve-se ao
fato de como o navegador est
configurado.
Aqui esta solicitao foi efetuada
pelo endereo IP, veja:
127.0.0.1/testesintaxephp/
testesintaxephp.php
Resultado
Testando a sintaxe geral da PHP
Trabalhando com dados
A PHP, como j comentado, uma linguagem que dispe de muitos
recursos e por se tratar de uma linguagem dinmica para a web deve ser
flexvel e neste aspecto, quando se trata de tipos de dados suportados e
uso de variveis ela se demonstra muito eficaz, como ver a seguir.
Para compreender melhor este assunto vamos desenvolver uma pequena
aplicao, crie na sua pasta www, uma pasta chamada tpdadosvariaveis,
abra o seu editor de programas e escreva o seguinte script:
<html>
<head>

<title>Tipos de dados e variveis em PHP</title>
</head>
<body>

<?php

/*Abaixo as variveis e tipos suportados pela PHP */
//Atribuindo valores as variveis
$logico1=true;
$logico2=false;
$inteiro=49;
$pflutuante=30.09;
$caracter=Tipo string;
$arvalor=array(nome=>joo,sobrenome=>Silva);

//Imprimindo os valores armazenados nas variveis

echo Imprimindo o contedo da varivel lgica \$logico1 :
.$logico1.<br>;
echo Imprimindo o contedo da varivel lgica \$logico2 :
.$logico2.<br>;
echo Imprimindo o contedo da varivel inteiro \$inteiro :
.$inteiro.<br>;
echo Imprimindo o contedo da varivel ponto flutuante
\$pflutuante : .$pflutuante.<br>;
echo Imprimindo o contedo da varivel string \$caracter :
.$caracter.<br>;
echo Imprimindo o contedo da varivel array[] \$arvalor :
.$arvalor[nome]. da .$arvalor[sobrenome].<br>;

?>
</body>
</html>
Resultado
Imprimindo o contedo da
varivel lgica $logico1 : 1
varivel lgica $logico2 :
varivel inteiro $inteiro : 49
Imprimindo o contedo da varivel ponto flutuante $pflutuante

: 30.09
varivel string $caracter : Tipo
string
varivel array[] $arvalor : joo da
Silva
A aplicao sugere conhecermos

como trabalhar com variveis,
como realizar atribuio direta em
variveis, quais os tipos suportados.
Declarao de variveis
Partindo do princpio que j entende o que seja e para que serve
uma varivel em programao,
note que em PHP declarar varivel bem simples, basta escrever
seu nome, apenas com o cuidado
de anteced-lo pelo sinal de $,
como por exemplo, a varivel $logico1 utilizada em nosso aplicativo exemplo.
Existe outra particularidade a destacar em relao a variveis e que
voc j deve conhecer tambm,
so as regras para se dar nomes a
variveis, neste aspecto, em se tratando da PHP, Melo e Nascimento (2007, p. 53) destacam:
Salve este script na pasta tpdadosvariaveis com o nome de tpdadosvariaveis.php.
PROGRAMAO WEB
61
Tabela 3: Regras para dar nomes s variveis em PHP
Regras para nomes de variveis em PHP

1 Toda varivel em PHP comea com o caracter $ seguido pelo nome
da mesma. Ex:$total
2 Os nomes das variveis em PHP, a exemplo do C e Java, fazem distino entre maisculas e minsculas. Ex: idade no igual a Idade
3 Um nome vlido de varivel deve comear com o caractere _ ou uma
letra, seguido de qualquer quantidade de letras, algarismos ou _.
Ex:$_texto, $total,SALARIO so nomes vlidos. $7cidades, $*multiplica
so nomes invlidos
Voc pode achar estranho no ter que determinar o tipo de dado que
esta varivel deve armazenar como em outras linguagens, quando da sua
declarao, a explicao que a PHP no uma linguagem fortemente
tipada, como Delphi, Java, C e outras linguagens, isto significa que a
varivel assume o tipo de dado que lhe for atribudo, visualizando nosso
exemplo.
Em nosso exemplo temos:
atribudo varivel $logico2 o valor false, este tido como booleano,
no caso, falso, da a varivel passa a ser do tipo booleana.
$logico2=false;
atribudo varivel $inteiro o valor 49, este tido como um nmero

inteiro, ento a varivel passa a ser do tipo numrica inteira.
$inteiro=49;
atribudo varivel $pflutuante o valor 30.09, este tido como um

nmero de ponto flutuante ou com casas decimais, da a varivel passa a
ser do tipo ponto flutuante.
$pflutuante=30.09;
atribudo varivel $caracter o valor Tipo string, este tido como

uma cadeia de caracteres ou string, da a varivel passa a ser do tipo
string.
$caracter=Tipo string;
62
atribudo varivel $arvalor

um array[] contendo o nome e sobrenome de uma pessoa, da a varivel passa a ser do tipo array[].
$arvalor=array(nome=>joo,s
obrenome=>Silva);
Atribuio de valores
Deve ter percebido no exemplo
que valores foram atribudos as
variveis na seguinte sintaxe:
$variavel = valor;
Isto uma atribuio direta de valores onde esquerda da sentena

voc tem a varivel que receber
um valor, seguida do smbolo de
= (igual) que o operador que
determina a atribuio, seguido
do valor que deve ser atribudo
varivel.
Tipos suportados
Conforme voc j estudou a PHP
tem o suporte a vrios tipos de
dados, estes, por sua vez carregam algumas particularidades que
variam de uma linguagem de programao, por isso interessante
demonstrar algumas quanto aos
tipos de dados suportados pelo
PHP, quem nos apresenta Melo
e Nascimento (2007, p. 52)
Tabela 4: Tipos de dados do PHP
Tipo
Faixa de Valores
Aplicao
boolean
True (verdadeiro)
ou false (falso)
Este tipo deve ser utilizado para se fazer validaes lgicas. Ex: $flag = true;
-2.147.483.648
a
2.147.483.647
Esse tipo de varivel pode ser utilizado para representar a idade de uma
pessoa, por exemplo. Mas no para
fazer clculos que necessitem preciso decimal. Alm disso, deve-se
tambm tomar o cuidado de no armazenar valores oriundos de banco
de dados que podem ocasionar overflow (estouro de capacidade do tipo).
Ex: $idade=25;
1.40 E-45
a
3.40 E+38
Tipo utilizado pelo PHP para armazenar nmero que necessita preciso
decimal. No utilize esse tipo para se
fazer comparaes de igualdade. Pois
isso pode gerar erros difceis de serem identificados, principalmente se
os valores comparados tiverem muitas casas decimais.
Ex: $valor=25.50
integer
float
string
array
object
null
No tem
Este tipo geralmente utilizado para

se trabalhar com caracteres em geral.
Ex:$cidade = Joinville;
No tem
Serve para representar uma coleo

de tipos heterogneos. Utilizando
para isso uma chave e o valor que se
quer armazenar.
Ex:$valores
=
array(requirido=>true,1=>20);
As chaves podem ser tanto uma string
como um integer.
No tem
O tipo objeto nada mais do que uma

instncia de uma classe.
Ex: $pessoa= new Pessoa();
No tem
Null um valor especial que

representa uma varivel que no
possui um valor definido.
Ex: $sem_valor = null;
Fonte: Melo, Nascimento (2007, p. 52)
Uma informao importante, pelo fato de a PHP no necessitar estabelecer o tipo da varivel no momento de sua declarao, isto permite
que uma mesma varivel possa armazenar valores de tipos diferentes em
determinados trechos do seu script, exemplo, dada a varivel:
$teste=cadeia de caracteres; /*varivel armazenando

caracteres tipo string*/
$teste=10; /*a mesma varivel agora armazenando um
valor inteiro tipo inteiro*/
E assim por diante, a varivel em

PHP assume o tipo de acordo
com o tipo de dado que ela armazena, sobre isso Melo e Nascimento (2007, p. 52) alertam [...]
no aconselhvel desenvolver
projetos dessa maneira, pois isso
poder causar confuso para
aqueles que forem efetuar manuteno no cdigo [...].
Particularidades
aplicao didtica
A aplicao didtica anterior nos
traz mais algumas novidades, exceto declarao de variveis, atribuio de valores a variveis e tipos de dados.
Linhas de comentrios
Em PHP linhas de comentrios
seguem a seguinte sintaxe:
Comentrio de 1 linha - //
texto do comentrio
Comentrio de vrias
linhas - /* incio comentrio
texto do comentrio
*/trmino do comentrio
Impresso dos dados

Na aplicao aparecem algumas
linhas de instruo imprimindo
os contedos das variveis, como
por exemplo:
PROGRAMAO WEB
63
echo Imprimindo o contedo

da varivel string \$caracter :
.$caracter.<br>;
echo comando para imprimir o texto e contedo das

variveis na pgina.
. (ponto) na instruo significa concatenao (juno), no
momento da impresso faz com
que o texto que est entre aspas
+ o contedo da varivel $caracter + o comando <br> sejam
impressos e executados respectivamente na mesma linha, como
resultado ter:
Imprimindo o contedo da varivel
string $caracter: Tipo string
\$ - trata-se de um caractere
escape, so utilizados no momento da impresso para obtermos

alguns caracteres desejados,
no caso, gostaramos de estar
imprimindo o nome da varivel,
mas acontece que neste encontra
o smbolo do dlar e sabe-se que
em um comando echo juntamente com uma varivel, principalmente entre aspas duplas,
ao invs de imprimir seu nome,
ser mostrado o contedo desta
varivel, da a necessidade do
caractere escape \$. Desta forma
estamos solicitando que naquele
ponto se imprima o smbolo do
$ antes da palavra caracter, formando assim o nome da varivel
que desejamos imprimir, ou seja,
$caracter.
Nesta mesma instruo est embutindo um comando HTML,
<br> na instruo escrita em
PHP, isto mesmo, voc pode utilizar qualquer comando HTML em
um script PHP, para isso deve seguir uma sintaxe obrigatria:
64
echo <br>;
echo <html>;
echo <head>;
Deve utilizar o comando echo
com as tags HTML dentro das
aspas.
Declarao de constantes
Voc j sabe que, constantes, a
exemplo das variveis, so tambm endereos de memria, mas
ao contrrio das variveis, recebem valores nicos, que no se
modificam, por isso o nome de
constante.
As constantes em PHP so declaradas fazendo-se o uso da funo
define () que tem como sintaxe o
seguinte:
bool define(strig nome_constante, mixed valor[, bool ignorar_maiusculas_minusculas])
Define() funo permite a

declarao de uma constante;
nome_constante deve in-
formar o nome da constante no

formato string;
valor valor armazenado na
constante;
ignorar_maiusculas_minusculas recebe true ou false, se true

determina que o nome da constante ser case sensitive, ou melhor,
sensvel a caixa alta e baixa.
Para que voc tenha a oportunidade de colocar em prtica, crie uma
pasta chamada constantephp
escreva o script a seguir :
<?php
define(CONSTANTE,Texto
fixo);
echo CONSTANTE;
?>
Salve este script na pasta constantephp com o nome de constante.php.
Resultado
Texto fixo
Agora implemente este script com
o seguinte:
<?php
fixo,true);
echo CONSTANTE;
echo ConSTANTE;
echo constante;
?>
Salve novamente este script.

Resultado
Texto fixo
Texto fixo
Texto fixo
A particularidade aqui que agora

inserimos um parmetro na funo, true, estabelecendo que podemos chamar a constante escrevendo seu nome de vrias formas,
apesar de ela ter sido declarada
em MAISCULA, mas veja pelo
script que voc a chama de maneiras diferentes e mesmo assim
consegue imprimir seu contedo.
Vamos implementar novamente
este script agora com o seguinte:
<?php
fixo,false);
echo CONSTANTE.<br>;
echo ConSTANTE.<br>;
echo constante.<br>;
?>
Operadores
So elementos encontrados nas linguagens de programao que auxiliam nos mais variados recursos disponibilizados pela linguagem.
Classificam-se em:
Aritmticos
So aqueles mesmos conhecidos da sua boa e velha matemtica, o significado e aplicao so os mesmos aqui.
Tabela 5: Operadores aritmticos
Operador
Funo
+
*
/
Somar valores. Ex: $valor1 + $valor2
Mdulo de valores: resto da diviso inteira entre os nmeros. Ex: $valor1 %$valor2
Subtrair valores. Ex: $valor1 - $valor2

Multiplicar valores. Ex: $valor1 * $valor2
Dividir valores. Ex: $valor1 / $valor2
Operadores de comparao e atribuio

Salve novamente este script.
Resultado
Texto fixo
ConSTANTE
constante
Perceba que agora no obteve o
resultado esperado, voc j descobriu por que, no ?
Trocou o parmetro que indica
se o nome da constante ser case
sensitive, para false, ou seja, no
mais sensvel a caixa alta e baixa
e, portanto, no consegue extrair
os dados das constantes que esto
referenciadas de maneira diferente daquela declarada, com caixa
ALTA.
Comparao so aqueles utilizados em estruturas de controle do
tipo se, caso, enquanto faa, para faa, ou seja, sempre que houver a
necessidade de se fazer uma comparao entre 2 ou mais valores faz-se
uso deste.
Atribuio voc j o conheceu anteriormente, lembra-se? Quan-
do desejar atribuir um valor qualquer a uma determinada varivel.

Tabela 6: Operadores de comparao e atribuio
Operador
Funo
Operador de atribuio. Ex: $valor1=1
==
Operado de igualdade, retorna true se dois valores so

iguais. Ex:$valor1 ==$valor2
===
Operador identidade de valor e tipo retorna true se dois valores so iguais e do mesmo tipo. Ex:$valor1 === $valor2
Operador de diferena retorna true se os dois valores so
!= ou <> diferentes. Ex: $valor1 != $valor2 ou $valor1 <> $valor2

!==
Operador de no identidade de valor e tipo.

Ex: $valor1 !== $valor2
<
>
<=
>=
Menor que. Ex: $valor1 < $valor2

Maior que. Ex:$valor1 > $valor2
Menor ou igual que. Ex: $valor1 <= $valor2
Maior ou igual que. Ex: $valor1 >= $valor2
PROGRAMAO WEB
65
Operadores de incremento/decremento e aritmticos com

atribuio
So aqueles operadores que servem para incrementar ou decrementar
variveis do tipo inteira.
Operador Funo
++$var
Incrementa $var e ento retorna $var incrementada.
--$var
Decrementa $var e ento retorna $var decrementada.
$var++
Retorna $var e depois a incrementa.
$var--
Retorna $var e depois a decrementa.
+=
Soma o contedo de uma varivel com um valor, e depois reatribui o resultado nela prpria.
Ex: $var += 5; equivale a codificar $var = $var +5;
-=
Subtrai o contedo de uma varivel com um valor, e depois

reatribui o resultado nela prpria.
Ex:$var -=5; equivale a codificar $var = $var - 5;
*=
Multiplica o contedo de uma varivel com um valor, e depois

reatribui o resultado nela prpria.
Ex: $var *= 5; equivale a codificar $var = $var * 5;
/=
Divide o contedo de uma varivel com um valor, e depois reatribui o resultado nela prpria. Ex: $var /= 5; equivale a codificar $var = $var /5;
Operadores lgicos
Como o prprio nome sugere so aqueles operadores utilizados em expresses lgicas a fim de verificar se o resultado destas verdadeiro ou
falso.
Operador
and e &&
or e ||
Xor
Nome
Funo
Retorna verdadeiro quando os dois valores

avaliados so verdadeiros. Caso contrrio retorna falso. A diferena entre usar and ou &&
a precedncia dos mesmos.
OU
Retorna verdadeiro quando pelo menos um

dos dois valores avaliados verdadeiro. Caso
contrrio retorna falso. A diferena entre usar
or ou || a precedncia dos mesmos.
Retorna verdadeiro se um, e apenas um dos

Ou Exclusivo dois valores, for verdadeiro. Caso contrrio,
retorna falso.
No
Retorna verdadeiro se o valor avaliado for falso. Caso contrrio retorna verdadeiro.
66
DICA
1. Entre utilizar && e and,
utilize &&, este operador
tem maior precedncia, traduzindo resolvido de forma mais rpida.
2. O mesmo acontece com
os operadores || e or, utilize
||, este operador tem maior
precedncia.o: BRANCO
FILHO, Gil. A organizao, o
planejamento e o controle
da manuteno. Rio de Janeiro, RJ: Cincia Moderna,
2008. 257 p.
Estruturas de controle
Toda linguagem de programao
fornece estruturas de programao, resguardadas sua sintaxe, que
garantem aos scripts maior fluxo
de informao, organizao e desempenho. Com o PHP isto no
diferente, a linguagem fornece
todas essas estruturas, seja condicional ou de repetio, principais
estruturas, em um contexto de fcil aprendizado.
Estrutura condicional do
tipo if()
Supondo que queira desenvolver
um script para verificar se um determinado nmero inteiro positivo ou negativo, aqui, por questes didticas, considere tambm
que 0 positivo, oK?
Se constatar que o nmero
maior ou igual a zero o programa deve emitir a mensagem O
nmero em questo positivo,
caso contrrio, deve emitir a mensagem O nmero em questo
negativo.
Tambm a ttulo de informao
o nmero verificado atribudo
diretamente a uma varivel, para
aperfeioar o processo.
Crie uma pasta chamada estrucondif escreva o script a seguir:
<?php
$valor=4;
if($valor>=0)
/* se o valor contido em $valor for maior ou igual a 0*/
{
/*Instrues a serem executadas caso a condio seja verdadeira*/
echo Condio verdadeira.<br>;
echo O nmero em questo positivo.<br>;
}else {
/*seno, ou seja, se o valor contido em $valor no foi maior ou igual a 0*/
/* Instrues a serem executadas caso a condio seja falsa*/
echo Condio falsa.<br>;
echo O nmero em questo negativo.<br>;
}
?>
Salve o script na pasta estrucondif com o nome de estrucondif.php .
Agora suponha que nesta proposta dos nmeros positivos e

negativos voc queira o seguinte,
considerar os nmeros inteiros,
maiores que zero positivo, menores do que zero negativos e
igual a zero nulo.
Alguma coisa mudou da proposta
passada para esta, ser que voc j
conseguiu visualizar? Isto mesmo,
agora voc tem 3 verificaes ao
invs de 2. Isto sugere um aumento na estrutura condicional. Quer
ver como ficaria? Ento continue
atento!
Abra o script do arquivo estrucondif.php e implemente-o com
o seguinte:
Para facilitar sua compreenso, as
implementaes esto em destaque.
Resultado
Condio verdadeira.
O nmero em questo positivo.
Aps a 1 execuo da aplicao, modifique o valor do nmero para negativo e aps execute a aplicao novamente, para provocar a sentena
falsa e tambm para que possa testar o script para saber se est tudo OK.
Comentrios
A sintaxe desta estrutura fornecida pela PHP idntica a que disponvel pelas linguagens C, Java, Javascript e outras, veja que a estrutura em
si bem simples.
Considere tambm que este exemplo s tem 2 possibilidades, se a condio verdadeira,ento faa tal coisa, caso contrrio (falsa), faa tal coisa.
If(condio)
{ /*inicio do bloco de instrues da parte verdadeira da condio*/
instrues_se_verdadeiro
} /*trmino do bloco de instrues da parte verdadeira da condio*/
else { /*inicio do bloco de instrues da parte falsa da condio*/
instrues_se_falso
}/*trmino do bloco de instrues da parte falsa da condio*/
<?php
$valor=-8;
if($valor>0)
{
echo O nmero em questo
positivo.<br>;
}elseif($valor<0)
{
echo O nmero em questo
negativo.<br>;
}else {
echo O nmero em
questo zero;
}
?>
Salve o script novamente para atualiz-lo com estas implementaes.

Resultado
O nmero em questo
negativo.
PROGRAMAO WEB
67
Aps a 1 execuo da aplicao,

modifique o valor do nmero
para positivo, execute novamente
a aplicao, depois modifique o
valor do nmero para 0 e execute
novamente a aplicao, assim estar testando sua estrutura.
Comentrios
Veja que em funo da nova proposta foi necessrio implementar
uma nova verificao na parte
falsa da primeira condio elseif
($valor<0), isto porque neste
exato trecho existem ainda mais
2 possibilidades alm do nmero
ser positivo, a possibilidade do
nmero ser negativo e tambm a
do nmero ser zero. Perceba tambm elseif(), a PHP uma das
poucas linguagens que permite
esta sintaxe, traduzindo senose, poderia estar utilizando else
if(), como ocorre na maioria das
linguagens.
O ltimo trecho do script contm
o else { } que trata da parte falsa
da condio anterior, ou seja, se
o nmero no for negativo, isto
condiciona o programa a reconhecer que s pode se tratar de
um nmero igual a zero. Neste
caso, no se est mais fazendo nenhuma verificao, pois neste trecho do script todas as possibilidades da proposta j foram tratadas.
Analisando a estrutura da soluo

If(condio1)
{ /*inicio do bloco de instrues da parte verdadeira da condio*/
//Instrues executadas se condio 1 verdadeira
instrues_se_condio1_verdadeira
} elseif(condio2)
{
//Instrues executadas se condio 1 falsa e condio 2 verdadeira
instrues_se_condio1 _falsa e condio2_verdadeira
} else { /*inicio do bloco de instrues da parte falsa da condio*/
//Instrues executadas se condio 1 e condio 2 falsas
instrues_se_condio1 e condio2_falsas
}/*trmino do bloco de instrues da parte falsa da condio*/
Veja que de acordo com a soluo, as estruturas condicionais podem

aumentar de complexidade podendo inclusive chegar a algo do tipo:
If($condicao1)
{
//$condicao1 verdadeira
If($condicao2)
{
//apenas executa se $condicao1 e $condicao2 forem verdadeiras
}
}else if($condicao3)
{
//executa se $condicao1 for falsa e $condicao3 verdadeira
}else {
//executa se $condicao1 e $condicao3 forem falsas
}
Perceba que na estrutura condicional anterior voc encontra uma estrutura condicional if ($condicao2) dentro de outra estrutura if ($condicao1) como destacado a seguir.
If($condiao1)
{
//$condicao1 verdadeira
If($condicao2)
{
//apenas executa se $condicao1 e $condicao2 forem verdadeiras
}
}
68
Isto chamado de aninhamento de estruturas, ou estrutura if() aninhada

ou ninho de if(). muito comum de ocorrer quando a regra de negcio
complexa.
Estrutura condicional do tipo switch()

Voc j deve conhecer a estrutura caso, algumas linguagens tratam como
estrutura case, ento, sobre esta estrutura que estamos nos referindo,
s que na forma da sintaxe da PHP que a trata na forma de comando
switch().
Esta estrutura, a exemplo da estrutura if(), tambm uma estrutura do
tipo condicional, podendo ser muito til e eficiente quando se deparar
com a necessidade de trabalhar estruturas condicionais do tipo aninhada.
A sintaxe de uso para o comando switch() demonstrada a seguir:
switch($condicao)
{
case abc :
//executa se $condicao for igual a abc
break;
case def :
//executa se $condicao for igual a def
break;
default :
//executa se nenhuma das condies anteriores foi satisfeita
break;
}
Voc j deve saber o mecanismo de funcionamento desta estrutura, mas

de qualquer forma, no custa relembrar.
O comando switch() realiza o teste em todas as linhas onde encontram-se as clusulas case, para verificar se os respectivos valores, associados a estas clusulas, conferem com o da varivel testada $condicao,
caso confira, o bloco de cdigo referente clusula, executado.
Perceba que a cada clusula case voc encontra o comando break,
isto porque, caso a clusula case seja verdadeira, o comando break interrompe a execuo dos testes das demais clusulas.
A clusula default refere-se ao caso em que nenhuma das clusulas
case seja verdadeira, lgico que nem sempre voc precisar lanar
mo desta clusula nesta estrutura, depende da regra de negcio que
precisa descrever. Aproveitando, o comando break, localizado nesta clusula, no estritamente necessrio, pois na sequncia deste no
existe mais nenhuma linha com instruo a ser testada. Alguns desenvolvedores defendem a utilizao do uso do break nesta clusula por
questes de padronizao.
DICA
Quando sua estrutura condicional do tipo if() tornar-se
muito complexa, verifique
a possibilidade de utilizar a
estrutura condicional do tipo
switch().
A seguir um novo tpico lhe

aguarda. Rena entusiasmo e dedicao para tornar mais dinmico os seus estudos.
Estrutura de repetio do
tipo while()
Uma estrutura de repetio serve
para que possa executar, uma ou
mais linhas de instrues, repetidas vezes at que certa condio
seja satisfeita.
A estrutura de repetio while()
uma estrutura verstil e muito
utilizada em funo disto, a seguir
um exemplo prtico.
Crie uma pasta chamada estruwhile escreva o script a seguir:
Suponha que deseje imprimir a frase
ESTRUTURA DE REPETIO
DO TIPO WHILE( ), 5 vezes.
PROGRAMAO WEB
69
<?php
$contadora=1;
//Atribuio de um valor inicial para a varivel controladora do loop
while($contadora<=5) //Incio da estrutura com a condio lgica
{ //Incio do bloco de instrues
//Instrues executadas caso a condio seja verdadeira
echo $contadora. - .ESTRUTURA DE REPETIO DO TIPO
WHILE( ).<br>;
$contadora++;//Somar 1 na varivel, a cada execuo da estrutura
} //Trmino do bloco de instrues
?>
Salve o script na pasta estruwhile com o nome de estruwhile.php .

Resultado
1. ESTRUTURA DE REPETIO DO TIPO WHILE( )
tipo do / while()
A funcionalidade a mesma de
sua co-irm, a diferena est no
seguinte, a verificao da condio feita no final da estrutura e
no no incio como na while().
Sendo assim, pelo menos 1 vez,
obrigatoriamente, as instrues,
dentro da estrutura, sero executadas, mesmo que a condio seja
falsa.
Veja como ficaria o exemplo didtico da impresso da frase ESTRUTURA DE REPETIO
DO TIPO WHILE ( ), 5 vezes
nesta estrutura:
Crie uma pasta chamada estrudowhile escreva o script a seguir:

Comentrios
Neste tipo de estrutura a condio implementada no incio da estrutura, o que significa dizer que, j a partir da 1 execuo, se a condio
for falsa, as instrues dentro da estrutura nunca sero executadas. Do
contrrio, ou seja, a partir da execuo, a condio sendo verdadeira, as
instrues dentro da estrutura sero perfeitamente executadas, como no
exemplo proposto.
O que voc acha que acontece caso esquea de incrementar a varivel

$contadora?
Ora! Pense comigo, esta inicializada com o valor 1, na 1 em que a

estrutura executada, a condio portanto verdadeira e ento parte-se
para a execuo das instrues, a cada execuo da estrutura uma linha
ser impressa, aps,a condio avaliada novamente.
No tendo incrementado a varivel $contadora, ela continua com o valor 1, da a condio verdadeira novamente partindo-se ento para a
execuo das instrues e isto vai acontecer at ocorrer um estouro de
pilha de memria, porque acabou de entrar no que chamado de loop
infinito na estrutura de repetio, pois a varivel $contadora no foi incrementada.
70
<?php
$contadora=1;
do //Incio da estrutura,
//faa....
{ //Incio do bloco de
//instrues
/*Instrues executadas
na 1 vez em que a
estrutura executada
e tambm enquanto a
condio for verdadeira
*/
echo $contadora.
- .ESTRUTURA DE
REPETIO DO TIPO do /
WHILE( ).<br>;
$contadora++;
//Somar 1 na varivel,
//a cada execuo da
//estrutura
} while($contadora<=5)
//Trmino da estrutura,
//enquanto condio....
?>
Resultado
1. ESTRUTURA DE REPETIO DO TIPO do / WHILE( )
tipo for ()
Estrutura de repetio tambm
muito utilizada em scripts PHP,
principalmente se voc sabe, antecipadamente, a quantidade de vezes em que as instrues, contidas
nesta, devem se repetir.
Veja como ficaria o exemplo didtico da impresso da frase ESTRUTURA DE REPETIO
DO TIPO FOR( ), 5 vezes nesta
estrutura:
Crie uma pasta chamada estrufor escreva o script a seguir:
Comentrios
Seu funcionamento bem simples, para o comando for() implementada uma lista contendo 3 expresses separadas por ;
ponto-e-vrgula, sendo que a primeira expresso atribui um valor
inicial varivel controladora da estrutura e este procedimento
executado apenas 1 vez. A segunda expresso trata da validao
da condio, caso seja verdadeira, as instrues contidas no bloco
sero executadas e por ltimo a terceira expresso que refere-se ao
incremento automtico da varivel controladora, a cada execuo
do script.
Estrutura de repetio do tipo foreach()
Esta estrutura no muito convencional, mas encontrada tambm em
outras linguagens de programao. Trata-se tambm de uma estrutura
de repetio, porm, com algumas particularidades que a difere das demais estruturas apresentadas at o momento.
Uma particularidade marcante que esta estrutura atua, diretamente,
sobre o contedo de um vetor, como mostra o exemplo a seguir:
Crie uma pasta chamada estruforeach escreva o script a seguir:
$vetor=array(primeiro=>1,2);
foreach($vetor as $chave => $valor)
{
echo Valor da chave : . $chave . \n;
echo Valor armazenado : . $valor . /n;
}
Salve o script na pasta estruforeach com o nome de estruforeach.php .

<?php
for($i=1;$i<=5;$i++)
{
echo $i. - .ESTRUTURA
DE REPETIO DO TIPO for(
).<br>;
}
?>
Salve o script na pasta estrufor

com o nome de estrufor.php .
Resultado
Valor da chave: primeiro

Valor armazenado: 1
Valor da chave: 0
Valor armazenado: 2
Comentrios
Conforme voc viu anteriormente, a estrutura objetiva percorre os elementos do vetor $vetor, observe que esta estrutura no utiliza uma varivel de controle para percorrer os elementos do vetor, ou seja, saber
quando deve parar de executar a repetio, mas ento como saber isto?
por que o comando foreach() faz a varredura do vetor enquanto houver
elementos no vetor, quando no houver mais a execuo interrompida.
PROGRAMAO WEB
71
Trabalhando com funes

Voc sabe que as funes so muito teis para qualquer desenvolvedor
em qualquer linguagem de programao, por sua capacidade de aperfeioar as estruturas dos programas, mantendo os scripts mais limpos e tambm garantir a reduo de linhas de programao, bem como, facilitar e
muito no momento da manuteno dos scripts.
A PHP uma linguagem que no foge a regra das demais, dispe de
funes pr-programadas e tambm permite a criao de estruturas de
funo de forma a poder estruturar suas aplicaes no mais alto nvel
de organizao.
Seguindo a sintaxe bsica para escrita e chamadas de funes em PHP
voc encontra:
//declarao da funo chamada minha_funcao

function minha_funcao()
{
//trecho de cdigo para esta funo
}
//trecho de cdigo do script principal, com a chamada funo
//minha_funcao
minha_funcao();
Segundo Melo e Nascimento (2007, p. 70) Uma grande vantagem no

uso de funes a possibilidade de passagem de argumentos para ela.
Tais argumentos referem-se aos valores, independente do tipo de dados,
repassados para a funo para que esta possa executar suas instrues.
Melo e Nascimento (2007, p. 70) complementam A passagem de argumentos para uma funo pode ser feita por valor ou referncia.
Neste contexto que tal alguns exemplos prticos?
Funo com passagem de argumento por valor

Crie uma pasta chamada funcpasarval escreva o script a seguir :
72
<?php
/*Uso de funo com
passagem de Parmetros por
valor*/
//Funo soma
function soma($val1,$val2)
{
return ($val1 + $val2);
}
//script principal
$x = 10;
$y = 20;
echo Resultado retornado da funo soma :
.soma($x,$y);
?>
Salve o script na pasta funcpasarval com o nome de funcpasarval.php .
Resultado
Resultado retornado da funo
soma: 30
Comentrios
Observe as variveis $x e $y no
script principal, estas contm os
valores que sero repassados para
a funo para que sejam somados,
pois este o objetivo da funo
soma (). Perceba que em soma
($x,$y), chamada a funo e passados os valores contidos nas respectivas variveis. A funo, por
sua vez, encontra-se fora do escopo do script principal e contm
tambm as variveis $val1 e $val2,
encarregadas de receber uma cpia dos valores respectivamente,
repassados, isto porque a passagem de argumentos por valor.
A funo, de posse dos valores,

processa e retorna a soma dos
mesmos. Uma particularidade
neste processo a de que ao final
deste, os argumentos e as variveis locais da funo so, automaticamente, destrudos.
Comentrios
A varivel $valor antecedida pelo caractere &, isto significa que esta
conter um ponteiro para a varivel $nmero, localizada no script principal da aplicao. Uma curiosidade neste processo, qualquer modificao
feita em $valor, automaticamente, refletida em $nmero, o que explica
o resultado obtido no exemplo anterior.
Funo com passagem de

argumento por referncia
Funo com passagem de argumento por valor e referncia
Crie uma pasta chamada funcpasarref escreva o script a seguir:
<?php
/*Uso de funo com
passagem de Parmetros por
referncia*/
//Funo dobra
function dobra(&$valor)
{
$valor *=2;
}
//Script principal
$numero = 10;
dobra($numero);
echo Resultado calculado pela funo dobra :
.$numero;
?>
Dominar o uso funes em qualquer linguagem fundamental. Isto lhe

garante uma possibilidade enorme de desenvolver scripts mais complexos
e com bom desempenho, por isso, vamos a mais um exemplo de uso de
funes para que possamos conhecer um pouco mais sobre este recurso
em PHP.
Crie uma pasta chamada funcpasarvalref e escreva o script a seguir:
<?php
//Uso de funo com passagem de Parmetros por valor e referncia
function minha_funcao($a,$b,&$c)
{
$c=$a+$b;
}
//Script principal
$c = 0;
minha_funcao(10,20,$c);
echo Resultado calculado pela funo minha_funcao : .$c;
?>
Salve o script na pasta funcpasarvalref com o nome de funcpasarvalref. php .
Salve o script na pasta funcpasarref com o nome de funcpasarref php.
Resultado
Resultado
Comentrios
Resultado calculado pela fun-
o dobra : 20
Resultado calculado pela funo minha_funcao : 30
A ideia deste exemplo a de reforar as diferenas entre funo com

passagem de argumento por valor e por referncia. Veja que no script
principal existe uma varivel, $c, qual atribudo valor 0. Na sequncia, a funo minha_funcao() chamada passando-se 3 argumentos para
esta, 2 argumentos passados por valor 10 e 20 e o terceiro argumento
passado por referncia $c.
PROGRAMAO WEB
73
Sobre as variveis de funes, Melo e Nascimento (2007, p. 71) observam Como toda varivel declarada na lista de argumentos de uma funo ou em seu interior local ao seu escopo, o PHP cria estas variveis
de maneira independente das demais variveis, mesmo que seus nomes
sejam idnticos. Neste contexto os autores complementam Um erro
comum de programao tentar referenciar uma varivel externa a
funo apenas utilizando seu nome. Neste caso, a funo tambm est
criando uma nova varivel, obviamente sem conter o mesmo contedo
da suposta varivel referenciada.
<?php
/*Programa principal onde
ser inserido, por include, o
contedo do arquivo arquivoinclude.php. */
echo Teste A.<br>;
echo Teste A.<br>;
/*Aqui ser includo o script
de arquivoinclude.php*/
include ../arquivoinclude/
arquivoinclude.php;
echo Teste C.<br>;
echo Teste C;
?>
Include
A PHP fornece muitos recursos de programao para o desenvolvimento de aplicaes web, aqui encontra-se mais um recurso muito interessante e que est diretamente relacionado a melhorar a estrutura de sua
aplicao, trata-se da diretiva Include.
muito comum, no decorrer de sua evoluo como desenvolvedor,
voc desejar organizar seus programas de forma a garantir melhor organizao de seus arquivos de programas a fim de garantir maior desempenho e flexibilidade sua aplicao, isto que esta diretiva possibilita.
Include serve para inserir o script PHP de um arquivo externo dentro de
um bloco de programa qualquer, sendo que o script inserido interpretado normalmente a partir da aplicao desta diretiva.
Para verificar isto na prtica implemente o exemplo sugerido a seguir,
mas antes, crie uma pasta em www chamada include e, dentro desta,
crie outra pasta chamada arquivoinclude e escreva o script a seguir:
Fonte: Muto (2006, p. 56)
Salve o script na pasta scriptprincipal com o nome de scriptprincipal. php.

E agora sim, a aplicao pode ser
executada, mas tome cuidado,
lembre-se que possui 2 arquivos,
arquivoinclude.php, o arquivo que ser includo no arquivo
scriptprincipal.php, que o
arquivo de programa, ento o
scriptprincipal.php que deve chamar para execuo.
Resultado
<?php
echo teste B.<br>;
echo teste B.<br>;
?>
Salve o script na pasta chamada arquivoinclude com o nome de arquivoinclude. php .

Neste caso, ainda no deve executar a aplicao, pois ainda no foi encerrada e esse arquivo ser inserido no prximo arquivo de programa
que ainda vai criar.
Portanto, continuando o processo, crie tambm dentro da pasta include,
uma pasta chamada scriptprincipal e escreva o script a seguir:
74
Teste A
Teste A
teste B
teste B
Teste C
Teste C
Comentrios
Observe no resultado que as linhas escritas em arquivoinclude.
php foram inseridas e exatamente
no ponto onde foi solicitado o include deste arquivo.
Arrays
Eis aqui um recurso dos mais temerosos, mas que em sua essncia e aplicao, dos mais valiosos
em linguagem de programao.
Identificado tambm como vetor, lista ou conjunto de variveis,
array pode ser considerado como
uma estrutura de dados que armazena valores, identificados por
nomes que tecnicamente so chamados de chave ou ndice de um
elemento.
Array simples
Array pode ser simples, caracterizado por armazenar vrios elementos em sequncia, identificados por uma chave ou ndice.
Exemplo array simples

Em PHP voc pode criar arrays de
muitas maneiras, a escolhida em
nosso exemplo a da utilizao de
arrays dinmicos em PHP array ().
Hipoteticamente voc pode visualizar o array simples que ser criado a seguir assim:
Tabela 9: Viso hipottica do array
$valores
$valores
Valores ->
Joinville
2007
Chaves ->
cidade
14
O nome do array $valores, na 1 posio do array, identificada pela chave cidade, armazenada a string Joinville e na 2 posio do array, identificada pela chave numrica 14, armazenado o nmero inteiro 2007.
Como voc j deve ter observado a chave de um array pode ser uma
string ou um valor inteiro, podendo estas ser utilizadas no mesmo array,
o que no aconselhvel, ou individulamente para cada array, o que
mais aconselhvel.
Crie uma pasta chamada arraysimples e escreva o script a seguir:
<?php
//Utilizado arrays com o uso de chaves string e numricas
//Criando e alimentando o array $valores
$valores = array(cidade=>Joinville,14=>2007);
echo $valores[cidade].<br>;
//Imprimindo o valor contido na posio do array cuja a chave de
// acesso cidade, ou seja, a string Joinville
echo $valores[14];
//Imprimindo o valor contido na posio do array cuja a chave de
//acesso 14, ou seja, o nmero inteiro 2007
?>
Salve o script na pasta arraysimples com o nome de arraysimples. php.
Comentrios
A PHP trata algumas particularidades com arrays de forma diferenciada
em relao a algumas linguagens, por exemplo, os arrays em PHP podem
conter elementos com tipos diferentes, no exemplo, string e nmero inteiro no mesmo array, outra particularidade a de que a chave ou ndice
do array pode ser um nmero ou uma string, caso tambm do nosso
exemplo.
Melo e Nascimento (2007, p. 75) chamam a ateno para o caso de uso
de uso de chaves do tipo inteiro
PROGRAMAO WEB
75
[...] se o desenvolvedor no especificar um valor para a chave de um

novo item do array, ele ser obtido com a adio de um ao maior ndice
inteiro obtido. Exemplo: se um array tiver as chaves 3,7 e 15 e for adicionado um novo item sem especificar uma chave, o se valor da chave
ser 16.
Array multi-dimensional
Imagine agora que voc precise implementar, para um ou mais, elementos do array informaes importantes. Por exemplo, imagine que
preciso criar um array com as cidades de Santa Cataria e para cada
cidade seus respectivos bairros, ou que criar um array que armazenasse
o nome dos departamentos de uma organizao empresarial e para cada
departamento precisa armazenar o nome de seus funcionrios, tanto em
um exemplo como o outro temos 2 dimenses de informaes, cidade-bairros ou departamento-funcionrios, isto caracteriza a criao de um
array multidimensional, mais de uma dimenso, no caso bi-dimensional.
Exemplo de array multidimensional

Lembre-se que a maneira de criao de array escolhida em nosso exemplo a dos arrays dinmicos em PHP array().
Hipoteticamente voc pode visualizar o array multidimensional que ser
criado a seguir assim:
Tabela 10: Viso hipottica do array $empresa
$empresa
Colunas 1 e 2 ->
TI
RH
Linha 1
Carlos Eduardo Carvalho
Ktia Hayaschi
Linha 2
Nilton Manoel L. Ado
Kelly Patrcia Dias
Veja que agora temos 2 dimenses, a dimenso da coluna, com o nome

do departamento e a dimenso da linha com o nome do funcionrio
alocado no departamento. Se analisarmos o array como um todo temos
uma matriz do tipo 2 x 2, ou seja, 2 colunas por 2 linhas.
Se quiser, por exemplo, imprimir o funcionrio o nome dos funcionrios
do departamento de TI:
echo $empresa[TI] [0] //Imprima do array $empresa o que est
na linha 0 da coluna TI
echo $empresa[TI][1]//Imprima do array $empresa o que est na

linha 1 da coluna TI
Resultado
Carlos Eduardo Carvalho
Nilton Manoel L. Ado
Crie uma pasta chamada arraymulti e escreva o script a seguir:
76
<?php
/*Criando o array multidimensiona $empresa*/
$empresa =
array(TI=>array(Carlos
Eduardo Carvalho,Nilton
Manoel L. Ado),
RH=>array(Ktia
Hayaschi,Kelly Patrcia
Dias));
/*Descarregando os dados
do array*/
while(list($chave) =
each($empresa))
{
echo $chave.<br>;

while
(list($chave2,$valor) =
each($empresa[$chave]))

{

echo $valor <br>;

}
}
?>
Salve o script na pasta arraymulti

com o nome de arraymulti. php .
Comentrios
O array descarregado a partir de

2 estruturas de repetio do tipo
while(), a primeira estrutura descarrega, a cada execuo, a coluna
do array, por exemplo, na primeira
execuo, por intermdio da funo list(), captura a coluna TI, por
se tratar da primeira coluna, a partir da a segunda estrutura de repetio, tambm por intermdio
da funo list(), captura as linhas
da coluna capturada. Esse processo continua enquanto houver colunas com linhas no array.
Removendo arrays
Se necessitar remover valores ou
apagar todo o array, a PHP dispe
de uma funo especial, unset(),
para essas aes.
Crie uma pasta chamada apagarray e escreva o script a seguir:
<?php
$valores = array();
$valores[]=15;
$valores[]=2007;
$valores[carro]=Celta;
$valores[carro2]=Ferrari;
var_dump($valores);
/*removendo valores via
funo unset*/
unset($valores[carro]);
unset($valores[0]);
//limpando o array
unset($valores);
var_dump($valores);
?>
DICA
A PHP nos fornece uma infinidade de funes para
array(), muito teis, c interessante conhecer algumas destas funes, acesse
<http://php.net/manual/
pt_BR/book.array.php.>
Vamos conhecer mais um recurso

que a PHP disponibiliza? Arquivos.
Um dos recursos interessantes
que a PHP disponibiliza o de
manipulao de arquivos, seja os
mais bsicos como .txt,arquivos
de texto, passando pelos arquivos
de udio, via stream at arquivos
de compresso como os .zip, .rar
e da em diante.
Segundo Muto (2006, p. 68)
Para que possamos ler ou escrever
arquivos de baixo nvel, devemos
sempre seguir os seguintes passos:
Abrir o arquivo em modo

leitura e/ou gravao;
Salve o script na pasta apagarray

com o nome de apagarray. php .
Iniciar o processo de leitura

ou gravao;
Resultado
Fechar o arquivo.
A seguir as principais funes
PHP para manipular arquivos.
array(4) { [0]=> int(15) [1]=>

int(2007) [carro]=> string(5)
Celta [carro2]=> string(7)
Ferrari } NULL
PROGRAMAO WEB
77
Tabela 11: Principais funes PHP para arquivos de dados
NOME
DESCRIO
SINTAXE
fopen
Abre um arquivo. A funo retornar false se ocorrer erro.
$fp = fopen (string nome_arquivo, string modo_de_abertura)
Onde
Nome_arquivo Nome do arquivo
Modo_de_abertura Define a forma como o arquivo ser aberto, conforme parmetros
abaixo:
r somente leitura a partir do incio do arquivo;
r+ - leitura e gravao a partir do incio do arquivo;
w somente gravao a partir do incio do arquivo, onde todo o contedo do arquivo ser
apagado. Se o arquivo no existir a funo tentar cri-lo;
w+ - leitura e gravao a partir do incio do arquivo, onde todo o contedo do arquivo ser
apagado. Se o arquivo no existir a funo tentar cri-lo.
a somente gravao a partir do fim do arquivo. Se o arquivo no existir a funo tentar
cri-lo.
a+ - leitura e gravao a partir do fim do arquivo. Se o arquivo no existir a funo tentar
cri-lo.
Nos modos de w, w+, a, a+ ser necessrio dar permisso ao usurio para gravao no
diretrio onde o arquivo estiver.
NOME
DESCRIO
SINTAXE
NOME
DESCRIO
SINTAXE
NOME
DESCRIO
78
fwrite
Escreve um nmero especfico de bytes de uma string em um arquivo.
$flag = fwrite(int fp, string string)
Onde
string String a ser gravada no arquivo.
Exemplo:
<?php
$fp = $fopen(dados.dat,w+)
fwrite($fp,exemplo)
?>
fgets
Retorna uma string do arquivo a partir do ponteiro do arquivo at que (tamanho -1) bytes
sejam lidos do arquivo. A leitura termina quando encontra o fim de uma linha ou quando
o arquivo termina.
String fgets(int fp, int tamanho)
Onde
Tamanho nmero de bytes a serem lidos do arquivo.
Exemplo:
<?php
$fp = $fopen(dados.dat,r+)
$linha = fgets($fp,12)
?>
feof
Retorna true caso o ponteiro de arquivo esteja no fim do arquivo ou ocorra um erro, caso
contrrio retorna false.
NOME
SINTAXE
NOME
DESCRIO
SINTAXE
fopen
feof(int fp)
Exemplo:
<?php
if(! feof){
echo No fim de arquivo!
}
?>
fclose
Fecha um arquivo aberto. Retorna true se obtiver sucesso ou false em caso de erro.
fclose(int fp)
Exemplo:
<?php
fclose($fp)
?>
Um exemplo prtico que cria e l os dados de um arquivo chamado teste.txt.

Crie uma pasta chamada exearquivotexto e escreva o script a seguir:
<?php
if(!file_exists(teste.txt)) //Verifica se o arquivo teste.txt no existe
{
//Executa se arquivo no existe
$ponteiro = fopen(teste.txt,w); /* Abre(cria) o arquivo teste.txt
para gravao e armazena esta operao em $ponteiro*/
}else {
//Executa se arquivo existe
$ponteiro=fopen(teste.txt,r); /* Abre(cria) o arquivo teste.txt para leitura e armazena esta operao em $ponteiro*/
}
fwrite($ponteiro,Escrevendo algo no arquivo.); /*Grava a frase
Escrevendo algo no arquivo no arquivo teste.txt*/
fflush($ponteiro); /*Libera o buffer (memria de armazenamento
de dados) para o teste.txt*/
fclose($ponteiro); //Fecha um ponteiro de um arquivo aberto, ou
fecha o arquivo
$ponteiro = fopen(teste.txt,r); //Abre o arquivo teste.txt para
leitura
while (!feof($ponteiro)) //Enquanto no for o fim do arquivo texte.txt
{

echo fread($ponteiro,filesize(teste.txt)); // imprima os
dados lidos
}
fclose($ponteiro); //Fecha um ponteiro de um arquivo aberto, ou
fecha o arquivo
?>
PROGRAMAO WEB
79
Salve o script na pasta exearquivotexto com o nome de exearquivotexto. php.

Resultado
a leitura do contedo do arquivo
teste.txt que criou e gravou a frase
Escrevendo algo no arquivo.
Abra pasta exearquivotexto,
veja o arquivo teste.txt. com a frase. Portanto, como estamos lendo
o contedo deste arquivo tambm
o resultado a impresso desta
frase na pgina.
Escrevendo algo no arquivo.
Banco de Dados
Dentre as vantagens oferecidas pela PHP o suporte a banco de dados
uma que se destaca bastante.
Para reforar o estudo do PHP com banco de dados interessante trabalhar um exemplo didtico para o cadastramento de cidades.
Estamos utilizando o VertrigoServ e nele encontramos o PHPMyAdmin, utilitrio que permite a criao e manipulao de banco de dados,
ento se estiver utilizando este pacote tambm ficar mais fcil, caso
contrrio, siga as instrues e adapte para o ambiente que est utilizando.
Criao do banco de dados, como se d esse processo? Assunto que vir
a seguir. Fique atento para compreender todas as etapas.
Procedimentos
1. Inicialize o vertrigo.
Comentrios
O script do exemplo prtico verifica a existncia ou no de um
arquivo texto, caso no exista, cria
o arquivo, do contrrio, abre o arquivo somente para leitura.
Caso o arquivo no exista o arquivo criado e gravado. Na sequncia uma estrutura de repetio
para ler e imprimir os dados contidos no arquivo.
Observe que neste script utilizando algumas funes que no
constam na tabela das principais
funes de arquivo da PHP, so
elas:
2. Clique, com o boto da direita no cone do VertrigoServ e escolha,

Tools/PhpMyAdmin.
3. Informe o usurio e senha para acessar o servidor MySQL neste
ambiente, se a instalao do pacote correu tudo bem e tambm se
no modificou o usurio e senha, para usurio informe: root e para
senha informe: vertrigo.
4. Se tudo correu bem, voc ser redirecionado para a pgina principal
do PhpMyAdmin.
5. Voc pode criar o banco de dados pela ferramenta, ou manualmente, escrevendo scripts em SQL. Localize na pgina Criar novo
Banco de Dados, na caixa de texto abaixo, digite o nome do
banco, exemplodidatico, sem acento mesmo, e confirme clicando
no boto Criar.
file_exists() Verifica a existncia de um arquivo ou diretrio

(pasta);
fflush() Fora a liberao
do buffer de memria para um
arquivo;
fread() Faz a leitura de
dados de um arquivo.
80
Figura 24: Criao banco de dados exemplo didtico
6. Se tudo correu bem, voc deve estar visualizando uma pgina

web onde sua esquerda visualiza o nome do seu banco de dados
exemplodidatico e a sua direita localize Criar nova tabela no
Banco de Dados, na caixa de texto abaixo deste, digite o nome
da tabela no caso, cidades, observe que ao lado deste voc tem,
Nmero de arquivos, isto refere-se quantidade de campos que
deseja para esta tabela, no caso, 2, e aps clique em Executar.
Crie uma pasta chamada insconscidades e escreva o script a seguir:
Figura 25: Criao da tabela cidades
7. Se tudo correu bem, voc deve estar visualizando uma pgina web no
formato de uma tabela, onde a esquerda voc tem o nome das colunas e a direita as entradas para estas. Cada coluna de entrada desta
refere-se a um campo da tabela que ser includo em sua estrutura,
deduz-se ento que voc pode inserir, 2 campos por vez. O tipo de
tabela deve ser InnoDb e confirme o clicando no boto Salvar.
Figura 26: Inserindo os campos da tabela
Um exemplo prtico que insere dados na tabela cidades.

PROGRAMAO WEB
81
<?php
$conexao = mysql_connect(localhost,root,vertrigo)
or die(No foi possvel conectar ao banco.Erro : . mysql_errono().mysql_error());

$nomebanco = mysql_select_db(exemplodidatico,$conexao)
or die(No foi possvel selecionar o banco.Erro : . mysql_errono().mysql_error());
mysql_query(INSERT INTO cidades VALUES(1,Joinville))
or die(Erro ao executar o insert.Erro : . mysql_errono().mysql_error());
mysql_query(INSERT INTO cidades VALUES(2,So Paulo))
mysql_query(INSERT INTO cidades VALUES(3,Rio de Janeiro))
mysql_query(INSERT INTO cidades VALUES(4,Nova Iorque))
mysql_query(INSERT INTO cidades VALUES(5,Paris))
mysql_query(INSERT INTO cidades VALUES(6,Toronto))
mysql_query(INSERT INTO cidades VALUES(7,Londres))
echo Incluso efetuada com sucesso!
?>
Salve o script na pasta insconscidades com o nome de insconscidades. php.
Na tabela cidades
Resultado
O resultado deste script no muito perceptvel na pgina, mas sim
na tabela cidades do banco de dados. Se ocorreu algum erro, esse
ser visualizado na pgina, pois o
script solicita o erro ocorrido. Se
tudo correu bem, uma mensagem
na pgina mostrada e na tabela
cidades do banco de dados voc
ver os dados inseridos pelo script.
Incluso efetuada com sucesso!
Figura 27: Tabela cidades populosas
82
Continuando a prtica de banco de dados, agora crie uma pasta chamada

consultacidades. O prximo exemplo refere-se consulta dos dados
na tabela cidades, para isso escreva o script a seguir:
Comentrios
Nos 2 exemplos foram utilizadas
algumas funes PHP para o banco de dados MySQL.
mysql_connect()
<?php
$conexao = mysql_connect(localhost,root,vertrigo)
or die(No foi possvel conectar ao banco.Erro : . mysql_errono().mysql_error());

$nomebanco = mysql_select_db(exemplodidatico,$conexao)
or die(No foi possvel selecionar o banco.Erro : . mysql_errono().
mysql_error());

$resultado = mysql_query(SELECT codigo, nome FROM cidades)
or die(Erro ao executar select.Erro : . mysql_errono().mysql_error());

echo <table>;
while($linha=mysql_fetch_array($resultado,MYSQL_ASSOC))
{
echo <tr>;
foreach($linha as $valor)
{

echo <td>$valor</td>;
}
echo</tr>;
}
echo </table>;
mysql_free_result($resultado);
mysql_close($conexao);
?>
Salve o script na pasta consultacidades com o nome de consultacidades.php.
Resultado
1. Joinville
2. So Paulo
3. Rio de Janeiro
4. Nova Iorque
5. Paris
Abre uma conexo a um servidor

MySQL. Retorna id_link (id que
identifica o sucesso da conexo)
se obtiver sucesso; caso contrrio
retorna false.
Sintaxe de uso
int mysql_connect(host[:port]
[path/to/socket],usuario, senha)
Onde:
host nome do servidor
onde o MySQL est instalado;
usurio nome do usurio

que ir se conectar ao banco de
dados;
senha senha do usurio para
autenticao no banco de dados;
mysql_select_db()
Seleciona um banco de dados.
Sintaxe de uso
int mysql_select_db(nome_db,id_
link)
Onde:
nome_db nome do banco

de dados desejado;
id_link valor obtido atravs
da conexo realizada com mysql_connect;
mysql_query()
Envia uma consulta ao servidor
MySQL, retornando true caso obtenha sucesso; caso contrrio retorna false.
6. Toronto
7. Londres
Sintaxe de uso
int mysql_query(string,id_link)
PROGRAMAO WEB
83
Onde:
string string SQL;

id_link valor obtido atravs
da conexo realizada com mysql_connect;
mysql_fetch_array()
Retorna um array, com o contedo da(s) linha(s) selecionada, posicionando-se, automaticamente,
no prximo registro, caso exista.
Sintaxe de uso
array mysql_fetch_arra (resultado)
Onde:
resultado valor de retorno

obtido em mysql_query().
Fonte: Muto (2006, p. 247)
Complementando a lista de funes PHP para MySQL:
mysql_free_result()
Libera toda a memria associada
ao identificador de resultado result;
mysql_close()
Encerra a conexo com um servidor mysql.
Cookies
Toda linguagem de programao
dinmica para web deve possibilitar recursos que facilitem na
manipulao de dados tornando
o processo de armazenamento
e recuperao destas informaes mais eficiente, por isso dos
Cookies.
Melo e Nascimento (2007, p.

152) definem Cookies como
[...] comandos especiais enviados no cabealho de requisies
HTTP. Eles podem conter pequenos trechos de dados, que so
geralmente salvos no sistema
de arquivos do cliente pelo navegador, na grande maioria dos
casos de maneira transparente
ao usurio.
Pela caracterstica de armazenar informaes na mquina do

cliente, no aconselhvel utilizar Cookies para armazenar informaes confidenciais como, por
exemplo, senhas de usurio.
Configurando um Cookie
Crie uma pasta chamada configcookie e escreva o script a seguir:
Salve o script na pasta configcookie com o nome de configcookie.php.
Resultado
Configurando um cookie no cliente...
Comentrios
Existe uma particularidade importante quando da utilizao de
Cookies, sobre isso Melo e Nascimento (2007, p. 87) alertam, [...]
como o setcookie atua diretamente
no cabealho da resposta, ele deve
ser o primeiro comando a retornar algo para o cliente..
Caso no for obedecido, veja na
prtica o que ocorre.
Crie uma pasta em www chamada errocookie e escreva o script a
seguir:
<?php
echo Mensagem; /*Ao
executar a aplicao esta linha ser enviada antes do setcookie.
setcookie(username,jjsi
lva); //Esta linha deveria ser
enviada antes da anterior
?>
Fonte: Melo e Nascimento (2007, p.
87)
Salve o script na pasta errocookie

com o nome de errocookie.php.
DICA
Para consultar mais funes
PHP para MySQL acesse o
site: <http://php.net/mysql>
<?php
setcookie(username,jjsil
va);
echo Configurando um
cookie no cliente...;
?>
84
Resultado
Mensagem
Warning: Cannot modify header information - headers already sent by (output started at C:\Program Files\
VertrigoServ\www\errocookie\
errocookie.php:2) in C:\Program
Files\VertrigoServ\www\errocookie\errocookie.php on line 3
Comentrios
Voc pode observar ocorreu um
erro na execuo da pgina, pois
uma linha de instruo foi enviada
antes do comando de cabealho
setcookie. Isto acontece com outros
comandos tambm como, header() e session.
Existe uma maneira de corrigir
isto, nesta e em outras situaes,
no incio do script utilize a funo
ob_start(). Implemente, no script
do arquivo errocookie.php, deve
ficar assim:
<?php
ob_start();
echo Mensagem;
setcookie(username,jjsi
lva);
?>
Lembre-se de salvar o script para

atualiz-lo, aps, execute-o para
ver o resultado.
Resultado
Mensagem
Observe que o erro no ocorre mais, isto por que a funo
ob_start(), em linhas gerais, encarregou-se de armazenar as instrues que no so passadas pelo
cabealho HTTP, at que o comando setcookie fosse executado,
aps esta execuo tais instrues
so executadas.
Este procedimento serve tambm
para header() e session.
Neste exato momento voc tem
uma varivel do tipo cookie chamada username, contendo jjsilva que
armazenada no seu HD assim que
a sua pgina web for chamada.
Acessando um Cookie
Voc pode acessar o contedo
do Cookie criado anteriormente,
como?
Fazendo uso de uma varivel superglobal da PHP chamada $_

COOKIE, trata-se de um array
que contm todas as variveis enviadas pelo navegador do cliente.
Ento para resgatarmos os dados
de uma varivel Cookie deve proceder:
Crie uma pasta em www com o
nome de vercookie e escreva o
script a seguir:
<?php

echo $_
COOKIE[username];
?>
Importante sobre Cookie

Uma informao importante que
passa, imperceptvel, por muitos desenvolvedores usurios de
Cookies, sobre o tipo de dados
que uma varivel Cookie pode armazenar, sobre isso Melo e Nascimento (2007, p. 88) comentam
Um Cookie pode teoricamente conter apenas dados o

tipo string. Isto no impede,
entretanto,que ele armazene
nmeros inteiros ou fracionrios.Assim que o cdigo do PHP
necessitar trabalhar com um
valor numrico armazenado
em um cookie, nada impede o
programador de converter esta
string em um nmero para sua
manipulao.
Exemplo:
Salve o script na pasta vercookie
com o nome de vercookie.php.
Este script obtm o contedo da
varivel cookie criada a partir do
script anterior, portanto, para este
exemplo ser bem sucedido, o script
anterior deve ter sido executado.
lgico que na prtica voc poderia ter as instrues do script
anterior e as instrues deste script
no mesmo arquivo, mas como
sabe, isto um exemplo didtico.
Resultado
Jjsilva
Comentrios
O resultado mostra o que est armazenado no Cookie username.
$x = (int)$_COOKIE[numero_aleatorio]+10;
Fonte: Melo e Nascimento(2007, p. 88)
ltimas sobre Cookies

Os Cookies podem ser criados com
ou sem um tempo de expirao.
Sem um tempo de expirao foi
no estilo do nosso exemplo didtico, isto significa que o Cookie
criado expira quando o usurio da
pgina web fechada.
Cookie com um tempo de

expirao
Crie uma pasta em WWW chamada cookiectexpira e escreva o
script a seguir:
PROGRAMAO WEB
85
<?php
//Especifica um prazo de 5
horas para a utilizao

setcookie(usernam
e,jjsilva,time()+3600*5);

echo Configurando
um cookie no cliente para
expirar em 5 horas;
?>
Salve o script na pasta cookiectexpira com o nome de cookiectexpira.php.
Trabalhando com Sesses

Criando e populando uma varivel de sesso
Crie uma pasta em www chamada sessoes e escreva o script a seguir:
<?php
//Trabalhando com sessoes
//Inicia a sesso com session_start()
session_start();
/*Cria as variveis de sesso para usurio(username)
e senha.*/
$_SESSION[username] = silvio;
$_SESSION[senha]=md5(123456);
//Capturando os dados das variveis de sesso
echo O usurio armazenado na sesso : .$_
SESSION[username].<br>;
echo Sua senha, criptografada, armazenada na sesso : .$_
SESSION[senha];
?>
Removendo Cookies
Sobre a remoo de Cookies, Melo
e Nascimento (2007, p. 90) observam uma maneira e remover
um Cookie do cliente configurar
o valor false para seu contedo.
Como este procedimento depende do cliente, costuma-se tambm
passar um valor negativo para o
seu prazo de expirao.
setcookie(username,false,-1);
Sesses
Sesses no PHP existem a partir
da verso 4, no menos importante do que Cookies, na verdade
o princpio o mesmo, mudam
algumas particularidades e sintaxe
de uso.
O grande objetivo das Sesses o
de armazenar os dados na forma
de variveis e acess-los a partir
de qualquer parte de sua aplicao, enquanto a esta estiver ativa.
As variveis de Sesso funcionam
como variveis globais e so muito teis para programao complexa.
86
Salve o script na pasta sessoes com o nome de sessoes.php.

Resultado
Como resultado voc tem a criao das variveis de sesso $_
SESSION[username] e $_SESSION[senha], contendo, respectivamente, um nome de usurio e sua senha e a impresso do contedo
destas.
O usurio armazenado na sesso : silvio

Sua senha, criptografada, armazenada na sesso : e10adc3949ba-
59abbe56e057f20f883e
Comentrios
O destaque fica para o fato de que qualquer ao que fizer com sesses
deve anteriormente estart-la com session_start().
Veja que a exemplo de Cookies, em sesso tambm voc precisa fazer
uso de uma varivel especial para o armazenamento dos dados, $_SESSION[].
O valor de senha criptografado a partir da funo PHP md5(), que
converte um dado na forma normal para o formato de criptografia.
Para encerrar, o script recupera as informaes das variveis de sesso,
importante relembrar que a partir do momento em que estas variveis
so criadas e alimentadas com dados, estes podem ser acessados de qualquer outro script de sua aplicao.
Removendo os dados
preciso alguns cuidados, o conte-do de uma varivel de sesso pode ser
removido facilmente, ento s execute este script em suas aplicaes caso
realmente necessite.
Das variveis de sesso

Abra o script do arquivo sessoes.php da pasta sessoes e implemente-o
com o seguinte:
<?php
//Trabalhando com sessoes
//Inicia a sesso com session_start()
session_start();
/*Cria as variveis de sesso para usurio(username)
e senha.*/
$_SESSION[username] = silvio;
$_SESSION[senha]=md5(123456);
//Removendo os valores das variveis de sesso
unset($_SESSION[username]);
//Elimina o contedo da varivel de sesso username
unset($_SESSION[senha]);
//Elimina o contedo da varivel de sesso senha
//Capturando os dados das variveis de sesso
echo Sua senha, criptografada, armazenada na sesso : .$_
SESSION[senha];
?>
Salve o script para atualiz-lo, aps, execute-o para ver o resultado.

Resultado
O usurio armazenado na sesso

Sua senha, criptografada, armazenada na sesso
Comentrios
O resultado diz tudo, no acha? Os dados das variveis de sesso no
existem mais, pois foram eliminados a partir da funo unset().
Aqui uma observao, voc tambm obteria sucesso se tivesse aplicado
unset($_SESSION), toda a sesso seria removida, neste caso at se
aplicaria pois o objetivo era o de eliminar os dados de todas as variveis,
mas caso contrrio, no faa uso deste.
Toda a seo
Caso queira remover toda a seo deve proceder da seguinte maneira:
Crie uma pasta em WWW chamada de removesessao e escreva o script
a seguir:
<?php
//Removendo a sessao
session_start();
$_SESSION=array(); //Instruo orientando o que deve
ser eliminado, toda a sesso
session_destroy(); //Funo que destri toda a sesso
echo Sua senha, criptografada, armazenada na sesso : .$_SESSION[senha];
?>
Salve o script na pasta removesessao com o nome de removesessao.php.
Comentrios
Observe que aqui tambm nada

foi impresso, mas o motivo mais
srio, as variveis nem sequer
existem, no existe mais nada
referente sesso, pois esta foi
completamente destruda.
Ento, aqui finalizado o estudo
dos fundamentos desta linguagem, lgico que a PHP nos fornece muito mais recursos, inclusive Orientao a Objetos, porm,
com que voc aprendeu j conseguir desenvolver aplicaes web,
embora, a prtica e a continuao
do estudo sejam exigncias para
que possa desenvolver-se cada
vez mais.
Visando a compreenso de como
desenvolver uma aplicao web,
integrando todas as linguagens
apresentadas, voc convidado a
adentrar na prxima unidade. Rena autonomia, dedicao e disciplina para que seus estudos sejam
significativos em cada percurso de
aprendizagem.
PROGRAMAO WEB
87
Unidade de
estudo 3
Sees de estudo
Seo 1 Abordagem da aplicao
Seo 2 Desenvolvimento da aplicao
Seo 3 Publicao no seu web site
Exemplo Prtico
Seo 1
Abordagem da
aplicao
Tudo o que voc estudou nas
unidades anteriores lhe ajudar a
compreender no s a proposta
como tambm a estrutura e scripts
da nossa aplicao exemplo.
O objetivo principal deste exemplo o de ajud-lo a iniciar o desenvolvimento de uma aplicao
web sendo que a ideia final a de
que voc possa melhor-lo estendendo assim os conhecimentos
repassados nesta unidade curricular e consequentemente auxiliando no seu desenvolvimento
profissional.
A ideia da aplicao exemplo a
de um Informativo Virtual como
Jornal, CMS ou outro, para que
voc possa personaliz-lo como
desejar no momento em que for
efetuar suas implementaes de
melhorias.
Como ideia central o Informativo
contm assuntos que so exibidos nas pginas de sua aplicao,
estes, podem ser acessados por
qualquer usurio web, mas a postagem destes assuntos efetuada
somente por profissionais devidamente autorizados.
Algumas particularidades:
1. Qualquer pessoa pode acessar as informaes, so os usurios visitantes.

2. Somente os usurios especiais, administradores da aplicao, podero
postar as informaes.
3. Todos os arquivos de informaes postados so carregados de arquivos de textos, dinamicamente.
A aplicao exemplo no to complexa, apenas sugere o incio de

um trabalho que deve ser continuado e melhorado por voc.
Ento para iniciar o processo siga na prxima seo onde conhecer a

estrutura geral da aplicao exemplo.
Seo 2
Desenvolvimento da aplicao
Agora que voc j conhece a proposta do exemplo prtico, bem como
sua estrutura, vamos ao seu desenvolvimento.
Inicialmente crie a estrutura de pastas de sua aplicao, toda aplicao
web que se preza deve possuir uma estrutura de pastas e arquivos bem organizada, isto est diretamente ligado a estrutura de sua aplicao, quanto mais organizado melhor tambm o desempenho de sua aplicao.
A estrutura de pasta que voc deve criar para sua aplicao esta conforme figura a seguir. Crie, mesmo que ainda no tenha iniciado o desenvolvimento.
PROGRAMAO WEB
89
Estrutura de pastas da aplicao:
Figura 27: Estrutura de pastas exemplo

prtico
Agora hora de desenvolver a pgina principal de sua aplicao, segundo os padres de desenvolvimento de aplicao web, a primeira
pgina de uma aplicao deve ser
nomeada como ndex (ndice), ento, vamos a ela.
A construo de uma pgina web deve ser antecedida
de um estudo de contedo e
layout antes de sua elaborao para que, no momento de
sua implementao, j saiba o
que vai implementar.
Outra informao importante,

enquanto estiver desenvolvendo
sua aplicao, teste os resultados
nos navegadores mais so utilizados, principalmente ao IE e
Mozilla Firefox, pois de um navegador para outro existem muitas
diferenas em termos de visualizao e tambm de recursos.
Tendo criado sua estrutura de
pastas, abra o seu editor e escreva
o seguinte script:
90
/*Documento CSS*/
/*Configuraes para o corpo das pginas*/
body{

margin:5px;

font-family: Verdana,Arial,Helvetica, sans-serif;

font-size:12px;

background-color: #363636;

text-align: center;
}
/*Div geral que delimita a rea de visualizao das pginas*/
div#geral{

width: 800px;

height: 569px;

border-right: 1px solid #000000;

border-left: 1px solid #000000;

margin:0px auto;

background-color: #fff;
}
/*Div para o cabealho das pginas*/
div#cabecalho{

width: 800px;

height: 90px;

font-family:Verdana,Arial, Helvetica, sans-serif;

font-size:32px;

text-align: center;

line-height:90px;

color:#104E8B;
}
/*Div que separa cabealho e rodap*/

div#divisoria{

width:800px;

height:25px;

background-color:#104E8B;

clear:both;
} /* linha divisria do cabealho e corpo da pgina */
/*Configuraes css para os links*/
a{

text-decoration: none; /*Retira o sublinhado do link*/

line-height:24px; /*Posiciona, verticalente o texto dos links*/
}
/*Configurao do link antes de ser clicado*/
a:link{

font-style: normal;

color: #FFFFFF;

font-size: 13px;
}
/*Configurao do link aps ser clicado*/
a:visited{

font-style: normal;

color: #FFFFFF;

font-size: 13px;
}
/*Efeito hover para o link, ao passar o mouse sobre o link*/
a:hover{

font-style: normal;

color: #000000;

font-size: 13px;
}
/*Classe para o link que determina o espaamento entre eles*/
a.linkscab{

padding: 0px 40px 0px 40px;
}
/*Div da esquerda da pgina*/
div#esquerda{

width:200px;

margin-top:40px;

height:300px;

float:left;

background-color:#104E8B;

color: #FFFFFF;
}
/*Div login que contm o formulrio de login*/
div#login{

width:200px;

height:90px;

margin-top:20px
}
PROGRAMAO WEB
91
/* CLASSES GERAIS */
.alinha_dir{

text-align:right;
} /* usada para alinhar contedo a direita */
.alinha_cnt{

text-align:center;
} /* usada para alinhar contedo ao centro*/
.alinha_esq{

text-align:left;
} /* usada para alinhar contedo a esquerda*/
/*Div central das pginas*/
div#meio{

width: 592px;

height: 380px;

top:60px;

float:right;

background-color: #fff;

text-align: center;

overflow:auto;
}
/*Div rodap das pginas*/
div#rodape{

width: 800px;

height: 48px;

border-top: 1px solid #000000;

border-bottom: 1px solid #000000;

border-right: 1px solid #000000;

border-left: 1px solid #000000;

clear:both;
}
Salve o script na pasta css com o nome de layout.css.

Ainda no hora de executar a aplicao, pois trata-se do arquivo de
configurao de sua aplicao, ento siga as instrues a seguir.
Abra um novo documento no seu editor de programas e escreva o seguinte script:
<html>
<head>
<title>:: INFORMATIVO ONLINE - PRINCIPAL :: </title>
<link href=css/layout.css rel=stylesheet>
</head>
<body>
<?php
/*Atribui varivel \$boasvindas, o texto de boas-vindas, impresso na div esquerda da pgina
principal.*/
92
$boasvindas=
<br/><br/><br/>
<font size=2>
<b>Bem vindos a nossa pgina</b>
</font>
<br/><br/>
<font size =2>
Esperamos que você aprecie a visita, nossas informaes e atendimento.
</font>
<br />;
/*Atribui varivel \$now a data atual, para ser exibida tambm na div esquerda da
pgina principal. Aqui uma novidade, note que estamos armazenando nesta varivel
primeiramente, o tamanho da fonte da data e depois concatenamos \$.= nela mesma a
data, a parti da funo date(d/m/Y), que por sua vez, extrai a data atual do servidor onde
encontra-se a aplicao.*/
$now = <font size =2>;
$now .= date(d/m/Y);
/* Atribui varivel \$arest o texto e e as configuraes de fonte. */
$arest=<font size=2>
<strong>rea Restrita</strong>
</font>
<br />;
?>
<div id=geral> 
<div id=cabecalho>
INFORMATIVO ONLINE
</div>
<div id=divisoria>
<a href= class=linkscab>Tempo</a>
<a href= class=linkscab>Esportes</a>
<a href= class=linkscab>Fale conosco</a>
</div>
<div align=center>
<div id=esquerda>
<?php
echo <br />; //Tag br embutida no PHP
echo Hoje $now ; //Imprimir o valor da varivel $now
echo $boasvindas; //Imprimir o valor da varivel $boasvindas
?>
<div id=login>
<form name =frmlogin method=post action=login.php >
<table width=100% border=0>
<tr>
<td colspan=2 align=center>REA RESTRITA</td>
</tr>
PROGRAMAO WEB
93
<tr> 

<td class=alinha_dir>Usuário:</td>
<td class=alinha_esq><input type=text name= txtusuario
size=15 maxlength=15 /></td>
</tr>
<tr>
<td class=alinha_dir>Senha:</td>
<td class=alinha_esq><input type=password name=
txtsenha size=15 maxlength=15 /></td>
</tr>
</table>
<tr>
<td>&nbsp</td>
</tr>
<tr>
<td class=alinha_cnt><input type=submit value=Acessar />
</td>
</tr>
</table>
</form>
</div>
</div>
</div>

<div id=meio>
</div>
<div id=divisoria></div>
<div id=rodape>
<br />
© Exemplo didtico de aplicao web - Todos os direitos reservados.
</div>
</div>
</body>
</html>
Salve o script direto na pasta

exemplopratico com o nome de
index.php.
Agora sim, execute a sua pgina
para verificar como est ficando,
lembre-se, deve chamar a pgina
index.php que se encontra na
pasta exemplopratico.
94
Comentrios
O script est documentado com linhas de comentrio para que possa

compreender melhor as instrues, mas aqui cabe uma rpida explicao, voc percebeu que o arquivo est sendo salvo com a extenso .php
e no .html? Isto porque existem instrues PHP se no salvar com
esta extenso, o servidor no chamar o interpretador PHP para interpretar estas instrues.
Ateno
1. Se o script contiver HTML e/ou CSS salve-o com a extenso .html.
2. Se o script contiver HTML e/ou CSS e tambm Javascript, salve-o
com a extenso.html.
3. Se o script s contiver CSS salve-o com a extenso .css.
4. Se o script s contiver Javascript salve-o com a extenso .js.
5. Se o script contiver, no mnimo 1 linha em PHP, salve-o com a extenso
.php, no importando se tambm tem html, css ou Javascript.
Resultado
Figura 28: Pgina principal do exemplo prtico
Agora voc far a validao dos campos Usurio e Senha, pois ambos
no podem ficar em branco quando enviar os dados do formulrio.
Recomenda-se que esta validao seja feita no lado cliente, a partir da
linguagem Javascript e tambm no lado servidor a partir da PHP.
Para isso implemente o script do arquivo index.php com o seguinte,
abaixo da tag </head> e antes da tag <body>:


<script language=javascript>

function valida_login(frmlogin)
{ /*Incio da funo */
PROGRAMAO WEB
95
/* Verifica se o campo do formulrio txtusuario est vazio. */

if(frmlogin.txtusuario.value==)
{
/* Mostra caixa de mensagem do tipo alerta. */
alert(Preencha o campo Usuario.);
/* Aps o alerta, posiciona o foco da pgina no campo txtusuario. */
frmlogin.txtusuario.focus();

/* Retorna falso para o evento onsubmit. */
return false;
/*Se o campo txtusuario no estiver vazio. */
}else
/* Verifica se o campo do formulrio txtsenha est vazio. */
if(frmlogin.txtsenha.value==)
{
/* Mostra caixa de mensagem do tipo alerta. */
alert(Preencha o campo Senha.);
/* Aps o alerta, posiciona o foco da pgina no campo txtsenha. */
frmlogin.txtsenha.focus();

/* Retorna falso para o evento onsubmit. */
return false
/* Se o campo txtsenha no estiver vazio.*/
}else {
/* Retorna verdadeiro para o evento onsubmit. */
return true;
}
}/* Trmino da funo */
</script>

Ainda no terminou, agora localize a tag do formulrio e implemente o

que est em destaque:
<form name =frmlogin method=post action=login.php
onsubmit=return valida_login(this)>
Este novo elemento refere-se a um evento (ao) associado ao formulrio, que significa, na prtica, que quando o boto submit for acionado
solicitado a uma funo chamada valida_login um retorno, se falso os
dados do formulrio no so enviados, pois significa que algum campo
no foi preenchido, do contrrio, retornado o valor true, os dados do
formulrio so enviados para pgina login.php, atribuda ao atributo
action, do formulrio, como voc pode observar.
96
Agora sim, salve novamente o script,

execute-o e teste. Deixe o campo
usurio em branco e clique no boto
Acessar, uma mensagem de alerta deve aparecer solicitando que o
campo Usurio deve ser preenchido
como mostra a figura a seguir.
<a href=index.
php?menu=programas/
progtempo&act=progtempo
class=linkscab>

Tempo
</a>
Por enquanto s implemente este

link, os demais viro na sequncia.
4. Na div meio da pgina index.
php implemente o script a seguir:
Figura 29: Validao de campos do formulrio
A seguir faa o mesmo teste para o campo senha.
Comentrios
Muito cuidado neste script, para quem no est muito acostumado, normalmente erra ao implementar e custa muito a localizar o erro pois o
interpretador no avisa onde o erro se encontra. At erros no formulrio
fazem com que erros nessa rotina possam ser detectados fazendo com
que ela no funcione ento, muita ateno.
Agora voc vai trabalhar o seguinte, ao clicar no link do tempo a aplicao carregar, dinamicamente, um arquivo texto dando as condies
do tempo, para isso siga as instrues.
1. Abra o editor de texto, bloco de notas ou WordPad, e escreva um
pequeno texto sobre o tempo, exemplo:
Rio de Janeiro - Mxima 35 - Mnima 24
So Paulo - Mxima 22 - Mnima 18
Santa Catarina - Mxima 22 - Mnima 5.
2. Salve este arquivo com o nome de temp.txt na pasta arquivostextos.
<?php
/* Aqui a rotina mais importante deste script,verifica
se as varivel menu e act,
declaradas e atribudas
anteriormente nos links,
foram criadas, se foram
criadas, significa que algum
link foi clicado,na sequncia,
captura o contedo de menu
e act e da inclui a pgina de
acordo com o que continha
as variveis. A partir da, se
tudo correu bem, sua pgina
j deve estar carregada na
div centro da pgina da sua
pgina principal. */
if (isset($_GET[menu])&&
isset($_GET[act]))
{
$menu=$_GET[menu];
$act=$_GET[act];
include
$menu/$act..php;
}
?>
3. Abra o script da pgina index.php e implemente o que est em destaque a seguir:
PROGRAMAO WEB
97
5. Salve o arquivo index.php para atualiz-lo.

6. Abra um novo documento em seu editor de programas e escreva o
seguinte script:
TEMPO
<br />
<?php
/* Arquivo contendo funo para ler um arquivo texto. */
include includes/funcoes.php ;
?>
<html>
<head>
<title></title>
</head>
<body>
<?php
/*Chama a funo learquivo() contida no arquivo includo no topo da pgina. Est
passando para a funo o nome da pasta e o arquivo texto a ser lido.*/
learquivo(arquivostextos/temp.txt);
?>
</body>
</html>
7. Salve este arquivo na pasta programas/progtempo com o nome de

progtempo.php.
8. Abra um novo documento em seu editor de programas e escreva o
seguinte script:
<?php
function learquivo($nomedoarquivo) {
$fp = fopen($nomedoarquivo,r) ;
/*fopen(), funo php que permite abrir arquivo, o parmetro r(read)leitura.*/
// lao que ir ler todo o conteudo do arquivo
while (! feof($fp)) {
/*while, comando de estrutura de repetio que significa enquanto*/
//feof(), Testa pelo fim-de-arquivo (eof - end of file)
// leitura de cada linha do arquivo
$linha = fgets($fp,500) ;
/*fgets(), funo que Le uma linha de um ponteiro de arquivo*/
echo $linha ;
echo <BR> ;
}
// fim do lao
// fecha o arquivo
fclose($fp) ;
//fclose(), funo php que significa fechar o arquivo
}
?>
98
9. Salve este arquivo na pasta includes com o nome de funcoes.php.

Agora sim, se escreveu os scripts corretamente, salvou nas pastas corretas, os referidos scripts, o resultado ser o seguinte, quando clicar no link
Tempo:
<a href=index.
php?menu=programas/
progesporte&act=progesporte
class=linkscab>Esportes</a>
4. Salve o arquivo index.php

para atualiz-lo.
5. Abra um novo documento em
seu editor de programas e escreva o seguinte script:
<?php
/* Arquivo contendo funo
para ler um arquivo texto. */
include includes/funcoes.
php ;
Figura 30: Carregando a pgina do tempo dinamicamente
Agora voc deve implementar a pgina, dinamicamente, para o link Esportes. O processo idntico ao anterior s que desta vez no precisar
implementar o arquivo da funo que l o arquivo texto, pois esta ser
utilizada por este programa tambm, evitando assim escrev-la novamente e tambm a rotina que carrega as pginas dinamicamente, localizada na div meio da pgina index.php, este ser reutilizado. Sendo assim
vamos aos procedimentos.
1. Abra o editor de texto, bloco de notas ou WordPad, e escreva um
pequeno texto sobre esporte, exemplo:
JOINVILLE - SC
O Joinville Esporte Clube no est fazendo uma boa campanha no Catarino 2011, desse jeito, em campeonato algum ter sucesso.
Parabns aos clubes Cricima, Chapecoense e Figueirense que fazem
valer sua tradio.
2. Salve este arquivo com o nome de esporte.txt na pasta arquivostextos.

3. Abra o script da pgina index.php e implemente o que est em destaque a seguir:
?>
<html>
<head>
<title></title>
</head>
<body>
ESPORTE
<br />
<?php
/*Chama a funo learquivo()
contida no arquivo includo
no topo da pgina. Est passando para a funo o nome
da pasta e o arquivo texto a
ser lido. */
learquivo(arquivostextos/
esporte.txt) ;
?>
</body>
</html>
6. Salve este arquivo na pasta programas/progesporte com o

nome de progtesporte.php.
PROGRAMAO WEB
99
Agora sim, se escreveu os scripts corretamente, salvou nas referidas pastas, o resultado ser o seguinte, quando clicar no link Esportes:
Figura 31: Carregando a pgina de esportes dinamicamente
Comentrios
Voc conseguiu carregar dinamicamente os textos, a partir de seus respectivos arquivos, simplesmente clicando em seus links. Se por acaso
desejar modificar o texto, abra o arquivo texto, salve-o novamente, e
chame sua pgina ou atualize, caso j esteja aberta, que a sua atualizao
j aparece no texto.
Atualizar o arquivo texto fora da sua aplicao no muito legal, isto
obriga voc a ter que acessar o servidor, abrir o arquivo, modific-lo,
salv-lo, tudo isso de fora de sua aplicao, no mesmo? Fique tranquilo, isto uma melhoria que voc far no decorrer dos seus estudos nesta
unidade e em outras.
Autenticao de usurio
Voc sabe que o formulrio contendo os campos Usurio e Senha serve
para limitar o acesso dos usurios rea restrita de sua aplicao, certo?
Ou seja, s acessam esta rea pessoas devidamente cadastradas em banco de dados, do contrrio, o usurio no tem acesso a esta rea restrita.
O processo de autenticao este, a partir da informao de um Usurio
e Senha verificado a existncia ou no deste usurio, se no existir, uma
mensagem exibida, caso contrrio o acesso rea restrita permitido.
Outra particularidade importante,

quando voc encontra uma situao como esta, ou seja, precisa em
sua aplicao possibilitar o acesso
de usurios especiais, isto deve ser
encarado com cuidado, pois, normalmente, os usurios especiais
que vo interagir com a aplicao
e nem todos podem ou devem ter
acesso a todas as funcionalidades
da aplicao.
Em nosso exemplo estaremos
determinando que os usurios
que tero acesso a aplicao sero
divididos em categorias, ou seja,
aqueles usurios que podero registrar outros usurios tero o nvel de permisso 0 - Administrador, j os usurios que carregam,
modificam e salvam os arquivos
textos tero o nvel de permisso1
- Operacional.
O usurio Administrador s poder cadastrar usurios e no poder modificar os arquivos textos.
J o usurio Operacional s poder modificar os arquivos textos,
no poder registrar outros usurios da aplicao.
Nosso aplicativo exemplo trabalha a autenticao e acesso a rea
restrita somente para o Administrador, com base nesses procedimentos, voc far, a partir de atividades propostas, o acesso para o
usurio Operacional.
Vamos iniciar o processo?
Primeiramente abra seu editor
de programas, carregue o arquivo layout.css e implemente mais
uma div central.
Mas para que mais uma div central
se j dispomos de uma?
que esta ser utilizada com outro fim, o de mostrar uma mensagem e tambm um formulrio,
isto faz com que suas especificaes modifiquem.
100 CURSOS TCNICOS SENAI
div#meio1{
width:800px;
height:380px;
display:table;
overflow:auto;
font-size:12px;
background-color:#ffffff;
float:center;
}
Salve o arquivo layout.css para

atualiz-lo com mais esta div.
Agora implemente mais alguns
scripts, solicito que abra um novo
documento no seu editor de programas e escreva o seguinte script:
<?php
$servidor= localhost; //Atribui o nome do servidor do
banco de dados
$usuario=root; //Atribui o
nome de usurio para acesso
ao servidor de banco de dados
$senha=vertrigo; //Atribui
a senha para acesso ao servidor de banco de dados
$banco=exemplopratico; //
Atribui o nome do banco de
dados
?>
Salve este arquivo com o nome de

config.php na pasta includes.
Este arquivo contm as informaes para a conexo de banco de
dados, toda vez que necessitar
alter-las basta faz-lo somente
neste arquivo.
Abra novamente um novo documento no seu editor de programas escreva o seguinte script:
<?php
include (config.php); //Inclui o arquivo de configurao
/*Armazena na varivel $conexao o resultado da conexo com o
servidor de banco de dados */
$conexao = mysql_connect($servidor, $usuario , $senha);
/* Se no conseguiu conectar envia uma mensagem dando cincia
de que a conexo no foi efetuada e mostra o erro ocorrido. */
if (!$conexao) {
die(No foi possvel conectar ao banco: . mysql_error());
}
/*Armazena na varivel $db_selected o resultado da seleo do
banco de banco de dados */
$db_selected = mysql_select_db($banco,$conexao);
/* Se no conseguiu localizar o banco de dados envia uma mensagem dando cincia que o banco banco de dados no foi localizado
mostra o erro
ocorrido. */
if (!$db_selected) {
die (No foi localizar o banco $banco : . mysql_error());
}
?>
Salve este arquivo com o nome de conexao.php na pasta includes.

Um recurso interessante implementado nesta aplicao foi a criao de
um arquivo contendo uma funo que disponibiliza as mensagens que
necessita enviar. Cada mensagem tem o seu nmero correspondente,
toda vez que necessitar uma mensagem, basta dar o include deste arquivo,
chamar a funo e passar o nmero da mensagem que deseja utilizar.
Ento abra um novo documento e escreva o seguinte script:
<?php
//Css local para formatar as mensagens
echo


div#formata_msg{


font-size : 13px;

font-color : #ffffff;

font-weight:bolder;

padding-top:220px;
}

</style>;
echo <div id=formata_msg>;
echo </div>;
PROGRAMAO WEB
101
//MENSAGENS DE LOGIN
/* Funo criada para retorna uma mensagem de acordo com a operao realizada na aplicao, funciona como um repositrio de mensagens. */
function menlog($idmens){
switch ($idmens) {
case 1 : {

$mens1 = Voc no efetuou login!;

return $mens1;
}
break;
case 2 : {

$mens2=Nome de usuário ou senha incorreto!;

return $mens2;
}
break;
case 3 : {

$mens3=Cadastro efetuado com sucesso!;

return $mens3;
}
break;
case 4 : {

$mens4=Erro no cadastro. Tente novamente!;

return $mens4;
}
break;
case 5 : {

$mens5=Usuário j existe.Informe outro nome de
usurio!;

return $mens5;
}
break;
case 6 : {

$mens6=Cadastro atualizado com Sucesso!;

return $mens6;

}
break;
case 7 : {

$mens7=Erro durante a atualizao. Tente novamente!;

return $mens7;
}
break;
case 8 : {

$mens8=Cadastro excluído com sucesso!;

return $mens8;
}
break;
case 9 : {

$mens9=Erro durante a exclusão do cadastro. Tente
novamente!;

return $mens9;
}
break;
}
}
?>
Salve este arquivo com o nome de

mensagens.php na pasta inclu-
des.
Aproveitando tambm, interessante escrever o script do arquivo

de logout de sua aplicao, abra um
novo documento e escreva o seguinte script:
<?php
session_start();
$_SESSION = array();
session_unset()
session_destroy();
header (Location:index.
php);
?>
Salve o arquivo com o nome de

logout.php na pasta exemplopratico.
Agora voc escrever o script do
arquivo login.php, esse receber o
Usurio e Senha informados, far
uma verificao, se Usurio no
confere, envia uma mensagem de
erro, do contrrio, verifica a senha, se senha no confere, envia
uma mensagem de erro, se Usurio e Senha OK, cria uma sesso e
as variveis de sesso para o usurio e redireciona a aplicao para a
pgina Usurio(rea restrita) para
que este possa cadastrar usurios.
Abra um novo documento no seu
editor de programas e escreva o
seguinte script:
<?php
ob_start();
/*Funo PHP que auxilia na priorizao das que ativa o buffer de sada e enquanto este
estiver ativo no enviada ao servidor nenhum script,que no sejam cabealhos, sesso,
cookie, header().*/
session_start();//inicia a sesso
?>
<html>
<head>
<title>:: INFORMATIVO ON-LINE [LOGIN]::</title>
</head>
<body>
<div id=geral>
INFORMATIVO ONLINE

<div id=meio1>
<?php
include includes/mensagens.php;
/*inclui o arquivo de mensagens, no caso para mensagem de erro */
include includes/conexao.php;
/*estabelece a conexo com o banco de dados*/
$usr=$_POST[txtusuario];
$pwd=md5($_POST[txtsenha]);
//Mensagens utilizadas
$mens=;
//Armazena em $res o resultado da consulta SQL
$res=mysql_query(SELECT * FROM usuarios WHERE username =$usr,$conexao);
//armazena em $linhas a qtde de linhas resultante da consulta
$linhas=mysql_num_rows($res);
PROGRAMAO WEB
103
//Armazena no array $dados os dados resultantes da consulta

$dados=mysql_fetch_array($res);
$bd_usr=$dados[username];
/*armazena em $bd_usr o valor do campo username*/
$bd_pwd=$dados[senha];
/*armazena em $bd_pwd o valor do campo senha*/
$bd_nome=$dados[nome];
/*armazena em $bd_nome o valor do campo nome*/
$bd_nivel=$dados[nivel];
/*armazena em $bd_nivel o valor do campo nvel*/
if ($linhas)
//se houver(rem) linha(s) resultante(s) da consulta?
{
if (($bd_pwd==$pwd)and($bd_usr==$usr))
{
/*se o usurio e senha informados corresponderem ao banco de dados?*/
$_SESSION[username]=$bd_usr;
/*cria varivel de sesso para username*/
$_SESSION[senha]=$bd_pwd;
//cria varivel de sesso para senha
$_SESSION[nome]=$bd_nome;
//cria varivel de sesso para nome
$_SESSION[nivel]=$bd_nivel;
//cria varivel de sesso para nvel
$_SESSION[id_sessao]=session_id();
header (Location:programas/cadastros/cadusuario/usuario.php);
mysql_close($conexao);
}elseif (($bd_pwd!=$pwd)and($bd_usr==$usr))
{ //seno, se senha informada diferente e usurio confere?
$mens=menlog(2);
/*chama a funo menlog solicitando a mensagem usurio ou senha incorretos cujo cdigo 2*/

}else{
//seno, nem senha e usurio conferem!!!!
$mens=menlog(2);
/*chama a funo menlog solicitando a mensagem usurio ou senha incorretos
cujo cdigo 2*/
}
}else{
//se no houver linhas resultantes da consulta!!!!!
$mens=menlog(2);
}
//tabela que formata a mensagem de erro
echo <center>;
echo <table>;
echo <tr>;
echo <td>.$mens.</td>;
echo </tr>;
echo </table>;
?>

</div>
<div id=divisoria>
<a href=index.php>Retornar</a>
</div>
<div id=rodape>
<br>© Exemplo didtico de aplicao web - Todos os direitos reservados.
</div>
</div> 
</body>
</html>
Salve este arquivo com o nome de login.php na pasta exemplopratico.

Caso informe Usurio ou Senha incorretos, uma mensagem de erro ser
exibida.
Comentrios
Esta pgina resume-se, visualmente, a mostrar uma mensagem
caso o Usurio ou Senha no conferir, mas por debaixo dos panos,
popularmente falando, a pgina
login.php faz muita coisa. Perceba que a pgina ficou muito simples, poderia ter uma imagem para
a mensagem, esta poderia ter uma
cor de fundo e ser mais bem posicionada. Tudo isso voc aprender ainda nesta unidade.
Caso o Usurio e Senha estejam
OK, o usurio redirecionado
para a rea restrita permitindo que
este proceda o cadastramento de
usurios do sistema.
Antes de trabalharmos este script,
necessrio destacar o seguinte,
visando implementar um pouco
de segurana em nossa aplicao,
toda pgina que entender que no
pode ser acessada diretamente
sem o usurio ter-se autenticado,
ser feita uma validao de sesso, pois se o usurio se autenticou cria-se uma sesso para este,
lembra-se?
Pensando assim, abra um novo
documento em seu editor de programas e escreva o seguinte script:
Figura 32: Pgina login com mensagem de usurio ou senha incorreto
PROGRAMAO WEB
105
<?php
/* permite que seja enviado ao servidor web, primeiramente, os comandos de criao de
sesso ou redirecionamentos, antes de qualquer solicitao html, javascript, css. */
ob_start();
include conexao.php;
//MENSAGENS UTILIZADAS
session_start (); //inicia a sesso

if (!isset($_SESSION[id_sessao]))
{ //verifica se a varivel de sesso no contm valor
unset ($_SESSION[id_sessao]); //destri a varivel de sesso
include mensagens.php; //inclui o arquivo mensagens.php
$mens1=menlog(1);
/* chama a funo menlog(arquivo mensagens.php) passando como parmetro o 1
por que desejamos obter a mensagem, Voc no efetuou o login, cuja a identificao 1. Recebe o retorno e armazena em $mens1.*/
header (Location:../../../index.php?mens=$mens1);
/*redireciona o programa para a pgina index.php enviando como parmetro a
mensagem capturada*/
exit; //abandona a rea de sesso
} else {
if ($_SESSION[id_sessao] != session_id())
{
/*verifica se o contedo da varivel de sesso diferente da sesso que
est ativa*/
unset ($_SESSION[id_sessao]); //destri a varivel de sesso
$mens1=menlog(1);
/* chama a funo menlog(arquivo mensagens.php) passando como
parmetro o 1 por que desejamos obter a mensagem, Voc no efetuou o login, cuja a identificao 1. Recebe o retorno e armazena em
$mens1.*/
header (Location:../../../index.php?mens=$mens1);
/*redireciona o programa para a pgina index.php enviando como parmetro a mensagem capturada*/
exit; //abandona a rea de sesso

}else { // se a varivel de seso no for diferente da sesso ativa.

$id_usuario=$_SESSION[username];
/*captura o login do usurio utilizado na sesso*/

$senha_usuario=$_SESSION[senha];

/*captura a senha do usurio utilizado na sesso*/

$nome_usuario=$_SESSION[nome];

/*captura o nome do usurio utilizado na sesso*/

$cargo_usuario=$_SESSION[cargo];

/*captura o cargo do usurio utilizado na sesso*/

$senha_usunario=$_SESSION[email];

/*captura o e-mail do usurio utilizado na sesso*/

$nivel_usuario=$_SESSION[nivel];

/*captura o nvel do usurio utilizado na sesso*/

}
}
mysql_close ($conexao);
?>
Salve este arquivo com o nome de valida_sessao.php na pasta includes.
Em toda pgina que desejar estabelecer que um usurio possa entrar se

for autenticado, deve dar um include no arquivo valida_sessao.php, este,
por sua vez, verifica se uma sesso encontra-se ativa, se sim permite o
acesso a pgina se no envia uma mensagem de erro. Mas, antes de escrever o script do arquivo usuario.php ter que fazer uma implementao
no arquivo layout.css, ento abra este arquivo e insira o seguinte:
.barra_opcoes{

width:786px;

line-height:20px;

/*espaamento entre linhas*/

padding:0px 0px 0px 5px;

/*todos os espaamentos, topo, direita, inferior e esquerda*/

background-color:#77bb9ed;

font-weight:bolder;

/*define a espessura da fonte especificada*/

}
/*esta div usada para orientar o usurio de que operao do menu
encontra-se ativa*/
Salve o arquivo para manter esta atualizao.

Agora sim, abra um novo documento no seu editor de programas e
<?php
include ../../../includes/valida_sessao.php;
?>
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 />
<title>:: INFORMATIVO ON-LINE - REA RESTRITA</title>
<link href=../../../css/layout.css rel=stylesheet />
</head>
<script language=javascript src=../../../funcoesjs/funcoes.js> </script>
<body>
PROGRAMAO WEB
107

INFORMATIVO ONLINE

<p align=center><a href=../../../logout.php>Logout</a></p>
<div id=meio1>
<?php
if ($nivel_usuario==0)
{
?>
<br />
<center>
<form name=frmcadusu action=val_cad_usuario.php method=post
onsubmit=return valida_usu()>
<table>
<tr>
<td>* Usurio :</td>
<td><input name=txtlogin id=txtlogin type=text size=18 maxlength=15></td>
</tr>
<tr>
<td>* Senha :</td>
<td><input name=txtsenha id=txtsenha type=password size=18
maxlength=15></td>
</tr>
<tr>
<td>* Nome completo :</td>
<td><input name=txtnomcomp id=txtnomcomp type=text size=50
maxlength=50></td>
</tr>
<tr>
<td> Permisso:</td>
<td><select name=selnivel id=selnivel>
<option value=>-----------Escolha-----------</option>
<option value=0>Nvel 0 - Administrador</option>
<option value=1>Nvel 1 - Operacional</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<input name=enviar type=submit value=Enviar
class=botao>
<input name=limpar type=reset value=Limpar class=botao>
</td>
</tr>
</table>
</form>
</center>
<br />
<div class=barra_opcoes> • USUÁRIOS CADASTRADOS </div>
<br />
<table border=1 align=center bordercolor=#77bb9ed width=60%>
<tr>
<td align=center width=40%><font size=2><strong>USUÁRIO</
strong></font></td>
<td align=center width=50%><font size=2><strong>NOME</strong></
font></td>
<td><font size=2><strong>Editar</strong></font></td>
<td><font size=2><strong>Excluir</strong></font></td>
</tr>
<tr>
<?php
include ../../../includes/conexao.php;
$sql=mysql_query(SELECT * FROM usuarios) or die (mysql_error());
while($dados=mysql_fetch_array($sql))
{
$user=$dados[username];
$senha=$dados[senha];
$nome=$dados[nome];
$email=$dados[nivel];
?>
<td align=center><font size=2><?php echo $user ?></font></td>
<td><font size=2><?php echo $nome ?></font></td>
<?php
echo <td align=center><a href=edi_usuario.php?user=$user><img src=../../../
imagens/editar.jpg align=center title=Editar esse usuário</a></td>;
echo
<td
align=center><a
href=val_del_usuario.php?user=$user
onClick=return confirma(\$user\)><img src=../../../imagens/excluir.jpg
align=center title=Excluir esse usuário</a></td>;
?>
</tr>
</table>
</div>
<div id=divisoria>
<a href = javascript:history.back()>Retornar</a>
</div>
<div id=rodape> © Exemplo didtico de aplicao web - Todos os direitos reservados.
</div>
</body>
</html>
PROGRAMAO WEB
109
Salve o arquivo com o nome de usuario.php na pasta programas/

cadastros/cadusuario.
Como resultado voc pode obter 2 situaes, primeira, se o usurio tentar
acessar a pgina usuario.php sem autenticar-se, na url digitar, 127.0.0.1/
exemplopratico/programas/cadastros/cadusuario/usuario.php e
pressionar enter, veja o que acontecer:
Figura 33: Resultado do acesso a pgina de usurio sem autenticar-se
Comentrios
Isto se d, principalmente, porque no incio do script da pgina usurio.php
voc encontra um include para o arquivo valida_sessao.php, ou seja, toda vez
que esta pgina for chamada uma validao de sesso ser realizada para saber
se o usurio que est acessando est autorizado ou no a acessar a pgina.
Se tudo estiver ok, foi criada uma sesso para o Usurio autenticado, o
resultado ser o acesso a pgina restrita, usuario.php, e o cadastramento
de novos usurios ser permitido, tendo como resultado:
Figura 34: Figura 35: Acesso ao cadastro de usurio
Note uma particularidade, nesta

pgina o usurio Administrador
poder cadastrar todos os usurios que podem ter acesso ao sistema e abaixo do formulrio ele
visualiza os usurios que j foram
cadastrados. Outra particularidade que nessa mesma pgina voc
inclui, exclui e modifica informaes de usurios.
Vale ressaltar que tanto a incluso,
como a excluso e alterao sero
executadas a partir de funes
criadas e que estas foram elaboradas para trabalhar de forma dinmica, ento, antes de escrever o
script para as transaes de incluso, excluso e alterao, abra um
novo documento no seu editor de
programas e escreva o seguinte
script:
<?php
function inclusaobd($tabela, $dados){
// Cadastra dados no banco de dados
/*
** tabela = tabela onde os dados sero salvos
** dados = dados a serem inseridos na tabela
**
** Os dados devem vir no seguinte formato: $dados[nome_do_campo] = valor_do_campo
**/
// Exemplo: inclusaobd(produtos, $dados);
// Insere $dados na tabela produtos

$totcampos = count($dados); // Conta quantos campos sero inseridos

$pos = array_keys($dados); // Guarda os nomes dos campos

$ind = 0;

$sql = INSERT INTO $tabela (; // Incio da construo da funo

// Inserir os nomes dos campos no sql enquanto houver campos

while ($ind <= ($totcampos - 1))

{

$sql .= $pos[$ind]., ;

$ind++;
}

// Retira a vrgula e o espao que sobram aps a insero dos nomes de campo

$sql = substr($sql, 0, -2);

$sql .= ) VALUES (;

$ind = 0;

//Inserir os valores nos campos enquanto houver campos

while ($ind <= ($totcampos - 1 ))

{

$sql .= .$dados[$pos[$ind]]., ;

$ind++;
}

// Retira a vrgula e o espao no final


$sql .= );

//Ativa a funo

$res = mysql_query($sql) or die (ERRO SQL: .mysql_error());

//Retorna o resultado

if ($res){

return true;
}

else{

return false;
}
}
function atualizacaobd($tabela, $dados, $where){
// Atualiza dados no banco de dados
/*
** tabela = tabela onde os dados sero atualizados
PROGRAMAO WEB
111
** dados = dados a serem atualizados na tabela

** where = controla qual cadastro ser atualizado
**
** Os dados devem vir no seguinte formato: $dados[nome_do_campo] = valor_do_campo
** O WHERE deve vir no seguinte formato: cod = $cod
**/
// Exemplo: atualizacaobd(produto, $dados, codigo = $codigo);
// Atualiza o cadastro da tabela produto com os $dados, onde o codigo igual varivel
$codigo

$totcampos = count($dados); // Conta quantos campos sero atualizados

$pos = array_keys($dados); // Guarda os nomes dos campos

$ind = 0;

$sql = UPDATE $tabela SET ; // Incio da construo da funo

// Insere os nomes de campo e os valores enquanto houver campos

while ($ind <= ($totcampos - 1))

{

$sql .= $pos[$ind]. = ..$dados[$pos[$ind]]., ;

$ind++;
}

// Retira a vrgula e o espao que sobram aps a insero dos nomes de campo


$sql .= WHERE $where;

//Ativa a funo

$res = mysql_query($sql) or die (ERRO SQL: .mysql_error());


if ($res){

return true;
}

else{

return false;
}
}
function exclusaobd($tabela, $condicao){
// Exclui dados no banco de dados

$res = mysql_query(DELETE FROM $tabela WHERE $condicao);


if ($res){

return true;
}

else{

return false;
}
}
?>
Salve o arquivo com o nome de funcoesbd.php na pasta funcoesbd.

Agora sim pode dar sequncia transao de incluso de dados, para
isso abra um novo documento no seu editor de programas e escreva o
seguinte script:
<html>
<head>
<title></title>
</head>
<body>


INFORMATIVO ONLINE




<div id=meio1>
<?php
include ../../../includes/mensagens.php; /*inclui este arquivo para acessar as mensagens*/
include ../../../funcoesbd/funcoesbd.php; /*incluir este arquivo para acessar a funo
para incluso de dados*/
include ../../../includes/conexao.php; /*inclui este arquivo para fazer a conexo com o
banco de dados*/

$username_usu=$_POST[txtlogin]; /*captura o nome do usurio informado no
cadastro*/
/* abaixo temos um comando select que efetua a consulta na tabela usuarios a fim de localizar o usurio que est sendo cadastrado momento, em uma situao seguinte, isto objetiva
saber se o novo usurio que est sendo cadastrado, j existe. */
$sql = mysql_query(SELECT username FROM usuarios WHERE username=$username_
usu)or die(mysql_error());
//captura o resultado da consulta e armazena na varivel array $dados
$dados=mysql_fetch_array($sql);
//captura o valor do campo usurio encontrado e armazena em $user_bd
$user_bd=$dados[username];
//verifica se o contedo de $user_bd igual ao nome de usurio informado pelo operador
if ($user_bd == $username_usu)
{
$mens=menlog(5); //Usurio j existe
}else{
/* Caso trate-se de um novo usurio, captura o valor dos campos digitados no formulrio e
armazena em um vetor (array) $campos para que em um passo seguinte sejam enviados a
funo que ir incluir estes dados na tabela de usurios. */

$campos=array

(

username
=> $_POST[txtlogin],

senha
=> md5($_POST[txtsenha]),

nome
=> $_POST[txtnomcomp],

nivel => $_POST[selnivel]

);

/*Armazena na varivel $sucesso o resultado da incluso dos dados */

PROGRAMAO WEB
113

$sucesso=inclusaobd(usuarios,$campos);

if($sucesso)

{ //Se incluso efetuada com sucesso?

$mens=menlog(3); //Cadastro efetuado com sucesso

}else{ //Se incluso no efetuada com sucesso ?

$mens=menlog(4); //Erro no cadastro. Tente novamente!

}

}


echo <center>;
echo <table>;
echo <tr>;
echo </tr>;
echo </table>;
?>
</div>
<div id=divisoria>
<a href = javascript:history.back()>Retornar</a>
</div>
</div>
</body>
</html>

val_cad_usuario.php na pasta
programas/cadastros/cadusuario.
A partir deste programa voc j
pode inserir os usurios via cadastro como mostra a figura a seguir:
Figura 35: Incluso de usurio
A prxima transao a da excluso, aqui uma novidade, voc escrever

a seguir um script em Javascrit para enviar uma caixa de dilogo confirmando ou a excluso do usurio, para isto deve fazer o seguinte, abra um
novo documento no seu editor de programas e escreva o seguinte script:
function confirma(cad){

var

ask = confirm(Confirma excluso do usurio : + cad + ?);

if (ask){

return true;

}else{

return false;
}
}
Salve o arquivo com o nome de funes.js na pasta funcoesjs, este

arquivo javascript puro, tanto que o salvou com a extenso js, de javascript.
Estando o script OK, assim que clicar na opo de excluir no cadastro
de usurio aparecer uma caixa de dilogo pedindo confirmao, confira
na figura a seguir:
Figura 36: Excluso de usurio
Concluindo o processo de excluso abra um novo documento no seu

editor de programas e escreva o seguinte script:
<html>
<head>
<title>::INFORMATIVO ONLINE - EXLUI USURIO::</
title>
<link href=../../../css/layout.
css rel=stylesheet />
</head>
<body>
<?php

include ../../../
includes/mensagens.php;
/*inclui este arquivo para
acessar as mensagens*/
include ../../../funcoesbd/
funcoesbd.php; /*incluir
este arquivo para acessar
a funo para incluso de
dados*/
include ../../../includes/
conexao.php; /*inclui este
arquivo para fazer a conexo
com o banco de dados*/
//MENSAGENS UTILIZADAS
$mens8=menlog(10);
$mens9=menlog(11);
?>
<div id=geral>
<div id=cabecalho>


INFORMATIVO ONLINE
</div>

<div id=divisoria>

</div>

<div id=meio1>
<?php

$id_usu=$_
GET[user];
$where=username=$id_
usu;
$sucesso=exclusaobd(
usuarios,$where);
if($sucesso)

{

$mensagem=menlog(8);
PROGRAMAO WEB
115
}else{
$mensagem=menlog(9);
}

echo <center>;
echo <table>;
echo <tr>;
echo <td>.$mensagem.</td>;
echo </tr>;
echo </table>;
?>
</div>
<div id=divisoria>
</div>
<div id=rodape>

<br />© Exemplo didtico de aplicao web - Todos os direitos reservados.
</div>
</div>
</body>
</html>
Salve o arquivo com o nome de val_del_usuario.php na pasta programas/cadastros/cadusuario.

O Resultado deste script a excluso de um usurio como mostra a figura
a seguir:
Figura 37: Confirmao da excluso de um usurio
A ltima transao a ser desenvolvida a alterao dos dados de um

usurio, abra um novo documento no seu editor de programas e escreva
o seguinte script:
<?php
include ../../../includes/conexao.php;
?>
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 />
<title>:: INFORMATIVO ON-LINE - REA RESTRITA</title>
</head>
<script language=javascript src=../../../funcoesjs/funcoes.js> </script>
<body>


INFORMATIVO ONLINE


<div id=divisoria>


</div>
<?php
$id_usu=$_GET[user];
$sql=mysql_query(SELECT * FROM usuarios WHERE username=$id_usu);
$dados=mysql_fetch_array($sql);
$user_usu=$dados[username];
$senha_usu=$dados[senha];
$nome_usu=$dados[nome];
$nivel_usu=$dados[nivel];
?>
<div id=meio1>
<form name=frmaltusuario method=post action=val_atu_usuario.php>
<input type=hidden name=txt_usuario value=<?php echo $id_usu;?>>
<div class=barra_opcoes> • ATUALIZAR CADASTRO DE USUÁRIO </div>
<br />
<center>
<tr>

<td width=200 class=alinha_dir>Nome de usuário:</td>

<td width=500 class=alinha_esq> <b><?php echo $id_usu;?></b> </td>
</tr>
<tr>

<td width=150 class=alinha_dir>Nome completo:</td>

<td width=750 class=alinha_esq> <input type=text size=43 maxlength=45 id=txt_nome_usu name=txt_nome_usu value=<?php echo $nome_usu;?>/></
td>
</tr>
<tr>

<td width=150 class=alinha_dir>Senha:</td>

<td width=750 class=alinha_esq> <input type=password size=9 maxlength=10 id=txt_senha_usu name=txt_senha_usu /></td>
</tr>
<tr>

<td width=150 class=alinha_dir>Nível de acesso:</td>

<td width=750 class=alinha_esq>

<?php

$esc_nivel[0]=Administrador;

$esc_nivel[1]=Operador;

$qtd_niveis=count($esc_nivel);
PROGRAMAO WEB
117

?>

<select name=sel_nivel_usu id=sel_nivel_usu>

<option value=>-- ESCOLHA --</option>

<?php

for($ind=0;$ind<=$qtd_niveis;$ind++){
if ($nivel_usu==$ind){
echo <option value=$nivel_usu selected=selected>$esc_nivel[$nivel_
usu]</option>;
}else{

echo <option value=$ind>$esc_nivel[$ind]</option>;

}

}

?>

</select>

</td>
</tr>
</table>
<br />
<tr>

<td width=50% class=alinha_cnt><input type=submit value=Atualizar/></td>

</tr>
</table>
</center>
</form>
</div>
<div id=divisoria>


</div>

<div id=rodape>

</body>
</html>

edi_usuario.php na pasta programas/cadastros/cadusuario.
Este script permite mostrar os dados, em um formulrio, de um
usurio que deseja fazer a alterao como mostra a figura a seguir:
Figura 38: Formulrio de atualizao do usurio
A partir desta pgina o usurio pode alterar os dados que desejar e ao

clicar no boto Atualizar o aplicativo direcionado para a pgina val_
atu_usuario para que a atualizao seja procedida, ento, para finalizar
este processo abra um novo documento no seu editor de programas e
<html>
<head>
<title></title>
</head>
<body>


INFORMATIVO ONLINE


<div id=divisoria>


</div>

<div id=meio1>
<?php

include ../../../includes/mensagens.php; /*inclui este arquivo para acessar as
mensagens*/
include ../../../funcoesbd/funcoesbd.php; /*incluir este arquivo para acessar a funo
para incluso de dados*/
include ../../../includes/conexao.php; /*inclui este arquivo para fazer a conexo com o
banco de dados*/
$usuario=$_POST[txt_usuario];
$procura=username = $usuario;
if ($_POST[txt_senha_usu]==)

{

$_SESSION[dados]=array

(

nome => $_POST[txt_nome_usu],

nivel => $_POST[sel_nivel_usu]

);
}else{

$_SESSION[dados]=array

(

senha
=> md5($_POST[txt_senha_usu]),

nome
=> $_POST[txt_nome_usu],

nivel
=> $_POST[sel_nivel_usu]

);
}
$sucesso=atualizacaobd(usuarios,$_SESSION[dados],$procura);
if($sucesso)

{

$mens=menlog(6);
}else{

$mens=menlog(7);
}
PROGRAMAO WEB
119

echo <center>;
echo <table>;
echo <tr>;
echo </tr>;
echo </table>;
?>
</div>
<div id=divisoria>
</div>
<div id=rodape>

</body>
</html>
Salve o arquivo com o nome de val_atu_usuario.php na pasta programas/cadastros/cadusuario .

O Resultado deste script a atualizao de um usurio como mostra a
figura a seguir:
Figura 39: Confirmao da atualizao de um usurio
Com este exemplo prtico, sua

aplicao deve estar, carregando
pginas do Tempo e de Esportes, dinamicamente, efetuando
autenticao de usurio com uso
de Sesses e na rea restrita incluindo, excluindo e alterando dados do banco de dados, alm de
destruir a sesso.
Mas a esta altura deve estar se
perguntando, muito bem, consegui desenvolver minha aplicao
e agora? Como fao para public-la?
Seo 3
Publicao do seu web site

Chegada a hora de publicar o seu site em um provedor, tambm chegada hora de tomar decises, primeiramente se vai hospedar seu web site
em um provedor gratuito ou pago?
Os provedores pagos oferecem mais recursos e suporte do que os provedores gratuitos, alm de serem mais seguros tambm.
Verifique junto aos responsveis pela empresa provedora, se tem suporte as linguagens e banco de dados que utilizou em seu web site.
Verifique tambm o espao que o provedor lhe oferece e faa uma investigao. Identifique se existe alguma limitao quanto ao trfego mensal
do seu site.
Feita a investigao, voc deve partir para a aquisio de um domnio,
.org, .com, .br, pelo perodo mnimo de um ano, por meio de pagamento
acordado com a empresa fornecedora do domnio. Normalmente voc
paga uma anuidade por este domnio, mas informe-se com o provedor
escolhido sobre a aquisio domnio.
Aps a escolha do provedor e aquisio do seu domnio seu site est
pronto para ser publicado.
Voc deve ter percebido que poderamos ter implementado mais coisas
na aplicao e tambm melhorado algumas outras coisas, mas isto ficar
a seu critrio. Se chegou at aqui pode perceber que desenvolver aplicaes para web bastante interessante, tem que agregar uma srie de
conhecimentos, tais como: funcionamento da Internet, servidores, web,
banco de dados, tecnologias para web, como HTML , CSS, Javascript,
PHP e outras que por ventura se faa necessrias.
Voc recebeu informaes fundamentais para iniciar sua caminhada
rumo ao desenvolvimento de aplicaes web, cabe a voc, desenvolver-se
cada vez mais a partir de um estudo mais aprofundado.
Outras tecnologias tem se mostrado muito interessantes como: JQuery,
Ajax, XHTML, XML e assim por diante, mas no adianta estud-las se
no conhece a base da programao web. Discuta com colegas e professor o assunto, realize as atividades propostas, assim voc poder ampliar
sua prtica sobre o contedo desta unidade estudada.
PROGRAMAO WEB
121
Finalizando
Esta unidade curricular proporcionou conhecimentos para que voc seja capaz de desenvolver aplicaes web de nvel intermedirio e tambm de desenvolver-se bem na investigao e utilizao de
novas tecnologias que agreguem ao seu desenvolvimento profissional.
Em desenvolvimento de aplicaes web fundamental conhecer o ambiente de desenvolvimento
que trabalhar, as tecnologias de software que permitam o desenvolvimento, em nvel intermedirio,
de aplicaes para web. Isto justifica a estrutura dos assuntos abordados, primeiramente houve a
preocupao em oferecer a voc subsdios tericos para que preparasse o ambiente onde estaria
desenvolvendo e executando suas aplicaes.
Conhecendo sobre o ambiente, seus elementos e como instalar j foi possvel iniciar o conhecimento sobre as tecnologias de software que precisaria para implementar suas aplicaes. Foi que ocorreu,
iniciou-se o trabalho a partir do conhecimento da linguagem HTML, onde procurou-se focar nos
recursos principais e fundamentais para o desenvolvimento de web sites e/ou aplicaes web.
Estudando HTML a base da Internet, partiu-se para o estudo da CSS, que como voc acompanhou, auxilia a HTML estilizando seus componentes, podendo esta ser trabalhada de vrias formas,
adequando as suas necessidades.
Voc teve a oportunidade em conhecer uma linguagem de programao dinmica, optou-e pela
PHP. Neste contexto o foco foi os fundamentos da linguagem, chegando a um nvel intermedirio
no trabalhando em nveis avanados, mas possibilitando que o faa, desde que compreendido os
assuntos e desenvolvido os exemplos e atividades propostas.
Estudar programao requer muita dedicao, foco, prtica e perseverana, caso no tenha compreendido alguns dos conhecimentos repassados procure auxlio, mas no permanea com a dvida.
Procure tambm evoluir, aqui foi apenas um incio de um processo, fundamental, lgico, mas a
primeira caminhada para sua evoluo como desenvolvedor web profissional.
PROGRAMAO WEB
123
Referncias
MELLO, Alexandre; NASCIMENTO, Maurcio. PHP Profissional. 1. ed. So Paulo, SP:

Novatec, 2007.
MUTO, Claudio. PHP & MYSQL Guia Introdutrio. 3.ed.Rio de Janeiro, RJ: BRASPORT, 2006.
SOARES, Walace. PHP 5 Conceitos, Programao e Integrao com Banco de Dados. 2.

ed. So Paulo, SP: rica, 2006.
PROGRAMAO WEB
125
Equipe de Desenvolvimento de Recursos Didticos

Coordenao de Educao a Distncia
Beth Schirmer
Coordenao Projetos EaD
Maristela de Lourdes Alves
Coordenao de Desenvolvimento de Recursos
Didticos
Gisele Umbelino
Projeto Educacional
Angela Maria Mendes
Israel Braglia
Projeto Grfico
Daniela de Oliveira Costa
Jordana Paula Schulka
Juliana Vieira de Lima
Design Educacional
Rozangela Aparecida Valle
Capa, Ilustraes, Tratamento de Imagens
Dimitre Camargo Martins
Diego Fernandes
Luiz Eduardo Meneghel
Diagramao
Reviso e Fechamento de Arquivos
Daniela de Oliveira Costa
Reviso Ortogrfica e Normatizao
SENAI/SC em Jaragu do Sul
PROGRAMAO WEB
127

Programação - Web - Modulo I

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Programação - Web - Modulo I

Uploaded by

Copyright:

Available Formats

Curso Tcnico em Informtica

Robson Braga de Andrade

Regina Maria de Ftima Torres

Srgio Roberto Arruda

Antnio Jos Carradore

Marco Antnio Dociatti

Confederao Nacional da Indstria

Curso Tcnico em Informtica

SENAI/SC Servio Nacional de Aprendizagem Industrial

Seo 2 - Ambiente de desenvolvimento web

Seo 3 - Instalao do ambiente de desenvolvimento

Seo 1 - Abordagem inicial

Seo 2 - Script HTML

Seo 3 - Script CSS

121 Seo 3 - Publicao do seu

CURSOS TCNICOS SENAI

Silvio Luis de Sousa

Quer Programar para

Tecnologias de desenvolvimento para web

Ambiente de desenvolvimento web

Sistema operacional Win-

dows ou Linux como voc

Servidor web Apache

trata-se de um software que recria

CURSOS TCNICOS SENAI

Navegador web software

PHP - linguagem de programao dinmica, baseada em

Figura 1: Estrutura bsica de um ambiente web

que permite o acesso as pginas

que no HTML ou figura como, por exemplo, PHP, esta desviada

Lado cliente/Lado servidor

Continuando Melo e Nascimento (2007, p. 43) definem o seguinte sobre

No ambiente web as linguagens de programao como: HTML, CSS,

Figura 2: Composio lado cliente e servidor

Melo e Nascimento (2007, p. 43) ainda reforam que Em linhas gerais

Instalao do ambiente de desenvolvimento web

CURSOS TCNICOS SENAI

Voc pode instalar um ambiente

As duas formas so interessantes

Ainda fazem uma analogia com o

E sobre as desvantagens desse mtodo Melo e Nascimento

Existem vrios pacotes de softwares bons e gratuitos na internet,

EasyPHP disponvel para

Seu site oficial <http://easy

Vertrigo disponvel para a

Seu site oficial <http://vertrigo.sourceforge.net>

XAMPP ao contrrio dos

Seu site oficial <http://apachefriends.org/en/xampp.

No caso da instalao manual

servidor Apache, encontrado

servidor MySQL, encontrado

Tem tudo a ver, pois para cada

Figura 3: Estrutura da pasta VertrigoServ do pacote Vertrigo

CURSOS TCNICOS SENAI

Vale conhecer o contedo de algumas das pastas encontradas

Apache nesta pasta voc

ATENO! Evite modificar o

Mysql aqui voc encontra

outras pastas contendo os arquivos de programas do servidor de

ATENO! Evite modificar o

Php nesta pasta voc tem

acesso a outras pastas contendo

ATENO! Evite modificar o