Minicurso de PHP + MySQL que eu (@g0nc1n) ministrarei nos dias 25 e 26 de maio de 2011 durante a II Semana de Sistemas de Informação do Uni-FACEF (@UniFACEF)

1. Introdução ao desenvolvimento Web com PHP e MySQL Fausto Gonçalves Cintra Oficial de Tecnologia e Informática do Uni-FACEF fausto@facef.br Twitter: @g0nc1n II Semana de Sistemas de Informação 25 e 26 de maio de 2011

2. Sobre o ministrante Formação Acadêmica Bacharel em Ciência da Computação com Ênfase em Análise de Sistemas – Universidade de Franca (1997) Bacharel em Direito pela Universidade Estadual Paulista “Júlio de Mesquita Filho” – UNESP (2008) Experiência Profissional Andes Informática (1997-2001): Delphi, Interbase, Firebird Prefeitura Municipal de Franca (2001-2005): Visual Basic 6, MS SQL Server, ASP Centro Universitário de Franca (2005-): PHP, MS SQL Server, MySQL Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 2

3. Objetivos do minicurso Expor uma visão geral do fluxo de desenvolvimento de aplicações para Web, utilizando: PHP como linguagem de script server-side e MySQL como sistema de gerenciamento de banco de dados. Explicitar a forma como estes interagem com outras linguagens tecnologicamente fundamentais para aquela plataforma, tais como HTML, CSS e Javascript. Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 3

4. O que veremos no minicurso Conceitos básicos de funcionamento da Internet e da Web. O papel dos servidores Web e dos navegadores HTML: surgimento e importância para a Internet tal como a conhecemos hoje Automatizando a geração de documentos HTML: PHP + MySQL MySQL: criação de um banco de dados simples PHP: implementação dos processos de CRUD (Create, Retrieve, Update, Delete) sobre o banco de dados criado no MySQL CSS e Javascript: abordagem eventual e transversal aos demais conteúdos Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 4

5. Muita coisa? Esperem... “não é só apenas isso”... Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 5

6. Vocês verão o ministrante: Ga-ga-ga-gueeejar Suar como um gordinho na sauna (!?) Tremer as pernas Perder o fio da meada Derrubar coisas no chão Não saber tudo Tentar (!?) ser simpático Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 6

7. Vamos começar do começo... Prontos? Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 7

8. Tudo começou assim... Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 8 http://www.youtube.com/watch?v=LlwL-6iqFJI

9. AS Origens da internet Brincadeiras à parte... Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 9

10. ARPANET Surgimento: 1969 Objetivo Conectar, nos EUA, instalações militares e centros de pesquisa Característica Arquitetura descentralizada, na qual dois pontos poderiam manter a comunicação mesmo se outros pontos perdessem a conexão Pacotes A informação é dividida em pacotes na origem Cada pacote pode tomar um caminho (rota) diferente Os pacotes são reagrupados no destino, restaurando a informação original Considerada a “avó” da Internet Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 10

11. Esquema de roteamento Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 11 A D Rotas de A a C Topologia em anel. Se mais de um elo se quebrar, a comunicação fica comprometida B C Conexões redundantes para criar rotas alternativas

12. Consequências do surgimento da ARPANET Aparição de outras redes baseadas em pacotes e roteamento Problemas Cada rede implementou a troca de pacotes à sua maneira Quando essas redes precisaram se comunicar entre si, elas não se entendiam Solução O desenvolvimento de um protocolo de comunicação inter-redes (INTERNETworking): o TCP/IP Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 12

13. Protocolo? Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 13 早上好，我是刘星 ??? ??? Prazer em conhecê-lo. Goodmorning, I am Liu Xing. Gladtomeetyou.

14. Com o TCP/IP, surge a Internet Em seus primórdios (1973-1989), era bem diferente de como a conhecemos hoje: Não havia navegadores (browsers) Não existiam buscadores – era necessário saber o endereço de uma máquina para acessar seu conteúdo Textos, imagens e sons eram armazenados separadamente, e não havia uma forma de integrá-los num único conteúdo Não havia uma forma de um documento fazer referência a outro (hyperlink) MAS O E-MAIL JÁ EXISTIA (com @ e tudo!) Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 14

15. A WWW e o HTML O mundo nunca mais seria o mesmo Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 15

16. Agradeça todos os dias a este sujeito Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 16 Trouxe o conceito de hyperlink (que existia desde os anos 60) à Internet Como ele fez isso? Idealizou uma forma de endereçamento que pudesse identificar unicamente um documento na Internet (URL) Criou uma forma de escrever esses documentos, unindo textos e imagens (e, mais tarde, também sons e vídeos) – o HTML (HyperTextMarkupLanguage– linguagem de marcação de hipertexto) (cont.) Tim Berners-Lee Idealizador da WWW (1989)

