LuisK
LuisK
Aug 26 · 5 min read

#XE3로 배우는 쉬운 웹사이트 제작 방법

XE3를 활용해서 웹에 대해서 잘 모르는 초보자도 쉽게 홈페이지를 구성할 수 있는 웹사이트 제작방법을 소개하기 위해 제작되었습니다.
본 게시글은 상담 게시판과 같이 고객의 이름과 전화번호 등의 정보를 입력받아 보여주는 게시판을 만드는 방법을 알아보겠습니다.

XE CAMPUS 바로가기

XE CAMPUS에서는 XE를 사용하여 내 사이트를 보다 쉽게 만들기 위한 컨텐츠를 제공하고 있습니다.

이번에 알아볼 것은, 상담 게시판과 같이 고객의 이름과 전화번호 등의 정보를 입력받아 보여주는 게시판을 만드는 방법을 알아보겠습니다.

시작하기 전에

본 내용은 XE3에 기본 번들로 포함되어있는 게시판 플러그인을 기준으로 작성하고 있으며, 게시판 플러그인이 아닌 다른 플러그인에서는 다른 방법으로 활성화 하거나 접근 할 수 있습니다.

확장 필드란?

확장필드는 일반 게시판 기능에서 문의게시판 또는 상담게시판과 같이 특이한 상황에서 본문에 글을 쓰는 것이 아닌, 별도 폼으로 받아 저장해주는 기능을 합니다.

또는 뉴스게시판, 스크랩게시판에서 원본의 글 주소를 붙여넣을 공간을 마련해주기도 합니다.

확장 필드에서 선택할 수 있는 확장 필드 종류.

확장 필드 세팅하기

이번 예시에서는 “문의게시판”에서 [고객이름, 휴대폰 번호, 이메일주소]를 받는 문의 게시판을 만드는 것으로 예시를 들어 만들어 보도록 하겠습니다.

게시판 설정의 확장 필드를 클릭한 후, 오른쪽에 위치한 추가 버튼을 클릭합니다.
우선 고객 이름을 받는 확장 필드를 만들기 위해서는 회원의 이름은 글자이므로 종류는 Text-문자 를 선택하고 아이디는 우리가 알기 쉽게 customer_name 으로 해줍니다.

라벨은 회원 이름 으로 해주고, 라벨 상세 설명에는 회원이 볼 수 있는 설명이므로, “고객님의 이름을 입력해 주세요” 라고 입력합니다.

모두 입력하면 아래와 같은 형태가 완성됩니다.

위에서 설명한 것들을 모두 입력하면 이미지와 같아집니다.

그와 동시에 설정할 수 있는 것이 있습니다.

  • 사용 : 이 체크박스를 체크 해제 하는 경우, 입력칸과 입력된 값을 더 이상 볼 수 없습니다. (이미 입력되어 있는 게시글 포함)
  • 입력 필수 : 게시글 작성시에 필수 여부를 설정할 수 있습니다.
  • 검색 가능 : 이 확장 변수 값으로 검색을 할 수 있습니다.

우리는 회원 이름이 필수여야 고객 관리가 가능하므로, 회원 이름은 필수여야 하고, 일대일 게시판 이기 때문에 추후 이전 문의를 보려면 검색해야 하므로, 상단의 체크 박스를 기본 값으로 두고 저장을 클릭합니다.

그 이후 게시판 글쓰기에서 볼 수 있는 폼은 아래와 같습니다.

생성한 확장 필드는 이미지와 같이 생성됩니다.

이렇게 나머지 정보인 “휴대폰 번호”와 이메일 주소를 받아보겠습니다.

휴대폰 번호와 이메일 주소를 받는 확장 필드의 예시

위 이미지와 같이 입력하게 되면, 위에서 필요한 이름과 휴대폰 번호, 이메일 주소를 받을 수 있게 되었습니다.

그리고 아이디는 본인이 입력하기 쉽거나 관리하기 쉽게 입력해도 되며, 꼭 예시와 동일하게 입력하지 않아도 됩니다.

확장 필드로 검색하기

게시판에 게시글이 지속적으로 쌓이게 되고, 특정 회원의 게시글 목록을 뽑고 싶을때 아래와 같이 할 수 있습니다.

상단의 검색 버튼을 클릭 후 오른쪽에 위치한 상세검색을 클릭하면 아래와 같은 화면을 볼 수 있습니다.

검색 버튼을 클릭후, 상세 검색을 클릭하면 볼 수 있는 화면 입니다.

하단의 회원 이름 또는 이메일 또는 전화번호를 검색할 수 있으나, 예시에서는 전화번호는 검색하지 못하도록 설정하여, 검색 목록에는 나오지 않습니다.

예시로 김엑스라는 회원이 작성한 전체 문의 게시글을 검색합니다.

예시로 김엑스라는 회원이 작성한 문의 게시글 전체를 보겠습니다.

입력하는 곳을 햇갈리지 않도록 주의하세요~

이렇게 사이트 운영에서 필요한 문의 게시판을 확장 필드를 통해 손쉽고 효율적으로 관리하는 방법을 알아보았습니다.

확장 필드는 꼭 문의게시판이 아니더라도, 다양한 범위에서 사용할 수 있고 스킨을 직접 만들거나 고쳐 내가 원하는대로 수정할 수도 있다는 점!

지금 까지 XE3로 배우는 쉬운 웹사이트 제작 방법을 읽어주셔서 감사합니다 :)

웹사이트를 만드는것은 어렵지 않습니다, XE와 함께라면요 :)

XE 공식 홈페이지 바로가기
XE CAMPUS 바로가기

XEHub

Stories and tips for XE, the best platform for web page building.

LuisK

Written by

LuisK

Content Director At XEHub

XEHub

XEHub

Stories and tips for XE, the best platform for web page building.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade