2022 SW전문인재양성사업/웹 프로그래밍 기본

Nodejs를 이용한 게시판 구현(등록, 수정, 삭제)

마루설아 2022. 7. 28. 12:35

server.js

const http = require('http');
const express = require('express');
const app = express();
const cors = require('cors');
const bodyParser = require('body-parser');

// 새로운 속성 추가
app.set('port', 3000);
app.set('views', __dirname + '/views'); // 폴더 경로
app.set('view engine', 'ejs'); // 확장자

// 미들웨어 추가
app.use(cors());
console.log('__dirname : ', __dirname);
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

let top = 1;
let carList = [
    {cno: top++, name: 'SONATA', price: 3500, company: 'HYUNDAI', year: 2020},
    {cno: top++, name: 'GRANDUER', price: 5500, company: 'HYUNDAI', year: 2020},
    {cno: top++, name: 'BMW', price: 5500, company: 'BMW', year: 2021},
    {cno: top++, name: 'S80', price: 6500, company: 'VOLVO', year: 2022}
];

// 라우트(route) 설정
app.get("/home", (req, res)=>{
    req.app.render('home', {carList}, (err, htmlData)=>{
        if(err) throw err;
        res.end(htmlData);
    });
});

// ejs 페이지로 forward
app.get("/input", (req, res)=>{
    req.app.render('input', {carList}, (err, htmlData)=>{
        if(err) throw err;
        res.end(htmlData);
    });
});

// input 데이터 처리
app.post("/input", (req, res)=>{
    let carData = {
        cno: top++, 
        name: req.body.name, 
        price: req.body.price, 
        company: req.body.company, 
        year: req.body.year
    };

    carList.push(carData);
    res.redirect("/home"); // redirect: 홈페이지로 돌아가기
});

app.get("/detail/:cno", (req, res)=>{
    let idx = carList.findIndex((item)=>{
        return item.cno == Number(req.params.cno);
    });

    console.log(idx);
    let data = carList[idx];

    req.app.render('detail', {data}, (err, htmlData)=>{
        if(err) throw err;
        res.end(htmlData);
    });
});

app.get("/modify/:cno", (req, res)=>{
    let idx = carList.findIndex((item)=>{
        return item.cno == Number(req.params.cno);
    });

    let data = carList[idx];
    req.app.render('modify', {data}, (err, htmlData)=>{
        if(err) throw err;
        res.end(htmlData);
    });
});

app.post("/modify", (req, res)=>{
    let carData = {
        cno: req.body.cno,
        name: req.body.name, 
        price: req.body.price, 
        company: req.body.company, 
        year: req.body.year
    };

    let idx = carList.findIndex((item)=>{
        return item.cno == Number(req.body.cno);
    });

    carList[idx] = carData;
    res.redirect("/home"); // redirect: 홈페이지로 돌아가기
});

app.get("/delete/:cno", (req, res)=>{
    let idx = carList.findIndex((item)=>{
        return item.cno == Number(req.body.cno);
    });
    carList.splice(idx, 1);

    res.redirect("/home"); // redirect: 홈페이지로 돌아가기
});

const server = http.createServer(app);
server.listen(app.get('port'), ()=>{
    console.log('서버 실행 중 : http://localhost:3000');
});

 

index.html

<!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>Document</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="container">
    <h1>중고차 쇼핑몰</h1>
    <a class="btn btn-info" href="/home">중고차 목록</a>
</body>
</html>

 

header.ejs

<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>Document</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
    <h1 style="text-align: center;">중고차 쇼핑몰 TEST</h1>
    <nav class="navbar navbar-expand-sm bg-light justify-content-center">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link 3</a>
            </li>
        </ul>
    </nav>

 

home.ejs

<!DOCTYPE html>
<html lang="en">
<%- include('header.ejs') %>
    <!-- end of header -->
    <h3 style="text-align: center;">중고차 목록</h3>
    <div class="container">
        <table class="table table-dark table-striped">
            <tr>
                <th>번호</th>
                <th>차종</th>
                <th>가격</th>
                <th>제조사</th>
                <th>연식</th>
            </tr>
            <% 
                carList.forEach(function(car){
            %>
            <tr>
                <td><%=car.cno%></td>
                <td><a href="/detail/<%=car.cno%>"><%=car.name%></a></td>
                <td><%=car.price%></td>
                <td><%=car.company%></td>
                <td><%=car.year%></td>
            </tr>
            <% }); %>
        </table>
        <a class="btn btn-info" href="/input">입력</a> | 
        <a class="btn btn-info" href="/">홈페이지</a>
    </div>
