WebApp/JavaScript2012. 2. 16. 01:35
아이폰 웹 어플리케이션의 경우 UIWebView를 기반으로 하기 때문에,
일반 네이티브 어플리케이션과 달리 스크롤이 되는데,
이를 방지하기 위해서는 다음의 코드를 입력하면 된다.

<script type='text/javascript'>
document.ontouchmove = function(e){ e.preventDefault(); } 
</script> 


위의 코드를 <head></head>사이에 넣으면 더이상 웹 어플리케이션의 스크롤이 이루어지지 않는다.

'WebApp > JavaScript' 카테고리의 다른 글

Javascript 페이지 이동(리다이렉트Redirect)  (0) 2010.08.13
Posted by 마이클
WebApp/SQL2011. 7. 3. 01:28
MySQL에서 password()함수는 4.1버전 이전까지는 16바이트byte,
그 이후 버전에서는 41바이트byte의 암호화된 값을 반환return한다.

만약 4.1이후 버전에서 그 이전 버전에서 생성한 값과 호환하고자 하는 경우에는
old_password()라는 함수를 사용햐여야 한다.

만약 4.1이후 버전에서 생성된 값을 이전버전에서 사용하고자 하는 경우,
다음 주소에 PHP코드를 참조하기 바란다.

http://www.happyjung.com/gnuboard/bbs/board.php?bo_table=lecture&wr_id=804&sca=PHP
Posted by 마이클
WebApp/PHP2010. 10. 21. 01:33
PHP를 통해 폼으로 파일을 업로드하는 방법을 알아보겠다.

폼 작성 방식은 다른 폼과 크게 차이가 없으나 중요한 점이 하나 있다. 다음 코드를 살펴보자.
<form enctype='multipart/form-data' action='test.php' method='post'>
    <p>
        <label>File: </label><input type='file' name='file' /><br />
        <input type='submit' name='upload' />
    </p>
</form>

위 코드에서 가장 중요한 부분은 form태그 바로 옆에 있는 enctype='multipart/form-data'부분이다.
이 부분이 없으면, $_POST 변수로 파일명만 넘어가게 된다.
만약 $_FILES변수가 NULL값이고, $_POST변수에 업로드한 파일명이 나타난다면, enctype 설정이 잘못된 경우이다.
만약 고쳤는데도 불구하고 계속 이러한 현상이 발생한다면, 페이지에 재접속하여 파일을 업로드해보기 바란다.

업로드가 정상적으로 이루어졌다면 print_r()함수를 통해서 다음과 같은 결과를 얻을 수 있다.
Array
(
    [file] => Array
        (
            [name] => test.gif
            [type] => image/gif
            [tmp_name] => /tmp/phpmTiHI4
            [error] => 0
            [size] => 1596
        )
)

이 파일은 tmp_name이라는 경로로 임시 저장이 되는데, 이 파일을 영구저장하기 위해서는 move_uploaded_file()함수를 사용하여 별도의 경로에 저장을 하여야 한다.

$path = $_SERVER['DOCUMENT_ROOT'].$_FILES['file']['name'];
move_uploaded_file($_FILES['file']['tmp_name'], $path);
첫 번째 인수가 임시 파일의 경로, 두 번째 인수가 파일을 영구 저장할 경로이다.

위와 같이 지정하면 사이트 루트에 파일이 저장된다.

'WebApp > PHP' 카테고리의 다른 글

PHP를 이용한 Header 페이지 이동(리다이렉트Redirect)  (0) 2010.08.13
foreach 배열 반복  (0) 2010.08.12
다차원배열의 구성  (0) 2010.06.26
array_merge()  (0) 2010.06.25
Form과 Input 태그로 배열 넘기기  (0) 2010.06.24
Posted by 마이클
WebApp/Instruction2010. 10. 4. 14:42
1990년대만 하더라도 학교에서 무엇에 대해 조사해오라는 숙제가 떨어지면, 방과후에 도서관을 찾거나 백과사전이 있는 친구집에 방문하여 그것을 얻어보며 과제를 했었다. 그렇게 책장 하나하나를 넘겨가며 내가 원하던 자료를 찾던 때와는 달리 십수년이 흐른 지금은 인터넷이라는 정보의 우물에서 간단히 두레박을 내려 퍼올리기만 하면 되는 시대가 되었다.

