php 코드이그나이터를 이용한 페이지 개설 초급

오랜만에 웹 개발 관련 글을 쓰는군요

보시는 분이 있을지 모르겠지만, php를 이용한 코드이그나이터 연결에 대해 알아보겠습니다.

우선 지난번에 wampserver 를 이용해 localhost 까지 호스팅 하는 법을 다뤘구요

오늘은 코드이그나이터를 이용 localhost/register, localhost/sub, 등 

페이지 개설해서 이동할수 있는 기초적인 부분부터 할게요~

우선 코드이그나이터를 다운받아 주셔야 해요

http://www.ciboard.co.kr/user_guide/kr/installation/downloads.html 

최신버전으로 받아주시구요 다 받으시면 

이렇게 구성되어있는데 전체를 복사해서 실제 사용할 폴더에 이동시켜 놓아야해요

저같은 경우 devserver 라고 디렉토리를 만들고 지난번에 test.html 등 만들어놓앗는데요

지금은 devserver/Web/ 까지 디렉토리 만들고 그 안에 넣어두었습니다.

그다음엔 wampserver 를 조금 수정해 주셔야 해요

저같은 경우 경로가 C:\wamp64\bin\apache\apache2.4.23\conf\extra 이렇게 되구요

이곳에서 httpd-vhosts.conf 를 에디터플러스나 워드등으로 열으시고

이렇게 변경했어요

그리고 서버 재시작하시고~ localhost 들어가시면

이런 페이지가 뜰거에요

그럼 코드이그나이터 설치가 잘 되었단 뜻입니다.

그럼 이제 컨트롤러를 추가하고 페이지를 추가해 봐야겠죠?

우선 wamp 트레이 아이콘 클릭 -> Apache -> apache modules -> rewrite_modules 체크 하시구요

되어있다면 패스~ 그다음 application 폴더에 있는 .htaccess 요놈을 Web 폴더 아래로 이동시키세요

이놈은 index.php 와 동일한 디렉토리에 있어야 해요

안에 내용을 이렇게 변경 하시구요

application -> config -> config.php 에서

$config['index_page'] = 'index.php'; 를$config['index_page'] = ''; 로 변환하시고

application -> controller 에 main.php를 하나 추가해볼게요

안에는 기본 인덱스로 index.html 이 열리도록 해놨습니다.

index.html은 application -> views 에 생성하시면 되구요.

이제 wamp 서버 재시작 하시고 localhost/main 치시면

index.html 뷰가 보이실 거에요

이렇게 말이죠 localhost 기본 인덱스 컨트롤러 설정은 

application -> config -> route.php 에서

수정하시면 되요

$route['default_controller']의 welcome 을 main 으로 고치시면

/main url을 쓰지 않아도 접근하는걸 볼수 있습니다.

다음엔 라우팅으로 좀더 세부 카테고리 접속하는것과

js, css, html 등 기본 사용법 알아볼게요

랜딩페이지를 만들어 봅시다~

안녕하세요 이제부터 php 와 wampserver 그리고 코드이그나이터를 이용한 

웹 사이트 구축에 대해 차근차근 진행해 보려고 합니다 . 사실 저도 잘 모르는게 많기 때문에 

포스팅 하면서 복습? 아닌 복습을 하면서 좀 더 개념에 대해 다가가고자 하는 부분도 있답니다 ^^

우선 로컬호스트를 연결해서 서버를 가상으로 구성해야 하니 

wampserver 부터 설치하셔야 해요

http://www.wampserver.com/en/

wampserver 는 이곳에서 받으실 수 있고 윈도우 운영체제에 따라 다운로드 후 설치해 주시구요

설치 경로는 왠만하면 바꾸지 말고 진행해 주세요~

설치가 완료되시면 

위 경로로 이동하셔서 httpd-vhosts.conf  파일을 열어주세요 

메모장으로 열면 보기 힘드니 에디트플러스 같은 프로그램으로 열어주셔야

잘 볼수 있어야 워드로 열어도 잘 보이더군요

열으시면 보이시는 것처럼 세팅해주세요

서버네임은 기본 localhost로

루트와 디렉토리는 앞으로 개발하면서 사용하실 폴더를 걸어주세요

제가 루트와 설정한 폴더 입니다.

index.html 하나 만들어서 그냥 넣어주엇습니다.

이렇게 하시고 wampserver를 실행하시면 하단 트레이 아이콘이

빨간 > 주황 > 녹색 으로 변할거에요

녹색이면 서버가 활성화 된 상태이구요

주황이면 세팅에 문제가 있는거니 이부분은 나중에 다룰께요

대게 주황불일때는 다른 AMP 던가 아파치가 실행중이던가 할때 발생하더라구요

루트와 디렉토리가 일치하지않아도 발생하구요.

이제 개발 프로그램을 받아볼까요? 

대게 잘 모르시는 분들은 에디트플러스로 하시는데 여간 작업하기 까다롭고 불편한게

아니에요 추천해드리는 프로그램은 aptana studio 입니다. 

http://www.aptana.com/products/studio3/download

이곳에서 받으실 수 있어요 설치 하시고 실행하시면 

