Crie uma aplicação PHP e MySQL do zero

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


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



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!



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:



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

Opcionalmente, você pode adicionar um gradiente:



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



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:



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:



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”.



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:



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:



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:



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:



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.



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:



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:



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:



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:



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

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



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



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:



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:



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.



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:



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):



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



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.



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”.



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.



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.



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”:



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-á:



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.



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”.



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”:



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.



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:



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:



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:



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!



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”:



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:



Clique em “Remote Info”, na barra lateral esquerda, e configure:
- Acess: Local/Network
- Remote folder: C:xampphtdocsaplicacaophpmysql

NAO CLIQUE EM OK



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!



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.



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”:



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”):



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:



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)



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:



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:



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:



Ampliando:

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



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:



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:



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á):



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:



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):



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:



3.2.4. Criando o rodapé

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


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



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




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:



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:




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:



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:




Foto 2:

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



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




Foto 3:

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




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é:



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.



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”:



RECORTE toda a div rodape:



- 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é:


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:



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:



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:



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



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



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:



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...:



... 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 :



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



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”:



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



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!



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”.



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



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.



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.



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?



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:



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:



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:



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”:



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”.



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”:



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



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!



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:



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:



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.



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:



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

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




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



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:



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


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



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”.



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:




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:




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:



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



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.



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



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:



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:



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:



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:



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



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.



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:



Salve na pasta “nav” como “exclui_usuarios_codigo.php”.


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.



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”:



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”:



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”:



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



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:



Agora vamos criar nosso banco de dados.



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



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



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.



5.3. Baixando o Filezilla portátil

Vá no google e digite “download filezilla portable”:

Clique no primeiro link e clique em baixar:



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?



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



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):



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...



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



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:


Crie uma aplicação PHP e MySQL do zero

Crie uma aplicação PHP e MySQL do zero

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Crie uma aplicação PHP e MySQL do zero

Semelhante a Crie uma aplicação PHP e MySQL do zero (20)

Último

Último (20)

Crie uma aplicação PHP e MySQL do zero