BLOG ARTICLE 안산대학교/WebDB | 23 ARTICLE FOUND

  1. 2013.03.11 파일질라(Filezilla) 다운로드
  2. 2012.03.28 웹프로그램(PHP)의 장점 1
  3. 2012.03.26 XE 게시판 모듈 생성 1
  4. 2012.03.19 XpressEngine(XE) 1.5.x 설치
  5. 2012.03.17 한글 문자셋

실습용 웹서버와 같이 원격서버에 홈페이지 관련 파일들을 저장하려면 일반적으로 FTP Client 프로그램이 필요하다. 이를 위해 대표적 FTP Client 프로그램인 Filezilla Client 프로그램을 다운로드하는 방법을 알아보자.

1. 웹브라우저(이 예에서는 크롬)를 실행한 후 http://sourceforge.net 주소에 접속한 뒤 검색창에 Filezilla를 입력한다.


2. 검색 결과에서 아래와 같은 이미지를 찾아 클릭한다.


3. 클릭 후 나타나는 화면에서 Download 이미지를 클릭 Filezilla를 다운로드한다.


4. 크롬의 경우 브라우저 좌측하단에 다운로드 상태가 표시되고 클릭하면 다운로드가 완료된 후 FileZilla의 설치가 진행된다.


'안산대학교 > WebDB' 카테고리의 다른 글

웹프로그램(PHP)의 장점  (1) 2012.03.28
XE 게시판 모듈 생성  (1) 2012.03.26
XpressEngine(XE) 1.5.x 설치  (0) 2012.03.19
한글 문자셋  (0) 2012.03.17
워드프레스 설치  (0) 2012.03.04
AND


PHP와 같은 웹프로그램으로 홈페이지를 작성할 때의 장점에 대해 간략히 살펴보자. 

1. 동적인 홈페이지를 구축할 수 있다.

우선 아래 today.html 문서는 접속한 날짜를 출력하기 위한 문서라고 가정해 보자. 이 문서에 접속했을 때 브라우저를 통해 보면  언제나 

"오늘은 2012년 03월 26일 입니다." 

를 출력한다. 그러므로 날짜가 지나면 올바른 날짜를 출력할 수 없기 때문에 관리자가 하루에 한 번씩 문서 내용을 수정해야 한다.


today.html


하지만 이를 PHP와 같은 웹프로그램으로 작성한다면 자동으로 접속한 날짜를 계산하여 출력하기 때문에 관리자는 문서를 수정할 필요가 없다. 아래 프로그램은 PHP의 date() 함수를 이용 접속날짜를 자동으로 출력해 주는 프로그램이다.


today.php


2. 단순 반복 작업을 쉽게 구현할 수 있다.

아래 mux.html 문서는 구구단을 출력한다. 그러나 만약 이 구구단을 99x99단으로 확장하려 한다면 할 수는 있겠지만 아주 힘들고 지루한 작업이 될 것이다. 하지만 PHP로 작성하면 쉽게 목적을 달성할 수 있다.


mux.html


아래 mux.php 프로그램은 mux.html과 마찬가지로 구구단을 출력한다. 그러나 99x99단으로 확장하려 한다면 11, 15 라인의 9를 99로 변경하면 쉽게 99x99 곱셈표를 출력할 수 있다.


mux.php


 

'안산대학교 > WebDB' 카테고리의 다른 글

파일질라(Filezilla) 다운로드  (0) 2013.03.11
XE 게시판 모듈 생성  (1) 2012.03.26
XpressEngine(XE) 1.5.x 설치  (0) 2012.03.19
한글 문자셋  (0) 2012.03.17
워드프레스 설치  (0) 2012.03.04
AND


1. XE는 모듈이라 불리우는 추가 가능한 프로그램들을 조합하여 사이트를 확장할 수 있다. 여기서는 XE 핵심 모듈 중 하나인 게시판 모듈을 추가해 보겠다. 모듈을 추가하기 위해서는 XE 공식 사이트에 접속하여 모듈 메뉴를 클릭 설치를 원하는 모듈을 다운로드해야 한다.



2. 모듈목록 화면에서 게시판 모듈을 클릭한다. 글 작성 당시 버전은 1.4.4 이다.



3. 게시판 모듈 화면에서 다운로드 항목을 클릭 해당 모듈을 적당한 폴더에 다운로드하고 압축을 푼다.
 



4. FileZilla 등을 이용하여 로컬 컴퓨터의 "1.4.4" 폴더를 서버의 XE가 설치된 폴더 아래의 "modules" 폴더 안에 업로드한다.
 



5. "1.4.4" 폴더의 업로드가 완료됐으면 오른쪽 클릭을 통해 이름을 "board"로 변경한다. 변경 이유는 모듈을 패키징 할 때 배포자의 실수로 보이며, 변경하지 않고 "1.4.4"로 그냥 사용할 경우 정상 동작을 하지 않는다.
 



6. 아래는 이름을 변경한 후의 화면이다.



7. 위 모든 과정이 끝났으면 XE가 설치된 서버에 접속한 후 XE 관리자로 로그인한다.



