728x90
목요일~~
지난 수업 때 하던 일별 박스오피스 API 서비스를 더 배운다.
AJAX의 async: true 비동기(데이터 수신 기다리지 않고 바로 다른 작업 실행. default) 혹은 동기(false. 순차적) 호출을 지정함
웹디자인까지 신경 쓸 여유는 없기 때문에,
Bootstrap Examples에서 페이스 소스(HTML)와 css 파일을 WebStorm으로 가져와서 활용한다!
HTML에서 불필요한 라인들 지우고 jQuery CND, jQuery 파일, CSS 파일 연동시킴
input type="date"로 달력을 넣어 일별 박스오피스 순위를 조회할 수 있게 넣고,
Delegation Model(JS Event 처리 방식)로 Event가 처리될 수 있도록 'onclick' Event Attribute를 사용함
데이터 테이블을 만들기 위해 <thead> Tag 안에 <tr>과 <th>를 원하는 값으로 바꿔줌
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Daily Box Office Search!</title>
<!-- Bootstrap CND (CSS only) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- jQuery CND -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="js/jQuery12.js"></script>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="css/dashboard.css" rel="stylesheet">
</head>
<body>
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">jQuery Example</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">-->
<input id="searchDate" class="form-control form-control-dark w-100" type="date">
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a class="nav-link px-3" href="#" onclick="my_func()">Search!!</a>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
</ul>
<ul class="nav flex-column mb-2">
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<h2>Box Office Rank</h2>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th scope="col">순위</th>
<th scope="col">포스터 이미지</th>
<th scope="col">영화 제목</th>
<th scope="col">개봉일</th>
<th scope="col">누적관람객수</th>
<th scope="col">삭제</th>
<th scope="col">상세보기</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>random</td>
<td>data</td>
<td>placeholder</td>
<td>text</td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</div>
</body>
</html>Delegation Model(JS Event 처리 방식)
function my_func() {
let my_date = $('#searchDate').val()
if (my_date == '') {
alert('검색을 위해 날짜를 선택해 주세요!')
}
else {
let modified_date = my_date.replace(/-/g, '') // 2022-02-10 날짜 사이의 - 지우기
$.ajax({
async: true,
url: 'http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json',
data: {
key: '67c59b547b84d9de7658ebb921457f4c',
targetDt: modified_date},
method: 'GET',
timeout: 3000,
dataType: 'json',
success: function(result) {
console.log(result)
$('tbody').empty()
// <tr>
// <td>순위</td>
// <td>
// <img src=~~~>
// </td> 포스터 이미지
// <td>영화 제목</td>
// <td>개봉일</td>
// <td>누적관람객수</td>
// <td>
// <input type="button" value="삭제" class="btn btn-primary">
// </td> 삭제버튼
// <td>상세보기</td>
// </tr>
for(let i=0;i<10;i++) {
let tr = $('<tr></tr>')
let rankTd = $('<td></td>').text(result['boxOfficeResult']['dailyBoxOfficeList'][i]['rank'])
let imgTd = $('<td></td>')
let searchTitle = result['boxOfficeResult']['dailyBoxOfficeList'][i]['movieNm'] + " 포스터"
let img = $('<img />')
imgTd.append(img)
$.ajax({
async: true,
url: 'https://dapi.kakao.com/v2/search/image',
method: 'GET',
headers: {
Authorization: "KakaoAK " + '1d1912440cd92cf0ce61794b6cb3b7fd'
},
data: {
query: searchTitle
},
timeout: 4000,
dataType: 'json',
success: function(result) {
let imgUrl = result['documents'][0]['thumbnail_url']
img.attr('src', imgUrl)
},
error: function () {
alert('뭔가 이상해요!')
}
})
let titleTd = $('<td></td>').text(result['boxOfficeResult']['dailyBoxOfficeList'][i]['movieNm'])
let openTd = $('<td></td>').text(result['boxOfficeResult']['dailyBoxOfficeList'][i]['openDt'])
let assAudiTd = $('<td></td>').text(result['boxOfficeResult']['dailyBoxOfficeList'][i]['audiAcc'])
let delTd = $('<td></td>')
let delBtn = $('<input />').attr('type', 'button').attr('value','삭제')
// btn-primary는 파란색, btn-warning는 노란색, btn-info는 초록색, btn-danger는 빨간색
delBtn.addClass('btn btn-danger')
delBtn.on('click', function() {
$(this).parent().parent().remove()
})
delTd.append(delBtn)
tr.append(rankTd)
tr.append(imgTd)
tr.append(titleTd)
tr.append(openTd)
tr.append(assAudiTd)
tr.append(delTd)
$('tbody').append(tr)
}
},
error: function() {
alert('뭔가 이상해요!')
}
});
}
}
| 1. 1/17 월 | 2. 1/18 화 | 3. 1/19 수 | 4. 1/20 목 | 5. 1/21 금 |
| 취업 특강 | 파이썬 환경 설정 (파이참, 아나콘다, 주피터 노트북) |
파이썬 데이터 타입 (list, tuple) |
파이썬 데이터 타입 (range, string, dictionary, set, bool) |
파이썬 사용자 정의 함수, 객체지향, 사용자 정의 클래스 |
| 6. 1/24 월 | 7. 1/25 화 | 8. 1/26 수 | 9. 1/27 목 | 10. 1/28 금 |
| 파이썬 사용자 정의 클래스, 사용자 정의 모듈 |
DB(MySQL) DBMS, MySQL 환경 설정, DB/테이블 생성, DB 입력·활용, Index |
DB(MySQL) View, 백업과 복원, DB 모델링, 관계(PK, FK), DML(CRUD), 데이터 타입 |
DB(MySQL) DML(CRUD), WHERE 조건, 패턴 매칭, SubQuery, 정렬, 그룹핑, 집계 함수, 트랜잭션(ACID 특성) |
DB(MySQL) JOIN, UNION, NOT IN, WEB |
| 11. 2/3 목 | 12. 2/4 금 | 13. 2/7 월 | 14. 2/8 화 | 15. 2/9 수 |
| WEB WebStorm 환경 설정, HTML, CSS, JavaScript, jQuery CDN |
WEB jQuery 문법, Selector, Method |
WEB jQuery Method, Event, AJAX |
GitHub 특강 소스코드 관리, Fork, Clone, Branch, Commit, Push, Pull-Request, Rebase |
GitHub 특강 프로젝트 관리, Fetch, Rebase, Merge, Conflict |
| 16. 2/10 목 | 17. 2/11 금 | 18. 2/14 월 | 19. 2/15 화 | 20. 2/16 수 |
| WEB jQuery AJAX, Bootstrap, Open API |
Django |
* 기본을 흡수하고 응용하자!
728x90
