묻고답하기
이 소스를 이용하여 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
| 글쓴이 | 제목 | 최종 글 |
|---|---|---|
| XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
| 우하하하화이팅 | xedition 로고 사이즈가 작게 나옵니다. [2] | 2023.04.06 by tree**** |
| BEO |
슬라이드 위젯 삽입 후 메뉴가 안보이네요 고수님들 부탁드립니다
[6]
 | 2022.06.17 by 인천한량 |
| clara |
홈페이지를 처음 제작해보는데
[3]
| 2021.08.04 by J__ |
| Alexander | 사이트맵에서 클릭시 새창열기로 가능한가요? [2] | 2021.07.28 by Alexander |
| 호반의별 | 웹호스팅 이전후 404 not found 현상 [2] | 2021.06.09 by 호반의별 |
| 김동규 |
html 텍스트 밀림 현상 질문입니다.
| |
| 가입명 | footer 하단에 고정하려면 어딜 수정해야 할까요? | |
| Crack리브레 | 존재하지 않는 회원 아이디입니다 [1] | 2020.09.07 by 제이와이엔소프트 |
| ppumweb | 2단메뉴 [2] | 2020.02.01 by LYG |
| LYG | 3차메뉴 표시 방법 이게 맞나요? | |
| 나비 | html 사진 슬라이드 질문 [2] | 2019.10.21 by 나비 |
| thanksto |
html 미디어 쿼리 오류 어떻게 해결할 수 있나요?
| |
| supi**** |
XEDITION LNB 관련하여 몇가지 질문드립니다.
[2]
| 2019.09.18 by supi**** |
| 오센 | input 타입을 textarea로 수정했는데요 [1] | 2019.08.02 by sejin7940 |
| 내일은희망 | 배경색을 이미지로 바꾸고 싶어요 [2] | 2019.05.15 by 내일은희망 |
| 초보개 | sql 쿼리 질문 | |
| 이퓨 |
회원가입 select 폼 형식 입력값 불러오기 질문
| |
| 소라db952 | cycle-pager 배너에 a 링크를 걸면 배너 이미지가 풀려요ㅠ [2] | 2019.04.02 by 소라db952 |
| 세걸 | ssd HHD 조합으로 웹서비스 설정 [1] | 2019.04.01 by 세걸 |
| Spooky | 모바일에서만 '권한이 없습니다'가 나오는 이유가 궁금합니다. [1] | 2019.03.29 by Spooky |
javascript 로 form 전송에 대해 구글링 해 보시거나..
jquery ajax 에 대해서도 알아보시면 도움 되실듯 합니다.
하지만 둘다 넘어온 변수값을 처리해 주는 부분이 필요하기 때문에 별도의 php 파일이 필요합니다.
그 php내용엔 원하는 내용을 처리할 수 있는 함수가 필요하고요..
그리 간단한 문제는 아닌듯 합니다. 제작의뢰하셔서 원하는 결과 얻으시길 바랍니다.