개발하는 고양이 오이

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

PHP

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

Cucum 2022. 4. 4. 12:24

안녕하세요.

PHP와 MSSQL을 이용해서 동적 웹페이지를 만들 일이 있었는데, 인터넷에선 MYSQL을 이용한 글이 많더라고요.

 

제가 참고한 글은 다음과 같습니다.

https://abc1211.tistory.com/347?category=969354 

 

php mysql ajax bootstrapModal을 이용해서 동적 웹페이지 만들기1 (조회- 리스트 뿌리기)

php mysql ajax  bootstrapModal을 이용해서 동적 웹페이지 만들기1 (조회- 리스트 뿌리기) #mysql (tbl_employee) #화면 자세히 버튼을 클릭하면 부트스트랩 모달창이 뜨면서 데이터를 뿌려준다. #index.php..

abc1211.tistory.com

 

저는 MYSQL이 아닌 MSSQL을 이용해야했기 때문에 글들을 참고해서 DB 연결부분만 MSSQL로 바꿔줬습니다.

참고하실 분이 있으시면 참고 바랍니다.

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

 

mssql(tblCalendar)

- 구조

최종 화면

index.php

이 중 현재 게시물에선 실제로 보여지는 화면, 즉 SELECT 부분의 코드를 보여드리겠습니다.

 

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:700px;">
    <h3 align="center">회의실 예약 현황</h3>
    <br>
    <div class="talbe-responsive">
        <!-- 금일 및 과거 예약 확인 버튼 -->
        <div align="left">
            <button type="button" name="select" id="select" data-toggle="modal" align = "left"
                    data-target="#today_data_Modal" class="view_today_data btn btn-info">금일 예약 확인</button>

            <button type="button" name="past" id="past" data-toggle="modal" align = "rignt"
                data-target="#past_data_Modal" class="view_past_data btn">과거 예약 확인</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>
                            <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="today_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" id="employee_today_detail">
            </div>

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

<!-- 과거 예약 확인 모달 -->
<div id="past_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" id="employee_past_detail">
            </div>

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

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

    // 금일 예약 확인 버튼 눌렀을 때
    $(document).on('click', '.view_today_data', function(){
        var employee_id = $(this).attr("id");

        $.ajax({
            //selectToday.php 로 가서
            url:"selectToday.php",
            method:"POST",

            //위에서 클릭한 employee_id 데이터를 url로 넘겨주고
            data:{employee_id:employee_id},

            success:function(data){
                //성공하면 select.php에서 뿌린 데이터를 data 변수에 담아 모달-바디에 붙여라
                $('#employee_today_detail').html(data);
                $('#today_data_Modal').modal("show");
            }
        });
    });

    // 과거 예약 확인 버튼 눌렀을 때
    $(document).on('click', '.view_past_data', function(){
        var employee_id = $(this).attr("id");

        $.ajax({
            //selectPastDay.php 로 가서
            url:"selectPastDay.php",
            method:"POST",

            //위에서 클릭한 employee_id 데이터를 url로 넘겨주고
            data:{employee_id:employee_id},

            success:function(data){
                //성공하면 select.php에서 뿌린 데이터를 data 변수에 담아 모달-바디에 붙여라
                $('#employee_past_detail').html(data);
                $('#past_data_Modal').modal("show");
            }
        });
    });
});
</script>

 

 

select.php

<?php

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

    $output .='
        <div class="table-responsive">
            <table class="table table-bordered">';
            while($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) 
            {
                $output .='
                    <tr>
                        <td width ="30%"><lable>회의 날짜</lable></td>
                        <td width ="70%"><lable>'.date_format($row["MeetingDate"], "Y-m-d").'</lable></td>
                    </tr>

                    <tr>
                        <td width ="30%"><lable>회의명</lable></td>
                        <td width ="70%"><lable>'.$row["MeetingTitle"].'</lable></td>
                    </tr>

                    <tr>
                        <td width ="30%"><lable>회의 시작 시간</lable></td>
                        <td width ="70%"><lable>'.$row["StartTime"].'</lable></td>
                    </tr>

                    <tr>
                        <td width ="30%"><lable>회의 종료 시간</lable></td>
                        <td width ="70%"><lable>'.$row["EndTime"].'</lable></td>
                    </tr>

                    <tr>
                        <td width ="30%"><lable>회의 참여자</lable></td>
                        <td width ="70%"><lable>'.$row["MeetingName"].'</lable></td>
                    </tr>
                ';

            }
    $output .= "</table></div>";
    echo $output;
}
?>

 

