- 데이터를 DB에 저장하고 그 값을 읽고, 쓰고, 수정하고, 삭제하기 위해서는 먼저 DataBase를 설치해주어야 한다. 

- 윈도우에서 쉽게 사용할 수 있고, 무료인 MariaDB를 설치할 것이다.

1.  MariaDB 다운로드

① 다운로드 사이트 : https://downloads.mariadb.org/

 

Downloads - MariaDB

 

downloads.mariadb.org

※ MariaDB, java, tomcat은 화면 구성이 자주 바뀐다. 

② 10.3.17 버전 다운로드(최신버전은 10.4)

③ 본인 OS에 맞는 버전 다운로드

2. MariaDB 설치

① 다운받은 파일을 더블클릭해서 설치를 진행한다. 

② 특이사항은 없으므로 Next를 눌러 설치를 진행하되, Default instance properties에서 

     - root 패스워드를 설정해준다. (잊어버리지 말것)

     - 외부(별도의 프로그램)에서 root 접근이 가능하다록 설정에 체크

     - mariadb서버를 UTF-8로 셋팅 체크

③ 설치가 완료되면 자동으로 실행된다. 하지만 실행이 되지 않을 경우 

    서비스 > MySQL 실행 확인(실행 안되있으면 실행시켜 준다.)

3. MariaDB를 HediSQL에서 접속 

- 이클립스에서 DB 연동프로그램을 설치해서 사용할 수도 있지만 유료이므로 HediSQL을 다운받아 사용

① 다운로드 사이트 : https://www.heidisql.com/download.php

 

Download HeidiSQL

Ads were blocked by your webbrowser. This is not a problem, but keep in mind that developing HeidiSQL, user support and hosting takes time and money. You may want to send a donation instead. Download HeidiSQL 10.2 Release date: 15 Jun 2019. Please disable

www.heidisql.com

※ Portable을 받아서 사용해도 되고 설치프로그램을 다운받아도 된다. portable 다운시에는 설치 없이 진행하되, 본인이 알아 볼 수 있는 경로에 잘 넣어둬야 한다. 

② HediSQL을 실행하면 접속 설정 창이 나온다. (아직 별도의 사용자, DB가 없기 때문에 root로 접속한다.) 

    사용자 : root, 암호 : 앞에설정해준 root암호 를 넣고 "열기"를 누른다.

③ 접속이 정상적으로 진행되면 아래와 같이 DB와 그 테이블을 볼수 있는 창이 실행된다.

④ 쿼리는 쿼리 탭에서 실행하면 된다.

1. 이클립스 톰켓 연동

① 이클립스 실행 "Window > Preferences" 선택

② "Server > Runtime Environments > Add " 선택

③ New Server Runtime Environment창에서 "내가 설치한 버전의 톰캣을 선택(tomcat 8.5) > Next"

④ Tomcat Server에서 Tomcat installation directroy를 내가 설치한 경로로 설정, JRE는 이전에 추가한 jdk로 설정 > Finish

⑤ 정상적으로 추가된 것을 확인하고 "Apply and Close"

⑥ 다시 이클립스 창에서 아래쪽 탭에 "Server > No servers are available. Click this link to create a new Server..." 선택

⑦ Define a New Server 창에서 내 톰켓버전 선택(tomcat8.5) > Finish

⑧ 추가된 서버를 더블클릭 > 설정창이 뜨면 Server Location을 "Use Tomcat Installation"으로 선택 > Deploy path를 "내 톰켓경로\webapps"로 설정 > 저장(Ctrl+S)

⑨ 추가된 서버를 클릭하고 오른쪽 마우스 클릭 > "start" 

console에서 로그가 올라오면서 서버가 실행된다.

2. 테스트 서비스 실행

① Project Explorer의 빈공간에서 "New > Dynamic Web Project"선택

② Dynamic Web Project 에서 Project Name을 입력하고 Next

③ Java에서 Next

④ Web Module에서 "Generate web.xml deployment descriptor"를 선택하고 Finish

⑤ 생성된 Dynamic Web Project에서 WebContent폴더 클릭, "New > JSP File" 선택

⑥ JSP에서 "index.jsp"입력 후 Finish

⑦ body영역에 "Hello World!" 입력

⑧ JSP 파일을 저장하고, 생성한 Dynamic Web Project 를 클릭하고 오른쪽 마우스 "Run > Run on Server" 클릭

⑨ Run On Server 창이 뜨면 Finish

⑩ "Restart server" 선택 후 OK

⑪ http://localhost:8080/생성한DynamicWeb경로/ 로 접속해보면 Hello World가 보인다.

  1. 웹(Web) : 보통 WWW(World Wide Web)이라고 불린다. 제공하는 정보 검색 서비스로 텍스트만 제공했던 기존의 정보 서비스와는 달리 그림, 동영상, 소리 등도 모두 지원하고 있다. 또 하이퍼텍스트 개념을 도입하여 쉽게 원하는 정보와 관련된 정보를 찾아볼 수 있는 특징을 갖고 있다

  2. 웹 브라우저(Web Browser) :  웹 브라우저(web browser)는 인터넷망에서 정보를 검색하는 데 사용하는 응용 프로그램

    • 주요기능 : 웹페이지 열기, 최근 방문한 인터넷 주소, 즐겨찾기, 웹페이지 저장 등...

    • 웹브라우저의 종류 : 마이크로소프트 엣지, 인터넷 익스플로러, 구글 크롬, 애플 사파리, 모질라 파이어폭스, 오페라, 네이버 웨일등...

  3. 웹사이트(Web Site) : 웹 서버에 정보를 저장해 놓은 집합체

    • 인터넷 포털 사이트(Portal site) : 주제별로 원하는 사이트 목록들을 나열한 사이트, 정보검색 서비스나 커뮤니티 같은 서비스를 제공함으로써 고정 방문객을 확보해 인터넷 비즈니스로 연결함

      예) 네이버, 다음, 구글 등.....

  4. URL(Uniform Resource Locator) : 한 인터넷 서버(=웹페이지)에서 주관하는 자원에 접근할 수 있는 모든 데이터 ≒ 웹 페이지에 접근할 수 있는 주소

    • 프로토콜 : 컴퓨터간에 정보를 주고받을 때의 통신방법에 대한 규칙과 약속.

    • 도메인 : 숫자로 이루어진 인터넷상의 컴퓨터 주소를 알기 쉬운 영문으로 표현한 것 

    • 포트 : 모뎀과 컴퓨터 사이에 데이터를 주고 받을 수 있는 통로(보통 생략됨)

    • PATH : 웹페이지가 저장된 서버의 디렉토리, 파일 경로
  5. 클라이언트 서버 모델 : 보통 정보나 자원을 일원적으로 관리하고, 제공하는 역할을 하는 컴퓨터를 서버라고 하고, 서버에게 정보나 자원을 요청하여 그것을 이용하는 역할을 하는 하드웨어나 소프트웨어를 클라이언트라 한다. 이들이 서로 관련을 가지고 하나의 응용 프로그램을 효율적으로 실행하는 방식

 

[참고사이트]

용어 참고 : 네이버 지식백과  https://terms.naver.com/

 

 

 

 

[실행화면]


1. 로그아웃 링크 연결

2. controller

1) src - controller.HandlerMapping.java에 logout 추가

2) src - controller.LogoutController.java

[로그인 폼]

[로그인 성공 폼]

[실행화면]

1. 로그인 폼

1) WebContent - index.jsp 변경(로그인/로그아웃에 따른 메뉴 변경)

2) WebContent - login.jsp

3) WebContent - login_ok.jsp

4) WebContent - login_fail.jsp

2. controller 

1) src - controller.HandlerMapping.java에 login추가

2) src - controller.LoginController.java

3. model

1) src - model.ClientDAO.java에 login메소드 추가

[회원검색 폼]

[검색결과 폼]

[실행화면]

1. 회원조회 폼

1) WebContent - index.jsp에 가입 url 기입

2) WebContent - findClient.jsp (검색 페이지)

3) WebContent - findClient_result.jsp (검색결과 확인 페이지)

2. controller 변경

1) src - controller.HandlerMapping.java에 findClient추가

2) src - controller.FindClientControlle.java 생성

3. model 변경

1) src - model.ClientDAO.java에 findclient 메소드 추가

[회원가입 폼]

[실행화면]

1. 회원가입 폼

1) WebContent - index.jsp에 가입 url 기입

2) WebContent - register.jsp

3) WebContent - register_result.jsp (회원가입 성공시 등록 확인 페이지)

2. controller 변경

1) src - controller.HandlerMapping.java에 register 추가

2) src - controller.RegisterController.java 생성

3. model 변경

1) src - model.ClientDAO.java에 register 메소드 추가

- 회원 등록/수정/삭제/조회가 가능한 웹서비스 

1. study_db - client table 생성

 

2. 홈화면

   1)  WebContent - index.jsp

- 12번째 줄 이미지

[이미지출처]http://blog.naver.com/PostView.nhn?blogId=kimstcool01&logNo=220908881839&parentCategoryNo=&categoryNo=27&viewDate=&isShowPopularPosts=true&from=search

-15번째 줄부터 채워나가면 됨.

3. Controller 

   2) src - loader.DbDriverLoader.java

   3) src - controller.DispatcherServlet.java

   4) src - controller.HandlerMapping.java

   5) src - controller.Controller.java

4. Model

   1) src - model.ClientDAO

   2) src - model.ClientDTO

5. 에러페이지

  1) WebContent - error.jsp

- 10째 줄 이미지 

[이미지 출처] https://namu.wiki/w/%EC%95%88%20%EB%8F%BC%20%EC%95%88%20%EB%B0%94%EA%BF%94%EC%A4%98%20%EB%B0%94%EA%BF%80%20%EC%83%9D%EA%B0%81%20%EC%97%86%EC%96%B4%20%EB%B9%A8%EB%A6%AC%20%EB%8F%8C%EC%95%84%EA%B0%80

 

[참고] 모델2 개념 참고 https://thatisgood.tistory.com/entry/model1-vs-model2-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

+ Recent posts