이해님 / 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 418 additions and 279 deletions
No preview for this file type

68.2 KB
## 트위터 내 계정 분석 사이트
### http://khuhub.khu.ac.kr/2018110654/term-project 의 프로젝트를 깃허브로 이동하였습니다.
# 트위터 내 계정 분석 사이트
<img src="images/main.png">
http://www.twitter-analyze.ml
http://www.twitter-analyze.ml:3000/
서버가 켜져있다면 위의 url으로 접속할 수도 있습니다.
## 프로젝트 소개
검색한 트위터 계정의 **타임라인을 분석하는 사이트**입니다.</br>
......@@ -25,14 +29,12 @@ http://www.twitter-analyze.ml
## 빌드방법
> <https://developer.twitter.com/en></br>
_위 링크에서 twiiter api key를 발급받고 코드에 발급받은 key를 삽입해주세요
> npm install
> npm install twitter
_terminal에서 위의 명령어를 작성해주세요_
> npm install twitter
......@@ -43,7 +45,6 @@ _terminal에서 위의 명령어를 작성해주세요_
_위의 명령어가 작동하지 않는다면 이 명령어로 시도하세요_
## 사용방법
1. 타임라인 검색 기능
- 메인페이지에 있는 검색창에 보고싶은 계정의 아이디(ex)@twitterKorea)를 검색해 타임라인을 볼 수 있습니다.
<img src="images/timeline.png">
......@@ -53,7 +54,7 @@ _위의 명령어가 작동하지 않는다면 이 명령어로 시도하세요_
<img src="images/search.png">
- 이 때 내가 리트윗한 게시물도 포함해 검색합니다
<img src="images/retweet search.png">
<img src="images/retweet%20search.png">
3. 인기글 보여주기 기능
- 현재 해당계정에서 인기있는 글들을 모아 보여줍니다.
......
This diff is collapsed. Click to expand it.
{
"name": "express-tutorial",
"version": "1.0.0",
"dependencies": {
"ejs": "~2.4.1",
"express": "~4.13.1",
"twitter": "^1.7.1"
}
}
\ No newline at end of file
{
"name": "express-tutorial",
"version": "1.0.0",
"dependencies":
{
"express": "~4.13.1",
"ejs": "~2.4.1"
}
}
\ No newline at end of file
"name": "express-tutorial",
"version": "1.0.0",
"dependencies": {
"express": "~4.13.1",
"ejs": "~2.4.1",
"twitter": "^1.7.1"
}
}
\ No newline at end of file
......
No preview for this file type
......@@ -7,10 +7,10 @@ app.set('views', __dirname + '/views'); //서버가 읽을 수 있도록 HTML
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('/popular/:screen_name',tweetsController.getUserRetweet);//'/hot/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
var server = app.listen(3000, function(){ //3000 포트 사용
app.get('/timeline/:screen_name', tweetsController.getUserTweets); // '/timeline/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
app.get('/timeline/:screen_name/:keyword', tweetsController.getUserTweetsForSearch);
app.get('/popular/:screen_name', tweetsController.getUserRetweet);//'/hot/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
var server = app.listen(3000, function () { //3000 포트 사용
console.log("Express server has started on port 3000");
})
......
const Twitter = require('twitter');
const client = new Twitter({
consumer_key: 'key1',
consumer_secret: 'key2',
access_token_key: 'key3',
access_token_secret: 'key4'
consumer_key: "consumer_key",
consumer_secret: "consumer_secret",
access_token_key: "access_token_key",
access_token_secret: "access_token_secret"
});
exports.getUserTweets = async function(req, res){ //전체 타임라인
try{
let data = client.get('statuses/user_timeline', req.params, function(error,tweets,response){ //트위터 api에서 유저의 타임라인을 가져옴 req.params에 유저 아이디가 들어있음
if(!error){
exports.getUserTweets = async function (req, res) { //전체 타임라인
try {
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',{ timeline: tweets}); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄
res.render('timeline.html', { timeline: tweets }); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄
}
else {
let msg = ""
if (response.statusCode === 404)
msg = "User not found."
else {
try {
msg = error[0].message
}
catch {
}
}
res.render('error.html', { statusCode: response.statusCode, msg: msg });
}
}); //아이디를 토대로 타임라인 가져오기
}catch(err){ //에러 발생하면 실행
} catch (err) { //에러 발생하면 실행
res.render('error.html', { statusCode: 500, msg: String(err) });
console.log(err);
res.sendStatus(500);
}
}
exports.getUserTweetsForSearch = async function(req, res){ //검색
try{
let data = client.get('statuses/user_timeline', req.params, function(error,tweets,response){ //트위터 api에서 유저의 타임라인을 가져옴 req.params에 유저 아이디가 들어있음
if(!error){
res.render('search.html',{ timeline: tweets, keyword:req.params.keyword}); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄
exports.getUserTweetsForSearch = async function (req, res) { //검색
try {
let data = client.get('statuses/user_timeline', req.params, function (error, tweets, response) { //트위터 api에서 유저의 타임라인을 가져옴 req.params에 유저 아이디가 들어있음
if (!error) {
res.render('search.html', { timeline: tweets, keyword: req.params.keyword }); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄
console.log(req.params);
}
else {
let msg = ""
if (response.statusCode === 404)
msg = "User not found."
else {
try {
msg = error[0].message
}
catch {
}
}
res.render('error.html', { statusCode: response.statusCode, msg: msg });
}
}); //아이디를 토대로 타임라인 가져오기
}catch(err){ //에러 발생하면 실행
} catch (err) { //에러 발생하면 실행
console.log(err);
res.render('error.html', { statusCode: 500, msg: String(err) });
res.sendStatus(500);
}
}
exports.getUserRetweet = async function(req, res){ //인기있는 글
try{
let retweetdata = client.get('statuses/user_timeline', req.params, function(error, tweets, response) {//리트윗
if(!error){
tweets.sort(function(a,b){
return b.retweet_count-a.retweet_count;
});//리트윗 data 내림차순로 정렬(?)
console.log(tweets);
res.render('popular.html',{timeline: tweets});
}
});
}catch(err){
exports.getUserRetweet = async function (req, res) { //인기있는 글
try {
let retweetdata = client.get('statuses/user_timeline', req.params, function (error, tweets, response) {//리트윗
if (!error) {
tweets.sort(function (a, b) {
return b.retweet_count - a.retweet_count;
});//리트윗 data 내림차순로 정렬(?)
console.log(tweets);
res.render('popular.html', { timeline: tweets });
}
else {
let msg = ""
if (response.statusCode === 404)
msg = "User not found."
else {
try {
msg = error[0].message
}
catch {
}
}
res.render('error.html', { statusCode: response.statusCode, msg: msg });
}
});
} catch (err) {
console.log(err);
res.render('error.html', { statusCode: 500, msg: String(err) });
res.sendStatus(500);
}
}
......
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Error Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="d-flex align-items-center justify-content-center vh-100">
<div class="text-center">
<h1 class="display-1 fw-bold">
<%= statusCode %>
</h1>
<p class="fs-3"> <span class="text-danger">Opps!</span> Page not found.</p>
<p class="lead">
<%= msg %>
</p>
<a href="/" class="btn btn-primary">Go Home</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="colorlib.com">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="s130"> <!--아이디 검색창1 : 계정내 검색-->
<form>
<div class="inner-form">
<div class="input-field first-wrap">
<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<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>
</svg>
</div>
<input id="search1" type="text" placeholder="아이디를 입력하세요" />
</div>
<div class="input-field second-wrap">
<button class="btn-search" type="button" onclick="movePage1()">계정 내 검색하기</button>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="colorlib.com">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="s130">
<!--아이디 검색창1 : 계정내 검색-->
<form>
<div class="inner-form">
<div class="input-field first-wrap">
<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<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>
</svg>
</div>
<script type ="text/javascript">
function movePage1(){ //계정 내 검색 페이지로 이동하기 위한 함수
location.href ="/timeline/"+document.getElementById('search1').value //url을 이렇게 변경함
}
</script>
<input id="search1" type="text" placeholder="아이디를 입력하세요" />
</div>
<div class="input-field second-wrap">
<button class="btn-search" type="button" onclick="movePage1()">계정 내 검색하기</button>
</div>
<script type="text/javascript">
function movePage1() { //계정 내 검색 페이지로 이동하기 위한 함수
location.href = "/timeline/" + document.getElementById('search1').value //url을 이렇게 변경함
}
</script>
</div>
<div class="inner-form"> <!--아이디 검색창2 : 인기글 검색-->
<div class="input-field first-wrap">
<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<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>
</svg>
</div>
<input id="search" type="text" placeholder="아이디를 입력하세요" />
<div class="inner-form">
<!--아이디 검색창2 : 인기글 검색-->
<div class="input-field first-wrap">
<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<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>
</svg>
</div>
<div class="input-field second-wrap">
<button class="btn-search" type="button" onclick="movePage()">인기 게시물 검색하기</button>
</div>
<script type ="text/javascript">
function movePage(){ //인기 게시물 페이지 이동을 위한 함수
location.href ="/popular/"+document.getElementById('search').value //url을 이렇게 변경함
}
</script>
<input id="search" type="text" placeholder="아이디를 입력하세요" />
</div>
<div class="input-field second-wrap">
<button class="btn-search" type="button" onclick="movePage()">인기 게시물 검색하기</button>
</div>
<span class="info">ex)TwitterKorea </span>
<script type="text/javascript">
function movePage() { //인기 게시물 페이지 이동을 위한 함수
location.href = "/popular/" + document.getElementById('search').value //url을 이렇게 변경함
}
</script>
</div>
<span class="info">ex)TwitterKorea </span>
</form>
</div>
<script src="js/extention/choices.js"></script>
</body><!-- This templates was made by Colorlib (https://colorlib.com) -->
</form>
</div>
<script src="js/extention/choices.js"></script>
</body><!-- This templates was made by Colorlib (https://colorlib.com) -->
</html>
</html>
\ No newline at end of file
......
<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 ---------->
<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;
}
#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>
<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 ---------->
<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;
}
#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>
......@@ -76,27 +80,43 @@
<div class="col-md-6 offset-md-3">
<h4 style="color:rgb(46, 7, 7); font-weight: bold;">HOT</h4>
<ul class="Timeline">
<% for (var i=0; i<20; i++){ %>
<li>
<h5 style="color: gold; font-weight: bold;"><%= i + 1 %>위!</h5>
<% if(timeline[i].hasOwnProperty('retweeted_status')) { %> <!--내가 다른사람 글을 리트윗한거면 원글을 쓴 사람 닉네임 출력-->
<a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].retweeted_status.user.name %></a>
<% } else { %> <!--아니면 내 닉네임-->
<a style ="font-weight: bold;" 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 %> />
<% } %>
<p style="color: #22c0e8;">리트윗: <%= timeline[i].retweet_count %> 마음에 들어요: <%= timeline[i].favorite_count%></p>
</li>
<% } %>
<% for (var i=0; i<timeline.length; i++){ %>
<li>
<h5 style="color: gold; font-weight: bold;">
<%= i + 1 %>위!
</h5>
<% if(timeline[i].hasOwnProperty('retweeted_status')) { %>
<!--내가 다른사람 글을 리트윗한거면 원글을 쓴 사람 닉네임 출력-->
<a style="font-weight: bold;" target="_blank" href=>
<%= timeline[i].retweeted_status.user.name %>
</a>
<% } else { %>
<!--아니면 내 닉네임-->
<a style="font-weight: bold;" 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 %> />
<% } %>
<p style="color: #22c0e8;">리트윗: <%= timeline[i].retweet_count %> 마음에
들어요: <%= timeline[i].favorite_count%>
</p>
</li>
<% } %>
</ul>
</div>
</div>
......@@ -104,4 +124,5 @@
</body>
</html>
\ No newline at end of file
......
This diff is collapsed. Click to expand it.
<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;
}
#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;
<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을 이렇게 변경함
}
</style>
</head>
</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;
}
#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">
......@@ -82,34 +86,52 @@
<div class="col-md-6 offset-md-3">
<!--<h4>timeline</h4>-->
<ul class="Timeline">
<% for (var i=0; i<20; i++){ %> <!--가져온 타임라인들에 대해서-->
<li>
<% if(timeline[i].hasOwnProperty('retweeted_status')) { %> <!--내가 다른사람 글을 리트윗한거면 원글을 쓴 사람 닉네임 출력-->
<a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].retweeted_status.user.name %></a>
<% } else { %> <!--아니면 내 닉네임-->
<a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].user.name %></a>
<% } %>
<% for (var i=0; i<timeline.length; i++){ %>
<!--가져온 타임라인들에 대해서-->
<li>
<% if(timeline[i].hasOwnProperty('retweeted_status')) { %>
<!--내가 다른사람 글을 리트윗한거면 원글을 쓴 사람 닉네임 출력-->
<a style="font-weight: bold;" target="_blank" href=>
<%= timeline[i].retweeted_status.user.name %>
</a>
<% } else { %>
<!--아니면 내 닉네임-->
<a style="font-weight: bold;" target="_blank" href=>
<%= timeline[i].user.name %>
</a>
<% } %>
<a href="#" class="float-right"><%= timeline[i].created_at %></a> <!--글이 써진 날짜-->
<a href="#" class="float-right">
<%= timeline[i].created_at %>
</a>
<!--글이 써진 날짜-->
<p><%=timeline[i].text%></p> <!--그 글 내용 출력-->
<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 %> />
<% } %>
<% 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 %> />
<% } %>
<p style="color: #22c0e8;">리트윗: <%= timeline[i].retweet_count %> 마음에 들어요: <%= timeline[i].favorite_count%></p>
<p style="color: #22c0e8;">리트윗: <%= timeline[i].retweet_count %> 마음에
들어요: <%= timeline[i].favorite_count%>
</p>
</li>
<% } %>
</li>
<% } %>
</ul>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
......