</body>
</html>

 

detail.ejs

<!DOCTYPE html>
<html lang="en">
    <%- include('header.ejs') %>
    <div class="container">
        <h3>중고차 상세 보기</h3>
        <table class="table table-dark table-striped">
            <tr>
                <th>번호</th>
                <td><%=data.cno%></td>
            </tr>
            <tr>
                <th>차종</th>
                <td><%=data.name%></td>
            </tr>
            <tr>
                <th>가격</th>
                <td><%=data.price%></td>
            </tr>
            <tr>
                <th>제조사</th>
                <td><%=data.company%></td>
            </tr>
            <tr>
                <th>연식</th>
                <td><%=data.year%></td>
            </tr>
            <tr>
                <th colspan="2">
                    <a class="btn btn-info" href="/home">목록</a>
                    <a class="btn btn-info" href="/">메인</a>
                    <a class="btn btn-info" href="/input">새 정보 등록</a>
                    <a class="btn btn-info" href="/modify/<%=data.cno%>">수정</a>
                    <a class="btn btn-info" href="/delete/<%=data.cno%>">삭제</a>
                </th>
            </tr>
        </table>
    </div>
<body>
    
</body>
</html>

 

input.ejs

<!DOCTYPE html>
<html lang="en">
    <%- include('header.ejs') %>
    <div class="container">
        <h3>중고차 정보 등록</h3>
        <form action="/input" method="POST">
            <table class="table table-dark table-striped">
                <tr>
                    <th>차종</th>
                    <td><input type="text" name="name" value="TEST"/></td>
                </tr>
                <tr>
                    <th>가격</th>
                    <td><input type="text" name="price" value="15000"/></td>
                </tr>
                <tr>
                    <th>제조사</th>
                    <td><input type="text" name="company" value="TESLA"/></td>
                </tr>
                <tr>
                    <th>연식</th>
                    <td><input type="text" name="year" value="2019"/></td>
                </tr>
                <tr>
                    <th colspan="2">
                        <input type="submit" value="등록">
                    </th>
                </tr>
            </table>
        </form>
    </div>
<body>

</body>
</html>

 

modify.ejs

<!DOCTYPE html>
<html lang="en">
    <%- include('header.ejs') %>
    <div class="container">
        <h3>중고차 정보 수정</h3>
        <form action="/modify" method="POST">
            <table class="table table-dark table-striped">
                <tr>
                    <th>번호</th>
                    <td><%=data.cno%>
                        <input type="hidden" name="cno" value="<%=data.cno%>"/>
                    </td>
                </tr>
                <tr>
                    <th>차종</th>
                    <td><input type="text" name="name" value="<%=data.name%>"/></td>
                </tr>
                <tr>
                    <th>가격</th>
                    <td><input type="text" name="price" value="<%=data.price%>"/></td>
                </tr>
                <tr>
                    <th>제조사</th>
                    <td><input type="text" name="company" value="<%=data.company%>"/></td>
                </tr>
                <tr>
                    <th>연식</th>
                    <td><input type="text" name="year" value="<%=data.year%>"/></td>
                </tr>
                <tr>
                    <th colspan="2">
                        <input type="submit" value="수정완료">
                    </th>
                </tr>
            </table>
        </form>
    </div>
<body>
    
</body>
</html>

 

 

저작자표시

'2022 SW전문인재양성사업 > 웹 프로그래밍 기본' 카테고리의 다른 글

canvas (1) - 기초  (0) 2022.07.29
Javascript (10) - 이미지 파일 불러오기  (0) 2022.07.29
Javascript를 이용한 퍼즐(같은그림찾기) 구현  (0) 2022.07.27
Javascript (9) - 배열 및 인덱스  (0) 2022.07.27
Javascript (8) - prototype, constructor  (0) 2022.07.27

'2022 SW전문인재양성사업/웹 프로그래밍 기본'의 다른글

  • 현재글Nodejs를 이용한 게시판 구현(등록, 수정, 삭제)

관련글

티스토리툴바