Programação WEB PROF. RAFAEL VARGAS

Transcrição

1 Programação WEB PROF. RAFAEL VARGAS A U L A 0 1 I N T R O D U Ç Ã O À P R O G R A M A Ç Ã O W E B E S T E M A T E R I A L FOI E L A B O R A D O P E L O P R O F E S S O R F L Á V I O I Z O

2 Objetivos da Aula 1.0 A Web; 2.0 Websites estáticos e dinâmicos; 3.0 Modelo Cliente Servidor; 4.0 Protocolo HTTP; 5.0 Métodos (GET e POST); 6.0 Estrutura da URL; 7.0 Tipos de Websites; 8.0 Complexidade de Websites;

3 1.0 A Web A Internet é um conglomerado de redes em escala mundial de milhões de computadores que permite o acesso a informações e todo tipo de transferência de dados. A World Wide Web, "a Web" ou "WWW ("rede de abrangência mundial", traduzindo literalmente) é uma rede de computadores na Internet que fornece informação em forma de hipertexto.

4 1.0 A Web

5 1.0 A Web A Web é um dos muitos serviços oferecidos pela Internet; A Web utiliza a Internet como meio de transmissão de hipertextos; Outros serviços: Acesso remoto, transferência de arquivos, correio eletrônico, mensagens instantâneas etc.

6 1.0 A Web A Web surgiu aproximadamente em 1989, em um projeto nuclear; O objetivo original foi estreitar o relacionamento entre os colegas do projeto; O primeiro servidor web, um NeXTcube usado por Berners-Lee no CERN

7 1.0 A Web Site ou sítio? R: Os dois. Um site é um conjunto de hipertextos acessíveis pelo protocolo HTTP; O conjunto de todos os sites existentes formam a Web;

8 1.0 A Web Os sites são acessados através dos Browsers (Navegadores); Exemplos! A navegação ocorre através dos links; Alguns chamam o ato de navegar entre os links de surfar; Microsoft Internet Explorer Mozilla Firefox Netscape Navigator (In Memoriam) Opera Safari Google Chrome Midori (linux) Arora (linux) Camino (Mac OS) etc.

9 1.0 A Web Navegadores de web mais usados no Brasil e no Mundo em janeiro

10 2.0 Websites estáticos e dinâmicos Websites Estáticos: São web sites que não possuem nenhum tipo de personalização. Toda e qualquer informação está disponível para o público em geral. Exemplos!

11 2.0 Websites estáticos e dinâmicos Websites Dinâmicos: Ao contrário dos websites estáticos, websites dinâmicos trabalham com personalização. As informações e serviços disponíveis no web site serão tratados de forma pessoal, com características que atendam ao visitante. Exemplos!

12 3.0 Modelo Cliente Servidor Modelo Cliente-Servidor;

13 4.0 Protocolo HTTP HTTP significa HyperText Transfer Protocol (Protocolo de Transferência de Hipertexto) e é o protocolo utilizado por clientes e servidores para transferência de dados hipermídia (imagens, sons e textos) na World Wide Web.

14 4.0 Protocolo HTTP Visão Geral

15 4.0 Protocolo HTTP HTTP: hypertext transfer protocol Protocolo da camada de aplicação da Web Modelo cliente/servidor Cliente: navegador que solicita, recebe e apresenta objetos da Web Servidor: envia objetos em resposta a pedidos

16 4.0 Protocolo HTTP Alguns exemplos de códigos vindos na primeira linha da mensagem de resposta servidor cliente. 200 OK Requisição bem-sucedida, objeto requisitado a seguir nesta mensagem 304 Not Modified Objeto requisitado não foi modificado 400 Bad request Mensagem de requisição não compreendida pelo servidor 404 Not Found Documento requisitado não encontrado neste servidor 505 HTTP version not supported O servidor não suporta a versao HTTP solicitada

17 5.0 Métodos Método GET: Método que solicita ao servidor o envio de um recurso; é o serviço essencial para o protocolo. Os conteúdos aparecem na barra de endereços do navegador. Por exemplo: (Exemplo de invasão )

18 5.0 Métodos Método POST: Método que permite que o cliente envie mensagens e conteúdo de formulários para servidores que irão manipular a informação de maneira adequada. Os conteúdos não aparecem na barra de endereços do navegador. Exemplos de métodos Get e Post

19 6.0 Estrutura da URL O Endereço web: http: => Protocolo; // => raiz do endereço da internet; => domínio ou IP mod4/pw/arq1.pdf => caminho a percorrer

20 7.0 Tipos de Websites Informativo, prestando informações. Funcional, oferecendo serviços. Entretenimento, servindo como diversão para as pessoas.

21 7.0 Tipos de Websites

22 8.0 Complexidade de Websites Qual site é mais complexo de se fazer? Grandes Portais e E-Commerce;

23 Programação WEB PROF. RAFAEL VARGAS A U L A 0 2 E S T R U T U R A H T M L P A R T E I E S T E M A T E R I A L FOI E L A B O R A D O P E L O P R O F E S S O R F L Á V I O I Z O

24 Objetivos da Aula 1.0 Ferramentas necessárias; 2.0 O que é HTML? 3.0 O que são tags HTML? 4.0 Criando seu primeiro Website; 5.0 Outras tags HTML; 6.0 Atributos das tags HTML; 7.0 Criando links; 8.0 Exercício;

25 Introdução Criar um site não é tão difícil quanto parece; É necessário ter disciplina e estar atento aos conceitos abordados e suas formas de aplicação;

26 1.0 Ferramentas Necessárias Utilizaremos o notepad ou Notepad ++, tendo em vista que é um programa encontrado em qualquer equipamento; O que almeja-se agora é simplicidade, pois se aprendermos a criar um website (mesmo que simples) no notepad, posteriormente poderar-se-á utilizar qualquer outra ferramenta mais robusta (Frontpage, Dreamweaver etc.);

27 1.0 Ferramentas Necessárias Outros editores que podem ser utilizados são: Pico (Linux) ou TextEdit (Mac); Outro programa que será necessário é o browser; Pode-seutilizar qualquer um: Firefox; Internet Explorer; Opera; etc.

28 2.0 O que é HTML? Língua mãe do navegador; Inventado em 1990 por Tim Berners-Lee (troca de informações); HTML é uma linguagem que possibilita apresentar informações na Internet; Quando abre-se uma página na Internet, vê-se a interpretação que seu navegador faz do HTML;

29 2.0 O que é HTML? Façamos um teste: Acesse um site qualquer; Clique com o botão direito; E clique em código fonte ou exibir código fonte ;

30 2.0 O que é HTML? Existem diversas linguagens para construção de Websites: PHP, ASP, Java, Coldfusion etc. No entanto, o HTML é a base para todas, ou seja, de nada adianta utilizar umas dessas linguagens citadas se não conhecermos o HTML;

31 2.0 O que é HTML? HTML: HyperText Mark-up Language; Hyper é o oposto de linear. Você pode ir de onde estiver para onde quiser. Não é necessário que você tenha visitado o site MSN.com antes de visitar o site HTML.net. Text é texto e não há mais nada a acrescentar. Mark-up significa marcação e é o texto que você escreve. Você cria a marcação da mesma forma que escreve em um editor seus cabeçalhos, marcadores, negrito, etc Language significa linguagem e é exatamente o que HTML é; uma linguagem.

32 3.0 O que são tags HTML? Tags são rótulos usados para informar ao navegador como deve ser apresentado o website. Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">". Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de fechamento: </comando>. A diferença entre elas é que na tag de fechamento existe um barra "/".

33 3.0 O que são tags HTML? Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag. Existe uma exceção: para algumas tags a abertura e o fechamento sedána mesma tag. Tais tags contém comandos que não necessitam de um conteúdo para serem processados, isto é, são tags de comandos isolados, por exemplo, um pulo de linha é conseguido com a tag <br /> ou régua <hr />.

34 3.0 O que são tags HTML? A seguir veremos alguns exemplos; Para testar seus exemplos deve-se salvar o arquivo (notepad) com a extensão.html Posteriormente deve-se: Abrir o Navegador; Clicar em Arquivo (file) -> Abrir (open); Procurar o arquivo e abrir;

35 3.0 O que são tags HTML? Exemplos: Criar um texto negrito com as tags <b> e </b>; Criar um texto em itálico com as tags <i> e </i>; Vamos colocar entre esses textos a tag <br />; <b>aqui tem um texto em negrito</b><br /> <i>aqui tem um texto em itálico</i>

36 3.0 O que são tags HTML? As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que trata-se de um cabeçalho (h vem de "heading" - cabeçalho ). Sendo <h1> o cabeçalho maior e o <h6> o cabeçalho menor; <h1>aqui tem um texto em tamanho grande</h1><br /> <h3>aqui tem um texto em tamanho médio</h3><br /> <h6>aqui tem um texto em tamanho pequeno</h6>

37 3.0 O que são tags HTML? Lembre-se que por padrão escrevemos as tags em minúsculo;

38 4.0 Criando seu primeiro Website A estrutura HTML básica é composta das seguintes tags: <html lang= pt-br > <head> <meta charset= UTF-8 /> </head> <body> </body> </html> A tag <html> indica o início/fim do conteúdo do site; A tag <head> indica o início/fim do cabeça do site. Fornece informações sobre o site. Ex.: Onde fica o título da página; A tag <body> indica o início/fim do corpo do site. Todo o conteúdo do site fica entre essas tags. Não esqueça de indentar!

39 4.0 Criando seu primeiro Website Agora vamos criar uma página: Insira as tags básicas do HTML; Insira o título Minha primeira página na disciplina PW do site entre as tags <title> e </title>; Insira o conteúdo Você está acessando a página do Fulano (colocar seu nome) entre as tags <p> e </p>; Salve a página (extensão.html) Abra a página pelo navegador web (vimos anteriormente);

40 4.0 Criando seu primeiro Website Resultado: <html lang= pt-br > <head> <meta charset= utf-8 /> <title>minha primeira página web na disciplina PW</title> </head> <body> <p>você está acessando a página do Rafael!</p> </body> </html> Agora, teste no navegador!

41 4.0 Criando seu primeiro Website Faça esse outro exemplo (Observe o que acontece): <html lang= pt-br > <head> <meta charset= UTF-8 /> <title>meu website</title> </head> <body> <h1>um cabeçalho</h1> <p>texto, texto texto, texto</p> <h2>subtítulo</h2> <p>texto2, texto2 texto2, texto2</p> </body> </html> Agora, teste no navegador!

42 5.0 Outras tags HTML <i>texto itálico</i> <b> texto em negrito </b> <b><i>texto itálico e negrito </i></b> <br /> <!-- quebra de linha --> <hr /> <!-- quebra de linha --> <ul> <!-- início de lista não ordenada --> </ul> <li>um item de lista</li> <li>outro item de lista</li> Item da lista Outro item da lista

43 5.0 Outras tags HTML <ol> <!-- início de lista não ordenada --> </ol> <li>um item de lista</li> <li>outro item de lista</li> 1. Primeiro item da lista 2. Segundo item da lista <blockquote>indentação</blockquote>

44 6.0 Atributos das tags HTML Os atributos auxiliam às tags para que elas sejam personalizadas de acordo com a necessidade do desenvolvedor; Pode-sealterar cor, fundo, tipo de objeto etc.

45 6.0 Atributos das tags HTML Exemplos em Listas Desordenadas:

46 6.0 Atributos das tags HTML Exemplos em Listas Ordenadas:

47 6.0 Atributos das tags HTML Utilize a disciplina Aplicativos Gráficos para aprender CSS e utilizar na programação web;

48 6.0 Atributos das tags HTML Tabela de cores: Em hexadecimal O Uso Cores em Interfaces com o Usuário

49 7.0 Criando links Criar um link é muito simples, basta utilizar a tag <a>texto com link</a>; É necessário também utilizar o atributo href que conterá o endereço onde o usuário será remetido ao clicar no link; <a href=" tem um link para o site Globo.com</a> <a href="pagina2.htm">aqui um link para a pagina 2</a> <a href= subdiretorio/pagina2.htm">aqui tem um link para a página 2</a> <a href="../pagina1.htm">aqui um link para a pagina 1</a>

50 7.0 Criando links Pode-se criar links internos, dentro da própria página - por exemplo, uma tabela de conteúdos ou índice com links para cada um dos capítulos em uma página. Tudo o que você precisa é usar o atributo id e o símbolo "#". Use o atributo id para marcar uma área de link; <h1 id="heading1">cabeçalho 1</h1> E chame o link: <a href="#heading1">link para o cabeçalho 1</a>

51 7.0 Criando links Vejamos o exemplo: <html lang="pt-br"> <head> <meta charset="utf-8" /> <title>links</title> </head> <body> <p><a href="#heading1">link para cabeçalho 1</a></p> <p><a href="#heading2">link para cabeçalho 2</a></p> <h1 id="heading1">cabeçalho 1</h1> <p>texto texto texto texto</p> <h1 id="heading2">cabeçalho 2</h1> <p>texto texto texto texto</p> </body> </html>

52 7.0 Criando links Link para , ou seja, ao clicar será aberta a tela do programa de correio eletrônico; <a href="mailto:flavio@flavioizo.com"> para Flávio</a> Adicionando outros atributos: <a href="pagina2.html" title="essa é a página 2">Link para a página 2</a>

53 7.0 Criando links Atributo target : O atributo target possibilita abrir ó link de diversas formas: Abrir na mesma página, usa-se target= _self ; Abrir em uma nova página, usa-se target= _blank ; _parent e _top são muito utilizados quando utilizamos frames, por isso não iremos abordar seu estudo neste momento; <a href= pagina2.html target= _self >Link para a página 2</a> <a href= pagina2.html target= _blank >Link para a página 2</a>

54 8.0 Exercícios de fixação Faça a IFES-PW-LISTA01.pdf

55 Programação WEB PROF. RAFAEL VARGAS A U L A 02 E S T R U T U R A H T M L P A R T E I I E S T E M A T E R I A L FOI E L A B O R A D O P E L O P R O F E S S O R F L Á V I O I Z O

56 Objetivos da Aula 1.0 Inserindo imagens; 2.0 Criando tabelas; 3.0 Introdução ao CSS; 4.0 Uploading páginas; 5.0 Web Standards e Validação; 6.0 Dicas Finais; 7.0 Exercício;

57 1.0 Inserindo imagens Inserir imagens em um site é muito fácil e fundamental para quem quer atrair o público com visitas frequentes; Tudo o que precisamos é utilizar os benefícios das tags ; No caso das imagens a tag é <img src= foto.jpg /> Repare que essa tag é simples, ou seja, se fecha na mesma tag;

58 1.0 Inserindo imagens Suponhamos que temos uma imagem denominada logo_ifes.jpg Obs.: Para obter-se uma organização recomenda-se criar uma pasta chamada img e colocar todas as imagens do site dentro dela. O mesmo vale para pdfs, criando-se uma pasta pdf, ou musicas para arquivos mp3, wma etc.

59 1.0 Inserindo imagens Voltando à nossa imagem denominada logo_ifes.jpg; Coloque a img dentro da pasta img; Para inserí-la na página do site basta colocar: <img src= img/logo_ifes.jpg alt= Logo do IFES /> O atributo alt serve para exibir um texto caso a imagem não carregue, ou caso o usuário seja deficiente visual; (Uso obrigatório!) Utilize o <title> para exibir uma popup quando colocar mouse sobre a imagem.

60 1.0 Inserindo imagens Outros atributos que podem ser utilizados: height= 300 -> define a altura da imagem; width= 600 -> define a largura da imagem; border= 0 -> largura da borda, sendo zero define sem borda; <img src= img/logo_ifes.jpg alt= algo height= 300 width= 600 border= 0 /> Para editar as imagens recomenda-se o software Irfanview encontrado no link <

61 1.0 Inserindo imagens Quando gostar de uma imagem que está na Internet e quiser copiá-la, basta clicar com o botão direito do mouse sobre a imagem e salvar imagem como. Assim, basta escolher um local no seu HD e salvá-la; Lembre-se de citar os direitos autorais;

62 1.0 Inserindo imagens E como fazer uma imagem ser um link, ou seja, ao clicar nela, esta deverá abrir um link; Vamos relembrar como colocar um link convencional: E com imagem: <a href= >Site do IFES</a> <a href= ><img src= img/logo_ifes.jpg alt= Logo do IFES /></a> Perceba que a imagem está entre as tags <a>, assim como faz-se no link convencional;

63 2.0 Criando tabelas Tabelas nada mais são do que linhas x colunas; Para se criar um site elas são primordiais (que não me ouçam os usuários de tableless ); Como tudo que temos visto, criar tabelas em html é simples; Basta conhecer cada uma das tags: <table>, <tr> e <td>;

64 2.0 Criando tabelas Vejamos um exemplo: <table> <tr> <td>célula 1</td> <td>célula 2</td> </tr> <tr> <td>célula 3</td> <td>célula 4</td> </tr> </table> Entendeu? É simples assim

65 2.0 Criando tabelas Vamos às tags: <table> abre e fecha uma tabela; <tr> Table Row: abre e fecha uma linha; <td> Table Data: abre e fecha uma coluna; <table> <tr> <td>célula 1</td> <td>célula 2</td> </tr> <tr> <td>célula 3</td> <td>célula 4</td> </tr> </table>

66 2.0 Criando tabelas Se quisermos que apareçam as bordas basta adicionar o atributo border= 1 na tag table. Veja: <table border= 1 > <tr> <td>célula 1</td> <td>célula 2</td> </tr> <tr> <td>célula 3</td> <td>célula 4</td> </tr> </table>

67 2.0 Criando tabelas Outros atributos da tag <table>: Cellpadding: Espaço dentro da célula; <table border= 1 cellpadding="0" cellspacing="0" bordercolor="#ff0000 bgcolor="#ffff00" width= 400 > Cellspacing: Espaço entre as células; bordercolor: cor da borda; <tr> <td>célula 1</td> <td>célula 2</td> </tr> bgcolor: cor de fundo de TODA A TABELA; width: Define a largura da tabela; <tr> <td>célula 3</td> <td>célula 4</td> </tr> </table>

68 2.0 Criando tabelas Outros atributos da tag <tr>: bordercolor: cor da borda da linha; bgcolor: cor de fundo de TODA A LINHA; <table border= 1 cellpadding="0" cellspacing="0" bordercolor="#ff0000 bgcolor="#ffff00 width= 300 > <tr bgcolor="#00cc00" bordercolor="#000000" > <td>célula 1</td> <td>célula 2</td> </tr> <tr> <td>célula 3</td> <td>célula 4</td> </tr> </table>

69 2.0 Criando tabelas Outros atributos da tag <td>: <table border= 1 cellpadding="0" cellspacing="0" bordercolor="#ff0000 bgcolor="#ffff00" colspan: mescla > uma quantidade de colunas; <tr> <td colspan="2" bgcolor="#00cc00" bordercolor="#000000" align="center">célula bordercolor: cor 1</td> da borda da célular; </tr> rowspan: mescla uma quantidade de linhas; bgcolor: cor de fundo da célula; <tr> <td>célula align: alinhamento 2</td> do conteúdo da célula; <td rowspan="2" bgcolor="#0066ff">célula 3</td> </tr> <tr> <td>célula 4</td> </tr> </table>

70 2.0 Criando tabelas Vamos tentar criar a tabela abaixo:

71 3.0 Introdução ao CSS CSS é Cascading Style Sheets (CSS) ou Folhas de Estilo em Cascata; Para saber mais sobre CSS acesse o link A seguir será somente demonstrada algumas técnicas de CSS;

72 3.0 Introdução ao CSS Vamos ao exemplo: <p style="font-size:20px;">este parágrafo em tamanho de fonte igual a 20px</p> <p style="font-family:courier;">este parágrafo em fonte Courier</p> <p style="font-size:20px; font-family:courier">este parágrafo em fonte Courier e tamanho 20px</p>

73 3.0 Introdução ao CSS Apesar de funcionar, não é recomendado que utilizemos a inserção de CSS da forma como vimos no slide anterior; É recomendável que façamos a centralização dos códigos, para que possamos reaporveitá-los; A seguir veremos um exemplo:

74 3.0 Introdução ao CSS <html> <head> <title>minha primeira página CSS</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial} h2 {font-size: 15px; font-family: courier} p {font-size: 8px; font-family: times new roman} </style> </head> <body> <h1>minha primeira página CSS</h1> <h2>bem vindo à minha primeira página CSS</h2> <p>aqui você verá como funciona CSS</p> </body> </html>

75 3.0 Introdução ao CSS Uma outra solução (mais recomendada) é criar a folha de estilos em um arquivo separado. Assim, basta importar esse arquivo e utilizar a folha de estilos para todas as páginas; É ou não é um grande quebra galho;

76 3.0 Introdução ao CSS O CSS pode moldar muito mais coisas, tais como cor e imagem de fundo; <p style="color:green;">texto verde</p> <h1 style="background-color: blue;">cabeçalho com fundo azul</h1> <body style="background-image: url('

77 4.0 Uploading páginas Para disponibilizar sua página na Internet para que todos vejam você precisa de duas coisas: Um servidor de hospedagem; Um programa de ftp para subir seu site; Pode-se procurar um domínio disponível no site ou Um servidor pago muito bom é o Hostnet.com A seguir, daremos exemplos de serviços gratuitos;

78 4.0 Uploading páginas Servidor gratuito: Clique em Criar Conta e faça seu cadastro;

79 4.0 Uploading páginas Um programa de ftp interessante e gratuito é o FireZilla; Este programa está disponível em filezilla.sourceforge.net;

80 4.0 Uploading páginas Para subir o site: Conecte-se à Internet e abra o programa FTP. Insira "Host Name" ("ftp.hostinger.com.br" no "Address"), nome do usuário (em "User") e senha (em "Password") Clique "Connect".

81 4.0 Uploading páginas Para subir o site: Você agora tem acesso ao servidor. Em um lado da janela do programa você verá os diretórios e arquivos do seu computador ("Local Site"), e no outro o do servidor ("Remote Site");

