php e mysql aplicacao completa a partir do zero

PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO!

www.desktopeweb.blogspot.com.br Copyright 2013 ©, Todos os direitos Reservados.

Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368

1

http://www.desktopeweb.blogspot.com.br/





2

Sejam Bem-vindos ao curso PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO. Meu nome é Frederico Ramos, sou webdesign e programador Freelancer. Neste curso, tentarei ensinar, de maneira totalmente prática, como você pode construir sua própria aplicação PHP começando a partir do nada. Para atingirmos esse objetivo, seguiremos o seguinte roteiro: 1. Criando o Layout no Fireworks: 1.1. Desenhando o cabecalho e rodapé........................................................................................ página 4 1.2. Desenhando o corpo da aplicação........................................................................................... 17 1.2.1. Criando o menu................................................................................................................ ... 19 1.3. Fatiando e exportando as imagens.......................................................................................... 22 2. Criando o banco de dados: 2.1. Baixando e instalando o Xampp.............................................................................................. 29 2.2. Criando o banco de dados e as tabelas.................................................................................... 33 3. Definindo a Estrutura da Aplicação: 3.1. Criando a aplicação no Dreamweaver...................................................................................... 40 3.2. Importando as imagens.......................................................................................................... 48 3.2.1. Criando a folha de estilos CSS............................................................................................... 53 3.2.2. Inserindo o menu................................................................................................................ 55 3.2.3. Criando a “div” conteudo..................................................................................................... 58 3.2.4. Criando o rodapé................................................................................................................. 59 3.2.5. Criando os itens de menu.................................................................................................... 62 3.2.6. Criando a página principal da aplicação................................................................................. 64 3.2.7 Editando o rodapé................................................................................................................ 68 3.2.8. Criação de páginas dinâmicas............................................................................................... 70 3.2.9. Criando a página index.php.................................................................................................. 75 3.2.10. Criando a página quem somos............................................................................................ 82 3.2.11. Criando a página contato.................................................................................................... 85 3.2.12. Criando a página administração........................................................................................... 89 3.2.13. Inserindo os links de menu................................................................................................. 90 4. Criando o CRUD: 4.0. Criando a página de autenticação do usuário................................................................................ 92 4.1. Página area administrativa..................................................................................................... 97 4.2. Páginação de resultados........................................................................................................ 103 4.3. Campo de Pesquisa................................................................................................. .............. 109 4.4. CRUD: Inserir......................................................................................................................... 115 4.5. CRUD: Editar................................................................................................................. ......... 121 4.6. CRUD: Excluir......................................................................................................................... 124 5. Exportando Aplicação para a Web: 5.1. Back up do banco de dados...................................................................................................... 126 5.2. Criação do domínio e banco de dados....................................................................................... 128 5.3. Baixando o Filezilla portátil........................................................................................................ 135 5.4. Publicando nossa aplicação....................................................................................................... 136 5.5. Corrigindo o arquivo config....................................................................................................... 142 5.6. Criando a tabela usuarios no banco de dados no servidor.......................................................... 145 5.7. Considerações Finais................................................................................................................ 148






3

PREFÁCIO

Muitas são as dúvidas de quem se propõe a iniciar no mundo da programação web. Uma das grandes dificuldades é entender, com exemplos ilustrativos, o que as linhas de código farão na aplicação web. Por este motivo, este livro destina-se a todas as pessoas que desejam publicar uma aplicação própria na internet. Com exemplos interativos, de fácil compreensão e totalmente práticos, PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! Vem mostrar até você, de maneira descomplicada, como construir seu próprio aplicativo php. São mais de 300 imagens para você se guiar e saber exatamente o que está fazendo. Caso apareçam dúvidas, é possível contactar o autor pelo seu blog, que terá o maior prazer em responder todas as dúvidas dos leitores. Bons estudos!






4

1.1. Desenhando o cabecalho e rodapé

Vamos criar o cabecalho da nossa aplicação. Abra o Fireworks, vá em menu, arquivo, e crie um retangulo com dimensoes 1070px por 333px e fundo transparente:

Com a pen tool, crie uma forma que você desejar para o cabecalho:






5

Preencha a forma com a cor que voce quiser, clicando onde indica a seta azul:

Opcionalmente, você pode adicionar um gradiente:






6

Note que apareceu duas abas, para você escolher as cores em que o gradiente variará:






7

Clique no quadradinho preto da linha do gradiente e arraste-o até o meio da figura:

Aqui eu deixei a cor #DFDFD0

Aqui eu deixei a cor #686859






8

Selecione a figura, clicando nela, copie (control + c) e cole(control + v). Apertando a seta direcional para a direita, ou clicando e segurando, arraste-a para a outra extremidade:

Com APENAS a segunda figura selecionada, vá no menu modificar, transformar, e clique em virar horizontalmente:






9

O resultado deve ser este:

Com a ferramenta retangulo selecionada, desenhe um retangulo com as dimensoes 980px por 75px:

Você pode alterar as dimensões do retângulo digitando os valores do comprimento em “L”, e a altura em “A”.






10

Selecione a ferramenta ponteiro e digite contrl + shift + seta para baixo. O retangulo ficará abaixo das duas figuras desenhadas:

Agora vamos inserir sua logomarca. Selecione a ferramenta retangulo com cantos arredondados, e desenhe um retangulo com as dimensoes 400px por 180px:

Selecione a ferramenta texto , e digite o que você quiser:






11

