반응형
php mysql ajax bootstrapModal을 이용해서 동적 웹페이지 만들기3 (수정)
#화면
#index.php
<?php
//db연결
$connect = mysqli_connect("localhost", "root", "eorn1145","open");
$query = "SELECT * FROM tbl_employee ORDER BY id DESC";
$result = mysqli_query($connect, $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>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
</br></br>
<div class="container" style = "width:700px;">
<h3 align="center">데이터를 동적으로 bootstrap modal 창에 보여주기</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="70%">이름</th>
<th width="15%">보기</th>
<th width="15%">수정</th>
</tr>
<?php
while($row=mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["name"]; ?> </td>
<td><input type="button" name ="view" value="자세히" id="<?php echo $row["id"]; ?>" class="view_data btn btn-info" /></td>
<td><input type="button" name ="edit_data" value="수정" id="<?php echo $row["id"]; ?>" class="edit_data btn btn-warning" /></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
<div>
</body>
</html>
<!-- 조회 모달 -->
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- 모달 헤더 -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">직원 상세</h4>
</div>
<!-- 모달 바디 -->
<div class="modal-body" id="employee_detail">
</div>
<!-- 모달 풋터 -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
</div>
</div>
</div>
</div>
<!-- 데이터 추가 모달 -->
<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">×</button>
<h4 class="modal-title">php ajax데이터를 부트스트랩 모달을 이용해서 mysql에 추가하기</h4>
</div>
<!-- 모달 바디 -->
<div class="modal-body">
<form method="post" id="insert_form">
<label>이름</label>
<input type="text" name="name" id="name" class="form-control" />
<br />
<label>주소</label>
<textarea name="address" id="address" class="form-control" ></textarea>
<br />
<label>성별</label>
<select name="gender" id="gender">
<option value="남성">남성</option>
<option value="여성">여성</option>
</select>
<br />
<br />
<label>직업</label>
<input type="text" name="designation" id="designation" class="form-control" />
<br />
<label>나이</label>
<input type="text" name="age" id="age" 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="btn btn-default" data-dismiss="modal">닫기</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
//모달창에서 수정버튼 눌렀을 때
$(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){
$('#name').val(data.name);
$('#address').val(data.address);
$('#gender').val(data.gender);
$('#designation').val(data.designation);
$('#age').val(data.age);
$('#employee_id').val(data.id);
$("#insert").val("수정");
$('#add_data_Modal').modal('show');
}
});
});
//모달 창에서 추가 버튼 눌렀을 때
$('#insert_form').on('submit',function(event){
event.preventDefault();
if($('#name').val()=='')
{
alert("이름을 입력해주세요");
}else if($('#address').val()=='')
{
alert("주소를 입력해주세요");
}else if($('#designation').val()=='')
{
alert("직업을 입력해주세요");
}else if($('#age').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);
}
})
}
});
//보기 버튼을 클릭했을 때
//$('.view_data').click(function(){ -- .click 쓰면 안됨...
$(document).on('click', '.view_data', function(){
var employee_id = $(this).attr("id");
$.ajax({
//select.php 로 가서
url:"select.php",
method:"POST",
//위에서 클릭한 employee_id 데이터를 url로 넘겨주고
data:{employee_id:employee_id},
success:function(data){
//성공하면 select.php에서 뿌린 데이터를 data 변수에 담아 모달-바디에 붙여라
$('#employee_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
#fetch.php
<?php
$connect = mysqli_connect("localhost", "root", "eorn1145","open");
if(isset($_POST["employee_id"]))
{
$query = "SELECT * FROM tbl_employee WHERE id = '".$_POST["employee_id"]."'";
$result = mysqli_query($connect,$query);
$row = mysqli_fetch_array($result);
echo json_encode($row);
}
?>
#insert.php
<?php
if(!empty($_POST)){
$msg = '';
$output = '';
$connect = mysqli_connect("localhost", "root", "eorn1145","open");
$name = mysqli_real_escape_string($connect,$_POST["name"]);
$address = mysqli_real_escape_string($connect,$_POST["address"]);
$gender = mysqli_real_escape_string($connect,$_POST["gender"]);
$designation = mysqli_real_escape_string($connect,$_POST["designation"]);
$age = mysqli_real_escape_string($connect,$_POST["age"]);
//insert 버튼으로 들어온 값과 update 버튼으로 들어온 값 구분
if($_POST["employee_id"]!='')
{
$query = "
UPDATE tbl_employee SET name='$name',
address='$address',
gender='$gender',
designation = '$designation',
age = '$age'
WHERE id = '".$_POST["employee_id"]."'";
$msg = '수정 성공';
}else
{
$query = "INSERT INTO tbl_employee(name, address, gender, designation, age)
VALUES('$name','$address','$gender','$designation','$age')";
$msg = '추가 성공';
}
if(mysqli_query($connect, $query)){
$output .= '<label class="text-success">'.$msg.'</label>';
$select_query = "SELECT * FROM tbl_employee ORDER BY id DESC";
$result = mysqli_query($connect, $select_query);
$output .= '
<table class="table table-bordered">
<tr>
<th width="70%">이름</th>
<th width="15%">보기</th>
<th width="15%">수정</th>
</tr>
';
while($row=mysqli_fetch_array($result))
{
$output.='
<tr>
<td>'.$row["name"].'</td>
<td><input type="button" name="view" value="자세히" id="'.$row["id"].'"
class="view_data btn btn-info" /></td>
<td><input type="button" name="edit" value="수정" id="'.$row["id"].'"
class="edit_data btn btn-warning" /></td>
</tr>
';
}
$output .= '</table>';
}
echo $output;
}
?>
#select.php
<?php
if(isset($_POST["employee_id"]))
{
$output = '';
$connect = mysqli_connect("localhost", "root", "eorn1145","open");
$query = "SELECT * FROM tbl_employee where id = '".$_POST["employee_id"]."'";
$result = mysqli_query($connect,$query);
$output .='
<div class="table-responsive">
<table class="table table-bordered">';
while($row = mysqli_fetch_array($result))
{
$output .='
<tr>
<td width ="30%"><lable>이름</lable></td>
<td width ="70%"><lable>'.$row["name"].'</lable></td>
</tr>
<tr>
<td width ="30%"><lable>주소</lable></td>
<td width ="70%"><lable>'.$row["address"].'</lable></td>
</tr>
<tr>
<td width ="30%"><lable>성별</lable></td>
<td width ="70%"><lable>'.$row["gender"].'</lable></td>
</tr>
<tr>
<td width ="30%"><lable>직업</lable></td>
<td width ="70%"><lable>'.$row["designation"].'</lable></td>
</tr>
<tr>
<td width ="30%"><lable>나이</lable></td>
<td width ="70%"><lable>'.$row["age"].'</lable></td>
</tr>
';
}
$output .= "</table></div>";
echo $output;
}
?>
반응형
'PHP 박살내기 > php ajax json' 카테고리의 다른 글
| PHP 객체지향 방식으로 Mysql Ajax 조회 추가 수정 삭제 (0) | 2017.09.18 |
|---|---|
| ajax jquery php 사용해서 Add Edit Delete 하기 (LIVE TABLE 구현) - 동적테이블 (2) | 2017.09.18 |
| php mysql ajax bootstrap 모달창을 이용해서 동적 웹페이지 만들기2 (삽입) (0) | 2017.09.14 |
| php mysql ajax bootstrapModal을 이용해서 동적 웹페이지 만들기1 (조회- 리스트 뿌리기) (3) | 2017.09.14 |
| php ajax json을 이용해서 crud(삭제) 예제4 (3) | 2017.09.13 |
댓글