240126 HTML 홈페이지 만들기

오늘은 관리자 페이지 만드는 날

일단 admin 이라는 패키지와 jsp 를 새로 만들고

서블릿은 /admin/index 를 쳐야만 들어갈 수 있게 설정

URL 주소를 원하는 대로 설정할 수 있음

 

admin JSP 파일과 CSS 파일을 생성하여 작성 중

 

이제 등급 변경하기

grade 를 select 로 진행

                <td class="w1">
                  <select name="grade">
                    <optgroup label="정지">
                      <option
                        <c:if test="${row.mgrade eq 0 }"> selected="selected"</c:if>>0
                        : 강퇴</option>
                      <option
                        <c:if test="${row.mgrade eq 1 }"> selected="selected"</c:if>>1
                        : 탈퇴</option>
                      <option
                        <c:if test="${row.mgrade eq 2 }"> selected="selected"</c:if>>2
                        : 정지</option>
                    </optgroup>
                    <optgroup label="정상">
                      <option value="5"
                        <c:if test="${row.mgrade eq 5 }"> selected="selected"</c:if>>5
                        : 일반</option>
                    </optgroup>
                    <optgroup label="관리자">
                      <option
                        <c:if test="${row.mgrade eq 9 }"> selected="selected"</c:if>>9
                        : 관리자</option>
                    </optgroup>
                </select></td>

 

등급 변경 시 DB 에 바로 저장할 수 있게 제이쿼리문과 DAO, 서블릿 작성

<script type="text/javascript">
  // $(document).ready(function() {
  $(function() {
    // alert("!");
    $('select[name=grade]').on("change", function() {
      let mgrade = $(this).val();
      let mno = $(this).parent().siblings('.w1.mno').text();
      // alert(mno + " : " + mgrade);

      let form = $('<form></form>');
      // form.attr('name', 'form'); // 이번엔 없고 저번엔 왜 있을까 ?
      form.attr('method', 'post');
      form.attr('action', './members');

      form.append($('<input/>', {
        type : 'hidden',
        name : 'mgrade',
        value : mgrade
      }));
      form.append($('<input/>', {
        type : 'hidden',
        name : 'mno',
        value : mno
      }));

      form.appendTo('body');
      form.submit();
    });
  });
</script>

 

서블릿

  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    request.setCharacterEncoding("utf-8");
    
    // 들어오는 값 확인
    // System.out.println("mno : "+ request.getParameter("mno"));
    // System.out.println("mgrade : " + request.getParameter("mgrade"));
    
    // DB 에 값 저장하기
    AdminDAO dao = new AdminDAO();
    dao.updateGrade(request.getParameter("mno"), request.getParameter("mgrade"));
    
    // 화면 새로고침으로 재출력
    response.sendRedirect("./members");
  }

 

처음 값에는 value 가 없어서 인코딩을 다시 했지만, 숫자만 받게되어 인코딩 안해도 되긴 함

AdminDAO 작성

  public void updateGrade(String mno, String mgrade) {
    Connection conn = dbConn.getConn();
    PreparedStatement pstmt = null;
    String sql = "update c23c_26.member set mgrade=? where mno=?";
    
    try {
      pstmt = conn.prepareStatement(sql);
      pstmt.setInt(1, Util.str2Int(mgrade));
      pstmt.setInt(2, Util.str2Int(mno));
      pstmt.execute();
    } catch (SQLException e) {
      e.printStackTrace();
      System.out.println("AdminDAO - updateGrade 에러");
    } finally {
      close(conn, pstmt, null);
    }
  }

 

그리고 로그인 시 grade 가 5 미만인 사람은 로그인이 안되게 로그인 코드 수정

  public MemberDTO login(MemberDTO dto) {
    Connection conn = dbConn.getConn();
    PreparedStatement pstmt = null;
    ResultSet rs = null;
    String sql = "SELECT count(*) as count, mname, mno FROM c23c_26.member WHERE mid=? and mpw=? and mgrade >= 5";

    try {
      pstmt = conn.prepareStatement(sql);
      pstmt.setString(1, dto.getMid());
      pstmt.setString(2, dto.getMpw());
      rs = pstmt.executeQuery();

      if (rs.next()) {
        dto.setCount(rs.getInt("count"));
        dto.setMname(rs.getString("mname"));
        dto.setMno(rs.getInt("mno"));
        // dto.setMgrade(rs.getInt("mgrade"));
      }

    } catch (SQLException e) {
      e.printStackTrace();
      System.out.println("MemberDAO 오류");
    } finally {
      close(conn, pstmt, rs);
    }
    return dto;
  }

 

기존 코드에서는 SQL 문에 grade >= 5 문구만 추가

 

그리고 이제

버튼 클릭 시 해당하는 사람들만 출력할 수 있게 버튼 추가

<div class="member-lists">
  <ul>
    <li onclick="url('./members?grade=0')"><i class="xi-close-circle-o"></i> 탈퇴</li>
    <li onclick="url('./members?grade=1')"><i class="xi-minus-circle-o"></i> 강퇴</li>
    <li onclick="url('./members?grade=2')"><i class="xi-check-circle-o"></i> 정지</li>
    <li onclick="url('./members?grade=5')"><i class="xi-label-o"></i> 정상</li>
    <li onclick="url('./members?grade=9')"><i class="xi-plus-square-o"></i> 관리자</li>
  </ul>
</div>

 

이제 등급 변경 시 페이지 그대로 다시 새로고침 될 수 있도록 하기

기존 제이쿼리문에 grade 값을 보낼 수 있도록 코드 추가

<c:if test="${param.grade ne null}">
form.append($('<input/>', {
  type : 'hidden',
  name : 'grade',
  value : ${param.grade}
})); </c:if>

 

doPost 에 if 문 추가하여 response 하기

    if (request.getParameter("grade") != null) {
      response.sendRedirect("./members?grade=" + request.getParameter("grade"));
    } else {
      response.sendRedirect("./members");
    }

 

 

스프링 미리 체험하기

 

뷰 : 화면

모델 : 화면에 출력할 값

컨트롤러 : 데이터의 흐름

 

전자정부 프레임워크에서

homeController 를 실행했을 때 기존 홈페이지 만들기에서

request.setAttribute 와 비슷한 역할을 하는 것 같음

 

 

내일 질문 목록

form 에 name 태그 여부에 따른 작동 방식

-> 검색해서 해결 완료