[기업ERP] 로트번호 입력과 성적서 보기 기능 구현하기

지금 진행하는 프로젝트의 한 부분입니다. 이런 코드를 만들어야 한다면?

로트번호 입력과 성적서 보기 기능 구현하기

웹 개발을 하다 보면 입력한 값을 기반으로 데이터를 불러오거나, 화면에 동적으로 표시해야 하는 경우가 많습니다. 이번 포스팅에서는 로트번호 입력 후 버튼 클릭으로 성적서를 불러오는 기능을 구현하는 방법을 친절히 설명드리겠습니다. 초보자 분들도 따라 하실 수 있도록 하나씩 차근차근 설명드릴게요!

 

 

1. HTML 구조 설계

먼저, 로트번호를 입력할 input 필드와, 성적서를 보기 위한 span 버튼을 만들어야 합니다. 아래처럼 HTML을 구성해 주세요.

<div class="d-flex justify-content-center align-items-center">
    <input type="text" class="form-control lotnumInput noborder-input text-center" placeholder="로트번호">
    <span class="info-btn" data-lotnum="" title="성적서 보기">
        <i class="bi bi-info-circle-fill"></i>
    </span>
</div>

✨ Tip: span 태그의 data-lotnum 속성을 활용해 입력된 로트번호를 저장할 예정입니다.

---

2. 입력 값 동기화 및 버튼 클릭 이벤트

이제 사용자가 로트번호를 입력하면, 해당 값이 data-lotnum 속성에 자동으로 저장되도록 해보겠습니다. 그리고 버튼 클릭 시 성적서를 불러오는 로직도 추가할게요.

$(document).ready(function () {
    // 입력 값이 변경될 때 data-lotnum에 값 저장
    $(document).on('input', '.lotnumInput', function () {
        var inputVal = $(this).val();
        $(this).siblings('.info-btn').attr('data-lotnum', inputVal);
    });

    // 버튼 클릭 시 성적서 데이터 요청
    $(document).on('click', '.info-btn', function () {
        var lotnum = $(this).data('lotnum');
        if (!lotnum) {
            Swal.fire('알림', '로트번호를 입력하세요.', 'warning');
            return;
        }

        // AJAX 요청으로 성적서 가져오기
        $.ajax({
            url: 'fetch_certificate.php',
            type: 'POST',
            data: { lotnum: lotnum },
            dataType: 'json',
            success: function (response) {
                if (response.success) {
                    $('#certificateModal .modal-body').html(response.data);
                    $('#certificateModal').modal('show');
                } else {
                    Swal.fire('오류', response.message, 'error');
                }
            },
            error: function () {
                Swal.fire('오류', '서버 요청에 실패했습니다.', 'error');
            },
        });
    });
});

---

3. 성적서를 보여줄 Modal 추가

AJAX 요청이 성공하면 성적서를 보기 쉽게 Modal로 표시할 겁니다. Bootstrap의 Modal을 사용하여 화면을 구성해 보세요.

<div class="modal fade" id="certificateModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">성적서</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- 성적서 내용이 여기에 표시됩니다 -->
            </div>
        </div>
    </div>
</div>

---

4. 서버에서 성적서 데이터 가져오기

fetch_certificate.php는 서버에서 로트번호에 맞는 성적서 데이터를 찾아 반환하는 역할을 합니다. 아래 코드를 참고하여 작성해 주세요.

<?php
header("Content-Type: application/json");
require_once 'db_connect.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $lotnum = isset($_POST['lotnum']) ? trim($_POST['lotnum']) : '';
    if (empty($lotnum)) {
        echo json_encode(['success' => false, 'message' => '로트번호가 비어 있습니다.']);
        exit;
    }

    $stmt = $pdo->prepare("SELECT * FROM certificates WHERE lotnum = :lotnum");
    $stmt->bindParam(':lotnum', $lotnum);
    $stmt->execute();
    $certificate = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($certificate) {
        $html = "<p>성적서 번호: {$certificate['cert_id']}</p>";
        $html .= "<p>등록일: {$certificate['reg_date']}</p>";
        $html .= "<p>내용: {$certificate['content']}</p>";
        echo json_encode(['success' => true, 'data' => $html]);
    } else {
        echo json_encode(['success' => false, 'message' => '성적서를 찾을 수 없습니다.']);
    }
}

---

5. 최종 결과

이제 로트번호를 입력하고 버튼을 클릭하면, 해당 성적서가 모달로 표시됩니다! 아래는 동작 예시입니다:

1. 로트번호 입력: 사용자가 input에 로트번호를 입력하면, 값이 자동으로 버튼의 data-lotnum에 저장됩니다.
2. 성적서 보기: 버튼 클릭 시 AJAX 요청으로 성적서를 가져오고, Modal에 표시합니다.

---

마무리하며

이제 여러분도 로트번호 기반으로 데이터를 동적으로 불러오는 기능을 구현할 수 있습니다. 초보자 분들도 위 코드만 따라 하면 어렵지 않게 적용하실 수 있을 거예요! 🛠️