DTR WIKI

# 매장관리

매장등록,상세지도표시,가까운위치 매장 페이지로 이동 기능.
전체 로직은 아래와 같다.
Table Column = no,name,addr,lat,lng

매장등록

매장이름, 매장주소 입력(다음 주소검색 기능 사용) -> DB INSERT시 주소->좌표로 변환하여 입력한다.
네이버,다음,구글에서 주소->좌표 변환을 지원하지만 국내서비스인 네이버를 이용한다.
네이버의 주소->좌표 변환은 CURL을 사용하여 이용할 수 있다.(네이버 앱등록후 키필요)
아래의 함수를 이용한다.(Codeigniter 사용)

// 매장 등록시 좌표값 구하기 Curl 필요
public function get_curl($url, $header) {
	$this->curl->create($url);
	$this->curl->option(CURLOPT_URL, $url);
	$this->curl->option(CURLOPT_HEADER, 10);
	$this->curl->option(CURLOPT_HTTPHEADER, $header);
	$this->curl->option(CURLOPT_RETURNTRANSFER, true);
	$result = $this->curl->execute();
	return $result;
}

// 주소 -> 좌표구하기
function get_naver_geo($addr, $key, $secret) {
	$addr = urlencode($addr); 
	$url = "https://openapi.naver.com/v1/map/geocode?encoding=utf-8&coord=latlng&output=json&query=".$addr;
	$headers = array();
	$headers[] = "GET https://openapi.naver.com/v1/map/geocode?".$addr;
	$headers[] ="Host: openapi.naver.com";
	$headers[] ="Accept: */*";
	$headers[] ="Content-Type: application/json";
	$headers[] ="X-Naver-Client-Id: ".$key;
	$headers[] ="X-Naver-Client-Secret: ".$secret;
	$headers[] ="Connection: Close";
	$result = $this->get_http($url, $headers);
	$data = json_decode($result,1); 
	$position[0] = $data['result']['items'][0]['point']['x'];
	$position[1] = $data['result']['items'][0]['point']['y'];
	return $position; 
}

매장보기

네이버 API를 활용하여 일반적인 지도 표시처럼 사용한다.

가까운 매장찾기

HTML5 Geolocation을 활용하여 자신의 좌표를 구한뒤, 등록된 매장의 좌표값과 비교하여 가장 작은 차이를 보인 매장을 보여준다.
LIST페이지에서 Ajax로 currentshop를 호출하여 사용한다.
거리 구하는 함수와 관련된 자세한 사항은 아래 주소를 참조하면 된다.
가까운 매장찾기는 모바일에서만 가능하다.
http://egloos.zum.com/metashower/v/313035

/* 현재 위치 구하기 */
public function currentshop() {
	if ($_POST) {
		$dist = 1000;
		$lat = $this->input->post('currentLat',TRUE);
		$lng = $this->input->post('currentLng',TRUE);
		$result = $this->m_shop->get_list();
		foreach ($result as $lt) {
			$dis = $this->geoDistance($lat,$lng,$lt->shop_lat,$lt->shop_lng);
			if ($dist > $dis) {
				$dist = $dis;
				$current = $lt->shop_no;
			}
		}
		echo $current;
	}
}
// 도를 라디언으로 변환
public function _deg2rad($deg) { 
	$radians = 0.0; 
	$radians = $deg * M_PI/180.0; 
	return($radians); 
} 
// 실제 거리를 구함
public function geoDistance($lat1, $lon1, $lat2, $lon2, $unit="k") { 
	$theta = $lon1 - $lon2; 
	$dist = sin($this->_deg2rad($lat1)) * sin($this->_deg2rad($lat2)) + cos($this->_deg2rad($lat1)) * cos($this->_deg2rad($lat2)) * cos($this->_deg2rad($theta)); 
	$dist = acos($dist); 
	$dist = rad2deg($dist); 
	$miles = $dist * 60 * 1.1515; 
	$unit = strtolower($unit);
	// 거리단위변경
	if ($unit == "k") { 
		return ($miles * 1.609344); 
	} else { 
		return $miles; 
	} 
} 

Result

http://wiki.dovetorabbit.com/shop

# 모바일 확인

useragent를 확인한다. (데스크탑이 아닐 경우만 체크하여 이동시켜준다)
isMobile의 값을 결과값으로 boolead값을 받거나 다른 함수를 호출할 수 있다.
데스크탑인지 체크하여 /m 폴더로 이동하는 예제이다.

