다음 이전 차례

11. 사이트 둘러보기

이 장에서는 여러분들이 만들어볼 스크립트의 형태를 그림으로 확인 할 수 있게 했습니다.    먼저 사용자의 로그인과 로그아웃 , 각 게시판의 정보를 보여 주는 사이트 메인 화면과 간단한 파일을 공유하는 자료실 그리고, 개인의 물건을 사고 파는 경매 게시판, 또 다양한 상품을 진열해서 구입 할 수 있는 쇼핑 몰 마지막으로 사이트 전반에 걸친 관리를 하는 admin영역 등을 살펴 보겠습니다.

11.1 메인 화면

사이트의 메인 화면은 대부분의 상업적인 사이트의 경우 광고와 간단한 뉴스와 정보를 제공 합니다.    우리가 만들어볼 메인 화면은 사용자의 로그인과 로그아웃 , 각 게시판의 TOP글 등을 출력 합니다.    이것은 다소 상업적인 사이트보다는 미약 하지만 조금의 수정만으로도 충분히 상업적인 사이트로 변모할 수 있습니다.

메인화면

사이트에 처음 접속 했을 때 화면 입니다. 먼저 등록된 아이디나 guest로 로그인이 가능 하고, 로그인 했을
경우 화면에 로그인 ID를 출력합니다.   로그인을 안했을 경우나 guest로 로그인 했을 경우는 회원가입 링크
를 생성하며 등록된 ID , guest 모두 채팅은 가능합니다. 
다음 차례로 자료실 , 경매 , 쇼핑 몰 의 링크를 생성 하고, 자료실과 경매의 TOP 글을 출력 합니다.
메인 화면의 마지막 부분은 admin영역에서 생성한 자료실과 경매 게시판의 나머지를 모두 출력 합니다.

그림. 11-1 메인 화면

회원 가입

메인 화면에서 회원 가입을 클릭 하면 보여주는 화면 입니다.

채팅 모드

등록된 ID나 guest로 로그인 했을 경우 채팅을 하는 모드 입니다.
이 채팅 모드는 간단히 해당 사이트에 접속한 사람 끼리 글을 주고 받을 수 있는 기능 이며 메타 테그를 이용해
파일을 일정 주기로 읽어 들이는 방법을 택했습니다. 이것은 사람이 많을 경우 부하가 생기는 단점이 있습니다.

그림. 11-3 채팅 모드

11.2 자료실

자료실은 guest의 경우 자료의 다운만 가능 하며 등록자의 경우 파일의 등록과 다운 모두 가능 합니다.    간단한 파일을 주고 받는기능을 가지며 자료실의 공개를 목적으로 합니다.    자료실 메인 화면은 등록 자료를 게시판 형식으로 보여 주며 자료의 설명을 볼 수 있고, 등록일 , 등록자 , 등록일 , 자료의 삭제 , 자료의 등록 , 자료 응답 글 , 자료의 검색 기능이 있습니다.

그림. 11-4 자료실

자료 설명 보기

특정 자료 제목을 클릭 하면 해당 자료에 대한 설명과 응답 글을 볼 수 있습니다.

그림. 11-5 자료 설명

응답 글 올리기

특정 자료에 대한 응답 글을 올리는 화면 입니다.

그림. 11-6 응답 글 올리기

자료 수정 하기

등록된 자료의 파일을 제외한 부분을 수정 합니다.

그림. 11-7 자료 글 수정하기

자료 삭제 하기

등록한 자료를 삭제하는 부분이며 등록자의 패스워드를 입력해야 합니다.

그림. 11-8 자료 삭제 하기

자료 등록하기

자료실에 새로운 자료를 등록 하는 화면 입니다.

그림. 11-9 자료 등록하기

11.3 경매 게시판

경매 게시판은 먼저 회원 가입을 한 후 사용이 가능 합니다.    물론 guest로는 화면만 볼 수 있으며 나머지 경매 기능은 사용할 수 없습니다.    등록자인 경우 경매를 등록 하고 해당 경매의 글을 수정 , 삭제 할 수 있습니다.    경매는 마감 날짜에 종료 되며 다시 재개 하기 위해서는 등록자가 날짜를 수정 하면 됩니다.    마감 날짜에 해당 경매가 자동 삭제 되는 기능은 없습니다.    단지 경매의 종료를 알리는 메일이 매도자와 낙찰자에게 배달됩니다.    개선할 부분은 보다 사용자 중심의 메일 전송과 자동 삭제 기능의 추가 입니다.

