[PHP,JS] 모바일 기기 여부 판단하여 모바일용 웹페이지로 이동시키기 (주소 동적처리)
□ Tech (Software)현재는 데스크탑용 일반 웹페이지만 있는 php 웹사이트가 있습니다.
추가로 모바일 웹페이지를 고려중인 상황인데요.
관련하여 미리 Test성 개발을 진행해보았습니다.
진행 순서
1. 테스트할 출발 페이지 B를 만든다 (기존 소스 A를 카피함)
2. 모바일 페이지 C를 더미로 만든다 (구분할수 있도록 기존 소스 B 카피해서 title 만 바꾸어둠)
* 해당 서비스를 제가 하고 있는건 아니고 지인분(개발자 아님)이 운영하고 있는건데요.
개발 관련 내용을 물어봐서 바로 답을 얻기는 어려운 상황입니다.
현재 사용하는 서브도메인 ( www.abc.com ) 을 모바일웹에서 ( m.abc.com) 으로 이용할수는 있을텐데...
어떤 상황인지 정확히 알지 못하고, 이 테스트를 위해 그 설정이 될때까지 기다릴수는 없어서
일단 테스트는 기존 www 서브도메인이 연결된 소스 루트에 m 폴더를 만들어서 그 아래에 페이지 C 를 두었습니다.
개발코드 - PHP / JAVASCRIPT
PHP 및 JAVASCRIP 둘 다 진행해보았습니다.
아주 잘 정리된 블로그가 있어서 참고했습니다. ( 감사합니다. http://kiss7.tistory.com/316 )
제가 +@ 한 내용은 (제 글 제목에 표현되기도 했는데)
주소 동적 처리 입니다.
즉...
핸드폰에서 브라우저로
www.abc.com/actor/woman.php/best/leeyeonhee?year=2017&broadcastType=cable
로 접속했을경우
m.abc.com/actor/woman.php/best/leeyeonhee?year=2017&broadcastType=cable
로 돌려주는 식입니다.
요청한 url 을 활용해 일부만 변환해서 다른 주소로 가도록 하는 것이죠.
그런데 아래 실제 코드는 m.abc.com 식으로 한 건 아니고... 앞서 서브도메인 관련 언급한 대로... m 이란 디렉토리 만든 상황대로 했습니다.
즉...
www.abc.com/m/girl.php/best/leeyeonhee?year=2017&broadcastType=cable
그럼 설명은 잠시 뒤로 미루고 소스 먼저^^
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <? session_start(); ?> <? // 모바일 브라우저의 경우 모바일 전용 페이지로 이동 // reference : http://kiss7.tistory.com/316 $mobileKeyWords = array ('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'Windows CE;', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson', 'Mobile', 'Symbian', 'Opera Mobi', 'Opera Mini', 'IEmobile'); $isMobile = 0; for($i = 0 ; $i < count($mobileKeyWords) ; $i++) { if(strpos($_SERVER['HTTP_USER_AGENT'],$mobileKeyWords[$i]) == true) { $isMobile = 1; break; } } if( $isMobile == 1 ) { $mbU = "/m" . $_SERVER['REQUEST_URI']; echo("<script>location.href = '".$mbU."';</script>"); } ?> <script type="text/javascript" language="JavaScript"> var mbU = "<?=$mbU?>"; var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'Windows CE;', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson', 'Mobile', 'Symbian', 'Opera Mobi', 'Opera Mini', 'IEmobile'); for (var word in mobileKeyWords) { if (navigator.userAgent.match(mobileKeyWords[word]) != null) { window.location.href = mbU; break; } } </script> | cs |
* 가독성을 위해 자바스크립트로 이동시키는 부분 28 ~ 38 라인은 주석처리 되어 있던걸 해제 하였습니다.
자바스크립트 이동시키는 기능을 쓰려면 위에 php 부분에서 일부분을 주석처리하면 됩니다.
* PHP 부분에서 페이지 이동은 javascript 기능을 이용하였습니다.
원래 Sample 대로
header("Location: http://이동할주소");
exit;
을 이용하면 잘 될수도 있을텐데 저는 약간 변형해서 for 문 바깥에서 이동시키도록 구현해보았었는데요.
그 상황에서 이런 오류가 발생하더군요 "Warning: Cannot modify header information"
그런데... 제가 아래 코드에는 빼두었지만 원래 인클루드하는 소스들이 있습니다.
즉 제가 변형해서 쓰는 것이 이유가 아니라 인클루드한 페이지와 관련이 있을거 같기도 한데 그 내용은 검토해보지 않았습니다.
그래서 최종 이동기능을 php 에서 담당하지 않고, javascript 가 담당하도록 처리하였습니다.
echo("<script>location.href = '".$mbU."';</script>");
* 동적 처리를 위해 사용한 코드가 $_SERVER['REQUEST_URI'] 입니다.
도메인과 파라미터 부분도 필요하실수 있을텐데요. url 각 부분을 잡아내는 것은 아래와 같이 받아내서 필요한 부분을 사용하시면 될 거 같습니다.
$svHost = $_SERVER['HTTP_HOST'];
$svRqUri = $_SERVER['REQUEST_URI'];
$svQueryStr = $_SERVER['QUERY_STRING'];
저처럼 php에 경험이 많지 않은분들에게는 도움이 될 거 같아서 기초적인 내용이긴 하지만 공유해봅니다
'□ Tech (Software)' 카테고리의 다른 글
| [solved] Oracle 접속 WAS 로그에서 SQLRecoverableException 발생 (0) | 2017.12.02 |
|---|---|
| 웹 풀스택 책 PDF (국내 개인이 정리) (0) | 2017.08.21 |
| 목업 / 프로토타이핑 - 웹사이트 / 프로그램 비교 (0) | 2017.07.31 |
| How to rotate tomcat catalina.out (with logrotate) (0) | 2017.01.09 |
| How to trace log Axis on client side with log4j (0) | 2017.01.06 |