17. Esse é o cara Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 17 Como ele fez isso (cont.)? Concebeu o modo pelo qual documentos HTML seriam transportados através da Internet – o HTTP (HyperTextTransferProtocol – protocolo de transferência de hipertexto) Escreveu o primeiro programa capaz de interpretar a HTML e exibir documentos que reuniam, ao mesmo tempo, texto, imagens e hyperlinks para outros documentos – o primeiro navegador (browser), chamado WorldWideWeb. Logo, haveria uma rede de servidores com documentos HTML para serem acessados – surgiria a World Wide Web (“teia de alcance mundial”) O http:// fui eu quem fiz, ó! Tim Berners-Lee Idealizador da WWW (1989)

18. O Que é HTML? Mas, afinal de contas... Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 18

19. Linguagem de marcação de hipertexto É um arquivo de texto, legível por seres humanos, normalmente com extensão .htm ou .html O que não significa que você vai entender de primeira o que está escrito em um... É uma linguagem de MARCAÇÃO: serve para MARCAR como conteúdos de diferentes mídias aparecerão numa página Pelamordedeus: HTML não é linguagem de programação! Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 19

20. Estrutura básica de um arquivo HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Título da Página</title> </head> <body> <p>Conteúdo da página</p> </body> </html> Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 20 Isto é uma etiqueta (tag) de abertura Aqui vão as informações do cabeçalho da página... Não se preocupe, ninguém decora o DOCTYPE. Ele ou é gerado por um editor HTML ou você pode copiar e colar de uma página já existente. No body, vão as informações que o usuário verá na página E essa aqui é a tag de fechamento Entendeu, cabeção?

21. Atividade com HTML Criar/visualizar um arquivo HTML Para criar: PSPad Para visualizar: navegador web (Firefox ou IE) Apresentação das tags <h1> a <h6> <p> <br /> <img> <a> Brevíssima introdução ao CSS Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 21

22. Agora vamos pensar um pouco... Criar e editar arquivos HTML não é muito produtivo, apesar de existirem editores visuais (Adobe Dreamweaver, KompoZer, Bluefish) Imagine um site noticioso (g1.globo.com, folha.com) e sua enorme quantidade de páginas de notícias... Na maioria dos sites, as páginas têm um aspecto padrão, variando apenas o conteúdo Calcule o trabalho necessário para trocar o layout de um portal inteiro... Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 22

23. Enfim... Deve existir alguma coisa que Minimize o trabalho (repetitivo e enfadonho) de criar arquivos HTML Melhor ainda se... As páginas HTML pudessem geradas automaticamente a partir de um modelo predefinido TCHARAN! Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 23

24. O servidor web O começo da solução Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 24 www

25. Você sabia que... Quando abre uma página da Internet, você não tem acesso direto à pagina HTML? Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 25 Servidor Web Navegador Web Arquivo HTML Computador do usuário Computador servidor

26. Mas por que eu não posso acessar os arquivos diretamente? (Ou: por que existe o servidor web?) Controle de acesso e segurança Muitas vezes, alguns arquivos devem ser vistos apenas por alguns usuários Porque o servidor web é capaz de processar os arquivos originais e entregar ao navegador um conteúdo diferente TCHARAN! Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 26

27. Então, o servidor web é... um software que fica executando num servidor, em modo serviço (daemon) e recebe requisições (requests) do navegador, devolvendo respostas (responses) Exemplos de resposta: 200: OK (a página foi enviada normalmente) 403: Proibido (você não tem autorização para acessar a página) 404: Não encontrado (você pediu para ver uma página que não existe ou não foi encontrada) Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 27

28. E aquela história de “processar” arquivos? Para isso, o servidor web utiliza módulos que executam scripts do lado do servidor (server-side) São exemplos de linguagens que podem ser utilizadas em scripts server-side: ASP (*.asp) ASP.NET (*.aspx) Cold Fusion (*.cfm) Ruby (*.rb) PHP (*.php;*.php5) TCHARAN! Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 28

29. Funciona assim... Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 29 Ô PHP, toma que é tua! (REQUEST) Manda aí o arquivo “gostosas.html” (RESPONSE) Arquivo “gostosas.html” (RESPONSE) Arquivo “gatas.php” (conteúdo HTML) Manda o HTML que eu gerei pro navegador, ele só entende isso! Servidor Web Navegador Web Módulo PHP (REQUEST) Manda agora o arquivo “gatas.php” Arquivo HTML Arquivo PHP Computador do usuário Computador servidor

30. E onde entra o MySQL nessa história? O módulo PHP é que tem capacidade de acesso a bancos de dados Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 30 MySQL Módulo PHP

31. Enfim... O servidor Web utiliza o módulo PHP para processar requisições que contém scripts server-side naquela linguagem e entregar respostas em HTML ao navegador Nesse processo, o módulo PHP pode acessar um SGBD (como, por exemplo, o MySQL) para acessar, inserir, alterar e excluir dados Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 31

32. Conhecer as ferramentas Antes de por as mãos à massa, vamos... Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 32

33. O servidor web: Apache Por que o Apache? Existe desde 1995 Multiplataforma (IIS) Código aberto (IIS) Desenvolvido por uma sólida fundação sem fins lucrativos - Apache Foundation (nginx, lighttpd) Serve 63% dos websites do mundo (Netcraft.com, maio/2011) Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 33

