Programação_Web_Modulo I

Curso Técnico em Informática

Programação Web

Robson Braga de Andrade Presidente da Confederação Nacional da Indústria

Rafael Lucchesi Diretor do Departamento Nacional do SENAI

Regina Maria de Fátima Torres Diretora de Operações do Departamento Nacional do SENAI

Alcantaro Corrêa Presidente da Federação da Indústria do Estado de Santa Catarina

Sérgio Roberto Arruda Diretor Regional do SENAI/SC

Antônio José Carradore Diretor de Educação e Tecnologia do SENAI/SC

Marco Antônio Dociatti Diretor de Desenvolvimento Organizacional do SENAI/SC

Confederação Nacional da Indústria Serviço Nacional de Aprendizagem Industrial

Curso Técnico em Informática

Programação Web Silvio Luis de Sousa

Florianópolis/SC 2011

É proibida a reprodução total ou parcial deste material por qualquer meio ou sistema sem o prévio consentimento do editor.

Autor Silvio Luis de Sousa

Fotografias Banco de Imagens SENAI/SC http://www.sxc.hu/ http://office.microsoft.com/en-us/ images/ http://www.morguefile.com/ http://www.bancodemidia.cni.org.br/

Ficha catalográfica elaborada por Luciana Effting CRB14/937 - Biblioteca do SENAI/SC Florianópolis

S725p Sousa, Silvio Luis de Programação web / Silvio Luis de Sousa. – Florianópolis : SENAI/SC/DR, 2011. 127 p. : il. color ; 30 cm. Inclui bibliografias. 1. Programação (Computadores). 2. Sites da web - Desenvolvimento. 3. Folhas de estilo. 4. HTML (Linguagem de programação de computador). 5. PHP (Linguagem de programação de computador). I. SENAI. Departamento Regional de Santa Catarina. II. Título. CDU 004.43

SENAI/SC — Serviço Nacional de Aprendizagem Industrial Rodovia Admar Gonzaga, 2.765 – Itacorubi – Florianópolis/SC CEP: 88034-001 Fone: (48) 0800 48 12 12 www.sc.senai.br

Prefácio Você faz parte da maior instituição de educação profissional do estado. Uma rede de Educação e Tecnologia, formada por 35 unidades conectadas e estrategicamente instaladas em todas as regiões de Santa Catarina. No SENAI, o conhecimento a mais é realidade. A proximidade com as necessidades da indústria, a infraestrutura de primeira linha e as aulas teóricas, e realmente práticas, são a essência de um modelo de Educação por Competências que possibilita ao aluno adquirir conhecimentos, desenvolver habilidade e garantir seu espaço no mercado de trabalho. Com acesso livre a uma eficiente estrutura laboratorial, com o que existe de mais moderno no mundo da tecnologia, você está construindo o seu futuro profissional em uma instituição que, desde 1954, se preocupa em oferecer um modelo de educação atual e de qualidade. Estruturado com o objetivo de atualizar constantemente os métodos de ensino-aprendizagem da instituição, o Programa Educação em Movimento promove a discussão, a revisão e o aprimoramento dos processos de educação do SENAI. Buscando manter o alinhamento com as necessidades do mercado, ampliar as possibilidades do processo educacional, oferecer recursos didáticos de excelência e consolidar o modelo de Educação por Competências, em todos os seus cursos. É nesse contexto que este livro foi produzido e chega às suas mãos. Todos os materiais didáticos do SENAI Santa Catarina são produções colaborativas dos professores mais qualificados e experientes, e contam com ambiente virtual, mini-aulas e apresentações, muitas com animações, tornando a aula mais interativa e atraente. Mais de 1,6 milhões de alunos já escolheram o SENAI. Você faz parte deste universo. Seja bem-vindo e aproveite por completo a Indústria do Conhecimento.

Sumário Conteúdo Formativo Apresentação

9

Finalizando

123

11

Referências

125

12 Unidade de estudo 1 Quer Programar para Internet? 13

Seção 1 - Tecnologias de desenvolvimento para web

13

Seção 2 - Ambiente de desenvolvimento web

16

Seção 3 - Instalação do ambiente de desenvolvimento web

24 Unidade de estudo 2 Desenvolvendo Aplicações Dinâmicas para a Internet 25

Seção 1 - Abordagem inicial

25

Seção 2 - Script HTML

48

Seção 3 - Script CSS

59

Seção 4 - Linguagem de programação PHP

88 Unidade de estudo 3 Exemplo Prático

89

Seção 1 - Abordagem da aplicação

89

Seção 2 - Desenvolvimento da aplicação

121 Seção 3 - Publicação do seu web site

8

CURSOS TÉCNICOS SENAI

Conteúdo Formativo Carga horária da dedicação Carga horária: 150 horas

Competências Desenvolver aplicações para web.

Conhecimentos ▪▪ Aplicações cliente-servidor. ▪▪ Tecnologias de desenvolvimento para web. ▪▪ Requisições remotas. ▪▪ Controle de sessões. ▪▪ Arquitetura de sistemas web.

Habilidades ▪▪ Analisar e implementar as tecnologias de desenvolvimento para web. ▪▪ Utilizar os padrões de projeto em aplicações web. ▪▪ Utilizar normas de Segurança da informação na web.

Atitudes ▪▪ Organização e zelo na utilização de equipamentos. ▪▪ Foco no conteúdo trabalhado. ▪▪ Acesso a sítios relacionados ao tema trabalhado. ▪▪ Organização e limpeza dos ambientes coletivos. ▪▪ Dedicação e empenho nas atividades curriculares e extracurriculares. ▪▪ Capacidade de abstração. ▪▪ Trabalho em equipe. ▪▪ Apresentação de novas soluções para situações problemas. ▪▪ Cumprimento de prazos. ▪▪ Análise crítica de suas produções.

PROGRAMAÇÃO WEB

9

Apresentação O que acha de compreender os fundamentos de programação para web a partir do conhecimento do ambiente e seus elementos, das tecnologias de software básicas, de técnicas de programação para aperfeiçoar as rotinas de programas e como publicar seu web site? Fica aqui um convite para que compartilhe destes e outros conhecimentos na garantia de que possa iniciar sua caminhada como desenvolvedor web. O mercado de desenvolvimento para aplicações web é crescente, mas só sobrevive aquele que trabalha com qualidade e sabe que em programação, conquistar qualidade é conhecer os fundamentos das linguagens, praticar muito e estar atualizado buscando novos recursos para dinamizar suas aplicações. Desta forma está preparando-se para desenvolver habilidades como, analisar e implementar as tecnologias de desenvolvimento web a partir de padrões de projetos pré-definidos buscando implementar ao máximo normas de segurança da informação. Sua trajetória de aprendizagem será ainda mais prazerosa se os seus momentos de estudos forem regados de motivação, disciplina e autonomia. Bons estudos!

Silvio Luis de Sousa É graduado em Processamento de Dados e Sistemas de Informação. Pós-graduado em Formação docente para o Ensino Superior. Sócio proprietário da LM&SL Treinamento, Desenvolvimento e Consultoria em Informática com atuação em Joinville e região. Atua no SENAI em Joinville como instrutor de cursos de qualificação e técnicos com experiência profissional em Treinamento e Desenvolvimento de projeto de software.

PROGRAMAÇÃO WEB

11

Unidade de estudo 1 Seções de estudo Seção 1 – Tecnologias de desenvolvimento para web Seção 2 – Ambiente de desenvolvimento web Seção 3 – Instalação do ambiente de desenvolvimento web

Quer Programar para a Internet? Seção 1

Tecnologias de desenvolvimento para web Cada vez mais a Internet conquista espaços, um deles é o da programação. Graças às tecnologias desenvolvidas para a web, é notória sua evolução nesse segmento, como é observado em sites de comércio eletrônico, nos famosos CMS (Content Management System) traduzindo, Sistema Gerenciador de Conteúdo e também nas não menos famosas redes sociais, dentre outros. Tais tecnologias, conjugadas com metodologias de desenvolvimento de software, garantem aos aplicativos web, flexibilidade, escalabilidade e melhor desempenho. Nosso estudo propõe levar ao seu conhecimento tudo que lhe garanta a compreensão e possibilidade para que domine o desenvolvimento de aplicações web dentro das regras de boas práticas. É necessário compreender que existem várias tecnologias utilizadas para desenvolver aplicações para web, desde as mais elementares, e não menos importantes, as mais avançadas. Nesse contexto conhecerá sobre arquitetura cliente-servidor, linguagens de programação como HTML, CSS, Javascript, PHP, interação entre aplicação web e banco de dados MySQL.

É importante também compreender que além das tecnologias destacadas como objeto de estudo, existem várias outras, mas então porque não estudá-las também? Bom, como esta unidade curricular contempla 150 horas de estudos e o compromisso é que você aprenda a desenvolver aplicações para a Internet, então serão adotadas as tecnologias que julgamos serem as mais viáveis neste processo de aprendizagem, sendo que, uma vez que se desenvolva bem, será capaz de absorver e desenvolverse satisfatoriamente, em qualquer outra tecnologia. Você precisa ter a consciência de que está em um processo de aprendizado, então notará que em toda e qualquer rotina de programação terá que escrever os códigos, isto para que pratique e conheça ao máximo das linguagens que estará trabalhando, assim, quando fizer uso de ferramentas de produtividade, saberá customizá-la uma vez que domina o código que é gerado pelas mesmas. Inicialmente pode parecer desagradável, mas quando tiver mais experiência e se deparar com a necessidade de customizar o código gerado por uma ferramenta, perceberá a importância do assunto. O que acha de começar logo o processo? Então, vamos para a próxima sessão!

Seção 2

Ambiente de desenvolvimento web Quando se trata de desenvolver aplicações web, é importante atentar para as tecnologias referentes ao ambiente em que as aplicações serão desenvolvidas e executadas. Primeiramente você deve saber que aplicações desenvolvidas em linguagem PHP podem ser utilizadas tanto na plataforma Linux, como Windows e independente da plataforma, deve conhecer os componentes envolvidos neste ambiente. E que componentes são esses?

Os componentes envolvidos no ambiente web são:

▪▪ Sistema operacional Win-

dows ou Linux – como você já sabe um sistema operacional trata do software básico instalado em uma máquina para que possa fazer uso de outras aplicações, porém, nesta unidade curricular será priorizado o sistema operacional Windows.

PROGRAMAÇÃO WEB

13

▪▪ Servidor web Apache –

trata-se de um software que recria um ambiente para publicação de aplicações para a internet podendo, inclusive, ser utilizado localmente em seu computador permitindo que desenvolva e execute suas aplicações web sem a necessidade de estar conectado a internet. Foi desenvolvido pela Apache Software Foundation é um software de código aberto, de muitos recursos, seguro e disponibilizado livremente na internet.

SAIBA MAIS Para saber mais sobre o servidor web Apache, visite o site .

▪▪ Servidor MySQL –É um servidor de banco de dados e a exemplo do servidor Apache, de código aberto, distribuído gratuitamente na internet e podendo ser utilizado localmente.

CURSOS TÉCNICOS SENAI

Acesse .

▪▪ Navegador web – software

SAIBA MAIS Para saber mais sobre o servidor MySQL, visite o site .

▪▪ PHP - linguagem de programação dinâmica, baseada em scripts, atualmente mais utilizada para a elaboração de aplicações para internet. Também é de código aberto, possui recursos de segurança muito eficazes e suporte a orientação. Objetos que lhe conferem, atualmente, como a linguagem com inúmeras comunidades de grupos de discussões no mundo todo.

Figura 1: Estrutura básica de um ambiente web Fonte: Adaptado de Melo e Nascimento (2007, p. 30)

14

SAIBA MAIS

que permite o acesso as páginas da Internet encontradas no servidor web, existem vários navegadores a nossa disposição como. Internet Explorer. Mozilla Firefox. Ópera. Google Chrome, e outros. Agora que você conhece os componentes do ambiente de desenvolvimento e execução de aplicações web, confira na figura a seguir como funciona este ambiente, segundo Melo e Nascimento (2007, p. 30).

Perceba que a figura anterior permite visualizar todos os componentes do ambiente de desenvolvimento e execução de aplicações, como funcionam, na prática, as aplicações web e qual o papel dos componentes envolvidos. Também, a partir da figura, você pode verificar que o ambiente é dividido em 2, por um lado o cliente da aplicação que fará as solicitações ao servidor web e por outro, o servidor, que por sua vez, é o local onde as aplicações são executadas a partir da solicitação do cliente. Então podemos definir que o ambiente web é dividido em lado cliente e lado servidor, esse é um assunto a ser detalhado mais adiante em nosso estudo.

Funcionamento de uma aplicação web. 1. O usuário cliente, por meio de um navegador, faz a solicitação ao servidor web. 2. O servidor web, por sua vez, recebe essa solicitação ou requisição e de acordo com o que foi requisitado, executa uma determinada tarefa. Caso seja a requisição de um arquivo em HTML ou figura, ele consulta o sistema de arquivos, esse arquivo estando disponível, é retornado ao usuário cliente. Se a requisição for de um arquivo com extensão especial,

que não HTML ou figura como, por exemplo, PHP, esta é desviada ao seu responsável, neste caso, arquivo PHP para que possa interpretar as instruções PHP e traduzi-las em respostas HTML, para serem devolvidas ao usuário cliente. Caso seja verificada a necessidade de consulta ao banco de dados, essa também é executada e retornada ao usuário cliente. 3. O usuário cliente visualiza a página web solicitada. Agora que você já conhece os componentes e funcionamento das aplicações web em seu ambiente, é importante estudar a divisão desse ambiente, lado cliente e lado servidor, uma vez que o conceito e estrutura desses, você verá neste livro em diversos momentos.

Lado cliente/Lado servidor Você viu no tópico anterior que no contexto do ambiente web temos o lado cliente e lado servidor, mas o que caracterizam e/ou compreendem? De acordo com Melo e Nascimento (2007, p. 44) o lado cliente de uma aplicação é onde são processadas diversas formas de interação ente o usuário e o sistema. Desta forma, quando um internauta visita sua página, o meio pelo qual ele interage com ela é o navegador.

Continuando Melo e Nascimento (2007, p. 43) definem o seguinte sobre lado servidor “[...] pode ser entendido como a estação onde estão sendo executados os aplicativos aos quais os acessos são feitos. Quando você acessa um site web, uma requisição é enviada via protocolo HTTP para um servidor que então lhe envia a resposta.”

No ambiente web as linguagens de programação como: HTML, CSS, Javascript, PHP, servidor de banco de dados e web, assim como cookies e sessões são elementos que trabalham conjuntamente para que as aplicações web cumpram suas funções. Porém, alguns desses elementos são executados no lado cliente e outros no lado servidor, cada qual cumprindo sua função, mas integrados em fazer com que as solicitações do cliente sejam feitas ao servidor e este fornece sua resposta. Observe na figura a seguir as linguagens, recursos e/ou tecnologias que são executados no lado cliente e no lado servidor.

PROGRAMAÇÃO WEB

15

Figura 2: Composição lado cliente e servidor Fonte: Melo e Nascimento (2007, p. 43)

Melo e Nascimento (2007, p. 43) ainda reforçam que “Em linhas gerais podemos dizer que o navegador do cliente faz o trabalho de “ponte” entre ambos os lados, em que este envia a requisição e o servidor fornece sua resposta. ”

Agora que conhece bem sobre o ambiente de desenvolvimento e execução de aplicações web você é convidado a acompanhar os conhecimentos da próxima sessão que serão muito importantes para que possa preparar, na prática, o ambiente web. Preparado para mais este desafio?

Seção 3

Instalação do ambiente de desenvolvimento web Anteriormente você estudou que as aplicações PHP podem ser desenvolvidas e executadas tanto nas plataformas Linux ou Windows, caso queira fazer uso do Linux, deve-se instalar um ambiente LAMP, sigla que representa a junção dos nomes dos softwares que necessita instalar no ambiente, L de Linux, A de Apache ou servidor Apache, M de MySQL e P de PHP. Caso queira fazer uso do Windows instale um ambiente WAMP, sigla que também representa a junção dos nomes dos softwares que necessita instalar no ambiente, W de Windows, A de Apache ou servidor Apache, M de MySQL e P de PHP.

16

CURSOS TÉCNICOS SENAI

Você pode instalar um ambiente LAMP ou WAMP, primeiramente escolhendo o tipo de ambiente que deseja trabalhar, feita a escolha você deve fazer a instalação de 2 maneiras distintas. 4. A partir de pacotes de softwares pré-configurados, disponibilizados, gratuitamente na internet e não necessitando de nenhum tipo de configuração para a instalação do ambiente. 5. A partir da instalação manual do ambiente, iniciando pelo download dos softwares, servidor web Apache, servidor de Banco de Dados e da linguagem PHP na versão pretendida. Após o download, instalar os softwares para depois partir para os procedimentos de configuração dos servidores, linguagem de programação e do sistema operacional onde este ambiente será instalado.

As duas formas são interessantes mais trazem consigo características e aplicabilidades próprias veja.

Pacotes de software Sobre a instalação do ambiente a partir de pacotes de softwares comentam Melo e Nascimento (2007, p. 31) Existem alguns projetos para manutenção e pré-configuração de ambientes LAMP e WAMP. Na grande maioria dos casos, eles podem ser baixados gratuitamente em seus sites oficiais pela internet. A grande vantagem da instalação de um servidor por este método é em relação ao tempo demandado e a facilidade em sua execução. É a opção mais recomendada para usuários inexperientes no ambiente, [...].

Ainda fazem uma analogia com o método manual, “Ao invés de instalar e configurar cada um dos componentes envolvidos, estes pacotes oferecem ao usuário uma configuração básica pré-montada”.

E sobre as desvantagens desse método Melo e Nascimento (2007, p. 31) afirmam [...] nem sempre o usuário poderá alterar uma configuração com facilidade ou a atualização individual de um componente nem sempre será possível. Neste caso, é necessário que os responsáveis pelo projeto atualizem e disponibilizem uma nova versão do seu produto.

Existem vários pacotes de softwares bons e gratuitos na internet, confira!

▪▪ EasyPHP – disponível para a plataforma Windows contém atualmente o PHP 5, servidor web Apache 2, servidor de banco de dados MySQL 5, contém também o aplicativo phpMyAdmin 3 e Xdebug 2.

Seu site oficial é

▪▪ Vertrigo – disponível para a plataforma Windows contém os seguintes componentes, servidor web Apache 2, PHP 5, servidor de banco de dados MySQL 5, SQLite 3, Smarty 3, phpMyAdmin 3, ZendOptimizer 3 e SQLiteManager 1.

Seu site oficial é

▪▪ XAMPP – ao contrário dos anteriores, neste pacote você encontra versões disponíveis para as seguintes plataformas: Windows, Linux, Mac OS X e Solaris. Contém os seguintes componentes, PHP 5, servidor web Apache 2, MySQL 5, SQLite, phpMyAdmin.

Seu site oficial é

Instalação manual Sobre este método de instalação Melo e Nascimento (2007, p. 34) comentam Esta é certamente a forma mais flexível de instalação do servidor, uma vez que cada componente do ambiente LAMP ou WAMP é instalado e parametrizado de maneira manual e individual pelo próprio usuário.

No caso da instalação manual você terá que efetuar o download dos softwares relativos aos componentes do ambiente web, conforme você estudou na seção anterior, ou seja:

▪▪ servidor Apache, encontrado em http://httpd.apache.org; ▪▪ linguagem PHP, encontrada

em http://php.net;

▪▪ servidor MySQL, encontrado em http://mysql.org. Neste tipo de instalação existem algumas particularidades importantes a serem consideradas, elas são relacionadas aos ambientes LAMP e WAMP. O Linux possui várias distribuições como: Conectiva, Ubunto, Had Rat, Suse, Slackware dentre outros, o mesmo acontece no ambiente Windows existente nas versões XP e Windows 7 dentre outros também. Mas o que isso tem a ver com a instalação manual?

Tem tudo a ver, pois para cada plataforma existe uma série de procedimentos de instalação e configuração a serem executados até a conclusão do processo.

PROGRAMAÇÃO WEB

17

Sendo assim, se você optar pela instalação manual confira a seguir alguns links úteis que orientam tais instalações.

Ambiente LAMP ▪▪ . ▪▪ .

▪▪ .

Ambiente WAMP ▪▪ . ▪▪ . ▪▪ .

Figura 3: Estrutura da pasta VertrigoServ do pacote Vertrigo Fonte:

18

CURSOS TÉCNICOS SENAI

