corner imagecorner image
IDEPlatformPluginsDocs & SupportCommunityPartners

Criando um aplicativo direcionado a banco de dados com o PHP

Lição 8: Melhorando a aparência do aplicativo usando a tecnologia CSS

O conteúdo desta página se aplica ao NetBeans IDE 6.9-7.0O conteúdo desta página se aplica ao NetBeans IDE 6.9-7.0" title="

Nesta lição, você aprenderá a fazer o seguinte:

O documento atual é uma parte do tutorial Criando um aplicativo CRUD no NetBeans IDE para PHP.


Código-fonte do aplicativo da lição anterior

Usuários MySQL: clique aqui para baixar o código-fonte que reflete o estado do projeto depois que a lição anterior estiver concluída.

Usuários do banco de dados Oracle: clique aqui para baixar o código-fonte que reflete o estado do projeto depois que a lição anterior estiver concluída.

Ocultando formulários

Atualmente, a página principal index.php do aplicativo sempre exibe o logon completo e formulários showWishList. Para aprimorar a aparência do aplicativo, você pode ocultar os formulários e substitui-los por botões. Quando o usuário pressionar um botão, o formulário oculto correspondente expandirá.

Para implementar este comportamento:

  1. Adicione um bloco <script></script> ao arquivo index.php logo acima da marca </body> de encerramento.
  2. Desenvolva duas funções JavaScript dentro dos identificadores <script></script>.
  3. Faça algumas pequenas alterações no arquivo index.php

Funções JavaScript

As funções JavaScript não requerem parâmetros de entrada e não retornam quaisquer resultados. O código a seguir verifica o status de visibilidade do formulário correspondente e o altera para o status oposto. Ele também altera o texto no botão. Para realizar essas alterações, insira o seguinte código dentro das marcas <script></script>:

<script>
function showHideLogonForm() {
    if (document.all.logon.style.visibility == "visible"){
        document.all.logon.style.visibility = "hidden";
        document.all.myWishList.value = "My Wishlist >>";
    } 
    else {
        document.all.logon.style.visibility = "visible";
        document.all.myWishList.value = "<< My Wishlist";
    }
}
function showHideShowWishListForm() {
    if (document.all.wishList.style.visibility == "visible") {
        document.all.wishList.style.visibility = "hidden";
        document.all.showWishList.value = "Show Wish List of >>";
    }
    else {
        document.all.wishList.style.visibility = "visible";
        document.all.showWishList.value = "<< Show Wish List of";
    }
}
</script>

Atualizando o index.php

  1. Adicione um atributo style ao formulário de logon: 
    <form name="logon" action="index.php" method="POST" 
        style="visibility:<?php if ($logonSuccess) echo "hidden";
        else echo "visible";?>">
    O atributo style define se o formulário está oculto ou visível. O bloco <?php ?> é usado para manter o formulário visível até que o usuário efetue logon com êxito.
  2. Insira o seguinte código acima do código do formulário de entrada de logon: 
     <input type="submit" name="myWishList" value="My Wishlist >>" onclick="javascript:showHideLogonForm()"/>
    O código implementa um botão com o texto "My Wishlist >>". O botão fica no lugar do formulário de logon. Se você pressionar o botão, a função showHideLogonForm é chamada.
  3. Adicione um atributo style ao formulário: 
    <form name="wishList" action="wishlist.php" method="GET" style="visibility:hidden">
Show wish list of: <input type="text" name="user"/>
                <input type="submit" value="Go" />
    </form>
  4. Insira o seguinte código acima do formulário WishList: 
    <input type="submit" name="showWishList" value="Show Wish List of >>" onclick="javascript:showHideShowWishListForm()"/>
  5. Remova o seguinte código do formulário porque ele já foi colocado no botão: 
    Show wishlist of:

Definindo estilos usando a folha de estilo em cascata

Atualmente, os controles no aplicativo estão "presos" uns aos outros e geralmente são colocados no canto superior esquerdo da tela. Para aprimorar a aparência das páginas do aplicativo, especifique o tamanho, a posição, cor, fonte e outros parâmetros dos controles definindo estilos e atribuindo esses estilos a controles em particular. Os estilos são definidos em um arquivo de folha de estilo em cascata (CSS) separado.

Todas as recomendações e sugestões a respeito do design do aplicativo são opcionais. As definições de estilo abaixo têm o objetivo apenas de fornecer um exemplo de como melhorar a aparência do aplicativo. As configurações são apropriadas para resolução de tela de 1024x768 pixels ou superior.

Criando um arquivo CSS

  1. Clique com o botão direito do mouse no nó dos arquivos de código-fonte e, no menu de contexto, escolha Novo > Folha de estilos em cascata.
  2. No painel Folha de estilo em cascata, na caixa de edição Nome do arquivo, insira wishlist. Clique em Terminar.
    Painel Novo arquivo CSS
    O novo arquivo wishlist.css é mostrado na árvore do projeto.

