개발하는 고양이 오이

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

PHP

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

Cucum 2022. 4. 21. 09:42

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

 

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

https://dhdl-it.tistory.com/19 PHP MSSQL ajax bootstrapModal을 이용해서 동적 웹페이지 만들기1(조회) - 회의실 예약 안녕하세요. PHP와 MSSQL을 이용해서 동적 웹페이지를 만들 일이 있었는데, 인터넷에선 MY..

dhdl-it.tistory.com

 

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

 

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

mssql(tblCalendar)

- 구조

mssql의 테이블 구조

최종 화면

index.php

 

'수정' 버튼 클릭 시)

'수정' 버튼 클릭 시 나타나는 모달

 

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

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();
            }
        });
    });
});
</script>

* 마지막 부분의 '닫기 버튼 눌렀을 때 reload' 를 해준 이유는 수정 모달이 추가 모달을 그대로 이용하는것이기 때문에 

reload를 해주지 않으면 '수정' 버튼을 눌렀다가 '닫기' 후 '추가' 버튼을 누르면 '수정' 내역이 그대로 입력되어서 보이기 때문에 reload를 해줬습니다.

 

 

fetch.php

<?php
    $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);
    
    if(isset($_POST["employee_id"]))  
    {
        $query = "SELECT * FROM tblCalendar WHERE id = '".$_POST["employee_id"]."'";  
        $result = sqlsrv_query($connect, $query);
        $row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC);
        
        echo json_encode($row);
    }
?>

 

 

insert.php

<?php
if(!empty($_POST)){
    $msg = '';
    $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);

    $id = $_POST["employee_id"];;
    $MeetingDate = $_POST["MeetingDate"];
    $MeetingTitle = $_POST["MeetingTitle"];
    $StartTime = $_POST["StartTime"];
    $EndTime = $_POST["EndTime"];
    $MeetingName = $_POST["MeetingName"];
     
    if($id != '')         // employee_id 가 빈 값이 아니면
    {
    	$query = "UPDATE tblCalendar SET MeetingDate = '$MeetingDate', MeetingTitle = '$MeetingTitle', StartTime = '$StartTime', EndTime = '$EndTime', MeetingName = '$MeetingName', InsertDate = CONVERT(CHAR(19), GETDATE(), 20) WHERE id = '$id'";

     	$msg = '수정 완료';
     }
     else {          // employee_id 가 빈 값이라면
     	$query = "INSERT INTO tblCalendar(MeetingDate, MeetingTitle, StartTime, EndTime, MeetingName, InsertDate) VALUES ('$MeetingDate', '$MeetingTitle', '$StartTime', '$EndTime', '$MeetingName', CONVERT(CHAR(19), GETDATE(), 20))";

      	$msg = '추가 완료.';
     }
        
    if (sqlsrv_query($connect, $query)) {
        $output .= '<label class="text-success">'.$msg.'</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
4. [PHP] MSSQL ajax bootstrapModal을 이용해서 동적 웹페이지 만들기4(삭제) - 회의실 예약  (0) 2022.04.22
2. [PHP] MSSQL ajax bootstrapModal을 이용해서 동적 웹페이지 만들기2(추가) - 회의실 예약  (0) 2022.04.18
1. [PHP] MSSQL ajax bootstrapModal을 이용해서 동적 웹페이지 만들기1(조회) - 회의실 예약  (0) 2022.04.04
'PHP' Related Articles more