만약 자동차에 대해서 알고 싶다면 네이버나 구글 같은 검색엔진에 자동차라는 키워드만 입력하면 된다. 자동차 정의에 관한 백과사전 사이트부터 중고차 매매를 하고 있는 카페의 글까지 자동차에 관한 모든 것을 찾아준다. 하지만 이렇게 검색을 한다고 해서 우리가 자동차에 대한 정보를 올바르게 습득하고 있는가에 대해서는 아직 의문점이 남는다.

바로 그 까닭은 인터넷이 하이퍼링크 기반이라는 점에 있다. 하이퍼링크는 참조와 역참조라는 연결성만이 있을 뿐 순서와 그 체계성에 대해서는 치명적인 결함이 존재하기 때문이다.

자동차에 대한 올바른 이해를 위해서는 그 앞에 선행되어야 하는 지식들-내연기관, 철강산업 등-에 대한 이해가 필요한데, 인터넷에는 그저 키워드에 의한 연관관계로 이들 자료가 조직되어 있을 뿐, 자동차를 직접 만들어 볼 수 있을 정도-캠, 내연기관 등에 대한 이해를 완료한 수준-까지의 체계적 학습은 어렵다는 것이다.

지난 몇 년간 블로그가 엄청난 유행을 거뒀다. 블로그는 글의 시간흐름(시간의 연결성)을 기반으로 페이지를 구성하는 하나의 방식이다. 시간의 흐름을 기반으로 하기 때문에 기존의 지식에 보충이 되는 새로운 소식을 접하고자 하는 사람에게는 굉장히 편리한 방식이다. 그러나 (시간의) 연결성을 강조한 만큼 지식의 체계적 전달이라는 점에 대해서는 취약할 수 밖에 없다.

만약 수학과 관련된 블로그를 보고 있다고 하자. 작성 시간에 따라 삼각함수에 대한 글 뒤에 바로 덧셈에 대한 글이 나올 수도 있고 최근에 발표된 난제 풀이에 관한 논문이 덧셈에 뒤이어 나올 수도 있다. 해당 분야에 대한 기초 지식이 있는 사람들은 문제가 없겠으나, 해당 사이트를 통해 수학을 덧셈부터 곱셈까지 학습하려는 목적으로 방문했다면 해당 자료가 있더라도 체계적 학습에 어려움이 있을 것이다.

때문에 블로그를 일정 테마(나름대로의 체계성)로 구성하지 않는 이상, 검색 유입이 아닌 고정 방문자를 유치하기 힘들다. 이제 블로그를 벗어나 해당분야에 대한 기초지식이 없는 사람도 쉽게 정보를 이해할 수 있는 새로운 페이지 구성방식을 고민할 때가 온 것이다.

앞으로의 사이트 구성방식은 연결성과 체계성을 모두 갖춘 구조가 되어야 한다. 체계성을 확립하기 위해서는 사이트의 뼈대가 되는 메인 메뉴를 인과관계를 따져 논리적으로 배치해야 한다. 또한 인터넷의 장점인 연결성을 확보하기 위해 컨텐츠 하단에 관련항목에 대한 링크를 각주처럼 모아야 한다. 이렇게 두 가지 성질을 확보할 때 좋은 사이트로서 많은 방문자의 사랑을 받을 수가 있을 것이다.
Posted by 마이클
WebApp/CSS2010. 9. 27. 00:53
Internet Explorer 6(이하 IE6) 이하 버전에서는 PNG-24의 알파값이 제대로 표현이 되지 않아, 이미지의 투명한 부분이 불투명하게 나타난다. 이러한 문제를 해결하기 위해서 많은 PNG Fix 코드들이 존재한다. 작동원리는 모두 비슷하다. PNG이미지의 투명한 부분을 GIF 투명한 이미지로 교체하고 알파 값에 대해서는 IE만의 알파 필터를 적용하는 방식이다.

