이해님 / term-project

Go to a project
Toggle navigation Toggle navigation pinning
dlgosla
f5b6453f 1 parent f531e172

[fix] add 404 error handling

Expand all
Inline Side-by-side
Showing 14 changed files with 273 additions and 111 deletions
No preview for this file type

68.2 KB
1 -## 트위터 내 계정 분석 사이트 1 +### http://khuhub.khu.ac.kr/2018110654/term-project 의 프로젝트를 깃허브로 이동하였습니다.
2 +
3 +# 트위터 내 계정 분석 사이트
2 <img src="images/main.png"> 4 <img src="images/main.png">
3 5
4 -http://www.twitter-analyze.ml 6 +
7 +http://www.twitter-analyze.ml:3000/
5 서버가 켜져있다면 위의 url으로 접속할 수도 있습니다. 8 서버가 켜져있다면 위의 url으로 접속할 수도 있습니다.
6 9
10 +
7 ## 프로젝트 소개 11 ## 프로젝트 소개
8 검색한 트위터 계정의 **타임라인을 분석하는 사이트**입니다.</br> 12 검색한 트위터 계정의 **타임라인을 분석하는 사이트**입니다.</br>
9 이 프로그램은 해당 계정에서 작성한 글 뿐만 아니라 리트윗한 게시물까지 포함해 검색하거나 해당 계정의 인기있는 글들도 확인할 수 있습니다. </br> 13 이 프로그램은 해당 계정에서 작성한 글 뿐만 아니라 리트윗한 게시물까지 포함해 검색하거나 해당 계정의 인기있는 글들도 확인할 수 있습니다. </br>
...@@ -25,7 +29,6 @@ http://www.twitter-analyze.ml ...@@ -25,7 +29,6 @@ http://www.twitter-analyze.ml
25 ## 빌드방법 29 ## 빌드방법
26 30
27 > <https://developer.twitter.com/en></br> 31 > <https://developer.twitter.com/en></br>
28 -
29 _위 링크에서 twiiter api key를 발급받고 코드에 발급받은 key를 삽입해주세요 32 _위 링크에서 twiiter api key를 발급받고 코드에 발급받은 key를 삽입해주세요
30 33
31 > npm install 34 > npm install
...@@ -34,7 +37,6 @@ _위 링크에서 twiiter api key를 발급받고 코드에 발급받은 key를 ...@@ -34,7 +37,6 @@ _위 링크에서 twiiter api key를 발급받고 코드에 발급받은 key를
34 _terminal에서 위의 명령어를 작성해주세요_ 37 _terminal에서 위의 명령어를 작성해주세요_
35 38
36 39
37 -
38 > npm install twitter 40 > npm install twitter
39 > npm install express 41 > npm install express
40 > npm install ejs 42 > npm install ejs
...@@ -43,7 +45,6 @@ _terminal에서 위의 명령어를 작성해주세요_ ...@@ -43,7 +45,6 @@ _terminal에서 위의 명령어를 작성해주세요_
43 _위의 명령어가 작동하지 않는다면 이 명령어로 시도하세요_ 45 _위의 명령어가 작동하지 않는다면 이 명령어로 시도하세요_
44 46
45 ## 사용방법 47 ## 사용방법
46 -
47 1. 타임라인 검색 기능 48 1. 타임라인 검색 기능
48 - 메인페이지에 있는 검색창에 보고싶은 계정의 아이디(ex)@twitterKorea)를 검색해 타임라인을 볼 수 있습니다. 49 - 메인페이지에 있는 검색창에 보고싶은 계정의 아이디(ex)@twitterKorea)를 검색해 타임라인을 볼 수 있습니다.
49 <img src="images/timeline.png"> 50 <img src="images/timeline.png">
...@@ -53,7 +54,7 @@ _위의 명령어가 작동하지 않는다면 이 명령어로 시도하세요_ ...@@ -53,7 +54,7 @@ _위의 명령어가 작동하지 않는다면 이 명령어로 시도하세요_
53 <img src="images/search.png"> 54 <img src="images/search.png">
54 55
55 - 이 때 내가 리트윗한 게시물도 포함해 검색합니다 56 - 이 때 내가 리트윗한 게시물도 포함해 검색합니다
56 - <img src="images/retweet search.png"> 57 + <img src="images/retweet%20search.png">
57 58
58 3. 인기글 보여주기 기능 59 3. 인기글 보여주기 기능
59 - 현재 해당계정에서 인기있는 글들을 모아 보여줍니다. 60 - 현재 해당계정에서 인기있는 글들을 모아 보여줍니다.
......
This diff is collapsed. Click to expand it.
1 +{
2 + "name": "express-tutorial",
3 + "version": "1.0.0",
4 + "dependencies": {
5 + "ejs": "~2.4.1",
6 + "express": "~4.13.1",
7 + "twitter": "^1.7.1"
8 + }
9 +}
...\ No newline at end of file ...\ No newline at end of file
1 { 1 {
2 "name": "express-tutorial", 2 "name": "express-tutorial",
3 "version": "1.0.0", 3 "version": "1.0.0",
4 - "dependencies": 4 + "dependencies": {
5 - {
6 "express": "~4.13.1", 5 "express": "~4.13.1",
7 - "ejs": "~2.4.1" 6 + "ejs": "~2.4.1",
8 - } 7 + "twitter": "^1.7.1"
9 } 8 }
9 +}
...\ No newline at end of file ...\ No newline at end of file
......
No preview for this file type
...@@ -7,10 +7,10 @@ app.set('views', __dirname + '/views'); //서버가 읽을 수 있도록 HTML ...@@ -7,10 +7,10 @@ app.set('views', __dirname + '/views'); //서버가 읽을 수 있도록 HTML
7 app.set('view engine', 'ejs'); //서버가 HTML 렌더링을 할 때, EJS 엔진을 사용하도록 설정합니다. 7 app.set('view engine', 'ejs'); //서버가 HTML 렌더링을 할 때, EJS 엔진을 사용하도록 설정합니다.
8 app.engine('html', require('ejs').renderFile); 8 app.engine('html', require('ejs').renderFile);
9 9
10 -app.get('/timeline/:screen_name',tweetsController.getUserTweets); // '/timeline/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴 10 +app.get('/timeline/:screen_name', tweetsController.getUserTweets); // '/timeline/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
11 -app.get('/timeline/:screen_name/:keyword',tweetsController.getUserTweetsForSearch); 11 +app.get('/timeline/:screen_name/:keyword', tweetsController.getUserTweetsForSearch);
12 -app.get('/popular/:screen_name',tweetsController.getUserRetweet);//'/hot/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴 12 +app.get('/popular/:screen_name', tweetsController.getUserRetweet);//'/hot/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
13 -var server = app.listen(3000, function(){ //3000 포트 사용 13 +var server = app.listen(3000, function () { //3000 포트 사용
14 console.log("Express server has started on port 3000"); 14 console.log("Express server has started on port 3000");
15 }) 15 })
16 16
......
1 const Twitter = require('twitter'); 1 const Twitter = require('twitter');
2 2
3 const client = new Twitter({ 3 const client = new Twitter({
4 - consumer_key: 'key1', 4 + consumer_key: "consumer_key",
5 - consumer_secret: 'key2', 5 + consumer_secret: "consumer_secret",
6 - access_token_key: 'key3', 6 + access_token_key: "access_token_key",
7 - access_token_secret: 'key4' 7 + access_token_secret: "access_token_secret"
8 8
9 }); 9 });
10 10
11 11
12 -exports.getUserTweets = async function(req, res){ //전체 타임라인 12 +exports.getUserTweets = async function (req, res) { //전체 타임라인
13 - try{ 13 + try {
14 - let data = client.get('statuses/user_timeline', req.params, function(error,tweets,response){ //트위터 api에서 유저의 타임라인을 가져옴 req.params에 유저 아이디가 들어있음 14 + let data = client.get('statuses/user_timeline', req.params, function (error, tweets, response) { //트위터 api에서 유저의 타임라인을 가져옴 req.params에 유저 아이디가 들어있음
15 - if(!error){ 15 + if (!error) {
16 16
17 console.log(tweets); //가져온 타임라인 내용 콘솔창에 출력 17 console.log(tweets); //가져온 타임라인 내용 콘솔창에 출력
18 - res.render('timeline.html',{ timeline: tweets}); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄 18 + res.render('timeline.html', { timeline: tweets }); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄
19 + }
20 + else {
21 + let msg = ""
22 + if (response.statusCode === 404)
23 + msg = "User not found."
24 + else {
25 + try {
26 + msg = error[0].message
27 + }
28 + catch {
29 + }
30 + }
31 +
32 + res.render('error.html', { statusCode: response.statusCode, msg: msg });
33 +
19 } 34 }
20 }); //아이디를 토대로 타임라인 가져오기 35 }); //아이디를 토대로 타임라인 가져오기
21 36
22 37
23 - }catch(err){ //에러 발생하면 실행 38 + } catch (err) { //에러 발생하면 실행
39 + res.render('error.html', { statusCode: 500, msg: String(err) });
24 console.log(err); 40 console.log(err);
25 res.sendStatus(500); 41 res.sendStatus(500);
26 } 42 }
27 } 43 }
28 44
29 -exports.getUserTweetsForSearch = async function(req, res){ //검색 45 +exports.getUserTweetsForSearch = async function (req, res) { //검색
30 - try{ 46 + try {
31 - let data = client.get('statuses/user_timeline', req.params, function(error,tweets,response){ //트위터 api에서 유저의 타임라인을 가져옴 req.params에 유저 아이디가 들어있음 47 + let data = client.get('statuses/user_timeline', req.params, function (error, tweets, response) { //트위터 api에서 유저의 타임라인을 가져옴 req.params에 유저 아이디가 들어있음
32 - if(!error){ 48 + if (!error) {
33 - res.render('search.html',{ timeline: tweets, keyword:req.params.keyword}); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄 49 + res.render('search.html', { timeline: tweets, keyword: req.params.keyword }); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄
50 +
34 console.log(req.params); 51 console.log(req.params);
35 } 52 }
53 + else {
54 + let msg = ""
55 + if (response.statusCode === 404)
56 + msg = "User not found."
57 + else {
58 + try {
59 + msg = error[0].message
60 + }
61 + catch {
62 + }
63 + }
64 +
65 + res.render('error.html', { statusCode: response.statusCode, msg: msg });
66 + }
36 }); //아이디를 토대로 타임라인 가져오기 67 }); //아이디를 토대로 타임라인 가져오기
37 68
38 - }catch(err){ //에러 발생하면 실행 69 + } catch (err) { //에러 발생하면 실행
39 console.log(err); 70 console.log(err);
71 + res.render('error.html', { statusCode: 500, msg: String(err) });
72 +
40 res.sendStatus(500); 73 res.sendStatus(500);
41 } 74 }
42 } 75 }
43 76
44 77
45 -exports.getUserRetweet = async function(req, res){ //인기있는 글 78 +exports.getUserRetweet = async function (req, res) { //인기있는 글
46 - try{ 79 + try {
47 - let retweetdata = client.get('statuses/user_timeline', req.params, function(error, tweets, response) {//리트윗 80 + let retweetdata = client.get('statuses/user_timeline', req.params, function (error, tweets, response) {//리트윗
48 - if(!error){ 81 + if (!error) {
49 - tweets.sort(function(a,b){ 82 + tweets.sort(function (a, b) {
50 - return b.retweet_count-a.retweet_count; 83 + return b.retweet_count - a.retweet_count;
51 });//리트윗 data 내림차순로 정렬(?) 84 });//리트윗 data 내림차순로 정렬(?)
52 console.log(tweets); 85 console.log(tweets);
53 - res.render('popular.html',{timeline: tweets}); 86 + res.render('popular.html', { timeline: tweets });
87 + }
88 + else {
89 + let msg = ""
90 + if (response.statusCode === 404)
91 + msg = "User not found."
92 + else {
93 + try {
94 + msg = error[0].message
95 + }
96 + catch {
97 + }
98 + }
99 +
100 + res.render('error.html', { statusCode: response.statusCode, msg: msg });
54 } 101 }
55 102
56 }); 103 });
57 - }catch(err){ 104 + } catch (err) {
58 console.log(err); 105 console.log(err);
106 + res.render('error.html', { statusCode: 500, msg: String(err) });
59 res.sendStatus(500); 107 res.sendStatus(500);
60 } 108 }
61 } 109 }
......
1 +<html lang="en">
2 +
3 +
4 +<head>
5 + <meta charset="UTF-8" />
6 + <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7 + <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8 + <title>Error Page</title>
9 + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
10 +</head>
11 +
12 +
13 +<body>
14 + <div class="d-flex align-items-center justify-content-center vh-100">
15 + <div class="text-center">
16 + <h1 class="display-1 fw-bold">
17 + <%= statusCode %>
18 + </h1>
19 + <p class="fs-3"> <span class="text-danger">Opps!</span> Page not found.</p>
20 + <p class="lead">
21 + <%= msg %>
22 + </p>
23 + <a href="/" class="btn btn-primary">Go Home</a>
24 + </div>
25 + </div>
26 +</body>
27 +
28 +
29 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 <html> 1 <html>
2 - <head> 2 +
3 +<head>
3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
4 <meta name="viewport" content="width=device-width, initial-scale=1" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="author" content="colorlib.com"> 7 <meta name="author" content="colorlib.com">
7 <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" /> 8 <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" />
8 <link href="css/style.css" rel="stylesheet" /> 9 <link href="css/style.css" rel="stylesheet" />
9 - </head> 10 +</head>
10 - <body> 11 +
11 - <div class="s130"> <!--아이디 검색창1 : 계정내 검색--> 12 +<body>
13 + <div class="s130">
14 + <!--아이디 검색창1 : 계정내 검색-->
12 <form> 15 <form>
13 <div class="inner-form"> 16 <div class="inner-form">
14 <div class="input-field first-wrap"> 17 <div class="input-field first-wrap">
15 <div class="svg-wrapper"> 18 <div class="svg-wrapper">
16 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> 19 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
17 - <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path> 20 + <path
21 + d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
22 + </path>
18 </svg> 23 </svg>
19 </div> 24 </div>
20 <input id="search1" type="text" placeholder="아이디를 입력하세요" /> 25 <input id="search1" type="text" placeholder="아이디를 입력하세요" />
...@@ -22,18 +27,21 @@ ...@@ -22,18 +27,21 @@
22 <div class="input-field second-wrap"> 27 <div class="input-field second-wrap">
23 <button class="btn-search" type="button" onclick="movePage1()">계정 내 검색하기</button> 28 <button class="btn-search" type="button" onclick="movePage1()">계정 내 검색하기</button>
24 </div> 29 </div>
25 - <script type ="text/javascript"> 30 + <script type="text/javascript">
26 - function movePage1(){ //계정 내 검색 페이지로 이동하기 위한 함수 31 + function movePage1() { //계정 내 검색 페이지로 이동하기 위한 함수
27 - location.href ="/timeline/"+document.getElementById('search1').value //url을 이렇게 변경함 32 + location.href = "/timeline/" + document.getElementById('search1').value //url을 이렇게 변경함
28 } 33 }
29 </script> 34 </script>
30 </div> 35 </div>
31 36
32 - <div class="inner-form"> <!--아이디 검색창2 : 인기글 검색--> 37 + <div class="inner-form">
38 + <!--아이디 검색창2 : 인기글 검색-->
33 <div class="input-field first-wrap"> 39 <div class="input-field first-wrap">
34 <div class="svg-wrapper"> 40 <div class="svg-wrapper">
35 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> 41 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
36 - <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path> 42 + <path
43 + d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
44 + </path>
37 </svg> 45 </svg>
38 </div> 46 </div>
39 <input id="search" type="text" placeholder="아이디를 입력하세요" /> 47 <input id="search" type="text" placeholder="아이디를 입력하세요" />
...@@ -41,9 +49,9 @@ ...@@ -41,9 +49,9 @@
41 <div class="input-field second-wrap"> 49 <div class="input-field second-wrap">
42 <button class="btn-search" type="button" onclick="movePage()">인기 게시물 검색하기</button> 50 <button class="btn-search" type="button" onclick="movePage()">인기 게시물 검색하기</button>
43 </div> 51 </div>
44 - <script type ="text/javascript"> 52 + <script type="text/javascript">
45 - function movePage(){ //인기 게시물 페이지 이동을 위한 함수 53 + function movePage() { //인기 게시물 페이지 이동을 위한 함수
46 - location.href ="/popular/"+document.getElementById('search').value //url을 이렇게 변경함 54 + location.href = "/popular/" + document.getElementById('search').value //url을 이렇게 변경함
47 } 55 }
48 </script> 56 </script>
49 </div> 57 </div>
...@@ -52,5 +60,6 @@ ...@@ -52,5 +60,6 @@
52 </form> 60 </form>
53 </div> 61 </div>
54 <script src="js/extention/choices.js"></script> 62 <script src="js/extention/choices.js"></script>
55 - </body><!-- This templates was made by Colorlib (https://colorlib.com) --> 63 +</body><!-- This templates was made by Colorlib (https://colorlib.com) -->
64 +
56 </html> 65 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 -
2 <html> 1 <html>
3 - <head> 2 +
3 +<head>
4 <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> 4 <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
5 <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> 5 <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
6 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 6 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
11 #search input[type="text"] { 11 #search input[type="text"] {
12 background: url(search-white.png) no-repeat 10px 6px #fcfcfc; 12 background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
13 border: 1px solid #d1d1d1; 13 border: 1px solid #d1d1d1;
14 - font: bold 12px Arial,Helvetica,Sans-serif; 14 + font: bold 12px Arial, Helvetica, Sans-serif;
15 color: #bebebe; 15 color: #bebebe;
16 width: 150px; 16 width: 150px;
17 padding: 6px 15px 6px 35px; 17 padding: 6px 15px 6px 35px;
...@@ -35,10 +35,12 @@ ...@@ -35,10 +35,12 @@
35 #search input[type="text"]:focus { 35 #search input[type="text"]:focus {
36 width: 200px; 36 width: 200px;
37 } 37 }
38 +
38 ul.timeline { 39 ul.timeline {
39 list-style-type: none; 40 list-style-type: none;
40 position: relative; 41 position: relative;
41 } 42 }
43 +
42 ul.timeline:before { 44 ul.timeline:before {
43 content: ' '; 45 content: ' ';
44 background: #d4d9df; 46 background: #d4d9df;
...@@ -49,11 +51,13 @@ ...@@ -49,11 +51,13 @@
49 height: 100%; 51 height: 100%;
50 z-index: 400; 52 z-index: 400;
51 } 53 }
52 - ul.timeline > li { 54 +
55 + ul.timeline>li {
53 margin: 20px 0; 56 margin: 20px 0;
54 padding-left: 20px; 57 padding-left: 20px;
55 } 58 }
56 - ul.timeline > li:before { 59 +
60 + ul.timeline>li:before {
57 content: ' '; 61 content: ' ';
58 background: white; 62 background: white;
59 display: inline-block; 63 display: inline-block;
...@@ -66,7 +70,7 @@ ...@@ -66,7 +70,7 @@
66 z-index: 400; 70 z-index: 400;
67 } 71 }
68 </style> 72 </style>
69 - </head> 73 +</head>
70 74
71 75
72 <body> 76 <body>
...@@ -76,24 +80,40 @@ ...@@ -76,24 +80,40 @@
76 <div class="col-md-6 offset-md-3"> 80 <div class="col-md-6 offset-md-3">
77 <h4 style="color:rgb(46, 7, 7); font-weight: bold;">HOT</h4> 81 <h4 style="color:rgb(46, 7, 7); font-weight: bold;">HOT</h4>
78 <ul class="Timeline"> 82 <ul class="Timeline">
79 - <% for (var i=0; i<20; i++){ %> 83 + <% for (var i=0; i<timeline.length; i++){ %>
80 <li> 84 <li>
81 - <h5 style="color: gold; font-weight: bold;"><%= i + 1 %>위!</h5> 85 + <h5 style="color: gold; font-weight: bold;">
82 - <% if(timeline[i].hasOwnProperty('retweeted_status')) { %> <!--내가 다른사람 글을 리트윗한거면 원글을 쓴 사람 닉네임 출력--> 86 + <%= i + 1 %>위!
83 - <a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].retweeted_status.user.name %></a> 87 + </h5>
84 - <% } else { %> <!--아니면 내 닉네임--> 88 + <% if(timeline[i].hasOwnProperty('retweeted_status')) { %>
85 - <a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].user.name %></a> 89 + <!--내가 다른사람 글을 리트윗한거면 원글을 쓴 사람 닉네임 출력-->
90 + <a style="font-weight: bold;" target="_blank" href=>
91 + <%= timeline[i].retweeted_status.user.name %>
92 + </a>
93 + <% } else { %>
94 + <!--아니면 내 닉네임-->
95 + <a style="font-weight: bold;" target="_blank" href=>
96 + <%= timeline[i].user.name %>
97 + </a>
86 <% } %> 98 <% } %>
87 99
88 - <a href="#" class="float-right"><%= timeline[i].created_at %></a> 100 + <a href="#" class="float-right">
101 + <%= timeline[i].created_at %>
102 + </a>
89 103
90 - <p><%=timeline[i].text%></p> 104 + <p>
105 + <%=timeline[i].text%>
106 + </p>
91 107
92 - <% if(timeline[i].hasOwnProperty('extended_entities')) { %> <!--미디어가 존재하면 출력--> 108 + <% if(timeline[i].hasOwnProperty('extended_entities')) { %>
93 - <img alt="Web Studio" class="img-fluid" width="300" height="300" src= <%= timeline[i].extended_entities.media[0].media_url_https %> /> 109 + <!--미디어가 존재하면 출력-->
110 + <img alt="Web Studio" class="img-fluid" width="300" height="300"
111 + src=<%=timeline[i].extended_entities.media[0].media_url_https %> />
94 <% } %> 112 <% } %>
95 113
96 - <p style="color: #22c0e8;">리트윗: <%= timeline[i].retweet_count %> 마음에 들어요: <%= timeline[i].favorite_count%></p> 114 + <p style="color: #22c0e8;">리트윗: <%= timeline[i].retweet_count %> 마음에
115 + 들어요: <%= timeline[i].favorite_count%>
116 + </p>
97 </li> 117 </li>
98 <% } %> 118 <% } %>
99 119
...@@ -104,4 +124,5 @@ ...@@ -104,4 +124,5 @@
104 124
105 125
106 </body> 126 </body>
127 +
107 </html> 128 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 -
2 <html> 1 <html>
3 - <head> 2 +
3 +<head>
4 <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> 4 <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
5 <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> 5 <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
6 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 6 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
7 <!------ Include the above in your HEAD tag ----------> 7 <!------ Include the above in your HEAD tag ---------->
8 8
9 <div style="padding-left: 500px;"> 9 <div style="padding-left: 500px;">
10 - <input id = "search1" name="q" type="text" size="40" placeholder="Search..." /> 10 + <input id="search1" name="q" type="text" size="40" placeholder="Search..." />
11 <button class="btn-search" type="button" onclick="movePage1()">검색</button> 11 <button class="btn-search" type="button" onclick="movePage1()">검색</button>
12 - <script type ="text/javascript"> 12 + <script type="text/javascript">
13 - function movePage1(){ //페이지 이동을 위한 함수 search버튼을 누르면 실행됨 13 + function movePage1() { //페이지 이동을 위한 함수 search버튼을 누르면 실행됨
14 - location.href =document.location.href +"/"+ document.getElementById('search1').value //url을 이렇게 변경함 14 + location.href = document.location.href + "/" + document.getElementById('search1').value //url을 이렇게 변경함
15 } 15 }
16 </script> 16 </script>
17 </div> 17 </div>
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
19 #search input[type="text"] { 19 #search input[type="text"] {
20 background: url(search-white.png) no-repeat 10px 6px #fcfcfc; 20 background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
21 border: 1px solid #d1d1d1; 21 border: 1px solid #d1d1d1;
22 - font: bold 12px Arial,Helvetica,Sans-serif; 22 + font: bold 12px Arial, Helvetica, Sans-serif;
23 color: #bebebe; 23 color: #bebebe;
24 width: 150px; 24 width: 150px;
25 padding: 6px 15px 6px 35px; 25 padding: 6px 15px 6px 35px;
...@@ -43,10 +43,12 @@ ...@@ -43,10 +43,12 @@
43 #search input[type="text"]:focus { 43 #search input[type="text"]:focus {
44 width: 200px; 44 width: 200px;
45 } 45 }
46 +
46 ul.timeline { 47 ul.timeline {
47 list-style-type: none; 48 list-style-type: none;
48 position: relative; 49 position: relative;
49 } 50 }
51 +
50 ul.timeline:before { 52 ul.timeline:before {
51 content: ' '; 53 content: ' ';
52 background: #d4d9df; 54 background: #d4d9df;
...@@ -57,11 +59,13 @@ ...@@ -57,11 +59,13 @@
57 height: 100%; 59 height: 100%;
58 z-index: 400; 60 z-index: 400;
59 } 61 }
60 - ul.timeline > li { 62 +
63 + ul.timeline>li {
61 margin: 20px 0; 64 margin: 20px 0;
62 padding-left: 20px; 65 padding-left: 20px;
63 } 66 }
64 - ul.timeline > li:before { 67 +
68 + ul.timeline>li:before {
65 content: ' '; 69 content: ' ';
66 background: white; 70 background: white;
67 display: inline-block; 71 display: inline-block;
...@@ -74,7 +78,8 @@ ...@@ -74,7 +78,8 @@
74 z-index: 400; 78 z-index: 400;
75 } 79 }
76 </style> 80 </style>
77 - </head> 81 +</head>
82 +
78 <body> 83 <body>
79 <!--검색된 타임라인 출력--> 84 <!--검색된 타임라인 출력-->
80 <div class="container mt-5 mb-5"> 85 <div class="container mt-5 mb-5">
...@@ -82,25 +87,41 @@ ...@@ -82,25 +87,41 @@
82 <div class="col-md-6 offset-md-3"> 87 <div class="col-md-6 offset-md-3">
83 <!--<h4>timeline</h4>--> 88 <!--<h4>timeline</h4>-->
84 <ul class="Timeline"> 89 <ul class="Timeline">
85 - <% for (var i=0; i<20; i++){ %> <!--받아온 타임라인 수 만큼 반복--> 90 + <% for (var i=0; i<timeline.length; i++){ %>
86 - <% if((timeline[i].text).indexOf(keyword) != -1) { %> <!--현재 글에 검색 키워드가 존재하면 그 글을 보여줌--> 91 + <!--받아온 타임라인 수 만큼 반복-->
92 + <% if((timeline[i].text).indexOf(keyword) !=-1) { %>
93 + <!--현재 글에 검색 키워드가 존재하면 그 글을 보여줌-->
87 <li> 94 <li>
88 95
89 - <% if(timeline[i].hasOwnProperty('retweeted_status')) { %> <!--내가 다른사람 글을 리트윗한거면 원글을 쓴 사람 닉네임 출력--> 96 + <% if(timeline[i].hasOwnProperty('retweeted_status')) { %>
90 - <a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].retweeted_status.user.name %></a> 97 + <!--내가 다른사람 글을 리트윗한거면 원글을 쓴 사람 닉네임 출력-->
91 - <% } else { %> <!--아니면 내 닉네임--> 98 + <a style="font-weight: bold;" target="_blank" href=>
92 - <a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].user.name %></a> 99 + <%= timeline[i].retweeted_status.user.name %>
100 + </a>
101 + <% } else { %>
102 + <!--아니면 내 닉네임-->
103 + <a style="font-weight: bold;" target="_blank" href=>
104 + <%= timeline[i].user.name %>
105 + </a>
93 <% } %> 106 <% } %>
94 107
95 - <a href="#" class="float-right"><%= timeline[i].created_at %></a> 108 + <a href="#" class="float-right">
109 + <%= timeline[i].created_at %>
110 + </a>
96 111
97 - <p><%=timeline[i].text%></p> 112 + <p>
113 + <%=timeline[i].text%>
114 + </p>
98 115
99 - <% if(timeline[i].hasOwnProperty('extended_entities')) { %> <!--미디어가 존재하면 출력--> 116 + <% if(timeline[i].hasOwnProperty('extended_entities')) { %>
100 - <img alt="Web Studio" class="img-fluid" width="300" height="300" src= <%= timeline[i].extended_entities.media[0].media_url_https %> /> 117 + <!--미디어가 존재하면 출력-->
118 + <img alt="Web Studio" class="img-fluid" width="300" height="300"
119 + src=<%=timeline[i].extended_entities.media[0].media_url_https %> />
101 <% } %> 120 <% } %>
102 121
103 - <p style="color: #22c0e8;">리트윗: <%= timeline[i].retweet_count %> 마음에 들어요: <%= timeline[i].favorite_count%></p> 122 + <p style="color: #22c0e8;">리트윗: <%= timeline[i].retweet_count %> 마음에
123 + 들어요: <%= timeline[i].favorite_count%>
124 + </p>
104 125
105 </li> 126 </li>
106 <% } %> 127 <% } %>
...@@ -111,8 +132,10 @@ ...@@ -111,8 +132,10 @@
111 </div> 132 </div>
112 </div> 133 </div>
113 134
114 - <div class="text-muted mt-5 mb-5 text-center small">by : <a class="text-muted" target="_blank" href="http://totoprayogo.com">totoprayogo.com</a></div> 135 + <div class="text-muted mt-5 mb-5 text-center small">by : <a class="text-muted" target="_blank"
136 + href="http://totoprayogo.com">totoprayogo.com</a></div>
115 137
116 138
117 </body> 139 </body>
140 +
118 </html> 141 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 -
2 <html> 1 <html>
3 - <head> 2 +
3 +<head>
4 <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> 4 <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
5 <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> 5 <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
6 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 6 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
7 <!------ Include the above in your HEAD tag ----------> 7 <!------ Include the above in your HEAD tag ---------->
8 8
9 <div style="padding-left: 500px;"> 9 <div style="padding-left: 500px;">
10 - <input id = "search1" name="q" type="text" size="40" placeholder="Search..." /> 10 + <input id="search1" name="q" type="text" size="40" placeholder="Search..." />
11 <button class="btn-search" type="button" onclick="movePage1()">검색</button> 11 <button class="btn-search" type="button" onclick="movePage1()">검색</button>
12 - <script type ="text/javascript"> 12 + <script type="text/javascript">
13 - function movePage1(){ //페이지 이동을 위한 함수 search버튼을 누르면 실행됨 13 + function movePage1() { //페이지 이동을 위한 함수 search버튼을 누르면 실행됨
14 - location.href =document.location.href +"/"+ document.getElementById('search1').value //url을 이렇게 변경함 14 + location.href = document.location.href + "/" + document.getElementById('search1').value //url을 이렇게 변경함
15 } 15 }
16 </script> 16 </script>
17 </div> 17 </div>
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
19 #search input[type="text"] { 19 #search input[type="text"] {
20 background: url(search-white.png) no-repeat 10px 6px #fcfcfc; 20 background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
21 border: 1px solid #d1d1d1; 21 border: 1px solid #d1d1d1;
22 - font: bold 12px Arial,Helvetica,Sans-serif; 22 + font: bold 12px Arial, Helvetica, Sans-serif;
23 color: #bebebe; 23 color: #bebebe;
24 width: 150px; 24 width: 150px;
25 padding: 6px 15px 6px 35px; 25 padding: 6px 15px 6px 35px;
...@@ -43,10 +43,12 @@ ...@@ -43,10 +43,12 @@
43 #search input[type="text"]:focus { 43 #search input[type="text"]:focus {
44 width: 200px; 44 width: 200px;
45 } 45 }
46 +
46 ul.timeline { 47 ul.timeline {
47 list-style-type: none; 48 list-style-type: none;
48 position: relative; 49 position: relative;
49 } 50 }
51 +
50 ul.timeline:before { 52 ul.timeline:before {
51 content: ' '; 53 content: ' ';
52 background: #d4d9df; 54 background: #d4d9df;
...@@ -57,11 +59,13 @@ ...@@ -57,11 +59,13 @@
57 height: 100%; 59 height: 100%;
58 z-index: 400; 60 z-index: 400;
59 } 61 }
60 - ul.timeline > li { 62 +
63 + ul.timeline>li {
61 margin: 20px 0; 64 margin: 20px 0;
62 padding-left: 20px; 65 padding-left: 20px;
63 } 66 }
64 - ul.timeline > li:before { 67 +
68 + ul.timeline>li:before {
65 content: ' '; 69 content: ' ';
66 background: white; 70 background: white;
67 display: inline-block; 71 display: inline-block;
...@@ -74,7 +78,7 @@ ...@@ -74,7 +78,7 @@
74 z-index: 400; 78 z-index: 400;
75 } 79 }
76 </style> 80 </style>
77 - </head> 81 +</head>
78 82
79 <body> 83 <body>
80 <div class="container mt-5 mb-5"> 84 <div class="container mt-5 mb-5">
...@@ -82,23 +86,40 @@ ...@@ -82,23 +86,40 @@
82 <div class="col-md-6 offset-md-3"> 86 <div class="col-md-6 offset-md-3">
83 <!--<h4>timeline</h4>--> 87 <!--<h4>timeline</h4>-->
84 <ul class="Timeline"> 88 <ul class="Timeline">
85 - <% for (var i=0; i<20; i++){ %> <!--가져온 타임라인들에 대해서--> 89 + <% for (var i=0; i<timeline.length; i++){ %>
90 + <!--가져온 타임라인들에 대해서-->
86 <li> 91 <li>
87 - <% if(timeline[i].hasOwnProperty('retweeted_status')) { %> <!--내가 다른사람 글을 리트윗한거면 원글을 쓴 사람 닉네임 출력--> 92 + <% if(timeline[i].hasOwnProperty('retweeted_status')) { %>
88 - <a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].retweeted_status.user.name %></a> 93 + <!--내가 다른사람 글을 리트윗한거면 원글을 쓴 사람 닉네임 출력-->
89 - <% } else { %> <!--아니면 내 닉네임--> 94 + <a style="font-weight: bold;" target="_blank" href=>
90 - <a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].user.name %></a> 95 + <%= timeline[i].retweeted_status.user.name %>
96 + </a>
97 + <% } else { %>
98 + <!--아니면 내 닉네임-->
99 + <a style="font-weight: bold;" target="_blank" href=>
100 + <%= timeline[i].user.name %>
101 + </a>
91 <% } %> 102 <% } %>
92 103
93 - <a href="#" class="float-right"><%= timeline[i].created_at %></a> <!--글이 써진 날짜--> 104 + <a href="#" class="float-right">
105 + <%= timeline[i].created_at %>
106 + </a>
107 + <!--글이 써진 날짜-->
94 108
95 - <p><%=timeline[i].text%></p> <!--그 글 내용 출력--> 109 + <p>
110 + <%=timeline[i].text%>
111 + </p>
112 + <!--그 글 내용 출력-->
96 113
97 - <% if(timeline[i].hasOwnProperty('extended_entities')) { %> <!--미디어가 존재하면 출력--> 114 + <% if(timeline[i].hasOwnProperty('extended_entities')) { %>
98 - <img alt="Web Studio" class="img-fluid" width="300" height="300" src= <%= timeline[i].extended_entities.media[0].media_url_https %> /> 115 + <!--미디어가 존재하면 출력-->
116 + <img alt="Web Studio" class="img-fluid" width="300" height="300"
117 + src=<%=timeline[i].extended_entities.media[0].media_url_https %> />
99 <% } %> 118 <% } %>
100 119
101 - <p style="color: #22c0e8;">리트윗: <%= timeline[i].retweet_count %> 마음에 들어요: <%= timeline[i].favorite_count%></p> 120 + <p style="color: #22c0e8;">리트윗: <%= timeline[i].retweet_count %> 마음에
121 + 들어요: <%= timeline[i].favorite_count%>
122 + </p>
102 123
103 124
104 </li> 125 </li>
...@@ -112,4 +133,5 @@ ...@@ -112,4 +133,5 @@
112 133
113 134
114 </body> 135 </body>
136 +
115 </html> 137 </html>
...\ No newline at end of file ...\ No newline at end of file
......