Phpemysql Aplicacaocompletaapartirdozero 130305111414 Phpapp02 PDF

PHP E MYSQL APLICAO COMPLETA A PARTIR DO ZERO!
www.desktopeweb.blogspot.com.br
Copyright 2013 , Todos os direitos Reservados.
Produced By Frederico Ramos. Tel: (62) 9388 8475 / 9641 - 2368
1


2

Sejam Bem-vindos ao curso PHP E MYSQL APLICAO COMPLETA A PARTIR DO ZERO. Meu nome Frederico
Ramos, sou webdesign e programador Freelancer. Neste curso, tentarei ensinar, de maneira totalmente prtica, como
voc pode construir sua prpria aplicao PHP comeando 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........................................................................................ pgina 4
1.2. Desenhando o corpo da aplicao........................................................................................... 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 Aplicao:
3.1. Criando a aplicao 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 pgina principal da aplicao................................................................................. 64
3.2.7 Editando o rodap................................................................................................................ 68
3.2.8. Criao de pginas dinmicas............................................................................................... 70
3.2.9. Criando a pgina index.php.................................................................................................. 75
3.2.10. Criando a pgina quem somos............................................................................................ 82
3.2.11. Criando a pgina contato.................................................................................................... 85
3.2.12. Criando a pgina administrao........................................................................................... 89
3.2.13. Inserindo os links de menu................................................................................................. 90

4. Criando o CRUD:
4.0. Criando a pgina de autenticao do usurio................................................................................ 92
4.1. Pgina area administrativa..................................................................................................... 97
4.2. Pginao 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 Aplicao para a Web:
5.1. Back up do banco de dados...................................................................................................... 126
5.2. Criao do domnio e banco de dados....................................................................................... 128
5.3. Baixando o Filezilla porttil........................................................................................................ 135
5.4. Publicando nossa aplicao....................................................................................................... 136
5.5. Corrigindo o arquivo config....................................................................................................... 142
5.6. Criando a tabela usuarios no banco de dados no servidor.......................................................... 145
5.7. Consideraes Finais................................................................................................................ 148


3

PREFCIO
Muitas so as dvidas de quem se prope a iniciar no mundo da programao web. Uma das grandes dificuldades
entender, com exemplos ilustrativos, o que as linhas de cdigo faro na aplicao web. Por este motivo, este livro
destina-se a todas as pessoas que desejam publicar uma aplicao prpria na internet.

Com exemplos interativos, de fcil compreenso e totalmente prticos, PHP E MYSQL APLICAO COMPLETA A
PARTIR DO ZERO! Vem mostrar at voc, de maneira descomplicada, como construir seu prprio aplicativo php. So
mais de 300 imagens para voc se guiar e saber exatamente o que est fazendo.

Caso apaream dvidas, possvel contactar o autor pelo seu blog, que ter o maior prazer em responder todas as
dvidas dos leitores. Bons estudos!


4

1.1. Desenhando o cabecalho e rodap

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

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


5

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

Opcionalmente, voc pode adicionar um gradiente:


6

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


7

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

Aqui eu deixei a cor
#DFDFD0
Aqui eu deixei a
cor #686859

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

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


9
O resultado deve ser este:

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

Voc pode alterar as dimenses do
retngulo digitando os valores do
comprimento em L, e a altura em A.

10

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

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

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


11

Na figura acima, usei a fonte Stencil Std, com tamanho 140, e em negrito bold.

Para o texto Desenvolviemento Desktop e Web, utilize a ferramenta texto novamente, mas com tamanho 18:

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


12

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

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

v v
v
Selecione cor
branca
Selecione cor
branca

13

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

OBSERVAO: A imagem a ser importada deve ter o formato png. Se for de outro formato, aparecer um espao
branco em volta da imagem, que prejudicar nosso desenho. Veja um exemplo com uma imagem de formato jpeg:

Formato que no seja png deixa espao branco no desenho. No use formato que no seja png!!!

Caso voc deseje, voce pode adicionar texto ou imagens na barra superior do cabecalho. Se for adicionar texto, use a
ferramenta Texto, conforme explicado anteriormente. Se for usar imagem, v em menu, arquivo, importar imagem,
conforme explicado anteriormente:


14

Agora que o cabecalho de nossa aplicao 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 boto direito em uma
delas, e selecione agrupar:

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


15

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

Agora, faremos um corte para finalizar o cabealho. Note que est sobrando um espao no canto direito e inferior da
imagem. Para corrigir, selecione a ferramenta cortar e apare a figura,
deixando-a assim:


16

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

Nomeie como cabecalho e escolha o formato png.
Finalizamos o cabealho.

Fazendo o rodap

Desabilite as imagens que no fazem parte do cabecalho, clicando no olho, conforme figura abaixo:


17

Com as 3 figuras selecionadas(elas devem estar agrupadas. Se no estiverem, selecione-as com a tecla shift
apertada, depois clique com o botao direito, e clique em agrupar), v em menu, transformar, virar verticalmente:

O resultado dever ser este:

Clicando no olho, a
figura deixa de ficar
visvel. Se clicar aqui de
novo, ela aparecer.

18

V em menu arquivo, salvar como , e save como rodape.png.
Finalizamos nosso cabecalho.

1.2. Desenhando o corpo da aplicao

Antes de iniciarmos, devemos decidir qual ser a dimenso de nossa aplicao. Digamos que voc escolha que ela ser
de 1070px de largura (tem que ser a mesma largura do cabecalho)por 800 de altura. Ento, v no fireworks, menu
arquivo, novo:
NOTE QUE O FUNDO AGORA BRANCO:


19

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

Control + + aumenta o zoom
Control + - diminui o zoom

20

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


21

Criando o menu

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

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


22

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

Resultado de nosso menu:

Selecione a cor branca.
Selecione a cor branca.
Deixe o valor 30

23

Criando o corpo da aplicao

Selecione a ferramenta quadrado, e insira um quadrado de 30px por 520px:

Selecione a ferramenta gradiente, selecione a cor #DFDFD0 para o branco:

Terminamos a parte de confeco grfica de nosso layout. Agora fatiaremos nosso layout para export-lo para o
dreamweaver.

Selecione a cor #DFDFD0
Selecione a cor branca

24

1.3. Fatiando e exportando as imagens

Vamos inserir duas rguas para auxiliar-nos. V em menu exibir, rguas:

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


25

Vamos fatiar o cabealho. 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 cpia ilegal de seu contedo e faz com que sua aplicao rode mais rpido nos
browsers. Selecione JPEG qualidade melhor, depois clique em exportar...(veja as setas azuis):

Posicione o cursor aqui. Clique e arraste...
... at aqui. Note a linha azul
que apareceu. Ela a rgua.

26

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


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

Repita o procedimento com todo o restante do cabealho. Divida-o em 4 ou 5 partes. Aps criar outra fatia, selecione a
anterior e delete-a.

Cabecalho da aplicao fatiado em 4 partes.

APENAS
IMAGENS!!!

28

Fatiando o menu

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

Fatiando o corpo da aplicao

Com a ferramenta fatia, fatie o corpo da aplicao e exporte a como corpo_aplicacao.png.


29

Fatiando o rodap

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

Terminamos de fatiar nossa aplicao. Agora, vamos criar nossa aplicao no dreamweaver.


30

2.1. Baixando e instalando o Xampp

Para que nossa aplicao possa funcionar, precisaremos de 3 coisas:
- Um servidor de testes para nossa aplicao, 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 espcie de pacoto, 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 pgina abaixo:

Clique no boto clique para baixar, apontado pela seta azul.


31

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

Aps baixar o xampp, localize-o e clique duas vezes para instal-lo:

Aparecer uma tela perguntando se voc deseja executar o xampp. Clique em Executar:


32

Selecione o local a ser instalado; no meu caso, escolhi C:\. NO pode haver espaos. Depois, clique em install.

A instalao iniciar-se-:


33

O xampp te perguntar se voc deseja adicionar um atalho no desktop. mais prtico que voc adicione. Logo, digite
y e aperte enter.

Aps a instalao terminar, o xampp criar um cone na rea de trabalho:

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


34

2.2. Criando o banco de dados e as tabelas

Para criarmos o banco de dados, precisamos iniciar o mysql atravs do xampp. V na rea de trabalho e d um duplo
click no cone do xampp. Ele abrir o painel de controle. Clique no boto start do Apache e do Mysql. Aps voc
clicar, eles mudaro o nome de start para stop.


35

V no seu navegador de internet(firefox, chrome, ou internet explorer) e na barra de endereos, digite localhost:
Voc dever visualizar esta tela:

Para criarmos o banco de dados, v na barra lateral esquerda, na seo tools, e clique em phpmyadmin:


36

Abrir-se- a tela do PHPMyadmin. Aqui ns 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 portflio, bem como alguns que uso apenas para testes.


37

2.2. Criando o banco de dados e as tabelas

Para criar um banco de dados, clique em banco de dados, conforme apontado pela seta azul:

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

Agora, seu banco aparecer na barra lateral:


38

Agora, temos que definir como ser nossa aplicao. Para fins didticos, construiremos um sistema que cadastrar
usurios, permitir edio e excluso deles.

Construiremos, ento, a tabela usuarios.

Clique no banco de dados que voc criou, na barra lateral esquerda do phpmyadmin:

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

Ampliando a figura:


39

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

Descrio 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 numerao nica; ele ser uma chave primria.
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 nmero de id aumentar automaticamente.

Clique em salvar para criar a tabela usuarios. Sua tabela dever aparecer na barra lateral esquerda:


40

Para finalizar o xampp, selecione o cone do xampp na barra de tarefas; clique com o boto direito do mouse; clique em
quit:

Nosso banco de dados est criado. Estamos prontos para iniciarmos nossa aplicao PHP feita totalmente no brao!


41

3.1. Criando a aplicao no Dreamweaver

Antes de abrir o dreamweaver, precisamos criar a pasta de nosso projeto no xampp. Acesse a pasta htdocs dentro do
xampp pelo windows explorer. Crie a pasta de nosso projeto. Eu chamei a minha pasta de aplicacaophpmysql:

Dentro da pasta da aplicao(aplicacaophpmysql), crie a pasta chamada imagens:

C:\xampp\htdocs

42

Abra o dreamweaver, e crie um novo site no menu site, new site e siga as configuraes :
- nome do site(site name), local padro do folder ( local root folder), folder padro das imagens(Default images folder),
http endereo(http adress); no clique em OK, ao terminar.

Abra seu dreamweaver, clique em menu arquivo, novo, selecione php e clique em criar:


43

Clique em Remote Info, na barra lateral esquerda, e configure:
- Acess: Local/Network
- Remote folder: C:\xampp\htdocs\aplicacaophpmysql

NAO CLIQUE EM OK


44

Clique em Testing server, na barra lateral esquerda, e configure:

- Server model: PHP MYSQL
- Acess: Local/Network
- Testing server folder: C:\xampp\htdocs\aplicacaophpmysql
- URL prefix: http://localhost/aplicacaophpmysql/
FINALMENTE, CLIQUE EM OK!


45

Na aba files do dreamweaver, se estiver desplugado, clique no boto conectar ao servidor remoto:

Quando estiver conectado, aparecer este
smbolo(de uma tomada ligada):
Agora voc visualiza os arquivos da
aplicao. Note o comentrio
file activity complete, indicando que
agora voc est conectado aos seus
arquivos da aplicao.

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 aplicao com nosso banco de dados. No dreamweaver, na aba databases(banco de dados),
clique no sinal de +, e em Mysql Connection:


47

Aparecer a tela abaixo. Configure-a assim:

- connection name: config
- Mysql server: localhost
- User name; root
Password: DEIXE VAZIO( O MEU TEM SENHA PORQUE TENHO VRIOS 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 conexo bem sucedida
abaixo(Conexa efetuada com sucesso):


48
Se no apareceu esta mensagem, provavelmente o erro no campo user ou password. Somente isso pode dar errado
aqui...
Nossa aplicao j est conectada ao banco de dados.

Vamos iniciar nossa aplicao. Ela ter a seguinte estrutura:

Cabealho
Contedo
rodap

O cabealho e o rodap sero os mesmos para toda nossa aplicao. Para criarmos o cabealho da aplicao, abra o
dreamweaver; v em menu novo(ou new, se seu dreamweaver estiver em ingls)...

...selecione php e clique em criar:

Vamos inserir no cabealho 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, ento:


49

3.2. Importando as imagens

Passo 1) Copie as imagens que voc fatiou e exportou pelo fireworks. No meu caso, salvei-as em
D:\Fred\Programacao\ebook php mysql:

(eu fatiei o cabealho em 4 imagens: cabecalho1, cabecalho2, cabecalho3 e cabecalho4)


50

Passo 2) Cole as imagens copiadas acima na pasta de imagens do seu projeto, DENTRO DO XAMPP, NA PASTA:

xampp/htdocs/aplicacaophpmysql/imagens

MUITA ATENO AQUI! Se voc no selecionar a pasta certa, no vai funcionar!!!

LEMBRE-SE: Toda vez que voc for construir uma aplicao, a pasta do seu projeto SEMPRE dever estar na pasta htdocs
do xampp.
- A pasta desse nosso projeto chama-se aplicacaophpmysql; ento, a ordem das pastas dentro do xampp ser:
C:\xampp\htdocs\aplicacaophpmysql (supondo que voc instalou o xampp em C:).

- Se voc tiver um projeto chamado clienteFulano, a ordem ser esta:
C:\xampp\htdocs\clienteFulano.

Volte ao dreamweaver. Vamos chamar em nosso arquivo php as imagens que acabamos de copiar. Eis o cdigo:


51

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

Vamos visualizar nossa aplicao? V no seu navegador de internet(firefox, chrome ou internet explorer), e digite:
localhost/aplicacaophpmysql/header.php (sem as aspas).

Aparecer o cabealho de nossa aplicao:


52

Figura 116. Visualizao do cabealho no navegador Firefox 16.0.1.

Nossa aplicao est centralizada esquerda. Corrigiremos este detalhe com a aplicao de css.

Antes de aplicarmos o estilo em nossa aplicao, vamos encapsular o cabecalho dentro de uma div, para facilitar a
estilizao. Criaremos uma div chamada header, que conter todo o cabealho. Esta div ficar dentro da div box,
que englobar todo o contedo de nossa aplicao.

Vamos para o visual que a compreenso ficar mais fcil. No dreamweaver, ainda no arquivo header.php, crie as divs
header e box:


53

Ampliando:

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


54

3.2.1 Criando a folha de estilos CSS

V no dreamweaver, clique em menu arquivo novo, escolha css e clique em criar(create):

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

...a aplicao ficar centralizada na tela:


55

Se voc no conseguir visualizar a mudana, experimente clicar no boto atualizar do seu navegador de internet, ou
apertando a tecla F5:

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

Agora a div box ganhou uma borda:


56

3.2.2 Inserindo o menu

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

Figura 125. Toda vez que voc fizer alguma alterao nos arquivos, salve-o apertando control + s. Se voc esquecer de
salvar, voc no visualizar as mudanas no navegador.

No arquivo estilo.css, adicione comprimento da div menu e uma cor de fundo(apenas para visulizarmos onde ela
est):


57

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

Figura 127. O aaa na div menu serve apenas para deix-la visvel.

Coloque na pasta de imagens do seu projeto a imagem do menu que criamos no fireworks:

No meu caso, copiei daqui:


58

E colei na pasta do projeto, dentro do xampp:

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

Figura 130. A altura da div menu (height) deve ser a mesma da imagem(que de 62px).

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


59

3.2.3. Criando a div conteudo

Vamos criar a div que abrigar todo o contedo de nossa aplicao. V no dreamweaver, no arquivo header.php e crie a
div contedo:

Veja no navegador o resultado:


60

3.2.4. Criando o rodap

No dreamweaver, no arquivo header.php, insira o cdigo html do rodap:


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


61

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



62

Antes de iniciarmos a criao das pginas de nossa aplicao, vamos melhorar o visual da aplicao e construir nos links
do menu.

No dreamweaver, v no arquivo estilo.css e retire a borda da div box, retirando a linha de cdigo selecionada abaixo:

Veja o resultado no navegador:


63

3.2.5. Criando os itens de menu

V no dreamweaver, no arquivo header.php, e insira o cdigo html dos intens de menu:

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


64


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


65

Criando a pgina principal da aplicao

Antes de criar esta pgina, precisamos ter em mente o que devemos exibir para nossos visitantes. Para fins didticos,
escolhi exibir os seguintes itens:

- 3 fotos sobre desenvolvimento;
- Uma breve descrio de cada foto;
- 3 notcias sobre a rea de programao em php;
- 3 cons para as redes sociais: facebook, twitter e linkdin.

Aps escolher quais fotos mostrar, vamos inseri-las pelo dreamweaver.

Foto1:

No dreamweaver, no arquvivo header.php, insira o cdigo destacado abaixo, dentro da div conteudo:

No dreameaver, v no arquivo estilo.css e estilize todo o pargrafo(cdigo selecionado em azul) e a ul da div
conteudo:


66


Foto 2:

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


67

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



68

Foto 3:

No dreamweaver, insira o cdigo que mostrar a foto3, bem como o respectivo texto:



69

Editando o rodap

No dreamweaver, v na div rodap e acrescente o cdigo que mostra copyright, telefone e endereo:

No arquivo estilo.css, estilize o rodap:


70

Resultado no navegador:

Terminamos a pgina principal da aplicao. Note que, at agora, nosso contedo totalmente esttico. Passemos
agora para a parte de dinamizao do contedo.


71
3.2.8. Criao de pginas dinmicas

No dreamweaver, no arquivo header.php, selecione e RECORTE tudo desde o comeo do cdigo at logo depois da
abertura da div conteudo:

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

- salve este documento na pasta de nosso projeto (aplicacaophpmysql) comocabecalho.php:


72

RECORTE toda a div rodape:


73
- Crie novo documento php( control + N);
- cole o codigo copiado acima;
- salve como footer.php:

V no arquivo header.php, e coloque o cdigo php que incluir o cabealho:

- V no final da pgina header. php e coloque o cdigo que incluir nosso rodap:

74

Agora o cabecalho e rodap de nossa aplicao aparecero da mesma forma em todas as pginas.
DICA: voc sabe que sua aplicao aparecer com a mesma resoluo em todas as telas se ao apertar, por repetidas
vezes:
1)control + -(tecla contrl mais sinal de menos), e o layout permanecer intacto:


75
Ou,

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

ATENO: EM HIPTESE ALGUMA, AO SE APERTAR (CONTROL + +) OU (CONTROL + -) O LAYOUT DEVE
DESCONFIGURAR. SE ISSO ACONTECER, VOC FEZ ALGO DE ERRADO EM SEU CDIGO CSS.

EXEMPLO DO QUE NO PODE ACONTECER COM SEU LAYOUT:


76

3.2.9. Criando a pgina index.php

No dreamweaver, crie novo documento em menu arquivo ,novo , escolha php e clique em criar. Coloque nele somente
o cdigo abaixo:


77

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


78

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


79

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

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


80

Nossa pgina header.php ficou sem cabecalho e sem rodap. Se voc salv-la e tentar visualiz-la no navegador,
ela aparecer toda desconfigurada, assim:

exatamente isso que queremos!

No dreamweaver, v no menu arquivo, salvar como...:


81

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

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


82

V no navegador e digite: localhost/aplicacaophpmysql e veja sua aplicao toda dinmica!


83

3.2.10. Criando a pgina quem somos

No dreamweaver, crie novo arquivo do tipo php. Insira o contedo que voc quiser para formar esta pgina. No meu
caso aqui, inserirei uma imagem e uma pequena descrio da nossa aplicao.

