반응형
php mysql ajax bootstrap 모달창을 이용해서 동적 웹페이지 만들기2 (삽입)
#화면
#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-warning">추가</button>
</div>
<br>
<div id="employee_table">
<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>
<div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins)
<script src="../bootstrap/js/bootstrap.js"></script>
<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 -->
</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="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(){
$('#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>
#insert.php
<?php
if(!empty($_POST)){
$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"]);
$query = "INSERT INTO tbl_employee(name, address, gender, designation, age) VALUES(
'$name','$address','$gender','$designation','$age')";
if(mysqli_query($connect, $query)){
$output .= '<label class="text-success">추가 되었습니다.</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="30%">보기</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" /></td>
</tr>
';
}
$output .= '</table>';
}
echo $output;
}
?>
반응형
'PHP 박살내기 > php ajax json' 카테고리의 다른 글
| ajax jquery php 사용해서 Add Edit Delete 하기 (LIVE TABLE 구현) - 동적테이블 (2) | 2017.09.18 |
|---|---|
| php mysql ajax bootstrapModal을 이용해서 동적 웹페이지 만들기3 (수정) (1) | 2017.09.15 |
| php mysql ajax bootstrapModal을 이용해서 동적 웹페이지 만들기1 (조회- 리스트 뿌리기) (3) | 2017.09.14 |
| php ajax json을 이용해서 crud(삭제) 예제4 (3) | 2017.09.13 |
| php ajax json을 이용해서 crud(수정) 예제3 (1) | 2017.09.12 |
댓글