(카운터) 블로그용 페이지 카운터 개발 중 - 기록 보기

이전 글: (카운터) 블로그용 페이지 카운터 개발, 적용 실험 중... 이번엔 로그 기록을 볼 수 있도록 했다. 추가로 24가지 UI 테마 플러그인도 연결했다. 운영자는 검색, 추가, 삭제가 가능하며(phpmyadmin이 귀찮을 때 좋겠다. 로딩 속도가 상당히 빠르다.) 사용자는 검색, 엑셀 출력이 가능하다. 다음엔 요약 페이지에 그래프로 볼 수 있도록 할 것이다. '정작 중요한 건 순위 글인데···'

PC&웹/웹프로그래밍 2010. 1. 27. 01:04

(jQuery UI) Theme Switcher 사용하기

아래 사이트에는 24가지의 UI 테마가 있다. http://jqueryui.com/themeroller/ 방문자마다 원하는 테마를 설정해서 보게 하려면 아래 페이지에서 플러그인을 연결하면 된다. http://jqueryui.com/docs/Theming/ThemeSwitcher 필요한 것은 jQuery Core와 Cookie 플러그인이다. 관련글: (jQuery) 연결하기 아래처럼 사용하면 쿠키 플러그인이 내장되어 있으니 따로 연결하지 않아도 된다. 때때로 적용이 안 되는 문제가 발생할 수 있다. 연속으로 테마를 바꿀 때는 적용이 잘 되지만, 링크를 통해 페이지를 갱신하거나 처음 테마를 적용할 때는 일부 객체에 테마 적용이 안 되는 현상이 있다. 해결 방법은 jQuery ready 메서드 내에 본문을 숨..

PC&웹/웹프로그래밍 2010. 1. 27. 00:54

(카운터) 블로그용 페이지 카운터 개발, 적용 실험 중...

오래전에 아래 사이트에서 서비스 됐던 블로그 페이지 카운터(Blog Page Counter)를 써본 블로거들이 많이 있을 것이다. http://n-3.net/count/ 일정 시간 후 메인 페이지로 이동한다. ESC를 누르면 색생을 바꿔볼 수있다. 너무 유용하고 기능성 있는 블로그 플러그인이라 꼭 다시 서비스 되기를 기다렸는데... 이런 서비스는 트래픽이 엄청나기 때문에 개인이 하기에 매우 힘들다. · 단순한 카운팅용이라 해도 페이지 경로, 사용자, 누적 카운트는 필수 정보이다. 이 외에는 · 접속자의 모든 정보를 기록을 임시 보관하는 테이블이 필요하다. 임시 기록이므로 삭제되기 전에 통계를 내는 작업을 해야 한다. · IP별로 하루 1회 증가시키려면 방문자 기록용 테이블이 필요하다. · 로봇을 제외 하..

PC&웹/웹프로그래밍 2010. 1. 24. 19:40

(jQuery) 의정부시 CCTV 소스 강좌 - DIV 재정렬

프로그램 소개: http://simulz.com/462 DIV 재정렬 테이블에서 주로 쓰는 정렬 기능을 DIV에 적용했다. var cctv_sort_checked = function() { var row_checked = $('#list div').has(':checked').get(); var row_unchecked = $('#list div').has(':not(:checked)').get(); $('#list').empty(); $.each(row_checked, function(index, row_checked) { row_checked.sortKey = parseFloat($(row_checked).attr('id').replace(/^[^\d.]*/,'')); }); $.each(row_un..

PC&웹/웹프로그래밍 2010. 1. 22. 12:58

(jQuery) 의정부시 CCTV 소스 강좌 - 마우스 스크롤 확대·축소

프로그램 소개: http://simulz.com/462 마우스 스크롤 줌인, 줌아웃 버튼 위에서 마우스 휠을 돌리면 CCTV가 확대·축소 된다. $("↕100%").insertAfter('#reset').hide(); var numWidth = 320; var numHeight = 240; $('#cctv_zoominout').click(function() { numWidth = 320; numHeight = 240; cctv_resize(this); }).mousewheel(function(objEvent, intDelta){ if (intDelta > 0){ if(numWidth >= 1280) return false; numWidth += 160; numHeight += 120; } else if ..

