2022-12-03 MVC 패턴 / 방명록 만들기

1. 최상위 js 부터 읽고 라우터 미들웨어로 걸어 놓은 부분 ./routes > 그파일로가면 라우터 정의해둔게 있다

2. 라우트 파일 확인(라우터만 존재)
'/' ,controller.visitor 
//localhost:8000/visitor

3. 컨트롤러 파일( 라우터에 요청이 왔을때  해야 할 일)
가서 라우터에서 하고싶은 일 
함수 생성하고 > 라우터 파일 순으로 해줘야 오류가 뜨지 않습니다.

visitor 함수 안에
get_visitor는 Visitor이라는 객체를 타고 오고있다.
Visitor는 model의 파일을 require하고 있다.

4. model 파일
초반 8줄은 mysql 로그인


그 곳에 get_visitor가 컨트롤러의 기능으로 들어가게 된다
직접적으로 쿼리문, sql문을 날리는 것도 모델에서 한다.

get_visitor 함수에서는 visitor라는 테이블을 조회하고, sql문
데이터베이스에 접근하고

cnn.query (실행 후 res.render를 해야 result가 나온다) > 콜벡으로 해야한다 
이 실행하게 된다.
err처리 후
rows (쿼리 실행시킨 결과가 rows에 담깁니다)
방명록을 보기위해 rows가 필요햇고

cb(rows)
cb라는 함수에 rows라는 인자로 넘겨줌
(cb) 매개변수로 받아온 콜백함수를 
cb(rows)로 실행 중이다.

