이용자 동영상 학습 페이지

이용자가 동영상을 학습하고 관리자가 통과 여부를 판단하여 통과 하면 다음단계 학습을 시작할 수 있도록 하기

 

M :  UserVO.java , LHVO.java , Video.java , HwStatus.java , PraticeVO.java , Questions.java , LmsDAO.java

V : learn.jsp , Main.jsp , practice.jsp , user_info.jsp , userDetailForUser.jsp , editUser.jsp

C : LmsServlet.java 

Service Class : LmsService.java

 

 

 

UserVO.java 

public class UserVO 
{
    private String userid;
    private int userpw;
    private String useremail;
    private String userphone;
    
    public UserVO() {}
    
    public UserVO(String userId) {
        this.userid = userId;
    }
 
    public UserVO(String userid, int userpw, String useremail, String phone) {
        this.userid = userid;
        this.userpw = userpw;
        this.useremail = useremail;
        this.userphone = phone;
    }
 
    public String getUserid() {
        return userid;
    }
 
    public void setUserid(String userid) {
        this.userid = userid;
    }
 
    public int getUserpw() {
        return userpw;
    }
 
    public void setUserpw(int userpw) {
        this.userpw = userpw;
    }
 
    public String getUseremail() {
        return useremail;
    }
 
    public void setUseremail(String useremail) {
        this.useremail = useremail;
    }
 
    public String getUserphone() {
        return userphone;
    }
 
    public void setUserphone(String userphone) {
        this.userphone = userphone;
    }
 
 
}
 

 

 

 

LHVO.java 

import java.sql.Date;
import java.sql.Timestamp;
 
public class LHVO 
{
    private int num;
    private String userid;
    private int lvl_code;
    private Timestamp begin; 
    private Timestamp end;
    
    public LHVO() {}
    
    public LHVO(int num, String userid, int lvl_code, Timestamp begin, Timestamp end) {
        super();
        this.num = num;
        this.userid = userid;
        this.lvl_code = lvl_code;
        this.begin = begin;
        this.end = end;
    }
    
    public int getNum() {
        return num;
    }
    public void setNum(int num) {
        this.num = num;
    }
    public String getUserid() {
        return userid;
    }
    public void setUserid(String userId) {
        this.userid = userId;
    }
    public int getLvl_code() {
        return lvl_code;
    }
    public void setLvl_code(int lvl_code) {
        this.lvl_code = lvl_code;
    }
    public Timestamp getBegin() {
        return begin;
    }
    public void setBegin(Timestamp begin) {
        this.begin = begin;
    }
    public Timestamp getEnd() {
        return end;
    }
    public void setEnd(Timestamp end) {
        this.end = end;
    }     
}
 
 

 

 

 

Video.java

public class VideoVO 
{
    private int num;
    private String title;
    private int lvl_code;
    private String url;
    private String duration;
    private String description;
    
    public VideoVO() {}
    
    public VideoVO(int num) {
        this.num = num;
    }
 
    public VideoVO(int num, String title, int lvl_code, String url, String duration, String description) {
        super();
        this.num = num;
        this.title = title;
        this.lvl_code = lvl_code;
        this.url = url;
        this.duration = duration;
        this.description = description;
    }
 
    public int getNum() {
        return num;
    }
 
    public void setNum(int num) {
        this.num = num;
    }
 
    public String getTitle() {
        return title;
    }
 
    public void setTitle(String title) {
        this.title = title;
    }
 
    public int getLvl_code() {
        return lvl_code;
    }
 
    public void setLvl_code(int lvl_code) {
        this.lvl_code = lvl_code;
    }
 
    public String getUrl() {
        return url;
    }
 
    public void setUrl(String url) {
        this.url = url;
    }
 
    public String getDuration() {
        return duration;
    }
 
    public void setDuration(String duration) {
        this.duration = duration;
    }
 
    public String getDescription() {
        return description;
    }
 
    public void setDescription(String description) {
        this.description = description;
    }
}
 

 

 

 

Questions.java

public class QuestionsVO 
{
        private String question;
        private String problem;
        private String option1;
        private String option2;
        private String option3;
        private String option4;
        
        public QuestionsVO() {}
        
        public QuestionsVO(String question)
        {
            this.question=question;
        }
 
