XpressEngine3 theme, plugin 설치시 무한 로딩에서 빠져나오는 방법


안녕하세요.
고코더 입니다.


XE3에서 플러그인, 테마를 설치나 업데이트 할때 무한 로딩에 빠지는 경우가 있습니다. 무한로딩 상태를 해체하기 위한 방법을 소개합니다.

 1. 무한로딩에 빠져서 다른 업데이트가 되지 않고 있는 현재상황입니다. 30분 넘게 기다려도 답이 없네요.


 2. 그럴땐 FTP로 "/storage/app"을 찾습니다. 그리고 operations.json 이라는 파일이 생성되어 있는걸 삭제합니다.



 3. 겁먹지 말고 파일을 그저 삭제해주시면 됩니다. 업데이트시에 생겨나는 json 파일입니다.


 4. 그럼 이렇게 레이어 로딩 화면은 없어지고 무한 로딩은 해결 됩니다. 설치는 당연히 되지 않았을 확률이 높겠네요.


 5. 그리고 새로고침을 하면 이렇게 기존의 업데이트 메인 화면이 나타납니다. 설치를 중단하는 방법입니다.



마무리


무한 로딩이 자꾸 걸리네요.



댓글을 달아 주세요


워드프레스로 DB백업하기


안녕하세요.
고코더 입니다.


 1. 워드프레스에서 데이터베이스를 백업하는 방법을 알아봅니다. 워드프레스 관리자에서 플로그인에서 WordPress Backup를 검색합니다. 그러면 "UpdraftPlus WordPress Backup Plugin" 을 설치합니다. 



 2. 활성화 버튼을 눌러 플러그인을 실행합니다. 


 3. 설치가 완료되면 아래처럼 메세지창이 나타나고 "Press here to start" 를 클릭합니다. 


 4. 설치가 완료되면 데이터베이스 백업을 위한 첫걸음인 "Backup Now"를 클릭합니다. 


 5. 나타나는 메세지창에서 기본 옵션을 유지하고 Backup Now를 클릭합니다. 


 6. 백업이 완료 되었습니다. 


 7. 백업을 하면 아래처럼 한줄의 데이터가 생깁니다. 
Database를 누르면 백업된 데이터를 다운로드 할 수 있고
Restore를 누르면 해당 시점으로 데이터베이스가 복구 됩니다.



 8. Database를 클릭하면 "Download to your computer"를 클릭하야 다운로드 합니다. 



마무리


플로그인으로 백업하는게 제일 빠르네요.




댓글을 달아 주세요


이클립스 레파지토리 접근 오류 


안녕하세요.
고코더 입니다.

이클립스에서 플러그인 추가 할때 나타는 경고창입니다.
해당 레파지토리에 접근할 수 없다는 메세지 입니다. 
unable to read repository at ~~ unable to find valid certification path to requested targetd


문제는 말 그대로 해당 URL에 접근할 수 없어 다운로드를 할 수 없는 상태입니다.
대부분 네트워크 문제 입니다.


1. 방화벽 차단
    - 회사이거나 개인 방화벽에서 해당 URL 접근 금지 시킨 것입니다.
2. 백신프로그램 차단
    - 백신에서 해당 URL을 차단하는지 확인해보세요. 그냥 설치시에 꺼보시는 걸 권장합니다.
3. 해당 서버 오류
    - 오래된 플러그인이거나 잠시 서버가 공사중일 수 있습니다. 
4. 이유는 모르겠고 계속 안된다?
    - 설치가 어렵다면 이미 주변 개발자에게 다운로드한 파일을 받아서 폴더에 직접 설치하는 방법을 추천합니다.


마무리


경력 있는 개발자는 큰 어려운 문제는 아니지만
이제 개발을 시작하는 학습자에게는 어려운 문제라 남겨봅니다.








댓글을 달아 주세요


레이어 부가설명 박스 달기


안녕하세요.
고코더 입니다.


브라우저는 title 요소에 값을 넣으면
보통 기본 팁 박스를 제공합니다.


하지만 우리의 클라이언트는
특이한걸 원하는 분이 많습니다.

이 타이틀 속성의 툴 팁의 디자인 요소를 넣고 싶어할 수도 있습니다.
그래서 이번 시간에는 toll tip을 바꿀수 있는 플러그인을
소개 하려 합니다.

▼ tooltipsy 라는 플러그인 입니다.


