Chapter11 웹 스토리지 & 웹 데이터베이스

Slides:



Advertisements
Similar presentations
CUBRID 소개 (Object 개념) 서비스 사업부 / 기술지원팀. 목차 구조 일반적 특징 객체지향 특징 ORDB 개념을 이용한 스키마 ORDB 개념을 이용한 질의.
Advertisements

1 SQL 정보보호학과 양 계 탁. 2 SQL 개요 SQL 개요 3 Database u 연관된 데이터들의 집합 u 데이터를 쉽게 관리하는 프로그램 종 류종 류 관계형 데이터베이스 객체지향형 데이터베이스 계층형 데이터베이스 네트워크 데이터베이스 데이터를 2 차원적인 테.
SQLite 소개 및 안드로이드에서의 사용법
국내 암호이용 현황 및 암호구현 가이드 전인경
다양한 예제로 쉽게 배우는 오라클 SQL 과 PL/SQL
PHP programming 2000년 11월 13일 데이터베이스 연구실 김호숙.
소리가 작으면 이어폰 사용 권장!.
Chapter14 위치 정보 & 모바일 HTML5 Programming.
웹 2.0 및 Ajax 개요.
데이터베이스 시스템.
MySQL 연동 PHP 프로그래밍 기초 순천향대학교 정보기술공학부 이상정.
소프트웨어시스템설계(6주) 데이터베이스 연동
질의어와 SQL 기본 SQL 고급 SQL 데이타의 수정 데이타 정의 언어 내장 SQL
관계 대수와 SQL.
Project No 김현수 최종 작성일 :
Chapter 05 SQL 인젝션 공격.
JDBC 프로그래밍 이수지 이동주 1.
SQL 개요 SQL 개요 - SQL은 현재 DBMS 시장에서 관계 DBMS가 압도적인 우위를 차지하는 데 중요한 요인의 하나
01. Index StarPlayer API Guide 01. Index 02. 상수값 정의 03. API 정의
10장. 데이터베이스 보안과 권한 관리 데이터베이스 보안과 권한 관리
데이터베이스 담당교수 신정식 Chapter 4 SQL(1).
Information Technology
Web Server와 DB 연동.
HTML CSS 자바스크립트 무작정 따라하기
데이터베이스 와 JDBC 1.데이터베이스와 데이터베이스 관리 시스템은? 2.데이터베이스 장점?
Chapter 01 데이터베이스 시스템.
11장. 데이터베이스 서버 구축과 운영.
2007. Database Term Project Team 2 윤형석, 김희용, 최현대 우경남, 이상제
HTML5 웹 프로그래밍 입문(교수용) 2장.HTML5 문서의 기본.
Chapter05 오디오와 비디오 HTML5 Programming.
4.2 SQL 개요 SQL 개요 SQL은 IBM 연구소에서 1974년에 System R이라는 관계 DBMS 시제품을 연구할 때 관계 대수와 관계 해석을 기반으로, 집단 함수, 그룹화, 갱신 연산 등을 추가하여 개발된 언어 1986년에 ANSI(미국 표준 기구)에서 SQL.
담당교수 : 이형원교수님 컴퓨터응용과학부 정은영
자격증 모의 테스트 시스템 담당 교수 : 이 상 문 교수님 팀명 : CSCLAB
5. JSP의 내장객체1.
1장. 데이터베이스 시스템 컴퓨터를 사용하여 정보를 수집하고 분석하는데 데이터베이스 기술이 활용되고 있음
16장. 테이블의 변경 새로운 행 삽입 테이블에서 테이블로 행을 복사 행 값의 변경 테이블에서 행 삭제
16장 설문조사 한빛미디어(주).
8 데이터베이스 사용하기.
12 데이터베이스 사용하기.
YOU Youngseok 트랜잭션(Transaction) YOU Youngseok
01 데이터베이스 개론 데이터베이스의 등장 배경 데이터베이스의 발전 과정 데이터베이스의 정의 데이터베이스의 특징
SQL (structured query language)
다양한 예제로 쉽게 배우는 오라클 SQL 과 PL/SQL
Chapter02 시맨틱 웹을 위한 요소 HTML5 Programming.
Web Socket.
프로그래밍 원리 Chapter 05 자바스크립트 기초 신한대학교 IT융합공학부 박 호 균.
HTML.
CHAPTER 06. 데이터베이스 자료의 조직적 집합체_데이터베이스 시스템의 이해
Chapter10 드래그 앤 드롭 & 텍스트 편집 HTML5 Programming.
JavaScript COOKIE Chapter 10 Part III
SQL Query in the SSMS : DB, Table
JSP 게시판 구현.
View(뷰) 1 가상 테이블(Virtual Relation)
JSP Programming with a Workbook
Database 중고차 매매 DB 비즈니스IT 윤동섭.
Chapter13 파일 접근 & 오프라인 접근 HTML5 Programming.
명품 웹 프로그래밍.
1장. HTML5 소개 To Flash 정보영재세미나 1 김태영교수님 홍창의.
17장 웹 사이트 제작 완성 한빛미디어(주).
SQL INJECTION MADE BY 김 현중.
06. SQL 명지대학교 ICT 융합대학 김정호.
LOGIN할 때 아이디, 비번 입력 여부 체크하기
제 8장 데이터베이스.
테이블 관리 테이블 생성,수정,삭제 데이터 입력 수정, 삭제 2010학년도 2학기.
뇌를 자극하는 Windows Server 장. 데이터베이스 서버.
1장. 서 론 데이터베이스의 개요 모델의 종류 관계형 모델과 객체 지향형 데이터베이스 SQL이란 무엇인가?
HTML HTML 기본 구조와 태그 다양한 태그 다루기
Stored program 장종원
Data Base Web Programming
Presentation transcript:

Chapter11 웹 스토리지 & 웹 데이터베이스 HTML5 Programming

Contents Chapter11 1. 웹 스토리지 2. 웹 데이터베이스 웹 스토리지 & 웹 데이터베이스

웹 스토리지 쿠키 클라이언트에 간단한 정보를 저장하기 위해 사용 상당히 간단하고 편리함 단점 Chapter11 쿠키 클라이언트에 간단한 정보를 저장하기 위해 사용 상당히 간단하고 편리함 단점 데이터 저장 용량이 4kb 밖에 되지 않음 유효기간에 제한이 있으며 여러 가지 보안 문제 있음 웹 스토리지 & 웹 데이터베이스

웹 스토리지 웹 스토리지 클라이언트에 간단한 정보를 저장하기 위한 저장 영역 Chapter11 웹 스토리지 클라이언트에 간단한 정보를 저장하기 위한 저장 영역 역할은 쿠키와 비슷하지만 크기에 제한이 없으며 유효기간도 존재하지 않음 저장되는 데이터는 키와 값으로 구성되어 있음 브라우저 지원 현황 웹 스토리지 & 웹 데이터베이스

로컬 스토리지 로컬 스토리지 데이터 저장 시간에 제한이 없어 사용자가 지우지 않는 한 영구적으로 보관 Chapter11 로컬 스토리지 데이터 저장 시간에 제한이 없어 사용자가 지우지 않는 한 영구적으로 보관 도메인마다 저장 영역이 따로 생성되며 도메인마다 생성된 로컬 스토리지에 서로 접근할 수 없음 같은 도메인에 속해 있는 웹 페이지들은 모두 접근이 가능 관련 메서드 및 속성 웹 스토리지 & 웹 데이터베이스

로컬 스토리지 Chapter11 데이터 저장 스토리지에 키와 값을 저장하기 위해서는 setItem() 메서드를 사용해야 하지만 키를 통하여 직접 값을 저장할 수도 있음 웹 스토리지 & 웹 데이터베이스

로컬 스토리지 로컬 스토리지 로컬 스토리지에 값을 저장한 후 구글 개발자 도구를 사용하여 저장된 값을 확인 Chapter11 웹 스토리지 & 웹 데이터베이스

로컬 스토리지 Chapter11 데이터 읽기 저장되어 있는 값을 읽기 위해서는 getItem() 메서드를 사용. 스토리지에 값을 저장할 때와 같이 굳이 메서드를 사용하지 않고 키에 직접 접근하여 값을 가져올 수도 있음 웹 스토리지 & 웹 데이터베이스

로컬 스토리지 Chapter11 로컬 스토리지 웹 스토리지 & 웹 데이터베이스

로컬 스토리지 Chapter11 값 삭제 저장되어 있는 값을 삭제하기 위해서는 removeItem() 메서드를 사용. 저장 값을 삭제하는 방법도 역시 직접 키에 접근하여 삭제가 가능 웹 스토리지 & 웹 데이터베이스

