2021.08.03 수업일지(MySQL, jQuery, node.js)

<기본 과정>

- front - html css javascript(jQuery)

- back - jsp & servlet(spring), database(oracle, mySQL(server))

- jQuery

ex09.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ex09 유효성 검사 frm</title>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <style>
            #tbl {
                border-collapse: collapse;
                border: 1px solid cornflowerblue;
                margin-top: 10px;
            }
            td,
            th {
                padding: 5px;
                border-bottom: 1px solid cornflowerblue;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <form name="frm" action="ex01.html">
            <input type="text" name="txtName" placeholder="이름을 입력하세요."/><hr>
            <input type="text" name="txtAddress" placeholder="주소를 입력하세요."/><hr>
            <input type="text" name="txtAge" placeholder="나이를 입력하세요."/><hr>
            <input type="submit" value="저장"/>
            <input type="reset" value="취소"/>
            <hr>
        </form>
        <hr>
        <button id="btnDelete">선택삭제</button>
        <table id="tbl">
            <tr>
                <th><input type="checkbox" id="chkAll"></th>
                <th width="100">이름</th>
                <th width="300">주소</th>
                <th width="100">나이</th>
                <th>삭제</th>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td class="name">이방원</td>
                <td>인천시 연수구</td>
                <td>23</td>
                <td>
                    <button>X</button>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td class="name">이성계</td>
                <td>인천시 동구</td>
                <td>53</td>
                <td>
                    <button>X</button>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td class="name">이도</td>
                <td>인천시 서구</td>
                <td>19</td>
                <td>
                    <button>X</button>
                </td>
            </tr>
        </table>
    </body>
    <script>
        // 각행의 checkbox를 선택한 경우
        $('#tbl').on('click','tr td input:checkbox', function(){
            var cntAll = $('#tbl tr td input:checkbox').length; //첵박 개수
            var cntChecked = $('#tbl tr td input:checkbox:checked').length; //첵박체크 개수
            if(cntAll==cntChecked){
                $('#chkAll').prop('checked',true);
            }else{
                $('#chkAll').prop('checked',false);
            };
        });

        // chkAll 버튼을 클릭한 경우
        $('#chkAll').on('click', function () {
            if ($(this).is(':checked')) {
                $('#tbl tr input:checkbox').each(function () {
                    $(this).prop('checked', true);
                });
            } else {
                $('#tbl tr input:checkbox').each(function () {
                    $(this).prop('checked', false);
                });
            }
        });

        // 선택삭제 버튼을 click 했을때
        $('#btnDelete').on('click', function () {
            var cnt = $('#tbl tr td input:checkbox:checked').length;
            if (cnt == 0) {
                alert('<삭제할 내용을 선택하세요>');
            } else {
                if (!confirm(`${cnt}개를 삭제하시겠습니까?`)) 
                    return; // 삭제하지 않을거면 return
                $('#tbl tr td input:checkbox:checked').each(function(){
                    var row = $(this).parent().parent();
                    $(row).remove();
                });
            };
        });

        $(frm).submit(function (e) {
            // 무조건 submit 방지위해 event로 지정 action 문서로 이동을 방지하는 e.preventDefault();
            e.preventDefault();
            var name = $(frm.txtName).val();
            var address = $(frm.txtAddress).val();
            var age = $(frm.txtAge).val();
            if (name.length == 0) {
                alert('이름을 입력하세요.');
                $(frm.txtName).focus();
            } else if (address.length == 0) {
                alert('주소를 입력하세요.');
                $(frm.txtAddress).focus();
            } else if (age.replace(/[0-9]/g, '') || age == "") { //숫자가 아닌 문자가 있는지 체크
                alert("나이는 숫자만 입력하세요.");
                $(frm.txtAge).val("");
                $(frm.txtAge).focus();
            } else {
                if (!confirm('입력한 내용을 저장하시겠습니까?')) 
                    return;
                var str = '';
                str += '<tr>';
                str += `<td><input type="checkbox"/></td>`;
                str += `<td width=100 class="name">${name}</td>`;
                str += `<td width=300>${address}</td>`;
                str += `<td width=100>${age}</td>`;
                str += `<td><button>X</button></td>`;
                str += '</tr>';
                $('#tbl').append(str);
            };
        });

        // 각행의 버튼을 클릭한 경우 같은 line의 tag(td)에서는 못찾고 상위 tag(tr)로 올라가야한다.
        $('#tbl').on('click', 'tr button', function () {
            var row = $(this)
                .parent()
                .parent();
            var name = row
                .find('.name')
                .html();
            if (!confirm(`${name}을(를) 삭제하시겠습니까?`)) 
                return;
            $(row).remove();
        });
    </script>
</html>

ex10.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ex10
        </title>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <style>
            #tbl {
                margin: 0px auto;
                border-collapse: collapse;
                border: 1px solid wheat;
                margin-top: 10px;
                width: 6
                00px;
            }
            th,
            td {
                padding: 5px;
                color: white;
                border-bottom: 1px solid wheat;
                background-color: rosybrown;
            }
            h1{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>할일 목록</h1>
        <table id="tbl">
            <tr>
                <th colspan="3" style="text-align: left;"><button id="btnDelete">선택삭제</button></th>
            </tr>
            <tr>
                <th><input type="checkbox" id="chkAll"></th>
                <th>Title</th>
                <th>Delete</th>
            </tr>
        </table>
    </body>
    <script>
        // 전체 선택 체크상자를 클릭한 경우
        $('#chkAll').on('click', function () {
            if ($(this).is(':checked')) {
                $('#tbl tr input:checkbox').each(function () {
                    $(this).prop('checked', true);
                });
            } else {
                $('#tbl tr input:checkbox').each(function () {
                    $(this).prop('checked', false);
                });
            }
        });

        // 선택삭제 버튼을 클릭한 경우
        $('#btnDelete').on('click', function () {
            let cnt = $('#tbl tr td .chk:checked').length;
            if (cnt == 0) {
                alert('<삭제할 내용을 선택하세요>');
            } else {
                if (!confirm(`${cnt}개를 삭제하시겠습니까?`)) 
                    return; // 삭제하지 않을거면 return
                $('#tbl tr td .chk:checked').each(function(){
                    let row = $(this).parent().parent();
                    $(row).remove();
                });
            };
        });
        
        // 각행의 체크상자를 클릭한 경우
        $('#tbl').on('click','tr td .chk',function(){
            let cntAll = $('#tbl tr td .chk').length;
            let cntChecked = $('#tbl tr td .chk:checked').length;
            if(cntAll==cntChecked){
                $('#chkAll').prop('checked',true);
            }else{
                $('#chkAll').prop('checked',false);
            };
        });

        // 각행의 삭제버튼을 눌렀을때
        $('#tbl').on('click','tr td button',function(){
            let row=$(this).parent().parent();
            let id=$(row).attr('todoid');
            if(!confirm(`${id}를(을) 삭제하시겠습니까?`)) return;
            $(row).remove();
        });

        $.ajax({
            type: 'get',
            url: 'https://jsonplaceholder.typicode.com/todos',
            dataType: 'json',
            success: function(data){
                let str='';
                $(data).each(function(){
                    let id=this.id;
                    let title=this.title;
                    let com=this.completed ? 'checked':''; // 삼항연산자 X ? 'Y':'Z'; X참 Y 거짓 Z
                    if(id<=10){
                        str+=`<tr todoid=${id}>`;
                        str+=`<td><input type="checkbox" class="chk" ${com}/></td>`;
                        str+=`<td>${id} : ${title}</td>`;
                        str+='<td><button>X</button></td>'
                        str+='</tr>';
                    };
                });
                $('#tbl').append(str);
            }
        });
    </script>
</html>

- Node.js 를 이용한 서버페이지 만들기

1. node. js 설치

https://nodejs.org/ko/

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

해당 홈페이지에 들어가서 자신의 운영체제에 맞는 버젼을 다운받아서 설치한다. 설치과정은 특별한게 없으니 과정대로 설치하면 된다.

2. 작업 폴더 생성

C드라이브 D드라이브 상관없이 간단한 경로(ex. C:\data\nodejs)에 설치해주도록 한다.

3. cmd에서 설치 경로 지정 후 npm install express-generator -g

1) cmd 명령 프롬프트를 연다.