        public QuestionsVO(String question, String problem, String option1, String option2, String option3,
                String option4) {
            this.question = question;
            this.problem = problem;
            this.option1 = option1;
            this.option2 = option2;
            this.option3 = option3;
            this.option4 = option4;
            
        }
        public String getQuestion() {
            return question;
        }
 
        public void setQuestion(String question) {
            this.question = question;
        }
 
        public String getProblem() {
            return problem;
        }
 
        public void setProblem(String problem) {
            this.problem = problem;
        }
 
        public String getOption1() {
            return option1;
        }
 
        public void setOption1(String option1) {
            this.option1 = option1;
        }
 
        public String getOption2() {
            return option2;
        }
 
        public void setOption2(String option2) {
            this.option2 = option2;
        }
 
        public String getOption3() {
            return option3;
        }
 
        public void setOption3(String option3) {
            this.option3 = option3;
        }
 
        public String getOption4() {
            return option4;
        }
 
        public void setOption4(String option4) {
            this.option4 = option4;
        }        
}
 

 

 

 

PraticeVO.java

public class PracticeVO 
{
    private int num;
    private int lvl_code;
    private String question;
    
    
    
    public PracticeVO() {}
    
    public PracticeVO(int num, int lvl_code, String question) {
        super();
        this.num = num;
        this.lvl_code = lvl_code;
        this.question = question;
    }
    public int getNum() {
        return num;
    }
    public void setNum(int num) {
        this.num = num;
    }
    public int getLvl_code() {
        return lvl_code;
    }
    public void setLvl_code(int lvl_code) {
        this.lvl_code = lvl_code;
    }
    public String getQuestion() {
        return question;
    }
    public void setQuestion(String question) {
        this.question = question;
    }
}
 

 

 

 

HwStatus.java

import java.sql.Timestamp;
 
public class HwStatusVO 
{
    private int num;
    private int lvl_code;
    private String userid;
    private java.sql.Timestamp regdate;
    private int answer;
    private int pass;
    private String edustatus;
    
    public HwStatusVO() {}
    
    public HwStatusVO(int num) {
        this.num = num;
    }
    
    public HwStatusVO(int num, int lvl_code, String userid, Timestamp regdate, int answer, int pass,
            String edustatus) {
        super();
        this.num = num;
        this.lvl_code = lvl_code;
        this.userid = userid;
        this.regdate = regdate;
        this.answer = answer;
        this.pass = pass;
        this.edustatus = edustatus;
    }
 
    public int getNum() {
        return num;
    }
 
    public void setNum(int num) {
        this.num = num;
    }
 
    public int getLvl_code() {
        return lvl_code;
    }
 
    public void setLvl_code(int lvl_code) {
        this.lvl_code = lvl_code;
    }
 
    public String getUserid() {
        return userid;
    }
 
    public void setUserid(String userid) {
        this.userid = userid;
    }
 
    public java.sql.Timestamp getRegdate() {
        return regdate;
    }
 
    public void setRegdate(java.sql.Timestamp regdate) {
        this.regdate = regdate;
    }
 
    public int getAnswer() {
        return answer;
    }
 
    public void setAnswer(int answer) {
        this.answer = answer;
    }
 
    public int getPass() {
        return pass;
    }
 
    public void setPass(int pass) {
        this.pass = pass;
    }
 
    public String getEdustatus() {
        return edustatus;
    }
 
    public void setEdustatus(String edustatus) {
        this.edustatus = edustatus;
    }
}
 

 

 

 

LmsDAO.java

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
 
public class LmsDAO 
{
    private Connection conn;
    private PreparedStatement pstmt;
    private ResultSet rs;
    
    private Connection getConn()
    {
         try {
             Class.forName("oracle.jdbc.OracleDriver"); 
             conn = DriverManager.getConnection(
                       "jdbc:oracle:thin:@localhost:1521:xe", "SCOTT", "TIGER"); 
           
             this.conn=conn;
             
             return conn;
             
            } catch (Exception e) {
                e.printStackTrace();;
            }
        return null;
    }
    
