[무료특강] 대학생 대상 공공데이터 활용한 웹개발 및 분석 특강

2018. 11. 6. 20:49

세이박스

웹프로그램

빅데이터 및 데이터 공유 시대에 공공데이터 등 수많은 데이터들이 쏟아져 나오고 있으나 이를 잘 활용하기 위한 실무 중심의 무료 교육(특강)을 준비 했습니다.

그리고, 평일 대학생들이 학교 수업 때문에 좋은 교육을 듣기가 어려웠기에 주말 교육을 어럽게 준비하게 되었습니다.

전문 강사님들을 모시고 2일간 스파르타식의 특강의 기회를 놓치지 마세요!!

□ 과정명 : 공공데이터를 활용한 웹개발 실무 교육

□ 후원 : NIA 한국정보화진흥원

□ 교육대상 : 대학생 (전공 무관, 아무나)

□ 강의료 : 무료

□ 교육기간 : 2018년 11월10일(토), 11월11일(일) / 2일간

□ 교육시간 : 09:00 ~ 22:00 (1일 11시간, 총 22시간)

□ 교육내용 : 공공데이터 활용 개념(이론) / 실습교육(앱 개발, 분석 및 시각화)

□ 준비물 : 노트북

□ 제공 : NIA 한국정보화진흥원 수료증.

□ 교육장소 : 부산광역시 해운대구 센텀동로 41 센텀벤처타운 5층 세미나실 (장소변경시 개별 안내)

□ 주차 : 유료, 주차 지원 불가. 대중교통 이용 권장.

* 공공데이터 개념과 가치를 이해하고, 앱 개발 및 분석,시각화 등 실제 공공데이터를 활용해보는 실습교육을 통하여 데이터의 중요성과 가치를 파악할 수 있는 교육 과정

□ 프로그램

1. 11월10일 1일차 09:00 ~ 22:00

- 공공데이터 개론(정의, 유형, 개방현황 등) 및 활용 주요 사례

- 공공데이터 활용을 위한 데이터 분석기법 이해.

- 개발환경구축 (JDK설치. 아파치톰켓 설치, 이클립스 설치)

- 네이버 데이터 분석하기.

- 네이버 데이터 수집하기.

- 공공데이터 시각화 실습

2. 11월11일 2일차 09:00 ~ 22:00

- 개발환경 구축 (vscode설치, 파이썬 설치, mysql 설치하기)

- 파이썬 기초 문법 이해.

- 크롤링을 이용한 데이터 수집 및 저장.

- Flask 설치하기.

- 공공데이터 포털 가입, 공공데이터 수집하기.

- Flask 웹서버 구축하기.

- 공공데이터 시각화하기.

3. 식사시간

점심 12:00 ~ 13:00, 저녁 18:00 ~ 19:00 (식사 지원은 되지 않음)

□ 강사소개

1. 황승준 강사 (1일차)

- 전문분야 : 프로그래밍, 빅데이터 분석, 클라우드 시스템

- 클라우드 활용 모바일 웹앱 개발 (대구대 SW융합인력양성)

- R을 이용한 빅데이터 분석(한국 HP 교육센터)

- 아두이노 활용 자바기반 IOT네트워크 솔루션 개발자(멀티캠퍼스)

- 웹프로그램밍 심화(부산경상대학교)

- Interactive Web & App Design 핵심역량과정(비트교육센터)

- 클라우드 기반 웹 컨텐츠 개발자 (한국클라우드컴퓨팅연구조합)

2. 최주호 강사 (2일차)

- 전문분야 : IT

- BNK시스템 SM사업팀 오퍼레이터

- 경성대학교 정보전산원 회계,총무,발전기금 관련 프로그램 개발

- 휴먼네트웍스 연구원 안드로이드 기반 드론 컨트롤러

- 부산IT교육센터 모바일 앱 개발자 과정

- 부산IT교육센터 IoT펌웨어 개발자 과정

- 부산IT교육센터 자바 표준 프레임워크 과정

- SBS아카데미 자바 입문 과정

- 빅데이터기반 자바(Java) 응용SW개발 과정

저서1 : JSPStudy의 Java프로그래밍 입문

저서2 : 그누위즈의 PHP&MySQL 웹 프로그래밍 입문 + 활용

□ 관련 교육 문의 :

이경용 010-2694-8424 / ceo@apptools.co.kr

교육 내용 및 신청 : https://onoffmix.com/event/158066

저작자표시비영리변경금지

flask, jsp, 강의, 공공데이터, 대학생, 무료교육, 부산, 빅데이터, 웹개발, 크롤링, 특강, 파이썬

트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

[강의] 서버프로그래밍 관리페이지 제작 + JSON 출력 + 안드로이드앱 연동 교육 (부산)

2016. 3. 3. 23:02

세이박스

웹프로그램

안녕하세요! 안드로이드스터디 운영자 이경용 입니다.

요즘 개발하는 대부분은 앱들이 서버와의 통신을 기본으로 개발되고 있습니다.
하지만 대부분 모바일 앱 개발 관련 교육만 있으며, 서버 중심의 관리페이지 개발에 대해서는 잘 없기에 준비했습니다.
"요기요", "배달의민족", "쿠팡"와 같은 앱의 업소 정보는 매번 바뀔때 마다 앱을 어떻게 업데이트 할까요?
업소 정보는 별도의 웹 환경에서 관리페이지를 만들고 DB와 이미지를 관리하며, JSON으로 앱과 자료를 주고 받습니다.
이러한 관리페이지를 만드는 기본 과정을 학습하고 실습을 통해 만들어 보고자 합니다.
관리페이지를 만드는 언어는 html , css, javascript, php, mysql 를 이용해서 만들니다.
해당 언어의 기초 지식이 있으면 좋지만, 전체 구성을 이해하는것 만으로도 큰 도움이 되실 겁니다.

교육목표 :
- PHP, MySQL을 이용해서 관리페이지를 만들고 JSON으로 출력해서 모바일 앱에서 서버의 자료를 받을 수 있는 관리 시스템을 개발하는 교육과정이다. (안드로이드 JSON 파싱 연동)

교육내용 :
1일차 : 관리페이지와 JSON 통신 구축 소개 및 개발환경 구축
2일차 : 제어문, 반복문, 배열, 함수
3일차 : MySQL 데이터베이스, MySQL 명령
4일차 : PHP와 MySQL의 연동
5일차 : 쿠키와 세션, 관리페이지 로그인 기능 구현
6일차 : 게시판 만들기
7일차 : 자료실 만들기
8일차 : JSON 출력 및 안드로이드 앱 연동
* 교육 내용은 수강생 구성에 따라 내용이 다소 변경될 수도 있습니다.

교육안내 :
1.일시 : 2016년 3월 15일 ~ 4월 7일
2.시간 : 매주 화,목 저녁 7시~10시 (3시간) / 총 8일 (24시간) * 일정은 강사의 사정에 따라 일부 변동될 수도 있습니다.
3.장소 : 해운대 센텀시티 (구체적인 장소는 별도 안내)
4.준비 : 노트북 사양무관 (* 노트북이 없는 경우 문의)
5.비용 : 유료 20만원, 시간당 9천원 정도 입니다. (입금문의 : 010-2694-8424)
6.신청 : 아래 게시글에 코멘트에 비밀글 체크후 연락처, 노트북 유무, 자바실력, 간단소개글 정도 남겨 주시기 바랍니다.
http://www.androidstudy.co.kr/bbs/board.php?bo_table=B11&wr_id=3033
8.접수 : 2016년 3월 14일 까지

* 아래 게시글에 코멘트로 "비밀글" 체크후 이름과 연락처, 서버프로그래밍 및 홈페이지 개발 경험, 참가 이유 등을 남겨 주세요! (접수 확인후 개별 연락 드립니다.)
http://www.androidstudy.co.kr/bbs/board.php?bo_table=B11&wr_id=3033

