CCTV_ver_2.1. 합계 데이터, 기간 내 데이터 조회

6 minute read

➡ 위 이미지를 클릭하면 Repository로 이동합니다.

과제 목표

DB / 서버:

차량, 사람 통행량 데이터가 5분단위로 수집 저장되도록 하고,
1) 시작시간/종료시간을 지정하면, default 5분 간격으로 제공하는 그 시간동안의 데이터를 제공하는 API 개발
2) n시간 / 일 / 월 단위의 합산으로 제공할 수 있는 API 개발

Front-end:

1) 시작시간/종료시간을 지정하고, 수신한 데이터를 테이블로 표시
2) n시간 / 일 / 월 단위 데이터를 테이블로 표시

작동 영상 확인

Project file view

Index

1. 가상 데이터 생성
2. 실시간 데이터 제공
3. 합산 데이터 제공
4. 기간(시간) 내 데이터 동적테이블 형태로 제공

가상 데이터 생성

데이터를 생성할 시작시간/ 종료시간을 지정하면 5분간격으로 데이터 생성하여 DB에 업로드 (by.태훈)

1. 시작시간/ 종료시간 지정하는 form 생성

createDataPage.ejs

<h1>Select Date and Time</h1>

        <div>
            Start Time:
            <input id="selectStartDate" type="date">
            <select id="selectStartTime" size="1"></select>
            시 ~
            <br>
            End Time:
            <input id="selectEndDate" type="date">
            <select id="selectEndTime" size="1"></select>
            시 &emsp;
            <button id="dateSelectBtn">기간 선택</button>
        </div>

        <script>
           for (i = 0; i < 24; i++) {
                setValueSelectById('selectStartTime', i);
                setValueSelectById('selectEndTime', i);
            }
            var now = new Date().toISOString().split('T')[0];
            console.log(now);
            $("#selectStartDate").attr('value', now);
            $("#selectEndDate").attr('value', now);
        </script>

2. Ajax 를 이용해 사용자로부터 입력받은 데이터 전송, 서버 요청 후 처리

createDataPage.ejs

  <script type="text/javascript">
      function setValueSelectById(id, value) {
          $('#'+id).append('<option value="'+String(value)+'">'+String(value)+'</option>');
      }

      function selectDate() {
          $.ajax({
              url : "/createSampleData",
              type : "POST",
              data: JSON.stringify({
                  startDate: $("#selectStartDate").val(),
                  startTime: $("#selectStartTime").val(),
                  endDate: $("#selectEndDate").val(),
                  endTime: $("#selectEndTime").val()
              }),
              contentType: "application/json; charset=utf-8",
          })

          .done(function (json){
              console.log(json);
              $('div').text(json);
          })

          .fail(function (xhr, status, errorThrown){
              alert("Date Select Failed");
              console.log(status);
          });
      }
      $(function() {
          $("#dateSelectBtn").on("click", selectDate);
      });
  </script>

3. 샘플 랜덤 데이터 생성

app.js

// 샘플 데이터 랜덤으로 생성
function createData(updateTime) {
    var peopleNum = Math.floor(Math.random() * 10);
    var vehicleNum = Math.floor(Math.random() * 5);
    console.log(peopleNum, vehicleNum);

    var currentDate = new Date();
    var endDate = new Date(currentDate);
    var startDate = new Date(currentDate.setSeconds(currentDate.getSeconds() - updateTime));
    console.log(startDate.toString(), endDate.toString());

    return {
        peopleNum: peopleNum,
        vehicleNum: vehicleNum,
        startDate: startDate,
        endDate: endDate
    };
}

4. 5분마다 데이터 생성함수 호출하고 DB에 업로드

app.js

// Create Sample Data
app.get('/createSampleData', (req, res) => {
    res.render('./createDataPage.ejs');
});

app.post('/createSampleData', (req, res) => {
    console.log(req.body);
    var data = req.body;

    var startTime = new Date(data.startDate).setHours(data.startTime);
    var endTime = new Date(data.endDate).setHours(data.endDate);

    var flag = 1;
    var job = schedule.scheduleJob({
        start: startTime,
        end: endTime+1,
        rule: '*/5 * * * *' // 주기 (5분마다)
    },
    function() {
        if (flag == 1) {
            res.json('Scheduler is Working');
            flag = flag + 1;
        }

        var data = createData(5*60);
        var sql = 'INSERT into test(start_date, end_date, people, vehicle) value (?, ?, ?, ?)';
        conn.query(sql, [data.startDate, data.endDate, data.peopleNum, data.vehicleNum], (err) => {
            if (err) {
                console.log(err);
            } else {
                console.log('complete insert data');
            }
        });
    });
})

