응용 과제-등록화면 만들기

다음 요구사항을 만족하게 개발하시오.

1. HTML 부분 (제품 추가 폼)

목표: 사용자가 제품을 추가할 수 있는 폼을 제공.
요구사항:
- <form> 태그를 사용하여 제품 정보를 입력받을 수 있도록 구현.
- 제품 코드 선택을 위한 <select> 태그와 입력 필드(제조사명)를 추가.
- 사용자가 "제품 코드"를 선택하지 않았을 경우 폼 제출을 막는 JavaScript 검증 기능 추가.
- 제품 코드는 반드시 선택해야 하며, 이를 체크하는 검증이 필요.
- 제조사명은 사용자가 직접 입력할 수 있도록 텍스트 입력 필드 제공.
- 제출 버튼을 클릭하면 서버로 데이터를 전송해야 함 (POST 방식이 아닌 GET 방식으로 전송).

2. JavaScript 부분 (폼 검증)

목표: 사용자가 폼을 제출하기 전에 필수 입력 항목을 검증.
요구사항:
- validateForm() 함수에서 제품 코드가 비어 있는지 확인하고, 비어 있다면 경고 메시지를 표시.
- 경고 메시지: "제품 코드를 선택하세요."

3. JSP 부분 (서버 처리 및 결과 출력)

목표: 사용자가 제출한 폼 데이터를 처리하고 결과를 출력.
요구사항:
- action 파라미터 값이 "createcd"일 때만 제품 추가 로직을 수행.
- 제품 코드와 제조사명을 받아서 제품 정보를 처리해야 함.
- 제조사명은 콤마로 구분된 값으로 여러 개를 입력받을 수 있도록 하고, 이를 ArrayList<String> 형태로 저장.
- 제품 정보를 저장하는 HashMap (productMap)에 제품 코드와 제조사명 목록을 저장.
- 처리 후 결과 메시지를 표시: "제품 코드 [코드]가 추가되었습니다."
- 저장된 제품 정보를 표 형식으로 출력 (제품 코드와 해당 제조사 목록을 출력).

4. Java 클래스 (ProductInfo 및 PersonInfo)

목표: 제품 정보와 작성자 정보를 관리하는 클래스들 작성.
ProductInfo 클래스:
- productMap을 HashMap<String, ArrayList> 형태로 저장 (제품 코드 -> 제조사명 목록).
- 제품을 추가하는 메서드 create(String code, ArrayList<String> companies) 구현.
- 초기 데이터로 두 개의 제품 코드를 추가 (A100, A200).
- Getter 메서드로 productMap 반환.
PersonInfo 클래스:
- 작성자의 이름, 비밀번호, 작성일을 관리.
- 생성자를 통해 작성자 정보 초기화.
- Getter 메서드로 작성자 정보 반환 (이름, 비밀번호, 작성일).

5. 기타 요구사항

페이지 네비게이션 및 스타일링:
- 제품 추가 폼은 사용자가 보기 쉽도록 적절한 스타일링 적용.
- 폼과 결과 메시지 사이에 적당한 여백을 두어 사용자 인터페이스를 깔끔하게 유지.
유효성 검사:
- JavaScript로 클라이언트 측에서 제품 코드 선택 여부를 검증하여 서버에 잘못된 데이터가 전송되지 않도록 처리.

요구사항 목록:

HTML:
- 제품 코드 선택을 위한 <select> 태그.
- 제품 코드 선택 유효성 검사 (JavaScript).
- 제조사명 입력 필드 (<input type="text">).
- 제품을 추가하는 버튼 (<button type="submit">).
JavaScript:
- 폼 제출 전에 제품 코드가 선택되었는지 확인.
- 선택되지 않았을 경우 경고 메시지 출력.
JSP (서버 처리):
- GET 방식으로 데이터를 수신 (request.getParameter).
- 제품 코드와 제조사명 입력 처리.
- 제조사명을 콤마로 구분하여 ArrayList<String>에 저장.
- 제품 정보를 HashMap에 저장.
- 제품 정보가 정상적으로 추가되었음을 결과 페이지에 표시.
Java 클래스:
- ProductInfo 클래스:
  - 제품 정보를 HashMap<String, ArrayList<String>> 형태로 저장.
  - create 메서드를 통해 제품을 추가.
  - getProductMap 메서드로 저장된 제품 정보를 반환.
- PersonInfo 클래스:
  - 작성자 정보 (이름, 비밀번호, 작성일)를 저장.
  - Getter 메서드를 통해 정보를 반환.

답:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제품 추가</title>
    <script>
    function validateForm() {
        // 제품코드 선택 여부 확인
        var code = document.getElementById("create-code").value;
        
        if (code === "") {
            alert("제품 코드를 선택하세요.");
            return false; // 폼 제출을 막음
        }
        
        return true; // 폼 제출 허용
    }
