Como Se Tornar Um Webmaster

Primeiramente queremos agradecer a Deus pois sem ele nada disto seria possvel.
Em segundo lugar a todos os alunos e ex-alunos da Top Training Center, pois vem deles nossa coragem para investir neste livro. No poderamos deixar de agradecer ao nosso editor Srgio Martins que nos deu tanto apoio desde o comeo e a Channtropique Phonna Salgado pela reviso tcnica e dedicao durante um perodo conturbado da chegada de um novo herdeiro. minha esposa Mria pelos finais de s emana nos quais precisei me dedicar ao livro. A meus pais e irmos. A Ktia e Lourival pela ajuda nos captulos referente a Servidores de Redes e a linguagem XML. Por fim, gostaria de agradecer a Top Training Center por todo o apoio durante estes quatro anos em que sou seu funcionrio, uma empresa dedicada no objetivo de levar a seus alunos o melhor em treinamento de Informtica. Felizmente fao parte desta familia.
Agnaldo Lopes Martins

Organizador
Tudo possvel quando as vontades se unem em torno de um ideal comum. No incio da dcada de 90, quando comeamos a viabilizar a criao da Top Training Center, percebemos que teramos de competir com empresas que gozavam de grande prestgio na rea de treinamento em informtica. Lembro-me muito bem da minha amiga Rijane Montalverne, brilhante profissional da rea de treinamento e desenvolvimento de pessoas, falando: Gilson, se voc quer ter sucesso nesse mercado, encontre um diferencial. Pois bem, e qual seria esse diferencial? At ento, curso de informtica era sinnimo de turmas, carga horria e contedo programtico fixos. Onde poderamos fazer alguma diferena? A grande mudana que estava acontecendo naquela poca era o surgimento de turmas com apenas um aluno por micro. Na realidade, a mudana no foi metodolgica e sim conseqncia da reduo do preo dos microcomputadores. As aulas continuavam a ser em turmas e com carga horria fixa. Aprendendo ou no, o aluno era dispensado to logo o tempo estabelecido em contrato fosse atingido. Como conseqncia desse mtodo ainda hoje utilizado, quantas pessoas no aprenderam a usar um microcomputador pelo simples fato de no lhes ter sido concedido o tempo necessrio para adaptao ao uso de um mouse? Quantas outras se frustraram, aps participarem de cursos avanados, vtimas do mesmo modelo de treinamento baseado em turmas e carga horria fixa. Eu mesmo, por mais de uma vez, senti essa desagradvel sensao. Faltava uma evoluo no ensino da informtica: milhes de pessoas precisariam ser treinadas no uso da mquina, exigindo-lhes habilidades que, at ento, sequer existiam.
VIII
Como se tornar um WEBMASTER
Privilegiados por termos observado que a grande mudana no ensino de informtica teria que atender a uma nica exigncia, o respeito individualidade do aluno, abolimos as turmas e flexibilizamos os horrios dos nossos cursos. Como no dispnhamos na poca de material de leitura que nos ajudasse na consolidao desse novo mtodo, empreendemos uma pesquisa intensa em sala de aula. Para tal, contamos com o apoio dos nossos milhares de alunos e dos colaboradores diretos. No foram poucos os que contriburam tanto na metodologia quanto na elaborao do material didtico que, atualmente, supera vinte e cinco cursos entre bsicos e avanados. A nossa grande misso, nestes oito anos de existncia da Top Training Center, tem sido aperfeioar o mtodo que respeita a individualidade do aluno, permitindo que ele absorva o conhecimento sem se preocupar com a rigidez imposta por uma turma ou carga horria prestabelecidas. O sucesso tem sido to grande, que conseguimos nos colocar entre as mais conceituadas empresas de treinamento em informtica de Belo Horizonte, cidade bero dessa nova metodologia. O mtodo, entretanto, no pra de evoluir. Agora mesmo, uma nova transformao se faz presente: estamos consolidando o MINI Mapeamento Individual de Necessidades de Informtica e o PACI Programa Avanado de Capacitao em Informtica. Com esses dois novos produtos estamos esperanosos de assumir, mais uma vez, a posio de vanguarda no ensino de informtica. Deixamos para trs o conceito de empresa de treinamento em informtica, para nos tornarmos um centro de capacitao de pessoas. Maiores detalhes sobre essa nova etapa voc encontra em nosso site www.toptc.com.br ou mediante solicitao atravs do e-mail: toptc@toptc.com.br. Quanto ao presente livro, smbolo maior da nossa gratido a todos aqueles que nesses oito anos confiaram em nosso trabalho, foi criado por ns para suprir a carncia at ento observada de se encontrar, em um nico volume, praticamente tudo o que se precisa para a criao de um site profissional. O contedo foi organizado por Agnaldo Lopes, com base no nosso material de sala de aula, que, com grande competncia e humildade, como lhe peculiar, foi capaz de organiz-lo, de forma a atender no s o estudante quanto ao webmaster profissional. A ele, os nossos sinceros agradecimentos por compartilhar conosco, mais uma vez, um pouco do que sabe. Lembremos, porm, que: indivduo e tecnologia caminham em velocidades diferentes. Quando um chega; a outra, fugaz, j se foi.
Gilson Brando Cheble

Diretor executivo da Top Training Center
Com a tecnologia disponvel hoje, desenvolver um site ficou to fcil que at uma criana capaz de coloc-lo no ar de um dia para o outro. A afirmativa acima verdadeira, mas se estivermos falando de um site profissional, no s com a tecnologia que devemos nos preocupar. Diversos fatores precisam ser considerados para que se consiga obter resultado. Neste captulo, pretendo deixar os aspectos tecnolgicos de lado e abordar a questo da construo de sites sob a tica comportamental. Primeiramente a sua, enquanto Webmaster e em seguida a do seu cliente que, em ltima instncia, deseja um site para vender o seu produto ou servio, ou simplesmente divulgar o seu negcio.
Vendendo a si mesmo
Conceber, projetar, implementar e manter um site exige conhecimentos que transcendem os aspectos tcnicos. Daqui para a frente toda e qualquer empresa, entidade, organizao, profissional liberal, enfim, a sociedade como um todo necessitaro estar presentes na Rede. Definir comportamentos sob a tica de quem cria um site e de quem encomenda tornou-se de fundamental importncia. Comecemos ento por voc. Primeiramente, voc tem que vender a si mesmo e depois o seu servio. Como trabalhar a sua imagem e como vender um servio em que voc ainda no tem experincia? Acompanhe as dicas a seguir:
Fortalea seu currculo

V fundo em tudo que voc estudar e se fizer um curso, saiba escolher. Verifique se a empresa tem credibilidade no mercado, conhea os seus profissionais, o ma1
terial didtico, procure informaes com ex-alunos e acima de tudo se lhe daro suporte aps o curso esclarecendo dvidas que certamente surgiro. No se deixe impressionar pelo preo. Lembre-se de que treinamento investimento e como tal deve ser tratado. Um curso muito barato nem sempre lhe trar o retorno esperado do investimento que voc fez. Da mesma forma, um curso caro no sinnimo de sucesso garantido. Aja como se voc estivesse investindo um capital e como tal avalie as reais possibilidades de retorno. Analise o contedo do curso, acompanhe uma aula, converse com as pessoas que iro lhe transmitir os conhecimentos, faa contato com quem j fez o curso e, de forma isenta, avalie a sua opinio. J presenciei muita frustrao de pessoas que se matricularam em cursos baratos, mas com contedo ridculo e outros caros, com contedo imenso e muito tcnico, porm incompatveis com a carga horria e nvel de conhecimento do aluno que, ao invs de ajudar a quem estava iniciando, frustraram e encerraram prematuramente uma carreira. Ao se matricular em um curso mal estruturado, no me preocupo se voc ir perder dinheiro ou tempo. Via de regra, o investimento em cursos de informtica no to alto assim que venha a desestabilizar financeiramente algum. O mximo que pode acontecer voc ficar com uma desagradvel sensao de ver o dinheiro que voc suou tanto para ganhar ser desperdiado. No me preocupo tambm se voc desperdiou tempo porque, no mnimo, voc adquiriu experincia de como no se deve fazer um curso. O que me preocupa realmente o que pode acontecer com o seu estmulo. Ao se matricular em um curso, so as suas esperanas que esto em jogo e, se algo der errado, existe uma grande chance de voc abandonar uma idia promissora. Portanto, pesquise cuidadosamente antes de se matricular. Com certeza voc saber distinguir os bons estabelecimentos de ensino daqueles que tm um comportamento meramente aventureiro ou mercantilista. O fato de voc fazer um curso consistente na rea de desenvolvimento no lhe garante conhecimento eterno. Os cursos de atualizao devem estar em seus planos. Estes cursos, alm de mant-lo atualizado, poupam-lhe tempo. No h dvida de que utilizar um computador, a cada dia que passa, torna-se mais fcil, porm esta facilidade tem estimulado os desenvolvedores de aplicativos a incorporar cada vez mais recursos. Um curso de quinze a vinte horas, muitas vezes realizado em menos de uma semana, ir poupar-lhe muitas horas de estudo tentando desvendar recursos que, com uma simples explicao em sala de aula, podem ser repassados a voc. Lembre-se de que tempo um dos bens mais escassos da nova era e todos os recursos devem ser investidos por voc de forma que o m ximo do seu tempo dedicado ao trabalho seja investido no desenvolvimento dos sites.
Alm dos cursos, adquira o hbito de leitura

Manter-se atualizado o mnimo que qualquer profissional precisa para garantir o seu aperfeioamento. O mercado rico em boas publicaes sobre o assunto e
Alm da Tecnologia
na prpria rede voc ser capaz de encontrar muito material de leitura. Diversifique o seu conhecimento. No se prenda s a leitura tcnica. Uma cultura geral necessria para quem se prope a desenvolver sites. Lembre-se tambm de que a concorrncia, em qualquer segmento de negcio, cada vez mais feroz e a batalha se ganha com o conhecimento que se tem. Manter-se atualizado de fundamental importncia, pois o conhecimento nessa rea torna-se obsoleto muito rapidamente.
Mantenha o foco
Se voc est determinado a ser um Webmaster, no pense que acontecer da noite para o dia. Muito trabalho ser exigido de voc. Mas isso no diferente de qualquer profisso. Voc j viu engenheiro, mdico, carpinteiro ou serralheiro de sucesso, sem esforo? Manter o foco significa concentrar todos os seus esforos naquilo que voc estabeleceu como meta. O mercado para Webmaster est a, sua disposio e um dos mais promissores e generosos que existem. Voc tanto pode ser o responsvel por um site de um profissional liberal como de uma grande empresa. So milhes de clientes prontos para serem atendidos. Os limites, quem estabelecer ser voc. Se voc j um profissional de uma outra rea, concilie as duas atividades, pelo menos durante algum tempo. Desenvolva os sites em horrios vagos, aps o expediente e durante os finais de semana. Seja tico, no v desenvolver sites durante a sua jornada normal de trabalho, a menos que o site seja para incrementar o seu prprio negcio, o que, por sinal, ser muito comum daqui para frente: o jornalista que mantm o seu prprio site, sem deixar de ser jornalista, o mesmo acontecendo com advogados, mdicos, engenheiros, dentistas, compradores, vendedores, psiclogos e todo tipo de profisso que se possa imaginar.
Crie um crculo de amizades em torno da sua profisso

A Internet bastante democrtica neste aspecto. Ningum sabe tudo e quem sabe adora compartilhar o seu conhecimento com quem p ossui afinidade com seu saber. So inmeros os fruns de discusso tcnica, cheios de gente querendo trocar informao. Por mais que se esforce, voc no ser capaz de saber tudo e atravs desses contatos voc enriquecer o seu conhecimento sem gastar muito, s trocando informao. Neste aspecto, seja generoso, compartilhe o mximo que voc sabe com os outros e descubra que quanto maior for essa sua generosidade maior ser o seu conhecimento. s conferir.
Zele pela sua aparncia

fato que a maioria dos gnios em informtica so meio desleixados. Se voc se enquadra na categoria dos gnios, OK, mantenha o desleixo, porm, se voc estiver na categoria dos normais, cuide do seu c abelo, da sua roupa e de tudo o
mais que contribua de forma positiva na imagem que voc vai passar. No mundo dos negcios isso ainda influencia na deciso. E tem mais, ningum ir lhe dizer que no fechou o contrato com voc porque voc apresentava uma aparncia desleixada. Mil e uma desculpas sero dadas sem que voc desconfie o motivo real. Agora, no confunda desleixo com simplicidade. Voc pode estar vestido com roupas finas, porm a sua aparncia estar denotando um certo desleixo. Por outro lado, voc pode estar trajando roupas simples e, no entanto, refletindo elegncia no seu visual.
Seja disciplinado
Adquira o hbito de dividir o seu trabalho em trs partes: incio, meio e fim. So comuns os casos de pessoas que iniciam um trabalho e deixam pela metade. Ou comeam pelo meio, sem considerar aspectos iniciais relevantes para o sucesso do site.
Documente tudo que puder

Principalmente se o projeto for muito grande. Depois de algum tempo, tanto a sua memria quanto a do seu cliente tendem a falhar e, para evitar conflitos, documente as etapas e tudo o que foi acertado. Com isso, voc evita usar s a memria para saber se algo que no deu certo foi feito por interferncia sua ou do seu cliente.
Controle os seus impulsos

Em especial quanto ao investimento que ser necessrio para estruturar-se profissionalmente. Se voc est pensando em se estabelecer por conta prpria, cuidado para no comear a investir em coisas inicialmente desnecessrias, como aluguel de sala, constituio de empresa, material de papelaria e coisas do gnero. Para comear, at mesmo um microcomputador emprestado basta. Se voc est pensando em comprar um computador, no fique fascinado por aquele modelo de ltima gerao, a menos que voc tenha como pag-lo sem se endividar. Sempre oriento os meus clientes que o melhor computador aquele que se pode pagar. Essa regra infalvel. Crie uma reserva de capital para os momentos difceis, investimento em hardware, software e em voc. Lembre-se de que tanto os equipamentos quanto os aplicativos que voc usa iro se tornar obsoletos. Voc ter que investir em material de leitura e cursos de aperfeioamento e, como todo negcio, existem meses que so melhores do que outros em volume de servio. Portanto, de toda receita que voc obtiver, separe uma parte para reserva. Controle as suas despesas. Muito cuidado com dvidas de mdio e longo prazo. Se tiver que se endividar, d preferncia por dvidas de curto prazo e que voc tenha
Alm da Tecnologia
previso de caixa para pagar. Cuidado com essas ofertas de capital com carncia para pagamento. O pequeno empresrio muito suscetvel s variaes do mercado e qualquer turbulncia capaz de inviabilizar a sua atividade.
Respeite o direito propriedade intelectual de quem criou os softwares

Diga no pirataria. Penso que os fabricantes que so os principais responsveis por ela, por praticarem preos de softwares exageradamente altos para a realidade brasileira. Se tivessem uma poltica de preos razovel, haveria um grande desestmulo a essa prtica. Embora eles no faam a parte deles, faa a sua. Mantenha sempre os seus softwares l gais. No deixe, entretanto, de se indignar. Sempre e que possvel, manifeste a sua opinio a respeito.
Conhecendo o cliente
Endereo, pessoas responsveis, produtos e servios, principais concorrentes, comportamento do mercado, situao na Internet, etc. Evite o desconforto de, no momento de oferecer o seu trabalho, perguntar o que a empresa produz. Seja prativo. Ao abordar uma empresa, v com uma proposta de trabalho semipronta. Faa um breve relato sobre a empresa, o mercado, os produtos ou servios, seus concorrentes, possibilidade de atuao na Internet. Demonstre interesse, isso far diferena.
Avalie os sites j existentes

Explore isso na primeira reunio que tiver com o cliente. Se a grande maioria dos sites for ruim, mostre-lhe que ele poder se destacar. Se os sites forem bons, mostre-lhe o quanto ele est ficando para trs.
Antes de fornecer qualquer preo, elabore um projeto

O projeto servir no s para que voc dimensione o tamanho do site, dando-lhe condio de fornecer um preo justo, como passar ao seu cliente segurana no seu trabalho. Este projeto deve ser exaustivamente discutido com o seu cliente. No fornea preo ou prazo sem que ele tenha aprovado o projeto. Por outro lado, cuidado para no ser usado. Com um projeto bem elaborado em mos, construir um site fica muito fcil. O perodo de elaborao conjunta do projeto deve servir de motivo para que a execuo do site seja com voc e no com o seu concorrente. No crie falsas expectativas para seu cliente. Prometer-lhe que, com u site de m comrcio eletrnico as suas vendas iro aumentar, isso, via de regra, se no forem implementadas medidas adicionais, uma grande mentira.
Seja pontual tanto em reunies que forem marcadas quanto em prazos combinados. Lembre-se de que um cliente deve ser para a vida toda e no incomum perd-lo por falta de pontualidade.
Comece por criar o seu prprio site

Ele ser o seu principal carto de visita. No se esquea de mant-lo atualizado. Pior do que um site mal feito um site desatualizado. Seja exageradamente crtico e, se possvel, conte com a ajuda de amigos para avaliar no s o design quanto o contedo e a funcionalidade do mesmo.
Especialize-se
Identifique um mercado em que voc pretenda atuar. Por exemplo: jornalismo, recursos humanos, medicina, odontologia, advocacia, engenharia, contabilidade, lojas de ferramentas. Esforce-se por tentar conseguir mais de um cliente em um desses ramos de negcio. Isto transmitir segurana a seu cliente alm de permitir que voc se torne um especialista.
Identifique os melhores sites do mercado

Visite-os e conclua porque so os melhores. Observe a distribuio dos frames, os menus, as combinaes de cores, tamanho de fontes, figuras. Faa uma cpia para servir de modelo. Na Internet, a mxima nada se cria tudo se copia bastante vlida. Na minha opinio, pessoas que realmente criam na Internet so poucas. A maioria, no fundo, copia a idia de outro. Eu no vejo nada de mal nisso, principalmente se quem estiver copiando for um iniciante. Identifique tambm os piores sites e tenha conscincia do porqu so os piores. Eles sero teis a voc ajudando a definir as principais regras de como no se deve fazer um site.
Crie no seu site um portflio dos servios que voc j realizou

Mas e se voc est comeando, colocar o qu no site? Se voc ainda no tem nenhum site para apresentar, j est perdendo tempo. Corra atrs. Crie, pelo menos quatro sites, nem que sejam de graa. Voc tem que ter algo para apresentar. O que no falta cliente. s pesquisar em catlogo telefnico, nos classificados de jornais, comerciantes do bairro onde voc mora, clubes, escolas, amigos, parentes, amigos dos amigos, enfim, s uma questo de correr atrs. Mas, se mesmo depois de correr atrs voc no arranjou nenhum cliente, faa o seguinte. Lembra daquela dica que eu dei sobre identificar os piores sites? Pois bem, refaa alguns desses sites e apresente para os proprietrios. Provavelmente um deles ir lhe contratar. Se mesmo assim voc no conseguiu nenhum cli-
Alm da Tecnologia
ente, ento um parceiro bom de venda lhe ser muito til. possvel que voc tenha habilidade para d esenvolver sites, mas nenhuma para vendas. Isso bem normal.
Nos sites que voc criar, tome todo o cuidado com o contedo
No objetivo do presente livro tratar do contedo, porm no existe nada mais terrvel do que um site com um portugus de baixo nvel. Se voc no domina o idioma, trate de arrumar um parceiro que domine. Voc observou que em pouco tempo j falei de dois parceiros? Parceiro de vendas e de c ontedo. V se acostumando com isso. Os bons profissionais da Internet trabalham em parceria. A Rede que em princpio parece ser de computadores, na realidade de gente. Por trs de cada computador conectado na Internet tem, no mnimo, uma pessoa e olha que so milhes de computadores na Rede. Se voc for habilidoso em alguma coisa, certamente far parte de uma rede restrita de profissionais que desenvolvem sites no mundo inteiro. Por falar no mundo inteiro, trate de desenvolver o seu ingls e sem deixar de lado o espanhol. Internet sem ingls fica muito limitada. O consolo que voc no precisar tanto de fluncia verbal nem de um ouvido muito apurado. Se souber ler e escrever j ajudar bastante.
Esquea da carteira de trabalho

Se nas demais reas est c ada dia mais difcil o empresrio manter pessoas na empresa com carteira assinada, na Internet nem se fala. Lembre-se de que as empresas so cada vez mais virtuais. Sem escritrios, gerncias, subordinao e coisas desse tipo. Eu sei que muito difcil para voc, leitor, ouvir isso. A maioria das pessoas que comprou esse livro o fez na esperana de se tornar um Webmaster e, em seguida, arrumar um emprego bem seguro. S que no estou aqui para iludir voc. Uma nova ordem mundial se estabeleceu e o Brasil no tem como ficar fora dela. Haver abundncia de trabalho e escassez de emprego. Na Internet tudo surge to rpido quanto desaparece. assim que as coisas acontecem. Trabalhar para um cliente localizado a milhares de quilmetros bem natural. Tratase de um mundo virtual e sem fronteiras. Mas se voc da turma que pretende arranjar um emprego, no esquea de elaborar um currculo bem feito. Muita gente j perdeu boas oportunidades por falha na apresentao do currculo. Se voc no sabe elaborar um, consiga algum para ajudar. Outra dica a prpria Rede. Existem diversos sites onde voc pode se cadastrar oferecendo os seus servios.
No abandone o seu cliente

H uma tendncia muito grande de, uma vez realizado o servio, esquecer o cliente e partir em busca de outro. A falta de assistncia, alm de deixar o caminho aberto para o seu concorrente, trar prejuzo para voc mesmo. O site vai ficando desatualizado, voc no poder indic-lo como referncia, alm de perder a oportunidade de ter uma receita mensal fixa para mant-lo. Embora seja do seu cliente, trate o site como seu. Nunca o abandone. Pense nele como se fosse seu filho.
Esforce-se por criar e manter uma carteira de clientes

No fique como um louco correndo atrs de novos clientes enquanto abandona os que voc j conquistou. Estudos j provaram que manter um cliente muito mais barato do que conquistar um novo e pior do que isso saber que um cliente seu foi conquistado por outro no pela competncia dele, mas porque voc no se esforou para mant-lo.
Desenvolvimento sob a tica do cliente

Vamos falar agora sobre o desenvolvimento do site sob a tica do seu cliente. Como j frisamos anteriormente, Internet ainda no algo que esteja muito claro na cabea da maioria dos empresrios. Alguns tm um site simplesmente por ter, outros, mais ousados, devido esperana de que vo aumentar as suas vendas. Saber orientar o seu cliente fundamental. Se ele for mal sucedido possivelmente voc estar perdendo um cliente alm de ser atribuda a voc parte do insucesso dele. Lembre-se de que se ele o est contratando porque acredita que voc capaz de orient-lo da melhor forma possvel. A nossa abordagem ser para pessoas que esto comeando e que, de um modo geral, tero acesso a oportunidades que surgiro em pequenos negcios. A maioria dos empresrios no tem ainda a real dimenso de onde a Internet est e onde ir chegar. Via de regra, um site no tratado como algo que deve estar inserido no planejamento estratgico da empresa: muitas tm um site porque, hoje em dia todo mundo tem que ter. Quebre esse paradigma. O seu cliente deve estar convencido de que o site deve ser to importante quanto a abertura de uma filial, uma campanha publicitria, etc. Em um site ele poder organizar informaes que estaro disposio de clientes, fornecedores, colaboradores, vinte e quatro horas por dia. Um dos grandes mercados da Internet dos profissionais liberais e a grande maioria deles no se d conta do quanto um site seria importante para eles. Informa-
Alm da Tecnologia
es sobre o seu currculo, fotos do seu consultrio, principais trabalhos realizados, dicas para seus clientes so coisas que fazem a diferena e, se bem trabalhadas, no custam caro colocar no ar. Ao iniciar um trabalho, o seu cliente ter que definir se o projeto ser de uma Intranet, Extranet ou Internet. Intranet quando o site exclusivo para uso da empresa, onde ela ir veicular informaes que interessam s a seu pblico interno. Extranet uma Intranet que a empresa disponibiliza para clientes, fornecedores e demais parceiros de negcio que tero acesso mediante senha. A Internet j de amplitude maior. Qualquer um que esteja conectado Internet tem acesso. O fato de se ter acesso ao site, no significa que se ter acesso a todas as informaes disponveis. Para aquelas que forem de uso restrito, basta implementar senhas de acesso.
Site institucional ou de comrcio eletrnico

Institucional o site que s vai veicular informaes. No haver transao comercial. Estamos falando de mais de noventa por cento dos sites, portanto, um excelente negcio. Obrigatoriamente dever conter informaes histricas sobre a empresa, localizao, endereos e telefones, produtos ou servios comercializados, fotos, relao de clientes e demais informaes significativas. No caso de um site de comrcio eletrnico, alm dos aspectos institucionais, dever ser levado em considerao: a segurana da transao, os meios de pagamento, os direitos e deveres das partes, a logstica de estoque e entrega dos produtos. recomendvel que a empresa primeiro desenvolva o seu site institucional para s depois entrar na rea de comrcio eletrnico. Com isto ela estar priorizando mudanas culturais antes das estruturais. Ao passar a vender pela Internet, na realidade, tanto a estrutura interna quanto a externa estaro sendo alteradas. Esta recomendao vlida tambm para voc. Comece por desenvolver sites institucionais. No v assumir um compromisso com a construo de uma loja na Internet sem experincia. Se surgir uma oportunidade, consiga um parceiro experiente que, alm da transferncia da tecnologia, ser capaz de transmitir a voc a segurana necessria para dar os primeiros passos.
Desmistifique a venda de produtos ou servios pela Internet

No tudo que pode ser vendido pela Rede, principalmente no Brasil. importante lembrar que estamos num pas abaixo do equador. Acompanhe o meu raciocnio: imagine que voc mora l nos confins do mundo, tipo Finlndia, inverno, temperatura 20 abaixo de zero. Neste caso, uma Internet at que vai bem. Voc, de dentro do seu quarto, escolhe confortavelmente um livro da sua preferncia,
10
paga com o seu carto de crdito e aguarda a chegada. Pense agora em termos de Brasil, pas tropical, corpos morenos, sarados, temperatura sempre agradvel em qualquer estao do ano. Existe coisa mais gostosa do que sair de casa, entrar numa livraria, conversar com os vendedores, folhear os livros de sua preferncia, antes de voltar para casa aproveitar para tomar um chope ou um refrigerante e se depois de tudo isso voc se lembrar, ainda comprar o livro que voc estava procurando? No interprete com isso que sou de opinio que no Brasil a venda de livros pela Internet no dar certo. No bem assim. Dar certo se for possvel agregar valor venda, se houver diversificao de produtos e se for bem analisado onde o mercado consumidor estiver localizado. Muitas das compras atuais pela Internet so movidas pela curiosidade e outras pela vaidade de dizer que fez a compra pela Rede. Quando a compra estiver sendo realizada por necessidade, a a venda vai deslanchar. Antes de se iniciar o projeto de venda pela Internet deve-se considerar o potencial de venda dos produtos ou servios, onde est localizado o mercado comprador, quais os hbitos de consumo, se o cliente alvo consumidor final, revenda ou ambos. As respostas a essas perguntas que definiro o sucesso ou no do comrcio eletrnico. Voc compraria sapatos pela Internet? Se for para seu uso pessoal talvez no, mas se voc fosse dono de uma sapataria provavelmente sim. Voc compraria pizza pela Internet? Provavelmente no. to fcil pegar o telefone e ser atendido por uma pessoa do outro lado da linha. A Internet s ser concorrente do telefone na venda de pizza quando as pizzarias colocarem o atendimento automtico: para uma pizza calabresa disque 1, para uma pizza de frango disque 2... Em termos de Brasil, por enquanto, os mercados promissores de comrcio eletrnico ficaro restritos venda entre empresas, o chamado B2B, pelo fato de que as empresas tm mais facilidade de padronizao de produtos. No caso da venda direta ao consumidor, o chamado B2C, a divulgao de informaes sobre produtos e servios que permitam ao cliente conhecer previamente o que ser adquirido, como os pacotes tursticos, representam os principais mercados. E este mercado imenso. Voc j parou para pensar o quanto as empresas podem disponibilizar de informao na Rede sobre os produtos ou servios que vendem, a um custo quase insignificante se comparado a outros meios de divulgao? mais interessante usar as tecnologias disponveis no para efetivar a venda e sim para apoi-la, permitindo tanto a troca preliminar quanto posterior de informaes acerca da transao c omercial. O grande negcio ser usar a Internet para substituir ou complementar os canais de venda existentes, deixando a venda efetiva na mo do vendedor. Nenhum computador, por mais evoludo que seja, ter a capacidade de convencimento de um vendedor. Isto acontece com o telefone, com o jornal, com a televiso. Com a Internet no ser diferente. Um anncio no jornal desperta o interesse do comprador que usa o telefone para obter informaes. Se do outro lado da linha no houver um profissional preparado para fechar a venda, no ser
Alm da Tecnologia
11
o anncio ou o telefone que faro. Fique atento porque esse foi e sempre ser o grande n egcio da Rede: divulgar informao. A venda propriamente dita, deixe por conta de algum. Mas existem tantas histrias de empresas que esto vendendo no mundo inteiro utilizando a Internet. Voc pode estar fazendo este questionamento e temos que admitir que verdade. S que o propsito do presente livro, como j afirmamos anteriormente, no analisar esta realidade por ser muito distante de algum que ainda est buscando conhecimento de como se tornar um Webmaster. Esta realidade est restrita a estruturas gigantescas, que envolvem milhes de dlares e que funcionam no por elas e sim por uma mquina poderosa que est por trs. Para a realidade de quem est comeando, tenha uma viso globalizada da Internet, porm implemente solues locais. Vou contar-lhe uma histria: H uma marca de perfume italiano que muito me agrada. Certa vez procurei este perfume em lojas tradicionais e como o preo era alto, coloquei o desafio de compr-lo via Internet. Num primeiro momento pesquisei em sites nacionais e verifiquei que no valia a pena a compra porque o preo estava igual ao das lojas tradicionais. Pensei ento em adquiri-lo no exterior. As minhas pesquisas, a princpio, se deram em sites da Itlia, porm a compra no foi possvel por que no faziam vendas para o Brasil. Comecei ento a pesquisar sites nos Estados Unidos. Depois de muita pesquisa, cheguei a um site do jeito que eu queria: tinha o perfume, vendia por carto de crdito, entregava no Brasil e o mais importante, o preo era a metade do que eu havia visto no Brasil. Que sensao agradvel de vitria. S que eu no contava com uma coisa, o preo do frete. Ao incluir o frete, o perfume saa por trs vezes o preo do que eu encontrei no Brasil. Concluso: adianta ter um produto venda na Internet dessa forma? claro que no. Voc deve estar curioso para saber se eu comprei o perfume, ou no, e onde. Pois bem, um dia eu conto o final dessa histria. Por ora o importante que voc perceba a importncia de se ter viso local, no se esquea disso.
No so poucos os fracassos de visionrios que implementaram shopping center na Internet e se deram mal
E por que isso aconteceu? Porque pensaram que bastaria construir uma estrutura de lojas, captar os lojistas, colocar os produtos nas lojas e divulgar o shopping, porm esqueceram do mais importante: colocar vendedores nas lojas. Quebraram, e salvo rarssimas excees, quebraro t odos os que se lanarem nesse tipo de aventura. Sou radicalmente contra esse negcio de achar que Internet faz milagre no mundo dos negcios. No faz! Ponha na cabea do seu cliente que quem vende vendedor. Se ele quiser colocar um shopping center na Internet pode contar com voc, mas antes ter que apresentar-lhe um estudo de como ser a estrutura de vendas e de onde viro os recursos para bancar os custos de manter a loja no ar.
12
No existe site perfeito ou ideal

O seu cliente deve ser conscientizado disso, at mesmo porque o design, por mais bonito que seja, acaba cansando. O refinamento sucessivo do site deve estar bem claro para o seu cliente. Alerte-o sobre a importncia de manter o site atualizado. Existe coisa mais desagradvel do que um site veicular uma tabela de preos ou promoo com data de validade de trs meses atrs ou um banner anunciando um evento realizado no ano passado? Lembre-se de que site atualizado importante no s para ele como para voc. A atualizao exigir a prestao de servios e claro, se voc realizou um bom trabalho, este servio ser prestado por voc.
O design tambm precisa ser atualizado

Pelo menos a cada seis meses, proponha a seu cliente mudana no visual do site. Compare com uma capa de revista, que a cada edio tem mudanas sem perder a sua identidade. No espere que ele o chame para realizar a mudana. Antecipese regularmente, apresentando-lhe sugestes. Se voc fizer esse trabalho com competncia e regularidade voc adquire a confiana do seu cliente e transforma-o em um cliente cativo. Quer coisa melhor do que isso? Alerte o seu cliente de que um site no um fim em si mesmo e to dinmico quanto a sua prpria empresa. Uma vez pronto, no se pode ter a sensao de misso cumprida, muito pelo contrrio, para que d resultado precisar de ateno permanente. No admita aquela famosa frase em construo nem mesmo para link. Est ou no construdo. Se no estiver no faa nem meno. O mximo admissvel um link a uma pgina com pouco contedo. Por exemplo: voc pretende colocar um mapa bem detalhado mostrando onde a empresa est localizada. Enquanto voc no consegue esse mapa, pode descrever como chegar at a empresa.
No adianta nada fazer um site e no divulg-lo

como colocar um escritrio em uma sala no vigsimo andar de um prdio e no criar nenhum mecanismo de divulgao. Algum vai saber que ele existe? claro que no. Com o site a mesma coisa. A divulgao deve ser feita atravs de mala direta para os clientes, em catlogos telefnicos, nos papis de carta, em jornais, em outdoor, atravs de vendedores e em tudo o mais que possa fazer com que o site se torne conhecido, lembrando que a Rede por si s j um grande veculo de divulgao. Entretanto, essa divulgao pela Rede j est ficando saturada. No seu incio at que era fcil encontrar alguma coisa atravs de sites de busca. S que hoje esta realidade j no bem assim. Devido ao seu crescimento j existem casos espantosos de ao se fazer uma busca aparecerem duzentos mil endereos.
Alm da Tecnologia
13
Estimulando o visitante
O pblico interno da empresa deve ser estimulado a visitar o site regularmente e a apresentar sugestes para melhor-lo. Eles, por estarem em contato direto com o cliente e por conhecerem a realidade da empresa, podem contribuir de forma consistente para o aprimoramento do site. O outro aspecto importante cultural. Ao estimular a visita ao site, estamos trabalhando a cultura interna da empresa que comea a ser alterada para se adaptar a essa nova realidade.
Voc j viu alguma loja sem gerente?

O site no diferente. O seu cliente deve definir quem ser o Gerente responsvel pelo site. Alm de voc ter na empresa um canal aberto com quem conversar, o seu cliente ter de quem cobrar resultados internamente.
Quando o seu cliente quiser saber quanto vai custar o site, conduza-o a pensar quanto ser o Investimento
Um site no deve ser considerado como um custo e sim como investimento. Na realidade, um site deve ser comparado a uma Unidade de Negcio. Atravs dele sero realizados negcios. Ao se pensar numa Unidade de Negcio deve-se estabelecer um plano de metas, avaliar o quanto ser necessrio investir para a sua implantao, quais os seus custos de manuteno e qual o retorno esperado. Com um site no deve ser diferente. Todas essas etapas devem ser levadas em considerao.
Uma das grandes dificuldades ser colocar preo nos seus servios
bom lembrar que nessa rea tem preo para tudo que gosto. At mesmo porque o preo depender do nmero de pginas, quantidade de figuras, recursos a serem implementados. O que voc no pode perder de vista que se voc est iniciando, o seu preo no poder ser superior ao de uma empresa j conhecida no mercado. Passada essa fase inicial, no tenha dvida de que voc encontrar um preo justo que remunere o seu trabalho.
Estabelea um cronograma fsico financeiro

Defina alguns marcos onde sero estabelecidas metas que voc ter que atingir e que, em contrapartida, o seu cliente ter que fazer desembolso correspondente para remunerar o seu servio. De um modo geral os pagamentos so efetuados em trs vezes. Um no incio dos trabalhos, outro quando o site entrar no ar e o ltimo trinta dias aps.
Segurana nas transaes

No vou me estender nesse assunto, pois ele ser abordado nos captulos que se seguem, entretanto, podemos tecer alguns comentrios: a cada dia que passa a
14
segurana aumenta e se forem tomadas algumas precaues, essa segurana absoluta tanto para o comprador quanto para o vendedor. As estimativas de venda pela Internet alcanam cifras astronmicas estando por trs grandes organizaes que tm todo o interesse em que a transao d certo. Se por trs da transao houver um site seguro, uma operadora de carto de crdito ou uma instituio bancria forte, v sem medo. Havendo algum problema, eles assumem toda responsabilidade, pois no tm nenhum interesse em divulgar falhas no sistema.
Hora de seguir
As recomendaes anteriores no so tudo, mas j indicam um bom caminho para quem est iniciando. A sua absoro se dar com o tempo e medida que voc adquire experincia. Recomendo a releitura do presente trabalho em momentos diferentes da sua vida profissional. Com isso, voc se tornar um campo experimental para a maioria dos comentrios feitos.
Agora que j falamos bastante sobre o funcionamento da Internet como uma ferramenta de apoio s empresas, passaremos a um outro a specto: os servidores onde nossas aplicaes sero executadas. Daremos nfase prtica a dois sistemas operacionais: Windows 98 (com o Personal Web Server) e Windows 2000 Server (com o Internet Information Server). Iremos lhe apresentar como instalar os aplicativos que transformam o seu computador num servidor Web. Provavelmente voc j deve estar familiarizado com algum deles (ou com os dois), e nossas explicaes iro partir do princpio de que voc j possui um dos dois instalado em seu computador. Os sistemas propostos no livro (Loja virtual e Controle de estoque) foram escritos na plataforma ASP (Active Server Pages), com isto, voc ir precisar do Windows NT (2000) ou Windows 98 (Me) para executar os cdigos com sucesso. No entanto, como o desenvolvimento da informtica muito veloz, talvez, durante o desenvolvimento deste livro, outros sistemas operacionais provavelmente j executem cdigos em ASP.
Introduo aos servidores

Servidores de rede j so velhos conhecidos no mundo da informtica. At certo tempo atrs eles eram vistos como verdadeiros monumentos da empresa, ficavam em salas geladas, com acesso restrito e paredes revestidas em chumbo (no pense que exagero). Porm, recentemente, eles comearam a ganhar terreno at mesmo em nossas mesas de trabalho. Como um dos principais fatores desta mudana radical est o fato de que desktops atuais possuem um grau de potncia inimaginvel h at bem pouco tempo.
15
16
Um dos tipos de servidores mais disseminados no mundo da informtica so os servidores de arquivos e bando de dados. Atravs deles podemos ter um alto grau de concentrao do processamento que envolva armazenamento e recuperao de informaes. Um outro exemplo tpico so os servidores de impresso, apesar de estarem perdendo terreno no mercado (vamos acabar com os papis?) ainda so muito utilizados. Uma nova modalidade de servidor est surgindo com extrema velocidade. So os servidores de Intranet. Provavelmente voc j deve ter ouvido falar sobre eles. A tarefa aqui prover a rede interna da empresa de recursos vistos apenas na Internet. Atravs deles podemos executar scripts, acessar endereos na web (proxy), ler nossos correios entre outros diversos recursos. Vrias so as caractersticas dos equipamentos que podem executar as tarefas designadas a um servidor de Intranet, tudo ir depender de qual performance requerida pela rede. Um equipamento Pentium100, 32Mb e winchester de 1Gb, juntamente com o sistema operacional LINUX pode ser um bom comeo. Mas quando estivermos falando em um ambiente empresarial (como um provedor de acesso) precisaremos de algo bem mais robusto. Nos prximos tpicos explicaremos o funcionamento dos sistemas operacionais Windows 98 e 2000 Server. Tentaremos ser o menos parcial possvel pois nosso objetivo aqui no avaliar e sim capacitar voc a tomar a melhor deciso possvel para o seu caso em especial. Tentaremos lhe repassar todo o conhecimento necessrio para, por exemplo, d ecidir por um provedor em detrimento de outro. Outro detalhe sobre este captulo que no ensinaremos como utilizar todo o sistema operacional, mostraremos apenas o necessrio para que voc execute suas pginas.
Estrutura do funcionamento das pginas dinmicas ASP

Pginas dinmicas (ASP/CGI, etc.) esto se tornando to comuns como as em puro HTML. Atualmente as empresas necessitam de sites que possam ser atualizados, se possvel, diariamente. A estrutura interna de funcionamento das pginas dinmicas em ASP pode ser compreendida pelo esquema da Figura 2.1.
Configurando um Servidor de Internet Cliente solicita pginas ASP
17
Servidor devolve pgina em HTML (processada) Figura 2.1
Como podemos ver no esquema da Figura 2.1, o servidor recebe uma solicitao de pgina para que seja enviada ao cliente, se a pgina contiver a extenso .asp, ela ser processada pelo servidor, que envia apenas o resultado do processamento. Isto permite que, por exemplo, a pgina em ASP faa um acesso a um banco de dados, realize uma consulta, e envie o resultado para a tela do usurio cliente. Nos computadores com Windows 98 este processo conseguido atravs da instalao do Personal Web Server (o qual ser mostrado mais adiante). J no Windows NT ou 2000, voc precisar instalar o Internet Information Server. A grande vantagem de se utilizar o ASP que ele torna simples o desenvolvimento de aplicativos completos para a Web. Isto possvel porque o prprio PWS uma DLL a qual permite que novos recursos sejam criados e instalados sobre a forma de componentes. A utilizao de componentes prontos uma idia antiga na computao. No entanto ela s foi possvel graas ao desenvolvimento de um novo paradigma conhecido como Orientao a Objetos. Atravs dos objetos foi possvel aos desenvolvedores criarem componentes com uma infinidade de funes, os quais podem ser disponibilizados para outros programadores em forma de DLLs para serem utilizadas juntamente com o programa principal. Este o grande trunfo do ASP. Quando voc comear o captulo sobre ASP, ver que em sua base de funcionamento esto os componentes, os quais so instalados no servidor (por exemplo, o seu provedor). As suas pginas em ASP iro acessar estes componentes prontos, e atravs deles poderemos: acessar banco de dados, enviar e-mail, obter informaes sobre o servidor, e dezenas de outras funcionalidades as quais s dependem do desenvolvimento de novos componentes.
18
Desenvolvimento de novos componentes

Uma rea crescente no universo Windows o desenvolvimento de componentes para serem utilizados com o servidor web. Atravs destes novos componentes os programadores podem dar recursos inimaginveis aos desenvolvedores ASP. Para que voc possa criar seus prprios componentes, voc precisar investir em linguagens de desenvolvimento como Visual Basic ou Delphi.
Windows 98/Millenium
Uma das principais caractersticas deste produto a sua simplicidade de utilizao (apesar de sua complexidade interior). Ou seja, qualquer usurio com um pouco mais de facilidade no trato com a informtica poder tirar proveito dos seus inmeros recursos. Voc que ir trabalhar como Webmaster possivelmente utilizar o Windows 98 para testar suas pginas. Todos os cdigos que apresentamos neste livro so compatveis tanto com o Windows 2000 Server quanto com o Windows 98. Na verdade, uma Intranet com este sistema operacional extremamente fcil de ser montada. Voc poder utiliz-lo para sua fase de testes antes da implantao final de outro sistema operacional.
Conexo com a Internet

Um dos novos recursos do Windows 98 a sua capacidade de compartilhar uma conexo com a Internet. Atravs dele voc poder, por exemplo, com apenas uma conexo, disponibilizar o acesso com todos com computadores da rede. Se a sua linha for ISDN ou utilizar qualquer outra tecnologia de Banda larga, voc ter excelentes resultados.
Instalando o PWS
Outro recurso interessante a possibilidade de transformar o seu Windows 98 em um servidor de Intranet. Isto possvel graas a um programa chamado PWS (Personal Web Server), o qual acompanha o CD do Windows. Com ele voc poder testar todas as suas pginas (inclusive as ASP) antes de envi-las para o provedor. A seguir, temos os passos para que voc instale o PWS em seu computador com Windows 98. Ser necessrio que voc possua o CD-ROM original que contm a pasta add-ons com o PWS dentro dela.
Configurando um Servidor de Internet
19
Figura 2.2 Insira o CD do Windows 98, clique no boto Iniciar e v at a opo Executar. Digite a linha de comando como mostrado. (Substitua a letra E: pela letra da sua unidade de CD)
Aps iniciada a instalao, voc ter uma tela semelhante mostrada na Figura 2.3.
Figura 2.3 Nesta tela inicial voc pode ver quais so os recursos includos no PWS. Clique em Avanar.
Figura 2.4 Clique em Tpica e em seguida em Avanar.
20
Agora temos o passo mais importante. Voc dever informar o nome da pasta que conter os seus arquivos de pginas, ou seja, nem todo o computador estar disponvel para ser acessado via HTTP, mas apenas a pasta informada aqui. No nosso exemplo utilizaremos C:\ASP, a qual ser criada no seu winchester.
Figura 2.5 Informe o nome da pasta que funcionar com o servio de www. Ela ser de grande importncia para que nossos arquivos em ASP sejam executados.
Figura 2.6 Aps alguns instantes clique em Concluir e seu computador j estar pronto para executar o servidor www.
21
Configurando o Personal Web Server

Aps reiniciar, o computador j estar pronto para executar suas pginas.
Figura 2.7 Este o cone que mostra que o PWS est em execuo e pode ser encontrado prximo ao display do relgio.
Figura 2.8 Clicando duas vezes sobre o cone do PWS ele ser mostrado em execuo. Aqui voc j pode ver a pasta onde voc ir armazenar os seus arquivos e o endereo a ser chamado no navegador.
Perceba que temos o endereo http://Desenvolvimento que ser utilizado para acesso s pginas que esto dentro de C:\ASP. Ou seja, aps salvar suas pginas dentro da pasta C:\ASP, basta digitar o endereo no browser que ela ser executada. No entanto, uma alterao ser necessria. Precisamos informar que os cdigos em ASP devero ser executados (e no simplesmente lidos). Para fazer isto siga os passos adiante: Clique em Avanado Em seguida em Editar Propriedades Marque a opo Executar
Caso voc queira trocar o nome do seu servidor, basta acessar o cone de Rede no painel de controle, entrar em Identificao e informar o nome desejado.
22
Figura 2.9 Trocando o nome do servidor.
Este nome do computador ser utilizado quando voc for testar suas pginas.
Testando o servidor
Aps a instalao voc poder testar o funcionamento. Abra o navegador e digite o nome do seu servidor. Veja no exemplo:
Figura 2.10 Caso a pgina seja carregada, o seu servidor est pronto para executar suas pginas. (Voc no precisar estar conectado Internet).
23
Criando subpastas
Nos captulos sobre programao e ferramentas, muitos cdigos devero ser criados. Talvez o ideal seja voc criar subpastas dentro da pasta principal do PWS. Com isto voc conseguir organizar de maneira eficiente os testes a serem realizados. Para acessar os cdigos dentro da subpasta voc poder utilizar o seguinte caminho: http://desenvolvimento/subpasta/nomedoprograma.asp Onde desenvolvimento dever ser substitudo pelo nome que voc deu ao seu servidor e subpasta pelo nome da pasta que voc criou. No Windows 98 isto tudo o que voc ir precisar para executar suas pginas. Vamos ao Windows 2000 Server.
Windows 2000 Server

Agora estamos realmente falando em um ambiente srio para o trabalho corporativo. Na verdade no Windows 98 temos uma maior simplicidade no desenvolvimento e teste das nossas pginas, mas quando precisamos de performance, no tem jeito, t mos que partir para o servidor Windows 2000, ferramenta prpria para e gerenciar grandes volumes de transaes. A verso anterior ao Windows 2000 foi o Windows NT 4.0 a qual ficou durante vrios anos no mercado. No entanto, o ambiente NT precisava realmente de algumas melhorias. Alguns recursos presentes at mesmo no Windows 98 no estavam incorporados ao NT 4.0, como por exemplo: acesso a parties FAT32, compatibilidade com hardware Plug-and-play, entre outros. Existem no mercado verses diferentes deste ambiente. Cada uma com caractersticas distintas. No nosso caso preferimos utilizar o Windows 2000 Server pela sua potncia, sem no entanto, requerer absurdos de hardware. Da mesma forma que fizemos no Windows 98, apresentaremos a instalao e configurao do Internet Information Server (IIS), o qual permitir que os clientes da rede acessem o servidor de pginas. Na verdade, aps a configurao do IIS, seu servidor j estar pronto para executar scripts em ASP propostos pelo livro. Veja na tabela a seguir as verses disponveis e seus requisitos:
24 Professional Pblico Desktops Notebooks Server Arquivos Impresso Intranets Redes 4 4Gb Pentium 133 ou superior 64Mb 1Gb de HD
Como se tornar um WEBMASTER Advanced e-commerce Datacenter Aplicativos crticos
CPU(Max) RAM(Max) Requisitos mnimos
2 4Gb Pentium 133 ou superior 64Mb 1Gb de HD
8 8Gb Pentium 133 ou superior 64Mb 1Gb de HD
32 64Gb Ainda no divulgado
Uma das grandes vantagens em se utilizar o Windows 2000 o seu ambiente multipropsito, ou seja, com apenas um sistema voc poder ter um servidor de emails, servidor de Intranet, servidor de arquivos, entre outros. Logicamente, caso voc tenha grandes necessidades de processamento, estes servidores devero estar em sistemas diferentes. Isto justamente o que acontece nos provedores de acesso.
Caractersticas
Uma das principais caractersticas do Windows 2000 Server o fato de que cada aplicativo seja executado em espao separado de memria. Com isto o sistema consegue impedir que um aplicativo travado interrompa todo o sistema. Um outro recurso a recuperao automtica de arquivos de sistema que estejam danificados ou que sejam excludos. Isto possvel graas a um cache que se encarrega de manter uma cpia original dos principais arquivos do sistema, fazendo com que este continue a funcionar como se nada tivesse acontecido. O Microsoft Instaler (MSI) um novo recurso que visa a auto-recuperao de DLLs com problemas ou que tenham sido trocadas por verses mais antigas. Com o MSI elas sero armazenadas em pastas diferentes evitando-se a sobreposio. A Microsoft procurou reduzir sensivelmente o nmero de reinicializaes do sistema. Agora, quando voc instala um novo aplicativo ou hardware, o sistema entra automaticamente em funcionamento sem a necessidade de reinicializar todo o equipamento. Este recurso est disponvel para todos os drivers que sejam certificados pela Microsoft.
25
O Windows 2000 est mais confivel graas a grandes mudanas no gerenciamento do Kernel. O Windows 2000 Advanced Server inclui recursos de balanceamento de carga, o que ajuda a implementar aplicaes em ambiente multicamadas.
Configurando o servio IIS

Bem, vamos partir para o que realmente interessa. Daremos incio instalao e configurao do IIS para que voc possa transformar o servidor 2000 em um servidor de Intranet. Nosso objetivo aqui no analisar toda a funcionalidade do IIS visto que ele objetivo de vrios livros da rea. Para entender bem o funcionamento do IIS voc precisar possuir bons conhecimentos em TCP/IP, segurana, protocolos e do prprio Windows 2000 Server. No entanto, o ideal que voc o conhea porque provavelmente o seu provedor dever estar utilizando-o para hospedar seus cdigos em ASP. A primeira coisa que voc dever fazer criar uma pasta a qual conter todos os arquivos HTML e ASP que iremos criar. Vamos padronizar esta pasta como o nome de: C:\ASP, estando os exemplos do livro baseados neste nome. Estamos utilizando o Windows 2000 Server em ingls. Se voc possui a verso em portugus no ser difcil acompanhar, pois as posies das opes so idnticas ao ingls. A segunda coisa a fazer ir at o painel de controle e acessar o cone Adicionar ou Remover Programas (Add/Remove Programs).
Figura 2.11 Nesta tela clique sobre a opo Add/Remove Windows components. Em seguida clique no boto Components.
26
A tela a seguir ser apresentada.
Figura 2.12 Localize o item Internet Information Services (IIS) e marque-o. Em seguida clique em Next (avanar)
Dependendo do tipo de instalao que realizou, voc ser solicitado a inserir o CD do Windows 2000 Server.
Figura 2.13 Terminada a instalao, v at o menu Administrative tools (Ferramentas administrativas) e acesse o aplicativo Internet Services Manager
27
Agora vamos criar o diretrio virtual para receber nossas pginas. Na verdade o que iremos fazer informar ao IIS que a pasta c:\ASP conter os arquivos a serem disponibilizados via HTTP.
Figura 2.14 Clique com o boto direito sobre Default Web site (site da web padro), escolha a opo New, Virtual direct (diretrio virtual)
Voc ser acompanhado pelo assistente.
Figura 2.15 Informe um nome para a pasta virtual. No nosso caso escolhemos desenvolvimento para ficar igual ao PWS que configuramos no Windows 98. Clique em Next.
28
Figura 2.16 Agora selecione a pasta C:\ASP que conter os arquivos. Em seguida clique em Next.
Na prxima tela deixe tudo como est, em seguida clique em Finish. Uma nova pasta virtual chamada desenvolvimento foi criada.
Figura 2.17 Voc poder acessar as suas propriedades clicando com o boto direito sobre elas e acessando a opo properties.
Vamos agora testar o nosso servidor. Feche todas as janelas, abra o bloco de notas e digite a linha mostrada a seguir: <CENTER><B>BEM VINDO AO SISTEMA</B></CENTER>
29
Salve-a na pasta C:\ASP com o nome de index.HTML. Para isto voc dever escolher a opo All files (Todos os arquivos), caso contrrio ele no assumir a extenso HTML.
Figura 2.18 muito importante escolher a opo All files (todos os arquivos).
Testando o servidor
Chegou a hora do teste final. Agora precisamos nos certificar da funcionalidade do servidor IIS. Para isto vamos executar a pgina index.html que acabamos de criar. Abra o Internet Explorer e digite o endereo como mostrado na Figura 2.19:
Figura 2.19 Substitua o home pelo nome do seu computador (informado na configurao da rede).
30
Caso a pgina tenha sido carregada como na Figura 2.19, ento o servidor j est pronto para ser utilizado. Se algo der errado, refaa os passos com mais ateno aos detalhes. Voc poder criar tantas pastas virtuais quanto forem necessrias aos seus testes. Procure criar subpastas dentro da pasta C:\ASP para receber suas pginas, conforme a aplicao. Se seu computador estiver fazendo parte de uma rede, os micros clientes podero acessar o site que voc acabou de disponibilizar. O procedimento que voc realizou o mesmo que o provedor far. No entanto, ele detm conhecimento suficiente para alterar as configuraes da pasta virtual de forma a utilizar todos os recursos disponveis no IIS. Para voc que est apenas comeando, isto o suficiente para disponibilizar pginas na Intranet ou apenas para testar seus cdigos.
Vamos entrar agora em uma parte importante para quem vai precisar disponibilizar informaes on-line. Atravs da utilizao de banco de dados podemos fazer com que pessoas externas tenham acesso aos dados que voc dispuser na rede. Esta tarefa, aparentemente simples, torna-se complicada medida que os sistemas se tornam vulnerveis a ataques quando disponibilizados na Internet. No entanto, crescente o nmero de empresas dispostas a colocar informaes para clientes e fornecedores acessveis durante 24 horas nos 7 dias da semana. Neste captulo voc aprender a tecnologia utilizada nos bancos de dados atuais e ver, na prtica, como criar e disponibilizar um banco de dados utilizando o Microsoft Access.
Banco de dados
Sem dvida voc j deve ter ouvido falar muito sobre os bancos de dados. Simplificadamente, este termo designa um local onde ficaro armazenados todos os dados referentes a um determinado assunto e as relaes entre eles. Vamos a um exemplo: se voc usurio de uma biblioteca, perceber que todas as informaes sobre os usurios esto armazenadas em um sistema (caso esteja informatizada), ou mesmo em um controle manual. No importa como os dados so manipulados (manual, mecnico ou eletrnico), a finalidade de um sistema de banco de dados a mesma desde muito tempo. Com o avano na informatizao, o que se percebe que a captura e a anlise das informaes presentes no sistema est cada dia mais veloz e eficaz. Hoje possvel realizar consultas em base de dados com b ilhes de informaes em poucos segundos. Ao chegar na biblioteca (por exemplo) voc poder ser recepcionado por um sistema que lhe permite consultar todo o acervo a partir de uma palavra chave. Os dados so preparados e
31
32
armazenados sempre de forma a tornar a busca por informaes o mais eficiente possvel. Hoje j possvel ter acesso a toda a histria mundial atravs de bancos de dados distribudos pela Internet. No entanto, a idia por trs de um banco de dados simples. Basta olhar ao seu redor que voc ver que existem dezenas de coisas sobre as quais necessitamos armazenar dados. Algumas so bem fceis de implementar, como por exemplo, um controle de receitas, sua agenda pessoal, sua coleo de livros ou CDs, etc. Todos os itens possuem dados que podem ser armazenados e, o mais importante, relacionados entre si. Os relacionamentos definem o mundo. Isso mesmo, voc pode at no perceber, mas tudo o que existe no mundo possui algo com o que se relacionar. A rvore com a terra, o pai com o filho, o autor com o livro, os peixes com o rio e assim infinitamente. Essa idia deu origem ao que conhecemos hoje como banco de dados relacionais.
Banco de dados relacionais

Existe no mercado um grande nmero de sistemas gerenciadores de banco de dados. Cada um deles com caractersticas que os diferenciam uns dos outros. No entanto, uma coisa eles tm em comum: o fato de serem relacionais. Este nome dado aos softwares de banco de dados que trabalham com tabelas e relacionamentos entre elas atravs de campos chaves. Vamos a um exemplo para que fique mais claro. No caso da biblioteca, cada livro possui diversas informaes como nome, assunto, data da compra, nmero de pginas e autor. Perceba que pode haver uma nova gama de informaes apenas sobre o autor, como: nome, gnero literrio, data de nascimento, estado onde nasceu. Neste caso podemos perceber que existe uma relao entre cada autor e os vrios livros que ele escreveu. Por outro lado, um livro tambm ter o mesmo tipo de relao com o seu autor. Assim podemos perceber os relacionamentos. Veja pelo diagrama a seguir como podemos montar os relacionamentos entre produtos e fornecedores. Perceba que temos trs tabelas. Uma delas est armazenando os produtos de uma loja, em outra tabela os fornecedores, e na tabela do meio a relao entre um produto e o seu fornecedor. Esta tabela intermediria chamada de ligao.
Fundamentos sobre Banco de Dados
33
Produtos Cod_prod 001 002 003
Descrio Monitor Winchester Teclado Produtos do fornecedor Cod_prod Cod_forn 001 002 003 001 001 002
Fornecedor Cod_forn Nome 001 002 003 Samsumg VTC Epson
A idia de relacionamentos surgiu da matemtica e pode ser toda provada atravs da teoria de c onjuntos. Ela foi citada pela primeira vez pelo cientista Dr. Codd, pesquisador da IBM. Em seu livro, Dr. Codd determinou as 12 caractersticas principais para que um sistema de banco de dados seja dito como relacional, mtodo mais utilizado nos dias atuais.
SGBDs (Sistemas Gerenciadores de Banco de Dados)

Agora que voc j conhece o funcionamento bsico dos bancos de dados relacionais, vamos conhecer como a estrutura de um sistema que ir controlar os dados de um banco de dados, e que chamado de SGBD (Sistema Gerenciador de Banco de Dados). Trata-se de um aplicativo especfico para a criao, manipulao e gerenciamento das tabelas que sero criadas. Exemplos de SGBDs so: SQLServer, ORACLE, MySQL, etc. Existem diversos produtos disponveis no mercado, mas alguns deles, como o SQLServer e o ORACLE juntos dominam mais de 70% do mercado brasileiro.
34
Geralmente as caractersticas fundamentais dos bancos de dados, como criao e manuteno de tabelas, so semelhantes. A principal diferena entre os diversos produtos do mercado (e a mais importante) a performance que cada um apresenta em uma determinada situao. Este , na maioria das vezes, o principal critrio de desempate quando uma empresa precisa resolver sobre a aquisio de um sistema para gerenciar seus dados. Existem SGBDs para as mais variadas aplicaes (e custos). Voc poder adquirir um gerenciador que pode custar milhares de dlares (como o ORACLE) ou simplesmente baix-lo da Internet gratuitamente (como o MySQL). Logicamente que as diferenas sero muitas, mas se voc no puder gastar muito, no vai pensar duas vezes. Nas aplicaes prticas deste livro (Loja virtual e Controle de estoques) i emos r utilizar o Access. Ele pode ser considerado um SGBD de pequeno porte, porm muito utilizado por pequenas e mdias empresas. Seu grande atrativo a facilidade de operao e a total integrao com os demais produtos da famlia Office.
Banco de dados como parte do sistema

Apesar de tudo que falamos at agora sobre banco de dados, uma coisa vale destacar: o banco de dados a ser utilizado somente uma parte do sistema. Ele ir fazer parte de uma estrutura maior que passa desde quesitos como segurana at chegar a regra de negcio de quem ir utiliz-lo. Vou contar uma historinha para ilustrar como deve funcionar a estrutura. Certa vez uma empresa contratou dois analistas e dois programadores para informatizar o seu departamento financeiro. Aps vrios meses de trabalho o sistema estava quase pronto, faltando apenas um detalhe: funcionar de maneira adequada. Aps outros trs meses de muito trabalho na adequao, o projeto foi abandonado. Motivo: os analistas fizeram o sistema da maneira como eles achavam que deveria ser. Este o maior erro. Um sistema deve estar de acordo com as expectativas do usurio. Devem ser realizadas entrevistas e questionrios que iro levantar quais so as necessidades operacionais da empresa. Nenhum sistema deve ser desenvolvido sem que haja participao efetiva dos maiores interessados: os usurios. Aps resolver sobre o que ser informatizado vem a segunda etapa: como ser esta informatizao. Nesta segunda etapa ser definido o banco de dados a ser utilizado, quais os nveis de performance necessrios, quais os requisitos de segurana, entre diversos outros fatores.
35
Entidades, atributos e relacionamentos

Existem diversos objetos importantes em um sistema de banco de dados. Exemplos so: procedimentos armazenados, gatilhos, regras, visualizaes e diversos outros que podem variar em cada banco de dados. No entanto trs deles esto presentes em qualquer banco de dados relacional. So eles:
Entidades (Tabelas)
Entidades so os objetos que contm os d ados. Elas podem armazenar diversos tipos de dados tais como: valores, datas, textos, figuras, etc. Elas sero definidas no momento da anlise do sistema de banco de dados a ser criado. Geralmente as tabelas armazenam uma coleo de dados sobre um determinado objeto ou assunto. Por exemplo: produtos, clientes, fornecedores, livros, computadores, etc.
Atributos
Atributos so a parte da tabela onde os dados esto armazenados. Eles contm as caractersticas que definem uma determinada entidade. Uma tabela de produtos ir conter atributos como: cdigo, descrio, preo de venda, preo de compra, data de compra, etc.
Relacionamentos
Como j foi dito no incio deste captulo, os relacionamentos so parte fundamental de um banco de dados. Eles so responsveis por manter a relao existente entre as diversas tabelas do sistema. Por exemplo: uma tabela de fornecedor ter relaes com uma de produtos. Uma tabela de produtos ter relao com uma outra de matria prima. Para que o relacionamento seja estabelecido necessrio identificar pelo menos um atributo idntico entre as tabelas. Geralmente este atributo o cdigo que identifica cada registro dentro dela.
ndices
Com certeza voc j ouviu falar em ndices. Eles so facilmente encontrados nos livros e revistas e servem para que voc encontre a informao desejada, de uma forma mais rpida. Com base na pesquisa realizada no ndice voc ser capaz de ir at a posio correta do que precisa encontrar.
36
Nos bancos de dados os ndices possuem funo semelhante. Eles estaro em um arquivo separado da tabela principal e serviro apenas para manter em ordem os dados para que a busca de registros seja facilitada. Ao encontrar o registro na tabela de ndice, o sistema p ode fazer referncia imediata ao registro na tabela principal. A tabela de ndice conter apenas o campo de ordenao (por exemplo, o cdigo) e a posio fsica do registro dentro da tabela principal a qual no est ordenada e geralmente mantm a ordem original com que os registros foram cadastrados. Veja como funciona pelo diagrama a seguir: Tabela: ndice_de_produtos Codigo Posio 001 3 002 1 003 2 004 4 Perceba que para encontrar um produto ordenado por cdigo (ndice de cdigo) o sistema realizar um busca bastante simples e, ao encontrar o cdigo, ter a posio exata na tabela onde o produto foi armazenado. Tabela: Produtos Posio Cdigo 1 002 2 003 3 001 4 004
Descrio Computador XPY Teclado Matrix Mouse Serial Monitor 14
Aqui os produtos esto armazenados na ordem natural com que foram digitados. A busca por um cdigo em especfico seria bastante complicado, pois o produto tanto poderia ser o primeiro como o ltimo. Utilizando o ndice consegue-se uma busca mais eficiente (como nos livros).
Integridade referencial
Um assunto muito interessante quando tratamos de banco de dados a integridade referencial. A integridade referencial ir tratar da manuteno dos relacionamentos entre os elementos de duas ou mais tabelas. Vamos a um exemplo prtico para que fique mais fcil compreender. Suponha a existncia de duas tabelas; em uma delas sero mantidas informaes sobre os funcionrios de uma empresa e uma outra armazenar informaes sobre os dependentes destes funcionrios. Imagine que um dia ser necessrio deletar o registro do funcionrio. O que ir acontecer com seus dependendes? Ficaram
37
rfos! O ideal que uma rotina apague tambm todos os dependentes, esta rotina necessria para que se mantenha a integridade referencial das informaes. Tanto o Access quanto o SQLServer possuem rotinas para manter a integridade referencial em alguns casos (como no caso citado: excluso). Mas algumas vezes o prprio sistema que voc est desenvolvendo dever conter rotinas para evitar perda de informaes pela falta de integridade.
O Access
O banco de dados Access talvez seja o mais simples e o mais acessvel (custo X benefcio) entre os banco de dados disponveis para o ambiente Windows. O produto possui uma boa aceitao no mercado brasileiro, o que o faz ser o banco de dados mais utilizado em pequenas e mdias organizaes. O Access est disponvel em conjunto com o pacote Microsoft Office mas pode ser adquirido separadamente. O principal atrativo a sua simplicidade de uso aliado a um bom desempenho (para ambientes que no necessitem de alto processamento). Neste livro iremos utilizar o Access para os sistemas de Loja Virtual e o Controle de estoques. Cada um deles estar em arquivos diferentes (cuja extenso .mdb) os quais sero acessados pelo aplicativo ASP que iremos desenvolver.
Criando tabelas no Access

Vamos comear a criar nossas tabelas no banco de dados Microsoft Access. Para o nosso caso iremos utiliz-lo para armazenar as tabelas dos nossos sistemas de Loja Virtual e Controle de Estoque. Nesta seo voc ir aprender como criar tabelas no Access, definir os tipos dos campos e suas caractersticas. Ao abrir o Access voc ter uma tela como a mostrada na Figura 3.1, atravs dela podemos Criar um banco de dados vazio, utilizar um assistente ou abrir um banco de dados existente.
38
Figura 3.1 Tela inicial do Microsoft Access.
No nosso caso escolha a opo Banco de dados vazio do Access e clique em OK. Agora voc ir criar uma pequena tabela apenas para fins didticos. Ela servir de base para que voc crie as tabelas solicitadas nos captulos s obre ASP. L voc aprender a criar pginas que acessam informaes dentro das tabelas do Access. A estrutura da pequena tabela que iremos criar est definida a seguir: Nome do campo Codigo Nome Preo DataCompra Tipo de dado Nmero Texto Moeda Data/Hora
39
Figura 3.2 Nesta tela voc dever informar o nome para o banco de dados e a pasta onde ele ser armazenado.
Quando for criar as pginas sobre ASP nos Captulos 10 e 11, salve seu banco de dados na mesma pasta onde ficaro seus arquivos em ASP da Loja Virtual e do Controle de Estoques. Esta pasta foi criada quando da instalao do PWS ou do IIS.
40
Como se tornar um WEBMASTER Figura 3.3 Agora voc j est pronto para criar todas as tabelas que se fizerem necessrias.
Clique duas vezes sobre Criar tabela no modo Estrutura. A janela da Figura 3.4 aparecer.
Figura 3.4 Informe todos os campos conforme a tabela definida anteriormente. Perceba que o tipo de dad o a ser armazenado dever estar de acordo com o contedo de cada linha: Cdigo=Nmero; Nome=Texto; Preo=Moeda; Datacompra=Data/hora.
Aps digitar todos os campos, salve seu trabalho. Ao ser solicitado sobre a criao de uma chave primria, responda No.
41
Figura 3.5 Aps terminar voc ter um banco de dados com a tabela criada. Para criar novas tabelas basta repetir o processo.
Viu como fcil? Todos os sistemas que conhecemos possuem tabelas. Elas devem ser definidas pelo analista de sistemas o qual ir estudar todo o ambiente do usurio para poder definir quais sero os campos e tipos de campos de cada tabela. Por hora recomendamos a voc que procure conhecer bem os banco de dados pois eles so a base de qualquer sistema on-line. Lgico que para ter a habilidade de um analista so anos de estudo e prtica, no e ntanto, j est na hora de voc comear a dar seus primeiros passos. Neste momento tente criar novas tabelas sobre objetos que voc possui em casa ou no escritrio. Exemplos destes objetos so: livros, CDs, receitas, agenda, entre outros. Lembre-se de que s a prtica leva perfeio. No Access criamos nossa base de dados. Agora vamos ver como nosso sistema em ASP ir acessar estes dados.
Fundamento do acesso a dados

Acessar banco de dados uma das atividades mais realizadas pelo Webmaster. Com a facilidade criada pelos objetos que podem ser utilizados no ASP, ficou fcil desenvolver sistemas para serem acessados via browser.
42
O desenvolvimento de novos mtodos de acesso, por empresas como a Microsoft, tirou do programador a rdua tarefa de desenvolver rotinas inteiras para acessar informaes nos bancos de dados. Atualmente este recurso j se encontra embutido no servidor e para o desenvolvedor basta conhecer como este acesso realizado. Vamos t entar entender o mtodo de acesso via ADO utilizado pelos sistemas apresentados no livro. VC++ VB ASP JAVA
ADO
OLEDB
RDBMS
E-MAIL
DIRECTORY SERVICES
OUTROS o aplicativo
Aqui podemos perceber como realizado o acesso desde (VC++/VB/ASP/JAVA, etc.) at o acesso aos dados na ltima camada.
O acesso aos dados realizado pela camada de software conhecida como OLEDB. No entanto ela no foi projetada para ser utilizada com a lguns aplicativos como ASP ou Visual Basic. Por isto, temos a camada ADO que fornece uma interface entre o aplicativo e os dados. Um outro motivo para se utilizar ADO que ele ir simplificar o acesso aos dados at mesmo por linguagens que no necessitam dela como o Java ou o VC++. Na prtica, voc ver que nossos sistemas utilizaro uma linha como a mostrada a seguir para invocar o acesso aos dados via ADO. Set vConexao = Server.CreateObject("ADODB.Connection") No entanto, voc no deve se preocupar com toda esta teoria, pois voc ver que na prtica tudo muito transparente. Voc digita a linha de comando mostrada antes e l est a conexo prontinha para ser usada via comandos em SQL.
Linguagem SQL
A linguagem SQL foi criada com o intuito de padronizar a forma com que se realiza o acesso aos dados das tabelas armazenadas nos banco de dados. Essa padronizao facilita muito quando for necessria a manuteno no sistema.
43
Vejamos alguns exemplos da sintaxe SQL. No se preocupe em entender todos os cdigos, pois voc ver o funcionamento de cada um deles no captulo sobre os sistemas on-line.
Inserindo dados em uma tabela

INSERT into [NOMETABELA] (campo1,campo2) VALUES (valor1,valor2) Permite que sejam inseridos dados na [ OMETABELA] nos respectivos campos N (campo1,campo2) os valores contidos nas variveis (valor1,valor2).
Consultando dados
SELECT * FROM [NOMETABELA] WHERE salario>1000 Exemplo de uma consulta tabela [NOMETABELA] mas apenas dos registros onde o campo salrio seja > que 1000.
Removendo dados
DELETE * FROM [NOMETABELA] WHERE codigo=1 Apaga todos os registros da tabela [NOMETABELA] onde o cdigo seja igual a 1. Voc poder encontrar resumos sobre a sintaxe SQL em livros ou at mesmo disponveis na Internet. Vale a pena entender bem do assunto.
Criando relacionamentos
Como voc j pode conferir no incio deste captulo, os relacionamentos so parte fundamental dos bancos de dados. Para dizer a verdade, sem os relacionamentos no aproveitamos quase nada dos dados armazenados. Por mais incrvel que possa parecer, quando relacionamos os dados a que temos a verdadeira informao. Vamos a um exemplo. Suponhamos a existncia de duas tabelas em um banco de dados sobre vendas: pedidos e itens_de_pedidos. As informaes contidas em cada uma delas separadamente nos diz muito pouco, mas quando juntamos os dados de uma com os da outra podemos extrair uma srie de informaes. Uma consulta tabela de itens_de_pedidos no ir representar nada se no soubermos de qual pedido cada item se refere, e isto s ser possvel se criarmos um relacionamento entre elas. Logicamente que, para retirar todo o potencial da linguagem SQL, voc poder utilizar os vrios livros sobre o assunto disponveis nas livrarias. Este livro seria pequeno para que pudssemos apresentar todas as caractersticas de seus comandos.
44
Segurana das informaes armazenadas no banco de dados

Um dos grandes problemas enfrentados (principalmente pelas pequenas aplicaes que precisam ser disponibilizadas on-line) a segurana dos dados armazenados no banco de dados que, quase sempre, estar no provedor. um dilema pois os dados precisam estar on-line e, no entanto, isto deixa uma brecha para que, em ataques ao provedor, pessoas tenham acesso indevidamente. Este fato se agrava quando precisamos armazenar informaes confidenciais como senhas e nmero de cartes de crdito. O que acontece que na maioria das vezes no podemos contar com um sistema de segurana s para nossos dados, eles so planejados para toda a estrutura do provedor. Por outro lado, fazer um contrato com o provedor para que este fornea um tratamento diferenciado para nossa base de dados pode representar um aumento nos custos. Alguns bancos de dados contam com recursos de criptografia, o que pode ser usado contra a utilizao indevida das informaes armazenadas. No entanto, em softwares de menor porte este recurso no est disponvel.
Futuro dos bancos de dados

Apesar de todo desenvolvimento atual, muito ainda existe para ser feito em termos tecnolgicos da computao. Com os bancos de dados no poderia ser diferente. Apesar de extremamente rpidos, os bancos de dados atuais esto sendo submetidos a quantidades de dados jamais vistas. No raro, por exemplo, um banco de dados com vrios gigabytes ou at terabytes. Algoritmos cada vez melhores iro desafiar os pesquisadores da rea. Trazendo para um campo mais atual, os banco de dados orientados a objetos comeam a aparecer no mercado mundial. Eles trazem na bagagem uma mudana radical que ir marcar para sempre o futuro dos sistemas gerenciadores de bancos de dados. Para ns simples mortais, resta utilizar a tecnologia comercialmente disponvel, da melhor maneira possvel, passando por uma anlise cuidadosa dos dados e relacionamentos entre eles, o que independe do banco de dados a ser utilizado.
45
Resumindo
Este captulo possui dois objetivos. O primeiro levar ao seu conhecimento a enorme quantidade de coisas que precisamos conhecer sobre banco de dados. O segundo fornecer informaes sobre como podemos criar e acessar informaes contidas em um banco de dados do Access. Logicamente a abordagem feita simples se comparada com a vasta literatura disponvel sobre banco de dados. Cabe a voc sempre buscar mais e mais informaes a respeito. Nos captulos sobre a Loja Virtual e Controle de Estoques iremos novamente utilizar o Access. Voc ir criar novos banco de dados com novas tabelas que sero manipuladas pelos sistemas.
Bem, j est na hora de voc iniciar a parte prtica de seus estudos sobre desenvolvimento para a Web. Neste captulo voc aprender a principal linguagem de desenvolvimento para Web. Se voc ainda no possui experincia com linguagens de programao, ver que o HTML excelente para quem est comeando. No entanto, mesmo para quem j desenvolve em outras linguagens, um entendimento da programao para Web de extrema importncia. Diferentemente do que aconteceu nos anos passados, o desenvolvimento para Internet exige que o Webmaster conhea pelo menos um pouco de vrias linguagens. J foi o tempo em que um programador trabalhava apenas com uma sintaxe de programao.
HTML
A primeira linguagem que iremos aprender a mais simples e fcil de todas. Talvez nem possa ser classificada como uma linguagem e sim como estruturas de marcaes para serem interpretadas por um navegador. Apesar de to criticada por sua limitao, o HTML ainda a linguagem mais utilizada no desenvolvimento para Internet. Suas limitaes so facilmente ultrapassadas com a utilizao de recursos vindos de outras linguagens. Por exemplo: quando voc preenche um formulrio na Internet, o programador no consegue validar um determinado campo para que o mesmo no contenha um valor invlido (um email sem @ por exemplo), isto precisar ser feito com a utilizao de recursos como o JavaScript ou VBScript. Para desenvolver em HTML voc precisar de duas coisas:
46
Linguagens para Desenvolvimento na Web HTML
47
Um editor de textos com possibilidade de salvar em formato texto. Um navegador para interpretar os cdigos em HTML.
No nosso exemplo iremos utilizar o bloco de notas, no entanto, voc poder utilizar outro editor como quiser. Vamos a um primeiro exemplo: Abra o bloco de notas e digite o cdigo seguinte:
1: 2: 3: 4: 5: 6: 7: 8: <html> <head> <title></title> </head> <body> <h1><center> TOP TRAINING CENTER </center></h1> </body> </html>
Aps digit-lo, crie uma pasta, por exemplo com o nome de Curso HTML e salve este arquivo com o nome de index.html. Se voc estiver digitando no bloco de notas, precisar alterar o tipo do arquivo para Todos os arquivos no momento de salv-lo. Este arquivo ser a base de toda nossa etapa em HTML. Ou seja, nas pginas seguintes voc dever fazer apenas alteraes neste primeiro arquivo.
Abrindo uma pgina local no navegador

Agora que j temos a pgina criada, chegou a hora de carreg-la para que seja interpretada pelo navegador. Voc no precisar de nenhuma configurao adicional para executar esta tarefa, simplesmente abra o browser e digite o endereo da pgina. Veja na Figura 4.1.
Os comandos em HTML
Todos os comandos em HTML so conhecidos como tags, ou seja, marcaes que determinam ao browser o que ele dever executar. Quase sempre as tags aparecem em pares como <b> (negrito) seguido de </b>. Mas existem algumas excees que, como no caso da tag <p>, significam um salto de pargrafo.
48
Figura 4.1 Aqui o browser carregou a pgina que voc digitou. Para qualquer alterao feita no arquivo original basta que voc pressione o boto atualizar (Refresh).
Tags bsicas
Existem algumas marcaes bsicas em um documento HTML. Uma delas o <html> no incio do documento. Ele servir para informar ao browser o tipo de documento que est sendo carregado. Outra tag importante a que especifica o ttulo do documento. A tag utilizada <title>. Altere o documento anterior para que aparea o ttulo: TOPTC.COM.BR.
1: 2: 3: 4: 5: 6: 7: 8: <html> <head> <title>TOPTC.COM.BR</title> </head> <body> <h1><center> TOP TRAINING CENTER </center></h1> </body> </html>
Voc dever alterar apenas a linha linha 3 do documento anterior para que fique como mostrado antes e em seguida salve-o. Abra novamente a pgina no navegador (ou atualize-a) e veja que aparecer o ttulo no alto do browser.
49
Criando cabealhos
Os cabealhos iro aparecer no corpo do documento e possuem 6 nveis. Eles aparecero em negrito e seu tamanho depender do nvel informado. A tag utilizada para criar cabealhos a <hx> onde a varivel x poder variar de 1 at 6. Vamos continuar alterando nossa pgina. Perceba que j temos um cabealho com nvel1. Agora iremos colocar mais dois nveis.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: <html> <head> <title>TOPTC.COM.BR</title> </head> <body> <h1><center>TOP TRAINING CENTER</center></h1> <h2><center>Cursos de Informtica</center></h2> <h2><center>Atendimento individualizado </center></h2> </body> </html>
Aps salvar as alteraes, carregue a pgina e veja o novo layout.
Figura 4.2 Voc poder acrescentar diferentes nveis de cabealhos em suas pginas.
50
Saltando pargrafos
Para se criar um pargrafo em HTML no adiantar simplesmente teclar ENTER no final da linha. Para isto existe a tag <P> que criar um novo pargrafo automaticamente. Voc ver exemplos de pargrafos na seqncia do livro.
Saltando linhas
Quando voc precisar apenas saltar uma linha, dever utilizar a tag <BR>. Altere a pgina index.html para que fique como mostrado adiante e, em seguida abra-a no browser e veja a diferena.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: <html> <head> <title>TOPTC.COM.BR</title> </head> <body> <h1><center>TOP TRAINING CENTER</center></h1> <h2><center>Cursos de Informtica</center></h2> <h2><center>Atendimento individualizado </center></h2> <hr> <center> Horrios flexveis <p> Apio extra curso <br> Certificado ao final do curso </center> </body> </html>
Hiperlinks
Os links so muito utilizados em documentos HTML. Na verdade sem eles a Internet no teria graa nenhuma. Criar um hiperlink em um documento muito simples. Basta voc digitar a tag <a> seguida do endereo a ser encontrado caso o usurio clique sobre o link, em seguida digite o texto que ir aparecer para o usurio e para terminar feche a tag com </a>.
51
Veja no exemplo:
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: <html> <head> <title>TOPTC.COM.BR</title> </head> <body> <h1><center>TOP TRAINING CENTER</center></h1> <h2><center>Cursos de Informtica</center></h2> <h2><center>Atendimento individualizado </center></h2> <hr> <center> Horrios flexveis <p> Apio extra curso <br> Certificado ao final do curso <p> <a href=http://www.toptc.com.br> site oficial da TOP </a> </center> </body> </html>
Criao de listas
As listas so velhas conhecidas e fceis de serem criadas no Word, por exemplo. Na seqncia voc ter um exemplo para digitar na pgina index.html. Uma lista comea com a tag <ul> e termina com </ul>. Em cada elemento da lista iremos colocar a tag <li>. Novamente altere nosso exemplo para que fique como segue:
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: <html> <head> <title>TOPTC.COM.BR</title> </head> <body> <h1><center>TOP TRAINING CENTER</center></h1> <h2><center>Cursos de Informtica</center></h2> <h2><center>Atendimento individualizado </center></h2> <hr> <center> Horrios flexveis <p> Apio extra curso <br>
52 13: 14: 15: 16: 17: 18: 19: 20: 21: 16: 17:
Como se tornar um WEBMASTER Certificado ao final do curso <p> <a href=http://www.toptc.com.br> site oficial da TOP </a> </center> <ul> <li> Bsicos <li> Avanados <li> Webmaster <li> Webdesign </ul> </body> </html>
Abra no navegador e veja as listas em funcionamento. Para criar listas numeradas, basta alterar a tag <ul> pela <ol>.
Listas intercaladas
As listas intercaladas so interessantes para deixar ainda mais organizada nossa estrutura. Altere nossa pgina index.html para que fique como segue:
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: <html> <head> <title>TOPTC.COM.BR</title> </head> <body> <h1><center>TOP TRAINING CENTER</center></h1> <h2><center>Cursos de Informtica</center></h2> <h2><center>Atendimento individualizado </center></h2> <hr> <center> Horrios flexveis <p> Apio extra curso <br> Certificado ao final do curso <p> <a href=http://www.toptc.com.br> site oficial da TOP </a> </center> <ul> <li> Cursos de Webmaster <ul> <li> FrontPage
Linguagens para Desenvolvimento na Web HTML 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: <li> Java Script <li> ASP </ul> <li> Cursos de Webdesign <ul> <li> FrontPage <li> Photo Shop <li> Corel Draw </ul> </ul> </body> </html>
53
Formatando a exibio
Vamos ver algumas tags que permitem a formatao dos documentos. Digite este exemplo, e veja o que voc poder fazer.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: <html> <head> <title>TOPTC.COM.BR</title> </head> <body> <h1><center>TOP TRAINING CENTER</center></h1> <h2><center>Cursos de Informtica</center></h2> <h2><center>Atendimento individualizado </center></h2> <hr> <center> Horrios flexveis <p> Apio extra curso <br> Certificado ao final do curso <p> <a href=http://www.toptc.com.br> site oficial da TOP </a> <p> O <i> Melhor </i> <font face=Arial color=#FF0000 size=5> <b> Curso </b> </font> de <u> Informtica </u> do <b> Brasil </b> </p> </body> </html>
Veja como ficou aps carregar as alteraes.
54
Figura 4.3 Voc poder utilizar a formatao de acordo com suas necessidades.
Na linha 15 utilizamos a tag <i> para criar o texto em itlico. Na mesma linha utilizamos a tag <font> para especificar a cor, o tamanho e a fonte a ser utilizada a partir daquele momento. Na linha 16 foi utilizada a tag </font> para encerrar a formatao da fonte. Ainda na linha 16 foi utilizada a tag <u> para introduzir um texto sublinhado.
Formatando o fundo da tela

Quando acessamos um site na Internet, raramente ele est sobre um fundo branco. Na maior parte das vezes o que temos uma imagem numa cor quase transparente (marca dagua). Para colocar uma Figura como fundo da pgina basta alterar o atributo background da tag <body>. Digite o cdigo a seguir. Voc dever possuir uma Figura para ser carregada como background, voc poder salvar uma de qualquer site da Internet.
<body background="Figura.gif">
Tome o devido cuidado para no utilizar uma Figura de tons fortes pois isto poder atrapalhar a leitura.
55
Cor do fundo da tela com bgcolor

Este atributo tambm dever ser utilizado com o <body>. Atravs dele voc poder determinar uma cor para o fundo da pgina. Experimente alterar o fundo de nossa pgina index. Realize a alterao na tag <body> como mostrado a seguir:
<body bgcolor="#FFFFCC">
Visualize no seu navegador. Voc j sabe que todas as cores da natureza so, na verdade, uma mistura de 3 cores bsicas. No computador no poderia deixar de ser diferente. As 3 cores neste caso so: R - Vermelho G - Verde B - Azul A seguir voc ter uma explicao mair detalhada sobre as composio das cores.
Funcionamento das cores em hexadecimal

A formatao de cores na tela segue um padro conhecido como RGB. Assim como na natureza, a formatao de cores na tela do computador , na verdade, uma mistura de 3 cores: Vermelho (Red), Green (Verde) e Blue (Azul). Para utilizar uma determinada cor, precisamos saber o quanto temos que misturar de cada uma das cores bsicas pelo computador. Esta mistura de cores dever ser informada em hexadecimal. Entretanto, calcular a quantidade exata uma tarefa extremamente rdua. Quase sempre precisaremos utilizar algum programa (como o Dreamweaver ou o FrontPage) que ir gerar o nmero em hexadecimal, com base na cor que escolhermos. A quantidade de cor que voc poder utilizar pode variar de 1 a 255. As cores esto divididas em 3 grupos: #RR GG BB, cada um indicando a quantidade a ser utilizada de cada uma das cores (vermelho, verde e azul). Por exemplo: se quisermos a cor azul, devemos utilizar: 00 00 125 que indica a quantidade 125 de cor azul (que pode variar de 0 a 255) e nenhuma das outras cores. Para adicionar vermelho basta informar, como exemplo: 100 00 125. Aqui continuamos a no utilizar o verde. Entretanto, precisamos informar as cores em Hexadecimal. Neste sistema de numerao os nmeros variam de 1 at F (1 a 15 no sistema decimal). A calculadora
56
do Windows pode fazer esta transformao de uma forma muito simples: abra a calculadora, passe-a para o modo cientfica, digite o nmero em decimal (informe 125 por exemplo), agora escolha a opo hex. O valor informado dever ser: 7D, este o valor 125 em hexadecimal. Fazendo o mesmo para o nmero 100, voc encontrar: 64 (em hexadecimal). Mas como saber a quantidade exata de cores a utilizar para fazer, por exemplo, um azul celeste? muito trabalhoso! Voc ter que ir experimentando at encontrar a cor que deseja. Ento como fazer? Simples, voc aprender a escolher a cor e o programa que voc estiver utilizando se encarrega de montar o valor para voc. Porm, saber como funciona fundamental para um Webmaster.
Definindo as cores dos links

Nossa pgina index.html possui um link para a pgina oficial da Top Training. A princpio este link se apresenta na cor AZUL quando ainda no clicado. Ao ser clicado passa para a cor VIOLETA. Existem alguns atributos na tag <body> que definem as cores dos links. LINK LINK ALINK Links ainda no visitados J visitados Links ativos
Altere a tag <body> do nosso documento para que ela fique como segue:
<body bgcolor = "#FFFFCC" link = "#FF0000" vlink=" #008080" alink="#FFFFCC">
Inserindo linhas
Anteriormente utilizamos o comando <HR> para produzir uma linha horizontal em nossa pgina. Agora conheceremos as demais opes em relao a ela. Altere nossa pgina para que fique como segue:
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: <html> <head> <title>TOPTC.COM.BR</title> </head> <body> <h1><center>TOP TRAINING CENTER</center></h1> <h2><center>Cursos de Informtica</center></h2> <h2><center>Atendimento individualizado </center></h2> <hr> <center>
Linguagens para Desenvolvimento na Web HTML 11: 12: 13: 14: 15: 16: 17: 18: Horrios flexveis <p> Apio extra curso <br> Certificado no final do curso <hr width="80%"> <hr width="50%" size="5" color="#800000"> </center> </body> </html>
57
Aps digitar, salve o arquivo e carregue-o no navegador. Veja como funciona: WIDTH Porcentagem total da linha em relao tela SIZE Espessura da linha em pixels COLOR Cor a ser utilizada na linha
Tabelas em HTML
Voc poder (e dever) utilizar tabelas para organizar a disposio das informaes na tela, sejam elas texto ou figuras. Criar tabelas no HTML pode ser um trabalho penoso, principalmente se a tabela a ser criada for complexa. No entanto, o resultado final compensador. Veja quais so as tags utilizadas para criar tabelas.
<TABLE></TABLE>
Esta tag inicia e termina uma tabela.

<TR></TR>
A tag <tr> determina cada uma das linhas de uma tabela.

<TD></TD>
A tag <td> ir determinar as clulas de cada uma das linhas.

<TH></TH>
Utilizados para definir os ttulos da tabela. A nica diferena deles para o <td> que o texto aparecer em negrito. Para ficar mais claro, vamos a um exemplo:
1: 2: 3: <html> <head> <title>TOPTC.COM.BR</title>
58 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41:
Como se tornar um WEBMASTER </head> <body> <h1><center>TOP TRAINING CENTER</center></h1> <h2><center>Cursos de Informtica</center></h2> <h2><center>Atendimento individualizado </center></h2> <hr> <center> <table border="1"> <tr> <td width="25%"> <p align="center"><b>CURSOS</b></td> <td width="25%" align="center"><b>MATERIAL</b></td> <td width="25%" align="center"><b>CERTIFICADO</b></td> <td width="25%" align="center"><b>APOIO EXTRA CURSO </b></td> </tr> <tr> <td width="25%"><b>BSICO</b></td> <td width="25%" align="center"> <p align="center">SIM</td> <td width="25%" align="center">SIM</td> <td width="25%" align="center">SIM</td> </tr> <tr> <td width="25%"><b>WEBMASTER</b></td> <td width="25%" align="center">SIM</td> <td width="25%" align="center">SIM</td> <td width="25%" align="center">SIM</td> </tr> <tr> <td width="25%"><b>WEBDESIGN</b></td> <td width="25%" align="center">SIM</td> <td width="25%" align="center">SIM</td> <td width="25%" align="center">SIM</td> </tr> </table> </center> </body> </html>
Aps digitar os cdigos citados, salve seu arquivo e abra no browser.
59
Os atributos de uma tabela

As marcaes das tabelas podem apresentar resultados diferentes, se acompanhadas de alguns atributos. Vamos ver os principais:
<BORDER>
Dever ser utilizado junto com a tab <table> e define se a tabela dever conter bordas ou no.
<ALIGN>
Define o alinhamento horizontal das clulas.

<VALIGN>
Define o alinhamento vertical.

<NOWRAP>
Utilizado para evitar a quebra de linha dentro da clula.

<COLSPAN>
Aplicado com TH ou TD. Especifica quantas colunas uma clula ir conter.
Criando Formulrios
Este etapa de grande importncia para voc que deseja se tornar um Webmaster. Os formulrios aparecero em praticamente todos os sites que voc ir criar. Por exemplo: no cadastro de itens, no cadastro de um visitante ao site, na seleo de itens para colocar no carrinho de compras de um site de e-commerce, entre outras dezenas de finalidades. At agora utilizamos apenas uma pgina que foi alterada no decorrer deste captulo. Agora crie uma nova pgina e salve-a com o nome de form.HTML. Voc dever digitar os cdigos a seguir com o mximo de cuidado para no errar, pois qualquer erro poder resultar em um formulrio mal formatado ou faltando campos. Aps digitar os cdigos iremos lhe apresentar cada um dos comandos utilizados.
1: 2: 3: 4: 5: 6: 7: <html> <head> <title>toptc.com.br</title> </head> <body> <p><b><font size="2" color="#000080" face="verdana">Formulrio de contato </font> </b> </p>
60 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30:
Como se tornar um WEBMASTER <form method="post" action="http://www.toptc.com.br/cgi-bin/formulario/ formulario.asp"> <p><font face="verdana" size="2"><b>nome: <input type="text" name="t1" Size="45"></b></font></p> <p><font face="verdana" size="2"><b>e-mail: <input type="text" name="t2" Size="20"></b></font></p> <p><font face="verdana" size="2"><b>uf: <select size="1" name="d1"> <option>MG</option> <option>SP</option> <option>RJ</option> </select> </b></font></p><p> <font face="verdana" size="2"> <b> sugesto: </b> </font> </p> <p> <font face="verdana" size="2"><b><textarea rows=2 name=s1" cols=20> </textarea> </b></font></p> <p><font face="verdana" size="2"><b>sexo: <input type="radio" value="v1" checked name="r1">M<input type="radio" name="r1" value="v2"> F </b> </font> </p> <p><font face="verdana" size="2"><b><input type="submit" value="submeter" name="b1"><input type="reset" value="redefinir" name="b2"></b></font></p> </form> </body> </html>
Salve seu arquivo e abra no navegador. Na seqncia voc ter uma explicao detalhada sobre cada tag utilizada neste formulrio. Um formulrio pode ser criado com a tag <form>. Para que um formulrio funcione, ele precisa chamar um script que ir processar os dados e executar o que for necessrio (Por exemplo, armazenar em um banco de dados as informaes digitadas). No nosso caso foi utilizado um ASP que est no site da toptc.com.br. Voc pode ver esta informao nas linhas 8 e 9 do cdigo anterior. A maioria dos provedores de acesso disponibilizam um CGI ou ASP para que voc possa processar seus formulrios. Voc aprender mais sobre como estes so criados nos captulos sobre ASP (10 e 11). O formulrio precisa saber para onde enviar a informao. Esta a URL sendo ativada a partir do formulrio, e ela referenciada atravs da marcao ACTION. Esta URL em geral aponta para um script CGI ou ASP que ir receber e decodificar os resultados. Voc precisa incluir a URL completa. No endereo a seguir temos um ASP processador de formulrios.
ACTION="www.toptc.com.br/cgi-bin/formulario/formulario.asp"
61
Aps voc construir estas marcaes, seu formulrio geralmente ter a seguinte estrutura:
<FORM METHOD="POST" ACTION="http://endereo/prog.asp">
<Marcaes do formulrio>
</FORM>
Como j dissemos, voc aprender mais sobre o processador de formulrios quando comear o captulo sobre a Loja Virtual. Por hora voc poder utilizar o ASP citado, entretanto, para test-lo voc precisar estar conectado Web.
Analisando as tags de um formulrio

Agora vamos analisar cada uma das tags do formulrio. Recomendamos que voc v experimentando as opes no seu formulrio inicial, conforme for entendendo o funcionamento de cada uma das tags.
<TEXT>
Cria um campo para que o usurio entre com sua digitao.

VALUE=""
Apresenta o texto default ao usurio.

SIZE=""
Tamanho de exibio do campo na tela.

MAXLENGTH=""
Limita o tamanho do campo que o usurio ter para digitar.

<TEXTAREA>
Cria uma rea maior que a <text> para que o usurio digite textos maiores.
ROWS=""
Nmero de linhas.
COLS=""
Nmero de colunas.
<SELECT>
Utilizada para criar listas de opes.

<OPTION>
Em cada <option> ficar a descrio da opo.
62 VALUE=""
No value iremos especificar qual o valor a ser enviado para o processador de formulrio. Caso ele no esteja presente, ser enviado o prprio texto em <option>.
SELECTED
Especifica qual ser a opo default.

<select size="1" name="d1"> <option>MG</option> <option>SP</option> <option selected>RJ</option> </select> <RADIO>
Utilizada para criar os famosos botes de rdio.

VALUE=""
Idntico ao <value> do select.

CHECKED
Especifica qual ser a opo marcada como default. Vamos novamente alterar nosso formulrio para que o sexo F fique selecionado. Veja onde voc dever alterar.
<input type="radio" value="v1" name="r1">m<input type="radio" name="r1" value="v2" checked>f <RESET>
Permite que o usurio limpe o texto digitado em todos os campos do formulrio de uma nica vez.
<SUBMIT>
Executa o envio do formulrio para o endereo especificado em <action> No se intimide com a quantidade de cdigo utilizado para se montar um formulrio. Quando voc for utilizar o FrontPage ou o Dreamweaver para montar suas pginas, voc ver que basta clicar e arrastar para incluir campos. Por hora, experimente criar novos formulrios, lembrando que a prtica leva perfeio.
No Captulo 4 voc aprendeu como funciona a programao em HTML. A partir deste momento voc ir descobrir que possvel tornar o HTML muito mais dinmico e interativo com a utilizao da programao em JavaScript. O JavaScript fruto direto da linguagem de programao Java. Nesta ltima temos um ambiente completo para desenvolvimento de aplicativos para a Internet ou no. A estrutura de programao em JavaScript bastante semelhante utilizada pelo Java, porm, o JavaScript foi desenvolvido apenas para utilizao na Internet. A programao em JavaScript dever ser realizada em conjunto com o HTML. Quando o browser encontrar comandos em JavaScript ir interpret-los e apresentar os resultados do processamento.
JavaScript
Um dos principais usos da linguagem JavaScript no processamento de informaes contidas em formulrios. Vamos a um exemplo: suponha que voc tenha criado um formulrio em HTML para receber dados sobre uma compra e que um dos campos seja o CPF do usurio. Caso o usurio digite uma informao errada (como normalmente acontece), utilizando apenas o HTML voc no tem nenhuma chance de pedir para que ele o corrija. Com a utilizao do JavaScript podemos capturar o que ele digitou e verificar se o que foi digitado est correto. Mas este apenas um exemplo. Na verdade a programao em JavaScript ilimitada. Atualmente temos na Internet bons sites sobre o assunto, inclusive com exemplos que voc pode utilizar em suas pginas.
63
64
Um primeiro exemplo
Abra o bloco de notas (ou outro editor que permita arquivos em formato texto) e digite o cdigo a seguir. Utilize maisculas apenas onde for indicado.
1: 2: 3: 4: 5: 6: 7: 8: <html> <head></head> <body> <script language = "Javascript"> alert("Ol, este seu primeiro programa ") </script> </body> </html>
Veja que os cdigos em JavaScript esto entre as linhas 4 e 6. A funo alert() que est na linha 5, faz com que surja uma janela com a mensagem digitada. O ideal voc criar uma subpasta para receber seus cdigos. Utilize sempre a digitao do cdigo em JavaScript entre os marcadores <script> e </script>. Nos exemplos colocaremos apenas a parte do programa em JavaScript. Altere a parte do documento anterior que contm o JavaScript para que fique como segue:
1: 2: 3: 4: <script language="Javascript"> document.write("Este texto aparecer normal seguido de um "); document.write("<b> texto em negrito </b>"); </script>
Aps alterar, carregue no navegador e veja os resultados.
Colocando comentrios em seu cdigo

Um comentrio nada mais do que uma parte do seu cdigo que no ser executada pelo navegador. Veja um exemplo de comentrio:
/* Calculo do imposto imposto = vendas* 0.7 */
O contedo entre /* e */ no ser executado pelo navegador e servir apenas como comentrio. Ou seja, tudo que estiver dentro do comentrio no ser executado, mesmo que seja algum comando da linguagem JavaScript.
Linguagens para Desenvolvimento na Web JavaScript
65
Outro exemplo seria:

// A seguinte rotina calcula o salrio do funcionrio salliquido = salbruto* 1.7
Neste exemplo apenas a linha que contm // no ser executada. Voc poder utilizar este tipo de comentrio quando precisar comentar poucas linhas.
Interagindo com o usurio

Voc deve ter ficado espantado com a simplicidade do cdigo necessrio para o JavaScript. Veremos a seguir um programa muito til para solicitar uma digitao ao usurio e, posteriormente, colocar na tela o que ele digitou.
1: 2: 3: 4: <script language="Javascript"> nome=window.prompt("Como voc se chama?",""); document.write("Ol "+ nome + ", seja bem vindo a minha home page"); </script>
Aparecer uma janela solicitando ao usurio que digite seu nome na linha 2 e a palavra digitada ser armazenada na varivel nome. Em seguida, ela ser utilizada no comando document.write que imprimir o nome do usurio juntamente com uma mensagem de boas vindas. No se preocupe com a sintaxe vista a agora, logo ir se acostumar. Estes et xemplos serviro unicamente para permitir a voc familiarizar-se com o ambiente JavaScript e, ao mesmo tempo, perceber na prtica o poder desta linguagem. No exemplo a seguir, onde uma resposta solicitada ao usurio, voc perceber o potencial do JavaScript:
1: 2: 3: 4: 5: <script language="Javascript"> x = window.prompt("informe a cor que gostaria para o fundo (blue/orange/red/green) ou digite um valor numrico","") document.bgColor = x document.write ("<center> Se voc no gostou atualize a pgina </center>") </script>
A linha 2 deve ser digitada at fechar o parntese sem o salto de linha.
66
Criando variveis
As variveis sero utilizadas para armazenarmos valores que podem ser numricos ou alfanumricos (letras e smbolos). O tipo da varivel ir depender unicamente do seu contedo. Veja:
nome imposto = "Carlos" = 350
Neste caso foi criada a varivel nome que passou a conter a palavra Carlos. Como voc pode perceber, para criar variveis literais utilize aspas, o que no necessrio para as variveis numricas.
Operadores lgicos
Os operadores lgicos possuem diversas finalidades tais como: atribuir valores a variveis e realizar comparaes, entre outras. Os principais operadores so:
== != > >= < <= && || Igual Diferente Maior Maior ou Igual Menor Menor ou Igual E Ou
Veja um exemplo de cdigo para criao de variveis e utilizao dos operadores.

1: 2: 3: 4: 5: 6: 7: 8: <script language="Javascript"> a = 4; b = 5; c = a / b; if ( c > 1 ) document.write ( " A operao A dividido por B maior que 1 "); else document.write ( " A operao A dividido por B menor que 1 "); </script>
Aqui temos algumas novidades. Na linha 2 temos a utilizao de dois comandos, possvel desde que sejam separados por ; (ponto-e-vrgula). O comando if que aparece na linha 4 testa se a varivel c maior do que 1. Em caso afirmativo, ele executa o primeiro document.write e, em caso negativo, ele executar o segundo. Voc ver a sintaxe completa do comando if nas pginas que se seguem.
67
Operadores matemticos
Os operadores matemticos so simples e funcionam basicamente como uma calculadora convencional. No decorrer do livro voc ter vrios exemplos do uso destes operadores. Veja quais so: + * / % Adio de nmeros e concatenao de strings Subtrao Multiplicao Diviso Clculo do resto de uma diviso
Digite o programa a seguir e veja os resultados:

1: 2: 3: 4: 5: 6: <script language="Javascript"> x = window.prompt("infome o primeiro valor"," ") y = window.prompt("infome o segundo valor"," ") z=x*y alert("a multiplicao resulta: " + z) </script>
Veja o potencial da linguagem JavaScript digitando o exemplo a seguir:

1: 2: 3: 4: 5: 6: 7: <script language="Javascript"> x = window.prompt("infome o valor de a:"," ") y = window.prompt("infome um valor menor para b:"," ") resto = x % y z = (x - resto) / y document.write( x + " dividido por " + y + " igual a " + z + " e sobra " + resto) </script>
Nas linhas 2 e 3 o programa solicita ao usurio que digite valores para as variveis x e y. Na linha 4 o resto da diviso colocado dentro da varivel resto. Em seguida a varivel z recebe o valor de x menos o resto dividido por y. Por fim, na linha 6 todas as variveis so impressas na tela.
Operadores condicionais
Os operadores condicionais so muito utilizados durante o desenvolvimento de um programa, por menor que ele seja. Atravs deles podemos, por exemplo, determinar a execuo de um trecho de programa em detrimento de outro. Veja pelo exemplo a seguir:
68 1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11:
Como se tornar um WEBMASTER <script language="Javascript"> a = 20; b = 10 if(a>b) { document.write ("o valor de A maior") } else { document.write ("o valor de B maior") } </script>
No exemplo anterior, se voc alterar o valor da varivel a para qualquer valor menor do que b, ento o document.write executado ser o q est dentro do ue else (que traduzindo significa se no). Exerccio #1 Agora temos alguns desafios para voc. Tente resolver os problemas propostos adiante. Caso voc no consiga, a soluo est no final deste captulo. O ideal que voc se esforce ao mximo para resolv-los, no entanto, lembre-se de que voc est apenas comeando. a) Crie um programa onde o usurio digite sua idade (utilize window.prompt) e o programa calcule quantos dias de vida ela tem. Utilize a seguinte frmula: dias = eval(idade)*365. (A finalidade da funo eval(idade) a de converter o texto digitado em um valor numrico). b) Em outro programa, solicite ao usurio que digite sua idade (utilize window.prompt), verifique o valor informado (if) e emita uma mensagem ao usurio (alert() ) para os casos a seguir: Menor que 18: Pgina imprpria para menores de 18 anos. Maior ou igual a 18: Entre e divirta-se. c) Faa um programa que leia 3 variveis (a,b,c), calcule a soma e a multiplicao entre eles. Utilize eval(varivel) para transformar a entrada do usurio em valor numrico. E, em seguida, mostre na tela com a funo alert().
69
Criando laos no programa (loops)

Os loops podem ser entendidos como seqncias de cdigos que iro se repetir por um determinado nmero de vezes. Desta maneira poderemos executar tarefas repetitivas de uma forma controlada. Digite o exemplo a seguir:
1: 2: 3: 4: 5: 6: 7: 8: 9: <script language="Javascript"> // Calculo da soma dos 10 primeiros nmeros inteiros y=0 for(x=1;x<=10;x++) { y=y+x } document.write("a soma dos 10 primeiros nmeros inteiros : </script>
"+ y)
O cdigo citado simples: na linha 2 temos um comentrio (apenas para dizer o que o programa ir fazer), na linha 4 temos o lao for. Dentro deste lao temos a varivel x comeando com o valor 1; em seguida a condio de parada do loop, at quando x seja menor ou igual (<= ) a 10; e o incremento de x (x++), que faz com que x seja incrementado de 1 em 1. A prxima idia fazer um lao enquanto uma condio for verdadeira. Para isto utilizaremos o comando while.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: <script language="Javascript"> // soma dos 10 primeiros nmeros inteiros y=0 x = 1; while (x<=10) { y=y+x x=x+1 } document.write("a soma dos 10 primeiros nmeros : "+ y) </script>
No exemplo a seguir o comando while utilizado para no permitir que o usurio entre na pgina enquanto no responder corretamente pergunta feita:
1: <script language="Javascript">
70 2: 3: 4: 5: 6: 7: 8:
Como se tornar um WEBMASTER resposta=window.prompt("responda para entrar: qual a metade de 2+2?"," ") while (resposta!=3) { resposta=window.prompt("voc errou: qual a metade de 2+2?","") } alert("parabns voc acertou!") </script>
Perceba que temos uma brincadeira neste script. Voc pode descobrir qual ? Estas so as duas formas mais usuais de se criar um loop. Utilizamos for quando soubemos quantas vezes o loop dever ser executado. Geralmente este loop ter um valor inicial, uma condio de parada e um incremento. No exemplo com for criamos um lao com incremento de 1 em 1. Veja no exemplo a seguir como podero ser criados outros incrementos: for(x=0;x<200;x=x+2) J o lao com a instruo while dever ser utilizado quando no soubermos qual a condio de parada. Um bom exemplo disto quando voc solicita seu extrato no banco. O sistema consulta a base de dados mas no sabe quantos r egistros de movimentao ele ir encontrar. Com isto o lao que ir mostrar as linhas de seu extrato no ter uma quantidade exata, depender da quantidade de informaes presentes no banco de dados. Se estiver confuso no se preocupe. Nos captulos sobre ASP (11 e 12) voc ter vrios exemplos da utilizao de loops.
Criando funes
Se fosse possvel definir as funes em poucas palavras poderamos dizer que so pequenos trechos de programas que podemos chamar a partir de um programa principal. Mas desta forma estaramos sendo simplistas. As funes podem fazer muito mais por nossos sistemas. A partir da utilizao de funes podemos simplificar sobremaneira o desenvolvimento de aplicativos. Dentro das funes geralmente esto cdigos de programao que normalmente precisaramos digitar mais vezes dentro do nosso programa principal. Utilizando funo precisamos criar os cdigos apenas uma vez e podemos cham-los quando for preciso. Suponha por exemplo uma funo para somar dois nmeros.
Linguagens para Desenvolvimento na Web JavaScript 2: 3: 4: 5: 6: 7: 8: 9: 10: function soma(x,y) { var soma; soma = x+y; return(soma); } total = soma(5,7); document.write("a soma : ",total); </script>
71
Vamos tentar entender os cdigos citados. Na linha 2 uma funo com o nome de soma criada (ela poderia ter qualquer outro nome). Toda funo dever estar envolvida por chaves {}, como entre as linhas 3 e 7. Esta funo recebe dois parmetros (x e y), soma os dois na linha 5 e retorna o resultado na linha 6. No entanto voc poder ter funes que no retornem valor algum. O programa principal comea na linha 8. Nesta linha temos uma chamada funo soma, passando dois parmetros 5 e 7 (os quais sero as variveis x e y dentro da funo). O retorno da funo ser atribudo varivel total. Na linha 9 a varivel total impressa. Este foi um exemplo extremamente simples. Mas ele pode dar a exata noo de como funcionam as funes. Exerccio #2 Crie uma funo para receber um valor pelo teclado (window.prompt) e, a seguir, verificar se o valor digitado est entre 0 e 10. Utilizando if emita uma mensagem de alert para informar ao usurio sobre o resultado da verificao: O valor est entre 0 e 10 ou O valor no est entre 0 e 10". Tente resolver o problema sozinho, mas caso tenha dvidas, d uma olhadinha no final do captulo.
A hierarquia de objetos do JavaScript

Tudo que voc fez at agora foi manipular objetos que esto prontos dentro do browser. Este objetos podem ser vistos como pequenos programas que possuem caractersticas prprias as quais podem ser consultadas e em alguns casos at mesmo manipuladas.
72
Os objetos so o que existe de mais moderno na programao comercial atualmente. Na verdade voc poder encontrar valiosas informaes sobre a programao orientada a objetos em livros sobre o assunto ou at mesmo em tutoriais na Internet. O JavaScript implementa algumas das propriedades da orientao a objetos, o suficiente para facilitar em muito o desenvolvimento de aplicativos na web. A partir desta seo voc aprender a manipular os objetos mais importantes do navegador. Primeiramente vamos ver quais so os objetos que podem ser manipulados e qual a sua hierarquia.
window parent location history document frames self Top
forms links anchors Elements
text password button
textarea radio submit
checkbox select reset
Aprenderemos a manipular vrios dos objetos que voc pode ver na estrutura apresentada. Na verdade alguns deles voc j conhece. Por exemplo, quando voc utiliza a funo alert(), na verdade ela um mtodo do objeto window. A sintaxe completa seria:
window.alert(texto)
Neste livro mostraremos a maior parte dos objetos e mtodos que voc vai precisar no dia-a-dia, mas no se assuste de se deparar com algo novo quando for utilizar rotinas prontas da Internet.
Manipulando eventos
At agora falamos em uma parte do assunto sobre JavaScript que est muito ligado lgica de programao, ou seja, ir exigir que voc estude bastante para que tenha facilidade no desenvolvimento de programas. Mas a partir deste momento entraremos em assuntos que esto mais ligados Internet propriamente dita, atravs de objetos que j esto prontos no navegador. Podemos manipular um tipo de evento que diz respeito ao objeto document. Iremos controlar o que ir ocorrer quando o usurio entrar ou sair da pgina. Com
73
isto poderemos dar boas vindas quando ele entrar na pgina, ou agradecer sua visita quando deix-la. Digite o exemplo a seguir e veja os resultados:
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: <html><head><title></title></head> <script Language="Javascript"> function obrigado() { alert("Obrigado por sua visita") } </script> <body onload="obrigado()"> <p><input type="button" value="Clique-me" onClick= "alert('OK')" > </p> <CENTER> VOC EST ENTRANDO EM UM NOVO MUNDO </CENTER> </body> </html>
Perceba que na linha 8 o evento onload faz com que a funo obrigado() seja acionada. Voc poder utilizar:
onload onunload Ocorre ao abrir o documento. Ocorre ao fechar o documento.
Todos dois devem ser utilizados como um complemento para a tag body.
Manipulando strings
Vamos aprender de uma forma bem prtica os mtodos mais importantes disponveis. Crie um novo documento e digite o seguinte programa:
1: 2: 3: <script language=Javascript> nome = "Top Training Center" </script>
Agora vamos imaginar que voc precise saber qual o tamanho em caracteres (incluindo os espaos) do texto armazenado na string nome. Para isto basta acrescentar as seguintes linhas no cdigo:
1: 2: 3: 4: <script language=Javascript> nome = "Top Training Center" tamanho= nome.length document.write("O nmero de letras do nome " + tamanho)
74 5: </script>
Faa o teste e verifique que voc acaba de aprender que variavel.length retorna o tamanho da string (quantidade de caracteres). E se voc quisesse saber qual a letra que ocupa a posio 6 da string nome? simples, basta alterar o cdigo que voc tem no momento para que ele fique igual ao mostrado a seguir:
1: 2: 3: 4: 5: <script language=Javascript> nome = "Top Training Center" letra = nome.charAt(6) document.write("A sexta letra a partir da esquerda : " + letra) </script>
A nova propriedade variavel.charAt(posio) que retorna o caractere da posio especificada. Faa o teste e voc vai perceber que neste comando a letra T ocupa a posio 0 (zero), a vogal "o" ocupa a posio 1 (um) e assim por diante. Para fazer o contrrio, isto , fornecer a letra e o JavaScript retornar a posio dela, usaremos o comando varivel.indexOf("string"). Mude o cdigo para o seguinte:
1: 2: 3: 4: 5: <script language=Javascript> nome = "Top Training Center" posi = nome. indexOf("e") document.write("A posio da letra 'e' " + posi) </script>
Ao fazer o teste voc ver que o resultado ser posio = 14. Isto acontece porque o comando nome.indexOf("e") retorna a posio do primeiro "e" a partir da esquerda. Mas, e se precisssemos da posio do ltimo "e"? Ento usaramos o comando nome.lastIndexOf("e") que retorna o a posio da ltima string. Faa a alterao necessria no cdigo e verifique o funcionamento. Agora vamos tentar imprimir na tela apenas a palavra "Training" da string nome. Para isso utilizaremos variavel.substring(ind0, ind1) onde o ind0 dever indicar a posio do primeiro caractere e o ind1 indicar a posio do ltimo caractere da substring a ser retornado. Altere o cdigo da seguinte forma para depois test-lo:
1: 2: 3: <script language=Javascript> nome = "Top Training Center" pedaco = nome. substring(4, 12)
Linguagens para Desenvolvimento na Web JavaScript 4: 5: document.write("Uma parte do nome " + pedaco) </script>
75
Outros dois comandos interessantes so o variavel.toUpperCase(), que converte a string para maisculo e o variavel.toLowerCase(), que transforma para minsculo. Digite o exemplo adiante e veja estes comandos em funcionamento:
1: 2: 3: 4: 5: 6: <script language=Javascript> nome = "Top Training Center" minus = nome. toLowerCase() max = nome.toUpperCase() document.write("Em minsculo: " + minus + " e em maisculo assim "+ max) </script>
Exerccio #3 Faa um programa para receber uma entrada do usurio. Em seguida converta o texto digitado para maisculo. O programa dever tambm calcular quantas letras a varivel digitada possui.
Manipulando datas
Para manipulao de datas temos a funo date(). Esta funo retorna uma string com a data atual como no exemplo a seguir: Exemplo: Tera Maio 24 16:58:02 1996 Para se obter os dados separadamente, utilizaremos os seguintes mtodos: variavel.getDate() variavel.getDay() variavel.getMonth() variavel.getYear() variavel.getHours() variavel.getMinutes() variavel.getSeconds() Dia do ms (numrico de 1 a 31) Dia da semana (0 a 6) Ms (numrico de 0 a 11) Ano Hora (numrico de 0 a 23) Minutos (numrico de 0 a 59) Segundos (numrico de 0 a 59)
Digite o exemplo a seguir e veja o resultado.

1: 2: 3: 4: <script language="Javascript"> datat = new Date() diah = datat.getDate() mesh = datat.getMonth()
76 5: 6:
Como se tornar um WEBMASTER document.write("dia: " + diah + " mes: "+ mesh) </script>
Vamos entender o cdigo: na linha 2 um novo objeto criado contendo uma estrutura para receber a data completa do sistema (dia/ms/ano hora/minuto/segundo). Na linha 3 estamos extraindo do objeto datat apenas o dia (getDate), na linha 4 estamos extraindo o ms (getMonth), e para finalizar, na linha 5 o programa imprime as variveis carregadas com o dia e o ms. Voc poder utilizar qualquer um dos outros recursos. O funcionamento idntico. Exerccio #4 Faa um programa para verificar a hora atual, se maior que 18:00Hs ou menor que 6:00Hs imprima "Boa Noite", do contrrio imprima "Bom dia". (Utilize: if((hora>=18) || (hora<=6)) para fazer a verificao).
Elementos relacionados com o browser

Alguns elementos relacionados com o browser permitem que sejam acessados recursos presentes no navegador do usurio. Podemos, por exemplo, simular o clique no boto voltar ou avanar. Veja:
Objeto history
Utilizando o objeto history (o boto histrico do navegador), podemos manipular: back() forward() go(x)
1: 2: 3: 4:
-Retorna ao documento visitado anteriormente -Avana para o documento seguinte -Avana para a pgina na posio (x) armazenada no history.
<script language="Javascript"> document.write("<a href='Javascript:history.go(-1)'> anterior </a> </p> ") document.write("<a href = 'Javascript:history.forward()' > prxima </a></p>") </script>
Objeto document
Este objeto contm informaes sobre o documento carregado atualmente pelo navegador. Algumas das informaes so dinmicas, o que nos permite alter-las e ver os resultados imediatamente.
77
Veja as propriedades que poderemos alterar: document.bgColor document.fgColor document.linkColor document.vlinkColor document.location ="cor" ="cor" ="cor" ="cor" Altera a cor do fundo dinamicamente Cor do texto Cor dos links A cor dos links visitados Informa qual a URL corrente
As cores podero ser expressas por seu nome em ingls, um nmero em decimal ou hexadecimal (#RRGGBB).
1: 2: 3: 4: 5: <script language="Javascript"> document.bgColor = "orange" documento = document.location document.write("caminho do documento atual: "+ documento) </script>
Objeto window
Voc j utilizou diversos objetos nos programas vistos anteriormente. O objeto window o pai de todos os outros, o que pode ser constatado na hierarquia de objetos vista anteriormente. Veja algumas operaes que podem ser realizadas com este objeto. window.confirm("mensagem") Faz surgir uma janela de confirmao. (Retorna True ou False de acordo com o que o usurio escolheu). window.open(URL) Abre uma janela e carrega a URL(http://www.....). window.prompt(msg,resp) Abre uma janela que aceita uma entrada. window.setTimeout("funco()",x) Aps x seg. executa a funo(). Onde x dever ser multiplicado por 1000 para significar 1 segundo. Exemplo:
78 2: 3: window.open("http://www.toptc.com.br") </script>
Veja como utilizar a funo window.status = "Texto" para colocar uma mensagem no rodap do navegador.
1: 2: 3: 4: 5: 6: 7: <script language="Javascript"> function rodape() { window.status = "esta uma mensagem na barra de status" } setTimeout("rodape()",100); </script>
Inserindo e controlando figuras

Manipular figuras com o JavaScript muito simples. Com ele podemos utilizar recursos como: carregar imagens apenas em uma determinada hora, alterar figuras conforme uma escolha do usurio, entre outros. Quando a sua pgina carrega um arquivo de imagem, ela lana mo da seguinte tag em HTML.
<img src="imagem.gif" name="nome" width=20 >
Quando o navegador carrega esta imagem, ele a coloca dentro de uma estrutura que poder ser manipulada a qualquer momento. Esta estrutura possui algumas caractersticas. So elas: border height hspace name src vspace width Corresponde se haver ou no a borda na Figura Altura da imagem Distncia da margem do documento Nome da imagem URL do arquivo de imagem Posio em relao ao topo da imagem Atributo largura da imagem
Veja um exemplo da manipulao de figuras em uma pgina: (Para este exemplo voc precisar de 3 figuras com a extenso .gif que podem ser copiadas de qualquer site da Internet, no entanto voc precisar alterar os nomes para: figura1.gif, figura2.gif e figura3.gif)
1: 2: <html> <head> </head>
Linguagens para Desenvolvimento na Web JavaScript 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: <body></body> <script language="Javascript"> document.write(" <img src='figura2.gif'> ") op = window.prompt("Escolha a Figura: 1, 2 ou 3", "") if( op == 1) document.images[0].src = "figura1.gif" if( op == 2) document.images[0].src = "figura2.gif" if( op == 3) document.images[0].src = "figura3.gif" </script> </html>
79
Interagindo com o usurio

Na parte sobre HTML voc criou formulrios com vrios campos. Estes dados, depois de digitados pelo usurio, so processados em um servidor de CGI ou ASP e normalmente devolvidos para algum e-mail ou armazenados em um banco de dados. Porm, voc j deve ter se deparado com uma situao do tipo em que necessitasse validar um determinado campo como, por exemplo, a informao de um CGC. Isto no possvel diretamente no HTML. Os programas em JavaScript tm como um dos seus maiores campos de aplicao o processamento local dos dados introduzidos pelo usurio. Digite o exemplo a seguir para ver como o JavaScript ir tratar as informaes do formulrio.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: <script language="Javascript"> function calcula(form) { var soma=eval(form.parcela1.value) + eval(form.parcela2.value); form.resultado.value = soma; } </script> <body> <form> <p>parcela1:<input type="text" name="parcela1" size="20"></p> <p>parcela2: <input type="text" name="parcela2" size="20"></p> <p>resultado: <input type="button" value="Calcular" size="20" onClick="calcula(this.form)"> </p> <p><input type="reset" value="Reset" name="B2"></p> <p><input type="text" name="resultado"> </p> </form></body>
80
Veja um exemplo de uso para o button chamando a funo pressiona:

1: 2: 3: 4: 5: 6: <script LANGUAGE="Javascript"> function pressiona() { alert(" Obrigado ") } </script> <body> <p><input type="button" value="Pressione aqui" name="B1" onClick="pressiona()"> </p></body>
Outro exemplo interessante:

1: 2: 3: 4: 5: 6: 7: 8: <script language="Javascript"> function formata() { alert(" Iniciando a formatao do HD ") } </script> <body> <p align="center"><a href="a" onMouseOver="formata()">Nunca passe o mouse aqui.</a></p> </body>
Resoluo dos exerccios propostos

Exerccio #1
1: 2: 3: 4: 5: 6: 7: 8: 9: 10 1: 2: 3: 4: 5: 6: 7: <html> <head</head> <body> <script language="Javascript"> idade = window.prompt("qual sua idade:","") dias = eval(idade) * 365 document.write("voc tem "+ dias +" dias de vida ") </script> </body> </html> <html> <head</head> <body> <script language="Javascript"> idade = window.prompt("qual sua idade:","") if(idade<18) document.write("pgina imprpria para menores de 18 anos")
Linguagens para Desenvolvimento na Web JavaScript 8: 9: 10: 11: 12: 1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: else document.write("entre e divirta-se") </script> </body> </html> <html> <head></head> <body> <script language="Javascript"> a = window.prompt("informe o primeiro valor","") b = window.prompt("informe o segundo valor","") c = window.prompt("informe o terceiro valor","") soma = eval(a)+eval(b)+eval(c) mult = eval(a)*eval(b)*eval(c) document.write("a soma : "+ soma +"<p>") document.write("a multiplicao : "+ mult) </script> </body> </html>
81
Exerccio #2
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: <html> <head></head> <body> <script language="Javascript"> function verifica(val) { if( val>0 && val<= 10) alert("o valor esta entre 0 e 10") else alert("o nmero no esta entre 0 e 10") } valor = window.prompt("digite um valor entre 1 e 10","") verifica(valor) </script> </body> </html>
82
Exerccio #3
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: <html> <head</head> <body> <script language="Javascript"> dig = window.prompt("digite o seu nome: ","") let = dig.toUpperCase() num = dig.length alert("convertido para maisculas: "+let) alert("o no. de letras : "+ num) </script></body></html>
Exerccio #4
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: <html> <head</head><body> <script language="Javascript"> datatoda = new Date() hora = datatoda.getHours() if( (hora >= 18) || ( hora <=6) ) alert("Boa Noite") else alert("Bom Dia") </script> </body></html>
Neste captulo iremos lhe apresentar o desenvolvimento em WAP. Trata-se de uma tecnologia que ainda subutilizada no Brasil e, um dos motivos para isto se deve ao fato de a apresentao dos dados nos aparelhos WAP ainda ser muito precria. Entretanto, novos displays coloridos provavelmente daro um maior impulso ao desenvolvimento para aparelhos com esta tecnologia. Vale lembrar que at mesmo a Internet j foi feita de arquivos textos puros. Como Webmaster voc precisa conhecer sobre o WML pois as empresas que desenvolvem sites na Internet eventualmente podem precisar do mesmo site para o ambiente WAP. Trata-se de um recurso valioso para intercmbio de informaes e o que melhor, sem a necessidade de se utilizar um computador completo.
WAP
O WAP (Wireless Application Protocol) foi desenvolvido pelo WAP Forum e adotado pela indstria que desenvolve aparelhos celulares com recursos para conexo Internet. Entretanto a maioria dos palmtops tambm pode ler e interpretar pginas escritas em WML.
WML
O WML (Wireless Markup Language) a linguagem de marcao utilizada para exibir documentos em dispositivos compatveis com WAP. Ela muito semelhante ao HTML que voc j conheceu no captulo 4 deste livro, com a principal diferena de que alguns dos recursos presentes no HTML no podem ser utilizados no WML pela limitao dos aparelhos que interpretam as tags.
83
84
A forma de conexo destes aparelhos Internet praticamente a mesma utilizada nos equipamentos desktop, com a diferena de que a maioria deles j vem prconfigurada pela operadora.
Iniciando o editor WAP

Para editar e testar nossos cdigos voc ir precisar instalar um editor WML. Este livro utilizou o Easy Pad Editor mas se voc j possuir algum outro, poder utiliz-lo (uma verso shareware est disponvel no site www.toptc.com.br). Na prtica o funcionamento idntico ao HTML, ou seja, basta voc criar seus cdigos e enviar para o provedor. Entretanto, voc dever se certificar de que o provedor prov servios WAP. A tela a seguir mostra o editor em funcionamento.
Figura 6.1 Do lado esquerdo da tela ficar seu cdigo. direita voc poder ver o resultado do programa clicando sobre o boto Refresh.
A maior parte dos recursos so simples de serem utilizados, principalmente se voc j conhece o HTML. Por exemplo, para criar um texto em negrito, basta digitar, selecionar o texto e clicar no boto B (negrito). Para ver o resultado, clique sobre o Refresh (lado superior direito da tela).
Programao WML (Wap)
85
Deck
Um deck pode ser visto como um arquivo no texto com as marcaes WML. Dentro de um deck temos partes menores chamada cards. Ao contrrio do HTML onde todo o arquivo lido pelo browser, no WML apenas um card de cada vez ser apresentado. As partes necessrias em um deck so: Cabealho XML Declarao do DTD (Definio do Tipo de Documento) Um ou mais cards Vamos explicar cada uma delas: Cabealho XML
<?XML version="1.0"?>
Este cabealho uma exigncia do XML. Atravs dele estamos afirmando que o documento est de acordo com a exigncia do XML. Declarao do DTD (Document Type Definition)
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.XML">
Agora estamos afirmando a conformidade com a especificao do WAP. Esta definio baseada no WAP Forum que trata das especificaes WML.
Caractersticas de um card
<card id="card1" title="Alo Mundo"> cdigo </card>
Como dissemos, um card est dentro de um deck (o arquivo propriamente dito). E dentro do card que iremos colocar nossos cdigos. Atravs do atributo <card id> que representa o nome do card, poderemos navegar entre os cards de um deck.
Criando a primeira pgina em WML

Vamos criar a primeira pgina em nosso editor. Partindo do princpio de que voc j tenha conhecimento de HTML, apresentaremos apenas os cdigos. Altere os cdigos de sua pgina no editor para que fique como segue:
86
1: <?xml version="1.0"?> 2: <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> 3: <wml> 4: <card id="card1" title="Alo Mundo"> 5: <p> 6: Alo Mundo WAP<br/> 7: </p> 8: </card> 9: </wml>
Os textos mostrados pelo WML devem ser inseridos dentro de um pargrafo, que indicado pelas tags <p>....</p>. A tag <br/> serve para quebrar a linha. Aps digitar o cdigo citado crie uma pasta e salve-o. Visualize o resultado clicando sobre Refresh.
Utilizando decks e cards

Cada deck comea e termina com uma tag <wml> e cada card comea e termina com uma tag <card>. Quando o usurio solicita a card de um deck, todo o documento carregado para a memria do dispositivo WAP e, em seguida, a navegao realizada entre os cards do documento. Digite o prximo exemplo e veja os resultados:
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: <?xml version="1.0"?>  <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="principal" title="TOP TRAINING"> <p align="center"><br/> Bem vindo ao WAP. Aqui comea um novo tempo! </p> </card> </wml>
Programao WML (Wap)
87
Criando um hiperlink
A criao de um hiperlink semelhante ao HTML. Uma diferena que voc pode criar links entre os cards de um deck. A sintaxe mostrada a seguir:
<a href="filename">Clique aqui</a> <a href="#cardid"> Clique aqui </a> <a href="filename#cardid"> Clique aqui </a>
Onde filename o nome de um arquivo WML, e cardid o atributo id de um <card> ( a identificao de um card ). Digite o programa a seguir e salve-o como loja.wml
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.XML"> <wml> <card id="home" title="Home Page"> <p> Clique <a href="precos.wml">Aqui </a> para lista de preos. </p> </card> </wml>
Note como o texto do hiperlink est agora marcado, criando assim uma seleo para o usurio. O link neste exemplo especifica um nome de um arquivo WML que ser carregado. Como no HTML, se o arquivo no existir, um erro 404 (arquivo no encontrado) ser gerado pelo navegador. Perceba que podemos carregar um card que no esteja presente na memria no momento, devendo usar a seguinte sintaxe: filename#cardid.
Tags <to><do>
Digite este novo arquivo, salve-o como prog2.wml e executando-o voc ver a funcionalidade das tags <do> e <go>:
1: 2: 3: 4: 5: <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.XML"> <wml> <card id="card1" title="Primeiro Card">
88 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25:
Como se tornar um WEBMASTER <p align="center"> <br/> <big> Este o Card 1 </big> </p> <do type="accept" name="ref1" label="Proximo Card"> <go href="#card2"/> </do> </card> <card id="card2" title="Card 2"> <p align="center"> <br/><i> Este o Card 2 </i></p> <do type="accept" name="ref2" label="Proximo Card"> <go href="#card1"/> </do> </card> </wml>
O programa est dividido em dois cards indicados pelo atributo id: card1, card2. Cada card contm uma referncia para o card seguinte, utilizando-se das tags <do> e <go> .
<do type="accept" name="ref1" label="Proximo Card"> <go href="#card2"/> </do>
Ontimer
Permite determinar um tempo para que uma ao ocorra. muito til para exibirmos, por exemplo, uma pgina inicial em um deck e depois irmos automaticamente para outro card. Veja um exemplo:
1: 2: 3: 4: 5: 6: 7: 8: <wml> <card id="primeira" ontimer="#segunda" title="Usando o timer"> <timer value="50"/> <p> <b> Bem vindo ao WML </b> </p> </card> <card id="segunda" title="Card 2">
Programao WML (Wap) 9: 10: 11: 12: 13: <p> <b> Voc est no segundo CARD</b> </p> </card> </wml>
89
O cdigo citado mandar o seu dispositivo WAP para o segundo card, aps o tempo especificado no timer.
Onpick
Ocorre toda vez que o usurio seleciona ou desseleciona um item dentro de uma lista select do documento WML. Com o evento onpick e a tag select podemos criar listas de opes em nosso documentos. Veja:
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: <wml> <card id= "Times" title = "times"> <p align="left"> Qual o seu time de corao??? <select name="times"> <option value="1" onpick ="#Cruzeiro"> Cruzeiro </option> <option value="2" onpick ="#outrotime"> Outro Time </option> </select> </p> </card> <card id="cruzeiro" title = "5 estrelas"> <p align ="left"> Voc possui bom gosto</p> </card> <card id="outrotime" title ="Outro time"> <p align="left"> Seu gosto no to bom assim...</p> </card> </wml>
Perceba que criamos diversas pginas (cards e menus de seleo) com apenas poucas linhas de cdigo. Essa uma das vantagens do uso de eventos como o onpick.
Tabelas
Como j dissemos, o uso de tabelas pode melhorar a exibio de informaes na tela. As tags para se criar tabelas no WML so semelhantes s do HTML.
90
<table> <tr> <td>

1: 2: 3: 4: 5: 6: 7: 8: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31:
- Incio e o fim da tabela - Linha - Coluna
<wml> <card id="Principal" title ="Tabela"> <p>  <table columns="2" align=left> <!-Aqui comea a primeira linha--> <tr> <td> <b>Produto</b></td> <td> <i>Preo</i></td> </tr> <!-Aqui esto as linhas dos produtos--> <tr> <td>Televisor</td> <td>280,00</td> </tr> <tr> <td>Geladeira</td> <td>1200,00</td> </tr> <tr> <td>Vdeo K7</td> <td>199,00</td> </tr> <tr> <td>Som</td> <td>680,00</td> </tr> </table></p> </card> </wml>
Obtendo dados do usurio (formulrios)

A criao de formulrios de extrema importncia para a interao entre o usurio e o site. Entretanto, eles devem ser evitados em WML pois a digitao de informaes no minsculo teclado de um celular (por exemplo) algo terrvel. Devemos resumir ao mximo esta necessidade. Vamos ver quais so as tags para criao de formulrios.
Programao WML (Wap)
91
A tag <input>
Permite a entrada de dados alfanumricos por parte dos usurios. Vejamos a sua sintaxe e os respectivos atributos:
<input name="Varivel" default="Valor Padro" format="Formato" empty="True" size="Tamanho" maxlength="MaxChar" type="TipoEntrada"/>
NAME Nome do campo. Atributo Obrigatrio. DEFAULT Valor default a ser carregado. FORMAT Mscara de entrada, pode ser: A - Permite letras em maisculas, ou sinal de pontuao. a - Permite apenas letras minsculas, ou sinal de pontuao. N - Permite qualquer nmero. X - Permite qualquer caractere maisculo. x - Permite qualquer caractere minsculo. EMPTYOK Torna a entrada obrigatria caso seja true; se for false (valor default) o campo opcional. SIZE Tamanho do campo em caracteres para exibio. MAXLENGTH Quantidade mxima de caracteres para digitao. TYPE Especifica o tipo de entrada. Pode ser texto ou password. Valor default texto. Voc pode referir uma tag <input> com o valor literal de outra resposta prefixando o elemento name com um caractere dolar ($). Digite o exemplo a seguir para ver como funciona:
1: <card id="card1" title="Exemplo Input"> 2: <p> Digite seu nome:<input name="nome" format="*A"/> 3: <a href="#card2">Resultado</a>
92 4: 5: 6: 7: </p></card> <card id="card2" title="Resultado"> <p> Como vai: $(nome) </p></card>
A tag select
Como no HTML, cria uma lista de opo para o usurio. Diferentes tipos de dispositivos WAP apresentaro a lista de seleo de diversas maneiras e permitiro diferentes mtodos de seleo. Cada elemento da lista dever estar dentro de uma tag <option>. Execute o exemplo a seguir:
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: <card id="card1" title="Exemplo Input"> <p> Selecione a modalidade: <select name="optname" multiple="false"> <option value="1">Futebol</option> <option value="2">Tenis</option> <option value="3">Basquete</option> <option value="4">Baseball</option> </select> </p> </card>
Onde name o nome desta opo, multiple um valor true/false o qual permite a seleo mltipla ou no dos itens. Altere o valor de multiple para true e veja os resultados.
Utilizando variveis
Como vimos em JavaScript, uma varivel possui a capacidade de armazenar um valor dentro dela. Assim como em JavaScript, existe diferena entre letras maisculas e letras minsculas, ou seja, a varivel "$Nome" diferente da varivel "$nome", que tambm diferente de "$NoMe". Uma varivel pode ser criada utilizando-se a instruo setvar. No exemplo a seguir estamos definindo a varivel nome e inserindo na mesma o contedo jose:
<setvar name="apelido" value="ze" /> <setvar name="nome" value="jose" />
Programao WML (Wap)
93
Digite o exemplo que segue, de uma varivel contida em um card.

1: 2: 3: 4: 5: 6: 7: <card id="fornecedor" title="Escolha um fornecedor"> <p> Nome do Fornecedor: <input title="Nome fornecedor" name="fornecedor" value = "Organ. XXXX" /> <do type="accept" label="Limpar conteudo"> <refresh> <setvar name="fornecedor" value=" " /> </refresh> </do> </p> </card>
Entendendo o cdigo: Neste exemplo, atravs da instruo input, mostrado ao usurio que a varivel fornecedor possui o contedo Organ XXXX. A marcao < do> cria uma tarefa que especifica uma ao que ser executada quando a tecla Limpar Contedo for selecionada. No instante em que esta tecla selecionada, o valor da varivel fornecedor atualizada para vazio. Para se realizar uma atualizao na varivel utilizou-se da tarefa refresh.
Que tal aprendermos um pouco sobre essa to falada XML? Para i so dividimos s este captulo em trs sees distintas. Num primeiro momento, veremos conceitos gerais da linguagem XML. Ficaremos sabendo o porqu do seu surgimento, quem a criou, seu objetivo, se ela auto-suficiente, suas vantagens, e ainda como confeccionar e visualizar documentos XML utilizando exemplos prticos, sem a necessidade de instalao de softwares especiais. Na segunda parte, comearemos por criar um documento XML que servir como base para o aprendizado da mesma e da etapa seguinte. Nela, o objetivo lhe mostrar o que um DTD para documentos XML, bem como alguns comandos usados para cri-lo. Finalmente, entraremos em contato com uma das tecnologias que do suporte XML, uma parte da linguagem XSL usada para dar formatao aos documentos XML.
Introduo ao XML
No decorrer da histria, a ISO (International Standard Organization), organizao responsvel pela publicao de padres a serem seguidos nos mais diversos setores das atividades humanas, publicou o padro SGML (Standard Generalized Markup Language Linguagem de Marcao Padro Generalizada). Esta uma linguagem de marcao que se preocupa com a estrutura do documento e no com a sua formatao. E, como est implcito no seu nome, ela de padro generalizado, ou seja, foi projetada para marcar vrios tipos de documentos, tais como memorandos, livros, documentos Web, manuais tcnicos, dicionrios e muitos outros. Inclusive, editoras dos Estados Unidos fizeram um uso intenso da SGML para estruturar suas publicaes. Algo essencial em um documento SGML uma Definio de Tipo de Documento ou DTD (Document Type Definition). uma aplicao que especifica a estrutura do documento escrito em SGML. Uma DTD indica os elementos, seus relacionamentos e as tags a serem usadas para marcar o documento.
94
Iniciando no XML
95
At agora sabemos que a HTML (Hyper Text Markup Language Linguagem de Marcao de Hyper Texto) uma linguagem utilizada para criar um documento Web, preocupando-se principalmente com sua formatao, sua aparncia. O que nos faltava era o conhecimento de que a HTML tambm uma aplicao da SGML, na verdade o conjunto de tags da HTML segue as regras da SGML. A HTML veio porque nos documentos web a formatao imprescindvel, j que sero visualizados por um nmero imenso de pessoas de diferentes pases e culturas. A aparncia do documento facilita em muito sua compreenso e ela no poderia ser realizada apenas com SGML, j que seu ponto forte a estrutura do documento. No entanto, a atualizao freqente de um site um dos maiores segredos para o seu sucesso. Imagine vrias partes de um documento contendo um mesmo formato, especificado, por exemplo, pela tag <FONT FACE = SIZE = COLOR = > </FONT>. Se por acaso, a mudana no site implicar na alterao deste formato, ento ser necessrio modificar as tags em todas as partes do documento que a utilizam. Surgiu assim, na evoluo da HTML, o atributo CLASS e as folhas de estilo. Este atributo CLASS pode ser usado para solucionar o problema descrito antes. Com ele podemos definir, dentro do cabealho do documento HTML, uma formatao desejada dando a ela um nome. Quando formos utilizar a formatao criada, basta chamar pelo nome que definimos. E, assim, qualquer alterao que fizermos nesta formatao definida pelo atributo CLASS, far com que todas as partes do documento HTML que a chamam sejam alteradas automaticamente. J as folhas de estilo nos permitem definir previamente estilos (formatao) para as tags que iremos usar durante o documento HTML. Com as folhas de estilo podemos, por exemplo, alterar a forma como os hyperlinks sero apresentados. H hoje muitos sites que usam um hyperlink sem o sublinhado, que aparece somente quando voc passa o ponteiro do mouse sobre ele, sendo definido por uma folha de estilo. Poderamos tambm usar uma folha de estilo para indicar como a tag <TABLE> </TABLE> criar as tabelas dentro do documento, por exemplo. O problema que, mesmo com estas evolues da HTML, ela no deixa de ter um conjunto limitado de tags definidas e muitos trabalhos continuaram tomando tempo. Da surgiu a necessidade de se criar uma linguagem mais flexvel, que descrevesse a estrutura de um documento, como a SGML, mas, ao mesmo tempo, to simples quanto a HTML. Para suprir essa carncia, criaram a XML.
O que XML?
A XML (Extensible Markup Language Linguagem de Marcao E xtensvel) a linguagem que veio para suprir esta necessidade. Sua principal caracterstica ser extensvel, isto , qualquer profissional que se utilize dela poder criar as tags que forem necessrias em seu trabalho. Veja um exemplo prtico:
96
Bloco 1 XML
1: <?xml version=1.0?> 2: <EstatisticaWeb> 3: <site> 4: <url> www.toptc.com.br </url> 5: <visitacao unidade=PorDia> 834 </visitacao> 6: </site> 7: <site> 8: <url> www.onemomenttogod.com </url> 9: <visitacao unidade=PorMes> 25840 </visitacao> 10: </site> 11: </EstatisticaWeb>
No existe nenhum documento elaborado pelos criadores da XML que define as tags <EstatisticaWeb></EstatisticaWeb>, <site></site>, <url></url> e <visitacao unidade= ></visitacao>. Elas foram criadas agora para uma necessidade especfica e fictcia. Devido a esta flexibilidade da linguagem, voc poderia perguntar: Os profissionais de mesmo setor de atividade, advogados por exemplo, no poderiam confundir-se ao criarem, cada um, tags diferentes para especificar um mesmo elemento?. Na realidade, isto poderia acontecer, sim. Mas, como veremos nessa iniciao e nos prolongamentos de seus estudos sobre XML, normalmente ela no utilizada sozinha. Vrias outras tecnologias foram, esto sendo e sero desenvolvidas para dar suporte a essa linguagem. Nessa linha de raciocnio, uma DTD para arquivos XML (conceito que veremos mais adiante) poderia ser usada para padronizar documentos de mesma natureza.
Quem criou a XML?

Sendo um internauta voc tem noo da dimenso da Internet e sabe que ela no pertence a ningum especificamente. Porm, existe uma organizao criada em outubro de 1994 que responsvel pelo desenvolvimento e manuteno de grande parte dos padres da Web, a linguagem HTML por exemplo. A XML mais um produto desta entidade conhecida pelo nome de W3C (World Wide Web Consortium), formada por 520 membros, entre eles a Microsoft, a America OnLine Inc, AT&T, Canon Inc, CitiBank N.A., Compac Computer Corporation, Ericsson, IBM Corporation, Intel Corporation, Macromedia, entre outras.
Iniciando no XML
97
O que necessrio?
A princpio, precisaremos de um software para criar os documentos XML e outro para visualizar o contedo dos mesmos. Para criar um documento XML podemos escrev-lo at no bloco de notas do Windows, desde que nos lembremos de salvar o documento com a extenso .XML . Lembra-se do trabalho que voc teve para digitar os documentos HTML? Seria praticamente o mesmo, com a grande diferena de que as tags seriam criadas por voc respeitando as regras da linguagem XML. Porm j existem muitos softwares para facilitar a vida de quem tem que programar em HTML e XML. Por exemplo: o FrontPage o editor de HTML feito pela Microsoft, enquanto que o Dreamweaver o editor da empresa Macromedia, embora haja muitos outros menos conhecidos. Quem utiliza qualquer um deles, normalmente no pensa em voltar a programar digitando as tags. A Microsoft tambm lanou um editor XML que, por enquanto, gratuito. Seu nome XML Notepad e ele faz parte da lista de editores XML exibida na tabela mostrada mais adiante. No mostraremos aqui nenhum editor especfico porque muito bom que voc digite os cdigos no incio para se acostumar com as regras da linguagem. Assim quando tiver contato com qualquer um deles, ficar mais fcil e intuitiva a aprendizagem. J a interpretao de documentos XML pode ser feita de vrias formas. Veja algumas delas: A primeira atravs de duas APIs (abreviao de Application Programming Interface - conjunto de funes que realizam a interface entre o computador e os programas de usurio): DOM (Document Object Model) um padro definido pelo W3C que cria uma viso em rvore do documento XML. Quando um processador XML analisa sintaticamente u documento XML, ele armazena o documento numa m rvore dentro da memria. O DOM um programa que faz interface com essa rvore, permitindo que voc leia, adicione, exclua e edite partes dela. SAX (Simple API for XML) uma API definida a princpio para a linguagem Java e que serve para processar a informao em um documento XML como uma seqncia de eventos, o que a torna mais rpida que o DOM.
Outra maneira de visualizar um documento XML atravs de um browser que entenda o padro XML, assim o documento pode ser aberto diretamente por ele. Este o caso do Internet Explorer 5.0 ou superior, que atende ao padro 1.0 do XML. Podemos ainda, usar uma folha de estilo para transformar o arquivo XML em algo que o browser entenda. Mais adiante veremos aqui uma pequena parte da linguagem XSL que tambm serve para formatar um documento XML para ser visualizado em um browser.
98
A tabela a seguir mostra uma lista de editores e navegadores XML. Alguns endereos para download podem estar desativados no momento em que voc est lendo este livro. Caso isto acontea, utilize seu site de busca preferido para tentar localizar o programa pelo seu nome.
Nome do Editor Endereo para Download Comentrio
Microsoft XML NotePad http://msdn.microsoft.com/library/defa gratuito por enquanto, porm ult.asp?url=/library/enapresenta uma interface pobre, us/dnxml/HTML/xmlpaddownload.asp dificultando o trabalho. Adobe Frame Maker XML Pro XML Writer eNotepad http://www.adobe.com/support/downl Apresenta timo suporte para XML oads/main.HTML#f http://www.vervet.com/ http://xmlwriter.net/ Contm bom suporte para o XML, porm muito dispendioso. Este editor contm destaque colorido na sintaxe.
http://www.edisys.com/Products/eNote considerado um substituto do WordPad e apresenta uma boa pad/enotepad.asp interface com o usurio. http://www.xmetal.com/top_frame.sq http://www.xmlspy.com/ http://www.w3.org/Amaya/ Tambm dispendioso, mas possui boa interface. Apresenta uma boa interface e de fcil utilizao. Apresenta funcionalidades de um editor e browser e prov suporte para HTML, XML, XHTML, MathML e XLinks.
XMetal XML Spy Amaya
XML Toolkit Browser XML InDelv Browser XML
Permite a converso entre modelos UML e documentos XML 1.1, bem como a gerao de DTDs de acordo com a especificao nos documentos XML.
http://www.indelv.com/client/installno-applet.htm
Browser muito interessante possuindo implementao mais completa da linguagem XSL. Apresenta funcionalidades de um editor e browser e prov suporte para HTML, XML, XHTML, MathML e XLinks. Considerado um browser XML verdadeiro, foi projetado para trabalhar com XML e CML (uma linguagem utilizada para desenhar molculas) em um contexto de aplicaes qumicas. Disponvel gratuitamente.
Amaya (j visto na http://www.w3.org/Amaya/ categoria Editores XML desta tabela) Jumbo http://www.XML-cml.org/jumbo3/
Iniciando no XML
99
Tambm possvel visualizar os mesmos dados contidos em um documento XML de vrias maneiras diferentes, por exemplo em aparelhos celulares, palmtops e em pginas Web. Para isso, naturalmente precisaremos usar uma ou vrias tecnologias de suporte a XML.
Em que pode ser usado

Embora no seja ainda uma linguagem fixada no mundo da informtica, podemos enumerar uma srie de aplicaes para a XML, entre elas: Transaes financeiras; Registros mdicos; Tratamento de documentos de companhias areas; Armazenamento de dados de empresas controladoras de seguros; Banco de dados; Edio de livros; Leiles on-line; Pesquisa indexada de documentos; Relatrios estatsticos, aqueles que podem ser produzidos uma nica vez em XML e visualizados atravs do meio que se fizer necessrio; Solues de E-Commerce em ambientes Web, onde o objetivo a integrao de sistemas e tecnologias diversas podendo usar a XML como linguagem de comunicao.
Exemplo de aplicao em banco de dados

Um banco de dados contendo uma lista de clientes est representado na tabela a seguir: Cdigo C-001 C-002 C-010 Nome Felisberto Adolfo Manquira 6.325.652 RG 5.789.123 Fone Comercial 2245-9898 5548-7845 3321-4521 5423-5162 Fone Residencial
Agora vamos ver como poderamos armazenar estes mesmos dados dentro de um documento XML. No se preocupe com a sintaxe, embora ela no seja to difcil
100
assim. Daqui a pouquinho comearemos a v as regras para se construirem as er tags em XML. Faa o seguinte: Digite o bloco de cdigo a seguir no Bloco de Notas do Windows. Salve o documento com o nome de Clientes.XML. (No se esquea de colocar o tipo do arquivo como Todos os arquivos *.*) Abra o arquivo atravs do Internet Explorer 5 ou de verso superior para perceber como a visualizao dos documentos XML neste browser.
Bloco 2 XML
1: <?xml version=1.0?> 2: <clientes> 3: <cliente codigo=C-001> 4: <nome>Felisberto</nome> 5: <rg>5.789.123</rg> 6: <telefone>2245-9898</telefone> 7: </cliente> 8: <cliente codigo=C-002> 9: <nome> Adolfo </nome> 10: <telefone> 11: <comercial>5548-7845</comercial> 12: <residencial>5423-5162</residencial> 13: </telefone> 14: </cliente> 15: <cliente codigo=C-010> 16: <nome>Manquira</nome> 17: <rg>6.325.652</rg> 18: <telefone>3321-4521</telefone> 19: </cliente> 20: </clientes>
Caso o browser gere algum tipo de erro, analise o bloco digitado atentamente em busca de erros na digitao. Ao conseguir abrir o arquivo no browser, compare a visualizao com a tabela onde apresentamos os dados inicialmente.
Embora este exemplo tenha sido bastante simplrio, o uso da XML para aplicaes que envolvem banco de dados to presente que, em agosto de 2001, a empresa Oracle lanou o Oracle9i Application Server, um servidor de aplicaes que permite s empresas criarem sites e servios na Web usando as mais recentes tecnologias padro de mercado para desenvolvimento de aplicativos, incluindo suporte para Java (J2EE), XML e SOAP (Simple Object Access Protocol).
Iniciando no XML
101
Existe ainda um banco de dados voltado para a linguagem XML. O Tamino XML uma ferramenta prpria para aplicaes que necessitam trocar contedo independente de seu tipo. Ele traz a capacidade de armazenar qualquer tipo de informao (textos, imagens, e-mail, sons...) de uma forma estruturada e com alta capacidade de resposta de qualquer contedo armazenado.
Pontos fortes
Veja a seguir alguns aspectos positivos que o uso da XML contempla: Automao: informaes mantidas em websites podem ser criadas de forma totalmente automtica. Buscas precisas: a adoo de um padro comum facilita a busca de informaes por parte dos clientes. Intercmbio de dados: construtores podem obter informaes sobre os produtos da Web e importar estes dados diretamente em seus aplicativos de clculo de custo e projeto sem esforo adicional. Formatao definida em folha de estilos separada do documento. Acesso mais fcil informao atravs de atribuio de significado mais relevante aos dados. Desenvolvimento de aplicaes Web mais flexveis. Integrao de dados de origens diferentes. Computao e tratamento local dos dados. Mltiplas vises dos dados.
Estrutura bsica
A princpio, para criar aplicaes XML so necessrios quatro passos: Selecionar ou escrever um DTD Criar documentos XML Interpretar documentos XML Exibir documentos XML
Para obter sucesso, qualquer aplicao necessita de um projeto bem estruturado. Como o primeiro passo para fazer um documento XML escolher ou criar um DTD, precisamos saber que esse documento define: as tags de cada documento quais tags podem conter outras tags o nmero e a seqncia das tags
102
os atributos que as tags podem ter e seus valores
A criao de um DTD uma tarefa trabalhosa porque quanto mais amplo o escopo, maior a complexidade e tambm por ser complicado conseguir a concordncia de todos os elementos envolvidos. Assim sendo, necessrio fazer uma anlise de documentos antes de constru-los no formato XML. Aqui vo algumas perguntas que podem ajudar nessa anlise: Que elementos iro ocorrer? Como se relacionam entre si? Como os usurios iro interagir com eles?
Tags para documentos XML

medida em que formos tendo contato com as regras para se programar em XML, vamos conhecendo como manipular entidades, seus elementos, atributos e valores. Algo que voc deve saber desde j, que a linguagem XML sensitvel, ou seja, ela difere maisculas de minsculas. Por exemplo: </PessoaFisica> diferente de </PESSOAFISICA>.Vamos comear?
Tag inicial e final de um elemento

Primeiro muito importante saber como iniciar e finalizar as tags para delimitar o contedo de um elemento. Voc vai perceber que muito semelhante ao HTML, o que bem compreensvel j que ambas herdam as regras da SGML. No exemplo que segue, o elemento rua tem como contedo o dado Pedra Bonita e o elemento numero contm o dado 253.
1: <rua>Pedra Bonita</rua> <numero>253</numero>
Em linhas gerais: a tag de incio consiste no nome do elemento (rua e numero no exemplo) entre os sinais de menor e maior; enquanto que a tag de fim o nome do elemento iniciado com a barra ( / ) e tambm entre os sinais de menor e maior. Note tambm que as tags dos elementos rua e numero, utilizados no exemplo anterior, so criadas de acordo com uma suposta necessidade de quem est estruturando o documento XML. Como j mencionamos a ntes, isto quer dizer que a linguagem XML no contm estas marcaes predefinidas. Ficou claro?!
Iniciando no XML
103
Regras para os nomes dos elementos

isso mesmo! Pensou que poderia colocar nomes de qualquer m aneira para os elementos?! No bem assim. Mas tambm, as regras que existem so simples e algumas at compreensveis. Veja: No podemos colocar espaos no nome de um elemento. O primeiro caractere do nome tem que ser uma letra ou o caractere de sublinhado ( _ ), conhecido por muitos como underscore. A partir do segundo caractere do nome, podem vir letras, o caractere de sublinhado, dgitos, o hfen ( - ) ou o ponto ( . ). No podem ser usados caracteres reservados da linguagem, como o & por exemplo, tanto no nome quanto no contedo do elemento.
A tabela a seguir mostra exemplos de nomes permitidos e no permitidos para os elementos.

Nomes de elementos
Vlidos <m> <bmw-2052> <voc.net> <945621>
Invlidos <joo&maria> <nome da empresa>
importante tambm observar algumas convenes. Por exemplo: em HTML convencional usar as tags em maiscula. Em XML, j mais comum utilizar os nomes dos elementos das tags em minsculo. Existe ainda uma c onveno muito utilizada em nomes de campos em bancos de dados, que pode ser aplicada aos nomes dos elementos XML. Ela consiste em escrever o nome do elemento com a primeira letra de cada palavra em maiscula e o restante em minsculo; e , se o nome for composto por duas ou mais palavras, estas devem estar juntas sem espao em branco. Veja um exemplo: NomeDaEmpresa. Qual conveno voc deve usar? Fique vontade, mas seja coerente com a que escolher procurando no mistur-las, uma vez que isto provocaria uma certa baguna no seu documento XML.
Atributos dos elementos

Podemos ainda, como em HTML, colocar atributos na tag de incio de um elemento. Um atributo vai possuir um nome e um valor, sendo que seu nome segue as mesmas regras vistas para os nomes dos elementos. Veja um exemplo:
104 1:
Como se tornar um WEBMASTER <rua semsaida=nao arborizada=sim>Pedra Bonita</rua> <numero> 253 </numero>
Na linha citada o elemento rua possui dois atributos, semsaida e arborizada com os valores nao e sim, respectivamente. Note que os valores dos atributos devem estar entre aspas, como em HTML.
Elemento sem contedo

Quando um elemento vazio, podemos escrev-lo de duas formas em XML. D uma olhada no cdigo adiante:
1: 2: <site href=http://www.toptc.com.br></site> <site href=http://www.toptc.com.br />
Para a XML as duas formas esto corretas, portanto voc pode escolher. Neste caso, elemento desprovido de contedo, o elemento ser includo no documento atravs do valor do seu atributo.
A rvore de um documento XML

Em documentos XML os elementos podem conter outros elementos dentro de si, os quais, por sua vez, podem ter como contedo outros elementos ou texto, e por a vai. Desta forma, para facilitar a viso de um documento XML, podemos v-lo como se fosse uma rvore de elementos. rvore esta que pode ser to grande quanto necessrio. Para voc ter uma idia de como representar um documento em forma de rvore, vamos faz-lo com o bloco de cdigo de exemplo que vimos no Bloco 2 XML, o qual mostra a estrutura de um banco de dados de clientes. A Figura 7.1 mostra a rvore para representar a estrutura deste documento. Faa um paralelo visual entre o bloco de cdigo e a rvore para identificar os elementos dentro da estrutura.
Clientes
Cliente
Cliente
Cliente
Nome
RG
Telef one
Nome
RG
Telef one
Nome
Telef one
Comercial
Residencial
Iniciando no XML
105
Figura 7.1 Representao grfica da rvore do Bloco 2 XML.
Outro conceito fundamental para se entender o funcionamento da XML a identificao dada aos elementos dentro de uma rvore. Quando um elemento possui outros dentro de si, ele identificado como pai, enquanto que cada um contido dentro dele conhecido como filho. Na rvore do banco de dados, que vimos, os elementos Comercial e Residencial so filhos do elemento Telefone que, por sua vez, tem por pai um elemento Cliente. Ao digitar as tags para criar um documento XML, temos que tomar o cuidado de colocar elementos filhos totalmente dentro de seu pai. Para entender isto melhor, compare a linha 1 com a linha 2 do bloco a seguir. Ambas tentam mostrar a mesma coisa, porm, em um documento XML, apenas a linha 2 estaria construda corretamente.
1: 2: <Cliente><Nome>Pedro</Nome><Telefone>3568-5654</Cliente></Telefone> <Cliente><Nome>Pedro</Nome><Telefone>3568-5654</Telefone></Cliente>
Elemento Raiz
A raiz de um documento XML um elemento nico, pai de todos os outros elementos dentro do documento. Um documento XML vlido s aceita uma raiz, a qual deve ser um elemento de nome exclusivo dentro do documento. Na rvore do Bloco 2 XML, exibida na Figura 7.1, o elemento raiz o de nome Clientes. Note que ele o nico que possui este nome na rvore. Para que voc tenha uma idia ainda mais clara, analise os blocos a seguir. Tente descobrir qual deles est incorreto. Bloco 3 XML
1: 2: 3: <?xml version=1.0?> <Aluno> <Nome>Pedro Augusto</Nome>
106 4: <Numero>12</Numero> 5: <NotaFinal>87</NotaFinal> 6: </Aluno> 7: <Aluno> 8: <Nome>Ivete Cardoso</Nome> 9: <Numero>15</Numero> 10: <NotaFinal>91</NotaFinal> 11: </Aluno>
Bloco 4 XML
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: <?xml version=1.0?> <Classe Numero=02> <Aluno> <Nome>Pedro Augusto</Nome> <Numero>12</Numero> <NotaFinal>87</NotaFinal> </Aluno> <Aluno> <Nome>Ivete Cardoso</Nome> <Numero>15</Numero> <NotaFinal>91</NotaFinal> </Aluno> </Classe>
Ficou fcil, no mesmo?! O Bloco 3 est incorreto, pois no apresenta um elemento raiz. J no Bloco 4 est claro que Classe o elemento raiz.
Declarao do documento XML

Voc deve ter percebido que, nos blocos de cdigo mais completos utilizados como exemplos nesse captulo, a linha 1 sempre a mesma.
1: <?xml version=1.0?>
Esta linha apresenta a verso da linguagem XML e serve para identificar o documento como sendo um documento XML. Embora ela no seja obrigatria, recomendvel que voc a utilize em todos, e ao faz-lo, ela dever ser a primeira linha a ser digitada.
Iniciando no XML
107
Comentrios em XML
Como qualquer outra linguagem, a XML permite que voc digite linhas de comentrios dentro do documento, as quais servem apenas para quem est lendo o documento, ou seja, elas no sero interpretadas pelo processador XML. Em XML uma linha de comentrio inicia-se com o sinal de menor (<), seguido pelo ponto de exclamao (!) e dois hfens (--). No meio vem o texto do comentrio e para finalizar vem dois hfens (--) e o sinal de maior (>). A sintaxe genrica seria a seguinte:  Veja um exemplo prtico: Bloco 5 XML
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: <?xml version=1.0?>  <Classe Numero=02> <Aluno> <Nome>Pedro Augusto</Nome> <Numero>12</Numero> <NotaFinal>87</NotaFinal> </Aluno>  <Aluno> <Nome>Ivete Cardoso</Nome> <Numero>15</Numero> <NotaFinal>91</NotaFinal> </Aluno> </Classe>
No bloco de cdigo anterior, as linhas 2 e 9 no seriam interpretadas pelo processador. Note tambm que elas aparecem antes ou depois da marcao XML. assim que deve ser. Um comentrio no pode aparecer no meio da marcao.
Fazendo referncia a entidades em XML

Uma entidade em XML um grupo de dados que pode ser tratado como uma unidade. Entidades podem ser usadas para fazer referncia a recursos que no sejam da XML (imagens por exemplo) ou a um arquivo externo que guarda partes de um documento XML.
108
Nos documentos XML, em alguns casos, utilizaremos entidades predefinidas pela XML, em outros, chamaremos entidades declaradas em um DTD (algo que aprenderemos a fazer na prxima seo). Para fazer referncia a uma entidade, temos que colocar o seu nome entre o caractere & e um sinal de ponto-e-vrgula (;). A linha a seguir exibe um exemplo que chama a entidade de nome empresa.
1: <NomeFantasia> &empresa; </NomeFantasia>
Se em um DTD tivssemos declarado a entidade empresa e atribudo o valor Top Training Center a ela, ento o browser XML interpretaria a linha anterior exatamente como a linha mostrada a seguir:
1: <NomeFantasia> Top Training Center </NomeFantasia>
J conseguiu perceber uma das vantagens das entidades? Se fizermos referncia a uma determinada entidade vrias vezes em um ou mais documentos XML e precisarmos fazer alguma alterao em seu valor, teremos que alter-lo apenas uma vez no DTD.
Entidades Predefinidas
Imagine que voc precise digitar alguns caracteres especiais (aqueles reservados pela linguagem XML) em um documento XML, tais como & < > ; (aspas) (apstrofo). Como voc vai fazer, j que o interpretador XML ir v-los como marcao XML? Para resolver esse problema, dentro da XML existem entidades que foram definidas justamente para substituir estes caracteres no contedo ou atributo de um elemento. A tabela a seguir mostra as entidades predefinidas:
Entidades Predefinidas
Nome quot apos gt lt amp
Valor > < & Aspas Apstrofo
Caractere
Referncia " ' > < &
Sinal de maior Sinal de menor E comercial
Iniciando no XML
109
Quando voc tiver que usar um desses caracteres no valor do atributo ou no contedo de um elemento, voc ter que substitu-lo pela referncia a uma das entidades vistas na tabela. Por exemplo: imagine que ser necessrio digitar a expresso matemtica 40 > 39 como contedo do elemento equao. A forma correta de inseri-lo no documento XML seria a seguinte:
1: <equao> 40 > 39 </equao>
Incluindo Dados de Caractere (Seo CDATA)

Sem dvida a entidade predefinida uma soluo importante. Mas voc j pensou em fazer um documento XML cheio de operaes matemticas, ou frmulas da fsica, ou ainda cdigos de uma linguagem de programao ou equaes da qumica? D para ver o quanto seria trabalhoso ficar digitando < no lugar de <, > no lugar de > e por a vai... Atravs de uma seo CDATA (abreviao de Character Data, que significa Dados de Caractere) podemos facilitar bastante a tarefa descrita antes. No documento XML ela se inicia com a marcao <[CDATA[ e termina com ]]>. O exemplo a seguir utiliza uma seo CDATA para incluir instrues de programao em Visual Basic, no documento XML. No se preocupe em entender a programao VB, nosso objetivo no momento compreender a versatilidade de uma seo CDATA . Bloco 6 XML
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: <?xml version=1.0?> <FuncaoVB> <[CDATA[ Function Temper(t) If t > 36 Then MsgBox Voc est com febre pois sua temperatura atual & t Else MsgBox Sua temperatura atual & t End If End Function ]]> </FuncaoVB>
Observe que, nas linhas 5, 6 e 8 do Bloco 6 XML, pde-se utilizar os caracteres > e & naturalmente, pois eles esto entre as marcaes <[CDATA[ e ]]>. Agora que voc sabe o que uma seo CDATA , j podemos lhe informar que os textos dentro de um elemento so chamados PCDATA (abreviao de Parsed Character Data, que significa Dados de Caractere Desmembrados). Como vimos
110
anteriormente, o contedo de um elemento (ou PCDATA ) no pode conter caracteres de marcao.
PI (Instrues de Processamento)
Assim como possvel na HTML, inserir instrues de script (como JavaScript ou VBScript), uma Instruo de Processamento uma abertura deixada pelo W3C, para que seja possvel inserir instrues que no sejam da XML nos documentos. A primeira linha do documento XML, a declarao, uma instruo de processamento. No exemplo a seguir adicionamos um novo atributo comumente encontrado na declarao dos documentos, seu nome encoding e serve para especificar qual a codificao (conjunto de caracteres padro) a ser usada no documento.
1: <?xml version=1.0 encoding=ISO-8859-1?>
Neste exemplo o valor ISO-8859-1 do atributo encoding, indica que a codificao usada no documento ser a Latin-1, que contm o conjunto de caracteres necessrio para grande parte dos idiomas.
Atributos Definidos
Em XML existem dois atributos j definidos para serem usados nas tags dos elementos: xml: lang (que indica o idioma usado na escrita do contedo do elemento) e xml: space (que serve para controlar os espaos em branco dentro do contedo do elemento). O exemplo a seguir mostra como podemos usar o atributo especial XML: lang.
1: 2: <texto1 xml: lang=pt-BR>Teia de Alcance Mundial</texto1> <texto2 xml: lang=en-US>World Wide Web</texto2>
Na linha 1, o valor pt-BR do atributo, indica que o portugus do Brasil o idioma usado no contedo do elemento texto1. J o valor en-US do atributo, na linha 2, refere-se ao idioma ingls dos Estados Unidos. O atributo especial XML: space pode receber dois valores. Sendo o valor preserve, o processador XML dever manter todos os espaos no contedo do elemento e nos dos seus filhos. Caso o valor seja default, o processador XML usar o tratamento padro para os espaos. A linha a seguir mostra um exemplo que utiliza o valor preserve para este atributo.
1: <paragrafo xml: space=preserve>Um dois trs quatro cinco</paragrafo>
Iniciando no XML
111
Conceitos Iniciais sobre DTD

Como vimos anteriormente, uma DTD uma Declarao de Tipo de Docume nto, isto , ela um documento onde so declarados os elementos e seus filhos, juntamente com os contedos, definidos os atributos e valores para serem usados em um documento XML. Nosso objetivo aqui ser mostrar alguns aspectos da sintaxe de uma DTD para que voc veja que no to complicado modelar um documento XML. Voc criar agora um documento XML e depois a sua DTD. Em seguida, explicaremos cada parte da DTD criada. Digite o bloco de cdigos a seguir no Bloco de Notas do Windows e salve o arquivo com o nome de ListaCliente.xml. Bloco 7 XML
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: <?xml version=1.0 encoding=ISO-8859-1?>  <!DOCTYPE clientes SYSTEM ListaCliente.dtd>  <clientes> <cliente> <nome> Paulo Augusto de Oliveira</nome> <endereco> <rua>Violinos, 106</rua> <bairro>Califrnia</bairro> <cidade>Matozinhos</cidade> <estado>Minas Gerais</estado> <cep>30.130-120</cep> </endereco> <telefone comercial=no>3596-7621</telefone> <telefone>3284-6752</telefone> <email href=mailto:paulao@b2netword.com/> </cliente> <cliente> <nome><prenome>Josefa</prenome><sobrenome>de Albuquerque Costa</sobrenome></nome> <endereco> <rua>Alagados do Barreiro, 158</rua> <cidade>Turucinara</cidade> <estado>So Paulo</estado> </endereco>
112
26: <telefone>3228-9144</telefone> 27: <email href=mailto:jac@connection.com.br/> 28: </cliente> 29: </clientes>
Quando um documento XML utiliza uma DTD, esta deve ser referenciada dentro do mesmo. O documento ListaCliente.xml, que voc acaba de fazer, utiliza uma DTD chamada ListaCliente.dtd, a qual evocada na linha 3 do cdigo. Note que a sintaxe genrica da linha que faz a conexo com a DTD : <!DOCTYPE nome do elemento raiz SYSTEM nome do arquivo.dtd> Neste momento abra o arquivo ListaCliente.xml no Internet Explorer 5 ou superior. Observe que ser exibido um erro devido ao fato de no existir ainda o documento DTD referenciado na linha 3, tal como mostra a figura a seguir:
Figura 7.2 Erro no Internet Explorer ao abrir o arquivo ListaCliente.xml.
Tranqilo por enquanto, no ? Vamos agora DTD que define a e strutura do documento XML. Digite o bloco de cdigos a seguir no Bloco de Notas do Windows e, a princpio, salve-o com o nome de ListaCliente.html. Caso esteja achando estranha a extenso .html, voc est coberto de razo. O problema que o Bloco de Notas do Windows no aceitou a extenso .dtd diretamente, por isso vamos salvar a DTD com a extenso .html e depois vamos renomear o arquivo para ListaCliente.dtd. Mos obra:
Iniciando no XML
113
Bloco 8 XML
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: <?xml encoding=ISO-8859-1?>  <!ELEMENT clientes (cliente+)>  <!ELEMENT cliente (nome+, endereco+, telefone+, sexo*, email+)>  <!ELEMENT nome (#PCDATA | prenome | sobrenome)*> <!ELEMENT prenome (#PCDATA)> <!ELEMENT sobrenome (#PCDATA)>  <!ELEMENT endereco (rua+, bairro, cidade+, estado+, cep?)> <!ELEMENT rua (#PCDATA)> <!ELEMENT bairro (#PCDATA)> <!ELEMENT cidade (#PCDATA)> <!ELEMENT estado (#PCDATA)> <!ELEMENT cep (#PCDATA)>  <!ELEMENT telefone (#PCDATA)> <!ATTLIST telefone comercial (sim | nao) sim> <!ELEMENT sexo (#PCDATA)>  <!ELEMENT email EMPTY> <!ATTLIST email href CDATA #REQUIRED gratuito (sim | nao) sim>
Tendo digitado o Bloco 8 XML, agora hora de mudar a extenso do arquivo. Ele precisa ter a extenso .dtd, para isso faa o seguinte: Feche o arquivo e o localize no Windows Explorer. Acione o menu Exibir e clique em Opes de pasta... Clique na orelha Modo de exibio. Certifique-se de que a caixa de verificao Ocultar extenses para os tipos de arquivos conhecidos esteja desabilitada e clique em OK. Agora renomeie o documento ListaCliente.html para ListaCliente.dtd. Responda Sim pergunta que o Windows pode lhe fazer. Atravs do Internet Explorer 5 ou superior, abra o arquivo ListaCliente.xml para ver se deu tudo certo. O documento dever ser exibido semelhante figura a seguir:
114
Figura 7.3 ListaCliente.xml no Internet Explorer usando o arquivo DTD.
Agora veremos cada parte da DTD que criamos para entend-la.
Declarao de elemento
A sintaxe genrica para se declarar um elemento : <!ELEMENT Nome do elemento Contedo do elemento> Nesta sintaxe, a parte Nome do elemento segue as mesmas regras que vimos quando aprendemos a dar nomes para os elementos. J a parte Contedo do elemento, relaciona os filhos que sero aceitos pelo elemento declarado. Na linha 3 do arquivo DTD, voc pode ver a declarao do elemento raiz clientes.
3: <!ELEMENT clientes (cliente+)>
Aqui o sinal de mais (+) logo aps o filho cliente, indica que esse filho pode aparecer uma ou mais vezes dentro do elemento raiz.
Contedos especiais de um elemento

Quando desejamos mostrar que um elemento pode conter texto, usamos a palavra-chave #PCDATA (dados de caractere desmembrados). A linha 12 um exemplo bem claro:
Iniciando no XML 12: <!ELEMENT rua (#PCDATA)>
115
Caso seja necessrio declarar que um elemento ser vazio, usamos a palavrachave EMPTY. D uma olhada na linha 22, mostrada a seguir:
22: <!ELEMENT email EMPTY>
Indicadores de ocorrncia e Conectores

Indicadores de ocorrncia, como sugere o nome, so caracteres utilizados para indicar como os filhos devero ocorrer dentro de um elemento declarado. Os caracteres so o sinal mais (+), o asterisco (*) e o ponto de interrogao (?). J os conectores so caracteres que servem para separar os filhos dentro do contedo do elemento e indicar a ordem em que podem aparecer. So conectores o caractere vrgula (,) e a barra vertical (|). A tabela a seguir mostra o significado de cada caractere e em qual linha do documento DTD pode-se ver um exemplo. Caractere Significado Exemplo na linha 3 5 11 11
Indicadores de ocorrncia O elemento pode ocorrer uma ou mais + vezes dentro de seu pai. O elemento pode ocorrer zero ou mais * vezes dentro de seu pai. ? Nenhum Conectores , Os elementos esquerda e direita do caractere aparecem nessa ordem no documento. Somente o elemento da esquerda ou o da direita do caractere, aparecer no documento. O elemento pode ocorrer uma ou n enhuma vez dentro de seu pai. O elemento pode ocorrer apenas uma vez dentro de seu pai.
116
Lista de Atributos do elemento

Quando um elemento possuir atributos, esses tambm precisam ser declarados na DTD. Veja a sintaxe: <!ATTLIST Nome do elemento Nome do atributo (Valor1 | Valor2 | Valor3) ValorPadro> A linha 19 exibe a declarao do atributo comercial para o elemento telefone.
19: <!ATTLIST telefone comercial (sim | nao) sim>
Quando um elemento possui mais de um atributo, podemos agrupar as declaraes desses atributos. Por exemplo, a linha 23 da nossa DTD mostra a declarao dos atributos href e gratuito para o elemento email.
23: <!ATTLIST email href CDATA #REQUIRED gratuito (sim | nao) sim>
Na declarao anterior, a palavra-chave #REQUIRED faz com seja obrigatria a insero do valor do atributo href. H, sem dvida, muitos outros conceitos envolvendo as DTDs que seriam necessrios para algum se tornar um especialista em criar uma. Mas isto vai alm do nosso objetivo que simplesmente mostrar que a coisa no to complicada quanto parece. Embora realmente no seja difcil elaborar uma DTD, , no mnimo, muito trabalhoso. Para lhe poupar um pouco de tempo, voc tem duas alternativas: 1- Utilizar uma DTD j existente. Existem muitas disponveis na Internet e adaptar uma ou outra necessidade do seu documento ser uma tarefa menos custosa do que elaborar uma por inteiro. Tambm certo que nem sempre ser possvel fazer isso. Nesse caso, pacincia... Faa voc mesmo.
2- Na Internet voc tambm pode encontrar ferramentas (softwares) pr-
prias para a criao de sua DTD. Algumas dessas ferramentas podem ser encontradas nos sites www.lumeria.com, www.microstar.com e www.icon-is.com.
Conceitos Iniciais sobre XSL

Ao abrir o documento ListaCliente.xml no Internet Explorer 5 ou superior, voc ver a rvore do documento XML, ou seja, a hierarquia dos elementos com seus contedos e atributos. Imagine que voc queira visualiz-lo como se estivesse vendo uma pgina da Web. Em outras palavras: suponhamos que seja necessrio
Iniciando no XML
117
format-lo em HTML para que o contedo dos elementos apaream organizados em uma tabela, por exemplo. Nesse caso teremos que usar a linguagem XSL, pois um dos seus usos mais comuns justamente formatar um documento XML utilizando tags HTML aninhadas com comandos prprios da linguagem. XSL uma abreviao para XML Stylesheet Language (Linguagem de Folha de Estilo para XML) e ela , na realidade, dividida em duas partes: XSLT (XSL Transformation) e XSLFO (XSL Formating Objects). Os comandos que aprenderemos aqui pertencem XSLT. Digite o Bloco 9 XML, visto a seguir, no Bloco de Notas do Windows e salve o arquivo com o nome de ListaCliente.xsl. Bloco 9 XML
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16 17: 18: 19 20: 21: 22: 23: 24: 25: 26: 27: 28: <?xml version="1.0"?> <HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <BODY BGCOLOR="#99FFCC"> <p align="center"><font face="Verdana" size="6" color="#0000FF"><b>Lista de Clientes Especiais</b></font></p> <p></p><TABLE BORDER="1" CELLPADDING="5"> <TR ALIGN="CENTER" BGCOLOR="#000000"> <TD BGCOLOR="#008000"><FONT FACE="Arial" COLOR="#FFFFFF"> <B>Cliente</B></FONT></TD> <TD BGCOLOR="#008000"><FONT FACE="Arial" COLOR="#FFFFFF"> <B>Endereco</B></FONT></TD> <TD BGCOLOR="#008000"><FONT FACE="Arial" COLOR="#FFFFFF"> <B>Bairro</B></FONT></TD> <TD BGCOLOR="#008000"><FONT FACE="Arial" COLOR="#FFFFFF"> <B>Cidade</B></FONT></TD> <TD BGCOLOR="#008000"><FONT FACE="Arial" COLOR="#FFFFFF"> <B>CEP</B></FONT></TD> <TD BGCOLOR="#008000"><FONT FACE="Arial" COLOR="#FFFFFF"> <B>Telefone</B></FONT></TD> </TR> <xsl:for-each select="clientes/cliente"> <TR> <TD> <xsl:value-of select="nome"/> </TD> <TD> <xsl:value-of select="endereco/rua"/> </TD>
118 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: </BODY> 48: </HTML> <TD>
<xsl:value-of select="endereco/bairro"/> </TD> <TD> <xsl:value-of select="endereco/cidade"/> </TD> <TD> <xsl:value-of select="endereco/estado"/> </TD> <TD> <xsl:value-of select="endereco/cep"/> </TD> <TD> <xsl:value-of select="telefone"/> </TD> </TR> </xsl:for-each> </TABLE>
Muito bem! Aps ter salvado este documento XSL na mesma pasta que contm os arquivos XML e DTD, precisamos agora dizer ao ListaCliente.XML que ele deve buscar informaes sobre sua formatao dentro do documento ListaCliente.xsl. Para isso, teremos que acrescentar uma linha de comando especial no documento XML. Vamos em frente:
1: 2:
Abra o arquivo ListaCliente.XML atravs do Bloco de Notas do Windows. Digite as duas linhas de comando mostradas a seguir aps a linha 3:
 <?xml-stylesheet type="text/xsl" href="ListaCliente.xsl"?>
Salve a alterao feita no documento XML e em seguida abra-o no Internet Explorer 5 ou superior. Voc ver que o documento ser exibido semelhante Figura 7.4.
Est na hora de analisarmos o documento ListaCliente.xsl para entendermos cada parte dele. Ao digit-lo voc deve ter percebido que, boa parte das tags (pelo menos as que deram mais trabalho), so simplesmente tags HTML aprendidas no Captulo 4.
Iniciando no XML
119
Figura 7.4 ListaCliente.xml no Internet Explorer usando os arquivos DTD e XSL.
Declarao XSL
As duas primeiras linhas constituem a declarao do documento XSL, sendo que a linha 1 no obrigatria.
1: 2: <?xml version="1.0"?> <HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl">
A linha 2 obrigatria e, neste exemplo, ela sofreu uma variao para se adaptar nossa necessidade. Sua sintaxe normalmente usada nos documentos XSL a seguinte:
1: 2: N: <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> </xsl:stylesheet>
Formatao HTML
Analise atentamente o bloco de cdigo que vai da linha 3 at a linha 14. Ele puramente HTML.
120 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21 22:
Como se tornar um WEBMASTER <BODY BGCOLOR="#99FFCC"> <p align="center"><font face="Verdana" size="6" color="#0000FF"><b>Lista de Clientes Especiais</b></font></p> <p></p><TABLE BORDER="1" CELLPADDING="5"> <TR ALIGN="CENTER" BGCOLOR="#000000"> <TD BGCOLOR="#008000"><FONT FACE="Arial" COLOR="#FFFFFF"> <B>Cliente</B></FONT></TD> <TD BGCOLOR="#008000"><FONT FACE="Arial" COLOR="#FFFFFF"> <B>Endereco</B></FONT></TD> <TD BGCOLOR="#008000"><FONT FACE="Arial" COLOR="#FFFFFF"> <B>Bairro</B></FONT></TD> <TD BGCOLOR="#008000"><FONT FACE="Arial" COLOR="#FFFFFF"> <B>Cidade</B></FONT></TD> <TD BGCOLOR="#008000"><FONT FACE="Arial" COLOR="#FFFFFF"> <B>Estado</B></FONT></TD> <TD BGCOLOR="#008000"><FONT FACE="Arial" COLOR="#FFFFFF"> <B>CEP</B></FONT></TD> < BGCOLOR="#008000"><FONT FACE="Arial" COLOR="#FFFFFF"> <B>Telefone</B></FONT></TD> </TR>
Esse cdigo HTML, em uma pgina Web, geraria uma formatao incluindo uma primeira linha de tabela contendo os nomes dos cabealhos das colunas, tal como mostra a Figura 7.5:
Figura 7.5 Formatao gerada em pgina Web pelo bloco de cdigo HTML.
Agora continuemos a esmiuar nosso documento XSL.
Realizando um Loop
Observe no documento as linhas 14, 15 e 16:
14: </TR>
Iniciando no XML 15: 16: <xsl:for-each select="clientes/cliente"> <TR>
121
A parte HTML fcil para voc: a tag </TR> na linha 14 indica o final daquela primeira linha da tabela; a tag <TR> na linha 16 inicia a prxima linha na tabela. Devido ao fato de termos escolhido uma tabela para organizar os elementos do documento XML, para cada elemento cliente dentro do elemento raiz (clientes) dever ser gerada uma linha na tabela para exibir os dados desse elemento (no caso, os dados so os elementos filhos de cada elemento cliente). por isso que a linha 15 contm o comando <xsl:for-each select=clientes/cliente>. For each significa Para cada e o comando inteiro diz ao documento XML o seguinte: Para cada elemento cliente encontrado dentro do elemento raiz clientes(...). As reticncias na frase substituem os comandos seguintes ao comando XSL. No toa que o primeiro comando seguinte justamente a tag <TR> de incio de uma linha. Observe agora as linhas 38 e 39:
38: 39: </TR> </xsl:for-each>
A tag </TR> na linha 38 finaliza a linha iniciada logo aps o comando <xsl:foreach select=clientes/cliente>, enquanto que o comando </xsl:for-each> na linha 39 finaliza o prprio comando XSL. O conjunto todo exibido a seguir:
14: 15: 16: ... 38: 39: </TR> <xsl:for-each select="clientes/cliente"> <TR> ... </TR> </xsl:for-each>
Esse conjunto faz surgir uma nova linha na tabela enquanto existir um elemento cliente dentro do elemento raiz clientes.
Exibindo o contedo de um elemento

Lembre-se de que as tags <TD> </TD> fazem surgir uma clula dentro de uma linha da tabela. Observe que, entre as tags <TR> da linha 16 e a </TR> da linha 38, existem sete pares <TD> </TD>, justamente o mesmo nmero de clulas criadas na primeira linha da tabela. Note tambm que, dentro de cada par <TD> </TD>, existe o comando XSL <xsl:value-of select="expresso"/>.
122
Este comando XSL serve para exibir o contedo do elemento especificado em expresso. Por exemplo: o comando <xsl:value-of select="nome"/> mostra o contedo do elemento nome, o comando <xsl:value-of select="endereco/rua"/> mostra o contedo do elemento rua que filho do elemento endereco, e assim por diante.
Finalizando o documento XSL

Por fim, vemos as ltimas linhas do documento:
40: </TABLE> 41: </BODY> 42: </HTML>
Elas servem simplesmente para fechar as tags que principiaram a tabela, o corpo e o incio da pgina Web, respectivamente. Aqui termina nossa proposta de realizar um contato inicial entre voc e a XML. Mas isso no deve acontecer com seus estudos sobre ela, j que, como mencionamos anteriormente, vrias tecnologias esto e continuaro sendo criadas para dar suporte a esta linguagem. Voc poder pesquisar sobre a relao entre a XML e outra tecnologia que voc j conhea. De fato, o grande lance da XML que ela no foi criada para resolver sozinha uma determinada soluo. Seu poder est justamente em sua capacidade de interagir com outras ferramentas e linguagens j disponveis no mercado da informtica, tais como HTML, Flash, ASP, JavaScript, PHP, dentre outras. Mas chega de papo! Passemos para o prximo captulo que apresenta as ferramentas para o desenvolvimento na Web.
Parabns, se voc chegou at aqui porque j possui conhecimentos suficientes para comear a fazer tudo o que programou, diretamente em uma ferramenta que, na maior parte das vezes, ser de grande ajuda. Vrias so as tarefas em HTML (ou mesmo em JavaScript) desgastantes para o programador. Fazer tabelas, por exemplo, uma tarefa de pacincia. Criar frames e posicion-los na tela da forma como deveriam ficar quase um parto. Para simplificar nosso trabalho temos ferramentas como o FrontPage e o Dreamweaver. Escolhemos estas por serem as preferidas no mercado. Dizer qual dos dois o melhor uma tarefa complicada, pois depender de sua habilidade. O FrontPage possui um ar de simplicidade maior do que o Dreamweaver. No entanto, aprendendo um deles o outro ficar extremamente simples, pois o princpio bsico o mesmo.
FrontPage 2000
Sem dvida nenhuma, entender como funcionam as tags do HTML de vital importncia para quem quer ser um desenvolvedor Web. Entretanto, existem ferramentas que iro agilizar seu trabalho. Tarefas complexas de serem resolvidas diretamente na programao HTML se tornam brincadeira diante de uma ferramenta como o FrontPage 2000. O FrontPage acompanha o Microsoft Office na sua verso Premium, no podendo ser vendido separadamente. Tudo o que o FrontPage ir fazer tornar o seu trabalho mais fcil. Enquanto voc arrasta os componentes ou escolhe opes de formatao nos menus, ele gera automaticamente todo o cdigo em HTML. Ao abrir o FrontPage voc ter uma tela como a mostrada na Figura 8.1:
123
124
Figura 8.1 Tela principal do FrontPage 2000. Voc ir utiliz-lo como se estivesse no Word. Entretanto, todo o cdigo em HTML pode ser visto clicando sobre a guia HTML, na parte inferior da janela.
O contedo de uma pgina

Uma pgina deve ser atraente (tanto visualmente quanto no seu contedo). Sem dvida nenhuma, se voc observar estes dois aspectos, sua pgina ter sucesso, mas algumas regrinhas podem ser seguidas: Siga sempre os objetivos definidos no projeto do site. Tenha sempre em mente o perfil do usurio do site. Utilize pginas que possam ser carregadas rapidamente. No coloque muita informao em apenas uma pgina. Torne a informao bvia. Teste, teste, teste e teste novamente.
Projetando o que ser criado

Desenvolver para a Web como construir uma casa. Voc deve fazer o projeto de tudo o que ser construdo. imprescindvel que seja feita uma anlise junto s pessoas que solicitaram a construo do site (cliente, diretor, etc). Elas iro dizer justamente o que pode ou deve conter no site. Obviamente que sua experincia na Internet poder orient-lo sobre a melhor forma de expor um contedo. Geralmen-
Ferramentas para Desenvolvimento na Web
125
te o cliente ir se e mpolgar a ponto de querer colocar todas as fotos dos seus 1500 produtos, mas voc dir que isto visualmente impraticvel. O FrontPage possui uma ferramenta que ir lhe auxiliar no momento do projeto. Trata-se de um organizador de todo o contedo do site. Com ele iremos criar uma rvore que ir representar a hierarquia das pginas do site. Nesta etapa voc ir criar um site para uma escola de informtica (Top Training Center, claro) e, no decorrer do desenvolvimento, aprender os recursos disponveis no software.
A estrutura do site
A estrutura da Figura 8.2 representa o que precisamos em termos de site. Nela esto contidas todas as pginas a serem criadas, bem como a hierarquia entre elas.
Figura 8.2 Estrutura do site e hierarquia entre as pginas.
Esta hierarquia ser gerenciada pelo FrontPage. Em cada uma das pginas apresentadas iremos utilizar um recurso novo, o que ir dar uma dinmica muito interessante ao seu aprendizado, alm do mais, voc poder utilizar este mesmo sistema no desenvolvimento de outras pginas. A seguir voc ir aprender como criar esta estrutura no FrontPage.
126
Criando uma nova Web

Uma Web nada mais do que uma pasta em seu winchester que possuir algumas caractersticas especiais. O prprio FrontPage se encarregar de colocar estes atributos. Basta voc fazer o seguinte: 1. Abra o FrontPage 2. Clique no menu Arquivo, Novo, Web A prxima janela ir aparecer.
Figura 8.3 Digite um local onde dever ser armazenado o seu novo site. Aps isto uma nova pasta criada e seus arquivos sero todos armazenados nela.
3. Clique em OK. Aps clicar em Criar a nova pasta da Web, uma pgina em branco ir aparecer. Nela voc j poder criar o site.
127
Figura 8.4 Aqui voc cria o seu site como se estivesse utilizando o Word. No lado esquerdo voc tem acesso a informaes como: pastas e arquivos contidos no seu site, estrutura dos links, tarefas a serem realizadas, entre outras. Futuramente voc aprender sobre cada uma delas.
Para ativar ou desativar o menu lateral, basta clicar no menu Exibir, Barra de modos de exibio.
Criando a estrutura do site

Agora iremos passar para o FrontPage a estrutura planejada para nosso site. Clique no menu lateral em Navegao. Se ele no estiver presente, clique no menu Exibir, Barra de modos de exibio.
Figura 8.5 Clique em Arquivo, novo, pgina. Altere o nome de Home Page para TOP TRAINING clicando sobre ela.
128
Esta nossa primeira pgina. Passe para o modo de Pastas e veja que o primeiro arquivo j foi criado. Clicando em Relatrios voc ver que j houve alterao no seu contedo, ou seja, os relatrios so dinmicos e prestam um resumo de toda a sua atividade de desenvolvimento.
Figura 8.6 Veja nos relatrios que tivemos alterao em Todos os arquivos: 1.
Este item apresenta o total de arquivos que foram criados. Mas vamos continuar...
Inserindo todas as pginas

Volte para o modo de navegao, iremos criar os outros arquivos que faro parte de nossa Home Page. Para criar as pginas basta clicar com o boto do lado direito do mouse sobre a pgina superior que ir chamar a inferior. Por exemplo:
129
Figura 8.7 A pgina Cursos inferior a TOP TRAINING. Para cri-la, basta clicar com o boto direito sobre a pgina superior, em seguida sobre Nova pgina. Altere o nome da nova pgina para que fique de acordo com o projeto inicial.
Faa isto com todas as pginas para que fiquem como a especificao inicial do projeto. Seguir o que est proposto no projeto to importante quanto montar o site. Aps esta etapa voc j poder navegar pelas opes do menu lateral. Veja quanta coisa j foi feita.
Figura 8.8 Esta a estrutura final de navegao do nosso site.
130
Conhecendo o FrontPage
Neste ponto iremos comear o trabalho de webmaster em nossa pgina. Trabalharemos em cada uma das pginas, uma de cada vez. Para editar a primeira pgina clique duas vezes sobre ela (a TOP TRAINING). Ela nossa pgina inicial, deveremos deix-la no capricho para que os visitantes tenham uma boa impresso de nosso site. Para que no tenhamos problemas com a visualizao, feche o menu lateral clicando em: Exibir, barra de modos de exibio. A tela ficar como mostrada a seguir:
Figura 8.9 O grande facilitador do FrontPage que voc pode montar a pgina e j sentir como ela ir ficar.
Ela possui uma aparncia semelhante a dos programas da Microsoft, o que tornar fcil o seu entendimento. Opes como abrir, fechar, copiar, sublinhar, negrito, centralizar, etc. funcionam de maneira idntica ao Word. Agora poderemos iniciar nossos trabalhos. Todo o cdigo em HTML ser gerado pelo prprio editor e s teremos que edit-lo como se estivssemos utilizando o Word. Clicando em HTML na parte inferior da tela voc tem acesso aos cdigos que o FrontPage est criando.
131
Cores do fundo de tela

A primeira coisa a definir o fundo que ser utilizado. Para especific-lo, siga os passos a seguir. Se a pgina principal no estiver aberta, abra-a agora.
Figura 8.10 Clique com o boto direito do mouse sobre o fundo da tela. Clique em propriedades da pgina. Na caixa plano de fundo escolha a cor desejada para o plano de fundo. Clique em OK para encerrar.
Perceba que uma srie de recursos podero ser utilizados. Por exemplo, clicando em Figura de plano de fundo voc poder escolher uma Figura para ficar no fundo da pgina. Vrias outras opes podem ser configuradas na janela de propriedades da pgina. Experimente.
Inserindo e formatando textos

Logicamente teremos que inserir textos em nossas pginas, para isto, basta escrever na posio desejada. Voc poder centralizar, alinhar direita ou esquerda, colocar ITLICO, NEGRITO ou SUBLINHADO da mesma maneira como faz normalmente no Word. Coloque nosso nome no topo da pgina TOP TRAINING CENTER, na cor azul em negrito e itlico, j que esta ser uma pgina comercial da nossa empresa. Logo abaixo do nome da empresa, crie com uma fonte menor uma segunda linha com a chamada principal: CURSOS DO JEITO QUE VOC PRECISA
132
Perceba que at agora no necessitamos digitar nenhum cdigo em HTML. Mas caso voc precise, poder faz-lo clicando na opo HTML na parte inferior da tela, prximo barra de status.
Figura 8.11 Salve seu trabalho, que a partir de agora iremos increment-lo.
Inserindo linhas horizontais

Para inserir linhas horizontais clique no menu Inserir e em seguida na opo Linha horizontal. Experimente colocar linhas em sua pgina e veja os efeitos. Linhas so teis quando necessitamos separar textos que so independentes entre si, como a descrio de produtos, detalhes de um curso, etc.
Figura 8.12 Para alterar as caractersticas da linha inserida, clique com o boto direito do mouse sobre ela e acesse a opo Propriedades da linha horizontal.
133
Nesta tela voc controla a cor da linha, o tamanho e o seu alinhamento. O tamanho da linha pode ser medido em Pixels ou em Porcentagem da tela. Aps alterar como desejar, clique em OK.
Criando os primeiros links

Existe nas pginas da Internet um grande fascnio pela possibilidade de se locomover por diversos sites de forma instantnea. Isto se d graas ao hyperlink que pode ser um texto ou imagem que, ao ser clicado, transporta o internauta para outro site criando assim uma rede de propores mundiais. De acordo com o nosso projeto, nossa primeira pgina ter links para outras, que so: Cursos | Clientes | Histrico | Fale conosco | Franquias Para isto digite o texto anterior logo depois da linha que voc inseriu (linha horizontal). Selecione a primeira palavra que conter o link. Comece por Cursos. Clique no menu Inserir, em seguida sobre Hiperlink. Clique no arquivo que ser chamado: Curso.htm.
Agora a palavra j est com o link pronto. Repita o processo para os demais links e suas respectivas pginas. Sempre que precisar, recorra ao projeto inicial para relembrar a hierarquia das pginas.
Inserindo um letreiro digital

Um letreiro digital deixar sua pgina com um requinte valioso. Letreiros devero conter frases que causem impacto no internauta. Elas podero ter uma definio dos servios da empresa, ou dos assuntos que voc gosta (no caso de um site pessoal). Vamos colocar este letreiro logo abaixo dos links; para isto, posicione o cursor no final da pgina e faa o seguinte: Clique no menu Inserir, Componente Selecione letreiro digital
O texto que dever aparecer :

Horrios flexveis, atendimento individual - Agora voc achou o que voc precisa...
134
Figura 8.13 Voc poder experimentar vrios parmetros como: direo, velocidade, alinhamento, largura, altura, entre outros. Para isto basta acessar as propriedades do letreiro.
Veja como nossa pgina dever estar:
Figura 8.14 Logicamente que no precisa estar exatamente igual. Isto ir depender das fontes que voc utilizou, cores e posicionamento na tela.
Criando mapas clicveis

Mapas clicveis so links em figuras que faro o acesso a outras pginas ou a outros documentos. Os visitantes de um site podem dar um clique em um link e saltar at o lugar para o qual ele aponta; essa localizao representada como uma URL (http://www...). possvel criar links para arquivos, fotos, e-mail, etc.
135
Vamos inserir uma Figura do clipart em nossa pgina inicial. Para isto siga os passos: Posicione-se no incio da pgina. Clique no menu Inserir, Figura, Clip-art. Escolha a Figura. Clique com o boto direito sobre ela e escolha Inserir. Redimensione a Figura para que fique no tamanho adequado.
Figura 8.15 Aps inserir a Figura, selecione-a e clique sobre o cone de rea interativa (em forma de retngulo). Em seguida selecione a rea sobre a Figura que ir conter o link. Agora escolha o arquivo para o qual o link ir apontar.
Para ver como seu trabalho est ficando, clique em Arquivo, Visualizar no n avegador.
Trabalhando com tarefas

A criao de um site pode levar dias e at meses. Como um trabalho que vai sendo construdo aos poucos, voc sempre precisar anotar tudo o que ainda falta para terminar. Com esta finalidade existem as tarefas.
136
Figura 8.16 Para abrir a lista de tarefas, clique sobre a opo Tarefas do menu de Modos. Caso ele no esteja na tela escolha no menu Exibir, barra de modos de exibio. Para inserir uma tarefa, basta clicar com o boto direito do mouse sobre o fundo da tela e em seguida na opo Nova tarefa.
Preencha os dados solicitados a esta nova tarefa e clique em OK, aps inserida a tarefa. Clicando com o boto direito do mouse sobre a tarefa voc poder alterar seu Status (Marcando como concluda). Clique duas vezes sobre a tarefa para edit-la ou ver o seu contedo.
Construindo Formulrios
Uma das partes mais importantes em um site o formulrio. Atravs dele o usurio entrar em contato com o proprietrio da pgina, poder escolher produtos para compra, dar sua opinio a respeito de um d eterminado assunto, e outros infinitos recursos. No entanto, para que os formulrios funcionem de acordo com o esperado, seus dados precisaram ser submetidos a um programa em ASP ou CGI. Como nos prximos captulos voc aprender a criar programas em ASP, no entraremos neste assunto agora. Caso voc tenha feito os formulrios no captulo sobre HTML, perceber que no FrontPage eles so bem mais fcies de serem criados. Basicamente so duas etapas para que voc construa um formulrio. Criar o formulrio em si Especificar o programa que ir processar os dados
Veja na Figura 8.17 um exemplo de formulrio.
137
Figura 8.17 A linha pontilhada envolve todo o contedo do formulrio. Dentro da rea destinada para ele foi criada uma tabela com 2 colunas e 4 linhas para permitir um alinhamento com maior preciso.
Para construir um formulrio como o mostrado, siga estes passos: Crie um novo arquivo: Arquivo, Novo, Pgina Na pgina em branco digite o cabealho do formulrio Clique no menu Inserir, Formulrio, Formulrio Clique no menu Tabela, Inserir, Tabela Crie uma tabela com 4 linhas e 2 colunas Clique em OK Posicione dentro da primeira linha/coluna e digite Nome Posicione dentro da segunda coluna da primeira linha e clique em Inserir, formulrio, caixa de texto de uma linha Faa o mesmo com os demais campos Formate o formulrio como desejado
Para alterar o texto nos botes, basta clicar duas vezes sobre ele. Experimente colocar novas linhas na tabela e novos campos no formulrio.
Pginas com quadros (frames)

Quadros so regies retangulares de uma pgina da web, nas quais voc pode exibir outras pginas ou imagens. No FrontPage, possvel criar pginas de quadros com o uso de modelos de quadros.
138
Os quadros podem ser usados de vrias maneiras. Sua utilizao s limitada pela sua imaginao. Voc dever usar quadros sempre que quiser manter esttico um determinado contedo de uma pgina, enquanto outros contedos se modificam. Veja como fica um quadro no exemplo da Figura 8.18:
Figura 8.18 Com a utilizao de quadros, podemos colocar um menu fixo esquerda enquanto a pgina direita ser trocada de acordo com o link clicado.
Cada um dos lados do quadro ser um arquivo diferente. Uma p gina principal ficar responsvel por dividir a tela em duas e carregar as demais. Para criar uma nova pgina com quadros siga os passos: Clique no menu Arquivo, Novo, Pgina Clique em Pgina de quadros Selecione a opo Contedo Clique em Ok
Aps estes passos clique em Salvar, informando como nome da pgina: quadros.htm
139
Figura 8.19 Nesta tela voc poder criar ou informar quais sero as duas pginas que iro compor a pgina de quadros. Do lado esquerdo criaremos um menu. Do lado direito carregaremos a pgina principal do nosso site.
Siga os passos: Do lado direito clique em Definir pgina inicial, pois neste caso j temos a pgina pronta. Escolha a pgina: index.htm Do lado esquerdo clique em Nova pgina e crie um menu com links, conforme mostrado na Figura 8.18, que so os mesmos links da pgina index.htm.
Salve a pgina lateral com o nome de ladoe.html.
Utilizando temas
A utilizao de temas uma alternativa a voc ter que criar todo o layout do site. Os temas so padres de cores, links e textos predefinidos para facilitar (e principalmente padronizar) o seu trabalho. Voc poder aplicar cada um dos temas disponveis e, quando o site ficar do seu agrado, aplicar a todas as pginas. Feche as pginas que estiverem abertas Abra novamente apenas a pgina principal Clique no menu Formatar, Tema
140
Escolha o tema desejado Clique em OK
Voc poder escolher entre aplicar em todas as pginas ou apenas na pgina selecionada.
Posicionando e sobrepondo figuras

Este um recurso bastante utilizado nos sites atuais. Com ele voc poder posicionar figuras em qualquer posio da tela sem precisar ficar preso s limitaes de linhas. Com a ordem Z, podemos at mesmo sobrepor figuras na pgina. A primeira pgina do nosso site possui uma Figura que poderemos alterar. (Caso ela no possua uma Figura, insira um clip-art).
Figura 8.20 Selecione a Figura e clique no menu Formatar, Posio. Escolha a opo Absoluto e em Ordem Z escolha 1.
Com isto voc poder mover a Figura para onde quiser na pgina. A ordem Z igual a 1, diz para a Figura ficar atrs do texto pois ele est na ordem 0.
Entendendo a ordem Z
A ordem Z representa a camada na qual a Figura ir ficar. A camada principal a de nmero 0. Quanto menor a ordem Z, mais atrs a Figura ficar, quanto maior, mais frente.
141
Importando pginas prontas

Importar uma pgina ou site da Internet significa trazer todo o seu contedo para dentro do seu computador. Pode parecer estranho, mas isto mesmo. Quando voc solicitar a importao de um site, todos os arquivos que o compem (com exceo das pginas dinmicas tipo ASP ou CGI) sero carregados para dentro da pasta que voc especificar. Este recurso tambm poder ser utilizado para importar um arquivo de uma pasta diferente da atual. Se voc possuir uma conexo com a Internet, experimente os passos a seguir para ver como funciona a importao. Crie uma nova Web clicando em Arquivo, Novo, Web Clique em Arquivo, Importar Clique em Da web Informe o local original do site (ex: www.uol.com.br) Clique em Avanar Informe a quantidade mxima de pginas a importar Clique em Avanar Clique em Concluir
Aps alguns instantes todos os arquivos que compem o site estaro dentro da pasta que voc informou. Este recurso ser bastante til para que voc entenda como est a estrutura de um determinado site. Ou quando precisar remontar um site de que voc no tenha mais os arquivos originais e o site j esteja publicado.
Utilizando bordas compartilhadas

Um outro recurso interessante o compartilhamento de bordas. Com ele voc poder fazer com que um dos lados da Home Page seja idntico em qualquer pgina criada. Seria como se voc criasse quadros sem precisar ter um arquivo para cada lado da pgina. A borda compartilhada muito utilizada para a montagem de m enus. Crie uma nova Web para que possamos utilizar este recurso. Siga os passos:
142
Figura 8.21 Crie uma nova Web em uma pasta diferente da atual. Clique no menu Formatar, bordas compartilhadas. Esta janela dever aparecer. Marque as opes como mostrado.
Isto indica que a borda ser aplicada a todas as pginas e que ser do lado esquerdo.
Figura 8.22 Veja como ficou depois de criarmos as bordas compartilhadas.
Instalando um programa para FTP

A prximo passo a ser dado aps a criao do site envi-lo ao provedor de acesso. Existem vrias formas de se fazer isto, no entanto, a mais popular atravs de um programa especfico para FTP (File Transfer Protocol).
143
Na verdade todos os sistemas operacionais j possuem algum programa para transferncia de arquivos via FTP internamente. Mas a utilizao de um programa especfico para esta finalidade lhe permitir a utilizao de diversos recursos presentes apenas nestes softwares. No nosso exemplo utilizaremos o WS_FTP, mas as configuraes que iremos lhe apresentar so idnticas na maioria dos programas para transferncia de arquivos. Voc poder conseguir o WS_FTP atravs do site do seu fabricante: http://www.ipswitch.com. Aps disparar a instalao do programa voc ter uma tela como mostrado na Figura 8.23:
Figura 8.23 Escolha a opo install or update WS_FTP Pro e clique no boto Continue.
Em seguida escolha a pasta onde o programa ser instalado. Clique em OK e aps alguns instantes a instalao estar concluda. Provavelmente voc ser solicitado a reiniciar o computador. Aps o reincio, v at o menu programas e acesse o cone WS_FTP Pro. A prxima etapa configurar um novo acesso FTP.
Criando uma nova conta de FTP

Agora vamos v como podemos criar uma nova conta para envio e recebimento er dos arquivos do provedor. Para isto voc precisar possuir trs informaes: O endereo do site conforme informado pelo provedor O nome de login A senha de acesso
Perceba que o provedor poder disponibilizar logins e senhas diferentes para acesso Internet e envio de arquivos. Voc precisar confirmar junto com o suporte de cada provedor. Ao entrar no WS_FTP voc ter uma tela como a mostrada na Figura 8.24:
144
Figura 8.24 Do lado esquerdo voc tem acesso aos arquivos do seu computador. J do lado direito esto os arquivos no provedor.
Primeiro vamos criar uma conexo fictcia, somente para que voc conhea como funciona. Clique na opo Connect, e a tela da Figura 8.25 ir aparecer.
Figura 8.25 Veja que se a conexo estivesse pronta, bastaria clicar em Quick Connect. Como este no o nosso caso, clique em New.
Agora iremos iniciar a configurao do novo acesso.
145
Figura 8.26 Informe o nome do novo FTP e em seguida clique em Next.
Figura 8.27 Digite o endereo que armazenar os arquivos. Clique em Next.
Figura 8.28 Informe o nome do usurio e a senha de acesso. Lembre-se de que esta senha poder ser diferente da utilizada para conexo. Informe-se sobre isto com o provedor.
Clicando em Finish a nova conexo estar pronta para ser utilizada.
Enviando e recebendo arquivos

Agora que voc j criou a nova conexo, conecte-se na Internet, escolha a conexo a ser utilizada e clique em Ok. Uma tela como a mostrada na Figura 8.29 ser apresentada.
146
Figura 8.29 Enviar e receceber arquivos simples. Clicando duas vezes sobre os arquivos do lado esquerdo eles sero enviados. Sobre o lado direito eles sero recebidos.
Existem outras opes que podem ser acessadas nos menus laterais tanto do lado esquerdo quando do lado direito. So elas: ChgDir Mkdir View Exec Rename Delete Refresh Dir|Info Troca de diretrio (pasta) Cria diretrio (pasta) Exibe o contedo do arquivo Executa o programa Renomeia o arquivo Apaga o arquivo Atualiza a tela Informaes sobre o diretrio (pasta)
As setas no meio da tela tambm podem ser utilizadas para enviar ou receber o(s) arquivo(s) selecionado(s). Isto tudo o que voc precisa saber sobre o WS_FTP. Se algo der errado, entre em contato com o seu provedor de acesso. Ele lhe orientar como criar a conexo ideal. Muitos provedores disponibilizam esta infomao atravs do prprio site. Experimente.
147
Dreamweaver
Continuando nossa investida pelas ferramentas de desenvolvimento para a Internet, vamos agora aprender um pouco sobre o Dreamweaver, criado pela Macromedia. Trata-se de uma ferramenta com boa aceitao no mercado e isto se deve sua simplicidade aliada grande quantidade de recursos. Na verdade, decidir sobre ela e o FrontPage uma tarefa difcil. Para estudar este captulo, recomendamos que voc j tenha passado pelo FrontPage ou pelo menos pelo HTML, pois partimos do princpio de que voc j tenha alguma noo de criao de sites.
Iniciando no Dreamweaver
Agora que voc j aprendeu a criar pginas utilizando o FrontPage, ir aprender a utilizar o Dreamweaver. A finalidade principal deste software a mesma do FrontPage (na verdade um v o outro como principal concorrente). Voc deve estar se perguntando: por que o d esenvolvedor precisa conhecer os dois? A resposta simples. O primeiro motivo para que voc possa decidir qual dos dois ir utilizar! E o segundo se deve ao fato de que existem muitas empresas que utilizam os dois, pois cada um deles possui recursos que os diferenciam em alguns aspectos. Partiremos do princpio de que voc j conhece o HTML ou pelo menos o FrontPage. Muitos dos recursos que voc conheceu nos captulos sobre estes assuntos sero tratados aqui de uma forma um pouco mais superficial. Quando voc abrir o Dreamweaver ver uma tela como a mostrada na Figura 8.30:
Figura 8.30 Esta a tela de abertura do Dreamweaver. Nela voc poder produzir seus sites da mesma maneira que no FrontPage. Perceba que temos uma barra de formatao, que na maior parte do tempo estar visvel.
148
Primeiramente vamos explorar tudo que j conhecemos de outros programas. Voc vai perceber que muitas das opes dos menus so semelhantes a todos os outros que voc j conhece. Mas existem novidades, como o menu Janela, o qual apresenta todas as opes de janelas disponveis ao usurio. Experimente criar alguma coisa como se voc estivesse utilizando o Word.
Familiarizando-se com o menu

Continuando nosso reconhecimento do software, vejamos algumas opes dos menus que so semelhantes no FrontPage ou no Word. Experimente ir acessando cada uma delas enquanto l o livro.
Arquivo
Novo Abrir Fechar Salvar Salvar Como Salvar Tudo Visualizar no Navegador
Editar
Desfazer Recortar Copiar Colar Selecionar Localizar Substituir
Inserir
Imagem Tabela Formulrio Quebra de linha Data
149
Comentrio
Texto
Recuo Formato Alinhamento Fonte Estilo Tamanho Cor Verificar a ortografia Ou seja, muita coisa permanecer da mesma forma que voc j conhece (como no poderia deixar de ser). Experimente passar por estas opes no menu e veja que at mesmo as posies so idnticas aos produtos Microsoft. medida que avanarmos com o curso voc conhecer as demais opes do menu, as quais no esto nas listagens anteriores.
Comeando uma nova pgina

Agora que j demos uma olhada geral no software, vamos comear a utiliz-lo pr valer. Nesta etapa iremos lhe mostrar passo a passo como se constri um novo site da Web. Siga os passos: Clique em Arquivo, Novo
Aparecer a janela da Figura 8.31.
150
Figura 8.31 Aqui voc j poder comear a trabalhar.
Recomendamos que voc crie uma subpasta onde dever salvar todos os arquivos do site que iremos criar.
Definindo algumas propriedades da pgina

Alterar as propriedades da pgina atual significa poder configurar parmetros como: Ttulo da pgina, Imagem do fundo, Cores de textos, entre outros. Para isto siga os passos: Clique no menu Modificar e acesse a opo Propriedades da pgina.
Ferramentas para Desenvolvimento na Web Figura 8.32 Nesta tela voc tem diversas opes de formatao. Experimente mudar as cores do texto e do fundo e veja os resultados.
151
Por enquanto, experimente mudar apenas as opes que voc j conhece (as mesmas do FrontPage e do HTML). Nas prximas etapas aprenderemos algumas opes mais sofisticadas. Ao final clique em Ok.
Salvando seu trabalho

Faa algumas alteraes na sua pgina para que ela fique como mostrada na Figura 8.33. Em seguida salve-a com o nome de index.htm, na subpasta que voc criou.
Figura 8.33 A fonte utilizada foi Arial itlico e Arial.
Trabalhando com camadas

Um outro recurso interessante e muito fcil de ser utilizado no Dreamweaver so as camadas (layers). Com as camadas podemos sobrepor figuras e textos na mesma pgina. Voc poder criar, por exemplo, um menu lateral que poder ser deslocado conforme sua necessidade. O mais interessante que uma camada se comporta como se ela fosse uma pgina em separado, ou seja, ela poder conter sua prpria formatao de texto, figuras, etc. Para inserir uma camada (que iremos utilizar como um menu), siga os passos:
152
Escolha no menu Janela a opo Camadas para ter acesso a uma janela que controla as camadas presentes na pgina. Clique no menu Inserir, Camada.
Aparecer um quadrado (que constitui a camada), no qual voc dever digitar as opes do menu que iremos criar. Veja na Figura 8.34 o que voc dever digitar na camada.
Figura 8.34 Ao digitar cada opo do menu, tecle Shift+Enter para um salto de linha mais curto. A camada poder ser movida clicando sobre a ala na parte superior da camada.
Aproveite para salvar sua pgina. Para ver como est ficando no navegador, basta pressionar F12. Para evitar a sobreposio de camadas, marque a opo Evitar sobreposies, presente na caixa de controle das camadas. Se quiser apagar uma camada, basta selecion-la e delet-la.
Inserindo tabelas
Bem, se voc j criou tabelas no Word ou no FrontPage, sabe o quanto elas facilitam nosso trabalho de posicionamento e formatao de pgina. Sempre que possvel, aconselhavel que voc planeje toda sua pgina para utilizar tabelas.
153
Como no poderia deixar de ser, criar tabelas no Dreamweaver muito simples. Vamos inserir uma em nossa pgina que ir conter trs c olunas e apenas uma linha. Posicione-se logo abaixo da ltima frase do seu site (por exemplo: abaixo da frase Cursos de informtica do jeito que voc precisa). Clique no menu Inserir, Tabela. Escolha 1 linha, 3 colunas e largura 75 por cento. Clique em Ok e uma nova tabela ser criada.
Figura 8.35 Perceba que uma nova caixa de ferramentas para formatao da tabela ir aparecer. Atravs dela, escolha na caixa Alinhar a opo Ao centro.
Experimente alterar algumas opes desta janela e veja os resultados (a tabela precisar estar selecionada). Algumas so interessantes como a que permite que voc escolha o nmero de linhas e colunas, a espessura da borda, entre outras.
Recursos rpidos (parte I)

Voc acaba de chegar na primeira seo de recursos rpidos. Eles no possuem uma utilizao muito freqente, no entanto so to importantes como quaisquer outros. O ideal que voc v experimentando medida que l o livro.
154
Inserindo linha horizontal

Clique no menu Inserir, Rgua horizontal e perceba que, aps inserir a linha horizontal, voc poder alterar suas propriedades.
Inserindo molduras (frames)

Clique em Inserir, Moldura. Escolha uma posio para a moldura (por exemplo, a esquerda)
Este recurso o mesmo dos quadros do FrontPage.
Vnculo de correio eletrnico

Clique em Inserir, Link de correio eletrnico. Digite o texto e o endereo de e-mail.
Data atual
Clique em Inserir, Data.
Inserindo smbolos
Clique em Inserir, Caracteres especiais. Escolha um dos vrios tipos.
Exibindo rguas de controle e grade

Clique em Exibir, Rguas, Mostrar. Clique em Exibir, Grade, Mostrar a grade.
Utilizando modelos de pginas

Agora vamos conhecer um recurso muito interessante. A utilizao de modelos vai fazer com que seu trabalho fique muito mais fcil. Voc poder criar uma pgina padro que ser salva como um modelo. Com isto, cada pgina gerada a partir do modelo ficar idntica original. Isto simplificar substancialmente o seu trabalho. Como padro, todas as regies em uma pgina modelo so marcadas como bloqueadas quando salvas; para tornar o modelo til necessrio que algumas de suas partes sejam editveis.
155
Enquanto o modelo estiver sendo editado, possvel fazer alteraes tanto nas regies editveis quanto nas bloqueadas. Quando o modelo for aplicado a um documento, no entanto, as modificaes podero ser feitas apenas nas regies editveis do documento; as regies bloqueadas no podem ser alteradas. Veja como funciona: Crie uma Nova pgina (a qual servir de modelo para todas as outras), seguindo o exemplo mostrado na Figura 8.36:
Figura 8.36 Aps digitar o texto da pgina, tecle Enter para saltar duas linhas. A regio editvel estar sempre abaixo da frase Cursos de Informtica, ou seja, este ttulo estar presente em t odas as pginas que forem criadas a partir de um modelo.
Para salvar esta pgina como modelo, clique em Arquivo, Salvar como modelo. Digite um nome para o modelo, por exemplo principal e clique em Salvar.
Criando uma regio editvel no modelo

A pgina que voc criou anteriormente funciona muito bem como modelo, no entanto, ela no adiantar se no possuir nenhuma regio que possa ser editvel. Para criar uma regio editvel siga passo a passo as etapas. Selecione todo o texto a partir da palavra CURSOS (Incluindo a frase Cursos de Informtica). Clique em Modificar, Modelos, Nova regio editvel.
156
Informe um nome para esta regio, por exemplo: detalhes.
A regio aparecer em destaque. Agora salve novamente o modelo.
Criando um documento a partir do modelo

Agora que j temos um modelo para nossas pginas, vamos utiliz-lo. Clique em Arquivo, Novo a partir do modelo. Selecione o modelo principal, e clique em Selecionar.
O novo arquivo ser aberto. No entanto, a nica regio editvel est abaixo da linha. Experimente alterar o nome Top Training Center e veja o que acontece.
Inserindo molduras (frames)

Se voc j fez as etapas no FrontPage que trata dos quadros (molduras) no ter muita dificuldade. Entretanto, criar molduras no Dreamweaver bem mais simples. Crie um novo arquivo. Em seguida clique no menu Inserir, Molduras, Esquerda.
Voc poder redimensionar a moldura arrastando-a para os lados. Agora precisamos definir quais so os arquivos que iro compor a moldura. Para isto clique em Janela, Molduras.
157
Figura 8.37 Clique sobre a moldura do lado direito e no campo Orig informe o nome do arquivo que dever aparecer na moldura (index.htm). Perceba que do lado esquerdo no carregaremos nenhum arquivo previamente. Ou seja, voc poder criar um arquivo totalmente novo.
Viu como fcil? Voc poder informar outros parmetros como: bordas, margens, entre outros, na caixa de propriedades das molduras.
Verificando os navegadores de destino

Um recurso interessante a possibilidade que ele tem de avaliar o seu site e dizer se ele ir causar problemas quando aberto por navegadores de verses diferentes. Este um recurso importante, para evitar a frustrao do usurio ao tentar abrir sua pgina e receber uma mensagem de erro. Para testar o site siga os passos: Clique em Arquivo, Verificar os navegadores de destino. Selecione os navegadores a serem analisados.
Ser aberto o browser com uma pgina com os possveis erros e um detalhamento sobre eles. Experimente.
158
Utilizando o menu Exibir

Vamos ver agora como funciona algumas das opes no menu Exibir. Como se trata de recursos para a edio da pgina, vamos mostr-los todos juntos, tornando a compreenso mais simples. Neste primeiro momento, veremos apenas os que so mais utilizados, em seguida mostraremos os demais. Para ver como funciona, clique sobre o menu Exibir e, em seguida, sobre cada uma das opes adiante:
Cdigo
Permite que voc tenha acesso ao cdigo HTML da pgina.
Projeto
Permite que voc retorne rea de criao do Dreamweaver.
Cdigo e projeto
Muito til. Permite que voc veja a rea do projeto e o cdigo em HTML ao mesmo tempo.
Visualizao de tabelas
Na visualizao de layout voc poder ver as dimenses de cada clula da tabela. O modo padro volta ao normal.
Auxlios visuais
Como o prprio nome diz, permite que voc veja os contornos de alguns objetos como bordas de tabelas, bordas de camadas, etc. Isto no significa que elas sero apresentadas pelo navegador, elas serviro apenas como guia quando voc estiver desenvolvendo. Experimente retirar cada uma delas e voc ver que fica difcil perceber onde esto, por exemplo, os limites de uma tabela.
Rguas
Permite que sejam exibidas rguas na tela. Isto ir facilitar quando voc precisar posicionar elementos na tela (figuras/applets, etc.).
159
Grades
Permite que se exiba uma grade no fundo da pgina para facilitar o posicionamento de elementos.
Criando formulrios
Vamos aprender agora como criar formulrios no Dreamweaver. No uma tarefa difcil (principalmente se voc j o fez antes). Para inserir o primeiro campo, siga os passos: Crie um novo arquivo. Salte algumas linhas [Enter]. Clique no menu Inserir, Objetos de formulrio, Campo de texto.
Figura 8.38 Perceba que o novo campo foi inserido e uma linha pontilhada determina a rea do formulrio. Voc poder inserir quantos campos quiser.
Clicando sobre cada um dos campos aparecer a janela de propriedades. Voc poder informar o nome do campo, o tamanho, o valor inicial, o tipo de campo, entre outras coisas. Experimente colocar mais campos e pressione F12 para visualizar no navegador.
Processando o formulrio
Os dados do formulrio devero ser enviados para um programa processador de formulrio (ASP, CGI, etc.), o qual j dever estar pronto. Voc aprender a criar
160
um ASP processador de formulrios no Captulo 10. Por hora, se voc quiser testar o funcionamento do seu formulrio, poder utilizar o ASP disponvel em nosso site. Para isto, temos que especificar a localizao do programa e enviar tambm parmetros ocultos que iro informar para onde os dados devero ser encaminhados. Siga os passos: Clique sobre a linha tracejada do formulrio. Na janela que aparecer, informe o endereo do ASP que processar o formulrio no campo ao: www.toptc.com.br/cgi-bin/formulario/formulario.asp
Agora precisamos informar o e-mail que receber os dados processados. Para isto faa o seguinte: Clique dentro do formulrio. Clique em Inserir, Objetos de formulrio, Campo oculto. Informe o nome do campo como: destino. Em valor, digite o e-mail que receber o formulrio.
Pronto, agora s testar (para isto voc dever estar conectado Internet). No se preocupe se voc ainda no compreendeu o que acontece quando o formulrio submetido ao ASP. Isto ficar claro quando voc ler o Captulo 10.
Server-Side
Agora vamos aprender a utilizar um recurso bastante interessante. O processamento do lado do servidor. Trata-se de uma forma de utilizar o processamento realizado pelo servidor. No nosso exemplo, utilizaremos um pequeno programa em JavaScript, o qual dever ser digitado no Bloco de Notas e salvo como HTML. Em seguida, utilizaremos o script de servidor para incluir este arquivo sempre que ele for chamado. Ou seja, o script no far parte diretamente da pgina, ele ser chamado apenas quando o browser achar a solicitao de incluso do arquivo. O que voc ganha com isto? Suponhamos que voc tenha uma rotina que se repita em vrias pginas. Num belo dia voc resolve alter-la mas, como ela est em vrias pginas, voc ter que fazer a alterao em todas elas. Utilizando o arquivo de incluso, voc poder digitar o cdigo comum s pginas em um arquivo diferente, e cham-lo quando quiser. Se for necessria uma alterao no cdigo, basta alterar no arquivo original e automaticamente ele ser alterado em todas as pginas que o utilizam. Vamos a um exemplo:
161
Crie esta programao JavaScript no Bloco de Notas e salve-o como java.html

<script language="Javascript"> alert("Ol, internauta!") </script>
No Dreamweaver, clique em Inserir, Server-Side Include. Selecione o arquivo Java.html.
Voc ver apenas um smbolo indicando a presena do arquivo includo. Mas quando executar a pgina ver a mensagem em JavaScript. Este cdigo (java.html) poder ser inserido em todas as pginas. Quando voc quiser mudar a mensagem, basta alterar no arquivo original, que automaticamente ser alterada em todas as pginas que utilizarem este recurso.
Linhas do tempo
Este outro recurso muito interessante. Com ele podemos criar scripts que iro fazer com que objetos se movimentem pela tela. S pra lembrar: voc no vai precisar escrever uma nica linha de cdigo, isto no interessante? Os conceitos envolvidos so: Camadas, HTML dinmico e JavaScript. Voc poder alterar as seguintes caractersticas das camadas: Sua posio (X,Y) Sua visibilidade Sua dimenso
Para abrir a linha do tempo, clique no menu Janela, Linhas de tempo.
162
Figura 8.39 Para nossos testes crie uma pgina vazia.
Siga os passos: Clique em Inserir, Camada. Clique com o boto do lado direito do mouse e escolha a opo: Gravar o caminho.
A tela dever ficar como a mostrada a seguir:
Figura 8.40 Voc poder fazer o caminho como quiser. Opcionalmente marque as opes Execuo automtica (ao carregar a pgina) e Loop (executar repetidamente).
163
Recursos rpidos (parte 2)

Vamos novamente entrar por algumas opes do menu as quais voc ir utilizar muito raramente, mas que precisam ser conhecidas. Para experimentar, basta seguir o procedimento. No menu Inserir, Tags invisveis, Script Permite que voc digite uma seqncia de comandos em JavaScript ou VBScript. Para tal, basta que voc especifique a linguagem a ser utilizada. No menu Modificar, Propriedades da seleo Ativa ou desativa as caixas que aparecem automaticamente quando voc clica sobre os objetos. Experimente desmarcar esta opo e selecionar uma frase. Perceba que no ir aparecer a caixa que lhe permite alterar as caractersticas do texto selecionado. Agora remarque a opo e selecione novamente o texto. As propriedades aparecero novamente na caixa de dilogo. Modificar, Quick tag editor Permite que voc digite um comando HTML diretamente em uma caixa de dilogo. Modificar, Converter, Camadas em tabela Com esta opo voc poder converter suas camadas em clulas de uma tabela. Esta opo ser interessante para que sua pgina no apresente erros quando da execuo das camadas (navegadores mais antigos no permitem camadas). Comandos, Limpar o HTML Permite que o Dreamweaver faa ajustes no HTML com o objetivo de tornar o cdigo mais enxuto e de fcil entendimento.
Gravando comandos
A operao que permite gravar uma srie de comandos passa a ser interessante quando voc precisar repetir o mesmo processo vrias vezes. Um bom exemplo seria a criao de vrias tabelas em uma mesma pgina. Suponhamos que voc queira criar 5 tabelas com 3 colunas e 5 linhas cada uma. Vamos criar a primeira utilizando o recurso que ir gravar todas as aes que estivermos executando. Em seguida iremos solicitar ao Dreamweaver que repita os passos executados.
164
Crie um Novo arquivo. Clique em Comandos, Iniciar a gravao (a gravao ter incio). Clique em Inserir, Tabela, informe 5 linhas 3 colunas, clique em Ok! Clique em Comandos, Parar a gravao.
Aparecer uma tabela como a mostrada na Figura 8.41.
Figura 8.41 Agora posicione o cursor abaixo da tabela gerada. Clique em Comandos, Executar o comando gravado. Uma nova tabela ser criada.
Pronto! Voc poder executar o comando quantas vezes quiser.
Convertendo para navegadores 3.0

O Dreamweaver possui um recurso que nos dias atuais talvez no tenha uma grande utilidade, mas que um dia voc pode precisar. Navegadores mais antigos no contam com suporte a camadas (layers) e nem folha de estilos (CSS), com isto, se voc tentar exibir uma pgina com estes recursos nos navegadores iguais ou anteriores verso 3.0, voc ter problemas. Para resolver isto, voc poder acionar no menu Arquivo, a opo Converter, Compatvel com navegador 3.0. Ao chamar esta opo, selecione: Converter as camadas em tabelas ou, Converter a folha de estilos em marcaes HTML.
Logicamente toda a funcionalidade das layers estaro perdidas.
165
Iniciando um editor externo

possvel iniciar um editor de cdigo externo a partir do Dreamweaver. Este recurso ser til quanto quiser utilizar um recurso presente no FrontPage e em seguida voltar ao Dreamweaver a fim de continuar a edio. O Dreamweaver detecta as alteraes que foram salvas no programa exterior e lhe avisa para recarreg-lo ao retornar. Parece confuso? Ento vamos fazer um teste configurando o bloco de notas do Windows como editor externo (apenas para exemplificar). Clique em Editar, Preferncias, Tipos de arquivos/editores. Em Editor de cdigo externo, clique em Procurar, e na pasta do Windows, clique sobre o Notepad.
Pronto, o Notepad passou a ser nosso editor externo. Voc poder configurar qualquer outro editor sua vontade. Para acionar o Editor externo: Clique em Editar, Editar com o Notepad. O bloco de notas ser aberto. Quando terminar a edio do cdigo HTML no bloco de notas, o Dreamweaver lhe perguntar se voc quer carregar o arquivo novamente, clique em sim.
Inserindo <meta>
Voc j deve ter se deparado algumas vezes com os cdigos META no incio do HTML. Atravs deles que, por exemplo, voc informa aos sites de busca qual o contedo de sua pgina. Estes sites possuem um recurso de varredura pela Internet procura de pginas que contenham cdigos META KEYWORDS que so as palavras chaves que definem o contedo do seu site. Para inserir uma tag <META>, siga os passos: Clique em Inserir, Tags do cabealho, Meta. No campo valor digite: KEYWORDS. No campo contedo digite as palavras chaves que definem o seu site. Por fim em Ok.
Voc ver o META no HTML pressionando F10 (acesso ao HTML).
166
Figura 8.42 Veja os cdigos criados pelo Dreamweaver.
Menu de salto
Agora voc vai aprender um recurso que poder ser muito utilizado em suas pginas. Vamos montar um menu suspenso onde o usurio poder selecionar uma opo, e ao selecion-la, o navegador ir transport-lo at o endereo escolhido. O Dreamweaver criar uma pequena rotina em JavaScript. Veja a seguir a rotina em execuo:
Figura 8.43 Ao escolher uma das opes o usurio ser levado ao site escolhido.
167
Para criar cada um dos links, siga os passos: Clique em Inserir, Objeto de formulrio, Menu de salto. Digite o texto que ir aparecer na opo, no campo Texto. Digite o endereo de destino , no campo v para a URL.
Figura 8.44 O campo Texto dever conter a descrio do link. J o campo v para a URL, conter o endereo completo da pgina a ser visitada.
Para criar mais links, basta clicar sobre o boto com o sinal de +.
Redimensionamento do Netscape
Algumas verses do Netscape possuem um erro interno. Este erro faz com que o navegador apresente a pgina incorretamente quando o usurio realizar um redimensionamento da pgina. Para resolver este problema, basta inserir um cdigo em JavaScript. Este recurso pode ser acessado seguindo os passos: Clique no menu Comandos, Adicionar/remover o ajuste da netscape Um cdigo em JavaScript ser inserido na pgina.
Trabalhando com folhas de estilos

Trabalhar com folhas de estilos poder deixar as suas pginas com uma aparncia muito mais profissional. Na verdade, os benefcios que as folhas de estilos lhe ofereem so imensos. Vamos a um exemplo do funcionamento. Suponhamos que voc queira definir um padro para todos os links existentes na pgina, por exemplo: Negrito, fonte Verdana, tamanho 10. No decorrer do desen-
168
volvimento de suas pginas, um ou outro link poder ser esquecido. Para evitar este problema, existe a folha de estilo. Com ela voc define no incio do documento como ser o estilo da tag <a href> que cria um link (ou qualquer outra tag), e este estilo ser aplicado por todas as tags <a href> do documento. Voc pode formatar praticamente todas as tags do HTML. Siga os passos adiante para criar uma folha de estilo em sua pgina: Clique em Texto, Estilos CSS, Editar a folha de estilos. Na janela que aparecer, clique em Novo. Selecione a opo Redefinir o tag de HTML. Selecione a tag a.
Figura 8.45 Perceba que voc pode escolher qualquer tag HTML. Ao terminar, clique em OK. Aparecer uma tela para que voc salve as configuraes da folha de estilos.
Na prxima janela voc poder efetuar todas as formataes que quiser. No entanto, para que nosso exemplo funcione, informe como mostrado na Figura 8.46.
Figura 8.46 Voc poder predefinir uma srie de formatos que estaro dentro do arquivo .css que voc escolheu. Aps defini-los, clique em OK.
169
Volte tela inicial do Dreamweaver, crie um Hiperlink para qualquer site, por exemplo: www.toptc.com.br. Veja que o link ser automaticamente formatado como foi definido na folha de estilo. A programao necessria (a qual foi criada pelo Dreamweaver) est logo a seguir:
<style type="text/css"> <!-a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; fontstyle: normal; font-weight: bold} --> </style>
Agora que voc j conhece como funciona a folha de estilos, poder utiliz-la em suas pginas.
Alinhando camadas
Com este recurso voc poder alinhar ou redimensionar as camadas em seu site. Por exemplo, pode ser que voc queira que duas camadas fiquem alinhadas direita do site. Para experimentar este recurso, insira duas camadas em seu site, em seguida siga os passos: Insira as duas camadas como mostrado na Figura 8.47. Selecione as duas camadas (utilizando o shift). Clique em Modificar, Alinhar, Esquerda.
Figura 8.47 Com isto voc poder alinhar as camadas da seguinte forma. Alinhar esquerda, direita, no alto, abaixo. Trazer para frente, eviar para trs. Tornar as alturas iguais ou tornar as larguras iguais.
Talvez o seu maior objetivo seja o desenvolvimento de aplicativos para a Internet, e este exatamente o objetivo deste captulo. Utilizando os conceitos do ASP, iremos aprender a desenvolver programas que acessem banco de dados. O ASP uma tecnologia desenvolvida pela Microsoft que permite um fcil acesso a informaes armazenadas nos servidores (PWS ou IIS ). Anteriormente voc aprendeu sobre a funcionalidade dos servidores PWS e IIS, agora chegou a hora de voc utiliz-los. Na primeira parte deste captulo voc ser levado a desenvolver uma loja virtual didtica. Ela apresenta certas limitaes se utilizada na Internet, mas, se voc quiser, poder baixar o cdigo fonte do nosso site: www.topt.com.br.
O que o ASP
O Active Server Pages (ASP) um ambiente de programao com o qual podemos criar sites de alta performance. Ao contrrio do que voc viu at aqui, as pginas que contm ASP so processadas no servidor e no no browser do cliente. Entre os recursos que podem ser implementados com o ASP, podemos citar: utilizao de uma linguagem simples de Script como o VBScript, acesso a banco de dados hospedados no provedor, envio e recebimento de e-mails, envio de arquivos para o servidor, entre diversos outros recursos. Existem muitas vantagens em se utilizar o ambiente ASP. Entre elas temos a independncia de navegador, pois o que o cliente visualiza apenas cdigo em HTML. possvel visualizar, atualizar, adicionar ou remover informaes no banco de dados simplesmente utilizando componentes que j se encontram prontos do servidor. O cdigo fonte fica preservado pois o servidor s libera o resultado do processamento.
170
Criando uma Loja Virtual
171
ASP versus CGI

O suporte a scripts CGI j um velho conhecido no mundo da computao baseada em cliente/servidor. Trata-se de aplicaes desenvolvidas em linguagens como C ou PERL que permitem o acesso a todos os recursos do sistema operacional. No entanto, a programao em CGI um tanto quanto complicada para o usurio que no um programador (por profisso). Com isto, o ASP lhe permite o mesmo potencial, com extrema simplicidade no cdigo fonte. Uma importante vantagem do ASP em relao ao CGI est no fato de que este ltimo cria uma aplicao para cada usurio que chamar o script. No ASP isto no acontece. O primeiro script compartilhado com todos os usurios que o chamarem e isto, sem dvida alguma, deixar o servidor mais livre para processar as demais aplicaes. A funcionalidade do ASP lhe trar maiores benefcios em menos tempo que o CGI. No entanto, compreender o funcionamento do ASP um timo incio antes de se aventurar pela programao CGI.
Como funciona o ASP

Para desenvolver programas com caractersticas ASP utilizaremos o VBScript. O objetivo deste livro no ensinar a programar em VBScript. Partimos do princpio de que voc tenha conhecimento de lgica de programao ou tenha feito o captulo sobre JavaScript. Nosso objetivo no apresentar-lhe todo o potencial do ASP. Apresentaremos o necessrio para que voc implemente pginas com acesso a banco de dados, necessrias criao de sites com comrcio eletrnico (B2B e B2C). Toda a programao ASP dever ser executada em um servidor PWS (Personal Web Server) no caso do Windows 98(Me) ou no IIS (Internet Information Server) no caso do Windows NT ou 2000. Para isto voc dever possuir um destes j configurados em seu computador. No Captulo 2 apresentamos como isto pode ser feito. Para criar seus scripts voc poder utilizar o bloco de notas, o FrontPage ou at mesmo o Dreamweaver (existem programas que geram os cdigos em ASP para voc, mas nossa finalidade aqui lhe ensinar a programao em ASP). Para comear, digite o exemplo seguinte:
1: 2: 3: <html> <head></head> <body>
172 4: 5: 6: 7: 8: <%
Response.write "Este seu primeiro programa" %> </body> </html>
Aps digitar este exemplo, salve-o na sua pasta com o nome de prog1.asp na sua subpasta dentro da pasta C:\ASP. Partimos do princpio de que esta seja a sua pasta compartilhada como Web no PWS ou IIS. (Para montar este compartilhamento, consulte o Captulo 2 nos itens Configurando o IIS e o PWS). Para visualizar no navegador, abra o arquivo pelo Internet Explorer. Utilize uma URL como a mostrada a seguir para visualizar seu cdigo em execuo. http://Servidorweb/PastaWeb/prog1.asp Onde Servidorweb dever ser substitudo pelo nome dado no PWS ou no IIS. Pastaweb a pasta que voc criou para acomodar seus arquivos. Ao carregar a pgina, perceber que no conseguimos ter acesso ao programa em ASP; o que o browser apresenta o resultado do processamento realizado. Em resumo: todos os comandos entre <% e %> sero executados no servidor e retornado apenas os resultados de suas operaes. Esta a grande diferena.
Colocando comentrios
Em algumas situaes, voc dever colocar comentrios em seu cdigo, principalmente para dividir partes lgicas do seu programa. Veja um exemplo de comentrio:
1: 2: 3: 4: <% ' A seguinte rotina calcula o salrio do funcionrio salliquido = salbruto* 0.7 %>
Neste exemplo a linha 2 contm ' (apstrofo) apenas para comentar o que vem em seguida.
e no ser executada, servindo
Criando Variveis
No VBScript utilizaremos o comando DIM para declararmos uma varivel. Em seguida associaremos um valor a ela.
173
Exemplo:
1: 2: 3: 4: 5: 6: <% Dim variavelx, salario Dim a,b,c variavelx = "Carlos" salario = 1500 %>
Neste exemplo foi criada a varivel de nome variavelx que passou a conter a string Carlos. Ao criar variveis literais utilize aspas (como em Carlos, na linha 4). Porm, para criar variveis numricas isto no necessrio, como em salario na linha 5.
Operadores lgicos
Assim como em toda linguagem de programao, no VBScript temos os operadores lgicos que podem ser vistos a seguir: = <> > >= < <= and or not Igualdade Diferente Maior Maior ou Igual Menor Menor ou Igual E Ou No
Veja um exemplo de cdigo para criao de variveis e utilizao dos operadores.

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: <% dim a,b,c a=4 b=5 c=a/b if c > 1 then response.write ( " A operao A/B maior que 1 ") Else response.write ( " A operao A/B menor que 1 ") end if %>
174
Operadores matemticos e de strings

Os operadores matemticos sero utilizados na realizao de clculos com variveis numricas e para concatenao de variveis do tipo texto. Veja a seguir uma lista dos operadores, bem como sua utilizao. + * / \ & Adio Subtrao Multiplicao Diviso Resto de uma diviso Concatenao de strings
Digite o programa seguinte, salve e veja os resultados:

1: 2: 3: 4: 5: 6: 7: <% dim x,y,z x = 10 y = 11 z=x*y response.write "A multiplicao resulta: " & z %>
Comandos condicionais
As operaes condicionais so responsveis por determinar a seqncia de execuo dentro do programa, podendo ser utilizadas para realizar testes e comparaes entre variveis, condicionando a execuo de acordo com o resultado de uma determinada condio. Digite o exemplo a seguir e veja um dos usos para os comandos condicionais.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: <% dim x,y x=2 y=1 if x>y then response.write "O valor de X maior" else response.write "O valor de Y maior" end if %>
Altere o valor da varivel x para 0, salve e recarregue a pgina.
175
Criando laos (loops)

Os loops dentro de programas so fundamentais para repetir uma parte do cdigo um determinado nmero de vezes. Assim sendo podemos repetir, de forma controlada, trechos do cdigo. Por exemplo: quando voc precisar apresentar os produtos disponveis em um banco de dados, vai ter que montar um loop at que todos os produtos sejam apresentados. Digite o exemplo a seguir:
1: 2: 3: 4: 5: 6: 7: 8: <% Dim x,y y=0 for x=1 To 10 y=y+x next response.write "A soma dos 10 primeiros nmeros inteiros : " & y %>
Veja o programa seguinte utilizando o comando while.

1: <% 2: Dim x,y 3: y=0 4: x=1 5: while x<=10 6: y=y+x 7: x = x+1 8: wend 9: response.write "A soma dos 10 primeiros nmeros inteiros : " & y 10: %>
Criando funes
Uma funo um conjunto de instrues que s sero executadas quando forem chamadas. Voc ir utilizar funes para chamar rotinas que devam ser executadas diversas vezes dentro do programa. A sintaxe geral a seguinte: Function NomeFuno (Parmetros) .... Rotina End Function
176
Suponha uma funo que tenha de calcular a soma de dois nmeros e retornar um resultado.
1: 2: 3: 4: 5: 6: 7: 8: 9: <% function soma(x,y) dim calculo calculo = x+y soma = calculo end function total = soma(5,7) response.write "A soma : " & total %>
Avanando no VBScript
Apesar deste livro no abordar todo o potencial do VBScript, a seguir apresentamos uma listagem de alguns comandos teis. var = Ucase("texto") var = Lcase("TEXTO") var = Trim("teste de texto") var = Ltrim(" Este um teste") var = Rtrim ("Este um teste ") var = Len("Texto") FormatPercent(valor,2) FormatNumber(valor,2) Converte para maisculas Converte para minsculas Retira os espaos em branco Retira os brancos esquerda Retira os brancos direita Informa o nmero de caracteres Formatao em porcentagem Formatao em valor real
Os comandos a seguir devero estar fora do <% %> pois no podem ser processados pelo servidor. Ele utiliza uma chamada ao interpretador VBScript do browser (e no do servidor, como no caso do ASP). Digite o exemplo como mostrado adiante:
1: 2: 3: 4: 5: 6: <html> <script language = "vbscript"> msgbox "Texto da caixa" var = inputbox("sua idade?") </script> </html>
O funcionamento idntico ao JavaScript que voc j viu anteriomente.
177
Iniciando no ASP
A partir deste momento comearemos realmente a definir as caractersticas de nossos documentos ASP. Estas definies devero estar necessariamente no incio do documento ASP, pois faro parte da solicitao do cabealho HTTP.
Enviando dados aos usurios

Todos as pginas que voc digitou at aqui foram processadas p elo servidor e esto em Cache. Ou seja, caso voc faa um novo acesso, a pgina de resposta j estar gerada e ser carregada pelo browser. Isto no bom, pelo fato de que a mesma pode sofrer alteraes (como na tabela de preos) em que o browser manter os valores antigos. Para isto utilizaremos o Response.expires, que especifica o tempo de durao da pgina.
1: 2: 3: 4: 5: <% ' tempo de expirao em minutos response.expires = 0 response.write "este documento perder a validade imediatamente" %>
Veja um outro exemplo:

1: 2: 3: 4: 5: 6: 7: <% Response.ExpiresAbsolute = # January 1,2000 00:00:00# Response.write "Este documento perder a validade em 01/01/2000" Dim dia Dia = time Response.write "No servidor agora so :" & dia %>
Evitando erros com variveis

Utilize o Option Explicit para garantir que todas as variveis devam ser declaradas antes de serem utilizadas. Todas as vezes em que voc errar o nome da varivel, receber um aviso em tempo de execuo. Option Explicit dever ser o primeiro cdigo da sua pgina. Veja um exemplo de sua utilizao:
1: <% 2: Option Explicit 3: Response.ExpiresAbsolute = # January 1,2000 00:00:00#
178 4: 5: 6: 7: 8:
Response.write "Este documento perder a validade em 01/01/2000" Dim dia Dea = time Response.write "No servidor agora so :" & dia %>
Perceba que o programa anterior contm um erro. A varivel Dia foi declarada, mas usamos Dea. Este erro ser reportado pelo Navegador.
Processando um formulrio
Uma das operaes que teremos que realizar com freqncia o envio de dados entre pginas. Um exemplo seria a validao de um determinado usurio. O usurio digita a senha em uma pgina e o valor digitado ser passado a outra pgina (ASP) para ser validado. Este valor ser passado como parmetro juntamente com a URL da pgina. Digite o programa a seguir e salve-o como form.html.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: <html> <head> <title></title> </head> <body> <form method="GET" action="valida.asp"> <p align="center">Seu nome: <input type="text" name="T1" size="20"> <input type="submit" value="Enviar" name="B1"></p> </form> </body> </html>
Na linha 8 o programa cria uma caixa de texto que possui o nome de T1. Esta caixa ser recebida pelo programa em ASP que ainda iremos criar. O boto submit na linha 9 ir enviar os dados do formulrio para o arquivo em ASP especificado na linha 6 (valida.asp). Agora crie um novo arquivo, digite o programa a seguir e salve-o como valida.asp, que ele ser chamado pelo form.html anterior.
1: 2: 3: 4: <% Dim recebeu recebeu = Request.QueryString("T1") response.Write "O valor recebido foi: " & recebeu %>
179
Agora visualize o arquivo form.html no navegador. Temos aqui um recurso novo, Request.QueryString("T1"). Ele receber o valor passado pelo campo do formulrio. No caso apresentado receberemos o campo T1 o qual foi repassado para a varivel recebeu, na linha 2. Ao executar o formulrio anterior (form.html), preencha o valor da caixa e clique no boto Enviar. A pgina valida.asp dever ser chamada na linha de endereo do browser. http://NomeComputador/Pasta/valida.asp?T1=Nome&B1=Enviar Perceba que temos os campos com seus determinados contedos. Exerccio: Faa um formulrio solicitando ao usurio o seu nome e senha. Em um arquivo ASP verifique se a senha digitada est correta. A senha dever ser: 025680 (utilize o comando IF para a verificao).
Criando o banco de dados

Agora que voc j conhece o funcionamento bsico do ASP, chegou a hora de comearmos a criar pginas que acessem banco de dados. Para isto iremos utilizar o Access que parte integrante do pacote de aplicativos Microsoft Office. No Captulo 3 exploramos os principais conceitos sobre banco de dados (recomendamos que, caso voc no esteja familiarizado com aspectos referentes a banco de dados, releia o Captulo 3). Apresentaremos passo a passo como voc poder criar um banco de dados no Access. Dentro desse banco de dados criaremos nossas tabelas que contero os dados dos nossos aplicativos. Siga as seguintes etapas: Acesse o Access no menu Programas. Ao abri-lo, uma primeira janela ser mostrada como na Figura 9.1.
180
Figura 9.1 Ao abrir esta janela, escolha a opo Banco de dados vazio. Em seguida clique em OK. Voc dever informar um nome para o banco de dados. Por hora digite: curso.mdb. Salve este arquivo na sua pasta da Web.
Neste ponto o banco de dados j estar criado. Agora criaremos as tabelas que ele ir conter. Por enquanto faremos apenas uma tabela (produtos). Se voc estiver com dvidas, consulte o Captulo 3 para obter maiores detalhes. Escolha a opo Criar tabela no modo de estrutura.
Figura 9.2 Existem outros modos de se criar uma tabela, no entanto sempre utilizaremos o modo de estrutura.
181
As tabelas so como repositrios de dados. Nelas iremos armazenar dados dos clientes, dados dos pedidos, informaes sobre produtos entre outros. Informe os campos conforme a seguir: CAMPO Codigo Descricao Preco TIPO Autonumerao Texto Moeda
Figura 9.3 Cada campo ir armazenar uma determinada informao.
Aps criar os trs campos da tabela, salve-a com o nome de PRODUTOS.
Criando outras tabelas

Na etapa anterior vimos quais os passos para se criar uma tabela no banco de dados do Access. Voc criou a tabela P RODUTOS que conter todas as informaes dos produtos que nossa loja virtual ter. No entanto, os aplicativos de banco de dados geralmente possuem vrias tabelas. Nosso caso no diferente. Criaremos 4 tabelas para nosso sistema. So elas: Cadastro Pedidos Temporria Conter informaes sobre os clientes da loja. Que manter os dados dos pedidos dos clientes. Nesta tabela iremos guardar informaes sobre as compras do cliente (antes dele fechar o pedido definitivamente).
182
Com base na estrutura apresentada a seguir, e nas explicaes sobre como criar tabelas (vista no item anterior), crie as demais tabelas conforme segue. A estrutura que iremos utilizar para cada campo no a mais indicada. No entanto, ela foi definida assim para facilitar sua compreenso. Tenha o cuidado para digitar os nomes dos campos conforme o mostrado. No utilize acentuao ou cedilha. Nome da tabela: CADASTRO CAMPO TIPO Codigo Autonumerao Senha Texto Telefone Texto Nome Texto Email Texto Bairro Texto Cidade Texto Rua Texto Complemento Texto Numero Texto Apto Texto Referencia Texto Nome da tabela: PEDIDOS CAMPO Cliente Produtos Quantidade Descricao Preco Data Hora Formapagamento TIPO Nmero Nmero Nmero Texto Moeda Data/Hora Data/Hora Texto
Nome da tabela: TEMPORARIA CAMPO Cliente Produtos Quantidade Descricao TIPO Nmero Nmero Nmero Texto
183
Preco Data Hora Formapagamento
Moeda Data/Hora Data/Hora Texto
Aps terminar, voc ter uma estrutura como mostrada na Figura 9.4:
Figura 9.4 Aqui voc pode ver todas as tabelas. Ao clicar (duplo) sobre elas voc ter acesso s informaes contidas em cada uma. Se voc quiser alterar a estrutura (como o nome de campos, por exemplo), basta clicar no boto Estrutura.
Experimente lanar itens em cada uma das tabelas simplesmente clicando (duplo) sobre elas e digitando os valores.
Comeando a desenvolver a loja virtual

A partir deste momento comearemos a implementar os cdigos que iro compor nossa loja virtual. Esta uma loja simples e servir para que voc compreenda de forma didtica, o funcionamento de um aplicativo para a Web. No nosso site (www.toptc.com.br) voc poder fazer download de uma loja virtual completa para uso comercial. Nossa loja ser composta de duas partes e cada uma delas ser subdividida em blocos (produtos/clientes/pedidos, etc). Veja pela estrutura a seguir:
184
administrativo.HTML produtos.HTML clientes.asp pedidos.asp
Este primeiro mdulo possibilitar ao administrador da loja, gerenciar os clientes os produtos e os pedidos realizados pelos clientes. Na primeira tela (administrativo.HTML) haver links para os demais mdulos. As telas que iremos apresentar so simples, pois no iremos nos preocupar com a parte de design da loja (por ser apenas didtica). Desenvolva a pgina da Figura 9.5 e salve-a como o nome de administrativo.html. Voc poder utilizar qualquer editor HTML, porm recomendamos o FrontPage.
Figura 9.5 Esta pgina foi criada no FrontPage, com todo o texto centralizado e uma tabela com 3 colunas e uma linha para receber os links. O mais importante aqui a funcionalidades dos hiperlinks.
Esta pgina contm 3 hiperlinks para as seguintes pginas (as quais sero criadas mais adiante) produtos.html clientes.asp pedidos.asp
185
Listagem dos clientes clientes.asp

Esta pgina em ASP permite que se visualizem os clientes cadastrados e que se remova algum, se necessrio. Crie a pgina como apresentada na Figura 9.6 e, em seguida, altere o cdigo em HTML para que ele receba a programao em ASP necessria. Esta pgina contm uma tabela com 2 linhas e 4 colunas. Alm disto voc dever inserir um formulrio que ir chamar a pgina excluircliente.asp, que ser construda mais tarde.
Figura 9.6 Este formulrio foi criado no FrontPage. Foram utilizados uma tabela e um formulrio com um campo do tipo texto e um boto submit chamando o programa excluircliente.asp
Para fazer com que o boto chame o excluircliente.asp siga os passos: Clique com o mouse direito sobre o formulrio. Escolha a opo Propriedades do formulrio. Marque a opo Enviar para outro. Digite o nome do programa em ASP que ir receber os dados. Marque o mtodo como GET.
Veja na janela seguinte:
186
Figura 9.7 Este processo foi visto no HTML e define a clusula Action do formulrio. Utilize o mtodo GET na passagem de parmetro.
Este processo de extrema importncia e voc precisar realiz-lo outras vezes no desenvolvimento do aplicativo. Portanto, certifique-se de que tenha executado todas as etapas com sucesso.
Digitando os cdigos em ASP

O FrontPage agilizou muito o trabalho de criao do formulrio e da tabela que ir mostrar os dados. Agora est na hora de colocarmos o acesso aos dados que esto no banco de dados que voc criou. Este trabalho ser dividido em duas etapas: na primeira, iremos conectar o nosso aplicativo ao banco de dados atravs de componentes que j esto prontos dentro do ASP. Para isto iremos informar o banco de dados a ser utilizado (curso.mdb) e a conexo ADO.
Primeira parte: conectando com o banco de dados

Os cdigos a seguir montaro a conexo com o banco de dados. Voc dever digit-los antes da tag <HTML> (antes de tudo) na sua pgina atual clientes.asp.
1: 2: 3: <%Option Explicit Response.Expires = 0 Dim vConexao, vResposta, vPesquisar

4: 5: 6: 7: 8:
187
Set vConexao = Server.CreateObject("ADODB.Connection") vConexao.Open "DBQ=c:/pasta/curso.mdb;Driver={Microsoft Access Driver (*.mdb)}" vPesquisar = "SELECT * FROM cadastro ORDER BY nome" Set vResposta = vConexao.Execute(vPesquisar) %>
Esta parte da programao de extrema importncia. Ela aparecer em todas as nossas pginas seguintes. As linhas 1 e 2 so velhas conhecidas e a linha 3 est declarando as variveis que o programa ir utilizar. Na linha 4 estamos criando uma instncia do objeto ADODB.Connection, o qual j est pronto no servidor e permite que seu programa tenha acesso a bancos de dados instalados no servidor. Na linha 5 (e depois de criada a instncia) estamos abrindo (vConexao.open) a conexo com o banco de dados informado. Alm disto ela informa qual o driver a ser utilizado, que no nosso caso ser o Microsoft Access Driver. A linha dever ser digitada exatamente como mostrado. Um espao a mais pode fazer com que a conexo no funcione. Na linha 6 e 7 estamos realizando uma consulta ao banco de dados. Esta consulta est sob a forma de uma linguagem muito conhecida que permite acessos a banco de dados conhecida como SQL (Structured Query Language-Linguagem de Consulta Estruturada). Nesta linha estamos pedindo ao banco de dados para selecionar todos (representado pelo *) os d ados da tabela cadastro ordenados pelo campo nome (o qual est presente na tabela). O resultado da consulta realizada ser armazenado na varivel vResposta, na linha 9. Agora iremos complementar nossa tabela para que ela mostre os dados enquanto a varivel vResposta no atinja o seu final. Para isto localize a primeira ocorrncia da tag <TR> no seu cdigo em HTML. Insira o seguinte cdigo antes desta tag:
<% while not vresposta.EOF %>
Agora apenas complete o ASP nas linhas da tabela. Utilize como referncia as tags do HTML para posicionar no local onde voc dever digitar:
1: 2: 3: 4: 5: 6: 7: <% while not vresposta.EOF %> <tr> <td width="25%"><%=vResposta("nome")%></td> <td width="25%"><%=vResposta("telefone")%></td> <td width="25%"><%=vResposta("endereco")%></td> <td width="25%"><%=vResposta("email")%></td> </tr>
188 8: 9: 10: 11: 12: 13: 14: 15: 16: </table> <% vResposta.MoveNext Wend vResposta.close vConexao.close Set vResposta = Nothing Set vConexao = Nothing %>
Vamos entender os cdigos anteriores. Na linha 1 tem incio um loop que ir durar enquanto (while) vResposta no alcance o final (EOF). Dentro do loop sero apresentados os campos presentes na tabela de cadastro. Na linha 10 vResposta orientado a mover para o prximo registro. Em seguida, na linha 11 o comando Wend informa ao programa para voltar na linha 1. Nas linhas 12 a 15 as conexes so fechadas. Veja a listagem completa da pgina anterior. Se algo tiver dado errado voc poder utilizar o programa a seguir:
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: <%Option Explicit Response.Expires = 0 Dim vConexao, vResposta, vPesquisar Set vConexao = Server.CreateObject("ADODB.Connection") vConexao.Open "DBQ=c:/pasta/curso.mdb;Driver={Microsoft Access Driver (*.mdb)}" vPesquisar = "SELECT * FROM cadastro ORDER BY nome" Set vResposta = vConexao.Execute(vPesquisar) %> <html> <head> <title>Nova pagina 1</title> </head> <body> <p align="center"><b><font size="5">Consulta de clientes</font></b></p> <div align="center"> <center> <table border="0" width="100%"> <tr> <td width="25%" align="center"><b>Nome</b></td> <td width="25%" align="center"><b>Telefone</b></td> <td width="25%" align="center"><b>Endereo</b></td> <td width="25%" align="center"><b>e-mail</b></td> </tr> <% while not vresposta.EOF %>

25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: <tr> <td width="25%"><%=vResposta("nome")%></td> <td width="25%"><%=vResposta("telefone")%></td> <td width="25%"><%=vResposta("endereco")%></td> <td width="25%"><%=vResposta("email")%></td> </tr> </table> <% vResposta.MoveNext Wend vResposta.close vConexao.close Set vResposta = Nothing Set vConexao = Nothing %> </center> </div> <form method="GET" action="excluircliente.asp"> <p align="center"><b>Excluir cliente nmero: <input type="text" name="T1" size="20"> <input type="submit" value="Excluir" name="B1"></b></p> </form> </body> </html>
189
Agora criaremos o programa que receber o cdigo do cliente a ser excludo. Esta rotina executar um DELETE em todos os registros onde o cdigo seja igual ao informado pelo usurio.
Excluindo o cliente: excluircliente.asp

A maior parte dos cdigos esto em ASP, com isto voc poder utilizar o prprio bloco de notas para digitar os cdigos. Na seqncia iremos novamente explicar as partes do programa. Salve-o como excluircliente.asp.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: <%Option Explicit Response.Expires = 0 Dim objConn, objRs, strQuery Set objConn = Server.CreateObject("ADODB.Connection") objConn.Open DBQ=c:/pasta/curso.mdb;Driver={Microsoft Access Driver (*.mdb)}" Dim vcodigo vcodigo = Request("T1") strQuery = "DELETE * FROM cadastro WHERE codigo="&vcodigo Set ObjRS = objConn.Execute(strQuery) objConn.close Set objRS = Nothing
190
12: 13: 14: 15: 16: 17: 18:

Set objConn = Nothing %> <html><head><title>Excluir Cliente</title></head> <body> <p align="center"><strong><font face="Verdana">CLIENTE EXCLUDO!</font></strong></p> </body></html>
As novidades do cdigo anterior comeam na linha 7 onde recebemos o campo T1 que foi criado no formulrio. A linha 8 diz ao programa para EXCLUIR todos os registros onde o campo cdigo da tabela seja igual varivel vcodigo (a qual foi recebida na linha 7). Em seguida a conexo encerrada e uma mensagem em HTML mostrada ao usurio. No se esquea de alterar a linha 5, colocando o caminho exato do seu banco de dados.
Pedidos cadastrados: pedidos.asp

Esta pgina em ASP permite que se visualizem e removam os pedidos cadastrados. Crie uma pgina como apresentada na Figura 9.8.
Figura 9.8 Utilize o FrontPage e crie uma tabela e um formulrio como mostrado na tela. O formulrio dever chamar a pgina excluirpedidos.asp utilizando o mtodo GET.
191
O cdigo fonte desta pgina est listado a seguir. Se voc utilizou o FrontPage para criar a pgina, basta inserir a programao em ASP.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: <%Option Explicit Response.Expires = 0 Dim vConexao, vResposta, vPesquisar Set vConexao = Server.CreateObject("ADODB.Connection") vConexao.Open "DBQ=c:/pasta/curso.mdb;Driver={Microsoft Access Driver (*.mdb)}" vPesquisar = "SELECT * FROM pedidos" Set vResposta = vConexao.Execute(vPesquisar) %> <html> <head> <title>Nova pagina 1</title> </head> <body> <p align="center"><b><font size="5">Consulta aos pedidos por cliente</font></b></p> <div align="center"> <center> <table border="0" width="100%"> <tr> <td width="16%" align="center"><b>Cliente</b></td> <td width="16%" align="center"><b>Cod.Produto</b></td> <td width="17%" align="center"><b>Descrio</b></td> <td width="17%" align="center"><b>Preo</b></td> <td width="17%" align="center"><b>Qtde</b></td> <td width="17%" align="center"><b>FormaPagamento</b></td> </tr> <% while not vresposta.EOF %> <tr> <td width="16%"><%=vResposta("Cliente")%></td> <td width="16%"><%=vResposta("Produtos")%></td> <td width="17%"><%=vResposta("Descricao")%></td> <td width="17%"><%=vResposta("Preco")%></td> <td width="17%"><%=vResposta("Quantidade")%></td> <td width="17%"><%=vResposta("Formapagamento")%></td> </tr> </table> <% vResposta.MoveNext Wend vResposta.close vConexao.close Set vResposta = Nothing Set vConexao = Nothing %>
192
44: 45: 46: 47: 48: 49: 50: 51: 52:

</center> </div> <form method="GET" action="excluirpedidos.asp"> <p align="center"><b>Excluir pedidos do cliente nmero: <input type="text" name="T1" size="20"> <input type="submit" value="Excluir" name="B1"></b></p> </form> </body> </html>
Repare que utilizamos um cdigo muito semelhante listagem dos produtos. As mudanas so: na linha 6 o SELECT utilizou a tabela pedidos, e nas linhas 28 a 33 mostramos os campos que esto presentes dentro da tabela pedidos. Caso um destes nomes esteja diferente da tabela, o ASP retornar erro. Agora vamos criar a programao do excluirpedidos.asp, o qual ser chamado pela listagem dos pedidos anterior.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: <%Option Explicit Response.Expires = 0 Dim objConn, objRs, strQuery Set objConn = Server.CreateObject("ADODB.Connection") objConn.Open DBQ=c:/pasta/curso.mdb;Driver={Microsoft Access Driver (*.mdb)}" Dim vcod vcod = Request.QueryString("T1") strQuery = "DELETE * FROM pedidos WHERE cliente="&vcod Set ObjRS = objConn.Execute(strQuery) %> <HTML><head><title>Excluir Pedidos</title></head> <body> <p align="center"><strong><font face="Verdana">OS PEDIDOS DO CLIENTE: <%Response.Write vcod%> FORAM EXCLUDOS!</font></strong></p> </body> </HTML>
At a linha 6 no temos nenhuma novidade. Na linha 7 estamos recebendo o campo T1 do formulrio e colocando o valor dentro da varivel vcod, ou seja, no formulrio da pgina pedidos.asp o campo dever, necessariamente, se chamar T1. Na linha 8 estamos dizendo em SQL para apagar todos da tabela pedido onde o campo cliente seja igual varivel vcod.
Manuteno nos produtos: produtos.html

Em uma loja virtual o proprietrio precisar constantemente inserir e excluir produtos para serem vendidos. Para isto teremos o produtos.asp. Nele o usurio poder digitar o cdigo, a descrio e o preo de um novo produto e, em seguida, teclar em executar. Crie a pgina da Figura 9.9:
193
Figura 9.9 O boto executar chamar produtos.asp.
O cdigo a ser executado quando se clicar no executar (salve-o como produtos.asp) est logo a seguir:
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: <%Option Explicit Response.Expires = 0 Dim objConn, objRs, strQuery Set objConn = Server.CreateObject("ADODB.Connection") objConn.Open DBQ=c:/pasta/curso.mdb;Driver={Microsoft Access Driver (*.mdb)}" Dim T1,T2,T3,Excluir T1 = Request.QueryString("T1") T2 = Request.QueryString("T2") T3 = Request.QueryString("T3") Excluir = Request.QueryString("Excluir") %> <html> <head> <title>Excluso/Incluso Produtos</title> </head> <body> <% If Excluir = False Then strQuery = "INSERT INTO produtos (codigo,descricao,preco) VALUES ('"&T1&"','"&T2&"','"&T3&"') " 20: Set ObjRS = objConn.Execute(strQuery) 21: %>
194
22: 23: 24: 25: 26: 27: 28: 29: 30: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43:

<p><font face="Verdana">O produto <%=T2%> foi <strong> inserido </strong> com sucesso no banco de dados.</font></p> <p> </p> <p><em><strong><font face="Verdana"> Obrigado! </font></strong></em></p> <%Else strQuery = "DELETE * FROM produtos WHERE codigo="&T2 Set ObjRS = objConn.Execute(strQuery) %> <p><font face="Verdana">O produto <%=T2%> foi <strong>excludo</strong> com sucesso do banco de dados.</font></p> <p> </p> <p><em><strong><font face="Verdana"> Obrigado! </font> </strong></em></p> <p> <%End If%> </p> </body> </html>
Com isto terminamos o mdulo administrativo. Agora comearemos a desenvolver a frente da loja, ou seja, o local onde os clientes podero comprar nossos produtos. A partir de agora utilizaremos ainda mais os recursos do ASP. Por isto, o ideal que voc no tenha dvidas do que viu at agora. um bom momento para uma reviso.
Mdulo da frente da Loja

Iniciaremos a parte final de nossa loja virtual. Trata-se da pgina de venda ao cliente. Atravs dela o cliente poder se cadastrar e ento comear suas compras. Juntamente com esta etapa, aprenderemos alguns detalhes a mais sobre comandos em ASP. muito importante compreender a estrutura das pginas que iro formar a loja de venda ao cliente. Para isto lhe apresentaremos a hierarquia das pginas.
195
Figura 9.10 Esta a arvore que representa a estrutura de todas as pginas que iremos criar para a venda ao cliente
O funcionamento o seguinte: o cliente ao entrar na loja (index.html) poder clicar no link para a pgina comprar.htm ou cadastro.htm. Caso ele acesse a pgina comprar.htm, dever informar seu nome e sua senha. De posse destes dados a pgina comprar.htm ir chamar a valida.asp, a qual verifica se o usurio j est cadastrado. Caso ele esteja cadastrado, a pgina ser direcionada para as opes.asp, que mostra todos os produtos disponveis na loja. Nesta tela ele dever informar a quantidade de produto de que necessita e colocar no carrinho. Na pgina carrinho.asp, todas as compras do usurio so armazenadas na tabela temporria. Quando ele efetivar a compra (efetiva.asp) os dados do pedido sero repassados para a tabela pedidos, que representa um pedido fechado pelo cliente.
Criando a pgina principal: index.htm

Esta primeira pgina a porta de entrada do cliente na loja. Atravs dela ele ser levado s pginas: comprar.htm ou cadastro.htm (um detalhe que em nossa loja o cliente dever se cadastrar primeiro para depois comprar). Criaremos uma pgina simples no FrontPage, a qual dever conter os dois links como mostrados no pargrafo anterior. Salve esta pgina como index.htm.
196
Figura 9.11 Crie esta pgina como voc achar melhor. No entanto no se esquea de criar os dois links (comprar e cadastrar)
Isso tudo que precisamos na primeira tela. Agora criaremos o formulrio de cadastro.
Pgina de cadastro: cadastro.htm

Crie o formulrio mostrado a seguir tomando os seguintes cuidados: 1) Cada campo ter como nome as trs primeiras letras do seu contedo, por exemplo: Telefone Senha - tel - sen
Estes campos devero ser informados em cada caixa de texto do formulrio. 2) O boto enviar chamar o arquivo cadastro.asp utilizando o mtodo GET.
197
Figura 9.12 Este o formulrio de compra. Perceba que foi utilizada uma tabela com 4 colunas para que os campos fiquem alinhados dentro do formulrio. O boto submeter dever chamar a pgina cadastro.asp
Agora criaremos a pgina que receber os dados informados e cadastr-los no banco de dados. Digite o programa seguinte e salve-o como cadastro.asp.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: <% Option Explicit Response.Expires=0 Dim vconexao, vresposta, vpesquisar Set vconexao= Server.CreateObject("ADODB.Connection") vconexao.Open "DBQ=c:/pasta/curso.mdb;Driver={Microsoft Access Driver (*.mdb)}" Dim nom,sen,ema,rua,bai,com,num,apt,ref,tel,cid nom=Request.QueryString("nom") sen =Request.QueryString("sen") ema=Request.QueryString("ema") rua=Request.QueryString("rua") bai=Request.QueryString("bai") com=Request.QueryString("com") num=Request.QueryString("num") apt=Request.QueryString("apt") ref=Request.QueryString("ref") tel=Request.QueryString("tel") cid=Request.QueryString("cid") %>
198
20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32:

<html> <head><title>Cadastro</title></head> <body> <p align="center"> <%If nom="" or sen="" or ema="" or rua="" or bai="" or num="" or apt="" or tel="" or cid="" then%> <font size="5">Voc deixou algum campo abrigatrio do cadastro em branco.</font> <p align="center"><font size="5"><b><font color="#000080"> Favor completar o cadastro.</font></b> </font></p> <p align="center"> </p> <p align="center"><b><font size="5" color="#FF0000"><a href="#"> Retornar </a> </font> </b><font size="5"> <%else vpesquisar = "INSERT INTO cadastro (nome,senha,email,rua,bairro,complemento,numero,apto,refe rencia,telefone,cidade) VALUES ('"&nom&"','"&sen&"','"&ema&"','"&rua&"','"&bai&"','"&com&"','"&num&"',' "&apt&"','"&ref&"','"&tel&"','"&cid&"')" set vresposta = vconexao.Execute(vpesquisar) vconexao.close Set vresposta=Nothing Set vcone xao=Nothing %> </font></p> <p><font size="5">Parabns <%=nom%>. </font></p> <p><font size="5">Agora voc o mais novo cliente, basta clicar no link abaixo para efetuar a sua primeira compra.</font></p> <p> </p> <p align="center"><font size="5"><a href="comprar.htm"> <b>Comprar</b></a> </font> </p><%end if%> <p> </p> </body></html>
33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46:
Vamos analisar o programa anterior. At a linha 23 no temos nenhuma novidade. Na linha 24 o programa verifica se algum dos campos obrigatrios do cadastro ficou em branco. Caso isto tenha acontecido, uma mensagem ser apresentada ao usurio e um link ser montado para ele retornar pgina anterior. Caso ele tenha preenchido todos os campos, na linha 32 criamos a varivel que ir executar uma instruo SQL para inserir os dados nos respectivos campos da tabela cadastro. Neste caso um link ser apresentado para que ele possa entrar com sua senha e acessar os itens disponveis.
199
Identificando o cliente: comprar.htm

Nossa prxima etapa validar o cliente. Para fazer isto, iremos convid-lo a digitar seu nome de cadastro, juntamente com a senha. Este formulrio ir chamar o valida.asp, que ir pesquisar, com base no nome e na senha, se o usurio j est cadastrado. Primeiramente crie um formulrio no FrontPage como o mostrado na Figura 9.13. Um detalhe: o campo nome dever se chamar nom e o campo senha ser sen.
Figura 9.13 Este formulrio dever chamar a pgina valida.asp.
Verificando se o cliente est cadastrado

Agora vamos criar o programa que receber o nome e a senha. Com esta informao ser feito um SELECT no banco de dados que procurar pela pessoa. Digite o programa a seguir e salve-o como valida.asp.
1: 2: 3: 4: 5: 6: 7: 8: <%Option Explicit Response.Expires = 0 Dim objConn, objRs, strQuery Set objConn = Server.CreateObject("ADODB.Connection") objConn.Open DBQ=c:/pasta/curso.mdb;Driver={Microsoft Access Driver (*.mdb)}" Dim nom, sen, cd, no nom = Request.QueryString("nom") sen = Request.QueryString("sen")
200
9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34:

if nom = "" or sen = "" then Response.redirect "comprar.htm" End if strQuery="SELECT * FROM cadastro WHERE nome='"&nom&"' AND senha='"&sen&"' " Set ObjRS = objConn.Execute(strQuery) if not objRS.eof then cd = objRS("codigo") no = objRS("nome") Response.Cookies("kodigo")= cd Response.Cookies("knome") = no end if %> <html> <head><title></title></head> <body> <%if objRS.eof then%> <p align="center"><font color="#008080" face="Verdana"> Tentenovamente <big><big>Usurio incorreto! </big></big> </font> </p><p align="center"> <a href="JavaScript:history.go(-1)" target="_self"> <font color= "#008080" </font></a></p> <%else%> Bem vindo(a),</p><a href="opcoes.asp"> <font color=" #008080" face="Verdana"> <big><big>Clique aqui para iniciar suas compras! </big></big> </font> </a></p><p> <%end if%> </body> </html>
Vamos entender a funcionalidade deste cdigo. Na linha 9 o programa verifica se o usurio deixou as variveis de nome e senha em branco. Neste caso ele ser redirecionado automaticamente para a tela anterior. Na linha 12 o sistema tenta encontrar um usurio com o mesmo nome e senha informados no formulrio. Na linha 14 a 19 temos o programa seguinte:
if not objRS.eof then cd = objRS("codigo") no = objRS("nome") Response.Cookies("kodigo")= cd Response.Cookies("knome") = no end if
Neste cdigo o sistema verifica se o objRS no chegou ao fim (eof = fim de arquivo), caso no seja o final do arquivo, ento o sistema ir criar dois cookies (explicados mais adiante).
201
Response.Cookies
Aqui temos uma novidade, o cookie. Neste caso, o cookie funciona como se fosse uma varivel que existir enquanto o usurio no fechar o navegador. O cookie ser criado no momento em que o sistema encontra o usurio cadastrado, e guarda temporariamente seu cdigo e nome. Ele ser utilizado quando o usurio fechar sua compra.
Iniciando a venda: carrinho.asp

Agora que o cliente j est cadastrado, podemos comear a apresentar-lhe os produtos disponveis na loja. Criaremos uma listagem com todos os itens da loja para que o cliente escolha o quanto quer comprar de cada um. Aps o cliente selecionar as quantidades, ele dever clicar no b oto colocar no carrinho, o qual chamar o programa carrinho.asp. Voc no precisar criar esta pgina no FrontPage. Como sua programao um pouco complexa, iremos lhe apresentar todo o cdigo para ser digitado. Em seguida iremos detalhar com comentrios.
Figura 9.14 Esta tela apresentar todos os itens que o cliente poder comprar. O boto colocar no carrinho ir chamar o carrinho.asp
202
Segue agora o cdigo em ASP para gerar a tela anterior. Salve como opcoes.asp.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: <%Option Explicit Response.Expires = 0 Dim objConn, objRs, strQuery Set objConn = Server.CreateObject("ADODB.Connection") objConn.Open DBQ=c:/pasta/curso.mdb;Driver={Microsoft Access Driver (*.mdb)}" strQuery= "SELECT * FROM Produtos" Set ObjRS= objConn.Execute(strQuery) %> <html> <head> <title>Opes</title> </head> <body> <form method="GET" action="carrinho.asp"> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><br> <div align="center"> <center> <table border="0" width="100%" cellspacing="1" cellpadding="0"> <tr> <td width="7%" bgcolor="#000080"><font color="#FFFFFF" size="2" face ="Verdana"><b>Cdigo</b></font></td> <td width="57%" bgcolor="#000080"><font color="#FFFFFF" size="2" face="Verdana"><b>Produto</b></font></td> <td width="16%" bgcolor="#000080" align="center"><font color="#FFFFFF" size="2" face="Verdana"><b>Qtde</b></font></td> <td width="20%" bgcolor="#000080"><font color="#FFFFFF" size="2" face="Verdana"><b>Peo</b></font></td> </tr> <% dim p p=0 while Not objRs.EOF p=p+1%> <tr> <td width="7%" bgcolor="#E6E6E6"><font color="#000000"><%=objRS ("codigo")%> </font></td> <td width="57%" bgcolor="#E6E6E6"><%=objRS ("descricao")%></td> <td width="16%" bgcolor="#E6E6E6" align="center"><input type="text" name="qtde<%=p%>" size="6"> </td> <td width="20%" bgcolor="#E6E6E6"><%=FormatNumber(objRs("preco"),2)%></td> </tr> <% objRs.MoveNext

45: 46: 47: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58: 59: 60: 61: 62: 63: Wend objRs.close objConn.close Set objRs = Nothing Set objConn = Nothing %> </table> </center> </div> <p> </td> </tr> </table> <p align="center"><input type="submit" value="Selecionar" name="B1"><input type="reset" value="Redefinir" name="B2"></p> </form> <p> </p> </body> </html>
203
Este cdigo (apesar de grande) simples. Ele consiste basicamente em uma simples listagem de todos os itens presentes na tabela de produtos. No entanto uma mudana sutil faz a grande diferena. Na linha 31 uma varivel de nome (p) foi criada e a cada novo produto mostrado ela acrescentada em uma unidade na linha 34. Ela est sendo aproveitada na linha 40 para fazer parte do nome do campo quantidade. Isto necessrio porque cada produto precisar de um campo quantidade e os nomes dos campos no podem se repetir.
Colocando no carrinho: carrinho.asp

Na pgina anterior o cliente escolheu a quantidade dos itens de seu interesse. Agora precisaremos receber as quantidades escolhidas e inseri-las em uma tabela temporria onde os produtos sero mantidos at que ele efetive sua compra. Dois detalhes so importantes agora. Primeiro que utilizaremos duas tabelas ao mesmo tempo, algo que ainda no fizemos; e segundo que utilizaremos o cookie que criamos logo quando o usurio entrou com sua senha. A finalidade do prximo programa mostrar todos os itens que o usurio escolheu, solicitando a ele a forma de pagamento escolhida. Alm disto criaremos uma varivel que ir totalizar suas compras. Veja a janela a seguir:
204
Figura 9.15 Nesta tela mostraremos os detalhes a respeito da compra do cliente. Alm disto ele poder escolher a forma de pagamento e ento efetivar sua compra.
O cdigo bastante extenso, porm simples. Digite-o com ateno e procurando entender cada comando. Salve-o como carrinho.asp.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: <% Option Explicit Response.Expires = 0 Dim vConexao, vResposta, vPesquisar Set vConexao = Server.CreateObject("ADODB.Connection") vConexao.Open "DBQ=c:/pasta/curso.mdb;Driver={Microsoft Access Driver (*.mdb)}" 'Declarao das variveis para manipulao dos produtos Dim p, vco, vde, vqu, vpr, vdt, vhr, var, total, no2,vcl,cd2 Dim vincluir, vDeletar, vRetorno Dim listaprod,todosprod,strQuery 'Recebe o contedo do cookie criado na validao do usurio vcl = Request.Cookies("Kodigo") 'Se o contedo do cookie estiver em branco o programa volta para comprar.htm if vcl = "" then Response.redirect "comprar.htm" End if vDeletar = "DELETE * FROM temporaria WHERE cliente="&vcl Set vRetorno = vConexao.Execute(vDeletar) listaprod = "SELECT * FROM produtos" set todosprod = vConexao.execute(listaprod) p =0 total = 0 While Not todosprod.EOF

24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36:
205
37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58: 59: 60: 61: 62: 63: 64: 65: 66: 67:
p =p+1 var = "qtde"&p vco = todosprod("codigo") vde = todosprod("descricao") vpr = todosprod("preco") vdt = date() vhr = time() if Request.QueryString(var) <> "" Then vqu = Cint(Request.QueryString(var)) if vqu > 0 then total = total + (vpr * vqu) 'Lanca no arquivo temporario vincluir = "INSERT INTO temporaria (cliente,produtos,descricao, preco, data, hora, quantidade) VALUES '"&vcl&"', '"&vco&"', '"&vde&"' , '"&vpr&"', '"&vdt&"', '"&vhr&"','"&vqu&"')" Set vresposta = vconexao.Execute(vincluir) vqu = 0 end if end if 'Busca o prximo item do cadastro todosprod.MoveNext Wend vpesquisar = "SELECT * FROM temporaria WHERE cliente="&vcl set vresposta = vConexao.execute(vpesquisar)%> <html> <head> <title>Nova pagina 1</title> </head> <body <form method="GET" action="efetiva.asp"> <table border="1" cellpadding="2" cellspacing="1" width="100%"> <tr> <td width="100%" colspan="5" align="center"><b><font size="4" face="Arial"> Produtos em seu carrinho at o momento</font></b></td> </tr> <tr>< td width="11%" bgcolor="#000000"> <p align="center"><b><font face="Arial" color="#FFFFFF" size="2">Produto</font></b></td> <td width="57%" bgcolor="#000000"><b><font face="Arial" color="#FFFFFF" size="2">Descrio</font></b></td> <td width="10%" bgcolor="#000000"> <p align="center"><b><font face="Arial" color="#FFFFFF" size="2">Quant.</font></b></td> <td width="11%" bgcolor="#000000"><p align="center"><b><font face="Arial" color="#FFFFFF" size="2">Preo</font></b></td> <td width="11%" bgcolor="#000000"> <p align="center"><b><font face="Arial" color="#FFFFFF"
206
68: 69: 70: 71: 72: 73: 74: 75: 76: 77: 78: 79: 80: 81: 82: 83: 84: 85: 86: 87: 88: 89: 90: 91: 92: 93: 94: 95:

size="2">Total</font></b></td></tr> <%while not vResposta.eof%> <tr> <td width="11%"> <p align="center"><font face="Arial" size="2"><%=vResposta("Produtos")%> </font></td> <td width="57%"><font face="Arial" size="2"><%=vResposta("descricao")%> </font></td> <td width="10%"> <p align="center"><font face="Arial" size="2"><%= vResposta("quantidade")%> </font></td> <td width="11%"><p align="center">< font face="Arial" size="2">R$ <%=FormatNumber(vResposta("preco"),2)%> </font></td> <td width="11%"> <p align="center"><font face="Arial" size="2">R$ <%=FormatNumber(vResposta("preco") * vResposta("quantidade"),2)%></font></td> </tr> <%vResposta.MoveNext Wend%> </table> <p align="center"><b><font size="5" face="Arial">Selecione a forma de Pagamento</font></b></p> <p align="center"><font face="Arial"><input type="radio" value="V1" name="R1">Boleto <input type="radio" value="V2" name="R1">Depsito <input type="radio" value="V3" checked name="R1">na entrega</font></p> <p align="center"><font face="Arial">TOTAL: <%=formatnumber(total,2)%> </font> </p> <p align="center"> <input type="submit" value="Enviar compra" name="B1"></p></form> </body> </html>
Efetivando a compra: efetiva.asp

Chegou a hora de efetivar a compra do cliente. At o momento todos os produtos que ele escolheu esto na tabela temporaria. O programa que iremos criar agora ir tratar de buscar todos os itens nesta tabela e lan-los na tabela pedidos (definitivamente). Alm disto o programa colocar a forma de pagamento escolhida e em seguida apagar a tabela temporria. O cdigo do efetiva.asp est logo adiante:
1: 2: 3: 4: 5: 6: <% Option Explicit Response.Expires = 0 Dim vConexao, vResposta, vPesquisar Set vConexao = Server.CreateObject("ADODB.Connection") vConexao.Open "DBQ=c:/pasta/curso.mdb;Driver={Microsoft Access Driver (*.mdb)}"

7: 8: 9: 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
207
Dim vDeletar, vRetorno, no, vcl, forma, vConectar , listaprod Dim todosprod,strQuery forma = Request.QueryString("R1") no = Request.Cookies("Knome") vcl = Request.Cookies("Kodigo") 'Copia dos produtos da temporaria para a pedidos vDeletar = "INSERT INTO pedidos SELECT * FROM temporaria WHERE cliente = "&vcl Set vRetorno = vConexao.Execute(vDeletar) vDeletar = "UPDATE pedidos SET formapagamento='"&forma&"' WHERE cliente = "&vcl set vRetorno = vConexao.Execute(vDeletar) vDeletar = "DELETE * FROM temporaria WHERE cliente="&vcl Set vRetorno = vConexao.Execute(vDeletar) 'Neste ponto os Cookies so apagados Response.Cookies("kodigo")= "" Response.Cookies("knome")= "" %> <html> <head> <title>Obrigado</title> </head> <body> <p align="center"><b><font face="Arial" size="5">OBRIGADO(A)</font></b></p> <p align="center"> </p> <p align="center"><b><font face="Arial" size="3">Dentro de instantes voc receber uma ligao</font></b></p> <p align="center"><b><font face="Arial" size="3">confirmando seu pedido.</font></b></p><p align="center"> </p> <p align="center"><b><font face="Arial" size="3">Volte sempre!</font></b></p> <p> </p> </body> </html>
Concluindo a loja
Ufa! Enfim terminamos nosso primeiro aplicativo em ASP. A loja virtual que voc acabou de concluir no possui todos os recursos de uma loja para ser utilizada na Internet. No entanto, este primeiro contato serviu para demonstrar como realizado o acesso a banco de dados na Internet. Com os conhecimentos que voc adquiriu at aqui, j pode implementar diversos recursos nas suas pginas HTML. Sugiro que voc realize buscas na Internet onde vai encontrar diversos sites com bons exemplos de rotinas em ASP prontas para voc utilizar. Um curso completo de ASP lhe apresentar vrios outros recursos. Mas como voc vai perceber no prximo exemplo (Controle de estoques) o desenvolvimento de aplicaes simples passa sempre pelos mesmos recursos j apresentados.
Chegou a hora de desenvolvermos mais um sistema para ser utilizado em um ambiente on-line. Criaremos um sistema de controle de estoques o qual poder servir de base para programas maiores. Conforme voc vai perceber, o desenvolvimento de aplicativos para uma Intranet segue os mesmo princpios da Internet. Talvez a grande diferena esteja no fato de que, um aplicativo como este rodando na Internet, precisar de uma segurana que permita um alto grau de confiana no que diz respeito disponibilidade e confiabilidade das informaes mantidas. O sistema proposto simples e poder ser utilizado como esqueleto de um sistema maior. Ele controlar fornecedores e os produtos que eles disponibilizam. Algumas consultas foram criadas como: listagem do estoque atual, produtos com estoques mnimos, produtos de determinado fornecedor, pedidos em aberto, entre outros. Voc ver que pequenas mudanas na clusula SQL permitiro criar novas consultas de uma forma muito rpida. Uma tcnica que voc aprender a partir deste momento a reutilizao de cdigo. Logicamente que no entraremos pela orientao a objetos, cujo principal paradigma a reutilizao de cdigo, mas lhe mostraremos como trabalhar de forma a reutilizar cdigos de pginas j testadas. Para criar este sistema, voc dever ter uma nova pasta dentro de sua pasta de execuo de ASP. Nesta nova pgina estaro todos os arquivos que iro compor a loja (inclusive o banco de dados em Access). Lembramos que todos os cdigos do Controle de Estoques esto disponveis no nosso site.
208
Implementando um Controle de Estoques
209
Utilizando includes
Quando voc digitou os scripts da loja, deve ter percebido que alguns trechos de cdigos se repetem em vrias pginas com mudanas mnimas. Alguns destes cdigos so os comandos que permitem que seja criada a conexo com o banco de dados. Uma forma de evitar esta redigitao seria a utilizao dos a rquivos includes. Estes arquivos ficaro fora do programa principal e sero chamados em tempo de execuo. Dentre as vrias vantagens de se utilizar esta tcnica, temos o fato de que, se a conexo com o servidor precisar mudar, precisaremos alterar o cdigo apenas no arquivo include. Por exemplo, voc deve ter percebido que os cdigos a seguir aparecem em vrias pginas da loja. O que o include prope que voc crie um arquivo com a programao padro e ela ser chamada no momento devido de sua utilizao.
1: 2: 3: 4: 5: <%Option Explicit Response.Expires = 0 Dim objConn, objRs, strQuery Set objConn = Server.CreateObject("ADODB.Connection") objConn.Open DBQ=c:/pasta/estoque.mdb;Driver={Microsoft Access Driver (*.mdb)}" %>
Este cdigo dever ser digitado no bloco de notas e salvo com o nome dados.asp. (o caminho c:/pasta/estoque.mdb dever ser alterado para representar o caminho do banco de dados no seu computador). Aps criar este arquivo, simplesmente chame sua incluso em cada arquivo que necessite d sua utilizao. e Veja como fazer:  Os cdigos que se seguem esto utilizando este recurso. Voc ver que a criao de novas pginas com acesso a dados ser muito mais simples.
Reutilizando pginas inteiras

Um outro recurso que iremos apresentar no controle de estoque a reutilizao de uma pgina para atender a vrias tarefas diferentes. Por exemplo: teremos apenas uma pgina excluir.asp que far a excluso de registros em tabelas diferentes. Voc deve estar se perguntando: Como iremos fazer isto? Simples! Juntamente com o cdigo a ser excludo, passaremos tambm o nome da tabela e o campo a ser utilizado na excluso. Desta forma, com apenas uma pgina excluiremos dados em vrias tabelas.
210
Sempre que possvel voc dever utilizar este recurso. Ele simplificar o seu site e diminuir o nmero de pginas a serem desenvolvidas.
Inserindo figuras
Outro recurso importante, e que freqentemente voc precisar utilizar, a apresentao de figuras na tela. Por exemplo: o usurio em algumas situaes precisar ver a Figura do produto que ele est adquirindo. Isto simples de ser feito: no cadastro do produto informaremos o nome da Figura a ser utilizada pelo produto e, no momento de sua listagem, colocaremos a Figura na tela, conforme o seu nome especificado no banco de dados.
Conhecendo a estrutura do sistema

Vamos agora conhecer o funcionamento do nosso controle de estoque. Voc ver que ele tem uma estrutura simples, porm funcional. Uma tela principal levar o usurio a acessar todo o sistema. Veja:
Figura 10.1 Tela inicial do sistema de controle de estoques.
Nesta tela podemos ter a idia exata de como o sistema funcionar. Trata-se de uma simplificao do que seria um sistema de controle de estoque completo. Vrios mdulos so necessrios para que ele seja um sistema comercialmente aceito. No entanto, ele poder servir como esqueleto para um sistema mais completo.
211
Entendendo os mdulos
Nosso sistema tem uma estrutura modular de forma a facilitar sua compreenso. Nesta etapa explicaremos qual a tarefa executada por cada um dos mdulos, simplificando a compreenso do cdigo em ASP. Sugerimos que ao criar as tabelas voc j cadastre alguns registros diretamente nela.
Fornecedor
Cadastro dos fornecedores que iro distribuir os produtos.
Produtos
Cadastro dos produtos que sero controlados pelo sistema. Como uma restrio temos o fato de que todos os produtos devero ter um fornecedor. Com isto, voc vai precisar cadastrar pelo menos um fornecedor antes de cadastrar os produtos. No produto informaremos a quantidade em estoque atual e a quantidade mnima que o produto dever conter no estoque. Aps os movimentos (entradas e sadas do estoque) poderemos ter uma apresentao dos produtos que esto com o estoque mnimo.
Pedidos
Cadastro dos pedidos de compra no sistema.
Itens dos pedidos

Informao sobre os produtos e quantidades de cada item no pedido.
Concluir pedido
Realiza o fechamento dos pedidos em aberto.
Estoques (Abater|Adicionar)
Permite que se aumente ou diminua a quantidade de itens no estoque.
Consultas
Realiza diversas consultas ao sistema. Ex: pedidos, fornecedores, produtos com estoque mnimo, entre outras.
212
Suporte
Permite que se tenha acesso calculadora e ao calendrio do sistema.
Pgina inicial
A pgina inicial do sistema chamar todas as outras. Ela foi criada no FrontPage e trata-se de uma tabela simples com 4 colunas e 7 linhas. Dentro de cada uma das clulas foram criados links para cada uma das pginas. Crie-a no FrontPage e salve com o nome de index.htm (voc precisar criar uma pasta para este sistema para que os arquivos no fiquem juntos com a loja virtual criada no captulo anterior, no entanto no se esquea de que a pasta do servidor dever executar ASP, conforme explicado no Captulo 2). Digite o programa a seguir e salve-o como index.htm. index.htm
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: <html> <head> <title>SISTEMA DIDTICO PARA CONTROLE DE ESTOQUES v0.1</title> </head> <body> <script language = "JavaScript"> function calc() { w indow.open('calculadora.html','','toolbar=no,location=no,directories=no,status=no,menubar= no,scrollbars=yes,resizable=no,menubar=no,width=290,height=250') } </script> <script language = "JavaScript"> function calen() { w indow.open('calendario.html','','toolbar=no,location=no,directories=no,status=no,menubar=n o,scrollbars=yes,resizable=no,menubar=no,width=290,height=250') } </script> <p><br> </p> <p align="center"><b><font face="Arial" size="5">SISTEMA DIDTICO PARA CONTROLE<br> DE ESTOQUES v0.1</font></b></p> <p align="center"> </p> <div align="center"> <center>

25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58: 59: 60: 61: 62: 63: 64: 65: 66: 67: 68: 69: 70:
213
<table border="0" width="80%"> <tr> <td width="25%" align="center" bgcolor="#000080"><font size="2" face="Arial" color="#FFFFFF"><b>CADASTROS</b></font></td> <td width="25%" align="center" bgcolor="#000080"><font size="2" face="Arial" color="#FFFFFF"><b>MOVIMENTOS</b></font></td> <td width="28%" align="center" bgcolor="#000080"><font size="2" face="Arial" color="#FFFFFF"><b>CONSULTAS</b></font></td> <td width="22%" align="center" bgcolor="#000080"><font size="2" face="Arial" color="#FFFFFF"><b>SUPORTE</b></font></td> </tr> <tr> <td width="25%" align="center" bgcolor="#F0EBFE"><font face="Verdana" size="2"><a href="cadas_fornecedor.htm">Fornecedor</a></font></td> <td width="25%" align="center" bgcolor="#F0EBFE"><font face="Verdana" size="2"><a href="cadas_pedidos.asp">Pedidos</a></font></td> <td width="28%" align="center" bgcolor="#F0EBFE"><font face="Verdana" size="2"><a href="Consul_Ped_atendidos.asp">Pedidos atendidos</a></font></td> <td width="22%" align="center" bgcolor="#F0EBFE"><font face="Verdana" size="2"><a href="JavaScript:calc()">Calculadora</a></font></td> </tr> <tr> <td width="25%" align="center" bgcolor="#F0EBFE"><font face="Verdana" size="2"><a href="cadas_Produtos.asp">Produtos</a></font></td> <td width="25%" align="center" bgcolor="#F0EBFE"><font face="Verdana" size="2"><a href="itenspedido.asp">Itens do pedido</a></font></td> <td width="28%" align="center" bgcolor="#F0EBFE"><font face="Verdana" size="2"><a href="Consul_Ped_naoatendidos.asp">Pedidos no atendidos</a></font></td> <td width="22%" align="center" bgcolor="#F0EBFE"><font face="Verdana" size="2"><a href="JavaScript:calen()">Calendrio</a></font></td> </tr> <tr> <td width="25%" align="center" bgcolor="#F0EBFE"></td> <td width="25%" align="center" bgcolor="#F0EBFE"><font size="2" face="Verdana"><a href="concluir_pedido.asp">Concluir pedido</a></font></td> <td width="28%" align="center" bgcolor="#F0EBFE"><font face="Verdana" size="2"><a href="fornecedores.asp">Fornecedores</a></font></td> <td width="22%" align="center" bgcolor="#F0EBFE"></td> </tr> <tr> <td width="25%" align="center" bgcolor="#F0EBFE"></td> <td width="25%" align="center" bgcolor="#F0EBFE"><font face="Verdana" size="2"><a href="abater_estoque.htm">Estoque(Abater)</a></font></td> <td width="28%" align="center" bgcolor="#F0EBFE"><font face="Verdana" size="2"><a
214
71: 72: 73: 74: 75: 76: 77: 78: 79: 80: 81: 82: 83: 84: 85: 86: 87: 88: 89:

href="estoque.asp">Produtos (estoque)</a></font></td> <td width="22%" align="center" bgcolor="#F0EBFE"></td> </tr> <tr> <td width="25%" align="center" bgcolor="#F0EBFE"></td> <td width="25%" align="center" bgcolor="#F0EBFE"><font face="Verdana" size="2"><a href="adicionar_estoque.htm">Estoque(Adicionar)</a> </font></td> <td width="28%" align="center" bgcolor="#F0EBFE"><font face="Verdana" size="2"><a href="estoque_min.asp">Estoque mnimo</a></font></td> <td width="22%" align="center" bgcolor="#F0EBFE"></td> </tr> </table> </center> </div> <p align="center"><br> <br> </body> </html>
A pgina anterior representa a entrada no sistema de controle de estoques. Atravs dela o usurio poder acessar as principais funes do programa. Aqui temos algumas novidades: na linha 7 e na linha 13 temos duas funes que abrem as pginas calculador.html e calendrio.html respectivamente. As chamadas a estas funes so feitas nas linhas 45 e 56. Perceba que a linha 9 e a linha 15 so maiores que as demais e voc NO poder dividir estas linhas em duas. Ou seja, mesmo que as linhas digitadas fiquem enormes, no as divida. Por enquanto vamos encerrar nossas atividades no HTML e passarmos criao das tabelas a serem utilizadas no sistema.
Criando as tabelas
Nesta etapa criaremos o banco de dados em Access que ser utilizado pelo nosso sistema. Partimos do princpio de que voc j conhea o funcionamento dos banco de dados relacionais (visto no Captulo 3) ou que saiba como criar tabelas em um banco de dados Access. A seguir temos a estrutura das tabelas utilizadas pelo nosso sistema. Voc dever salvar o banco de dados com o nome de: estoque.mdb. Sugerimos que, medida em que cria as tabelas, v inserindo dados aleatoriamente para que comece a ver os resultados enquanto cria os cdigos em ASP.
215
Contedo das tabelas

Na Figura 10.2 voc pode ver as tabelas depois de criadas no Access.
Figura 10.2 Aqui temos as 4 tabelas que nosso sistema ir utilizar.
Tabela: Fornecedor Mantm os dados cadastrais dos fornecedores. Tabela: Produtos Armazena os produtos para serem controlados pelo sistema. Antes de c adastrar um produto, o fornecedor daquele produto j dever ter sido cadastrado. Tabela: Pedidos Armazena a relao de pedidos de compra realizados no sistema. Tabela: Itens_pedidos Armazena os itens correspondentes a cada um dos pedidos. Para cadastrar um item de pedido, o pedido dever ter sido cadastrado primeiro.
216
Estrutura da tabela: Fornecedor

Nome do campo Codigo Nome Telefone Email Pessoa Tipo de dados Autonumerao Texto Texto Texto Texto
Estrutura da tabela: Produtos

Nome do campo Codigo Descricao Estoque Estoquemin Precovenda Precocompra Fornecedor Foto Tipo de dados Nmero Texto Nmero Nmero Moeda Moeda Nmero Texto
O campo foto ir receber o nome da foto a ser apresentada quanto o produto for listado na tela.
Estrutura da tabela: Pedidos

Nome do campo Pedidos Fornecedor Data Valor Posicao Tipo de dados Autonumerao Nmero Data/Hora Moeda Sim/No
Estrutura da tabela: itens_pedidos

Nome do campo Codigo_pedido Codigo_produto Quantidade Preco Tipo de dados Nmero Nmero Nmero Moeda
217
Aps criar todas as tabelas, estamos prontos para iniciar a construo das pginas em ASP que iro manipular dados no banco de dados. Verifique se todos os campos foram digitados corretamente. Perceba que no utilizamos acentuao ou cedilha nos nomes dos campos, isto evitar erros na execuo das pginas dinmicas que acessem informaes nos campos onde os nomes no coincidirem.
Manuteno de fornecedores
So duas as pginas para manuteno na tabela de fornecedores. A primeira (cadas_fornecedor.HTML) possui um formulrio onde o usurio digitar os dados. A segunda (cadas_fornecedor.asp) ir receber os dados e em seguida inseri-los na tabela.
Figura 10.3 Voc poder criar esta tela no FrontPage ou digitar os cdigos mostrados a seguir.
O nome dos campos no formulrio deveram ser: nom, tel, ema e pes respectivamente. O boto dever chamar a pgina cadas_fornecedor.asp Segue a listagem da pgina citada: cadas_fornecedor.htm.
1: 2: 3: 4: <html> <head> <title>Cadastro de fornecedor</title> </head>
218
5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36:

<body> <p align="center"><font face="Verdana"><b>Cadastro de fornecedor</b></font></p> <hr> <form method="GET" action="cadas_fornecedor.asp"> <table border="0" width="100%" cellspacing="1"> <tr> <td width="33%"><font face="Verdana" size="2"><b>Empresa</b></font></td> <td width="67%"><input type="text" name="nom" size="52"></td> </tr> <tr> <td width="33%"><font face="Verdana" size="2"><b>Telefone</b></font></td> <td width="67%"><input type="text" name="tel" size="20"></td> </tr> <tr> <td width="33%"><font face="Verdana" size="2"><b>E-Mail</b></font></td> <td width="67%"><input type="text" name="ema" size="52"></td> </tr> <tr> <td width="33%"><font face="Verdana" size="2"><b>Pessoa de contato</b> </font> </td> <td width="67%"><input type="text" name="pes" size="52"></td> </tr> </table> <p align="center"><input type="submit" value="Cadastrar" name="B1"> <input type="reset" value="Limpar" name="B2"></p> </form> <p align="center"> </p> <p align="center"> </p> <p align="center"><br> </p><p align="right"><b><font face="Verdana" size="1"> <a href="index.htm">|Voltar|</a></font></b></p> </body> </html>
Recebendo os dados do formulrio: cadas_fornecedor.asp

Agora criaremos a pgina que receber os dados do fornecedor e em seguida os cadastrar no banco de dados.
1: 2: 3: 4: 5: 6: 7:  <% Dim vnome, vtelefone, vemail, vpessoa vnome = Request("nom") vtelefone = Request("tel") vemail = Request("ema") vpessoa = Request("pes")

8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: strQuery = "INSERT INTO fornecedor (nome,telefone,email,pessoa) Values ('"&vnome&"','"&vtelefone&"','"&vemail&"','"&vpessoa&"')" Set ObjRs = objConn.Execute(strQuery) %> <html> <head> <title>Fornecedor</title> </head> <body> <p align="center"> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"><b><font face="Verdana"> Dados Includos!!!</font></b></p> </body> </html>
219
Aps digitar o cdigo anterior, salve-o como cadas_fornecedor.asp. Em seguida experimente cadastrar alguns fornecedores. S lembrando: no divida a linha 8.
Cadastro de produtos
Agora comearemos o cadastro de produtos. Esta pgina possui um recurso interessante que a montagem dos fornecedores disponveis em uma lista de seleo. Com isto, o usurio do sistema no precisa digitar o nome do fornecedor e sim selecion-lo em uma lista. Digite o cdigo a seguir e salve-o como cadas_produtos.asp
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15:  <% strQuery = "SELECT * From fornecedor" Set ObjRs = objConn.Execute(strQuery) %> <html> <head> <title>Produtos</title> </head> <body> <p align="center"><font face="Verdana"><b>Cadastro de produtos</b></font></p> <hr> <form method="GET" action="inclui_Produtos.asp"> <table border="0" width="100%" cellspacing="1"> <tr>
220
16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58: 59: 60: 61:

<td width="33%"><font face="Verdana" size="2"><b>Cdigo</b></font></td> <td width="67%"><input type="text" name="cod" size="10"></td> </tr> <tr> <td width="33%"><font size="2" face="Verdana"><b>Fornecedor</b></font></td> <td width="67%"><select size="1" name="for"> <%While not objRs.eof%> <option value="<%=objrs("codigo")%>"><%=objrs("nome")%></option> <% objRs.movenext wend objRs.Close objConn.Close Set objRs = Nothing Set objConn= Nothing %> </select></td> </tr> <tr> <td width="33%"><font face="Verdana" size="2"><b>Arquivo com a foto </b></font> </td> <td width="67%"><input type="text" name="foto" size="20"><b><font size="1" face="Verdana">(Ex: nome.gif)</font></b></td> </tr> <tr> <td width="33%"><font size="2" face="Verdana"><b>Descrio</b></font></td> <td width="67%"><input type="text" name="des" size="30"></td> </tr> <tr> <td width="33%"><font size="2" face="Verdana"><b>Estoque</b></font></td> <td width="67%"><input type="text" name="est" size="10"></td> </tr> <tr> <td width="33%"><font size="2" face="Verdana"><b>Estoque mnimo</b></font></td> <td width="67%"><input type="text" name="esm" size="10"></td> </tr> <tr> <td width="33%"><font size="2" face="Verdana"><b>Preo de compra </b> </font> </td><td width="67%"><input type="text" name="prc" size="10"></td> </tr> <tr> <td width="33%"><font size="2" face="Verdana"><b>Preo de venda</b></font></td> <td width="67%"><input type="text" name="prv" size="10"></td> </tr> </table> <p align="center"><input type="submit" value="Cadastrar" name="B1"><input type="reset" value="Limpar" name="B2"></p></form>

62: 63: 64: 65:
221
<p align="center"> </p> <p align="right"><b><font face="Verdana" size="1"><a href="index.htm">|Voltar| </a> </font></b></p></body> </html>
Incluso dos produtos: inclui_Produtos.asp

O cdigo a seguir ir receber os dados do formulrio e inseri-los no banco de dados. Aps digit-lo, salve-o como inclui_Produtos.asp.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12:  <% Dim vfoto, vdescricao, vestoque, vestoquemin, vprecovenda, vfornecedor, vcodigo, vprecocompra vfoto = Request("foto") vcodigo = Request("cod") vdescricao = Request("des") vestoque = Request("est") vestoquemin = Request("esm") vprecovenda = Request("prv") vprecocompra = Request("prc") vfornecedor = Request("for") strQuery = "INSERT INTO produtos (codigo,descricao,estoque,estoquemin,precovenda,precocompra,fornecedor,foto) Values ('"&vcodigo&"','"&vdescricao&"','"&vestoque&"','"&vestoquemin&"','"&vprecovenda&"','"&vpr ecocompra&"','"&vfornecedor&"','"&vfoto&"')" Set ObjRs = objConn.Execute(strQuery) %> <html> <head> <title>Produtos</title> </head> <body> <p align="center"> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"><b><font face="Verdana"> Dados Includos!!!</font></b></p> </body></html>
13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26:
Perceba que o programa recebe todos os campos do formulrio e em seguida (linha 12) insere todos os dados na tabela produtos. A linha 12 dever ser digitada toda sem pressionar enter (saldo de linha).
222
Movimentos
Bem, agora que j criamos os cadastros de fornecedores e produtos, j podemos comear a trabalhar na parte de movimentos. Estes programas permitiro que o operador manipule informaes sobre produtos, estoques e pedidos. No mdulo de pedidos, o usurio informar o fornecedor, a data do pedido e o valor. O sistema montar uma lista com todos os fornecedores cadastrados para que o usurio o selecione.
Incluso de pedidos: cadas_pedidos.asp

Digite a pgina a seguir e salve-a como: cadas_pedidos.asp
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31:  <% strQuery = "SELECT * From fornecedor" Set ObjRs = objConn.Execute(strQuery) %> <html> <head> <title>Pedidos</title> </head> <body> <p align="center"><font face="Verdana"><b>Cadastro de Pedidos</b></font></p><hr> <form method="GET" action="inclui_pedidos.asp"> <table border="0" width="100%" cellspacing="1"> <tr> <td width="33%"><font face="Verdana" size="2"><b>Fornecedor</b></font></td> <td width="67%"><select size="1" name="for"> <%While not objRs.eof%> <option value="<%=objrs("codigo")%>"><%=objrs("nome")%></option> <% objRs.movenext Wend objRs.Close objConn.Close Set objRs = Nothing Set objConn= Nothing %> </select></td> </tr> <tr> <td width="33%"><font face="Verdana" size="2"><b>Data do pedido</b></font></td>

32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47:
223
<td width="67%"><input type="text" name="dat" size="10"></td> </tr> <tr> <td width="33%"><font face="Verdana" size="2"><b>Valor</b></font></td> <td width="67%"><input type="text" name="val" size="10"></td> </tr> </table> <p align="center"><input type="submit" value="Cadastrar" name="B1"><input type="reset" value="Limpar" name="B2"></p></form> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="right"><b><font face="Verdana" size="1"><a href="index.htm">|Voltar|</a> </font></b></p></body> </html>
Como voc pode ver, na linha 13 estamos dizendo ao formulrio para chamar a pgina: inclui_pedidos.asp. Ela ir receber os dados do formulrio e em seguida inseri-los na tabela de pedidos.
inclui_pedidos.asp
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22:  <% Dim vpedidos, vfornecedor, vdata, vvalor vfornecedor = Request("for") vdata = Request("dat") vvalor = Request("val") strQuery = "INSERT INTO pedidos (fornecedor,data,valor) Values ('"&vfornecedor&"','"&vdata&"','"&vvalor&"')" Set ObjRs = objConn.Execute(strQuery) %> <html> <head> <title>Inclui pedidos</title> </head> <body> <p align="center"> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"><b><font face="Verdana"> Dados Includos!!!</font></b></p> </body> </html>
224
Inserindo itens nos pedidos

Na seo anterior fizemos a parte do programa que cria os pedidos. Agora iremos criar a pgina que permite que sejam includos itens em cada um dos pedidos digitados. Para isto o usurio dever selecionar o pedido (pelo nmero) e em seguida o produto. Veja na tela a seguir:
Figura 10.4 Nesta tela o usurio poder escolher o cdigo do pedido, o produto, a quantidade e o preo de compra.
Itenspedidos.asp
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14:  <% dim objrs1 strQuery = "SELECT * From pedidos" Set ObjRs = objConn.Execute(strQuery) strQuery = "SELECT * From produtos" Set ObjRs1 = objConn.Execute(strQuery) %> <html> <head> <title>Itens do pedido</title> </head> <body> <p align="center"><font face="Verdana"><b>Itens do pedido</b></font></p>
225
15: <hr> 16: <form method="GET" action="inserir_itens.asp"> 17: <div align="center"> 18: <center> 19: <table border="0" width="63%" cellspacing="0"> 20: <tr> 21: <td width="35%"><b><font size="2" face="Verdana">N do pedido</font></b></td> 22: <td width="65%"> 23: <select size="1" name="ped"> 24: <%While not objRs.eof%> 25: <option value="<%=objrs("pedidos")%>"><%=objrs("pedidos")%></option> 26: <%objrs.movenext 27: wend%> 28: </select> </td> 29: </tr> 30: <tr> 31: <td width="35%"><font size="2" face="Verdana"><b>Produto</b></font></td> 32: <td width="65%"> 33: <select size="1" name="pro"> 34: <%While not objRs1.eof%> 35: <option value="<%=objrs1("codigo")%>"><%=objrs1("descricao")%></option> 36: <% 37: objRs1.movenext 38: wend 39: objRs.Close 40: objConn.Close 41: Set objRs = Nothing 42: Set objConn= Nothing 43: %> 44: </select> 45: </td> 46: </tr> 48: <tr> 49: <td width="35%"><font size="2" face="Verdana"><b>Quantidade</b></font></td> 50: <td width="65%"><input type="text" name="qua" size="6"></td> 51: </tr> 52: <tr> 53: <td width="35%"><font size="2" face="Verdana"><b>Preo de compra</b> </font> 54: </td> <td width="65%"><input type="text" name="pre" size="10"></td> 55: </tr> 56: </table> 57: </center> 58: </div> 59: <p align="center"> </p> 60: <p align="center"><input type="submit" value="Inserir" name="B1"></p> 61: </form>
226
62: 63: 64: 65: 66: 67:

<p align="center"> </p> <p align="center"> </p> <p align="right"><br> <b><font face="Verdana" size="1"><a href="index.htm">|Voltar|</a></font></b></p> </body> </html>
Neste programa temos como novidade a utilizao de duas variveis de consultas, estando uma delas na linha 5 e a outra na linha 7 (objrs1). Isto foi necessrio porque precisamos mostrar dados que esto em tabelas diferentes e que no possuem nenhum tipo de relacionamento (neste momento). Este formulrio ir chamar a pgina inserir_itens.asp, a qual est mostrada a seguir: Inserir_itens.asp
1: 2: 3: 4: 5: 6: 7: 8:  <% Dim vpedido, vproduto, vquantidade, vpreco vpedido = Request("ped") vproduto = Request("pro") vquantidade = Request("qua") vpreco = Request("pre") strQuery = "INSERT INTO itens_pedidos (codigo_pedido,codigo_produto,quantidade,preco) Values ('"&vpedido&"','"&vproduto&"','"&vquantidade&"','"&vpreco&"')" Set ObjRs = objConn.Execute(strQuery) %> <html> <head> <title>Inserir itens</title> </head> <body> <p align="center"> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"><b><font face="Verdana"> Dados Includos</font></b></p> </body> </html>
9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24:
227
Concluindo os pedidos digitados

Aps lanar os pedidos, o usurio precisar conclu-los. Esta opo far com que o programa marque o pedido no banco de dados como concludo. Digite o programa seguinte e salve-o como: concluir_pedido.asp. O principal detalhe nesta pgina est na linha 3, onde apenas os pedidos em que a posio estejam com 0 (zero), sero mostrados. Se o campo posio estiver com valor 1, significa que o pedido j foi concludo.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38:  <% strQuery = "SELECT * From pedidos where posicao=0" set ObjRs = objConn.Execute(strQuery) %> <html> <head> <title>Concluir pedido</title> </head> <body> <p align="center"><font face="Verdana"><b>Concluso de pedidos</b></font></p> <hr> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" width="750" height="45"> <tr> <td width="129"> <p align="center"><b><font size="2" face="Verdana">Pedido</font></b></td> <td width="196"> <p align="center"><b><font size="2" face="Verdana">Fornecedor</font></b></td> <td width="212"> <p align="center"><b><font size="2" face="Verdana">Data</font></b></td> <td width="205"> <p align="center"><b><font size="2" face="Verdana">Valor</font></b></td> </tr> <%While not objRs.eof%> <tr> <td width="129" align="center"><font face="Verdana" size="2"> <%=objrs("pedidos")%> </font></td> <td width="196" align="center"><font face="Verdana" size="2"><%=objrs("fornecedor")%></font></td> <td width="212" align="center"><font face="Verdana" size="2"><%=objrs("data")%></font></td> <td width="205" align="center"><font face="Verdana" size="2"><%=formatnumber(objrs("Valor"),2)%></font></td> </tr> <% objRs.movenext
228
39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58: 59: 60: 61: 62: 63: 64: 65: 66:

wend objRs.Close objConn.Close Set objRs = Nothing Set objConn= Nothing %> </table> </center> </div> <form method="GET" action="conc_pedido.asp"> <div align="center"> <center> <table border="0" width="46%"> <tr> <td width="21%"><b><font size="2" face="Verdana">Pedido</font></b></td> <td width="79%"> <p align="center"><input type="text" name="cod" size="15"> <input type="submit" value="Concluir" name="B1"></td> </tr> </table> </center> </div> <p align="center"> </p> </form> <p align="right"><b><font face="Verdana" size="1"><a href="index.htm">|Voltar|</a></font></b></p></body> </html>
Esta pgina chamar a conc_pedido.asp que pode ser vista a seguir: Os detalhes mais importantes neste cdigo esto na linha 5 e na 7. Na linha 5 temos um novo comando em SQL, (UPDATE).
strquery = "UPDATE pedidos set posicao='1' where pedidos="&cod
Este comando faz com que o campo posicao passe a valer 1 (um) onde o cdigo do pedido seja igual ao cdigo informado no programa anterior.
1: 2: 3: 4: 5: 6: 7:  <% Dim cod cod=request("cod") strquery = "UPDATE pedidos set posicao='1' where pedidos="&cod Set objRs = objConn.Execute(strQuery) strQuery = "SELECT * From pedidos where pedidos="&cod

8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53:
229
Set ObjRs = objConn.Execute(strQuery) %> <html> <head> <title>Concluir pedidos</title> </head> <body> <p align="center"><font face="Verdana"><b>Consulta pedidos</b></font></p> <hr> <table border="1" width="100%" cellspacing="1" height="47"> <tr> <td width="20%" align="center" height="16"><b><font face="Verdana" Size="2">Pedidos</font></b></td> <td width="20%" align="center" height="16"><b><font face="Verdana" Size="2">Fornecedor</font></b></td> <td width="20%" align="center" height="16"><b><font face="Verdana" size="2">Data do pedido</font></b></td> <td width="20%" align="center" height="16"><b><font face="Verdana" Size="2">Valor</font></b></td> <td width="20%" align="center" height="16"><b><font face="Verdana" Size="2">Situao</font></b></td> </tr> <%While Not objRs.eof%> <tr> <td width="20%" height="19"><font face="Verdana" Size="2"><%=objRs("pedidos")%></font></td> <td width="20%" height="19"><font face="Verdana" Size="2"><%=objRs("fornecedor")%></font></td> <td width="20%" height="19"><font face="Verdana" Size="2"><%=objRs("data")%></font></td> <td width="20%" height="19"><font face="Verdana" size="2"> <p align="center"><%=formatNumber(objRs("valor"),2)%></font></td> <td width="20%" height="19"> <p align="center"><font face="Verdana" size="2">Atendido</font></td> </tr> <% objRs.movenext wend objRs.Close objConn.Close Set objRs = Nothing Set objConn= Nothing %> </table> </body> </html>
230
Abatendo itens no estoque

A prxima funo do nosso sistema controlar o estoque. Para isto iremos informar o cdigo do produto e a quantidade de itens a abater. Na seqncia teremos o cdigo que possibilita aumentar itens no estoque.
Figura 10.5 O usurio ir informar o cdigo do produto e a quantidade de itens a abater ou a aumentar.
Abater_estoque.htm
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: <html> <head> <title>Abater estoque</title> </head> <body> <p align="center"><font face="Verdana"><b>Abater estoque</b></font></p> <hr> <form method="GET" action="sub_estoque.asp"> <div align="center"> <center> <table border="0" width="46%"> <tr> <td width="41%"><b><font size="2" face="Verdana">Cdigo</font></b></td> <td width="59%">

15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34:
231
<p align="center"><input type="text" name="cod" size="15"></td> </tr> <tr> <td width="41%"><b><font size="2" face="Verdana">Quantidade(-)</font></b></td> <td width="59%"> <p align="center"><input type="text" name="est" size="15"></td> </tr> </table> </center> </div> <p align="center"><input type="submit" value="Abater" name="B1"></p> </form> <p><font face="Verdana" size="2"> </font></p> <p> </p> <p> </p> <p> </p> <p> </p><p align="right"><b><font face="Verdana" size="1"><a href="index.htm">|Voltar|</a></font></b></p> </body> </html>
O boto abater ir chamar a pgina: sub_estoque.asp

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23:  <% Dim est,cod est=request("est") cod=request("cod") strquery = "UPDATE produtos set estoque=estoque -"&est&" where codigo="&cod Set objRs = objConn.Execute(strQuery) strQuery = "SELECT * From produtos where codigo = "&cod Set ObjRs = objConn.Execute(strQuery) %> <html> <head> <title>Estoque</title> </head> <body> <p align="center"><font face="Verdana"><b>Estoque de produtos</b></font></p> <hr> <table border="1" width="100%" cellspacing="1" height="47"> <tr> <td width="10%" align="center" height="16"><b><font face="Verdana" size="2">Cdigo</font></b></td> <td width="44%" align="center" height="16"><b><font face="Verdana" size="2">Descrio</font></b></td>
232
24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50:

<td width="12%" align="center" height="16"><b><font face="Verdana" size="2">Estoque</font></b></td> <td width="15%" align="center" height="16"><b><font face="Verdana" size="2">Estoque mnimo</font></b></td> </tr> <%While Not objRs.eof%> <tr> <td width="10%" height="19"><font face="Verdana" size="2"> <p align="center"><%=objRs("codigo")%></font></td> <td width="44%" height="19"><font face="Verdana" size="2"><%=objRs("descricao")%></font></td> <td width="12%" height="19" align="center"><font face="Verdana" size="2"><%=objRs("estoque")%></font></td> <td width="15%" height="19" align="center"><font face="Verdana" size="2"><%=objRs("estoquemin")%></font></td> </tr> <% objRs.movenext wend objRs.Close objConn.Close Set objRs = Nothing Set objConn= Nothing %> </table> </body> </html>
As pginas seguintes tratam da adio de itens no estoque. adicionar_estoque.htm.

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: <html> <head> <title>Adicionar estoque</title> </head> <body> <p align="center"><font face="Verdana"><b>Adicionar estoque</b></font></p> <hr> <form method="GET" action="add_estoque.asp"> <div align="center"> <center> <table border="0" width="46%"> <tr> <td width="41%"><b><font size="2" face="Verdana">Cdigo</font></b></td> <td width="59%">

15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34:
233
<p align="center"><input type="text" name="cod" size="15"></td> </tr> <tr> <td width="41%"><font size="2" face="Verdana"><b>Quantidade(+)</b></font></td> <td width="59%"> <p align="center"><input type="text" name="est" size="15"></td> </tr> </table> </center> </div> <p align="center"><input type="subm it" value="Adicionar" name="B1"></p> </form> <p><font face="Verdana" size="2"> </font></p> <p> </p> <p> </p> <p> </p> <p> </p> <p align="right"><b><font face="Verdana" size="1"><a href="inde x.htm">|Voltar|</a></font></b></p></body> </html>
add_estoque.asp
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23:  <% Dim est,cod est=request("est") cod=request("cod") strquery = "UPDATE produtos set estoque=estoque+"&est&" where codigo="&cod Set objRs = objConn.Execute(strQuery) strQuery = "SELECT * From produtos where codigo="&cod Set objRs = objConn.Execute(strQuery) %> <html> <head> <title>Adicionar estoque</title> </head> <body> <p align="center"><font face="Verdana"><b>Estoque de produtos</b></font></p> <hr> <table border="1" width="100%" cellspacing="1" height="47"> <tr> <td width="10%" align="center" height="16"><b><font face="Verdana" size="2">Cdigo</font></b></td> <td width="44%" align="center" height="16"><b><font face="Verdana" size="2">Descrio</font></b></td>
234
24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50:

<td width="12%" align="center" height="16"><b><font face="Verdana" size="2">Estoque</font></b></td> <td width="15%" align="center" height="16"><b><font face="Verdana" size="2">Estoque mnimo</font></b></td> </tr> <%While Not objRs.eof%> <tr> <td width="10%" height="19"><font face="Verdana" size="2"> <p align="center"><%=objRs("codigo")%></font></td> <td width="44%" height="19"><font face="Verdana" size="2"><%=objRs("descricao")%></font></td> <td width="12%" height="19" align="center"><font face="Verdana" size="2"><%=objRs("estoque")%></font></td> <td width="15%" height="19" align="center"><font face="Verdana" size="2"><%=objRs("estoquemin")%></font></td> </tr> <% objRs.movenext wend objRs.Close objConn.Close Set objRs = Nothing Set objConn= Nothing %> </table> </body> </html>
Implementando consultas
Bem, agora que j fizemos toda a movimentao no sistema, chegou a hora de implementarmos algumas consultas. Atravs delas o usurio do sistema ter acesso a informaes tais como: produtos com estoque mnimo, relao de fornecedores, pedidos pendentes, pedidos atendidos, entre outras. Conforme voc vai perceber, implementar novas consultas simplificado pelo uso da sintaxe SQL.
235
Figura 10.6 Esta a tela inicial com as consultas disponveis. Porm, voc poder adicionar novas, conforme suas necessidades.
Pedidos atendidos
A primeira consulta que iremos implementar a que apresenta os pedidos atendidos, ou seja, aqueles que j foram concludos pelo usurio. Digite o programa a seguir e salve-o como: Consul_Ped_atendidos.asp
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17:  <% strQuery = "SELECT * From pedidos where posicao=1" Set ObjRs = objConn.Execute(strQuery) %> <html> <head> <title>Pedidos</title> </head> <body> <p align="center"><font face="Verdana"><b>Consulta pedidos <u><i>ATENDIDOS</i></u></b></font></p><hr> <table border="1" width="100%" cellspacing="1" height="47"> <tr> <td width="15%" align="left" height="16"><b><font face="Verdana" size="2">Pedidos</font></b></td> <td width="16%" align="left" height="16"><b><font face="Verdana"
236
18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54:

size="2">Fornecedor</font></b></td> <td width="23%" align="left" height="16"><b><font face="Verdana" size="2">Data do pedido</font></b></td> <td width="12%" align="left" height="16"><b><font face="Verdana" size="2">Valor</font></b></td> <td width="19%" align="right" height="16"><b><font face="Verdana" size="2">Situao</font></b></td> <td width="35%" align="center" height="16"></td> </tr> <%While Not objRs.eof%> <tr> <td width="15%" height="19" align="left"><font face="Verdana" size="2"><%=objRs("pedidos")%></font></td> <td width="16%" height="19" align="left"><font face="Verdana" size="2"><%=objRs("fornecedor")%></font></td> <td width="23%" height="19" align="left"><font face="Verdana" size="2"><%=objRs("data")%></font></td> <td width="12%" height="19" align="left"><font face="Verdana" size="2"> <p align="left"><%=formatNumber(objRs("valor"),2)%></font></td> <td width="19%" height="19" align="right"> <p align="right"><font face="Verdana" size="2">Atendido</font></td> <td width="35%" height="19"> <p align="center"><a href="lista_itens.asp?pedido=<%=objRs("pedidos")%>"><font face="Verdana" size="2"><b>Mostrar itens</b></font></a></td> </tr> <% objRs.movenext wend objRs.Close objConn.Close Set objRs = Nothing Set objConn= Nothing %> </table> <p align="right"> <b><font face="Verdana" size="1"> <a href="index.htm">|Voltar|</a></font></b></p></body> </html>
Perceba que na linha 40 o programa ir montar um link chamando a pgina lista_itens.asp, passando como parmetro o cdigo do pedido:
<a href="lista_itens.asp?pedido=<%=objRs("pedidos")%>">
Este programa ir listar os itens contidos em cada pedido. Para isto precisamos passar o cdigo do pedido, para que seja feita a consulta na tabela itens de pedidos.
237
Lista_itens.asp
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45:  <% dim ped ped=Request("pedido") strQuery = "SELECT * From itens_pedidos where codigo_pedido="&ped Set ObjRs = objConn.Execute(strQuery) %> <html> <head> <title>Lista itens</title> </head> <body> <p align="center"><font face="Verdana"><b>Lista itens</b></font></p> <hr> <table border="1" width="100%"> <tr> <td width="25%" align="right"><b><font face="Verdana" size="2">Pedido</font></b></td> <td width="25%" align="right"><b><font face="Verdana" size="2">Produto</font></b></td> <td width="25%" align="right"><b><font face="Verdana" size="2">Quantidade</font></b></td> <td width="25%" align="right"><b><font face="Verdana" size="2">Preo</font></b></td> </tr> <%While not objRs.eof%> <tr> <td width="25%" align="right"><%=objRs("codigo_pedido")%></td> <td width="25%" align="right"><%=objRs("codigo_produto")%></td> <td width="25%" align="right"><%=objRs("Quantidade")%></td> <td width="25%" align="right"><%=FormatNumber(objRs("preco"),2)%></td> </tr> <% objRs.movenext wend objRs.Close objConn.Close Set objRs = Nothing Set objConn= Nothing %> </table> <p align="right"><a href="JavaScript:history.go(-1)"><b><font face="Verdana" size="2">Voltar</font></b></a></p> </body> </html>
238
Pedidos no atendidos: Consul_Ped_naoatendidos.asp

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44:  <% strQuery = "SELECT * From pedidos where posicao=0" Set ObjRs = objConn.Execute(strQuery) %> <html> <head> <title>Pedidos no atendidos</title> </head> <body> <p align="center"><font face="Verdana"><b>Consulta pedidos <i><u>NO</u></i> <i><u>ATENDIDOS</u></i></b></font></p> <hr> <table border="1" width="100%" cellspacing="1" height="47"> <tr> <td width="20%" align="left" height="16"><b><font face="Verdana" size="2">Pedidos</font></b></td> <td width="20%" align="left" height="16"><b><font face="Verdana" size="2">Fornecedor</font></b></td> <td width="20%" align="left" height="16"><b><font face="Verdana" size="2">Data do pedido</font></b></td> <td width="20%" align="right" height="16"><b><font face="Verdana" size="2">Valor</font></b></td> <td width="20%" align="left" height="16"> <p align="center"><b><font face="Verdana" size="2">Situao</font></b></p> </td> <td width="20%" align="center" height="16"></td> </tr> <%While Not objRs.eof%> <tr> <td width="20%" height="19" align="left"><font face="Verdana" size="2"><%=objRs("pedidos")%></font></td> <td width="20%" height="19" align="left"><font face="Verdana" size="2"><%=objRs("fornecedor")%></font></td> <td width="20%" height="19"><font face="Verdana" size="2"><%=objRs("data")%></font></td> <td width="20%" height="19" align="right"><font face="Verdana" size="2"> <p align="right"><%=formatNumber(objRs("valor"),2)%></font></td> <td width="20%" height="19" align="left"> <p align="left"><font face="Verdana" size="2"> No Atendido</font></td> <td width="20%" height="19"> <p align="center"><a href="lista_itens.asp?pedido=<%=objRs("pedidos")%>"><font face="Verdana" size="2"><b>Mostrar itens</b></font></a></td>

45: </tr> 46: <% 47: objRs.movenext 48: wend 49: objRs.Close 50: objConn.Close 51: Set objRs = Nothing 52: Set objConn= Nothing 53: %> 54: </table><p align="right"><b><font face="Verdana" size="1"><a 55: href="index.htm">|Voltar|</a></font></b></p></body></html>
239
Consulta a fornecedores: Fornecedores.asp

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32:  <% strQuery = "SELECT * From fornecedor" Set ObjRs = objConn.Execute(strQuery) %> <html><head><title>Fornecedores</title></head> <body> <p align="center"><font face="Verdana"><b>Listagem de fornecedores</b></font></p> <hr> <table border="1" width="100%" cellspacing="1" height="47"> <tr> <td width="15%" align="center" height="16"><b><font face="Verdana" size="2">Cdigo</font></b></td> <td width="25%" align="center" height="16"><b><font face="Verdana" size="2">Nome</font></b></td> <td width="16%" align="center" height="16"><b><font face="Verdana" size="2">Telefone</font></b></td> <td width="29%" align="center" height="16"><b><font face="Verdana" size="2">Email</font></b></td> <td width="16%" align="center" height="16"><b><font face="Verdana" size="2">Contato</font></b></td> <td width="16%" align="center" height="16"></td> </tr> <%While Not objRs.eof%> <tr> <td width="15%" height="19"><font face="Verdana" size="2"><%=objRs("codigo")%> </font></td> <td width="25%" height="19"><font face="Verdana" size="2"><%=objRs("nome")%> </font></td> <td width="16%" height="19"><font face="Verdana" size="2"><%=objRs("telefone")%> </font></td> <td width="29%" height="19"><font face="Verdana" size="2"><%=objRs("email")%>
240
33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52:

</font></td> <td width="29%" height="19"><font face="Verdana" size="2"><%=objRs("pessoa")%> </font></td> <td width="29%" height="19"> <p align="center"><font face="Verdana" size="2"><b> <a Href="excluir.asp?cod=<%=objRs("codigo")%>&tabela=fornecedor"> exclur</a></b></font></td> </tr> <% objRs.movenext wend objRs.Close objConn.Close Set objRs = Nothing Set objConn= Nothing %> </table> <p> </p> <p align="right"><a href="index.htm"><b><font face="Verdana" size="1">|Voltar|</font></b></a></p></body> </html>
Produtos em estoque: Estoque.asp O principal detalhe na listagem de produtos est na linha 32 onde o programa insere a foto do produto apresentado. Para isto o nome do produto deve ser informado no campo foto da tabela.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19:  <% strQuery = "SELECT * From produtos" Set ObjRs = objConn.Execute(strQuery) %> <html> <head> <title>Estoque</title> </head> <body> <p align="center"><font face="Verdana"><b>Estoque de produtos</b></font></p> <hr> <form method="POST" action="estoque.asp"> <table border="1" width="100%" cellspacing="1" height="47" bordercolor="#FFFFFF"> <tr> <td width="10%" align="center" height="16" bgcolor="#336699"></td> <td width="11%" align="left" height="16" bgcolor="#336699"> <p align="center"><b><font face="Verdana" size="2" color="#FFFFFF">Cdigo</font></b></td>

20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53:
241
<td width="42%" align="left" height="16" bgcolor="#336699"><b><font face="Verdana" size="2" color="#FFFFFF">Descrio</font></b></td> <td width="16%" align="right" height="16" bgcolor="#336699"><b><font face="Verdana" size="2" color="#FFFFFF">Estoque</font></b></td> <td width="46%" align="right" height="16" bgcolor="#336699"><b><font face="Verdana" size="2" color="#FFFFFF">Mnimo</font></b></td> <td width="15%" align="center" height="16" bgcolor="#336699"></td> </tr> <%While not objRs.eof%> <tr> <td width="10%" height="19" align="center" bgcolor="#C4E1FF"> <p align="center"><font size="2" face="Verdana" color="#000000"><img src="<%=objRs("foto")%>"></font></td> <td width="11%" height="19" align="left" bgcolor="#C4E1FF"> <p align="center"><font face="Verdana" size="2" color="#000000"> <%=objRs("codigo")%></font></td> <td width="42%" height="19" align="left" bgcolor="#C4E1FF"><font face="Verdana" size="2"><font color="#000000"><%=objRs("descricao")%></font></font></td> <td width="16%" height="19" align="right" bgcolor="#C4E1FF"><font face="Verdana" size="2"><font color="#000000"><%=objRs("estoque")%></font></font></td> <td width="46%" height="19" align="right" bgcolor="#C4E1FF"><font face="Verdana" size="2"><font color="#000000"><%=objRs("estoquemin")%></font></font></td> <td width="15%" height="19" align="center" bgcolor="#C4E1FF"><b><a href="excluir.asp?cod=<%=objRs("codigo")%>&tabela=produtos"><font face="Verdana" size="2" color="#000000">exclur</font></a></b></td> </tr> <%objrs.movenext wend %> </table> </form> <p align="right"><b><font face="Verdana" size="1"><a href="index.htm">|Voltar|</a></font></b></p></body> </html>
Produtos com estoque mnimo: estoque_min.asp Agora iremos listar apenas os produtos que estejam com o campo estoque menor ou igual ao estoque mnimo. A clusula em SQL pode ser vista na linha 3.
1: 2: 3: 4: 5: 6:  <% strQuery = "SELECT * From produtos where estoque<=estoquemin" Set ObjRs = objConn.Execute(strQuery) %> <html>
242
7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52:

<head> <title>Estoque mnimo</title> </head> <body> <p align="center"><font face="Verdana"><b>Produtos em estoque mnimo</b></font></p> <hr> <table border="1" width="100%" cellspacing="1" height="47"> <tr> <td width="10%" align="center" height="16"><b><font face="Verdana" size="2">Cdigo</font></b></td> <td width="44%" align="center" height="16"><b><font face="Verdana" size="2">Descrio</font></b></td> <td width="12%" align="center" height="16"><b><font face="Verdana" size="2">Estoque</font></b></td> <td width="15%" align="center" height="16"><b><font face="Verdana" size="2">Mnimo</font></b></td> <td width="15%" align="center" height="16"><b><font face="Verdana" size="2">Fornecedor</font></b></td> </tr> <%While Not objRs.eof%> <tr> <td width="10%" height="19"><font face="Verdana" size="2"> <p align="center"><%=objRs("codigo")%></font></td> <td width="44%" height="19"><font face="Verdana" size="2"><%=objRs("descricao")%></font></td> <td width="12%" height="19" align="center"><font face="Verdana" size="2"><%=objRs("estoque")%></font></td> <td width="15%" height="19" align="center"><font face="Verdana" size="2"><%=objRs("estoquemin")%></font></td> <td width="15%" height="19" align="center"><font face="Verdana" size="2"><%=objRs("fornecedor")%></font></td> </tr> <% objRs.movenext wend objRs.Close objConn.Close Set objRs = Nothing Set objConn= Nothing %> </table> <p> </p> <p> </p> <p> </p> <p align="right"><b><font face="Verdana" size="1"><a

53: 54: href="index.htm">|Voltar|</a></font></b></p></body> </html>
243
Excluir.asp O cdigo da pgina excluir.asp o mais simples de todos. No entanto, ele utilizado por vrias pginas anteriores. Possuindo como particularidade o fato de receber no apenas o cdigo a ser excludo, como tambm a tabela na qual a excluso dever ser realizada, ou seja, com uma pgina podemos excluir cdigos em vrias tabelas (reaproveitando o cdigo).
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19:  <% Dim tabela,cod tabela=request("tabela") cod=request("cod") strQuery = "DELETE * From "&tabela&" where codigo ="&cod Set ObjRs = objConn.Execute(strQuery) %> <html> <head> <title>Excluir</title> </head> <body> <p align="center"> </p> <p align="center"><b><font size="3" face="Verdana"> Dados excludos</font></b></p> <p align="center"><a href="JavaScript:history.go(-1)"><b><font size="3" face="Verdana">Voltar</font></b></a></p></body> </html>
Perceba que na linha 6 estamos excluindo todos os registros da tabela passada como parmetro, onde o campo codigo seja igual ao parmetro recebido cod.
Concluindo o controle de estoques

Ufa! Voc j deve estar cansado de tanto cdigo. Mas se voc chegou at aqui, certamente j pode criar vrias rotinas em ASP para a Internet ou Intranet. Todo esforo compensador. Para finalizar nosso sistema, criaremos as duas ltimas pginas que so apenas acessrias. Trata-se da agenda e da calculadora, ambas feitas em JavaScript. O link, montado na pgina principal, faz com que aparea apenas uma janela com a agenda ou a calculadora. Os cdigos podem ser vistos a seguir:
244
Calculadora.html
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22; 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: <html> <head> <title>Calculadora</title> </head> <body bgcolor="#0099FF" text="#FFFFFF"> <script language="JavaScript"> function addChar(input, character) { if(input.value == null || input.value == "0") input.value = character else input.value += character } function deleteChar(input) { input.value = input.value.substring(0, input.value.length - 1) } function changeSign(input) { if(input.value.substring(0, 1) == "-") input.value = input.value.substring(1, input.value.length) else input.value = "-" + input.value } function compute(form) { form.display.value = eval(form.display.value) } function square(form) { form.display.value = eval(form.display.value) * eval(form.display.value) } function checkNum(str) { for (var i = 0; i < str.length; i++) { var ch = str.substring(i, i+1) if (ch < "0" || ch > "9") { if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "(" && ch!= ")") { alert("invalid entry!") return false } } }

45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58: 59: 60: 61: 62: 63: 64: 65: 66: 67: 68: 69: 70: 71: 72: 73: 74: 75: 76: 77: 78: 79: 80: 81: 82: 83: 84: 85: 86: 87: 88: 89: 90:
245
return true } </script> <form> <table border="5" align="center"> <tr align="center"> <td colspan="4"><table border="3"> <tr> <td align="center"><input name="display" value="0" size="20"></td> </tr> </table> </td> </tr> <tr align="center"> <td><input type="button" value=" 7 " onClick="addChar(this.form.display, '7')"> </td> <td><input type="button" value=" 8 " onClick="addChar(this.form.display, '8')"> </td> <td><input type="button" value=" 9 " onClick="addChar(this.form.display, '9')"> </td> <td><input type="button" value=" / " onClick="addChar(this.form.display, '/')"> </td> </tr> <tr align="center"> <td><input type="button" value=" 4 " onClick="addChar(this.form.display, '4')"> </td> <td><input type="button" value=" 5 " onClick="addChar(this.form.display, '5')"> </td> <td><input type="button" value=" 6 " onClick="addChar(this.form.display, '6')"> </td> <td><input type="button" value=" * " onClick="addChar(this.form.display, '*')"> </td> </tr> <tr align="center"> <td><input type="button" value=" 1 " onClick="addChar(this.form.display, '1')"> </td> <td><input type="button" value=" 2 " onClick="addChar(this.form.display, '2')"> </td> <td><input type="button" value=" 3 " onClick="addChar(this.form.display, '3')"> </td> <td><input type="button" value=" - " onClick="addChar(this.form.display, '-')"> </td> </tr> <tr align="center"> <td><input type="button" value=" 0 " onClick="addChar(this.form.display, '0')"> </td> <td><input type="button" value=" . " onClick="addChar(this.form.display, '.')"> </td> <td><input type="button" value=" +/- " onClick="changeSign(this.form.display)"> </td> <td><input type="button" value=" + " onClick="addChar(this.form.display, '+')"> </td> </tr> <tr align="center"> <td><input type="button" value=" ( " onClick="addChar(this.form.display, '(')"> </td> <td><input type="button" value=" ) " onClick="addChar(this.form.display, ')')"> </td> <td><input type="button" value=" sq " onClick="if (checkNum(this.form.display.value)) { square(this.form) }"> </td> <td><input type="button" value=" <- " onClick="deleteChar(this.form.display)"> </td> </tr> <tr align="center">
246
91: 92: 93: 94: 95: 96: 97:

<td colspan="2"><input type="button" value=" Enter onClick="if (checkNum(this.form.display.value)) { compute(this.form) }"> </td> <td colspan="2"><input type="button" value=" C onClick="this.form.display.value = 0 "> </td> </tr> </table></form></body></html> " name="enter"
"
Calendario.html
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: <html> <head><title></title></head> <body bgcolor="#0099FF"> <p><script language="JavaScript"> <!-function calendar() { var monthNames = new Array("Janeiro", "Fevereiro", "Maro", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"); var today = new Date(); var thisDay = today.getDate(); var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); // ano bissexto? year = today.getYear(); if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29; // achar o numero de dias deste ms nDays = monthDays[today.getMonth()]; firstDay = today; firstDay.setDate(1); startDay = firstDay.getDay(); document.writeln("<CENTER>"); document.write("<TABLE BORDER>"); document.write("<T R><TH COLSPAN=7>"); document.write(monthNames[today.getMonth()] + " " + year); document.write("<TR><TH>"); document.write("<FONT COLOR=\"#0fffff\">Dom<TH></FONT>"); document.write("<FONT COLOR=\"#0fffff\">Seg<TH></FONT>"); document.write("<FONT COLOR=\"#0fffff\">Ter<TH></FONT>"); document.write("<FONT COLOR=\"#0fffff\">Qua<TH></FONT>");

37: document.write("<FONT COLOR=\"#0fffff\">Qui<TH></FONT>"); 38: document.write("<FONT COLOR=\"#0fffff\">Sex<TH></FONT>"); 39: document.write("<FONT COLOR=\"#0fffff\">Sab</FONT>"); 40: document.write("<TR>"); 41: column = 0; 42: for (i=0, column=0; i<startDay; i++, column++) 43: document.write("<TD>"); 44: for (i=1; i<=nDays; i++) 45: { 46: document.write("<TD>"); 47: if (i == thisDay) 48: document.write("<FONT COLOR=\"#0fffff\">" + i + "</FONT>"); 49: else document.write(i); 50: column++; 51: if (column == 7) 52: { 53: document.write("<TR>"); // inicio de nova linha 54: column = 0; 55: } 56: } 57: document.write("</TABLE>"); 58: document.writeln("</CENTER>"); 59: } 60: calendar(); 61: //--> 62: </script> 63: </html>
247
Consideraes finais sobre sistemas na Internet

Desenvolver sistemas para a Internet uma atividade relativamente nova. Ainda existe muito a ser feito, principalmente quando lembramos dos vrios sistemas que ainda no esto prontos para serem utilizados em um ambiente de Internet e I ntranet e que, mais cedo ou mais tarde, precisaro migrar para a Web. Com isso fica fcil perceber que muito trabalho ainda h por ser realizado. Este livro mostrou apenas um incio de como podem ser desenvolvidos sistemas para a Internet. Com certeza voc precisar se aprodundar em assuntos como:
248
Modelagem de sistemas Banco de dados Programao JavaScript Segurana B2B, B2C entre outros
Alm destes assuntos, ganham grande importncia conhecimentos mais aprofundados no que diz respeito regra de negcio da empresa em questo. Conhecer bem o que dever ser desenvolvido to importante quanto desenvolv-lo. Para encerrar, lembramos que, o que foi apresentado no sistema que voc conheceu (loja virtual e controle de estoques), so exemplos meramente didticos, onde no foram utilizadas tcnicas de programao, tendo em vista a grande quantidade de assuntos sobre lgica e estruturas de dados que seriam necessrios. Lembramos ainda que estamos prontos a lhe atender em nosso site, para onde voc poder enviar dvidas ou sugestes: www.toptc.com.br.
A
Access, 36, 205 ADO, 41 ASP, 15, 16, 25, 134, 167, 168, 183 Atributos, 35, 102
B
B2B, 245 B2C, 245 banco de dados, 98, 176, 183 Banco de dados, 31 Banco de dados relacionais, 32 bancos de dados, 43 bgcolor, 54 bordas, 139 browser, 75
CGI, 16, 134, 168 CLASS, 94 cliente, 8 Cdigo, 155 Comandos condicionais, 171 comentrios, 63 comrcio eletrnico, 9 Conectores, 113 contedo, 7 cores, 54 Cores, 129 correio eletrnico, 152 CSS, 161, 165 currculo, 1
D
Deck, 84 decks, 85 DEFAULT, 90 design, 12 DLL, 17 document, 75 DOM (Document Object Model), 96 Dreamweaver, 145 DTD, 109 DTD (Document Type Definition), 93
C
camadas, 149, 166 Caractere, 107 cards, 84, 85 CDATA, 107
249
250
E
Easy Pad Editor, 83 elemento, 113 EMPTYOK, 90 entidades, 106 Entidades, 107 Entidades (Tabelas), 35
I
IIS, 25, 167 includes, 206 ndices, 35 Institucional, 9 Integridade referencial, 36 Interagindo, 64 Internet Information Server, 15 Internet Information Server (IIS), 23 ISO, 93
F
figuras, 77, 138, 207 folhas de estilos, 164 FORMAT, 90 formatando, 129 Formatando, 52, 53 formulrio, 60, 175 formulrios, 89, 156 Formulrios, 58, 134 frames, 135, 151, 154 FrontPage 2000, 121 FTP, 140 funes, 69, 172
J
JavaScript, 45, 62, 70, 71, 244
K
KEYWORDS, 162
L
laos, 68, 172 letreiro digital, 131 linguagem SQL, 41 linha horizontal, 151 linhas, 49 linhas horizontais, 130 links, 55, 131 LINUX, 16 listas, 50 Listas intercaladas, 51 loja virtual, 180 Loja Virtual, 167 Loop, 119 loops, 68, 172
G
Grades, 156
H
hexadecimal, 54 hierarquia de objetos, 70 hiperlink, 86 Hiperlinks, 49 history, 75 HTML, 16, 25, 45, 56, 94, 118, 160 HTTP, 20
ndice Remissivo
251
M
mapas clicveis, 132 MAXLENGTH, 90 Menu de salto, 163 META, 162 Microsoft Instaler (MSI), 24 modelos, 152 MySQL, 33
R
Raiz, 104 rguas, 152 Rguas, 156 Relacionamentos, 35 RGB, 54
S
SAX (Simple API for XML), 96 Script, 160 Segurana, 13, 43, 245 select, 91 Server-Side, 157 servidor, 29 servidores, 15 SGBDs (Sistemas Gerenciadores de Banco de Dados), 33 SGML, 93 smbolos, 152 SIZE, 90 SQL, 205 SQLServer, 33, 36 strings, 72, 171
N
navegador, 46 navegadores, 155, 161 Netscape, 164
O
Onpick, 88 Ontimer, 87 Operadores condicionais, 66 lgicos, 65 matemticos, 66 Operadores lgicos, 170 Operadores matemticos, 171 ORACLE, 33 ordem Z, 138
T
tabelas, 150, 178, 211 Tabelas, 56, 88 tag, 90 tags, 60 Tags, 86, 101 tarefas, 133 temas, 137 TYPE, 90
P
pginas dinmicas, 16 pargrafos, 49 Personal Web Server, 15, 21 projeto, 5 Projeto, 155 proxy, 16 PWS, 18, 167
252
V
variveis, 65, 91, 174 Variveis, 169 VBScript, 45, 168, 173
Windows 2000 Server, 15, 23 Windows 98, 15, 18 Windows NT 4.0, 23 WML, 82, 84 WS_FTP, 141
W
WAP, 82 Web, 124 window, 76
X
XML, 84, 93, 94, 103, 105 XML Notepad, 96 XSL, 115, 120
1. Alm da Tecnologia............................................................... 1
Vendendo a si mesmo .................................................................................. 1 Fortalea seu currculo ................................................................................. 1 Desenvolvimento sob a tica do cliente ......................................................... 8
2. Configurando um Servidor de Internet ................................. 15

Introduo aos servidores ...........................................................................15 Estrutura do funcionamento das pginas dinmicas ASP................................16 Desenvolvimento de novos componentes ..................................................18 Windows 98/Millenium.................................................................................18 Conexo com a Internet...........................................................................18 Instalando o PWS ....................................................................................18 Configurando o Personal Web Server ........................................................21 Testando o servidor .................................................................................23 Criando subpastas ...................................................................................24 Windows 2000 Server..................................................................................24 Caractersticas .........................................................................................25 Configurando o servio IIS .......................................................................26 Testando o servidor .................................................................................30
3. Fundamentos sobre Banco de Dados .................................... 31

Banco de dados ..........................................................................................32 Banco de dados relacionais.......................................................................33 SGBDs (Sistemas Gerenciadores de Banco de Dados).................................34 Banco de dados como parte do sistema ....................................................35 Entidades, atributos e relacionamentos ........................................................36 Entidades (Tabelas) .................................................................................36 Atributos .................................................................................................36 Relacionamentos .....................................................................................36 ndices ....................................................................................................36 Integridade referencial .............................................................................37
O Access ....................................................................................................38 Criando tabelas no Access ........................................................................38 Fundamento do acesso a dados ................................................................42 Linguagem SQL...........................................................................................43 Inserindo dados em uma tabela................................................................44 Consultando dados ..................................................................................44 Removendo dados ...................................................................................44 Criando relacionamentos ..........................................................................44 Segurana das informaes armazenadas no banco de dados........................45 Futuro dos bancos de dados .....................................................................45 Resumindo .................................................................................................46
4. Linguagens para Desenvolvimento na Web HTML.................. 45

HTML .........................................................................................................47 Abrindo uma pgina local no navegador ....................................................48 Os comandos em HTML............................................................................48 Hiperlinks ................................................................................................51 Criao de listas.......................................................................................52 Listas intercaladas ...................................................................................53 Formatando a exibio.............................................................................54 Formatando o fundo da tela .....................................................................55 Funcionamento das cores em hexadecimal ................................................56 Definindo as cores dos links ......................................................................57 Inserindo linhas .......................................................................................57 Tabelas em HTML ....................................................................................58 Criando Formulrios .................................................................................60
5. Linguagens para Desenvolvimento na Web JavaScript........... 62

JavaScript ...................................................................................................64 Um primeiro exemplo ...............................................................................65 Colocando comentrios em seu cdigo ......................................................65 Interagindo com o usurio........................................................................66 Criando variveis .....................................................................................67 Operadores lgicos ..................................................................................67 Operadores matemticos..........................................................................68 Operadores condicionais...........................................................................69 Criando laos no programa (loops) ...........................................................70 Criando funes.......................................................................................72 A hierarquia de objetos do JavaScript ...........................................................73 Manipulando eventos ..................................................................................74 Manipulando strings ....................................................................................75 Manipulando datas ......................................................................................77 Elementos relacionados com o browser .....................................................78
Sumrio
XI
Inserindo e controlando figuras ................................................................80 Interagindo com o usurio........................................................................81 Resoluo dos exerccios propostos ..............................................................82
6. Programao WML (Wap).................................................... 82

WAP...........................................................................................................85 WML ..........................................................................................................85 Iniciando o editor WAP................................................................................86 Deck ..........................................................................................................87 Criando a primeira pgina em WML ..............................................................87 Utilizando decks e cards ..............................................................................88 Criando um hiperlink ...................................................................................89 Tags <to><do> ........................................................................................89 Ontimer...................................................................................................90 Onpick ....................................................................................................91 Tabelas ...................................................................................................91 Obtendo dados do usurio (formulrios) ...................................................92 A tag <input> .........................................................................................93 A tag select ................................................................................................94 Utilizando variveis .....................................................................................94
7. Iniciando no XML ................................................................ 93

Introduo ao XML ......................................................................................96 O que XML? .............................................................................................98 Quem criou a XML? .....................................................................................98 O que necessrio?....................................................................................99 Em que pode ser usado .............................................................................101 Exemplo de aplicao em banco de dados ..................................................102 Pontos fortes ............................................................................................103 Estrutura bsica ........................................................................................104 Tags para documentos XML.......................................................................104 Tag inicial e final de um elemento...........................................................105 Regras para os nomes dos elementos .....................................................105 Atributos dos elementos .........................................................................106 Elemento sem contedo .........................................................................106 A rvore de um documento XML ................................................................107 Elemento Raiz........................................................................................108 Declarao do documento XML...............................................................109 Comentrios em XML .............................................................................109 Fazendo referncia a entidades em XML..................................................110 Entidades Predefinidas ...........................................................................110 Incluindo Dados de Caractere (Seo CDATA) .........................................111 PI (Instrues de Processamento) ..........................................................112
XII
Atributos Definidos.................................................................................113 Conceitos Iniciais sobre DTD ..................................................................113 Declarao de elemento.........................................................................117 Contedos especiais de um elemento......................................................117 Indicadores de ocorrncia e Conectores ..................................................117 Lista de Atributos do elemento ...............................................................118 Conceitos Iniciais sobre XSL.......................................................................119 Declarao XSL......................................................................................122 Formatao HTML..................................................................................122 Realizando um Loop...............................................................................123 Exibindo o contedo de um elemento .....................................................124 Finalizando o documento XSL .................................................................124
8. Ferramentas para Desenvolvimento na Web ....................... 121

FrontPage 2000 ........................................................................................126 O contedo de uma pgina ....................................................................127 Projetando o que ser criado ..................................................................127 A estrutura do site .................................................................................128 Criando uma nova Web..........................................................................129 Criando a estrutura do site .....................................................................130 Conhecendo o FrontPage .......................................................................133 Construindo Formulrios.........................................................................139 Pginas com quadros (frames) ...............................................................141 Utilizando temas ....................................................................................142 Posicionando e sobrepondo figuras .........................................................143 Entendendo a ordem Z...........................................................................144 Importando pginas prontas...................................................................144 Utilizando bordas compartilhadas............................................................144 Instalando um programa para FTP..........................................................146 Criando uma nova conta de FTP.............................................................146 Enviando e recebendo arquivos ..............................................................149 Dreamweaver ...........................................................................................150 Iniciando no Dreamweaver .....................................................................150 Familiarizando-se com o menu................................................................151 Comeando uma nova pgina .................................................................153 Definindo algumas propriedades da pgina .............................................153 Salvando seu trabalho ............................................................................154 Trabalhando com camadas .....................................................................155 Inserindo tabelas ...................................................................................156 Recursos rpidos (parte I) ......................................................................157 Utilizando modelos de pginas................................................................158 Inserindo molduras (frames) ..................................................................160 Verificando os navegadores de destino....................................................161
Sumrio
XIII
Utilizando o menu Exibir.........................................................................161 Criando formulrios................................................................................162 Processando o formulrio .......................................................................163 Server-Side............................................................................................164 Linhas do tempo ....................................................................................165 Recursos rpidos (parte 2) .....................................................................166 Gravando comandos ..............................................................................167 Convertendo para navegadores 3.0.........................................................168 Iniciando um editor externo....................................................................168 Inserindo <meta>.................................................................................169 Menu de salto........................................................................................170 Redimensionamento do Netscape ...........................................................171 Trabalhando com folhas de estilos ..........................................................171 Alinhando camadas ................................................................................173
9. Criando uma Loja Virtual................................................... 167

O que o ASP ..........................................................................................174 ASP versus CGI......................................................................................175 Como funciona o ASP.............................................................................175 Colocando comentrios .............................................................................176 Criando Variveis ......................................................................................177 Operadores lgicos....................................................................................177 Operadores matemticos e de strings.........................................................178 Comandos condicionais .............................................................................178 Criando laos (loops).................................................................................179 Criando funes ........................................................................................180 Avanando no VBScript..............................................................................180 Iniciando no ASP.......................................................................................181 Enviando dados aos usurios ..................................................................181 Evitando erros com variveis ..................................................................182 Processando um formulrio ....................................................................182 Criando o banco de dados .........................................................................184 Criando outras tabelas ...........................................................................186 Comeando a desenvolver a loja virtual ......................................................188 Listagem dos clientes clientes.asp ........................................................189 Digitando os cdigos em ASP..................................................................191 Primeira parte: conectando com o banco de dados .....................................191 Mdulo da frente da Loja...........................................................................199 Criando a pgina principal: index.htm.........................................................200 Pgina de cadastro: cadastro.htm ..............................................................201 Identificando o cliente: comprar.htm.......................................................204 Verificando se o cliente est cadastrado ..................................................204 Iniciando a venda: carrinho.asp..............................................................206
XIV
Colocando no carrinho: carrinho.asp .......................................................208 Efetivando a compra: efetiva.asp............................................................211 Concluindo a loja ......................................................................................212
10. Implementando um Controle de Estoques ........................ 205

Utilizando includes ....................................................................................214 Reutilizando pginas inteiras......................................................................214 Inserindo figuras.......................................................................................215 Conhecendo a estrutura do sistema ...........................................................215 Entendendo os mdulos ............................................................................216 Pgina inicial.............................................................................................217 Criando as tabelas.....................................................................................219 Contedo das tabelas ................................................................................220 Manuteno de fornecedores .....................................................................222 Cadastro de produtos ................................................................................224 Movimentos ..............................................................................................227 Inserindo itens nos pedidos .......................................................................229 Concluindo os pedidos digitados.................................................................232 Abatendo itens no estoque ........................................................................235 Implementando consultas..........................................................................239 Pedidos atendidos ..................................................................................240 Concluindo o controle de estoques .............................................................248 Consideraes finais sobre sistemas na Internet .........................................252
ndice Remissivo.................................................................. 247

Como Se Tornar Um Webmaster

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Como Se Tornar Um Webmaster

Hochgeladen von

Copyright:

Verfügbare Formate

Primeiramente queremos agradecer a Deus pois sem ele nada disto seria possvel.

Agnaldo Lopes Martins

Como se tornar um WEBMASTER

Gilson Brando Cheble

Fortalea seu currculo

Como se tornar um WEBMASTER

Alm dos cursos, adquira o hbito de leitura

Crie um crculo de amizades em torno da sua profisso

Zele pela sua aparncia

Como se tornar um WEBMASTER

Documente tudo que puder

Controle os seus impulsos

Respeite o direito propriedade intelectual de quem criou os softwares

Avalie os sites j existentes

Antes de fornecer qualquer preo, elabore um projeto

Como se tornar um WEBMASTER

Comece por criar o seu prprio site

Identifique os melhores sites do mercado

Crie no seu site um portflio dos servios que voc j realizou

Esquea da carteira de trabalho

Como se tornar um WEBMASTER

No abandone o seu cliente

Esforce-se por criar e manter uma carteira de clientes

Desenvolvimento sob a tica do cliente

Site institucional ou de comrcio eletrnico

Desmistifique a venda de produtos ou servios pela Internet

Como se tornar um WEBMASTER

Como se tornar um WEBMASTER

No existe site perfeito ou ideal

O design tambm precisa ser atualizado

No adianta nada fazer um site e no divulg-lo

Voc j viu alguma loja sem gerente?

Estabelea um cronograma fsico financeiro

Segurana nas transaes

Como se tornar um WEBMASTER

Introduo aos servidores

Como se tornar um WEBMASTER

Estrutura do funcionamento das pginas dinmicas ASP

Configurando um Servidor de Internet Cliente solicita pginas ASP

Servidor devolve pgina em HTML (processada) Figura 2.1

Como se tornar um WEBMASTER

Desenvolvimento de novos componentes

Conexo com a Internet

Configurando um Servidor de Internet

Figura 2.4 Clique em Tpica e em seguida em Avanar.

Como se tornar um WEBMASTER

Configurando um Servidor de Internet

Configurando o Personal Web Server

Como se tornar um WEBMASTER

Figura 2.9 Trocando o nome do servidor.

Configurando um Servidor de Internet

Windows 2000 Server

Como se tornar um WEBMASTER Advanced e-commerce Datacenter Aplicativos crticos

CPU(Max) RAM(Max) Requisitos mnimos

2 4Gb Pentium 133 ou superior 64Mb 1Gb de HD

8 8Gb Pentium 133 ou superior 64Mb 1Gb de HD

32 64Gb Ainda no divulgado

Configurando um Servidor de Internet

Configurando o servio IIS

Como se tornar um WEBMASTER

A tela a seguir ser apresentada.

Configurando um Servidor de Internet

Voc ser acompanhado pelo assistente.