1.


2.

 : IIS의 설치가 필요할 경우 하기 링크를 클릭 요함

 : IIS 웹 서버 설치


3.

 : Visual Studio Code 혹은 html을 작성할 수 있는 툴을 실행

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!doctype html>
<html lang="ko">
 
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
  <title>To Do List</title>
  <style>
    input, button {
        border-radius: 0px !important;
      }
      /* 라인 기본 스타일 */
      .line {
        padding: 10px; background-color:rgb(238,238,238);
      }
      /* 라인 완료된 스타일 */
      .line.done {
        background-color:rgb(136,136,136); color:white;
      }
      .line-txt {
        vertical-align: top;
      }
      .clear {
        float: right;
      }
      i { 
        cursor: pointer;
      }
      .line-txt.done {
        text-decoration: line-through;
      }                              
  </style>
</head>
 
<body>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
  <div id="app" class="container" style="width: 526px;">
    <div style="background-color: rgb(244,67,54); width:100%; padding: 20px;">
      <h3 style="color: white; text-align: center; margin-bottom:10px;">My To Do List</h3>
      <form class="form-inline" onsubmit="return false;">
        <input type='text' v-model="title" placeholder="Title..." class="form-control" style="width:400px;">
        <button class="btn" v-on:click="add" style="background-color: rgb(217, 217, 217); color:#555;">
          Add
        </button>
      </form>
    </div>
    <div id="div-todos" style="width: 100%;">
      <div class="line" v-bind:class="{ done: line.isDone }" v-for="line in lines">
        <i class="material-icons" v-on:click="change(line);">done</i>
        <span class="line-txt" v-bind:class="{ done: line.isDone }">{{line.title}}</span>
        <i class="material-icons" v-on:click="clear(line);">clear</i>
      </div>
    </div>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        lines: null,
        title: "",
        dataUrl: "_______________________________________________________________________"
      },
      methods: {
        add: function () {
          // title 값 검증
          if (this.title === null || this.title == "") {
            alert("내용을 입력해주세요.");
            return false;
          }
          var item = { isDone: false, title: this.title };
 
          $.ajax({
            type: 'POST',
            url: this.dataUrl,
            data: JSON.stringify(item),
            contentType: "application/json; charset=utf-8",
            success: function (data) {
              // id 값 세팅
              item.id = data;         // <- insertId
              // 한줄 추가
              this.lines.push(item);  // <- {id:6, isDone:false, title:this.title};
              // 초기화
              this.title = "";
            }.bind(this),
            dataType: "json"
          });
 
        },
        change: function (line) {
          $.ajax({
            type: 'PUT',
            url: this.dataUrl,
            data: JSON.stringify({ id: line.id, isDone: !line.isDone }),
            contentType: "application/json; charset=utf-8",
            success: function (data) {
              // 상태값 변경
              line.isDone = !line.isDone;
            }.bind(this),
            dataType: "json"
          });
        },
        clear: function (line) {
          $.ajax({
            type: 'DELETE',
            url: this.dataUrl,
            data: JSON.stringify({ id: line.id }),
            contentType: "application/json; charset=utf-8",
            success: function (data) {
              // 라인 삭제
              this.lines.splice(this.lines.indexOf(line), 1);
            }.bind(this),
            dataType: "json"
          });
        }
      },
      // vue.js 인스턴스 생성 후 시작되는 메소드
      // AJAX (Asyncronous Javascript And XML)
      created: function () {
        $.get("_______________________________________________________________________", function (data) {
          this.lines = data;
        }.bind(this));
      }
    });
</script>
</body>
 
</html>
 
cs

* dataURL을 사용하는 2곳은 해당 정적 웹 페이지가 사용자의 요청을 전달하기 위한 경로로 동적 웹 페이지가 서비스 중인 경로를 기입함


4.

 : 위의 코드 작성 후 IIS 웹 서버가 참조하는 디렉터리에 index.htm 파일로 저장

* 기존의 iisstart.htm 파일이 초기 페이지로 지정되어 있으나 index.htm의 우선순위가 높기 때문에 index.htm으로 초기 페이지가 대체됨.

* 해당 Web Site의 기본 문서에서 확인 가능


5.

 : localhost의 정적 웹 페이지 출력 여부 확인



저작자표시

'Cloud > Amazon Web Services' 카테고리의 다른 글

로컬, RDS를 사용한 데이터베이스 구성  (0) 2018.10.13
로컬, EC2를 사용한 동적 웹 페이지 구성  (0) 2018.10.13
S3, EC2, RDS를 사용한 정적 및 동적 웹 페이지 구성  (0) 2018.10.13
RDS MySQL Remove  (0) 2018.10.01
RDS MySQL  (0) 2018.09.28

+ Recent posts

티스토리툴바