개발하는 고양이 오이

4. [PHP] MSSQL ajax bootstrapModal을 이용해서 동적 웹페이지 만들기4(삭제) - 회의실 예약 본문

PHP

4. [PHP] MSSQL ajax bootstrapModal을 이용해서 동적 웹페이지 만들기4(삭제) - 회의실 예약

Cucum 2022. 4. 22. 08:49

2022.04.21 - [PHP] - PHP MSSQL ajax bootstrapModal을 이용해서 동적 웹페이지 만들기3(수정) - 회의실 예약

 

PHP MSSQL ajax bootstrapModal을 이용해서 동적 웹페이지 만들기3(수정) - 회의실 예약

2022.04.18 - [PHP] - PHP MSSQL ajax bootstrapModal을 이용해서 동적 웹페이지 만들기2(추가) - 회의실 예약 PHP MSSQL ajax bootstrapModal을 이용해서 동적 웹페이지 만들기2(추가) - 회의실 예약 https://dhd..

dhdl-it.tistory.com

 

지난번에 MSSSQL ajax bootstrapModal을 이용하여 조회, 추가, 삭제를 작성했고, 이번엔 삭제을 작성해보고자 합니다.

 

(실제 사용중인 데이터 값들이므로 예약 현황, DB IP, ID, PWD, NAME 등 중요 자료들은 가렸습니다!)

 

mssql(tblCalendar)

- 구조

mssql의 테이블 구조

최종 화면

index.php

'삭제' 버튼 클릭 시)

'삭제' 버튼 클릭 시 나타나는 confirm 창

 

현재 게시물에선 '삭제' 하는 화면, 즉 DELETE 부분의 코드를 보여드리겠습니다.

index.php

<?php
    //db연결
    $DB_IP = "";	// 실제 IP주소값
    $DB_ID = "";	// 실제 DB ID값
    $DB_PWD = "";	// 실제 DB PW값
    $DB_NAME = "";	// 실제 DB Name값
    $DB_ConnectInfo = array("UID"=>$DB_ID, "PWD"=>$DB_PWD, "Database"=>$DB_NAME, "CharacterSet" => "UTF-8");

    date_default_timezone_set('Asia/Seoul');
    
    $conn = sqlsrv_connect($DB_IP, $DB_ConnectInfo);

    $query = "SELECT * FROM tblCalendar WHERE MeetingDate >= CONVERT(date,GETDATE()) ORDER BY MeetingDate, StartTime";		// 오늘 날짜 이후의 값들 SELECT

    $result = sqlsrv_query($conn, $query);
?>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
</br></br>
<div class="container" style = "width:800px;">
    <h3 align="center">회의실 예약 현황</h3>
    <br>
    <div class="talbe-responsive">       
        <!-- 추가 버튼 -->
        <div align="right">
            <button type="button" name="add" id="add" data-toggle="modal"
                    data-target="#add_data_Modal" class="btn btn-success">추가</button>
        </div>
        
        <br>
        <div id="employee_table">
            <table class="table table-bordered">
                <tr>
                    <th width="15%">회의 날짜</th>
                    <th width="24%">회의명</th>
                    <th width="13%">시작</th>
                    <th width="13%">종료</th>
                    <th width="20%">회의 참석자</th>
                    <th width="8%">수정</th>
                    <th width="7%">삭제</th>
                </tr>

                <?php
                    while($row=sqlsrv_fetch_array($result))
                    {
                ?>
                        <tr>                 
                            <td><?php echo date_format($row['MeetingDate'], 'Y-m-d'); ?> </td>	 	<!--오늘 이전 날짜는 선택할 수 없도록 최소값(min) 제한 -->
                            <td><?php echo $row["MeetingTitle"]; ?> </td>
                            <td><?php echo $row["StartTime"]; ?> </td>
                            <td><?php echo $row["EndTime"]; ?> </td>
                            <td><?php echo $row["MeetingName"]; ?> </td>
                            <td><input type="button" name ="edit_data" value="수정" id="<?php echo $row["id"]; ?>" class="edit_data btn btn-warning" /></td>
                            <td><input type="button" name ="delete_data" value="삭제" id="<?php echo $row["id"]; ?>" class="delete_data btn" /></td>
                        </tr>
                <?php
                    }
                ?>
            </table>
        </div>
    </div>
<div>
</body>
</html>