▼ 아주 간단하게 툴박스를 생성할 수 있는데요
아래 예제를 한번 실행해보세요. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="http://code.jquery.com/jquery.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/tooltipsy@1.0.0/tooltipsy.min.js" ></script>
<input type="text" id="gocoder_tooltip" title="GoCoder ITExpress" />
 
<script type="text/Javascript">
 
         $("#gocoder_tooltip").tooltipsy({
 
            css: {
                'padding''5px',
                'max-width''100px',
                'color''#303030',
                'background-color''#ffffff',
                'border''2px solid #4893BA',
                'text-shadow''none',
                'font-size':'10px'
            }
 
        });
 
</script>
cs
▼ 이렇게 디자인이 노출 됩니다. 


가장 기본적인 사용법 이외에
다양한 효과는 

▼ 샘플을 활용해보세요.


다양한 효과와 액션 예제가 있으니
필요한 부분을 따라 쓰고
커스텀하시면 될거 같습니다.

기본적으로 외국 스러운 디자인이라
CSS는 수정해서 쓰셔야 겠네요. 



마무리


기본 모양이 가장 이쁜데..


댓글을 달아 주세요


div 크기 사용자가 조절 가능한 플러그인


안녕하세요.
고코더 입니다.

자바스크립트에서 사용자에게 특정 요소를
특히 div 를 자유로운 크기로 조절 할 수 있게 하는
기능을 소개하려고 합니다.

resizeble 이라는 UI 기능이빈다.

해당 기능은 다양한 곳에 사용이 가능합니다.
사용자 편의에 대시보드를 만들게 하는 곳에 특히 
많이 쓰입니다.

그래서 오늘은 이 기능에 대해 다루려고 합니다.

먼저 제가 정리한 간단 예제를 보시겠습니다. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $(function(){
    $("#resizeble").resizable();
  });
  </script>
</head>
<body>
<div id="resizeble" class="ui-widget-content">
    gocoder    Resizeble
</div>
</body>
</html>
cs

gocoder_resizeble.html





해당 페이지를 브라우저에서 실행하면
이렇게 오른쪽 아래에 크기 조절 창이 있고
이걸 사용하여 자유롭게 요소의
크기를 자유롭게 조절 가능합니다.



소스설명


▼ 3개의 참조 파일이 필요합니다.
jquery-ui.css 가 필요한 부분을 낯설어 하는 분들이 있겠네요
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

▼ 해당 함수를 원하는 요소에 실행합니다.
$("#resizeble").resizable();

▼ 그리고 .css 를 참조해야 하는 이야기
해당 "ui-widget-content"를
class 명에 넣어줘야 합니다.
<div id="resizeble" class="ui-widget-content">
    gocoder    Resizeble
</div>




마무리


실무에서도 많이 사용하는 함수이기에
한번 눈으로 손으로 익혀보세요


댓글을 달아 주세요


색상 RGB input 선택 plugin


안녕하세요.
고코더 입니다.

웹사이트에서
사용자에게 색상코드를 선택 값을 받을 때
input 박스로 받는 거보다 조금 더 우아하게
받을 수 있는 플러그인을 하나 소개하려고 합니다.

▼ 바로 jquery 미니 컬러 입니다.


플러그인 .js 몇가지를 첨부 한 후에 
속성만 주면 간단하게
input 박스를 컬러 코드를 선택 할 수 있는
기능으로 만들어 줍니다.

▼데모를 보면 이미 다양한 패턴의 예제를 만들어 났고
그대로 복사해서 붙혀넣어 쓰기 편하게 되어 있습니다.
색상코드 관련힌 인픗박스 기능은 전부 있어 보입니다.



