Mini Curso PHP, PHP

- 11/02/2009

Mini Curso de PHP – Sistema de notícias (Colocando um ‘layout’ básico) – Aula 15


1 Estrelas2 Estrelas3 Estrelas4 Estrelas5 Estrelas (7 votos, média: 5.00 de 5)
Loading ... Loading ...

Olá pessoal. Vamos dar continuidade ao nosso curso.

Como vocês sabem, estamos desenvolvendo um sistema de notícias. Já fizemos o seguinte:

  • Cadastro de usuários
  • Lista de usuários
  • Exclusão de usuários

Até agora estamos colocando todos os arquivos na raiz do sistema. Hoje vamos organizar um pouco a estrutura dos arquivos, pois desta forma fica muito confuso.

Vamos organizar da seguinte forma:

  • Criar um arquivo chamado ‘index.php’ na raiz do sistema. Nele, colocaremos um menu e definiremos uma área para usar como conteúdo.
  • Criar uma pasta chamada ‘img’ onde vamos colocar todas as imagens que usarmos no sistema.

Abra um editor de HTML de sua preferência(Dreamweaver por exemplo) e faça um layout com as seguintes áreas:

organiza 1 wireframe 300x225 Mini Curso de PHP – Sistema de notícias (Colocando um layout básico) Aula 15

Veja no ‘Wireframe’(Wiki) acima, definimos a área vermelha como sendo para o menu e a área verde sendo para o conteúdo. NÃO VOU FAZER UM LAYOUT BONITO OU COM FIRULAS. A intenção é mostrar o funcionamento do PHP neste caso, que será assim:

  • Este layout será salvo com o nome de índex.php
  • No lado do menu, listaremos todos os links do sistema(Ultimas noticias, login, cadastrar noticia, listar noticias, etc…)
  • Quando o usuário clicar em algum link, iremos recarregar a índex.php mas agora com um parâmetro, que é o nome da página clicada. Assim, carregaremos a mesma na área do conteúdo.

Bom, se você quiser agilizar o processo, copie o HTML abaixo e salve-o como índex.php na raiz do sistema:

  1. <?
  2. # ===— A index será carregada em TODOS os links, portanto, vamos incluir o banco.php aqui. Para não ter que repetir o código em todas as páginas. Muito mais prático não?
  3. require_once(‘banco.php’);
  4. ?>
  5. <html>
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  8. <title>MiniCurso de PHP – Sistema de Notícias</title>
  9. </head>
  10.  
  11. <body>
  12. <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  13.   <tr>
  14.     <td align="center" valign="top"><table width="750" border="0" cellspacing="0" cellpadding="0">
  15.       <tr>
  16.         <td bgcolor="#000000"><table width="750" border="0" cellspacing="1" cellpadding="0">
  17.           <tr>
  18.             <td width="167" bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  19.               <tr>
  20.                 <td> </td>
  21.               </tr>
  22.               <tr>
  23.                 <td>INICIAL</td>
  24.               </tr>
  25.               <tr>
  26.                 <td> </td>
  27.               </tr>
  28.               <tr>
  29.                 <td><strong>[ USUÁRIOS ]</strong></td>
  30.               </tr>
  31.               <tr>
  32.                 <td>- Lista</td>
  33.               </tr>
  34.               <tr>
  35.                 <td>- Cadastrar</td>
  36.               </tr>
  37.               <tr>
  38.                 <td> </td>
  39.               </tr>
  40.               <tr>
  41.                 <td>[ NOTÍCIAS ]</td>
  42.               </tr>
  43.               <tr>
  44.                 <td>- Lista</td>
  45.               </tr>
  46.               <tr>
  47.                 <td>- Cadastrar</td>
  48.               </tr>
  49.               <tr>
  50.                 <td> </td>
  51.               </tr>
  52.               <tr>
  53.                 <td> </td>
  54.               </tr>
  55.             </table></td>
  56.             <td width="580" align="center" valign="top" bgcolor="#FFFFFF">AQUI O CONTEÚDO</td>
  57.           </tr>
  58.         </table></td>
  59.       </tr>
  60.     </table></td>
  61.   </tr>
  62. </table>
  63. </body>
  64. </html>

Mas, ainda não terminamos de manipular este arquivo. Apenas coloquei a base dele para você entender direito.

Você deve ter reparado que eu comentei na índex.php que ela será executada TODAS as vezes que alguém clicar em algum link… Mas então como iremos mostrar a tela correspondente ao link clicado???

Veja a ‘mágica’:

Em cada link, iremos inserir uma variável GET que será passada para a índex.php. Desta forma:

  • index.php?pagina=login
  • index.php?pagina=usuário_formulario
  • index.php?pagina=usuário_lista
  • E assim por diante…

Você reparou que o parâmetro ‘pagina’ são exatamente os nomes dos arquivos que criamos? Então significa que se recuperarmos esta variável e inserir um .php no final agente consegue dar um include no arquivo. Como abaixo:

  1. <?
  2. include($_GET[‘pagina’].‘.php’);
  3. ?>

Viram como é simples?

Mas calma, ainda estamos só na teoria… se fizéssemos isto, estaríamos abrindo uma brecha de segurança muito grande em nosso sistema… pois se o usuário mais esperto fizer isto: index.php?pagina=http://www.google.com

O Google será carregado no meio do nosso sistema. Você irá aprender a se prevenir contra isso. Veja abaixo a implementação do index.php já com a correção para este problema.

  1. <?
  2. # ===— A index será carregada em TODOS os links, portanto, vamos incluir o banco.php aqui. Para não ter que repetir o código em todas as páginas. Muito mais prático não?
  3. require_once(‘banco.php’);
  4.  
  5. # ===— Se a variável página existir e tiver valor
  6. if(isset($_GET[‘pagina’]{4})){
  7.    
  8.     # ===— Se existir carrega a página clicada
  9.     $pagina = $_GET[‘pagina’].‘.php’;
  10.    
  11. } else {
  12.     # ===— Se não existir carrega a tela de login
  13.     $pagina = ‘login.php’;
  14. }
  15.  
  16. ?>
  17. <html>
  18. <head>
  19. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  20. <title>MiniCurso de PHP – Sistema de Notícias</title>
  21. </head>
  22.  
  23. <body>
  24. <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  25.   <tr>
  26.     <td align="center" valign="top"><table width="750" border="0" cellspacing="0" cellpadding="0">
  27.       <tr>
  28.         <td bgcolor="#000000"><table width="750" border="0" cellspacing="1" cellpadding="0">
  29.           <tr>
  30.             <td width="167" bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  31.               <tr>
  32.                 <td> </td>
  33.               </tr>
  34.               <tr>
  35.                 <td>INICIAL</td>
  36.               </tr>
  37.               <tr>
  38.                 <td> </td>
  39.               </tr>
  40.               <tr>
  41.                 <td><strong>[ USUÁRIOS]</strong></td>
  42.               </tr>
  43.               <tr>
  44.                 <td>- Lista</td>
  45.               </tr>
  46.               <tr>
  47.                 <td>- Cadastrar</td>
  48.               </tr>
  49.               <tr>
  50.                 <td> </td>
  51.               </tr>
  52.               <tr>
  53.                 <td>[ NOTÍCIAS ]</td>
  54.               </tr>
  55.               <tr>
  56.                 <td>- Lista</td>
  57.               </tr>
  58.               <tr>
  59.                 <td>- Cadastrar</td>
  60.               </tr>
  61.               <tr>
  62.                 <td> </td>
  63.               </tr>
  64.               <tr>
  65.                 <td> </td>
  66.               </tr>
  67.             </table></td>
  68.             <td width="580" align="center" valign="top" bgcolor="#FFFFFF">
  69.                 <?
  70.                 # ===— se a página existir no servidor ele inclui, caso contrário exibe um erro
  71.                 if(file_exists($pagina)){
  72.                     include($pagina);
  73.                 } else {
  74.                     echo ‘Opa! acho que você esta tentando ver uma página que não existe!!’;
  75.                 }
  76.                 ?>            
  77.             </td>
  78.           </tr>
  79.         </table></td>
  80.       </tr>
  81.     </table></td>
  82.   </tr>
  83. </table>
  84. </body>
  85. </html>

Mas, usando esta organização, teremos que mudar todas as actions dos formulários.. pois senão vai problema(a pagina será carregada fora do layout que definimos na index.php).

Bom, para testar, rode o que fizemos até agora ok? Veja o vídeo abaixo:

OK! Agora que você viu o sistema funcionando com um ‘layout’, agora vamos corrigir os links das páginas que programamos até agora!! Vamos fazer da seguinte forma:

Abra o arquivo usuario_lista.php e altere os links dos links ‘Apagar’ e ‘Editar’. Deixe-os conforme o exemplo abaixo:

  1. <?
  2. echo "<b>$nome</b> (<a href=’mailto:$email’>$email</a>) – [ <a href='?pagina=usuario_delete&id=".$id."'>Apagar</a> - <a href='?pagina=usuario_edita_formulario&id=".$id."'>Editar</a> ]<BR>";
  3. ?>

Perceba que incluímos “?pagina=”, tiramos o .php do arquivo e antes da variável id troquei o ‘?’ por ‘&’. Ou seja, vamos passar para a index.php dois parâmetros: pagina e id. Faça a alteração e teste no navegador… no meu caso a url ficou assim:

http://localhost/marcelosabadini/mini-curso/noticias/?pagina=usuario_delete&id=1

http://localhost/marcelosabadini/mini-curso/noticias/?pagina=usuario_edita_formulario&id=1

Agora abra o arquivo usuario_formulario.php e altere a action do <form>. Vai ser igual o arquivo anterior… veja abaixo como ficou:

  1. <h1>Cadastro de usuários</h1>
  2.  
  3. <form name="form1" action="?pagina=usuario_cadastro" method="POST">
  4.     Nome: <input type="text" name="nome" id="nome" maxlength="50" /><BR>
  5.     E-mail: <input type="text" name="email" id="email" maxlength="50" /><BR>
  6.     Usuário: <input type="text" name="usuario" id="usuario" maxlength="12" /><BR>
  7.     Senha: <input type="password" name="senha" id="senha" maxlength="12" /><BR>
  8.     <BR>
  9.     <input type="submit" value="Enviar" />
  10. </form>

Agora abra o arquivo usuario_cadastro.php e altere o todos os links.

Abra o arquivo usuario_delete.php e altere todos os links.

Abra o arquivo usuario_edita.php e altere todos os links.

Abra o arquivo usuario_edita_formulario.php e altere todos os links e a action do formulário.

Bom, por hoje é só!

Espero ter sido direto e ter explicado direito. Se você não entendeu ou não conseguiu fazer, poste ou entre em contato comigo… agora já posso passar o código fonte.

Um grande abraço!

  1. 5 Comentários to “Mini Curso de PHP – Sistema de notícias (Colocando um ‘layout’ básico) – Aula 15”

  2. Amigo, gostei muito do seu mini-curso, parabéns,
    embora ja se tenha passado um tempo da publicação, vc teria o codigo fonte dessa parte? pois nao consegui fazer os includes
    se tiver, poderia me enviar por email?
    desde já agradeço

    ReplyReply

    Por Dhillan (2 comments) em 08/04/2010

  3. Tem razão! abandonei este assunto aqui no blog :-(

    estou trabalhando d+!

    Mas olha só, o ‘sistema’ rodando esta aqui:
    http://marcelosabadini.com.br/mini-curso/noticias/

    E o zip do fonte esta aqui:
    http://marcelosabadini.com.br/mini-curso/noticias.zip

    ReplyReply

    Por Marcelo Sabadini (109 comments) em 10/04/2010

  4. Marcelo, muito obrigado por responder e atender meu pedido, repito aqui meu agradecimento pelo mini-curso, muito bom mesmo, parabéns

    ReplyReply

    Por Dhillan (2 comments) em 10/04/2010

  5. Foi mal falar, mas você incluiu no arquivo fonte um arquivo com o seu Banco de Dados, login e senha, e isso é grave. Se alguém pegar pode deletar ou fazer bobagem com o seu BD.

    ReplyReply

    Por Luciano (1 comments) em 07/07/2010

  6. Obrigado por avisar Luciano.

    Eu acessei o arquivo pelo ZIP e removi a senha… acho que o Windows fez cagada e salvou o arquivo original tipo um temporário. Sinistro.

    Obrigado novamente. Um grande abraço!

    ReplyReply

    Por Marcelo Sabadini (109 comments) em 07/07/2010

Coloque um Comentário

Links de comentários deveriam estar livres de nofollow.

Get Adobe Flash playerPlugin by wpburn.com wordpress themes

© 2012 - Marcelo Sabadini - Design por WPThemeDesigner.com - Tradução por Wordpress-Love.com. - Star Host Hospedagem de Sites