Como Criar Listas Suspensas

Índice

Para criar duas listas suspensas (dropdown lists) utilizando Laravel e jQuery, você precisará de um entendimento básico de ambos os frameworks. Vamos abordar o processo passo a passo:

Passo 1: Configuração do Laravel

Certifique-se de ter o Laravel instalado em seu ambiente de desenvolvimento. Se ainda não o fez, você pode instalar utilizando o Composer.

bash
composer create-project --prefer-dist laravel/laravel nome-do-projeto

Depois de instalar o Laravel, navegue até o diretório do seu projeto e inicie o servidor embutido do PHP:

bash
php artisan serve

Passo 2: Configuração do Banco de Dados

Crie um banco de dados e configure suas credenciais no arquivo .env do Laravel.

Passo 3: Criando Modelos e Migrações

Crie os modelos e migrações necessários para as suas entidades de dados. Por exemplo, se estivermos criando duas listas suspensas para países e cidades:

bash
php artisan make:model Pais -m
php artisan make:model Cidade -m

Isso criará os modelos Pais e Cidade juntamente com suas migrações correspondentes.

Passo 4: Definindo as Migrações

Defina os esquemas de banco de dados nas migrações recém-criadas. Por exemplo, na migração de Pais:

php
public function up()
{
    Schema::create('paises', function (Blueprint $table) {
        $table->id();
        $table->string('nome');
        $table->timestamps();
    });
}

E na migração de Cidade:

php
public function up()
{
    Schema::create('cidades', function (Blueprint $table) {
        $table->id();
        $table->string('nome');
        $table->unsignedBigInteger('pais_id');
        $table->foreign('pais_id')->references('id')->on('paises');
        $table->timestamps();
    });
}

Em seguida, execute as migrações para criar as tabelas no banco de dados:

bash
php artisan migrate

Passo 5: Inserindo Dados no Banco de Dados

Insira alguns dados de exemplo nas tabelas paises e cidades utilizando as seeds do Laravel ou manualmente.

Passo 6: Criando Rotas

Defina as rotas necessárias para fornecer os dados das listas suspensas. Por exemplo, em routes/web.php:

php
Route::get('/paises', 'PaisController@index');
Route::get('/cidades/{pais_id}', 'CidadeController@getCidadesByPais');

Passo 7: Criando Controllers

Crie os controllers PaisController e CidadeController para lidar com as solicitações das rotas.

Passo 8: Implementando a Lógica do Controller

No PaisController, você pode ter um método index para retornar todos os países:

php
public function index()
{
    $paises = Pais::all();
    return response()->json($paises);
}

E no CidadeController, você pode ter um método getCidadesByPais para retornar as cidades de um país específico:

php
public function getCidadesByPais($pais_id)
{
    $cidades = Cidade::where('pais_id', $pais_id)->get();
    return response()->json($cidades);
}

Passo 9: Configurando o Frontend com jQuery

No lado do cliente, você pode usar jQuery para fazer requisições AJAX para as rotas que acabamos de criar e preencher as listas suspensas dinamicamente.

javascript
$(document).ready(function(){
    // Preencher a lista suspensa de países
    $.get('/paises', function(data){
        $.each(data, function(index, pais){
            $('#paises').append('+'">'+pais.nome+'');
        });
    });

    // Ao selecionar um país, preencher a lista suspensa de cidades correspondente
    $('#paises').change(function(){
        var pais_id = $(this).val();
        $('#cidades').empty();
        $.get('/cidades/' + pais_id, function(data){
            $.each(data, function(index, cidade){
                $('#cidades').append('+'">'+cidade.nome+'');
            });
        });
    });
});

Passo 10: Criando as Listas Suspensas no HTML

Finalmente, adicione as listas suspensas no seu arquivo HTML:

html
<select id="paises">
    <option value="">Selecione um paísoption>
select>

<select id="cidades">
    <option value="">Selecione uma cidadeoption>
select>

Este é um exemplo básico de como você pode criar duas listas suspensas usando Laravel e jQuery. Certifique-se de adaptar o código conforme necessário para atender aos requisitos específicos do seu projeto.

“Mais Informações”

Claro! Vamos aprofundar mais em alguns aspectos do processo de criação das listas suspensas utilizando Laravel e jQuery.

Migrações e Modelos

As migrações no Laravel são usadas para definir a estrutura do banco de dados. No exemplo fornecido, criamos duas tabelas: paises e cidades. No entanto, dependendo dos requisitos do seu projeto, você pode ter mais tabelas e relações entre elas. Por exemplo, você pode adicionar uma tabela de estados para representar estados dentro de um país.

Os modelos são classes PHP que representam os dados no banco de dados. Eles são usados para interagir com os dados do banco de dados. No exemplo, criamos os modelos Pais e Cidade. Esses modelos geralmente são usados para recuperar, inserir, atualizar e excluir registros do banco de dados.

Controllers e Rotas

Os controllers são responsáveis por lidar com as solicitações HTTP e retornar as respostas apropriadas. No exemplo, criamos os controllers PaisController e CidadeController. O método index do PaisController retorna todos os países, enquanto o método getCidadesByPais do CidadeController retorna as cidades de um país específico.

As rotas definem como as URLs da sua aplicação respondem às solicitações do cliente. No exemplo, definimos duas rotas: uma rota para obter todos os países e outra rota para obter as cidades de um país específico. As rotas são definidas no arquivo routes/web.php.

Requisições AJAX com jQuery

No lado do cliente, usamos jQuery para fazer requisições AJAX para as rotas definidas no Laravel. As requisições AJAX permitem que o navegador faça solicitações HTTP sem recarregar a página inteira. No exemplo, usamos $.get para fazer requisições GET para as rotas /paises e /cidades/{pais_id} e preencher dinamicamente as listas suspensas com os dados retornados.

Manipulação Dinâmica do DOM

Ao receber os dados dos países e cidades do servidor, usamos jQuery para manipular o DOM e adicionar as opções correspondentes às listas suspensas. Isso é feito usando o método append para adicionar novos elementos aos elementos