Mais conteúdo relacionado Semelhante a Php e mysql aplicacao completa a partir do zero (20) Php e mysql aplicacao completa a partir do zero1. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 1
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
2. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
3. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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!
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
4. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
5. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 5
Preencha a forma com a cor que voce quiser, clicando onde indica a seta azul:
Opcionalmente, você pode adicionar um gradiente:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
6. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 6
Note que apareceu duas abas, para você escolher as cores em que o gradiente variará:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
7. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 7
Aqui eu deixei a Aqui eu deixei a cor
cor #686859 #DFDFD0
Clique no quadradinho preto da linha do gradiente e arraste-o até o meio da figura:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
8. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
9. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
10. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
11. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
12. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 12
Clique em gradiente, deixe as cores do branco para o branco, e selecione opacidade em 30:
v
Selecione cor Selecione cor
branca v v branca
Vamos inserir mais duas imagens para finalizar nosso cabecalho. Vá em menu arquivo, importar, e selecione a imagem:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
13. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
14. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
15. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
16. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
17. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 17
Clicando no olho, a
figura deixa de ficar
visível. Se clicar aqui de
novo, ela aparecerá.
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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
18. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
19. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 19
Importe o cabecalho que criamos. Vá em menu arquivo, importar, e selecione o cabecalho:
Control + “+” aumenta o zoom
Control + “-” diminui o zoom
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
20. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 20
Repita o mesmo procedimento e insira o rodapé. O resultado deve ser este:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
21. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
22. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 22
Clique em gradiente, selecione as cores branco para o branco, e opacidade valor 30:
Deixe o valor 30
Selecione a cor branca.
Selecione a cor branca.
Resultado de nosso menu:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
23. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
Selecione a cor branca
Selecione a cor #DFDFD0
Terminamos a parte de confecção gráfica de nosso layout. Agora fatiaremos nosso layout para exportá-lo para o
dreamweaver.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
24. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
25. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 25
Posicione o cursor aqui. Clique e arraste...
... até aqui. Note a linha azul
que apareceu. Ela é a régua.
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):
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
26. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 26
Vá em menu arquivo, visualizar imagem. A seguinte tela aparecerá:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
27. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 27
Na janela que aparecerá, escolha “somente imagens”, e nomeie como cabecalho1, ou parte1, como voce preferir:
APENAS
IMAGENS!!!
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.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
28. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
29. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
30. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
31. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
32. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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-á:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
33. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
34. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
35. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
36. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
37. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
38. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
39. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
40. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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!
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
41. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”:
C:xampphtdocs
Dentro da pasta da aplicação(aplicacaophpmysql), crie a pasta chamada “imagens”:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
42. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
43. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 43
Clique em “Remote Info”, na barra lateral esquerda, e configure:
- Acess: Local/Network
- Remote folder: C:xampphtdocsaplicacaophpmysql
NAO CLIQUE EM OK
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
44. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 44
Clique em “Testing server”, na barra lateral esquerda, e configure:
- Server model: PHP MYSQL
- Acess: Local/Network
- Testing server folder: C:xampphtdocsaplicacaophpmysql
- URL prefix: http://localhost/aplicacaophpmysql/
FINALMENTE, CLIQUE EM OK!
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
45. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
46. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
47. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”):
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
48. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
49. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:FredProgramacaoebook php mysql:
(eu fatiei o cabeçalho em 4 imagens: cabecalho1, cabecalho2, cabecalho3 e cabecalho4)
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
50. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:xampphtdocsaplicacaophpmysql (supondo que você instalou o xampp em “C:”).
- Se você tiver um projeto chamado “clienteFulano”, a ordem será esta:
C:xampphtdocsclienteFulano.
Volte ao dreamweaver. Vamos chamar em nosso arquivo php as imagens que acabamos de copiar. Eis o código:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
51. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 51
Clique em menu arquivo, salvar como, e salve na pasta de seu projeto(C:xampphtdocsaplicacaophpmysql) 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
52. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
53. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 53
Ampliando:
Recorte o conteudo das imagens e cole dentro da div header:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
54. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
55. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
56. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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á):
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
57. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
58. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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):
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
59. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
60. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
61. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 61
No dreamweaver, vá no arquivo estilo.css e estilize a div rodapé:
Veja o resultado no navegador, digitando(localhost/aplicacaophpmysql/header.php):
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
62. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
63. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
64. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 64
Veja o resultado no navegador:
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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
65. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
66. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 66
Veja o resultado no navegador:
Foto 2:
Vá no dreamweaver, e insira a segunda foto e o respectivo texto:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
67. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 67
Estilize o texto da segunda foto com o codigo css abaixo:
Veja o resultado no navegador:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
68. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 68
Foto 3:
No dreamweaver, insira o código que mostrará a foto3, bem como o respectivo texto:
Veja o resultado no navegador:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
69. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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é:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
70. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
71. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
72. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 72
RECORTE toda a div rodape:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
73. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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é:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
74. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
75. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
76. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
77. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 77
Salve este arquivo como index.php, na pasta de nosso projeto:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
78. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 78
Vá na pasta raiz de nosso projeito( dentro do xampp) e crie uma pasta chamada “nav”:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
79. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
80. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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...:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
81. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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 :
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
82. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 82
Vá no navegador e digite: localhost/aplicacaophpmysql e veja sua aplicação toda dinâmica!
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
83. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
84. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 84
No arquivo estilo.css, estilize a página quemsomos:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
85. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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!
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
86. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
87. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 87
No arquivo estilo.css, estilize a página contato:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
88. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
89. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
90. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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?
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
91. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
92. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
93. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
94. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
95. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
96. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
97. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 97
Vamos ver se está tudo certo. Volte no navegador, e vá na página administração; tente logar com:
Login: admin
Senha: 123
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
98. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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!
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
99. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
100. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 100
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
101. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 101
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
102. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
103. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:xampphtdocsaplicacaophpmysqlnavarea_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.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
104. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
105. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 105
Salve na pasta “scripts” como “paginacao_usuarios.php”:
Volte na página “area_admtiva.php”, e atualize o código de paginação:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
106. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 106
Veja o resultado no navegador:
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
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
107. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 107
Substitua aqui também:
E, finalmente, aqui também:
Veja o resultado no navegador:
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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
108. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 108
Veja o resultado no navegador:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
109. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 109
Estilize também o elemento “h2” que tem o texto “Sair”:
Veja o resultado no navegador:
Apague o elemento “h3” no código da página area_admtiva.php:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
110. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
111. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
112. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 112
Veja o resultado no navegador:
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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
113. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 113
Veja o resultado no navegador:
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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
114. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 114
No arquivo lista_usuarios.php, aplique novamente a classe “lista_anuncios” nas tabelas abaixo, apontadas pelas setas:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
115. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 115
Veja o resultado no navegador:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
116. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
117. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 117
No dreamweaver, crie nova pagina em branco, do tipo php, e insira o código abaixo:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
118. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
119. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 119
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
120. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”:
Veja o resultado no navegador:
Verifique se cadastrou mesmo no banco de dados. Vá no phpmyadmin e clique na tabela usuários:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
121. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
122. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
123. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 123
Acesse a pagina http://localhost/aplicacaophpmysql/index.php?topicos=nav/lista_usuarios
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
124. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
125. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
126. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
127. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
128. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
129. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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”:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
130. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 130
Escolha a opção domínio free; insira um nome para seu dominio; insira uma senha; clique em setup new
account:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
131. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
132. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 132
Agora vamos criar nosso banco de dados.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
133. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 133
Logo abaixo, na parte de “Software / Services”, clique em Mysql:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
134. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
135. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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.
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
136. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 136
5.3. Baixando o Filezilla portátil
Vá no google e digite “download filezilla portable”:
Clique no primeiro link e clique em baixar:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
137. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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?
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
138. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 138
Lembram-se de que eu falei para guardarem as informações de registro no servidor? Usaremos elas agora:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
139. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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):
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
140. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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...
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
141. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368
142. PHP E MYSQL – APLICAÇÃO COMPLETA A PARTIR DO ZERO! 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:
www.desktopeweb.blogspot.com.br
Copyright 2013 ©, Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 – 8475 / 9641 - 2368