HTML - 캠핑장정보등록

2022-01-14

캠핑장관리하는 프로그램이다. ->메뉴에는 캠핑장관리 스타일관리 시설물관리가있다. -> 아직미완성 단계이다. 추가될예정임

현재 구현한 부분은

전체적 틀 ( 캠핑장관리, 스타일관리, 시설물관리 틀)
캠핑장 등록 (새로운 캠핑장을 등록)
캠핑장 이름을 클릭하면 나오는 캠핑장 정보 ( 이부분 전부다 구현완료)

1. 메인페이지

( 캠핑장 목록들을 출력한다.)

index.js

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/common.css' />
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script>

  </head>
  <body>
    <div id ="page">
      <div id = "top">
        <h1><%= title %></h1>
      </div>
      <center>
      <div id = "menu">
        
        <a href="/" style="color: black;">캠핑장관리 |</a>&nbsp;&nbsp;&nbsp;
        <a href="/style" style="color: black;" >스타일관리 |</a>&nbsp;&nbsp;&nbsp;
        <a href="/facility" style="color: black;" >시설물관리 |</a>&nbsp;&nbsp;&nbsp;
     
      </div>
    </center>
      <div id = "center">
        <%-include(pageName)%>
      </div>
      <div id = "bottom">
        <h5>CopyRight 2022. KangKkaem All Rights Reserved</h5>
      </div>
    </div>
  </body>
</html>

list.ejs

<table id ="tbl"></table>
<script id="temp" type="text/x-handlebars-template">
       <div colspan="4" style="margin-bottom: 4px;">
        <button onclick = "location.href='/camp/insert'">캠핑장등록</button></div>
 
    <tr class = "title">
        <td width = 30>번호</td>
        <td width = 100>캠핑장이름</td>
        <td width = 200>전화번호</td>
        <td width = 200>주소</td>
        <td width = 80 >삭제</td>
    </tr>
    
    <tr class="row">
        <td></td>
        <td onclick="location.href='/camp/read?cid='"></td>
        <td></td>
        <td></td>
        <td><button class="del" cid=>삭제</button></td>
    </tr>
    
</script>

<script>
    getCamp();
    function getCamp(){
      $.ajax({
        type: "get",
        dataType : "json",
        url:"/camp/list",
        success:function(data){
          var template = Handlebars.compile($("#temp").html());
          $("#tbl").html(template(data));
        }
      })
    }

    getCamp();
    $("#tbl").on("click", ".row .del", function(){
        var cid=$(this).attr("cid");
        if(!confirm(`${cid}를(을) 삭제하실래요?`)) return;
        location.href='/camp/delete?cid=' + cid;
    });
</script>

캠핑장 목록

/* 캠핑장목록 */
router.get('/list', function(req, res, next) {
var sql= 'select * from tbl_camp order by cid desc';
db.get().query(sql, function(err,rows){
    res.send(rows);
});
});

DB에서 캠핑장정보 삭제

//DB에서 캠핑장정보 삭제
router.get('/delete',function(req,res){
  var cid = req.query.cid;
  var sql = 'delete from tbl_camp where cid=?';
  db.get().query(sql, [cid], function(err,rows){
      res.redirect('/');
  });
});

캠핑장등록 버튼은 /camp/insert로 이어진다.
캠핑장 이름에 링크로 연결해서 캠핑장 정보페이지로 이동하게 되어있다.
여기서 삭제 버튼을 누르면 캠핑장이 삭제가된다. 하지만 자식이있는경우 ( 시설물이나스타일이존재하는경우)에는 삭제할수가없다. 스타일, 시설물들을 삭제한후에야 등록할수있다.

캠핑장목록

2. 캠핑장 등록

메인페이지 에서 왼쪽위 캠핑장을 등록하는 페이지이다. insert.ejs

<form name = "frm" method ="post" action ="insert">
    <table>
        <tr>
            <td width=100 class= "title">캠핑장이름</td>
            <td width=500><input type ="text" name = "name"></td>
        </tr>
        <tr>
            <td width=100 class= "title">캠핑장전화</td>
            <td width=500><input type ="text" name = "tel"></td>
        </tr>
        <tr>
            <td width=100 class= "title">캠핑장주소</td>
            <td width=500><input type ="text" name = "address"></td>
        </tr>
    </table>
    <div id = "buttons">
        <input type ="submit" value="등록" class ="button">
        <input type ="reset" value="취소" class ="button">
        <input type ="button" value="목록" class ="button" onclick="location.href='/'">
    </div>
