MES 시스템 - 데이터 수집 분석 통계 웹프로그램

이번에 개발 중인 시스템입니다. 생산공장에서 사용합니다.   생산 제품의 검사 정보를 수집, 통계, 분석하는 웹 프로그램입니다.   개발시작: 2013년 05월 서버 개발언어: PHP, Javascript 서버 개발프레임웍: XE, jQuery(jQGrid, jQPlot) - opensource 서버 데이터베이스: MySQL 클라이언트 개발언어: Visual Basic 6   시스템 구성 1. ..
PC&웹/웹프로그래밍 2013.05.25 13:06
(jQueryMobile) 모바일용 디자인

jQuery의 Mobile을 사용하면 스마트폰용으로 디자인을 할 수 있다. IE9에서는 이미지가 깔끔하게 나오지 않고 효과도 볼 수 없다. 구글 크롬에서 완벽하게 테스트 해볼 수 있다. 아래 페이지는 BOINCSTATS 통계 보기를 모바일용으로 꾸민것이다. http://simulz.kr/dev/boinc/create_user_img_mobile.php Input의 type값을 search로 설정하면 아래처럼 내용 삭제 버튼이 추가 된다...
PC&웹/웹프로그래밍 2011.07.30 13:17
(jQuery) 7세그먼트, FND 포트 계산기

jQuery를 사용하여 FND 계산기를 만들었다. 미리보기 http://simulz.kr/dev/elec/7seg/ 기능 100% 버튼위에서 마우스 휠을 돌리면 확대·축소, 누르면 원래대로 FND 색상 설정 FND 추가·삭제 UI 테마 변경 추가할 기능 포트 순서 변경 결과 값 저장 등등등

PC&웹/웹프로그래밍 2010.03.29 00:37
(jQuery) 이미지 카운터 실시간 갱신하기

