PageRenderTime 45ms CodeModel.GetById 17ms RepoModel.GetById 0ms app.codeStats 0ms

/docs/guide-pt-BR/start-forms.md

https://gitlab.com/brucealdridge/yii2
Markdown | 271 lines | 203 code | 68 blank | 0 comment | 0 complexity | 774fe657efc7492430b431b260f684b3 MD5 | raw file
  1. Trabalhando com Formulários
  2. ===========================
  3. Nesta seção descreve como se cria uma nova página com um formulário para obter
  4. dados a partir dos usuários. A página exibirá uma formulário com um campo para
  5. o nome e uma para o e-mail. Depois de obter essas duas informações a partir do
  6. usuário, a página exibirá os valores inseridos de volta para a confirmação.
  7. Para atingir este objetivo, além de criar uma [ação](structure-controllers.md) (action) e
  8. duas [visões](structure-views.md) (view), você também criará uma [modelo](structure-models.md) (model).
  9. Através deste tutorial, você aprenderá como:
  10. * Criar um [modelo](structure-models.md) (model) para representar os dados inseridos pelo usuário por meio de um formulário
  11. * Declarar regras (rules) para validar os dados inseridos
  12. * Criar um formulário HTML em uma [visão](structure-views.md) (view)
  13. Criando uma Modelo (Model) <span id="creating-model"></span>
  14. ----------------
  15. Os dados a serem solicitados pelo usuário será representados por uma classe modelo
  16. `EntryForm` como mostro a seguir e salvos no arquivo `models/EntryForm.php`. Por
  17. favor consulte a seção [Autoloading de Classes](concept-autoloading.md) para mais
  18. detalhes sobre convenção de nomenclatura dos arquivos de classes.
  19. ```php
  20. <?php
  21. namespace app\models;
  22. use Yii;
  23. use yii\base\Model;
  24. class EntryForm extends Model
  25. {
  26. public $name;
  27. public $email;
  28. public function rules()
  29. {
  30. return [
  31. [['name', 'email'], 'required'],
  32. ['email', 'email'],
  33. ];
  34. }
  35. }
  36. ```
  37. A classe estende de [[yii\base\Model]], uma classe base fornecida pelo Yii,
  38. comumente usados para representar dados do formulário.
  39. > Informação: O [[yii\base\Model]] é usado como pai das classes modelos que *não*
  40. são associadas com tabelas do banco de dados.
  41. O [[yii\db\ActiveRecord]] é normalmente usado como pai das classes modelos que
  42. correspondem a tabelas do banco de dados.
  43. A classe `EntryForm` contém dois atributos públicos, `name` e `email`, que são
  44. usados para guardar os dados fornecidos pelo usuário. Ele também contém um método
  45. chamado `rules()`, que retorna um conjunto de regras para validação dos dados.
  46. As regras de validação declaradas no código acima permitem que:
  47. * tanto os valores do `name` quanto do `email` sejam obrigatórios
  48. * os dados do `email` devem ser um e-mail válido sintaticamente
  49. Se você tiver um objeto `EntryForm` populado com dados fornecidos pelo usuário,
  50. você pode chamar o [[yii\base\Model::validate()|validate()]] para iniciar as
  51. rotinas de validação dos dados. A validação dos dados falhar, a propriedade
  52. [[yii\base\Model::hasErrors|hasErrors]] será definida como *true* e você pode
  53. saber quais erros ocorrerão pela validação através de [[yii\base\Model::getErrors|errors]].
  54. ```php
  55. <?php
  56. $model = new EntryForm();
  57. $model->name = 'Qiang';
  58. $model->email = 'bad';
  59. if ($model->validate()) {
  60. // Bom!
  61. } else {
  62. // Falha!
  63. // Utilize $model->getErrors()
  64. }
  65. ```
  66. Criando uma Ação <span id="creating-action"></span>
  67. ------------------
  68. Em seguida, você precisará criar uma ação `entry` no controlador `site` que será usado no novo modelo. O processo de criação e utilização das ações são explicadas na seção
  69. [Como Fazer um "Hello World"](start-hello.md).
  70. ```php
  71. <?php
  72. namespace app\controllers;
  73. use Yii;
  74. use yii\web\Controller;
  75. use app\models\EntryForm;
  76. class SiteController extends Controller
  77. {
  78. // ...código existente...
  79. public function actionEntry()
  80. {
  81. $model = new EntryForm();
  82. if ($model->load(Yii::$app->request->post()) && $model->validate()) {
  83. // dados válidos recebidos pelo $model
  84. // fazer alguma coisa aqui sobre $model ...
  85. return $this->render('entry-confirm', ['model' => $model]);
  86. } else {
  87. // Ou a página é exibida inicialmente ou existe algum erro de validação
  88. return $this->render('entry', ['model' => $model]);
  89. }
  90. }
  91. }
  92. ```
  93. A primeira ação cria um objeto `EntryForm`. Ele, então, tenta popular o modelo
  94. (model) com os dados vindos do `$_POST`, fornecidos pelo [[yii\web\Request::post()]]
  95. no Yii. Se o modelo (model) for populado com sucesso (por exemplo, se o usuário
  96. enviar o formulário HTML), a ação chamará o [[yii\base\Model::validate()|validate()]]
  97. para certifique-se que os valores fornecidos são válidos.
  98. > Informação: A expressão `Yii::$app` representa a instância da
  99. [aplicação](structure-applications.md), que é globalmente acessível via singleton.
  100. Também é um [service locator](concept-service-locator.md) que fornece componentes
  101. tais como `request`, `response`, `db`, etc. para suportar a funcionalidade específica.
  102. No código acima, o componente `request` da instância da aplicação é usada para
  103. acessar os dados do `$_POST`.
  104. Se tudo tiver certo, a ação renderizará a visão chamada `entry-confirm` para
  105. confirmar os dados enviados pelo usuário. Se ao enviar o formulário não
  106. houver dados ou se os dados tiverem erros, a visão `entry` será renderizada,
  107. em que o formulário será exibigo, juntamente com as mensagens de erros da
  108. validação.
  109. > Nota: Neste exemplo muito simples, acabamos de renderizar um página de confirmação
  110. mediante a dados válidos enviados de uma formulário. Em prática, você poderia
  111. considerar usar [[yii\web\Controller::refresh()|refresh()]] ou [[yii\web\Controller::redirect()|redirect()]]
  112. para evitar [problemas ao reenviar formulários](http://en.wikipedia.org/wiki/Post/Redirect/Get).
  113. Criando Visões <span id="creating-views"></span>
  114. --------------
  115. Finalmente, crie dois arquivos de visões chamados de `entry-confirm` e `entry`.
  116. Estas visões serão renderizados pela ação `entry`, como descrito anteriormente.
  117. A visão `entry-confirm` simplesmente exibe os dados dos campos `name` e `email`.
  118. Deverá ser salvo no arquivo `views/site/entry-confirm.php`.
  119. ```php
  120. <?php
  121. use yii\helpers\Html;
  122. ?>
  123. <p>You have entered the following information:</p>
  124. <ul>
  125. <li><label>Name</label>: <?= Html::encode($model->name) ?></li>
  126. <li><label>Email</label>: <?= Html::encode($model->email) ?></li>
  127. </ul>
  128. ```
  129. A visão `entry` exibe um formulário HTML. Deverá ser salvo no arquivo `views/site/entry.php`.
  130. ```php
  131. <?php
  132. use yii\helpers\Html;
  133. use yii\widgets\ActiveForm;
  134. ?>
  135. <?php $form = ActiveForm::begin(); ?>
  136. <?= $form->field($model, 'name') ?>
  137. <?= $form->field($model, 'email') ?>
  138. <div class="form-group">
  139. <?= Html::submitButton('Submit', ['class' => 'btn btn-primary']) ?>
  140. </div>
  141. <?php ActiveForm::end(); ?>
  142. ```
  143. A visão usa o poderoso [widget](structure-widgets.md) chamado
  144. [[yii\widgets\ActiveForm|ActiveForm]] para criar o formulário HTML. Os métodos
  145. `begin()` e `end()` do widget renderizam a abertura e o fechamento da tag do
  146. formulário. Entre os dois métodos chamados, os campos de entrada são criados pelo
  147. método [[yii\widgets\ActiveForm::field()|field()]]. O primeiro campo de entrada
  148. é para o "name" (nome) e o segundo é para o "email". Após os campos de entrada,
  149. o método [[yii\helpers\Html::submitButton()]] é chamado para criar o botão
  150. de enviar.
  151. Testando <span id="trying-it-out"></span>
  152. -------------
  153. Para ver como ele funciona, utilize seu navegador para acessar a seguinte URL:
  154. ```
  155. http://hostname/index.php?r=site/entry
  156. ```
  157. Você verá uma página exibindo um formulário com dois campos de entrada. Na frente
  158. de cada campo, um *label* indicando quais dados devem ser inseridos. Se você clicar
  159. no botão de enviar sem informar nenhum dado, ou se você não fornecer um e-mail
  160. válido, você verá uma mensagem de erro após cada campo de entrada.
  161. ![Form with Validation Errors](images/start-form-validation.png)
  162. Após informar um nome e e-mail válidos e clicar no botão de enviar, você verá uma
  163. nova página exibindo os dados informados por você.
  164. ![Confirmation of Data Entry](images/start-entry-confirmation.png)
  165. ### Explicação da Mágica <span id="magic-explained"></span>
  166. Você pode querer saber como o formulário HTML trabalha por baixo dos panos, porque
  167. parece quase mágica exibir um *label* para cada campo de entrada e mostrar mensagens
  168. de erro quando você não informa dados corretos sem recarregar a página.
  169. Sim, a validação dos dados inicialmente é feito no lado do cliente usando JavaScript
  170. e posteriormente realizada no lado do servidor via PHP.
  171. O [[yii\widgets\ActiveForm]] é inteligente o suficiente para extrair as regras de
  172. validação declaradas no `EntryForm`, transformando-as em códigos JavaScript e utilizando
  173. o JavaScript para realizar as validações dos dados. No caso do JavaScript estiver desabilitado
  174. em seu navegador, a validação ainda será realizada pelo lado do servidor, como mostrado
  175. no método `actionEntry()`. Isso garante que os dados serão validados em qualquer
  176. circunstância.
  177. > Aviso: A validação feita pelo lado do cliente é uma conveniência que fornece uma melhor
  178. experiência para o usuário. A validação feita pelo lado do servidor é sempre necessária
  179. com ou sem validação no lado do cliente.
  180. Os *labels* dos campos de entrada são geradas pelo método `field()`, usando os nomes
  181. das propriedades do modelo (model).
  182. Por exemplo, um *label* chamado `Name` será gerado para a propriedade `name`.
  183. Você pode personalizar um *label* em uma visão utilizando o seguinte código:
  184. ```php
  185. <?= $form->field($model, 'name')->label('Your Name') ?>
  186. <?= $form->field($model, 'email')->label('Your Email') ?>
  187. ```
  188. > Informação: O Yii fornece muitos destes widgets para lhe ajudar a criar rapidamente
  189. complexas e dinâmicos layouts.
  190. Como você vai aprender mais tarde, escrever um novo widget é também extremamenet fácil.
  191. Você pode querer transformar grande parte do seu código de visão em reutilizáveis
  192. widget para simplificar o desenvolvimento de visões no futuro.
  193. Resumo <span id="summary"></span>
  194. -------
  195. Nesta seção, você tocou em cada parte do padrão de arquitetura MVC.
  196. Aprendeu como criar uma classe modelo (model) para representar os dados do usuário
  197. e validá-los.
  198. Também aprendeu como obter os dados enviados pelos usuários e como exibi-los de
  199. volta no navegador. Esta é uma tarefa que poderia levar muito tempo ao desenvolver
  200. uma aplicação, mas o Yii fornece widgets inteligentes para gerar estas tarefas de
  201. forma simples.
  202. Na próxima seção, você aprenderá como trabalhar com banco de dados, os quais são
  203. necessários em quase todas as aplicações.