/***************************************************
* AGENT & MOBILE
***************************************************/
var isMobile = function () {
	var filter = "win16|win32|win64|mac|macintel";
	if( navigator.platform  ){
		if( filter.indexOf(navigator.platform.toLowerCase())<0 ){
			location.href = "/m";
		} else {
			return false;
		}
	}
}

# 모바일 확인 (PHP)

PHP에서 모바일 여부를 확인하는 함수이다.
익명함수로 선언되어 있다.

$isMobile = function () {
    $filter = "/(iPod|iPhone|Android|BlackBerry|SymbianOS|SCH-M\d+|Opera Mini|Windows CE|Nokia|SonyEricsson|webOS|PalmOS)/";
    if (preg_match($filter, $_SERVER['HTTP_USER_AGENT'])) {
        return true;
    } else {
        return false;
    }
};

# 브라우저 확인

사용중인 브라우저를 boolean값으로 받는다.
크롬인지 확인하는 예제이다.

var mobile = {
	ie : window.navigator.userAgent.toLowerCase().indexOf('msie') != -1,
	ie6 : window.navigator.userAgent.toLowerCase().indexOf('msie 6') != -1,
	ie7 : window.navigator.userAgent.toLowerCase().indexOf('msie 7') != -1,
	ie8 : window.navigator.userAgent.toLowerCase().indexOf('msie 8') != -1,
	ie9 : window.navigator.userAgent.toLowerCase().indexOf('msie 9') != -1,
	ie10 : window.navigator.userAgent.toLowerCase().indexOf('msie 10') != -1,
	ie11 : window.navigator.userAgent.match(/Trident.*rv:11\./),
	opera : !!window.opera,
	safari : window.navigator.userAgent.toLowerCase().indexOf('safari') != -1,
	safari3 : window.navigator.userAgent.toLowerCase().indexOf('applewebkir/5') != -1,
	mac : window.navigator.userAgent.toLowerCase().indexOf('mac') != -1,
	chrome : window.navigator.userAgent.toLowerCase().indexOf('chrome') != -1,
	firefox : window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1,
}
console.log(browser.chrome); // true or false

# Component - 버튼

기본 버튼

btn 클래스를 사용한다.

<button type="button" class="btn">Button</button>
<a class="btn">Button</a>
<input type="submit" class="btn" value="Button">

크기별 버튼

버튼의 크기에 따라 btn--xs,btn--sm,btn--lg 클래스를 사용한다.

<p>
	<button type="button" class="btn btn--xs">Button</button>
	<a class="btn btn--xs">Button</a>
	<input type="submit" class="btn btn--xs" value="Button">
</p>
<p>
	<button type="button" class="btn btn--sm">Button</button>
	<a class="btn btn--sm">Button</a>
	<input type="submit" class="btn btn--sm" value="Button">
</p>
<p>
	<button type="button" class="btn btn--lg">Button</button>
	<a class="btn btn--lg">Button</a>
	<input type="submit" class="btn btn--lg" value="Button">
</p>

<p>
	<button type="button" class="btn btn--xs">Button</button>
	<a class="btn btn--xs">Button</a>
	<input type="submit" class="btn btn--xs" value="Button">
</p>
<p>
	<button type="button" class="btn btn--sm">Button</button>
	<a class="btn btn--sm">Button</a>
	<input type="submit" class="btn btn--sm" value="Button">
</p>
<p>
	<button type="button" class="btn btn--lg">Button</button>
	<a class="btn btn--lg">Button</a>
	<input type="submit" class="btn btn--lg" value="Button">
</p>

<div class="btn-group">
	<div class="btn-group__left">
		<button type="button" class="btn">Button</button>
		<a class="btn">Button</a>
		<input type="submit" class="btn" value="Button">
	</div>
	<div class="btn-group__right">
		<button type="button" class="btn">Button</button>
		<a class="btn">Button</a>
		<input type="submit" class="btn" value="Button">
	</div>
</div>

# 탭네비게이션

자주 사용하는 탭형태의 UI이다.
탭호출시 따로 인자를 전달하거나 직접 수정하여 사용할 수 있다.
버튼과 탭콘텐츠 모두 active 클래스를 사용하며, UI는 CSS로 모양을 잡아준다.

