반응형
php mysql ajax bootstrapModal을 이용해서 동적 웹페이지 만들기1 (조회- 리스트 뿌리기)
#mysql (tbl_employee)
#화면
자세히 버튼을 클릭하면 부트스트랩 모달창이 뜨면서 데이터를 뿌려준다.
#index.php
<?php
//db연결
$connect = mysqli_connect("localhost", "root", "eorn1145","open");
$query = "SELECT * FROM tbl_employee";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>crud</title>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.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]-->
<style>
</style>
</head>
<body>
</br></br>
<div class="container" style = "width:700px;">
<h3 align="center">데이터를 동적으로 bootstrap modal 창에 보여주기</h3>
<br>
<div class="talbe-responsive">
<table class="table table-bordered">
<tr>
<th width="70%">이름</th>
<th width="30%">보기</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" /> </td>
</tr>
<?php
}
?>
</table>
</div>
<div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
</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>
<script>
$(document).ready(function(){
//보기 버튼을 클릭했을 때
$('.view_data').click(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>
#select.php
<?php
if(isset($_POST["employee_id"]))
{
$output = '';
$connect = mysqli_connect("localhost", "root", "비번","db이름");
$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 bootstrapModal을 이용해서 동적 웹페이지 만들기3 (수정) (1) | 2017.09.15 |
|---|---|
| php mysql ajax bootstrap 모달창을 이용해서 동적 웹페이지 만들기2 (삽입) (0) | 2017.09.14 |
| php ajax json을 이용해서 crud(삭제) 예제4 (3) | 2017.09.13 |
| php ajax json을 이용해서 crud(수정) 예제3 (1) | 2017.09.12 |
| php ajax json mysql을 이용해서 crud(추가) 예제2 (1) | 2017.09.12 |
댓글