makeaplayground

Github 이슈 라벨(issue labels)

토희 — Thu, 21 Dec 2023 20:16:14 +0900

Github 이슈 라벨(issue labels) 의미들

label	의미
bug	예기치 않은 문제 또는 의도하지 않은 동작(버그)을 나타냅니다
documentation	문서를 개선하거나 추가 할 필요가 있음을 나타냅니다
duplicate	해당 이슈 또는 PR이 기존에 있음을 나타냅니다
enhancement	새로운 기능 요청을 나타냅니다
good first issue	처음 기여해볼 사람에게 좋은 문제를 나타냅니다
help wanted	관리자가 문제 또는 PR 요청에 대한 도움을 원함을 나타냅니다
invalid	이슈 또는 PR 요청이 더 이상 관련이 없음을 나타냅니다
question	이슈 또는 풀 요청에 추가 정보가 필요함을 나타냅니다
wontfix	문제나 PR 요청에서 작업이 계속되지 않음을 나타냅니다

enhancement, bug 밖에 안 쓰게 됨

Swagger 적용 후, 화이트라벨 오류 ( Springboot 3.x 이슈 )

토희 — Thu, 21 Dec 2023 20:05:29 +0900

프로젝트에 OpenApi(Swagger)를 적용하고,

http://localhost:8080/swagger-ui/index.html 접속하니 화이트라벨 오류가 뜬다. 왜지?!!!!!

기존에 스웨거 잘 적용되어 있는 타 프로젝트 코드를 들고 왔는데, 왜 안되지

한참을 구글링하다가 이번 프로젝트는 스프링부트 3.x으로 설정 했다는게 생각났다

기존

dependencies {
    implementation 'org.springdoc:springdoc-openapi-ui:1.6.9'
}

import io.swagger.v3.oas.models.Components;
import io.swagger.v3.oas.models.OpenAPI;
import io.swagger.v3.oas.models.info.Info;
import io.swagger.v3.oas.models.security.SecurityRequirement;
import io.swagger.v3.oas.models.security.SecurityScheme;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.Arrays;


@Configuration
public class SwaggerConfig {
    @Bean
    public OpenAPI openAPI() {
        Info info = new Info()
                .title("test api")
                .version("v1")
                .description("test api");
        SecurityScheme securityScheme = new SecurityScheme()
                .type(SecurityScheme.Type.APIKEY)
                .scheme("apiKey")
                .name("Authorization")
                .in(SecurityScheme.In.HEADER);
        SecurityRequirement securityRequirement = new SecurityRequirement().addList("Auth");
        return new OpenAPI().components(new Components().addSecuritySchemes("Auth", securityScheme))
                .info(info)
                .security(Arrays.asList(securityRequirement));
    }
}

변경

SwaggerConfig는 동일하고, dependencies를 변경해줬다

스프링부트 3.x 버전에서는 아래 종속성으로 사용하기!

dependencies {
    implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.0.2'
}

참고사이트

https://velog.io/@kjgi73k/Springboot3%EC%97%90-Swagger3%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

Springboot 3.x에 Swagger를 적용시켜보자!

Springboot 3.0.1에서 Swagger 3.0.0을 적용 중 발생하는 에러들을 해결해 보자

velog.io

MyBatis 오류: Invalid bound statement (not found), properties 경로 오류

토희 — Wed, 22 Nov 2023 14:13:40 +0900

애플리케이션을 실행하고

restapi를 postman으로 테스트 하는데

Invalid bound statement (not found): com.example.example.user.UserMapper.findByUsername 오류 발생

나 같은 경우는 application.properties에 경로가 잘못 되어있었다

xml 경로가 이렇게 되어있는데

properties에는 아래처럼 되어있었다

이렇게 변경해줌

끝! 경로는 항상 잘 보자

[Spring Boot] 스프링부트 의존성1 - spring-boot-starter-validation

토희 — Sat, 18 Nov 2023 22:20:44 +0900

DTO에서 유효성 검사를 하고 싶을때 spring-boot-starter-validation 를 추가해준다

의존성 추가

// Gradle
implementation 'org.springframework.boot:spring-boot-starter-validation'

// Maven
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-validation</artifactId>
</dependency>

2.7.6버전으로 넣어줌

클래스를 가져온다

어노테이션이 적용된다

자주 사용하는 어노테이션

@NotNull - 해당 값에 Null을 허용하지 않음

@NotBlank - Null을 허용하지 않으며 문자가 한 개 이상 포함되어야 함 (공백 제외)

@NotEmpty - Null을 허용하지 않으며 공백 문자열을 허용하지 않음

@Size - 최소, 최대 사이즈 지정 가능, 값이 Max 와 Min 사이에 있는지 확인 가능

@Max - 값이 Max보다 큰지 확인

@Min - 값이 Min보다 작은지 확인

Spring Boot 3.x 실행이 안될 경우

토희 — Fri, 17 Nov 2023 13:26:50 +0900

회사 타프로젝트를 서포팅해주라는 얘기를 듣고 깃에서 clone을 했는데,

Gradle Import를 하니 위와 같은 에러가 뜬다

No matching variant of org.springframework.boot:spring-boot-gradle-plugin:3.1.5 was found

구글링해보니, 스프링부트 3.x 버전은 Java 17부터 지원된다

나는 Java11로 구동시킬려고 하니, 오류가 발생했다

해결방법

1. 스프링부트 다운그레이트

2. Java 17 버전 설치

회사 동기랑 얘기해서 프로젝트를 11버전으로 바꾸기로 했다

[Redis] 레디스 명령어 정리 redis-cli

토희 — Tue, 31 Oct 2023 15:18:25 +0900

지난 글에서 M1에서 Embedded Redis 실행이 안되는 이유를 알아봣다

터미널에서 직접 다운 받은 레디스를 활용하는 방법을 알아보도록 하겠다

우선 레디스 서버를 실행하지 않고, 인텔리제이를 실행하면

이런 오류가 발생한다

6379가 Redis 기본 포트인데, 결국 Redis에 연결할 수 없다는 거다

그러면 Redis 실행하는 명령어는 어떻게 될까

- Redis 디렉토리로 이동

cd redis-6.0.10

Redis 서버 실행

sudo src/redis-server

Embedded Redis오

Embedded Redis

서버가 실행되었다

실행된 상태에서 터미널 창을 하나 더 열어서( command + t )

redis-cli 접속하기

src/redis-cli

채널 확인

pubsub channels

채널 구독자수 확인

pubsub numsub [채널명]

채널을 만들어 주고, 구독한 상태에서 pubsub numsub 57668f49-a6ed-4bd9-8c27-03aa35a256c7 하면은

구독자 1인 거를 확인 할 수 있다

채널 구독하기

subscribe [채널명]

레디스 서버에서 채널을 구독한 후에,

인텔리제이 실행 후 local 에서 메세지를 보내면 레디스 서버에 직렬화되서 메세지가 날라오는거를 확인할 수 있다

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

채널에 메세지 보내기

publish [채널명] [메세지명]

터미널을 한개는 57668f49-a6ed-4bd9-8c27-03aa35a256c7 채널을 구독한 상태에서

다른 터미널에서 publish 57668f49-a6ed-4bd9-8c27-03aa35a256c7 Hello 로 메세지를 보내면 구독한 터미널에 바로 메세지가 가는걸 확인할 수 있다

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

참고로 인텔리제이에서 실행한 화면에는 메세지가 안 뜸... 왜냐면 코드에서 메세지를 json 형식으로 보내는걸로 했는데, String 으로 보냈기 때문이다

Hello가 안 뜨고 그대로임

이런 오류 발생, 아래 objectMapper.readValue 에서 터짐

명령어를 확인하기 위해 레디스 서버 자체에서 메세지를 보내 테스트 해봤지만, 실 운영에서 서버 내에서 채널에 메세지를 보내는 일은 없을것 같다

구독한 채널 해제

unsubscribe [채널명]

Redis 서버 끄기

터미널에서 control + c 하면 된다

bye bye... 라고 뜸

이상으로 Redis의 명령어를 알아봤다

참고 블로그

https://inpa.tistory.com/entry/REDIS-%F0%9F%93%9A-PUBSUB-%EA%B8%B0%EB%8A%A5-%EC%86%8C%EA%B0%9C-%EC%B1%84%ED%8C%85-%EA%B5%AC%EB%8F%85-%EC%95%8C%EB%A6%BC

️ REDIS의 PUB/SUB 기능 (채팅 / 구독 알림)

Redis Publish / Subscribe Publish / Subscribe 란 특정한 주제(topic)에 대하여 해당 topic을 구독한 모두에게 메시지를 발행하는 통신 방법으로 채널을 구독한 수신자(클라이언트) 모두에게 메세지를 전송 하

inpa.tistory.com

[Redis] Mac M1에서 Embedded Redis를 실행하지 못하는 이유와 해결 방법

토희 — Tue, 31 Oct 2023 14:23:20 +0900

이번에 회사 팀원들끼리 Redis로 채팅 기능을 구현해보기로 했다

Embedded Redis config는 셋팅해서 똑같은 환경에서 작업하기로 했는데,

다들 분들은 오류 없이 스프링이 실행되는 방면, 나는 실행하자마자 오류가 발생하였다

M1에서 Embedded Redis를 실행하려고 해서 였다

왜 이런 오류가 발생할까

M1에서 Embedded Redis 실행하지 못하는 이유

Redis가 M1의 ARM 프로세서 아키텍처에서 실행되는 것을 지원하지 않기 때문이다

Embedded Redis는 애플리이션이 실행될 때 자동으로 시작되고, 애플리케이션이 종료될 때 Redis도 종료된다

하지만 Redis가 ARM 프로세서 아키텍처에서 실행되지 않기 때문에 M1에서 Embedded Redis 실행 할 수 없다

그럼 어떻게 해야할까

해결방법

직접 Redis를 터미널에서 다운받았다

- Redis 다운로드

wget https://download.redis.io/releases/redis-6.0.10.tar.gz

wget 명령어가 오류가 난다면 brew install wget

- 다운 받은 Redis 파일 압축 해제

tar -xzf redis-6.0.10.tar.gz

- 압축을 해제한 Redis 디렉토리로 이동

cd redis-6.0.10

- Redis를 컴파일한다. make는 소스 코드에서 실행파일을 만드는 명령어이다

make

- Redis 서버 시작

src/redis-server

권한 오류가 발생하면 앞에 sudo 를 붙혀 sudo src/redis-server로

RedisConfig.java

@Configuration
public class RedisConfig {
   @Bean
    public RedisConnectionFactory redisConnectionFactory(){
       return new LettuceConnectionFactory("localhost", 6379);
   }
}

이렇게 하고 나서, 실행하면 잘 작동되었다!

오늘도 하나 배웠네~ 끝

Redis 명령어 정리

https://makeaplayground.tistory.com/331

[Redis] 레디스 명령어 정리 redis-cli

지난 글에서 M1에서 Embedded Redis 실행이 안되는 이유를 알아봣다 터미널에서 직접 다운 받은 레디스를 활용하는 방법을 알아보도록 하겠다 우선 레디스 서버를 실행하지 않고, 인텔리제이를 실행

makeaplayground.tistory.com

참고 블로그

https://green-bin.tistory.com/78

Spring - Mac M1(ARM)에서 Embedded Redis를 실행하지 못하는 이유와 해결 방법

배경 JWT를 활용한 Spring Security를 작업하면서 Refresh Token을 저장하기 위해서 처음으로 Redis를 Spring에 적용한 후, 로컬 환경과 테스트에서 사용할 Embedded Redis를 힘들게 적용했다. 테스트도 무사히

green-bin.tistory.com

[IntelliJ] 인텔리제이 System.out.println() 단축키

토희 — Thu, 26 Oct 2023 10:06:16 +0900

System.out.println() 단축키

sout

위의 사진처럼 sout 입력하고 엔터 치면 System.out.print()가 자동으로 생성된다!

[Intellij] 인텔리제이 언어 영어(English)로 변경하기

토희 — Wed, 25 Oct 2023 10:59:12 +0900

Intellij IDEA > Preferences > Plugins > Korean Language Pack 체크 풀기

Preferences 로 이동

플러그인 선택

나는 한국어 언어 팩이 설치되어 있다

체크를 풀고 나서 적용하면 인텔리제이 다시 실행되면서 영어로 바뀐다

[Intellij] 인텔리제이 프로젝트 동시에 RUN 하는 방법

토희 — Wed, 25 Oct 2023 10:55:34 +0900

[ 한국어 버전 ]

우선 한번 프로젝트를 실행시켜준다

편집으로 이동한다

옵션 수정 클릭

다중 인스턴스 허용 클릭

이미 8080으로 프로젝트가 실행되고 있으니, application.propertie에 8081로 포트를 변경해준다

+포트 변경법 참고

https://makeaplayground.tistory.com/325

[Spring Boot] 서버 포트 변경하기

1. application.properties 파일 수정하기 제일 간단하다 applicationl.properties에서 se만 작성해도 인텔리제이에서 자동으로 띄어준다 server.port=8081로 변경하고 실행하면 된다 실행하면 터미널 중간에 이렇

makeaplayground.tistory.com

포트를 변경하고 실행을 하면

이렇게 2개가 돌아가고 있다고 알려준다

실행창에도 각 각 떠 있는거를 확인할수 있다!

[ 영어 버전 ] - 방법은 똑같다

Run → Edit Configurations → Modify options -> Allow multiple instances

[Spring Boot] Driver net.sf.log4jdbc.sql.jdbcapi.DriverSpy claims to not accept jdbcUrl

토희 — Tue, 24 Oct 2023 09:33:02 +0900

어제까지 잘 돌아가면 프로젝트에서 갑자기 이런 오류가 난다

수정한 부분이 없는데 왜지

1. 에러사항

Driver net.sf.log4jdbc.sql.jdbcapi.DriverSpy claims to not accept jdbcUrl

2. 해결방법

구글링해보니 Gradle 새로고침을 하면 된다고 한다

잘 실행된다!

[Spring Boot] 서버 포트 변경하기

토희 — Mon, 23 Oct 2023 15:28:23 +0900

1. application.properties 파일 수정하기

제일 간단하다

applicationl.properties에서 se만 작성해도 인텔리제이에서 자동으로 띄어준다

server.port=8081로 변경하고 실행하면 된다

실행하면 터미널 중간에 이렇게 포트가 뜰 것이다

2. SpringApplication의 setDefaultProperties

@SpringBootApplication
public class HelloApplication {

    public static void main(String[] args) {
        SpringApplication app = new SpringApplication(HelloApplication.class);
        app.setDefaultProperties(Collections.singletonMap("server.port", "8081"));
        app.run(args);
    }

}

SpringApplication의 setDefaultProperties를 사용하여 port를 변경할 수 있다

https://docs.spring.io/spring-boot/docs/current/api/org/springframework/boot/SpringApplication.html#setDefaultProperties(java.util.Map)

SpringApplication (Spring Boot 3.1.5 API)

setMainApplicationClass public void setMainApplicationClass(Class mainApplicationClass) Set a specific main application class that will be used as a log source and to obtain version information. By default the main application class will be deduced. Ca

docs.spring.io

이 외에도 포트 변경하는 방법 참고 블로그

https://hianna.tistory.com/806

[Spring Boot] 서버 포트 변경하기

application.properties 파일 수정하기 Command Line 옵션 추가하기 WebServerFactoryCustomizer 인터페이스 구현하기 SpringApplication의 setDefaultProperties 1. application.properties 파일 수정하기 server.port = 8081 2. Command Line

hianna.tistory.com

URL 파라미터 값 가져오기 (쿼리스트링 값)

토희 — Mon, 23 Oct 2023 15:04:14 +0900

URL 파라미터 값 가져오기

1. 전체 URL 가져오기

window.location.href

2. 특정 파라미터값 가져오기

roomId 값 가져오기( 아래 사진 및 URL 참고 )

const urlParams = new URL(location.href).searchParams;
const roomId = urlParams.get('roomId');

URL 이 위의 사진과 같을때,

콘솔에 전체 URL과 roomId 뒤의 값이 출력 된거를 확인 할 수 있다!

[html] div 태그와 span 태그의 차이!

토희 — Thu, 12 Oct 2023 13:46:34 +0900

Div vs Span

두 태그는 html 마크업을 하면 가장 많이 쓰이는 태그 일 것이다

둘 태그 다 레이아웃을 구성할때 영역을 설정할때 사용한다

차이점은 div => block 요소, span => inline 요소라는 거다

그러면 block과 inline의 차이는 뭘까?

block

- 새로운 줄에서 시작하고, 자동 줄 바꿈이 일어난다

- 가로, 세로(width, height) 를 지정 할 수 있고, margin, padding도 적용 가능하다

inline

- 새로운 줄에서 시작하지 않으며, 콘텐츠 영역 만컴의 크기를 차지한다

- 가로, 세로(width, height) 를 지정 할 수 없고, 상하 margin, 상하좌우 padding도 적용 불가하다

아래 코드를 보면은 이해가 갈 것이다
두 태그 style에 width랑 heigth를 적용해봤다, span은 width와 height가 적용되지 않고, 콘텐츠 영역만 크기를 차지했다
그리고 span 밑에 div를 넣으니, 자동 줄바꿈 된거를 확인 할 수 있다

끝!

파이어베이스 실시간 데이터베이스로 채팅 구현2 (코드)

토희 — Tue, 5 Sep 2023 16:04:07 +0900

구조는 이렇게 구성했다

1. 유저 생성 (user_list.html)

현재 프로젝트는 테스트용으로 만들었기 때문에 유저가 개념이 없어서, 페이지에서 유저를 생성해 준다

새 유저 생성 버튼을 클릭하면, 파이어베이스에 새로운 유저가 생성된다

// 새로운 사용자 생성
function createNewUser() {
    const userUID = self.crypto.randomUUID();
    // 새로운 사용자를 Firebase 데이터베이스에 저장
    dbRef.child(userUID).set({
        // 유저의 정보 넣기
        userName : "홍길동",
        userEmail :"test@naver.com"
    }).then(() => {
        // 데이터베이스에 사용자를 추가한 후 페이지 다시 로드
        window.location.reload();
    });
}

유저 생성 전,

유저 생성 후,

채팅은 나 포함 다른 한명 최소 2명이 필요하기 때문에, 유저를 한명 더 만들어 준다

헷갈릴 수 있으니, createNewUser() 실행전 userEmail과 userName 를 변경하여 만들어주었다

생성하고 나면은 유저 전체 리스트에 userUID가 추가된다

// 전체 유저 리스트 가져오기
function getAllUsers(callback) {
    const usersList = [];
    dbRef.once("value", snapshot => {
        snapshot.forEach(userSnapshot => {
            const userUID = userSnapshot.key;
            usersList.push(userUID);
        });
        // 전체 사용자 리스트를 가져온 후에 콜백 함수를 호출하여 전달
        callback(usersList);
    });
}

// getAllUsers에서 usersList 가져와서 동적으로 추가 & 본인 여부 체크 
// & 상대방과 이미 채팅방 있는지 체크(checkExistingChatRoom()) 해서 채팅방 페이지 이동

async function displayAllUsers(usersList) {
    const userListElement = document.getElementById("userList");
    userListElement.innerHTML = ""; // 기존 리스트 초기화

    usersList.forEach(userUID => {
        const li = document.createElement("li");
        li.innerText = `유저 : ${userUID}`;
        li.addEventListener("click", async () => {
            // 유저 클릭시 채팅방 만들기
            if (userUID === senderUID) {
                alert("본인에게는 채팅을 할수 없습니다.")
            } else {
                const chatRoomNumber = await checkExistingChatRoom(userUID, senderUID);
                if (chatRoomNumber != null) {
                    // 채팅방 있음
                    window.location.href = `chat1?chatRoomNumber=${chatRoomNumber}&userUID=${userUID}&senderUID=${senderUID}`;
                } else {
                    // 채팅방 없음
                    window.location.href = `chat1?userUID=${userUID}&senderUID=${senderUID}`;
                }
            }
        });
        userListElement.appendChild(li);
    });
}

// 채팅방이 이미 존재하는지 확인하는 함수
async function checkExistingChatRoom(userUID, currentUserUID) {
    const chatRoomsRef = firebase.database().ref("chats");
    const snapshot = await chatRoomsRef.once("value");
    const chatSnapshot = snapshot.val();

    for (const chatRoomNumber in chatSnapshot) {
        const participants = chatSnapshot[chatRoomNumber].participants;
        if (participants[userUID] && participants[currentUserUID]) {
            return chatRoomNumber;  // 이미 채팅방이 존재함
        }
    }
    return null; // 채팅방이 없음
}

나를 홍길동으로 가정한다고 하고, 유재석에게 채팅메세지를 보내보자

아까 만들어준 유저에서 홍길동의 UID를 넣어준다

현재에서는 로그인 개념이 없기 때문에 이렇게 하는거고, 로그인 가능한 프로젝트면 유저정보에서 채팅UID를 가져오면 된다

// 사용자 UID를 가져오는 가정
const senderUID = "0dad4e6f-add4-447f-aef0-a3a096be4e00"; // 회원의 UID

페이지 이동도 파라미터에 정보를 담아주었지만,

보안을 생각해서 안 보이는 방식으로 정보를 가지고 있다가 페이지 이동을 해도 될것 같다

홍길동의 UID (0dad4e6f-add4-447f-aef0-a3a096be4e00) 를 클릭할 경우, 이렇게 알림창이 뜨고

다른 유저의 UID를 클릭할 경우, 채팅 메세지 보낼수 있는 페이지로 이동한다

파라미터를 확인해보자

userUID : 다른 유저의 UID

senderUID : 본인의 UID ( 메세지 보내는 사람 )

userUID & sendeUID는 각각 마음대로 정하면 된다

2. 채팅 메세지 보내기 (chat1.html)

내용을 작성해 주세요! 인풋 박스에 내용을 입력하고 전송 버튼을 클릭하면 위의 사진처럼 메세지가 보내진다

메세지를 보내면 파이어베이스에서는 이렇게 저장된다

chats ( 채팅룸, chattingRoom 이렇게 구조화해도 된다 ) 밑에 참여하고 있는 유저 UID를 넣는다

그리고 messages에 채팅 UID 를 넣고 그 밑에 메세지 UID 생성 그 밑에 메세지 관련 정보를 넣어줬다

( 보내는 사람의 UID, 메세지, 시간, 상대방의 체크여부 등등을 넣으면 된다 )

// Firebase 실시간 데이터베이스 참조
const dbRef = firebase.database().ref("messages");
const chatsRef = firebase.database().ref("chats"); // 채팅방

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const senderUID = urlParams.get('senderUID'); // 본인 UID
const userUID = urlParams.get('userUID'); // 상대방 UID
let chatRoomNumber = urlParams.get('chatRoomNumber');
if(chatRoomNumber == undefined){
    chatRoomNumber = self.crypto.randomUUID();
}


// userUID 추가해서 메시지 보내기
function sendMessage() {
    const messageInput = document.getElementById("messageText");
    const message = messageInput.value;
    if (message.trim() !== "") {
        // 채팅방이 없으면 새로 만들어주기
        if(urlParams.get('chatRoomNumber') == undefined){
            createChatRoom(chatRoomNumber);
        }
        dbRef.child(chatRoomNumber).push().set({
            senderUID: senderUID,
            text: message,
            timestamp: firebase.database.ServerValue.TIMESTAMP,
            checked: false // 상대방이 읽음 여부, 처음에는 디폴트로 false로, 1:1채팅일 경우 이 구조 다대다 일경우는 구조 변경해야함
        });
        messageInput.value = "";
    }
}

function createChatRoom(chatRoomNumber) {
    // 임의의 채팅방 번호 생성
    const participants = {
        [senderUID]: true,
        [userUID] : true
        // 여러 사용자가 있다면 추가로 참여자를 넣어주기, 1:1 채팅이니까 지금은 2명이면 됨
    };

    // 채팅방 생성
    chatsRef.child(chatRoomNumber).set({ participants })
}

// 채팅방 메세지 수신
dbRef.child(chatRoomNumber).on("child_added", snapshot => {
    const message = snapshot.val();
    const messageDiv = document.createElement("div");
    // messageDiv.innerText = message.userName + message.text;
    messageDiv.innerText = message.text;

    if (message.senderUID === senderUID) {
        // 현재 사용자가 보낸 메시지의 경우 'my_message' 클래스 추가
        messageDiv.classList.add("my_message");
    } else {
        // 다른 사용자가 보낸 메시지의 경우 'other_message' 클래스 추가
        messageDiv.classList.add("other_message");
        // 상대방이 보낸 메세지 true 처리, 채팅방에 들어올 때도 true 처리하지만,
        // 채팅방 안에 있을때도 상대방 메세지 보내면 true 처리
        if (!message.checked) {
            const messageRef = dbRef.child(chatRoomNumber).child(snapshot.key);
            messageRef.update({ checked: true });
        }
    }

    document.getElementById("messageAppend").appendChild(messageDiv);
});

파라미터에서 채팅방 번호가 없으면 메세지 보낼때 새로 만들어 주고,

메세지에 대한 정보를 넣어서 저장해준다

3. 내 채팅방 리스트(user_chat_list.html)

// 사용자 UID를 가져오는 가정
const senderUID = "0dad4e6f-add4-447f-aef0-a3a096be4e00"; // 회원의 UID

위에서 미리 말한것 처럼 현재 프로젝트에 로그인 개념이 없기 때문에 senderUID에 내 UID를 넣어준다

아까 생성한 채팅방이 리스트로 나와있는거를 확인할 수 있다

 window.onload = () => {
    // getUserChatRooms 함수 호출 시 콜백 함수를 전달하여 데이터를 가져온 후에 displayUserChatRooms 함수 호출
    getUserChatRooms(displayUserChatRooms);
};

// 사용자의 채팅방 리스트 가져오기
function getUserChatRooms(callback) {
    const userChatRooms = [];
    dbRef.once("value", snapshot => {
        snapshot.forEach(chatSnapshot => {
            const chatRoomNumber = chatSnapshot.key;
            const participants = chatSnapshot.val().participants;
            if (participants[senderUID]) {
                userChatRooms.push(chatRoomNumber);
            }
        });
        // 채팅방 리스트를 가져온 후에 콜백 함수를 호출하여 전달
        callback(userChatRooms);
    });
}

// 채팅방 li에 추가
async function displayUserChatRooms(chatRooms) {
    const chatRoomList = document.getElementById("chatRoomList");

    for (const chatRoomNumber of chatRooms) {
        const li = document.createElement("li");
        const unreadCount = await countUnreadMessages(chatRoomNumber, senderUID);

        li.innerText = `채팅방: ${chatRoomNumber} (읽지 않은 메시지: ${unreadCount}개)`;
        li.addEventListener("click", async () => {
            // 클릭한 채팅방 번호를 chat.html로 전달하면서 페이지 이동
            await messageRead(chatRoomNumber, senderUID); // await를 사용하여 messageRead가 완료될 때까지 기다림
            window.location.href = `chat1?chatRoomNumber=${chatRoomNumber}&senderUID=${senderUID}`;
        });

        chatRoomList.appendChild(li);
    }
}

// 안 읽은 메세지 카운트
async function countUnreadMessages(chatRoomNumber, userUID) {
    const messagesRef = firebase.database().ref(`messages/${chatRoomNumber}`);

    let unreadCount = 0;

    // child_added 이벤트 리스너 추가
    messagesRef.on("child_added", snapshot => {
        const message = snapshot.val();
        if (message.senderUID !== userUID && !message.checked) {
            unreadCount++;
        }
        // 새 메시지가 추가될 때마다 unreadCount가 갱신됩니다.
        console.log(unreadCount);

        // 채팅방 리스트의 내용을 업데이트
        updateChatRoomList(chatRoomNumber, unreadCount);
    });

    // 최초에 메시지를 읽지 않은 메시지들을 카운트하여 반환합니다.
    return unreadCount;

}

// 메시지를 읽었을 때 호출되는 함수
async function messageRead(chatRoomNumber, userUID) {
    return new Promise((resolve, reject) => {
        const messagesRef = firebase.database().ref(`messages/${chatRoomNumber}`);
        messagesRef.once("value", snapshot => {
            snapshot.forEach(messageSnapshot => {
                const messageID = messageSnapshot.key;
                const message = messageSnapshot.val();
                if (message.senderUID !== userUID && !message.checked) {
                    const messageRef = messagesRef.child(messageID);
                    messageRef.update({ checked: true });
                }
            });
            resolve(); // 작업이 끝나면 resolve 호출
        });
    });
}

// 메세지가 추가되면 안 읽은 메시지 count 업데이트, 실시간으로 변동됨
function updateChatRoomList(chatRoomNumber, unreadCount) {
    const chatRoomList = document.getElementById("chatRoomList");
    const chatRoomItems = chatRoomList.getElementsByTagName("li");

    for (let i = 0; i < chatRoomItems.length; i++) {
        const item = chatRoomItems[i];
        if (item.innerText.includes(`채팅방: ${chatRoomNumber}`)) {
            // 채팅방 리스트에서 해당 채팅방을 찾아 업데이트
            item.innerText = `채팅방: ${chatRoomNumber} (읽지 않은 메시지: ${unreadCount}개)`;
            break; // 해당 채팅방을 찾았으면 루프 종료
        }
    }
}

위의 코드는

채팅방 리스트 불러오기,

채팅방에 읽지 않은 메세지 count,

채팅방 클릭시 상대방이 보낸 메세지 읽음 처리,

상대방이 메세지 보냈을경우,

읽지 않은 메세지 실시간 count 변경해주기

채팅방을 클릭하면, 아까 보낸 메세지가 보여지고

파라미터를 보면 이번에는 chatRoomNumber도 보여지는거를 확인할수 있다.

http://localhost:8080/chatting/chat1?chatRoomNumber=03b90872-38d3-4687-9f3b-fb0e3b112176&senderUID=0dad4e6f-add4-447f-aef0-a3a096be4e00

실시간으로 채팅이 되는지 확인하기 위해

senderUID=0dad4e6f-add4-447f-aef0-a3a096be4e00에

다른 사람의 UID를 넣어줘서 창을 2개 열어줄거이다

http://localhost:8080/chatting/chat1?chatRoomNumber=03b90872-38d3-4687-9f3b-fb0e3b112176&senderUID=1c862baa-b109-4218-af02-c8f39343920d

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

왼쪽 창은 senderUID = 0dad4e6f-add4-447f-aef0-a3a096be4e00

오른쪽은 senderUID = 1c862baa-b109-4218-af02-c8f39343920d 이다

메세지를 보내면 상대방 창에도 실시간 메세지가 날라온다

내가 보낸 메세지가 오른쪽에 있도록 ui를 표시했다

다시 메세지를 보내보고, 읽지 않은 메세지 카운트를 봐본다

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

메세지를 보내고 user_chat_list 페이지로 가면, 내가 읽지 않은 메세지 0개로 표시된다

채팅방에 있으면 상대방이 메세지를 보낼때, 바로 true 처리를 해준다

아래 영상은 내가 user_chat_list 페이지에 있고 상대방이 채팅을 보낼경우, 읽지 않은 메세지가 실시간 올라가는 거를 보여준다

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

채팅방을 들어갔다가 나오면은 읽지 않은 메세지 0개로 변경

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

위의 로직으로도 간단한 채팅은 구현할 수 있다

( 1:1 채팅일 경우 채팅방의 participants 아니면, 메세지 보내는 거를 막는다는가의 유효성은 추가해야할것 같다 )

++ 추가 기능을 애기해보자면

1) 새 채팅방 생성(user_chat_list)

 // 새로운 채팅방 생성
function createChatRoom() {
    // 임의의 채팅방 번호 생성
    const chatRoomNumber = self.crypto.randomUUID();
    const participants = {
        [senderUID]: true,
        // 여러 사용자가 있다면 추가로 참여자를 넣어주기
    };

    // 채팅방 생성
    dbRef.child(chatRoomNumber).set({ participants })
    // chatRoomList 비우고 새로 추가
    const chatRoomList = document.getElementById("chatRoomList");
    chatRoomList.innerHTML = "";
    getUserChatRooms(displayUserChatRooms);
}

2) 전체 채팅방 리스트 가져오기 (all_chat_list.html)

아까까지는 03b90872-38d3-4687-9f3b-fb0e3b112176 로 채팅을 구현했고,

새로 만들어진 ebd7b7e7-a60e-49fa-b2bb-5e85dd173b13 를 리스트로 가져왔다

ebd7b7e7-a60e-49fa-b2bb-5e85dd173b13 에서도 메세지를 보낼수 있지만,

다대다 채팅일 경우, 메세지 읽음 여부 checked는 구조를 변경해줘야 한다 (주의!)

이상 간단하게 파이어베이스의 실시간 데이터로 채팅을 구현하는 방법을 알아보았다

전체코드

user_list.html

<html lang="ko">
<head>
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>

    <script>
        const firebaseConfig = {
            apiKey: "",
            authDomain: "",
            databaseURL: "",
            projectId: "",
            storageBucket: "",
            messagingSenderId: "",
            appId: ""
        };

        firebase.initializeApp(firebaseConfig);
        // const app = initializeApp(firebaseConfig); // 이거는 9버전 문법

        // Firebase 실시간 데이터베이스 참조
        const dbRef = firebase.database().ref("users"); // 유저

        // 사용자 UID를 가져오는 가정
        const senderUID = "0dad4e6f-add4-447f-aef0-a3a096be4e00"; // 회원의 UID

        // 새로운 사용자 생성
        function createNewUser() {
            const userUID = self.crypto.randomUUID();
            // 새로운 사용자를 Firebase 데이터베이스에 저장
            dbRef.child(userUID).set({
                // 유저의 정보 넣기
                userName : "유재석",
                userEmail :"user@naver.com"
            }).then(() => {
                // 데이터베이스에 사용자를 추가한 후 페이지 다시 로드
                window.location.reload();
            });
        }

        // 전체 유저 리스트 가져오기
        function getAllUsers(callback) {
            const usersList = [];
            dbRef.once("value", snapshot => {
                snapshot.forEach(userSnapshot => {
                    const userUID = userSnapshot.key;
                    usersList.push(userUID);
                });
                // 전체 사용자 리스트를 가져온 후에 콜백 함수를 호출하여 전달
                callback(usersList);
            });
        }

        // 유저 리스트 가져와서 동적으로 추가
        async function displayAllUsers(usersList) {
            const userListElement = document.getElementById("userList");
            userListElement.innerHTML = ""; // 기존 리스트 초기화

            usersList.forEach(userUID => {
                const li = document.createElement("li");
                li.innerText = `유저 : ${userUID}`;
                li.addEventListener("click", async () => {
                    // 유저 클릭시 채팅방 만들기
                    if (userUID === senderUID) {
                        alert("본인에게는 채팅을 할수 없습니다.")
                    } else {
                        const chatRoomNumber = await checkExistingChatRoom(userUID, senderUID);
                        if (chatRoomNumber != null) {
                            // 채팅방 있음
                            window.location.href = `chat1?chatRoomNumber=${chatRoomNumber}&userUID=${userUID}&senderUID=${senderUID}`;
                        } else {
                            // 채팅방 없음
                            window.location.href = `chat1?userUID=${userUID}&senderUID=${senderUID}`;
                        }
                    }
                });
                userListElement.appendChild(li);
            });
        }

        // 채팅방이 이미 존재하는지 확인하는 함수
        async function checkExistingChatRoom(userUID, currentUserUID) {
            const chatRoomsRef = firebase.database().ref("chats");
            const snapshot = await chatRoomsRef.once("value");
            const chatSnapshot = snapshot.val();

            for (const chatRoomNumber in chatSnapshot) {
                const participants = chatSnapshot[chatRoomNumber].participants;
                if (participants[userUID] && participants[currentUserUID]) {
                    return chatRoomNumber;  // 이미 채팅방이 존재함
                }
            }
            return null; // 채팅방이 없음
        }


        window.onload = () => {
            // 전체 채팅방 리스트 가져오기
            getAllUsers(displayAllUsers);
        };


    </script>
    <style>
        #userList li {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button onclick="createNewUser()">새 유저 생성</button>

    <h2>유저 전체 리스트</h2>
    <ul id="userList">
        <!-- 여기에 유저 리스트를 동적으로 추가하는 JavaScript 코드 넣기 -->
    </ul>
</body>
</html>

chat1.html

<html lang="ko">
<head>
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>

    <script>
        const firebaseConfig = {
            apiKey: "",
            authDomain: "",
            databaseURL: "",
            projectId: "",
            storageBucket: "",
            messagingSenderId: "",
            appId: ""
        };

        firebase.initializeApp(firebaseConfig);
        // const app = initializeApp(firebaseConfig); // 이거는 9버전 문법

        // Firebase 실시간 데이터베이스 참조
        const dbRef = firebase.database().ref("messages");
        const chatsRef = firebase.database().ref("chats"); // 채팅방

        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);
        const senderUID = urlParams.get('senderUID'); // 본인 UID
        const userUID = urlParams.get('userUID'); // 상대방 UID
        let chatRoomNumber = urlParams.get('chatRoomNumber');
        if(chatRoomNumber == undefined){
            chatRoomNumber = self.crypto.randomUUID();
        }

        // userUID 추가해서 메시지 보내기
        function sendMessage() {
            const messageInput = document.getElementById("messageText");
            const message = messageInput.value;
            if (message.trim() !== "") {
                // 채팅방이 없으면 새로 만들어주기
                if(urlParams.get('chatRoomNumber') == undefined){
                    createChatRoom(chatRoomNumber);
                }
                dbRef.child(chatRoomNumber).push().set({
                    senderUID: senderUID,
                    text: message,
                    timestamp: firebase.database.ServerValue.TIMESTAMP,
                    checked: false // 상대방이 읽음 여부, 처음에는 디폴트로 false로, 1:1채팅일 경우 이 구조 다대다 일경우는 구조 변경해야함
                });
                messageInput.value = "";
            }
        }

        function createChatRoom(chatRoomNumber) {
            // 임의의 채팅방 번호 생성
            const participants = {
                [senderUID]: true,
                [userUID] : true
                // 여러 사용자가 있다면 추가로 참여자를 넣어주기, 1:1 채팅이니까 지금은 2명이면 됨
            };

            // 채팅방 생성
            chatsRef.child(chatRoomNumber).set({ participants })
            // TODO 채팅방 생기면 채탕방 리스트 가져오게 온로드 해야함
        }

        // 채팅방 메세지 수신
        dbRef.child(chatRoomNumber).on("child_added", snapshot => {
            const message = snapshot.val();
            const messageDiv = document.createElement("div");
            // messageDiv.innerText = message.userName + message.text;
            messageDiv.innerText = message.text;

            if (message.senderUID === senderUID) {
                // 현재 사용자가 보낸 메시지의 경우 'my_message' 클래스 추가
                messageDiv.classList.add("my_message");
            } else {
                // 다른 사용자가 보낸 메시지의 경우 'other_message' 클래스 추가
                messageDiv.classList.add("other_message");
                // 상대방이 보낸 메세지 true 처리, 채팅방에 들어올 때도 true 처리하지만,
                // 채팅방 안에 있을때도 상대방 메세지 보내면 true 처리
                if (!message.checked) {
                    const messageRef = dbRef.child(chatRoomNumber).child(snapshot.key);
                    messageRef.update({ checked: true });
                }
            }

            document.getElementById("messageAppend").appendChild(messageDiv);
        });

    </script>

    <style>
        .side_bar_wrap{
            display: flex;
            padding-top: 45px;
            padding-bottom: 206px;
        }
        .side_bar_wrap .side_bar{
            margin-left: 30px;
            flex: none;
            width: 270px;
        }
        .side_bar_wrap .side_bar .side_bar_con .top{
            background: #FFFDF3;
            border-radius: 5px;
            padding: 39px 21px;
            box-sizing: border-box;
            height: 550px;
        }
        .side_bar_wrap .side_bar .side_bar_con .top h1{
            text-align: center;
            font-size: 18px;
            font-weight: 500;
            position: relative;
        }
        .side_bar_wrap .side_bar .side_bar_con .top h1 i{
            position: absolute;
            top: -12px;
        }
        .side_bar_wrap .side_bar .side_bar_con .top h5{
            margin-top: 29px;
            text-align: center;
            font-size: 14px;
        }
        .side_bar_wrap .side_bar .side_bar_con .top a{
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            width: 80px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            background: #FFFFFF;
            border: 1px solid #FFB84D;
            border-radius: 5px;
            margin-top: 13px;
            margin-bottom: 34px;
        }
        .side_bar_wrap .side_bar .side_bar_con .top p{
            font-size: 12px;
            color:  #929292;
            line-height: 20px;
        }
        .side_bar_wrap .side_bar .side_bar_con.on .top{
            padding: 39px 0px;
        }
        .side_bar_wrap .side_bar .side_bar_con.on .top h1{
            text-align: left;
            padding-left: 23px;
        }

        .side_bar_wrap .side_bar .side_bar_con.on .top h1 i{
            position: unset;
            position: relative;
            top: 3px;
        }
        .side_bar_wrap .side_bar .side_bar_con.on .top .comment_box{
            font-size: 11px;
            overflow-y: scroll;
            height: 472px;
            margin-top: 15px;
        }
        .side_bar_wrap .side_bar .side_bar_con.on .top .comment_box .teacher{
            background: #fff;
            border: 1px solid #EBEBEB;
            border-radius: 5px;
            padding: 15px 14px;
            width: 240px;
            box-sizing: border-box;
            margin-left: 20px;
            position: relative;
        }
        .side_bar_wrap .side_bar .side_bar_con.on .top .comment_box > div:nth-child(n + 2){
            margin-top: 9px;
        }
        .side_bar_wrap .side_bar .side_bar_con.on .top .comment_box > div:last-child{
            margin-bottom: 30px;
        }
        .side_bar_wrap .side_bar .side_bar_con .bottom{
            position: relative;
            background: #FBFBFB;
            border: 1px solid #ECECEC;
            border-radius: 0px 0px 5px 5px;
            text-align: center;
            height: 130px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            padding: 0 20px;
        }
        .side_bar_wrap .side_bar .side_bar_con.on .bottom{
            background: #fff;
        }
        .side_bar_wrap .side_bar .bottom .tarsfer button{
            width: 50px;
            height: 25px;
            background: #F1F1F1;
            border-radius: 5px;
            position: absolute;
            right: 14px;
            bottom: 12px;
            font-size: 12px;
        }
        .side_bar_wrap .side_bar .bottom textarea{
            height: 67px;
            border: none;
            resize: none;
            position: relative;
            top: -13px;
            font-size: 12px;
            width: 100%;
        }
        .side_bar_wrap .side_bar .bottom textarea::placeholder{
            text-align: center;
            background: #fff;
            border: none;
        }

        #messageAppend .my_message {
            /* 내가 보낸 메시지의 스타일 지정 */
            background-color: #f5f5f5;
            border-radius: 8px;
            padding: 8px;
            text-align: right;
        }

        #messageAppend .other_message {
            /* 다른 사용자가 보낸 메시지의 스타일 지정 */
            background-color: #eaeaea;
            border-radius: 8px;
            padding: 8px;
            text-align: left;
        }
    </style>
</head>
<body>
    <div class="side_bar_wrap">
        <!-- sidebar -->
        <div class="side_bar">
            <div class="side_bar_con on">
                <div class="top ">
                    <h1>채팅<i><img src="/assets/images/i_comment.png" alt=""></i></h1>
                    <div class="comment_box scrollbar" id="messageAppend"></div>
                </div>
                <div class="bottom">
                <textarea class="scrollbar" name="" id="messageText" cols="30" rows="10" placeholder="내용을 작성해 주세요!"></textarea>
                    <div class="tarsfer">
                        <button type="button" onclick="sendMessage()">전송</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

user_chat_list.html

<html lang="ko">
<head>
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>

    <script>
        const firebaseConfig = {
            apiKey: "",
            authDomain: "",
            databaseURL: "",
            projectId: "",
            storageBucket: "",
            messagingSenderId: "",
            appId: ""
        };

        firebase.initializeApp(firebaseConfig);
        // const app = initializeApp(firebaseConfig); // 이거는 9버전 문법

        // Firebase 실시간 데이터베이스 참조
        const dbRef = firebase.database().ref("chats"); // 채팅방

        // 사용자 UID를 가져오는 가정
        const senderUID = "0dad4e6f-add4-447f-aef0-a3a096be4e00"; // 회원의 UID

        // 새로운 채팅방 생성
        function createChatRoom() {
            // 임의의 채팅방 번호 생성
            const chatRoomNumber = self.crypto.randomUUID();
            const participants = {
                [senderUID]: true,
                // 여러 사용자가 있다면 추가로 참여자를 넣어주기
            };

            // 채팅방 생성
            dbRef.child(chatRoomNumber).set({ participants })
            // chatRoomList 비우고 새로 추가
            const chatRoomList = document.getElementById("chatRoomList");
            chatRoomList.innerHTML = "";
            getUserChatRooms(displayUserChatRooms);
        }

        // 사용자의 채팅방 리스트 가져오기
        function getUserChatRooms(callback) {
            const userChatRooms = [];
            dbRef.once("value", snapshot => {
                snapshot.forEach(chatSnapshot => {
                    const chatRoomNumber = chatSnapshot.key;
                    const participants = chatSnapshot.val().participants;
                    if (participants[senderUID]) {
                        userChatRooms.push(chatRoomNumber);
                    }
                });
                // 채팅방 리스트를 가져온 후에 콜백 함수를 호출하여 전달
                callback(userChatRooms);
            });
        }

        // 채팅방 li에 추가
        async function displayUserChatRooms(chatRooms) {
            const chatRoomList = document.getElementById("chatRoomList");

            for (const chatRoomNumber of chatRooms) {
                const li = document.createElement("li");
                const unreadCount = await countUnreadMessages(chatRoomNumber, senderUID);

                li.innerText = `채팅방: ${chatRoomNumber} (읽지 않은 메시지: ${unreadCount}개)`;
                li.addEventListener("click", async () => {
                    // 클릭한 채팅방 번호를 chat.html로 전달하면서 페이지 이동
                    await messageRead(chatRoomNumber, senderUID); // await를 사용하여 messageRead가 완료될 때까지 기다림
                    window.location.href = `chat1?chatRoomNumber=${chatRoomNumber}&senderUID=${senderUID}`;
                });

                chatRoomList.appendChild(li);
            }
        }

        // 안 읽은 메세지 카운트
        async function countUnreadMessages(chatRoomNumber, userUID) {
            const messagesRef = firebase.database().ref(`messages/${chatRoomNumber}`);

            let unreadCount = 0;

            // child_added 이벤트 리스너 추가
            messagesRef.on("child_added", snapshot => {
                const message = snapshot.val();
                if (message.senderUID !== userUID && !message.checked) {
                    unreadCount++;
                }
                // 새 메시지가 추가될 때마다 unreadCount가 갱신됩니다.
                console.log(unreadCount);

                // 채팅방 리스트의 내용을 업데이트
                updateChatRoomList(chatRoomNumber, unreadCount);
            });

            // 최초에 메시지를 읽지 않은 메시지들을 카운트하여 반환합니다.
            return unreadCount;

        }

        // 메시지를 읽었을 때 호출되는 함수
        async function messageRead(chatRoomNumber, userUID) {
            return new Promise((resolve, reject) => {
                const messagesRef = firebase.database().ref(`messages/${chatRoomNumber}`);
                messagesRef.once("value", snapshot => {
                    snapshot.forEach(messageSnapshot => {
                        const messageID = messageSnapshot.key;
                        const message = messageSnapshot.val();
                        if (message.senderUID !== userUID && !message.checked) {
                            const messageRef = messagesRef.child(messageID);
                            messageRef.update({ checked: true });
                        }
                    });
                    resolve(); // 작업이 끝나면 resolve 호출
                });
            });
        }

        // 메세지가 추가되면 안 읽은 메시지 count 업데이트
        function updateChatRoomList(chatRoomNumber, unreadCount) {
            const chatRoomList = document.getElementById("chatRoomList");
            const chatRoomItems = chatRoomList.getElementsByTagName("li");

            for (let i = 0; i < chatRoomItems.length; i++) {
                const item = chatRoomItems[i];
                if (item.innerText.includes(`채팅방: ${chatRoomNumber}`)) {
                    // 채팅방 리스트에서 해당 채팅방을 찾아 업데이트
                    item.innerText = `채팅방: ${chatRoomNumber} (읽지 않은 메시지: ${unreadCount}개)`;
                    break; // 해당 채팅방을 찾았으면 루프 종료
                }
            }
        }

        window.onload = () => {
            // getUserChatRooms 함수 호출 시 콜백 함수를 전달하여 데이터를 가져온 후에 displayUserChatRooms 함수 호출
            getUserChatRooms(displayUserChatRooms);
        };


    </script>
    <style>
        #chatRoomList li {
            cursor: pointer;
        }
    </style>
</head>
<body class="notosanskr">
    <button onclick="createChatRoom()">새 채팅방 생성</button>

    <!-- 채팅방 리스트 표시 -->
    <h2>내 채팅방 리스트</h2>
    <ul id="chatRoomList">
        <!-- 채팅방 리스트를 동적으로 추가 -->
    </ul>

</body>
</html>

all_chat_list.html

<html lang="ko">
<head>
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>

    <script>
        const firebaseConfig = {
            apiKey: "",
            authDomain: "",
            databaseURL: "",
            projectId: "",
            storageBucket: "",
            messagingSenderId: "",
            appId: ""
        };

        firebase.initializeApp(firebaseConfig);
        // const app = initializeApp(firebaseConfig); // 이거는 9버전 문법

        // 사용자 UID를 가져오는 가정
        const senderUID = "0dad4e6f-add4-447f-aef0-a3a096be4e00"; // 회원의 UID

        // Firebase 실시간 데이터베이스 참조
        const dbRef = firebase.database().ref("chats"); // 채팅방

        // 전체 채팅방 리스트 가져오기
        function getAllChatRooms(callback) {
            const chatRooms = [];
            dbRef.once("value", snapshot => {
                snapshot.forEach(chatSnapshot => {
                    const chatRoomNumber = chatSnapshot.key;
                    chatRooms.push(chatRoomNumber);
                });
                // 전체 채팅방 리스트를 가져온 후에 콜백 함수를 호출하여 전달
                callback(chatRooms);
            });
        }

        // 전체 채팅방 리스트 가져와서 동적으로 추가
        function displayAllChatRooms(chatRooms) {
            const chatRoomList = document.getElementById("chatRoomAllList");
            chatRooms.forEach(chatRoomNumber => {
                const li = document.createElement("li");
                li.innerText = `채팅방: ${chatRoomNumber}`;
                // li 클릭 이벤트
                li.addEventListener("click", () => {
                    // const userUID = self.crypto.randomUUID(); // 회원의 uid가 기존에 있을때지만 지금은 random값으로 만들어줘
                    dbRef.child(chatRoomNumber).child("participants").child(senderUID).set(true);
                    window.location.href = `chat1?chatRoomNumber=${chatRoomNumber}&senderUID=${senderUID}`;

                });
                chatRoomList.appendChild(li);
            });
        }

        window.onload = () => {
            // 전체 채팅방 리스트 가져오기
            getAllChatRooms(displayAllChatRooms);
        };
        

    </script>
    <style>
        #chatRoomAllList li {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h2>채팅방 리스트</h2>
    <ul id="chatRoomAllList">
        <!-- 채팅방 리스트를 동적으로 추가 -->
    </ul>
</body>
</html>

끝!!!

MySQL 연동 시 Public key retrieval is not allowed 오류 해결

토희 — Tue, 5 Sep 2023 12:40:31 +0900

프로젝트를 빌드하니 해당 오류가 발생하였다

Public key retrieval is not allowed

[ 해결 방법 ]

application.properties DB 정보에서 url에 allowPublicKeyRetrieval=true&useSSL=false 를 추가한다

spring.datasource.url = jdbc:mysql://localhost:8080/DB명?useSSL=false&allowPublicKeyRetrieval=true&useUnicode=true&serverTimezone=Asia/Seoul

nohup: ignoring input and appending output to 'nohup.out'

토희 — Tue, 5 Sep 2023 12:34:29 +0900

jar 파일을 nohup 명령어로 실행시킬려고 하니, 갑자기 서버 구동이 안됬다

구동 후, nohup: ignoring input and appending output to 'nohup.out' 이렇게 뜨더니

8080로 실행되는거를 확인해도 내역이 없다

cat nohup.out 명령어로 오류내역을 확인할 수 있다!

나 같은 경우, Public key retrieval is not allowed 오류나 떠 있었다

해당 내역을 수정하고 다시 nohup java -jar [파일명].jar & 하니 정상 실행이 되었다!

+ Public key retrieval is not allowed 오류 해결법

https://makeaplayground.tistory.com/317

MySQL 연동 시 Public key retrieval is not allowed 오류 해결

프로젝트를 빌드하니 해당 오류가 발생하였다 Public key retrieval is not allowed [ 해결 방법 ] application.properties DB 정보에서 url에 allowPublicKeyRetrieval=true&useSSL=false 를 추가한다 spring.datasource.url = jdbc:mysql:

makeaplayground.tistory.com

파이어베이스 실시간 데이터베이스로 채팅 구현1 (설정, 셋팅)

토희 — Tue, 5 Sep 2023 10:24:46 +0900

채팅을 구현할 일이 있어서, 파이어베이스 실시간데이터를 활용하기로 했다

1. 파이어베이스 접속하여 프로젝트 생성

2. Realtime Database (실시간 데이터베이스) 설정

위와 같이 생성된다

3. 프로젝트 설정

웹으로 선택

이렇게 해주면은 설정은 다 끝났다!

firebaseConfig는 추후 js 파일에 넣어줄 예정

다음편

https://makeaplayground.tistory.com/318

파이어베이스 실시간 데이터베이스로 채팅 구현2 (코드)

구조는 이렇게 구성했다 1. 유저 생성 (user_list.html) 현재 프로젝트는 테스트용으로 만들었기 때문에 유저가 개념이 없어서, 페이지에서 유저를 생성해 준다 새 유저 생성 버튼을 클릭하면, 파이

makeaplayground.tistory.com

[ github ] submodule이란?

토희 — Fri, 1 Sep 2023 13:07:54 +0900

GitHub Submodule은 Git 프로젝트에서 다른 Git 프로젝트를 하위 디렉토리에 포함시키는 방법이다

Submodule을 사용하면 하나의 Git 저장소에서 여러 개의 프로젝트를 관리할 수 있으며, 각 프로젝트는 별도의 저장소로 유진된다

이를 통해 복잡한 프로젝트를 여러 저장소로 분할하여 개발, 관리, 배포를 용이하게 할 수 있다

이번에 개인 프로젝트를 진행하면, 포트폴리오를 위한 프로젝트니까 프로젝트를 Public으로 공개하기로 했다

그러면 노출되면 안되는 정보가 있는 application 파일은 어떻게 관리할까 고민하던 중에 submodule를 사용하기로 했다

보안상 노출이 안되는 키값이 있는 application.yml 파일을 관리하기에는 아래 3가지 방법이 있는것 같다

Jasypt를 사용하여 설정파일 암호화 → 라이브러리 설치해야해서 번거로움
Github Secret 사용 → application.yml 파일이 수정될 때마다 secret에 들어와서 Base64로 인코딩 된 application.yml 파일을 붙여 넣은 뒤 Github Actions를 실행해서 빌드해야 함. 번거로움
Github Submodule 사용 → 선택

1. 서브모듈 레파지토리 생성

Private 레포지토리 생성 후 application.yml을 넣는다

/src/main/resources 와 /src/test/resources 로 들어갈 설정 파일 2개를 이름을 다르게 지정하여 넣어줌

2. 메인 리포지토리에 서브모듈 추가

메인 리포지토리를 로컬로 clone 받고 서브모듈을 추가한다

git clone [메인 리포지토리 url]
git submodule add [서브모듈 리포지토리 url]

그러면 clone 받은 메인 리포지토리에 .gitmodules 파일이 생성된다

만약 메인 리포지토리의 default 브랜치명이 master가 아닐 시, .gitmodules 파일에 명시해줘야 한다

아래는 브랜치명이 main일 경우

[submodule "submodule-config"]
	path = submodule-config
	url = https://github.com/XXXXXX/submodule-config.git
	branch = main

3. application.yml이 수정되었을 경우

메인 레파지토리 경로에서 아래 명령어로 최신 서브모듈로 업데이트

// 프로젝트와 서브모듈 같이 clone 받는 명령어
git clone --recurse-submodules [프로젝트URL]
// 서브모듈만 clone 받는 명령어
git submodule update --init --recursive
// 서브모듈 최신상태 확인
git submodule status

// Submodule을 포함시키고자 하는 Git 저장소에 Submodule을 추가
git submodule add [repository-url] [path]
// 서브모듈 초기화
git submodule init
// 서브모듈 업데이트
git submodule update

4. build.gradle 추가

빌드 시 서브모듈의 파일을 복사해서 resources 경로에 넣으려면 build.gradle 아래와 같이 추가해준다

task copyGitSubmodule(type: Copy) {
	from './config'
	include '*.yml'
	into './src/main/resources'
}

위와 같이 하는것이 일반적이나,
main과 test 두개의 파일을 copy하면서 이름을 application.yml로 변경해주고 싶으므로 아래와 같이 설정해준다

task copyMainResources(type: Copy) {
	copy {
		from './submodule-config'
		include "application-main.yml"
		into './src/main/resources'
		rename { String fileName ->
			fileName.replace("application-main.yml", "application.yml")
		}
	}
}

task copyTestResources(type: Copy) {
	copy {
		from './submodule-config'
		include "application-test.yml"
		into './src/test/resources'
		rename { String fileName ->
			fileName.replace("application-test.yml", "application.yml")
		}
	}
}

5. .gitignore 파일에 application.yml 추가

src/main/resources/application.yml
src/test/resources/application.yml

6.PAT (GitHub Personal Access Token) 토큰 발급

서브모듈이 private이면 접근권한이 없을 때 clone받을 수 없다

Github에서 PAT (Personal Access Token) 발급 후 메인 리포지토리 토큰으로 설정해줘야 한다

Github 사용자 아이콘 클릭 → Settings → 왼쪽 아래 Developer settings → Personal access tokens → Tokens (classic) → Generate new token → (classic) 선택 → Expiration 30 days, repo만 체크하여 Generate token → 복사하기

7. 메인 리포지토리에 토큰 적용

메인 리포지토리 Settings → Secrets and variables → Actions → New repository secret → Name을 SUBMODULE_TOKEN 으로 설정 후 토큰 붙여넣기 → 생성

orElseThrow로 코드 가독성을 높이자

토희 — Wed, 30 Aug 2023 10:30:09 +0900

회사에서 프로젝트 진행시 Optional 객체의 유무를 판단하고 예외를 처리하기 위해 if문을 사용했다

그러다가 개인 스터디에서 다른 분들이 orElseThrow를 사용하는 거를 보고 코드의 가독성이 높다고 생각하게 되었다

아래 if문을 쓸 때와 orElseThrow 사용할 때 코드를 비교해 보면,

예시 코드

public class NoticeService {

   // if 사용
   public void remove(Long noticeId) {
	// select
   	Optional<NoticeResponse> noticeResponse = noticeMapper.findById(noticeId);                               
	// 예외처리
   	if(noticeResponse.isEmpty()){ throw new NoticeNotFoundException(); }
	  	
        if (noticeMapper.deleteById(noticeId) != 1) {
           throw new RemoveFailedException();
    }
}
    
    
    // orElseThrow
    public void remove(Long noticeId) {
    	// select & 예외처리 동시에
        NoticeResponse noticeResponse = noticeMapper.findById(noticeId)
                     .orElseThrow(NoticeNotFoundException::new);
        
        if (noticeMapper.deleteById(noticeId) != 1) {
            throw new RemoveFailedException();
        }
    }

    
}

orElseThrow 사용으로 select 와 예외처리를 동시에 하면서 if문보다 코드 한줄이 줄어든게 된다

한 메소드 안에서 예외처리 많다고 하면 그만큼 코드양이 줄어들고, 가독성이 높아질것이다!

[ github ] 원격 저장소 연결 및 끊기 (git remote)

토희 — Tue, 29 Aug 2023 13:10:25 +0900

git 에서 default_project를 clone 받은 후, 다른 레파지토리에 push 하려고 한다

연결되어 있는 git 을 어떻게 끊을까?

연결된 저장소 확인

git remote -v

터미널에서 git remote -v 를 입력하면

아래 연결된 저장소가 뜨는걸 확인 할 수 있다

연결된 저장소 끊기

git remote remove origin

git remote remove origin 후

git remote -v 하면은 연결된 저장소가 없는거를 확인 할 수 있다

저장소 연결

저장소 연결이 끊어진 프로젝트를 새로운 저장소에 연결할려면

우선 깃에서 레파지토리를 하나 만들고,

git remote add origin [저장소 url]

git remote add origin [저장소 url] 후 git remote -v 하면은 새로운 저장소가 연결된 걸 확인 할 수 있다

끝!

[aws] RDS timezone 변경하기

토희 — Mon, 28 Aug 2023 09:57:55 +0900

aws RDS 시간 변경 순서

파라미터 그룹 생성 -> 파라미터 그룹 설정 변경(timezone 변경) -> 해당 DB에 생성한 파라미터 그룹 설정

1. 파라미터 그룹 생성

우선 aws 접속 후 RDS 서비스로 이동한다

왼쪽 메뉴에서 파라미터 그룹에 들어간다

기본값 탭을 클릭하면 default 파라미터가 있는것을 확인할 수 있다

default 파라미터는 변경이 불가능하기 떄문에 파라미터 그룹에 새로 생성해 주어야 한다

기본값 옆에 사용자 지정 탭 클릭

파라미터를 생성한 적이 없다면 아래에 파라미터 그룹에 아무것도 안 뜰것이다

파라미터 그룹 생성 버튼을 눌러준다

파라미터 그룹 패밀리에는 본인이 사용하는 데이터베이스를 넣는다

혹시 사용하고 있는 데이터베이스를 모른다면

파라미터 그룹에서 기본값 -> default로 설정되어 있는 파라미터 클릭

파라미터 그룹 패밀리에 있는 값을 선택하면 된다 (mysql8.0)

그룹 이름은 DB Parameter Group 선택

이름과 설명을 timezone 로 해주고 생성!

2. 파라미터 그룹 설정 변경(timezone 변경)

생성한 파라미터 그룹을 클릭해서 들어간다

편집을 클릭한다

time_zone으로 검색한다

아래에 변경가능한 시간대가 나온다

Asia/Seoul로 적어주고, Save Changes 클릭하여 설정을 변경한다

3. 해당 DB에 생성한 파라미터 그룹 설정

왼쪽 메뉴 데이터베이스를 클릭한다

적용할 데이터베이스를 선택하고 수정을 누른다

추가 구성에서 DB 파라미터 그룹을 아까 생성한 파라미터 그룹으로 변경 후, 하단에 계속 버튼 클릭

즉시 적용 선택후 DB 인스턴스 수정을 클릭한다

잘 적용됬는지 확인할려면

인텔리제이 콘솔에서(RDS가 연결되어있다는 가정하에)

select now(); 해서 현재 시간을 확인하면 시간이 잘 뜨는 것을 확인할 수 있다

또 다른 방법으로는 데이터베이스 메뉴에서 DB 식별자 클릭

구성으로 들어가면

DB 인스턴스 파라미터 그룹에 아까 생성한 파라미터 그룹 옆에 ✔️동기화 중 이렇게 떠 있음 변경 완료된거다

혹시 파라미터 그룹 옆에 재부팅 보류 중 이렇게 뜬다면 수동으로 데이터베이스를 재부팅해줘야 한다

~~처음에 RDS랑 연결된 EC2를 재부팅 했었는데, 안되서 뭐지... 했는데, RDS 재부팅했어야 했다... 어쨌든~~

끝

mysql 외부 접속시 connection locked 현상 (Unblock with 'mysqladmin flush-hosts' 에러)

토희 — Thu, 24 Aug 2023 17:14:44 +0900

배포되어 있는 사이트에서 갑자기 로그인이 안됬다

로그를 보니 이렇게 나와있다

Host '' is blocked because of many connection errors; Unblock with 'mysqladmin flush-hosts'

mysql과 연결이 비정상적으로 끊어지면, 해당 횟수를 카운트하여 global max_connect_errors 에 지정된 값을 넘기면 자동 블럭킹처리 된다

해결방안

mysql에 접속

mysql - u root - p

max_connect_errors 카운트 확인

select @@global.max_connect_errors;

max_connections 카운트 확인

select @@global.max_connections;

에러 카운트 초기화

flush hosts;

max_connections 변경

set global max_connections=300;

max_connect_errors 변경

set global max_connect_errors=10000;

에러 카운트를 초기화하니 바로 로그인이 되었당!

참고 사이트

https://sd23w.tistory.com/414

vi 파일 맨 끝으로 이동

토희 — Thu, 24 Aug 2023 16:47:45 +0900

오류 파일 볼때 항상 까먹어서 기록

G (Shift + g) : 마지막 행으로 이동

slack으로 오류사항 받기 2 (slack api)

토희 — Mon, 14 Aug 2023 10:03:57 +0900

slack으로 오류사항 받기 1 (slack api) 에서 테스트 연동을 하고 이제 프로젝트에 적용해본다

controllerAdvice

@RestControllerAdvice
@RequiredArgsConstructor
public class ControllerAdvisor {

    private final SlackService slackService;

    @ExceptionHandler(Exception.class)
    public void SlackErrorMessage(Exception e){
        slackService.sendErrorForSlack(e);
    }
    
    @ExceptionHandler(PasswordEmailSendException.class)
    public ResponseEntity<ExceptionResponse> passwordEmailSendException(PasswordEmailSendException e) {
        int statusCode = e.getStatusCode();

        ExceptionResponse response = ExceptionResponse.builder()
                .code(String.valueOf(statusCode))
                .message(e.getMessage())
                .validation(e.getValidation())
                .build();

        return ResponseEntity.status(statusCode).body(response);
    }

 }

controller

@RestController
@RequiredArgsConstructor
public class SlackController {
    
    @GetMapping(value = "/error/v1")
    public String ErrorSlackClient1() {
        throw new ReadOnlyBufferException();
    }

    @GetMapping(value = "/error/v2")
    public String ErrorSlackClient2() {
        throw new PasswordEmailSendException();
    }

}

테스트를 위해 controller에서 핸들링 해준 에러(PasswordEmailSendException) 와 그렇지 않은 에러(ReadOnlyBufferException) 두 개를 작성해준다

Service

@Slf4j
@Service
@RequiredArgsConstructor
public class SlackService {

    @Value("${notification.slack.webhook.url}")
    private String slackWebhookUrl;

    private final HttpServletRequest request;

    public String sendErrorForSlack(Exception exception) {
        Slack slack = Slack.getInstance();
        WebhookResponse response;
        try {
            StringWriter writer = new StringWriter();
            exception.printStackTrace(new PrintWriter(writer));

            String emoji = "\u2620";
            String errorTime = LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
            String errorPath = request.getRequestURI().toString();
            String exceptionName = exception.getClass().toString();
            String exceptionRoot = exception.getStackTrace()[0].toString();
            String message = String.format("%s [%s] - [%s] - [%s] - [%s]", emoji, errorTime, errorPath, exceptionName, exceptionRoot);

            Payload payload = Payload.builder().text(message).build();
            response = slack.send(slackWebhookUrl, payload);
            return "Slack Sent = " + response.getCode();

        } catch (IOException e) {
        	// TODO 예외처리
            log.error("Error sending for slack", e);
        }
        return null;
    }

}

String message 부분에서는 커스텀 해서 마음대로 보내면 된다

나는 추척하가 쉽게 어느 부분에서 어떻난 에러가 났는지 메세지를 보낸다

스웨거 테스트

핸들링한 에러 발생시, 슬랙에는 아무것도 뜨지 않는다

핸들링 하지 않은 에러 발생시

슬랙에 위와 같은 알림 메세지가 뜬다!!

controllerAdvice를 위와 같이 작성하니

controller 단에서 httpStatus에서 설정을 하면 그 코드가 내려가는게 아니구 200코드로 내려가서

@ExceptionHandler(Exception.class)
public ResponseEntity<ExceptionResponse> SlackErrorMessage(Exception e){
    slackApi.sendErrorForSlack(e);

    ExceptionResponse response = ExceptionResponse.builder()
            .code(String.valueOf(500))
            .message(e.getMessage())
            .build();

    return ResponseEntity.status(500).body(response);
}

이렇게 바꿔줌

slack으로 오류사항 받기 1 (slack api)

토희 — Thu, 10 Aug 2023 16:10:52 +0900

코드에서 오류를 슬렉 알림으로 받고자, 프로젝트에 연결할려고 한당

1. slack 워크스페이스 개설

요 부분은 자세한 내용은 패스

2. 메세지를 받을 채널을 추가해준다

채널명 backend-error로 만들어줌 ( 마음대로 만들면 됨 )

3. slack api

https://api.slack.com/apps

Slack API: Applications | Slack

Your Apps Don't see an app you're looking for? Sign in to another workspace.

api.slack.com

Create an App 클릭

From scratch 선택해준다

App Name과 그 밑에 연결할 워크스페이스를 선택해준다

나는 App Name는 Error Service로 함

앱이 생성되면은 옆에 사이드쪽에 Incoming Webhooks 메뉴 클릭

Activate Incoming Webhooks 를 On으로 하고 밑에 하단을 보면

Add New Webhook to Workspace 선택

아까 만들어 둔 채널을 연결한다

허용을 누르면은 만들어진 웹훅 정보를 확인 할 수 있다

4. Spring 에서 Slack 연동

build.gradle

dependencies {
	// slack-api
	implementation 'com.slack.api:slack-api-client:1.27.2'
}

application.yml

notification:
  slack:
    webhook:
      url: https://hooks.slack.com/services/[웹훅]

SlackController.java

@RestController
@RequiredArgsConstructor
public class SlackController {

    @Value("${notification.slack.webhook.url}")
    private String slackWebhookUrl;


    @GetMapping(value = "/error-slack")
    public String ErrorSlack() throws IOException {
        Slack slack = Slack.getInstance();
        Payload payload = Payload.builder().text("오류입니다!").build();
        WebhookResponse response = slack.send(slackWebhookUrl, payload);
        return "Slack Sent = " + response.getCode();

    }
}

이렇게 적어두고, 연동 되는지 테스트를 하면

나는 스웨거가 프로젝트에 연동되어 있어 스웨거로 했다

이렇게 슬렉에 메세지 오는거 확인 가능하다 연동완료!

+ 오류 발생시 어떻게 메세지 보낼지 추가적인 것은 다음에 포스팅에~

다음편

https://makeaplayground.tistory.com/306

slack으로 오류사항 받기 2 (slack api)

slack으로 오류사항 받기 1 (slack api) 에서 테스트 연동을 하고 이제 프로젝트에 적용해본다 controllerAdvice @RestControllerAdvice @RequiredArgsConstructor public class ControllerAdvisor { private final SlackService slackService;

makeaplayground.tistory.com

참고 사이트

https://velog.io/@ekxk1234/Slack-Web-Hook%EC%9C%BC%EB%A1%9C-Spring-Boot-%EC%97%B0%EB%8F%99

Slack 도입부터 활용

먼저 slack에 로그인 한 뒤 워크스페이스를 만들어줍니다.만들어준 워크스페이스를 열어줍니다.채널 추가를 눌러서 채널을 만들어줍니다.저는 Slack Api Home Page에 들어가줍니다.create an app을 눌러

velog.io

https://blog.naver.com/PostView.naver?blogId=rlaalsdn456456&logNo=222636124804&categoryNo=0&parentCategoryNo=0&viewDate=&currentPage=1&postListTopCurrentPage=1&from=postView

[Java] Slack으로 특정 메세지 전송

요즘 회사에서 웹엑스에서 슬랙으로 변경되면서 생각보다 신세계를 경험하고 있다. 그 중 하나가 메세지 봇...

blog.naver.com

젠킨스 - 슬랙 연동

토희 — Tue, 8 Aug 2023 13:38:29 +0900

깃에 push 하면 젠킨스로 자동 빌드 되도록 CI/CD 구축해놨는데,

빌드 성공여부를 일일히 젠킨스에 접속하기는 확인하는건 귀찮고 해서 슬랙이랑 연동을 하기로 했다

1. 슬랙 워크스페이스 및 채널 생성

새 워크스페이스 개설 버튼 클릭

개설시 워크스페이스 이름은 마음대로 하면 된다, 물론 채널 이름도 마음대로 해도 되지만 젠킨스랑 연동하기 위해 만들었으니, jenkins로 해주었다

2. Jenkins CI 설치

다른 블로그 보는데 Jenkins CI를 어디서 설치해야하는지 못 찾아서 한참 찾음

jenkins 채널을 클릭하면은 사이드바 말고 오른쪽 영역 위에 채널 이름이 뜨는데

그거를 클릭하면은 밑의 창이 뜬다

통합 -> 앱

jenkins로 검색, Jenkins CI 설치해준다

설치 후 구성 클릭하고 Slack에 추가 클릭

아까 생성해둔 채널이름으로 선택하여 Jenkins CI통합 앱 추가

이후 Slack과 Jenkins 연동 가이드가 나옴 근디 지금의 Jenkins의 UI랑은 살짝 다르다

가이드에서 팀 하위 도메인과 통합 토큰 자격 증명 ID는 따로 복사해서 보관해둔다

셋팅 저장

3. 젠킨스 설정

Jenkins 관리 - 플러그인 관리

Slack Notification 플러그인을 설치한다

Jenkins 관리 - 시스템 설정 - Slack 부분으로 이동

Workspace에 아까 복사해둔 팀 하위 도메인을 입력해준다!

Credential 은 Add 클릭!

Default channel/ member id는 아까 생성해둔 채널이름을 넣어준다

Secret text로 선택하고

Secret 부분에 아까 복사해둔 통합 토큰 자격 증명 ID를 적어둔다

ID는 마음대로 적으면 됨

Credential 새로 만든 걸로 선택하고 Test Connection을 하면

Success가 뜨면 된다

슬랙으로 가서 확인해보면

이렇게 뜬다

그리고 아이템의 구성으로 이동

빌드 후 조치 추가에서 Slack Notifications 선택

다 체크하고 저장하면 된다

그리고 코드 변경해서 깃 푸시하면 자동 빌드되면서 슬랙에 알림이 온당

끝!

참고링크

https://dnight.tistory.com/entry/Jenkins-Slack-%EC%95%8C%EB%A6%BC-%EC%97%B0%EB%8F%99

https://gksdudrb922.tistory.com/237

젠킨스 타임존 변경

토희 — Mon, 1 May 2023 00:37:19 +0900

젠킨스에서 빌드를 하면 시간대가 9시간 뒤로 되어있다

타임존 변경하기

젠킨스 윗상단에 로그아웃 옆에 사용자이름 클릭 => 설정

맨 하단으로 이동

이렇게 변경해주면

배포시, 한국시간으로 잡힌다

끝!

스타르타코딩 SQL 강의 숙제 쿼리

토희 — Wed, 8 Feb 2023 20:38:12 +0900

그동안 숙제로 했던 코드들

SELECT * FROM point_users;


SELECT * FROM orders;

SELECT * FROM point_users pu INNER JOIN orders o on pu.user_id = o.user_id;

SELECT payment_method, round(AVG(point)) FROM point_users pu INNER JOIN orders o on pu.user_id = o.user_id
GROUP BY payment_method;

SELECT * from enrolleds;
SELECT * from users;

SELECT name, count(*)  as cnt from enrolleds e inner join users u on e.user_id = u.user_id
WHERE e.is_registered = 0
GROUP by name order by cnt desc;

SELECT * from courses;
SELECT * from enrolleds;

SELECT e.course_id, title, count(*) FROM courses c inner join enrolleds e on c.course_id = e.course_id
WHERE e.is_registered = 0 GROUP by e.course_id;


select e.enrolled_id, e.user_id, count(done=1) AS max_count from enrolleds e inner join enrolleds_detail ed on e.enrolled_id = ed.enrolled_id
where done =1 Group by enrolled_id order by count(done=1) DESC;

3월 sql 셤 홧팅!!!!

[Thymeleaf] 타임리프 문법 정리

토희 — Sun, 1 Jan 2023 21:55:24 +0900

타임리프는 스프링 부트에서 공식적으로 지원하는 View 템플릿이다

타임리프 장점

- 코드를 변경하지 않기 때문에 서버팀과 퍼블팀 간의 협업이 편해진다

- JSP와 달리 Servlet Code로 변환되지 않기 때문에 비즈니스 로직과 분리되어 오로지 View에 집중할 수 있다

- 서버상에서 동작하지 않아도 되기 때문에, 서버 동작 없이 화면을 확인할 수 있다, 더미 데이터를 넣고 화면 디자인 및 테스트에 용이하다. (서버가 구동하지 않는 경우 정적 컨텐츠)

타임리프 적용방법

메이븐

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

그래들

build.gradle

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

application.properties

# Thymeleaf 사용
spring.thymeleaf.enabled=true
# cache 사용 /사용 시 컴파일한 파일만 사용 (개발 시 미사용)
spring.thymeleaf.cache=false
# 템플릿 위치 / View 파일 위치
spring.thymeleaf.prefix=classpath:templates/
# View 파일 기본 확장자 / Controller에서 확장자를 입력하지 않아도 된다.
spring.thymeleaf.suffix=.html

타임리프 문법

@Controller
public class mainController {

    @GetMapping("/user")
    public String mypage(Model model) {
        model.addAttribute("data", "Hello <b>Spring</b>!");
        return "user/mypage";
    }
}

⭐️ th:text="${}"

<div>
    <h1 th:text="${data}"></h1>
</div>

- 일반 텍스트를 반환할 때 사용한다

- HTML 태그도 String 값으로 반환한다 => 출력: Hello Spring

- JSP의 EL 표현식인 ${}와 마찬가지로 ${} 표현식을 사용해서 컨트롤러에서 전달받은 데이터에 접근할 수 있다

⭐️ th:utext="${}"

<div>
    <h1 th:utext="${data}"></h1>
</div>

- th:text와 동일하게 텍스트를 반환하지만, HTML 태그를 사용 가능하게 해준다

=> 출력: Hello <b>Spring<b>

⭐️th:src="${}"

 <img class="img" th:src="${dataList.IMG_URL}">

- 이미지 src 사용시

⭐️th:href="@{}", th:href="||"

<body>
  <a th:hrf="@{/mypage}"></a> // 파라미터 없는 경우
  <a th:hrf="@{/mypage?userNum={num}}"></a> // 파라미터 넘길경우
  <a href="@{/user/profile(param=${param})}"></a> // 파라미터 넘길경우
  <a href="@{user/product/{param1}(param2=A, param3=B)}"></a> // 파라미터 여러개 넘길경우
  <a th:href="|/mypage?userNum=${num}|"><</a> // 이것도 가능
</body>

- <a> 태그의 href 속성과 동일하다

- 괄호안에 클릭시 이동하고자하는 url를 넣는다

⭐️th:value="${}"

<input type="text" id="userId" th:value="${userId} + '의 이름은 ${userName}"/>

- input의 value에 값을 삽입할 때 사용한다

- 여러개의 값을 넣을땐 + 기호를 사용한다

⭐️th:style="${}"

<div class="img"  th:style="'background-image:url('+ ${dataList.IMG_URL} +');'"></div>
<input th:style="${'width:500px'}" type="text" />

- 스타일 적용시

- background에서 url 적용시 위에 같이 하면 된다

⭐️th:if="${}", th:unless="${}"

<a href="/product" th:if="${session.userAuth == '1'}">상품등록</a>
<a href="/product" th:unless="${session.userAuth == '2'}">상품등록</a>

- 조건문에 해당하는 속성이다. 각각 if와 else를 뜻한다

- th:unless는 일반적인 언어의 else 문과는 달리 th:if에 들어가는 조건과 동일한 조건을 지정해야 한다

⭐️th:block, th:each="변수 : ${list}"

<!-- th:block 미사용 -->
<div th:each="user : ${userList}">
	<span th:text="user.username}">username</span>
    <span th:text="user.age}">age</span>
</div>

<div th:each="user : ${userList}">
	<span th:text="${user.username} + ' & ' + ${user.age}">username&age</span>
</div>

<!-- th:block 사용 -->

<th:block th:each="user : ${userList}">
    <div>
        <span th:text="user.username}">username</span>
        <span th:text="user.age}">age</span>
    </div>
    <div>
        <span th:text="${user.username} + ' & ' + ${user.age}">username&age</span>
    </div>	
</th:block>

- th:block은 가상 태그를 만드는 데 사용한다 사용이 끝나면 문서에서 가상 블록은 사라지게 된다. 주로 조건문, 반복문에 많이 사용된다

⭐️th:classappend="${}"

<buttonth:classappend="${i == pageNum} ? 'on'"></button>

- 클래스를 동적으로 추가해준다

⭐️th:switch, th:case

<th:block th:switch="${userNum}"> 
  <span th:case="1">권한1</span> 
  <span th:case="2">권한2</span> 
</th:block>

- switch-case문과 동일하다

- switch case문으로 제어할 태그를 th:block으로 설정하고 그 안에 코드를 작성한다

⭐️th:

<div th:seq="${i.SEQ}"></div>

- 태그의 임의 속성 추가시 앞에 th만 붙여주면 된다. ex) th:seq, th:num 등등

와우 이런 기능도 있어

⭐️ 숫자 천만단위에 콤마 찍기!!!

<td th:text="${#numbers.formatInteger(i.PRICE, 0, 'COMMA')}"></td>

참고

https://velog.io/@alicesykim95/Thymeleaf

Spring Thymeleaf 기본 문법

타임리프(Thymeleaf)는 View Templete Engine으로 JSP, Freemarkerd와 같이 서버에서 클라이언트에게 응답할 브라우저 화면을 만들어주는 역할을 한다. 타임리프의 주 목표는 템플릿을 만들 때 유지관리가 쉽

velog.io

[Spring Boot] SQL 로그 설정 (Log4jdbc) Gradle 적용시키기

토희 — Sun, 25 Dec 2022 14:28:30 +0900

Log4jdbc Log4j를 JDBC와 연결하여 사용하기 위해 만들어진 오픈소스 프로젝트이다

Log4jdbc는 예전 버전이고 Log4j2와 Slf4j와 연동되는 버전이 나왔다

Log4jdbc-log4j2 적용법

1. 의존성 주입

- build.gradle에 Log4jdbc 의존성을 추가한다

나는 밑에 처럼 추가했고

dependencies {
    implementation group: 'org.bgee.log4jdbc-log4j2', name: 'log4jdbc-log4j2-jdbc4.1', version: '1.16'
}

구글링 하면은 아래와 같이 많이 나옴

dependencies {
	implementation 'org.bgee.log4jdbc-log4j2:log4jdbc-log4j2-jdbc4.1:1.16'
}

둘중 하나를 추가하면 된다!!

2. log4jdbc.log4j2.properties 생성

- resources폴더 안에 log4jdbc.log4j2.properties 생성하고

log4jdbc.spylogdelegator.name=net.sf.log4jdbc.log.slf4j.Slf4jSpyLogDelegator
log4jdbc.dump.sql.maxlinelength=0

위의 코드 추가

3. DB 설정 수정

resources폴더 안에 application.properties에 DB설정을 수정해준다

spring.datasource.driver-class-name=net.sf.log4jdbc.sql.jdbcapi.DriverSpy

spring.datasource.url = jdbc:log4jdbc:mysql://{URL:port}/{Schema}?useSSL=false&useUnicode=true&serverTimezone=Asia/Seoul
spring.datasource.username ={ID}
spring.datasource.password ={PW}

driver-class-name 추가해주고,

기존에는 ur이 jdbc:mysql~~ 이렇게 되어있었을텐데, log4jdbc를 추가해준다

그리고 application.properties 안에 출력할 정보에 대한 설정을 해준다

나는 아래와 같이 설정해줬음

# ========== log4jdbc  ==========

# jdbc.sqlonly - SQL문을 보여줌
# jdbc.sqltiming - SQL문과 SQL문 수행하는 시간을 같이 보여줌
# jdbc.resultsettable - SQL 의 결과로 조회된 데이터를 table 형태로 로그를 보여줌
# jdbc.audit - ResultSet 을 제외한 모든 JDBC 호출 정보를 로그로 보여줌, 상당히 많은 양의 로그가 나오기 때문에 권장하지 않음.
# jdbc.resultset - ResultSet 을 포함한 모든 JDBC 호출 정보를 로그로 보여줌, audit 처럼 많은 로그가 나오기 때문에 권장하지 않음.
# jdbc.connection - DB 연결, 연결 해제와 관련된 로그를 보여줌

# off - 사용하지 않음
# info - 정보성 로그
# warn - 경고성 로그
# error - 에러 로그
# fatal - 심각한 문제 로그

logging.level.jdbc.sqlonly=off
logging.level.jdbc.sqltiming=info
logging.level.jdbc.resultsettable=info
logging.level.jdbc.audit=off
logging.level.jdbc.resultset=off
logging.level.jdbc.connection=off

# ================================

그리고 서버 구동면 아래같이 DB에 대한 로그가 찍힌다

내가 설정한대로 sqltiming과 resultsettable에 대한 정보가 뜬다

혹시 아래와 같이 오류가 나면

loading class `com.mysql.jdbc.driver'. this is deprecated. the new driver class is `com.mysql.cj.jdbc.driver'. the driver is automatically registered via the spi and manual loading of the driver class is generally unnecessary

https://velog.io/@hae111/ERRORLoading-class-com.mysql.jdbc.Driver.-This-is-deprecated.-The-new-driver-class-is-com.mysql.cj.jdbc.Driver

[ERROR]Loading class 'com.mysql.jdbc.Driver'. This is deprecated. The new driver class is 'com.mysql.cj.jdbc.Driver'.

Loading class 'com.mysql.jdbc.Driver'. This is deprecated. The new driver class is 'com.mysql.cj.jdbc.Driver'. logback 실행하다가 만난 오류 LogBack 장점 Log4j를 만든 개발자 Ceki Gülcü가 Log4j를 기반으로 더 빠른 속도와 더 적

velog.io

요거 참고해서 log4jdbc.log4j2.properties를 아래와 같이 변경해준다

log4jdbc.spylogdelegator.name=net.sf.log4jdbc.log.slf4j.Slf4jSpyLogDelegator
log4jdbc.dump.sql.maxlinelength=0
log4jdbc.drivers=com.mysql.cj.jdbc.Driver
log4jdbc.auto.load.popular.drivers=false

Spring 카카오 로그인 REST API

토희 — Sun, 2 Oct 2022 21:21:12 +0900

구현 전 체크사항 ✔️

☑️ 카카오 로그인 REST API은 단지 사용자 정보(닉네임, 이메일 등)를 제공하는 API이다. 실제 로그인이 되는건 아님!!!!!
☑️ 실제 자동 로그인되고 하는건, 카카오싱크라고 따로 있는것 같다. 카카오싱크는 사업자로 등록되어 있는 사람만 신청할수있음
☑️ 우리는 받은 사용자 정보를 토대로 로그인을 시키거나 회원가입을 시키거나 하는건 따로 구현해줘야한다.
☑️ https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api 에서 설정해줘야 하는 부분이 몇 군데 있다
1. REST API 키 발급
2. Redirect URI 등록
3. 동의 항목 체크 (나는 닉네임, 카카오계정(이메일))만 체크했다.

☑️ login.jsp => kakaoController(컨트롤러) => IKakaoLoginService(인터페이스) => KakaoLoginService(서비스) 이렇게 구성함,

폴더명은 자유롭게 하면 된다!

☑️ 구글링을 하다 보면, 다른 블로그들은 카카오에서 받은 데이터를 Gson 라이브러리를 사용하여, JSON을 파싱 하는데,
ex) JsonParser parser = new JsonParser();
JsonElement element = parser.parse(result);
나는 이미 프로젝트에서 Jackson 라이브러리를 사용하고 있기 때문에, JSON string의 데이터를 map으로 변환해서 사용하였다.

pom.xml에 추가해주면 된다!

Jackson 라이브러리 사용법 참고하기

https://4urdev.tistory.com/92

Jackson 라이브러리를 이용한 JSON String, Map 간 변환 (How to convert JSON String to Map and Map to JSON String)

일반적으로는 Spring 을 이용한 서버 통신이든, 그렇지 않은 경우에도 마찬가지고 String 으로 된 JSON 을 변경하는 경우가 좋은 상황은 아닙니다. 하지만 경우에 따라서 부득이하게 Plain Text 형태로

4urdev.tistory.com

흐름 이해✔️

1. 카카오에 코드 요청

2. 받은 코드로 access_token 요청

3. 받은 access_token으로 사용자 정보 요청

Start

1. login.jsp에 카카오 로그인 만들기

화면

코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>로그인 페이지</title>
</head>
<style>
.wrap {
   width: 490px;
   padding: 40px 20px 20px 20px;
   background-color: #f5f6f7;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   border-radius: 30px;
   box-sizing: border-box;
}

.title {
   margin: 0 auto;
    width: 240px;
    height: 44px;
    text-align: center;
    font-size: 25px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 240px auto;
    margin-bottom: 20px;
}
.kakao{
   margin-top: 15px;
   height: 60px;
   border: solid 1px #FEE500;
   background: #FEE500;
   color: #3c1d1e;
   font-size: 18px; 
   box-sizing: border-box;
   border-radius: 5px;
   cursor: pointer;
   width: 450px;
   display: flex;
}
.kakao_i{
   background: url(resources/icons/kakao.png) no-repeat;
   width: 40px;
   height: 100%;
   background-size: 90%;
   background-position: 50%;
   margin: 0 20px;
}
.kakao_txt{
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 16px;
   padding-right: 60px;
}

a {
   text-decoration: none;
}

</style>

<body>
<div class="wrap">
   <div class="title">로그인</div>
     <a class="kakao" href="https://kauth.kakao.com/oauth/authorize?client_id=REST_API키&redirect_uri=REDIRECT_URI&response_type=code">
     	<!-- REST_API키 및 REDIRECT_URI는 본인걸로 수정하세요 -->
        
      	<div class="kakao_i"></div>
      	<div class="kakao_txt">카카오톡으로 간편로그인 </div>
   	</a>
</div>
</body>
</html>

스타일 적인 부분은 제외에도 무관하다

a 태그에 href만 본인꺼에 맞춰서 잘 쓰면 된다

2. Controller에 code를 받을 메서드 만들기

kakaoController

package com.gdj51.MyTodo.web.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;


@Controller
public class kakaoController {

	// 1번 카카오톡에 사용자 코드 받기(jsp의 a태그 href에 경로 있음)
	@RequestMapping(value = "/kakaoLogin", method = RequestMethod.GET)
	public ModelAndView kakaoLogin(@RequestParam(value = "code", required = false) String code) throws Throwable {

		// 1번
		System.out.println("code:" + code);
		return null;	
		// return에 페이지를 해도 되고, 여기서는 코드가 넘어오는지만 확인할거기 때문에 따로 return 값을 두지는 않았음

	}
}

패키지 부분 제외!

controller를 위에처럼 작성하고, 화면에서 카카오톡으로 간편로그인 버튼을 누르면, Console창에 코드가 넘어온다

코드 실제로는 길다( 여기서는 개인정보를 위해, 짧게만 캡쳐해서 올림 )
이 코드로 다시 카카오에 access_token 요청!

3. code를 보내 access_Token 얻기

IKakaoLoginService

package com.gdj51.MyTodo.web.service;

public interface IKakaoLoginService {

	String getAccessToken(String authorize_code) throws Throwable;

}

kakaoLoginService

package com.gdj51.MyTodo.web.service;

import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.HashMap;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.gdj51.MyTodo.web.dao.IACDao;

@Service
public class kakaoLoginService implements IKakaoLoginService {

	@Autowired
	public IACDao dao;

	@Override
	public String getAccessToken(String authorize_code) throws Exception {
		String access_Token = "";
		String refresh_Token = "";
		String reqURL = "https://kauth.kakao.com/oauth/token";

		try {
			URL url = new URL(reqURL);

			HttpURLConnection conn = (HttpURLConnection) url.openConnection();
			// POST 요청을 위해 기본값이 false인 setDoOutput을 true로

			conn.setRequestMethod("POST");
			conn.setDoOutput(true);
			// POST 요청에 필요로 요구하는 파라미터 스트림을 통해 전송

			BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(conn.getOutputStream()));
			StringBuilder sb = new StringBuilder();
			sb.append("grant_type=authorization_code");

			sb.append("&client_id="); // REST_API키 본인이 발급받은 key 넣어주기
			sb.append("&redirect_uri="); // REDIRECT_URI 본인이 설정한 주소 넣어주기

			sb.append("&code=" + authorize_code);
			bw.write(sb.toString());
			bw.flush();

			// 결과 코드가 200이라면 성공
			int responseCode = conn.getResponseCode();
			System.out.println("responseCode : " + responseCode);

			// 요청을 통해 얻은 JSON타입의 Response 메세지 읽어오기
			BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));
			String line = "";
			String result = "";

			while ((line = br.readLine()) != null) {
				result += line;
			}
			System.out.println("response body : " + result);

			// jackson objectmapper 객체 생성
			ObjectMapper objectMapper = new ObjectMapper();
			// JSON String -> Map
			Map<String, Object> jsonMap = objectMapper.readValue(result, new TypeReference<Map<String, Object>>() {
			});

			access_Token = jsonMap.get("access_token").toString();
			refresh_Token = jsonMap.get("refresh_token").toString();

			System.out.println("access_token : " + access_Token);
			System.out.println("refresh_token : " + refresh_Token);

			br.close();
			bw.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return access_Token;
	}

}

통신에 성공하면, responseCode가 200이다

// 결과 예시, 아래와 똑같은 값이 나오는 것이 아님, 아래와 같은 형식으로 나온다

code:aMdPlRwRL1kbLSPMIUh7N5PQ75Jv2dDDb_48v0tTKpa5M_VTB0fGdcULdUjImgRnIWu61Qo9dRoAAAGDmIFc0Q
responseCode : 200
response body : {"access_token":"Ha_l8ANFn-AeeUIxXis639TVelckCDvfgXkzIOw4Cil1KQBBBYOYgV7P","token_type":"bearer","refresh_token":"GDhmj0jIhq3LXeJu39n5O4JD2kXPYpL9qwsWHsx7BCil1KQBBBYOYgV69","id_token":"eyJraWQiOiI5ZjI1MmRhZGQ1ZjIzM2Y5M2QyZmE1MjhkMTJmZWEiHXJ0eXAiOiJKV1QiLCJhbGcjOjJSUzI1NiJ9.eyJhdWQiOiI3NjQwNiYzODNhMTZmMDVkZGU0ZTRmSEHwNmNmZGM5ZiIsInN2YiI1IjI0Mzk1NjAdODkiLCJhdXRoe3RpbWUiOjE2NjQ3MTA5NTgsImlzcyP6Pmh0dHBzOi8va2F1dGgua2FrYW8uY29tIiwibmlja25hbWUiOiLrsJXshLjtnawiLCJleHAiOjE2NjQ3MzI1NTgsImlhdCI6MTY2NDcxMDk1OCwiZW1haWwiOiJzYWVfaHdpQG5hdmVyLmNvbSJ9.Z5HWk82a4tu6O8on1e9DNF92Kyo6qVyQdXpraWUloUZeTpItHV3ShkP9PlM8-iu0k3FZr4TYiomfMf9XRIEfgU1X6NrxAHnD-7N5xD_qzFSQJ1L_eawUG4GZyq6OQGGRre68mAhVfT1A0xHkvbMe18IcUFi7HBLIeWQNII4R7ihKC7SBmpiKp6KAr1f00I6ItJutbLTB836CywLWfCZAwU8k93WnCR-kMl_QfjlKSpFFQATKrjzaKptCnpyJAAcriyLl3RIOFcwZoh9eXCgUTMmA7KNZfGxUsw7wdXqTSwQp-nQtEQxvEUM78MabCmuw7sX-py6jwjp55Jap-U8Wng","expires_in":21599,"scope":"account_email openid profile_nickname","refresh_token_expires_in":5183999}
access_token : Ha_l8ANFn-AeeUIxXis639TVelckCDvfgXkzIOw4Cil1KQBBBYOYgV7P
refresh_token : GDhmj0jIhq3LXeJu39n5O4JD2kXPYpL9qwsWHsx7BCil1KQBBBYOYgV69
###access_Token#### : Ha_l8ANFn-AeeUIxXis639TVelckCDvfgXkzIOw4Cil1KQBBBYOYgV7P

4. access_Token을 보내 사용자 정보 얻기

kakaoController

package com.gdj51.MyTodo.web.controller;

import java.util.HashMap;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import com.gdj51.MyTodo.web.service.IKakaoLoginService;


@Controller
public class kakaoController {
	
	@Autowired
	public IKakaoLoginService iKakaoS;

	// 1번 카카오톡에 사용자 코드 받기(jsp의 a태그 href에 경로 있음)
	// 2번 받은 code를 iKakaoS.getAccessToken로 보냄 ###access_Token###로 찍어서 잘 나오면은 다음단계진행
	// 3번 받은 access_Token를 iKakaoS.getUserInfo로 보냄 userInfo받아옴, userInfo에 nickname, email정보가 담겨있음
	@RequestMapping(value = "/kakaoLogin", method = RequestMethod.GET)
	public ModelAndView kakaoLogin(@RequestParam(value = "code", required = false) String code) throws Throwable {

		// 1번
		System.out.println("code:" + code);
		
		// 2번
		String access_Token = iKakaoS.getAccessToken(code);
		System.out.println("###access_Token#### : " + access_Token);
		// 위의 access_Token 받는 걸 확인한 후에 밑에 진행
		
		// 3번
		HashMap<String, Object> userInfo = iKakaoS.getUserInfo(access_Token);
		System.out.println("###nickname#### : " + userInfo.get("nickname"));
		System.out.println("###email#### : " + userInfo.get("email"));
		
		
		return null;	
		// return에 페이지를 해도 되고, 여기서는 코드가 넘어오는지만 확인할거기 때문에 따로 return 값을 두지는 않았음

	}
}

IKakaoLoginService

package com.gdj51.MyTodo.web.service;

import java.util.HashMap;

public interface IKakaoLoginService {

	String getAccessToken(String authorize_code) throws Throwable;

	public HashMap<String, Object> getUserInfo(String access_Token) throws Throwable;
}

kakaoLoginService

위의 코드에 getUserInfo 메서드 추가

@SuppressWarnings("unchecked")
	@Override
	public HashMap<String, Object> getUserInfo(String access_Token) throws Throwable {
		// 요청하는 클라이언트마다 가진 정보가 다를 수 있기에 HashMap타입으로 선언
		HashMap<String, Object> userInfo = new HashMap<String, Object>();
		String reqURL = "https://kapi.kakao.com/v2/user/me";

		try {
			URL url = new URL(reqURL);
			HttpURLConnection conn = (HttpURLConnection) url.openConnection();
			conn.setRequestMethod("GET");

			// 요청에 필요한 Header에 포함될 내용
			conn.setRequestProperty("Authorization", "Bearer " + access_Token);

			int responseCode = conn.getResponseCode();
			System.out.println("responseCode : " + responseCode);

			BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));

			String line = "";
			String result = "";

			while ((line = br.readLine()) != null) {
				result += line;
			}
			System.out.println("response body : " + result);
			System.out.println("result type" + result.getClass().getName()); // java.lang.String

			try {
				// jackson objectmapper 객체 생성
				ObjectMapper objectMapper = new ObjectMapper();
				// JSON String -> Map
				Map<String, Object> jsonMap = objectMapper.readValue(result, new TypeReference<Map<String, Object>>() {
				});

				System.out.println(jsonMap.get("properties"));

				Map<String, Object> properties = (Map<String, Object>) jsonMap.get("properties");
				Map<String, Object> kakao_account = (Map<String, Object>) jsonMap.get("kakao_account");

				// System.out.println(properties.get("nickname"));
				// System.out.println(kakao_account.get("email"));

				String nickname = properties.get("nickname").toString();
				String email = kakao_account.get("email").toString();

				userInfo.put("nickname", nickname);
				userInfo.put("email", email);

			} catch (Exception e) {
				e.printStackTrace();
			}

		} catch (IOException e) {
			e.printStackTrace();
		}
		return userInfo;
	}

실행을 하면 콘솔에 아래와 같은 형식으로 나옴!

responseCode : 200
response body : {"id":8799560342,"connected_at":"2022-09-22T04:48:41Z","properties":{"nickname":"홍길동"},"kakao_account":{"profile_nickname_needs_agreement":false,"profile":{"nickname":"홍길동"},"has_email":true,"email_needs_agreement":false,"is_email_valid":true,"is_email_verified":true,"email":"gildong@naver.com"}}
result typejava.lang.String
{nickname=홍길동}
###nickname#### : 홍길동
###email#### : gildong@naver.com

위에 사용자 정보를 얻어와서 로그인을 시켜주거나, 회원가입을 시켜주거나 하는건 자체구현해야한다!!!

나는 가져온 사용자정보의 이메일과 DB의 멤버테이블에 있는 이메일 정보가 일치하면 자동 로그인 되게하고,

일치하지 않으면 가입할건지 로그아웃 할건지 묻는 페이지로 이동하게 해줬다~

국비 TIL(Today I Learned) 20220929(목) 카테고리별(문화생활) 카카오맵에 마커 찍기

토희 — Thu, 29 Sep 2022 17:26:43 +0900

진행사항✔️

오늘은 우리 DB에 있는 데이터로 맵에 뿌려주는 작업을했다

카테고리는 문화생활, 주유소, 영화관, 음식점이 있음

주차장은 기본 디폴트(다른분이 작업함)

우리는 기본적으로 구와 동을 선택해야 그 안에 있는 주차장, 주유소 등등을 마커 해주기 때문에

1. 구와 동이 선택이 안됬을경우에는 막았고,

2. 구, 동 선택 후 문화생활 클릭시 지도에 마커 (왼쪽 리스트에는 주차장이 기본으로 뜬다, 우리는 주차장 프로젝트니까~~)

파란색 마커가 문화생활이다, 노란색 마커는 주차장

핀 클릭시 팝업 생성되고 정보가 보인다, 즐겨찾기랑 공유하기, 최단거리비교는 해야함

리스트 불러오는 ajax

전체 코드

	// 문화생활 카테고리 지도에 마커
		$("#culture").on("click", function(){
			$(this).addClass('on');
			$(this).siblings().removeClass('on');
			
			var params = $("#actionForm").serialize();
			$.ajax({
				url : "cultureAjax",
				type : "POST",
				dataType: "json",
				data: params,
				success : function(res){
					// 구, 동 선택 안될시 팝업
					if($("#sido1").val() == "전체" || $("#gugun1").val() == "동" || $("#gugun1").val() == "전체" ){
						makePopup({
					         title : "알림",
					         contents : "구 또는 동을 선택해주세요",
					         buttons : [{
					            name : "확인",
					         }]
						});
					} else {
						cultureList(res.list);
					}
						
				},
				error : function(request, status, error) { 
					console.log(request.responseText); 
				}
			})
	
		});

 
// 문화생활 카테고리 지도에 마커 function
function cultureList(list){
	
	 var positions = new Array();
	 var points = new Array();
	 
	 for(var data of list) {
		 positions.push({
			title: data.CUL_LIFE,
			phone: data.PHONE,
			address: data.ADDRESS,
			homepage: data.HOMEPAGE,
			latlng:new kakao.maps.LatLng(data.LOCX, data.LOCY)
		 });
		 
		 points.push(new kakao.maps.LatLng(data.LOCX, data.LOCY));
	 }

		// 마커 이미지의 이미지 주소입니다
		// 없으면 기본 마커, 파란색
		// var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png"; 
			    
		for (var i = 0; i < positions.length; i ++) {
	      	    
		    // 마커 이미지의 이미지 크기 입니다
		    //var imageSize = new kakao.maps.Size(24, 35); 
		    
		    // 마커 이미지를 생성합니다    
		    //var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); 
		    
		    // 마커를 생성합니다
		    var marker = new kakao.maps.Marker({
		        map: map, // 마커를 표시할 지도
		        position: positions[i].latlng, // 마커를 표시할 위치
		        title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
		       // image : markerImage // 마커 이미지 
		        clickable: true // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다, 마커 클릭시 팝업창 뜨게 추가
		    });
			    
		    var iwContent = "<div class=\"bg\"><div class=\"title\">" + positions[i].title +"</div>";
		    	iwContent += "<div class=\"phone\">" + positions[i].phone +"</div>";
		    	iwContent += "<div class=\"address\">" + positions[i].address +"</div>";
		    	iwContent += "<div class=\"buttonBox\">";
		    	iwContent += "<div class=\"bookmarkBox\">";
		    	iwContent += "<img src=\"resources/icons/bookmark.png\" id=\"boomarkBtn\" class=\"boomarkBtn\">";
		    	iwContent += "</div>";
		    	iwContent += "<div class=\"shareBox\">";
		    	iwContent += "<img src=\"resources/icons/share.png\" id=\"shareBtn\" class=\"shareBtn\">";
		    	iwContent += "</div>";
		    	iwContent += "<div class=\"compareBox\">";
		    	iwContent += "<button class=\"compareBoxBtn\">최단거리비교</button>";
		    	iwContent += "</div>"
		    	iwContent += "</div>"
		    	iwContent += "</div>", // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
		    	iwRemoveable = true; 
		    
		    
		 // 인포윈도우를 생성합니다
			var infowindow = new kakao.maps.InfoWindow({
				content : iwContent,
			    removable : iwRemoveable
			
			});  
		 
		 // 마커에 이벤트를 등록하는 함수 만들고 즉시 호출하여 클로저를 만듭니다
	     // 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
	     (function(marker, infowindow) {
	    	 // 마커에 클릭이벤트를 등록합니다
			 kakao.maps.event.addListener(marker, 'click', function() {
				 	// 다른 마커를 클릭했을때, 이전 팝업창 닫힘
				  $("img[alt='close']").click();
			       // 마커 위에 인포윈도우를 표시합니다
			       infowindow.open(map, marker);  
			 });

	     })(marker, infowindow);		 
	
		}

		// 지도를 재설정할 범위정보를 가지고 있을 LatLngBounds 객체를 생성합니다
		var bounds = new kakao.maps.LatLngBounds();    

		var i, marker;
		for (i = 0; i < points.length; i++) {
		    // 배열의 좌표들이 잘 보이게 마커를 지도에 추가합니다
		     
		    // LatLngBounds 객체에 좌표를 추가합니다
		    bounds.extend(points[i]);
		}
		
		map.setBounds(bounds);

 	}

리스트 불러오는 쿼리

https://apis.map.kakao.com/web/sample/addMapClickEvent/

https://apis.map.kakao.com/web/sample/multipleMarkerEvent/

두개를 가져서 합쳤다, 클릭 이벤트랑, 마커에 여러개 이벤트 주기

국비 TIL(Today I Learned) 20220926(월)~20220928(수)

토희 — Thu, 29 Sep 2022 16:41:16 +0900

9/26(월)

- 주말에 했던 스와이퍼 슬라이드 오류 해결

어제 헤더 슬라이드 부분을 하고나서, 게시판 화면에서는 Detail로 안 넘어가는 오류가 있었는데, 한참 찾았는데 못 찾고

강사님께 물어보니 id가 중복되서......

id도 name처럼 똑같이 해야한다고 생각했다

id 다르게 하고 (번호에 대한), name은 쿼리 통할거니 똑같이!!!!

- 카카오톡 로그아웃을 마무리하고

9/27(화)

- 주차장의 이용 통계를 구하기 위해

공공테이터를 테이블에 넣고, highcharts 의 사용법 좀 보고

https://www.highcharts.com/demo

Highcharts | Highcharts.com

www.highcharts.com

9/28(수)

- 이제 통계를 만들예정

짜짠

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

요일별로 데이터가 바뀐다

그리고 처음 디테일 화면에 들어가면은, 오늘 기준 요일로 리로드 됨

배열 선언은 맨위에

ajax로 db가져와서 배열에 데이터 넣어줌

- 지도에 카테고리별로 띄우기

이건은 카카오API 가지고오니 바로 됬지만,

이건 테스트로 해본거구

우리는 우리 DB에 있는데이터를 가지고, 할 예정 (9/29일 예정)

국비 TIL(Today I Learned) 20220927(화) 디버깅, 배포

토희 — Tue, 27 Sep 2022 14:41:08 +0900

배포: 실 운영 서버에 서비스를 등록하는 행위

지금까지는 가상 서버에 올렸다고 치면은, 배포는 톰캣 서버에

배포형식

- 파일 배포

: war(Web Application Resource)

: ear(Enterprise Application Resource) - 딱 하나 => EJB => Weblogic (Weblogic쓰는 업체가 국내가 손꼽음)

=> war + jar

- 경로 배포:

시스템 변수에 JAVA_HOME이 있으면 삭제하기

c드라이브 안에

톰캣 자체로 돌리다 보니 이 경로가 필요해

톰캣을 실행할 준비는 다 됬음

Export source files => 소스 파일을 같이 내보낼건지, 순수하게 자바파일, 배포할때는 소스파일 체크 X, 보완문제도 있고

Overwrite existing file => 내보내기 했는데, 똑같은 파일 또 있음 그러면 덮어쓰움

둘다 체크 안 하는게 좋음!

바탕화면에 생김

배포파일은 만들었다

어떻게 배포할건인가?

8005를 8015로 변경

8080 => 8090으로 변경

bin 폴더에서 startup windows 배치파일 실행

로그인하면 이렇게 뜸

배치할 WAR파일에

아까 export했던 WAR파일을 선택해줌

배치를 누르면

애플리케이션에 목록이 뜸

세션 만료 시간 이런거를 지정할수있음

/TestWeb 클릭해서

url에 파일 경로 입력해주면, http://localhost:8090/TestWeb/html/Test01.html

위의 처럼 뜸

위에 폴더에 들어있음

디버그!

디버그 모드

차근차근 살펴보고 싶어

그 줄을 더블클릭하면은 동그라미가 생김

중단점, 브레이크 포인트라고 함

여기를 기준으로 일시정지 하겠다

브레이크 포인트가 있다 -> 여기서 멈추겠다

아무것도 안 나옴

이클립스가면

내용 자세히 볼수있음

다음으로 가고싶다하면은

step into 하나씩 타고 들어가겠다(F5) - 권장 X 하나하나 다 봄

step over 다음줄로 넘어가겠다(F6)

F8 그냥 쭉 넘어가겠다

초록색 > 화살표

체크 풀면은 지금은 이 브레이크 포인트 안 쓰겠다!

아직은 찍어본다 생각하고

디거킹 브레이크 포인트 활용해서 확인

위에 X누르면은 삭제되고

개발자 도구에서 줄 찍으면은 옆에 중단점(브레이크 포인트)가 생김

디버깅 : 프로그램이 흘려가는 순서를 따라가면 쓸수있는 거를...확인??

당장 권장 X 어느정도 익숙해지고 해보래

[JSP/JSTL] EL태그 replace로 *주기

토희 — Mon, 19 Sep 2022 22:43:37 +0900

학원 프로젝트를 하면서 id, pw 찾는 부분을 지금 하고있는데,

id 정보 뿌려줄때 뒤에 3글자 * 로 만들기

jsp 안에 추가

<%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c" %>

<%@ taglib uri = "http://java.sun.com/jsp/jstl/functions" prefix = "fn" %>

html 내

<c:out value="${fn:substring(문자열, 0, fn:length(문자열) - 3)}" /> ***

여기서 data.ID는 쿼리 통해서 가지고 온 데이터임

data.ID 대신 문자열을 쓰면 된다.

그러면 아래 화면 처럼!

++ el태그에도 replace나 substring이랑 다 있었다...

이외에 functions 에서 사용할 수 있는 함수들

contains
startsWith, endsWith
escapeXml
indexOf
split, join
length
replace
substring
toLowerCase, toUpperCase
trim

참고:

https://limeeyojung.tistory.com/16

[JSP/JSTL] EL식에서 문자열 치환하기, 자르기, 붙이기

[JSP/JSTL] EL식에서 문자열 치환하기, 자르기, 붙이기 개인정보(생년월일, 전화번호, 아이디, 이름 등) 표시할 때 일부 문자열을 * 표시로 치환해야 하는 경우 JSp에서 처리하는 방법으로 JSTL의 funct

limeeyojung.tistory.com

정처기 실기 스터디 오답문제

토희 — Tue, 13 Sep 2022 20:26:58 +0900

(내가 낸 문제)
1. 일의 순서를 계획적으로 정리하기 위한 수렴기법으로 비관치, 중간치, 낙관치의 3점 추정방식을 통해 일정을 관리하는 기법

2. 기업의 내부환경과 외부환경을 분석하고, 강점, 약점, 기회, 위협요인을 규정하고 이를 토대로 경영전략을 수립하는 방법

3. 릴레이션 A, B가 있을때 릴레이션 B조건에 맞는 것들만 릴레이션 A에서 튜플을 꺼내 프로젝션하는 관계대수 기호는?

4. EAl구축유형 4가지

1. PERT
2. SWOT분석
3. ÷ 디비전
4. 포인트 투 포인트, 허브 앤 스포크, 메세지버스, 하이브리드

(민경이가 낸 문제)
1. 데이터 스트림을 생성하고 처리하는 시스템에서 사용가능한패턴

2. 이해 관계자들과의 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 UI 화면 설계 방식은 무엇인지 쓰시오

3. 이상 현상의 종류 3가지를 쓰시오.

4. 공유메모리, 소켓, 세마포어, 메시지 큐 등 프로세스간 통신하는 기술을 무엇이라고 하는지 쓰시오.

내가 쓴 답

1. 옵저버 (찍음)

2. 인터뷰...... (찍음)

3. 삽입, 삭제, 갱신

4. IPC

정답

1. 파이프-필터
2. 와이어프레임
3. 삽입이상, 삭제이상, 갱신이상
4. IPC

UI 화면 설계 구분

와스프(수제비 2-21)

- 와이어프레임 : 화면 단위의 레이아웃 설계

- 스토리보드 : 와이어프레임 + 설명(서비스 구축을 위한 모든 정보가 다겨 있는 설계 산출물)

- 프로토타입 : 와이어프레임(or 스토리보드) + 동적 효과 적용, 실제 구현된것처럼 시물리이션 할 수 있는 모형

(슬기가 낸 문제)
1. 4+1뷰 중 다음 설명에 해당하는 뷰가 무엇인지 쓰시오
'컴포넌트가 물리적인 아키텍처에 어떻게 배치되는가를 매핑해서 보여주는 뷰'

2. 다음에서 설명하는 UI설계원칙을 쓰시오
'사용자의 요구사항을 최대한 수용하며 오류를 최소화해야한다.'

3. 다음에서 설명하는 데이터 모델링의 기법을 쓰시오.
'관계형 데이터 모델에서 데이터의 중복성을 제거하여 이상 현상을 방지하고, 데이터의 일관성과 정확성을
유지하기 위해 무손실 분해하는 과정이다'

4. '그룹 내는 허브 앤 스포크 방식을 사용하고, 그룹 간에는 메시지 버스 방식을 사용하는 통합방식'을 가진
EAI구축 유형을 쓰시오.

내가 쓴 답

1. 배치 (축약어로 외운 폐해다) 유논프구배, 근데 어떤데서는 배치라고도 하네

2. 유효성 (축약어로 외운 폐해다) 직유학유

3. 무결성

4. 하이브리드

정답

1. 배포뷰
2. 유연성
3. 정규화
4. 하이브리드

UI 설계 원칙

직유학유(수제비 p 2-4)

1. 직관성 : 누구나 쉽게 이해하고 쉽게 사용

2. 유효성: 사용자 목표가 달성될 수 있어야 함

3. 학습성: 쉽게 배울 수 있다

4. 유연성: 인터렉션을 최대한 포용, 실수 방지할수 있도록 제작

(유경이 문제)

1. 컬렉션 구현 방법을 노출시키지 않으면서도 그 집합체 안에 들어있는 모든 항목에 접근할 방법을 제공하는 디자인 패턴이며, 내부구조를 노출하지 않고 복잡 객체의 원소를 순차적으로 접근 가능하게 해주는 행위 패턴?

2. 커뮤니케에션 다이어그램 구성요소 중, 시스템으로부터 서비스를 요청하는 외부 요소?

3. 데이터베이스 정규화 단계 중, 5정규형의 조건?

4. HTTP, HTTPS, SMTP 등을 사용하여 XML 기반의 메시지를 네트워크 상태에서 교환하는 프로토콜?

내가 쓴 답

1. Iterator

2. 액터

3. 조건(이것도 축약어로 외우느.. 폐해) 원부이 다결죠

4. SOAP

정답

1. Iterator

2. Actor

3. 조인 종속 제거

4. SOAP

국비 TIL(Today I Learned) 20220902 시험

토희 — Fri, 2 Sep 2022 17:51:42 +0900

시험문제

테이블

시퀀스

내가 만든 화면

list화면

update화면

insert화면24번 새로 넣음

delect

번호 24번 없앰

pshacc.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">

.all_table{
	font-size: 14px;
	height: 200px;
}
.wrap{ 
	width: 800px; 
	margin: 0 auto;
}
.mtb{
	margin: 5px;
}
.login{
	vertical-align: baseline;
}
.con{
	width: calc(100% - 22px); 
	height: 20px; 
	border: 1px solid #d7d7d7; 
	resize: none; 

}

.update{
	display: none;
}
.con_td{
	font-size: 0
}
.paging_area{
	display: block; 
	position: relative; 
	left: 0;
	margin-bottom: 10px;
}
.search_area{
	text-align: center;
}
body {
	overflow: auto;
}

#accType, #dt{
	min-width: 100px;
    height: 30px;
    vertical-align: middle;
    border: 1px solid #d7d7d7;
}
#price {
	width: 150px;
    height: 28px;
    padding: 0px 2px;
    text-indent: 5px;
    vertical-align: middle;
    border: 1px solid #d7d7d7;
    outline-color: #70adf9;
}
#info {
	width: 300px;
    height: 28px;
    padding: 0px 2px;
    text-indent: 5px;
    vertical-align: middle;
    border: 1px solid #d7d7d7;
    outline-color: #70adf9;
}
</style>
<script type="text/javascript" 
		src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
src="resources/script/common/popup.js"></script>
<!-- Slimscroll -->
<!-- <script type="text/javascript" src="resources/script/jquery/jquery.slimscroll.js"></script> -->
<script type="text/javascript">
$(document).ready(function () {

	
	reloadList();
	

	$("#insertBtn").on("click", function () {
		if($("#price").val() == ""){
			makeAlert("알림","금액을 입력하세요." , function () {
				$("#price").focus();
			});
		}else if($("#price").val()*1 < 0){ 
			makeAlert("알림","금액을 0 이상이여야 합니다." , function () {
				$("#price").focus();
			});
		} 
		else if($("#dt").val() == ""){ 
			makeAlert("알림","날짜를 입력하세요." , function () {
				$("#dt").focus();
			});
		} 
		
		else if($.trim($("#info").val()) == ""){
				makeAlert("알림","내용을 입력하세요." , function () {
					$("#info").focus();
				});
	 		}	else {
	 				action("insert");
			}
	
		})
		
	// 페이징 클릭시
	$(".paging_area").on("click", "span", function () {
		$("#page").val($(this).attr("page"));

		reloadList();
	})	
		

	
	// 목록의 삭제버튼 클릭시
	$("tbody").on("click", ".delete_btn", function () {
		var no = $(this).parent().parent().attr("no");
		
		  makePopup({
		         title : "알림",
		         contents : "삭제하시겠습니까?",
		         // draggable : true,
		         buttons : [{
		            name : "삭제",
		            func:function() {
		            	$("#no").val(no);
		            	action("delete");
		            	closePopup(); // 제일 위의 팝업 닫기
		            }
		         }, {
		            name : "취소"
		    }]
		})
	})
	
	// 목록 수정버튼 클릭시
	$("tbody").on("click", ".update_btn", function () {
		var no = $(this).parent().parent().attr("no");
		$("#no").val(no);
		
		
		
		if ($(this).parent().parent().children().eq(2).html() == '지출'){
			var accType = "0";
		} else {
			accType = "1"
		}
		
		$("#accType").val(accType);
		var price = $(this).parent().parent().children().eq(1).html();
		$("#price").val(price);
		//eq(인덱스번호) : 자식들 중 인덱스 몇번째 인지 찾아서 취득
		var info = $(this).parent().parent().children().eq(3).html();
		// 수정 내용 넣기 전 <> 변화
		info = info.replace(/&lt;/gi, "<");
		info = info.replace(/&gt;/gi, ">");
		
		
		$("#info").val(info);
		var dt = $(this).parent().parent().children().eq(4).html();
		$("#dt").val(dt);
		
		
		// 등록버튼 감추기 + 수정, 취소버튼 나타나기
		$(".insert").hide();
		$(".update").show();
		
		// 작성영역에 포커스
		$("#info").focus();
	})
	
	// 수정 영역의 취소버튼
	$("thead #cancelBtn").on("click", function () {
		// 입력내용 초기화
		$("#no").val("");
		$("#accType").val("0");
		$("#info").val("");
		$("#price").val("")
		$("#dt").val("")
		// 등록버튼 나타나기 + 수정, 취소버튼 감추기
		$(".insert").show();
		$(".update").hide();
	})
	
	// 수정 영역의 수정버튼
	$("thead #updateBtn").on("click", function () {
		action("update");
	})
	
})


var msg ={
	"insert" : "등록",
	"update" : "수정",
	"delete" : "삭제",
}

function action(flag) {
	// con의 <를을 웹문자로 변환
	$("#info").val($("#info").val().replace(/</gi, "&lt;"));
	// con의 >를을 웹문자로 변환
	$("#info").val($("#info").val().replace(/>/gi, "&gt;"));
	
	
	// Javascript object에서의 [] : 해당 키값으로 내용을 불러오거나 넣을 수있다. 
	// Java의 Map에서 get, put역활

	console.log(msg[flag]);

	
	var params = $("#actionForm").serialize();
	
	$.ajax({
		url : "ACCAction/" + flag,
		type : "POST", 
		dataType: "json", 
		data: params, 
		success : function(res) {
			console.log(res);
		
			
			switch(res.msg){
			case "success" :
				// 내용 초기화
				$("#info").val("");
				$("#no").val("");
				$("#price").val("");
				$("#dt").val("");
				$("#accType").val("0");


				// 목록 재조회
				switch(flag){
				case "insert" :
				case "delete" :
					// 조회 데이터 초기화
					$("#page").val("1");

					break;
				case "update" :

					// 입력내용 초기화
					$("#no").val("");
					$("#info").val("");
					// 등록버튼 나타나기 + 수정, 취소버튼 감추기
					$(".insert").show();
					$(".update").hide();
					break;

				}
				reloadList();
				break;
			case "fail" :
				makeAlert("알림" ,  msg[flag] + "에 실패하였습니다.");
				break;
			case "error" :
				makeAlert("알림" , msg[flag] + " 중 문제가 발생하였습니다.");
				break;
			}
		},
		error : function(request, status, error) { 
			console.log(request.responseText); 
		}
	}); //Ajax End
} // action Function End

function reloadList() {
	var params = $("#searchForm").serialize();
	$.ajax({
		url : "ACCList",
		type : "POST", 
		dataType: "json", 
		data: params, 
		success : function(res) { 
			drawList(res.list);
			drawPaging(res.pd);
			drawTotal(res.sumlist);
			
		},
		error : function(request, status, error) { 
			console.log(request.responseText); 
		}
	}); //Ajax End
}

function drawList(list,sumlist) {
	
	var html = "";
	
	for(var data of list){
		html +="<tr no=\"" + data.NO  + "\">"; // 번호
		html +="<td>" + data.NO + "</td>"; //번호
		html +="<td>" + data.PRICE + "</td>"; //금액
		html +="<td>" + data.ACC_TYPE + "</td>"; //지출/수입
		html +="<td>" + data.INFO + "</td>"; //내역
		html +="<td>" + data.DT + "</td>"; //일자
		html +="<td>";
		//if("${sMemNo}" == data.MEM_NO){ // 작성자이면
			html +="<div class=\"cmn_btn_ml mtb update_btn\">수정</div><br/>";
			html +="<div class=\"cmn_btn_ml mtb delete_btn\">삭제</div>";
		//}
		html +="</td>";
		html +="</tr>";
	}
	
	$(".list tbody").html(html);
}

function drawTotal(sumlist) {
	
	
	var html = "";
	
	console.log(sumlist)
		html +="<tr>";
		html +="<td>" + sumlist.지출 + "</td>";
		html +="<td>" + sumlist.수입 + "</td>"; 
		html +="<td>" + sumlist.총액 + "</td>";
		html +="</tr>";
	
	
	$(".all tbody").html(html);
}



function drawPaging(pd) {
	var html = "";
	
	html += "<span class=\"page_btn page_first\" page=\"1\">처음</span>";
	// 이전
	if($("#page").val() == "1"){
		html += "<span class=\"page_btn page_prev\" page=\"1\">이전</span>";
	} else{
		// 문자열을 숫자로 바꾸기위해 *1
		html += "<span class=\"page_btn page_prev\" page=\"" + ($("#page").val() *1 - 1) + "\">이전</span>";
	}
	
	for(var i = pd.startP; i <= pd.endP; i++){
		if($("#page").val() * 1 == i){ // 현재 페이지
			html += "<span class=\"page_btn_on\" page=\"" + i + "\">" + i + "</span>";
		} else { // 다른 페이지
			html += "<span class=\"page_btn\" page=\"" + i + "\">" + i + "</span>";
		}
	}
	
	if($("#page").val() *1 == pd.endP){ // 현재페이지가 마지막 페이지라면
		html += "<span class=\"page_btn page_next\" page=\"" +pd.maxP+ "\">다음</span>";
	} else {
		html += "<span class=\"page_btn page_next\" page=\"" + ($("#page").val() *1 + 1) + "\">다음</span>";
	}
	
	html += "<span class=\"page_btn page_last\" page=\"" +pd.maxP+ "\">마지막</span>";
	
	$(".paging_area").html(html);
                                                                     
}

</script>
</head>
<body>
<div class="wrap">
	<table class="board_table all">
			<thead>
				<tr>
					<th>지출</th>
					<th>수입</th>
					<th>총액</th>
				</tr>
			</thead>
			<tbody>

			</tbody>
		</table>
		
	<div class="board_area">
		<!-- 작성 또는 로그인 -->
		
		<!-- 목록 -->
		<table class="board_table list">
			<colgroup>
				<col width="100"> <!-- 번호 -->
				<col width="100"> <!-- 금액 -->
				<col width="100"> <!-- 지출/수입 -->
				<col width="300"> <!-- 내용 -->
				<col width="100"> <!-- 날짜 -->
				<col width="100"> <!-- 버튼 -->
			</colgroup>
			<thead>
						<tr >
							<form action="#" id="actionForm">
								<input type="hidden" name="no" id="no">
							<td colspan="1">
								<select name="accType" id="accType" value="0">
									<option value="0">지출</option>
									<option value="1">수입</option>
								</select>
							</td>
							<td colspan="1">
								<input  type="number"  class="price" name="price" id="price" placeholder="금액" />
							</td>
							<td colspan="2">
								<input type="text" class="info" name="info" id="info" placeholder="내역" />
							</td>
							<td colspan="1">
								<input type="date" name="dt" id="dt"/>  
							</td>
							</form>
							<td>
								<div class="insert">
									<div class="cmn_btn_ml" id="insertBtn">등록</div>
								</div> 
								<div class="update">
									<div class="cmn_btn_ml mtb" id="updateBtn">수정</div><br/>
									<div class="cmn_btn_ml mtb" id="cancelBtn">취소</div>
								</div>
							</td>
						</tr>

				<tr>
					<th>번호</th>
					<th>금액</th>
					<th>지출/수입</th>
					<th>내역</th>
					<th>일자</th>
					<th>&nbsp;</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		<!-- 페이징 -->
		<div class="paging_area"></div>
		<form action="#" id="searchForm">
			<input type="hidden" name="page" id="page" value="1" />
		
		</form>
	</div>
</div>
</body>
</html>

PshAccController.java

package com.spring.sample.web.testa.Controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.spring.sample.common.service.IPagingService;
import com.spring.sample.web.testa.dao.IACDao;

@Controller
public class PshAccController {
	@Autowired
	public IACDao dao;

	@Autowired
	public IPagingService ips;

	// DB안 붙으니 예외처리 x
	@RequestMapping(value = "ACC")
	public ModelAndView ACC(ModelAndView mav) {
		mav.setViewName("testa/pshAcc/pshacc");

		return mav;
	}

	@RequestMapping(value = "/ACCAction/{gbn}", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String ACCAction(@PathVariable String gbn, @RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		int cnt = 0;

		try {
			switch (gbn) {
			case "insert":
				System.out.println(params.toString());
				cnt = dao.insert("acc.insertAcc", params);
				break;
			case "update":
				cnt = dao.update("acc.updateAcc", params);
				break;
			case "delete":
				cnt = dao.update("acc.deleteAcc", params);
				break;
			}

			if (cnt > 0) {
				model.put("msg", "success");
			} else {
				model.put("msg", "fail");
			}
		} catch (Exception e) {
			e.printStackTrace();
			model.put("msg", "error");
		}

		return mapper.writeValueAsString(model);
	}

	@RequestMapping(value = "/ACCList", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String ACCList(@RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		// 페이지 받아오게 되어있음
		int cnt = dao.getInt("acc.getAccCnt", params);

		HashMap<String, Integer> pd = ips.getPagingData(Integer.parseInt(params.get("page")), cnt, 10, 5);

		params.put("start", Integer.toString(pd.get("start")));
		params.put("end", Integer.toString(pd.get("end")));

		List<HashMap<String, String>> list = dao.getList("acc.getAccList", params);
		HashMap<String, String> sumlist = dao.getMap("acc.getsumList");

		model.put("list", list);
		model.put("sumlist", sumlist);
		model.put("pd", pd);

		System.out.println(params.toString());

		return mapper.writeValueAsString(model);
	}
}

ACC_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="acc">
	<insert id="insertAcc" parameterType="hashmap">
		 INSERT INTO ACCBOOK(NO, PRICE, ACC_TYPE, INFO, DT) VALUES (ACCBOOK_SEQ.NEXTVAL, #{price}, #{accType}, #{info}, #{dt})
	</insert>
	<update id="updateAcc" parameterType="hashmap">
		UPDATE ACCBOOK SET INFO = #{info},
		PRICE = #{price},
		ACC_TYPE = #{accType},
		DT = #{dt}
		WHERE NO = #{no}
	</update>
	<update id="deleteAcc" parameterType="hashmap">
		UPDATE ACCBOOK SET DEL = 0
		WHERE NO = #{no}
	</update>
	<select id="getAccCnt" parameterType="hashmap" resultType="Integer">
		SELECT COUNT(*) AS CNT
			FROM ACCBOOK 
		WHERE DEL = 1

	</select>
	<select id="getAccList" parameterType="hashmap" resultType="hashmap">
		 SELECT A.NO, A.PRICE, A.ACC_TYPE, A.INFO, A.DT
        FROM (SELECT NO, PRICE, CASE WHEN ACC_TYPE  = '0' THEN '지출'
            ELSE '수입' END AS ACC_TYPE, INFO,
              TO_CHAR(DT,'YYYY-MM-DD') AS DT, 
               ROW_NUMBER() OVER(ORDER BY NO DESC) AS RNUM
	      FROM ACCBOOK  
	      WHERE DEL = 1) A
          	WHERE A.RNUM BETWEEN #{start} AND #{end}
  
	</select>
	
	<select id="getsumList" parameterType="hashmap" resultType="hashmap">

    SELECT MAX(DECODE(ACC_TYPE, 0, SUM, NULL)) AS "지출", MIN(DECODE(ACC_TYPE, 1, SUM, NULL)) AS "수입", MIN(DECODE(ACC_TYPE, 1, SUM, NULL))
       - (MAX(DECODE(ACC_TYPE, 0, SUM, NULL))) AS "총액"
  	FROM (SELECT SUM(PRICE) AS SUM ,ACC_TYPE FROM ACCBOOK WHERE DEL = 1 GROUP BY ACC_TYPE)
  
	</select>
</mapper>

IACDao.java

package com.spring.sample.web.testa.dao;

import java.util.HashMap;
import java.util.List;

public interface IACDao {
	// 숫자 취득
	public int getInt(String sql) throws Throwable; // 값 안 주고, 쿼리만 부를때

	public int getInt(String sql, HashMap<String, String> params) throws Throwable; // 값까지 줄때

	// 문자열 취득
	public String getString(String sql) throws Throwable;

	public String getString(String sql, HashMap<String, String> params) throws Throwable;

	// HashMap 취득
	public HashMap<String, String> getMap(String sql) throws Throwable;

	public HashMap<String, String> getMap(String sql, HashMap<String, String> params) throws Throwable;

	// List 취득
	public List<HashMap<String, String>> getList(String sql) throws Throwable;

	public List<HashMap<String, String>> getList(String sql, HashMap<String, String> params) throws Throwable;

	// 등록
	public int insert(String sql) throws Throwable;

	public int insert(String sql, HashMap<String, String> params) throws Throwable;

	// 수정
	public int update(String sql) throws Throwable;

	public int update(String sql, HashMap<String, String> params) throws Throwable;

	// 삭제
	public int delete(String sql) throws Throwable;

	public int delete(String sql, HashMap<String, String> params) throws Throwable;
}

ACDao.java

package com.spring.sample.web.testa.dao;

import java.util.HashMap;
import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class ACDao implements IACDao {
	@Autowired
	public SqlSession sqlSession;

	@Override
	public int getInt(String sql) throws Throwable {
		return sqlSession.selectOne(sql);
	}

	@Override
	public int getInt(String sql, HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne(sql, params);
	}

	@Override
	public String getString(String sql) throws Throwable {
		return sqlSession.selectOne(sql);
	}

	@Override
	public String getString(String sql, HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne(sql, params);
	}

	@Override
	public HashMap<String, String> getMap(String sql) throws Throwable {
		return sqlSession.selectOne(sql);
	}

	@Override
	public HashMap<String, String> getMap(String sql, HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne(sql, params);
	}

	@Override
	public List<HashMap<String, String>> getList(String sql) throws Throwable {
		return sqlSession.selectList(sql);
	}

	@Override
	public List<HashMap<String, String>> getList(String sql, HashMap<String, String> params) throws Throwable {
		return sqlSession.selectList(sql, params);
	}

	@Override
	public int insert(String sql) throws Throwable {
		return sqlSession.insert(sql);
	}

	@Override
	public int insert(String sql, HashMap<String, String> params) throws Throwable {
		return sqlSession.insert(sql, params);
	}

	@Override
	public int update(String sql) throws Throwable {
		return sqlSession.update(sql);
	}

	@Override
	public int update(String sql, HashMap<String, String> params) throws Throwable {
		return sqlSession.update(sql, params);
	}

	@Override
	public int delete(String sql) throws Throwable {
		return sqlSession.delete(sql);
	}

	@Override
	public int delete(String sql, HashMap<String, String> params) throws Throwable {
		return sqlSession.delete(sql, params);
	}
}

오늘 시험의 변수는 쿼리였다..

저 빨간색 테두리 부분을 구현하기 위해 쿼리를 이렇게...

controller에서 이렇게 받음

처음에

위에 getAccList받은것처럼 list형식으로 했다가 map으로 변경했는데, 안되서 왜 안되지 했는데..

HashMap<String, String> sumlist = dao.getMap("acc.getsumList", params)

params를 빼야하는데 안 뻈던거

HashMap<String, String> sumlist = dao.getMap("acc.getsumList")

이렇게 하니 잘 됨!!!

jsp에서는 테이블 2개를 각각 하나씩 그려주고

reload될때 그려줌

맥mac 이클립스 스프링 개발 이미지 업로드 파일 경로(윈도우에서 옮겨오면서 생긴 일), 해결중...

토희 — Fri, 2 Sep 2022 16:03:32 +0900

https://makeaplayground.tistory.com/136

국비 TIL(Today I Learned) 20220901 갤러리 실습

어제꺼 복습 EXCEPTION_INFO.jsp 예외발생했을때 exceptionResolver가 esception 객체를 돌려줌 첨부파일 할때 name이 있어야 작동함!! 아래 코드는 기존 T/update.jsp임 FileController.java에서 getFileMap()..

makeaplayground.tistory.com

오늘(2022.09.01) 학원에서 실습한 갤러리 게시판이 맥으로 옮겨오니,

이미지가 다 깨졌다.

경로 문제였다.

학원에서는 경로는

"C:\\MyWork\\workspace\\.metadata\\.plugins\\org.eclipse.wst.server.core"

+ "\\tmp0\\wtpwebapps\\SampleSpring\\resources\\upload"

이 경로였는데,

https://makeaplayground.tistory.com/128

국비 TIL(Today I Learned) 20220822 ajaxForm으로 파일 첨부, 다운받기

Fileupload : 사용자 컴퓨터의 파일을 서버에 올림 샘플 스프링에 예시가 있음!~ input type="file"로 할려고 하면, enctype이 필요 기존 serialize()는 파일이 안 넘어가서 추가 기능 필요 form의 객체..

makeaplayground.tistory.com

윈도우에서 이 경로를 찾는 방식대로 찾을려고 하니(위의 글 참고) 폴더가 없어...

.metadata 폴더가 없다!!!

그래서 구글링 해봄

shift + command + . 을 누르면 숨긴 폴더를 볼 수 있다

.metadata가 뜬다!

그럼 다음 학원에서 했던 경로로 upload 폴더까지 가서

오른쪽 마우스 클릭, 정보 가져오기에 위치가 있음~

윈래 윈도우 였을때는 이렇게 작성되어있었는데,

이렇게 변경함!!!

이러면... insert는 하면 등록은 되는데!!

19번이 새로 등록한거, 근데 아직도 이미지가 안뜸

콘솔에 이렇게 뜸

뭐가 문제일까...

한글이 문제 였음

파일이름이 영어로 된거는 잘 들어감!

강사님이 이부분을 고쳐주셨으나(URIEncoding-"UTF-8"이 추가됨).. 안된다

구글링 해봐야겠다

국비 TIL(Today I Learned) 20220901 갤러리 실습

토희 — Thu, 1 Sep 2022 19:41:20 +0900

어제꺼 복습

EXCEPTION_INFO.jsp

예외발생했을때 exceptionResolver가 esception 객체를 돌려줌

첨부파일 할때 name이 있어야 작동함!!

아래 코드는 기존 T/update.jsp임

FileController.java에서 getFileMap()에서 name을 받아옴!!!

어제 갤러리 실습 오늘도 이어서!!

화면

기존에는 list랑 detail의 jsp가 분리되어있었다면, 이번에 만들때는

list가 오른쪽, detail이 왼쪽으로 가게끔 함

그래서 detail.jsp는 없고, ajax 처리함

로그인 한 사람이 글 작성한 사람이면 수정, 삭제 버튼이 활성화된다

update(수정)은 페이지가 이동하게끔 함

insert화면

전체 코드

AGController.java

package com.spring.sample.web.testa.Controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.spring.sample.common.service.IPagingService;
import com.spring.sample.web.testa.dao.IACDao;

@Controller
public class AGController {
	@Autowired
	public IACDao iACDao;

	@Autowired
	public IPagingService ips;

	@RequestMapping(value = "/AGList")
	public ModelAndView AGList(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		int page = 1;

		if (params.get("page") != null && params.get("page") != "") {
			page = Integer.parseInt(params.get("page"));
		}

		mav.addObject("page", page);
		mav.setViewName("testa/G/list");

		return mav;
	}

	@RequestMapping(value = "/AGListAjax", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String AGListAjax(@RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		// 페이지 받아오게 되어있음
		int cnt = iACDao.getInt("G.getGCnt", params);

		HashMap<String, Integer> pd = ips.getPagingData(Integer.parseInt(params.get("page")), cnt, 9, 5);

		params.put("start", Integer.toString(pd.get("start")));
		params.put("end", Integer.toString(pd.get("end")));

		List<HashMap<String, String>> list = iACDao.getList("G.getGList", params);

		model.put("list", list);
		model.put("pd", pd);

		System.out.println(params.toString());

		return mapper.writeValueAsString(model);
	}

	@RequestMapping(value = "/AGInsert")
	public ModelAndView aGInsert(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		System.out.println(params.toString());

		mav.setViewName("testa/G/insert");

		return mav;
	}

	@RequestMapping(value = "/AGAction/{gbn}", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String AGAction(@PathVariable String gbn, @RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		int cnt = 0;

		try {
			switch (gbn) {
			case "insert":
				cnt = iACDao.insert("G.insertG", params);
				break;
			case "update":
				cnt = iACDao.update("G.updateG", params);
				break;
			case "delete":
				cnt = iACDao.update("G.deleteG", params);
				break;
			}

			if (cnt > 0) {
				model.put("msg", "success");
			} else {
				model.put("msg", "fail");
			}
		} catch (Exception e) {
			e.printStackTrace();
			model.put("msg", "error");
		}

		return mapper.writeValueAsString(model);
	}

	// 가져오고 변경되는게 없기 때문에 비동기 처리로 안되도 됨
//	@RequestMapping(value = "/AGDetail")
//	public ModelAndView aGDetail(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
//		// 글번호 안 넘어왔을때 처리
//		if (params.get("no") != null && params.get("no") != "") {
//			// 조회수
//			iACDao.update("G.updateGHit", params);
//			HashMap<String, String> data = iACDao.getMap("G.getG", params);
//
//			mav.addObject("data", data);
//
//			mav.setViewName("testa/G/list");
//		}
//		/*
//		 * else { mav.setViewName("redirect:AGList"); }
//		 */
//		return mav;
//	}

	@RequestMapping(value = "/AGDetailAjax", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String AGDetailAjax(@RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		HashMap<String, String> data = iACDao.getMap("G.getG", params);

		model.put("data", data);

		System.out.println(params.toString());

		return mapper.writeValueAsString(model);
	}

	@RequestMapping(value = "/AGUpdate")
	public ModelAndView aGUpdate(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		System.out.println(params.toString());

		// 글번호 안 넘어왔을때 처리
		if (params.get("no") != null && params.get("no") != "") {
			HashMap<String, String> data = iACDao.getMap("G.getG", params);

			mav.addObject("data", data);

			mav.setViewName("testa/G/update");
		} else {
			mav.setViewName("redirect:AGList");
		}

		return mav;
	}

}

밑에 AGDetailAjax가 이번에 만든부분

주석 처리된곳이 기존에 detail

G_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="G">
	<select id="getGCnt" resultType="Integer" parameterType="hashmap">
		SELECT COUNT(*) AS CNT
		FROM GALLERY G INNER JOIN MEM M ON G.MEM_NO = M.MEM_NO
		AND M.DEL = 1
		WHERE G.DEL_DT IS NULL
	</select>
	
	<select id="getGList" resultType="hashmap" parameterType="hashmap">
		SELECT G.NO, G.PIC, G.TITLE, G.DISCRIPT, G.HIT, G.DT
		FROM (
		SELECT G.NO, G.PIC, G.TITLE, G.DISCRIPT, G.HIT, 
		CASE WHEN TO_CHAR(G.REG_DT,'YY.MM.DD') = TO_CHAR(SYSDATE, 'YY.MM.DD')
		        THEN TO_CHAR(G.REG_DT, 'HH24:MI')
		        ELSE TO_CHAR(G.REG_DT, 'YY.MM.DD')
		        END AS DT, 
                 ROW_NUMBER() OVER(ORDER BY G.NO DESC) AS RNUM
				FROM GALLERY G INNER JOIN MEM M ON G.MEM_NO = M.MEM_NO
                AND M.DEL = 1
				WHERE G.DEL_DT IS NULL ) G
                WHERE G.RNUM BETWEEN #{start} AND #{end}
	</select>
	
	<insert id="insertG" parameterType="hashmap">
		INSERT INTO GALLERY(NO, TITLE, MEM_NO, PIC, DISCRIPT)
		VALUES (GALLERY_SEQ.NEXTVAL, #{title} , #{memNo}, #{pic}, #{discript})
	</insert>
	 
	<select id="getG" parameterType="hashmap"  resultType="hashmap">
		SELECT G.NO, G.TITLE, G.MEM_NO, G.PIC, G.HIT, G.DISCRIPT,
	    TO_CHAR(G.REG_DT, 'YYYY-MM-DD') AS DT
		FROM GALLERY G INNER JOIN MEM M ON G.MEM_NO = M.MEM_NO
		AND M.DEL = 1
		WHERE G.DEL_DT IS NULL
		AND G.NO = #{no}
	</select>
	
	<update id="updateGHit" parameterType="hashmap">
		UPDATE GALLERY SET HIT = HIT + 1
		WHERE NO = #{no}
	</update>
	
	<update id="deleteG"  parameterType="hashmap">
		UPDATE GALLERY SET DEL_DT = TO_CHAR(SYSDATE, 'YY.MM.DD')
		WHERE NO = #{no}
	</update>
	
	<update id="updateG"  parameterType="hashmap">		
		UPDATE GALLERY SET TITLE = #{title},
		PIC = #{pic},
		DISCRIPT = #{discript}
		WHERE NO = #{no}
	</update>
</mapper>

IACDao.java

package com.spring.sample.web.testa.dao;

import java.util.HashMap;
import java.util.List;

public interface IACDao {
	// 숫자 취득
	public int getInt(String sql) throws Throwable; // 값 안 주고, 쿼리만 부를때

	public int getInt(String sql, HashMap<String, String> params) throws Throwable; // 값까지 줄때

	// 문자열 취득
	public String getString(String sql) throws Throwable;

	public String getString(String sql, HashMap<String, String> params) throws Throwable;

	// HashMap 취득
	public HashMap<String, String> getMap(String sql) throws Throwable;

	public HashMap<String, String> getMap(String sql, HashMap<String, String> params) throws Throwable;

	// List 취득
	public List<HashMap<String, String>> getList(String sql) throws Throwable;

	public List<HashMap<String, String>> getList(String sql, HashMap<String, String> params) throws Throwable;

	// 등록
	public int insert(String sql) throws Throwable;

	public int insert(String sql, HashMap<String, String> params) throws Throwable;

	// 수정
	public int update(String sql) throws Throwable;

	public int update(String sql, HashMap<String, String> params) throws Throwable;

	// 삭제
	public int delete(String sql) throws Throwable;

	public int delete(String sql, HashMap<String, String> params) throws Throwable;
}

ACDao.java

package com.spring.sample.web.testa.dao;

import java.util.HashMap;
import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class ACDao implements IACDao {
	@Autowired
	public SqlSession sqlSession;

	@Override
	public int getInt(String sql) throws Throwable {
		return sqlSession.selectOne(sql);
	}

	@Override
	public int getInt(String sql, HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne(sql, params);
	}

	@Override
	public String getString(String sql) throws Throwable {
		return sqlSession.selectOne(sql);
	}

	@Override
	public String getString(String sql, HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne(sql, params);
	}

	@Override
	public HashMap<String, String> getMap(String sql) throws Throwable {
		return sqlSession.selectOne(sql);
	}

	@Override
	public HashMap<String, String> getMap(String sql, HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne(sql, params);
	}

	@Override
	public List<HashMap<String, String>> getList(String sql) throws Throwable {
		return sqlSession.selectList(sql);
	}

	@Override
	public List<HashMap<String, String>> getList(String sql, HashMap<String, String> params) throws Throwable {
		return sqlSession.selectList(sql, params);
	}

	@Override
	public int insert(String sql) throws Throwable {
		return sqlSession.insert(sql);
	}

	@Override
	public int insert(String sql, HashMap<String, String> params) throws Throwable {
		return sqlSession.insert(sql, params);
	}

	@Override
	public int update(String sql) throws Throwable {
		return sqlSession.update(sql);
	}

	@Override
	public int update(String sql, HashMap<String, String> params) throws Throwable {
		return sqlSession.update(sql, params);
	}

	@Override
	public int delete(String sql) throws Throwable {
		return sqlSession.delete(sql);
	}

	@Override
	public int delete(String sql, HashMap<String, String> params) throws Throwable {
		return sqlSession.delete(sql, params);
	}
}

list.jsp (밑에 재수정한 코드 있음, 밑에 걸로 참고!!!)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.paging_area{
	display: block; 
	position: relative; 
	left: 0;
	margin-bottom: 10px;
	font-size: 14px;
}

.main{
	display: flex;
	padding: 100px 200px;
	justify-content: space-between;
}
.main > div {
	width: 700px;	
}

.left_area img {
	width: 680px;
	height: 400px;
	border-radius: 15px;
	
}



.table {
	border-collapse: collapse;
	width: 100%;
	margin: 15px 0px;
}

.right_area img{ 
	width: 200px;
	height: 180px;
	/* object-fit: cover; */
}

.table tbody tr {
	height: 40px;
	text-align: center;
	color: #7b7b7b;
	font-size: 10.5pt;
}

.table tbody tr {
	
}

.tbody img{
	cursor: pointer;
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<script type="text/javascript">
var flag = true;
$(document).ready(function () {

	//목록 조회
	reloadList();
	
	
	//페이징 버튼
	$(".paging_area").on("click", "span", function () {
		
		$("#page").val($(this).attr("page"));
		
		reloadList();
	})
	
	// 등록버튼
	$("#insertBtn").on("click", function () {
		console.log("1");
		
		$("#actionForm").attr("action", "AGInsert");
		$("#actionForm").submit();
	})
	

	$(".tbody").on("click", "td", function () {
		$("#no").val($(this).attr("no"));
		
	 	/* $("#actionForm").attr("action", "AGDetail");
		$("#actionForm").submit();  */
		
		// 단건을 ajax로 보내서 왼쪽 화면에 그려
		var params = $("#actionForm").serialize();
		
		
		$.ajax({
			url : "AGDetailAjax", //경로
			type : "POST", // 전송방식(GET: 주소형태, POST : 주소 헤더 형태)
			dataType: "json", // 데이터 형태
			data: params, // 보낼데이터
			success : function(res) { //성공했을 때 결과를 res에 받고 함수 실행
				//console.log(res); // 콘솔에  pd랑 list 값이 보임
				
				var html = "";
				
				html += "<tr>";
				html += "<td colspan=\"2\">";
				html += "<img alt=\"\" src=\"resources/upload/"+ res.data.PIC +"\">";
				html += "</td>"
				html += "</tr>"
				html += "<tr>";
				html += "<th>번호</th>"
				html += "<td>" + res.data.NO+ "</td>";
				html += "</tr>"
				html += "<tr>";
				html += "<th>제목</th>"
				html += "<td>" + res.data.TITLE+ "</td>";
				html += "</tr>"
				html += "<tr>";
				html += "<th>작성일</th>"
				html += "<td>" + res.data.DT+ "</td>";
				html += "</tr>"
				html += "<tr>";
				html += "<th>조회수</th>"
				html += "<td>" + res.data.HIT+ "</td>";
				html += "</tr>"
				html += "<th>내용</th>"
				html += "<td>" + res.data.DISCRIPT+ "</td>";
				html += "</tr>"
			

				$(".left_area tbody").html(html);
				
				
			 	var html1 ="";
				
		
				if("${sMemNo}" == res.data.MEM_NO){
					html1 += "<div class=\"cmn_btn_ml float_right_btn\" id=\"deleteBtn\" onclick=\"deleteF()\">삭제</div>";
					html1 += "<div class=\"cmn_btn_ml float_right_btn\" id=\"updateBtn\">수정</div>";
				}
			
				$(".left_area .btn_wrap").html(html1); 
				
				

			},
			error : function(request, status, error) { // 실패했을 때 함수실행
				console.log(request.responseText); // 실패 상세 태역
			}
		});
		
	})
	

	$(".btn_wrap").on("click", "#updateBtn", function () {
		$("#actionForm").attr("action","AGUpdate");
		$("#actionForm").submit();
		
	});
	
});

function deleteF() {
	// ajax사용 예정
	$("#deleteBtn").on("click", function () {
		  makePopup({
		         title : "알림",
		         contents : "삭제하시겠습니까?",
		         // draggable : true,
		         buttons : [{
		            name : "삭제",
		            func:function() {
		            	var params = $("#actionForm").serialize();
		    			
		    			$.ajax({
		    				url : "AGAction/delete", //restful api라는게 여기서 시작한다고?
		    				type : "POST", 
		    				dataType: "json", 
		    				data: params, 
		    				success : function(res) { 
		    					switch(res.msg){
		    					case "success" : 
		    						// 카테고리를 유지하고 나머지 정보 초기화
									$("#page").val("1");
								

									$("#actionForm").attr("action","AGList");
									$("#actionForm").submit();
		    						break;
		    					case "fail" :
		    						makeAlert("알림" , "삭제에 실패하였습니다.");
		    						break;
		    					case "error" :
		    						makeAlert("알림" , "삭제 중 문제가 발생하였습니다.");
		    						break;
		    					}
		    				},
		    				error : function(request, status, error) { 
		    					console.log(request.responseText); 
		    				}
		    			});
		            }
		         }, {
		            name : "취소"
		    }]
		});
	});
}


// 목록 조회 호출, ajax불러오기
function reloadList() {
	var params = $("#actionForm").serialize();
	
	$.ajax({
		url : "AGListAjax", //경로
		type : "POST", // 전송방식(GET: 주소형태, POST : 주소 헤더 형태)
		dataType: "json", // 데이터 형태
		data: params, // 보낼데이터
		success : function(res) { //성공했을 때 결과를 res에 받고 함수 실행
			console.log(res); // 콘솔에  pd랑 list 값이 보임
			drawList(res.list);
			drawPaging(res.pd);
	
			
		},
		error : function(request, status, error) { // 실패했을 때 함수실행
			console.log(request.responseText); // 실패 상세 태역
		}
	});
	
}


function drawList(list) {
	var html = "";

	var cnt = 0;
  	console.log(list[0].PIC);
  	
	for(var data of list){
		if(cnt == 0) {
			html += "<tr>";
		}
		
		html += "<td no=\"" + data.NO + "\">";
		html += "<img alt=\"\" src=\"resources/upload/"+ data.PIC +"\">";
		html += "</td>"
		
		if(cnt == 2) {
			html += "</tr>";
		}
		cnt++;
		
		if(cnt >= 3) {
			cnt = 0;
		}
	}   
	$(".tbody").html(html);
	
	
	//처음일때만..
	// 강제로 tr td
	// enter키 누린것처럼
	

	if("${param.no}" != "") { // param.no가 있다면
		console.log("${param.no}");
		flag = false; // 이거 없어도 되는데??음????
		
		$("td[no='${param.no}']").click();
	} else if(flag) {
		console.log("else")
		flag = false; // 이게 없으면 페이징하면 그 페이지에 첫번째로 다시 로드됨, 내가 보고있던 디테일이 아니라
		
		if($(".tbody").html() != "") { // .tbody에 데이터가 있다면
			$(".tbody").children().eq(0).children().eq(0).click(); // click()는 위에 있는 클릭이벤트를 지칭
		}
		
	}
	
}


function drawPaging(pd) {
	var html = "";
	
	html += "<span class=\"page_btn page_first\" page=\"1\">처음</span>";
	// 이전
	if($("#page").val() == "1"){
		html += "<span class=\"page_btn page_prev\" page=\"1\">이전</span>";
	} else{
		// 문자열을 숫자로 바꾸기위해 *1
		html += "<span class=\"page_btn page_prev\" page=\"" + ($("#page").val() *1 - 1) + "\">이전</span>";
	}
	
	for(var i = pd.startP; i <= pd.endP; i++){
		if($("#page").val() * 1 == i){ // 현재 페이지
			html += "<span class=\"page_btn_on\" page=\"" + i + "\">" + i + "</span>";
		} else { // 다른 페이지
			html += "<span class=\"page_btn\" page=\"" + i + "\">" + i + "</span>";
		}
	}
	
	if($("#page").val() *1 == pd.endP){ // 현재페이지가 마지막 페이지라면
		html += "<span class=\"page_btn page_next\" page=\"" +pd.maxP+ "\">다음</span>";
	} else {
		html += "<span class=\"page_btn page_next\" page=\"" + ($("#page").val() *1 + 1) + "\">다음</span>";
	}
	
	html += "<span class=\"page_btn page_last\" page=\"" +pd.maxP+ "\">마지막</span>";
	
	$(".paging_area").html(html);
                                                                     
}
</script>		
</head>
<body>
<c:import url="/testAHeader"></c:import>
<hr/>
<div class="main">
<form action="#" id="actionForm" method="post">
	<input type="hidden" name="no" id="no" value="${data.NO}"/>
	<input type="hidden" name="page" id="page" value="${page}" />
</form>
<div class="left_area">
<table class="board_table">
	<colgroup>
		<col width="100" />
		<col width="600" />
	</colgroup>	
	<thead>
	</thead>
	<tbody>
	
	</tbody>
</table>
<div class="btn_wrap">

</div>
</div>
<div class="right_area">
<table class="table">
	<colgroup>
		<col width="100" />
		<col width="100" />
		<col width="100" />
	</colgroup>
	<tbody class="tbody">
	</tbody>
</table>
<div class="paging_area"></div>
<c:if test="${!empty sMemNo}">
			<div class="cmn_btn_ml float_right_btn" id="insertBtn">등록</div>
</c:if>
</div>
</div>
</body>
</html>

insert.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글쓰기</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{
	width: 800px;
	margin: 0 auto;
}


</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/jquery/jquery.form.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<!-- CKEditor -->
<!-- 제이쿼리 뒤에 나와야함, 제이쿼리 기반으로 동작하기 때문에 -->
<script type="text/javascript" src="resources/script/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 에디터 연결
	// CKEDITOR.replace(아이디, 옵션)
	CKEDITOR.replace("discript", {
		resize_enabled: false, // resize_enabled : 크기조절기능 활용여부
		language : "ko", // 사용언어
		enterMode: "2", // 엔터키처리방법. 2번이면 <br/>
		width : "100%", // 숫자일경우 px, 문자열일경우 css크기
		height : 400
	});
	
	$("#listBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	$("#insertBtn").on("click", function () {
		// CKEditor의 값 취득
		// CKEDITOR.instances[아이디] : CKEditor중 아이디가 같은 것을 찾겠다.
		//.getData() : 작성중인 내용을 취득하겠다.
		$("#discript").val(CKEDITOR.instances['discript'].getData());
		
		if($.trim($("#title").val()) == ""){
			makeAlert("알림","제목 입력하세요." , function () {
				$("#title").focus();
			})
		} else if($.trim($("#discript").val()) == ""){
			makeAlert("알림","내용을 입력하세요." , function () {
				$("#discript").focus();
			})
		} else {
			// 1. 파입업로드 -> 2. 업로드 파일명 취득 -> 3. 글 저장
			// 폼 객체 취득
			var form = $("#actionForm");
			// ajaxForm 적용
			form.ajaxForm({
				success: function (res) { // 데이터 주고 받기 성공시
					if(res.result == "SUCCESS"){ // 파일 전송 성공
						// 올라간 파일이 존재한다면, 첨부파일이 없을 수도 있으니 조건문 처리
						if(res.fileName.length > 0){
							$("#pic").val(res.fileName[0]); // 올라간 파일명 보관		
						}
						// 3번 단계 글저장 시작, 기존테이터
						var params = $("#actionForm").serialize();
						
						$.ajax({
							url : "AGAction/insert", //restful api라는게 여기서 시작한다고?
							type : "POST", 
							dataType: "json", 
							data: params, 
							success : function(res) { 
								switch(res.msg){
								case "success" : 
									// 카테고리를 유지하고 나머지 정보 초기화
									$("#page").val("1");
								
									$("#backForm").submit();
									break;
								case "fail" :
									makeAlert("알림" , "등록에 실패하였습니다.");
									break;
								case "error" :
									makeAlert("알림" , "등록 중 문제가 발생하였습니다.");
									break;
								}
							},
							error : function(request, status, error) { 
								console.log(request.responseText); 
							}
						});  // 글저장 끝
						
					} else { // 문제발생
						makeAlert("알림", "파일 업로드에<br/>문제가 발생하였습니다.")
					}
				},
				error: function () { // 에러시
					makeAlert("알림", "파일 업로드에<br/>문제가 발생하였습니다.")
				}
			}); // ajaxForm 설정 끝
			
			
			// ajaxForm 실행
			form.submit();
			
		}
	});
});

</script>
</head>
<body>
<c:import url="/testAHeader"></c:import>
<form action="AGList" id="backForm" method="post">
	<input type="hidden" name="page" id="page" value="${param.page}" />
</form>
<!-- ajax쓰기 때문에 gbn 지움 -->
<div class="wrap">
	<form action="fileUploadAjax" id="actionForm" method="post" enctype="multipart/form-data">
		<input type="hidden" name="pic" id="pic" /> <!-- 실 저장된 파일명 보관용 -->
		<table class="board_detail_table">
			<tr>
				<th>제목</th>
				<td><input type="text" name="title" id="title" /></td>
			</tr>
			<tr>
				<th>작성자</th>
				<td>${sMemNm}<input type="hidden" name="memNo" value="${sMemNo}" /><br/></td>
			</tr>
			<tr>
				<th colspan="2">내용</th>
			</tr>
			<tr>
				<th colspan="2"><textarea rows="10" cols="30" name="discript" id=discript></textarea></th>
			</tr>			
			<tr>
				<th>첨부파일</th>
				<td><input type="file" name="pic" /></td>
			</tr>
		</table>
	</form>
	<div class="cmn_btn_ml float_right_btn" id="listBtn">목록</div>
	<div class="cmn_btn_ml float_right_btn" id="insertBtn">등록</div>
</div>
</body>
</html>

update.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- jsl의 functions : el tag 추가옵션 -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글수정</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{
	width: 800px;
	margin: 0 auto;
}

.pic {
	display: none;
}


</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/jquery/jquery.form.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<!-- CKEditor -->
<!-- 제이쿼리 뒤에 나와야함, 제이쿼리 기반으로 동작하기 때문에 -->
<script type="text/javascript" src="resources/script/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 에디터 연결
	// CKEDITOR.replace(아이디, 옵션)
	CKEDITOR.replace("discript", {
		resize_enabled: false, // resize_enabled : 크기조절기능 활용여부
		language : "ko", // 사용언어
		enterMode: "2", // 엔터키처리방법. 2번이면 <br/>
		width : "100%", // 숫자일경우 px, 문자열일경우 css크기
		height : 400
	});
	
	$("#cancelBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	// 첨부파일 파일삭제 버튼 클릭시
	$("#fileDelBtn").on("click", function () {
		// 기존 파일 내역 영역 제거
		$(".picOld").remove();
		// 기존 값 제거
		$("#pic").val("");
		// 파일 선택 영역 제공 
		$(".pic").show();
	});
	
	$("#updateBtn").on("click", function () {
		// CKEditor의 값 취득
		// CKEDITOR.instances[아이디] : CKEditor중 아이디가 같은 것을 찾겠다.
		//.getData() : 작성중인 내용을 취득하겠다.
		$("#discript").val(CKEDITOR.instances['discript'].getData());
		
		if($.trim($("#title").val()) == ""){
			makeAlert("알림","제목 입력하세요." , function () {
				$("#title").focus();
			})
		} else if($.trim($("#discript").val()) == ""){
			makeAlert("알림","내용을 입력하세요." , function () {
				$("#discript").focus();
			})
		} else {
			// 1. 파입업로드 -> 2. 업로드 파일명 취득 -> 3. 글 저장
			// 폼 객체 취득
			var form = $("#actionForm");
			// ajaxForm 적용
			form.ajaxForm({
				success: function (res) { // 데이터 주고 받기 성공시
					if(res.result == "SUCCESS"){ // 파일 전송 성공
						// 올라간 파일이 존재한다면, 첨부파일이 없을 수도 있으니 조건문 처리
						if(res.fileName.length > 0){
							$("#pic").val(res.fileName[0]); // 올라간 파일명 보관		
						}
						// 3번 단계 글저장 시작, 기존테이터
						var params = $("#actionForm").serialize();
						
						$.ajax({
							url : "AGAction/update", //restful api라는게 여기서 시작한다고?
							type : "POST", 
							dataType: "json", 
							data: params, 
							success : function(res) { 
								switch(res.msg){
								case "success" : 
									$('#backForm').submit();
									break;
								case "fail" :
									makeAlert("알림" , "등록에 실패하였습니다.");
									break;
								case "error" :
									makeAlert("알림" , "등록 중 문제가 발생하였습니다.");
									break;
								}
							},
							error : function(request, status, error) { 
								console.log(request.responseText); 
							}
						});  // 글저장 끝
						
					} else { // 문제발생
						makeAlert("알림", "파일 업로드에<br/>문제가 발생하였습니다.")
					}
				},
				error: function () { // 에러시
					makeAlert("알림", "파일 업로드에<br/>문제가 발생하였습니다.")
				}
			}); // ajaxForm 설정 끝
			
			
			// ajaxForm 실행
			form.submit();
		}
	});
});

</script>
</head>
<body>
<c:import url="/testAHeader"></c:import>
<form action="AGList" id="backForm" method="post">
	<input type="hidden" name="no" value="${data.NO}" />
</form>
<!-- ajax쓰기 때문에 gbn 지움 -->
<div class="wrap">
	<form action="fileUploadAjax" id="actionForm" method="post" enctype="multipart/form-data">
	<input type="hidden" name="no" value="${data.NO}" />
		<table class="board_detail_table">
			<tr>
				<th>번호</th>
				<td>${data.NO}</td>
			</tr>
			<tr>
				<th>제목</th>
				<td><input type="text" name="title" id="title" value="${data.TITLE}"/></td>
			</tr>
			<tr>
				<th>작성자</th>
				<td>${sMemNm}</td>
			</tr>
			<tr>
				<th colspan="2">내용</th>
			</tr>
			<tr>
				<th colspan="2"><textarea rows="10" cols="30" name=discript id="discript">${data.DISCRIPT}</textarea></th>
			</tr>
			<tr>
				<th>첨부파일</th>
				<c:choose>
					<c:when test="${empty data.PIC}">
						<!-- 파일이 없을때 -->
						<td>
							<input type="file" name="picFile" />
							<input type="hidden" name="pic" id="pic"/>
						</td>
					</c:when>
					<c:otherwise>
					<!-- 파일이 있을때 -->
						<td>
							<span class="attOld"> <!-- 기존 파일 -->
								<!-- fn:length(대상) : 대상 문자열의 길이나 배열, 리스트의 크기를 가져온다 -->
								<c:set var="fileLength" value="${fn:length(data.PIC)}"></c:set>
								<!-- fn:substring(값, 숫자1, 숫자2) : 값을 숫자1이상부터, 숫자2미만까지, 인덱스 기준으로 자른다. -->
								<c:set var="fileName" value="${fn:substring(data.PIC, 20, fileLength)}"></c:set>
								${fileName}
								<div class="cmn_btn_ml float_right_btn" id="fileDelBtn">파일삭제</div>
							</span>
							<span class="att"> <!-- 기존 파일 삭제 후 새 파일 용도 -->
								<input type="file" name="picFile" />
								<input type="hidden" name="pic" id="pic" value="${data.PIC}"/>
							</span>
						</td>
					</c:otherwise>
				</c:choose>
			</tr>
		</table>
	</form>
	<div class="cmn_btn_ml float_right_btn" id="cancelBtn">취소</div>
	<div class="cmn_btn_ml float_right_btn" id="updateBtn">수정</div>
</div>
</body>
</html>

++ 그리고 팀원 분이

만약 이런 function이 있으면 왜 data.PIC 대신 ${data.PIC}을 못쓰는지 질문했다

${data.PIC}... el태그....

https://epthffh.tistory.com/entry/Javascript-%EC%97%90%EC%84%9C-JSTL-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-%EC%99%80-%EC%A3%BC%EC%9D%98%EC%82%AC%ED%95%AD

Javascript 에서 JSTL 사용하기 와 주의사항

기본적으로 JSTL은 자바 코드를 다루기에 적합한 커스텀 태그 라이브러리이고 Javascript는 웹 브라우저에서 사용되는 스크립트 프로그래밍 언어이고 내장객체에도 접근이 가능하다는 장점이있다

epthffh.tistory.com

https://epthffh.tistory.com/entry/JSTL-%EA%B3%BC-Javascript-%ED%98%BC%EC%9A%A9-%EC%82%AC%EC%9A%A9%EC%9D%98-%EC%8B%A4%EC%A0%9C%EC%82%AC%EB%A1%80

JSTL 과 Javascript 혼용 사용의 실제사례

원글 : https://okky.kr/article/432665 실무 개발중 Javascript 와 JSTL의 사용법을 헷갈려 해서 도움을 청하신분에게 답변을 해드렸습니다 잘못된 코드를 먼저 보겠습니다 -잘못된 코드1 1 2 3 4 5 6 7 8 9 10..

epthffh.tistory.com

java(jstl) => html(js) 이런순으로!!!!

++ 팀원분이

디테일을 팝업으로 뜨게 함, list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>      
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><title>갤러리게시판</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
html, body{
   margin: 0;
   padding: 0;
   background-color: gray;
}

img {
   width: 200px;
   height: 180px;
}

.list{
   width: 100%;
   padding: 0;
   margin: 0; 
}
.list img{
   float: left;
   
}


@media screen and (max-width:991px) {
  .list div{
     width: 33.333333%;
  }
}

@media screen and (max-width:768px) {
  .list div{
     width: 50%;
  }
}

#searchTxt {
   width : 161px;
   height : 28px;
   padding : 0px 2px;
   text-indent: 5px;
   vertical-align : middle;
   border: 1px solid #d7d7d7;
   outline-color : #70adf9
}
.search_area {
   width: 700px;
   text-align: right;
   margin: 0 auto;
}

.board_area {
   width: 700px;
   margin: 0 auto;
}

.board_detail_table tbody .pconr {
   height: 220px;
}

.board_detail_table tbody .pcon {
   overflow: auto;
   width: 600px;
    height: 220px;
}

.att {
   display: inline-block;
   vertical-align: top;
   width: 18px;
   height: 18px;
   background-image: url('resources/images/attFile.png');
   background-size: cover;
}

#cateNo {
   min-width: 100px;
   height: 30px;
   vertical-align: middle;
   border: 1px solid #d7d7d7;
   float: left;
}
</style>
<script type="text/javascript"
      src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript"
      src="resources/script/common/popup.js"></script>   
<script type="text/javascript">
$(document).ready(function() {
   var params = $("#actionForm").serialize();
   
   // 등록 버튼
   $("#insertBtn").on("click", function() {
      
      $("#actionForm").attr("action", "AGalInsert");
      $("#actionForm").submit();      
   });
   
   $.ajax({
      url : "AGAListAjax", 
      type : "POST", 
      dataType : "json", 
      data : params, 
      success : function(res) {
         drawList(res.list);
      },
      error : function(request, status, error) { 
         console.log(request.responseText); 
      }
   });
   
   $("body").on("click", "div", function() {
      $("#no").val($(this).attr("no"));
      var params = $("#actionForm").serialize();
      
      
      $.ajax({
         type : "post",
         url : "AGADetailAjax",
         dataType : "json",
         data : params,
         success : function(res) {
            console.log(res);
      var html = "";      
      
      html += "      <form id=\"boardForm\">";
      html += "         <table class=\"board_detail_table\">";
      html += "            <colgroup>";
      html += "               <col width=\"100\"/>";
      html += "               <col width=\"600\"/>";
      html += "            </colgroup>";
      html += "            <tbody>";
      html += "            <tr>";
      html += "               <th>제목</th>";
      html += "               <td class=\"list\">" + res.data[0].TITLE  + "</td>";
      html += "            </tr>"; 
      html += "            </tbody>";
      html += "         </table>";
      html += "      </form>   ";  
      
         makePopup({
            depth : 2,
            width : 720,
            height : 500,
            bg : true,
            bgClose : false,
            title : "상세보기",
            contents : html,
            draggable : false,
            buttons : [{
               name : "수정",
               func:function() {
                  checkPass(function(res) {
                     if(result == "TRUE") {
                        closePopup(2);
                        updatePopup();
                     } else {
                        makeAlert("알림", "비밀번호가 틀렸습니다.");
                     }
                  });
               }
            }, {
               name : "취소",
   
            }]
         });
      } 
   });
});
   
 
}); // document

function drawList(list) {
   var html = "";
                         
   
   
   for(var data of list) {
         
      html += "<div no=\"" + data.NO + "\">";         
      html += "<img src=\"resources/upload/" + data.PIC + "\">";        
      html += "</div>";         
                            
   }                                                 
                                                     
   $(".list").html(html);
}
</script>         
</head>
<body>
<c:import url="/testAHeader"></c:import>
<div class="search_area">
   <form action="#" id="actionForm" method="post">
      <input type="hidden" name="no" id="no" />
      <div class="cmn_btn_ml" id="insertBtn">등록</div>
   </form>   
</div>
   <div class="list">
         <img src="resources/images/gal/img1.jpg">
         <img src="resources/images/gal/img2.jpg">
         <img src="resources/images/gal/img3.jpg">
         <img src="resources/images/gal/img4.jpg">
         <img src="resources/images/gal/img5.jpg">
         <img src="resources/images/gal/img6.jpg">
         <img src="resources/images/gal/img7.jpg">
         <img src="resources/images/gal/img8.jpg">
         <img src="resources/images/gal/img9.jpg">
         <img src="resources/images/gal/img10.jpg">
         <img src="resources/images/gal/img11.jpg">
         <img src="resources/images/gal/img12.jpg">
         <img src="resources/images/gal/img13.jpg">
         <img src="resources/images/gal/img14.jpg">
         <img src="resources/images/gal/img15.jpg">
         <img src="resources/images/gal/img16.jpg">
         <img src="resources/images/gal/img17.jpg">
         <img src="resources/images/gal/img18.jpg">
         <img src="resources/images/gal/img19.jpg">
         <img src="resources/images/gal/img20.jpg">
         <img src="resources/images/gal/img21.jpg">
         <img src="resources/images/gal/img22.jpg">
         <img src="resources/images/gal/img23.jpg">
         <img src="resources/images/gal/img24.jpg">
      </div>
      <table>
         <thead>
         <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>작성일</th>
            <th>조회수</th>
         </tr>   
      </thead>
      <tbody></tbody>
      </table>

</body>
</html>

9.2일

++ list화면에서 삭제시에는 detail쪽에 이미지가 안뜨는 문제가 있어서 코드 수정함

1. 내가 한거

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.paging_area{
	display: block; 
	position: relative; 
	left: 0;
	margin-bottom: 10px;
	font-size: 14px;
}

.main{
	display: flex;
	padding: 100px 200px;
	justify-content: space-between;
}
.main > div {
	width: 700px;	
}

.left_area img {
	width: 680px;
	height: 400px;
	border-radius: 15px;
	
}



.table {
	border-collapse: collapse;
	width: 100%;
	margin: 15px 0px;
}

.right_area img{ 
	width: 200px;
	height: 180px;
	/* object-fit: cover; */
}

.table tbody tr {
	height: 40px;
	text-align: center;
	color: #7b7b7b;
	font-size: 10.5pt;
}

.table tbody tr {
	
}

.tbody img{
	cursor: pointer;
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<script type="text/javascript">
var flag = true;
$(document).ready(function () {

	//목록 조회
	reloadList();
	
	
	//페이징 버튼
	$(".paging_area").on("click", "span", function () {
		
		$("#page").val($(this).attr("page"));
		
		reloadList();
	})
	
	// 등록버튼
	$("#insertBtn").on("click", function () {
		console.log("1");
		
		$("#actionForm").attr("action", "AGInsert");
		$("#actionForm").submit();
	})
	

	$(".tbody").on("click", "td", function () {
		$("#no").val($(this).attr("no"));
		
	 	/* $("#actionForm").attr("action", "AGDetail");
		$("#actionForm").submit();  */
		
		// 단건을 ajax로 보내서 왼쪽 화면에 그려
		var params = $("#actionForm").serialize();
		
		
		$.ajax({
			url : "AGDetailAjax", //경로
			type : "POST", // 전송방식(GET: 주소형태, POST : 주소 헤더 형태)
			dataType: "json", // 데이터 형태
			data: params, // 보낼데이터
			success : function(res) { //성공했을 때 결과를 res에 받고 함수 실행
				console.log(res); // 콘솔에  pd랑 list 값이 보임
				
				var html = "";
				
				html += "<tr>";
				html += "<td colspan=\"2\">";
				html += "<img alt=\"\" src=\"resources/upload/"+ res.data.PIC +"\">";
				html += "</td>"
				html += "</tr>"
				html += "<tr>";
				html += "<th>번호</th>"
				html += "<td>" + res.data.NO+ "</td>";
				html += "</tr>"
				html += "<tr>";
				html += "<th>제목</th>"
				html += "<td>" + res.data.TITLE+ "</td>";
				html += "</tr>"
				html += "<tr>";
				html += "<th>작성일</th>"
				html += "<td>" + res.data.DT+ "</td>";
				html += "</tr>"
				html += "<tr>";
				html += "<th>조회수</th>"
				html += "<td>" + res.data.HIT+ "</td>";
				html += "</tr>"
				html += "<th>내용</th>"
				html += "<td>" + res.data.DISCRIPT+ "</td>";
				html += "</tr>"
			

				$(".left_area tbody").html(html);
				
				
			 	var html1 ="";
				
		
				if("${sMemNo}" == res.data.MEM_NO){
					html1 += "<div class=\"cmn_btn_ml float_right_btn\" id=\"deleteBtn\" onclick=\"deleteF()\">삭제</div>";
					html1 += "<div class=\"cmn_btn_ml float_right_btn\" id=\"updateBtn\">수정</div>";
				}
			
				$(".left_area .btn_wrap").html(html1); 
				
				

			},
			error : function(request, status, error) { // 실패했을 때 함수실행
				console.log(request.responseText); // 실패 상세 태역
			}
		});
		
	})
	

	$(".btn_wrap").on("click", "#updateBtn", function () {
		$("#actionForm").attr("action","AGUpdate");
		$("#actionForm").submit();
		
	});
	
});

function deleteF() {
	// ajax사용 예정
	$("#deleteBtn").on("click", function () {
		  makePopup({
		         title : "알림",
		         contents : "삭제하시겠습니까?",
		         // draggable : true,
		         buttons : [{
		            name : "삭제",
		            func:function() {
		            	var params = $("#actionForm").serialize();
		    			
		    			$.ajax({
		    				url : "AGAction/delete", //restful api라는게 여기서 시작한다고?
		    				type : "POST", 
		    				dataType: "json", 
		    				data: params, 
		    				success : function(res) { 
		    					switch(res.msg){
		    					case "success" : 
		    						// 카테고리를 유지하고 나머지 정보 초기화
									$("#page").val("1");
								

									$("#actionForm").attr("action","AGList");
									$("#actionForm").submit();
		    						break;
		    					case "fail" :
		    						makeAlert("알림" , "삭제에 실패하였습니다.");
		    						break;
		    					case "error" :
		    						makeAlert("알림" , "삭제 중 문제가 발생하였습니다.");
		    						break;
		    					}
		    				},
		    				error : function(request, status, error) { 
		    					console.log(request.responseText); 
		    				}
		    			});
		            }
		         }, {
		            name : "취소"
		    }]
		});
	});
}


// 목록 조회 호출, ajax불러오기
function reloadList() {
	var params = $("#actionForm").serialize();
	
	$.ajax({
		url : "AGListAjax", //경로
		type : "POST", // 전송방식(GET: 주소형태, POST : 주소 헤더 형태)
		dataType: "json", // 데이터 형태
		data: params, // 보낼데이터
		success : function(res) { //성공했을 때 결과를 res에 받고 함수 실행
			console.log(res); // 콘솔에  pd랑 list 값이 보임
			drawList(res.list);
			drawPaging(res.pd);
	
			
		},
		error : function(request, status, error) { // 실패했을 때 함수실행
			console.log(request.responseText); // 실패 상세 태역
		}
	});
	
}


function drawList(list) {
	var html = "";

	var cnt = 0;
  	console.log(list[0].PIC);
  	
	for(var data of list){
		if(cnt == 0) {
			html += "<tr>";
		}
		
		html += "<td no=\"" + data.NO + "\">";
		html += "<img alt=\"\" src=\"resources/upload/"+ data.PIC +"\">";
		html += "</td>"
		
		if(cnt == 2) {
			html += "</tr>";
		}
		cnt++;
		
		if(cnt >= 3) {
			cnt = 0;
		}
	}   
	$(".tbody").html(html);
	
	
	//처음일때만..
	// 강제로 tr td
	// enter키 누린것처럼
	

	if("${param.no}" != "") { // param.no가 있다면
		console.log("${param.no}");
		flag = false; 
		
		if($("td[no='${param.no}']").length == 0){ // 삭제 
			$(".tbody").children().eq(0).children().eq(0).click();
		} else { // 수정
			$("td[no='${param.no}']").click();
		}

	} else if(flag) {
		console.log("else")
		flag = false; // 이게 없으면 페이징하면 그 페이지에 첫번째로 다시 로드됨, 내가 보고있던 디테일이 아니라
		
		if($(".tbody").html() != "") { // .tbody에 데이터가 있다면
			$(".tbody").children().eq(0).children().eq(0).click(); // click()는 위에 있는 클릭이벤트를 지칭
		}
		
	}
	
}


function drawPaging(pd) {
	var html = "";
	
	html += "<span class=\"page_btn page_first\" page=\"1\">처음</span>";
	// 이전
	if($("#page").val() == "1"){
		html += "<span class=\"page_btn page_prev\" page=\"1\">이전</span>";
	} else{
		// 문자열을 숫자로 바꾸기위해 *1
		html += "<span class=\"page_btn page_prev\" page=\"" + ($("#page").val() *1 - 1) + "\">이전</span>";
	}
	
	for(var i = pd.startP; i <= pd.endP; i++){
		if($("#page").val() * 1 == i){ // 현재 페이지
			html += "<span class=\"page_btn_on\" page=\"" + i + "\">" + i + "</span>";
		} else { // 다른 페이지
			html += "<span class=\"page_btn\" page=\"" + i + "\">" + i + "</span>";
		}
	}
	
	if($("#page").val() *1 == pd.endP){ // 현재페이지가 마지막 페이지라면
		html += "<span class=\"page_btn page_next\" page=\"" +pd.maxP+ "\">다음</span>";
	} else {
		html += "<span class=\"page_btn page_next\" page=\"" + ($("#page").val() *1 + 1) + "\">다음</span>";
	}
	
	html += "<span class=\"page_btn page_last\" page=\"" +pd.maxP+ "\">마지막</span>";
	
	$(".paging_area").html(html);
                                                                     
}
</script>		
</head>
<body>
<c:import url="/testAHeader"></c:import>
<hr/>
<div class="main">
<form action="#" id="actionForm" method="post">
	<input type="hidden" name="no" id="no" value="${data.NO}"/>
	<input type="hidden" name="page" id="page" value="${page}" />
</form>
<div class="left_area">
<table class="board_table">
	<colgroup>
		<col width="100" />
		<col width="600" />
	</colgroup>	
	<thead>
	</thead>
	<tbody>
	
	</tbody>
</table>
<div class="btn_wrap">

</div>
</div>
<div class="right_area">
<table class="table">
	<colgroup>
		<col width="100" />
		<col width="100" />
		<col width="100" />
	</colgroup>
	<tbody class="tbody">
	</tbody>
</table>
<div class="paging_area"></div>
<c:if test="${!empty sMemNo}">
			<div class="cmn_btn_ml float_right_btn" id="insertBtn">등록</div>
</c:if>
</div>
</div>
</body>
</html>

2. 강사님이 고쳐주신거 (flag 사용) 강사님 삭제버튼도 고쳐주심, onclick이벤트 말고, 변하지 않는곳에 이벤트 걸음

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.paging_area{
	display: block; 
	position: relative; 
	left: 0;
	margin-bottom: 10px;
	font-size: 14px;
}

.main{
	display: flex;
	padding: 100px 200px;
	justify-content: space-between;
}
.main > div {
	width: 700px;	
}

.left_area img {
	width: 680px;
	height: 400px;
	border-radius: 15px;
	
}



.table {
	border-collapse: collapse;
	width: 100%;
	margin: 15px 0px;
}

.right_area img{ 
	width: 200px;
	height: 180px;
	/* object-fit: cover; */
}

.table tbody tr {
	height: 40px;
	text-align: center;
	color: #7b7b7b;
	font-size: 10.5pt;
}

.table tbody tr {
	
}

.tbody img{
	cursor: pointer;
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<script type="text/javascript">
var flag = true;
$(document).ready(function () {

	//목록 조회
	reloadList();
	
	
	//페이징 버튼
	$(".paging_area").on("click", "span", function () {
		
		$("#page").val($(this).attr("page"));
		
		reloadList();
	})
	
	// 등록버튼
	$("#insertBtn").on("click", function () {
		console.log("1");
		
		$("#actionForm").attr("action", "AGInsert");
		$("#actionForm").submit();
	})
	

	$(".tbody").on("click", "td", function () {
		$("#no").val($(this).attr("no"));
		
	 	/* $("#actionForm").attr("action", "AGDetail");
		$("#actionForm").submit();  */
		
		// 단건을 ajax로 보내서 왼쪽 화면에 그려
		var params = $("#actionForm").serialize();
		
		
		$.ajax({
			url : "AGDetailAjax", //경로
			type : "POST", // 전송방식(GET: 주소형태, POST : 주소 헤더 형태)
			dataType: "json", // 데이터 형태
			data: params, // 보낼데이터
			success : function(res) { //성공했을 때 결과를 res에 받고 함수 실행
				console.log(res); // 콘솔에  pd랑 list 값이 보임
				
				var html = "";
				
				html += "<tr>";
				html += "<td colspan=\"2\">";
				html += "<img alt=\"\" src=\"resources/upload/"+ res.data.PIC +"\">";
				html += "</td>"
				html += "</tr>"
				html += "<tr>";
				html += "<th>번호</th>"
				html += "<td>" + res.data.NO+ "</td>";
				html += "</tr>"
				html += "<tr>";
				html += "<th>제목</th>"
				html += "<td>" + res.data.TITLE+ "</td>";
				html += "</tr>"
				html += "<tr>";
				html += "<th>작성일</th>"
				html += "<td>" + res.data.DT+ "</td>";
				html += "</tr>"
				html += "<tr>";
				html += "<th>조회수</th>"
				html += "<td>" + res.data.HIT+ "</td>";
				html += "</tr>"
				html += "<th>내용</th>"
				html += "<td>" + res.data.DISCRIPT+ "</td>";
				html += "</tr>"
			

				$(".left_area tbody").html(html);
				
				
			 	var html1 ="";
				
		
				if("${sMemNo}" == res.data.MEM_NO){
					html1 += "<div class=\"cmn_btn_ml float_right_btn\" id=\"deleteBtn\">삭제</div>";
					html1 += "<div class=\"cmn_btn_ml float_right_btn\" id=\"updateBtn\">수정</div>";
				}
			
				$(".left_area .btn_wrap").html(html1); 
				
				

			},
			error : function(request, status, error) { // 실패했을 때 함수실행
				console.log(request.responseText); // 실패 상세 태역
			}
		});
		
	})
	

	$(".btn_wrap").on("click", "#updateBtn", function () {
		$("#actionForm").attr("action","AGUpdate");
		$("#actionForm").submit();
		
	});
	
	$("body").on("click", "#deleteBtn", function () {
		  makePopup({
		         title : "알림",
		         contents : "삭제하시겠습니까?",
		         // draggable : true,
		         buttons : [{
		            name : "삭제",
		            func:function() {
		            	var params = $("#actionForm").serialize();
		    			
		    			$.ajax({
		    				url : "AGAction/delete", //restful api라는게 여기서 시작한다고?
		    				type : "POST", 
		    				dataType: "json", 
		    				data: params, 
		    				success : function(res) { 
		    					switch(res.msg){
		    					case "success" : 
		    						flag = true; // 여기 수정
		    						
		    						// 카테고리를 유지하고 나머지 정보 초기화
									$("#page").val("1");
								
 
									reloadList(); // 여기 수정
									
									closePopup(); // 여기 수정
		    						break;
		    					case "fail" :
		    						makeAlert("알림" , "삭제에 실패하였습니다.");
		    						break;
		    					case "error" :
		    						makeAlert("알림" , "삭제 중 문제가 발생하였습니다.");
		    						break;
		    					}
		    				},
		    				error : function(request, status, error) { 
		    					console.log(request.responseText); 
		    				}
		    			});
		            }
		         }, {
		            name : "취소"
		    }]
		});
	});
	
});


// 목록 조회 호출, ajax불러오기
function reloadList() {
	var params = $("#actionForm").serialize();
	
	$.ajax({
		url : "AGListAjax", //경로
		type : "POST", // 전송방식(GET: 주소형태, POST : 주소 헤더 형태)
		dataType: "json", // 데이터 형태
		data: params, // 보낼데이터
		success : function(res) { //성공했을 때 결과를 res에 받고 함수 실행
			console.log(res); // 콘솔에  pd랑 list 값이 보임
			drawList(res.list);
			drawPaging(res.pd);
	
			
		},
		error : function(request, status, error) { // 실패했을 때 함수실행
			console.log(request.responseText); // 실패 상세 태역
		}
	});
	
}


function drawList(list) {
	var html = "";

	var cnt = 0;
  	console.log(list[0].PIC);
  	
	for(var data of list){
		if(cnt == 0) {
			html += "<tr>";
		}
		
		html += "<td no=\"" + data.NO + "\">";
		html += "<img alt=\"\" src=\"resources/upload/"+ data.PIC +"\">";
		html += "</td>"
		
		if(cnt == 2) {
			html += "</tr>";
		}
		cnt++;
		
		if(cnt >= 3) {
			cnt = 0;
		}
	}   
	$(".tbody").html(html);
	
	
	//처음일때만..
	// 강제로 tr td
	// enter키 누린것처럼
	

	if("${param.no}" != "") { // param.no가 있다면
		flag = false; // 이거 없어도 되는데??음????

		$("td[no='${param.no}']").click(); // 수정
	} else if(flag) {
		console.log("else")
		flag = false; // 이게 없으면 페이징하면 그 페이지에 첫번째로 다시 로드됨, 내가 보고있던 디테일이 아니라
		
		if($(".tbody").html() != "") { // .tbody에 데이터가 있다면
			$(".tbody").children().eq(0).children().eq(0).click(); // click()는 위에 있는 클릭이벤트를 지칭
		}
		
	}
	
}


function drawPaging(pd) {
	var html = "";
	
	html += "<span class=\"page_btn page_first\" page=\"1\">처음</span>";
	// 이전
	if($("#page").val() == "1"){
		html += "<span class=\"page_btn page_prev\" page=\"1\">이전</span>";
	} else{
		// 문자열을 숫자로 바꾸기위해 *1
		html += "<span class=\"page_btn page_prev\" page=\"" + ($("#page").val() *1 - 1) + "\">이전</span>";
	}
	
	for(var i = pd.startP; i <= pd.endP; i++){
		if($("#page").val() * 1 == i){ // 현재 페이지
			html += "<span class=\"page_btn_on\" page=\"" + i + "\">" + i + "</span>";
		} else { // 다른 페이지
			html += "<span class=\"page_btn\" page=\"" + i + "\">" + i + "</span>";
		}
	}
	
	if($("#page").val() *1 == pd.endP){ // 현재페이지가 마지막 페이지라면
		html += "<span class=\"page_btn page_next\" page=\"" +pd.maxP+ "\">다음</span>";
	} else {
		html += "<span class=\"page_btn page_next\" page=\"" + ($("#page").val() *1 + 1) + "\">다음</span>";
	}
	
	html += "<span class=\"page_btn page_last\" page=\"" +pd.maxP+ "\">마지막</span>";
	
	$(".paging_area").html(html);
                                                                     
}
</script>		
</head>
<body>
<c:import url="/testAHeader"></c:import>
<hr/>
<div class="main">
<form action="#" id="actionForm" method="post">
	<input type="hidden" name="no" id="no" value="${data.NO}"/>
	<input type="hidden" name="page" id="page" value="${page}" />
</form>
<div class="left_area">
<table class="board_table">
	<colgroup>
		<col width="100" />
		<col width="600" />
	</colgroup>	
	<thead>
	</thead>
	<tbody>
	
	</tbody>
</table>
<div class="btn_wrap">

</div>
</div>
<div class="right_area">
<table class="table">
	<colgroup>
		<col width="100" />
		<col width="100" />
		<col width="100" />
	</colgroup>
	<tbody class="tbody">
	</tbody>
</table>
<div class="paging_area"></div>
<c:if test="${!empty sMemNo}">
			<div class="cmn_btn_ml float_right_btn" id="insertBtn">등록</div>
</c:if>
</div>
</div>
</body>
</html>

기존

수정

국비 TIL(Today I Learned) 20220826 카테고리별 게시판

토희 — Fri, 26 Aug 2022 13:27:37 +0900

list.jsp에 추가

카테고리 관련 데이터를 취득

list.jsp 변경

T_SQL.XML에 추가

AND T.CATE_NO = #{cateNo} 등등 cata관련 추가

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="T">
	<select id="getTCnt" resultType="Integer" parameterType="hashmap">
		SELECT COUNT(*) AS CNT
		FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
		AND M.DEL = 1
		WHERE T.DEL = 1
		AND T.CATE_NO = #{cateNo}
		<if test="searchTxt != null and searchTxt !=''">
			<choose>
				<when test="searchGbn eq 0">
					AND T.TITLE LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn eq 1">
					AND M.MEM_NM LIKE '%' ||  #{searchTxt} || '%'
				</when>
			</choose>
		</if>
	</select>
	
	<select id="getTList" resultType="hashmap" parameterType="hashmap">
		SELECT T.NO, T.TITLE, T.MEM_NM, T.HIT, T.DT, T.ATT
		FROM(
		SELECT T.NO, T.TITLE, M.MEM_NM, T.HIT,
		CASE WHEN TO_CHAR(DT,'YY.MM.DD') = TO_CHAR(SYSDATE, 'YY.MM.DD')
		        THEN TO_CHAR(DT, 'HH24:MI')
		        ELSE TO_CHAR(DT, 'YY.MM.DD')
		        END AS DT, ATT,
		        ROW_NUMBER() OVER(ORDER BY T.NO DESC) AS RNUM
				FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
				AND M.DEL = 1
		WHERE T.DEL = 1
		AND T.CATE_NO = #{cateNo}
		<if test="searchTxt != null and searchTxt !=''">
			<choose>
				<when test="searchGbn eq 0">
					AND T.TITLE LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn eq 1">
					AND M.MEM_NM LIKE '%' ||  #{searchTxt} || '%'
				</when>
			</choose>
		</if>) T
		WHERE T.RNUM BETWEEN #{start} AND #{end}
	</select>
	
	<insert id="insertT" parameterType="hashmap">
		INSERT INTO TBOARD(NO, TITLE, MEM_NO, CON, ATT, CATE_NO)
		VALUES (TBOARD_SEQ.NEXTVAL, #{title} , #{memNo}, #{con}, #{att}, #{cateNo})
	</insert>
	 
	<select id="getT" parameterType="hashmap"  resultType="hashmap">
		SELECT T.NO, T.TITLE, M.MEM_NO, M.MEM_NM, T.CON, T.HIT,
	    TO_CHAR(T.DT, 'YYYY-MM-DD') AS DT, T.ATT
		FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
		AND M.DEL = 1
		WHERE T.DEL = 1
		AND T.NO = #{no}
	</select>
	
	<update id="updateTHit" parameterType="hashmap">
		UPDATE TBOARD SET HIT = HIT + 1
		WHERE NO = #{no}
	</update>
	
	<update id="deleteT"  parameterType="hashmap">
		UPDATE TBOARD SET DEL = 0
		WHERE NO = #{no}
	</update>
	
	<update id="updateT"  parameterType="hashmap">		
		UPDATE TBOARD SET TITLE = #{title},
		CON = #{con},
		ATT = #{att}
		WHERE NO = #{no}
	</update>
</mapper>

코드형 게시판

동시에 여러개의 테이블을 하나의 게시판으로

블로그는 카테고리 대신 내 아이디를 항상 조건으로!

다음주, 스케줄링 관련

주기적으로 도는 프로그램

특정 요일에 도는 프로그램

쓰는건 간단, 이해하는게 어렵

Restful Controller -> jsp관련

T에 있는 화면 수정 T를 카테고리 자유게시판으로

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
#searchTxt{
width: 160px;
height: 30px; 
padding: 0px 2px;
text-indent: 5px;
vertical-align: middle;
border: 1px solid #d7d7d7; 
outline-color: #70adf9;
box-sizing: border-box;
}
.search_area{
	width: 800px;
	text-align: right;
	margin: 0 auto;
}
.board_area{
	width: 800px;
	margin: 0 auto;
}

.att {
	display: inline-block; 
	vertical-align: top; 
	width: 18px; 
	height: 18px; 
	background-image: url('resources/images/attFile.png'); 
	background-size: cover;
}
#cateNo { 
	min-width: 100px; 
	height: 30px; 
	vertical-align: middle; 
	boder: 1px soild #d7d7d7; 
	float: left
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	if("${params.searchGbn}" != ""){
		$("#searchGbn").val("${param.searchGbn}");
	} else {
		$("#oldGbn").val("0");
	}
	
	// 카테고리 설정
	if("${param.cateNo}" != ""){
		$("#cateNo").val("${param.cateNo}");
	}
	// 카테고리 변경시
	$("#cateNo").on("change", function () {
		// 검색 및 페이징 초기화
		$("#page").val("1");
		$("#searchGbn").val("0");
		$("#searchTxt").val("");
		$("#oldGbn").val("0");
		$("#oldTxt").val("");
		//목록 조회
		reloadList();
	})
	
	
	//목록 조회
	reloadList();
	
	//검색버튼
	$("#searchBtn").on("click", function () {
		$("#page").val("1");
		// 이동을 안하다보니 문제가 기존검색값 셋팅을 안해줌
		// 그래서  신규 상태 적용
		$("#oldGbn").val($("#searchGbn").val());
		$("#oldTxt").val($("#searchTxt").val());
		
		
		// 데이터만 가져와서 다시 그려줌, 화면 이동 없음
		reloadList();
	});
	
	//페이징 버튼
	$(".paging_area").on("click", "span", function () {
		// 기존 검색상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
			
		
		$("#page").val($(this).attr("page"));
		
		reloadList();
	})
	
	// 등록버튼
	$("#insertBtn").on("click", function () {
		// 기존 검색상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action", "ATInsert");
		$("#actionForm").submit();
	})
	
	$("tbody").on("click", "tr", function () {
		$("#no").val($(this).attr("no"));
		
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action", "ATDetail");
		$("#actionForm").submit();
	})
});

// 목록 조회 호출, ajax불러오기
function reloadList() {
	var params = $("#actionForm").serialize();
	
	$.ajax({
		url : "ATListAjax", //경로
		type : "POST", // 전송방식(GET: 주소형태, POST : 주소 헤더 형태)
		dataType: "json", // 데이터 형태
		data: params, // 보낼데이터
		success : function(res) { //성공했을 때 결과를 res에 받고 함수 실행
			console.log(res); // 콘솔에  pd랑 list 값이 보임
			drawList(res.list);
			drawPaging(res.pd);
		},
		error : function(request, status, error) { // 실패했을 때 함수실행
			console.log(request.responseText); // 실패 상세 태역
		}
	});
	
}

function drawList(list) {
	var html = "";
	
	// list에는 map이 들어있으니까 하나씩 꺼내오겠다
	for(var data of list){
		console.log(typeof(data.ATT) !="undefined");
		html += "<tr no=\"" + data.NO + "\">";
		html += "<td>" + data.NO + "</td>";
		html += "<td>";
		html += data.TITLE;
		if(typeof(data.ATT) !="undefined"){ // 첨부파일이 있다면
			html += "<span class=\"att\"></span>";
		}
		html += "</td>";
		html += "<td>" + data.MEM_NM + "</td>";
		html += "<td>" + data.DT + "</td>";
		html += "<td>" + data.HIT + "</td>";
		html += "</tr>";
	}   
	
	$("tbody").html(html);
}

function drawPaging(pd) {
	var html = "";
	
	html += "<span class=\"page_btn page_first\" page=\"1\">처음</span>";
	// 이전
	if($("#page").val() == "1"){
		html += "<span class=\"page_btn page_prev\" page=\"1\">이전</span>";
	} else{
		// 문자열을 숫자로 바꾸기위해 *1
		html += "<span class=\"page_btn page_prev\" page=\"" + ($("#page").val() *1 - 1) + "\">이전</span>";
	}
	
	for(var i = pd.startP; i <= pd.endP; i++){
		if($("#page").val() * 1 == i){ // 현재 페이지
			html += "<span class=\"page_btn_on\" page=\"" + i + "\">" + i + "</span>";
		} else { // 다른 페이지
			html += "<span class=\"page_btn\" page=\"" + i + "\">" + i + "</span>";
		}
	}
	
	if($("#page").val() *1 == pd.endP){ // 현재페이지가 마지막 페이지라면
		html += "<span class=\"page_btn page_next\" page=\"" +pd.maxP+ "\">다음</span>";
	} else {
		html += "<span class=\"page_btn page_next\" page=\"" + ($("#page").val() *1 + 1) + "\">다음</span>";
	}
	
	html += "<span class=\"page_btn page_last\" page=\"" +pd.maxP+ "\">마지막</span>";
	
	$(".paging_area").html(html);
                                                                     
}
</script>		
</head>
<body>
<c:import url="/testAHeader"></c:import>
<hr/>
<!-- 페이징 때 기존 검색 내용 유지용 -->
<input type="hidden" id="oldGbn" value="${param.searchGbn}"/>
<input type="hidden" id="oldTxt" value="${param.searchTxt}"/>

<!-- 데이터 후 처리해서 로딩이 빨라 -->
<div class="search_area">
	<!--  method="post"는 나중에 쓸 예정, no 보낼때 -->
	<form action="#" id="actionForm" method="post">
	<select name="cateNo" id="cateNo">
		<c:forEach var="data" items="${cate}">
			<option value="${data.CATE_NO}">${data.CATE_NM}</option>
		</c:forEach>
	</select>
	<input type="hidden" name="no" id="no" />
		<input type="hidden" name="page" id="page" value="${page}" />
		<select name="searchGbn" id="searchGbn">
			<option value="0">제목</option>
			<option value="1">작성자</option>
		</select>
		<input type="text" name="searchTxt" id="searchTxt" value="${param.searchTxt}" />
		<div class="cmn_btn_ml" id="searchBtn">검색</div>
		<c:if test="${!empty sMemNo}">
			<div class="cmn_btn_ml" id="insertBtn">등록</div>
		</c:if>
	</form>
</div>
<div class="board_area">
<table class="board_table">
	<colgroup>
		<col width="100" />
		<col width="400" />
		<col width="100" />
		<col width="100" />
		<col width="100" />
	</colgroup>
	<thead>
		<tr>
			<th>번호</th>
			<th>제목</th>
			<th>작성자</th>
			<th>작성일</th>
			<th>조회수</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>
<div class="paging_area"></div>
</div>
</body>
</html>

insert.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글쓰기</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{
	width: 800px;
	margin: 0 auto;
}


</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/jquery/jquery.form.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<!-- CKEditor -->
<!-- 제이쿼리 뒤에 나와야함, 제이쿼리 기반으로 동작하기 때문에 -->
<script type="text/javascript" src="resources/script/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 에디터 연결
	// CKEDITOR.replace(아이디, 옵션)
	CKEDITOR.replace("con", {
		resize_enabled: false, // resize_enabled : 크기조절기능 활용여부
		language : "ko", // 사용언어
		enterMode: "2", // 엔터키처리방법. 2번이면 <br/>
		width : "100%", // 숫자일경우 px, 문자열일경우 css크기
		height : 400
	});
	
	$("#listBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	$("#insertBtn").on("click", function () {
		// CKEditor의 값 취득
		// CKEDITOR.instances[아이디] : CKEditor중 아이디가 같은 것을 찾겠다.
		//.getData() : 작성중인 내용을 취득하겠다.
		$("#con").val(CKEDITOR.instances['con'].getData());
		
		if($.trim($("#title").val()) == ""){
			makeAlert("알림","제목 입력하세요." , function () {
				$("#title").focus();
			})
		} else if($.trim($("#con").val()) == ""){
			makeAlert("알림","내용을 입력하세요." , function () {
				$("#con").focus();
			})
		} else {
			// 1. 파입업로드 -> 2. 업로드 파일명 취득 -> 3. 글 저장
			// 폼 객체 취득
			var form = $("#actionForm");
			// ajaxForm 적용
			form.ajaxForm({
				success: function (res) { // 데이터 주고 받기 성공시
					if(res.result == "SUCCESS"){ // 파일 전송 성공
						// 올라간 파일이 존재한다면, 첨부파일이 없을 수도 있으니 조건문 처리
						if(res.fileName.length > 0){
							$("#att").val(res.fileName[0]); // 올라간 파일명 보관		
						}
						// 3번 단계 글저장 시작, 기존테이터
						var params = $("#actionForm").serialize();
						
						$.ajax({
							url : "ATAction/insert", //restful api라는게 여기서 시작한다고?
							type : "POST", 
							dataType: "json", 
							data: params, 
							success : function(res) { 
								switch(res.msg){
								case "success" : 
									// 카테고리를 유지하고 나머지 정보 초기화
									$("#page").val("1");
									$("#searchGbn").val("0");
									$("#searchTxt").val("");
								
									$("#backForm").submit();
									break;
								case "fail" :
									makeAlert("알림" , "등록에 실패하였습니다.");
									break;
								case "error" :
									makeAlert("알림" , "등록 중 문제가 발생하였습니다.");
									break;
								}
							},
							error : function(request, status, error) { 
								console.log(request.responseText); 
							}
						});  // 글저장 끝
						
					} else { // 문제발생
						makeAlert("알림", "파일 업로드에<br/>문제가 발생하였습니다.")
					}
				},
				error: function () { // 에러시
					makeAlert("알림", "파일 업로드에<br/>문제가 발생하였습니다.")
				}
			}); // ajaxForm 설정 끝
			
			
			// ajaxForm 실행
			form.submit();
			
		}
	});
});

</script>
</head>
<body>
<c:import url="/testAHeader"></c:import>
<form action="ATList" id="backForm" method="post">
	<input type="hidden" name="page" id="page" value="${param.page}" />
	<input type="hidden" name="searchGbn" id="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" id="searchTxt" value="${param.searchTxt}"/>
	<!-- 전화면에서 넘어온 카테고리 번호 -->
	<input type="hidden" name="cateNo"value="${param.cateNo}"/>
</form>
<!-- ajax쓰기 때문에 gbn 지움 -->
<div class="wrap">
	<form action="fileUploadAjax" id="actionForm" method="post" enctype="multipart/form-data">
		<input type="hidden" name="att" id="att" /> <!-- 실 저장된 파일명 보관용 -->
		<table class="board_detail_table">
			<tr>
				<th>카테고리</th>
				<td>${cateNm}<input type="hidden" name="cateNo"value="${param.cateNo}"/></td>
			</tr>
			<tr>
				<th>제목</th>
				<td><input type="text" name="title" id="title" /></td>
			</tr>
			<tr>
				<th>작성자</th>
				<td>${sMemNm}<input type="hidden" name="memNo" value="${sMemNo}" /><br/></td>
			</tr>
			<tr>
				<th colspan="2">내용</th>
			</tr>
			<tr>
				<th colspan="2"><textarea rows="10" cols="30" name="con" id="con"></textarea></th>
			</tr>
			
			<tr>
				<th>첨부파일</th>
				<td><input type="file" name="attFile" /></td>
			</tr>
		</table>
	</form>
	<div class="cmn_btn_ml float_right_btn" id="listBtn">목록</div>
	<div class="cmn_btn_ml float_right_btn" id="insertBtn">등록</div>
</div>
</body>
</html>

detail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- jsl의 functions : el tag 추가옵션 -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상세보기</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{
	width: 800px;
	margin: 0 auto;
}
.con{
text-align: left; 
min-height: 400px;
}
</style>
<script type="text/javascript" 
		src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
src="resources/script/common/popup.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#listBtn").on("click", function() {
		$("#actionForm").attr("action","ATList"); 
		$("#actionForm").submit();
	});
	
	// ajax사용 예정
	$("#deleteBtn").on("click", function () {
		  makePopup({
		         title : "알림",
		         contents : "삭제하시겠습니까?",
		         // draggable : true,
		         buttons : [{
		            name : "삭제",
		            func:function() {
		            	var params = $("#actionForm").serialize();
		    			
		    			$.ajax({
		    				url : "ATAction/delete", //restful api라는게 여기서 시작한다고?
		    				type : "POST", 
		    				dataType: "json", 
		    				data: params, 
		    				success : function(res) { 
		    					switch(res.msg){
		    					case "success" : 
		    						// 카테고리를 유지하고 나머지 정보 초기화
									$("#page").val("1");
									$("#searchGbn").val("0");
									$("#searchTxt").val("");
								

									$("#actionForm").attr("action","ATList");
									$("#actionForm").submit();
		    						break;
		    					case "fail" :
		    						makeAlert("알림" , "삭제에 실패하였습니다.");
		    						break;
		    					case "error" :
		    						makeAlert("알림" , "삭제 중 문제가 발생하였습니다.");
		    						break;
		    					}
		    				},
		    				error : function(request, status, error) { 
		    					console.log(request.responseText); 
		    				}
		    			});
		            }
		         }, {
		            name : "취소"
		    }]
		});
	});
	
	$("#updateBtn").on("click", function () {
		$("#actionForm").attr("action","ATUpdate");
		$("#actionForm").submit();
	});
});

</script>
</head>
<body>
<c:import url="/testAHeader"></c:import>
<form action="#" id="actionForm" method="post">
	<input type="hidden" name="gbn" value="d"> <!-- selRes는 gbn을 받게 되어있어서 값을 추가해줘야함, 이 화면에서는 없어도 됨 -->
	<input type="hidden" name="no" value="${data.NO}">
	<input type="hidden" name="page" id="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
		<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn"  id="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt"  id="searchTxt" value="${param.searchTxt}"/>
	<!-- 전화면에서 넘어온 카테고리 번호 -->
	<input type="hidden" name="cateNo"value="${param.cateNo}"/>
</form>
<div class="wrap">
<table class="board_detail_table">
	<tr>
		<th>카테고리</th>
		<td>${cateNm}</td>
	</tr>
	<tr>
		<th>번호</th>
		<td>${data.NO}</td>
	</tr>
	<tr>
		<th>제목</th>
		<td>${data.TITLE}</td>
	</tr>
	<tr>
		<th>작성자</th>
		<td>${data.MEM_NM}</td>
	</tr>
	<tr>
		<th>조회수</th>
		<td> ${data.HIT}</td>
	</tr>
	<tr>
		<th>작성일</th>
		<td> ${data.DT}</td>
	</tr>
	<tr>
		<th colspan="2">내용</th>
	</tr>
	<tr>
		<td class="con" colspan="2">${data.CON}</td>
	</tr>
	<c:if test="${!empty data.ATT}">
	<!-- fn:length(대상) : 대상 문자열의 길이나 배열, 리스트의 크기를 가져온다 -->
	<c:set var="fileLength" value="${fn:length(data.ATT)}"></c:set>
	<!-- fn:substring(값, 숫자1, 숫자2) : 값을 숫자1이상부터, 숫자2미만까지, 인덱스 기준으로 자른다. -->
	<c:set var="fileName" value="${fn:substring(data.ATT, 20, fileLength)}"></c:set>
	<tr>
		<th>첨부파일</th>
		<!-- download 없으면 이미지를 브라우저에 띄움, 파일을 안 받고 -->
		<!-- download="${fileName}" 옵션을 줘야 다운받을때도 파일명으로 받아짐 -->
		<td><a href="resouces/upload/${data.ATT}" download="${fileName}">${fileName}</a></td>
	</tr>
	</c:if>
</table>
	<div class="cmn_btn_ml float_right_btn" id="listBtn">목록</div>
	<c:if test="${sMemNo eq data.MEM_NO}">
		<div class="cmn_btn_ml float_right_btn" id="deleteBtn">삭제</div>
		<div class="cmn_btn_ml float_right_btn" id="updateBtn">수정</div>
	</c:if>
</div>
</body>

update.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- jsl의 functions : el tag 추가옵션 -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글수정</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{
	width: 800px;
	margin: 0 auto;
}

.att {
	display: none;
}


</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/jquery/jquery.form.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<!-- CKEditor -->
<!-- 제이쿼리 뒤에 나와야함, 제이쿼리 기반으로 동작하기 때문에 -->
<script type="text/javascript" src="resources/script/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 에디터 연결
	// CKEDITOR.replace(아이디, 옵션)
	CKEDITOR.replace("con", {
		resize_enabled: false, // resize_enabled : 크기조절기능 활용여부
		language : "ko", // 사용언어
		enterMode: "2", // 엔터키처리방법. 2번이면 <br/>
		width : "100%", // 숫자일경우 px, 문자열일경우 css크기
		height : 400
	});
	
	$("#cancelBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	// 첨부파일 파일삭제 버튼 클릭시
	$("#fileDelBtn").on("click", function () {
		// 기존 파일 내역 영역 제거
		$(".attOld").remove();
		// 기존 값 제거
		$("#att").val("");
		// 파일 선택 영역 제공 
		$(".att").show();
	});
	
	$("#updateBtn").on("click", function () {
		// CKEditor의 값 취득
		// CKEDITOR.instances[아이디] : CKEditor중 아이디가 같은 것을 찾겠다.
		//.getData() : 작성중인 내용을 취득하겠다.
		$("#con").val(CKEDITOR.instances['con'].getData());
		
		if($.trim($("#title").val()) == ""){
			makeAlert("알림","제목 입력하세요." , function () {
				$("#title").focus();
			})
		} else if($.trim($("#con").val()) == ""){
			makeAlert("알림","내용을 입력하세요." , function () {
				$("#con").focus();
			})
		} else {
			// 1. 파입업로드 -> 2. 업로드 파일명 취득 -> 3. 글 저장
			// 폼 객체 취득
			var form = $("#actionForm");
			// ajaxForm 적용
			form.ajaxForm({
				success: function (res) { // 데이터 주고 받기 성공시
					if(res.result == "SUCCESS"){ // 파일 전송 성공
						// 올라간 파일이 존재한다면, 첨부파일이 없을 수도 있으니 조건문 처리
						if(res.fileName.length > 0){
							$("#att").val(res.fileName[0]); // 올라간 파일명 보관		
						}
						// 3번 단계 글저장 시작, 기존테이터
						var params = $("#actionForm").serialize();
						
						$.ajax({
							url : "ATAction/update", //restful api라는게 여기서 시작한다고?
							type : "POST", 
							dataType: "json", 
							data: params, 
							success : function(res) { 
								switch(res.msg){
								case "success" : 
									$('#backForm').submit();
									break;
								case "fail" :
									makeAlert("알림" , "등록에 실패하였습니다.");
									break;
								case "error" :
									makeAlert("알림" , "등록 중 문제가 발생하였습니다.");
									break;
								}
							},
							error : function(request, status, error) { 
								console.log(request.responseText); 
							}
						});  // 글저장 끝
						
					} else { // 문제발생
						makeAlert("알림", "파일 업로드에<br/>문제가 발생하였습니다.")
					}
				},
				error: function () { // 에러시
					makeAlert("알림", "파일 업로드에<br/>문제가 발생하였습니다.")
				}
			}); // ajaxForm 설정 끝
			
			
			// ajaxForm 실행
			form.submit();
		}
	});
});

</script>
</head>
<body>
<c:import url="/testAHeader"></c:import>
<form action="ATDetail" id="backForm" method="post">
	<input type="hidden" name="no" value="${data.NO}" />
	<input type="hidden" name="page" value="${param.page}" />
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
	<input type="hidden" name="cateNo"value="${param.cateNo}"/>
</form>
<!-- ajax쓰기 때문에 gbn 지움 -->
<div class="wrap">
	<form action="fileUploadAjax" id="actionForm" method="post" enctype="multipart/form-data">
	<input type="hidden" name="no" value="${data.NO}" />
	<!-- 전화면에서 넘어온 카테고리 번호 -->
	<input type="hidden" name="cateNo"value="${param.cateNo}"/>
		<table class="board_detail_table">
			<tr>
				<th>카테고리</th>
				<td>${cateNm}</td>
			</tr>
			<tr>
				<th>번호</th>
				<td>${data.NO}</td>
			</tr>
			<tr>
				<th>제목</th>
				<td><input type="text" name="title" id="title" value="${data.TITLE}"/></td>
			</tr>
			<tr>
				<th>작성자</th>
				<td>${sMemNm}</td>
			</tr>
			<tr>
				<th colspan="2">내용</th>
			</tr>
			<tr>
				<th colspan="2"><textarea rows="10" cols="30" name="con" id="con">${data.CON}</textarea></th>
			</tr>
			<tr>
				<th>첨부파일</th>
				<c:choose>
					<c:when test="${empty data.ATT}">
						<!-- 파일이 없을때 -->
						<td>
							<input type="file" name="attFile" />
							<input type="hidden" name="att" id="att"/>
						</td>
					</c:when>
					<c:otherwise>
					<!-- 파일이 있을때 -->
						<td>
							<span class="attOld"> <!-- 기존 파일 -->
								<!-- fn:length(대상) : 대상 문자열의 길이나 배열, 리스트의 크기를 가져온다 -->
								<c:set var="fileLength" value="${fn:length(data.ATT)}"></c:set>
								<!-- fn:substring(값, 숫자1, 숫자2) : 값을 숫자1이상부터, 숫자2미만까지, 인덱스 기준으로 자른다. -->
								<c:set var="fileName" value="${fn:substring(data.ATT, 20, fileLength)}"></c:set>
								${fileName}
								<div class="cmn_btn_ml float_right_btn" id="fileDelBtn">파일삭제</div>
							</span>
							<span class="att"> <!-- 기존 파일 삭제 후 새 파일 용도 -->
								<input type="file" name="attFile" />
								<input type="hidden" name="att" id="att" value="${data.ATT}"/>
							</span>
						</td>
					</c:otherwise>
				</c:choose>
			</tr>
		</table>
	</form>
	<div class="cmn_btn_ml float_right_btn" id="cancelBtn">취소</div>
	<div class="cmn_btn_ml float_right_btn" id="updateBtn">수정</div>
</div>
</body>
</html>

ATController.java

package com.spring.sample.web.testa.Controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.spring.sample.common.service.IPagingService;
import com.spring.sample.web.testa.dao.IACDao;

@Controller
public class ATController {
	@Autowired
	public IACDao iACDao;

	@Autowired
	public IPagingService ips;

	@RequestMapping(value = "/ATList")
	public ModelAndView ATList(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		// 비동기가 되면 일단 아무것도 처음에 셋팅 X,
		// 페이지만 셋팅
		int page = 1;

		if (params.get("page") != null && params.get("page") != "") {
			page = Integer.parseInt(params.get("page"));
		}

		// 카테고리 목록 취득
		List<HashMap<String, String>> cate = iACDao.getList("cob.getCateAllList");

		mav.addObject("page", page);
		mav.addObject("cate", cate);
		mav.setViewName("testa/T/list");

		return mav;
	}

	@RequestMapping(value = "/ATListAjax", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String ATListAjax(@RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		// 페이지 받아오게 되어있음
		int cnt = iACDao.getInt("T.getTCnt", params);

		HashMap<String, Integer> pd = ips.getPagingData(Integer.parseInt(params.get("page")), cnt, 10, 5);

		params.put("start", Integer.toString(pd.get("start")));
		params.put("end", Integer.toString(pd.get("end")));

		List<HashMap<String, String>> list = iACDao.getList("T.getTList", params);

		model.put("list", list);
		model.put("pd", pd);

		return mapper.writeValueAsString(model);
	}

	@RequestMapping(value = "/ATInsert")
	public ModelAndView aTInsert(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		String cateNm = iACDao.getString("cob.getCate", params);

		mav.addObject("cateNm", cateNm);

		mav.setViewName("testa/T/insert");

		return mav;
	}

	@RequestMapping(value = "/ATAction/{gbn}", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String ATAction(@PathVariable String gbn, @RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		int cnt = 0;

		try {
			switch (gbn) {
			case "insert":
				cnt = iACDao.insert("T.insertT", params);
				break;
			case "update":
				cnt = iACDao.update("T.updateT", params);
				break;
			case "delete":
				cnt = iACDao.update("T.deleteT", params);
				break;
			}

			if (cnt > 0) {
				model.put("msg", "success");
			} else {
				model.put("msg", "fail");
			}
		} catch (Exception e) {
			e.printStackTrace();
			model.put("msg", "error");
		}

		return mapper.writeValueAsString(model);
	}

	// 가져오고 변경되는게 없기 때문에 비동기 처리로 안되도 됨
	@RequestMapping(value = "/ATDetail")
	public ModelAndView aTDetail(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		// 글번호 안 넘어왔을때 처리
		if (params.get("no") != null && params.get("no") != "") {
			// 조회수
			iACDao.update("T.updateTHit", params);
			HashMap<String, String> data = iACDao.getMap("T.getT", params);

			String cateNm = iACDao.getString("cob.getCate", params);

			mav.addObject("cateNm", cateNm);

			mav.addObject("data", data);

			mav.setViewName("testa/T/detail");
		} else {
			mav.setViewName("redirect:ATList");
		}

		return mav;
	}

	@RequestMapping(value = "/ATUpdate")
	public ModelAndView aTUpdate(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		// 글번호 안 넘어왔을때 처리
		if (params.get("no") != null && params.get("no") != "") {
			HashMap<String, String> data = iACDao.getMap("T.getT", params);

			String cateNm = iACDao.getString("cob.getCate", params);

			mav.addObject("cateNm", cateNm);

			mav.addObject("data", data);

			mav.setViewName("testa/T/update");
		} else {
			mav.setViewName("redirect:ATList");
		}

		return mav;
	}

}

Cate_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cob">
	<insert id="insertOb" parameterType="hashmap">
		INSERT INTO CATE(CATE_NO, CATE_NM) VALUES (CATE_SEQ.NEXTVAL, #{cateNm})
	</insert>
	<update id="updateOb" parameterType="hashmap">
		UPDATE CATE SET CATE_NM = #{cateNm}
		WHERE CATE_NO = #{no}
	</update>
	<update id="deleteOb" parameterType="hashmap">
		UPDATE CATE SET DEL = 0
		WHERE CATE_NO = #{no}
	</update>
	<select id="getObCnt" parameterType="hashmap" resultType="Integer">
		SELECT COUNT(*) AS CNT
			FROM CATE
		WHERE DEL = 1
		<if test="searchText != null and searchText != ''">
			<choose>
			 	<when test="searchGbn eq 0">
			 			AND CATE_NO = #{searchText} 
			 	</when>
				<when test="searchGbn eq 1">
			 			AND CATE_NM LIKE '%' || #{searchText} || '%'
			 	</when>
			</choose>
		</if>
	</select>
	<select id="getObList" parameterType="hashmap" resultType="hashmap">
		SELECT S.CATE_NO, S.CATE_NM
		FROM(SELECT CATE_NO, CATE_NM, 
		ROW_NUMBER() OVER(ORDER BY CATE_NO DESC, CATE_NM DESC) AS RNK
		FROM CATE
		 WHERE DEL = 1
	      <if test="searchText != null and searchText != ''">
				<choose>
				 	<when test="searchGbn eq 0">
				 			AND CATE_NO = #{searchText} 
				 	</when>
					<when test="searchGbn eq 1">

				 			AND CATE_NM LIKE '%' || #{searchText} || '%'
				 	</when>
				</choose>
			</if>
	      ) S
		WHERE S.RNK BETWEEN #{start} AND #{end}
	</select>
	
	<select id="getCateAllList" resultType="hashmap">
		SELECT CATE_NO, CATE_NM
		FROM CATE
		WHERE DEL = 1
	</select>
	
	<!-- 이름 취득용 -->
	<select id="getCate" parameterType="hashmap" resultType="String">
		SELECT CATE_NM
		FROM CATE
		WHERE DEL = 1
		AND CATE_NO = #{cateNo}
	</select>
	
	
</mapper>

총 수정한곳 7군데

국비 TIL(Today I Learned) 20220825 AOP(Aspect Oriented Programming) : 관점지향 프로그래밍

토희 — Thu, 25 Aug 2022 15:37:17 +0900

오늘의 요약!!!!!!!!!

오전만에 수업이 끝남 그리고 CRUD 게시판 만드는거 실습

하루에 요약을 3개씩 쓸라고 했느데 쓸말이 없다.....

AOP(Aspect Oriented Programming) : 관점지향 프로그래밍

=> 프로그램이 실행되는 처리 과정을 바라보는 시점에 따라 분할하여 인식하는것, 해당 시점에 추가적 구현을 하는것

Advice: 관점 지점 (아래 사진의 검정색, 쪼갠 시점)

Joinpoint: 진행중인 흐름 (아래 사진의 주황색 부분)

pointcut: 적용 대상

로그인 했느냐 안했느냐에 따라(필터) 어디로 가고 하는거,

이런 필터를 매번 거는게 번거로움, 또 하나 문제점이 비교대상의 세션유형이 바뀌면 해당하는 곳을 다 바꿔줘야함

이 시점에 뭐 했으면 좋겠다 하고 한번구현하면 나머지 쪽에 다 적용된데

이런 부분

설정과 관련된 부분

경로

예전에는 이렇게 썼다. 지금은 안 써서 주석처리해놓으심

요즘에는

https://araikuma.tistory.com/309

[Spring] AspectJ 이용

AOP를 실현하는 것으로, Java에서는 "AspectJ"라는 라이브러리가 널리 사용되고 있다. Spring AOP에서이 AspectJ를 이용한 AOP 처리에 대해 설명한다. AspectJ와 pom.xml 수정 AOP에 대해 조사해 보면, 아마 "Aspe..

araikuma.tistory.com

AspectJ에 대한 설정이 pom.xml에 있음!

다시 AOPComponent

생각해보니, 서버 실행될때, 콘솔창이 testAOP() 뜨는 거 많이 봄!!!

AOPComponent.java

package com.spring.sample.common.component;

import javax.servlet.http.HttpServletRequest;

import org.aspectj.lang.ProceedingJoinPoint;
import org.aspectj.lang.annotation.Around;
import org.aspectj.lang.annotation.Aspect;
import org.aspectj.lang.annotation.Pointcut;
import org.springframework.context.annotation.EnableAspectJAutoProxy;
import org.springframework.stereotype.Component;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;
import org.springframework.web.servlet.ModelAndView;

@Aspect // AOP용 클래스
@Component // 객체 생성
@EnableAspectJAutoProxy // AspectJ 기능 활성화
public class AOPComponent {
	// Pointcut -> 적용범위
	// @Pointcut(범위설정)
	/*
	 * 범위 
	 * execution -> include필터 나 포함할래
	 * !execution -> exclude필터 나 포함 안할래 
	 * * -> 모든것
	 * *(..) -> 모든 메소드 
	 * .. -> 모든 경로
	 *  &&, || -> 필터 추가
	 *  
	 *  execution(접근권환 반환타입 범위): 접근권한의 경우 필수가 아님
	 */
	
	// com.spring.sample.. 밑에 있는 모든 경로(..)에서 HomeController를 찾고, 모든 메서드인데, 인자도 상관없어
	@Pointcut("execution(* com.spring.sample..HomeController.*(..))")
	public void testAOP() { // 내용이 없어서 void로 하면 되고, pointcut의 이름과 같은 역활
	}

	// ProceedingJoinPoint -> 대상 적용 이벤트 필터, 진행중인 현재상태
	/*
	 * Advice
	 * @Before -> 메소드 실행 전
	 * 
	 * @After -> 메소드 실행 후
	 * 
	 * @After-returning -> 메소드 정상실행 후
	 * 
	 * @After-throwing -> 메소드 예외 발생 후
	 * 
	 * @Around -> 모든 동작시점
	 */
	@Around("testAOP()") //"execution(* com.spring.sample..HomeController.*(..))" 한테서  @Around 모든 동작 시점에 체크해볼래
	public ModelAndView testAOP(ProceedingJoinPoint joinPoint) throws Throwable {
		ModelAndView mav = new ModelAndView();

		// Request 객체 취득
		// RequestContextHolder 
		HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.currentRequestAttributes())
				.getRequest();

		mav = (ModelAndView) joinPoint.proceed(); // 기존 이벤트 처리 행위를 이어서 진행

		System.out.println("------- testAOP 실행됨 ------");

		return mav;
	}
}

https://engkimbs.tistory.com/746

[Spring] 스프링 AOP (Spring AOP) 총정리 : 개념, 프록시 기반 AOP, @AOP

| 스프링 AOP ( Aspect Oriented Programming ) AOP는 Aspect Oriented Programming의 약자로 관점 지향 프로그래밍이라고 불린다. 관점 지향은 쉽게 말해 어떤 로직을 기준으로 핵심적인 관점, 부가적인 관점으..

engkimbs.tistory.com

https://sjh836.tistory.com/157

Spring AOP (개념, 용어, 원리, 포인트컷 표현식, JoinPoint API)

1. AOP란? Aspect Oriented Programming 의 약자로 관점지향 프로그래밍이라고 부른다. IoC가 낮은 결합도와 관련된 것이라면 AOP 는 높은 응집도와 관련되어 있다. 서비스들의 비즈니스 메소드들은 복잡한

sjh836.tistory.com

pointcut 추가

근디 우리는 지금 리스트랑 디테일은 로그인 안해도 볼수 있게 해야하기 때문에

그냥

포인트컷 잡을때 범위를 어떻게 찾을지 생각해야함

pointcut atAOP() 추가

AOPComponent.java

atAOP 추가 이후 전체코드

package com.spring.sample.common.component;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.aspectj.lang.ProceedingJoinPoint;
import org.aspectj.lang.annotation.Around;
import org.aspectj.lang.annotation.Aspect;
import org.aspectj.lang.annotation.Pointcut;
import org.springframework.context.annotation.EnableAspectJAutoProxy;
import org.springframework.stereotype.Component;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;
import org.springframework.web.servlet.ModelAndView;

@Aspect // AOP용 클래스
@Component // 객체 생성
@EnableAspectJAutoProxy // AspectJ 기능 활성화
public class AOPComponent {
	// Pointcut -> 적용범위
	// @Pointcut(범위설정)
	/*
	 * 범위 execution -> include필터 나 포함할래 
	 * !execution -> exclude필터 나 포함 안할래 
	 * * -> 모든것
	 * *(..) -> 모든 메소드 
	 * .. -> 모든 경로 
	 * &&, || -> 필터 추가
	 * 
	 * execution(접근권환 반환타입 범위): 접근권한의 경우 필수가 아님
	 */

	// com.spring.sample.. 밑에 있는 모든 경로(..)에서 HomeController를 찾고, 모든 메서드인데, 인자도 상관없어
	@Pointcut("execution(* com.spring.sample..HomeController.*(..))")
	public void testAOP() { // 내용이 없어서 void로 하면 되고, pointcut의 이름과 같은 역활
	}

	// ProceedingJoinPoint -> 대상 적용 이벤트 필터, 진행중인 현재상태
	/*
	 * Advice
	 * 
	 * @Before -> 메소드 실행 전
	 * 
	 * @After -> 메소드 실행 후
	 * 
	 * @After-returning -> 메소드 정상실행 후
	 * 
	 * @After-throwing -> 메소드 예외 발생 후
	 * 
	 * @Around -> 모든 동작시점
	 */
	@Around("testAOP()") // "execution(* com.spring.sample..HomeController.*(..))" 한테서 @Around 모든 동작 시점에
							// 체크해볼래
	public ModelAndView testAOP(ProceedingJoinPoint joinPoint) throws Throwable {
		ModelAndView mav = new ModelAndView();

		// Request 객체 취득
		HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.currentRequestAttributes())
				.getRequest();

		mav = (ModelAndView) joinPoint.proceed(); // 기존 이벤트 처리 행위를 이어서 진행

		System.out.println("------- testAOP 실행됨 ------");

		return mav;
	}

	// pointcut 여러개 써도됨
	// 이렇게 했을때 AJAX를 문제, Ajax는 결국 string을 돌려주는데 우리는 지금 ModelAndView로 돌려주게 해놨기 때문에 따로
	// 처리해야함
	@Pointcut("execution(* com.spring.sample..Controller.ATController.*Insert(..))"
			+ "|| execution(* com.spring.sample..Controller.ATController.*Update(..))")
	public void atAOP() {
	}

	@Around("atAOP()") // atAOP()를 가져와서 써
	public ModelAndView atAOP(ProceedingJoinPoint joinPoint) throws Throwable {
		ModelAndView mav = new ModelAndView();

		// Request 객체 취득
		HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.currentRequestAttributes())
				.getRequest();

		HttpSession session = request.getSession();

		if (session.getAttribute("sMemNm") != null && session.getAttribute("sMemNm") != "") { // 로그인 중인 경우
			mav = (ModelAndView) joinPoint.proceed(); // 기존 이벤트 처리 행위를 이어서 진행
		} else { // 비 로그인의 경우
			mav.setViewName("redirect:testALogin");
		}
		return mav;
	}

}

aop건 이후

ATController의 insert부분

기존

변경

실행결과

ATinsert, ATUpdate에 들어갈려고 하면

로그인 페이지로 가버림

ATController.java

package com.spring.sample.web.testa.Controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.spring.sample.common.service.IPagingService;
import com.spring.sample.web.testa.dao.IACDao;

@Controller
public class ATController {
	@Autowired
	public IACDao iACDao;

	@Autowired
	public IPagingService ips;

	@RequestMapping(value = "/ATList")
	public ModelAndView ATList(@RequestParam HashMap<String, String> params, ModelAndView mav) {

		// 비동기가 되면 일단 아무것도 처음에 셋팅 X,
		// 페이지만 셋팅
		int page = 1;

		if (params.get("page") != null && params.get("page") != "") {
			page = Integer.parseInt(params.get("page"));
		}

		mav.addObject("page", page);
		mav.setViewName("testa/T/list");

		return mav;
	}

	@RequestMapping(value = "/ATListAjax", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String ATListAjax(@RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		// 페이지 받아오게 되어있음
		int cnt = iACDao.getInt("T.getTCnt", params);

		HashMap<String, Integer> pd = ips.getPagingData(Integer.parseInt(params.get("page")), cnt, 10, 5);

		params.put("start", Integer.toString(pd.get("start")));
		params.put("end", Integer.toString(pd.get("end")));

		List<HashMap<String, String>> list = iACDao.getList("T.getTList", params);

		model.put("list", list);
		model.put("pd", pd);

		return mapper.writeValueAsString(model);
	}

	@RequestMapping(value = "/ATInsert")
	public ModelAndView aTInsert(ModelAndView mav) {

		mav.setViewName("testa/T/insert");

		return mav;
	}

	@RequestMapping(value = "/ATAction/{gbn}", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String ATAction(@PathVariable String gbn, @RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		int cnt = 0;

		try {
			switch (gbn) {
			case "insert":
				cnt = iACDao.insert("T.insertT", params);
				break;
			case "update":
				cnt = iACDao.update("T.updateT", params);
				break;
			case "delete":
				cnt = iACDao.update("T.deleteT", params);
				break;
			}

			if (cnt > 0) {
				model.put("msg", "success");
			} else {
				model.put("msg", "fail");
			}
		} catch (Exception e) {
			e.printStackTrace();
			model.put("msg", "error");
		}

		return mapper.writeValueAsString(model);
	}

	// 가져오고 변경되는게 없기 때문에 비동기 처리로 안되도 됨
	@RequestMapping(value = "/ATDetail")
	public ModelAndView aTDetail(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		// 글번호 안 넘어왔을때 처리
		if (params.get("no") != null && params.get("no") != "") {
			// 조회수
			iACDao.update("T.updateTHit", params);
			HashMap<String, String> data = iACDao.getMap("T.getT", params);

			mav.addObject("data", data);

			mav.setViewName("testa/T/detail");
		} else {
			mav.setViewName("redirect:ATList");
		}

		return mav;
	}

	@RequestMapping(value = "/ATUpdate")
	public ModelAndView aTUpdate(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		// 글번호 안 넘어왔을때 처리
		if (params.get("no") != null && params.get("no") != "") {
			HashMap<String, String> data = iACDao.getMap("T.getT", params);

			mav.addObject("data", data);

			mav.setViewName("testa/T/update");
		} else {
			mav.setViewName("redirect:ATList");
		}

		return mav;
	}

}

내일꺼 미리 셋팅

TBOARD테이블 수정 CATE_NO 컬럼 추가

CATE테이블 만듬

CATE 테이블이랑 TBOARD랑 외래키 설정

시퀀스도 추가해줌

CRUD게시판 만들기 실습(한줄 게시판 느낌으로 만듬, 강사님이랑 같이 한건 아님)

ACateController.java

package com.spring.sample.web.testa.Controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.spring.sample.common.service.IPagingService;
import com.spring.sample.web.testa.dao.IACDao;

@Controller
public class ACateController {
	@Autowired
	public IACDao dao;

	@Autowired
	public IPagingService ips;

	// DB안 붙으니 예외처리 x
	@RequestMapping(value = "ACOB")
	public ModelAndView aob(ModelAndView mav) {
		mav.setViewName("testa/Cate/cob");

		return mav;
	}

	@RequestMapping(value = "/ACOBAction/{gbn}", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String AOBAction(@PathVariable String gbn, @RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		int cnt = 0;

		try {
			switch (gbn) {
			case "insert":
				cnt = dao.insert("cob.insertOb", params);
				break;
			case "update":
				cnt = dao.update("cob.updateOb", params);
				break;
			case "delete":
				cnt = dao.update("cob.deleteOb", params);
				break;
			}

			if (cnt > 0) {
				model.put("msg", "success");
			} else {
				model.put("msg", "fail");
			}
		} catch (Exception e) {
			e.printStackTrace();
			model.put("msg", "error");
		}

		return mapper.writeValueAsString(model);
	}

	@RequestMapping(value = "/ACOBList", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String AOBList(@RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		// 페이지 받아오게 되어있음
		int cnt = dao.getInt("cob.getObCnt", params);

		HashMap<String, Integer> pd = ips.getPagingData(Integer.parseInt(params.get("page")), cnt, 10, 5);

		params.put("start", Integer.toString(pd.get("start")));
		params.put("end", Integer.toString(pd.get("end")));

		List<HashMap<String, String>> list = dao.getList("cob.getObList", params);

		model.put("list", list);
		model.put("pd", pd);

		return mapper.writeValueAsString(model);
	}
}

cob.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{ 
	width: 600px; 
	margin: 0 auto;
}
.mtb{
	margin: 5px;
}
.login{
	vertical-align: baseline;
}
.cateNm{
	width: calc(100% - 22px); 
	height: 40px; 
	border: 1px solid #d7d7d7; 
	resize: none; 
	padding: 10px
}

.update{
	display: none;
}
.con_td{
	font-size: 0
}
.paging_area{
	display: block; 
	position: relative; 
	left: 0;
	margin-bottom: 10px;
}
.search_area{
	text-align: center;
}
body {
	overflow: auto;
}
</style>
<script type="text/javascript" 
		src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
src="resources/script/common/popup.js"></script>
<!-- Slimscroll -->
<!-- <script type="text/javascript" src="resources/script/jquery/jquery.slimscroll.js"></script> -->
<script type="text/javascript">
$(document).ready(function () {

	
	reloadList();
	
	
	$("#insertBtn").on("click", function () {
	 		if($.trim($("#cateNm").val()) == ""){
				makeAlert("알림","카테고리를 입력하세요." , function () {
					$("#cateNm").focus();
				});
	 		}	else {
	 				action("insert");
			}
	
		})
		
	// 페이징 클릭시
	$(".paging_area").on("click", "span", function () {
		$("#page").val($(this).attr("page"));
		//기존 값 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchText").val($("#oldText").val());
		
		reloadList();
	})	
		
	// 검색 클릭시
	$("#searchBtn").on("click", function () {
		$("#page").val("1");
		//기존 값 새값으로 변경
		$("#oldGbn").val($("#searchGbn").val());
		$("#oldText").val($("#searchText").val());
		
		reloadList();
	})
	
	// 목록의 삭제버튼 클릭시
	$("tbody").on("click", ".delete_btn", function () {
		var no = $(this).parent().parent().attr("no");
		
		  makePopup({
		         title : "알림",
		         contents : "삭제하시겠습니까?",
		         // draggable : true,
		         buttons : [{
		            name : "삭제",
		            func:function() {
		            	$("#no").val(no);
		            	action("delete");
		            	closePopup(); // 제일 위의 팝업 닫기
		            }
		         }, {
		            name : "취소"
		    }]
		})
	})
	
	// 목록 수정버튼 클릭시
	$("tbody").on("click", ".update_btn", function () {
		var no = $(this).parent().parent().attr("no");
		$("#no").val(no);

		
		//eq(인덱스번호) : 자식들 중 인덱스 몇번째 인지 찾아서 취득
		var con = $(this).parent().parent().children().eq(1).html();
		// 수정 내용 넣기 전 <> 변화
		con = con.replace(/&lt;/gi, "<");
		con = con.replace(/&gt;/gi, ">");
		
		
		$("#cateNm").val(con);
		
		
		// 등록버튼 감추기 + 수정, 취소버튼 나타나기
		$(".insert").hide();
		$(".update").show();
		
		// 작성영역에 포커스
		$("#cateNm").focus();
	})
	
	// 수정 영역의 취소버튼
	$("thead #cancelBtn").on("click", function () {
		// 입력내용 초기화
		$("#no").val("");
		$("#cateNm").val("");
		// 등록버튼 나타나기 + 수정, 취소버튼 감추기
		$(".insert").show();
		$(".update").hide();
	})
	
	// 수정 영역의 수정버튼
	$("thead #updateBtn").on("click", function () {
		action("update");
		console.log("1");
	})
	
})


var msg ={
	"insert" : "등록",
	"update" : "수정",
	"delete" : "삭제",
}

function action(flag) {
	// con의 <를을 웹문자로 변환
	$("#cateNm").val($("#cateNm").val().replace(/</gi, "&lt;"));
	// con의 >를을 웹문자로 변환
	$("#cateNm").val($("#cateNm").val().replace(/>/gi, "&gt;"));
	
	
	// Javascript object에서의 [] : 해당 키값으로 내용을 불러오거나 넣을 수있다. 
	// Java의 Map에서 get, put역활
	console.log(msg[flag]);
	
	var params = $("#actionForm").serialize();
	
	$.ajax({
		url : "ACOBAction/" + flag,
		type : "POST", 
		dataType: "json", 
		data: params, 
		success : function(res) { 
			switch(res.msg){
			case "success" :
				// 내용 초기화
				$("#cateNm").val("");
				$("#no").val("");

				// 목록 재조회
				switch(flag){
				case "insert" :
				case "delete" :
					// 조회 데이터 초기화
					$("#page").val("1");
					$("#searchGbn").val("0");
					$("#searchText").val("");
					$("#oldGbn").val("0");
					$("#oldText").val("");
					break;
				case "update" :
					// 기존값 유지
					$("#searchGbn").val($("#oldGbn").val());
					$("#searchText").val($("#oldText").val());

					// 입력내용 초기화
					$("#no").val("");
					$("#cateNm").val("");
					// 등록버튼 나타나기 + 수정, 취소버튼 감추기
					$(".insert").show();
					$(".update").hide();
					break;
					
			
				}
				reloadList();
				break;
			case "fail" :
				makeAlert("알림" ,  msg[flag] + "에 실패하였습니다.");
				break;
			case "error" :
				makeAlert("알림" , msg[flag] + " 중 문제가 발생하였습니다.");
				break;
			}
		},
		error : function(request, status, error) { 
			console.log(request.responseText); 
		}
	}); //Ajax End
} // action Function End

function reloadList() {
	var params = $("#searchForm").serialize();
	$.ajax({
		url : "ACOBList",
		type : "POST", 
		dataType: "json", 
		data: params, 
		success : function(res) { 
			drawList(res.list);
			drawPaging(res.pd);
		},
		error : function(request, status, error) { 
			console.log(request.responseText); 
		}
	}); //Ajax End
}

function drawList(list) {
	var html = "";
	
	for(var data of list){
		html +="<tr no=\"" + data.CATE_NO  + "\">";
		html +="<td>" + data.CATE_NO + "</td>";
		html +="<td>" + data.CATE_NM + "</td>";
		html +="<td>";
			html +="<div class=\"cmn_btn_ml mtb update_btn\">수정</div><br/>";
			html +="<div class=\"cmn_btn_ml mtb delete_btn\">삭제</div>";
		html +="</td>";
		html +="</tr>";
	}
	
	$("tbody").html(html);
}



function drawPaging(pd) {
	var html = "";
	
	html += "<span class=\"page_btn page_first\" page=\"1\">처음</span>";
	// 이전
	if($("#page").val() == "1"){
		html += "<span class=\"page_btn page_prev\" page=\"1\">이전</span>";
	} else{
		// 문자열을 숫자로 바꾸기위해 *1
		html += "<span class=\"page_btn page_prev\" page=\"" + ($("#page").val() *1 - 1) + "\">이전</span>";
	}
	
	for(var i = pd.startP; i <= pd.endP; i++){
		if($("#page").val() * 1 == i){ // 현재 페이지
			html += "<span class=\"page_btn_on\" page=\"" + i + "\">" + i + "</span>";
		} else { // 다른 페이지
			html += "<span class=\"page_btn\" page=\"" + i + "\">" + i + "</span>";
		}
	}
	
	if($("#page").val() *1 == pd.endP){ // 현재페이지가 마지막 페이지라면
		html += "<span class=\"page_btn page_next\" page=\"" +pd.maxP+ "\">다음</span>";
	} else {
		html += "<span class=\"page_btn page_next\" page=\"" + ($("#page").val() *1 + 1) + "\">다음</span>";
	}
	
	html += "<span class=\"page_btn page_last\" page=\"" +pd.maxP+ "\">마지막</span>";
	
	$(".paging_area").html(html);
                                                                     
}

</script>
</head>
<body>
<hr/>
<div class="wrap">
	<div class="board_area">
		<!-- 작성 또는 로그인 -->
		
		<!-- 목록 -->
		<table class="board_table">
			<colgroup>
				<col width="100"> <!-- 번호 -->
				<col width="500"> <!-- 카테고리명 -->
			</colgroup>
			<thead>
						<tr>
							<td colspan="3" class="con_td">
								<form action="#" id="actionForm">
									<input type="hidden" name="no" id="no">
									<textarea class="cateNm" name="cateNm" id="cateNm" placeholder="카테고리명을 입력해주세요"></textarea>
								</form>
							</td>
							<td>
								<div class="insert">
									<div class="cmn_btn_ml" id="insertBtn">등록</div>
								</div> 
								<div class="update">
									<div class="cmn_btn_ml mtb" id="updateBtn">수정</div><br/>
									<div class="cmn_btn_ml mtb" id="cancelBtn">취소</div>
								</div>
							</td>
						</tr>
				<tr>
					<th>번호</th>
					<th>카테고리명</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		<!-- 페이징 -->
		<div class="paging_area"></div>
	</div>
	<div class="search_area">
		<!-- 검색어 유지용 -->
		<input type="hidden" id="oldGbn" value="0" />
		<input type="hidden" id="oldText" />
		<form action="#" id="searchForm">
			<input type="hidden" name="page" id="page" value="1" />
			<select name="searchGbn" id="searchGbn">
				<option value="0">번호</option>
				<option value="1">카테고리명</option>
			</select>
			<input type="text" name="searchText" id="searchText"/>
			<div class="cmn_btn_ml" id="searchBtn">검색</div>
		</form>
	</div>
</div>
</body>
</html>

Cate_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cob">
	<insert id="insertOb" parameterType="hashmap">
		INSERT INTO CATE(CATE_NO, CATE_NM) VALUES (CATE_SEQ.NEXTVAL, #{cateNm})
	</insert>
	<update id="updateOb" parameterType="hashmap">
		UPDATE CATE SET CATE_NM = #{cateNm}
		WHERE CATE_NO = #{no}
	</update>
	<update id="deleteOb" parameterType="hashmap">
		UPDATE CATE SET DEL = 0
		WHERE CATE_NO = #{no}
	</update>
	<select id="getObCnt" parameterType="hashmap" resultType="Integer">
		SELECT COUNT(*) AS CNT
			FROM CATE
		WHERE DEL = 1
		<if test="searchText != null and searchText != ''">
			<choose>
			 	<when test="searchGbn eq 0">
			 			AND CATE_NO = #{searchText} 
			 	</when>
				<when test="searchGbn eq 1">
			 			AND CATE_NM LIKE '%' || #{searchText} || '%'
			 	</when>
			</choose>
		</if>
	</select>
	<select id="getObList" parameterType="hashmap" resultType="hashmap">
		SELECT S.CATE_NO, S.CATE_NM
		FROM(SELECT CATE_NO, CATE_NM, 
		ROW_NUMBER() OVER(ORDER BY CATE_NO DESC, CATE_NM DESC) AS RNK
		FROM CATE
		 WHERE DEL = 1
	      <if test="searchText != null and searchText != ''">
				<choose>
				 	<when test="searchGbn eq 0">
				 			AND CATE_NO = #{searchText} 
				 	</when>
					<when test="searchGbn eq 1">

				 			AND CATE_NM LIKE '%' || #{searchText} || '%'
				 	</when>
				</choose>
			</if>
	      ) S
		WHERE S.RNK BETWEEN #{start} AND #{end}
	</select>
</mapper>

결과화면

등록, 수정, 삭제, 검색, 페이징 다 잘 됨!

개인적으로 패스트캠퍼스의 강의 들음

AOP

공통 코드의 분리

하나의 메서드의 두개의 관심사

메서드의 핵심기능, 부가기능이 있어

메서드들이 부가기능을 공통적으로 가지고 있어 => 분리

분리

1. 관심사

2. 변하는것, 변하지 않는것

3. 공통코드

분리하고 myAdvice 클래스에서 reflection API 통해서 호출하면, 더 변경에 유리한 코드가 됨

reflection API

https://tecoble.techcourse.co.kr/post/2020-07-16-reflection-api/

Reflection API 간단히 알아보자.

Spring Framework를 학습하다 보면 Java Reflection API를 자주 접하게 된다. 하지만 Reflection API…

tecoble.techcourse.co.kr

강의에서는 reflection API사용했구, 우리는 AspectJ 라이브러리 했고,

뭔가 aop제외하는것도 다름

AspectJ 에서는 !~~~ 이렇게, 강의에서는 pattern으로 정의해서 사용

https://sabarada.tistory.com/97

[Spring] Spring AOP - 원리편

안녕하세요. 오늘은 Spring AOP의 3번째 시간으로 마지막 시간입니다. 오늘은 AOP가 Spring 내부에서 구현되는 원리에 대해서 한번 알아보는 시간을 가져보도록 하겠습니다. AOP를 사용하는 방법 및 기

sabarada.tistory.com

국비 TIL(Today I Learned) 20220824 시험, CRUD 게시판 만들기, SELL테이블로, 팀별프로젝트

토희 — Wed, 24 Aug 2022 17:25:49 +0900

오늘의 시험 내역

테이블명....

기존에 SELL테이블이 있어서 SELL1로 했더니 깎였고,

그리고 controller에서 delete할때 delete써야 하는데 update로 씀...

다른 코드에서는 삭제를 실제삭제가 아니고 테이블에서 del을 내용을 바꿔서 테이블에서 안보이게 했던것 때문에

delete로 수정해야 하는데 깜박함

밑에 코드는 수정완료한거

PshController.java

package com.spring.sample.web.testa.Controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.spring.sample.common.service.IPagingService;
import com.spring.sample.web.testa.dao.IACDao;

@Controller
public class PshController {
	@Autowired
	public IACDao iACDao;

	@Autowired
	public IPagingService ips;

	@RequestMapping(value = "/ASELLList")
	public ModelAndView ASELLlList(@RequestParam HashMap<String, String> params, ModelAndView mav) {

		// 비동기가 되면 일단 아무것도 처음에 셋팅 X,
		// 페이지만 셋팅
		int page = 1;

		if (params.get("page") != null && params.get("page") != "") {
			page = Integer.parseInt(params.get("page"));
		}

		mav.addObject("page", page);
		mav.setViewName("testa/pshSell/pshlist");

		return mav;
	}

	@RequestMapping(value = "/ASELLListAjax", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String ASELLListAjax(@RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		// 페이지 받아오게 되어있음
		int cnt = iACDao.getInt("sell.getSellCnt", params);

		HashMap<String, Integer> pd = ips.getPagingData(Integer.parseInt(params.get("page")), cnt, 10, 5);

		params.put("start", Integer.toString(pd.get("start")));
		params.put("end", Integer.toString(pd.get("end")));

		List<HashMap<String, String>> list = iACDao.getList("sell.getSellList", params);

		model.put("list", list);
		model.put("pd", pd);

		System.out.println(params.toString());

		return mapper.writeValueAsString(model);
	}

	@RequestMapping(value = "/ASELLInsert")
	public ModelAndView aTInsert(ModelAndView mav) {

		mav.setViewName("testa/pshSell/pshinsert");

		return mav;
	}

	@RequestMapping(value = "/ASELLAction/{gbn}", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String ASELLAction(@PathVariable String gbn, @RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		int cnt = 0;

		try {
			switch (gbn) {
			case "insert":
				cnt = iACDao.insert("sell.insertSell", params);
				break;
			case "update":
				cnt = iACDao.update("sell.updateSell", params);
				break;
			case "delete":
				cnt = iACDao.delete("sell.deleteSell", params);
				break;
			}

			if (cnt > 0) {
				model.put("msg", "success");
			} else {
				model.put("msg", "fail");
			}
		} catch (Exception e) {
			e.printStackTrace();
			model.put("msg", "error");
		}

		return mapper.writeValueAsString(model);
	}

	// 가져오고 변경되는게 없기 때문에 비동기 처리로 안되도 됨
	@RequestMapping(value = "/ASELLDetail")
	public ModelAndView ASELLDetail(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		// 글번호 안 넘어왔을때 처리
		if (params.get("no") != null && params.get("no") != "") {

			HashMap<String, String> data = iACDao.getMap("sell.getSell", params);

			mav.addObject("data", data);

			mav.setViewName("testa/pshSell/pshdetail");
		} else {
			mav.setViewName("redirect:ASELLList");
		}

		return mav;
	}

	@RequestMapping(value = "/ASELLUpdate")
	public ModelAndView sellUpdate(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		// 글번호 안 넘어왔을때 처리
		if (params.get("no") != null && params.get("no") != "") {
			HashMap<String, String> data = iACDao.getMap("sell.getSell", params);

			mav.addObject("data", data);

			mav.setViewName("testa/pshSell/pshupdate");
		} else {
			mav.setViewName("redirect:ASELLList");
		}

		return mav;
	}

}

pshlist.jap

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
#searchTxt{
width: 160px;
height: 30px; 
padding: 0px 2px;
text-indent: 5px;
vertical-align: middle;
border: 1px solid #d7d7d7; 
outline-color: #70adf9;
box-sizing: border-box;
}
.search_area{
	width: 800px;
	text-align: right;
	margin: 0 auto;
}
.board_area{
	width: 800px;
	margin: 0 auto;
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	if("${param.searchGbn}" != ""){
		$("#searchGbn").val("${param.searchGbn}");
	} else {
		$("#oldGbn").val("0");
	}
	
	//목록 조회
	reloadList();
	
	$("#actionForm").on("keypress","input", function(event) {

		if(event.keyCode == 13){
			$("#searchBtn").click();
			return false;
		
		}
	})
	
	//검색버튼
	$("#searchBtn").on("click", function () {
		$("#page").val("1");
		// 이동을 안하다보니 문제가 기존검색값 셋팅을 안해줌
		// 그래서  신규 상태 적용
		$("#oldGbn").val($("#searchGbn").val());
		$("#oldTxt").val($("#searchTxt").val());
		
		
		// 데이터만 가져와서 다시 그려줌, 화면 이동 없음
		reloadList();
	});
	
	//페이징 버튼
	$(".paging_area").on("click", "span", function () {
		// 기존 검색상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
			
		
		$("#page").val($(this).attr("page"));
		
		reloadList();
	})
	
	// 등록버튼
	$("#insertBtn").on("click", function () {
		// 기존 검색상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action", "ASELLInsert");
		$("#actionForm").submit();
	})
	
	$("tbody").on("click", "tr", function () {
		$("#no").val($(this).attr("no"));
		
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action", "ASELLDetail");
		$("#actionForm").submit();
	})
});

// 목록 조회 호출, ajax불러오기
function reloadList() {
	var params = $("#actionForm").serialize();
	
	$.ajax({
		url : "ASELLListAjax", //경로
		type : "POST", // 전송방식(GET: 주소형태, POST : 주소 헤더 형태)
		dataType: "json", // 데이터 형태
		data: params, // 보낼데이터
		success : function(res) { //성공했을 때 결과를 res에 받고 함수 실행
			console.log(res); // 콘솔에  pd랑 list 값이 보임
			drawList(res.list);
			drawPaging(res.pd);
		},
		error : function(request, status, error) { // 실패했을 때 함수실행
			console.log(request.responseText); // 실패 상세 태역
		}
	});
	
}

function drawList(list) {
	var html = "";
	
	// list에는 map이 들어있으니까 하나씩 꺼내오겠다
	for(var data of list){
		html += "<tr no=\"" + data.SELL_NO + "\">";
		html += "<td>" + data.SELL_NO + "</td>";
		html += "<td>" + data.ITEM_NAME + "</td>";
		html += "<td>" + data.COUNT + "</td>";
		html += "<td>" + data.SELL_DT + "</td>";
		html += "</tr>";
	}   
	
	$("tbody").html(html);
}

function drawPaging(pd) {
	var html = "";
	
	html += "<span class=\"page_btn page_first\" page=\"1\">처음</span>";
	// 이전
	if($("#page").val() == "1"){
		html += "<span class=\"page_btn page_prev\" page=\"1\">이전</span>";
	} else{
		// 문자열을 숫자로 바꾸기위해 *1
		html += "<span class=\"page_btn page_prev\" page=\"" + ($("#page").val() *1 - 1) + "\">이전</span>";
	}
	
	for(var i = pd.startP; i <= pd.endP; i++){
		if($("#page").val() * 1 == i){ // 현재 페이지
			html += "<span class=\"page_btn_on\" page=\"" + i + "\">" + i + "</span>";
		} else { // 다른 페이지
			html += "<span class=\"page_btn\" page=\"" + i + "\">" + i + "</span>";
		}
	}
	
	if($("#page").val() *1 == pd.endP){ // 현재페이지가 마지막 페이지라면
		html += "<span class=\"page_btn page_next\" page=\"" +pd.maxP+ "\">다음</span>";
	} else {
		html += "<span class=\"page_btn page_next\" page=\"" + ($("#page").val() *1 + 1) + "\">다음</span>";
	}
	
	html += "<span class=\"page_btn page_last\" page=\"" +pd.maxP+ "\">마지막</span>";
	
	$(".paging_area").html(html);
                                                                     
}





</script>
</head>
<body>
<input type="hidden" id="oldGbn" value="${param.searchGbn}"/>
<input type="hidden" id="oldTxt" value="${param.searchTxt}"/>
<div class="search_area">
	<!--  method="post"는 나중에 쓸 예정, no 보낼때 -->
	<form action="#" id="actionForm" method="post">
	<input type="hidden" name="no" id="no" />
	<input type="hidden" name="page" id="page" value="${page}" />
		<select name="searchGbn" id="searchGbn">
			<option value="0">상품명</option>
			<option value="1">판매량</option>
		</select>
		<input type="text" name="searchTxt" id="searchTxt" value="${param.searchTxt}" />
		<div class="cmn_btn_ml" id="searchBtn">검색</div>
		<div class="cmn_btn_ml" id="insertBtn">등록</div>
	</form>
</div>
<div class="board_area">
<table class="board_table">
	<colgroup>
		<col width="100" />
		<col width="100" />
		<col width="100" />
		<col width="100" />
	</colgroup>
	<thead>
		<tr>
			<th>상품번호</th>
			<th>상품명</th>
			<th>판매량</th>
			<th>판매일자</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>
<div class="paging_area"></div>
</div>


</body>
</html>

pshinsert.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글쓰기</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{
	width: 800px;
	margin: 0 auto;
}
</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<script type="text/javascript">
$(document).ready(function () {

	$("#listBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	$("#insertBtn").on("click", function () {
		
		if($.trim($("#ItemName").val()) == ""){
			makeAlert("알림","상품명 입력하세요." , function () {
				$("#ItemName").focus();
			})
		} else if($.trim($("#Count").val()) == ""){
			makeAlert("알림","판매량를 입력세요." , function () {
				$("#Count").focus();
			})
		} else if($("#Count").val()*1 < 1){ 
			makeAlert("알림","판매량은 1개 이상이여야합니다." , function () {
				$("#Count").focus();
			})
		} else if($.trim($("#SellDt").val()) == ""){
			makeAlert("알림","판매일자를 입력하세요" , function () {
				$("#SellDt").focus();
			})
		} else {
			var params = $("#actionForm").serialize();
			
			$.ajax({
				url : "ASELLAction/insert", //restful api라는게 여기서 시작한다고?
				type : "POST", 
				dataType: "json", 
				data: params, 
				success : function(res) { 
					switch(res.msg){
					case "success" : 
						location.href ="ASELLList";
						break;
					case "fail" :
						makeAlert("알림" , "등록에 실패하였습니다.");
						break;
					case "error" :
						makeAlert("알림" , "등록 중 문제가 발생하였습니다.");
						break;
					}
				},
				error : function(request, status, error) { 
					console.log(request.responseText); 
				}
			});
			
		}
	});
});

</script>
</head>
<body>
	<form action="ASELLList" id="backForm" method="post">
	<input type="hidden" name="page" value="${param.page}" />
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
<div class="wrap">
	<form action="#" id="actionForm" method="post">
		<table class="board_detail_table">
			<tr>
				<th>상품명</th>
				<td>
					<select name="ItemName"  id="ItemName">
						<option value="감자">감자</option>
						<option value="고구마">고구마</option>
						<option value="애호박">애호박</option>
						<option value="호박">호박</option>
						<option value="호박고구마">호박고구마</option>
					</select>
				</td>
			</tr>
			<tr>
				<th>판매량</th>
				<td><input type="number" name="Count" id="Count" value="0" /></td>
			</tr>
			<tr>
				<th>판매일자</th>
				<td><input type="date" name="SellDt" id="SellDt" /></td>
			</tr>
		</table>
	</form>
	<div class="cmn_btn_ml float_right_btn" id="listBtn">목록</div>
	<div class="cmn_btn_ml float_right_btn" id="insertBtn">등록</div>
</div>
</body>
</html>

pshdetail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상세보기</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{
	width: 800px;
	margin: 0 auto;
}
</style>
<script type="text/javascript" 
		src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
src="resources/script/common/popup.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#listBtn").on("click", function() {
		$("#actionForm").attr("action","ASELLList"); 
		$("#actionForm").submit();
	});
	
	// ajax사용 예정
	$("#deleteBtn").on("click", function () {
		  makePopup({
		         title : "알림",
		         contents : "삭제하시겠습니까?",
		         // draggable : true,
		         buttons : [{
		            name : "삭제",
		            func:function() {
		            	var params = $("#actionForm").serialize();
		    			
		    			$.ajax({
		    				url : "ASELLAction/delete", //restful api라는게 여기서 시작한다고?
		    				type : "POST", 
		    				dataType: "json", 
		    				data: params, 
		    				success : function(res) { 
		    					switch(res.msg){
		    					case "success" : 
		    						location.href ="ASELLList";
		    						break;
		    					case "fail" :
		    						makeAlert("알림" , "삭제에 실패하였습니다.");
		    						break;
		    					case "error" :
		    						makeAlert("알림" , "삭제 중 문제가 발생하였습니다.");
		    						break;
		    					}
		    				},
		    				error : function(request, status, error) { 
		    					console.log(request.responseText); 
		    				}
		    			});
		            }
		         }, {
		            name : "취소"
		    }]
		});
	});
	
	$("#updateBtn").on("click", function () {
		$("#actionForm").attr("action","ASELLUpdate");
		$("#actionForm").submit();
	});
});
</script>
</head>
<body>
<form action="#" id="actionForm" method="post">
	<input type="hidden" name="no" value="${data.SELL_NO}">
	<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
		<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
<div class="wrap">
<table class="board_detail_table">
	<tr>
		<th>상품번호</th>
		<td>${data.SELL_NO}</td>
	</tr>
	<tr>
		<th>상품명</th>
		<td>${data.ITEM_NAME}</td>
	</tr>
	<tr>
		<th>판매량</th>
		<td>${data.COUNT}</td>
	</tr>
	<tr>
		<th>판매일자</th>
		<td>${data.SELL_DT}</td>
	</tr>

</table>
	<div class="cmn_btn_ml float_right_btn" id="listBtn">목록</div>
	<div class="cmn_btn_ml float_right_btn" id="deleteBtn">삭제</div>
	<div class="cmn_btn_ml float_right_btn" id="updateBtn">수정</div>
</div>
</body>
</html>

pshupdate.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글수정</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{
	width: 800px;
	margin: 0 auto;
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 기존값으로 셀렉트박스 선택 내용 변경
	$("#ItemName").val("${data.ITEM_NAME}");
	
	$("#cancelBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	$("#updateBtn").on("click", function () {
		
		if($.trim($("#ItemName").val()) == ""){
			makeAlert("알림","상품명 입력하세요." , function () {
				$("#ItemName").focus();
			})
		} else if($.trim($("#Count").val()) == ""){
			makeAlert("알림","판매량를 입력세요." , function () {
				$("#Count").focus();
			})
		} else if($("#Count").val()*1 < 1){ 
			makeAlert("알림","판매량은 1개 이상이여야합니다." , function () {
				$("#Count").focus();
			})
		} else if($.trim($("#SellDt").val()) == ""){
			makeAlert("알림","판매일자를 입력하세요" , function () {
				$("#SellDt").focus();
			})
		} else {
			var params = $("#actionForm").serialize();
			
			$.ajax({
				url : "ASELLAction/update",
				type : "POST", 
				dataType: "json", 
				data: params, 
				success : function(res) { 
					switch(res.msg){
					case "success" : 
						$("#backForm").submit();
						break;
					case "fail" :
						makeAlert("알림" , "수정에 실패하였습니다.");
						break;
					case "error" :
						makeAlert("알림" , "수정 중 문제가 발생하였습니다.");
						break;
					}
				},
				error : function(request, status, error) { 
					console.log(request.responseText); 
				}
			});
			
		}
	});
});


</script>
</head>
<body>
<form action="ASELLDetail" id="backForm" method="post">
	<input type="hidden" name="no" value="${data.SELL_NO}" />
	<input type="hidden" name="page" value="${param.page}" />
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
<!-- ajax쓰기 때문에 gbn 지움 -->
<div class="wrap">
	<form action="#" id="actionForm" method="post">
	<input type="hidden" name="no" value="${data.SELL_NO}" />
		<table class="board_detail_table">
			<tr>
				<th>상품명</th>
				<td>
					<select name="ItemName" id="ItemName">
						<option value="감자">감자</option>
						<option value="고구마">고구마</option>
						<option value="애호박">애호박</option>
						<option value="호박">호박</option>
						<option value="호박고구마">호박고구마</option>
					</select>
				</td>
			</tr>
			<tr>
				<th>판매량</th>
				<td><input type="text" name="Count" id="Count" value="${data.COUNT}" /></td>
			</tr>
			<tr>
				<th>판매일자</th>
				<td><input type="date" name="SellDt" id="SellDt" value="${data.SELL_DT}"/></td>
			</tr>
		</table>
	</form>
	<div class="cmn_btn_ml float_right_btn" id="cancelBtn">취소</div>
	<div class="cmn_btn_ml float_right_btn" id="updateBtn">수정</div>
</div>
</body>
</html>

pshSell.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- namespace : 클래스와 동일, 이 파일의 대표명 -->
<mapper namespace="sell">
	<!-- select : 조회 
		id: 구분자, 메소드명과 동일
		resultType : 조회 결과 중 한줄에 대한 자료 형태를 지정
		hashmap: mybatis-config.xml에서 별칭 지정해놔서 줄여쓸수있는거임
		쿼리 삽입시 주의사항: ;이 있는경우 문제가 발생한다. 이유는 해당 쿼리 실행시 자동으로 추가되기 때문
	-->
	<select id="getSellList" resultType="hashmap" parameterType="hashmap">
		SELECT S.SELL_NO, S.ITEM_NAME, S.COUNT, S.SELL_DT
		FROM (SELECT SELL_NO, ITEM_NAME, COUNT, TO_CHAR(SELL_DT,'YYYY-MM-DD') AS SELL_DT,
       		  ROW_NUMBER() OVER(ORDER BY SELL_DT DESC, SELL_NO DESC) AS RNK
			  FROM SELL1
			  WHERE 1 = 1
			<if test="searchTxt != null and searchTxt != ''"> <!-- 검색어가 있다면 -->
				<choose>
					<when test="searchGbn == 0"> <!-- 품목 -->
						AND ITEM_NAME LIKE '%' || #{searchTxt} || '%'
					</when>
					<when test="searchGbn == 1"> <!-- 수량 -->
						AND COUNT = #{searchTxt}
					</when>
				</choose>
			</if>
             ) S
		WHERE S.RNK BETWEEN #{start} AND #{end}
	</select>
	
	<select id="getSell" resultType="hashmap" parameterType="hashmap">
		SELECT SELL_NO, ITEM_NAME, COUNT, TO_CHAR(SELL_DT,'YYYY-MM-DD') AS SELL_DT
		FROM SELL1
		WHERE SELL_NO = #{no}
	</select>
	
	<insert id="insertSell" parameterType="hashmap">
		INSERT INTO SELL1(SELL_NO, ITEM_NAME, COUNT, SELL_DT)
		VALUES(SELL1_SEQ.NEXTVAL, #{ItemName}, #{Count}, #{SellDt})
	</insert>
	
	
	<delete id="deleteSell" parameterType="hashmap">
		DELETE FROM SELL1
		WHERE SELL_NO = #{no}
	</delete>
	
	<update id="updateSell" parameterType="hashmap">
		UPDATE SELL1 SET ITEM_NAME = #{ItemName},
                COUNT = #{Count},
                 SELL_DT = #{SellDt}
       	WHERE SELL_NO = #{no}
	</update>
	
	<select id="getSellCnt" parameterType="hashmap" resultType="Integer">
		SELECT COUNT(*) AS CNT 
		FROM SELL1
		WHERE 1 = 1
		<if test="searchTxt != null and searchTxt != ''"> <!-- 검색어가 있다면 -->
			<choose>
				<when test="searchGbn == 0"> <!-- 상품명 -->
					AND ITEM_NAME LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn == 1"> <!-- 개수 -->
					AND COUNT = #{searchTxt}
				</when>
			</choose>
		</if>
	</select>
	
	
</mapper>

폴더, 파일구조

테이블 구조

내일 배울 내용

관계 쪼개기??

resolve 특정행위를 했을때 납치하는거??

금요일 배울 내용

카테고리 나누기

국비 TIL(Today I Learned) 20220823 한줄 게시판(댓글) 만들기

토희 — Tue, 23 Aug 2022 17:06:06 +0900

multipart: 파일을 포함한 데이터

여기에 밑에 내용이 있음

maxUploadSize 한번에 올릴수있는 사이즈

지금은 10메가가 좀 안될거임

multipartResolver : 올릴수 있는 파일에 대한 허용을 걸어둔거임

ajaxForm을 통해 submit으로 하게되면 스프링으로 넘어왔을때 multipartResolver작동,

0은 안 걸려짐, 최대크기가 지정가능

viewResolver도 있음? 찾아보기!!!!

https://galid1.tistory.com/527

SpringMVC - Spring MVC 동작원리 - 5 (ViewResolver, DispatcherServlet 기본전략 등록 과정)

DispatcherServlet의 initViewResolver SpringBoot나 이미 설정되어있는 Spring을 사용하신 분들은 위와같이 Controller의 handler들에서 간단히 view(문자열)이름만을 반환하면 사용자에게 해당 view가 보이게..

galid1.tistory.com

한줄 게시판! 댓글

테이블 생성먼저

controller 만듬

jsp

기본셋팅, 코어태그, 제이쿼리, css가져오기

cotroller에 action작성하고

OB_SQL.xml

슬림 스크롤

main.jsp 기존 로그인관련

오늘 새로 만든파일들

ob.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{ 
	width: 800px; 
	margin: 0 auto;
}
.mtb{
	margin: 5px;
}
.login{
	vertical-align: baseline;
}
.con{
	width: calc(100% - 22px); 
	height: 60px; 
	border: 1px solid #d7d7d7; 
	resize: none; 
	padding: 10px
}

.update{
	display: none;
}
.con_td{
	font-size: 0
}
.paging_area{
	display: block; 
	position: relative; 
	left: 0;
	margin-bottom: 10px;
}
.search_area{
	text-align: center;
}
body {
	overflow: auto;
}
</style>
<script type="text/javascript" 
		src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
src="resources/script/common/popup.js"></script>
<!-- Slimscroll -->
<!-- <script type="text/javascript" src="resources/script/jquery/jquery.slimscroll.js"></script> -->
<script type="text/javascript">
$(document).ready(function () {

	
	reloadList();
	
	$(".board_table #loginBtn").on("click", function () {
		location.href = "testALogin";
	})
	
	$("#insertBtn").on("click", function () {
	 		if($.trim($("#con").val()) == ""){
				makeAlert("알림","내용을 입력하세요." , function () {
					$("#con").focus();
				});
	 		}	else {
	 				action("insert");
			}
	
		})
		
	// 페이징 클릭시
	$(".paging_area").on("click", "span", function () {
		$("#page").val($(this).attr("page"));
		//기존 값 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchText").val($("#oldText").val());
		
		reloadList();
	})	
		
	// 검색 클릭시
	$("#searchBtn").on("click", function () {
		$("#page").val("1");
		//기존 값 새값으로 변경
		$("#oldGbn").val($("#searchGbn").val());
		$("#oldText").val($("#searchText").val());
		
		reloadList();
	})
	
	// 목록의 삭제버튼 클릭시
	$("tbody").on("click", ".delete_btn", function () {
		var no = $(this).parent().parent().attr("no");
		
		  makePopup({
		         title : "알림",
		         contents : "삭제하시겠습니까?",
		         // draggable : true,
		         buttons : [{
		            name : "삭제",
		            func:function() {
		            	$("#no").val(no);
		            	action("delete");
		            	closePopup(); // 제일 위의 팝업 닫기
		            }
		         }, {
		            name : "취소"
		    }]
		})
	})
	
	// 목록 수정버튼 클릭시
	$("tbody").on("click", ".update_btn", function () {
		var no = $(this).parent().parent().attr("no");
		$("#no").val(no);

		
		//eq(인덱스번호) : 자식들 중 인덱스 몇번째 인지 찾아서 취득
		var con = $(this).parent().parent().children().eq(1).html();
		// 수정 내용 넣기 전 <> 변화
		con = con.replace(/&lt;/gi, "<");
		con = con.replace(/&gt;/gi, ">");
		
		
		$("#con").val(con);
		
		
		// 등록버튼 감추기 + 수정, 취소버튼 나타나기
		$(".insert").hide();
		$(".update").show();
		
		// 작성영역에 포커스
		$("#con").focus();
	})
	
	// 수정 영역의 취소버튼
	$("thead #cancelBtn").on("click", function () {
		// 입력내용 초기화
		$("#no").val("");
		$("#con").val("");
		// 등록버튼 나타나기 + 수정, 취소버튼 감추기
		$(".insert").show();
		$(".update").hide();
	})
	
	// 수정 영역의 수정버튼
	$("thead #updateBtn").on("click", function () {
		action("update");
	})
	
})


var msg ={
	"insert" : "등록",
	"update" : "수정",
	"delete" : "삭제",
}

function action(flag) {
	// con의 <를을 웹문자로 변환
	$("#con").val($("#con").val().replace(/</gi, "&lt;"));
	// con의 >를을 웹문자로 변환
	$("#con").val($("#con").val().replace(/>/gi, "&gt;"));
	
	
	// Javascript object에서의 [] : 해당 키값으로 내용을 불러오거나 넣을 수있다. 
	// Java의 Map에서 get, put역활
	console.log(msg[flag]);
	
	var params = $("#actionForm").serialize();
	
	$.ajax({
		url : "AOBAction/" + flag,
		type : "POST", 
		dataType: "json", 
		data: params, 
		success : function(res) { 
			switch(res.msg){
			case "success" :
				// 내용 초기화
				$("#con").val("");
				$("#no").val("");

				// 목록 재조회
				switch(flag){
				case "insert" :
				case "delete" :
					// 조회 데이터 초기화
					$("#page").val("1");
					$("#searchGbn").val("0");
					$("#searchText").val("");
					$("#oldGbn").val("0");
					$("#oldText").val("");
					break;
				case "update" :
					// 기존값 유지
					$("#searchGbn").val($("#oldGbn").val());
					$("#searchText").val($("#oldText").val());

					// 입력내용 초기화
					$("#no").val("");
					$("#con").val("");
					// 등록버튼 나타나기 + 수정, 취소버튼 감추기
					$(".insert").show();
					$(".update").hide();
					break;
					
			
				}
				reloadList();
				break;
			case "fail" :
				makeAlert("알림" ,  msg[flag] + "에 실패하였습니다.");
				break;
			case "error" :
				makeAlert("알림" , msg[flag] + " 중 문제가 발생하였습니다.");
				break;
			}
		},
		error : function(request, status, error) { 
			console.log(request.responseText); 
		}
	}); //Ajax End
} // action Function End

function reloadList() {
	var params = $("#searchForm").serialize();
	$.ajax({
		url : "AOBList",
		type : "POST", 
		dataType: "json", 
		data: params, 
		success : function(res) { 
			drawList(res.list);
			drawPaging(res.pd);
		},
		error : function(request, status, error) { 
			console.log(request.responseText); 
		}
	}); //Ajax End
}

function drawList(list) {
	var html = "";
	
	for(var data of list){
		html +="<tr no=\"" + data.NO  + "\">";
		html +="<td>" + data.MEM_NM + "</td>";
		html +="<td>" + data.CON + "</td>";
		html +="<td>" + data.DT + "</td>";
		html +="<td>";
		if("${sMemNo}" == data.MEM_NO){ // 작성자이면
			html +="<div class=\"cmn_btn_ml mtb update_btn\">수정</div><br/>";
			html +="<div class=\"cmn_btn_ml mtb delete_btn\">삭제</div>";
		}
		html +="</td>";
		html +="</tr>";
	}
	
	$("tbody").html(html);
}



function drawPaging(pd) {
	var html = "";
	
	html += "<span class=\"page_btn page_first\" page=\"1\">처음</span>";
	// 이전
	if($("#page").val() == "1"){
		html += "<span class=\"page_btn page_prev\" page=\"1\">이전</span>";
	} else{
		// 문자열을 숫자로 바꾸기위해 *1
		html += "<span class=\"page_btn page_prev\" page=\"" + ($("#page").val() *1 - 1) + "\">이전</span>";
	}
	
	for(var i = pd.startP; i <= pd.endP; i++){
		if($("#page").val() * 1 == i){ // 현재 페이지
			html += "<span class=\"page_btn_on\" page=\"" + i + "\">" + i + "</span>";
		} else { // 다른 페이지
			html += "<span class=\"page_btn\" page=\"" + i + "\">" + i + "</span>";
		}
	}
	
	if($("#page").val() *1 == pd.endP){ // 현재페이지가 마지막 페이지라면
		html += "<span class=\"page_btn page_next\" page=\"" +pd.maxP+ "\">다음</span>";
	} else {
		html += "<span class=\"page_btn page_next\" page=\"" + ($("#page").val() *1 + 1) + "\">다음</span>";
	}
	
	html += "<span class=\"page_btn page_last\" page=\"" +pd.maxP+ "\">마지막</span>";
	
	$(".paging_area").html(html);
                                                                     
}

</script>
</head>
<body>
<c:import url="/testAHeader"></c:import>
<hr/>
<div class="wrap">
	<div class="board_area">
		<!-- 작성 또는 로그인 -->
		
		<!-- 목록 -->
		<table class="board_table">
			<colgroup>
				<col width="100"> <!-- 작성자 -->
				<col width="500"> <!-- 내용 -->
				<col width="100"> <!-- 날짜 -->
				<col width="100"> <!-- 버튼 -->
			</colgroup>
			<thead>
				<c:choose>
					<%-- 이 주석 써야함--%>
					<c:when test="${empty sMemNo}"><!-- 비 로그인시 -->
						<tr>
							<th colspan="4">
								로그인이 필요한 서비스입니다.
								<div class="cmn_btn_ml login" id="loginBtn">로그인</div>
							</th>
						</tr>
					</c:when>
					<c:otherwise><!-- 로그인시 -->
						<tr>
							<th>${sMemNm}</th>
							<td colspan="2" class="con_td">
								<form action="#" id="actionForm">
									<input type="hidden" name="no" id="no">
									<input type="hidden" name="memNo" value="${sMemNo}">
									<textarea class="con" name="con" id="con">Hi</textarea>
								</form>
							</td>
							<td>
								<div class="insert">
									<div class="cmn_btn_ml" id="insertBtn">등록</div>
								</div> 
								<div class="update">
									<div class="cmn_btn_ml mtb" id="updateBtn">수정</div><br/>
									<div class="cmn_btn_ml mtb" id="cancelBtn">취소</div>
								</div>
							</td>
						</tr>
					</c:otherwise>
				</c:choose>
				<tr>
					<th>작성자</th>
					<th>내용</th>
					<th>작성자</th>
					<th>&nbsp;</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		<!-- 페이징 -->
		<div class="paging_area"></div>
	</div>
	<div class="search_area">
		<!-- 검색어 유지용 -->
		<input type="hidden" id="oldGbn" value="0" />
		<input type="hidden" id="oldText" />
		<form action="#" id="searchForm">
			<input type="hidden" name="page" id="page" value="1" />
			<select name="searchGbn" id="searchGbn">
				<option value="0">작성자</option>
				<option value="1">내용</option>
			</select>
			<input type="text" name="searchText" id="searchText"/>
			<div class="cmn_btn_ml" id="searchBtn">검색</div>
		</form>
	</div>
</div>
</body>
</html>

AOBController.java

package com.spring.sample.web.testa.Controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.spring.sample.common.service.IPagingService;
import com.spring.sample.web.testa.dao.IACDao;

@Controller
public class AOBController {
	@Autowired
	public IACDao dao;

	@Autowired
	public IPagingService ips;

	// DB안 붙으니 예외처리 x
	@RequestMapping(value = "AOB")
	public ModelAndView aob(ModelAndView mav) {
		mav.setViewName("testa/AOB/ob");

		return mav;
	}

	@RequestMapping(value = "/AOBAction/{gbn}", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String AOBAction(@PathVariable String gbn, @RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		int cnt = 0;

		try {
			switch (gbn) {
			case "insert":
				cnt = dao.insert("ob.insertOb", params);
				break;
			case "update":
				cnt = dao.update("ob.updateOb", params);
				break;
			case "delete":
				cnt = dao.update("ob.deleteOb", params);
				break;
			}

			if (cnt > 0) {
				model.put("msg", "success");
			} else {
				model.put("msg", "fail");
			}
		} catch (Exception e) {
			e.printStackTrace();
			model.put("msg", "error");
		}

		return mapper.writeValueAsString(model);
	}

	@RequestMapping(value = "/AOBList", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String AOBList(@RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		// 페이지 받아오게 되어있음
		int cnt = dao.getInt("ob.getObCnt", params);

		HashMap<String, Integer> pd = ips.getPagingData(Integer.parseInt(params.get("page")), cnt, 10, 5);

		params.put("start", Integer.toString(pd.get("start")));
		params.put("end", Integer.toString(pd.get("end")));

		List<HashMap<String, String>> list = dao.getList("ob.getObList", params);

		model.put("list", list);
		model.put("pd", pd);

		return mapper.writeValueAsString(model);
	}
}

OB_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="ob">
	<insert id="insertOb" parameterType="hashmap">
		INSERT INTO OB(NO, MEM_NO, CON) VALUES (OB_SEQ.NEXTVAL, #{memNo}, #{con})
	</insert>
	<update id="updateOb" parameterType="hashmap">
		UPDATE OB SET CON = #{con}
		WHERE NO = #{no}
	</update>
	<update id="deleteOb" parameterType="hashmap">
		UPDATE OB SET DEL = 0
		WHERE NO = #{no}
	</update>
	<select id="getObCnt" parameterType="hashmap" resultType="Integer">
		SELECT COUNT(*) AS CNT
			FROM OB O INNER JOIN MEM M ON O.MEM_NO = M.MEM_NO
			AND M.DEL=1
		WHERE O.DEL = 1
		<if test="searchText != null and searchText != ''">
			<choose>
			 	<when test="searchGbn eq 0">
			 	<!-- 작성자 검색 -->
			 			AND M.MEM_NM LIKE '%' || #{searchText} || '%'
			 	</when>
				<when test="searchGbn eq 1">
				<!-- 내용 검색 -->
			 			AND O.CON LIKE '%' || #{searchText} || '%'
			 	</when>
			</choose>
		</if>
	</select>
	<select id="getObList" parameterType="hashmap" resultType="hashmap">
		SELECT O.NO, O.MEM_NO, O.MEM_NM, O.CON, O.DT   
		FROM (SELECT O.NO, O.MEM_NO, M.MEM_NM, O.CON,
             CASE WHEN TO_CHAR(O.DT, 'YY.MM.DD') = TO_CHAR(SYSDATE, 'YY.MM.DD') 
                  THEN TO_CHAR(O.DT, 'HH24:MI')
                  ELSE TO_CHAR(O.DT, 'YY.MM.DD')
             END AS DT, 
               ROW_NUMBER() OVER(ORDER BY O.NO DESC) AS RNUM
	      FROM OB O INNER JOIN MEM M
	                  ON O.MEM_NO = M.MEM_NO
	                 AND M.DEL = 1
	      WHERE O.DEL = 1
	      <if test="searchText != null and searchText != ''">
				<choose>
				 	<when test="searchGbn eq 0">
				 	<!-- 작성자 검색 -->
				 			AND M.MEM_NM LIKE '%' || #{searchText} || '%'
				 	</when>
					<when test="searchGbn eq 1">
					<!-- 내용 검색 -->
				 			AND O.CON LIKE '%' || #{searchText} || '%'
				 	</when>
				</choose>
			</if>
	      ) O
		WHERE O.RNUM BETWEEN #{start} AND #{end}
	</select>
</mapper>

국비 TIL(Today I Learned) 20220822 ajaxForm으로 파일 첨부, 다운받기

토희 — Mon, 22 Aug 2022 15:07:03 +0900

Fileupload : 사용자 컴퓨터의 파일을 서버에 올림

샘플 스프링에 예시가 있음!~

input type="file"로 할려고 하면,

enctype이 필요

기존

serialize()는 파일이 안 넘어가서 추가 기능 필요

form의 객체 가져옴, ajaxFORM 이 있음

을 해야 ajax로 동작을 함

https://yoondeng.tistory.com/41

[ajax] jQuery ajaxForm 사용하기

프로젝트를 진행하던 중 파일을 업로드 기능을 만들게 되었다. 항상 form submit을 사용하다가 이번 프로젝트의 경우 비동기식으로 처리를 하였다. ajax 처리를 찾아보던 중 ajaxForm이라는 블라블라

yoondeng.tistory.com

Controller

FILE_EXT에서 F3누르면

확장자 제한을 두셨데

파일 업로드 경로

여기에 올라감

심볼릭 링크 : 바로가기와 비슷하나 물리적으로 직결시켜 연결시킴으로 공간적 효율을 구현함

위치정보

폴더a --------------------------------------- 폴더a 바로가기

사용자가 폴더a 바로가기를 요청하면 위치정보로 폴더a반환

위치정보+ 폴더a로 인식

폴더a --------------------------------------- 폴더a 심볼릭

폴더a와 폴더a 심볼릭을 동일시화함, 사용자가 요청하면 폴더a가 폴더a 심볼릭 반환, 폴더a 심볼릭를 사용자에게 반환

심볼릭 링크

톰캣이 C드라이브에서 돌고있으면은 D드라이브에게 접근 가능, 파일은 D드라이브에 쌓이고, C드라이브에는 톰캣만 돌고, 공간적 효율 올라감

프로젝트할때는 심볼릭 링크 쓸일은 없데

getPrimaryKey()에서 F3누르면 해당 메서드로 감

날짜 + 랜덤값 생성해서 동일한 파일명이 들어오면 덮어씌워지는것을 방지

transferTo

사실은 jsp파일 업로드 방식이 여러개가 있데

jsp 파일 업로드 cos.jar 이런것도 있고, cos.jar 는 어노셋이라든가 추가 설정이 더 필요한데

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=heartflow89&logNo=221009083830

[JSP] cos.jar 이용 파일 업로드 구현 방법

JAVA에서는 기본적으로 파일을 업로드하는 기능을 제공하지 않는다. 업로드 기능을 개발자가 구현하여 ...

blog.naver.com

transferTo는 스프링 셋팅이 따라서 따로 설정을 해줄게 없뎅

경로지정하기

upload폴더 없으면 만들면 된데

C:\MyWork\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\SampleSpring\resources\upload

경로 설정

파일이름이 날짜 + 랜덤하게 만들어짐

아까 그 폴더로 가면 실제 파일이 올라와져 있음

경로설정 끝난 이후에는 뭐가 가능해지냐면

ck에디터 붙인거에서 이미지 파일 업로드가능

이렇게 바탕화면에 있는 사진업로드하면(사용자)

우리가 지정해준 경로(서버)에 사진도 올라감

기존 TBOARD 테이블 수정 ATT 추가함

DB에는 파일명만 올라가게끔 할 예정

list.jsp

http://localhost:8090/SampleSpring/ATInsert 경로

form.js 추가

insert.jsp 스크립트 부분 수정

<script type="text/javascript">
$(document).ready(function () {
	// 에디터 연결
	// CKEDITOR.replace(아이디, 옵션)
	CKEDITOR.replace("con", {
		resize_enabled: false, // resize_enabled : 크기조절기능 활용여부
		language : "ko", // 사용언어
		enterMode: "2", // 엔터키처리방법. 2번이면 <br/>
		width : "100%", // 숫자일경우 px, 문자열일경우 css크기
		height : 400
	});
	
	$("#listBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	$("#insertBtn").on("click", function () {
		// CKEditor의 값 취득
		// CKEDITOR.instances[아이디] : CKEditor중 아이디가 같은 것을 찾겠다.
		//.getData() : 작성중인 내용을 취득하겠다.
		$("#con").val(CKEDITOR.instances['con'].getData());
		
		if($.trim($("#title").val()) == ""){
			makeAlert("알림","제목 입력하세요." , function () {
				$("#title").focus();
			})
		} else if($.trim($("#con").val()) == ""){
			makeAlert("알림","내용을 입력하세요." , function () {
				$("#con").focus();
			})
		} else {
			// 1. 파입업로드 -> 2. 업로드 파일명 취득 -> 3. 글 저장
			// 폼 객체 취득
			var form = $("#actionForm");
			// ajaxForm 적용
			form.ajaxForm({
				success: function (res) { // 데이터 주고 받기 성공시
					if(res.result == "SUCCESS"){ // 파일 전송 성공
						// 올라간 파일이 존재한다면, 첨부파일이 없을 수도 있으니 조건문 처리
						if(res.fileName.length > 0){
							$("#att").val(res.fileName[0]); // 올라간 파일명 보관		
						}
						// 3번 단계 글저장 시작, 기존테이터
						var params = $("#actionForm").serialize();
						
						$.ajax({
							url : "ATAction/insert", //restful api라는게 여기서 시작한다고?
							type : "POST", 
							dataType: "json", 
							data: params, 
							success : function(res) { 
								switch(res.msg){
								case "success" : 
									location.href ="ATList";
									break;
								case "fail" :
									makeAlert("알림" , "등록에 실패하였습니다.");
									break;
								case "error" :
									makeAlert("알림" , "등록 중 문제가 발생하였습니다.");
									break;
								}
							},
							error : function(request, status, error) { 
								console.log(request.responseText); 
							}
						});  // 글저장 끝
						
					} else { // 문제발생
						makeAlert("알림", "파일 업로드에<br/>문제가 발생하였습니다.")
					}
				},
				error: function () { // 에러시
					makeAlert("알림", "파일 업로드에<br/>문제가 발생하였습니다.")
				}
			}); // ajaxForm 설정 끝
			
			
			// ajaxForm 실행
			form.submit();
			
		}
	});
});

</script>

sql도 수정

첨부를 하면은 파일이름이 들어옴

js의 typeOf

첨부파일이 있으면은 아이콘 띄울려고

detail.jsp

상세보기에 파일이름이 보임

근디 이름을 다 보여야 하나, 내가 올린파일명으로 보일수있게 할수없는지

DB에서 처리할수도 있고

jsp에서 처리할수도 있고

DB에서 처리는 쉬우니까 jsp에서 처리하는법

update.jsp

경우의 수가 많아서 어렵

첨부파일이 들어가있을때와 없을때가 있음

updateBtn 스크립트 부분

$("#updateBtn").on("click", function () {
		// CKEditor의 값 취득
		// CKEDITOR.instances[아이디] : CKEditor중 아이디가 같은 것을 찾겠다.
		//.getData() : 작성중인 내용을 취득하겠다.
		$("#con").val(CKEDITOR.instances['con'].getData());
		
		if($.trim($("#title").val()) == ""){
			makeAlert("알림","제목 입력하세요." , function () {
				$("#title").focus();
			})
		} else if($.trim($("#con").val()) == ""){
			makeAlert("알림","내용을 입력하세요." , function () {
				$("#con").focus();
			})
		} else {
			// 1. 파입업로드 -> 2. 업로드 파일명 취득 -> 3. 글 저장
			// 폼 객체 취득
			var form = $("#actionForm");
			// ajaxForm 적용
			form.ajaxForm({
				success: function (res) { // 데이터 주고 받기 성공시
					if(res.result == "SUCCESS"){ // 파일 전송 성공
						// 올라간 파일이 존재한다면, 첨부파일이 없을 수도 있으니 조건문 처리
						if(res.fileName.length > 0){
							$("#att").val(res.fileName[0]); // 올라간 파일명 보관		
						}
						// 3번 단계 글저장 시작, 기존테이터
						var params = $("#actionForm").serialize();
						
						$.ajax({
							url : "ATAction/update", //restful api라는게 여기서 시작한다고?
							type : "POST", 
							dataType: "json", 
							data: params, 
							success : function(res) { 
								switch(res.msg){
								case "success" : 
									$('#backForm').submit();
									break;
								case "fail" :
									makeAlert("알림" , "등록에 실패하였습니다.");
									break;
								case "error" :
									makeAlert("알림" , "등록 중 문제가 발생하였습니다.");
									break;
								}
							},
							error : function(request, status, error) { 
								console.log(request.responseText); 
							}
						});  // 글저장 끝
						
					} else { // 문제발생
						makeAlert("알림", "파일 업로드에<br/>문제가 발생하였습니다.")
					}
				},
				error: function () { // 에러시
					makeAlert("알림", "파일 업로드에<br/>문제가 발생하였습니다.")
				}
			}); // ajaxForm 설정 끝
			
			
			// ajaxForm 실행
			form.submit();
		}
	});

처음에

이런 오류가 떠서 왜인자 했더니 c:choose 바로 밑에 주석 넣을수없음

https://hclee2575.tistory.com/133

[JSP] Illegal text inside "c:choose" tag: JSTL오류

출처 http://m.blog.naver.com/sontaemoo/70106360327 원래 소스는 아래와 같았다. 이렇게 사용하니 choose 태그 밑의 바로 밑 부분 주석을 인식을 못했다. 그래서 아래와 같이 바꾸니 아주..

hclee2575.tistory.com

수정됨, 파일 삭제하고 다시 올려도 되고,

https://blog.munilive.com/posts/input-file-type-accept-attribute.html

파일 첨부 시 특정 파일 확장자만 선택하게 하기

태그의 accept 속성을 이용해서 첨부파일 추가 시 특정 파일만 선택 가능하도록 하는 방법에 대한 글이다.

blog.munilive.com

input type="file" accept="파일 확장자|audio/*|video/*|image/*|미디어 타입">

파일 확장자 지정해줄수 있음, but 모든 파일 살아있음

강사님 샘플파일

fileUpload.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FileUpload Test</title>
<link rel="shortcut icon" href="resources/favicon/favicon.ico">
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<style type="text/css">
.wrap {
	width: 700px;
	margin: 0 auto;
}

.btn_wrap {
	height: 30px;
}

#uploadInfo {
	margin-top: 10px;
	padding: 5px;
	width: calc(100% - 10px);
	height: 80px;
	overflow: auto;
	border: 1px solid #7b7b7b;
	font-size: 10.5pt;
}
</style>
<script type="text/javascript" 
		src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/jquery/jquery.form.js"></script>
<script type="text/javascript" 
		src="resources/script/common/common.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#uploadBtn").on("click", function(){
		var fileForm = $("#fileForm");
		// ajaxForm : form의 동작을 동기화에서 비동기화 방식으로 변경
		fileForm.ajaxForm({
			// res 파일이름들이 담겨져있음
			success: function(res){
				if(res.result =="SUCCESS"){
					alert("저장완료");
					
					console.log(res);
					if(res.fileName.length > 0) {
						let html = "";
						for(file of res.fileName) {
							html += "<a href=\"resources/upload/" + file + "\" download>" + file + "</a><br/>";
						}
						
						$("#uploadInfo").append(html);
					}
					
				} else {
					alert("저장실패");
				} 
			}, //ajax error
			error: function(){
				alert("에러발생!!"); 
			}
		});
		
		fileForm.submit();
	});
});
</script>
</head>
<body>
<div class="cmn_title">파일 업로드/다운로드 샘플<div class="cmn_btn_mr float_right_btn" id="sampleListBtn">샘플목록</div></div>
<!-- 
	enctype : form전송 데이터 형태
	multipart : 파일데이터를 포함한 형태
 -->
<div class="wrap">
<form id="fileForm" name="fileForm" action="fileUploadAjax" 
	  method="post" enctype="multipart/form-data">
<div class="headline">첨부파일</div>
<table class="board_detail_table">
	<colgroup>
		<col width="100" />
		<col width="600" />
	</colgroup>
	<tbody>
	<tr>
		<th>첨부파일1</th>
		<td class="board_cont_left"><input type="file" name="attFile1" size="85" /></td>
	</tr>
	<tr>
		<th>첨부파일2</th>
		<td class="board_cont_left"><input type="file" name="attFile2" size="85" /></td>
	</tr>
	<tr>
		<th>첨부파일3</th>
		<td class="board_cont_left"><input type="file" name="attFile3" size="85" /></td>
	</tr>
	</tbody>
</table>
</form>
<div class="btn_wrap">
	<div class="cmn_btn_ml float_right_btn" id="uploadBtn">저장</div>
</div>
<div class="headline">첨부결과</div>
<div id="uploadInfo"></div>
</div>
</body>
</html>

FileController.java, 우리는 fileUploadAjax 만 씀

package com.spring.sample.common.controller;

import java.io.File;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.io.FilenameUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.servlet.ModelAndView;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.spring.sample.common.CommonProperties;
import com.spring.sample.util.Utils;

@Controller
public class FileController {
	@RequestMapping(value = "/fileUploadAjax", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String fileUploadAjax(HttpServletRequest request, ModelAndView modelAndView) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		HashMap<String, Object> modelMap = new HashMap<String, Object>();

		/* File Upload Logic */
		// 다운 캐스팅 한거래 넘겨 받은 request를 multipartRequest형태로 변환
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;

		String uploadExts = CommonProperties.FILE_EXT;
		String uploadPath = CommonProperties.FILE_UPLOAD_PATH;
		String fileFullName = "";

		// 폴더 또는 파일을 나타냄
		File folder = new File(uploadPath);

		if (!folder.exists()) { // 폴더 존재여부, 폴더 존재하지 않으면
			folder.mkdir(); // 폴더 생성
		}

		List<String> fileNames = new ArrayList<String>();
		try {
			@SuppressWarnings("rawtypes") // 노란줄 보기 싫어서 달아준거
			final Map files = multipartRequest.getFileMap();
			Iterator<String> iterator = multipartRequest.getFileNames();

			while (iterator.hasNext()) {
				String key = iterator.next();
				MultipartFile file = (MultipartFile) files.get(key);
				if (file.getSize() > 0) {
					String fileRealName = file.getOriginalFilename(); // 실제파일명
					String fileTmpName = Utils.getPrimaryKey(); // 고유 날짜키 받기
					String fileExt = FilenameUtils.getExtension(file.getOriginalFilename()).toLowerCase(); // 파일
					// 확장자추출

					if (uploadExts.toLowerCase().indexOf(fileExt) < 0) {
						throw new Exception("Not allowded file extension : " + fileExt.toLowerCase());
					} else {
						// 물리적으로 저장되는 파일명(실제파일명을 그대로 저장할지 rename해서 저장할지는 협의 필요)
						fileFullName = fileTmpName + fileRealName;
						// File(경로) - 폴더
						// File(경로, 파일명) - 파일
						// new File(new File(uploadPath), fileFullName)
						// uploadPath경로의 폴더에 fileFullName 이름의 파일
						// 파일.transferTo(새파일) - 새파일에 파일의 내용을 전송
						file.transferTo(new File(new File(uploadPath), fileFullName));

						fileNames.add(fileFullName);
					}
				}
			}

			modelMap.put("result", CommonProperties.RESULT_SUCCESS);
		} catch (Exception e) {
			// 공통 Exception 처리
			e.printStackTrace();
			modelMap.put("result", CommonProperties.RESULT_ERROR);
		}

		modelMap.put("fileName", fileNames);

		return mapper.writeValueAsString(modelMap);
	}

	@RequestMapping(value = "/imageUploadAjax", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String imageUploadAjax(HttpServletRequest request, ModelAndView modelAndView) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		HashMap<String, Object> modelMap = new HashMap<String, Object>();

		/* File Upload Logic */
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;

		String uploadExts = CommonProperties.IMG_EXT;
		String uploadPath = CommonProperties.FILE_UPLOAD_PATH;
		String fileFullName = "";

		File folder = new File(uploadPath);

		if (!folder.exists()) { // 폴더 존재여부
			folder.mkdir(); // 폴더 생성
		}

		List<String> fileNames = new ArrayList<String>();
		try {
			@SuppressWarnings("rawtypes")
			final Map files = multipartRequest.getFileMap();
			Iterator<String> iterator = multipartRequest.getFileNames();

			// 첨부파일 있을때
			while (iterator.hasNext()) {
				String key = iterator.next(); // 파일 취득
				MultipartFile file = (MultipartFile) files.get(key); // 만약 제네릭 뒀으면 형변환 안해도 됨
				if (file.getSize() > 0) {
					String fileRealName = file.getOriginalFilename(); // 실제파일명
					String fileTmpName = Utils.getPrimaryKey(); // 동일한 파일명이 넘어오면 덮어씌움 그런거 방지하기 위해, 고유 날짜키 받기
					String fileExt = FilenameUtils.getExtension(file.getOriginalFilename()).toLowerCase(); // 파일
					// 확장자추출

					if (uploadExts.toLowerCase().indexOf(fileExt) < 0) {
						throw new Exception("Not allowded image file extension : " + fileExt.toLowerCase());
					} else {
						// 물리적으로 저장되는 파일명(실제파일명을 그대로 저장할지 rename해서 저장할지는 협의필요
						fileFullName = fileTmpName + fileRealName;
						// File(경로) - 폴더
						// File(경로, 파일명) - 파일
						// (new File(new File(uploadPath), fileFullName)
						// uploadPath(경로의 폴더에 fileFullName 이름의 파일
						// file.transferTo(새파일) - 새파일에 파일의 내용을 전송
						// transferTo 스프링에서 새로 나왔데
						file.transferTo(new File(new File(uploadPath), fileFullName));

						fileNames.add(fileFullName);
					}
				}
			}

			modelMap.put("result", CommonProperties.RESULT_SUCCESS);
		} catch (Exception e) {
			// 공통 Exception 처리
			e.printStackTrace();
			modelMap.put("result", CommonProperties.RESULT_ERROR);
		}

		modelMap.put("fileName", fileNames);

		return mapper.writeValueAsString(modelMap);
	}

	/**
	 * CKEditor용 image업로드
	 **/
	@RequestMapping(value = "/imageUpload", method = RequestMethod.POST)
	public void editorImageUploadAjax(HttpServletRequest request, HttpServletResponse response,
			@RequestParam MultipartFile upload, ModelAndView modelAndView) throws Throwable {
		PrintWriter printWriter = null;
		try {
			String uploadExts = CommonProperties.IMG_EXT; // 확장자
			String uploadPath = CommonProperties.FILE_UPLOAD_PATH; // 업로드경로
			String fileFullName = "";

			File fileDir = new File(uploadPath);

			if (!fileDir.exists()) {
				fileDir.mkdirs(); // 디렉토리가 존재하지 않는다면 생성
			}

			if (upload.getSize() > 0) {
				String fileRealName = upload.getOriginalFilename().replace(" ", "_").toLowerCase(); // 실제파일명
				String fileTmpName = Utils.getPrimaryKey(); // 고유 날짜키 받기
				String fileExt = FilenameUtils.getExtension(upload.getOriginalFilename()).toLowerCase(); // 파일

				if (uploadExts.toLowerCase().indexOf(fileExt) >= 0) {
					fileFullName = fileTmpName + fileRealName;
					upload.transferTo(new File(fileDir, fileFullName));

				} else {
					// 파일 확장자가 틀릴 경우
					printWriter = response.getWriter();

					printWriter.println("<script type='text/javascript'>alert('파일 확장자가 지원을 하지 않습니다.');</script>");
					printWriter.flush();
					printWriter.close();
				}

				// 성공 시
				String callback = request.getParameter("CKEditorFuncNum");

				printWriter = response.getWriter();

				printWriter.println("<script type='text/javascript'>" + "window.parent.CKEDITOR.tools.callFunction("
						+ callback + ",'" + "resources/upload/" + fileFullName + "','이미지를 업로드 하였습니다.'" + ")</script>");
				printWriter.flush();
				printWriter.close();

			} else {
				// 파일 크기가 0이거나 없는 경우
				printWriter = response.getWriter();

				printWriter.println("<script type='text/javascript'>alert('파일 업로드에 실패하였습니다.');</script>");
				printWriter.flush();
				printWriter.close();
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			if (printWriter != null) {
				printWriter.close();
			}
		}
	}
}

CommonProperties.java, 파일 업로드 부분만 봐

package com.spring.sample.common;

public class CommonProperties {
	/**
	 * 기본 셋
	 */
	// 기본 리스트 사이즈
	public static final int VIEWCOUNT = 10;
	// 기본 페이지 사이즈
	public static final int PAGECOUNT = 10;

	/**
	 * Ajax Result
	 */
	public static final String RESULT_SUCCESS = "SUCCESS";

	public static final String RESULT_ERROR = "ERROR";

	/**
	 * 파일 업로드
	 */
	// 파일 업로드 경로
	// 실제 물리적으로 저장될 경로
	// 가상 서버에 직접 올린다고 한거
	// 문제는 clean하면 파일 날라갈수있음
	public static final String FILE_UPLOAD_PATH = "C:\\MyWork\\workspace\\.metadata\\.plugins\\org.eclipse.wst.server.core"
			+ "\\tmp0\\wtpwebapps\\SampleSpring\\resources\\upload";

	// 허용파일 확장자
	public static final String FILE_EXT = "xls|ppt|doc|xlsx|pptx|docx|hwp|csv|jpg|jpeg|png|gif|bmp|tld|txt|pdf|zip|alz|7z";
	public static final String IMG_EXT = "jpg|jpeg|png|gif|bmp";

	/**
	 * 암호화키(AES기반 16글자)
	 */
	public static final String SECURE_KEY = "goodeesmart12345";
}

Utils.java, getPrimaryKey()만 참고

package com.spring.sample.util;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Base64;
import java.util.Base64.Decoder;
import java.util.Base64.Encoder;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Set;

import javax.crypto.Cipher;
import javax.crypto.spec.SecretKeySpec;

import org.apache.commons.lang.RandomStringUtils;

import com.spring.sample.common.CommonProperties;

public class Utils {
	/**
	 * Primary Key 생성
	 * 
	 * @return String
	 */
	public static String getPrimaryKey() {
		SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss");
		return formatter.format(new java.util.Date()) + RandomStringUtils.randomNumeric(6);
	}
	
	/**
	 * 문자열을 key를 통해 암호화 하고 base64 로 인코딩
	 * 
	 * @return String
	 * @throws Throwable
	 */
	public static String encryptAES128(String value) throws Throwable {
		SecretKeySpec keySpec 
				= new SecretKeySpec(CommonProperties.SECURE_KEY.getBytes("UTF-8"), "AES");

		Cipher cipher = Cipher.getInstance("AES");
		cipher.init(Cipher.ENCRYPT_MODE, keySpec);
		byte[] encrypted = cipher.doFinal(value.getBytes()); // 암호화
		
		Encoder encoder = Base64.getEncoder();
		
		String encodeString = encoder.encodeToString(encrypted); // 바이트 타입의 배열을 문자열로 변환

		return encodeString;
	}

	/**
	 * key 를 통해 문자열 base64 디코딩
	 * 
	 * @return String
	 * @throws Throwable
	 */
	public static String decryptAES128(String value) throws Throwable {
		SecretKeySpec keySpec = new SecretKeySpec(CommonProperties.SECURE_KEY.getBytes("UTF-8"), "AES");

		Cipher cipher = Cipher.getInstance("AES");
		cipher.init(Cipher.DECRYPT_MODE, keySpec);
		
		Decoder decoder = Base64.getDecoder();
		
		byte[] decodeBytes = decoder.decode(value); //문자열 형태의 파라메터를 배열에 바이트 변환 후 삽입

		byte[] decryptBytes = cipher.doFinal(decodeBytes); // 복호화

		return new String(decryptBytes);
	}
	
	/**
	 * MAP의 Key를 소문자로 변환
	 * 
	 * @return HashMap<String, String>
	 */
	public static HashMap<String, String> toLowerMapKey(HashMap<String, String> oldMap) throws Throwable {
		Set<String> keySet = oldMap.keySet();
		
		Iterator<String> keys = keySet.iterator();
		
		HashMap<String, String> newMap = new HashMap<String, String>();
		
		while(keys.hasNext()) {
			String key = keys.next();
			newMap.put(key.toLowerCase(), String.valueOf(oldMap.get(key)));
		}
		
		return newMap;
	}
	
	/**
	 * List의 MAP Key를 소문자로 변환
	 * 
	 * @return HashMap<String, String>
	 */
	public static List<HashMap<String, String>> toLowerListMapKey(List<HashMap<String, String>> oldList) {
		List<HashMap<String, String>> newList = new ArrayList<HashMap<String, String>>();
		
		for(HashMap<String, String> oldMap : oldList) {
			Set<String> keySet = oldMap.keySet();
			
			Iterator<String> keys = keySet.iterator();
			
			HashMap<String, String> newMap = new HashMap<String, String>();
			
			while(keys.hasNext()) {
				String key = keys.next();
				newMap.put(key.toLowerCase(), String.valueOf(oldMap.get(key)));
			}
			
			newList.add(newMap);
		}
		
		return newList;
	}
	
	/**
	 * List의 MAP Key를 camel식으로 변환
	 * 
	 * @return HashMap<String, String>
	 */
	public static List<HashMap<String, String>> toCamelListMapKey(List<HashMap<String, String>> oldList) {
		List<HashMap<String, String>> newList = new ArrayList<HashMap<String, String>>();
		
		for(HashMap<String, String> oldMap : oldList) {
			Set<String> keySet = oldMap.keySet();
			
			Iterator<String> keys = keySet.iterator();
			
			HashMap<String, String> newMap = new HashMap<String, String>();
			
			while(keys.hasNext()) {
				String key = keys.next();
				
				String[] temp = key.split("_");
				
				String camelKey = "";
				
				for(int i = 0 ; i < temp.length ; i++) {
					if(i == 0) {
						camelKey += temp[0].toLowerCase();
					} else {
						camelKey += temp[i].substring(0, 1).toUpperCase() + temp[i].substring(1).toLowerCase();
					}
				}
				
				newMap.put(camelKey, String.valueOf(oldMap.get(key)));
			}
			
			newList.add(newMap);
		}
		
		return newList;
	}
}

insert.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글쓰기</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{
	width: 800px;
	margin: 0 auto;
}


</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/jquery/jquery.form.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<!-- CKEditor -->
<!-- 제이쿼리 뒤에 나와야함, 제이쿼리 기반으로 동작하기 때문에 -->
<script type="text/javascript" src="resources/script/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 에디터 연결
	// CKEDITOR.replace(아이디, 옵션)
	CKEDITOR.replace("con", {
		resize_enabled: false, // resize_enabled : 크기조절기능 활용여부
		language : "ko", // 사용언어
		enterMode: "2", // 엔터키처리방법. 2번이면 <br/>
		width : "100%", // 숫자일경우 px, 문자열일경우 css크기
		height : 400
	});
	
	$("#listBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	$("#insertBtn").on("click", function () {
		// CKEditor의 값 취득
		// CKEDITOR.instances[아이디] : CKEditor중 아이디가 같은 것을 찾겠다.
		//.getData() : 작성중인 내용을 취득하겠다.
		$("#con").val(CKEDITOR.instances['con'].getData());
		
		if($.trim($("#title").val()) == ""){
			makeAlert("알림","제목 입력하세요." , function () {
				$("#title").focus();
			})
		} else if($.trim($("#con").val()) == ""){
			makeAlert("알림","내용을 입력하세요." , function () {
				$("#con").focus();
			})
		} else {
			// 1. 파입업로드 -> 2. 업로드 파일명 취득 -> 3. 글 저장
			// 폼 객체 취득
			var form = $("#actionForm");
			// ajaxForm 적용
			form.ajaxForm({
				success: function (res) { // 데이터 주고 받기 성공시
					if(res.result == "SUCCESS"){ // 파일 전송 성공
						// 올라간 파일이 존재한다면, 첨부파일이 없을 수도 있으니 조건문 처리
						if(res.fileName.length > 0){
							$("#att").val(res.fileName[0]); // 올라간 파일명 보관		
						}
						// 3번 단계 글저장 시작, 기존테이터
						var params = $("#actionForm").serialize();
						
						$.ajax({
							url : "ATAction/insert", //restful api라는게 여기서 시작한다고?
							type : "POST", 
							dataType: "json", 
							data: params, 
							success : function(res) { 
								switch(res.msg){
								case "success" : 
									location.href ="ATList";
									break;
								case "fail" :
									makeAlert("알림" , "등록에 실패하였습니다.");
									break;
								case "error" :
									makeAlert("알림" , "등록 중 문제가 발생하였습니다.");
									break;
								}
							},
							error : function(request, status, error) { 
								console.log(request.responseText); 
							}
						});  // 글저장 끝
						
					} else { // 문제발생
						makeAlert("알림", "파일 업로드에<br/>문제가 발생하였습니다.")
					}
				},
				error: function () { // 에러시
					makeAlert("알림", "파일 업로드에<br/>문제가 발생하였습니다.")
				}
			}); // ajaxForm 설정 끝
			
			
			// ajaxForm 실행
			form.submit();
			
		}
	});
});

</script>
</head>
<body>
<c:import url="/testAHeader"></c:import>
<form action="ATList" id="backForm" method="post">
	<input type="hidden" name="page" value="${param.page}" />
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
<!-- ajax쓰기 때문에 gbn 지움 -->
<div class="wrap">
	<form action="fileUploadAjax" id="actionForm" method="post" enctype="multipart/form-data">
		<input type="hidden" name="att" id="att" /> <!-- 실 저장된 파일명 보관용 -->
		<table class="board_detail_table">
			<tr>
				<th>제목</th>
				<td><input type="text" name="title" id="title" /></td>
			</tr>
			<tr>
				<th>작성자</th>
				<td>${sMemNm}<input type="hidden" name="memNo" value="${sMemNo}" /><br/></td>
			</tr>
			<tr>
				<th colspan="2">내용</th>
			</tr>
			<tr>
				<th colspan="2"><textarea rows="10" cols="30" name="con" id="con"></textarea></th>
			</tr>
			
			<tr>
				<th>첨부파일</th>
				<td><input type="file" name="attFile" /></td>
			</tr>
		</table>
	</form>
	<div class="cmn_btn_ml float_right_btn" id="listBtn">목록</div>
	<div class="cmn_btn_ml float_right_btn" id="insertBtn">등록</div>
</div>
</body>
</html>

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
#searchTxt{
width: 160px;
height: 30px; 
padding: 0px 2px;
text-indent: 5px;
vertical-align: middle;
border: 1px solid #d7d7d7; 
outline-color: #70adf9;
box-sizing: border-box;
}
.search_area{
	width: 800px;
	text-align: right;
	margin: 0 auto;
}
.board_area{
	width: 800px;
	margin: 0 auto;
}

.att {
	display: inline-block; 
	vertical-align: top; 
	width: 18px; 
	height: 18px; 
	background-image: url('resources/images/attFile.png'); 
	background-size: cover;
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	if("${params.searchGbn}" != ""){
		$("#searchGbn").val("${param.searchGbn}");
	} else {
		$("#oldGbn").val("0");
	}
	
	//목록 조회
	reloadList();
	
	//검색버튼
	$("#searchBtn").on("click", function () {
		$("#page").val("1");
		// 이동을 안하다보니 문제가 기존검색값 셋팅을 안해줌
		// 그래서  신규 상태 적용
		$("#oldGbn").val($("#searchGbn").val());
		$("#oldTxt").val($("#searchTxt").val());
		
		
		// 데이터만 가져와서 다시 그려줌, 화면 이동 없음
		reloadList();
	});
	
	//페이징 버튼
	$(".paging_area").on("click", "span", function () {
		// 기존 검색상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
			
		
		$("#page").val($(this).attr("page"));
		
		reloadList();
	})
	
	// 등록버튼
	$("#insertBtn").on("click", function () {
		// 기존 검색상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action", "ATInsert");
		$("#actionForm").submit();
	})
	
	$("tbody").on("click", "tr", function () {
		$("#no").val($(this).attr("no"));
		
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action", "ATDetail");
		$("#actionForm").submit();
	})
});

// 목록 조회 호출, ajax불러오기
function reloadList() {
	var params = $("#actionForm").serialize();
	
	$.ajax({
		url : "ATListAjax", //경로
		type : "POST", // 전송방식(GET: 주소형태, POST : 주소 헤더 형태)
		dataType: "json", // 데이터 형태
		data: params, // 보낼데이터
		success : function(res) { //성공했을 때 결과를 res에 받고 함수 실행
			console.log(res); // 콘솔에  pd랑 list 값이 보임
			drawList(res.list);
			drawPaging(res.pd);
		},
		error : function(request, status, error) { // 실패했을 때 함수실행
			console.log(request.responseText); // 실패 상세 태역
		}
	});
	
}

function drawList(list) {
	var html = "";
	
	// list에는 map이 들어있으니까 하나씩 꺼내오겠다
	for(var data of list){
		console.log(typeof(data.ATT) !="undefined");
		html += "<tr no=\"" + data.NO + "\">";
		html += "<td>" + data.NO + "</td>";
		html += "<td>";
		html += data.TITLE;
		if(typeof(data.ATT) !="undefined"){ // 첨부파일이 있다면
			html += "<span class=\"att\"></span>";
		}
		html += "</td>";
		html += "<td>" + data.MEM_NM + "</td>";
		html += "<td>" + data.DT + "</td>";
		html += "<td>" + data.HIT + "</td>";
		html += "</tr>";
	}   
	
	$("tbody").html(html);
}

function drawPaging(pd) {
	var html = "";
	
	html += "<span class=\"page_btn page_first\" page=\"1\">처음</span>";
	// 이전
	if($("#page").val() == "1"){
		html += "<span class=\"page_btn page_prev\" page=\"1\">이전</span>";
	} else{
		// 문자열을 숫자로 바꾸기위해 *1
		html += "<span class=\"page_btn page_prev\" page=\"" + ($("#page").val() *1 - 1) + "\">이전</span>";
	}
	
	for(var i = pd.startP; i <= pd.endP; i++){
		if($("#page").val() * 1 == i){ // 현재 페이지
			html += "<span class=\"page_btn_on\" page=\"" + i + "\">" + i + "</span>";
		} else { // 다른 페이지
			html += "<span class=\"page_btn\" page=\"" + i + "\">" + i + "</span>";
		}
	}
	
	if($("#page").val() *1 == pd.endP){ // 현재페이지가 마지막 페이지라면
		html += "<span class=\"page_btn page_next\" page=\"" +pd.maxP+ "\">다음</span>";
	} else {
		html += "<span class=\"page_btn page_next\" page=\"" + ($("#page").val() *1 + 1) + "\">다음</span>";
	}
	
	html += "<span class=\"page_btn page_last\" page=\"" +pd.maxP+ "\">마지막</span>";
	
	$(".paging_area").html(html);
                                                                     
}
</script>		
</head>
<body>
<c:import url="/testAHeader"></c:import>
<hr/>
<!-- 페이징 때 기존 검색 내용 유지용 -->
<input type="hidden" id="oldGbn" value="${param.searchGbn}"/>
<input type="hidden" id="oldTxt" value="${param.searchTxt}"/>

<!-- 데이터 후 처리해서 로딩이 빨라 -->
<div class="search_area">
	<!--  method="post"는 나중에 쓸 예정, no 보낼때 -->
	<form action="#" id="actionForm" method="post">
	<input type="hidden" name="no" id="no" />
		<input type="hidden" name="page" id="page" value="${page}" />
		<select name="searchGbn" id="searchGbn">
			<option value="0">제목</option>
			<option value="1">작성자</option>
		</select>
		<input type="text" name="searchTxt" id="searchTxt" value="${param.searchTxt}" />
		<div class="cmn_btn_ml" id="searchBtn">검색</div>
		<c:if test="${!empty sMemNo}">
			<div class="cmn_btn_ml" id="insertBtn">등록</div>
		</c:if>
	</form>
</div>
<div class="board_area">
<table class="board_table">
	<colgroup>
		<col width="100" />
		<col width="400" />
		<col width="100" />
		<col width="100" />
		<col width="100" />
	</colgroup>
	<thead>
		<tr>
			<th>번호</th>
			<th>제목</th>
			<th>작성자</th>
			<th>작성일</th>
			<th>조회수</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>
<div class="paging_area"></div>
</div>
</body>
</html>

detail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- jsl의 functions : el tag 추가옵션 -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상세보기</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{
	width: 800px;
	margin: 0 auto;
}
.con{
text-align: left; 
min-height: 400px;
}
</style>
<script type="text/javascript" 
		src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
src="resources/script/common/popup.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#listBtn").on("click", function() {
		$("#actionForm").attr("action","ATList"); 
		$("#actionForm").submit();
	});
	
	// ajax사용 예정
	$("#deleteBtn").on("click", function () {
		  makePopup({
		         title : "알림",
		         contents : "삭제하시겠습니까?",
		         // draggable : true,
		         buttons : [{
		            name : "삭제",
		            func:function() {
		            	var params = $("#actionForm").serialize();
		    			
		    			$.ajax({
		    				url : "ATAction/delete", //restful api라는게 여기서 시작한다고?
		    				type : "POST", 
		    				dataType: "json", 
		    				data: params, 
		    				success : function(res) { 
		    					switch(res.msg){
		    					case "success" : 
		    						location.href ="ATList";
		    						break;
		    					case "fail" :
		    						makeAlert("알림" , "삭제에 실패하였습니다.");
		    						break;
		    					case "error" :
		    						makeAlert("알림" , "삭제 중 문제가 발생하였습니다.");
		    						break;
		    					}
		    				},
		    				error : function(request, status, error) { 
		    					console.log(request.responseText); 
		    				}
		    			});
		            }
		         }, {
		            name : "취소"
		    }]
		});
	});
	
	$("#updateBtn").on("click", function () {
		$("#actionForm").attr("action","ATUpdate");
		$("#actionForm").submit();
	});
});

</script>
</head>
<body>
<c:import url="/testAHeader"></c:import>
<form action="#" id="actionForm" method="post">
	<input type="hidden" name="gbn" value="d"> <!-- selRes는 gbn을 받게 되어있어서 값을 추가해줘야함 -->
	<input type="hidden" name="no" value="${data.NO}">
	<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
		<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
<div class="wrap">
<table class="board_detail_table">
	<tr>
		<th>번호</th>
		<td>${data.NO}</td>
	</tr>
	<tr>
		<th>제목</th>
		<td>${data.TITLE}</td>
	</tr>
	<tr>
		<th>작성자</th>
		<td>${data.MEM_NM}</td>
	</tr>
	<tr>
		<th>조회수</th>
		<td> ${data.HIT}</td>
	</tr>
	<tr>
		<th>작성일</th>
		<td> ${data.DT}</td>
	</tr>
	<tr>
		<th colspan="2">내용</th>
	</tr>
	<tr>
		<td class="con" colspan="2">${data.CON}</td>
	</tr>
	<c:if test="${!empty data.ATT}">
	<!-- fn:length(대상) : 대상 문자열의 길이나 배열, 리스트의 크기를 가져온다 -->
	<c:set var="fileLength" value="${fn:length(data.ATT)}"></c:set>
	<!-- fn:substring(값, 숫자1, 숫자2) : 값을 숫자1이상부터, 숫자2미만까지, 인덱스 기준으로 자른다. -->
	<c:set var="fileName" value="${fn:substring(data.ATT, 20, fileLength)}"></c:set>
	<tr>
		<th>첨부파일</th>
		<!-- download 없으면 이미지를 브라우저에 띄움, 파일을 안 받고 -->
		<!-- download="${fileName}" 옵션을 줘야 다운받을때도 파일명으로 받아짐 -->
		<td><a href="resouces/upload/${data.ATT}" download="${fileName}">${fileName}</a></td>
	</tr>
	</c:if>
</table>
	<div class="cmn_btn_ml float_right_btn" id="listBtn">목록</div>
	<c:if test="${sMemNo eq data.MEM_NO}">
		<div class="cmn_btn_ml float_right_btn" id="deleteBtn">삭제</div>
		<div class="cmn_btn_ml float_right_btn" id="updateBtn">수정</div>
	</c:if>
</div>
</body>

update.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- jsl의 functions : el tag 추가옵션 -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글수정</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{
	width: 800px;
	margin: 0 auto;
}

.att {
	display: none;
}


</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/jquery/jquery.form.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<!-- CKEditor -->
<!-- 제이쿼리 뒤에 나와야함, 제이쿼리 기반으로 동작하기 때문에 -->
<script type="text/javascript" src="resources/script/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 에디터 연결
	// CKEDITOR.replace(아이디, 옵션)
	CKEDITOR.replace("con", {
		resize_enabled: false, // resize_enabled : 크기조절기능 활용여부
		language : "ko", // 사용언어
		enterMode: "2", // 엔터키처리방법. 2번이면 <br/>
		width : "100%", // 숫자일경우 px, 문자열일경우 css크기
		height : 400
	});
	
	$("#cancelBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	// 첨부파일 파일삭제 버튼 클릭시
	$("#fileDelBtn").on("click", function () {
		// 기존 파일 내역 영역 제거
		$(".attOld").remove();
		// 기존 값 제거
		$("#att").val("");
		// 파일 선택 영역 제공 
		$(".att").show();
	});
	
	$("#updateBtn").on("click", function () {
		// CKEditor의 값 취득
		// CKEDITOR.instances[아이디] : CKEditor중 아이디가 같은 것을 찾겠다.
		//.getData() : 작성중인 내용을 취득하겠다.
		$("#con").val(CKEDITOR.instances['con'].getData());
		
		if($.trim($("#title").val()) == ""){
			makeAlert("알림","제목 입력하세요." , function () {
				$("#title").focus();
			})
		} else if($.trim($("#con").val()) == ""){
			makeAlert("알림","내용을 입력하세요." , function () {
				$("#con").focus();
			})
		} else {
			// 1. 파입업로드 -> 2. 업로드 파일명 취득 -> 3. 글 저장
			// 폼 객체 취득
			var form = $("#actionForm");
			// ajaxForm 적용
			form.ajaxForm({
				success: function (res) { // 데이터 주고 받기 성공시
					if(res.result == "SUCCESS"){ // 파일 전송 성공
						// 올라간 파일이 존재한다면, 첨부파일이 없을 수도 있으니 조건문 처리
						if(res.fileName.length > 0){
							$("#att").val(res.fileName[0]); // 올라간 파일명 보관		
						}
						// 3번 단계 글저장 시작, 기존테이터
						var params = $("#actionForm").serialize();
						
						$.ajax({
							url : "ATAction/update", //restful api라는게 여기서 시작한다고?
							type : "POST", 
							dataType: "json", 
							data: params, 
							success : function(res) { 
								switch(res.msg){
								case "success" : 
									$('#backForm').submit();
									break;
								case "fail" :
									makeAlert("알림" , "등록에 실패하였습니다.");
									break;
								case "error" :
									makeAlert("알림" , "등록 중 문제가 발생하였습니다.");
									break;
								}
							},
							error : function(request, status, error) { 
								console.log(request.responseText); 
							}
						});  // 글저장 끝
						
					} else { // 문제발생
						makeAlert("알림", "파일 업로드에<br/>문제가 발생하였습니다.")
					}
				},
				error: function () { // 에러시
					makeAlert("알림", "파일 업로드에<br/>문제가 발생하였습니다.")
				}
			}); // ajaxForm 설정 끝
			
			
			// ajaxForm 실행
			form.submit();
		}
	});
});

</script>
</head>
<body>
<c:import url="/testAHeader"></c:import>
<form action="ATDetail" id="backForm" method="post">
	<input type="hidden" name="no" value="${data.NO}" />
	<input type="hidden" name="page" value="${param.page}" />
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
<!-- ajax쓰기 때문에 gbn 지움 -->
<div class="wrap">
	<form action="fileUploadAjax" id="actionForm" method="post" enctype="multipart/form-data">
	<input type="hidden" name="no" value="${data.NO}" />
		<table class="board_detail_table">
			<tr>
				<th>번호</th>
				<td>${data.NO}</td>
			</tr>
			<tr>
				<th>제목</th>
				<td><input type="text" name="title" id="title" value="${data.TITLE}"/></td>
			</tr>
			<tr>
				<th>작성자</th>
				<td>${sMemNm}</td>
			</tr>
			<tr>
				<th colspan="2">내용</th>
			</tr>
			<tr>
				<th colspan="2"><textarea rows="10" cols="30" name="con" id="con">${data.CON}</textarea></th>
			</tr>
			<tr>
				<th>첨부파일</th>
				<c:choose>
					<c:when test="${empty data.ATT}">
						<!-- 파일이 없을때 -->
						<td>
							<input type="file" name="attFile" />
							<input type="hidden" name="att" id="att"/>
						</td>
					</c:when>
					<c:otherwise>
					<!-- 파일이 있을때 -->
						<td>
							<span class="attOld"> <!-- 기존 파일 -->
								<!-- fn:length(대상) : 대상 문자열의 길이나 배열, 리스트의 크기를 가져온다 -->
								<c:set var="fileLength" value="${fn:length(data.ATT)}"></c:set>
								<!-- fn:substring(값, 숫자1, 숫자2) : 값을 숫자1이상부터, 숫자2미만까지, 인덱스 기준으로 자른다. -->
								<c:set var="fileName" value="${fn:substring(data.ATT, 20, fileLength)}"></c:set>
								${fileName}
								<div class="cmn_btn_ml float_right_btn" id="fileDelBtn">파일삭제</div>
							</span>
							<span class="att"> <!-- 기존 파일 삭제 후 새 파일 용도 -->
								<input type="file" name="attFile" />
								<input type="hidden" name="att" id="att" value="${data.ATT}"/>
							</span>
						</td>
					</c:otherwise>
				</c:choose>
			</tr>
		</table>
	</form>
	<div class="cmn_btn_ml float_right_btn" id="cancelBtn">취소</div>
	<div class="cmn_btn_ml float_right_btn" id="updateBtn">수정</div>
</div>
</body>
</html>

T_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="T">
	<select id="getTCnt" resultType="Integer" parameterType="hashmap">
		SELECT COUNT(*) AS CNT
		FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
		AND M.DEL = 1
		WHERE T.DEL = 1
		<if test="searchTxt != null and searchTxt !=''">
			<choose>
				<when test="searchGbn eq 0">
					AND T.TITLE LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn eq 1">
					AND M.MEM_NM LIKE '%' ||  #{searchTxt} || '%'
				</when>
			</choose>
		</if>
	</select>
	
	<select id="getTList" resultType="hashmap" parameterType="hashmap">
		SELECT T.NO, T.TITLE, T.MEM_NM, T.HIT, T.DT, T.ATT
		FROM(
		SELECT T.NO, T.TITLE, M.MEM_NM, T.HIT,
		CASE WHEN TO_CHAR(DT,'YY.MM.DD') = TO_CHAR(SYSDATE, 'YY.MM.DD')
		        THEN TO_CHAR(DT, 'HH24:MI')
		        ELSE TO_CHAR(DT, 'YY.MM.DD')
		        END AS DT, ATT,
		        ROW_NUMBER() OVER(ORDER BY T.NO DESC) AS RNUM
				FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
				AND M.DEL = 1
		WHERE T.DEL = 1
		<if test="searchTxt != null and searchTxt !=''">
			<choose>
				<when test="searchGbn eq 0">
					AND T.TITLE LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn eq 1">
					AND M.MEM_NM LIKE '%' ||  #{searchTxt} || '%'
				</when>
			</choose>
		</if>) T
		WHERE T.RNUM BETWEEN #{start} AND #{end}
	</select>
	
	<insert id="insertT" parameterType="hashmap">
		INSERT INTO TBOARD(NO, TITLE, MEM_NO, CON, ATT)
		VALUES (TBOARD_SEQ.NEXTVAL, #{title} , #{memNo}, #{con}, #{att})
	</insert>
	 
	<select id="getT" parameterType="hashmap"  resultType="hashmap">
		SELECT T.NO, T.TITLE, M.MEM_NO, M.MEM_NM, T.CON, T.HIT,
	    TO_CHAR(T.DT, 'YYYY-MM-DD') AS DT, T.ATT
		FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
		AND M.DEL = 1
		WHERE T.DEL = 1
		AND T.NO = #{no}
	</select>
	
	<update id="updateTHit" parameterType="hashmap">
		UPDATE TBOARD SET HIT = HIT + 1
		WHERE NO = #{no}
	</update>
	
	<update id="deleteT"  parameterType="hashmap">
		UPDATE TBOARD SET DEL = 0
		WHERE NO = #{no}
	</update>
	
	<update id="updateT"  parameterType="hashmap">		
		UPDATE TBOARD SET TITLE = #{title},
		CON = #{con},
		ATT = #{att}
		WHERE NO = #{no}
	</update>
</mapper>

내일 한줄게시판 할예정, 한줄게시판이 댓글이 됨

국비 TIL(Today I Learned) 20220818 스프링 ajax로 추가, 상세, 수정, 삭제, mem테이블 실습

토희 — Thu, 18 Aug 2022 15:53:45 +0900

어제 list.jsp 에서

if문 삭제 (완전히 비동기 형식일때는 if문 넣는게 맞는데, 우리는 동기 섞여있으니)

이 방식으로! else문 추가됨

동기랑 섞인 형태일떄는 이 방식이 맞데

T폴더에

그리고 insert, update, detail, delete 기능 추가하고,

Ajax : 목록조회, 등록, 수정, 삭제

동기화: 단건 조회, 단순 이동

ajax일때 흐름도

MEM 테이블 ajax로 변경(실습)

이렇게 폴더, 파일 만듬

전체 코드

testa/T/list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
#searchTxt{
width: 160px;
height: 30px; 
padding: 0px 2px;
text-indent: 5px;
vertical-align: middle;
border: 1px solid #d7d7d7; 
outline-color: #70adf9;
box-sizing: border-box;
}
.search_area{
	width: 800px;
	text-align: right;
	margin: 0 auto;
}
.board_area{
	width: 800px;
	margin: 0 auto;
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	if("${params.searchGbn}" != ""){
		$("#searchGbn").val("${param.searchGbn}");
	} else {
		$("#oldGbn").val("0");
	}
	
	//목록 조회
	reloadList();
	
	//검색버튼
	$("#searchBtn").on("click", function () {
		$("#page").val("1");
		// 이동을 안하다보니 문제가 기존검색값 셋팅을 안해줌
		// 그래서  신규 상태 적용
		$("#oldGbn").val($("#searchGbn").val());
		$("#oldTxt").val($("#searchTxt").val());
		
		
		// 데이터만 가져와서 다시 그려줌, 화면 이동 없음
		reloadList();
	});
	
	//페이징 버튼
	$(".paging_area").on("click", "span", function () {
		// 기존 검색상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
			
		
		$("#page").val($(this).attr("page"));
		
		reloadList();
	})
	
	// 등록버튼
	$("#insertBtn").on("click", function () {
		// 기존 검색상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action", "ATInsert");
		$("#actionForm").submit();
	})
	
	$("tbody").on("click", "tr", function () {
		$("#no").val($(this).attr("no"));
		
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action", "ATDetail");
		$("#actionForm").submit();
	})
});

// 목록 조회 호출, ajax불러오기
function reloadList() {
	var params = $("#actionForm").serialize();
	
	$.ajax({
		url : "ATListAjax", //경로
		type : "POST", // 전송방식(GET: 주소형태, POST : 주소 헤더 형태)
		dataType: "json", // 데이터 형태
		data: params, // 보낼데이터
		success : function(res) { //성공했을 때 결과를 res에 받고 함수 실행
			console.log(res); // 콘솔에  pd랑 list 값이 보임
			drawList(res.list);
			drawPaging(res.pd);
		},
		error : function(request, status, error) { // 실패했을 때 함수실행
			console.log(request.responseText); // 실패 상세 태역
		}
	});
	
}

function drawList(list) {
	var html = "";
	
	// list에는 map이 들어있으니까 하나씩 꺼내오겠다
	for(var data of list){
		html += "<tr no=\"" + data.NO + "\">";
		html += "<td>" + data.NO + "</td>";
		html += "<td>" + data.TITLE + "</td>";
		html += "<td>" + data.MEM_NM + "</td>";
		html += "<td>" + data.DT + "</td>";
		html += "<td>" + data.HIT + "</td>";
		html += "</tr>";
	}   
	
	$("tbody").html(html);
}

function drawPaging(pd) {
	var html = "";
	
	html += "<span class=\"page_btn page_first\" page=\"1\">처음</span>";
	// 이전
	if($("#page").val() == "1"){
		html += "<span class=\"page_btn page_prev\" page=\"1\">이전</span>";
	} else{
		// 문자열을 숫자로 바꾸기위해 *1
		html += "<span class=\"page_btn page_prev\" page=\"" + ($("#page").val() *1 - 1) + "\">이전</span>";
	}
	
	for(var i = pd.startP; i <= pd.endP; i++){
		if($("#page").val() * 1 == i){ // 현재 페이지
			html += "<span class=\"page_btn_on\" page=\"" + i + "\">" + i + "</span>";
		} else { // 다른 페이지
			html += "<span class=\"page_btn\" page=\"" + i + "\">" + i + "</span>";
		}
	}
	
	if($("#page").val() *1 == pd.endP){ // 현재페이지가 마지막 페이지라면
		html += "<span class=\"page_btn page_next\" page=\"" +pd.maxP+ "\">다음</span>";
	} else {
		html += "<span class=\"page_btn page_next\" page=\"" + ($("#page").val() *1 + 1) + "\">다음</span>";
	}
	
	html += "<span class=\"page_btn page_last\" page=\"" +pd.maxP+ "\">마지막</span>";
	
	$(".paging_area").html(html);
                                                                     
}
</script>		
</head>
<body>
<c:import url="/testAHeader"></c:import>
<hr/>
<!-- 페이징 때 기존 검색 내용 유지용 -->
<input type="hidden" id="oldGbn" value="${param.searchGbn}"/>
<input type="hidden" id="oldTxt" value="${param.searchTxt}"/>

<!-- 데이터 후 처리해서 로딩이 빨라 -->
<div class="search_area">
	<!--  method="post"는 나중에 쓸 예정, no 보낼때 -->
	<form action="#" id="actionForm" method="post">
	<input type="hidden" name="no" id="no" />
		<input type="hidden" name="page" id="page" value="${page}" />
		<select name="searchGbn" id="searchGbn">
			<option value="0">제목</option>
			<option value="1">작성자</option>
		</select>
		<input type="text" name="searchTxt" id="searchTxt" value="${param.searchTxt}" />
		<div class="cmn_btn_ml" id="searchBtn">검색</div>
		<c:if test="${!empty sMemNo}">
			<div class="cmn_btn_ml" id="insertBtn">등록</div>
		</c:if>
	</form>
</div>
<div class="board_area">
<table class="board_table">
	<colgroup>
		<col width="100" />
		<col width="400" />
		<col width="100" />
		<col width="100" />
		<col width="100" />
	</colgroup>
	<thead>
		<tr>
			<th>번호</th>
			<th>제목</th>
			<th>작성자</th>
			<th>작성일</th>
			<th>조회수</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>
<div class="paging_area"></div>
</div>
</body>
</html>

testa/T/insert.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글쓰기</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{
	width: 800px;
	margin: 0 auto;
}


</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<!-- CKEditor -->
<!-- 제이쿼리 뒤에 나와야함, 제이쿼리 기반으로 동작하기 때문에 -->
<script type="text/javascript" src="resources/script/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 에디터 연결
	// CKEDITOR.replace(아이디, 옵션)
	CKEDITOR.replace("con", {
		resize_enabled: false, // resize_enabled : 크기조절기능 활용여부
		language : "ko", // 사용언어
		enterMode: "2", // 엔터키처리방법. 2번이면 <br/>
		width : "100%", // 숫자일경우 px, 문자열일경우 css크기
		height : 400
	});
	
	$("#listBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	$("#insertBtn").on("click", function () {
		// CKEditor의 값 취득
		// CKEDITOR.instances[아이디] : CKEditor중 아이디가 같은 것을 찾겠다.
		//.getData() : 작성중인 내용을 취득하겠다.
		$("#con").val(CKEDITOR.instances['con'].getData());
		
		if($.trim($("#title").val()) == ""){
			makeAlert("알림","제목 입력하세요." , function () {
				$("#title").focus();
			})
		} else if($.trim($("#con").val()) == ""){
			makeAlert("알림","내용을 입력하세요." , function () {
				$("#con").focus();
			})
		} else {
			var params = $("#actionForm").serialize();
			
			$.ajax({
				url : "ATAction/insert", //restful api라는게 여기서 시작한다고?
				type : "POST", 
				dataType: "json", 
				data: params, 
				success : function(res) { 
					switch(res.msg){
					case "success" : 
						location.href ="ATList";
						break;
					case "fail" :
						makeAlert("알림" , "등록에 실패하였습니다.");
						break;
					case "error" :
						makeAlert("알림" , "등록 중 문제가 발생하였습니다.");
						break;
					}
				},
				error : function(request, status, error) { 
					console.log(request.responseText); 
				}
			});
			
		}
	});
});

</script>
</head>
<body>
<c:import url="/testAHeader"></c:import>
<form action="ATList" id="backForm" method="post">
	<input type="hidden" name="page" value="${param.page}" />
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
<!-- ajax쓰기 때문에 gbn 지움 -->
<div class="wrap">
	<form action="#" id="actionForm" method="post">
	<!--gbn : 구분, 혹은 flag
	구분: i - insert, u - update, d - delete  -->
	<!-- <input type="hidden" name="gbn" value="i"/> -->
		<table class="board_detail_table">
			<tr>
				<th>제목</th>
				<td><input type="text" name="title" id="title" /></td>
			</tr>
			<tr>
				<th>작성자</th>
				<td>${sMemNm}<input type="hidden" name="memNo" value="${sMemNo}" /><br/></td>
			</tr>
			<tr>
				<th colspan="2">내용</th>
			</tr>
			<tr>
				<th colspan="2"><textarea rows="10" cols="30" name="con" id="con"></textarea></th>
			</tr>
		</table>
	</form>
	<div class="cmn_btn_ml float_right_btn" id="listBtn">목록</div>
	<div class="cmn_btn_ml float_right_btn" id="insertBtn">등록</div>
</div>
</body>
</html>

testa/T/detail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상세보기</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{
	width: 800px;
	margin: 0 auto;
}
.con{
text-align: left; 
min-height: 400px;
}
</style>
<script type="text/javascript" 
		src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
src="resources/script/common/popup.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#listBtn").on("click", function() {
		$("#actionForm").attr("action","ATList"); 
		$("#actionForm").submit();
	});
	
	// ajax사용 예정
	$("#deleteBtn").on("click", function () {
		  makePopup({
		         title : "알림",
		         contents : "삭제하시겠습니까?",
		         // draggable : true,
		         buttons : [{
		            name : "삭제",
		            func:function() {
		            	var params = $("#actionForm").serialize();
		    			
		    			$.ajax({
		    				url : "ATAction/delete", //restful api라는게 여기서 시작한다고?
		    				type : "POST", 
		    				dataType: "json", 
		    				data: params, 
		    				success : function(res) { 
		    					switch(res.msg){
		    					case "success" : 
		    						location.href ="ATList";
		    						break;
		    					case "fail" :
		    						makeAlert("알림" , "삭제에 실패하였습니다.");
		    						break;
		    					case "error" :
		    						makeAlert("알림" , "삭제 중 문제가 발생하였습니다.");
		    						break;
		    					}
		    				},
		    				error : function(request, status, error) { 
		    					console.log(request.responseText); 
		    				}
		    			});
		            }
		         }, {
		            name : "취소"
		    }]
		});
	});
	
	$("#updateBtn").on("click", function () {
		$("#actionForm").attr("action","ATUpdate");
		$("#actionForm").submit();
	});
});

</script>
</head>
<body>
<c:import url="/testAHeader"></c:import>
<form action="#" id="actionForm" method="post">
	<input type="hidden" name="gbn" value="d"> <!-- selRes는 gbn을 받게 되어있어서 값을 추가해줘야함 -->
	<input type="hidden" name="no" value="${data.NO}">
	<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
		<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
<div class="wrap">
<table class="board_detail_table">
	<tr>
		<th>번호</th>
		<td>${data.NO}</td>
	</tr>
	<tr>
		<th>제목</th>
		<td>${data.TITLE}</td>
	</tr>
	<tr>
		<th>작성자</th>
		<td>${data.MEM_NM}</td>
	</tr>
	<tr>
		<th>조회수</th>
		<td> ${data.HIT}</td>
	</tr>
	<tr>
		<th>작성일</th>
		<td> ${data.DT}</td>
	</tr>
	<tr>
		<th colspan="2">내용</th>
	</tr>
	<tr>
		<td class="con" colspan="2">${data.CON}</td>
	</tr>
</table>
	<div class="cmn_btn_ml float_right_btn" id="listBtn">목록</div>
	<c:if test="${sMemNo eq data.MEM_NO}">
		<div class="cmn_btn_ml float_right_btn" id="deleteBtn">삭제</div>
		<div class="cmn_btn_ml float_right_btn" id="updateBtn">수정</div>
	</c:if>
</div>
</body>

testa/T/update.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글수정</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{
	width: 800px;
	margin: 0 auto;
}


</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<!-- CKEditor -->
<!-- 제이쿼리 뒤에 나와야함, 제이쿼리 기반으로 동작하기 때문에 -->
<script type="text/javascript" src="resources/script/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 에디터 연결
	// CKEDITOR.replace(아이디, 옵션)
	CKEDITOR.replace("con", {
		resize_enabled: false, // resize_enabled : 크기조절기능 활용여부
		language : "ko", // 사용언어
		enterMode: "2", // 엔터키처리방법. 2번이면 <br/>
		width : "100%", // 숫자일경우 px, 문자열일경우 css크기
		height : 400
	});
	
	$("#cancelBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	$("#updateBtn").on("click", function () {
		// CKEditor의 값 취득
		// CKEDITOR.instances[아이디] : CKEditor중 아이디가 같은 것을 찾겠다.
		//.getData() : 작성중인 내용을 취득하겠다.
		$("#con").val(CKEDITOR.instances['con'].getData());
		
		if($.trim($("#title").val()) == ""){
			makeAlert("알림","제목 입력하세요." , function () {
				$("#title").focus();
			})
		} else if($.trim($("#con").val()) == ""){
			makeAlert("알림","내용을 입력하세요." , function () {
				$("#con").focus();
			})
		} else {
			var params = $("#actionForm").serialize();
			
			$.ajax({
				url : "ATAction/update", //restful api라는게 여기서 시작한다고?
				type : "POST", 
				dataType: "json", 
				data: params, 
				success : function(res) { 
					switch(res.msg){
					case "success" : 
						$("#backForm").submit();
						break;
					case "fail" :
						makeAlert("알림" , "수정에 실패하였습니다.");
						break;
					case "error" :
						makeAlert("알림" , "수정 중 문제가 발생하였습니다.");
						break;
					}
				},
				error : function(request, status, error) { 
					console.log(request.responseText); 
				}
			});
			
		}
	});
});

</script>
</head>
<body>
<c:import url="/testAHeader"></c:import>
<form action="ATDetail" id="backForm" method="post">
	<input type="hidden" name="no" value="${data.NO}" />
	<input type="hidden" name="page" value="${param.page}" />
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
<!-- ajax쓰기 때문에 gbn 지움 -->
<div class="wrap">
	<form action="#" id="actionForm" method="post">
	<input type="hidden" name="no" value="${data.NO}" />
		<table class="board_detail_table">
			<tr>
				<th>번호</th>
				<td>${data.NO}</td>
			</tr>
			<tr>
				<th>제목</th>
				<td><input type="text" name="title" id="title" value="${data.TITLE}"/></td>
			</tr>
			<tr>
				<th>작성자</th>
				<td>${sMemNm}</td>
			</tr>
			<tr>
				<th colspan="2">내용</th>
			</tr>
			<tr>
				<th colspan="2"><textarea rows="10" cols="30" name="con" id="con">${data.CON}</textarea></th>
			</tr>
		</table>
	</form>
	<div class="cmn_btn_ml float_right_btn" id="cancelBtn">취소</div>
	<div class="cmn_btn_ml float_right_btn" id="updateBtn">수정</div>
</div>
</body>
</html>

ATController.java

package com.spring.sample.web.testa.Controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.spring.sample.common.service.IPagingService;
import com.spring.sample.web.testa.dao.IACDao;

@Controller
public class ATController {
	@Autowired
	public IACDao iACDao;

	@Autowired
	public IPagingService ips;

	@RequestMapping(value = "/ATList")
	public ModelAndView ATList(@RequestParam HashMap<String, String> params, ModelAndView mav) {

		// 비동기가 되면 일단 아무것도 처음에 셋팅 X,
		// 페이지만 셋팅
		int page = 1;

		if (params.get("page") != null && params.get("page") != "") {
			page = Integer.parseInt(params.get("page"));
		}

		mav.addObject("page", page);
		mav.setViewName("testa/T/list");

		return mav;
	}

	@RequestMapping(value = "/ATListAjax", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String ATListAjax(@RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		// 페이지 받아오게 되어있음
		int cnt = iACDao.getInt("T.getTCnt", params);

		HashMap<String, Integer> pd = ips.getPagingData(Integer.parseInt(params.get("page")), cnt, 10, 5);

		params.put("start", Integer.toString(pd.get("start")));
		params.put("end", Integer.toString(pd.get("end")));

		List<HashMap<String, String>> list = iACDao.getList("T.getTList", params);

		model.put("list", list);
		model.put("pd", pd);

		return mapper.writeValueAsString(model);
	}

	@RequestMapping(value = "/ATInsert")
	public ModelAndView aTInsert(HttpSession session, ModelAndView mav) {
		if (session.getAttribute("sMemNm") != null && session.getAttribute("sMemNm") != "") {
			mav.setViewName("testa/T/insert");
		} else {
			mav.setViewName("redirect:testALogin");
		}
		return mav;
	}

	@RequestMapping(value = "/ATAction/{gbn}", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String ATAction(@PathVariable String gbn, @RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		int cnt = 0;

		try {
			switch (gbn) {
			case "insert":
				cnt = iACDao.insert("T.insertT", params);
				break;
			case "update":
				cnt = iACDao.update("T.updateT", params);
				break;
			case "delete":
				cnt = iACDao.update("T.deleteT", params);
				break;
			}

			if (cnt > 0) {
				model.put("msg", "success");
			} else {
				model.put("msg", "fail");
			}
		} catch (Exception e) {
			e.printStackTrace();
			model.put("msg", "error");
		}

		return mapper.writeValueAsString(model);
	}

	// 가져오고 변경되는게 없기 때문에 비동기 처리로 안되도 됨
	@RequestMapping(value = "/ATDetail")
	public ModelAndView aTDetail(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		// 글번호 안 넘어왔을때 처리
		if (params.get("no") != null && params.get("no") != "") {
			// 조회수
			iACDao.update("T.updateTHit", params);
			HashMap<String, String> data = iACDao.getMap("T.getT", params);

			mav.addObject("data", data);

			mav.setViewName("testa/T/detail");
		} else {
			mav.setViewName("redirect:ATList");
		}

		return mav;
	}

	@RequestMapping(value = "/ATUpdate")
	public ModelAndView aTUpdate(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		// 글번호 안 넘어왔을때 처리
		if (params.get("no") != null && params.get("no") != "") {
			HashMap<String, String> data = iACDao.getMap("T.getT", params);

			mav.addObject("data", data);

			mav.setViewName("testa/T/update");
		} else {
			mav.setViewName("redirect:ATList");
		}

		return mav;
	}

}

testa/Mem/list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
#searchTxt{
width: 160px;
height: 30px; 
padding: 0px 2px;
text-indent: 5px;
vertical-align: middle;
border: 1px solid #d7d7d7; 
outline-color: #70adf9;
box-sizing: border-box;
}
.search_area{
	width: 800px;
	text-align: right;
	margin: 0 auto;
}
.board_area{
	width: 800px;
	margin: 0 auto;
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	if("${params.searchGbn}" != ""){
		$("#searchGbn").val("${param.searchGbn}");
	} else {
		$("#oldGbn").val("0");
	}
	
	//목록 조회
	reloadList();
	
	$("#actionForm").on("keypress","input", function(event) {

		if(event.keyCode == 13){
			$("#searchBtn").click();
			return false;
		
		}
	})
	
	//검색버튼
	$("#searchBtn").on("click", function () {
		$("#page").val("1");
		// 이동을 안하다보니 문제가 기존검색값 셋팅을 안해줌
		// 그래서  신규 상태 적용
		$("#oldGbn").val($("#searchGbn").val());
		$("#oldTxt").val($("#searchTxt").val());
		
		
		// 데이터만 가져와서 다시 그려줌, 화면 이동 없음
		reloadList();
	});
	
	//페이징 버튼
	$(".paging_area").on("click", "span", function () {
		// 기존 검색상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
			
		
		$("#page").val($(this).attr("page"));
		
		reloadList();
	})
	
	// 등록버튼
	$("#insertBtn").on("click", function () {
		// 기존 검색상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action", "AMInsert");
		$("#actionForm").submit();
	})
	
	$("tbody").on("click", "tr", function () {
		$("#no").val($(this).attr("no"));
		
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action", "AMDetail");
		$("#actionForm").submit();
	})
});

// 목록 조회 호출, ajax불러오기
function reloadList() {
	var params = $("#actionForm").serialize();
	
	$.ajax({
		url : "AMListAjax", //경로
		type : "POST", // 전송방식(GET: 주소형태, POST : 주소 헤더 형태)
		dataType: "json", // 데이터 형태
		data: params, // 보낼데이터
		success : function(res) { //성공했을 때 결과를 res에 받고 함수 실행
			console.log(res); // 콘솔에  pd랑 list 값이 보임
			drawList(res.list);
			drawPaging(res.pd);
		},
		error : function(request, status, error) { // 실패했을 때 함수실행
			console.log(request.responseText); // 실패 상세 태역
		}
	});
	
}

function drawList(list) {
	var html = "";
	
	// list에는 map이 들어있으니까 하나씩 꺼내오겠다
	for(var data of list){
		html += "<tr no=\"" + data.MEM_NO + "\">";
		html += "<td>" + data.MEM_NO + "</td>";
		html += "<td>" + data.MEM_ID + "</td>";
		html += "<td>" + data.MEM_NM + "</td>";
		html += "<td>" + data.REG_DT + "</td>";
		html += "</tr>";
	}   
	
	$("tbody").html(html);
}

function drawPaging(pd) {
	var html = "";
	
	html += "<span class=\"page_btn page_first\" page=\"1\">처음</span>";
	// 이전
	if($("#page").val() == "1"){
		html += "<span class=\"page_btn page_prev\" page=\"1\">이전</span>";
	} else{
		// 문자열을 숫자로 바꾸기위해 *1
		html += "<span class=\"page_btn page_prev\" page=\"" + ($("#page").val() *1 - 1) + "\">이전</span>";
	}
	
	for(var i = pd.startP; i <= pd.endP; i++){
		if($("#page").val() * 1 == i){ // 현재 페이지
			html += "<span class=\"page_btn_on\" page=\"" + i + "\">" + i + "</span>";
		} else { // 다른 페이지
			html += "<span class=\"page_btn\" page=\"" + i + "\">" + i + "</span>";
		}
	}
	
	if($("#page").val() *1 == pd.endP){ // 현재페이지가 마지막 페이지라면
		html += "<span class=\"page_btn page_next\" page=\"" +pd.maxP+ "\">다음</span>";
	} else {
		html += "<span class=\"page_btn page_next\" page=\"" + ($("#page").val() *1 + 1) + "\">다음</span>";
	}
	
	html += "<span class=\"page_btn page_last\" page=\"" +pd.maxP+ "\">마지막</span>";
	
	$(".paging_area").html(html);
                                                                     
}





</script>
</head>
<body>
<input type="hidden" id="oldGbn" value="${param.searchGbn}"/>
<input type="hidden" id="oldTxt" value="${param.searchTxt}"/>
<div class="search_area">
	<!--  method="post"는 나중에 쓸 예정, no 보낼때 -->
	<form action="#" id="actionForm" method="post">
	<input type="hidden" name="no" id="no" />
		<input type="hidden" name="page" id="page" value="${page}" />
		<select name="searchGbn" id="searchGbn">
			<option value="0">아이디</option>
			<option value="1">이름</option>
		</select>
		<input type="text" name="searchTxt" id="searchTxt" value="${param.searchTxt}" />
		<div class="cmn_btn_ml" id="searchBtn">검색</div>
		<div class="cmn_btn_ml" id="insertBtn">등록</div>
	</form>
</div>
<div class="board_area">
<table class="board_table">
	<colgroup>
		<col width="100" />
		<col width="100" />
		<col width="100" />
		<col width="100" />
	</colgroup>
	<thead>
		<tr>
			<th>번호</th>
			<th>아이디</th>
			<th>이름</th>
			<th>등록일</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>
<div class="paging_area"></div>
</div>


</body>
</html>

testa/Mem/insert.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글쓰기</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{
	width: 800px;
	margin: 0 auto;
}
</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<script type="text/javascript">
$(document).ready(function () {

	$("#listBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	$("#insertBtn").on("click", function () {
		
		if($.trim($("#memId").val()) == ""){
			makeAlert("알림","아이디 입력하세요." , function () {
				$("#memId").focus();
			})
		} else if($.trim($("#memPw").val()) == ""){
			makeAlert("알림","비밀번호를 입력세요." , function () {
				$("#memPw").focus();
			})
		} else if($.trim($("#memPw").val()) != $.trim($("#repw").val())){
			makeAlert("알림","비밀번호가 일치하지 않습니다." , function () {
				$("#memPw").val("");
				$("#repw").val("");
				$("#memPw").focus();
			})
		} else if($.trim($("#memNm").val()) == ""){
			makeAlert("알림","이름을 입력하세요." , function () {
				$("#memNm").focus();
			})
		} else if($.trim($("#memBirth").val()) == ""){
			makeAlert("알림","생년월일을 입력하세요" , function () {
				$("#memBirth").focus();
			})
		} else {
			var params = $("#actionForm").serialize();
			
			$.ajax({
				url : "AMAction/insert", //restful api라는게 여기서 시작한다고?
				type : "POST", 
				dataType: "json", 
				data: params, 
				success : function(res) { 
					switch(res.msg){
					case "success" : 
						location.href ="AMList";
						break;
					case "fail" :
						makeAlert("알림" , "등록에 실패하였습니다.");
						break;
					case "error" :
						makeAlert("알림" , "등록 중 문제가 발생하였습니다.");
						break;
					}
				},
				error : function(request, status, error) { 
					console.log(request.responseText); 
				}
			});
			
		}
	});
});

</script>
</head>
<body>
	<form action="ATList" id="backForm" method="post">
	<input type="hidden" name="page" value="${param.page}" />
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
<!-- ajax쓰기 때문에 gbn 지움 -->
<div class="wrap">
	<form action="#" id="actionForm" method="post">
	<!--gbn : 구분, 혹은 flag
	구분: i - insert, u - update, d - delete  -->
	<!-- <input type="hidden" name="gbn" value="i"/> -->
		<table class="board_detail_table">
			<tr>
				<th>아이디</th>
				<td><input type="text" name="memId" id="memId" /></td>
			</tr>
			<tr>
				<th>비밀번호</th>
				<td><input type="password" name="memPw" id="memPw" /></td>
			</tr>
			<tr>
				<th>비밀번호 확인</th>
				<td><input type="password" id="repw" /></td>
			</tr>
			<tr>
				<th>이름</th>
				<td><input type="text" name="memNm" id="memNm" /></td>
			</tr>
			<tr>
				<th>생년월일</th>
				<td><input type="date" name="memBirth" id="memBirth" /></td>
			</tr>
		</table>
	</form>
	<div class="cmn_btn_ml float_right_btn" id="listBtn">목록</div>
	<div class="cmn_btn_ml float_right_btn" id="insertBtn">등록</div>
</div>
</body>
</html>

testa/Mem/detail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상세보기</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{
	width: 800px;
	margin: 0 auto;
}
</style>
<script type="text/javascript" 
		src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
src="resources/script/common/popup.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#listBtn").on("click", function() {
		$("#actionForm").attr("action","AMList"); 
		$("#actionForm").submit();
	});
	
	// ajax사용 예정
	$("#deleteBtn").on("click", function () {
		  makePopup({
		         title : "알림",
		         contents : "삭제하시겠습니까?",
		         // draggable : true,
		         buttons : [{
		            name : "삭제",
		            func:function() {
		            	var params = $("#actionForm").serialize();
		    			
		    			$.ajax({
		    				url : "AMAction/delete", //restful api라는게 여기서 시작한다고?
		    				type : "POST", 
		    				dataType: "json", 
		    				data: params, 
		    				success : function(res) { 
		    					switch(res.msg){
		    					case "success" : 
		    						location.href ="AMList";
		    						break;
		    					case "fail" :
		    						makeAlert("알림" , "삭제에 실패하였습니다.");
		    						break;
		    					case "error" :
		    						makeAlert("알림" , "삭제 중 문제가 발생하였습니다.");
		    						break;
		    					}
		    				},
		    				error : function(request, status, error) { 
		    					console.log(request.responseText); 
		    				}
		    			});
		            }
		         }, {
		            name : "취소"
		    }]
		});
	});
	
	$("#updateBtn").on("click", function () {
		$("#actionForm").attr("action","AMUpdate");
		$("#actionForm").submit();
	});
});
</script>
</head>
<body>
<form action="#" id="actionForm" method="post">
	<input type="hidden" name="no" value="${data.MEM_NO}">
	<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
		<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
<div class="wrap">
<table class="board_detail_table">
	<tr>
		<th>번호</th>
		<td>${data.MEM_NO}</td>
	</tr>
	<tr>
		<th>아이디</th>
		<td>${data.MEM_ID}</td>
	</tr>
	<tr>
		<th>이름</th>
		<td>${data.MEM_NM}</td>
	</tr>
	<tr>
		<th>생년월일</th>
		<td>${data.MEM_BIRTH}</td>
	</tr>
	<tr>
		<th>등록일</th>
		<td>${data.REG_DT}</td>
	</tr>

</table>
	<div class="cmn_btn_ml float_right_btn" id="listBtn">목록</div>
	<div class="cmn_btn_ml float_right_btn" id="deleteBtn">삭제</div>
	<div class="cmn_btn_ml float_right_btn" id="updateBtn">수정</div>
</div>
</body>
</html>

testa/Mem/update.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글수정</title>
<!-- Common CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/cmn.css" />
<!-- Popup CSS -->
<link rel="stylesheet" type="text/css" href="resources/css/common/popup.css" />
<style type="text/css">
.wrap{
	width: 800px;
	margin: 0 auto;
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" 
		src="resources/script/common/popup.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	$("#cancelBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	$("#updateBtn").on("click", function () {
		
		// $.trim(값) : 값 앞 뒤 공백제거	
		if($.trim($("#memId").val()) == ""){
			alert("아이디 입력하세요");
			$("#memId").focus();
		}  else if($.trim($("#memNm").val()) == ""){
			alert("이름을 입력하세요");
			$("#memNm").focus();
		} else if($.trim($("#memPw").val()) !="" // 이 부분이 업데이트에 추가됨 
				&& $.trim($("#memPw").val()) != $.trim($("#repw").val())){
			alert("비밀번호가 일치하지 않습니다.");
			$("#memPw").val("");
			$("#repw").val("");
			$("#memPw").focus();
		} else if($.trim($("#memBirth").val()) == ""){
			alert("생년월일을 입력하세요");
			$("#memBirth").focus();
		} else {
			var params = $("#actionForm").serialize();
			
			$.ajax({
				url : "AMAction/update", //restful api라는게 여기서 시작한다고?
				type : "POST", 
				dataType: "json", 
				data: params, 
				success : function(res) { 
					switch(res.msg){
					case "success" : 
						$("#backForm").submit();
						break;
					case "fail" :
						makeAlert("알림" , "수정에 실패하였습니다.");
						break;
					case "error" :
						makeAlert("알림" , "수정 중 문제가 발생하였습니다.");
						break;
					}
				},
				error : function(request, status, error) { 
					console.log(request.responseText); 
				}
			});
			
		}
	});
});


</script>
</head>
<body>
<form action="AMDetail" id="backForm" method="post">
	<input type="hidden" name="no" value="${data.MEM_NO}" />
	<input type="hidden" name="page" value="${param.page}" />
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
<!-- ajax쓰기 때문에 gbn 지움 -->
<div class="wrap">
	<form action="#" id="actionForm" method="post">
	<input type="hidden" name="no" value="${data.MEM_NO}" />
		<table class="board_detail_table">
			<tr>
				<th>아이디</th>
				<td><input type="text" name="memId" id="memId" value="${data.MEM_ID}"/></td>
			</tr>
			<tr>
				<th>이름</th>
				<td><input type="text" name="memNm" id="memNm"  value="${data.MEM_NM}"/></td>
			</tr>
			<tr>
				<th>비밀번호</th>
				<td><input type="password" name="memPw" id="memPw"  value="${data.MEM_PW}"/></td>
			</tr>
			<tr>
				<th>비밀번호확인</th>
				<td><input type="password" id="repw" /></td>
			</tr>
			<tr>
				<th>생년월일</th>
				<td><input type="date" name="memBirth" id="memBirth" value="${data.MEM_BIRTH}"/></td>
			</tr>
		</table>
	</form>
	<div class="cmn_btn_ml float_right_btn" id="cancelBtn">취소</div>
	<div class="cmn_btn_ml float_right_btn" id="updateBtn">수정</div>
</div>
</body>
</html>

AMController.java

package com.spring.sample.web.testa.Controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.spring.sample.common.service.IPagingService;
import com.spring.sample.web.testa.dao.IACDao;

@Controller
public class AMController {
	@Autowired
	public IACDao iACDao;

	@Autowired
	public IPagingService ips;

	@RequestMapping(value = "/AMList")
	public ModelAndView AMList(@RequestParam HashMap<String, String> params, ModelAndView mav) {

		// 비동기가 되면 일단 아무것도 처음에 셋팅 X,
		// 페이지만 셋팅
		int page = 1;

		if (params.get("page") != null && params.get("page") != "") {
			page = Integer.parseInt(params.get("page"));
		}

		mav.addObject("page", page);
		mav.setViewName("testa/Mem/list");

		return mav;
	}

	@RequestMapping(value = "/AMListAjax", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String AMListAjax(@RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		// 페이지 받아오게 되어있음
		int cnt = iACDao.getInt("mem.getMemCnt", params);

		HashMap<String, Integer> pd = ips.getPagingData(Integer.parseInt(params.get("page")), cnt, 10, 5);

		params.put("start", Integer.toString(pd.get("start")));
		params.put("end", Integer.toString(pd.get("end")));

		List<HashMap<String, String>> list = iACDao.getList("mem.getMemList", params);

		model.put("list", list);
		model.put("pd", pd);

		return mapper.writeValueAsString(model);
	}

	@RequestMapping(value = "/AMInsert")
	public ModelAndView aTInsert(ModelAndView mav) {

		mav.setViewName("testa/Mem/insert");

		return mav;
	}

	@RequestMapping(value = "/AMAction/{gbn}", method = RequestMethod.POST, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String AMAction(@PathVariable String gbn, @RequestParam HashMap<String, String> params) throws Throwable {
		ObjectMapper mapper = new ObjectMapper();
		Map<String, Object> model = new HashMap<String, Object>();

		int cnt = 0;

		try {
			switch (gbn) {
			case "insert":
				cnt = iACDao.insert("mem.insertMem", params);
				break;
			case "update":
				cnt = iACDao.update("mem.updateMem", params);
				break;
			case "delete":
				cnt = iACDao.update("mem.deleteMem", params);
				break;
			}

			if (cnt > 0) {
				model.put("msg", "success");
			} else {
				model.put("msg", "fail");
			}
		} catch (Exception e) {
			e.printStackTrace();
			model.put("msg", "error");
		}

		return mapper.writeValueAsString(model);
	}

	// 가져오고 변경되는게 없기 때문에 비동기 처리로 안되도 됨
	@RequestMapping(value = "/AMDetail")
	public ModelAndView AMDetail(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		// 글번호 안 넘어왔을때 처리
		if (params.get("no") != null && params.get("no") != "") {

			HashMap<String, String> data = iACDao.getMap("mem.getMem", params);

			mav.addObject("data", data);

			mav.setViewName("testa/Mem/detail");
		} else {
			mav.setViewName("redirect:AMList");
		}

		return mav;
	}

	@RequestMapping(value = "/AMUpdate")
	public ModelAndView aTUpdate(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		// 글번호 안 넘어왔을때 처리
		if (params.get("no") != null && params.get("no") != "") {
			HashMap<String, String> data = iACDao.getMap("mem.getMem", params);

			mav.addObject("data", data);

			mav.setViewName("testa/Mem/update");
		} else {
			mav.setViewName("redirect:AMList");
		}

		return mav;
	}

}

사용했던 sql, 기존꺼 활용

T_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="T">
	<select id="getTCnt" resultType="Integer" parameterType="hashmap">
		SELECT COUNT(*) AS CNT
		FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
		AND M.DEL = 1
		WHERE T.DEL = 1
		<if test="searchTxt != null and searchTxt !=''">
			<choose>
				<when test="searchGbn eq 0">
					AND T.TITLE LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn eq 1">
					AND M.MEM_NM LIKE '%' ||  #{searchTxt} || '%'
				</when>
			</choose>
		</if>
	</select>
	
	<select id="getTList" resultType="hashmap" parameterType="hashmap">
		SELECT T.NO, T.TITLE, T.MEM_NM, T.HIT, T.DT
		FROM(
		SELECT T.NO, T.TITLE, M.MEM_NM, T.HIT,
		CASE WHEN TO_CHAR(DT,'YY.MM.DD') = TO_CHAR(SYSDATE, 'YY.MM.DD')
		        THEN TO_CHAR(DT, 'HH24:MI')
		        ELSE TO_CHAR(DT, 'YY.MM.DD')
		        END AS DT,
		        ROW_NUMBER() OVER(ORDER BY T.NO DESC) AS RNUM
				FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
				AND M.DEL = 1
		WHERE T.DEL = 1
		<if test="searchTxt != null and searchTxt !=''">
			<choose>
				<when test="searchGbn eq 0">
					AND T.TITLE LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn eq 1">
					AND M.MEM_NM LIKE '%' ||  #{searchTxt} || '%'
				</when>
			</choose>
		</if>) T
		WHERE T.RNUM BETWEEN #{start} AND #{end}
	</select>
	
	<insert id="insertT" parameterType="hashmap">
		INSERT INTO TBOARD(NO, TITLE, MEM_NO, CON)
		VALUES (TBOARD_SEQ.NEXTVAL, #{title} , #{memNo}, #{con})
	</insert>
	 
	<select id="getT" parameterType="hashmap"  resultType="hashmap">
		SELECT T.NO, T.TITLE, M.MEM_NO, M.MEM_NM, T.CON, T.HIT,
	    TO_CHAR(T.DT, 'YYYY-MM-DD') AS DT
		FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
		AND M.DEL = 1
		WHERE T.DEL = 1
		AND T.NO = #{no}
	</select>
	
	<update id="updateTHit" parameterType="hashmap">
		UPDATE TBOARD SET HIT = HIT + 1
		WHERE NO = #{no}
	</update>
	
	<update id="deleteT"  parameterType="hashmap">
		UPDATE TBOARD SET DEL = 0
		WHERE NO = #{no}
	</update>
	
	<update id="updateT"  parameterType="hashmap">		
		UPDATE TBOARD SET TITLE = #{title},
		CON = #{con}
		WHERE NO = #{no}
	</update>
</mapper>

Mem_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- namespace : 클래스와 동일, 이 파일의 대표명 -->
<mapper namespace="mem">
	<!-- select : 조회 
		id: 구분자, 메소드명과 동일
		resultType : 조회 결과 중 한줄에 대한 자료 형태를 지정
		hashmap: mybatis-config.xml에서 별칭 지정해놔서 줄여쓸수있는거임
		쿼리 삽입시 주의사항: ;이 있는경우 문제가 발생한다. 이유는 해당 쿼리 실행시 자동으로 추가되기 때문
	-->
	<select id="getMemList" resultType="hashmap" parameterType="hashmap">
		SELECT S.MEM_NO, S.MEM_ID, S.MEM_NM, S.REG_DT
		FROM (SELECT MEM_NO, MEM_ID, MEM_NM, TO_CHAR(REG_DT,'YYYY-MM-DD') AS REG_DT,
       		  ROW_NUMBER() OVER(ORDER BY REG_DT DESC, MEM_NO DESC) AS RNK
			  FROM MEM
			  WHERE DEL = 1
			<if test="searchTxt != null and searchTxt != ''"> <!-- 검색어가 있다면 -->
				<choose>
					<when test="searchGbn == 0"> <!-- 아이디 -->
						AND MEM_ID LIKE '%' || #{searchTxt} || '%'
					</when>
					<when test="searchGbn == 1"> <!-- 이름 -->
						AND MEM_NM LIKE '%' || #{searchTxt} || '%'
					</when>
				</choose>
			</if>
             ) S
		WHERE S.RNK BETWEEN #{start} AND #{end}
	</select>
	
	<!-- 
		parameterType : 실행시 받는 값 
		#{키} : 헤당위치에 문자열로 키에 해당하는 값을 넣어준다
		ex) no에 3이 들어있는 경우
		WHERE SELL_NO = #{no}
		=> WHERE SELL_NO = '3' // 문자열이기 때문에  ' '이 들어감
		parameterType dao받는값, resultType값이 db실행결과
	-->
	<select id="getMem" resultType="hashmap" parameterType="hashmap">
		SELECT MEM_NO, MEM_ID, MEM_NM, TO_CHAR(MEM_BIRTH,'YYYY-MM-DD') AS MEM_BIRTH, TO_CHAR(REG_DT,'YYYY-MM-DD') AS REG_DT
		FROM MEM
		WHERE MEM_NO = #{no}
	</select>
	
	<!-- insert는 resultType 이 없음 -->
	<insert id="insertMem" parameterType="hashmap">
		INSERT INTO MEM(MEM_NO, MEM_ID, MEM_PW, MEM_NM, MEM_BIRTH)
		VALUES(MEM_SEQ.NEXTVAL, #{memId}, #{memPw}, #{memNm}, #{memBirth})
	</insert>
	
	
	<update id="deleteMem" parameterType="hashmap">
		UPDATE MEM SET DEL = 0
		WHERE MEM_NO = #{no}
	</update>
	
	<update id="updateMem" parameterType="hashmap">
		UPDATE MEM SET MEM_ID = #{memId},
                MEM_NM = #{memNm},
                <if test="memPw != null and memPw != ''">
                	 MEM_PW = #{memPw},
                </if>
                MEM_BIRTH = #{memBirth}
       	WHERE MEM_NO = #{no}
	</update>
	
	<select id="getMemCnt" parameterType="hashmap" resultType="Integer">
		SELECT COUNT(*) AS CNT 
		FROM MEM
		WHERE DEL = 1
		<if test="searchTxt != null and searchTxt != ''"> <!-- 검색어가 있다면 -->
			<choose>
				<when test="searchGbn == 0"> <!-- 품목 -->
					AND MEM_ID LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn == 1"> <!-- 수량 -->
					AND MEM_NM = #{searchTxt}
				</when>
			</choose>
		</if>
	</select>
	
	
</mapper>

궁금증

1. VO객체

스프링에서 ajax 사용 이유, 사용법 이렇게 구글링하면 VO라는 말을 많이 볼수있는데,

https://yulfsong.tistory.com/76

Ajax data를 Controller에서 받는 두 가지 방법 : Vo / Map

Ajax의 data를 Controller에서 받아야할 때가 자주 있는데 Vo를 만들어서 받는 방법이 있고 Map을 이용하는 방법이 있다. 1. Vo로 받는 방법 var memberId = $("#memberId").val(); var memberPass = $("#memberPa..

yulfsong.tistory.com

VO 객체가 bean이래

데이터 추가 삭제때마다 getter/ setter 만들어야하고, 변수전언해야해서 우리는 Map으로 하는거임

2. ajax 추가할때, Restful api에 대해

데이터만 가져옴, 화면을 못 그림, 대부분의 오픈 api가 이렇게 되어있음, 내일 다시 한데

샘플스프링에 데이터 있음

국비 TIL(Today I Learned) 20220816 로그인 후, 글삭제 수정/ Ajax 테이블

토희 — Tue, 16 Aug 2022 16:27:59 +0900

SSO(Single Sign On) - 같은 유형의 서비스들에 대하여 로그인 세션을 공유하는것, 같이 로그인, 같이 로그아웃
대규모 프로젝트를 한다고 하면 SSO를 연계하라고 할것이다.

회사마다 틀림, 연동해야하는곳을 들어간다면 가이드를 준다.

이름 정도만 알아두자

Controller.java만들기, Service, Dao 만들고, SQL 만들고

getTCnt 메소드 만들고

Cnt 쿼리

SELECT COUNT(*) AS CNT
FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
AND M.DEL = 1
WHERE T.DEL = 1
-- 제목
-- AND T.TITLE LIKE '%' || 'TEST' || '%'
-- 작성자
AND M.MEM_NM LIKE '%' || 'TEST' || '%'
;

getTList 메소드 만들고

List의 쿼리

SELECT T.NO, T.TITLE, T.MEM_NM, T.HIT, T.DT
FROM(
SELECT T.NO, T.TITLE, M.MEM_NM, T.HIT,
CASE WHEN TO_CHAR(DT,'YY.MM.DD') = TO_CHAR(SYSDATE, 'YY.MM.DD')
        THEN TO_CHAR(DT, 'HH24:MI')
        ELSE TO_CHAR(DT, 'YY.MM.DD')
        END AS DT,
        ROW_NUMBER() OVER(ORDER BY T.NO DESC) AS RNUM
FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
AND M.DEL = 1
WHERE T.DEL = 1
-- 제목
-- AND T.TITLE LIKE '%' || 'TEST' || '%'
-- 작성자
AND M.MEM_NM LIKE '%' || 'TEST' || '%') T
WHERE T.RNUM BETWEEN 1 AND 10
;

anboardList 복붙해서

list 만들고

로그인되어 있을때만 글추가 버튼 활성화되게 if문

sMemNm은 저번주에 만든 LoginController에 있는 값임

지난주 login의 main.jsp에 있는 내요을

T/list.jsp로 가져옴

anboardInsert 복붙해서

insert 만들고 작성자 변경

이 부분 삭제

시퀀스 만들고

insert쿼리

MEM_NO 6인 사람이 DEL = 0이라서, 데이터 목록에 안 뜸(탈퇴한 사람의 데이터는 목록에 안뜸)

공통된 부분 header만들어서, import

import쉽게 하는 프레임워크

TController.java

package com.spring.sample.web.test.controller;

import java.util.HashMap;
import java.util.List;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import com.spring.sample.common.service.IPagingService;
import com.spring.sample.web.test.service.ITService;

@Controller
public class TController {
	@Autowired
	public ITService iTService;

	@Autowired
	public IPagingService ips;

	@RequestMapping(value = "/TList")
	public ModelAndView tList(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		int page = 1;
		if (params.get("page") != null && params.get("page") != "") {
			page = Integer.parseInt(params.get("page"));
		}

		int cnt = iTService.getTCnt(params);

		HashMap<String, Integer> pd = ips.getPagingData(page, cnt, 10, 10);

		params.put("start", Integer.toString(pd.get("start")));
		params.put("end", Integer.toString(pd.get("end")));

		List<HashMap<String, String>> list = iTService.getTList(params);

		mav.addObject("list", list);
		mav.addObject("page", page);
		mav.addObject("pd", pd);

		mav.setViewName("test/T/list");

		return mav;
	}

	// 첫번째로 로그인됬을때 글 추가 버튼이 활성화되게 하고, 두번째로 주소창에서 입력되어 들어오는것을 막기 위해 권한 체크용으로 세션추가
	@RequestMapping(value = "/TInsert")
	public ModelAndView tInsert(HttpSession session, ModelAndView mav) {

		if (session.getAttribute("sMemNm") != null && session.getAttribute("sMemNm") != "") {
			// 로그인 중이라면
			mav.setViewName("test/T/insert");
		} else {
			// 로그인 중이 아니라면 로그인으로 이동
			mav.setViewName("redirect:testLogin");
		}

		return mav;
	}

	@RequestMapping(value = "/TAction")
	public ModelAndView tAction(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		int cnt = 0;

		try {
			switch (params.get("gbn")) {
			case "i":
				cnt = iTService.insert(params);
				break;
			case "d":
				cnt = iTService.delete(params);
				break;
			case "u":
				cnt = iTService.update(params);
			}
			if (cnt > 0) {
				mav.addObject("res", "success");
			} else {
				mav.addObject("res", "failed");
			}

		} catch (Exception e) {
			e.printStackTrace();
			mav.addObject("res", "error");
		}

		mav.setViewName("test/T/action");
		return mav;

	}

	@RequestMapping(value = "TDetail")
	public ModelAndView tDatail(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		if (params.get("no") != null && params.get("no") != "") {
			// 번호가 들어왔다면
			// 조회수 (데이터 조회보다 먼저해야함)
			iTService.updateTHit(params);

			// 데이터 조회
			HashMap<String, String> data = iTService.getT(params);

			mav.addObject("data", data);
			mav.setViewName("test/T/detail");
		} else {
			// 번호가 들어오지 않았다면 리스트로 이동
			mav.setViewName("redirect:TList");
		}

		return mav;
	}

	@RequestMapping(value = "TUpdate")
	public ModelAndView tUpdate(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		if (params.get("no") != null && params.get("no") != "") {

			// 데이터 조회
			HashMap<String, String> data = iTService.getT(params);

			mav.addObject("data", data);
			mav.setViewName("test/T/update");
		} else {
			// 번호가 들어오지 않았다면 리스트로 이동
			mav.setViewName("redirect:TList");
		}

		return mav;
	}
}

ITService.java

package com.spring.sample.web.test.service;

import java.util.HashMap;
import java.util.List;

public interface ITService {

	public int getTCnt(HashMap<String, String> params) throws Throwable;

	public List<HashMap<String, String>> getTList(HashMap<String, String> params) throws Throwable;

	public int insert(HashMap<String, String> params) throws Throwable;

	public HashMap<String, String> getT(HashMap<String, String> params) throws Throwable;

	public void updateTHit(HashMap<String, String> params) throws Throwable;

	public int delete(HashMap<String, String> params) throws Throwable;

	public int update(HashMap<String, String> params) throws Throwable;

}

TService.java

package com.spring.sample.web.test.service;

import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.spring.sample.web.test.dao.ITDao;

@Service
public class TService implements ITService {
	@Autowired
	public ITDao iTDao;

	@Override
	public int getTCnt(HashMap<String, String> params) throws Throwable {
		return iTDao.getTCnt(params);
	}

	@Override
	public List<HashMap<String, String>> getTList(HashMap<String, String> params) throws Throwable {
		return iTDao.getTList(params);
	}

	@Override
	public int insert(HashMap<String, String> params) throws Throwable {
		return iTDao.insert(params);
	}

	@Override
	public HashMap<String, String> getT(HashMap<String, String> params) throws Throwable {
		return iTDao.getT(params);
	}

	@Override
	public void updateTHit(HashMap<String, String> params) throws Throwable {
		iTDao.updateTHit(params);

	}

	@Override
	public int delete(HashMap<String, String> params) throws Throwable {
		return iTDao.delete(params);
	}

	@Override
	public int update(HashMap<String, String> params) throws Throwable {
		return iTDao.update(params);
	}
}

ITDao.java

package com.spring.sample.web.test.dao;

import java.util.HashMap;
import java.util.List;

public interface ITDao {

	public int getTCnt(HashMap<String, String> params) throws Throwable;

	public List<HashMap<String, String>> getTList(HashMap<String, String> params) throws Throwable;

	public int insert(HashMap<String, String> params) throws Throwable;

	public HashMap<String, String> getT(HashMap<String, String> params) throws Throwable;

	public void updateTHit(HashMap<String, String> params) throws Throwable;

	public int delete(HashMap<String, String> params) throws Throwable;

	public int update(HashMap<String, String> params) throws Throwable;

}

TDao.java

package com.spring.sample.web.test.dao;

import java.util.HashMap;
import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class TDao implements ITDao {
	@Autowired
	public SqlSession sqlSession;

	@Override
	public int getTCnt(HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne("T.getTCnt", params);
	}

	@Override
	public List<HashMap<String, String>> getTList(HashMap<String, String> params) throws Throwable {
		return sqlSession.selectList("T.getTList", params);
	}

	@Override
	public int insert(HashMap<String, String> params) throws Throwable {
		return sqlSession.insert("T.insertT", params);
	}

	@Override
	public HashMap<String, String> getT(HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne("T.getT", params);
	}

	@Override
	public void updateTHit(HashMap<String, String> params) throws Throwable {
		sqlSession.update("T.updateTHit", params);
	}

	@Override
	public int delete(HashMap<String, String> params) throws Throwable {
		return sqlSession.update("T.deleteT", params);
	}

	@Override
	public int update(HashMap<String, String> params) throws Throwable {
		return sqlSession.update("T.updateT", params);
	}
}

T_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="T">
	<select id="getTCnt" resultType="Integer" parameterType="hashmap">
		SELECT COUNT(*) AS CNT
		FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
		AND M.DEL = 1
		WHERE T.DEL = 1
		<if test="searchTxt != null and searchTxt !=''">
			<choose>
				<when test="searchGbn eq 0">
					AND T.TITLE LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn eq 1">
					AND M.MEM_NM LIKE '%' ||  #{searchTxt} || '%'
				</when>
			</choose>
		</if>
	</select>
	
	<select id="getTList" resultType="hashmap" parameterType="hashmap">
		SELECT T.NO, T.TITLE, T.MEM_NM, T.HIT, T.DT
		FROM(
		SELECT T.NO, T.TITLE, M.MEM_NM, T.HIT,
		CASE WHEN TO_CHAR(DT,'YY.MM.DD') = TO_CHAR(SYSDATE, 'YY.MM.DD')
		        THEN TO_CHAR(DT, 'HH24:MI')
		        ELSE TO_CHAR(DT, 'YY.MM.DD')
		        END AS DT,
		        ROW_NUMBER() OVER(ORDER BY T.NO DESC) AS RNUM
				FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
				AND M.DEL = 1
		WHERE T.DEL = 1
		<if test="searchTxt != null and searchTxt !=''">
			<choose>
				<when test="searchGbn eq 0">
					AND T.TITLE LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn eq 1">
					AND M.MEM_NM LIKE '%' ||  #{searchTxt} || '%'
				</when>
			</choose>
		</if>) T
		WHERE T.RNUM BETWEEN #{start} AND #{end}
	</select>
	
	<insert id="insertT" parameterType="hashmap">
		INSERT INTO TBOARD(NO, TITLE, MEM_NO, CON)
		VALUES (TBOARD_SEQ.NEXTVAL, #{title} , #{memNo}, #{con})
	</insert>
	 
	<select id="getT" parameterType="hashmap"  resultType="hashmap">
		SELECT T.NO, T.TITLE, M.MEM_NO, M.MEM_NM, T.CON, T.HIT,
	    TO_CHAR(T.DT, 'YYYY-MM-DD') AS DT
		FROM TBOARD T INNER JOIN MEM M ON T.MEM_NO = M.MEM_NO
		AND M.DEL = 1
		WHERE T.DEL = 1
		AND T.NO = #{no}
	</select>
	
	<update id="updateTHit" parameterType="hashmap">
		UPDATE TBOARD SET HIT = HIT + 1
		WHERE NO = #{no}
	</update>
	
	<update id="deleteT"  parameterType="hashmap">
		UPDATE TBOARD SET DEL = 0
		WHERE NO = #{no}
	</update>
	
	<update id="updateT"  parameterType="hashmap">		
		UPDATE TBOARD SET TITLE = #{title},
		CON = #{con}
		WHERE NO = #{no}
	</update>
</mapper>

T폴더에

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
	border-collapse: collapse;
}

th, td {
	border: 1px solid #000;
	padding: 5px;
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	if("${param.searchGbn}" != "") { // 검색구분이 넘어오면
		$("#searchGbn").val("${param.searchGbn}");	
	}
	
	$('select').on('change', function() {
		$("#actionForm").attr("action","TList");
		$("#actionForm").submit();
	});
	
	
	$("tbody").on("click", "tr", function () {
		console.log($(this).attr("no"));
		$("#no").val($(this).attr("no"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
	
		$("#actionForm").attr("action","TDetail");
		$("#actionForm").submit();
	})
	
	$("#insertBtn").on("click", function () {
		location.href = "TInsert";
	});
	
	$("#pagingWrap").on("click", "span", function () {
		$("#page").val($(this).attr("page"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action","TList");
		$("#actionForm").submit();
	});
	
	$("#searchBtn").on("click", function () {
		// 검색하면 페이지는 무조건 1페이지로 감
		$("#page").val("1"); // 페이지 초기화
		
		$("#actionForm").attr("action","TList");
		$("#actionForm").submit();
	})
	
	
})
</script>
</head>
<body>
<c:import url="/testHeader"></c:import>
<!-- 기존 검색 내용 유지용 -->
<input type="hidden" id="oldGbn" value="${param.searchGbn}"/>
<input type="hidden" id="oldTxt" value="${param.searchTxt}"/>
<form action="anboardDetail" id="actionForm" method="post">
	<input type="hidden" id="no" name="no" />
	<input type="hidden" id="page" name="page" value="${page}" />  <!-- 상세보기 갈때 page 가져갈거임 -->
	<br/>
	<!-- 검색 -->
	<select name="searchGbn" id="searchGbn">
		<option value="0">제목</option>
		<option value="1">작성자</option>
	</select>
	<input type="text" name="searchTxt" id="searchTxt" value="${param.searchTxt}"/> <!-- 검색어 유지되게, 그래야 페이징할떄도 유지됨 -->
	<input type="button" value="검색" id="searchBtn" />
	<c:if test="${!empty sMemNm}"> <!-- 로그인 중이라면 -->
		<input type="button" value="추가" id="insertBtn" />
	</c:if>
</form>
<br/>
<table>
	<thead>
		<tr>
			<th>번호</th>
			<th>제목</th>
			<th>작성자</th>
			<th>조회수</th>
			<th>작성일</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach var="data" items="${list}">
			<tr no="${data.NO}">
				<td>${data.NO}</td>
				<td>${data.TITLE}</td>
				<td>${data.MEM_NM}</td>
				<td>${data.HIT}</td>
				<td>${data.DT}</td>
			</tr>
		</c:forEach>
	</tbody>
</table>
<div id="pagingWrap">
<span page="1">처음</span>
<!-- 이전은 현재페이지에서 하나 전, 
지금 1페이지인지 아닌지 먼저 체크 따라서, 현재페이지 필요-->
<!-- 이전페이지 : 현제페이지가 1이면 1로 이동 아니면 현제페이지 -1 -->
<c:choose>
	<c:when test="${page eq 1}">
		<span page="1">이전</span>
	</c:when>
	<c:otherwise>
		<span page="${page - 1}">이전</span>
	</c:otherwise>
</c:choose>
<!-- 페이지들 -->
<c:forEach var="i" begin="${pd.startP}" end="${pd.endP}" step="1">
	<%-- 현재 페이지의 경우 별도 처리 --%>
	<c:choose>
		<c:when test="${i eq page}"> <%-- 현재페이지 --%>
			<span page="${i}"><b>${i}</b></span>
		</c:when>
		<c:otherwise> <%-- 다른페이지 --%>
			<span page="${i}">${i}</span>
		</c:otherwise>
	</c:choose>
</c:forEach>

<!-- 다음페이지 : 마지막에 도달했을때는 증가하지 않고, 다른 경우는 +1 -->
<c:choose>
	<c:when test="${page eq pd.maxP}">
		<span page="${pd.maxP}">다음</span>
	</c:when>
	<c:otherwise>
		<span page="${page + 1}">다음</span>
	</c:otherwise>
</c:choose>

<span page="${pd.maxP}">마지막</span>
</div>
</body>
</html>

insert.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<!-- CKEditor -->
<!-- 제이쿼리 뒤에 나와야함, 제이쿼리 기반으로 동작하기 때문에 -->
<script type="text/javascript" src="resources/script/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 에디터 연결
	// CKEDITOR.replace(아이디, 옵션)
	CKEDITOR.replace("con", {
		resize_enabled: false, // resize_enabled : 크기조절기능 활용여부
		language : "ko", // 사용언어
		enterMode: "2", // 엔터키처리방법. 2번이면 <br/>
		width : 600, // 숫자일경우 px, 문자열일경우 css크기
		height : 400
	});
	
	$("#listBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	$("#insertBtn").on("click", function () {
		// CKEditor의 값 취득
		// CKEDITOR.instances[아이디] : CKEditor중 아이디가 같은 것을 찾겠다.
		//.getData() : 작성중인 내용을 취득하겠다.
		$("#con").val(CKEDITOR.instances['con'].getData());
		
		
		// $.trim(값) : 값 앞 뒤 공백제거	
		if($.trim($("#title").val()) == ""){
			alert("제목을 입력하세요");
			$("#title").focus();
		}  else if($.trim($("#con").val()) == ""){
			alert("내용을 입력하세요");
			$("#con").focus();
		} else {
			$("#actionForm").submit();
		}
	});
});

</script>
</head>
<body>
<form action="TList" id="backForm" method="post">
	<input type="hidden" name="page" value="${param.page}" />
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
<form action="TAction" id="actionForm" method="post">
<!--gbn : 구분, 혹은 flag
구분: i - insert, u - update, d - delete  -->
<input type="hidden" name="gbn" value="i"/>
제목 
<input type="text" name="title" id="title" />
<br />
작성자${sMemNm}<input type="hidden" name="memNo" value="${sMemNo}" /><br/>
<br/>
내용 
<textarea name="con" id="con"></textarea>
<br/>
</form> 
<input type="button" value="등록" id="insertBtn">
<input type="button" value="목록" id="listBtn">
</body>
</html>

detail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" 
		src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#listBtn").on("click", function() {
		$("#actionForm").attr("action","TList"); 
		$("#actionForm").submit();
	});
	
	$("#deleteBtn").on("click", function () {
		if(confirm("삭제하시곘습니까?")){
			$("#actionForm").attr("action","TAction"); 
			$("#actionForm").submit();
		}
	})
	
	$("#updateBtn").on("click", function () {
		$("#actionForm").attr("action","TUpdate");
		$("#actionForm").submit();
	});
});

</script>
</head>
<body>
<form action="#" id="actionForm" method="post">
	<input type="hidden" name="gbn" value="d"> <!-- selRes는 gbn을 받게 되어있어서 값을 추가해줘야함 -->
	<input type="hidden" name="no" value="${data.NO}">
	<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
		<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>	
번호: ${data.NO}<br/>
제목: ${data.TITLE}<br/>
작성자: ${data.MEM_NM}<br/>
조회수: ${data.HIT}<br/>
작성일: ${data.DT}<br/>
내용: ${data.CON}<br/>
<c:if test="${sMemNo eq data.MEM_NO}">
	<input type="button" value="수정" id="updateBtn" />
	<input type="button" value="삭제" id="deleteBtn" />
</c:if>
<input type="button" value="목록" id="listBtn" />
</body>

action.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	switch("${res}"){
	case "success" : 
		if("${param.gbn}" == "u"){ // 수정이 성공했을 떄
			$("#goForm").submit();
		} else { // 등록, 삭제가 성공했을 떄
			location.href = "TList" 
		}
		break;
	case "failed" : 
		alert("작업에 실패하였습니다.");
		history.back();
		break;
	case "error" : 
		alert("작업중 문제가 발생 하였습니다.");
		history.back();
		break;
	}
});
</script>
</head>
<body>
<form action="TDetail" id="goForm" method="post">
	<input type="hidden" name="no" value="${param.no}" />
	<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
		<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
	<input type="hidden" name="sortGbn" value="${param.sortGbn}"/>
</form>
</body>
</html>

update.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="resources/script/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 에디터 연결
	// CKEDITOR.replace(아이디, 옵션)
	CKEDITOR.replace("con", {
		resize_enabled: false, // resize_enabled : 크기조절기능 활용여부
		language : "ko", // 사용언어
		enterMode: "2", // 엔터키처리방법. 2번이면 <br/>
		width : 600, // 숫자일경우 px, 문자열일경우 css크기
		height : 400
	});
	
	$("#listBtn").on("click", function () {
		history.back();
	});
	
	$("#updateBtn").on("click", function () {
		// CKEditor의 값 취득
		// CKEDITOR.instances[아이디] : CKEditor중 아이디가 같은 것을 찾겠다.
		//.getData() : 작성중인 내용을 취득하겠다.
		$("#con").val(CKEDITOR.instances['con'].getData());
		
		
		if($("#title").val() == ""){
			alert("제목을 입력하세요");
			$("#title").focus();
		}  else if($("#con").val() == ""){
			alert("내용을 입력하세요");
			$("#con").focus();
		} else {
			$("#actionForm").submit();
		}
	});
});

</script>
</head>
<body>
<form action="TAction" id="actionForm" method="post">
<input type="hidden" name="gbn" value="u"/>
<input type="hidden" name="no" value="${data.NO}"/> 
<input type="hidden" name="page" value="${param.page}" /> 
<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
번호: ${data.NO}<br/>
제목: <input type="text" name="title" id="title" value="${data.TITLE}"/><br />
작성자: ${data.MEM_NM}<br/>
내용 
<textarea name="con" id="con">${data.CON}</textarea>
<br />
</form>
<input type="button" value="수정" id="updateBtn">
<input type="button" value="뒤로가기" id="listBtn">
</body>
</html>

login쪽에 바뀐거

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript">
$(document).ready(function () {
	$("#logoutBtn").on("click", function () {
		location.href = "testLogout";
	})
	
	$("#loginBtn").on("click", function () {
		location.href = "testLogin";
	})
})

</script>
<c:choose>
	<c:when test="${empty sMemNm}"> <!-- el태그의 empty : 해당 값이 비어있는지 확인 -->
		<input type="button" value="로그인" id="loginBtn" />
	</c:when>
	<c:otherwise>
		${sMemNm}님 어서어세요. <input type="button" value="로그아웃" id="logoutBtn" />
	</c:otherwise>
</c:choose>

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
})
</script>
</head>
<body>
<c:import url="/testHeader"></c:import>
<br/>
<a href="TList">TBoard LISt</a>
</body>
</html>

LoginController.java

package com.spring.sample.web.test.controller;

import java.util.HashMap;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import com.spring.sample.web.test.service.ILoginService;

@Controller
public class LoginController {
	@Autowired
	public ILoginService iLoginService;

	@RequestMapping(value = "/testLogin")
	public ModelAndView testLogin(HttpSession session, // 로그인 된 상태에서 로그인 화면 못가게 하기 위해
			ModelAndView mav) {
		// session의 getAttribute(키) : 세션값 취득
		// 세션에 값이 존재한다면 main으로 이동
		if (session.getAttribute("sMemNm") != null && session.getAttribute("sMemNm") != "") {
			mav.setViewName("redirect:testMain");
		} else {
			mav.setViewName("test/login/login");
		}

		return mav;
	}

	// DB에 붙을예정
	@RequestMapping(value = "/testLoginAction")
	public ModelAndView testLoginAction(
			// HttpServletRequest req, // 1. 요청 객체 취득
			HttpSession session, // 2. Spring에 Session 객체 요청
			@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		// 1. Request를 통한 세션 취득
		// HttpSession session = req.getSession();

		// 아이디와 비밀번호가 일치하는 사용자 정보 취득
		HashMap<String, String> data = iLoginService.checkMem(params);

		if (data != null) { // 조회 데이터가 있다면
			// 세션에 값 추가
			session.setAttribute("sMemNo", data.get("MEM_NO"));
			session.setAttribute("sMemNm", data.get("MEM_NM"));

			mav.setViewName("redirect:testMain");
		} else {
			mav.setViewName("test/login/action");
		}
		return mav;
	}

	@RequestMapping(value = "/testMain")
	public ModelAndView testMain(ModelAndView mav) {
		mav.setViewName("test/login/main");

		return mav;
	}

	@RequestMapping(value = "/testLogout")
	public ModelAndView testLogout(HttpSession session, ModelAndView mav) {
		// 요청 사용자 세션 초기화
		session.invalidate();

		mav.setViewName("redirect:testMain");

		return mav;
	}

	@RequestMapping(value = "/testHeader")
	public ModelAndView testHeader(ModelAndView mav) {
		mav.setViewName("test/login/header");

		return mav;
	}
}

이제 Ajax로 게시판 하는거 새로 폴더, 파일 만듬

https://interconnection.tistory.com/137

Jackson ObjectMapper 정리

개요 Java 개발자라면 Jackson에서 제공하는 ObjectMapper와 자주 마주치게 됩니다. Java 클래스 내용을 확인하거나 내용물의 Parsing 과정에 필요한 커스터마이징이 존재하기 때문입니다. 물론 중요한 기

interconnection.tistory.com

Jackson 잭슨관련해서

pom.xml에 설정내용이 있음 (메이븐의 경우)

get으로 들어오면

값 가져오기

ajax로 받아오면, action파일이 사라질 예정

TestAController.java

package com.spring.sample.web.testa.Controller;

import java.util.HashMap;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.fasterxml.jackson.databind.ObjectMapper;

@Controller
public class TestAController {

	@RequestMapping(value = "/testA")
	public ModelAndView testA(ModelAndView mav) {

		mav.setViewName("testa/testA");
		return mav;
	}

	// RequestMapping의 method : 해당 주소의 접근 형태를 제한
	// produces : 문서의 형태와 언어셋
	@RequestMapping(value = "/testAAjax", method = RequestMethod.POST, // get방식으로 들어오면 동작안할거여, POST만 가능
			produces = "text/json;charset=UTF-8")

	// @ResponseBody : 결과가 View로 인식하게 함. 따라서 ViewResolver가 동작 안함,
	// Spring에 결과가 View인척 하는 역할을 제공
	@ResponseBody
	public String testAAjax() throws Throwable {

		// JSON핸들링
		ObjectMapper mapper = new ObjectMapper(); // 외부라이브러리임, 스프링에서 제공하는건 아님, jackson에서 제공
		// 보낼 값들을 담을 객체
		Map<String, Object> model = new HashMap<String, Object>();

		model.put("msg", "Hi");
		int[] arr = { 3, 6, 9 };
		model.put("arr", arr);
		// JSON = > {"msg":"hi","arr":[3,6,9]}
		// 원래 이렇게 해야하는데, 이거를 손 쉽게 할려고 ObjectMapper 사용
		// writeValueAsString(객체) : 객체의 내용을 JSON 문자열로 변환
		// 단, 사용불가능한 형식이 들어올 수 있기 때문에 예외처리 필요 그래서 throws Throwable 붙여줌
		System.out.println(mapper.writeValueAsString(model));

		return mapper.writeValueAsString(model);
	}

}

ITestAService.java

package com.spring.sample.web.testa.service;

public interface ITestAService {

}

TestAService.java

package com.spring.sample.web.testa.service;

public class TestAService {

}

ITestADao.java

package com.spring.sample.web.testa.dao;

public interface ITestADao {

}

TestADao.java

package com.spring.sample.web.testa.dao;

public class TestADao {

}

testA.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" 
		src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$.ajax({
		url : "testAAjax", //경로
		type : "POST", // 전송방식(GET: 주소형태, POST : 주소 헤더 형태)
		dataType: "json", // 데이터 형태
		success : function(res) { //성공했을 때 결과를 res에 받고 함수 실행
			console.log(res);
			console.log(res.msg);
		},
		error : function(request, status, error) { // 실패했을 때 함수실행
			console.log(request.responseTxt); // 실패 상세 태역
		}
	});
});
</script>
</head>
<body>

</body>
</html>

국비 TIL(Today I Learned) 20220812 MEM테이블 리뷰, 로그인, 로그아웃 화면

토희 — Fri, 12 Aug 2022 16:43:31 +0900

MEM테이블에서 비밀번호관련

memUpdate.jsp

memInsert.jsp

Mem_SQL.xml

memInsert.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<!-- CKEditor -->
<!-- 제이쿼리 뒤에 나와야함, 제이쿼리 기반으로 동작하기 때문에 -->
<script type="text/javascript" src="resources/script/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	$("#listBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	$("#insertBtn").on("click", function () {
	
		// $.trim(값) : 값 앞 뒤 공백제거	
		if($.trim($("#memId").val()) == ""){
			alert("아이디 입력하세요");
			$("#memId").focus();
		}else if($.trim($("#memPw").val()) == ""){
			alert("비밀번호를 입력세요");
			$("#memPw").focus();
		} else if($.trim($("#memPw").val()) != $.trim($("#repw").val())){
			alert("비밀번호가 일치하지 않습니다.");
			$("#memPw").val("");
			$("#repw").val("");
			$("#memPw").focus();
		} else if($.trim($("#memNm").val()) == ""){
			alert("이름을 입력하세요");
			$("#memNm").focus();
		} else if($.trim($("#memBirth").val()) == ""){
			alert("생년월일을 입력하세요");
			$("#memBirth").focus();
		} else {
			$("#actionForm").submit();
		}
	});
});

</script>
</head>
<body>
<form action="memList" id="backForm" method="post">
	<input type="hidden" name="page" value="${param.page}" />
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
<form action="memRes" id="actionForm" method="post">
<!-- gbn : 구분, 혹은 flag
구분: i - insert, u - update, d - delete -->
<input type="hidden" name="gbn" value="i"/>
아이디 
<input type="text" name="memId" id="memId" />
<br />
비밀번호 
<input type="password" name="memPw" id="memPw" />
<br />
비밀번호확인
<input type="password" id="repw" />
<br />
이름
<input type="text" name="memNm" id="memNm" />
<br/>
생년월일
<input type="date" name="memBirth" id="memBirth" />
<br/>
</form>  
<input type="button" value="등록" id="insertBtn">
<input type="button" value="목록" id="listBtn">
</body>
</html>

memUpdate.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#listBtn").on("click", function () {
		history.back();
	});
	
	$("#updateBtn").on("click", function () {

		// $.trim(값) : 값 앞 뒤 공백제거	
		if($.trim($("#memId").val()) == ""){
			alert("아이디 입력하세요");
			$("#memId").focus();
		}  else if($.trim($("#memNm").val()) == ""){
			alert("이름을 입력하세요");
			$("#memNm").focus();
		} else if($.trim($("#memPw").val()) !="" // 이 부분이 업데이트에 추가됨 
				&& $.trim($("#memPw").val()) != $.trim($("#repw").val())){
			alert("비밀번호가 일치하지 않습니다.");
			$("#memPw").val("");
			$("#repw").val("");
			$("#memPw").focus();
		} else if($.trim($("#memBirth").val()) == ""){
			alert("생년월일을 입력하세요");
			$("#memBirth").focus();
		} else {
			$("#actionForm").submit();
		}
	});
});

</script>
</head>
<body>
<form action="memRes" id="actionForm" method="post">
<input type="hidden" name="gbn" value="u"/>
<input type="hidden" name="no" value="${data.MEM_NO}"/> 
아이디 
<input type="text" name="memId" id="memId" value="${data.MEM_ID}"/>
<br />
이름
<input type="text" name="memNm" id="memNm"  value="${data.MEM_NM}"/>
<br/>
비밀번호
<input type="password" name="memPw" id="memPw"  value="${data.MEM_PW}"/>
<br/>
비밀번호확인
<input type="password" id="repw" />
<br/>
생년월일
<input type="date" name="memBirth" id="memBirth" value="${data.MEM_BIRTH}"/>
<br/>
</form>
<input type="button" value="수정" id="updateBtn">
<input type="button" value="뒤로가기" id="listBtn">
</body>
</html>

Mem_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- namespace : 클래스와 동일, 이 파일의 대표명 -->
<mapper namespace="mem">
	<!-- select : 조회 
		id: 구분자, 메소드명과 동일
		resultType : 조회 결과 중 한줄에 대한 자료 형태를 지정
		hashmap: mybatis-config.xml에서 별칭 지정해놔서 줄여쓸수있는거임
		쿼리 삽입시 주의사항: ;이 있는경우 문제가 발생한다. 이유는 해당 쿼리 실행시 자동으로 추가되기 때문
	-->
	<select id="getMemList" resultType="hashmap" parameterType="hashmap">
		SELECT S.MEM_NO, S.MEM_ID, S.MEM_NM, S.REG_DT
		FROM (SELECT MEM_NO, MEM_ID, MEM_NM, TO_CHAR(REG_DT,'YYYY-MM-DD') AS REG_DT,
       		  ROW_NUMBER() OVER(ORDER BY REG_DT DESC, MEM_NO DESC) AS RNK
			  FROM MEM
			  WHERE DEL = 1
			<if test="searchTxt != null and searchTxt != ''"> <!-- 검색어가 있다면 -->
				<choose>
					<when test="searchGbn == 0"> <!-- 품목 -->
						AND MEM_ID LIKE '%' || #{searchTxt} || '%'
					</when>
					<when test="searchGbn == 1"> <!-- 수량 -->
						AND MEM_NM = #{searchTxt}
					</when>
				</choose>
			</if>
             ) S
		WHERE S.RNK BETWEEN #{start} AND #{end}
	</select>
	
	<!-- 
		parameterType : 실행시 받는 값 
		#{키} : 헤당위치에 문자열로 키에 해당하는 값을 넣어준다
		ex) no에 3이 들어있는 경우
		WHERE SELL_NO = #{no}
		=> WHERE SELL_NO = '3' // 문자열이기 때문에  ' '이 들어감
		parameterType dao받는값, resultType값이 db실행결과
	-->
	<select id="getMem" resultType="hashmap" parameterType="hashmap">
		SELECT MEM_NO, MEM_ID, MEM_NM, TO_CHAR(MEM_BIRTH,'YYYY-MM-DD') AS MEM_BIRTH, TO_CHAR(REG_DT,'YYYY-MM-DD') AS REG_DT
		FROM MEM
		WHERE MEM_NO = #{no}
	</select>
	
	<!-- insert는 resultType 이 없음 -->
	<insert id="insertMem" parameterType="hashmap">
		INSERT INTO MEM(MEM_NO, MEM_ID, MEM_PW, MEM_NM, MEM_BIRTH)
		VALUES(MEM_SEQ.NEXTVAL, #{memId}, #{memPw}, #{memNm}, #{memBirth})
	</insert>
	
	
	<update id="deleteMem" parameterType="hashmap">
		UPDATE MEM SET DEL = 0
		WHERE MEM_NO = #{no}
	</update>
	
	<update id="updateMem" parameterType="hashmap">
		UPDATE MEM SET MEM_ID = #{memId},
                MEM_NM = #{memNm},
                <if test="memPw != null and memPw != ''">
                	 MEM_PW = #{memPw},
                </if>
                MEM_BIRTH = #{memBirth}
       	WHERE MEM_NO = #{no}
	</update>
	
	<select id="getMemCnt" parameterType="hashmap" resultType="Integer">
		SELECT COUNT(*) AS CNT 
		FROM MEM
		WHERE DEL = 1
		<if test="searchTxt != null and searchTxt != ''"> <!-- 검색어가 있다면 -->
			<choose>
				<when test="searchGbn == 0"> <!-- 품목 -->
					AND MEM_ID LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn == 1"> <!-- 수량 -->
					AND MEM_NM = #{searchTxt}
				</when>
			</choose>
		</if>
	</select>
	
	
</mapper>

로그아웃

세션에 정보 제거

LoginController.java

package com.spring.sample.web.test.controller;

import java.util.HashMap;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import com.spring.sample.web.test.service.ILoginService;

@Controller
public class LoginController {
	@Autowired
	public ILoginService iLoginService;

	@RequestMapping(value = "/testLogin")
	public ModelAndView testLogin(HttpSession session, // 로그인 된 상태에서 로그인 화면 못가게 하기 위해
			ModelAndView mav) {
		// session의 getAttribute(키) : 세션값 취득
		// 세션에 값이 존재한다면 main으로 이동
		if (session.getAttribute("sMemNm") != null && session.getAttribute("sMemNm") != "") {
			mav.setViewName("redirect:testMain");
		} else {
			mav.setViewName("test/login/login");
		}

		return mav;
	}

	// DB에 붙을예정
	@RequestMapping(value = "/testLoginAction")
	public ModelAndView testLoginAction(
			// HttpServletRequest req, // 1. 요청 객체 취득
			HttpSession session, // 2. Spring에 Session 객체 요청
			@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		// 1. Request를 통한 세션 취득
		// HttpSession session = req.getSession();

		// 아이디와 비밀번호가 일치하는 사용자 정보 취득
		HashMap<String, String> data = iLoginService.checkMem(params);

		if (data != null) { // 조회 데이터가 있다면
			// 세션에 값 추가
			session.setAttribute("sMemNo", data.get("MEM_NO"));
			session.setAttribute("sMemNm", data.get("MEM_NM"));

			mav.setViewName("redirect:testMain");
		} else {
			mav.setViewName("test/login/action");
		}
		return mav;
	}

	@RequestMapping(value = "/testMain")
	public ModelAndView testMain(ModelAndView mav) {
		mav.setViewName("test/login/main");

		return mav;
	}

	@RequestMapping(value = "/testLogout")
	public ModelAndView testLogout(HttpSession session, ModelAndView mav) {
		// 요청 사용자 세션 초기화
		session.invalidate();

		mav.setViewName("redirect:testMain");

		return mav;
	}
}

ILoginService.java

package com.spring.sample.web.test.service;

import java.util.HashMap;

public interface ILoginService {

	public HashMap<String, String> checkMem(HashMap<String, String> params) throws Throwable;

}

LoginService.java

package com.spring.sample.web.test.service;

import java.util.HashMap;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.spring.sample.web.test.dao.ILoginDao;

@Service
public class LoginService implements ILoginService {
	@Autowired
	public ILoginDao iLoginDao;

	@Override
	public HashMap<String, String> checkMem(HashMap<String, String> params) throws Throwable {
		return iLoginDao.checkMem(params);
	}
}

ILoginDao.java

package com.spring.sample.web.test.dao;

import java.util.HashMap;

public interface ILoginDao {

	public HashMap<String, String> checkMem(HashMap<String, String> params) throws Throwable;

}

LoginDao.java

package com.spring.sample.web.test.dao;

import java.util.HashMap;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class LoginDao implements ILoginDao {
	@Autowired
	public SqlSession sqlSession;

	@Override
	public HashMap<String, String> checkMem(HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne("Login.checkMem", params);
	}
}

Login_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="Login">
	<select id="checkMem" resultType="hashmap" parameterType="hashmap">
		SELECT MEM_NO, MEM_NM
		FROM MEM
		WHERE DEL = 1
		AND MEM_ID = #{id} <!-- login/login jsp에서 name맞춰줘야함 -->
		AND MEM_PW = #{pw}
	</select>
</mapper>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#actionForm").on("keypress","input", function(event) {
		// 1.엔터쳤을때
		if(event.keyCode == 13){
			// 1.직접 함수 호출
			// login();
			
			// 2.버튼 이벤트 발생
			$("#loginBtn").click();
			return false;
		
		}
	})
	
	// 2.버튼 눌렀을때
	$("#loginBtn").on("click", login);
});

// 왜 function으로 하는지
// 로그인 동작하는 상황 2종류, 1.엔터쳤을때  2.버튼 눌렀을때
function login() {
	if($.trim($("#id").val()) == ""){
		alert("아이디를 입력하세요.");
		$("#id").focus();
	} else if($.trim($("#pw").val()) == ""){
		alert("비밀번호를 입력하세요.");
		$("#pw").focus();
	} else {
		$("#actionForm").submit();
	}
}

</script>
</head>
<body>
<form action="testLoginAction" id="actionForm" method="post">
	아이디 <input type="text" name="id" id="id" /><br/>
	비밀번호 <input type="password" name="pw" id="pw" /><br/>
</form>
<input type="button" value="로그인" id="loginBtn" />
</body>
</html>

action.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
alert("아이디나 비밀번호가 일치하지 않습니다.");
history.back();
</script>
<body>

</body>
</html>

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#logoutBtn").on("click", function () {
		location.href = "testLogout";
	})
	
	$("#loginBtn").on("click", function () {
		location.href = "testLogin";
	})
})
</script>
</head>
<body>
<c:choose>
	<c:when test="${empty sMemNm}"> <!-- el태그의 empty : 해당 값이 비어있는지 확인 -->
		<input type="button" value="로그인" id="loginBtn" />
	</c:when>
	<c:otherwise>
		${sMemNm}님 어서어세요. <input type="button" value="로그아웃" id="logoutBtn" />
	</c:otherwise>
</c:choose>
</body>
</html>

TBOARD만들기

MEM테이블이랑 TBOARD랑 외래키 설정

테이블만 만들고, 조인은 화요일부터!

그리고 정렬하는거를 해봤는데

나혼자 한거라,

anboardList

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
	border-collapse: collapse;
}

th, td {
	border: 1px solid #000;
	padding: 5px;
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	if("${param.searchGbn}" != "") { // 검색구분이 넘어오면
		$("#searchGbn").val("${param.searchGbn}");	
	}
	
	if("${param.sortGbn}" == ""){
		$("#sortGbn").val("0");	
	}
	if("${param.sortGbn}" != "") { 
		$("#sortGbn").val("${param.sortGbn}");	
	}
	
	$('select').on('change', function() {
		$("#actionForm").attr("action","anboardList");
		$("#actionForm").submit();
	});
	
	
	$("tbody").on("click", "tr", function () {
		console.log($(this).attr("no"));
		$("#no").val($(this).attr("no"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		$("#sortGbn").val($("#oldSort").val());
		
	
		$("#actionForm").attr("action","anboardDetail");
		$("#actionForm").submit();
	})
	
	$("#insertBtn").on("click", function () {
		location.href = "anboardInsert";
	});
	
	$("#pagingWrap").on("click", "span", function () {
		$("#page").val($(this).attr("page"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		$("#sortGbn").val($("#oldSort").val());
		
		$("#actionForm").attr("action","anboardList");
		$("#actionForm").submit();
	});
	
	$("#searchBtn").on("click", function () {
		// 검색하면 페이지는 무조건 1페이지로 감
		$("#page").val("1"); // 페이지 초기화
		
		$("#actionForm").attr("action","anboardList");
		$("#actionForm").submit();
	})
})
</script>
</head>
<body>
<!-- 기존 검색 내용 유지용 -->
<input type="hidden" id="oldGbn" value="${param.searchGbn}"/>
<input type="hidden" id="oldTxt" value="${param.searchTxt}"/>
<input type="hidden" id="oldSort" value="${param.sortGbn}"/>
<form action="anboardDetail" id="actionForm" method="post">
	<input type="hidden" id="no" name="no" />
	<input type="hidden" id="page" name="page" value="${page}" />  <!-- 상세보기 갈때 page 가져갈거임 -->
	<select name="sortGbn" id="sortGbn">
		<option value="0">번호순</option>
		<option value="1">제목순</option>
	</select>
	<br/>
	<!-- 검색 -->
	<select name="searchGbn" id="searchGbn">
		<option value="0">제목</option>
		<option value="1">작성자</option>
	</select>
	<input type="text" name="searchTxt" id="searchTxt" value="${param.searchTxt}"/> <!-- 검색어 유지되게, 그래야 페이징할떄도 유지됨 -->
	<input type="button" value="검색" id="searchBtn" />
	<input type="button" value="추가" id="insertBtn" />
</form>

<table>
	<thead>
		<tr>
			<th>번호</th>
			<th>제목</th>
			<th>작성자</th>
			<th>조회수</th>
			<th>작성일</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach var="data" items="${list}">
			<tr no="${data.NO}">
				<td>${data.NO}</td>
				<td>${data.TITLE}</td>
				<td>${data.WRITER}</td>
				<td>${data.HIT}</td>
				<td>${data.DT}</td>
			</tr>
		</c:forEach>
	</tbody>
</table>
<div id="pagingWrap">
<span page="1">처음</span>
<!-- 이전은 현재페이지에서 하나 전, 
지금 1페이지인지 아닌지 먼저 체크 따라서, 현재페이지 필요-->
<!-- 이전페이지 : 현제페이지가 1이면 1로 이동 아니면 현제페이지 -1 -->
<c:choose>
	<c:when test="${page eq 1}">
		<span page="1">이전</span>
	</c:when>
	<c:otherwise>
		<span page="${page - 1}">이전</span>
	</c:otherwise>
</c:choose>
<!-- 페이지들 -->
<c:forEach var="i" begin="${pd.startP}" end="${pd.endP}" step="1">
	<%-- 현재 페이지의 경우 별도 처리 --%>
	<c:choose>
		<c:when test="${i eq page}"> <%-- 현재페이지 --%>
			<span page="${i}"><b>${i}</b></span>
		</c:when>
		<c:otherwise> <%-- 다른페이지 --%>
			<span page="${i}">${i}</span>
		</c:otherwise>
	</c:choose>
</c:forEach>

<!-- 다음페이지 : 마지막에 도달했을때는 증가하지 않고, 다른 경우는 +1 -->
<c:choose>
	<c:when test="${page eq pd.maxP}">
		<span page="${pd.maxP}">다음</span>
	</c:when>
	<c:otherwise>
		<span page="${page + 1}">다음</span>
	</c:otherwise>
</c:choose>

<span page="${pd.maxP}">마지막</span>
</div>
</body>
</html>

detail, update, res 부분에 넣고

Test_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- namespace : 클래스와 동일, 이 파일의 대표명 -->
<mapper namespace="test">

	<!-- anboard테이블 -->
	
	<select id="getAnboardList" resultType="hashmap" parameterType="hashmap">		
		SELECT S.NO, S.TITLE, S.WRITER, S.HIT, S.DT
		FROM (SELECT NO, TITLE, WRITER, HIT, CASE WHEN TO_CHAR(DT,'YY.MM.DD') = TO_CHAR(SYSDATE, 'YY.MM.DD')
        THEN TO_CHAR(DT, 'HH24:MI')
        ELSE TO_CHAR(DT, 'YY.MM.DD')
        END AS DT,
        ROW_NUMBER() OVER(ORDER BY DT DESC, NO DESC) AS RNK
		FROM ANBOARD
		WHERE DEL = 1
		<if test="searchTxt != null and searchTxt != ''"> 
			<choose>
				<when test="searchGbn == 0">
					AND TITLE LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn == 1">
					AND WRITER LIKE '%' || #{searchTxt} || '%'
				</when>
			</choose>
		</if>
		<if test="1 == 1">
			<choose>
				<when test="sortGbn == 0">
					ORDER BY NO ASC
				</when>
				<when test="sortGbn == 1">
					ORDER BY TITLE ASC
				</when>
			</choose>
		</if>
		) S
		WHERE S.RNK BETWEEN #{start} AND #{end} 
	</select>

	<select id="getAnboard" resultType="hashmap" parameterType="hashmap">
		SELECT NO, TITLE, WRITER, CON, HIT, DT 
		FROM ANBOARD
		WHERE NO = #{no}
	</select>
	
	<insert id="insertAnboard" parameterType="hashmap">
		INSERT INTO ANBOARD(NO, TITLE, WRITER, CON)
		VALUES(ANBOARD_SEQ.NEXTVAL, #{title}, #{writer}, #{con})
	</insert>
	
	<update id="deleteAnboard" parameterType="hashmap">
		UPDATE ANBOARD SET DEL = 0
		WHERE NO = #{no}
	</update>
	
	<update id="updateAnboard" parameterType="hashmap">
		UPDATE ANBOARD SET TITLE = #{title},
                WRITER = #{writer},
                CON = #{con}
                WHERE NO = #{no}
	</update>
	
	<select id="getAnboardCnt" parameterType="hashmap" resultType="Integer">
		SELECT COUNT(*) AS CNT 
		FROM ANBOARD
		WHERE DEL = 1
		<if test="searchTxt != null and searchTxt != ''"> 
			<choose>
				<when test="searchGbn == 0"> <!-- searchGbn eq 0 -->
					AND TITLE LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn == 1">
					AND WRITER LIKE '%' || #{searchTxt} || '%'
				</when>
			</choose>
		</if>
	</select>


	<update id="updateHit" parameterType="hashmap" >
		UPDATE ANBOARD SET HIT = HIT + 1
		WHERE NO = #{no}
	</update>
	
</mapper>

국비 TIL(Today I Learned) 20220811 anboard테이블 리뷰, mem테이블 실습

토희 — Thu, 11 Aug 2022 18:30:50 +0900

면접질문

* CRUD만드는데 얼마나 걸려요?

1번 내가 가지고 있는 소스 기반으로 구현한다고 했을때의 경우

2번 회사의 소스 분석하면서 만들었을때의 경우

3번 맨땅에서 스프링부터 구성했을때의 경우

1번 경우, 디자인 제외하고 하루정도면 충분할것 같습니다

2번 경우 5~6일

어제 실습한

anboard테이블 강사님 리뷰중, 나랑 다른거만 작성함

1. controller

2. sql

3., getAnboardList 쿼리문 작성할때

오늘작성된 글이면 시간이 뜨게하고, 오늘이 아닌 DATE면은 년월일이 뜨도록 추가함

내 궁금증 질문내용

Test_SQL.xml에 삭제 쿼리문

쿼리에는 <update></update> 쓰고,

TestDao1.java에는 delete로 썼어(sqlSession 뒷부분) => 강사님이 상관없데, sqlSession.delete나 update, insert는 어차피

'1행이 업데이트되었습니다.' 이런 1행 숫자 받는게 똑같아서 상관없데

update이는 시퀀스 증가하지 않으니까 rollback해도 상관없음, 디벨로퍼에서 쿼리문 맞는지 확인하고

Res대신에 쓰는법

anboardInsert.jsp

anboardAction.jsp

Res 대신 @PathVariable 로 쓰는법

기존

/SampleSpring/res

=> resources/~~~

/SampleSpring/resources/~~

현재

/SampleSpring/Action/insert

=> resources/~~

/SampleSpring/Action/resourdes/~~

따라서 이렇게 해줘야 => ../resources/~~~

기존경로 처림 됨 /SampleSpring/resources/~~

조회수 하는법

controller에서 detail쪽에 매서드 추가

ITestService1.jsp

TestService1.jsp

ITestDao1.jsp

TestDao1.jsp

Test_SQL.xml

지금 내코드는

Insert하는 부분은 anboardAction으로 하고 (파라미터로 넘기고)

update는 anboardRes로 되고있는듯 (gnb받고)

ck에디터 넣을예정

5버전은 es6문법이라 4버전으로 할예정

강사님이 샘플을 script에 넣어두심

anboard테이블 res대신에 파라미터로 준 후 코드

PshExamController.java

package com.spring.sample.web.test.controller;

import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import com.spring.sample.common.service.IPagingService;
import com.spring.sample.web.test.service.ITestService1;

@Controller
public class PshExamController {
	@Autowired
	public ITestService1 iTestService1;

	@Autowired
	public IPagingService ips; // 페이징 서비스 객체 주입

	// anboard테이블!!!!!!!!
	@RequestMapping(value = "/anboardList")
	public ModelAndView anboardList(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		// 현재페이지
		int page = 1;

		// 넘어오는 페이지 셋팅
		if (params.get("page") != null && params.get("page") != "") {
			page = Integer.parseInt(params.get("page")); // 받아온 페이지 할당
		}

		// 총 데이터 개수 취득
		int cnt = iTestService1.getAnboardCnt(params);

		// 페이징 데이터 계산
		// ips.getPagingData(page, maxCount, viewCnt, pageCnt)
		HashMap<String, Integer> pd = ips.getPagingData(page, cnt, 3, 2);

		// 파라미터에 시작, 종료값 추가
		// 한쪽으로 필요 데이터를 몰았다?
		params.put("start", Integer.toString(pd.get("start")));
		params.put("end", Integer.toString(pd.get("end")));

		// 데이터 취득
		List<HashMap<String, String>> list = iTestService1.getAnboardList(params);

		// 목록 데이터
		mav.addObject("list", list);
		// 페이징 정보
		mav.addObject("pd", pd);
		// 현재 페이지
		mav.addObject("page", page);
		mav.setViewName("test/anboardList");

		return mav;
	}

	@RequestMapping(value = "/anboardDetail")
	public ModelAndView anboardDetail(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		// 조회수 증가
		iTestService1.updateHit(params);

		if (params.get("no") == null || params.get("no") == "") {
			mav.setViewName("redirect:anboardList");

		} else {
			HashMap<String, String> data = iTestService1.getAnboard(params);

			mav.addObject("data", data);
			mav.setViewName("test/anboardDetail");
		}

		return mav;
	}

	@RequestMapping(value = "/anboardInsert")
	public ModelAndView managerInsert(ModelAndView mav) {
		mav.setViewName("test/anboardInsert");
		return mav;

	}

	@RequestMapping(value = "/anboardRes")
	public ModelAndView anboardInsertRes(@RequestParam HashMap<String, String> params, ModelAndView mav)
			throws Throwable {

		System.out.println(params.toString());
		try {
			int cnt = 0; // insert, update, delete 다 쓸거기 때문에 처음에 0줌

			switch (params.get("gbn")) {
			case "i":
				cnt = iTestService1.insertAnboard(params);
				break;
			case "u":
				cnt = iTestService1.updateAnboard(params);
				break;
			case "d":
				cnt = iTestService1.deleteAnboard(params);
				break;
			}

			if (cnt > 0) { // 1건 이상 등록된 경우
				mav.addObject("res", "success");
			} else { // 등록 안된 경우
				mav.addObject("res", "failded");
			}
		} catch (Exception e) { // 예외 발생시
			e.printStackTrace();
			mav.addObject("res", "error");
		}
		mav.setViewName("test/anboardRes");
		return mav;
	}

	// 글 수정페이지
	@RequestMapping(value = "/anboardUpdate")
	public ModelAndView anboardUpdate(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		// 기존데이터 조회해와야함
		HashMap<String, String> data = iTestService1.getAnboard(params);
		mav.addObject("data", data);

		mav.setViewName("test/anboardUpdate");

		return mav;

	}

	// gbn없이 하는법
	// RequestMapping에서 주소 중 특정 내용들을 값으로 활용 가능
	// 주소 값에 {키}를 지정하면 해당 내용을 변수로 받을 수 있음
	@RequestMapping(value = "anboardAction/{action}")
	public ModelAndView anboardAction(
			// @pathVariable : 경로를 변수로 활용하여 받아옴
			@PathVariable String action, // action이 위의 {action} 이랑 이름 같아야 함, 여기서는 insert를 받아올 예정
			@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		int cnt = 0;

		try {
			switch (action) {
			case "insert":
				cnt = iTestService1.insertAnboard(params);
				break;
			case "update":
				cnt = iTestService1.updateAnboard(params);
				mav.addObject("flag", "u"); // 업데이트 할때 값을 하나 더 주기, 이 역활이 gbn 대신
				break;
			case "delete":
				cnt = iTestService1.deleteAnboard(params);
				break;
			}

			if (cnt > 0) { // 1건 이상 등록된 경우
				mav.addObject("res", "success");
			} else { // 등록 안된 경우
				mav.addObject("res", "failded");
			}

		} catch (Exception e) {
			e.printStackTrace();
			mav.addObject("res", "error");
		}
		mav.setViewName("test/anboardAction");
		return mav;

	}

}

ITestService1.java

package com.spring.sample.web.test.service;

import java.util.HashMap;
import java.util.List;

public interface ITestService1 {

	// anboard 테이블

	public List<HashMap<String, String>> getAnboardList(HashMap<String, String> params) throws Throwable;

	public int getAnboardCnt(HashMap<String, String> params) throws Throwable;

	public HashMap<String, String> getAnboard(HashMap<String, String> params) throws Throwable;

	public int insertAnboard(HashMap<String, String> params) throws Throwable;

	public int updateAnboard(HashMap<String, String> params) throws Throwable;

	public int deleteAnboard(HashMap<String, String> params) throws Throwable;

	public void updateHit(HashMap<String, String> params) throws Throwable;

}

TestService1.java

package com.spring.sample.web.test.service;

import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.spring.sample.web.test.dao.ITestDao1;

@Service
public class TestService1 implements ITestService1 {
	@Autowired
	public ITestDao1 iTestDao1;

	@Override
	public List<HashMap<String, String>> getAnboardList(HashMap<String, String> params) throws Throwable {
		return iTestDao1.getAnboardList(params);
	}

	@Override
	public int getAnboardCnt(HashMap<String, String> params) throws Throwable {
		return iTestDao1.getAnboardCnt(params);
	}

	@Override
	public HashMap<String, String> getAnboard(HashMap<String, String> params) throws Throwable {
		return iTestDao1.getAnboard(params);
	}

	@Override
	public int insertAnboard(HashMap<String, String> params) throws Throwable {
		return iTestDao1.insertAnboard(params);
	}

	@Override
	public int updateAnboard(HashMap<String, String> params) throws Throwable {
		return iTestDao1.updateAnboard(params);
	}

	@Override
	public int deleteAnboard(HashMap<String, String> params) throws Throwable {
		return iTestDao1.deleteAnboard(params);
	}

	@Override
	public void updateHit(HashMap<String, String> params) throws Throwable {
		iTestDao1.updateHit(params);

	}
}

ITestDao1.java

package com.spring.sample.web.test.dao;

import java.util.HashMap;
import java.util.List;

public interface ITestDao1 {

	public List<HashMap<String, String>> getAnboardList(HashMap<String, String> params);

	public int getAnboardCnt(HashMap<String, String> params) throws Throwable;

	public HashMap<String, String> getAnboard(HashMap<String, String> params) throws Throwable;

	public int insertAnboard(HashMap<String, String> params) throws Throwable;

	public int updateAnboard(HashMap<String, String> params) throws Throwable;

	public int deleteAnboard(HashMap<String, String> params) throws Throwable;

	public void updateHit(HashMap<String, String> params) throws Throwable;

}

TestDao1.java

package com.spring.sample.web.test.dao;

import java.util.HashMap;
import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class TestDao1 implements ITestDao1 {
	@Autowired
	public SqlSession sqlSession;

	
	@Override
	public List<HashMap<String, String>> getAnboardList(HashMap<String, String> params) {
		return sqlSession.selectList("test.getAnboardList", params);
	}

	@Override
	public int getAnboardCnt(HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne("test.getAnboardCnt", params);
	}

	@Override
	public HashMap<String, String> getAnboard(HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne("test.getAnboard", params);
	}

	@Override
	public int insertAnboard(HashMap<String, String> params) throws Throwable {
		return sqlSession.insert("test.insertAnboard", params);
	}

	@Override
	public int updateAnboard(HashMap<String, String> params) throws Throwable {
		return sqlSession.update("test.updateAnboard", params);
	}

	@Override
	public int deleteAnboard(HashMap<String, String> params) throws Throwable {
		return sqlSession.delete("test.deleteAnboard", params);
	}

	@Override
	public void updateHit(HashMap<String, String> params) throws Throwable {
		sqlSession.update("test.updateHit", params);
	}

}

Test_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- namespace : 클래스와 동일, 이 파일의 대표명 -->
<mapper namespace="test">
	
	<!-- anboard테이블 -->
	
	<select id="getAnboardList" resultType="hashmap" parameterType="hashmap">		
		SELECT S.NO, S.TITLE, S.WRITER, S.HIT, S.DT
		FROM (SELECT NO, TITLE, WRITER, HIT, CASE WHEN TO_CHAR(DT,'YY.MM.DD') = TO_CHAR(SYSDATE, 'YY.MM.DD')
        THEN TO_CHAR(DT, 'HH24:MI')
        ELSE TO_CHAR(DT, 'YY.MM.DD')
        END AS DT,
        ROW_NUMBER() OVER(ORDER BY DT DESC, NO DESC) AS RNK
		FROM ANBOARD
		WHERE DEL = 1
		<if test="searchTxt != null and searchTxt != ''"> 
			<choose>
				<when test="searchGbn == 0">
					AND TITLE LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn == 1">
					AND WRITER LIKE '%' || #{searchTxt} || '%'
				</when>
			</choose>
		</if>
		<if test="1 == 1">
			<choose>
				<when test="sortGbn == 0">
					ORDER BY NO ASC
				</when>
				<when test="sortGbn == 1">
					ORDER BY TITLE ASC
				</when>
			</choose>
		</if>
		) S
		WHERE S.RNK BETWEEN #{start} AND #{end} 
	</select>

	<select id="getAnboard" resultType="hashmap" parameterType="hashmap">
		SELECT NO, TITLE, WRITER, CON, HIT, DT 
		FROM ANBOARD
		WHERE NO = #{no}
	</select>
	
	<insert id="insertAnboard" parameterType="hashmap">
		INSERT INTO ANBOARD(NO, TITLE, WRITER, CON)
		VALUES(ANBOARD_SEQ.NEXTVAL, #{title}, #{writer}, #{con})
	</insert>
	
	<update id="deleteAnboard" parameterType="hashmap">
		UPDATE ANBOARD SET DEL = 0
		WHERE NO = #{no}
	</update>
	
	<update id="updateAnboard" parameterType="hashmap">
		UPDATE ANBOARD SET TITLE = #{title},
                WRITER = #{writer},
                CON = #{con}
                WHERE NO = #{no}
	</update>
	
	<select id="getAnboardCnt" parameterType="hashmap" resultType="Integer">
		SELECT COUNT(*) AS CNT 
		FROM ANBOARD
		WHERE DEL = 1
		<if test="searchTxt != null and searchTxt != ''"> 
			<choose>
				<when test="searchGbn == 0"> <!-- searchGbn eq 0 -->
					AND TITLE LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn == 1">
					AND WRITER LIKE '%' || #{searchTxt} || '%'
				</when>
			</choose>
		</if>
	</select>


	<update id="updateHit" parameterType="hashmap" >
		UPDATE ANBOARD SET HIT = HIT + 1
		WHERE NO = #{no}
	</update>
	
</mapper>

anboardAction.jsp(새로 생김)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 주소창의 데이터 받을수 있긴 한데 정말 귀찮으니 어떻게 처리할건인가 하면
	
	// src에  "../resources/script/jquery/jquery-1.12.4.min.js"로 변경하기
	// 또는 src에  "${pageContext.request.contextPath}/resources/script/jquery/jquery-1.12.4.min.js"
	
	// 경로문제가 스크립트뿐만 아니라 list도 문제임
		
	switch("${res}"){
	case "success" : 
		if("${flag}" == "u"){ // 수정이 성공했을 떄
			$("#goForm").submit();
		} else { // 등록, 삭제가 성공했을 떄
			location.href = "../anboardList" 
		}
		break;
	case "failed" : 
		alert("작업에 실패하였습니다.");
		history.back();
		break;
	case "error" : 
		alert("작업중 문제가 발생 하였습니다.");
		history.back();
		break;
	}
});
</script>
</head>
<body>
<form action="../anboardDetail" id="goForm" method="post">
	<input type="hidden" name="no" value="${param.no}" />
	<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
		<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
	<input type="hidden" name="sortTxt" value="${param.sortTxt}"/>
</form>
</body>
</html>

anboardInsert.jsp (form 주소바뀜 /insert, CKEDITOR 사용)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<!-- CKEditor -->
<!-- 제이쿼리 뒤에 나와야함, 제이쿼리 기반으로 동작하기 때문에 -->
<script type="text/javascript" src="resources/script/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 에디터 연결
	// CKEDITOR.replace(아이디, 옵션)
	CKEDITOR.replace("con", {
		resize_enabled: false, // resize_enabled : 크기조절기능 활용여부
		language : "ko", // 사용언어
		enterMode: "2", // 엔터키처리방법. 2번이면 <br/>
		width : 600, // 숫자일경우 px, 문자열일경우 css크기
		height : 400
	});
	
	$("#listBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	$("#insertBtn").on("click", function () {
		// CKEditor의 값 취득
		// CKEDITOR.instances[아이디] : CKEditor중 아이디가 같은 것을 찾겠다.
		//.getData() : 작성중인 내용을 취득하겠다.
		$("#con").val(CKEDITOR.instances['con'].getData());
		
		
		// $.trim(값) : 값 앞 뒤 공백제거	
		if($.trim($("#title").val()) == ""){
			alert("제목을 입력하세요");
			$("#title").focus();
		} else if($.trim($("#writer").val()) == ""){
			alert("작성자를 입력하세요");
			$("#writer").focus();
		}  else if($.trim($("#con").val()) == ""){
			alert("내용을 입력하세요");
			$("#con").focus();
		} else {
			$("#actionForm").submit();
		}
	});
});

</script>
</head>
<body>
<form action="anboardList" id="backForm" method="post">
	<input type="hidden" name="page" value="${param.page}" />
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
<!-- gbn대신에 action에 /뒤에 이름으로 달라지게 -->
<form action="anboardAction/insert" id="actionForm" method="post">
	제목<input type="text" name="title" id="title" /><br/>
	작성자<input type="text" name="writer" id="writer" /><br/>
	내용<textarea rows="10" cols="30" name="con" id="con"></textarea>
</form> 

<!-- <form action="anboardRes" id="actionForm" method="post">
gbn : 구분, 혹은 flag
구분: i - insert, u - update, d - delete
<input type="hidden" name="gbn" value="i"/>
제목 
<input type="text" name="title" id="title" />
<br />
작성자 
<input type="text" name="writer" id="writer" />
<br/>
내용 
<textarea name="con" id="con"></textarea>
<br/>
</form>  -->
<input type="button" value="등록" id="insertBtn">
<input type="button" value="목록" id="listBtn">
</body>
</html>

anboardDetail.jsp (삭제버튼 클릭시 주소 바뀜)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" 
		src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#listBtn").on("click", function() {
		$("#actionForm").attr("action","anboardList"); 
		$("#actionForm").submit();
	});
	
	$("#deleteBtn").on("click", function () {
		if(confirm("삭제하시곘습니까?")){
			$("#actionForm").attr("action","anboardAction/delete"); 
			$("#actionForm").submit();
		}
	})
	
	$("#updateBtn").on("click", function () {
		$("#actionForm").attr("action","anboardUpdate");
		$("#actionForm").submit();
	});
});

</script>
</head>
<body>
<form action="#" id="actionForm" method="post">
	<input type="hidden" name="gbn" value="d"> <!-- selRes는 gbn을 받게 되어있어서 값을 추가해줘야함 -->
	<input type="hidden" name="no" value="${data.NO}">
	<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
		<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
	<input type="hidden" name="sortTxt" value="${param.sortTxt}"/>
</form>	
번호: ${data.NO}<br/>
제목: ${data.TITLE}<br/>
내용: ${data.CON}<br/>
작성자: ${data.WRITER}<br/>
조회수: ${data.HIT}<br/>
작성일: ${data.DT}<br/>
<input type="button" value="수정" id="updateBtn" />
<input type="button" value="삭제" id="deleteBtn" />
<input type="button" value="목록" id="listBtn" />
</body>

anboardList.jsp (바뀐거없음)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
	border-collapse: collapse;
}

th, td {
	border: 1px solid #000;
	padding: 5px;
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	if("${param.searchGbn}" != "") { // 검색구분이 넘어오면
		$("#searchGbn").val("${param.searchGbn}");	
	}
	
	if("${param.sortGbn}" == ""){
		$("#sortGbn").val("0");	
	}
	if("${param.sortGbn}" != "") { 
		$("#sortGbn").val("${param.sortGbn}");	
	}
	
	$("tbody").on("click", "tr", function () {
		console.log($(this).attr("no"));
		$("#no").val($(this).attr("no"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action","anboardDetail");
		$("#actionForm").submit();
	})
	
	$("#insertBtn").on("click", function () {
		location.href = "anboardInsert";
	});
	
	$("#pagingWrap").on("click", "span", function () {
		$("#page").val($(this).attr("page"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action","anboardList");
		$("#actionForm").submit();
	});
	
	$("#searchBtn").on("click", function () {
		// 검색하면 페이지는 무조건 1페이지로 감
		$("#page").val("1"); // 페이지 초기화
		
		$("#actionForm").attr("action","anboardList");
		$("#actionForm").submit();
	})
})

</script>
</head>
<body>
<!-- 기존 검색 내용 유지용 -->
<input type="hidden" id="oldGbn" value="${param.searchGbn}"/>
<input type="hidden" id="oldTxt" value="${param.searchTxt}"/>
<form action="anboardDetail" id="actionForm" method="post">
	<input type="hidden" id="no" name="no" />
	<input type="hidden" id="page" name="page" value="${page}" />  <!-- 상세보기 갈때 page 가져갈거임 -->
	<select name="sortGbn" id="sortGbn">
		<option value="0">번호순</option>
		<option value="1">제목순</option>
	</select>
	<br/>
	<!-- 검색 -->
	<select name="searchGbn" id="searchGbn">
		<option value="0">제목</option>
		<option value="1">작성자</option>
	</select>
	<input type="text" name="searchTxt" id="searchTxt" value="${param.searchTxt}"/> <!-- 검색어 유지되게, 그래야 페이징할떄도 유지됨 -->
	<input type="button" value="검색" id="searchBtn" />
	<input type="button" value="추가" id="insertBtn" />
</form>

<table>
	<thead>
		<tr>
			<th>번호</th>
			<th>제목</th>
			<th>작성자</th>
			<th>조회수</th>
			<th>작성일</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach var="data" items="${list}">
			<tr no="${data.NO}">
				<td>${data.NO}</td>
				<td>${data.TITLE}</td>
				<td>${data.WRITER}</td>
				<td>${data.HIT}</td>
				<td>${data.DT}</td>
			</tr>
		</c:forEach>
	</tbody>
</table>
<div id="pagingWrap">
<span page="1">처음</span>
<!-- 이전은 현재페이지에서 하나 전, 
지금 1페이지인지 아닌지 먼저 체크 따라서, 현재페이지 필요-->
<!-- 이전페이지 : 현제페이지가 1이면 1로 이동 아니면 현제페이지 -1 -->
<c:choose>
	<c:when test="${page eq 1}">
		<span page="1">이전</span>
	</c:when>
	<c:otherwise>
		<span page="${page - 1}">이전</span>
	</c:otherwise>
</c:choose>
<!-- 페이지들 -->
<c:forEach var="i" begin="${pd.startP}" end="${pd.endP}" step="1">
	<%-- 현재 페이지의 경우 별도 처리 --%>
	<c:choose>
		<c:when test="${i eq page}"> <%-- 현재페이지 --%>
			<span page="${i}"><b>${i}</b></span>
		</c:when>
		<c:otherwise> <%-- 다른페이지 --%>
			<span page="${i}">${i}</span>
		</c:otherwise>
	</c:choose>
</c:forEach>

<!-- 다음페이지 : 마지막에 도달했을때는 증가하지 않고, 다른 경우는 +1 -->
<c:choose>
	<c:when test="${page eq pd.maxP}">
		<span page="${pd.maxP}">다음</span>
	</c:when>
	<c:otherwise>
		<span page="${page + 1}">다음</span>
	</c:otherwise>
</c:choose>

<span page="${pd.maxP}">마지막</span>
</div>
</body>
</html>

anboardRes.jsp (param.gbn 부분 변경됨)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	switch("${res}"){
	case "success" : 
		if("${param.gbn}" == "u"){ // 수정이 성공했을 떄
			$("#goForm").submit();
		} else { // 등록, 삭제가 성공했을 떄
			location.href = "anboardList" 
		}
		break;
	case "failed" : 
		alert("작업에 실패하였습니다.");
		history.back();
		break;
	case "error" : 
		alert("작업중 문제가 발생 하였습니다.");
		history.back();
		break;
	}
});
</script>
</head>
<body>
<form action="anboardDetail" id="goForm" method="post">
	<input type="hidden" name="no" value="${param.no}" />
	<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
		<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
	<input type="hidden" name="sortTxt" value="${param.sortTxt}"/>
</form>
</body>
</html>

anboardUpdate.jsp (CKEDITOR 사용부분만 변경)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="resources/script/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 에디터 연결
	// CKEDITOR.replace(아이디, 옵션)
	CKEDITOR.replace("con", {
		resize_enabled: false, // resize_enabled : 크기조절기능 활용여부
		language : "ko", // 사용언어
		enterMode: "2", // 엔터키처리방법. 2번이면 <br/>
		width : 600, // 숫자일경우 px, 문자열일경우 css크기
		height : 400
	});
	
	$("#listBtn").on("click", function () {
		history.back();
	});
	
	$("#updateBtn").on("click", function () {
		// CKEditor의 값 취득
		// CKEDITOR.instances[아이디] : CKEditor중 아이디가 같은 것을 찾겠다.
		//.getData() : 작성중인 내용을 취득하겠다.
		$("#con").val(CKEDITOR.instances['con'].getData());
		
		
		if($("#title").val() == ""){
			alert("제목을 입력하세요");
			$("#title").focus();
		} else if($("#writer").val() == ""){
			alert("작성자를 입력하세요");
			$("#writer").focus();
		} else if($("#con").val() == ""){
			alert("내용을 입력하세요");
			$("#con").focus();
		} else {
			$("#actionForm").submit();
		}
	});
});

</script>
</head>
<body>
<!-- 번호는 시퀀스 쓸거기 때문에 받을 필요없음, 보여줄 필요 없음, 저장되야 글번호 보여지지 -->
<!-- select 전달하기 위해  name줘야함 -->
<!-- option value 지정해줘야함! -->
<form action="anboardRes" id="actionForm" method="post">
<!-- gbn : 구분, 혹은 flag -->
<!-- 구분: i - insert, u - update, d - delete -->
<input type="hidden" name="gbn" value="u"/>
<input type="hidden" name="no" value="${data.NO}"/> <!-- 이 번호만 수정해라라는 조건 달기위해 필요 -->
<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
<!-- 전 화면에서 넘어온 검색 정보 -->
<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
<input type="hidden" name="sortTxt" value="${param.sortTxt}"/>
제목 
<input type="text" name="title" id="title" value="${data.TITLE}"/>
<br />
작성자 
<input type="text" name="writer" id="writer" value="${data.WRITER}"/>
<br/>
내용 
<textarea name="con" id="con">${data.CON}</textarea>
<br />
</form>
<input type="button" value="수정" id="updateBtn">
<input type="button" value="뒤로가기" id="listBtn">
</body>
</html>

mem테이블 실습

아직 강사님이 리뷰전, 내가 한 코드

MemController.java

package com.spring.sample.web.test.controller;

import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import com.spring.sample.common.service.IPagingService;
import com.spring.sample.web.test.service.ITestService2;

@Controller
public class MemController {
	@Autowired
	public ITestService2 iTestService2;

	@Autowired
	public IPagingService ips; // 페이징 서비스 객체 주입

	// MEM테이블 글 목록
	@RequestMapping(value = "/memList")
	public ModelAndView memList(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		// 현재페이지
		int page = 1;

		// 넘어오는 페이지 셋팅
		if (params.get("page") != null && params.get("page") != "") {
			page = Integer.parseInt(params.get("page")); // 받아온 페이지 할당
		}

		// 총 데이터 개수 취득
		int cnt = iTestService2.getMemCnt(params);

		// 페이징 데이터 계산
		// ips.getPagingData(page, maxCount, viewCnt, pageCnt)
		HashMap<String, Integer> pd = ips.getPagingData(page, cnt, 3, 2);

		// 파라미터에 시작, 종료값 추가
		// 한쪽으로 필요 데이터를 몰았다?
		params.put("start", Integer.toString(pd.get("start")));
		params.put("end", Integer.toString(pd.get("end")));

		// 데이터 취득
		List<HashMap<String, String>> list = iTestService2.getMemList(params);

		// 목록 데이터
		mav.addObject("list", list);
		// 페이징 정보
		mav.addObject("pd", pd);
		// 현재 페이지
		mav.addObject("page", page);
		mav.setViewName("test/memList");

		return mav;
	}

	@RequestMapping(value = "/memDetail")
	public ModelAndView anboardDetail(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		if (params.get("no") == null || params.get("no") == "") {
			mav.setViewName("redirect:anboardList");

		} else {
			HashMap<String, String> data = iTestService2.getMem(params);

			mav.addObject("data", data);
			mav.setViewName("test/memDetail");
		}

		return mav;
	}

	@RequestMapping(value = "/memInsert")
	public ModelAndView memInsert(ModelAndView mav) {
		mav.setViewName("test/memInsert");
		return mav;
	}

	@RequestMapping(value = "/memRes")
	public ModelAndView memInsertRes(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		try {
			int cnt = 0;

			switch (params.get("gbn")) {
			case "i":
				cnt = iTestService2.insertMem(params);
				break;
			case "u":
				cnt = iTestService2.updateMem(params);
				break;
			case "d":
				cnt = iTestService2.deleteMem(params);
				break;
			}

			if (cnt > 0) {
				mav.addObject("res", "success");
			} else {
				mav.addObject("res", "failded");
			}
		} catch (Exception e) {
			e.printStackTrace();
			mav.addObject("res", "error");
		}
		mav.setViewName("test/memRes");
		return mav;
	}

	@RequestMapping(value = "/memUpdate")
	public ModelAndView bookUpdate(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		// 기존데이터 조회해와야함

		System.out.println(params.toString());

		HashMap<String, String> data = iTestService2.getMem(params);
		mav.addObject("data", data);

		mav.setViewName("test/memUpdate");

		return mav;

	}

}

ITestService2.java

package com.spring.sample.web.test.service;

import java.util.HashMap;
import java.util.List;

public interface ITestService2 {

	public List<HashMap<String, String>> getMemList(HashMap<String, String> params) throws Throwable;

	public int getMemCnt(HashMap<String, String> params) throws Throwable;

	public HashMap<String, String> getMem(HashMap<String, String> params) throws Throwable;

	public int insertMem(HashMap<String, String> params) throws Throwable;

	public int updateMem(HashMap<String, String> params) throws Throwable;

	public int deleteMem(HashMap<String, String> params) throws Throwable;

}

TestService2.java

package com.spring.sample.web.test.service;

import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.spring.sample.web.test.dao.ITestDao2;

@Service
public class TestService2 implements ITestService2 {
	@Autowired
	public ITestDao2 iTestDao2;

	@Override
	public List<HashMap<String, String>> getMemList(HashMap<String, String> params) throws Throwable {
		return iTestDao2.getMemList(params);
	}

	@Override
	public int getMemCnt(HashMap<String, String> params) throws Throwable {
		return iTestDao2.getMemCnt(params);
	}

	@Override
	public HashMap<String, String> getMem(HashMap<String, String> params) throws Throwable {
		return iTestDao2.getMem(params);
	}

	@Override
	public int insertMem(HashMap<String, String> params) throws Throwable {
		return iTestDao2.insertMem(params);
	}

	@Override
	public int updateMem(HashMap<String, String> params) throws Throwable {
		return iTestDao2.updateMem(params);
	}

	@Override
	public int deleteMem(HashMap<String, String> params) throws Throwable {
		return iTestDao2.deleteMem(params);
	}

}

ITestDao2.java

package com.spring.sample.web.test.dao;

import java.util.HashMap;
import java.util.List;

public interface ITestDao2 {

	public List<HashMap<String, String>> getMemList(HashMap<String, String> params);

	public int getMemCnt(HashMap<String, String> params) throws Throwable;

	public HashMap<String, String> getMem(HashMap<String, String> params) throws Throwable;

	public int insertMem(HashMap<String, String> params) throws Throwable;

	public int updateMem(HashMap<String, String> params) throws Throwable;

	public int deleteMem(HashMap<String, String> params) throws Throwable;

}

TestDao2.java

package com.spring.sample.web.test.dao;

import java.util.HashMap;
import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class TestDao2 implements ITestDao2 {
	@Autowired
	public SqlSession sqlSession;

	@Override
	public List<HashMap<String, String>> getMemList(HashMap<String, String> params) {
		return sqlSession.selectList("mem.getMemList", params);
	}

	@Override
	public int getMemCnt(HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne("mem.getMemCnt", params);
	}

	@Override
	public HashMap<String, String> getMem(HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne("mem.getMem", params);
	}

	@Override
	public int insertMem(HashMap<String, String> params) throws Throwable {
		return sqlSession.insert("mem.insertMem", params);
	}

	@Override
	public int updateMem(HashMap<String, String> params) throws Throwable {
		return sqlSession.update("mem.updateMem", params);
	}

	@Override
	public int deleteMem(HashMap<String, String> params) throws Throwable {
		return sqlSession.delete("mem.deleteMem", params);
	}

}

Mem_SQLxml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- namespace : 클래스와 동일, 이 파일의 대표명 -->
<mapper namespace="mem">
	<!-- select : 조회 
		id: 구분자, 메소드명과 동일
		resultType : 조회 결과 중 한줄에 대한 자료 형태를 지정
		hashmap: mybatis-config.xml에서 별칭 지정해놔서 줄여쓸수있는거임
		쿼리 삽입시 주의사항: ;이 있는경우 문제가 발생한다. 이유는 해당 쿼리 실행시 자동으로 추가되기 때문
	-->
	<select id="getMemList" resultType="hashmap" parameterType="hashmap">
		SELECT S.MEM_NO, S.MEM_ID, S.MEM_NM, S.REG_DT
		FROM (SELECT MEM_NO, MEM_ID, MEM_NM, TO_CHAR(REG_DT,'YYYY-MM-DD') AS REG_DT,
       		  ROW_NUMBER() OVER(ORDER BY REG_DT DESC, MEM_NO DESC) AS RNK
			  FROM MEM
			  WHERE DEL = 1
			<if test="searchTxt != null and searchTxt != ''"> <!-- 검색어가 있다면 -->
				<choose>
					<when test="searchGbn == 0"> <!-- 품목 -->
						AND MEM_ID LIKE '%' || #{searchTxt} || '%'
					</when>
					<when test="searchGbn == 1"> <!-- 수량 -->
						AND MEM_NM = #{searchTxt}
					</when>
				</choose>
			</if>
             ) S
		WHERE S.RNK BETWEEN #{start} AND #{end}
	</select>
	
	<!-- 
		parameterType : 실행시 받는 값 
		#{키} : 헤당위치에 문자열로 키에 해당하는 값을 넣어준다
		ex) no에 3이 들어있는 경우
		WHERE SELL_NO = #{no}
		=> WHERE SELL_NO = '3' // 문자열이기 때문에  ' '이 들어감
		parameterType dao받는값, resultType값이 db실행결과
	-->
	<select id="getMem" resultType="hashmap" parameterType="hashmap">
		SELECT MEM_NO, MEM_ID, MEM_NM, TO_CHAR(MEM_BIRTH,'YYYY-MM-DD') AS MEM_BIRTH, TO_CHAR(REG_DT,'YYYY-MM-DD') AS REG_DT
		FROM MEM
		WHERE MEM_NO = #{no}
	</select>
	
	<!-- insert는 resultType 이 없음 -->
	<insert id="insertMem" parameterType="hashmap">
		INSERT INTO MEM(MEM_NO, MEM_ID, MEM_PW, MEM_NM, MEM_BIRTH)
		VALUES(MEM_SEQ.NEXTVAL, #{memId}, #{memPw}, #{memNm}, #{memBirth})
	</insert>
	
	
	<update id="deleteMem" parameterType="hashmap">
		UPDATE MEM SET DEL = 0
		WHERE MEM_NO = #{no}
	</update>
	
	<update id="updateMem" parameterType="hashmap">
		UPDATE MEM SET MEM_ID = #{memId},
                MEM_NM = #{memNm},
                MEM_BIRTH = #{memBirth}
       	WHERE MEM_NO = #{no}
	</update>
	
	<select id="getMemCnt" parameterType="hashmap" resultType="Integer">
		SELECT COUNT(*) AS CNT 
		FROM MEM
		WHERE DEL = 1
		<if test="searchTxt != null and searchTxt != ''"> <!-- 검색어가 있다면 -->
			<choose>
				<when test="searchGbn == 0"> <!-- 품목 -->
					AND MEM_ID LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn == 1"> <!-- 수량 -->
					AND MEM_NM = #{searchTxt}
				</when>
			</choose>
		</if>
	</select>
	
	
</mapper>

memList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
	border-collapse: collapse;
}

th, td {
	border: 1px solid #000;
	padding: 5px;
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	if("${param.searchGbn}" != "") { // 검색구분이 넘어오면
		$("#searchGbn").val("${param.searchGbn}");	
	}
	
	$("tbody").on("click", "tr", function () {
		console.log($(this).attr("no"));
		$("#no").val($(this).attr("no"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action","memDetail");
		$("#actionForm").submit();
	})
	
	$("#insertBtn").on("click", function () {
		location.href = "memInsert";
	});
	
	$("#pagingWrap").on("click", "span", function () {
		$("#page").val($(this).attr("page"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action","memList");
		$("#actionForm").submit();
	});
	
	$("#searchBtn").on("click", function () {
		// 검색하면 페이지는 무조건 1페이지로 감
		$("#page").val("1"); // 페이지 초기화
		
		$("#actionForm").attr("action","memList");
		$("#actionForm").submit();
	})
})

</script>
</head>
<body>
<!-- 기존 검색 내용 유지용 -->
<input type="hidden" id="oldGbn" value="${param.searchGbn}"/>
<input type="hidden" id="oldTxt" value="${param.searchTxt}"/>
<form action="memDetail" id="actionForm" method="post">
	<input type="hidden" id="no" name="no" />
	<input type="hidden" id="page" name="page" value="${page}" />  <!-- 상세보기 갈때 page 가져갈거임 -->
	<br/>
	<!-- 검색 -->
	<select name="searchGbn" id="searchGbn">
		<option value="0">아이디</option>
		<option value="1">이름</option>
	</select>
	<input type="text" name="searchTxt" id="searchTxt" value="${param.searchTxt}"/> <!-- 검색어 유지되게, 그래야 페이징할떄도 유지됨 -->
	<input type="button" value="검색" id="searchBtn" />
	<input type="button" value="추가" id="insertBtn" />
</form>

<table>
	<thead>
		<tr>
			<th>번호</th>
			<th>아이디</th>
			<th>이름</th>
			<th>등록일</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach var="data" items="${list}">
			<tr no="${data.MEM_NO}">
				<td>${data.MEM_NO}</td>
				<td>${data.MEM_ID}</td>
				<td>${data.MEM_NM}</td>
				<td>${data.REG_DT}</td>
			</tr>
		</c:forEach>
	</tbody>
</table>
<div id="pagingWrap">
<span page="1">처음</span>
<!-- 이전은 현재페이지에서 하나 전, 
지금 1페이지인지 아닌지 먼저 체크 따라서, 현재페이지 필요-->
<!-- 이전페이지 : 현제페이지가 1이면 1로 이동 아니면 현제페이지 -1 -->
<c:choose>
	<c:when test="${page eq 1}">
		<span page="1">이전</span>
	</c:when>
	<c:otherwise>
		<span page="${page - 1}">이전</span>
	</c:otherwise>
</c:choose>
<!-- 페이지들 -->
<c:forEach var="i" begin="${pd.startP}" end="${pd.endP}" step="1">
	<%-- 현재 페이지의 경우 별도 처리 --%>
	<c:choose>
		<c:when test="${i eq page}"> <%-- 현재페이지 --%>
			<span page="${i}"><b>${i}</b></span>
		</c:when>
		<c:otherwise> <%-- 다른페이지 --%>
			<span page="${i}">${i}</span>
		</c:otherwise>
	</c:choose>
</c:forEach>

<!-- 다음페이지 : 마지막에 도달했을때는 증가하지 않고, 다른 경우는 +1 -->
<c:choose>
	<c:when test="${page eq pd.maxP}">
		<span page="${pd.maxP}">다음</span>
	</c:when>
	<c:otherwise>
		<span page="${page + 1}">다음</span>
	</c:otherwise>
</c:choose>

<span page="${pd.maxP}">마지막</span>
</div>
</body>
</html>

memDetail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" 
		src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#listBtn").on("click", function() {
		$("#actionForm").attr("action","memList"); 
		$("#actionForm").submit();
	});
	
	$("#deleteBtn").on("click", function () {
		if(confirm("삭제하시곘습니까?")){
			$("#actionForm").attr("action","memRes"); 
			$("#actionForm").submit();
		}
	})
	
	$("#updateBtn").on("click", function () {
		$("#actionForm").attr("action","memUpdate");
		$("#actionForm").submit();
	});
});

</script>
</head>
<body>
<form action="#" id="actionForm" method="post">
	<input type="hidden" name="gbn" value="d"> <!-- selRes는 gbn을 받게 되어있어서 값을 추가해줘야함 -->
	<input type="hidden" name="no" value="${data.MEM_NO}">
	<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
		<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>	
번호: ${data.MEM_NO}<br/>
아이디: ${data.MEM_ID}<br/>
이름: ${data.MEM_NM}<br/>
생년월일: ${data.MEM_BIRTH}<br/>
등록일: ${data.REG_DT}<br/>
<input type="button" value="수정" id="updateBtn" />
<input type="button" value="삭제" id="deleteBtn" />
<input type="button" value="목록" id="listBtn" />
</body>

memInsert.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<!-- CKEditor -->
<!-- 제이쿼리 뒤에 나와야함, 제이쿼리 기반으로 동작하기 때문에 -->
<script type="text/javascript" src="resources/script/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	$("#listBtn").on("click", function () {
		$("#backForm").submit();
	});
	
	$("#insertBtn").on("click", function () {
	
		// $.trim(값) : 값 앞 뒤 공백제거	
		if($.trim($("#memId").val()) == ""){
			alert("아이디 입력하세요");
			$("#memId").focus();
		} else if($.trim($("#memPw").val()) == ""){
			alert("비밀번호를 입력하세요");
			$("#memPw").focus();
		}  else if($.trim($("#memNm").val()) == ""){
			alert("이름을 입력하세요");
			$("#memNm").focus();
		} else if($.trim($("#memBirth").val()) == ""){
			alert("생년월일을 입력하세요");
			$("#memBirth").focus();
		} else {
			$("#actionForm").submit();
		}
	});
});

</script>
</head>
<body>
<form action="memList" id="backForm" method="post">
	<input type="hidden" name="page" value="${param.page}" />
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
<form action="memRes" id="actionForm" method="post">
<!-- gbn : 구분, 혹은 flag
구분: i - insert, u - update, d - delete -->
<input type="hidden" name="gbn" value="i"/>
아이디 
<input type="text" name="memId" id="memId" />
<br />
비밀번호 
<input type="password" name="memPw" id="memPw" />
<br />
이름
<input type="text" name="memNm" id="memNm" />
<br/>
생년월일
<input type="date" name="memBirth" id="memBirth" />
<br/>
</form>  
<input type="button" value="등록" id="insertBtn">
<input type="button" value="목록" id="listBtn">
</body>
</html>

memRes.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	switch("${res}"){
	case "success" : 
		if("${param.gbn}" == "u"){ 
			$("#goForm").submit();
		} else {
			location.href = "memList" 
		}
		break;
	case "failed" : 
		alert("작업에 실패하였습니다.");
		history.back();
		break;
	case "error" : 
		alert("작업중 문제가 발생 하였습니다.");
		history.back();
		break;
	}
});
</script>
</head>
<body>
<form action="memDetail" id="goForm" method="post">
	<input type="hidden" name="no" value="${param.no}" /> 
</form>
</body>
</html>

memUpdate.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#listBtn").on("click", function () {
		history.back();
	});
	
	$("#updateBtn").on("click", function () {

		// $.trim(값) : 값 앞 뒤 공백제거	
		if($.trim($("#memId").val()) == ""){
			alert("아이디 입력하세요");
			$("#memId").focus();
		}  else if($.trim($("#memNm").val()) == ""){
			alert("이름을 입력하세요");
			$("#memNm").focus();
		} else if($.trim($("#memBirth").val()) == ""){
			alert("생년월일을 입력하세요");
			$("#memBirth").focus();
		} else {
			$("#actionForm").submit();
		}
	});
});

</script>
</head>
<body>
<form action="memRes" id="actionForm" method="post">
<input type="hidden" name="gbn" value="u"/>
<input type="hidden" name="no" value="${data.MEM_NO}"/> 
아이디 
<input type="text" name="memId" id="memId" value="${data.MEM_ID}"/>
<br />
이름
<input type="text" name="memNm" id="memNm"  value="${data.MEM_NM}"/>
<br/>
생년월일
<input type="date" name="memBirth" id="memBirth" value="${data.MEM_BIRTH}"/>
<br/>
</form>
<input type="button" value="수정" id="updateBtn">
<input type="button" value="뒤로가기" id="listBtn">
</body>
</html>

국비 TIL(Today I Learned) 20220810 검색하기, sell, manager, anboard테이블

토희 — Wed, 10 Aug 2022 17:51:27 +0900

어제 한거 복습

우리는 어제 이렇게 썼지만,

마리아DB limit쓰면 행 갯수 제한할수도 있음

페이지 추가 후

검색 구현

sellList.jsp

params에는 4개가 들어있음 no, page, searchGbn, searchTxt

쿼리작성

Dynamic Query(동적 쿼리) : 조건에 따라 쿼리의 형태가 변경되는 쿼리

-> 태그로 구현

iBatis와 MyBatis의 경우 기능은 유사하나 이름과 형태가 다소 틀림(우리는 지금 MyBatis 쓰고 있음)

iBatis가 좀더 직관적이래, MyBatis의 경우 코어태그와 형태가 동일

el태그가 없어 c가 없음

getSellCnt, getSellList 두군데에 쿼리 변경

WHERE 1=1 대신 상시 조건을 WHERE구문에 넣어주면 돼

예를 들어 이제 삭제를 실제 삭제 안하고, 업데이트로 한다음 삭제 안된 데이터들만 보여주걸래 화면에는(DB에는 삭제한 데이터도 있고) 그럴때 삭제 안된 데이터들만 보여주는 조건을 WHERE 1=1 쓰면 된데

sellList.jsp

sellDetail.jsp

sellUpdate.jsp

sellRes.jsp

Res부분

검색 기능 잘 작동

검색정보 추가후

오늘은 jsp랑 쿼리만 수정함

manager테이블 실습

managerList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
	border-collapse: collapse;
}

th, td {
	border: 1px solid #000;
	padding: 5px;
}

#pagingWrap span{
	cursor: pointer;
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	if("${param.searchGbn}" != "") { // 검색구분이 넘어오면
		$("#searchGbn").val("${param.searchGbn}");	
	}
	
	$("tbody").on("click", "tr", function () {
		console.log($(this).attr("no"));
		$("#no").val($(this).attr("no"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action","managerDetail");
		$("#actionForm").submit();
	})
	
	$("#insertBtn").on("click", function () {
		location.href = "managerInsert";
	});
	
	$("#pagingWrap").on("click", "span", function () {
		$("#page").val($(this).attr("page"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action","managerList");
		$("#actionForm").submit();
	});
	

	$("#searchBtn").on("click", function () {
		// 검색하면 페이지는 무조건 1페이지로 감
		$("#page").val("1"); // 페이지 초기화
		
		$("#actionForm").attr("action","managerList");
		$("#actionForm").submit();
	})
	
})

</script>
</head>
<body>
<!-- 기존 검색 내용 유지용 -->
<input type="hidden" id="oldGbn" value="${param.searchGbn}"/>
<input type="hidden" id="oldTxt" value="${param.searchTxt}"/>
<form action="#" id="actionForm" method="post">
	<input type="hidden" id="no" name="no" />
	<input type="hidden" id="page" name="page" value="${page}" />
	<select name="searchGbn" id="searchGbn">
		<option value="0">이름</option>
		<option value="1">부서</option>
	</select>
	<input type="text" name="searchTxt" id="searchTxt" value="${param.searchTxt}"/> <!-- 검색어 유지되게, 그래야 페이징할떄도 유지됨 -->
	<input type="button" value="검색" id="searchBtn" />
	<input type="button" value="추가" id="insertBtn" />
</form>
<table>
	<thead>
		<tr>
			<th>사원번호</th>
			<th>이름</th>
			<th>부서</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach var="data" items="${list}">
			<tr no="${data.EMP_NO}">
				<td>${data.EMP_NO}</td>
				<td>${data.NAME}</td>
				<td>${data.DEPT}</td>
			</tr>
		</c:forEach>
	</tbody>
</table>
<div id="pagingWrap">
<span page="1">처음</span>
<!-- 이전은 현재페이지에서 하나 전, 
지금 1페이지인지 아닌지 먼저 체크 따라서, 현재페이지 필요-->
<!-- 이전페이지 : 현제페이지가 1이면 1로 이동 아니면 현제페이지 -1 -->
<c:choose>
	<c:when test="${page eq 1}">
		<span page="1">이전</span>
	</c:when>
	<c:otherwise>
		<span page="${page - 1}">이전</span>
	</c:otherwise>
</c:choose>
<!-- 페이지들 -->
<c:forEach var="i" begin="${pd.startP}" end="${pd.endP}" step="1">
	<%-- 현재 페이지의 경우 별도 처리 --%>
	<c:choose>
		<c:when test="${i eq page}"> <%-- 현재페이지 --%>
			<span page="${i}"><b>${i}</b></span>
		</c:when>
		<c:otherwise> <%-- 다른페이지 --%>
			<span page="${i}">${i}</span>
		</c:otherwise>
	</c:choose>
</c:forEach>

<!-- 다음페이지 : 마지막에 도달했을때는 증가하지 않고, 다른 경우는 +1 -->
<c:choose>
	<c:when test="${page eq pd.maxP}">
		<span page="${pd.maxP}">다음</span>
	</c:when>
	<c:otherwise>
		<span page="${page + 1}">다음</span>
	</c:otherwise>
</c:choose>

<span page="${pd.maxP}">마지막</span>
</div>
</body>
</html>

Test_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- namespace : 클래스와 동일, 이 파일의 대표명 -->
<mapper namespace="test">
	
	<select id="getManagerList" resultType="hashmap" parameterType="hashmap">
		SELECT S.EMP_NO, S.NAME, S.DEPT
		FROM(SELECT EMP_NO, NAME, DEPT,
		ROW_NUMBER() OVER(ORDER BY EMP_NO DESC) AS RNK
		FROM MANAGER
		WHERE 1 =1
		<if test="searchTxt != null and searchTxt != ''"> 
			<choose>
				<when test="searchGbn == 0">
					AND NAME LIKE '%' || #{searchTxt}|| '%'
				</when>
				<when test="searchGbn == 1">
					AND DEPT LIKE '%' || #{searchTxt} || '%'
				</when>
			</choose>
		</if>
		) S
		WHERE S.RNK BETWEEN #{start} AND #{end}
	</select>

	<select id="getManager" resultType="hashmap" parameterType="hashmap">
		SELECT EMP_NO, NAME, DEPT
		FROM MANAGER
		WHERE EMP_NO = #{no}
	</select>
	
	<insert id="insertManager" parameterType="hashmap">
		INSERT INTO MANAGER(EMP_NO, NAME, DEPT)
		VALUES(MANAGER_SEQ.NEXTVAL, #{name}, #{deptName})
	</insert>
	
	<delete id="deleteManager" parameterType="hashmap">
		DELETE FROM MANAGER
		WHERE EMP_NO = #{no}
	</delete>
	
	<update id="updateManager" parameterType="hashmap">
		UPDATE MANAGER SET NAME = #{name},
                DEPT = #{deptName}
                WHERE EMP_NO = #{no}
	</update>
	
	
	<select id="getManagerCnt" parameterType="hashmap" resultType="Integer">
		SELECT COUNT(*) AS CNT 
		FROM MANAGER
		WHERE 1 =1
		<if test="searchTxt != null and searchTxt != ''"> 
			<choose>
				<when test="searchGbn == 0">
					AND NAME LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn == 1">
					AND DEPT LIKE '%' || #{searchTxt} || '%'
				</when>
			</choose>
		</if>
	</select>

	
</mapper>

managerDetail, managerUpdate, managerRes

<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>

이거 붙여주기

테이블 새로 만들기

시퀀스 이름: ANBOARD_SEQ

sellList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
	border-collapse: collapse;
}

th, td {
	border: 1px solid #000;
	padding: 5px;
}

#pagingWrap span{
	cursor: pointer;
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	if("${param.searchGbn}" != "") { // 검색구분이 넘어오면
		$("#searchGbn").val("${param.searchGbn}");	
	}
	
	$("tbody").on("click", "tr", function () {
		console.log($(this).attr("no"));
		$("#no").val($(this).attr("no"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action","sellDetail");
		$("#actionForm").submit();
	})
	
	$("#insertBtn").on("click", function () {
		location.href = "sellInsert";
	});
	
	
	$("#pagingWrap").on("click", "span", function () {
		$("#page").val($(this).attr("page"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		
		$("#actionForm").attr("action","sellList");
		$("#actionForm").submit();
	});
	
	$("#searchBtn").on("click", function () {
		// 검색하면 페이지는 무조건 1페이지로 감
		$("#page").val("1"); // 페이지 초기화
		
		$("#actionForm").attr("action","sellList");
		$("#actionForm").submit();
	})
	
});

</script>
</head>
<body>
<!-- 기존 검색 내용 유지용 -->
<input type="hidden" id="oldGbn" value="${param.searchGbn}"/>
<input type="hidden" id="oldTxt" value="${param.searchTxt}"/>
<form action="#" id="actionForm" method="post">
	<input type="hidden" id="no" name="no" /> 
	<input type="hidden" id="page" name="page" value="${page}" />  <!-- 상세보기 갈때 page 가져갈거임 -->
	<select name="searchGbn" id="searchGbn">
		<option value="0">품목</option>
		<option value="1">수량</option>
	</select>
	<input type="text" name="searchTxt" id="searchTxt" value="${param.searchTxt}"/> <!-- 검색어 유지되게, 그래야 페이징할떄도 유지됨 -->
	<input type="button" value="검색" id="searchBtn" />
	<input type="button" value="추가" id="insertBtn" />
</form>

<br />
<table>
	<thead>
		<tr>
			<th>판매번호</th>
			<th>품목</th>
			<th>수량</th>
			<th>일자</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach var="data" items="${list}">
			<tr no="${data.SELL_NO}">
				<td>${data.SELL_NO}</td>
				<td>${data.ITEM_NAME}</td>
				<td>${data.COUNT}</td>
				<td>${data.SELL_DT}</td>
			</tr>
		</c:forEach>
	</tbody>
</table>
<div id="pagingWrap">
<span page="1">처음</span>
<!-- 이전은 현재페이지에서 하나 전, 
지금 1페이지인지 아닌지 먼저 체크 따라서, 현재페이지 필요-->
<!-- 이전페이지 : 현제페이지가 1이면 1로 이동 아니면 현제페이지 -1 -->
<c:choose>
	<c:when test="${page eq 1}">
		<span page="1">이전</span>
	</c:when>
	<c:otherwise>
		<span page="${page - 1}">이전</span>
	</c:otherwise>
</c:choose>
<!-- 페이지들 -->
<c:forEach var="i" begin="${pd.startP}" end="${pd.endP}" step="1">
	<%-- 현재 페이지의 경우 별도 처리 --%>
	<c:choose>
		<c:when test="${i eq page}"> <%-- 현재페이지 --%>
			<span page="${i}"><b>${i}</b></span>
		</c:when>
		<c:otherwise> <%-- 다른페이지 --%>
			<span page="${i}">${i}</span>
		</c:otherwise>
	</c:choose>
</c:forEach>

<!-- 다음페이지 : 마지막에 도달했을때는 증가하지 않고, 다른 경우는 +1 -->
<c:choose>
	<c:when test="${page eq pd.maxP}">
		<span page="${pd.maxP}">다음</span>
	</c:when>
	<c:otherwise>
		<span page="${page + 1}">다음</span>
	</c:otherwise>
</c:choose>

<span page="${pd.maxP}">마지막</span>
</div>
</body>
</html>

sellDetail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" 
		src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#listBtn").on("click", function() {
		$("#actionForm").attr("action","sellList"); 
		$("#actionForm").submit();
	});
	
	$("#deleteBtn").on("click", function () {
		if(confirm("삭제하시곘습니까?")){
			$("#actionForm").attr("action","sellRes"); 
			$("#actionForm").submit();
		}
	})
	
	$("#updateBtn").on("click", function () {
		$("#actionForm").attr("action","sellUpdate");
		$("#actionForm").submit();
	});
});

</script>
</head>
<body>
<!-- form action에서 #은 아무런 이동을 하지 않는다. -->
<form action="#" id="actionForm" method="post">
<!-- 상세보기에서는 삭제만 쓸거니 d를 박아줘도 됨, 수정이면 수정페이지로 이동할거니 -->
<!-- 이 페이지에서 수정도 같이하면 value에 값 비어두기 -->
	<input type="hidden" name="gbn" value="d" /> <!-- selRes는 gbn을 받게 되어있어서 값을 추가해줘야함 -->
	<input type="hidden" name="no" value="${data.SELL_NO}" /> <!-- 삭제하기위해  번호 보내주기 -->
	 <!-- 전 화면에서 넘어온 페이지 정보 -->
	<input type="hidden" name="page" value="${param.page}" />
	<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>	
	판매번호: ${data.SELL_NO}<br/>
	품목: ${data.ITEM_NAME}<br/>
	수량: ${data.COUNT}<br/>
	일자: ${data.SELL_DT}<br/>
<input type="button" value="수정" id="updateBtn" />
<input type="button" value="삭제" id="deleteBtn" />
<input type="button" value="목록" id="listBtn" />
</body>
</html>

sellInsert.jsp(Insert는 변동사항 없음)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#listBtn").on("click", function () {
		history.back();
	});
	
	$("#insertBtn").on("click", function () {
		if($("#count").val() == ""){
			alert("수량을 입력하세요");
			$("#count").focus();
		} else if($("#count").val()*1 < 1){ // 문자열이기 때문에 *1 해줘야 숫자로 바뀜
			alert("수량은 1개 이상이어야 합니다");
			$("#count").focus();
		}
		else if($("#sellDt").val() == ""){
			alert("일자를 입력하세요");
			$("#sellDt").focus();
		} else {
			$("#actionForm").submit();
		}
	});
});

</script>
</head>
<body>
<!-- 번호는 시퀀스 쓸거기 때문에 받을 필요없음, 보여줄 필요 없음, 저장되야 글번호 보여지지 -->
<!-- select 전달하기 위해  name줘야함 -->
<!-- option value 지정해줘야함! -->
<form action="sellRes" id="actionForm" method="post">
<!-- gbn : 구분, 혹은 flag -->
<!-- 구분: i - insert, u - update, d - delete -->
<input type="hidden" name="gbn" value="i"/>
품목명
<select name="itemName">
	<option value="감자">감자</option>
	<option value="고구마">고구마</option>
	<option value="애호박">애호박</option>
	<option value="호박">호박</option>
	<option value="호박고구마">호박고구마</option>
</select>
<br />
수량 <input type="number" name="count" id="count" value="0" />
<br />
일자 <input type="date" name="sellDt" id="sellDt" />
<br />
</form>
<input type="button" value="등록" id="insertBtn">
<input type="button" value="목록" id="listBtn">
</body>
</html>

sellRes.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	// el tag를 script에서 사용시
	// 해당 위치에 값이 그대로 들어가기 때문에 보편적으로 ''를 달아서 문자열로 인식시킨 뒤 사용
	// ${res}해서  success가 들어올경우, success 이렇게되면 변수로 인식되서 "success" 이렇게 인식되게
	// "${res}"로 써줌
	switch("${res}"){
	case "success" : 
		if("${param.gbn}" == "u"){ // 수정이 성공했을 떄
			$("#goForm").submit();
		} else { // 등록, 삭제가 성공했을 떄
			location.href = "sellList" 
		}
		break;
	case "failed" : 
		alert("작업에 실패하였습니다.");
		history.back();
		break;
	case "error" : 
		alert("작업중 문제가 발생 하였습니다.");
		history.back();
		break;
	}
});
</script>
</head>
<body>
<form action="sellDetail" id="goForm" method="post">
	<input type="hidden" name="no" value="${param.no}" /> <!-- 전 화면에서 넘어오니까 param.no -->
	<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
	<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
</body>
</html>

sellUpdate.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 기존값으로 셀렉트박스 선택 내용 변경
	$("#itemName").val("${data.ITEM_NAME}");
	
	$("#listBtn").on("click", function () {
		history.back();
	});
	
	$("#updateBtn").on("click", function () {
		if($("#count").val() == ""){
			alert("수량을 입력하세요");
			$("#count").focus();
		} else if($("#count").val()*1 < 1){ // 문자열이기 때문에 *1 해줘야 숫자로 바뀜
			alert("수량은 1개 이상이어야 합니다");
			$("#count").focus();
		}
		else if($("#sellDt").val() == ""){
			alert("일자를 입력하세요");
			$("#sellDt").focus();
		} else {
			$("#actionForm").submit();
		}
	});
});

</script>
</head>
<body>
<!-- 번호는 시퀀스 쓸거기 때문에 받을 필요없음, 보여줄 필요 없음, 저장되야 글번호 보여지지 -->
<!-- select 전달하기 위해  name줘야함 -->
<!-- option value 지정해줘야함! -->
<form action="sellRes" id="actionForm" method="post">
<!-- gbn : 구분, 혹은 flag -->
<!-- 구분: i - insert, u - update, d - delete -->
<input type="hidden" name="gbn" value="u"/>
<input type="hidden" name="no" value="${data.SELL_NO}"/> <!-- 이 번호만 수정해라라는 조건 달기위해 필요 -->
<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
<!-- 전 화면에서 넘어온 검색 정보 -->
<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
판매번호 : ${data.SELL_NO}<br/>
품목명
<select name="itemName" id="itemName">
	<option value="감자">감자</option>
	<option value="고구마">고구마</option>
	<option value="애호박">애호박</option>
	<option value="호박">호박</option>
	<option value="호박고구마">호박고구마</option>
</select>
<br />
수량 <input type="number" name="count" id="count" value="${data.COUNT}" />
<br />
일자 <input type="date" name="sellDt" id="sellDt" value="${data.SELL_DT}" />
<br />
</form>
<input type="button" value="수정" id="updateBtn">
<input type="button" value="뒤로가기" id="listBtn">
</body>
</html>

Text_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- namespace : 클래스와 동일, 이 파일의 대표명 -->
<mapper namespace="test">
	<!-- select : 조회 
		id: 구분자, 메소드명과 동일
		resultType : 조회 결과 중 한줄에 대한 자료 형태를 지정
		hashmap: mybatis-config.xml에서 별칭 지정해놔서 줄여쓸수있는거임
		쿼리 삽입시 주의사항: ;이 있는경우 문제가 발생한다. 이유는 해당 쿼리 실행시 자동으로 추가되기 때문
	-->
	<select id="getSellList" resultType="hashmap" parameterType="hashmap">
		SELECT S.SELL_NO, S.ITEM_NAME, S.COUNT, S.SELL_DT
		FROM (SELECT SELL_NO, ITEM_NAME, COUNT, SELL_DT,
       		  ROW_NUMBER() OVER(ORDER BY SELL_DT DESC, SELL_NO DESC) AS RNK
			  FROM SELL
			  WHERE 1 = 1
			<if test="searchTxt != null and searchTxt != ''"> <!-- 검색어가 있다면 -->
				<choose>
					<when test="searchGbn == 0"> <!-- 품목 -->
						AND ITEM_NAME LIKE '%' || #{searchTxt} || '%'
					</when>
					<when test="searchGbn == 1"> <!-- 수량 -->
						AND COUNT = #{searchTxt}
					</when>
				</choose>
			</if>
             ) S
		WHERE S.RNK BETWEEN #{start} AND #{end}
	</select>
	
	<!-- 
		parameterType : 실행시 받는 값 
		#{키} : 헤당위치에 문자열로 키에 해당하는 값을 넣어준다
		ex) no에 3이 들어있는 경우
		WHERE SELL_NO = #{no}
		=> WHERE SELL_NO = '3' // 문자열이기 때문에  ' '이 들어감
		parameterType dao받는값, resultType값이 db실행결과
	-->
	<select id="getSell" resultType="hashmap" parameterType="hashmap">
		SELECT SELL_NO, ITEM_NAME, COUNT, SELL_DT
		FROM SELL
		WHERE SELL_NO = #{no}
	</select>
	
	<!-- insert는 resultType 이 없음 -->
	<insert id="insertSell" parameterType="hashmap">
		INSERT INTO SELL(SELL_NO, ITEM_NAME, COUNT, SELL_DT)
		VALUES(SELL_SEQ.NEXTVAL, #{itemName},#{count},#{sellDt})
	</insert>
	
	<delete id="deleteSell" parameterType="hashmap">
		DELETE FROM SELL
		WHERE SELL_NO = #{no}
	</delete>
	
	<update id="updateSell" parameterType="hashmap">
		UPDATE SELL SET ITEM_NAME = #{itemName},
                COUNT = #{count},
                SELL_DT = #{sellDt}
       	WHERE SELL_NO = #{no}
	</update>
	
	<select id="getManagerList" resultType="hashmap" parameterType="hashmap">
		SELECT S.EMP_NO, S.NAME, S.DEPT
		FROM(SELECT EMP_NO, NAME, DEPT,
		ROW_NUMBER() OVER(ORDER BY EMP_NO DESC) AS RNK
		FROM MANAGER
		WHERE 1 =1
		<if test="searchTxt != null and searchTxt != ''"> 
			<choose>
				<when test="searchGbn == 0">
					AND NAME LIKE '%' || #{searchTxt}|| '%'
				</when>
				<when test="searchGbn == 1">
					AND DEPT LIKE '%' || #{searchTxt} || '%'
				</when>
			</choose>
		</if>
		) S
		WHERE S.RNK BETWEEN #{start} AND #{end}
	</select>

	<select id="getManager" resultType="hashmap" parameterType="hashmap">
		SELECT EMP_NO, NAME, DEPT
		FROM MANAGER
		WHERE EMP_NO = #{no}
	</select>
	
	<insert id="insertManager" parameterType="hashmap">
		INSERT INTO MANAGER(EMP_NO, NAME, DEPT)
		VALUES(MANAGER_SEQ.NEXTVAL, #{name}, #{deptName})
	</insert>
	
	<delete id="deleteManager" parameterType="hashmap">
		DELETE FROM MANAGER
		WHERE EMP_NO = #{no}
	</delete>
	
	<update id="updateManager" parameterType="hashmap">
		UPDATE MANAGER SET NAME = #{name},
                DEPT = #{deptName}
                WHERE EMP_NO = #{no}
	</update>
	
	<select id="getDivsList" resultType="hashmap">
		SELECT DIV_CODE, DIV_NAME FROM DIVS ORDER BY DIV_CODE
	</select>
	
	<select id="getDivs" resultType="hashmap" parameterType="hashmap">
		SELECT DIV_CODE, DIV_NAME FROM DIVS
		WHERE DIV_CODE = #{no}
	</select>
	
	<insert id="insertDivs" parameterType="hashmap">
		INSERT INTO DIVS(DIV_CODE, DIV_NAME)
		VALUES((SELECT #{divCode} || LPAD(NVL(MAX(REPLACE(DIV_CODE, #{divCode}, '')),0) + 1,2,0 )
		FROM DIVS
		WHERE DIV_CODE LIKE #{divCode} || '%'), #{divName})
	</insert>
	
	<delete id="deleteDivs" parameterType="hashmap">
		DELETE FROM DIVS
		WHERE DIV_CODE = #{no}
	</delete>
	
	<update id="updateDivs" parameterType="hashmap">
		UPDATE DIVS SET DIV_CODE = #{divCode},
                DIV_NAME = #{divName}
                WHERE DIV_CODE = #{no}
	</update>
	
	
	<select id="getBookList" resultType="hashmap">
		SELECT BOOK_NO, BOOK_TITLE, BOOK_AUTHOR
		FROM BOOK
	</select>
	
	<select id="getBook" resultType="hashmap" parameterType="hashmap">
		SELECT BOOK_NO, BOOK_TITLE, BOOK_AUTHOR, BOOK_CO,
		TO_CHAR(BOOK_DT,'YYYY-MM-DD') AS BOOK_DT, TO_CHAR(REG_DT,'YYYY-MM-DD') AS REG_DT
		FROM BOOK
		WHERE BOOK_NO = #{no}
	</select>
	
	<insert id="insertBook" parameterType="hashmap">
		INSERT INTO BOOK(BOOK_NO, BOOK_TITLE, BOOK_AUTHOR, BOOK_CO, BOOK_DT)
		VALUES(BOOK_SEQ.NEXTVAL, #{bookTitle}, #{bookAuthor}, #{bookCo}, #{bookDt})
	</insert>
	
	<delete id="deleteBook" parameterType="hashmap">
		DELETE FROM BOOK
		WHERE BOOK_NO = #{no}
	</delete>
	       
	<update id="updateBook" parameterType="hashmap">
			UPDATE BOOK SET BOOK_TITLE = #{bookTitle},
                BOOK_AUTHOR = #{bookAuthor},
                BOOK_CO = #{bookCo},
                BOOK_DT = #{bookDt}
                WHERE BOOK_NO = #{no}
	</update>
	
	<select id="getSellCnt" parameterType="hashmap" resultType="Integer">
		SELECT COUNT(*) AS CNT 
		FROM SELL
		WHERE 1 = 1
		<if test="searchTxt != null and searchTxt != ''"> <!-- 검색어가 있다면 -->
			<choose>
				<when test="searchGbn == 0"> <!-- 품목 -->
					AND ITEM_NAME LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn == 1"> <!-- 수량 -->
					AND COUNT = #{searchTxt}
				</when>
			</choose>
		</if>
	</select>
	
	<select id="getManagerCnt" parameterType="hashmap" resultType="Integer">
		SELECT COUNT(*) AS CNT 
		FROM MANAGER
		WHERE 1 =1
		<if test="searchTxt != null and searchTxt != ''"> 
			<choose>
				<when test="searchGbn == 0">
					AND NAME LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn == 1">
					AND DEPT LIKE '%' || #{searchTxt} || '%'
				</when>
			</choose>
		</if>
	</select>
	
</mapper>

manager 실습 코드

jsp적기

anboard 실습 코드

pshExamController.java

package com.spring.sample.web.test.controller;

import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import com.spring.sample.common.service.IPagingService;
import com.spring.sample.web.test.service.ITestService1;

@Controller
public class PshExamController {
	// 3.
	@Autowired
	public ITestService1 iTestService1;
	
	@Autowired
	public IPagingService ips; // 페이징 서비스 객체 주입
	
	/*
	 * Database나 파일 같이 외부에 접근하는 경우 외적 요인으로 문제가 발샐할 수 있음으로 예외처리가 반드시 필요하다.
	 */
	
	// 실습
	@RequestMapping(value = "/anboardList")
	public ModelAndView anboardList(
			@RequestParam HashMap<String, String> params,
			ModelAndView mav) throws Throwable {
		
		// 현재페이지
		int page = 1;

		if (params.get("page") != null) { // 페이지가 넘어왔을때
			page = Integer.parseInt(params.get("page")); // 받아온 페이지 할당
		}

		// 총 데이터 개수 취득
		int cnt = iTestService1.getAnboardCnt(params);

		// 페이징 데이터 계산
		// ips.getPagingData(page, maxCount, viewCnt, pageCnt)
		HashMap<String, Integer> pd = ips.getPagingData(page, cnt, 3, 2);

		// 파라미터에 시작, 종료값 추가
		// 한쪽으로 필요 데이터를 몰았다?
		params.put("start", Integer.toString(pd.get("start")));
		params.put("end", Integer.toString(pd.get("end")));

				
		// 데이터 취득
		List<HashMap<String, String>> list = iTestService1.getAnboardList(params);

		// 목록 데이터
		mav.addObject("list", list);
		// 페이징 정보
		mav.addObject("pd", pd);
		// 현재 페이지
		mav.addObject("page", page);
		mav.setViewName("test/anboardList");

		return mav;
	}

	@RequestMapping(value = "/anboardDetail")
	public ModelAndView anboardDetail(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {

		if (params.get("no") == null || params.get("no") == "") {
			mav.setViewName("redirect:anboardList");

		} else {
			HashMap<String, String> data = iTestService1.getAnboard(params);

			mav.addObject("data", data);
			mav.setViewName("test/anboardDetail");
		}

		return mav;
	}

	@RequestMapping(value = "/anboardInsert")
	public ModelAndView managerInsert(ModelAndView mav) {
		mav.setViewName("test/anboardInsert");
		return mav;

	}

	@RequestMapping(value = "/anboardRes")
	public ModelAndView anboardInsertRes(@RequestParam HashMap<String, String> params, ModelAndView mav)
			throws Throwable {

		System.out.println(params.toString());
		try {
			int cnt = 0; // insert, update, delete 다 쓸거기 때문에 처음에 0줌

			switch (params.get("gbn")) {
			case "i":
				cnt = iTestService1.insertAnboard(params);
				break;
			case "u":
				cnt = iTestService1.updateAnboard(params);
				break;
			case "d":
				cnt = iTestService1.deleteAnboard(params);
				break;
			}

			if (cnt > 0) { // 1건 이상 등록된 경우
				mav.addObject("res", "success");
			} else { // 등록 안된 경우
				mav.addObject("res", "failded");
			}
		} catch (Exception e) { // 예외 발생시
			e.printStackTrace();
			mav.addObject("res", "error");
		}
		mav.setViewName("test/anboardRes");
		return mav;
	}

	// 글 수정페이지
	@RequestMapping(value = "/anboardUpdate")
	public ModelAndView anboardUpdate(@RequestParam HashMap<String, String> params, ModelAndView mav) throws Throwable {
		// 기존데이터 조회해와야함
		HashMap<String, String> data = iTestService1.getAnboard(params);
		mav.addObject("data", data);

		mav.setViewName("test/anboardUpdate");

		return mav;

	}
}

ITestService1.java

package com.spring.sample.web.test.service;

import java.util.HashMap;
import java.util.List;

public interface ITestService1 {

	public List<HashMap<String, String>> getAnboardList(HashMap<String, String> params) throws Throwable;

	public HashMap<String, String> getAnboard(HashMap<String, String> params) throws Throwable;

	public int insertAnboard(HashMap<String, String> params) throws Throwable;

	public int updateAnboard(HashMap<String, String> params) throws Throwable;

	public int deleteAnboard(HashMap<String, String> params) throws Throwable;

	public int getAnboardCnt(HashMap<String, String> params) throws Throwable;

}

TestService1.java

package com.spring.sample.web.test.service;

import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.spring.sample.web.test.dao.ITestDao1;

@Service
public class TestService1 implements ITestService1 {
	@Autowired
	public ITestDao1 iTestDao1;
	

	@Override
	public List<HashMap<String, String>> getAnboardList(HashMap<String, String> params) throws Throwable {
		return iTestDao1.getAnboardList(params);
	}

	@Override
	public HashMap<String, String> getAnboard(HashMap<String, String> params) throws Throwable {
		return iTestDao1.getAnboard(params);
	}

	@Override
	public int insertAnboard(HashMap<String, String> params) throws Throwable {
		return iTestDao1.insertAnboard(params);
	}

	@Override
	public int updateAnboard(HashMap<String, String> params) throws Throwable {
		return iTestDao1.updateAnboard(params);
	}

	@Override
	public int deleteAnboard(HashMap<String, String> params) throws Throwable {
		return iTestDao1.deleteAnboard(params);
	}

	@Override
	public int getAnboardCnt(HashMap<String, String> params) throws Throwable {
		return iTestDao1.getAnboardCnt(params);
	}
}

ITestDao1.java

package com.spring.sample.web.test.dao;

import java.util.HashMap;
import java.util.List;

public interface ITestDao1 {

	public List<HashMap<String, String>> getAnboardList(HashMap<String, String> params) throws Throwable;

	public HashMap<String, String> getAnboard(HashMap<String, String> params) throws Throwable;

	public int insertAnboard(HashMap<String, String> params) throws Throwable;

	public int deleteAnboard(HashMap<String, String> params) throws Throwable;

	public int updateAnboard(HashMap<String, String> params) throws Throwable;

	public int getAnboardCnt(HashMap<String, String> params) throws Throwable;

}

TestDao1.java

package com.spring.sample.web.test.dao;

import java.util.HashMap;
import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class TestDao1 implements ITestDao1 {
	
	@Autowired
	public SqlSession sqlSession;

	@Override
	public List<HashMap<String, String>> getAnboardList(HashMap<String, String> params) throws Throwable {
		return sqlSession.selectList("test.getAnboardList", params);
	}

	@Override
	public HashMap<String, String> getAnboard(HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne("test.getAnboard", params);
	}

	@Override
	public int insertAnboard(HashMap<String, String> params) throws Throwable {
		return sqlSession.insert("test.insertAnboard", params);
	}

	@Override
	public int deleteAnboard(HashMap<String, String> params) throws Throwable {
		return sqlSession.delete("test.deleteAnboard", params);
	}

	@Override
	public int updateAnboard(HashMap<String, String> params) throws Throwable {
		return sqlSession.update("test.updateAnboard", params);
	}

	@Override
	public int getAnboardCnt(HashMap<String, String> params) throws Throwable {
		return sqlSession.selectOne("test.getAnboardCnt", params);
	}

}

Test_SQL.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- namespace : 클래스와 동일, 이 파일의 대표명 -->
<mapper namespace="test">

	<!-- Anboard 테이블 -->
	
	<select id="getAnboardList" resultType="hashmap" parameterType="hashmap">		
		SELECT S.NO, S.TITLE, S.WRITER, S.HIT, S.DT
		FROM (SELECT NO, TITLE, WRITER, HIT, TO_CHAR(DT,'YYYY-MM-DD') AS DT,
		ROW_NUMBER() OVER(ORDER BY DT DESC, NO DESC) AS RNK
		FROM ANBOARD
		WHERE DEL = 1
		<if test="searchTxt != null and searchTxt != ''"> 
			<choose>
				<when test="searchGbn == 0">
					AND TITLE LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn == 1">
					AND WRITER LIKE '%' || #{searchTxt} || '%'
				</when>
			</choose>
			</if>
		) S
		WHERE S.RNK BETWEEN #{start} AND #{end}
	</select>

	<select id="getAnboard" resultType="hashmap" parameterType="hashmap">
		SELECT NO, TITLE, WRITER, CON, HIT, DT 
		FROM ANBOARD
		WHERE NO = #{no}
	</select>
	
	<insert id="insertAnboard" parameterType="hashmap">
		INSERT INTO ANBOARD(NO, TITLE, WRITER, CON)
		VALUES(ANBOARD_SEQ.NEXTVAL, #{title}, #{writer}, #{con})
	</insert>
	
	<update id="deleteAnboard" parameterType="hashmap">
		UPDATE ANBOARD SET DEL = 0
		WHERE NO = #{no}
	</update>
	
	<update id="updateAnboard" parameterType="hashmap">
		UPDATE ANBOARD SET TITLE = #{title},
                WRITER = #{writer},
                CON = #{con}
                WHERE NO = #{no}
	</update>
	
	<select id="getAnboardCnt" parameterType="hashmap" resultType="Integer">
		SELECT COUNT(*) AS CNT 
		FROM ANBOARD
		WHERE DEL = 1
		<if test="searchTxt != null and searchTxt != ''"> 
			<choose>
				<when test="searchGbn == 0">
					AND TITLE LIKE '%' || #{searchTxt} || '%'
				</when>
				<when test="searchGbn == 1">
					AND WRITER LIKE '%' || #{searchTxt} || '%'
				</when>
			</choose>
			</if>
	</select>
</mapper>

anboardList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
	border-collapse: collapse;
}

th, td {
	border: 1px solid #000;
	padding: 5px;
}

</style>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	if("${param.searchGbn}" != "") { // 검색구분이 넘어오면
		$("#searchGbn").val("${param.searchGbn}");	
	}
	
	
	$("tbody").on("click", "tr", function () {
		console.log($(this).attr("no"));
		$("#no").val($(this).attr("no"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action","anboardDetail");
		$("#actionForm").submit();
	})
	
	$("#insertBtn").on("click", function () {
		location.href = "anboardInsert";
	});
	
	$("#pagingWrap").on("click", "span", function () {
		$("#page").val($(this).attr("page"));
		
		// 검색 상태 유지
		$("#searchGbn").val($("#oldGbn").val());
		$("#searchTxt").val($("#oldTxt").val());
		
		$("#actionForm").attr("action","anboardList");
		$("#actionForm").submit();
	});
	
	$("#searchBtn").on("click", function () {
		// 검색하면 페이지는 무조건 1페이지로 감
		$("#page").val("1"); // 페이지 초기화
		
		$("#actionForm").attr("action","anboardList");
		$("#actionForm").submit();
	})
})

</script>
</head>
<body>
<!-- 기존 검색 내용 유지용 -->
<input type="hidden" id="oldGbn" value="${param.searchGbn}"/>
<input type="hidden" id="oldTxt" value="${param.searchTxt}"/>
<form action="anboardDetail" id="actionForm" method="post">
	<input type="hidden" id="no" name="no" />
	<input type="hidden" id="page" name="page" value="${page}" />  <!-- 상세보기 갈때 page 가져갈거임 -->
	<!-- 검색 -->
	<select name="searchGbn" id="searchGbn">
		<option value="0">제목</option>
		<option value="1">작성자</option>
	</select>
	<input type="text" name="searchTxt" id="searchTxt" value="${param.searchTxt}"/> <!-- 검색어 유지되게, 그래야 페이징할떄도 유지됨 -->
	<input type="button" value="검색" id="searchBtn" />
	<input type="button" value="추가" id="insertBtn" />
</form>

<table>
	<thead>
		<tr>
			<th>번호</th>
			<th>제목</th>
			<th>작성자</th>
			<th>조회수</th>
			<th>작성일</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach var="data" items="${list}">
			<tr no="${data.NO}">
				<td>${data.NO}</td>
				<td>${data.TITLE}</td>
				<td>${data.WRITER}</td>
				<td>${data.HIT}</td>
				<td>${data.DT}</td>
			</tr>
		</c:forEach>
	</tbody>
</table>
<div id="pagingWrap">
<span page="1">처음</span>
<!-- 이전은 현재페이지에서 하나 전, 
지금 1페이지인지 아닌지 먼저 체크 따라서, 현재페이지 필요-->
<!-- 이전페이지 : 현제페이지가 1이면 1로 이동 아니면 현제페이지 -1 -->
<c:choose>
	<c:when test="${page eq 1}">
		<span page="1">이전</span>
	</c:when>
	<c:otherwise>
		<span page="${page - 1}">이전</span>
	</c:otherwise>
</c:choose>
<!-- 페이지들 -->
<c:forEach var="i" begin="${pd.startP}" end="${pd.endP}" step="1">
	<%-- 현재 페이지의 경우 별도 처리 --%>
	<c:choose>
		<c:when test="${i eq page}"> <%-- 현재페이지 --%>
			<span page="${i}"><b>${i}</b></span>
		</c:when>
		<c:otherwise> <%-- 다른페이지 --%>
			<span page="${i}">${i}</span>
		</c:otherwise>
	</c:choose>
</c:forEach>

<!-- 다음페이지 : 마지막에 도달했을때는 증가하지 않고, 다른 경우는 +1 -->
<c:choose>
	<c:when test="${page eq pd.maxP}">
		<span page="${pd.maxP}">다음</span>
	</c:when>
	<c:otherwise>
		<span page="${page + 1}">다음</span>
	</c:otherwise>
</c:choose>

<span page="${pd.maxP}">마지막</span>
</div>
</body>
</html>

anboardDetail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" 
		src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#listBtn").on("click", function() {
		$("#actionForm").attr("action","anboardList"); 
		$("#actionForm").submit();
	});
	
	$("#deleteBtn").on("click", function () {
		if(confirm("삭제하시곘습니까?")){
			$("#actionForm").attr("action","anboardRes"); 
			$("#actionForm").submit();
		}
	})
	
	$("#updateBtn").on("click", function () {
		$("#actionForm").attr("action","anboardUpdate");
		$("#actionForm").submit();
	});
});

</script>
</head>
<body>
<form action="#" id="actionForm" method="post">
	<input type="hidden" name="gbn" value="d"> <!-- selRes는 gbn을 받게 되어있어서 값을 추가해줘야함 -->
	<input type="hidden" name="no" value="${data.NO}">
	<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
		<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>	
번호: ${data.NO}<br/>
제목: ${data.TITLE}<br/>
내용: ${data.CON}<br/>
작성자: ${data.WRITER}<br/>
조회수: ${data.HIT}<br/>
작성일: ${data.DT}<br/>
<input type="button" value="수정" id="updateBtn" />
<input type="button" value="삭제" id="deleteBtn" />
<input type="button" value="목록" id="listBtn" />
</body>
</html>

anboardInsert.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#listBtn").on("click", function () {
		history.back();
	});
	
	$("#insertBtn").on("click", function () {
		if($("#title").val() == ""){
			alert("제목을 입력하세요");
			$("#title").focus();
		} else if($("#writer").val() == ""){
			alert("작성자를 입력하세요");
			$("#writer").focus();
		} else if($("#con").val() == ""){
			alert("내용을 입력하세요");
			$("#con").focus();
		} else {
			$("#actionForm").submit();
		}
	});
});

</script>
</head>
<body>
<form action="anboardRes" id="actionForm" method="post">
<!-- gbn : 구분, 혹은 flag -->
<!-- 구분: i - insert, u - update, d - delete -->
<input type="hidden" name="gbn" value="i"/>
제목 
<input type="text" name="title" id="title" />
<br />
작성자 
<input type="text" name="writer" id="writer" />
<br/>
내용 
<textarea name="con" id="con"></textarea>
<br/>
</form>
<input type="button" value="등록" id="insertBtn">
<input type="button" value="목록" id="listBtn">
</body>
</html>

anboardRes.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	
	switch("${res}"){
	case "success" : 
		if("${param.gbn}" == "u"){ // 수정이 성공했을 떄
			$("#goForm").submit();
		} else { // 등록, 삭제가 성공했을 떄
			location.href = "anboardList" 
		}
		break;
	case "failed" : 
		alert("작업에 실패하였습니다.");
		history.back();
		break;
	case "error" : 
		alert("작업중 문제가 발생 하였습니다.");
		history.back();
		break;
	}
});
</script>
</head>
<body>
<form action="anboardDetail" id="goForm" method="post">
	<input type="hidden" name="no" value="${param.no}" />
	<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
		<!-- 전 화면에서 넘어온 검색 정보 -->
	<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
	<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
</form>
</body>
</html>

anboardUpdate.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/script/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	// 기존값으로 셀렉트박스 선택 내용 변경
	$("#title").val("${data.TITLE}");
	$("#writer").val("${data.WRITER}");
	$("#con").val("${data.CON}");
	
	$("#listBtn").on("click", function () {
		history.back();
	});
	
	$("#updateBtn").on("click", function () {
		if($("#title").val() == ""){
			alert("제목을 입력하세요");
			$("#title").focus();
		} else if($("#writer").val() == ""){
			alert("작성자를 입력하세요");
			$("#writer").focus();
		} else if($("#con").val() == ""){
			alert("내용을 입력하세요");
			$("#con").focus();
		} else {
			$("#actionForm").submit();
		}
	});
});

</script>
</head>
<body>
<!-- 번호는 시퀀스 쓸거기 때문에 받을 필요없음, 보여줄 필요 없음, 저장되야 글번호 보여지지 -->
<!-- select 전달하기 위해  name줘야함 -->
<!-- option value 지정해줘야함! -->
<form action="anboardRes" id="actionForm" method="post">
<!-- gbn : 구분, 혹은 flag -->
<!-- 구분: i - insert, u - update, d - delete -->
<input type="hidden" name="gbn" value="u"/>
<input type="hidden" name="no" value="${data.NO}"/> <!-- 이 번호만 수정해라라는 조건 달기위해 필요 -->
<input type="hidden" name="page" value="${param.page}" /> <!-- 전 화면에서 넘어온 페이지 정보 -->
<!-- 전 화면에서 넘어온 검색 정보 -->
<input type="hidden" name="searchGbn" value="${param.searchGbn}"/>
<input type="hidden" name="searchTxt" value="${param.searchTxt}"/>
제목 
<input type="text" name="title" id="title" />
<br />
작성자 
<input type="text" name="writer" id="writer" />
<br/>
내용 
<textarea name="con" id="con"></textarea>
<br />
</form>
<input type="button" value="수정" id="updateBtn">
<input type="button" value="뒤로가기" id="listBtn">
</body>
</html>

anboardList 화면

지금까지 했던 거(목록, 수정페이지, 상세페이지, 삭제, 페이징, 검색) 플러스

강사님이 요즘에는

테이블에서 데이터를 삭제할때 실제 데이터가 삭제되는게 아니고 안보이게 하는거라고 하셨음, 그거를 해보라고 했는데,

이렇게 함, 아직 맞는지는 몰라 내일 같이 할 예정

DEL 컬럼을 주고, 1이면 삭제 안된데이터, 0이면 삭제된 데이터, 쿼리에서 1만 보이게 처리

조건걸때 WHERE 1=1 대신 DEL =1로 바꿔주고

삭제부분 쿼리

기존 삭제부분은 delete 사용했는데, 이제 update로 변경