본문 바로가기
블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기

[30일차] 20210423 node.js로 게시판 만들기 mysql연결, create table by Visual Studio CRUD 기본

알로호모라 2021. 4. 23. 17:38
반응형

-------------------------------------------------------------------1교시-------------------------------------------------------

 

 

 

 

 

Nunjucks if, for문 

{% for [변수] in [배열]}

{{[변수],[요소]}}

{%forend %}

 

 

velog.io/@pkbird/Nunjucks-basic

 

Nunjucks 정리

Nunjucks의 완전 기초적인 기능만 정리해보았다.

velog.io

 

 

 

nunjucks template에 css연결하기 

 

            res.render('join',{

                name:req.body.user_name,

                id:req.body.user_id,

                pw:req.body.user_pw,

            })

 

가져와서 뿌려 ~ 라는 느낌 

server가 브라우저한테 이 파일 내용들로 보여줘~ 라고 명령한거

그래서 index.html 에 <link href="./~~~~~">쓰면 안됨. 

그래서 css파일도 html 처럼 가져오는걸로 만들어야험

 

express에  있는 기본적인 걸로만 구현할 수 있음. 

 

app.use(express.static('publick'));

express안에 있는 use라는 method 활용 

method안에 폴더명 적어주기. 

static 

 

 

 

연결하면 nectwork 에 css 찾아서 잘 연결되었나 확인. 

 

    <link href="./index.css"> 

요 주소가 ../ 아닌 이유는 server.js 파일로 css를 가져오는 것이기 때문에 ㅇ

연결이 된건가 안된건가.............

 

 

list라는 보이는 화면을html에 만들 것이야

list에서 어떤 버튼을 누르면 다른 화면으로 이동할꺼야 

 

-> html write 하나 만들거야 (제목, 내용, 버튼 만들거야)버튼 클릭하면 

-> 다시 list로 갈거야 (게시판 글 작성하면 list로 돌아오는 것처럼) 

-> list에 번호, 제목, 날짜, 조회수 등이 있어 -> 해당 제목을 클릭하면 html view 가 나오겠찌 

