(국비교육) 28 - 팀뽑기 웹버전 만들기

■ 이번주/이번달 목표

 

 

■ 팀뽑기 웹사이트에 나타내기

 

*menu.jsp

 

 

팀뽑기 웹사이트로 나타내기 위해 아래 링크로 연결되는 코드 넣어준다.

 

 

팀 서블릿 만들어주기

 

* Team.java

 

do get 통해서 jsp 가져오기

 

* team.jsp

 

 

 

먼저 버튼 만들어주고 액션 설정해준다. 

team.jsp 생성해주고 겹치지 않도록 post 처리 해준다. 

 

 

세부 옵션 설정

 

 

 

입력 후 팀 만들기 버튼 누르면 출력 확인 가능

 

* 에러해결

 

/team 소문자처리 안해줘서 못가져와서 오류 남

따라서 소문자 처리하니 오류 해

 

* Team.java

 

 

team.jsp 에 있는 값 names 를 getParamaeter 을 통해 가져오고,

그 값을 names 변수에 저장해준다. 

 

해당 값을 , 로 구분하여 배열에 넣어준다.

 

 

이를 add 함수를 통해 값을 넣어줄 수 있는데,

이를 반복문으로 간단히 넣을 수 있다.

 

 

for each를 통해 list.add 를 통해 값을 넣을 수 있다. 

 

Team.java

다만 우리는 메소드 이용해서 값을 담을 수도 있다. 

 

team.jsp 에 있는 값 names 를 getParamaeter 을 통해 가져오고,

그 값을 names 변수에 저장해준다. 

 

해당 값을 , 로 구분하여 배열에 넣어주고,

우리는 리스트 타입을 이용하기 위해서 다시 이를 리스트 타입을 선언해준다.

 

list에 담아주는 방법은 list.addAll() 을 사용한다.

다만 우리가 담아준 배열을 리스트화 시키기 위해서 Arrays.asList() 를 한 값을 list.addAll() 에 넣어준다. 

 

※ 

list.addAll() : 괄호안에 있는 것을 모두 list로 가져온다.

Arrays.asList() : 배열 가져와 리스트화 시키기

 

 

이제 팀원이 무작위로 나오게 설정한다.

이는 shuffle 을 이용하면 된다.

 

shuffle이 list 타입의 메소드이기 때문에 

아마 이를 위해 리스트 타입으로 변경하지 않았을까 싶다. 

 

디스패쳐 = URL 유지하고 화면만 변경합니다. = 값도 보내기

리다이렉트 = URL 변경하고 완전히 새로운 페이지로 이동

 

따라서 리다이렉트는 다른 서블릿 부를 수 있다. 

 

requestdispatcher : 현재 요청과 관련된 데이터를 공유하고, 같은 URL에서 다른 컴포넌트로 이동

setAttribute( , ) : jsp 불는 이름 / 뒤에 보내줄 값

 

우리는 list 값 보내줄 것이다.

 

 

request.setAttribute("list", list); : 값을 가지고 페이지로 이동

=>  "list"라는 이름을 가지고 있는 list 값들을 가지고 간다는 의미  

 

 

※ RequestDispatcher & sendRedirect

 

 

RequestDispatcher:
RequestDispatcher는 서버 내에서 다른 서블릿이나 JSP로의 제어를 전달하는 역할을 합니다. 이를 통해 현재 요청과 관련된 데이터를 공유하고, 같은 URL에서 다른 컴포넌트로 이동할 수 있습니다. RequestDispatcher를 사용하면 웹 애플리케이션 내부에서의 이동이므로 브라우저의 주소 표시줄은 변경되지 않습니다. 따라서 사용자는 현재 페이지 URL이 변경되지 않은 채로 새로운 내용이 표시되는 것처럼 보게 됩니다.

sendRedirect:
sendRedirect는 클라이언트(웹 브라우저)에게 다른 URL로 이동하라는 명령을 내리는 방식입니다. 이동할 URL로 새로운 요청을 생성하고, 그에 대한 응답을 클라이언트에게 반환합니다. 이 때, 브라우저는 새로운 URL로 재요청을 보내게 되므로 주소 표시줄이 변경됩니다. 이 방식을 사용하면 사용자가 새로운 페이지의 URL을 볼 수 있습니다.

따라서 RequestDispatcher는 현재 요청과 관련된 데이터를 유지한 채로 다른 서블릿이나 JSP로 이동할 때 사용되며, sendRedirect는 새로운 URL로 이동하고자 할 때 사용됩니다.

 

 

다만 한글처리를 하지 않아 영어만 깨지지 않는다.

아래는 셔플로 인해 무작위로 list 화 돼서 출력되는 것이 보인다. 

 

 

한글 변경도 UTF-8 로 오류 없이 설정해준다. 

 

 

※ do get, do post

1. doGet:
   • doGet 메서드는 HTTP GET 요청에 대한 처리를 담당합니다.
   • 주로 데이터의 조회나 검색과 같은 요청에 사용됩니다.
   • URL의 쿼리 문자열 파라미터를 통해 데이터를 전달합니다.
   • GET 요청은 브라우저에서 링크를 클릭하거나 URL을 직접 입력할 때 발생합니다.
   • 예를 들어, /exampleServlet?param1=value1&param2=value2와 같은 형식으로 GET 요청이 전달됩니다.
2. doPost:
   • doPost 메서드는 HTTP POST 요청에 대한 처리를 담당합니다.
   • 주로 데이터의 생성이나 변경과 같은 요청에 사용됩니다.
   • POST 요청은 일반적으로 HTML 폼을 통해 서버로 데이터를 제출할 때 발생합니다.
   • 데이터는 요청의 본문(body)에 포함되어 전달되며, URL에는 데이터가 표시되지 않습니다.
   • 예를 들어, HTML 폼에서 <form method="post" action="/exampleServlet">와 같이 POST 요청을 설정한 후 데이터를 전송합니다.

두 메서드의 차이점은 주로 요청의 목적과 데이터 전달 방식에 있습니다. doGet은 데이터 조회에 주로 사용되며, URL의 쿼리 문자열을 통해 데이터를 전달합니다. doPost는 데이터 생성 또는 변경에 주로 사용되며, 요청의 본문을 통해 데이터를 전달합니다.

 

 

input 태그 내부에 value=" " 는 실제 입력된 값을 보여준다. 

따라서 출력하고자 하는 내용이 고정돼 있다면 value 에 넣고 기본으로 세팅이 가능

placeholder=" " 은 가상의 값으로 가이드 역할을 한다. 

 

 

 

서블릿에서 보내온 값을 잡기 위해 list 값으로 받는다. 

 

get파라미터는 string만 받는다. 

따라서 list 타입을 위해서 getAttribute 로 가져와서 변환해서 사용한다. 

 

이제 list라는 변수를 이용해서 출력이 가능하다.

 

 

 

for 문을 통해 5명씩 출력되도록 만들어준다. 

 

 

500 : 자바 로직 에러를 나타낸다.

 

그런데 왜 오류가 났을까?

왜냐하면 do get 에는 list 가 정의되지 않았기 때문에

해당 부분이 아예 존재하지 않기 때문에 오류가 난다. 

 

따라서 존재하지 않을 경우에는 아무 일이 일어나지 않고,

do post 에 있는 list 적용을 받았을 경우,

즉 list 에 값이 있을 경우에는 인원을 출력하도록 설정해준다. 

 

 

리스트가 null 일 경우엔 돌지 못하고,

리스트 값이 있을때는 돌게 설정해준다. 

 

 

다섯명씩 나오게 출력하면 다음과 같다.

나머지값이 5로 나눴을때 0이면 5개씩 나눠줄 수 있다.

다만 i 가 0부터 시작임으로 i + 1 를 나눴을때로 설정해준다. 

 

혹은 i 자체로 0 부터 4 까지가 5개가 출력되므로

나머지가 4일 경우로 잘라줄 수도 있다. 

 

 

colspan은 HTML <td>(테이블 셀) 요소에서 사용되는 속성입니다.

이 속성은 테이블의 행(row)에서 셀(cell)을 병합할 때 사용됩니다.

colspan은 테이블에서 셀을 가로로 병합하는 데 사용

 

 

for 구문을 통해 반복해준다. 

만약 5로 나눴을때 나머지가 0이면 <tr> 행을 1줄 생성해준다. 

그리고 그럴 경우 < td>를 통해 팀명도 각각 생성하게 해주는데 i/5 = 0 부터이기 때문에 + 1 을 해준다. 

그리고 <td> list.get(i) 를 통해 5로 나눴을때 나머지가 0일 경우에 1칸씩 생성해준다. 

따라서 아래와 사진과 같다.

 

 

만약 i % 5 != 0 이 아닌 경우에는 노란색 표시가 각각 채워진다.

 

 

팀장 뽑기를 위해서는 <th>  "th"는 "table header" 이며 열(column)의 헤더 정보를 나타낸다.

 

 

names.replaceAll(" ",""); : 입력값에 공백 포함되어 있을때, 브라우저에서는 공백없이 출력되도록 해줌

 

동기 통신방법 (탁구처럼 한쪽이 보내면 다른쪽이 받고 계속 주고받는거)

팀만들기 할때마다 전체 페이지가 새로고침됨 (오늘 만든 팀뽑기)

 

비동기 통신방법 (한쪽이 계속 보내는거, 상대쪽이 받던 안받던 상관없이 클라이언트가 계속 통신하는거)

페이지는 그대로 있는데 특정부분만 새로고침되게 

=>  나중에 배울거 

ex) ajax

 

 

이미지 파일 별도 생성하기 (크기는 16 size 로 진행하여 img 파일 별도 생성하여 저장)

 

https://www.iconfinder.com/

7,575,000+ free and premium vector icons, illustrations and 3D illustrations

 

detail.jsp

 

class title 부분에 이미지 추가

<img alt="수정" src="./img/update.png" title="수정하기"> 

<img alt="삭제" src="./img/delete.png" title="삭제하기"> 

이미지가 안뜰 때 나올글자

 

