Jquery form 여러개 - Jquery form yeoleogae

업무 시스템을 새로 만들고 있다.

기존 프로그램을 작년 설에 쉬지도 못 하고 만들었는데 한부서에만 특화 되어 있다보니 부서간 공유가 안되는 문제가 발생하여 다 갈아 엎고 새로 만들어야 한다.

맘아프고 기분도 별로 좋지는 않지만 어쩔 수 없다. 쓰는 사람들이 편하게 잘 사용하도록 만들어야 하는게 프로그래머의 사명이다.

올해부터는 jquery로 개발을 한다.

첨엔 아무것도 몰라 무척 삽질을 많이 했지만 쓰면 쓸수록 신기하고 잼있다.

사용법을 따로 배워야 하는 단점이 있긴 하지만 한번만 배워 놓으면 결코 후회할 일이 없고 점점 그 매력에 빠져들 수 밖에 없다.

만들어야 할 프로그램은 계정정보 통합 관리툴이다.

통합 관리이다 보니 들어가는 정보가 많고 서로 다 연관되어 있다.

계정 생성 채널 정보, KOIS 담당자 정보, 광고주 담당자 정보, 오버추어 계정 정보, 네이버 계정 정보, 구글 계정 정보, 다음 계정 정보,

각 매체사별 사업자 정보, 계정 히스토리, 정산 정보

이 모든 정보들이 한페이지에서 관리가 되어야 한다.

기존 방식으로 하려면 페이지를 몇단계 나눠서 분리하거나 한폼에 보두 집어 넣어서 일괄 등록, 수정해야 한다.

효율성과 트래픽을 잡아먹는 단점이 있다.

그래서 사용하는 방법이 ajax를 이용하여 각 정보를 별도 폼으로 분리하여 통신하는 것이다.

한페이지내에 각 정보별로 폼을 구성하여 독립적으로 운영되는 것이다.

분리된 폼은 기본키값으로 서로 연결된다.

우선 계정 생성 채널 정보가 입력이 된 후에야 나머지 정보들을 입력할 수 있다.

ajax 통신을 하기 때문에 입력폼에 입력하고 확인 버튼만 클릭하면 데이터가 전송이 되고 결과값을 받아온다.

페이지를 다시 로딩하지 않기 때문에 그만큼 트래픽 사용을 줄일 수 있다.

개발언어는 닷넷 C#을 사용하는데 C#에는 약간의 문제점이 있다.

내가 닷넷을 잘 몰라서 그런지는 몰라도 닷넷에는 서버컨트롤이 존재하는데 이것이 오히려 불편할 때가 많다.

편한점도 있긴 하지만 서버컨트롤을 사용하게 되면 쓸데없는 코드들이 부가적으로 많이 생성되고 그러다 보니 자바스크립트와도 호환이 잘 안된다.

마스터 페이지를 사용하면 id값이 제멋되로 바뀌어 버린다.

그래서 이번에는 아예 서버컨트롤은 제외하고 순수 html 태그만을 사용했다.

완성된 페이지는 아래와 같다.

입력할 내용이 무척 많다.

그렇다보니 개별적으로 관리할 수 밖에 없다. 각 정보별로 디비 테이블이 구성되어 있다.

깔끔한 디자인을 위해 테이블 스타일 시트 적용. -> http://icant.co.uk/csstablegallery/

css만 다운받으면 기본 테이블 태그만으로도 깔끔하게 정리가 된다.

각 매체사 사업자 정보는 팝업창을 이용한다.

이제 본격적으로 jquery의 능력을 발휘할 때가 왔다.

아래는 기본 ui에서 제공하는 달력 플러그인을 사용한 모습이다.

날짜 필드가 여러개가 있어 개별적으로 효과를 준것이 아니고 입력 필드에 스타일 클래스를 지정하고 해당 클래스 이름에 효과를 주면 된다.

$(".set_date").datepicker();

<input type="text" name="AE_ASSIGN_DAY" id="AE_ASSIGN_DAY" style="width:60px;" class="set_date" />

달랑 한줄이면 마법처럼 모든 날짜 입력 필드에 datepicker가 적용이 된다. 너무나 간편하다.

정보를 입력하고 ajax로 폼전송 하기

ajax를 사용하기 때문에 페이지 이동 없이 현재 페이지에서 데이타 전송하고 결과값을 출력해준다. 에러가 발생하면 에러값 출력.

blockUI를 사용하여 폼전송 중에는 수정이 불가능하게 처리하였고 시각적으로도 뭔가가 진행되는 효과가 있다.