</form>
<script>
    $(frm).on("submit",function(e){
        e.preventDefault();
        var name = $(frm.name).val();
        var tel= $(frm.tel).val();
        var address = $(frm.address).val();
        if(name==""){
            alert("캠팡장이름을 입력하세요!");
            $(frm.name).focus();
        }else if(tel ==""){
            alert("캠팡장 전화번호를 입력하세요!");
            $(frm.tel).focus();
        }else if(address ==""){
            alert("캠팡장 전화번호를 입력하세요!");
            $(frm.address).focus();
        }else {
            if(!confirm(`${name} | ${tel} | ${address} 등록?`)) return;
            frm.submit();
        }
    });
</script>

DB에 캠핑장등록

//DB에 캠핑장등록
router.post('/insert',function(req,res){
  var name = req.body.name;
  var tel = req.body.tel;
  var address = req.body.address;
  var sql ='insert into tbl_camp(name,tel,address) values(?,?,?)';
  db.get().query(sql, [name,tel,address], function(err,rows){
      res.redirect('/');
  });
});

/camp/insert/ 페이지가 캠핑장 등록페이지이다.

캠핑장등록

3. 캠핑장정보

메인페이지에서 캠핑장이름을 누르게되면 나오는 캠핑장 정보 페이지이다. 여기서는 캠핑장 정보를 먼저 출력하게되고 다음에는 스타일, 시설물이 보여지게된다. 캠핑장 정보는 수정을 할수있고, 스타일과 시설물은 각각 등록과 삭제가 가능핟.

먼저 캠핑장 정보부터 보자.

캠핑장 정보 ```js

script
```js
 //캠핑장 정보
    $(frm).on("submit",function(e){
        e.preventDefault();
        var name = $(frm.name).val();
        var tel= $(frm.tel).val();
        var address = $(frm.address).val();
        if(name==""){
            alert("캠팡장이름을 입력하세요!");
            $(frm.name).focus();
        }else if(tel ==""){
            alert("캠팡장 전화번호를 입력하세요!");
            $(frm.tel).focus();
        }else if(address ==""){
            alert("캠팡장 전화번호를 입력하세요!");
            $(frm.address).focus();
        }else {
            if(!confirm(`${name} | ${tel} | ${address} 수정?`)) return;
            frm.submit();
        }
    });

-> 캠핑장 정보를 받아서 보여주고 수정버튼을 누르게되면 submit되어서 수정된다

// 캠핑장 정보페이지
router.get('/read', function(req,res){
    var cid=req.query.cid;
    var sql = 'select * from tbl_camp where cid=?';
    db.get().query(sql,[cid],function(err,rows){
        res.render('index', {title:'캠핑장정보', pageName:'read.ejs', vo:rows[0]})
    });
});

//DB 캠핑장정보
router.post('/update', function(req,res){
    var cid =req.body.cid;
    var name = req.body.name;
    var tel = req.body.tel;
    var address = req.body.address;
    var sql = 'update tbl_camp set name=?, tel=?, address=? where cid=?';
    db.get().query(sql,[name,tel,address,cid],function(err,rows){
        res.redirect('/');
    });
});

mysql로 값을 읽어오고 update 해주는 부분이다.

스타일 등록 ```js


스타일

- 스타일 삭제버튼과 등록, 그리고 목록출력부분 
```js
var cid=$(frm.cid).val();

    //스타일삭제 버튼을 클릭한경우
    $("#style").on("click", ".small", function(){
        var sid = $(this).attr("sid");
        if(!confirm(`${cid} | ${sid} 삭제? `)) return;
            $.ajax({
                type: "post",
                url: "/style/camp/delete",
                data: {cid:cid, sid:sid},
                success:function(){
                    alert("삭제성공!");
                    getStyle();
                }
            });
    });
    //스타일 등록 버튼을 클릭한 경우
    $("#style_insert").on("click", function(){
        var sid=$("#style_all").val();
        if(!confirm(`${cid} | ${sid} 등록?`)) return;
        $.ajax({
            type: "post",
            url: "/style/camp/insert",
            data: {cid:cid, sid:sid},
            success:function(){
                alert("등록성공!");
                getStyle();
            }
        });
    });

    //캠핑장별 스타일출력
    getStyle();
      function getStyle(){
        $.ajax({
            type: "get",
            dataType : "json",
            url:"/style/camp",
            data: {cid:cid},
            success:function(data){
            var template = Handlebars.compile($("#temp_style").html());
            $("#style").html(template(data));
            }
        });
    }
    
      //스타일목록
      $.ajax({
        type: "get",
        dataType : "json",
        url:"/style/list",
        success:function(data){
          var template = Handlebars.compile($("#temp_style_all").html());
          $("#style_all").html(template(data));
        }
      });

