Laravel 을 composer 와 함께 첫 설치시 Laravel 의 경우 cache 와 같은 디렉토리들의 쓰기 권한을 검사하고 프로그램이 진행 됩니다. 오랜만에 새로 버전 5.5로 올리면서 다시 포스팅 하게 되네요. 일단 권한 관련 폴더 들은 아래 3개의 폴더 이며 ./client/storage/ ./client/bootstrap/cache/ ./client/public 간단하게 명령어로 변환이 가능합니다. * ./client 라는 폴더에 Laravel 이 설치되어 있을 경우 - 만약 laravel 폴더 안에서 실행 하신다면 ./client 를 제거 하시면됩니다. ex ) ./storage/ ./public/ chown sftp_user:users ./client/* -R chown sftp_user..
Laravel 에서 Input 을 받는 방법은 메뉴얼에 있는 대로 $request->input() 을 이용하는 방법과 Input 을 사용하는 방법이 있습니다.( 언제 부터였는지는 기억이 나지 않지만 Input 이 기본 클레스에서 제외되고 이제는 등록하지 않으면 사용하지 못하도록 변경 되었습니다. ) 문서에 있는대로 . $request->input('변수') 를 이용해도 되지만 이는 조금? 귀찮습니다.메뉴얼 : https://laravel.com/docs/5.3/requests#accessing-the-request 그에 비해 Input 을 사용할 경우는 아래와 같습니다. (GET POST 상관없음) $email = Input::get('email'); $password = Input::get('passw..
Laravel 5.3 부터 이전(5.2) 에 사용하던 방식인 Auth/AuthController.php 통합 방식이 변경되어 ForgotPasswordController.php - 비밀번호 찾기 LoginController.php - 로그인 RegisterController.php - 가입 ResetPasswordController.php - 비밀번호 초기화 파일 4개로 쪼개 졌습니다. 각각은 이름대로의 역할을 하는대요. 그렇다면? middleware auth 리다이렉트는 어떻게 처리 해야 되는가? /app/Exceptions/Handler.php 에 보시면 최 하단에 protected function unauthenticated($request, AuthenticationException $except..
Ubuntu 14.04 LTS 버전에서 NodeJS 설치 및 NodeJS 버전을 변경하기위한 n 을 설치하고 변경하는 방법에 관해 설명드리겠습니다. 1. Ubuntu 에서 apt-get 을 이용하여 NodeJS 설치하기 우선 apt-get 을 이용해서 설치할 것 이기 때문에 저장소를 NodeJS 홈페이지에 등록된 방법으로 등록해주시기 바랍니다. 원본 : https://nodejs.org/en/download/package-manager/* npm n 을 통해서 버전을 수시로 변경할 수 있기 때문에 버전에 관해서는 크게 걱정하지 마시고 일단 설치하시기 바랍니다. NodeJS 4.x LTS 버전 curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash - ..
여기서는 간단하게 Let's Encrypt 를 이용하여 무료로 HTTPS 를 제공하는 튜토리얼을 진행해보겠습니다. - 무료로 Let's Encrypt 를 이용한 인증서를 만들고 적용 우선 이 문서는 영문 버전을 참고하여 작성한 문서이며 원본은 How To Secure Nginx with Let's Encrypt on Ubuntu 14.04 입니다. 기본적으로 원본 문서보다 설명이 적습니다. 자세한 사항은 원문을 찾아 보시기 바랍니다. 서버 셋팅환경은 Ubuntu NginX 입니다. 1. Let's Encrypt 설치하기 우선 필요한 것들을 설치 하도록 합니다. 이미 설치되어 있다면 굳이 설치 하지 않으셔도 됩니다. $sudo apt-get update $sudo apt-get install git bc ..
여기서는 간단히 TexturePacker 를 이용하여 Sprite 를 생성하는 방법에 대해서 설명드리겠습니다. 우선 Sprite 에 관해서 간단히 설명드리자면 이미지의 모음 이라고 보시면 됩니다. 하나의 이미지 파일에 여러개의 이미지를 삽입하여 게임 분야에서는 애니메이션을 만들거나 웹 분야 에서는 이미지 요청 횟수와 용량을 줄일 수 있습니다. 간단한 예로 아래는 Facebook 의 Sprite 입니다. facebook 의 경우 아래의 이미지를 한번 불러 들입니다. 굳이 용량도 크지 않은 이미지를 각각 하나씩 불러들일 필요가 없어지는거죠. 이제 TexturePacker 를 이용하여 간단히 소셜 버튼 Sprite 를 만들어 보겠습니다. 우선 이미지를 준비하여 하나의 폴더안에 넣어 두도록 합니다. 그리고 Te..
Chrome 은 개발자에게 많은 편의사항을 제공하는대요. 여기서 설명하는 디바이스 모드도 그중 하나로 PC 용 Chrome 에서 반응형 웹이나 모바일 웹의 디자인을 확인할 수 있는 방법입니다. 물론 PC로 작업하기 때문에 Javascript 디버깅 및 CSS 임시 수정도 쉽게 가능합니다. 우선 페이지에서 우측 버튼을 클릭 후 '검사'를 눌러서 개발자 모드로 들어가시기 바랍니다. * 예전에는 '요소 검사' 였는데 안 본 사이에 변했네요. FireFox 랑 겹쳐서 그런가... FireFox는 그대로 '요소 검사'를 사용하고 있네요. 그리고 아래와 같이 '검사' 창의 좌측 상단에 있는 모바일 모양의 아이콘을 클릭해주시기 바랍니다. 이제 아래와 같이 디바이스 모드로 변경된 화면을 확인하실 수 있으실 것입니다. ..
Laravel 초기 셋팅시 모든 권한 을 변경하고 .env.example 를 .env 로 복사 후 바로 서버를 확인하시면 아래와 같은 에러를 확인하실 수 있습니다. Error : No supported encrypter found. The cipher and / or key length are invalid. .env 파일에 APP_KEY 가 재대로된 키가 들어가 있지 않기 때문인대요. 아래와 같은 명령어로 .env 를 정상적으로 복사 하셨다면 어플리케이션키를 생성하실 수 있습니다. $ php artisan key:generate $ Application key [9YNGQT5bj6NUYcLU3Yummvnrgr9QN7dX] set successfully. 이제 페이지로 이동해보셔서 아래와 같이 정상적으로..
Laravel 5 는 기본적으로 다국어화 기능이 있습니다. 하지만 이 기능의 경우 app::setLocale() 을 이용하여 언어를변경해 주거나 사용자 언어를 직접 지정해주셔야 하는대요. 여기서는 Session 에 Locale 이 지정되지 않았을 경우 사용자의 언어를 감지하여 Locale 을 지정하는 Middleware 를 만들어 보겠습니다. 우선 Middleware 를 만들어보겠습니다. App/Http/Middleware 로 이동하여 Localization.php 파일을 만들고 아래의 코드를 입력해주도록 합니다.
CKEditor 를 사용할시 기본적으로 정의되어져 있는 몇가지 스타일이 있는대요. 이 부분이 사용자에 따라 약간 불편할 수도 있습니다. 또한 글을 작성하는 동안 페이지에 커스텀으로 적용되는 CSS 의 경우 보지 못하는대요. 이런 부분을 해결할 수 있는 방법이 CKEditor 자체에 페이지에서 사용될 커스텀 CSS를 넣는 방법입니다. ps. 제 경우 CKEditor 의 p 테그에 margin 이 너무 넓게 들어 가서 적용한 경우 입니다. 아래를 보시면 기본 CKEditor 를 적용했을때 p 테그에 기본적으로 적용 되어 있는 margin 의 크기 입니다. CKEditor 자체에 CSS 파일을 적용하고 싶으시다면 CKEDITOR 를 정의 하실때 config.contentsCss 를 정의해주시기 바랍니다. CK..
이미 NginX + PHP 5 가 구성된 서버에서 Codeigniter 를 다운받아서 설정하는 방법입니다. 0. NginX 와 PHP 5 의 설정 방법은 아래를 참고하시기 바랍니다. 2015/03/08 - [웹 개발/WAS + PHP] - Ubuntu 에서 NginX + PHP-FPM 연동하기 2015/03/02 - [웹 개발/WAS + PHP] - Ubuntu 에서 NginX + PHP 설치 ( 연동 ) 하기 1. Codeigniter 설치하기 기본적으로 Codeigniter는 다운받아 설치 하시면 됩니다. 최신 Stable 버전의 주소를 받으신 후 wget 을 이용하시면 됩니다. 아래는 Codeigniter 3.0.2 버전의 예 입니다. 다운로드 링크 : https://codeigniter.com/d..
지난번에는 간단히 HTML 문서를 만들어 봤는대요. 이번에는 몇가지 태그에 대해 알아보고 사용해보겠습니다. 2015/09/14 - [웹 개발/HTML] - HTML 이란? 첫 HTML 문서 작성하기 우선 HTML 문서는 아래의 기본적인 규칙들을 따라 주셔야 합니다. 1. 문서의 처음은 로 정의해줄 것 ( 문서의 HTML 버전에 따라 다르지만 앞의 DOCTYPE html 는 HTML 5 임을 뜻합니다. ) 2. 문서는 의 안에 넣어 주도록합니다. 3. 사용자들이 보는 부분은 에 작성됩니다. 4. 아래는 최종 결과 예제 파일 입니다. 이제 간단히 태그와 코드를 보도록 하겠습니다. Heading Tag Paragraph Tags 위의 문서에 간단히 주석과 함께 문서를 만들어 봤습니다. * 주석이란? 주석은 개..
PHP 를 이용하여 와 같은 특수문자를 HTML 요소로 변경하는 방법입니다. 일단 변경하는 이유에 대해서 간단히 설명드리자면 페이지에 특수문자를 표현하고 싶을때 HTML 문서에 그대로 와 같이 써버리신다면 브라우져는 테그로 인식해서 를 표현해주지 않습니다. 써주는 방법은 특수문자를 html 코드로 적어주는 방법인대요. 는 코드로는 과 같습니다. PHP 에서는 htmlentities 로 특수문자를 html 코드로 변경하는 것이 가능합니다. 간단한 사용방법으로는 htmlentities 를 그대로 써주시면 됩니다.사용 테스트는 Tutorialbook.IO PHP htmlentities 에서 가능합니다. 위와 같이 사용하시면 HTML 요소 코드에는 © Welcome to Tutorial..
PM2는 P(rocess) M(anager) 2 로 NodeJS 프로세서를 관리해주는 역할을 합니다. PM2는 앱이 계속 살아 있을수 있도록 도와 주는 역할을 하고 프로그램의 다운없이 다시로드 할수 있도록 해주는 등의 역할을 합니다. 1. 설치하기 npm 을 이용함으로 설치는 간단히 npm install pm2 -g 로 설치 합니다. $ npm install pm2 -g 2. 실행 및 종료하기 실행 역시 간단합니다. pm2 start app.js 명령어 만으로 nodejs 프로젝트의 실행이 가능합니다. $ pm2 start app.js 아래와 같이 여러개의 프로세서를 켜두고 작동을 볼수도 있습니다. 종료는 pm2 stop id 혹은 pm2 kill 로 해당 프로세스를 종료하거나 pm2 자체를 종료할수도 ..
NodeJS 를 이용한 웹 프레임워크 중 하나인 Express ( http://expressjs.com/ ) 의 기본적인 사용방법에 관한 튜토리얼 입니다. 우선 준비사항으로 NodeJS 가 설치 되어있어야 하니 아래의 포스팅을 참고하시기 바랍니다. [Programming Language/NodeJS] - Ubuntu 에서 Node JS 시작하기 [Programming Language/NodeJS] - NodeJS 업데이트 하기 1. Express 간단히 설치하여 HelloWorld 까지 해보기 여기서는 간단히 Express 를 설치하여 간단히 이용하는 방법에 관해서 설명 드리겠습니다. 우선 원하는 이름으로 app 폴더를 생성해 주도록 합니다. 여기서는 developers 로 생성 하였습니다. $ mkdi..
PHP 기본 문법 PHP 는 기본적으로 *.php 의 확장자를 가지며 스크립트는 사이에 작성 됩니다. PHP 파일에는 HTML 코드가 같이 포함될 수 있습니다. 아래의 예제를 한번 보시겠습니다. echo 는 PHP 내부의 스크립트로 텍스트를 출력해주는 역할을 합니다. 또한 echo 의 끝에 세미콜론 ( ; ) 으로 마무리 된 것을 확인하실수 있으실 것 입니다. 프로그램 문단의 끝은 항상 세미콜론 으로 끝을 내주셔야 합니다. * 아직 초반이라 PHP 에 관해서 HTML 과 함께 쓰도록 배우지만 굳이 HTML 을 포함하는 프로그래밍 언어로서만 사용하지는 않습니다. 물론 대부분의 경우가 HTML 표현을 위해서 사용되지만 서버의 뒷단에서 Perl, Python 과 같이 서비스 운영을 처리하는 역할을 하기도 한다..
PHP 는 동적 웹페이지를 만들수 있는 서버 사이드의 스크립트 언어이며 HTML 코드안에 php 를 넣음으로서 효율적으로 개발이 가능합니다. 또한 PHP 는 OS 에 관계 없이 운영 및 개발이 가능합니다. * PHP 를 알아보기전 기본적으로 HTML, CSS, Javascript 에 관한 지식이 있으셔야 합니다. 우선 간단하게 아래의 PHP 코드를 보겠습니다. 간단히 코드에 관해서 간단히 설명하자면 echo ""; 는 html 페이지내에 텍스트를 뿌려주는 역할을 합니다. 후에 print 와 비교하여 좀더 자세히 설명드리겠습니다. 위의 코드에서 보시면 사이에 부분이 보이실 것 입니다. php 는 이와 같이 HTML 문서 중간에 삽입될 수 있으며 뿐만 아니라 문서 어느 곳 이든 삽입이 가능합니다. 대신 WA..
HTML 은 간단히 말하면 컨텐츠 제공자가 사용자에게 컨텐츠를 쉽고 편하게 보여 주기위한 일종의 문서 입니다. HTML 의 약자는 Hyper Text Markup Language 의 약자로 markup tag 로 이루어진 문서 입니다. Tag ( 태그 ) 는 HTML 문서를 구성하는 작은 단위로 태그라고 부릅니다. 일단 아래의 코드로 첫번째 문서를 만들고 설명 드리겠습니다. 나의 첫 HTML 문서 입니다! 이제 위의 코드를 아무 문서에 작성 후 파일 이름은 원하시는대로 하되 아래와 같이 확장자 명은 .html 로 해주시기 바랍니다. 문서 작성은 편하신 에디터 를 이용하시면 됩니다. 메모장으로도 가능합니다. 이제 이 파일을 웹 브라우져 (익스플로러, Chrome, firefox, safari )에서 열어 ..
Font Awsome 은 웹 페이지 개발시 이미지가 아닌 테그를 이용하여 아래와 같은 특수 문자를 쓸수 있도록 해줍니다. 등 사용전 알아두셔야할 것은 3.2.1 까지는 IE 8.x 등의 하위 버전을 지원하지만 4.3.0 과 같이 4.x 이상 버전에서는 저버전의 브라우저들을 지원하지 않으니 참고하시기 바랍니다. CDN 을 이용한 간단한 사용방법은 아래와 같이 버전별 URL 을 Head 사이에 넣으셔서 로드해주시고 Font Awsome 3.2.1 Font Awsome 4.3.0 아래와 같이 페이지의 문자표 테그를 참고하셔서 HTML 코드에 직접 사용하시면 됩니다. Font Awsome 3.2.1 아이콘 리스트 http://fortawesome.github.io/Font-Awesome/3.2.1/icons/ ..
여기서는 NginX 에서 웹페이지에 비밀 번호 설정 및 페이지에 들어오는 ip 를 제한하는 방법을 알아 보겠습니다. 우선 IP 를 통해서 제한하는 방법 입니다. location / { allow 192.168.1.1/24; allow 127.0.0.1; deny 192.168.1.2; deny all; } 위의 설정대해 간단히 설명하자면 allow 192.168.1.1/24; - 192.168.1.1 ~ 24 까지 허용allow 127.0.0.1; - 127.0.0.1 허용deny 192.168.1.2; - 192.168.1.2 거부deny all; - 전체 거부 ip를 통한 접속 허용 및 거부는 꽤 단순합니다. 필요하실때 참고하시기 바랍니다. 두번째 방법은 Password 파일을 이용하여 비밀번호를 설..
요즘 많은 프로젝트 들이 그렇지만 Phalcon 역시 기본 프로젝트를 만드는 툴이 있습니다.여기서는 간단하게 Ubuntu + NginX + PHP 환경에서 설치하고 사용하는 방법에 대해서 설명드리겠습니다. 1. git clone 을 통해서 다운받기 및 심볼릭 링크 생성 일단 원하시는 폴더로 이동 후 git clone 을 이용햐서 phalcon-devtools 를 다운받습니다. git clone https://github.com/phalcon/phalcon-devtools.git cd phalcon-devtools 그리고 폴더로 이동 후 phalcon 에 대한 심볼링 링크를 생성하여 주도록합니다. ln -s 경로/phalcon-devtools/phalcon.php /usr/bin/phalcon chmod ..
Ubuntu + NginX + PHP-FPM 설치는 아래의 링크를 참고 하시기 바랍니다.Ubuntu 에서 NginX + PHP-FPM 연동하기 PHP Framework 중 최강의 속도(?!)를 자랑한다는 Phalcon 의 설치 방법입니다. 우선 NginX + PHP-FPM 기본 설치를 기반으로 하며 위의 링크를 참고 하시기 바랍니다. 1. 기본 의존성 패키지 설치하기 아래의 명령어로 Phalcon 을 설치하기전 기본적으로 설치하기 위해 필요한 준비물들을 설치 합니다. sudo apt-get update sudo apt-get install git-core gcc autoconf make sudo apt-get install php5-dev php5-mysql 2. 다운받기 및 설치 원래는 Phalcon ..
Ubuntu 서버를 이용하여 NginX 와 PHP 를 연동하여 웹 서버를 구성하는 방법입니다. *예제는 쉽게 설치하기 위해 apt-get 을 이용합니다. 1. Ubuntu 패키지 저장소 업데이트 하기 우선 Ubuntu 의 패키지저장소를 최신으로 업데이트 하기 위해서 아래의 명령어로 python-software-properties 과 software-properties-common ( Ubuntu server 12.10 일 경우만 software-properties-common 을 설치 합니다. ) 을 설치해 주도록 합니다. sudo apt-get install python-software-properties sudo apt-get install software-properties-common ( 버전에 ..
우선 Laravel 에 관해 Laravel 은 PHP 프레임워크로 구조화가 잘되 있으며 사용하기 쉽다는게 특징입니다. 속도면에서는 Phalcon 에 비해 당연히 느리지만 그렇다고 굉장히 느리다거나 하지 않습니다. 오히려 쉬운 구조화와 높은 편의성면에서 좋은 점수를 줄수있는 점이 장점이라고 할 수 있습니다. 우선 기본적으로 php 와 Webserver 가 이미 설치되어 작동된다는 전제에 작성하도록 하겠습니다. Laravel 에 관해서 더욱 알고 싶으시다면 옆의 주소를 참고하시기 바랍니다. : http://laravel.com/ 1. Laravel 기본 다운받기 우선 Laravel 을 다운받도록 합니다. ( Composer 를 통해서 Laravel 을 설치할수도 있지만 여기서는 github 의 Laravel..
trim 은 문자열 앞뒤의 공백을 제거하는 함수의 이름으로 자주 사용되는대요. 기본적인 Chrome 과 Firefox 에서는 문자열.trim() 으로 사용이 가능합니다. 하지만 앞의 방법은 ie7, 8 에서는 작동하는 않는 방법임으로 사용을 추천하지 않습니다. ( Javascript 에러 발생 ) jQuery 에서 사용하는 방법은 아래와 같습니다. var text = $.trim(문자열); 위와 같은 방법으로 사용하셔 주셔야 되는대요. 간혹 trim 의 사용방법이 비슷한 관계로 해깔려서 틀릴수도 있으니 참고 하시기 바랍니다. 문자열.trim() -> X : ie7, 8 및 일부 브라우저 작동 불가$.trim(문자열) -> O : jQuery 를 이용한 trim 임으로 대부분의 브라우저에서 작동 가능 ps..
Bootstrap 에서 사용하는 Mediaquery 의 사이즈 입니다. (v. 3.1.1) Media query 란 화면의 사이즈에 따라 Stylesheet 를 적용하는 방식으로 반응형 웹을 만들때 javascript 가 아닌 Stylesheet 를 이용하여 만들때 많이 사용합니다. /* 가장 작은 크기 */ @media(max-width:767px){ } /* 중간 1*/ @media(min-width:768px){ } /* 중간 2 */ @media(min-width:992px){ } /* 가장 큰 크기 */ @media(min-width:1200px){ } 위와 같은 코드를 에 넣어주시고 각 크기에 맞게 원하는 스타일을 넣어 주시면 됩니다.
jQuery 에서 색으로 어떤 액션을 구분하려고 할때 발생할수 있는 문제점으로 컬러를 가져 올때 jQuery 는 RGB로 가져오게 되어 있습니다. 이런 컬러를 흔히 사용하는 Hex 로 구분해 주는 함수 입니다. function rgb2hex(rgb) { if ( rgb.search("rgb") == -1 ) { return rgb; } else { rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); } } 사용 방..
Coda 케쉬 (Cache) 파일을 찾아 내는 방법입니다. 우선 폴더로 이동... 을 선택하여 폴더 이동 창을 열어 주시고 위와 같이 ~/Library/Caches/Coda 2/ 를 입력하여 줍니다. (Library 에서 텝을 눌러 주시면 자동으로 변환됩니다. 꼭 한글이 아니어도 됩니다. ) 이동 하시면 아래와 같이 랜덤한 이름으로 생성된 폴더들이 보이실탠대요. 이 폴더에서 생성 시간과 파일 이름을 보시고 찾으시면 됩니다. 케쉬에서 파일을 불러오는 방법은 백업이 되지 않았을 경우의 응급처치 방법으로 아래에서 소개시켜 드리는 링크의 Save and backup 을 사용하여 보시기 바랍니다. Coda 2 Save and Backup : Coda 2 백업용 플러그인 Save and Backup을 사용하여 수정..
ps . 이 포스팅은 Coda 2 최신버전에서는 작동하지 않을수도 있습니다. Coda 2 의 플러그인으로 FTP 로 저장 할 경우 날짜와 시간단위로 로컬에 저장하는 플러그인 입니다. 플러그인 개발자분의 링크 주소는 http://eskapism.se/wordpress/saveandbackup-coda-plugin/ 입니다. 사용법은 간단합니다. 일단 아래의 링크에서 파일을 다운받도록합니다. 혹은 개발자 분의 Github 에서 다운받도록합니다. 개발자 링크 : http://eskapism.se/software/bin/saveAndBackup.codaplugin.zip개발자 Github Master : https://github.com/bonny/saveAndBackup-for-Coda/archive/mast..
jQueryMobile 에서 이벤트가 2번씩 발생할때가 있습니다. ( jQuery Mobile 의 페이지 관리 특성에 따라 특정 오브젝트에 이벤트가 중복해서 들어 갈수 있습니다. ) 개발 로직에 따라서 피해 갈수도 있지만 정말 ... 어쩔수 없는경우 중복 이벤트를 해결하는 방법으로 .off() 를 이용하실수 있습니다. 오브젝트에 이벤트를 연결하는 .bind 전에 ( 혹은 .click .mouseover 등등... ) .off 를 넣어 주실수 있습니다. 간단하게 보자면 $(".logo").bind("touchstart",function(){ if(btnStatus == 'true'){ var id = $.mobile.activePage.attr('id'); if(id != "MAIN"){ $(".uiBlo..
- Total
- Today
- Yesterday
- 서버 개발
- 웹 개발자
- mac
- JavaScript
- 웹 서버
- 우분투
- 튜토리얼북
- 개발자
- 개발
- 게임 개발
- php
- it
- Nodejs
- 인터넷
- html
- 서버
- ubuntu
- Developer
- 웹 개발
- 웹
- SNS
- 데이터베이스
- Tutorialbook
- 맥
- cocos2d-x
- 에러
- 설치
- 게임
- Laravel
- Database
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |