[환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis ---- 개발 목표 : 로그인 기능 만들기 해당 화면에서 데이터베이스에 저장되어있는 아이디와 비밀번호를 가지고 있을 시 해당 화면으로 전환되도록 함. 또한 로그아웃 버튼 클릭시 로그아웃되는 처리까지 진행 JSP 부분] logout.onclick = function(){ $globalStorage.setValue("loginUser",""); location.reload(); } $('.submit-btn').click( async function (){ let id =idtext.value; let pw =pwtext.value; let result = await fetch('/join/authlogin..

[환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis ---- 개발 목표 : 오라클 디비를 이용해서 게시판 CRUD 중 C(create) 만들기 [완료화면] 등록 버튼 클릭시 메뉴 1의 게시판에 새로운 항목이 생성 한국어는 깨지는 현상이 발생-> 추후 해결예정 [디렉토리] CRUD는 같은 파일에 작성 [JSP 파일] 등록 fetch 를 사용하여 해당 url을 호출하고, 데이터는 json으로 가공하여 전달, 데이터들은 입력 폼 안에 적힌 text, globalstorage에 저장된 사용자 명을 받아서 전달한다. [Controller] @RequestMapping("/board/register.do") @ResponseBody public String boar..

[환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis ---- 개발 목표 : 오라클 디비를 이용해서 게시판 CRUD 중 R(read) 만들기 [완료 화면] [디렉토리] [설명] board에 관한 controller 와 VO 객체 (DTO 로 해도 무방함) Serivce, mapper 부분 파일 생성. 1. jsp 파일 CRUD 등록 번호 제목 글쓴이 작성일자 조회수 fetch 를 사용하여 controller 호출하며, 응답받은 데이터는 list 구조로 이루어져 있으며 그 ArrayList 구조를 forEach를 사용하여 각각의 index 순회를 하며 html 태그를 만들고 해당하는 데이터를 td 안에 넣고 이를 append 를 이용해서 tablebody에 ..

[환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis ---- 개발 목표 : 오라클 디비를 이용해서 회원가입 기능 만들기. 완성화면] 회원가입 버튼 클릭시 팝업창 오픈] 팝업창 기능] 1. 아이디 중복확인 -> DB 조회 2. 패스워드 일치 확인 3. 가입버튼 클릭시 DB insert 및 팝업창 닫힘 입력된 DB 모습] 소스코드 및 설명] 팝업창 오픈 코드] $('.authjoin').click(function(){ window.open('auth/authjoin.do', 'windowPop', 'width=400, height=600, left=400, top=400, resizable = yes') }); open 메소드 사용 첫번째 파라미터로 열릴 u..

이전까지 db 연결 및 생태계를 이해하였으니 직접 데이터를 view 단에서 넣어보도록 하겠습니다. Mybatis 의 fullconnection 기능을 사용하니 DAO는 사용하지 않고 주고받을 객체는 VO로 만들겠습니다. view 단에서 데이터를 전달할 함수는 Fetch 함수를 사용하겠습니다. 디렉토리 ] 1] VO 선언입니다. package com.yoon.model; public class MemberVO { private String memberId; @Override public String toString() { return "MemberVO{" + "memberId='" + memberId + '\'' + ", memberPw='" + memberPw + '\'' + '}'; } private ..

Spring 생태계 정리 MVC 구조에서 Model 에 해당하는 DAO , DTO VO 정리 1] DAO : Data Access Object 로 데이터베이스의 data에 접근하기 위해 만드는 객체 데이터베이스에 접근 = Connetion 을 설정해야 한다. 지금 사용하고있는 Mybatis는 커넥션 풀이기 때문에 DAO를 만들지 않아도 된다. 2] DTO : Data Transfer Object 로 데이터 교환을 위한 Beans 를 의미합니다. Controller , View , Service 등에 디비에서 뽑은 데이터를 교환하기 위한 순수 데이터 객체입니다. 따라서 Getter 와 Setter 메소드만 가지게 됩니다. 3] VO : Value Object 로 DAO보다는 DTO와 비슷합니다. VO는 r..

사용 툴 : IntelliJ 사용 DB : Oracle 사용 DB framework : Mybatis 빌더 : Maven 환경 : Spring oracle 버전] 19버전 *참고로 19부터 사용자 계정 생성시 앞에 붙는 c##도 db연결시 아이디에 동일하게 작성해야 합니다. 1단계] Pom.xml 파일에 Dependency 추가 후 maven 동기화 com.oracle ojdbc7 12.1.0.2 junit junit 4.12 test com.zaxxer HikariCP 3.4.2 org.springframework spring-context 5.3.3 org.mybatis mybatis 3.5.3 org.mybatis mybatis-spring 2.0.3 org.springframework spring..

목표] 기본적인 tab의 구성은 포스트 참조 https://yn971106.tistory.com/61 [TAB 구현 심화_3]_Spring에서 tab 구현해보기 (feat 메모리 저장) 목표] 위와 같이 동작하면서 닫고 새로 열기 전까지는 파일을 로드하거나 통신하지 않도록 하였습니다.] 코드 & 설명] 각각의 메뉴버튼에 리스너를 달아줍니다. openCheck 함수와 createTemplate 함수를 yn971106.tistory.com 위의 포스팅과 다른점은 1. _history 탭 객체 안에 id를 부여하여 id를 기준으로 activate 된 tab을 찾아 css 속성을 적용시킨 것 2. 클래스 (css) 를 동적으로 부여한 점 이 되겠습니다. 해당 코드만 보겠습니다. 1. 클릭시 적용되는 css 부분..

목표] header 부분] 좌측 : 아이콘 중앙 : 이름 우측 : auth 기능 body 부분] 좌측 : global nav menu bar 우측 상단 : tab 메뉴 우측 하단 : content 사용한 html] 이름 menu1 menu2 menu3 사용한 css] .header_text { float: left; margin-left: 60px; margin-top: 60px; } .header { background-color: #EEEFF1; position: relative; box-sizing: border-box; padding: 0 30px 0 26px; height: 150px; overflow: hidden; } .imgcontainer { float: left; width: 180px..