저작자표시비영리변경금지

Android, db, json, mysql, php, 강의, 개발, 관리페이지, 교육, 데이터베이스, 부산, 서버, 서버프로그래밍, 안드로이드, 연동, 웹, 파싱, 프로그래밍

트랙백 72개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

node.js displays “undefined” on the console

2015. 8. 26. 15:15

세이박스

웹프로그램

node.js 첫 관문인 hello world 출력하는 것으로 시작하게 된다.

그런데, 뜻하지 않게 undefined 메시지를 만나게 된다.

당황하지 말고 아래 설정 옵션을 true 실행해 준다.

module.exports.repl.ignoreUndefined = true;

끝, 드이상 해당 메시지는 나타나지 않는다. ^^;

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=nodejs&wr_id=8

저작자표시비영리변경금지

console, javascript, node.js, undefined, 개발, 노드, 메시지, 서버프로그래밍, 오류, 자바스크립트, 출력

트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

[부산] 서버 연동 앱개발을 위한 관리페이지 제작 및 JSON 출력 만들기 무료 교육 - 재직자대상

2015. 5. 6. 22:41

세이박스

웹프로그램

안녕하세요! 안드로이드스터디 운영자 이경용 입니다.

요즘 개발하는 대부분은 앱들이 서버와의 통신을 기본으로 개발되고 있습니다.
하지만 대부분 모바일 앱 개발 관련 교육만 있으며, 서버 중심의 관리페이지 개발에 대해서는 잘 없기에 준비했습니다.
"요기요"와 같은 앱의 업소 정보는 매번 바뀔때 마다 앱을 어떻게 업데이트 할까요?
업소 정보는 별도의 웹 환경에서 관리페이지를 만들고 DB와 이미지를 관리하며, JSON으로 앱과 자료를 주고 받습니다.
이러한 관리페이지를 만드는 기본 과정을 학습하고 실습을 통해 만들어 보고자 합니다.
관리페이지를 만드는 언어는 html , css, javascript, php, mysql 를 이용해서 만들니다.
해당 언어의 기초 지식이 있으면 좋지만, 전체 구성을 이해하는것 만으로도 큰 도움이 되실 겁니다.
단, 이번 교육은 고용보험 가입이 되어 있는 재직자에 한해서 진행하는 교육입니다.

대상 :
부산지역 고용보험 가입된 재직자

교과목표 :
- PHP, MySQL을 이용해서 관리페이지를 만들고 JSON으로 출력해서 모바일 앱에서 서버의 자료를 받을 수 있는 관리 시스템을 개발하는 교육과정이다.

사전지식 :
- HTML, CSS, JAVASCRIPT, PHP, MySQL 기초 지식

교육일자 :
1주차 - 5/19(화) ~ 5/22(금)
2주차 - 5/26(화) ~ 5/29(금)

교육시간 :
오후 07:00 ~ 10:00 (3시간)

교육장소 :
부산모바일앱개발센터 교육장

교육내용 :
1일차 : 개발환경 설정
2일차 : 관리페이지 로그인 기능 추가
3일차 : 공지사항 기본 기능 만들기
4일차 : 공지사항 첨부기능 추가
5일차 : 공지사항 페이징 추가
6일차 : 공지사항 JSON 출력, 안드로이드 앱 리스트뷰 적용
7일차 : 업소관리 만들기 응용
8일차 : 검색기능 추가

신청방법 :
1. 첨부된 문서를 3개를 다운받아서 작성후 이메일 제출 (제출한 분은 아래 코멘트에 이름과, 연락처를 비밀글로 남겨 주세요)
동명대학교 지역산업인력양성사업단 김미영 담당자앞
mykim@tu.ac.kr
2. 동명대학교 지역산업인력양성사업단에서 검토후 자격여부 확인후 회신 (이메일 또는 전화)
3. 5/14(목)까지 신청서 및 일반현황제출,협약서 제출 단! 협약서는 반드시 컬러스캔하여 메일전송 또는 원본제출

오시는길 안내

2호선 센텀시티역 2번출구에서 하차후
커피빈과 홈플러스 사이 길 5분도보
센텀벤처타운(부산정보산업진흥원 건물) 3층
부산모바일앱개발센터 교육장
부산모바일앱개발센터 : http://bmac.kr/CenterInfo/CenterInfo05.aspx
네이버 지도 : http://goo.gl/2kY5rC
대중교통 이용안내 :
마을버스 : 해운대구3-1, 해운대구3-2
일반버스 : 115, 181, 100, 31, 200, 5-1
좌석버스 : 307
급행버스 : 1002, 1007
문의 : 이경용 010-2694-8424 / ceo@apptools.co.kr
* 주차 비용 받으니 홈플러스 주차장 이용 또는 대중교통 이용을 바랍니다. ^^

* 교육 관련 문의는 이경용 010-2694-8424 / ceo@apptools.co.kr

신청안내 :
http://www.androidstudy.co.kr/bbs/board.php?bo_table=B11&wr_id=2964

저작자표시비영리변경금지

json, mysql, php, 강의, 관리페이지, 교육, 무료, 부산, 서버프로그래밍, 스터디, 안드로이드, 안드로이드스터디, 앱개발, 이경용

트랙백 69개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

JQueryMobile 에서 backround image 적용하기

2014. 12. 4. 03:30

세이박스

웹프로그램

기본 JQueryMobile을 변경하고 싶을땐

크롬에서 F12 눌러서 Element 메뉴에서 적용하고자 하는 영역의 class 이름을 알아 내어서 CSS로 컨트롤 해야함.

저작자표시비영리변경금지

Background, image, jQueryMobile

트랙백 8개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

javascript에서 미리 이미지 로드하기

2014. 5. 23. 04:44

세이박스

웹프로그램

롤오브 메뉴 이미지 또는 이미지 슬라이드의 경우 이미지가 자주 바뀌어야 하는데 이때 매번 서버에서 이미지를 가져오게 하면 트래픽이 많이 발생한다. 또한 모바일의 경우 이동중 인터넷 상태가 않좋으면 이미지 액박이 생기기도 하는데 이때 이미지를 미리 사용자PC에 로드한 다음 불러오는 방법을 이용시 인터넷이 끊어 져도 이미지는 계속 보이게 된다.

img2.src = "images/img2.jpg";

document.getElementById("num1").src = img1.src;
document.getElementById("num2").src = img2.src;
}
</script>

<body onload="javascript:init();">
<img id="num1"><br>
<img id="num2"><br>
<body>

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board05&wr_id=193

저작자표시비영리변경금지

getElementById, image, import, javascript, new image, 로드, 롤오브 메뉴, 이미지, 이미지 슬라이드, 자바스크립트

트랙백 103개, 댓글 1개가 달렸습니다

댓글을 달아 주세요

버크하우스
신고" class="updated" datetime="2014.05.23 04:46 신고">2014.05.23 04:46 신고
잘 보고 가요. 좋은 하루 되세요. ^^

[그누보드] 회원가입시 자동등록방지 코드가 맞지 않습니다. 캡챠(kcaptcha) 에러 해결 방법

2014. 1. 24. 16:50

세이박스

웹프로그램

어느날 갑자기 그누보드 및 배추빌드 사이트에 회원가입 또는 게시판에 자동등록방지 코드 부분이 오류가 생기는 경우가 발생했다면?

---------------------------
웹 페이지의 메시지
---------------------------
자동등록방지용 코드가 맞지 않습니다.
---------------------------
확인
---------------------------

1차 kcaptcha 관련 파일들을 새로 업로드 한다.

/js/jquery.kcaptcha.js
/bbs/kcaptcha_session.php
/bbs/kcaptcha_result.php
재등록 ^^