82 4.0 Uploading páginas Ache os seus documentos HTML e imagens a serem publicadas (no "Local site") e transfira para o servidor ("Remote site") simplesmente dando um clique duplo nos arquivos. Agora o mundo todo poderá ver seu site! (Por exemplo, no endereço

83 4.0 Uploading páginas Dê a uma das páginas o nome de "index.htm" (ou "index.html") e ela será automaticamente a página de entrada no site, ou seja, basta digitar e abrirá

84 4.0 Uploading páginas Quando estiver um expert em PW uma boa ideia será comprar um domínio, ou seja, um espaço só seu no servidor. Assim, você poderá ter um site

85 5.0 Web Standards e Validação Há diversas formas de se escrever um código HTML; Assim, sendo possível que tenhamos diversos sites com tecnologias e detalhes específicos; Existe uma organização denominada W3C (World Wide Web Consortium) que busca a normalização da codificação HTML, para facilitar a leitura e interpretação pelos browsers;

86 5.0 Web Standards e Validação No início, sem concorrência, o Netscape não se preocupava com normas; Com o surgimento do IE, a Microsoft tentou cada vez mais se fortalecer e além de distribuir gratuitamente o navegador oferecia suporte para as normas do W3C (não todas);

87 5.0 Web Standards e Validação Atualmente é o IE quem detém uma considerável fatia do mercado e o HTML passou a ser conhecido como XHTML (extensible HTML);

88 5.0 Web Standards e Validação Então, quando você codifica HTML de acordo com as normas do W3C, você está construindo um website para ser visualizado em todos os navegadores; Está aí mais um motivo para desenvolver de acordo com a mais nova versão do HTML, que é o XHTML.

89 5.0 Web Standards e Validação Para informar ao navegador a versão que estamos utilizando é necessário colocar na primeira linha: <!DOCTYPE html> <html lang="pt-br"> <head> <title>título</title> </head> <body> <p>texto texto</p> </body> </html>

90 5.0 Web Standards e Validação Uma DTD informará ao navegador como deve ser lido e renderizado o HTML. Use o exemplo mostrado, como um template para todos os seus futuros documentos HTML. O DTD é importante ainda, para a validação da página. Quer validar a sua página? Acesse

91 6.0 Dicas Finais Aconselha-se a escrever seus documentos HTML de forma ordenada e estruturada. Assim, você estará não só mostrando aos outros que possui uma base sólida de conhecimento mas também estará facilitando a leitura, interpretação e manutenção do código. Siga as normas e valide seu código. Mas, não faça disto uma fonte de stress. Escreva um XHTML claro, use o DTD e valide suas páginas no validator.w3c.org.

92 6.0 Dicas Finais Coloque conteúdos nas suas páginas. Lembre-se que HTML é apenas a ferramenta que possibilita apresentar informação na Internet, assim é necessário que haja a informação a ser apresentada ou seja, o conteúdo. Páginas lindas e bem desenhadas são ótimas, mas as pessoas buscam informação na Internet.

93 6.0 Dicas Finais Evite encher suas páginas com imagens pesadas e outros "balangandans" que você encontra na Internet. Isto faz com que suas páginas demorem a carregar e é frustante para o usuário. Páginas que demoram mais de 10 segundos para carregar podem perder até 50% dos seus visitantes.

94 7.0 Exercícios Faça a IFES-PW-LISTA02.pdf

95 Programação WEB PROF. RAFAEL VARGAS A U L A 03 I N T R O D U Ç Ã O A O S F O R M U L Á R I O S E S T E M A T E R I A L FOI E L A B O R A D O P E L O P R O F E S S O R F L Á V I O I Z O

96 Objetivos da Aula 1.0 Estrutura de uma página; 2.0 Formulários em HTML HTML5 3.0 Novos tipos de entrada (HTML 5) 4.0 Novos elementos de formulário (HTML 5) 5.0 Novos atributos de Formulários (HTML 5) 6.0 Detalhando os campos do formulário (revisão) 7.0 Formulários em HTML Exemplos 8.0 Exercício

97 1.0 Estrutura de uma Página Uma página HTML tem a seguinte estrutura básica: <html lang="pt-br"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="estilo.css"> <title>título da página</title> </head> <body> <p>este é o primeiro parágrafo do texto.</p> <p>este é o segundo parágrafo.</p> </body> </html>

98 2.0 Formulários em HTML O formulário é o meio que permite criar mais interatividade entre a programação e o usuário. É por meio dele que recebemos os valores inseridos pelos usuários e podemos armazenar em um banco de dados, testar com estruturas condicionais etc.

99 2.0 Formulários em HTML Uma estrutura de formulário possui vários campos que permitem a entrada de dados. Abaixo, no quadro, colocamos algumas tags utilizadas nos formulários.

100 2.0 Formulários em HTML Tag <Form> Os forms fazem parte do código html, portanto devem ser definidos como as tags desta linguagem. Sempre com uma tag de abertura e outra de fechamento, inserindo o conteúdo do formulário entre estas duas.

101 2.0 Formulários em HTML Tag <Form> Name: Nome do formulário. Não pode existir mais de um formulário com o mesmo valor para o name na mesma página. Action: Todo formulário deve ser enviado para algum local. Sendo assim, o action é o script ou página para onde os dados serão submetidos. Neste script que normalmente os dados são tratados.

102 2.0 Formulários em HTML Tag <Form> Method: É o método de envio dos dados. Pode ter dois valores: GET = Passa os valores pela URL, ou seja, podemos ver as variáveis e os seus respectivos valores na URL da página destino, definida no campo action. Tem limitação de 256 bytes. Não é muito aconselhável o uso do método GET, pois ele expõe o nome e valor das variáveis, o que pode ser utilizado por pessoas com intenções maléficas. POST = Passa as variáveis de maneira transparente para o usuário. É o método mais aconselhável, pois não fica visível aos olhos do usuário.

103 2.0 Formulários em HTML Tag <Form> Enctype: é o tipo de empacotamento de envio dos dados do formulário. O valor padrão é o application/x-www-form-urlencoded, no entanto quando desejarmos fazer envio de arquivo pelo formulário (campo input file ) nós devemos definir o enctype como multipart/form-data, pois este irá converter o arquivo para binário e enviá-lo.

104 2.0 Formulários em HTML Tag <label> Essa tag define um rótulo para o campo. Exemplo: Observe que o no exemplo acima, eu combinei o rótulo com o evento de javascript onmouseover(). Assim, ao passar o mouse por cima do rótulo, será exibido um alert() com a mensagem teste ;

105 2.0 Formulários em HTML Tag <input> A tag input serve para efetuar a entrada de dados. Ela possui vários tipos (type) e por isso é muito utilizada. Os principais types são: text, password, file, hidden, checkbox, radio, button, reset, submit e image.

106 4.0 Formulários em HTML Exemplo

107 2.0 Formulários em HTML Tag <input> Vamos destacar alguns atributos da tag input: Size: define o tamanho do campo em caracteres Maxlength: Define a quantidade máxima de caracteres do campo Accesskey: define a tecla de acesso rápido (sem uso do mouse) para o campo. Lembre-se que você deve utilizar a seguinte combinação: SHIFT + ALT + accesskey

108 2.0 Formulários em HTML Tag <input> Vamos destacar alguns atributos da tag input: Tabindex: Define a sequência para que o campo receba o foco do cursor. Ex.: Ao apertar a tecla TAB o primeiro campo será o que tiver o tabindex igual a 1. Ao apertar novamente ele irá para o tabindex 2 e assim sucessivamente. Autofocus: O Atributo autofocus define qual elemento do formulário deve receber o foco assim que a página for carregada.

109 2.0 Formulários em HTML Tag <input> Vamos destacar alguns atributos da tag input: Disabled: Utilizado em todos os campos, esse atributo desabilita o campo. Não é possível nem enviar o valor dele quando o formulário é submetido. Readonly: Torna o campo como somente leitura. Não é possível alterar o valor para do campo.

110 2.0 Formulários em HTML Tag <input> Um parâmetro que pode ser utilizado para informar ao usuário o que deve ser digitado e automaticamente apagar ao ser clicado : placeholder = Digite seu nome... onclick= javascript:campo.value= ;

111 2.0 Formulários em HTML Tag <input> Saída do código:

112 2.0 Formulários em HTML Tag <textarea> O textarea (ou área de texto) é o campo que exibe um campo de texto maior, que permite ao usuário inserir um texto com várias linhas.

113 2.0 Formulários em HTML Tag <textarea> Vamos destacar alguns atributos: Rows: Define o número de linhas do campo. Esse atributo somente limita o tamanho do campo e não a quantidade de valores inseridos nele. Cols: Define o número de colunas do campo (largura).

114 2.0 Formulários em HTML Tag <select> Essa opção de conteúdo é muito utilizada e importante quando necessitamos exibir informações em forma de lista. Essa lista pode ser exibida em forma de listagem ou através de um combo. Veja os dois exemplos:

115 2.0 Formulários em HTML Tag <select> Tipo Combo (você clica na seta e aparecem as opções):

116 2.0 Formulários em HTML Tag <select> Tipo Listagem (as opções já aparecem listadas de acordo com o número de linhas estabelecidas):

117 2.0 Formulários em HTML Tag <select> Multiple: Permite ao usuário escolher mais de uma opção. Para que essa opção funcione, você deve estabelecer o size com um valor maior que 1 (um). Selected: Esse atributo deve ser colocado na tag <option> e faz com o item da lista já apareça selecionado. OBS.: Para selecionar mais de uma opção, utilize o CTRL ou SHIFT.

118 2.0 Formulários em HTML Botão Submit Quando utilizamos um botão do tipo submit, isso indica que todos os valores digitados no formulário serão enviados para a página identificada no atributo action. Já o botão do tipo reset, apaga todos os dados inseridos no formulário.

119 2.0 Formulários em HTML Exercício Elabore o exercício 01 da Lista 03

120 3.0 Novos Tipos de Entrada no HTML 5 Valores acrescentados ao atributo type da tag <input>: color date datetime-local month number range time url week OBS.: Não são todos os browsers que aceitam as novas funcionalidades

121 3.1 Tipo de Entrada color O tipo color é utilizado para campos de entrada que devem conter uma cor. Exemplo de código: Selecione a sua cor favorita: <input type="color" name="favcolor"> Suporte: Firefox, Chrome e Opera

122 3.2 Tipo de Entrada date O tipo date permite que o usuário selecione uma data. Exemplo de código: Data de Nascimento: <input type="date" name="nasc"> Suporte: Chrome, Safari e Opera

123 3.3 Tipo de Entrada datetime-local O tipo datetime-local permite que o usuário selecione uma data e hora (sem fuso-horário). Exemplo de código: Entrada: <input type="datetime-local" name="ponto"> Suporte: Chrome, Safari e Opera

124 3.4 Tipo de Entrada O tipo é usado para campos de entrada que devem conter um endereço de . A validação ocorrerá automaticamente quando o campo for submetido. Exemplo de código: <input type=" " name=" "> Suporte: IE, Firefox, Chrome e Opera

125 3.5 Tipo de Entrada month O tipo month permite que o usuário selecione um mês e um ano. Exemplo de código: Nascimento (mês e ano): <input type="month" name="mesanonasc"> Suporte: Chrome, Safari e Opera

126 3.6 Tipo de Entrada number O tipo number é usado para campos de entrada que devem conter um valor numérico. Exemplo de código: Quantidade (entre 1 e 5): <input type="number" name="quant" min="1" max="5"> Suporte: IE, Firefox, Chrome, Safari e Opera

127 3.7 Tipo de Entrada range O tipo range é usado para campos de entrada que devem conter um valor de um intervalo de números através de um controle deslizante. Exemplo de código: <input type="range" name="linha" min="1" max="10"> Suporte: IE, Firefox, Chrome, Safari e Opera

128 3.8 Tipo de Entrada time O tipo time permite que o usuário selecione um valor de tempo (horas e minutos). Exemplo de código: Selecione o tempo: <input type="time" name="usr_time"> Suporte: Chrome, Safari e Opera

129 3.9 Tipo de Entrada url O tipo url é usado para campos de entrada que devem conter um endereço URL. O valor do campo é validado automaticamente quando o formulário é enviado. Exemplo de código: Website: <input type="url" name="homepage"> Suporte: IE, Firefox, Chrome e Opera

130 3.10 Tipo de Entrada week O tipo week permite que o usuário selecione a semana e o ano. Exemplo de código: Selecione a semana: <input type="week" name="semana"> Suporte: Chrome, Safari e Opera

131 4.0 Novos Elementos de Formulário no HTML 5 <datalist> <keigen> <output>

132 4.1 Elemento de Formulário <datalist> O elemento <datalist> especifica uma lista de opções prédefinidas para um elemento <input>. É usado para fornecer um recurso autocomplete em elementos de um <input>. O usuário irá visualizar uma lista drop-down com as opções pré-definidas.

133 4.1 Elemento de Formulário <datalist> Exemplo de código: <input list="browsers"> <datalist id="browsers"> <option value="internet Explorer"> <option value="firefox"> <option value="chrome"> <option value="opera"> <option value="safari"> </datalist> Suporte: IE, Firefox, Chrome e Opera

134 4.2 Elemento de Formulário <keigen> O elemento <keigen> proporciona uma forma segura de autenticação. A tag <keigen> especifica um campo gerador de par de chaves em um formulário. Quando o formulário é enviado, duas chaves são geradas: uma privada e uma pública. A chave privada é armazenada localmente e a chave pública é enviada para o servidor. A chave pública pode ser usada para gerar um certificado do cliente para autenticar um utilizador futuramente.

135 4.2 Elemento de Formulário <keigen> Exemplo de código: <form action="pagina.php" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form> Suporte: Firefox, Chrome, Safari e Opera

136 4.3 Elemento de Formulário <output> O elemento <output> apresenta o resultado de um cálculo, como se fosse realizado por um script. Exemplo de código: <form oninput = "x.value=parseint(a.value)+parseint(b.value)"> <input type="range" id="a" value="50"> <input type="number" id="b" value="50"> = <output name="x" for="a b"></output> </form> Suporte: Firefox, Chrome, Safari e Opera

137 5.0 Novos Atributos de Formulário no HTML 5 autocomplete novalidate autofocus form formmethod formnovalidate min and max multiple pattern placeholder required step formtarget

138 5.1 Atributo de Formulário autocomplete Especifica se um formulário ou um campo de entrada terá ou não recurso de autocompletar-se. Quando este recurso está ativado, o navegador exibe um lista baseada nos valores digitados anteriormente pelo usuário. O atributo autocomplete trabalha com <form> e com os tipos <input>: text, search, url, tel, , password, datepickers, range e color. Exemplo de código: <form action="demo_form.php" autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type=" " name=" " autocomplete="off"><br> <input type="submit"> </form> Suporte: IE, Firefox, Chrome e Safari

139 5.2 Atributo de Formulário novalidate É um atributo booleano. Quando presente, ele especifica que os dados de formulários de entrada não devem ser validados quando submetidos. Exemplo de código: <form action="demo_form.php" novalidate> <input type=" " name="user_ "> <input type="submit"> </form> Suporte: IE, Firefox, Chrome e Opera

140 5.3 Atributo de Formulário autofocus É um atributo booleano. Quando presente, ele especifica que um elemento <input> deve receber automaticamente o foco quando a página é carregada. Exemplo de código: Primeiro Nome:<input type="text" name="pname" autofocus> Suporte: IE, Firefox, Chrome, Safari e Opera

141 5.4 Atributo de Formulário formmethod Define o método HTTP para o envio de formulário de dados para a URL de ação. Substitui o atributo de método do elemento <form>. Pode ser usado com type= submit e type= image. Exemplo de código: <form action="demo_form.asp" method="get"> First name: <input type="text" name="fname"><br /> Last name: <input type="text" name="lname"><br /> <input type="submit" value="submit"> <input type="submit" formmethod="post" formaction="demo_post.asp" value="submit using POST"> </form> Suporte: IE, Firefox, Chrome, Safari e Opera

142 5.5 Atributo de Formulário formnovalidate É um atributo booleano. Quando presente, ele especifica que o elemento <input> não deve ser validado quando submetido. Substitui o elemento novalidate <form>. Pode ser usado com type= submit. Exemplo de código: <form action="demo_form.asp"> <input type=" " name="userid"><br /> <input type="submit" value="submit"><br /> <input type="submit" formnovalidate value="submit sem validação"> </form> Suporte: IE, Firefox, Chrome e Opera

143 5.6 Atributo de Formulário formtarget É um atributo que indica onde exibir a resposta que é recebida após enviar um formulário. Substitui o atributo target do elemento <form>. Pode ser usado com type= submit e type= image Exemplo de código: <form action="demo_form.asp"> First name: <input type="text" name="fname"><br /> Last name: <input type="text" name="lname"><br /> <input type="submit" value="submit as normal"> <input type="submit" formtarget="_blank" value="submit para nova janela"> </form> Suporte: IE, Firefox, Chrome, Safari e Opera

144 5.7 Atributo de Formulário min e max Especificam um valor mínimo e máximo para um elemento <input>. Trabalham com os seguintes tipos de entrada: number, range, date, datetime, datetime-local, month, time e week. Exemplo de código: Entre com data antes de : <input type="date" name="data1" max=" "> Entre com data após : <input type="date" name="data2" min=" "> Quantidade (entre 1 and 5): <input type="number" name="quant" min="1" max="5"> Suporte: IE, Chrome, Safari e Opera

145 5.8 Atributo de Formulário multiple É um atributo booleano. Quando presente, especifica que um usuário tem permissão para inserir mais de um valor no elemento <input>. Trabalha com os tipos de entrada e file. Exemplo de código: Selecione imagens: <input type="file" name="img" multiple /> Suporte: IE, Chrome, Safari e Opera

146 5.9 Atributo de Formulário pattern Especifica uma expressão regular para um valor de um elemento <input>, ou seja, o formato do valor que deverá conter o campo (Ex.: sua senha deve conter apenas números, etc.). Exemplo de código: Code do País: <input type="text" name="code" pattern="[a-za-z]{3}" title="três letras"> Suporte: IE, Firefox, Chrome e Opera

147 5.10 Atributo de Formulário placeholder É uma dica de um tipo de valor esperado em um campo de entrada. Trabalha com text, search, url, tel, e password. Exemplo de código: <input type="text" name="pname" placeholder="primeiro Nome"> Suporte: IE, Firefox, Chrome, Safari e Opera

148 5.11 Atributo de Formulário required É um atributo booleano. Quando presente, especifica que um campo de entrada deve ser preenchido antes de enviar o formulário. Trabalha com os seguintes tipos de entrada: text, search, url, tel, , password, date pickers, number, checkbox, radio e file. Exemplo de código: Apelido: <input type="text" name="username" required /> Suporte: IE, Firefox, Chrome e Opera

149 5.12 Atributo de Formulário step Especifica os intervalos de números válidos para um elemento <input>. Ex: se step= 3, os números válidos seriam -3, 0, 3, 6, etc. Pode ser usado junto com min e max para criar uma faixa de valores válidos. Funciona com os seguintes tipos de entrada: number, range, date, datetime, datetime-local, month, time e week. Exemplo de código: <input type="number" name="points" step="3"> Suporte: IE, Chrome, Safari e Opera

150 Formulários em HTML 5 Formulário com os novos tipos e validação (código)

151 Formulários em HTML 5 Formulário com os novos tipos e validação (saída)

152 Formulários em HTML 5 Exercício Elabore o exercício 02 da Lista 03

153 Vamos revisar?

154 6.0 Detalhando os campos Campo Texto Campo para entrada de texto comum. Parâmetros Size O tamanho do elemento em caracteres na página Html (que será exibido na tela). Maxlength É o tamanho máximo do texto que pode ser inserido no elemento. Value É utilizado quando há necessidade de se pré-definir um valor para o elemento. Este valor pode ser normalmente alterado pelo usuário.

155 6.0 Detalhando os campos Parâmetros: Botão Rádio (Radio button) Checked Se for declarado o elemento terá seu estado inicial como selecionado. Value É o valor que será passado à página destino quando o formulário é submetido se este elemento estiver selecionado.

156 6.0 Detalhando os campos Parâmetros: Botão de Checagem (CheckBox) Checked Se for declarado o elemento terá seu estado inicial como marcado. Value É o valor que será passado à página destino quando o formulário é submetido se este elemento estiver marcado.

157 6.0 Detalhando os campos Parâmetros: Botão Submeter (Submit) Value O texto que aparecerá no Botão.

158 6.0 Detalhando os campos Parâmetros: Botão Reset: Value O texto que aparecerá no Botão.

159 6.0 Detalhando os campos Select: Parâmetros: Multiple Se existir, permite que sejam selecionadas múltiplas opções através das teclas Ctrl ou Shift. Size Número de opções exibidas por vez na tela. Se o size estiver setado para 1 que é o default e não existir o parâmetro multiple, o elemento é exibido como um Combo Box. Caso contrário é exibido como um Select List. Option cada subtag option adiciona uma opção ao elemento. Value O value de cada option é o valor passado caso aquela opção seja selecionada. Obs.: O texto da opção deve ser especificado entre as tags <option> e </option>

160 6.0 Detalhando os campos Parâmetros: Área de Texto (textarea): Cols Número e caracteres por linha. Rows Número de linhas do campo. Obs.: não existe o parâmetro value, o texto inicial deve ser definido entre as tags <textarea> e </textarea>.

161 7.0 Formulários em HTML - Exemplos Formulário - Método GET <form name= formulario1" action="respostaformulario.html" method="get"> Usuário: <input type="text" name="usuario"> <input type="submit" value="enviar"> </form> Formulário - Método POST <form name= formulario2" action="respostaformulario.html" method="post"> Usuário: <input type="text" name="usuario"> <input type="submit" value="enviar"> </form>

162 7.0 Formulários em HTML - Exemplos Formulário - Método POST <form name= formulario2" action="respostaformulario.html" method="post"> Usuário: <input type="text" name="usuario"> <input type="submit" value="enviar"> </form> SUBMIT apresenta o botão que causa o envio dos dados de entrada para o servidor _ArquivosAula\ExemploFormulario.html

163 7.0 Formulários em HTML - Exemplos Exemplo de um Formulário

164 8.0 Exercício Faça a IFES-PW-LISTA03.pdf

165 Programação WEB PROF. FLÁVIO IZO I N T R OD U Ç Ã O A O J A V A S C R I P T P A R T E I

166 Objetivos da Aula 1.0 JavaScript x Java; Javascript; 2.0 Exemplos;

167 1.0 JavaScript x Java Lembre-se: Javascript não tem nada a ver com Java!

168 1.0 JavaScript x Java Compilador. Para programar em Java necessitamos de um Kit de desenvolvimento e um compilador. Entretanto, Javascript não é uma linguagem que necessite que seus programas se compilem, e sim que estes sejam interpretados pelo navegador quando este lê a página.

169 1.0 JavaScript x Java Orientado a objetos. Java é uma linguagem de programação orientada a objetos. Em Javascript, apesar de ter suporte OO, não podemos criar classes, sendo assim, foge de um dos princípios básico da OO. Esse processo é tal qual como se realiza nas linguagens de programação estruturadas como C.

170 1.0 JavaScript x Java Propósito. Java é muito mais potente que Javascript, isto é devido ao fato de que Java é uma linguagem de propósito geral, com a qual podemos fazer aplicações dos mais variados tipos, entretanto, com Javascript somente podemos escrever programas para que se executem em páginas web.

171 1.0 JavaScript x Java Uma característica pertencente ao Javascript é que o mesmo não se conecta ao banco de dados; No HTML 5 já possível se conectar a BD local, como se utilizássemos cookies, porém com a vantagem de fazer pesquisas.

172 1.0 JavaScript x Java Resumindo a comparação: Características Java Javascript Tipo de execução Compilador Interpretador Sim Possui suporte a OO. Orientação à Classes são criadas como Objeto funções Funcionamento Escopo Navegador Web Abrangente Conecta a BD Sim Não

173 2.0 Javascript O código javascript surgiu pelo navegador Netscape. Seu nome passou por duas mudanças: primeiramente foi chamado de Mocha, logo em seguida virou LiveScript (primeiro nome oficial em 1995) e posteriormente virou o javascript que nós utilizamos até os dias atuais.

174 2.0 Javascript Historicamente há um indício de que o nome javascript foi o escolhido para o lançamento do Netscape 2.0 em 1995 devido à popularização que o Java tinha no momento. Isso soa como uma estratégia de marketing da Netscape.

175 2.0 Javascript As estruturas principais do javascript são: <script type= text/javascript >Código em js</script> Ou <script type= text/javascript src="arquivo.js"> </script>

176 2.0 Javascript Na primeira estrutura o código js é inserido diretamente entre as tags <script>. Já no segundo modelo, o código js é inserido em um arquivo à parte (arquivo.js) e esse arquivo está sendo referenciado (importado) na página. Normalmente esses códigos são colocados entre as tags <head></head> da sua página.

177 2.0 Javascript Exemplo:

178 2.0 Javascript O javascript possui vários objetos. São esses objetos que contribuem para a execução de diversas funcionalidades do js. Para que conheçamos sobre objetos, é extremamente necessário que façamos o estudo do DOM (Document Objetc Model), que nos proporciona modificar desde coisas simples às mais complexas. Portanto, o DOM nos permite alterar tudo (que está no lado cliente) na nossa página WEB.

179 2.0 Javascript A estrutura de uma página web respeita uma hierarquia de objetos, que veremos na figura 12. Repare que o objeto window é o pai de todos os objetos.

180 2.0 Javascript Estrutura de uma árvore DOM (Document Objetc Model)

181 2.0 Javascript Abaixo do objeto pai, existem os objetos filhos. A hierarquia de objetos é composta por diversos elementos. Para representar melhor essa hierarquia poderíamos fazer uma analogia com a seguinte situação: Imagine que você queira pintar a porta da sala de sua casa na cor branca. Se pudéssemos representar em formato de programação, ficaria assim: casa.sala.porta.cor = branca ;

182 2.0 Javascript Observe que tivemos que acessar casa, depois sala, depois porta e informar que a cor seria branca. O ponto (.) serve para separar os elementos da hierarquia. No javascript funciona da mesma maneira.

183 2.0 Javascript DOM na prática: Imagine que você deseja alterar o título da página web aberta. Para isso você vai pedir que o usuário digite um novo título para a página e pedir que o usuário digite o nome dele. Logo em seguida você vai modificar o título da página para o novo título + o nome do usuário. Veja:

184 2.0 Javascript Exemplo prático: alterando título da página.

185 2.0 Javascript Observe que utilizamos na linha 8 os comandos window.alert() e document.title. Assim, o primeiro é uma função interna (Built In) do window que serve para exibir um conteúdo em forma de caixa de texto. Já o segundo serve para recuperar o título da página web. OBS.: No alert usamos o Window. Já no document não utilizamos o window.

186 2.0 Javascript Teste o exemplo anterior e veja o que acontece.

187 2.0 Javascript Veja outros exemplos: Objeto window.alert( texto ); window.location.href= url_aqui ; window.open("pag1.htm", "janela", "height = 300, width = 400"); window.close(); window.print(); window.history.back(); window.history.forward(); window.history.go(valor); Descrição Exibe uma janela de alerta no estilo popup Redireciona a página para a url informada Abre uma nova página no estilo popup. Onde, janela é o nome da janela; height é a altura da janela e width é a largura da janela. Fecha a janela aberta no navegador Abre uma janela de impressão. Volta para a página anterior. Avança para a próxima página. OBS.: Para avançar é preciso ter voltado uma página antes. Retorna ou avança para uma determinada página. Onde valor: (-1) retorna uma página; (-2) retorna duas páginas; (1) avança uma página; (2) avança duas páginas; e assim por diante.

188 2.0 Javascript Objeto window.document.write( texto ); window.navigator.appname; window.navigator.appversion; window.navigator.platform; window.document.url; window.confirm( texto ); window.prompt("msg", "texto"); Descrição Escreve um texto na tela. Onde texto é o texto a ser escrito. Mostra o nome do navegador que está sendo utilizado pelo usuário. Ex.: Microsoft Internet Explorer ; Netscape etc. Exibe a versão do navegador. Exibe o tipo de máquina que está sendo utilizada. Ex.: Win32, MacPPC etc. Exibe a URL da página Tela com os botões OK e Cancelar. Onde texto é o texto que vai aparecer na janela da mensagem. Abre uma tela pedindo para o usuário inserir um valor. Onde: msg é a mensagem indicando o que o usuário deve digitar; e texto é o texto que aparece dentro do campo.

189 2.0 Javascript Exemplos simples em Java Script Veja o código fonte e perceba como foi estruturado o código;

190 2.0 Exemplos À seguir foram selecionados alguns exemplos; Copie os códigos e entenda o que está acontecendo;

191 2.0 Exemplo 1 Imprime um texto em um documento HTML. _ArquivosAula\aula04-JavaScript\javascript1.html

192 Exemplo 2 Vamos passar logo para as funções. Elas também não são difíceis de se entender, e são muito mais úteis! As funções ficam melhores quando declaradas entre os tags de <head> da sua página-html. As funções são convocadas por eventos iniciados pelo usuário. Por isso é razoável manter as funções entre os tags de <head>.

193 Exemplo 2 Elas são carregadas antes que o usuário possa fazer alguma ação que chamará a função. Os scripts podem ser colocados entre os campos de comentários internos para assegurar que os antigos browsers não mostrem o próprio script. _ArquivosAula\aula04-JavaScript\javascript2.html

194 Exemplo 3 Veremos alguns elementos novos implementados neste script. Neste documento HTML você tem um elemento de formulário onde o usuário pode colocar o seu nome. O 'onblur' no tag de <input> avisa ao Browser que função ele tem que chamar quando você clica fora do formulário.

195 Exemplo 3 A função 'getname(str)' será chamada quando você 'deixa' este elemento de formulário depois de haver colocado alguma coisa. A função pegará a sequência que você colocou através do comando 'getname(this.value)'. 'This.value' significa o valor que você colocou neste elemento de formulário. _ArquivosAula\aula04-JavaScript\javascript3.html

196 Exemplo 4 Varrendo todos os campos de um Formulário _ArquivosAula\aula04-JavaScript\javascript4.html

197 Programação WEB PROF. FLÁVIO IZO I N T R OD U Ç Ã O A O J A V A S C R I P T P A R T E I I

198 Objetivos da Aula 1.0 Limpando os campos do formulário 2.0 Java Script Expressões Regulares 3.0 Java Script - Exemplo 5; 4.0 Exercícios;

199 1.0 JavaScript Limpando os campos do formulário Uma solução interessante de limpar os campos do formulário é: Formulario.campo.value= Mas, como aplicar isso? Veja o exemplo: _ArquivosAula\javascript05.html E esse: _ArquivosAula\javascript05a.html Analise o exemplo e molde para um formulário maior.

200 1.0 Java Script Expressões Regulares O uso de expressões regulares em JavaScript pode tornar bem compacta, flexível e poderosa a validação cliente (no navegador web) de campos de formulário, algo muito recomendado como préverificação do conteúdo de um formulário antes de submetê-lo ao servidor.

201 1.0 Java Script Expressões Regulares O recurso de expressão regular surgiu no JavaScript 1.2, implementado desde a versão 4 de ambos os principais navegadores: Internet Explorer e Mozilla.

202 1.0 Java Script Expressões Regulares Para cada tipo de conteúdo numérico, data, endereço eletrônico etc. podemos montar uma expressão regular apropriada para sua validação, de acordo com o formato e características desejadas. A validação do conteúdo de um campo através de uma expressão regular para o seu respectivo tipo consiste simplesmente em aplicar o padrão da expressão regular e testá-lo no texto desejado, com o método test( ).

203 1.0 Java Script Expressões Regulares _ArquivosAula\valform.html

204 2.0 Java Script - Exemplo 5 Para organizarmos melhor nosso código, podemos deixar todos os scripts de nosso sistema em apenas um arquivo. Exemplo: scripts.js Quando fazemos isso, precisamos informar em nossa página html ou jsp que iremos utilizar um script que está em um arquivo.js: <head> <script src = "scripts.js" type="text/javascript"></script> </head>

205 2.0 Java Script - Exemplo 5 Página HTML

206 2.0 Java Script - Exemplo 5 Arquivo scripts.js

207 3.0 Exercícios Faça a IFES-PW-LISTA04.pdf

208 Programação WEB PROF. FLÁVIO IZO A U L A 0 6 I N T R O D U Ç Ã O A O J A V A S C R I P T P A R T E I I I

209 Objetivos da Aula 1.0 Imprimindo valores / textos 2.0 Variáveis 3.0 Operadores 4.0 Funções 5.0 Eventos 6.0 Estrutura Condicional

210 1.0 Imprimindo valores / textos Uma maneira de escrever um texto na página web é utilizando o javascript. Basta utilizar o método write : window.document.write( texto );

211 2.0 Variáveis As variáveis são extremamente importantes para os sistemas, independentemente se os sistemas são web ou não. Variáveis são espaços reservados na memória do computador para que possamos guardar algum valor (dado) durante a execução dos nossos scripts (códigos de programação).

212 2.0 Variáveis Assim como na maioria das linguagens de programação, no javascript as variáveis são declaradas utilizando-se a palavra reservada var.

213 2.0 Variáveis Se abrirmos a página com o código da figura anterior, teremos como retorno a seguinte saída: Meu nome é Maria e tenho 17 anos!. Você deve ter percebido que nós não fornecemos o tipo da variável (ex.: integer, char, boolean etc.). Isso se deve ao fato de que as variáveis em javascript não são tipadas, ao contrário de linguagens como Java e Visual Basic.

214 2.0 Variáveis Sendo assim, basta que você insira o valor e a variável automaticamente interpretará o tipo de conteúdo que será armazenado na variável. Para converter valores de String para integer ou float basta utilizar as funções parseint() ou parsefloat(), respectivamente.

215 3.0 Operadores Primeiramente, devemos discutir acerca do que são os operadores. Os operadores são símbolos matemáticos que nos permitem trabalhar com valores. Os operadores são divididos em operadores aritméticos, operadores relacionais (de comparação), operadores de atribuição, operadores lógicos.

216 3.1 Operadores Aritméticos Esses tipos de operadores nos auxiliam na resolução de cálculos envolvendo expressões aritméticas Operadores Matemática Javascript Adição A + B A + B Subtração A B A B Multiplicação A B A * B Divisão A B A / B Módulo (mod) A % B Potenciação A B Math.pow(A,B) ou A ^ B (arredonda) Radiciação B A A ^ (1/B)

217 3.2 Operadores Relacionais Esses tipos de operadores nos auxiliam na resolução de cálculos envolvendo expressões relacionais. Devemos lembrar que os operandos da relação devem ser do mesmo tipo e o resultado sempre será lógico (verdadeiro oufalso).

218 3.2 Operadores Relacionais Operadores Matemática Javascript Igual a A = B A == B Diferente de A B A!= B Maior que A > B A > B Menor que A < B A < B Maior ou igual a A B A >= B Menor ou igual a A B A <= B

219 3.3 Operadores de Atribuição Esses tipos de operadores nos auxiliam na atribuição de valores às variáveis. Operadores Significado Javascript += A = A + B A += B -= A = A B A = B *= A = A * B A *= B /= A = A B A /= B %= A = A % B A %= B ++ A = A + 1 A++ -- A = A 1 A--

220 3.4 Operadores Lógicos Esses tipos de operadores nos auxiliam nos testes lógicos. Operadores Significado Javascript, Onde A=9 e B=4! NÃO (A!= 5) obtém-se true OU (A < 5) OU (B>3) obtém-se true && E (A < 5) E (B>3) obtém-se false

221 4.0 Funções Toda linguagem de programação possui um recurso que é extremamente importante para a organização e reaproveitamento do código: as funções. As funções são partes específicas do código e são chamadas através do seu próprio nome. As funções javascript podem ser chamadas através de botões, de links ou por meio de outras funções.

222 4.0 Funções

223 4.0 Funções Perceba os seguintes pontos: para começar uma função, nós devemos utilizar a palavra reservada function ; a função deve ser declarada entre as tags <HEAD>; o return foi utilizado porque essa função ao ser executada retorna valor para uma variável. Caso não retornasse valor algum, deveríamos simplesmente não coloca-lo (ideologia de procedimento).

224 4.0 Funções Caso quiséssemos chamar a função através de um link: E caso quiséssemos chamar a função através de um botão de formulário:

225 4.0 Funções Para não bagunçar o seu código, você também pode colocar todas as funções em um único arquivo com extensão.js e chamá-lo através da comando: <script type="text/javascript" src="funcoes.js"></script>

226 4.0 Funções Agora faça o teste e implemente o exemplo anterior utilizando as três formas de chamar uma função.

227 5.0 Eventos Todos os elementos vistos podem ser chamados pelos eventos denominados por nós. Os eventos são recursos que chamam funções ao serem executados. Eles são muito utilizados para facilitar a execução de tarefas pelo usuário. Vejamos alguns eventos:

228 5.0 Eventos Evento Significado Funcionamento OnClick(); Ao clicar sobre Todos os elementos OnChange(); OnBlur(); Ao alterar o valor atual Ao clicar fora do objeto <select>, <input> e <textarea> <a>, <input>, <select>, <textarea> etc. OnLoad(); Ao abrir o site <body> e <frameset> OnUnload(); Ao fechar o site <body> e <frameset> OnMouseOver(); Ao passar o mouse em cima Todos os elementos OnMouseMove(); Move o mouse Todos os elementos

229 5.0 Eventos Evento Significado Funcionamento OnMouseOut(); Ao tirar o mouse de cima Todos os elementos OnFocus(); OnSubmit(); Ao colocar o cursor sobre o objeto Ao submeter (enviar) o formulário <a>, <input>, <select>, <textarea> etc. <form> OnKeyUp(); Ao soltar a tecla <input>, <select>, <textarea> OnKeyDown(); Ao pressionar a tecla <input>, <select>, <textarea> OnKeyPress(); Ao pressionar e soltar a tecla <input>, <select>, <textarea>

230 5.0 Eventos Todos os eventos citados podem ser chamados por links, botões de formulário ou dentro das tags do html. A seguir vamos citar alguns exemplos de eventos sendo chamados:

231 5.0 Eventos <input type="button" value="imprimir" onclick="imprimir();" /> <BODY onload= bemvindo(); > <input type= text name= numero value= onfocus= alerta(); > <a href= principal.html onmouseout= alerta(); >Principal</a> <BODY onunload= alert( Obrigado! ); >

232 5.0 Eventos Você pode acionar um evento para que uma figura seja trocada em tempo de execução. Para isso, basta fazer uma combinação de eventos com o link da imagem. Agora faça o teste e veja como como funciona!

233 6.0 Estrutura Condicional A estrutura condicional está presente na maioria das linguagens de programação. Sua condição deve sempre retornar um valor lógico: sim ou não. Portanto, as condições servem para que um bloco de comando seja executado somente SE a condição for satisfeita.

234 6.0 Estrutura Condicional Veja um exemplo:

235 6.0 Estrutura Condicional No código anterior, recebemos 3 para a variável n1 e 6 para a variável n2. Pedimos para o usuário digitar a opção desejada (+ ou -) e armazenamos na variável opcao. Em seguida, testamos qual das opções o usuário digitou. Se for +, será impressa a soma dos valores; se for -, será impressa a subtração dos valores.

236 6.0 Estrutura Condicional Devemos lembrar que o else (senão) foi útil nos nosso exemplo, pois ele só testará se o usuário digitou - se o teste (opcao == + ) for falso.

237 7.0 Exemplo implementado Teste e veja o que acontece: _ArquivosAula\aula04-JavaScript\formularioCompleto.html

238 Exercícios Faça a IFES-PW-LISTA04.pdf Exercícios 03 e 04

239 Programação WEB PROF. FLÁVIO IZO A U LA 1 0 I N T R O D U Ç Ã O A O P H P P A R T E I

240 Objetivos da Aula 1.0 História do PHP 2.0 Características Gerais 3.0 ASP x PHP 4.0 Client-Side x Server-Side 5.0 Começando no PHP 6.0 Sintaxe PHP

241 Objetivos da Aula 7.0 Tipo de Variáveis 8.0 Exibindo na tela 9.0 Utilizando Arrays 10.0 Array multidimensional 11.0 Exercícios 12.0 Referências

242 1.0 História PHP (Hypertext PreProcessor) é uma linguagem de programação de scripts para manipulação de páginas HTML. Criada por Rasmus Lerdorf em É amplamente utilizada na programação de web sites dinâmicos, especialmente para manipulação de banco de dados.

243 2.0 Características Gerais PHP é gratuito Distribuído sob a licença GPL, possui seu códigofonte (código utilizado para sua criação) aberto, o que facilita a correção de eventuais erros no código, permitindo seu rápido desenvolvimento.

244 2.0 Características Gerais PHP é multiplataforma Inicialmente foi desenvolvido para ser usado em servidores Unix/Linux, ganhando uma versão para Windows e para Macintosh posteriormente. Isso faz do PHP uma linguagem capaz de ser executada independente da plataforma utilizada.

245 2.0 Características Gerais PHP é compatível com a a maioria dos servidores web disponíveis no mercado, tendo suporte nativo para o servidor Apache (atualmente o mais utilizado no mercado).

246 2.0 Características Gerais PHP suporta banco de dados: Possui suporte nativo ao MySQL, porém pode utilizar outros sistemas de gerenciamento de banco de dados (SGBD), dentre eles, Oracle, Sybase, msql, Firebird, PostgreSQL e DB2. Permite também o uso de mais de um banco de dados na mesma aplicação.

247 4.0 Client-Side x Server-Side Scripts Client-Side são executados no computador cliente, por exemplo, o código HTML ou o Javascript, que são executados direto no navegador. São muito utilizados para o processamento de pequenas tarefas, tirando essa responsabilidade do servidor web, que fica livre para executar os scripts Server-Side, por exemplo os scripts PHP.

248 4.0 Client-Side x Server-Side Quando o usuário clica em um botão de busca, o pedido de busca é enviado ao servidor, que encontra o script responsável pela busca e o processa. O resultado é enviado de volta ao PC do cliente. É recomendado que pequenas verificações e tarefas menores sejam executadas por aplicações Client- Side, deixando as requisições mais importantes (como conferir senhas por exemplo) para o Servidor.

249 4.0 Client-Side x Server-Side PHP é uma linguagem Server-Side, ou seja, sempre será o servidor que irá executar. Se sua página contém muitos scripts PHP desnecessários, pode acabar prejudicando o servidor, tornando a conexão mais lenta; Então, se forçarmos o server (PHP) a executar um código que pode ser executado pelo cliente estamos tornando lenta a conexão desnecessariamente.

250 5.0 Começando no PHP Para nossos exemplos iremos utilizar o WAMP Server, por já instalar todo o pacote necessário (PHP + Apache + MySQL + PHP MyAdmin); Também poderiamos utilizar: PHPTriad (Pacote); Wamp, Lamp, Mamp: (Pacotes) IIS, da Microsoft (Instalar separadamente);

251 6.0 Sintaxe PHP Para que se possa utilizar as vantagens da linguagem PHP é necessário informar ao navegador (Browser) primeiro. Sendo assim, toda vez que for utilizar o PHP é necessário digitar a tag de abertura <?php e ao terminar, deve-se digitar a tag de fechamento?>. A seguir veremos um exemplo:

252 6.0 Sintaxe PHP <html lang= pt-br > <head> <title>minha página</title> <meta charset= UTF-8 > </head> ATENÇÃO 1: A cada final de linha é necessário colocar o ; <body> <?php echo Minha primeira página em PHP ; echo <br /> ; echo Estou utilizando o WAMP Server ;?> </body> </html> ATENÇÃO 2: Todo código PHP digitado fora das tags será interpretado como HTML.

253 6.0 Sintaxe PHP Teste o código anterior. Lembre-se que você deve digitar o conteúdo e salvar o arquivo como.php Abra o editor, digite e salve na pasta c:/wamp/www/ AGORA ACESSE: ou

254 6.0 Sintaxe PHP Comentários: <?php // este é um comentário de uma linha # este também é um comentário de uma linha?> <?php /* Este é um exemplo de comentário que ocupa mais de uma linha. Não preciso colocar o delimitador em todas as linhas. O comentário se encerra aqui */?>

255 6.0 Sintaxe PHP Variáveis: Variáveis no PHP são identificadas pelo sinal $ antes de seu nome. Os nomes de variáveis não podem possuir caracteres especiais (espaços, acentos, etc), com exceção do underline ( _ ). Não devem começar com números; <?php $nome; $cidade; $dt_nascimento; ATENÇÃO! PHP é case sensitive!?>

256 7.0 Tipo de Variáveis Números inteiros (int ou integer): Números naturais positivos e negativos. Ex: 25, -7; Números Fracionários (float, double ou real): Números fracionários, também chamados de ponto flutuante ou dupla precisão. Ex: 3.14; Caracteres alfanuméricos (String): Valores literais. Ex: João da Silva. Valores do tipo String devem estar dentro de aspas ou apóstrofos. Mesmo valores numéricos, se informados como strings, serão tratados números;

257 7.0 Tipo de Variáveis Valores booleanos (bool): São do tipo Verdadeiro ou Falso. PHP interpreta Verdadeiro como 1 e Falso como 0. Vetores (array): Cada variável possui um índice, que pode ser numérico ou literal (no caso de array associativo). Ex: $lista. Os colchetes servem para que determinada posição do vetor seja referenciada. Ex: $lista[2]. Vetores no PHP iniciam em 0.

258 7.0 Tipo de Variáveis Para atribuir um valor à uma variável deve-se utilizar o = ; Ex.: $nome = Mateus ; // é um valor do tipo String $salario = ; // é um valor do tipo float $idade = 27; // é um valor do tipo integer

259 7.0 Tipo de Variáveis Pode-se ainda forçar uma variável a receber um tipo determinado entre parênteses Ex.: $salario = (string)900.00; // é um valor do tipo string, ou seja, o mesmo que ;

260 8.0 Exibindo na tela Pode-se exibir um valor na tela utilizando-se da palavra reservada echo ; Ex.: $nome = Maria ; echo Meu nome é ; echo $nome; $nome = Maria ; echo Meu nome é $nome ; $nome = Maria ; echo Meu nome é.$nome;

261 9.0 Utilizando Arrays Os arrays são muito úteis. Há várias formas de utilizá-los: $lista[0] = 10; //valor 10 na posição zero; $lista[1] = 11; //valor 11 na posição 1; $lista[] = 12; //valor 12 na posição 2; $lista[5] = 15; //valor 15 colocado na posição 5; $lista = array(10, 11, 12,,, 15);

262 9.0 Utilizando Arrays Os arrays também podem conter strings aos invés de números: $usuario[ nome ] = Maria Assis ; $usuario[ idade ] = 29; $usuario[ ] = m.assis@gmail.com ; $usuario = array( nome => Maria Assis, idade => 29, => m.assis@gmail.com ); echo O usuário.$usuario['nome']., de.$usuario['idade']. anos tem .$usuario[ ].. ;

263 10.0 Array multidimensional Há ainda os arrays multidimensionais: $tabela[0][0] = Maria ; $tabela[0][1] = 5 ; $tabela[0][2] = 9 ; $tabela[1][0] = Antonio ; $tabela[1][1] = 8 ; $tabela[1][2] = 6 ; Igual a Maria 5 9 Antonio 8 6 $populacao[ ES'][ Cachoeiro'] = ; $populacao[ ES'][ Vitória'] = ; $populacao[ BA'][ Salvador'] = ; $populacao[ MG'][ Juiz de Fora'] = ;

264 11.0 Exercícios Faça a lista 05.

265 Programação WEB PROF. FLÁVIO IZO A U LA 1 1 I N T R O D U Ç Ã O A O P H P P A R T E I I

266 Objetivos da Aula 1.0 Configurações Principais 2.0 Ferramentas de produção Web 3.0 Quanto a Sintaxe 4.0 Variáveis 5.0 Variáveis Locais e Globais 6.0 Constantes

267 Revisão da aula anterior Como reconhecer uma variável no PHP? Qual a expressão utilizada para imprimir um resultado na tela do computador? O que as difere? Como utilizamos um array no PHP? Como utilizamos um array bidimensional no PHP?

268 1.0 Configurações Principais (Apache) httpd.conf CONFIGURAÇÃO DESCRIÇÃO ServerName utilizado quando o servidor Apache irá responder por um endereço. Exemplo: ou localhost Listen DirectoryIndex Directory utilizado para definir a(s) porta(s) em que o servidor aceitará conexões. Exemplo: Listen 80 ou Listen 8080 utilizado para definir a página principal dos sites. Exemplo: index.php index.html define as opções de acesso a um determinado diretório. Exemplo: AllowOverride All (sobrescreve as configurações padrões do servidor Apache inserindo novas configurações para aquele diretório)

269 1.0 Configurações Principais (PHP) Um dos primeiros passos e muito útil é a criação do arquivo info.php (não obrigatoriamente deve-se utilizar esse nome, porém é o padrão utilizado); Abra o editor, digite e salve na pasta c:/wamp/www/info.php <?php?> phpinfo(); AGORA ACESSE: ou

270 1.0 Configurações Principais (PHP) Já vimos que para acessar o servidor PHP devemos digitar o caminho ou no browser. Vimos também que o arquivo de configurações do PHP se chama php.ini Agora, veremos como fazer algumas configurações principais.

271 1.0 Configurações Principais (PHP) Abra o arquivo php.ini (observe que a linha Loaded Configuration File é onde se encontra o arquivo php.ini). É importante destacar que para habilitar alguma dll (um banco de dados, por exemplo) é necessário retirar o ; (ponto e vírgula) que fica antes do nome da dll.

272 1.0 Configurações Principais (PHP) Configurações de Limites de recursos CONFIGURAÇÃO *max_execution_time DESCRIÇÃO Integer Define o limite de tempo de execução de um script antes que seja terminado pelo interpretador. Isto ajuda a prevenir que scripts mal escritos serem executados indefinidamente pelo servidor. O padrão é 30. memory_limit Integer Configura a quantidade máxima de memória (bytes) que o script pode alocar. Isso ajuda a prevenir que scripts mal feitos consumam toda a memória disponível em um servidor. Utilize -1 se você não quiser impor um limite de memória.

273 1.0 Configurações Principais (PHP) Configurações de Manuseio de dados CONFIGURAÇÃO default_charset DESCRIÇÃO String Tipo de codificação de caracteres no cabeçalho Content-type: Para desabilitar o envio de um conjunto de caracteres, simplesmente deixe essa diretiva vazia.(retire o ; para habilitá-la) default_mimetype String Tipo de conteúdo no cabeçalho Content-type:. *post_max_size Integer Informa o máximo de tamanho permitido no método POST. Esta configuração afeta também o upload de arquivos.

274 1.0 Configurações Principais (PHP) Configurações de Caminhos e diretórios CONFIGURAÇÃO *extension_dir DESCRIÇÃO String Local onde estão armazenadas as bibliotecas (dll) que devem ser carregadas.

275 1.0 Configurações Principais (PHP) Configurações de Envio de Arquivos CONFIGURAÇÃO *file_uploads DESCRIÇÃO Boolean Se deve ou não permitir envio de arquivos via HTTP. *upload_tmp_dir String O diretório temporário usado para guardar arquivos quando arquivos forem enviados. O usuário do PHP deve ter permissão de escrita nesse diretório. Se não for especificado, o PHP usará o padrão do sistema. *upload_max_filesize Integer O tamanho máximo de um arquivo enviado.

276 1.0 Configurações Principais (PHP) Configurações de Opções Gerais de SQL CONFIGURAÇÃO sql.safe_mode DESCRIÇÃO Boolean Se ativada, funções de conexão com banco de dados que especificam valores padrão usarão esses valores ao invés dos argumentos fornecidos.

277 1.0 Configurações Principais (PHP) Configurações de Extensões dinâmicas CONFIGURAÇÃO *php_gd2.dll php_mbstring.dll *php_mysql.dll php_mssql.dll *php_pgsql.dll DESCRIÇÃO Quando habilitada esta biblioteca permite a execução de funções gráficas no PHP. Quando habilitada esta biblioteca permite o uso de caracteres multibyte. Muito utilizada em logins de acesso. Quando habilitada esta biblioteca permite a conexão com o banco de dados MySQL. Quando habilitada esta biblioteca permite a conexão com o banco de dados SQL Server. Quando habilitada esta biblioteca permite a conexão com o banco de dados PostgreSQL. OBS.: É necessário ainda copiar a dll libpq.dll da pasta do PHP para a pasta BIN do Apache.

278 1.0 Configurações Principais (PHP) Configurações de Configurações de Módulo CONFIGURAÇÃO DESCRIÇÃO String Altera a região onde será puxado a data e hora. Veja mais em *date.time zone OBS.: Caso queria pegar o horário de uma outra região, opcionalmente podemos utilizar o código abaixo no nosso script: setlocale (LC_ALL, 'pt_br', 'ptb', 'portuguese-brazil', 'bra', 'brazil'); echo strftime ( %H:%M );

279 1.0 Configurações Principais (PHP) Configurações de Funções de CONFIGURAÇÃO *SMTP DESCRIÇÃO String Especifica o seu servidor de . Ex.: SMTP = smtp.flavioizo.com *SMTP_PORT Integer Especifica a porta pela qual utilizas o servidor de e- mail. *sendmail_from ou sendmail_path String Especifica o seu ( de saída). O sendmail_from é para quem utiliza Windows e sendmail_path para que utiliza o Linux.

280 1.0 Configurações Principais (PHP) Configurações de Configurações - MySQL CONFIGURAÇÃO *mysql.default_host *mysql.default_user *mysql.default_password DESCRIÇÃO String Define o host padrão para a função mysql_connect() String Define o usuário padrão para a função mysql_connect() String Define a senha padrão para a função mysqli_connect() OBS.: Não é recomendado definir a senha, a não ser para testes, pois qualquer um pode ter acesso ao arquivo php.ini e ver qual a senha do BD. Ou ainda pode ser feito um echo get_cfg_var("mysql.default_password"); e a senha será impressa.

281 1.0 Configurações Principais (PHP) Configurações de Configurações de Sessão CONFIGURAÇÃO *session.save_path session.name *session.auto_start DESCRIÇÃO String Define o local onde os arquivos serão criados. String Especifica o nome da sessão. Integer Define se o módulo da sessão inicia automaticamente em todas as páginas. O padrão é 0 (desabilitado), sendo assim, deve-se utilizar a função session_start() nas páginas em que se deseja iniciar o módulo de sessão.

282 1.0 Configurações Principais (PHP) Configurações de Configurações de Sessão CONFIGURAÇÃO session.gc_maxlifetime DESCRIÇÃO Integer Especifíca o número de segundos após os dados terem sido considerados como lixo ( garbage ) para serem limpos. *session.cache_expire Integer Define o número de minutos para sessão expirar. O valor padrão é 180. *session.hash_function Integer Define o tipo de hash: 0 para MD5 128 bits e 1 para SHA bits. Disponível à partir do PHP 5

283 1.0 Configurações Principais (PHP) Uma situação muito comum é efetuar as alterações no php.ini e estas não serem devidamente aplicadas. Sendo assim, não esqueça que após fazer as alterações no arquivo php.ini é necessário salvá-lo e reiniciar o servidor WEB.

284 2.0 Ferramentas de produção Web Ferramenta Adobe Dreamweaver Adobe Photoshop Adobe Flash Notepad++ NuSphere PHPEd Descrição Possibilita a criação e o gerenciamento de páginas Web. Software Proprietário Possibilita a criação de conteúdos gráficos. Software Proprietário Possibilita a criação de conteúdo interativo. Software Proprietário Editor de texto e códigos fonte que suporta as mais variadas linguagens de programação. Recurso mais avançado que o bloco de notas (notepad). Software Gratuito Editor de conteúdos PHP Software Proprietário

285 2.0 Ferramentas de produção Web Ferramenta PHP Editor PHP Designer NetBeans Editor de conteúdos PHP Descrição Software Gratuito Editor de conteúdos PHP Software Proprietário Editor para desenvolvimento desktop, mobile e para aplicação Web. Suporta Java, PHP, C/C++ entre outros. Software Gratuito Zend Studio Editor para desenvolvimento de aplicações Web baseadas em PHP. Software Proprietário

286 2.0 Ferramentas de produção Web Essas são apenas algumas ferramentas, existem outras que você também poderá utilizar para desenvolver seu código PHP. No entanto, é importante frisar que até com um editor bem simples como o notepad é possível criar um site completo. O que as ferramentas, citadas acima, possuem é um diferencial para facilitar o nosso trabalho.

287 2.0 Ferramentas de produção Web Lembre-se também que a ferramenta sozinha não irá valer de nada se você não souber manipulá-la e nem entender da linguagem pela qual vai desenvolver. As ferramentas só auxiliam nossos afazeres.

288 3.0 Quanto a Sintaxe Em se tratando de sintaxe, o PHP é muito parecido com C e C++. Imprimindo na tela: lang= pt-br > charset= iso />

289 3.0 Quanto a Sintaxe É importante observar que ao final de cada comando devemos colocar um ponto e vírgula (;). O código PHP fica embutido no código HTML. Sendo assim, quando efetuamos a solicitação de interpretação de uma linguagem, o servidor WEB devolve somente códigos HTML, imagens etc., ou seja, o código Server-Side é interpretado e transformado em HTML e devolvido.

290 3.0 Quanto a Sintaxe Isso fica claro se ao executar o código citado anteriormente, pedirmos para visualizar o código fonte. Olha o que teremos de retorno: lang= pt-br > charset= iso />

291 3.0 Quanto a Sintaxe Veja que a sintaxe PHP não aparece. Somente visualizamos a interpretação que o servidor Web fez do código PHP. Esse procedimento evita que o usuário copie seu código PHP, visualize suas senhas de conexão com o banco de dados etc.

292 4.0 Variáveis Em PHP, não é necessário declarar as variáveis, bastando que o programador atribua um valor á variável e esta já estará guardada na memória. Para criar variáveis em PHP é necessário seguir duas regras: As variáveis em PHP obrigatoriamente devem começar com o caractere especial cifrão ($); As variáveis são case sensitive, ou seja, diferem letras maiúsculas de minúsculas.

293 4.0 Variáveis lang= pt-br > charset= iso />

294 4.0 Variáveis Observe que as variáveis não foram declaradas. Vejam também que tanto a linha 11 quanto a linha 13 imprimem o mesmo resultado. Na linha 13, especificamente, eu utilizei um recurso denominado concatenação.

295 4.0 Variáveis Conforme pode perceber, além de não declarar, também não informamos o tipo de dados das variáveis, pois isso não é necessário no PHP. Já quando utilizamos variáveis do tipo Array, a situação muda um pouco. Esse tipo de variável pode ser montado de diversas formas.

296 4.0 Variáveis Forma 01: $lista = array(10,29,34,6,25); Esse array pode ser chamado assim: echo $lista[3]; // vai imprimir o valor 6 echo $lista[1]; // vai imprimir o valor 29 OBS.: O array começa na posição 0 (zero).

297 4.0 Variáveis Forma 02: $lista[0] = 10; //valor 10 na posição zero; $lista[1] = 11; //valor 11 na posição 1; $lista[] = 12; //valor 12 na posição 2; $lista[5] = 15; //valor 15 colocado na posição 5; Esse código vai gerar um array da seguinte forma: $lista = array(10, 11, 12,,, 15);

298 4.0 Variáveis Forma 03: $usuario[ nome ] = João das Couves ; $usuario[ idade ] = 29; $usuario[ ] = joaocouves@gmail.com ; Esse array é o mesmo que nós fizéssemos assim: $usuario = array( nome => Flávio Izo, idade => 29, => flavio@flavioizo.com ); Agora podemos efetuar a impressão dos valores: echo O usuário.$usuario['nome']., de.$usuario['idade']. anos tem .$usuario[ ].. ;

299 4.0 Variáveis Forma 04: Há ainda as matrizes bidimensionais: $populacao[ ES'][ Cachoeiro'] = ; $populacao[ ES'][ Vitória'] = ; $populacao[ BA'][ Salvador'] = ; $populacao[ MG'][ Juiz de Fora'] = ;

300 5.0 Variáveis Locais e Globais Toda variável possui um escopo, podendo este ser global ou local. O escopo é o bloco de comandos em que a variável pode ser utilizada. Na maioria das vezes uma variável é global, ou seja, pode ser utilizada em qualquer parte do código. Já a local, só é utilizada dentro do seu bloco de criação.

301 5.0 Variáveis Locais e Globais Quando elaboramos um script que contenha funções, só podemos utilizar as variáveis declaradas dentro da própria função. Uma variável global não pode ser utilizada dentro de uma função sem que seja declarada como global.

302 5.0 Variáveis Locais e Globais Se executarmos esse código, o que vamos obter? Teste: lang= pt-br > charset= iso />

303 5.0 Variáveis Locais e Globais Como resolver isso? Veja: lang= pt-br > charset= iso />

304 5.0 Variáveis Locais e Globais Existe ainda outra forma de acessar variáveis globais. Veja o exemplo anterior, porém utilizando o array superglobal $GLOBALS: lang= pt-br > charset= iso />

305 5.0 Variáveis Locais e Globais Então, sempre que necessitar, utilize uma das duas formas para recuperar uma variável global.

306 6.0 Constantes As constantes (identificadores que ao receber um valor, não pode mais ser alterado até o fim da execução do script) são estabelecidas utilizando-se a função define( nome_da_constante,valor). E para recuperar um valor de uma constante, você deve utilizar os mesmos procedimentos que utiliza para chamar uma variável, porém sem o $ (cifrão). Outra alterativa para chamar uma constante é utilizar a função constant( nome_da_constante ).

307 6.0 Constantes Veja o exemplo: lang= pt-br > charset= iso />

308 6.0 Constantes Veja que na figura 35, nas linhas 8 e 9 eu defini duas CONSTANTES (x e y). Na linha 10 eu recuperei esses valores utilizando a função contant(). Já na linha 11 eu recuperei os valores das constantes x e y chamando diretamente por x e y (sem o uso da função constant()).

309 6.0 Constantes É importante observar ainda, que esse código possui um erro no escopo de montagem. Você é capaz de descobrir em qual linha está o erro? Execute e veja! Se você respondeu que está na linha 12, você acertou! A constante não pode ter seu valor alterado durante a execução do script. Se eu executar essa página, olha o que vai acontecer:

310 6.0 Constantes Nós recebemos uma mensagem (notice) informando que uma constante x já foi definida! O PHP possui algumas constantes que já vem prédefinidas. Essas constantes nos auxiliam para que recebamos algumas informações úteis. Relacionei algumas:

311 6.0 Constantes Constante PHP_VERSION PHP_MAJOR_VERSION Mostra a versão do PHP. Descrição Mostra a versão principal do PHP. PHP_MINOR_VERSION PHP_OS PHP_EXTENSION_DIR Mostra a versão secundária do PHP. Mostra o sistema operacional onde está instalado o PHP. Mostra o diretório onde ficam as extensões. Para visualizar todas as constantes existentes na sua versão PHP, utilize o código abaixo:

312 6.0 Constantes A função get_defined_constants() retorna um array com todas as constantes que estão atualmente disponíveis, inclusive as que foram definidas por você. Já a função print_r() imprime todo o conteúdo do array. Vale lembrar que, a tag <pre> formata o texto conforme foi escrito.

313 6.0 Constantes Utilize a função defined( nome_da_constante ) para descobrir se uma constante existe (foi declarada). Quando executada, esta função retornará 1 (ou true) para verdadeiro ou 0 (ou false) para falso. Exemplo:

314 Faça a lista 06

315 Programação WEB PROF. FLÁVIO IZO A U LA 1 2 I N T R O D U Ç Ã O A O P H P P A R T E I I I

316 Objetivos da Aula 1.0 Concatenação de Valores 2.0 Arrays Superglobais 3.0 Operadores Aritméticos 4.0 O operador. 5.0 O operador.= 6.0 Operadores ++ e --

317 Objetivos da Aula 7.0 Operadores += e -= 8.0 Operadores *= e /= 9.0 Operador %= 10.0 Operadores de comparação 11.0 Operadores Lógicos 12.0 Exercícios

318 1.0 Concatenação de Valores A concatenação de valores é uma técnica que auxilia muito as linguagens de programação. No PHP utilizamos o ponto (.) para concatenar os valores. Veja: lang= pt-br > charset= iso />

319 1.0 Concatenação de Valores Pode-se exibir um valor na tela utilizando-se da palavra reservada echo ; Ex.: $nome = Izo ; echo Meu nome é ; echo $nome; $nome = Izo ; echo Meu nome é $nome ; $nome = Izo ; echo Meu nome é.$nome;

320 2.0 Arrays Superglobais A linguagem PHP nos fornece alguns arrays nativos (built-in), ou seja, são palavras reservadas que já existem e estão prontas para serem utilizados. Eu diria até que essa é uma das partes mais importantes do PHP. Veja quais são eles:

321 2.0 Arrays Superglobais Os arrays $_GET e $_POST servem para receber valores vindos dos formulários, de acordo com o método definido. Vamos testar o $_GET e $_POST? O $GLOBALS serve para receber valores de variáveis globais, conforme mostrado anteriormente.

322 2.0 Arrays Superglobais O $_SESSION é utilizado sempre que trabalhamos com sessões. (Veremos mais à frente) O $_COOKIE utilizado quando trabalhamos com cookies (arquivos de rastreamento salvos no computador do cliente).

323 3.0 Operadores Aritméticos Os operadores são muito importantes dentro de projetos dinâmicos. Vamos conhecê-los: Operadores Matemática PHP Adição A + B A + B Subtração A B A B Multiplicação A B A * B Divisão A B A / B Módulo (mod) A % B Para achar o DIV utilize a função nativa de PHP floor() que arredonda o resultado para baixo.

324 3.0 Operadores Aritméticos É possível atribuir uma operação a uma variável em tempo de execução. Como? $variavel = $x + $y; $variavel = $x + $y * $z; $variavel = $x / $y + $z; $variavel = (($x + $y) * $z)/$p;

325 4.0 O operador. Utilizado para concatenar strings; Ex.: Resultado:

326 5.0 O operador.= Este é conhecido como operador de atribuição. Serve para atribuir um valor a uma variável, sem que o valor anterior seja perdido; Ex.: Resultado:

327 6.0 Operadores ++ e -- O operador ++ incrementa em 1 o valor da variável; O operador -- decrementa em 1 o valor da variável; Ex.:

328 7.0 Operadores += e -= O operador += incrementa da variável o valor após o operador; O operador -= decrementa da variável o valor após o operador; Ex.:

329 8.0 Operadores *= e /= O operador *= multiplica a variável pelo valor após o operador; O operador /= divide a variável pelo valor após o operador;

330 9.0 Operador %= O operador %= divide a variável pelo valor após o operador, considerando como resultado somente o resto da divisão.

331 Resumindo Operadores Significado PHP += A = A + B $A += $B -= A = A B $A = $B *= A = A * B $A *= $B /= A = A B $A /= $B %= A = A % B $A %= $B ++ A = A + 1 $A++ -- A = A 1 $A--

332 10.0 Operadores de comparação Como o nome já diz, utilizamos esses operadores para comparar valores. No PHP, o retorno será sempre 1 para Verdadeiro ou 0 para Falso. A seguir veremos uma tabela com esses operadores.

333 10.0 Operadores de comparação Operação Operador Sintaxe Igual == $a == $b Idêntico === $a === $b Diferente Maior Menor Maior ou igual / menor ou igual!= <> > < >= <= $a!= $b $a <> $b $a > $b $a < $b $a >= $b $a <= $b

334 11.0 Operadores Lógicos Esses operadores servem para comparar vários valores. A seguir veremos uma tabela com esses operadores.

335 11.0 Operadores Lógicos Operador and ou && or ou xor Operação E lógico OU lógico OU exclusivo! ou not NÃO (negação ou inversão)

336 11.0 Operadores Lógicos XOR (OU Exclusivo): Só uma condição pode ser verdadeira. condição 1 XOR condição 2 Resultado V xor V F V xor F V F xor V V F xor F F

337 12.0 Operador Ternário Esse tipo de operador tem um entendimento especial. Ele atribui um valor entre dois possíveis, de acordo com o resultado da condição. Sua sintaxe é bem simples: (Condição)? (Valor1) : (Valor2);

338 12.0 Operador Ternário Observe o uso dos sinais? e : para testar a condição. Se ela retornar um valor verdadeiro (true), Valor1 será executado. Caso o retorno seja negativo (false), teremos a execução de Valor2. $c = ($a == $b)? ($a - $b) : ($a + $b);

339 13.0 Exercícios Faça a lista07.pdf

340 Programação WEB PROF. FLÁVIO IZO A U LA 1 3 I N T R O D U Ç Ã O A O P H P P A R T E I V

341 Revisão da aula anterior O que são arrays superglobais? Dê exemplos. O que faz o operador.=? Dê exemplo. O que fazem os operadores ++ e --? Dê exemplo. O que fazem os operadores += e -=? Dê exemplo. O que fazem os operadores *= e /=? Dê exemplo.

342 Objetivos da Aula 1.0 Estrutura Condicional (if) 2.0 Estrutura Condicional (Switch) 3.0 Estrutura de repetição (while) 4.0 Estrutura de repetição (do...while) 5.0 Estrutura de repetição (for) 6.0 Estrutura de repetição (foreach)

343 Objetivos da Aula 7.0 Funções 8.0 Funções Built-in (internas): 9.0 Exemplo implementado! 10.0 Exercícios

344 1.0 Estrutura Condicional (if) É uma estrutura muito utilizada. Verifica qualquer tipo de condição. Veja como podemos montar sua sintaxe:

345 1.0 Estrutura Condicional (if) Muito utilizada para que se possa executar uma determinada ação, desde que uma condição seja aceita.

346 2.0 Estrutura Condicional (Switch) É a estrutura que verifica condições que são mais específicas. Veja sua sintaxe: <?php switch(condicao){ case valor1 : comando1 break; case valor2 : comando2 break; case valorn : comandon break; default: comando_default break; }?> O uso do default não é obrigatório no switch, nem mesmo o uso de break no default, visto que é a última verificação a ser feita.

347 2.0 Estrutura Condicional (Switch) Ex. 2:

348 3.0 Estrutura de repetição (while) A estrutura while analisa um expressão e executa um bloco de comandos enquanto a expressão for verdadeira; Obs.: Sempre deve haver pelo menos uma chance da expressão ser falsa.

349 4.0 Estrutura de repetição (do...while) Muito parecida com a estrutura while, porém esta executa o bloco de comandos para depois analisar a expressão;

350 5.0 Estrutura de repetição (for) É uma estrutura de repetição como as outras, porém, na sua própria sintaxe são definidas algumas regras: Inicialização: o valor de início do contador. Ex.: $x=1 Condição: A condição para que a repetição termine. Operador: O incremento ou decremento no valor do contador de inicialização. Ex.: $x++ <?php for(inicialização;condição;operador){ comandos }?>

351 5.0 Estrutura de repetição (for) Ex.:

352 6.0 Estrutura de repetição (foreach) Esta estrutura oferece uma maneira mais simples de percorrer os elementos de um array. <?php foreach($array as $elemento){ comandos; }?> ou <?php foreach($array as $chave => $valor){ comandos; }?> À seguir veremos os exemplos...

353 6.0 Estrutura de repetição (foreach) Primeiro modelo: <?php foreach($array as $elemento){ comandos; }?>

354 6.0 Estrutura de repetição (foreach) Segundo modelo: <?php foreach($array as $chave => $valor){ comandos; }?>

355 7.0 Funções As funções são blocos de comandos com o objetivo de executar determinada ação. A sintaxe básica da função é: <?php function nome_funcao(arg_1, arg_2, arg_n){ comandos; }?>

356 7.0 Funções É importante saber que as funções podem ou não retornar valores. No caso de não retornar valor, a função somente executa um ou vários comandos e pronto! Já no caso de retornar valor, este pode ser uma variável contendo um valor único ou um array.

357 7.0 Funções As funções também podem receber parâmetros, sendo esses separados por vírgula e passados durante a chamada da função. Vejamos alguns exemplos:

358 7.0 Funções Exemplo 01:

359 7.0 Funções Exemplo 02: Em caso de retornar algum valor, é necessário colocar o return na execução da função.

360 7.0 Funções Observação do exemplo 02: Toda vez que chamamos uma função que retorna um valor, este deverá ser OBRIGATORIAMENTE atribuído a alguma variável, impresso na tela ou utilizado em um cálculo. No exemplo acima, eu atribuí o retorno da função à variável $valor.

361 7.0 Funções Exemplo 03: Passando argumentos (parâmetros)

362 7.0 Funções Exemplo 04: Passando endereço dememória Qual será a saída? Qual será a saída?

363 8.0 Funções Built-in (internas): Existem algumas funções que são internas do PHP e podem nos auxiliar muito na execução de scripts: Função htmlspecialchars() addslashes() stripslashes() urlencode() urldecode() Descrição Converte caracteres especiais para a realidade HTML Retorna uma string com barras invertidas antes de caracteres que precisam ser escapados (para serem utilizados em query a banco de dados, por exemplos). Estes caracteres são aspas simples ( ), aspas duplas ( ), barra invertida (\) e NUL (o byte NULL). Desfaz o efeito de addslashes(), ou seja, remove barras invertidas de uma string. Retorna uma string em que todos os caracteres não-alfanuméricos com exceção de -_. são substituídos com um sinal de porcento (%) seguido por dois digitos hexadecimais. Os espaços são codificados com um sinal de (+). Desfaz o efeito de urlencode().

364 8.0 Funções Built-in (internas): Função Descrição trim() ltrim() chop() strstr() stristr() strlen() str_replace() Remove os espaços do início e do fim do texto. Remove os espaços do início do texto. Remove os espaços do fim do texto. Encontra a primeira ocorrência de uma string e retorna true caso encontre ou false, caso não encontre. Funciona como o strstr(), porém sem diferenciar maiúscula de minúsculas. Retorna o tamanho de uma string. Substitui todas as ocorrências da string de procura com a string de substituição. As funções nos auxiliam muito na organização do código pois estes ficam mais limpos e ágeis. Então, aproveite e crie suas funções durante a criação dos scripts. Elas poderão ser reutilizadas e, ainda, facilitarão a manutenção no código.

365 8.0 Funções Built-in (internas): Função htmlspecialchars() Esta função serve para impedir que se envie códigos HTML via campo de mensagem (input);

366 8.0 Funções Built-in (internas): Vejamos outro exemplo:

367 8.0 Funções Built-in (internas): Função addslashes() e stripslashes() Pense na seguinte situação: O usuário preenche um formulário e digita no campo nome: Edson Arantes, vulgo Pelé As aspas irão atrapalhar o uso dessas informações, sendo assim deve-se utilizar a seguinte função: $nome = addslashes($_post[ nome ]); Edson Arantes, vulgo \ Pelé\ Posteriormente, basta utilizar outra função para reconverter esse código para que volte ao normal; echo stripslashes($nome]); Edson Arantes, vulgo Pelé

