ajax 보안 처리 ci php

Macaronics.net 

http://macaronics.net/index.php/m03/codeigniter/view/943

2. CSRF 보안을 위해 cofing 폴더 에서 config/config.php  csrf_protection TRUE 로 합니다.

1
2
3
4
5
6
$config['csrf_protection'] = TRUE;
$config['csrf_protection']=FALSE;
$config['csrf_token_name'] = 'csrf_test_name';
$config['csrf_cookie_name'] = 'csrf_cookie_name';
$config['csrf_expire'] = 7200;
$config['csrf_regenerate'] = TRUE;

 

이때 CSRT 보안을 위해 ajax 처리시 필요한것이 쿠키값 입니다. 이것은 다음과 같은 자바스크립트 코드를 사용해서 처리합니다.

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
function getCookie( name )
{
    var nameOfCookie = name + "=";
        var x = 0;
 
        while ( x <= document.cookie.length )
        {
            var y = (x+nameOfCookie.length);
 
            if ( document.cookie.substring( x, y ) == nameOfCookie ) {
                if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
                    endOfCookie = document.cookie.length;
 
                return unescape( document.cookie.substring( y, endOfCookie ) );
            }
 
            x = document.cookie.indexOf( " ", x ) + 1;
 
            if ( x == 0 )
 
            break;
        }
 
        return "";
}

 

3.  컨트롤에서 다음과  같은 코드 처리를 해서 보안을 위해 ajax 형식이 아니면 차단 합니다.

1
 if(!$this->input->is_ajax_request()){echo "bad req" ;};

~~ 생략

자세한 내용은 다음 링크 주소에 있습니다.

http://macaronics.net/index.php/m03/codeigniter/view/943

모바일 환경 체크 php codeigniter

codigniter 에서는 helper 에 임의값으로 정해서 php 파일로 생성합니다.
여기서는 mobilecheck_helper.php 로 만들어서 MobileCheck 함수를 넣었습니다.
config/autoload.php  —->
$autoload[‘helper’] = array(‘url’, ‘mobilecheck’);

이와 같이 하면 모바일과 pc 에 환경에 따라 원하는 데로 코딩할 수 있겠습니다.

생략 :  =>상세 내용

 

jquery 로 윈도창 크기 변화 감지 및 모바일 환경 감지 후 이미지 사이즈를 조정해서 슬라드 쇼 개발 방법

Macaronics.net

http://macaronics.net/index.php/m04/jquery/view/941

1
2
3
4
5
6
7
8
9
10
11
12
@media all and (max-width: 768px) {
        body { background-color: red; }
        h1 { color: green; }
}
@media all and (min-width: 768px) and (max-width: 1024px) {
        body { background-color: black; }
        h1 { color: yellow; }
}
@media all and (min-width: 1025px) {
        body { background-color: blue; }
        h1 { color: white; }
}
1
2
3
$(window).resize(function() {
});
1
2
3
4
5
6
7
8
9
10
function isMobile(){
    var UserAgent = navigator.userAgent;
    if (UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null)
    {
        return true;
    }else{
        return false;
    }
}
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
"text/javascript">
$(document).ready(function() {
   cssImg();//이미지 슬라이더를 위한 내용값 변경
   $(window).resize(function() { //창크기 변화 감지
      
        imageSizeChange(); //창 크기가 변할 때만다 imageSizeChnage 수를 호출합니다.
   });
});
function cssImg(){
      var selfImg=$("#post-data img");
      $(selfImg).parents("a").closest("p").attr("class","preview");
      $(selfImg).parents("a").attr("data-gallery", "");
}
function isMobile(){
    var UserAgent = navigator.userAgent;
    if (UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null)
    {
        return true;
    }else{
        return false;
    }
}
function imageSizeChange(){
    
     if(isMobile()){ // 모
        
         //여기에서 사이즈를 다시 계산합니다.
         var windowWidth=$(window).width();
         
         if(windowWidth
             //창 가로 크기가 500 미만일 경우
             
             $("#post-data").css("max-width", "320"); //컨테츠 여기서는 글 내용 영력입니다.
             var selfImg=$("#post-data img");
             
             //현재 이미지가 가지고 있는 넓이값을 가져옵니다.
             var  width=$(selfImg).css("width");
             var  height=$(selfImg).css("height");
             var ratio=1;
             
             var maxWidth = 300; // 넓이를 300으로 합니다.
             var maxHeight =200;
               
             var ratio = 0;  // Used for aspect ratio  
              if(height > maxHeight){
                    ratio = maxWidth/width;  
                    $(selfImg).css("width", maxWidth); // 넓이 설정
                    $(selfImg).css("height", height * ratio); //높이값 설정
                    height = height * ratio;  
      
              }else{
                  ratio = maxWidth/width;  
                  $(selfImg).css("width", maxWidth); // 넓이 설정
                  $(selfImg).css("height", height * ratio); //높이값 설정
              }
              
             
                    
         }else{
             //창 가로 크기가 500 보다 클 경우
         }    
     }else{ }     //PC용 페이지
}
  
현재 여기서는 css 를 다음과 같이 맞춰주었다.
1
<span class="preview"><a href="/include/images/beautiful/57.jpg"  data-gallery=""><img src="/include/images/beautiful/57.jpg"></a></span>
img  부모창 data-gallery 란는 속성을 넣야 하고 a 태그 부모의 class 는 preveiw 로 맞춰줘야 한다.
왜냐하면 이미지 슬라이드 쇼 소스에 http://macaronics.net/include/js/jquery.blueimp-gallery.min.js 소스를 사용 해야 하기때문이다.
또한, 이소스에는 반드시 페이지에 다음과 같은 코드가 작성되어 있어야 한다.
1
2
3
4
5
6
7
8
9
10
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter="">
    <!-- 중요   짝수 또는 홀수 로 보여 주기<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">-->
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>
1
 

코드 웹 및 모바일 환경에 맞게 예쁘게 넣기 . ckeditor 적용 및 syntaxhighlighter 사용 – [copy]

첫번 째는 colorscripter 을 사용하는 것인데요. 다음과 같습니다.
colorscripter의 사용법은 쉽습니다. https://colorscripter.com/ 웹페이지에 접속해서 코드를 붙여넣고 우측하단의 ‘클립보드 복사’ 버튼을 눌러서 복사한 다음 포스팅 내에 붙여 넣으면 끝.
두번째는 ckeditor 에서 Code Snippet 를 사용하는 것 입니다.
다운 받은 후 플러그 인  헤더 부분에 아래 소스 카피
1
2
3
4
5
6
7
8
9
10
11
12
13
<!--코드 highter  올드 -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.7/styles/monokai_sublime.min.css">
<script src="//cdn.jsdelivr.net/highlight.js/8.7/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!--코드 highter end -->
그런데 이것은 모바일 환경에서는 맞지가 않습니다.
그래서 세번째 모바일 환경에서도 잘 보이게  syntaxhighlighter  를 사용 하겠습니다.
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
<!--코드 highter -->
    <!-- source highlighter start -->
<script src="https://tistory2.daumcdn.net/tistory/2011076/skin/images/shCore.js" type="text/javascript"></script>
<script src="https://tistory2.daumcdn.net/tistory/2011076/skin/images/shBrushAS3.js" type="text/javascript"></script>
<script src="https://tistory2.daumcdn.net/tistory/2011076/skin/images/shBrushCpp.js" type="text/javascript"></script>
<script src="https://tistory2.daumcdn.net/tistory/2011076/skin/images/shBrushCss.js" type="text/javascript"></script>
<script src="https://tistory2.daumcdn.net/tistory/2011076/skin/images/shBrushPhp.js" type="text/javascript"></script>
<script src="https://tistory2.daumcdn.net/tistory/2011076/skin/images/shBrushSql.js" type="text/javascript"></script>
<script src="https://tistory2.daumcdn.net/tistory/2011076/skin/images/shBrushVb.js" type="text/javascript"></script>
<script src="https://tistory2.daumcdn.net/tistory/2011076/skin/images/shBrushXml.js" type="text/javascript"></script>
<script src="https://tistory2.daumcdn.net/tistory/2011076/skin/images/shLegacy.js" type="text/javascript"></script>
<link href="https://tistory2.daumcdn.net/tistory/2011076/skin/images/shCore.css" rel="stylesheet" type="text/css" />
  
<script type="text/javascript">
     SyntaxHighlighter.defaults['toolbar'] = false;
     SyntaxHighlighter.all()
