Project(4)-3. 등록 페이지

  페이지 구성

등록 페이지는 메인페이지와는 다르게 구성하는 방법으로 부트스트랩을 사용했다. 그러나 예전처럼 직접 부트스트랩 사이트에 들어가 무료 버전을 직접 다운받고 코드를 뜯어고치는 방식이 아닌 CDN 방식을 차용했다.

 

여기서 CDN 방식이란 사용하고 싶은 테마의 사이트를 코드화하여 가져오는 것이다.

CDN 방식을 사용할 때는 가지고 오고 싶은 테마의 코드와 함께 버전과 맞는 부트스트랩 Js 코드도 가져와야 한다.

내가 사용한 것은 다음과 같다.

 <!-- Bootstrap CSS -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
      integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 
 <!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
     integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
     crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
     integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
     crossorigin="anonymous"></script>

 

이렇게 하여 부트스트랩에서 제공한 테마를 기본으로, <input> 태그의 위치 및 <button>의 스타일을 변경하여 꾸며주었다.

 

  기능

기능은 꽤 간단히 구현했다. 모든 <input> 요소를 잘 작성해주었다면 DB에 해당 내용이 저장되고 alert를 이용해 성공했다는 메시지를 띄웠다.

 

- service.java

@Transactional
public String insertCourse(Course course, HttpSession session,
                           RedirectAttributes rttr) {
    log.info("insertCourse()");
    String msg = null;
    String view = null;

    try {
        cRepo.save(course);

        session.setAttribute("course", course);
        msg = "과정 등록을 성공하였습니다.";
        view = "redirect:main";

    } catch (Exception e) {
        e.printStackTrace();
        msg = "과정 등록을 실패하였습니다.";
        view = "redirect:courseFrm";
    }
    
    rttr.addFlashAttribute("msg", msg);
    return view;
}