공공데이터 연동
현제 홈페이지를 하나 무료로 제작을 해드리고 있는데요
자원봉사신청을 조금더 쉽게 하기 위해서 한번 만들고 있는데 잘 되지 않는 부분들이 있어서 이렇게 글을 드립니다.
아래 링크를 통해서 하고 있는데요 잘 되지 않는 부분들이 있어서요
1. 시도 선택은 잘 되는데 나머지가 선택이 잘 되지 않는 부분들
2. 나머지 메뉴에 대해서 아무런 반응이 없는 부분
3. 페이징은 되지만 페이징을 클릭을 하게 되면 기존 검색데이터가 초기화가 되는 부분 위에 시도 선택 하고 봉사분야 등 선택 한것이 다 사라지면서 초기화가 되는 문제 입니다.
https://www.data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15000221
이걸 활용해서 만들려고 합니다.
이 링크는 현제 제가 만들고 있는 것이구요 https://sgcil.org/page/page07-03.php
아래 코드는 제가 만든 것입니다. 허접하지만
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_THEME_PATH.'/head.php');
?>
<link rel="stylesheet" href="<?=G5_THEME_URL?>/pages/style.css">
<style>
dl { margin: 0; padding: 0; }
dd { margin: 0; padding: 0; }
.board_list-top .bbs_list_info { float: left; line-height: 40px; margin-bottom: 0; padding-left: 20px; background-image: url(/commons/main/images/global/bbs_list_info.png); background-repeat: no-repeat; background-position: left; }
/* bbs 리스트 상단 갯수 정보 */
.bbs_list_info{ margin-bottom:15px; }
.bbs_list_info strong{ color:#000 }
/* bbs 리스트 */
.bbs_list_info{ text-align:left; font-size:1rem; }
.bbs_list_info strong { color: #555; }
.bbs_list_info span { color:#0059b7; font-weight: bold; }
.search-form { margin-bottom: 20px; }
.search-form ul:after, .search-form ul li:after { display: block; content: ""; clear: both; }
.search-form ul { border-top: 2px solid #696c75; border-left: 1px solid #ddd; }
.search-form ul > li { float: left; width: 100%; padding: 0; box-sizing: border-box; position: relative; }
.search-form ul > li dt, .search-form ul > li dd { border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 12px 18px; box-sizing: border-box; }
.search-form ul > li dt { background-color: #f9f9f9; font-weight: bold; }
.search-form ul > li dt label { display: block; line-height: inherit; }
.search-form ul > li dd p { display: inline-block; margin-bottom: 3px; }
.search-form ul > li dd input, .search-form ul > li dd select, .search-form ol > li > a { display: inline-block; padding: 0 10px; margin: 0; max-width: 100%; /*font-size: 1rem;*/ line-height: 36px; height: 38px; box-sizing: border-box; border: 1px solid #ddd; background: white; border-radius: 0; }
.search-form ul > li dd label { /*font-size: 1rem;*/ margin-right: 20px; }
.search-form ol { margin: -3px 0; }
.search-form ol > li { display: inline-block; padding: 3px 0; }
.search-form ol > li > a { display: block; }
.search-form ol > li.active > a { background-color: #e83249; border: 1px solid #e83249; color: white; }
.search-form .btnArea { border-bottom: 1px solid #ddd; text-align: center; padding: 20px 0 50px 0; margin-bottom: 40px; }
.search-form .btnArea input, .search-form .btnArea button, .search-form .btnArea a { font-size: 17px; font-weight: bold; display: inline-block; width: 122px; height: 53px; background-color: #fff; border: 1px solid #ccc; line-height: 51px; color: #444; box-sizing: border-box; }
.search-form .btnArea input, .search-form .btnArea button { background-color: #e83249; border: 1px solid #e83249; color: white; }
@media screen and (min-width: 768px) {
.search-form ul > li { width: 50%; }
}
@media screen and (min-width: 576px) {
.search-form ul > li dt { position: absolute; top: 0; bottom: 0; left: 0; width: 160px; /*font-size: 1rem;*/ text-align: center; line-height: 38px; }
.search-form ul > li dd { margin-left: 160px; }
}
@media screen and (min-width:1px) and (max-width:768px) {
.search-form .btnArea input, .search-form .btnArea button, .search-form .btnArea a { max-width: 48%; }
}
/* paging */
.paging{ text-align:center; margin-top:50px; position:relative; }
.paging span{ padding:0 5px; vertical-align:top; }
.paging a{ padding:0; color:#000; font-size:19px; vertical-align:top; display:inline-block; height:30px; line-height:30px; margin: 0 12px; }
*+ html .paging a{ display:inline; }
.paging strong{ color:#e83249; border-bottom:1.5px solid #e83249; padding:0; font-size:19px; box-sizing: border-box; vertical-align:top; display:inline-block; font-weight:bold; margin: 0 12px; height:30px; line-height:30px; }
*+ html .paging strong{ display:inline; }
.paging span.left_b{ padding-left:0!important; padding-right:10px; height:30px; line-height:30px; display:inline-block; }
.paging span.right_b{ padding-left:10px; padding-right:0!important; height:30px; line-height:30px; display:inline-block; }
*+ html .paging span.left_b{ display:inline; }
*+ html .paging span.right_b{ display:inline; }
.paging span.left_b a,.paging span.right_b a{ padding:0; border:0px; width:auto; height:auto; }
.paging a:hover,.paging a:focus{ color:#000; }
.paging a{ color:#222 }
.paging a img { vertical-align:top;}
@media screen and (max-width: 767px) {
.paging a, .paging strong { margin: 0 1.5px; padding: 0 1.5px; font-size: 1.3rem; font-size: 13px; height: 24px; line-height: 24px; }
.paging span { padding: 0 !important; }
.paging span a { margin: 0; padding: 0; }
.paging span a img { height: 24px; }
}
@media screen and (max-width: 380px) {
.paging a, .paging strong { margin: 0 2px; padding: 0 2px; font-size: 1.2rem; letter-spacing: -1px; font-size: 12px; height: 20px; line-height: 20px; }
.paging span a img { height: 20px; }
}
@media screen and (max-width: 350px) {
.paging a, .paging strong { margin: 0 1px; padding: 0 1px; }
}
.h3_bul3{ background-image: url("/commons/main/images/basic/h3_bul2.png"); background-position:0px 4px; background-repeat:no-repeat; padding-left:26px; /*font-size:1rem;*/ color:#222; font-weight:bold; margin-bottom:10px; }
/*ìžì›ë´‰ì‚¬*/
.volunteer-list {border-top: 2px solid #6c757d; margin-bottom: 50px;}
.volunteer-list li {position: relative; border-bottom: 1px solid #ddd; color: #333;}
.volunteer-list li a {display: block; padding: 20px 0;}
.volunteer-list li .volunteer-list-title {font-size: 1rem; line-height: 2.6rem;}
.volunteer-list li .volunteer-list-title .volunteer-list-category {color: #E83249; font-weight: inherit;}
.volunteer-list li .volunteer-list-etc dl {display: inline-block; font-size: 1.8em; margin-right: 30px;}
.volunteer-list li .volunteer-list-etc dl:last-child {margin-right: 0; line-height: 12px;}
.volunteer-list li .volunteer-list-etc dl dt {display: inline; position: relative; padding-left: 15px;}
.volunteer-list li .volunteer-list-etc dl dt:before {content: ""; display: block; position: absolute; left: 0; top: 50%; margin-top: -1.5px; width: 3px; height: 3px; border-radius: 100%; background: #888;}
.volunteer-list li .volunteer-list-etc dl dt:after {content: "|"; color: #d6d0db; margin: 0 8px;}
.volunteer-list li .volunteer-list-etc dl dd {display: inline;}
.volunteer-list li span { font-size: 1.8em; display: block; border: 1px solid #aaa; background-color: #aaa; color: white; text-align: center; width: 114px; height: 41px; line-height: 39px; box-sizing: border-box; padding: 0 17px; margin-top: 5px; font-weight: bold;}
.volunteer-list li span.recruiting { font-size: 1.8em; color: #444; background-image: url(/commons/main/images/global/external-link.png); background-repeat: no-repeat; background-position: right center; background-color: white; text-align: center;}
@media screen and (min-width: 576px) {
.volunteer-list li {padding-right: 134px;}
.volunteer-list li span { width: 120px; position: absolute; top: 50%; right: 0; margin-top: -20.5px;}
}
</style>
<? include G5_THEME_PATH.'/pages/inc/code.php';?>
<article class="search-form">
<form name="searchFrm" id="searchFrm" method="get" action="" onsubmit="search(); return false;">
<input type="hidden" name="pageIndex" value="" />
<h3 class="h3_bul3">원하는 조건을 선택하여 전국 자원봉사 정보를 조회 하실 수 있습니다.</h3>
<ul>
<li style="width: 100%;">
<dl>
<dt><label for="searchHopeArea1">봉사 지역</label></dt>
<dd>
<div class="row" style="margin: -5px;">
<div class="col col-6" style="padding: 5px;">
<select id='searchHopeArea1' onchange="get_code(this);" name="schSido" title="봉사지역 시/도 선택" style="width: 100%;">
<option value="">전체</option>
<option value="6110000" >서울특별시</option>
<option value="6260000" >부산광역시</option>
<option value="6270000" >대구광역시</option>
<option value="6280000" >인천광역시</option>
<option value="6290000" >광주광역시</option>
<option value="6300000" selected>대전광역시</option>
<option value="6310000" >울산광역시</option>
<option value="5690000" >세종특별자치시</option>
<option value="6410000" >경기도</option>
<option value="6420000" >강원도</option>
<option value="6430000" >충청북도</option>
<option value="6440000" >충청남도</option>
<option value="6450000" >전라북도</option>
<option value="6460000" >전라남도</option>
<option value="6470000" >경상북도</option>
<option value="6480000" >경상남도</option>
<option value="6500000" >제주특별자치도</option>
</select>
</div>
<div class="col col-6" style="padding: 5px;">
<label for="searchHopeArea1" class="d-none">구/군 선택</label>
<select id='searchHopeArea2' name="schSign1" title="봉사지역 구/군 선택" setVal="3650000" style="width: 100%;">
<option value="">선택</option>
</select>
</div>
</div>
</dd>
</dl>
</li>
<li style="width: 100%;">
<dl>
<dt><label for="searchHopeArea1">봉사 분야</label></dt>
<dd>
<div class="row" style="margin: -5px;">
<div class="col col-6" style="padding: 5px;">
<select id='searchHopeSrvc1' name="searchHopeSrvc1" title="봉사분야 대분류 선택" style="width: 100%;">
<option value="">전체</option>
<option value="0100">생활편의지원</option>
<option value="0200">주거환경</option>
<option value="0300">상담</option>
<option value="0400">교육</option>
<option value="0500">보건의료</option>
<option value="0600">농어촌 봉사</option>
<option value="0700">문화행사</option>
<option value="0800">환경보호</option>
<option value="0900">행정보조</option>
<option value="1000">안전.예방</option>
<option value="1100">공익.인권</option>
<option value="1200">재해ㆍ재난</option>
<option value="1300">국제협력.해외봉사</option>
<option value="1400">멘토링</option>
<option value="1500">기타</option>
<option value="1700">자원봉사교육</option>
<option value="1800">국제행사</option>
</select>
</div>
<div class="col col-6" style="padding: 5px;">
<label for="searchHopeArea1" class="d-none">봉사분야 하위분류 선택</label>
<select id='searchHopeSrvc2' name="searchHopeSrvc2" title="봉사지역 구/군 선택" setVal="3740000" style="width: 100%;">
<option value="">전체</option>
</select>
</div>
</div>
</dd>
</dl>
</li>
<li>
<dl>
<dt>봉사자 유형</dt>
<dd>
<p class="checkIn">
<input type="checkbox" id="typeCheck01" name="adultPosblAt" value="Y" />
<label for="typeCheck01">성인</label>
</p>
<p class="checkIn">
<input type="checkbox" id="typeCheck02" name="yngbgsPosblAt" value="Y" />
<label for="typeCheck02">청소년</label>
</p>
</dd>
</dl>
</li>
<li>
<dl>
<dt scope="row"><label for="volunteer_keyword">봉사 제목</label></dt>
<dd><input type="text" id="volunteer_keyword" name="keyword" maxlength="20" id="" value="" placeholder="" style="width: 100%;" /></dd>
</dl>
</li>
</ul>
<div class="btnArea">
<input type="submit" title="설정한 검색 옵션으로 자원봉사정보 조회" value="조회하기" id="" />
</div>
</form>
</article>
<?php
$ch = curl_init();
$url = 'http://openapi.1365.go.kr/openapi/service/rest/VolunteerPartcptnService/getVltrPartcptnItem'; /*URL*/
//http://openapi.1365.go.kr/openapi/service/rest/VolunteerPartcptnService/getVltrSearchWordList
$url='http://openapi.1365.go.kr/openapi/service/rest/VolunteerPartcptnService/getVltrSearchWordList';
$queryParams = '?' . urlencode('ServiceKey') . '=4U6WdTrEX4UGz7wp2NJEu7uLmfyVPLAYsUNa3OEJMSJaTRF7pAZfi1Uw3%2FgHMsB0C22DJyRxAOKCaNolt8l%2Blw%3D%3D'; /*Service Key*/
$queryParams .= '&' . urlencode('progrmRegistNo') . '=' . urlencode('1269076'); /**/
$queryParams .="progrmBgnde=&progrmEndde=&schSido={$schSido}&schSign1={$schSign1}&pageNo=$page";
curl_setopt($ch, CURLOPT_URL, $url . $queryParams);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($ch, CURLOPT_HEADER, FALSE);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');
$response = curl_exec($ch);
curl_close($ch);
$xml= simplexml_load_string( $response);
//echo json_encode( $xml->body->items);
?>
<div class="bbs_list_info">
<strong>전체 : <?php
echo $xml->body->totalCount;?></strong> (<span><?php
echo $xml->body->pageNo;?></span> / <?php
echo ceil( $xml->body->totalCount/$xml->body->numOfRows); ?> page)
</div>
<ul class="volunteer-list"><?php
$progrmSttusSe_set= array(
'1'=>'<span>모집대기</span>',
'2'=>'<span class="recruiting">모집중</span>',
'3'=>'<span>모집완료</span>',
);
foreach( $xml->body->items->item as $item) {
?><li>
<a href="<?=$item->url?>" target="_blank" title="이 모집공고 자세히 보기 - 새창으로 열기 ">
<div class="volunteer-list-title">
<strong class="volunteer-list-category">[<?=$item->srvcClCode?>]</strong>
<?=$item->progrmSj?>
(<?=$item->actBeginTm?>~<?=$item->actEndTm?>시)
</div>
<div class="volunteer-list-etc float-wrap">
<dl> <dt>모집기관</dt> <dd><?=$item->nanmmbyNm?></dd> </dl>
<dl> <dt>모집기간</dt> <dd><?=$item->noticeBgnde?> ~ <?=$item->noticeEndde?></dd> </dl>
<dl> <dt>봉사기간</dt> <dd><?=$item->progrmBgnde?> ~ <?=$item->progrmEndde?></dd> </dl>
</div>
<?=$progrmSttusSe_set[ (string)($item->progrmSttusSe)]?>
</a>
</li>
<?php } ?>
</ul>
<!-- 페이징 시작-->
<div class="paging"><?php
$page= $xml->body->pageNo;
$total_page= ceil( $xml->body->totalCount/$xml->body->numOfRows);
$xml->body->numOfRows;
echo get_paging( 10, $page, $total_page,'?');
?></div>
<!-- 페이징 끝 -->
<script>
function get_code( ethis){
var kind= ethis.value;
console.log( kind);
$.ajax({
type: "GET",
url: "<?=G5_THEME_URL?>/pages/inc/code.php",
//url: "./code.php",
data: {
"sidoCd": encodeURIComponent( kind)
},
dataType: "json",
cache: false,
async: false,
success: function( jdata) {
console.log( jdata);
var next_select= $( '#searchHopeArea2');
next_select.html('<option value="0" > 선택</otion>');
//if( jdata.error=='ok') {
for( jj=0; jj<jdata.addrGugunList.length; jj++) {
next_select.append($('<option></option>')
.attr('value', jdata.addrGugunList[jj].gugunCd)
//.attr( 'data-price',jdata.addrGugunList[jj].price)
.text(jdata.addrGugunList[jj].gugunNm));
}
//}
}
});
return false;
}
</script>
<script>
$(function() {
$("#searchHopeArea1").val("<?=$schSido?>").trigger('change');
$("#searchHopeArea2").val("<?=$schSign1?>");
$("#searchHopeSrvc1").val("<?=$searchHopeSrvc1?>");
});
</script>
<?php
include_once(G5_THEME_PATH.'/tail.php');
?>
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 3개
https://open.kakao.com/o/sGVOQ0Zf
아래 링크 클릭해서 문의주세요
https://open.kakao.com/o/sHmfqQde