오늘은 Ajax를 중심으로 게시판과 방명록 페이지를 만들어볼 것이다.
화면에 띄울 웹페이지는 게시판과 방명록 페이지 총 2개이다.
각각의 파일과 이를 잇는 파일들을 살펴보겠다.
<방명록 웹페이지 구현> Guest.jsp
위의 파일을 만들기 전에 먼저 GuestDTO.java 파일에 getter,setter를 위해 변수들을 입력해주었으며
사용한 변수들 중 테이블에 만든 변수는 num, name, email, content, ipAddr, created 이며
listNum, pageNum 는 추가로 만들어주었다.
- body
구현될 body 부분을 간략하게 가져와보았다.
오늘은 css에는 집중을 안할 것이기 때문에 input의 id가 어떤건지 확인하면 된다.
id는 jQuery를 읽어내기 위함이다.
<body>
<span id="listData" style="display: none;"></span>
//
<tr>
<td width="60" height="30" bgcolor="#eeeeee" align="center">작성자</td>
<td width="240" height="30" style="padding-left: 10px;">
<input type="text" id="name" size="35" maxlength="20" class="boxTF"/>
</td>
</tr>
//
<tr>
<td width="600" colspan="4" height="30" align="right" style="padding-right: 15px;">
<input type="button" value="등록하기" class="btn2" id="sendButton"/>
</td>
</tr>
</table>
</body>
'작성자' 외에 '이메일', '내용'도 입력해주었으며 각각 email, content라는 id로 지정했다.
'등록하기' 버튼 역시 아이디를 주었다.
- script
실행할 함수들을만들 것이다.
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
listPage(1);
});
$(document).ready(function(){
$("#sendButton").click(function(){
var params = "name=" + $("#name").val() + "&email=" + $("#email").val() + "&content=" + $("#content").val();
$.ajax({
type:"POST",
url:"<%=cp%>/guest/created.action",
data:params,
success:function(args){
$("#listData").html(args);
$("#name").val("");
$("#email").val("");
$("#content").val("");
$("#name").focus();
},
beforeSend:showRequest,
error:function(e){
alert(e.responseText);
}
});
});
});
제이쿼리를 통해 메소드를 실행한다.
listPage 메소드는 바로 아래에 나올 예정이니 참고 바란다.
$("#sendButton") : ID가 sendButton인 값을 가져온다.
변수 params 에는 사용자가 입력한 값을 넣어주기 위함이며
ajax를 통해 url에 보낸다.
성공할 경우 id가 listData인 곳에 값을 넣어준다.
또한 여기서 Ajax만의 차이점이 있다.
Ajax는 새로고침 기능을 사용안하기 때문에 새로고침과 같이 기존 입력한 값이 없어지기 위해선
해당 부분에 null로 초기화해야 한다.
데이터를 보내기 전에 showRequest 함수를 실행할 것이며 이 역시 밑에서 나올 예정이다.
- listPage() 메소드
앞부분에서 나왔던 가장 먼저 실행되는 메소드이다.
function listPage(page){
var url = "<%=cp%>/guest/list.action";
$.post(url,{pageNum:page},function(args){
$("#listData").html(args);
});
$("#listData").show();
}
post 방식으로 보낼 것이며 제이쿼리이므로 보낼 데이터에 {}로 감싸준다.
데이터가 정상적으로 돌아왔을 경우에는, function함수가 실행된다.
아까 <body>에서 id=listData부분에 display를 none으로 해주었기에
show() 메소드로 출력할 내용이 나오게 한다.
- showRequest() 메소드
입력한 내용의 유효성 검사를 실행할 함수이다.
function showRequest(){
var name = $.trim($("#name").val());
//
if(!name){
alert("\n이름을 입력하세요.");
$("#name").focus();
return false;
//
if(content.length>=200){
alert("\n내용은 200자까지만 가능합니다.");
$("#content").focus();
return false;
}
return true;
}
trim : 값을 중심으로 양쪽의 공백을 없앰.
id=name인 부분의 값의 양쪽 공백을 없앤 걸 변수에 넣는다.
또한 각각의 값이 입력되지 않을 때마다 alert와 함께 false값을 반환한다.
이 두 내용은 이름 외에 이메일, 내용 부분도 써주었지만 설명상 생략하였다.
또한 내용은 추가로 값의 length를 통해 내용 길이 제한도 두었다.
모든 경우에 다 넘어가면 trun값을 반환하게 된다.
연결 메소드 <GuestAction.jsp>
가상 주소를 action으로 만들었기 때문에 파일명 역시 마찬가지이다.
sqlMap파일에서 위에 만든 guest.action 또는 list.action이 올 때 각각 created / list 메소드로 연결하도록 했으며 아래의 파일에서 그 메소드들을 살펴보겠다.
- Created 메소드
guest.action 실행 시 넘어올 메소드이다.
public class GuestAction extends ActionSupport implements Preparable,ModelDriven<GuestDTO>{
private GuestDTO dto;
@Override
public GuestDTO getModel() {
return dto;
}
@Override
public void prepare() throws Exception {
dto = new GuestDTO();
}
public String created() throws Exception{
HttpServletRequest request = ServletActionContext.getRequest();
CommonDAO dao = CommonDAOImpl.getInstance();
int numMax = dao.getIntValue("iguest.numMax");
dto.setNum(numMax + 1);
dto.setIpAddr(request.getRemoteAddr());
dao.insertData("iguest.insertData", dto);
return list();
}
먼저 지난 블로그 글에서 보았듯이 ActionSupport 와 Preparable,ModelDriven을 상속하였으며 오버라이딩하였다.
Struts2 특성 상 request를 따로 호출하여 만들었으며
DB 연결을 위해 commonDAO 메소드도 호출했다. 해당 내용은 지난 iBatis 글을 참고하면 될 것 같다.
입력받은 데이터를 insert해주며 여기서 주의할 점은
return 시 list() 메소드로 바로 가야한다는 것이다.
redirect 역시 새로고침이므로 Ajax에선 새로고침없이 값이 넘어갈 수 있도록 바로 찾아갈 메소드를 입력한다.
- list 메소드
list.action 실행 시 넘어올 list 메소드이다.
public String list() throws Exception{
HttpServletRequest request = ServletActionContext.getRequest();
CommonDAO dao = CommonDAOImpl.getInstance();
//페이징 처리 생략
Map<String, Object> hMap = new HashMap<String, Object>();
int start = (currentPage-1)*numPerPage+1;
int end = currentPage*numPerPage;
hMap.put("start", start);
hMap.put("end", end);
List<Object> lists = dao.getListData("iguest.listData", hMap);
//일렬번호
int listNum,n=0;
Iterator<Object> it = lists.iterator();
while(it.hasNext()) {
GuestDTO vo = (GuestDTO)it.next();
listNum = totalDataCount-(start+n-1);
vo.setListNum(listNum);
vo.setContent(vo.getContent().replaceAll("\n", "<br/>"));
n++;
}
request.setAttribute("lists", lists);
//+그 외 페이징 처리 변수
return SUCCESS;
}
페이지 밑에 글 갯수에 따른 페이징 처리는 그동안 글에서 설명해왔으므로 생략하겠다.
list에서 담을 데이터 타입이 다양하므로 map을 통해 넣어줄 것이다.
먼저 한 페이지에서 보여줄 글 번호인 start와 end를 입력해준다.
1차로 put을 통해 map에 넣어 lists에 값을 담으며
삭제되는 글이 있더라도 그에 맞게 다시 일렬번호가 부여될 수 있는 'listNum'도 입력한다.
Iterator로 lists에 있는 값들을 가져온다.
setContent는 입력한 내용의 줄을 실제 줄마다 띄우도록 처리한 것이다.
lists 뿐만 아니라 페이징 처리를 위해 입력했던 변수들은
setAttribute로 담아서 보낸다.
list 페이지는 리다이렉트할 필요 없으니 바로 반환 값을 내준다.
이제 추가로 경로를 설정하여 입력하면 리스트에 입력 내용이 뜰 수있으며
게시판과 방명록을 모두 한 페이지에서 보게 되는 것이다!
3월 18일 수업 🌕
'개발 교육 TIL > front-end' 카테고리의 다른 글
| [Node.js] View Template(뷰템플릿) - ejs 사용하기 + jade (0) | 2022.04.08 |
|---|---|
| [Node.js] Semantic-Ui 라이브러리 적용하기 (0) | 2022.04.07 |
| [Javascript] DOM(Document Object Model) - HTML DOM 객체 생성 (0) | 2022.03.17 |
| [Ajax] get 또는 post 방식으로 데이터 보내기, 자바스크립트 메소드 (0) | 2022.03.16 |
| [Ajax] Ajax 개념, 기본 예제 - jQuery, XMLHttpRequest (0) | 2022.03.15 |
