[database] CRUD 연습

이광훈·2023년 6월 16일

CREATE CRUD Read delete update

✅ CRUD

👉 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말, 사용자 인터페이스가 갖추어야 할 기능(정보의 참조/검색/갱신)을 가리키는 용어로서도 사용됨

01. Create (생성)

📢 순서

StudentDto 클래스 생성

create.html 생성

StudentController 생성

StudentService 생성

1) StudentDto 생성

DTO : Data Transfer Object

DAO : Data Access Object

crud 안에 model 패키지 생성
StudentDto 클래스 생성

public class StudentDto {
	private Long id;
    private String name;
    private Stirng email;
    
    public StudentDto() {
    }
    
    public StudentDto(Long id, String name, String email) {
        this.id = id;
        this.name = name;
        this.email = email;
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    @Override
    public String toString() {
        return "StudentDto{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", email='" + email + '\'' +
                '}';
    }
}

👉 Constructor, Getter, Setter, toString 추가

2) Create.html 생성

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Create Student</title>
</head>
<body>

<h1>Create Student</h1>
<form action="/create" method="post">
  <!-- 사용자가 제공할 데이터에 알맞은 Input과 label을 만든다. -->
  <label for="name-input">Name: <input id="name-input" name="name"></label><br>
  <label for="email-input">Email: <input id="email-input" name="email"></label><br>
  <input type="submit">
</form>
</body>
</html>

3) StudentController 생성

import com.example.crud.model.StudentDto;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class StudentController {
	private final StudentService studentService;
    
    public StudentController(StudentService studentService) {
    	this.studentService = studentService;
    }
    
    @GetMapping("/create-view") // URL 컨벤션, 하이픈을 연결해서 이용
    public String createView() {
    	return "create";
    }
    
    @PostMapping("/create")
    public String create(
          @RequestParam("name")
          String name,
          @RequestParam("email")
          String email
    ) {
    	System.out.println(name);
        System.out.println(email);
        StudentDto studentDto = studentService.createStudent(name, email);
        System.out.println(studentDto.toString());
        return "redirect:/create-view"; // 처음 페이지로 돌아가게끔
     }
 }

4) StudentService 생성

import com.example.crud.model.StudentDto;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.List;

@Service
public class StudentService {
	// 복수의 StudentDto를 담는 변수
   private final List<StudentDto> studentList = new ArrayList<>();
   private Long nextId = 1L;
   // 새로운 StudentDto를 생성하는 메소드
   public StudentDto createStudent(String name, String email) {
   	StudentDto newStudent = new StudentDto(
       		nextId, name, email
       );
       nextId++;
       studentList.add(newStudent);
       return newStudent;
   }
}

5) 결과

🌐 http://localhost:8080/create-view 로 확인

02_1. Read All (여러개 읽기)

📢 순서

StudentService에 메소드 추가

home.html 생성

StudentController 수정

1) StudentService 메소드 추가

@Service
public class StudentService {
	private Long nextId = 1L;
    private final List<StudentDto> studentList = new ArrayList<>();
    
    public StudentDto createStudent(String name, Stirng email) {
    	StudentDto newStudent = new StudentDto(nextId, name, email);
        nextId++;
        studentList.add(newStudent);
        return newStudent;
    }
    
    public List<StudentDto> readStudentAll() {
    	return studentList;
    }
}

2) home.html 생성

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Students Home</title>
</head>
<body>
  <h1>Student List</h1>
  <div th:if="${studentList.isEmpty()}">
    <p>No students here...</p>
  </div>
  <div th:unless="${studentList.isEmpty()}" th:each="student: ${studentList}">
    <p>번호: [[${student.id}]]</p>
    <p>이름: [[${student.name}]]</p>
    <p>이메일: [[${student.email}]]</p>
  </div>
  <a th:href="@{/create-view}">Create</a>
</body>
</html>

👉 Thymeleaf 문법을 이용

3) StudentController 수정

@Controller
public class StudentController {
	private final StudentService studentService;
    
    public StudentController(StudentService studentService) {
    	this.studentService = studentService;
    }
    
    @GetMapping("/create-view")
    public String createView() {
    	return "create";
    }
    
    @PostMapping("/create")
    public String create(
    		@RequestParam("name") Stirng name,
            @RequestParam("email") String email) {
        System.out.println(name);
        System.out.println(email);
        StudentDto newStudent = studentService.createStudent(name, email);
        System.out.println(newStudent);
        return "redirect:/create-view";
        // 제출한 뒤 /home으로 보내려면 다음과 같이 작성
        // return "redirect:/home";
        
        // return "home"; 으로 할 경우, redirect하는게 아니라 "home"이라는 view를 보여줌
        // 단, 이때 현재 코드는 view에 필요한 속성값을 넘겨주지 않기에, 에러가 발생하거나,
        // view가 제대로 표시되지 않을 수 있음
        // 실제로 view와 studentList.isEmpty() 부분에서 null 에러 발생
    }
    
    @GetMapping("/home")
    public String home(Model model) {
    	model.addAttribute("studentList", studentService.readStudentAll());
        return "home";
    }
}

4) 결과

02_2. Read One (한개 읽기)

1) StudentService 메소드 추가

🌐 for each문을 활용한 코드

// 위 코드 생략
	public StudentDto readStudent(Long id) {
    	for(StudentDto studentDto: studentDtoList) {
        	if(studentDto.getId().equals(id)) {
            	return studentDto;
            }
        }
        return null;
    }

🌐 stream을 활용한 코드

// 위 코드 생략
	public StudentDto readStudent(Long id) {
    	return studentDtoList
        		.stream()
                .filter(studentDto -> studentDto.getId().equals(id))
                .findFirst()
                .orElse(null);
    }

2) read.html 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>[[${student.name}]]</title>
</head>
<body>
  <h1>[[${student.id}]]. [[${student.name}]]</h1>
  <p>이메일 : [[${student.email}]]</p>
  <a href="/home">Back</a>
</body>
</html>

3) StudentController에 추가

//위 코드 생략
	@GetMapping("/read") // http://localhost:8080/read로 실행되는 메소드
	publci String read(Long id, Model model) {
    	System.out.println(id);
        model.addAttribute(
        	"student",
            studentService.readStudent(id)
        );
        
        return "read";
    }

🌐 URL 경로에 있는 변수를 매개변수로 할당

🔸 URL → 컴퓨터의 파일시스템(경로)의 모습을 일부 유사하게 만들어, 특정 자원을 가리키는 용도

👉 조회하고 싶은 자원이 URL에 드러나게 하기

	@GetMapping("/{id}") // <----- 변경
    public String read(
            @PathVariable("id") Long id, // <---- @PathVariable로 url로 넘겨 받은 값을
            Model model                 // Long id로 받아서 쓸수 있다.
    ) {
        System.out.println(id);
        model.addAttribute(
                "student",
                studentService.readStudent(id)
        );

        return "read";
    }

4) 결과

등록

id값(1) 확인

03. Update (갱신)

👉 데이터 갱신을 위해서 1. 대상 데이터 가져오기 2. 갱신할 새로운 데이터로 업데이트 해야함

🔸Update = Create + Read

1) update.html 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Update</title>
</head>
<body>
    <h1>Update Student</h1>
    <form method="post">
        <!-- 사용자가 제공할 데이터에 알맞은 input과 label을 만든다. -->
        <label for="name-input">Name: <input id = "name-input" name="name"></label>
        <br>
        <label for="email-input">Email : <input id = "email-input" name="email"></label>
        <br>
        <!--    데이터 제출 버튼 -->
        <input type="submit">
    </form>
<!--  업데이트창에서 다시 돌아가야 할 곳은 학생 상세페이지 임으로 아래와 같이 설정! -->
    <a th:href="@{/{id} (id=${student.id})}">Back</a>

</body>
</html>

👉 back은 상세보기 페이지로 설정

2) StudentController에 메소드 추가 (update-view)

// 위 코드 생략
	@GetMapping("/{id}/update-view")
    public String updateView(
    		@PathVarible("id") Long id, Model model
    ) {
    	model.addAttribute("student", studentService.readStudent(id));
        return "update";
   	}

❓ PathVariable과 RequestParam의 차이

PathVariable은 url에서 특정 데이터를 지정하는 등 한 가지 값만 받을 수 있음
- ex) 학생들 중 id가 12번인 학생의 마이페이지로 가기
  → localhost:8080/mypage/{ 학생의 아이디(12) }
RequestParam의 경우 해당 위치에서 사용할 데이터를 담아 보내는 용도
- ex) 학생 id 12번 마이페이지에서 오늘 날짜에 출석체크를 하려고 함
  → localhost:8080/mypage/{ 학생의 아이디(12) }?date=20230609&isOk=true

3) update.html 수정

👉 원본 데이터를 수정할 수 있도록 코드를 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Update</title>
</head>
<body>
<h1>Update Student</h1>
<form th:action="@{/{id}/update (id=${student.id})}" method="post">
    <!--  사용자가 제공할 데이터에 알맞은 input과 label을 만든다.  -->
    <label for="name-input">
    	<!--  value 속성 추가로 초기에 표시할 값 설정 -->
        Name: <input id="name-input" name="name" th:value="${student.name}">
    </label>
    <br>
    <label for="email-input">
    	<!--  value 속성 추가로 초기에 표시할 값 설정 -->
        Email: <input id="email-input" name="email" th:value="${student.email}">
    </label>
    <br>
    <!--  데이터 제출 버튼  -->
    <input type="submit">