2차 회원 가입 쪽에도 오류가 나면 해당 코드를 수정한다.

     if (typeof(f.wr_key) != 'undefined') {
        if (hex_md5(f.wr_key.value) != md5_norobot_key) {
            alert('자동등록방지용 코드가 맞지 않습니다.');
            f.wr_key.focus();
            return false;
        }
    }

if(!check_kcaptcha(f.wr_key)) {
return false;
}

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=gnuboard&wr_id=68

저작자표시비영리변경금지

kcaptcha, 게시판, 그누보드, 배추빌드, 에러, 오류, 자동등록방지, 회원가입

트랙백 61개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

file_get_contents() Warning 오류 해결 방법

2012. 2. 4. 09:03

세이박스

웹프로그램

웹호스팅을 이용할 경우 php.ini 수정이 어려운 경우가 있습니다.

특히 외부의 파일을 가져올 경우 allow_url_fopen = 0; 일 경우 1로 수정 해줘야 하지만, 보안상 막아둔 경우 서버를 공용으로 사용하므로 수정을 해주지 않습니다.

저의 경우 cafe24 호스팅을 주로 이용하는데 이곳 역시 allow_url_fopen = 0 으로 되어 있어서 fopen(), file(), file_get_contents() 함수로 외부 URL 을 읽어 들이기가 안됩니다.

Warning: file_get_contents() URL file-access is disabled in the server configuration in

하지만, 오류를 해결하는 방법으로 외부 파일을 읽어 들이는 함수 이용전에 다음과 같이 ini 설정을 임시로 변경해서 사용하면 됩니다.

@ini_set("allow_url_fopen","1");

ini_set() 를 사용해서 해당 페이지에서 일시적으로 allow_url_fopen을 1로 적용해서 이용할 수 있습니다.

하지만, allow_url_fopen 이용시 보안상 취약합니다.

아래 cafe24 호스팅 업체로 부터 답변 받은 내용 입니다.

최근 발생하고 있는 홈페이지 변조나, 피싱 사이트로의 악용은 대부분 게시판의 취약점이나, php 의 취약점에 의해 발생되고 있습니다. 이중에 가장 빈번한 것이 php 의 외부 사이트 소스 실행 기능 (allow_url_fopen)으로 악의적인 프로그램이 실행되어져서 발생이 되고 있습니다.

이러한 문제로 인하여 한국정보보호진흥원에서는 allow_url_fopen 을 허용하지 않기를 권고 하고 있습니다.

allow_url_fopen 을 허용하게 되면 보안적으로 심각한 문제를 초래 할 수 있습니다.

해당 기능을 켜두게 되면, 원격에서 프로그램을 웹사이트에 삽입하여 실행(PHP injection), 대량으로 웹사이트를 변조 할 수 있게 되므로 어느날 갑자기, 홈페이지 화일이 통채로 지워지거나, 데이터베이스 내용이 모두 사라질수도 있습니다.

댓글을 달아 주세요

자바스크립트 이용해서 다음 카페 대문에 iframe 삽입하기

2010. 12. 29. 17:01

세이박스

웹프로그램

다음 카페 대문에 광고 삽입되는것을 보고서 어떻게 구현하는 것일까?
고민하다가 소스를 보니 자바스크립트를 이용하고 있더군요.
일단, 다음 카페 설정에서 대문 설정이 있는데 html 모드로 설정 하시면 태그를 입력 할 수 있습니다.

하지만, <iframe></iframe> 태그는 사용할수 없도록 차단하고 있습니다.
차단 방법이 iframe 단어로 차단하고 있으므로 ifr ame 을 분리 하면됩니다.
하지만 이렇게 태그를 분리하면 iframe 동작을 못하게 됩니다.
따라서, 자바스크립트의 document.write() 를 이용해서 출력해주면 됩니다.

<scRIPT>document.write("<IFR"+"AME height=710 src='http://도메인' frameBorder=0 width=778 height=162 scrolling=no></IFR"+"AME>");</scRIPT>

위 소스처럼 "<ifr"+"ame ..." 으로 분리 해버리면 실제 출력은 "<iframe"으로 되지만 다음카페에서 차단 분석시에는 예외 처리 되어 버립니다.
이로써 카페 대문에 광고 및 필요한 내용을 외부로 부터 가져와서 보여 줄수가 있겠죠.
잘 응용해보세요.

제가 달인쿠폰 배너를 샘플로 제 임시 다음카페에 적용해 봤습니다.
참조 : http://cafe.daum.net/sayboxs

▶ 최신영화, 최신 미국드라마 무료 다운로드...

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board05&wr_id=189

Cafe, html, iframe, javascript, 다음, 대문, 삽입, 설정, 자바스크립트, 카페

트랙백 8개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

Warning: Cannot modify header information - headers already sent by 오류 해결 방법

2010. 12. 27. 09:58

세이박스

웹프로그램

그누보드 및 제로보드 게시판 이용시 다음과 같은 오류 발생할 경우가 있다.

Warning: Cannot modify header information - headers already sent by (output started at /home/public_html/bbs/_head.php:2)

이와같은 오류는 이미지 Header를 출력 했기 때문에 수정할 수 없다라고 합니다.
논리적 오류로써 header 함수가 호출되기 전에 공백또는 문자 등이 이미 사용자에게 열려 있다는 의미입니다.

즉, 오류 페이지와 연관된 모든 페이지들을 확인해서 헤드 및 세션 처리 이전에 출력된 문자나 공백이 없는지 체크 해서 제거 해주면 되겠지만, 소스가 워낙 복잡한 경우 찾기가 쉽지가 않죠.
이때 소스 맨 상단에 ob_start(); 함수를 선언해주면 PHP4이상의 경우 output buffering을 기능을 사용할 수 있어 더이상 Warning 메시지가 나타나지 않습니다.

이와 같은 처리 단점?은 모든 PHP 스크립트 처리를 메모리 버퍼에 담아두었다가 한꺼번에 출력하게 되므로 페이지를 보여주는데 늦어지는 느낌이 날수도 있으며 ob_start()를 중복 사용시 또다른 오류가 발생할 수도 있습니다.

그누보드에서 적용하기 적당한 위치는 /index.php 파일의 맨 상단에 적용 하시면 됩니다.

<?
ob_start();

define("_MW_INDEX_", TRUE); // index 파일
....

▶ 최신영화, 최신 미국드라마 무료 다운로드...

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board02&wr_id=138

headers, ob_start, php, warning, 그누보드, 오류, 제로보드

트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

자바스크립트를 이용해서 여러장의 이미지 롤링하기

2010. 12. 24. 14:31

세이박스

웹프로그램

쇼핑몰 사이트 메인 페이지에 여러 이미지들을 롤링해서 지정된 시간(초) 간격으로 바뀌도록 하는 기능을 만들어 보고자 합니다.

