이해님 / term-project

Go to a project
Toggle navigation Toggle navigation pinning
haenim
e83f9d8a 1 parent 44cb57cf

update search

Inline Side-by-side
Showing 6 changed files with 210 additions and 70 deletions
...@@ -8,6 +8,7 @@ app.set('view engine', 'ejs'); //서버가 HTML 렌더링을 할 때, EJS 엔진 ...@@ -8,6 +8,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', tweetsController.getUserSearch);//url들어오면 뒤의 함수 실행 12 //app.get('/timeline/:screen_name', tweetsController.getUserSearch);//url들어오면 뒤의 함수 실행
12 //app.get('/hot/:screen_name',tweetsController.getUserRetweet);//'/hot/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴 13 //app.get('/hot/:screen_name',tweetsController.getUserRetweet);//'/hot/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
13 var server = app.listen(3000, function(){ //3000 포트 사용 14 var server = app.listen(3000, function(){ //3000 포트 사용
......
...@@ -15,7 +15,7 @@ exports.getUserTweets = async function(req, res){ ...@@ -15,7 +15,7 @@ exports.getUserTweets = async function(req, res){
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 } 19 }
20 }); //아이디를 토대로 타임라인 가져오기 20 }); //아이디를 토대로 타임라인 가져오기
21 21
...@@ -26,21 +26,22 @@ exports.getUserTweets = async function(req, res){ ...@@ -26,21 +26,22 @@ exports.getUserTweets = async function(req, res){
26 } 26 }
27 } 27 }
28 28
29 -exports.getUserSearch = async function(req, res){ 29 +exports.getUserTweetsForSearch = async function(req, res){ //검색
30 try{ 30 try{
31 - let searchdata= client.get('search/tweets', req.params, function(error, tweets, response) {//search 31 + let data = client.get('statuses/user_timeline', req.params, function(error,tweets,response){ //트위터 api에서 유저의 타임라인을 가져옴 req.params에 유저 아이디가 들어있음
32 - if(!error){ 32 + if(!error){
33 - console.log(tweets); 33 + res.render('search.html',{ timeline: tweets, keyword:req.params.keyword}); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄
34 - res.render('timeline.html',tweets); 34 + log.console(req.params)
35 - } 35 + }
36 - 36 + }); //아이디를 토대로 타임라인 가져오기
37 - });//입력값 바꿀 필요 있음(?) 37 +
38 - }catch(err){ 38 + }catch(err){ //에러 발생하면 실행
39 console.log(err); 39 console.log(err);
40 res.sendStatus(500); 40 res.sendStatus(500);
41 } 41 }
42 } 42 }
43 43
44 +
44 exports.getUserRetweet = async function(req, res){ //인기있는 글 45 exports.getUserRetweet = async function(req, res){ //인기있는 글
45 try{ 46 try{
46 let retweetdata = client.get('statuses/user_timeline', req.params, function(error, tweets, response) {//리트윗 47 let retweetdata = client.get('statuses/user_timeline', req.params, function(error, tweets, response) {//리트윗
......
1 +
2 +<html>
3 + <head>
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>
6 + <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
7 + <!------ Include the above in your HEAD tag ---------->
8 +
9 + <!--검색창-->
10 + <div style="padding-left: 500px;">
11 + <input id = "search1" name="q" type="text" size="40" placeholder="Search..." />
12 + <button class="btn-search" type="button" onclick="movePage1()">검색</button>
13 + <script type ="text/javascript">
14 + function movePage1(){ //페이지 이동을 위한 함수 search버튼을 누르면 실행됨
15 + location.href =document.location.href +"/"+ document.getElementById('search1').value //url을 이렇게 변경함
16 + }
17 + </script>
18 + </div>
19 + <style>
20 +#search input[type="text"] {
21 + background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
22 + border: 1px solid #d1d1d1;
23 + font: bold 12px Arial,Helvetica,Sans-serif;
24 + color: #bebebe;
25 + width: 150px;
26 + padding: 6px 15px 6px 35px;
27 + -webkit-border-radius: 20px;
28 + -moz-border-radius: 20px;
29 + border-radius: 20px;
30 + text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
31 + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
32 + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
33 + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
34 + -webkit-transition: all 0.7s ease 0s;
35 + -moz-transition: all 0.7s ease 0s;
36 + -o-transition: all 0.7s ease 0s;
37 + transition: all 0.7s ease 0s;
38 + }
39 +
40 +#search input[type="text"]:focus {
41 + width: 200px;
42 + }
43 + ul.timeline {
44 + list-style-type: none;
45 + position: relative;
46 +}
47 +ul.timeline:before {
48 + content: ' ';
49 + background: #d4d9df;
50 + display: inline-block;
51 + position: absolute;
52 + left: 29px;
53 + width: 2px;
54 + height: 100%;
55 + z-index: 400;
56 +}
57 +ul.timeline > li {
58 + margin: 20px 0;
59 + padding-left: 20px;
60 +}
61 +ul.timeline > li:before {
62 + content: ' ';
63 + background: white;
64 + display: inline-block;
65 + position: absolute;
66 + border-radius: 50%;
67 + border: 3px solid #22c0e8;
68 + left: 20px;
69 + width: 20px;
70 + height: 20px;
71 + z-index: 400;
72 +}
73 +
74 +
75 + </style>
76 + </head>
77 +<body>
78 + <!--검색된 타임라인 출력-->
79 + <div class="container mt-5 mb-5">
80 + <div class="row">
81 + <div class="col-md-6 offset-md-3">
82 + <h4>timeline</h4>
83 + <ul class="Timeline">
84 + <% for (var i=0; i<20; i++){ %> <!--받아온 타임라인 수 만큼 반복-->
85 + <% if((timeline[i].text).indexOf(keyword) != -1) { %> <!--현재 글에 검색 키워드가 존재하면 그 글을 보여줌-->
86 + <li>
87 + <a target="_blank" href=><%= timeline[i].user.name %></a>
88 + <a href="#" class="float-right"><%= timeline[i].created_at %></a>
89 + <p><%=timeline[i].text%></p>
90 + <% if(timeline[i].hasOwnProperty('extended_entities')) { %> <!--미디어가 존재하면 출력-->
91 + <img alt="Web Studio" class="img-fluid" width="300" height="300" src= <%= timeline[i].extended_entities.media[0].media_url_https %> />
92 + <% } %>
93 + </li>
94 + <% } %>
95 + <% } %>
96 +
97 + </ul>
98 + </div>
99 + </div>
100 + </div>
101 +
102 + <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>
103 +
104 +
105 +</body>
106 +</html>
...\ No newline at end of file ...\ No newline at end of file
......
1 1
2 <html> 2 <html>
3 <head> 3 <head>
4 - <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 4 + <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
5 - <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 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>
7 + <!------ Include the above in your HEAD tag ---------->
8 +
9 + <div style="padding-left: 500px;">
10 + <input id = "search1" name="q" type="text" size="40" placeholder="Search..." />
11 + <button class="btn-search" type="button" onclick="movePage1()">검색</button>
12 + <script type ="text/javascript">
13 + function movePage1(){ //페이지 이동을 위한 함수 search버튼을 누르면 실행됨
14 + location.href =document.location.href +"/"+ document.getElementById('search1').value //url을 이렇게 변경함
15 + }
16 + </script>
17 + </div>
6 <style> 18 <style>
7 - 19 +#search input[type="text"] {
8 - body { background: #e1f5fe;} 20 + background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
9 - #search-box input{width:100%;border:0;height:60px;border-radius:25px;outline:none;padding-left:60px;line-height:61px;box-shadow:12px 12px 30px 0 rgba(77,77,119,.10);font-weight:500;color:#8ba2ad;} 21 + border: 1px solid #d1d1d1;
10 - #search-box input::-webkit-input-placeholder{font-weight:500;color:#c5d3de;font-size:14px;} 22 + font: bold 12px Arial,Helvetica,Sans-serif;
11 - #search-box input::-moz-placeholder{font-weight:500;color:#c5d3de;font-size:14px;} 23 + color: #bebebe;
12 - #search-box input::-ms-input-placeholder{font-weight:500;color:#c5d3de;font-size:14px;} 24 + width: 150px;
13 - #search-box input::-moz-placeholder{font-weight:500;color:#c5d3de;font-size:14px;} 25 + padding: 6px 15px 6px 35px;
14 - #search-box .fa-globe{position:absolute;top:19px;left:22px;font-size:23px;color:#dcdee0;} 26 + -webkit-border-radius: 20px;
15 - #search-box .inline-search{position:absolute;top:10px;right:25px;} 27 + -moz-border-radius: 20px;
16 - #search-box .inline-search #search-btn{background-image:linear-gradient(to right,#6A1B9A,#9C27B0);border:0;transition:background-size .2s ease-in-out,.2s box-shadow ease-in-out,.2s filter,.3s opacity;color:#fff;height:40px;width:40px;font-size:14px;border-radius:50px;outline:none !important;line-height:40px;cursor:pointer;box-shadow:3px 4px 31px 0 rgba(253, 165, 93, 0.54);margin-left:2px;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;} 28 + border-radius: 20px;
17 - #search-box .inline-search #search-btn:hover{background-size:175% 100%;color:#fff;outline:none;transition:background-size .2s ease-in-out,.2s box-shadow ease-in-out,.2s filter,.3s opacity;} 29 + text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
18 - #search-box .inline-search #transfer-btn{background-image:linear-gradient(to right,#5c5cfd,#d65ffd);border:0;transition:background-size .2s ease-in-out,.2s box-shadow ease-in-out,.2s filter,.3s opacity;color:#fff;height:40px;width:40px;font-size:14px;border-radius:50px;outline:none !important;line-height:40px;cursor:pointer;box-shadow:3px 4px 31px 0 rgba(149, 94, 253, 0.45);-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;} 30 + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
19 - #search-box .inline-search #transfer-btn:hover{background-size:175% 100%;color:#fff;outline:none;transition:background-size .2s ease-in-out,.2s box-shadow ease-in-out,.2s filter,.3s opacity;} 31 + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
32 + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
33 + -webkit-transition: all 0.7s ease 0s;
34 + -moz-transition: all 0.7s ease 0s;
35 + -o-transition: all 0.7s ease 0s;
36 + transition: all 0.7s ease 0s;
37 + }
38 +
39 +#search input[type="text"]:focus {
40 + width: 200px;
41 + }
42 +
43 +#search input[type="text"]:focus {
44 + width: 200px;
45 + }
46 + ul.timeline {
47 + list-style-type: none;
48 + position: relative;
49 +}
50 +ul.timeline:before {
51 + content: ' ';
52 + background: #d4d9df;
53 + display: inline-block;
54 + position: absolute;
55 + left: 29px;
56 + width: 2px;
57 + height: 100%;
58 + z-index: 400;
59 +}
60 +ul.timeline > li {
61 + margin: 20px 0;
62 + padding-left: 20px;
63 +}
64 +ul.timeline > li:before {
65 + content: ' ';
66 + background: white;
67 + display: inline-block;
68 + position: absolute;
69 + border-radius: 50%;
70 + border: 3px solid #22c0e8;
71 + left: 20px;
72 + width: 20px;
73 + height: 20px;
74 + z-index: 400;
75 +}
76 +
77 +
20 </style> 78 </style>
21 - <script>
22 - function search(){
23 - document.write(timeline);
24 - }
25 - </script>
26 </head> 79 </head>
27 <body> 80 <body>
28 <!--검색창--> 81 <!--검색창-->
29 - <form method="post" action="" id="search-box" class="col-md-6 offset-md-3 mt-5">
30 - <i class="fa fa-globe"></i>
31 - <input type="text" placeholder="키워드를 입력하세요" >
32 - <span class="inline-search">
33 - <button id="search-btn" type="submit" value="Search" onclick="search()">
34 - <i class="fa fa-search"></i>
35 - </button>
36 - </span>
37 - </form>
38 -
39 - <script type ="text/javascript">
40 - function search(){
41 82
42 - } 83 + <div class="container mt-5 mb-5">
43 - </script> 84 + <div class="row">
44 - 85 + <div class="col-md-6 offset-md-3">
45 - <!--타임라인 출력--> 86 + <h4>timeline</h4>
46 - <div> 87 + <ul class="Timeline">
47 - <% for (var i=0; i<20; i++){ %> 88 + <% for (var i=0; i<20; i++){ %>
48 - <section class="section mt-5" > 89 + <li>
49 - <div class="container" style="border: 1px solid black"> 90 + <a target="_blank" href=><%= timeline[i].user.name %></a>
50 - <div class="row"> 91 + <a href="#" class="float-right"><%= timeline[i].created_at %></a>
51 - <div class="col-md-6"> 92 + <p><%=timeline[i].text%></p>
52 - <div>
53 <% if(timeline[i].hasOwnProperty('extended_entities')) { %> <!--미디어가 존재하면 출력--> 93 <% if(timeline[i].hasOwnProperty('extended_entities')) { %> <!--미디어가 존재하면 출력-->
54 - <img alt="Web Studio" class="img-fluid" width="300" height="300" src= <%= timeline[i].extended_entities.media[0].media_url_https %> /> 94 + <img alt="Web Studio" class="img-fluid" width="300" height="300" src= <%= timeline[i].extended_entities.media[0].media_url_https %> />
55 - <% } %> 95 + <% } %>
56 - </div> 96 + </li>
57 - </div> 97 + <% } %>
58 - <div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0"> 98 +
59 - <div> 99 + </ul>
60 - <h2><%=timeline[i].user.name%></h2> <!--닉네임-->
61 - <p class="margin-top-s"><%=timeline[i].text%></p> <!--내용-->
62 - </div>
63 - </div>
64 - </div>
65 - </div>
66 - </section>
67 - <div>
68 </div> 100 </div>
69 - <% } %> 101 + </div>
70 </div> 102 </div>
71 - 103 +
72 - 104 + <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>
73 105
74 106
75 </body> 107 </body>
......