Terry Very Good

[OSPNAVI pjt] 일일점검 시 특이사항을 이력으로 볼 수 있도록 하는 법(이력 수정 삭제까지 가능) 본문

프로그래밍/(WEB) PHP & JAVASCRIPT

[OSPNAVI pjt] 일일점검 시 특이사항을 이력으로 볼 수 있도록 하는 법(이력 수정 삭제까지 가능)

테리베리 2020. 12. 19. 22:56
728x90
반응형

수행 기능 사진

<일일점검 기능(기 생성되어있던 부분)>                                     <특이사항 이력 리스트(구현하려는 부분)>

사용한 소스

1. /cons_card.php - 일일점검 수행기능 / 특이사항 리스트 구현(수정,삭제 기능)
2. /ajax/ajax_cons_card_manager.php - 일일점검 등록 시 특이사항 리스트 DB에 등록 / 수정,삭제 Data 받아와 수행

 

[구현 단계]

1. DB 추가 생성

기존 DB Table(cons_datalist)의 Data 중 '중복되지않는 단일값'을 address로 잡았다.(=$requestParam_arr["seq"])
그리고 특이사항(메모) 담을 Table(cons_momo)을 아래와같이 생성.

CREATE TABLE cons_memo(
seq int(11) not null primary key auto_increment,
address varchar(100) default '',
memo varchar(200) default '',
insert_time datetime default '1000-01-01 00:00:00'
);

 

2. 일일점검 '변경' 클릭 시, 특이사항 data를 ajax로 넘겨주고, ajax.php에서 DB 등록

cons_card.php 내부

    - HTML(담당자 일일점검 부분)

<form name="cons_manager_form" method="post" action="ajax/cons_manager_edit.php">
<input type="hidden" name="seq" value="<?=$requestParam_arr["seq"];?>">
<input type="hidden" name="manager" value="<?=$bldg_master_arr["cons_56"];?>">
<div class="modal fade" id="modal-cons_000">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header bg-aqua">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">담당자 일일점검</h4>
			</div>

			<div class="modal-body">
				<div class="col-xs-3" style="padding:0px;height:40px">
					<input type="text" class="form-control text-center" style="border:0px;background-color:#FFF" value="진도율(%)" readonly>
				</div>
				<div class="col-xs-9 input-group" style="padding:0px;height:40px;">
					<span class="input-group-btn">
                  <input type="number" class="form-control" id="cons_15_day" value="<?=$bldg_master_arr["cons_15"];?>" max="100" min="0">

					</span>
				</div>
			</div>
         
         <div class="modal-body">
				<div class="col-xs-3" style="padding:0px;height:40px">
					<input type="text" class="form-control text-center" style="border:0px;background-color:#FFF" value="공사완료여부" readonly>
				</div>
				<div class="col-xs-9 input-group" style="padding:0px;height:40px;">
					<span class="input-group-btn">

                  <select name="manager_name_day" id="manager_name_day" class="form-control" style="width:99%" onKeyUP="bldg_manager_change()">
								<option value=''>선택</option>
<?
$arr_14 = array();

$arr_14["select_01"] = "완료";
$arr_14["select_02"] = "진행";
$arr_14["select_03"] = "중단";

foreach($arr_14 as $key => $val)
{
	if($bldg_master_arr["cons_14"] == $val)		$checked = "selected";
	else										$checked = "";
	
	echo "<option value='".$val."' ".$checked.">".$val;
} // foreach($arr as $key => $val)
?>
							</select>
                  
         
					</span>
				</div>
			</div>
         
         <div class="modal-body">
				<div class="col-xs-3" style="padding:0px;height:40px">
					<input type="text" class="form-control text-center" style="border:0px;background-color:#FFF" value="특이사항" readonly>
				</div>
				<div class="col-xs-9 input-group" style="padding:0px;height:40px;">
					<textarea id="regist18_day" style="width:100%;height:100px"><?=$bldg_master_arr["cons_56"];?></textarea>
				</div>
			</div>
         
			<div class="modal-body" style="display:none;">
				<div class="col-xs-3" style="padding:0px;height:40px">
					<input type="text" class="form-control text-center" style="border:0px;background-color:#FFF" value="점검횟수(회)" readonly>
				</div>
				<div class="col-xs-9 input-group" style="padding:0px;height:40px;">
					<span class="input-group-btn">
						<input type="number" class="form-control" id="regist17_day" value="<?=$bldg_master_arr["cons_08"];?>" min="0">

					</span>
				</div>
			</div>
         <div class="modal-body" style="display:none;">
				<div class="col-xs-3" style="padding:0px;height:40px">
					<input type="text" class="form-control text-center" style="border:0px;background-color:#FFF" value="최종점검일" readonly>
				</div>
				<div class="col-xs-9 input-group" style="padding:0px;height:40px;">
					<span class="input-group-btn">
                  <input type="text" class="form-control  input-sm input_cal" id="cals14x_day" placeholder="선택하세요" value="<?=$bldg_master_arr["cons_55"];?>">

					</span>
				</div>
			</div>

			<div class="modal-footer">
				<div class="col-xs-12 text-center">
					<button type="button" class="btn btn-primary" onClick="day_check()">변경</button>
				</div>
			</div>
		</div>
	</div>
