PI S7 DSW II DouglasARS: mudanças entre as edições

De IFSC
Ir para navegação Ir para pesquisar
imported>Douglas
imported>Douglas
 
(30 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 29: Linha 29:


Para baixar os arquivos clique em: [http://files.rafaelwendel.com/jquery.js jquery.js] e [http://files.rafaelwendel.com/jquery.maskedinput.js jquery.maskedinput.js].
Para baixar os arquivos clique em: [http://files.rafaelwendel.com/jquery.js jquery.js] e [http://files.rafaelwendel.com/jquery.maskedinput.js jquery.maskedinput.js].
O trecho do código abaixo exemplifica o uso da máscara em um arquivo de formulário. Coloquei até máscaras que ainda não utilizei para servirem de exemplo.
<pre>
[...]
</head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.maskedinput.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("input.data").mask("99/99/9999");
        $("input.cpf").mask("999999999-99");
        $("input.cep").mask("99999-999");
        $("input.telefone").mask("(99)9999-9999");
});
</script>
<body>
[...]
</pre>
<blockquote style="background: #FFEEFF; border: 1px solid red; margin-left: 0px; margin-right: 0px; padding: 1em;">
Notem que os arquivos '''jquery.js''' e '''jquery.maskedinput.js''' estão dentro da pasta '''scripts''' que eu criei dentro da pasta padrão da aplicação. Portanto, vocês devem indicar o local para onde foram copiados os arquivos para que as máscaras funcionem corretamente.
</blockquote>
;Como fica uso?
Para utilizar é simples. O trecho do código que mostra como chamar a máscara já criada para os campos de formulário pode ser visto em seguida.
<pre>
[...]
CEP:<input type="text" class="cep" name="cep" size="18" />
CPF:<input type="text" class="cpf" name="cpf" size="18" />
DATA:<input type="text" class="data" name="data" size="18" />
Telefone:<input type="text" class="telefone" name="telefone" size="18" />
Celular: <input type="text" class="telefone" name="celular" size="18" /></td></tr>
[...]
</pre>
<blockquote style="background: #FFEEFF; border: 1px solid red; margin-left: 0px; margin-right: 0px; padding: 1em;">
Observem que aquela propriedade '''size''' tem haver com o tamanho da área da tela, e não tem nada haver com total de caracteres.
</blockquote>


=Validação de Campos=
=Validação de Campos=


Existem algumas maneiras de se fazer a validação de campos de formulário. Entre elas estão a validação pela aplicação, assim que o formulário é submetido, ou pelo banco de dados, onde a tarefa se torna um pouco mais complexa, pois se tem que tratar erros da tentativa de gravar no banco e que pra maioria dos programadores iniciantes pode ser bastante complicado. Vamos optar por fazer a validação dos dados já nos campos de formulário antes de enviar para o banco de dados, mas lembre-se, quando na modelagem de banco ao se definir que um campo não pode aceitar nulo (not null), este deve ser tratado pela aplicação, pois senão, ao se tentar gravar dados no banco, vai retornar um erro e não se concretizará a gravação.
Existem técnicas utilizadas em sistemas que fazem a validação através de requisições (GET ou POST), dessa forma sempre que o usuário clicar em Salvar é feita uma requisição, processamento dos dados e então a validação. Essas validações através de requisições (refresh nas páginas) são utilizadas para processamentos que precisam de validações complexas. Coisas simples como: verificar se o nome está vazio, se o email é válido ou se a senha é segura podem ser feitas via JavaScript sem muito trabalho e ainda retornar a resposta ao usuário sem precisar dar um refresh na página, ou seja, em real-time.
==Validação de campos com Javascript==
Partindo do nosso '''sistema exemplo''' que é feito com HTML, CSS e PHP, vamos fazer as validações com JavaScript, para verificar se o usuário preencheu alguns campos. No script abaixo, vou mostrar um exemplo fazendo com que somente alguns campos sejam obrigatórios. Este script eu coloquei no arquivo '''funcoes.php''', mas poderia estar dentro do arquivo em que ele é utilizado. Lembre-se de chamar o arquivo através do '''include''' no PHP.
<pre>
<script type="text/javascript">
        function validaForm()
        {
            erro = false;
            if($('#nm_cliente').val() == '')
            {
                alert('Você precisa preencher o campo NOME.');erro = true;
            }
            if($('#email').val() == '' && !erro)
            {
                alert('Você precisa preencher o campo E-mail.');erro = true;
            }
            if($('#telefone').val() == '' && !erro)
            {
                alert('Você precisa preencher o campo TELEFONE.');erro = true;
            }
           
            //se nao tiver erros
            if(!erro)
            {
                $('#cadclientes').submit();
            }
        }
</script>
</pre>
Este script, basicamente, possui uma função '''validaForm()''' que recebe o nome do campo e a informação contida nele, compara verificando se está vazio e retorna um '''alerta''' com a mensagem de erro. Se não tiver erros, retorna ao cadastro de clientes (formulário cadclientes) submetendo ao método definido pela aplicação para gravar os dados no banco. Esta é uma validação bem simples que testas apenas três campos como não preenchidos. O código pode ser modificado para se fazer validações mais complexas.
Agora vamos ver como fica o código no formulário (cadclientes):
<pre>
[...]
[...]
<form name="cadclientes" id="cadclientes" method="post" onsubmit="validaForm(); return false;" action="cadastrando.php">
  <input name="formulario" type="hidden" value="2" />
<table>
<tr><td>Nome:</td><td><input type="text" name="nm_cliente" id="nm_cliente" size="50" autofocus /></td></tr>
<tr><td>Endereço:</td><td><input type="text" name="endereco" size="50" /></td></tr>
<tr><td>Número:</td><td><input type="text" name="numero" size="5" />
        Complemento: <input type="text" name="complemento" size="25" /></td></tr>
<tr><td>CEP:</td><td><input type="text" class="cep" name="cep" size="9" /></td></tr>
<tr><td>Cidade:</td></td><td>


=Vídeos=
<select name="id_cidade" style="width: 100%">
<option>Selecione...</option>


*
<?php while($exibe = mysql_fetch_array($sql)) { ?>
<option value="<?php echo $exibe['id_cidade'] ?>"><?php echo $exibe['nm_cidade'].' - '.$exibe['uf'] ?></option>
<?php } ?>
</select></td></tr>


<tr><td>E-mal:</td><td><input type="text" name="email" id="email" size="50" /></td></tr>
<tr><td>Telefone:</td><td><input type="text" class="telefone" name="telefone" id="telefone" size="18" />
        &nbsp;Celular: <input type="text" class="telefone" name="celular" size="18" /></td></tr>
<tr><td colspan="2">
<input type="submit" value="Salvar" width="10"/>
<input name="voltar" type="button" onClick="window.open('index.php','_self')" value="Voltar">
<input name="listar" type="button" onClick="window.open('listaclientes.php','_self')" value="Consultar"></td></tr>
</table>
</form>
[...]
</pre>
Neste trecho de código, que agora fica ainda mais completo, aparecem os atributos do formulário: '''id="cadclientes"''' e '''onsubmit="validaForm(); return false;"'''. O atributo '''id''' na maioria das vezes é o mesmo que '''name''', ou seja, que se trata do cadastro de formulário. E ele deverá aparecer também nos campos que forem utilizados para a validação. Portanto, não esqueça do '''id''' nas tags dos '''<input>''' dos campos que serão validados.
É isso então, depois disponibilizo o código completo. Para efeito de aprendizado, o mais interessante é que você consiga fazer uso dos trechos de código adaptando-os as suas aplicações.
Estou a disposição!
Prof. Douglas A.


=Organização da Semana 7=
=Organização da Semana 8=


Nesta sexta semana apresentamos [...]
Nesta sétima semana tivemos o chat e aqui na wiki da unidade apresentamos como criar e utilizar máscaras de campos e também como fazer uma validação simples de campos não preenchidos. No próximo encontro vamos comentar mais sobre o desenvolvimento das aplicações e o que precisa ser feito para a criação do vídeo e o envio da apresentação do sistema (AO2). Vamos falar ainda sobre as avaliações presenciais e recuperações das atividades e o que esperar dessa reta final.
Um abraço,


Bom trabalho!
Bons estudos!


Prof. Douglas A.
Prof. Douglas A.
Linha 50: Linha 166:
=Referências=
=Referências=


[1] http://www.devmedia.com.br/validacao-de-dados-em-php-com-jquery-validate/28544#ixzz446zNC4me


[2] https://www.oficinadanet.com.br/post/12811-formulario-de-contato-em-php


-----
-----
Linha 56: Linha 174:
! style="background: #32CD32;" | [[PI_S6_DSW_II_DouglasARS | << ]]
! style="background: #32CD32;" | [[PI_S6_DSW_II_DouglasARS | << ]]
! style="background: #1C1C1C; color: white;" | [[Douglas_DSW_II#Atividades | <> ]]
! style="background: #1C1C1C; color: white;" | [[Douglas_DSW_II#Atividades | <> ]]
! style="background: #32CD32;" | [[PI_S7_DSW_II_DouglasARS | >> ]]
! style="background: #32CD32;" | [[PI_S8_DSW_II_DouglasARS | >> ]]
|}
|}

Edição atual tal como às 16h36min de 14 de abril de 2016

Apresentação

Olá Alunos,

Entramos pela sétima semana, vamos de leve essa semana, já que vocês tem bastante trabalho pela frente e vou aproveitar para mostrar ou relembrar, se for o caso, como utilizar máscaras para entrada de dados em campos de formulário. Também vamos apresentar uma técnica de validação das informações desses campos utilizando PHP. Fiquem atentos e façam uso do Fórum: Pergunte ao Professor no moodle.

Bons estudos a todos!

Prof. Douglas A.

Objetivo

  • Máscaras para campos de formulário;
  • Validação de campos.

Máscaras de Campos

Quando estamos desenvolvendo uma aplicação web que trabalha com formulários e banco de dados, surgirá uma necessidade: a chamada máscara dos campos. Isso ocorre quando queremos que usuário do sistema entre com uma informação com um formato pré-determinado de modo que seja necessário respeitar os padrões pré-determinados.

Antes disso, é necessário termos nosso banco devidamente modelado, pois assim o processo de recuperação das informações é menos trabalhoso, sem falar na questão de aparência na exibição dos dados.

Exemplo: utilizando máscara podemos definir que o campo telefone só poderá aceitar caracteres numéricos os caracteres ( ) -. Ficando assim: abre parênteses na 1ª posição, fecha parênteses na 4ª posição e o traço na 9ª posições. garantindo com isso, que todos os números de telefone serão no estilo (99)9999-9999.

Telefone é só um exemplo, podemos usar máscaras para CPF: 999999999-99 , CNPJ: 99.999.999/9999-99, datas: 99/99/9999, CEP: 99999-99, etc.

Como utilizar máscaras?

Para facilitar esse processo um tanto complexo de construção de máscaras, utilizamos algo relativamente simples, o script jquery com o complemento jquery.maskedinput.

Para baixar os arquivos clique em: jquery.js e jquery.maskedinput.js.

O trecho do código abaixo exemplifica o uso da máscara em um arquivo de formulário. Coloquei até máscaras que ainda não utilizei para servirem de exemplo. 

[...]
</head>

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.maskedinput.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
	$("input.data").mask("99/99/9999");
        $("input.cpf").mask("999999999-99");
        $("input.cep").mask("99999-999");
        $("input.telefone").mask("(99)9999-9999");
});
</script>

<body>
[...]

Notem que os arquivos jquery.js e jquery.maskedinput.js estão dentro da pasta scripts que eu criei dentro da pasta padrão da aplicação. Portanto, vocês devem indicar o local para onde foram copiados os arquivos para que as máscaras funcionem corretamente.

Como fica uso?

Para utilizar é simples. O trecho do código que mostra como chamar a máscara já criada para os campos de formulário pode ser visto em seguida. 

[...]
 CEP:<input type="text" class="cep" name="cep" size="18" />
 CPF:<input type="text" class="cpf" name="cpf" size="18" />
 DATA:<input type="text" class="data" name="data" size="18" />
 Telefone:<input type="text" class="telefone" name="telefone" size="18" />
 Celular: <input type="text" class="telefone" name="celular" size="18" /></td></tr>
[...]

Observem que aquela propriedade size tem haver com o tamanho da área da tela, e não tem nada haver com total de caracteres.

Validação de Campos

Existem algumas maneiras de se fazer a validação de campos de formulário. Entre elas estão a validação pela aplicação, assim que o formulário é submetido, ou pelo banco de dados, onde a tarefa se torna um pouco mais complexa, pois se tem que tratar erros da tentativa de gravar no banco e que pra maioria dos programadores iniciantes pode ser bastante complicado. Vamos optar por fazer a validação dos dados já nos campos de formulário antes de enviar para o banco de dados, mas lembre-se, quando na modelagem de banco ao se definir que um campo não pode aceitar nulo (not null), este deve ser tratado pela aplicação, pois senão, ao se tentar gravar dados no banco, vai retornar um erro e não se concretizará a gravação.

Existem técnicas utilizadas em sistemas que fazem a validação através de requisições (GET ou POST), dessa forma sempre que o usuário clicar em Salvar é feita uma requisição, processamento dos dados e então a validação. Essas validações através de requisições (refresh nas páginas) são utilizadas para processamentos que precisam de validações complexas. Coisas simples como: verificar se o nome está vazio, se o email é válido ou se a senha é segura podem ser feitas via JavaScript sem muito trabalho e ainda retornar a resposta ao usuário sem precisar dar um refresh na página, ou seja, em real-time.

Validação de campos com Javascript

Partindo do nosso sistema exemplo que é feito com HTML, CSS e PHP, vamos fazer as validações com JavaScript, para verificar se o usuário preencheu alguns campos. No script abaixo, vou mostrar um exemplo fazendo com que somente alguns campos sejam obrigatórios. Este script eu coloquei no arquivo funcoes.php, mas poderia estar dentro do arquivo em que ele é utilizado. Lembre-se de chamar o arquivo através do include no PHP. 

<script type="text/javascript">
        function validaForm()
        {
            erro = false;
            if($('#nm_cliente').val() == '')
            {
                alert('Você precisa preencher o campo NOME.');erro = true;
            }
            if($('#email').val() == '' && !erro)
            {
                alert('Você precisa preencher o campo E-mail.');erro = true;
            }
            if($('#telefone').val() == '' && !erro)
            {
                alert('Você precisa preencher o campo TELEFONE.');erro = true;
            }
            
            //se nao tiver erros
            if(!erro)
            {
                $('#cadclientes').submit();
            }
        }
</script>

Este script, basicamente, possui uma função validaForm() que recebe o nome do campo e a informação contida nele, compara verificando se está vazio e retorna um alerta com a mensagem de erro. Se não tiver erros, retorna ao cadastro de clientes (formulário cadclientes) submetendo ao método definido pela aplicação para gravar os dados no banco. Esta é uma validação bem simples que testas apenas três campos como não preenchidos. O código pode ser modificado para se fazer validações mais complexas.

Agora vamos ver como fica o código no formulário (cadclientes): 

[...]
<form name="cadclientes" id="cadclientes" method="post" onsubmit="validaForm(); return false;" action="cadastrando.php">
  <input name="formulario" type="hidden" value="2" />
	<table>
	<tr><td>Nome:</td><td><input type="text" name="nm_cliente" id="nm_cliente" size="50" autofocus /></td></tr>
	<tr><td>Endereço:</td><td><input type="text" name="endereco" size="50" /></td></tr>
	<tr><td>Número:</td><td><input type="text" name="numero" size="5" />
	        Complemento: <input type="text" name="complemento" size="25" /></td></tr>
	<tr><td>CEP:</td><td><input type="text" class="cep" name="cep" size="9" /></td></tr>
	<tr><td>Cidade:</td></td><td>

	<select name="id_cidade" style="width: 100%">
	 <option>Selecione...</option>

	 <?php while($exibe = mysql_fetch_array($sql)) { ?>
	 <option value="<?php echo $exibe['id_cidade'] ?>"><?php echo $exibe['nm_cidade'].' - '.$exibe['uf'] ?></option>
	 <?php } ?>
	 
	 </select></td></tr>

	<tr><td>E-mal:</td><td><input type="text" name="email" id="email" size="50" /></td></tr>
	<tr><td>Telefone:</td><td><input type="text" class="telefone" name="telefone" id="telefone" size="18" />
	         Celular: <input type="text" class="telefone" name="celular" size="18" /></td></tr>
	<tr><td colspan="2">
	<input type="submit" value="Salvar" width="10"/>
	<input name="voltar" type="button" onClick="window.open('index.php','_self')" value="Voltar">
	<input name="listar" type="button" onClick="window.open('listaclientes.php','_self')" value="Consultar"></td></tr>
	</table>
</form>
[...]

Neste trecho de código, que agora fica ainda mais completo, aparecem os atributos do formulário: id="cadclientes" e onsubmit="validaForm(); return false;". O atributo id na maioria das vezes é o mesmo que name, ou seja, que se trata do cadastro de formulário. E ele deverá aparecer também nos campos que forem utilizados para a validação. Portanto, não esqueça do id nas tags dos <input> dos campos que serão validados.

É isso então, depois disponibilizo o código completo. Para efeito de aprendizado, o mais interessante é que você consiga fazer uso dos trechos de código adaptando-os as suas aplicações.

Estou a disposição!

Prof. Douglas A.

Organização da Semana 8

Nesta sétima semana tivemos o chat e aqui na wiki da unidade apresentamos como criar e utilizar máscaras de campos e também como fazer uma validação simples de campos não preenchidos. No próximo encontro vamos comentar mais sobre o desenvolvimento das aplicações e o que precisa ser feito para a criação do vídeo e o envio da apresentação do sistema (AO2). Vamos falar ainda sobre as avaliações presenciais e recuperações das atividades e o que esperar dessa reta final.

Bons estudos!

Prof. Douglas A.

Referências

[1] http://www.devmedia.com.br/validacao-de-dados-em-php-com-jquery-validate/28544#ixzz446zNC4me

[2] https://www.oficinadanet.com.br/post/12811-formulario-de-contato-em-php

<< <> >>
Disponível em “https://wiki.ifsc.edu.br/index.php?title=PI_S7_DSW_II_DouglasARS&oldid=12510”