기본 콘텐츠로 건너뛰기

node.js DB연동 - 데이터 추가, 수정



1
2
3
4
5
6
7
8
9
10
11
12
app.get('/', function (request, response) {
    fs.readFile('list.html', 'utf8', function (error, data) {
        client.query('SELECT * FROM products', function (error, results) {
            response.send(ejs.render(data, {
                data : results
         
            }));
         
        });
    });
});
 
cs
cs
페이지 초기 진입시 띄어주는 부분.....
DB목록을 보여준다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>List Page</title>
</head>
<body>
    <h1>List Page</h1>
    <a href="/insert">INSERT DATA</a>
    <hr/>
    <table width="100%" border="1">
        <tr>
            <th>DELETE</th>
            <th>EDIT</th>
            <th>ID</th>
            <th>NAME</th>
            <th>Model Number</th>
            <th>Series</th>
        </tr>
        <%data.forEach(function(item, index){%>
        <tr>
            <td><a href="/delete/<%= item.id%>">DELETE</a></td>
            <td><a href="/edit/<%= item.id%>">INSERT</a></td>
            <td><%= item.id%></td>
            <td><%= item.name%></td>
            <td><%= item.modelnumber%></td>
            <td><%= item.series%></td>
        </tr>
        <%});%>
    </table>
</body>
</html>
cs
list.html문서


목록페이지 
아무생각 없이 삭제를 눌렀더니 다 사라졌다 ㅋㅋㅋㅋㅋㅋㅋ

 


1
2
3
4
5
6
app.get('/delete/:id', function (request, response) {
     client.query('DELETE FROM products WHERE id=?', [request.param('id')], function () {
         response.redirect('/');
    });
});
 
cs
 cs
삭제시 삭제 쿼리문 실행
삭제를 한후 삭제된 것을 보여주기 위해 response.redirect('/');를 해서 다시 초기 페이지를 띄어준다.
삭제한 후 DB table을 확인해보면 데이터가 삭제됨을 확인을 할 수 있다.




1
2
3
4
5
app.get('/insert', function (request, response) {
    fs.readFile('insert.html', 'utf8', function (error, data) {
        response.send(data);
    });
});
cs
cs


1
2
3
4
5
6
7
8
app.post('insert', function (request, response) {
    var body = request.body;
    
    client.query('INSERT INTO products(name, modelnymber, series) VALUES (?,?,?)', [body.name, body.modelnmber, body.series], function () {
        response.redirect('/');
    });
});
 
cs
cs
데이터 추가 부분은 주소창에서 /insert를 직접 치고 들어가도 되고
INSERT DATA늘 눌러서 POST방식으로 페이지를 접근을 하게 해야 된다.(다양한 방식으로 접근이 가능하도록)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<head>
    <meta charset="utf-8" />
    <title>insert Page</title>
</head>
<body>
    <h1>Insert Page</h1>
    <hr />
    <from method="post">
        <fieldset>
            <table>
                <tr>
                    <td><label>name</label></td>
                    <td><input type="text" name="name"/></td>
                </tr>
                <tr>
                    <td><label>model number</label></td>
                    <td><input type="text" name="modelnumber" /></td>
                </tr>
                <tr>
                    <td><label>series</label></td>
                    <td><input type="text" name="series" /></td>
                </tr>
            </table>
            <input type="submit" />
        </fieldset>
    </from>
</body>
</html>
cs
inset.html 페이지

 
제출을 누르면 POST전송이 된다
근데 나는 안된다... 하하

씁.... ㅋㅋㅋㅋ
 



1
2
3
4
5
6
7
8
9
10
11
app.get('/edit/:id', function (request, response) {
    fs.readFile('edit.html', 'utf8', function (error, data) {
        client.query('SELECT * FROM products WHERE id =?', [
            request.param('id')
        ], function (error, result) {
            response.send(ejs.render(data, {
                data: result[0]
            }));
        });
    });
});
cs
get부분


1
2
3
4
5
6
7
8
9
10
11
app.post('/edit/:id', function (request, response) {
    var body = request.body
    
    client.query('UPDATE products SET name=?, modelnumber=?, series=? WHERE id=?', [
        body.name, body.modelnumber, body.series, request.param('id')
    ], function () {
        response.redirect('/');
    });
});
 
 
cs
cs
post부분


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Edit Page</title>
</head>
<body>
    <h1> Edit Page</h1>
    <hr />
    <form method="post">
        <fieldset>
 
            <legend>Edit Data</legend>
            <table>
                <tr>
                    <td><label>ID</label></td>
                    <td><input type="text" name="id" value="<%=data.id %>" disabled/></td>
                </tr>
                <tr>
                    <td><label>Name</label></td>
                    <td><input type="text" name="name" value="<%=data.name %>"  /></td>
                </tr>
                <tr>
                    <td><label>Model Number</label></td>
                    <td><input type="text" name="modelnumber" value="<%=data.modelnumber %>" /></td>
                </tr>
                <tr>
                    <td><label>Series</label></td>
                    <td><input type="text" name="Series" value="<%=data.Series %>" /></td>
                </tr>
            </table>
            <input type="submit" />
        </fieldset>
    </form>
</body>
</html>
cs
edit.html 페이지 문서

 

여기까지는 잘 되는데

전체적으로 post요청이 말을 안듣네 ㅋㅋㅋㅋ

 
씁씁하네ㅜㅠ

왜 안될까?

이것만 되면 기본적인 DB는 되는거 같은데;;;;;;;
모바일로 접속 정상 접속은 된다.


같은 에러 메시지가 뜬다... 
흠........ 코드를 다시 좀 봐야겠다..
moon_and_james-48

 
라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

[git] git log 확인하기

git log를 통해서 커밋 이력과 해당 커밋에서 어떤 작업이 있었는지에 대해 조회를 할 수 있다. 우선 git에서의 주요 명령어부터 알아보겠다. $ git push [branch name] $ git pull [branch name] 여기서 branch name은 로컬일 경우 해당 브런치 이름만 적으면 되지만 깃허브 원격 저장소로 연결을 원할 경우는 해당 브런치 이름 앞에 꼭 origin을 붙이도록 한다. $ git brnch [branch name] $ git checkout [branch name] branch일경우 해당 브런치를 생성을 한다. 여기서 현재의 브런치를 기준으로 브런치를 따는것이다. checkout은 브런치를 바꾸는 것이다.(HEAD~[숫자]를 이용하면 해당 커밋으로 움직일수 있다.. 아니면 해당 커밋 번호를 통해 직접 옮기는것도 가능하다.) -> 해당 커밋으로 옮기는 것일뿐 실질적으로 바뀌는 것은 없다. 해당 커밋으로 완전히 되돌리려면 reset이라는 명령어를 써야한다. 처음 checkout을 쓰면 매우 신기하게 느껴진다. 막 폴더가 생겼다가 지워졌다가 ㅋㅋㅋㅋㅋ  master 브런치에서는 ht.html파일이 존재하지만 a브런치에서는 존재하지않는다. checkout 으로 변경을 하면 D 로 명시를 해준다.  $ git log 해당 브런치의 커밋 내역을 보여준다. a 브런치의 커밋 내역들이다. (머지 테스트를 하느라 커밋 내용이 거의 비슷하다 ㅋㅋ) master 브런치의 커밋 내역들이다. 커밋 번호, 사용자, 날짜, 내용순으로 등장을 한다. 이건 단순히 지금까지의 내역을 훑어보기 좋다. 좀더 세밀한 내용을 봐보자. $ git log --stat --stat을 붙이면 기존의 로그에서 간략하게 어떤 파일에서
댓글 쓰기
자세한 내용 보기

[kali linux] sqlmap - post요청 injection 시도

아래 내용은 직접 테스트 서버를 구축하여 테스트 함을 알립니다.  실 서버에 사용하여 얻는 불이익에는 책임을 지지 않음을 알립니다. sqlmap을 이용하여 get요청이 아닌 post요청에 대해서 injection공격을 시도하자. 뚀한 다양한 플래그를 이용하여 DB 취약점 테스트를 진행을 해보려고 한다. 서버  OS : windows 7 64bit Web server : X Server engine : node.js Framework : expresss Use modules : mysql Address : 172.30.1.30 Open port : 6000번 공격자 OS : kali linux 64bit use tools : sqlmap Address : 172.30.1.57 우선 서버측 부터  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 var  express  =  require( 'express' ); var  app  =  express(); var  mysql  =  require( 'mysql' ); var  ccc  =  mysql.createConnection({     host: '127.0.0.1' ,     user: 'root' ,     post: '3306' ,     password: '*********' ,     database: 'test' }) app.post(
댓글 쓰기
자세한 내용 보기

[git] pull을 하여 최신코드를 내려받자

보면 먼가 로고가 다르게 뜨는것을 확인을 할 수가있다. C:\Users\mung\Desktop\etc\study\python-gene>git checkout remotes/origin/master Note: checking out 'remotes/origin/master'. You are in 'detached HEAD' state. You can look around, make experimental changes and commit them, and you can discard any commits you make in this state without impacting any branches by performing another checkout. If you want to create a new branch to retain commits you create, you may do so (now or later) by using -b with the checkout command again. Example:   git checkout -b HEAD is now at 29e282a... fetch test C:\Users\mung\Desktop\etc\study\python-gene>git branch * (HEAD detached at origin/master)   master   test1   test2 깃이 잘 쓰면 참 좋은놈인데 어지간히 쓰기가 까다롭다. 처음에 깃을 푸시 성공하는데만 한달정도 걸렸던걸로 기억이 난다.. ㅋㅋㅋ 여담으로  깃 프로필을 가면 아래사진 처럼 보인다. 기여도에 따라서 초록색으로 작은 박스가 채워지는데 저걸 잔디라고 표현을 한다고 합니다 ㅎ 저 사진은 제 깃 기여도 사진입니당 ㅋㅋㅋㅋ 다시 본론으로 돌아와서 ㅋㅋ pull을 하면 깃에 최신 소
댓글 쓰기
자세한 내용 보기