view = 해당 게시물의 내용들 (view안에 버튼 2개 1개 -> list로 1개 - 수정하기 -> 수정하기 누르ㅜ면 

수정하기 화면 만들기 

수정하기화면 안 버튼 누르면 -> 다시 list로 돌아가기 

(db접속안할꺼야) 

 

 

 

 

 

 

 

 

JS

입력함 

app.use(bodyParser.urlencoded({extended:false}));
const express=require('express');
const app=express();
const nunjucks=require('nunjucks');
const bodyParser = require('body-parser');
const mysql=require('mysql');

nunjucks.configure('views',{
    express:app,
})

let connection = mysql.createConnection({
    host:'localhost',
    user:'root',
    password:'1234',
    database:'ingoo',
})

connection.connect();

app.use(express.static('public'));  //정적파일 = css, js, image  
// express 야 나 정적파일들은 (public) 안에 있는 내용으로 만들꺼야
app.use(bodyParser.urlencoded({extended:false}));
app.set('view engine','html');

app.get('/',(req,res)=>{
    res.render('index');
})

app.post('/join',(req,res)=>{
    let name=req.body.user_name;
    let id=req.body.user_id;
    let pw=req.body.user_pw;
    let sql=`insert into user (userid, userpw, username) values ('${id}','${pw}','${name}')`;

    connection.query(sql,(error,results)=>{
        if(error){
            console.log(error)
        }else{
            console.log(results)
            res.render('join',{
                name:req.body.user_name,
                id:req.body.user_id,
                pw:req.body.user_pw,
            })
        }
    })

})

app.listen(3000,()=>{
    console.log(`server start port : 3000`);
});

index

    <link rel="stylesheet" href="./index.css">

public 안쓴 이유가 js 에서 이미 'public'을 씀 

<!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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    환영합니다. 


    <form method= "post" action="/join">
    
    이름 입력해: <input type="text" name="user_name">        <br/>
    아이디 입력해 : <input type="text" name="user_id">        <br/>
    비번 입력 : <input type="text" name ="user_pw">        <br/>
    <input type="submit" value="버튼">        <br/>
    </form> 

</body>
</html>

 

join

    <link rel = "stylesheet" href="./index.css">
<!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>
    <link rel = "stylesheet" href="./index.css">
</head>
<body>
    

    반갑습니다. {{name}}님 <br/> 
    {{name}}님의 ID는 {{id}}이며 비밀번호는 {{pw}}입니다. <br/>


</body>
</html>

 

views 와 node.js 같은 위치 

 

-------------------------------------------------------배고픈 2교시-----------------------------------------------------------

 

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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    환영합니다.<br/> 


    <a href="/list">게시판으로 고고</a>

</body>
</html>

 

JS 변경

const express=require('express');
const app=express();
const nunjucks=require('nunjucks');
const bodyParser = require('body-parser');
const mysql=require('mysql');

nunjucks.configure('views',{
    express:app,
})

let connection = mysql.createConnection({
    host:'localhost',
    user:'root',
    password:'1234',
    database:'ingoo',
})

connection.connect();

app.use(express.static('public'));  //정적파일 = css, js, image, 동영상   
// express 야 나 정적파일들은 (public) 안에 있는 내용으로 만들꺼야
app.use(bodyParser.urlencoded({extended:false}));
app.set('view engine','html');

app.get('/',(req,res)=>{
    res.render('index');
})

app.post('/join',(req,res)=>{
    let name=req.body.user_name;
    let id=req.body.user_id;
    let pw=req.body.user_pw;
    let sql=`insert into user (userid, userpw, username) values ('${id}','${pw}','${name}')`;

    connection.query(sql,(error,results)=>{
        if(error){
            console.log(error)
        }else{
            console.log(results)
            res.render('join',{
                name:req.body.user_name,
                id:req.body.user_id,
                pw:req.body.user_pw,
            })
        }
    })
})


app.get('/list',(req,res)=>{
    res.render('list')
})


app.get('/write',(req,res)=>{
    res.render('board_write')
})

app.get('/view',(req,res)=>{    
    res.render('board_view');
})



app.listen(3000,()=>{
    console.log(`server start port : 3000`);
});

list.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>
    <link rel = "stylesheet" href="./index.css">
</head>
<body>
    안녕 난 LIST HTML이야 

    <h2>게시판 리스트 입니다. </h2>
    <div class="board">
        <table >
            <tr> <!--한 줄-->
                <td>번호</td>
                <td>제목</td>
                <td>작성자</td>
                <td>날짜</td>
                <td>조회수</td>
            </tr>
            <tr> <!--한 줄-->
                <td>1</td>
                <td><a href="/view">공지사항입니다.</a></td>
                <td>무야호</td>
                <td>2021-04-23</td>
                <td>3</td>
            </tr>
            <tr> <!--한 줄-->
                <td>2</td>
                <td><a href="/view">공지사항입니다.</a></td>
                <td>무적권</td>
                <td>2021-04-23</td>
                <td>3</td>
            </tr>
            <tr> <!--한 줄-->
                <td>3</td>
                <td><a href="/view">공지사항입니다.</a></td>
                <td>취권</td>
                <td>2021-04-23</td>
                <td>3</td>
            </tr>
            <a href="/write" class="write_btn">글쓰기</a>
        </table>
    </div>

</body>
</html>

board_wirte.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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <form action="/write" method="post">
    <h2>게시판 write 글쓰기 페이지 입니다.</h2>
    <ul>
        <li>글제목</li>
        <li><input type="text" name="board_subject"></li>
    </ul>
    <ul>
        <li>작성자</li>
        <li><input type="text" name="board_name"></li>
    </ul>
    <ul>
        <li>
            <textarea name="board_content"></textarea>
        </li>
    </ul>
    <input type="submit" value="글쓰기" class="wirte_btn">
    </form>
</body>
</html>

<!--조회수, 날짜는 입력을 이렇게 못함 그래서 일단 안넣을게-->

board_view.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>
</head>
<body>
    게시판 view 입니다.
</body>
</html>

 

index.css

/* Hello world */ 


*{
    margin:0; 
    padding:0;
}

ul,li{
    list-style: none;
}

a{
    text-decoration: none;
}
.write_btn{
    display:inline-block;
    padding:7px 14px;
    width:80px;
    height:20px;
    text-align:center;
    border-radius: 15px;
    line-height:13px;
    background-color: violet;
    
}

.board{
    width:800px;
}

.board>table>tr>td{
    border:1px solid darkcyan;
    width:25%;
    text-align: center;
}

// 게시판리스트에는 두가지 기능 

버튼 1-> 글쓰기 제

목클릭 -> view page

 

 

 

 

 

 

 

 

 

 

 

------------------------------------------------------------------------

js

const express=require('express');
const app=express();
const nunjucks=require('nunjucks');
const bodyParser = require('body-parser');
const mysql=require('mysql');

nunjucks.configure('views',{
    express:app,
})

let connection = mysql.createConnection({
    host:'localhost',
    user:'root',
    password:'1234',
    database:'ingoo',
})

connection.connect();

app.use(express.static('public'));  //정적파일 = css, js, image, 동영상   
// express 야 나 정적파일들은 (public) 안에 있는 내용으로 만들꺼야
app.use(bodyParser.urlencoded({extended:false}));
app.set('view engine','html');

// app.post('/join',(req,res)=>{
//     let name=req.body.user_name;
//     let id=req.body.user_id;
//     let pw=req.body.user_pw;
//     let sql=`insert into user (userid, userpw, username) values ('${id}','${pw}','${name}')`;

//     connection.query(sql,(error,results)=>{
//         if(error){
//             console.log(error)
//         }else{
//             console.log(results)
//             res.render('join',{
//                 name:req.body.user_name,
//                 id:req.body.user_id,
//                 pw:req.body.user_pw,
//             })
//         }
//     })
// })

// localhost:3000/ 가장 첫 화면 버튼: <게시판으로 고고> 
app.get('/',(req,res)=>{
    res.render('index');
})

// localhost:3000/list 게시판으로 옴  
//글 제목 클릭 -> /view
//글쓰기 버튼 클릭 -> /write
app.get('/list',(req,res)=>{
    res.render('list')
})

// localhost:3000/write
// 글쓰기 버튼 클릭 ->  /write
app.get('/write',(req,res)=>{
    res.render('board_write')
})

// localhose:3000/write 

app.get('/view',(req,res)=>{    
    res.render('board_view');
})

app.post('/writedone', (req,res)=>{
    console.log(req.body);
    //DB 내용 처리 후 LIST.HTML넘어가면 됨니다. -> 나중에 작업하겟
    //res.render('list');
    res.redirect('/list'); // 이것을 다시 리스트로 보낸다. 
    //redirect -> url 값을 바꿔주는 녀석 /list 라고 url 바뀜. list파일을 보여주는게x 
    //post('/write') 데이터를 db에 입력하고 어디에다가 url을 떤져줘라~ 
})





app.listen(3000,()=>{
    console.log(`server start port : 3000`);
});

index

<!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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    환영합니다.<br/> 


    <a href="/list">게시판으로 고고</a>

</body>
</html>

 

list

<!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>
    <link rel = "stylesheet" href="./index.css">
</head>
<body>
    안녕 난 LIST HTML이야 

    <h2>게시판 리스트 입니다. </h2>
    <div class="board">
        <table >
            <tr> <!--한 줄-->
                <td>번호</td>
                <td>제목</td>
                <td>작성자</td>
                <td>날짜</td>
                <td>조회수</td>
            </tr>
            <tr> <!--한 줄-->
                <td>1</td>
                <td><a href="/view">공지사항입니다.</a></td>
                <td>무야호</td>
                <td>2021-04-23</td>
                <td>3</td>
            </tr>
            <tr> <!--한 줄-->
                <td>2</td>
                <td><a href="/view">공지사항입니다.</a></td>
                <td>무적권</td>
                <td>2021-04-23</td>
                <td>3</td>
            </tr>
            <tr> <!--한 줄-->
                <td>3</td>
                <td><a href="/view">공지사항입니다.</a></td>
                <td>취권</td>
                <td>2021-04-23</td>
                <td>3</td>
            </tr>
            <a href="/write" class="write_btn">글쓰기</a>
        </table>
    </div>

</body>
</html>

 

board_write

<!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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <form action="/writedone" method="post">
    <h2>게시판 write 글쓰기 페이지 입니다.</h2>
    <ul>
        <li>글제목</li>
        <li><input type="text" name="board_subject"></li>
    </ul>
    <ul>
        <li>작성자</li>
        <li><input type="text" name="board_name"></li>
    </ul>
    <ul>
        <li>
            <textarea name="board_content"></textarea>
        </li>
    </ul>
    <input type="submit" value="완료" class="wirte_btn">
    </form>
</body>
</html>

<!--조회수, 날짜는 입력을 이렇게 못함 그래서 일단 안넣을게-->

board_view

<!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>
</head>
<body>
    게시판 view 입니다.
</body>
</html>

 

css

/* Hello world */ 


*{
    margin:0; 
    padding:0;
}

ul,li{
    list-style: none;
}

a{
    text-decoration: none;
}
.write_btn{
    display:inline-block;
    padding:7px 14px;
    width:80px;
    height:20px;
    text-align:center;
    border-radius: 15px;
    line-height:13px;
    background-color: violet;
    
}

.board{
    width:800px;
}

.board>table>tr>td{
    border:1px solid darkcyan;
    width:25%;
    text-align: center;
}

 

 

 

----------------------------------------------------------------------------------------------------------------------

이제 view

 

js

const express=require('express');
const app=express();
const nunjucks=require('nunjucks');
const bodyParser = require('body-parser');
const mysql=require('mysql');

nunjucks.configure('views',{
    express:app,
})

let connection = mysql.createConnection({
    host:'localhost',
    user:'root',
    password:'1234',
    database:'ingoo',
})

connection.connect();

app.use(express.static('public'));  //정적파일 = css, js, image, 동영상   
// express 야 나 정적파일들은 (public) 안에 있는 내용으로 만들꺼야
app.use(bodyParser.urlencoded({extended:false}));
app.set('view engine','html');

// localhost:3000/ 가장 첫 화면 버튼: <게시판으로 고고> 
app.get('/',(req,res)=>{
    res.render('index');
})

// localhost:3000/list 게시판으로 옴  
//글 제목 클릭 -> /view
//글쓰기 버튼 클릭 -> /write
app.get('/list',(req,res)=>{
    res.render('list')
})

// localhost:3000/write
// 글쓰기 버튼 클릭 ->  /write
app.get('/write',(req,res)=>{
    res.render('board_write')
})

// localhose:3000/write 

app.get('/view',(req,res)=>{    
    res.render('board_view');
})

app.post('/writedone', (req,res)=>{
    console.log(req.body);
    //DB 내용 처리 후 LIST.HTML넘어가면 됨니다. -> 나중에 작업하겟
    //res.render('list');
    res.redirect('/list'); // 이것을 다시 리스트로 보낸다. 
    //redirect -> url 값을 바꿔주는 녀석 /list 라고 url 바뀜. list파일을 보여주는게x 
    //post('/write') 데이터를 db에 입력하고 어디에다가 url을 떤져줘라~ 
})

//write와 마찬가지로 2가지... 
//서버쪽에 내용을 전달(수정한거) 한거를 다시 list 로 보낼 때 redirect 를 쓴다. 
app.get('/modify',(req,res)=>{
    res.render('board_modify');
})

app.post('/modifydone',(req,res)=>{
    console.log(req.body); //데이터값있으니까 
    //BD내용 처리하는 부분 -> 해당 내용 update하는 부분 
    res.redirect('/list');
})

app.listen(3000,()=>{
    console.log(`server start port : 3000`);
});

index

<!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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    환영합니다.<br/> 


    <a href="/list">게시판으로 고고</a>

</body>
</html>

 

list

<!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>
    <link rel = "stylesheet" href="./index.css">
</head>
<body>
    안녕 난 LIST HTML이야 

    <h2>게시판 리스트 입니다. </h2>
    <div class="board">
        <table >
            <tr> <!--한 줄-->
                <td>번호</td>
                <td>제목</td>
                <td>작성자</td>
                <td>날짜</td>
                <td>조회수</td>
            </tr>
            <tr> <!--한 줄-->
                <td>1</td>
                <td><a href="/view">공지사항입니다.</a></td>
                <td>무야호</td>
                <td>2021-04-23</td>
                <td>3</td>
            </tr>
            <tr> <!--한 줄-->
                <td>2</td>
                <td><a href="/view">공지사항입니다.</a></td>
                <td>무적권</td>
                <td>2021-04-23</td>
                <td>3</td>
            </tr>
            <tr> <!--한 줄-->
                <td>3</td>
                <td><a href="/view">공지사항입니다.</a></td>
                <td>취권</td>
                <td>2021-04-23</td>
                <td>3</td>
            </tr>
            <a href="/write" class="write_btn">글쓰기</a>
        </table>
    </div>

</body>
</html>

 

board_write

<!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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <form action="/writedone" method="post">
    <h2>게시판 write 글쓰기 페이지 입니다.</h2>
    <ul>
        <li>글제목</li>
        <li><input type="text" name="board_subject"></li>
    </ul>
    <ul>
        <li>작성자</li>
        <li><input type="text" name="board_name"></li>
    </ul>
    <ul>
        <li>
            <textarea name="board_content"></textarea>
        </li>
    </ul>
    <input type="submit" value="완료" class="wirte_btn">
    </form>
</body>
</html>

<!--조회수, 날짜는 입력을 이렇게 못함 그래서 일단 안넣을게-->

board_write

<!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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>

    <h2>게시판 view 페이지 입니다.</h2>
    <ul>
        <li>글제목</li>
        <li>공지사항입니다.</li>
    </ul>
    <ul>
        <li>작성자</li>
        <li>관리자</li>
    </ul>
    <ul>
        <li>
            공지사항입니다<br/>
            다같이 외쳐 무 ㅇ ㅑ  ㅎ ㅜ   ~ 
        </li>
    </ul>
    <a href="/list" class="write_btn">게시판으로 돌아가기</a>
    <a href="/modify" class="write_btn">수정하긔</a>


</body>
</html>

 

board_modify

<!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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <form action="/modifydone" method="post">
        <h2>게시판 글수정 페이지 입니다.</h2>
        <ul>
            <li>글제목</li>
            <li><input type="text" name="board_subject"></li>
        </ul>
        <ul>
            <li>작성자</li>
            <li><input type="text" name="board_name"></li>
        </ul>
        <ul>
            <li>
                <textarea name="board_content"></textarea>
            </li>
        </ul>
        <input type="submit" value="글수정" class="wirte_btn">
        </form>
</body>
</html>

css

/* Hello world */ 


*{
    margin:0; 
    padding:0;
}

ul,li{
    list-style: none;
}

a{
    text-decoration: none;
}
.write_btn{
    display:inline-block;
    padding:7px 14px;
    width:80px;
    height:20px;
    text-align:center;
    border-radius: 15px;
    line-height:13px;
    background-color: violet;
    
}

.board{
    width:800px;
}

.board>table>tr>td{
    border:1px solid darkcyan;
    width:25%;
    text-align: center;
}

 

 

 

 

 

---------------------------------------------4교시 실습 --------------------------------------------------------

 

 

NUNJUCKS 이해 

 

render할 때 필요한게 template engin (우리가 쓰는건 nunjucks) 

'view engine',   .html 붙은 애들을 nunjucks로 보겠다. 

nunjucks 설정 'views'라는 폴더에 nunjucks 다 넣을거야 

nunjucks 기준으로 express한 값 어디에 들어가 있어? -> app에 

nunjucks.configure('views',{

express:app; }

 

views 폴더 안의 이런 설정들을 했으니 ->

    res.render('list') 이런것을 쓸 수 있음. 

가독성을 위해 html까지 교수님은 쓴다고 하심 

    res.render('list.html')

 

template (nunjucks) 우리가 사용하는 이유

서버에 있는 내용을 변수에 담아html에 쓰기 위해 

두번째 인자값의 객체를 통해 넘길 수 있었어. 

ex) 고객의 정보를 html에 담아 다시 서버에 넘기게

 

    res.render('list') ->서버로 가져온다. 

html tag들이 서버에 잇따. 가져온다. 

 

웹브라우저쓰는 js 

서버에 의해 변수에 의해 변하지 않는 값들 -> 정적파일

그런걸 public이라고 정의해줌. 

-> 그래서 그 (public파일) 안에서 index나 다른css 파일을 찾는 것

 

 

 

 

------------------------------------------------오늘의 점심 : 해물순두부--------------------------------------------------

졸리당..... 

 

수정 페이지에서 목록가기 버튼 

글쓰기 페이지에서 목록가기 버튼 추가 

 

    <button><a href="/list">게시판으로 돌아가기</a></button>

 

1. DB 연결하기 시작 

 

 

1. npm install mysql  설치 (에러나면 mysql2로 설치)

2. js 3가지 추가 

const mysql=require('mysql');
let connection = mysql.createConnection({
    host:process.env.DB_HOST,
    user:process.env.DB_USER,
    password:process.env.DB_PASSWORD,
    database:process.env.DB_DATABASE,
})

connection.connect();

 

 

 

2. DB table vs로 만들어서 sql에 넣기 

 

 

 

1.createTable.sql 작성 (table 만들기)

CREATE DATABASE homepage;
use homepage;

CREATE TABLE board(
    idx INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
    subjuect VARCHAR(100) NOT NULL,
    board_name VARCHAR(50) NOT NULL,
    content TEXT,
    today DATETIME DEFAULT CURRENT_TIMESTAMP,
    hit INT(11)

) AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;

 

요기서 맨 마지막 CHARSET ㅁ부분ㅇ은 하면서 알게 될거래.. 한국어를 쓰면 안될 때가 있을거래..

) AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;

 