1. Javascript형 PNG Fix
Javascript를 이용해서 PNG Fix를 하는 코드가 있다. 이 코드는 Javascript 부분과 CSS부분으로 나뉘어 작동한다. CSS에서 어떤 오브젝트(태그, 클래스, 아이디)에 PNG Fix를 적용하는지 설정해놓는다. Javascript에는 지정된 오브젝트의 PNG 알파값을 읽어들여서 알파 값에 맞게 1x1px의 blank.gif를 섞어서 이미지를 출력한다.

2. HTC(HTCs:HTML Compoents)를 이용한 PNG Fix
HTC를 이용해서 PNG Fix 코드를 작성한 것도 있다. 서두에서 밝힌대로 작동원리는 모두 비슷하기 때문에 이 코드도 HTC코드 부분과 CSS부분으로 나뉘어 작동한다. HTC는 Microsoft에서 DHTML을 위해서 제정한 문서이기 때문에, PNG Fix를 필요로 하는 IE와 찰떡궁합을 가지고 있다. Javascript 방식과 동일하게 1x1px의 blank.gif를 섞어서 이미지를 출력한다.

둘 다 구현 코드의 언어가 무엇이냐는 차이일 뿐 그 원리는 같다. 그러므로 배경으로 지정된 PNG 파일(style="background-image:url(example.com/example.png)")도 투명하게 만들어 줄 수 있는지 여부를 확인한 후에(지원하지 않는 경우가 많다.) 사이트에 적용하기를 바란다.

Studio[2b]는 2번째 방식인 HTC를 이용한 PNG Fix를 이용하며, 다음 사이트에서 소스를 받아 사용하고 있다.

http://www.twinhelix.com/css/iepngfix/

여기서 파일을 받아 압축을 해제한다. 그 다음 iepngfix.htc와 blank.gif 파일을 도큐먼트가 있는 폴더에 같이 복사하여 넣는다. 마지막으로 도큐먼트 CSS코드에 다음과 같이 입력하면 된다.
div, img {
    behavior: url(iepngfix.htc);
}

'WebApp > CSS' 카테고리의 다른 글

CSS 초기화  (1) 2010.05.30
가운데 정렬  (0) 2010.05.29
Posted by 마이클
WebApp/PHP2010. 8. 13. 15:38
브라우저에 헤더 메시지를 보냄으로써 페이지 이동을 할 수 도 있다.

이 전에 헤더 메시지에 대한 소량의 설명을 하도록 하겠다.
헤더 메시지는 서버와 클라이언트간 본격적으로 송수신하기 전에 있어서 필요한 정보들을 사전에 나누는 것이다.
클라이언트의 브라우저 정보(Firefox, IE 등), 서버의 웹 서버 정보(IIS, Apache 등), 본격적으로 주고받을 데이터의 MIME Type등을 그 내용으로 보낸다.
또한 헤더 메시지로 리다이렉트 정보 또한 전송할 수 있다.
헤더 메시지는 본격적으로 데이터를 주고 받기 전에 보내는 사전 작업이기 때문에 HTML 코드 등의 데이터를 전송한 다음에 헤더 메시지를 보내게 되면 상호간에 오류가 나므로 주의해야 한다.

PHP에서는 header() 함수를 활용하여 헤더 정보를 보낼 수가 있으며, 페이지 이동을 위한 코드는 다음과 같다.
header('Location: http://www.example.com/');
Location을 콜론(:) 이후의 주소로 이동하라는 헤더 메시지이다. 여기에서는 http://www.example.com/이 되겠다.

만약 일정 시간 후에 페이지 이동을 하도록 하려면, sleep() 함수를 이용하면 된다.
sleep(5);
header('Location: http://www.example.com/');
위와 같이 작성하면 5초 후에 페이지 이동이 되지만, 5초 동안 사용자는 공백의 화면을 보고 있어야 한다. 만약 페이지를 이동하기 전에 사용자에게 로딩, 경고 및 안내 화면을 보여주고자 한다면 HTML의 메타 태그를 이용한 방법이나, 자바스크립트를 이용한 페이지 이동 방법을 사용하기 바란다. (포스트 하단에 링크 첨부하였다.)

