Criando uma Aplicação Orientada pelo Banco de Dados Com o PHP. U...

https://netbeans.org/kb/docs/php/wish-list-lesson8_pt_BR.html?print=yes

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: 0. Criando uma Aplicação Orientada pelo Banco de Dados com o PHP - Página Principal 1. Criando o Banco de Dados a. Criando um Banco de Dados MySQL b. Criando Tabelas do Banco de Dados Oracle 2. Projetando a Aplicação. Lendo o Banco de Dados 3. 4. 5. 6. 7. Criando um Novo Usuário de Aplicação Otimizando o Código Adicionando Segurança. Implementando o Log-in de Usuário da Aplicação Adicionando um Novo Desejo ao Banco de Dados Atualizando e Deletando Entradas no Banco de Dados

8. => Melhorando a Aparência da Aplicação Usando a Tecnologia CSS Código-fonte da Aplicação da Lição Anterior Ocultando Forms Funções JavaScript Atualizando o index.php Definindo Estilos Usando a Folha de Estilo em Cascata Criando um Arquivo CSS Definindo Estilos CSS Implementando o Design Usando Divs de HTML O Código-fonte da Aplicação após a Lição Atual está Concluído Próximas Etapas 9. Implantando a Aplicação em um Servidor Web Remoto

Nesta lição, você aprenderá a fazer o seguinte: Ocultar forms de entrada quando eles não forem usados, implementando funções JavaScript Aprimorar a aparência de tabelas com células vazias. 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: 1. Adicione um bloco <script></script> ao arquivo index.php logo acima da tag </body> de encerramento. 2. Desenvolva duas funções JavaScript dentro das tags <script></script>. 3. 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 {

1 de 3

17/09/2013 13:14

value = "<< Show Wish List of". Clique em Finalizar. As definições são apropriadas para resolução de tela de 1024x768 pixels ou superior. O código para implementar o estilo será gerado automaticamente. disponível aqui. Outras classes são usadas apenas uma vez.visibility = "hidden".style. Os estilos são definidos em um arquivo de Folha de Estilo em Cascata (CSS) separado.visibility = "visible". https://netbeans. 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. O botão fica no lugar do form de log-in.all. document. na caixa de edição Nome do Arquivo.wishList. a classe ". ".style. por exemplo.. U. que pode ser removida.logon".style. Adicione um atributo style ao form wishList: <form name="wishList" action="wishlist. else echo "visible". cor. document. As definições de estilo abaixo têm o objetivo apenas de fornecer um exemplo de como melhorar a aparência da aplicação. Todas as recomendações e sugestões a respeito do design da aplicação são opcionais.showWishList. Abra o arquivo wishlist. O arquivo já contém uma classe "root". especifique o tamanho. os controles na aplicação estão "presos" uns aos outros e geralmente são colocados no canto esquerdo superior da tela. Algumas classes são usadas várias vezes. Os nomes das classes têm pontos na frente. O bloco <?php ?> é usado para manter o form visível até que o usuário efetue log-in com êxito.logon.all. ".org/kb/docs/php/wish-list-lesson8_pt_BR. digite wishlist. Clique com o botão direito do mouse no nó dos Arquivos de Código-Fonte e.Criando uma Aplicação Orientada pelo Banco de Dados Com o PHP. selecione Novo > Folha de Estilos em Cascata. 2. 2 de 3 17/09/2013 13:14 . 3.visibility = "visible".myWishList.all.all. 2.php 1. No painel Folha de Estilo em Cascata.?>"> O atributo style define se o form está oculto ou visível.all. Você pode obter uma cópia do wishlist.error" é aplicada a todas as mensagens de erro na aplicação. fonte e outros parâmetros dos controles definindo estilos e designando esses estilos a controles específicos. document.css fazendo download da versão completa deste tutorial. 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. a posição.wishList. O código é intuitivamente claro e contém: Dois estilos: "body" e "input" . Classes CSS que são aplicadas quando especificadas explicitamente..all. } } </script> Atualizando o index.wishList.html?print=yes document.visibility == "visible") { document. Todas as alterações feitas em um estilo são refletidas imediatamente para que você possa adequar a aparência da aplicação ao seu gosto e aos seus hábitos.. } else { document. por exemplo.value = "<< My Wishlist". a função showHideLog-inForm será chamada.value = "Show Wish List of >>". Digite o seguinte código acima do form WishList: <input type="submit" name="showWishList" value="Show Wish List of >>" onclick="javascript:showHideShowWishListForm()"/> 5. por exemplo. } } function showHideShowWishListForm() { if (document. Adicione um atributo style ao form de log-in: <form name="logon" action="index.css.php" method="POST" style="visibility:<?php if ($logonSuccess) echo "hidden".createWishList. no menu de contexto. Para aprimorar a aparência das páginas da aplicação.showWishList". Criando um Arquivo CSS 1. 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 >>".que são aplicados automaticamente dentro de qualquer tag <body></body> ou <input/>. O novo arquivo wishlist.style.css é mostrado na árvore do projeto. Basta escolher a definição apropriada de uma lista e avaliar a apresentação do texto de exemplo na área Visualizar.php" method="GET" style="visibility:hidden"> Show wish list of: <input type="text" name="user"/> <input type="submit" value="Go" /> </form> 4.all. Se você pressionar o botão.showWishList.

else echo "visible". Para ativar o uso de classes CSS que você definiu.?>"> 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". você precisa indicá-los explicitamente. obter suporte e manter-se informado sobre os desenvolvimentos mais recentes das funcionalidades de desenvolvimento PHP do NetBeans IDE. 1. forneceu uma versão PDO deste tutorial completo. assim.org. 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. PDO: Goran Miskovic. consulte http://www.org/kb/docs/php/wish-list-lesson8_pt_BR..htmlpedia. Para aplicar outro estilo (classe) em uma área. digite o seguinte código no bloco <head></head>: <link href="wishlist.. 3.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. Nesse projeto. não é necessário um ponto na frente.php" method="POST" style="visibility:<?php if ($logonSuccess) echo "hidden". 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. Observe no entanto que o PDO_OCI é experimental. Usuários do Banco de Dados Oracle: clique aqui para baixar o código-fonte que inclui o design exemplo e o arquivo CSS. A equipe NetBeans IDE gostaria de agradecer Ozan Hazer pela contribuição do CSS e o aprimoramento do código no exemplo concluído. ?> </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. disponível aqui. Como as definições de estilo acima. U.css" type="text/css" rel="stylesheet" media="all" /> Os estilos "body" e "input" são aplicados automaticamente dentro das tags correspondentes. um membro da comunidade. você pode alternar entre Oracle XE e bancos de dados MySQL ao trocar o parâmetro DSN. 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. 2. O projeto inclui todos os scritps SQL necessários e está documentado no código. Voltar à Trilha do Aprendizado PHP 3 de 3 17/09/2013 13:14 .html?print=yes Implementando o Design Usando Divs de HTML Todas as recomendações e sugestões a respeito do design da aplicação são opcionais.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> .netbeans.Criando uma Aplicação Orientada pelo Banco de Dados Com o PHP. junte-se à lista de correspondência users@php. Para obter mais detalhes sobre o uso de Folhas de Estilo em Cascata (CSS). https://netbeans. Próximas Etapas << Lição anterior Próxima lição >> Voltar à página principal do Tutorial Envie-nos Seu Feedback Para enviar comentários e sugestões.