Criando uma Aplicação Orientada pelo Banco de Dados com o PHP

Lição 8: Melhorando a Aparência da Aplicação Usando a Tecnologia CSS

Conteúdo do tutorial:

O conteúdo desta página se aplica ao NetBeans IDE 7.2, 7.3, 7.4 e 8.0

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

Ocultar forms de entrada quando eles não forem usados, implementando funções JavaScript
Definir os estilos e o posicionamento dos elementos da página aplicando a Folha de Estilo em Cascata
Implementar o design da aplicação usando divs.

O documento atual é uma parte do tutorial Criando uma Aplicação CRUD no NetBeans IDE para PHP.

Código-fonte da Aplicação da Lição Anterior

Usuários MySQL: clique aqui para fazer o download do 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 fazer o download do código-fonte que reflete o estado do projeto depois que a lição anterior for concluída.

Ocultando Forms

Atualmente, a página principal index.php da aplicação sempre exibe o log-in completo e forms showWishList. Para aprimorar a aparência da aplicação, você pode ocultar os forms e substitui-los por botões. Quando o usuário pressionar um botão, o form oculto correspondente expandirá.

Para implementar esse comportamento:

Adicione um bloco <script></script> ao arquivo index.php logo acima da tag </body> de encerramento.
Desenvolva duas funções JavaScript dentro das tags <script></script>.
Faça algumas pequenas alterações no arquivo index.php

Funções JavaScript

As funções JavaScript não requerem nenhum parâmetro de entrada e não retornam nenhum resultado. O código a seguir verifica o status de visibilidade do form correspondente e o altera para o status oposto. Ele também altera o texto no botão. Para realizar essas alterações, digite o seguinte código dentro das tags <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`

Adicione um atributo style ao form de log-in:
```
<form name="logon" action="index.php" method="POST" 
        style="visibility:<?php if ($logonSuccess) echo "hidden";
        else echo "visible";?>">
```
O atributo style define se o form está oculto ou visível. O bloco <?php ?> é usado para manter o form visível até que o usuário efetue log-in com êxito.
Digite o seguinte código acima do código do form de entrada de log-in:
```
 <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 form de log-in. Se você pressionar o botão, a função showHideLog-inForm será chamada.

Adicione um atributo style ao form wishList:

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

Digite o seguinte código acima do form WishList:

<input type="submit" name="showWishList" value="Show Wish List of >>" onclick="javascript:showHideShowWishListForm()"/>

Remova o seguinte código do form porque ele já foi colocado no botão:
```
Show wishlist of: 
```

Definindo Estilos Usando a Folha de Estilo em Cascata

Atualmente, os controles na aplicação estão "presos" uns aos outros e geralmente são colocados no canto esquerdo superior da tela. Para aprimorar a aparência das páginas da aplicação, especifique o tamanho, a posição, cor, fonte e outros parâmetros dos controles definindo estilos e designando esses estilos a controles específicos. 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 da aplicação são opcionais. As definições de estilo abaixo têm o objetivo apenas de fornecer um exemplo de como melhorar a aparência da aplicação. As definições são apropriadas para resolução de tela de 1024x768 pixels ou superior.

Criando um Arquivo CSS

Clique com o botão direito do mouse no nó dos Arquivos de Código-Fonte e, no menu de contexto, selecione Novo > Folha de Estilos em Cascata.
No painel Folha de Estilo em Cascata, na caixa de edição Nome do Arquivo, digite wishlist. Clique em Finalizar.

O novo arquivo wishlist.css é mostrado na árvore do projeto.

Definindo Estilos CSS

Abra o arquivo wishlist.css. O arquivo já contém uma classe "root", que pode ser removida. Você pode obter uma cópia do wishlist.css fazendo 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 tag <body></body> ou <input/>.
Classes CSS que são aplicadas quando especificadas explicitamente. Os nomes das classes têm pontos na frente, por exemplo,.createWishList. Algumas classes são usadas várias vezes, por exemplo, a classe ".error" é aplicada a todas as mensagens de erro na aplicação. 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 da aplicação 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 da aplicação.

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

Para ativar o uso de classes CSS que você definiu, digite 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 tags correspondentes, assim, você precisa indicá-los explicitamente.

Para aplicar outro estilo (classe) em uma área, circunde o código que implementa a área com as tags <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 uma tag <div> , não é necessário um ponto na frente.

Você pode usar tags <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 form e a classe "error" é aplicada em uma mensagem de erro no form.

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 da Aplicação após a Lição Atual está Concluído

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

Usuários do Banco de Dados Oracle: clique aqui para baixar o código-fonte que inclui o design 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, você pode 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 está documentado 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 concluído.

Próximas Etapas

<< Lição anterior

Próxima lição >>

Voltar à página principal do Tutorial

Enviar Feedback neste Tutorial

Para enviar comentários e sugestões, obter suporte e manter-se informado sobre os desenvolvimentos mais recentes das funcionalidades de desenvolvimento PHP do NetBeans IDE, junte-se à lista de correspondência .

Voltar à Trilha do Aprendizado PHP