그림. 11-10 경매 게시판 메인 화면

경매 내용 보기

메인 화면에서 특정 경매 제목을 클릭 하면 보여주는 부분입니다.
경매 등록자의 신상과 입찰 , 경매 수정 , 삭제 , 입찰 삭제 등의 기능이 있습니다.

그림. 11-11 경매 설명 보기

입찰 하기

해당 경매에 대한 입찰을 하는 기능 입니다. 기본 금액 이하일 경우 입찰을 할 수 가 없고,입찰은 한번만
가능합니다.   만약 다시 입찰을 할 때는 기존의 입찰을 삭제 해야 합니다.

그림. 11-12 입찰 하기

경매 수정 하기

등록한 경매의 내용을 수정 하는 기능 입니다.
이것은 기존의 입찰과 달리 매도자가 임의로 가격을 조정하거나 내용을 수정할 수 있습니다.

그림. 11-13 경매 수정 하기

경매 지우기

등록한 경매를 삭제 하는 부분 입니다. 
여러 가지 이유로 경매 진행을 못할 경우 등록자가 경매를 삭제 할 수 있습니다.

그림. 11-14 경매 삭제 하기

경매 마감 알리기

해당 경매가 설정한 마감 날짜일 경우 경매 게시판 메인 화면에 "마감" 표시를 하며 제목을 클릭했을
경우 보여주는 화면 입니다.

그림. 11-15 경매 마감

11.4 쇼핑 몰

쇼핑 몰은 사이트의 메인 화면에서 각 상품의 종목을 선택 하면 여러 상품들을 구매 하는 화면을 출력 합니다.    구매자가 선택한 상품은 바구니 항목에 저장 되며 바구니 화면에서는 선택한 물건을 다시 비울 수 있습니다.    바구니에 담은 상품을 주문할 경우 주문서 작성 화면으로 이동하며 주문한 상품을 확인 할 수 있고 다시 주문 취소를 할 수 있습니다.

쇼핑 몰 메인 화면

여러 종목의 상품이 있겠지만 여기서는 가전제품 항목을 보겠습니다.

그림. 11-16 전자제품 메인 화면

바구니 보기

구매자가 선택한 상품을 보여주는 항목 입니다.
        
바구니는 선택한 상품을 보여주고 주문을 할 수 있으며 선택한 상품을 삭제 할 수 있습니다. 

그림. 11-17 바구니 항목

주문 하기

바구니의 상품을 주문하는 항목 입니다.  로그인한 ID 세션을 이용해서 구매자의 정보를 출력해 주며 받을
주소와 구매자 이름 , 상품 도착 날짜 , 입금 은행을 입력 하는 항목이 있습니다.

그림. 11-18 상품 주문 하기

주문서 확인(계산서)

신청한 상품의 항목을 확인 할 수 있습니다.

그림. 11-19 계산서

주문취소

상품 신청을 취소하는 항목 입니다. 위 계산서 항목에서 주문 취소를 선택할 경우 신청한 상품이 모두 삭제
됩니다.   쇼핑 몰의 메인 화면에서 "주문 내역/취소"  항목을 선택할 경우 위 계산서 항목으로 이동되며
주문한 상품이 없을 경우 에러 항목을 출력합니다.

11.5 Admin 영역

자료실 , 경매 , 쇼핑 몰 , 데이터 베이스에 관한 전반적인 항목을 관리하는 부분이며 각 화면에 adimin 영역의 링크가 있습니다.   물론 접속을 위해서는 데이터 베이스에 설정한 호스트 이름 , 계정 , 패스워드를 입력해야 합니다.

admin 로그인 화면

그림. 11-20 admin 로그인 화면

자료실 admin 메인 화면

admin 영역에 접속을 하면 출력 되는 화면 이며 경매 , 데이터 베이스 , 회원 , 쇼핑 몰 admin 영역으로의
링크가 존재 하고 새로운 자료실의 생성 , 기존의 자료실 삭제 등의 기능이 있습니다.
자료실을 삭제할 때는 체크(라디오 버튼)를 한 다음 "Del" 버튼을 클릭 하면됩니다. 
하나의 자료실만 삭제 가능 하며 회원 관리 admin의 경우 체크(체크 버튼) 항목을 여러 개 설정 할 수 있습니다.