5. 결과

+-------+---------------------+---------------------+--------+---------+
| id    | start_date          | end_date            | people | vehicle |
+-------+---------------------+---------------------+--------+---------+
| 21715 | 2021-07-10 20:15:00 | 2021-07-10 20:20:00 |      0 |       2 |
| 21714 | 2021-07-10 20:10:00 | 2021-07-10 20:15:00 |      3 |       3 |
| 21713 | 2021-07-10 20:05:00 | 2021-07-10 20:10:00 |      7 |       4 |
| 21712 | 2021-07-10 20:00:00 | 2021-07-10 20:05:00 |      2 |       3 |
| 21711 | 2021-07-10 19:55:00 | 2021-07-10 20:00:00 |      5 |       3 |
+-------+---------------------+---------------------+--------+---------+

실시간 데이터 제공 (ver.1)

현재로부터 가장 최근의 데이터를 불러와 표 형태로 제공

참고 페이지 ver.1 버튼 클릭 시 실시간 데이터 제공

1. 표와 버튼 생성

mainPage.ejs

  <h2>실시간 DATA</h2>
  <button id="refreshDataBtn">데이터 새로고침</button>

  <table id="showLatestTable" border="1">
      <th>Start Date</th>
      <th>End Date</th>
      <th>People</th>
      <th>Vehicle</th>
      <tr>
          <td id="startDate"></td>
          <td id="endDate"></td>
          <td id="peopleNum"></td>
          <td id="vehicleNum"></td>
      </tr>
  </table>

2. 버튼 클릭 시 서버에 요청

mainPage.ejs

function refreshData() {
              $.ajax({
                  url : "/mainPage/refreshData",
                  type : "POST",
                  dataType : "JSON",
              })

              .done(function (json){
                  console.log(json);
                  $('#startDate').text(json.end_date);
                  $('#endDate').text(json.end_date);
                  $('#peopleNum').text(json.people);
                  $('#vehicleNum').text(json.vehicle);
              })

              .fail(function (xhr, status, errorThrown){
                  alert("Refresh Data Failed");
              });
          }
          $(function() {
              $("#refreshDataBtn").on("click", refreshData);
          });

3. 서버에서 요청 처리 (DB에 재 접근하여 가장 최근 데이터 넘겨줌)

app.js

app.post('/mainPage/refreshData', (req, res) => {
    console.log(req.body);
    var sql = 'select * from test order by id desc limit 1'
    conn.query(sql, (err, row) => {
        if (err) {
            console.log(err);
        } else {
            console.log(row);
            res.json(row[0]); // latest row
        }
    });
});

합산 데이터 제공

n시간 / 일 / 월 단위의 데이터를 사용자로부터 입력받아 합산 데이터를 표 형태로 제공 (by. 가희)

1. 기간, 일간, 시간별 조회 버튼 과 표 형태 제공

mainPage.ejs

<h2>합계 데이터 조회</h2>
      <div>

        <input type="button" value="시간 조회" id="timeLookupBtn" onclick="timeInput()" />
        <input type="button" id="dayLookupBtn" value="일간 조회" onclick="dayInput()" />
        <input type="button" id="dateLookupBtn" value="기간 조회" onclick="termInput()" />

        <div id="addForm"></div>
      <br>
      </div>
      <div>

      </div>
      <table id="showTermTable" border="1">
          <th></th>
          <th>People</th>
          <th>Vehicle</th>
          <tr>
              <th>Sum</th>
              <td id="sumPeople"></td>
              <td id="sumVehicle"></td>
          </tr>
      </table>

2. 각 버튼 클릭 시 다른 입력 형태 제공

ezgif com-gif-maker (1)

