Você está na página 1de 464

linguagens_de_programacao_III.

pdf

02/02/11

16:53

Universidade do Sul de Santa Catarina

Linguagens de Programao III


Disciplina na modalidade a distncia

Palhoa
UnisulVirtual
2011

linguagem_de_programacao_III.indb 1

04/02/11 11:14

Crditos
Universidade do Sul de Santa Catarina Campus UnisulVirtual Educao Superior a Distncia

Avenida dos Lagos, 41 Cidade Universitria Pedra Branca | Palhoa SC | 88137-900 | Fone/fax: (48) 3279-1242 e 3279-1271 | E-mail: cursovirtual@unisul.br | Site: www.unisul.br/unisulvirtual

Reitor Unisul
Ailton Nazareno Soares
Vice-Reitor
Sebastio Salsio Heerdt
Chefe de Gabinete da
Reitoria
Willian Mximo
Pr-Reitora Acadmica
Miriam de Ftima Bora Rosa
Pr-Reitor de Administrao
Fabian Martins de Castro
Pr-Reitor de Ensino
Mauri Luiz Heerdt
Campus Universitrio de
Tubaro
Diretora
Milene Pacheco Kindermann
Campus Universitrio da
Grande Florianpolis
Diretor
Hrcules Nunes de Arajo
Campus Universitrio
UnisulVirtual
Diretora
Jucimara Roesler
Equipe UnisulVirtual
Diretora Adjunta
Patrcia Alberton

Secretaria Executiva e Cerimonial


Jackson Schuelter Wiggers (Coord.)
Marcelo Fraiberg Machado
Tenille Catarina
Vanessa Guimaraes Franceschi
Assessoria de Assuntos
Internacionais
Murilo Matos Mendona
Assessoria DAD - Disciplinas a
Distncia
Patrcia da Silva Meneghel (Coord.)
Carlos Alberto Areias
Franciele Arruda Rampelotti
Luiz Fernando Meneghel
Assessoria de Inovao e
Qualidade da EaD
Dnia Falco de Bittencourt (Coord.)
Rafael Bavaresco Bongiolo
Assessoria de Relao com Poder
Pblico e Foras Armadas
Adenir Siqueira Viana
Assessoria de Tecnologia
Osmar de Oliveira Braz Jnior (Coord.)
Felipe Jacson de Freitas
Jeerson Amorin Oliveira
Jos Olmpio Schmidt
Marcelo Neri da Silva
Phelipe Luiz Winter da Silva

linguagem_de_programacao_III.indb 2

Priscila da Silva
Rodrigo Battistotti Pimpo

Coordenao dos Cursos


Assistente das Coordenaes
Maria de Ftima Martins
Auxiliares das coordenaes
Fabiana Lange Patricio
Tnia Regina Goularte Waltemann
Coordenadores Graduao
Adriana Santos Ramm
Adriano Srgio da Cunha
Alosio Jos Rodrigues
Ana Luisa Mlbert
Ana Paula R. Pacheco
Artur Beck Neto
Bernardino Jos da Silva
Carmen Maria C. Pandini
Catia Melissa S. Rodrigues
Charles Cesconetto
Diva Marlia Flemming
Eduardo Aquino Hbler
Eliza B. D. Locks
Fabiano Ceretta
Horcio Dutra Mello
Itamar Pedro Bevilaqua
Jairo Afonso Henkes
Janana Baeta Neves
Jardel Mendes Vieira
Joel Irineu Lohn
Jorge Alexandre N. Cardoso
Jos Carlos N. Oliveira
Jos Gabriel da Silva
Jos Humberto D. Toledo
Joseane Borges de Miranda
Luciana Manfroi
Luiz Guilherme B. Figueiredo
Marciel Evangelista Catneo
Maria Cristina Veit
Maria da Graa Poyer
Mauro Faccioni Filho
Moacir Fogaa
Nlio Herzmann
Onei Tadeu Dutra
Patrcia Fontanella
Raulino Jac Brning
Roberto Iunskovski
Rodrigo Nunes Lunardelli
Rogrio Santos da Costa
Rosa Beatriz M. Pinheiro
Rose Clr Beche
Srgio Sell
Tatiana Lee Marques
Thiago Coelho Soares
Valnei Campos Denardin
Victor Henrique Moreira Ferreira
Coordenadores Ps-Graduao
Aloisio Rodrigues
Anelise Leal Vieira Cubas
Bernardino Jos da Silva
Carmen Maria Cipriani Pandini
Daniela Ernani Monteiro Will
Giovani de Paula
Karla Leonora Nunes
Luiz Otvio Botelho Lento
Thiago Coelho Soares
Vera Regina N. Schuhmacher
Gerncia Administrao
Acadmica
Angelita Maral Flores (Gerente)
Fernanda Farias
Gesto Documental
Lamuni Souza (Coord.)
Clair Maria Cardoso
Janaina Stuart da Costa
Josiane Leal
Marlia Locks Fernandes
Ricardo Mello Platt

Secretaria de Ensino a Distncia


Karine Augusta Zanoni

(Secretria de Ensino)

Giane dos Passos

(Secretria Acadmica)

Alessandro Alves da Silva


Andra Luci Mandira
Cristina Mara Shauert
Djeime Sammer Bortolotti
Douglas Silveira
Fabiano Silva Michels
Felipe Wronski Henrique
Janaina Conceio
Jean Martins
Luana Borges da Silva
Luana Tarsila Hellmann
Maria Jos Rossetti
Miguel Rodrigues da Silveira Junior
Monique Tayse da Silva
Patricia A. Pereira de Carvalho
Patricia Nunes Martins
Paulo Lisboa Cordeiro
Rafaela Fusieger
Rosngela Mara Siegel
Silvana Henrique Silva
Vanilda Liordina Heerdt

Gerncia Administrativa e
Financeira
Renato Andr Luz (Gerente)
Naiara Jeremias da Rocha
Valmir Vencio Incio
Financeiro Acadmico
Marlene Schauer
Rafael Back
Vilmar Isaurino Vidal

Gerncia de Ensino, Pesquisa


e Extenso
Moacir Heerdt (Gerente)
Aracelli Araldi

Elaborao de Projeto e
Reconhecimento de Curso
Diane Dal Mago
Vanderlei Brasil
Extenso
Maria Cristina Veit (Coord.)
Pesquisa
Daniela E. M. Will

(Coord. PUIP, PUIC, PIBIC)

Mauro Faccioni Filho


(Coord. Nuvem)

Ps-Graduao
Clarissa Carneiro Mussi (Coord.)
Biblioteca
Soraya Arruda Waltrick (Coord.)
Paula Sanhudo da Silva
Renan Felipe Cascaes
Rodrigo Martins da Silva

Ednia Araujo Alberto


Francine Cardoso da Silva
Karla F. Wisniewski Desengrini
Maria Eugnia Ferreira Celeghin
Maria Lina Moratelli Prado
Mayara de Oliveira Bastos
Patrcia de Souza Amorim
Poliana Morgana Simo
Priscila Machado

Gerncia de Desenho
e Desenvolvimento de
Materiais Didticos
Mrcia Loch (Gerente)

Acessibilidade
Vanessa de Andrade Manoel (Coord.)
Bruna de Souza Rachadel
Letcia Regiane Da Silva Tobal
Avaliao da aprendizagem
Lis Air Fogolari (coord.)
Gabriella Arajo Souza Esteves
Desenho Educacional
Carmen Maria Cipriani Pandini
(Coord. Ps)

Carolina Hoeller da S. Boeing


(Coord. Ext/DAD)

Silvana Souza da Cruz (Coord. Grad.)


Ana Cludia Ta
Carmelita Schulze
Cristina Klipp de Oliveira
Eloisa Machado Seemann
Flvia Lumi Matuzawa
Geovania Japiassu Martins
Jaqueline Cardozo Polla
Lygia Pereira
Luiz Henrique Milani Queriquelli
Marina Cabeda Egger Moellwald
Marina Melhado Gomes da Silva
Melina de la Barrera Ayres
Michele Antunes Correa
Ngila Cristina Hinckel
Pmella Rocha Flores da Silva
Rafael Arajo Saldanha
Roberta de Ftima Martins
Sabrina Paula Soares Scaranto
Viviane Bastos

Gerncia de Logstica

Jeferson Cassiano A. da Costa


(Gerente)

Andrei Rodrigues
Logstica de Encontros Presenciais
Graciele Marins Lindenmayr (Coord.)
Ana Paula de Andrade
Cristilaine Santana Medeiros
Daiana Cristina Bortolotti
Edesio Medeiros Martins Filho
Fabiana Pereira
Fernando Oliveira Santos
Fernando Steimbach
Marcelo Jair Ramos

Capacitao e Assessoria ao
Docente
Enzo de Oliveira Moreira (Coord.)
Adriana Silveira
Alexandre Wagner da Rocha
Cludia Behr Valente
Elaine Cristiane Surian
Juliana Cardoso Esmeraldino
Simone Perroni da Silva Zigunovas

Logstica de Materiais
Carlos Eduardo D. da Silva (Coord.)
Abrao do Nascimento Germano
Fylippy Margino dos Santos
Guilherme Lentz
Pablo Farela da Silveira
Rubens Amorim

Monitoria e Suporte
Enzo de Oliveira Moreira (Coord.)
Anderson da Silveira
Anglica Cristina Gollo
Bruno Augusto Zunino
Claudia Noemi Nascimento
Dbora Cristina Silveira

Fabiano Ceretta (Gerente)


Alex Fabiano Wehrle
Mrcia Luz de Oliveira
Sheyla Fabiana Batista Guerrer
Victor Henrique M. Ferreira (frica)

Relacionamento com o Mercado


Eliza Bianchini Dallanhol Locks
Walter Flix Cardoso Jnior

Gerncia de Produo

Arthur Emmanuel F. Silveira (Gerente)


Francini Ferreira Dias
Design Visual
Pedro Paulo Alves Teixeira (Coord.)
Adriana Ferreira dos Santos
Alex Sandro Xavier
Alice Demaria Silva
Anne Cristyne Pereira
Diogo Rafael da Silva
Edison Rodrigo Valim
Frederico Trilha
Higor Ghisi Luciano
Jordana Paula Schulka
Nelson Rosa
Patrcia Fragnani de Morais
Multimdia
Srgio Giron (Coord.)
Cristiano Neri Gonalves Ribeiro
Dandara Lemos Reynaldo
Fernando Gustav Soares Lima
Srgio Freitas Flores
Portal
Rafael Pessi (Coord.)
Luiz Felipe Buchmann Figueiredo
Comunicao
Marcelo Barcelos
Andreia Drewes
e-OLA
Carla Fabiana F. Raimundo (Coord.)
Vinicius Ritta de Moura
Produo Industrial
Francisco Asp (Coord.)
Ana Paula Pereira
Marcelo Bittencourt

Gerncia Servio de Ateno


Integral ao Acadmico
James Marcel Silva Ribeiro (Gerente)
Atendimento
Maria Isabel Aragon (Coord.)
Andiara Clara Ferreira
Andr Luiz Portes
Bruno Ataide Martins
Holdrin Milet Brandao
Jennier Camargo
Maurcio dos Santos Augusto
Maycon de Sousa Candido
Sabrina Mari Kawano Gonalves
Vanessa Trindade
Orivaldo Carli da Silva Junior
Estgio
Jonatas Collao de Souza (Coord.)
Juliana Cardoso da Silva
Micheli Maria Lino de Medeiros
Priscilla Geovana Pagani
Prouni
Tatiane Crestani Trentin (Coord.)
Gisele Terezinha Cardoso Ferreira
Scheila Cristina Martins
Taize Muller

Gerncia de Marketing

04/02/11 11:14

Edson Orivaldo Lessa Junior

Linguagens de Programao III


Livro didtico

Design instrucional
Flavia Lumi Matuzawa

Palhoa
UnisulVirtual
2011

linguagem_de_programacao_III.indb 3

04/02/11 11:14

Copyright UnisulVirtual 2011


Nenhuma parte desta publicao pode ser reproduzida por qualquer meio sem a prvia autorizao desta instituio.

Edio Livro Didtico


Professor Conteudista
Edson Orivaldo Lessa Junior
Design Instrucional
Flavia Lumi Matuzawa
Projeto Grfico e Capa
Equipe UnisulVirtual
Diagramao
Anne Cristyne Pereira
Daiana Ferreira
Reviso
Letra de Forma

741.6
L63

Lessa Junior, Edson Orivaldo


Linguagens de programao III : livro didtico / Edson Orivaldo Lessa
Junior ; design instrucional Flavia Lumi Matuzawa. Palhoa :
UnisulVirtual, 2011.
462 p. : il. ; 28 cm.

Inclui bibliografia.

1. Desenho grfico. 2. Artes grficas. 3. Desenho comercial. I. Matuzawa,


Flavia Lumi. II. Ttulo.

Ficha catalogrfica elaborada pela Biblioteca Universitria da Unisul

linguagem_de_programacao_III.indb 4

04/02/11 11:14

Sumrio
Apresentao. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Palavras do professor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
Plano de estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
UNIDADE 1 - Aspectos do desenvolvimento de aplicaes Web. . . . . . . . . 17
UNIDADE 2 - JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
UNIDADE 3 - PHP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
UNIDADE 4 - Sistemas Web com banco de dados (PHP + MYSQL). . . . . . 203
UNIDADE 5 - Extensible Markup Language (XML). . . . . . . . . . . . . . . . . . . . . . 291
UNIDADE 6 - Asynchronous Javascript and XML (AJAX). . . . . . . . . . . . . . . . 347
Para concluir o estudo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
Referncias. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
Sobre o professor conteudista. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Respostas e comentrios das
atividades de autoavaliao. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401
Biblioteca Virtual. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461

linguagem_de_programacao_III.indb 5

04/02/11 11:14

linguagem_de_programacao_III.indb 6

04/02/11 11:14

Apresentao
Este livro didtico corresponde disciplina Linguagens de
Programao III.
O material foi elaborado visando a uma aprendizagem
autnoma e aborda contedos especialmente selecionados e
relacionados sua rea de formao. Ao adotar uma linguagem
didtica e dialgica, objetivamos facilitar seu estudo a
distncia, proporcionando condies favorveis s mltiplas
interaes e a um aprendizado contextualizado e eficaz.
Lembre-se que sua caminhada, nesta disciplina, ser
acompanhada e monitorada constantemente pelo Sistema
Tutorial da UnisulVirtual, por isso a distncia fica
caracterizada somente na modalidade de ensino que voc
optou para sua formao, pois, na relao de aprendizagem,
professores e instituio estaro sempre conectados com voc.
Ento, sempre que sentir necessidade, entre em contato,
pois voc tem disposio diversas ferramentas e canais de
acesso, como: telefone, e-mail e o Espao Unisul Virtual
de Aprendizagem, que o canal mais recomendado,
pois tudo o que for enviado e recebido fica registrado
para seu maior controle e sua comodidade. Nossa equipe
tcnica e pedaggica ter o maior prazer em atend-lo,
pois sua aprendizagem o nosso principal objetivo.

Bom estudo e sucesso!


Equipe UnisulVirtual.

linguagem_de_programacao_III.indb 7

04/02/11 11:14

linguagem_de_programacao_III.indb 8

04/02/11 11:14

Palavras do professor
Caro desbravador do conhecimento,
O mundo tecnolgico imenso permanecendo em constante
expanso e evoluo. Por essa razo, o conhecimento e as
tcnicas de desenvolvimento de software seguem essa linha.
Linguagens nascem, envelhecem, algumas morrem outras
reestruturam-se e com novas tcnicas so reutilizadas. Assim
o aprendizado se torna constante, de tal forma que fora
o desenvolvedor a sempre procurar atualizar-se. A tcnica
permanece, mas a forma de escrita se altera.
A linguagem de programao nada mais que um dialeto
para que a mquina possa entender quais so as ordens que
ns damos. Assim como na vida real, uma ma uma ma
em qualquer lngua falada pelos homens. A programao no
diferente, j que uma varivel sempre ser uma varivel. A
forma de escrever o comando pode e deve se alterar, mas o
conceito o mesmo.
O desenvolvimento Web possui uma caracterstica
maravilhosa que nos leva sempre a utilizar diversas tcnicas e
linguagens para alcanar o melhor resultado. Nesta disciplina,
voc ver a ponta do iceberg. Voc ser tentado a desbravar
esse universo da programao Web. Desvendar seus segredos
submersos ser algo inesquecvel e onde voc poder construir
uma slida carreira em tecnologia.
Bom estudo!
Professor Edson O. Lessa Jr.

linguagem_de_programacao_III.indb 9

04/02/11 11:14

linguagem_de_programacao_III.indb 10

04/02/11 11:14

Plano de estudo
O plano de estudos visa a orient-lo no desenvolvimento da
disciplina. Ele possui elementos que o ajudaro a conhecer o
contexto da disciplina e a organizar o seu tempo de estudos.
O processo de ensino e aprendizagem na UnisulVirtual leva
em conta instrumentos que se articulam e se complementam,
portanto, a construo de competncias se d sobre a
articulao de metodologias e por meio das diversas formas de
ao/mediao.
So elementos desse processo:

O livro didtico.

O Espao UnisulVirtual de Aprendizagem (EVA).

As atividades de avaliao (a distncia, presenciais e


de autoavaliao).
O Sistema Tutorial.

Ementa
Pginas dinmicas. Conceitos de pginas do lado servidor e
cliente. Recursos do Active Server Page (ASP). Comandos
bsicos SQL. Introduo a PHP. Configurao de servidores
Web. Enquetes, frum, mecanismo de busca. Filtro e
totalizao de dados. Formulrios. Desenvolvimento de
aplicaes. Implementao de sites dinmicos e seus respectivos
testes, avaliao e manuteno.

linguagem_de_programacao_III.indb 11

04/02/11 11:14

Universidade do Sul de Santa Catarina

Objetivos
Geral:
O desenvolvimento para Web requer uma ampla gama de
conhecimentos em ferramentas necessrias para aperfeioar o
resultado. Assim, podemos estudar tcnicas de desenvolvimento
para Web utilizando diversas ferramentas para alcanar o melhor
resultado possvel.

Especficos:

Identificar e caracterizar as aplicaes Web sob a viso


do desenvolvedor e do usurio.
Distinguir o uso de linguagens Client-side e Server-side.
Compreender a dinmica do uso de banco de dados nas
aplicaes Web.
Identificar os recursos das linguagens de marcao para
transporte e armazenamento de informaes.
Integrar tecnologias a fim de montar uma soluo
computacional voltada Web.

Carga Horria
A carga horria total da disciplina 120 horas/aula.

Contedo programtico/objetivos
Veja, a seguir, as unidades que compem o livro didtico desta
disciplina e os seus respectivos objetivos. Estes se referem aos
resultados que voc dever alcanar ao final de uma etapa de
estudo. Os objetivos de cada unidade definem o conjunto de
12

linguagem_de_programacao_III.indb 12

04/02/11 11:14

Linguagens de Programao III

conhecimentos que voc dever possuir para o desenvolvimento


de habilidades e competncias necessrias sua formao.
Unidades de estudo: 6

Unidade 1 - Aspectos do desenvolvimento de aplicaes Web 20h/a


A primeira unidade voc poder identificar as sutilizas que
existem por traz de um desenvolvimento Web. Esta unidade
contm as definies necessrias para identificar as principais
caractersticas de cada forma de programar, assim como
reconhecer as principais vantagens de se desenvolver em
plataforma Web.

Unidade 2 - Javascript 20h/a


O JavaScript hoje se torna essencial para o desenvolvimento Web.
Esta linguagem tem como o seu principal uso em validaes
rpidas e mscaras de campos. A linguagem JavaScript pode
ainda ser usada como um recurso de melhoramento visual.
Assim voc poder ser capaz de iniciar sua utilizao no universo
extenso desta linguagem.

Unidade 3 - PHP 20h/a


Nesta unidade voc conhecer o fantstico mundo do
PHP. Conhecer como utiliz-la de forma a aumentar a
sua aplicabilidade. Saber algumas bibliotecas ou APIs que
possibilitam uma programao mais eficiente.

Unidade 4 - Sistemas Web com banco de dados (PHP + MYSQL) 20h/a


Nesta unidade voc aprender como trabalhar em conjunto com a
linguagem e um banco de dados. Desenvolver uma aplicao em
que utilizar vrios nveis do desenvolvimento Web. Perceber
como a escolha correta das linguagens a serem desenvolvidas com

13

linguagem_de_programacao_III.indb 13

04/02/11 11:14

Universidade do Sul de Santa Catarina

o banco de dados faz diferena na eficincia e na velocidade de


desenvolvimento de uma aplicao.

Unidade 5 - Extensible Markup Language (XML) 20h/a


No XML voc ser capaz de identificar as caractersticas que
levaram esta linguagem a se tornar base de diversas tecnologias.
Voc conhecer as principais aplicabilidades e os detalhes mais
relevantes do Extensible Markup Language (XML).

Unidade 6 - Asynchronous Javascript and XML (AJAX) 20h/a


Na Unidade 6 voc condensar todas as unidades anteriores
em uma nica soluo. Identificar como o uso em conjunto
de diversas linguagens podem resultar em um ganho de
performance. Voc compreender o conceito do AJAX, seus
benefcios e suas limitaes. Assim, identificar quando ela
mais aconselhvel em seu uso.

14

linguagem_de_programacao_III.indb 14

04/02/11 11:14

Linguagens de Programao III

Agenda de atividades/ Cronograma

Verifique com ateno o EVA, organize-se para acessar


periodicamente a sala da disciplina. O sucesso nos seus
estudos depende da priorizao do tempo para a leitura, da
realizao de anlises e snteses do contedo e da interao
com os seus colegas e tutor.
No perca os prazos das atividades. Registre no espao
a seguir as datas com base no cronograma da disciplina
disponibilizado no EVA.
Use o quadro para agendar e programar as atividades relativas
ao desenvolvimento da disciplina.

Atividades obrigatrias

Demais atividades (registro pessoal)

15

linguagem_de_programacao_III.indb 15

04/02/11 11:14

linguagem_de_programacao_III.indb 16

04/02/11 11:14

unidade 1

Aspectos do desenvolvimento
de aplicaes Web
Objetivos de aprendizagem
Ao final do estudo desta unidade, importante que voc:

Identifique as principais caractersticas do


desenvolvimento Web.

Conhea os mtodos de comunicao entre as


linguagens.

Conhea as principais tecnologias disponveis.

Sees de estudo

linguagem_de_programacao_III.indb 17

Seo 1

O ambiente

Seo 2

Conceitos envolvidos no desenvolvimento


de aplicaes Web

Seo 3

Caractersticas

Seo 4

Integrao de linguagens

Seo 5

Tecnologias

04/02/11 11:14

Universidade do Sul de Santa Catarina

Para incio de estudo


Ao navegar um pouco na Web, voc pode identificar as
vantagens do desenvolvimento nesta tecnologia e perceber
como as atualizaes dos sistemas so rpidas e amplamente
difundidas. Devido a essa velocidade, de se esperar uma
reduo significativa de custos das verses comparada com as
aplicaes desktops. Alm da reduo de custo, a Web no exige
de um usurio uma determinada configurao de mquina para
que possa us-la.
Uma aplicao Web possui compatibilidade comprovada com
diversos sistemas operacionais disponveis no mercado visto
que a aplicao no executada pelo seu equipamento, mas
interpretada por um navegador. Essa facilidade a difere das
aplicaes desktops, pois estas necessitam de verses diferentes
para cada sistema operacional.
Voc ver como funciona a interpretao das regras de negcio e
das validaes dos campos e estudar os nveis de comunicao
entre os mtodos.
Esses conceitos so extremamente importantes, mas vale lembrar
que as linguagem desktop no so o alvo do presente estudo.
Esses conceitos so de grande auxlio para sempre buscar a
melhor soluo para cada tipo de necessidade dos clientes.
Assim voc ter um conhecimento mais refinado para poder
optar em determinada linguagem e ou que tipo de tecnologia de
desenvolvimento (Web ou desktop) ter um melhor resultado.
Embora no seja o alvo desta unidade, conhecer as linguagens
desktop de grande auxilio para a busca da melhor soluo,
de acordo com a demanda dos clientes. Conhecer linguagens
lhe dar mais subsdios para optar pela tecnologia de
desenvolvimento (web ou desktop) mais adequada para
proporcionar o melhor resultado para a situao em questo.

18

linguagem_de_programacao_III.indb 18

04/02/11 11:14

Linguagens de Programao III

Seo 1 O ambiente
Todo o desenvolvimento Web realizado no ambiente da
internet, inclusive as aplicaes que so construdas para
serem utilizadas em redes privadas. Todas so regidas sobre as
vantagens e desvantagens que a internet proporciona.
A internet, nada mais que um grande conjunto de redes de
computadores interligadas pelo mundo inteiro, basicamente,
um conjunto de documentos. Ela foi criada por um grupo de
cientistas do CERN (European Laboratory for Particle Physics), na
Sua, com o intuito de facilitar a comunicao interna e externa.
Inicialmente, essa rede integrada continha dados os quais cada
equipamento deveria interpret-los individualmente. Ou seja,
no existia uma ferramenta que transformasse os dados em
informao padronizada. O primeiro a realizar essa tarefa foi o
Mosaic (primeiro navegador de grande aceitao no mercado).
O objetivo inicial era centralizar, em uma nica ferramenta, as
vrias tarefas necessrias para se obter as informaes disponveis
pela internet de forma integrada e visando conectividade
independentemente do tipo de mquina a ser utilizada. Para
manter essa multicompatibilidade, foi utilizado um conjunto
de protocolos e servios em comum, permitindo assim que
os usurios a ela conectados pudessem usufruir os servios de
informao de alcance mundial.
O HTML (Hyper Text Markup Language) a linguagem padro
da internet interpretada pelos browsers. Ela igualmente foi criada
pelo CERN tendo como seu principal responsvel Tim BernersLee. A motivao de Tim foi encontrar mais praticidade na
hora de escrever suas pginas. O HTML proporcionou algumas
vantagens, entre elas:

Padronizao: as pginas estritas em HTML tem


a aparncia semelhante nas diversas plataformas de
trabalho.

Unidade 1

linguagem_de_programacao_III.indb 19

19

04/02/11 11:14

Universidade do Sul de Santa Catarina

Diversidade: o HTML permite uma singularidade a


diversos elementos do documento, ou seja, ele permite
que alguns elementos possam ser modificados para
torn-los nicos. Por exemplo, padro da letra, cores etc.
Compactao: as pginas escritas em HTML possuem
um tamanho reduzido, a fim de economizar tempo de
transmisso por meio da internet.

O HTML construdo para que o documento seja um arquivo


texto com marcaes que controlam a forma de exibio do
documento. Este documento, pgina ou arquivo pode ser
construdo utilizando um framework elaborado, um framework
simples ou ainda simplesmente um editor de texto.
Uma das principais vantagens dessa linguagem que, se um
browser no entender determinado marcador, ele simplesmente o
ignora, evitando qualquer tipo de mensagem de erro (em tempo
de execuo) e que pouco afeta o resto do documento. Essa nota
tcnica foi elaborada com base na verso 3.0 do HTML. Logo
que a produo desta foi concluda, surgiu o HTML 4.0.
O HTML faz metade do trabalho. Basicamente organiza os
dados em um formato padro. A outra metade realizada pelos
browsers, como sucessores do Mosaic. Os browsers interpretam
esses dados organizados pelo HTML.
Durante a histria, j foi utilizado diversos browsers. Alguns
permaneceram e evoluram. Outros no conseguiram se adequar
s novas tendncias do mercado, como foi o caso do Netscape.
Esse browser foi largamente utilizado na dcada de 1990, porm
no consegui manter sua preferncia na dcada seguinte.
Nesta poca, existiam muitas diferenas entre a interpretao
do HTML. Tanto que muitas vezes existiam pginas em que o
usurio deveria informar qual browser estava utilizando. Desta
forma, o usurio era encaminhado a seu conjunto de pginas
devidamente formatado. Atualmente, esse tipo de problema
mais restrito. Desta forma, a escolha do browser acaba muitas
vezes por motivos visuais. Vejamos alguns browsers.

20

linguagem_de_programacao_III.indb 20

04/02/11 11:14

Linguagens de Programao III

Figura 1.1 - Internet Explorer desenvolvido pela Microsoft.


Fonte: Elaborada pelo autor (2010).

Figura 1.2 - Chrome desenvolvido pela Google.


Fonte: Elaborada pelo autor (2010).

Figura 1.3 - Safari desenvolvido pela Apple.


Fonte: Elaborada pelo autor (2010).

Unidade 1

linguagem_de_programacao_III.indb 21

21

04/02/11 11:14

Universidade do Sul de Santa Catarina

Figura 1.4 - Firefox desenvolvido pela Mozilla.


Fonte: Elaborada pelo autor (2010).

Voc pode perceber que praticamente no h diferena na


navegao entre os browsers. Porm, eventualmente, possvel
que voc se depare com diferenas muito mais perceptveis.
O HTML est presente em todas as pginas da internet,
inclusive nas pginas que possuem sons, imagens, vdeos ou
animaes. Essas interaes multimdia so exibidas sobre o
HTML.
A sua estrutura se baseia em tags. O documento sempre
inicializado pela tag <html> e logo aps vem o cabealho
<head>, o ttulo <title> e o corpo <body>.

Lembre-se que o HTML no case-sensitive, ou seja,


ele no distingue <html>, <HTML>, <HtMl>, <HTml>.
Todas as tags devem ser sempre fechadas, pois desta
forma mantm o padro e no h problemas com
outras linguagens que podemos vir a usar. As tags
de fechamento possuem uma barra /. Alm dos
fechamentos, devemos sempre manter a hierarquia
do bloco, isto , as tags sejam sempre fechadas do
ltimo para o primeiro, deste modo: <head> <title>
documento 1 </title> </head>.

22

linguagem_de_programacao_III.indb 22

04/02/11 11:14

Linguagens de Programao III

Vejamos um exemplo de HTML:


<html>
<head>
<title>Primeiro teste</title>
</head>
<body>
Esse um teste
</body>
</html>

Figura 1.5 - Exemplo de pgina html.


Fonte: Elaborada pelo autor (2010).

As principais tags utilizadas no desenvolvimento Web so as que


compem o formulrio HTML (form). Eventualmente, para
contemplarmos uma soluo mais completa, podemos utilizar de
outras tags para nos auxiliar.

Unidade 1

linguagem_de_programacao_III.indb 23

23

04/02/11 11:14

Universidade do Sul de Santa Catarina

Seo 2 Desenvolvimento de aplicaes Web


Um dos principais pontos a se destacar quando falamos em
desenvolver aplicao para Web que ela possui algumas
vantagens que superam desenvolvimento de aplicao
desktop. Vamos apresentar alguns conceitos envolvidos no
desenvolvimento de aplicaes Web.
O desenvolvimento de software para a Web mantm um
princpio bsico: mantenha-o simples; mantenha-o pequeno. Na
Conferncia de Tecnologia Emergente do ano de 2006 houve
vrios temas em discusso. Rael Dornfest, ex-chefe executivo da
OReilly, explanou: grandes negcios sero criados oferecendo
menos a voc. Perceba como essa afirmao se torna importante
quando pensamos na economia da ateno. Isso quer dizer que
no podemos ter mais informaes que o tempo que podemos ler.
Uma das vantagens no trabalho do desenvolvedor Web diz
respeito s operaes de manuteno: ele trabalha com uma
aplicao centralizada. Ou seja, a aplicao permanece em um
nico equipamento onde so acessadas pelos clientes. Desta
forma, as operaes de manuteno da aplicao decorrem de
forma muito dinmica, onde qualquer alterao na aplicao se
reflete instantaneamente a todos os usurios conectados. Alm
disso, as operaes de backup e integrao com outras aplicaes
so mais bem gerenciadas.
A centralizao permite que as estaes desktops utilizem menos
recursos. Essa diminuio favorece na diminuio de custos de
um projeto de implementao. Porm, o desenvolvimento Web
requer uma metodologia de desenvolvimento mais organizada.
Quando se fala de centralizao, no significa que seja uma
obrigatoriedade que exista apenas um servidor. As tecnologias
atuais permitem conter equipamentos em diversas camadas.
Por exemplo, podemos ter um equipamento com apenas o
servidor Web; um segundo equipamento com uma linguagem
de interpretao como o ASP; e, por ltimo, um equipamento
apenas com o banco de dados.
A forma de organizar a infraestrutura depende da estratgia
adotada no projeto de desenvolvimento. Muitas variveis devem
24

linguagem_de_programacao_III.indb 24

04/02/11 11:14

Linguagens de Programao III

ser levadas em consideraes, como: nmero de acessos, carga


de processamento, volume de consultas, entre outras. Apesar de
esta anlise no ser o foco de estudo desta disciplina, torna-se
importante voc ter conscincia do processo como um todo.
Quanto aos recursos necessrios no desktop para que uma
aplicao Web seja executada, so bem resumidos, uma vez que
basta ter acesso a um servidor Web por meio de um browser para
que a aplicao mais bsica passe a funcionar. As aplicaes mais
robustas em grandes empresas tambm no perdem muito essa
caracterstica. O servidor Web dever ser mais bem equipado,
porm, para algum passar a utilizar a aplicao, basta um
browser e uma conexo com o servidor para iniciar o seu trabalho.
Os recursos adicionais que por ventura possam ser necessrios,
normalmente se tratam de complementos para o browser executar
uma animao, um vdeo ou outra forma de mdia. Esses tipos de
complementos so nomeados como plug-ins.
As aplicaes Web necessitam de uma conexo com um servidor
Web. Esse servidor pode estar instalado no prprio desktop do
usurio ou em outro equipamento em qualquer distncia. Essa
conexo com o servidor pode ocorrer de duas formas: pela
intranet ou pela extranet. A intranet se caracteriza pela rede
LAN (rede local) onde o ambiente muito bem conhecido e
controlado. A extranet a internet propriamente dita, assim a
aplicao est aberta a qualquer navegador que tenha acesso a ela.
Lembre-se que, com uma aplicao centralizada,
o processamento e o volume de dados trafegam em
um nico equipamento. Essa preocupao deve estar
presente no incio do projeto de desenvolvimento do
software.

Uma grande facilidade para o uso das aplicaes Web que a


plataforma j se encontra pronta. Isto , a Web utiliza de todos os
equipamentos de redes j existentes, uma vez que tudo tratado
pelo protocolo TCP/IP.
Assim, os servios de requisies utilizam o seguinte
procedimento:

Unidade 1

linguagem_de_programacao_III.indb 25

LAN (Local Area Network):


sigla para representar
uma rede local, a rede de
computadores qual sua
mquina est conectada.

Protocolos TCP/IP um
conjunto de protocolos
de comunicao entre
computadores em rede.

25

04/02/11 11:14

Universidade do Sul de Santa Catarina

Browser
(Usurio)

Servidor Web

Servidor Web

Browser
(Usurio)

Figura 1.6 - Diagrama de interao browser x servidor.


Fonte: Elaborada pelo autor (2010).

Esse diagrama representa de forma bsica como a h a interao


entre browser e servidor. Utilizam a rede (internet ou intranet)
como plataforma de comunicao.
Uma outra forma de exemplificar a dinmica das aplicaes
Web utilizar um diagrama com o ASP sendo uma linguagem
de interpretao de cdigo. Assim como foi utilizado o ASP,
poderia ser qualquer outra linguagem, como PHP, JSP, entre
outras.

Figura 1.7 - Diagrama em que o ASP uma linguagem de interpretao de cdigo.


Fonte: <http://blog.computero.com.br/tutoriais-asp-01-o-que-e-asp/>. Acesso em 06 jan. 2011.

26

linguagem_de_programacao_III.indb 26

04/02/11 11:14

Linguagens de Programao III

Perceba que, mesmo utilizando uma linguagem para interpretar


uma programao existente, a dinmica da aplicao Web no foi
alterada.
Logicamente esse desenvolvimento no nasceu do dia para a noite.
As linguagens vm evoluindo para que os desenvolvedores possam
ter um esforo menor durante seus desenvolvimentos. O esquema a
seguir representa a evoluo das principais linguagens Web.

Figura 1.8 - Diagrama de evoluo de linguagens de programao.


Fonte: <www.deccanpro.com/deccanpro_web_development.php>. Acesso em 06 jan. 2011.

A possibilidade de uso das linguagens interpretadas no servidor


Web tornou-se possvel criar pginas em que o resultado depende
de um tipo de requisio. Ou seja, uma consulta a um banco de
dados ou outra forma de armazenamento de dados pode retornar
informaes diferentes dependendo dos parmentros para uma
mesma pgina. Assim, as pginas que outrora eram estticas
passam a ser dinmicas e um universo novo se abre para os
desenvolvedores.

Unidade 1

linguagem_de_programacao_III.indb 27

27

04/02/11 11:14

Universidade do Sul de Santa Catarina

A definio da Aplicao Web est entrelaado com


a definio de pginas dinmicas. Assim, o principal
fluxo de informao que trafega nas aplicaes Web
o envio (insero ou manipulao de dados) e o resgate
(consulta) de informaes de um servidor.

Vale ressaltar que o browser possui um tempo interno para


aguardar uma resposta da requisio realizada. Em outras
palavras: o browser envia alguns dados para o servidor. Este,
por sua vez, realiza uma consulta sobre esses dados. Caso essa
consulta seja demasiadamente lenta, o browser entender que
a conexo com o servidor no existe mais e retornar uma
mensagem de erro. Portanto, qualquer requisio nas aplicaes
Web deve conter um retorno rpido, de forma a evitar esse
problema.
Alm do retorno das consultas que deve ser levado em
considerao, o envio das informaes tambm importante.
Imagine voc enviar um arquivo enorme para o
servidor. Se um arquivo muito grande (400 Mb, por
exemplo) for enviado para o servidor e se a aplicao
no estiver preparada para suportar esse trfego, muito
provavelmente toda a aplicao ir parar enquanto
processa a sua requisio.

Essas consideraes dependem do link com o servidor. O link,


neste caso, refere-se velocidade de uma conexo com o servidor.
Quanto maior a velocidade, maior o volume de dados possveis de
trafegar na rede.
Outro aspecto que importante ser levado em considerao no
projeto de uma aplicao Web o cuidado com a usabilidade.
Lembre-se sempre que o custo para diversos browsers interpretarem
as pginas Web de forma semelhante a simplicidade do cdigo
HTML. Esses elementos grficos no possuem qualidades
semelhantes aos elementos de uma aplicao desktop.
O crescente uso da Web como plataforma de sistemas acaba
por forar a utilizao de mecanismos que melhorem o visual.
Tornando-os mais atrativos para os usurios.
28

linguagem_de_programacao_III.indb 28

04/02/11 11:14

Linguagens de Programao III

Atualmente existem recursos para minimizar esse problema,


como CSS, JavaScript, entre outros. Mas aqui est se
referenciando aos elementos bsicos do HTML como os
elementos de formulrio. O uso das folhas de estilos (CSS)
criam um visual mais amigvel e harmnico. O JavaScript, alm
de poder realizar algumas tarefas do CSS, auxilia a interatividade
com o usurio como mscaras e validaes de campos.
Assim como qualquer aplicao desktop, o desenvolvimento de
aplicaes para Web requer um projeto conciso em que possa
abordar as diferentes tecnologias que sero utilizadas. Diferente
do desktop, onde uma linguagem adotada para o projeto, a
aplicao para Web requer, hoje, o uso de vrias linguagens e
tecnologias para atingir um melhor resultado. Por isso, o uso
de frameworks auxilia e muito o desenvolvimento em equipes,
uma vez que essas ferramentas procuram manter um padro de
desenvolvimento uniforme.
Ateno!
Todo o projeto de software, seja de pequeno ou
grande porte, requer uma fase de anlise rigorosa.
Nesta etapa comea-se a identificar possveis
problemas e riscos ao desenvolvimento. Ainda nesta
fase, possvel direcionar e identificar as tecnologias
utilizadas no desenvolvimento. Execute sempre
aps o planejamento baseado na anlise do projeto.
Aprenda o problema, a soluo j existe!

Apesar de se tratar de um desenvolvimento de software, as


aplicaes Web possuem algumas caractersticas que a diferencia.
a) ubiquidade;
b) infraestrutura tecnolgica imprevisvel;
c) alta volatilidade dos requisitos de negcio;
d) equipes multidisciplinares.

Unidade 1

linguagem_de_programacao_III.indb 29

29

04/02/11 11:14

Universidade do Sul de Santa Catarina

a) Ubiquidade
A ubiquidade nada mais que a caracterstica de acessar a
aplicao de diversos locais para diversos dispositivos. Portanto,
para ter essa caracterstica comprovada, a aplicao Web necessita
estar disponvel rede. Entenda que, quando mencionado o
acesso rede, trata-se de rede domstica, corporativa ou mundial.
Hoje, com uso de dispositivos menores para acessar a rede,
possvel criar vises especficas para um determinado tipo de
dispositivo sem trocar a aplicao.

b) Infraestrutura tecnolgica imprevisvel


O que voc como desenvolvedor deve sempre manter em mente
que qualquer pessoa conectada rede pode ter acesso a sua
aplicao. No estamos tratando aqui os fatores de segurana,
mas sim o nmero de acesso que sua aplicao pode ter.
Assim, um usurio que deseja acessar sua aplicao pode conter
uma infinidade de configuraes diferentes em seu equipamento.
Podendo assim variar o sistema operacional, a memria, a
velocidade de conexo, o tamanho de tela, a resoluo, entre
outros.
Todas essas variveis podem afetar diretamente a forma que
o usurio poder visualizar a sua aplicao. Os browsers ainda
permitem que os usurios alterem suas configuraes livremente
desabilitando funcionalidades importantes que sua aplicao
pode estar utilizando.
As melhores aplicaes Web so aquelas que preveem o maior
nmero de variaes de equipamentos possveis que os usurios
possam ter. Um exemplo tpico que os usurios podem
desabilitar o uso da linguagem JavaScript. Essa linguagem, como
veremos, largamente utilizada em validaes de formulrios.
Caso sua aplicao apenas valide o formulrio via o JavaScript,
pode sofrer por usurios mal intencionados que esteja acessando
sua aplicao.
Outro exemplo seria a dimenso que voc pode estar utilizando.
Ao dimensionar sua pgina Web de tal forma que alguns
30

linguagem_de_programacao_III.indb 30

04/02/11 11:14

Linguagens de Programao III

usurios tenham de mover a barra de rolagem em diversas


direes, leva a uma insatisfao por parte dos usurios. Sem
falar que podem perder informaes importantes que no estejam
sendo mostradas adequadamente.

c) Alta volatilidade dos requisitos de negcio


Lembre-se que em aplicaes Web a regra de negcio fica no
servidor Web. Essa caracterstica permite que uma alterao
se replique para todos os clientes instantaneamente. Essa ao
faz com que seja comum nessas aplicaes um ndice maior na
alterao das regras de negcio se comparadas com aplicaes
desktops.
Aplicaes para Web no possuem em sua maioria um controle
de releases. Contudo, existem algumas aplicaes em que esse
controle feito e normalmente so aplicaes Web para uso
genrico. Nesses casos, voc adquire uma cpia, instala e passa a
usar. Com a evoluo tecnolgica ou com a ocorrncia de relatos
de bugs, uma nova release lanada.

d) Equipes multidisciplinares
Os projetos Web so concebidos, normalmente, por profissionais
com conhecimentos abrangentes. Um projeto pequeno
desenvolvido por um nico profissional acaba por forar este
a aprimorar seus conhecimentos em design, banco de dados,
linguagem server-side e em linguagem client-side.
Assim, as aplicaes para Web formam profissionais com vises
abrangentes sobre a soluo em que est se pretendendo alcanar.

Voc ver adiante


mais detalhes sobre a
linguagem server-side e
client-side.

Ateno!
Essa ltima caracterstica pode se tornar um ponto
fraco, pois muitos profissionais acabam por manter
o foco em uma generalizao tamanha que lhes
acaba faltando, algumas vezes, conhecimentos mais
aprimorados sobre uma tecnologia.

Unidade 1

linguagem_de_programacao_III.indb 31

31

04/02/11 11:14

Universidade do Sul de Santa Catarina

J vimos at o momento diversas informaes que mostram


como o desenvolvimento para a Web benfico, mas necessita de
alguns cuidados. Chegou a hora de desmitificar uma aplicao
Web e um website.
A aplicao Web formada por websites que possibilitam aos
usurios interagirem com a aplicao. Toda a aplicao para Web
composta por websites que propiciam o servio aos usurios.
A nfase tambm diferente: os websites tm em seu ponto
forte os aspectos plsticos do sistema (apresentao, movimento,
navegao, informao). As aplicaes para Web, por sua vez,
preocupam-se com os aspectos funcionais da soluo (velocidade
de resposta, funcionalidade, interatividade, aplicabilidade). Todo
esse conjunto facilitado pelo ambiente que a aplicao est
sendo desenvolvida, a internet.
O ambiente da internet possui diversas aplicabilidades e
finalidades que podem ser atendidas por uma aplicao. Por causa
disso, existem diversas tecnologias que auxiliam a alcanar os
objetivos.
Muitas dessas tecnologias so definidas por diversas
caractersticas como: aparncia, interatividade, disponibilidade no
servidor Web, experincia do desenvolvedor ou por uma escolha
pessoal do desenvolvedor por uma linguagem especfica.
Ateno!
Cuidado com a escolha de uma linguagem, pois a
escolha errada pode causar fracasso no projeto. Procure
nunca utilizar o lado pessoal durante esse processo.
Lembre-se que o objetivo de um desenvolvimento
oferecer a melhor soluo para um problema.

Existem inmeras linguagens que podem ser trabalhadas


no desenvolvimento Web e possvel interpretar linguagens
tipicamente desktops em servidores Web. Lembre-se que, para

32

linguagem_de_programacao_III.indb 32

04/02/11 11:14

Linguagens de Programao III

uma linguagem ser interpretada, basta que o servidor Web


entenda os comandos provenientes desta.
Vejamos mais detalhadamente duas linguagens amplamente
disseminadas: (a) Client-Sides e (b) Server-Sides.

a) Linguagens Client-Sides
Client-sides caracterizam as linguagens que so interpretadas
pelo browser. Normalmente no fazem parte da regra de negcio
composta pelo projeto e possuem uma aplicabilidade de interao
imediata.
Linguagens client-sides so mais teis no realce do
aspecto visual da aplicao ou quando precisamos
de processos simples e rpidos sendo executados na
interface, como a validao dos dados digitados pelo
usurio.

Hoje, esse tipo de linguagem tem ganhado fora com a


usabilidade. As aplicaes atuais possuem um nvel muito grande
de personalizao e interao. Por esse motivo, as linguagens
como CSS, JavaScript e DHTML so cada vez mais trabalhadas
e novos profissionais especialistas surgem no mercado.
As linguagens client-sides mais comuns so:

CSS

HTML

XHTML

Javascript

AJAX

Flash Action Script

Microsoft Silverlight

Unidade 1

linguagem_de_programacao_III.indb 33

33

04/02/11 11:14

Universidade do Sul de Santa Catarina

b) Linguagens Server-Sides
Este tipo de linguagem mantm em seu escopo as regras de
negcio da aplicao. Pelo fato de as linguagens Server-sides
serem executadas no servidor, todo o processamento da aplicao
recai sobre ela. Nessa camada se fazem as chamadas a banco de
dados e a arquivos de comunicao.
As linguagens server-sides j proveem mecanismos para
a implementao da parte lgica da aplicao, como os
algoritmos que executam os processos da camada de
negcio ou recursos auxiliares, como acesso a banco
de dados.

As linguagens mais usadas atualmente so:

PHP

ASP

.NET

CGI, Perl

Java, J2EE, WebObjects

SSJS, Aptana Jaxer, Mozilla Rhino

Python, Django

Ruby, Ruby on Rails

Smalltalk Seaside

ColdFusion

Lotus Domino

Websphere

As linguagens server-sides dependem diretamente do servidor


Web. Esse servidor necessita estar configurado para interpretar
as linguagens. Em outras palavras, para que uma linguagem
34

linguagem_de_programacao_III.indb 34

04/02/11 11:14

Linguagens de Programao III

se adque a um desenvolvimento Web e se torne Server-side,


basta que o servidor Web interprete o seu cdigo. Mesmo
linguagens tipicamente desktop como o C++ pode ser utilizada no
desenvolvimento Web. Apenas o servidor tem de identificar seu
cdigo e encaminhar para o compilado C.
Software de aplicao (Software as a Service SaaS) so aplicaes
executas em um servidor Web ao invs de serem instaladas em
um equipamento cliente. Esse tipo de aplicao possui vrios
tipos de benefcios, como reduzir a demanda dos departamentos
internos de TI. O SaaS ainda pode aumentar a acessibilidade
para o uso fora dos escritrios facilitando a sua manuteno.
O usurio acessa o software como um servio, desta forma
sempre est atualizado. Quaisquer atualizaes efetuadas no
servidor causam diretamente impacto a todos os equipamentos
dos usurios. Esse tipo de aplicao vem sendo utilizada pelas
empresas para facilitar a atualizao dos seus softwares, alm de
adotar uma padronizao.
A Google utiliza esse conceito em vrios de seus softwares. Um
dos mais usados o Google Docs, que se baseia em um conjunto
de aplicativos para escritrios, como um editor de textos e uma
planilha eletrnica.

Figura 1.9 - Planilha eletrnica do Google Docs.


Fonte: <http://docs.google.com>.

A colaborao de projetos torna-se simplificada. Uma vez que o


arquivo se encontra no servidor, no necessrio enviar para
um colega. Simplesmente o usurio necessita compartilhar o
arquivo com os colegas que deseja.

Unidade 1

linguagem_de_programacao_III.indb 35

35

04/02/11 11:14

Universidade do Sul de Santa Catarina

Outra forma de aplicativo que vem ganhando muito espao e


ateno so os Webtop. Um Webtop um desktop Web, isto ,
um ambiente de sistema operacional disponvel pelo browser.
Esse tipo de aplicao possui um potencial impressionante, j
que o usurio poder trocar de equipamento sem perder as suas
configuraes e os seus arquivos.

Figura 1.10 - Webtop, uma forma de trabalhar de forma virtual.


Fonte: http://icloud.com/pt. Acesso em 06 jan. 2011

Como voc pde notar, o desenvolvimento Web possui


inmeras aplicabilidades e est longe de encontrar o seu limite.
Porm, somente desenvolver no tudo. Conhecer o usurio e
procurar tcnicas para melhorar o uso das aplicaes so fatores
fundamentais. Essa tentativa de facilitar o uso das aplicaes e
potencializar o seu uso chama-se de usabilidade.

Seo 3 Usabilidade
J foi mencionado aqui sobre usabilidade, como ela vem
ganhando espao e cada vez mais utilizada em aplicaes Web.
Mas, afinal, o que a usabilidade?
Usabilidade uma caracterstica daquilo que utilizvel, funcional.
tornar bvio o bvio, tendo em conta as necessidades do utilizador e
o contexto em que este est inserido. Podemos relacionar usabilidade
com os seguintes verbos: simplificar, rentabilizar, otimizar, facilitar,
melhorar, acelerar. Mais usabilidade sinnimo de maior flexibilidade e
de maior interao com os usurios.

36

linguagem_de_programacao_III.indb 36

04/02/11 11:14

Linguagens de Programao III

A usabilidade est em todo o lugar, praticamente em todos os


produtos que o ser humano desenvolveu possvel alterar para
melhor. Porm, nem sempre mudar significa que ir melhorar.
Qualquer pessoa que j tenha operado uma tev poder utilizar
qualquer outra. Essa afirmao verdadeira, porm nem sempre
poder utilizar no mximo de seus recursos. No so todos os
detalhes que o usurio ter conhecimento, como uma funo
sleep, mute, canal anterior, menu.
Agora, se alterarmos o produto como celular, forno, forno microondas, lavadoras de loua, computadores, videogame. Percebemos
que todos caem cabem nesse exemplo.
Desta forma, a forma que se usa um determinado produto
deve ser adequado para que se torne intuitivo. Assim, quando
o produto no o faz, o problema do projeto do design, da
usabilidade.
Vejamos um caso de sucesso: a Apple se esfora para
que seus produtos se tornem completamente intuitivo
e que todo o ritual de utilizar um produto da Apple
torne-se nico e de uma facilidade sem precedentes.

Botes e informaes nos devidos locais com sua hierarquia


de importncia; cores e diagramao intuitivas e adequadas;
comportamento adequado ao pblico. Isso usabilidade em
ao. Quando um produto usvel, nem se pensa no conceito de
usabilidade. O problema est quando o produto no se adqua ao
utilizador. A usabilidade um caminhar progressivo em direo
ao utilizador, e no o contrrio.
Na internet a usabilidade no basta, mas corresponde
a uma boa parte do caminho. Se considerarmos o
exemplo de uma loja online, veremos que algo
simples: se um usurio no encontra um produto, no
o compra. Fazer com que o utilizador encontre o que
procura usabilidade em ao.

Um site tem, em uma perspectiva otimista, entre 10 e 15


segundos para convencer, por isso todos os elementos da pgina
Unidade 1

linguagem_de_programacao_III.indb 37

37

04/02/11 11:14

Universidade do Sul de Santa Catarina

precisam ser avaliados, pesados, medidos em termos de impacto.


Um dos fatores mais apontados para pginas Web a velocidade
de carregamento. Um usurio que espera dez segundos para uma
pgina carregar, tende a desistir da visita. Todos os elementos
grficos necessitam ser altamente otimizados (tamanho,
qualidade, interesse). Sempre de boa prtica, verificar se todas
as imagens so necessrias. Questionar se todos os elementos
grficos so fundamentais. Tratando de aplicaes corporativas,
esse questionamento deve ser realizado com muito mais
seriedade. Aplicaes corporativas no necessitam vender um
produto, mas maximizar a funcionalidade.
Um layout deve ser consistente e implementado com o foco da
aplicao. O layout deve mostrar a filosofia, a ideia central em
que a aplicao desempenha dentro da empresa. Cada empresa
tem uma linguagem, uma imagem que o layout do site necessita
sublinhar.
O layout dever ser concebido a partir do ponto onde
se pretende que o usurio inicie a movimentao
visual. A distribuio dos elementos e as cores
escolhidas so importantssimas, normalmente os
olhos movimentam-se da esquerda para a direita e de
cima para baixo.

Figura 1.11 - Simulao do movimento dos olhos ao ler uma pgina Web.
Fonte: Elaborada pelo autor (2010).

Esse formato indica que o layout ideal aquele que leva o


usurio sempre a observar primeiro os elementos superiores
38

linguagem_de_programacao_III.indb 38

04/02/11 11:14

Linguagens de Programao III

esquerdos, normalmente utilizados em muitos sites e softwares


como uma rea reservada para logotipo, aps este ponto descendo
em diagonal. Os olhos procuram normalmente primeiro os
elementos maiores e s depois os menores. A cor influencia, a
tendncia primeiramente observamos os elementos mais escuros
e s depois os mais claros.
Quando falamos de layout, sempre devemos levar em
considerao a coerncia e o equilbrio do visual apresentado.
No devemos imprimir um layout onde os elementos grficos
sejam maiores que as informaes textuais. No caso de
formulrios, devemos evitar cadastros longos. Normalmente os
formulrios devem estar totalmente visveis na janela do browser.
Existe uma tcnica de avaliar o equilbrio da tela, devemos traar
uma linha imaginria vertical ou horizontalmente em metade
da tela. As medidas devem conter aproximadamente a mesma
quantidade de texto.

Seo 4 HTML
HTML a linguagem padro de todos os browsers. Portanto,
fundamental que voc conhea e entenda muito bem esta
linguagem.
Os comandos HTML so representados no texto por meio de tags.
O browser interpreta como tags todos os elementos HTML vlidos
que estejam entre os sinais menor que (<) e maior que (>). Sua
sintaxe bsica :
<tag>Descrio</tag>

Algumas tags podem ter um ou mais atributos, que definem


alguma caracterstica especial. As tags permitem que voc crie
atributos novos. O browser ir ignorar os atributos conhecidos.
Esse artifcio permite que voc adicione caractersticas nicas

Unidade 1

linguagem_de_programacao_III.indb 39

39

04/02/11 11:14

Universidade do Sul de Santa Catarina

para cada elemento do HTML. As tags com atributos so


formatadas da seguinte forma:
<p align=center>teste</p>
<table border=1>
<tr>
<td>Clula</td></tr>
</table>

Veja que, no exemplo, o pargrafo est sendo centralizado. J a


tabela possui uma borda aparente.
Todo o documento HTML possui uma estrutura de hierarquia.
Essa estrutura inicia com a identificao do documento por meio
da tag <HTML>. Dentro do documento, a estrutura separa em
cabealho e corpo.
<html>
<head>
<title>Teste</title>
</head>
<body>
<p align=center>teste</p>
<table border=1>
<tr>
<td>Clula</td></tr>
</table>
</body>
</html>

A tag <head> delimita a parte do documento sendo o cabealho.


O cabealho onde se encontram as informaes do documento.
Nenhuma informao contida dentro desse bloco deve conter
informaes a serem escritas no browser. Alm de informaes
de configurao da pgina, a tag <title> informa o ttulo do
documento, que ser apresentado na barra superior do browser.
Essa tag deve sempre estar dentro do cabealho.
A tag <body> contm o corpo do documento. Essa tag contm
em seu interior toda a informao que ser mostrada em sua
pgina. Os textos, as imagens, os formulrios, tudo que ser
40

linguagem_de_programacao_III.indb 40

04/02/11 11:14

Linguagens de Programao III

apresentado pelo browser. Os atributos dessa tag definem


cores para os textos, links, imagem de fundo, entre outras
caractersticas.
O HTML ainda oferece uma srie de tag que so utilizadas
para formatar as informaes nele contidas. Podemos formatar
textos de ttulos utilizando as tags <h1> at <h6>. A numerao
representa os nveis dos ttulos.
<html.
<head>
<title>Teste de ttulos</title>
</head>
<body>
<h1>Ttulo 1</h1>
<h2>Ttulo 2</h2>
<h3>Ttulo 3</h3>
<h4>Ttulo 4</h4>
<h5>Ttulo 5</h5>
<h6>Ttulo 6</h6>
</body>
</html>

O browser interpretar da seguinte forma:

Figura 1.12 - Tags de formatao.


Fonte: Elaborada pelo autor (2010).

Unidade 1

linguagem_de_programacao_III.indb 41

41

04/02/11 11:14

Universidade do Sul de Santa Catarina

Alm das tags de ttulos, as quebras de linhas e pargrafos so


muito utilizadas em textos e formatao de formulrios. O
HTML usa comandos especiais para definir a quebra de um
pargrafo ou de uma linha.
A tag <p> indica a quebra de pargrafos, ela insere
automaticamente uma linha em branco. O uso da tag
de pargrafo pode ser feito em uma nica linha ou em
bloco, esse uso opcional. O comando <p> permite
alinhar o pargrafo dentro do documento.
<html>
<head>
<title>Teste de pargrafos</title>
</head>
<body>
<p align=left>Alinhado esquerda
<p align=center>Alinhado ao centro</p>
<p align=right>Alinhado direita
<p align=justify>Justificado - teste - teste - teste - teste - teste - teste teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste
- teste - teste - teste - teste - teste - teste - teste - teste - teste - teste teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste
- teste - teste - teste - teste - teste - teste - teste - teste - teste - teste teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste
- teste - teste - teste - teste - teste - teste - teste - teste - teste - teste teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste
- teste - teste - teste - teste - teste - teste - teste - teste - teste - teste teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste
- teste - teste - teste - teste - teste - teste - teste - teste - teste - teste teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste
- teste - teste - teste - teste - teste - teste - teste - teste - teste - teste teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste
- teste - teste - teste - </p>
</body>
</html>

Como fica no browser:

42

linguagem_de_programacao_III.indb 42

04/02/11 11:14

Linguagens de Programao III

Figura 1.13 - Tags de pargrafo e alinhamento de texto.


Fonte: Elaborada pelo autor (2010).

Em vez de inserirmos uma quebra de pargrafo, pode ser


necessria uma quebra de linha somente. Neste caso, devemos
utilizar a tag <br>, pois ela finaliza a linha atual e passa para a
prxima. Esse elemento no utilizado em bloco. Portanto, o
browser quando a encontra entende que o texto posterior a ela
colocado em uma nova linha.
<html>
<head>
<title>Teste de quebra de linha</title>
</head>
<body>
Quebra de linha<br>Nova linha
</body>
</html>

O browser interpreta da seguinte forma:

Unidade 1

linguagem_de_programacao_III.indb 43

43

04/02/11 11:14

Universidade do Sul de Santa Catarina

Figura 1.14 - Tag de nova linha.


Fonte: Elaborada pelo autor (2010).

A tag <PRE> informa ao browser que deve interpretar o texto


conforme foi digitado.
<html>
<head>
<title>Teste de pr-formatao</title>
</head>
<body>
<pre>Texto pr-formatado.
O browser interpretar exatamente desta forma que est sendo digitado.
Inclusive com espaos
em branco</pre>
</body>
</html>

O browser interpreta desta forma:

44

linguagem_de_programacao_III.indb 44

04/02/11 11:14

Linguagens de Programao III

Figura 1.15 - Tag de pr-formatao.


Fonte: Elaborada pelo autor (2010).

Por ser uma linguagem de formatao, o HTML tambm


permite alterar o estilo do texto. Como aplicar negrito, itlico,
sublinhado, subscrito, entre outros.
<html>
<head>
<title>Teste de formatao de texto</title>
</head>
<body>
<b>Texto em negrito</b>
<br>
<i>Texto em itlico</i>
<br>
<u>Texto sublinhado</u>
<br>
<sup>Texto sobrescrito</sup>
<br>
<sub>Texto subscrito</sub>
<br>
<big>Almenta a fonte</big>
<br>
<small>Reduz a fonte</small>
</body>
</html>

Unidade 1

linguagem_de_programacao_III.indb 45

45

04/02/11 11:14

Universidade do Sul de Santa Catarina

No browser fica assim:

Figura 1.16 - Tags de alterao de estilo.


Fonte: Elaborada pelo autor (2010).

O HTML ainda possibilita a configurao da fonte de texto.


O elemento utilizado a tag <font>. Alm do elemento, ainda
possvel manipular algumas informaes por meio dos atributos,
como tamanho e cor da fonte.
<html>
<head>
<title>Teste de fonte de texto</title>
</head>
<body>
<font face=Verdana, Geneva, sans-serif> Teste fonte Verdana</
font><br />
<font face=Arial, Helvetica, sans-serif size=+1 color=#000066>Teste
fonte arial</font><br />
<font face=Times New Roman, Times, serif size=+2
color=#006633>Teste fonte Times New Roman</font><br />
<font face=Tahoma, Geneva, sans-serif size=+3
color=#009900>Teste fonte Tahoma</font><br />
<font face=Lucida Sans Unicode, Lucida Grande, sans-serif size=+2
color=#0000FF>Teste fonte Lucida</font><br />
<font face=Courier New, Courier, monospace size=+4
color=#FF0000>Teste fonte Courier</font><br />
</body>
</html>

46

linguagem_de_programacao_III.indb 46

04/02/11 11:14

Linguagens de Programao III

O browser interpreta da seguinte forma:

Figura 1.17 - Tags manipuladores de fontes.


Fonte: Elaborada pelo autor (2010).

Uma das tags extremamente utilizadas em uma tentativa de


tornar os layouts mais amigveis e atrativos para os usurios.
Esta tag a <div>, ela tratada tambm como camada visual
em DHTML. J no HTML bsico utilizado como bloco de
alinhamento horizontal.
<html>
<head>
<title>Teste de Div</title>
</head>
<body>
<div align=center>Usando a TAG DIV:</div>
<BR>
<div align=right>
<P>Usando a TAG DIV voc pode alinhar seu texto sem problemas.
<P>Pode utilizar o alinhamento direita, que alinha seu texto na
margem
direita da tela. Como um texto criado em editor de textos para ser
impresso em uma pgina.
<P>Com a TAG DIV voc pode aproveitar o mesmo alinhamento para
vrios
pargrafos.
</div>
</body>
</html>

Unidade 1

linguagem_de_programacao_III.indb 47

47

04/02/11 11:14

Universidade do Sul de Santa Catarina

O browser interpreta da seguinte forma:

Figura 1.18 - Tag de camadas.


Fonte: Elaborada pelo autor (2010).

Uma forma de organizar as informaes dispostas no browser


a utilizao de listas. As listas podem servir como resumos
ou ndices de todo o site, contendo links para outras pginas.
Podemos dividir as listas em trs tipos:

listas no ordenadas;

listas ordenadas ou numeradas;

listas descritivas.

As listas no ordenadas representam a formatao simples de


informaes por meio de indicadores. A tag do comando a
<ul> e seus tpicos so a <li>. Podemos ainda alterar o tipo do
marcador pelo atributo type da tag <ul>.

48

linguagem_de_programacao_III.indb 48

04/02/11 11:14

Linguagens de Programao III

<html>
<head>
<title>Teste de Lista no Ordenada</title>
</head>
<body>
<ul type=circle>
<li>Tpico 2</li>
<li>Tpico 3</li>
<li>Tpico 4</li>
</ul>
<ul type=disc>
<li>Tpico 2</li>
<li>Tpico 3</li>
<li>Tpico 4</li>
</ul>
<ul type=square>
<li>Tpico 2</li>
<li>Tpico 3</li>
<li>Tpico 4</li>
</ul>
</body>
</html>

O browser interpretar da seguinte forma:


<html>
<head>
<title>Teste de Lista Ordenada</title>
</head>
<body>
<ol type=1>
<li>Tpico 2</li>
<li>Tpico 3</li>
<li>Tpico 4</li>
</ol>
<ol type=a start=4>
<li>Tpico 2</li>
<li>Tpico 3</li>
<li>Tpico 4</li>
</ol>

Unidade 1

linguagem_de_programacao_III.indb 49

49

04/02/11 11:14

Universidade do Sul de Santa Catarina

<ol type=A>
<li>Tpico 2</li><li>Tpico 3</li>
<li>Tpico 4</li>
</ol>
<ol type=i start=2>
<li>Tpico 2</li>
<li>Tpico 3</li>
<li>Tpico 4</li>
</ol>
<ol type=I>
<li>Tpico 2</li>
<li>Tpico 3</li>
<li>Tpico 4</li>
</ol>
</body>
</html>

Figura 1.19 - Tags de listas no ordenadas.


Fonte: Elaborada pelo autor (2010).

As listas ordenadas no possibilitam enumerar os tpicos por


meio de nmeros ou em ordem alfabtica. A tag utilizada a
<ol>, alm do atributo type que define o tipo de numerador, a tag
possui um segundo atributo, o start. Esse atributo informa ao
browser em qual nmero a lista deve iniciar.

50

linguagem_de_programacao_III.indb 50

04/02/11 11:14

Linguagens de Programao III

A apresentao no browser ser:

Figura 1.20 - Tags lista ordenada.


Fonte: Elaborada pelo autor (2010).

As listas descritivas so diferentes das outras listas. Essa lista


inicia pela tag <dl>. Cada item de uma lista descritiva possui dois
componentes: um tpico <dt> e uma descrio do tpico <dd>.
<html>
<head>
<title>Teste de Lista Descritivas</title>
</head>
<body>
<dl>
<dt>Tpico 1</dt>
<dd>Descrio do tpico 1</dd>
<dt>Tpico 2</dt>
<dd>Descrio do tpico 2</dd>
<dt>Tpico 3</dt>
<dd>Descrio do tpico 3</dd>
</dl>
</body>
</html>

O browser deve apresentar da seguinte forma:


Unidade 1

linguagem_de_programacao_III.indb 51

51

04/02/11 11:14

Universidade do Sul de Santa Catarina

Figura 1.21 - Tags de lista descritivas.


Fonte: Elaborada pelo autor (2010).

Outra funcionalidade que amplamente usada em praticamente


todas as pginas da internet o link ou hipertexto. Essa
funcionalidade representa a ligao primitiva entre as pginas
formando a teia da internet.
Os links proporcionam a ligao entre pginas e textos da prpria
pgina. Essa ligao interna utilizada principalmente em textos
longos com tpicos especficos.
Os links para outras pginas podem ser classificados como locais
e externos. Os links locais representam uma ligao com uma
pgina que est salva no mesmo local da pgina principal. Isso
significa que a pgina que est sendo acessada far uma referncia
direta a outro arquivo, sem a necessidade de utilizar o protocolo
HTTP. O cdigo para esse tipo de link se torna extremamente
simples:
<a href=segundaPagina.htm>Acessar a segunda pgina</a>

J quando tratamos de links externos, o link necessita realizar a


chamada pelo protocolo HTTP.
<a href=http://www.google.com.br>Acessar o Google</a>
<a href=../outros/paginatres.html>Acessar pgina trs em outros
diretrio</a>

52

linguagem_de_programacao_III.indb 52

04/02/11 11:14

Linguagens de Programao III

Porm, quando o acesso se tornar de ncora para uma parte do


texto da prpria pgina, a sintaxe do HTML se altera um pouco:
<html>
<head>
<title>Link de Texto (Ancora)</title>
</head>
<body>
<a href=#primeiraparte>Tabela</a>
<br />
<a href=#Atalho>Atalhos</a>
<pre>
<a name=primeiraparte />
Tabelas
Recurso
Criando tabelas com um teclado
Vantagem
Voc pode capturar informaes tabulares de forma rpida e fcil
Situaes
Reunies, apresentaes, debates pessoais
Tente agora
1. Coloque o cursor ao final da palavra Produto abaixo:


Produto
2. Pressione TAB e digite Quantidade.
3. Pressione TAB novamente e digite preo.
4. Pressione ENTER.
5. Pressione TAB para passar de uma clula a outra e digite alguma
informao nas clulas.
6. Pressione ENTER ao final da linha.
7. Tente pressionar TAB abaixo, aps Joo e aps Maria:


Pessoa Dinheiro que lhes devo

Joo

Maria
<a name=Atalho />

Unidade 1

linguagem_de_programacao_III.indb 53

53

04/02/11 11:14

Universidade do Sul de Santa Catarina

Atalhos teis:
ALT + ENTER insere outra linha dentro de uma clula (quando
ENTER no funciona na ltima clula de uma tabela).
CTRL + ENTER insere uma linha abaixo.
CTRL + ALT + E, R insere uma coluna esquerda ou direita.
Alm disso, tente fazer experincias com DEL, BACKSPACE, HOME, END
e ENTER em vrios pontos da tabela. Verifique os Atalhos do Teclado no
Office Online para descobrir outras funes de tabela que podem ser
executadas em um teclado.
</pre>
</body>
</html>

Alm dos hipertextos, as tabelas so elementos amplamente


utilizados na internet. Ela no faz nenhuma ligao com outras
pginas, mas organiza de uma forma matricial qualquer dado
da pgina, tanto textos como outros elementos. No caso das
aplicaes, as tabelas so utilizadas para organizar o formulrio
na pgina.
Quando voc domina o uso das tabelas, acaba tendo uma enorme
facilidade em criar layouts organizados. As informaes so
dispostas de forma mais clara para o usurio. Quando usada com
as folhas de estilos CSS, tornam-se ainda mais amigveis. Porm,
o prprio CSS responsvel pelo declnio no uso das tabelas para
melhoramento dos layouts de pginas.
Uma tabela pode ser criada de forma simples, apenas para
organizar algum elemento ou mesmo o texto que voc queira
utilizar. O padro das tabelas no conter bordas. As tabelas so
dispostas por linhas e clulas, apesar de no browser dar a falsa
impresso que possui colunas.

54

linguagem_de_programacao_III.indb 54

04/02/11 11:14

Linguagens de Programao III

<html>
<head>
<title>Exemplo de Tabela</title>
</head>
<table>
<tr>
<td>Linha 1 C&eacute;lula 1</td>
<td>Linha 1 C&eacute;lula 2</td>
<td>Linha 1 C&eacute;lula 3</td>
<td>Linha 1 C&eacute;lula 4</td>
</tr>
<tr>
<td>Linha 2 C&eacute;lula 1</td>
<td>Linha 2 C&eacute;lula 2</td>
<td>Linha 2 C&eacute;lula 3</td>
<td>Linha 2 C&eacute;lula 4</td>
</tr>
<tr>
<td>Linha 3 C&eacute;lula 1</td>
<td>Linha 3 C&eacute;lula 2</td>
<td>Linha 3 C&eacute;lula 3</td>
<td>Linha 3 C&eacute;lula 4</td>
</tr>
</table>
<body>
</body>
</html>

O browser interpreta desta forma:

Unidade 1

linguagem_de_programacao_III.indb 55

55

04/02/11 11:14

Universidade do Sul de Santa Catarina

Figura 1.22 - Tag de tabelas.


Fonte: Elaborada pelo autor (2010).

Os atributos das tabelas podem alterar a aparncia, como a


disposio do contedo. As bordas, o alinhamento do contedo,
o espaamento entre as clulas, os espaos entre os dados e a
prxima clula, entre outros, podem ser alterados.
Alguns dos mais usados so:

width - atributo que manipula a largura da tabela


em relao ao browser, pode ser tratado com pixels ou
percentual relativo.
height - atributo responsvel pela altura da tabela em
relao ao browser, pode ser tratado com pix.els ou
percentual relativo.
border - atributo que trata da espessura da borda em
pixels.
cellspacing - atributo responsvel pelo espao entre uma
clula e outra tratado em pixel.
celladding - atributo responsvel pelo espao entre os
dados e a borda da tabela tratado em pixels.

56

linguagem_de_programacao_III.indb 56

04/02/11 11:14

Linguagens de Programao III

Procure pesquisar sobre os atributos das tabelas.


Eles so de grande auxlio no desenvolvimento e na
apresentao.

<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8>
<title>Atributos de clulas</title>
</head>
<body>
<table width=400 border=1>
<tr>
<td>Linha 1 C&eacute;lula 1</td>
<td valign=bottom>Linha 1 C&eacute;lula 2</td>
<td bgcolor=#FF0000>Linha 1 C&eacute;lula 3</td>
<td>Linha 1 C&eacute;lula 4</td>
</tr>
<tr>
<td valign=bottom>Linha 2 C&eacute;lula 1</td>
<td valign=middle nowrap>Linha 2 C&eacute;lula 2</td>
<td>Linha 2 C&eacute;lula 3</td>
<td align=center>Linha 2 C&eacute;lula 4</td>
</tr>
<tr>
<td width=20 height=20>Linha 3 C&eacute;lula 1</td>
<td valign=top>Linha 3 C&eacute;lula 2</td>
<td align=right>Linha 3 C&eacute;lula 3</td>
<td>Linha 3 C&eacute;lula 4</td>
</tr>
</table>
</body>
</html>

Unidade 1

linguagem_de_programacao_III.indb 57

57

04/02/11 11:14

Universidade do Sul de Santa Catarina

<html>
<head>
<title>Tabela com atributos</title>
</head>
<body>
<table border=1 cellpadding=2 cellspacing=1 width=70%
height=50%>
<tr>
<td>Linha 1 C&eacute;lula 1</td>
<td>Linha 1 C&eacute;lula 2</td>
<td>Linha 1 C&eacute;lula 3</td>
<td>Linha 1 C&eacute;lula 4</td>
</tr>
<tr>
<td>Linha 2 C&eacute;lula 1</td>
<td>Linha 2 C&eacute;lula 2</td>
<td>Linha 2 C&eacute;lula 3</td>
<td>Linha 2 C&eacute;lula 4</td>
</tr>
<tr>
<td>Linha 3 C&eacute;lula 1</td>
<td>Linha 3 C&eacute;lula 2</td>
<td>Linha 3 C&eacute;lula 3</td>
<td>Linha 3 C&eacute;lula 4</td>
</tr>
</table>
</body>
</html>

J no browser fica:

58

linguagem_de_programacao_III.indb 58

04/02/11 11:14

Linguagens de Programao III

Figura 1.23 - Propriedade de tabela.


Fonte: Elaborada pelo autor (2010).

As clulas, por sua vez, possuem atributos que so igualmente


fundamentais para uma boa utilizao das tabelas. Voc pode
manipular o alinhamento vertical e horizontal, a cor da clula,
se o texto poder ou no ter quebra automtica de linha, entre
outras.
O browser interpreta da seguinte forma:

Figura 1.24 - Propriedades de clulas.


Fonte: Elaborada pelo autor (2010).

Como voc pode notar, a estrutura da tabela sempre tender a


um ajuste automtico. Ou seja, todas as clulas da mesma ordem
so foradas a assumir a caracterstica que define o tamanho de
uma clula.

Unidade 1

linguagem_de_programacao_III.indb 59

59

04/02/11 11:14

Universidade do Sul de Santa Catarina

As linhas no fogem regra, voc pode utilizar alguns atributos


como cor, alinhamento, entre outros. Lembre-se sempre que os
atributos da linha modificaro todas as clulas contidas nela.
Os atributos das clulas e das linhas podem auxili-lo
de forma surpreendente, procure pesquisar mais sobre
quais so e como utiliz-los.

As clulas e as linhas ainda podem ser mescladas. Esse artifcio


muito utilizado para facilitar a organizao das informaes. Para
mesclar as clulas de uma mesma linha, utilize o atributo colspan
e o nmero de clulas que voc est mesclando. J para mesclar
clulas de linhas diferentes, utilize o atributo rowspan e o nmero
de clula que voc est mesclando.
<html>
<head>
<title>Tabela Mesclando Clulas</title>
</head>
<body>
<table border=1>
<tr>
<td>Linha 1 C&eacute;lula 1</td>
<td colspan=3>Linha 1 C&eacute;lula Mesclada 2 - 3 - 4</td>
</tr>
<tr>
<td rowspan=2>C&eacute;lula 1- Linhas 2 e 3 mescladas</td>
<td>Linha 2 C&eacute;lula 2</td>
<td>Linha 2 C&eacute;lula 3</td>
<td>Linha 2 C&eacute;lula 4</td>
</tr>
<tr>
<td>Linha 3 C&eacute;lula 2</td>
<td>Linha 3 C&eacute;lula 3</td>
<td>Linha 3 C&eacute;lula 4</td>
</tr>
</table>
</body>
</html>

60

linguagem_de_programacao_III.indb 60

04/02/11 11:14

Linguagens de Programao III

A apresentao no browser fica:

Figura 1.25 Mesclando clulas.


Fonte: Elaborada pelo autor (2010).

Os formulrios so utilizados em todas as aplicaes Web


com base em HTML. O formulrio possibilita ao usurio
entrar com informaes destinadas ao servidor. Estes, por sua
vez, processam e devolvem uma resposta. Os formulrios no
processam as informaes. Essa responsabilidade efetuada por
um interpretador no servidor, como o caso do ASP ou PHP. O
interpretador ASP l os dados imputados do formulrio e realizar
as instrues contidas no programa. Aps o trmino, remete para
o usurio o carregamento completo.
Uma linguagem Server-side, como o ASP, podem ser utilizadas
de diversas formas. Podemos relacionar algumas:

processar as requisies e os dados enviados pelo usurio


por meio de formulrios;
tornar-se uma interface entre HTML e banco de dados
SQL, fazendo a converso da transao HTML para
SQL e vice-versa;
converter dados do sistema em HTML gerando
respostas para o cliente.

Unidade 1

linguagem_de_programacao_III.indb 61

61

04/02/11 11:14

Universidade do Sul de Santa Catarina

Os scripts ou programas so escritos em linguagens compatveis


com a plataforma sob a qual o servidor est rodando e devem
produzir arquivos executveis.
Os elementos de um formulrio so definidos separadamente. Na
definio do formulrio, voc informa o local do programa (CGI,
ASP, PHP) que controlar o formulrio e a forma ou o mtodo
como os dados sero enviados para o servidor.
A tag utilizada para o formulrio o form. Essa tag possui
atributos que definem o destino do formulrio, o mtodo de
envio, o nome, entre outros. Sobre esses atributos, podemos
relacionar:

method: define o mtodo utilizado pelo servidor para


receber os dados do formulrio. Este atributo pode
receber dois valores:

post: mtodo que transmite toda a informao do


formulrio incorporada no documento do HTML;
get: anexa o contedo do formulrio ao endereo da
URL, possui limitao de tamanho das informaes;

action: especifica o programa ou a pgina do servidor que


processar os dados do formulrio;
name: define o nome do formulrio.

Os elementos de formulrio so campos destinados a receber


dados do usurio. Os mais utilizados so: input, select, textarea.
a) Elemento input
O elemento input de longe o mais utilizado. Sua configurao
grfica varia conforme os valores do atributo type. Visualmente
pode variar de uma caixa de texto para um boto.
Os principais atributos deste elemento so:

62

linguagem_de_programacao_III.indb 62

04/02/11 11:14

Linguagens de Programao III

type - define o tipo de entrada que o elemento ser:

text - campo simples de entrada de texto, utiliza como


principais atributos associados: type, name, value, size,
maxlength.
password - texto protegido, no possvel visualizar os
caracteres digitados, utiliza como principais atributos
associados: type, name, value, size, maxlength.
hidden - utiliza como principais atributos associados:
type, name, value.
radio - elemento com um boto de seleo nica, utiliza
como principais atributos associados: type, name, value,
checked.
checkbox - caixa de seleo onde pode ser checado
diversos elementos, utiliza como principais atributos
associados: type, name, value, checked.
reset - boto responsvel em limpar os dados do
formulrio, utiliza como principais atributos
associados: type, name, value.
submit - boto responsvel em enviar o formulrio para
o servidor, utiliza como principais atributos associados:
type, name, value.
image - mesma funo no atributo submit, porm
o boto associado a uma imagem, utiliza como
principais atributos associados: type, name, value, src.
button - cria um boto sem ao predefinida, utiliza
como principais atributos associados: type, name, value.
file - abre uma janela para selecionar arquivo, utiliza
como principais atributos associados: type, name, value.

name - nome do campo ou da varivel.

src - local no servidor onde a imagem deva ser carregada.

value - valor default do campo.


Unidade 1

linguagem_de_programacao_III.indb 63

63

04/02/11 11:14

Universidade do Sul de Santa Catarina

checked - indica que o campo deve estar marcado ou


no como padro. Quando no possuir valor atribudo
assume true.
size - define o tamanho do campo, ou seja, a quantidade
de caracteres que ser exibida em campos do tipo text e
password.
maxlength - define a quantidade de caracteres que o
campo pode receber em campos do tipo text e password.

<html>
<head>
<title>Teste formul&aacute;rio</title>
</head>
<body>
<form action=processa.asp method=POST>
<table>
<tr>
<th align=left Valign=top>Caixa de texto comum:</th>
<td><input type=text name=txtTexto size=20
maxlength=25></td>
</tr>
<tr>
<th>Texto protegido por senha:</th>
<td><input type=password name=pwsSenha size=6
maxlength=6></td>
</tr>
<tr>
<th>Bot&otilde;es de Radio:</th>
<td> Qual o seu time?
<input type=radio name=radOpcao value=F
checked=true>Flamengo
<input type=radio name=radOpcao value=V>Vasco</td>
</tr>
<tr>
<th>Checkboxes:</th>
<td> Que softwares voc&ecirc; cohece?
<input type=checkbox name=word value=Sim> Word
<input type=checkbox name=excel value=Sim> Excel

64

linguagem_de_programacao_III.indb 64

04/02/11 11:14

Linguagens de Programao III

<input type=checkbox name=firefox value=Sim>Firefox</td>


</tr>
<tr>
<th>Bot&atilde;o de Envio:</th>
<td><input type=submit name=cmdEnvio value=Enviar></td>
</tr>
<tr>
<th>Bot&atilde;o de Limpeza:</th>
<td><input type=reset name=cmdLimpar value=Limpar></td>
</tr>
<tr>
<th>Tipo File:</th>
<td><input type=file name=filArquivo></td>
</tr>
</table>
</form>
</body>
</html>

O browser fica:

Figura 1.26 - Formulrios, entrada de dados dos usurios.


Fonte: Elaborada pelo autor (2010).

b) Elemento select
O elemento select trata-se de uma lista de itens que podem ser
selecionados pelo usurio. Esta seleo pode se dar de forma nica
ou mltipla, dependendo dos atributos que o elemento possa ter.

Unidade 1

linguagem_de_programacao_III.indb 65

65

04/02/11 11:14

Universidade do Sul de Santa Catarina

name - atributo nome do elemento.


size - atributo representa a quantidade de linhas que a
lista mostrar.
multiple - define o tipo de seleo da lista. Caso este
atributo esteja presente, a lista ter seleo mltipla.
option - esta tag representa a lista propriamente dita.
Define cada opo da lista, as opes devem ser definidas
entre as tags <option></option.
selected - indica que a opo estar selecionada como
default. Este atributo usado na tag option.

<html>
<head>
<title>Teste formulrio select</title>
</head>
<body>
<form method=get name=formulario action=processa.asp>
<table>
<tr>
<th>Quais as linguagens voc j viu?</th>
<td><select name=linguagens size=5 multiple>
<option>CSS</option>
<option selected>HTML</option>
<option>XHTML</option>
<option>Javascript</option>
<option>Flash Action Script</option>
<option>Microsoft Silverlight</option>
<option>PHP</option>
<option>ASP</option>
<option>.NET</option>
<option>CGI, Perl</option>
<option>Java, J2EE, WebObjects</option>
<option>Python, Django</option>
<option>Ruby, Ruby on Rails</option>
<option>Smalltalk Seaside</option>
<option>ColdFusion</option>

66

linguagem_de_programacao_III.indb 66

04/02/11 11:14

Linguagens de Programao III

</select>
</tr>
<tr>
<th>Qual seu estado civil</th>
<td><select name=estadoCivil>
<option>Casado</option>
<option selected>Solteiro</option>
<option>Divorciado</option>
<option>Vivo</option>
</select></td>
</tr>
</table>
</form>
</body>
</html>

O browser aparecer da seguinte forma:

Figura 1.27 Elemento select (combobox).


Fonte: Elaborada pelo autor (2010).

Unidade 1

linguagem_de_programacao_III.indb 67

67

04/02/11 11:14

Universidade do Sul de Santa Catarina

a) Elemento textarea
Trata-se de uma caixa de texto para serem digitadas vrias linhas
de dados. Este tipo de elemento utilizado quando o usurio
necessita digitar um grande volume de informao. Normalmente
com vrias linhas de texto. Os principais atributos so:

name - atributo nome do elemento.

rows - nmero de linhas da caixa de texto.

cols - nmero de colunas da caixa de texto.

texto - define o texto que aparecer como default.

<html>
<head>
<title>Formul&aacute;rio TextArea</title>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1>
</head>
<body>
<table>
<tr>
<th>Digite seu coment&aacute;rio</th>
<td><textarea name=comentario rows=10 cols=30>Pode digitar
aqui!</textarea></td>
</tr>
<tr>
<td><input type=submit name=enviar value=Enviar></td>
<td><input type=reset name=limpar value=Limpar></td>
</tr>
</table>
</body>
</html>

O browser interpretar da seguinte forma:

68

linguagem_de_programacao_III.indb 68

04/02/11 11:14

Linguagens de Programao III

Figura 1.28 - Elemento de rea de texto.


Fonte: Elaborada pelo autor (2010).

Voc pode relembrar alguns dos elementos do HTML. Estes


elementos so fundamentais para um bom entendimento de
como o desenvolvimento da aplicao realizada e como pode ser
controlada.
O HTML exposto nesta seo descreveu diversos
elementos nos quais voc utilizar durante o curso.
Pesquise e aprofunde seus conhecimentos buscando
mais elementos e atributos que possam auxili-lo no
desenvolvimento.

Unidade 1

linguagem_de_programacao_III.indb 69

69

04/02/11 11:14

Universidade do Sul de Santa Catarina

Seo 4 Integrao de linguagens


As aplicaes Web possuem um alto nvel de integrao entre as
linguagens, uma vez que a plataforma em que desenvolvida no
proporciona todas as facilidades e ferramentas para que possamos
construir uma soluo amigvel.
Quando falamos de integrao, entenda que nos
referimos troca de informaes entre uma linguagem
e outra por meio de tecnologias disponveis.

Vamos tentar entender desta forma. Via de regra, linguagens no


conversam entre si. Para superar esse obstculo, possvel utilizar
alguns artifcios para que possamos alcanar os objetivos.
Como j vimos, o HTML a linguagem utilizada para que
o browser interprete os dados de uma forma padronizada e
formatada. Vimos ainda que as linguagens server-side so
responsveis por processar as informaes provenientes do
HTML. Ento, como podemos resgatar as informaes de um
servidor e escrever de forma dinmica?
Basicamente existem duas formas de enviar informaes para o
servidor via HTML. So os mtodos GET e POST.
a) Mtodo GET
O mtodo GET usado quando, no endereo da pgina Web,
informaes so encapsuladas para serem lidas pelo servidor. Este
encapsulamento pode ser feito de duas formas: escrita da url e
por formulrios.
Quando voc utiliza o mtodo GET no formulrio HTML,
toda a informao contida no bloco form enviada pela url. Para
utilizar, basta colocar na tag form o atributo method=GET e
automaticamente ser processado desta forma.
Usando de uma forma prtica, teramos o seguinte formulrio
HTML:

70

linguagem_de_programacao_III.indb 70

04/02/11 11:14

Linguagens de Programao III

<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1 />
<title>Mtodo Get</title>
</head>
<body>
<form action=Dadosget.asp method=get name=form1>
<table>
<tr>
<th>Marca :</th>
<td><input name=marca type=text id=marca value=/></td>
</tr>
<tr>
<th> Modelo:</th>
<td><input name=modelo type=text id=modelo value=/></
td>
</tr>
<tr>
<th> Combustvel :</th>
<td><input name=combustivel type=text id=combustivel
value=/></td>
</tr>
<tr>
<th> Cor :</th>
<td><input name=cor type=text id=cor value=/></td>
</tr>
<tr>
<th> Ano : </th>
<td><input name=ano type=text id=ano value= size=4 /></
td>
</tr>
<tr>
<td><input name=enviar type=submit id=enviar value=enviar
/></td>
<td><input name=limpar type=reset id=limpar value=limpar
/></td>
</tr>
</table>
</form>
</body>
</html>

Unidade 1

linguagem_de_programacao_III.indb 71

71

04/02/11 11:14

Universidade do Sul de Santa Catarina

Repare que est sendo enviado para um arquivo de


processamento ASP chamado Dadosget.asp. Neste arquivo onde
se trabalha a diferena de requisio do formulrio. Portanto,
teramos o seguinte cdigo:
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1 />
<title>Processamento dados GET</title>
</head>
<body>
<h2> Dados do Automvel: </h2>
<% Response.Write Marca : &Request.querystring(marca) %><br>
<% Response.Write Modelo : &Request.querystring(modelo)
%><br>
<% Response.Write Combustvel: &Request.querystring(combustivel)
%><br>
<% Response.Write Cor
: &Request.querystring(cor) %><br>
<% Response.Write Ano
: &Request.querystring(ano) %><br>
</body>
</html>

O comando Response.Write apenas escreve na pgina. J o


comando Request.querystring recupera a informao contida
nos campos do formulrio. Desta forma, temos um Request.
querystring para cada campo do formulrio que ser recuperado.
Ainda para ilustrar, voc pode perceber que a url montada com
os valores dos campos contidos no formulrio.

72

linguagem_de_programacao_III.indb 72

Figura 1.29 - Recuperao de dados por meio do mtodo GET.


Fonte: Elaborada pelo autor (2010).

04/02/11 11:14

Linguagens de Programao III

Outra forma de utilizar este mtodo escrever manualmente


na url quais so os parmetros que deseja. Este mtodo
normalmente utilizado nos links das pginas.
Quando voc digita o endereo <http://www.universia.
com.br/ead>, entrar no site da EaD da Universia.
Porm, se voc quer acessar uma notcia especfica,
deve acessar: <http://www.universia.com.br/ead/
materia.jsp?id=19065. Onde matria.jsp a pgina
onde possui o designer e a parte id=19065 est
transmitindo para o sistema que tem de recuperar a
notcia 19065, por exemplo.

Ateno!
Por usar a url como meio de comunicao, existe um
limite de caracteres a serem enviados. A url aceita 255
caracteres no total. Quando voc for usar o mtodo
GET, voc tem de levar em considerao o endereo da
pgina e as variveis que voc est transmitindo.

b) Mtodo POST
O segundo mtodo de transmisso de informaes para
o servidor do HTML o POST. Este mtodo realiza o
encapsulamento dos elementos do formulrio diretamente no
corpo da pgina. Isso significa que toda a informao contida no
formulrio enviada como se fizesse parte do HTML esttico da
pgina.
Ateno: este mtodo no pode ser escrito via url.
A forma de se acessar ele utilizando o elemento form
com o atributo method=POST.

Utilizando o mesmo formulrio HTML do exemplo anterior,


possvel demonstrar verificar que no se deve utilizar a mesma
forma para ler um formulrio submetido via mtodo post.

Unidade 1

linguagem_de_programacao_III.indb 73

73

04/02/11 11:14

Universidade do Sul de Santa Catarina

<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1 />
<title>Processamento dados Post</title>
</head>
<body>
<h2> Dados do Automvel: </h2>
<% Response.Write Marca : &Request.Form(marca) %><br>
<% Response.Write Modelo : &Request.Form(modelo) %><br>
<% Response.Write Combustvel: &Request.Form(combustivel)
%><br>
<% Response.Write Cor
: &Request.Form(cor) %><br>
<% Response.Write Ano
: &Request.Form(ano) %><br>
</body>
</html>

Veja que agora se altera o comando para recuperao da


informao, mas a estrutura a mesma. Perceba que agora a url
no possui parmetros algum. Toda a informao est contida no
corpo do HTML.
Conter dois comandos distintos para recuperar as informaes do
formulrio um padro entre as linguagens.
Agora que enviamos os dados para o servidor podemos processar
o retorno da informao. Normalmente esse retorno est
associado a uma busca no banco de dados e a aplicao das regras
de negcio sobre essa informao. Quando se envia o resultado,
podemos utilizar a forma mais bsica para interagir as linguagens
Server-side com as Client-side: as linguagens Server-side escrevem
as linguagens Client-side.
Como as linguagens Server-side so executadas no servidor,
elas so processadas antes que a informao chegue ao browser.
Assim, tm-se as respostas prontas para serem formatas conforme
a necessidade e possibilitando a adequao das linguagens Clientside como o HTML e Javascript.

74

linguagem_de_programacao_III.indb 74

04/02/11 11:14

Linguagens de Programao III

Ateno!
Todo o browser possui um tempo de espera da
resposta do servidor. Quando um processamento no
servidor for muito demorado, o browser interpretar
que a conexo com o servidor no existe mais e no
receber resposta. Assim sua aplicao ir gerar um
erro pelo simples fato de estar com um processamento
muito elevado.

A tecnologia est sempre em constantes alteraes e inovaes.


Procure pesquisar e manter-se atualizado sobre as novas
tendncias que esto surgindo.

Sntese
Durante esta unidade voc viu como possvel identificar
uma aplicao Web e como ela trabalha conceitualmente.
Voc estudou sobre a importncia do HTML e como utilizar
formulrios e seus atributos.
Percebeu que, apesar de o HTML ser uma linguagem simples,
possui diversas opes que apresentam variaes significativas.
Para finalizar, voc viu ainda que existem diversas linguagens
disponveis para o seu aprendizado, mas todas compartilham dos
mesmos conceitos aqui vistos.

Unidade 1

linguagem_de_programacao_III.indb 75

75

04/02/11 11:14

Universidade do Sul de Santa Catarina

Atividades de autoavaliao
Ao final de cada unidade, voc ser provocado a realizar atividades de
autoavaliao. O gabarito est disponvel no final do livro-didtico. Mas se
esforce para resolver as atividades sem ajuda do gabarito, pois assim voc
estar estimulando a sua aprendizagem.
1) Voc viu diversas utilidades para as aplicaes Web. Cite e comente
duas vantagens e duas desvantagens de uma aplicao Webtop.

2) As aplicaes Web possuem diversas linguagens que podem ser


classificadas como Server-side e client-side. Com base nesta afirmao,
enumere a segunda coluna de acordo com a primeira.
1 Linguagem Server-side

( )

PostgreSQL

2 Linguagem Client-side

( )

HTML

( )

Oracle

( )

SQLite

( )

Javascript

( )

Microsoft Silverlight

( )

PHP

( )

MySQL

( )

ASP

( )

DB2

( )

.NET

( )

CGI

( )

Perl

( )

Java

76

linguagem_de_programacao_III.indb 76

04/02/11 11:14

Linguagem de Programao III

( )

CSS

( )

Python

( )

Microsoft SQL Server

( )

Ruby

( )

Firebird

( )

ColdFusion

( )

Websphere

( )

Flash

3) Voc viu a importncia do HTML e como ele necessrio para o


desenvolvimento Web. Viu tambm como existem diversos atributos
que manipulam aparncia e em alguns casos os dados que existem
neles. Qual o limite de atributos que podemos utilizar em cada tag?

Saiba mais
Se voc desejar, aprofunde os contedos estudados nesta unidade
ao consultar as seguintes referncias:
W3Schools. W3Schools Online Web Tutorials, 2010.
Disponvel em: <www.w3schools.com/>. Acesso em: 01 mar.
2010.
W3C. World Wide Web Consortium, 2010. Disponvel em:
<www.w3.org/>. Acesso em: 2 mar. 2010.

77

linguagem_de_programacao_III.indb 77

04/02/11 11:14

linguagem_de_programacao_III.indb 78

04/02/11 11:14

unidade 2

JavaScript
Objetivos de aprendizagem
Ao final do estudo desta unidade, importante que voc:

Identifique os elementos do Javascript.

Compreenda a sintaxe da linguagem.

Conhea os principais comandos do Javascript.

Sees de estudo

linguagem_de_programacao_III.indb 79

Seo 1

JavaScript aplicado

Seo 2

Tipos de dados

Seo 3

Elementos de linguagem

Seo 4

Scripts JS

04/02/11 11:14

Universidade do Sul de Santa Catarina

Para incio de estudo


A linguagem JavaScript possui a caracterstica de ser clientside, ou seja, o browser se encarrega de interpretar seu cdigo.
Por causa disso, existem ligeiras diferenas nesta interpretao.
A linguagem a mesma para qualquer browser, porm as
aes dos browsers divergem um pouco uma das outras. Essas
divergncias proporcionam chamadas de eventos distintas, alm
de interpretaes de aes diferenciadas como a captura das aes
de teclas.
O JavaScript uma linguagem simples, porm extremamente
poderosa. Foi concebida inicialmente pela Netscape e teve forte
colaborao da Sun Microsystems, empresa responsvel pela
linguagem Java. Existe uma discusso sobre o JavaScript ser ou
no orientada a objetos. A prtica mostra que ele possui acesso
e comportamento de uma linguagem orientada a objetos. Mas
esses recursos so limitados e sua programao feita de forma
estruturada acessando, quando necessrios, os recursos de
orientao a objetos.
Essa linguagem amplamente conhecida e divulgada como
JavaScript, j a verso produzida pela Microsoft foi concebido
o nome de JScript. Porm, tratam-se de implementaes que
sendo fiis norma ECMAScript lhe acrescentaram novas
funcionalidades teis, mas respeitando sempre as especificaes
oficiais.
Vale lembrar que JavaScript no Java e que a grande semelhana
consiste apenas nome.

Seo 1 JavaScript aplicado


O JavaScript trabalha com os elementos do HTML de forma a
conceitu-los como objetos a serem acessados. Assim todos os
elementos existentes em uma pgina Web so transformados
80

linguagem_de_programacao_III.indb 80

04/02/11 11:14

Linguagens de Programao III

em objetos pelo JavaScript. Internamente so criados objetos


que permitem aos usurios criarem novos objetos dependo da
necessidade. Durante o carregamento da pgina, o JavaScript cria
os objetos em uso com suas respectivas propriedades e valores que
so ajustados pelo contedo da prpria pgina.
Qualquer objeto JavaScript possui uma hierarquia que deve ser
respeitada. Cada propriedade pode ser acessada descrevendo toda
a hierarquia que se segue.

Figura 2.1 - Hierarquia dos objetos do Javascript.


Fonte: JavaScript aplicaes interativas para a Web (2006).

A figura 1 representa a hierarquia de objetos do JavaScript.


Veja que vrios objetos so filhos de outros, e para acessar o filho
temos de escrever todo o caminho a ser percorrido at ele. Assim,
se desejamos acessar a propriedade form, devemos primeiramente
acessar o objeto document separando-os por ponto:
document.form

Esta forma hierrquica de chamadas dos objetos HTML so


sempre utilizadas no JavaScript. Assim como as chamadas dos
mtodos de cada objeto.
O JavaScript permite omitir o objeto window, uma vez
que considera todos os objetos da pgina esto abaixo
desse objeto. Assim, o exemplo anterior pode ser
escrito como: document.form.
Unidade 2

linguagem_de_programacao_III.indb 81

81

04/02/11 11:14

Universidade do Sul de Santa Catarina

Todo o objeto do JavaScript possui caractersticas que podem


ser manipuladas. A essas caractersticas damos o nome de
propriedades. Podemos dizer ento que o objeto form uma
propriedade do objeto document. Assim como esse mesmo objeto
document possui outras propriedades que no so objetos como a
propriedade title.
Alm das propriedades, existe mais um conjunto de atribuies
que so denominados de mtodos. Cada mtodo est associado
a um objeto existente no documento fazendo parte do seu escopo
de atuao.
Mtodos so funes predefinidas pela linguagem
para executar uma operao especfica. Caso
necessitamos que algo seja escrito em um documento,
podemos utilizar um mtodo para exibir um texto
qualquer.

Ateno!
Nunca utilize mtodos em objetos que no o
contenham, caso contrrio causar erro no script.

Os mtodos so usados comumente para alterar o valor de


uma propriedade ou executar tarefas distintas. A sintaxe
representada da seguinte forma:
nomeObjeto.metodo(argumento)

Vale ressaltar que o argumento pode ser opcional ou obrigatrio,


dependendo do mtodo associado ao objeto.
Com essas informaes, voc sabe como formada a linguagem,
como o JavaScript foi construdo. Assim, podemos sempre ter em
mente que qualquer algoritmo desenvolvido sobre essa linguagem
dever sempre respeitar esses padres.
O JavaScript pode ser escrito de duas formas: embutida no
cdigo HTML ou em um arquivo externo com a extenso js.

82

linguagem_de_programacao_III.indb 82

04/02/11 11:14

Linguagens de Programao III

Ambas as formas no alteram a sintaxe da linguagem. Porm,


a forma que feita a referncia necessita de cuidado especial.
Quando est embutida no cdigo, devemos utilizar as tags script
da seguinte forma:
<html>
<head>
<title>Teste</title>
<script language=javascript type=text/javascript>
()
</script>
</head>
<body>
(...)
</body>
</html>

Os atributos language e type no necessitam estar discriminados


na tag script, porm a especificao tcnica que foi construda pela
ECMAScript recomenda o seu uso.
Quando queremos utilizar um arquivo externo, a tag scritpt
recebe um novo atributo. Esse atributo onde indicamos o local
e o nome do arquivo JS. Quanto ao arquivo, basta escrever o
JavaScript normalmente. Veja a seguir:

Este padro o oficial


reconhecido pelas
indstrias.

<html>
<head>
<title>Teste</title>
<script language=javascript type=text/javascript src=tetse.js>
</script>
</head>
<body>
...
</body>
</html>

Perceba que, quando chamamos um arquivo externo, a tag


no pode conter um script. Caso seja necessrio, basta abrir
uma segunda tag script e escrever o cdigo. A tag script pode
ser escrita em qualquer parte do cdigo, porm aconselhvel
Unidade 2

linguagem_de_programacao_III.indb 83

83

04/02/11 11:14

Universidade do Sul de Santa Catarina

utilizar antes do corpo da pgina, j que existem formas de


realizar as chamadas JavaScript antes do carregamento total da
pgina. Desta forma ocorrer um erro caso a chamada venha
antes da escrita da funo.
Uma prtica que os desenvolvedores utilizam para auxiliar na
documentao do cdigo em qualquer software o uso dos
comentrios de cdigo. Esse tipo de declarao normalmente
feita por meio de comandos especiais em que a linguagem
permite que o desenvolvedor adicione qualquer tipo de
informao indicado ao interpretador do programa que deve
ignorar qualquer tipo de instruo contida. Assim, o JavaScript,
como as demais linguagens, permite que seja comentado todo o
cdigo que produzimos, tornando-o mais legvel e mais fcil de
mant-lo. Um comentrio adequado do cdigo que voc produz
torna mais fcil realizar alteraes e melhorias mais tarde.
O compartilhamento de cdigos (muito comum no
desenvolvimento Web) com outras pessoas torna os comentrios
ainda mais importantes para que os outros entendam aquilo que
voc escreveu.
Em JavaScript podemos usar comentrios de linha e
comentrios de bloco. Os comentrios de linha comeam com
os caracteres //. Isso d ao interpretador de JavaScript a indicao
de que o resto da linha um comentrio. Deste modo, este
ignora o resto da linha, continuando a interpretar o cdigo na
linha seguinte.
Um comentrio de bloco inicia com a abertura do bloco por
meio do comando /* e continua at ser encontrada a sequncia de
caracteres */, que marcam o fim do comentrio. Ao encontrar a
sequncia /*, o interpretador de JavaScript procura imediatamente
a sequncia de finalizao */, continuando a a interpretao do
cdigo e ignorando o que est no meio.
A seguir esto alguns exemplos de comentrios em JavaScript.

84

linguagem_de_programacao_III.indb 84

04/02/11 11:14

Linguagens de Programao III

// Comentrio de linha
/* Comentrio de bloco, mas apenas utilizando uma linha */
/*
Comentrio de bloco utilizando vrias linhas. Qualquer comando escrito
dentro do bloco ignorado pelo interpretador. Inclusive o comando de
abertura de bloco /* ou ainda o comentrio de linha //
Todas as informaes so ignoradas.
*/

Os blocos no so exclusividade dos comentrios. Eles so


encontrados em diversos comandos do JavaScrpt. Os blocos
so encontrados nos laos de deciso e repetio. Ainda so
encontrados nas funes para delimitar seu contedo. Isso se
consegue colocando-as entre chaves ({ }).
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Exemplo de bloco</title>
</head>
<script language=javascript type=text/javascript>
function fatorial(valor) {
if (valor<2) return valor;
return valor*fatorial(valor-1);
}
function controlador(vl_valor) {
return document.form.txt_fatorial.value=fatorial(vl_valor);
}
</script>
<body>
<form name=form id=form action= method=get>
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td> Digite um valor inteiro e positivo</td>
<td><input type=text name=txt_valor id=txt_valor value=
/></td>
</tr>
<tr>

Unidade 2

linguagem_de_programacao_III.indb 85

85

04/02/11 11:14

Universidade do Sul de Santa Catarina

<td colspan=2 align=center><input type=button


name=btn_calcular id=btn_calcular value=Calcular
onclick=controlador(document.form.txt_valor.value) /></td>
</tr>
<tr>
<td> Fatorial</td>
<td><input type=text name=txt_fatorial id=txt_fatorial value=
readonly=readonly/>
<td>
</tr>
</table>
</form>
</body>
</html>

Veja que nesse exemplo as funes esto delimitadas por blocos e


seu contedo interno fica restrito ao bloco.

Seo 2 Tipos de dados


Assim como outras linguagens, o JavaScript possui uma
padronizao quanto aos tipos de objetos. Podemos relacionar os
tipos: numrico, lgico, caractere.
O tipo caractere pode ser chamado tambm como string.
Representa uma sequncia de caracteres, podendo esta ser
qualquer caractere (pontuao, smbolo, nmeros, letras etc.).
O seu limite de contedo depender do navegador que est
interpretando. Os seus valores so delimitados por aspas simples
ou duplas. Exemplo: texto ou texto.
Toda a atribuio realizada a uma varivel contendo uma String
contm internamente na linguagem a herana do objeto String.
Isso significa que essa varivel tem um comportamento da uma
instncia do objeto String, esto aptas a utilizar as propriedades e
os seus mtodos.

86

linguagem_de_programacao_III.indb 86

04/02/11 11:14

Linguagens de Programao III

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Exemplo de String</title>
</head>
<script language=javascript type=text/javascript>
var str = Teste de string!;
document.write(Escreve o texto da varivel: );
document.write(str);
document.write(<br>);
document.write(Escreve uma parte do contedo da varivel: );
document.write(str.substr(9,6));
</script>
<body>
</body>
</html>

Veja que no exemplo anterior est sendo utilizada uma funo


chamada write. Essa funo escreve no HTML alguma
informao. A varivel str est sendo atribuda com um valor
de caractere. Com isso, ela herda os mtodos da classe String e
podemos utilizar o mtodo substr, que recupera um pedao de
uma string. O resultado no browser :

Figura 2.2 - Exemplo de string.


Fonte: Elaborada pelo autor (2010).

Essa caracterstica se assemelha e muito com o mtodo de


orientao a objetos. Porm, no se pode considerar uma
Unidade 2

linguagem_de_programacao_III.indb 87

87

04/02/11 11:14

Universidade do Sul de Santa Catarina

linguagem orientanda a objetos, j que no obrigatria sua


construo nessa metodologia.
Outro tipo de dados de suma importncia so os numricos.
Esse tipo de dado armazena valores, tanto inteiros como ponto
flutuante (decimal).

23

2e10

3.98733

8990.09889

0.0999898

Os valores numricos so utilizados normalmente em operaes


aritmticas (adio, subtrao, multiplicao e diviso). Podendo
estarem sendo utilizados em laos de deciso e repetio.
O JavaScript possui uma boa quantidade de funes
para manipulao de valores numricos, como funes
trigonomtricas, funes de arredondamento e exponencial,
funes de transformao de tipos, entre outras.
Existem alguns valores numricos especiais, so eles:

NaN o valor NaN, nos tipos de dados numricos,


a abreviao de Not a Number (No um Nmero).
O JavaScript apura esse valor normalmente quando
ocorre alguma operao invlida com o tipo de dados
numricos. Um exemplo clssico o resultado da
operao (0/0), resultar no NaN.
Infinity: representa um valor infinito, podendo ser tanto
positivo quanto negativo. Todas as operaes com valores
infinitos resultaro em um valor infinito, exceto diviso e
subtrao que resultar no NaN.

88

linguagem_de_programacao_III.indb 88

04/02/11 11:14

Linguagens de Programao III

O JavaScript ainda possui outros tipos de dados, como: Lgicos,


Null e Undefined.

Lgicos: os valores lgicos podem assumir dois


valores, true (verdadeiro) e false (falso). So utilizados
normalmente como controle de deciso.
Null: este tipo de dado um valor especial, representa
um objeto nulo, no deve ser confundido com uma
varivel no inicializada, pois o valor null existe.
Portanto, uma varivel com o contedo null existe em
memria, referenciando este objeto especial.
Undefined: o valor undefined significa que a varivel
no foi instanciada, ou seja, no foi atribuda um valor.
Inicialmente todas as variveis se encontram neste
estado.

Seo 3 Elementos de linguagem


Embora JavaScript tenha algumas semelhanas com outras
linguagens, ele uma linguagem diferenciada em alguns
aspectos. O JS possui variveis, operadores l gicos, operadores
aritmticos, laos de repetio, laos de deciso, entre outros.
Nesta seo, abordaremos com mais detalhes alguns desses
aspectos.

a) Variveis
As variveis no JavaSscript podem ser de dois tipos: variveis
globais e variveis locais. Ambas podem suportar quaisquer
tipos de valores. Porm, o que diferencia o escopo e a forma de
declarao da varivel.
A varivel local para ser declarada deve ser antec edida pela
palavra reservada var. Essa declarao pode ser feita a qualquer
Unidade 2

linguagem_de_programacao_III.indb 89

89

04/02/11 11:14

Universidade do Sul de Santa Catarina

momento dentro de uma funo e poder ser acessada somente


dentro dela:
var nome;
var ano=2009;

Ao tentar acessar uma varivel local fora da funo em que ela


foi declarada, ser gerado um erro porque a varivel s existe
no universo da funo que foi declarada. Essa varivel no faz
parte do mundo exterior a essa funo e como tal no pode ser
utilizada.
A varivel global deve ser antecedida pela palavra reservada var
ou receber uma atribuio de valor. O seu escopo acessvel em
toda a pgina, sendo que no transmitida de uma pgina para
outra.
As variveis podem ser declaradas da seguinte forma:
valor = 19;
var numero = 3;
fruta = Morango;
var fruta2 = Banana;
pi = 3.14159;

Nesses exemplos podemos considerar que todas as variveis


declaradas sero variveis globais. Como j vimos, para declarar
variveis cuja existncia se limita a uma pequena seo do cdigo
(varivel local) teremos de usar a declarao var, assim: var
numero = 3.
Caso usemos essa declarao fora de qualquer funo, isto ,
a varivel declarada na base da estrutura de cdigo, ela ser
global. Temos assim que a declarao var serve para limitar o
contexto em que a varivel existe e que:

as variveis declaradas sem a declarao var so variveis


globais;
as variveis declaradas usando a declarao var existem
apenas no contexto em que foram definidas.

90

linguagem_de_programacao_III.indb 90

04/02/11 11:14

Linguagens de Programao III

Antes de comear a escrever cdigo em JavaScript, importante


planejar o modo como este ser organizado. Deve-se comear a
identificar os dados que sero utilizados. A seguir escolhem-se os
nomes das variveis que guardaro esses dados e s depois que
se comea a escrever o cdigo propriamente dito.
Alm do seu escopo, algumas regras quanto ao nome devem ser
respeitadas para que o interpretador possa trabalhar livremente:

todos os nomes tm de comear com uma letra ou com o


caractere;
os restantes caracteres que compem o nome podem
igualmente conter nmeros. Nunca se esquea que para
o JavaScript letra maiscula e letra minscula so coisas
diferentes e que, por exemplo, as variveis variavel1,
Variavel1 e vaRiavel1 so trs objetos distintos.

Muitas vezes nos deparamos com a necessidade de escrever


algum caractere dentro de uma String, mas seu uso reservado
como o caso das aspas. Para isso, utiliza-se a contrabarra dentro
da string. Isso indica para o browser que a sua utilizao faz parte
da string, e no um smbolo de comando.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Exemplo de String</title>
</head>
<script language=javascript type=text/javascript>
var str = O texto contm \aspas duplas\ e aspas simples\;
document.write(Verificando o caso das \aspas\<br>);
document.write(str);
</script>
<body>
</body>
</html>

Voc pode notar que somente obrigatrio o uso da contrabarra


quando o interpretador pode confundir o trmino de uma string.
Unidade 2

linguagem_de_programacao_III.indb 91

91

04/02/11 11:14

Universidade do Sul de Santa Catarina

Veja que a string est delimitada por aspas duplas e quando


utilizada aspas simples dentro da string o uso da contrabarra
opcional. Desta forma, o browser interpretar o comando.

Fig ura 2.3 - Exemplo de contrabarra.


Fonte: Elaborada pelo autor (2010).

Assim como outras linguagens, o Javascript necessita de alguns


caracteres especiais para poder armazenar ou imprimir alguma
informao que tenha conflito com sua linguagem. Veja o quadro
a seguir:
Tabela 2 Referente a caracteres especiais.
Caractere
Descrio
\n
Insere uma quebra de linha.
\t
Insere uma tabulao.
\r
Insere um retorno.
\f
Insere um caractere de barra.
\t
Tabulao.
\
Apstrofo.
\
Aspas.
\\
Barra invertida.
\XXX

Caractere representado pela codificao Latin-1. Exemplo


\251 representa o caractere de copyright .

Fonte: Javascript aplicaes interativas para a Web (2006).

Representado os cdigos dentro de um script teramos:

92

linguagem_de_programacao_III.indb 92

04/02/11 11:14

Linguagens de Programao III

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://


www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Exemplo de contra-barra</title>
</head>
<body>
<script language=javascript type=text/javascript>
var str=;
str+=Teste de\bbackspace\n;// - Representa o backspace (caracter ascii 8)
str+=Tabulao entre\ttextos\n;// - Tabulao (caracter ascii 9)
str+=quebra de \r pargrafo\n;// Quebra de pargrafo (caracter ascii 13)
str+=quebra de\nlinha\n;// Quebra de linha (caracter ascii 10)
str+=tabilao\vvertical\n
;// - Tabulao
vertical (caracter ascii 11)
str+=Caracter unicode \u0198\n;// - Caracter unicode (NNNN representa
um valor hexadecimal de 0000 a FFFF)
str+=Caracter Asc \x28\n;// - Caracter ascii (NN representa um valor
hexadecimal de 00 a FF)
str+=Teste de \apstrofo\\n;// - Apstrofo
str+=Teste de \aspas\\n;// - Aspas
str+=Teste de \\barra inversa\n;// - Barra inversa
alert(str);
</script>
</body>
</html>

O browser interpretar da seguinte forma:

Unidade 2

linguagem_de_programacao_III.indb 93

93

04/02/11 11:14

Universidade do Sul de Santa Catarina

Figura 2.4 Exemplo do uso de caracteres especiais.


Fonte: Elaborada pelo autor (2010)

Perceba que a interpretao dos comandos depende no somente


do JavaScript mas do meio que ir ler. Um exemplo seria a quebra
de linha: para o JavaScript, a quebra de linha o caractere \n,
porm para o browser isso s pode ocorrer por meio do HTML
por meio da tag <BR>. Assim como o comando \r, o JavaScript
no possui quebra de pargrafo, e no faz sua interpretao.
Porm, um comando padro para diversos editores de texto
conseguirem identificar essa quebra.
Ao se trabalhar com variveis, acaba sendo inevitvel
demandar uma ateno especial converso de valores para que
determinado valor tenha um comportamento mais adequado
ao seu cdigo, apesar de o JavaScript exigir pouco trabalho ao
desenvolvedor para definir o tipo de dados que uma varivel deve
guardar. Acaba sendo o prprio interpretador de JavaScript que
decide o tipo de dados que a varivel ser. Assim, se escrever:
var nota = 9;

O interpretador decidir guardar internamente a varivel nota


como um nmero inteiro, mas se escrevermos:
var nota = 9;

94

linguagem_de_programacao_III.indb 94

04/02/11 11:14

Linguagens de Programao III

nota = O JavaScript necessita de ateno.;

Quando o interpretador l a segunda linha de cdigo mudar


o tipo de dado da varivel e a varivel nota deixar de
ser armazenada como um nmero inteiro. Ela passa a ser
armazenada como uma String.
Essa converso no tipo da varivel acontece de forma automtica e o
desenvolvedor no precisa fazer nada para que ela acontea.
Essa liberdade serve apenas para simplificar a escrita do cdigo.
Quando mal utilizada, ela pode dar origem a cdigo difcil
de ler e a erros. As regras de boa programao dizem que ao
definir uma varivel o desenvolvedor deve decidir qual o tipo
de dados que esta conter e no dever escrever cdigo que
provoque uma converso no tipo de dados que a varivel guarda.
Sempre que uma converso for necessria dever ser definida uma
nova varivel para guardar o resultado da converso, mantendo
inalterados os tipos das variveis antigas.
As variveis podem receber diversos tipos de dados. Na prtica
esses dados so convertidos em objetos pelo interpretador do
JavaScript. Portanto, quando voc define uma varivel do tipo
string, o interpretador considerar que essa varivel contm um
objeto string. Essa converso proporciona o acesso a diversos
mtodos especficos para cada tipo de dados a ser atribudo.
Um objeto muito comum na orientao a objetos o this. O
objeto this pode ser considerado como coringa. Ele representa o
objeto atual de trabalho. Normalmente utilizado no JavaScript
para referenciar os argumentos dentro das funes. Ele representa
o prprio objeto em que usado. Esse objeto pode ser uma
funo, uma ligao de hipertexto, uma imagem etc.

Unidade 2

linguagem_de_programacao_III.indb 95

95

04/02/11 11:14

Universidade do Sul de Santa Catarina

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Exemplo Objeto This</title>
</head>
<script type=text/javascript language=javascript>
function testedeobjetos(objeto) {
alert(Atributo Type: +objeto.type+\nAtributo Name: +objeto.
name+\nAtributo Value: +objeto.value);
}
</script>
<body>
<h1>Ao sair do campo ir emitir um alerta informando alguns atributos
de cada campo</h1>
<form name=form method=get>
Cdigo:&nbsp;<input name=txt_codigo type=text value=
onblur=testedeobjetos(this) /><br />
Nome:&nbsp;<input name=txt_nome type=text value=
onblur=testedeobjetos(this) /><br />
Endereo:&nbsp;<input name=txt_endereco type=text value=
onblur=testedeobjetos(this) /><br />
Complemento:&nbsp;<input name=txt_complemento type=text
value= onblur=testedeobjetos(this) /><br />
</form>
</body>
</html>

Observe que o cdigo de chamada da funo no se altera. O


objeto this assume por referncia o objeto padro de chamada. No
caso do exemplo, a cada chamada ele assume a tag input como
sendo o elemento base ao qual est se trabalhando. Quando se
altera o objeto, altera o valor representativo do this.

96

linguagem_de_programacao_III.indb 96

04/02/11 11:14

Linguagens de Programao III

Figura 2.5 - Exemplo do objeto this.


Fonte: Elaborada pelo autor (2010)

O objeto string possui mtodos que podem ser utilizados em


diversas situaes e auxiliam o desenvolvimento das aplicaes.
Mtodo

Descrio

charAt(ndice)

Devolve o caractere que ocupa a posio


ndice na string.

charCodeAt(ndice)

Devolve o cdigo (conjunto Unicode) do


caractere que ocupa a posio ndice na
string.

indexOf(string_
busca, ndice_
opcional)

Devolve a posio em que se encontra


a primeira ocorrncia de string_busca
ou -1 se essa ocorrncia no existir. Se
no fornecermos um ndice_opcional, a
busca inicia-se na posio zero, mas se o
fornecermos nesse ponto que se inicia a
busca.

lastIndexOf(string_
busca, ndice_
opcional)

Devolve a posio em que se encontra a


ltima ocorrncia de string_busca ou -1 se
essa ocorrncia no existir. A busca faz-se a
partir do fim e caminha progressivamente
para o incio. Se no fornecermos um ndice_
opcional, a busca inicia-se no fim, mas se o
fornecermos nesse ponto que se inicia a
busca.

Unidade 2

linguagem_de_programacao_III.indb 97

97

04/02/11 11:14

Universidade do Sul de Santa Catarina

Mtodo

Descrio

split(string_separador,
limite_opcional)

Divide uma string em partes usando as


ocorrncias de string_separador como pontos
de diviso. Devolve um array com todas
as divises (substrings) encontradas. Cada
elemento do array uma substring da string
original. O limite_opcional indica o nmero
mximo de partes a incluir no array que
devolvido. A string_separador excluda das
divises e o objeto String sobre o qual foi
invocado este mtodo no sofre alteraes.

substring(incio, fim)

Devolve uma sesso da string composta pelos


caracteres que ocupam as posies com
ndices entre incio (includa) e fim (excluda).

toLowerCase()

Devolve uma verso da string com todos os


caracteres convertidos para letra pequena.

toUpperCase()

Devolve uma verso da string com todos os


caracteres convertidos para letra grande.

Fonte: JavaScript e HTML Dinmico (2007).

Toda a varivel do tipo string possui acesso aos mtodos descritos


e a alguns outros.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Exemplo Mtodos do objeto String</title>
</head>
<body>
<h3>Propriedade length</h3>
<script type=text/javascript>
var str=No h nada melhor que uma cervejinha gelada na sexta
noite.;

document.write(A String <b> + str + </b> possui );

98

linguagem_de_programacao_III.indb 98

04/02/11 11:14

Linguagens de Programao III

document.write(str.length+ caracteres);

</script>
<h3>Mtodo IndexOf</h3>
<h6>Este exemplo verifica se uma string (varivel de texto)
contm uma determinada palavra. Se a palavra for
encontrada ser indicada a posio em que foi localizado o seu
primeiro caractere.<br />
<b>Nota:</b> A posio do primeiro caractere da string 0, no 1. </
h6>
<script type=text/javascript>
var str=No h nada melhor que uma cervejinha gelada na sexta
noite.;

var pos=str.indexOf(cervejinha );

if (pos>=0) {


document.write(a palavra cervejinha foi encontrada na
posio: );

} else{

document.write(pos + <br>);

document.write(a palavra cervejinha no foi encontrada!);

</script>
<h3>Mtodo Match</h3>
<h6>Este exemplo verifica se uma palavra (que neste
caso gelada) est contida na string. Se estiver
ela ser devolvida.</h6>
<script type=text/javascript>
var str=No h nada melhor que uma cervejinha gelada na sexta
noite.;
document.write(str.match(gelada));
</script>
<h3> Mtodo substring</h3>

Unidade 2

linguagem_de_programacao_III.indb 99

99

04/02/11 11:14

Universidade do Sul de Santa Catarina

<script type=text/javascript>
var str=No h nada melhor que uma cervejinha gelada na sexta
noite.;

document.write(str.substring(27,31) = +str.substring(27,31));

document.write(<br>);

document.write(str.substring(27,36)=+str.substring(27,36));

</script>
<h3>Converte para Maiuscula e Minscula</h3>
<script type=text/javascript>

var str=Ol Pessoal do JavaScript!;

document.write(str.toLowerCase());

document.write(<br>);

document.write(str.toUpperCase());

</script>
</body>
</html>
Fonte: JavaScript e HTML Dinmico (2007).

Figura 2.6 - Propriedades e mtodos de strings.


Fonte: Elaborada pelo autor (2010).

100

linguagem_de_programacao_III.indb 100

04/02/11 11:14

Linguagens de Programao III

Alm do objeto string, o JavaScript oferece o objeto date. Esse


objeto possui a caracterstica de manipular datas e horas. A
definio de valores possvel utilizando valores numricos e
datas por extenso. Os mtodos atrelados a esse objeto so:
Mtodo

Descrio

getDate()

Devolve o dia do ms (de 1 a 31) que est guardado no


objeto Date.

getDay()

Devolve o dia da semana (de 0 = domingo at 6 =


sbado) guardado no objeto Date.

getMonth()

Devolve o ms (de 0 = janeiro at 11 = dezembro)


guardado no objeto Date.

getFullYear()

Devolve o valor completo do ano (quatro dgitos)


guardado no objeto Date.

getYear()

Devolve o valor incompleto do ano (apenas dois dgitos)


guardado no objeto Date. No use este mtodo, use
getFullYear em seu lugar.

getHours()

Devolve o valor da hora (de 0 a 23) guardada no objeto


Date.

getMinutes()

Devolve o valor dos minutos (de 0 a 59) guardados no


objeto Date.

getSeconds()

Devolve o valor dos segundos (de 0 a 59) guardados no


objeto Date.

getMilliseconds()

Devolve o valor dos milissegundos (de 0 a 999)


guardados no objeto Date.

getTime()

Devolve a quantidade de milissegundos decorridos


desde zero hora do dia 1 de janeiro de 1970 at a data
que est guardada no objeto Date.

getTimezoneOffset()

Devolve a diferena de tempo entre o fuso horrio do


computador que est a ser usado e o Tempo Mdio de
Greenwich (Greenwich Mean Time, ou GMT).

getUTCDate()

Devolve o dia do ms (de 1 a 31) guardado no objeto


Date medido no padro de tempo universal (UTC).

getUTCDay()

Devolve o dia da semana (de 0 a 6) guardado no objeto


Date medido no padro de tempo universal (UTC).

getUTCMonth()

Devolve o valor do ms (de 0 a 11) guardado no objeto


Date medido no padro de tempo universal (UTC).

getUTCFullYear()

Devolve o valor completo do ano (com quatro dgitos)


guardado no objeto Date medido no padro de tempo
universal (UTC).

Unidade 2

linguagem_de_programacao_III.indb 101

101

04/02/11 11:14

Universidade do Sul de Santa Catarina

Mtodo

Descrio

getUTCHours()

Devolve a hora (de 0 a 23) guardada no objeto Date


medida no padro de tempo universal (UTC).

getUTCMinutes()

Devolve o valor dos minutos (de 0 a 59) guardados no


objeto Date medidos no padro de tempo universal
(UTC).

getUTCSeconds()

Devolve o valor dos segundos (de 0 a 59) guardados


no objeto Date medidos no padro de tempo universal
(UTC).

getUTCMilliseconds()

Devolve o valor dos milissegundos (de 0 a 999)


guardados no objeto Date medidos no padro de
tempo universal (UTC).

setDate(dia_ms)

Acerta o valor do dia (de 1 a 31) do ms guardado no


objeto Date.

setFullYear(ano)

Acerta o valor do ano (com quatro dgitos) guardado no


objeto Date.

setHours(horas)

Acerta o valor da hora (de 0 a 23) guardada no objeto Date.

setMilliseconds(milisegundos)

Acerta o valor dos milissegundos (de 0 a 999) guardados


no objeto Date.

setMinutes(minutos)

Acerta o valor dos minutos (de 0 a 59) guardados no


objeto Date.

setMonth(ms)

Acerta o valor do ms (de 0 = janeiro a 11 = dezembro)


guardado no objeto Date.

setSeconds(segundos)

Acerta o valor dos segundos (de 0 a 59) guardados no


objeto Date.

setTime(data_numrica)

Acerta a data e a hora guardadas no objeto Date para o


valor correspondente a zero hora do dia 1 de janeiro de
1970 mais o nmero de milissegundos que fornecido
como argumento do mtodo.

setYear(ano)

Acerta o valor do ano guardado no objeto Date. No use


este mtodo, use antes o mtodo setFullYear.

setUTCDate(dia_ms)

Acerta o valor do dia (de 1 a 31) do ms guardado no


objeto Date usando o padro de tempo universal (UTC).

setUTCDay(dia_semana)

Acerta o valor do dia da semana (de 0 = domingo a 6 =


sbado) guardado no objeto Date usando o padro de
tempo universal (UTC).

setUTCMonth(ms)

Acerta o valor do ms (de 0 = janeiro a 11 = dezembro)


guardado no objeto Date usando o padro de tempo
universal (UTC).

102

linguagem_de_programacao_III.indb 102

04/02/11 11:14

Linguagens de Programao III

Mtodo

Descrio

setUTCFullYear(ano)

Acerta o valor do ano (com quatro dgitos) guardado no


objeto Date.

setUTCHour(horas)

Acerta o valor da hora (de 0 a 23) guardada no objeto


Date usando o padro de tempo universal (UTC).

setUTCMinutes(minutos)

Acerta o valor dos minutos (de 0 a 59) guardados no


objeto Date usando o padro de tempo universal (UTC).

setUTCSeconds(segundos)

Acerta o valor dos segundos (de 0 a 59) guardados no


objeto Date usando o padro de tempo universal (UTC).

setUTCMilliseconds(milisegu
ndos)

Acerta o valor dos milissegundos (de 0 a 999) guardados


no objeto Date usando o padro de tempo universal
(UTC).

toGMTString()

Devolve uma representao textual (a data e a hora


escritas por extenso) usando como referncia o fuso
horrio do Tempo Mdio de Greenwich (GMT).

toLocaleString()

Devolve uma representao textual (a data e a hora


escritas por extenso) no fuso horrio do computador local.

toUTCString()

Fornece uma representao textual (a data e a hora


escritas por extenso) da data contida no objeto Date
medida no padro UTC.

Fonte: JavaScript e HTML Dinmico (2007).

A utilizao do objeto date, assim como seus mtodos, feita de


forma simplificada.

Unidade 2

linguagem_de_programacao_III.indb 103

103

04/02/11 11:14

Universidade do Sul de Santa Catarina

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://


www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Exemplos objeto Date</title>
</head>
<body>
<h3>Mostrar o dia da semana</h3>
<script type=text/javascript>

var d = new Date();

var dia = d.getDay();

document.write(O nmero do dia da semana de hoje +dia);

// Para obtermos o nome do dia, criamos um Array em que Domingo


ocupa a

// posio 0, segunda ocupa a posio 1, ...

var nomesDias=new Array(Domingo,Segunda-feira,Terafeira,Quartafeira,Quinta-feira,Sexta-feira,Sbado);


document.write(<br><br>O nome do dia de hoje +nomesDias[dia]);

</script>
<h3>Obter a hora marcada pelo relgio do seu computador</h3>
<script type=text/javascript>

var d = new Date();

document.write(d.getHours()+ horas );

document.write(d.getMinutes()+ minutos );

document.write(d.getSeconds()+ segundos);

</script>
<h3>Criar uma data com um valor predefinido</h3>
<script type=text/javascript>

var data1 = new Date(Fri, 21 Nov 2003 10:43:34 UTC);

document.write(A data1 : +data1.toLocaleString());

104

linguagem_de_programacao_III.indb 104

04/02/11 11:14

Linguagens de Programao III

document.write(<br><br>);

var data2 = new Date(1069411529550);

document.write(A data2 : +data2.toLocaleString());

</script>
<h3>Estabelecer o ano para uma data</h3>
<script type=text/javascript>

var d = new Date();

d.setFullYear(1998);

document.write(d.toLocaleString());

</script>
<h3>Escrever a data completa com os nomes do dia e do ms</h3>
<script type=text/javascript>

var d = new Date();

var dia = d.getDay();

var mes = d.getMonth();

var ano = d.getFullYear();

// Para obtermos o nome do dia criamos um Array em que domingo


ocupa a

// posio 0, segunda ocupa a posio 1, ...

var nomesDias=new Array(Domingo,Segunda-feira,Terafeira,Quartafeira,Quinta-feira,Sexta-feira,Sbado);


var nomesMeses=new Array(Janeiro,Fevereiro,Maro,Abril,Maio,J
unho,Julho,Agosto,Setembro,Outubro,Novembro,Dezembro);

var s=Hoje +nomesDias[dia]+, +d.getDate();

s+= de +nomesMeses[mes]+ de +ano;

document.write(s);

</script>
</body>
</html>
Fonte: JavaScript e HTML Dinmico (2007).

Unidade 2

linguagem_de_programacao_III.indb 105

105

04/02/11 11:14

Universidade do Sul de Santa Catarina

Figura 2.7 - Mtodos e atributos de data.


Fonte: Elaborada pelo autor (2010).

Um tipo especial de varivel o tipo de vetor ou cadeia de


variveis. Um vetor um objeto capaz de guardar muitos valores,
tantos quanto a memria disponvel na mquina permitir. Um
vetor caracterizado como lacunas indexadas na memria que
armazenam um conjunto finito de valores. Cada uma dessas
lacunas que compem o vetor possui um ndice.

106

linguagem_de_programacao_III.indb 106

04/02/11 11:14

Linguagens de Programao III

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Exemplo de Array</title>
</head>
<body>
<script type=text/javascript language=javascript>
var numeros_primos = new Array( 2, 3, 5,7);
var nomes = new Array(3);
nomes[0] = Joo;
nomes[1] = Maria;
nomes[2] = Joaquim;
for (var i=0; i<numeros_primos.length; i++)
document.write(Posio +(i+1)+ :+numeros_primos[i]+<br>);
</script>
<br />
<script type=text/javascript language=javascript>
for (var i=0; i<nomes.length; i++)
document.write(Posio +(i+1)+ :+nomes[i]+<br>);
</script>
</body>
</html>

Ao ser declarada a varivel numeros_primos, declaramos o


Array (vetor) e atribumos os valores em uma nica operao. J
no segundo caso, declaramos primeiro o Array e somente depois
definimos os valores que ele deve conter. O browser interpretar
da seguinte forma:

Unidade 2

linguagem_de_programacao_III.indb 107

107

04/02/11 11:14

Universidade do Sul de Santa Catarina

Figura 2.8 - Exemplo de array


Fonte: Elaborada pelo autor (2010).

J vimos que o JavaScript converte o tipo de dados conforme a


atribuio que realizamos, por isso um array pode conter valores
de tipos diferentes em cada lacuna. Podemos alterar sempre que
necessrio, como mostra a seguir:

108

linguagem_de_programacao_III.indb 108

04/02/11 11:14

Linguagens de Programao III

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Exemplo converso de dados no Array</title>
</head>
<body>
<script type=text/javascript>
var produto = new Array(45, Morango, false, 1.25, Biscoito, Wafer);
document.write(Produto = + produto);
produto[0] = 2;
produto[2] = true;
produto[6] = Bolacha;
document.write(<br>);
document.write(Produto = + produto);
</script>
</body>
</html>

Quando atribuirmos um valor a um elemento do vetor com um


ndice mais alto do que o seu comprimento, o interpretador do
JavaScript aumenta o tamanho do vetor at chegar ao ndice
pretendido. isso que acontece no exemplo anterior quando se
chega linha que tem:
produto[6] = Bolacha;

O browser interpretar da seguinte forma:

Unidade 2

linguagem_de_programacao_III.indb 109

109

04/02/11 11:14

Universidade do Sul de Santa Catarina

Figura2.9 -Manipulao de arrays.


Fonte: Elaborada pelo autor (2010).

Os vetores so objetos e algumas propriedades entre as quais a


length utilizada para contar o nmero de elementos dentro de
um vetor. Assim, se ao exemplo anterior juntarmos uma linha
com o seguinte cdigo:
var numeroDeElementos = produto.length;

A varivel numeroDeElementos ficar com o valor 7. Entenda


que a propriedade length no l os ndices, mas conta o nmero
de elementos no vetor. Lembre-se sempre que ndice e tamanho
so diferentes.

110

linguagem_de_programacao_III.indb 110

04/02/11 11:14

Linguagens de Programao III

O array um objeto e como tal possui propriedades que auxiliam


no desenvolvimento de aplicaes.
Propriedade

Descrio

length

Fornece o nmero de elementos que esto no Array. O valor desta


propriedade estabelecido quando o Array criado, mas pode
crescer se formos juntando mais elementos ao Array.

Mtodo

Descrio

join()

Devolve uma String (varivel de texto) que representa o contedo


do Array.

reverse()

Devolve um novo Array em que a ordem dos elementos est


invertida (em particular temos que o elemento que tinha o ndice
zero passa a ter o ndice mais alto e vice-versa).

sort()

Devolve um novo Array em que os elementos esto ordenados


(geralmente por ordem crescente).

Fonte: JavaScript e HTML Dinmico (2007).

Utilizando o mtodo de ordenao sobre um objeto array


teramos:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Exemplo ordenao array</title>
</head>
<body>
<script type=text/javascript>
var fruta = new Array(Laranja,Banana,Morango,Abacaxi,Ma,K
iwi);
var numeros = new Array(27, 12, 15, 6, 2, 6);
</script>
<table border=1>

Unidade 2

linguagem_de_programacao_III.indb 111

111

04/02/11 11:14

Universidade do Sul de Santa Catarina

<tr>
<th colspan=2>Ordenar Strings</th>
<th colspan=2>Ordenar Nmero</th>
<tr>
<td width=140><b>Ordem normal</b></td>
<td><b>Ordem alfabtica</b></td>
<td width=140><b>Ordem normal</b></td>
<td><b>Ordem alfabtica</b></td>
</tr>
<td>

<script type=text/javascript>
for (var i=0; i<6; i++)
document.write(fruta[i] + <br>)
</script>

</td>
<td>

<script type=text/javascript>
// Agora ordenamos o Array por ordem alfabtica invocando o
// mtodo sort()
fruta.sort()
for (var i=0; i<6; i++)
document.write(fruta[i] + <br>)
</script>

</td>

<td>

<script type=text/javascript>
<!-for (var i=0; i<6; i++)
document.write(numeros[i] + <br>)
// -->

112

linguagem_de_programacao_III.indb 112

04/02/11 11:14

Linguagens de Programao III

</script>

</td>

<td>

<script type=text/javascript>
<!-// Agora ordenamos o Array por ordem alfabtica invocando o
//mtodo sort()
numeros.sort()
for (var i=0; i<6; i++)
document.write(numeros[i] + <br>)
// -->
</script>

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

</body>
</html>

Fonte: JavaScript e HTML Dinmico (2007).

Figura 2.10 - Propriedade e mtodos do array.


Fonte: Elaborada pelo autor (2010).
Unidade 2

linguagem_de_programacao_III.indb 113

113

04/02/11 11:14

Universidade do Sul de Santa Catarina

b. Operadores
Os operadores so instrues utilizadas em expresses para
valid-las ou calcul-las. H dois tipos de operadores: lgicos
e aritmticos. Os operadores lgicos so aqueles destinados
a realizar comparaes entre expresses. Normalmente essas
comparaes esto associadas aos laos de condicionais e os de
repetio. Os operadores mais usados so:
Tabela 3 Operadores lgicos.
Operador

Descrio

&& ou AND

|| ou OR

OU

! ou NOT

NO

>

Maior que

<

Menor que

>=

Maior ou igual

<=

Menor ou igual

Atribuio

==

Igualdade

===

Idntico (valor e tipo)

!=

Diferente

Como exemplo, temos:

114

linguagem_de_programacao_III.indb 114

04/02/11 11:14

Linguagens de Programao III

<html>
<head>
<title>Teste</title>
<script language=javascript type=text/javascript>
var exemplo1= A;
if (exemplo1==A) {
alert(A condio verdadeira);
} else {
alert(A condio falsa);
}
</script>
</head>
<body>
...
</body>
</html>

Os operadores aritmticos, como o prprio nome j diz, so


usados em operaes matemticas. Veja a relao dos principais
operadores:
Tabela 4 Operadores aritmticos
Operador

Descrio

Adio

Subtrao

Multiplicao

Diviso

Resto da diviso

Unidade 2

linguagem_de_programacao_III.indb 115

115

04/02/11 11:14

Universidade do Sul de Santa Catarina

O operador + usado como concatenador de


expresses. Portanto, se voc usar esse operador em
uma expresso como esta: 1+1 o resultado ser 11.

O Javascript suporta ainda os operadores de incremento que so


um contrao ou atalho para uma operao. Ou seja, quando
queremos realizar um contador aem vez de somar um a um a
varivel, podemos usar esse operador. A sintaxe :
varivel++
varivel--

c. Lao de deciso
O lao de deciso no JavaScript representado pela instruo if.
Essa instruo permite executar um bloco de cdigo apenas se for
verdadeira uma determinada condio. Caso a condio no seja
verdadeira, esse bloco de cdigo no ser executado, podendo ser
ou no executado outro cdigo alternativo, que ser especificado
por meio da instruo else.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Exemplo de lao de deciso</title>
</head>
<body>
<script type=text/javascript language=javascript>
function verifica(campo) {

if(campo[0].checked) alert(Levar um gurada-chuva);

else alert(Deve estar quente!);

116

linguagem_de_programacao_III.indb 116

04/02/11 11:14

Linguagens de Programao III

</script>
<form name=form id=form>
Est chovendo?&nbsp;
<p>
<label>
<input type=radio name=chuva value=s id=chuva_0
onchange=verifica(document.form.chuva)/>
Sim</label>
<br />
<label>
<input type=radio name=chuva value=n id=chuva_1
onchange=verifica(document.form.chuva)/>
<br />
</p>
<input type=button name=consultar value=Consultar
onclick=verifica(document.form.chuva)/>
</form>
</body>
</html>

O exemplo trata de uma interao com o usurio sobre o tempo.


A resposta do usurio resultar em um teste lgico que mostrar
uma mensagem de retorno. O browser interpreta da seguinte
forma:

Unidade 2

linguagem_de_programacao_III.indb 117

117

04/02/11 11:14

Universidade do Sul de Santa Catarina

Figura 2.11 - Exemplo do controlador IF.


Fonte: Elaborada pelo autor (2010).

Uma instruo if no precisa ser associada a uma instruo else.


Quando isso acontece, caso a condio no seja verdade, no ser
executado qualquer cdigo alternativo. O interpretador apontar
imediatamente a instruo aps o trmino do comando if.
Outro lao de repetio suportado pelo JavaScript o switch. Esse
lao no faz parte do padro ECMAScript, porm suportado
pela maioria dos browsers.
O switch possui a caracterstica de comparar uma varivel com
diversos valores, executando blocos independentes para cada valor
verdadeiro. Em casos como esse, o switch torna-se mais eficiente
que a instruo if por possuir uma construo mais simplificada e
organizada.

118

linguagem_de_programacao_III.indb 118

04/02/11 11:14

Linguagens de Programao III

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://


www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Exemplo de Switch</title>
</head>
<script language=javascript type=text/javascript>
function testacor(campocor) {

switch (campocor) {

case azul:

alert(O Azul pode ser usado para escrever um documento);

break;

case vermelho:

alert(O Vermelhor utilizado em correo);

break;

case verde:

alert(O Verde utilizado para marcao);

break;

case amarelo:

alert(O Amarelo utilizado para destacar texto);

break;

default :

alert(O Preto o padro);

break;

}
</script>
<body>
<form name=form action= method=get>

Unidade 2

linguagem_de_programacao_III.indb 119

119

04/02/11 11:14

Universidade do Sul de Santa Catarina

Escolha uma cor: &nbsp;


<select name=cor onchange=testacor(this.value)>
<optgroup style=color:#000>
<option value= selected=selected>Preto</option>
</optgroup>
<optgroup style=color:#009>
<option value=azul>Azul</option>
</optgroup>
<optgroup style=color:#F00>
<option value=vermelho>Vermelhor</option>
</optgroup>
<optgroup style=color:#0F0>
<option value=verde>Verde</option>
</optgroup>
<optgroup style=color:#FF0>
<option value=amarelo>Amarelo</option>
</optgroup>
</select>
</form>
</body>
</html>

Perceba que o switch abre um bloco e dentro dele so inseridas


as constantes a serem testadas. Cada constante precedida da
instruo case e deve abrir um novo bloco de comando interno.
Neste caso, usa-se o caractere dois pontos (:). O bloco de
instruo de cada case deve ser encerrado com a instruo break,
que indica uma interrupo da execuo de blocos. O browser
interpreta da seguinte forma:

120

linguagem_de_programacao_III.indb 120

04/02/11 11:14

Linguagens de Programao III

Figura 2.12 Exemplo do controlador switch.


Fonte: Elaborada pelo autor ( 2010).

d. Laos de repetio
Os laos de repetio caracterizam-se por repetir um bloco
de instruo um nmero finito de vezes. O bloco utiliza o
delimitador de funo {} para definir o escopo do trabalho.
Caso este seja omitido, a primeira linha seguinte instruo ser
a nica dentro do lao.
Um dos laos mais utilizados o lao for. Esse lao caracterizase por utilizar um contador numrico para limitar o nmero de
iteraes. Ainda possui um conjunto de trs expresses contidas
entre parntesis, separadas pelo caractere ponto e vrgula e pelo
cdigo a executar em cada um dos laos.
A primeira das expresses do lao for declara a varivel para
utilizar como ndice inicializando-a. A segunda expresso declara
uma condio que deve ser testada sempre que se inicia uma nova
iterao. Se essa condio resultar em false, o lao ir parar e o cdigo
definido abaixo no voltar a ser executado. A terceira expresso
serve para atualizar o valor do ndice no final de cada ciclo.

Unidade 2

linguagem_de_programacao_III.indb 121

121

04/02/11 11:14

Universidade do Sul de Santa Catarina

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Exemplo lao for</title>
</head>
<body>
<script type=text/javascript language=javascript>
for (var i=0; i<20; i++) {
document.write(O do ndice : +i+<br>);
}
</script>
</body>
</html>

O resultado no browser :

122

linguagem_de_programacao_III.indb 122

04/02/11 11:14

Linguagens de Programao III

Figura 2.13 - Exemplo do lao FOR.


Fonte: Elaborada pelo autor (2010).

Esse exemplo mostra o lao de repetio for, como ele percorre o


contador e a condio nele atribuda. Um outro exemplo seria:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Exemplo de lao de repetio</title>
</head>
<script language=javascript type=text/javascript>
function validarEntero(valor){

valor = parseInt(valor);

if (isNaN(valor)) { return ; } else { return valor; }

Unidade 2

linguagem_de_programacao_III.indb 123

123

04/02/11 11:14

Universidade do Sul de Santa Catarina

function validarFormulario(campo){

textoCampo = campo.value;

textoCampo = validarEntero(textoCampo);

campo.value = textoCampo;

function repete(rept, numero, result) {



var repeticoes= rept.value;

var inteiro = parseInt(numero.value);

var resultado=0;

for (var i=1;i<=repeticoes;i++)

resultado=resultado+(inteiro*repeticoes);

result.value=resultado;

}
</script>
<body>
<form method=post name=form1>
Digite um nmero inteiro
<input type=text name=inteiro value= onkeyup=validarFormular
io(this) style=text-align:right;/>
<br />
Escolha o nmero de repeties voc deseja
<select name=repeticoes onchange=repete(this,document.form1.
inteiro,document.form1.resultado)>
<option value= selected>&nbsp;</option>
<option value=1>UM</option>
<option value=2>DOIS</option>

124

linguagem_de_programacao_III.indb 124

04/02/11 11:14

Linguagens de Programao III

<option value=3>TRS</option>
</select>
<br />
Resultado da operao acumulada de (Repetio * Inteiro)<br>
<input type= text name=resultado value= style=text-align:right;
readonly=true />
</form>
</body>
</html>

No browser fica desta forma:

Figura 2.14 - Lao FOR sem bloco.


Fonte: Elaborada pelo autor ( 2010).

Nesse exemplo simples, possvel verificar todos os laos e


algumas funes. A funo isNaN testa um valor a fim de
verificar se ele um nmero. A funo parseInt transforma uma
expresso em um nmero possvel. Por fim, a funo this uma
palavra reservada para referenciar o objeto corrente, neste caso, o
campo do formulrio que est chamando a funo.

Unidade 2

linguagem_de_programacao_III.indb 125

125

04/02/11 11:14

Universidade do Sul de Santa Catarina

Outras funes, como o parseInt, esto disponveis


para o Javascript. Ainda possui a funo indexOf
sendo muito til em condies. Pesquise sobre seu
funcionamento e teste-a.

Outro lao de repetio importante o while. Esse lao muito


parecido com o lao for. Na realidade, tudo o que um faz pode
ser feito com o outro, embora por questes de legibilidade cada
um deles possa ter reas de aplicao que para as quais mais
indicado do que o outro.
O lao while avalia uma condio e, se ela resultar em true,
executa o bloco de cdigo que vem imediatamente a seguir.
Caso resulte em false, o interpretador posiciona na instruo
imediatamente aps o lao e continua a execuo.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Exemplo lao while</title>
</head>
<body>
<script type=text/javascript language=javascript>
var i=0;
while (i<20) {

document.write(O do ndice : +i+<br>);

i++;

}
</script>
</body>
</html>

126

linguagem_de_programacao_III.indb 126

04/02/11 11:14

Linguagens de Programao III

Figura 2.15 Lao WHILE.


Fonte: Elaborada pelo autor (2010).

O resultado nesse caso idntico ao lao for. Porm, ntido que


a complexidade envolvida nesse cdigo superior ao do lao for.
Mesmo assim, quando voc tem a necessidade de utilizar um lao
de deciso em que no seja necessrio um contador, o lao while
a melhor soluo.
Um terceiro lao que o JavaScript comporta o do..while. Esse
lao irmo do lao while, possui uma sutil, mas importante,
diferena. Para o lao while ser executado uma primeira vez,
necessrio que a condio seja atendida ao menos uma vez.
O lao do..while executa sempre uma vez antes de testar a
condio. Isso possvel porque a condio verificada aps o
bloco de comando. Diferente de seu irmo while, que testado
antes do bloco iniciar.

Unidade 2

linguagem_de_programacao_III.indb 127

127

04/02/11 11:14

Universidade do Sul de Santa Catarina

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Exemplo do..while</title>
</head>
<body>
<script language=javascript type=text/javascript>
var i = 0;
while (i<8) {
document.write(Intruo while executada vale: +i+,
condio atendida<br>);

i++;

}
i = 0;
do {
document.write(Intruo do..while executada contador vale: +i+,
condio atendida<br>);

i++

} while (i<8)
document.write(Quando a condio no atendida<br>Os laos so
executados novamente neste exemplo.<br>);
document.write(Porm a varivel no zerada, vejamos como se
comporta<br><br>);
// Condio NO atendida
while (i<8) {
document.write(Intruo while executada +i+ vez, condio NO
atendida<br>);

128

linguagem_de_programacao_III.indb 128

04/02/11 11:14

Linguagens de Programao III

i++;

}
do {
document.write(Intruo do..while executada vale: +i+, condio
NO atendida<br>);

i++

} while (i<8)
</script>
</body>
</html>

Nesse exemplo, a situao foi forada para voc perceber a


diferena. Via de regra, voc pode adotar que o while deve ser
usado sempre que um bloco do lao de repetio necessite de uma
condio verdadeira para executar ao menos uma vez.
O do..while deve ser construdo quando um bloco do lao necessite
ser executado ao menos uma vez mesmo que uma condio no
seja atendida. No browser, o resultado do exemplo fica:

Figura 2.16 - Comparao de estruturas while e do while.


Fonte: Elaborada pelo autor (2010).

Unidade 2

linguagem_de_programacao_III.indb 129

129

04/02/11 11:14

Universidade do Sul de Santa Catarina

e. Funes
Uma funo um bloco de cdigo que necessita ser chamado
para executar uma determinada operao. Em JavaScript, esse
artifcio amplamente utilizado, j que a maior utilizao dessa
linguagem a interao com o usurio.
As funes possuem uma declarao de nome e uma delimitao
de bloco por meio do caractere {}. O bloco pode conter uma
infinidade de instrues para execuo de seu cdigo. O retorno
de informaes opcional e deve ser feito pela instruo return.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Exemplo de Funo sem argumento</title>
</head>
<script type=text/javascript language=javascript>
function testefuncao() {
return A funo foi chamada;
}
</script>
<body>
<h1>Vejamos um teste de funo sem argumento!</h1>
<script type=text/javascript language=javascript>
document.write(testefuncao());
</script>
</body>
</html>

Veja que, alm do nome da funo, necessrio utilizar a entrada


de parmetros que est entre parnteses. Desta forma, a funo
chamada e seu retorno pode ser atribudo a uma varivel. O
130

linguagem_de_programacao_III.indb 130

04/02/11 11:14

Linguagens de Programao III

browser interpreta como se a instruo estivesse sendo escrito


diretamente na funo write.

Figura 2.17 - Chamada de funo.


Fonte: Elaborada pelo autor (2010).

As funes ainda podem receber argumentos ou parmetros.


Esses argumentos so variveis que recebem valores passados
durante a chamada da funo. Isso possibilita o processamento
do cdigo utilizando variveis locais com valores globais. O
seu cdigo permanecer mais limpo e fcil de interpretar, sem
questionar a diminuio da incidncia de erro ao utilizar variveis
globais dentro das funes.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Exemplo Funo com argumentos fixo</title>
</head>
<script type=text/javascript language=javascript>

Unidade 2

linguagem_de_programacao_III.indb 131

131

04/02/11 11:14

Universidade do Sul de Santa Catarina

function autosoma(valor) {

var soma=0;

do {

soma += valor;

valor--;

} while (valor>0)

return soma;

}
function atribuircampo(campovalor, camporetorno) {

camporetorno.value = autosoma(parseInt(campovalor.value));

}
</script>
<body>
<h1>Funo com argumento fixo</h1>
<form name=form method=get>
Digite um nmero: &nbsp;
<input type=text name=txt_valor id=txt_valor value=
align=right />
<input type=button name=btn_calcular value=Calcular
onclick=atribuircampo(document.form.txt_valor , document.form.
txt_resultado)/><br /><br />
Resultado:&nbsp;<input type=text name=txt_resultado id=txt_
resultado value= readonly=readonly />
</form>
</body>
</html>

Nesse exemplo, est sendo utilizada uma funo sem retorno


(atribuicampo). Essa funo est recebendo dois argumentos, a
diferena que esses argumentos no so valores, mas objetos
do formulrio. O JavaScript realiza uma referncia com o objeto,
ou seja, todos os atributos e mtodos associados a esse objeto so

132

linguagem_de_programacao_III.indb 132

04/02/11 11:14

Linguagens de Programao III

propagados para o argumento, assim como qualquer alterao de


valores ou estados refletida diretamente no objeto HTML.
A segunda funo feita uma chamada com argumento. Mas
este no passado um objeto, mas sim um valor. Assim o
JavaScript interpreta que o valor foi passado por cpia e qualquer
alterao nesse valor no influencia no ser progenitor, nesse caso,
o campo txt_valor.

Figura 2.18 - Funo de retorno.


Fonte: Elaborada pelo autor (2010).

Os argumentos so extremamente teis e muitas vezes


necessrios. Mas imagine que seja necessrio que se faa uma
funo que some qualquer cadeia de nmeros. Ou seja, uma
funo que aceite receber qualquer nmero de argumentos e
trabalhe com todos de forma dinmica. O JavaScript resolve esse
problema com uma propriedade de todas as funes: o arguments.
Essa propriedade atribui um array de argumentos que esto
disponveis em dentro da funo.

Unidade 2

linguagem_de_programacao_III.indb 133

133

04/02/11 11:14

Universidade do Sul de Santa Catarina

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Exemplo Funo argumento varivel</title>
</head>
<script type=text/javascript language=javascript>
function autosoma() {
var soma=0;
for (var i=0; i<autosoma.arguments.length; i++) {
soma += parseInt(autosoma.arguments[i]);
}
return soma;
}
</script>
<body>
<script type=text/javascript language=javascript>
document.write(Chamada da funo, somar 1,5,6,7,8 =
+autosoma(1,5,6,7,8));
document.write(<br>);
document.write(Chamada da funo, somar 67, 8, 9 ,7 , 5, 7 ,9 =
+autosoma(67, 8, 9 ,7 , 5, 7 ,9));
document.write(<br>);
document.write(Chamada da funo, somar 7, 9, 5 = +autosoma(7, 9, 5));
</script>
</body>
</html>

Veja que nesse exemplo so passados diversos argumentos


diferentes, quanto a valores e a nmero de argumentos. A
134

linguagem_de_programacao_III.indb 134

04/02/11 11:14

Linguagens de Programao III

declarao da funo no est esperando nenhum argumento


definido. Porm, por meio do atributo arguments, podemos
acessar todos os argumentos transmitidos.

Figura 2.19 - Funo com argumentos genricos.


Fonte: Elaborada pelo autor (2010)

e. Eventos
Como em outras linguagens, o Javascript possui manipulao
de eventos. Esses eventos so as aes e as reaes que executam
um determinado procedimento. Os eventos so quaisquer aes
iniciadas pelo usurio (clicar em determinada rea da pgina, por
exemplo) e normalmente so utilizados para realizar as chamadas
das funes Javascript.
A utilizao do evento feita como um atributo de uma tag
HTML. A sintaxe feita da seguinte forma:
<tag Evento=chamada javascript>

A tabela a seguir representa os eventos mais comumente


utilizados:

Unidade 2

linguagem_de_programacao_III.indb 135

135

04/02/11 11:14

Universidade do Sul de Santa Catarina

Tabela 1 Eventos e manipuladores.


EVENTO

MANIPULADOR

DESCRIO

Blur

onBlur

Ocorre quando o usurio retira o foco


de um objeto de formulrio.

Change

onChange

Ocorre quando o usurio muda o


valor de um objeto de formulrio.

Click

onClick

Ocorre quando o usurio clica sobre


o objeto.

Focus

onFocus

Ocorre quando o usurio focaliza o


objeto.

Load

onLoad

Ocorre quando o usurio carrega a


pgina.

Unload

onUnload

Ocorre quando o usurio abandona


a pgina.

MouseOver

onMouseOver

Ocorre quando o ponteiro do mouse


passa sobre um link ou uma ncora.
Vlidos apenas para hiperlinks.

Select

onSelect

Ocorre quando o usurio seleciona


um elemento de um formulrio.

Submit

onSubmit

Ocorre quando o usurio envia um


formulrio.

MouseDown

onMouseDown

Ocorre quando o boto do mouse


pressionado.

MouseMove

onMouseMove

Ocorre quando o ponteiro do mouse


se movimenta sobre o objeto.

MouseOut

onMouseOut

Ocorre quando o ponteiro do mouse


afasta de um objeto. Vlidos apenas
para hiperlinks.

MouseUp

onMouseUp

Ocorre quando o boto do mouse


solto.

KeyDown

onKeyDown

Ocorre quando uma tecla segurada.

KeyPress

onKeyPress

Ocorre quando uma tecla


pressionada.

KeyUp

onKeyUp

Ocorre quando uma tecla solta.

Fonte: Javascript aplicaes interativas para a Web (2006).

Existem eventos que so especficos para cada tag. A utilizao


de um evento em uma tag que no o suporta acarretar em no

136

linguagem_de_programacao_III.indb 136

04/02/11 11:14

Linguagens de Programao III

ativao do script. Veja ento a utilizao de um evento dentro do


cdigo HTML:
<html>
<head>
<title>Teste</title>
</head>
<body onload=defaultStatus=(Seja bem vindo) onunload=alert(At
mais)>
...
</body>
</html>
O browser Firefox traz por default o bloqueio para
alterao na barra de status. Para visualizar o exemplo,
necessrio habilit-lo nas opes do browser.

Esses dois eventos so caractersticos da tag body. Eles so


ativados quando a pgina carregada e quando descarregada
do browser. Perceba que diretamente no houve uma ao direta
do usurio, porm, considera-se uma ao do usurio o acesso e a
sada da pgina.
Existem muitos outros eventos na linguagem. Alguns
somente so portados em algumas verses de browser
e outros somente em um tipo de browser. Procure
pesquisar a fim de conhecer esses eventos e quais se
adaptam melhor s suas necessidades.

Unidade 2

linguagem_de_programacao_III.indb 137

137

04/02/11 11:14

Universidade do Sul de Santa Catarina

Seo 4 Scripts JS
Nesta seo, vamos utilizar o JS na prtica, realizando algumas
validaes de campos. Assim, poderemos ver como utilizar o JS
na sua principal funo.
Voc j viu um exemplo para validar um campo somente
numrico. Podemos comear ento acrescentando uma mscara
para um campo de valores, como um campo de fone:
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Mascara de fone</title>
<script language=javascript type=text/javascript>
function mascarafone(objeto) {
var aux;
aux = ( + objeto.value.substr(0,2) + );
aux += objeto.value.substr(2,4)+- + objeto.value.substr(6,4);
objeto.value = aux;
</script>
</head>
<body>
<form name=form1>
<input type=text onblur=mascarafone(this);>
</form>
</body>
</html>

Nesse exemplo, podemos ver que o evento associado chamada


da funo o Blur. Portanto, a mscara somente ser executada
quando o campo perder o foco, ou seja, quando o cursor sair do
campo ser chamada a funo.

138

linguagem_de_programacao_III.indb 138

04/02/11 11:14

Linguagens de Programao III

Outra funo usada foi a substr. Essa funo pega um pedao da


literal que inicia na posio do primeiro argumento e o segundo
argumento indica o nmero de caractere ser capturado. Vale
ainda comentar que essa mscara visa colocar caracteres no
formato dos fones.
Vamos agora criar um script simples de validao de campos.
Neste exemplo, no vamos nos preocupar com o tipo de dados
apenas verificar se os itens obrigatrios esto preenchidos. Antes
de iniciar, vale lembrar que os atributos das tags HTML no
possuem validao, ou seja, posso criar qualquer atributo que eu
venha a desejar. Ento, vamos ao script:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Validao dos campos</title>
<script language=javascript type=text/javascript>
function valida(objeto) {
//a proriedade elements permite acessar todos os objetos existentes
em forma de vetor. Assim, podemos colocar todos os objeto dentro de
um lao acessando cada um sem saber qual o nome.

var elementos = objeto.elements;

var resp=

for (var i=0; i< elementos.length; i++){

//neste exemplo, estamos validando apenas os campos do tipo text e


que tem no atributo que foi criado obrigatorio igual a S, assim com
uma nica funo podemos acrescentar vrios campos sem necessitar
alterar a funo

if ((elementos[i].getAttribute(type)==text)&&

(elementos[i].getAttribute(obrigatorio)==S) &&

Unidade 2

linguagem_de_programacao_III.indb 139

139

04/02/11 11:14

Universidade do Sul de Santa Catarina

(elementos[i].value==)) {


//style o objeto referente aos estilos CSS, neste caso
estamos trocando a cor de fundo

elementos[i].style.backgroundColor = #ffffcc;


resp+=O campo +elementos[i].getAttribute(descr) +
obrigatorio.\n;

if (resp!=) {

alert(resp);

return false;

return true;

}
</script>
</head>
<body>
<!-- usar o return na chamada deste evento significa que se retornar false
o browser entende que houve algum problema e no continuar. Se for
true, no h problema algum em continuar.-->
<form id=form1 name=form1 method=post action=www.google.
com.br onsubmit=return valida(this);>
<p>Nome:
<label>
<input type=text name=nome id=nome obrigatorio=S
descr=O nome deve ser preenchido />
</label>
</p>
<p>Apelido:
<label>
<input type=text name=apelido id=apelido />
</label>

140

linguagem_de_programacao_III.indb 140

04/02/11 11:14

Linguagens de Programao III

</p>
<p> Ano de nascimento
<input name=ano type=text id=ano maxlength=4
obrigatorio=S descr=Ano deve ter especificamente 4 caracteres />
</p>
<p>
<label>
<input type=submit name=button id=button value=Enviar />
</label>
</p>
</form>
</body>
</html>

Figura 2.20- Validao de campo.


Fonte: Elaborada pelo autor (2010).

Unidade 2

linguagem_de_programacao_III.indb 141

141

04/02/11 11:14

Universidade do Sul de Santa Catarina

Vamos para algo mais complexo: vamos verificar um script


montado por terceiros, j que ser o mais comum a se encontrar
na internet. Vamos tentar avaliz-lo e entend-lo:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Mascara de moedas</title>
</head>
<script language=javascript>
//----------------------------------------------------//Funcao: MascaraMoeda
//Sinopse: Mascara de preenchimento de moeda
//Parametro:
// objTextBox : Objeto (TextBox)
// SeparadorMilesimo : Caracter separador de milsimos
// SeparadorDecimal : Caracter separador de decimais
// e : Evento
//Retorno: Booleano
//Autor: Gabriel Fres - www.codigofonte.com.br
//Comentrios: Edson Lessa
//----------------------------------------------------function MascaraMoeda(objTextBox, SeparadorMilesimo,
SeparadorDecimal, e){
var sep = 0;
var key = ;
var i = j = 0;
var len = len2 = 0;

// Caracteres vlidos durante a digitao

142

linguagem_de_programacao_III.indb 142

04/02/11 11:14

Linguagens de Programao III

var strCheck = 0123456789;


var aux = aux2 = ;
// o comando ? possui a mesma funo do if, basicamente pode se
trocar esta linha por
// if ( (window.Event)==true) { var whichCode=e.which; } else { var
whichCode=e.keyCode; }
var whichCode = (window.Event) ? e.which : e.keyCode;
if (whichCode == 13) return true;

// Valor para do nmero que foi digitado


key = String.fromCharCode(whichCode);

//verifica se o caracter est presende nos cacteres vlidos


if (strCheck.indexOf(key) == -1) return false; // Chave invlida

//length retorna o tamanho de caracters de uma expresso


len = objTextBox.value.length;
for(i = 0; i < len; i++) {


//charAt o mtodo que retornar um caractere da posio
indicada. Lembrando que o nmero da posio contado da esquerda
para direita e inicia com 0.

//esta parte do cdigo responsvel pela separao do inteiro e
do decimal
if ((objTextBox.value.charAt(i) != 0) && (objTextBox.value.charAt(i) !=
SeparadorDecimal)) break;

}
aux = ;
for(; i < len; i++) {

//armazena na varivel aux os nmeros validos j digitados

if (strCheck.indexOf(objTextBox.value.charAt(i))!=-1) aux +=
objTextBox.value.charAt(i);

//adiciona a ltima tecla digitada


aux += key;

//total de nmeros digitados

Unidade 2

linguagem_de_programacao_III.indb 143

143

04/02/11 11:14

Universidade do Sul de Santa Catarina

len = aux.length;
//este bloco adiciona zeros para os primeiros nmeros decimais
digitados
if (len == 0) objTextBox.value = ;
if (len == 1) objTextBox.value = 0+ SeparadorDecimal + 0 + aux;
if (len == 2) objTextBox.value = 0+ SeparadorDecimal + aux;

//acrescenta do separador de milhar


if (len > 2) {
aux2 = ;
for (j = 0, i = len - 3; i >= 0; i--) {
if (j == 3) {
aux2 += SeparadorMilesimo;
j = 0;
}
aux2 += aux.charAt(i);
j++;
}
objTextBox.value = ;
len2 = aux2.length;
for (i = len2 - 1; i >= 0; i--)
objTextBox.value += aux2.charAt(i);

//acrescenta smbolo do decimal nos dois ltimos caracteres


objTextBox.value += SeparadorDecimal + aux.substr(len - 2, len);

}
return false;
}
</script>
<body>
Exemplo de utilizao:
<form>

144

linguagem_de_programacao_III.indb 144

04/02/11 11:14

Linguagens de Programao III

Valor R$:
<input type=text name=valor onKeyPress=return(MascaraMoeda(t
his,.,,,event)) style=text-align:right;>
</form>
</body>
</html>

Perceba que nesse script estamos trabalhando diretamente com


a captura das informaes digitadas pelo usurio por meio
do evento onKeyPress e da funo event. Perceba tambm que
estamos quebrando a cadeia de caracteres por meio do mtodo
charAt para que seja possvel trabalh-la individualmente
facilitando o processamento.
Existe mais de uma forma de se fazer uma casa. Procure
outras formas de validao de campos e mscaras.
Perceba que, por mais diferentes elas podem parecer,
em sua essncia so todas iguais.

O JavaScript uma poderosa ferramenta a nosso dispor.


Aprimorar e alcanar seus limites depende muito mais da
criatividade do desenvolvedor. A internet est repleta de cdigos
prontos disponibilizados por desenvolvedores para que no seja
necessrio reinventar a roda. Procure sempre explorar novos
horizontes.

Unidade 2

linguagem_de_programacao_III.indb 145

145

04/02/11 11:14

Universidade do Sul de Santa Catarina

Sntese
O JavaScript uma linguagem orientada a objetos, porm
possui recursos limitados que so predefinidos pela prpria
linguagem. O JavaScript procura transformar todo o contedo
HTML em objeto, para assim simplificar a sua manipulao.
Toda a estrutura de variveis segue essa linha de objetos, porm
a construo da aplicao com essa linguagem feita utilizando
a forma estruturada. Esse mtodo simplifica a construo e o
entendimento. As variveis podem ser do tipo string (caractere),
date (data), array (cadeia de variveis), int (inteiro) ou boolean
(lgico). Cada qual herda os mtodos e a propriedade respectiva
de seus objetos. As funes so amplamente utilizadas por causa
de a linguagem ser utilizada para interagir com o usurio. Os
eventos existentes proporcionam um leque razovel de opes
para interagir com as aes dos usurios.

Atividades de autoavaliao
Ao final de cada unidade, voc ser desafiado a realizar atividades de
autoavaliao. O gabarito est disponvel no final do livro-didtico.
Esforce-se para resolver as atividades sem ajuda do gabarito, pois assim
voc estar estimulando a sua aprendizagem.
1. Faa um script para validar um formulrio que contenha nome,
endereo, nome da me, idade e e-mail. Os campos obrigatrios
so nome, nome da me, idade e e-mail. Valide a idade para aceitar
somente inteiros positivos e entre 10 e 120 anos. O e-mail deve ser
validado de tal forma que deve conter o caractere @ e pelo menos um
ponto aps o @. Publique sua resposta na ferramenta Exposio do
EVA.
2. Crie um formulrio que contenha um elemento textarea. Voc deve
utilizar esse elemento para inserir informaes em uma tag div por
meio do JavaScript. Publique o script na ferramenta exposio do EVA.

146

linguagem_de_programacao_III.indb 146

04/02/11 11:14

Linguagens de Programao III

Saiba mais
Se voc desejar, aprofunde os contedos estudados nesta unidade
ao consultar as seguintes referncias:
Cdigo Fonte, 2010. Disponvel em <http://codigofonte.uol.com.
br/artigos/javascript-dhtml>. Acesso em: 01 mar. 2010.
Truquese Dicas: Tutoriais de Javascript, 2010. Disponvel em
<www.truquesedicas.com/tutoriais/javascript>. Acesso em: 2 mar.
2010.
jsfromhell.com JavaScript Repository, 2010. Disponvel em:
<http://jsfromhell.com/>. Acesso em: 15 mar. 2010.

Unidade 2

linguagem_de_programacao_III.indb 147

147

04/02/11 11:14

linguagem_de_programacao_III.indb 148

04/02/11 11:14

unidade 3

PHP
Objetivos de aprendizagem
Ao final do estudo desta unidade, importante que voc:

Saiba utilizar contedo dinmico.

Conhea variveis, constantes e escopo de ao.

Compreenda uso de operadores e expresses.

Identifique e desenvolva os laos de deciso e


repetio.

Desenvolva aplicaes Serve-side.

Sees de estudo

linguagem_de_programacao_III.indb 149

Seo 1

Viso geral

Seo 2

Variveis e constantes

Seo 3

Operadores

Seo 4

Estruturas de controle

Seo 5

Trabalhando com arquivos

04/02/11 11:14

Universidade do Sul de Santa Catarina

Para incio de estudo


Voc j observou que o desenvolvimento de uma aplicao para
Web possui inmeras vantagens. Verificou a aplicabilidade dessa
plataforma para o desenvolvimento de aplicaes de pequeno e
grande porte. Estudou sobre o HTML e o JavaScript, que so
linguagens client-side. Agora entraremos em um universo um
pouco diferente, uma linguagem serve-side.
Uma linguagem serve-side consiste em trabalhar diretamente
no servidor de aplicao. Esse tipo de linguagem proporciona
recursos de processamentos centralizados. Um maior controle
sobre o ambiente o qual est sendo trabalhado. As linguagens
server-side so indispensveis para se construir aplicaes que
necessitam de armazenamento de dados. A linguagem PHP se
encaixa perfeitamente a essa necessidade.
O PHP uma linguagem muito utilizada e est presente em
mais 20 milhes de domnios. Essa linguagem Open Source,
ou seja, voc pode acessar o cdigo-fonte e alter-lo.
O PHP foi desenvolvido em 1994 pelo desenvolvedor Rasmus
Lerdorf. Mais tarde foi regravado por diversas equipes e alcanou
a maturidade existente hoje. PHP teve seu significado original
como sendo Personal Home Page, mas hoje foi alterado conforme
a conveno para atribuio de nomes recursiva GNU, adotou-se
o nome de PHP Hypertext Preprecessor. Sua Sintaxe lembra um
pouco a sintaxe do C e do Perl, e uma linguagem bem fcil de
aprender.

150

linguagem_de_programacao_III.indb 150

04/02/11 11:14

Linguagens de Programao III

Seo 1 Viso geral


O PHP multiplataforma e pode ser usado na maioria dos
sistemas operacionais. Diferente de scripts como o JavaScript, ele
roda no servidor, que suportado pela maioria dos servidores
Web que existem hoje no mercado, como Apache, IIS etc.
O cliente recebe apenas os resultado dos scripts, que so
interpretados no servidor, no tendo acesso ao cdigo. Muito
simples de se aprender e trabalhar, o PHP atende desde os mais
experientes desenvolvedores at os iniciantes na rea.
Existem diversos tutoriais para instalao do PHP.
aconselhvel utilizar uma sute pronta de servidor
como Xampp <http://www.apachefriends.org/en/
xampp.html>, ApacheTriad <http://www.apachefriends.
org/en/xampp.html>, PHPTriad <http://sourceforge.
net/projects/phptriad> ou outra sute semelhante em
que se tenha o servidor Web + PHP + Mysql.

Uma das grandes vantagens do PHP sua portabilidade,


ou seja, sua capacidade de ser executada em diversos sistemas
operacionais. O PHP est presente nos principais sistemas
operacionais existentes no mercado. Uma de suas caractersticas
ser server-side, isso significa que executada somente no servidor
e, por isso, facilita a sua manuteno e segurana em relao
ocultao de linguagem.
Visando melhorar o entendimento, vamos utilizar uma pgina
baseada em um sistema de requisio. Esse sistema voltado
para uma empresa comercial de informtica e tem como base
requisitar produtos para o estoque situado em outra localidade. O
nome da empresa InfoComponente.
Imaginemos ento que a pgina HTML j esteja pronta e no
requer nenhum recurso de usabilidade ou mesmo visual. Assim,
temos o seguinte resultado:

Unidade 3

linguagem_de_programacao_III.indb 151

151

04/02/11 11:14

Universidade do Sul de Santa Catarina

Figura 3.1 O formulrio de requisio em que se registra apenas a quantidade de produtos


solicitados.
Fonte: Elaborada pelo autor (2010).

Perceba que h duas informaes de extrema importncia no


cdigo da requisio, como mostrado a seguir:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Formulrio</title>
</head>
<body>
<form id=frmrequisicao name=frmrequisicao method=post
action=processarrequisicao.php>
<table width=30% border=1>
<tr bgcolor=#999999>
<th width=40% scope=col>Item</th>
<th width=60% scope=col>Quantidade</th>
</tr>
<tr>
<td><label for=txtmouse>Mouse</label></td>

152

linguagem_de_programacao_III.indb 152

04/02/11 11:14

Linguagens de Programao III

<td>
<input name=txtmouse type=text id=txtmouse value=
maxlength=3/>
</td>
</tr>
<tr>
<td><label for=txtteclado> Teclado</label></td>
<td><input name=txtteclado type=text id=txtteclado value=
maxlength=3 /></td>
</tr>
<tr>
<td><label for=txtfone> Fone </label></td>
<td><input name=txtfone type=text id=txtfone value=
maxlength=3 /></td>
</tr>
</table> <p>
<input type=submit name=sbtenviar id=sbtenviar
value=Enviar /> &nbsp;
<input type=reset name=sbtlimpar id=sbtlimpar
value=Limpar />
</p>
</form>
</body>
</html>

A primeira tag do corpo do HTML a form e contm o atributo


action. Esse atributo define qual o script ler as informaes
enviadas pelo formulrio. Vale lembrar neste momento que
existem diferenas quando o mtodo de envio GET ou POST,
veremos isso mais adiante.
A segunda informao importante so os nomes dos campos do
formulrio, pois eles sero utilizados para realizar a leitura das
informaes.

Unidade 3

linguagem_de_programacao_III.indb 153

153

04/02/11 11:14

Universidade do Sul de Santa Catarina

Assim, podemos escrever o programa ou script que ser o receptor


das informaes enviadas pelo formulrio. Vamos supor que
tenhamos colocado as informaes no formulrio para mouse,
teclado e fone, sendo 3, 2 e 1, respectivamente, teramos o
seguinte resultado:

Figura 3.2 Representando a resposta do envio da requisio.


Fonte: Elaborada pelo autor (2010).

O cdigo que teramos seria:


<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Relao Cadastrada</title>
</head>
<body>
<p><h1>Requisies:</h1></p>
<?php
if ((@$_POST[txtmouse]>0)||(@$_POST[txtteclado]>0)||(@$_
POST[txtfone]>0)) {

?>
<table width=40% border=1>
<tr>
<th scope=col>Itens</th>

154

linguagem_de_programacao_III.indb 154

04/02/11 11:14

Linguagens de Programao III

<th scope=col>Quantidade</th>
</tr>
<tr>
<th scope=row>Mouse</th>
<td><?php echo @$_POST[txtmouse];?></td>
</tr>
<tr>
<th scope=row>Teclado</th>
<td><?=@$_POST[txtteclado]?></td>
</tr>
<tr>
<th scope=row>Fone</th>
<td><?=@$_POST[txtfone]?></td>
</tr>
</table>
<?php
} else {
?>
<h1> ERRO INFORMAES NO VALIDADAS!</h1>
<?php
}
?>
<a href=javascript:window.history.back(-1);>Voltar</a>
</body>
</html>

Unidade 3

linguagem_de_programacao_III.indb 155

155

04/02/11 11:14

Universidade do Sul de Santa Catarina

Vamos atentar neste momento para trs elementos do PHP que


podemos destacar. Primeiro a varivel predefinida $_POST.
Essa varivel um vetor contendo todos os elementos de um
formulrio enviado pelo mtodo post. Nesse vetor podemos
regatar os botes que esto contidos no formulrio. Caso
tenhamos utilizado o mtodo get no formulrio, o vetor do PHP
tambm se altera passando para $_GET.
O segundo elemento o @ antecedendo a varivel $_POST. O
@ no PHP na realidade uma funo de inibio de erro. Ou
seja, qualquer erro com a varivel que seja antecedida por @ ter
como valor padro nulo.
Muito cuidado com o uso do @, ele pode esconder um
erro importante do seu cdigo.

O terceiro elemento o uso das tags do PHP. A tag PHP dentro


do HTML normalmente se apresenta dentro das tags <?php ?>.
Existem ainda as tags de atalho como <?= ?>, que substituem a
funo echo (escrever).
possvel utilizar as mesmas tags do ASP para escrever
o PHP. Pesquise qual a configurao deve ser alterada
para que isso ocorra.
Normalmente o uso da tag <?php ?> juntamente com a
palavra php obrigatrio, porm possvel alterar ests
configurao de tal modo que aceite tambm sem a
palavra php <? ?>. Pesquise qual configurao dever ser
feita para que isso ocorra.

Embora nesse ponto j seja possvel iniciar uma programao


simples em PHP, veja mais um elemento importante em
programao: o comentrio. O comentrio muito til como
documentao de baixo nvel. No PHP ela pode ser de trs
formas: bloco, linha e estilo Shell.
O comentrio em bloco feito utilizando /*, e tudo que estiver
aps esse cdigo estar comentado e devendo ser encerrado com
*/.

156

linguagem_de_programacao_III.indb 156

04/02/11 11:14

Linguagens de Programao III

/*
Autor: Jos da Silva
Modificado para melhorar o desempenho em 01 de maro
*/

A segunda forma de comentrio o comentrio de linha, no qual


deve ser iniciado com // e terminar ao final da linha. Portanto,
no necessrio fechar o bloco, basta trocar a linha para terminar
o comentrio.
<td><?php echo @$_POST[txtmouse];?> // Escreve a quantidade
requisitada se existir
</td>

A terceira forma de comentrio o estilo em Shell, ou seja,


esse padro adotado pelos scripts Shell e tambm pelo PHP.
Basicamente tem a mesma sintaxe do comentrio de linha, porm
para abrir o comentrio deve-se utilizar #.
<td><?php echo @$_POST[txtmouse];?> #Escreve a quantidade
requisitada se existir
</td>

Seo 2 Variveis e constantes


As variveis e as constantes possuem papel fundamental, pois
com elas podemos manipular as informaes que so recebidas.
As variveis no PHP so representadas pelo smbolo do cifro ($)
seguido pelo nome da varivel.
<?php
$var = Bob;
$Var = Joe;

Unidade 3

linguagem_de_programacao_III.indb 157

157

04/02/11 11:14

Universidade do Sul de Santa Catarina

echo $var, $Var;

// exibe Bob, Joe

$4site = not yet;

// invlido; comea com um nmero

$_4site = not yet; // vlido; comea com um sublinhado


$tyte = mansikka; // vlido; um caractere ASCII (extendido) 228
?>

O exemplo anterior pode ser encontrado no manual


do PHP <http://www.php.net/manual/pt_BR/language.
variables.basics.php>, assim como outros exemplos.
Veja as funes para manipulao das variveis que
consta no manual do PHP: <http://www.php.net/
manual/pt_BR/ref.var.php>.

a. Tipo de dados
As variveis so classificadas pelos tipos de dados que elas podem
armazenar. Os tipos mais comuns so:

Integer (inteiro): especifica o tipo de armazenamento de


nmeros inteiros.
Float: especifica o tipo de armazenamento de ponto
flutuante (decimal, notao cientfica).

String: especifica o tipo de varivel sendo caractere.

Array: especifica o tipo de varivel sendo um vetor.

Object: especifica o tipo de varivel sendo uma instncia


de classes.

Uma grande vantagem que voc no necessita definir as


variveis pelo tipo no PHP. O interpretador identifica a dado que
est sendo atribuda varivel e define o tipo de dado da varivel,
assim possvel utilizar suas funes predefinidas especficas para
aquele tipo de informao.

158

linguagem_de_programacao_III.indb 158

04/02/11 11:14

Linguagens de Programao III

Lembre-se que o tipo definido pela ltima


atribuio feita varivel. Portanto, se inicialmente
voc atribuiu o nmero 4 para a varivel $a e
posteriormente atribuiu uma string como quatro,
no causar erro por essa atribuio.

Podemos considerar que os Arrays no PHP so vetores indexados.


Em outras palavras, um valor do tipo array uma forma de
arquivamento em memria em que os ndices so as chaves de
acesso. Lembre-se que os ndices podem assumir valores de
qualquer tipo e no somente inteiros. Outra caracterstica que
os ndices no necessitam obedecer a uma sequncia contnua. No
caso dos valores inteiros para os ndices, pode haver intervalos
sem atribuio de valores.
A verificao de tipos em PHP dinmica, valores de tipos
diferentes podem ser usados como ndices de array, assim como
os valores mapeados podem ser de diversos tipos.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Exemplo de Arrays</title>
</head>
<body>
<?
$numeros_primos = array(2, 3, 5,7);
$nomes = array(3);
$nomes[0] = Joo;
$nomes[1] = Maria;
$nomes[2] = Joaquim;
for ($i=0; $i<count($numeros_primos); $i++)

Unidade 3

linguagem_de_programacao_III.indb 159

159

04/02/11 11:14

Universidade do Sul de Santa Catarina

echo Nmeros Primos, posio .($i+1). :.$numeros_


primos[$i].<br>;
?>
<br />
<?

for ($i=0; $i<count($nomes); $i++)


print(Nomes, posio .($i+1). :.$nomes[$i].<br>);

$frutas = array(vermelha=> array(1=>ma, 2=>morango),


amarela=>banana, laranga=>array(laranja, mamo));
$i=0;
foreach ($frutas as $cor => $tipos) {
echo Indice: $cor; Valor: $tipos<br />\n;

echo As frutas da cor .$cor. so:<br>;

echo <ul>;

if (is_array($tipos))

foreach ($tipos as $indice => $valor)

else

echo <li>.$valor.</li>\n;

echo <li>.$tipos.</li>\n;

echo </ul>;

$posicao[1]=primiero valor;
$posicao[3]=segundo valor;
foreach ($posicao as $indice => $valor)

echo Indice: $indice; Valor: $valor<br />\n;

$comida= array(0=>Feijoada, dois=> Churrasco, 3=>Arroz,


quatro=>macarro, 10=>Ensopado);
while (list($indice, $valor) = each($comida))

160

linguagem_de_programacao_III.indb 160

04/02/11 11:14

Linguagens de Programao III

echo Valor do Indice : $indice e o contedo da posio :


$valor<br />;
?>
</body>
</html>

Veja que no exemplo esto sendo utilizadas vrias formas de


atribuir um array e de como acessar suas informaes. O PHP
aceita vetor binrio, ou seja, vetor dentro de outro vetor. O
comando count verifica quantas posies existem no vetor.
A instruo foreach realiza um lao para percorrer todos os ndices
e valores do vetor. Essa instruo somente pode ser utilizada com
vetores, assim como o comando each que divide o vetor em ndice
e valores unitariamente. Normalmente utilizada com a funo
list, que cria variveis como se fossem array. Assim, o resultado
esperado :

Figura 3.3 - Exemplo de arrays.


Fonte: Elaborada pelo autor (2010).

Conhea mais funes do PHP para trabalhar com arrays


no seu manual: <http://br3.php.net/manual/pt_BR/
book.array.php>

Apesar de o interpretador ser muito eficiente quanto aos tipos


de dados, ocorre que algumas vezes necessrio forar uma
converso dos tipos de dados. Isso pode ocorrer quando so
Unidade 3

linguagem_de_programacao_III.indb 161

161

04/02/11 11:14

Universidade do Sul de Santa Catarina

executadas determinadas operaes entre dois valores de tipos


diferentes. O interpretador do PHP converte o valor de um deles
automaticamente.
Os tipos de dados sero convertidos sempre para aquele que
houver menor perda. Isto , um dos operandos for float, o outro
ser convertido para float, seno, se um deles for integer, o outro
ser convertido para integer.

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Exemplo de tipo de dados</title>
</head>
<body>
<?php
echo $variavel = 1;
echo <br />;
echo $variavel = $variavel+5;
echo <br />;
echo $variavel = $variavel+25;
echo <br />;
echo $variavel = $variavel+1.999;
?>
</body>
</html>

162

linguagem_de_programacao_III.indb 162

04/02/11 11:14

Linguagens de Programao III

Como podemos notar, o PHP converte string para integer ou float


mantendo o valor. Assim, espera-se o resultado:

Figura 3.4 - Exemplo de tipo de dados.


Fonte: Elaborada pelo autor (2010).

O sistema utilizado pelo PHP para converter de strings para


nmeros o seguinte:

analisado o incio da string. Se contiver um nmero,


ele ser avaliado. Seno, o valor ser 0 (zero);
O nmero pode conter um sinal no incio (+ ou -);
Se a string contiver um ponto em sua parte numrica a
ser analisada, ele ser considerado e o valor obtido ser
float;
Se a string contiver um e ou E em sua parte numrica
a ser analisada, o valor seguinte ser considerado como
expoente da base 10 e o valor obtido ser float.

Unidade 3

linguagem_de_programacao_III.indb 163

163

04/02/11 11:14

Universidade do Sul de Santa Catarina

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://


www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Exemplo de tipo de dados</title>
</head>
<body>
<?php
echo $variavel = 1;
echo <br />;
echo $variavel = $variavel+5;
echo <br />;
echo $variavel = $variavel+25;
echo <br />;
echo $variavel = $variavel+1.999;
?>
<br />
<br />
<?php
echo $variavel = $variavel+1.8;
echo <br />;
echo $variavel = $variavel+-1.3e3;
echo <br />;
echo $variavel = $variavel+variavel3;
echo <br />;
echo $variavel = $variavel+222teste dadoas;
echo <br />;
echo $variavel = $variavel+ 9999x

teste dadoas;

echo <br />;

164

linguagem_de_programacao_III.indb 164

04/02/11 11:14

Linguagens de Programao III

?>
</body>
</html>

O browser mostrar:

Figura 3.5 - Exemplo de tipo de dados.


Fonte: Elaborada pelo autor (2010).

Outra forma de converso voc informar para o interpretador


qual o tipo de dados est sendo convertido. A sintaxe do typecast
de PHP: basta escrever o tipo entre parnteses antes do valor.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Exempl typecast</title>

Unidade 3

linguagem_de_programacao_III.indb 165

165

04/02/11 11:14

Universidade do Sul de Santa Catarina

</head>
<body>
<?php
$var = 76;
echo $var.<br />;
$var = (float) $var;
echo $var.<br />;
$var = 74.234;
echo $var.<br />;
$var = (int) $var;
echo $var.<br />;
?>
</body>
</html>

Os tipos de cast permitidos so:


(int), (integer)
(real), (double), (float)
(string)
(array)
(object)

muda para integer;


muda para float;
muda para string;
muda para array;
muda para objeto.

O resultado do exemplo :

166

linguagem_de_programacao_III.indb 166

04/02/11 11:14

Linguagens de Programao III

Figura 3.6 - Exemplo de tipo de cast.


Fonte: Elaborada pelo autor (2010).

O PHP ainda permite que sejam criadas variveis por referncia.


Isto , variveis com nomes diferentes, mas permanecem
associadas com seu valor. Quando o contedo de uma alterado,
o contedo da segunda alterado automaticamente.

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Variavel por referencia</title>
</head>
<body>
<?php
$nome = Joo da Silva;
$identificacao = &$nome;

Unidade 3

linguagem_de_programacao_III.indb 167

167

04/02/11 11:14

Universidade do Sul de Santa Catarina

echo Varivel nome = $nome<br />;


echo Varivel identificacao = $identificacao<br /><br />;

$nome = Maria Firmino;

echo Varivel nome = $nome<br />;


echo Varivel identificacao = $identificacao<br /><br />;

$identificacao = Jos Maria;

echo Varivel nome = $nome<br />;


echo Varivel identificacao = $identificacao<br />;
?>
</body>
</html>

O resultado ser:

Figura 3.7 - Exemplo de varivel por referncia.


Fonte: Elaborada pelo autor (2010).

168

linguagem_de_programacao_III.indb 168

04/02/11 11:14

Linguagens de Programao III

b. Literais
Podemos abrir um espao para explicar o uso das literais. As
literais so string brutas, ou seja, no sofrem alterao. Elas esto
contidas basicamente entre aspas ou apstrofo. Porm, o PHP
interpreta um pouco diferente dependendo do tipo de smbolo
usado.
Vejamos a literal com apstrofo: ela fora o interpretador do PHP
a ler quase todos os caracteres como literal. A exceo o uso
da contra barra antecedendo o apstrofo, assim ele interpreta o
prprio apstrofo:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Literal com apstrofo</title>
</head>
<body>
<?php
$teste=banana;
echo Literal completa;
echo <br>;
echo Interpreta a varivel $teste.;
echo <br>;

echo A contraa barra tem esta finalidade \ assim posso mostrar o


apstrofo\ ;
echo <br>;
echo A contra barra no interpreta outras sequncias de escape \n teste
;

Unidade 3

linguagem_de_programacao_III.indb 169

169

04/02/11 11:14

Universidade do Sul de Santa Catarina

?>
</body>
</html>

O browser interpreta:

Figura 3.8 - Exemplo de literal com apstrofo.


Fonte: Elaborada pelo autor (2010).

A literal contida entre aspas fora o interpretador a identificar


sequncia de escape, alm de interpretar variveis contidas dentro
das prprias literais. Utilizando o exemplo anterior teramos
outras sadas. Observe tambm que a concatenao entre literais
e variveis por meio do smbolo ponto (.).

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Literal com aspas</title>
</head>

170

linguagem_de_programacao_III.indb 170

04/02/11 11:14

Linguagens de Programao III

<body>
<?php
$teste=banana;
echo Literal completa;
echo <br>;
echo Interpreta a varivel $teste.;
echo <br>;

echo A contrabarra tem esta finalidade \ assim posso mostrar o


apstrofo\ ;
echo <br>;
echo A contra barra no interpreta outras sequncias de escape \n teste
; // neste exemplo deve-se olhar o cdigo fonte resultante... ter uma
quebra de linha no cdigo
?>
</body>
</html>

O browser mostrar:

Figura 3.9 Exemplo de literal com aspas.


Fonte: Elaborada pelo autor (2010).

Unidade 3

linguagem_de_programacao_III.indb 171

171

04/02/11 11:14

Universidade do Sul de Santa Catarina

O manual do PHP possui uma lista de sequncia de


escape que pode ser usadas, alm de outras sintaxes de
literais: <http://br2.php.net/manual/pt_BR/language.
types.string.php>.

c. Variveis predefinidas
O PHP possui uma grande gama de variveis predefinidas para
qualquer script que ele execute. Elas auxiliam para a recuperao
de informaes importantes como de formulrio, transferncia de
arquivo, cookies, entre outros.
As variveis predefinidas mais utilizadas so:
$_GET: recupera informaes do formulrio HTML.
$_POST: recupera informaes do formulrio HTML.
$_FILE: utilizada quando existe um upload de
arquivos, assim o PHP pode acessar todas as informaes
pertinentes a este arquivo.
$_SESSION: utilizada para registrar e recuperar
variveis de sesso.
$_COOKIE: possui todas as informaes registradas em
cookie. Assim, possvel recuperar suas informaes.
As variveis $_GET, $_POST, $_FILE e $_SESSION ficam
disponveis enquanto a sesso permanecer ativa. A varivel $_
COOKIE independe da sesso.
Cookies so arquivos que contm informaes trocadas
entre o browser e o servidor Web. A principal funo
manter a persistncia das sees do protocolo HTTP.
Os cookies possuem um tempo de vida, no so
permanentes. Eles so muito utilizados para manter um
perfil do usurio a uma determinada pgina. Eles so
vulnerveis, mas no representam risco de segurana
ou privacidade ao usurio.

172

linguagem_de_programacao_III.indb 172

04/02/11 11:14

Linguagens de Programao III

Todas as variveis predefinidas so na realidade um array (vetor)


de registro. Mesmo que elas s contenham uma informao,
devem ser tratadas como um array em quaisquer circunstncias.
Para saber mais sobre variveis predefinidas, acesse
o endereo <http://www.php.net/manual/pt_BR/
reserved.variables.php>.

d. Escopo de variveis
O PHP tem por definio que o escopo a abrangncia em que
a varivel pode ser acessada em um script. O escopo pode ser
definido em trs nveis bsicos no PHP, so eles:

Variveis globais: so visveis em todo o script, porm


no so visveis dentro das funes.
Variveis de funes: so visveis somente na funo que
a declarou.
Varveis globais em funes: so variveis globais que
so definidas como globais dentro das funes. Para isso,
nas funes deve ser precedida pela palavra reservada
global.

<?php
$var1=0;
Funcao teste() {
Global $var1;
(...)
}
?>

Para saber mais sobre variveis escopo de variveis,


acesse o endereo <http://www.php.net/manual/
pt_BR/language.variables.scope.php>.

Unidade 3

linguagem_de_programacao_III.indb 173

173

04/02/11 11:14

Universidade do Sul de Santa Catarina

e. Constantes
As constantes so elementos de programao que no sofrem
variao durante o software. Elas so usadas para manter
informaes padres como configuraes e elementos que no
sofrem variao. No PHP as constantes podem ser representadas
pela funo define e teramos:
define(SIMBOLOMOEDA,R);
define(DTINSTALACAO,2009-05-01);
define(COEFICIENTE,3.8);

As constantes definidas pela funo define no


necessitam do smbolo $ e podem ser acessadas de
qualquer parte do script.

e. Data
O PHP no possui um tipo de dados que seja data. Na realidade,
uma data no PHP uma string. Porm, existem funes
especficas que auxiliam no tratamento das datas.
A funo date formata uma data e hora local conforme os
parmetros utilizados.
<?
echo date(d/m/Y);
?>

Retorna a data no formato DD/MM/YYYY. Lembre-se que o


retorno sempre ser uma string. J a funo mktime retorna um
inteiro que representa um tempo no formato UNIX. Esse tempo
pode ser formatado para uma sada string. Ento para imprimir
uma data 01/01/1998 13:32:12, basta o cdigo:

174

linguagem_de_programacao_III.indb 174

04/02/11 11:14

Linguagens de Programao III

<?php
echo date(d/m/Y H:i:s, mktime(13, 32, 12, 12, 32, 1997));
?>
Voc pode encontrar outras funes de datas no
endereo <http://www.php.net/manual/pt_BR/ref.
datetime.php>.

Seo 3 Operadores
Operadores so smbolos responsveis pelas manipulaes de
valores e variveis nas linguagens. J vimos alguns operadores em
alguns exemplos. Muitos j so de conhecimento comum. Alguns
operadores podem aceitar um, dois ou trs argumentos, porm o
mais comum utilizar operador que aceitam dois operadores.

a. Operadores de caractere
possvel utilizar o operador de concatenao para unir strings
e formar um resultado de forma que se estabelea um padro
semelhante ao da adio de nmeros. Observe:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Operador de Caracter</title>
</head>

Unidade 3

linguagem_de_programacao_III.indb 175

175

04/02/11 11:14

Universidade do Sul de Santa Catarina

<body>
<?php
$parte1=Universidade do ;
$parte2=Sul de ;
$resultado=$parte1.$parte2.Santa Catarina;
echo $resultado;
?>
</body>
</tml>

O resultado ser:

Figura 3.10 - Exemplo de operador de caractere.


Fonte: Elaborada pelo autor (2010).

b. Operadores aritmticos
Os operadores aritmticos esto na categoria dos operadores
bsicos das linguagens de programao. Eles so simplesmente os
operadores responsveis pelas manipulaes matemticas.

176

linguagem_de_programacao_III.indb 176

04/02/11 11:14

Linguagens de Programao III

Tabela 5 Operadores aritmticos.


Operador

Nome

Exemplo

Adio

$a + $b

Subtrao

$a - $b

Multiplicao

$a * $b

Diviso

$a / $b

%
Mdulo
Fonte: PHP e MySQL desenvolvimento Web.

$a % $b

Os operadores de adio, subtrao, multiplicao e diviso


possuem seu funcionamento de forma esperada aos operadores
matemticos. O operador de mdulo requer uma ateno
especial, j que ele no existe nas operaes matemticas normais,
e sim um resultado de uma diviso. Portanto, o operador de
mdulo retorna o resto de uma diviso.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Operadores aritimticos</title>
</head>
<body>
<?php
$a=9;
$b=2;
echo Adio: .($a+$b).<br>;
echo Subtrao: .($a-$b).<br>;
echo Multiplicao: .($a*$b).<br>;
echo Diviso: .($a/$b).<br>;
$resultado = $a%$b;

Unidade 3

linguagem_de_programacao_III.indb 177

177

04/02/11 11:14

Universidade do Sul de Santa Catarina

echo Mdulo ou resto: .$resultado;


?>
</body>
</html>

O resultado ser:

Figura 3.11 Exemplo de operadores aritmticos.


Fonte: Elaborada pelo autor (2010).

A sada deste exemplo dever ser o resto da diviso entre o 9 e 2


sendo, portanto, 1.
Os operadores aritmticos so usados em nmeros. Caso voc
utilize esses operadores com strings, o PHP tentar converter
para um inteiro ou decimal. No sendo bem-sucedido nessa
tentativa, ele assumir que a string tem valor zero.

c. Operadores de atribuio
O operador de atribuio bsico representado pelo smbolo de
= e sempre deve ser referido como configurado ou definido
como. Em outras palavras, a varivel $a definida como
nove. Essa definio deve ser feita para no confundir com os
operadores de comparao.

178

linguagem_de_programacao_III.indb 178

04/02/11 11:14

Linguagens de Programao III

Alm do operador bsico, o PHP possui operadores de atribuio


combinados. Assim, possvel realizar operaes aritmticas
juntamente com uma atribuio.
Voc pode combinar os operadores aritmticos e o operador
de caracteres com o de atribuio, assim teremos as seguintes
combinaes:
Operador

Utilizao

Equivalente a

+=

$a += $b

$a = $a + $b

-=

$a -= $b

$a = $a - $b

*=

$a *= $b

$a = $a * $b

/=

$a /= $b

$a = $a / $b

%=

$a %= $b

$a = $a % $b

.=

$a .= $b

$a = $a . $b

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Operadores de Atribuio</title>
</head>

<body>
<?php
$a = 3;
$a += 5; // configura $a para 8, como se dissssemos: $a = $a + 5;
echo $a;

echo <br>;

Unidade 3

linguagem_de_programacao_III.indb 179

179

04/02/11 11:14

Universidade do Sul de Santa Catarina

$b = Bom ;
$b .= Dia!; // configura $b para Bom Dia!, como em $b = $b . Dia!;
echo $b;
echo <br>;

$a=23;
$b=3;
$a += $b;
echo Adio: $a<br>;
$a -= $b;
echo Subtrao: $a<br>;
$a *= $b;
echo Multiplicao: $a<br>;
$a /= $b;
echo Diviso: $a<br>;
$a %= $b;
echo Mdulo ou resto: $a<br>;
?>
</body>
</html>

180

linguagem_de_programacao_III.indb 180

04/02/11 11:14

Linguagens de Programao III

O resultado:

Figura 3.12 - Exemplo de operadores de atribuio.


Fonte: Elaborada pelo autor (2010).

d. Operadores de comparao
Como o prprio nome j diz, esses operadores tem a finalidade
de comparar valores. Os elementos que utilizam esses operadores
retornam um valor lgico (verdadeiro ou falso):
Tabela 6 Operadores de comparao.
Operador

Nome

Exemplo

==

Igual a

$a == $b

===

Idntico

$a === $b

!=

No igual

$a != $b

<>

No igual

$a <> $b

<

Menor que

$a < $b

>

Maior que

$a > $b

<=

Menor que ou igual a

$a <= $b

>=
Maior que ou igual a
Fonte: PHP e MySQL desenvolvimento Web.

Unidade 3

linguagem_de_programacao_III.indb 181

$a >= $b

181

04/02/11 11:14

Universidade do Sul de Santa Catarina

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Operadores de Comparao</title>
</head>

<body>
<?php
$a=3;
$b=3;

if ($a===$b) echo so idnticas;


else echo no so idnticas;
echo <br><strong>Teste igualdade</strong><br>;
if ($a==$b) echo so iguais;
else echo no so iguais;
?>

</body>
</html>

182

linguagem_de_programacao_III.indb 182

04/02/11 11:14

Linguagens de Programao III

O resultado:

Figura 3.13 - Exemplo de operadores de comparao.


Fonte: Elaborada pelo autor (2010).

Operador de comparao de igualdade deve-se ter


cuidado para no confundi-lo com o operador de
comparao. Eles possuem funes diferentes e a no
utilizao correta causa um erro de lgica difcil de ser
identificado.

O operador de comparao idntico deve-se ser usado com cautela,


j que ele no compara somente os valores como o de igualdade,
mas compara o tipo tambm. Portanto, os valores iguais podem ser
diferentes por causa do tipo definido para as variveis.
<?php
$a=3;
$b=3;
if ($a===$b) echo so idnticas;
else echo no so idnticas;
echo <br><strong>Teste igualdade</strong><br>;
if ($a==$b) echo so iguais;
else echo no so iguais;
?>
Unidade 3

linguagem_de_programacao_III.indb 183

183

04/02/11 11:14

Universidade do Sul de Santa Catarina

e. Operadores de incremento e decremento


Esta classe de operadores se refere a uma forma de atalho para
que se possa aumentar ou diminuir valores de variveis.
Tabela 7 Operadores de incremento/decremento.
Operador

Nome

Efeito

++$a

Pr-incremento

Incrementa $a em um, e ento


retorna $a.

$a++

Ps-incremento

Retorna $a, e ento incrementa $a em


um.

--$a

Pr-decremento

Decrementa $a em um, e ento


retorna $a.

$a--

Ps-decremento

Retorna $a, e ento decrementa $a


em um.

Os operadores de incremento e decremento no podem ser


usados com valores lgicos (verdadeiro/true ou falso/false). Quanto
aos valores NULL, no tero resultado para o decremento, mas
se for incrementado assumir 1.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Operadores de incremento de decremento</title>
</head>
<body>
<?php
$a=7;
echo A varivel \$a vale inicialmente: $a<br>;
++$a;
echo A varivel \$a vale agora: $a<br>;

184

linguagem_de_programacao_III.indb 184

04/02/11 11:14

Linguagens de Programao III

$a++;
echo A varivel \$a vale finalmente: $a<br>;
$b=56;
echo A varivel \$b vale inicialmente: $b<br>;
--$b;
echo A varivel \$b vale agora: $b<br>;
$b--;
echo A varivel \$b vale finalmente: $b<br>;
?>
</body>
</html>

Resultando em:

Figura 3.14 Exemplo de operadores de incremento e decremento.


Fonte: Elaborada pelo autor (2010).

Observe mais exemplos que conta no manual do


PHP <http://www.php.net/manual/pt_BR/language.
operators.increment.php>.

Unidade 3

linguagem_de_programacao_III.indb 185

185

04/02/11 11:14

Universidade do Sul de Santa Catarina

f. Operadores lgicos
Os operadores lgicos tm a finalidade de combinar expresses
de operadores lgicos. Desta forma, possibilita que vrias
combinaes sejam feitas dentro da mesma estrutura.
Tabela 8 Operadores lgicos.
Operador

Nome

Utilizao

Resultado

NO

!$b

Retorna verdadeiro se $b for


falso e vice-versa

&&

$a && $b

Retorna verdadeiro se $a e
$b forem verdadeiros; caso
contrrio falso

||

OU

$a || $b

Retorna verdadeiro se $a ou $b
ou ambos forem verdadeiros

AND

$a and $b

O mesmo que &&, mas com


procedncia mais baixa

OR

OU

$a or $b

O mesmo que ||, mas com


precedncia mais baixa

Fonte: PHP e MySQL desenvolvimento Web.

Seo 4 Estrutura de controle


As estruturas de controle so responsveis pelas automatizaes
e restries do fluxo da execuo. Desta maneira, conseguimos
manipular de forma mais efetiva as operaes necessrias para a
soluo.
As estruturas de controle so elementos que permitem manter o
controle sobre o fluxo da execuo. Elas podem ser representadas
de diversas formas, normalmente so nominadas pelo seu efeito.
Basicamente podemos classific-las de dois tipos: tomada de
deciso e de repetio.

186

linguagem_de_programacao_III.indb 186

04/02/11 11:14

Linguagens de Programao III

a.Instruo de tomada de deciso: if


Esta instruo responsvel por comparaes simples no fluxo.
O if a instruo bsica para tomada de deciso. Ela testa uma
condio e decide se deve ser executado bloco verdadeiro (quando
a condio for verdadeira) ou o bloco falso (quando a condio for
falsa). As instrues na condio if devem estar contidas dentro
de parnteses.
O if utiliza os operadores lgicos e os operadores de comparao
para construir as expresses de condio. Ainda, o bloco que
define o escopo das instrues compreendido entre chaves.
Quando as chaves so omitidas, o interpretador compreende que
no existe um bloco de instruo. Consequentemente, somente a
primeira instruo executada.
<?php
$a=23;
if ($a>=18) {
echo Idade: $a;
echo <BR>;
echo maior de idade<BR>;
if ($a<21)
echo Voc no maior de 21 anos<BR>;
echo Fim do processo;
}
?>

O if possui um comando de desvio, a instruo else. O else possui


a finalidade de executar uma condio contraria a testada. Desta
forma, o exemplo anterior ficaria:

Unidade 3

linguagem_de_programacao_III.indb 187

187

04/02/11 11:14

Universidade do Sul de Santa Catarina

<?php
$a=23;
if ($a>=18) {
echo Idade: $a;
echo <BR>;
echo maior de idade<BR>;
if ($a<21)
echo Voc no maior de 21 anos<BR>;
else
echo Voc maior de 21 anos<BR>;
echo Fim do processo;
} else {
echo Idade: $a;
echo <BR>;
echo menor de idade;
}
?>

O PHP suporta a instruo elseif, que na prtica significa


encadear diversas instrues if e else. Combinando essas duas
instrues em uma nica estrutura:
<?php
$a=4;
$b=4;
if ( $a > $b ) {
echo a maior que b ;
} elseif ( $a == $b ) {
echo a igual a b ;
} else {
echo a menor que b ;
}
?>

188

linguagem_de_programacao_III.indb 188

04/02/11 11:14

Linguagens de Programao III

Outra instruo que se compara ao if o operador ternrio. Esse


operador utilizado para comparao e atribuio. A sua sintaxe
:
condio ? valor_verdade : valor_falso

Assim, podemos exemplificar da seguinte forma:


<?php
$a=23;
$b=($a>=18)? Maior de idade: Menor de idade;
echo idade: $a<br>\n$b;
?>

b. Instruo de tomada de deciso SWITCH


A instruo switch semelhante instruo if. Porm, ao
contrrio do if que aceita somente dois valores de resultado para
a condio (verdadeiro ou falso), essa instruo pode aceitar mais
dois valores.
fundamental entender o funcionamento do switch.
Basicamente, essa instruo busca comparao de valores, ou
seja, a partir de uma varivel busca-se uma lista de valores
para encontrar o seu igual. Uma vez encontrado executa-se a
instruo.
<?php
$a=4;
switch ($a) {

case 1 :

echo um;

break;

case 2 :

Unidade 3

linguagem_de_programacao_III.indb 189

189

04/02/11 11:14

Universidade do Sul de Santa Catarina

echo dois;

break;

case 3 :

echo trs;

break;

case 4 :

echo quatro;

break;

default :

echo padro;

break;

}
?>

Uma situao especial no caso do switch o uso da instruo


default. Essa instruo acionada quando no encontrada
nenhuma condio verdadeira dentro do case.

c. Instruo de repetio while


A instruo while tem um comportamento semelhante ao if. O
while utiliza uma condio para que o bloco de repetio seja
executado enquanto a condio se mantiver verdadeira.
O uso mais frequente desse lao quando no podemos
visualizar o nmero de iteraes que o lao deve executar. Desta
forma, o lao pode ser executado nenhuma ou n vezes.

190

linguagem_de_programacao_III.indb 190

04/02/11 11:14

Linguagens de Programao III

<?php
echo exemplo 1 <br>\n;
$i = 1;
while ($i <= 10) {
echo ++$i.\n<br>\n;
}
echo <br>exemplo 2 <br>;
$i = 1;
while ($i <= 10):
echo $i.\n<br>\n;
$i++;
endwhile;
?>

d.Instruo de repetio for


Este lao de repetio para uso exclusivo de incremento
ou decremento de variveis. Assim, torna-se indispensvel a
informao exata de quantas iteraes o lao deve executar.
Utilizando o mesmo exemplo anterior podemos ter agora:
<?php
echo exemplo 1 <br>\n;
for ($i=10;$i >= 1;$i--) {
echo $i.\n<br>\n;
}
echo <br>exemplo 2 <br>;
$i = 1;
for ($i=1;$i <= 10;$i++) {
echo $i.\n<br>\n;
}
?>
Unidade 3

linguagem_de_programacao_III.indb 191

191

04/02/11 11:14

Universidade do Sul de Santa Catarina

No existem diferenas de desempenho entre a


instruo for e a instruo while. Voc pode utilizar
qualquer um dos dois em determinadas situaes.

e. Instruo de repetio do..while


O PHP possui uma contrao do lao while. Essa contrao
inverte a posio da condio a ser respeitada. No while a
condio testada no incio do bloco, j na do..while a condio
executada no final do lao. Essa pequena diferena garante ao
do..while que as instrues dentro do lao sejam executadas pelo
menos uma nica vez. Uma garantia que o while no pode dar.
<?php
$i = 3;
do {
echo $i++.<br>;
} while ($i > 0);
?>

f. Funes
Funes so trechos de cdigos destinados a executar uma tarefa
especfica. Qualquer cdigo PHP pode ser escrito dentro de
funes. Lembre-se que a varivel de retorno no necessita ser
declarada. Porm, recomendado que voc documente qual valor
e tipo est sendo retornado em uma funo.
Qualquer funo possui a capacidade de retornar um valor,
porm no obrigatrio. Uma funo pode existir apenas para
executar determinados cdigos e no interagir com o restante do
programa. O PHP aceita que somente uma varivel ou constante
seja retornada por uma funo. Mas a varivel poder ser um
array.

192

linguagem_de_programacao_III.indb 192

04/02/11 11:14

Linguagens de Programao III

A utilizao de argumentos em funes extremamente til, pois


podemos encaminhar valores s funes para que elas possam
executar suas tarefas. Os argumentos devem ser declarados logo
aps o nome da funo, entre parnteses, e tornam-se variveis
pertencentes ao escopo local da funo. Podemos utilizar trs
modos de argumentos em PHP.

Argumento por cpia;

Argumento por referncia;

Argumento default.

Os argumentos por cpia so valores enviados s funes onde


a sua manipulao no se reflete no restante do programa. J os
argumentos por referncia, afetam qualquer varivel que possua
a referncia do argumento. O argumento default significa que,
caso a chamada da funo no contenha um valor o argumento,
assume o valor preestabelecido.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8
/>
<title>Funes no PHP</title>
</head>
<body>
<?php
function simples() {

echo Funo sem argumentos e sem retorno<br />;

}
function retorno() {

return Funo que contm um retorno<br />;

Unidade 3

linguagem_de_programacao_III.indb 193

193

04/02/11 11:14

Universidade do Sul de Santa Catarina

function argumentocopia ($var1,$var2, $vetor) {


echo Funo com argumentos por cpias<br />;

for ($i=0;$i<count($vetor);$i++)

echo Posio $i valor: .$vetor[$i].<br />;

$var1 += 5;

$var2 = Sem alterao;

echo Os valores atuais das variveis so: $var1, $var2<br />;

}
function argumentoreferencia (&$var1,$var2) {

echo Funo com argumentos por referencia<br />;

$var1 += 5;

$var2 = Sem alterao;

echo Os valores dentro da funo nas variveis so: $var1, $var2<br


/>;
}
function argumentodefault ($var1 = Com argumentos, $var2=Sem
argumentos) {

// pode ser utilizado com qualquer argumento

echo Funo com argumentos default<br />;

echo O valor atual das variveis so: $var1, $var2<br />;

}
simples();
echo <br />;
echo retorno();
echo <br />;
echo <strong>Argumentos por cpia</strong><br />;

$argumento1=10;
$argumento2=Segundo;
$argumento3[0]=Banana;
$argumento3[1]=Ma;

194

linguagem_de_programacao_III.indb 194

04/02/11 11:14

Linguagens de Programao III

$argumento3[2]=Morango;
$argumento3[3]=Melo;

argumentocopia ($argumento1,$argumento2, $argumento3);


echo <br />;
echo As variveis no programa no sofreram alterao<br />;
echo Valor da varivel argumento1: $argumento1, valor da varivel
argumento2: $argumento2<br />;
for ($i=0;$i<count($argumento3);$i++)

echo Posio $i valor: .$argumento3[$i].<br />;

echo <br />;

echo <strong>Argumentos por referncia</strong><br />;

$argumento1=45;
$argumento2=Dois;
echo Os valores dos argumentos antes de encaminhar a funo so:
$argumento1, $argumento2<br />;
argumentoreferencia ($argumento1,$argumento2);
echo Aps a funo ser executada apenas a varivel por referncia ter
seu valor alterado: $argumento1, $argumento2<br />;
echo <br />;

echo <strong>Argumentos com valor default</strong><br />;


argumentodefault(Encaminhado Valor);
?>
</body>
</html>

Unidade 3

linguagem_de_programacao_III.indb 195

195

04/02/11 11:14

Universidade do Sul de Santa Catarina

Voc pode mesclar esses tipos de argumentos, ou seja, em uma


mesma funo voc pode conter todos os tipos de argumentos.
Os valores default no so obrigatrios em todos os argumentos.
Voc pode utilizar em um nico argumento e nos demais no.

Figura3.15 - Exemplo de funo no PHP.


Fonte: Elaborada pelo autor (2010).

196

linguagem_de_programacao_III.indb 196

04/02/11 11:14

Linguagens de Programao III

Seo 5 Trabalhando com arquivos


Uma funcionalidade muito comum em diversas linguagens a
manipulao de arquivos. Normalmente utilizada para ler ou
escrever um arquivo de comunicao, ou seja, um arquivo que
contm informaes pertinentes a uma integrao assncrona.
Lembre-se sempre que manipular arquivos requer
permisso de acesso ao arquivo ou diretrio. Sempre
verifique se os acessos no servidor esto corretos.

Para simplificar o estudo, vamos adotar como padro a


manipulao de arquivos somente. Mesmo assim voc
pode ampliar seus estudos consultando o manual do
PHP no endereo <http://br2.php.net/manual/pt_BR/
ref.filesystem.php>.

Fopen
A funo fopen responsvel por abrir um URL. Ou seja,
informando um endereo o PHP tentar encontrar qual o
protocolo resolver a URL. Assim como interpreta que a abertura
de um arquivo fsico uma forma de protocolo.
A sintaxe dessa funo :
fopen(url,mode)

Podemos representar da seguinte forma:


<?php
$arquivo = fopen(c:\teste.txt,r);
?>

O mode na realidade o modo em que voc trabalhar a URL.


Esses tipos de manipulao esto descritos na tabela a seguir:

Unidade 3

linguagem_de_programacao_III.indb 197

197

04/02/11 11:14

Universidade do Sul de Santa Catarina

Tabela 9 Tipos de abertura de arquivos.

mode

Descrio

Abre somente para leitura; coloca o ponteiro do arquivo no comeo do


arquivo.

r+

Abre para leitura e escrita; coloca o ponteiro do arquivo no comeo do


arquivo.

Abre somente para escrita; coloca o ponteiro do arquivo no comeo do


arquivo e reduz o comprimento do arquivo para zero. Se o arquivo no
existir, tenta cri-lo.

w+

Abre para leitura e escrita; coloca o ponteiro do arquivo no comeo do


arquivo e reduz o comprimento do arquivo para zero. Se o arquivo no
existir, tenta cri-lo.

Abre somente para escrita; coloca o ponteiro do arquivo no final do


arquivo. Se o arquivo no existir, tenta cri-lo.

a+

Abre para leitura e escrita; coloca o ponteiro do arquivo no final do


arquivo. Se o arquivo no existir, tenta cri-lo.

Cria e abre o arquivo somente para escrita; coloca o ponteiro no


comeo do arquivo. Se o arquivo j existir, a chamada a fopen()
falhar, retornando FALSE e gerando um erro de nvel E_WARNING.
Se o arquivo no existir, tenta cri-lo. Isto equivalente a especificar as
flags O_EXCL|O_CREAT para a chamada de sistema open(2).

x+

Cria e abre o arquivo para leitura e escrita; coloca o ponteiro no


comeo do arquivo. Se o arquivo j existir, a chamada a fopen()
falhar, retornando FALSE e gerando um erro de nvel E_WARNING.
Se o arquivo no existir, tenta cri-lo. Isso equivalente a especificar as
flags O_EXCL|O_CREAT para a chamada de sistema open(2).

Em contrapartida, a funo fclose fecha o arquivo aberto.


Normalmente aps a execuo do script o sistema fecha as sees
abertas. Porm, aconselhvel sempre fechar manualmente
para evitar que o arquivos seja corrompido quando fechado pelo
encerramento do programa.

Fwhite
A funo fwrite responsvel em escrever no arquivo aberto.
Essa uma das principais funes dentro da categoria de
manipulao de arquivos. Com ela podemos imprimir todas as
informaes necessrias dentro um arquivo especificado.

198

linguagem_de_programacao_III.indb 198

04/02/11 11:14

Linguagens de Programao III

<?php
$filename = teste.txt;
$conteudo = Acrescentar isso ao arquivo\n;

// Primeiro vamos ter certeza de que o arquivo existe e pode ser alterado
if (is_writable($filename)) {

// caso exita vamos adicionar

if (!$handle = fopen($filename, a)) {


echo No foi possvel abrir o arquivo ($filename);
exit;
}

} else {

// caso no exista vamos cri-lo

if (!$handle = fopen($filename, w+)) {


echo No foi possvel abrir o arquivo ($filename);
exit;
}

}
// Escreve $conteudo no nosso arquivo aberto.
if (fwrite($handle, $conteudo) === FALSE) {

echo No foi possvel escrever no arquivo ($filename);

exit;

}
echo Sucesso: Escrito ($conteudo) no arquivo ($filename);
fclose($handle);
?>

Unidade 3

linguagem_de_programacao_III.indb 199

199

04/02/11 11:14

Universidade do Sul de Santa Catarina

Observe que nesse exemplo foi forado o teste para verificar se o


arquivo existe e pode ser gravado. Utilizando o mesmo exemplo e
abrindo o arquivo no modo w+ j seria o suficiente para criar ou
reescrever o arquivo.
Lembre-se sempre que o manual do PHP possui
referncias e exemplos nos quais voc pode
testar. Acesse <http://br2.php.net/manual/pt_BR/
function.fwrite.php>.

Fgets
O fgets a funo de leitura de uma linha. Ou seja, com ela
lemos uma linha inteira e acrescentamos a uma varivel. Uma
vez na varivel podemos interpretar e manipular a informao
conforme a necessidade.
<?php
//para este exemplo necessrio que o arquivo arquivodeentrada.txt
exista no mesmo diretrio que o script est salvo
if ($arquivo = @fopen(arquivodeentrada.txt, r)) {

$contador=1;

// feof verifica se chegou a fim do arquivo


while (!feof($arquivo)) {
$leitura = fgets($arquivo);
echo Linha .$contador++.: $leitura<br>;
}
fclose($arquivo);

} else {

echo No foi possvel abrir o arquivo;

}
?>

200

linguagem_de_programacao_III.indb 200

04/02/11 11:14

Linguagens de Programao III

A manipulao extremamente importante, pois muito


utilizada para a troca de informaes off-line. Em diversas
situaes, existe a necessidade de exportar determinadas
informaes. Isso pode ocorrer por meio de um arquivo
formatado ou at mesmo por XML. A funo bsica criar o
arquivo e ler linha por linha a fim de identificar seu contedo.

Sntese
Neste captulo voc ser apresentado linguagem serve-side
PHP. O PHP uma linguagem simples de ser desenvolvida
em funo da sua estrutura. Tanto possvel utilizar tcnicas
avanadas como orientao a objetos quanto simplificar o
desenvolvimento utilizando uma programao estruturada.
Como era de se esperar, o interpretador extremamente
dinmico. No necessrio se preocupar com declaraes de
variveis. O PHP se encarrega de interpretar o tipo de dados
a ser trabalhado. J quanto aos vetores, possui um leque de
opes que supre praticamente quaisquer necessidades que nos
deparemos.
Ainda oferece a possibilidade de trabalhar com arquivos de uma
forma simples. Os arquivos so muito utilizados como relatrios
e comunicao de dados de uma forma off-line, ou seja, a
comunicao no se d em tempo real.

Atividades de autoavaliao
Ao final de cada unidade, voc ser provocado a realizar atividades de
autoavaliao. O gabarito est disponvel no final do livro-didtico. Mas se
esforce para resolver as atividades sem ajuda do gabarito, pois assim voc
estar estimulando a sua aprendizagem.
1. Faa um script para validar um formulrio utilizando a linguagem PHP. O
formulrio deve conter nome, endereo, nome da me, idade e e-mail.
Faa uma pgina de resposta para que o PHP leia e escreva na pgina
o resultado do formulrio. A idade deve ser superior a dois anos e o
e-mail deve ser validado.

Unidade 3

linguagem_de_programacao_III.indb 201

201

04/02/11 11:14

Universidade do Sul de Santa Catarina

2. Acrescente ao exerccio anterior a criao de um arquivo texto das


informaes provenientes do formulrio. O arquivo texto deve conter
os seguintes padres:
Nome
Endereo
Nome da me
Idade
E-mail
Escreva um terceiro para ler essas informaes do arquivo e organiz-los
em uma tabela do HTML. Publique sua resposta na ferramenta Exposio
do EVA.

Saiba mais
Se voc desejar, aprofunde os contedos estudados nesta unidade
ao consultar as seguintes referncias:
Manual PHP, 2010. Disponvel em <http://br2.php.net/manual/
pt_BR/index.php>. Acesso em: 5 abr. 2010.
PHP Brasil, 2010. Disponvel em <www.phpbrasil.com>. Acesso
em: 5 abr. 2010.
Truquese Dicas Tutoriais de Javascript, 2010. Disponvel em
<www.truquesedicas.com/tutoriais/php/index.htm>. Acesso em:
2 mar. 2010.

202

linguagem_de_programacao_III.indb 202

04/02/11 11:14

unidade 4

Sistemas Web com banco de


dados (PHP + MYSQL)
Objetivos de aprendizagem
Ao final desta unidade, voc ter subsdios para:

Delimitao de aplicaes Web com acesso a banco de


dados.

Saber realizar consultas.

Trabalhar com manipulao de dados.

Utilizar sesses de aplicaes Web.

Sees de estudo

linguagem_de_programacao_III.indb 203

Seo 1

Banco de dados

Seo 2

Banco de dados e acessos

Seo 3

Trabalhando com tabelas

Seo 4

API do PHP

Seo 5

Envio e recuperao de dados

Seo 6

Sesses e cookies

04/02/11 11:14

Universidade do Sul de Santa Catarina

Para incio de estudo


Quando falamos em sistemas de software, natural pensar em
armazenamento e recuperao de dados. Embora possamos
classificar a maioria dos sistemas desta maneira, existem sistemas
que tratam de problemas cujo foco no o armazenamento e a
recuperao.
A manipulao de dados pode acontecer de qualquer forma que
se permita salvar esses dados e, normalmente, essa ao utiliza
um banco de dados. Ao utilizar um banco de dados, voc tem
vantagens, como acesso rpido aos dados, facilidade em extrair
conjuntos de dados, mecanismos predefinidos para lidar com
acesso concorrente, entre outros.
Veremos como o PHP trabalha com um banco de dados, mais
especificamente com o MySQL. O seu escopo de trabalho, como
manipular dados, e como montar uma sesso de acesso.
Vale registrar que neste ponto ser abordado de forma superficial
as funcionalidades do banco de dados. O foco principal de estudo
como utiliza-lo para desenvolver sistemas dinmicos.

Seo 1 Banco de dados


Um banco de dados tem a finalidade de proporcionar
mecanismos que facilitem as transaes de armazenamento
de dados. Esses dados so formatados em tabelas cada qual
contendo colunas e linhas.
Essas tabelas podem se relacionar entre si utilizando colunas
chamadas chaves, que nada mais so que os identificadores dos
dados. Alm de se saber identificar e trabalhar com eles, voc
deve saber projetar um banco de dados para Web.

204

linguagem_de_programacao_III.indb 204

04/02/11 11:14

Linguagens de Programao III

Banco de dados na Web


A diferena crucial entre um desenvolvimento com banco de dados
entre um sistema desktop e um sistema Web que no sistema
desktop normalmente h uma conexo nica com o banco de dados.
Enquanto a aplicao permanecer aberta, a conexo no se desfaz.
Quando desenvolvemos em um sistema Web, o funcionamento
um pouco diferente, pois toda a operao de conexo com o banco
de dados se d no servidor.
Quem faz a chamada uma aplicao externa que no mantm uma
conexo com esse servidor de forma permanente.
Podemos considerar que a cada resposta do servidor Web a
conexo se desfaz. Desta forma, no h necessidade de se manter
uma conexo aberta entre a linguagem server-side e o banco de
dados. Em termos gerais, voc pode perceber que toda a pgina
que necessitar conectar ao banco de dados dever abrir uma nova
conexo e ao final essa conexo ser fechada. Ainda nesta unidade,
retomaremos esse assunto para seu melhor entendimento.

Modelo relacional
O modelo relacional ainda o principal modelo utilizado hoje
em dia, mesmo tendo sido criado na dcada de 1970. Como j
foi comentado, o sistema gerenciador de banco de dados utiliza o
armazenamento de dados em tabelas que possuem relaes entre si.
Assim, a ideia do modelo relacional que os dados correlatos
devem estar contidos na mesma tabela e utilizamos
relacionamentos entre tabelas para agruparmos dados menos
correlatos.
Considere este exemplo: um cadastro de clientes deve-se
ter as informaes pessoais de cada cliente, porm,
nesta mesma tabela, acrescentar as informaes de
endereo torna-se redundante. Por causa disso, criamos
uma segunda tabela com os endereos comuns (rua,
CEP, bairro, cidade, estado). Na tabela cliente, apenas
informamos a referncia do endereo, e no todo ele.

Unidade 4

linguagem_de_programacao_III.indb 205

205

04/02/11 11:14

Universidade do Sul de Santa Catarina

Observe que nesse exemplo podemos usar mais relacionamentos.


Realizar a anlise para diminuir a redundncia de informaes
chama-se normalizao de dados.
importante destacar tambm que os relacionamentos
utilizam tipos especficos de campos na tabela. Esses tipos so
denominados de chaves primrias e estrangeiras.
Podemos resumir que uma coluna, ou campo, um pedao
simples de dados definido por um tipo, tamanho ou outras
caractersticas. J a linha, ou registro, um simples conjunto
ordenado de colunas. Portanto, uma tabela contm um nmero
fixo de colunas e qualquer nmero de linhas.
Podemos concluir que um banco de dados um conjunto de
TABELAS.

MySQL
O MySQL um banco de dados SQL multiusurio e multithreading (executa eventos em paralelo).
Normalmente os sistemas que utilizam o MySQL no possuem
um grande volume de informaes. Ele acaba sendo utilizado em
todo o seu potencial para aplicaes com baixo a mdio volume
de dados.
O MySQL utilizado em diversos sistemas e tem como
caractersticas marcantes estabilidade e agilidade nas operaes.
Hoje, possui controle de transao, suporte a procedure, entre
outras funcionalidades, e utiliza como base o modelo relacional
de gerenciamento de dados e sua linguagem padro o SQL.
Ainda mantm uma caracterstica que o tornou popular:
facilidade de gerenciamento.
O MySQL possui algumas particularidades que facilitam
o desenvolvimento de aplicaes. Perceba que, alm das
informaes comuns do SQL, como NOT NULL ou
PRIMARY KEY, ao final do comando existem algumas

206

linguagem_de_programacao_III.indb 206

04/02/11 11:14

Linguagens de Programao III

informaes adicionais que so se suma importncia. Essas


informaes so os chamados Storage Engines.

Storage engines
Storage engine refere-se ao tipo de armazenamento que o banco
de dados utilizar. No so todos os banco de dados que podem
alterar o tipo de armazenamento conforme a necessidade. O
MySQL permite voc alterar esse tipo de armazenamento para
cada tabela criada. Portanto, podemos escolher qual a melhor
forma de armazenamento para cada aplicao a ser desenvolvida.
Voc pode estar se questionando: para que mudar o
tipo de armazenamento? Simplesmente para adequar
a realidade do problema.

Cada storage engine possui algumas caractersticas nas quais pode


se fazer necessrio para melhorar a soluo do problema. Desta
forma, para chegar melhor soluo, necessrio que se conhea
as principais caractersticas inerentes aos storage engines:

Transacional: caracterstica em que a tabela aceita


mltiplos acessos. Isso significa que uma ao de um
usurio ou aplicao no interfere com a operao do
outro. Pode executar comandos em blocos (transao) em
vez de executar um comando SQL por vez.
Armazenamento: o MySQL permite gravar a tabela
100% em memria, isto , nada no disco. Pode-se gravar
dados em uma TABLESPACE, ou seja, um arquivo
onde se armazena todas as tabelas do banco. Pode-se
utilizar ainda uma forma de arquivamento extramente
rpida, conhecida como ISAM, para gravar dados e
recuper-los de forma gil. Outro tipo de engine pode
gravar os dados de forma compactada, economizando
muito espao em disco. Ainda, pode-se gravar em
formato CSV (arquivo com delimitador), que facilita
bastante a integrao com equipamentos de rede e
telefonia, por exemplo. E mais, em vez de ler e gravar os

Unidade 4

linguagem_de_programacao_III.indb 207

207

04/02/11 11:14

Universidade do Sul de Santa Catarina

dados no servidor onde o MySQL est instalado, pode-se


espalhar os dados por vrios computadores para se criar
um cluster de alta disponibilidade e alta performance.

ndices: dependendo do motor, temos ndices do tipo


B-TREE, B+TREE, RTREE (spatial) ou FULL TEXT
(que indexa palavras, em vez da coluna ou do campo
inteiro, e permite buscas como fazemos no Google,
digitando palavras fora de ordem).
Integridade Referencial: so as Foreign Key (chaves
estrangeiras). No so todos os engines que a utiliza.
Como todos os recursos que estamos discutindo,
dependendo da aplicao ou finalidade da tabela isso
no necessrio, e uma funcionalidade que pesa para o
banco de dados. s vezes, no ter este recurso pode ser
uma vantagem em termos de velocidade.
Lock: a capacidade de poder travar um nico registro
(linha ou tupula), vrios registros ou a tabela inteira.
Cada engine tem um ou mais tipo de travamentos
disposio da tabela.
Backup On-Line: o MySQL permite realizar backups
em processo batch ou ainda on-line. Algumas storage
engines permitem tal funcionalidade.
Auto Recovery: h engines que, caso haja uma corrupo
de ndice, por exemplo, voc pode utilizar o comando
REPAIR TABLE. H outros, no entanto, que no
mximo voc ser avisado, por meio do log de erro, que
o MySQL server encontrou uma inconsistncia e j
consertou.

A imagem a seguir ilustra a arquitetura do MySQL, conectores,


engines e o gerenciador de banco de dados propriamente dito.

208

linguagem_de_programacao_III.indb 208

04/02/11 11:14

Linguagens de Programao III

Figura 4.1 Arquitetura do MySQL.


Fonte: <http://forge.mysql.com/wiki/MySQL_Internals_Custom_Engine>. Acesso em 06 jan. 2011.

Management Server & Utilities - so as ferramentas


de administrao, backup, segurana, configurao,
migrao, entre outras.
Connection Pool - a camada que faz a autenticao,
gerencia a thread (processo), limites de conexo,
memrias e caches (atalho de processo).
SQL Interface - camada que controla as estruturas do
SQL como procedimentos, views, triggers, entre outros.
Parser - verifica a sintaxe do comando SQL e os
privilgios de acesso.
Optimizer - monta as estatiscas do banco de dados para
evetuais relatrios de desempenho.
Caches & buffers - camada onde se cria atalhos e alocao
de memrias para comandos e estruturas especficas.
Pluggable Storage Engines - camada responsvel
pelo gerenciamento e controle da estrutura de
armazenamento.
File System - controla o arquivamento fsico conforme a
formatao do sistema operaciional.

Unidade 4

linguagem_de_programacao_III.indb 209

209

04/02/11 11:14

Universidade do Sul de Santa Catarina

Files & logs - gerencia arquivos fsicos diversos de


controles (logs, ndices, erros etc) .

As storages engines mais comuns so a InnoDB e a MyISAM.


Veremos agora as principais caractersticas destes storages engines.

InnoDB
O InnoDB foi desenvolvido para obter o mximo de performance
ao processar grande volume de dados e usado na produo de
vrios sites com banco de dados grandes e que necessitam de alto
desempenho.
Este storage prov o MySQL com um mecanismo de
armazenamento seguro com transaes com commit, rollback e
recuperao em caso de falhas. O InnoDB faz bloqueio a nvel
de registro e tambm fornece uma leitura sem bloqueio em
SELECT em um estilo consistente com Oracle. Esses recursos
aumentam a performance e a concorrncia de multiusurios.
InnoDB o primeiro gerenciador de armazenamento no MySQL
que suporta restries FOREIGN KEY.
Tecnicamente, InnoDB um banco de dados completo colocado
sob o MySQL. InnoDB tem sua prpria rea de buffer para
armazenar dados e ndices na memria principal. InnoDB
armazena suas tabelas e seus ndices em uma tablespace, o qual
pode consistir de vrios arquivos. Isso diferente, por exemplo,
de tabelas MyISAM, em que cada tabela armazenada como
um arquivo separado. Tabelas InnoDB podem ser de qualquer
tamanho, mesmo em sistemas operacionais em que o sistema de
arquivo limitado a 2 GB.

MyISAM
As tabelas MyISAM possuem algumas caractersticas que podem
auxiliar na soluo do problema. Voc pode compactar tabelas
MyISAM para utilizar menos espao. Voc pode INSERIR
novas linhas em uma tabela que no tenha blocos livres no meio
210

linguagem_de_programacao_III.indb 210

04/02/11 11:14

Linguagens de Programao III

do arquivo de dados, na mesma hora, outras threadas (processo de


conexo) so lidas da tabela (insero concorrente).
Um bloco livre pode vir de uma atualizao de uma linha de
tamanho dinmico com muitos dados para uma linha com menos
dados ou ao deletarmos linhas. Quando todos os blocos livres so
usados, todas as inseres futuras sero concorrentes de novo.
Todo dado armazenado com byte mais baixo primeiro, ou seja,
o dado que possui menor tamanho fsico. Isso torna a mquina
e o sistema operacional independentes. A nica exigncia para
a portabilidade do arquivo binrio que a mquina utilize
inteiros com sinais em complemento de dois e formato de pontos
flutuante IEEE.

Todas as chaves numricas


esto armazenadas com o
byte mais alto em primeiro
para conseguir melhor
compactao do ndice.

No h uma grande perda de velocidade em realizar esse tipo de


armazenamento. O cdigo atual busca-valor-coluna tambm no
crtico em relao ao tempo comparado a outro cdigo.
O tratamento interno para uma coluna com a propriedade de
AUTO_INCREMENT (numerao automtica sequencial para
uma chave primaria) em uma Engine MyISAM de atualizar
automaticamente aps INSERT/UPDATE seus ndices de
controle. Ele far colunas AUTO_INCREMENT mais rpidas
(pelo menos 10%) e nmeros antigos no sero reutilizados.
Ao inserir ordenadamente (como quando se utiliza colunas
AUTO_INCREMENT), a rvore-chave ser separada de
forma que o n do mais alto contenha apenas uma chave. Isso
aumentar a utilizao de espao na rvore de chaves. As colunas
BLOB e TEXT podem ser indexadas, assim como os valores
NULL so permitidos em colunas indexadas.

Unidade 4

linguagem_de_programacao_III.indb 211

211

04/02/11 11:14

Universidade do Sul de Santa Catarina

Seo 2 Banco de dados e acessos


Relembramos alguns conceitos de banco de dados e conhecemos
algumas caractersticas inerentes ao MySQL que nos ajudaram
em um desenvolvimento. Portanto, alguns procedimentos so
ideais para que possamos trabalhar.
No vamos entrar na instalao do MySQL, uma
vez que, pela diversidade de sistemas operacionais
e constante atualizao banco, fica invivel a
manuteno de um tutorial para instalao. Qualquer
dvida, deve-se solicitar ao professor da disciplina.

Criando uma base de dados


O conjunto de caracteres aceito em um banco de dados
denominado collation. No MySQL no podem ser nulos. Os
comandos CREATE DATABASE e ALTER DATABASE
possuem clusulas opcionais para especificarem o collation de
banco de dados:
CREATE DATABASE db_name
[DEFAULT CHARACTER SET character_set_name [COLLATE collation_
name]]
ALTER DATABASE db_name
[DEFAULT CHARACTER SET character_set_name [COLLATE collation_
name]]
Exemplo:
CREATE DATABASE db_name
DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;

O collation do banco de dados utiliza valores padres caso no


sejam informados durante a criao deste banco. O valor padro
definido na configurao do MySQL. Assim, para voc criar
seu primeiro banco, deve acessar o MySQL com o usurio de
administrador (normalmente o login root) por meio de um
cliente SQL conectado ao banco de dados.
212

linguagem_de_programacao_III.indb 212

04/02/11 11:14

Linguagens de Programao III

Em seguida, crie uma base de dados (ou schema, ou banco de


dados).
O comando SQL para isso create database.
Vamos supor que o nome da base de dados seja prg3.
Ento o comando ficaria:
CREATE DATABASE prg3 ;

Lembre-se que o SQL no case-sensitive, portanto no


diferencia maisculas de minsculas.

Aps executar esse comando, o banco de dados ser criado com


as configuraes padres. Caso queira trocar o nome do banco ou
collation criada, basta utilizar o comando ALTER DATABASE.
Vamos supor que fosse necessrio alterar o comando o collation
para Sueco, sem diferenciar maisculas ou minsculas. Faramos
o seguinte comando:
ALTER DATABASE prg3 DEFAULT CHARACTER SET latin1 COLLATE latin1_
general_ci;

Lembre-se que o collation do banco de dados no impede que a


tabela seja criada em outra coleo. Apenas indica qual o padro
a ser utilizado pelo banco. Veja a seguir uma tabela com os
collations mais utilizados.
Collation

Descrio

big5_bin

Chins Tradicional, Binrio

binary

Binrio
cp1250 (Windows Central European)

cp1250_bin

Europeu Central (multilinguagem), Binrio

cp1250_croatian_ci

Croata, No diferencia maisculas/minsculas

cp1250_czech_cs

Tcheco, Diferencia maisculas/minsculas

cp1250_general_ci

Europeu Central (multilinguagem), No diferencia


maisculas/minsculas

cp1250_polish_ci

Polons, No diferencia maisculas/minsculas

Unidade 4

linguagem_de_programacao_III.indb 213

213

04/02/11 11:14

Universidade do Sul de Santa Catarina

Collation

Descrio
cp852 (DOS Central European)

cp852_bin

Europeu Central (multilinguagem), Binrio

cp852_general_ci

Europeu Central (multilinguagem), No diferencia


maisculas/minsculas
cp866 (DOS Russian)

cp866_bin

Russo, Binrio

cp866_general_ci

Russo, No diferencia maisculas/minsculas


latin1 (cp1252 West European)

latin1_bin

Oeste Europeu (multilinguagem), Binrio

latin1_danish_ci

Dinamarqus, No diferencia maisculas/minsculas

latin1_general_ci

Oeste Europeu (multilinguagem), No diferencia


maisculas/minsculas

latin1_general_cs

Oeste Europeu (multilinguagem), Diferencia


maisculas/minsculas

latin1_german1_ci

Alemo (dicionrio), No diferencia maisculas/


minsculas

latin1_german2_ci

Alemo (Agenda de telefones), No diferencia


maisculas/minsculas

latin1_spanish_ci

Espanhol, No diferencia maisculas/minsculas

latin1_swedish_ci

Suco, No diferencia maisculas/minsculas


latin2 (ISO 8859-2 Central European)

latin2_bin

Europeu Central (multilinguagem), Binrio

latin2_croatian_ci

Croata, No diferencia maisculas/minsculas

latin2_czech_cs

Tcheco, Diferencia maisculas/minsculas

latin2_general_ci

Europeu Central (multilinguagem), No diferencia


maisculas/minsculas

latin2_hungarian_ci

Hngaro, No diferencia maisculas/minsculas


latin5 (ISO 8859-9 Turkish)

latin5_bin

Turco, Binrio

latin5_turkish_ci

Turco, No diferencia maisculas/minsculas

latin7 (ISO 8859-13 Baltic)


latin7_bin

Bltico (multilinguagem), Binrio

latin7_estonian_cs

Estoniano, Diferencia maisculas/minsculas

214

linguagem_de_programacao_III.indb 214

04/02/11 11:14

Linguagens de Programao III

Collation

Descrio

latin7_general_ci

Bltico (multilinguagem), No diferencia maisculas/


minsculas

latin7_general_cs

Bltico (multilinguagem), Diferencia maisculas/


minsculas
macce (Mac Central European)

macce_bin

Europeu Central (multilinguagem), Binrio

macce_general_ci

Europeu Central (multilinguagem), No diferencia


maisculas/minsculas
macroman (Mac West European)

macroman_bin

Oeste Europeu (multilinguagem), Binrio

macroman_general_
ci

Oeste Europeu (multilinguagem), No diferencia


maisculas/minsculas
sjis (Shift-JIS Japanese)

sjis_bin

Japons, Binrio

sjis_japanese_ci

Japons, No diferencia maisculas/minsculas


swe7 (7bit Swedish)

swe7_bin

Suco, Binrio

swe7_swedish_ci

Suco, No diferencia maisculas/minsculas


utf8 (UTF-8 Unicode)

utf8_bin

Unicode (multilinguagem), Binrio

utf8_czech_ci

Tcheco, No diferencia maisculas/minsculas

utf8_danish_ci

Dinamarqus, No diferencia maisculas/minsculas

utf8_esperanto_ci

Esperanto, No diferencia maisculas/minsculas

utf8_estonian_ci

Estoniano, No diferencia maisculas/minsculas

utf8_general_ci

Unicode (multilinguagem), No diferencia maisculas/


minsculas

utf8_hungarian_ci

Hngaro, No diferencia maisculas/minsculas

utf8_icelandic_ci

Islands, No diferencia maisculas/minsculas

utf8_latvian_ci

Letons, No diferencia maisculas/minsculas

utf8_lithuanian_ci

Litunio, No diferencia maisculas/minsculas

utf8_persian_ci

Prsa, No diferencia maisculas/minsculas

utf8_polish_ci

Polons, No diferencia maisculas/minsculas

utf8_roman_ci

Oeste Europeu, No diferencia maisculas/minsculas

Unidade 4

linguagem_de_programacao_III.indb 215

215

04/02/11 11:14

Universidade do Sul de Santa Catarina

Collation

Descrio

utf8_romanian_ci

Romno, No diferencia maisculas/minsculas

utf8_slovak_ci

Eslovquio, No diferencia maisculas/minsculas

utf8_slovenian_ci

Eslovnio, No diferencia maisculas/minsculas

utf8_spanish2_ci

Espanhol Traditional, No diferencia maisculas/


minsculas

utf8_spanish_ci

Espanhol, No diferencia maisculas/minsculas

utf8_swedish_ci

Suco, No diferencia maisculas/minsculas

utf8_turkish_ci

Turco, No diferencia maisculas/minsculas

utf8_unicode_ci

Unicode (multilinguagem), No diferencia maisculas/


minsculas

Fonte: <http://www.mysql.com>.

Criando usurio
Um fator importante para o desenvolvimento Web a segurana
dos seus dados. Vale a pena ressaltar que, por causa da arquitetura
da Web, o sistema fica mais exposto a pessoas mal intencionadas.
Por isso, uma ateno segurana empregada fundamental.
O MySQL usa o comando Grant para criar e conceder privilgios
para os usurios. Esse procedimento importante para que
possamos aumentar a segurana da aplicao. O MySQL no
valida somente o login e a senha, mas tambm o endereo
de onde se est conectando. Assim, mesmo que algum mal
intencionado descubra o login e a senha, ele somente poder
utilizar pelo servidor que ela est configurada. Para ser mais
claro, vamos observar o registro de login do usurio do MySQL.
A sintaxe completa do comando :

216

linguagem_de_programacao_III.indb 216

04/02/11 11:14

Linguagens de Programao III

GRANT priv_type [(column_list)] [, tipo_priv [(column_list)] ...]


ON {tbl_name | * | *.* | db_name.*}
TO user_name [IDENTIFIED BY [PASSWORD] password]
[, user_name [IDENTIFIED BY [PASSWORD] password] ...]
[REQUIRE
NONE |
[{SSL| X509}]
[CIPHER cipher [AND]]
[ISSUER issuer [AND]]
[SUBJECT subject]]
[WITH [GRANT OPTION | MAX_QUERIES_PER_HOUR # |
MAX_UPDATES_PER_HOUR # |
MAX_CONNECTIONS_PER_HOUR #]]

Porm, podem existir casos em que a revogao dos direitos ou


privilgios do usurio se faz necessria. Para isso, o comando a
ser utilizado o REVOKE. A sua sintaxe :
REVOKE priv_type [(column_list)] [, priv_type [(column_list)] ...]
ON {tbl_name | * | *.* | db_name.*}
FROM user_name [, user_name ...]

Esse comando permite manipular os privilgios em quatro nveis:


global, banco de dados, tabelas, colunas.

1. Nvel global
Neste nvel, os privilgios so aplicados a todos os bancos de
dados de um servidor. Podem ser concedidos com o comando
GRANT ALL ON *.* e revogados com o comando REVOKE
ALL ON *.*.

Unidade 4

linguagem_de_programacao_III.indb 217

217

04/02/11 11:14

Universidade do Sul de Santa Catarina

2. Nvel dos bancos de dados


Aplicam-se a todas as tabelas em um determinado banco de
dados. A sintaxe para esta segurana so GRANT ALL ON
db.* e REVOKE ALL ON db.*e concedero e revogaro apenas
privilgios de banco de dados.

3. Nvel das tabelas


O nvel de tabelas aplica-se s colunas em uma determinada
tabela. Para este privilgio, teremos de detalhar mais a sintaxe do
comando utilizando GRANT ALL ON db.table e REVOKE
ALL ON db.table e concedero e revogaro apenas privilgios
de tabelas.

4. Nvel das colunas


Privilgios de colunas aplicam-se a uma nica coluna em uma
determinada tabela. Para este comando, necessrio especificar
cada acesso individualmente para cada coluna.
Lembre-se que para o privilgio de DELETE sempre se refere
a todo o registro. No possvel conceder um delete no nvel de
coluna.
Alm dos nveis, podemos ter o tipo de privilgios os quais
podemos relacionar na tabela a seguir.

218

linguagem_de_programacao_III.indb 218

04/02/11 11:14

Linguagens de Programao III

Privilgios

Descrio

ALL [PRIVILEGES]

Configura todos os privilgios simples,


excetoWITH GRANT OPTION.

ALTER

Permite o uso deALTER TABLE.

CREATE

Permite o uso deCREATE TABLE.

CREATE TEMPORARY TABLES

Permite o uso deCREATE TEMPORARY TABLE.

DELETE

Permite o uso deDELETE.

DROP

Permite o uso deDROP TABLE.

EXECUTE

Permite que o usurio execute STORED


PROCEDURES.

FILE

Permite o uso deSELECT ... INTO


OUTFILEeLOAD DATA INFILE.

INDEX

Permite o uso deCREATE INDEXeDROP INDEX.

INSERT

Permite o uso deINSERT

LOCK TABLES

Permite o uso deLOCK TABLESem tabelas nas


quais se tem o privilgioSELECT.

PROCESS

Permite o uso deSHOW FULL PROCESSLIST.

REFERENCES

Para o futuro.

RELOAD

Permite o uso deFLUSH.

REPLICATION CLIENT

D o direto ao usurio de perguntar onde o slave/


master est. Utilizando em replicao de banco de
dados.

REPLICATION SLAVE

Necessrio para a replicao dos slaves (para ler


logs binrio do master).

SELECT

Permite o uso deSELECT.

SHOW DATABASES

SHOW DATABASESexibe todos os bancos de


dados..

SHUTDOWN

Permite o uso demysqladmin shutdown.

SUPER

Permite a conexo (uma vez) mesmo se


max_connections tiverem sido alcanados e
executa o comandoCHANGE MASTER,KILL
thread,mysqladmin debug,PURGE MASTER
LOGSeSET GLOBAL.

UPDATE

Permite o uso deUPDATE

USAGE

Sinnimo para sem privilgios.

GRANT OPTION

Sinnimo paraWITH GRANT OPTION.

Unidade 4

linguagem_de_programacao_III.indb 219

219

04/02/11 11:14

Universidade do Sul de Santa Catarina

Os nicos valores do tipo de privilgio que voc pode especificar


para uma tabela so: SELECT, INSERT, UPDATE,
DELETE, CREATE, DROP, GRANT, INDEX e ALTER.
J para colunas voc pode especificar para uma coluna so:
SELECT, INSERT, UPDATE e REFERENCES, como o
mencionado anteriormente.
Ateno:

O MySQL permite que voc crie privilgios a nvel de


banco de dados mesmo se o banco de dados no existir
para tornar fcil de se preparar para o uso do banco
de dados. O MySQL no revogar automaticamente
qualquer privilgio, mesmo se voc apagar uma tabela ou
um banco de dados.
Voc pode configurar privilgios globais utilizando a
sintaxe ON *.*.
Voc pode configurar privilgios de bancos de dados
utilizando a sintaxe ON nome_bd.*.
Se voc especificar ON * e estiver com algum banco de
dados aberto, sero configurados os privilgios somente
para este banco de dados.
Se voc especificar ON * e voc no tem possui um
banco de dados aberto, afetaro os privilgios globais.

Os privilgios para uma tabela ou coluna so formados por meio


do OU lgico dos privilgios em cada um dos quatro nveis de
privilgios. Por exemplo, um usurio tem um privilgio global
select, isso no pode ser negado por uma entrada no nvel de
banco de dados, tabela ou coluna. Os privilgios para uma coluna
podem ser calculados da seguinte forma:
privilgios globais OU (privilgios de banco de dados E privilgios de
mquina) OU privilgios de tabela OU privilgios de coluna.

Na maioria dos casos, os direitos a um usurio so atribudos em


apenas um dos nveis de privilgios, portanto a situao no to
complicada como mostrado anteriormente.
220

linguagem_de_programacao_III.indb 220

04/02/11 11:14

Linguagens de Programao III

Um novo usurio criado ou, se voc possui privilgios de


concesso globais, a senha do usurio ser especificada utilizando
a clusula IDENTIFIED BY, se uma for dada. Se o usurio j
possui uma senha, ela trocada pela nova.
Se voc no quiser enviar a senha em texto puro, voc pode usar
a opo PASSWORD seguida de uma senha embaralhada da
funo SQL PASSWORD().
Se voc criar um novo usurio, mas no especificar uma
clusula IDENTIFIED BY, o usurio no possuir uma
senha. Isso no seguro.

Somente sero apresentadas as tabelas ou os banco de dados pelo


comando SHOW TABLES (por exemplo) que o usurio tm
acesso. Se um usurio no tem privilgios em uma tabela, ela no
mostrada quando o usurio solicita uma lista de tabelas ou de
banco de dados.
A clusula WITH GRANT OPTION d ao usurio habilidade
de fornecer a outros usurios quaisquer privilgios que ele tenha
em um nvel especfico de privilgio. Tenha sempre cuidado ao
fornecer o privilgio Grant.
Voc no pode conceder a outro usurio um privilgio que no
possua; o privilgio GRANT possibilita fornecer somente os
privilgios que possuir.
Esteja ciente que, quando conceder a um usurio o privilgio
GRANT em um nvel particular de privilgios, qualquer
privilgio que o usurio j possua nesse nvel tambm pode ser
concedido por esse usurio.
Suponha que voc conceda a um usurio o privilgio INSERT
em um banco de dados. Se voc conceder o privilgio SELECT
no banco de dados e especificar WITH GRANT OPTION, o
usurio, alm de poder repassar o privilgio SELECT, poder
repassar o insert. Se voc concede o privilgio UPDATE para
o usurio no banco de dados, o usurio poder conceder os
privilgios INSERT, SELECT e UPDATE.

Unidade 4

linguagem_de_programacao_III.indb 221

221

04/02/11 11:14

Universidade do Sul de Santa Catarina

Quando o MySQL inicia, todos os privilgios so lidos na


memria. Privilgios de bancos de dados, tabelas e colunas so
iniciados um vez, e privilgios ao nvel de usurio fazem efeito na
prxima vez que o usurio conectar. Modificaes nas tabelas de
permisses que voc realiza utilizando GRANT ou REVOKE
so percebidas pelo servidor imediatamente. Quaisquer
outras alteraes devero ser acrescidas do comando FLUSH
PRIVILEGES, assim dizemos ao servidor para recarregar as
tabelas de permisses.
Vamos criar um usurio para que possamos iniciar a construo
de uma aplicao. Vamos supor que o nome do usurio seja web e
a senha seja senha123. O comando ficaria:
GRANT SELECT , INSERT ,UPDATE ,DELETE, RELOAD, REFERENCES, SHOW
DATABASES, LOCK TABLES ON prg3 .* to web@localhost identified by
senha123;

Esse exemplo o mais simples em criao de usurios e estamos


concedendo privilgio de selecionar, inserir, alterar e excluir os
dados da base de dados prg3 para todas as tabelas (prg3.*). O
login do usurio ficou web e somente poder ser acessado do
prprio servidor que o MySQL est instalado.
Para que esse usurio funcione na aplicao,
obrigatrio que o servidor Web tambm esteja
instalado na mesma mquina. Caso esteja em outra,
no ter permisso para se conectar no banco de
dados.

Perceba que a arquitetura da internet possibilita essa


configurao, mesmo que vrias pessoas acessem um site
qualquer. O site localiza-se em um servidor e todas as conexes
que sarem dele sempre sero feitas pelo servidor Web, mesmo
que a solicitao seja feita por um usurio na internet.
- Lembre-se que, por causa da arquitetura da internet, deve-se
sempre ter o servidor Web muito bem configurado para que no
deixem pessoas mal intencionadas acessar servios derivados dele.

222

linguagem_de_programacao_III.indb 222

04/02/11 11:14

Linguagens de Programao III

- Sempre tenha um projeto definido para o banco de dados. Caso


o seu banco no esteja bem definido, ser difcil armazenar e
recuperar as informaes

Seo 3 Trabalhando com tabelas


J criamos o banco de dados e o usurio que ser acessado pela
aplicao. Agora veremos a criao das tabelas desse banco de
dados. Para isso, o comando as ser utilizado o CREATE
TABLE e sua sintaxe completa :
CREATE [TEMPORARY] TABLE [IF NOT EXISTS] nome_tabela [(definio_
create,...)]
[table_options] [select_statement]

ou
CREATE [TEMPORARY] TABLE [IF NOT EXISTS] nome_tabela [(]LIKE
nome_antigo_tabela[)];

definio_create:
nome_coluna tipo [NOT NULL | NULL] [DEFAULT valor_padro] [AUTO_
INCREMENT]
[[PRIMARY] KEY] [COMMENT string] [definio_referncia]
| [CONSTRAINT [symbol]] PRIMARY KEY (index_col_name,...)
| KEY [nome_indice] (index_nome_coluna,...)
| INDEX [nome_indice] (index_nome_coluna,...)
| [CONSTRAINT [symbol]] UNIQUE [INDEX] [index_name] (index_col_
name,...)
| FULLTEXT [INDEX] [nome_indice] (index_nome_coluna,...)
| [CONSTRAINT [symbol]] FOREIGN KEY [index_name] (index_col_
name,...)
[definio_referncia]
| CHECK (expr)

Unidade 4

linguagem_de_programacao_III.indb 223

223

04/02/11 11:14

Universidade do Sul de Santa Catarina

tipo:
TINYINT[(tamanho)] [UNSIGNED] [ZEROFILL]
| SMALLINT[(tamanho)] [UNSIGNED] [ZEROFILL]
| MEDIUMINT[(tamanho)] [UNSIGNED] [ZEROFILL]
| INT[(tamanho)] [UNSIGNED] [ZEROFILL]
| INTEGER[(tamanho)] [UNSIGNED] [ZEROFILL]
| BIGINT[(tamanho)] [UNSIGNED] [ZEROFILL]
| REAL[(tamanho,decimais)] [UNSIGNED] [ZEROFILL]
| DOUBLE[(tamanho,decimais)] [UNSIGNED] [ZEROFILL]
| FLOAT[(tamanho,decimais)] [UNSIGNED] [ZEROFILL]
| DECIMAL(tamanho,decimais) [UNSIGNED] [ZEROFILL]
| NUMERIC(tamanho,decimais) [UNSIGNED] [ZEROFILL]
| CHAR(tamanho) [BINARY | ASCII | UNICODE]
| VARCHAR(tamanho) [BINARY]
| DATE
| TIME
| TIMESTAMP
| DATETIME
| TINYBLOB
| BLOB
| MEDIUMBLOB
| LONGBLOB
| TINYTEXT
| TEXT
| MEDIUMTEXT
| LONGTEXT
| ENUM(value1,value2,value3,...)
| SET(value1,value2,value3,...)

index_nome_coluna:

224

linguagem_de_programacao_III.indb 224

04/02/11 11:14

Linguagens de Programao III

nome_coluna [(tamanho)] [ASC | DESC]

definio_referncia:
REFERENCES nome_tabela [(index_nome_coluna,...)]
[MATCH FULL | MATCH PARTIAL]
[ON DELETE opo_referncia]
[ON UPDATE opo_referncia]

opo_referncia:
RESTRICT | CASCADE | SET NULL | NO ACTION | SET DEFAULT

opes_tabela:
table_option [table_option] ...

opes_tabela:
ENGINE = {BDB | HEAP | ISAM | InnoDB | MERGE | MRG_MYISAM | MYISAM }
| AUTO_INCREMENT = #
| AVG_ROW_LENGTH = #
| CHECKSUM = {0 | 1}
| COMMENT = string
| MAX_ROWS = #
| MIN_ROWS = #
| PACK_KEYS = {0 | 1 | DEFAULT}
| PASSWORD = string
| DELAY_KEY_WRITE = {0 | 1}
| ROW_FORMAT = { DEFAULT | DYNAMIC | FIXED | COMPRESSED }
| RAID_TYPE = { 1 | STRIPED | RAID0 } RAID_CHUNKS=# RAID_CHUNKSIZE=#
| UNION = (table_name,[table_name...])
| INSERT_METHOD = { NO | FIRST | LAST }
| DATA DIRECTORY = caminho absluto para o diretrio
| INDEX DIRECTORY = caminho absluto para o diretrio
| DEFAULT CHARACTER SET character_set_name [COLLATE collation_name]

Unidade 4

linguagem_de_programacao_III.indb 225

225

04/02/11 11:14

Universidade do Sul de Santa Catarina

Obviamente, no utilizamos normalmente essa sintaxe completa,


mas uma sintaxe em que podemos definir o nome da tabela, os
campos, o relacionamento e o tipo da tabela. Vale pena ressaltar
que a tabela temporria (quando especificamos a instruo
TEMPORARY) visvel apenas a para a conexo atual, e ser
automaticamente deletada quando a conexo fechada. Isso
significa que duas conexes diferentes podem usar o mesmo
nome de tabela temporria sem conflitos com outras ou com uma
tabela existente com o mesmo nome.
Para a arquitetura das aplicaes Web, onde, via de regra, as
conexes so finalizadas a cada retorno da requisio, o seu uso
fica ainda mais limitado. Essa tabela temporria ser acessada
somente durante o processamento da pgina pelo servidor.
Quando a requisio retorna ao usurio, a conexo fecha e a
tabela excluda.
Quando falamos de tipos de registros, podemos descrever as
seguintes caractersticas:
1. TINYINT[(M)] [UNSIGNED] [ZEROFILL]
Um inteiro muito pequeno. A faixa desse inteiro com
sinal de -128 at 127. A faixa sem sinal de 0 at 255.
2. BIT, BOOL, BOOLEAN
Estes so sinnimos para TINYINT(1).
3. SMALLINT[(M)] [UNSIGNED] [ZEROFILL]
Um inteiro pequeno. A faixa do inteiro com sinal de
-32768 at 32767. A faixa sem sinal de 0 a 65535.
4. MEDIUMINT[(M)] [UNSIGNED] [ZEROFILL]
Um inteiro de tamanho mdio. A faixa com sinal
de -8388608 a 8388607. A faixa sem sinal de 0 a
16777215.
5. INT[(M)] [UNSIGNED] [ZEROFILL]
Um inteiro de tamanho normal. A faixa com sinal de
-2147483648 a 2147483647. A faixa sem sinal de 0 a
4294967295.
6. INTEGER[(M)] [UNSIGNED] [ZEROFILL]
Este um sinnimo para INT.
226

linguagem_de_programacao_III.indb 226

04/02/11 11:14

Linguagens de Programao III

7. BIGINT[(M)] [UNSIGNED] [ZEROFILL]


Um inteiro grande. A faixa com sinal de
-9223372036854775808 a 9223372036854775807. A
faixa sem sinal de 0 a 18446744073709551615.
Existem algumas coisas sobre campos BIGINT sobre as quais
voc deve estar ciente:

Todas as operaes aritmticas so feitas usando valores


BIGINT ou DOUBLE com sinal, no devemos utilizar
inteiros sem sinal maiores que 9223372036854775807
(63 bits), exceto com funes ded bit! Se voc fizer
isso, alguns dos ltimos digitos no resultado podem
estar errados por causa de erros de arredondamento na
converso de BIGINT para DOUBLE.
Quando usar operadores (+, -, *, etc.) em que ambos os
operandos so inteiros.
Voc pode armazenar valores inteiro exatos em um
campo BIGINT armazenando-os como string, como
ocorre nestes casos, no haver nenhuma representao
intermediaria dupla.
-, +, e * sero utilizados em clculos aritimticos
BIGINT quando ambos os argumentos forem valores
do tipo INTEGER! Isso significa que, se voc
multiplicar dois inteiros grandes (ou obter resultados
de funes que retornam inteiros), voc pode obter
resultados inesperados quando o resultado for maior que
9223372036854775807.

8. FLOAT(preciso) [UNSIGNED] [ZEROFILL]


Um nmero de ponto flutuante. Um ponto flutuante
a definio dada ao processador interpretar os nmeros
reais. Podemos considerar que engloba o tipo ponto
flutuante qualquer nmero que possa ser representado
por meio de uma notao cientfica (N intero
multiplicado por uma base elevado a um expoente).
Esses tipos so como os tipos FLOAT e DOUBLE
descritos logo a seguir. FLOAT(X) tem a mesma faixa
que os tipos correspondentes FLOAT e DOUBLE,
mas o tamanho do display e o nmero de casas decimais
Unidade 4

linguagem_de_programacao_III.indb 227

227

04/02/11 11:14

Universidade do Sul de Santa Catarina

indefinido. Note que o uso de FLOAT pode trazer


alguns problemas inesperados, como nos clculos, j que
em MySQL todos so feitos com dupla preciso.
9. FLOAT[(M,D)] [UNSIGNED] [ZEROFILL]
Um nmero de ponto flutuante pequeno (preciso
simples). Os valores permitidos esto entre
-3.402823466E+38 e -1.175494351E-38, 0 e entre
1.175494351E-38 e 3.402823466E+38. Se UNSIGNED
for especificado, valores negativos no so permitidos
O M a largura do display e o D o nmero de casas
decimais. FLOAT sem um argumento ou FLOAT(X)
onde X <=24 tende a um nmero de ponto flutuante de
preciso simples.
10. DOUBLE[(M,D)] [UNSIGNED] [ZEROFILL]
Um nmero de ponto flutuante de tamanho normal
(dupla preciso). Valores permitidos esto entre
-1.7976931348623157E+308 e -2.2250738585072014E308, 0 e entre 2.2250738585072014E-308 e
1.7976931348623157E+308. Se UNSIGNED for
especificado, valores negativos no so permitidos. O M
a largura do display e o D nmero de casa decimais.
DOUBLE sem argumento ou FLOAT(X) onde 25 <= X
<= 53 so nmeros de ponto flutuante de dupla preciso.
11. DOUBLE PRECISION[(M,D)] [UNSIGNED]
[ZEROFILL], REAL[(M,D)] [UNSIGNED]
[ZEROFILL]
Estes so sinnimos para DOUBLE.
12. DECIMAL[(M[,D])] [UNSIGNED] [ZEROFILL]
Um nmero de ponto flutuante no empacotado.
Comporta-se como um campo CHAR: ``no
empacotado significa que o nmero armazenado
como uma string, usando um caractere para cada dgito
do valor. O ponto decimal e, para nmeros negativos,
o sinal de menos (-), no so contados em M (mas
reservado espao para isso). Se D for 0, os valores
no tero ponto decimal ou parte fracionria. A faixa
mxima do valor DECIMAL a mesma do DOUBLE,
mas a faixa atual para um campo DECIMAL dado pode
228

linguagem_de_programacao_III.indb 228

04/02/11 11:14

Linguagens de Programao III

ser limitado pela escolha de M e D. Se UNSIGNED


especificado, valores negativos no so permitidos. Se D
no for definido, ser considerado como 0. Se M no for
definido, considerado como 10.
13. DEC[(M[,D])] [UNSIGNED] [ZEROFILL],
NUMERIC[(M[,D])] [UNSIGNED] [ZEROFILL],
FIXED[(M[,D])] [UNSIGNED] [ZEROFILL]
Este um sinnimo para DECIMAL.
14. DATE
Uma data. A faixa suportada entre 1000-01-01 e
9999-12-31. MySQL mostra valores DATE no formato
AAAA-MM-DD, mas permite a voc atribuir valores a
campos DATE utilizando tanto strings quanto nmeros.
15. DATETIME
Uma combinao de hora e data. A faixa suportada
entre 1000-01-01 00:00:00 e 9999-12-31 23:59:59.
MySQL mostra valores DATETIME no formato
AAAA-MM-DD HH:MM:SS, mas permite a voc
atribuir valores a campos DATETIME utilizado strings
ou nmeros.
16. TIMESTAMP[(M)]
Um timestamp. A faixa entre 1970-01-01 00:00:00 e
algum momento no ano 2037.

Propriedades das colunas


As colunas ainda possuem propriedades que ajudam a restringir
o seu contedo assim como acrescenta regras ao seu banco de
dados:

Se nem NULL nem NOT NULL forem especificados, a


coluna tratada como se NULL fosse especificado.

Uma coluna integer pode ter o atributo adicional AUTO_


INCREMENT. Quando voc insere um valor de NULL ou
0 em uma coluna AUTO_INCREMENT indexada, a coluna
definida com o valor da prxima sequncia. Normalmente
Unidade 4

linguagem_de_programacao_III.indb 229

229

04/02/11 11:14

Universidade do Sul de Santa Catarina

ele valor+1, onde valor o maior valor para a coluna column


atualmente na tabela. A sequncia de AUTO_INCREMENT
comea com 1.

Se voc deletar a linha contendo o valor mximo para


uma coluna AUTO_INCREMENT, o valor no ser
reutilizado por tabelas MyISAM ou InnoDB. Se voc
deletar todas as linhas na sua tabela com DELETE
FROM nome_tabela (sem um WHERE) no modo
AUTOCOMMIT, a sequncia ser reiniciada em todos
os tipos de tabela, exceto InnoDB.
Apenas poder existir uma coluna AUTO_INCREMENT
por tabela. Ainda deve ser indexado e no ter valor
DEFAULT tampouco valores negativos.

Em tabelas MyISAM e BDB, voc pode especificar colunas


AUTO_INCREMENT secundrias em uma chave multicoluna.
Um valor padro (DEFAULT) tem de ser constante, ele no
pode ser uma funo ou uma expresso.
Se nenhum valor DEFAULT especificado para uma coluna, o
MySQL atribuir um automaticamente, como a seguir:

Se a coluna aceitar NULL como um valor, o valor


padro NULL.
Se a coluna declarada como NOT NULL, o valor
padro depende do tipo de coluna:

Para tipos numricos no declarados com o atributo


AUTO_INCREMENT, o padro 0.
Para uma coluna AUTO_INCREMENT, o valor
padro o prximo valor na sequncia.
Para tipos date e time diferentes de TIMESTAMP,
o padro o valor zero apropriado para o tipo. Para a
primeira coluna TIMESTAMP na tabela, o padro
a data e hora atuais.

230

linguagem_de_programacao_III.indb 230

04/02/11 11:14

Linguagens de Programao III

Para tipos strings diferentes de ENUM, o valor padro


uma string vazia.
Para ENUM, o padro o primeiro valor enumerado.

Valores padres devem ser constantes. Isso significa, por


exemplo, que voc no pode definir o padro de uma coluna date
como o valor de funes como NOW() or CURRENT_DATE.
Um comentrio para uma coluna pode ser especificado com a
opo COMMENT. O comentrio mostrado pela instruo
SHOW CREATE TABLE e por SHOW FULL COLUMNS.
KEY normalmente um sinnimo para INDEX. O atributo de
chave PRIMARY KEY tambm pode ser especificado apenas
como KEY.
No MySQL, uma chave UNIQUE s pode ter valores distintos.
Um erro ocorre se voc tentar adicionar uma nova linha com uma
chave que coincida com uma j existente.

Primary Key
PRIMARY KEY uma chave nica (KEY) onde todas as
colunas-chave devem ser definidas como NOT NULL. Se elas
no forem explicitamente declaradas como NOT NULL, isso
ser feito implicitamente e sem aviso. No MySQL, a chave
chamada PRIMARY. Uma tabela pode ter apenas uma
PRIMARY KEY. Se voc no tiver uma PRIMARY KEY
e alguma aplicao perguntar pela PRIMARY KEY em sua
tabela, o MySQL retornar primeira chave UNIQUE, que no
possui nenhuma coluna NULL, como a PRIMARY KEY.
Uma PRIMARY KEY pode ser um ndice multicoluna. Porm,
voc no pode criar um ndice multicoluna usando o atributo
de chave PRIMARY KEY em uma especificao de coluna.
Fazendo assim apenas colunas simples podero ser marcadas
como primrias. Voc deve utilizar uma clusula PRIMARY
KEY(index_nome_coluna, ...) separada.

Unidade 4

linguagem_de_programacao_III.indb 231

231

04/02/11 11:14

Universidade do Sul de Santa Catarina

Um ndice UNIQUE aquele no qual todos os valores no ndice


devem ser distintos. A exceo a isso que, se for permitido
conter valores NULL em uma coluna no ndice, ele pode conter
mltiplos valores NULL. Essa exceo no se aplica a tabelas
BDB, que permitem apenas um nico NULL. Se a chave
PRIMARY ou UNIQUE consistir de apenas uma coluna e ela
do tipo inteiro, voc tambm poder se referir a ela como _rowid.
Se voc no atribuir um nome ao ndice que no um
PRIMARY KEY, ele ter o mesmo nome da primeira index_
nome_coluna, com um sufixo opcional (_2, _3, ...) para tornlo nico. Voc pode nome de ndices para uma tabela usando
SHOW INDEX FROM nome_tabela.
Apenas os tipos de tabelas MyISAM, InnoDB, e BDB suportam
ndices em coluna que possam ter valores NULL. Nos outros
casos, voc deve declarar tais colunas NOT NULL ou um erro
ser retornado.
Com a sintaxe nome_coluna(length) em uma especificao de
ndice, voc pode criar um ndice que utiliza apenas os primeiros
length() bytes de uma coluna CHAR ou VARCHAR. Isso pode
tornar o arquivo de ndices muito menor.
Apenas os tipos de tabela MyISAM e InnoDB suportam ndice
em colunas BLOB e TEXT. Ao colocar um ndice em uma
coluna BLOB ou TEXT, voc sempre DEVE especificar o
tamanho do ndice, at 255 bytes. Por exemplo:
CREATE TABLE test (blob_col BLOB, INDEX(blob_col(10)));

Uma especificao index_col_name pode finalizar com ASC


ou DESC. Essas palavras-chaves so permitidas para extenso
futura para especificar o armazenamento do valor do ndice em
crescente ou decrescente. Atualmente elas so analisadas, mas
ignoradas; valores de ndice so sempre armazenados em ordem
crescente.
Quando voc utiliza ORDER BY ou GROUP BY com uma
coluna TEXT ou BLOB, o servidor ordena valores usando
apenas o nmero inicial de bytes, indicado pela varivel do
servidor max_sort_length.
232

linguagem_de_programacao_III.indb 232

04/02/11 11:14

Linguagens de Programao III

Voc tambm pode criar ndices FULLTEXT especiais. Eles so


usados para busca full-text. Apenas o tipo de tabela MyISAM
suporta ndices FULLTEXT. Eles s podem ser criados em
colunas CHAR, VARCHAR e TEXT. A indexao sempre
ocorre sobre toda a coluna; ndices parciais no so suportados.
Tabelas InnoDB suportam verificao de chaves estrangeiras.
Note que a sintaxe FOREIGN KEY no InnoDB mais restrita
que a sintaxe apresentada anteriormente. As colunas da tabela
indicada devem ser nomeadas explicitamente. O InnoDB suporta
ambas as aes ON DELETE e ON UPDATE em chaves
estrangeiras. Para outros tipos de tabelas, MySQL Server analisa
as sintaxes FOREIGN KEY, CHECK e REFERENCES no
comando CREATE TABLE, mas sem tal ao ser tomada.
Para tabelas ISAM e MyISAM, cada coluna NULL tem um
bit extra, arredondado para o byte mais prximo. O tamanho
mximo de um registro em bytes pode ser calculado como a
seguir:
tamanho da linha = 1
+ (soma do tamanho da coluna)
+ (nmeros de coluna NULL + delete_flag 7)/8
+ (nmero de colunas de tamanho varivel)

delete_flag 1 para tabelas com formato de registro esttico.


Tabelas estticas usam um bit no registro para um parmetro
que indica se a linha foi deletada. delete_flag 0 para tabelas
dinmicas porque esse parmetro armazenado no cabealho da
linha dinmica.
Esses clculos no se aplicam a tabelas InnoDB, para a qual o
tamanho do armazenamento no diferente para colunas NULL
comparados a colunas NOT NULL.
Para ajudar a ter um melhor entendimento, vamos utilizar um
conjunto pequeno de tabelas em que possamos sintetizar as
informaes e nos focar na lgica embutida.
Relembrando que o comando para a criao de tabelas o create
table. Ainda como forma didtica, vamos supor que tenhamos
Unidade 4

linguagem_de_programacao_III.indb 233

233

04/02/11 11:14

Universidade do Sul de Santa Catarina

dois cadastros: livros e autores. Para criar essas tabelas, utilize os


comandos a seguir.
CREATE TABLE prg3.autores (
cod_autor int(11) NOT NULL AUTO_INCREMENT,
nom_autor varchar(50) NOT NULL,
PRIMARY KEY (cod_autor),
KEY nom_autor (nom_autor)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Neste caso, estamos criando a tabela autores dentro da base de


dados j criada prg3. Essa tabela possui dois campos: cod_autor,
nom_autor. A chave primria o campo cod_autor. Vamos inserir
os seguintes dados:
INSERT INTO autores (cod_autor, nom_autor) VALUES (NULL, Fulano de
Tal);
INSERT INTO autores (nom_autor) VALUES (Outro Autor);

Perceba a sutil diferena entre as duas instrues.


A primeira instruo informa que o campo cod_autor receber
NULL para forar a ao do AUTO_INCREMENT. No
segundo comando, o campo omitido e com isso foramos a
interpretao do gerenciador que o campo est recebendo NULL
e ter o mesmo comportamento da primeira instruo. Portanto,
se selecionarmos os registros, dever retornar os seguintes dados:
SELECT cod_autor, nom_autor FROM autores;
cod_autor

nom_autor

Fulano de Tal

Outro Autor

J criamos uma tabela criada de autores, portanto nada mais


natural que criar uma segunda tabela de livros.

234

linguagem_de_programacao_III.indb 234

04/02/11 11:14

Linguagens de Programao III

CREATE TABLE IF NOT EXISTS livros (


cod_livro int(11) NOT NULL AUTO_INCREMENT,
nom_livro varchar(50) NOT NULL,
cod_autor int(11) DEFAULT NULL,
PRIMARY KEY (cod_livro),
KEY nom_livro (nom_livro,cod_autor),
KEY cod_autor (cod_autor)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Temos uma chave primria cod_livro. O nome do livro (nom_


livro) que possui um ndice composto com o cod_autor. Por
fim, o cod_autor. Perceba que apenas existe o cdido do autor.
Esse campo relacionar com a tabela autor para que possamos
minimizar dados, redundncia e possamos melhor organizar as
informaes. Vamos ao segundo passo, vamos relacionar as duas
tabelas.
ALTER TABLE livros
ADD CONSTRAINT livros_fk_1 FOREIGN KEY (cod_autor) REFERENCES
autores (cod_autor) ON DELETE SET NULL ON UPDATE SET NULL;

Vale a ressalva que a criao do relacionamento poderia ser


realizada no prprio comando CREATE.
Agora podemos inserir dados na tabela de livros:
INSERT INTO livros (cod_livro ,nom_livro ,cod_autor)
VALUES (NULL , PHP, 1),
(NULL , MySQL, 1);

Desta vez, em um nico comando inserimos dois registros. No


MySQL esse comando muito til para economizar instrues a
serem realizadas.
Selecionaremos a tabela livros e relacionaremos a tabela autor.
Alm de um comando, j se torna base de um relatrio plausvel.

Unidade 4

linguagem_de_programacao_III.indb 235

235

04/02/11 11:14

Universidade do Sul de Santa Catarina

SELECT cod_livro, nom_livro, nom_autor


FROM livros a, autores b
WHERE a.cod_autor = b.cod_autor;

cod_livro

nom_livro

nom_autor

MySQL

Fulano de Tal

PHP

Fulano de Tal

Quando igualamos os valores dos campos relacionados,


otimizamos a busca e condicionamos o resultado verificao
vlida dos registros. Ou seja, somente retornar as informaes
que se relacionarem.

Voc pode pesquisar mais o MySQL


no endereo: <http://www.mysql.
com>.

Vimos que o MySQL um banco de dados consistente e


simplificado. A sua instalao, o seu gerenciamento e os seus
controles so postos de tal forma que facilitam o trabalho do
desenvolvedor.

Seo 4 API do PHP


O PHP utiliza interfaces que so chamadas de API para realizar
a conexo com o banco de dados. Ele possui uma gama de APIs
que facilitam a conexo com diversos bancos de dados.
Estas APIs caracterizam-se por serem extremamente eficientes
a geis quanto a sua resposta de requisitos. Porm, o principal
problema encontrado quando voc necessitar trocar o banco
de dados. Vamos ver dois exemplos comparativos para que fique
mais claro. O primeiro sendo o PHP:

236

linguagem_de_programacao_III.indb 236

04/02/11 11:14

Linguagens de Programao III

<?php
$con = mysql_connect($host, $user, $pass);
mysql_select_db($dbnome);
$query = select * from tabela;
$qry = mysql_query($query, $con);
While ( $row = mysql_fetch_assoc($qry) {
echo $row[primeiroNome];
echo $row[segundoNome];
}
mysql_free_result($qry);
mysql_close($con);
?>

Perl com DBI:


Use DBI;
my $con = DBI -> connect(dbi:mysql:$ dbnome, $user, $pass);
my $qry = $con -> do (select * from tabela);
while (my $row = $qry->fetchrow_hashref) {
print $row->( primeiroNome);
print $row->( segundoNome);
}
$qry->finish;
$con->disconnect;

Perceba que o nvel de complexidade semelhante entre as duas


instrues. Porm, o exemplo da linguagem Perl mais porttil.
Fica compreensvel se tivermos de trocar o banco de dados.
Imagine que necessitamos trocar o banco de dados do MySQL
para o Oracle, todas as instrues de API do MySQL teriam
de ser trocadas para as chamadas da API do Oracle. No Perl

Unidade 4

linguagem_de_programacao_III.indb 237

237

04/02/11 11:14

Universidade do Sul de Santa Catarina

onde utiliza um mtodo orientado a objetos bastaria adequar um


comando:
my $con = DBI -> connect(dbi:oracle:$ dbnome, $user, $pass);

Na verdade, no utilizaremos um mtodo orientado a objetos.


Voc poderia se perguntar por que no utilizar esse mtodo. A
resposta O PHP no uma linguagem orientada a objetos,
mas possui recursos para orientao a objetos.
Para solucionar esse problema, voc pode criar suas prprias
classes de conexes ou simplesmente funes genricas para
melhor utilizar as APIs, alm de buscar solues pblicas, como
as classes PEAR.
Voc pode pesquisar mais a PEAR no
endereo: <http://pear.php.net/>.

Como o mencionado, voc pode criar funes ou classes para


melhor solucionar o seu problema. Um exemplo de funes seria:
<?php
function conect($tipo, $host, $usr, $pass, $banco) {
GLOBAL $BC = $tipo;
switch ($BC) {
case mysql:
$res= mysql_connect($host, $usr, $pass);
mysql_select_db($banco, $res);
case oracle:
$res = oci_connect($usr, $pass, $host);
}
return $res;
}
?>

Desta forma, alternando-se o tipo pode-se utilizar diversas APIs


com o mesmo comando. Iremos nos aprofundar um pouco mais
na API do MySQL mais frente.

238

linguagem_de_programacao_III.indb 238

04/02/11 11:14

Linguagens de Programao III

Conexo
O PHP possui conexes nativas com diversos bancos de dados.
O MySQL foi uma das primeiras API a ser desenvolvida. Desta
forma, no necessita de uma configurao para acessar o banco.
Basta que o endereo do servidor do banco de dados tenha
permisso para conexo.
O comando para realizar esse procedimento o mysql_connect.
mysql_connect(servidor,login,senha);

Discriminando o comando, temos os seguintes conceitos:

servidor: endereo do servidor do banco de dados (caso


seja sua prpria mquina, o endereo localhost ou
127.0.0.1);
login: nome de usurio utilizado para acessar o banco de
dados;
senha: senha do usurio que far a conexo.

O retorno do comando um identificador para a conexo em


caso de sucesso ou false em caso de falha. O identificador deve
ser armazenado dentro de uma varivel PHP para utilizar em
outros comandos e diferenciar de uma segunda conexo paralela
se existir.
Vamos conectar no banco de dados utilizando o usurio web. O
comando ficaria assim:
$con = mysql_connect(localhost,web,senha123);

A varivel $con receber o identificador da conexo, que


poderemos utilizar para identific-la quando necessrio. Feita a
conexo, devemos selecionar o banco de dados em que deveremos
trabalhar. Voc pode passar o nome do banco de dados como
quarto parmetro da conexo ou utilizar a funo mysql_select_
db() para isso.
Selecionando a base de dados, ficaria assim:

Unidade 4

linguagem_de_programacao_III.indb 239

239

04/02/11 11:14

Universidade do Sul de Santa Catarina

mysql_select_db(prg3,$con);

As conexes que so abertas durante o script abertas pelo mysql_


connect so fechadas quando este script termina o processamento.
Porm, podem ocorrer situaes em que voc necessite encerrar a
conexo. Para isso, deve-se utilizar o comando mysql_connect.
mysql_select_db(prg3,$con);
()
mysql_close($con);

Vamos ento construir uma pgina onde recuperaremos apenas


as informaes j cadastradas em um banco de dados. Para isso,
criaremos uma tabela no banco de dados que voc j deve ter
criado. O banco de dados prg3. Criando a tabela livrarias:
CREATE TABLE prg3.livrarias (
cod_livraria int(11) NOT NULL AUTO_INCREMENT,
nom_livraria varchar(50) NOT NULL,
PRIMARY KEY (cod_livraria ),
KEY nom_autor (nom_livraria)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Inserir algumas livrarias de exemplo:


INSERT INTO livrarias (cod_livraria, nom_livraria) VALUES
(NULL, Livraria 1),
(NULL, Livraria 2),
(NULL, Livraria 3),
(NULL, Livraria 4),
(NULL, Livraria 5),
(NULL, Livraria 6);

O cdigo para mostrar uma relao de livrarias desse exemplo


seria:

240

linguagem_de_programacao_III.indb 240

04/02/11 11:14

Linguagens de Programao III

<html>
<head>
<title>Relao de Livrarias</title>
</head>
<body>
<h1><strong>Relao de Livrarias</strong></h1>

<?php
// a conexo com o servidor bando de dados realizada
$link = mysql_connect(localhost,web,123);
// o banco de dados selecionado
mysql_select_db(prg3);

// a consulta montada e encaminhada ao servidor


$result= mysql_query(select cod_livraria, nom_livraria from livrarias);

?>
<!-Montamos a tabela em HTML para montar o relatrio
-->
<table border=1 cellspacing=0 cellpadding=0 style=bordercollapse:collapse;border:none>
<tr>
<td width=81 valign=top style=border-top:solid black 1.0pt;
border-left:none;border-bottom:solid black 1.0pt;border-right:none;
padding:0cm 5.4pt 0cm 5.4pt>
<b>Cdigo</b>
</td>
<td width=579 valign=top style=border-top:solid black 1.0pt;
border-left:none;border-bottom:solid black 1.0pt;border-right:none;
padding:0cm 5.4pt 0cm 5.4pt>
<b>Nome</b>

Unidade 4

linguagem_de_programacao_III.indb 241

241

04/02/11 11:14

Universidade do Sul de Santa Catarina

</td>
</tr>
<?php
// controle utilizado no HTML 4.0 para alternar a cor da tabela do HTML
$fundo=white;
/*
este lao de repetio executado enquanto existirem registros a serem
recuperados
a funo mysql_fetch_array retona os registro do banco e atriibui um
vetor de resultado
*/
while ($relacao = mysql_fetch_array($result)) {

if ($fundo==white) {

$fundo=silver;

} else {

$fundo=white;

?>
<tr>
<td width=81 valign=middle style=border:none; borderbottom:solid black 1.0pt; background:<?=$fundo?>; padding:0cm 5.4pt
0cm 5.4pt>
<!-- vetor de resposta da relao
-->
<b><?=$relacao[cod_livraria]; ?></b>
</td>
<td width=579 valign=top style=border:none; border-bottom:solid
black 1.0pt; background:<?=$fundo?>;padding:0cm 5.4pt 0cm 5.4pt>
<?=$relacao[nom_livraria]; ?>
</td>
</tr>
<?php

242

linguagem_de_programacao_III.indb 242

04/02/11 11:14

Linguagens de Programao III

}
?>
</table>
</body>
</html>

O resultado desse cdigo :

Figura 4.2 Exposio da query.


Fonte: Elaborada pelo autor (2010).

Nesse exemplo podemos notar que, de forma simples, podemos


montar uma consulta ao banco e retornar uma relao de forma
a ser interpretada. Perceba que a consulta foi usado os campos, e
no utilizao o asterisco.
Quando voc usa o asterisco nas consultas SQLs, voc fora um
processamento maior do gerenciador. No nosso exemplo, seria
algo insignificante, mas a prtica de utilizar sempre os campos
excelente e evita que voc se esquea de utilizar.
Vamos agora incrementar um pouco o exemplo.
Perceba que estamos utilizando a conexo de forma a estar
embutido na prpria pgina. Isso deixa exposto o acesso ao nosso
banco de dados por terceiros. A forma mais simples de realizar
um incremento na segurana de uma pgina retirar o servidor,
o login, a senha e o banco de dados da pgina. Podemos realizar
essa tarefa utilizando o comando include. Esse comando busca
um arquivo e interpreta o seu contedo como parte da pgina.
Assim, teremos acesso ao servidor, ao login, senha e ao banco
de dados sem que este esteja presente na pgina do programa.
Vamos construir um arquivo qualquer, como exemplo ser
Unidade 4

linguagem_de_programacao_III.indb 243

243

04/02/11 11:14

Universidade do Sul de Santa Catarina

denominado com o nome de variaveis.bd salvo na prpria pasta


da pgina. Esse arquivo ser texto puro. No tem funo de
programao, apenas para que o PHP interprete de forma que
possamos utilizar como variveis, atribuiremos as variveis como
no PHP, mas dever conter as tags.
<?php
$user=web;
$pass=123;
$serv=localhost;
$bd=prg3;
?>

O programa fica desta forma:


<?php
/* com o comando include, todo o texto contido no arquivo passa a fazer
parte do programa. No nosso caso, como o arquivo possui comando
vlidos no PHP, so incorporados de forma natural.
*/
include(variaveis.bd);
// a conexo com o servidor bando de dados realizada
$link = mysql_connect($serv, $user, $pass);
// o banco de dados selecionado
mysql_select_db($bd);
// a consulta montada e encaminhada ao servidor
$result= mysql_query(select cod_livraria, nom_livraria from livrarias);
?>

O restante da pgina no se altera. Veja que as variveis que esto


dentro do arquivo variveis.bd so incorporadas de tal forma
que possui o mesmo comportamento das variveis atribudas na
pgina. Para ficar mais claro, o cdigo a seguir representa esta
semelhana.

244

linguagem_de_programacao_III.indb 244

04/02/11 11:14

Linguagens de Programao III

<?php
/* O comando include no est sendo utilizado, neste momento est
sendo usada a atribuio direta de variveis. Mas, neste caso, voltamos
ao problema inicial das variveis de segurana estarem abertas na
pgina.
*/
$user=web;
$pass=123;
$serv=localhost;
$bd=prg3;
// a conexo com o servidor bando de dados realizada
$link = mysql_connect($serv, $user, $pass);
// o banco de dados selecionado
mysql_select_db($bd);
// a consulta montada e encaminhada ao servidor
$result= mysql_query(select cod_livraria, nom_livraria from livrarias);
?>

Para aumentar a segurana, voc pode armazenar o arquivo com


as configuraes do servidor de banco de dados fora da pasta de
publicao da Web. Ou seja, o arquivo de parametrizao no
estar acessvel pela internet.

Tratamento de erros
Vamos continuar com o mesmo exemplo e increment-lo um
pouco mais, acrescentando um tratamento de erros de alguns
nveis como mensagem personalizada e o prprio erro do banco
de dados.

Unidade 4

linguagem_de_programacao_III.indb 245

245

04/02/11 11:14

Universidade do Sul de Santa Catarina

<?php
/* continuando com o comando include
*/
include(variaveis.bd);

/* a conexo com o servidor bando de dados realizada, caso ocorra


algum problema o programa ir parar e emitir a mensagem: Erro na
conexo com o banco de dados.
Nenhum outro comando ser executado.
*/
$link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o
banco de dados);
// vamos selecionar o banco de dados errado o que resultar em um erro

mysql_select_db(bancoerrado) or die (<BR>Erro na seleo do banco


de dados > .mysql_errno($link) . : . mysql_error($link). \n<BR>) ;

// a consulta montada e encaminhada ao servidor


$result= mysql_query(select cod_livraria, nom_livraria from livrarias)
or die(Erro na execuo da consulta > . mysql_errno($link) . : . mysql_
error($link));
?>

A funo mysql_erro retorna o ltimo erro ocorrido no banco de


dados. J a funo mysql_errno retorna o nmero do erro. Esse
nmero importante identificar, pois mais fcil a busca e a
identificao da soluo do erro. O resultado do exemplo ser:

Figura 4.3 Tratamento de erros.


Fonte: Elaborada pelo autor (2010).

246

linguagem_de_programacao_III.indb 246

04/02/11 11:14

Linguagens de Programao III

Outra forma de montar um tratamento de erro seria a construo


de algoritmo para que ocorra um desvio durante a execuo.
Desta forma, possvel manter um controle maior sobre a
aplicao e ainda respostas mais amigveis ao usurio. Um
exemplo desse tipo de tratamento de erro voc pode ver a seguir.
<?php
/* continuando com o comando include
*/
include(variaveis.bd);

/* a conexo com o servidor bando de dados realizada, caso ocorra


algum problema o programa ir parar e emitir a mensagem: Erro na
conexo com o banco de dados.
Nenhum outro comando ser executado.
*/

$link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o


banco de dados);
// vamos selecionar o banco de dados errado o que resultar em um erro
if (!(mysql_select_db(bancoerrado))){

echo <p>Erro na seleo do banco de dados</p>\n;

echo <b> .mysql_errno($link) . : . mysql_error($link). </b>\n<BR>;

} else {

// a consulta montada e encaminhada ao servidor


$result= mysql_query(select cod_livraria, nom_livraria from livrarias);

?>
<!-Montamos a tabela em HTML para montar o relatrio
-->

Unidade 4

linguagem_de_programacao_III.indb 247

247

04/02/11 11:14

Universidade do Sul de Santa Catarina

<table border=1 cellspacing=0 cellpadding=0 style=bordercollapse:collapse;border:none>


<tr>
<td width=81 valign=top style=border-top:solid black 1.0pt;
border-left:none;border-bottom:solid black 1.0pt;border-right:none;
padding:0cm 5.4pt 0cm 5.4pt>

<b>C&oacute;digo</b>

</td>

<td width=579 valign=top style=border-top:solid black 1.0pt;


border-left:none;border-bottom:solid black 1.0pt;border-right:none;
padding:0cm 5.4pt 0cm 5.4pt>

<b>Nome</b>

</td>
</tr>
<?php
// controle utilizado no HTML 4.0 para alternar a cor da tabela do HTML
$fundo=white;
while ($relacao = mysql_fetch_array($result)) {

if ($fundo==white) {

$fundo=silver;
} else {

$fundo=white;
}

?>
<tr>
<td width=81 valign=middle style=border:none; borderbottom:solid black 1.0pt; background:<?=$fundo?>; padding:0cm 5.4pt
0cm 5.4pt>
<!-- vetor de resposta da relao
-->

<b><?=$relacao[cod_livraria]; ?></b>

</td>

248

linguagem_de_programacao_III.indb 248

04/02/11 11:14

Linguagens de Programao III

<td width=579 valign=top style=border:none; borderbottom:solid black 1.0pt; background:<?=$fundo?>;padding:0cm 5.4pt


0cm 5.4pt>

<?=$relacao[nom_livraria]; ?>

</td>
</tr>
<?php
}
?>
</table>

<?php
}
?>

Seo 5 Envio e recuperao de dados


J observamos alguns recursos que a API do PHP com o
MySQL disponibiliza para que possamos desenvolver sistemas
completos. Porm, essas APIs teriam uma utilizao reduzida,
sem a interao com as prprias pginas HTML.
Via de regra, as pginas funcionaro com programas
independentes um dos outros. Cada requisio ao servidor
executaro as instrues e retornaro suas respostas, uma vez que
retornar a resposta o programa encerra, ao menos na viso do
servidor.

Formulrios para manipulao de dados


Vamos montar agora um script simples de edio e pesquisa de
duas tabelas do MySQL. Vamos utilizar como base a tabela de
livros e autores j mostrados em outros exemplos. Primeiramente
montaremos uma pgina em HTML para funcionar como um
menu de operaes.
Unidade 4

linguagem_de_programacao_III.indb 249

249

04/02/11 11:14

Universidade do Sul de Santa Catarina

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN


http://www.w3.org/TR/html4/loose.dtd>
<html lang=pt-br>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1>
<head>
<title>Livros e Autores</title>
</head>
<body>
<h1>Livros e Cadastros</h1>
<hr />
<h2>Menu de Opera&ccedil;&otilde;es</h2>
<p><a href=listautor.php target=_self>Listar Autores</a><br />
<a href=listlivros.php>Listar Livros</a><br />
<a href=pesqregistros.php>Pesquisar Dados</a></p>
</body>
</html>

Utilizaremos trs operaes: Listar Livros, Listar Autores e


Pesquisar Dados. Cada link apontado para uma pgina diferente,
como resultado fica assim:

Figura 4.4 Formulando menus.


Fonte: Elaborada pelo autor (2010).

Veja que essa pgina de menu apenas HTML, no foi utilizado


nenhum comando de PHP ou JavaScript. Lembre-se que
uma escolha para esse exemplo. Nada impede que possamos
incrementar a navegao.
250

linguagem_de_programacao_III.indb 250

04/02/11 11:14

Linguagens de Programao III

Vamos trabalhar agora com a Lista de Autores. Essa pgina


aumenta um pouco a complexidade do desenvolvimento. A ideia
listar todos os registros cadastrados na tabela autores. Para
cada registro listado, o usurio pode alterar ou excluir o registro.
Alm disso, um link para inserir um novo registro.
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd><html lang=pt-br>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1>
<title>Autores</title>
</head>
<body>
<h1>Autores</h1>
<hr />
<!-link para cadastrar o autor
-->
<p><a href=cadautor.php>Cadastrar</a></p>
<?php
// include com as variveis do banco de dados
include(variaveis.bd);
$link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o
banco de dados);
mysql_select_db($bd) or die (Erro na seleo do banco de dados.
mysql_errno($link) . : . mysql_error($link). \n<br>);
// a consulta montada e encaminhada ao servidor
$result= mysql_query(select cod_autor, nom_autor from autores);
?>
<table width=40% border=1>
<tr>
<th scope=col>C&oacute;digo</th>

Unidade 4

linguagem_de_programacao_III.indb 251

251

04/02/11 11:14

Universidade do Sul de Santa Catarina

<th scope=col>Nome</th>
<th colspan=2 scope=col>Op&ccedil;&otilde;es</th>
</tr>
<?php
// lembre-se que voc pode mesclar as TAGs entre HTML e o PHP
// Teste para verificar se relacionou ao menos um registro na consulta
// O @ utilizado para inibir qualquer mensagem erro.
if (@mysql_num_rows($result)>=1) {

// o lao ser executado enquanto existir registros


while ($relacao = mysql_fetch_array($result)) {

// construo em PHP para manipular o CSS

if ($fundo==white) {

$fundo=silver;
} else {

$fundo=white;

// construido a linha dos resultados da consulta

?>
<tr style=background:<?=$fundo?>;>
<td><?=$relacao[cod_autor]; ?></td>
<td><?=$relacao[nom_autor]; ?></td>
<!-- nestes dois links enviado o cdigo do registro
assim as pginas que os links esto apontando podero identificar qual
registro deve ser manipulado
-->
<td><a href=altautor.php?cod=<?=$relacao[cod_autor]?>>Alterar</
a></td>
<td><a href=excautor.php?cod=<?=$relacao[cod_
autor]?>>Excluir</a></td>
</tr>
<?php

252

linguagem_de_programacao_III.indb 252

04/02/11 11:14

Linguagens de Programao III

} } else {

// caso no seja encontrado registros esta linha montada

?>
<tr style=background:silver;>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<?php
}
?>
</table>
<p><a href=menu.html>Voltar</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

Veja que nesse cdigo realizamos uma consulta ao banco de


dados. Alm disso, foi manipulado o HTML para se modificar
dependendo de cada resultado. Assim, teramos a pgina com os
seguintes dados.

Figura 4.5 Recuperando dados do MySQL.


Fonte: Elaborada pelo autor (2010).

Vamos agora montar a pgina que ir inserir os dados na tabela.

Unidade 4

linguagem_de_programacao_III.indb 253

253

04/02/11 11:14

Universidade do Sul de Santa Catarina

Como anteriormente mostrado, essa tabela de autores est criada


com o campo cod_autor sendo auto_increment. Assim, podemos
omitir esse campo no cadastro, j que nenhuma informao do
usurio deve ser inserida nesse campo. Portanto, teremos apenas
um campo que receber informaes do usurio. Outro fator
que ser utilizado uma validao de campo em JavaScript.
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd>
<html>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1>
<title>Cadastrar Autor</title>
<script language=javascript type=text/javascript charset=utf-8>
function valida_form(form) {

// verificando a quantidade de caracteres inseridos no campo nom

if (form.nom.value.length<4) {

// se for inferior a quatro caracteres uma mensagem mostrada

alert(O nome do Autor deve conter no mnimo 4 caracteres!);


// retorna falso para o formulrio inibindo o seu envio para o
servidor. O comando return encerra a funo

return false;

return true;

}
</script>
</head>
<body>
<?php
// verificao se o formulrio foi submetido, ou seja, enviado ao servidor
if (@$_POST[salvar]!=) {
// include com as variveis do banco de dados

254

linguagem_de_programacao_III.indb 254

04/02/11 11:14

Linguagens de Programao III

include(variaveis.bd);
$link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o
banco de dados);
mysql_select_db($bd) or die (Erro na seleo do banco de dados.
mysql_errno($link) . : . mysql_error($link). \n<br>);
// a inserso de dados montada e encaminhada ao servidor
$result= mysql_query(insert into autores (nom_autor) values (.$_
POST[nom].)) or die (Erro ao cadastrar autor);
?>
<script language=javascript type=text/javascript charset=utf-8>
// interao do PHP com o JavaScript
alert (Registro inserido com sucesso! Cdigo gerado: <?=mysql_insert_
id()?>);
</script>
<?php
}
?>
<h1>Cadastrar Autor</h1>
<hr>
<!-o atributo onSubmit=return valida_form(this); est chamando uma
funo JavaScript.
Alm disso, o comando return fora que o formulrio s seja enviado se a
funo retornar verdadeiro (true)
-->
<form action= method=post enctype=multipart/form-data
name=frmcad target=_self onSubmit=return valida_form(this);>
<table width=40% border=1>
<tr>
<td width=28%><label for=nom>Nome</label></td>
<td width=72%><input type=text name=nom id=nom
value=></td>
</tr>

Unidade 4

linguagem_de_programacao_III.indb 255

255

04/02/11 11:14

Universidade do Sul de Santa Catarina

<tr>
<td colspan=2 align=center>
<input type=submit name=salvar id=Cadastrar
value=Cadastrar>&nbsp;&nbsp;
<input type=reset name=Limpar id=Limpar value=Limpar>
</td>
</tr>
</table>
<p><a href=listautor.php>Voltar</a></p>
</form>
</body>
</html>

Alguns pontos podem ressaltar nesse exemplo. O primeiro com


relao validao de campos. A validao efetuada foi realizada
apenas em JavaScript. Isso acarreta em baixa segurana quanto s
validaes de informaes. Como j falamos, o JavaScript uma
linguagem client-side, isso significa que a interpretao fica a cargo
do browser do usurio. Portanto, torna-se facilmente manipulvel
pelo prprio usurio. A forma mais simples desabilitando a
interpretao do JavaScript pelo browser. Assim, a validao ir
parar de funcionar. Outra forma seria a utilizao de algumas
ferramentas de desenvolvimento on-line, ou seja, pode ser alterada
a programao em tempo de execuo. Poderia citar o Firebug do
Firefox, que permite alterar todas as informaes das linguagens
client-side. Para aumentar a segurana, necessrio utilizar uma
validao de dados tambm na linguagem Server-side. Nosso
exemplo bastaria acrescentar o campo que deva ser obrigatrio
acrescido da funo strlen que conta o nmero de caracteres em
uma string:

256

linguagem_de_programacao_III.indb 256

04/02/11 11:14

Linguagens de Programao III

(...)
<?php
// verificao se o formulrio foi submetido, ou seja, enviado ao servidor
if ((@$_POST[salvar]!=) && (strlen(@$_POST[nom])>3)) {
// include com as variveis do banco de dados
include(variaveis.bd);
$link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com
o banco de dados);
(...)

Com essa simples alterao, no ser permitida a incluso de um


registro que no tenha pelo menos quatro caracteres no nome.
Normalmente quando h uma validao em JavaScript, no
feito um tratamento nas linguagens service-side, apenas verifica
se foi validado corretamente pelo JavaScript, mas fica a cargo de
cada desenvolvedor.
Outro ponto a ser comentado quanto integrao do PHP com
o JavaScript. Veja que no exemplo, aps a insero do registro,
emitida uma mensagem em JavaScript avisando que foi inserido
com sucesso e ainda mostrando o cdigo que foi inserido. Esse
cdigo pode ser resgatado pela funo mysql_insert_id. Perceba
que a interao se d por meio de escrita, ou seja, o PHP manda
escrever alguma informao dentro do cdigo JavaScript. Ele,
por sua vez, realiza a interpretao de sua programao sem
tomar conhecimento da existncia do PHP.
Ainda relacionado ao cdigo, foi utilizado uma programao
embutida na prpria pgina do formulrio. Esse mtodo requer
que seja sempre verificado se o formulrio foi enviado ao servidor
ou simplesmente a pgina foi carregada a primeira vez. Como
resultado, temos a seguinte pgina:

Figura 4.6 Cadastrando dados no banco de dados.


Fonte: Elaborada pelo autor (2010).
Unidade 4

linguagem_de_programacao_III.indb 257

257

04/02/11 11:14

Universidade do Sul de Santa Catarina

A mensagem de retorno como:

Figura 4.7 Mensagem de retorno em JavaScript.


Fonte: Elaborada pelo autor (2010).

Aps inserir alguns registros, retornaremos a pgina de listagem,


desta vez mostrar os dados inseridos:

Figura 4.8 Listagem completa das informaes.


Fonte: Elaborada pelo autor (2010).

Com os dados inseridos, podemos trabalhar nas outras pginas


de manipulao (Alterar e Excluir). A primeira a trabalharmos
ser a pgina de alterao de dados. A funcionalidade
muito semelhante pgina de insero. Porm, necessrio
recuperar a informao e realizar a alterao. Uma parte desse
desenvolvimento j est acoplada pgina de Listar Autores.
Quando o usurio clicar no link Alterar, j est sendo enviado o
cdigo do registro que ser alterado. Assim, a pgina de alterao
j saber qual registro deve ser manipulado.

258

linguagem_de_programacao_III.indb 258

04/02/11 11:14

Linguagens de Programao III

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN


http://www.w3.org/TR/html4/loose.dtd>
<html>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1>
<title>Alterar Autor</title>
<script language=javascript type=text/javascript charset=utf-8>
function valida_form(form) {

if (form.nom.value.length<4) {

alert(O nome do Autor deve conter no mnimo 4 caracteres!);

return false;

return true;

}
</script>
</head>
<body>
<?php
// include com as variveis do banco de dados
include(variaveis.bd);
// include com as variveis do banco de dados
$link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o
banco de dados);
mysql_select_db($bd) or die (Erro na seleo do banco de dados.
mysql_errno($link) . : . mysql_error($link). \n<br>);
// Validao de dados e mtodo
if ((@$_POST[cod]!=) && (strlen(@$_POST[nom])>3) && (@$_
POST[cod]==@$_GET[cod])){
/*
comando de alterao de dados

Unidade 4

linguagem_de_programacao_III.indb 259

259

04/02/11 11:14

Universidade do Sul de Santa Catarina

deve-se preferencialmente filtrado pela chave primaria, assim garante


que apenas um registro ser alterado
*/
$result= mysql_query(update autores set nom_autor=.$_
POST[nom]. where cod_autor=.$_GET[cod]) or die (Erro ao
cadastrar autor);
?>
<script language=javascript type=text/javascript charset=utf-8>
alert (Registro alterado com sucesso! Cdigo alterado: <?=$_
GET[cod]?>);
</script>
<?php
}
/* verifica o registro que foi selecionado na pgina de listagem
todo a informao mostrada na url interpretada pelo PHP como um
envio de informao pelo mtodo GET*/
if (@$_GET[cod]!=) {
$result= mysql_query(select cod_autor, nom_autor from autores
where cod_autor=.$_GET[cod]);

$relacao = mysql_fetch_array($result);

}
?>
<h1>Alterar Autor</h1>
<hr>
<form action= method=post enctype=multipart/form-data
name=frmcad target=_self onSubmit=return valida_form(this);>
<table width=40% border=1>
<tr>
<td><label for=cod>C&oacute;digo</label></td>
<td>
<!--o atributo readonly deixa o campo somente leitura
o atributo value carrega um valor padro para o campo-->

260

linguagem_de_programacao_III.indb 260

04/02/11 11:14

Linguagens de Programao III

<input type=text name=cod id=cod value=<?=@$relacao[cod_


autor]; ?> readonly=true>
</td>
</tr>
<tr>
<td width=28%><label for=nom>Nome</label></td>
<td width=72%><input type=text name=nom id=nom
value=<?=@$relacao[nom_autor]; ?>></td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=submit name=salvar id=Alterar
value=Alterar>&nbsp;&nbsp;
<input type=reset name=Limpar id=Limpar value=Limpar>
</td>
</tr>
</table>
<p><a href=listautor.php>Voltar</a></p>
</form>
</body>
</html>

Veja que nessa pgina est sendo realizado um acesso a banco de


dados antes do envio das informaes do formulrio. Isso se faz
necessrio para que seja realizada uma consulta sobre o cdigo
envido pela pgina anterior. Desta forma, pode alimentar os
campos do formulrio para serem alterados.

Unidade 4

linguagem_de_programacao_III.indb 261

261

04/02/11 11:14

Universidade do Sul de Santa Catarina

Figura 4.9 Alterando valores.


Fonte: Elaborada pelo autor (2010).

O campo cdigo no pode ser alterado, para isso


impossibilitamos a alterao dele no campo. As validaes de
JavaScript permanecem assim como a resposta da alterao.
Ento, com esse exemplo, possvel perceber que entre uma
pgina de incluso e outra de alterao existem pequenas
alteraes no cdigo, mas que fazem muita diferena no final.
Uma delas a reposio da conexo com o banco de dados.
Como ela necessria nos dois momentos (carregar a pginas e
envio para o servidor), necessrio que seja feita fora dos laos de
deciso.
Uma validao que aparece nesse exemplo sobre o mtodo.
Ou seja, temos de validar se o cdigo consultado o mesmo que
foi alterado. Podemos fazer isso verificando se cdigo enviado
pela url da pgina o mesmo utilizado no formulrio. Qualquer
discrepncia dessas informaes em funo de o usurio estar
tentando burlar o sistema.
Essa forma de segurana utilizada soluciona o
problema dess e exemplo. Existem diversas forma
de aumentar a segurana da aplicao. Uma dela
utilizado chaves criptografadas de verificao. Pesquise
sobre o assunto!

A segunda pgina de manipulao de dados a excluso de


registro. Essa pgina no h uma entrada de informaes pelo
usurio. Para este exemplo, foi adotada uma interao maior
com o JavaScript. Uma confirmao de excluso por meio do
JavaScript feita e somente ento excludo o registro.

262

linguagem_de_programacao_III.indb 262

04/02/11 11:14

Linguagens de Programao III

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN


http://www.w3.org/TR/html4/loose.dtd>
<html>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1>
<title>Exclui Autor</title>
<script language=javascript type=text/javascript charset=utf-8>
function valida_form(form) {

// verifica se o usuario quer mesmo excluir o usurio

if (confirm(Deseja Realmente Excluir o Registro?)) {

return true;

return false;

}
</script>
</head>
<body>
<?php
// include com as variveis do banco de dados
include(variaveis.bd);
$link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o
banco de dados);
mysql_select_db($bd) or die (Erro na seleo do banco de dados.
mysql_errno($link) . : . mysql_error($link). \n<br>);
if ((@$_POST[cod]!=) && (@$_POST[cod]==@$_GET[cod])){
// query para excluir as informaes
$result= mysql_query(delete from autores where cod_autor=.$_
POST[cod]) or die (Erro ao cadastrar autor);
?>
<script language=javascript type=text/javascript charset=utf-8>

Unidade 4

linguagem_de_programacao_III.indb 263

263

04/02/11 11:14

Universidade do Sul de Santa Catarina

alert (Registro excludo com sucesso! Cdigo excludo: <?=$_


GET[cod]?>);
location.href=listautor.php;
</script>
<?php
}
if (@$_GET[cod]!=) {
$result= mysql_query(select cod_autor, nom_autor from autores
where cod_autor=.$_GET[cod]);

$relacao = mysql_fetch_array($result);

}
?>
<h1>Alterar Autor</h1>
<hr>
<form action= method=post enctype=multipart/form-data
name=frmcad target=_self onSubmit=return valida_form(this);>
<table width=40% border=1>
<tr>
<td>C&oacute;digo</td>
<td>
<!--campo oculto para segurana das informao-->
<input type=hidden name=cod id=cod
value=<?=@$relacao[cod_autor]; ?>>

<?=@$relacao[cod_autor]; ?></td>
</tr>
<tr>
<td width=28%>Nome</td>
<td width=72%><?=@$relacao[nom_autor]; ?></td>
</tr>
<tr>
<td colspan=2 align=center>

264

linguagem_de_programacao_III.indb 264

04/02/11 11:14

Linguagens de Programao III

<input type=submit name=salvar id=Excluir


value=Excluir>&nbsp;&nbsp;
<input type=reset name=Limpar id=Limpar value=Limpar>
</td>
</tr>
</table>
<p><a href=listautor.php>Voltar</a></p>
</form>
</body>
</html>

Veja que no h uma diferena expressiva entre a excluso e a


alterao de dados. As principais alteraes se daro quanto
regra de negcio contida na programao, logicamente, no
levando em considerao os aspectos visuais da pgina.
Todas as pginas partindo dessa soluo sero construdas
de forma muito semelhante. Pouca alterao da lgica de
programao ser feita. Porm, pode ainda existir algum
insegurana quando se trabalha com relacionamentos. Por causa
disso, o exemplo a seguir ilustra a pgina de alterao de livros.
Esta tabela possui um relacionamento com autores. A soluo
essencialmente a mesma utilizada para a tabela autores: uma
pgina para listagem dos registros, uma para cadastro, uma para
alterao e uma para excluso.
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd>
<html>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1>
<title>Alterar Livro</title>
<script language=javascript type=text/javascript charset=utf-8>
function valida_form(form) {

Unidade 4

linguagem_de_programacao_III.indb 265

265

04/02/11 11:14

Universidade do Sul de Santa Catarina

if (form.nom.value.length<4) {

alert(O nome do Livro deve conter no mnimo 4 caracteres!);

return false;

return true;
}
</script>
</head>
<body>
<?php
// include com as variveis do banco de dados
include(variaveis.bd);
$link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o
banco de dados);
mysql_select_db($bd) or die (Erro na seleo do banco de dados.
mysql_errno($link) . : . mysql_error($link). \n<br>);
// valida as informaes encaminhadas
if ((@$_POST[cod]!=) && (strlen(@$_POST[nom])>3) && (@$_
POST[cod]==@$_GET[cod]) && (@$_POST[cod_autor]!=)) {
// adequao das informaes em branco para nulo
if (@$_POST[cod_autor]!=) {

$cod_autor=$_POST[cod_autor];
} else {

$cod_autor=NULL;
}

$result= mysql_query(update livros set nom_livro=.$_POST[nom].,


cod_autor=.$_POST[cod_autor]. where cod_livro=.$_POST[cod]) or
die (Erro ao cadastrar livro);
?>
<script language=javascript type=text/javascript charset=utf-8>
alert (Registro alterado com sucesso! Cdigo gerado: <?=$_
POST[cod]?>);

266

linguagem_de_programacao_III.indb 266

04/02/11 11:14

Linguagens de Programao III

</script>
<?php
}
if (@$_GET[cod]!=) {
$result= mysql_query(select cod_livro, nom_livro, cod_autor from
livros where cod_livro=.$_GET[cod]);

$relacao = mysql_fetch_array($result);

}
?>
<h1>Alterar Livro</h1>
<hr>
<form action= method=post enctype=multipart/form-data
name=frmcad target=_self onSubmit=return valida_form(this);>
<table width=40% border=1>
<tr>
<td width=28%><label for=cod>C&oacute;digo</label></td>
<td width=72%><input type=text name=cod id=cod
value=<?=$relacao[cod_livro]?> readonly=true></td>
</tr>
<tr>
<td width=28%><label for=nom>Nome</label></td>
<td width=72%><input type=text name=nom id=nom
value=<?=$relacao[nom_livro]; ?>></td>
</tr>
<tr>
<td width=28%><label for=cod_autor>Autor</label></td>
<td width=72%>
<select name=cod_autor>
<option value=>-----------------</option>
<?php

//consulta para montar as informaes de relacionamento

Unidade 4

linguagem_de_programacao_III.indb 267

267

04/02/11 11:14

Universidade do Sul de Santa Catarina

$result_autores= mysql_query(select cod_autor, nom_autor from


autores);

while ($relacao_autores = mysql_fetch_array($result_autores)) {

//seleciona o autor cadastrado para o livro

if ($relacao_autores[cod_autor]==$relacao[cod_autor]) {

} else {

$select=selected;

$select=;

?>


<option value=<?=$relacao_autores[cod_autor]?>
<?=$select?>><?=$relacao_autores[nom_autor]; ?></option>
<?php

?>
</select>
</td>
</tr>
<tr>
<td colspan=2 align=center>

<input type=submit name=salvar id=Alterar


value=Alterar>&nbsp;&nbsp;
<input type=reset name=Limpar id=Limpar value=Limpar>
</td>
</tr>
</table>
<p><a href=listlivros.php>Voltar</a></p>
</form>
</body>
</html>

268

linguagem_de_programacao_III.indb 268

04/02/11 11:14

Linguagens de Programao III

Apesar de existir o relacionamento entre as tabelas, a soluo


nesse caso foi de compor as consultas para cada campo, ou
seja, uma consulta que recupera a informao de livros e outra
que recupera as informaes de autores, selecionando o autor
cadastrado no livro. Essa soluo mais bem empregada para
o uso do campo combox do formulrio. O restante do cdigo se
torna muito semelhante pgina de alterar autores.
Toda a forma de manipulao de dados sempre a
mesma: incluir, alterar, excluir. Quando se define uma
soluo para essa manipulao, uma pgina ela tende
a se propagar para todo o sistema. O cuidado para as
informaes ou detalhes especficas de cada pgina.

O resultado desse cdigo uma pgina com trs campos: cdigo,


nome do livro e autor.

Figura 4.10 Alterando no relacionamento entre tabelas.


Fonte: Elaborada pelo autor (2010).

Procure desenvolver as outras pginas (listar, incluso e


excluso) dos registros de livros.

Vamos construir agora uma pgina de consulta. Esta pgina


consiste em o usurio informar algum dado e o sistema procurar
as informaes e list-las na tela. Para aumentar um pouco a
complexidade, vamos realizar a consulta sobre as duas tabelas
(autores e livros). Para os registros encontrados, faremos um link
apontando para a pgina de alterao de informaes. Desta
forma, maximizaremos a utilidade da consulta.

Unidade 4

linguagem_de_programacao_III.indb 269

269

04/02/11 11:14

Universidade do Sul de Santa Catarina

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN


http://www.w3.org/TR/html4/loose.dtd>
<html>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1>
<title>Alterar Livro</title>
<script language=javascript type=text/javascript charset=utf-8>
function valida_form(form) {

// teste para obrigar um caracter em algum dos campos

if ((form.nom_livro.value.length<1) && (form.nom_autor.value.


length<1)) {

alert(O nome do Livro deve conter no mnimo 1 caracter!\n Ou\
nO nome do Autor deve conter no mnimo 1 caracter!);

return false;

return true;
}
</script>
</head>
<body>
<?php
if (@$_POST[pesquisar]!=) {
include(variaveis.bd);
$link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o
banco de dados);
mysql_select_db($bd) or die (Erro na seleo do banco de dados.
mysql_errno($link) . : . mysql_error($link). \n<br>);
// esta varivel tem a funo de montar o filtro da consulta
$pesquisa=;
if (@$_POST[nom_livro]!=) {

// primeiro filtro montado se existir algum caracter

270

linguagem_de_programacao_III.indb 270

04/02/11 11:14

Linguagens de Programao III

$pesquisa=nom_livro like %.$_POST[nom_livro].%;


}
if (@$_POST[nom_autor]!=) {

// verifica se o primeiro filtro foi usado. Caso sim, acrescenta a


condio AND (E) para que o segundo filtro seja utilizado
if ($pesquisa!=) { $pesquisa.= and ; }

// segundo filtro montado se existir algum caracter

$pesquisa.=nom_autor like %.$_POST[nom_autor].%;


}
// consulta montada em uma varivel para facilitar o desenvolvimento

$query=select a.cod_livro, a.nom_livro, b.cod_autor, b.nom_autor from


livros a, autores b where a.cod_autor=b.cod_autor and .$pesquisa;
// consulta executada
$result= mysql_query($query);
}
?>
<h1>Pesquisar Registros</h1>
<hr>
<form action= method=post enctype=multipart/form-data
name=frmcad target=_self onSubmit=return valida_form(this);>
<table width=40% border=1>
<tr>
<td width=28%><label for=nom_livro>Livro</label></td>
<td width=72%><input type=text name=nom_livro id=nom_
livro value=></td>
</tr>
<tr>
<td width=28%><label for=nom_autor>Autor</label></td>
<td width=72%><input type=text name=nom_autor id=nom_
autor value=>
</td>
</tr>

Unidade 4

linguagem_de_programacao_III.indb 271

271

04/02/11 11:14

Universidade do Sul de Santa Catarina

<tr>
<td colspan=2 align=center>
<input type=submit name=pesquisar id=pesquisar
value=Pesquisar>&nbsp;&nbsp;
<input type=reset name=Limpar id=Limpar value=Limpar>
</td>
</tr>
</table>
</form>
<hr>
<table width=54% height=82 border=1>
<tr>
<th scope=col>C&oacute;digo Livro</th>
<th scope=col>Nome Livro</th>
<th scope=col>C&oacute;digo Autor</th>
<th scope=col>Nome Autor</th>
</tr>
<?php
//
if (@mysql_num_rows($result)>=1) {
$fundo=white;
while ($relacao = mysql_fetch_array($result)) {

if ($fundo==white) {

$fundo=silver;
} else {

$fundo=white;
}

?>
<tr style=background:<?=$fundo?>;>
<td><label title=Alterar os dados deste livro><a href=altlivros.
php?cod=<?=$relacao[cod_livro]; ?>><?=$relacao[cod_livro]; ?>

272

linguagem_de_programacao_III.indb 272

04/02/11 11:14

Linguagens de Programao III

</a></label></td>
<td><?=$relacao[nom_livro]; ?></td>
<td><label title=Alterar os dados deste Autor><a href=altautor.
php?cod=<?=$relacao[cod_autor]; ?>><?=$relacao[cod_autor]; ?>
</a></label></td>
<td><?=$relacao[nom_autor]; ?></td>
</tr>
<?php
} } else {
?>
<tr style=background:silver;>
<td colspan=4>
<?php

// caso no encontre informaes, mostra uma mensagem

if (@$_POST[pesquisar]!=) echo No foram encontrado registros


na pesquisa.;

else echo &nbsp;;

?>
</td>
</tr>

<?php
}
?>
</table>
<p><a href=menu.html>Voltar</a></p>
</body>
</html>

Como j mencionado, o controle da pgina semelhante s


outras pginas do sistema. A diferena est na construo
da consulta de forma dinmica. Conforme a combinao de

Unidade 4

linguagem_de_programacao_III.indb 273

273

04/02/11 11:14

Universidade do Sul de Santa Catarina

informaes digitadas no campo, a consulta se altera. Desta


forma, aumenta a complexidade do desenvolvimento, mas
em contrapartida a satisfao do usurio tambm ampliada.
O usurio no precisa ficar navegando para filtrar vrias
informaes.

Figura 4.11 Pesquisa de informaes.


Fonte: Elaborada pelo autor (2010).

Outro atrativo da pgina de consulta a possibilidade de se


realizar alteraes dos registros. Caso o usurio clique no link do
cdigo do livro, ser encaminhado pgina de alterao de livros.
Assim, como se clicar no cdigo do autor, ser encaminhado
pgina de alterao do autor.
Nesse simples exemplo, montamos um sistema completo em
todas as suas principais caractersticas: cadastros, manipulao
de dados, recuperao de informaes. A maioria dos sistemas
comerciais se baseia nessas operaes. Como voc pde ver e
comprovar, o desenvolvimento pode se tornar extenso, porm
muito simples e intuitivo. O importante o desenvolvedor
se concentrar no problema para entend-lo e posteriormente
desenvolver uma soluo.

274

linguagem_de_programacao_III.indb 274

04/02/11 11:14

Linguagens de Programao III

Seo 6 Sesses e cookies


Voc j entendeu as operaes envolvidas em um
desenvolvimento de um sistema. Ainda assim algumas perguntas
ficaram no ar. Como posso identificar se o usurio j visitou a
minha pgina? Como manter informaes? Para respondermos
essas perguntas, precisamos entender um pouco mais sobre o
protocolo HTTP.
O protocolo HTTP no possui informao de estado, ou seja,
no possui formas predefinidas de se dar continuidade entre
as transaes. Quando o usurio navega entre as pginas, o
HTPP no possui formas de se identificar se a navegao se deu
pelo mesmo usurio. Uma necessidade fundamental para uma
segurana em sistema Web conseguir controlar a sesso dos
usurios. Em outras palavras, conseguir monitorar um usurio
durante uma nica sesso em um site Web.
Todas as sesses no PHP se baseiam em um registro nico de
sesso chamado de ID. Esse ID uma numerao aleatria e
criptografada. Esta gerao realizada pelo PHP e armazenado
no cliente para o tempo de vida de uma sesso. As formar de
manter esse ID por meio de cookies no computador do usurio
ou enviado com a URL.
Muito provavelmente voc j deve ter utilizado sites que
mantinham sesses para identificar e monitorar a sua navegao.
O ID da sesso funciona como uma chave que d acesso
s variveis privadas da sua navegao. Essas variveis so
armazenadas no servidor e somente pode ser acessadas quando
o mesmo ID transmitido para o servidor. O ID a nica
informao visvel no cliente.

Cookie
Cookie um arquivo texto que contm uma pequena parte de
informaes que os programas armazenam. O cookie basicamente
possui nome, valor, tempo de vida, caminho no servidor,
domnio, protocolo de segurana.

Unidade 4

linguagem_de_programacao_III.indb 275

275

04/02/11 11:14

Universidade do Sul de Santa Catarina

No PHP para um cookie ser criado usamos a funo setcookie().


As informaes do cookie fazem parte do cabealho de uma
pgina. Quando o usurio faz uma requisio, a pgina vem
dividida em duas partes, o cabealho, que contm as informaes
sobre a requisio e o contedo, que onde a sada HTML
do processamento. Acabam se tornando muito comum os erros
de cabealho quando tentamos alterar essas informaes aps
ser enviado o contedo da pgina (cdigos HTML). Todas
as informaes de cabealho necessitam ser passados antes de
qualquer contedo. Por esse motivo, necessrio ter cuidado para
usar o setcookie antes de qualquer sada HTML. Essa sada pode
ser uma tag ou um simples espao que est no comeo do arquivo
antes da abertura da tag <?php.
<?php
//teste para verificar se o formulrio foi enviado
if (@$_POST[nome]!=) {
//criao do cookie
setcookie(primeirocookie, $_POST[nome], time() + 3600);
}
?>
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd>
<html lang=pt-br>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1>
<title>Grava Cookie</title>
</head>
<body>
<form name=form1 method=post action=>
<label>Nome
<input type=text name=nome id=nome>
</label>
<br> <input type=submit name=enviar value=Enviar>

276

linguagem_de_programacao_III.indb 276

04/02/11 11:14

Linguagens de Programao III

</form>
<p><a href=leituracookie.php>Ler Cookie</a><br>
<a href=apagarcookie.php>Apagar Cookie </a></p>
</body>
</html>

Como j mencionado, a funo setcookie aceita vrios parmetros,


sendo os mais importantes os trs primeiros:

o nome do cookie (primeirocookie)

o valor do cookie ($_POST[nome])

tempo de expirao do cookie (time() + 3600 um


clculo que retorna o tempo no timestamp unix, que
a quantidade de segundos que passou desde o dia
01/01/1970)

O tempo de expirao determina para o browser at quando ele


deve usar aquele cookie. O clculo em segundos, portanto a
funo time foi utilizada para retornar a hora em segundos neste
momento. Adicionado 3600 segundos, o que quer dizer que o
cookie ser vlido por mais uma hora.
Existem vrios parmetros que podem ser
manipulados. Pesquise mais sobre o comando no
manual <http://br.php.net/manual/pt_BR/function.
setcookie.php>.

Para ler um cookie, muito simples. Todos os cookies enviados para


a pgina estaro disponveis na varivel $_COOKIE. Mas um
cookie s estar disponvel na prxima vez que voc acessar uma
pgina. Por isso, vamos criar uma pgina chamada para realizar
essa leitura:

Unidade 4

linguagem_de_programacao_III.indb 277

277

04/02/11 11:15

Universidade do Sul de Santa Catarina

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN


http://www.w3.org/TR/html4/loose.dtd>
<html lang=pt-br>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1>
<title>Leitura do Cookie</title>
</head>

<body>
<p>Lendo o cookie</p>
<p>
<?php
// verifica a existencia do cookie

if (@$_COOKIE[primeirocookie]!=) {

//escreve o valor do cookie

echo Leitura Cookie: . $_COOKIE[primeirocookie];

} else {

echo No foi encontrado Cookie;

?>
</p>
<p><a href=gravarcookie.php>Criar Cookie</a><br>
<a href=apagarcookie.php>Apagar Cookie </a></p>
</body>
</html>

Veja que dentro de uma hora, toda vez que voc carregar essa
pgina, retornar sempre o mesmo valor, a no ser que voc altere
o valor do cookie.

278

linguagem_de_programacao_III.indb 278

04/02/11 11:15

Linguagens de Programao III

Para apagar um cookie, tambm utilizamos a funo setcookie,


porm temos de passar uma string vazia ou false, e no tempo de
expirao temos de passar uma hora atrasada.

<?php

// passando o valor de vazio e atrasando uma hora da hora atual


setcookie(primeirocookie, , time() - 3600);

?>
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd>
<html lang=pt-br>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1>
<title>Apagar Cookie</title>
</head>

<body>
<p>Cookie Apagado</p>
<p><a href=gravarcookie.php>Criar Cookie</a></p>
</body>
</html>

Veja que o resultado uma excluso completa do cookie.


Os cookies possuem alguns problemas como o navegador no
aceit-los. Hoje muito difcil encontrar um navegador que no
aceite um cookie. Porm, pode estar configurado para no aceitar.
Portanto, tenha cuidado na sua utilizao.

Unidade 4

linguagem_de_programacao_III.indb 279

279

04/02/11 11:15

Universidade do Sul de Santa Catarina

Sesso
As sesses em PHP possuem alguns passos simples de serem
utilizados:
1. Iniciar uma sesso.
2. Registrar variveis de sesso.
3. Utilizar essas variveis.
4. Remover registros de variveis e destruir a sesso.
Esses passos no precisam estar todos em uma mesma pgina,
mas devem estar dentro da sua aplicao. Vamos ento montar
um exemplo em que montaremos uma sesso semelhante aos
exemplos do cookie.
<?php
//iniciar a sesso
session_start();
if (@$_POST[nome]!=) {

//criao da varivel

$_SESSION[primeirasessao]=$_POST[nome];

}
?>
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd>
<html lang=pt-br>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1>
<title>Grava Sess&atilde;o</title>
</head>
<body>
<form name=form1 method=post action=>

280

linguagem_de_programacao_III.indb 280

04/02/11 11:15

Linguagens de Programao III

<label>Nome
<input type=text name=nome id=nome>
</label>
<br> <input type=submit name=enviar value=Enviar>
</form>
<p><a href=leiturasessao.php>Ler Sess&atilde;o</a><br>
<a href=apagarsessao.php>Apagar Sess&atilde;o </a></p>
</body>
</html>

Perceba que a sesso no possui tantos parmetros quanto os


cookies. Basicamente temos de iniciar a sesso e registrar as
variveis. As variveis de sesso so acessadas pelo array (vetor)
$_SESSION. Vamos agora montar a leitura desta sesso.
<?php
//toda a pgina que utiliza uma varivel de sesso deve ser iniciada com
session_start
session_start();
?>
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd>
<html lang=pt-br>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1>
<title>Leitura da Sess&atilde;o</title>
</head>
<body>
<p>Lendo a Sess&atilde;o</p>
<p>
<?php
// verifica a existncia do cookie

Unidade 4

linguagem_de_programacao_III.indb 281

281

04/02/11 11:15

Universidade do Sul de Santa Catarina

if (@$_SESSION[primeirasessao]!=) {

//escreve o valor do cookie

echo Leitura Sess&atilde;o: . $_SESSION[primeirasessao];

} else {

echo No foi encontrada Sess&atilde;o;

?>
</p>
<p><a href=gravarsessao.php>Criar Sess&atilde;o</a><br>
<a href=apagarsessao.php>Apagar Sess&atilde;o </a></p>
</body>
</html>

Veja que a primeira instruo da pgina deve ser sempre o


session_start. Somente assim possvel acessar as variveis de
sesso registradas no servidor. Para apagar, vejamos o exemplo a
seguir.
<?php

session_start();

// destruindo todas as variveis de sesso do ID atual


session_destroy();

?>
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd>
<html lang=pt-br>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1>
<title>Apagar Sess&atilde;o</title>
</head>
<body>

282

linguagem_de_programacao_III.indb 282

04/02/11 11:15

Linguagens de Programao III

<p>Sess&atilde;o Apagada</p>
<p><a href=gravarsessao.php>Criar Sess&atilde;o</a></p>
</body>
</html>

Mesmo que voc deseje somente excluir ou destruir as variveis


de sesso necessrio antes inici-la para que o servidor possa
identificar seu uso.
J vimos sesses e cookies, mas, afinal, como utilizamos isso em um
sistema de segurana?
A resposta que como monitoramos a sesso do usurio
possvel saber se ele realizou uma autenticao com o servidor e
se ela foi realizada com sucesso. Antes de realizar esta tarefa,
necessrio criar uma tabela de usurios.
REATE TABLE prg3.usuario (
login VARCHAR( 10 ) NOT NULL ,
senha VARCHAR( 32 ) NOT NULL ,
PRIMARY KEY ( login ) ,
INDEX ( senha )
) ENGINE = MYISAM ;

Alm da criao da tabela, necessrio cadastrar o primeiro


usurio para se dar acesso ao sistema.
INSERT INTO usuario ( login, senha ) VALUES (teste, MD5( 1 ));

Agora j est criada a base de dados necessria para se manter os


usurios do sistema. O prximo passo criar uma tela de login no
sistema. Essa pgina deve validar as informaes do usurio com
o banco de dados.

Unidade 4

linguagem_de_programacao_III.indb 283

283

04/02/11 11:15

Universidade do Sul de Santa Catarina

<?php
// inicia a sesso
session_start();
// verifica se o formulrio foi enviado
if ((@$_POST[login]!=) && (@$_POST[senha]!=)) {

// carrega informaes de banco

include(variaveis.bd);

$link = mysql_connect($serv, $user, $pass) or die(Erro na conexo


com o banco de dados);
mysql_select_db($bd) or die (Erro na seleo do banco de dados.
mysql_errno($link) . : . mysql_error($link). \n<br>);
// realiza a busca na tabela. A funo md5 realiza a criptografia da
informao
$result= mysql_query(select login from usuario where login=.$_
POST[login]. and senha=.md5($_POST[senha]).);

if (@mysql_num_rows($result)==1) {

// registra a sesso

$_SESSION[login]=$_POST[login];

header(Location: menu.php);

} else {

$msg=Login ou Senha n&atilde;o conferem!!;

}
?>
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd>
<html lang=pt-br>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1>
<title>Login</title>
</head>

284

linguagem_de_programacao_III.indb 284

04/02/11 11:15

Linguagens de Programao III

<body>
<h1>Login no Sistema </h1>
<hr>
<?php
if (@$msg!=) {

echo <h1 style=\color:#F00\>$msg</h1>\n;

echo <hr>;

}
?>
<form name=form1 method=post action=>
<table width=40% border=1>
<tr>
<td>Login</td>
<td><label>
<input type=text name=login id=login>
</label></td>
</tr>
<tr>
<td>Senha</td>
<td><label>
<input type=password name=senha id=senha>
</label></td>
</tr>
<tr>
<td colspan=2 align=center><label>
<input type=submit name=enviar id=enviar
value=Enviar>&nbsp;&nbsp;
<input type=reset name=limpar id=limpar value=Limpar>
</label></td>
</tr>

Unidade 4

linguagem_de_programacao_III.indb 285

285

04/02/11 11:15

Universidade do Sul de Santa Catarina

</table>
</form>
</body>
</html>

Com essa pgina de login, foi verificado login a senha do usurio.


Se for validado, registrada uma varivel de sesso identificada
como login. Aps isso, redirecionaremos a pgina para o menu.
php, que nada mais do que a pgina de menu dos cadastros de
livros e autores explicada em outro exemplo. Essa pgina recebe
uma pequena alterao no cdigo. Acrescentando na primeira
linha do cdigo da pgina a seguinte tag PHP:
<?php
include(logado.php);
?>

Vamos incluir um script de validao de sesso. Essa forma


feita para facilitar o desenvolvimento. Uma vez montado, basta
acrescentar em todas as pginas do sistema que funcionar
perfeitamente. Vamos ento montar o script para validar a sesso:
<?php
// Iniciando a sesso
session_start();
# Se tiver sesso de usurio registrada...
if (@$_SESSION[login]==)
{
// Mensagem de erro
$mensagem = Voc no efetuou o login.;
// redireciona a navegao para a pgina de erro
header(Location: erro.php?msg=.$mensagem);
exit();
}
?>

286

linguagem_de_programacao_III.indb 286

04/02/11 11:15

Linguagens de Programao III

Bem simples, foi verificado se a varivel de sesso existe. Caso


no, redireciona para uma pgina de erros j customizando a
mensagem de erro. Essa pgina dever ter um cdigo assim:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd>
<html lang=pt-br>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1>
<title>Erro</title>
</head>
<body>
<h1>Aten&ccedil;&atilde;o</h1>
<hr />
<h1 style=color:#F00><?php
echo addslashes(mb_convert_encoding(@$_GET[msg],iso-88591,utf-8));
?>
</h1>
<hr />
<p><a href=login.php>Login</a></p>
</body>
</html>

Por ltimo, o sistema deve ter uma pgina de logout, ou seja,


de sada do sistema. Para maximizar, o uso vamos utilizar
um redirecionamento para a pgina de erro, customizando a
mensagem para a sada do sistema.

Unidade 4

linguagem_de_programacao_III.indb 287

287

04/02/11 11:15

Universidade do Sul de Santa Catarina

<?php
// Inicia a sesso
session_start();
// Exclui os dados de login
unset($_SESSION[login]);
// Elimina a sesso
session_destroy();
// Enviando o usurio pra pgina de login
header(Location: erro.php?msg=Logout efetuado com sucesso!);
?>

Sntese
Nesta unidade voc pde acompanhar o desenvolvimento de um
sistema completo, acessando um banco de dados, manipulando
informaes e ainda com um certo grau de segurana. Voc
aprendeu sobre MySQL e suas excentricidades e por que ele
amplamente utilizado em desenvolvimento Web. Viu ainda
que com a utilizao de uma boa soluo pode simplificar o
desenvolvimento do sistema.
Aprendeu como o controle de sesso fundamental para
que possamos manter a segurana da aplicao e abre novos
horizontes para uma customizao da prpria aplicao para
cada usurio, j que sendo possvel identific-lo torna-se possvel
criar possibilidades onde possa tornar a aplicao mais amigvel
conforme o usurio.

288

linguagem_de_programacao_III.indb 288

04/02/11 11:15

Linguagens de Programao III

Atividades de autoavaliao
1. Desenvolva um cadastro de livros utilizando o MySQL e o PHP. Este
cadastro deve conter uma tabela de livros contendo os seguintes
campos:
Cdigo
Nome
Autor
Editora
Nmero de pginas
Ainda deve conter uma pgina de listagem geral deste cadastro e uma
pgina com uma busca por nome. Estas pginas devem ser navegveis
entre si, ou seja, construa um menu de navegao entre as pginas.
2. Monte uma pgina de login (login e senha) para acessar uma aplicao
fictcia. Esta pgina de login deve verificar no banco de dados se o
usurio est cadastrado ou no. Caso esteja, registre uma sesso para
o usurio e permita que ele cadastre outros usurios. Caso no esteja,
no permitir o acesso a pgina de cadastro por meio da sesso (no
registrando a sesso).

Saiba mais
Se voc desejar, aprofunde os contedos estudados nesta unidade
ao consultar as seguintes referncias:
Manual PHP, 2010. Disponvel em: <http://br2.php.net/manual/
pt_BR/index.php>. Acessao em: 5 abr. 2010.
PHP Brasil, 2010. Disponvel em: < www.phpbrasil.com>.
Acesso em: 5 abr. 2010.
T r u q u e s e D i c a s Tutoriais de Javascript, 2010.
Disponvel em: <www.truquesedicas.com/tutoriais/php/index.
htm>. Acesso em: 2 mar. 2010.
Manual do MySQL, 2010. Disponvel em: <http://dev.mysql.
com/doc/refman/5.1/en/index.html>. Acesso em: 5 abr. 2010.

Unidade 4

linguagem_de_programacao_III.indb 289

289

04/02/11 11:15

linguagem_de_programacao_III.indb 290

04/02/11 11:15

unidade 5

Extensible Markup Language


(XML)
Objetivos de aprendizagem
Ao final desta unidade, voc ter subsdios para:

Identificar as caractersticas do desenvolvimento Web.

Conhecer mtodos de comunicao entre as


linguagens.

Saber as definies de elementos.

Conhecer as validaes de documentos.

Sees de estudo

linguagem_de_programacao_III.indb 291

Seo 1

Extensible Markup Language (XML)

Seo 2

Definio de Tipos de Documentos (DTD)

Seo 3

XML-Schema

Seo 4

RSS

04/02/11 11:15

Universidade do Sul de Santa Catarina

Para incio de estudo


Atualmente, o XML tratado como um padro de integrao de
informaes em diversos nveis. Sua capacidade de estruturao das
informaes abre um leque gigantesco de opes que vem sendo cada
vez mais explorados. Hoje, bem mais do que um padro de integrao,
tornou-se ferramenta indispensvel para quem necessita estar sempre
informado.

Seo 1 Extensible Markup Language (XML)


Extensible Markup Language (XML) linguagem de marcao
de dados (meta-markup language) que prov um formato para
descrever dados estruturados. Isso facilita declaraes mais
precisas do contedo e resultados mais significativos de busca
por meio de mltiplas plataformas. Alm disso, XML uma
linguagem de transmisso de informaes pela internet.
XML uma linguagem de marcao de dados
extensvel. Ela prov um formato para descrever dados
estruturados que facilita declaraes mais precisas do
contedo.

O XML permite a definio de um nmero infinito de tags


ou elementos. Essa caracterstica muito importante j que o
volume de informaes tende ao crescimento imensurvel. As tags
no HTML podem ser usadas para a definio de formatao dos
caracteres e pargrafos, o XML utiliza as tags para uma nica
finalidade: estruturar os dados.
O XML tem como fundamento a descrio de informaes.
Essa caracterstica a torna essencial para o armazenamento, a
recuperao e a transmisso de informaes. O grande diferencial
dessa linguagem de permitir armazenar em um mesmo
agrupamento os dados e os metadados, que nada mais so do
292

linguagem_de_programacao_III.indb 292

04/02/11 11:15

Linguagens de Programao III

que um detalhamento dos dados. O seu formato textual, que


nos permite uma leitura mais simples das informaes nele
formatadas.
Podemos dizer que uma linguagem inteligente, pois se
adqua facilmente a qualquer nvel de complexidade. Em uma
complexidade simples, seria:
<?xml version=1.0 encoding=utf-8?>
<AUTOMOVEL>Carro</AUTOMVEL>

Agora, se for necessrio aumentar a complexidade, basta


acrescentar tags que possam ser utilizadas para os metadados:
<?xml version=1.0 encoding=utf-8?>
<AUTOMOVEL>
<TIPO>Carro</TIPO>
<FABRIGANTE>Ferrari</FABRIGANTE>
<MODELO ANO=01/01/2009>F-50</MODELO>
</AUTOMVEL>

Como se pode observar, o nmero de informaes se alterou,


porm essa alterao extremante simples e facilmente absorvida
pelo XML.
Outra vantagem dessa linguagem a portabilidade.
Quando se utiliza arquivos binrios para armazenamento de
dados, eles podem ser lidos somente por aplicaes especficas
que foram previamente desenvolvidas para extrair as informaes
contidas. Grande parte dessas aplicaes so proprietrias o que
fora, na maioria das vezes, realizar uma engenharia reversa para
que se possa extrair as informaes por outro aplicativo.
Um exemplo claro o editor de texto da Microsoft, o
Word. Voc digita todo o seu documento e monta as
informaes e formata da forma que achar melhor.
Quando voc salva o documento, h duas opes:
salvar no formato Word ou escolher uma das diversas
opes que a ferramenta disponibiliza. Supondo que

Unidade 5

linguagem_de_programacao_III.indb 293

293

04/02/11 11:15

Universidade do Sul de Santa Catarina

voc salve no formato padro, voc leva o documento


para outro computador que no possui o Word. Voc
dificilmente conseguir abrir esse documento. No
somente essa ferramenta, mas diversos softwares
proprietrios assumem que sempre voc ter um
software compatvel com padro estabelecido por ele.

Com o XML esse problema no ocorre. Voc pode inserir


diversas tags para caracterizar inmeros dados. Porm, o
software que ler este XML, apenas interpretar o que ele
estiver programado para utilizar. Os dados que no identificar
so ignorados, no interferindo na composio da informao.
Tambm no se faz necessrio um escopo de delimitao, ou seja,
uma legenda para conseguirmos identificar onde determinado
dado inicia e onde termina.
Uma das formas comuns de transmisso de dados por meio
de arquivos de largura fixa. Esses arquivos consistem em ter
as informaes em um determinado tamanho. No podendo
extrapolar o limite tampouco reduzir o espao reservado para a
informao. Para uma importao de clientes, teramos a seguinte
tabela:
Coluna

Posio Inicial

Tamanho

CPF

11

NOME

12

30

ENDEREO

41

50

Assim, teramos o seguinte registro:


00011110011JOAQUIM DA SILVA

RUA BRASIL, NUMERO 101

Torna-se clara a limitao dessa tcnica: caso um nome extrapole


as 30 posies ou ainda o endereo, a nica alternativa cortar
a informao, isto , omitir os caracteres que extrapolarem o
tamanho definido.
Outro problema que o arquivo de largura fixa ainda possui
a incluso de um caractere. Imagine o problema se a Receita
Federal resolve aumentar o nmero de dgitos do CPF? Passar de
11 para 12 algarismos, com certeza seria o caos para milhares de
sistema com esse tipo de integrao. Com o XML, esse problema
no existe:
294

linguagem_de_programacao_III.indb 294

04/02/11 11:15

Linguagens de Programao III

<?xml version=1.0 encoding=iso-8859-1?>


<CLIIENTE>
<CPF>00011110011</CPF>
<NOME>JOAQUIM DA SILVA</NOME>
<ENDERECO>RUA BRASIL, NUMERO 101</ENDERECO>
</CLIIENTE>

Tratando-se de uma estrutura simplificada, possvel que


seja realizada uma validao no arquivo antes de ser iniciado
o processamento. Comparativamente, seria como voc abrir
uma planilha eletrnica no bloco de notas. Fica completamente
impossvel identificar o seu contedo, porm foi gasto um tempo
preciso para abrir um arquivo em um software que no ser
possvel manipular.
O padro XML definido pela W3C possui as seguintes
especificaes:

Extensible Markup Language (XML) 1.0: define a sintaxe


da XML.
XML Pointer Language (XPointer) e XML Linking
Language (XLink): definem um padro para representar
os links entre os recursos. Alm dos links simples, como
a tag <A> da HTML, a XML possui mecanismos para
ligar recursos mltiplos e diferentes. A XPointer descreve
como enderear um recurso, e a XLink descreve como
associar dois ou mais recursos.
Extensible Style Language (XSL): define a linguagem de
folhas de estilos padro para a XML.

Como voc pode perceber o XML comea com uma instruo


de processamento: <?xml ...?>. Essa a declarao XML.
Embora no seja obrigatria, a sua presena explcita identifica
o documento como um documento XML e indica a verso da
XML com a qual ele foi escrito.
No h declarao do tipo do documento. Diferentemente
da SGML, a XML no requer uma declarao de tipo de
documento. Entretanto, uma declarao de tipo de documento
Unidade 5

linguagem_de_programacao_III.indb 295

295

04/02/11 11:15

Universidade do Sul de Santa Catarina

pode ser fornecida. Alm disso, alguns documentos precisaro de


uma para serem entendidos sem ambiguidade.
Exemplos de utilizao dos elementos vazios:
<?xml version=1.0 encoding=iso-8859-1?>
<CLIIENTE>
<CPF>00011110011</CPF>
<NOME>JOAQUIM DA SILVA</NOME>
<ENDERECO/>
</CLIIENTE>

O Elemento <ENDERECO/> tem uma sintaxe modificada.


Enquanto que as maiorias dos elementos em um documento
envolvem algum contedo, elementos vazios so simplesmente
marcadores onde alguma coisa ocorre (pode se comparar a tag
<hr> do HTML que se trata de um separador).
O final /> na sintaxe modificada indica a um programa que
processa o documento XML que o elemento vazio e uma
marca de fim correspondente no deve ser procurada. Visto que
os documentos XML no requerem uma declarao de tipo de
documento, sem essa pista seria impossvel para um analisador
XML determinar quais marcas so intencionalmente vazias e
quais teriam sido deixadas vazias por um erro.
A XML suavizou a distino entre elementos declarados como
vazios e os que no possuem contedo. A linguagem permite
usar uma marca de elemento vazio para qualquer um desses
casos. Tambm vlido usar um par de marcas incio-fim para
elementos vazios: < ENDERECO ></ ENDERECO >.
Os documentos XML so compostos de marcas e contedos.
Existem seis tipos de marcaes que podem ocorrer em um
documento XML:
a) elementos;
b) referncias a entidades;
c) comentrios;
296

linguagem_de_programacao_III.indb 296

04/02/11 11:15

Linguagens de Programao III

d) instrues de processamento;
e) sesses marcadas;
f) declaraes de tipos de documento.

a. Elementos
Os elementos so as tags mais comuns na forma de marcao.
Eles so delimitados pelos sinais de menor e maior (< e >), a
maioria dos elementos identificam a natureza do contedo que
a envolvem. Alguns elementos podem ser vazios, como visto
anteriormente; neste caso eles no tm contedo. O elemento no
sendo vazio inicia-se com uma marca de incio, <elemento>, e
termina com uma marca de trmino, </elemento>.

Atributos
Os atributos so associados aos elementos. Eles possuem valores
e so localizados na abertura do elemento. Por exemplo:
<input type=text>

O elemento input cujo atributo type possui o valor text. Em


XML, todos os valores de atributos devem estar entre aspas.
Normalmente atributos vazios so omitidos do elemento.

b. Referncias a entidades
Alguns caracteres so reservados para identificar o incio de uma
marcao. O sinal de menor, < , por exemplo, identifica o incio
de uma marca de incio ou trmino desta. Para inserir esses
caracteres em seu documento como contedo, deve haver uma
alternativa para represent-los. Em XML, entidades so usadas
para representar esses caracteres especiais.
As entidades devem ter um nico nome. Para ser utilizada, a
entidade deve simplesmente ser referenciada pelo nome. As
Unidade 5

linguagem_de_programacao_III.indb 297

297

04/02/11 11:15

Universidade do Sul de Santa Catarina

referncias das entidades iniciam com o E comercial (&) e


terminam com um ponto e vrgula (;). Por exemplo, a entidade lt
insere um literal < em um documento. Para representar o sinal de
maior dentro do XML, dever usar &lt; resultando no seguinte
cdigo:
<?xml version=1.0 encoding=utf-8?>
<opercacao>6 &lt; 7</opercacao>

c. Comentrios
Os comentrios so idnticos aos utilizados no HTML. Iniciamse com <!-- e terminam com -->. Os comentrios podem conter
qualquer caractere, a nica exceo se refere literal --.
possvel colocar comentrios entre marcas em qualquer lugar do
XML. Comentrios no fazem parte de um contedo textual
de um documento XML. Um processador XML no necessita
reconhecer esse bloco na aplicao.

Sesses CDATA
Apesar de ser possvel converter diversos tipos de caracteres
para uma entidade, existem casos que esse processo pode se
tornar complexo. Para que possamos escrever diversos tipos
de caracteres sem nos preocupar em converter os elementos,
utilizamos as sesses CDTAT. Em um documento, uma
sesso CDATA instrui o analisador para ignorar a maioria
dos caracteres de marcao. Vamos levar em considerao uma
instruo PHP dentro de um XML. Ele pode conter caracteres
que o analisador XML normalmente reconheceria como
elementos, assim teremos a seguinte forma:

298

linguagem_de_programacao_III.indb 298

04/02/11 11:15

Linguagens de Programao III

<?xml version=1.0 encoding=utf-8?>


<opercacao><![CDATA[
if ((@$_POST[CAMPO1]>0)||(@$_POST[CAMPO2]>0)&&(@$_
POST[CAMPO3]>0)) {
echo ok;
}
]]>
</opercacao>

Em todo o contedo da sesso (<![CDATA[, e o fim da seo,


]]>), os caracteres so passados diretamente para a aplicao, sem
interpretao. Elementos, referncias a entidades, comentrios e
instrues de processamento so todos irreconhecveis e os caracteres
que os compem so passados literalmente para a aplicao. As nicas
literais que no possvel ser contida nas sesses CDATA so as
prprias marcaes de incio e fim da sesso.
O XML um documento que pode ser gerado por diversos
softwares e linguagens diferentes. Essa portabilidade permitiu
sua ampla utilizao entre diversas tecnologias. Para ilustrar essa
flexibilidade, veja como simples a criao de um XML utilizando
o PHP. Neste exemplo o documento gerado de forma semelhante
a um arquivo texto de largura fixa ou limitado por caractere
utilizando a funo fopen.
<HTML>
<HEAD>
<TITLE>Documento PHP</TITLE>
</HEAD>
<BODY>
<?php
/*
CONFIGURAES

Primeiramente voc deve a permisso no sistema operacional


para que usurios da Web ou o usurio que detm o servio do
servidor Web possa criar e apagar arquivos no diretrio/pasta onde
esse arquivo est salvo.
Unidade 5

linguagem_de_programacao_III.indb 299

299

04/02/11 11:15

Universidade do Sul de Santa Catarina

*/
$teste= array(array(1A,Zehh,10),
array(1A,Tatiana,9),
array(1B,Joo,3),
array(1B,Bruna,5),
array(1B,Bianca,8));
// Vetor simbolizando a leitura de uma fonte de dados
$arquivo=fopen(arquivoteste.xml,w+);
// fopen a funo que abre/cria um arquivo; ou uma url
// w+ Abre para leitura e escrita; coloca o ponteiro do arquivo no comeo
do arquivo e reduz o comprimento do arquivo para zero. Se o arquivo
no existir, tenta cri-lo.
// Para saber mais sobre esta funo pode acessar http://www.php.net/
manual/pt_BR/function.fopen.php
$xml=<?xml version=\1.0\ encoding=\ISO-8859-1\?>\n;
$xml.=<escola>\n;
// $xml uma varivel onde est sendo armazenado informaes de
texto, neste caso o que ser escrito no arquivo
$sala=0;
$controle=false;
// varivel de controle para este caso trabalhando com vetor
for ($i=0; $i<count($teste);$i++) {
if ($sala!=$teste[$i][0]) {
$sala=$teste[$i][0];
$controle=true;
if ($i!=0) {
$xml.=</salas>\n;
}
} else {
$controle=false;
}
if ($controle==true) {

300

linguagem_de_programacao_III.indb 300

04/02/11 11:15

Linguagens de Programao III

$xml.=<salas nome=\$sala\>\n;
$controle=false;
}
$xml.=<aluno>
<nome><![CDATA[.$teste[$i][1].]]></nome>
<nota valor=\.$teste[$i][2].\ />
</aluno>\n;
}
$xml.=</salas>
</escola>;
fwrite($arquivo, $xml);
// escreve no arquivo designado o contedo de uma varivel o texto
fclose($arquivo);
// fecha o arquivo
echo arquivo gerado!!<br>;
//*/
?>

<a href=lerxml.php?arquivo=arquivoteste.xml>Clique aqui


para ler o contedo</a><br>
<a href=arquivoteste.xml target=_blank>Veja o xml</a>
</BODY>
</HTML>

Voc pode perceber que, apesar de o arquivo resultante ser um


documento XML, as funes empregadas neste caso so as
mesmas se caso fssemos construir um documento texto. Isso
permite que linguagens que ainda no possuem bibliotecas
prprias para o XML possam construir arquivos de comunicao
nesse formato. Vejamos outro exemplo com os mesmos dados,
porm utilizando uma biblioteca prpria para o XML.

Unidade 5

linguagem_de_programacao_III.indb 301

301

04/02/11 11:15

Universidade do Sul de Santa Catarina

<HTML>
<HEAD>
<TITLE>Documento PHP</TITLE>
<meta http-equiv=Content-Type content=text/html; charset=utf-8>
<BODY>
<?php
$teste= array(array(1A,Zehh,10),
array(1A,Tatiana,9),
array(1B,Joo,3),
array(1B,Bruna,5),
array(1B,Bianca,8));
$xml = new DOMDocument(1.0, ISO-8859-1); // cria o cabealho do
XML
$xml->preserveWhiteSpace = false; //ignora todos os espaos em brancos
$xml->formatOutput = true; //gera o cdigo formatado
$root = $xml->createElement(escola); //cria o primeira tag (raiz)
$sala=0;
// varivel de controle para este caso trabalhando com vetor
for ($i=0; $i<count($teste);$i++) {
// Fora o agrupamento das salas
if ($teste[$i][0]!=$sala) {
$salasXML = $xml->createElement(salas);
$salaXML_no=$root->appendChild($salasXML);
$sala=$teste[$i][0];
}
// cria os elementos do xml aluno, nome e nota
$alunoXML = $xml->createElement(aluno);
// o elemento ou tag nome ter o nome do aluno como texto
$nomeXML = $xml->createElement(nome);
// cria uma sesso CDATA que permite caracteres especiais
$cdataNome = $xml->createCDATASection($teste[$i][1]);

302

linguagem_de_programacao_III.indb 302

04/02/11 11:15

Linguagens de Programao III

//cria o elemento nota sem texto


$notaXML = $xml->createElement(nota);
//acrescenta a tag aluno como filho da tag sala
$alunoXML_no=$salaXML_no->appendChild($alunoXML);
//acrescenta a tag nome como filha da tag aluno
$nomeXML_no=$alunoXML_no->appendChild($nomeXML);
//acrescenta a sesso CDATA com o nome do aluno dentro da tag
nome

$nomeXML_no->appendChild($cdataNome);
// acrescenta a tag nota como filha da tag aluno
$notaXML_no=$alunoXML_no->appendChild($notaXML);
// adiciona o atributo valor para a tag nota
$notaXML_no->setAttribute(valor,$teste[$i][2]);
/*
IMPORTANTE

Uma vez realizado o setAttribute no pode ser acrescentado mais


elementos a tag
*/
//Caso for o ltimo elemento da tag sala adiciona o atributo nome para
a sala
if ($teste[$i][0]!=$teste[$i+1][0]) {
$salaXML_no=$salaXML_no->setAttribute(nome,$teste[$i][0]);
}
}
$xml->appendChild($root);
$xml->save(testeXMLDom.xml); //salvar arquivo
?>
<a href=lerxml.php?arquivo=testeXMLDom.xml>Clique aqui para ler o
conte&uacute;do</a><br>
<a href=testeXMLDom.xml target=_blank>Veja o xml</a>
</BODY>
</html>

Unidade 5

linguagem_de_programacao_III.indb 303

303

04/02/11 11:15

Universidade do Sul de Santa Catarina

Neste exemplo uma classe foi utilizada para a gerao do XML,


permitindo uma construo lgica utilizando todo o potencial do
XML.
Existem diversos outros elementos que podem
ser acrescentado ao XML utilizando a classe DOM.
Pesquise um pouco mais sobre essa poderosa
classe do PHP.

Existe um segredo para a utilizao da classe DOM. O


encoding do XML para aceitar acentuao deve ser ISO8859-1. Porm, para que a classe consiga converter o
charset, da pgina deve ser UTF-8. Caso contrrio, a
classe no conseguir salvar o arquivo XML.

J pode observar duas formas de criar um documento XML.


Pode perceber que, apesar de os dois exemplos utilizarem os
mesmos dados, a forma de construo se distingue muito. Vamos
montar agora a leitura desse documento por meio do PHP.
<HTML>
<HEAD>
<TITLE>L o XML</TITLE>
</HEAD>
<body>
<?php
$arquivo = file_get_contents($_GET[arquivo]);
// recupera a informao de um arquivo ou url e atribui para uma varivel
texto
$xml = simplexml_load_string($arquivo);
// transforma um texto no formato xml em objeto
for ($i=0;$i<count($xml->salas);$i++) {

$nome_sala = $xml->salas[$i][nome];

/*

304

linguagem_de_programacao_III.indb 304

04/02/11 11:15

Linguagens de Programao III

IMPORTANTE

Para usar esta classe, necessrio conhecer o arquivo xml que est
retornando.
Vou explicar aqui no colocando a conceituao de orientao a
objetos, mas explicando de forma simples e em linguagem usual.

As regras so as seguintes:

Para cada tag XML, criado um objeto.

Os blocos de tags que contenham diversas sub-tag podem ser


acessada como vetor, indicando o nmero da ocorrncia de cada um.

Cada atributo da tag pode ser acessado pelo nome como um vetor.

*/

echo <p>Sala .($i+1).: $nome_sala<br>;

for ($j=0;$j<count($xml->salas[$i]->aluno);$j++) {

$nome_aluno_da_sala = $xml->salas[$i]->aluno[$j]->nome;

$nota_aluno_da_sala = $xml->salas[$i]->aluno[$j]->nota[valor];



echo Nome do aluno <b>.($j+1).</b> sala <b>$nome_sala</b>:
<em><strong>$nome_aluno_da_sala</strong></em><br>;

echo Nota do aluno <b>.($j+1).</b> da sala <b>$nome_sala</
b>: <em><strong>$nota_aluno_da_sala</strong></em><br><br>;

echo </p>;

}
?>
<a href=javascript:back();>Voltar para a gerao do xml</a>
</body>
</HTML>

Desta forma, voc pode ler qualquer arquivo XML apenas


adequando manipulao das informaes que forem resgatadas.

Unidade 5

linguagem_de_programacao_III.indb 305

305

04/02/11 11:15

Universidade do Sul de Santa Catarina

Namespaces
O Namespace em XML foi desenvolvido com o intuito de resolver
o problema de conflitos de elementos. Em funo do XML
permitir a criao de qualquer nome de tag para os documentos,
pode ocorrer de diferentes usurios em diferentes contextos
criarem tags com os mesmos nomes. O Namespace permite
realizar uma declarao o contexto utilizado sobre uma tag.
Poderamos utilizar o XML para registrar o valor de um livro da
seguinte forma.
<?xml version=1.0 encoding=utf-8?>
<livro>
<titulo>XML uma viso do futuro!</titulo>
<valor moeda=REAL>50,00</valor>
</livro>
Em outro contexto, agora possvel representar os dados do autor.
<?xml version=1.0 encoding=utf-8?>
<autor>
<titulo>Sr</titulo>
<nome>Joaquim da Silva</nome>
</autor>

Quando lemos os dois documentos, percebemos que o ttulo


do livro no possui relao com o ttulo do autor. Porm, um
sistema automatizado no possui tal discernimento entre essas
duas tags. Possivelmente ele interpretar as tags ttulo da mesma
forma.
Podemos solucionar esse problema realizando uma declarao
de Namespace para que todos os elementos dentro de um bloco
possam ser referenciados a ele. Utilizamos a seguinte declarao.

306

linguagem_de_programacao_III.indb 306

04/02/11 11:15

Linguagens de Programao III

<?xml version=1.0 encoding=ISO-8859-1?>


<livro xmlns=urn.endereodaaplicao.com:TituloDaAplicao>
<titulo>XML uma viso do futuro!</titulo>
<valor moeda=REAL>50,00</valor>
</livro>

Outra forma de declarao a utilizao de abreviaes e


atribuio de mais de um Namespace ao documento. Forando
que a aplicao tenha o comportamento idntico a tags dentro de
documentos diferentes.
<?xml version=1.0 encoding=ISO-8859-1?>
<lv:livro xmlns:lv=urn.endereodaaplicao.com:TituloDaAplicao
xmlns:dinheiro=urn:Financeiro:Dinheior>
<lv:titulo>XML uma viso do futuro!</lv:titulo>
<dinheiro:valor moeda=REAL>50,00</dinheiro:valor>
</lv:livro>

f. Declaraes de Tipos de Documentos


Um dos maiores poderes da XML que ela permite que voc
crie seus prprios nomes para marcas. Dependendo da aplicao
provvel no ser significativo que os elementos estejam dispostos
em uma ordem lgica. Podem estar ordenadas de forma aleatria,
teramos o seguinte exemplo:
<?xml version=1.0 encoding=utf-8?>
<pessoas>
<Joaquim>

Diga

<saudao>

Ol querida

</saudao>

, Maria.

Unidade 5

linguagem_de_programacao_III.indb 307

307

04/02/11 11:15

Universidade do Sul de Santa Catarina

</Joaquim>
<Pedro>
<saudao>

At mais tarde, Maria.


</saudao>
</Pedro>

</pessoas>

Aos nossos olhos, podemos no encontrar o menor sentido nas


instrues escritas. Mas XML processa de forma normal as
informaes. No h nada de errado com esse documento XML.
Pelo contrrio, ele possui significado ao menos para a pessoa que
o escreveu ou esteja escrevendo uma folha de estilos ou aplicao.
Para processar o documento deve haver alguma restrio na
sequncia e alinhamento das marcas. Declaraes so onde essas
restries podem ser expressas.
As declaraes em XML permitem a um documento comunicar
meta-informaes ao analisador a respeito do seu contedo.
Meta-informao inclui as sequncias e os alinhamentos
permitidos para as marcas, os valores de atributos e seus tipos
e padres, os nomes de arquivos externos que podem ser
referenciados e se eles podem ou no conter XML.
H quatro tipos de declaraes em XML: declaraes de tipos
de elementos, declaraes de listas de atributos, declaraes de
entidades e declaraes de notaes.

308

linguagem_de_programacao_III.indb 308

04/02/11 11:15

Linguagens de Programao III

Seo 2 Definio de Tipos de Documentos DTD


A estrutura de um documento definida pelos DTDs. DTD
onde se especifica quais os elementos e atributos so permitidos
no documento. Embora no seja necessrio que um documento
XML tenha um DTD correspondente, recomenda-se, em
alguns casos, a sua utilizao para garantir a conformidade do
documento.
O padro DTD utiliza somente elementos definidos,
diferentemente do XML simples, em que se pode acrescentar
diversos elementos diferentes. No DTD isso no pode ocorrer.
Todo o elemento deve ser definido.
Torna-se importante a sua utilizao quando necessria
a extrema conformidade de informaes, quando empresas
trocam informaes via XML com outras. Assim, para no
haver discrepncias de informaes, necessrio definir quais
elementos sero utilizados.
As DTDs especificam a estrutura de um documento, e so
definidas por meio da gramtica EBNF (Extended Backus-Naur
Form), e no na sintaxe XML.

Processamento de Documentos XML


Para processar documentos XML e verificar se a sintaxe e o
tipo utilizados so vlidas utiliza-se aplicaes denominadas
processadores de XML ou Parsers.
O Parser de validao percorre o documento para verificar se
sua estrutura est de acordo com as regras de um DTD. Se o
documento no estiver de acordo com a DTD, o Parser acusar
um erro.
Existem Parsers que no fazem validao do tipo, mas apenas
verifica se a sintaxe do documento est correta. Os Parsers
so utilizados para transformar o documento XML em uma
estrutura de rvore para que as aplicaes possam acessar seu
contedo.
Unidade 5

linguagem_de_programacao_III.indb 309

309

04/02/11 11:15

Universidade do Sul de Santa Catarina

Definio de Tipo de Documento


A referncia de um documento para uma DTD feita em uma
definio de tipo de documento. A DTD pode estar contida no
documento (subconjunto interno) ou existir externamente como
um arquivo separado (subconjunto externo).
Desta forma, as DTDs so introduzidas em um documento
XML por meio da declarao DOCTYPE. Uma declarao
de tipo de documento colocada no prlogo de um documento
XML, comeando por <!DOCTYPE e terminando por >. O
exemplo a seguir representa um subconjunto interno.
<?xml version=1.0?>
<!DOCTYPE email [
<!ELEMENT email (para,de,assunto,contedo)>
<!ELEMENT para (#PCDATA)>
<!ELEMENT de (#PCDATA)>
<!ELEMENT assunto (#PCDATA)>
<!ELEMENT contedo (#PCDATA)>
]>
<email>
<para>Maria</para>
<de>Joo</de>
<assunto>Jantar</assunto>
<contedo>O que h para o jantar?</contedo>
</email>

Os subconjuntos externos esto colocados fisicamente em outro


arquivo que, em geral, termina com a extenso .dtd, embora
essa extenso no seja necessria. Os subconjuntos externos so

310

linguagem_de_programacao_III.indb 310

04/02/11 11:15

Linguagens de Programao III

especificados pela palavra-chave SYSTEM ou pela palavra-chave


PUBLIC.
<?xml version=1.0?>
<!DOCTYPE email SYSTEM definicaoXML.dtd >
<email>
<para>Maria</para>
<de>Joo</de>
<assunto>Jantar</assunto>
<contedo>O que h para o jantar?</contedo>
</email>

Veja que estamos apontando para uma definio externa chamada


definicaoXML.dtd. O seu contedo pode ser representado da
seguinte forma:
<?xml version=1.0?>
<!DOCTYPE email [
<!ELEMENT email (para,de,assunto,contedo)>
<!ELEMENT para (#PCDATA)>
<!ELEMENT de (#PCDATA)>
<!ELEMENT assunto (#PCDATA)>
<!ELEMENT contedo (#PCDATA)>
]>

Outra forma de representar a definio seria referencia-la em uma


url externa. Desta forma, vrios Parsers podem usar um DTD
em comum para validar seus documentos.
<?xml version=1.0?>
<!DOCTYPE email SYSTEM http://www.w3.org/TR/html4/strict.dtd >

Vimos um subconjunto externo utilizando um URL, que


indica que a DTD amplamente utilizada. No exemplo, est
sendo apontada a DTD para documentos HTML. Assim, os
analisadores que no tm cpia local da DTD podem utilizar

Unidade 5

linguagem_de_programacao_III.indb 311

311

04/02/11 11:15

Universidade do Sul de Santa Catarina

a URL fornecida para fazer o download da DTD, para fins de


validao do documento.
A declarao de tipo de documento pode ainda conter arquivos
externos de validao comuns. Acrescentando ainda elementos
especficos para o documento. Desta forma, podemos especificar
todo o documento mesmo se todos os elementos no estejam
detalhados em arquivos externos de especificaes.
<?xml version=1.0?>
<!DOCTYPE email SYSTEM definicaoXML.dtd >
<!ELEMENT tipo (#PCDATA)>
<email>
<para>Maria</para>
<de>Joo</de>
<tipo>html</tipo>
<assunto>Jantar</assunto>
<contedo>O que h para o jantar?</contedo>
</email>

Lembre-se que essa declarao interna visvel somente dentro


do documento onde est definido. Para que outros documentos
sejam validados por este elemento, torna-se imprescindvel a sua
definio no arquivo externo definicaoXML.dtd, no caso do
exemplo. As DTDs que so usadas por mais de um documento
devem ser colocadas no subconjunto externo.

Declaraes de Tipos de Elementos


Declaraes de tipos de elementos identificam os nomes dos
elementos e a natureza do seu contedo. Essa declarao vem na
forma de ELEMENT.
<!ELEMENT email (para+,de| assunto*,contedo?)>

A declarao representa o elemento email. Contm um


modelo de contedo que representa os elementos que constaro
312

linguagem_de_programacao_III.indb 312

04/02/11 11:15

Linguagens de Programao III

dentro do elemento. A separao entre vrgulas representa uma


obrigatoriedade. O sinal de adio representa que o elemento
para pode se repetir, mas pelo menos deve aparecer uma vez. J
o ponto de interrogao (aps o contedo), indica que o elemento
opcional, mas no deve aparecer mais de uma vez. O smbolo |
representa uma ligao de ou. Essa ligao indica que o elemento
de ou o elemento assunto sero representados. O smbolo *
indica que o elemento assunto opcional e pode ocorrer n vezes
no documento.
Aps a declarao do modelo do documento, devemos declarar o
tipo de informaes apresentadas no XML. Cada elemento deve
ser declarado separadamente da seguinte forma:
<!ELEMENT para (#PCDATA)>

O elemento para chamado identificador genrico e


vem depois da declarao ELEMENT. O conjunto entre
parnteses que segue o identificador genrico (#PCDATA)
indica o contedo permitido para o elemento e chamado de
especificao de contedo. Esses dados sero analisados pelo
analisador XML, portanto, qualquer texto de marcao (<, >, &,
e ) ser tratado como marcao. As declaraes para todos os
elementos usados em qualquer modelo de contedo devem estar
presente para que um processador XML verifique a validade do
documento.

Declaraes de Atributos
Como no podia ser diferente, a declarao de atributos uma
parte fundamental do DTD. A declarao de atributo especifica
uma lista de atributos para um determinado elemento usando a
declarao pela palavra reservada ATTLIST. O elemento pode
ter qualquer nmero de atributos.

Unidade 5

linguagem_de_programacao_III.indb 313

313

04/02/11 11:15

Universidade do Sul de Santa Catarina

<?xml version=1.0?>
<!DOCTYPE email [
<!ELEMENT email (para,de,assunto,contedo)>
<!ATTLIST email tipo CDATA #REQUIRED>
<!ELEMENT para (#PCDATA)>
<!ELEMENT de (#PCDATA)>
<!ELEMENT assunto (#PCDATA)>
<!ELEMENT contedo (#PCDATA)>
]>
<email tipo=html>
<para>Maria</para>
<de>Joo</de>
<assunto>Jantar</assunto>
<contedo>O que h para o jantar?</contedo>
</email>

A declarao anterior especifica que o elemento email possui


um atributo tipo. A palavra reservada CDATA indica que tipo
pode conter qualquer texto de caracteres, exceto os caracteres
<, >, &, e . Perceba que a palavra reservada CDATA na
declarao de tipo possui significado diferente da sesso CDATA
em um documento XML, como j explicado. Outra caracterstica
desse exemplo a palavra reservada REQUIRED. Indicao do
atributo ser obrigatrio, caso o atributo seja opcional, devemos
substituir REQUIRED por IMPLIED.
<!ATTLIST email tipo CDATA #IMPLIED>

Podemos ainda especificar o tipo de valores que os atributos


podem receber. Ou seja, nos atributos possvel representar uma
lista de valores nos quais o documento deve constar.
<!ATTLIST email tipo (html | text) html>

314

linguagem_de_programacao_III.indb 314

04/02/11 11:15

Linguagens de Programao III

Lembre-se que o uso do DTD requer que o


interpretador esteja preparado para interpret-lo. Caso
contrrio, o DTD ser ignorado.

A declarao de atributos possui trs partes: nome, tipo, valor


padro. Quanto ao nome, pode ser adotado o que melhor condiz
com a regra do sistema. Obviamente o nome do atributo no
pode se repetir para o mesmo elemento tampouco receber os
marcadores especiais (<, >, &, ou ). Quanto aos tipos, existem
atualmente seis tipos de atributos:
CDATA

Qualquer texto permitido. No confunda atributos CDATA


com sesses CDATA, eles no tm relao.

ID

Identifica de forma nica um elemento. Ou seja, no pode


haver outro elemento com atributo ID com o mesmo valor.
Os IDs identificam unicamente elementos individuais em um
documento. Os elementos podem ter um nico atributo ID.

IDREF ou
IDREFS

Apontam para elementos com um atributo ID. O valor de


um atributo IDREFS pode conter valores IDREF mltiplos
separados por espaos em branco.

ENTITY ou
ENTITIES

Entidades so utilizadas para associar nomes com outros


fragmentos do documento. Podem ser utilizadas entidades
internas ou externas. O valor de um atributo ENTITIES pode
conter valores de entidades mltiplos separados por espaos
em branco.

NMTOKEN ou
NMTOKEN

Um tipo de atributo mais restritivo, cujo valor consiste em


caracteres letras, dgitos, pontos, sublinhados, hfens e doispontos. O valor de um atributo NMTOKENS pode conter
valores NMTOKEN mltiplos separados por espaos em
branco.

Atributos
Enumerados =

Voc pode especificar que o valor de um atributo


deve ser pego de uma lista especfica de nomes. Isso
frequentemente chamado de tipo enumerado, porque cada
um dos valores possveis est explicitamente enumerado na
declarao.

Alm dos tipos de atributos, possvel definir o valor padro para


cada atributo:

Unidade 5

linguagem_de_programacao_III.indb 315

315

04/02/11 11:15

Universidade do Sul de Santa Catarina

#REQUIRED

Especifica que o atributo deve aparecer no elemento.


O documento XML no vlido se o atributo estiver
faltando.

#IMPLIED

Especifica que, se o atributo no aparece no


elemento, ento a aplicao que est usando o
documento XML pode usar qualquer valor que por
ventura escolher. Um valor para este atributo no
requerido.

#FIXED

Especifica que o valor do atributo constante e no


pode ser diferente no documento XML. Um valor
para o atributo requerido.

valor

Especifica um valor padro para o atributo, se no for


definido um.

O analisador XML procura sempre normalizar os valores


dos atributos. As referncias de caractere so substitudas por
caracteres referenciados, referncias a entidades so resolvidas
(recursivamente) e espaos em branco so normalizados.

Declaraes de Entidades
Declaraes de entidades permitem associar um nome ou uma
definio a uma sigla ou outro cdigo de identificao. Essa
identificao livre e pode conter quaisquer caracteres que no
infrinjam os marcadores do XML. Os principais tipos utilizados
so: entidades internas e entidades externas.

Entidades Internas
Entidades internas so as declaraes realizadas dentro do
prprio documento. Essas declaraes tm o escopo limitado
para o documento no sendo compartilhadas por outros.

316

linguagem_de_programacao_III.indb 316

04/02/11 11:15

Linguagens de Programao III

<?xml version=1.0?>
<!DOCTYPE email [
<!ELEMENT email (para,de,assunto,contedo)>
<!ATTLIST email tipo (html | text) html>
<!ELEMENT para (#PCDATA)>
<!ELEMENT de (#PCDATA)>
<!ELEMENT assunto (#PCDATA)>
<!ELEMENT contedo (#PCDATA)>
<!ENTITY UNISUL Universidade do Sul de Santa Catarina>
]>
<email tipo=text>
<para>Maria</para>
<de>Joo</de>
<assunto>Jantar</assunto>
<contedo>Vou enviar um e-mail para a &UNISUL;
</contedo>
</email>

O resultado desse documento ser uma converso da cadeia


&UNISUL; para Universidade do Sul de Santa Catarina. Essa
converso ser realizada em qualquer local do documento.
Em outras palavras, permite definir atalhos para textos
frequentemente digitados ou textos que se espera que sejam
alterados, como o estado de reviso de um documento.
Entidades internas podem incluir referncias para outras
entidades internas, mas errado elas serem recursivas. A
especificao XML predefine cinco entidades internas:
? &lt; produz o sinal de menor, <
? &gt; produz o sinal de maior, >
? &amp; produz o E comercial, &
? &apos; produz um apstrofo,
? &quot; produz aspas,

Unidade 5

linguagem_de_programacao_III.indb 317

317

04/02/11 11:15

Universidade do Sul de Santa Catarina

Entidades externas
Entidades externas so as associaes de definies externas ao
documento atual. Permitem o documento XML referenciar o
contedo de um outro arquivo. Se elas contm texto, o contedo
do arquivo externo inserido no ponto de referncia e analisado
como parte do documento referente. Dados binrios no so
analisados e podem somente ser referenciados em um atributo;
eles so usados para referenciar figuras e outro contedo no
XML no documento.
Esse tipo de entidade possvel inserir seu contedo ao
documento atual. Assim, podemos anexar vrios documentos
para que o seu contedo possa relacionar com o restante do
documento.
<?xml version=1.0?>
<!DOCTYPE email [
<!ELEMENT email (para,de,assunto,contedo)>
<!ATTLIST email tipo (html | text) html>
<!ELEMENT para (#PCDATA)>
<!ELEMENT de (#PCDATA)>
<!ELEMENT assunto (#PCDATA)>
<!ELEMENT contedo (#PCDATA)>
<!ENTITY UNISUL Universidade do Sul de Santa Catarina>
<!ENTITY inserirTexto SYSTEM testeInserir.xml>
]>
<email tipo=text>
<para>Maria</para>
<de>Joo</de>
<assunto>Jantar</assunto>
<contedo>Vou enviar um e-mail para a > &UNISUL;
&inserirTexto;
</contedo>
</email>

318

linguagem_de_programacao_III.indb 318

04/02/11 11:15

Linguagens de Programao III

O processador XML analisar o contedo desse arquivo como


se ele ocorresse literalmente no local. Representando assim o
resultado:

Seo 3 XML-Schema
O XML-Schema, tambm conhecido como XSD (XML Schema
Definition), uma maneira mais eficiente de descrever a estrutura
e o contedo de um documento XML. O propsito de um
XML-Schema definir os blocos de construo permitidos em
um documento XML, como um DTD.
O XML-Schema semelhante a uma DTD, ambas definem a
estrutura do XML. Originalmente o XML utilizou das DTDs
como forma de definio de sua estrutura. Com os avanos em
sua utilizao, percebeu-se que as DTDs eram imensamente
limitadas, no permitindo diversos pontos, como:

as DTDs no so expansveis, no permitem que novos


elementos sejam introduzidos;
DTD no possuem suporte a tipos de dados;
os DTDs no possuem suporte a namespaces, este recurso
limitado ao documento XML.

Os desenvolvedores viram que as DTDs no podiam


acompanhar a flexibilidade do XML. A sada para esse dilema
foi o desenvolvimento de um novo padro de definio da
estrutura do XML, que foi denominada de XSD ou XML
Schema Definition, tambm chamada XML-Schema.
Tanto a DTD quanto o XSD, ou XML-Schema, definem:

elementos que podem aparecer em um documento;


Unidade 5

linguagem_de_programacao_III.indb 319

319

04/02/11 11:15

Universidade do Sul de Santa Catarina

atributos que podem aparecer em um documento;

que elementos so elementos filhos;

a ordem dos elementos filhos;

o nmero de elementos filhos;

se um elemento vazio ou pode incluir texto;

tipos de dados para elementos e atributos;

valores padro e fixos para elementos e atributos.

As vantagens do XSD, ou XML-Schema, sobre a DTD so:

XML-Schemas so extensveis para adies futuras, com


isso voc pode:

reutilizar seu Schema em outros Schemas;


criar seus prprios tipos de dados derivados dos tipos
padres;
referenciar mltiplos esquemas em um mesmo
documento.

XML-Schemas so mais ricos e teis que DTDs.

XML-Schemas so escritos em XML e, com isso, voc:

no tem de aprender outra linguagem;


pode usar seu editor XML para editar seus arquivos
XML-Schemas;
pode usar seu parser XML para verificar seus arquivos
XML-Schemas;

pode manipular seu XML Schema com XML DOM;

pode usar seu XML-Schema com XSLT.

320

linguagem_de_programacao_III.indb 320

04/02/11 11:15

Linguagens de Programao III

XML-Schemas suportam tipos de dados, com isso


mais fcil:

descrever contedo de documentos permissveis;

validar os dados;

trabalhar com dados de um banco de dados;

definir restries aos dados;

definir padres/formatos de dados;

converter dados entre diferentes tipos.

XML-Schemas suportam namespaces.

Princpios do XSD
J vimos que o namespace usado para identificar unicamente o
nome dos elementos. Basicamente consiste em nomear todos os
elementos de um XML com um mesmo prefixo. Para identificar
onde termina o prefixo e onde comea o nome propriamente dito,
usa-se o caractere : (dois pontos).
Por definio, os elementos XML-Schema comeam com o
prefixo xs. Desta forma, no h problemas em identificar
elementos do XML-Schema e os elementos do XML caso eles
tenham a mesma tag.
Visando a um melhor entendimento, vamos utilizar um exemplo
de e-mail. Vamos comprar a definio com a DTD e o XSD.
<?xml version=1.0?>
<!DOCTYPE email [
<!ELEMENT email (para,de,assunto,contedo)>
<!ELEMENT para (#PCDATA)>
<!ELEMENT de (#PCDATA)>

Unidade 5

linguagem_de_programacao_III.indb 321

321

04/02/11 11:15

Universidade do Sul de Santa Catarina

<!ELEMENT assunto (#PCDATA)>


<!ELEMENT contedo (#PCDATA)>
]>
<email>
<para>Joo</para>
<de>Joaquim</de>
<assunto>Reunio</assunto>
<contedo>A reunio est agendada para as 10:00 hs</contedo>
</email>

Um XML-Schema para o mesmo XML pode ser escrito da


seguinte maneira:
<?xml version=1.0?>
<xs:schema xmlns:xs=http://www.w3.org/2001/XMLSchema
targetNamespace=http://www.w3schools.com xmlns=http://www.
w3schools.com elementFormDefault=qualified>
<xs:element name= email>
<xs:complexType>
<xs:sequence>
<xs:element name=para type=xs:string/>
<xs:element name=de type=xs:string/>
<xs:element name=assunto type=xs:string/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

Os seguintes elementos para, de e assunto so todos


elementos que possuem um tipo definido: string. O tipo
definido pelo atributo type do elemento xs:element.
O elemento nota no possui um atributo definindo o seu tipo.
Podemos considerar que seu tipo complexo ou complexType,
322

linguagem_de_programacao_III.indb 322

04/02/11 11:15

Linguagens de Programao III

pois seu contedo composto pela sequncia de elementos de,


para, assunto e texto.
Elementos complexos so aqueles que contm outros
elementos e elementos simples so aqueles que no
contm outros elementos.

Elementos simples
Elementos simples no podem conter outros elementos ou
atributos. O seu contedo somente no formato de caractere,
porm possvel alterar o tipo de caractere contido nesse
elemento. O XML-Schema possui a flexibilidade do XML onde
voc pode construir seus prprios tipos. Ele j possui alguns
predefinidos (integer, float, date, etc) que nos facilitam na
construo.
xs:string
xs:decimal
xs:integer
xs:boolean
xs:date
xs:time

Veja como definir elementos simples com esses tipos.


Definio

Elemento

<xs:element name=nome
type=xs:string/>

< nome >Silva</ nome >

<xs:element name=paginas
type=xs:integer/>

< paginas >31</ paginas >

<xs:element name=datavencimento
type=xs:date/>

< datavencimento >201005-01</ datavencimento >

Alm dos tipos, podemos definir valores padres para os


elementos. Esses valores podem ser fixed ou default.

Unidade 5

linguagem_de_programacao_III.indb 323

323

04/02/11 11:15

Universidade do Sul de Santa Catarina

<xs:element name=color type=xs:string fixed=red/>


<xs:element name=color type=xs:string default=red/>

Quando voc define um atributo fixed a um elemento, significa


que esse elemento no ser capaz de receber outro valor a no
ser aquele definido. Diferentemente, o atributo default indica
que por padro o elemento receber um valor, mas poder ser
tranquilamente alterado.
Somente elementos complexos podem possuir
atributos.

Atributos
O XSD define que os atributos so elementos simples e somente
elementos complexos podem ter atributos. Mesmo assim, a
definio do atributo diferente da definio de um elemento.
Para definir um elemento em XSD, utilizamos xs:element, mas
para definir um atributo usamos o elemento xs:attribute.
Ao definir um atributo, podemos declarar como ele sendo
obrigatrio ou opcional. Ainda, como vimos nos elementos
simples, podemos definir um valor default ou fixed, como vemos a
seguir.
<xs:attribute name=linguagem type=xs:string use=optional/>
<xs:attribute name= linguagem type=xs:string use=required/>

Quando definimos o tipo, tanto para elemento simples quanto


para o atributo, tem por objetivo realizar uma restrio quanto
ao seu contedo. Desta forma, pretende-se sempre validar o
elemento quanto informao esteja em um formato vlido ou
no.

324

linguagem_de_programacao_III.indb 324

04/02/11 11:15

Linguagens de Programao III

Facetas de restrio
A restrio do contedo no se restringe aos tipos predefinidos.
O XSD nos permite construir tipos de dados por meio de
restries. Para isso, necessrio utilizar um subconjunto do tipo
de dados original, ou seja, preciso limitar o domnio de valores
possveis. Isso realizado por meio das facetas de restrio.
As facetas so muito teis principalmente para os atributos.
Frequentemente eles s podem assumir alguns valores
predefinidos. Um exemplo clssico o atributo sexo, onde
criamos um conjunto finito e pequeno de valores que o atributo
sexo pode suportar.
O tipo de dados sexo uma string de um caractere que s aceita
os valores M e F respectivamente masculino e feminino.
Esse tipo de dados poder ser construdo por meio do elemento
enumeration:
<?xml version=1.0 encoding=utf-8?>
<xs:simpleType name=sexo>
<xs:restriction base=xsd:string>
<xs:enumeration value=M/>
<xs:enumeration value=F/>
</xs:restriction>
</xs:simpleType>

Alm do elemento enumeration, existem outros elementos que


nos facilitam na definio das facetas. So eles:

length: define o comprimento de um tipo de dados.


minLength: define o comprimento mnimo de um tipo de
dados.
maxLength: define o comprimento mximo de um tipo
de dados.
pattern: define a expresso regular (Regular Expressions) a
ser utilizada na validao do tipo.

Unidade 5

linguagem_de_programacao_III.indb 325

325

04/02/11 11:15

Universidade do Sul de Santa Catarina

enumaration: limita os valores possveis de um tipo de


dados a um conjunto previamente especificado.
whiteSpace: define como devem ser tratados os espaos
em branco.
minInclusive: limite mnimo considerando o valor
especificado.
minExclusive: limite mnimo desconsiderando o valor
especificado.
maxInclusive: limite mximo considerando o valor
especificado.
maxExclusive: limite mximo desconsiderando o valor
especificado.
totalDigits: nmero mximo de dgitos considerando a
parte inteira e a parte decimal.
fractionDigits: nmero mximo de casas decimais.
Lembre-se que necessrio tambm especificar o tipo
de dados base, ou seja, a partir de qual tipo de dados o
novo tipo est sendo construdo. Isso feito a partir de
um elemento restriction e do atributo base.

Vejamos outro exemplo onde criaremos um elemento estado.


Como no exemplo anterior, utilizaremos o elemento enumeration
para criar uma lista de valores.

326

linguagem_de_programacao_III.indb 326

04/02/11 11:15

Linguagens de Programao III

<?xml version=1.0 encoding=utf-8?>


<xs:element name=estado type=TipoEstado/>
<xs:simpleType name=TipoEstado>
<xs:restriction base=xs:string>
<xs:enumeration value=SP/>
<xs:enumeration value=PR/>
<xs:enumeration value=SC/>
<xs:enumeration value=RS/>
</xs:restriction>
</xs:simpleType>

Poderamos definir o mesmo elemento estado de uma forma mais


direta:
<?xml version=1.0 encoding=utf-8?>
<xs:element name=estado>
<xs:simpleType>
<xs:restriction base=xs:string>
<xs:enumeration value=SP/>
<xs:enumeration value=PR/>
<xs:enumeration value=SC/>
<xs:enumeration value=RS/>
</xs:restriction>
</xs:simpleType>
</xs:element>

Perceba que a primeira forma possui um uso mais prtico.


Caso necessitssemos aplicar a mesma restrio a algum outro
elemento do meu XML, atribui-se o tipo TipoUF sem precisar
reescrever todos os valores novamente. O tipo TipoUF no
possui uma restrio quanto ao seu uso em outros elementos.
Vamos construir uma faceta para restringir um tipo de dado
chamado livro. Para descrever o livro, ele ser um texto com
comprimento mnimo de trs e mximo de 100 caracteres.
Unidade 5

linguagem_de_programacao_III.indb 327

327

04/02/11 11:15

Universidade do Sul de Santa Catarina

Vamos ainda substituir os espaos em branco duplicados por um


nico espao em branco. O XSD ficaria assim:
<?xml version=1.0 encoding=utf-8?>
<xs:simpleType name=livro>
<xs:restriction base=xsd:string>
<xs:minLength value=3/>
<xs:maxLength value=100/>
<xs:whiteSpace value=collapse/>
</xs:restriction>
</xs:simpleType>

Elementos complexos
O elemento complexo composto por outros elementos, porm
esses elementos podem conter apenas texto simples. Para isso, o
elemento deve possuir um ou mais atributos. Por essa definio,
at mesmo elementos que no contenham informao textual
(elementos vazios) podem ser considerados complexos. Desde que
esses elementos vazios possuam pelo menos um atributo.
Elemento complexo todo o elemento que contenha
outros elementos e/ou atributos.

Como j explicado, existem duas formas de definio:

criar um tipo de forma independente ao elemento e


depois atribuir esse tipo ao elemento;
definir diretamente um elemento nomeando-o e
declarando seu contedo dentro da prpria declarao do
elemento.

Vamos adotar a primeira, apesar de a segunda parecer mais


simples primeira vista. Definir um tipo independente acarreta
algumas vantagens, como:

328

linguagem_de_programacao_III.indb 328

04/02/11 11:15

Linguagens de Programao III

outros elementos podem usar aquele tipo;

pode-se criar outros tipos que usem aquele tipo.

Definiremos um elemento complexo chamado contato. Esse


elemento conter trs sub-elementos: nome, endereo e cep.
Teramos assim o seguinte XML:
<?xml version=1.0?>
<contato>
<nome>Joo da Silva</nome>
<endereco>Av: Getlio Vargas</ endereco>
<cep>12345678911</cep>
</contato >

J o XSD ficaria:
<?xml version=1.0>
<xs:element name=contato type=tContato/>
<xs:complexType name=tContato>
<xs:sequence>
<xs:element name=nome type=xs:string/>
<xs:element name=endereco type=xs:string/>
<xs:element name=cep type=xs:positiveInteger/>
</xs:sequence>
</xs:complexType>

Veja que o elemento xs:sequence tem a funo de descrever a


sequncia em que cada sub-elemento devero aparecer. Portanto,
se no XML um elemento se um elemento no estiver na ordem
definida, o XML no ser validado pelo meu XML-Schema.
Utilizando desse formato de declarao possvel estender o
tContato para tipos mais complexos. Podemos criar um tipo
tPessoa que estenda o tipo tContato. Estender possui a mesma
caracterstica da Herana na Orientao Objeto. O novo
tipo estendido possui as caractersticas do pai e mais algum

Unidade 5

linguagem_de_programacao_III.indb 329

329

04/02/11 11:15

Universidade do Sul de Santa Catarina

detalhamento. Veja como ficaria um tipo tPessoa que, alm de


nome, possui idade, sexo e endereo.
<?xml version=1.0?>
<xs:complexType name=tPessoa>
<xs:complexContent>
<xs:extension base=tContato>
<xs:sequence>
<xs:element name=idade type=xs:integer/>
<xs:element name=sexo type=xs:string/>
<xs:element name=endereo type=xs:string/>
</xs:sequence>
</xs:extension>
</xs:complexContent>
</xs:complexType>

Os elementos complexos podem ser vazios, como j foi


mencionado. Para isso, necessrio que esse elemento possua
pelo menos um atributo.
<aluno matricula=45980/>

O elemento aluno no possui contedo e, para definir esse tipo


de elemento complexo, devemos definir um tipo que permita
apenas elementos em seu contedo, mas ns no declaramos
nenhum elemento realmente.
<?xml version=1.0?>
<xs:element name=aluno type=tMatricula/>
<xs:complexType name=tMatricula>
<xs:atrribute name=matricula type=xs:positiveInteger/>
</xs:complexType>

Vamos supor que o elemento no esteja mais vazio, ele contm


um texto e um atributo. Vamos usar o mesmo elemento aluno

330

linguagem_de_programacao_III.indb 330

04/02/11 11:15

Linguagens de Programao III

do exemplo anterior, mas agora que ele possui um texto como


contedo.
<aluno prodid=45980>Joaquim Carvalho</aluno>

A declarao inteligente seria assim:


<?xml version=1.0?>
<xs:element name=aluno type=tAluno/>
<xs:complexType name=tAluno>
<xs:simpleContent>
<xs:extension base=xs:string>
<xs:attribute name=matricula type=xs:positiveInteger/>
</xs:extension>
</xs:simpleContent>
</xs:complexType>

Sempre que o elemento contiver apenas contedo simples


(texto e atributos), adiciona-se um xs:simpleContent em torno do
contedo. Dentro do xs:simpleContent voc pode optar por usar o
xs:extension para expandir o tipo simples base do elemento ou o
xs:restriction para limit-lo.
Vamos definir um XSD onde se tenha elementos que contenham
textos e outros elementos. Para isso, vamos tomar como exemplo
um elemento chamado contrato.
<?xml version=1.0?>
<contrato>
Nmero <nrContrato>1032</nrContrato>
Declaro que o Sr. <nome>Joo Silva</nome>
Firma acordo de prestao de servio com a Empresa
<empresa>Qualquer LTDA.</empresa>
Data: <data>2010-08-10</data>.
</contrato>

O XSD seria definido da seguinte forma:

Unidade 5

linguagem_de_programacao_III.indb 331

331

04/02/11 11:15

Universidade do Sul de Santa Catarina

<?xml version=1.0?>
<xs:element name=contrato type=tContrato/>
<xs:complexType name=tContrato mixed=true>
<xs:sequence>
<xs:element name=nrContrato type=xs:positiveInteger/>
<xs:element name=nome type=xs:string/>
<xs:element name=empresa type=xs:string/>
<xs:element name=data type=xs:date/>
</xs:sequence>
</xs:complexType>

Para permitir que caracteres apaream entre os elementos filhos


de contrato, o atributo mixed deve ser definido como true. Em
vez de utilizar o elemento xs:sequence, poderamos usar o xs 1:all
para indicar que os elementos filhos podem aparecer em qualquer
ordem. Existe tambm o xs:choice, que usado quando queremos
que apenas um dos filhos aparea.

Utilizando o PHP para validar o XML com o XSD


Vimos que o XSD na realidade um XML que valida o prprio
XML. Como no poderia ser diferente, vrios softwares realizam
a validao do XML por meio de um XSD, assim como diversas
linguagens possuem bibliotecas que efetuam essa tarefa para ns.
Vamos demonstrar um exemplo de uma validao do XML
utilizando o XSD por meio do PHP desenvolvida por Pedro
Padron. Este exemplo se baseia em um catlogo de livros.
Teramos assim o XML:

332

linguagem_de_programacao_III.indb 332

04/02/11 11:15

Linguagens de Programao III

<?xml version=1.0?>
<catalogo>
<livro>
<isbn>8504006115</isbn>
<autor>George Orwell</autor>
<titulo>1984</titulo>
<paginas>302</paginas>
</livro>
<livro>
<isbn>8588639173</isbn>
<autor>Ramez Elmasri</autor>
<autor>Shamkant Navathe</autor>
<titulo>Sistemas de Bancos de Dados</titulo>
<paginas>744</paginas>
<editora>744</editora>
</livro>
</catalogo>

Perceba que nesse documento, apesar de existir dois registros,


eles possuem o mesmo nmero de elementos. Porm, a
informao plausvel e deve ser validada. As definies para o
XSD so estabelecidas a partir das seguintes regras:

todo livro deve ter um nico ISBN;


todo livro deve ter pelo menos um autor e no mximo N
autores;
todo livro deve ter um nico ttulo;
todo livro deve ter uma especificao do nmero de
pginas;
o nome da editora opcional e assume-se que apenas
uma editora tenha os direitos de publicao da obra;

Unidade 5

linguagem_de_programacao_III.indb 333

333

04/02/11 11:15

Universidade do Sul de Santa Catarina

a ordem de apario dos dados deve ser: ISBN, autor,


ttulo e nmero de pginas.

Convertendo essas regras para as definies do XSD fica assim:


<?xml version=1.0?>
<xs:schema xmlns:xs=http://www.w3.org/2001/XMLSchema>
<!-- Este o nosso n principal -->
<xs:element name=catalogo>
<!-- Define um tipo formado por outros elementos -->
<xs:complexType>
<!-- Determina que os elementos a seguir devem aparecer nesta
mesma ordem -->
<xs:sequence>
<!-- Define que o tipo livro pode ocorrer N vezes (unbounded =
sem limite)-->
<xs:element name=livro maxOccurs=unbounded>
<!-- Define que livro formado por outros elementos -->
<xs:complexType>
-->

<!-- Os componentes de livro devem aparecer nessa ordem


<xs:sequence>
<!-- Define o ISBN -->
<xs:element name=isbn>

<!-- Define como tipo simples por no ser formado por


outros elementos -->
<xs:simpleType>
<!-- Define o tipo string para ISBN e informa que
existem restries -->
<xs:restriction base=xs:string>
<!-- Determina como 10 o tamanho mximo -->
<xs:length value=10/>
</xs:restriction>
</xs:simpleType>

334

linguagem_de_programacao_III.indb 334

04/02/11 11:15

Linguagens de Programao III

</xs:element>
<!-- Define que o elemento autor obrigatrio, mas pode
aparecer N vezes -->
<xs:element name=autor type=xs:string minOccurs=1
maxOccurs=unbounded/>
<!-- O valor-padro para minOccurs e maxOccurs 1 quando
no forem definidos -->
<xs:element name=titulo type=xs:string/>
<xs:element name=paginas type=xs:integer/>
<!-- Elemento editora no obrigatrio -->
<xs:element name=editora type=xs:string
minOccurs=0/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

Veja que o cenrio normalmente se trata de que no servidor


existe um arquivo de validao XSD e um script para validar o
XML, no nosso caso o PHP. O mais comum para essa utilizao
quando o software recebe um XML externo e requer que seja
validado antes do processamento. Para isso, vejamos a construo
do PHP:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1 />
<title>Valida&ccedil;&atilde;o do XML utilizando XSD</title>

Unidade 5

linguagem_de_programacao_III.indb 335

335

04/02/11 11:15

Universidade do Sul de Santa Catarina

</head>
<body>
<?php
/**
* Ao tentar validar um arquivo XML, se algum erro
* for encontrado a libxml ir gerar Warnings, o que
* no creio que seja o mais interessante para ns.
* Para evitar que isso acontea, voc pode determinar
* que ir obter os erros por sua prpria conta. Lembre-se
* que esta funo abaixo deve ser chamada antes de
* instanciar qualquer objeto da classe DomDocument!
*/
libxml_use_internal_errors(true);
/* Cria um novo objeto da classe DomDocument */
$objDom = new DomDocument();
/* Carrega o arquivo XML */
$objDom->load(catalogo.xml);
/* Tenta validar os dados utilizando o arquivo XSD */
if (!$objDom->schemaValidate(catalogo.xsd)) {
/**
* Se no foi possvel validar, voc pode capturar
* todos os erros em um array
*/
$arrayAllErrors = libxml_get_errors();
/**
* Cada elemento do array $arrayAllErrors
* ser um objeto do tipo LibXmlError
*/
print_r($arrayAllErrors);
} else {

336

linguagem_de_programacao_III.indb 336

04/02/11 11:15

Linguagens de Programao III

/* XML validado! */
echo XML obedece &agrave;s regras definidas no arquivo XSD!;
}
?>
</body>
</html>

Procure alterar o arquivo catalogo.xml. Veja o que


ocorre se voc alterar as tags ou o tipo de informao.

Seo 4 RSS
Hoje em dia comum buscar informaes em tempo real. O
envio dessas informaes por e-mail acabou se tornando muito
ruim, uma vez que, alm das informaes que necessitamos,
recebemos uma avalanche de contedos sem qualquer interesse.
Para resolver esse dilema, desenvolve-se um dialeto para XML
chamado de Rich Site Summary, o RSS.
RSS um recurso desenvolvido em XML que permite
aos responsveis por sites e blogs divulgarem
notcias ou novidades destes. Para isso, o link e o
resumo daquela notcia, ou a notcia na ntegra, so
armazenados em um arquivo XML. Esse arquivo
conhecido como feed, feed RSS.

Graas a esse recurso, sites e blogs podem divulgar contedo novo


de maneira rpida e precisa. Quanto ao usurio, este pode ser
informado de cada novidade de seus sites preferidos.
Para se fazer uso desse recurso, o usurio deve incluir o feed (que
nada mais que o RSS) do site que deseja acompanhar em um
programa leitor de RSS, chamado de agregador. O agregador
Unidade 5

linguagem_de_programacao_III.indb 337

337

04/02/11 11:15

Universidade do Sul de Santa Catarina

l o contedo do feed e lista em uma interface. Cada software


agregador possui sua prpria interface. Os softwares agregadores
permitem a incluso de diversos feeds. Essa ao acarreta em um
ganho em agregao das informaes.
O sistema RSS facilita muito a leitura das informaes. Voc no
necessita entrar em vrios sites para se manter informado. Basta
ler as chamadas das notcias ou atualizaes no leitor-RSS e
acessar as notcias que for de seu interesse.
O padro RSS foi originalmente desenvolvido
pela Netscape no incio de 1999. O projeto foi
descontinuado, a empresa entendia que o RSS no
era vivel para os usurios. A Netscape desenvolveu o
padro at a verso 0.90. A UserLand, uma pequena
empresa, acreditou no padro e simplificou o cdigo
para aplicar nas suas ferramentas de blogs. O RSS 0.91
foi lanado.
Um grupo de desenvolvedores continuou o RSS
0.90 baseando-o no padro RDF, paralelamente a
UserLand. Esses desenvolvedores lanaram a verso
1.0. A UserLand, no entanto, continuou seu trabalho,
lanado verses como 0.92, 0.93 at que finalmente
chegou verso 2.0. Certamente, a UserLand daria a
numerao 1.0 a esta ltima, mas essa sequncia j
tinha sido adotada pelo outro grupo. Diversos grupos
desenvolvem, hoje, o padro RSS. Cada uma acaba
nomeando o projeto de diversas formas diferentes.

RDF
Para saber mais sobre RDF
pesquise em www.w3.org/RDF

RDF a sigla para Resource Description Framework e trata-se


de uma especificao normalmente baseada em XML, que tem
como objetivo automatizar e ampliar recursos para a internet por
meio de representao de informaes. O RDF tem como base
o trabalho de uma srie de grupos que desenvolvem tecnologias
de informao. Isso significa que o RDF no foi criado
exclusivamente para ferramentas como o RSS, como muitos
pensam. Na verdade, se estudarmos o RDF a fundo, veremos
que ele tem utilidade em vrias aplicaes, como em sistemas de
busca e mecanismos de compartilhamento de informao.

338

linguagem_de_programacao_III.indb 338

04/02/11 11:15

Linguagens de Programao III

O que Atom
Ao contrrio de RSS, Atom no uma sigla, um formato
para divulgao de notcias. H quem diga que esse projeto
, inicialmente, uma proposta de unificao do RSS 1.0 e
do RSS 2.0. O Atom tambm baseado em XML, mas seu
desenvolvimento tido como mais sofisticado. O grupo que nele
trabalha tem at o apoio de grandes corporaes, como o Google.

Para saber mais sobre


Atom, pesquise em
<www.atomenabled.
org>.

A maioria dos agregadores de feed disponveis ao usurio suporta


tanto as verses do RSS como o Atom.

O padro
O RSS baseado no XML, nada melhor do que explicar o
funcionamento do RSS por meio de seu cdigo-fonte. Para servir
de exemplo, usaremos o cdigo a seguir. Note que ele contm
campos bsicos, o que significa que feeds RSS disponveis na
internet podem contar com mais detalhes:
<?xml version=1.0 encoding=ISO-8859-1 ?>
<rss version=0.91>
<channel>
<title>Folha.com - Em cima da hora - Principal</title>
<link>http://redir.folha.com.br/redir/online/emcimadahora/rss091/*http://
www1.folha.uol.com.br/emcimadahora/</link>
<description>Primeiro jornal em tempo real em lngua portuguesa</
description>
<language>pt-br</language>
<copyright>Copyright Folha Online. Todos os direitos reservados.</
copyright>
<docs>http://redir.folha.com.br/redir/online/emcimadahora/
rss091/*http://www1.folha.uol.com.br/folha/conheca/arquivo_e_
copyright.shtml</docs>
<webMaster>webmaster@folha.com.br (Webmaster Folha Online)</
webMaster>
<image>

Unidade 5

linguagem_de_programacao_III.indb 339

339

04/02/11 11:15

Universidade do Sul de Santa Catarina

<title>Folha.com - Em cima da hora - Principal</title>


<url>http://www1.folha.uol.com.br/folha/images/logo-folha_online88x31.gif</url>
<link>http://redir.folha.com.br/redir/online/emcimadahora/rss091/*http://
www1.folha.uol.com.br/emcimadahora/</link>
<width>88</width>
<height>31</height>
<description>Primeiro jornal em tempo real em lngua portuguesa</
description>
</image>
<item>
<title>Novela: Nara d um tapa na cara de Beto em &quot;Uma Rosa com
Amor&quot;</title>
<link>http://redir.folha.com.br/redir/online/emcimadahora/rss091/*http://
www1.folha.uol.com.br/ilustrada/763300-novela-nara-da-um-tapa-nacara-de-beto-em-uma-rosa-com-amor.shtml</link>
<description>
&lt;i&gt;A programao est sujeita a alterao devido edio dos
captulos e de responsabilidade da emissora&lt;/i&gt;
&lt;b&gt;Uma Rosa com Amor (SBT, 20h15)&lt;/b&gt;
Egdio pede para Elisa levar um suco a Serafina. Serafina pega o copo de
suco, mas no toma. Serafina diz para Raquel que se aproximar de Milton,
vai arrebentar a cara dela. Serafina afirma para Nara que est ajudando
Claude a construir casas para o povo. Serafina afirma que no tomar
o suco, porque ele pode estar envenenado. Beto desafia Egdio e pega
o suco para tomar. Egdio impede. Egdio explica que cuspiu e colocou
laxante no suco de Serafina. Egdio joga o copo na parede. Serafina sai da
casa. Mrs. Smith pergunta se Claude esteve no restaurante. Claude nega.
&lt;a href=&quot;http://redir.folha.com.br/redir/online/emcimadahora/
rss091/*http://www1.folha.uol.com.br/ilustrada/763300-novela-nara-daum-tapa-na-cara-de-beto-em-uma-rosa-com-amor.shtml&quot;&gt;Leia
mais&lt;/a&gt; (12/07/2010 - 00h12)</description>
</item>
<item>
<title>Novela: Alfredo descobre que Joca matou o senador em
&quot;Ribeiro do Tempo&quot;</title>

340

linguagem_de_programacao_III.indb 340

04/02/11 11:15

Linguagens de Programao III

<link>http://redir.folha.com.br/redir/online/emcimadahora/rss091/*http://
www1.folha.uol.com.br/ilustrada/763294-novela-alfredo-descobre-quejoca-matou-o-senador-em-ribeirao-do-tempo.shtml</link>
<description>
&lt;i&gt;A programao est sujeita a alterao devido edio dos
captulos e de responsabilidade da emissora&lt;/i&gt;
&lt;b&gt;Ribeiro do Tempo (Record, 22h)&lt;/b&gt;
Eleonora pede para Arminda represent-la no velrio do senador.
Lincon pede para Ellen encontr-lo na Folha da Corredeira. Slvio diz
a Guilherme que Zuleide ligou para dizer que ele estava na praa com
Tio. Guilherme fala para o pai que Tio/Diana no tem nada demais.
Trs mulheres choram muito diante do caixo do senador. Beatriz fica
irritada e pergunta a Nicolau quem so as mulheres. Lincon conta a Ellen
que uma mensagem foi enviada da Secretaria de Segurana do Estado,
ameaando o senador de morte.
&lt;a href=&quot;http://redir.folha.com.br/redir/online/emcimadahora/
rss091/*http://www1.folha.uol.com.br/ilustrada/763294-novelaalfredo-descobre-que-joca-matou-o-senador-em-ribeirao-do-tempo.
shtml&quot;&gt;Leia mais&lt;/a&gt; (12/07/2010 - 00h08)</description>
</item>
</channel>
</rss>

A primeira linha informa que se trata de um documento XML.


A segunda se refere verso do RSS usado. Neste caso, a 0.91.
O elemento channel indica o canal do feed. O elemento link
a referncia em que o RSS est associada. O elemento title
preenchido com o nome do site (Folha.com Em cima da hora
Principal). J o elemento description fornece uma breve descrio
do site. No entanto, muitos webmasters preferem informar o
slogan do site nesse campo. O elemento language informa o
idioma usado no site (portugus do Brasil). O elemento copyright
fala sobre o direito autoral das informaes. J o docs representa
o link para os documentos sobre o direito autoral. O elemento
webmaster informa o responsvel por ele.
Nesse exemplo est sendo utilizado um bloco de imagem. Esse
bloco tem a finalidade de mostrar a logo do jornal no RSS e no
obrigatrio.

Unidade 5

linguagem_de_programacao_III.indb 341

341

04/02/11 11:15

Universidade do Sul de Santa Catarina

At o momento vimos apenas as informaes de cabealho.


Agora analisaremos os elementos do corpo do RSS. O bloco
item est a notcia. Para cada uma, necessrio ter uma rea item
especfica. Nesse exemplo, foram retiradas apenas duas notcias,
portanto possui dois blocos item. O elemento title dentro do
bloco item possui a informao do ttulo da notcia. O elemento
description permite a visualizao de um resumo do texto (ou do
texto completo). O elemento link indica o endereo da notcia.
Existem diversos softwares que voc pode utilizar
para a gerao do RSS. Pesquise sobre eles.

Logotipo

Figura 5.1: logotipo


do RSS.
Fonte: favor incluir
fonte completa.

A partir de sua verso 1.5, o navegador de internet Mozilla


Firefox passou a adotar um smbolo diferente para o RSS. Depois
disso, o smbolo se tornou padro para representar feeds RSS, isto
, se tornou universal.
No caso do Firefox ou de outros programas compatveis com
RSS, basta clicar no smbolo em questo que geralmente
aparece no canto direito da barra de endereos ou em um ponto
especfico da pgina visitada para que o feed do site acessado
seja adicionado.
O exemplo a seguir foi retirado da pgina <broculos.net> e
muito simples a forma de representar um escritor de feeds
utilizando o PHP.
<?php
/**
* For demonstration purposes, the data is defined here.
* In a real scenario it should be loaded from a database.
*/
$channel = array(title

=> Exemplo de RSS feed,

342

linguagem_de_programacao_III.indb 342

04/02/11 11:15

Linguagens de Programao III

PHP.,

description => Exemplo de construo de RSS utilizando o


link

=> http://www.broculos.net,

copyright => Copyright (C) 2008 Broculos.net);


$items = array(
array(title

=> Exemplo 1,

description => Descrio do primeiro Exemplo.,


link
2008)))

=> http://www.example.com/example1.html,

pubDate

=> date(D, d M Y H:i:s O, mktime(22, 10, 0, 12, 29,

, array(title

=> Exemplo 2,

description => Esta a descrio do Exemplo 2.,


link
2008)))

=> http://www.example.com/example2.html,

pubDate

=> date(D, d M Y H:i:s O, mktime(14, 27, 15, 1, 3,

);
$output = <?xml version=\1.0\ encoding=\ISO-8859-1\? . >;
$output .= <rss version=\2.0\>;
$output .= <channel>;
$output .= <title> . $channel[title] . </title>;
$output .= <description> . $channel[description] . </description>;
$output .= <link> . $channel[link] . </link>;
$output .= <copyright> . $channel[copyright] . </copyright>;
foreach ($items as $item) {
$output .= <item>;
$output .= <title> . $item[title] . </title>;
$output .= <description> . $item[description] . </description>;
$output .= <link> . $item[link] . </link>;
$output .= <pubDate> . $item[pubDate] . </pubDate>;
$output .= </item>;
}

Unidade 5

linguagem_de_programacao_III.indb 343

343

04/02/11 11:15

Universidade do Sul de Santa Catarina

$output .= </channel>;
$output .= </rss>;
header(Content-Type: application/rss+xml; charset=ISO-8859-1);
echo $output;
?>

Sntese
Voc viu nesta unidade o quanto o XML flexvel e se adqua a
diversas funcionalidades no qual necessitamos. Ainda verificou
com ocorre uma definio de tipo de documento assim como seus
elementos e suas caractersticas. Verificamos que, apesar de essas
definies serem teis, acabam por ser um tanto limitadas. Para
acompanhar o desenvolvimento do prprio XML, necessitamos
de uma definio mais apurada, o XSD.
Por fim, voc viu uma grande utilidade do XML que se refere
comunicao com diversos browser e aplicativos para sintetizar
informaes.

Atividades de autoavaliao
Ao final de cada unidade, voc ser provocado a realizar atividades de
autoavaliao. O gabarito est disponvel no final do livro-didtico, mas
se esforce para resolver as atividades sem ajuda do gabarito, pois assim
voc estar estimulando a sua aprendizagem.
1) Pesquise ao menos trs tecnologias onde o XML est sendo utilizado.
Sintetize as principais caractersticas da funcionalidade e publique no
Frum da ferramenta de aprendizado virtual.

344

linguagem_de_programacao_III.indb 344

04/02/11 11:15

Linguagens de Programao III

Saiba mais
Se voc desejar, aprofunde os contedos estudados nesta unidade
ao consultar as seguintes referncias:
W3Schools. W3Schools Online Web Tutorials, 2010.
Disponvel em: <www.w3schools.com/>. Acesso em: 01 mar.
2010.
W3C. World Wide Web Consortium, 2010. Disponvel em:
<www.w3.org/>. Acesso em: 2 mar. 2010.
Dicas-l, 2010. Disponvel em <www.dicas-l.com.br//>. Acesso
em: 16 maio 2010.
iMasters, 2010. Disponvel em < http://imasters.uol.com.br//>.
Acesso em: 16 maio 2010.
Plugmasters, 2010. Disponvel em: <www.plugmasters.com.br>.
Acesso em: 15 maio 2010.

Unidade 5

linguagem_de_programacao_III.indb 345

345

04/02/11 11:15

linguagem_de_programacao_III.indb 346

04/02/11 11:15

unidade 6

Asynchronous Javascript and


XML (AJAX)
Objetivos de aprendizagem
Ao final do estudo desta unidade, importante que voc:

Entenda a tecnologia que envolve o AJAX.

Saiba o que so requisies assncronas.

Saiba como interagir o AJAX com o PHP.

Conhea os princpios para construir uma aplicao


utilizando o AJAX.

Sees de estudo

linguagem_de_programacao_III.indb 347

Seo 1

O que o AJAX

Seo 2

Mtodo GET no AJAX

Seo 3

Mtodo POST no AJAX

Seo 4

Framework

04/02/11 11:15

Universidade do Sul de Santa Catarina

Para incio de estudo


Todas as aplicaes Web sempre foram vistas como um enorme
potencial. A portabilidade que possui associada com a arquitetura
da internet coloca as aplicaes Web em outro patamar de
abordagem. Essa mesma vantagem acarreta em um problema
crucial: o tempo de resposta das requisies.
O desenvolvimento Web se baseia em requisies feitas pelos
usurios a um servidor. Consequentemente esses usurios
aguardam a resposta dessas requisies. Torna-se extremamente
lento quando ocorre alguma inconsistncia na regra de negcio
imposta no servidor. O formulrio retorna com um aviso onde o
usurio deve ajustar as informaes.
Vrias alternativas foram criadas para minimizar esse problema.
Alguns adotaram que o formulrio j retornaria com os campos
preenchidos. Mesmo assim, o tempo de resposta e a frustrao do
usurio ainda permaneciam.
Outra soluo, um pouco mais engenhosa e gerenciada pelo
JavaScript, utilizava pginas auxiliares abertas por meio de
pop-ups, onde eram realizadas as validaes e retornava as
informaes. Essa soluo tinha um problema fundamental, pois,
quando se utilizava pop-up, os browsers comearam a bloquear
por causa das propagandas excessivas nos sites. A aplicao parava
de funcionar e era necessrio um recurso para abrir uma segunda
janela a cada momento que uma validao no servidor fosse
necessria.
Apesar das solues encontradas, o problema se prolongava.
Como poderiam os desenvolvedores criar uma aplicao Web
utilizando recursos de uma aplicao desktop? A base para essa
resposta nasceu com o AJAX.

348

linguagem_de_programacao_III.indb 348

04/02/11 11:15

Linguagens de Programao III

Seo 1 O que o AJAX


AJAX (acrnimo em lngua inglesa de Asynchronous JavaScript
and XML) o uso sistemtico do JavaScript e do XML para
tornar o navegador mais interativo com o usurio. O AJAX
utiliza de solicitaes assncronas de informaes e uma
iniciativa na construo de aplicaes Web mais dinmicas e
criativas.
O AJAX no uma tecnologia. So realmente vrias tecnologias
trabalhando juntas, cada uma fazendo sua parte, oferecendo
novas funcionalidades.
O AJAX foi criado por Jesse James Garrett, da Adaptive Path,
em meados de fevereiro de 2005. Todas as tecnologias presentes
no AJAX j existem h algum tempo e so de conhecimento
amplamente difundido entre os desenvolvedores Web. So elas:

XHTML;

JavaScript;

CSS;

DOM;

XML.

As atualizaes das pginas existem desde os primrdios da


internet. O LiveScript da Netscape possibilitava a incluso de
scripts de pginas Web que poderiam ser executados pelo cliente,
isso na dcada de 1990. O JavaScript a evoluo do LiveScript.
A Microsoft foi a responsvel pela introduo do objeto
XMLHttpRequest para criar e gerenciar solicitaes e respostas
assncronas.
O AJAX promoveu um marketing para as tecnologias que o
compe, tornando o prprio AJAX uma das tecnologias de
desenvolvimento Web mais em evidncia, permitindo que
aplicaes Web concorram com as aplicaes de desktop.

Unidade 6

linguagem_de_programacao_III.indb 349

349

04/02/11 11:15

Universidade do Sul de Santa Catarina

A fim de entender como o mecanismo do AJAX funciona, vamos


analisar o processo de requisio de uma aplicao Web sem a
utilizao do AJAX:
1. Usurio preenche os campos do formulrio e submete;
2. O navegador gera uma solicitao para o servidor;
3. O servidor processa a solicitao;
4. O servidor gera uma resposta que contm a pgina exata
que o navegador interpretar;
5. O navegador limpa a janela e carrega a pgina enviada
pelo servidor;
6. O usurio interage com a nova pgina.
Voc pode observar que em todo o transcorrer desse simples
processo o usurio ficou totalmente obsoleto. No se podia
interagir com as informaes enquanto a requisio estava sendo
processada. Esse tipo de requisio chamado de requisio
sncrona. Esse modelo tornou-se obsoleto, pois foi concebido
para os documentos hipertextos originais da internet.
O AJAX acrescenta uma camada nas aplicaes Web que a
utiliza. Essa camada fica entre o cliente e o servidor e gerencia
a comunicao entre ambos. Essa camada criada quando
o usurio interage com a pgina: o cliente cria um objeto de
controle chamado XMLHttpRequest que gerencia a solicitao.
A camada do AJAX recebe todas as solicitaes e enfileira as
requisies para o servidor. medida que o servidor responde,
o AJAX manipula a pgina do cliente conforme os dados de
retorno.
O gerenciamento do AJAX permite que o formulrio seja
submetido parcialmente. Essa caracterstica torna fundamental
a maior interao com o usurio. Quando trabalhamos com
pequenos formulrios, o envio de informaes parciais acaba
no se tornando parte fundamental do processo. Porm, em
formulrios maiores ou que necessite de validaes constantes,
torna-se indispensvel.

350

linguagem_de_programacao_III.indb 350

04/02/11 11:15

Linguagens de Programao III

Aplicabilidade do AJAX
Existem diversos tipos de situaes em que o uso do AJAX
amplamente utilizado. Algumas situaes so mais perceptveis,
como: validao de formulrios, atualizao de enquetes e de
carrinhos de compras (e-commerce), conversao on-line (chats),
entre outras que priorizam a atualizao de informaes em
tempo real.
Outro exemplo bastante comum so os sites de relacionamento.
Muitos utilizam plenamente o AJAX para melhorar
a interao com os usurios. Um dos mais populares
sites conhecidos a rede social Orkut pertencente
ao Google e utiliza bastante esse recurso quanto
classificao de amigos. O Twitter, outra rede social,
utiliza o AJAX para verificar se existem novos tweets
para o usurio.

Podemos encontrar o AJAX em sites para melhorar a


apresentao de imagens. Muitos utilizam esse recurso para que
no seja necessrio carregar todas as fotos no incio da pgina,
tornando assim o tempo de resposta muito menor. Um exemplo
da facilidade do AJAX para a imagem o Google Maps.
Conforme o usurio arrasta o mapa, as imagens vo carregando
por setores.
As compras realizadas em sites de venda vm gradualmente
utilizando mais e mais o AJAX. Muitos j utilizam quando
necessitam alterar o valor no carrinho de compras, tanto
no clculo do frete como quando trocamos a quantidade de
mercadorias.

Unidade 6

linguagem_de_programacao_III.indb 351

351

04/02/11 11:15

Universidade do Sul de Santa Catarina

Seo 2 Mtodo GET no AJAX


J vimos que o AJAX uma tecnologia responsvel pela maior
interao entre as aplicaes Web e os usurios. Agora vamos
aprofundar esse conjunto de tecnologias, para isso, vamos utilizar
o PHP com linguagem de servidor para nos ajudar.
O mtodo de formulrio GET envia as informaes para o
servidor na url da pgina. Esse mtodo mais simples, porm
menos seguro de utilizar. A aplicabilidade desse mtodo est em
um maior gerenciamento do processo de envio das informaes
ao servidor. No necessrio registrar um elemento para que os
dados possam ser descritos na url.
Vamos considerar uma pgina simples para iniciar o
entendimento da tecnologia. Nesta pgina necessrio escolher o
estado e deve carregar algumas cidades.
<!DOCTYPE html PUBLIC -// W3C // DTD XHTML 1.0 Transitional // EN
http :// www.w3. org /TR/ xhtml1 / DTD / xhtml1 - transitional . dtd >
<html xmlns= http://www.w3.org/1999/xhtml xml:lang=pt-br
lang=pt-br>
<head>
<title>Exemplo 3 &minus; Escolha a Cidade</title>

<script type=text/ecmascript src=ajaxInit.js></script>


<script type=text/javascript>
function selecionaCidade (estado) {

// testa o contedo da combo

if (estado!=) {

// chamada da funo

ajax = ajaxInit();

if (ajax) {
// realiza a leitura do retorno do AJAX

ajax.onreadystatechange = escreveCidades ;
// url onde se encontra o cdigo do servidor

352

linguagem_de_programacao_III.indb 352

04/02/11 11:15

Linguagens de Programao III

url = cidade.php?estado=+estado ;

// envia a url para o AJAX pelo mtodo GET

ajax.open (GET , url , true ) ;

// executa o AJAX

ajax.send (null) ;

}
} else {

// limpa a combo de cidades

limparCombo(cidade);

function escreveCidades () {

// verifica a preparao do AJAX, 4 est pronto

if ( ajax.readyState == 4) {

// status do AJAX

if ( ajax.status == 200) {

// o AJAX retorna em forma de texto.

// a funo interpreta o retorno para montar a combo

acrescentaOption(cidade,ajax.responseText);

}
}

function acrescentaOption(combo, texto) {

// quebra o texto em um vetor

var option=texto.split(^);


// identifica o elemento no formulrio neste exemplo uma caixa
de seleo

var elemento=document.getElementById(combo);

var valores = new Array();

Unidade 6

linguagem_de_programacao_III.indb 353

353

04/02/11 11:15

Universidade do Sul de Santa Catarina

// limpa todo o contedo do lemento

elemento.length=0;

for (var i=0;i< option.length; i++) {

// acrescenta um contedo

elemento.length++;
// divide o valor retornado do AJAX em um vetor

valores = option[i].split(|);
// acrescenta um contedo

elemento.options[i] = new Option(valores[1], valores[0], 0, 0);


}

function limparCombo(combo) {

// recupera o elemento

var elemento=document.getElementById(combo);

// limpa todo o contedo do lemento

elemento.length=0;

// acrescenta um contedo

elemento.options[0] = new Option(------, , 0, 0);

}
</script>

<meta http-equiv=Content-Type content=text/html; charset=utf-8


/></head>
<body>

<form name=selecioneCidade>
<label for=estadoaccesskey=e>
<u>E</u>stado:
</label>
<select name=estado id=estado onChange=selecionaCidade(this.
options[this.selectedIndex].value)>
<option value= selected=selected>------</option>

354

linguagem_de_programacao_III.indb 354

04/02/11 11:15

Linguagens de Programao III

<option value=pr>PR</option>
<option value=sp>SP</option>
</select>
<br/>
<label for=cidade accesskey=c><u>C</u>idade :</ l abe l>
<select name=cidade id=cidade>
</select>
</form>
</body>
</html>

Nesta pgina, estamos criando o HTML, realizando a chamada


do AJAX e tratando a resposta do AJAX.
O script de JS (ajaxInit.js) onde se realiza o instanciamento do
objeto o XMLHttpRequest. A este instanciamento podemos
chamar de AJAX puro.
// Documento JavaScript
function ajaxInit () {
// define varivel
var xmlhttp ;
// tratamento de erros
try {

// chamada do objeto
xmlhttp = new XMLHttpRequest ( ) ;
} catch (ee) {

try {

// criando o objeto sobre os navegadores diferentes da Microsoft


xmlhttp = new ActiveXObject (Msxml2.XMLHTTP);

} catch (e) {
try {

Unidade 6

linguagem_de_programacao_III.indb 355

355

04/02/11 11:15

Universidade do Sul de Santa Catarina

// criando objeto sobre o navegador da Microsoft

xmlhttp = new ActiveXObject (Microsoft.XMLHTTP);


} catch (E) {

// caso no de suporte

xmlhttp = false ;
}

}
}
return xmlhttp ;

Podemos perceber que a utilizao do objeto XMLHttpRequest


simples, mas requer cuidados. Veja que o cdigo pequeno,
onde basicamente se restringe ao ActiveXObject. O restante
das instrues so desvios para cada browser que devemos ter
o cuidado de estar presente. Caso contrrio, o AJAX pode no
funcionar adequadamente. Vejamos como deve estar o PHP para
trabalhar com este script.
<?
// recupera a informao passada pelo mtodo GET
$estado = $_GET[estado];
$cidades = ;
// Verifica qual estado est sendo trabalhado
if ( $estado==pr ) {
//acrescenta informaes para a varivel $cidade
$cidades .= 1|Tupssi^ ;
$cidades .= 2|Toledo^ ;
$cidades .= 3|Cascavel^ ;
$cidades .= 4|Pato Branco ;
}
//// Verifica qual estado est sendo trabalhado

356

linguagem_de_programacao_III.indb 356

04/02/11 11:15

Linguagens de Programao III

if ( $estado==sp ) {
//acrescenta informaes para a varivel $cidade
$cidades .= 5|Mogi^ ;
$cidades .= 6|Palmeiras^ ;
$cidades .= 7|Santos ;
}
// escreve a varivel
echo $cidades ;
?>
Mesmo com essa simplicidade de cdigo deve sempre
existir alguns cuidados. A acentuao sempre um
problema. Procure utilizar codificao mais apropriada
para o navegador.

O readyState pode ser utilizado para montar uma interao com


o usurio mais agradvel como uma animao informando que
a requisio se encontra em processamento. Ele pode ocorrer de
quatro tipos:
1. Sendo enviado;
2. Processando;
3. Armazenando;
4. Pronto.
A resposta do AJAX no ocorre uma nica vez, mas
recursivo. Portanto, o processo de enviar a requisio e
retornar ocorre vrias vezes durante o processo.

Neste exemplo, verificamos a extenso do AJAX. Como ele


se comporta em uma requisio de informaes? Apesar de
estarmos utilizando um formulrio, o seu enfoque no est em
registrar informaes, mas no resgate. Perceba que voc pode
estar mesclando as metodologias conforme a regra de aplicao,
utilizando o AJAX para compor as informaes do formulrio e
Unidade 6

linguagem_de_programacao_III.indb 357

357

04/02/11 11:15

Universidade do Sul de Santa Catarina

enviar as informaes para o servidor no mtodo tradicional para


garantir a sua navegabilidade.
Um exemplo disso seria a incluso de um produto a um carrinho
de compras. Ele remete ao contedo do seu carrinho (sem uso
do AJAX). J no carrinho, caso queira aumentar a quantidade
de produtos, retirar algum ou calcular o frete, utiliza-se o AJAX
para uma maior interao.
Apesar de uma grande parte das aplicaes Web trabalharem
essencialmente com recuperao de dados, necessitamos em
outros momentos incluir dados na aplicao. Para aumentar um
pouco a complexidade, vamos montar um cadastro de pessoa
com quatro campos: cdigo, nome, UF Residncia, Cidade de
Residncia. Vamos precisar de duas tabelas no banco de dados.
Primeiro, a tabela de cidades:
DROP TABLE IF EXISTS prg3.cidade;
CREATE TABLE prg3.cidade (
id_cidade int(10) unsigned NOT NULL AUTO_INCREMENT,
nm_cidade varchar(45) COLLATE latin1_general_ci NOT NULL,
id_uf varchar(2) COLLATE latin1_general_ci NOT NULL,
PRIMARY KEY (id_cidade),
KEY Index_2 (id_uf)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=latin1
COLLATE=latin1_general_ci;

A outra tabela de pessoas. Esta tabela ser relacionada com a de


cidade.

358

linguagem_de_programacao_III.indb 358

04/02/11 11:15

Linguagens de Programao III

DROP TABLE IF EXISTS prg3.pessoa;


CREATE TABLE prg3.pessoa (
id_pessoa int(10) unsigned NOT NULL AUTO_INCREMENT,
nm_pessoa varchar(45) DEFAULT NULL,
id_cidade int(10) unsigned NOT NULL,
PRIMARY KEY (id_pessoa),
KEY FK_pessoa_1 (id_cidade),
CONSTRAINT FK_pessoa_1 FOREIGN KEY (id_cidade) REFERENCES
cidade (id_cidade)
) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=latin1;

Essas duas tabelas sero criadas no banco de dados prg3, j


utilizado em outros exemplos.
Vamos montar o formulrio HTML e nele acrescentaremos cada
funo JavaScript para manipular os dados e utilizar o AJAX.
Podemos chamar esse arquivo de inicial.html.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Cadastro de Pessoas</title>
<script type=text/ecmascript src=ajaxInit.js></script>
<script type=text/javascript>

// varivel global

var tipoDados=;

// o restante dos scripts ser acrescentado a partir deste ponto.


</script>
<style type=text/css>
<!-.normal {

Unidade 6

linguagem_de_programacao_III.indb 359

359

04/02/11 11:15

Universidade do Sul de Santa Catarina

background-color: #FFF;

color: #000;

font-weight: normal;

}
-->
</style>
<link href=teste.css rel=stylesheet type=text/css />
</head>
<body>
<h1>Cadastro de Pessoas</h1>
<hr />
<form name=frmpessoa method=post enctype=multipart/
form-data onsubmit=validarcampos(this); return false;
onreset=limparstyles();>
<table width=40% border=1>
<tr>
<td scope=col><label for=codigo>Cdigo</label></td>
<td scope=col><input name=codigo type=text class=normal
id=codigo value= readonly=readonly /></td>
</tr>
<tr>
<td><label for=nome>Nome</label></td>
<td>
<input type=text name=nome id=nome value=
obrigatorio=sim descr=Nome class=normal/>
</td>
</tr>
<tr>
<td><label for=uf>UF Residencia</label></td>
<td>

360

linguagem_de_programacao_III.indb 360

04/02/11 11:15

Linguagens de Programao III

<select name=uf class=normal id=uf onChange=carregarDado


s(estado=+this.options[this.selectedIndex].value, cidade.php, cidade)
obrigatorio=sim descr=UF Residencia>

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

<option value=SP>SP</option>

<option value=PR>PR</option>

<option value=SC>SC</option>

<option value=RS>RS</option>

</select>
</td>
</tr>
<tr>
<td><label for=cidade>Cidade Residencia</label></td>
<td>
<select name=cidade class=normal id=cidade obrigatorio=sim
descr=Cidade Residencia
>

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

</select>
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=submit name=salvar value=Salvar />
&nbsp;
<input type=reset name=limpar value=Limpar />
<br />
<input type=button value=Listar name=listar
onclick=carregarDados (, salvarDados.php, salvar)/></td>
</tr>
</table>
</form>
<hr />

Unidade 6

linguagem_de_programacao_III.indb 361

361

04/02/11 11:15

Universidade do Sul de Santa Catarina

<p>
<div id=pagina>
</div>
</p>
</body>
</html>

Existe um script em JavaScript chamada ajaxInit.js que est


sendo carregado na pgina. Esse script j foi explicado em
exemplos anteriores que se refere ao objeto XMLHttpRequest.
Nesse formulrio j est sendo feito as chamadas das funes.
Uma j conhecida em exemplos anteriores, na combobox cidade
carregamos as cidades. o primeiro elemento a ser acessado,
j que para cadastrarmos qualquer informao necessrio
informar o estado e a cidade em que reside a pessoa.
<select name=uf class=normal id=uf onChange=carregarDados(
estado=+this.options[this.selectedIndex].value, cidade.php, cidade)
obrigatorio=sim descr=UF Residencia>

Nesse trecho, est sendo realizada uma chamada de funo


genrica, ou seja, essa funo chamada em outras partes do
programa para realizar tarefas distintas. Assim, temos a funo:

// funo genrica para carregar informaes

function carregarDados (codigo, url, tipo) {

// varivel auxiliar

var aux=codigo.split(=);

// testa o contedo

if (aux[1]!=) {

// chamada da funo

ajax = ajaxInit();

if (ajax) {

362

linguagem_de_programacao_III.indb 362

04/02/11 11:15

Linguagens de Programao III

tipoDados=tipo;

ajax.onreadystatechange = escreveDados ;

url = url+?+codigo ;

ajax.open (GET , url , true ) ;

ajax.send (null) ;

}
} else {

// limpa a combo de cidades

if (tipo==cidade)

limparCombo(cidade);

}
}

Essa funo monta a camada do AJAX para o envio e


recebimento de informaes e passa por trs parmetros:
cdigo
url
tipo

so os parmetros do mtodo get enviados pela URL.


a pgina de destino do AJAX.

um controlador para realizar os desvios necessrios do


programa.

O que podemos ressaltar da funo a utilizao da varivel


global tipoDados usada para transmitir o controlador. Ainda
existe a chamada da funo limparCombo, utilizada para excluir
os elementos da combobox cidade caso no tenha sido escolhido
nenhum estado. Outra chamada a funo escreveDados, que
verifica o retorno do AJAX e manipula a informao recebida.

Unidade 6

linguagem_de_programacao_III.indb 363

363

04/02/11 11:15

Universidade do Sul de Santa Catarina

function escreveDados() {
if ( ajax.readyState == 4) {
if ( ajax.status == 200) {
if (tipoDados==cidade)
acrescentaOption(cidade,ajax.responseText);
}
}
}

A funo escreveDados verifica quando o AJAX retorna o


cdigo de sucesso para, ento, poder enviar os dados a serem
acrescentados na combobox. Perceba que est sendo testado o tipo
para realizar um desvio. Mais adiante, acrescentaremos outros
desvios a essa funo.
Podemos ento acrescentar as funes de manipulao de
combobox: acrescentar dados, retirar e selecionar dados. Essas
funes no utilizam o AJAX, porm utilizam conceitos de
vetores e delimitadores de caracteres. Esse tipo de programao
um artifcio amplamente utilizado para agrupar as informaes e
posteriormente poder separ-las de forma correta.

function selecionaCombo(objSel, valor) {

for (i=0; i < objSel.length; i++){


// verifica se o item possui o valor procurado.

if (objSel.options[i].value==valor) {
// seleciona o item

objSel.selectedIndex = i;

break;

}
}

// acrescenta os dados na combobox

364

linguagem_de_programacao_III.indb 364

04/02/11 11:15

Linguagens de Programao III

function acrescentaOption(combo, texto) {


//transforma o conjunto de caractere em um vetor

var option=texto.split(^);

var elemento=document.getElementById(combo);

var valores = new Array();


// limpa a combobox

elemento.length=0;

for (var i=0;i< option.length; i++) {


// adiciona um novo indice a combobox

elemento.length++;
// quebra em um novo vetor para montar os valores da combobox

valores = option[i].split(|);
// acrescenta o novo element na combobox

elemento.options[i] = new Option(valores[1], valores[0], 0, 0);


}

// limpa a combobox

function limparCombo(combo) {

var elemento=document.getElementById(combo);

elemento.length=0;

elemento.options[0] = new Option(------, , 0, 0);

A montagem da combobox cidade se d por meio de uma consulta


ao banco de dados. Desta forma, foi utilizado um programa para
realizar essa consulta e preparar os dados de retorno. O programa
foi nomeado de cidade.php:

Unidade 6

linguagem_de_programacao_III.indb 365

365

04/02/11 11:15

Universidade do Sul de Santa Catarina

<?php
$estado = $_GET[estado];
$cidades = ;
// inclui os parmetros para conectar no banco de dados
include(variaveis.bd);
// conecta do banco
$link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o
banco de dados);
// vamos selecionar o banco de dados errado o que resultar em um erro
mysql_select_db(prg3);
// a consulta montada e encaminhada ao servidor
$result= mysql_query(SELECT c.id_cidade, c.nm_cidade FROM cidade c
WHERE c.id_uf=.$estado.);
//lista o resultado do banco de dados
$cidades=|-------------;
while ($lista_cidades=mysql_fetch_array($result)) {
$cidades.=^.$lista_cidades[id_cidade].|.mb_convert_
encoding($lista_cidades[nm_cidade],utf-8, iso-8859-1);
}
// encerra a conexo
mysql_close();
echo $cidades ;
?>

Esse programa realiza a consulta no banco de dados e retorna


a informao. A preparao dessa informao feita por meio
de delimitadores, nos quais sero posteriormente quebrados
em vetores (funo acrescentaOption). Uma funo do PHP
que facilita a escrita do AJAX em HTML 4 a funo mb_
convert_encoding. Essa funo converte os dados em uma nova
decodificao. Ela garante que a acentuao sair de forma
correta dentro do AJAX.

366

linguagem_de_programacao_III.indb 366

04/02/11 11:15

Linguagens de Programao III

Procure verificar qual os tipos de codificao


possveis para a funo MB_convert_encoding

Neste ponto j temos o necessrio para carregar as informaes


para efetivar um novo cadastro. Vamos agora montar a funo em
JavaScript para validar os dados do formulrio. Esta funo deve
ser acrescentada ao programa inicial.html.

function validarcampos(form) {

var elementos=form.elements;

var resp=;

var enviarcampos=;

for (var i=0;i<elementos.length; i++) {

// verifica o tipo de campo para ser testado corretamente


if (((elementos[i].type==text) || (elementos[i].type==hidden)
|| (elementos[i].type==select-one)) && (elementos[i].getAttribute(
obrigatorio)==sim) && (document.getElementById(elementos[i].
getAttribute(id)).value==)) {

// altera o estilo do campo com problema

elementos[i].style.backgroundColor= #FF9;

elementos[i].style.color= #F00;

elementos[i].style.fontWeight= bold;


resp+=O campo +elementos[i].getAttribute(descr) +
obrigatorio.\n;

} else {

// garante que os botes no sero alterados


if ((elementos[i].getAttribute(type)!=submit) &&
(elementos[i].getAttribute(type)!=reset) && (elementos[i].getAttribute
(type)!=button)) {

elementos[i].style.backgroundColor= #FFF;

elementos[i].style.color= #000;

elementos[i].style.fontWeight= normal;

Unidade 6

linguagem_de_programacao_III.indb 367

367

04/02/11 11:15

Universidade do Sul de Santa Catarina

// no acrescenta os botes no envio das informaes


if ((elementos[i].getAttribute(type)!=submit) && (elementos[i].
getAttribute(type)!=reset) && (elementos[i].getAttribute(type)!=but
ton)) {

// monta a url de envio


if (enviarcampos==) enviarcampos=elementos[i].getAttribute(
name)+=+document.getElementById(elementos[i].getAttribute(id)).
value;

else enviarcampos+=&+elementos[i].getAttribute(name)+=
+document.getElementById(elementos[i].getAttribute(id)).value;

enviarcampos

if (resp!=) {

alert(resp);

return false;

} else {

// envia as informaes para o AJAX

carregarDados (enviarcampos, salvarDados.php, salvar)

form.reset();

return false;

Essa funo vasculha em todos os elementos do formulrio a


fim de identificar quais so os campos obrigatrios e validlos. A funo utiliza um artifcio do XML em que foi
empregado no HTML. Os campos obrigatrios receberam dois
atributos customizados obrigatorio e descr. Um para informar a
obrigatoriedade e o outro a identificao na mensagem de erro.
No formulrio, fica desta forma:
<input type=text name=nome id=nome value= obrigatorio=sim
descr=Nome class=normal/>

368

linguagem_de_programacao_III.indb 368

04/02/11 11:15

Linguagens de Programao III

Desta forma, a funo se torna mais genrica e o controle passa


a ser do formulrio no mais do cdigo de validao. Outra
informao importante dessa funo que so testados os tipos
de campos. Dependendo do tipo, pode ser feita uma validao
mais apropriada. Nos campos utilizados, foram manipulados os
estilos em CSS para ressaltar as informaes com problemas de
validao. Uma vez validado os campos, os dados so enviados
para o AJAX submeter ao programa salvarDados.php.
<?php
// prepara uma varivel de retorno com uma tabela HTML
$retorno=<table width=\70%\ align=\center\
border=\1\><tr><th>Cdigo</th><th>Nome</th><th>Cidade</
th><th>UF</th><th>Ao</th></tr>\n;
// inclui os parmetros para conectar no banco de dados
include(variaveis.bd);

// conecta do banco
$link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o
banco de dados);
// vamos selecionar o banco de dados errado o que resultar em um erro
mysql_select_db(prg3);
// realiza uma validao nos dados
if ((@$_GET[nome]!=) && (@$_GET[cidade]!=)) {
// feita uma validao ternria, o qual verifica um dado e acrescenta
um valor a uma varivel

$codigo = @$_GET[codigo]!=? $_GET[codigo] : 0;

// converte para o encode correto e a funo addslashes prepara as


informaes para cadastrar em um banco de dados
$nome = addslashes(mb_convert_encoding(@$_GET[nome],iso8859-1,utf-8));

$cidade = @$_GET[cidade];


// o mysql permite a funo replace (deleta e insere a mesma
informao) quando no existe insere, se existe altera

Unidade 6

linguagem_de_programacao_III.indb 369

369

04/02/11 11:15

Universidade do Sul de Santa Catarina

mysql_query(replace into pessoa (id_pessoa, nm_pessoa, id_cidade)


value ($codigo, $nome,$cidade));

}
// monta uma consulta de retorno na tela
$result= mysql_query(SELECT p.id_pessoa, p.nm_pessoa, c.nm_cidade,
c.id_uf FROM pessoa p, cidade c WHERE p.id_cidade=c.id_cidade);

//lista o resultado do banco de dados


while ($pessoas=mysql_fetch_array($result)) {
// prepara as informaes para mostrar na tela

$retorno.=<tr>\n;

$retorno.=<td>.$pessoas[id_pessoa].</td>\n;

$retorno.=<td>.mb_convert_encoding($pessoas[nm_
pessoa],utf-8, iso-8859-1).</td>\n;
$retorno.=<td>.mb_convert_encoding($pessoas[nm_
cidade],utf-8, iso-8859-1).</td>\n;

$retorno.=<td>.$pessoas[id_uf].</td>\n;

$retorno.=<td><a href=\#\ onclick=\carregarDados(codigo=.$pes


soas[id_pessoa]., carregaDados.php, pessoa)\>Alterar</a></td>\n;

$retorno.=</tr>\n;
}
// encerra a conexo
mysql_close();
$retorno.=</table>;
echo $retorno;

?>

A informao montada no programa formatada em uma tabela


HTML. Assim, no mostra somente a informao cadastrada,
mas todas as informaes contidas no banco de dados. Para

370

linguagem_de_programacao_III.indb 370

04/02/11 11:15

Linguagens de Programao III

retornar essa lista, necessrio acrescentar um desvio na funo


escreveDados.
function escreveDados() {
if ( ajax.readyState == 4) {
if ( ajax.status == 200) {
if (tipoDados==cidade)
acrescentaOption(cidade,ajax.responseText);
if (tipoDados==salvar)
ajax.responseText;

document.getElementById(pagina).innerHTML =

}
}
}

Esse desvio feito para escrever na tag div a tabela de retorno.


Essas informaes abrem a opo para outra funcionalidade:
a alterao de dados. Essa funcionalidade utiliza o mesmo
mecanismo da funcionalidade de inserir. A diferena que
sabemos qual o cdigo est sendo enviado. A dificuldade aqui
em recuperar as informaes. Para diminuir o custo do AJAX em
processar as informaes, vamos utilizar um nico programa para
carregar as informaes em todos os campos, inclusive a combobox
de cidade. Para isso, j foi formatado na tabela de resposta um
link para alterar os dados. Este link envia o cdigo da pessoa para
o AJAX.
<td><a onclick=carregarDados(codigo=1, carregaDados.php,
pessoa) href=#>Alterar</a></td>

O programa carregaDados.php realiza a consulta das informaes


e formata o retorno.

Unidade 6

linguagem_de_programacao_III.indb 371

371

04/02/11 11:15

Universidade do Sul de Santa Catarina

<?php
$codigo = $_GET[codigo];
$pessoa = ;
// inclui os parmetros para conectar no banco de dados
include(variaveis.bd);

// conecta do banco
$link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o
banco de dados);
// vamos selecionar o banco de dados errado o que resultar em um erro
mysql_select_db(prg3);

// a consulta montada e encaminhada ao servidor


$result= mysql_query(SELECT p.id_pessoa, p.nm_pessoa, c.id_cidade,
c.id_uf FROM pessoa p, cidade c WHERE p.id_cidade=c.id_cidade AND
p.id_pessoa=.$codigo);
//lista o resultado do banco de dados
$listPessoa=mysql_fetch_array($result);
// formata os dados de retorno por meio de delimitadores
$pessoa=$listPessoa[id_pessoa].$.mb_convert_
encoding($listPessoa[nm_pessoa],utf-8, iso-8859-1).$.$listPessoa[id_
cidade].$.$listPessoa[id_uf].~;
// realiza a consulta de todas as cidades do estado cadastrado
$result= mysql_query(SELECT c.id_cidade, c.nm_cidade, c.id_uf FROM
cidade c where id_uf=.$listPessoa[id_uf].);
$cidades=|-------------;
while ($lista_cidades=mysql_fetch_array($result)) {
// formata o retorno por meio de delimitadores.
$cidades.=^.$lista_cidades[id_cidade].|.mb_convert_
encoding($lista_cidades[nm_cidade],utf-8, iso-8859-1);
}
$pessoa.=$cidades;
// encerra a conexo
mysql_close();
echo $pessoa ;

372

linguagem_de_programacao_III.indb 372

?>

04/02/11 11:15

Linguagens de Programao III

Veja que neste programa esto sendo utilizadas duas consultas:


uma para pessoas e outra para montar a combobox cidade. Essa
prtica reduz o tempo de resposta e garante que as informaes
esto sendo enviadas de forma correta.
O AJAX recupera a informao, porm para poder atribuir as
informaes de maneira correta, necessrio realizar mais um
desvio na funo escreveDados.
function escreveDados() {
if ( ajax.readyState == 4) {
if ( ajax.status == 200) {
if (tipoDados==cidade)
acrescentaOption(cidade,ajax.responseText);
if (tipoDados==pessoa)
carregarPessoa(ajax.responseText);
if (tipoDados==salvar)
ajax.responseText;

document.getElementById(pagina).innerHTML =

}
}
}

Quando o retorno destinado alterao de dados, o tipo dever


ser pessoa. Porm, necessitamos de outra funo onde atribuda
todas as informaes aos seus respectivos campos.

function carregarPessoa(retorno) {
// monta um vetor para o tipo de dados de combobox e texto
var tipos=retorno.split(~);
// separa em vetor os dados de texto
var vl_campos=tipos[0].split($);
// atribui os dados para cada campo de formulrio
document.frmpessoa.codigo.value=vl_campos[0];

Unidade 6

linguagem_de_programacao_III.indb 373

373

04/02/11 11:15

Universidade do Sul de Santa Catarina

document.frmpessoa.nome.value=vl_campos[1];
// seleciona o estado cadastrado para a pessoa
selecionaCombo(document.frmpessoa.uf,vl_campos[3]);
// acrescenta as cidades do estado selecionado
acrescentaOption(cidade,tipos[1]);
//seleciona a cidade cadastrada para a pessoa
selecionaCombo(document.frmpessoa.cidade,vl_campos[2]);
}

A funo carregarPessoa separa em vetores a cadeia de caracteres


retornada pelo AJAX. Assim, acrescenta os dados nos campos,
alm de realizar a chamada para montar a combobox de cidades.
At aqui, j foram realizadas a incluso, a alterao dos dados
e um retorno formatado dos dados includos. Porm, para se
tornar mais amigvel, necessrio mostrar essa listagem das
informaes cadastradas mesmo antes de se cadastrar um item
novo. Como o programa salvarDados.php foi montado para
realizar a manipulao dos dados somente quando os dados do
formulrio forem enviados, podemos utilizar a mesma chamada
para listar todas as informaes de pessoas. Assim, acrescentamos
um boto ao formulrio para que seja chamado o programa sem
parmetros.
<input type=button value=Listar name=listar
onclick=carregarDados (, salvarDados.php, salvar)/>

O programa apenas executar a consulta. No ser realizado


nenhum tipo de manipulao de dados, j que os campos do
formulrio esto em branco.
Voc pode perceber que o AJAX em si extremamente simples.
Porm, a programao empregada a ele para manipular os
dados se torna extremamente complexa. Qualquer informao
que transite por essa camada deve ser observada, monitorada,
gerenciada e testada de forma que possa ser controlada e suprimir
o mximo de inconsistncias possveis.

374

linguagem_de_programacao_III.indb 374

04/02/11 11:15

Linguagens de Programao III

Seo 3 Mtodo POST no AJAX


O mtodo GET nos garante um grande volume de solues,
porm possui um limitador. O nmero de caracteres. Esse
nmero uma limitao da prpria URL que no pode
ultrapassar 255 caracteres. Portanto, tratando-se de formulrios
com um volume de dados maior, temos de utilizar outra soluo.
O mtodo POST do formulrio resolve essa situao.
O mtodo POST requer que os dados sejam encapsulados no
corpo do formulrio. O prprio HTML naturalmente faz isso
no seu cdigo. Mas, utilizando o AJAX, o HTML no gerencia
o envio, e sim o JavaScript que realiza essa tarefa. Portanto, para
nos auxiliar no encapsulamento das informaes, utilizamos a
funo encodeURI.
Essa funo fora a identificao do recurso sobre o HTML.
Desta forma, sua aplicabilidade sobre o AJAX a torna quase
perfeita na sua utilizao.
Vamos ver um exemplo do envio de um formulrio simples por
meio do mtodo POST. Primeiramente montamos o HTML
com o nome de form.php
<html>
<head>
<title>Enviando formulrio POST com PHP e AJAX</title>
<!-- Carrega o arquivo script.js ao iniciar a pgina! //-->
<script language=javascript src=script.js type=text/javascript></
script>
</head>
<body>
<table cellpadding=2 cellspacing=0 width=50%>
<!-//No evento onsubmit (ao enviar), ele seta o valor dos campos na
funo setarCampos() e depois executa a funo enviarForm() da pgina
script.js. Caso o usurio no tenha Javascript instalado/habilitado no
navegador, ele envia o formulrio via ACTION.

Unidade 6

linguagem_de_programacao_III.indb 375

375

04/02/11 11:15

Universidade do Sul de Santa Catarina

-->
<form action= method=post onSubmit=setarCampos(this);
enviarForm(processar.php, campos, divResultado); return false;>
<tr>
<td>Nome</td>
<td>
<input name=txtNome id=txtNome type=text>
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input name=txtEmail id=txtEmail type=text>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<input type=submit value=Enviar>&nbsp;<input type=reset
value=Limpar>
</td>
</tr>
</form>
</table>
<div id=divResultado/>
<script>
//Cria a funo com os campos para envio via parmetro
function setarCampos() {
// recusros sendo atribuidos
campos = txtNome=+encodeURI(document.
getElementById(txtNome).value).toUpperCase()+&txtEmail=+encodeU
RI(document.getElementById(txtEmail).value);

376

linguagem_de_programacao_III.indb 376

04/02/11 11:15

Linguagens de Programao III

}
</script>
</body>
</htm>

Veja que as informaes esto sendo preparadas para o envio ao


AJAX. A funo encodeURI monta o recurso em uma varivel.
Essa varivel utilizaremos dentro do JavaScript contendo o
AJAX. Para este exemplo, vamos chamar de script.js.
//Cria e atribui varivel global navegador (em caracteres minsculos) o
nome e a verso do navegador
var navegador = navigator.userAgent.toLowerCase();
var elemento;

//Cria uma varivel global chamada xmlhttp


var xmlhttp;
//Funo que inicia o objeto XMLHttpRequest
function objetoXML() {

//Desvio do Internet Explorer

if (navegador.indexOf(msie) != -1) {


var controle = (navegador.indexOf(msie 5) != -1) ? Microsoft.
XMLHTTP : Msxml2.XMLHTTP;

//Operador ternrio que adiciona o objeto padro do seu
navegador (caso for o IE) varivel controle

try {

//Inicia o objeto no IE

xmlhttp = new ActiveXObject(controle);

} catch (e) { }

} else {

//Firefox, Safari, Mozilla

//Inicia o objeto no Firefox, Safari, Mozilla

Unidade 6

linguagem_de_programacao_III.indb 377

377

04/02/11 11:15

Universidade do Sul de Santa Catarina

xmlhttp = new XMLHttpRequest();

function handleHttpResponse()
{

if (xmlhttp.readyState == 4)

if(xmlhttp.status==200)

//Insere no elemento a pgina postada

elemento.innerHTML = xmlhttp.responseText;

} else {

//Insere no elemento o texto atribudo

elemento.innerHMTL = Pgina no encontrada!;

}
//Funo que envia o formulrio

function enviarForm(url, campos, destino) {


//Atribui varivel elemento o elemento que ir receber a pgina
postada

elemento = document.getElementById(destino);

//Executa a funo objetoXML()

objetoXML();

//Se o objeto de xmlhttp no estiver true

if (!xmlhttp) {

//Insere no elemento o texto atribudo


elemento.innerHTML = Impossvel iniciar o objeto
XMLHttpRequest.;

378

linguagem_de_programacao_III.indb 378

04/02/11 11:15

Linguagens de Programao III

return;

} else {

//Insere no elemento o texto atribudo

elemento.innerHTML = Carregando...;

//Abre a pgina que receber os campos do formulrio

xmlhttp.open(POST, url, true);

xmlhttp.onreadystatechange = handleHttpResponse;

//altera os cabealhos da pgina de resposta

xmlhttp.setRequestHeader(Content-type, application/x-www-formurlencoded);

xmlhttp.setRequestHeader(Content-length, 2);

//Envia o formulrio com dados da varivel campos (passado por


parmetro)

xmlhttp.send(campos);

Como voc pode perceber, houve poucas modificaes entre


o mtodo GET e o mtodo POST. Porm, essas pequenas
alteraes nos auxiliam no desenvolvimento. Para finalizar o
exemplo, vamos montar o arquivo processar.php.
<?php
//Determina o tipo da codificao da pgina
header(content-type: text/html; charset=iso-8859-1);
//Extrai os dados do formulrio
extract($_POST);
//Verifica se algum nome foi digitado
$nome = ($txtNome != ) ? $txtNome : desconhecido;
//Verifica se algum email foi digitado
$email = ($txtEmail != ) ? $txtEmail : desconhecido;

Unidade 6

linguagem_de_programacao_III.indb 379

379

04/02/11 11:15

Universidade do Sul de Santa Catarina

//Retorna com a resposta


echo Ol <b>.$nome.</b>, seu email : <a href=mailto:.$email.><b>.
$email.</b></a>;
?>

Realizando esse teste voc poder verificar que, mesmo alterando


o cabealho da pgina, possivelmente ocorrer um erro de
acentuao onde no sero identificadas as acentuaes. Quando
acontece isso, troca-se as palavras por caracteres estranhos e
indecifrveis. Mesmo nessa situao, podemos recorrer a alguns
artifcios que nos auxiliam em ajustar a acentuao.
Poderamos estar utilizando duas funes para ajustar esse
problema. A primeira a mb_convert_encoding, que converte uma
codificao para outra. A segunda seria a funo addslashes: ela
interpreta caracteres especiais como aspas simples e duplas, barra
invertida, entre outras. Desta forma, trocaramos a linha.
$nome = ($txtNome != ) ? $txtNome : desconhecido;

Por esta linha:


$nome = ($txtNome != ) ? strtoupper(addslashes(mb_convert_
encoding($txtNome,iso-8859-1,utf-8))) : desconhecido;

Ainda foi acrescentada a funo strtoupper para que fosse alterado


o texto para caixa-alta.
Outro exemplo que muito utilizando a busca dinmica, que
consiste em realizar uma busca a um banco de dados enquanto o
usurio digita letra a letra. A sua aplicao muito utilizada para
selecionar rapidamente as informaes desejadas. Neste exemplo,
vamos nos ater em buscar as informaes.
Primeiramente vamos construir um banco de dados com as
informaes j cadastradas. Vamos utilizar o banco prg3 e criar
uma tabela chamada pessoa.

380

linguagem_de_programacao_III.indb 380

04/02/11 11:15

Linguagens de Programao III

CREATE TABLE `pessoa` (


`id_pessoa` int(10) unsigned NOT NULL auto_increment,
`nm_pessoa` varchar(45) default NULL,
PRIMARY KEY (`id_pessoa`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `pessoa` (`id_pessoa`,`nome`) VALUES (1,ALEXANDRE
VIEIRA DE OLIVEIRA);
INSERT INTO `pessoa` (`id_pessoa`,`nome`) VALUES (2,ALEXANDRE
TESTANDO);
INSERT INTO `pessoa` (`id_pessoa`,`nome`) VALUES (3,WAGNER DOS
SANTOS);
INSERT INTO `pessoa` (`id_pessoa`,`nome`) VALUES (4,VIRGINIA);
INSERT INTO `pessoa` (`id_pessoa`,`nome`) VALUES (5,PEDALA
ROBINHO);
INSERT INTO `pessoa` (`id_pessoa`,`nome`) VALUES (6,MASSA DEMAIS);

Aps carregar as informaes, passamos ao desenvolvimento do


cdigo. Vamos criar o arquivo inicio.php:
<html>
<head>
<autor>Alexandre Vieira</autor>
<site>http://www.codigofonte.net/dicas/php/170_busca-dinamicautilizando-ajax</site>
<title>BUSCA DIN&Acirc;MICA</title>
<meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1>
<script src=script.js></script>
<script>
function pesquisa(valor)
{
//FUNO QUE MONTA A URL E CHAMA A FUNO AJAX
campos = valor=+encodeURI(valor);

Unidade 6

linguagem_de_programacao_III.indb 381

381

04/02/11 11:15

Universidade do Sul de Santa Catarina

url=busca_nome.php;
ajax(url,campos);
}
</script>
</head>

<body>
<table width=657 border=0 bgcolor=#f7f7f7>
<tr>
<td align=center bgcolor=#CCCCCC>
<strong>
<font color=#FF0000 size=1 face=Verdana, Arial, Helvetica, sansserif>
<-BUSCA DINMICAMICA ->
</font>
</strong>
</td>
</tr>
<tr>
<td>
<font size=1 face=Verdana, Arial, Helvetica, sansserif><strong>DIGITE AQUI O NOME DA PESSOA</strong></font>:
<!-- NOTE QUE A CADA TECLA PRESSIONADA CHAMADA A
FUNO PESQUISA PASSANDO O QUE O USURIO TEM DIGITADO AT O
MOMENTO -->
<input type=text name=nome onKeyPress=pesquisa(this.value)>
</td>
</tr>
<tr>
<td>
<!-- AQUI SER APRESENTADO O RESULTADO DA BUSCA DINMICA,
OU SEJA, OS NOMES -->
<div id=pagina>

382

linguagem_de_programacao_III.indb 382

04/02/11 11:15

Linguagens de Programao III

</div>
</td>
</tr>
</table>

</body>
</html>
Fonte: <www.codigofonte.net/dicas/php/170_busca-dinamica-utilizando-ajax>.

Veja que no foi necessrio montar a tag form. Essa omisso foi
proposital para que voc possa perceber que o AJAX gerencia
o tipo de mtodo a ser enviado para o servidor. Agora, basta
montar o arquivo script.js:
// JavaScript Document
// FUNO RESPONSVEL DE CONECTAR A UMA PGINA EXTERNA, NO
NOSSO CASO A BUSCA_NOME.PHP
// E RETORNAR OS RESULTADOS
function ajax(url,campos) {
req = null;
// Procura por um objeto nativo (Mozilla/Safari)
if (window.XMLHttpRequest) {

req = new XMLHttpRequest();

req.open(POST,url,true);

req.onreadystatechange = processReqChange;

req.setRequestHeader(Content-type, application/x-www-formurlencoded);

req.setRequestHeader(Content-length, 2);

req.send(campos);
// Procura por uma verso ActiveX (IE)
} else if (window.ActiveXObject) {

req = new ActiveXObject(Microsoft.XMLHTTP);


Unidade 6

linguagem_de_programacao_III.indb 383

383

04/02/11 11:15

Universidade do Sul de Santa Catarina

if (req) {

req.open(POST,url,true);

req.onreadystatechange = processReqChange;


req.setRequestHeader(Content-type, application/x-www-formurlencoded);

req.setRequestHeader(Content-length, 2);


//Envia o formulrio com dados da varivel campos (passado por
parmetro)

req.send(campos);
}

function processReqChange() {
// apenas quando o estado for completado
if (req.readyState == 4) {

// apenas se o servidor retornar OK

if (req.status ==200) {

// procura pela div id=pagina e insere o conteudo

// retornado nela, como texto HTML

document.getElementById(pagina).innerHTML = req.responseText;

} else {

alert(Houve um problema ao obter os dados: + req.statusText);

}
}

}
Fonte: <www.codigofonte.net/dicas/php/170_busca-dinamica-utilizando-ajax>.

Permanecemos com o AJAX de forma limpa, sem nenhuma


interferncia sobre a codificao. Montamos ento o arquivo
busca_nome.php:
384

linguagem_de_programacao_III.indb 384

04/02/11 11:15

Linguagens de Programao III

<?php
if(!empty($_POST[valor])) {
// O CAMPO VALOR CONTER O QUE O USUARIO DIGITOU AT O
MOMENTO..
// CONECTA AO BANCO COLOCA PARAMENTROS IP,USUARIO,SENHA
$conexao=mysql_connect(localhost,web,123);

//SELECIONA O BANCO DE DADOS QUE VAI USAR


mysql_select_db(prg3);

// EXECUTA A INSTRUO SELECT PASSANDO O QUE O USURIO DIGITOU


$sql=select * from pessoa where nm_pessoa like $_POST[valor]%;
$resultado=mysql_query($sql) or die (mysql_error());

//VERIFICA A QUANTIDADE DE REGISTROS RETORNADOS


$linhas=mysql_num_rows($resultado);

if($linhas>0){
//EXECUTA UM LOOP PARA MOSTRAR OS NOMES DAS PESSOAS
// VALE LEMBRAR QUE TODOS ESSES RESULTADOS SERO MOSTRADOS
DENTRO DA PGINA INDEX.PHP
// DENTRO DO DIV PAGINA
echo <ul>\n;
while($pegar=mysql_fetch_array($resultado))
echo <li>$pegar[nm_pessoa]</li>\n;
}
echo </ul>\n;
}
?>
Fonte: <www.codigofonte.net/dicas/php/170_busca-dinamica-utilizando-ajax>.

Unidade 6

linguagem_de_programacao_III.indb 385

385

04/02/11 11:15

Universidade do Sul de Santa Catarina

Apesar de exigir uma certa complexidade, a utilizao do AJAX


possui uma codificao simples, necessitando apenas de um
pequeno nmero de decodificao.
Procure testar se est sendo enviado realmente pelo
mtodo POST utilizando a funo echo var_dump($_
POST); no arquivo busca_nome.php.

Upload de arquivos
Apesar das vantagens, o AJAX sofre com a sua prpria
tecnologia. Voc deve se lembrar que o AJAX no encaminha
informaes ao servidor por meio da postagem de formulrio.
Em vez disso, ele cria uma camada de comunicao com o
servidor.
Essa caracterstica possui um custo e, dependendo da aplicao,
pode ser muito alto. A funcionalidade de enviar arquivos para o
servidor feita por meio da postagem do HTML. Isso significa
que o browser decodifica o arquivo para o HTML poder
encaminhar a postagem. O HTML processa o arquivo para o
servidor.
O AJAX no possui uma postagem. Ento como proceder nessa
situao? Atualmente no possui uma soluo para o AJAX
realizar o upload de arquivos. Em contrapartida, existem diversas
solues que simulam essa atividade pelo AJAX, uma delas a
utilizao de iFrames. Essa utilizao pode acarretar riscos j que
no so todos os browsers que tratam o iFrame de forma concisa.
Veja o seguinte exemplo de sua utilizao.

386

linguagem_de_programacao_III.indb 386

04/02/11 11:15

Linguagens de Programao III

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//


EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <!--Script desenvolvido pelo http://www.ajaxf1.com/-->
5. <meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
6. <title>Max's AJAX File Uploader</title>
7. <link href="style/style.css" rel="stylesheet" type="text/css" />
8.
9. <script language="javascript" type="text/javascript">
10. <!-11. function startUpload(){
12. document.getElementById('f1_upload_process').style.
visibility = 'visible';
13. document.getElementById('f1_upload_form').style.visibility
= 'hidden';
14. return true;
15. }
16. function stopUpload(success){
17. var result = '';
18. if (success == 1){
19.
result = '<span class="msg">The file was uploaded
successfully!<\/span><br/><br/>';
20. }
21. else {
22.
result = '<span class="emsg">There was an error during file
upload!<\/span><br/><br/>';
23. }
24. document.getElementById('f1_upload_process').style.
visibility = 'hidden';
25. document.getElementById('f1_upload_form').innerHTML =
result + '<label>File: <input name="myfile" type="file" size="30"
/><\/label><label><input type="submit" name="submitBtn"
class="sbtn" value="Upload" /><\/label>';
26. document.getElementById('f1_upload_form').style.visibility
= 'visible';
27. return true;
28. }
29. //-->
30. </script>
31. </head>

Unidade 6

linguagem_de_programacao_III.indb 387

387

04/02/11 11:15

Universidade do Sul de Santa Catarina

32. <body>
33. <div id="container">
34.
<div id="header"><div id="header_left"></div>
35.
<div id="header_main">Max's AJAX File Uploader</
div><div id="header_right"></div></div>
36.
<div id="content">
37.
<form action="upload.php" method="post"
enctype="multipart/form-data" target="upload_target"
onsubmit="startUpload();" >
38.
<p id="f1_upload_process">Loading...<br/><img
src="loader.gif" /><br/></p>
39.
<p id="f1_upload_form" align="center"><br/>
40.
<label>File:
41.
<input name="myfile" type="file" size="30" />
42.
</label>
43.
<label>
44.
<input type="submit" name="submitBtn"
class="sbtn" value="Upload" />
45.
</label>
46.
</p>
47.
48.
<iframe id="upload_target" name="upload_target"
src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
49.
</form>
50.
</div>
51.
<div id="footer"><a href="http://www.ajaxf1.com"
target="_blank">Powered by AJAX F1</a></div>
52.
</div>
53. </body>
54. </html>
Fonte: <www.ajaxf1.com>.

Veja que o diferencial est na linha 39 que a ponta o alvo do


formulrio sendo o iFrame. Esta tag permite a utilizao de
um bloco da pgina como sendo uma pgina independente da
original.
O arquivo que processa o arquivo pode ser escrito desta forma:

388

linguagem_de_programacao_III.indb 388

04/02/11 11:15

Linguagens de Programao III

<?php
// Edit upload location here
$destination_path = getcwd().DIRECTORY_SEPARATOR;
$result = 0;

$target_path = $destination_path . basename( $_FILES[myfile]


[name]);
if(@move_uploaded_file($_FILES[myfile][tmp_name], $target_path)) {
$result = 1;
}

sleep(1);
?>
<script language=javascript type=text/javascript>window.top.
window.stopUpload(<?php echo $result; ?>);</script>
Fonte: <www.ajaxf1.com>.

Todo o processo percorre de forma que no utiliza o AJAX,


mas para o usurio permanece essa iluso. O script completo se
encontra postado na midiateca.

Seo 4 Bibliotecas
O desenvolvimento de softwares traado por diversos tipos
de ferramentas que facilitam e enriquecem o trabalho. Os
frameworks tanto podem ser softwares que criam programas com
uma maior facilidade como scripts contendo diversos recursos.
Quando um framework no cria um programa, mas
possibilita a utilizao de solues com o intuito de agilizar o
desenvolvimento, recebem o nome de bibliotecas.

Unidade 6

linguagem_de_programacao_III.indb 389

389

04/02/11 11:15

Universidade do Sul de Santa Catarina

As bibliotecas possuem a caracterstica de reduzir a repetio de


cdigos, assim como agrupar funcionalidades em comuns. Desta
forma, possvel compactar diversas funcionalidades e reutiliza
em diversos projetos. Assim, procura-se reduzir a quantidade
de codificao desenvolvida em cada projeto. Sem falar na
confiabilidade de um cdigo testado constantemente em diversas
aplicaes.

Dojo
A biblioteca Dojo possui uma distribuio gratuita e foi
desenvolvida em JavaScript. O Dojo possui a proposta de reduzir
o tratamento de solicitaes assncronas a uma nica chamada
de funo, alm de oferecer diversas funcionalidades DOM para
diversos navegadores.
DOM uma sigla de Modelo de Objetos de Documentos. Esse
modelo uma especificao do consrcio W3C que independe
da plataforma e linguagem. A especificao define os objetos
que podem alterar dinamicamente sua estrutura, o contedo e os
estilos dos documentos eletrnicos. O DOM oferece um padro
para acessar os elementos do documento trabalhando com eles
separadamente.
Por se tratar de uma biblioteca, a sua utilizao extremamente
simples. No necessria uma instalao. Necessita apenas de
uma chamada por meio de uma tag script e em seguida invocar as
funes.
O Dojo possui uma documentao prpria em que
voc pode estar estudando sobre como utilizar as
funcionalidades. A pgina oficial dessa ferramenta
<www.dojotoolkit.org>.

390

linguagem_de_programacao_III.indb 390

04/02/11 11:15

Linguagens de Programao III

Sarissa
Sarissa uma biblioteca direcionada para a manipulao do
XML em JavaScript. Possui suporte a componentes ActiveX
MSXML do Internet Explorer, Mozilla, Opera, Konqueror e
Safari.
O Sarissa utiliza o padro Adapter para criar um objeto
XMLHttpRequest baseado em JavaScript para os navegadores
que no possui esse objeto nativo. Desta forma, ele padroniza os
chamados realizando as devidas adaptaes. Portanto, o cdigo a
seguir dever funcionar para todos os browsers.
var xhr = new XMLHttpRequest();
xhr.opendir(GET,dados.xml);
xhr.onreadystatechange = function {
if (xhr.readyState == 4) {
alert(xhr.responseXML);
}
}

Prototype
Esta biblioteca tambm escrita em JavaScript, porm possui
seu foco nas funcionalidades desta linguagem com o intuito de
suportar uma programao orientada a objetos. Apesar de sua
leitura ser muito dificultosa, a sua utilizao simples e direta.
O Prototype por muitas vezes considerado como uma biblioteca
geral para desenvolver bibliotecas. Os desenvolvedores AJAX
tm uma probabilidade maior de utilizarem alguma biblioteca
com base na Prototype. Essa caracterstica descende de ela ser
construda com base na programao orientao objeto. Assim,
todos os recursos dessa metodologia so herdados pela biblioteca.
Essa caracterstica permite uma customizao mais natural e
dinmica.

Unidade 6

linguagem_de_programacao_III.indb 391

391

04/02/11 11:15

Universidade do Sul de Santa Catarina

O Prototype uma biblioteca poderosa e voc pode


aprender mais sobre ela consultado a pgina oficial
<www.prototypejs.org>.

Existem diversas bibliotecas que podem auxiliar no


desenvolvimento. Procure sempre escolher as que possuem
uma boa documentao. O grupo que mantm biblioteca deve
conter um controle de verso, assim voc saber que os bugs
esto sendo corrigidos. De forma geral, procure sempre testar a
biblioteca escolhida. Caso tenha necessidade de alterar alguma
funcionalidade da biblioteca, certifique-se se essa alterao no se
trata de uma casualidade do projeto, assim deve permanecer no
projeto. Bibliotecas so genricas.
Bibliotecas, em geral, tm a obrigao de reduzir
o nosso esforo em construir cdigos repetitivos e
maantes. As casualidades devem ser tratadas dentro
do prprio projeto de desenvolvimento.

Sntese
Nesta unidade voc viu uma tecnologia muito til no
desempenho de aplicaes Web. O AJAX um conjunto de
aplicaes destinado em promover uma agilidade s pginas
Web semelhante a uma aplicao desktop. Vimos como o AJAX
complexo e, em contrapartida, possui um cdigo enxuto com
pouca codificao, alm de sua limitao no upload de arquivos
e o quanto os frameworks facilitam o nosso trabalho como
desenvolvedores.

392

linguagem_de_programacao_III.indb 392

04/02/11 11:15

Linguagens de Programao III

Atividades de autoavaliao
Ao final de cada unidade, voc ser provocado a realizar atividades de
autoavaliao. O gabarito est disponvel no final do livro-didtico, mas
se esforce para resolver as atividades sem ajuda do gabarito, pois assim
voc estar estimulando a sua aprendizagem.
1) Desenvolva uma aplicao utilizando o AJAX e um banco de dados.
Poder construir um cadastro de pessoas, onde, ao digitar parcialmente
o nome o usurio, tenha a opo de selecionar o nome e carregar as
informaes para a tela.

Saiba mais
Se voc desejar, aprofunde os contedos estudados nesta unidade
ao consultar as seguintes referncias:
W3Schools. W3Schools Online Web Tutorials, 2010.
Disponvel em: <www.w3schools.com>. Acesso em: 01 mar.
2010.
W3C. World Wide Web Consortium, 2010. Disponvel em:
<www.w3.org>. Acesso em: 2 mar. 2010.
AJAX F1, 2010. Disponvel em: <www.ajaxf1.com>. Acesso em:
20 maio 2010.
iMasters, 2010. Disponvel em: <http://imasters.uol.com.br>.
Acesso em: 16 maio 2010.
CodigoFonte.net, 2010. Disponvel em: <www.codigofonte.
net>. Acesso em: 15 jul. 2010.

Unidade 6

linguagem_de_programacao_III.indb 393

393

04/02/11 11:15

linguagem_de_programacao_III.indb 394

04/02/11 11:15

Para concluir o estudo


Ao se dedicar ao estudo das unidades apresentadas neste
livro didtico, voc teve a oportunidade de interagir e
consolidar alguns conceitos sobre o desenvolvimento
de aplicaes para Web assim como harmonizar as
diferentes linguagens que compe um projeto deste tipo.
Conhecer a linguagem e saber utiliz-la no significa
um sucesso no projeto. Detalhe o melhor possveis todos
os itens da sua aplicao. Destaque sempre as regras
de negcio o qual voc est buscando uma soluo ou
melhoria. Um planejamento bem estruturado e detalhado
representa 60% do projeto.
Mantenha sempre em foco onde cada linguagem
melhor empregada. No desperdice recursos tentando
construir uma alternativa onde j existam diversas
solues. Perder alguns minutos com uma pesquisa
pela rede, normalmente economizam muitas horas em
desenvolvimentos desnecessrios.
Linguagens como Javascript e PHP possuem uma vasta
bibliografia e comunidades onde so disponibilizados
diversos scripts que possivelmente iro auxili-lo em seu
problema. Porm, voc perceber que o entendimento
destes scripts indispensvel ao se adotar como soluo.
Boa sorte e sucesso!!!

linguagem_de_programacao_III.indb 395

04/02/11 11:15

linguagem_de_programacao_III.indb 396

04/02/11 11:15

Referncias
BEZERRA, Eduardo. Princpios de anlise e projeto de sistemas
com UML. 2. ed. Rio de Janeiro: Campus, 2007.
BOOCH, Grady; RUMBAUGH, James; JACOBSON, Ivar. UML, guia
do usurio. Rio de Janeiro : Elsevier, 2000.
GUEDES, Gilleanes T. A. UML: Uma Abordagem Prtica. So
Paulo: Novatec, 2004.
FOWLER, Martin. UML essencial : um breve guia para a
linguagem-padro de modelagem de objetos. 3.ed.. Porto
Alegre, RS : Bookman, 2005.
DICIONRIO ELETRNICO MICHAELIS. Moderno dicionrio da
lngua portuguesa. So Paulo: Melhoramentos, 2009. Disponvel
em: <http://michaelis.uol.com.br/moderno/portugues/index.
php?lingua=portugues-portugues&palavra=intera%E7%E3o>.
Acesso em: 05/10/2010.
OMG. Introduction to Unified Modeling Language. Disponvel
em: <http://www.omg.org/gettingstarted/what_is_uml.htm>.
Acessado em 08-mar-2010.
OMG-About. About the Object Management Group. Disponvel
em: < http://www.omg.org/gettingstarted/gettingstartedindex.
htm>. Acessado em 10-out-2010.
SPARXSYSTEMS. UML 2 Tutorial. Disponvel em: < http://www.
sparxsystems.com/resources/uml2_tutorial/>. Acessado em
10-out-2010.
WAZLAWICK, Raul Sidnei. Anlise e projeto de sistemas
de informao orientados a objetos. 1. ed. Rio de Janeiro:
Elsevier, 2004.
Manual PHP, 2010. Disponvel em: http://br2.php.net/manual/
pt_BR/index.php//> Acessado em 05 abril 2010.
PHP Brasil, 2010. Disponvel em: <http://www.phpbrasil.com/>.
Acessado em 05 abril 2010.
T r u q u e s e D i c a s - Tutoriais de Javascript, 2010.
Disponvel em: < http://www.truquesedicas.com/tutoriais/php/
index.htm>. Acessado em 02 mar 2010.

linguagem_de_programacao_III.indb 397

04/02/11 11:15

Universidade do Sul de Santa Catarina

Manual do MySQL, 2010. Disponvel em: <http://dev.mysql.com/doc/


refman/5.1/en/index.html//> Acessado em 05 abril 2010.
Cdigo Fonte, 2010. Disponvel em <http:// http://codigofonte.uol.com.br/
artigos/javascript-dhtml//> Acessado em 01 mar 2010.
jsfromhell.com JavaScript Repository, 2010. Disponvel em <http://
jsfromhell.com/>. Acessado em 15/03/2010.
W3Schools. W3Schools Online Web Tutorials, 2010. Disponvel em
<http://www.w3schools.com/> Acessado em 01 mar 2010.
W3C. World Wide Web Consortium, 2010. Disponvel em <http://www.
w3.org/>. Acessado em 02 mar 2010.
Dicas-l, 2010. Disponvel em < http://www.dicas-l.com.br//>. Acessado em
16 mai 2010.
iMasters, 2010. Disponvel em < http://imasters.uol.com.br//>. Acessado
em 16 mai 2010.
Plugmasters, 2010. Disponvel em < http://www.plugmasters.com.b/>.
Acessado em 15 mai 2010.
AJAX F1, 2010. Disponvel em < http://www.ajaxf1.com//>. Acessado em
20 mai 2010.
CodigoFonte.net, 2010. Disponvel em < http://www.codigofonte.net//>.
Acessado em 15 julho 2010.

398

linguagem_de_programacao_III.indb 398

04/02/11 11:15

Sobre o professor conteudista


Edson Orivaldo Lessa Junior especialista em
Engenharia de projetos de software pela Universidade do
Sul de Santa Cataria UNISUL. Professor da Unisul
desde de 2008 em disciplinas oferecidas pelos cursos
de Cincias da Computao, Gesto da Tecnologia da
Informao e Web Design e Programao. Participou
de projetos de desenvolvimentos em Gesto Financeira,
Framework, Sistemas distribudos.

linguagem_de_programacao_III.indb 399

04/02/11 11:15

linguagem_de_programacao_III.indb 400

04/02/11 11:15

Respostas e comentrios das


atividades de autoavaliao
Unidade 1
1. Uma das principais vantagens da aplicao Webtop a sua
portabilidade. Praticamente, o usurio possui acesso ao
seu desktop em qualquer lugar que tenha acesso internet.
Outra vantagem a centralizao para manuteno,
qualquer novo recurso implementado para a aplicao
Webtop se propagar para todos os usurios. Sem falar de
uma vantagem primordial, como toda a aplicao est em
um servidor, o backup das informaes muito mais fcil.
Uma desvantagem que tudo depende da rede. Caso uma
conexo de dados no possua uma velocidade adequada,
reflete diretamente no desempenho da Webtop. Outra
desvantagem a compatibilidade com as aplicaes. Muitas
aplicaes no so compatveis com este modelo o que torna
muitas vezes invivel a sua utilizao.
2.
1 Linguagem Server-side
2 Linguagem Client-side

linguagem_de_programacao_III.indb 401

(1)
(2)
(2)
(2)
( 1)
(1)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(2)
(1)
(2)
(1)
(1)
(1)
(1)
(1)
(2)

PostgreSQL
HTML
Oracle
SQLite
Javascript
Microsoft Silverlight
PHP
MySQL
ASP
DB2
.NET
CGI
Perl
Java
CSS
Python
Microsoft SQL Server
Ruby
Firebird
ColdFusion
Websphere
Flash

04/02/11 11:15

Universidade do Sul de Santa Catarina

3. No h limite, logicamente eles no podem ser redundantes na mesma


tag. Mas possvel utilizar quantas forem necessrias e criar atributos
novos para uma personalizao de aplicao.

Unidade 2
1.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Exercicio Um</title>
</head>
<script language=javascript type=text/javascript>
function validanumero(numero) {

// funo para validar se um nmero valido

if (numero.length == 0) {

return false;

} else {

// verifica se todos os caracteres so nmeros

for (i = 0; i < numero.length; i++)


9)))

if (!((numero.charAt(i) >= 0) && (numero.charAt(i) <=

return true;

return false;

}
function validar(form) {

//Variveis de mensagem de erro padro e controle de erro

var erro=ATENO\n\n;

var msgerro=false;

402

linguagem_de_programacao_III.indb 402

04/02/11 11:15

Linguagens de Programao III

if (form.txt_nome.value==) {

erro+=O Campo Nome obrigatrio\n;

msgerro=true;

if (form.txt_nomemae.value==){

erro+=O Campo Nome da Me obrigatrio\n;

msgerro=true;

var idade=form.txt_idade.value;

if (validanumero(idade)){

// testa para verificar se a idade est contida no intervalo correto

if ((parseInt(idade)<10) || (parseInt(idade)>120)) {


120 anos\n;

erro+=O Campo Idade deve conter uma idade entre 10 e

msgerro=true;

} else {


erro+=O Campo Idade deve conter somente nmeros
inteiros\n;

msgerro=true;

var email=form.txt_email.value;

if (email==) {

erro+=O Campo E-mail obrigatrio\n;

msgerro=true;

} else {


// verifica se existe um caractere @ e no se encontra na primeira
posio

// verifica se existe um caractere entre o @ e o .

// verifica se o . no o ltimo caractere


if ((email.indexOf(@)<0) || (email.indexOf(.)<=(email.
indexOf(@)+1)) || ((email.indexOf(.)+1)>=email.length)) {

403

linguagem_de_programacao_III.indb 403

04/02/11 11:15

Universidade do Sul de Santa Catarina

erro+=O Campo E-mail deve conter um e-mail vlido\n;

msgerro=true;

if (msgerro) {

alert(erro);

return false;

return true;

}
</script>
<body>
<h1>Cadastro</h1>
<p>
<form name=cadpessoa id=cadpessoa method=post action=
onsubmit=return validar(this);>
<table width=338>
<tr>
<td width=163><label for=txt_nome>Nome:</label></td>
<td width=163><input type=text name=txt_nome id=txt_
nome value= /></td>
</tr>
<tr>
<td>Endereo</td>
<td><input type=text name=txt_endereco id=txt_endereco
value= /></td>
</tr>
<tr>
<td><label for=txt_nomemae>Nome da Me</label></td>
<td><input type=text name=txt_nomemae id=txt_nomemae
value= /></td>
</tr>

404

linguagem_de_programacao_III.indb 404

04/02/11 11:15

Linguagens de Programao III

<tr>
<td><label for=txt_idade>Idade</label></td>
<td><input type=text name=txt_idade id=txt_idade value=
/></td>
</tr>
<tr>
<td><label for=txt_email>E-mail</label></td>
<td><input type=text name=txt_email id=txt_email value=
/></td>
</tr>
<tr>
<td align=center><input type=submit name=btn_validar
value=Validar /></td>
<td align=center><input type=reset name=btn_limpar
value=Limpar /></td>
</tr>
</table>
</form>
</p>
</body>
</html>

2.

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Exerccio dois</title>
</head>
<script language=javascript type=text/javascript>

405

linguagem_de_programacao_III.indb 405

04/02/11 11:15

Universidade do Sul de Santa Catarina

function inserir(texto) {

//converte as quebras de linhas para a tag <br> do HTML

while (texto.indexOf(\n)>=0)

texto=texto.replace(\n,<br />);

//escreve do elemento que contm o Id div_result

document.getElementById(div_result).innerHTML=texto;

}
</script>
<body>
<form name=forminsert id=forminsert>
<label for=txa_insert>Insira o texto abaixo:</label><br />
<textarea name=txa_insert id=txa_insert cols=50 rows=10
onkeyup=inserir(this.value);></textarea>
<br />
O Resultado:<br />
<div id=div_result style=color:#009>
</div>
</form>
</body>
</html>

Unidade 3
1.
<<<arquivo exercicio1.php >>>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Exerccio 1 envio Form</title>

406

linguagem_de_programacao_III.indb 406

04/02/11 11:15

Linguagens de Programao III

</head>

<body>
<form name=formulario target=_self action=recebeform.php
method=post>
<table align=left cellpadding=0 cellspacing=0 border=1>
<tr>
<td>Nome</td>
<td><input type=text name=txt_nome id=txt_nome value=
/></td>
</tr>
<tr>
<td>Endereo</td>
<td><input type=text name=txt_endereco id=txt_endereco
value= /></td>
</tr>
<tr>
<td>Nome da me</td>
<td><input type=text name=txt_nomemae id=txt_nomemae
value= /></td>
</tr>
<tr>
<td>Idade</td>
<td><input type=text name=txt_idade id=txt_idade value=
/></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type=text name=txt_email id=txt_email value=
/></td>
</tr>
<tr>

407

linguagem_de_programacao_III.indb 407

04/02/11 11:15

Universidade do Sul de Santa Catarina

<td><input type=submit name=btn_enviar id=btn_enviar


value=Enviar /></td>
<td><input type=reset name=btn_limpar id=btn_limpar
value=Limpar /></td>
</tr>
</table>
</form>
</body>
</html>

<<< arquivo recebeform.php >>>


<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Recebe Formulrio</title>
</head>
<body>
<?php
function erro($tipo, $msg=Sem informao){

switch ($tipo) {

case 1:

echo <h1>Formulrio no enviado!</h1>;

break;

case 2:

echo <h1>Erro nos valores do formulrio!</h1>;

echo $msg;

break;

408

linguagem_de_programacao_III.indb 408

04/02/11 11:15

Linguagens de Programao III

echo <a href=\exercicio1.php\>Retornar ao formulrio;

}
// Verifica se o formulrio foi enviado
if (@$_POST[btn_enviar]==) erro(1);
else {

// varivel de controle

$controle=false;

if ($_POST[txt_nome]==) {

$validacampos=O campo nome deve ser preenchido<br />\n;

$controle=true;

if ($_POST[txt_endereco]==) {


/>\n;

$validacampos.=O campo endereo deve ser preenchido<br

$controle=true;

if ($_POST[txt_nomemae]==) {


/>\n;

$validacampos.=O campo nome da me deve ser preenchido<br

$controle=true;

if ($_POST[txt_idade]==) {

$validacampos.=O campo idade deve ser preenchido<br />\n;

$controle=true;

} else {

if (intval($_POST[txt_idade])<3) {


$validacampos.=A idade deve ser maior que dois
anos<br />\n;

$controle=true;

409

linguagem_de_programacao_III.indb 409

04/02/11 11:15

Universidade do Sul de Santa Catarina

if ($_POST[txt_email]==) {

$validacampos.=O campo e-mail deve ser preenchido<br />\n;

$controle=true;

} else {

/*

strpos verifica a posio que um caractere aparece em uma string

strripos verifica a ltima posio que um caractere aparece

*/


if (((strpos($_POST[txt_email],@)===false) &&
(strpos($_POST[txt_email],.)===false)) || (strripos($_POST[txt_
email],.)<strpos($_POST[txt_email],@))) {

$validacampos.=O campo e-mail deve conter um e-mail
vlido<br />;

$controle=true;

if ($controle==true)

erro(2,$validacampos);

else {

?>

<table align=left cellpadding=2 cellspacing=0 border=1>


<tr>
<td>Nome</td>
<td><?=$_POST[txt_nome]?></td>
</tr>
<tr>
<td>Endereo</td>
<td><?=$_POST[txt_endereco]?></td>
</tr>
<tr>

410

linguagem_de_programacao_III.indb 410

04/02/11 11:15

Linguagens de Programao III

<td>Nome da me</td>
<td><?=$_POST[txt_nomemae]?></td>
</tr>
<tr>
<td>Idade</td>
<td><?=$_POST[txt_idade]?></td>
</tr>
<tr>
<td>E-mail</td>
<td><?=$_POST[txt_email]?></td>
</tr>
</table>

<?php


}
?>
</body>
</html>

2.
<<< arquivo recebeform.php >>>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Recebe Formulrio</title>
</head>

411

linguagem_de_programacao_III.indb 411

04/02/11 11:15

Universidade do Sul de Santa Catarina

<body>
<?php
function erro($tipo, $msg=Sem informao){

switch ($tipo) {

case 1:

echo <h1>Formulrio no enviado!</h1>;

break;

case 2:

echo <h1>Erro nos valores do formulrio!</h1>;

echo $msg;

break;

echo <a href=\exercicio1.php\>Retornar ao formulrio;

}
// Verifica se o formulrio foi enviado
if (@$_POST[btn_enviar]==) erro(1);
else {

// varivel de controle

$controle=false;

if ($_POST[txt_nome]==) {

$validacampos=O campo nome deve ser preenchido<br />\n;

$controle=true;

if ($_POST[txt_endereco]==) {


/>\n;

$validacampos.=O campo endereo deve ser preenchido<br

$controle=true;

if ($_POST[txt_nomemae]==) {

412

linguagem_de_programacao_III.indb 412

04/02/11 11:15

Linguagens de Programao III


/>\n;

$validacampos.=O campo nome da me deve ser preenchido<br

$controle=true;

if ($_POST[txt_idade]==) {

$validacampos.=O campo idade deve ser preenchido<br />\n;

$controle=true;

} else {

if (intval($_POST[txt_idade])<3) {


$validacampos.=A idade deve ser maior que dois
anos<br />\n;

$controle=true;

if ($_POST[txt_email]==) {

$validacampos.=O campo e-mail deve ser preenchido<br />\n;

$controle=true;

} else {

/*

strpos verifica a posio que um caractere aparece em uma string

strripos verifica a ltima posio que um caractere aparece

*/


if (((strpos($_POST[txt_email],@)===false) &&
(strpos($_POST[txt_email],.)===false)) || (strripos($_POST[txt_
email],.)<strpos($_POST[txt_email],@))) {

$validacampos.=O campo e-mail deve conter um e-mail
vlido<br />;

$controle=true;

if ($controle==true)

erro(2,$validacampos);

413

linguagem_de_programacao_III.indb 413

04/02/11 11:15

Universidade do Sul de Santa Catarina

else {

?>

<table align=center cellpadding=2 cellspacing=0 border=1>


<tr>
<td>Nome</td>
<td><?=$_POST[txt_nome]?></td>
</tr>
<tr>
<td>Endereo</td>
<td><?=$_POST[txt_endereco]?></td>
</tr>
<tr>
<td>Nome da me</td>
<td><?=$_POST[txt_nomemae]?></td>
</tr>
<tr>
<td>Idade</td>
<td><?=$_POST[txt_idade]?></td>
</tr>
<tr>
<td>E-mail</td>
<td><?=$_POST[txt_email]?></td>
</tr>
</table>

<?php

$arq=arquivo.txt;

$fp=fopen($arq,w+);

if ($fp) {

fwrite($fp,Nome:.$_POST[txt_nome].\n);

414

linguagem_de_programacao_III.indb 414

04/02/11 11:15

Linguagens de Programao III

fwrite($fp,Endereo:.$_POST[txt_endereco].\n);
fwrite($fp,Nome da me:.$_POST[txt_nomemae].\n);
fwrite($fp,Idade:.$_POST[txt_idade].\n);
fwrite($fp,E-mail:.$_POST[txt_email].\n);

fclose($fp);


echo <p><a href=\learquivo.php?arq=.$arq.\>Ler arquivo
Texto Gerado</a></p>;

} else echo <h4>Erro ao gerar o arquivo</h4>;


}
?>
</body>
</html>
<<< arquivo learquivo.php >>>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>L arquivo</title>
</head>
<body>
<?php
if (@$_GET[arq]!=) {

// verifica se o arquivo existe

if (file_exists($_GET[arq])) {

$fp=fopen($_GET[arq],r);

if ($fp) {

415

linguagem_de_programacao_III.indb 415

04/02/11 11:15

Universidade do Sul de Santa Catarina

echo <h1>Resultado da leitura</h1>;


border=1>;

echo <table align=left cellpadding=2 cellspacing=0


linha a linha

//feof testa o fim do arquivo, utiliza um ponteiro lendo

while (!feof($fp)) {

$conteudo=fgets($fp);


caractere :

//converte uma string em array ao encontrar o

$dados=explode(:, $conteudo);

if ($dados[0]==) continue;

echo <tr><td>.$dados[0].</td>;

echo <td>.$dados[1].</td></tr>;

} else echo <h4>Erro ao gerar o arquivo</h4>;

}
}
?>
</body>
</html>

Unidade 4
1.
<<< estrutura de arquivos >>>

<<< criar tabela no banco de dados >>>

416

linguagem_de_programacao_III.indb 416

04/02/11 11:15

Linguagens de Programao III

DROP TABLE IF EXISTS `livro`;


CREATE TABLE IF NOT EXISTS `livro` (
`codigo` int(11) NOT NULL AUTO_INCREMENT,
`nome` varchar(100) NOT NULL,
`autor` varchar(100) DEFAULT NULL,
`editora` varchar(100) DEFAULT NULL,
`paginas` int(11) DEFAULT NULL,
PRIMARY KEY (`codigo`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
<<< arquivo config.php >>>
<?php
// conexo com o banco de dados
mysql_connect(localhost, web, senha123);
mysql_select_db(prg3);
?>
<<< arquivo estilo.css >>>
/* CSS criado para melhorar o visual da aplicao*/
/* Tudo */
* { margin:0; padding:0; }

/* Tags */
html { background:#F4F4F4; text-align:center; }
body { font-size:10pt; font-family:Trebuchet MS; width:400px;
background:#FFFFFF; margin:0 auto; text-align:left; padding:10px; }
a { text-decoration:none; color:#336699; }
a:hover { text-decoration:underline; }

/* Mensagens */
.mensagem { margin-bottom:10px; padding:10px; }

417

linguagem_de_programacao_III.indb 417

04/02/11 11:15

Universidade do Sul de Santa Catarina

.erro { background:#FFFFE0; border:1px solid #E6DB55; color:#333333; }


.sucesso { border:1px solid #568F0F; color:#333; background:#DFF1C0;}

/* Formulario */
form { text-align:left; display:table; width:100%; clear:both; }
label, input { display:block; padding:5px;}
input#nome, input#autor, input#editora { width:390px; }
input#consultar, input#cadastrar { float:right; }

/* Menu */
#menu { border-bottom:1px dashed #CCC; padding-bottom:5px; }
#menu li { display:inline; width:100px; padding:10px; }

/* Tabelas */
table { border-collapse:collapse; width:100%; border:1px solid #B4D1DC;
border-bottom:3px solid #B4D1DC; }
table tr { background:#FFF; }
table th { background:#B4D1DC; border-bottom:3px solid #777; }
table td, table th { padding:5px; text-align:center; border:1px solid #ccc; }

<<< arquivo cadastro.php >>>


<?php
//inclui o conexo com o banco de dados
include(./cfg/config.php);
?>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN

http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>

<html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www.


w3.org/1999/xhtml>

<head>

418

linguagem_de_programacao_III.indb 418

04/02/11 11:15

Linguagens de Programao III


<meta http-equiv=Content-Type content=text/
html;charset=ISO-8859-1/>

<title>Cadastro de Livros</title>

<link href=./css/estilo.css type=text/css rel=stylesheet />

</head>

<body>

<?php

// inclui o menu de navegao

include(menu.php);

?>

<h1>Cadastro de Livros</h1>

<?php

// verifica se o formulrio foi enviado

if(!empty($_POST)):

// valida os campos


if( (!empty($_POST[nome])) && (!empty($_POST[autor]))
&& (!empty($_POST[editora])) && (!empty($_POST[paginas])) ):

$nome = $_POST[nome];

$autor = $_POST[autor];

$editora = $_POST[editora];

$paginas = $_POST[paginas];


$livros = mysql_query(SELECT * FROM livro
WHERE lower(nome) = .strtolower($nome).);

if(mysql_num_rows($livros) >= 1):

?>

<div class=mensagem erro>


este nome cadastrado.

</div>

<?php

J&aacute; existe uma livro com


elseif(mysql_query(INSERT INTO livro VALUES
(NULL, .$nome., .$autor., .$editora., .$paginas.))):

419

linguagem_de_programacao_III.indb 419

04/02/11 11:15

Universidade do Sul de Santa Catarina

?>

<div class=mensagem sucesso>

</div>

<?php

Livro cadastrado com sucesso.

else:

?>

<div class=mensagem erro>

</div>

<?php

Erro ao cadastrar livro.

endif;

else:

?>

<div class=mensagem erro>


&Eacute; necess&aacute;rio preencher
todos os campos para cadastrar o livro.

</div>

<?php

endif;

endif;

?>

<form name=cadastro id=cadastro method=post>

<label for=nome>Nome:</label>


<input type=text name=nome id=nome
tabindex=1 />

<label for=autor>Autor:</label>


<input type=text name=autor id=autor
tabindex=2 />

<label for=editora>Editora:</label>


<input type=text name=editora id=editora
tabindex=3 />

420

linguagem_de_programacao_III.indb 420

04/02/11 11:15

Linguagens de Programao III

<label for=paginas>P&aacute;ginas:</label>


<input type=text name=paginas id=paginas
tabindex=4 />

<input type=submit name=cadastrar id=cadastrar
value=Cadastrar tabindex=5 />

</form>

</body>

</html>
<<< arquivo consulta.php >>>
<?php
//inclui a conexo
include(./cfg/config.php);
?>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN

http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>

<html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www.


w3.org/1999/xhtml>

<head>


<meta http-equiv=Content-Type content=text/
html;charset=ISO-8859-1/>

<title>Consulta de Livros</title>

<link href=./css/estilo.css type=text/css rel=stylesheet />

</head>

<body>

<?php

//inclui o meni de navegao

include(menu.php);

?>

<h1>Consulta de Livros</h1>

<?php

if(!empty($_POST)):

421

linguagem_de_programacao_III.indb 421

04/02/11 11:15

Universidade do Sul de Santa Catarina

$nome = strtolower($_POST[nome]);


$queryConsulta = mysql_query(SELECT * FROM livro
WHERE lower(nome) LIKE %.$nome.%);

$registros = mysql_num_rows($queryConsulta);

if( ($registros >= 1) && $nome != ):

?>

<div class=mensagem sucesso>


<strong><?php echo $registros; ?></
strong> livro(s) encontrado(s).

</div>

<table>

<thead>

<tr>

<th>C&oacute;digo</th>

<th>Nome</th>

<th>Autor</th>

<th>Editora</th>

<th>P&aacute;ginas</th>

</tr>

</thead>

<tbody>

<?php


assoc($queryConsulta)):

while($livro = mysql_fetch_

?>

<tr>


<td><a href=./
livro.php?id=<?php echo $livro[codigo]; ?>><?php echo $livro[codigo];
?></a></td>

<td><a href=./
livro.php?id=<?php echo $livro[codigo]; ?>><?php echo $livro[nome];
?></a></td>

422

linguagem_de_programacao_III.indb 422

04/02/11 11:15

Linguagens de Programao III


$livro[autor]; ?></td>

<td><?php echo


$livro[editora]; ?></td>

<td><?php echo


$livro[paginas]; ?></td>

<td><?php echo

</tr>

<?php

endwhile;

?>

</tbody>

</table>

<?php

else:

?>

<div class=mensagem erro>

</div>

<?php

Nenhum livro encontrado.

endif;

endif;

?>

<form name=consulta id=consulta method=post>

<label for=nome>Nome:</label>


<input tabindex=1 type=text id=nome
name=nome />

<input tabindex=2 id=consultar name=consultar
type=submit value=Consultar />

</form>

</body>

</html>

423

linguagem_de_programacao_III.indb 423

04/02/11 11:15

Universidade do Sul de Santa Catarina

<<< arquivo index.php >>>

<html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www.


w3.org/1999/xhtml>

<head>

<title>Livros</title>

<link href=./css/estilo.css type=text/css rel=stylesheet />

</head>

<body>

<?php

// incluui o menu de navegao

include(menu.php);

?>

</body>

</html>
<<< arquivo lista.php >>>
<?php
include(./cfg/config.php);
?>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN

http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>

<html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www.


w3.org/1999/xhtml>

<head>


<meta http-equiv=Content-Type content=text/
html;charset=ISO-8859-1/>

<title>Lista de Livros</title>

<link href=./css/estilo.css type=text/css rel=stylesheet />

</head>

<body>

424

linguagem_de_programacao_III.indb 424

04/02/11 11:15

Linguagens de Programao III

<?php

include(menu.php);

?>

<h1>Lista de Livros</h1>

<table>

<thead>

<tr>

<th>C&oacute;digo</th>

<th>Nome</th>

<th>Autor</th>

<th>Editora</th>

<th>P&aacute;ginas</th>

</tr>

</thead>

<tbody>

<?php

$livros = mysql_query(SELECT * FROM livro);

while($livro = mysql_fetch_assoc($livros)):

?>

<tr>


<td><a href=./livro.
php?id=<?php echo $livro[codigo]; ?>><?php echo $livro[codigo]; ?></
a></td>

<td><a href=./livro.
php?id=<?php echo $livro[codigo]; ?>><?php echo $livro[nome]; ?></
a></td>

?></td>

<td><?php echo $livro[autor];


?></td>

<td><?php echo $livro[editora];


?></td>

<td><?php echo $livro[paginas];

</tr>

425

linguagem_de_programacao_III.indb 425

04/02/11 11:15

Universidade do Sul de Santa Catarina

<?php

endwhile;

?>

</tbody>

</table>

</body>

</html>
<<< arquivo livro.php >>>
<?php
include(./cfg/config.php);
?>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN

http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>

<html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www.


w3.org/1999/xhtml>

<head>


<meta http-equiv=Content-Type content=text/
html;charset=ISO-8859-1/>

<title>Detalhes do Livro</title>

<link href=./css/estilo.css type=text/css rel=stylesheet />

</head>

<body>

<?php

include(menu.php);

$id = $_GET[id];


$queryLivro = mysql_query(SELECT * FROM livro WHERE codigo
= .$id);

if(mysql_num_rows($queryLivro) == 1):

$livro = mysql_fetch_assoc($queryLivro);

?>

<h1>Detalhes do Livro</h1>

426

linguagem_de_programacao_III.indb 426

04/02/11 11:15

Linguagens de Programao III

<table>

<tbody>

<tr>

<th>C&oacute;digo</th>


?></td>

<td><?php echo $livro[codigo];

</tr>

<tr>

<th>Nome</th>


?></td>

<td><?php echo $livro[nome];

</tr>

<tr>

<th>Autor</th>


?></td>

<td><?php echo $livro[autor];

</tr>

<tr>

<th>Editora</th>


?></td>

<td><?php echo $livro[editora];

</tr>

<tr>

<th>P&aacute;ginas</th>


?></td>

<td><?php echo $livro[paginas];

</tbody>

</table>

<?php

</tr>

else:

?>

427

linguagem_de_programacao_III.indb 427

04/02/11 11:15

Universidade do Sul de Santa Catarina

<div class=mensagem erro>

</div>

<?php

endif;

?>

Livro n&atilde;o encontrado.

</body>

</html>
<<< arquivo menu.php >>>
<ul id=menu>
<li><a tabindex=51 href=cadastro.php title=Cadastro>Cadastro</
a></li>
<li><a tabindex=52 href=consulta.php title=Consulta>Consulta</
a></li>

<li><a tabindex=53 href=lista.php title=Lista>Lista</a></li>

</ul>
2.
<<<estrutura de arquivos>>>

<<< criar tabela no banco de dados >>>


CREATE TABLE IF NOT EXISTS `usuario` (
`codigo` int(11) NOT NULL AUTO_INCREMENT,
`nome` varchar(100) DEFAULT NULL,
`login` varchar(20) DEFAULT NULL,
`senha` char(32) DEFAULT NULL,

428

linguagem_de_programacao_III.indb 428

04/02/11 11:15

Linguagens de Programao III

PRIMARY KEY (`codigo`)


) ENGINE=MyISAM DEFAULT CHARSET=latin1;
<<< arquivo config.php >>>
<?php
//realiza a conexo com o banco de dados
mysql_connect(localhost, web, senha123);
mysql_select_db(prg3);
?>

<<< arquivo estilo.css >>>


/* CSS criado para melhorar o visual da aplicao*/
/* Tudo */
* { margin:0; padding:0; }

/* Tags */
html { background:#F4F4F4; text-align:center; }
body { font-size:10pt; font-family:Trebuchet MS; width:400px;
background:#FFFFFF; margin:0 auto; text-align:left; padding:10px; }
a { text-decoration:none; color:#336699; }
a:hover { text-decoration:underline; }

/* Mensagens */
.mensagem { margin-bottom:10px; padding:10px; }
.erro { background:#FFFFE0; border:1px solid #E6DB55; color:#333333; }
.sucesso { border:1px solid #568F0F; color:#333; background:#DFF1C0;}

/* Formulario */
form { text-align:left; display:table; width:100%; clear:both; }
label, input { display:block; padding:5px;}

429

linguagem_de_programacao_III.indb 429

04/02/11 11:15

Universidade do Sul de Santa Catarina

input#nome, input#login, input#senha { width:390px; }


input#consultar, input#cadastrar { float:right; }

/* Menu */
#menu { border-bottom:1px dashed #CCC; padding-bottom:5px; }
#menu li { display:inline; width:100px; padding:10px; }
/* Tabelas */
table { border-collapse:collapse; width:100%; border:1px solid #B4D1DC;
border-bottom:3px solid #B4D1DC; }
table tr { background:#FFF; }
table th { background:#B4D1DC; border-bottom:3px solid #777; }
table td, table th { padding:5px; text-align:center; border:1px solid #ccc; }
<<< arquivo cadastro.php >>>
<?php
//verifica se o usurio est logado
include(./verificacao.php);
//inclui a conexo com o banco de dados
include(./cfg/config.php);
?>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN

http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>

<html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www.


w3.org/1999/xhtml>

<head>


<meta http-equiv=Content-Type content=text/
html;charset=ISO-8859-1/>

<title>Cadastro de Usu&aacute;rios</title>

<link href=./css/estilo.css type=text/css rel=stylesheet />

</head>

<body>

430

linguagem_de_programacao_III.indb 430

04/02/11 11:15

Linguagens de Programao III

<?php

include(menu.php);

?>

<h1>Cadastro de Usu&aacute;rios</h1>

<?php

if(!empty($_POST)):


if( (!empty($_POST[nome])) && (!empty($_POST[login]))
&& (!empty($_POST[senha])) ):

$nome = $_POST[nome];

$login = $_POST[login];

$senha = $_POST[senha];


$usuarios = mysql_query(SELECT * FROM
usuario WHERE (lower(nome) = .strtolower($nome).) OR (lower(login) =
.strtolower($login).));

if(mysql_num_rows($usuarios) >= 1):

?>

<div class=mensagem erro>


J&aacute; existe uma
usu&aacute;rio com este nome ou login cadastrado.

</div>

<?php


elseif(mysql_query(INSERT INTO usuario VALUES
(NULL, .$nome., .$login., MD5(.$senha.)))):

?>

<div class=mensagem sucesso>


sucesso.

</div>

<?php

Usu&aacute;rio cadastrado com

else:

?>

<div class=mensagem erro>

431

linguagem_de_programacao_III.indb 431

04/02/11 11:15

Universidade do Sul de Santa Catarina

</div>

<?php

Erro ao cadastrar usu&aacute;rio.

endif;

else:

?>

<div class=mensagem erro>


&Eacute; necess&aacute;rio preencher
todos os campos para cadastrar o usu&aacute;rio.

</div>

<?php

endif;

endif;

?>

<form name=cadastro id=cadastro method=post>

<label for=nome>Nome:</label>


<input type=text name=nome id=nome
tabindex=1 />

<label for=login>Login:</label>


<input type=text name=login id=login
tabindex=2 />

<label for=senha>Senha:</label>


<input type=password name=senha id=senha
tabindex=3 />

<input type=submit name=cadastrar id=cadastrar
value=Cadastrar tabindex=4 />

</form>

</body>

</html>

432

linguagem_de_programacao_III.indb 432

04/02/11 11:15

Linguagens de Programao III

<<< arquivo consulta.php >>>


<?php
//verifica se o usurio est logado
include(./verificacao.php);
//inclui a conexo com o banco de dados
include(./cfg/config.php);
?>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN

http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>

<html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www.


w3.org/1999/xhtml>

<head>


<meta http-equiv=Content-Type content=text/
html;charset=ISO-8859-1/>

<title>Consulta de Usu&aacute;rios</title>

<link href=./css/estilo.css type=text/css rel=stylesheet />

</head>

<body>

<?php

include(menu.php);

?>

<h1>Consulta de Usu&aacute;rios</h1>

<?php

if(!empty($_POST)):

$nome = strtolower($_POST[nome]);


$queryConsulta = mysql_query(SELECT * FROM usuario
WHERE lower(nome) LIKE %.$nome.%);

$registros = mysql_num_rows($queryConsulta);

if( ($registros >= 1) && $nome != ):

?>

<div class=mensagem sucesso>

433

linguagem_de_programacao_III.indb 433

04/02/11 11:15

Universidade do Sul de Santa Catarina


<strong><?php echo $registros; ?></
strong> usu&aacute;rio(s) encontrado(s).

</div>

<table>

<thead>

<tr>

<th>C&oacute;digo</th>

<th>Nome</th>

<th>Login</th>

</tr>

</thead>

<tbody>

<?php


assoc($queryConsulta)):

while($usuario = mysql_fetch_

?>

<tr>


<td><a href=./
usuario.php?id=<?php echo $usuario[codigo]; ?>><?php echo
$usuario[codigo]; ?></a></td>

<td><a href=./
usuario.php?id=<?php echo $usuario[codigo]; ?>><?php echo
$usuario[nome]; ?></a></td>

$usuario[login]; ?></td>

</tr>

<?php

endwhile;

?>

</tbody>

</table>

<?php

<td><?php echo

else:

434

linguagem_de_programacao_III.indb 434

04/02/11 11:15

Linguagens de Programao III

?>

<div class=mensagem erro>

</div>

<?php

Nenhum usu&aacute;rio encontrado.

endif;

endif;

?>

<form name=consulta id=consulta method=post>

<label for=nome>Nome:</label>


<input tabindex=1 type=text id=nome
name=nome />

<input tabindex=2 id=consultar name=consultar
type=submit value=Consultar />

</form>

</body>

</html>
<<< arquivo index.php >>>
<?php
// Verifica se esta logado
include(verificacao.php);
?>
<html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www.
w3.org/1999/xhtml>

<head>

<title>Usu&aacute;rios</title>

<link href=./css/estilo.css type=text/css rel=stylesheet />

</head>

<body>

435

linguagem_de_programacao_III.indb 435

04/02/11 11:15

Universidade do Sul de Santa Catarina

<?php

// Se estiver logado inclui o menu

include(menu.php);

?>

</body>

</html>
<<< arquivo lista.php >>>
<?php
include(./verificacao.php);
include(./cfg/config.php);
?>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN

http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>

<html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www.


w3.org/1999/xhtml>

<head>


<meta http-equiv=Content-Type content=text/
html;charset=ISO-8859-1/>

<title>Lista de Usu&aacute;rios</title>

<link href=./css/estilo.css type=text/css rel=stylesheet />

</head>

<body>

<?php

include(menu.php);

?>

<h1>Lista de Usu&aacute;rios</h1>

<table>

<thead>

<tr>

436

linguagem_de_programacao_III.indb 436

04/02/11 11:15

Linguagens de Programao III

<th>C&oacute;digo</th>

<th>Nome</th>

<th>Login</th>

</tr>

</thead>

<tbody>

<?php


usuario);

$usuarios = mysql_query(SELECT * FROM

while($usuario = mysql_fetch_assoc($usuarios)):

?>

<tr>


<td><a href=./usuario.
php?id=<?php echo $usuario[codigo]; ?>><?php echo
$usuario[codigo]; ?></a></td>

<td><a href=./usuario.
php?id=<?php echo $usuario[codigo]; ?>><?php echo $usuario[nome];
?></a></td>

?></td>

</tr>

<?php

endwhile;

?>

<td><?php echo $usuario[login];

</tbody>

</table>

</body>

</html>

437

linguagem_de_programacao_III.indb 437

04/02/11 11:15

Universidade do Sul de Santa Catarina

<<< arquivo login.php >>>


<?php
//inicia a sesso
session_start();
include(./cfg/config.php);
?>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN

http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>

<html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www.


w3.org/1999/xhtml>

<head>


<meta http-equiv=Content-Type content=text/
html;charset=ISO-8859-1/>

<title>&Aacute;rea Restrita</title>

<link href=./css/estilo.css type=text/css rel=stylesheet />

</head>

<body>

<h1>&Aacute;rea Restrita</h1>

<?php

if(!empty($_POST)):


):

if( (!empty($_POST[login])) && (!empty($_POST[senha]))

$login = $_POST[login];

$senha = $_POST[senha];


$queryUsuario = mysql_query(SELECT * FROM
usuario WHERE login = .$login. AND senha = MD5(.$senha.));

if(mysql_num_rows($queryUsuario) == 1):


$usuario = mysql_fetch_
assoc($queryUsuario);

// registra uma sesso


$usuario[nome];

$_SESSION[administracao][usuario] =

438

linguagem_de_programacao_III.indb 438

04/02/11 11:15

Linguagens de Programao III

?>

<div class=mensagem sucesso>

Autenticado com sucesso. <br />


aqui</a> para continuar.

<a href=./index.php>Clique

</div>

<?php

else:

?>

<div class=mensagem erro>

</div>

<?php

Login/Senha incorretos.

endif;

else:

?>

<div class=mensagem erro>


todos os campos.

</div>

<?php

&Eacute; necess&aacute;rio preencher

endif;

endif;

?>

<form name=cadastro id=cadastro method=post>

<label for=login>Login:</label>


/>

<input type=text name=login id=login tabindex=1

<label for=senha>Senha:</label>


<input type=password name=senha id=senha
tabindex=2 />

439

linguagem_de_programacao_III.indb 439

04/02/11 11:15

Universidade do Sul de Santa Catarina


<input type=submit name=entrar id=entrar
value=Entrar tabindex=3 />

</form>

</body>

</html>
<<< arquivo logout.php >>>
<?php
//inicia a sesso
session_start();
//destroi a varivel
unset($_SESSION[administracao]);
//redireciona para o login
header(Location: ./login.php);
?>

<<< arquivo menu.php >>>


<div class=mensagem sucesso>
Bem vindo <strong><?php echo $_SESSION[administracao][usuario];
?></strong>! [<a href=./logout.php>Sair</a>]
</div>
<ul id=menu>
<li><a tabindex=51 href=cadastro.php title=Cadastro>Cadastro</
a></li>
<li><a tabindex=52 href=consulta.php title=Consulta>Consulta</
a></li>

<li><a tabindex=53 href=lista.php title=Lista>Lista</a></li>

</ul>

440

linguagem_de_programacao_III.indb 440

04/02/11 11:15

Linguagens de Programao III

<<< arquivo usurio.php >>>


<?php
include(./verificacao.php);
include(./cfg/config.php);
?>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN

http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>

<html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www.


w3.org/1999/xhtml>

<head>


<meta http-equiv=Content-Type content=text/
html;charset=ISO-8859-1/>

<title>Detalhes do Usu&aacute;rio</title>

<link href=./css/estilo.css type=text/css rel=stylesheet />

</head>

<body>

<?php

include(menu.php);

$id = $_GET[id];


$queryUsuario = mysql_query(SELECT * FROM usuario WHERE
codigo = .$id);

if(mysql_num_rows($queryUsuario) == 1):

$usuario = mysql_fetch_assoc($queryUsuario);

?>

<h1>Detalhes do Usu&aacute;rio</h1>

<table>

<tbody>

<tr>

<th>C&oacute;digo</th>


$usuario[codigo]; ?></td>

<td><?php echo

441

linguagem_de_programacao_III.indb 441

04/02/11 11:15

Universidade do Sul de Santa Catarina

</tr>

<tr>

<th>Nome</th>


$usuario[nome]; ?></td>

<td><?php echo

</tr>

<tr>

<th>Login</th>


?></td>

<td><?php echo $usuario[login];

</tbody>

</table>

<?php

</tr>

else:

?>

<div class=mensagem erro>

</div>

<?php

endif;

?>

Usu&aacute;rio n&atilde;o encontrado.

</body>

</html>
<<< arquivo verificacao.php >>>

442

linguagem_de_programacao_III.indb 442

04/02/11 11:15

Linguagens de Programao III

<?php
//inicia a sesso
session_start();
//verifica se uma varivel foi registrada
if(!isset($_SESSION[administracao])):
// caso no esteja redireciona para a pgina de login

header(Location: ./login.php);

// caso ocorra erro interrompe a construo da pgina

die();

endif;
?>

Unidade 5
1. Questo aberta.

Unidade 6
1.
Script para criar para criar o banco de dados

CREATE TABLE IF NOT EXISTS pessoa (


codigo int(11) NOT NULL AUTO_INCREMENT,
nome varchar(100) DEFAULT NULL,
cadastro datetime DEFAULT NULL,
PRIMARY KEY (codigo)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 ;

443

linguagem_de_programacao_III.indb 443

04/02/11 11:15

Universidade do Sul de Santa Catarina

A soluo foi desenvolvida e organizada em trs diretrios com um


arquivo cada. J o diretrio padro possui sete arquivos dispostos
como na imagem?

A folha de estilo CSS (opcional apenas melhoramento visual),


organizada dentro do diretrio css com o nome de estilo.css.

/* Tudo */
* { margin:0; padding:0; }

/* Tags */
html { background:#F4F4F4; text-align:center; }
body { font-size:10pt; font-family:Trebuchet MS; width:400px;
background:#FFFFFF; margin:0 auto; text-align:left; padding:10px; }
a { text-decoration:none; color:#336699; }
a:hover { text-decoration:underline; }

/* Mensagens */
.mensagem { margin-bottom:10px; padding:10px; }
.erro { background:#FFFFE0; border:1px solid #E6DB55; color:#333333; }
.sucesso { border:1px solid #568F0F; color:#333; background:#DFF1C0;}

/* Formulario */
form { text-align:left; display:table; width:100%; clear:both; }
label, input { display:block; padding:5px;}
input#nome { width:390px; }
input#consultar, input#cadastrar { float:right; }

/* Menu */

444

linguagem_de_programacao_III.indb 444

04/02/11 11:15

Linguagens de Programao III

#menu { border-bottom:1px dashed #CCC; padding-bottom:5px; }


#menu li { display:inline; width:100px; padding:10px; }

/* Tabelas */
table { border-collapse:collapse; width:100%; border:1px solid #B4D1DC;
border-bottom:3px solid #B4D1DC; }
table tr { background:#FFF; }
table th { background:#B4D1DC; border-bottom:3px solid #777; }
table td, table th { padding:5px; text-align:center; border:1px solid #ccc; }

/* Sugestoes */
#sugestoes { max-height:300px; overflow:scroll; text-align:left; margintop:-35px; z-index:1000; width:250px; background:#E7F3FF; border:1px
solid #DDD; display:none; }
#sugestoes ul li { list-style-type:none; line-height:25px; height:25px; }
#sugestoes ul li a { padding-left:10px; line-height:25px; height:25px;
width:250px; }
#sugestoes ul li:hover, #sugestoes ul li a:hover { background:#DDD;
color:#777; }
Script em JavaScript com o nome de micox.js dentro do diretrio js.

function ajaxGet(url,elemento_retorno,exibe_carregando){
/******
* ajaxGet - Coloca o retorno de uma url em um elemento qualquer
* Use vontade, mas coloque meu nome nos crditos. Dvidas, me
mande um email.
* A funo grande, coloque-a em um arquivo .js separado.
* Verso: 1.2 - 20/04/2006
* Autor: Micox - Niron J.C.G - micoxjcg@yahoo.com.br - elmicox.
blogspot.com
* Parametros:
* url: string; elemento_retorno: object||string; exibe_carregando:boolean

445

linguagem_de_programacao_III.indb 445

04/02/11 11:15

Universidade do Sul de Santa Catarina

* - Se elemento_retorno for um elemento html (inclusive inputs e


selects),
* exibe o retorno no innerHTML / value / options do elemento
* - Se elemento_retorno for o nome de uma variavel
* (o nome da varivel deve ser declarado por string, pois ser feito um
eval)
* a funo ir atribuir o retorno varivel ao receber a url.
*******/
var ajax1 = pegaAjax();
if(ajax1){
url = antiCacheRand(url)
ajax1.onreadystatechange = ajaxOnReady
ajax1.open(GET, url ,true);
//ajax1.setRequestHeader(Content-Type, text/html; charset=iso8859-1);//application/x-www-form-urlencoded);
ajax1.setRequestHeader(Cache-Control, no-cache);
ajax1.setRequestHeader(Pragma, no-cache);
if(exibe_carregando){ put(Carregando ...) }
ajax1.send(null)
return true;
}else{
return false;
}
function ajaxOnReady(){
if (ajax1.readyState==4){
if(ajax1.status == 200){
var texto=ajax1.responseText;
if(texto.indexOf( )<0) texto=texto.replace(/\+/g, );
//texto=unescape(texto); //descomente esta linha se tiver usado o
urlencode no php ou asp
put(texto);
extraiScript(texto);

446

linguagem_de_programacao_III.indb 446

04/02/11 11:15

Linguagens de Programao III

}else{
if(exibe_carregando){put(Falha no carregamento. +
httpStatus(ajax1.status));}
}
ajax1 = null
}else if(exibe_carregando){//para mudar o status de cada carregando
put(Carregando ... )
}
}
function put(valor){ //coloca o valor na variavel/elemento de retorno
if((typeof(elemento_retorno)).toLowerCase()==string){ //se for o
nome da string
if(valor!=Falha no carregamento){
eval(elemento_retorno + = unescape( + escape(valor) + ))
}
}else if(elemento_retorno.tagName.toLowerCase()==input){
valor = escape(valor).replace(/\%0D\%0A/g,)
elemento_retorno.value = unescape(valor);
}else if(elemento_retorno.tagName.toLowerCase()==select){
select_innerHTML(elemento_retorno,valor)
}else if(elemento_retorno.tagName){
elemento_retorno.innerHTML = valor;
//alert(elemento_retorno.innerHTML)
}
}
function pegaAjax(){ //instancia um novo xmlhttprequest
//baseado na getXMLHttpObj que possui muitas cpias na net e eu
nao sei quem o autor original
if(typeof(XMLHttpRequest)!=undefined){return new
XMLHttpRequest();}
var axO=[Microsoft.XMLHTTP,Msxml2.XMLHTTP,Msxml2.
XMLHTTP.6.0,Msxml2.XMLHTTP.4.0,Msxml2.XMLHTTP.3.0];

447

linguagem_de_programacao_III.indb 447

04/02/11 11:15

Universidade do Sul de Santa Catarina

for(var i=0;i<axO.length;i++){ try{ return new ActiveXObject(axO[i]);}


catch(e){} }
return null;
}
function httpStatus(stat){ //retorna o texto do erro http
switch(stat){
case 0: return Erro desconhecido de javascript;
case 400: return 400: Solicitao incompreensvel; break;
case 403: case 404: return 404: No foi encontrada a URL
solicitada; break;
case 405: return 405: O servidor no suporta o mtodo solicitado;
break;
case 500: return 500: Erro desconhecido de natureza do servidor;
break;
case 503: return 503: Capacidade mxima do servidor alcanada;
break;
default: return Erro + stat + . Mais informaes em http://www.
w3.org/Protocols/rfc2616/rfc2616-sec10.html; break;
}
}
function antiCacheRand(aurl){
var dt = new Date();
if(aurl.indexOf(?)>=0){// j tem parametros
return aurl + & + encodeURI(Math.random() + _ + dt.getTime());
}else{ return aurl + ? + encodeURI(Math.random() + _ +
dt.getTime());}
}
}
function select_innerHTML(objeto,innerHTML){
/******
* select_innerHTML - altera o innerHTML de um select independente se
FF ou IE
* Corrige o problema de no ser possvel usar o innerHTML no IE
corretamente

448

linguagem_de_programacao_III.indb 448

04/02/11 11:15

Linguagens de Programao III

* Veja o problema em: http://support.microsoft.com/default.


aspx?scid=kb;en-us;276228
* Use a vontade mas coloque meu nome nos crditos. Dvidas, me
mande um email.
* Verso: 1.0 - 06/04/2006
* Autor: Micox - Niron J.C.G - micoxjcg@yahoo.com.br - elmicox.
blogspot.com
* Parametros:
* objeto(tipo object): o select a ser alterado
* innerHTML(tipo string): o novo valor do innerHTML
*******/
objeto.innerHTML =
var selTemp = document.createElement(micoxselect)
var opt;
selTemp.id=micoxselect1
document.body.appendChild(selTemp)
selTemp = document.getElementById(micoxselect1)
selTemp.style.display=none
if(innerHTML.toLowerCase().indexOf(<option)<0){//se no option eu
converto
innerHTML = <option> + innerHTML + </option>
}
innerHTML = innerHTML.replace(/<option/g,<span).replace(/<\/
option/g,</span)
selTemp.innerHTML = innerHTML
for(var i=0;i<selTemp.childNodes.length;i++){
if(selTemp.childNodes[i].tagName){
opt = document.createElement(OPTION)
for(var j=0;j<selTemp.childNodes[i].attributes.length;j++){
opt.setAttributeNode(selTemp.childNodes[i].attributes[j].
cloneNode(true))
}

449

linguagem_de_programacao_III.indb 449

04/02/11 11:15

Universidade do Sul de Santa Catarina

opt.value = selTemp.childNodes[i].getAttribute(value)
opt.text = selTemp.childNodes[i].innerHTML
if(document.all){ //IEca
objeto.add(opt)
}else{
objeto.appendChild(opt)
}
}
}
document.body.removeChild(selTemp)
selTemp = null
}

function extraiScript(texto){
//Maravilhosa funo feita pelo SkyWalker.TO do imasters/forum
//http://forum.imasters.com.br/index.php?showtopic=165277&
// inicializa o inicio ><
var ini = 0;
// loop enquanto achar um script
while (ini!=-1){
// procura uma tag de script
ini = texto.indexOf(<script, ini);
// se encontrar
if (ini >=0){
// define o incio para depois do fechamento dessa tag
ini = texto.indexOf(>, ini) + 1;
// procura o final do script
var fim = texto.indexOf(</script>, ini);
// extrai apenas o script
codigo = texto.substring(ini,fim);

450

linguagem_de_programacao_III.indb 450

04/02/11 11:15

Linguagens de Programao III

// executa o script
//eval(codigo);
/**********************
* Alterado por Micox - micoxjcg@yahoo.com.br
* Alterei pois com o eval no executava funes.
***********************/
novo = document.createElement(script)
novo.text = codigo;
document.body.appendChild(novo);
}
}
Fonte: <www.elmicox.blogspot.com>.
Scripts PHP
Arquivo de configurao config.php no diretrio cfg.
<?php
mysql_connect(localhost, root, );
mysql_select_db(exe_lessa);
?>
Arquivo index.php no diretrio padro.
<html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www.
w3.org/1999/xhtml>

<head>

<title>Pessoas</title>

<link href=./css/estilo.css type=text/css rel=stylesheet />

</head>

<body>

<?php

include(menu.php);

451

linguagem_de_programacao_III.indb 451

04/02/11 11:15

Universidade do Sul de Santa Catarina

?>

</body>

</html>
Arquivo menu.php no diretrio padro.
<ul id=menu>
<li><a tabindex=3 href=cadastro.php title=Cadastro>Cadastro</
a></li>
<li><a tabindex=4 href=consulta.php title=Consulta>Consulta</
a></li>

<li><a tabindex=5 href=lista.php title=Lista>Lista</a></li>

</ul>
Arquivo cadastro.php no diretrio padro.
<?php
include(./cfg/config.php);
?>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN

http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>

<html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www.


w3.org/1999/xhtml>

<head>


<meta http-equiv=Content-Type content=text/
html;charset=ISO-8859-1/>

<title>Cadastro de Pessoas</title>

<link href=./css/estilo.css type=text/css rel=stylesheet />

</head>

<body>

<?php

include(menu.php);

?>

<h1>Cadastro de Pessoas</h1>

452

linguagem_de_programacao_III.indb 452

04/02/11 11:15

Linguagens de Programao III

<?php

if(!empty($_POST)):

if(!empty($_POST[nome])):

$nome = $_POST[nome];


$pessoas = mysql_query(SELECT * FROM pessoa
WHERE UPPER(nome) = .strtoupper($nome).);

if(mysql_num_rows($pessoas) >= 1):

?>

<div class=mensagem erro>


este nome cadastrada.

</div>

<?php

J&aacute; existe uma pessoa com


elseif(mysql_query(INSERT INTO pessoa VALUES
(NULL, .$nome., SYSDATE()))):

?>

<div class=mensagem sucesso>

</div>

<?php

Pessoa Cadastrada com sucesso.

else:

?>

<div class=mensagem erro>

</div>

<?php

Erro ao cadastrar pessoa.

endif;

else:

?>

<div class=mensagem erro>


cadastrar a pessoa.

Voc&ecirc; precisa digitar um nome para

453

linguagem_de_programacao_III.indb 453

04/02/11 11:15

Universidade do Sul de Santa Catarina

</div>

<?php

endif;

endif;

?>

<form name=cadastro id=cadastro method=post>

<label for=nome>Nome:</label>


<input type=text name=nome id=nome
tabindex=1 />

<input type=submit name=cadastrar id=cadastrar
value=Cadastrar tabindex=2 />

</form>

</body>

</html>
Arquivo consulta.php no diretrio padro.
<?php
session_start();
echo $_SESSION[teste];
unset($_SESSION[teste]);
include(./cfg/config.php);
?>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN

http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>

<html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www.


w3.org/1999/xhtml>

<head>


<meta http-equiv=Content-Type content=text/
html;charset=UTF-8/>

<title>Consulta de Pessoas</title>

<link href=./css/estilo.css type=text/css rel=stylesheet />

454

linguagem_de_programacao_III.indb 454

04/02/11 11:15

Linguagens de Programao III

<script src=./js/micox.js type=text/javascript></script>

<script type=text/javascript>

function exibeSugestoes() {


display=none;

document.getElementById(pessoa).style.

nome = document.getElementById(nome).value;


ajaxGet(sugestoes.php?nome=+nome,
document.getElementById(sugestoes), true);

display=block;

document.getElementById(sugestoes).style.

function preenche(nome) {


display=none;

document.getElementById(sugestoes).style.


display=none;

document.getElementById(pessoa).style.


document.getElementById(nome).value = nome;

}

function exibePessoa(nome)


display=none;

document.getElementById(sugestoes).style.

nome = document.getElementById(nome).value;


ajaxGet(pessoa.php?nome=+nome, document.
getElementById(pessoa), true);

display=block;

document.getElementById(pessoa).style.

return false;

</script>

</head>

<body>

<?php

include(menu.php);

455

linguagem_de_programacao_III.indb 455

04/02/11 11:15

Universidade do Sul de Santa Catarina

?>

<h1>Consulta de Pessoas</h1>


<form name=consulta id=consulta
onSubmit=javascript:return exibePessoa();>

<label for=nome>Nome:</label>


<input tabindex=1 type=text onkeyup=javascript:ex
ibeSugestoes(); name=nome<?php echo rand(1,10000); ?> id=nome
/>

<input tabindex=2 id=consultar name=consultar
type=submit value=Consultar />

</form>

<div id=sugestoes>

</div>

<div id=pessoa>

</div>

</body>

</html>
Arquivo lista.php no diretrio padro.
<?php
include(./cfg/config.php);
?>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN

http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>

<html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www.


w3.org/1999/xhtml>

<head>


<meta http-equiv=Content-Type content=text/
html;charset=ISO-8859-1/>

<title>Lista de Pessoas</title>

<link href=./css/estilo.css type=text/css rel=stylesheet />

456

linguagem_de_programacao_III.indb 456

04/02/11 11:15

Linguagens de Programao III

</head>

<body>

<?php

include(menu.php);

?>

<h1>Lista de Pessoas</h1>

<table>

<thead>

<tr>

<th>C&oacute;digo</th>

<th>Nome</th>

<th>Data de Cadastro</th>

</tr>

</thead>

<tbody>

<?php


pessoa);

$pessoas = mysql_query(SELECT * FROM

while($pessoa = mysql_fetch_assoc($pessoas)):

?>

<tr>


$pessoa[codigo]; ?></td>

<td><?php echo


?></td>

<td><?php echo $pessoa[nome];


$pessoa[cadastro]; ?></td>

<td><?php echo

</tr>

<?php

endwhile;

?>

</tbody>

457

linguagem_de_programacao_III.indb 457

04/02/11 11:15

Universidade do Sul de Santa Catarina

</table>

</body>

</html>
Arquivo pessoa.php no diretrio padro.
<?php
header(Content-Type: text/html; charset=ISO-8859-1,true);
include(./cfg/config.php);
$nome = $_GET[nome];
$pessoas = mysql_query(SELECT * FROM pessoa WHERE nome LIKE
%.$nome.%);
if(mysql_num_rows($pessoas) == 0):

?>

<div class=mensagem erro>

Nenhuma pessoa encontrada.

</div>

<?php

elseif(mysql_num_rows($pessoas) == 1):

$pessoa = mysql_fetch_assoc($pessoas);

?>

<h1><?php echo $pessoa[nome]; ?></h1>

<table>

<thead>

<tr>

<th>C&oacute;digo</th>

<th>Nome</th>

<th>Data de Cadastro</th>

</tr>

</thead>

<tbody>

<tr>

458

linguagem_de_programacao_III.indb 458

04/02/11 11:15

Linguagens de Programao III

<td><?php echo $pessoa[codigo]; ?></td>

<td><?php echo $pessoa[nome]; ?></td>

<td><?php echo $pessoa[cadastro]; ?></td>

</tr>

</tbody>

</table>

<?php

else:

?>

<div class=mensagem erro>


Foram encontradas v&aacute;rias pessoas. Por favor, refine sua
busca.

</div>

<?php

endif;
?>

Arquivo sugestoes.php no diretrio padro.


<?php
header(Content-Type: text/html; charset=ISO-8859-1,true);
include(./cfg/config.php);
$nome = $_GET[nome];
$nomes = mysql_query(SELECT * FROM pessoa WHERE nome LIKE
%.$nome.%);
if(mysql_num_rows($nomes) >= 1):

?>

<ul>

<?php

while($nome = mysql_fetch_assoc($nomes)):

?>

459

linguagem_de_programacao_III.indb 459

04/02/11 11:15

Universidade do Sul de Santa Catarina


<li><a href=#pessoa-<?php echo $nome[codigo];?>
onclick=javascript:preenche(<?php echo $nome[nome];?>);><?php
echo $nome[nome];?></a></li>

<?php

endwhile;

?>

</ul>

<?php

else:

?>

Nenhuma pessoa encontrada.

<?php

endif;
?>

460

linguagem_de_programacao_III.indb 460

04/02/11 11:15

Biblioteca Virtual
Veja a seguir os servios oferecidos pela Biblioteca Virtual aos
alunos a distncia:

Pesquisa a publicaes online


www.unisul.br/textocompleto

Acesso a bases de dados assinadas


www. unisul.br/bdassinadas

Acesso a bases de dados gratuitas selecionadas


www.unisul.br/bdgratuitas

Acesso a jornais e revistas on-line


www. unisul.br/periodicos

Emprstimo de livros
www. unisul.br/emprestimos

Escaneamento de parte de obra*

Acesse a pgina da Biblioteca Virtual da Unisul, disponvel no EVA


e explore seus recursos digitais.
Qualquer dvida escreva para bv@unisul.br

* Se voc optar por escaneamento de parte do livro, ser lhe enviado o


sumrio da obra para que voc possa escolher quais captulos deseja solicitar
a reproduo. Lembrando que para no ferir a Lei dos direitos autorais (Lei
9610/98) pode-se reproduzir at 10% do total de pginas do livro.

linguagem_de_programacao_III.indb 461

04/02/11 11:15

linguagem_de_programacao_III.indb 462

04/02/11 11:15

linguagens_de_programacao_III.pdf

02/02/11

16:53