그림. 11-21 자료실 admin 화면

자료실 만들기

"Creat 자료실" 을 클릭 하면 자료실을 생성할 테이블과 자료실 이름을 입력하는 항목으로 링크 합니다.

그림. 11-22 새로운 자료실 생성

경매 게시판 admin 메인 화면

자료실 admin영역과 같으며 각 admin 영역으로의 링크가 존재 합니다.

그림. 11-23 경매 admin 메인 화면

데이터 베이스 admin 메인 화면

페이지 단위로 Mysql에 존재하는 모든 데이터 베이스를 보여 줍니다.
데이터 베이스 생성 항목이 존재 합니다.

그림. 11-24 데이터 베이스 admin 영역

데이터 베이스 새로 만들기

"New"를 클릭하면 새로운 데이터베이스를 생성하기 위해 데이터베이스 이름을 입력하는 화면을 출력합니다.

그림. 11-25 새로운 데이터 베이스 이름 입력란

테이블 항목

데이터 베이스 메인 화면에서 해당 데이터 베이스를 클릭 하면 존재하는 테이블을 출력 하며 새로운 테이블
생성 항목과 데이터 베이스 삭제 항목이 존재 합니다. 

그림. 11-26 테이블 항목

새로운 테이블 생성

테이블 화면에서 "New" 화면을 클릭하면 새로 생성할 테이블 이름과 필드속성 입력항목이 보여집니다. 
필드 속성의 경우 원하는 필드 명과 속성을 나열하면 됩니다.

그림. 11-27 새로운 테이블 생성 화면

테이블 속성 보기

테이블 목록 화면에서 특정 테이블 이름을 선택하면 해당 테이블의 필드 정보를 볼 수 있습니다.
해당 테이블의 삭제 , 필드 속성 추가 및 삭제가 가능 합니다.
필드 속성을 삭제 추가 하기 위해서는 테이블 속성 화면 하단의 select 항목(Add ,Del)을 선택 하고 해당 필드를
적어 주면 됩니다.

그림. 11-28 테이블 필드 정보

쇼핑 몰 admin 메인 화면

쇼핑 몰의 admin화면은 전자제품 admin 부분을 보겠습니다.
각 제품의 제목을 클릭 하면 해당 제품에 관련된 정보를 수정 할 수 있습니다. 
체크 박스를 이용해 상품을 삭제 할 수 있으며 "Up shop" 를 이용해서 상품을 추가 할 수 있습니다.

그림. 11-29 쇼핑 몰 admin 메인 화면(전자제품)

상품 수정 하기

상품의 가격, 이름, 이미지, 설명 등을 수정할 수 있으며 이미지를 수정할 경우 체크박스(수정 , 그림수정)을
선택해야 합니다.   이미지 이외의 부분을 수정할 경우는 수정만 체크하면 됩니다.

그림. 11-30 상품 수정 하기

새 상품 추가 하기

새로운 상품을 추가 하는 항목이며 쇼핑 몰 admin 메인 화면에서 "Up shop" 를 클릭 하면 됩니다. 
제품 가격 , 상품 종목 , 이름 , 이미지 , 설명을 입력하고 "shopup" 버튼을 클릭하면 해당종목에
새상품이 등록됩니다.

그림. 11-31 새 상품 등록 하기

회원 admin 메인 화면

사이트에 가입한 유저의 관리를 하는 항목입니다.
각 회원들의 정보를 페이지 단위로 나열하며 회원의 삭제는 체크박스를 이용해 원하는 회원만 삭제가능 합니다.
"Creat user" 버튼을 이용해서 새로운 회원을 추가 할 수 있으며 특정 회원의 정보를 수정하려면 회원의

이름을 클릭하면 됩니다. 

그림. 11-32 회원 관리 admin 메인 화면

회원 추가 하기

회원 admin 메인 화면에서 "Creat user" 를 클릭 하면 추가 할 수 있습니다.

그림. 11-33 회원 추가

회원 정보 수정

회원 admin 메인 화면에서 수정할 유저의 이름을 클릭 하면 수정할 수 있습니다.

그림. 11-34 회원 수정


다음 장에서는 메인 페이지 만들기를 설명 하겠습니다.
 

다음 이전 차례