CGV 웹사이트 크롤링해서 HighChart 이용한 예매율 순위표 만들기 / j soup 이용

 

크롤링을 하기 위해선 maven repository에서 jsoup jar  파일을 다운 받아야 한다.

https://mvnrepository.com/artifact/org.jsoup/jsoup/1.13.1

위의 페이지에서 본인이 원하는 jsoup 버전을 선택하고 jar 파일을 다운 받으면 된다.

나는 사람들이 제일 많이 사용하는 1.13.1 버전을 다운 받았다.

 

jar 파일을 다운 받았다면 eclipsep에서 새로운 프로젝트를 생성해준다.

File > New > Dynamic Web Project를 생성한다. 

나는 Crawling 이라는 이름의 Web Project를 생성했다.

 

WebContent의 lib 파일에 다운받은 jsoup jar파일을 저장한다.

이제 파일 크롤링에 필요한 패키지 및 클래스 파일을 만든다.

나는 아래와 같이 만들었다.

 

 

우선 main 패키지에 만든 MainClass를 통해 크롤링이 잘 되는지 확인해보자.

본인이 크롤링할 사이트에 들어간다.

나는 Cgv 예매순위를 크롤링하기 위해 아래의 링크로 접속했다.

아래의 예매율 순위를 크롤링하여 하이차트로 만들 예정이다.

http://www.cgv.co.kr/movies/?lt=1&ft=0 

영화 그 이상의 감동. CGV

 

사이트에 접속하여 우클릭 > 소스보기를 누르면 페이지의 코드를 볼수있다.

 

나는 JsonViewer라는 크롬 확장프로그램을 사용중이여서 위와같이 코드를 좀더 가독성 있게 볼수있다.

 

예매율에 필요한 자료는 영화의 이름, 영화의 예매율 두가지다.

두가지의 데이터만 크롤링하면 된다.

코드 내에서 영화 이름과 영화 예매율을 표시하는 코드 형식은 똑같다. 따라서 하나의 코드만 제대로 긁어오면 다른 비슷한 코드들도 쉽게 크롤링이 된다.

 

<div class="box-contents">
                        <a href="/movies/detail-view/?midx=85632">
                            <strong class="title">더 배트맨</strong>
                        </a>

                        <div class="score">
                            <strong class="percent">예매율<span>40.6%</span></strong>

따라서 위의 코드를 긁어서 데이터들을 크롤링하려고 한다.

 

우선 메인 클래스에서 데이터 크롤링이 잘 되는지 확인해보자.

 

MainClass.java

package main;

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

public class MainClass {

	public static void main(String[] args) throws Exception {
		
		// Jsoup : 각종 사이트(HTML)에서 데이터를 취합할 수 있는 Library 
		Document doc = Jsoup.connect("http://www.cgv.co.kr/movies/?lt=1&ft=0").get();
		
		/*
			<div class="box-contents">
                <a href="/movies/detail-view/?midx=85632">
                    <strong class="title">더 배트맨</strong>
                </a>
        */
		
		Elements titles = doc.select("div.box-contents strong.title");
		
		/*        
                
                        <div class="score">
                            <strong class="percent">예매율<span>40.6%</span></strong>       
                
		*/
		
		Elements percents = doc.select("div.box-contents div.score strong.percent span");
	
		
		
		for(int i = 0;i < 19; i++) {
			Element title = titles.get(i);
			Element percent = percents.get(i);
			
			System.out.println(title.text());
			System.out.println(percent.text());
		}
	}
}

 

MainClass에서 적힌 코드를 실행하면 for문이 출력하는 방식에따라서 아래와 같은 결과가 실행된다.

자료가 잘 크롤링된것을 알수있다.

그렇다면 좀더 쉬운 크롤링을 위해 Dto를 만들어줄수 있다.

 

MovieVo.java

package dto;

public class MovieVo {
	private String title;
	private double percent;
	
	public MovieVo() {};
	
	public MovieVo(String title, double percent) {
		super();
		this.title = title;
		this.percent = percent;
	}
	@Override
	public String toString() {
		return "MovieVo [title=" + title + ", percent=" + percent + "]";
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public double getPercent() {
		return percent;
	}
	public void setPercent(double percent) {
		this.percent = percent;
	}

}

영화 제목 title, 예매율 percentage라는 변수를 만들어서 생성자, getter&setter, toString을 구현했다.

 

 

CGVdata.java

package movie;

import java.util.ArrayList;
import java.util.List;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

import dto.MovieVo;


public class CGVdata {