styl.js

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

var db=require('../db');
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: '스타일관리',pageName:'style.ejs'});
});

// 스타일 목록
router.get('/list', function(req,res){
  var sql = 'select * from tbl_style';
  db.get().query(sql,function(err,rows){
    res.send(rows);
  });
});

//캠핑장별 스타일
router.get('/camp', function(req,res){
  var cid= req.query.cid;
  var sql ='select * from view_style where cid=?';
  db.get().query(sql, [cid], function(err, rows){
    res.send(rows);
  });
});

//DB에 캠핑장별 스타일 등록
router.post('/camp/insert', function(req,res){
  var cid= req.body.cid;
  var sid = req.body.sid;
  var sql ='insert into tbl_camp_style(cid,sid) values(?,?)';
  db.get().query(sql, [cid,sid],function(err,rows){
    res.sendStatus(200);
  });
});

//DB에 캠핑장별 스타일 삭제
router.post('/camp/delete', function(req,res){
  var cid= req.body.cid;
  var sid = req.body.sid;
  var sql ='delete from tbl_camp_style where cid=? and sid=?';
  db.get().query(sql, [cid,sid],function(err,rows){
    res.sendStatus(200);
  });
});

module.exports = router;  

시설물 정보 ```js


시설물

- 시설물 삭제버튼과 등록, 그리고 목록출력부분 
```js
//시설물 등록 버튼을 클릭한 경우
    $("#facility_insert").on("click", function(){
        var fid=$("#facility_all").val();
        if(!confirm(`${cid} | ${fid} 등록?`)) return;
        $.ajax({
            type: "post",
            url: "/facility/camp/insert",
            data: {cid:cid, fid:fid},
            success:function(){
                alert("시설물등록성공!");
                getFacility();
            }
        });
    });
      //시설물삭제 버튼을 클릭한경우
      $("#facility").on("click", ".big", function(){
        var fid = $(this).attr("fid");
        if(!confirm(`${cid} | ${fid} 삭제? `)) return;
            $.ajax({
                type: "post",
                url: "/facility/camp/delete",
                data: {cid:cid, fid:fid},
                success:function(){
                    alert("삭제성공!");
                    getFacility();
                }
            });
    });

      //캠핑장별 시설물출력
      getFacility();
      function getFacility(){
            $.ajax({
                type: "get",
                dataType : "json",
                url:"/facility/camp",
                data: {cid:cid},
                success:function(data){
                var template = Handlebars.compile($("#temp_facility").html());
                $("#facility").html(template(data));
                }
            });
        }


      //시설물목록
      $.ajax({
        type: "get",
        dataType : "json",
        url:"/facility/list",
        success:function(data){
          var template = Handlebars.compile($("#temp_facility_all").html());
          $("#facility_all").html(template(data));
        }
      });

facility.js

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

var db=require('../db');
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: '시설물관리', pageName:'facility.ejs'});
});

// 시설물 목록
router.get('/list', function(req,res){
  var sql = 'select * from tbl_facility';
  db.get().query(sql,function(err,rows){
    res.send(rows);
  });
});

//특정캠프의 시설물
router.get('/camp',function(req,res){
  var cid = req.query.cid;
  var sql = 'select * from view_facility where cid=?;';
  db.get().query(sql,[cid],function(err,rows){
    res.send(rows);
  });
});

//DB에 캠핑장별 시설물 등록
router.post('/camp/insert', function(req,res){
  var cid= req.body.cid;
  var fid = req.body.fid;
  var sql ='insert into tbl_camp_facility(cid,fid) values(?,?)';
  db.get().query(sql, [cid,fid],function(err,rows){
    res.sendStatus(200);
  });
});


//DB에 캠핑장별 스타일 삭제
router.post('/camp/delete', function(req,res){
  var cid= req.body.cid;
  var fid = req.body.fid;
  var sql ='delete from tbl_camp_facility where cid=? and fid=?';
  db.get().query(sql, [cid,fid],function(err,rows){
    res.sendStatus(200);
  });
});

module.exports = router;  

캠핑장정보

++ 더 추가될 예정이다. (주말에 해보자.)

스타일관리의 삭제, 수정, 등록
시설물관리의 삭제,수정,등록

Twitter Facebook LinkedIn

KangKkaem

HTML - 캠핑장정보등록

1. 메인페이지

2. 캠핑장 등록

3. 캠핑장정보

공유하기

댓글남기기

참고

CSS - Grid

CSS - Flex

[오류]Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use.

git - github에 파일올리고 내려받기

캠핑장번호
캠핑장이름
캠핑장전화
캠핑장주소