▼ 필요한 부분만 남겨두고
축소 해보았습니다.
더 쉽게 이해가 가능한 소스라고 생각 합니다.
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
<html>
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="jquery.minicolors.js"></script>
  <link rel="stylesheet" href="jquery.minicolors.css">
  <script>
    $(document).ready( function() {
 
      $('.demo').each( function() {
        $(this).minicolors({
          control: $(this).attr('data-control'|| 'hue',
          defaultValue: $(this).attr('data-defaultValue'|| '',
          format: $(this).attr('data-format'|| 'hex',
          keywords: $(this).attr('data-keywords'|| '',
          inline: $(this).attr('data-inline'=== 'true',
          letterCase: $(this).attr('data-letterCase'|| 'lowercase',
          opacity: $(this).attr('data-opacity'),
          position: $(this).attr('data-position'|| 'bottom',
          swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
          change: function(hex, opacity) {
            var log;
            try {
              log = hex ? hex : 'transparent';
              if( opacity ) log += ', ' + opacity;
              console.log(log);
            } catch(e) {}
          },
          theme: 'default'
        });
 
      });
 
    });
  </script>
</head>
<body>
  <input type="text" id="hue-demo" class="demo" data-control="hue" value="#ff6161">
</body>
</html>
cs
단순하게 js를 선언하고
.demo에 스크립트만 참조하면 사용준비 완료 입니다.

해당 깃허브에서
최선 소스를 다운로드 받아보세요


마무리


정리 잘 된 플러그인


댓글을 달아 주세요


컨텐츠 보호 플러그인 


안녕하세요. 고코더 입니다.

퍼가기 금지 마우스 오른쪽 버튼 무효화 만들기는 
자바스크립트로 개발하기 아주 쉽습니다.

그런데 워드프레스를 사용하면서
플러그인을 안쓰면 섭섭합니다.

컨텐츠 보호 하는 방법을 제공하는 플러그인이 있어 소개 합니다.

▼ 바로 이 플러그인 입니다.
WP Content Copy Protection & No Right Click



▼이외에도 많은 플로그인이 있지만 사용 결과 이게 가장 쓰기 좋네요.
설치후에 활성화면 바로 기능이 실행 됩니다.



▼마우스로 오른쪽 버튼을 클릭하면 이렇게 경고 메세지 띄우는 옵션도 존재합니다.


free 버전일 경우
모든 사이트가 퍼가기 금지가 되고
어드민으로 접근시에는 접근이 가능 합니다.

그리고 페이지마다 다른 설정이 필요하다면
Pro로 업그레이드 해야 합니다.


마무리


아무리 막아도 다 퍼갈 수 있습니다.



댓글을 달아 주세요


wordpress 에 구글 애널리스틱 설치하기 


안녕하세요. 고코더 입니다.


워드프레스로 사이트를 개발 하셨다면 
구글 애널리스틱스를 설치 해서 접속자 모니터링을 하셔야겠죠.

우선 필요한건 애널리스틱스 고유 코드 입니다. 

▼ 가입하신 계정에 추적 ID 가져오기를 하시고


▼ 발생한 추적 ID를 복사해서 저장합니다. 



▼ 그리고 워드프레스 플로그인에서
Google Analystics for WordPress
검색하여 설치 합니다. 


▼ 그럼 왼쪽 메뉴에 이렇게 설치가 됩니다.


▼ UA로 시작하는 발급된 코드를 입력하고 변경사항을
저장만 하면 모든게 완료됩니다.


플러그인으로 마우스로 개발하기 재밌습니다.


마무리 


아직 사용자가 없어도 먼저 설치 하세요.
데이터는 미리 미리 쌓아두는게 


댓글을 달아 주세요



jquery QRcode


오늘은 QR코드를 만들어 볼려고 합니다. 바코드 자체도 훌륭하지만 보통 숫자만 쓸 수 있고
영어까지 포함한 바코드 체계를 쓰면 양 옆으로 너무 길어지는 형상이 있습니다.
그래서 나온게 3차원 바코드 QR코드죠 7089글자가 인식 가능하니 사실상
현재로는 가능한 충분한 데이터를 그 작은 네모안에 표현할 수 있습니다. 



그래서 오늘은 QR코드를 jquery로 만드는 방법을 알아보려고 합니다.

▼개발자 사이트는 아래와 같습니다.

우리 익스프레스 강의를 들어온 개발자 분들에게
간단한 예제릴 만들어 봤습니다.

▼ 아래 파일을 모두 다운로드 해서 gocoder_qrcode.html를 실행시켜보면 됩니다.

▼ 소스는 아래와 같습니다. qrcode()라는 놈을 잘 활용하면 될거 같습니다. 

<html>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.js"></script>
<script type="text/javascript" src="qrcode.js"></script>

<div id="gcDiv"></div>

<script>
    jQuery("#gcDiv").qrcode({   //qrcode 시작
        render "table",      //table, canvas 형식 두 종류가 있다. 
        width 100,            //넓이 조절
        height 100,           //높이 조절
        text   "http://gocoder.tistory.com/"     //QR코드에 실릴 문자열
    });
</script>

</body>
</html>

▼ 결과물은 아래와 같습니다.






마무리


QR코드는 정말 혁명이 아닌가 싶습니다.


댓글을 달아 주세요