앞서 말했지만 데이터 전송 전에 보내도록 되어있는 헤더 메시지의 특성 때문에, 페이지를 로드하고 일정 시간 뒤에 다른 페이지로 이동하는 방법은 구현할 수가 없다.(클라이언트가 로드할 데이터가 주어지기도 전에 헤더 메시지가 먼저 주어지기 때문이다.)

---
HTML 페이지 이동(http://studio2b.tistory.com/32)
Javascript 페이지 이동(http://studio2b.tistory.com/33)
PHP를 이용한 Header 페이지 이동(http://studio2b.tistory.com/34)

'WebApp > PHP' 카테고리의 다른 글

Post방식을 통한 파일 업로드File Upload  (0) 2010.10.21
foreach 배열 반복  (0) 2010.08.12
다차원배열의 구성  (0) 2010.06.26
array_merge()  (0) 2010.06.25
Form과 Input 태그로 배열 넘기기  (0) 2010.06.24
Posted by 마이클
WebApp/JavaScript2010. 8. 13. 15:22
Javascript에서 페이지 이동을 하는 방법은 헤드 사이에 다음과 같은 자바스크립트를 넣는 것이다.

이 방법의 핵심은 location.href이다.
<script type='text/javascript'>
<!--
location.href='http://www.example.com/';
//-->
</script>
현재 보여주고 있는 화면의 주소를 http://www.example.com/으로 변경한다는 의미로써,
곧장 http://www.example.com/으로 이동한다.

메타 태그처럼 몇 초 후에 이동하도록 코드를 작성할 수도 있는데 바로 setTimeout을 활용한 방법이다.
<script type='text/javascript'>
<!--
setTimeout("location.href='http://www.example.com/'",5000);
//-->
</script>
setTimeout 함수는 Milisecond단위를 사용하기 때문에 5000은 5초를 뜻한다.
고로 이 코드는 5초 후에 location.href='http://www.example.com'를 실행하라는 의미이다.
여기서 한 가지 중요한 것은 location.href='http://www.example.com'을 둘러싼 큰 따옴표인데,
이것들이 사라지면 5초 후가 아닌 자바스크립트를 읽는 도중에 곧장 실행을 하게 된다.

---
HTML 페이지 이동(http://studio2b.tistory.com/32)
Javascript 페이지 이동(http://studio2b.tistory.com/33)
PHP를 이용한 Header 페이지 이동(http://studio2b.tistory.com/34)
Posted by 마이클
WebApp/HTML2010. 8. 13. 15:06
HTML 태그를 활용해서 리다이렉트를 하는 것은 매우 간단하다.

다음의 한 줄만 헤드 태그 사이에 넣어주면 된다.
<meta http-equiv="refresh" content="5;url=http://www.example.com/" />

여기서 content 뒤에 있는 숫자 5는 페이지가 로딩되고 5초후에 갱신된다는 것이고,
url은 말 그대로 갱신할 때 읽어들일 페이지의 주소이다.

---
HTML 페이지 이동(http://studio2b.tistory.com/32)
Javascript 페이지 이동(http://studio2b.tistory.com/33)
PHP를 이용한 Header 페이지 이동(http://studio2b.tistory.com/34)

'WebApp > HTML' 카테고리의 다른 글

HTML 기본 셋  (0) 2010.08.05
Posted by 마이클
WebApp/PHP2010. 8. 12. 13:31
PHP에는 foreach구문 정의가 있어서 배열 반복을 더욱 쉽게 만들 수 있다. 이 방법이 기존 for구문과는 어떤 차이가 있는지 다음 예제를 통해 설명하고자 한다.

우선 for구문을 통한 배열 반복의 예다.
for($i=0; $i<count($array); $i++) {
echo("Index: ".$i."\t Value: ".$array[$i]."\n");
}
인덱스는 $i로 배열 값은 $array[$i]로 나타난다.

다음은 foreach구문을 통한 배열 반복의 예다.
foreach($array as $key => $value) {
echo("Index: ".$key."\t Value:".$value."\n");
}
인덱스는 $key로 배열 값은 $value로 나타낸다.

인덱스 값이 필요치 않은 경우 다음과 같이 단순화 할 수도 있다.
foreach($array as $value) {
echo("Value: $value \n");
}

foreach구문은 for구문과 동일한듯 하지만 몇 가지 차이점이 있다.
일단 좀더 선언구가 의미 있다. for구문은 선언문에 루프 메커니즘을 사용하지만, foreach구문은 루프 내에서 사용할 데이터를 정의하고 있다.
또한 배열의 모든 인덱스에 대하여 구문을 실행한다. for구문은 자동 배열(인덱스가 0,1,2,3..)에 한해서만 그 처리를 할 수 있다. (물론 소스를 복잡하게 해서 처리하도록 할 수는 있다.) 다음 예제를 통해 설명하겠다.

예를 들어 아래처럼 야구 순위 프로그램에 사용하는 배열이 있다고 하자.
$array = array(0=>"SK", 1=>"Samsung", 2=>"Doosan", 3=>"Lotte", 4=>"Kia", 5=>"LG", 6=>"Hanhwa", 7=>"Nexen", "From"=>"KBO", "Date"=>"20100812");

위 배열을 앞에서 소개한 for구문으로 실행하면 다음과 같은 결과가 나온다.
Index: 0    Value: SK
Index: 1    Value: Samsung
Index: 2    Value: Doosan
Index: 3    Value: Lotte
Index: 4    Value: Kia
Index: 5    Value: LG
Index: 6    Value: Hanhwa
Index: 7    Value: Nexen
Index: 8    Value:
Index: 9    Value:

count에서 알아낸 배열의 크기가 10이므로 10번의 루프는 돌았으나,
숫자를 순차적으로 증가시켜서 찾기 때문에 숫자 인덱스가 중간에 비어있는 배열(인덱스가 0,1,4,5..처럼 중간 숫자가 빠진 경우)이나 문자로 인덱스를 사용하는 배열(From, Date...)에 대해서는 예기치 못한 오류가 발생할 수 있는 것이다.

하지만 foreach구문을 사용하면 다음과 같이 정상적으로 처리할 수 있다.
Index: 0     Value: SK
Index: 1     Value: Samsung
Index: 2     Value: Doosan
Index: 3     Value: Lotte
Index: 4     Value: Kia
Index: 5     Value: LG
Index: 6     Value: Hanhwa
Index: 7     Value: Nexen
Index: From     Value: KBO
Index: Date     Value: 20100812

기능적으로 for구문이 뒤떨어진다고 해서 불필요한 것은 아니다.
앞의 예제처럼 순위 정보와 그에 관련한 정보를 배열 하나에 묶어 놓고, 순위 정보(숫자 인덱스)를 출력할 때에는 for구문을 이용하고 관련 정보(문자 인덱스)를 뽑을 때는 foreach구문을 이용하는 식의 활용을 할 수 있다. 이 방법은 여러 변수를 사용하지 않고 순위에 대한 것들을 변수 하나에 묶을 수 있기 때문에 매우 유용한 방법이다.


Posted by 마이클
WebApp/HTML2010. 8. 5. 05:55
Studio[2b]에서 웹 페이지 제작시 사용하는 기본 틀입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<base href="http://www.example.com" />
<link rel="alternative" type="application/rss+xml" title="RSS Feed" href="/rss/" />
<link rel="shortcut icon" href="http://www.example.com/favicon.ico" />
<title>Example</title>
<meta name="description" content="This is a example page." />
<meta name="keyword" content="HTML, example" />
<style type="text/css">
</style>
<script type='text/javascript'>
</script>
</head>
<body>
</body>
</html>

'WebApp > HTML' 카테고리의 다른 글

HTML 페이지 이동(리다이렉트Redirect)  (0) 2010.08.13
Posted by 마이클