묻고답하기
이 소스를 이용하여 db연동 하는 소스 문의
2018.08.10 09:59
이 소스는 인터넷을 돌아다니다가 발견한 소스입니다.
일단 PHP와 DB 연동에 대해서는 왕초보라고 생각하시면 될듯 합니다.
이 소스를 이용하여 검색 단추를 어디다가 추가를 해야되는지..
그리고 시작일과 종료일을 DB 연동을 시켜야하는데.
FORM ACTION 이라는것도 없어서 어떻게 넘겨줘야되며,(PHP확장자)
PHP에서 시작일과 종료일을 변수로 넘겨야되는지.. 아니면.. PHP DB를 연동해야되는지 모르겠습니다.
알려주시면 정말로 감사하겠습니다. ㅠ
원소스
------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery UI</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<style>
/* Default */
input[type=text],input[type=password]{font-family:"Malgun Gothic","맑은 고딕",Dotum,"돋움",Arial,sans-serif}
*{margin:0;padding:0;font-family:"Malgun Gothic","맑은 고딕",Dotum,"돋움",Arial,sans-serif}
body{font-size:12px;color:#555;background:transparent;-webkit-user-select:none;-moz-user-select:none;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none}
ol,ul{list-style:none}
table{table-layout:fixed;width:100%;border-collapse:collapse;border-spacing:0}
caption{overflow:hidden;width:0;height:0;font-size:0;line-height:0;text-indent:-999em}
img,fieldset{border:0}
legend{height:0;visibility:hidden}
em,address{font-style:normal}
img{border:0 none;vertical-align:middle}
a{color:#555;text-decoration:none}
input,select{margin:0;padding:0;vertical-align:middle}
button{margin:0;padding:0;font-family:inherit;border:0 none;background:transparent;cursor:pointer}
button::-moz-focus-inner{border:0;padding:0}
header,footer,aside,nav,section,article{display:block}
.clearfix{*zoom:1}
.clearfix:after{content:"";display:block;clear:both;overflow:hidden}
/* Search */
.searchBox{border:none}
.searchBox tbody th{padding:20px 10px 20px 35px;font-size:14px;font-weight:bold;text-align:left;vertical-align:top;border:none;background:#e6e6e6 }
.searchBox tbody td{padding:12px 10px 12px 25px;border:none;background-color:#efefef}
.searchDate{overflow:hidden;margin-bottom:10px;*zoom:1}
.searchDate:after{display:block;clear:both;content:''}
.searchDate li{position:relative;float:left;margin:0 7px 0 0}
.searchDate li .chkbox2{display:block;text-align:center}
.searchDate li .chkbox2 input{position:absolute;z-index:-1}
.searchDate li .chkbox2 label{display:block;width:72px;height:26px;font-size:14px;font-weight:bold;color:#fff;text-align:center;line-height:25px;text-decoration:none;cursor:pointer;background:#a5b0b6}
.searchDate li .chkbox2.on label{background:#ec6a6a}
.demi{display:inline-block;margin:0 1px;vertical-align:middle}
.inpType{padding-left:6px;height:24px;line-height:24px;border:1px solid #dbdbdb}
.btncalendar{display:inline-block;width:22px;height:22px;background:url(images/btn_calendar.gif) center center no-repeat;text-indent:-999em}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- datepicker 한국어로 -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/datepicker-ko.js"></script>
<script>
$(document).ready(function() {
//datepicker 한국어로 사용하기 위한 언어설정
$.datepicker.setDefaults($.datepicker.regional['ko']);
// Datepicker
$(".datepicker").datepicker({
showButtonPanel: true,
dateFormat: "yy-mm-dd",
onClose : function ( selectedDate ) {
var eleId = $(this).attr("id");
var optionName = "";
if(eleId.indexOf("StartDate") > 0) {
eleId = eleId.replace("StartDate", "EndDate");
optionName = "minDate";
} else {
eleId = eleId.replace("EndDate", "StartDate");
optionName = "maxDate";
}
$("#"+eleId).datepicker( "option", optionName, selectedDate );
$(".searchDate").find(".chkbox2").removeClass("on");
}
});
//시작일.
/*$('#searchStartDate').datepicker("option","onClose", function( selectedDate ) {
// 시작일 datepicker가 닫힐때
// 종료일의 선택할수있는 최소 날짜(minDate)를 선택한 시작일로 지정
$("#searchEndDate").datepicker( "option", "minDate", selectedDate );
$(".searchDate").find(".chkbox2").removeClass("on");
});
*/
//종료일.
/*$('#searchEndDate').datepicker("option","onClose", function( selectedDate ) {
// 종료일 datepicker가 닫힐때
// 시작일의 선택할수있는 최대 날짜(maxDate)를 선택한 종료일로 지정
$("#searchStartDate").datepicker( "option", "maxDate", selectedDate );
$(".searchDate").find(".chkbox2").removeClass("on");
});
*/
$(".dateclick").dateclick(); // DateClick
$(".searchDate").schDate(); // searchDate
});
// Search Date
jQuery.fn.schDate = function(){
var $aaa = $(this);
var $chk = $aaa.find("input[type=radio]");
$chk.click(function(){
$('input:not(:checked)').parent(".chkbox2").removeClass("on");
$('input:checked').parent(".chkbox2").addClass("on");
});
};
// DateClick
jQuery.fn.dateclick = function(){
var $aaa = $(this);
$aaa.click(function(){
$(this).parent().find("input").focus();
});
}
function setSearchDate(start){
var num = start.substring(0,1);
var str = start.substring(1,2);
var today = new Date();
//var year = today.getFullYear();
//var month = today.getMonth() + 1;
//var day = today.getDate();
var endDate = $.datepicker.formatDate('yy-mm-dd', today);
$('#searchEndDate').val(endDate);
if(str == 'd'){
today.setDate(today.getDate() - num);
}else if (str == 'w'){
today.setDate(today.getDate() - (num*7));
}else if (str == 'm'){
today.setMonth(today.getMonth() - num);
today.setDate(today.getDate() + 1);
}
var startDate = $.datepicker.formatDate('yy-mm-dd', today);
$('#searchStartDate').val(startDate);
// 종료일은 시작일 이전 날짜 선택하지 못하도록 비활성화
$("#searchEndDate").datepicker( "option", "minDate", startDate );
// 시작일은 종료일 이후 날짜 선택하지 못하도록 비활성화
$("#searchStartDate").datepicker( "option", "maxDate", endDate );
}
</script>
</head>
<body>
<form>
<!-- search -->
<table class="searchBox">
<caption>조회</caption>
<colgroup>
<col width="123px">
<col width="*">
</colgroup>
<tbody>
<tr>
<th>조회기간</th>
<td>
<ul class="searchDate">
<li>
<span class="chkbox2">
<input type="radio" name="dateType" id="dateType1" onclick="setSearchDate('0d')"/>
<label for="dateType1">당일</label>
</span>
</li>
<li>
<span class="chkbox2">
<input type="radio" name="dateType" id="dateType2" onclick="setSearchDate('3d')"/>
<label for="dateType2">3일</label>
</span>
</li>
<li>
<span class="chkbox2">
<input type="radio" name="dateType" id="dateType3" onclick="setSearchDate('1w')"/>
<label for="dateType3">1주</label>
</span>
</li>
<li>
<span class="chkbox2">
<input type="radio" name="dateType" id="dateType4" onclick="setSearchDate('2w')"/>
<label for="dateType4">2주</label>
</span>
</li>
<li>
<span class="chkbox2">
<input type="radio" name="dateType" id="dateType5" onclick="setSearchDate('1m')"/>
<label for="dateType5">1개월</label>
</span>
</li>
<li>
<span class="chkbox2">
<input type="radio" name="dateType" id="dateType6" onclick="setSearchDate('3m')"/>
<label for="dateType6">3개월</label>
</span>
</li>
<li>
<span class="chkbox2">
<input type="radio" name="dateType" id="dateType7" onclick="setSearchDate('6m')"/>
<label for="dateType7">6개월</label>
</span>
</li>
</ul>
<div class="clearfix">
<!-- 시작일 -->
<span class="dset">
<input type="text" class="datepicker inpType" name="searchStartDate" id="searchStartDate" >
<a href="#none" class="btncalendar dateclick">달력</a>
</span>
<span class="demi">~</span>
<!-- 종료일 -->
<span class="dset">
<input type="text" class="datepicker inpType" name="searchEndDate" id="searchEndDate" >
<a href="#none" class="btncalendar dateclick">달력</a>
</span>
</div>
</td>
</tr>
<tbody>
</table>
</form>
</body>
</html>
- [2016/02/06] 묻고답하기 외부페이지에서 Google Map jquery 에러 해결방법 문의 *2
javascript 로 form 전송에 대해 구글링 해 보시거나..
jquery ajax 에 대해서도 알아보시면 도움 되실듯 합니다.
하지만 둘다 넘어온 변수값을 처리해 주는 부분이 필요하기 때문에 별도의 php 파일이 필요합니다.
그 php내용엔 원하는 내용을 처리할 수 있는 함수가 필요하고요..
그리 간단한 문제는 아닌듯 합니다. 제작의뢰하셔서 원하는 결과 얻으시길 바랍니다.