먼저 예제 이미지는 총 4장 입니다.
현재 운영중인 달인쿠폰(http://dalincoupon.com)을 예를 들어 보겠습니다.

1. 이미지 넘버
이미지 넘버는 이미지 상단에 현재 몇번째 이미지 인지 표시해주는 버튼 이미지로써 클릭시 바로 원하는 이미지로 이동할수 있습니다.

<div style="Z-INDEX: 1; LEFT: 0px; WIDTH: 0px; POSITION: relative; TOP: 0px; HEIGHT: 0px; display:block;">
<div style="Z-INDEX: 1; LEFT: 800px; WIDTH: 135px; POSITION: absolute; TOP: 15px; HEIGHT: 0px">
<table border=0 cellpadding=0 cellspacing=0 align=right>
<tr>

<td width=20><a href="#none"><img id='num_1' src="http://dalincoupon.com/images/group/ico1_on_.gif" border=0 onclick="clickImg(1,'/mall/updir/products/99fed6c0.jpg')"></a></td>
<td width=5></td>

<td width=20><a href="#none"><img id='num_2' src="http://dalincoupon.com/images/group/ico2_off_.gif" border=0 onclick="clickImg(2,'http://dalincoupon.com/mall/updir/products/1239dae0.jpg')"></a></td>
<td width=5></td>

<td width=20><a href="#none"><img id='num_3' src="http://dalincoupon.com/images/group/ico3_off_.gif" border=0 onclick="clickImg(3,'http://dalincoupon.com/mall/updir/products/76acc690.jpg')"></a></td>
<td width=5></td>

<td width=20><a href="#none"><img id='num_4' src="http://dalincoupon.com/images/group/ico4_off_.gif" border=0 onclick="clickImg(4,'http://dalincoupon.com/mall/updir/products/94a63cd0.jpg')"></a></td>
<td width=5></td>

</tr>
</table>
</div>
</div>

이미지를 추가 할때 이미지 넘버도 같이 추가 하셔야 합니다.
"num_4" , clickImg(4,'이미지경로') 부분을 변경하시면 됩니다.

2. 대표 이미지 출력
기본적으로 출력된 첫번째 이미지를 적용 합니다.
img 태그에 id값을 "mainImage"로 적용합니다.

<img id="mainImage" src="http://dalincoupon.com/mall/updir/products/99fed6c0.jpg" width="950">

3. 자바스크립트 소스

자바스크립트 내부에 주석을 달아 놨지만 다시 설명을 덧붙이겠습니다.
먼저 페이지 로딩시 지정한 이미지를 배열로 담습니다.
var imgs = new Array();

그리고, timerchecker 라는 변수에 window.setTimeout(); 함수를 담습니다.
이때 적용되는 함수로는 5000 -> 5초 지연후 changeImg() 함수를 호출 됩니다.
이때 nextimg값을 전달 하므로 처음엔 changeImg(2,http://dalincoupon.com/mall/updir/products/1239dae0.jpg);
두번째 이미지 정보를 changeImg() 함수에 전달합니다.

이미지 롤링 함수에서는 전달 받은 idx와 img 값을 이용해서 다음 이미지로 변경 그리고 이미지 넘버역시 함께 변경 합니다.

만약 사용자가 이미지 넘버를 클릭시엔 이용자가 원하는 이미지를 바로 볼수 있도록 clickImg() 함수를 호출합니다.
해당 함수 역시 changeImg() 함수와 동일하지만 단, 지연시간을 20000 -> 20초로 지정하여 사진을 볼수 있는 시간을 지연해 줍니다.
20초가 지나면 다시 원래되로 changeImg() 함수가 5초 간격으로 반복 처리 됩니다.

여기서 한가지 더 응용한다면 이미지 전환할때 슬라이드 효과를 적용할수도 있지만 그럴경우 소스가 매우 복잡해져서 이정도록 적용해 봤습니다.
위 소스를 그대로 적용시 달인쿠폰 상품 이미지가 롤링 되는것을 보실 수 있을겁니다.
달인쿠폰 반값 할인 사이트 참조하세요!
김병만의 달인쿠폰 : http://dalincoupon.com

▶ 최신영화, 최신 미국드라마 무료 다운로드...

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board05&wr_id=184

image, javascript, 롤링, 바꾸기, 변경, 슬라이드, 이미지, 자바스크립트

트랙백 9개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

자바스크립트를 이용해서 링크 클릭시 테이블 보이기 숨기기 style display 활용

2010. 12. 22. 15:14

세이박스

웹프로그램

고객센터 질문과답변 페이지를 보여 줄때 답변 내용이 길게 나올 경우 페이지가 쭉 늘어나 정작 필요한 답변을 찾기가 쉽지가 않습니다.
이럴때 답변은 숨겨 놓고 질문 제목을 클릭하면 답변이 보이며 좀전 열었던 답변은 숨기는 기능을 자바스크립트와 style display을 이용해서 적용해 보겠습니다.

1. 자바스크립트 소스

2. 테이블 소스

3. 소스 설명 :
제목을 클릭시 자바스크립트 QnaShow() 함수를 호출합니다.
이때 함께 전달한 qna 값으로 어떤 질문을 클릭했는지 구분합니다.
먼저 모든 질문을 숨기기 처리합니다.
1번 질문을 본뒤에 2번 질문을 클릭시 1번 질문을 숨기고 2번 질문의 답변을 보여주기 위한 처리인데 일괄적으로 모든 질문의 답변을 숨긴뒤에 원하는 답변만 보여주는 처리 입니다.
열려있는 질문만 숨기기 코딩하면 좋겠지만 오히려 소스가 복잡해줄수 있으므로 질문추가시 자바스크립트 항목중 document.all.qna3.style.display = "none"; 이부분도 함께 추가해 줍니다.
숨기기 처리가 끝나면 var obj = eval("document.all." + qna); 에서 obj로 클릭한 질문의 답변 <tr> id값을 조합합니다.
그리고, obj.style.display = "block"; 에서 지정한 <tr> style의 display 값을 block 으로 적용해서 보이도록 합니다.
이와같은 적용으로 페이지를 다시 접속하지 않고도 보이기 또는 숨기기 적용이 됩니다.

▶ 최신영화, 최신 미국드라마 무료 다운로드...

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=asp&wr_id=34

Display, javascript, qna, Style, 보이기, 숨기기, 자바스크립트, 질문답변, 클립, 테이블

트랙백 6개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

input 입력시 한글만 입력 되도록 또는 영문만 입력 되도록 자바스크립트 제한

2010. 12. 21. 11:58

세이박스

웹프로그램

input 입력시 한글 입력을 style로 막을수도 있지만 자바스크립트로도 막을수 있습니다.
또는 반대로 한글만 입력하도록 적용할 수도 있습니다.

1. 스타일
style='ime-mode:disabled'

2. 자바스크립트
function NumberChk(){
if ((event.keyCode<48) || (event.keyCode>57)) {
event.returnValue = false;
return false;
}else{
return true;
}
}

3. 적용예
<input type="text" name="txt" onkeypress="NumberChk()" style="ime-mode:disabled" />

4. 한글만 입력하도록 자바스크립트 함수 수정
function NumberChk() {
if(event.keyCode=="") {
event.returnValue = false;
return false;
}else{
return true;
}
}

▶ 최신영화, 최신 미국드라마 무료 다운로드...

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board05&wr_id=183

javascript, 영문, 입력, 자바스크립트, 제한, 키보드, 한글

트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

유투브 동영상 블로그에 등록후 접속시 바로 시작 되도록 적용

2010. 12. 3. 11:28

세이박스

웹프로그램

유투브 동영상을 블로그에 올리고 난뒤에 사이트 접속하면 바로 동영상이 시작 되도록 하고 싶을떄가 있죠.
유트부 소스 보기를 해서 가져온 동영상 소스에 src URL 끝에 &autoplay=1 라는 값을 추가 해주면 됩니다.

빨간색으로 표시한 부분이 추가된 부분 입니다.
아래 달인쿠폰 동영상 바로 시작 되는거 보이시죠!

이번에 김병만의 달인 쿠폰 이벤트를 시작하게 되었구요.
많은 관심 바랍니다.
김병만의 달인 쿠폰 : http://dalincoupon.com

▶ 최신영화, 최신 미국드라마 무료 다운로드...

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board06&wr_id=49

Autoplay, YouTube, 동영상, 링크, 바로, 블로그, 시작, 유투브, 접속, 플레이

트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

IE6 브라우저 PNG 투명 이미지 처리 방법

2010. 11. 11. 20:36

세이박스

웹프로그램

오늘 달인쿠폰(http://dalincoupon.com/) 커밍순 페이지를 추가하는 작업을 했습니다.
달인 김병만씨 사진을 PNG로 투명하게 가운데 보이도록 설정하고 배경이미지를 추가 했더니 IE6 브라우저에서 투명 처리 부분이 하늘색으로 보이는 것입니다.

아직은 IE6 이용자가 많다보니 그냥 놔두기엔 아닌것 같더군요.
그렇다고 Gif 파일로 투명하게 하자니 색상이 256이라 김병만씨 사진이 이상하게 되더군요.
자료를 찾아보니 역시나 답은 있더군요.

자바스크립트와 스타일 소스 조금 추가해서 해결하면 되더군요.

먼저 <head>와 </head> 사이에 다음과 같은 소스를 추가 합니다.

1. 자바스크립트 소스

자바스크립트 소스는 스크립트 파일로 따로 분리 하셔도 상관 없습니다.

2. Style 소스

Style소스 역시 Style 파일에 추가하셔도 상관 없구요.

이제 적용할 이미지에 클래스명을 지정해 줍니다.

그럼, 이제 정상적으로 배경이미지가 나올겁니다.

참고로, 달인쿠폰은 소셜커머스 사이트 입니다.
대박 사이트가 곧 오픈 예정입니다.

▶ 최신영화, 최신 미국드라마 무료 다운로드...

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board06&wr_id=48

IE6, png, 김병만, 달인, 배경, 브라우저, 이미지, 쿠폰, 투명

트랙백 6개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

input 박스에 입력시 영문으로만 입력 되도록 하거나 한글로 선택 되도록 설정 ime-mode style

2010. 11. 1. 09:19

세이박스

웹프로그램

로그인 또는 회원가입 할때 사용자로 부터 정보를 입력 받을 때, input 입력 박스를 활용하는데, 이때 사용자 키보드 설정 상태가 한글 또는 영문 상태에 따라 잘못된 값을 입력할 수 있어서 이를 방지 하기 위해 style의 ime-mode를 이용해서 제어 할 수 있습니다.

아이디 : <input type="text" name="login_id" value="" style="ime-mode:disabled">

위 예제는 아이디를 입력 받는 input 박스로써 style속성에 때문에 한글이 입력이 안되며 영문만 입력이 됩니다.
보통 자바스크립트로도 구현 가능하지만 이처럼 스타일을 이용해서 손쉽게 제어 할 수 있습니다.

다음은 ime-mode 옵션에 대한 설명 입니다.

style="ime-mode:auto"
- 현재 선택되어 있는 상태로 한/영중 선택

style="ime-mode:active"
- Default로 한글 선택 되는 모드

style="ime-mode:inactive"
- Default로 영문 선택 되는 모드

style="ime-mode:disabled"
- 무조건 영문만 입력되도록 하는 모드 (한글 입력 안됨)

▶ 최신영화, 최신 미국드라마 무료 다운로드...

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=css&wr_id=25

ime-mode, input, Style, 스타일, 입력, 제어, 키보드, 한글

트랙백 10개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

input 박스에 입력시 영문으로만 입력 되도록 하거나 한글로 선택 되도록 설정 ime-mode style

2010. 10. 29. 16:38

세이박스

웹프로그램

로그인 또는 회원가입 할때 사용자로 부터 정보를 입력 받을 때, input 입력 박스를 활용하는데, 이때 사용자 키보드 설정 상태가 한글 또는 영문 상태에 따라 잘못된 값을 입력할 수 있어서 이를 방지 하기 위해 style의 ime-mode를 이용해서 제어 할 수 있습니다.

아이디 : <input type="text" name="login_id" value="" style="ime-mode:disabled">

위 예제는 아이디를 입력 받는 input 박스로써 style속성에 때문에 한글이 입력이 안되며 영문만 입력이 됩니다.
보통 자바스크립트로도 구현 가능하지만 이처럼 스타일을 이용해서 손쉽게 제어 할 수 있습니다.

다음은 ime-mode 옵션에 대한 설명 입니다.

style="ime-mode:auto"
- 현재 선택되어 있는 상태로 한/영중 선택

style="ime-mode:active"
- Default로 한글 선택 되는 모드

style="ime-mode:inactive"
- Default로 영문 선택 되는 모드

style="ime-mode:disabled"
- 무조건 영문만 입력되도록 하는 모드 (한글 입력 안됨)

▶ 최신영화, 최신 미국드라마 무료 다운로드...

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=css&wr_id=25

ime-mode, Style, 스타일, 영문, 입력, 제어, 컨트롤, 키보드, 한글

트랙백 10개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

자바스크립트로 토스트 배너 (Toast Banner) 슬라이딩 광고 구현

2010. 9. 28. 14:18

세이박스

웹프로그램

엠게임 (mgame.com) 사이트 접속하면 우측 하단에 스르륵 광고가 올라 오는 것을 볼 수 있습니다.
이와 같은 광고 방식을 토스트 Toast 배너 광고 방식 이라고 합니다.
세이박스에도 구현되어 있으니 참고 하시기 바랍니다.
엠게임의 경우 보여주고 사라지는 동작만 자바스크립트로 구현하고 슬라이딩 효과는 플래시로 구현 했더군요.

하지만, 일일이 플래시에서 슬라이딩 효과를 줄려면 광고가 바뀔때 마다 적용해야하니 번거롭겠죠!
따라서, 플래시가 되었던 이미지가 되었던 어떤 내용이던지 슬라이딩 효과를 내도록 적용 해 봤습니다.
그리고, 닫기 기능도 간단하게 추가 해놨습니다.

먼저, 표시될 광고 html 소스 예제 입니다.

위 HTML 소스에서 수정할 부분은 "광고영역"에 배너 이미지 또는 플래시 등의 광고 이미지를 추가 해 줍니다.
style 소스중 "left:-225px;" 부분은 광고를 숨기기 위한 폭이므로 광고 영역보다 조금 크게 설정하시면 보이지 않습니다.

다음은 첨부된 toast.js 파일에서 수정할 부분 입니다.

var toast_ad_width = 236; //광고폭사이즈 (픽셀단위)
var toast_sliding_time = 20; //슬라이딩 속도
var toast_open_time = 5000; //배너 시작 시간
var toast_close_time = 10000; //배너 종료 시간

소스 상단 부분에 위와 같은 설정 항목이 있습니다.
항목별로 설명 합니다.

1. toast_ad_width
이미지폭 즉, 광고 폭을 지정합니다.
광고 사이즈 보다 테이블 폭을 감안해서 조금더 크게 지정 합니다.
단위는 픽셀 단위 입니다.

2. toast_sliding_time
광고 슬라이딩 속도를 지정 합니다.
20의 경우 0.02*2=0.04초 지연 속도에 해당 합니다.
슬라이딩 효과를 보면서 수치를 변경 해보시면 됩니다.
단, 플래시 광고의 경우는 용량이 큰 경우 지정된 시간보다 늦게 슬라이딩 되는 경우도 있습니다.

3. toast_open_time
Toast 광고 시작되는 시간 입니다.
5000으로 설정시 페이지 로딩이 모두 완료된 이후 부터 5초뒤 슬라이딩 효과가 시작 됩니다.

4. toast_close_time
10000 수치 입력시 광고가 오픈된뒤 10초뒤에 자동으로 닫힙니다.

* 만약 아래 [닫기]를 누를 경우 바로 close 됩니다.

적용시 주의 사항!
1. toast.js 파일 경로는 /js/폴더에 동일하게 넣으시고, 만약 경로를 변경할 경우엔 위 html 소스부분도 변경 해 주셔야 합니다.
2. 반드시 div 소스보드 <script .... src=".../toast.js"></script> 소스가 뒤에 있어야 합니다.
3. html 소스는 </body> 태그 바로 앞에 추가 하시는게 좋습니다. 다른 div 설정 영향을 안받기 위해서... 참고로, 세이박스는 그누보드 기반이라 "/tail.sub.php" 파일에 적용 했습니다. 그누보드 이용자라면 참고해서 적용하시기 바랍니다.

▶ 최신영화, 최신 미국드라마 무료 다운로드...

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board05&wr_id=139

javascript, toast, 광고, 배너, 슬라이딩, 자바스크립트, 토스트

트랙백 7개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

자바스크립트에서 숫자 3자리 마다 콤마(,) 삽입 또는 콤마(,) 제거 하기

2010. 9. 1. 15:23

세이박스

웹프로그램

자바스크립트로 사용자가 입력한 숫자에 천단위로 콤마를 삽입 하고자 하거나 빼고 싶을때 필요한 함수 입니다.

예를들어 입력된 값이 1000000원을 1,000,000원으로 바꾸고자 할 경우 setComma(1000000); 함수를 이용하시면 됩니다.
1,000,000원에서 콤마를 빼고 싶다면 RemoveComma('1,000,000'); 함수를 이용 하시면 됩니다.

//1,000단위 마다 콤마(,) 추가 하기

function setComma(str) {
return Number(String(str).replace(/\..*|[^\d]/g, "")).toLocaleString().slice(0,-3);
}

//1,000 단위 마다 콤마(,) 제거 하기

function RemoveComma(str) {
return parseInt(str.replace(/,/g, ""));
}

최신영화, 최신 미국드라마 무료 다운로드...

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board05&wr_id=133

3자리, javascript, 문자, 삭제, 삽입, 숫자, 자바스크립트, 제거, 천단위, 추가, 콤마

트랙백 9개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

[자바스크립트] 문자 자르기 및 특정 문자로 분리하기

2010. 7. 29. 11:15

세이박스

웹프로그램

자바스크립트에서 문자를 자르거나 분리하기 위한 방법 입니다.

1. 문자를 특정 위치로 부터 지정한 길이 만큼 자리기
함수 : substr()

var a = "123456789";
var b = a.substr(0,3);
alert(b); //결과 : 123

var c = a.substr(5,2);
alert(c); //결과 : 67

php의 경우 substr(변수,자를위치,자를갯수)이미지만 자바스크립트에서는 변수.substr(자를위치,자를갯수) 방식으로 사용합니다.
자를위치는 문자열 처음이 1이 아닌 0으로 되어 있습니다. 즉, 0,1,2.. 이렇게 시작하니 착오 없으시길 바랍니다.

2. 문자열에서 특정 문자 기준으로 자르기
함수 : split()
적용예 :

var a = "010-1111-2222";
var b = a.split("-");

alert(b[0]); //결과: 010
alert(b[1]); //결과: 1111
alert(b[2]); //결과: 2222

전화번호를 예로 "-" 기준으로 잘라서 저장해 보았습니다.
"-" 는 제거되며 "-"기준으로 각 값들이 배열로 저장 됩니다.

javascript, text, 문자, 분리, 자르기, 자바스크립트, 텍스트, 함수

트랙백 8개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

그누보드(배추빌드) 기반 전광판 만들었습니다.

2010. 6. 17. 11:09

세이박스

웹프로그램

전광판 기능 입니다. 아직 초기작이라 디테일한 기능은 없습니다.
추후 요청시 기능을 반영하고자 합니다.
예를 들어 당일 게시글에 한해서만 노출하기라던지 또는 함수 함수 호출시 폭지정 등을 할 수 있도록 개선 할 예정 입니다.
일단 현재 버전에서는 latest.skin.php 파일에서 폭,높이 등을 수정 하셔야 합니다.

전광판 노출 옵션 설정 : /skin/latest/saybox.display/latest.skin.php
cont.width = 380; //폭수정
cont.height = 15; //높이수정
cont.scrollspeed = 20; //글자 스크롤 속도(20->0.02초)
cont.pausedelay = 3000; //글자 머무는 시간 (3000->3초)
cont.pausemouseover = true; //마우스 올렸을때 멈춤 기능

설치경로 : /skin/latest/saybox.display

latest 적용예 :
<?=캐시함수("saybox.display", "게시판", 노출갯수, 글자길이, 이미지유무, 갱신시간)?>

캐시함수는 아래 2가지 함수중 사용 :
- mw_latest_rand() : 랜덤으로 글 가져옴 (캐시 미적용)
- mw_latest() : 최근글 (캐시사용)

게시판 : 게시판 테이블명 입력

글자길이 : 지정한 길이 이상일 경우 "..." 처리 됩니다.

이미지유무 : 0 (고정, 이미지 사용하지 않으므로)

갱신시간 : 기본값 설정값 $mw[config][cf_index_cache] 또는 임의 시간 지정 (mw_latest() 함수 이용시만 적용됨)

세이박스 적용 예)
<?=mw_latest_rand("saybox.display", "display", 5, 50, 0, $mw[config][cf_index_cache])?>

적용 페이지 : http://www.saybox.co.kr
등록 게시글 : http://www.saybox.co.kr/bbs/board.php?bo_table=display

추가 기능 및 개선 사항에 대해선 이곳에 코멘트 남겨 주세요!
기능 개선해서 올려 드리겠습니다. ^^

그리고, 사이트 적용시 반드시 아래 코멘트에 적용할 곳 남겨 URL 남겨 주시기 바랍니다.
안그럼 미워 할겁니다. ^^ ㅋㅋ

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=gnuboard&wr_id=33

Display, skin, 광고, 그누보드, 배추빌드, 스킨, 전광판

트랙백 9개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

자리수 지정한 문자로 채우기 str_pad()

2010. 6. 9. 16:18

세이박스

웹프로그램

PHP에서 특정 자리수 만큼 지정된 문자로 변경하고자 할 때 간단하게 str_pad() 함수를 이용하면 편리 합니다.
예를들어 1~20까지의 숫자가 있는데 1~9까지는 2자리수로 맞혀 주기 위해 앞에 "0"을 붙이고자 할 경우

str_pad($a, 2, "0", STR_PAD_LEFT);

라고 하면 간단하게 1~9 인경우 앞에 "0"이 붙게 됩니다.
기타 옵션에 따른 결과를 간단히 설명하겠습니다.

<?
$input = "test";
echo "<br>1:".str_pad($input, 8)."s";
echo "<br>2:".str_pad($input, 8, "*", STR_PAD_LEFT)."s";
echo "<br>3:".str_pad($input, 8, "*", STR_PAD_BOTH)."s";
echo "<br>4:".str_pad($input, 5 , "***")."s";
?>

결과 :
1:test s
2:****tests
3:**test**s
4:test*s

1번은 변경할 문자를 입력하지 않을 경우 " " 부족한 자릿수 만큼 우측에 공백으로 추가합니다.
2번의 경우는 LEFT 부족한 자리수 만큼 왼쪽부터 채우며,
3번 BOTH는 좌,우 모두 균등하게 배치합니다.
만약 남은 공백이 5칸인경우 좌측에 2칸, 우측에 3칸을 추가 합니다.
4번은 변경할 값이 *** 3자리 이지만 자리수를 5칸으로 지정 했기에 * 하나만 적용되었습니다.

다양한 옵션으로 상황에 맞게 적용 하시면 됩니다.

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board02&wr_id=137

php, str_pad, 명령어, 문자, 자리수, 채우기, 함수

트랙백 9개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

드림위브에서 특정 확장자를 php 또는 asp, jsp 확장자로 인식 하게끔 적용하기

2010. 4. 22. 15:55

세이박스

웹프로그램

1. 드림위버에서 .say 확장자 오픈 되도록 적용

드림위버를 실행후 메뉴 > Edit > Preferences > File Types / Editors > Open in code view:
항목에 .say 추가 합니다.

.js .asa .css .cs .config .inc .txt .as .asc .asr .vb .say

2. 드림위버에서 .say 확장자 파일을 불러올 때 php 코드 부분 컬러를 변경 되도록 적용

C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\DocumentTypes\MMDocumentTypes.xml

파일을 EditPlus 또는 메모장으로 열어서 Ctrl + F 찾기에서 "php"를 찾습니다.

위 소스 라인에서 ,say 라고 추가 한것 처럼 추가 하시면 됩니다.

3. 드림위버 종료후 재시작
반드시 위 사항 적용후 다시 실행 해야 적용 됩니다.
이제 드림위버에서 index.say 라는 파일을 오픈시 바로 열리면서 php 코드가 있으면 지정된 코드 컬러로 표시 될 겁니다.
이와 같이 php 뿐만 아니라 asp, jsp, html 등의 컬로로도 지정 하 실수 있습니다. (2번 항목 응용)
테스트는 Dreamweaver CS3, Dreamweaver CS4 에서만 해봤기에 이하 버전에서도 동일하게 처리 되는지는 확인 하지 못했습니다.

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board02&wr_id=134

adobe, asp, CS3, CS4, Dreamweaver, html, jsp, php, 드림위버, 열기, 확장자

트랙백 9개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

비밀번호 변경시 임의 문자와 숫자 조합으로 생성후 회원에게 이메일 전송 (비번 암호화 원리 팁)

2010. 4. 19. 15:14

세이박스

웹프로그램

회원가입후 비밀번호를 잊은 경우 기존 비번이 암호화 처리 되어 있어(개인정보 보호법에 의해 비밀번호 암호화 의무화) 비번을 임의로 생성후 메일로 발송해야 합니다.
문자 조합을 간단하게 해 버릴 경우 해킹 시도시 비번찾기를 이용해서 이메일로 수신된 비번을 보지 않아서 추측해서 알아 낼 수 가 있습니다.
예로 "aa1234bb" 라는 임시 비번으로 생성해서 회원에게 발송하는데, 항상 숫자 부분만 변동해서 보내 준다면 해커는 역으로 0000~9999까지 조합해서 임의로 접속 시도를 해볼수 있게 됩니다.

간혹 보안 적용이 허술한 사이트의 경우 위와 같이 비번을 발송해주는 곳이 더러 있더군요.
개인정보 유출 사고는 위와 같이 개발자의 부주의가 매우 크다고 보면 됩니다.

문자 조합을 복잡하게 하는게 복잡하지도 않습니다.
아래처럼만 처리 해주셔도 랜덤한 값이 되므로 효과 적입니다.

<?
$pw = "0123456789abcdefghijklmnopqrstuvwxyz";
$temp_pw = "";
for($i=0;$i<10;$i++) {
$temp_pw .= $ipwd[rand(0,35)];
}
echo $temp_pw;
?>

위와 같이 적용시 10자리의 랜덤한 문자 조함 결과가 나옵니다.
더욱 복잡하게 하고 싶으시면 $pw에 문자를 더 추가한 다음 rand(0,35) 값을 더 늘려 주시면 됩니다.
비밀번호 길이 또한 좀더 보안 하고 싶으시면 for() 문에서 10을 더 올려 주시면 더 복잡한 비번이 되는 것입니다.

[추가팁]

간혹 비번을 암호화 하는 방법에 대해 궁금해 하시는 분들을 위한 팁

1. 회원이 입력한 비번을 저장시 간단하게 적용하는방법
- mysql을 이용한다면 insert 경우 저장할 변수에 password() 함수를 이용해서 넣는다.
예) insert member into (passwd) values (password('비번'));

2. 로그인시 입력한 비번이 맞는지 확인
select * from member where id='아이디' and passwd = password('입력한 비번')
값이 있으면 본인, 아니면 로그인 실패처리

3. 비번 찾기시 임의 비번 발송
select * form member where '기타 회원정보로 본인 확인'
- 값이 있으면 위 임의 조합 비번으로 기존 비번 변경
예) update member set password = password('임의 문자 조합 비번') where '본인';
- 변경된 임의 문자 조합 비번 회원의 이메일로 발송

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board02&wr_id=133