Na figura acima, usei a fonte “Stencil Std”, com tamanho 140, e em negrito “bold”. Para o texto “Desenvolviemento Desktop e Web”, utilize a ferramenta texto novamente, mas com tamanho 18:

Selecione a ferramenta “retangulo com cantos arredondados”, e desenhe um retangulo, conforme figura abaixo:






12

Clique em gradiente, deixe as cores do branco para o branco, e selecione opacidade em 30:

Vamos inserir mais duas imagens para finalizar nosso cabecalho. Vá em menu arquivo, importar, e selecione a imagem:

v v

v

Selecione cor branca

Selecione cor branca






13

Caso a imagem que você importou fique muito grande, aperte a tecla shift; com ela pressionada, clique em um dos cantos da imagem e arraste-a para redimensionar. Note que o ponteiro do mouse fica branco:

OBSERVAÇÃO: A imagem a ser importada deve ter o formato “png”. Se for de outro formato, aparecerá um espaço branco em volta da imagem, que prejudicará nosso desenho. Veja um exemplo com uma imagem de formato jpeg:

Formato que não seja “png” deixa espaço branco no desenho. Não use formato que não seja png!!! Caso você deseje, voce pode adicionar texto ou imagens na barra superior do cabecalho. Se for adicionar texto, use a ferramenta “Texto”, conforme explicado anteriormente. Se for usar imagem, vá em menu, arquivo, importar imagem, conforme explicado anteriormente:






14

Agora que o cabecalho de nossa aplicação está pronto, vamos fazer o último ajuste antes de fatiá-lo. Selecione a primeira imagem que você desenhou. Aperte e deixe apertado “shift”, e selecione a segunda imagem(a que foi invertida horizontamente) e selecione o retangulo entre elas. Com todas as 3 selecionadas, clique com o botão direito em uma delas, e selecione “agrupar”:

Ao selecionar as 3 imagens, todas as 3 devem ficar com as bordas aparecendo.






15

Com todas as 3 imagens selecionadas, aperte seta para cima e vá ajustando-a ao topo da tela até não sobrar nenhum pixel:

Agora, faremos um corte para finalizar o cabeçalho. Note que está sobrando um espaço no canto direito e inferior da

imagem. Para corrigir, selecione a ferramenta cortar e apare a figura, deixando-a assim:






16

Para salvar o arquivo, vá em menu, arquivo, salvar como:

Nomeie como “cabecalho” e escolha o formato png. Finalizamos o cabeçalho. Fazendo o rodapé Desabilite as imagens que não fazem parte do cabecalho, clicando no olho, conforme figura abaixo:






17

Com as 3 figuras selecionadas(elas devem estar agrupadas. Se não estiverem, selecione-as com a tecla shift

apertada, depois clique com o botao direito, e clique em agrupar), vá em menu, transformar, virar verticalmente:

O resultado deverá ser este:

Clicando no olho, a figura deixa de ficar visível. Se clicar aqui de novo, ela aparecerá.






18

Vá em menu arquivo, salvar como , e save como rodape.png. Finalizamos nosso cabecalho. 1.2. Desenhando o corpo da aplicação Antes de iniciarmos, devemos decidir qual será a dimensão de nossa aplicação. Digamos que você escolha que ela será de 1070px de largura (tem que ser a mesma largura do cabecalho)por 800 de altura. Então, vá no fireworks, menu arquivo, novo: NOTE QUE O FUNDO AGORA É BRANCO:






19

Importe o cabecalho que criamos. Vá em menu arquivo, importar, e selecione o cabecalho:

Control + “+” aumenta o zoom Control + “-” diminui o zoom






20

Repita o mesmo procedimento e insira o rodapé. O resultado deve ser este:






21

Criando o menu

Com a ferramenta retangulo , crie um retangulo conforme a figura abaixo, com a cor branca:

Com a ferramenta arredondado , crie um retangulo arredondado menor, dentro do retangulo do menu:






22

Clique em gradiente, selecione as cores branco para o branco, e opacidade valor 30: Resultado de nosso menu:

Selecione a cor branca.

Selecione a cor branca.

Deixe o valor 30






23

Criando o corpo da aplicação Selecione a ferramenta quadrado, e insira um quadrado de 30px por 520px:

Selecione a ferramenta gradiente, selecione a cor #DFDFD0 para o branco: Terminamos a parte de confecção gráfica de nosso layout. Agora fatiaremos nosso layout para exportá-lo para o dreamweaver.

Selecione a cor #DFDFD0 Selecione a cor branca






24

1.3. Fatiando e exportando as imagens Vamos inserir duas réguas para auxiliar-nos. Vá em menu exibir, réguas:

Posicione o cursor do mouse na regua superior, clique e arraste até a divisa do cabecalho com o menu:






25

Vamos fatiar o cabeçalho. Selecione a ferramenta fatia: Clique no canto superior esquerdo e arraste até o comprimento de 360px. Note que quebramos a imagem bem no meio. Este procedimento visa dificultar a cópia ilegal de seu conteúdo e faz com que sua aplicação rode mais rápido nos browsers. Selecione JPEG – qualidade melhor, depois clique em exportar...(veja as setas azuis):

Posicione o cursor aqui. Clique e arraste...

... até aqui. Note a linha azul que apareceu. Ela é a régua.






26

Vá em menu arquivo, visualizar imagem. A seguinte tela aparecerá:






27

Na janela que aparecerá, escolha “somente imagens”, e nomeie como cabecalho1, ou parte1, como voce preferir:

