조인천 / Youtube_MPL

Go to a project
Toggle navigation Toggle navigation pinning
kimkyeonghun
33bb38fb 1 parent 4714b44f

로그인 기능 구현

Inline Side-by-side
Showing 16 changed files with 280 additions and 29 deletions
...@@ -7,8 +7,10 @@ ...@@ -7,8 +7,10 @@
7 var express = require('express') 7 var express = require('express')
8 , routes = require('./routes') 8 , routes = require('./routes')
9 , todo = require('./routes/todo') 9 , todo = require('./routes/todo')
10 + , login =require('./routes/login')
10 , http = require('http') 11 , http = require('http')
11 - , path = require('path'); 12 + , path = require('path')
13 + , fs = require('fs');
12 14
13 var app = express(); // 어플리케이션 생성 15 var app = express(); // 어플리케이션 생성
14 var port = 3000; // 어플리케이션 포트 16 var port = 3000; // 어플리케이션 포트
...@@ -36,6 +38,20 @@ app.configure('development', function(){ // 개발 버전 ...@@ -36,6 +38,20 @@ app.configure('development', function(){ // 개발 버전
36 38
37 // 라우팅 39 // 라우팅
38 app.get('/', routes.index); 40 app.get('/', routes.index);
41 +app.get('/login',function(req,res){
42 + fs.readFile('./views/login.html',function(error,data){
43 + res.writeHead(200, {'Content-Type': 'text/html'});
44 + res.end(data);
45 + })
46 +});
47 +app.get('/signup',function(req,res){
48 + fs.readFile('./views/signup.html',function(error,data){
49 + res.writeHead(200,{'Content-Type':'text/html'});
50 + res.end(data);
51 + })
52 +})
53 +app.get('/LogInForm',login.LogInForm);
54 +app.post('/SignUpForm',login.SignUpForm);
39 app.get('/list', todo.list); 55 app.get('/list', todo.list);
40 app.post('/add', todo.add); 56 app.post('/add', todo.add);
41 app.post('/complete', todo.complete); 57 app.post('/complete', todo.complete);
......
1 +$(document).ready(function(){
2 +
3 + // 로그인 처리
4 + $('#login-submit').click(function(e) {
5 + if ($("#userid").val() == '') {
6 + alert('아이디를 입력하세요');
7 + $("#userid").focus();
8 + return false;
9 + }
10 +
11 + if ($("#password").val() == '') {
12 + alert('비밀번호를 입력하세요');
13 + $("#password").focus();
14 + return false;
15 + }
16 + var Info={
17 + 'userId': $('#userid').val(),
18 + 'password' : $('#password').val()
19 + }
20 + $.ajax('/LogInForm',{
21 + 'method': 'GET',
22 + 'data': {
23 + 'Info' : Info
24 + },
25 + 'success': function(list){
26 + list=JSON.parse(list).list;
27 + for (var i=0, len=list.length; i < len; i++){
28 + if (list[i].userId==Info['userId']){
29 + if (list[i].password==Info['password']){
30 + location.href='/';
31 + }
32 + }
33 + }
34 + }
35 + })
36 +})
37 + $('#makeInfo').click(function(e){
38 + location.href='/signup';
39 + })
40 +});
1 +$(function() {
2 + // 로그인 처리
3 + $('#submit').click(function(e) {
4 + if ($("#fname").val() == '') {
5 + alert('이름을 입력하세요');
6 + $("#fname").focus();
7 + return false;
8 + }
9 + if ($("#email").val()== ''){
10 + alert('아이디를 입력하세요.')
11 + $('#email').focus();
12 + return false;
13 + }
14 + if ($("#ssnein").val()==''){
15 + alert("API키를 입력하세요");
16 + $("#ssnein").focus();
17 + return false;
18 + }
19 + if ($("#passwd").val() == '') {
20 + alert('비밀번호를 입력하세요');
21 + $("#passwd").focus();
22 + return false;
23 + }
24 + if ($("#passwdcheck").val() != $("#passwd").val()){
25 + alert("비밀번호 불일치");
26 + $("#passwdcheck").focus();
27 + return false;
28 + }
29 +
30 + $.ajax('/SignUpForm',{
31 + 'method': 'Post',
32 + 'data': {
33 + 'fname': $('#fname').val(),
34 + 'userId': $('#email').val(),
35 + 'API':$('#ssnein').val(),
36 + 'password' : $('#passwd').val(),
37 + },
38 + 'success': function(e){
39 + location.href='/login';
40 + }
41 + })
42 +})
43 +});
...\ No newline at end of file ...\ No newline at end of file
...@@ -3,7 +3,6 @@ $(document).ready(function () { ...@@ -3,7 +3,6 @@ $(document).ready(function () {
3 $.ajax('/list', { 3 $.ajax('/list', {
4 'success': function (list) { 4 'success': function (list) {
5 var trs = ''; 5 var trs = '';
6 -
7 list = JSON.parse(list).list; 6 list = JSON.parse(list).list;
8 7
9 for(var i = 0, len = list.length; i < len; i++) { // 테이블 내용 만들기 8 for(var i = 0, len = list.length; i < len; i++) { // 테이블 내용 만들기
...@@ -21,7 +20,7 @@ $(document).ready(function () { ...@@ -21,7 +20,7 @@ $(document).ready(function () {
21 }; 20 };
22 21
23 get_list(); 22 get_list();
24 - 23 +
25 $('.form-inline button').click(function () { // 새로운 할 일 추가하기 24 $('.form-inline button').click(function () { // 새로운 할 일 추가하기
26 var $getVal = $('#new_todo').val(); 25 var $getVal = $('#new_todo').val();
27 var $getVal2 = $('#count').val(); 26 var $getVal2 = $('#count').val();
......
...@@ -5,4 +5,4 @@ ...@@ -5,4 +5,4 @@
5 5
6 exports.index = function(req, res){ 6 exports.index = function(req, res){
7 res.render('index', { title: '나만의 YOUTUBE 리스트' }); 7 res.render('index', { title: '나만의 YOUTUBE 리스트' });
8 -};
...\ No newline at end of file ...\ No newline at end of file
8 +};
......
1 +var fs = require('fs');
2 +var request = require('request');
3 +
4 +exports.LogInForm=function(req,res){
5 + fs.exists('./user_list.json', function (exists) { // ToDo 목록 존재 확인
6 + if(exists) {
7 + fs.readFile('./user_list.json', {
8 + 'encoding': 'utf8'
9 + }, function (err, list) {
10 + console.log(list);
11 + res.json(list);
12 + });
13 + } else {
14 + var list = { // 기본 ToDo 목록 형식
15 + 'list': []
16 + };
17 +
18 + fs.writeFile('./user_list.json', JSON.stringify(list), function (err) { // todo_list.json 파일 쓰기
19 + res.json(list);
20 + });
21 + }
22 + });
23 +};
24 +
25 +exports.SignUpForm=function(req,res){
26 + fs.readFile('./user_list.json',{
27 + 'encoding':'utf-8'
28 + },function(err,data){
29 + data=JSON.parse(data);
30 + var Info={
31 + 'fname': req.body.fname,
32 + 'userId': req.body.userId,
33 + 'API':req.body.API,
34 + 'password' : req.body.password,
35 + }
36 + data.list.push(Info);
37 + fs.writeFile('./user_list.json',JSON.stringify(data),function(err){
38 + res.json(true);
39 + });
40 + }
41 + )
42 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -43,10 +43,6 @@ exports.add = function(req, res1){ // 새로운 ToDo 항목 추가하기 ...@@ -43,10 +43,6 @@ exports.add = function(req, res1){ // 새로운 ToDo 항목 추가하기
43 regionCode:"KR", 43 regionCode:"KR",
44 order:"viewCount" 44 order:"viewCount"
45 }; 45 };
46 -
47 -
48 - console.log("'");
49 - console.log("`");
50 optionParams.q = encodeURI(optionParams.q); 46 optionParams.q = encodeURI(optionParams.q);
51 47
52 var url="https://www.googleapis.com/youtube/v3/search?"; 48 var url="https://www.googleapis.com/youtube/v3/search?";
...@@ -66,7 +62,6 @@ exports.add = function(req, res1){ // 새로운 ToDo 항목 추가하기 ...@@ -66,7 +62,6 @@ exports.add = function(req, res1){ // 새로운 ToDo 항목 추가하기
66 'encoding':'utf8' 62 'encoding':'utf8'
67 },function(err,data){ 63 },function(err,data){
68 data= JSON.parse(data); 64 data= JSON.parse(data);
69 - data.list=[];
70 for (var content in data2){ 65 for (var content in data2){
71 var todo = { // 기본 ToDo 항목 형식 66 var todo = { // 기본 ToDo 항목 형식
72 'contents': '', 67 'contents': '',
...@@ -84,24 +79,6 @@ exports.add = function(req, res1){ // 새로운 ToDo 항목 추가하기 ...@@ -84,24 +79,6 @@ exports.add = function(req, res1){ // 새로운 ToDo 항목 추가하기
84 } 79 }
85 }); 80 });
86 }); 81 });
87 -
88 - //todo.contents = req.body.contents;
89 -/*
90 - fs.readFile('./todo_list.json', {
91 - 'encoding': 'utf8'
92 - }, function (err, data) {
93 - data = JSON.parse(data);
94 -
95 - for (var i=0;i<5;i++)
96 - {
97 - data.list.push(VideoIds[i]);
98 - }
99 - // 새로운 ToDo 항목 추가
100 -
101 - fs.writeFile('./todo_list.json', JSON.stringify(data), function (err) {
102 - res.json(true);
103 - });
104 - });*/
105 }; 82 };
106 83
107 exports.complete = function(req, res){ // 선택한 ToDo 항목 완료하기 84 exports.complete = function(req, res){ // 선택한 ToDo 항목 완료하기
......
1 -{"list":[{"contents":"[런닝맨] &#39;박지성(Park ji sung)&amp;런닝맨 vs 설기현(Seol ki hyeon)&amp;아이돌&#39; / &#39;RunningMan&#39; Review","videoId":"sVtNdmAKvUw","complete":false},{"contents":"박지성이 우리 팀에 일일용병으로 나온다면? (100% 리얼) ㅋㅋㅋㅋㅋㅋㅋㅋ l 슛포러브 Shoot for Love","videoId":"VqM7SZU1Qgk","complete":false},{"contents":"멕시코전 앞두고 손흥민과 치차리토를 만난 박지성. 긴 대화가 진짜 필요없는 듯 l 후방빌드업 in 러시아 월드컵 l 슛포러브 Shoot for Love","videoId":"GfHfuVOO37Q","complete":false},{"contents":"36m에서 떨어지는 공 트래핑 하기 도전하는 박지성ㄷㄷㄷ 퍼스트 터치 지렸다 l 슛포러브 Shoot for Love","videoId":"fhtUPZTaWPM","complete":false},{"contents":"방금 나온 박지성 2명재끼고 골 대박 [맨유 vs MLS 올스타]","videoId":"e0uZXCEFaes","complete":false},{"contents":"박지성, 맨유 현지팬들의 솔직한 평가(정말 예상치 못한 대답들..)","videoId":"6xUEoAiYIAk","complete":false},{"contents":"[감동주의] 박지성과 퍼거슨","videoId":"HJr_4FWvRmE","complete":false}]}
...\ No newline at end of file ...\ No newline at end of file
1 +{"list":[{"contents":"구자철·기성용 &quot;남태희, 백성동 빨리 안나와?&quot;","videoId":"JFedpGFFjkM","complete":false}]}
...\ No newline at end of file ...\ No newline at end of file
......
1 +{"list":[{"fname":"김경훈","userId":"kkh115505@naver.com","API":"abcdefg","password":"1234"}]}
...\ No newline at end of file ...\ No newline at end of file
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
15 <div class ="form-group"> 15 <div class ="form-group">
16 <input type="number"class="form-control" id="count" placeholder ="갯수"> 16 <input type="number"class="form-control" id="count" placeholder ="갯수">
17 </div> 17 </div>
18 - <button type="button" class="btn btn-primary">추가</button> 18 + <button type="button" class="btn btn-primary">검색</button>
19 </form> 19 </form>
20 <table class="table"> <!-- ToDo 목록 --> 20 <table class="table"> <!-- ToDo 목록 -->
21 <thead> 21 <thead>
......
1 +<!------ Include the above in your HEAD tag ---------->
2 +
3 +<!doctype html>
4 +<html lang="en">
5 +<head>
6 + <!-- Required meta tags -->
7 + <meta charset="utf-8">
8 + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9 + <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
10 + <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
11 + <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
12 + <!-- Fonts -->
13 + <link rel="dns-prefetch" href="https://fonts.gstatic.com">
14 + <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
15 +
16 + <link rel="stylesheet" href="/stylesheets/style.css">
17 + <!-- Bootstrap CSS -->
18 + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
19 + <title>로그인</title>
20 +</head>
21 +<body>
22 +<main class="login-form">
23 + <div class="cotainer">
24 + <div class="row justify-content-center">
25 + <div class="col-md-8">
26 + <div class="card">
27 + <div class="card-header">Login</div>
28 + <div class="card-body">
29 + <form action="" method="">
30 + <div class="form-group row">
31 + <label for="userid" class="col-md-4 col-form-label text-md-right">E-Mail Address</label>
32 + <div class="col-md-6">
33 + <input type="text" id="userid" class="form-control" name="userid" required autofocus>
34 + </div>
35 + </div>
36 +
37 + <div class="form-group row">
38 + <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
39 + <div class="col-md-6">
40 + <input type="password" id="password" class="form-control" name="password" required>
41 + </div>
42 + </div>
43 + <div class="col-md-6 offset-md-4">
44 + <button type="submit" id="login-submit" class="btn btn-primary">
45 + 로그인
46 + </button>
47 + <button type="button" id="makeInfo" class="btn btn-primary">
48 + 회원가입하기
49 + </button>
50 + </a>
51 + </div>
52 + </div>
53 + </form>
54 + </div>
55 + </div>
56 + </div>
57 + </div>
58 + </div>
59 +
60 +</main>
61 +</body>
62 +<script src="/javascripts/login.js"></script>
63 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!doctype html>
2 +<html lang="en">
3 +<head>
4 +<meta charset="utf-8">
5 +<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6 +<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
7 +<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
8 +<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
9 +<!------ Include the above in your HEAD tag ---------->
10 +<title>회원가입 페이지</title>
11 +</head>
12 +<form class="form-horizontal">
13 +<fieldset>
14 +
15 +<!-- Form Name -->
16 +<legend>새로운 사용자 등록</legend>
17 +
18 +<!-- Text input-->
19 +<div class="form-group">
20 + <label class="col-md-4 control-label" for="fname">이름</label>
21 + <div class="col-md-5">
22 + <input id="fname" name="fname" type="text" placeholder="이름을 입력하세요." class="form-control input-md" required="">
23 + </div>
24 +</div>
25 +
26 +<!-- Text input-->
27 +<div class="form-group">
28 + <label class="col-md-4 control-label" for="email">아이디</label>
29 + <div class="col-md-5">
30 + <input id="email" name="email" type="eamil" placeholder="이메일을 입력하세요." class="form-control input-md" required="">
31 + </div>
32 +</div>
33 +
34 +<!-- Text input-->
35 +<div class="form-group">
36 + <label class="col-md-4 control-label" for="ssnein">YouTube Api Key</label>
37 + <div class="col-md-5">
38 + <input id="ssnein" name="ssnein" type="text" placeholder="YouTube Api Key" class="form-control input-md" required="">
39 + <span class="help-block">링크 걸어줍시다.</span>
40 + </div>
41 +</div>
42 +<!-- Text input-->
43 +<div class="form-group">
44 + <label class="col-md-4 control-label" for="passwd">비밀번호</label>
45 + <div class="col-md-5">
46 + <input id="passwd" name="passwd" type="password" placeholder="비밀번호를 입력하세요." class="form-control input-md" required="">
47 + </div>
48 +</div>
49 +
50 +<div class="form-group">
51 + <label class="col-md-4 control-label" for="passwdcheck">비밀번호확인</label>
52 + <div class="col-md-5">
53 + <input id="passwdcheck" name="passwdcheck" type="password" placeholder="비밀번호를 입력하세요." class="form-control input-md" required="">
54 + </div>
55 + </div>
56 +
57 +<div class="form-group">
58 +<label class="col-md-4 control-label" for="submit"></label>
59 + <div class="col-md-4">
60 + <label class="checkbox-inline" for="submit">
61 + <input class="btn btn-success" type="submit" name="submit" id="submit" value="새로운 계정 생성하기">
62 + </label>
63 + </div>
64 +</div>
65 +
66 +</fieldset>
67 +</form>
68 +
69 +<script src="/javascripts/signup.js"></script>
70 +</html>
...\ No newline at end of file ...\ No newline at end of file
This file is too large to display.
This file is too large to display.
This file is too large to display.
This file is too large to display.