WEB
웹 애플리케이션에서 사용자에게 정보를 전달하기 위해 안내창을 사용하는 것은 매우 중요함
안내창은 사용자에게 성공 또는 실패와 같은 정보를 시각적으로 효과적으로 전달할 수 있는 수단이기 때문
안내창 유형
- 모달 창 (Modal Window)
- 정의: 모달 창은 사용자가 다른 작업을 하기 전에 반드시 상호작용해야 하는 대화 상자임
일반적으로 페이지의 중앙에 나타나며, 배경을 흐리게 하여 사용자의 주의를 끌고 정보를 전달함 - 용도: 사용자에게 정보를 제공하거나 정보를 입력 받기 위해 사용됨
- 정의: 모달 창은 사용자가 다른 작업을 하기 전에 반드시 상호작용해야 하는 대화 상자임
- 스위트알랏 (SweetAlert)
- 정의: SweetAlert는 JavaScript 라이브러리로, 아름답고 사용자 친화적인 알림 창을 제공하는 도구임
기본적인 alert(), confirm(), prompt()보다 더 풍부한 사용자 경험을 제공함 - 용도: 성공, 실패, 경고 등 다양한 상황에 맞는 커스터마이즈된 알림을 제공하는 데 유용함
- 정의: SweetAlert는 JavaScript 라이브러리로, 아름답고 사용자 친화적인 알림 창을 제공하는 도구임
- alert()
- 정의: JavaScript의 기본 알림 함수로, 간단한 팝업 창을 생성하여 메시지를 사용자에게 표시
- 용도: 간단한 정보 전달이나 오류 메시지 표시용으로 사용됨
웹에서 안내창 구현 시 유의할 점
- 스크립트와 페이지 이동
- 문제점: 웹 페이지에서 스크립트를 사용하여 안내창을 띄우는 경우
페이지가 이동하면 스크립트가 실행되지 않을 수 있음. 이는 페이지 주도권 문제로 인해 발생함 - 해결책: 스크립트가 페이지 이동 후에도 계속 작동하도록 하기 위해서는
안내 메시지와 경로를 서버 측에서 전달받아 새로운 페이지에서 이를 처리하도록 할 수 있음
- 문제점: 웹 페이지에서 스크립트를 사용하여 안내창을 띄우는 경우
- 성공/실패 여부 안내
- 설계: 기능 실행 결과에 따라 성공 또는 실패 여부를 사용자에게 알리는 것이 중요기 때문에 이를 위해 안내 메시지와 페이지 이동 경로를 서버에서 처리하고, 뷰 에서는 안내창을 표시하도록 할 수 있음
- 구현 방법: 안내 메세지를 처리하는 전용 페이지를 만들어서,
서블릿에서 안내 메시지와 함께 이 페이지로 리디렉션하거나 데이터를 전달하면
사용자가 페이지를 로드하면 안내 메시지와 함께 적절한 안내창이 표시되도록 할 수 있음
안내창 처리
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>안내 페이지</title>
</head>
<body>
<script>
alert('${msg}');
location.href='${path}';
</script>
</body>
</html>
forward로 넘어온 안내 메세지 데이터와 안내후 이동할 액션데이터
ActionForward forward = new ActionForward();
if(flag) {
System.out.println("DeleteReplyAction 로그 : 댓글 삭제 성공");
forward.setPath("boardDetail.do?boardNum="+board_num);
forward.setRedirect(true);
}
else {
System.out.println("DeleteReplyAction 로그 : 댓글 삭제 실패");
request.setAttribute("msg", "댓글 삭제 실패. 다시 시도하세요.");
request.setAttribute("path", "boardDetail.do?boardNum="+board_num);
forward.setPath("info.jsp");
forward.setRedirect(false);
}
System.out.println("DeleteReplyAction 끝");
return forward;
요롷게 넘겨주면
야 ~ 호 ~
'javaboiii의 Web' 카테고리의 다른 글
| Web - 구글 이메일 API (0) | 2024.09.05 |
|---|---|
| Web - 필터(Filter) (0) | 2024.09.05 |
| Web - M V C 작업 시 유의사항 (0) | 2024.09.03 |
| Web - 리스너(Listener) (0) | 2024.09.02 |
| Web - 8) 제이쿼리를 사용한 태그 제어와 Ajax (0) | 2024.08.30 |