8. 관리자로 로그인 한 후 "관리" 메뉴를 클릭 관리자 화면으로 접속한다.



9. 관리자 화면에서 "확장기능" 메뉴의 "설치된 모듈" 항목을 클릭한다.



10. 게시판 모듈이 올바른 경로에 업로드 됐다면 "설치된 모듈" 화면에 그림과 같이 게시판 항목이 나타난다. 게시판 모듈의 업데이트가 가능한 경우 업데이트를 진행한다.



11. 업데이트가 완료되면 다음과 같은 화면이 나오는데 "확인" 버튼을 클릭한다.



12. 이제 게시판 모듈의 업데이트가 완료되었다.



13. 이제 설치된 게시판 모듈을 이용해 게시판을 생성해 보자. 이를 위해 "사이트" 메뉴의 "사이트맵" 항목을 클릭한다.



14. "사이트맵" 화면에서 "메뉴추가"를 클릭한다. 사이트 맵 화면이란 XE로 사이트를 구축할 때 메뉴를 만들고 해당 메뉴를 클릭했을 때 표시할 게시판 또는 페이지 등을 설정해 주는 화면이다.



15. 이 글은 게시판 생성과 관련된 연습을 위한 글이므로  "메뉴추가" 화면에서 "메뉴 이름", "모듈 또는 URL", "모듈 선택", "모듈 아이디 생성" 항목에 각각 "게시판연습", "모듈 생성", "게시판", "test"를 입력 또는 선택한 후 "저장" 버튼을 클릭한다.



16. "저장" 버튼을 클릭하면 "사이트맵"에 "게시판연습" 항목이 생기는데 이 부분을 클릭하면 생성된 게시판을 확인할 수 있다.



17. 다음은 게시판 화면으로 주소창에 보면 쿼리스트링 부분이 "?mid=test" 형식으로 나타나는데 여기서 "test"는 15번 설명에서 입력한 "모듈 아이디 생성" 항목의 "test" 이다. 또한 창제목의 "게시판연습"은 "메뉴 이름" 항목에서 입력한 값이다. 만약 또 다른 게시판을 생성 운영하고 싶다면 14번 설명으로 돌아가 "메뉴 추가"를 클릭한 후 15번 설명에서 "메뉴 이름"과 "모듈 아이디 생성" 항목을 새로운 값으로 입력하면 원하는 만큼의 게시판을 생성 운영할 수 있다.


'안산대학교 > WebDB' 카테고리의 다른 글

파일질라(Filezilla) 다운로드  (0) 2013.03.11
웹프로그램(PHP)의 장점  (1) 2012.03.28
XpressEngine(XE) 1.5.x 설치  (0) 2012.03.19
한글 문자셋  (0) 2012.03.17
워드프레스 설치  (0) 2012.03.04
AND