문서에 createTable.sql 의 주소 복사 or VS 에서 경로복사 

mysql 에  source 라는 입력어를 사용해 입력 

 

MYSQL 의 source 명령어 : 외부 파일에서 sql문을 실행시키는 명령어 

 

source / -> 슬러시 되는 이유

mariaDB 에서 역슬레시 기능이 있나봄

역슬레시를 쓰려면 \\ 두개를 권장

아니고 그냥 파일 이동이면   / 슬러시를 써라 

 

주소 끝에 /createTable.sql 적어서 들어가기 

 

 

 

 

 

//IDX 값은 넣을 필요 없다. 

 

 

toay 부분 날짜 형태 now()

 

insert into board (subject, board_name, content, today, hit) values ('공지사항입니가가라하와이', '관리자', '내용입니다 야마돈아니고 야도란이쥬' , now(), 0);

 

subjuect 오타 - alter 로 바꾸기 

오 alter 는 이런거구나 컬럼을 바꿀 때 type 같이 쓰는건 세트이군 

 

참고 블로그

jybaek.tistory.com/277

 

[mysql] 테이블 이름 변경 / 테이블 컬럼 이름,타입 변경

테이블 이름 변경 alter table 현재_테이블_이름 rename 새로운_테이블_이름; mysql> show tables; +----------------+ | Tables_in_oops | +----------------+ | old_table | +----------------+ 1 row in set (0..

jybaek.tistory.com

 

 

 

* today 부분 안써도 되 

query문 작성할 때 (vs sql) today datetime default current_timestamp 

-> 값이 디폴트(없을) 때 현재 값으로 넣어라  

CREATE DATABASE homepage;
use homepage;

CREATE TABLE board(
    idx INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
    subject VARCHAR(100) NOT NULL,
    board_name VARCHAR(50) NOT NULL,
    content TEXT,
    today DATETIME DEFAULT CURRENT_TIMESTAMP,
    hit INT(11) DEFAULT 0

) AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;

 hit int(11) default  0    을 쓰게 되면 값이 없으면 0을 넣어죠! 라는 뜻 

그래서 위의 명령어처럼 today 없이도 만들 수 있따. 

 

 

 

 

-=------------------------------------------------------------------------

list에 db에 있는 내용을 뿌려줘야한대  

 

 

js- connection부분 database name 바꾸기 

let connection = mysql.createConnection({
    host:'localhost',
    user:'root',
    password:'1234',
    database:'homepage',
})

connection.connect();

 

 

 

 

js 변경 

app.get('/list',(req,res)=>{
    //1.homepage-> board 테이블을 select문을 활용해 내용을 콘솔로그에 찍어보기 
    //2.console.log를 찍은 내용을 list.html 데이터를 넘겨보죠 ,nunjucks를 쓰기때문에 
    //db뽑은 문을 html에 넣을 수 잇다  
    //3. nunjucks 구문 배워오기 
    
    connection.query("select * from board", (error,results)=>{
        if(error){
            console.log(error)
        }else{
            console.log(results)
        }
      })



    res.render('list')
})

 

 

 

 

 

 

 

List.html 에 배열을 넘겨주기 

[
  RowDataPacket {
    idx: 1,
    subject: '공지사항입니다람쥐',
    board_name: '관리자',
    content: '내용입니다 야마돈아니고 야도란이쥬',
    today: 2021-04-23T05:49:34.000Z,
    hit: 0
  },
  RowDataPacket {
    idx: 2,
    subject: '공지사항입니다다익선',
    board_name: '관리자',
    content: '내용입니다 야마돈아니고 야도란이쥬',
    today: 2021-04-23T05:49:48.000Z,
    hit: 0
  },
  RowDataPacket {
    idx: 3,
    subject: '공지사항입니가가라하와이',
    board_name: '관리자',
    content: '내용입니다 야마돈아니고 야도란이쥬',
    today: 2021-04-23T05:51:01.000Z,
    hit: 0
  }
]

 

 

[] 배열 안에 {} 하나의 객체로 3개가 들어가 있다. 

 

console.log(results) -> 배열이다! 알수 있음. 

 

 

nunjucks for문 가능. 

내가 nunjucks에서 프로그래밍적 언어 쓸꺼다 ~ 하면 {%%} 요렇게 쓰기 -> 코드 영역이다! 선언해주는거

 

{{}} -> 출력문 (변수값 받아서 출력해줄 때) 

{} 첫번 쨰 nunjucks에서 코드 영역으로 쓸꺼야

{} 두번 쨰 이제 출력할꺼야 

 

 

 

 

 

 

ㄹ얘를 실제로 처리하는건 js인데 그래서 저 주석이 잇으면 안되는건가 (추측)

 

 

 

list

<!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>
    <link rel = "stylesheet" href="./index.css">
    
</head>
<body>
    안녕 난 LIST HTML이야 
    {{list}}   
    {% for item in list %}
    {{item.subject}}
    {% endfor %}

    <h2>게시판 리스트 입니다. </h2>
    <div class="board">
        <table >
            <tr> <!--한 줄-->
                <td>번호</td>
                <td>제목</td>
                <td>작성자</td>
                <td>날짜</td>
                <td>조회수</td>
            </tr>
            <tr> <!--한 줄-->
                <td>1</td>
                <td><a href="/view">공지사항입니다.</a></td>
                <td>무야호</td>
                <td>2021-04-23</td>
                <td>3</td>
            </tr>
            <a href="/write" class="write_btn">글쓰기</a>
        </table>
    </div>

</body>
</html>

js

 

require('dotenv').config();
const express=require('express');
const app=express();
const nunjucks=require('nunjucks');
const bodyParser = require('body-parser');
const mysql=require('mysql');
const port = process.env.SERVER_PORT || 3000;

nunjucks.configure('views',{
    express:app,
})

app.use(express.static('public'));  //정적파일 = css, js, image, 동영상   
// express 야 나 정적파일들은 (public) 안에 있는 내용으로 만들꺼야
app.use(bodyParser.urlencoded({extended:false}));
app.set('view engine','html');

let connection = mysql.createConnection({
    host:'localhost',
    user:'root',
    password:'1234',
    database:'homepage',
})

connection.connect();


// localhost:3000/ 가장 첫 화면 버튼: <게시판으로 고고>
app.get('/',(req,res)=>{
    res.render('index');
})

// localhost:3000/list 게시판으로 옴  
//글 제목 클릭 -> /view
//글쓰기 버튼 클릭 -> /write
app.get('/list',(req,res)=>{
    //1.homepage-> board 테이블을 select문을 활용해 내용을 콘솔로그에 찍어보기 
    //2.console.log를 찍은 내용을 list.html 데이터를 넘겨보죠 ,nunjucks를 쓰기때문에 
    //db뽑은 문을 html에 넣을 수 잇다  
    //3. nunjucks 구문 배워오기 
    
    connection.query("select * from board", (error,results)=>{
        if(error){
            console.log(error)
        }else{
            console.log(results)   //-> 배열이야. 
            res.render('list',{
                list:results,
            });
        }
    })
})

// localhost:3000/write
// 글쓰기 버튼 클릭 ->  /write
app.get('/write',(req,res)=>{
    res.render('board_write')
})

// localhose:3000/write 

app.get('/view',(req,res)=>{    
    res.render('board_view');
})

app.post('/writedone', (req,res)=>{
    console.log(req.body);
    //DB 내용 처리 후 LIST.HTML넘어가면 됨니다. -> 나중에 작업하겟
    //res.render('list');
    res.redirect('/list'); // 이것을 다시 리스트로 보낸다. 
    //redirect -> url 값을 바꿔주는 녀석 /list 라고 url 바뀜. list파일을 보여주는게x 
    //post('/write') 데이터를 db에 입력하고 어디에다가 url을 떤져줘라~ 
})

//write와 마찬가지로 2가지... 
//서버쪽에 내용을 전달(수정한거) 한거를 다시 list 로 보낼 때 redirect 를 쓴다. 
app.get('/modify',(req,res)=>{
    res.render('board_modify');
})

app.post('/modifydone',(req,res)=>{
    console.log(req.body); //데이터값있으니까 
    //BD내용 처리하는 부분 -> 해당 내용 update하는 부분 
    res.redirect('/list');
})

app.listen(port,()=>{
    console.log(`server start port :${port}`);
});

 

 

 

 

 

 

 

요 부분을html tr, td로 만들 수 있음

<body>

    안녕 난 LIST HTML이야 

    {{list}}   

    {% for item in list %}

    {{item.subject}}

    {% endfor %}

 

 

<!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>
    <link rel = "stylesheet" href="./index.css">
    
</head>
<body>


    <h2>게시판 리스트 입니다. </h2>
    <div class="board">
        <table >
            <tr> <!--한 줄-->
                <td>번호</td>
                <td>제목</td>
                <td>작성자</td>
                <td>날짜</td>
                <td>조회수</td>
            </tr>
            <tr> <!--한 줄-->
                <td>1</td>
                <td><a href="/view">공지사항입니다.</a></td>
                <td>무야호</td>
                <td>2021-04-23</td>
                <td>3</td>
            </tr>
            <a href="/write" class="write_btn">글쓰기</a>

            {% for item in list %}
                <tr>
                    <td>{{item.idx}}</td>
                    <td>{{item.subject}}</td>
                    <td>{{item.board_name}}</td>
                    <td>{{item.today}}</td>
                    <td>{{item.hit}}</td>
                </tr>
            {% endfor %}
        </table>
    </div>

</body>
</html>

 

--------------------------------------------------------6교시?---------------------------------------------------

날짜 저렇게 어렵게 나온걸 우리 눈에 편하게 바뀌 

 

 

select idx,subject,board_name,content,today,hit from board;

= select * from board;

 

 

select idx,subject,board_name,content,today as date ,hit from board;

 

 

이제 데이터 형식의 포멧을 우리 입맛대로 바꿀꺼임

 

그리고 다시 today로 필드명 바꾸기 

** list에 추가 

 

 

 

date_format (2개의 인자값) 

1. today, 

2. 

 

 

 

그리고js 변경

    connection.query("select idx,subject,board_name,content,hit,date_format(today,'%Y-%M-%D') as today from board", (error,results)=>{
        if(error){
            console.log(error)
        }else{
            console.log(results)   //-> 배열이야. 
            res.render('list',{
                list:results,
            });
        }
    })

 

 

 

 

 

 

서버키고 실행시키면

영어로 됫네 뭐징 

 

 

이제 list

            {% for item in list %}
                <tr>
                    <td>{{item.idx}}</td>
                    <td><a href="/veiw?idx={{item.idx}}">{{item.subject}}</a></td>
                    <td>{{item.board_name}}</td>
                    <td>{{item.today}}</td>
                    <td>{{item.hit}}</td>
                </tr>
            {% endfor %}

해당select 문을 하려면 idx 값이 필요해 ( ? 무슨말일까) 

 

 

 

C create

R R

U Update

D Delete

요 위에거를 1 본이라고 함. 주말동안 저 1본을 만들어오기. 

게시판 1 개가 1본 

빠르게 만들수록 몸값이 올라간대

정답을 알려주지 않는 이유

정답을 알려줘 

 

 

브라우저 주소창 쓸 때 맨 처음에 쓰는게

http://

hyper text sthsth

내용 : 

 

+url

ex) naver.com 