결과값도 alert창 대신 레이어창을 사용할 수 있으나 시간상 alert창으로 했다.

        // 폼 전송
        var options = {
            dataType: 'json',
            beforeSubmit: showRequest,  // pre-submit callback
            success: processJson  // post-submit callback 
        };

        $("#frm_channel").ajaxForm(options);

dataType 은 전송완료 후 받을 데이타타입으로 json을 사용한다.

beforeSubmit에서 전송전에 실행할 함수를 적고 success에 전송완료 후 실행할 함수를 적는다.

showRequest에서 데이터 유효성 체크해 주고 blockUI 적용하고 processJson에서 결과를 json으로 받아 처리해주고 unblock시키고.

제대로 저장이 되었으면 다음 작업이 가능하게 해준다.

jQuery Form Plugin http://malsup.com/jquery/form/#getting-started

jQuery BlockUI Plugin http://malsup.com/jquery/block/#overview

다음은 셀렉트 박스 선택시 동적으로 데이타 가져오기

재대행사를 선택하면 재대행사 리스트를 불러와서 업체명에 셀렉트박스를 표시해준다.

셀렉트 박스는 숨겨놓았다가 리스트 가져와서 옵션값을 추가해준다.

        $("#AGENT_TYPE").change(function() {
                $("#select_agent").show(300);
                $.post("Action.aspx", { mode: "select_agent" }, function(data) {
                    for (i = 0; i < data.item.length; i++) {
                        $("#select_agent").get(0).options[i + 1] = new Option(data.item[i].text, data.item[i].value);
                    }
                }, "json");
        });

ajax로 post 통신을 하고 결과값을 json 형태로 받는다.

리스트 갯수만큼 루프를 돌며 선택옵션을 추가해 준다.

업체명을 선택하면 역시 업체정보를 동적으로 가져와서 기본 정보를 입력해준다.

        $("#select_agent").change(function() {

            // 선택값 가져오기
            var key = "", text = "";
            $("select[name='select_agent'] option:selected").each(function() {
                key = $(this).val();
                text = $(this).text();
            });

            // 업체명 입력하고 수정 못하게 설정
            $("#AGENT_NAME").val(text).attr("readonly", true); 

            // 키값으로 업체정보 가져오기
            $.post("Action.aspx", { mode: "get_agent_info", idx_agent: key }, function(data) {
                // 설정값 셋팅
                $("#OVERTURE_HS").val(data.OVERTURE_HS);
                $("#NAVER_CPC_HS").val(data.NAVER_CPC_HS);
                $("#NAVER_CPM_HS").val(data.NAVER_CPM_HS);
                $("#GOOGLE_HS").val(data.GOOGLE_HS);
                $("#DAUM_HS").val(data.DAUM_HS);               
            }, "json");
        });

핵심은 폼은 여러개지만 각 아이디 값으로 같은 로직을 그대로 사용하기 때문에 코드 중복이 없다.

모든 디비 처리는 Action.aspx에서 처리하도록 구성했다.

단 여러개의 데이타가 입력되는 광고주 담당자 정보와 계정히스트리는 아이프레임으로 별도 처리했다.

리스트 형태로 보여줘야 하고 수정, 삭제가 가능해야 되기 때문에.

Validation plugin(http://bassistance.de/jquery-plugins/jquery-plugin-validation/)을 사용해보고 싶었으나 시간이 촉박하다 보니 사용법이 워낙 다양해서 포기하고 그냥 간단하게 만들어서 사용했다.

꽤 쓸만한것 같긴 한데 너무 확장을 많이 한 느낌이다.

입력값 체크하는 함수
        function checkElement(el, msg) {

            if (el.length) {
                var check = false;
                for (i = 0; i < el.length; i++) {
                    if (el[i].checked == true) {
                        check = true;
                        break;
                    }
                }

                if (!check) { alert(msg + " 선택하세요!"); el[0].focus(); return false; }
            } else {
                if (!el.value) {
                    alert(el.form.name + "." + el.name + " : " + el.value + "\n\n" + msg + " 입력하세요!");
                    if (el.type != "hidden") { el.focus(); }
                    return false;
                }
            }
            return true;
        }

간만에 작업하다 보니 시간이 많이 걸렸다.

막상 전체 코드를 보니 별로 특별한 것도 없는데 이것도 아마 jquery의 능력이 아닌가 싶다.

쉽고, 간결한데 결과는 무척 뛰어나다.