처음 나오는 workspace 는 그냥 확인 누르시구요

왼쪽 프로젝트에서 만드셧던 디렉토리에서 작업이 가능해져요

새로운 html 이나 css, js 생성은 폴더 우클릭 new from template 에서 

추가할수 있어요.

전 인덱스가 있어서 test.html을 만들어 보았구요

위 이미지처럼 나온다면 서버세팅은 완료하신거에요~

이제부턴 로컬 개발환경에서 개발을 진행하실 준비가 된거라고 보시면되요!

다음 편에서 계속할게요~

요즘 웹 개발 하면서 하이브리드 많이 쓰고있는것 같다.

그중에도 안드로이드 스튜디오를 이용한 웹뷰 이용하기!

네이티브 코드 몇개 쓰고 실상 화면은 웹페이지 그대로 얹어서 쓰는건데..

그럴려면 웹 표준 코딩도하고 모바일 responsive 도 아주 중요하다

폰도 사이즈가 각각 다르니까 최소 pad, desktop, phone 사이즈에 맞춰서 화면이 깨지지 않게 잘나오게 해야하니..

예를들면 이런 형식 대게 ul li 태그 쓰지 않앗나 싶은데 float:left 주면 되니깐..

하지만 모바일로 보면 이렇게 나타난다 모바일이 아니더라도 브라우저 사이즈를 저만큼 줄이면 저렇게 나타날거다

반응형 웹으로 모바일에선 모바일 사이즈에 맞게 나오는 것이다. 하이브리드 앱과도 연관이 크다

css를 줄때 @media 를 써 width 사이즈 별로 스타일을 다르게 할수 있다.

모바일 사이즈 480px 아래로 내려간다면 float:left를 없애고 각 li 태그 width 사이즈를 100% 주고

height 은 auto주는게 좋은것 같다 img 태그의 경우는 width나 height 둘중 하나만 지정하고 나머진

auto 주면 스케일도 자동 조정되니 참고하시길..

기본 css @media 예제이다. 간단하게 최소 사이즈가 480보다 크면 동작하니 반응형으로 할땐 반대로 max-width 를 주면 될것이다.

위에 반응형을 한번 간단하게 만들어 보았다.

대략 이렇게 하고 안에 배치는 li 안에서 잘 배분해서 하면 되지 않을까 싶다.

좀더 자세하게 코드정리를 하면 좋겠지만 그럴 실력이 못되니.. 휴

UI 맞추고 프론트단 작업하는것보단 역시 jquery 랑 php 컨트롤러 만지는게 더 재밋는것 같다.

다음엔 php 코드이그나이터를 이용한 기초 예제를 한번 해볼 참이다

코드이그나이터에서 제공해주는 예제가 있지만 초보자기 이해하기도 어렵고..

초반에 해매고 고생한 기억이나서 완전 쉽게 라우팅부터 컨트롤러 뷰 페이지 인클루드 등등

기초적인걸 설명할 참이다 wamp 사용법까지도 그럼 이만~~

작업하다보니 몇개 빼먹은게 있는데 !important 는 다른 사이즈에 동일한 스타일을 줬엇더라면

꼭 줘야한다 어떻게보면 상위 이고 !important 를 주지 않는다면 기존 스타일을 따를테니

!important 는 강제로 지금 정의한 style을 주는거다

※ 혼자 글쓰며 공부하는거라 존칭을 쓰지 않는점 양해바랍니다 ^-^

<jquery 클릭 이벤트 제어 하기>

아주 쉬운 초보자 개념에서 만들어 보았습니다.

대게 클릭 이벤트 사용할때 $('#id').click(function(){ }); 이렇게 많이들 쓸텐데 

바인딩 문제로 스택쌓이거나 할수도 있습니다.

그러니 언바인드도 중요합니다. 대게 append 혹 해당 클릭 이벤트가 여기저기 한곳에서 

여럿쓰인다면 ( document ready 상태에서)

off('click').on('click',function(){}); 방식도 좋습니다

초보자 개념에서 예제를 만들어봣습니다

대충 ul > li 를 이용해 끄적거리기..

아래처럼 네비게이션 메뉴바라 생각해보고 만들어보았습니다

마우스 오버했을때 css 스타일적용되도록 해놓고

클릭했을때 active 클래스를 삽입하여 고정되도록 해봤습니다

대게 페이지 이동없이 메뉴 클릭 이벤트가 일어날때 필요할듯하네요..

우선 샘플 html 작성해주시고~

스타일도 생각나는데로 붙여봤습니다.....공대감성;;

마우스 오버 스타일도 붙여보고

클릭이벤트 제어입니다.

우선 hasClass로 this에 해당 클래스가 있는지 체크해주고

있다면 remove 시켜서 active 클래스를 제거해주고

없다면 전체 a 태그 (다른곳에 active 되어있을수도있으니)

클래스 클리어 해주시고 this에 addClass 해주시면 되겠습니다.

부트스트랩2로 하다가 3로 바꾸고나니 좀 햇갈리는게 있는데

css는 역시 어렵네요

앞으로 개발하면서 그리드, draggable, resizable, 이미지 scale 등

생각나는데로 끄적여보겠습니다.