Repita o procedimento com todo o restante do cabeçalho. Divida-o em 4 ou 5 partes. Após criar outra fatia, selecione a anterior e delete-a.

Cabecalho da aplicação fatiado em 4 partes.

APENAS IMAGENS!!!






28

Fatiando o menu Com a ferramenta fatia, fatie o menu como uma parte única:

Fatiando o corpo da aplicação Com a ferramenta fatia, fatie o corpo da aplicação e exporte –a como “corpo_aplicacao.png”.






29

Fatiando o rodapé Fatie o rodapé como parte única e exporte como imagem no formato png:

Terminamos de fatiar nossa aplicação. Agora, vamos criar nossa aplicação no dreamweaver.






30

2.1. Baixando e instalando o Xampp Para que nossa aplicação possa funcionar, precisaremos de 3 coisas: - Um servidor de testes para nossa aplicação, o famoso localhost. - Um banco de dados. Usaremos o Mysql. - Um “Front end” do banco de dados para gerenciar nossas tabelas. Usaremos o PHPMyadmin. O Xampp é uma espécie de “pacotão”, onde você instala tudo isso de uma vez. Para baixá-lo, vá no google e digite “download xampp”:

Clicando no link da seta acima, aparecerá a página abaixo:

Clique no botão “clique para baixar”, apontado pela seta azul.






31

Aparecerá uma tela perguntando se deseja salvar o arquivo(no meu caso, estou usando o navegador firefox); clique em save File(salvar arquivo):

Após baixar o xampp, localize-o e clique duas vezes para instalá-lo:

Aparecerá uma tela perguntando se você deseja executar o xampp. Clique em “Executar”:






32

Selecione o local a ser instalado; no meu caso, escolhi “C:\”. NÃO pode haver espaços. Depois, clique em “install”.

A instalação iniciar-se-á:






33

O xampp te perguntará se você deseja adicionar um atalho no desktop. É mais prático que você adicione. Logo, digite “y” e aperte enter.

Após a instalação terminar, o xampp criará um ícone na área de trabalho:

Pronto! Agora vamos conhecer as ferramentas que usaremos para nosso banco de dados.






34

2.2. Criando o banco de dados e as tabelas Para criarmos o banco de dados, precisamos iniciar o mysql através do xampp. Vá na área de trabalho e dê um duplo click no ícone do xampp. Ele abrirá o painel de controle. Clique no botão “start” do Apache e do Mysql. Após você clicar, eles mudarão o nome de “start” para “stop”.






35

Vá no seu navegador de internet(firefox, chrome, ou internet explorer) e na barra de endereços, digite “localhost”: Você deverá visualizar esta tela:

Para criarmos o banco de dados, vá na barra lateral esquerda, na seção “tools”, e clique em “phpmyadmin”:






36

Abrir-se-á a tela do PHPMyadmin. Aqui nós criaremos e gerenciaremos nosso banco de dados. Na coluna lateral esquerda você visualiza os bancos de dados que você criou. No meu caso, tenho alguns de sites de meu portfólio, bem como alguns que uso apenas para testes.






37

2.2. Criando o banco de dados e as tabelas Para criar um banco de dados, clique em “banco de dados”, conforme apontado pela seta azul:

Escolha um nome para seu banco de dados, e clique em criar:

Agora, seu banco aparecerá na barra lateral:






38

Agora, temos que definir como será nossa aplicação. Para fins didáticos, construiremos um sistema que cadastrará usuários, permitirá edição e exclusão deles. Construiremos, então, a tabela “usuarios”. Clique no banco de dados que você criou, na barra lateral esquerda do phpmyadmin:

Na tela que apareceu, em nome de tabela, digite “usuarios” e em numero de colunas, digite “7”; clique em “executar”, no canto direito:

Ampliando a figura:






39

Na tela que aparecerá, digite os valores de nossas colunas conforme a figura:

Descrição dos campos: Em Id,selecione tipo INT, em índice, marque PRIMARY, e selecione a caixa em A_I. PRIMARY significa que este campo receberá uma numeração única; ele será uma chave primária. A_I significa que o campo id é do tipo auto- increment, ou seja, a cada registro novo que for inserido no banco de dados, o número de id aumentará automaticamente. Clique em salvar para criar a tabela usuarios. Sua tabela deverá aparecer na barra lateral esquerda:






40

Para finalizar o xampp, selecione o ícone do xampp na barra de tarefas; clique com o botão direito do mouse; clique em “quit”:

Nosso banco de dados está criado. Estamos prontos para iniciarmos nossa aplicação PHP feita totalmente no braço!






41

3.1. Criando a aplicação no Dreamweaver Antes de abrir o dreamweaver, precisamos criar a pasta de nosso projeto no xampp. Acesse a pasta “htdocs” dentro do xampp pelo windows explorer. Crie a pasta de nosso projeto. Eu chamei a minha pasta de “aplicacaophpmysql”:

Dentro da pasta da aplicação(aplicacaophpmysql), crie a pasta chamada “imagens”:

C:\xampp\htdocs






42

Abra o dreamweaver, e crie um novo site no menu site, new site e siga as configurações : - nome do site(site name), local padrão do folder ( local root folder), folder padrão das imagens(Default images folder), http endereço(http adress); não clique em OK, ao terminar. Abra seu dreamweaver, clique em menu arquivo, novo, selecione php e clique em criar:






43

Clique em “Remote Info”, na barra lateral esquerda, e configure: - Acess: Local/Network - Remote folder: C:\xampp\htdocs\aplicacaophpmysql NAO CLIQUE EM OK






44