</script>
<!-- source highlighter end -->
다음 ckeditor  사이트에서 syntaxhighlighter   검색후 플러그인에 설치 합니다.
다운로드를 받으면 다음과 같은 화면이 나옵니다.
==================================================================
Online builder
The recommended way to install all CKEditor add-ons is to create a custom build by using Online builder. To do that, click the Add to my editorbutton on the plugin page. When you are done, click the Build my editor button on the right side of the page to go to Online builder.
Note: This add-on is already selected to be a part of your current build.
Add-on installation instructions
If you want to add the plugin manually, you will need to:
  1. Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:
    http://example.com/ckeditor/plugins/syntaxhighlight
  2. Enable the plugin by using the extraPlugins configuration setting. Example:
    config.extraPlugins = 'syntaxhighlight';
  3. Download and configure all its dependencies, too.
Add-on dependencies
Note: The plugin may have
==========================================================
플러그인에 카피한다음 config.js  config.extraPlugins = ‘syntaxhighlight’; 를 입력 해 주면 끝입니다.
CKEditor 에 생성된 적용된 모습입니다.
코드가 적용 된 모습닙이다.
모바일에서는 모발일에 맞게 적용되고 스크룰이 자동적으로 생성 됩니다.

 

 

스프링(Spring) 프레임워크 기본 개념 강좌 (2) – 주요 구성 요소 & DI

1. 스프링의 핵심 개념

* DI

* IoC

* AOP & AOP Proxy

* AOP in Spring

 

 1) 주요 구성 요소 

* IoC / DI

* AOP

* PSA

 

 

 

 

– 용어 설명 –

* Plain Old Java Object 혹은 POJO는 처음에 javax.ejb 인터페이스를 상속받지 않은, 무거운 EJB와는 반대로 경량의 자바 객체를 지칭하는 용어로 소개. 즉, POJO라는 이름은 특별하지도 않고, 특히 Enterprise JavaBean이 아닌 자바 객체를 강조하는 의미로 사용.

이 이름은 Martin Fowler, Rebecca Parsons와 Josh MacKenzie에 의해 2000년 9월에 만들어졌으며, 프레임워크에 종속된 복잡한 객체에 반대되는 간단한 객체를 설명하기 위한 용어의 필요성이 많아짐에 따라 POJO라는 이름이 점점 널리 쓰여짐.

POJO 대표적인 예로, JavaBean을 들 수 있는데, JavaBean은 기본 생성자와 멤버 필드에 접근할 수 있는 getter/setter 메소드를 가진 serializable(직렬화가 가능한)한 객체를 의미. POJO를 이용한 디자인이 널리 쓰임에 따라 POJO를 기본으로 하는 스프링이나 하이버네이트와 같은 프레임워크에서도 생겨남. 요즘에는 POJO는 (EJB 뿐만 아니라) 별도로 종속되지 않는 자바 객체를 통칭하여 의미한다.

 

* PSA (Portable Service Abstractions) – (쉬운) 서비스 추상화
성격이 비슷한 여러 종류의 기술을 추상화하고 이를 일관된 방법으로 사용할 수 있도록 지원.
트랜잭션 서비스 추상화 : 여러 가지의 DB를 사용한다고 하면 Global Transaction 방식을 사용.
자바는 JDBC 외에 이런 글로벌 트랜잭션을 지원하는 트랜잭션 매니져를 지원하기 위한 API인 JTA(Java Transaction Api)를 제공.
높은 응집도와 낮은 결합도를 준수.

 

 

 2) DI (Dependency Injection, 의존성 주입)

DI는 스프링(Sping)을 통해서 특별히 생겨난 용어는 아님. 단 DI를 잘 지원해주는게 스프링.

 

 

 

위의 예제 처럼 분리/도킹(부착) 형으로 개발을 하게 되면 각 객체(또는 애플리케이션) 간의 결합도를 낮출 수 있으며, DI를 사용하는 목적이 이러한 결합도를 낮추기 위함.

 

 

 2-1) DI의 종류

* Setter Injection (세터 주입)

* Construction Injection (생성자 주입)

 

 

위의 코드는 JAVA 개발자라면 친숙한 개념으로 DI는 JAVA에서도 많이 사용해 왔던 개념. (객체 지향 프로그래밍(OOP)에 있던 개념)
http://ooz.co.kr/plugin/CallBack_bootstrapperSrc?nil_profile=tistory&nil_type=copied_post 단지, 스프링에서는 이러한 일련의 과정을 (동적으로) 자동화 함.

 

 2-2) 스프링에서의 DI

