Node.js

Node.js와 Oracledb연동하여 게시판만들기-part1

node.js, database, oracledb, javascript

실습순서

  1. 글 등록하는 form을 생성
  2. 사용자가 글등록시 node.js를 통해 DB에 데이터를 전송
  3. 글 조회하는 목록게시판 생성
  4. node.js를 이용해 DB에 저장된 데이터를 페이징 처리와 함께 게시판으로 전달(select사용)

글을 등록하는 form 생성

루트 디렉토리(저같은 경우는 webserver2)에 writeForm.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
40
41
42
43
44
45
46
47
48
49
50
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>글쓰기 </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
    .wrapper{
        width:300px;
        border-radius:10px;
        border:5px solid #FF9E11;
        margin:auto;
    }
    .wrapper div{
        text-align:center;
    }
    .wrapper input, textarea, button{
        width:90%;
    }
    textarea{
        height:250px;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    function regist(){
        form1.action="/regist"; //서버의 url
        form1.submit();
    }
    </script>
</head>
<body>
	<div class="wrapper">	
		<form name="form1" method="post">
			<div>
				<input type="text" name="writer">
			</div>
			<div>
				<input type="text" name="title">
			</div>
			<div>
				<textarea name="content"></textarea>
			</div>
			<div>
				<button onClick="regist()">글등록</button>
			</div>
		</form>
	</div>
</body>
</html>

Oracle DB 구축하기

먼저, 윈도우키 + R -> console 창을 열어 줍니다.

1
sqlplus

oracle을 실행합니다. 

1
2
Enter username: node 
Enter Password: node

이전 Oracle Intro 포스팅을 참고하여 username:node, password: node 로 생성하고,
공지될 data들을 담을 Table Notice를 생성합니다.

1
2
3
4
5
6
7
8
Create Table NOTICE(
    NOTICE_ID Number, 
    WRITER varchar2(100) NOT NULL, 
    TITLE varchar2(100) NOT NULL, 
    CONTENT varchar2(100) NOT NULL,
    REGDATE varchar2(100) NOT NULL, 
    HIT Number
    );

sys은 오라클의 최고 권한 관리자입니다. 하지만 sys은 보통 아주 비중이 큰 작업을 할때만 사용합니다.
예를 들어, 백업, 복구 등등과 같은..
따라서 sys의 바로 밑에 system관리자 계정이 많은 일을 합니다.
우리는 이전 포스팅에서 만들어두었던 front 라는 user를 사용할 것입니다.

*** 만약 console에 입력한 코드들을 모두 저장하고 싶다면 webserver2에 oracle이라는 디렉토리를 생성하고
아래와 같이 입력합니다.

1
2
SQL> spool '[oracle파일의 경로]\[파일명].txt'
SQL> spool off

spool off를 하면 기록이 중지됩니다.

다시 기록을 시작할때는 위처럼 새롭게 파일명을 지정해서 spool작업을 하면 됩니다.

모든 DB시스템들에는 크게 3가지의 명령어가 존재합니다.

  • DDL(Database Definition Language) : Create, Drop, Alter
  • DML(Database Manippulation Language) : Insert, Delete, Update, Select
  • DCL(Database Control Language) : Grant, Revoke

node.js로 DB에 data삽입하기

이전 포스팅에서 했듯이 루트 디렉토리에 node.js를 구현할 파일 main.js을 먼저 만들어줍니다. 

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
var http = require("http");
var express= require("express");
var oracledb = require("oracledb");
oracledb.autoCommit = true;
var bodyParser = require("body-parser");
var ejs = require("ejs");//동적인 html 생성모듈 
var fs = require("fs"); //파일을 읽어들이는 내부모듈
var app = express();
var server = http.createServer(app);
app.use(express.static(__dirname));
app.use(bodyParser.urlencoded({extended:true}));
var conn;
//오라클 접속
oracledb.getConnection({
    user:"node",
    password:"node",
    connectString:"localhost/XE" //oracle설치할때 지정한 이름(파일명으로 확인가능)
},function(err,con){
    if(err){
        console.log("접속이 실패했습니다.",err);
    }
    conn = con;

});
//클라이언트로부터 regist를 요청받으면
app.post("/regist",function(request, response){
    console.log(request.body);
    //오라클에 접속해서 insert문을 실행한다. 
    var writer = request.body.writer;
    var title = request.body.title;
    var content = request.body.content;

        //쿼리문 실행 
        conn.execute("insert into notice(notice_id,writer,title,content) values(seq_notice.nextval,'"+writer+"','"+title+"','"+content+"')",function(err,result){
            if(err){
                console.log("등록중 에러가 발생했어요!!", err);
                response.writeHead(500, {"ContentType":"text/html"});
                response.end("fail!!");
            }else{
                console.log("result : ",result);
                response.writeHead(200, {"ContentType":"text/html"});
                response.end("success!!");
            }
        });
    });



//클라이언트로부터 list를 요청받으면 
app.get("/list",function(request,response){
    var total = 0;

    //페이징 처리 기법
    var currentPage = 1; //현재 보고 있는 페이지
    //사용자가 링크를 누른경우에는 넘어온 currentPage 값으로 대체해야한다.
    if(request.query.currentPage != undefined){
        currentPage = parseInt(request.query.currentPage);
    }
    var totalRecord = 0;
    conn.execute("select * from notice order by notice_id desc", function(err,result, fields){
        //field는 칼럼
        if(err){
            console.log("조회 실패");
        }

        totalRecord = result.rows.length;
        var pageSize = 10; //페이지당 보여질 레코드 수
        var totalPage=Math.ceil(totalRecord/pageSize); //전체페이지수
        var blockSize = 10; //블럭당 보여질 페이지 수
        var firstPage = currentPage-(currentPage-1)%blockSize; //블럭당 시작 페이지
        var lastPage= firstPage + blockSize - 1; //블럭당 마지막 페이지
        var num = totalRecord - (currentPage-1)*pageSize; //페이지당 시작 게시물 갯수 번호

        //ejs를 읽어야 함.
        fs.readFile("list.ejs","utf-8",function(error, data){
            if(error){
                console.log("읽기 실패");
            }
            response.writeHead(200,{"Content-Type":"text/html"});
            response.end(ejs.render(data,{
                currentPage:currentPage,
                totalRecord:totalRecord,
                pageSize:pageSize,
                totalPage:totalPage,
                blockSize:blockSize,
                firstPage:firstPage,
                lastPage:lastPage,
                num : num
            } )); //data를 해석
        });
    });

});


server.listen(9999, function(){
    console.log("웹서버 가동중...");
});

그다음 , html에 자바스크립트 언어를 입힌 ejs파일을 작성합니다. 

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<%="currentPage is"+currentPage%><br>
<%="totalRecord is"+totalRecord%><br>
<%="pageSize is"+pageSize%><br>
<%="totalPage is"+totalPage%><br>
<%="blockSize is"+blockSize%><br>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        a{
            text-decoration: none;
        }
        .numStyle{
            font-size: 25px;
            color: #9b4f90;
        }
    </style>
</head>
<body>
    <table align="center" border="1px" width="100%">
        <thead>
            <caption>공지 게시판</caption>
        </thead>
        <tbody>
            <tr>
                <th width="5%">NO</th>
                <th width="15%">작성자</th>
                <th width="60%">제목</th>
                <th width="15%">작성일</th>
                <th width="5%">조회수</th>
            </tr>
            <% for(var i=0; i< pageSize; i++){ %>
            <%if(num<1)break%>
            <tr>
                <td><%=num %></td>
                <td>이민정</td>
                <td>안녕하세요</td>
                <td>2018.08.04</td>
                <td>20</td>
            </tr>
            <%num--;%>
            <%}%>

        </tbody>
        <tfoot>
            <tr>
                <td colspan="5" align="center">

                    <%if(firstPage-1 > 1){//더 볼게 있다면%>
                    <a href="/list?currentPage=<%=firstPage-1%>">◀</a>
                    <%}else{%>
                    <a href="javascript:alert('처음페이지입니다.')">◀</a>
                    <%}%>

                    <%for(var i=firstPage;i<= lastPage; i++){%>
                    <%if(i>totalPage)break;%>
                    <a <%if(currentPage == i){%>class="numStyle"<%}%> href="/list?currentPage=<%=i%>">[<%=i%>]</a>
                    <%}%>
                    <%if(lastPage+1 < totalPage){//더 볼게 있다면%>
                    <a href="/list?currentPage=<%=lastPage+1%>">▶</a>
                    <%}else{%>
                    <a href="javascript:alert('마지막페이지입니다.')">▶</a>
                    <%}%>
                </td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
Share