Professional Documents
Culture Documents
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.
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
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.
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:
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 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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
17
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
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.
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.
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.
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
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
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.
24 Professional Pblico Desktops Notebooks Server Arquivos Impresso Intranets Redes 4 4Gb Pentium 133 ou superior 64Mb 1Gb de HD
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.
Figura 2.11 Nesta tela clique sobre a opo Add/Remove Windows components. Em seguida clique no boto Components.
26
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)
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.
33
Descrio Monitor Winchester Teclado Produtos do fornecedor Cod_prod Cod_forn 001 002 003 001 001 002
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.
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.
35
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
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.
38
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.
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
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.
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
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
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.
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>
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>
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.
Tome o devido cuidado para no utilizar uma Figura de tons fortes pois isto poder atrapalhar a leitura.
55
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.
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.
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>
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>
59
Dever ser utilizado junto com a tab <table> e define se a tabela dever conter bordas ou no.
<ALIGN>
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.
Cria uma rea maior que a <text> para que o usurio digite textos maiores.
ROWS=""
Nmero de linhas.
COLS=""
Nmero de colunas.
<SELECT>
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 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>
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.
65
Neste exemplo apenas a linha que contm // no ser executada. Voc poder utilizar este tipo de comentrio quando precisar comentar poucas linhas.
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>
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
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
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
"+ 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.
1: <script language="Javascript">
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.
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
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)
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).
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:
1: <script language="Javascript">
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>
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
80
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.
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).
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.
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.
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
<wml> <card id="Principal" title ="Tabela"> <p> <!-- Aqui comea a tabela--> <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>
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>
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" />
93
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.
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.
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.
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
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?
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
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.
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.
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.
Cliente
Cliente
Cliente
Nome
RG
Telef one
Nome
RG
Telef one
Nome
Telef one
Comercial
Residencial
Iniciando no XML
105
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.
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: <!-- Texto Do Comentrio --> 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?> <!-- Esta classe do turno da manh --> <Classe Numero=02> <Aluno> <Nome>Pedro Augusto</Nome> <Numero>12</Numero> <NotaFinal>87</NotaFinal> </Aluno> <!-- Aluna exemplar --> <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.
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
Caractere
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>
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
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
112
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:
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?> <!-- Declarao do elemento raiz da lista de clientes --> <!ELEMENT clientes (cliente+)> <!-- Um cliente contm nome, endereco, telefone e e-mail --> <!ELEMENT cliente (nome+, endereco+, telefone+, sexo*, email+)> <!-- Um nome contm dados de caracteres desmembrados ou primeiro nome e sobrenome --> <!ELEMENT nome (#PCDATA | prenome | sobrenome)*> <!ELEMENT prenome (#PCDATA)> <!ELEMENT sobrenome (#PCDATA)> <!-- Definio do elemento endereo --> <!ELEMENT endereco (rua+, bairro, cidade+, estado+, cep?)> <!ELEMENT rua (#PCDATA)> <!ELEMENT bairro (#PCDATA)> <!ELEMENT cidade (#PCDATA)> <!ELEMENT estado (#PCDATA)> <!ELEMENT cep (#PCDATA)> <!-- Definio do elemento telefone que usa o atributo comercial --> <!ELEMENT telefone (#PCDATA)> <!ATTLIST telefone comercial (sim | nao) sim> <!ELEMENT sexo (#PCDATA)> <!-- Definio do elemento email --> <!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
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.
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 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
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.
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.
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:
<!-- Conecta este documento ao seu arquivo xsl --> <?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
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.
Realizando um Loop
Observe no documento as linhas 14, 15 e 16:
14: </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.
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.
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.
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.
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
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.
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...
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.
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
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.
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.
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.
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.
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.
Figura 8.14 Logicamente que no precisa estar exatamente igual. Isto ir depender das fontes que voc utilizou, cores e posicionamento na tela.
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.
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
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.
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.
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
Voc poder escolher entre aplicar em todas as pginas ou apenas na pgina selecionada.
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
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.
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.
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.
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.
145
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.
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.
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.
150
Recomendamos que voc crie uma subpasta onde dever salvar todos os arquivos do site que iremos criar.
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.
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.
154
Data atual
Clique em Inserir, Data.
Inserindo smbolos
Clique em Inserir, Caracteres especiais. Escolha um dos vrios tipos.
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.
156
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.
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.
Ser aberto o browser com uma pgina com os possveis erros e um detalhamento sobre eles. Experimente.
158
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
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
162
Siga os passos: Clique em Inserir, Camada. Clique com o boto do lado direito do mouse e escolha a opo: Gravar o caminho.
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
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.
Figura 8.41 Agora posicione o cursor abaixo da tabela gerada. Clique em Comandos, Executar o comando gravado. Uma nova tabela ser criada.
165
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.
166
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.
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
171
172 4: 5: 6: 7: 8: <%
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.
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
174
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 %>
175
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>
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.
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).
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
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
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.
184
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
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.
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.
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 %>
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.
190
12: 13: 14: 15: 16: 17: 18:
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.
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:
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.
193
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:
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.
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.
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.
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:
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
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:
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.
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
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.
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
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:
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
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: <!--#include file="dados.asp"--> 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.
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.
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.
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>
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:
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
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
O campo foto ir receber o nome da foto a ser apresentada quanto o produto for listado na tela.
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:
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: <!--#include file="dados.asp"--> <% 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:
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>
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.
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: <!--#include file="dados.asp"--> <% 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
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: <!--#include file="dados.asp"--> <% 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:
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: <!--#include file="dados.asp"--> <% 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
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:
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: <!--#include file="dados.asp"--> <% 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
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
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%">
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>
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:
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: <!--#include file="dados.asp"--> <% 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:
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: <!--#include file="dados.asp"--> <% 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:
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: <!--#include file="dados.asp"--> <% 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
239
240
33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52:
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: <!--#include file="dados.asp"--> <% 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>
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: <!--#include file="dados.asp"--> <% 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:
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: <!--#include file="dados.asp"--> <% 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.
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 } } }
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:
"
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>");
247
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
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
Sumrio
XI
Inserindo e controlando figuras ................................................................80 Interagindo com o usurio........................................................................81 Resoluo dos exerccios propostos ..............................................................82
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
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
XIV
Colocando no carrinho: carrinho.asp .......................................................208 Efetivando a compra: efetiva.asp............................................................211 Concluindo a loja ......................................................................................212