Preparando o nosso ambiente web Seu estudo fará uso de pacotes de software justamente pelo fato de você ainda não ter muita experiência para instalar um ambiente manual. Utilizaremos o pacote do Vertrigo, por ser um pacote bastante estável, principalmente no Windows 7 Ultimate, que é a plataforma utilizada para o seu estudo. Você estará trabalhando em um ambiente web de forma local, portanto, como procedimento inicial deve fazer o download do Vertrigo, de preferência em seu site oficial. Após o download, deve instalar, preferencialmente, na pasta Arquivos de Programas, feito isto localize a pasta VertrigoServ e acesse seu conteúdo, que apresenta a seguinte estrutura:

Vale conhecer o conteúdo de algumas das pastas encontradas nesta estrutura.

▪▪ Apache – nesta pasta você encontra outras pastas contendo os arquivos de programas do servidor web Apache, ou seja, esses programas que permitem a execução desse servidor. Aqui também encontra os arquivos ABOUT_APACHE e LICENSE respectivamente, arquivo contendo informações gerais sobre o Apache e arquivo contendo informações sobre a licença de uso do Apache.

ATENÇÃO! Evite modificar o conteúdo de quaisquer arquivos dessa pasta sem o prévio conhecimento do que está fazendo. Também não exclua nenhum arquivo desta pasta.

▪▪ Mysql – aqui você encontra

outras pastas contendo os arquivos de programas do servidor de banco de dados MySQL, ou seja, esses programas que permitem a execução desse servidor. Outra pasta é o arquivo my, contendo algumas configurações padrão do servidor Mysql como, por exemplo, em que pastas os bancos de dados criados devem ser gravados, qual a porta lógica o servidor Mysql estará utilizando dentre outras informações importantes.

ATENÇÃO! Evite modificar o conteúdo de quaisquer arquivos dessa pasta sem o prévio conhecimento do que está fazendo. Também não exclua nenhum arquivo desta pasta.

▪▪ Php – nesta pasta você tem

acesso a outras pastas contendo os arquivos de programas da linguagem PHP que permitirão que você desenvolva suas aplicações nesta linguagem. Aqui também encontra vários arquivos de configuração do PHP.

ATENÇÃO! Evite modificar o conteúdo de quaisquer arquivos desta pasta sem o prévio conhecimento do que está fazendo. Também não exclua nenhum arquivo desta pasta.

▪▪ Phpmyadmin – trata-se da

pasta contendo os arquivos de programas do utilitário que permite criar estruturas de banco de dados no servidor MySQL. Esse utilitário você já conhece, fizemos uso dele na unidade curricular de Banco de dados módulos I e II. Aqui você fará uso desse utilitário também, sempre que precisar fazer alguma tratativa com banco de dados em nossas aplicações PHP.

ATENÇÃO! Evite modificar o conteúdo de quaisquer arquivos dessa pasta sem o prévio conhecimento do que está fazendo. Também não exclua nenhum arquivo desta pasta.

▪▪ www – esta pasta é muito im-

portante, o servidor Apache vem pré-configurado para reconhecer a pasta www como aquela em que encontram-se os arquivos de programas web que devem ser executados a partir da solicitação dos clientes via browser. Isto quer dizer que todas as aplicações web que desenvolver devem ser salvas nessa página, pois caso contrário, não serão executadas pelo servidor Apache.

ATENÇÃO! Aqui você tem a liberdade de modificar e/ ou excluir as pastas e arquivos das aplicações que você criou. Deve ter percebido que existem alguns arquivos que não foram criados por você, nestes, não deve modificar nem tampouco excluir, pois tratam-se de arquivos do Vertrigo.

Para encerrar o processo de reconhecimento da estrutura da pasta VertrigoServ, você conhecerá alguns arquivos encontrados nesta pasta como.

PROGRAMAÇÃO WEB

19

▪▪ Uninstall (tipo aplicativo)

– trata-se do arquivo do programa que desinstala o pacote do Vertrigo da sua máquina. ATENÇÃO! Ao desinstalar este pacote, seus bancos de dados, encontrados em VertrigoServ/Mysql/data, como também suas aplicações encontradas em VertrigoServ/ WWW, serão excluídas, portanto, se houverem banco de dados e aplicações faça o backup destes, antes de desinstalar este pacote de sua máquina.

▪▪ Vertrigo (tipo aplicativo) – é

o arquivo do programa executável do Vertrigo, ou seja, com 2 cliques do botão esquerdo do mouse ou pressionando a tecla enter neste arquivo, estará executando o Vertrigo. Sugere-se que crie um ícone deste arquivo na área de trabalho de sua máquina.

Figura 4: Janela inicial do pacote Vertrigo

20

CURSOS TÉCNICOS SENAI

ATENÇÃO! Não exclua este arquivo.

▪▪ Vertrigo (tipo Parâmetros de configuração) - Este é o arquivo de configuração do Vertrigo com especificações de configuração dos softwares embarcados no Vertrigo, como o servidor Apache, Mysql e como o status destes servidores ao executar o Vertrigo, dentre outras configurações.

ATENÇÃO! Evite modificar o conteúdo deste arquivo sem o prévio conhecimento do que está fazendo. Evite também excluí-lo.

O assunto está muito interessante, certo? Continue atento.

Testando o ambiente web instalado Agora que já instalou o Vertrigo e também conheceu sobre sua estrutura básica, deve fazer o teste para saber se o ambiente web encontra-se pronto para ser utilizado. Como? Siga os procedimentos indicados a seguir. 1. Execute o programa do Vertrigo; Pode ser executado a partir do arquivo VertrigoServ/Vertrigo, aquele identificado com uma estrela antes de seu nome ou a partir do ícone da área de trabalho, caso o tenha criado, este também identificado por uma estrela. Para executar o programa, não custa lembrar, basta clicar 2 vezes com o botão esquerdo do mouse ou pressionar a tecla enter. Após a execução do Vertrigo, aparecerá uma janela Windows como mostra a figura a seguir.

Note que aparece, no lado esquerdo da janela, a relação dos softwares embarcados no pacote Vertrigo com suas respectivas versões, ao lado direito aparecem 3 sessões que orientam, basicamente, você no seguinte.

Tray icons São mostradas as imagens de um servidor com sinalizações em verde, vermelho, amarelo e azul, isto orienta você sobre qual o status ou estado dos servidores Apache e MySQL, no momento em que o Vertrigo é executado.

Servidores MySQL e Apache em execução.

Settings É a sessão que permite, em Program, você modificar a configuração do programa, como: status, estado inicial dos servidores, aparência da apresentação dos menus de acordo com a versão do Windows utilizada, dentre outros. Além disso, permite, em Extensions, configurar as extensões de arquivos, aceitas para o servidor Apache e linguagem PHP. Também permite configurar, em Components, os recursos do PHP, MySQL e Apache aceitos no ambiente e por último, permite, em Aliases and dirs, configurar os caminhos e diretórios para acesso às pastas de publicação de páginas, dos ícones do servidor Apache, do utilitário do Phpmyadmin e do utilitário do banco de dados Sqlitemanager.

Iniciando o Vertrigo Para efetivar a execução do Vertrigo e consequentemente a inicialização dos servidores web Apache e de banco de dados MySQL, deve clicar com o botão esquerdo do mouse, no botão “Hide this window and start Server” , localizado na base da janela do vertrigo, como mostra a figura anterior. Após o procedimento anterior, o Vertrigo entra em execução e você pode visualizar, na barra de tarefas, do desktop do Windows, um ícone com a imagem de um servidor, sinalizando o status, ou estado, dos servidores naquele momento, como mostra a figura a seguir.

Servidores MySQL e Apache parados.

Somente o servidor MySQL em execução. Figura 5: Ícone indicativo do Vertrigo em execução

Somente o servidor Apache em execução.

Documentation Clique neste link para acessar a ajuda do aplicativo, sugere-se que realmente acesse essa ajuda para que conheça mais detalhes sobre o Vertrigo.

Aparentemente o seu ambiente está pronto para poder iniciar seus trabalhos, mas só terá certeza disto testando-o, então, o que acha de partirmos agora para o teste do ambiente? Apenas como informação, você escreverá um pequeno script em PHP salvando-o no servidor Apache e para escrever as instruções desse script utilizaremos o editor de texto Notepad++. Para executar as aplicações web desenvolvidas, utilizaremos o browser Mozilla Firefox. 2. Teste o ambiente web

PROGRAMAÇÃO WEB

21

Proceda da seguinte maneira:

▪▪ execute o VertrigoSev e certifique-se que os servidores estão em

execução;

▪▪ ▪▪ ▪▪ ▪▪

acesse a pasta Arquivos de Programas/VertrigoServ/www; na pasta www, crie uma pasta com o nome de testeambiente; abra o seu editor de programas; escreva o seguinte script:

phpinfo();

▪▪ Salve esse script, com o nome de testeambiente.php, na pasta Programas/VertrigoServ/WWW /testeambiente/; DICA Lembre-se que a pasta www é a pasta que o servidor web Apache reconhece as aplicações web que ele deve executar e entregar ao cliente browser.

▪▪ agora, abra o browser e solicite ao servidor Apache, a página web,

criada por você, a partir do seguinte endereço:

Figura 6: Página web contendo a configuração do seu ambiente web

22



CURSOS TÉCNICOS SENAI

DICA Em caso de algum problema, certifique-se de que o servidor web Apache está iniciado, se sim, verifique se cometeu algum erro ortográfico no endereço digitado, ou equivocou-se no nome da pasta ou arquivo, se tudo estiver ok e mesmo assim o problema persistir, troque o endereço ip 127.0.0.1 por localhost.

Se tudo correu bem, receberá como retorno do servidor Apache, uma página web, contendo todas as informações da configuração do seu ambiente web instalado, inclusive com as informações dos componentes desse ambiente, servidor web Apache, PHP, servidor MySQL, como na figura a seguir.

3. Finalizando o VertrigoServ Para finalizar o VertrigoServ faça o seguinte.

▪▪ Clique, com o botão esquerdo do mouse, no ícone do VertrigoServ, localizado na barra de tarefa do seu desktop Windows. ▪▪ Após a execução do procedimento anterior, você verá um menu,

escolha o comando shutdown and exit, este comando desconecta o servidor e sai do VertrigoServ.

A partir dessa ação você não conta mais com o ambiente web inicializado, ou seja, qualquer tentativa de executar suas aplicações web não será bem sucedida, para isto deve executar novamente o Vertrigo. Assim, você chega ao fim desta seção de estudo e com a certeza de que contribuímos bastante para o seu conhecimento em ambiente de aplicações web. Agora que já conhece o básico necessário para iniciar o estudo do desenvolvimento de aplicações para web, a partir da próxima unidade você conhecerá as tecnologias referentes a linguagens de programação, que permitirão que você desenvolva web sites dinâmicos, softwares aplicativos e outros para a internet. Vamos juntos para mais um percurso de aprendizagem?

Figura 7: Apresentação do menu principal do Vertrigo

PROGRAMAÇÃO WEB

23

Unidade de estudo 2 Seções de estudo Seção 1 – Abordagem inicial Seção 2 – Script HTML Seção 3 – Script CSS Seção 4 – Linguagem de programação PHP

Desenvolvendo Aplicações Dinâmicas para a Internet Seção 1

Abordagem inicial A partir dos conhecimentos propostos para esta unidade, você terá condições de desenvolver scripts web para o desenvolvimento de páginas dinâmicas para a Internet, bem como softwares aplicativos nos padrões web. A unidade propõe levar a você os conhecimentos sobre as tecnologias de programação como: HTML (importante na apresentação final das páginas web), CSS (importante na implementação de estilos nas páginas web), PHP (linguagem dinâmica que auxilia o HTML no acesso a arquivos), validação e tratamentos de campos de formulários, acesso a banco de dados, utilização de cookies e sessões, dentre outras importantes recursos. É importante que no decorrer dos seus estudos você pratique todos os comandos, instruções e rotinas apresentadas, pois para que possa aprender para valer nada melhor do que praticar. Lembre-se: desenvolva as atividades propostas para adquirir volume e ritmo de trabalho em programação. Para a prática dos conhecimentos desta unidade utilize:

▪▪ Navegador – Mozilla Firefox e Internet Explorer. ▪▪ Editor de programas – Notepad++. ▪▪ Pacote VertrigoServ – Servidor web Apache, Servidor de Banco de

dados Mysql, linguagem de programação PHP e utilitário PHPMyAdmin. Agora que já tem conhecimento sobre a temática desta unidade, é hora de conhecer tudo sobre HTML. Siga, então, para a próxima seção.

Seção 2

Script HTML Esta seção propõe o conhecimento básico da HTML a partir de sua definição, estrutura básica, comandos e recursos, que permitam juntamente com as demais tecnologias a ser estudado, o desenvolvimento de aplicações web dinâmicas. Relembrando que para a prática você precisará de um editor de programas e um navegador internet, respectivamente, o Notepad++, Mozilla Firefox e testes também no Internet Explorer.

HTML (HyperText Markup Language) Traduzindo, não ao pé da letra, mas na sua aplicação, o significado de HTML pode ser entendido como, linguagem de formatação que permite a elaboração de web sites com hiper-textos. Ao contrário do que muitos se referem HTML não é uma linguagem de programação, mas sim, uma linguagem de formatação, que interpretada pelo navegador internet, reproduz uma página web. Isto quer dizer que enquanto estiver escrevendo seus scripts em HTML você estará formatando uma página web que será visualizada por meio de um navegador da internet. Confira a seguir a estrutura básica de um script HTML.

PROGRAMAÇÃO WEB

25

Estrutura básica de um script HTML Mas, antes da estrutura, é importante que você conheça a definição de TAG, já que este elemento é à base de tudo nesta linguagem.

TAG Chamada por alguns como marca e por outros de rótulo, você a utilizará em seu script para formatar sua aplicação e também a partir dela que aplicará os comandos de formatação HTML que serão interpretados pelo browser (navegador internet) para a reprodução de páginas web.

Sua sintaxe ou forma de escrita é simples, começa com o símbolo de “”, como exemplo, , na prática, como já comentado, representam os comandos de formatação que serão interpretados pelos navegadores.

É muito comum você ouvir programadores web referir-se a tags HTML como comandos HTML, na realidade você aplica os comandos HTML a partir de tags, mas isto não é significativo, o que interessa é saber utilizá-las da melhor maneira para alcançar seus objetivos.

Linha de comentário HTML Outro recurso importante é o de linha de comentário. Uma linha de comentário serve para documentar as instruções do programa que o programador escreve, no sentido de esclarecer e/ou organizar o script, estas não são interpretadas e nem tampouco geram nenhum resultado, realmente apenas servem para documentação. Exemplificando, suponha que você deseja elaborar uma instrução HTML e queira documentar o que esta faz, com o propósito de que, se em algum momento, houver a necessidade de se efetuar a manutenção no script do programa, saber do que se trata a instrução:

Note que no exemplo você encontra primeiramente a linha de comentário que explica a função da instrução, logo abaixo. Sintaxe de escrita A linha de comentário em HTML inicia com o símbolo .

Cor em HTML Não serão poucos os momentos em que você precisará atribuir cores em sua página HTML, seja para atribuir cor ao texto, ao fundo da página, tabelas e assim por diante. Sendo assim, é importante saber que as cores que você utiliza podem ser utilizadas em 2 formatos:

▪▪ Básico

É aquele em que você utiliza a cor fazendo referência ao seu nome em inglês, por exemplo, suponha que deseja escrever em sua página a palavra HTML em vermelho, ficaria assim: HTML

Existem 2 tipos de tags, as de abertura e as de fechamento , o script que você escrever entre elas, é o que será interpretado e processado pelo navegador internet.

26

CURSOS TÉCNICOS SENAI

A instrução aplica ao texto HTML a cor vermelha e para finalizar o comando é utilizada a tag , não se preocupe agora com isto, você verá em detalhes logo adiante. Repare na palavra red no comando, trata-se da palavra, em inglês, para a cor vermelha, isto significa que está aplicando a cor de fonte vermelha no texto. Como resultado dessa instrução em sua página web você teria HTML (manter em vermelho).

▪▪ Código RGB (Red Green Blue) É o formato em que você utiliza um código hexadecimal do padrão RGB (Red Green Blue) para a formatação HTML, por exemplo, vamos aplicar a cor vermelha novamente só que em código hexadecimal, agora, ficaria assim: HTML

Perceba que a cor agora é atribuída a partir de um código hexadecimal, neste caso, para a cor vermelha e que como resultado você obteria o mesmo do exemplo anterior, ou seja, HTML.

Comando -

▪▪ Definição Acrescenta um título para a sua página web, mais precisamente, na barra de título do browser. ▪▪ Sintaxe de uso

DICA Para ter acesso à tabela de cores hexadecimal HTML pode acessar o site , por exemplo.

Agora sim chegou o momento de conhecer a estrutura script HTML

Estrutura script HTML



Cabeçalho do documento HTML

Aqui deve informar tudo o que quiser que apareça em sua página web.



Este texto será apresentado na barra de título do seu browser

▪▪ Comentários Este comando deve ser escrito dentro da tag , na sua estrutura HTML. Observe que a sintaxe de escrita deste comando inicia com a abertura da tag , seguida do título que deseja mostrar na barra de título do browser e, após o título, o encerramento com a tag . Corpo do documento HTML Para a execução dos comandos é interessante que seja feita localmente e não no servidor web, isto porque trata-se do estudo da HTML, que por sua vez, roda no lado cliente dispensando o uso do servidor web neste caso. Sugiro que crie sua pasta no drive local de sua máquina e nesta, você armazene, em pastas específicas as aplicações com as práticas dos comandos repassados.

PROGRAMAÇÃO WEB

27

Comandos para formatação do texto Comando -

▪▪ Definição

Centraliza, na página, tudo o que estiver escrito em sua área de abrangência.

▪▪ Sintaxe de uso Este texto será centralizado na página web

▪▪ Comentários

Veja que este comando deve ser escrito dentro da tag , na sua estrutura HTML. Veja que a sintaxe de escrita deste comando inicia com a abertura da tag , seguida do que você deseja que seja centralizado no corpo da página web e logo após, o encerramento com a tag .

característica de alguns comandos HTML. 3. Importante também destacar que se você omitir o atributo face (nome da fonte), a fonte aplicada será aquela padrão da máquina cliente em que a página é executada, normalmente Times New Roman. O que também acontece com o tamanho e cor da fonte, neste caso será adotado o tamanho e cor da fonte padronizados da máquina cliente, ou seja, não teria motivo para utilizar este comando. 4. Este comando é finalizado com a utilização da tag de encerramento . 5. Observe a utilização do código hexadecimal #B22222 para a cor da fonte, neste caso utilizamos a cor de nome Firebrick.

Comando – c - Comando –

▪▪ Definição Permite a formatação do texto de sua página, possibilitando identificar: ▪▪ nome da fonte = atributo face; ▪▪ tamanho da fonte = atributo size; ▪▪ cor da fonte = atributo color; ▪▪ Sintaxe de uso

▪▪ Definição A letra p na tag é a abreviatura para “paragraph” (parágrafo) que é exatamente o que o texto é um texto parágrafo. Deve aplicar somente quando o texto da página tratar-se de um parágrafo, do contrário, não há necessidade de uso deste comando.

Texto formatado

▪▪ Sintaxe de uso

▪▪ Comentários 1. Este comando deve ser escrito dentro da tag , na sua estrutura HTML. 2. Uma particularidade importante é a de que este comando necessita de alguns atributos, como face (nome da fonte), size (tamanho da fonte) e color (cor da fonte), para a formatação correta. Note que isto é uma 28

CURSOS TÉCNICOS SENAI

Exemplo de um texto escrito na página ...

▪▪ Comentários Este comando deve ser escrito dentro da tag , na sua estrutura HTML. Perceba também que a sintaxe de escrita deste comando inicia com a abertura da tag , seguida do parágrafo, logo após, o encerramento com a tag .

Este é um exemplo de quebra de linha ao final de um texto. Esta linha será impressa abaixo da anterior após uma linha em branco.

Comando –

▪▪ Como resultado Este é um exemplo de quebra de linha ao final de um texto.

▪▪ Definição

Esta linha será impressa abaixo da anterior.

Permite que você determine uma quebra de linha na sua página web, podendo esta ocorrer no meio de um texto, como por exemplo:

Observe que entre as duas linhas foi implementado também um comando que faz com que uma linha em branco seja impressa entre elas.

▪▪ Sintaxe de uso

Este é um exemplo dequebra de linha em HTML no meio de um texto.

▪▪ Comentários Este comando deve ser escrito dentro da tag , na sua estrutura HTML. A sintaxe de escrita deste comando é um pouco diferenciado dos comandos anteriores, a indicação de abertura e fechamento do comando é feito na própria tag . Isto acontece com outros comandos HTML também. Comando -