get_visitor을 실행 시키는 곳 인자를 살펴보면 된다.
cosole.log
res.render('visitor'를 읽고 , { data : result } > data라는 이름으로 result를 보내고 있고
이 result도 매개변수로 들어가있어서 이 함수를 실행시키는 부분 > 콜벡함수로 가면 된다.
cb(rows)라는게 결국 result에 담겨서 

visitor에 있는 모든 행을 render하는 결과



ㅡㅡㅡㅡㅡ
post요청

정보의 데이터베이스에 접속해서 visitor라는 테이블에 insert를 해야 했다.
바디로 받아온 데이터를 info라는 얘로 
info = req.body; {name : , comment : } 클라이언트가 넘겨준다
'${info.name}' > 문자열이라 따옴표 반드시

cnn.query spl문 실행, 실행 완료 뒤 할 일 콜벡함수로 지정
err없으면 result에 spl 실행 결과가 담긴다.

*select문을 때리면, 객체 배열로 담기기때문에 rows라고 했다
exports.register_visitor = (info, cb) => {
    //info = req.body; {name : , comment : } 클라이언트가 넘겨준..
    //클라이언트 정보를 콘트롤러에서 넘겨줘야한다
 
    var sql = `insert into visitor(name, comment) values('${info.name}', '${info.comment}');`//아이디는 자동생성 되니 굳이 적지 않는다. 클라이언트가 넘겨준 정보를 넣어야 하는데 
    
    cnn.query(sql, (err, result)=>{
        if(err) throw err;

        console.log(' insert result : ', result );
        cb(result.insertId);
    })
}


이 받아온 것을 컨트롤러 파일에서
res.send(string(id)); 하고 있다 

view에서 보면
response.data 에 id만 담기게 된다.

<td>${response.data}</td> // 아이디 추가
<td>${data.comment}</td> 
<td>${response.data}</td>
nmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm저번시간까지 수업

 

삭제부터 합니다.

삭제버튼을 누르면, 삭제가 되도록 해보자

동적으로 삭제 시켜봣자

마이sql에서 삭제 안하면 새로고침시 다시 있다.

 

1.ejs파일로 간다

ejs파일

딜리트문 작성할때

아이디가 필요하고, 

삭제할 아이디를 인자로 받는다 ejs문

저 것을 함수를 받아줄 서버에 보낼 요청

 

우리는 삭제를 할 것이니 method를 다르게 써야 함

http 메소드는 문법적으로는 틀려도 상관없지만 상황에 맞게 적절한 요청을 보내야한다

rest api 참고!

get	데이터 조회
post	데이터 insert , 생성, 삽입
delete	데이터 삭제
put	데이터 전체 수정
patch	데이터 부분 수정

get은 query로 받고, 나머지는 body로 받는다.

 

method : 'delete'

ejs파일

 

 

라우터 정의하러 ㄱㄱ

2. routes 라우트 파일

'/'라는 기본 라우터를 controller.visitor이라는 주소, 기능을 넣는다.

주석 참고

3. cotroller 파일에서 함수 정의

작업목록 생각해보자

1. 어떤것을 삭제 해야 하는가? > mysql의 req.body.id에

 

3. model 모델파일

매개변수로 받아온 id를 삭제 하겠다

sql 결과 result는 상관이 없어서 > 인자 보내 줄게 없어서

그냥 응답만 보낼 수 있도록 cb();로 해도된다

 

컨트롤러 파일

첫번째 인자로 id가 필요해서 ID를 인자로 넣엇고

그 후 해야 할 것을 콜벡으로 응답만 보냈습니다.

동적으론 무엇인가 되진 않겟지만

 

mysql들어가서 삭제되는지부터 확인해보겟다

워크벤치 들어가서

삭제 해보자

뜨며 꺼진다..?

 

delete from 오타와

visitor table 컬럼이 ID 대문자였다..

 

다시 수정해보고 

삭제 버튼 눌러보자

로그에는 이렇게 뜬다.

워크벤치에도 홍길동이 사라져있다.

자 그럼 벡서버는 잘 처리되고 있다

이제는 우리 삭제한 것이 클라이언트 view에도 보이도록 하자

ID 2번이 바로 삭제되는 동적처리가 보이도록 해봅시다

 

 

ejs파일

onclick 함수를 인자를 두개 받도록 한다

onclick="delete_visitor(id값, button태그)" = > delete_visitor (delete_id, element)

this: 태그에함수를 달때 인자로 this를 넘겨주면 이 this는 함수가 달려있는 태그가 담깁니다.

> button 태그에 담김
this의 부모는 td, 그 부모 tr까지 타고 갈 수 있는 점을 생각

if, else로 걸어본다

 

마지막으로

우리가 등록을 하는 것에 관해서는 삭제가 안된다.

for문에서 생긴게 아니라

tr 태그가 append에 의해 생긴다

 

ejs문에서

<%=data[i]는 포문에서 가져온 ejs문

 

우리는 

 

---

수정 버튼을 누르면 데이터가 기본값으로 바뀌고 등록버튼이 수정버튼이 되도록

1. 수정 누르면, 이 값이 디폴드값으로 바뀌고 

2. 등록버튼이 수정, 취소버튼으로 바뀌도록

 

ejs

아이디 조회

모델로 넘김

모델에서 서버에서 받아온 데이터 처리 값의

첫번째 = ID : 4

 

등록 수정 UI를 만들겟다

MMMMMMMMMMMMMMMMMMMMMMMMMM

 

이제 함수 걸것이다

 

url만들었으니 요청 받을 선언을 먼저

 

 

컨트롤러에서 사용하려면

visitor

 

---

선생님 해답 읽어보기

해석

클라이언트와 서버로 나눠서 생각해봐라

먼저 클라이언트가 가입 홈페이지에 접속할 것이다

먼저 데이터베이스와 연결되어 있는지 확인해야 한다.

1. 기본 화면 view 파일 render

2. 클라이언트가 그 화면에서 서버에 요청을 하고 그에 대한 처리를 서버가 하며

서버가 응답해야 한다.

여기서 그에 대한 처리 : 회원가입으로 아이디, 비번, 이름 인풋 값을 register(등록)버튼을 누르면 데이터 베이스에 이게 추가 되도록 해야한다.

3. 등록 된 후 성공 알림창이 뜨고, 로그인 홈페이지로 이동 한다.

4. 로그인에 성공여부에 따라 메세지가 알림창으로 뜬다. 후에 마이페이지로 이동 되도록

5. 마이페이지에서 정보 수정, 회원 탈퇴 버튼이 정상 작동 되게 해라 (데이터베이스 포함)