예제4. Ajax를 사용한 국가 주 그리고 도시를 선택하는 드롭다운구현

1. 데이터베이스 및 테이블 생성
다음 SQL 쿼리를 실행하여 데이터베이스와 국가, 주 및 도시 테이블을 생성합니다. 뿐만 아니라 다음 테이블에 데이터를 삽입합니다.

 

CREATE DATABASE demo;

CREATE TABLE `countries` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CREATE TABLE `states` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `country_id` int(11) NOT NULL,
 `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CREATE TABLE `cities` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `state_id` int(11) NOT NULL,
 `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO `countries` VALUES (1, 'USA', 1);
INSERT INTO `countries` VALUES (2, 'Canada', 1);
 
 
INSERT INTO `states` VALUES (1, 1, 'New York', 1);
INSERT INTO `states` VALUES (2, 1, 'Los Angeles', 1);
INSERT INTO `states` VALUES (3, 2, 'British Columbia', 1);
INSERT INTO `states` VALUES (4, 2, 'Torentu', 1);
 
 
INSERT INTO `cities` VALUES (1, 2, 'Los Angales', 1);
INSERT INTO `cities` VALUES (2, 1, 'New York', 1);
INSERT INTO `cities` VALUES (3, 4, 'Toranto', 1);
INSERT INTO `cities` VALUES (4, 3, 'Vancovour', 1);

 

2. 모델 및 컨트롤러 생성
CountryStateCity.php 파일을 생성합니다. 따라서 app/Models 디렉토리를 방문하여 CountryStateCity.php를 생성합니다. 그런 다음 여기에 다음 코드를 추가합니다.

<?php
 
namespace App\Models;
 
use CodeIgniter\Model;
 
class CountryStateCity extends Model {
 
     
    public function __construct() {
        parent::__construct();
        //$this->load->database();
        $db = \Config\Database::connect();
    }
 
    public function getCountries() {
 
       $query = $this->db->query('select * from countries');
       return $query->getResult();
    }
 
    public function getStates($postData) {
      $sql = 'select * from states where country_id ='.$postData['country_id'] ;
      $query =  $this->db->query($sql);
       
      return $query->getResult();
    }

    public function getCities($postData) {
      $sql = 'select * from cities where state_id ='.$postData['state_id'] ;
      $query =  $this->db->query($sql);
       
      return $query->getResult();
    }    

}

 

CountryStateCityController.php 파일을 생성합니다. 따라서 app/Controllers 디렉토리를 방문하여 CountryStateCityController.php를 생성합니다. 그런 다음 여기에 다음 코드를 추가합니다.

<?php
 
namespace App\Controllers;
 
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
use App\Models\CountryStateCity;
 
class CountryStateCityController extends Controller {
 
 
    public function index() {
         
        helper(['form', 'url']);
        $this->CountryStateCity = new CountryStateCity();
        $data['countries'] = $this->CountryStateCity->getCountries();
        return view('dropdown-list', $data);
    }

    public function getStates() {
 
        $this->CountryStateCity = new CountryStateCity();
 
        $postData = array(
            'country_id' => $this->request->getPost('country_id'),
        );
 
        $data = $this->CountryStateCity->getStates($postData);
 
        echo json_encode($data);
    }
 
    public function getCities() {
 
        $this->CountryStateCity = new CountryStateCity();
 
        $postData = array(
            'state_id' => $this->request->getPost('state_id'),
        );
 
        $data = $this->CountryStateCity->getCities($postData);
 
        echo json_encode($data);
    }    
 
}

CountryStateCity 컨트롤러에 내장된 메소드에는 다음과 같은 기능이 있습니다.

index() 함수는 국가와 도시를 뷰로 렌더링합니다.
getStates() 메소드는 국가 ID를 사용하여 상태 테이블에서 데이터를 가져옵니다.
getCities() 메소드는 상태 ID를 사용하여 도시 테이블에서 데이터를 가져옵니다.

 

3. 뷰 만들기
dropdown-list.php 보기 파일을 생성하므로 app/views/ 디렉토리로 이동하여 dropdown-list.php 파일을 생성합니다. 그런 다음 dropdown-list.php 파일에 다음 HTML을 추가합니다.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="content">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>Codeigniter 4 Dependent Country State City Dropdown using Ajax</title>


        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    </head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h2 class="text-success">Codeigniter 4 Dependent Country State City Dropdown using Ajax - Laratutorials.com</h2>
                    </div>
                    <div class="card-body">
                     <form>
                        <div class="form-group">
                          <label for="country">Countries</label>
                          <select class="form-control" id="country_id">
                          <option value="">Select Country</option>

                           <?php foreach($countries as $c){?>
                              <option value="<?php echo $c->id;?>"><?php echo $c->name;?></option>"
                           <?php }?>
                            
                          </select>
                        </div>
                        <div class="form-group">
                          <label for="state">States</label>
                          <select class="form-control" id="state_id">
                            
                          </select>
                        </div>                        

                        <div class="form-group">
                          <label for="city">Cities</label>
                          <select class="form-control" id="city_id">
                            
                          </select>
                        </div>
                    </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
  <script type='text/javascript'>
  // baseURL variable
  var baseURL= "<?php echo base_url();?>";
 
  $(document).ready(function(){
 
    // City change
    $('#country_id').change(function(){
      var country_id = $(this).val();

      // AJAX request
      $.ajax({
        url:'<?=base_url()?>/CountryStateCityController/getStates',
        method: 'post',
        data: {country_id: country_id},
        dataType: 'json',
        success: function(response){

          // Remove options 
          $('#state_id').find('option').not(':first').remove();
          $('#city_id').find('option').not(':first').remove();

          // Add options
          $.each(response,function(index,data){
             $('#state_id').append('<option value="'+data['id']+'">'+data['name']+'</option>');
          });
        }
     });
   });
 
   // Department change
   $('#state_id').change(function(){
     var state_id = $(this).val();

     // AJAX request
     $.ajax({
       url:'<?=base_url()?>/CountryStateCityController/getCities',
       method: 'post',
       data: {state_id: state_id},
       dataType: 'json',
       success: function(response){
 
         // Remove options
         $('#city_id').find('option').not(':first').remove();

         // Add options
         $.each(response,function(index,data){
           $('#city_id').append('<option value="'+data['id']+'">'+data['name']+'</option>');
         });
       }
    });
  });
 
 });
 </script>
</body>
</html>

4. 경로 설정
경로를 정의하려면 app/Config/ 디렉토리로 이동하여 Routes.php 파일을 엽니다. 그런 다음 다음 경로를 추가하십시오.

 

$routes->setDefaultController('CountryStateCityController');
$routes->get('/', 'CountryStateCityController::index');