1. 기본
ㄱ. 템플릿
module.exports = {
home: function(trs) {
return `
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<title>기아 타이거즈</title>
<style>
th, td { text-align: center }
</style>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>기아 타이거즈 선수단</h1>
</div>
<div class="container mt-3">
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<table class="table">
<tr>
<th>ID</th>
<th>선수명</th>
<th>백넘버</th>
<th>포지션</th>
</tr>
${trs} <!--동적으로td할당-->
</table>
</div>
<div class="col-2"></div>
</div>
</div>
</body>
</html>
`;
},
trsGen: function(rows) {
let trs = '';
for (let row of rows) {
trs += '<tr>';
trs += `<td>${row.id}</td><td>${row.player}</td>`;
trs += `<td>${row.backNo}</td><td>${row.POSITION}</td>`;
trs += '</tr>\n';
}
return trs;
}
}ㄴ. 앱
//모듈 오픈
const http = require('http');
const url = require('url');
const template = require('./view/template_bs5 copy');
const mysql = require('mysql');
const config = require('./mysql.json');
http.createServer((req, res) => {
let pathname = url.parse(req.url).pathname;
let query = url.parse(req.url, true).query;
switch(pathname) {
case '/': //홈
const conn = mysql.createConnection(config);
conn.connect();
const sql = `SELECT * FROM tigers;`;
conn.query(sql, (err, rows, fields) => {
if (err) //에러처리
throw err;
const trs = template.trsGen(rows); //로우(데이터)로 trs만들기
const html = template.home(trs);
res.end(html);
});
conn.end();
break;
default:
res.writeHead(404, {'Content-Type': 'text/html'});
res.end();
}
}).listen(3000, () => {
console.log('Server running at http://localhost:3000');
});:2. 추가 (create기능)
ㄱ. 템플릿
module.exports = {
home: function(trs) {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기아 타이거즈</title>
<style>
th, tr { text-align: center }
</style>
</head>
<body style="margin: 50px;">
<h1>기아 타이거즈 선수단</h1>
<button onclick="location.href='/create'">추가</button>
<hr>
<table>
<tr>
<th>ID</th>
<th>선수명</th>
<th>백넘버</th>
<th>포지션</th>
<th>액션</th>
</tr>
${trs}
</table>
</body>
</html>
`;
},
trsGen: function(rows) {
let trs = '';
for (let row of rows) {
trs += '<tr>';
trs += `<td>${row.id}</td><td>${row.player}</td>`;
trs += `<td>${row.backNo}</td><td>${row.POSITION}</td>`;
trs += `<td><a href="/update?id="${row.id}">수정</a>,
<a href="/delete?id="${row.id}">삭제</a></td>`;
trs += '</tr>';
}
return trs;
},
createForm: function() {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기아 타이거즈</title>
<style>
th, tr { text-align: center }
</style>
</head>
<body style="margin: 50px;">
<h1>기아 타이거즈 선수단</h1>
<button onclick="location.href='/'">홈으로</button>
<hr>
<form action="/create" method="post">
<table>
<tr>
<td>선수명</td><td><input type="text" name="player"></td>
</tr>
<tr>
<td>백넘버</td><td><input type="text" name="backNo"></td>
</tr>
<tr>
<td>포지션</td><td><input type="text" name="position"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="추가"></td>
</tr>
</table>
</form>
</body>
</html>
`;
}
}ㄴ. 앱
const http = require('http');
const url = require('url');
const qs = require('querystring');
const mysql = require('mysql');
const config = require('./mysql.json');
const template = require('./view/template');
http.createServer((req, res) => {
let pathname = url.parse(req.url).pathname;
switch(pathname) {
case '/': // 초기 홈 화면
const conn = mysql.createConnection(config);
conn.connect();
const sql = `SELECT * FROM tigers;`;
conn.query(sql, (err, rows, fields) => {
if (err)
throw err;
let trs = template.trsGen(rows);
let html = template.home(trs);
res.end(html);
});
conn.end();
break;
case '/create':
if (req.method == 'GET') { // 입력 폼 보여주기
let html = template.createForm();
res.end(html);
} else { // 사용자 입력 -> DB
let body = '';
req.on('data', data => {
body += data;
});
req.on('end', () => {
const param = qs.parse(body);
let player = param.player;
let backNo = parseInt(param.backNo);
let position = param.position;
const conn = mysql.createConnection(config);
conn.connect();
const sql = `INSERT INTO tigers (player, backNo, POSITION)
VALUES (?, ?, ?);`;
conn.query(sql, [player, backNo, position], (err, fields) => {
if (err)
throw err;
res.writeHead(302, {'Location': '/'});
res.end();
});
conn.end();
});
}
break;
default:
res.writeHead(404, {'Content-Type': 'text/html'});
res.end();
}
}).listen(3000, () => {
console.log('Server running at http://localhost:3000');
});3. 수정 (create, update)
ㄱ. 템플릿
module.exports = {
home: function(trs) {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기아 타이거즈</title>
<style>
th, tr { text-align: center }
</style>
</head>
<body style="margin: 50px;">
<h1>기아 타이거즈 선수단</h1>
<button onclick="location.href='/create'">추가</button>
<hr>
<table>
<tr>
<th>ID</th>
<th>선수명</th>
<th>백넘버</th>
<th>포지션</th>
<th>액션</th>
</tr>
${trs}
</table>
</body>
</html>
`;
},
trsGen: function(rows) {
let trs = '';
for (let row of rows) {
trs += '<tr>';
trs += `<td>${row.id}</td><td>${row.player}</td>`;
trs += `<td>${row.backNo}</td><td>${row.POSITION}</td>`;
trs += `<td><a href="/update?id=${row.id}">수정</a>,
<a href="/delete?id=${row.id}">삭제</a></td>`;
trs += '</tr>';
}
return trs;
},
createForm: function() {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기아 타이거즈</title>
<style>
th, tr { text-align: center }
</style>
</head>
<body style="margin: 50px;">
<h1>기아 타이거즈 선수단</h1>
<button onclick="location.href='/'">홈으로</button>
<hr>
<form action="/create" method="post">
<table>
<tr>
<td>선수명</td><td><input type="text" name="player"></td>
</tr>
<tr>
<td>백넘버</td><td><input type="text" name="backNo"></td>
</tr>
<tr>
<td>포지션</td><td><input type="text" name="position"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="추가"></td>
</tr>
</table>
</form>
</body>
</html>
`;
},
updateForm: function(id, player, backNo, position) {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기아 타이거즈</title>
<style>
th, tr { text-align: center }
</style>
</head>
<body style="margin: 50px;">
<h1>기아 타이거즈 선수단</h1>
<button onclick="location.href='/'">홈으로</button>
<hr>
<form action="/update" method="post">
<input type="hidden" name="id" value="${id}">
<table>
<tr>
<td>선수명</td><td><input type="text" name="player" value="${player}"></td>
</tr>
<tr>
<td>백넘버</td><td><input type="text" name="backNo" value="${backNo}"></td>
</tr>
<tr>
<td>포지션</td><td><input type="text" name="position" value="${position}"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="수정"></td>
</tr>
</table>
</form>
</body>
</html>
`;
}
}ㄴ. 앱
const http = require('http');
const url = require('url');
const qs = require('querystring');
const mysql = require('mysql');
const config = require('./mysql.json');
const template = require('./view/template update');
http.createServer((req, res) => {
let pathname = url.parse(req.url).pathname;
let query = url.parse(req.url, true).query;
switch(pathname) {
case '/': // 초기 홈 화면
const conn = mysql.createConnection(config);
conn.connect();
const sql = `SELECT * FROM tigers;`;
conn.query(sql, (err, rows, fields) => {
if (err)
throw err;
let trs = template.trsGen(rows);
let html = template.home(trs);
res.end(html);
});
conn.end();
break;
case '/create':
if (req.method == 'GET') { // 입력 폼 보여주기
let html = template.createForm();
res.end(html);
} else { // 사용자 입력 -> DB
let body = '';
req.on('data', data => {
body += data;
});
req.on('end', () => {
const param = qs.parse(body);
const player = param.player;
const backNo = parseInt(param.backNo);
const position = param.position;
const conn = mysql.createConnection(config);
conn.connect();
const sql = `INSERT INTO tigers (player, backNo, position)
VALUES (?, ?, ?);`;
conn.query(sql, [player, backNo, position], (err, fields) => {
if (err)
throw err;
res.writeHead(302, {'Location': '/'});
res.end();
});
conn.end();
});
}
break;
case "/update":
if (req.method == "GET"){ //수정입력할폼보여주기
const id = parseInt(query.id); // let query = url.parse(req.url, true).query;여기서쿼리받아서가능
//이제아이디로검색해서 결과를 가져와야함
const conn = mysql.createConnection(config);
conn.connect();
const sql = `SELECT * FROM tigers where id=?;`;
conn.query(sql, id, (err, rows, fields) => { //id가 ? 자리로
if (err)
throw err;
const player = rows[0].player
const backNo = rows[0].backNo
const position = rows[0].position
const html = template.updateForm(id, player, position);
/* let trs = template.trsGen(rows);
let html = template.home(trs); */
res.end(html);
});
conn.end();
break;
} else { //db에수정하기
let body = '';
req.on('data', data => {
body += data;
});
req.on('end', () => {
const param = qs.parse(body);
const id = parseInt(param.id);
const player = param.player;
const backNo = parseInt(param.backNo);
const position = param.position;
const conn = mysql.createConnection(config);
conn.connect();
const sql = `update tigers set player=?, backNo=?, position=? where id=?;`;
conn.query(sql, [player, backNo, position, id], (err, fields) => {
if (err)
throw err;
res.writeHead(302, {'Location': '/'});
res.end();
});
conn.end();
});
}
break;
default:
res.writeHead(404, {'Content-Type': 'text/html'});
res.end();
}
}).listen(3000, () => {
console.log('Server running at http://localhost:3000');
});
BABY