제목: 글쓰기 페이지 구성 (Client)

최초작성일: 2015-01-05

최종수정일: 2015-01-05

 2015년 새해가 밝았습니다. 다들 2015년에는 하시는 일 원하시는대로 이루어지길 빌겠습니다. 물론 저도, 우리 꼬맹이도 건강하고 많이 이루어나가는 한 해가 되었으면 좋겠네요. 정말 한 해가 지나고 새해가 밝으면 문자 그대로 많은 일들을 후회하고, 새해에 대한 다짐과 기대에 차오르는 것 같습니다. 2015년에는 많은 핑계들로 다짐을 지워가는 한 해는 되지 않도록 열심히 살아봐야겠네요. 지난 시간에 목록 페이지에 이어 상세 페이지까지 개발해 보았습니다. 이제 신규로 글을 등록하는 기능을 구현해보도록 하겠습니다. 글 등록 역시 일단은 서버가 없으니 UI만 만들어보도록 하겠습니다. Local Storage에 저장할 수도 있고, WEB Database에 저장할 수도 있겠지만, 일단 저장은 하지 않고 UI 개발만 하고 멈추도록 하겠습니다. 입력에 사용할 항목은 아래와 같이 정의합니다.

-. 입력자 성명
-. 게시물 제목
-. 게시물 내용
-. 비밀번호
그럼 UI를 구성해보겠습니다.
1. 기본 HTML 구조 작성
글쓰기 페이지 역시 [헤더] - [본문] - [푸터]로 영역을 분할하여 구성하겠습니다. 아래 소스 코드를 참고하셔서 ./bbs_write.html 파일로 저장합니다.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8">
        <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
        <title>Mobile BBS</title>
        <link rel="stylesheet" type="text/css" href="./css/common.css" />
    </head>
    <body>
        <header>
            <h1>Mobile BBS</h1>
        </header>
         
        <div class="wrap">
            <div class="content_line">
                <span class="header">작성자</span>
                <span><input type="text" class="input" id="inputUserName"><span>
                    </span></span></div>
            <div class="content_line">
                <span class="header">비밀번호</span>
                <span><input type="text" class="input" id="password"></span>
            </div>
            <div class="content_line">
                <span class="header">글제목</span>
                <span><input type="text" class="input" id="subject"></span>
            </div>
            <div class="content_line">
                <span class="header">글내용</span>
                <span><textarea id="content" class="text"></textarea></span>
            </div>
        </div>
         
        <footer>
            <button id="btnWrite">글쓰기</button>
        </footer>
    </body>
    <script type="text/javascript" charset="utf-8" src="./scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="./scripts/common.js"></script>
</html>
HTML 페이지는 구조만 선언하므로 큰 내용이 없습니다. 글쓰기 페이지에서 표시할 정보에 대한 구조를 선언했습니다. 사용자가 입력해야 하는 값인 작성자, 비밀번호, 글제목, 글내용 컬럼을 입력할 수 있는 inputbox가 화면의 전부입니다. 글내용은 긴 내용도 입력할 수 있어야 하기 때문에 textarea로 구성합니다.
그럼 이제 글쓰기 페이지의 모양을 위해 간단하게 StyleSheet를 추가해보겠습니다.
2. StyleSheet 작성

StyleSheet는 모든 페이지에서 common.css를 사용하도록 하겠습니다. common.css에 글쓰기 페이지와 관련된 부분을 추가해보겠습니다.