</div>
</form>

 

    - JAVASCRIPT(담담자 일일점검 '변경' 버튼 클릭 시 수행 function)

function day_check()
{  
   let today = new Date();   

   let year = today.getFullYear(); // 년도
   let month = today.getMonth() + 1;  // 월
   let date = today.getDate();  // 날짜
   let day = today.getDay();  // 요일
   jumgum_count = 0;
   

   if(document.getElementById('regist17_day')=="")
   {
      jumgum_count= 0;
   }
   else
   {
      jumgum_count = Number(document.getElementById('regist17_day').value);
   
   }
   
   var day_1_data = document.getElementById('cons_15_day').value;  //진도율
   var day_2_data = $("#manager_name_day option:selected").val();  //공사완료여부
   var day_3_data = document.getElementById('regist18_day').value; //특이사항
   if (day_3_data == "")
   {
      dat_3_data = "특이사항 없음";
   } //if (day_3_data == "")
   var day_4_data = jumgum_count + 1; //점검횟수
   var day_5_data = year + '-' + month + '-' + date; //최종점검일
   var dataInfo = "address=<?=$requestParam_arr["seq"];?>&type=cons_12_check&cons_15="+day_1_data+"&values="+day_2_data+"&regist18="+day_3_data+"&regist17="+day_4_data+"&cals14="+day_5_data;


	ids_Req1 = newXMLHttpRequest();
	ids_Req1.onreadystatechange = managerChangeReq_day;
	ids_Req1.open("POST", "ajax/ajax_cons_card_manager.php");
	ids_Req1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	ids_Req1.send(dataInfo);
   
   
} // function day_check()

 

위와같이 구현하면, '변경' 버튼 클릭 시, ajax/ajax_cons_card_manager.php로 아래 데이터를 넘겨준다.

 

그렇다면 받아온 Data를 DB에 등록하는 부분을 만들자.

 

ajax/ajax_cons_card_manager.php 내부

    - 일일점검에서 받아온 메모 data를 DB에 추가

//일일점검 체크 부분
if($_POST['type']=='day_check') 
{
   $day_check_1 = $_POST['address'];       // 관리번호(단일값)
   $day_check_2 = $_POST['regist18'];      // 특이사항(이력으로 남을 메모)
   $day_check_3 = $_POST['cals14'];        // 일시
   if (($_POST['regist18'])=="")
      {
         $day_check_2 = "특이사항 없음!!";
      } //if (day_3_data == "")
	
	$sql = "INSERT cons.cons_memo (address, memo, insert_time) VALUES ( ? , ? , ?)";
	$sql_obj = $conn->prepare($sql);
	$sql_obj->bind_param("sss", $day_check_1, $day_check_2, $day_check_3);
	$sql_obj->execute();	

	
	$result_arr["result"] = "success";
} //if($_POST['type']=='day_check') 
//일일점검 체크 부분 끝

 

=> 여기까지 하면, 일일점검으로 작성된 메모가 DB에 올라가는 것 성공.

 

3. 특이사항 리스트 html 구현 및 수정/삭제기능 추가

cons_card.php

    - HTML(특이사항 리스트 및 수정 삭제 드롭다운 버튼)

<div class="modal-body" id="history_div" style="margin-top:20px">
	<h5 class="modal_subtit">공사장 특이사항 이력</h5>
		<div class="tab-content">
			<div class="active tab-pane" id="activity">
						<!-- Post -->
<?php
$sql = "SELECT * FROM cons.cons_memo WHERE address = ? order by insert_time desc";
$sql_obj = $conn->prepare($sql);
$sql_obj->bind_param("s", $requestParam_arr["seq"]);
$sql_obj->execute();
$result = $sql_obj->get_result();

while($row = $result->fetch_assoc())
{
	echo "
		<div class='post'>
			<div class='user-block'>
				<span class='username'>
					<div class='btn-group pull-right btn-box-tool'>
                        <button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'>
                          <i class='fa fa-gear'></i>
                        </button>
                        <ul class='dropdown-menu' style='min-width:70px'>
                          <li><a href=\"javascript:modify_memo('".$row["seq"]."','modify')\">수정</a></li>
                          <li><a href=\"javascript:delete_memo('".$row["seq"]."')\">삭제</a></li>
                        </ul>
               </div>
				</span>
				<span class='description'>".$row["insert_time"]."</span>
			</div>
			<div id='memo_div_".$row["seq"]."'>
			<p>
				".str_replace("\n","<br/>",$row["memo"])."
			</p>
			</div>
			<div id='memo_edit_".$row["seq"]."' style='display:none'>
				<textarea class='form-control input-sm' placeholder='입력하세요!' id='local_memo_".$row["seq"]."' name='local_memo_".$row["seq"]."'>".$row["memo"]."</textarea>
				
				<table id='tb_type' class='table no-border no-padding text-sm'>
				<colgroup>
					<col width='30%'>
					<col width='30%'>
					<col width='40%'>
				</colgroup>
				<tbody>
				<tr>
					<td class='text-right' style='padding:0px'>
						<button type='button' class='btn btn-info' style='width:30%;' onClick=\"memo_modify_check(".$row["seq"].")\">수정</button>
						<button type='button' class='btn btn-default' style='width:30%;' onClick=\"modify_memo(".$row["seq"].",'cancel')\">취소</button>
					</td>
				</tr>
				</tbody>
				</table>
			</div>
		</div>
	";
} // while($row = $result->fetch_assoc())
?>
		</div>
	</div>