=도메인

 

url 패턴 

http://도메인/view 

 

도메인 까지가 url

view부터는 URI 라고 함. 

 

 

 

get, post 

get-url에 표현된다 - ?로 시작한다. 

ex) http://[도메인]/view?name=emily&id=hololulu

app.get (get 이 뜻하는 것 request method가 get이냐, post냐 묻는거) 

app.get('/view',(req,res)=>{})

'/view' uri 인걸 찾아 ~ 

 

이게 바로 uri 

 

 

우리가 쓰는 도메인은 무엇인가 

localhost:3000

 

localhost:3000 url - 

 

 

post- 표현안된다 - 

 

 

 

devjhs.tistory.com/89

 

[mysql] DATE_FORMAT - 날짜 형식 설정

1. DATE_FORMAT - 역할 DATE_FORMAT(날짜 , 형식) : 날짜를 지정한 형식으로 출력 2. DATE_FORMAT - 구분기호  구분기호 역할 구분기호 역할  %Y 4자리 년도 %m 숫자 월 ( 두자리 )  %y 2자리 년도 %c 숫자..

devjhs.tistory.com

 

 

 

 

 

 

 

------------------------------------------------오늘 최종------------------------------------------------------------------

js

require('dotenv').config();
const express=require('express');
const app=express();
const nunjucks=require('nunjucks');
const bodyParser = require('body-parser');
const mysql=require('mysql');
const port = process.env.SERVER_PORT || 3000;