▪▪ Como resultado Este é um exemplo de quebra de linha em HTML no meio de um texto. Permite também a quebra de linha ao final do texto e também entrelinhas do texto, como por exemplo:

▪▪ Definição

A letra b na tag é a abreviatura para “bold” (negrito). Deve aplicar quando você deseja formatar um texto ou palavra em negrito.

▪▪ Sintaxe de uso Estou em negrito Acessar o GOOGLE

Tabela em HTML Uma tabela é um recurso muito utilizado em editores de textos, planilhas eletrônicas, bem como, páginas web para demonstrar, de forma organizada e clara, informações importantes sobre um determinado assunto.

Tabela 1: Exemplo de tabela HTML

Linguagens para aplicação web Nome

Definição

Aplicação

HTML (Hiper text markup language)

Linguagem de formatação que permite a elaboração de web sites com hipertextos.

Responsável pela reprodução de uma página web.

CSS (Cascading style sheets)

Linguagem de estilo utilizada para definir apresentação das páginas HTML.

Responsável por separar a formatação e o conteúdo de uma página web, cabendo a esta a formatação.

Javascript

Linguagem de programação que permite a implementação de estruturas lógicas, funções,efeitos e animações em páginas web.

Responsável por oferecer suporte a HTML, principalmente em estruturas lógicas de programação no lado cliente.

Linguagem de programação que permite a implementação de estruturas lógicas, funções, acesso a arquivos e banco de dados em páginas web.

Responsável por oferecer suporte a HTML, principalmente em estruturas lógicas de programação, acesso a arquivos e banco de dados, no lado servidor.

PHP (Personal hypertext Processor)

Estrutura de uma tabela HTML

TABELAS HTML Coluna1, escreve o conteúdo da coluna, no caso, Coluna1, e após encerra a coluna com .--> Coluna2, escreve o conteúdo da coluna, no caso, Coluna2, e após encerra a coluna com .--> > Coluna1, escreve o conteúdo da coluna, no caso, Coluna1, e após encerra a coluna com .--> Coluna2, escreve o conteúdo da coluna, no caso, Coluna2, e após encerra a coluna com .--> >

Se você implementar e executar o script anterior obterá o seguinte resultado:

Figura 11: Exemplo da estrutura da tabela HTML implementada

Uma tabela 2 x 2, ou seja, uma tabela com 2 linhas e 2 colunas. A seguir confira como configura tabela Você pode configurar a tabela para, por exemplo, receber uma cor de fundo, para isso basta fazer o seguinte:

PROGRAMAÇÃO WEB

37



Figura 12: Exemplo de tabela HTML com cor de fundo

Observe que foi implementada na tag o atributo “style”, estilo = cor de fundo, para a implementação da cor de fundo na tabela.

Figura 14: Exemplo de tabela HTML com espaçamento entre colunas

Inserindo bordas na tabela

Foi implementada na tag o atributo “cellspacing”, espaço entre células, com o espaçamento de 5 pixels.

Também pode configurar borda com a espessura desejada, para isso, basta fazer o seguinte:

Mais alguns recursos



Veja que foi implementada na tag o atributo “border”, borda, com a espessura de 1 pixel.

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

Figura 13: Exemplo de tabela HTML sem borda

Espaçamento entre colunas Caso queira determinar um espaçamento entre as colunas (células) da tabela deve fazer o seguinte:

38

CURSOS TÉCNICOS SENAI

MAIS RECURSOS TABELAS COLUNAS MESCLADAS Coluna1 Coluna2 Coluna1 Coluna2

Se você implementar e executar o script anterior obterá o seguinte resultado:

DICA Você pode formatar fonte também de outras maneiras, caso queira aprofundar este estudo, baixe na internet tutoriais básicos sobre HTML. Figura 16: Exemplo de tabela HTML contendo links com imagens

Figura 15: Exemplo de tabela HTML com colunas mescladas e cores de fonte

Centralizando Para centralizar uma tabela basta inserir a tag antes da tag , mas não esqueça de finalizá-la também, veja no script anterior.

Formatando fonte Se desejar atribuir um nome, tamanho ou cor da fonte para a sua tabela, basta também inserir a tag, com seus respectivos atributos, antes da tag , lembrando que esse atuará para toda a tabela ou para aquelas colunas que não houver configurações de fonte, por exemplo: Observe no script anterior, que configuramos a fonte verdana para os textos da tabela, porém, este só terá efeito para as colunas 1 e 2 da linha 3, porque estas não foram configuradas com outra fonte, o mesmo não acontece para a coluna da linha 1 e colunas 1 e 2 da linha 2, pois estas foram configuradas para outras fontes, respectivamente Calibri e Arial.

Mesclando células Em algumas situações é interessante intitular a tabela de forma que esteja integrada à mesma, conforme você pôde ver na figura anterior da nossa tabela modelo, para que isso seja possível proceda da seguinte forma. Primeiramente você deve antever quantas colunas, por linha, que utilizará em sua tabela, pois sem esta informação não conseguirá mesclar células. Sabendo a quantidade total de colunas por linha, da sua tabela deve iniciar o script de sua tabela normalmente e criar a coluna que deseja mesclar, confira na figura a seguir. Reparem no script o atributo “colspan” responsável por mesclar as células na tabela, a ele foi atribuído o valor 2, que significa o número de células (colunas) que deve mesclar, que por sua vez, é o número de células (colunas) por linha que é utilizado na tabela em questão. É importante atentar para o atributo “align” também na coluna mesclada, isto é para alinhar o conteúdo da célula, neste caso, ao centro. O alinhamento pode ser feito para qualquer outra coluna, seja ela mesclada ou não.

Links com imagens em tabela Para inserir um link com imagem em uma célula (coluna), de uma tabela basta utilizar os comandos de link e inserção de imagens, conjuntamente, dentro da coluna que desejar. Em nosso exemplo tivemos que inserir uma 3ª coluna nas 2 linhas da tabela e respectivamente nestas. Para a coluna com a imagem link do lápis:

Para a coluna com a imagem link do X:

No exemplo as imagens encontram-se na mesma pasta do programa onde foi escrito o script do link imagem.

DICA Caso queira retirar aquela borda de link da imagem, basta fazer o seguinte: Insira o atributo border na tag e atribua o valor 0.

PROGRAMAÇÃO WEB

39

Formulário em HTML É mais um dos recursos impor-tantes no universo da construção de aplicações web, seja permitindo o envio de dados por e-mail ou auxiliando no cadastramento de usuários em sites ou mesmo auxiliando no armazenamento de informações em banco de dados, assim como em outras atividades.

▪▪ type (tipo) – identifica que o

tipo do componente. Deve ser do tipo text (texto);

▪▪ name – identifica o nome do componente text no formulário; ▪▪ maxlength – número máximo de caracteres que pode ser digitado em seu interior; ▪▪ size – número que representa a largura do componente dada em pixels.

DICA

Figura 17: Exemplo de formulário

Componentes básicos Importante que antes de partir para a construção do formulário conheça alguns dos seus componentes básicos: Label ou rótulo Nome: Identifica no formulário o que o usuário deve informar em um respectivo campo do formulário.

▪▪ Sintaxe de uso

Nome:

Text Este componente permite uma entrada de dados na forma de texto em uma única linha. Para implementar esse componente no formulário deve utilizar o comando: - significa entrada.

Neste comando são utilizados os seguintes atributos:

40

CURSOS TÉCNICOS SENAI

Para determinar a largura do componente text, verifique o tamanho máximo de caracteres registrado em maxlength, acrescente para size 15 ou 20 pixels. Exemplo se em maxlength você registrou 50, atribua para size 65 ou 70, desta forma você está garantindo que caso o usuário preencha todas as posições estas serão visualizadas pelo usuário do formulário.

▪▪ Sintaxe de uso



Select Este componente permite que a informação entrada para o formulário seja feita por meio da seleção de opções registrada em uma lista. Para implementar esse componente no formulário deve utilizar o comando

- seleção

Neste comando estamos utilizando o seguinte atributo

▪▪ name – identifica o nome do componente select no formulário. ▪▪ Dentro do comando devem ser implementadas as opções

do select a partir do comando : ---Escolha o sexo--- Feminino Masculino

▪▪ No comando foi utilizado o atributo “value”, este

atributo serve para determinar o valor da opção selecionada, ou seja, se escolher o sexo como Feminino, o valor de entrada no formulário é feminino e assim por diante.

▪▪ Sintaxe de uso ---Escolha o sexo--- Feminino Masculino

Radio Buttom (Botão de rádio) Não Este componente permite a entrada de dados no formulário clicando no botão de rádio, vias de regra existe mais de um botão de rádio como opção, mas somente um dentre vários é que pode ser escolhido, ou seja, nesse tipo de componente somente uma, das várias opções, é que pode ser escolhida. Para implementar esse componente no formulário deve utilizar o comando - significa entrada.

Neste comando são utilizados os seguintes atributos:

▪▪ type (tipo) – identifica que o tipo do componente. Deve ser do

tipo rádio;

Aqui cabe uma observação importante, o nome dos botões e rádio deve ser o mesmo para aquela entrada de dados do formulário desejado. Por exemplo, se deseja fazer uma entrada de dados no formulário para informar se tem filhos ou não, vai utilizar 2 botões de rádio, como no nosso exemplo, isto significa que na propriedade name destes, os valores com os nomes devem ser os mesmos, isto porque, assim no momento em que o formulário for utilizado apenas um dos botões poderá ser escolhido, caso contrário, se atribuir nomes diferentes aos componentes todos os botões de rádio poderão ser escolhidos, o que foge as características do componente.

▪▪ Sintaxe de uso Sim Não Reparem que aqui estamos implementando no formulário 2 componentes do tipo rádio e os dois com o mesmo nome.

▪▪ name – identifica o nome do componente no formulário; ▪▪ value – determina o valor das opções dos botões de rádio, por

exemplo, se o usuário escolher o botão de rádio Sim, o valor deste campo passa a ser aquele atribuído por este atributo para este componente, no caso foi atribuído Sim, do contrário o valor do campo passa a ser aquele atribuído para o atributo value do componente Não, ou seja, o valor atribuído neste caso foi Não. Confira a seguir.

PROGRAMAÇÃO WEB

41

CheckBox (Caixa de seleção) Caminhada Este componente permite a entrada de dados no formulário, a partir do clique do mouse na caixa de seleção, a exemplo do botão de rádio, devem existir várias caixas de seleção como opção para o usuário, mas ao contrário do botão de rádio, mais de uma opção pode ser escolhida. Para implementar esse componente no formulário deve utilizar o comando - significa entrada.

Neste comando são utilizados os seguintes atributos:

▪▪ type – tipo, identifica que o tipo do componente deve ser do tipo

▪▪ name – identifica o nome do

componente no formulário;

▪▪ cols – identifica a quantidade de colunas que deseja que o componente contenha;

▪▪ rows – identifica a quantidade de linhas que deseja que o componente contenha; Esse componente não aceita o atributo value, caso queira inserir, em tempo de programação, um valor nesse componente deve fazer o seguinte:

checkbox;

▪▪ name – identifica o nome do componente no formulário; ▪▪ value – determina o valor das opções das caixas de seleção, por

exemplo, se o usuário escolher a caixa de seleção Caminhada, o valor deste campo passa a ser aquele atribuído por este atributo para este componente, no caso foi atribuído Caminhada, e assim por diante. Apesar de serem várias caixas de seleção juntas para que o usuário faça sua entrada de dados no formulário, trata-se de componentes diferentes um do outro, cada checkbox tem o seu próprio nome e valor.

▪▪ Sintaxe de uso Fuma Caminhada Leitura

TextArea

Digite aqui seu texto

O texto é escrito entre o comando que inicia e termina o componente textarea, isto permite inserir, previamente, um texto no componente.

Botão Submit (enviar) Este componente é responsável por enviar os dados do formulário ao destino que lhe for orientado. Para implementar esse componente no formulário utilize o comando - significa entrada.

Este componente permite uma entrada de dados na forma de texto em várias linhas. Para implementar esse componente no formulário deve utilizar o comando

Nesse comando são utilizados os seguintes atributos:

▪▪ type – tipo, identifica que o

- significa área de texto.

tipo do componente deve ser do tipo submit (enviar);

Neste comando são utilizados os seguintes atributos:

▪▪ name – identifica o nome do

42

CURSOS TÉCNICOS SENAI

componente no formulário;

▪▪ value – determina o valor do

botão, ou seja, o que é armazenado quando este é clicado e também, ao contrário dos demais que utilizam este atributo, exibe no botão o valor atribuído a esse atributo, exemplo, a imagem do botão acima aparece com o texto Enviar, é porque é esta palavra que encontra-se no atributo value desse botão.

DICA Os recursos aqui apresentados são aqueles considerados como básicos necessários para a construção de suas aplicações web. Caso queira aprofundar-se em outros recursos HTML, baixe tutoriais HTML para conhecer mais como, por exemplo, em: .

Está preparado para prosseguir sua viagem de conhecimento? Muitos caminhos ainda estão por vir.

▪▪ Sintaxe de uso

Botão Reset (limpar) Este componente é responsável em limpar os conteúdos dos campos do formulário, apagar mesmo. Para implementar esse componente no formulário deve utilizar o comando

Exemplo prático da etapa 2 Para praticar os recursos apresentados, resgate a primeira implementação de sua aplicação, esclarecendo que a estrutura de pasta considerada na aplicação é a seguinte:

- significa entrada.

Nesse comando são utilizados os seguintes atributos:

▪▪ type – tipo, identifica que o

tipo do componente deve ser do tipo reset (reiniciar);

▪▪ name – identifica o nome do componente no formulário; ▪▪ value – determina o valor do

botão, ou seja, o que é armazenado quando esse é clicado a imagem do botão acima aparece com o texto Enviar, é porque é esta palavra que encontra-se no atributo value desse botão.

▪▪ Sintaxe de uso

Figura 18: Estrutura de pastas aplicativo pratica1html

Para esta implementação, insira na pasta imagens um arquivo chamado alias_path.gif nas especificações de 16 pixels de largura por 11 pixels de altura, que refere-se a uma imagem de uma seta que será implementada antes dos links conforme script a seguir. Inicialmente abra o arquivo index.html localizado na pasta pratica1html e implemente os scripts conforme orientações. Como primeira ação, prepare o título da página para a utilização de um link interno, para isso faça o seguinte no script:

PRÁTICA HTML - PARTE 1

PROGRAMAÇÃO WEB

43

As demais ações para o link interno encontrará no script a seguir. Agora, localize no script a tag e a tag, entre estas tags é que deverá inserir os scripts escritos a seguir:

COMENTÁRIOS a linguagem HTML fornece alguns recursos como inserção de imagens e links, bem como, a aplicação de tabelas e formulários, possibilitando assim a construção de páginas para a internet com organização, clareza e navegabilidade. Vale lembrar que nem todos os comandos, bem como, recursos estão contemplados neste estudo, a preocupação maior é com o fundamento da linguagem, para que possa desenvolver as atividades, futuramente propostas. LINKS ÚTEIS   Tutorial HTML   Resumo cores HTML   Cadastre-se Ir para o topo

44

CURSOS TÉCNICOS SENAI

A página index.html está pronta, mas você implementou 2 links Resumo cores HTML e Cadastre-se, estes devem acessar, respectivamente, páginas que ainda não existem, portanto, se clicar em um destes links uma mensagem dizendo que as páginas não foram encontradas será enviada. Sendo assim, agora execute a página index.html para ver se está tudo OK, caso tenha algum problema, corrija, se estiver tudo correto teste os links externo (Tutorial HTML) e interno (Ir para o topo), a execução dos links Resumo cores HTML e Cadastre-se ainda não são possíveis, temos que avançar um pouco mais. Continuando, vamos agora implementar os scripts necessários para o acesso dos links Resumo cores HTML e Cadastre-se, primeiramente prepare o script da página que mostrará o Resumo cores HTML, para isso atente para o seguinte: 1. inicie um novo documento no seu editor de programas; 2. este script deve ser salvo na pasta pratica1html, juntamente com o arquivo index.html, com o nome de tabcores.html. A seguir o script desta página:

Aplicativo web - prática 1 HTML - RESUMO CORES HTML TABELA RESUMO DE CORES HTML As cores em HTML, como já estudou, podem ser atribuídas em várias situações em um página web, seja como fundo da página, tabela ou formulário, como também nos textos. Estas podem ser informadas de 2 maneiras a saber. ATRIBUIR AS CORES Cor Pelo nome Pelo código hexadecimal Branca White #FFFFFF Preta Black #000000

PROGRAMAÇÃO WEB

45

Azul Blue #0000FF Amarelo Yellow #FFFF00 Verde Verde #2E8B57 Vermelha Red #FF0000 Cinza Gray #696969 Dica Dê preferência para a atribuição das cores em código hexadecimal, você dispõe de muito mais opções, para isso consulte a tabelas de cores em http://www.mxstudio. com.br/Conteudos/Dreamweaver/Cores.htm. Principal  Cadastre-se

Se você já implementou o script anterior, o salvou, agora execute a página index.html para ver se está tudo OK, se constatar algum erro, faça a correção e quando não houver mais erros, teste o link Resumo cores HTML, verifique se este o desvia para a página Tabela Resumo de Cores HTML, se sim, está funcionando.

46

CURSOS TÉCNICOS SENAI

Ainda não encerrou a aplicação, já implementou o script da página Resumo cores HTML, agora falta implementar o script necessário para o acesso do link Cadastre-se, atente para o seguinte: 1. inicie um novo documento no seu editor de programas;

2. este script deve ser salvo na pasta pratica1html, juntamente com o arquivo index.html, com o nome de cadastro.html. A seguir o script desta página:

Aplicativo web - prática 1 HTML - CADASTRE-SE FORMULÁRIO EM HTML     Nome : Endereço : Sexo : ---Escolha o sexo--- Feminino Masculino Filhos : Sim    Não Hábitos : Fuma    Caminhada  Leitura Observação :    

PROGRAMAÇÃO WEB

47

Principal  Resumo cores html

Após implementar o script anterior, salve-o, agora execute a página index. html para ver se está tudo OK, se constatar algum erro, faça a correção e quando não houver mais erros, teste o link Cadastre-se, verifique se este o desvia para a página Formulário em HTML, se sim, está funcionando. Agora sim, a aplicação proposta está encerrada. Nesta seção você conheceu os fundamentos da linguagem HTML e por consequência deu um grande passo para a construção de aplicações web e web sites dinâmicos. A HTML por si só não permite a construção de aplicações dinâmicas, para isto, é necessário a aplicação de outras linguagens, então prossiga para a próxima seção e conheça também sobre CSS, este assunto é muito importante para o seu desenvolvimento.

CSS X HTML Como você já sabe a HTML é uma linguagem de formatação, a partir do seu uso consegue estruturar e marcar textos, cabeçalhos, parágrafos, links, botões, imagens, formulários e outros, já a CSS permite a padronização visual destes elementos na página como cores, estilos de linhas, bordas, posicionamento de textos, layout, assim por diante. Você poderá verificar no decorrer desta seção, que existe uma relação muito forte entre as duas linguagens, verá que quando aplicar estilos CSS, estes trabalham, totalmente na padronização visual das páginas HTML a partir de seus elementos como, o corpo da página, links, parágrafos, tabelas, formulários e outros. Com isto a responsabilidade do padrão visual da página é retirada da HTML e passada para a CSS restando a HTML a responsabilidade sobre a estrutura e conteúdo das páginas web.

Seção 3 Script CSS

É importante frisar que neste momento resgatar os conhecimentos sobre os fundamentos da HTML para que possa compreender e trabalhar os conhecimentos sobre CSS. Agora é hora de conhecer CSS, sua definição, relação com a HTML, estrutura básica de uso, elementos básicos de uso e aplicação prática.

CSS (Cascading Style Sheet) A exemplo da HTML, não se trata de uma linguagem de programação, pode-se tratar como linguagem, mas também não é linguagem de formatação, esta é o HTML, mas então, é linguagem do que? Linguagem que permite a aplicação de estilos em páginas web, isto mesmo, linguagem de estilos.

48

CURSOS TÉCNICOS SENAI

Com esta parceria entre a CSS e HTML suas aplicações ficam mais organizadas, leves e fáceis de aplicar manutenção, pois os scripts encontram-se organizados em arquivos diferentes e em tamanho reduzidos.

