tutoriais

Vídeos Relacionados: Criação dinâmica de campos com JQuery e validação com expressões regulares (Pode 2024).

Desenvolvimento de aplicações web dinâmicas com Jquery, Php e MySQL

  Data De Publicação: May/2024
{title}

A combinação de PHP e Jquery é uma das técnicas mais usadas para o desenvolvimento de aplicativos Web dinâmicos.
A biblioteca JQuery fornece muitos plugins Jquery que os desenvolvedores usam para fornecer aos seus aplicativos um grande dinamismo para melhorar a experiência do visitante no navegador da Internet ou em um dispositivo móvel. Continuaremos desenvolvendo a aplicação do tutorial Gerar listagens dinâmicas. Com Jquery, Php e Mysql, adicionaremos formulários dinâmicos para registrar e modificar informações, aplicando a combinação de php e jquery, podemos executar esta tarefa sem redirecionar a página.
Também adicionaremos o plugin jquery.validator que nos permitirá validar os campos do formulário.
Atenção

Para este tutorial, precisaremos do plug-in que pode ser baixado em //jqueryvalidation.org/, quando o fizermos, descompactamos e teremos todos os arquivos dos quais só estamos interessados ​​em dois, que são:
jquery.validate.js, que é o próprio plugin messages_es.js, que é o arquivo em que colocaremos as mensagens para o visitante e podemos traduzi-las por idiomas.
Nós adicionamos os arquivos ao diretório do projeto:

{title}


Temos então a lista gerada de veículos, adicionaremos um formulário para registrar os veículos.

{title}


Continuando com o código do tutorial anterior, precisamos ter uma camada em que os formulários serão mostrados no momento em que são chamados com o Jquery; para isso, no novo botão, criaremos a camada de formulários.

{title}


No cabeçalho da web na página index.php, adicionamos as bibliotecas e mensagens jquery.validator. Então, vamos usá-los para criar formas dinâmicas
Se não queremos baixar o plugin, podemos usá-lo em um servidor externo 

Agora, criaremos os arquivos com o formulário que nos ajudará a registrar um veículo e que chamaremos a partir do novo botão. Para fazer isso, devemos garantir que o novo botão tenha um ID (identificador) para poder reconhecer quando um evento ocorre no, por exemplo, um clique. Em seguida, o código do botão será o seguinte: 
O nome do componente e o identificador podem ser iguais, mas exclusivos para cada componente html. Nas funções file.js, escrevemos o código a seguir que detectará o clique do mouse no botão novo veículo e invocará o arquivo de registro do veículo com o formulário de registro. 
 // Chame o formulário de registro do veículo $ (function () {$ ("# new vehicle"). Clique em (function () {$ .get ("http: //localhost/projects/agenciaautos/altavehiculos.php", function (data ) {$ ("# forms"). html (data); // Pego o resultado da página e insiro os dados nos formulários div});});}); 

Em seguida, criamos o formulário de registro chamado altavehiculos.php 
Incorporamos as bibliotecas necessárias para trabalhar com jquery e validar os campos no cabeçalho 
Criamos alguns estilos para dar forma e ordem ao formulário. Por exemplo, ele pode ser usado no mesmo arquivo ou em um arquivo de folha de estilos separado e, em seguida, adicionado ao cabeçalho. 
 formulário {display: block; largura: 450px; } label {display: block; largura: 150px; flutuar: esquerda; } br {display: bloco; margem superior: 5 px; } botão # {display: block; margem: 5px automático; largura: 122px; } 

Em seguida, escrevemos o código para salvar os dados e o código do formulário para captura de dados 
 $ value) {$ _POST [$ key] = mysql_real_escape_string ($ value); } $ sql = "INSERIR EM VEÍCULOS` 'features']} ', ' {$ _POST ['idmarca']} ', ' {$ _POST ['idmodel']} ', ' {$ _POST ['photo1']} ') "; mysql_query ($ sql) ou die (mysql_error ()); eco "Registro concluído."; }?> // Eu consulto veículos para preencher o tipo de veículo, selecione High Vehicle
Selecionar veículo 

Também crio as funções do Jquery para corresponder à seleção no formulário de registro 
 // seleciona marcas e veículos altos relacionados $ (function () {$ ("# high vehicle"). change (function () {vehicle = $ (this) .val (); // Valor selecionado $ .get ("http: //localhost/proyectos/agenciaautos/marcas.php?idvehiculo="+vehiculo, function (data) {$ ("# altamarca"). html (data); // Pego o resultado da página e insiro os dados no combo });});}); // seleciona marcas e modelos relacionados $ (function () {$ ("# altamarca"). change (function () {mark = $ (this) .val (); // Valor selecionado $ .get ("http: / /localhost/proyectos/agenciaautos/modelos.php?idmarca="+marca, função (dados) {$ ("# altamodelo"). html (data); // Pego o resultado da página e insiro os dados no select} );});}); 

Uma vez terminado, se executarmos e pressionarmos o novo botão, o formulário de registro deverá aparecer da seguinte forma: 
{title}

Como vemos, o formulário é mostrado sem redirecionar a página. Se instalamos em nosso navegador algum plugin como o Firebug, podemos ver as chamadas do Jquery em segundo plano. 
{title}

Finalmente, executaremos o código de validação do formulário usando um script jquery simples e as regras do plug-in do validador. Dentro do arquivo functions.js, criamos um script e nos referimos ao ID do formulário e atribuímos a função validate e o idioma espanhol, mas ela será padronizada em inglês quando mostrar uma mensagem de erro. 
 // validação do formulário $ (document) .ready (function () {$ ("# frmalta"). validate ({lang: 'es' // ou qualquer outra opção de idioma que você tenha.});}); 

Então, no componente que queremos validar, adicionamos a classe necessária, ou seja, o elemento não pode estar vazio ou sem dados. 
As classes de validação podem ser encontradas no arquivo de mensagens. Exemplo de validações 
Valide um email: 
Valide uma data: 
Valide um número: 
Portanto, se adicionarmos ao nosso formulário ao elemento textarea, por exemplo, a classe requerida e, no caso de selecionar, devemos deixar a primeira opção em branco; se nada for selecionado, o erro ocorrerá e o formulário não será enviado. 
Caracteristicas 
$config[ads_text5] not found
{title}

Exemplo para modelos selecionados: 
 Seleção de modelo 

Por fim, se preenchermos o formulário e clicar no botão Salvar o formulário, ele será enviado por si mesmo, fazendo uma chamada jquery para a mesma página altavehiculos.php, que envia o sinalizador enviado com o valor 1 e ativa a inserção na tabela MySQL. 
Um detalhe que ainda precisa ser feito com o jquery ou o redirecionamento da maneira tradicional é que, quando os dados são salvos, a lista é atualizada na parte superior, pois o formulário de registro desaparece, mas não temos nenhum evento para irrigar o arquivo. lista de veículos, portanto, devemos adicionar a chamada para exibir a lista na camada de lista que usamos anteriormente no outro tutorial; dessa forma, podemos fornecer informações importantes sobre redirecionar a página ou executar tarefas em segundo plano sem que o usuário precisa redirecionar a página ou fornecer mais interatividade ou transparência ao aplicativo Web, também permite reutilizar o código-fonte, pois é compatível com qualquer navegador e dispositivo compatível com javascript.
$config[ads_text6] not found$config[ads_text5] not found
  • 0 0








Artigos Relacionados Como ouvir áudio antes de ser enviado no WhatsApp Android