Clique em “Testing server”, na barra lateral esquerda, e configure: - Server model: PHP MYSQL - Acess: Local/Network - Testing server folder: C:\xampp\htdocs\aplicacaophpmysql - URL prefix: http://localhost/aplicacaophpmysql/ FINALMENTE, CLIQUE EM OK!



http://localhost/aplicacaophpmysql/




45

Na aba “files” do dreamweaver, se estiver desplugado, clique no botão “conectar ao servidor remoto”:

Quando estiver conectado, aparecerá este símbolo(de uma tomada ligada):

Agora você visualiza os arquivos da aplicação. Note o comentário “file activity complete”, indicando que agora você está conectado aos seus arquivos da aplicação.






46

Vamos criar nosso primeiro arquivo PHP. No dreamweaver, vá no menu arquivo, novo, selecione “php”, e clique em “criar”(create):

Já vamos logo conectar a aplicação com nosso banco de dados. No dreamweaver, na aba “databases”(banco de dados), clique no sinal de “+”, e em “Mysql Connection”:






47

Aparecerá a tela abaixo. Configure-a assim: - connection name: config - Mysql server: localhost - User name; root Password: DEIXE VAZIO( O MEU TEM SENHA PORQUE TENHO VÁRIOS PROJETOS DE CLIENTES EM DESENVOLVIMENTO). REPETINDO: DEIXE O CAMPO PASSWORD VAZIO!!! - database: meubanco( o banco de dados que criamos no phpmyadmin). Clique agora em “Test”, para testarmos a conexao. Deverá aparecer a mensagem de conexão bem sucedida abaixo(“Conexaõ efetuada com sucesso”):






48

Se não apareceu esta mensagem, provavelmente o erro é no campo user ou password. Somente isso pode dar errado aqui... Nossa aplicação já está conectada ao banco de dados. Vamos iniciar nossa aplicação. Ela terá a seguinte estrutura:

Cabeçalho

Conteúdo

rodapé

O cabeçalho e o rodapé serão os mesmos para toda nossa aplicação. Para criarmos o cabeçalho da aplicação, abra o dreamweaver; vá em menu novo(ou new, se seu dreamweaver estiver em inglês)...

...selecione php e clique em criar:

Vamos inserir no cabeçalho as imagens que criamos no fireworks. Localize a pasta onde você as salvou, copie-as e cole-as dentro da pasta do projeto do xampp. Complicou? Vamos passo a passo, então:






49

3.2. Importando as imagens Passo 1) Copie as imagens que você fatiou e exportou pelo fireworks. No meu caso, salvei-as em D:\Fred\Programacao\ebook php mysql: (eu fatiei o cabeçalho em 4 imagens: cabecalho1, cabecalho2, cabecalho3 e cabecalho4)






50

Passo 2) Cole as imagens copiadas acima na pasta de imagens do seu projeto, DENTRO DO XAMPP, NA PASTA: “ xampp/htdocs/aplicacaophpmysql/imagens” MUITA ATENÇÃO AQUI! Se você não selecionar a pasta certa, não vai funcionar!!!

LEMBRE-SE: Toda vez que você for construir uma aplicação, a pasta do seu projeto SEMPRE deverá estar na pasta htdocs do xampp. - A pasta desse nosso projeto chama-se “aplicacaophpmysql”; então, a ordem das pastas dentro do xampp será: C:\xampp\htdocs\aplicacaophpmysql (supondo que você instalou o xampp em “C:”). - Se você tiver um projeto chamado “clienteFulano”, a ordem será esta: C:\xampp\htdocs\clienteFulano. Volte ao dreamweaver. Vamos chamar em nosso arquivo php as imagens que acabamos de copiar. Eis o código:






51

Clique em menu arquivo, salvar como, e salve na pasta de seu projeto(C:\xampp\htdocs\aplicacaophpmysql) com o nome “header.php”:

Vamos visualizar nossa aplicação? Vá no seu navegador de internet(firefox, chrome ou internet explorer), e digite: “localhost/aplicacaophpmysql/header.php” (sem as aspas). Aparecerá o cabeçalho de nossa aplicação:






52

Figura 116. Visualização do cabeçalho no navegador Firefox 16.0.1. Nossa aplicação está centralizada à esquerda. Corrigiremos este detalhe com a aplicação de css. Antes de aplicarmos o estilo em nossa aplicação, vamos encapsular o cabecalho dentro de uma div, para facilitar a estilização. Criaremos uma div chamada “header”, que conterá todo o cabeçalho. Esta div ficará dentro da div “box”, que englobará todo o conteúdo de nossa aplicação. Vamos para o visual que a compreensão ficará mais fácil. No dreamweaver, ainda no arquivo header.php, crie as divs header e box:






53

Ampliando:

Recorte o conteudo das imagens e cole dentro da div header:






54

3.2.1 Criando a folha de estilos CSS Vá no dreamweaver, clique em menu arquivo novo, escolha css e clique em criar(create):

O asterisco abaixo reseta todo o estilo. Em margin, o 0 (zero) significa margem zero em cima, e o “auto” significa que a margem horizontal é automática. Quando você definir o valor de 1070px para a div “box”...

...a aplicação ficará centralizada na tela:






55

Se você não conseguir visualizar a mudança, experimente clicar no botão “atualizar” do seu navegador de internet, ou apertando a tecla “F5”:

Vamos inserir uma borda na div box para podermos visualizar seus limites. Insira no arquivo estilo.css a linha em destaque abaixo:

Agora a div box ganhou uma borda:






56

3.2.2 Inserindo o menu No dreamweaver, no arquivo header.php, insira a div do menu(codigo destacado abaixo):

Figura 125. Toda vez que você fizer alguma alteração nos arquivos, salve-o apertando “control + s”. Se você esquecer de salvar, você não visualizará as mudanças no navegador. No arquivo “estilo.css”, adicione comprimento da div menu e uma cor de fundo(apenas para visulizarmos onde ela está):






57

Veja no navegador de internet(digitando “localhost/aplicacaophpmysql/header.php”) como ficou:

Figura 127. O “aaa” na div menu serve apenas para deixá-la visível. Coloque na pasta de imagens do seu projeto a imagem do menu que criamos no fireworks: No meu caso, copiei daqui:






58

E colei na pasta do projeto, dentro do xampp:

Vá no dreamweaver, na folha de estilos, e chame essa imagem que você acabou de copiar como background da div menu:

Figura 130. A altura da div menu (height) deve ser a mesma da imagem(que é de 62px). Veja o resultado no navegador, digitando(localhost/aplicacaophpmysql/header.php):






59

3.2.3. Criando a “div” conteudo Vamos criar a div que abrigará todo o conteúdo de nossa aplicação. Vá no dreamweaver, no arquivo header.php e crie a div conteúdo:

Veja no navegador o resultado:






60

3.2.4. Criando o rodapé No dreamweaver, no arquivo header.php, insira o código html do rodapé:

Veja o resultado no navegador, digitando(localhost/aplicacaophpmysql/header.php):

Copie a imagem do rodapé que criamos no dreamweaver e cole na pasta imagens de nosso projeto:






61

No dreamweaver, vá no arquivo estilo.css e estilize a div rodapé:

Veja o resultado no navegador, digitando(localhost/aplicacaophpmysql/header.php):






62

Antes de iniciarmos a criação das páginas de nossa aplicação, vamos melhorar o visual da aplicação e construir nos links do menu. No dreamweaver, vá no arquivo estilo.css e retire a borda da div box, retirando a linha de código selecionada abaixo:

Veja o resultado no navegador:






63

3.2.5. Criando os itens de menu Vá no dreamweaver, no arquivo header.php, e insira o código html dos intens de menu:

Vá no arquivo estilo.css, e estilize a ul e a li da div menu:






64


Eu criei apenas 4 itens. Mas você pode criar quantos você quiser, por exemplo: produtos, depoimentos, categorias, etc. você apenas terá que diminuir o tamanho da <li> no código css:






65

Criando a página principal da aplicação Antes de criar esta página, precisamos ter em mente o que devemos exibir para nossos visitantes. Para fins didáticos, escolhi exibir os seguintes itens: - 3 fotos sobre desenvolvimento; - Uma breve descrição de cada foto; - 3 notícias sobre a área de programação em php; - 3 ícons para as redes sociais: facebook, twitter e linkdin. Após escolher quais fotos mostrar, vamos inseri-las pelo dreamweaver. Foto1: No dreamweaver, no arquvivo header.php, insira o código destacado abaixo, dentro da div conteudo:

No dreameaver, vá no arquivo “estilo.css” e estilize todo o parágrafo(código selecionado em azul) e a ul da div conteudo:






66


Foto 2: Vá no dreamweaver, e insira a segunda foto e o respectivo texto:






67

Estilize o texto da segunda foto com o codigo css abaixo:







68

Foto 3: No dreamweaver, insira o código que mostrará a foto3, bem como o respectivo texto:







69

Editando o rodapé No dreamweaver, vá na div rodapé e acrescente o código que mostra copyright, telefone e endereço:

No arquivo estilo.css, estilize o rodapé:






70

Resultado no navegador:

Terminamos a página principal da aplicação. Note que, até agora, nosso conteúdo é totalmente estático. Passemos agora para a parte de dinamização do conteúdo.






71

3.2.8. Criação de páginas dinâmicas No dreamweaver, no arquivo header.php, selecione e RECORTE tudo desde o começo do código até logo depois da abertura da div conteudo:

- Abra um novo documento em menu arquivo novo, selecione php , clique em criar e cole o código nele:

- salve este documento na pasta de nosso projeto (aplicacaophpmysql) como”cabecalho.php”:






72

RECORTE toda a div rodape:






73

- Crie novo documento php( control + N); - cole o codigo copiado acima; - salve como footer.php: Vá no arquivo header.php, e coloque o código php que incluirá o cabeçalho:

- Vá no final da página header. php e coloque o código que incluirá nosso rodapé:






74

Agora o cabecalho e rodapé de nossa aplicação aparecerão da mesma forma em todas as páginas. DICA: você sabe que sua aplicação aparecerá com a mesma resolução em todas as telas se ao apertar, por repetidas vezes:

1)control + -(tecla contrl mais sinal de menos), e o layout permanecer intacto:






75

Ou,

1) contrl + + (control mais sinal de mais), e o layout também permanecer intacto: ATENÇÃO: EM HIPÓTESE ALGUMA, AO SE APERTAR (CONTROL + +) OU (CONTROL + -) O LAYOUT DEVE DESCONFIGURAR. SE ISSO ACONTECER, VOCÊ FEZ ALGO DE ERRADO EM SEU CÓDIGO CSS. EXEMPLO DO QUE NÃO PODE ACONTECER COM SEU LAYOUT:






76

3.2.9. Criando a página index.php No dreamweaver, crie novo documento em menu arquivo ,novo , escolha php e clique em criar. Coloque nele somente o código abaixo:






77

Salve este arquivo como index.php, na pasta de nosso projeto:






78

Vá na pasta raiz de nosso projeito( dentro do xampp) e crie uma pasta chamada “nav”:






79

No dreamweaver, vá no arquivo header.php e exclua a linha da funcao include que chama o cabecalho:

Exclua também a linha do include que chama o rodapé, ainda no arquivo header.php:






80

Nossa página header.php ficou sem cabecalho e sem rodapé. Se você salvá-la e tentar visualizá-la no navegador,

ela aparecerá toda desconfigurada, assim:

É exatamente isso que queremos! No dreamweaver, vá no menu arquivo, salvar como...:






81

... e salve a pagina como home.php na pasta nav de nosso projeto:

Feche a página header.php. Na pasta de nosso projeto, delete SEM MEDO NEM PRECONCEITO (rsrs) o arquivo header.php :






82

Vá no navegador e digite: localhost/aplicacaophpmysql e veja sua aplicação toda dinâmica!






83

3.2.10. Criando a página quem somos No dreamweaver, crie novo arquivo do tipo php. Insira o conteúdo que você quiser para formar esta página. No meu caso aqui, inserirei uma imagem e uma pequena descrição da nossa aplicação. Após encontrar a imagem que você irá exibir na página, copie-a para a pasta imagens de nosso projeto. Eu colei a imagem “logo”:

No dreamweaver, crie a pagina “quemsomos.php”:






84

No arquivo estilo.css, estilize a página quemsomos:






85

Veja o resultado, digitando no navegador “ localhost/aplicacaophpmysql/index.php?topicos=nav/quemsomos ” NOTE QUE O CÓDIGO PARA VISUALIZARMOS AS PÁGINAS MUDOU, POIS AGORA ELAS ESTÃO DINÂMICAS!






86

3.2.11. Criando a página contato No dreamweaver, crie novo arquivo php e insira o seguinte código:

Salve na pasta nav de nosso projeto, como “contato.php”.






87

No arquivo estilo.css, estilize a página contato:






88

Veja o resultado no navegador, digitando: localhost/index.php?topicos=nav/contato

Note que no campo “action” do formulário, o direcionamento é para a página “enviar_email.php”. Entretanto, nós não criamos esta página ainda. Vamos criá-la agora.






89

No dreamweaver, crie novo arquivo php e insira o código abaixo:

Salve-a como enviar_email.php, na pasta nav de nosso projeto. Até aqui, sua pasta nav deve estar com os seguintes arquivos: - contato, enviar_email, home e quemsomos.






90

3.2.12. Criando a página administração No dreamweaver, crie novo arquivo php(menu arquivo, novo, selecione php e clique em criar) e insira o código abaixo:

Salve na pasta nav de nosso projeto como “adm.php”. Finalizamos a primeira parte de nossa aplicação. Agora só falta fazermos as partes que incluirão e editarão nosso banco de dados. Viram como foi fácil?






91

3.2.13. Inserindo os links de menu No dreamweaver, abra o arquivo cabecalho.php, e insira os links nos itens de menu:

Vá no arquivo estilo.css e insira a propriedade que não deixará o link ficar sublinhado:






92

Vamos inserir um efeito para quando o usuário passar o mouse sobre o item de menu. Vá no arquivo estilo.css e insira o código destacado em azul:

Veja o resultado no navegador, quando o usuário passar o mouse em cima do item de menu:

No rodapé, você visualizará o link do item de menu em questão:






93

4.0. Criando a página de autenticação do usuário Crie nova página php e insira o codigo abaixo:

Salve como “logando.php”, na pasta nav de nosso projeto. Abra a página “cabecalho.php” e insira o código php destacado abaixo:






94

Agora vamos criar a tabela de usuarios em nosso banco de dados. Vá em seu navegador de internet e digite “localhost/phpmyadmin” para entrar no phpmyadmin:

Vá na coluna lateral da esquerda do phpmyadmin, e clique em “meubanco”:






95

Clique em “create table”:

Crie os seguintes campos: - id, do tipo INT. Em índíce, selecione PRYMARY. Em A_I, marque a caixa de seleção; - login, do tipo TEXT; - senha, do tipo TEXT; - email, do tipo TEXT. Dê um nome para a tabela. Clique em “salvar”.






96

Vamos inserir um usuario para testarmos nossa aplicação php. Ainda no phpmyadmin, Selecione a tabela usuarios e clique em “inserir”:

Insira os dados abaixo e clique em “executar”:






97

Vamos ver se está tudo certo. Volte no navegador, e vá na página administração; tente logar com: Login: admin Senha: 123






98

Se você visualizar o erro abaixo...

...significa que está tudo CERTO!!! Este erro aconteceu porque no campo “action” de nosso formulário da pagina “adm.php”, nós chamamos a página “area_admtiva.php”. Acontece que ela ainda não foi criada. Por isso deu erro. Vamos criá-la então!






99

4.1. Página area administrativa Vamos criar a página CRUD de usuários. Vá no dreamweaver, e crie novo arquivo php e insira o código abaixo:






100






101






102

Quanto código, hein? Salve o arquivo na pasta nav, como “area_admtiva.php”. Vá no seu navegador e tente logar-se na página administração. Após o login, você deverá visualizar:






103

Continuação da página “area_admtiva.php”.

Se você visualizou o erro acima, está tudo CERTO! Este erro aconteceu porque estamos chamando um script que ainda não existe. Veja:

O PHP está te dizendo: “Aviso: include(scripts/paginacao_noticias_lista.php): falha ao abrir: sem arquivo ou diretorio em C:\xampp\htdocs\aplicacaophpmysql\nav\area_admtiva.php na linha 166” Quer dizer: “Olha, eu não consegui abrir o arquivo paginacao_noticias_lista.php na pasta scripts. Parece que este arquivo não está lá.” Note também que a foto do usuário não apareceu. Isto aconteceu porque ainda não cadastramos nenhum usuário com foto em nosso banco de dados. Não se preocupe. Faremos isso futuramente.






104

4.2. Páginação de resultados Acesse a pasta de seu projeto e crie uma pasta chamada “scripts”:

No dreamweaver, crie novo arquivo php e insira o codigo abaixo:






105

Salve na pasta “scripts” como “paginacao_usuarios.php”:

Volte na página “area_admtiva.php”, e atualize o código de paginação:






106


Essa cor ficou horrível! Era para aparecer um número um entre as palavras anterior e próximo. Vamos mudar essa cor no css. Vá na página “paginacao_usuarios.php”, na pasta scripts e localize o código css de cor destacado em azul abaixo:

Substitua este código pela cor #333






107

Substitua aqui também:

E, finalmente, aqui também:


Nossa paginação está pronta. Vamos estilizar o elemento “h1” de nossa página “area_admtiva.php”. No dreamweaver, vá no arquivo “estilo.css” e estilize o h1 inserindo o código css abaixo:






108







109

Estilize também o elemento “h2” que tem o texto “Sair”:


Apague o elemento “h3” no código da página area_admtiva.php:






110

4.3. Campo de Pesquisa No dreamweaver, salve a pagina “area_admtiva.php”como “lista_usuarios.php”:

Agora salve essa pagina “lista_usuarios.php” como “busca_usuarios.php”.






111

Abra a página busca_usuarios.php e insira o código destacado abaixo, logo após o código da paginação:

Salve a página e teste no navegador. O sistema de busca já está funcionando. Vamos formatar os labels de todos os campos da nossa página “lista_usuarios.php”. Aplique um elemento “<p>” em todos os labels:

Vá no arquivo “estilo.css” e estilize-o:






112


Para finalizar a estilização, vamos aplicar uma borda para separarmos as funções inserir, buscar e exibir os dados. Note que, na pagina “lista_usuarios.php”, no código da tabela “inserir usuario” há uma classe para a tabela. Veja:

Vamos estilizar essa classe no código css. Vá no arquivo estilo.css e estilize a classe acima:






113


Estilizando o campo de busca Fiz uma pequena alteração no html do campo de busca. Vejam como ficou o código na pagina lista_usuarios.php:

Notem que apliquei a classe “lista_anuncios” na tabela. Vejam como ficou:






114

No arquivo lista_usuarios.php, aplique novamente a classe “lista_anuncios” nas tabelas abaixo, apontadas pelas setas:






115







116

4.4. Inserir usuários

No dreamweaver, crie uma nova pagina em branco do tipo php e insira o código abaixo:

Salve na pasta nav como “cadastra_usuarios_codigo.php” Repare que a primeira linha do código faz uma chamada para o arquivo “upload_redimensiona1foto.php”. Mas nós ainda não temos esse arquivo. Se tentarmos rodar nossa aplicação, acontecerá o erro de arquivo não encontrado. Vamos criar este arquivo.






117

No dreamweaver, crie nova pagina em branco, do tipo php, e insira o código abaixo:






118

Salve na pasta “scripts” como “upload_redimensiona1foto.php”:

Repare que na linha 48 do arquivo “upload_redimensiona1foto.php” estamos dizendo para o PHP que é para ele salvar a imagem do usuário na pasta “imagens/usuarios/”:

Mas, na pasta de nosso projeto, ainda não existe a pasta usuarios. Crie-a:






119






120

Vamos testar se nossa aplicação está cadastrando usuários. No navegador, digite nossa página de listar usuários: http://localhost/aplicacaophpmysql/index.php?topicos=nav/lista_usuarios Preencha os campos para fazer um cadastro e clique em “cadastrar”:


Verifique se cadastrou mesmo no banco de dados. Vá no phpmyadmin e clique na tabela usuários:






121

Agora a foto também aparece na lista de usuários, na página “lista_usuarios.php”:

Note que o PHP salvou a imagem que cadastramos na pasta “imagens/usuarios” de nosso projeto:






122

4.5. CRUD: Editar No dreamweaver, crie novo arquivo e insira o código abaixo:

Salve na pasta “nav” como altera_usuarios.php. Crie nova página em branco e insira o codigo abaixo:

Salve na pasta “nav” como “altera_usuarios_codigo.php”. Vamos ver o resultado de nosso sistema:






123

Acesse a pagina http://localhost/aplicacaophpmysql/index.php?topicos=nav/lista_usuarios






124

Selecione um usuario e clique em “editar”:

Edite os dados e mude a foto se desejar. Ou cancele e volte para a pagina que lista os usuários. Vamos agora fazer a parte de exclusão.






125

4.6. CRUD: Excluir No dreamweaver, vá na página “lista_usuarios.php” e atualize o código do botão de exclusão:

Crie nova pagina em branco do tipo php e insira o codigo abaixo:

Salve na pasta “nav” como “exclui_usuarios.php” . Crie uma nova pagina em branco do tipo php e insira o código abaixo:






126

Salve na pasta “nav” como “exclui_usuarios_codigo.php”. Veja o resultado no navegador: Clique no botão “excluir” na página “lista_usuarios.php”. Deverá aparecer a tela abaixo:

Assim, concluímos a parte de CRUD de nossa aplicação.






127

5.1. Back up do banco de dados Acesse o phpmyadmin no seu navegador e clique em “Exportar”:

Selecione o formato “sql” e clique em “executar”:






128

Aparecerá uma tela perguntando se você deseja abrir ou salvar o arquivo. Escolha “salvar” e clique em ok:

Escolha a pasta que você deseja salvar o arquivo de banco de dados e clique em “salvar”:






129

5.2. Criação do domínio e banco de dados Existem várias opções de hospedagem. Eu uso o 000webhost para exibir meu portfólio. Acessem: http://www.000webhost.com/ Crie uma conta e logue-se. Ao se logar, você será direcionado para esta tela. Para criar um domínio, clique em “create new”:



http://www.000webhost.com/




130

Escolha a opção domínio free; insira um nome para seu dominio; insira uma senha; clique em setup new

account:






131

Sua conta foi criada. Guarde beus seus dados de login:cliqueddd

Clique em “List Accounts”. Aparecerá a lista de seus domínios. Escolha um e clique em “Go to CPanel”:

Guarde bem as informações abaixo. Precisaremos delas para publicar nossa aplicação:






132

Agora vamos criar nosso banco de dados.






133

Logo abaixo, na parte de “Software / Services”, clique em Mysql:






134

Preencha os dados e clique em “create database”:

Nome do banco de dados

Nome do usuario do banco

Senha para o banco de dados

Repita a senha






135

Seu banco de dados foi criado. Guarde muito bem esses dados pois usaremos eles para publicar nossa aplicação.

Agora vamos baixar o filezilla para publicarmos nossa aplicação.






136

5.3. Baixando o Filezilla portátil Vá no google e digite “download filezilla portable”:

Clique no primeiro link e clique em baixar:






137

5.4. Publicando nossa aplicação Descompacte e abra o filezilla.

Bem vindo(a) ao Filezilla. Este programa torna possível a publicação de aplicações web. Do lado esquerdo, visualizamos os arquivos em nosso computador. Do lado direito, visualizamos os arquivos no servidor. Vamos conectar o filezilla ao nosso servidor?






138

Lembram-se de que eu falei para guardarem as informações de registro no servidor? Usaremos elas agora:






139

Insiram no filezilla: (server32.000webhost.com no campo host), (a5806781 no campo nome de usuario), (e a senha que voce criou no campo senha) e cliquem em “conexao rapida”. NÃO PRECISA INSERIR NADA NO CAMPO PORTA:

Parabéns!!! Você está conectado ao seu servidor. Do lado esquerdo, selecione a pasta de nosso projeto. Do lado direito, selecione a pasta “public_html ” (próxima página, pois a imagem ficou grande para caber aqui):






140

Para publicar sua aplicação, simplesmente clique, segure e arraste TODAS AS PASTAS E ARQUIVOS da pasta de nosso projeto para a pasta “public_html”. Tenha paciência. Talvez demore um pouco. Isso é normal...






141

Quando o filezilla terminar de publicar os arquivos, sua tela deverá estar parecida com esta:

Parabéns! Você publicou sua aplicação em PHP e MYSQL! Vamos visualizá-la no navegador? Acesse sua aplicação. No meu caso, é www.meudominio.host56.com



http://www.meudominio.host56.com/




142

Ooooooooops! Algo deu errado. Se você visualizar os mesmos erros que eu ao acessar sua aplicação, não se preocupe. Isso é normal. Nós publicamos no servidor as configurações de conexão locais do banco de dados. Por isso aconteceu este erro:






143

5.5. Corrigindo o arquivo config No dreamweaver, abra o arquivo config, que está dentro da pasta connections e substitua os dados locais pelos informados pelo servidor. Em meu caso, ficou assim:

No filezilla, selecione, clique, SEGURE O CLICK e arraste o arquivo “config.php” para dentro da pasta connections no servidor remoto:






144

O filezilla vai perguntar se você quer substituir o arquivo config.php. Diga que sim:

Atualize seu navegador e veja sua aplicação publicada na web!!!

Acesse o item de menu admnistração e tente logar-se.






145

Você receberá esta belíssima mensagem de erro:

“Tabela usuarios não existe.” Não existe mesmo. Nós publicamos a aplicação, mas faltou publicar as tabelas do banco de dados.






146

5.6. Criando a tabela usuarios no banco de dados no servidor Acesse o phpmysadmin do servidor remoto:






147

Clique em “ Enter phpMyAdmin”:

Lembra-se de quando exportamos nosso banco de dados no phpmyadmin local? Verifique onde voce salvou aquele arquivo em formato “sql”. Importaremos ele agora. Clique em “import”. Selecione o arquivo para ser enviado e clique em “Go”:






148

Você deve visualizar algo parecido com esta tela:

Atualize o navegador e veja sua aplicação rodando:






149

5.7. Considerações Finais

Deste modo, concluímos nossa aplicação. Espero que vocês tenham gostado do conteúdo, e que façam bom proveito deste livro. Claro que existem várias maneiras de se construir aplicações PHP. Entretanto, meu objetivo aqui foi mostrar, de maneira extremamente prática, como iniciar uma aplicação PHP E MYSQL a partir do zero. Comentários, críticas e sugestões serão muito bem-vindos. Grande abraço a todos!






150



php e mysql aplicacao completa a partir do zero

Education