    private void closeAll()
    {
        try {
            if(rs!=null) rs.close();
            if(pstmt!=null) pstmt.close();
            if(conn!=null) conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
    public VideoVO getFirstVideo(String userid)
    {
        getConn();
        
        try
        {
                String sql = "SELECT * FROM video WHERE lvl_code=(SELECT MAX(lvl_code) FROM (SELECT * FROM learn_history WHERE userid=?))";
                 
                 
                 this.pstmt = conn.prepareStatement(sql);
                 pstmt.setString(1, userid);
                 this.rs = pstmt.executeQuery();
                 rs.next();
    
                 VideoVO v = new VideoVO();
                 v.setLvl_code(rs.getInt("LVL_CODE"));
                 v.setTitle(rs.getString("TITLE"));
                 v.setDescription(rs.getString("DESCRIPTION"));
                 v.setNum(rs.getInt("NUM"));
                 v.setDuration(rs.getString("DURATION"));
                 v.setUrl(rs.getString("URL"));
                 
    
                 return v;
             
        }catch(Exception ex) {
            ex.printStackTrace();
        }finally {
            closeAll();
        }
        return null;
    }
    public VideoVO getNextVideo(String userid)
    {
        getConn();
        try
        {
             String sql1 = "SELECT pass FROM hwstatus WHERE num=(SELECT Max(num) FROM hwstatus WHERE userid=?)";
             this.pstmt = conn.prepareStatement(sql1);
             pstmt.setString(1, userid);
             this.rs = pstmt.executeQuery();
             
             String sql2 = "SELECT * FROM video WHERE lvl_code=(SELECT MAX(lvl_code) FROM (SELECT * FROM learn_history WHERE userid=?))";;
             
             if(rs.next())
             {
                
                 if(rs.getInt("PASS")==2)
                 {
                     sql2 = "SELECT * FROM video WHERE lvl_code=(SELECT MAX(lvl_code)+1 FROM (SELECT * FROM learn_history WHERE userid=?))";;
                 }
                 
                 this.pstmt = conn.prepareStatement(sql2);
                 pstmt.setString(1, userid);
                 this.rs = pstmt.executeQuery();
                 rs.next();
    
                 VideoVO v = new VideoVO();
                 v.setLvl_code(rs.getInt("LVL_CODE"));
                 v.setTitle(rs.getString("TITLE"));
                 v.setDescription(rs.getString("DESCRIPTION"));
                 v.setNum(rs.getInt("NUM"));
                 v.setDuration(rs.getString("DURATION"));
                 v.setUrl(rs.getString("URL"));
                 
    
                 return v;
             }
        }catch(Exception ex) {
            ex.printStackTrace();
        }finally {
            closeAll();
        }
        return null;
    }
    public QuestionsVO getQuestion(int lvl_code)
    {
        getConn();
        try
        {
            String sql = "SELECT * FROM questions WHERE question=(SELECT question FROM practice WHERE lvl_code=?)";
             this.pstmt = conn.prepareStatement(sql);
             pstmt.setInt(1, lvl_code);
             this.rs = pstmt.executeQuery();
             if(rs.next())
             {
                 QuestionsVO qtn = new QuestionsVO();
                 qtn.setQuestion(rs.getString("QUESTION"));
                 qtn.setProblem(rs.getString("PROBLEM"));
                 qtn.setOption1(rs.getString("OPTION1"));
                 qtn.setOption2(rs.getString("OPTION2"));
                 qtn.setOption3(rs.getString("OPTION3"));
                 qtn.setOption4(rs.getString("OPTION4"));
                 
                 return qtn;
             }
        }catch(Exception ex) {
            ex.printStackTrace();
        }finally {
            closeAll();
        }
        return null;
    }
    
    public int submitHw(int answer, String userid)
    {
        getConn();
        System.out.println(userid);
        try
        {
            String sql = "INSERT INTO hwstatus (num, userid, lvl_code, regdate, answer) VALUES((HW_STATUS_SEQ.NEXTVAL), ?, "
                    + "(SELECT MAX(lvl_code) FROM (SELECT * FROM learn_history WHERE userid=?)), (SELECT LOCALTIMESTAMP FROM dual), ?)";
             this.pstmt = conn.prepareStatement(sql);
             pstmt.setString(1, userid);
             pstmt.setString(2, userid);
             pstmt.setInt(3, answer);
 
             if(pstmt.executeUpdate()>0)
             {
                 String sql2 = "SELECT HW_STATUS_SEQ.CURRVAL AS currval FROM dual";
                     this.pstmt = conn.prepareStatement(sql2);
                     rs = pstmt.executeQuery();
                     rs.next();
                     return rs.getInt("CURRVAL");
             }
        }catch(Exception ex) {
            ex.printStackTrace();
        }finally { 
            closeAll();
        }
        return 0;
    }
    
    public HwStatusVO readHw(int hwNum)
    {
        getConn();
        
        try
        {
            String sql = "SELECT * FROM hwstatus WHERE num=?";
             this.pstmt = conn.prepareStatement(sql);
             pstmt.setInt(1, hwNum);
             this.rs = pstmt.executeQuery();
             if(rs.next())
             {
                HwStatusVO hw = new HwStatusVO();
                hw.setNum(rs.getInt("NUM"));
                hw.setUserid(rs.getString("USERID"));
                hw.setLvl_code(rs.getInt("LVL_CODE"));
                hw.setAnswer(rs.getInt("ANSWER"));
                hw.setRegdate(rs.getTimestamp("REGDATE"));
                hw.setPass(rs.getInt("PASS"));
                hw.setEdustatus(rs.getString("EDUSTATUS"));
                
                 return hw;
             }
        }catch(Exception ex) {
            ex.printStackTrace();
        }finally { 
            closeAll();
        }
        return null;
    }
}
 
 

 

 

 

LmsServlet.java

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
 
 
@WebServlet("/lms")
public class LmsServlet extends HttpServlet {
    
    protected void service(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException 
    {
        HttpSession session = request.getSession();
        String uid = (String)session.getAttribute("userid");
        if(uid==null) {
            session.setAttribute("url", request.getRequestURL().toString());
            response.sendRedirect("lmslogin");
            return;
        }
        String view = new LmsService(request, response).exec();
        if(view!=null) {
            getServletContext().getRequestDispatcher(view).forward(request, response);
        }
    }
}
 

 

 

LmsService.java

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
 
import org.json.simple.JSONObject;
 
public class LmsService 
{
    public LmsService() {}
    
    private HttpServletRequest request;
    private HttpServletResponse response;
    private HttpSession session;
    
    private String viewPath="/WEB-INF/jsp/lms";
    
    public LmsService(HttpServletRequest request, HttpServletResponse response) {
    
        this.request = request;
        this.response = response;
        this.session = request.getSession();
    }
    public String exec()
    {
        String cmd = request.getParameter("cmd");
        
        if(cmd==null||cmd.equals("main"))
        {
            String userid =(String)request.getParameter("userid");
            request.setAttribute("userid", userid);
            return viewPath + "/Main.jsp";
        }
        else if(cmd.equals("learn"))
        {
            String userid = (String) session.getAttribute("userid");
            System.out.println(userid);
            request.setAttribute("video", getFirstVideo(userid));
            return viewPath + "/learn.jsp";
        }
        else if(cmd.equals("practice"))
        {
            int lvl_code = Integer.parseInt(request.getParameter("level"));
            request.setAttribute("question", getQuestion(lvl_code));
            return viewPath + "/practice.jsp";
        }
        else if(cmd.equals("submitHw"))
        {
            int answer = Integer.parseInt(request.getParameter("option"));
            String userid = (String) session.getAttribute("userid");
            JSONObject jsObj = new JSONObject();
            jsObj.put("hwNum", submitHw(answer, userid));
            sendJSONStr(jsObj);            
        }
        else if(cmd.equals("readHw"))
        {
            int hwNum = Integer.parseInt(request.getParameter("hwNum"));
            request.setAttribute("hw", readHw(hwNum));
            return viewPath + "/hwDetail.jsp";
        }
        else if(cmd.equals("learnNext"))
        {
            String userid = (String) session.getAttribute("userid");
            request.setAttribute("video", getNextVideo(userid));
            return viewPath + "/learn.jsp";
        }
        return null;
    }
    private void sendJSONStr(JSONObject jsObj)
    {
        try {
            PrintWriter out = response.getWriter();
            out.print(jsObj.toJSONString());
        } catch (IOException e) {
            
            e.printStackTrace();
        }
    }
    
    private VideoVO getFirstVideo(String userid)
    {
        LmsDAO dao = new LmsDAO();
        return dao.getFirstVideo(userid);
    }
    
    private QuestionsVO getQuestion(int lvl_code)
    {
        LmsDAO dao = new LmsDAO();
        return dao.getQuestion(lvl_code);
    }
    
    private int submitHw(int answer, String userid)
    {
        LmsDAO dao = new LmsDAO();
        return dao.submitHw(answer, userid);
    }
    
    private HwStatusVO readHw(int hwNum)
    {
        LmsDAO dao = new LmsDAO();
        return dao.readHw(hwNum);
    }
    
    private VideoVO getNextVideo(String userid)
    {
        LmsDAO dao = new LmsDAO();
        return dao.getNextVideo(userid);
    }
}
 

 

 

 

View

 

 

 

Main.jsp

<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
 
<%@ include file="/WEB-INF/jsp/lms/user_info.jsp"%>
 <% String uid = (String) session.getAttribute("userid"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>동영상 학습프로그램</title>
</head>
<style type="text/css">
    @import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
 
    .jm-font{
        font-family: 'Jeju Myeongjo', cursive;
        color: black;
    }
    body {background : linear-gradient(-75deg, rgba(228,228,0,1) 30%, rgba(0,0,0,0) 30%), linear-gradient(15deg, rgba(128,228,128,1) 65%, rgba(192,64,64,1) 65%), linear-gradient(-75deg, rgba(228,228,0,1) 30%, rgba(0,0,0,0) 30%), linear-gradient(15deg, rgba(128,228,128,1) 65%, rgba(192,64,64,1) 65%);
}
</style>
 
<script>
function loginOK(){
    
    var loginDone = '<%=uid %>';
    
    if(loginDone=='null'){
        alert("로그인을 먼저해야합니다.");
        location.href='lmslogin?cmd=loginform';
    }
    else if(loginDone!=null){
        location.href='lms?cmd=learn';
    }
}
</script>
<body>
<div id="img" style="text-align : center; "><img src="images/dance.gif" style="margin-top: 10em; object-fit: cover;"/></div>
</body>
</html>

실행결과 : 

 

 

user_info.jsp

<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<% String userid = (String)session.getAttribute("userid"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1분 댄스학습하기</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" 
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous">
</script>
<script>
    var uid='<%=userid%>';
    $(function(){
        if(uid=='null'){
            $('#id').css('display','none'); 
            $('#logout').css('display','none');
            $('#my_info').css('display','none'); 
        }
        else if(uid!=null){
            $('#loginbtn').css('display','none');
            $('#joinmem').css('display','none');    
        }
    });
</script>
<script type="text/javascript">
function logout()
{    
    $.ajax({
        url : 'lmslogin',
        method: 'post',
        data:{"cmd":"logout"},
        cache : false,
        dataType:'json',
        success:function(res){
            alert(res.logout ? '로그아웃 성공' : '로그아웃 실패');
            location.href='lmslogin';
        },
        error : function(xhr,status,err){
            alert('에러:' + err);
        }
    });
}
</script>
<script>
function loginOK(){
    
    var loginDone = <%=userid%>;
    
    if(loginDone==null){
        alert("로그인을 먼저해야합니다.");
        location.href='lmslogin?cmd=loginform';
    }
    else if(loginDone!=null){
        location.href='lms?cmd=learn';
    }
}
</script>
<style type="text/css">
@import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
    
header{
  background-color:rgba(0,35,245,0.8);
  height:110px;
  line-height:110px;
  text-align:center;
  font-family: 'Jeju Myeongjo', cursive;
  font-size:2em;
  color: white;
  text-shadow: 0px 3px 3px rgba(200, 0, 0, 0.66);}
nav {
  background-color:rgba(245,205,20,0.5);
  height:60px;
  font-family: 'Jeju Myeongjo', serif;
  line-height:60px;
  text-shadow: 0px 5px 5px rgba(255, 255, 255, 0.7);
  }
 
a:link{
 text-decoration:none;
 color: black;}
a:visited{
 text-decoration:none;
 color: black;}
a:hover{
 text-decoration:none;
 color: aqua;}
a:active{
 text-decoration:none;
 color: aqua;}
 
</style>
</head>
<body>
<header> <h2> 💃1분 댄스학습하기🕺</h2></header>
<nav>
<font size=5><b>
 <span id="id">&emsp;<%=userid%></span>&emsp;
 <span id="loginbtn"><a href=lmslogin?cmd=loginform>로그인</a>&emsp;</span>
 <span id="logout"><a href="javascript:logout();">로그아웃</a>&emsp;</span>
 <span id="joinmem"><a href="lmslogin?cmd=joinmem">회원가입</a>&emsp;</span>
 <span id="my_info"><a href="lmslogin?cmd=userdetail">내정보 수정하기</a>&emsp;</span>
 <a href="javascript:loginOK();">동영상 학습</a>&emsp; 
 <a href="lms">홈으로</a></b>
 </font> 
 </nav>

 

 

 

learn.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>
<meta charset="utf-8">
<title>유저 정보 보기</title>
<style type="text/css">
   #practice { display: none; }
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" 
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous">
</script>
<script type="text/javascript">
 
    $(function(){
 
                     
           var duration = "${video.duration}";
           const min_sec = duration.split(":");
           
           var min = parseInt(min_sec[0]);
           var sec = parseInt(min_sec[1]);
           
           var finaldur = (min*60 + sec)*1000;
           
           function showPracticeBtn()
            {
                $('#practice').css('display', 'block');
            }
           
           setTimeout(showPracticeBtn, finaldur);
           
    });      
</script>
</head>
<style type="text/css">
    @import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
 
    .jm-font{
        font-family: 'Jeju Myeongjo', serif;
        color: black;
        font-size:1.8em;
    }
    .main-font{
        font-family: 'Jeju Myeongjo', serif;
        color: black;
        font-size:1.5em;
    }
    .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    }
    main { width: fit-conent; margin: auto;}
    main h1 { text-align: center; }
    label { display:inline-block; margin-right:1em; width:fit-conent;
         text-align:center; padding:0.5em;}
    .container {width:fit-content; padding:1em; border:1px solid black;}
    .contents > label { position:relative;}
    a { width: fit-conent; margin:auto;}
    body {background : linear-gradient(-75deg, rgba(228,228,0,1) 30%, rgba(0,0,0,0) 30%), linear-gradient(15deg, rgba(128,228,128,1) 65%, rgba(192,64,64,1) 65%), linear-gradient(-75deg, rgba(228,228,0,1) 30%, rgba(0,0,0,0) 30%), linear-gradient(15deg, rgba(128,228,128,1) 65%, rgba(192,64,64,1) 65%);
}
</style>
<body>
<%@ include file="/WEB-INF/jsp/lms/user_info.jsp"  %>
<span class="wrapper">
<main class="main-font">
<h1 class="jm-font"> 🎦동영상 학습 </h1>
<div class="container">
    <div>
        <label>1️⃣동영상 제목 :</label> 
        ${video.title}
    </div>
    <div>
        <label>2️⃣동영상 재생 :</label> 
        <iframe width="560" height="315" src="${video.url}" title="${video.title}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div>
        <label>3️⃣플레이 타임 :</label>
        ${video.duration}
    </div>
    <div>
        <label>4️⃣동영상 설명 :</label>
        ${video.description}
    </div>
    <div>
        <label>📝실습 문제(동영상을 다 보면 문제가 생성됩니다.)</label>
        &emsp;&emsp;<div id='practice'><a href='lms?cmd=practice&level=${video.lvl_code}'>실습 문제 풀러가기</a></div>
    </div>
</div>
</main>
</span>
</body>
</html>

실행결과 :

 

 

 

practice.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>
<meta charset="utf-8">
<title>실습문제</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" 
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous">
</script>
<script type="text/javascript">
 
function getanswer()
{
    $.ajax({
        url:'lms',
        method:'post',
        data:$('#answer').serialize(),
        dataType:'json',
        cache:false,
        
        success:function(res){
            if(res.hwNum!=0)
            {
                alert('제출 성공');
                location.href='lms?cmd=readHw&hwNum=' + res.hwNum;
            }else alert("제출 성공");
        },
        error:function(xhr,status,err){
            alert('에러:' + err);
        }
    });
    
    return false;
}
</script>
</head>
<style type="text/css">
    @import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
 
    .jm-font{
        font-family: 'Jeju Myeongjo', serif;
        color: black;
        font-size:2em;
    }
    .main-font{
        font-family: 'Jeju Myeongjo', serif;/*웹 폰트 지정*/
        color: black;
        font-size:2em;
    }
    .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    }
    main { width: fit-conent; margin: auto;}
    main h1 { text-align: center; }
    label { display:inline-block; margin-right:1em; width:fit-conent;
         text-align:center; padding:0.5em;}
    .container {width:fit-content; padding:1em;}
    .contents > label { position:relative;}
    a { width: fit-conent; margin:auto;}
    body {background : linear-gradient(-75deg, rgba(228,228,0,1) 30%, rgba(0,0,0,0) 30%), linear-gradient(15deg, rgba(128,228,128,1) 65%, rgba(192,64,64,1) 65%), linear-gradient(-75deg, rgba(228,228,0,1) 30%, rgba(0,0,0,0) 30%), linear-gradient(15deg, rgba(128,228,128,1) 65%, rgba(192,64,64,1) 65%);
}
</style>
<body>
<%@ include file="/WEB-INF/jsp/lms/user_info.jsp"  %>
<span class="wrapper">
<main class="main-font">
<h1 class="jm-font"> ❓ ${question.problem} </h1>
   <form id ='answer' onsubmit='return getanswer();'>
       <input type='hidden' name='cmd' value='submitHw'>
<div class="container">
    <div>
        <label>1️⃣ :</label> 
            <span id='1'>${question.option1}<input type="radio" name= "option" value='1'></span>
    </div>
    <div>
        <label>2️⃣ :</label> 
        <span id='2'>${question.option2}<input type="radio" name= "option" value='2'></span>
    </div>
    <div>
        <label>3️⃣ :</label>
        <span id='3'>${question.option3}<input type="radio" name= "option" value='3'></span>
    </div>
    <div>
        <label>4️⃣ :</label>
        <span id='4'>${question.option4}<input type="radio" name= "option" value='4'></span>
    </div>
    <div><button type="submit">제출</button></div>
</div>
</form>
</main>
</span>
</body>
</html>

실행결과 : 

 

 

 

hwDetail.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/WEB-INF/jsp/lms/user_info.jsp"%>  
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>유저 정보 보기</title>
</head>
<style type="text/css">
    @import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
 
    .jm-font{
        font-family: 'Jeju Myeongjo', serif;
        color: black;
        font-size:2em;
    }
    .main-font{
        font-family: 'Jeju Myeongjo', serif;
        color: black;
        font-size:1.6em;
    }
    .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    }
    main { width: fit-conent; margin: auto;}
    main h1 { text-align: center; }
    label { display:inline-block; margin-right:1em; width:fit-conent;
         text-align:center; padding:0.5em;}
    .container {width:fit-content; padding:1em; border:1px solid black;}
    .contents > label { position:relative;}
    a { width: fit-conent; margin:auto;}
    body {background : linear-gradient(-75deg, rgba(228,228,0,1) 30%, rgba(0,0,0,0) 30%), linear-gradient(15deg, rgba(128,228,128,1) 65%, rgba(192,64,64,1) 65%), linear-gradient(-75deg, rgba(228,228,0,1) 30%, rgba(0,0,0,0) 30%), linear-gradient(15deg, rgba(128,228,128,1) 65%, rgba(192,64,64,1) 65%);
}
</style>
<body>
<span class="wrapper">
<main class="main-font">
<h1 class="jm-font"> 💯결과보기 </h1>
<div class="container">
    <div>
        <label>1️⃣내 ID :</label> 
        ${hw.userid}
    </div>
    <div>
        <label>2️⃣레벨 :</label> 
        ${hw.lvl_code}
    </div>
    <div>
        <label>3️⃣제출날짜 :</label>
        ${hw.regdate}
    </div>
    <div>
        <label>4️⃣제출한 답 :</label>
        ${hw.answer}
    </div>
    <div>
        <label>5️⃣통과여부 :</label>
        <c:choose>
            <c:when test="${hw.pass==0}">미확인</c:when>
            <c:when test="${hw.pass==1}">불통</c:when>    
            <c:when test="${hw.pass==2}">통과</c:when></c:choose>
    </div>
    <div>
        <label>6️⃣지도내용 :</label>
        ${hw.edustatus}
    </div>
</div>
    [<a href='lms?cmd=learn'>다음 단계 학습하기</a>] 
    [<a href='lms'>메인</a>]
</main>
</span>
</body>
</html>

실행결과 : 

관리자가 채점 후

 

 

userDetailForUser.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>
<meta charset="utf-8">
<title>유저 정보 보기</title>
</head>
<style type="text/css">
    @import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
 
    .jm-font{
        font-family: 'Jeju Myeongjo', serif;
        color: black;
        font-size:2.5em;
    }
    .main-font{
        font-family: 'Jeju Myeongjo', serif;
        color: black;
        font-size:2em;
    }
    .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    }
    main { width: fit-conent; margin: auto;}
    main h1 { text-align: center; }
    label { display:inline-block; margin-right:1em; width:fit-conent;
         text-align:center; padding:0.5em;}
    .container {width:fit-content; padding:1em; border:1px solid black;}
    .contents > label { position:relative;}
    a { width: fit-conent; margin:auto;}
    body {background : linear-gradient(-75deg, rgba(228,228,0,1) 30%, rgba(0,0,0,0) 30%), linear-gradient(15deg, rgba(128,228,128,1) 65%, rgba(192,64,64,1) 65%), linear-gradient(-75deg, rgba(228,228,0,1) 30%, rgba(0,0,0,0) 30%), linear-gradient(15deg, rgba(128,228,128,1) 65%, rgba(192,64,64,1) 65%);
}
</style>
<body>
<span class="wrapper">
<main class="main-font">
<h1 class="jm-font"> 🙋‍♂️내 정보 보기 </h1>
<div class="container">
    <div>
        <label>1️⃣내 ID :</label> 
        ${u.userid}
    </div>
    <div>
        <label>2️⃣전화번호 :</label> 
        ${u.userphone}
    </div>
    <div>
        <label>3️⃣이메일 :</label>
        ${u.useremail}
    </div>
 
</div>
    [<a href="lmslogin?cmd=editUser&userid=${u.userid}&num=${hvo.num}">내 정보 수정</a>] 
    [<a href='lms'>메인</a>]
</main>
</span>
</body>
</html>

실행화면 : 

 

 

editUser.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>
<meta charset="utf-8">
<title>유저 정보 보기</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" 
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous">
</script>
<script type="text/javascript">
 
