'2020/JSP SERVLET'에 해당되는 글 130건

  이전 글에서 알아본 제이쿼리 선택자를 이용해 HTML 태그에 접근하여 여러가지 작업을 수행해 보겠습니다. 먼저 제이쿼리의 ID선택자 기능을 이용해 HTML 태그의 ID에 접근하는 방법입니다.

  사용하실 이미지 파일과 test02폴더를 만들고 연습할 jQuery.html 파일을 만들겠습니다.

  jQuery1.html을 작성하도록 하겠습니다. 페이지 로드 시 $("#unique2")는 # 다음에 오는 id가 unique2인 태그를 웹 페이지에서 검색합니다. id에 해당하는 태그(객체)를 얻은 후 제이쿼리의 html() 메서드를 호출해 태그의 값을 얻습니다.

  다음으로는 제이쿼리의 id 선택자를 이용해 해당 id를 가지는 <p> 엘리먼트에 접근하여 동적으로 텍스트를 추가해보겠습니다. jQuery2.html을 작성합니다.

제이쿼리로 id가 article인 태그를 찾아서 html() 메서드의 인자값을 태그에 설정합니다.

추가하기를 누르면 안녕하세요라는 메시지가 나타납니다.

  이번에는 class 선택자로 <div> 태그에 접근하여 기능을 수행해 보겠습니다. 버튼을 클릭하면 함수에서 제이쿼리의 클래스 선택자를 사용해 class1 클래스 이름을 갖는 <div> 태그에 접근하여 이미지를 나타냅니다.

다음은 제이쿼리에서 <div> 엘리먼트에 직접 접근하여 이미지를 추가해 보겠습니다. jQuery4.html을 다음과 같이 작성합니다.

사용자가 텍스트 박스에 입력한 내용을 제이쿼리 id 선택자를 이용해 가져온 후 다시 텍스트 박스에 출력하는 내용입니다. 제이쿼리의 val()메서드는 해당 엘리먼트의 값을 가져오거나 엘리먼트로 값을 출력하는 기능을 합니다.

  Jquery란 화면의 동적 기능을 자바스크립트보다 좀 더 쉽고 편리하게 개발할 수 있게 해주는 자바스크립트 기반 라이브러리입니다. 제이쿼리는 여러가지 효과나 이벤트를 간단한 함수 호출만으로 빠르게 개발할 수 있어 유용합니다.

Jquery 특징

• CSS 선택자를 사용해 각 HTML 태그에 접근해서 작업하므로 명료하면서도 읽기 쉬운 형태로 표현할 수 있습니다.
• 메서드 체인 방식으로 수행하므로 여러 개의 동작(기능)이 한 줄로 나열되어 코드가 불필요하게 반복되는 것을 피할 수 있습니다.
• 풍부한 플러그인을 제공하므로 이미 개발된 많은 플러그인을 쉽고 빠르게 이용할 수 있습니다.
• 크로스 브라우징을 제공하므로 브라우저 종류에 상관없이 동일하게 기능을 수행합니다.

  제이쿼리를 사용하는 방법으로는 2가지의 방법이 있습니다. 첫번째는 www.jquery.com에서 서 라이브러리를 다운로드해서 사용하는 방법이고, 두 번째는 네트워크로 CDN 호스트를 설정해서 사용하는 방법입니다. 여기 티스토리에서는 상대적으로 간편하게 설정할 수 있는 두 번째 방법을 사용해 글을 작성하도록 하겠습니다.

• <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script> 지정한 버전의 제이쿼리를 사용합니다.
• <script src="http://code.jquery.com/jquery-latest.min.js"></script> 가장 최신버전의 제이쿼리를 사용합니다.

  제이쿼리는 HTML 객체(DOM)를 탐색하는 방법으로 CSS 선택자를 이용합니다. 제이쿼리의 선택자 종류와 이를 표현하는 방법을 정리해보겠습니다.

다음 글에서부터 Jquery를 실습하도록 하겠습니다.

HTML5 웹페이지 구조 관련 태그를 사용해 보도록 하겠습니다.

<section>: 제목별로 나눌 수 있는 태그

  다음은 <section>태그 안에 <article>태그를 사용해 본문을 표시하겠습니다

<article> 개별 콘텐츠를 나타내는 태그

3번째는 여러 가지 시맨틱 웹의 태그를 이용해 화면의 레이아웃을 구성하는 내용입니다.

4번째로는 레이아웃을 표시하려면 각 태그에 CSS를 적용해야 합니다.

출처 : 자바웹을 다루는 기술

깃허브: github.com/soulwine-it

  시맨틱 웹(Semantic Web)의 사전적 정의는 기계가 이해할 수 있고 처리할 수 있는 웹 콘텐츠를 만드는 것으로, 1998년 월드와이드웹(WWW)의 창시자인 팀 버너스 리(Tim Berners Lee)에 의해 개발되고 정의된 개념입니다.

  HTML4에서는 웹 페이지 구조에 해당하는 머리말, 메뉴, 본문, 하단부를 만들 때(div)태그에 CSS를 적용하는 방식으로 작업을 했습니다. 그러다 보니 <div> 태그만 봐서는 그 의미를 잘 알수 없다는 문제가 있었습니다.

  따라서 HTML5에서는 이 문제를 보와하기 위해 의미있는 구조를 나타낼 수 있는 태그들을 추가하여 가독성을 높였습니다. HTML5에 추가된 태그를 정리하면

