본문 바로가기
PHP 박살내기/php ajax json

php ajax json mysql을 이용해서 crud(조회) 예제1

by 인생여희 2017. 9. 11.
반응형

php ajax json을 이용해서 crud(조회) 예제1


#화면


#db table



#index.php

<!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) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- 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>
body{
margin:0;
padding:0;
background-color:#f1f1f1;
}

.box{
width:750px;
padding:20px;
background-color:#fff;
border:1px solid #ccc;
border-radius:5px;
margin-top:100px;


}

</style>
</head>
<body>


<div class="container box">
<h3 align="center">php Ajax Crud</h3>

<br/><br/>
<br/><br/>
<label>성을 입력하세요</label>
<input type="text" name="first_name" id="first_name" class="form-control" />

<br/>
<label>이름을 입력하세요</label>
<input type="text" name="last_name" id="last_name" class="form-control" />

<br/><br/>

<div align="center">
<!-- 클릭했을 때 user id를 알 수 있게 숨겨 둔다.-->
<input type="hidden" name="id" id="user_id" />
<button type="button" name="action" id="action" class="btn btn-warning">추가</button>
</div>

<br/><br/>


<!-- ++++++++++++++++++결과 리스트 출력 테이블++++++++++++++++++++++++ -->
<!-- select.php에서 받아온 데이터를 이곳에다가 붙인다. -->
<div id="result" class="table-responsive">
</div>

</div>

</body>


<script>

$(document).ready(function(){

fetchUser();
function fetchUser()
{
var action = "select";
//users 리스트를 select.php 에서 받아온다.
$.ajax({
url:"select.php",
method:"POST",
data:{action:action},
success:function(data){
$('#first_name').val('');
$('#last_name').val('');
$('#action').text("추가");
$('#result').html(data);
}
})
}

});

</script>

<!-- 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>


#select.php

<?php

//최종적으로 db에서 가져온 데이터를 가공한 결과 값을 담을 변수
$output = '';

//db연결 본인의 db 정보를 넣어준다!
$connect = mysqli_connect("localhost", "root", "비밀번호","db이름");


//ajax로 넘긴 데이터 값은 "select"
//값이 존재하면 true를 리턴
if(isset($_POST["action"]))
{
//users테이블 조회 프로시져를 만든다.
$procedure = "
CREATE PROCEDURE selectUser()
BEGIN
SELECT * FROM users ORDER BY id DESC;
END;
";

//기존에 프로시져가 존재한다면 지운다.
if(mysqli_query($connect,"DROP PROCEDURE IF EXISTS selectUser"))
{
//mysqli_query:DB에 쿼리 전송
if(mysqli_query($connect,$procedure))
{
$query = "CALL selectUser()";

///mysqli_query:DB에 쿼리 전송 후 결과값을 변수에 담는다
$result = mysqli_query($connect,$query);
$output .= '
<table class="table table-bordered">
<tr>
<th width="35%">성</th>
<th width="35%">이름</th>
<th width="15%">수정</th>
<th width="15%">삭제</th>
</tr>

';
//mysqli_num_rows 함수는 리절트 셋(result set)의 총 레코드 수를 반환한다.
if(mysqli_num_rows($result) >0)
{

//mysqli_fetch_array 함수는 mysqli_query 를 통해 얻은 리절트 셋(result set)에서 레코드를 1개씩 리턴해주는 함수다.
//레코드를 1개씩 리턴해주는 것은 mysqli_fetch_row 나 mysqli_fetch_assoc 와 동일하지만 리턴하는 배열의 형태가 틀리다.
//mysqli_fetch_array 함수는 순번을 키로 하는 일반 배열과 컬럼명을 키로 하는 연관배열 둘 모두 값으로 갖는 배열을 리턴한다.
//#참고!
//mysqli_fetch_row 일반 배열(순번을 키로한다.)
//mysqli_fetch_assoc 연관 배열
//mysqli_fetch_array 일반 배열 + 연관배열(컬럼명을 키로 한다)

//값이 있으면 true를 리턴한다.
while($row = mysqli_fetch_array($result)){

$output .= '
<tr>
<td>'.$row["first_name"].'</td>
<td>'.$row["last_name"].'</td>
<td><button type="button" name="update" id="'.$row["id"].'" class="update">수정</button></td>
<td><button type="button" name="delete" id="'.$row["id"].'" class="delete">삭제</button></td>
</tr>

';
}
}// 네번째 if문 끝
else
{
$output .= '
<tr>
<td colspan="4">데이터가 없습니다.</td>
</tr>
';
}

$output .= '</table>';

//최종출력!
echo $output;

}// 세번째 if문 끝

} // 두번째 if 문 끝

}//첫번째 if문 끝!





?>


반응형

댓글