</script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1, h2 {
            color: #333;
        }
     form {
            margin-bottom: 200px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            max-width: 500px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block; /* 라벨을 블록으로 표시하여 한 줄 차지 */
            margin-bottom: 5px; /* 라벨과 입력 필드 사이 간격 */
            font-weight: bold;
        }
        input[type="text"], select, button {
            padding: 8px;
            width: 100%;
            font-size: 16px;
            box-sizing: border-box; /* 패딩 포함 크기 계산 */
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>

    <h1>제품 추가 시스템</h1>

    <!-- 제품 추가 -->
    <div class="action">
        <h2 class="action-title">제품 추가</h2>
        <form action="find.jsp" method="get" onsubmit="return validateForm()">
        <input type="hidden" name="action" value="createcd" />
            <div class="form-group">
                <label for="create-code">제품코드</label>
                <select id="create-code" name="code">
                    <option value="">제품 코드를 선택하세요</option>
                    <option value="A300">A300</option>
                    <option value="A400">A400</option>
                    <option value="A500">A500</option>
                </select>
            </div>
            <div class="form-group">
                <label for="create-companies">제조사명</label>
                <input type="text" id="create-companies" name="companies" placeholder="예: 삼성전자, 하이닉스" required />
            </div>
            <button type="submit">추가</button>
        </form>
    </div>

</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="work1.*" import="java.util.*"%>
<%
ProductInfo product = new ProductInfo();
String action = request.getParameter("action");
String resultMessage ="";

if ("createcd".equals(action)) {
    String code = request.getParameter("code");
    String companies = request.getParameter("companies");
    
    // 제조사명을 콤마로 나누어 ArrayList에 추가
    ArrayList<String> companyList = new ArrayList<>();
    String[] companyArray = companies.split(",");
    for (String company : companyArray) {
    	
    	companyList.add(company.trim());
    }
    
    // 제품 추가
    product.create(code, companyList);
    resultMessage = "제품 코드 " + code + "가 추가되었습니다.";
} 

// PersonInfo 예시
PersonInfo person = new PersonInfo("한국인", "1004", "2019-10-31");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제품 추가 결과</title>
</head>
<body>
<h3>제품 추가 결과</h3>
<p><%= resultMessage %></p>
<table border="1">
    <tr>
        <th>제품 코드</th>
        <th>제조사 목록</th>
    </tr>
    <% for (Map.Entry<String, ArrayList<String>> entry : product.getProductMap().entrySet()) { %>
        <tr>
            <td><%= entry.getKey() %></td>
            <td>
                <%= String.join(", ", entry.getValue()) %>
            </td>
        </tr>
    <% } %>
</table>
<hr>
<h5>작성자: <%= person.getName() %> 비번: <%= person.getPw() %> 작성일: <%= person.getDate() %></h5>
</body>
</html>

package work1;

import java.util.Date;
import java.util.HashMap;
import java.util.ArrayList;

public class ProductInfo {
    String code;
    String comp;
    Date date;

    private HashMap<String, ArrayList<String>> productMap = new HashMap<>();

    public ProductInfo() {
        // 초기 데이터 설정
        ArrayList<String> samsung = new ArrayList<>();
        samsung.add("삼성전자");
        samsung.add("삼성디스플레이");
        productMap.put("A100", samsung);

        ArrayList<String> hynix = new ArrayList<>();
        hynix.add("하이닉스");
        hynix.add("SK하이닉스");
        productMap.put("A200", hynix);
    }
    
    // Getter 메서드 추가
    public HashMap<String, ArrayList<String>> getProductMap() {
        return productMap;
    }
    

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getComp() {
        return comp;
    }

    public void setComp(String comp) {
        this.comp = comp;
    }

    public Date getDate() {
        return date;
    }

    public void setDate(Date date) {
        this.date = date;
    }

    // CREATE: 제품 코드와 제조사명을 추가하는 메서드
    public void create(String code, ArrayList<String> companies) {
        productMap.put(code, companies);
    }

    // 기존 제품 조회 및 처리 부분은 생략
}

package work1;

public class PersonInfo {
 String name;
 String pw;
 String date;
 
 
public PersonInfo(String name, String pw, String date) {
	super();
	this.name = name;
	this.pw = pw;
	this.date = date;
}

public String getName() {
	return name;
}
public void setName(String name) {
	this.name = name;
}
public String getPw() {
	return pw;
}
public void setPw(String pw) {
	this.pw = pw;
}
public String getDate() {
	return date;
}
public void setDate(String date) {
	this.date = date;
}
}

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

제이의개발노트

응용 과제-등록화면 만들기

1. HTML 부분 (제품 추가 폼)

2. JavaScript 부분 (폼 검증)

3. JSP 부분 (서버 처리 및 결과 출력)

4. Java 클래스 (ProductInfo 및 PersonInfo)

5. 기타 요구사항

요구사항 목록:

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역