프로그램 11-1 Chapter11 01: <<!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 웹 스토리지 </title> 06: <script type="text/javascript"> 07: function setData() 08: { 09: var key = document.getElementById("key"); 10: var data = document.getElementById("data"); 11: 12: localStorage.setItem(key.value, data.value); 13: alert("데이터 저장이 완료되었습니다."); 14: } 15: 16: function getData() 17: { 18: var key = document.getElementById("key"); 19: var data = localStorage.getItem(key.value); 20: alert("조회한 데이터 값은 " + data + "입니다."); 21: } 22: 23: function removeData() 24: { 25: localStorage.clear(); 26: alert("모든 데이터를 삭제하였습니다."); 27: } 웹 스토리지 & 웹 데이터베이스

프로그램 11-1 Chapter11 29: function viewData() 30: { 30: { 31: var data = document.getElementById("result"); 32: data.value = ""; 33: for(var i = 0; i < localStorage.length; i++) 34: { 35: var key = localStorage.key(i); 36: data.value += localStorage[key] + ","; 37: } 38: } 39: </script> 40: </head> 41: <body> 42: 키 : <input type="text" id="key"><br> 43: 값 : <input type="text" id="data"><br><br> 44: <input type="button" onclick="setData()" value="저장"> 45: <input type="button" onclick="getData()" value="조회"> 46: <input type="button" onclick="removeData()" value="모두 삭제"> 47: <hr> 48: <input type="button" onclick="viewData()" value="모두 보기"><br> 49: <textarea id="result" cols="30" rows="5"></textarea> 50: </body> 51: </html> 웹 스토리지 & 웹 데이터베이스

프로그램 11-1 Chapter11 웹 스토리지 & 웹 데이터베이스

세션 스토리지 세션 스토리지 로컬 스토리지와 마찬가지로 도메인마다 따로 생성 Chapter11 세션 스토리지 로컬 스토리지와 마찬가지로 도메인마다 따로 생성 로컬스토리지와는 다르게 데이터의 저장 기간이 한정되어 있음. 즉 저장한 데이터를 영구적으로 보관하지 않고 세션이 종료되면 자동 폐기 각 세션마다 따로 스토리지가 생성되므로 같은 도메인이라고 해도 다른 윈도우에서 생성이 되면서로의 스토리지에 접근이 불가능 함 웹 스토리지 & 웹 데이터베이스

세션 스토리지 Chapter11 세션 스토리지 웹 스토리지 & 웹 데이터베이스

세션 스토리지 Chapter11 세션 스토리지 웹 스토리지 & 웹 데이터베이스

웹 데이터베이스 데이터베이스(Database) Chapter11 데이터베이스(Database) 데이터를 조직적으로 통합하여 구조화시켜놓은 데이터의 집합체 데이터베이스 관리 시스템(DBMS : Database Management System) 데이터베이스를 생성하고, 검색하며, 추가, 삭제를 원활히 하기 위한 프로그램의 집합 가장 일반적인 것이 관계형 DBMS 웹 스토리지 & 웹 데이터베이스

웹 데이터베이스 웹 데이터베이스 추가적인 시스템 없이 데이터베이스를 생성하고 사용할 수 있음 Chapter11 웹 데이터베이스 추가적인 시스템 없이 데이터베이스를 생성하고 사용할 수 있음 데이터베이스의 질의어인 SQL의 사용이 가능 브라우저 지원 현황 관련 메서드 및 속성 웹 스토리지 & 웹 데이터베이스

웹 데이터베이스 생성 및 접근 웹 데이터베이스 생성 및 접근 Chapter11 웹 데이터베이스 생성 및 접근 웹 데이터베이스를 생성하기 위해서는 openDatabase() 메서드를 사용 웹 스토리지 & 웹 데이터베이스

웹 데이터베이스 생성 및 접근 Chapter11 웹 데이터베이스 생성 및 접근 웹 스토리지 & 웹 데이터베이스

웹 데이터베이스 생성 및 접근 웹 데이터베이스 생성 및 접근 Chapter11 웹 데이터베이스 생성 및 접근 데이터베이스 접근을 위해서는 트랜잭션을 시작해야 하는데 트랜잭션 시작을 위해서는 transaction() 메서드를 사용 웹 스토리지 & 웹 데이터베이스

웹 데이터베이스 생성 및 접근 Chapter11 웹 데이터베이스 생성 및 접근 웹 스토리지 & 웹 데이터베이스

SQL 실행 및 처리 Chapter11 SQL 질의어 SQL(Structured Query Language)은 데이터베이스를 정의하고 조작하기 위한 질의어(Query Language) 초기에는 관계형 DBMS에서만 사용되었으나 지금은 특정한 데이터베이스 시스템에 한정되지 않고 다른 데이터베이스에서도 널리 사용 웹 스토리지 & 웹 데이터베이스

SQL 실행 및 처리 CREATE 문 SELECT 문 테이블을 생성할 때 사용하는 구문 Chapter11 CREATE 문 테이블을 생성할 때 사용하는 구문 SELECT 문 테이블에서 레코드를 검색할 때 사용하는 구문 웹 스토리지 & 웹 데이터베이스

SQL 실행 및 처리 INSERT 문 UPDATE 문 테이블에서 레코드를 검색할 때 사용하는 구문 Chapter11 INSERT 문 테이블에서 레코드를 검색할 때 사용하는 구문 UPDATE 문 테이블에서 레코드를 수정할 때 사용하는 구문 웹 스토리지 & 웹 데이터베이스

SQL 실행 및 처리 DELETE 문 테이블에서 레코드를 삭제할 때 사용하는 구문 Chapter11 웹 스토리지 & 웹 데이터베이스

SQL 실행 및 처리 SQL 실행 및 처리 SQL 문을 사용한 명령어를 처리하기 위해서는 executeSql() 메서드를 사용 Chapter11 SQL 실행 및 처리 SQL 문을 사용한 명령어를 처리하기 위해서는 executeSql() 메서드를 사용 웹 스토리지 & 웹 데이터베이스

SQL 실행 및 처리 Chapter11 SQL 실행 및 처리 웹 스토리지 & 웹 데이터베이스

SQL 실행 및 처리 Chapter11 SQL 실행 및 처리 executeSql() 메서드를 사용하여 데이터베이스에 어떠한 작업을 처리하였을 경우 세 번째 인수로 지정한 콜백 함수가 호출됨 콜백 함수에서 두 번째 인수는 실행 결과인 SQLResultSet 형의 객체를 반환 관련된 속성 웹 스토리지 & 웹 데이터베이스

SQL 실행 및 처리 Chapter11 SQL 실행 및 처리 웹 스토리지 & 웹 데이터베이스

프로그램 11-2 Chapter11 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 웹 데이터베이스 </title> 06: <script type="text/JavaScript"> 07: var db; 08: window.onload = function() 09: { 10: db = openDatabase("movie", "1.0", "movie database", 1024*1024); 11: db.transaction(exeCreate); 12: } 13: 14: function exeCreate(tx) 15: { 16: tx.executeSql("create table movie(name, actor)"); 17: } 18: 19: function insertData() 20: { 21: db.transaction(exeInsert); 22: } 23: 24: function exeInsert(tx) 25: { 26: tx.executeSql("insert into movie values(?,?)", [movie.value, actor.value]); 27: } 웹 스토리지 & 웹 데이터베이스

프로그램 11-2 Chapter11 29: function viewData() 30: { 30: { 31: db.transaction(exeSelect); 32: } 33: 34: function exeSelect(tx) 35: { 36: tx.executeSql("select * from movie", [], viewTabe); 37: } 38: 39: function viewTabe(tx, rs) 40: { 41: for(var i = 0; i < rs.rows.length; i++) 42: { 43: var row = rs.rows.item(i); 44: document.getElementById("table").innerHTML += "<tr><td>" + row["name"] + "</td><td>" + row["actor"] + "</td></tr>"; 45: } 46: } 47: </script> 48: </head> 49: <body> 50: movie: <input type="text" id="movie"><br> 51: actor: <input type="text" id="actor"><br> 52: <input type="button" onclick="insertData()" value="저장"> 53: <input type="button" onclick="viewData()" value="조회"><br> 54: <hr> 55: <table id="table"></table> 56: </body> 57: </html> 웹 스토리지 & 웹 데이터베이스

프로그램 11-2 Chapter11 웹 스토리지 & 웹 데이터베이스