netbeans.apache.org/src/content/kb/docs/php/wish-list-lesson8_pt_BR.asciidoc - netbeans-website - Git at Google

 //
 //     Licensed to the Apache Software Foundation (ASF) under one
 //     or more contributor license agreements.  See the NOTICE file
 //     distributed with this work for additional information
 //     regarding copyright ownership.  The ASF licenses this file
 //     to you under the Apache License, Version 2.0 (the
 //     "License"); you may not use this file except in compliance
 //     with the License.  You may obtain a copy of the License at
 //
 //       http://www.apache.org/licenses/LICENSE-2.0
 //
 //     Unless required by applicable law or agreed to in writing,
 //     software distributed under the License is distributed on an
 //     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 //     KIND, either express or implied.  See the License for the
 //     specific language governing permissions and limitations
 //     under the License.
 //

 = Criando uma Aplicação Orientada pelo Banco de Dados com o PHP
 :jbake-type: tutorial
 :jbake-tags: tutorials
 :jbake-status: published
 :icons: font
 :syntax: true
 :source-highlighter: pygments
 :toc: left
 :toc-title:
 :description: Criando uma Aplicação Orientada pelo Banco de Dados com o PHP - Apache NetBeans
 :keywords: Apache NetBeans, Tutorials, 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
 :jbake-type: tutorial
 :jbake-tags: tutorials
 :jbake-status: published
 :icons: font
 :syntax: true
 :source-highlighter: pygments
 :toc: left
 :toc-title:
 :description: Lição 8: Melhorando a Aparência da Aplicação Usando a Tecnologia CSS - Apache NetBeans
 :keywords: Apache NetBeans, Tutorials, Lição 8: Melhorando a Aparência da Aplicação Usando a Tecnologia CSS


 image::images/netbeans-stamp-80-74-73.png[title="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:


 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 link:https://netbeans.org/files/documents/4/1933/lesson7.zip[+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 link:https://netbeans.org/projects/www/downloads/download/php%252Foracle-lesson7.zip[+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. <<javaScriptFunctions,Desenvolva duas funções JavaScript dentro das tags <script></script>>>.
 3. <<showHideLogonInIndex,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>:


 [source,xml]
 ----

 <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 form de log-in:

 [source,php]
 ----

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

 [start=2]
 . Digite o seguinte código acima do código do form de entrada de log-in:

 [source,php]
 ----

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

 [start=3]
 . Adicione um atributo  `style`  ao form wishList:

 [source,xml]
 ----

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

 [start=4]
 . Digite o seguinte código acima do form WishList:

 [source,xml]
 ----

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

 [start=5]
 . Remova o seguinte código do form porque ele já foi colocado no botão:

 [source,php]
 ----

 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

 1. 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.
 2. No painel Folha de Estilo em Cascata, na caixa de edição Nome do Arquivo, digite wishlist. Clique em Finalizar.

 image::images/newCascadingStyleSheetFile.png[]

 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 link:https://netbeans.org/files/documents/4/1934/lesson8.zip[+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` .

 1. Para ativar o uso de classes CSS que você definiu, digite o seguinte código no bloco  `<head></head>` :

 [source,html]
 ----

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

 [start=2]
 . Para aplicar outro estilo (classe) em uma área, circunde o código que implementa a área com as tags  `<div class=""></div>` :

 [source,html]
 ----

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


 [start=3]
 . Você pode usar tags <div> incorporadas:

 [source,html]
 ----

 <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 link:http://www.htmlpedia.org/wiki/List_of_CSS_Properties[+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 link:https://netbeans.org/files/documents/4/1934/lesson8.zip[+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 link:https://netbeans.org/projects/www/downloads/download/php%252Foracle-lesson8.zip[+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 link:https://netbeans.org/projects/www/downloads/download/php/wishlist-pdo.zip[+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

 link:wish-list-lesson7.html[+<< Lição anterior+]

 link:wish-list-lesson9.html[+Próxima lição >>+]

 link:wish-list-tutorial-main-page.html[+Voltar à página principal do Tutorial+]


 link:/about/contact_form.html?to=3&subject=Feedback:%20PHP%20Wish%20List%20CRUD%200:%20Using%20and%20CSS[+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, link:../../../community/lists/top.html[+junte-se à lista de correspondência users@php.netbeans.org+].

 link:../../trails/php.html[+Voltar à Trilha do Aprendizado PHP+]
	//
	// Licensed to the Apache Software Foundation (ASF) under one
	// or more contributor license agreements. See the NOTICE file
	// distributed with this work for additional information
	// regarding copyright ownership. The ASF licenses this file
	// to you under the Apache License, Version 2.0 (the
	// "License"); you may not use this file except in compliance
	// with the License. You may obtain a copy of the License at
	//
	// http://www.apache.org/licenses/LICENSE-2.0
	//
	// Unless required by applicable law or agreed to in writing,
	// software distributed under the License is distributed on an
	// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	// KIND, either express or implied. See the License for the
	// specific language governing permissions and limitations
	// under the License.
	//

	= Criando uma Aplicação Orientada pelo Banco de Dados com o PHP
	:jbake-type: tutorial
	:jbake-tags: tutorials
	:jbake-status: published
	:icons: font
	:syntax: true
	:source-highlighter: pygments
	:toc: left
	:toc-title:
	:description: Criando uma Aplicação Orientada pelo Banco de Dados com o PHP - Apache NetBeans
	:keywords: Apache NetBeans, Tutorials, 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
	:jbake-type: tutorial
	:jbake-tags: tutorials
	:jbake-status: published
	:icons: font
	:syntax: true
	:source-highlighter: pygments
	:toc: left
	:toc-title:
	:description: Lição 8: Melhorando a Aparência da Aplicação Usando a Tecnologia CSS - Apache NetBeans
	:keywords: Apache NetBeans, Tutorials, Lição 8: Melhorando a Aparência da Aplicação Usando a Tecnologia CSS


	image::images/netbeans-stamp-80-74-73.png[title="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:


	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 link:https://netbeans.org/files/documents/4/1933/lesson7.zip[+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 link:https://netbeans.org/projects/www/downloads/download/php%252Foracle-lesson7.zip[+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. <<javaScriptFunctions,Desenvolva duas funções JavaScript dentro das tags <script></script>>>.
	3. <<showHideLogonInIndex,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>:


	[source,xml]
	----

	<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 form de log-in:

	[source,php]
	----

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

	[start=2]
	. Digite o seguinte código acima do código do form de entrada de log-in:

	[source,php]
	----

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

	[start=3]
	. Adicione um atributo `style` ao form wishList:

	[source,xml]
	----

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

	[start=4]
	. Digite o seguinte código acima do form WishList:

	[source,xml]
	----

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

	[start=5]
	. Remova o seguinte código do form porque ele já foi colocado no botão:

	[source,php]
	----

	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

	1. 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.
	2. No painel Folha de Estilo em Cascata, na caixa de edição Nome do Arquivo, digite wishlist. Clique em Finalizar.

	image::images/newCascadingStyleSheetFile.png[]

	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 link:https://netbeans.org/files/documents/4/1934/lesson8.zip[+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` .

	1. Para ativar o uso de classes CSS que você definiu, digite o seguinte código no bloco `<head></head>` :

	[source,html]
	----

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

	[start=2]
	. Para aplicar outro estilo (classe) em uma área, circunde o código que implementa a área com as tags `<div class=""></div>` :

	[source,html]
	----

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


	[start=3]
	. Você pode usar tags <div> incorporadas:

	[source,html]
	----

	<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 link:http://www.htmlpedia.org/wiki/List_of_CSS_Properties[+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 link:https://netbeans.org/files/documents/4/1934/lesson8.zip[+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 link:https://netbeans.org/projects/www/downloads/download/php%252Foracle-lesson8.zip[+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 link:https://netbeans.org/projects/www/downloads/download/php/wishlist-pdo.zip[+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

	link:wish-list-lesson7.html[+<< Lição anterior+]

	link:wish-list-lesson9.html[+Próxima lição >>+]

	link:wish-list-tutorial-main-page.html[+Voltar à página principal do Tutorial+]


	link:/about/contact_form.html?to=3&subject=Feedback:%20PHP%20Wish%20List%20CRUD%200:%20Using%20and%20CSS[+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, link:../../../community/lists/top.html[+junte-se à lista de correspondência users@php.netbeans.org+].

	link:../../trails/php.html[+Voltar à Trilha do Aprendizado PHP+]