nunjucks.configure('views',{
    express:app,
})

app.use(express.static('public'));  //정적파일 = css, js, image, 동영상   
// express 야 나 정적파일들은 (public) 안에 있는 내용으로 만들꺼야
app.use(bodyParser.urlencoded({extended:false}));
app.set('view engine','html');

let connection = mysql.createConnection({
    host:'localhost',
    user:'root',
    password:'1234',
    database:'homepage',
})

connection.connect();

// localhost:3000/ 가장 첫 화면 버튼: <게시판으로 고고>
app.get('/',(req,res)=>{
    res.render('index');
})

// localhost:3000/list 게시판으로 옴  
//글 제목 클릭 -> /view
//글쓰기 버튼 클릭 -> /write
app.get('/list',(req,res)=>{
    //1.homepage-> board 테이블을 select문을 활용해 내용을 콘솔로그에 찍어보기 
    //2.console.log를 찍은 내용을 list.html 데이터를 넘겨보죠 ,nunjucks를 쓰기때문에 
    //db뽑은 문을 html에 넣을 수 잇다  
    //3. nunjucks 구문 배워오기 
    
    connection.query("select idx,subject,board_name,content,hit,date_format(today,'%Y-%m-%d') as today from board", (error,results)=>{
        if(error){   //m -> 2자리 
            console.log(error)
        }else{
            console.log(results)   //-> 배열이야. 
            res.render('list',{
                list:results,
            });
        }
    })
})
// localhost:3000/write
// 글쓰기 버튼 클릭 ->  /write
app.get('/write',(req,res)=>{
    res.render('board_write')
})
// localhose:3000/write 