준비물: (jQuery) 연결하기 블로그 이미지 그래프 카운터를 자동 새로고침 해보기. 아래 자바스크립트코드를 SCRIPT에 삽입하거나 JS 파일로 저장하여 연결한다. $(document).ready(function($){ var refresh_StatGraph = function() { var time = new Date().getTime(); var StatGraph = $("img[..
PC&웹/웹프로그래밍 2010.02.09 14:14
(jQuery) 다음뷰 추천 버튼 바꾸기, 관련글 지우기

준비물: (jQuery) 연결하기 다음뷰 추천 플래시를 작은 것으로 바꾸고 그 아래에 표시되는 관련글을 삭제할 수 있다. 아래 자바스크립트 코드를 SCRIPT 태그로 감싸거나 JS 파일로 저장해서 연결한다. $(document).ready(function($){ var daumview = $('.blogger-news-widget'); $('.blogger-news-widget').html(daumview.html().replace('..
PC&웹/웹프로그래밍 2010.02.07 17:56
(jQuery) JSONP로 크로스 도메인 원격 데이터 가져오기

준비물: (jQuery) 연결하기 브라우저 기본 보안 설정으로는 현재 페이지의 호스트가 아닌 다른 서버에 HTTP 요청을 할 수 없다. 하지만 JSONP를 사용하면 보안 설정을 바꾸지 않고도 원격 데이터를 가져올 수 있다. 이 블로그에서는 게시물 아래 인기순 Top 글 목록에 적용되어있다. 데이터를 보내줄 원격 도메인 쪽에 JSON 형식으로 출력하도록 PHP 스크립트 코드를 작성한다.<?php $..
PC&웹/웹프로그래밍 2010.02.06 16:59
(jQuery Plugin) CyclicFade 깜빡이는 효과 적용하기

준비물: (jQuery) 연결하기비표준 <blink> 태그를 jQuery 플러그인으로 부드럽게 깜빡이는 효과를 줄 수 있다. 자바스크립트 연결하기<script type="text/javascript" src="http://www.bugzappy.com/demos/cyclic-fade/jquery/jquery.cyclic-fade.js"></script> 제작자 원문: http://www.bugzapp..
PC&웹/웹프로그래밍 2010.02.06 10:59
(jQuery) 블로그 태그 목록을 버튼으로 섞기

준비물: (jQuery) 연결하기미리보기http://simulz.com/tag관련글(jQuery) 태그 목록 섞기(jQuery) 티스토리 태그 목록 컬러풀하게~이번엔 버튼으로 섞어보자.버튼을 누르면 글자 색상, 크기가 임의로 지정되고 순서가 섞이게 된다.이전 글(관련글 참고)에서 작성한 코드를 재사용하기 위해 함수 안에 넣는다. var tag_random = function() { var taglogli = $('...
PC&웹/웹프로그래밍 2010.02.05 20:12
(jQuery) 블로그에 로딩 중 표시하기

준비물: (jQuery) 연결하기 이 블로그에 적용되어 있다.HTML에서 로딩 메시지 코드를 추가한다. 문서 상단에 추가할 수록 빨리 보인다. <html> 바로 밑에 넣어도 된다. <div id='loading'>로딩 중...</div> CSS에 추가한다. #loading { border: 1px #000 solid; background-color: #eee; font-siz..
PC&웹/웹프로그래밍 2010.02.05 19:14
(jQuery) 태그 목록 섞기

준비물: (jQuery) 연결하기미리보기http://simulz.com/tag 관련글: (jQuery) 티스토리 태그 목록 컬러풀하게~ 새로고침할 때마다 목록이 섞인다. ABC, 가나다였던 태그 목록을랜덤 정렬로 변경해보았다. $.shuffle Plugin http://mktgdept.com/jquery-shuffle 위 사이트에서 js 파일을 내려 받고 사이트나 블로그에 업로드 한다. HTML HEAD에 아래 코드를 추가하여 JS를 연..
PC&웹/웹프로그래밍 2010.02.05 17:56
(jQuery) 티스토리 태그 목록 컬러풀하게~

준비물: (jQuery) 연결하기 미리보기 http://simulz.com/tag 새로고침 할 때마다 색상과 크기가 변한다. 많아야 5가지 색상과 크기뿐이었던 태그 목록을 랜덤 색상, 크기로 변경해보았다. 목록 섞기: (jQuery) 태그 목록 섞기 var getRandomRGB = function() { return '#' + Math.floor(Math.random()*16777216)...
PC&웹/웹프로그래밍 2010.02.05 14:20
(jQuery) 티스토리 달력 토요일 색상 변경

준비물: (jQuery) 연결하기 달력의 토요일을 아래처럼 파란색으로 변경해보자. $('.tt-calendar tr :nth-child(7)').removeClass('cal_day3').css('color','#0000ff'); $('.tt-calendar tr') tt-calendar 클래스를 가진 요소의 자식 중에서 tr 요소의 자식 요소들을 선택 :nth-child(index) 7번째 자식 요소(t..
PC&웹/웹프로그래밍 2010.02.04 14:27
(jQuery) 블로그 목록, 반복 배경 적용하기

준비물: (jQuery) 연결하기 $('.recentPost li:odd, .recentComment li:odd, .searchList li:odd').css('background-color','#eeeeee'); $(selector, selector, ···) ,(쉼표) 를 사용하여 여러 요소들을 선택한다. 예제에서는 recentPost 클래스를 갖고 있는 요소의 자식 중에서 li 요소의 홀수번째 선택, recent..
PC&웹/웹프로그래밍 2010.02.04 14:15
(jQuery) 티스토리 테터데스크에서 imgempty.png 그림 바꾸기

준비물: (jQuery) 연결하기 티스토리 사용자 중 테터데스크에 노출 되는 글에 첨부된 그림이 없으면 아래의 기본 이미지가 뜬다. 원하는 이미지로 변경을 해보자. $('img[src*=imgempty.png]').attr('src', 'http://cfs.tistory.com/custom/blog/2/20343/skin/images/imgempty.png'); img 요소 중 src 속성에 imgempty.png가 포함된 요소들을 찾아서..
PC&웹/웹프로그래밍 2010.02.03 20:37
(PS3) PSN 트로피 조회 사이트 - 테마 적용

프로그램 바로가기 http://simulz.kr/dev/ps3/trophycard/ ※ 이 사이트에 PSN ID를 등록하고 싶다면 먼저 http://cafe.naver.com/ps3friend 카페에 가입을 하세요! (추천인: 시뮬즈) PS3 게이머라면 트로피라는 것을 다 알 것이라 믿는다. 백금, 금, 은, 동 트로피 숫자를 카드 이미지 안에 표시해주는 사이트가 있다. 이 사이트는 트로피 카드 이미지를 조회하고 순위를 볼 수 있도록했다. ..
PC&웹/웹프로그래밍 2010.01.27 10:14
(jQuery UI) Theme Switcher 사용하기

아래 사이트에는 24가지의 UI 테마가 있다. http://jqueryui.com/themeroller/ 방문자마다 원하는 테마를 설정해서 보게 하려면 아래 페이지에서 플러그인을 연결하면 된다. http://jqueryui.com/docs/Theming/ThemeSwitcher 필요한 것은 jQuery Core와 Cookie 플러그인이다. 관련글: (jQuery) 연결하기 아래처럼 사용하면 쿠키 플러그인이 내장되어 있으니 따로 연결하지 않..
PC&웹/웹프로그래밍 2010.01.27 00:54
(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(); ..
PC&웹/웹프로그래밍 2010.01.22 12:58
(jQuery) 의정부시 CCTV 소스 강좌 - 마우스 스크롤 확대·축소

프로그램 소개: http://simulz.com/462 마우스 스크롤 줌인, 줌아웃 버튼 위에서 마우스 휠을 돌리면 CCTV가 확대·축소 된다. $("<button id='cctv_zoominout' title='마우스 휠을 돌리면 CCTV가 확대·축소 됩니다. 클릭하면 기본 크기로 보입니다.'>↕100%</button>").insertAfter('#reset').hide(); var numWidth =..
PC&웹/웹프로그래밍 2010.01.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..
PC&웹/웹프로그래밍 2010.01.22 11:24
(jQuery) 의정부시 CCTV 소스 강좌 - 툴팁, 마우스 오버 효과

프로그램 소개: http://simulz.com/462 툴팁, 마우스 오버 효과 var $tooltip = $('<div id="tooltip"></div>').appendTo('body'); var positionTooltip = function(event) { var tPosX = event.pageX; var tPosY = event.pageY + 20; ..
PC&웹/웹프로그래밍 2010.01.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); } ..
PC&웹/웹프로그래밍 2010.01.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..
PC&웹/웹프로그래밍 2010.01.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(:checke..
PC&웹/웹프로그래밍 2010.01.21 14:54
(jQuery) 서버에 데이터 전송하기

<SPAN id=tx_marker_caret></SPAN><form> <input type='text' name='input' value='' /> <select name='select'> <option value='1'>1</option> </select> <textarea>text</textarea> </form&..
PC&웹/웹프로그래밍 2010.01.20 00:35
(jQuery) 외부 파일 불러오기

HTML $('Selector').load('html.html'); // 전체 코드를 가져옴 $('Selector').load('html.html Selector2'); // Selector2로 매치된 부분만 가져옴 간단한 내용을 추가할 때 좋다. 자바스크립트 $.getScript('script.js'); 자바스크립트 파일을 인클루드 한다. <script src='script.js'></script> 와 같은 역할..
PC&웹/웹프로그래밍 2010.01.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 Librari..
PC&웹/웹프로그래밍 2010.01.18 17:51
1