* 명세서에 따라서 자동적으로 부품을 활용하여 제품을 조립 => 스프링

 

 

* 일체형 프로그램과는 반대로 제품을 생성.

* 즉, 작은 부품부터 시작하여 큰 부품으로 이동하며 조립.
 => Inversion of Control (IoC)

 

기본적인 완제품 제작 순서와는 다르게 작은 부품부터 큰 부품으로, 제품을 만드는 순서가 역순 (Inversion of Control).
그래서 IoC라는 이름이 붙었으며, 이러한 일련의 작업을 스프링은 컨테이너라는 곳에 담아서 처리하여 스프링을 IoC컨테이너라 함.

스프링은 완성품을 만드는 것보다 부품을 모아서 조립하는 것을 도와줌. 즉, 이러한 DI 구조를 개발자가 좀 더 쉽고, 간편하게 사용할 수 있도록 지원해 주는 프레임워크 중의 하나가 스프링.

 

 

* 개발 핵심 처리 루틴의 수정 없이 제품(객체)를 다른 제품(객체)로 쉽게 대체하여 생성 가능하도록 하는 역할을 함.

* 명세서에 따라서 자동적으로 부품을 활용하여 제품을 조립.

* 생성하기 원하는 객체를 명세서(XML)에 기술하고, 그 부품과 의존성(Dependency)들을 보관하는 일을 처리. 그러한 데이터를 보관하는 공간을 컨테이너라 함. (IoC 컨테이너)

 

제품  스프링 
 주문서  설정파일(XML)
 일반적은 순서의 공정  역방향 조립

 

 

2-3) DI 구현

 

객체의 생성과 도킹에 대한 내용이 소스 코드 상에 있는 것이 아닌 별도의 텍스트 파일(XML 설정 파일)에 분리하여 존재.
(JAVA소스 컴파일 없이 XML 변경만으로 내용 변경 가능)

 

 

 

* XML을 활용(스프링 DI)하는 경우는 VIEW에 대한 객체만을 요청했을 뿐, 실제 내부적인 사항은 JAVA코드 상에 드러나지 않음.
* 새로운 클래스의 bean객체를 만들어 XML에 주입만 시켜줘도, 기존 소스 변경 없이 새로운 형태의 객체 적용이 가능함.

 

 

2-4) XML (Bean) Sample

 

* 빈(Bean) 객체는 반드시 클래스를 사용. 인터페이스나 추상클래스는 객체 생성이 불가능함.
* 빈 객체 생성, 객체 초기화, 객체 값(또는 레퍼런스) 주입.

 

 

1) 이름이 record인 빈 객체 생성 / 별명 4개 : r1,r2,r3,r4 / SprReocrd 클래스 객체 생성.

초기값으로 kor 라는 프로퍼티에 20값 대입 (set함수가 존재해야 위와 같은 프로퍼티 설정이 가능).
2) 이름이 record인 빈 객체 생성 / 생성자(인자가 하나인)를 통해서 값 대입 & 생성.
3) 생성자 중에서 kor 값을 입력받는 생성자를 통해서 20값 대입하고, 생성.
4) 3개의 인자를 받는 생성자를 통해 kor = 50, eng = 60, math = 70 대입 & 생성.
5) 생성된 record 객체를 set함수를 통해 프로퍼티에 저장하고 SprRecordView를 생성.

 

참고로 값을 대입하는 경우에는 value, 참조(레퍼런스)를 대입하는 경우에는 ref 를 사용.

스프링(Spring) 프레임워크 기본 개념 강좌 (2) – 주요 구성 요소 & DI

PHP 날짜

<?
print(date(“F d Y l”));
$c_date = getdate(time());
printf(“<br> %d시 %d분 %d초 <br>”, $c_date[“hours”], $c_date[“minutes”], $c_date[“seconds”]);

 

 

 
$a = $c_date[“wday”];
echo “변수a => $a, switch-case문 결과 => “;
switch($a) {
case 0 : printf(“일요일<br>”); break;
case 1 : printf(“월요일<br>”); break;
case 2 : printf(“화요일<br>”); break;
case 3 : printf(“수요일 <br>”); break;
case 4 : printf(“목요일 <br>”); break;
case 5 : printf(“금요일 <br>”); break;
case 6 : printf(“토요일<br>”); break;
default : printf(“데이터 오류<br>”);
}

?>