mysql, password, php, 메일, 문자조합, 보안, 비밀번호, 비번, 암호화, 프로그래밍, 회원

트랙백 6개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

비밀번호 변경시 임의 문자와 숫자 조합으로 생성후 회원에게 이메일 전송 (비번 암호화 원리 팁)

2010. 4. 19. 15:14

세이박스

웹프로그램

회원가입후 비밀번호를 잊은 경우 기존 비번이 암호화 처리 되어 있어(개인정보 보호법에 의해 비밀번호 암호화 의무화) 비번을 임의로 생성후 메일로 발송해야 합니다.
문자 조합을 간단하게 해 버릴 경우 해킹 시도시 비번찾기를 이용해서 이메일로 수신된 비번을 보지 않아서 추측해서 알아 낼 수 가 있습니다.
예로 "aa1234bb" 라는 임시 비번으로 생성해서 회원에게 발송하는데, 항상 숫자 부분만 변동해서 보내 준다면 해커는 역으로 0000~9999까지 조합해서 임의로 접속 시도를 해볼수 있게 됩니다.

간혹 보안 적용이 허술한 사이트의 경우 위와 같이 비번을 발송해주는 곳이 더러 있더군요.
개인정보 유출 사고는 위와 같이 개발자의 부주의가 매우 크다고 보면 됩니다.

문자 조합을 복잡하게 하는게 복잡하지도 않습니다.
아래처럼만 처리 해주셔도 랜덤한 값이 되므로 효과 적입니다.

<?
$pw = "0123456789abcdefghijklmnopqrstuvwxyz";
$temp_pw = "";
for($i=0;$i<10;$i++) {
$temp_pw .= $ipwd[rand(0,35)];
}
echo $temp_pw;
?>

위와 같이 적용시 10자리의 랜덤한 문자 조함 결과가 나옵니다.
더욱 복잡하게 하고 싶으시면 $pw에 문자를 더 추가한 다음 rand(0,35) 값을 더 늘려 주시면 됩니다.
비밀번호 길이 또한 좀더 보안 하고 싶으시면 for() 문에서 10을 더 올려 주시면 더 복잡한 비번이 되는 것입니다.

[추가팁]

간혹 비번을 암호화 하는 방법에 대해 궁금해 하시는 분들을 위한 팁

1. 회원이 입력한 비번을 저장시 간단하게 적용하는방법
- mysql을 이용한다면 insert 경우 저장할 변수에 password() 함수를 이용해서 넣는다.
예) insert member into (passwd) values (password('비번'));

2. 로그인시 입력한 비번이 맞는지 확인
select * from member where id='아이디' and passwd = password('입력한 비번')
값이 있으면 본인, 아니면 로그인 실패처리

