[93일차] 안드로이드 코틀린 / 상품 후기 등록, 댓글 리스트 및 페이징

20221205(월)

• 목차
  - 안드로이드 with 코틀린
  - 코틀린
  - 코틀린 문법
  - 상품 후기 등록
  - 상품 후기 댓글 리스트 및 페이징

---

< 안드로이드 with 코틀린 >

 

(p.77 참고)

• 코틀린 소스 .kt(코틀린 컴파일러 이용) ➡ 자바 바이트 코드(*.class) ➡ JVM 환경 실행
• 자바소스 .java(자바 컴파일러) ➡ 자바 바이트 코드(*.class) ➡ JVM 환경 실행
• ** 큰 틀은 코틀린 컴파일러로 만들게 되면 우리가 알고있는 바이트 코드가 만들어진다.
• 코틀린의 이점
  - 표현력과 간결함 / 안전한 코드 / 상호 운용성 / 구조화 동시성
  
  
• 안드로이드 with 자바도 가능하고
• 안드로이드 with 코틀린도 가능하다. (2017 구글 공식채택)
  
  
• 안드로이드 프로젝트
  - 기본언어 : 코틀린(자바 추가작업) or 자바(코틀린 추가작업) 처럼 자바 + 코틀린 혼합작업 가능
  
  
• MAC OS : 스마트폰 자동인식
• Windows 계열 : 스마트폰 제조사 USB 드라이버 목록
  
  
• 스마트폰  USB 디버깅 허용  : 설정.

(1) 안드로이드 스튜디오 오류 빛 버그

(2) 에물레이터 오류 빛 버그

➡ 에러 메세지 검색하는 수 밖에 없다.

 

---

< 코틀린 >

• pc방에서 공부하고 싶을 때,, 온라인에서 공부하고 싶을 때 사용할 수 있는 코틀린~

https://bit.ly/3VN5EWy

Kotlin Playground: Edit, Run, Share Kotlin Code Online

 

 

---

< 코틀린 문법 >

• 코틀린 문법이 안되면 안드로이드로 진입할 수 없다.
• 우리는, 코틀린 기반으로 안드로이드 프로그램을 공부하는 중이다 :)
  (자바 기반으로 스프링을 공부한 것처럼)

패키지 / 파일

package com.example.androidlab.lab3.test1

// 코틀린도 프로그램 시작(실행)을 위한 main() 함수가 존재한다.
fun main() {
    print("Hello World!!!") // System.out.println() 와 비슷.
}

 

---

코틀린은 자기 맘대로 만든다.... 😂

• 자바 공부가 베이스되어잇는 사람들은 짜증난다......... 이게 뭐꼬 싶다,,
• 패키지가 같으면 다른 파일의 변수나 함수 호출이 가능하다. (JAVA에선 불가능)

*임포트 : alt / ctrl + enter

---

Main.kt 파일

package com.example.androidlab.lab3.test1

import java.util.*

// 코틀린도 프로그램 시작(실행)을 위한 main() 함수가 존재한다.
fun main() {
    print("Hello World!!!") // System.out.println() 와 비슷.

    // 패키지가 동일하면, 변수, 함수도 사용가능.
    data=10
    formatDate(Date()) // 기본적으로 제공하는 라이브러리를 사용시 import 단축키는 Ctrl + Enter
}

---

User.kt 파일

package com.example.androidlab.lab3.test1

import java.text.SimpleDateFormat
import java.util.Date

//  클래스 밖의 변수, 함수를 선언이 가능하고,
// 코틀린 컴파일러에 의하여 자바바이트 코드가 생성이 된다.
// 이때, 변수, 함수는 UserKt.class 파일 안에 삽입된다.


// 변수선언
var data = 10 // 문장마다 ; (세미콜론) 사용 안한다.

/*
코틀린 함수
fun 함수명(변수 : 데이타타입) : 리턴타입 {

return 데이터타입
}
 */

// 함수선언
fun formatDate(date: Date) : String {
    val sdformat = SimpleDateFormat("yyyy-mm-dd")
    return sdformat.format(date)
}

// 클래스 선언
class User {
     var name = "hello"

    // 리턴타입 생략할 수 있다.
    fun sayHello() {

    }
}

---

Test.kt 파일

• 물리적으론 test1패키지 안에 만들어놓고
• 내부적으론 aaa를붙여 컴파일은 따로 관리한다......🤯 이게 뭡니꺼

 

---

< 상품 후기 등록 >

 

1. ReviewController 후기등록 틀 구성

---

2. Review 매퍼 create 코드 추가

---

3. Review 서비스에 create 코드 추가

---

4. Review 컨트롤러에 코드추가

 

• productDetail.jsp에 코드추가

// 상품후기 쓰기
      $("#btn_review_write").on("click", function() {

          let rv_score = 0;
          let rv_content = $("#rv_content").val();

          $("p#star_rv_score a.rv_score").each(function(index, item) {
            if($(this).attr("class") == "rv_score on") {
              rv_score += 1;
            }
          });

          if(rv_score == 0) {
            alert("별 평점을 선택해주세요.");
            return;
          }

          if(rv_content == "") {
            alert("상품후기를 입력하세요");
            return;
          }

          // JavaScript Object문법
          let review_data = { pdt_num : $("input[name='pdt_num']").val() , rv_content : rv_content, rv_score: rv_score };

          $.ajax({
            url: '/review/new',
            headers: {
              "Content-Type" : "application/json", "X-HTTP-Method-Override" : "POST"
            }, 
            type: 'post',
            dataType : 'text',
            data: JSON.stringify(review_data),  // JSON문자열
            success : function(result) {
              if(result == 'success') {
                alert("상품후기가 등록됨");
                getPage(url);

                // 초기화
                $("p#star_rv_score a.rv_score").removeClass("on");
                $("#rv_content").val("");
                /*
                $("#btn_review_edit").parent().find("input[name='rv_num']").remove();
                $("#btn_review_edit").hide();
                $("#btn_review_write").show();
                */
              }
            }
          });


      });

 

 

