스프링 쇼핑몰 만들기 #6. 관리자 화면 기본 구성

이전 게시물에서 사용자 화면과 관리자 화면을 구분했습니다. 관리자가 상품 등록을 해야 사용자가 볼 수 있으므로 관리자 부분을 만들어줘야합니다.

일단, 지금 외관적으로는 거의 차이가 없네요.

기본적으로 두화면 모두 CSS를 직접 입력하여 사용할것이며 관리자 화면에 부트스트랩을 아주 조금만 사용할것입니다. 버튼이나 모달 정도만 사용할것이기 때문에 굳이 부트스트랩을 사용할 필요는 없겠지만요.

미리 준비했던 부트스트랩과 제이쿼리 파일을 src/main/webapp/resources 폴더에 넣어줍니다.

<script src="/resources/jquery/jquery-3.3.1.min.js"></script>

<link rel="stylesheet" href="/resources/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="/resources/bootstrap/bootstrap-theme.min.css">
<script src="/resources/bootstrap/bootstrap.min.js"></script>

관리자 화면의 시작부인 admin/index.jsp의 <head> ~ </head> 부분에 CDN코드를 넣습니다. 이때 경로는 /resources/로 시작되는것에 주의해야합니다.

또한, 부트스트랩 이전에 제이쿼리를 넣어줘야합니다. 부트스트랩은 제이쿼리 기반으로 작동되기 때문입니다.

아무런 설정을 하지않고 부트스트랩만 적용해도 약간 달라집니다.

관리자가 사용할 메뉴가 들어가는 <aside> ~ </aside> 를 추가합니다.

<aside>
 <ul>
  <li>상품 등록</li>
  <li>상품 목록</li>
  <li>상품 소감</li>
  <li>유저 목록</li>
 </ul>
</aside>

상품 등록은 새로운 상품을 등록할 때 사용합니다.
상품 목록에서는 등록했던 상품을 확인할 수 있고 수정/삭제를 할 수 있습니다.
상품 소감은 사용자들이 상품에 작성한 댓글들을 확인할 수 있습니다.
유저 목록은 사이트에 가입된 유저에 대한 정보를 확인할 수 있습니다.

기본적으로 이정도 기능이 있으면 될 것 같습니다.

또한, <aside> 에 표시되는 목록은 메뉴이기 때문에 바뀌지 않으므로 별도 파일에 저장하여 불러오는 방식으로 사용하겠습니다.

<head> ~ </head> 에 간단한 스타일(CSS)를 추가합니다.

<style>
 body { font-family:'맑은 고딕', verdana; padding:0; margin:0; }
 ul { padding:0; margin:0; list-style:none;  }

 div#root { width:90%; margin:0 auto; }
 
 header#header { font-size:60px; padding:20px 0; }
 header#header h1 a { color:#000; font-weight:bold; }
 
 nav#nav { padding:10px; text-align:right; }
 nav#nav ul li { display:inline-block; margin-left:10px; }

   section#container { padding:20px 0; border-top:2px solid #eee; border-bottom:2px solid #eee; }
 section#container::after { content:""; display:block; clear:both; }
 aside { float:left; width:200px; }
 div#container_box { float:right; width:calc(100% - 200px - 20px); }
 
 aside ul li { text-align:center; margin-bottom:10px; }
 
 footer#footer { background:#f9f9f9; padding:20px; }
 footer#footer ul li { display:inline-block; margin-right:10px; }
</style>

예쁘거나 화려하진 않아도, 이정도면 사용하는데 충분합니다.

aside.jsp의 메뉴들을 링크 태그 <a> 로 감싸줍니다.

링크 태그에 스타일을 적용하기 위해 CSS코드를 추가합니다.

 aside ul li a { display:block; width:100%; padding:10px 0;}
 aside ul li a:hover { background:#eee; }

링크의 범위가 넓어졌고, 마우스를 올려두면 배경색이 바뀝니다.

시각적인 부분을 추가했으니, 이제 상품 등록 기능을 추가할 차례입니다.

익명7/22/2020
심각: Context initialized 이벤트를 [org.springframework.web.context.ContextLoaderListener] 클래스의 인스턴스인 리스너에 전송하는 동안 예외 발생
org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'sqlSessionFactory' defined in ServletContext resource [/WEB-INF/spring/root-context.xml]: Invocation of init method failed; nested exception is org.springframework.core.NestedIOException: Failed to parse mapping resource: 'file [C:\Users\81807\Documents\workspace-sts-3.9.13.RELEASE\.metadata\.plugins\org.eclipse.wst.server.core\tmp1\wtpwebapps\kubg\WEB-INF\classes\mappers\adminMapper.xml]'; nested exception is org.apache.ibatis.builder.BuilderException: Error parsing Mapper XML. Cause: org.apache.ibatis.builder.BuilderException: Error resolving class. Cause: org.apache.ibatis.type.TypeException: Could not resolve type alias 'com.kubg.domain.CategoryVO'. Cause: java.lang.ClassNotFoundException: Cannot find class: com.kubg.domain.CategoryVO
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.initializeBean(AbstractAutowireCapableBeanFactory.java:1455)
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:519)
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:456)
at org.springframework.beans.factory.support.AbstractBeanFactory$1.getObject(AbstractBeanFactory.java:294)
at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:225)
at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:291)
at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:193)
at org.springframework.beans.factory.support.DefaultListableBeanFactory.preInstantiateSingletons(DefaultListableBeanFactory.java:567)
at org.springframework.context.support.AbstractApplicationContext.finishBeanFactoryInitialization(AbstractApplicationContext.java:913)
at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:464)
at org.springframework.web.context.ContextLoader.configureAndRefreshWebApplicationContext(ContextLoader.java:385)
at org.springframework.web.context.ContextLoader.initWebApplicationContext(ContextLoader.java:284)
at org.springframework.web.context.ContextLoaderListener.contextInitialized(ContextLoaderListener.java:111)
at org.apache.catalina.core.StandardContext.listenerStart(StandardContext.java:4689)
at org.apache.catalina.core.StandardContext.startInternal(StandardContext.java:5155)
at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:183)
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1412)
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1402)
at java.util.concurrent.FutureTask.run(FutureTask.java:266)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
at java.lang.Thread.run(Thread.java:748)

이런 에러가 갑자기나는데....안나다가 갑자기 에러가나요...
답글삭제
답글
Unknown5/31/2021
css 처음 접해보는데 꾸미기 해보니 재밋네요
답글삭제
답글
익명10/26/2021
항상 감사드립니다.
혹시 부트스트랩은 어디서 다운받나요?
답글삭제
답글

댓글 추가