윗부분에 script 태그 생성 후 내부에 update() 함수 생성

 

수정 버튼 클릭 시 해당 팝업 나오도록 설정된다.

 

confirm() 을 통해 

참 거짓으로 물어본다.

 

 

참 거짓으로 나오는지는 alert 으로 묶어서 확인이 가능하다. 

 

 

true 인 경우 확인 알람창도 뜨게 설정 가능하다. 

 

 

onclick 에서 함수 update에 매개변수를 우리가 가져온 ${detail.bno }  넣어주고

script의 함수 update에서 num으로 받아온다.

 

 

그러면 아래와 같이 bno 값이 담기는 것을 확인할 수 있다.

 

 

삭제 버튼에는 onclick = del() 함수 추가

(스크립트에서 delete는 예약어로 사용되고 있어서 함수명으로 사용불가)

 

물음표 뒤가 파라미터

 

 

삭제버튼 누르면 다음과 같이 번호 연결된 것 확인 가능하다. 

 

 

k 는 = 뒤에 안붙었으므로 아무것도 안뜬다.

key = value 형태인건데 k처럼 key 만 있는 경우도 있음

 

Delete 서블릿 생성

페이지에 따라 리다이렉트 처리로 이동하는 거 확인 가능 

글 삭제하기 버튼 누르고 팝업창에서 확인 눌러주면

다시 ./board 페이지로 완전히 다른 주소로 이동

 

 

생성하는 역할이므로 do post 에 등록해준다. 

delete 메소드를 만들어주는데 없기 때문에 에러가 생긴다.

 

* BoardDAO.java

 

따라서 [BoardDAO.java] 에 delete() 메소드생성해준다.

dao 에 자동으로 생성하면 오류 삭제된다. 

 

설명 요청

 

 

길이에 따라 조건 걸어주기

string 은 length()

배열은 그냥 length 로 길이를 구한다. 

 

 

콤마가 있는지 여부를 검사해서 로직을 진행시키려고 초반에 걸어준다. 

이를 위해서 if else 구문을 걸어준다. 

 

포함 여부는 contains() 를 통해 확인 가능하다. 

만약 포함되어 있다면 아래 우리가 진행했던 배열 리스트 저장 및 섞어주기 데이터 전송 등 업무를 처리하고,

그렇지 않다면 다시 team 창으로 새로운 url 로 던져준다. 

 

참고로 리다이렉트는 무조건 get 으로 간다. 

따라서 doGet 에 있는 메소드가 실행된다. 

 

doGet() 메소드가 실행되어 team.jsp로 이동된다. 

입력창 비어있거나 콤마가 없는상태로 팀만들기 버튼눌러주면 다시 원래의 페이지로 리셋된다.

 

 

입력창이 비어있으면 버튼을 못누르게 설정해보자. 

원래 있던 required= "required" 를 삭제하고 onsubmit 을 사용한다. 

 

버튼 클릭했을 때 " " 를 실행하는 것이 onsubmit이다.

따라서 버튼을 누르면 check() 함수가 실행된다.

 

return check() 가 참일 경우 action 으로 넘겨버리라는 뜻이다.

 

※ name, id, class

- name : servlet 에 보낼 때

class와 name 은 여러개 처리 가능하여 ElementsByName 에서 s 붙는다. 

- id, class 는 주로 css 보낼 때  

 

 

check() 함수를 만들어준다. 

let 을 통해 input 에 있는 names 값을 가져오게 만든다. 

[ ] 번지는 각 name 의 갯수 의미한다.

우리는 name 이 한 개 여서 상관없지만 만약 추가로 name 밑에 사용했다면

해당하는 번지를 선택해야 한다. 

 

그렇기 때문에 최초에 값을 아예 한 개의 값만 설정하는 id 로 설정했었어도 된다. 

names.value 를 통해 각 값을 나타낼 수 있고

이를 통해 lenght, indexOf 로 각 특징에 맞는 값을 추출할 수 있다. 

 

names.focus() : 해당 부분으로 커서 옮겨준다. 

 

return false 는  action 으로 가는 것을 막기 위해서이다.

왜냐하면 action 으로 가면 새로운 창이 새로 뜨기 때문이다. 

참일경우에는 action 진행, 거짓일 경우에는 진행되는걸(페이지가 넘어가는걸) 막아주는 역할

 

alert(names.value.indexOf(","));

=> 콤마가 있는 자리(index)를 알려줌

콤마가 없으면 -1을 리턴, 이때 if 를 통해 멈추게 만들자

 

 

if 를 통ㅇ해 , 있는지 여부 확인해서 -1 나오면 (값이 없다면)

alert 를 통해 올바른 값을 입력해달라는 경고창을 띄우고

names.value=""; 을 통해 내용을 싹 지우고 다시 쓰게 만든다.

names.focus() 를 통해 커서를 해당 입력칸으로 옮긴다. 

 

이 작업은 추후에 아이디 패스워드 창을 만들 때 많이 이용하니 참고하자.

 

* 요청사항

-  serialVersionUID 무엇인가?

 

cashbee Service Request System

cashbee Service Request System