34. A linguagem de script server-side: PHP Por que PHP? Existe desde 1995 Multiplataforma (ASP, ASP.NET) Código aberto (ASP, ASP.NET, Ruby, Python...) Presente em 63% dos websites do mundo (W3Techs.com, out/2010) Conectividade (suporta vários SGBDs), bibliotecas nativas (gráficos, manipulação e (des)compressão de de arquivos...) Facilidade em obter ajuda/suporte/emprego... (...) Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 34

35. O sistema de gerenciamento de banco de dados: MySQL Por que MySQL? Existe desde 1995 Multiplataforma (MS SQL Server) Código aberto (MS SQL Server, Oracle, PostgresSQL, Firebird, SQLite...) Leve (MS SQL Server, Oracle, PostgresSQL, Firebird, SQLite...) Suporte a transações (MS SQL Server, Oracle, PostgresSQL, Firebird, SQLite...) Usado por Wikipédia, Wordpress, Facebook... Um porém: Oracle Corporation: a comunidade de código aberto passou a desenvolver o MariaDB, cuja API é compatível com a do MySQL Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 35

36. Windows + Apache + MySQL + PHP = WAMP Pacotes WAMP instalam o Apache, o MySQL e o PHP, em conjunto e pré-configurados, na plataforma Windows XAMPP EasyPHP WampServer Para as plataformas Linux (LAMP) e MacOS (MAMP), pacotes semelhantes estão disponíveis Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 36

37. WampServer 2.1 Apache 2.2.1.7 PHP 5.3.5 MySQL 5.5.8 Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 37

38. Uma lista telefônica simples O primeiro projeto PHP + MySQL, para chamar de seu Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 38

39. Sumário do projeto Lista telefônica simples, com nome, telefone e um indicador (“flag”) para distinguir celulares Criar a estrutura de um banco de dados no MySQL, utilizando o MySQLWorkbench Implementar as quatro operações básicas (CRUD) com os dados da lista telefônica: inserir (creation); recuper (retrieve); atualizar (update); e Excluir (delete) Utilizar o PSPad para edição de PHP/HTML Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 39

40. Criação do banco de dados No MySQLWorkbench Configurar a conexão Criar um novo banco de dados (schema): lista_telefonica Criar uma tabela no banco de dados: tb_contato cod_contato – integer, primarykey, autoincrement nome – varchar(100) telefone – varchar(15) celular – boolean Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 40

41. Inserindo dados – o formulário Criação do arquivo “inserir.php” Forms: métodos (GET e POST) e action Campos de formulário Botão de salvar/enviar (submit) Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 41

42. Inserindo dados – a gravação no BD Criação do arquivo “gravar.php” A variável superglobal$_POST PDO (PHP Data Objects) versus funções mysql_* $db = new PDO('mysql:host=localhost; dbname=lista_telefonica', 'root', ''); Instrução SQL INSERT Redirecionamento de páginas Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 42

43. Recuperando e listando dados Criação do arquivo “index.php” Colocar link para inserção de novo contato Instrução SQL SELECT Instrução PHP foreach e sintaxe alternativa Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 43

44. Alterando dados Criação do arquivo “atualizar.php”, copiando “inserir.php” A variável superglobal$_GET Campos ocultos (input type=“hidden”) Modificação do arquivo “gravar.php” para aceitar atualização de dados Instrução SQL UPDATE Modificação do arquivo “index.php” – colocar link para alteração Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 44

45. Excluindo dados Criação do arquivo “excluir.php”, copiando “inserir.php” Por que POST na exclusão Modificação do arquivo “index.php” – adicionar formulário de exclusão Confirmação da exclusão com Javascript Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 45

46. Indo além do CRUD Otimizando o código e suprimindo as duplicidades – a instrução include Validação de dados server-side(PHP) Validação de dados client-side(Javascript) Trabalhando o aspecto visual da aplicação – CSS (Cascading Style Sheets) Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 46

47. E o ornitorrinco? “O ornitorrinco é um pato com todas as alterações pedidas pelo cliente.” Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 47

48. Perguntas <?php Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 48

49. Que este minicurso não seja um fim, e sim, um começo... <?phpecho “Obrigado!”; ?> Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 49

50. Para aprender mais Documentação do PHP(em português): http://www.php.net/manual/pt_BR/ Documentação do MySQL 5.5 (em inglês): http://dev.mysql.com/doc/refman/5.5/en/index.html Referência do HTML 4.01 (em português): http://desenaviegas.com/cover.html GUTMANS, Andi; BAKKEN, Stig Saether; RETHANS, Derick. PHP 5 – Programação poderosa. Rio de Janeiro : Alta Books, 2005. SILVA, Maurício Samy. Construindo sites com CSS e (X)HTML: sites controlados por folhas de estilo em cascata. São Paulo : Novatec, 2008. Siga o autor no Twitter: @maujor Introdução ao desenvolvimento Web com PHP e MySQL :: Fausto G. Cintra (fausto@facef.br) 50