module.exports

Martin·2022년 9월 26일
JavaScripthtml
0
1. 기본
ㄱ. 템플릿
ㄴ. 앱
2. 추가 (create기능)
ㄱ. 템플릿
ㄴ. 앱
3. 수정 (create, update)
ㄱ. 템플릿
ㄴ. 앱

HTML, CSS, JavaScript

목록 보기
18/23

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');
});
profile
Martin
이전 포스트

js_scope

다음 포스트

js 펑션 안 글로벌변수

0개의 댓글

관련 채용 정보

서버 엔지니어 (Server Engineer)
뱅크샐러드는 금융과 건강 마이데이터 플랫폼을 선도하며, 사용자 중심의 서비스를 개발하고 운영합니다. 서버 엔지니어로서 Go, Kotlin, Python을 활용해 고급 전자 금융 인프라를 구축하고, 데이터 기반의 혁신 서비스를 제공합니다.
백엔드 개발자
DLT파트너스에서 '헬로우봇'과 '비트윈'과 같은 사랑받는 서비스를 개발하며, Java 기반 백엔드 시스템, API 서버 설계 및 실시간 채팅 모듈을 다룹니다. 다양한 IT 경험을 가진 팀과 함께 대량 데이터 처리를 통한 혁신적인 미래를 만들어갈 기회를 놓치지 마세요.
백엔드 개발(WEMIX PLAY)
위메이드는 게임과 블록체인 융합의 선두주자로, WEMIX3.0 메인넷 기반의 다양한 플랫폼 개발에 힘쓰고 있습니다. 백엔드 개발자로서 게임 플랫폼과 PG사 연동 시스템을 구축하며 혁신적인 팀의 일원이 되어보세요!
Powered by GraphCDN, the GraphQL CDN