스파르타 코딩클럽 11일 메이킹 챌린지 - 4

로그인 페이지

디자인에 감각이 좋다고 생각하지 않아 부트스트랩을 이용하여 부족한 디자인 감각을 보완하였다.

Login 클릭 > member 데이터베이스에 있는 아이디 및 비밀번호 일치할 경우 > 메인 페이지 이동 > 일치하지 않을 경우 > 로그인 실패

Sign Up 클릭 > 회원가입 페이지 이동

파비콘 적용

<link rel="shortcut icon" href="../static/movie.ico">소스 코드를 작성하여 웹사이트 아이콘인 파비콘을 적용하였다.

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"> 소스 코드는 alert 메시지 박스를 디자인 하기위한 코드이며 

function go_url() {

location.href = "/main"

}

swal({
title: "로그인 완료!",
text: "",
icon: "success",
});
setTimeout('go_url()', 1000)

메시지를 나타난 후 1초 후에 자동으로 원하는 URL로 이동하게 설정하였다.

@app.route('/login', methods=['GET'])
def read_reviews():
reviews = list(db.member.find({},{'_id':0,'id':1,'pw':1}))
return jsonify({'all_reviews' : reviews})

# member 데이터베이스에서 아이디, 비밀번호를 가져오기

$.ajax({
type: "GET",
url: "/login",
data: {},
success: function (response) {

var userid = $("#id2").val() // userid 의 값을 받아와 넣음.
var userpw = $("#pw2").val() // userpw 의 값을 받아와 넣음.
var list = response['all_reviews']
var idget = [];
var pwget = [];
var i = 0;
for (i = 0; i < list.length; i++) {
idget[i] = list[i]['id']
pwget[i] = list[i]['pw']
}
console.log(idget, pwget)

if (idget.includes(userid) && pwget.includes(userpw)) {
swal({
title: "로그인 완료!",
text: "",
icon: "success",
});
setTimeout('go_url()', 1000)
} else {
swal({
title: "로그인 실패!",
text: "아이디 및 비밀번호 오류입니다!",
icon: "error",
});
}
}
}

// member DB에 저장된 아이디와 비밀번호 일치시 로그인 가능