not bad 한 개발

CodeIgniter - DB에 있는 데이터를 Modal창 으로 보기 본문

Web/CodeIgniter

CodeIgniter - DB에 있는 데이터를 Modal창 으로 보기

leebean 2021. 12. 31. 02:20

DB에 있는 값 하나를 페이지에 띄우거나 여러 개의 값을 띄우는 것은 가능하나 modal 창에 각자 다른 값을 나타내려고 하면 하나의 값은 일반적으로 출력하면 되고 여러 개의 값이지만 한정적이면 modal을 하나하나 만들어서 각자 다른 값을 넣으면 됩니다, 하지만 여러 개의 값이고 나중에 추가할 가능성이 있으면 자연스럽게 foreach문을 사용하여 계속 출력시켜야 합니다, 이럴 경우 modal창으로 띄우면 가장 먼저 가져온 값만 modal창에 나오는 문제가 있었습니다, 이러한 문제를 해결하고자 제작했습니다.

 

github : https://github.com/delight-HK3/Modal_DB_Connect

 

GitHub - delight-HK3/Modal_DB_Connect: UTF-8 encoding required

UTF-8 encoding required. Contribute to delight-HK3/Modal_DB_Connect development by creating an account on GitHub.

github.com

(jQuery 및 bootstrap 파일도 첨부해놓았습니다.)

 

CodeIgniter의 DB의 값 출력방식은 MVC 모델에 따라 사용하여 아래의 그림처럼 진행됩니다.

하지만 제가 만든 modal 창에서 DB값을 띄우는 방식은 좀 다른데

model에서 DB 정보를 받지 않고 Controller에서 DB를 직접 연결하여 출력되게 제작했습니다.

 

View

<html>
    <head>
        <!-- bootstrap 4.5 css -->
        <link rel="stylesheet" href="/my/css/bootstrap.css">
        <link rel="stylesheet" href="/my/css/bootstrap.css.map">
    </head>
    <body>
        <?php
            foreach($list as $row)
            {
        ?>
                <button class="view_data" id="<?php echo($row->no); ?>">상세보기</button>
                <!--view data 버튼을 누르면 Modal_DB_Connect.js로 이동-->
        <?php
            }	
        ?>
        <div id="dataModal" tabindex="-1" class="modal fade" role="dialog" aria-labelledby="exampleModelLabel">  
            <div class="modal-dialog " role="document" style="width:600px; max-width:600px; padding-top:55px;">  
                <div class="modal-content target" style="width:600px; height:800px; overflow:auto; ">  
                    <div class="modal-body" id="employee_detail" style="padding:0; height:750px">
                        
                    </div>  
                </div>  
            </div>  
        </div>
    </body>
</html>
<!-- bootstrap 4.5 js -->
<script src="/my/js/jquery-3.6.0.js"></script>
<script src="/my/js/bootstrap.js"></script>
<script src="/my/js/bootstrap.js.map"></script>
<!-- people_select js -->
<script src="/my/js/Modal_DB_Connect.js"></script>
  • 기본키 번호를 출력하는 이유는 중복성이 없기 때문에 사용했습니다. 
  • view_data 클래스는 jQuery를 나타내기 위한 표식입니다.

 

JS

$(document).on('click', '.view_data', function(){ // 클래스가 view_data인 태그를 클릭한 경우
   var employee_id = $(this).attr("id"); // id에 있는 테이블에서 가져온 값을 가져온다.  
   if(employee_id != '') // 값이 있는 경우
   {  
		$.ajax({  
			url:"/Modal_db_connect/select",
			// Modal_db_connect의 select함수로 이동  
			method:"POST",  
			data:{
				 employee_id:employee_id 
				 // employee_id(view의 아이디 값)을 변수 employee_id에 저장
			},  
			success:function(data){ // 데이터를 가져오는 것이 성공한 경우
				$('#employee_detail').html(data); // 태그 id가 employee_detail인 태그에 출력
				$('#dataModal').modal('show'); // modal창 출력
			}  
		});  
   }            
});

view_data가 있는 클래스를 클릭하면 위의 이벤트가 발생하는데 employee_id 에는 view_data에 있는 id 값 그러니까 기본키 번호가 저장됩니다, 만약 employee_id에 값이 없으면 ajax이벤트가 발생하지 않고 값이 있으면 ajax이벤트가 발동합니다, employee_id 값과 같은 기본키를 가진 레코드를 추출하는 select 함수를 url에 설정하고 method를 POST타입으로 설정하고 보내는 data는 employee_id를 넣고 controller 함수를 호출한 후 성공적으로 끝나면 dataModal과 함께 추출한 값을 화면에 출력합니다.

 

Controller

<?php
if (!defined('BASEPATH')) exit('No direct script access allowed');

class Modal_db_connect extends CI_Controller {               
	function __construct(){
		parent::__construct();
		$this->load->database(); // DB 연결                     
		$this->load->model("Modal_db_connect_m"); // Modal_db_connect_m 연결    
	}
	public function index()                             
	{
		$data['db_test'] = $this->Modal_db_connect_m->get(); // 테이블내용을 배열로 저장
		$this->load->view("Modal_db_connect_view",$data); 
        // $data 배열을 Modal_db_connect_view 과 함께 전달
	}	
	public function select(){ 
        if(isset($_POST["employee_id"])) // employee_id변수에 값이 있는 경우
        {  
            $output = '';  
            $connect = mysqli_connect("<DB IP / localhost>", "<DB id>", "<DB password>", "<DB name>"); // DB 연결
            $query = "SELECT * FROM db_conn WHERE no = '".$_POST["employee_id"]."'"; 
            // 해당 테이블에  안에 employee_id와 값이 같은 행을 가져오는 쿼리
            $result = mysqli_query($connect, $query); // 쿼리 실행
            $output .= '';  
                while($row = mysqli_fetch_array($result)) // $result의 column을 반환
                {  
                    $output .= '  
                        <div>
                            HTML 코드
                            .$row["table column name"].				
                        </div>
                    ';  
                }  
            $output .= '';  
            echo $output;  
        }  		
    }
}	
?>

함수를 실행하면 employee_id에 값이 있는지 확인하고 DB를 연결한 값 $connect와 쿼리문을 $query에 저장한 후 mysqli_query 함수를 실행하여 해당 테이블의 값을 $result에 저장하고 $result 값을 mysqli_fetch_array을 사용해 해당 레코드를 추출하여 $row에 저장합니다.

$row는 관련된 값을 저장한 배열입니다, 그림으로 설명하자면 이렇게 나옵니다.

 

Modal

<?php
if (!defined('BASEPATH')) exit('No direct script access allowed');

class Modal_db_connect_m extends CI_Model{
	public function get(){
		$sql="select * <table name>"; // 테이블 전체의 내용을 가져오는 쿼리 실행   
		return $this->db->query($sql)->result(); // 결과를 리턴
	}
}
?>

DB에 있는 정보를 Modal로 출력하기 전에 출력에 필요한 기본키를 불러오기 위한 작업입니다. 

저작자표시

'Web > CodeIgniter' 카테고리의 다른 글

CodeIgniter - Pagination 구현  (0) 2022.03.12
CodeIgniter - 서버에 중복 없이 이미지 넣기  (0) 2022.02.19
CodeIgniter - 로그인 구현  (0) 2022.02.18
CodeIgniter - Ajax를 활용한 아이디 중복체크  (0) 2021.12.29
CodeIgniter - 소개  (0) 2021.12.29
'Web/CodeIgniter' Related Articles more
Comments