3. 비번 찾기시 임의 비번 발송
select * form member where '기타 회원정보로 본인 확인'
- 값이 있으면 위 임의 조합 비번으로 기존 비번 변경
예) update member set password = password('임의 문자 조합 비번') where '본인';
- 변경된 임의 문자 조합 비번 회원의 이메일로 발송

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board02&wr_id=133

mysql, password, php, 메일, 문자조합, 보안, 비밀번호, 비번, 암호화, 프로그래밍, 회원

트랙백 11개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

[활용팁] 그누보드에 RSS 피드 활성화 하기

2010. 3. 26. 13:42

세이박스

웹프로그램

RSS는 사이트에서 제공하는 자료를 손쉽게 회원에게 빠르게 전달하는 기능을 제공하고 있습니다.
요즘 티스토리와 같은 블로그에 접속해 보면 위 그림 처럼 브라우저의 RSS 피드가 활성화 되는것을 보실 수 있습니다.
보통 브라우저 우측 상단에 보시면 주황색 전파 표시 아이콘 입니다.
해당 피드 아이콘을 클릭하면 현재 페이지에서 제공해주는 RSS를 바로 볼 수가 있습니다.
특히 검색 엔진 로봇의 경우 해당 피드를 손쉽게 이용해서 자료를 참조 할 수 있어 방문자 유입에 필수라 해도 과언이 아닐 것입니다.

