Showing
8 changed files
with
217 additions
and
139 deletions
... | @@ -327,6 +327,8 @@ th { | ... | @@ -327,6 +327,8 @@ th { |
327 | border-color: inherit; | 327 | border-color: inherit; |
328 | border-style: solid; | 328 | border-style: solid; |
329 | border-width: 0; | 329 | border-width: 0; |
330 | + border: 1px solid #444444; | ||
331 | + padding: 2px; | ||
330 | } | 332 | } |
331 | 333 | ||
332 | label { | 334 | label { |
... | @@ -1969,8 +1971,10 @@ progress { | ... | @@ -1969,8 +1971,10 @@ progress { |
1969 | margin-bottom: 1rem; | 1971 | margin-bottom: 1rem; |
1970 | color: #212529; | 1972 | color: #212529; |
1971 | vertical-align: top; | 1973 | vertical-align: top; |
1974 | + border: 1px solid #444444; | ||
1972 | border-color: #dee2e6; | 1975 | border-color: #dee2e6; |
1973 | } | 1976 | } |
1977 | + | ||
1974 | .table > :not(caption) > * > * { | 1978 | .table > :not(caption) > * > * { |
1975 | padding: 0.5rem 0.5rem; | 1979 | padding: 0.5rem 0.5rem; |
1976 | background-color: var(--bs-table-bg); | 1980 | background-color: var(--bs-table-bg); | ... | ... |
... | @@ -16,7 +16,17 @@ | ... | @@ -16,7 +16,17 @@ |
16 | <link href="../css/styles.css" rel="stylesheet" /> | 16 | <link href="../css/styles.css" rel="stylesheet" /> |
17 | </head> | 17 | </head> |
18 | <body> | 18 | <body> |
19 | - | 19 | + <!-- Navigation--> |
20 | + <nav class="navbar navbar-light bg-light static-top"> | ||
21 | + <div class="container"> | ||
22 | + <a class="navbar-brand" href="/main">묵호의 놀이터</a> | ||
23 | + <div class="user"> | ||
24 | + <a class="btn btn-primary" href="/login">로그인</a> | ||
25 | + <a class="btn btn-primary" href="/register">회원가입</a> | ||
26 | + </div> | ||
27 | + </div> | ||
28 | + </nav> | ||
29 | + | ||
20 | </body> | 30 | </body> |
21 | 31 | ||
22 | </html> | 32 | </html> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -42,8 +42,6 @@ DB구조 - board에서 사용됨(*idx, name, title, content, regdate, modidate, | ... | @@ -42,8 +42,6 @@ DB구조 - board에서 사용됨(*idx, name, title, content, regdate, modidate, |
42 | LF 오류시 git config --global core.autocrlf true 입력<br><br> | 42 | LF 오류시 git config --global core.autocrlf true 입력<br><br> |
43 | 43 | ||
44 | 44 | ||
45 | -최종 수정: 2021-11-17 06:01<br> | 45 | +최종 수정: 2021-11-18 13:17<br> |
46 | -최종 수정 내용: 게시판의 글쓰기 및 글 열람 기능 추가. | 46 | +최종 수정 내용: 게시판에 기본 서식 추가, 로그인시에만 게시판 관련 경로에 접근가능하게 함 |
47 | -최종 수정: 2021-11-17 14:25<br> | 47 | +수정 내용: 경로 지정 수정, 제목 추가, userDB, 회원가입에 nickname요소 추가, 세션에 ID + 닉네임 전달기능 추가, 게시판의 글쓰기 및 글 열람 기능 추가. |
48 | -최종 수정 내용: 세션에 ID + 닉네임 전달기능 추가 | ||
49 | -수정 내용: 경로 지정 수정, 제목 추가, userDB, 회원가입에 nickname요소 추가 | ... | ... |
1 | +const e = require('express'); | ||
1 | var express = require('express'); | 2 | var express = require('express'); |
2 | const { connect } = require('http2'); | 3 | const { connect } = require('http2'); |
3 | var router = express.Router(); | 4 | var router = express.Router(); |
... | @@ -8,25 +9,37 @@ var board = mysql_odbc.init(); | ... | @@ -8,25 +9,37 @@ var board = mysql_odbc.init(); |
8 | 9 | ||
9 | 10 | ||
10 | router.get('/list/:page', function(req, res, next) { | 11 | router.get('/list/:page', function(req, res, next) { |
11 | - var page = req.params.page; | 12 | + var id = req.user; |
12 | - var sql = "select idx, name, title, date_format(modidate,'%Y-%m-%d %H:%i:%s') modidate, " + | 13 | + if(!id) res.redirect('/board/list') |
13 | - "date_format(regdate,'%Y-%m-%d %H:%i:%s') regdate from board"; | 14 | + else{ |
14 | - | 15 | + var page = req.params.page; |
15 | - board.query(sql, function(err,rows) { | 16 | + var sql = "select idx, name, title, date_format(modidate,'%Y-%m-%d %H:%i:%s') modidate, " + |
16 | - if (err) console.error("err : " + err); | 17 | + "date_format(regdate,'%Y-%m-%d %H:%i:%s') regdate from board"; |
17 | - var id = req.user.ID; | 18 | + |
18 | - var nickname = req.user.nickname; | 19 | + board.query(sql, function(err,rows) { |
19 | - if(!id) nickname = "손님" // 수정 예정 | 20 | + if (err) console.error("err : " + err); |
20 | - res.render('list.ejs', {'ID':id, 'nickname': nickname, title: '게시판 리스트', rows: rows}) | 21 | + var id = req.user.ID; |
21 | - }) | 22 | + var nickname = req.user.nickname; |
23 | + if(!id) nickname = "손님" // 수정 예정 | ||
24 | + res.render('list.ejs', {'ID':id, 'nickname': nickname, title: '게시판 리스트', rows: rows}) | ||
25 | + }) | ||
26 | + } | ||
22 | }); | 27 | }); |
23 | 28 | ||
24 | router.get('/list', function(req,res,next){ | 29 | router.get('/list', function(req,res,next){ |
25 | - res.redirect('/board/list/1') | 30 | + var id = req.user; |
31 | + if(!id) res.sendFile(path.join(__dirname, "../../public/login.html")) | ||
32 | + else res.redirect('/board/list/1') | ||
26 | }) | 33 | }) |
27 | 34 | ||
28 | router.get('/write', function(req,res,next){ | 35 | router.get('/write', function(req,res,next){ |
29 | - res.render('write.ejs', {title:"게시판 글 쓰기"}) | 36 | + var id = req.user; |
37 | + if(!id) res.sendFile(path.join(__dirname, "../../public/login.html")) | ||
38 | + else{ | ||
39 | + var id = req.user.ID; | ||
40 | + var nickname = req.user.nickname; | ||
41 | + res.render('write.ejs', {'ID':id, 'nickname': nickname, title:"게시판 글 쓰기"}) | ||
42 | + } | ||
30 | }) | 43 | }) |
31 | 44 | ||
32 | router.post('/write', function(req,res,next){ | 45 | router.post('/write', function(req,res,next){ |
... | @@ -49,7 +62,14 @@ router.get('/read/:idx', function(req,res,next){ | ... | @@ -49,7 +62,14 @@ router.get('/read/:idx', function(req,res,next){ |
49 | "date_format(regdate,'%Y-%m-%d %H:%i:%s') regdate,hit from board where idx=?"; | 62 | "date_format(regdate,'%Y-%m-%d %H:%i:%s') regdate,hit from board where idx=?"; |
50 | board.query(sql,[idx], function(err,row){ | 63 | board.query(sql,[idx], function(err,row){ |
51 | if(err) console.error(err) | 64 | if(err) console.error(err) |
52 | - res.render('read.ejs', {title:"글 상세", row:row[0]}) | 65 | + |
66 | + var id = req.user; | ||
67 | + if(!id) res.redirect('/board/list') | ||
68 | + else{ | ||
69 | + var id = req.user.ID; | ||
70 | + var nickname = req.user.nickname; | ||
71 | + res.render('read.ejs', {'ID':id, 'nickname': nickname, title:"글 상세", row:row[0]}) | ||
72 | + } | ||
53 | }) | 73 | }) |
54 | }) | 74 | }) |
55 | 75 | ... | ... |
... | @@ -5,7 +5,7 @@ var path = require('path') // 상대경로 | ... | @@ -5,7 +5,7 @@ var path = require('path') // 상대경로 |
5 | 5 | ||
6 | // main page는 login이 된 상태(세션정보가 있을때만) 접근이 가능하게 하자 -> info에 구현해놓음. | 6 | // main page는 login이 된 상태(세션정보가 있을때만) 접근이 가능하게 하자 -> info에 구현해놓음. |
7 | router.get('/', function(req, res){ | 7 | router.get('/', function(req, res){ |
8 | - var id = req.user.ID; | 8 | + var id = req.user; |
9 | if(!id) res.sendFile(path.join(__dirname, "../../public/main.html")) | 9 | if(!id) res.sendFile(path.join(__dirname, "../../public/main.html")) |
10 | if(id){ | 10 | if(id){ |
11 | var nickname = req.user.nickname; | 11 | var nickname = req.user.nickname; | ... | ... |
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | -<html> | 2 | +<html leng="en"> |
3 | -<head> | 3 | + <head> |
4 | - <title>묵호 - 놀이터</title> | 4 | + <meta charset="utf-8" /> |
5 | - <!-- Favicon--> | 5 | + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> |
6 | - <link rel="icon" type="image/x-icon" href="../assets/favicon.ico" /> | 6 | + <meta name="description" content="" /> |
7 | - <link rel='stylesheet' href='/stylesheets/style.css'/> | 7 | + <meta name="author" content="" /> |
8 | -</head> | 8 | + <title>묵호 - 놀이터</title> |
9 | -<body> | 9 | + <!-- Favicon--> |
10 | - <!-- Navigation--> | 10 | + <link rel="icon" type="image/x-icon" href="../assets/favicon.ico" /> |
11 | - <nav class="navbar navbar-light bg-light static-top"> | 11 | + <!-- Bootstrap icons--> |
12 | - <div class="container"> | 12 | + <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" type="text/css" /> |
13 | - <a class="navbar-brand" href="/main">묵호의 놀이터</a> | 13 | + <!-- Google fonts--> |
14 | - <div class="user"> | 14 | + <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css" /> |
15 | - <a> <%= nickname %> 님 안녕하세요 </section></a> | 15 | + <!-- Core theme CSS (includes Bootstrap)--> |
16 | - <a class="btn btn-primary" href="/logout">로그아웃</a> | 16 | + <link href="/css/styles.css?after" rel="stylesheet" /> |
17 | + </head> | ||
18 | + <body> | ||
19 | + <!-- Navigation--> | ||
20 | + <nav class="navbar navbar-light bg-light static-top"> | ||
21 | + <div class="container"> | ||
22 | + <a class="navbar-brand" href="/main">묵호의 놀이터</a> | ||
23 | + <div class="user"> | ||
24 | + <a> <%= nickname %> 님 안녕하세요 </section></a> | ||
25 | + <a class="btn btn-primary" href="/logout">로그아웃</a> | ||
26 | + </div> | ||
17 | </div> | 27 | </div> |
28 | + </nav> | ||
29 | + <div class="container px-5 my-5"> | ||
30 | + <h1><%= title %></h1> | ||
31 | + <a href="/board/write">글쓰기</a> | ||
32 | + <table border="1"> | ||
33 | + <tr> | ||
34 | + <td>번호</td> | ||
35 | + <td>작성자</td> | ||
36 | + <td>제목</td> | ||
37 | + <td>조회수</td> | ||
38 | + <td>수정일</td> | ||
39 | + <td>등록일</td> | ||
40 | + </tr> | ||
41 | + <% | ||
42 | + for(var i=0; i<rows.length; i++) | ||
43 | + { | ||
44 | + var data = rows[i]; | ||
45 | + %> | ||
46 | + <tr> | ||
47 | + <td><%=data.idx%></td> | ||
48 | + <td><%=data.name%></td> | ||
49 | + <td><a href="/board/read/<%=data.idx%>"><%=data.title%></a></td> | ||
50 | + <td><%=data.hit%></td> | ||
51 | + <td><%=data.modidate%></td> | ||
52 | + <td><%=data.regdate%></td> | ||
53 | + </tr> | ||
54 | + <%}%> | ||
55 | + </table> | ||
18 | </div> | 56 | </div> |
19 | - </nav> | 57 | + </body> |
20 | - <h1><%= title %></h1> | ||
21 | - <a href="/board/write">글쓰기</a> | ||
22 | - <table border="1"> | ||
23 | - <tr> | ||
24 | - <td>번호</td> | ||
25 | - <td>작성자</td> | ||
26 | - <td>제목</td> | ||
27 | - <td>조회수</td> | ||
28 | - <td>수정일</td> | ||
29 | - <td>등록일</td> | ||
30 | - </tr> | ||
31 | - <% | ||
32 | - for(var i=0; i<rows.length; i++) | ||
33 | - { | ||
34 | - var data = rows[i]; | ||
35 | - %> | ||
36 | - <tr> | ||
37 | - <td><%=data.idx%></td> | ||
38 | - <td><%=data.name%></td> | ||
39 | - <td><a href="/board/read/<%=data.idx%>"><%=data.title%></a></td> | ||
40 | - <td><%=data.hit%></td> | ||
41 | - <td><%=data.modidate%></td> | ||
42 | - <td><%=data.regdate%></td> | ||
43 | - </tr> | ||
44 | - <%}%> | ||
45 | - </table> | ||
46 | -</body> | ||
47 | </html> | 58 | </html> |
48 | 59 | ... | ... |
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | <html> | 2 | <html> |
3 | <head> | 3 | <head> |
4 | - <title><%= title %></title> | 4 | + <title>묵호 - 놀이터</title> |
5 | - <link rel='stylesheet' href='/stylesheets/style.css'/> | 5 | + <!-- Favicon--> |
6 | + <link rel="icon" type="image/x-icon" href="../assets/favicon.ico" /> | ||
7 | + <!-- Bootstrap icons--> | ||
8 | + <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" type="text/css" /> | ||
9 | + <!-- Google fonts--> | ||
10 | + <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css" /> | ||
11 | + <!-- Core theme CSS (includes Bootstrap)--> | ||
12 | + <link href="/css/styles.css?after" rel="stylesheet" /> | ||
13 | + | ||
6 | </head> | 14 | </head> |
7 | <body> | 15 | <body> |
8 | -<h1><%= title %></h1> | 16 | + <!-- Navigation--> |
9 | - | 17 | + <nav class="navbar navbar-light bg-light static-top"> |
10 | -<form action="/board/update" method="post"> | 18 | + <div class="container"> |
11 | - <table border="1"> | 19 | + <a class="navbar-brand" href="/main">묵호의 놀이터</a> |
12 | - <input type="hidden" name="idx" value="<%=row.idx%>"/> | 20 | + <div class="user"> |
13 | - <tr> | 21 | + <a> <%= nickname %> 님 안녕하세요 </section></a> |
14 | - <td>작성자</td> | 22 | + <a class="btn btn-primary" href="/logout">로그아웃</a> |
15 | - <td><input type="text" name="name" id="name" value="<%=row.name%>" required/></td> | 23 | + </div> |
16 | - </tr> | 24 | + </div> |
17 | - <tr> | 25 | + </nav> |
18 | - <td>제목</td> | 26 | + <div class="container px-5 my-5"> |
19 | - <td><input type="text" name="title" id="title" value="<%=row.title%>" required/></td> | 27 | + <h1><%= title %></h1> |
20 | - </tr> | ||
21 | - <tr> | ||
22 | - <td>내용</td> | ||
23 | - <td><textarea name="content" id="content" cols="30" rows="10" required><%=row.content%></textarea></td> | ||
24 | - </tr> | ||
25 | - <tr> | ||
26 | - <td>패스워드</td> | ||
27 | - <td><input type="password" name="passwd" id="passwd" required/></td> | ||
28 | - </tr> | ||
29 | - <tr> | ||
30 | - <td>변경일</td> | ||
31 | - <td><%=row.modidate%></td> | ||
32 | - </tr> | ||
33 | - <tr> | ||
34 | - <td>등록일</td> | ||
35 | - <td><%=row.regdate%></td> | ||
36 | - </tr> | ||
37 | - <tr> | ||
38 | - <td>조회수</td> | ||
39 | - <td><%=row.hit%></td> | ||
40 | - </tr> | ||
41 | - <tr> | ||
42 | - <td colspan="2"> | ||
43 | - <button type="submit">글 수정</button> | ||
44 | - <a href="/board/list">목록</a> | ||
45 | - </td> | ||
46 | - </tr> | ||
47 | - </table> | ||
48 | -</form> | ||
49 | 28 | ||
29 | + <form action="/board/update" method="post"> | ||
30 | + <table border="1"> | ||
31 | + <input type="hidden" name="idx" value="<%=row.idx%>"/> | ||
32 | + <tr> | ||
33 | + <td>작성자</td> | ||
34 | + <td><input type="text" name="name" id="name" value="<%=row.name%>" required/></td> | ||
35 | + </tr> | ||
36 | + <tr> | ||
37 | + <td>제목</td> | ||
38 | + <td><input type="text" name="title" id="title" value="<%=row.title%>" required/></td> | ||
39 | + </tr> | ||
40 | + <tr> | ||
41 | + <td>내용</td> | ||
42 | + <td><textarea name="content" id="content" cols="30" rows="10" required><%=row.content%></textarea></td> | ||
43 | + </tr> | ||
44 | + <tr> | ||
45 | + <td>패스워드</td> | ||
46 | + <td><input type="password" name="passwd" id="passwd" required/></td> | ||
47 | + </tr> | ||
48 | + <tr> | ||
49 | + <td>변경일</td> | ||
50 | + <td><%=row.modidate%></td> | ||
51 | + </tr> | ||
52 | + <tr> | ||
53 | + <td>등록일</td> | ||
54 | + <td><%=row.regdate%></td> | ||
55 | + </tr> | ||
56 | + <tr> | ||
57 | + <td>조회수</td> | ||
58 | + <td><%=row.hit%></td> | ||
59 | + </tr> | ||
60 | + <tr> | ||
61 | + <td colspan="2"> | ||
62 | + <button type="submit">글 수정</button> | ||
63 | + <a href="/board/list">목록</a> | ||
64 | + </td> | ||
65 | + </tr> | ||
66 | + </table> | ||
67 | + </form> | ||
68 | + </div> | ||
50 | </body> | 69 | </body> |
51 | </html> | 70 | </html> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | <html> | 2 | <html> |
3 | <head> | 3 | <head> |
4 | - <title><%= title %></title> | 4 | + <title>묵호 - 놀이터</title> |
5 | - <link rel='stylesheet' href='/stylesheets/style.css'/> | 5 | + <!-- Favicon--> |
6 | + <link rel="icon" type="image/x-icon" href="../assets/favicon.ico" /> | ||
7 | + <!-- Bootstrap icons--> | ||
8 | + <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" type="text/css" /> | ||
9 | + <!-- Google fonts--> | ||
10 | + <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css" /> | ||
11 | + <!-- Core theme CSS (includes Bootstrap)--> | ||
12 | + <link href="/css/styles.css?after" rel="stylesheet" /> | ||
6 | </head> | 13 | </head> |
7 | <body> | 14 | <body> |
8 | -<h1><%= title %></h1> | 15 | + <!-- Navigation--> |
9 | - | 16 | + <nav class="navbar navbar-light bg-light static-top"> |
10 | - | 17 | + <div class="container"> |
11 | -<form action="/board/write" method="post"> | 18 | + <a class="navbar-brand" href="/main">묵호의 놀이터</a> |
12 | - <table border="1"> | 19 | + <div class="user"> |
13 | - <tr> | 20 | + <a> <%= nickname %> 님 안녕하세요 </section></a> |
14 | - <td>작성자</td> | 21 | + <a class="btn btn-primary" href="/logout">로그아웃</a> |
15 | - <td><input type="text" name="name" id="name" required/></td> | 22 | + </div> |
16 | - </tr> | 23 | + </div> |
17 | - <tr> | 24 | + </nav> |
18 | - <td>제목</td> | 25 | + <div class="container px-5 my-5"> |
19 | - <td><input type="text" name="title" id="title" required/></td> | 26 | + <h1><%= title %></h1> |
20 | - </tr> | 27 | + <form action="/board/write" method="post"> |
21 | - <tr> | 28 | + |
22 | - <td>내용</td> | 29 | + <table border="1"> |
23 | - <td><textarea name="content" id="content" cols="30" rows="10" required></textarea></td> | 30 | + <tr> |
24 | - </tr> | 31 | + <td>작성자</td> |
25 | - <tr> | 32 | + <td><input type="text" name="name" id="name" required/></td> |
26 | - <td>패스워드</td> | 33 | + </tr> |
27 | - <td><input type="password" name="passwd" id="passwd" required/></td> | 34 | + <tr> |
28 | - </tr> | 35 | + <td>제목</td> |
29 | - <tr> | 36 | + <td><input type="text" name="title" id="title" required/></td> |
30 | - <td colspan="2"> | 37 | + </tr> |
31 | - <button type="submit">글쓰기</button> | 38 | + <tr> |
32 | - </td> | 39 | + <td>내용</td> |
33 | - </tr> | 40 | + <td><textarea name="content" id="content" cols="30" rows="10" required></textarea></td> |
34 | - </table> | 41 | + </tr> |
35 | -</form> | 42 | + <tr> |
36 | - | 43 | + <td>패스워드</td> |
37 | - | 44 | + <td><input type="password" name="passwd" id="passwd" required/></td> |
45 | + </tr> | ||
46 | + <tr> | ||
47 | + <td colspan="2"> | ||
48 | + <button type="submit">글쓰기</button> | ||
49 | + </td> | ||
50 | + </tr> | ||
51 | + </table> | ||
52 | + </form> | ||
53 | + </div> | ||
38 | </body> | 54 | </body> |
39 | </html> | 55 | </html> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or login to post a comment