selectToday.php - 상단의 금일 예약 확인 버튼 부분입니다.

<?php

// 금일 예약 확인
if(isset($_POST["employee_id"]))
{
    $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');
       
    $conn = sqlsrv_connect($DB_IP, $DB_ConnectInfo);
 
    // 오늘 날짜만 SELECT
    $query = "SELECT * FROM tblCalendar WHERE MeetingDate = CONVERT(date,GETDATE()) ORDER BY StartTime";
    
    $result = sqlsrv_query($conn, $query);

    $output .='
    <div class="table-responsive">
        <table class="table table-bordered">';
        $i = 0;
        while($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) 
        {
            $output .='
                <tr>
                    <th><lable>'.++$i.'</lable></td>
                </tr>
                <tr>
                    <td width ="30%"><lable>회의명</lable></td>
                    <td width ="70%"><lable>'.$row["MeetingTitle"].'</lable></td>
                </tr>

                <tr>
                    <td width ="30%"><lable>회의 시작 시간</lable></td>
                    <td width ="70%"><lable>'.$row["StartTime"].'</lable></td>
                </tr>

                <tr>
                    <td width ="30%"><lable>회의 종료 시간</lable></td>
                    <td width ="70%"><lable>'.$row["EndTime"].'</lable></td>
                </tr>

                <tr>
                    <td width ="30%"><lable>회의 참여자</lable></td>
                    <td width ="70%"><lable>'.$row["MeetingName"].'</lable></td>
                </tr>
            ';

        }
    $output .= "</table></div>";
    echo $output;
}
?>

 

 

selectPastDay.php - 상단의 과거 예약 확인 버튼 부분입니다.

<?php

// 과거 예약 확인
if(isset($_POST["employee_id"]))
{
    $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');
       
    $conn = sqlsrv_connect($DB_IP, $DB_ConnectInfo);
 
    // 과거 날짜
    $query = "SELECT * FROM tblCalendar WHERE MeetingDate < CONVERT(date,GETDATE()) ORDER BY MeetingDate DESC, StartTime DESC";
    
    $result = sqlsrv_query($conn, $query);

    $output .='
    <div class="table-responsive">
        <table class="table table-bordered">';
        $i = 0;
        while($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) 
        {
            $output .='
                <tr>
                    <th><lable>'.++$i.'</lable></td>
                </tr>
                <tr>
                    <td width ="30%"><lable>회의 날짜</lable></td>
                    <td width ="70%"><lable>'.date_format($row['MeetingDate'], 'Y-m-d').'</lable></td>
                </tr>
                
                <tr>
                    <td width ="30%"><lable>회의명</lable></td>
                    <td width ="70%"><lable>'.$row["MeetingTitle"].'</lable></td>
                </tr>

                <tr>
                    <td width ="30%"><lable>회의 시작 시간</lable></td>
                    <td width ="70%"><lable>'.$row["StartTime"].'</lable></td>
                </tr>

                <tr>
                    <td width ="30%"><lable>회의 종료 시간</lable></td>
                    <td width ="70%"><lable>'.$row["EndTime"].'</lable></td>
                </tr>

                <tr>
                    <td width ="30%"><lable>회의 참여자</lable></td>
                    <td width ="70%"><lable>'.$row["MeetingName"].'</lable></td>
                </tr>
            ';

        }
    $output .= "</table></div>";
    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
3. [PHP] MSSQL ajax bootstrapModal을 이용해서 동적 웹페이지 만들기3(수정) - 회의실 예약  (0) 2022.04.21
2. [PHP] MSSQL ajax bootstrapModal을 이용해서 동적 웹페이지 만들기2(추가) - 회의실 예약  (0) 2022.04.18
'PHP' Related Articles more