</div>

    - javascript(수정/삭제 기능)

<script>

function modify_memo(seq, type)
{
	if(type == "modify")
	{
		$("#memo_div_"+seq).css("display","none");
		$("#memo_edit_"+seq).css("display","block");
	}
	else if(type == "cancel")
	{
		$("#memo_edit_"+seq).css("display","none");
		$("#memo_div_"+seq).css("display","block");
	} // else if(type == "cancel")
} // function modify_memo(seq)

function delete_memo(seq)
{
	if(confirm("정말로 삭제하시겠습니까?"))
	{
		var dataInfo = "type=delete_memo&memo_seq="+seq+"&address=의미없는값";
				
		ids_Req1 = newXMLHttpRequest();
		ids_Req1.onreadystatechange = memoRequest;
		ids_Req1.open("POST", "ajax/ajax_cons_card_manager.php");
		ids_Req1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		ids_Req1.send(dataInfo);
	} // if(confirm("정말로 삭제하시겠습니까?"))
} // function delete_memo(seq)

function memoRequest()
{
	if(ids_Req1.readyState == 4 && ids_Req1.status == 200 && ids_Req1.responseText)
	{
				alert("수정 및 삭제 되었습니다");
				document.location.reload();

	}
} // function managerChangeReq()

function memo_modify_check(seq)
{
	var dataInfo = "type=modify_memo&memo_seq="+seq+"&address=의미없는값&local_memo="+$("#local_memo_"+seq).val();
				
	ids_Req1 = newXMLHttpRequest();
	ids_Req1.onreadystatechange = memoRequest;
	ids_Req1.open("POST", "ajax/ajax_cons_card_manager.php");
	ids_Req1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	ids_Req1.send(dataInfo);
} // function memo_modify_check(seq)
</script>

 

ajax/ajax_cons_card_manager.php 내부

    - 수정/삭제 수행

//삭제 부분
if($_POST['type']=='delete_memo') 
{
   $day_check_3 = $_POST['memo_seq'];       // 관리번호(단일값)
	
	$sql = "DELETE FROM cons.cons_memo WHERE seq = ?";
	$sql_obj = $conn->prepare($sql);
	$sql_obj->bind_param("s", $day_check_3);
	$sql_obj->execute();	
   log_file("SQL문 들어가신다: ".$sql);
	
	$result_arr["result"] = "success";
} //if($_POST['type']=='delete_memo') 
 //삭제 부분 끝  


//수정 부분
if($_POST['type']=='modify_memo') 
{
   $day_check_3 = $_POST['memo_seq'];       // 관리번호(단일값)
   $day_check_4 = $_POST['local_memo'];     // 메모내용
	
	$sql = "UPDATE cons.cons_memo SET memo = ? WHERE seq = ?";
	$sql_obj = $conn->prepare($sql);
	$sql_obj->bind_param("ss", $day_check_4, $day_check_3);
	$sql_obj->execute();	
   log_file("SQL문 들어가신다: ".$sql);
	
	$result_arr["result"] = "success";
} //if($_POST['type']=='modify_memo') 
 //수정 부분 끝
728x90
반응형
저작자표시

'프로그래밍 > (WEB) PHP & JAVASCRIPT' 카테고리의 다른 글

[php] php에서 리눅스 명령어 적용하는 방법(shell_exec, unlink)  (0) 2021.02.16
[카카오API] 카카오맵 display none->block 처리 시 지도 문제 해결법 (지도를 숨겼다가 다시 표시할때 문제점)  (0) 2021.02.08
[php] 날짜 변환 [엑셀형 날짜데이터(43874)] => [m/d/y형] => [sec형(1581865200)] => [y-m-d형]  (0) 2021.01.28
[Javascript] 다중 셀렉트 박스(chained select box) / 셀렉트 박스 2개 연동 / 시도 시군구 다중 셀렉트박스  (0) 2021.01.27
[PHP] php 변수를 javascript에서 사용하는 방법  (0) 2021.01.24
'프로그래밍/(WEB) PHP & JAVASCRIPT' Related Articles more