</form>
<!--  <a href="/home">Back</a>-->
<a th:href="@{/{id} (id=${student.id})}">Back</a>
</body>
</html>

4) StudentService 메소드 추가

	public StudentDto updateStudent(Long id, String name, String email) {
    	int target = 1;
        for(int i = 0; i < studentDtoList.size(); i++) {
        	// 학생의 인덱스를 찾으면 기록 후 반복 종료
            if(studentDtoList.get(i).getId().equals(id)) {
            	target = i;
                break;
            }
        }
        
        // 찾은 대상의 name과 email 변경
        if (target != 1) {
       		studentDtoList.get(target).setName(name);
            studentDtoList.get(target).setEmail(email);
            return studentDtoList.get(target);
        }
        else return null;
    }

5) StudentController에 메소드 추가 (update)

// 위 코드 생략
	@PostMapping("/{id}/update")
    public String update(
    		@PathVariable("id") Long id,
            @PathVariable("name") String name,
            @PathVariable("email") String email,
    ) {
    	// service 활용
        studentService.updateStudent(id, name, email);
        // 상세보기 페이지로 redirect
        return String.format("redirect:/%s", id);
    }

6) 결과

04. Delete (삭제)

📢 구현할 기능 정리

상세보기 페이지 → 삭제 확인하기

삭제 확인 + 삭제 버튼 + 뒤로 가기

삭제 성공 후 "/home"으로 이동

1) StudentController에 메소드 추가 (delete-view)

// 위 코드 생략
	@GetMapping("/{id}/delete-view")
   public String deleteView(
   		@PathVariable("id") Long id, Model model
   ) {
   	StudentDto studentDto = studentService.readStudent(id);
       model.addAttribute("student", studentDto);
       return "delete";
  	}

2) StudentService에 메소드 추가

// 위 코드 생략
	public boolean deleteStudent(Long id) {
    	int target = -1;
        for(int i = 0; i < studentDtoList.size(); i++) {
        	// 대상 선정
            if(studentDtoList.get(i).getId().equals(id) {
            	target = i;
                break;
            }
        }
        
        // 검색 성공시
        if (target != -1) {
        	// 삭제
            studentDtoList.remove(target);
            return true;
        }
        else return false;
    }

3) StudnetController에 메소드 추가 (delete)

👉 삭제 후에는 상세페이지가 없으므로 /home으로 이동

	@PostMapping("/{id}/delete")
    public String delete(
    	@PathVariable("id") Long id
    ) {
    	studentService.deleteStudent(id);
        return "redirect:/home";
   	}

4) delete.html 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Delete</title>
</head>
<body>
<h1>Delete Student Name?</h1>
<form th:action="@{/{id}/delete (id=${student.id})}" method="post">
    <h3>[[${student.name}]] 님의 정보를 삭제합니다.</h3>
    <!-- create / update 와는 다르게 -->
    <!-- delete의 경우 추가적인 데이터 필요하지 않음 -->
    <!-- 그래서 추가적인 input 요소 없이 submit 만 만들면 됨-->
    <input type="submit" value="Delete" />
</form>
<a th:href="@{/{id}(id=${student.id})}">Back</a> <!--read 페이지로-->
</body>
</html>

5) 결과

이광훈

웃으며 일할 때, 시너지가 배가 된다고 믿는 개발자

이전 포스트

[Java] 정렬 알고리즘

다음 포스트

[database] CRUD 연습

✅ CRUD

01. Create (생성)

📢 순서

1) StudentDto 생성

DTO : Data Transfer Object

👉 Constructor, Getter, Setter, toString 추가

2) Create.html 생성

3) StudentController 생성

4) StudentService 생성

5) 결과

🌐 http://localhost:8080/create-view 로 확인

02_1. Read All (여러개 읽기)

📢 순서

1) StudentService 메소드 추가

2) home.html 생성

👉 Thymeleaf 문법을 이용

3) StudentController 수정

4) 결과

02_2. Read One (한개 읽기)

1) StudentService 메소드 추가

2) read.html 생성

3) StudentController에 추가

🌐 URL 경로에 있는 변수를 매개변수로 할당

4) 결과

03. Update (갱신)

1) update.html 생성

2) StudentController에 메소드 추가 (update-view)

❓ PathVariable과 RequestParam의 차이

3) update.html 수정

4) StudentService 메소드 추가

5) StudentController에 메소드 추가 (update)

6) 결과

04. Delete (삭제)

1) StudentController에 메소드 추가 (delete-view)

2) StudentService에 메소드 추가

3) StudnetController에 메소드 추가 (delete)

4) delete.html 생성

5) 결과

[Java] 정렬 알고리즘

롬복 (Lombok)

0개의 댓글