	public static List<MovieVo> getCGVdata() throws Exception{
		
				Document doc = Jsoup.connect("http://www.cgv.co.kr/movies/?lt=1&ft=0").get();
	
				Elements titles = doc.select("div.box-contents strong.title");		
				Elements percents = doc.select("div.box-contents div.score strong.percent span");
			
				List<MovieVo> list = new ArrayList<MovieVo>();
				//19개는 크롤링할 영화의 개수다.
				for(int i = 0;i < 19; i++) {
					Element title = titles.get(i);
					Element percent = percents.get(i);
					
					String t = title.text();
					String p =  percent.text();
					
					double pv =Double.parseDouble(p.replace("%", "").trim());
                    //예매율을 표시하는 %를 삭제하기 위해 replace사용.
                    //null값 공백을 남기지 않기 위해 trim()을 사용.
					
					MovieVo vo = new MovieVo(t,pv);
                    //Dto에 영화제목과 예매율 매개변수로 넣어서 반환
					
					list.add(vo);
                    //arraylist 값에 삽입
					
				}
				
				return list;
			}
		
	
}

Dto에서 title(영화제목),percentage(예매율) 형식을 받고, 그에 맞춰 크롤링한 데이터를 ArrayList로 만들어 주기 위해서 CGVdata 클래스를 생성한다.

 

 

이제 자료는 잘 크롤링 되었다. 크롤링할 자료를 표현할 차트를 가져와서 크롤링한 자료와 결합하면 된다.

차트는 Hichart라는 곳에서 가져오면 된다.

https://www.highcharts.com/

Interactive javascript charts library

hichart 메인 화면에서 View Demo 를 클릭하면 여러 차트가 나온다.

난 그중에서 예매율을 표현하기 쉬운 PieCharts를 선택했다.

 

본인이 원하는 차트의 이미지를 클릭하면 아래와 같은 창이 뜬다.

EDIT IN CODEPEN을 클릭하면 파이차트의 코드를 볼수 있다.

 

이런식으로 HTML CSS JS 코드가 나오는데 세가지 코드 모두 활용할것이다.

이 코드를 활용하여서 크롤링한 데이터와 결합해보자.

우선 WebContent 폴더에 index.jsp 파일을 생성한다.

크롤링한 데이터와 파이차트를 결합시킨 코드는 아래와 같다.

index.jsp

 

<%@page import="movie.CGVdata"%>
<%@page import="dto.MovieVo"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
//json과 크롤링한 데이터를 결합


List<MovieVo>  list = CGVdata.getCGVdata();
for(MovieVo v:list){
	System.out.println(v.toString());
	}
	
	//list -> json
	String json = "[";
	
	for(MovieVo v:list){
		json += "{ name:'"+ v.getTitle()+"',y:"+ v.getPercent()+ "},"; 
	}
	json = json.substring(0, json.lastIndexOf(",")); // 처음부터 제일 마지막 "," 전까지 가져오란 말 
	
	json += "]";
	
	System.out.print(json);
	
	request.setAttribute("json", json);

%>    
    
    
    
<!DOCTYPE html>
<html>
<head>




<meta charset="UTF-8">
<title>Insert title here</title>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<style text="text/css">
.highcharts-figure,
.highcharts-data-table table {
  min-width: 320px;
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #ebebeb;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}

.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}

.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

input[type="number"] {
  min-width: 50px;
}
</style>


</head>
<body>


<figure class="highcharts-figure">
  <div id="container"></div>
</figure>


<script type="text/javascript">
Highcharts.chart('container', {
	  chart: {
	    plotBackgroundColor: null,
	    plotBorderWidth: null,
	    plotShadow: false,
	    type: 'pie'
	  },
	  title: {
	    text: '2022/02/25 CGV 영화 예매율'
	  },
	  tooltip: {
	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	  },
	  accessibility: {
	    point: {
	      valueSuffix: '%'
	    }
	  },
	  plotOptions: {
	    pie: {
	      allowPointSelect: true,
	      cursor: 'pointer',
	      dataLabels: {
	        enabled: true,
	        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
	      }
	    }
	  },
	  series: [{
	    name: 'Brands',
	    colorByPoint: true,
	    data: <%=request.getAttribute("json")%>
	  }]
	});


</script>


</body>
</html>

코드 초반에 json과 크롤링한 데이터가 결합되었다.

자바스크립트 하단의 data: 부분을 수정하여 데이터가 담긴 json을 불러와 차트에 적용시켜줬다.

  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: <%=request.getAttribute("json")%>
  }]
});

 

 

코드를 실행하면 콘솔창에는 아래와 같이 출력된다.

 

index.jsp 코드내에서 substring으로 제일 마지막 ,(콤마)를 삭제한 이유는 

,가 포함되면 데이터를 제대로 처리 못하기 때문이다.

for(MovieVo v:list){
		json += "{ name:'"+ v.getTitle()+"',y:"+ v.getPercent()+ "},"; 
	}
	json = json.substring(0, json.lastIndexOf(",")); // 처음부터 제일 마지막 "," 전까지 가져오란 말

substring으로 콤마를 처리하면 마지막 데이터에 콤마가 붙지 않는다.

따라서 마지막 데이터를 잘 인식해서 처리핤 있다.

 

 

웹화면에는 아래와 같이 출력된다.