app.get('/view',(req,res)=>{    

    let idx=req.query.idx;
    console.log(req.query.idx);
    let sql1 = `select * from board where idx=${idx}`
    connection.query(sql1,(error,results)=>{
        if(error){
            console.log(error);
        }else{
            console.log();
            res.render('board_view',{ //<- results 넣기 
                board_view:results[0],  //board_view에 results[0]을 넣는다 (어차피 값은 1개니가)
            });
        }
    })
})

app.post('/writedone', (req,res)=>{
    console.log(req.body);
    //DB 내용 처리 후 LIST.HTML넘어가면 됨니다. -> 나중에 작업하겟
    //res.render('list');
    res.redirect('/list'); // 이것을 다시 리스트로 보낸다. 
    //redirect -> url 값을 바꿔주는 녀석 /list 라고 url 바뀜. list파일을 보여주는게x 
    //post('/write') 데이터를 db에 입력하고 어디에다가 url을 떤져줘라~ 
})

//write와 마찬가지로 2가지... 
//서버쪽에 내용을 전달(수정한거) 한거를 다시 list 로 보낼 때 redirect 를 쓴다. 
app.get('/modify',(req,res)=>{
    res.render('board_modify');
})

app.post('/modifydone',(req,res)=>{
    console.log(req.body); //데이터값있으니까 
    //BD내용 처리하는 부분 -> 해당 내용 update하는 부분 
    res.redirect('/list');
})