368 8.0 Funções Built-in (internas): Função urlencode() e urldecode() Quando utilizados o método GET os caracteres especiais são substituídos por códigos precedidos pelo %. arroba); O urldecode serve para decodificar os códigos convertidos e exibi-los corretamente O urlencode faz o oposto, ou seja, converte os caracteres especiais em códigos precedidos de % ;

369 8.0 Funções Built-in (internas): Ex.:

370 8.0 Funções Built-in (internas): Funções trim(), ltrim() e chop() Espaços em branco no início ou fim dos textos podem se tornar um problema, principalmente quando grava-sedados no BD;

371 8.0 Funções Built-in (internas): Função strstr(): Espaços em branco Em algumas situações é interessante evitar os espaços em branco, por exemplo em s e senhas. Assim, utilizamos a função strstr() ; RESULTADO:

372 8.0 Funções Built-in (internas): Função strlen(): Tamanho da variável A função strlen() verifica o tamanho em caracteres de uma variável RESULTADO:

373 8.0 Funções Built-in (internas): Função str_replace(): Substituir caracteres A função str_replace() serve para substituirmos um valor por outro, em uma determinada string;

374 8.0 Funções Built-in (internas): Função str_replace(): Substituir caracteres

375 8.0 Funções Built-in (internas): Função in_numeric(): Valores Numéricos Pode-se testar se um valor é numérico, bastando utilizar a função is_numeric() ; RESULTADO:

376 8.0 Funções Built-in (internas): Pode-se ainda utilizar outras funções built-in: gettype(); is_numeric(), is_int(), is_integer(), is_real(), is_long(), is_float(), is_string(), is_array(), is_object(), isset(), empty().

377 10.0 Exercícios Lista08.pdf

378 Programação WEB PROF. FLÁVIO IZO A U LA 1 4 I N T R O D U Ç Ã O A O P H P P A R T E V

379 Objetivos da Aula 1.0 Manipulando arquivos

380 1.0 Manipulando Arquivos Embora não aconteça com frequencia, às vezes não poderemos contar com um BD. Nestes casos a solução é utilizar os arquivos.txt. A manipulação de arquivos é muito útil para algumas tarefas. A seguir veremos algumas funções que poderão nos auxiliar nesta manipulação:

381 1.0 Manipulando Arquivos (Auxílio) fopen(); fclose(); fwrite(); fread(); // lê um determinado número de bytes file_get_contents(); // lê e coloca o conteúdo em uma string readfile(); // lê e coloca o conteúdo no buffer de saída fgets(); // lê linha por linha Saiba mais em

382 1.0 Manipulando Arquivos (Auxílio) Modos de abertura de um arquivo:

383 2.0 Exercícios Faça a lista07.pdf

384 Programação WEB PROF. FLÁVIO IZO A U LA 1 6 I N T R O D U Ç Ã O A O P H P P A R T E V I

385 Objetivos da Aula 1.0 Funcionamento do phpmyadmin 2.0 Habilitando um banco de dados 3.0 Conectando-se ao MySql com PHP 4.0 Organizando uma consulta 5.0 Exercícios

386 1.0 Funcionamento do phpmyadmin O funcionamento do phpmyadmin é simples e basta acessar o endereço Nesta ferramenta, pode-se criar banco de dados completos;

387 2.0 Habilitando um banco de dados Para habilitar um banco de dados, basta acessar o arquivo php.ini; Para saber onde este arquivo está localizado na sua máquina basta acessar o phpinfo();

388 2.0 Habilitando um banco de dados Após abrir o arquivo php.ini deve-se localizar a linha abaixo: php_mysql.dll: habilita o banco mysql php_pgsql.dll: habilita o banco postgre Basta retirar o ; que fica no início da biblioteca