mainPage.ejs

  <script>
  // "시간조회" 버튼 클릭 시 number form 생성
    function timeInput(){
      $('#sumPeople').text(' ');
      $('#sumVehicle').text(' ');
      $("#addForm").empty();
      $('#addForm').append('<input id="selectStartDate2" type="date"> ~  ')
      $('#addForm').append('<input id="selectEndDate2" type="date"> ')
      $('#addForm').append('<input id="selectStarttime" type="time" size="10">  ')
      $('#addForm').append('<input id="selectEndtime" type="time" size="10"> ')
      $('#addForm').append('<button type="button" id="timeSelectBtn">시간 선택</button>')
    }
    // "일간 조회" 버튼 클릭 시 date form 생성
      function dayInput(){
        $('#sumPeople').text(' ');
        $('#sumVehicle').text(' ');
        $("#addForm").empty();
        $('#addForm').append("<input id='selectDate' type='date'>");
        $('#addForm').append("<button type='button' id='dateSelectBtn2'>제출 </button>")
      }
      // "기간 조회" 버튼 클릭 시 date form 2개 생성
        function termInput(){
          $('#sumPeople').text(' ');
          $('#sumVehicle').text(' ');
          $("#addForm").empty();
          $('#addForm').append("<input id='selectStartDate' type='date'> ~ ");
          $('#addForm').append("<input id='selectEndDate' type='date'> ");
          $('#addForm').append("<button type='button' id='dateSelectBtn'>제출 </button>")
        }
    </script>

3. 입력받은 데이터 처리

mainPage.ejs

//기간조회 입력 후 제출처리
function selectDate() {
    $.ajax({
        url : "/mainPage/dateSelect",
        type : "POST",
        data: JSON.stringify({
            startDate: $("#selectStartDate").val(),
            endDate: $("#selectEndDate").val()
        }),
        contentType: "application/json; charset=utf-8",
    })
    .done(function (json){
        console.log(json);
        $('#sumPeople').text(json['sum(people)']);
        $('#sumVehicle').text(json['sum(vehicle)']);
    })
    .fail(function (xhr, status, errorThrown){
        alert("Date Select Failed");
        console.log(status);
    });
}
$(function() {
    $(document).on("click", "#dateSelectBtn", function(){
                selectDate();
        });
});

//일간 조회 입력 후 제출 처리
function selectDate2() {
    $.ajax({
        url : "/mainPage/dateSelect2",
        type : "POST",
        data: JSON.stringify({

            _Date:$("#selectDate").val(),
        }),
        contentType: "application/json; charset=utf-8",
    })
    .done(function (json){
        console.log(json);
        $('#sumPeople').text(json['sum(people)']);
        $('#sumVehicle').text(json['sum(vehicle)']);
    })
    .fail(function (xhr, status, errorThrown){
        alert("Date Select Failed");
        console.log(status);
    });
}
$(function() {
    $(document).on("click", "#dateSelectBtn2", function(){
                selectDate2();
        });
});

//시간조회 입력 후 제출 처리
function selectTime() {
    $.ajax({
        url : "/mainPage/timeSelect",
        type : "POST",
        data: JSON.stringify({
            start_Date:$("#selectStartDate2").val(),
            startTime:$("#selectStarttime").val(),
            end_Date: $("#selectEndDate2").val(),
            endTime: $("#selectEndtime").val(),

        }),
        contentType: "application/json; charset=utf-8",
    })
    .done(function (json){
        //console.log(json);
        $('#sumPeople').text(json['sum(people)']);
        $('#sumVehicle').text(json['sum(vehicle)']);
    })
    .fail(function (xhr, status, errorThrown){
        alert("Date Select Failed");
        console.log(status);
    });
}
$(function() {
    $(document).on("click", "#timeSelectBtn", function(){
        selectTime();
        });
});

4. 서버에서 데이터 처리

app.js

//합계 데이터 조회 - 기간 조회
app.post('/mainPage/dateSelect', (req, res) => {
    var data = req.body;
    var sql = 'select sum(people), sum(vehicle) from test where start_date >= ? and end_date <= ?'
    conn.query(sql, [data.startDate, data.endDate], (err, row) => {
        if (err) {
            console.log(err);
        } else {
            console.log(row);
            res.json(row[0]); // sum(people), sum(vehicle)
        }
    });
});

//합계 데이터 조회 - 일간 조회
app.post('/mainPage/dateSelect2', (req, res) => {
    var data = req.body;
    var sql = "select sum(people), sum(vehicle) from test WHERE start_date >= CONCAT(?,' 00:00:00') AND start_date <= CONCAT(?,' 23:59:59')";
    conn.query(sql,[data._Date,data._Date], (err, row) => {
        if (err) {
            console.log(err);
        } else {
            console.log(row);
            res.json(row[0]); // sum(people), sum(vehicle)
        }
    });
});