?
1
2
3
.wrap .content_line .header{display:inline-block;width:100px;text-align:center;vertical-align:top;padding-top:5px;}
.wrap .content_line .input{width:250px;border:1px solid #ccc;background-color:#f4f4f4;border-radius:3px;height:22px;line-height:22px;}
.wrap .content_line .text{width:250px;border:1px solid #ccc;background-color:#f4f4f4;border-radius:3px;height:200px;line-height:200px;}
일단 inputbox 및 textarea의 크기는 고정으로 사용합니다. 입력할 내용이나 프로젝트의 UI 표준에 맞게 화면의 크기에 반응하여 늘어나게 해도 되고, 현재처럼 고정으로 사용하기도 합니다. CSS 까지 적용하시면 아래 그림과 같은 화면이 완성됩니다.


3. JavaScript 작성
글쓰기 페이지는 아직 서버와 인터페이스하지 않는 부분까지만 개발할 예정이므로, 개발할 수 있는 부분이 많지 않습니다.
-. Validation
-. 서버 인터페이스
-. 목록 화면으로 Re-Direction
작업 중 이번 과정에서는 Validation 부분과 인터페이스를 할 수 있는 모듈까지만 작성해보도록 하겠습니다. 그럼 먼저 Validation 부분을 살펴보도록 하겠습니다. 일반적으로는 4개의 컬럼이 필수라면 아래의 코드와 같이 작성합니다.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
if ($('#inputUserName').val() == '') {
    alert('작성자는 필수 입력입니다.');
    return;
}
 
if ($('#password').val() == '') {
    alert('비밀번호는 필수 입력입니다.');
    return;
}
 
if ($('#subject').val() == '') {
    alert('글제목은 필수 입력입니다.');
    return;
}
 
if ($('#content').val() == '') {
    alert('글내용은 필수 입력입니다.');
    return;
}
jQuery Selector로 필수로 입력해야 하는 값들을 체크하여 값이 없을 경우 alert을 return하는 내용입니다. 하지만 필수 입력값이 많다면 저런 방식의 코드는 비효율적일 수 있으니 간단하게 현재 사용하는 inputbox와 textarea 만을 고려하여 Validation 후 미입력된 필수값을 alert으로 알려주는 코드를 구현해 보겠습니다. 먼저 HTML 파일을 아래와 같이 수정합니다.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="wrap">
    <div class="content_line">
        <span class="header">작성자</span>
        <span><input type="text" class="input mandatory" id="inputUserName" data="작성자"><span>
    </span></span></div>
    <div class="content_line">
        <span class="header">비밀번호</span>
        <span><input type="password" class="input mandatory" id="password" data="비밀번호"></span>
    </div>
    <div class="content_line">
        <span class="header">글제목</span>
        <span><input type="text" class="input mandatory" id="subject" data="글제목"></span>
    </div>
    <div class="content_line">
        <span class="header">글내용</span>
        <span><textarea id="content" class="text mandatory" data="글내용"></textarea></span>
    </div>
</div>
사용자가 필수로 입력해야 하는 값들에 mandatory 라는 class를 하나 추가했습니다. 그리고 data 속성을 추가하여 해당 입력값이 무엇을 의미하는지 표시하였습니다. 그럼 이어서 ./scripts/common.js 파일에 function을 하나 추가하도록 하겠습니다.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
COMM.validate = function() {
    var items = $('.mandatory');
    var messages = '', isValid = true;
    for (var inx=0; inx<items.length; inx++) {
        if ($(items[inx]).val() == '') {
            isValid = false;
            messages += $(items[inx]).attr('data') + '은(는) 필수 입력값입니다.\n';
            break;
        }
    }
     
    return {valid: isValid, messages: messages};
};
위 코드의 의미는 간단합니다. mandatory라는 class를 가진 element들을 Loop 돌면서 값이 입력되지 않았으면 해당 element에 값을 출력하라는 메시지를 return하는 함수입니다. 간단하게 구성해봤지만 이런 식으로 매번 반복적으로 사용했던 코드들을 공통화하는 방법을 생각하는 것은 매우 중요합니다. 그럼 위 코드를 호출하여 유효성 검사를 하는 부분을 구현해 보겠습니다. ./scripts/bbs_write.js 파일을 하나 생성하여 아래와 같이 작성합니다.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var WRITER = {};
 
var WRITER.write = function() {
    var validator = COMM.validate();
    if (!validator.valid) {
        alert(validator.messages);
        return;
    }
};
 
$(document).ready(function() {
    $('#btnWrite').on('click', function() {
        WRITER.write();
    });
});
이제 아무것도 입력하지 않은 상태에서 [저장하기] 버튼을 터치해보면 "작성자은(는) 필수 입력값입니다." 라는 경고 메시지가 출력됩니다. 물론 입력값을 모두 입력한 후에 [저장하기] 버튼을 터치해도 값이 입력되었을 경우에 대한 로직은 구현하지 않았으므로 아무 반응도 없습니다. 그럼 이제 서버와의 인터페이스를 위한 함수를 구현해 보겠습니다. 서버와의 인터페이스는 Form Submit 방식을 사용하지 않고 AJAX 방식으로 인터페이스하며, jQuery에서 제공하는 $.ajax 함수를 사용하여 인터페이스 하겠습니다. 일단 ./scripts/common.js 파일에 아래 코드와 같이 function을 추가합니다.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
COMM.doPost = function(url, input, success, fail) {
    var option = {};
    option.url = url + '?__jsonParams=' + JSON.stringify(input);
    option.type = 'POST';
    option.headers = {'Content-Type': 'application/json'};
    option.success = function(data) {
        try {
            if (typeof data == 'string') data = JSON.parse(data);
            success(data);
        } catch (e) {
            if (fail && typeof fail == 'function') {
                fail(e);
            } else {
                alert(e.stack);
            }
        }
    };
    option.error = function(jqXHR, status, error) {
        if (fail && typeof fail == 'function') {
            fail(error);
        } else {
            alert(error);
        }
    };
    $.ajax(option);
};
$.ajax를 간단하게 한 번 wrapping 한 형태입니다. 공통 성공, 실패 및 설정 부분에 대한 부분만 코딩되어 있습니다. 실제 프로젝트에서는 해당 프로젝트에서 사용하는 인터페이스 전문 및 파일 전송 여부 등에 따라 좀 더 꾸며져 있는 형태로 코딩하셔서 사용하시면 됩니다. 데이터를 전달하는 방법은 각자 프로젝트 성격에 맞게 Payload로 전달하셔도 되고, 아니면 샘플에서처럼 쿼리스트링 파라미터로 전달하셔도 됩니다. Payload에 전달하고 싶을 경우 아래 코드와 같이 써주시면 됩니다.
?
1
option.data = input;
자, 이번 시간은 네트워크 공통 모듈을 만드는 여기까지만 진행하겠습니다. 나머지는 Local 환경에 서버를 구성한 후 실제 인터페이스를 해보며 진행하겠습니다. 아직 이래저래 바쁘다보니 올해 달력은 자세히 못봤습니다. 하지만 달력이 꽤 좋다는 얘기는 좀 들리네요. 다들 일 때문에 늘 바쁘시겠지만 쉴 때는 좀 쉬어가며 Working & Life Balance를 잘 유지하는 한 해 되시기 바랍니다. 오늘도 수고하셨어요!


300x250
저작자표시 비영리 변경금지

'모바일 > 게시판만들기' 카테고리의 다른 글

[하이브리드앱 만들기] 모바일 간단 게시판 #3 - 상세 페이지  (0) 2015.01.05
[하이브리드앱 만들기] 모바일 간단 게시판 #2 - 목록 페이지  (2) 2015.01.04
[하이브리드앱 만들기] 모바일 간단 게시판 #1  (0) 2015.01.01

+ Recent posts

티스토리툴바