<ul class="tab-nav">
	<li><a href="#tab-item1">Tab-Item1</a></li>
	<li><a href="#tab-item2">Tab-Item2</a></li>
	<li><a href="#tab-item3">Tab-Item3</a></li>
</ul>
<div id="tab-item1" class="tab-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, nobis.</div>
<div id="tab-item2" class="tab-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, dolore!</div>
<div id="tab-item3" class="tab-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, molestiae.</div>

.tab-nav {overflow:hidden}
.tab-nav li {float:left;width:120px;border-bottom:1px solid #555;text-align:center;line-height:40px}
.tab-nav li.active {background:#555}
.tab-nav li.active a {font-size:14px;color:#fff}
.tab-item {display:none;padding:15px;font-size:12px;color:#444}
.tab-item.active {display:block}

/***************************************************
* TAB
***************************************************/
$.fn.tab = function (option) {		
	var defaults = {
		tabBtn : $(this).parent('li'), //활성화 표시를 할 버튼 요소 (태그나 클래스 가능)
		tabContent : '.tab-item' //탭 콘텐츠 요소
	},
	options =  $.extend({},defaults,option),
	href = $(this).attr('href'),
	target = $(href);

	$(options.tabContent).removeClass('active in');
	options.tabBtn.siblings().removeClass('active');
	options.tabBtn.addClass('active');
	target.addClass('active');
	setTimeout(function () { 
		target.addClass('in');
	},10);
}
/* EXAMPLE - TAB */
$('.tab-nav a').click(function (e) {
	e.preventDefault();
	$(this).tab();
});
$('.tab-nav a').first().tab();

Result

# 아코디언네비게이션

감싸고 있는 요소에 data-accordion 속성을 추가한다.
accordion__tit, accordion__content을 기준으로 컨트롤 된다.

<ul class="accordion" data-accordion>
	<li>
		<div class="accordion__tit">What is Webwiki?</div>
		<div class="accordion__content">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, nemo.
		</div>
	</li>
	<li>
		<div class="accordion__tit">What is Accordion?</div>
		<div class="accordion__content">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, quia doloribus!
		</div>
	</li>
	<li>
		<div class="accordion__tit">What is jQuery?</div>
		<div class="accordion__content">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, atque, harum?
		</div>
	</li>
</ul>

.accordion li {border-bottom:1px solid #ccc}
.accordion li:first-child {border-top:1px solid #ccc}
.accordion__tit {padding:15px;background:#eee;font-size:14px}
.accordion__content {display:none;padding:15px;font-size:12px}

/***************************************************
* ACCORDION
***************************************************/
$.fn.accordion = function () {
	var title = $(this).find('.accordion__tit'),
	content = $(this).find('.accordion__content');

	title.bind('click',function () {
		var next = $(this).next('.accordion__content');
		content.not(next).slideUp();
		next.slideToggle();
	});
}

/* EXAMPLE - ACCORDION */
$('[data-accordion]').accordion();

Result

# 드랍다운네비게이션

select 태그를 대체할 드랍다운 네비게이션이다.
data-dropdown 요소내에 dropdown__tit, dropdown__list 를 정의해주면 된다.

<div class="dropdown" data-dropdown>
	<h2 class="dropdown__tit">
		LOCATION
	</h2>
	<ul class="dropdown__list">
		<li>
			<a href="#">SEOUL</a>
		</li>
		<li>
			<a href="#">U.S.A</a>
		</li>
		<li>
			<a href="#">JAPAN</a>
		</li>
	</ul>
</div>

.dropdown {position:relative;width:300px}
.dropdown__tit {height:40px;border:1px solid #ddd;background:#eee;font-size:15px;font-weight:600;text-align:center;cursor:pointer;line-height:40px}
.dropdown__list {display:none;position:absolute;top:42px;left:0;width:100%;border:1px solid #ddd;border-width:0 1px 1px 1px;box-sizing:border-box;background:#fff}
.dropdown__list li {line-height:34px;text-align:center}

/***************************************************
* DROPDOWN
***************************************************/
$.fn.dropdown = function () {
	$(this).each(function () {
		var tit = $(this).find('.dropdown__tit'),
		list = $(this).find('.dropdown__list'),
		li = list.find('li');

		function toggle() {
			tit.toggleClass('active');
			list.slideToggle();			
		}

		tit.bind('click',toggle);
		li.bind('click',function () {
			toggle();
		});
	});
}

/* EXAMPLE - DROPDOWN */
$('[data-dropdown]').dropdown();

Result