//합계 데이터 조회 - 시간 조회
app.post('/mainPage/timeSelect', (req, res) => {
    var data = req.body;
    var sql =  "select sum(people), sum(vehicle) from test WHERE start_date >= CONCAT(?,' ',?,':00') AND start_date <= CONCAT(?,' ',?,':00')";
    conn.query(sql, [data.start_Date,data.startTime,data.end_Date,data.endTime], (err,row) => {
        if (err) {
            console.log(err);
        } else {
            console.log(row);
            res.json(row[0]); // sum(people), sum(vehicle)
        }

    });
});

기간(시간) 내 데이터 동적 테이블 형태로 제공

시작시간/종료시간을 지정하고, 수신한 모든 데이터를 동적 테이블로 표시 ( by. 서현)

ezgif com-gif-maker

1. 사용자로부터 날짜와 시간 입력받고 표 형태 미리 제공

mainPage.ejs

  <h2>Data Table</h2>
  <div>
    <input id='table_s_time' type='datetime-local' size=15 >
    ~
    <input id='table_e_time' type='datetime-local'>
    <input type="button" id="datetime_submit_btn" value="조회"  />
  </div>

  <div id='dataList'>
    <table class='dataList' border="1">
      <tr>
        <th>Start Time</th>
        <th>End Time</th>
        <th>People</th>
        <th>Vehicle</th>
      </tr>
       <tbody id='table_body'> </tbody>
    </table>
  </div>

2. 서버에 날짜시간 데이터를 넘겨주고, 해당 데이터 받아와서 동적 테이블 형태로 제공

mainPage.ejs

  <script>
      //시작시간/종료시간을 지정하고, 수신한 데이터를 테이블로 표시 -- 서현
      function showDataTable() {
          $.ajax({
              url : "/mainPage/tableDatetimeSelect",
              type : "POST",
              data: JSON.stringify({
                  startDate: $("#table_s_time").val(),
                  endDate: $("#table_e_time").val()
              }),
              contentType: "application/json; charset=utf-8",
          })

          .done(function (json){
              $("#table_body").empty();
    
              //build Table
             var table = document.getElementById('table_body');
             for (var i=0; i < json.length; i++) {
                var row = `<tr>
                             <td>${json[i].start_date}</td>
                             <td>${json[i].end_date}</td>
                             <td>${json[i].people}</td>
                             <td>${json[i].vehicle}</td>
                           </tr>`
                             table.innerHTML += row
                           }
                })

          .fail(function (xhr, status, errorThrown){
              alert("Failed");
              console.log(status);
          });
      }
      $(function() {
          $("#datetime_submit_btn").on("click", showDataTable);
      });
    </script>

3. 서버에서 해당 기간(시간)의 데이터 전부를 넘겨줌

app.js

 app.post('/mainPage/tableDatetimeSelect', (req, res) => {
    var data = req.body;
    console.log(data.startDate);
    var sql = 'SELECT * FROM test WHERE start_date >= ? and end_date <= ?'
    conn.query(sql, [data.startDate, data.endDate], (err, row) => {
        if (err) {
            console.log(err);
        } else {
            console.log(row);
            res.json(row);
        }
    });
});

Share on

Twitter Facebook LinkedIn

CCTV_ver_2.1. 합계 데이터, 기간 내 데이터 조회

과제 목표

Project file view

Index

가상 데이터 생성

1. 시작시간/ 종료시간 지정하는 form 생성

2. Ajax 를 이용해 사용자로부터 입력받은 데이터 전송, 서버 요청 후 처리

3. 샘플 랜덤 데이터 생성

4. 5분마다 데이터 생성함수 호출하고 DB에 업로드

5. 결과

실시간 데이터 제공 (ver.1)

1. 표와 버튼 생성

2. 버튼 클릭 시 서버에 요청

3. 서버에서 요청 처리 (DB에 재 접근하여 가장 최근 데이터 넘겨줌)

합산 데이터 제공

1. 기간, 일간, 시간별 조회 버튼 과 표 형태 제공

2. 각 버튼 클릭 시 다른 입력 형태 제공

3. 입력받은 데이터 처리

4. 서버에서 데이터 처리

기간(시간) 내 데이터 동적 테이블 형태로 제공

1. 사용자로부터 날짜와 시간 입력받고 표 형태 미리 제공

2. 서버에 날짜시간 데이터를 넘겨주고, 해당 데이터 받아와서 동적 테이블 형태로 제공

3. 서버에서 해당 기간(시간)의 데이터 전부를 넘겨줌

Share on

Leave a comment

You may also enjoy

NAS 서버에서 DELL 서버로 주기적으로 비디오 전송

실제 데이터 페이지 제작

MySQL Query 모음

CCTV_ver_4.1. 데이터 분석 시스템