이해님 / 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 201 additions and 61 deletions
......@@ -8,6 +8,7 @@ app.set('view engine', 'ejs'); //서버가 HTML 렌더링을 할 때, EJS 엔진
app.engine('html', require('ejs').renderFile);
app.get('/timeline/:screen_name',tweetsController.getUserTweets); // '/timeline/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
app.get('/timeline/:screen_name/:keyword',tweetsController.getUserTweetsForSearch);
//app.get('/timeline/:screen_name', tweetsController.getUserSearch);//url들어오면 뒤의 함수 실행
//app.get('/hot/:screen_name',tweetsController.getUserRetweet);//'/hot/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
var server = app.listen(3000, function(){ //3000 포트 사용
......
......@@ -15,7 +15,7 @@ exports.getUserTweets = async function(req, res){
if(!error){
console.log(tweets); //가져온 타임라인 내용 콘솔창에 출력
res.render('timeline.html',{ timeline: tweets }); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄
res.render('timeline.html',{ timeline: tweets}); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄
}
}); //아이디를 토대로 타임라인 가져오기
......@@ -26,21 +26,22 @@ exports.getUserTweets = async function(req, res){
}
}
exports.getUserSearch = async function(req, res){
exports.getUserTweetsForSearch = async function(req, res){ //검색
try{
let searchdata= client.get('search/tweets', req.params, function(error, tweets, response) {//search
let data = client.get('statuses/user_timeline', req.params, function(error,tweets,response){ //트위터 api에서 유저의 타임라인을 가져옴 req.params에 유저 아이디가 들어있음
if(!error){
console.log(tweets);
res.render('timeline.html',tweets);
res.render('search.html',{ timeline: tweets, keyword:req.params.keyword}); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄
log.console(req.params)
}
}); //아이디를 토대로 타임라인 가져오기
});//입력값 바꿀 필요 있음(?)
}catch(err){
}catch(err){ //에러 발생하면 실행
console.log(err);
res.sendStatus(500);
}
}
exports.getUserRetweet = async function(req, res){ //인기있는 글
try{
let retweetdata = client.get('statuses/user_timeline', req.params, function(error, tweets, response) {//리트윗
......
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--검색창-->
<div style="padding-left: 500px;">
<input id = "search1" name="q" type="text" size="40" placeholder="Search..." />
<button class="btn-search" type="button" onclick="movePage1()">검색</button>
<script type ="text/javascript">
function movePage1(){ //페이지 이동을 위한 함수 search버튼을 누르면 실행됨
location.href =document.location.href +"/"+ document.getElementById('search1').value //url을 이렇게 변경함
}
</script>
</div>
<style>
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
width: 200px;
}
ul.timeline {
list-style-type: none;
position: relative;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline > li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
</style>
</head>
<body>
<!--검색된 타임라인 출력-->
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<h4>timeline</h4>
<ul class="Timeline">
<% for (var i=0; i<20; i++){ %> <!--받아온 타임라인 수 만큼 반복-->
<% if((timeline[i].text).indexOf(keyword) != -1) { %> <!--현재 글에 검색 키워드가 존재하면 그 글을 보여줌-->
<li>
<a target="_blank" href=><%= timeline[i].user.name %></a>
<a href="#" class="float-right"><%= timeline[i].created_at %></a>
<p><%=timeline[i].text%></p>
<% if(timeline[i].hasOwnProperty('extended_entities')) { %> <!--미디어가 존재하면 출력-->
<img alt="Web Studio" class="img-fluid" width="300" height="300" src= <%= timeline[i].extended_entities.media[0].media_url_https %> />
<% } %>
</li>
<% } %>
<% } %>
</ul>
</div>
</div>
</div>
<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>
</body>
</html>
\ No newline at end of file
......
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
body { background: #e1f5fe;}
#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;}
#search-box input::-webkit-input-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
#search-box input::-moz-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
#search-box input::-ms-input-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
#search-box input::-moz-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
#search-box .fa-globe{position:absolute;top:19px;left:22px;font-size:23px;color:#dcdee0;}
#search-box .inline-search{position:absolute;top:10px;right:25px;}
#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;}
#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;}
#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;}
#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;}
</style>
<script>
function search(){
document.write(timeline);
<div style="padding-left: 500px;">
<input id = "search1" name="q" type="text" size="40" placeholder="Search..." />
<button class="btn-search" type="button" onclick="movePage1()">검색</button>
<script type ="text/javascript">
function movePage1(){ //페이지 이동을 위한 함수 search버튼을 누르면 실행됨
location.href =document.location.href +"/"+ document.getElementById('search1').value //url을 이렇게 변경함
}
</script>
</head>
<body>
<!--검색창-->
<form method="post" action="" id="search-box" class="col-md-6 offset-md-3 mt-5">
<i class="fa fa-globe"></i>
<input type="text" placeholder="키워드를 입력하세요" >
<span class="inline-search">
<button id="search-btn" type="submit" value="Search" onclick="search()">
<i class="fa fa-search"></i>
</button>
</span>
</form>
</div>
<style>
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
<script type ="text/javascript">
function search(){
#search input[type="text"]:focus {
width: 200px;
}
#search input[type="text"]:focus {
width: 200px;
}
</script>
ul.timeline {
list-style-type: none;
position: relative;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline > li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
<!--타임라인 출력-->
<div>
<% for (var i=0; i<20; i++){ %>
<section class="section mt-5" >
<div class="container" style="border: 1px solid black">
</style>
</head>
<body>
<!--검색창-->
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-6">
<div>
<div class="col-md-6 offset-md-3">
<h4>timeline</h4>
<ul class="Timeline">
<% for (var i=0; i<20; i++){ %>
<li>
<a target="_blank" href=><%= timeline[i].user.name %></a>
<a href="#" class="float-right"><%= timeline[i].created_at %></a>
<p><%=timeline[i].text%></p>
<% if(timeline[i].hasOwnProperty('extended_entities')) { %> <!--미디어가 존재하면 출력-->
<img alt="Web Studio" class="img-fluid" width="300" height="300" src= <%= timeline[i].extended_entities.media[0].media_url_https %> />
<% } %>
</li>
<% } %>
</ul>
</div>
</div>
<div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0">
<div>
<h2><%=timeline[i].user.name%></h2> <!--닉네임-->
<p class="margin-top-s"><%=timeline[i].text%></p> <!--내용-->
</div>
</div>
</div>
</div>
</section>
<div>
</div>
<% } %>
</div>
<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>
</body>
......