스프링으로 쇼핑몰을 만들어보자18 - 작가 테이블 구성 & 기타

2023-01-25

기능구현

회원가입(주소API연동, 이메일 인증, ajax를 사용하여 아이디 중복검사)
관리자 페이지(인터셉터 적용, 상품관리, 회원관리)
업로드(이미지 등록, 수정, 삭제)
검색
페이징
구매(장바구니, 포인트사용)
댓글(등록,수정,삭제)
중간에 막혔거나 에러 해결 못하겠으면 ybnr92@gmail.com 으로 문의

목표

작가 테이블 작성
로고 삽입
footer 영역 작성
상품등록, 삼품관리, 작가등록, 작가 관리페이지 작성 및 맵핑 메서드 작성(다음 포스팅 예정)

프로젝트 쇼핑몰의 주제를 책으로 하고자 한다. 상품에 대한 CRUD기능을 포스팅할 예정이었지만 상품 정보에 포함될 작가에 대한 정보를 좀 더 세분화 하기로 하였고
먼저 작가에 대한 정보의 CRUD 기능을 구현하고자 한다.
상품에 대한 CRUD는 다소 많은 데이터를 처리해야 해서 복잡하기 때문에 다소 적은 데이터를 다루는 작가 CRUD를 먼저 구현 후 상품에 대한 CRUD를 다루면 좀 더 쉽게 접근할 수 있을 것 같다.
본격적으로 작가 데이터 기능 구현에 앞서 해당 데이터의 기반이 되는 작가 테이블을 작성하려 한다.

추가적으로 홈페이지 모든 페이지에 들어갈 하단 영역, footer영역을 작성할 것이고 로그 그림을 다운로드 받아 메인 페이지와 footer 영역에 삽입할 예정이다.

순서

작가테이블
로고
footer영역

로그인 메서드 적용

작가 테이블에는 작가ID, 작가 이름, 작가 소속 국가, 작가 소개로 구성할 것이다.
추가적으로 작가 소속 국가의 값은 국내와 국외만 들어갈 수 있도록 하기 위해 따로 소속 국가 테이블을 만들고 값을 생성한 뒤 해당 테이블의 값을 참조하도록 만들 것이다.

sql 작성 순서
- nation 생성
- nation 데이터 삽입(국내, 국외)
- author 생성 및 외래키 설정
author 테이블의 authorId컬럼의 경우 자동증가 값 설정을 할 것이다.

MySQL

-- 국가 테이블 생성
create table nation(
	nationId varchar(2) primary key,
    nationName varchar(50)
);

-- 국가 테이블 데이터 삽입
insert into nation values ('01', '국내');
insert into nation values ('02', '국외');

-- 작가 테이블 생성
create table author(
	authorId int auto_increment primary key,
    authorName varchar(50),
    nationId varchar(2),
    authorIntro text,
    foreign key (nationId) references nation(nationId)
);

테스트

아래의 명령문을 실행하여 정상적으로 데이터가 삽입이 되는지 확인한다.

insert into author(authorName, nationId, authorIntro) values('유홍준', '01', '작가 소개입니다' );
insert into author(authorName, nationId, authorIntro) values('김난도', '01', '작가 소개입니다' );
insert into author(authorName, nationId, authorIntro) values('폴크루그먼', '02', '작가 소개입니다' );

결과

로고

메인 페이지 로고 영역을 채우려 한다.
구글에 아무거나 받으면 될 것 같다.

나는 진짜 구글에서 아무거나 받았다.

resources/img경로에 저장한다.(img폴더는 새로 만든다.)

/WEB-INF/views/main.jsp
로고 그림을 넣어주어야 할 위치는 class 속성 값이 logo_areadiv 태그 내부이다.

해당 영역에 h1태그를 지우고 아래의 코드를 추가한다.

<a href="/main"><img src="resources/img/civically-1.jpg"></a>

이미지는 정상적으로 출력이 된다. css를 수정한다.

기존 css

/* 로고 영역 */
.logo_area{
	width: 25%;
	height: 100%;
	background-color: red;
	float:left;
}

수정 css

/* 로고 영역 */
.logo_area{
    width: 25%;
    height: 100%;
    float:left;
}
.logo_area img{
    width: 100%;
    height: 100%;
}

이전에도 말한 것 같지만 난 웹디자이너도 아니고… 디자인이 X같아도 그려려니 해주시길 바란다.

대부분의 홈페이지를 들어가보면 페이지 하단에 서비스를 제공하는 회사에 관한 정보가 담긴 footer 영역이 있다.
우리 페이지가 좀 더 그럴듯하게 보이게 하기 위해 아래와 같이 footer영역을 만든다.

   <!-- Footer 영역 -->
        <div class="footer_nav">
            <div class="footer_nav_container">
                <ul>
                    <li>회사소개</li>
                    <span class="line">|</span>
                    <li>이용약관</li>
                    <span class="line">|</span>
                    <li>고객센터</li>
                    <span class="line">|</span>
                    <li>광고문의</li>
                    <span class="line">|</span>
                    <li>채용정보</li>
                    <span class="line">|</span>
                </ul>
            </div>
        </div> <!-- class="footer_nav" -->
        
        <div class="footer">
            <div class="footer_container">
                
                <div class="footer_left">
                    <img src="resources/img/civically-1.jpg">
                </div>
                <div class="footer_right">
                    (주) 이름없는 회사    대표이사 : OOO
                    <br>
                    사업자등록번호 : ooo-oo-ooooo
                    <br>
                    대표전화 : oooo-oooo(발신자 부담전화)
                    <br>
                    <br>
                    COPYRIGHT(C) <strong>yoonbitnara.github.io</strong>    ALL RIGHTS RESERVED.
                </div>
                <div class="clearfix"></div>
            </div>
        </div> <!-- class="footer" -->    

/* footer navai 영역 */
.footer_nav{
    width:100%;
    height:50px;
}
.footer_nav_container{
    width: 100%;
    height: 100%;
    background-color:#8EC0E4;
}
.footer_nav_container>ul{
    font-weight : bold;
    float:left;
    list-style:none;
    position:relative;
    padding-top:10px;
    line-height: 27px;
    font-family: dotum;
    margin-left: 10px;
}
.footer_nav_container>ul>li{
    display:inline;
    width: 45px;
    height: 19px;
    padding: 10px 9px 0 10px;
}
.footer_nav_container>ul>span{
    margin: 0 4px;
}
/* footer 영역 */
.footer{
    width:100%;
    height:130px;
    background-color:#D4DFE6;
    padding-bottom : 50px;
}
.footer_container{
    width: 100%;
    height: 100%;
    margin: auto;
}
.footer_left>img {
    width: 150%;
    height: 130px;
    margin-left: -20px;
    margin-top: -12px;
}
.footer_left{
    float :left;
    width: 170px;
    margin-left: 20px;
    margin-top : 30px;
    
}
.footer_right{
    float :left;
    width: 680px;
    margin-left: 70px;
    margin-top : 30px;
}    

코드 추가할 위치는 맨 아래의 /div 두개 위에 넣어준다.

확인

배경이 없는 사진을 구했으면 좋았을텐데 매우 귀찮다.
나중에 로고가 바껴있으면 아 이사람이 로고 배경이 흰색인게 어지간히 꼴보기 싫었나보다 생각하면 된다.

기능구현

목표

순서

로그인 메서드 적용

MySQL

테스트

결과

로고

Footer 영역

확인

Leave a comment