홍용민

Merge branch 'View' -m "merge View"

1 +<!doctype html>
2 +<html>
3 +<head>
4 + <title>BUS TT</title>
5 + <meta charset="utf-8">
6 + <style type="text/css">
7 + a { text-decoration:none } /* 하이퍼링크 밑줄 미적용
8 + a { color:red; text-decoration:none} : 색깔 변화없음
9 + */
10 + </style>
11 +</head>
12 +
13 +<body>
14 + <h1><p style="text-align:center;">BTT</p></h1>
15 + <br>
16 + <h2> 사색의 광장 Bus Time Table 조회 서비스에 오신 것을 환영합니다.</h2>
17 + <p> 이곳에는 사색의 광장에서 출발하는 모든 버스의 정보가 있습니다.</p>
18 + <br><br>
19 + <h2> 버스별 시간표 조회</h2>
20 + <p> m월 d일 오늘 운행하는 버스들</p>
21 + <ul>
22 + <li><a href="http://localhost:23023/?busNum=5100">5100</a></li>
23 + <li><a href="http://localhost:23023/?busNum=M5107">M5107</a></li>
24 + <li><a href="http://localhost:23023/?busNum=9">9</a></li>
25 + <li><a href="http://localhost:23023/?busNum=7000">7000</a></li>
26 + <li>etc</li>
27 + </ul>
28 + <br>
29 + <p>설명</p>
30 +
31 +
32 +</body>
33 +</html>
1 +<form action="http://34.206.171.225:23023/server" method="post">
2 + <!-- method="post"라고 하면 url에 정보가 가려짐, 생략하면 GET임.-->
3 + <input type="text" name = "busNumber" placeholder="busNumber">
4 + <p><input type="submit"></p>
5 +</form>
...\ No newline at end of file ...\ No newline at end of file
1 +<!doctype html> <!--이 웹페이지가 html로 만들어졌다는 태그-->
2 +<html> <!--head와 body를 감싸는 태그-->
3 +<head> <!--본문을 설명하는 태그-->
4 + <title>webpage frame</title>
5 + <meta charset="utf-8">
6 +</head>
7 +
8 +<body> <!--본문에 해당하는 태그-->
9 + <h1> webpage frame</h1>
10 +
11 + <ul>
12 + <li>목차1</li>
13 + <li>목차2</li>
14 + <li>목차3</li>
15 + </ul>
16 +
17 + <p>내용 1</p>
18 + <p>내용 2</p>
19 + <!-- target: 새 탭을 여는것-->
20 + <p><a href = "https://www.google.com/webhp?hl=ko&sa=X&ved=0ahUKEwjzxPrzkOrwAhWsF6YKHTq_CFwQPAgI" target = "_blank" title = "하이퍼링크 설명"> Go to google</a></p>
21 + <input type="button" value="BUTTON" onclick="alert('alert box')">
22 + <input type="text" onchange="alert('changed')">
23 + <br>
24 + <br>
25 + <script>
26 + document.write(1+2+3);
27 + </script>
28 +</body>
29 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +// aws 인스턴스 - chatbot /home/ubuntu/server/server.js 파일임.
2 +
3 +var http = require('http');
4 +var fs = require('fs');
5 +var url = require('url');
6 +var qs = require('querystring');
7 +
8 +var app = http.createServer(function(request,response){
9 +
10 + var _url = request.url;
11 +
12 + if (_url === '/'){
13 + console.log("url is '/'");
14 + response.writeHead(200);
15 + } else if (_url === '/server'){
16 + console.log(_url);
17 + var body = '';
18 + // post로 전달된 데이터를 담을 변수를 선언
19 + request.on('data', function(data){
20 + // request객체에 on( ) 함수로 'data' 이벤트를 연결
21 + body = body + data;
22 + //data 이벤트가 발생할 때마다 callback을 통해 body 변수에 값을 저장
23 + });
24 + request.on('end', function(){
25 + // request객체에 on( ) 함수로 'end' 이벤트를 연결
26 + var post = qs.parse(body);
27 + // end 이벤트가 발생하면(end는 한번만 발생한다) 3번에서 저장해둔 body 를 querystring 으로 객체화
28 + console.log(post);
29 + // 객체화된 데이터를 로그로 출력
30 + response.writeHead(200, {'Content-Type':'text/html'});
31 + response.end('bus Number = ' + post.busNumber);
32 + // HEADER 와 데이터를 담아서 클라이언트에 응답처리
33 + });
34 + } else {
35 + response.writeHead(404);
36 + response.end('Not found');
37 + }
38 +});
39 +
40 +app.listen(23023);
41 +console.log("Listening on 23023");
...\ No newline at end of file ...\ No newline at end of file
1 +var http = require('http');
2 +var fs = require('fs');
3 +var url = require('url');
4 +
5 +var app = http.createServer(function(request,response){
6 + var _url = request.url;
7 + var queryData = url.parse(_url, true).query;
8 + if(_url == '/'){
9 + _url = '/Index.html';
10 + }
11 + if(_url == '/favicon.ico'){
12 + return response.writeHead(404);
13 + }
14 + response.writeHead(200);
15 + console.log(queryData.busNum);
16 +
17 + if (queryData.busNum != null){ // 버스번호를 요청했을때 타임테이블 페이지로 전환
18 + var timetableHTML = `
19 +<!doctype html>
20 +<html>
21 +<head>
22 + <title>Time Table</title>
23 + <meta charset="utf-8">
24 + <style type="text/css">
25 + a { text-decoration:none }
26 + </style>
27 +</head>
28 +
29 +<body>
30 + <h1><a href="Index.html"><p style="text-align:center;">BTT</p></a></h1>
31 + <br>
32 + <h2>${queryData.busNum} BUS Time Table</h2>
33 + <p> Response from API server ... </p>
34 +</body>
35 +</html>
36 + `;
37 + response.end(timetableHTML);
38 + }
39 + else{ // 아니라면, url 따라감
40 + response.end(fs.readFileSync(__dirname + _url));
41 + }
42 +});
43 +app.listen(23023);
...\ No newline at end of file ...\ No newline at end of file
......
1 +<!doctype html> <!--이 웹페이지가 html로 만들어졌다는 태그-->
2 +<html> <!--head와 body를 감싸는 태그-->
3 +<head> <!--본문을 설명하는 태그-->
4 + <title>webpage frame</title>
5 + <meta charset="utf-8">
6 +</head>
7 +
8 +<body> <!--본문에 해당하는 태그-->
9 + <h1> webpage frame</h1>
10 +
11 + <ul>
12 + <li>목차1</li>
13 + <li>목차2</li>
14 + <li>목차3</li>
15 + </ul>
16 +
17 + <p>내용 1</p>
18 + <p>내용 2</p>
19 + <!-- target: 새 탭을 여는것-->
20 + <p><a href = "https://www.google.com/webhp?hl=ko&sa=X&ved=0ahUKEwjzxPrzkOrwAhWsF6YKHTq_CFwQPAgI" target = "_blank" title = "하이퍼링크 설명"> Go to google</a></p>
21 + <input type="button" value="BUTTON" onclick="alert('alert box')">
22 + <input type="text" onchange="alert('changed')">
23 + <br>
24 + <br>
25 + <script>
26 + document.write(1+2+3);
27 + </script>
28 +</body>
29 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!-- 이 문서는 base.js에 timetableHTML로 저장되어 있음. 따라서 이 문서는 직접적으로 사용하지 않음-->
2 +
3 +<!doctype html>
4 +<html>
5 +<head>
6 + <title>Time Table</title>
7 + <meta charset="utf-8">
8 + <style type="text/css">
9 + a { text-decoration:none }
10 + </style>
11 +</head>
12 +
13 +<body>
14 + <h1><a href="Index.html"><p style="text-align:center;">BTT</p></a></h1>
15 + <br>
16 + <h2>0000 BUS Time Table</h2>
17 + <p> 타임테이블 출력 ~~~~ </p>
18 +</body>
19 +</html>