저역시 RSS 버튼이 웹사이트 상에 있는데 왜 브라우저에서 활성화가 안될까하고 고민후 티스토리 소스를 확인 해보니 역시 <link /> 테그가 추가 되어 있더군요.
즉, 해당 페이지의 RSS 피드는 <link href="" /> 에 있습니다. 라고 알려줘야 한다는 것입니다.

그누보드(배추빌드)의 경우 해당 소스가 없을 것입니다.
아래와 같이 적용 하시면 게시판인 경우 테그가 적용 되도록 했습니다.
저의 경우 /head.sub.php 파일에 <head></head> 테그 안에 적용 해 놨습니다.

<? if($bo_table!="") { ?>
<link rel="alternate" type="application/rss+xml" title="세이박스 - <?=$board['bo_subject']?>" href="http://www.saybox.co.kr/bbs/rss.php?bo_table=<?=$bo_table?>" />
<? } ?>

저의 경우 모든 게시판이 RSS 허용 되어 있어서 위와 같이 간단하게 처리 했지만, 만약 RSS 허용 하지 않은 게시판이 있다면 RSS허용 유무 조건을 추가 하시던지 RSS 적용한 게시판에 한해서만 나타 나도록 적용하셔야 합니다.

그럼, 유용한 정보가 되시길 바랍니다.

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=gnuboard&wr_id=28

feed, RSS, 그누보드, 배추빌드, 피드, 활성화

트랙백 10개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

HTML base URL 활용하는 방법

2010. 3. 10. 14:41

세이박스

웹프로그램

base url 이란?
현재 디렉토리를 지정한 디렉토리로 변경 해주는 기능 입니다.

조금 설명을 구체적으로 하면 다음과 같습니다.
브라우저에서 특정 사이트를 접속시 일단 html 소스를 읽어 옵니다.
그리고 html 소스를 순서대로 분석하면서 이미지, 플래시, 동영상 등의 파일을 다시 불러와서 내컴퓨터 임시 폴더 영역에 저장 합니다.
임시로 저장하는 영역은 IE 7.0인 경우 다음 경로와 같습니다.
브라우저 메뉴 > 도구 > 인터넷 옵션 > 설정 > 파일보기
를 클릭하면 앞전에 받았던 이미지 등이 보일 것입니다.

예) <img src="/images/test.jpg">

브라우저에서 읽어온 html 소스에 예와 같은 이미지 테그가 있는경우 브라우저에서는 자동으로 접속한 도메인을 base url로 생각하고 이미지를 받아 옵니다.
즉, <img src="http://접속한도메인/images/test.jpg"> 처럼 적용해서 이미지를 받아올 때
http://접속한도메인/images/test.jpg 로 불러 오게 됩니다.

base url 적용 소스 :

위 소스를 html 소스 맨 상단에 입력 해주면 이하 소스들은 위 URL을 기본 도메인 처리 됩니다.

예) 접속한 사이트는 http://www.naver.com/ 이지만 base url은 http://www.saybox.co.kr 인경우
<img src="/images/test.jpg"> 이와 같은 이미지 경로는 http://www.naver.com/images/test.jpg 가 아닌 http://www.saybox.co.kr/images/test.jpg 에서 불러오게 됩니다.

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board06&wr_id=34

base, html, tag, url, 베이스, 소스, 이미지경로, 태그

트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

그누보드에서 일반 블로그 처럼 메타테그 적극 활용하기

2010. 3. 4. 14:50

세이박스

웹프로그램

홈페이지 title 및 메타태그는 방문자 유입을 위한 가장 기본적인 기능이다.

검색 엔진(로봇)의 경우 홈페이지의 title 또는 메타 태그 내용을 기반으로 검색어를 생성 하므로 게시판 내용의 경우 제목영역이 title이나 메타태그로 지정 되면 매우 효과 적이다.

이러한 특성을 잘 살리고 있는것이 블로그 들이다.

티스토리의 경우 역시 게시글의 제목을 <title>제목</title> 형식으로 이용해서 검색 노출에 매우 좋은 효과를 보이고 있다.

하지만, 그누보드의 경우 "사이이트명 > 게시판 제목 ..." 형태로 표시되어서 검색 효과를 보지 못하게 됩니다.

따라서, /head.sub.php 에서 "//title 적용 부분" 주석 처리 된 부분을 다음과 같이 수정하시면 각 페이지 환경에 맞게 출력이 됩니다.

//title 적용 부분
if($write['wr_subject']) { //게시판 본문 적용
$g4['title'] = $write['wr_subject']." - ";
} else if($board['bo_subject']) { //게시판 리스트 적용
$g4['title'] = $board['bo_subject']." - ";
}
//모든페이지 적용
$g4['title'] .= $config['cf_title']." - 개발자 커뮤니티 포탈";

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=gnuboard&wr_id=27

php, title, 그누보드, 메타태그, 제목, 활용팁

트랙백 11개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

자바스크립트 팝업을 띄우기 실패시 별도의 메시지 보여주기

2010. 2. 11. 05:50

세이박스

웹프로그램

자바스크립트(javascript)에서 팝업 띄우기를 실패 할 경우 alert 메시지로 팝업차단을 변경 할 것을 요청하는 방법

팝업을 해지 해야만 서비스 가능한 경우 위와 같이 처리 하면 가능할 것 같습니다.

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board05&wr_id=114

javascript, popup, 자바스크립트, 차단, 팝업, 해지

트랙백 9개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

PHP 특정 폴더 내에 있는 파일들을 선택적으로 삭제 하고자 할 때

2010. 2. 8. 12:06

세이박스

웹프로그램

간혹 특정 폴더(디렉토리) 내에 있는 파일들 중에 전체 또는 선택 적으로 일괄 삭제를 해야 할 경우가 있습니다.

다음과 같은 함수를 할용하시면 됩니다.

1. opendir(path)
path 지정한 경로의 폴더안에 있는 파일들을 불러 옵니다.
예)

<?php
$dir = "/etc/php5";

// 알고 있는 디렉토리를 열어서, 내용을 읽어들이는 작업입니다.
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
echo "filename: $file : filetype: " . filetype($dir . $file) . "\n";
}
closedir($dh);
}
}
?>

결과)
filename: . : filetype: dir
filename: .. : filetype: dir
filename: apache : filetype: dir
filename: cgi : filetype: dir
filename: cli : filetype: dir

2. glob(패턴)
파일의 패턴을 호출할때 사용합니다. 예로 *.txt 라고 하면 txt 확장자 파일을 모두 찾아 줍니다.
예)

<?php
foreach (glob("*.txt") as $filename) {
echo "$filename size " . filesize($filename) . "\n";
}
?>

결과)
funclist.txt size 44686
funcsummary.txt size 267625
quickref.txt size 137820

3. unlink(파일)
지정한 파일 및 폴더를 삭제 합니다. 위 함수를 이용해서 찾은 파일을 삭제하고자 할때 이용합니다.
예)

<?php
$fh = fopen('test.html', 'a');
fwrite($fh, '<h1>Hello world!</h1>');
fclose($fh);

mkdir('testdir', 0777);

unlink('test.html');
unlink('testdir');
?>

결과) 지정한 파일 삭제

삭제할 파일의 폴더에 지울수 있는 권한이 있어야 합니다.

[출처] 세이박스 - http://www.saybox.co.kr/bbs/board.php?bo_table=board02&wr_id=131

glob, opendir, php, unlink, 디렉토리, 삭제, 일괄, 파일, 폴더

트랙백 9개, 댓글 0개가 달렸습니다

'웹프로그램'에 해당되는 글 286건

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요

댓글을 달아 주세요