Estrutura básica CSS A melhor maneira de se compreender a relação CSS X HTML é praticando não acha? É o que fará a partir de agora, só precisa preparar o ambiente para isto, então, antes de prosseguir faça o seguinte: Crie, em drive local, uma pasta chamada, pratica1css, agora crie uma pasta, chamada css dentro da pasta pratica1css e em seguida abra o seu editor de programas, o Notepad++e aguarde novas orientações.

Sintaxe e componentes CSS A estrutura básica de uma estrutura CSS segue a seguinte sintaxe:

elemento { atributo1 : valor; atributo2 : valor; atributo3 : valor; }

Conhecendo os componentes envolvidos.

▪▪ Elemento - define o elemento ao qual o estilo será aplicado, podendo este ser uma marca (tag) HTML, sem os sinais de maior e menor, este é também conhecido como seletor.

Neste script CSS estamos determinando que todas as páginas HTML que contiverem um corpo devem seguir a configuração de:

▪▪ margem zero; ▪▪ família de fonte Verdana ou

Arial ou Helvética ou sans-serif;

▪▪ ▪▪ ▪▪ ▪▪

tamanho da fonte 12; cor de fundo cinza; texto é alinhado ao centro;

cor de primeiro plano branca. Neste caso, isto atingirá o texto. Isto mesmo! Todas as páginas HTML com a tag utilizarão essa formatação. Salve o script na pasta css com o nome de layout.css. Cuidado, certifique-se que salvou este arquivo corretamente, principalmente com a extensão “css”, pois do contrário não terá sucesso. Agora, abra um novo documento no seu editor de programas e escreva o seguinte script HTML:

▪▪ Atributo - são as características ou propriedades que deseja definir

ao elemento como, por exemplo, font-size (tamanho da fonte), cuidado, deve ser um atributo válido CSS.

▪▪ Valor do atributo - são os valores válidos atribuídos aos atributos

do elemento CSS. Cuidado esses valores devem ser válidos para o atributo utilizado. Faça o seguinte, abra um novo documento no seu editor de programas e escreva o script a seguir:

body{ /*Estilo para o corpo de uma página HTML*/ margin : 0px ; /*Tamanho de todas as 4 margens da página */ font-family : Verdana, Arial, Helvetica, sans-serif ; /*Tipo de fonte*/ font-size : 12px ; /*Tamanho da fonte atribuído em pixels*/ background-color : #FEE4AB ; /*Cor de fundo ou transparência*/ text-align : center ; /*Alinhamento do texto*/ color : #FFFFFF;/*Cor de primeiro plano*/ }

Aplicando CSS - prática 1 TESTE ARQUIVO DE CONFIGURAÇÃO CSS 1

PROGRAMAÇÃO WEB

49

Salve este script na pasta pratica1css com o nome de index.html. Ao executar esta página, terá como resultado uma página com o fundo na cor cinza, zero de margem esquerda, direita, superior e inferior, o texto aparece alinhado ao centro, na fonte Verdana e cor branca.

Figura 19: Resultado página configurada com CSS externo

Percebeu que ao aplicar uma configuração CSS para um elemento HTML está determinando uma regra ou padrão para os referidos elementos da sua aplicação web?

Por isso você tem que conhecer muito bem o HTML como o CSS para que possa fazer uso desses recursos dentro das regras de boas práticas.

Modalidade de implementação CSS pode ser aplicado de 3 modalidades diferentes, confira! 1. Externo – como mostra o exemplo anterior, observe o script com as configurações CSS este está em um arquivo separado, requerendo que seu script HTML faça um link com este para que a página possa utilizar estas configurações. Esta modalidade lhe permite escrever scripts CSS em um ou mais arquivos que, por sua vez, podem ser aplicados em uma ou mais páginas web. 2. Incorporado – o script com as configurações CSS é escrito no cabeçalho do script HTML onde deseja aplicar a configuração. Isto faz com que essas configurações sejam aplicadas somente à esta página.

50

CURSOS TÉCNICOS SENAI

▪▪ Exemplo: Abra o script HTML index.html que salvou na pasta pratica1css e implemente o seguinte, abaixo da tag , o script CSS e em , mais precisamente, abaixo do título da página, implemente o parágrafo, ambas as implementações confira a seguir.

Aplicando CSS - prática 1 p{ font-family:Calibri; font-size:20px; color:#B0C4DE; text-align:left; } TESTE ARQUIVO DE CONFIGURAÇÃO CSS 1 Aqui um texto formatado com CSS incorporado nesta página.

Salve novamente este script para atualizá-lo com as novas implementações. Observe o início da declaração CSS em , dentro desta a configuração CSS para parágrafo, ou seja, está configurando a fonte Calibri, o tamanho de 20px, cor azul clara e texto alinhado a esquerda, para todos os parágrafos implementados, nesta página, pois estas configurações são locais. Perceba também que nosso script está fazendo uso de configurações CSS externa e local, até o presente momento. Externa para configurar o corpo da página e local para parágrafos. Ao executar esta página, terá como resultado uma página com o fundo na cor cinza, zero de margem esquerda, direita, superior e inferior, o título aparece alinhado ao centro, na fonte verdana e cor branca e agora também com um parágrafo na fonte Calibri tamanho 20 px na cor azul clara e alinhado a esquerda.

PROGRAMAÇÃO WEB

51

Figura 20: Resultado página configurada com CSS incorporado

3. Inline – o script com as configurações CSS é escrito diretamente na tag HTML, afetando somente o conteúdo associado a esta.

▪▪ Exemplo:

Abra o script HTML index.html que salvou na pasta pratica1css e implemente o seguinte; abaixo da tag implemente a tag de link com a configuração CSS para que o link apareça sem o sublinhado e o texto na cor branca. Veja que abaixo desta, você tem outro tag link sem estilo, para comprovar que a configuração CSS do link anterior é Inline, ou seja, só terá efeito para a linha onde foi escrita.

52

CURSOS TÉCNICOS SENAI

Aplicando CSS - prática 1 p{ font-family:Calibri; font-size:20px; color:#B0C4DE; text-align:left; } TESTE ARQUIVO DE CONFIGURAÇÃO CSS 1 Aqui um texto formatado com CSS incorporado nesta página. Tutorial HTML Tutorial HTML

Salve novamente este script para atualizá-lo com as novas implementações. Ao executar esta página, terá como resultado uma página com o fundo na cor cinza, zero de margem esquerda, direita, superior e inferior, o título aparece alinhado ao centro, na fonte verdana e cor branca, configurações CSS externa, também com um parágrafo na fonte calibri tamanho 20 px na cor azul clara e alinhado a esquerda. Configuração CSS incorporada e agora um link estilizado sem sublinhado na cor branca, configuração CSS Inline e abaixo deste, um link sem nenhum estilo, mas utilizando as configurações externas, para fonte e alinhamento de texto.

Tutorial HTML

Figura 21: Resultado página configurada com CSS inline

Tags personalizadas Você pode dar um tratamento todo especial as suas tags HTML como, por exemplo, criar configurações CSS para personalizar textos, links, imagens, formulários e outros e aplicar aos componentes que desejar e quando desejar. Essas configurações podem ser aplicadas tanto na modalidade externa como incorporada. Abra o script CSS que salvou na pasta css da sua aplicação pratica1css e neste implemente, abaixo do script de configuração do body{},as seguintes tags personalizadas:

.alinha_direita{ text-align:right; } /* usada para alinhar conteúdo a direita */ .alinha_centro{ text-align:center; } /* usada para alinhar conteúdo ao centro*/ .alinha_esquerda{ text-align:left; } /* usada para alinhar a esquerda*/

PROGRAMAÇÃO WEB

53

Salve novamente este script para atualizá-lo com as novas implementações. Observe que antes do nome dos elementos agora você escreve o “.” Identificando um elemento especial, personalizado, chamado classe que, por sua vez, contém configurações que podem ser utilizadas, não obrigatoriamente, mas para qualquer conteúdo HTML. Agora abra o script HTML index.html que salvou na pasta pratica1css e implemente o seguinte, abaixo da instrução do último link ,“TUTORIAL HTML”, as tags com os textos alinhados respectivamente, a direita, centro e a esquerda, como mostra o script a seguir. Aplicando CSS - prática 1 p{ font-family:Calibri; font-size:20px; color:#B0C4DE; text-align:left; } TESTE ARQUIVO DE CONFIGURAÇÃO CSS 1 Aqui um texto formatado com CSS incorporado nesta página. Tutorial HTML Tutorial HTML Texto utilizando a configuração personalizada CSS para alinhamento a direita Texto utilizando a configuração personalizada CSS para alinhamento ao centro Texto utilizando a configuração personalizada CSS para alinhamento ao centro

54

CURSOS TÉCNICOS SENAI

Salve novamente este script para atualizá-lo com as novas implementações. Ao executar esta página, terá como resultado uma página com o fundo na cor cinza, zero de margem esquerda, direita, superior e inferior, o título aparece alinhado ao centro, na fonte verdana e cor branca, configurações CSS externa, também com um parágrafo na fonte Calibri tamanho 20 px na cor azul clara e alinhado a esquerda. Configuração CSS Incorporada, um link estilizado sem sublinhado na cor branca, configuração CSS Inline, abaixo deste, um link sem nenhum estilo, mas utilizando as configurações externas, para fonte e alinhamento de texto e agora três linhas com textos alinhados, respectivamente, à direita, centro e a esquerda a partir das configurações personalizadas implementadas externamente.

Tutorial HTML

Figura 22: Resultado página configurada com CSS personalizado

Aqui cabe uma observação importante, note que implementamos nas tags a chamada das configurações CSS personalizadas (classes), respectivamente. Mas uma curiosidade, porque os textos além de alinhados de acordo com a classe solicitada, também encontram-se naquela cor, tamanho e tipo de fonte? É simples, é que como estamos trabalhando com a tag , além das classes estilizadas, está também utilizando as configurações Incorporadas para esta tag.

Configuracão CSS para a tag . ▪▪ DIV – é uma tag HTML utilizada para formatar um grande bloco,

divisão, de uma página web, abrangendo textos e/ou outros elementos. Ótimo recurso para a criação de layouts em páginas web. Para praticar o uso de configurações CSS para DIV crie, em drive local, uma pasta chamada, pratica2css, na sequencia, crie uma pasta, chamada css dentro da pasta pratica2css e em seguida abra o seu editor de programas. A ideia é criar uma aplicação web com uma estrutura de DIVS do tipo cabeçalho, lado esquerdo, centro e rodapé. Para que possa, no futuro, desenvolver a estrutura de layout que lhe convir. Então vamos lá! Escreva o script a seguir:

PROGRAMAÇÃO WEB

55

body{ margin:10px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; background-color:#FEE4AB; text-align:center; } div#tudo{ margin:0px auto; width:766px; height:580px; border-right:1px solid #000000; border-left:1px solid #000000; } /* Delimita o espaço útil do conteúdo e sua página e engloba todas as outras divs. */ div#cabecalho{ width:765px; height:140; background-color: #FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:22px; line-height:150px; text-align:center; border-top:1px solid #000000; border-bottom:1px solid #000000; }/*Div do cabeçalho do corpo da página*/ div#esquerda{ width:200px; height:368px; float:left; background-color: #FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:350px; text-align:center; border-right:1px solid #000000; }/*Div lateral esquerda do corpo da página*/ div#centro{ width:564px; height:370px; float:right; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:22px; line-height:350px; text-align:center; background-color:#ffffff; overflow:auto; }/*Div central do corpo da página*/ div#rodape{ width:765px; height:67px; clear:both; background-color: #FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:22px; line-height:70px; text-align:center; text-align:center; border-top:1px solid #000000; border-bottom:1px solid #000000; }/*Div do rodapé do corpo da página*/

56

CURSOS TÉCNICOS SENAI

Salve este script na pasta css que, por sua vez, encontra-se na pasta pratica2css, com o nome de layout1.css. Agora abra um novo documento no seu editor de programas e escreva o seguinte script: Aplicando CSS - prática 2 DIV DO CABEÇALHO DA PÁGINA DIV DA ESQUERDA DA PÁGINA DIV DO CENTRO DA PÁGINA DIV DO RODAPÉ DA PÁGINA

Salve este script na pasta pratica2css, com o nome de index. html.

Ao executar esta página, terá como resultado uma página web com uma estrutura de div delimitando o cabeçalho, lateral esquerda, centro e rodapé da página.

Figura 23: Resultado layout de página com uso de div em CSS

Nestas divs você pode inserir o elemento que desejar texto, imagem, link, formulário, tabela e assim por diante, não existe restrição. Se desejar inserir uma imagem diretamente em uma div, por exemplo, na div cabeçalho, deve implementar o seguinte nas configurações CSS deste elemento:

div#cabecalho{ width:765px; height:140; color: #FFFFFF; background-image: url(../imagens/imgempxyz.jpg); font-family:Verdana, Arial, Helvetica, sans-serif; font-size:22px; line-height:150px; text-align:center; border-top:1px solid #000000; border-bottom:1px solid #000000; }/*Div do cabeçalho do corpo da página*/

A seguir a relação de alguns atributos dos elementos CSS, por ordem de utilização:

PROGRAMAÇÃO WEB

57

Tabela 2: Atributos dos elementos CSS utilizados no estudo

Atributo margin font-family font-size background-color

Definição Tamanho de todas as 4 margens da página web. Tipo de fonte. Tamanho da fonte atribuído em pixels. Cor de fundo ou transparência.

text-align

Alinhamento do texto.

color

Cor de primeiro plano.

text-decoration

Sublinhado ou riscado.

width

Largura do elemento.

height

Altura do elemento.

border-right

Largura, estilo e cor da borda da direita.

border-left

Largura, estilo e cor da borda da esquerda.

line-height

Distância entre linhas de base.

border-top

Largura, estilo e cor da borda superior.

border-bottom

Largura, estilo e cor da borda inferior.

float

Determina se o elemento flutua na página, se para esquerda, direita ou centro.

overflow

Exibição de conteúdos que são maiores do que suas molduras

clear

Elementos flutuantes à esquerda ou a direita de um elemento.

Quer aprofundar-se mais em css? Então procure alguns bons tutoriais, como, por exemplo, em .

58

CURSOS TÉCNICOS SENAI

DICA Quando desenvolver uma solução para web site, durante o desenvolvimento, teste os resultados em mais de um navegador, por exemplo, Mozilla Firefox e Internet Explorer, pois existe uma boa diferença quanto a resolução visual entre eles, e também em relação a outros navegadores, é que o Firefox e o IE são os mais populares.

A medida que ajustes devem ser efetuados, faça-os para que não haja muita diferença da apresentação visual nos dois navegadores. Assim, você chega ao fim dos estudos desta seção sobre CSS. Que os fundamentos repassados aqui possam ajudá-lo no desenvolvimento da apresentação visual de suas aplicações web. Prepare-se para um novo percurso de aprendizagem que traz mais um assunto extremamente importante para o seu desenvolvimento técnico.

Seção 4

Linguagem de programação PHP A opção pela PHP como linguagem dinâmica para o desenvolvimento de nosso estudo não foi por acaso, segundo os especialistas, é a linguagem para web que mais evoluiu em utilização nos últimos tempos. Também é uma linguagem cujo script é aberto, dinâmico e licença sem custo nenhum, por pertencer a categoria de código livre. Sobre isso, segundo Melo e Nascimento (2007, p. 23 ) “[...]pode ser instalado em qualquer máquina, para qualquer número de usuário, sem que isto denote a violação de alguma lei de direito autoral”. É muito importante iniciar o estudo de uma tecnologia compreendendo, principalmente, o significado de seu nome, algumas características, benefícios, estruturas de progra-mação, tipos de dados, interação com outras linguagens, recursos, sua conectividade com banco de dados e sua capacidade de estruturação. Conhecendo isto e agregando aos demais conhecimentos, você garante um bom começo para o seu desenvolvimento profissional em programação para web. Então não perca tempo! Siga adiante! O que significa a sigla PHP?

Essa sigla significa Hypertext Preprocessor (Pré-Processador de Hipertexto).

Surgiu na década de 90, mais precisamente no final de 1994, Rasmus Lerdorf desenvolveu alguns programinhas utilitários para controlar sua página web pessoal para saber como andavam as visitas. Daí para frente à linguagem desenvolveu-se, primeiramente, a partir de implementações feitas por Rasmus, o que lhe garantiu a obtenção do núcleo da linguagem, mais tarde o código foi aberto para comunidade de desenvolvedores até chegar à linguagem que temos hoje.

Características ▪▪ Não tem custo de licença. ▪▪ Total integração com HTML, Javascript e outras tecnologias deriva-

das.

▪▪ Totalmente dinâmica. ▪▪ Permite o acesso a arquivos de textos, imagens e outros tipos de

arquivos.

▪▪ Privilegia a segurança de dados a partir da criptografia de dados. ▪▪ Suporte a banco de dados variados com acesso nativo a: Firebird,

Interbase, MySQL, SQLServerver, Oracle,PostGresSql entre outros.

▪▪ Roda no lado do servidor, o que garante a integridade de seu script.

Ambiente Como já mencionado a PHP roda no lado do servidor isto significa que a partir deste momento você já deve conhecer sobre o ambiente de desenvolvimento web, termos como lado cliente e lado servidor, a pasta em que as aplicações devem ser salvas e tudo que se refere à relação cliente x servidor. Lembrando que estas e outras informações encontram-se na Unidade de estudo 1.

Fundamentos A linguagem PHP evoluiu bastante desde a sua criação e continua em constante evolução, neste contexto é correto afirmar que à medida que evolui, novos recursos são implementados, tornando sua arquitetura cada vez mais complexa. Inicialmente o que precisa é conhecer a sintaxe de uso, a forma de interação com o ambiente web, como trabalha com variáveis e constantes, quais e como utiliza operadores, comandos e funções básicas para que possa fundamentar-se bem na linguagem a fim de avançar no estudo.

Como e quando surgiu?

PROGRAMAÇÃO WEB

59

Sintaxe de escrita Toda linguagem de programação tem as suas regras de escrita, a PHP não é diferente e se você não respeitar estas regras erros de interpretação serão gerados quando da compilação do script, então, muita atenção nas regras e na hora da escrita dos seus scripts PHP. A exemplo da HTML, quando escreve instruções em PHP, deve delimitar o início e término deste script, como? Observe a seguir:

Esta notação é a mais recomendada para uso, a partir da versão 5 da PHP, mas vale ressaltar que você pode configurar para trabalhar com outras tags para delimitar o início e término do script, como por exemplo: scripts - padrão estilo HTML;

▪▪ - padrão

abreviado de , apresentado anteriormente, neste cabe salientar que este é o delimitador padrão para as versões anteriores a versão 5 da PHP;

▪▪ - padrão de

tag no estilo da linguagem ASP. Para modificar o padrão destas tags é necessário habilitá-las no arquivo, da PHP, chamado php. ini.

60

CURSOS TÉCNICOS SENAI

Testando a sintaxe geral de escrita da PHP, vá até Arquivos de Programas/VertrigoServ/www e crie uma pasta chamada “testesintaxephp”, na sequencia abra o seu editor de programas e escreva o seguinte script:

Salve este script na pasta testesintaxephp com o nome de testesintaxephp.php. Veja que o arquivo salvou com a extensão”.php”, todo e qualquer script que contenha qualquer instrução escrita em PHP, mesmo que 1 linha de instrução, deve ser salvo com esta extensão pois, do contrário, este não é interpretado no servidor web. Outro detalhe é o uso do comando “echo” no script, este comando serve para que imprima algum conteúdo na página, neste caso, a frase que está entre aspas. Aproveitando, também pode utilizar o comando print () para isto, com a sintaxe um pouco diferente, por exemplo, a frase com o comando print () ficaria assim: Print (“Testando a sintaxe geral da PHP”);

Em ambos os casos o texto a ser impresso aparece entre aspas, pois trata-se de uma cadeia de caracteres, aqui chamada de String. Repare também que em ambos os casos a instrução termina com o uso do “;” ponto e vírgula, isto determina para o compilador que a instrução terminou ali.

Para executar o script, lembre-se que agora sua aplicação encontra-se em um servidor web, portanto, não deve executar de forma local, como feito para HTML, deve antes de mais nada, “startar” os serviços do pacote VertrigoServ,servidor Apache e MySQL, feito isto, acesse seu navegador e na barra de endereço deste faça a solicitação da página que deseja, da seguinte maneira:

localhost/nomedapasta/nomedoarquivo.extensão ou 127.0.0.1/nomedapasta/nomedoarquivo.extensão

Lembrando que localhost é o termo que refere-se à localização do endereço da página que deseja chamar, a ele é atribuído um endereço IP 127.0.0.1, por isto que se não conseguir chamar a página por localhost, tente pelo seu endereço IP. Esta situação de só conseguir chamar a página ou por localhost ou pelo seu endereço IP, deve-se ao fato de como o navegador está configurado. Aqui esta solicitação foi efetuada pelo endereço IP, veja: 127.0.0.1/testesintaxephp/ testesintaxephp.php

Resultado Testando a sintaxe geral da PHP Trabalhando com dados A PHP, como já comentado, é uma linguagem que dispõe de muitos recursos e por se tratar de uma linguagem dinâmica para a web deve ser flexível e neste aspecto, quando se trata de tipos de dados suportados e uso de variáveis ela se demonstra muito eficaz, como verá a seguir. Para compreender melhor este assunto vamos desenvolver uma pequena aplicação, crie na sua pasta www, uma pasta chamada tpdadosvariaveis, abra o seu editor de programas e escreva o seguinte script:

Tipos de dados e variáveis em PHP

Resultado

▪▪ Imprimindo o conteúdo da variável lógica $logico1 : 1 ▪▪ Imprimindo o conteúdo da variável lógica $logico2 : ▪▪ Imprimindo o conteúdo da

variável inteiro $inteiro : 49

▪▪ Imprimindo o conteúdo da variável ponto flutuante $pflutuante : 30.09 ▪▪ Imprimindo o conteúdo da variável string $caracter : Tipo string ▪▪ Imprimindo o conteúdo da variável array[] $arvalor : joão da Silva

A aplicação sugere conhecermos como trabalhar com variáveis, como realizar atribuição direta em variáveis, quais os tipos suportados.

Declaração de variáveis Partindo do princípio que já entende o que seja e para que serve uma variável em programação, note que em PHP declarar variável é bem simples, basta escrever seu nome, apenas com o cuidado de antecedê-lo pelo sinal de “$”, como por exemplo, a variável $logico1 utilizada em nosso aplicativo exemplo. Existe outra particularidade a destacar em relação a variáveis e que você já deve conhecer também, são as regras para se dar nomes a variáveis, neste aspecto, em se tratando da PHP, Melo e Nascimento (2007, p. 53) destacam:

Salve este script na pasta tpdadosvariaveis com o nome de tpdadosvariaveis.php.

PROGRAMAÇÃO WEB

61

Tabela 3: Regras para dar nomes às variáveis em PHP

Regras para nomes de variáveis em PHP 1 – Toda variável em PHP começa com o caracter $ seguido pelo nome da mesma. Ex:$total 2 – Os nomes das variáveis em PHP, a exemplo do C e Java, fazem distinção entre maiúsculas e minúsculas. Ex: idade não é igual a Idade 3 – Um nome válido de variável deve começar com o caractere _ ou uma letra, seguido de qualquer quantidade de letras, algarismos ou _. Ex:$_texto, $total,SALARIO são nomes válidos. $7cidades, $*multiplica são nomes inválidos Fonte: Melo e Nascimento (2007, p. 53)

Você pode achar estranho não ter que determinar o tipo de dado que esta variável deve armazenar como em outras linguagens, quando da sua declaração, a explicação é que a PHP não é uma linguagem fortemente tipada, como Delphi, Java, C e outras linguagens, isto significa que a variável assume o tipo de dado que lhe for atribuído, visualizando nosso exemplo. Em nosso exemplo temos: É atribuído à variável $logico2 o valor false, este é tido como booleano, no caso, falso, daí a variável passa a ser do tipo booleana. $logico2=false;

É atribuído à variável $inteiro o valor 49, este é tido como um número inteiro, então a variável passa a ser do tipo numérica inteira. $inteiro=49;

É atribuído à variável $pflutuante o valor 30.09, este é tido como um número de ponto flutuante ou com casas decimais, daí a variável passa a ser do tipo ponto flutuante. $pflutuante=30.09;

É atribuído à variável $caracter o valor “Tipo string”, este é tido como uma cadeia de caracteres ou string, daí a variável passa a ser do tipo string. $caracter=”Tipo string”;

62

CURSOS TÉCNICOS SENAI

É atribuído à variável $arvalor um array[] contendo o nome e sobrenome de uma pessoa, daí a variável passa a ser do tipo array[]. $arvalor=array(“nome”=>”joão”,”s obrenome”=>”Silva”);

Atribuição de valores Deve ter percebido no exemplo que valores foram atribuídos as variáveis na seguinte sintaxe: $variavel = valor;

Isto é uma atribuição direta de valores onde à esquerda da sentença você tem a variável que receberá um valor, seguida do símbolo de “=” (igual) que é o operador que determina a atribuição, seguido do valor que deve ser atribuído à variável.

Tipos suportados Conforme você já estudou a PHP tem o suporte a vários tipos de dados, estes, por sua vez carregam algumas particularidades que variam de uma linguagem de programação, por isso é interessante demonstrar algumas quanto aos tipos de dados suportados pelo PHP, quem nos apresenta é Melo e Nascimento (2007, p. 52)

Tabela 4: Tipos de dados do PHP

Tipo

Faixa de Valores

Aplicação

boolean

True (verdadeiro) ou false (falso)

Este tipo deve ser utilizado para se fazer validações lógicas. Ex: $flag = true;

-2.147.483.648 a 2.147.483.647

Esse tipo de variável pode ser utilizado para representar a idade de uma pessoa, por exemplo. Mas não para fazer cálculos que necessitem precisão decimal. Além disso, deve-se também tomar o cuidado de não armazenar valores oriundos de banco de dados que podem ocasionar overflow (estouro de capacidade do tipo). Ex: $idade=25;

1.40 E-45 a 3.40 E+38

Tipo utilizado pelo PHP para armazenar número que necessita precisão decimal. Não utilize esse tipo para se fazer comparações de igualdade. Pois isso pode gerar erros difíceis de serem identificados, principalmente se os valores comparados tiverem muitas casas decimais. Ex: $valor=25.50

integer

float

string

array

object

null

Não tem

Este tipo geralmente é utilizado para se trabalhar com caracteres em geral. Ex:$cidade = “Joinville”;

Não tem

Serve para representar uma coleção de tipos heterogêneos. Utilizando para isso uma chave e o valor que se quer armazenar. Ex:$valores = array(“requirido”=>true,1=>20); As chaves podem ser tanto uma string como um integer.

Não tem

O tipo objeto nada mais é do que uma instância de uma classe. Ex: $pessoa= new Pessoa();

Não tem

Null é um valor especial que representa uma variável que não possui um valor definido. Ex: $sem_valor = null;

Fonte: Melo, Nascimento (2007, p. 52)

Uma informação importante, pelo fato de a PHP não necessitar estabelecer o tipo da variável no momento de sua declaração, isto permite que uma mesma variável possa armazenar valores de tipos diferentes em determinados trechos do seu script, exemplo, dada a variável:

$teste=”cadeia de caracteres”; /*variável armazenando caracteres é tipo string*/ $teste=10; /*a mesma variável agora armazenando um valor inteiro é tipo inteiro*/

E assim por diante, a variável em PHP assume o tipo de acordo com o tipo de dado que ela armazena, sobre isso Melo e Nascimento (2007, p. 52) alertam “[...] não é aconselhável desenvolver projetos dessa maneira, pois isso poderá causar confusão para aqueles que forem efetuar manutenção no código [...]”.

Particularidades aplicação didática A aplicação didática anterior nos traz mais algumas novidades, exceto declaração de variáveis, atribuição de valores a variáveis e tipos de dados.

Linhas de comentários Em PHP linhas de comentários seguem a seguinte sintaxe:

▪▪ Comentário de 1 linha - //

texto do comentário

▪▪ Comentário de várias

linhas - /* início comentário

texto do comentário */término do comentário

Impressão dos dados Na aplicação aparecem algumas linhas de instrução imprimindo os conteúdos das variáveis, como por exemplo:

PROGRAMAÇÃO WEB

63

echo “Imprimindo o conteúdo da variável string \$caracter : “.$caracter.””;

▪▪ echo – comando para imprimir o texto e conteúdo das variáveis na página. ▪▪ . (ponto) – na instrução significa concatenação (junção), no momento da impressão faz com que o texto que está entre aspas + o conteúdo da variável $caracter + o comando sejam impressos e executados respectivamente na mesma linha, como resultado terá: Imprimindo o conteúdo da variável string $caracter: Tipo string

▪▪ \$ - trata-se de um caractere

escape, são utilizados no momento da impressão para obtermos alguns caracteres desejados, no caso, gostaríamos de estar imprimindo o nome da variável, mas acontece que neste encontra o símbolo do dólar e sabe-se que em um comando echo juntamente com uma variável, principalmente entre aspas duplas, ao invés de imprimir seu nome, será mostrado o conteúdo desta variável, daí a necessidade do caractere escape \$. Desta forma estamos solicitando que naquele ponto se imprima o símbolo do $ antes da palavra caracter, formando assim o nome da variável que desejamos imprimir, ou seja, $caracter. Nesta mesma instrução está embutindo um comando HTML, na instrução escrita em PHP, isto mesmo, você pode utilizar qualquer comando HTML em um script PHP, para isso deve seguir uma sintaxe obrigatória:

64

CURSOS TÉCNICOS SENAI

echo “”; echo “”; echo “”; Deve utilizar o comando echo com as tags HTML dentro das aspas.

Declaração de constantes Você já sabe que, constantes, a exemplo das variáveis, são também endereços de memória, mas ao contrário das variáveis, recebem valores únicos, que não se modificam, por isso o nome de constante. As constantes em PHP são declaradas fazendo-se o uso da função define () que tem como sintaxe o seguinte:

bool define(strig nome_constante, mixed valor[, bool ignorar_maiusculas_minusculas])

▪▪ Define() – função permite a declaração de uma constante; ▪▪ nome_constante – deve in-

formar o nome da constante no formato string;

▪▪ valor – valor armazenado na

constante;

▪▪ ignorar_maiusculas_minusculas – recebe true ou false, se true determina que o nome da constante será case sensitive, ou melhor, sensível a caixa alta e baixa. Para que você tenha a oportunidade de colocar em prática, crie uma pasta chamada “constantephp” escreva o script a seguir :



Salve este script na pasta constantephp com o nome de constante.php.

Resultado Texto fixo Agora implemente este script com o seguinte:



Salve novamente este script. Resultado

▪▪ Texto fixo ▪▪ Texto fixo ▪▪ Texto fixo

A particularidade aqui é que agora inserimos um parâmetro na função, true, estabelecendo que podemos chamar a constante escrevendo seu nome de várias formas, apesar de ela ter sido declarada em MAIÚSCULA, mas veja pelo script que você a chama de maneiras diferentes e mesmo assim consegue imprimir seu conteúdo. Vamos implementar novamente este script agora com o seguinte:



Operadores São elementos encontrados nas linguagens de programação que auxiliam nos mais variados recursos disponibilizados pela linguagem. Classificam-se em:

Aritméticos São aqueles mesmos conhecidos da sua boa e velha matemática, o significado e aplicação são os mesmos aqui. Tabela 5: Operadores aritméticos

Operador

Função

+ * /

Somar valores. Ex: $valor1 + $valor2

%

Módulo de valores: resto da divisão inteira entre os números. Ex: $valor1 %$valor2

Subtrair valores. Ex: $valor1 - $valor2 Multiplicar valores. Ex: $valor1 * $valor2 Dividir valores. Ex: $valor1 / $valor2

Fonte: Melo e Nascimento (2007, p. 57)

Operadores de comparação e atribuição Salve novamente este script.

Resultado ▪▪ Texto fixo ▪▪ ConSTANTE ▪▪ constante Perceba que agora não obteve o resultado esperado, você já descobriu por que, não é? Trocou o parâmetro que indica se o nome da constante será case sensitive, para false, ou seja, não é mais sensível a caixa alta e baixa e, portanto, não consegue extrair os dados das constantes que estão referenciadas de maneira diferente daquela declarada, com caixa ALTA.

▪▪ Comparação – são aqueles utilizados em estruturas de controle do

tipo se, caso, enquanto faça, para faça, ou seja, sempre que houver a necessidade de se fazer uma comparação entre 2 ou mais valores faz-se uso deste.

▪▪ Atribuição – você já o conheceu anteriormente, lembra-se? Quan-

do desejar atribuir um valor qualquer a uma determinada variável. Tabela 6: Operadores de comparação e atribuição

Operador

Função

=

Operador de atribuição. Ex: $valor1=1

==

Operado de igualdade, retorna true se dois valores são iguais. Ex:$valor1 ==$valor2

===

Operador identidade de valor e tipo retorna true se dois valores são iguais e do mesmo tipo. Ex:$valor1 === $valor2 Operador de diferença retorna true se os dois valores são

!= ou diferentes. Ex: $valor1 != $valor2 ou $valor1 $valor2 !==

Operador de não identidade de valor e tipo. Ex: $valor1 !== $valor2

< > =

Menor que. Ex: $valor1 < $valor2 Maior que. Ex:$valor1 > $valor2 Menor ou igual que. Ex: $valor1 = $valor2

Fonte: Melo e Nascimento (2007, p. 58)

PROGRAMAÇÃO WEB

65

Operadores de incremento/decremento e aritméticos com atribuição São aqueles operadores que servem para incrementar ou decrementar variáveis do tipo inteira. Tabela 7: Operadores de comparação e atribuição

Operador Função ++$var

Incrementa $var e então retorna $var incrementada.

--$var

Decrementa $var e então retorna $var decrementada.

$var++

Retorna $var e depois a incrementa.

$var--

Retorna $var e depois a decrementa.

+=

Soma o conteúdo de uma variável com um valor, e depois reatribui o resultado nela própria. Ex: $var += 5; equivale a codificar $var = $var +5;

-=

Subtrai o conteúdo de uma variável com um valor, e depois reatribui o resultado nela própria. Ex:$var -=5; equivale a codificar $var = $var - 5;

*=

Multiplica o conteúdo de uma variável com um valor, e depois reatribui o resultado nela própria. Ex: $var *= 5; equivale a codificar $var = $var * 5;

/=

Divide o conteúdo de uma variável com um valor, e depois reatribui o resultado nela própria. Ex: $var /= 5; equivale a codificar $var = $var /5;

Fonte: Melo e Nascimento (2007, p. 59)

Operadores lógicos Como o próprio nome sugere são aqueles operadores utilizados em expressões lógicas a fim de verificar se o resultado destas é verdadeiro ou falso. Tabela 8: Operadores de comparação e atribuição

Operador

and e &&

or e ||

Xor

!

Nome

Função

E

Retorna verdadeiro quando os dois valores avaliados são verdadeiros. Caso contrário retorna falso. A diferença entre usar and ou && é a precedência dos mesmos.

OU

Retorna verdadeiro quando pelo menos um dos dois valores avaliados é verdadeiro. Caso contrário retorna falso. A diferença entre usar or ou || é a precedência dos mesmos.

Retorna verdadeiro se um, e apenas um dos Ou Exclusivo dois valores, for verdadeiro. Caso contrário, retorna falso. Não

Retorna verdadeiro se o valor avaliado for falso. Caso contrário retorna verdadeiro.

Fonte: Melo e Nascimento (2007, p. 60)

66

CURSOS TÉCNICOS SENAI

DICA 1. Entre utilizar && e and, utilize &&, este operador tem maior precedência, traduzindo é resolvido de forma mais rápida. 2. O mesmo acontece com os operadores || e or, utilize ||, este operador tem maior precedência.ção: BRANCO FILHO, Gil. A organização, o planejamento e o controle da manutenção. Rio de Janeiro, RJ: Ciência Moderna, 2008. 257 p.

Estruturas de controle Toda linguagem de programação fornece estruturas de programação, resguardadas sua sintaxe, que garantem aos scripts maior fluxo de informação, organização e desempenho. Com o PHP isto não é diferente, a linguagem fornece todas essas estruturas, seja condicional ou de repetição, principais estruturas, em um contexto de fácil aprendizado.

Estrutura condicional do tipo if() Supondo que queira desenvolver um script para verificar se um determinado número inteiro é positivo ou negativo, aqui, por questões didáticas, considere também que 0 é positivo, oK? Se constatar que o número é maior ou igual a zero o programa deve emitir a mensagem “O número em questão é positivo”, caso contrário, deve emitir a mensagem “O número em questão é negativo”. Também a título de informação o número verificado é atribuído diretamente a uma variável, para aperfeiçoar o processo.

Crie uma pasta chamada “estrucondif ” escreva o script a seguir:



Salve o script na pasta estrucondif com o nome de estrucondif.php .

Agora suponha que nesta proposta dos números positivos e negativos você queira o seguinte, considerar os números inteiros, maiores que zero “positivo”, menores do que zero “negativos” e igual a zero “nulo”. Alguma coisa mudou da proposta passada para esta, será que você já conseguiu visualizar? Isto mesmo, agora você tem 3 verificações ao invés de 2. Isto sugere um aumento na estrutura condicional. Quer ver como ficaria? Então continue atento! Abra o script do arquivo estrucondif.php e implemente-o com o seguinte: Para facilitar sua compreensão, as implementações estão em destaque.

Resultado ▪▪ Condição verdadeira. ▪▪ O número em questão é positivo. Após a 1ª execução da aplicação, modifique o valor do número para negativo e após execute a aplicação novamente, para provocar a sentença falsa e também para que possa testar o script para saber se está tudo OK.

▪▪ Comentários A sintaxe desta estrutura fornecida pela PHP é idêntica a que é disponível pelas linguagens C, Java, Javascript e outras, veja que a estrutura em si é bem simples. Considere também que este exemplo só tem 2 possibilidades, se a condição é verdadeira,então faça tal coisa, caso contrário (falsa), faça tal coisa.

If(condição) { /*inicio do bloco de instruções da parte verdadeira da condição*/ instruções_se_verdadeiro } /*término do bloco de instruções da parte verdadeira da condição*/ else { /*inicio do bloco de instruções da parte falsa da condição*/ instruções_se_falso }/*término do bloco de instruções da parte falsa da condição*/



Salve o script novamente para atualizá-lo com estas implementações. Resultado

▪▪ O número em questão é negativo.

PROGRAMAÇÃO WEB

67

Após a 1ª execução da aplicação, modifique o valor do número para positivo, execute novamente a aplicação, depois modifique o valor do número para 0 e execute novamente a aplicação, assim estará testando sua estrutura.

▪▪ Comentários Veja que em função da nova proposta foi necessário implementar uma nova verificação na parte falsa da primeira condição elseif ($valor

Salve o script na pasta estruwhile com o nome de estruwhile.php . Resultado 1. ESTRUTURA DE REPETIÇÃO DO TIPO WHILE( ) 2. ESTRUTURA DE REPETIÇÃO DO TIPO WHILE( )

Estrutura de repetição do tipo do / while() A funcionalidade é a mesma de sua co-irmã, a diferença está no seguinte, a verificação da condição é feita no final da estrutura e não no início como na while(). Sendo assim, pelo menos 1 vez, obrigatoriamente, as instruções, dentro da estrutura, serão executadas, mesmo que a condição seja falsa. Veja como ficaria o exemplo didático da impressão da frase ESTRUTURA DE REPETIÇÃO DO TIPO WHILE ( ), 5 vezes nesta estrutura: Crie uma pasta chamada “estrudowhile” escreva o script a seguir:

3. ESTRUTURA DE REPETIÇÃO DO TIPO WHILE( ) 4. ESTRUTURA DE REPETIÇÃO DO TIPO WHILE( ) 5. ESTRUTURA DE REPETIÇÃO DO TIPO WHILE( )

▪▪ Comentários Neste tipo de estrutura a condição é implementada no início da estrutura, o que significa dizer que, já a partir da 1ª execução, se a condição for falsa, as instruções dentro da estrutura nunca serão executadas. Do contrário, ou seja, a partir da execução, a condição sendo verdadeira, as instruções dentro da estrutura serão perfeitamente executadas, como no exemplo proposto.

O que você acha que acontece caso esqueça de incrementar a variável $contadora?

Ora! Pense comigo, esta é inicializada com o valor 1, na 1ª em que a estrutura é executada, a condição portanto é verdadeira e então parte-se para a execução das instruções, a cada execução da estrutura uma linha será impressa, após,a condição é avaliada novamente. Não tendo incrementado a variável $contadora, ela continua com o valor 1, daí a condição é verdadeira novamente partindo-se então para a execução das instruções e isto vai acontecer até ocorrer um estouro de pilha de memória, porque acabou de entrar no que é chamado de loop infinito na estrutura de repetição, pois a variável $contadora não foi incrementada.

70

CURSOS TÉCNICOS SENAI



Resultado 1. ESTRUTURA DE REPETIÇÃO DO TIPO do / WHILE( ) 2. ESTRUTURA DE REPETIÇÃO DO TIPO do / WHILE( ) 3. ESTRUTURA DE REPETIÇÃO DO TIPO do / WHILE( ) 4. ESTRUTURA DE REPETIÇÃO DO TIPO do / WHILE( ) 5. ESTRUTURA DE REPETIÇÃO DO TIPO do / WHILE( )

Estrutura de repetição do tipo for () Estrutura de repetição também muito utilizada em scripts PHP, principalmente se você sabe, antecipadamente, a quantidade de vezes em que as instruções, contidas nesta, devem se repetir. Veja como ficaria o exemplo didático da impressão da frase ESTRUTURA DE REPETIÇÃO DO TIPO FOR( ), 5 vezes nesta estrutura: Crie uma pasta chamada “estrufor” escreva o script a seguir:

▪▪ Comentários Seu funcionamento é bem simples, para o comando for() é implementada uma lista contendo 3 expressões separadas por “;” ponto-e-vírgula, sendo que a primeira expressão atribui um valor inicial à variável controladora da estrutura e este procedimento é executado apenas 1 vez. A segunda expressão trata da validação da condição, caso seja verdadeira, as instruções contidas no bloco serão executadas e por último a terceira expressão que refere-se ao incremento automático da variável controladora, a cada execução do script. Estrutura de repetição do tipo foreach() Esta estrutura não é muito convencional, mas encontrada também em outras linguagens de programação. Trata-se também de uma estrutura de repetição, porém, com algumas particularidades que a difere das demais estruturas apresentadas até o momento. Uma particularidade marcante é que esta estrutura atua, diretamente, sobre o conteúdo de um vetor, como mostra o exemplo a seguir: Crie uma pasta chamada “estruforeach” escreva o script a seguir:

$vetor=array(“primeiro”=>1,2); foreach($vetor as $chave => $valor) { echo “Valor da chave : ” . $chave . “\n”; echo “Valor armazenado : ” . $valor . “/n”; } Fonte: Melo e Nascimento (2007, p. 68)

Salve o script na pasta estruforeach com o nome de estruforeach.php .

Salve o script na pasta estrufor com o nome de estrufor.php .

Resultado ▪▪ ▪▪ ▪▪ ▪▪

Valor da chave: primeiro Valor armazenado: 1 Valor da chave: 0 Valor armazenado: 2

▪▪ Comentários Conforme você viu anteriormente, a estrutura objetiva percorre os elementos do vetor $vetor, observe que esta estrutura não utiliza uma variável de controle para percorrer os elementos do vetor, ou seja, saber quando deve parar de executar a repetição, mas então como saber isto? É por que o comando foreach() faz a varredura do vetor enquanto houver elementos no vetor, quando não houver mais a execução é interrompida.

PROGRAMAÇÃO WEB

71

Trabalhando com funções Você sabe que as funções são muito úteis para qualquer desenvolvedor em qualquer linguagem de programação, por sua capacidade de aperfeiçoar as estruturas dos programas, mantendo os scripts mais limpos e também garantir a redução de linhas de programação, bem como, facilitar e muito no momento da manutenção dos scripts. A PHP é uma linguagem que não foge a regra das demais, dispõe de funções pré-programadas e também permite a criação de estruturas de função de forma a poder estruturar suas aplicações no mais alto nível de organização. Seguindo a sintaxe básica para escrita e chamadas de funções em PHP você encontra:

//declaração da função chamada ‘minha_funcao’ function minha_funcao() { //trecho de código para esta função } //trecho de código do script principal, com a chamada à função //‘minha_funcao’ minha_funcao(); Fonte: Melo e Nascimento (2007, p. 70)

Segundo Melo e Nascimento (2007, p. 70) “Uma grande vantagem no uso de funções é a possibilidade de passagem de argumentos para ela”. Tais argumentos referem-se aos valores, independente do tipo de dados, repassados para a função para que esta possa executar suas instruções. Melo e Nascimento (2007, p. 70) complementam “A passagem de argumentos para uma função pode ser feita por valor ou referência”. Neste contexto que tal alguns exemplos práticos?

Função com passagem de argumento por valor Crie uma pasta chamada “funcpasarval” escreva o script a seguir :

72

CURSOS TÉCNICOS SENAI

Fonte: Melo e Nascimento (2007, p. 70)

Salve o script na pasta funcpasarval com o nome de funcpasarval.php .

Resultado ▪▪ Resultado retornado da função soma: 30 ▪▪ Comentários Observe as variáveis $x e $y no script principal, estas contêm os valores que serão repassados para a função para que sejam somados, pois este é o objetivo da função soma (). Perceba que em soma ($x,$y), é chamada a função e passados os valores contidos nas respectivas variáveis. A função, por sua vez, encontra-se fora do escopo do script principal e contém também as variáveis $val1 e $val2, encarregadas de receber uma cópia dos valores respectivamente, repassados, isto porque a passagem de argumentos é por valor.

A função, de posse dos valores, processa e retorna a soma dos mesmos. Uma particularidade neste processo é a de que ao final deste, os argumentos e as variáveis locais da função são, automaticamente, destruídos.

▪▪ Comentários A variável $valor é antecedida pelo caractere &, isto significa que esta conterá um ponteiro para a variável $número, localizada no script principal da aplicação. Uma curiosidade neste processo, qualquer modificação feita em $valor, automaticamente, é refletida em $número, o que explica o resultado obtido no exemplo anterior.

Função com passagem de argumento por referência

Função com passagem de argumento por valor e referência

Crie uma pasta chamada “funcpasarref ” escreva o script a seguir:

Fonte: Melo e Nascimento (2007, p. 71)

Dominar o uso funções em qualquer linguagem é fundamental. Isto lhe garante uma possibilidade enorme de desenvolver scripts mais complexos e com bom desempenho, por isso, vamos a mais um exemplo de uso de funções para que possamos conhecer um pouco mais sobre este recurso em PHP. Crie uma pasta chamada funcpasarvalref e escreva o script a seguir:

Fonte: Melo e Nascimento (2007, p. 71)

Salve o script na pasta funcpasarvalref com o nome de funcpasarvalref. php .

Salve o script na pasta funcpasarref com o nome de funcpasarref php.

Resultado

Resultado

▪▪ Comentários

▪▪ Resultado calculado pela fun-

ção dobra é: 20

▪▪ Resultado calculado pela função minha_funcao é: 30

A ideia deste exemplo é a de reforçar as diferenças entre função com passagem de argumento por valor e por referência. Veja que no script principal existe uma variável, $c, à qual é atribuído valor 0. Na sequência, a função minha_funcao() é chamada passando-se 3 argumentos para esta, 2 argumentos passados por valor 10 e 20 e o terceiro argumento passado por referência $c.

PROGRAMAÇÃO WEB

73

Sobre as variáveis de funções, Melo e Nascimento (2007, p. 71) observam “Como toda variável declarada na lista de argumentos de uma função ou em seu interior é local ao seu escopo, o PHP cria estas variáveis de maneira independente das demais variáveis, mesmo que seus nomes sejam idênticos”. Neste contexto os autores complementam “Um erro comum de programação é tentar referenciar uma variável externa a função apenas utilizando seu nome. Neste caso, a função também está criando uma nova variável, obviamente sem conter o mesmo conteúdo da suposta variável referenciada”.



Include A PHP fornece muitos recursos de programação para o desenvolvimento de aplicações web, aqui encontra-se mais um recurso muito interessante e que está diretamente relacionado a melhorar a estrutura de sua aplicação, trata-se da diretiva Include. É muito comum, no decorrer de sua evolução como desenvolvedor, você desejar organizar seus programas de forma a garantir melhor organização de seus arquivos de programas a fim de garantir maior desempenho e flexibilidade à sua aplicação, é isto que esta diretiva possibilita. Include serve para inserir o script PHP de um arquivo externo dentro de um bloco de programa qualquer, sendo que o script inserido é interpretado normalmente a partir da aplicação desta diretiva. Para verificar isto na prática implemente o exemplo sugerido a seguir, mas antes, crie uma pasta em www chamada include e, dentro desta, crie outra pasta chamada arquivoinclude e escreva o script a seguir:

Fonte: Muto (2006, p. 56)

Salve o script na pasta scriptprincipal com o nome de scriptprincipal. php. E agora sim, a aplicação pode ser executada, mas tome cuidado, lembre-se que possui 2 arquivos, arquivoinclude.php, o arquivo que será incluído no arquivo scriptprincipal.php, que é o arquivo de programa, então é o scriptprincipal.php que deve chamar para execução. Resultado

Fonte: Muto (2006, p. 56)

Salve o script na pasta chamada arquivoinclude com o nome de arquivoinclude. php . Neste caso, ainda não deve executar a aplicação, pois ainda não foi encerrada e esse arquivo será inserido no próximo arquivo de programa que ainda vai criar. Portanto, continuando o processo, crie também dentro da pasta include, uma pasta chamada scriptprincipal e escreva o script a seguir:

74

CURSOS TÉCNICOS SENAI

▪▪ ▪▪ ▪▪ ▪▪ ▪▪ ▪▪

Teste A Teste A teste B teste B Teste C Teste C

▪▪ Comentários Observe no resultado que as linhas escritas em arquivoinclude. php foram inseridas e exatamente no ponto onde foi solicitado o include deste arquivo.

Arrays Eis aqui um recurso dos mais “temerosos”, mas que em sua essência e aplicação, dos mais valiosos em linguagem de programação. Identificado também como vetor, lista ou conjunto de variáveis, array pode ser considerado como uma estrutura de dados que armazena valores, identificados por nomes que tecnicamente são chamados de chave ou índice de um elemento.

Array simples Array pode ser simples, caracterizado por armazenar vários elementos em sequência, identificados por uma chave ou índice.

▪▪ Exemplo array simples Em PHP você pode criar arrays de muitas maneiras, a escolhida em nosso exemplo é a da utilização de arrays dinâmicos em PHP array (). Hipoteticamente você pode visualizar o array simples que será criado a seguir assim: Tabela 9: Visão hipotética do array $valores

$valores Valores ->

Joinville

2007

Chaves ->

cidade

14

O nome do array é $valores, na 1ª posição do array, identificada pela chave cidade, é armazenada a string “Joinville” e na 2ª posição do array, identificada pela chave numérica 14, é armazenado o número inteiro 2007. Como você já deve ter observado a chave de um array pode ser uma string ou um valor inteiro, podendo estas ser utilizadas no mesmo array, o que não é aconselhável, ou individulamente para cada array, o que é mais aconselhável. Crie uma pasta chamada arraysimples e escreva o script a seguir:

Fonte: Melo e Nascimento (2007, p. 75)

Salve o script na pasta arraysimples com o nome de arraysimples. php.

▪▪ Comentários A PHP trata algumas particularidades com arrays de forma diferenciada em relação a algumas linguagens, por exemplo, os arrays em PHP podem conter elementos com tipos diferentes, no exemplo, string e número inteiro no mesmo array, outra particularidade é a de que a chave ou índice do array pode ser um número ou uma string, caso também do nosso exemplo. Melo e Nascimento (2007, p. 75) chamam a atenção para o caso de uso de uso de chaves do tipo inteiro

PROGRAMAÇÃO WEB

75

[...] se o desenvolvedor não especificar um valor para a chave de um novo item do array, ele será obtido com a adição de um ao maior índice inteiro obtido. Exemplo: se um array tiver as chaves 3,7 e 15 e for adicionado um novo item sem especificar uma chave, o se valor da chave será 16.

Array multi-dimensional Imagine agora que você precise implementar, para um ou mais, elementos do array informações importantes. Por exemplo, imagine que é preciso criar um array com as cidades de Santa Cataria e para cada cidade seus respectivos bairros, ou que criar um array que armazenasse o nome dos departamentos de uma organização empresarial e para cada departamento precisa armazenar o nome de seus funcionários, tanto em um exemplo como o outro temos 2 dimensões de informações, cidade-bairros ou departamento-funcionários, isto caracteriza a criação de um array multidimensional, mais de uma dimensão, no caso bi-dimensional.

▪▪ Exemplo de array multidimensional Lembre-se que a maneira de criação de array escolhida em nosso exemplo é a dos arrays dinâmicos em PHP array(). Hipoteticamente você pode visualizar o array multidimensional que será criado a seguir assim: Tabela 10: Visão hipotética do array $empresa

$empresa Colunas 1 e 2 ->

TI

RH

Linha 1

Carlos Eduardo Carvalho

Kátia Hayaschi

Linha 2

Nilton Manoel L. Adão

Kelly Patrícia Dias

Veja que agora temos 2 dimensões, a dimensão da coluna, com o nome do departamento e a dimensão da linha com o nome do funcionário alocado no departamento. Se analisarmos o array como um todo temos uma matriz do tipo 2 x 2, ou seja, 2 colunas por 2 linhas. Se quiser, por exemplo, imprimir o funcionário o nome dos funcionários do departamento de TI:

▪▪ echo $empresa[“TI”] [0] //Imprima do array $empresa o que está

na linha 0 da coluna TI

▪▪ echo $empresa[“TI”][1]//Imprima do array $empresa o que está na linha 1 da coluna TI Resultado ▪▪ Carlos Eduardo Carvalho ▪▪ Nilton Manoel L. Adão Crie uma pasta chamada arraymulti e escreva o script a seguir:

76

CURSOS TÉCNICOS SENAI

Fonte: Muto (2006, p. 68)

Salve o script na pasta arraymulti com o nome de arraymulti. php .

▪▪ Comentários

O array é descarregado a partir de 2 estruturas de repetição do tipo while(), a primeira estrutura descarrega, a cada execução, a coluna do array, por exemplo, na primeira execução, por intermédio da função list(), captura a coluna TI, por se tratar da primeira coluna, a partir daí a segunda estrutura de repetição, também por intermédio da função list(), captura as linhas da coluna capturada. Esse processo continua enquanto houver colunas com linhas no array.

Removendo arrays Se necessitar remover valores ou apagar todo o array, a PHP dispõe de uma função especial, unset(), para essas ações. Crie uma pasta chamada apagarray e escreva o script a seguir:



DICA A PHP nos fornece uma infinidade de funções para array(), muito úteis, c é interessante conhecer algumas destas funções, acesse

Vamos conhecer mais um recurso que a PHP disponibiliza? Arquivos. Um dos recursos interessantes que a PHP disponibiliza é o de manipulação de arquivos, seja os mais básicos como .txt,arquivos de texto, passando pelos arquivos de áudio, via stream até arquivos de compressão como os .zip, .rar e daí em diante. Segundo Muto (2006, p. 68) Para que possamos ler ou escrever arquivos de baixo nível, devemos sempre seguir os seguintes passos:

Fonte: Melo e Nascimento (2007, p. 76)

▪▪ Abrir o arquivo em modo leitura e/ou gravação;

Salve o script na pasta apagarray com o nome de apagarray. php .

▪▪ Iniciar o processo de leitura ou gravação;

Resultado

▪▪ Fechar o arquivo. A seguir as principais funções PHP para manipular arquivos.

▪▪ array(4) { [0]=> int(15) [1]=> int(2007) [“carro”]=> string(5) “Celta” [“carro2”]=> string(7) “Ferrari” } NULL

PROGRAMAÇÃO WEB

77

Tabela 11: Principais funções PHP para arquivos de dados

NOME DESCRIÇÃO

SINTAXE

fopen Abre um arquivo. A função retornará false se ocorrer erro. $fp = fopen (string nome_arquivo, string modo_de_abertura) Onde Nome_arquivo – Nome do arquivo Modo_de_abertura – Define a forma como o arquivo será aberto, conforme parâmetros abaixo: r – somente leitura a partir do início do arquivo; r+ - leitura e gravação a partir do início do arquivo; w – somente gravação a partir do início do arquivo, onde todo o conteúdo do arquivo será apagado. Se o arquivo não existir a função tentará criá-lo; w+ - leitura e gravação a partir do início do arquivo, onde todo o conteúdo do arquivo será apagado. Se o arquivo não existir a função tentará criá-lo. a – somente gravação a partir do fim do arquivo. Se o arquivo não existir a função tentará criá-lo. a+ - leitura e gravação a partir do fim do arquivo. Se o arquivo não existir a função tentará criá-lo. Nos modos de w, w+, a, a+ será necessário dar permissão ao usuário para gravação no diretório onde o arquivo estiver.

NOME DESCRIÇÃO

SINTAXE

NOME DESCRIÇÃO

SINTAXE

NOME DESCRIÇÃO

78

fwrite Escreve um número específico de bytes de uma string em um arquivo. $flag = fwrite(int fp, string string) Onde string – String a ser gravada no arquivo. Exemplo: fgets Retorna uma string do arquivo a partir do ponteiro do arquivo até que (tamanho -1) bytes sejam lidos do arquivo. A leitura termina quando encontra o fim de uma linha ou quando o arquivo termina. String fgets(int fp, int tamanho) Onde Tamanho – número de bytes a serem lidos do arquivo. Exemplo: feof Retorna true caso o ponteiro de arquivo esteja no fim do arquivo ou ocorra um erro, caso contrário retorna false.

CURSOS TÉCNICOS SENAI

NOME

SINTAXE

NOME DESCRIÇÃO

SINTAXE

fopen feof(int fp) Exemplo: fclose Fecha um arquivo aberto. Retorna true se obtiver sucesso ou false em caso de erro. fclose(int fp) Exemplo:

Fonte: Muto (2006, p. 89)

Um exemplo prático que cria e lê os dados de um arquivo chamado teste.txt. Crie uma pasta chamada exearquivotexto e escreva o script a seguir:

Fonte: Melo e Nascimento (2007, p. 80)

PROGRAMAÇÃO WEB

79

Salve o script na pasta exearquivotexto com o nome de exearquivotexto. php. Resultado É a leitura do conteúdo do arquivo teste.txt que criou e gravou a frase “Escrevendo algo no arquivo”. Abra pasta exearquivotexto, veja o arquivo teste.txt. com a frase. Portanto, como estamos lendo o conteúdo deste arquivo também o resultado é a impressão desta frase na página. Escrevendo algo no arquivo.

Banco de Dados Dentre as vantagens oferecidas pela PHP o suporte a banco de dados é uma que se destaca bastante. Para reforçar o estudo do PHP com banco de dados é interessante trabalhar um exemplo didático para o cadastramento de cidades. Estamos utilizando o VertrigoServ e nele encontramos o PHPMyAdmin, utilitário que permite a criação e manipulação de banco de dados, então se estiver utilizando este pacote também ficará mais fácil, caso contrário, siga as instruções e adapte para o ambiente que está utilizando. Criação do banco de dados, como se dá esse processo? Assunto que virá a seguir. Fique atento para compreender todas as etapas.

Procedimentos 1º. Inicialize o vertrigo.

▪▪ Comentários O script do exemplo prático verifica a existência ou não de um arquivo texto, caso não exista, cria o arquivo, do contrário, abre o arquivo somente para leitura. Caso o arquivo não exista o arquivo é criado e gravado. Na sequência uma estrutura de repetição para ler e imprimir os dados contidos no arquivo. Observe que neste script utilizando algumas funções que não constam na tabela das principais funções de arquivo da PHP, são elas:

2º. Clique, com o botão da direita no ícone do VertrigoServ e escolha, Tools/PhpMyAdmin. 3º. Informe o usuário e senha para acessar o servidor MySQL neste ambiente, se a instalação do pacote correu tudo bem e também se não modificou o usuário e senha, para usuário informe: root e para senha informe: vertrigo. 4º. Se tudo correu bem, você será redirecionado para a página principal do PhpMyAdmin. 5º. Você pode criar o banco de dados pela ferramenta, ou manualmente, escrevendo scripts em SQL. Localize na página “Criar novo Banco de Dados”, na caixa de texto abaixo, digite o nome do banco, “exemplodidatico”, sem acento mesmo, e confirme clicando no botão “Criar”.

▪▪ file_exists() – Verifica a existência de um arquivo ou diretório (pasta); ▪▪ fflush() – Força a liberação do buffer de memória para um arquivo; ▪▪ fread() – Faz a leitura de dados de um arquivo.

80

CURSOS TÉCNICOS SENAI

Figura 24: Criação banco de dados exemplo didático

6º. Se tudo correu bem, você deve estar visualizando uma página web onde à sua esquerda visualiza o nome do seu banco de dados “exemplodidatico” e a sua direita localize “Criar nova tabela no Banco de Dados”, na caixa de texto abaixo deste, digite o nome da tabela no caso, “cidades”, observe que ao lado deste você tem, “Número de arquivos”, isto refere-se à quantidade de campos que deseja para esta tabela, no caso, 2, e após clique em “Executar”.

Crie uma pasta chamada insconscidades e escreva o script a seguir:

Figura 25: Criação da tabela cidades

7º. Se tudo correu bem, você deve estar visualizando uma página web no formato de uma tabela, onde a esquerda você tem o nome das colunas e a direita as entradas para estas. Cada coluna de entrada desta refere-se a um campo da tabela que será incluído em sua estrutura, deduz-se então que você pode inserir, 2 campos por vez. O tipo de tabela deve ser InnoDb e confirme o clicando no botão Salvar.

Figura 26: Inserindo os campos da tabela

Um exemplo prático que insere dados na tabela cidades. PROGRAMAÇÃO WEB

81

Fonte: Melo e Nascimento (2007, p. 84)

Salve o script na pasta insconscidades com o nome de insconscidades. php.

Na tabela cidades

Resultado O resultado deste script não é muito perceptível na página, mas sim na tabela cidades do banco de dados. Se ocorreu algum erro, esse será visualizado na página, pois o script solicita o erro ocorrido. Se tudo correu bem, uma mensagem na página é mostrada e na tabela cidades do banco de dados você verá os dados inseridos pelo script. Inclusão efetuada com sucesso! Figura 27: Tabela cidades populosas

82

CURSOS TÉCNICOS SENAI

Continuando a prática de banco de dados, agora crie uma pasta chamada consultacidades. O próximo exemplo refere-se à consulta dos dados na tabela cidades, para isso escreva o script a seguir:

▪▪ Comentários Nos 2 exemplos foram utilizadas algumas funções PHP para o banco de dados MySQL. mysql_connect()

Fonte: Melo e Nascimento (2007, p. 85)

Salve o script na pasta consultacidades com o nome de consultacidades.php.

Resultado 1. Joinville 2. São Paulo 3. Rio de Janeiro 4. Nova Iorque 5. Paris

Abre uma conexão a um servidor MySQL. Retorna id_link (id que identifica o sucesso da conexão) se obtiver sucesso; caso contrário retorna false.

Sintaxe de uso int mysql_connect(host[:port] [path/to/socket],usuario, senha)

Onde: ▪▪ host – nome do servidor

onde o MySQL está instalado;

▪▪ usuário – nome do usuário que irá se conectar ao banco de dados; ▪▪ senha – senha do usuário para autenticação no banco de dados; mysql_select_db() Seleciona um banco de dados.

Sintaxe de uso int mysql_select_db(nome_db,id_ link) Onde:

▪▪ nome_db – nome do banco de dados desejado; ▪▪ id_link – valor obtido através da conexão realizada com mysql_connect; mysql_query() Envia uma consulta ao servidor MySQL, retornando true caso obtenha sucesso; caso contrário retorna false.

6. Toronto 7. Londres

Sintaxe de uso int mysql_query(string,id_link)

PROGRAMAÇÃO WEB

83

Onde:

▪▪ string – string SQL; ▪▪ id_link – valor obtido através

da conexão realizada com mysql_connect;

mysql_fetch_array() Retorna um array, com o conteúdo da(s) linha(s) selecionada, posicionando-se, automaticamente, no próximo registro, caso exista.

Sintaxe de uso array mysql_fetch_arra (resultado) Onde:

▪▪ resultado – valor de retorno obtido em mysql_query(). Fonte: Muto (2006, p. 247) Complementando a lista de funções PHP para MySQL:

mysql_free_result() Libera toda a memória associada ao identificador de resultado result;

mysql_close() Encerra a conexão com um servidor mysql.

Cookies Toda linguagem de programação dinâmica para web deve possibilitar recursos que facilitem na manipulação de dados tornando o processo de armazenamento e recuperação destas informações mais eficiente, por isso dos Cookies.

Melo e Nascimento (2007, p. 152) definem Cookies como [...] comandos especiais enviados no cabeçalho de requisições HTTP. Eles podem conter pequenos trechos de dados, que são geralmente salvos no sistema de arquivos do cliente pelo navegador, na grande maioria dos casos de maneira transparente ao usuário.

Pela característica de armazenar informações na máquina do cliente, não é aconselhável utilizar Cookies para armazenar informações confidenciais como, por exemplo, senhas de usuário.

Configurando um Cookie Crie uma pasta chamada configcookie e escreva o script a seguir:

Salve o script na pasta configcookie com o nome de configcookie.php.

Resultado Configurando um cookie no cliente...

▪▪ Comentários Existe uma particularidade importante quando da utilização de Cookies, sobre isso Melo e Nascimento (2007, p. 87) alertam, “[...] como o setcookie atua diretamente no cabeçalho da resposta, ele deve ser o primeiro comando a retornar algo para o cliente.”. Caso não for obedecido, veja na prática o que ocorre. Crie uma pasta em www chamada errocookie e escreva o script a seguir:

Fonte: Melo e Nascimento (2007, p. 87)

Salve o script na pasta errocookie com o nome de errocookie.php.

DICA Para consultar mais funções PHP para MySQL acesse o site:

Fonte: Melo e Nascimento (2007, p. 87)

84

CURSOS TÉCNICOS SENAI

Resultado Mensagem Warning: Cannot modify header information - headers already sent by (output started at C:\Program Files\ VertrigoServ\www\errocookie\ errocookie.php:2) in C:\Program Files\VertrigoServ\www\errocookie\errocookie.php on line 3

▪▪ Comentários Você pode observar ocorreu um erro na execução da página, pois uma linha de instrução foi enviada antes do comando de cabeçalho setcookie. Isto acontece com outros comandos também como, header() e session. Existe uma maneira de corrigir isto, nesta e em outras situações, no início do script utilize a função ob_start(). Implemente, no script do arquivo errocookie.php, deve ficar assim:



Lembre-se de salvar o script para atualizá-lo, após, execute-o para ver o resultado.

Resultado Mensagem Observe que o erro não ocorre mais, isto por que a função ob_start(), em linhas gerais, encarregou-se de armazenar as instruções que não são passadas pelo cabeçalho HTTP, até que o comando setcookie fosse executado, após esta execução tais instruções são executadas. Este procedimento serve também para header() e session. Neste exato momento você tem uma variável do tipo cookie chamada username, contendo jjsilva que é armazenada no seu HD assim que a sua página web for chamada.

Acessando um Cookie Você pode acessar o conteúdo do Cookie criado anteriormente, como?

Fazendo uso de uma variável superglobal da PHP chamada $_ COOKIE, trata-se de um array que contém todas as variáveis enviadas pelo navegador do cliente. Então para resgatarmos os dados de uma variável Cookie deve proceder: Crie uma pasta em www com o nome de vercookie e escreva o script a seguir:



Importante sobre Cookie Uma informação importante que passa, imperceptível, por muitos desenvolvedores usuários de Cookies, é sobre o tipo de dados que uma variável Cookie pode armazenar, sobre isso Melo e Nascimento (2007, p. 88) comentam

Um Cookie pode teoricamente conter apenas dados o tipo string. Isto não impede, entretanto,que ele armazene números inteiros ou fracionários.Assim que o código do PHP necessitar trabalhar com um valor numérico armazenado em um cookie, nada impede o programador de converter esta string em um número para sua manipulação.

▪▪ Exemplo: Salve o script na pasta vercookie com o nome de vercookie.php. Este script obtém o conteúdo da variável cookie criada a partir do script anterior, portanto, para este exemplo ser bem sucedido, o script anterior deve ter sido executado. É lógico que na prática você poderia ter as instruções do script anterior e as instruções deste script no mesmo arquivo, mas como sabe, isto é um exemplo didático. Resultado Jjsilva

▪▪ Comentários O resultado mostra o que está armazenado no Cookie username.

$x = (int)$_COOKIE[‘numero_aleatorio]+10; Fonte: Melo e Nascimento(2007, p. 88)

Últimas sobre Cookies Os Cookies podem ser criados com ou sem um tempo de expiração. Sem um tempo de expiração foi no estilo do nosso exemplo didático, isto significa que o Cookie criado expira quando o usuário da página web é fechada.

Cookie com um tempo de expiração Crie uma pasta em WWW chamada cookiectexpira e escreva o script a seguir:

PROGRAMAÇÃO WEB

85

Fonte: Melo e Nascimento (2007, p. 90)

Salve o script na pasta cookiectexpira com o nome de cookiectexpira.php.

Trabalhando com Sessões Criando e populando uma variável de sessão Crie uma pasta em www chamada sessoes e escreva o script a seguir:

Removendo Cookies Sobre a remoção de Cookies, Melo e Nascimento (2007, p. 90) observam uma maneira e remover um Cookie do cliente é configurar o valor false para seu conteúdo. Como este procedimento depende do cliente, costuma-se também passar um valor negativo para o seu prazo de expiração.

▪▪ setcookie(“username”,false,-1);

Sessões Sessões no PHP existem a partir da versão 4, não menos importante do que Cookies, na verdade o princípio é o mesmo, mudam algumas particularidades e sintaxe de uso. O grande objetivo das Sessões é o de armazenar os dados na forma de variáveis e acessá-los a partir de qualquer parte de sua aplicação, enquanto a esta estiver ativa. As variáveis de Sessão funcionam como variáveis globais e são muito úteis para programação complexa.

86

CURSOS TÉCNICOS SENAI

Salve o script na pasta sessoes com o nome de sessoes.php. Resultado Como resultado você tem a criação das variáveis de sessão $_ SESSION[‘username’] e $_SESSION[‘senha’], contendo, respectivamente, um nome de usuário e sua senha e a impressão do conteúdo destas.

▪▪ O usuário armazenado na sessão é: silvio ▪▪ Sua senha, criptografada, armazenada na sessão é: e10adc3949ba-

59abbe56e057f20f883e

▪▪ Comentários O destaque fica para o fato de que qualquer ação que fizer com sessões deve anteriormente estartá-la com session_start(). Veja que a exemplo de Cookies, em sessão também você precisa fazer uso de uma variável especial para o armazenamento dos dados, $_SESSION[‘’]. O valor de senha é criptografado a partir da função PHP md5(), que converte um dado na forma normal para o formato de criptografia. Para encerrar, o script recupera as informações das variáveis de sessão, importante relembrar que a partir do momento em que estas variáveis são criadas e alimentadas com dados, estes podem ser acessados de qualquer outro script de sua aplicação. Removendo os dados É preciso alguns cuidados, o conteú-do de uma variável de sessão pode ser removido facilmente, então só execute este script em suas aplicações caso realmente necessite.

Das variáveis de sessão Abra o script do arquivo sessoes.php da pasta sessoes e implemente-o com o seguinte:



Salve o script para atualizá-lo, após, execute-o para ver o resultado. Resultado

▪▪ O usuário armazenado na sessão é ▪▪ Sua senha, criptografada, armazenada na sessão é ▪▪ Comentários O resultado diz tudo, não acha? Os dados das variáveis de sessão não existem mais, pois foram eliminados a partir da função unset(). Aqui uma observação, você também obteria sucesso se tivesse aplicado unset($_SESSION), toda a sessão seria removida, neste caso até se aplicaria pois o objetivo era o de eliminar os dados de todas as variáveis, mas caso contrário, não faça uso deste. Toda a seção Caso queira remover toda a seção deve proceder da seguinte maneira: Crie uma pasta em WWW chamada de removesessao e escreva o script a seguir:



Salve o script na pasta removesessao com o nome de removesessao.php.

▪▪ Comentários

Observe que aqui também nada foi impresso, mas o motivo é mais sério, as variáveis nem sequer existem, não existe mais nada referente à sessão, pois esta foi completamente destruída. Então, aqui é finalizado o estudo dos fundamentos desta linguagem, é lógico que a PHP nos fornece muito mais recursos, inclusive Orientação a Objetos, porém, com que você aprendeu já conseguirá desenvolver aplicações web, embora, a prática e a continuação do estudo sejam exigências para que possa desenvolver-se cada vez mais. Visando a compreensão de como desenvolver uma aplicação web, integrando todas as linguagens apresentadas, você é convidado a adentrar na próxima unidade. Reúna autonomia, dedicação e disciplina para que seus estudos sejam significativos em cada percurso de aprendizagem.

PROGRAMAÇÃO WEB

87

Unidade de estudo 3 Seções de estudo Seção 1 – Abordagem da aplicação Seção 2 – Desenvolvimento da aplicação Seção 3 – Publicação no seu web site

Exemplo Prático Seção 1

Abordagem da aplicação Tudo o que você estudou nas unidades anteriores lhe ajudará a compreender não só a proposta como também a estrutura e scripts da nossa aplicação exemplo. O objetivo principal deste exemplo é o de ajudá-lo a iniciar o desenvolvimento de uma aplicação web sendo que a ideia final é a de que você possa melhorá-lo estendendo assim os conhecimentos repassados nesta unidade curricular e consequentemente auxiliando no seu desenvolvimento profissional. A ideia da aplicação exemplo é a de um Informativo Virtual como Jornal, CMS ou outro, para que você possa personalizá-lo como desejar no momento em que for efetuar suas implementações de melhorias. Como ideia central o Informativo contém assuntos que são exibidos nas páginas de sua aplicação, estes, podem ser acessados por qualquer usuário web, mas a postagem destes assuntos é efetuada somente por profissionais devidamente autorizados. Algumas particularidades:

1. Qualquer pessoa pode acessar as informações, são os usuários visitantes. 2. Somente os usuários especiais, administradores da aplicação, poderão postar as informações. 3. Todos os arquivos de informações postados são carregados de arquivos de textos, dinamicamente.

A aplicação exemplo não é tão complexa, apenas sugere o início de um trabalho que deve ser continuado e melhorado por você.

Então para iniciar o processo siga na próxima seção onde conhecerá a estrutura geral da aplicação exemplo.

Seção 2

Desenvolvimento da aplicação Agora que você já conhece a proposta do exemplo prático, bem como sua estrutura, vamos ao seu desenvolvimento. Inicialmente crie a estrutura de pastas de sua aplicação, toda aplicação web que se preza deve possuir uma estrutura de pastas e arquivos bem organizada, isto está diretamente ligado a estrutura de sua aplicação, quanto mais organizado melhor também o desempenho de sua aplicação. A estrutura de pasta que você deve criar para sua aplicação é esta conforme figura a seguir. Crie, mesmo que ainda não tenha iniciado o desenvolvimento.

PROGRAMAÇÃO WEB

89

Estrutura de pastas da aplicação:

Figura 27: Estrutura de pastas exemplo prático

Agora é hora de desenvolver a página principal de sua aplicação, segundo os padrões de desenvolvimento de aplicação web, a primeira página de uma aplicação deve ser nomeada como índex (índice), então, vamos a ela. A construção de uma página web deve ser antecedida de um estudo de conteúdo e layout antes de sua elaboração para que, no momento de sua implementação, já saiba o que vai implementar.

Outra informação importante, enquanto estiver desenvolvendo sua aplicação, teste os resultados nos navegadores mais são utilizados, principalmente ao IE e Mozilla Firefox, pois de um navegador para outro existem muitas diferenças em termos de visualização e também de recursos. Tendo criado sua estrutura de pastas, abra o seu editor e escreva o seguinte script:

90

CURSOS TÉCNICOS SENAI

/*Documento CSS*/ /*Configurações para o corpo das páginas*/ body{ margin:5px; font-family: Verdana,Arial,Helvetica, sans-serif; font-size:12px; background-color: #363636; text-align: center; } /*Div geral que delimita a área de visualização das páginas*/ div#geral{ width: 800px; height: 569px; border-right: 1px solid #000000; border-left: 1px solid #000000; margin:0px auto; background-color: #fff; } /*Div para o cabeçalho das páginas*/ div#cabecalho{ width: 800px; height: 90px; font-family:Verdana,Arial, Helvetica, sans-serif; font-size:32px; text-align: center; line-height:90px; color:#104E8B; }

/*Div que separa cabeçalho e rodapé*/ div#divisoria{ width:800px; height:25px; background-color:#104E8B; clear:both; } /* linha divisória do cabeçalho e corpo da página */ /*Configurações css para os links*/ a{ text-decoration: none; /*Retira o sublinhado do link*/ line-height:24px; /*Posiciona, verticalente o texto dos links*/ } /*Configuração do link antes de ser clicado*/ a:link{ font-style: normal; color: #FFFFFF; font-size: 13px; } /*Configuração do link após ser clicado*/ a:visited{ font-style: normal; color: #FFFFFF; font-size: 13px; } /*Efeito hover para o link, ao passar o mouse sobre o link*/ a:hover{ font-style: normal; color: #000000; font-size: 13px; } /*Classe para o link que determina o espaçamento entre eles*/ a.linkscab{ padding: 0px 40px 0px 40px; } /*Div da esquerda da página*/ div#esquerda{ width:200px; margin-top:40px; height:300px; float:left; background-color:#104E8B; color: #FFFFFF; } /*Div login que contém o formulário de login*/ div#login{ width:200px; height:90px; margin-top:20px }

PROGRAMAÇÃO WEB

91

/* CLASSES GERAIS */ .alinha_dir{ text-align:right; } /* usada para alinhar conteúdo a direita */ .alinha_cnt{ text-align:center; } /* usada para alinhar conteúdo ao centro*/ .alinha_esq{ text-align:left; } /* usada para alinhar conteúdo a esquerda*/ /*Div central das páginas*/ div#meio{ width: 592px; height: 380px; top:60px; float:right; background-color: #fff; text-align: center; overflow:auto; } /*Div rodapé das páginas*/ div#rodape{ width: 800px; height: 48px; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000; clear:both; }

Salve o script na pasta css com o nome de layout.css. Ainda não é hora de executar a aplicação, pois trata-se do arquivo de configuração de sua aplicação, então siga as instruções a seguir. Abra um novo documento no seu editor de programas e escreva o seguinte script: :: INFORMATIVO ONLINE - PRINCIPAL :: INFORMATIVO ONLINE Tempo Esportes Fale conosco ÁREA RESTRITA

PROGRAMAÇÃO WEB

93

Usuário: Senha:   © Exemplo didático de aplicação web - Todos os direitos reservados.

Salve o script direto na pasta exemplopratico com o nome de index.php. Agora sim, execute a sua página para verificar como está ficando, lembre-se, deve chamar a página index.php que se encontra na pasta exemplopratico.

94

CURSOS TÉCNICOS SENAI

▪▪ Comentários

O script está documentado com linhas de comentário para que possa compreender melhor as instruções, mas aqui cabe uma rápida explicação, você percebeu que o arquivo está sendo salvo com a extensão .php e não .html? Isto porque existem instruções PHP se não salvar com esta extensão, o servidor não chamará o interpretador PHP para interpretar estas instruções.

▪▪ Atenção 1. Se o script contiver HTML e/ou CSS salve-o com a extensão .html. 2. Se o script contiver HTML e/ou CSS e também Javascript, salve-o com a extensão.html. 3. Se o script só contiver CSS salve-o com a extensão .css. 4. Se o script só contiver Javascript salve-o com a extensão .js. 5. Se o script contiver, no mínimo 1 linha em PHP, salve-o com a extensão .php, não importando se também tem html, css ou Javascript.

▪▪ Resultado

Figura 28: Página principal do exemplo prático

Agora você fará a validação dos campos Usuário e Senha, pois ambos não podem ficar em branco quando enviar os dados do formulário. Recomenda-se que esta validação seja feita no lado cliente, a partir da linguagem Javascript e também no lado servidor a partir da PHP. Para isso implemente o script do arquivo index.php com o seguinte, abaixo da tag e antes da tag :

function valida_login(frmlogin) { /*Início da função */

PROGRAMAÇÃO WEB

95

/* Verifica se o campo do formulário txtusuario está vazio. */ if(frmlogin.txtusuario.value==””) { /* Mostra caixa de mensagem do tipo alerta. */ alert(“Preencha o campo Usuario.”); /* Após o alerta, posiciona o foco da página no campo txtusuario. */ frmlogin.txtusuario.focus(); /* Retorna falso para o evento onsubmit. */ return false; /*Se o campo txtusuario não estiver vazio. */ }else /* Verifica se o campo do formulário txtsenha está vazio. */ if(frmlogin.txtsenha.value==””) { /* Mostra caixa de mensagem do tipo alerta. */ alert(“Preencha o campo Senha.”); /* Após o alerta, posiciona o foco da página no campo txtsenha. */ frmlogin.txtsenha.focus(); /* Retorna falso para o evento onsubmit. */ return false /* Se o campo txtsenha não estiver vazio.*/ }else { /* Retorna verdadeiro para o evento onsubmit. */ return true; } }/* Término da função */

Ainda não terminou, agora localize a tag do formulário e implemente o que está em destaque:

Este novo elemento refere-se a um evento (ação) associado ao formulário, que significa, na prática, que quando o botão submit for acionado é solicitado a uma função chamada valida_login um retorno, se falso os dados do formulário não são enviados, pois significa que algum campo não foi preenchido, do contrário, é retornado o valor true, os dados do formulário são enviados para página login.php, atribuída ao atributo action, do formulário, como você pode observar.

96

CURSOS TÉCNICOS SENAI

Agora sim, salve novamente o script, execute-o e teste. Deixe o campo usuário em branco e clique no botão “Acessar”, uma mensagem de alerta deve aparecer solicitando que o campo Usuário deve ser preenchido como mostra a figura a seguir.

Tempo

Por enquanto só implemente este link, os demais virão na sequência. 4. Na div meio da página index. php implemente o script a seguir:

Figura 29: Validação de campos do formulário

A seguir faça o mesmo teste para o campo senha.

▪▪ Comentários

Muito cuidado neste script, para quem não está muito acostumado, normalmente erra ao implementar e custa muito a localizar o erro pois o interpretador não avisa onde o erro se encontra. Até erros no formulário fazem com que erros nessa rotina possam ser detectados fazendo com que ela não funcione então, muita atenção. Agora você vai trabalhar o seguinte, ao clicar no link do tempo a aplicação carregará, dinamicamente, um arquivo texto dando as condições do tempo, para isso siga as instruções. 1. Abra o editor de texto, bloco de notas ou WordPad, e escreva um pequeno texto sobre o tempo, exemplo: Rio de Janeiro - Máxima 35 - Mínima 24 São Paulo - Máxima 22 - Mínima 18 Santa Catarina - Máxima 22 - Mínima 5. 2. Salve este arquivo com o nome de temp.txt na pasta arquivostextos.



3. Abra o script da página index.php e implemente o que está em destaque a seguir:

PROGRAMAÇÃO WEB

97

5. Salve o arquivo index.php para atualizá-lo. 6. Abra um novo documento em seu editor de programas e escreva o seguinte script:

TEMPO

7. Salve este arquivo na pasta programas/progtempo com o nome de progtempo.php. 8. Abra um novo documento em seu editor de programas e escreva o seguinte script:



98

CURSOS TÉCNICOS SENAI

9. Salve este arquivo na pasta includes com o nome de funcoes.php. Agora sim, se escreveu os scripts corretamente, salvou nas pastas corretas, os referidos scripts, o resultado será o seguinte, quando clicar no link Tempo:

Esportes

4. Salve o arquivo index.php para atualizá-lo. 5. Abra um novo documento em seu editor de programas e escreva o seguinte script:

ESPORTE

6. Salve este arquivo na pasta programas/progesporte com o nome de progtesporte.php.

PROGRAMAÇÃO WEB

99

Agora sim, se escreveu os scripts corretamente, salvou nas referidas pastas, o resultado será o seguinte, quando clicar no link Esportes:

Figura 31: Carregando a página de esportes dinamicamente

▪▪ Comentários

Você conseguiu carregar dinamicamente os textos, a partir de seus respectivos arquivos, simplesmente clicando em seus links. Se por acaso desejar modificar o texto, abra o arquivo texto, salve-o novamente, e chame sua página ou atualize, caso já esteja aberta, que a sua atualização já aparece no texto. Atualizar o arquivo texto fora da sua aplicação não é muito legal, isto obriga você a ter que acessar o servidor, abrir o arquivo, modificá-lo, salvá-lo, tudo isso de fora de sua aplicação, não é mesmo? Fique tranquilo, isto é uma melhoria que você fará no decorrer dos seus estudos nesta unidade e em outras.

Autenticação de usuário Você sabe que o formulário contendo os campos Usuário e Senha serve para limitar o acesso dos usuários à área restrita de sua aplicação, certo? Ou seja, só acessam esta área pessoas devidamente cadastradas em banco de dados, do contrário, o usuário não tem acesso a esta área restrita. O processo de autenticação é este, a partir da informação de um Usuário e Senha é verificado a existência ou não deste usuário, se não existir, uma mensagem é exibida, caso contrário o acesso à área restrita é permitido.

Outra particularidade importante, quando você encontra uma situação como esta, ou seja, precisa em sua aplicação possibilitar o acesso de usuários especiais, isto deve ser encarado com cuidado, pois, normalmente, os usuários especiais é que vão interagir com a aplicação e nem todos podem ou devem ter acesso a todas as funcionalidades da aplicação. Em nosso exemplo estaremos determinando que os usuários que terão acesso a aplicação serão divididos em categorias, ou seja, aqueles usuários que poderão registrar outros usuários terão o nível de permissão 0 - Administrador, já os usuários que carregam, modificam e salvam os arquivos textos terão o nível de permissão1 - Operacional. O usuário Administrador só poderá cadastrar usuários e não poderá modificar os arquivos textos. Já o usuário Operacional só poderá modificar os arquivos textos, não poderá registrar outros usuários da aplicação. Nosso aplicativo exemplo trabalha a autenticação e acesso a área restrita somente para o Administrador, com base nesses procedimentos, você fará, a partir de atividades propostas, o acesso para o usuário Operacional. Vamos iniciar o processo? Primeiramente abra seu editor de programas, carregue o arquivo layout.css e implemente mais uma div central. Mas para que mais uma div central se já dispomos de uma?

É que esta será utilizada com outro fim, o de mostrar uma mensagem e também um formulário, isto faz com que suas especificações modifiquem.

100 CURSOS TÉCNICOS SENAI

div#meio1{ width:800px; height:380px; display:table; overflow:auto; font-size:12px; background-color:#ffffff; float:center; }

Salve o arquivo layout.css para atualizá-lo com mais esta div. Agora implemente mais alguns scripts, solicito que abra um novo documento no seu editor de programas e escreva o seguinte script:



Salve este arquivo com o nome de config.php na pasta includes. Este arquivo contém as informações para a conexão de banco de dados, toda vez que necessitar alterá-las basta fazê-lo somente neste arquivo. Abra novamente um novo documento no seu editor de programas escreva o seguinte script:



Salve este arquivo com o nome de conexao.php na pasta includes. Um recurso interessante implementado nesta aplicação foi a criação de um arquivo contendo uma função que disponibiliza as mensagens que necessita enviar. Cada mensagem tem o seu número correspondente, toda vez que necessitar uma mensagem, basta dar o include deste arquivo, chamar a função e passar o número da mensagem que deseja utilizar. Então abra um novo documento e escreva o seguinte script:



102 CURSOS TÉCNICOS SENAI

Salve este arquivo com o nome de mensagens.php na pasta inclu-

des.

Aproveitando também, é interessante escrever o script do arquivo de logout de sua aplicação, abra um novo documento e escreva o seguinte script:



Salve o arquivo com o nome de logout.php na pasta exemplopratico. Agora você escreverá o script do arquivo login.php, esse receberá o Usuário e Senha informados, fará uma verificação, se Usuário não confere, envia uma mensagem de erro, do contrário, verifica a senha, se senha não confere, envia uma mensagem de erro, se Usuário e Senha OK, cria uma sessão e as variáveis de sessão para o usuário e redireciona a aplicação para a página Usuário(área restrita) para que este possa cadastrar usuários. Abra um novo documento no seu editor de programas e escreva o seguinte script:

:: INFORMATIVO ON-LINE [LOGIN]:: INFORMATIVO ONLINE Retornar © Exemplo didático de aplicação web - Todos os direitos reservados.

Salve este arquivo com o nome de login.php na pasta exemplopratico. Caso informe Usuário ou Senha incorretos, uma mensagem de erro será exibida.

▪▪ Comentários Esta página resume-se, visualmente, a mostrar uma mensagem caso o Usuário ou Senha não conferir, mas por debaixo dos panos, popularmente falando, a página login.php faz muita coisa. Perceba que a página ficou muito simples, poderia ter uma imagem para a mensagem, esta poderia ter uma cor de fundo e ser mais bem posicionada. Tudo isso você aprenderá ainda nesta unidade. Caso o Usuário e Senha estejam OK, o usuário é redirecionado para a área restrita permitindo que este proceda o cadastramento de usuários do sistema. Antes de trabalharmos este script, é necessário destacar o seguinte, visando implementar um pouco de segurança em nossa aplicação, toda página que entender que não pode ser acessada diretamente sem o usuário ter-se autenticado, será feita uma validação de sessão, pois se o usuário se autenticou cria-se uma sessão para este, lembra-se? Pensando assim, abra um novo documento em seu editor de programas e escreva o seguinte script:

Figura 32: Página login com mensagem de usuário ou senha incorreto

PROGRAMAÇÃO WEB

105



106 CURSOS TÉCNICOS SENAI

Salve este arquivo com o nome de valida_sessao.php na pasta includes.

Em toda página que desejar estabelecer que um usuário possa entrar se for autenticado, deve dar um include no arquivo valida_sessao.php, este, por sua vez, verifica se uma sessão encontra-se ativa, se sim permite o acesso a página se não envia uma mensagem de erro. Mas, antes de escrever o script do arquivo usuario.php terá que fazer uma implementação no arquivo layout.css, então abra este arquivo e insira o seguinte:

.barra_opcoes{ width:786px; line-height:20px; /*espaçamento entre linhas*/ padding:0px 0px 0px 5px; /*todos os espaçamentos, topo, direita, inferior e esquerda*/ background-color:#77bb9ed; font-weight:bolder; /*define a espessura da fonte especificada*/ border-bottom:1px solid #999900; } /*esta div é usada para orientar o usuário de que operação do menu encontra-se ativa*/

Salve o arquivo para manter esta atualização. Agora sim, abra um novo documento no seu editor de programas e escreva o seguinte script:

:: INFORMATIVO ON-LINE - ÁREA RESTRITA

PROGRAMAÇÃO WEB

107

INFORMATIVO ONLINE Logout * Usuário : * Senha : * Nome completo :    Permissão: -----------Escolha----------- Nível 0 - Administrador Nível 1 - Operacional         

108 CURSOS TÉCNICOS SENAI

• USUÁRIOS CADASTRADOS USUÁRIO NOME Editar Excluir Retornar © Exemplo didático de aplicação web - Todos os direitos reservados. PROGRAMAÇÃO WEB

109

Salve o arquivo com o nome de usuario.php na pasta programas/ cadastros/cadusuario. Como resultado você pode obter 2 situações, primeira, se o usuário tentar acessar a página usuario.php sem autenticar-se, na url digitar, 127.0.0.1/ exemplopratico/programas/cadastros/cadusuario/usuario.php e pressionar enter, veja o que acontecerá:

Figura 33: Resultado do acesso a página de usuário sem autenticar-se

▪▪ Comentários Isto se dá, principalmente, porque no início do script da página usuário.php você encontra um include para o arquivo valida_sessao.php, ou seja, toda vez que esta página for chamada uma validação de sessão será realizada para saber se o usuário que está acessando está autorizado ou não a acessar a página. Se tudo estiver ok, foi criada uma sessão para o Usuário autenticado, o resultado será o acesso a página restrita, usuario.php, e o cadastramento de novos usuários será permitido, tendo como resultado:

Figura 34: Figura 35: Acesso ao cadastro de usuário

110 CURSOS TÉCNICOS SENAI

Note uma particularidade, nesta página o usuário Administrador poderá cadastrar todos os usuários que podem ter acesso ao sistema e abaixo do formulário ele visualiza os usuários que já foram cadastrados. Outra particularidade que nessa mesma página você inclui, exclui e modifica informações de usuários. Vale ressaltar que tanto a inclusão, como a exclusão e alteração serão executadas a partir de funções criadas e que estas foram elaboradas para trabalhar de forma dinâmica, então, antes de escrever o script para as transações de inclusão, exclusão e alteração, abra um novo documento no seu editor de programas e escreva o seguinte script:



112 CURSOS TÉCNICOS SENAI

Salve o arquivo com o nome de funcoesbd.php na pasta funcoesbd. Agora sim pode dar sequência à transação de inclusão de dados, para isso abra um novo documento no seu editor de programas e escreva o seguinte script:

INFORMATIVO ONLINE Retornar

Salve o arquivo com o nome de val_cad_usuario.php na pasta programas/cadastros/cadusuario. A partir deste programa você já pode inserir os usuários via cadastro como mostra a figura a seguir:

Figura 35: Inclusão de usuário

114 CURSOS TÉCNICOS SENAI

A próxima transação é a da exclusão, aqui uma novidade, você escreverá a seguir um script em Javascrit para enviar uma caixa de diálogo confirmando ou a exclusão do usuário, para isto deve fazer o seguinte, abra um novo documento no seu editor de programas e escreva o seguinte script:

function confirma(cad){ var ask = confirm(“Confirma exclusão do usuário :” + cad + “ ?”); if (ask){ return true; }else{ return false; } }

Salve o arquivo com o nome de funções.js na pasta funcoesjs, este arquivo é javascript puro, tanto que o salvou com a extensão js, de javascript. Estando o script OK, assim que clicar na opção de excluir no cadastro de usuário aparecerá uma caixa de diálogo pedindo confirmação, confira na figura a seguir:

Figura 36: Exclusão de usuário

Concluindo o processo de exclusão abra um novo documento no seu editor de programas e escreva o seguinte script:

::INFORMATIVO ONLINE - EXLUI USUÁRIO:: INFORMATIVO ONLINE Retornar © Exemplo didático de aplicação web - Todos os direitos reservados.

Salve o arquivo com o nome de val_del_usuario.php na pasta programas/cadastros/cadusuario. O Resultado deste script é a exclusão de um usuário como mostra a figura a seguir:

Figura 37: Confirmação da exclusão de um usuário

A última transação a ser desenvolvida é a alteração dos dados de um usuário, abra um novo documento no seu editor de programas e escreva o seguinte script:

116 CURSOS TÉCNICOS SENAI

:: INFORMATIVO ON-LINE - ÁREA RESTRITA INFORMATIVO ONLINE Logout Nome completo: -- ESCOLHA -- Retornar © Exemplo didático de aplicação web - Todos os direitos reservados.

Salve o arquivo com o nome de edi_usuario.php na pasta programas/cadastros/cadusuario. Este script permite mostrar os dados, em um formulário, de um usuário que deseja fazer a alteração como mostra a figura a seguir:

Figura 38: Formulário de atualização do usuário

118 CURSOS TÉCNICOS SENAI

A partir desta página o usuário pode alterar os dados que desejar e ao clicar no botão “Atualizar” o aplicativo é direcionado para a página val_ atu_usuario para que a atualização seja procedida, então, para finalizar este processo abra um novo documento no seu editor de programas e escreva o seguinte script:

INFORMATIVO ONLINE Logout Retornar © Exemplo didático de aplicação web - Todos os direitos reservados.

Salve o arquivo com o nome de val_atu_usuario.php na pasta programas/cadastros/cadusuario . O Resultado deste script é a atualização de um usuário como mostra a figura a seguir:

Figura 39: Confirmação da atualização de um usuário

120 CURSOS TÉCNICOS SENAI

Com este exemplo prático, sua aplicação deve estar, carregando páginas do Tempo e de Esportes, dinamicamente, efetuando autenticação de usuário com uso de Sessões e na Área restrita incluindo, excluindo e alterando dados do banco de dados, além de destruir a sessão. Mas a esta altura deve estar se perguntando, muito bem, consegui desenvolver minha aplicação e agora? Como faço para publicá-la?

Seção 3

Publicação do seu web site Chegada a hora de publicar o seu site em um provedor, também é chegada à hora de tomar decisões, primeiramente se vai hospedar seu web site em um provedor gratuito ou pago? Os provedores pagos oferecem mais recursos e suporte do que os provedores gratuitos, além de serem mais seguros também. Verifique junto aos responsáveis pela empresa provedora, se tem suporte as linguagens e banco de dados que utilizou em seu web site. Verifique também o espaço que o provedor lhe oferece e faça uma investigação. Identifique se existe alguma limitação quanto ao tráfego mensal do seu site. Feita a investigação, você deve partir para a aquisição de um domínio, .org, .com, .br, pelo período mínimo de um ano, por meio de pagamento acordado com a empresa fornecedora do domínio. Normalmente você paga uma anuidade por este domínio, mas informe-se com o provedor escolhido sobre a aquisição domínio. Após a escolha do provedor e aquisição do seu domínio seu site está pronto para ser publicado. Você deve ter percebido que poderíamos ter implementado mais coisas na aplicação e também melhorado algumas outras coisas, mas isto ficará a seu critério. Se chegou até aqui pode perceber que desenvolver aplicações para web é bastante interessante, tem que agregar uma série de conhecimentos, tais como: funcionamento da Internet, servidores, web, banco de dados, tecnologias para web, como HTML , CSS, Javascript, PHP e outras que por ventura se faça necessárias. Você recebeu informações fundamentais para iniciar sua caminhada rumo ao desenvolvimento de aplicações web, cabe a você, desenvolver-se cada vez mais a partir de um estudo mais aprofundado. Outras tecnologias tem se mostrado muito interessantes como: JQuery, Ajax, XHTML, XML e assim por diante, mas não adianta estudá-las se não conhece a base da programação web. Discuta com colegas e professor o assunto, realize as atividades propostas, assim você poderá ampliar sua prática sobre o conteúdo desta unidade estudada.

PROGRAMAÇÃO WEB

121

Finalizando Esta unidade curricular proporcionou conhecimentos para que você seja capaz de desenvolver aplicações web de nível intermediário e também de desenvolver-se bem na investigação e utilização de novas tecnologias que agreguem ao seu desenvolvimento profissional. Em desenvolvimento de aplicações web é fundamental conhecer o ambiente de desenvolvimento que trabalhará, as tecnologias de software que permitam o desenvolvimento, em nível intermediário, de aplicações para web. Isto justifica a estrutura dos assuntos abordados, primeiramente houve a preocupação em oferecer a você subsídios teóricos para que preparasse o ambiente onde estaria desenvolvendo e executando suas aplicações. Conhecendo sobre o ambiente, seus elementos e como instalar já foi possível iniciar o conhecimento sobre as tecnologias de software que precisaria para implementar suas aplicações. Foi que ocorreu, iniciou-se o trabalho a partir do conhecimento da linguagem HTML, onde procurou-se focar nos recursos principais e fundamentais para o desenvolvimento de web sites e/ou aplicações web. Estudando HTML a base da Internet, partiu-se para o estudo da CSS, que como você acompanhou, auxilia a HTML estilizando seus componentes, podendo esta ser trabalhada de várias formas, adequando as suas necessidades. Você teve a oportunidade em conhecer uma linguagem de programação dinâmica, optou-e pela PHP. Neste contexto o foco foi os fundamentos da linguagem, chegando a um nível intermediário não trabalhando em níveis avançados, mas possibilitando que o faça, desde que compreendido os assuntos e desenvolvido os exemplos e atividades propostas. Estudar programação requer muita dedicação, foco, prática e perseverança, caso não tenha compreendido alguns dos conhecimentos repassados procure auxílio, mas não permaneça com a dúvida. Procure também evoluir, aqui foi apenas um início de um processo, fundamental, é lógico, mas a primeira caminhada para sua evolução como desenvolvedor web profissional.

PROGRAMAÇÃO WEB

123

Referências ▪▪

MELLO, Alexandre; NASCIMENTO, Maurício. PHP Profissional. 1. ed. São Paulo, SP: Novatec, 2007.

▪▪

MUTO, Claudio. PHP & MYSQL – Guia Introdutório. 3.ed.Rio de Janeiro, RJ: BRASPORT, 2006.

▪▪

SOARES, Walace. PHP 5 – Conceitos, Programação e Integração com Banco de Dados. 2. ed. São Paulo, SP: Érica, 2006.

PROGRAMAÇÃO WEB

125

Equipe de Desenvolvimento de Recursos Didáticos Coordenação de Educação a Distância Beth Schirmer Coordenação Projetos EaD Maristela de Lourdes Alves Coordenação de Desenvolvimento de Recursos Didáticos Gisele Umbelino Projeto Educacional Angela Maria Mendes Israel Braglia Projeto Gráfico Daniela de Oliveira Costa Jordana Paula Schulka Juliana Vieira de Lima

Design Educacional Rozangela Aparecida Valle Capa, Ilustrações, Tratamento de Imagens D’imitre Camargo Martins Diego Fernandes Luiz Eduardo Meneghel Diagramação Juliana Vieira de Lima Revisão e Fechamento de Arquivos Daniela de Oliveira Costa Juliana Vieira de Lima Revisão Ortográfica e Normatização SENAI/SC em Jaraguá do Sul

PROGRAMAÇÃO WEB

127