    function updateInfo()
    {
        $.ajax({
            url:'lmslogin',
            method: 'post',
            data: $('#updateForm').serialize(),
            dataType: 'json',
            cache: false,
            
            success: function(res){
                if(res.updated)
                    {
                        alert("업데이트. 성공적.");
                        location.href='lmslogin?cmd=userdetail';
                    }else alert("업데이트 실패");
            },
            error: function(xhr,status,err){
                alert(err);
            }
        })
        return false;
    }
</script>
</head>
<style type="text/css">
    @import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
 
    .jm-font{
        font-family: 'Jeju Myeongjo', serif;
        color: black;
        font-size:2.5em;
    }
    .main-font{
        font-family: 'Jeju Myeongjo', serif;
        color: black;
        font-size:2em;
    }
    .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    }
    main { width: fit-conent; margin: auto;}
    main h1 { text-align: center; }
    label { display:inline-block; margin-right:1em; width:fit-conent;
         text-align:center; padding:0.5em;}
    .container {width:fit-content; padding:1em; border:1px solid black;}
    .contents > label { position:relative;}
    a { width: fit-conent; margin:auto;}
    body {background : linear-gradient(-75deg, rgba(228,228,0,1) 30%, rgba(0,0,0,0) 30%), linear-gradient(15deg, rgba(128,228,128,1) 65%, rgba(192,64,64,1) 65%), linear-gradient(-75deg, rgba(228,228,0,1) 30%, rgba(0,0,0,0) 30%), linear-gradient(15deg, rgba(128,228,128,1) 65%, rgba(192,64,64,1) 65%);
}
</style>
<body >
<span class="wrapper">
<main class="main-font">
<h1 class="jm-font"> 🙋‍♂️내 정보 수정 </h1>
<form id='updateForm' onsubmit='return updateInfo();'>
<input type='hidden' name='cmd' value='update'>
<div class="container">
    <div>
        <label>1️⃣이용자ID :</label> 
        ${u.userid}
    </div>
    <div>
        <label>2️⃣비밀번호 :</label> 
        <input type='password' name='pw' value='${u.userpw}'>
    </div>
    <div>
        <label>3️⃣전화번호 :</label>
        <input type='text' name='ph' value='${u.userphone}'>
    </div>
    <div>
        <label>4️⃣이메일 :</label>
        <input type='text' name='email' value='${u.useremail}'>
    </div>
</div>
<button type="submit">저장</button>
</form>
</main>
</span>
</body>
</html>
 
 

실행화면 :