Aps encontrar a imagem que voc ir exibir na pgina, copie-a para a pasta imagens de nosso projeto. Eu colei a
imagem logo:

No dreamweaver, crie a pagina quemsomos.php:


84

No arquivo estilo.css, estilize a pgina quemsomos:


85

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

NOTE QUE O CDIGO PARA VISUALIZARMOS AS PGINAS MUDOU, POIS AGORA ELAS ESTO DINMICAS!


86

3.2.11. Criando a pgina contato

No dreamweaver, crie novo arquivo php e insira o seguinte cdigo:

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


87

No arquivo estilo.css, estilize a pgina contato:


88

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

Note que no campo action do formulrio, o direcionamento para a pgina enviar_email.php. Entretanto, ns no
criamos esta pgina ainda. Vamos cri-la agora.


89

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

Salve-a como enviar_email.php, na pasta nav de nosso projeto.

At aqui, sua pasta nav deve estar com os seguintes arquivos:

- contato, enviar_email, home e quemsomos.


90

3.2.12. Criando a pgina administrao

No dreamweaver, crie novo arquivo php(menu arquivo, novo, selecione php e clique em criar) e insira o cdigo abaixo:

Salve na pasta nav de nosso projeto como adm.php.

Finalizamos a primeira parte de nossa aplicao. Agora s falta fazermos as partes que incluiro e editaro nosso banco
de dados. Viram como foi fcil?


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 no deixar o link ficar sublinhado:


92

Vamos inserir um efeito para quando o usurio passar o mouse sobre o item de menu. V no arquivo estilo.css e insira o
cdigo destacado em azul:

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

No rodap, voc visualizar o link do item de menu em questo:


93

4.0. Criando a pgina de autenticao do usurio

Crie nova pgina php e insira o codigo abaixo:

Salve como logando.php, na pasta nav de nosso projeto.

Abra a pgina cabecalho.php e insira o cdigo php destacado abaixo:


94

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

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


95

Clique em create table:

Crie os seguintes campos:

- id, do tipo INT. Em ndce, selecione PRYMARY. Em A_I, marque a caixa de seleo;
- login, do tipo TEXT;
- senha, do tipo TEXT;
- email, do tipo TEXT.

D um nome para a tabela.
Clique em salvar.


96

Vamos inserir um usuario para testarmos nossa aplicao php. Ainda no phpmyadmin, Selecione a tabela usuarios e
clique em inserir:

Insira os dados abaixo e clique em executar:


97

Vamos ver se est tudo certo. Volte no navegador, e v na pgina administrao; tente logar com:
Login: admin
Senha: 123


98

Se voc visualizar o erro abaixo...

...significa que est tudo CERTO!!! Este erro aconteceu porque no campo action de nosso formulrio da pagina
adm.php, ns chamamos a pgina area_admtiva.php. Acontece que ela ainda no foi criada. Por isso deu erro.
Vamos cri-la ento!


99
4.1. Pgina area administrativa

Vamos criar a pgina CRUD de usurios. V no dreamweaver, e crie novo arquivo php e insira o cdigo abaixo:


100


101


102

Quanto cdigo, hein? Salve o arquivo na pasta nav, como area_admtiva.php.

V no seu navegador e tente logar-se na pgina administrao. Aps o login, voc dever visualizar:


103

Continuao da pgina area_admtiva.php.

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

O PHP est te dizendo:

Aviso: include(scripts/paginacao_noticias_lista.php): falha ao abrir: sem arquivo ou diretorio em
C:\xampp\htdocs\aplicacaophpmysql\nav\area_admtiva.php na linha 166

Quer dizer: Olha, eu no consegui abrir o arquivo paginacao_noticias_lista.php na pasta scripts. Parece que este
arquivo no est l.
Note tambm que a foto do usurio no apareceu. Isto aconteceu porque ainda no cadastramos nenhum usurio com
foto em nosso banco de dados. No se preocupe. Faremos isso futuramente.

104
4.2. Pginao de resultados

Acesse a pasta de seu projeto e crie uma pasta chamada scripts:

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


105

Salve na pasta scripts como paginacao_usuarios.php:

Volte na pgina area_admtiva.php, e atualize o cdigo de paginao:


106

Essa cor ficou horrvel! Era para aparecer um nmero um entre as palavras anterior e prximo. Vamos mudar essa cor
no css.

V na pgina paginacao_usuarios.php, na pasta scripts e localize o cdigo css de cor destacado em azul abaixo:

Substitua este cdigo pela
cor #333

107
Substitua aqui tambm:

E, finalmente, aqui tambm:


Nossa paginao est pronta.

Vamos estilizar o elemento h1 de nossa pgina area_admtiva.php. No dreamweaver, v no arquivo estilo.css e
estilize o h1 inserindo o cdigo css abaixo:


108



109
Estilize tambm o elemento h2 que tem o texto Sair:


Apague o elemento h3 no cdigo da pgina area_admtiva.php:


110

4.3. Campo de Pesquisa

No dreamweaver, salve a pagina area_admtiva.phpcomo lista_usuarios.php:

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


111
Abra a pgina busca_usuarios.php e insira o cdigo destacado abaixo, logo aps o cdigo da paginao:

Salve a pgina e teste no navegador. O sistema de busca j est funcionando.

Vamos formatar os labels de todos os campos da nossa pgina lista_usuarios.php.

Aplique um elemento <p> em todos os labels:

V no arquivo estilo.css e estilize-o:


112


Para finalizar a estilizao, vamos aplicar uma borda para separarmos as funes inserir, buscar e exibir os dados.

Note que, na pagina lista_usuarios.php, no cdigo da tabela inserir usuario h uma classe para a tabela. Veja:

Vamos estilizar essa classe no cdigo css. V no arquivo estilo.css e estilize a classe acima:


113


Estilizando o campo de busca

Fiz uma pequena alterao no html do campo de busca. Vejam como ficou o cdigo na pagina lista_usuarios.php:

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


114

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


115


116

4.4. Inserir usurios

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

Salve na pasta nav como cadastra_usuarios_codigo.php

Repare que a primeira linha do cdigo faz uma chamada para o arquivo upload_redimensiona1foto.php.
Mas ns ainda no temos esse arquivo. Se tentarmos rodar nossa aplicao, acontecer o erro de arquivo no
encontrado. Vamos criar este arquivo.


117

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


118

Salve na pasta scripts como upload_redimensiona1foto.php:

Repare que na linha 48 do arquivo upload_redimensiona1foto.php estamos dizendo para o PHP que para ele salvar
a imagem do usurio na pasta imagens/usuarios/:

Mas, na pasta de nosso projeto, ainda no existe a pasta usuarios. Crie-a:


119


120

Vamos testar se nossa aplicao est cadastrando usurios. No navegador, digite nossa pgina de listar usurios:
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 usurios:


121

Agora a foto tambm aparece na lista de usurios, na pgina lista_usuarios.php:

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


122

4.5. CRUD: Editar

No dreamweaver, crie novo arquivo e insira o cdigo abaixo:

Salve na pasta nav como altera_usuarios.php.

Crie nova pgina em branco e insira o codigo abaixo:

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

123

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


124

Selecione um usuario e clique em editar:

Edite os dados e mude a foto se desejar. Ou cancele e volte para a pagina que lista os usurios. Vamos agora fazer a
parte de excluso.


125

4.6. CRUD: Excluir

No dreamweaver, v na pgina lista_usuarios.php e atualize o cdigo do boto de excluso:

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 cdigo abaixo:


126
Salve na pasta nav como exclui_usuarios_codigo.php.


Clique no boto excluir na pgina lista_usuarios.php. Dever aparecer a tela abaixo:

Assim, conclumos a parte de CRUD de nossa aplicao.


127

5.1. Back up do banco de dados

Acesse o phpmyadmin no seu navegador e clique em Exportar:

Selecione o formato sql e clique em executar:


128

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

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


129

5.2. Criao do domnio e banco de dados

Existem vrias opes de hospedagem. Eu uso o 000webhost para exibir meu portflio. Acessem:
http://www.000webhost.com/