쉽게 그려 본다면 시맨틱 웹의 자체 태그를 이용해 구성한 레이아웃입니다.

  웹 브라우저는 웹 사이트를 만드는 프로그래밍 언어인 HTML, CSS와 자바스크립로 이루어진 구문만 인식하여 화면에 나타냅니다. 그리고 JSP는 웹 사이트 화면을 구성하는 HTML을 좀 더 동적으로 구현하기 위해 도입된 기능입니다. HTML 기능도 꾸준히 업그레이드 되어 지금은 HTML5 버전이 사용되고 있습니다.

  HTML5는 기존 HTML4에서는 지원하지 않는 동영상이나 오디오 기능 그리고 지리 위치 정보등을 지원합니다. 플러그인을 따로 설치하지 않아도 화려한 그래픽 효과를 구현할 수 있으며, 운영체제에 상관없이 스마트폰, 태블릿 같은 모바일 환경에서도 기능을 구현할 수 있습니다.

HTML5 여러가지 기능

 HTML5의 문서 구조

  이전 글에서는 파일 업로드에 대해서 적었습니다.

  이번에는 파일을 다운로드하여 출력하는 예제를 해보겠습니다.

이렇게 파일을 준비해 주세요.

첫번째 jsp에서 다운로드할 이미지 파일 이름을 두 번째 jsp로 전달하도록 first.jsp를 작성해 줄게요

  두번째 jsp는 이미지 파일 표시창에서 <img>태그의 src 속성에 다운로드를 요청할 서블릿 이름 download.do와 파일 이름을 GET방식으로 전달합니다. 다운로드한 이미지 파일을 바로 <img>태그에 표시하고, <a> 태그를 클릭해 서블릿에 다운로드를 요청하면 파일 전체를 로컬 PC에 다운로드 합니다.

파일 다운로드 기능을 할 서블릿인 FileDownload클래스입니다.

  파일 다운로드 기능은 자바 IO를 이용해 구현합니다. 먼저 response.getOutputStream);를 호출해 OutputStream을 가져옵니다. 그리고 배열로 버퍼를 만든 후 while 반복문을 이용해 파일에서 데이터를 한 번에 8KB씩 버퍼에 읽어 옵니다. 이어서 OutputStream의 write() 메서드를 이용해 다시 브라우저로 출력합니다.

이제 first.jsp로 요청하고 이미지 다운로드를 해보겠습니다.

여기서 파일 내려받기를 누르시면

아래에 이렇게 다운로드가 됩니다.

  sec01.ex01 패키지를 만들고 FileUpload 클래스를 생성합니다. 또 test01폴더를 생성하고 실습 파일 uploadForm.sjp를 추가합니다.

  파일을 업로드할 때 사용할 저장소를 다음과 같이 D드라이브 아래에 만듭니다. 여기서는 폴더 이름을 file_repo로 하였습니다.

  파일 업로드를 처리하는 서블릿인 FileUpload 클래스를 다음과 같이 작성합니다. 라이브러리에서 제공하는 DiskFileItemFactory 클래스를 이용해 저장 위치와 업로드 가능한 최대 파일 크기를 설정합니다. 그리고 ServletFileUpload 클래스를 이용해 파일 업로드창에서 업로드된 파일과 매개변수에 대한 정보를 갖와 파일을 업로드하고 매개 변수의 값을 출력합니다.

이제 출력을 해볼게요!

이렇게 입력을 하고.. 업로드!!

파일 저장소(d:/file_repo)에 가보니 이렇게 업로드가 되어있네요!

다음 글에서는 jsp에서 파일 다운로드를 해볼게요!

# JSTL TAGLIB가 없으면 오류떠요. 태그 라이브러리 설치 안하신분은!

https://windorsky.tistory.com/entry/JSTLJSP-Standard-Tag-Library참고해주세요

FILE업로드 라이브러리 설치 안하신분은 https://windorsky.tistory.com/entry/JSP-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%84%A4%EC%B9%98

 여기를 참고해주세요!

 파일 업로드 기능을 사용하려면 오픈 소스 라이브러리를 설치해야 합니다. 파일 업로드 라이브러리르 설치하는 과정은 다음과 같습니다.

jakarta.apache.org 로 접속후 Commons를 선택해주세요

내리시다 보면 위와같이 FileUpload가 있습니다.

클릭하시면 위와같은 화면이 나오는데 downlodaing 아래에 FileUpload 1.3.3 버전을 찾아서 here를 누릅니다

찾으셔서 클릭하시면 다운로드가 됩니다.

다운받으신 압축파일을 풀어주시고

폴더 안에 있는 

이 파일을 복사하셔서 사용하실 프로젝트의 WebContent/WEB-INF-lib 에 복사해서 넣어주시면 됩니다.

다음으로 commons-io-2.6jar 파일을 설치해보겠습니다.

https://commons.apache.org/proper/commons-io/download_io.cgi 

commons-io.2.6-bin.zip을 다운받아주시고 압축을 풀어주겠습니다

이 파일을 다시 복하해서 프로젝트에 넣어주겠습니다.

  파일 업로드 라이브러리에서 제공하는 클래스에는 DiskFileItemFactory, ServletFileUpload가 있습니다. 각 클래스에서 제공하는 기능은

  다음 글 부터 직접 코딩을 하면서 테스트를 해보겠습니다.