PC&웹/웹프로그래밍 2010. 1. 22. 12:28

jQuery 1.4에서 바뀐 것들

http://api.jquery.com/category/version/1.4/ jQuery 1.4 API Cheat Sheet .add( selector, context ) selectorA string containing a selector expression to match additional elements against. contextAdd some elements rooted against the specified context. .addClass( function(index, class) )function(index, class)A function returning one or more space-separated class names to be added. Receives the index ..

PC&웹/웹프로그래밍 2010. 1. 22. 11:24

(jQuery) 의정부시 CCTV 소스 강좌 - 툴팁, 마우스 오버 효과

프로그램 소개: http://simulz.com/462 툴팁, 마우스 오버 효과 var $tooltip = $('').appendTo('body'); var positionTooltip = function(event) { var tPosX = event.pageX; var tPosY = event.pageY + 20; $tooltip.css({top: tPosY, left: tPosX}); }; var mouseOver = function(event) { $(this).addClass('hover'); var cctvName = $(this).text().replace(/\d+\./, ''); var action = ' 추가'; if ($(this).is('.checked')) { action = '서 ..

PC&웹/웹프로그래밍 2010. 1. 21. 16:17

(jQuery) 의정부시 CCTV 소스 강좌 - 초기화 버튼 토글

프로그램 소개: http://simulz.com/462 초기화 버튼 토글 var toggleResetButton = function() { if($('#list :checked').length) { $('#reset').attr('disabled', false); } else { $('#reset').attr('disabled', true); } } if($('#list :checked').length) ID가 list인 객체에 속해있는 체크박스 중 속성이 checked인 객체들이 있으면, jQuery는 객체가 없어도 값을 반환하므로 .length로 검사해야 한다. $('#reset').attr('disabled', false); ID가 reset인 객체(BUTTON)의 disabled 속성을 제거한다.

PC&웹/웹프로그래밍 2010. 1. 21. 15:55

(jQuery) 의정부시 CCTV 소스 강좌 - 프리셋 선택하기

프로그램 소개: http://simulz.com/462 프리셋으로 선택하기 미리 설정된 CCTV들을 자동으로 선택한다. $('#left_foot button').click(function(){ $('#list :checkbox').attr('checked',false).parent().removeClass('checked'); $.each(cctv_preset(this.id), function() { $('#c' + this).attr('checked',true).parent().addClass('checked'); }); toggleResetButton(); }); $('#left_foot button') ID가 left_foot인 객체에 속해있는 하위 엘레멘트인 button 객체들을 가리킨다. .cl..

PC&웹/웹프로그래밍 2010. 1. 21. 15:27

(jQuery) 의정부시 CCTV 소스 강좌 - 직접 선택하기

프로그램 소개: http://simulz.com/462 CCTV 직접 선택하기 DIV 영역 또는 체크박스를 클릭하면 선택이 된다. $('#list div').click(function(event) { var $check = $(this); if($check.is(':not(.checked)')) { $check.addClass('checked').find(':not(:checked)').attr('checked',true); }else if($check.is('.checked')) { $check.removeClass('checked').find(':checked').attr('checked',false); } mouseOver.call(this, event); toggleResetButton(); })..

PC&웹/웹프로그래밍 2010. 1. 21. 14:54

(jQuery) 서버에 데이터 전송하기