Definindo estilos CSS

O NetBeans IDE fornece uma ferramenta amigável de geração de código Construtor de estilo que permite que você defina estilos. Basta escolher a configuração apropriada de uma lista e avaliar a apresentação do texto de exemplo na área Visualizar. O código para implementar o estilo é gerado automaticamente. Todas as alterações feitas em um estilo são refletidas imediatamente para que você possa adequar a aparência do aplicativo ao seu gosto e aos seus hábitos.

Abra o arquivo wishlist.css. O arquivo já contém uma classe "root", que pode ser removida. É possível fazer uma cópia do wishlist.css, faça download da versão completa deste tutorial, disponível aqui. O código é intuitivamente claro e contém:
  • Dois estilos: "body" e "input" - que são aplicados automaticamente dentro de qualquer marca <body></body> ou <input/>.
  • Classes CSS que são aplicadas quando especificadas explicitamente. Os nomes das classes possuem pontos na frente, por exemplo,.createWishList. Algumas classes são usadas várias vezes, por exemplo, a classe ".error" é aplicada em todas as mensagens de erro no aplicativo. Outras classes são usadas apenas uma vez, por exemplo, ".showWishList", ".logon".

Implementando o design usando divs de HTML

Todas as recomendações e sugestões a respeito do design do aplicativo são opcionais. Como as definições de estilo acima, elas têm o objetivo apenas de dar um exemplo de como aprimorar a aparência do aplicativo.

O exemplo abaixo mostra como você pode aprimorar a aparência da página index.php.

  1. Para habilitar o uso de classes CSS que você tenha definido, insira o seguinte código no bloco <head></head>: 
         <link href="wishlist.css" type="text/css" rel="stylesheet" media="all" />
    Os estilos "body" e "input" são aplicados automaticamente dentro das marcas correspondentes, assim, você precisa indicá-los explicitamente.
  2. Para aplicar outro estilo (classe) em uma área, coloque o código que implementa a área nas marcas <div class=""></div>: 
     <div class="showWishList">
                <input type="submit" name="showWishList" value="Show Wish List of >>" onclick="javascript:showHideShowWishListForm()"/>
                
                <form name="wishList" action="wishlist.php" method="GET" style="visibility:hidden">
                   <input type="text" name="user"/>
                   <input type="submit" value="Go" />
                </form>
    </div>

    Observação:quando uma classe é especificada dentro de um identificador <div> , não é necessário um ponto na frente.

  3. Você pode usar marcas <div> incorporadas: 
    <div class="logon">
         <input type="submit" name="myWishList" value="My Wishlist >>" onclick="javascript:showHideLogonForm()"/>
                <form name="logon" action="index.php" method="POST" 
                          style="visibility:<?php if ($logonSuccess) echo "hidden"; else echo "visible";?>">
                    Username: <input type="text" name="user"/>
                    Password:  <input type="password" name="userpassword"/><br/>
                    <div class="error">
                      <?php
                         if (!$logonSuccess) echo "Invalid name and/or password";
                       ?>
                    </div>
                    <input type="submit" value="Edit My Wish List"/>
                </form>
    </div>
    A classe "logon" é aplicada em todo o formulário e a classe "error" é aplicada em uma mensagem de erro no formulário.

Para obter mais detalhes sobre o uso de folhas de estilo em cascata (CSS), consulte http://www.htmlpedia.org/wiki/List_of_CSS_Properties

O código-fonte do aplicativo após a lição atual está concluído

Usuários do MySQL: clique aqui para baixar o código-fonte que inclui o projeto exemplo e o arquivo CSS.

Usuários do Banco de dados Oracle: Clique aqui para baixar o código-fonte que inclui o projeto exemplo e o arquivo CSS.

PDO: Goran Miskovic, um membro da comunidade, forneceu uma versão PDO deste tutorial completo, disponível aqui. Nesse projeto, é possível alternar entre Oracle XE e bancos de dados MySQL ao trocar o parâmetro DSN. O projeto inclui todos os scritps SQL necessários e a documentação está no código. Observe no entanto que o PDO_OCI é experimental.

A equipe NetBeans IDE gostaria de agradecer Ozan Hazer pela contribuição do CSS e o aprimoramento do código no exemplo completo.

Próximas etapas

<< Lição anterior

Próxima lição >>

Voltar à página principal do tutorial



Para enviar comentários e sugestões, obter suporte e manter-se informado sobre os desenvolvimentos mais recentes dos recursos de desenvolvimento em PHP no NetBeans IDE, junte-se à lista de usuários .

Voltar à trilha do aprendizado PHP