이번에 포스팅할 내용은 회원 비회원 상관없이 볼 수 있는 소개화면과 강의목록화면, 관련 기능구현이다.
시작페이지에서 두번째 탭은 "와이저"라 명명했다. 이 사이트에 대해 간략하게 소개하는 페이지이다.
about.jsp
(소개 페이지. 내용은 캠블리에서 복사 붙여넣기 했다.)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/include/header.jsp" %>
<style>h2{
color:#484848;
font-size: 1.4em;
}
</style><!-- Image Showcases --><sectionclass="showcase"><divclass="container-fluid p-0"><divclass="row no-gutters"><divclass="col-lg-6 order-lg-2 text-white showcase-img"style="background-image: url('/Tutoring/img/about1.jpg'); background-position: center center"></div><divclass="col-lg-6 order-lg-1 my-auto showcase-text"><h2>복습으로 학습 효과 2배!</h2><pclass="lead mb-0"><b>수업 동영상</b> 모든 수업은 영상파일로 저장 되며, 튜터 피드백과 함께 효과적으로 복습할 수 있습니다.</p></div></div><divclass="row no-gutters"><divclass="col-lg-6 text-white showcase-img"style="background-image: url('/Tutoring/img/about2.jpg');"></div><divclass="col-lg-6 my-auto showcase-text"><h2>영어회화 두려움 떨쳐내기</h2><pclass="lead mb-0"><b>번역기</b> 영어로 생각나지 않을 땐 채팅창에 한국어로! 자동 번역 기능이 있어 걱정 없어요</p></div></div><divclass="row no-gutters"><divclass="col-lg-6 order-lg-2 text-white showcase-img"style="background-image: url('/Tutoring/img/about3.jpg'); background-position: center center""></div><divclass="col-lg-6 order-lg-1 my-auto showcase-text"><h2>내 일정에 딱 맞는 수업</h2><pclass="lead mb-0"><b>예약</b> 마음에 드는 튜터와 내가 원하는 시간에 미리 예약해 만들어 나가는 유연한 학습 스케쥴</p></div></div></div></section>
<%@ include file="/include/footer.jsp" %>
특별하게 서블릿으로 이동하여 구현해야할 기능은 없다.
시작페이지에서 세번째 탭에 해당하는 "과정"이다. 강의목록을 카드형식으로 볼 수 있다.
jsp가 먼저 실행되는 것이 아니라 링크를 통해 서블릿으로 이동하면 다시 카드형식의 jsp로 내보낸다.
WClassCourseList.java
(강의목록을 보여주는 서블릿으로 DB에 있는 강의를 ArrayList에 담아 courseList.jsp로 이동하여 뿌린다. 서블릿의 경로는 "/Tutoring/class/courseList"이다. )
파라미터 값으로 받아온 num을 들고 WClassDAO의 classView메소드를 수행한다.
그리고 courseDetail.jsp로 이동한다.
<WClassDAO의 classView메소드>
관리자 페이지에서 강의목록을 누르고, 제목을 누르면 떴던 classView 메소드와 동일하다. (다만 값을 뿌려줄때의 양식이 다르기에 jsp가 다른것이고, jsp로 넘어가는 서블릿도 분리한 것이다. 전자는 ClassDetail.jsp와 WClassDetailAction.java이고 지금은 courseDetail.jap와 WClassCourseDetail.java이다.)
강의소개영역, 강의별 수강후기 게시판 영역, 게시글 검색 영역, 글쓰기폼 영역으로 이루어져있다.
수강후기와 관련된 기능들은 다음 포스팅에서 소개하고, 지금은 강의소개 영역만 보겠다.
WClassCourseDetail.java에서 dto이름으로 저장한 dto객체를 뿌린다.
<!-- 강의 소개 --><div><ahref="/Tutoring/class/courseList"><b>〈</b> 모든 과정</a></div><divclass="card"><formaction="/Tutoring/class/cartInsert"method="post"id="frm"><!-- 등록하고자 하는 강의 번호 --><inputtype="hidden"id="classnum"name="classnum"value="${dto.classnum}"><inputtype="hidden"id="classname"name="classname"value="${dto.classname}"><inputtype="hidden"id="userid"name="userid"value="${sessionScope.userid}"><!-- 카드 영역 --><divclass="card-header"style="background-image: url('/Tutoring/upload/${dto.uploadFile}');"></div><divclass="card-body"><divclass="card-body-header" ><h5>${dto.classname}</h5><pclass = "card-body-nickname"style="font-size:0.9em;">${dto.topic}</p></div><divclass="button"><inputtype="button"class="btn btn-info"value="등록하기"id="subscribe"style="width: 100%;"></div></div><!-- 카드 영역 끝 --><br/></form></div><br/><divclass="content"><pstyle="font-size: 1.25em;">개요</p><br/><p>왜 이런 과정을 수강해야 하나요?</p><br/><spanstyle="color: gray;">${dto.content}</span></div><!-- 강의 소개 끝 -->
ClassListResult.jsp는 WClassListAction.java에서 넘어온 강의목록과 페이징 영역을 포함하고 있다.
강의목록을 클릭했을때 ClassList.jsp->WClassListAction.java->ClassResult.jsp로 이동한다.
나중에 설명할 장바구니 cartList.jsp와는 차이점이 있다. (cartList.jsp에는 페이징과 검색기능이 없다. $.getJSON으로 cartList.java에 가고 JSONObject과 JSONArray객체를 만들어서 뿌릴 값들을 저장한다. 그다음 다시 cartList.jsp로 돌아와서 $.each로 뿌린다.)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style>h5a{
text-decoration: none;
color: black;
}
.back2{
margin-top: 20px;
background-color: #f8f9fa;
}
.sidebar{
float: left;
width: 200px;
height:200px;
margin-top: 60px;
margin-left: 60px;
}
.sidebarul{
list-style: none;
}
.sidebarula{
line-height: 2em;
}
</style></head><body><asideclass="sidebar"><ulid="menu"><li><h5><ahref="/Tutoring/class/ClassInsert"> 강의입력</a></h5></li><li><h5><ahref="/Tutoring/class/ClassList.jsp"> 강의목록</a></h5></li><li><h5><ahref="/Tutoring/member/Adminview"> 계정설정</a></h5></li></ul></aside><divclass="container"><br/><h5><ahref="ClassList.jsp">강의목록(<spanid="cntSpan">${count}</span>)</a></h5><divclass="back2"><tableclass="table table-hover"><thead><tr><th>번호</th><th>강의분류</th><th>강의명</th><th>강의 주제</th></tr></thead><tbody><c:forEachitems="${wclass}"var="wclass"varStatus="st"><tr><td>${rowNo-st.index}</td><c:iftest="${wclass.clevel eq 'basic'}"><td>유창한 영어의 기본 요소</td></c:if><c:iftest="${wclass.clevel eq 'career'}"><td>경력 개발</td></c:if><c:iftest="${wclass.clevel eq 'expression'}"><td>자신을 표현해보세요</td></c:if><c:iftest="${wclass.clevel eq 'test'}"><td>시험 준비</td></c:if><td><ahref="ClassDetail?num=${wclass.classnum}">${wclass.classname}</a></td><td>${wclass.topic}</td></tr></c:forEach></tbody></table></div></div><divalign="center"class="text-success"><c:iftest="${pu.startPage>pu.pageBlock }"><!-- 이전 --><ahref="javascript:getData(${pu.startPage-pu.pageBlock},'${pu.field}','${pu.word}')">[이전]</a></c:if><c:forEachbegin="${pu.startPage}"end="${pu.endPage}"var="i"><!-- 페이지 출력 --><c:iftest="${i==pu.currentPage}"><!-- 현재 페이지 --><c:outvalue="${i}"/></c:if><c:iftest="${i!=pu.currentPage}"><!-- 현재 페이지 아닌 경우 링크 부여--><ahref="javascript:getData(${i},'${pu.field}','${pu.word}')">${i}</a></c:if></c:forEach><c:iftest="${pu.endPage<pu.totPage}"><!-- 다음--><ahref="javascript:getData(${pu.endPage+1},'${pu.field}','${pu.word}')">[다음]</a></c:if></div><br/>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/include/header.jsp" %>
<style>h1{
text-align: left;
}
</style><!-- Masthead --><headerclass="masthead text-white text-center"><divclass="overlay"></div><divclass="mainLine"><spanstyle="width: 100%; height: 200px;"></span><h1style="color:#484848; font-size: 48px; line-height: 1.5em;">생생한 원어민 화상영어,<br/> 지금바로 시작하세요!</h1></div><form><divclass="form-row"style="width: 30%;"><divclass="col-12 col-md-9 mb-2 mb-md-0"><inputtype="email"class="form-control form-control-lg"placeholder=" 이메일 주소"></div><divclass="col-12 col-md-3"><inputtype="button"value="회원가입"class="btn btn-block btn-lg btn-primary"onclick="location.href='/Tutoring/member/insert'"></div></div></form></header><!-- Icons Grid --><sectionclass="features-icons bg-light text-center"><divclass="container"><divclass="row"><divclass="col-lg-4"><divclass="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3"><divclass="features-icons-icon d-flex"><iclass="icon-screen-desktop m-auto text-primary"></i></div><h3>수업</h3><pclass="lead mb-0">튜터와 만들어 나가는 유연한 학습 스케쥴</p></div></div><divclass="col-lg-4"><divclass="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3"><divclass="features-icons-icon d-flex"><iclass="icon-layers m-auto text-primary"></i></div><h3>커리큘럼</h3><pclass="lead mb-0">내 레벨에 맞춰 선택해 더욱 체계적인 수업 진행</p></div></div><divclass="col-lg-4"><divclass="features-icons-item mx-auto mb-0 mb-lg-3"><divclass="features-icons-icon d-flex"><iclass="icon-check m-auto text-primary"></i></div><h3>수료증</h3><pclass="lead mb-0">10시간 이상 수업 시, 캠블리 수료증 발급</p></div></div></div></div></section><!-- Testimonials --><sectionclass="testimonials text-center bg-light"><divclass="container"><h2class="mb-5">유학 없이도 유창하게 영어로 말할 수 있어요!</h2><divclass="row"><divclass="col-lg-4"><divclass="testimonial-item mx-auto mb-5 mb-lg-0"><imgclass="img-fluid rounded-circle mb-3"src="img/testimonials-1.jpg"alt=""><h5>Margaret E.</h5><pclass="font-weight-light mb-0">"I have been teaching English for 3 years. I am very patient, kind and I love to learn about new cultures and your thoughts about life."</p></div></div><divclass="col-lg-4"><divclass="testimonial-item mx-auto mb-5 mb-lg-0"><imgclass="img-fluid rounded-circle mb-3"src="img/testimonials-2.jpg"alt=""><h5>Fred S.</h5><pclass="font-weight-light mb-0">"A conversationalist, I have worked internationally in business (operations, sales, training and HR) and am also licensed to teach scuba!"</p></div></div><divclass="col-lg-4"><divclass="testimonial-item mx-auto mb-5 mb-lg-0"><imgclass="img-fluid rounded-circle mb-3"src="img/testimonials-3.jpg"alt=""><h5>Sarah W.</h5><pclass="font-weight-light mb-0">"I own and run a small business, am easy to speak to and hold a TEFL qualification. I look forward to meeting you!"</p></div></div></div></div></section><!-- Call to Action --><sectionclass="call-to-action text-white text-center"><divclass="overlay"></div><divclass="container"><divclass="row"><divclass="col-xl-9 mx-auto"><h2class="mb-4">내게 꼭 맞는 튜터를 찾아보세요</h2></div><divclass="col-md-10 col-lg-8 col-xl-7 mx-auto"><form><divclass="form-row"><divclass="col-12 col-md-9 mb-2 mb-md-0"><inputtype="email"class="form-control form-control-lg"placeholder=" 이메일 주소"></div><divclass="col-12 col-md-3"><inputtype="button"value="회원가입"class="btn btn-block btn-lg btn-primary"onclick="location.href='/Tutoring/member/insert'"></div></div></form></div></div></div></section>
<%@ include file="/include/footer.jsp" %>
header.jsp와 footer.jsp를 나누어서 페이지마다 포함시켰다.
header.jsp
sessionScope.userid 값이 비어있으면 로그인/회원가입 링크가,
sessionScope.admin 값이 1이면 관리자이므로 관리자/로그아웃 링크가,
sessionScope.admin 값이 0이면 일반회원이므로 내계정/로그아웃 링크가 나타난다.
list.gb는 GuestListAction.java 서블릿의 경로인데 여기서 guestList()메소드를 호출.
메소드로 인해 불러온 값들은 listResult.jsp에 뿌려짐.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Insert title here</title><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script></head><body><h5>평가 리스트(<spanid="cntSpan">${count}</span>)</h5><tableclass="table table-hover"><thead><tr><th>번호</th><th>seq</th><th>글쓴이</th><th>평가</th><th>작성일</th><c:iftest="${sessionScope.login!=null}"><th>삭제</th></c:if></tr></thead><tbody><c:forEachitems="${guest}"var="guest"varStatus="st"><tr><td>${rowNo-st.index}</td><td>${guest.num}</td><td><ahref="javascript:fview(${guest.num})">${guest.name}</a></td><td>${guest.grade}</td><td>${guest.created}</td><c:iftest="${sessionScope.login!=null}"><td><ahref="javascript:fdelete(${guest.num},'${guest.name}')">삭제</a></td></c:if></tr></c:forEach></tbody></table><divalign="center"><c:iftest="${pu.startPage>pu.pageBlock }"><!-- 이전 --><ahref="javascript:getData(${pu.startPage-pu.pageBlock},'${pu.field}','${pu.word}')">[이전]</a></c:if><c:forEachbegin="${pu.startPage}"end="${pu.endPage}"var="i"><!-- 페이지 출력 --><c:iftest="${i==pu.currentPage}"><!-- 현재 페이지 --><c:outvalue="${i}"/></c:if><c:iftest="${i!=pu.currentPage}"><!-- 현재 페이지 아닌 경우 링크 부여--><ahref="javascript:getData(${i},'${pu.field}','${pu.word}')">${i}</a></c:if></c:forEach><c:iftest="${pu.endPage<pu.totPage}"><!-- 다음--><ahref="javascript:getData(${pu.endPage+1},'${pu.field}','${pu.word}')">[다음]</a></c:if></div></body></html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Insert title here</title></head><body><formaction="adder.go">
첫번째 수 : <inputtype="text"name="num1"><br>
두번째 수 : <inputtype="text"name="num2"><br><inputtype="submit"value="더하기"></form></body></html>
bbs.jsp: 간단한 글쓰기 폼
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Insert title here</title></head><body><h1>글쓰기</h1><formaction="bbs.go"method="post">
이름 : <inputtype="text"name="name"><br>
제목 : <inputtype="text"name="title"><br>
내용 : <br><textarearows="5"cols="20"name="content"></textarea><br><inputtype="submit"value="전송"></form></body></html>
personForm2.jsp: 간단한 개인정보 입력 폼
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Insert title here</title></head><body><h2>개인 정보 입력</h2><formaction="person2.go"method="post">
이름: <inputtype="text"name="name"><br>
아이디: <inputtype="text"name="id"><br>
패스워드 : <inputtype="password"name="password"><br>
성별:
<labelfor="man"> 남</label><inputtype="radio"name="gender"id="man"value="남"checked >
여 <inputtype="radio"name="gender"value="여"><br>
메일수신여부:
<inputtype="checkbox"name="notice"value="공지메일">공지메일
<inputtype="checkbox"name="notice"value="광고메일">광고메일
<inputtype="checkbox"name="notice"value="배송확인메일">배송확인메일<br><br>
직업:
<selectname="job"><optionvalue="회사원">회사원
<optionvalue="학생">학생
<optionvalue="기타">기타
</select><br><br><inputtype="submit"value="확인"><inputtype="reset"value="취소"></form></body></html>
web.xml에 display name, servlet name, servlet class, servlet mapping, url pattern 지정. servlet name을 doController라 선언. servlet class 경로를 CommonController로 지정. .go로 끝나는 파일들은 모두 이 web.xml을 거친다.
org.controller 패키지에 CommonController.java 클래스 파일 생성하기. HttpServlet을 extends해주고 doGet, doPost 오버라이딩하기. doGet에는 doPost(req,resp)을 써서 doPost로 가도록 경로를 잡아준다.
if else문으로 adder2, bbs, person2 jsp 파일들의 출력 경로를 잡아준다.
org.controller에서 Action.java라는 인터페이스를 만든다. execute라는 메소드를 만든다. execute의 인자에는 req, resp가 들어가고 throws로 예외처리를 해준다. (CommonController의 인자와 예외처리 복사해서 붙여줌) CommonController를 거치는 jsp 파일들이 doGet으로 갈지 doPost로 갈지 모르기 때문에 execute 메소드를 대신 부르는 것이다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Insert title here</title></head><body><formaction="addResult_jstl.jsp">
첫번째 수 : <inputtype="text"name="num1"><br>
두번째 수 : <inputtype="text"name="num2"><br><inputtype="submit"value="더하기"></form></body></html>