<!-- 데이터 추가 모달 -->
<div id="add_data_Modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 모달 헤더 -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">회의실 예약 내역 추가 및 수정</h4>
            </div>

            <!-- 모달 바디 -->
            <div class="modal-body">
                <form method="post" id="insert_form">
                    <label>회의 날짜</label>
                    <br />
                    <input type="date" name="MeetingDate" id="MeetingDate" min="<?= date('Y-m-d'); ?>">
                    <br /><br />
                    <label>회의명</label>
                    <input type="text" name="MeetingTitle" id="MeetingTitle" class="form-control" />      
                    <br />
                    <label>회의 시작 시간</label>
                    <br />
                    <input type="time" name="StartTime" id="StartTime" min="08:00" max="18:00" step="1800"/>
                    <br /><br />
                    <label>회의 종료 시간</label>
                    <br />
                    <input type="time" name="EndTime" id="EndTime" min="08:00" max="18:00" step="1800"/>
                    <br />
                    <br />
                    <label>회의 참가자</label>
                    <input type="text" name="MeetingName" id="MeetingName" class="form-control" />
                    <br />
                    <input type="hidden" name="employee_id" id="employee_id" />
                    <input type="submit" name ="insert" id="insert" value="추가" class="btn btn-success" />
                </form>
            </div>

            <!-- 모달 풋터 -->
            <div class="modal-footer">
                <button type="button" class="close_btn btn btn-default" data-dismiss="modal">닫기</button>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function(){

    // 모달 창에서 추가 버튼 눌렀을 때
    $('#insert_form').on('submit',function(event){

        event.preventDefault();
        if(!$('#MeetingDate').val()){
            alert("날짜를 선택해주세요.");
        }
        else if($('#MeetingTitle').val()=='')
        {
            alert("회의명을 입력해주세요");
        }
        else if($('#StartTime').val()=='')
        {
            alert("회의 시작 시간을 입력해주세요");
        }else if($('#EndTime').val()=='')
        {
            alert("회의 종료 시간을 입력해주세요");
        }else if($('#MeetingName').val()=='')
        {
            alert("회의 참가자를 입력해주세요");
        }else
        {
            $.ajax({
                url:"insert.php",
                method:"POST",
                data:$('#insert_form').serialize(),
                success:function(data){
                    $('#insert_form')[0].reset();
                    $('#add_data_Modal').modal('hide');
                    // window.location.reload();
                    $('#employee_table').html(data);
                }
            })
        }
    });
    
    // 모달 창에서 수정 버튼 눌렀을 때
    $(document).on('click','.edit_data',function(){
        var employee_id = $(this).attr("id");
        
        $.ajax({
            url:"fetch.php",
            method:"POST",
            data:{employee_id:employee_id},
            dataType:"json",
            success:function(data){
                
                var MDate = data.MeetingDate.date.substring(0, 10);     // data.MeetingDate.date 가 날짜 시분초 모두 나와서 날짜까지 자르기
                $('#MeetingDate').val(MDate); 
                $('#MeetingTitle').val(data.MeetingTitle);
                $('#StartTime').val(data.StartTime);
                $('#EndTime').val(data.EndTime);
                $('#MeetingName').val(data.MeetingName);
                $('#employee_id').val(data.id);
                $("#insert").val("수정");
                $('#add_data_Modal').modal('show');
            }
        });
    });
    
    // 닫기 버튼 눌렀을 때 reload
    $(document).on('click', '.close_btn', function(){
        $.ajax({
            success:function(data){
                window.location.reload();
            }
        });
    });
    
    // 모달 창에서 삭제 버튼 눌렀을 때 
    $(document).on('click','.delete_data',function(){
        var result = confirm("정말 삭제하시겠습니까?");
        if (result) {
            var employee_id = $(this).attr("id");

            $.ajax({
                //delete.php 로 가서
                url:"delete.php",
                method:"POST",
                data:{employee_id:employee_id},
                success:function(data){
                    $('#employee_table').html(data);
                }
            });
        }
        else {
            $.ajax({
            success:function(data){
                window.location.reload();
            }
        });
        }
    });
});
</script>

 

 

delete.php

<?php
if(isset($_POST["employee_id"]))
{
    $output = '';

    $DB_IP = "";		// 실제 DB IP값
    $DB_ID = "";		// 실제 DB ID값
    $DB_PWD = "";		// 실제 DB PW값
    $DB_NAME = "";		// 실제 DB Name값
    $DB_ConnectInfo = array("UID"=>$DB_ID, "PWD"=>$DB_PWD, "Database"=>$DB_NAME, "CharacterSet" => "UTF-8");
 
    date_default_timezone_set('Asia/Seoul');
       
    $connect = sqlsrv_connect($DB_IP, $DB_ConnectInfo);

    $query = "DELETE FROM tblCalendar WHERE id = '".$_POST["employee_id"]."'";
    
    if (sqlsrv_query($connect, $query)) {

        $output .= '<label class="text-success">삭제 완료</label>';

        $select_query = "SELECT * FROM tblCalendar 
                            WHERE MeetingDate >= CONVERT(date,GETDATE()) ORDER BY MeetingDate, StartTime";
        $result = sqlsrv_query($connect, $select_query);

        $output .= '
            <table class="table table-bordered">
                <tr>
                    <th width="15%">회의 날짜</th>
                    <th width="24%">회의명</th>
                    <th width="13%">시작</th>
                    <th width="13%">종료</th>
                    <th width="20%">회의 참석자</th>
                    <th width="8%">수정</th>
                    <th width="7%">삭제</th>
                </tr>
            ';

        while ($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC))  
        {
            $output.='
                <tr>
                    <td>'.date_format($row['MeetingDate'], 'Y-m-d').'</td>
                    <td>'.$row["MeetingTitle"].'</td>
                    <td>'.$row["StartTime"].'</td>
                    <td>'.$row["EndTime"].'</td>
                    <td>'.$row["MeetingName"].'</td>
                    <td><input type="button" name="edit" value="수정" id="'.$row["id"].'" class="edit_data btn btn-warning" /></td>
                    <td><input type="button" name="view" value="삭제" id="'.$row["id"].'"class="view_data btn" /></td>
                </tr>    
            ';
        }
            $output .= '</table>';
    }
    echo $output;
}
?>

 

감사합니다.

저작자표시 (새창열림)

'PHP' 카테고리의 다른 글

6. [PHP] DB와 연동된 SelectBox(셀렉트박스) 동적 구성 / SelectBox 선택에 따라 다음 SelectBox 값 변화  (0) 2022.05.19
5. [PHP] Modal창에서 ESC 시 Modal창 닫기  (0) 2022.04.25
3. [PHP] MSSQL ajax bootstrapModal을 이용해서 동적 웹페이지 만들기3(수정) - 회의실 예약  (0) 2022.04.21
2. [PHP] MSSQL ajax bootstrapModal을 이용해서 동적 웹페이지 만들기2(추가) - 회의실 예약  (0) 2022.04.18
1. [PHP] MSSQL ajax bootstrapModal을 이용해서 동적 웹페이지 만들기1(조회) - 회의실 예약  (0) 2022.04.04
'PHP' Related Articles more