생활코딩

Coding Everybody

코스 전체목록

닫기

App - 글삭제 - 삭제버튼 구현

수업소개

삭제 작업을 하기 위해서는 삭제 버튼이 있어야 합니다. 이 때 링크를 사용하는 안됩니다. 링크 대신 form을 이용해서 삭제 버튼을 만드는 방법을 살펴보겠습니다. 

 

 

 

강의

 

 

 

소스코드

main.js (변경사항)

var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');

function templateHTML(title, list, body, control){
  return `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    ${control}
    ${body}
  </body>
  </html>
  `;
}
function templateList(filelist){
  var list = '<ul>';
  var i = 0;
  while(i < filelist.length){
    list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
    i = i + 1;
  }
  list = list+'</ul>';
  return list;
}

var app = http.createServer(function(request,response){
    var _url = request.url;
    var queryData = url.parse(_url, true).query;
    var pathname = url.parse(_url, true).pathname;
    if(pathname === '/'){
      if(queryData.id === undefined){
        fs.readdir('./data', function(error, filelist){
          var title = 'Welcome';
          var description = 'Hello, Node.js';
          var list = templateList(filelist);
          var template = templateHTML(title, list,
            `<h2>${title}</h2>${description}`,
            `<a href="/create">create</a>`
          );
          response.writeHead(200);
          response.end(template);
        });
      } else {
        fs.readdir('./data', function(error, filelist){
          fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
            var title = queryData.id;
            var list = templateList(filelist);
            var template = templateHTML(title, list,
              `<h2>${title}</h2>${description}`,
              ` <a href="/create">create</a>
                <a href="/update?id=${title}">update</a>
                <form action="delete_process" method="post">
                  <input type="hidden" name="id" value="${title}">
                  <input type="submit" value="delete">
                </form>`
            );
            response.writeHead(200);
            response.end(template);
          });
        });
      }
    } else if(pathname === '/create'){
      fs.readdir('./data', function(error, filelist){
        var title = 'WEB - create';
        var list = templateList(filelist);
        var template = templateHTML(title, list, `
          <form action="/create_process" method="post">
            <p><input type="text" name="title" placeholder="title"></p>
            <p>
              <textarea name="description" placeholder="description"></textarea>
            </p>
            <p>
              <input type="submit">
            </p>
          </form>
        `, '');
        response.writeHead(200);
        response.end(template);
      });
    } else if(pathname === '/create_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var title = post.title;
          var description = post.description;
          fs.writeFile(`data/${title}`, description, 'utf8', function(err){
            response.writeHead(302, {Location: `/?id=${title}`});
            response.end();
          })
      });
    } else if(pathname === '/update'){
      fs.readdir('./data', function(error, filelist){
        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
          var title = queryData.id;
          var list = templateList(filelist);
          var template = templateHTML(title, list,
            `
            <form action="/update_process" method="post">
              <input type="hidden" name="id" value="${title}">
              <p><input type="text" name="title" placeholder="title" value="${title}"></p>
              <p>
                <textarea name="description" placeholder="description">${description}</textarea>
              </p>
              <p>
                <input type="submit">
              </p>
            </form>
            `,
            `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
          );
          response.writeHead(200);
          response.end(template);
        });
      });
    } else if(pathname === '/update_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var id = post.id;
          var title = post.title;
          var description = post.description;
          fs.rename(`data/${id}`, `data/${title}`, function(error){
            fs.writeFile(`data/${title}`, description, 'utf8', function(err){
              response.writeHead(302, {Location: `/?id=${title}`});
              response.end();
            })
          });
      });
    } else if(pathname === '/delete_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var id = post.id;
          fs.unlink(`data/${id}`, function(error){
            response.writeHead(302, {Location: `/`});
            response.end();
          })
      });
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

 

댓글

댓글 본문
  1. Sukjoon Lee
    20220812
  2. 아캔두잇
    20220805 완료
  3. 키다리아저씨
    220720 완
  4. toonfac
    220714 오후 4시 04분 완료
  5. 화려하게간다
    화긴~~~~
  6. Do not implement delete function with anchor tag.
    Very dangerous.

    Use input tag of type="submit" (button) within the form tag
  7. 초딩 개발자
    2021/12/26
  8. 케굴
    2021-12-26
  9. 일억개
    가즈아!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  10. 211011
  11. 졸작완성하자
    211008 완료
  12. labis98
    20210727 완료~~~~
  13. Duke
    2021.07.18
  14. Jeong Il Haan
    20210421
  15. byoonn
    완료
  16. 21.02.27
  17. chimhyangmoo
    21.02.24
  18. jeisyoon
    2021.02.11 App - 글삭제 - 삭제버튼 구현 완료
  19. 마아앙
    2021.02.09
  20. hanel_
    21.2.5
  21. 뭄수
    완료
  22. ohhigo
    21/1/24 감사합니다.
  23. Noah
    2021.01.06 완료
  24. 손민철
    20/12/31 완료
  25. kkn1125
    20.12.23 완료~!
  26. 콜라
    20201015 완료
  27. Yong Hyun Lee
    완료 201002
  28. vampa
    2020.09.10
  29. 코딩하는렌즈쟁이
    2020-07-28 (화)
    완료
  30. 불스택
    20.07.12 감사합니다
  31. 영호팍
    완료오~~~!
  32. Amousk
    좋은 강의 감사합니다.
  33. Katherine Roh
    완료 :)
  34. 김재익
    완료
  35. 김보미
    완료
  36. 바다의왕자
    완료
  37. bomnie
    삭제버튼을 링크로 만들면 특정 페이지 주소로 이동하기 때문에 form으로 만들어서 post 방식으로 보내야 한다.
  38. 준바이
    감사합니다
  39. 심여수
    감사합니다
  40. 03.11 완료
  41. eddylee123456
    복습
  42. eddylee123456
    완료
  43. 스티븐잡숴
    완료
  44. 문대랭
    a링크로 하면 안되는 이유와 get 방식으로 했을때 생기는 문제가 잘 이해가 안되네요..
    한 웹 개발자의 실수로 a링크로 만들었는데, 이게 갑자기 왜 get방식이라고 바뀌는건지..
    이유가 url에 쿼리스트링으로 쭉 써지면 그게 그냥 get방식이라는건가요..?

    그리고 get방식으로 보냈는데 갑자기 왜 다 삭제가 되었다는거죠..?
  45. 임은정
    완료
  46. codinginpain
    완료데쇼
  47. 강다리
    runn
  48. 쑤우
    수강완료. 감사합니다~
  49. 굼벵이
    완료
  50. almond
    삭제전 확인창 띄우고 싶으신분들 아래 코드 참고하세요!
    <form action="/delete_process" method="post" onsubmit="return confirm('do you want to delete this file?')">
    <input type="hidden" name="id" value="${title}">
    <input type="submit" value="delete">
    </form>
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기