생활코딩

Coding Everybody

App - 글생성 UI 만들기

토픽 생활코딩 > WEB > WEB2 - Node.js

수업소개

글 작성을 할 수 있는 UI를 구현해봅시다.

 

 

 

강의

 

 

 

소스코드

main.js (변경사항)

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

function templateHTML(title, list, body){
  return `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    <a href="/create">create</a>
    ${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}`);
          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}`);
            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="http://localhost:3000/process_create" 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 {
      response.writeHead(404);
      response.end('Not found');
    }



});
app.listen(3000);

 

댓글

댓글 본문
  1. 비전공자
    오후 2:17 2024-05-11
  2. ui 구현
  3. 김철흥
    2024.01.12
    완료!
  4. Hoon Ko
    20231017
  5. BF_Lee
    230630
  6. 어흥
    230702
  7. ijlee
    오우 너무 감사합니다 한참 찾다가 안돼서 댓글을 보고 있었는데 해답이 있었군요 감사합니다 감사합니다
    대화보기
    • Hojun Song
      2023-04-15 18:25
    • Nayeong Koo
      23.03.17

      creat contents and submit page 생성
    • 감자
      22.12.04 완료
    • 당당
      2022.10.24
    • i_am_es
      2022-08-10
    • 아캔두잇
      20220804 완료
    • 키다리아저씨
      220719 완
    • toonfac
      220714 오후 3시 29분 완료
    • 선홍빛참치
      Network탭에서 Headers 옆에 있는 Payload 탭에서 Form Data 확인 가능합니다
      대화보기
      • Scia
        개발자 도구 Network에 저는 Form Data 부분이 안 보이는데... 왜 그럴까요..??
      • kimkk
        form tag for posting data at web server
      • 케굴
        2021-12-26
      • 초딩 개발자
        2021/12/12
      • pdpd
        21.10.09
      • 졸작완성하자
        21.10.07 완료
      • 별거
        + 리로드 안한거였어요
      • 승뇽뇽
        ㅇㄹ
      • labis98
        20210726 good!!
      • Duke
        2021.07.18
      • 해밀턴
        210707
      • Jeong Il Haan
        20210419
      • byoonn
        완료
      • 21.02.27
      • chimhyangmoo
        21.02.22
      • 마아앙
        2021.02.09
      • jeisyoon
        2021.02.09 완료
      • 나그네
        Test
        완료~
        감솨~
      • hanel_
        21.2.2 완료
      • 뭄수
        완료
      • ohhigo
        21/1/24
      • Noah
        2021.01.05 완료!
      • 손민철
        20/12/29 완료
      • 생활둘기
        2020 12 26
      • kkn1125
        20.12.22 완료~!
      • 콜라
        20201015 완료
      • Yong Hyun Lee
        완료 201002
      • vampa
        2020.09.10
      • 모라토리움
        post 방식으로 전달을 해도 이렇게 크롬 개발자도구를 사용해서 제출한 정보를 알아내면 말짱 도루묵 아닌가요??
      • 코딩하는렌즈쟁이
        2020-07-28 (화)
        완료
      • 코딩중독
        이고잉님 강의를 보고나면 항상 뿌듯하네요^^
      • 불스택
        20.07.12 감사합니다 이고잉님 !
      • Amousk
        좋은 강의 감사합니다.
      • Katherine Roh
        완료 :)