1. XpressEngine을 다운로드하기 위해 공식 사이트(http://www.xpressengine.com)에 접속한 후 "XE Core 1.5.1" 이미지를 클릭한다. (글 작성당시의 최신 버전은 1.5.1.13 이다.)



2. XE Core "다룬로드" 이미지를 클릭한 후 적당한 곳에 다운로드 파일을 저장하고 "알집" 등을 이용 압축을 푼다.



3. 이제 압축이 풀린 "xe" 폴더를 웹서버에 올리기 위해 "FileZilla" 등과 같은 FTP Client 프로그램을 실행한 후 서버에 접속한다.



4. 로컬컴퓨터(화면의 좌측)의 "xe" 폴더를 서버(화면의 우측)의 웹디렉터리(public_html)에 업로드한다.



5. 업로드가 끝나면 DB 및 사이트 설정을 위해 브라우저로 업로드한 XE 사이트로 접속한다. 그러면 아래와 같은 화면이 나타나는데 여기서 "LGPL v2" 항목에 체크한 후 "라이센스에 동의합니다"를 클릭한다.



6. 설치조건 확인 화면에서 "퍼미션" 항목이 "불가능"이라고 출력되면 서버의 "xe" 폴더에 웹서버가 쓰기권한이 없기 때문이다. 이런 경우 "FileZilla" 등을 통해 "xe" 폴더의 권한을 777로 변경해야 한다. 만약 아래와 같은 화면이 아니고 모두 가능인 경우에는  9번 설명으로 넘어간다.
 


7. "FileZilla" 등을 이용 서버의 "xe" 폴더 권한을 "777"로 변경하기 위해 "xe" 폴더에서 오른쪽 클릭을 통해 "파일 권한" 항목을 선택한다.



8. 파일속성 바꾸기 창에서 숫자값을 "777"로 변경하여 모든 권한을 부여한다.



9. 위 과정을 거쳐 아래 화면과 같이 모든 항목이 "가능" 상태로 표시되면 이제 XpressEngine 설치의 기본 조건이 충족된 것이다. 이제 "설치를 진행합니다."를 클릭한다.



10. 사용할 데이터베이스를 선택한다. 여기서는 mysql을 선택하였다.
 


11. 자신에게 주어진 MySQL 계정 정보를 올바르게 입력한 후 "다음"을 클릭한다.
 


12. "환경설정" 화면에서 "짧은 주소 사용"을 원치 않으면 체크를 해제한 후 "다음"을 클릭한다.



13. XpressEngine 운영을 위한 관리자 정보를 입력한 후 "완료"를 클릭한다.



14. 다음과 같은 화면이 나오면 XpressEngine이 올바르게 설치된 것이다. 이제 13 항목에서 입력한 관리자 정보로 로그인 한 후 테마 또는 모듈프로그램 등을 설치하여 XE를 이용한 사이트를 꾸미고 운영해 보자. 


'안산대학교 > WebDB' 카테고리의 다른 글

웹프로그램(PHP)의 장점  (1) 2012.03.28
XE 게시판 모듈 생성  (1) 2012.03.26
한글 문자셋  (0) 2012.03.17
워드프레스 설치  (0) 2012.03.04
EditPlus FTP 기능 활용  (0) 2011.09.13
AND


현재 한글 웹사트에서 사용되는 인코딩 방식(=문자셋)은 크게 "EUC-KR"과 "UTF-8" 이 두 가다. 특히 최근 만들어진 대부분의 웹사이트는 다국어 지원을 위해 "UTF-8"을 사용하는 추세이나 아직 "EUC-KR"을 사용하기도 한다. 따라서 웹사이트 제작에 사용된 한글을 브라우저가 올바르게 해석 보여줄 수 있도록 하려면 사용된 문자셋을 브라우저에게 알려줘야 한다. 이것은 HTML <Meta> 태그를 사용하면 된다. 이 태그는 <HEAD> ~ </HEAD> 태그 사이에 위치하며 한글이 나오기 전에 사용하는 것이 좋다. 형식은 다음과 같다.

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

위 태그에서 이탤릭체로 된 utf-8 부분을 html 코드에서 사용한 문자셋으로 지정하면 된다. HTML5에서는 아래와 같이 단순화 해서 사용할 수 있다.

<Meta charset="utf-8" />

만약 HTML에 사용된 문자셋을 브라우저에 알리지 않으면 브라우저는 자신에게 설정된 기본 인코딩 방식을 이용하여 문자셋을 해석하기 때문에 한글이 올바르게 처리되지 않을 수 있다.

Edit+ 로 HTML, PHP 등으로 홈페이지를 작성 저장할 때 기본 인코딩 방식은 "ANSI" 다. 이 방식으로 파일을 저장했을 때는

<Meta http-equiv="Content-Type" content="text/html; charset=euc-kr"/>

과같이 선언해야 한글이 깨지지 않고 바르게 보인다. 반면 파일 저장 시 인코딩 옵션을 "UTF-8"로 지정했다면

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

과 같이 선언해야 올바른 한글 화면을 볼 수 있다.

아래 네 가지 예제는 각각의 문자셋에서 <Meta> 태그를 사용하여 브라우저에게 사용된 문자셋을 알려줬을 때와 그렇지 않았을 때, MS IE와 Apple Safari 브라우저에서 출력되는 결과를 보여준다. 결론적으로 <Meta> 태그를 이용 사용된 인코딩 방식(문자셋)을 선언하지 않으면 한글이 깨질 수 있음을 알 수 있다.


예1) Meta 태그가 생략된 EUC-KR 문서

euc-kr-1.html


인코딩 방식을 ANSI(EUC-KR)로 지정 후 저장


MSIE를 이용 euc-kr-1.html를 봤을 때 한글 깨짐 없음


Apple Safari를 이용 euc-kr-1.html를 봤을 때 한글 깨짐



예2) Meta 태그가 생략된 UTF-8 문서

utf-8-1.html


인코딩 방식을 UTF-8로 지정 후 저장


MSIE를 이용 utf-8-1.html를 봤을 때 한글 깨짐


Apple Safari를 이용 utf-8-2.html를 봤을 때 한글 깨짐



예3) Meta 태그로 사용된 문자셋 정보를 제공한 EUC-KR 문서

euc-kr-2.html


인코딩 방식을 ANSI(EUC-KR)로 지정 후 저장


MSIE를 이용 euc-kr-2.html를 봤을 때 한글 깨짐 없음


Apple Safari를 이용 euc-kr-2.html를 봤을 때 한글 깨짐 없음



예4) Meta 태그로 사용된 문자셋 정보를 제공한 UTF-8 문서

utf-8-2.html


인코딩 방식을 UTF-8로 지정 후 저장


MSIE를 이용 utf-8-2.html를 봤을 때 한글 깨짐 없음


Apple Safari를 이용 utf-8-2.html를 봤을 때 한글 깨짐 없음



'안산대학교 > WebDB' 카테고리의 다른 글

XE 게시판 모듈 생성  (1) 2012.03.26
XpressEngine(XE) 1.5.x 설치  (0) 2012.03.19
워드프레스 설치  (0) 2012.03.04
EditPlus FTP 기능 활용  (0) 2011.09.13
과제물  (0) 2011.09.07
AND