Criando uma Aplicação Orientada pelo Banco de Dados com o PHPLição 8: Melhorando a Aparência da Aplicação Usando a Tecnologia CSSConteúdo do tutorial:
![]() Nesta lição, você aprenderá a fazer o seguinte:
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 AnteriorUsuá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 FormsAtualmente, 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:
Funções JavaScriptAs 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
Definindo Estilos Usando a Folha de Estilo em CascataAtualmente, 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
Definindo Estilos CSSAbra 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:
Implementando o Design Usando Divs de HTMLTodas 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 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ídoUsuá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 EtapasVoltar à página principal do 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 . |
Documentation |