ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Web Building] 9. Web DaaS - 웹 페이지 제작 강좌
    Web/Web Building 2015. 6. 12. 14:39


     

    Web Building - Data as a Service (DaaS)


    1. What We Will Do

     이번 장에서:
     - SQL이 구동중인 웹 서버로 부터 유동적인 데이터 인출을 합니다.


    2. Using a PHP Server Running MySQL

     customers.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
     
    <!DOCTYPE html>
    <html>
     
    <head>
      <meta charset="utf-8"/>
      <title>Customers</title>
      <link href="site.css" rel="stylesheet">
    </head>
     
    <body>
     
    <nav id="nav01"></nav>
     
    <div id="main">
      <h1>Customers</h1>
      <div id="id01"></div>
      <footer id="foot01"></footer>
    </div>
     
    <script src="script.js"></script>
     
    <script>
    var xmlhttp = new XMLHttpRequest();
     
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            myFunction(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
     
    function myFunction(response) {
        var obj = JSON.parse(response);
        var arr = obj.records;
        var i;
        var out = "<table><tr><th>Name</th><th>City</th><th>Country</th></tr>";
        for(i = 0; i < arr.length; i++) {
            out += "<tr><td>" + 
            arr[i].Name +
            "</td><td>" +
            arr[i].City +
            "</td><td>" +
            arr[i].Country +
            "</td></tr>";
        }
        out += "</table>"
        document.getElementById("id01").innerHTML = out;
    }
    </script>
     
    </body>
    </html>
    cs

     



     이번 장은 JSON 장과 마찬가지 입니다.


     그러나 이번 장에 쓰인 php는 "live"한 데이터베이스로부터 데이터를 인출한 것 입니다.


     



    3. Using an ASP.NET Server Running SQL Server

     customers.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
    <!DOCTYPE html>
    <html>
     
    <head>
      <meta charset="utf-8"/>
      <title>Customers</title>
      <link href="site.css" rel="stylesheet">
    </head>
     
    <body>
     
    <nav id="nav01"></nav>
     
    <div id="main">
      <h1>Customers</h1>
      <div id="id01"></div>
      <footer id="foot01"></footer>
    </div>
     
    <script src="script.js"></script>
     
    <script>
    var xmlhttp = new XMLHttpRequest();
     
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            myFunction(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
     
    function myFunction(response) {
        var obj = JSON.parse(response);
        var arr = obj.records;
        var i;
        var out = "<table><tr><th>Name</th><th>City</th><th>Country</th></tr>";
        for(i = 0; i < arr.length; i++) {
            out += "<tr><td>" + 
            arr[i].Name +
            "</td><td>" +
            arr[i].City +
            "</td><td>" +
            arr[i].Country +
            "</td></tr>";
        }
        out += "</table>"
        document.getElementById("id01").innerHTML = out;
    }
    </script>
     
    </body>
    </html>
    cs
     

     위의 PHP와 결과는 같지만, asp를 이용하여 인출하였습니다.



    * W3School을 통해 제작된 강좌입니다.




    댓글

Designed by Tistory.