1 text Key1=Value1&Key2=Value2 처럼 보내기 $(document).ready(function() { $('form').submit(function() { $.post('query.php', $(this).serialize(), function(data) { // 받은 데이터를 처리 }); return false; }); }); .serializeArray() 는 항목을 배열로 넘길 때 사용한다. 다른 항목은 생략... 위와 같은 폼을 서버로 보낸다고 할 때 .serialize()로 보내면 서버에서는 $_REQUEST['c0'], $_REQEUST['c1'], $_REQUEST['다른항목'] 처럼 따로 처리를 해야 한다. .serializeArray()로 배열로 만들고 변수에 담아서..

PC&웹/웹프로그래밍 2010. 1. 20. 00:35

(jQuery) 외부 파일 불러오기

HTML $('Selector').load('html.html'); // 전체 코드를 가져옴 $('Selector').load('html.html Selector2'); // Selector2로 매치된 부분만 가져옴 간단한 내용을 추가할 때 좋다. 자바스크립트 $.getScript('script.js'); 자바스크립트 파일을 인클루드 한다. 와 같은 역할을 한다. JSON $.getJSON('json.json', function(data) { $.each(data, function(entryIndex, entry) { // entry['key'] 로 값 불러옴 }); }); 속도가 빠르고 편리하지만 오류를 찾기 힘들다. XML $.get('xml.xml', function(data) { $(data).e..

PC&웹/웹프로그래밍 2010. 1. 20. 00:08

(jQuery) 연결하기

기존의 복잡한 자바스크립트 코드를 대체할 jQuery 라이브러리를 소개한다. jQuery 사이트: http://jquery.com/ 문서: http://docs.jquery.com/Main_Page API추천 사이트 http://remysharp.com/jquery-api/ jQuery 연결하기 jQuery를 사용하기 위해 JS 파일을 자신의 웹서버에 올려놓고 연결해도 되지만 관리의 편리함과 트래픽 감소를 위해 Google AJAX Libraries API에서 연결하는 것을 추천한다. Google AJAX Libraries API http://code.google.com/intl/ko-KR/apis/ajaxlibs/ 여기서 jQuery 항목은 아래 페이지에서 볼 수 있다. http://code.googl..

PC&웹/웹프로그래밍 2010. 1. 18. 17:51

(CSS) Web Slice (웹조각 적용하기)

1. 1. 2. 제목 3. 내용 4. CLASS만 입력하면 됩니다. 전체를 hslice로 클래스명을 입력하고 제목부분은 entry-title 내용부분은 entry-content로 입력해주면 알아서 인식합니다. 2. 웹조각에서 보여줄 페이지를 따로 지정해 주려면 1. 이렇게 DIV대신 A에 rel="entry-content"와 페이지 경로를 입력 해주면 됩니다. 3. Feed 용 1. 방법은 같아요~ 4. 버튼 눌러서 추가하기 1.onclick="external.AddToFavoritesBar( 2. 파일 전체경로#웹조각ID', 3. '메모','slice')" input이나 button, a에 추가할 수 있어요~ 웹조각ID는 DIV등의 id="" 에 해당하는 값을 입력하세요. 참~ 쉽죠잉~

PC&웹/웹프로그래밍 2009. 3. 27. 17:18

Ajax로 실시간 갱신 하기

웹 페이지를 새로고침 하지 않고 내용을 갱신하려면 Ajax를 사용하면 됩니다. 아래 소스로 DB쿼리 및 네이버의 OpenAPI을 사용하여 실시간 출력을 할 수 있습니다. 다운로드 사용 예제 new Ajax.PeriodicalUpdater("rank","nexearch.php",{frequency:3,decay:1}) 설명 new Ajax.PeriodicalUpdater("엘레멘트 ID명","데이터 파일") 옵션을 생략하면 기본값으로 2초마다 갱신해 줍니다. 설정 시간(초)마다 데이터 파일을 읽어와서 ID로 지정한 엘레멘트에 출력해줍니다.

PC&웹/웹프로그래밍 2007. 9. 3. 19:43

나야나 기가 호스팅 서비스 이용 중...

2002년부터 나야나 제로 호스팅을 이용해 오다가 2007년에 서비스 종료를 하였다. 제로보드5, XE에서 필요한 UTF-8이 안됐고 다른 호스팅으로 변경하려해도 서비스 내용 때문에 미루다가... 나야나에서 바람직한 서비스를 시작한 것이다!!! 기가급 호스팅~ 계정용량 1GB 트래픽 1.5GB 바로 질러 버렸다~~ 결정적인 이유는 제로보드XE 오픈과 미술 학원 사이트 제작 의뢰 때문이었다. 제작 중인 사이트 http://simulz.nayana.kr/zbxe/

PC&웹/웹프로그래밍 2007. 8. 22. 18:46

69 PC&웹/웹프로그래밍