이과 같은 방식으로 위에서 만든 경로를 찾아간다.

2) 명령어에 npm install express-generator -g를 입력한다.

express가 설치 되었으면 위와 같이 나온다(윈도우 기준)

4. 프로젝트 생성

1) cmd에 express -e ex210803(임이의 프로젝트 이름) 입력

위와 같이 나오면 express 생성이 성공했다.

5. VSC 터미널에 진입해 npm install

1) VSC에서 Ctrl +` (느낌표 왼쪽 버튼)를 누르면 터미널이 나오며 본인이 지정한 경로가 열려있다. 그곳에 npm install을 입력한다. 성공하면 위와 같은 결과물이 나온다.

2) 만약에 npm 용어가 인식이 안된다면 아래의 블로그를 참고하도록 하자.

https://blog.naver.com/PostView.nhn?blogId=dlaxodud2388&logNo=222102392025

[오류모음] npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로

VSCode와 Node.js 를 설치하고 간단한 프로젝트를 생성하기 위해 npm init을 쳤는데 다음과 같은 오류...

blog.naver.com

해당 블로그 설정 변경 후 VSC restart해야 적용되는 경우가 있으니 그냥 restart하도록 하자.

3) package.json에 추가된 모듈을 설치한다. npm install 명령어를 사용하면 package.json에 선언된 모듈이 자동으로 설치된다. 이때 명령어는 ex210803 디렉터리 아래에서 실행한다.

6. 웹 서버실행 npm start

VSC 터미널에서 프로젝트 경로를 지정하고 npm start 커맨드를 입력한다.

7. 이제 브라우저에서 만들어진 웹서버를 열어보자.

브라우저 상단에

http://localhost 3000/

을 입력하면 왼쪽과 같은 결과를 출력할 수 있다.

8. 내용을 변경해보자.

1) ex0803/routes/index.js 에서 router의 title을 Express 에서 익스프레스에서 변경해보았다.

2) 원래 이와 같이 변경하면 npm을 restart해야하는 불편함이 있다. 터미널에서 ctrl + C -> Y 누르고 다시 npm start 커맨드 입력하고..

3) 이와 같은 불편함을 해결하기 위해서 nodemon을 이용하도록 하자.

4) VSC 터미널에 왼쪽과 같이 npm install nodemon -g을 입력하면 된다.

5) 다시 터미널에서 nodemon을 입력해주자,

6) 단순하게 브라우저에서 refresh함으로써 변경사항을 확인할 수 있다.
단, 저장은 꼭 하도록 하자.

이제 웹페이지를 만들어 보도록 하자.

- 웹페이지 만들기

index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
  </head>
  <body>
    <div id="container">
      <div id="header">
        <img src="/images/dog.jpg" width='900px'/>
      </div>
      <div id="content">
        <div id="todos"></div>
        <hr>
        <div id="address"></div>
      </div>
      <div id="footer">
        <p>Copyright 인천일보 아카데미 <%=name%></p>
      </div>
    </div>
  </body>
  <script>
    // todos 호출
    $.ajax({
      type:'get',
      url:'/todos', // index.js에서 만든 경로
      data: 'json',
      success:function(data){
        let str='';
        $(data).each(function(){
          str+=`<h1>${this.id}:${this.title}</h1>`;
        });
        $('#todos').html(str);
      }
    });
    // address 호출
    $.ajax({
      type:'get',
      url:'/address', // index.js에서 만든 경로
      data: 'json',
      success:function(data){
        let str='';
        $(data).each(function(){
          str+=`<h3>${this.id}.${this.name}:${this.address}</h3>`;
        });
        $('#address').html(str);
      }
    });
  </script>
</html>

app.js

app.use('/', indexRouter);
app.use('/users', usersRouter);
// 라우터 등록(2021.08.03)
app.use('/address', require('./routes/address.js'));

라우터 등록 주석 하단 부분을 추가하였다.

index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: '할일목록', name:'심심청이'});
  // index.js로 보냄
});
// res ; response, req ; request
router.get('/todos', function (req, res) { //'/todos' 라는 주소를 이용해 rows라는 data 출력 가능
  let rows = [
    { id: 1, title: 'DB SQL문' },
    { id: 2, title: 'Node.js 설치' },
    { id: 3, title: 'express 서버 생성' },
    { id: 4, title: 'jQuery 사용방법' },
    { id: 5, title: 'Ajax을 이용한 비동기 처리' },
  ];
  res.json(rows);
});
module.exports = router;

routes > address.js 새롭게 만들었다.

// express 만들 때 필수 형식
var express = require('express');
var router = express.Router();

// Get 주소목록
router.get('/', function (req, res) { //'/todos' 라는 주소를 이용해 rows라는 data 출력 가능
    let rows = [
        {
            id: 1,
            name: '이주성',
            address: '인천시 미추홀구'
        }, {
            id: 2,
            name: '이성계',
            address: '인천시 부평구'
        }, {
            id: 3,
            name: '이방원',
            address: '인천시 동구'
        }
    ];
    res.json(rows);
});
// 외부로
module.exports = router;

images>dog.jpg 를 추가하였다.

dog.jpg 이외에 관리자가 원하는 어떤 파일도 가능하다.

단, 해당 위치에 넣어주는것이 xbox 오류가 안나는 가장 좋은 방법이다.

저작자표시

'ICIA 수업일지' 카테고리의 다른 글

2021.08.05 수업일지{html, css, java script(jQuery),MySql,node.js} (0)	2021.08.07
2021.08.04 수업일지(node.js, MySQL, VSC) (0)	2021.08.07
2021.08.02 수업일지(HTML, CSS, JAVA SCRIPT,MySQL) (0)	2021.08.07
2021.07.30 수업일지 (0)	2021.07.31
2021.07.29 수업일지 (0)	2021.07.31

나의 웹 공부 이야기

2021.08.03 수업일지(MySQL, jQuery, node.js)

- jQuery

- Node.js 를 이용한 서버페이지 만들기

1. node. js 설치

2. 작업 폴더 생성

3. cmd에서 설치 경로 지정 후 npm install express-generator -g

4. 프로젝트 생성

5. VSC 터미널에 진입해 npm install

6. 웹 서버실행 npm start

7. 이제 브라우저에서 만들어진 웹서버를 열어보자.

8. 내용을 변경해보자.

이제 웹페이지를 만들어 보도록 하자.

- 웹페이지 만들기

index.ejs

app.js

index.js

routes > address.js 새롭게 만들었다.

images>dog.jpg 를 추가하였다.

'ICIA 수업일지' 카테고리의 다른 글

티스토리툴바

2021.08.03 수업일지(MySQL, jQuery, node.js)

- jQuery

- Node.js 를 이용한 서버페이지 만들기

1. node. js 설치

2. 작업 폴더 생성

3. cmd에서 설치 경로 지정 후 npm install express-generator -g

4. 프로젝트 생성

5. VSC 터미널에 진입해 npm install

6. 웹 서버실행 npm start

7. 이제 브라우저에서 만들어진 웹서버를 열어보자.

8. 내용을 변경해보자.

이제 웹페이지를 만들어 보도록 하자.

- 웹페이지 만들기

index.ejs

app.js

index.js

routes > address.js 새롭게 만들었다.

images>dog.jpg 를 추가하였다.

'ICIA 수업일지' 카테고리의 다른 글

관련글

티스토리툴바