app.listen(port,()=>{
    console.log(`server start port :${port}`);
});

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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    환영합니다.<br/> 


    <a href="/list">게시판으로 고고</a>

</body>
</html>

 

list.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>
    <link rel = "stylesheet" href="./index.css">
    
</head>
<body>


    <h2>게시판 리스트 입니다. </h2>
    <div class="board">
        <table >
            <tr> <!--한 줄-->
                <td>번호</td>
                <td>제목</td>
                <td>작성자</td>
                <td>날짜</td>
                <td>조회수</td>
            </tr>
            <tr> <!--한 줄-->
                <td>1</td>
                <td><a href="/view">공지사항입니다.</a></td>
                <td>무야호</td>
                <td>2021-04-23</td>
                <td>3</td>
            </tr>
            <a href="/write" class="write_btn">글쓰기</a>

            {% for item in list %}
                <tr>
                    <td>{{item.idx}}</td>
                    <td><a href="/view?idx={{item.idx}}">{{item.subject}}</a></td>
                    <td>{{item.board_name}}</td>
                    <td>{{item.today}}</td>
                    <td>{{item.hit}}</td>
                </tr>
            {% endfor %}
        </table>
    </div>

</body>
</html>

 

board_write.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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>

    <form action="/writedone" method="post">
    <h2>게시판 write 글쓰기 페이지 입니다.</h2>
    <ul>
        <li>글제목</li>
        <li><input type="text" name="board_subject"></li>
    </ul>
    <ul>
        <li>작성자</li>
        <li><input type="text" name="board_name"></li>
    </ul>
    <ul>
        <li>
            <textarea name="board_content"></textarea>
        </li>
    </ul>
    <input type="submit" value="완료" class="wirte_btn">
    <button><a href="/list">게시판으로 돌아가기</a></button>
    </form>