ex) 실행화면

 

ex) 데이터 값

 

 

---

< 상품 후기 댓글 리스트 및 페이징 작업 >

 

1. 댓글 더미데이터 생산 (SQL)

-- 댓글 더미데이터 생성
INSERT INTO REVIEW_TBL(rv_num, MEM_ID, PDT_NUM, RV_CONTENT, RV_SCORE)
SELECT SEQ_REVIEW_NUM.NEXTVAL, 'dorothy', PDT_NUM, RV_CONTENT, 5 FROM REVIEW_TBL;

COMMIT;

 

• 상품코드 21에 해당되는 리뷰 리스트이다.

 

---

2. ReviewController에 댓글 리스트 및 페이지 정보 틀 구성

     어떨 때 List를 쓰고 어떨 때 Map을 쓰나?

          List 쓰는 이유 : 하나의 리스트만 사용하

          Map을 쓰는 이유 : 여러개 종류의 정보를 가져올 때 사용 (댓글 목록과 페이지 둘 다 가져오기 때문에)

// 리턴타입   

1) Map 컬렉션 : 여러개의 정보를 반환시. 예>댓글리스트 목록, 댓글페이지 정보 2개이상
//        2) List 컬렉션 : 한 개의 정보를 반환시.
@GetMapping("/list/{pdt_num}/{page}")
public ResponseEntity<Map>

 

---

3. ReviewMapper.xml에 추가 (docmall에서 복사)

<!--  조건에 선택한 상품추가되어 있음. 검색은 제외됨. -->

<select id="list" resultType="com.docmall.domain.ReviewVO">

  <!-- 인덱스힌트를 이용한 페이징쿼리 -->
  <![CDATA[ 
  SELECT RN, RV_NUM, MEM_ID, PDT_NUM, RV_CONTENT, RV_SCORE, RV_DATE_REG
  FROM (
      SELECT  /*+ INDEX_DESC(REVIEW_TBL PK_REVIEW_NUM)*/ 
      ROWNUM RN, RV_NUM, MEM_ID, PDT_NUM, RV_CONTENT, RV_SCORE, RV_DATE_REG FROM REVIEW_TBL
      WHERE  PDT_NUM = #{pdt_num} AND ROWNUM <= (#{cri.pageNum} * #{cri.amount})
  )
  WHERE RN > ((#{cri.pageNum}-1) * #{cri.amount})
  ]]>

</select>

<select id="listCount" parameterType="int" resultType="int">

  SELECT 
     COUNT(*) 
  FROM 
     REVIEW_TBL
  WHERE 
     PDT_NUM = #{pdt_num}

</select>

---

4. ReviewMapper.java에 코드 추가

---

5. Review 서비스

---

6. Review 컨트롤러

 

---

7. productDetail.jsp 

//상품댓글 목록요청

    let reviewPage = 1;  //상품후기 페이지번호
    let url = "/review/list/" + $("input[name='pdt_num']").val() + "/" + reviewPage;

    getPage(url);


    function getPage(pageInfo) {

      console.log("url: " + pageInfo);

      $.getJSON(pageInfo, function(data) {

        //console.log("댓글목록: " + data.list);
        //console.log("댓글페이징정보: " + data.pageMaker);
        printReviewList(data.list, $("div#reviewList div#reviewItem"), $("#reviewTemplate"));
        printreviewPaging(data.pageMaker, $("div#reviewPaging  ul.pagination"));
      });
    }

 

---

< 상품 후기 목록 및 페이징 >

 

productDetail.jsp 코드추가

 

// 1)상품후기 목록 출력하는 함수
let printReviewList = function(reviewData, target, templateObj) {

  let template = Handlebars.compile(templateObj.html());

  let reviewHtml = template(reviewData); // 댓글목록 데이타와 템플릿 결합

  target.children().remove();
  target.append(reviewHtml);
}

//상품후기 등록일 날짜 출력.  자바스크립트 날짜객체 https://www.w3schools.com/js/js_dates.asp
//사용자정의 Helper함수. 템플릿에서 호출
Handlebars.registerHelper("prettifyDate", function(timeValue) {

  let dateObj = new Date(timeValue);
  let year = dateObj.getFullYear();
  let month = dateObj.getMonth() + 1;
  let date = dateObj.getDate();
  let hour = dateObj.getHours();
  let minute = dateObj.getMinutes();

  return year + "/" + month + "/" + date + " " + hour + ":" + minute;
}); 

// 평점 별표시하기
Handlebars.registerHelper("displayStar", function(rating){

  let starStr = "";
  switch(rating) {
    case 1:
      starStr = "★☆☆☆☆";
      break;
    case 2:
      starStr = "★★☆☆☆";
      break;
    case 3:
      starStr = "★★★☆☆";
      break;
    case 4:
      starStr = "★★★★☆";
      break;
    case 5:
      starStr = "★★★★★";
      break;
  }

  return starStr;
});

// 아이디 3글자 표시하기
Handlebars.registerHelper("idThreeDisplay", function(userid) {

  return userid.substring(0, 3) + "*******";
});