Crie uma conta e logue-se. Ao se logar, voc ser direcionado para esta tela. Para criar um domnio, clique em
create new:


130

Escolha a opo domnio free; insira um nome para seu dominio; insira uma senha; clique em setup new
account:


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

Clique em List Accounts.

Aparecer a lista de seus domnios. Escolha um e clique em Go to CPanel:

Guarde bem as informaes abaixo. Precisaremos delas para publicar nossa aplicao:


132

Agora vamos criar nosso banco de dados.


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


134

Preencha os dados e clique em create database:

Nome do banco de dados
Nome do usuario do banco
Senha para o banco de dados

Repita a senha


135
Seu banco de dados foi criado. Guarde muito bem esses dados pois usaremos eles para publicar nossa aplicao.

Agora vamos baixar o filezilla para publicarmos nossa aplicao.


136

5.3. Baixando o Filezilla porttil

V no google e digite download filezilla portable:

Clique no primeiro link e clique em baixar:


137
5.4. Publicando nossa aplicao

Descompacte e abra o filezilla.

Bem vindo(a) ao Filezilla. Este programa torna possvel a publicao de aplicaes web. Do lado esquerdo, visualizamos
os arquivos em nosso computador. Do lado direito, visualizamos os arquivos no servidor. Vamos conectar o filezilla ao
nosso servidor?


138

Lembram-se de que eu falei para guardarem as informaes de registro no servidor? Usaremos elas agora:


139

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

Parabns!!! Voc est conectado ao seu servidor. Do lado esquerdo, selecione a pasta de nosso projeto. Do lado direito,
selecione a pasta public_html (prxima pgina, pois a imagem ficou grande para caber aqui):


140

Para publicar sua aplicao, simplesmente clique, segure e arraste TODAS AS PASTAS E ARQUIVOS da pasta de nosso
projeto para a pasta public_html.

Tenha pacincia. Talvez demore um pouco. Isso normal...


141

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

Parabns! Voc publicou sua aplicao em PHP e MYSQL! Vamos visualiz-la no navegador? Acesse sua aplicao. No
meu caso, www.meudominio.host56.com


142

Ooooooooops! Algo deu errado. Se voc visualizar os mesmos erros que eu ao acessar sua aplicao, no se preocupe.
Isso normal. Ns publicamos no servidor as configuraes de conexo locais do banco de dados. Por isso aconteceu
este erro:


143
5.5. Corrigindo o arquivo config

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

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


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

Atualize seu navegador e veja sua aplicao publicada na web!!!

Acesse o item de menu admnistrao e tente logar-se.

145

Voc receber esta belssima mensagem de erro:

Tabela usuarios no existe.
No existe mesmo. Ns publicamos a aplicao, mas faltou publicar as tabelas do banco de dados.


146
5.6. Criando a tabela usuarios no banco de dados no servidor

Acesse o phpmysadmin do servidor remoto:


147
Clique em Enter phpMyAdmin:

Lembra-se de quando exportamos nosso banco de dados no phpmyadmin local? Verifique onde voce salvou aquele
arquivo em formato sql. Importaremos ele agora.

Clique em import. Selecione o arquivo para ser enviado e clique em Go:


148
Voc deve visualizar algo parecido com esta tela:

Atualize o navegador e veja sua aplicao rodando:


149
5.7. Consideraes Finais

Deste modo, conclumos nossa aplicao. Espero que vocs tenham gostado do contedo, e que faam bom proveito
deste livro. Claro que existem vrias maneiras de se construir aplicaes PHP. Entretanto, meu objetivo aqui foi mostrar,
de maneira extremamente prtica, como iniciar uma aplicao PHP E MYSQL a partir do zero.

Comentrios, crticas e sugestes sero muito bem-vindos. Grande abrao a todos!


150

Phpemysql Aplicacaocompletaapartirdozero 130305111414 Phpapp02 PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Phpemysql Aplicacaocompletaapartirdozero 130305111414 Phpapp02 PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

PHP E MYSQL APLICAO COMPLETA A PARTIR DO ZERO!

Anda mungkin juga menyukai