</body>
</html>

<!--조회수, 날짜는 입력을 이렇게 못함 그래서 일단 안넣을게-->

board_view

<!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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
   

    <h2>게시판 view 페이지 입니다.</h2>
    <ul>
        <li>글제목</li>
        <li>{{board_view.subject}}</li>
    </ul>
    <ul>
        <li>작성자</li>
        <li>{{board_view.board_name}}</li>
    </ul>
    <ul>
        <li>
            {{board_view.content}}
        </li>
    </ul>
   
    <a href="/list" class="write_btn">게시판으로 돌아가기</a>
    <a href="/modify" class="write_btn">수정하긔</a>


</body>
</html>

board_modify.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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <form action="/modifydone" method="post">
        <h2>게시판 글수정 페이지 입니다.</h2>
        <ul>
            <li>글제목</li>
            <li><input type="text" name="board_subject"></li>
        </ul>
        <ul>
            <li>작성자</li>
            <li><input type="text" name="board_name"></li>
        </ul>
        <ul>
            <li>
                <textarea name="board_content"></textarea>
            </li>
        </ul>
        <input type="submit" value="글수정" class="wirte_btn">
        <button><a href="/list">게시판으로 돌아가기</a></button>
        </form>
</body>
</html>

index.css

/* Hello world */ 


*{
    margin:0; 
    padding:0;
}

ul,li{
    list-style: none;
}

a{
    text-decoration: none;
}
.write_btn{
    display:inline-block;
    padding:7px 14px;
    width:80px;
    height:20px;
    text-align:center;
    border-radius: 15px;
    line-height:13px;
    background-color: violet;
    
}

.board{
    width:800px;
}

.board>table>tr>td{
    border:1px solid darkcyan;
    width:25%;
    text-align: center;
}

createTable.sql

CREATE DATABASE homepage;
use homepage;

CREATE TABLE board(
    idx INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
    subject VARCHAR(100) NOT NULL,
    board_name VARCHAR(50) NOT NULL,
    content TEXT,
    today DATETIME DEFAULT CURRENT_TIMESTAMP,
    hit INT(11) DEFAULT 0

) AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;

 

 

 

 

 

 

 

 

 

 

주말과제 게시판 간단히 만들기

리스트 만들기

 

1. 게시판 리스트

2. 게시글 보기( 삭제, 수정)

3. 게시글 수정

4. 게시글 작성 (회원가입, 이름,아이디,패스워드 -> db저장 이랑 흡사 우리가 배운 내용) 

 

기능 다 되게... 

crud 다 가능하게... 

 

 

 

 

어렵군..

주말에 열공하자 ~~~~~~~~~~~~~~~~~~~~~

 

 

 

 

반응형

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

[30일차 복습] node.js로 서버, 게시판 만들기 node.js template css 연결하기 mysql DB 연결하기 배열 for item in 변수 endfor  (0) 2021.04.24
nunjucks 정리 if, for문 % 변수, 배열, 요소  (0) 2021.04.23
mySQL Primary key PK 뜻, 의미, 특징 정리  (0) 2021.04.22
[29일차 복습 정리] express로 서버 만들기 html, mariaDB 연결하기  (0) 2021.04.22
[29일차 zoom수업] 20210422 node.js 총복습 ( express, app.post, app.get, mariaDB, dotenv / express로 서버 만들기 )  (0) 2021.04.22

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' Related Articles

티스토리툴바