• 게시판 하단에 페이지 표시하기

    • 한 페이지당 몇 개의 게시글을 표시할 것인가?

      • int pageSize=5  (5개의 게시글)

 

    • 글이 하나만 있더라도 페이지는 1로 표시된다.

      • String pageNum (String으로 pageNum을 reqest 받아옴)

      • int currentPage (현재 페이지. String pageNum을 int형으로 변환)

 

    • 10개의 게시글이 있다고 가정했을때 1페이지에는 6~10번째, 2페이지에는 1~5번째 게시글이 표시된다.

    • 페이지당 표시되는 게시글의 첫번째를 startRow, 마지막번째를 endRow라고 한다.

      • startRow=(currentPage-1)*pageSize+1; (현재 페이지가 1이라면 startRow는 1)

      • endRow=currentPage*pageSize; (현재 페이지가 1이라면 endRow는 5)

 

    • 페이지가 없었던 기존: 게시글 전체를 arr에 담아 화면에 표시했다.

    • 페이지가 있는 지금: arr에 startRow와 endRow인자를 사용하여 표시

      • 검색이 아닌 전체보기: arr=dao.boardList(startRow, endRow)

      • 검색 전체보기: arr=dao.boardList(field, word, startRow, endRow)

 

    • 하단에 페이지 숫자를 몇 개씩 표시할 것인가?

      • int pageBolck=3 (123 456 처럼 3개씩)

 

    • 게시글 양에 따라 필요한 페이지의 수는?

      • int pageCount=count/pageSize+(count%pageSize==0? 0:1)

      • 11=53/5+(53%5==0)

 

    • 시작페이지 

      • int startPage=(int)((currentPage-1)/pageBlock)*pageBlock+1;

 

    • 마지막페이지

      • int endPage=startPage+pageBlock-1;

      • 만약 마지막페이지가 필요한 페이지보다 크다면: endPage=pageCount;

 

    • '이전' 이란 표시는 언제 생겨나는가?

      • 시작페이지가 필요한 페이지보다 클때

      • startPage>pageBlock

 

    • 페이지 표시

      • for문을 돌려서 starPage에서 endPage까지 1씩 커지도록함

 

    • '다음' 이란 표시는 언제 생겨나는가?

      • 마지막페이지가 필요한 페이지보다 작을때

      • endPage<pageCount

 

    • DB에서 boardList로 값 가져오기

      • 최신글부터 표시되어야 함

        • select * from board order by num desc;

      • 그러나 num은 일정하지 않은 변수(게시글 삭제를 하면). 따라서 rownum이라는 키워드를 이용

        • select rownum rn, aa.* from(select * from board order by num desc) aa;

        • board 테이블을 aa라는 테이블로 명명하고

        • rownum을 rn이라는 이름의 컬럼으로, aa와 함께 출력

      • 페이지당 필요한 게시글 수 만큼 뽑아와야 함.

        • select * from (

        • select rownum rn, aa.* from(

        • select * from board order by num desc) aa

        • ) where rn <=? and rn >=?;

        • ?에는 endrow와 startrow가 들어감

      • 검색한 게시글을 불러올 경우

        • select * from (

        • select rownum rn, aa.* from(

        • select * from board where filed like '%word%' order by num desc) aa

        • ) where rn <=? and rn >=?;

        • ?에는 endrow와 startrow가 들어감

 

 


 

 

  • 답글쓰기

    • 새 글을 쓸때 writeForm: 글 번호가 없다.

    • 답글을 쓸때 writeForm: 글 번호가 있다.

  • ref: 그룹 (새 글에는 새 그룹). 게시글 순서

  • re_step: 답글 순서

  • re_level: 답글의 답글 순서

 


 

 

  • list.jsp: 페이지 표시하도록 수정

 

 

 

<%@page import="com.board.BoardVO"%>

<%@page import="com.board.BoardDAO"%>

<%@page import="java.util.ArrayList"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<link rel="stylesheet"

href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<style>

div.divCss{

    text-align: right;

    background-color:  darkgray;

    padding-right: 20px;

}

a:hover { text-decoration: none;  }

a:link {text-decoration: none;  }

a:visited {text-decoration: none; }

</style>

</head>

<%

    request.setCharacterEncoding("utf-8");

    String pageNum=request.getParameter("pageNum");

    if(pageNum==null){

        pageNum="1";

    }

    int currentPage=Integer.parseInt(pageNum);

    

    BoardDAO dao=BoardDAO.getInstance();

    int pageSize=5; //한페이지당 5개씩

    int startRow=(currentPage-1)*pageSize+1;

    int endRow=currentPage*pageSize;

    String field="", word="";

    ArrayList<BoardVO> arr=null;

    int count=0;

    if(request.getParameter("word")!=null&&!request.getParameter("word").equals("")){ //검색일때

        field=request.getParameter("field");

        word=request.getParameter("word");

        arr=dao.boardList(field,word,startRow,endRow);

        count=dao.boardCount(field,word);

    }else{ //검색아닐때

        arr=dao.boardList(startRow,endRow);

        count=dao.boardCount();

    }

    

    String userid=(String)session.getAttribute("userid");

%>

<body>

<div align="right">

<%

    if(userid!=null){

%>

    <%=userid %>님 반갑습니다.

    <a href="../member/logout.jsp">로그아웃</a>

<%

    }

%>      

    <br>전체 게시글 수: <span id="cntSpan"><%=count %></span><br>

    <a href="writeForm.jsp">글쓰기</a>

</div>

    <table class="table table-striped">

    <thead>

        <tr>

            <th scope="col">번호</th>

            <th>제목</th>

            <th>작성자</th>

            <th>작성일</th>

            <th>조회수</th>

            <th>IP주소</th>

        </tr>

    </thead>

    <tbody>

<%

    for(BoardVO vo: arr){

%>

        <tr>

            <th scope="row"><%=vo.getNum()%></th>       

            <td><a href="boardView.jsp?num=<%=vo.getNum()%>"><%=vo.getSubject() %></a></td>        

            <td><%=vo.getWriter() %></td>       

            <td><%=vo.getReg_date()%></td>      

            <td><%=vo.getReadcount() %></td>    

            <td><%=vo.getIp() %></td>   

        </tr>       

<%

    }

%>  

    </tbody>

    </table>

<br><br>

<form action="list.jsp" name="search" method="get">

    <table align=center>

        <tr>

            <td>

            <select name="field" size=1>

                <option value="subject">제목

                <option value="writer">작성자

            </select>

            <input type="text" size=16 name="word">

            <input type="submit" value="찾기">

            </td>

        </tr>

    </table>

</form>

<div align="center">

<%

    

    if(count>0){ //  11= 53/5 + (53%5==0) 53개 게시물을 한페이지당 5개씩 보여준다면 11개의 페이지가 필요

        int pageCount=count/pageSize+(count%pageSize==0? 0:1);

        int pageBlock=3; //123 456 등 3페이지씩 표시

        int startPage=(int)((currentPage-1)/pageBlock)*pageBlock+1; //시작페이지

        int endPage=startPage+pageBlock-1; //마지막 페이지 12

        if(endPage>pageCount){

            endPage=pageCount; //endPage=11;

        }

        

        if(startPage>pageBlock){ //이전

%>

            <a href="list.jsp?pageNum=<%=startPage-pageBlock%>&field=<%=field%>&word=<%=word %>">[이전]</a>

<%

        }

        for(int i=startPage;i<=endPage;i++){ //for

%>

            <a href="list.jsp?pageNum=<%=i%>&field=<%=field%>&word=<%=word %>"><%=i%></a>

<%

        }

        if(endPage<pageCount){ //다음

%>

            <a href="list.jsp?pageNum=<%=startPage+pageBlock%>&field=<%=field%>&word=<%=word %>">[다음]</a>

<%

        }

    }

%>

</div>

</body>

</html>

 


 

 

  • writeForm.jsp: 답글과 새글의 차이점 만들어주기

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<%

    request.setCharacterEncoding("utf-8");

    int num=0, ref=1, re_step=0, re_level=0; //새글

    if(request.getParameter("num")!=null){ //답글

        num=Integer.parseInt(request.getParameter("num"));

        ref=Integer.parseInt(request.getParameter("ref"));

        re_step=Integer.parseInt(request.getParameter("re_step"));

        re_level=Integer.parseInt(request.getParameter("re_level"));

    }

%>

<body>

<form action="writePro.jsp" method="post">

<input type="hidden" name="num" value=<%=num %>>

<input type="hidden" name="ref" value=<%=ref %>>

<input type="hidden" name="re_step" value=<%=re_step %>>

<input type="hidden" name="re_level" value=<%=re_level %>>

<table border=1>

    <tr>

        <td>이름</td>

        <td><input type="text" name="writer"></td>

    </tr>

    <tr>

        <td>제목</td>

        <td>

<%

        if(request.getParameter("num")!=null){ //답글

%>

            <input type="text" name="subject" value="[답글]">

<%

        }else{ //새글

%>

            <input type="text" name="subject">

<%

        }

%>

        </td>

    </tr>

    <tr>

        <td>이메일</td>

        <td><input type="text" name="email"></td>

    </tr>

    <tr>

        <td>내용</td>

        <td><textarea cols="50" rows="20" name="content"></textarea></td>

    </tr>

    <tr>

        <td>비밀번호</td>

        <td><input type="password" name="passwd"></td>

    </tr>

    <tr>

        <td colspan="2" align="center">

        <input type="submit" value="글쓰기">

        <input type="reset" value="다시 작성">

        <input type="button" value="목록보기" onclick="location.href='list.jsp'">

        </td>

    </tr>

</table>

</form>

</body>

</html>

 

 

  • boardView.jsp: ref, re_step, re_level 값을 불러오고 각종 버튼에 jsp연결 시키기, 댓글쓰기 란 만들기 (제이쿼리 주소 붙여넣고 스크립트 안에 ajax으로 commentInser.jsp 연결)

 

<%@page import="com.board.BoardVO"%>

<%@page import="com.board.BoardDAO"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<%

    request.setCharacterEncoding("utf-8");

    int num=Integer.parseInt(request.getParameter("num"));

    BoardDAO dao=BoardDAO.getInstance();

    BoardVO board=dao.boardView(num);

    int ref=board.getRef();

    int re_step=board.getRe_step();

    int re_level=board.getRe_level();

    

    String userid=(String)session.getAttribute("userid");

%>

</head>

<script>

function del(){

    if(confirm("정말 삭제할까요?")){

        location.href="deletePro.jsp?num=<%=num%>";

    }

}

</script>

<body>

<h2>글 내용 보기</h2>

<table border=1 width=500>

<input type="hidden" name="num" id="num" value="<%=num%>">

    <tr>

        <td>글번호</td>

        <td><%=board.getNum() %></td>

        <td>조회수</td>

        <td><%=board.getReadcount() %></td>

    </tr>

    <tr>

        <td>작성자</td>

        <td><%=board.getWriter() %></td>

        <td>작성일</td>

        <td><%=board.getReg_date() %></td>

    </tr>

    <tr>

        <td>글제목</td>

        <td colspan="3"><%=board.getSubject() %></td>

    </tr>

    <tr>

        <td>글내용</td>

        <td colspan="3"><%=board.getContent() %></td>

    </tr>

    <tr>

        <td colspan="4">

        <input type="button" value="글수정" onclick="location.href='updateForm.jsp?num=<%=num%>'">

        <input type="button" value="글삭제" onclick="del()">

        <input type="button" value="답글쓰기" onclick="location.href='writeForm.jsp?num=<%=num%>&ref=<%=ref%>&re_step=<%=re_step%>&re_level=<%=re_level%>'">

        <input type="button" value="글목록" onclick="location.href='list.jsp'">

        </td>

    </tr>

</table>

<br><br><br><br>

<div align="center">

    <textarea rows="5" cols="50" id="msg"></textarea>

    <input type="button" value="댓글쓰기" id="commentBtn">

</div>

<div id="area"></div>

<script>

var init=function(){

    $.getJSON("commentList.jsp?num="+$("#num").val(), function(data){

        var htmlStr="<table>";

        $.each(data, function(key,val){

            htmlStr+="<tr>";

            htmlStr+="<td>"+val.msg+"</td>";

            htmlStr+="<th>"+"작성자: "+val.userid+"</th>";

            htmlStr+="<td>"+val.reg_date+"</td>";

            if('<%=userid%>'==val.userid){

                htmlStr+="<td onclick='del()'><input type='button' value='삭제'></td>";

            }

            htmlStr+="</tr>";

        });

        htmlStr+="</table>";

        $("#area").html(htmlStr);

    }) //getJSON

}//init

function del(){

    if(confirm("정말 삭제할까요?")){

    }

}

$("#commentBtn").on("click",function(){

    $.ajax({

        type:"post",

        url :"commentInsert.jsp",

        data:  {"msg":$("#msg").val(), "num":$("#num").val()},

        success: function(resp){

            if(resp.trim()=="1"){

                alert("로그인 후 댓글쓰기");

                //location.href="../member/loginForm.jsp";

                location.href="/JSP_Project/member/loginForm.jsp";

            }else{

                //화면에 리스트 뿌리기

                init();

            }

            

        },

        error: function(e){

            alert("error:"+e);

        }

    });

});

init();

</script>

</body>

</html>


 

 

  • updateForm.jsp: 답글 표시, 목록보기에 list.jsp 연결

 

 

<%@page import="com.board.BoardVO"%>

<%@page import="com.board.BoardDAO"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<%

    request.setCharacterEncoding("utf-8");

    int num=Integer.parseInt(request.getParameter("num"));

    BoardDAO dao=BoardDAO.getInstance();

    BoardVO board=dao.boardView(num);

%>

</head>

<body>

<h1>글 수정하기</h1>

<form action="updatePro.jsp" method="post">

<input type="hidden" name="num" value="<%=num%>">

<table border=1>

    <tr>

        <td>이름</td>

        <td><%=board.getWriter()%></td>

    </tr>

    <tr>

        <td>제목</td>

        <td><input type="text" name="subject" value="<%=board.getSubject()%>"></td>

    </tr>

    <tr>

        <td>이메일</td>

        <td><input type="text" name="email" value="<%=board.getEmail()%>"></td>

    </tr>

    <tr>

        <td>내용</td>

        <td><textarea cols="50" rows="20" name="content"><%=board.getContent()%></textarea></td>

    </tr>

    <tr>

        <td>비밀번호</td>

        <td><input type="password" name="passwd"></td>

    </tr>

    <tr>

        <td colspan="2" align="center">

        <input type="submit" value="수정">

        <input type="reset" value="다시 작성">

        <input type="button" value="목록보기" onclick="location.href='list.jsp'">

        </td>

    </tr>

</table>

</form>

</body>

</html>

 

 

  • BoardDAO.java: 답글과 페이지에 따라 추가, 보기, 갱신 등 수정하기

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    package com.board;
     
    import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.sql.Statement;
    import java.util.ArrayList;
     
    import javax.naming.Context;
    import javax.naming.InitialContext;
    import javax.sql.DataSource;
     
    public class BoardDAO {
        
        //디비셋팅
        private static BoardDAO instance=new BoardDAO();
        
        public static BoardDAO getInstance() {
            return instance;
        }
        
        private Connection getConnection() throws Exception{
            Context initCtx=new InitialContext();
            Context envCtx=(Context) initCtx.lookup("java:comp/env");
            DataSource ds=(DataSource) envCtx.lookup("jdbc/member"); 
            return ds.getConnection();
        }
        
        //추가
        public void boardInsert(BoardVO board) { //새글 답글 구분
            Connection con=null;
            PreparedStatement ps=null;
            ResultSet rs=null;
            
            //부모글
            int num=board.getNum();
            int ref=board.getRef(); //게시글 순서
            int re_step=board.getRe_step(); //답글 순서
            int re_level=board.getRe_level(); //답글의 답글 순서
            
            int number=0;
            String sql=null;
            try {
                con=getConnection();
                ps=con.prepareStatement("select max(num) from board");
                rs=ps.executeQuery();
                if(rs.next()) { //기존 데이터가 있을때 ref를 최대값 +1 로 결정
                    number=rs.getInt(1)+1;
                }else { //기존 데이터가 없을때 ref를 1로 결정
                    number=1;
                }
                if(num!=0) { //답글
                    sql="update board set re_step=re_step+1 where ref=? and re_step>?";
                    ps=con.prepareStatement(sql);
                    ps.setInt(1, ref);
                    ps.setInt(2, re_step);
                    ps.executeUpdate();
                    re_step=re_step+1;
                    re_level=re_level+1;
                }else { //새글
                    ref=number;
                    re_step=0;
                    re_level=0;
                }
                //num, writer, subject, email, content, passwd, ip, readcount, ref, re_step, re_level
                sql="INSERT INTO BOARD(num,writer,subject,email,content,passwd,ip,readcount,ref,re_step,re_level)"
                        + "VALUES (board_seq.nextval,?,?,?,?,?,?,0,?,?,?)";
                ps=con.prepareStatement(sql);
                ps.setString(1, board.getWriter());
                ps.setString(2, board.getSubject());
                ps.setString(3, board.getEmail());
                ps.setString(4, board.getContent());
                ps.setString(5, board.getPasswd());
                ps.setString(6, board.getIp());
                ps.setInt(7, ref);
                ps.setInt(8, re_step);
                ps.setInt(9, re_level);
                ps.executeUpdate();
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                closeConnection(con,ps,rs);
            }
        }
        
        //전체보기
        public ArrayList<BoardVO> boardList(int startRow, int endRow){
            Connection con=null;
            PreparedStatement ps=null;
            ResultSet rs=null;
            ArrayList<BoardVO> arr=new ArrayList<BoardVO>();
            try {
                con=getConnection(); //게시글은 최신순. 답글은 오래된 순.
                String sql="select * from ("
                            + "select rownum rn, aa.* from ("
                            + "select * from board order by ref desc, re_step asc) aa " 
                            + ") where rn <=? and rn >=?";
                ps=con.prepareStatement(sql);
                ps.setInt(1, endRow);
                ps.setInt(2, startRow);
                rs=ps.executeQuery();
                while(rs.next()) {
                    BoardVO board=new BoardVO();
                    board.setNum(rs.getInt("num"));
                    board.setEmail(rs.getString("email"));
                    board.setIp(rs.getString("ip"));
                    board.setReadcount(rs.getInt("readcount"));
                    board.setSubject(rs.getString("subject"));
                    board.setWriter(rs.getString("writer"));
                    board.setReg_date(rs.getString("reg_date"));
                    arr.add(board);
                }
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                closeConnection(con, ps, rs);
            }
            return arr;
        }
        
        //검색 전체보기
        public ArrayList<BoardVO> boardList(String field, String word, int startRow, int endRow){
            Connection con=null;
            PreparedStatement ps=null;
            ResultSet rs=null;
            ArrayList<BoardVO> arr=new ArrayList<BoardVO>();
            try {
                con=getConnection();
                String sql="select * from ("
                        + "select rownum rn, aa.* from ("
                        + "select * from board where "
                        +field+" like '%"+word+"%' order by ref desc, re_step asc) aa "
                        + ") where rn <=? and rn >=?";
                ps=con.prepareStatement(sql);
                ps.setInt(1, endRow);
                ps.setInt(2, startRow);
                rs=ps.executeQuery();
                while(rs.next()) {
                    BoardVO board=new BoardVO();
                    board.setNum(rs.getInt("num"));
                    board.setEmail(rs.getString("email"));
                    board.setIp(rs.getString("ip"));
                    board.setReadcount(rs.getInt("readcount"));
                    board.setSubject(rs.getString("subject"));
                    board.setWriter(rs.getString("writer"));
                    board.setReg_date(rs.getString("reg_date"));
                    arr.add(board);
                }
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                closeConnection(con, ps, rs);
            }
            return arr;
        }
        
        //상세보기
        public BoardVO boardView(int num) {
            Connection con=null;
            Statement st=null;
            ResultSet rs=null;
            BoardVO board=null;
            
            try {
                con=getConnection();
                st=con.createStatement();
                st.executeUpdate("update board set readcount=readcount+1 where num="+num);
                String sql="select * from board where num="+num;
                st=con.createStatement();
                rs=st.executeQuery(sql);
                if(rs.next()) {
                    board=new BoardVO();
                    board.setNum(rs.getInt("num"));
                    board.setContent(rs.getString("content"));
                    board.setEmail(rs.getString("email"));
                    board.setSubject(rs.getString("subject"));
                    board.setIp(rs.getString("ip"));
                    board.setPasswd(rs.getString("passwd"));
                    board.setRe_level(rs.getInt("re_level"));
                    board.setRe_step(rs.getInt("re_step"));
                    board.setRef(rs.getInt("ref"));
                    board.setReg_date(rs.getString("reg_date"));
                    board.setReadcount(rs.getInt("readcount"));
                    board.setWriter(rs.getString("writer"));
                }
            }catch (Exception e) {
                e.printStackTrace();
            }finally {
                closeConnection(con, st, rs);
            }
            return board;
        }
        
        //수정
        public int boardUpdate(BoardVO board) {
            Connection con=null;
            PreparedStatement ps=null;
            ResultSet rs=null;
            
            int flag=0;
            String sql="";
            try {
                con=getConnection();
                sql="select passwd from board where num="+board.getNum();
                ps=con.prepareStatement(sql); //passwd 검색
                rs=ps.executeQuery();
                if(rs.next()) {
                    if(rs.getString("passwd").equals(board.getPasswd())) { //비번 일치
                        sql="UPDATE BOARD SET subject=?, email=?, content=?, reg_date=sysdate where num=?";
                        ps=con.prepareStatement(sql);
                        ps.setString(1, board.getSubject());
                        ps.setString(2, board.getEmail());
                        ps.setString(3, board.getContent());
                        ps.setInt(4, board.getNum());
                        flag=ps.executeUpdate(); //업데이트 된 수를 flag에 담는다.
                    }
                }
            }catch (Exception e) {
                e.printStackTrace();
            }finally {
                closeConnection(con, ps);
            }
            return flag;
        }
        
        //삭제
        public int boardDelete(int num) {
            int flag=0;
            Connection con=null;
            Statement st=null;
            try {
                con=getConnection();
                String sql="DELETE FROM board WHERE num="+num;
                st=con.createStatement();
                flag=st.executeUpdate(sql);
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                closeConnection(con, st, null);
            }
            return flag;
        }
        
        //개수
        public int boardCount() {
            Connection con=null;
            Statement st=null;
            ResultSet rs=null;
            int count=0;
            try {
                con=getConnection();
                st=con.createStatement();
                String sql="select count(*) from board";
                rs=st.executeQuery(sql);
                if(rs.next()) {
                    count=rs.getInt(1);
                }
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                closeConnection(con, st, rs);
            }
            return count;
        }
        
        //검색 개수
            public int boardCount(String field, String word) {
                Connection con=null;
                Statement st=null;
                ResultSet rs=null;
                int count=0;
                try {
                    con=getConnection();
                    st=con.createStatement();
                    String sql="select count(*) from board where "+field+" like '%"+word+"%'";
                    rs=st.executeQuery(sql);
                    if(rs.next()) {
                        count=rs.getInt(1);
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                } finally {
                    closeConnection(con, st, rs);
                }
                return count;
            }
            
        //comment
            
        //commentInsert
        public void commentInsert(CommentVO cvo) {
            Connection con=null;
            PreparedStatement ps=null;
            try {
                con=getConnection();
                String sql="INSERT INTO commentboard(cnum, userid, msg, bnum)"
                        + "VALUES(comment_seq.nextval,?,?,?)";
                ps=con.prepareStatement(sql);
                ps.setString(1, cvo.getUserid());
                ps.setString(2, cvo.getMsg());
                ps.setInt(3, cvo.getBnum());
                ps.executeUpdate();
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                closeConnection(con, ps);
            }
        }
        
        //commentList
        public ArrayList<CommentVO> commentList(int num){
            Connection con=null;
            Statement st=null;
            ResultSet rs=null;
            ArrayList<CommentVO> arr=new ArrayList<CommentVO>();
            
            try {
                con=getConnection();
                String sql="SELECT * FROM COMMENTBOARD where bnum="+num+" ORDER BY cnum DESC";
                st=con.createStatement();
                rs=st.executeQuery(sql);
                while(rs.next()) {
                    CommentVO comment=new CommentVO();
                    comment.setBnum(rs.getInt("bnum"));
                    comment.setCnum(rs.getInt("cnum"));
                    comment.setMsg(rs.getString("msg"));
                    comment.setReg_date(rs.getString("reg_date"));
                    comment.setUserid(rs.getString("userid"));
                    arr.add(comment);
                }
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                closeConnection(con, st, rs);
            }
            return arr;
        }
        
        //닫기 closeConnection
            private void closeConnection(Connection con, PreparedStatement ps) {
                try {
                    if(ps!=null) ps.close();
                    if(con!=null) con.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                } 
            }
            private void closeConnection(Connection con, Statement st, ResultSet rs) {
                try {
                    if(st!=null) st.close();
                    if(con!=null) con.close();
                    if(rs!=null) rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                } 
            }
    }
     
    cs
     
     

 


  • commentboard 이름의 테이블을 생성하여 댓글 DB만들기. 댓글번호 cnum을 기본키로 하고 board테이블의 num을 bnum이름으로 외래키로 참조한다.

 

 

cnum으로 쓸 시퀀스 생성

 


 

  • CommentVO.java: 댓글 자바빈즈

 

package com.board;

public class CommentVO {

    private int cnum;

    private String userid;

    private String reg_date;

    private String msg;

    private int bnum;

    public int getCnum() {

        return cnum;

    }

    public void setCnum(int cnum) {

        this.cnum = cnum;

    }

    public String getUserid() {

        return userid;

    }

    public void setUserid(String userid) {

        this.userid = userid;

    }

    public String getReg_date() {

        return reg_date;

    }

    public void setReg_date(String reg_date) {

        this.reg_date = reg_date;

    }

    public String getMsg() {

        return msg;

    }

    public void setMsg(String msg) {

        this.msg = msg;

    }

    public int getBnum() {

        return bnum;

    }

    public void setBnum(int bnum) {

        this.bnum = bnum;

    }

    

    

}

 

 


 

  • commentInsert.jsp: 댓글 입력 로직

 

<%@page import="com.board.BoardDAO"%>

<%@page import="com.board.CommentVO"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    request.setCharacterEncoding("utf-8");

    String msg=request.getParameter("msg");

    int num=Integer.parseInt(request.getParameter("num"));

    String userid=(String)session.getAttribute("userid");

    if(userid==null){ //로그인 안됨

        out.println("1");   

    }else{ //로그인

        CommentVO comment=new CommentVO();

        comment.setUserid(userid);

        comment.setMsg(msg);

        comment.setBnum(num);

        BoardDAO dao=BoardDAO.getInstance();

        dao.commentInsert(comment);

    }

%>

 

 


 

  • commentList.jsp: 댓글 목록

 

<%@page import="org.json.simple.JSONObject"%>

<%@page import="org.json.simple.JSONArray"%>

<%@page import="com.board.CommentVO"%>

<%@page import="java.util.ArrayList"%>

<%@page import="com.board.BoardDAO"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    request.setCharacterEncoding("utf-8");

    int num=Integer.parseInt(request.getParameter("num"));

    BoardDAO dao=BoardDAO.getInstance();

    ArrayList<CommentVO>arr=dao.commentList(num);

    JSONArray jarr=new JSONArray();

    for(CommentVO cb:arr){

        JSONObject obj=new JSONObject();

        obj.put("bnum",cb.getBnum());

        obj.put("cnum",cb.getCnum());

        obj.put("msg",cb.getMsg());

        obj.put("userid",cb.getUserid());

        obj.put("reg_date",cb.getReg_date());

        jarr.add(obj);

    }

    out.println(jarr.toString());

%>  


 

 

 

'Learning > JSP' 카테고리의 다른 글

JSTL  (0) 2020.07.27
서블릿  (0) 2020.07.27
게시판 1  (0) 2020.07.22
회원가입2  (0) 2020.07.22
회원가입  (0) 2020.07.20
  • writeForm.jsp: 게시판에 글 등록하는 폼

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<form action="writePro.jsp" method="post">

<table border=1>

    <tr>

        <td>이름</td>

        <td><input type="text" name="writer"></td>

    </tr>

    <tr>

        <td>제목</td>

        <td><input type="text" name="subject"></td>

    </tr>

    <tr>

        <td>이메일</td>

        <td><input type="text" name="email"></td>

    </tr>

    <tr>

        <td>내용</td>

        <td><textarea cols="50" rows="20" name="content"></textarea></td>

    </tr>

    <tr>

        <td>비밀번호</td>

        <td><input type="password" name="passwd"></td>

    </tr>

    <tr>

        <td colspan="2" align="center">

        <input type="submit" value="글쓰기">

        <input type="reset" value="다시 작성">

        <input type="button" value="목록보기">

        </td>

    </tr>

</table>

</form>

</body>

</html>

 


  • BoardVO.java: 게터 세터 자바빈즈

 

package com.board;

public class BoardVO {

    private int num;

    private String writer;

    private String subject;

    private String email;

    private String content;

    private String ip;

    private int readcount;

    private int ref;

    private int re_step;

    private int re_level;

    private String passwd;

    private String reg_date;

    public int getNum() {

        return num;

    }

    public void setNum(int num) {

        this.num = num;

    }

    public String getWriter() {

        return writer;

    }

    public void setWriter(String writer) {

        this.writer = writer;

    }

    public String getSubject() {

        return subject;

    }

    public void setSubject(String subject) {

        this.subject = subject;

    }

    public String getEmail() {

        return email;

    }

    public void setEmail(String email) {

        this.email = email;

    }

    public String getContent() {

        return content;

    }

    public void setContent(String content) {

        this.content = content;

    }

    public String getIp() {

        return ip;

    }

    public void setIp(String ip) {

        this.ip = ip;

    }

    public int getRef() {

        return ref;

    }

    public void setRef(int ref) {

        this.ref = ref;

    }

    public int getRe_step() {

        return re_step;

    }

    public void setRe_step(int re_step) {

        this.re_step = re_step;

    }

    public int getRe_level() {

        return re_level;

    }

    public void setRe_level(int re_level) {

        this.re_level = re_level;

    }

    public String getPasswd() {

        return passwd;

    }

    public void setPasswd(String passwd) {

        this.passwd = passwd;

    }

    public String getReg_date() {

        return reg_date;

    }

    public void setReg_date(String reg_date) {

        this.reg_date = reg_date;

    }

    public int getReadcount() {

        return readcount;

    }

    public void setReadcount(int readcount) {

        this.readcount = readcount;

    }

}

  • BoardDAO.java: CRUD 메소드

 

package com.board;

import java.sql.Connection;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

import java.util.ArrayList;

import javax.naming.Context;

import javax.naming.InitialContext;

import javax.sql.DataSource;

public class BoardDAO {

    

    //디비셋팅

    private static BoardDAO instance=new BoardDAO();

    

    public static BoardDAO getInstance() {

        return instance;

    }

    

    private Connection getConnection() throws Exception{

        Context initCtx=new InitialContext();

        Context envCtx=(Context) initCtx.lookup("java:comp/env");

        DataSource ds=(DataSource) envCtx.lookup("jdbc/member");

        return ds.getConnection();

    }

    

    //추가

    public void boardInsert(BoardVO board) {

        Connection con=null;

        PreparedStatement ps=null;

        

        try {

            con=getConnection();

            //writer, email, content, passwd, num, subject

            String sql="INSERT INTO BOARD(num,writer,subject,email,content,passwd,ip)"

                    + "VALUES (board_seq.nextval,?,?,?,?,?,?)";

            ps=con.prepareStatement(sql);

            ps.setString(1, board.getWriter());

            ps.setString(2, board.getSubject());

            ps.setString(3, board.getEmail());

            ps.setString(4, board.getContent());

            ps.setString(5, board.getPasswd());

            ps.setString(6, board.getIp());

            ps.executeUpdate();

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con,ps);

        }

    }

    

    //전체보기

    public ArrayList<BoardVO> boardList(){

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        ArrayList<BoardVO> arr=new ArrayList<BoardVO>();

        try {

            con=getConnection();

            String sql="select * from board";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            while(rs.next()) {

                BoardVO board=new BoardVO();

                board.setNum(rs.getInt("num"));

                board.setEmail(rs.getString("email"));

                board.setIp(rs.getString("ip"));

                board.setReadcount(rs.getInt("readcount"));

                board.setSubject(rs.getString("subject"));

                board.setWriter(rs.getString("writer"));

                board.setReg_date(rs.getString("reg_date"));

                arr.add(board);

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return arr;

    }

    

    //검색 전체보기

    public ArrayList<BoardVO> boardList(String field, String word){

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        ArrayList<BoardVO> arr=new ArrayList<BoardVO>();

        try {

            con=getConnection();

            String sql="select * from board where "+field+" like '%"+word+"%'";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            while(rs.next()) {

                BoardVO board=new BoardVO();

                board.setNum(rs.getInt("num"));

                board.setEmail(rs.getString("email"));

                board.setIp(rs.getString("ip"));

                board.setReadcount(rs.getInt("readcount"));

                board.setSubject(rs.getString("subject"));

                board.setWriter(rs.getString("writer"));

                board.setReg_date(rs.getString("reg_date"));

                arr.add(board);

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return arr;

    }

    

    //상세보기

    public BoardVO boardView(int num) {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        BoardVO board=null;

        

        try {

            con=getConnection();

            String sql="select * from board where num="+num;

            st=con.createStatement();

            rs=st.executeQuery(sql);

            if(rs.next()) {

                board=new BoardVO();

                board.setNum(rs.getInt("num"));

                board.setContent(rs.getString("content"));

                board.setEmail(rs.getString("email"));

                board.setSubject(rs.getString("subject"));

                board.setIp(rs.getString("ip"));

                board.setPasswd(rs.getString("passwd"));

                board.setRe_level(rs.getInt("re_level"));

                board.setRe_step(rs.getInt("re_step"));

                board.setRef(rs.getInt("ref"));

                board.setReg_date(rs.getString("reg_date"));

                board.setReadcount(rs.getInt("readcount"));

                board.setWriter(rs.getString("writer"));

            }

        }catch (Exception e) {

            e.printStackTrace();

        }finally {

            closeConnection(con, st, rs);

        }

        return board;

    }

    

    //수정

    public int boardUpdate(BoardVO board) {

        Connection con=null;

        PreparedStatement ps=null;

        ResultSet rs=null;

        

        int flag=0;

        String sql="";

        try {

            con=getConnection();

            sql="select passwd from board where num="+board.getNum();

            ps=con.prepareStatement(sql); //passwd 검색

            rs=ps.executeQuery();

            if(rs.next()) {

                if(rs.getString("passwd").equals(board.getPasswd())) { //비번 일치

                    sql="UPDATE BOARD SET subject=?, email=?, content=?, reg_date=sysdate where num=?";

                    ps=con.prepareStatement(sql);

                    ps.setString(1, board.getSubject());

                    ps.setString(2, board.getEmail());

                    ps.setString(3, board.getContent());

                    ps.setInt(4, board.getNum());

                    flag=ps.executeUpdate(); //업데이트 된 수를 flag에 담는다.

                }

            }

        }catch (Exception e) {

            e.printStackTrace();

        }finally {

            closeConnection(con, ps);

        }

        return flag;

    }

    

    //삭제

    public int boardDelete(int num) {

        int flag=0;

        Connection con=null;

        Statement st=null;

        try {

            con=getConnection();

            String sql="DELETE FROM board WHERE num="+num;

            st=con.createStatement();

            flag=st.executeUpdate(sql);

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, null);

        }

        return flag;

    }

    

    //검색

    

    //개수

    public int boardCount() {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        int count=0;

        try {

            con=getConnection();

            st=con.createStatement();

            String sql="select count(*) from board";

            rs=st.executeQuery(sql);

            if(rs.next()) {

                count=rs.getInt(1);

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return count;

    }

    

    //검색 개수

        public int boardCount(String field, String word) {

            Connection con=null;

            Statement st=null;

            ResultSet rs=null;

            int count=0;

            try {

                con=getConnection();

                st=con.createStatement();

                String sql="select count(*) from board where "+field+" like '%"+word+"%'";

                rs=st.executeQuery(sql);

                if(rs.next()) {

                    count=rs.getInt(1);

                }

            } catch (Exception e) {

                e.printStackTrace();

            } finally {

                closeConnection(con, st, rs);

            }

            return count;

        }

    

    //닫기 closeConnection

        private void closeConnection(Connection con, PreparedStatement ps) {

            try {

                if(ps!=null) ps.close();

                if(con!=null) con.close();

            } catch (SQLException e) {

                e.printStackTrace();

            }

        }

        private void closeConnection(Connection con, Statement st, ResultSet rs) {

            try {

                if(st!=null) st.close();

                if(con!=null) con.close();

                if(rs!=null) rs.close();

            } catch (SQLException e) {

                e.printStackTrace();

            }

        }

}


  • writePro.jsp: useBean 사용하여 writeForm에서 보낸 값들이 DB에 입력되도록 하는 로직

 

<%@page import="com.board.BoardDAO"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    request.setCharacterEncoding("utf-8");

%>

<jsp:useBean id="board" class="com.board.BoardVO"/>

<jsp:setProperty property="*" name="board"/>

<%

    BoardDAO dao=BoardDAO.getInstance();

    String ip=request.getRemoteAddr();

    board.setIp(ip);

    dao.boardInsert(board);

    response.sendRedirect("list.jsp");

%>


  • list.jsp: 작성한 글 목록 폼. 제목을 클릭하면 글 내용을 볼 수 있도록 상세보기 폼으로 넘어감

 

 

<%@page import="com.board.BoardVO"%>

<%@page import="com.board.BoardDAO"%>

<%@page import="java.util.ArrayList"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<link rel="stylesheet"

href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<style>

div.divCss{

    text-align: right;

    background-color:  darkgray;

    padding-right: 20px;

}

a:hover { text-decoration: none;  }

a:link {text-decoration: none;  }

a:visited {text-decoration: none; }

</style>

</head>

<%

    BoardDAO dao=BoardDAO.getInstance();

    String field="", word="";

    ArrayList<BoardVO> arr=null;

    int count=0;

    if(request.getParameter("word")!=null){

        field=request.getParameter("field");

        word=request.getParameter("word");

        arr=dao.boardList(field,word);

        count=dao.boardCount(field,word);

    }else{

        arr=dao.boardList();

        count=dao.boardCount();

    }

%>

<body>

<div align="right">

    <a href=""></a>님 반갑습니다.

    <a href="">로그아웃</a>

    <br>전체 게시글 수: <span id="cntSpan"><%=count %></span><br>

    <a href="writeForm.jsp">글쓰기</a>

</div>

    <table class="table table-striped">

    <thead>

        <tr>

            <th scope="col">번호</th>

            <th>제목</th>

            <th>작성자</th>

            <th>작성일</th>

            <th>조회수</th>

            <th>IP주소</th>

        </tr>

    </thead>

    <tbody>

<%

    for(BoardVO vo: arr){

%>

        <tr>

            <th scope="row"><%=vo.getNum()%></th>       

            <td><a href="boardView.jsp?num=<%=vo.getNum()%>"><%=vo.getSubject() %></a></td>        

            <td><%=vo.getWriter() %></td>       

            <td><%=vo.getReg_date()%></td>      

            <td><%=vo.getReadcount() %></td>    

            <td><%=vo.getIp() %></td>   

        </tr>       

<%

    }

%>  

    </tbody>

    </table>

<br><br>

<form action="list.jsp" name="search" method="get">

    <table align=center>

        <tr>

            <td>

            <select name="field" size=1>

                <option value="subject">제목

                <option value="writer">작성자

            </select>

            <input type="text" size=16 name="word">

            <input type="submit" value="찾기">

            </td>

        </tr>

    </table>

</form>

</body>

</html>


  • boardView.jsp: 상세보기 폼. 글수정, 글삭제, 답글쓰기, 글목록 버튼클릭.

 

 

<%@page import="com.board.BoardVO"%>

<%@page import="com.board.BoardDAO"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<%

    request.setCharacterEncoding("utf-8");

    int num=Integer.parseInt(request.getParameter("num"));

    BoardDAO dao=BoardDAO.getInstance();

    BoardVO board=dao.boardView(num);

%>

</head>

<script>

function del(){

    if(confirm("정말 삭제할까요?")){

        location.href="deletePro.jsp?num=<%=num%>";

    }

}

</script>

<body>

<h2>글 내용 보기</h2>

<table border=1 width=500>

    <tr>

        <td>글번호</td>

        <td><%=board.getNum() %></td>

        <td>조회수</td>

        <td><%=board.getReadcount() %></td>

    </tr>

    <tr>

        <td>작성자</td>

        <td><%=board.getWriter() %></td>

        <td>작성일</td>

        <td><%=board.getReg_date() %></td>

    </tr>

    <tr>

        <td>글제목</td>

        <td colspan="3"><%=board.getSubject() %></td>

    </tr>

    <tr>

        <td>글내용</td>

        <td colspan="3"><%=board.getContent() %></td>

    </tr>

    <tr>

        <td colspan="4">

        <input type="button" value="글수정" onclick="location.href='updateForm.jsp?num=<%=num%>'">

        <input type="button" value="글삭제" onclick="del()">

        <input type="button" value="답글쓰기" onclick="">

        <input type="button" value="글목록" onclick="location.href='list.jsp'">

        </td>

    </tr>

</table>

</body>

</html>


  • updateForm.jsp: 글 수정하기 폼.

 

 

<%@page import="com.board.BoardVO"%>

<%@page import="com.board.BoardDAO"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<%

    request.setCharacterEncoding("utf-8");

    int num=Integer.parseInt(request.getParameter("num"));

    BoardDAO dao=BoardDAO.getInstance();

    BoardVO board=dao.boardView(num);

%>

</head>

<body>

<h1>글 수정하기</h1>

<form action="updatePro.jsp" method="post">

<input type="hidden" name="num" value="<%=num%>">

<table border=1>

    <tr>

        <td>이름</td>

        <td><%=board.getWriter()%></td>

    </tr>

    <tr>

        <td>제목</td>

        <td><input type="text" name="subject" value="<%=board.getSubject()%>"></td>

    </tr>

    <tr>

        <td>이메일</td>

        <td><input type="text" name="email" value="<%=board.getEmail()%>"></td>

    </tr>

    <tr>

        <td>내용</td>

        <td><textarea cols="50" rows="20" name="content"><%=board.getContent()%></textarea></td>

    </tr>

    <tr>

        <td>비밀번호</td>

        <td><input type="password" name="passwd"></td>

    </tr>

    <tr>

        <td colspan="2" align="center">

        <input type="submit" value="수정">

        <input type="reset" value="다시 작성">

        <input type="button" value="목록보기" onclick="location.href='list.jsp'">

        </td>

    </tr>

</table>

</form>

</body>

</html>

 


  • updatePro.jsp: 글 수정 로직

 

<%@page import="com.board.BoardDAO"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    request.setCharacterEncoding("utf-8");

%>

<jsp:useBean id="board" class="com.board.BoardVO"/>

<jsp:setProperty property="*" name="board"/>

<%

    BoardDAO dao=BoardDAO.getInstance();

    String ip=request.getRemoteAddr();

    board.setIp(ip);

    int flag=dao.boardUpdate(board);

    if(flag==1){ //정상처리

        response.sendRedirect("list.jsp");

    }else{ //비번오류

%>

        <script>

            alert("비밀번호가 일치하지 않습니다.");

            history.back(); //history.go(-1); 이전 페이지로 넘어감

        </script>

<%

    }

%>

 


  • deletePro.jsp: 글 삭제 로직

 

<%@page import="org.json.simple.JSONObject"%>

<%@page import="org.json.simple.JSONArray"%>

<%@page import="com.board.BoardVO"%>

<%@page import="java.util.ArrayList"%>

<%@page import="com.board.BoardDAO"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    request.setCharacterEncoding("utf-8");

    int num=Integer.parseInt(request.getParameter("num"));

    BoardDAO dao=BoardDAO.getInstance();

    int flag=dao.boardDelete(num);

    response.sendRedirect("list.jsp");

%>

 

 

 

 

 

 

'Learning > JSP' 카테고리의 다른 글

서블릿  (0) 2020.07.27
게시판 2  (0) 2020.07.23
회원가입2  (0) 2020.07.22
회원가입  (0) 2020.07.20
주소록 생성하기2  (0) 2020.07.16
  • 회원가입 (JMEMBER) 에서 memberList.jsp에 전체회원수 출력하기

 

  1. memberList.jsp에 int count=dao.memberCount(); 변수 선언

  2. MemberDAOImpl에 public int memberCount() 메소드 생성. if(rs.next())로 count 변수에 rs.getString(1)값 주기

 

 

  • 회원 삭제할때 전체 회원 수도 가져오기 (그 전엔 새로고침 해야지 전체 회원 수가 바뀌었음)

    • 제이슨 어레이로 memberList.jsp에 값들을 뿌렸다. 삭제할때 새로고침 없이 전체회원수도 함께 바꾸려면, 즉 제이슨 어레이와 전체회원수와 같이 연결하려면.. 제이슨 오브젝을 하나 만들고 기존의 제이슨 어레이와 전체회원수count를 넣어준다. (put)

    •  

 


 

  • memberList.jsp

 

<%@page import="com.member.MemberVO"%>

<%@page import="java.util.ArrayList"%>

<%@page import="com.member.MemberDAOImpl"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<link rel="stylesheet"

href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script src="member.js"></script>

<style>

div.divCss{

    text-align: right;

    background-color:  darkgray;

    padding-right: 20px;

}

a:hover { text-decoration: none;  }

a:link {text-decoration: none;  }

a:visited {text-decoration: none; }

</style>

</head>

<div class="divCss">

<a href="memberForm.jsp">추가하기 /</a>

<a href="memberList.jsp">전체보기</a>

</div>

<%

    request.setCharacterEncoding("utf-8");

    MemberDAOImpl dao=MemberDAOImpl.getInstance();

    ArrayList<MemberVO> arr=dao.memberList();

    String suserid=(String)session.getAttribute("userid");

    int count=dao.memberCount();

%>

<body>

<div align="right">

    <a href="memberView.jsp"><%=suserid%></a> 관리자님 반갑습니다.

    <a href="logout.jsp">로그아웃</a>

    <br>전체회원 수: <span id="cntSpan"><%=count %></span>

</div>

    <table class="table table-striped">

    <thead>

        <tr>

            <th scope="col">이름</th>

            <th scope="col">아이디</th>

            <th scope="col">전화번호</th>

            <th scope="col">이메일</th>

            <th scope="col">구분</th>

            <th scope="col">삭제</th>

        </tr>

    </thead>

    <tbody>

<%

    for(MemberVO m:arr){

        String mode=m.getAdmin()==0?"일반회원":"관리자";

%>

        <tr>

            <th scope="row"><%=m.getName() %></th>     

            <td><%=m.getUserid() %></td>        

            <td><%=m.getPhone() %></td>     

            <td><%=m.getEmail() %></td>     

            <td><%=mode %></td> 

            <td><a href="javascript:del('<%=m.getUserid() %>','<%=mode%>')">삭제</a></td>  

        </tr>       

<%

    }

%>  

    </tbody>

    </table>

</body>

</html>

 

  • member.js

 

var exp= /^[0-9]{3}-[0-9]{4}-[0-9]{4}$/;

$(document).ready(function(){

    $("#send").click(function(){

        if($("#name").val()==""){

            alert("이름을 입력하세요");

            $("#name").focus();

            return false;

        }

        //아이디가 공백일때

        if($("#userid").val()==""){

            alert("아이디를 입력하세요");

            $("#userid").focus();

            return false;

        }

        //암호가 공백일때

        if($("#pwd").val()==""){

            alert("암호를 입력하세요");

            $("#pwd").focus();

            return false;

        }

        //암호확인이 공백일때

        if($("#pwd_check").val()==""){

            alert("암호확인 필수");

            $("#pwd_check").focus();

            return false;

        }

        //암호 일치확인

        if($("#pwd").val()!=$("#pwd_check").val()){

            alert("암호 불일치");

            $("#pwd_check").focus();

            return false;

        }

        //전화번호 확인(정규식을 만들어놓고 비교)

        if(!$("#phone").val().match(exp)){

            alert("전화번호를 정확하게 입력하세요");

            $("#phone").focus();

            return false;

        }

        

        $("#frm").submit();

    });//send

    

    

    //아이디 중복체크 버튼을 눌렀을때

    $("#idBtn").click(function(){

        window.open("idCheck.jsp","","width=600 height=500")

    }); //idBtn

    

    //중복체크 새 창에서 아이디 중복확인

    $("#idCheckBtn").click(function(){

        if($("#userid").val()==""){

            alert("아이디를 입력하세요");

            $("#userid").focus();

            return false;

        }

        $.ajax({

            type:"post",

            url :"idCheckPro.jsp",

            data: {"userid":$("#userid").val()},

            success: function(value){

                if(value.trim()=="yes"){

                    alert("사용가능한 아이디")

                    $(opener.document).find("#userid").val($("#userid").val());

                    $(opener.document).find("#uid").val($("#userid").val());

                    self.close();

                }else{

                    alert("중복된 아이디")

                }

            },

            error: function(e){

                alert("error:"+e)

            }

        });

    }) //idCheckBtn

    

})//document

function del(userid, mode){

      if(mode=="관리자"){

          alert("관리자는 삭제할 수 없음");

          return;

      }

    $.getJSON("memberDelete.jsp",

            {"userid": userid},

            function(data){

              var htmlStr="";

              $.each(data.jarr,function(key,val){

                  htmlStr+="<tr>";

                  htmlStr+="<td>"+val.name+"</td>";

                  htmlStr+="<td>"+val.userid+"</td>";

                  htmlStr+="<td>"+val.phone+"</td>";

                  htmlStr+="<td>"+val.email+"</td>";

                  htmlStr+="<td>"+val.mode+"</td>";

                  htmlStr+="<td><a href=javascript:del('"+val.userid+"','"+val.mode+"')>삭제2</a></td>";

                  htmlStr+="</tr>";

              })

              $("table tbody").html(htmlStr);

              $("#cntSpan").text(data.cntObj.count);

            } //콜백함수

    ); //getJSON

} //del() 함수

 

 

  • memberDelete.jsp

 

<%@page import="org.json.simple.JSONObject"%>

<%@page import="org.json.simple.JSONArray"%>

<%@page import="com.member.MemberVO"%>

<%@page import="java.util.ArrayList"%>

<%@page import="com.member.MemberDAOImpl"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    request.setCharacterEncoding("utf-8");

    MemberDAOImpl dao=MemberDAOImpl.getInstance();

    String userid=request.getParameter("userid");

    dao.memberDel(userid);

    ArrayList<MemberVO> arr=dao.memberList();

    int count=dao.memberCount();

    JSONObject mainObject=new JSONObject();

    

    JSONArray jarr=new JSONArray();

    for(MemberVO vo: arr){

        String mode=vo.getAdmin()==0? "일반회원":"관리자";

        JSONObject obj=new JSONObject();

        obj.put("name", vo.getName());

        obj.put("userid", vo.getUserid());

        obj.put("email", vo.getEmail());

        obj.put("phone", vo.getPhone());

        obj.put("mode", mode);

        jarr.add(obj); //회원데이터

    }

    

    JSONObject countObj=new JSONObject();

    countObj.put("count", count); //회원수

    

    mainObject.put("jarr", jarr);

    mainObject.put("cntObj", countObj);

    

    out.println(mainObject.toString());

%>

 

 

  • memberDAOImpl

 

package com.member;

import java.sql.Connection;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

import java.util.ArrayList;

import javax.naming.Context;

import javax.naming.InitialContext;

import javax.sql.DataSource;

public class MemberDAOImpl implements MemberDAO{

    private static MemberDAOImpl instance=new MemberDAOImpl();

    public static MemberDAOImpl getInstance() {

        return instance;

    }

    private Connection getConnection() throws Exception{

        Context initCtx=new InitialContext();

        Context envCtx=(Context) initCtx.lookup("java:comp/env");

        DataSource ds=(DataSource) envCtx.lookup("jdbc/member"); //context.xml의 name을 jdbc/member로 바꾸기

        return ds.getConnection();

    }

    

    //추가

    public void memberInsert(MemberVO vo) {

        Connection con=null;

        PreparedStatement ps=null;

        

        try {

            con=getConnection();

            String sql="INSERT INTO JMEMBER VALUES (?,?,?,?,?,?)";

            ps=con.prepareStatement(sql);

            ps.setString(1, vo.getUserid());

            ps.setString(2, vo.getName());

            ps.setString(3, vo.getPwd());

            ps.setString(4, vo.getEmail());

            ps.setString(5, vo.getPhone());

            ps.setInt(6, vo.getAdmin());

            ps.executeUpdate();

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con,ps);

        }

    }

    //전체보기 List

    public ArrayList<MemberVO> memberList() {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null; //결과가 있으면 ResultSet씀

        ArrayList<MemberVO> arr=new ArrayList<>();

        try {

            con=getConnection();

            String sql="SELECT * FROM JMEMBER";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            while(rs.next()) {

                MemberVO member=new MemberVO();

                member.setName(rs.getString("name"));

                member.setUserid(rs.getString("userid"));

                member.setPwd(rs.getString("pwd"));

                member.setEmail(rs.getString("email"));

                member.setPhone(rs.getString("phone"));

                member.setAdmin(rs.getInt("admin"));

                arr.add(member);

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return arr;

    }

    //일반회원 회원정보 수정

    public int memberUpdate(MemberVO vo) {

        Connection con=null;

        PreparedStatement ps=null;

        int flag=0;

        try {

            con=getConnection();

            String sql="update JMEMBER set name=?, pwd=?, email=?, phone=?, admin=? where userid=?";

            ps=con.prepareStatement(sql);

            ps.setString(1, vo.getName());

            ps.setString(2, vo.getPwd());

            ps.setString(3, vo.getEmail());

            ps.setString(4, vo.getPhone());

            ps.setInt(5, vo.getAdmin());

            ps.setString(6, vo.getUserid());

            flag=ps.executeUpdate();

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, ps);

        }

        return flag;

    }

    //일반회원 회원정보 상세보기

    public MemberVO memberView(String userid) {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        MemberVO m=null;

        try {

            con=getConnection();

            String sql="select * from JMEMBER where userid='"+userid+"'";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            if(rs.next()) {

                m=new MemberVO();

                m.setUserid(rs.getString("userid"));

                m.setPwd(rs.getString("pwd"));

                m.setPhone(rs.getString("phone"));

                m.setName(rs.getString("name"));

                m.setEmail(rs.getString("email"));

                m.setAdmin(rs.getInt("admin"));

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return m;

    }

    //삭제

    public void memberDel(String userid) {

        Connection con=null;

        Statement st=null;

        try {

            con=getConnection();

            String sql="delete from JMEMBER where userid='"+userid+"'";

            st=con.createStatement();

            st.executeUpdate(sql);

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, null);

        }

    }

    //아이디 중복체크

    public String idCheck(String userid) {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        String flag="yes"; //사용가능

        try {

            con=getConnection();

            String sql="select * from JMEMBER where userid='"+userid+"'";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            if(rs.next()) {

                flag="no";

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return flag;

    }

    

    //로그인체크 (비밀번호 오류: 2, 회원아님: -1, 관리자: 1, 일반회원: 0)

    public int loginCheck(String userid, String pwd) {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        int flag=-1;

        try {

            con=getConnection();

            String sql="select pwd, admin from JMEMBER where userid='"+userid+"'";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            if(rs.next()) { //id는 맞음

                if(rs.getString("pwd").equals(pwd)) { //비번 맞다

                    flag=rs.getInt("admin");

                }else { //비번 틀림

                    flag=2;

                }               

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return flag;

    }

    

    //전체회원 수

    public int memberCount() {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        int count=0;

        try {

            con=getConnection();

            st=con.createStatement();

            String sql="select count(*) from JMEMBER";

            rs=st.executeQuery(sql);

            if(rs.next()) {

                count=rs.getInt(1);

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return count;

    }

    

    //닫기 closeConnection

    private void closeConnection(Connection con, PreparedStatement ps) {

        try {

            if(ps!=null) ps.close();

            if(con!=null) con.close();

        } catch (SQLException e) {

            e.printStackTrace();

        }

    }

    private void closeConnection(Connection con, Statement st, ResultSet rs) {

        try {

            if(st!=null) st.close();

            if(con!=null) con.close();

            if(rs!=null) rs.close();

        } catch (SQLException e) {

            e.printStackTrace();

        }

    }

    

}



'Learning > JSP' 카테고리의 다른 글

게시판 2  (0) 2020.07.23
게시판 1  (0) 2020.07.22
회원가입  (0) 2020.07.20
주소록 생성하기2  (0) 2020.07.16
JSON 형식의 데이터값 읽어오기  (0) 2020.07.15
  • CSS 포지셔닝: CSS를 웹 문서 요소를 적절히 배치하는 것

  • box-sizing: 박스 모델 너비 값의 기준을 정함

    • content-box: width 속성 값을 콘텐츠 영역 너비 값으로 사용

    • border-box: width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용

 

 

<!DOCTYPE html>



<html lang="ko">

<head>

  <meta charset="utf-8">

  <title>box-sizing</title>

  <style>

    .box1{

      box-sizing: content-box;

      width: 300px;

      height: 150px;

      margin: 10px;

      padding: 30px;

      border: 2px solid red;

    }

    .box2{

      box-sizing: border-box;

      width: 300px;

      height: 150px;

      margin: 10px;

      padding: 30px;

      border: 2px solid red;

    }

  </style>

</head>

<body>

  <div class="box1"> box-sizing = "content-box" </div>

  <div class="box2"> box-sizing = "border-box"</div>

</body>

</html>

 

 

 

 


 

 

  • float: 컨텐츠들을 띄어서 정렬

 

<!doctype html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>박스모델</title>

    <style>

        .box1{

            padding: 20px;

            margin-right: 10px;

            background: yellow;

            float: left;

        }

        .box2{

            padding: 20px;

            margin-right: 10px;

            background: blue;

            float: left;

        }

        .box3{

            padding: 20px;

            margin-right: 10px;

            background: green;

            float: left;

        }

        .box4{

            padding: 20px;

            margin-right: 10px;

            background: pink;

            float: right;

        }

    </style>

</head>

<body>

    <div class="box1">박스1</div>

    <div class="box2">박스2</div>

    <div class="box3">박스3</div>

    <div class="box4">박스4</div>

</body>

</html>

 

 

 

 


 

  • clear: float 속성 해제

 

 

 

.box4{

            padding: 20px;

            margin-right: 10px;

            background: pink;

            clear: both;

        }

 

 

 

 


 

 

<!DOCTYPE html>



<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>2단 레이아웃</title>

    <style>

        div{

            border: 1px solid #ccc;

        }

        #container{

            width: 960px;

            padding: 20px;

            margin: 0 auto;

        }

        #header{

            padding: 20px;

            margin-bottom: 20px;

        }

        #content{

            width: 620px;

            padding: 20px;

            float: left;

            margin-bottom: 20px;

        }

        #aside{

            width: 220px;

            padding: 20px;

            float: right;

            background-color: #eee;

            margin-bottom: 20px;

        }

        #footer{

            padding: 20px;

            clear: both;

        }

    </style>

</head>

<body>

    <div id="container">

        <div id="header">

            <h1>사이트 제목</h1>

        </div>

        <div id="aside">

            <h2>사이드 바</h2>

            <p>모든 국민은 근로의 의무를 진다. 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다.</p>

        </div>

        <div id="content">

            <h2>본문</h2>

            <p>재산권의 행사는 공공복리에 적합하도록 하여야 한다. 정부는 회계연도마다 예산안을 편성하여 회계연도 개시 90일전까지 국회에 제출하고, 국회는 회계연도 개시 30일전까지 이를 의결하여야 한다.

            <br><br>대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 언론·출판에 대한 허가나 검열과 집회·결사에 대한 허가는 인정되지 아니한다.</p>

        </div>

        <div id="footer">

            <h2>푸터</h2>

            <p>이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.</p>

        </div>

    </div>

</body>

</html>





 

 


 

 

  • CSS 포지셔닝

    • static: 문서의 흐름에 맞춤

    • relative: 첫번째 요소 기준 자연스럽게 배치

    • absoulte: 원하는 위치에 배치. 부모 요소 중 postion:relative인 요소로 위치.

    • fixed: 원하는 위치에 배치. 브라우저 창 기준

  • visibility

    • visible: 화면에 표시

    • hidden: 화면에 요소 감춤. 크기는 유지

    • collapse: 서로 겹치도록 조절

  • z-index: 요소 쌓는 순서 정함

 

<!doctype html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>CSS 포지셔닝</title>

    <style>

        #wrap{

            position: relative;

            width: 300px;

            height: 300px;

            border: 1px solid gray;

        }

        .box{

            position: absolute;

            width: 50px;

            height: 50px;

            background: blue;

        }

        #crd1{

            top: 0; left:0;

        }

        #crd2{

            top: 0; right: 0;

        }

        #crd3{

            bottom: 0; right: 0;

        }

        #crd4{

            bottom: 0; left:0;

        }

        #crd5{

            top: 100px; left: 100px;

        }

    </style>

</head>

<body>

    <div id="wrap">

        <div class="box" id="crd1"></div>

        <div class="box" id="crd2"></div>

        <div class="box" id="crd3"></div>

        <div class="box" id="crd4"></div>

        <div class="box" id="crd5"></div>

    </div>

</body>

</html>

 

 

 

 


 

<!doctype html>

<html lang="ko">

    <head>

        <meta charset="utf-8">

        <title>visibility 속성</title>

        <style>

            img{

                margin: 10px;

                padding: 5px;

                border: 1px solid black;

            }

            .invisible{

                visibility: hidden;

            }

        </style>

    </head>

    <body>

            <img src="images/pic1.jpg">

            <img src="images/pic2.jpg" class="invisible">

            <img src="images/pic3.jpg">

    </body>

</html>

 

 

 


 

<!doctype html>

<html lang="ko">

    <head>

        <meta charset="utf-8">

        <title>z-index 속성</title>

        <style>

            div#wrapper {

                position: relative;

            }

            .box {

                position:absolute;

                width:100px;

                height:100px;

                border:1px solid black;

                font-size:26px;

            }

            #b1 {               

                left:50px;

                top:50px;

                background:#ff0000; 

                z-index: 1; 

            }

            #b2 {               

                left:110px;

                top:70px;

                background:#ffd800;

                z-index: 3;

            }

            #b3 {

                left:70px;

                top:110px;

                background:#0094ff;     

                z-index: 1;

            }

        </style>

    </head>

    <body>

        <div id="wrapper">

            <div id="b1" class="box">1</div>

            <div id="b2" class="box">2</div>

            <div id="b3" class="box">3</div>

        </div>

    </body>

</html>

 

 

 


 

 

  • column-width: 단의 너비를 고정, 화면 분할. 다단 편집.

  • break-before, break-after: 특정 요소의 앞이나 뒤에 다단 위치  (인쇄)

 

 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>HTML5 레이아웃</title>

    <style>

        body{

            font-family: "맑은 고딕", "고딕", "굴림";

        }

        .multi{

            -webkit-column-count: 120px;

            -moz-column-count: 120px;

            column-count: 3;

            column-gap: 20px;

            column-rule: 2px dotted yellow;

        }

    </style>

</head>

<body>

    <header>

        <h2>건강에 좋은 식품 - Super Food</h2>

    </header>

    <div class="multi">

        <p><b>코코넛 오일 </b>: 남미 파나마에서는.</p>

        <p><b>블루베리 </b>: 블루베리는 .</p>

        <p><b>아몬드 </b>: 혈관질환에 </p>

    </div>

</body>

</html>

 

 

 


 

 

<!DOCTYPE html>

<html lang="ko">

    <head>

        <meta charset="utf-8">

        <title>HTML5 레이아웃</title>

    <style>

            body{

                font-family:"맑은 고딕", "고딕", "굴림";

            }

            section {                           

                padding:20px;

                width:600px;

                margin:20px auto;

                border:1px solid #ccc;

                border-radius:10px;

            }

            .multi {

                -webkit-column-count: 3;

                -moz-column-count: 3;

                column-count: 3;

                -webkit-column-rule: 2px dotted #000;

                -moz-column-rule: 2px dotted #000;

                column-rule: 2px dotted #000;

                text-align: justify;

            }

            

            .no-col{

                background:#f0f0f0;

                margin:10px 3px;

                padding:20px;

                border-radius:5px;

                column-span: all;

    

            }

        </style>

    </head>

    <body>

        <section>

            <h2>건강에 좋은 식품 - Super Food</h2>

            <div class="multi">

                <h3>코코넛 오일</h3>

                <p>남 정도이다.</p>            

                <h3>아보카도</h3>

                <p>나무에서</p>

                <h3>케일</h3>

                <p>케일은</p>

                <h3>블루베리</h3>

                <p>블루베리는</p>

                <div class="no-col">

                    <h3>아몬드</h3>

                    <p>혈관질환에 </p>

                </div>

            </div>

        </section>

    </body>

</html>

 

 

 

 


 

 

  • caption-side: 캡션은 기본으로 표 위쪽에 표시. 이 속성을 이용해 아래쪽에도 표시가능

  • border: 표의 바깥 테두리와 셀 테두리 모두 지정

  • border-collapse: 표 테두리와 셀 테두리를 합칠 것인지 설정

 

 

<!DOCTYPE html>

<html lang="ko">

    <head>

        <meta charset="utf-8">

        <title>표 스타일</title>

    <style>

        body{

            font-family: "맑은 고딕", "고딕", "굴림";

            font-size: 20px;

        }

        .table1{

            border: 1px solid black;

            border-collapse: collapse;

        }

        .table1 td{

            border: 1px dotted black;

            padding: 10px;

            text-align: center;

        }

    </style>

    </head>

    <body>      

        <table class="table1">

            <caption>프로축구 경기 일정</caption>

            <tr>

                <td>울산</td>

                <td>울산 vs 인천</td>

            </tr>       

            <tr>

                <td>부산</td>

                <td>부산 vs 대전</td>

            </tr>       

            <tr>

                <td>서울</td>

                <td>서울 vs 강원</td>

            </tr>       

        </table>

    </body>

</html>

 

 

 


 

 

 

<!DOCTYPE html>

<html lang="ko">

    <head>

        <meta charset="utf-8">

        <title>표 스타일</title>

        <style>

            body{

                font-family:"맑은 고딕", "고딕", "굴림";

            }

            .schedule{

                border-collapse: separate;

                margin: 20px;

            }

            td{

                border: 1px solid black;

                padding: 10px;

                text-align: center;

            }

            #tb2 td{

                empty-cells: hide;

            }

        </style>

    </head>

    <body>      

        <table class="schedule" id="tb1">

            <caption>프로축구 경기 일정</caption>

            <tr>

                <td>울산</td>

                <td>울산 vs 인천</td>

                <td>TV 중계</td>

            </tr>       

            <tr>

                <td>부산</td>

                <td>부산 vs 대전</td>

                <td></td>

            </tr>       

            <tr>

                <td>서울</td>

                <td>서울 vs 강원</td>

                <td></td>

            </tr>                   

        </table>



        <table class="schedule" id="tb2">

            <caption>프로축구 경기 일정</caption>

            <tr>

                <td>울산</td>

                <td>울산 vs 인천</td>

                <td>TV 중계</td>

            </tr>

            <tr>

                <td>부산</td>

                <td>부산 vs 대전</td>

                <td></td>

            </tr>

            <tr>

                <td>서울</td>

                <td>서울 vs 강원</td>

                <td></td>

            </tr>

        </table>

    </body>

</html>

 

 


 

 

 

 

 

'Learning > HTML&JavaScript' 카테고리의 다른 글

HTML 멀티미디어  (0) 2020.07.24
HTML5 시멘틱 태그  (0) 2020.07.24
CSS와 박스 모델  (0) 2020.07.21
스타일과 스타일시트 글꼴  (0) 2020.07.17
<datalist>가 있는 신청서 폼  (0) 2020.07.17
  • 블록 레벨 요소: 요소 혼자 한 줄을 차지함. <div>, <p>등

  • 인라인 레벨 요소: 줄을 차지하지 않는 요소. <img>, <strong>등

 

  • 박스 모델: 실체 콘텐츠 영역, 패딩, 박스 테두리, 마진 등의 요소로 구성

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .box1{

            background: crimson;

            width: 400px;

            height: 100px;

        }

        .box2{

            background: blue;

            width: 50%;

            height: 100px;

        }

        div{

            margin: 10px;

        }

    </style>

</head>

<body>

    <div class="box1"></div>

    <div class="box2"></div>

</body>

</html>

 

 


 

  • display 속성: 블록 레벨 요소를 인라인 레벨 요소로 바꾸거나 인라인 레벨 요소를 블록 레벨 요소로 바꿈

    • display:block : 해당 요소를 블록 레벨로 지정

    • display:inline: 블록 레벨 요소를 인라인 레벨로 지정

    • display:inline-block: 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정

    • display:none: 해당 요소를 화면에 표시하지 않음. 화면에서 공간도 차지하지 않음

 

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        #block img{

            display:block;

            margin: 10px;

        }

        nav ul{

            list-style: none;

        }

        nav ul li{

            display: inline;

            margin-right: 20px;

            border-top: 3px solid black;

            padding: 10px 15px;

        }

        nav ul li a{

            text-decoration: none;

            color: black;

            

        }

        nav ul li:hover{

            background-color: #dbdbdb;

        }

    </style>

</head>

<body>

    <div id="block">

    <img src="images/pic1.jpg">

    <img src="images/pic2.jpg">

    <img src="images/pic3.jpg">

    </div>

    <div id="inline">

        <img src="images/pic1.jpg">

        <img src="images/pic2.jpg">

        <img src="images/pic3.jpg">

    </div>



    <nav>

        <ul>

            <li><a href="#">애완견종류</a></li>

            <li><a href="#">입양하기</a></li>

            <li><a href="#">건강돌보기</a></li>

            <li><a href="#">더불어살기</a></li>

        </ul>

    </nav>

</body>

</html>

 

 

 


 

 

nav{

            width: 100%;

            height: 60%;

            background-color: #069;

        }

        nav ul{

            list-style: none;

        }

        nav ul li{

            display: inline-block;

            margin: 20px;

            /*border-top: 3px solid black;*/

            padding: 10px 15px;

        }

        nav ul li a{

            text-decoration: none;

            color: white;

        }







<nav>

        <ul>

            <li><a href="#">애완견종류</a></li>

            <li><a href="#">입양하기</a></li>

            <li><a href="#">건강돌보기</a></li>

            <li><a href="#">더불어살기</a></li>

        </ul>

    </nav>

 

 

 


  • border-style 속성: 기본값이 none. 화면에 테두리 표시안됨. 

    • hidden: 테두리 나타나지 않음

    • dashed: 직선으로 된 점선

    • dotted: 점선

    • double: 이중선

 

        p{

            padding: 10px;

            border: 3px dotted black;

        }

        h1{

            padding: 5px;

            border-bottom: 3px solid #ccc;

        }

 

<h1>박스 모델</h1>

    <p>

    박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(border), 그리고 여러 박스 모델 간의 여백인 마진(margin)등의 요소로 구성되어 있습니다.

    </p>

 


 

 

    

   div{

            width: 200px;

            height: 100px;

            border-width: 5px 10px 15px 20px;

            margin: 15px;

            display: inline-block;

        }

        .round{

            border: 2px solid red;

            border-radius: 20px;

        }

        #bg{

            background: url(images/pic1.jpg) no-repeat;

            background-size: cover;

        }

 

 

<div class="round"></div>
<div class="round" id="bg"></div>

 

 


 

 

'Learning > HTML&JavaScript' 카테고리의 다른 글

HTML5 시멘틱 태그  (0) 2020.07.24
CSS 레이아웃  (0) 2020.07.21
스타일과 스타일시트 글꼴  (0) 2020.07.17
<datalist>가 있는 신청서 폼  (0) 2020.07.17
폼 관련 태그들  (0) 2020.07.14
  • DAO: Data Access Object. Database의 data에 접근을 위한 객체. Database에 접근을 하기위한 로직과 비즈니스 로직을 분리하기 위해서 사용함

  • 커넥션 풀: DB와 연결할때 매번 커넥션 객체를 생성하지 않고 미리 만든후 가져다 씀. 다쓰면 반환.

  • DTO(=VO): Data Transfer Object. Value Object. 계층간 데이터 교환을 위한 자바빈즈. (VO는 read only 속성을 가짐) (생성자, 게터 세터 모음을 자바빈즈라 하는군)

 


  • New Dinamic Web Project로 JSP_Project 생성하고 context.xml파일을 META-INF 폴더에 붙여넣기, json-simple-1.1.1.jar 파일을 WEB-INF 폴더에 붙어넣기. WebContent에 새 폴더-member 폴더 만들기

 


  • memberForm.jsp: 회원가입 폼

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>회원 가입</title>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script src="member.js"></script>

<style>

#container {

    width:420px;

    border:1px solid black;

    padding:20px 40px;

    margin:0 auto;

}

</style>

</head>

<body>

<div id="container">

<h2>회원 가입</h2>

'*'표시 항목은 필수 입력 항목입니다.

<p><a href="memberList.jsp">전체보기</a></p>

<hr>

<form action="memberPro.jsp" id="frm" method="post">

<input type="hidden" name="uid" id="uid">

<table>

    <tr>

        <td>이름</td>

        <td><input type="text" name="name" id="name" size="10">*</td>

    </tr>

    <tr>

        <td>아이디</td>

        <td colspan="2">

        <input type="text" name="userid" id="userid" size="20" disabled="disabled">*

        <input type="button" value="중복 체크" id="idBtn"></td>

    </tr>

    <tr>

        <td>암호</td>

        <td><input type="password" name="pwd" id="pwd" size="20">*</td>

    </tr>

    <tr height="30">

        <td width="80">암호 확인</td>

        <td><input type="password" name="pwd_check" id="pwd_check" size="20">*</td>

    </tr>

    <tr>

        <td>이메일</td>

        <td><input type="text" name="email" id="email" size="20"></td>

    </tr>

    <tr>

        <td>전화번호</td>

        <td><input type="text" name="phone" id="phone" size="10"></td>

    </tr>

    <tr>

        <td>등급</td>

        <td><input type="radio" name="admin" value="0"

        checked="checked">일반회원

        <input type="radio" name="admin" value="1">관리자</td>

    </tr>

    <tr>

        <td colspan="3" align="center">

        <input type="button" id="send" value="확인">

        <input type="reset" value="취소"></td>

    </tr>

    

</table>

</form>

</div>

</body>

</html>


 

  • memberPro.jsp: 회원가입 로직

 

<%@page import="com.member.MemberDAOImpl"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    request.setCharacterEncoding("utf-8");

%>

<jsp:useBean id="member" class="com.member.MemberVO"/>

<jsp:setProperty property="*" name="member"/>

<%

    MemberDAOImpl dao=MemberDAOImpl.getInstance();

    String uid=request.getParameter("uid");

    member.setUserid(uid);

    dao.memberInsert(member);

    response.sendRedirect("loginForm.jsp");

%>

 


  • member.js: 자바스크립트 파일 (jsp파일에 기입하지 않고 따로 기입)

 

var exp= /^[0-9]{3}-[0-9]{4}-[0-9]{4}$/;

$(document).ready(function(){

    $("#send").click(function(){

        if($("#name").val()==""){

            alert("이름을 입력하세요");

            $("#name").focus();

            return false;

        }

        //아이디가 공백일때

        if($("#userid").val()==""){

            alert("아이디를 입력하세요");

            $("#userid").focus();

            return false;

        }

        //암호가 공백일때

        if($("#pwd").val()==""){

            alert("암호를 입력하세요");

            $("#pwd").focus();

            return false;

        }

        //암호확인이 공백일때

        if($("#pwd_check").val()==""){

            alert("암호확인 필수");

            $("#pwd_check").focus();

            return false;

        }

        //암호 일치확인

        if($("#pwd").val()!=$("#pwd_check").val()){

            alert("암호 불일치");

            $("#pwd_check").focus();

            return false;

        }

        //전화번호 확인(정규식을 만들어놓고 비교)

        if(!$("#phone").val().match(exp)){

            alert("전화번호를 정확하게 입력하세요");

            $("#phone").focus();

            return false;

        }

        

        $("#frm").submit();

    });//send

    

    

    //아이디 중복체크 버튼을 눌렀을때

    $("#idBtn").click(function(){

        window.open("idCheck.jsp","","width=600 height=500")

    }); //idBtn

    

    //중복체크 새 창에서 아이디 중복확인

    $("#idCheckBtn").click(function(){

        if($("#userid").val()==""){

            alert("아이디를 입력하세요");

            $("#userid").focus();

            return false;

        }

        $.ajax({

            type:"post",

            url :"idCheckPro.jsp",

            data: {"userid":$("#userid").val()},

            success: function(value){

                if(value.trim()=="yes"){

                    alert("사용가능한 아이디")

                    $(opener.document).find("#userid").val($("#userid").val());

                    $(opener.document).find("#uid").val($("#userid").val());

                    self.close();

                }else{

                    alert("중복된 아이디")

                }

            },

            error: function(e){

                alert("error:"+e)

            }

        });

    }) //idCheckBtn

    

})//document

function del(userid, mode){

      if(mode=="관리자"){

          alert("관리자는 삭제할 수 없음");

          return;

      }

    $.getJSON("memberDelete.jsp",

            {"userid": userid},

            function(data){

              var htmlStr="";

              $.each(data,function(key,val){

                  htmlStr+="<tr>";

                  htmlStr+="<td>"+val.name+"</td>";

                  htmlStr+="<td>"+val.userid+"</td>";

                  htmlStr+="<td>"+val.phone+"</td>";

                  htmlStr+="<td>"+val.email+"</td>";

                  htmlStr+="<td>"+val.mode+"</td>";

                  htmlStr+="<td><a href=javascript:del('"+val.userid+"','"+val.mode+"')>삭제2</a></td>";

                  htmlStr+="</tr>";

              })

              $("table tbody").html(htmlStr);

            } //콜백함수

    ); //getJSON

} //del() 함수


  • com.member 패키지 생성

    • MemberDAO.java: DB연결 하는 인터페이스

 

package com.member;

import java.util.ArrayList;

public interface MemberDAO {

//CRUD(create read update delete)라고 함

    //추가 (MemberVO 형의 vo 객체를 추가)

    public void memberInsert(MemberVO vo);

    //전체보기 (전체리스트를 보려면? select에 들어가는 값 MemberVO 형의 ArrayList를 본다.)

    public ArrayList<MemberVO>memberList();

    //수정

    public int memberUpdate(MemberVO vo);

    //상세보기 (하나를 보려면? return값이 있다는 뜻. MemberVO형)

    public MemberVO memberView(String userid);

    //삭제

    public void memberDel(String userid);

    //아이디 중복 체크 (리턴값은 userid)

    public String idCheck(String userid);

    

    //로그인 체크 (리턴값은 flag)

    public int loginCheck(String userid, String pwd);

}

 

    • MemberDAOImpl: DB연결 수행

 

package com.member;

import java.sql.Connection;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

import java.util.ArrayList;

import javax.naming.Context;

import javax.naming.InitialContext;

import javax.sql.DataSource;

public class MemberDAOImpl implements MemberDAO{

    private static MemberDAOImpl instance=new MemberDAOImpl();

    public static MemberDAOImpl getInstance() {

        return instance;

    }

    private Connection getConnection() throws Exception{

        Context initCtx=new InitialContext();

        Context envCtx=(Context) initCtx.lookup("java:comp/env");

        DataSource ds=(DataSource) envCtx.lookup("jdbc/member"); //context.xml의 name을 jdbc/member로 바꾸기

        return ds.getConnection();

    }

    

    //추가

    public void memberInsert(MemberVO vo) {

        Connection con=null;

        PreparedStatement ps=null;

        

        try {

            con=getConnection();

            String sql="INSERT INTO JMEMBER VALUES (?,?,?,?,?,?)";

            ps=con.prepareStatement(sql);

            ps.setString(1, vo.getUserid());

            ps.setString(2, vo.getName());

            ps.setString(3, vo.getPwd());

            ps.setString(4, vo.getEmail());

            ps.setString(5, vo.getPhone());

            ps.setInt(6, vo.getAdmin());

            ps.executeUpdate();

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con,ps);

        }

    }

    //전체보기 List

    public ArrayList<MemberVO> memberList() {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null; //결과가 있으면 ResultSet씀

        ArrayList<MemberVO> arr=new ArrayList<>();

        try {

            con=getConnection();

            String sql="SELECT * FROM JMEMBER";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            while(rs.next()) {

                MemberVO member=new MemberVO();

                member.setName(rs.getString("name"));

                member.setUserid(rs.getString("userid"));

                member.setPwd(rs.getString("pwd"));

                member.setEmail(rs.getString("email"));

                member.setPhone(rs.getString("phone"));

                member.setAdmin(rs.getInt("admin"));

                arr.add(member);

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return arr;

    }

    //일반회원 회원정보 수정

    public int memberUpdate(MemberVO vo) {

        Connection con=null;

        PreparedStatement ps=null;

        int flag=0;

        try {

            con=getConnection();

            String sql="update JMEMBER set name=?, pwd=?, email=?, phone=?, admin=? where userid=?";

            ps=con.prepareStatement(sql);

            ps.setString(1, vo.getName());

            ps.setString(2, vo.getPwd());

            ps.setString(3, vo.getEmail());

            ps.setString(4, vo.getPhone());

            ps.setInt(5, vo.getAdmin());

            ps.setString(6, vo.getUserid());

            flag=ps.executeUpdate();

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, ps);

        }

        return flag;

    }

    //일반회원 회원정보 상세보기

    public MemberVO memberView(String userid) {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        MemberVO m=null;

        try {

            con=getConnection();

            String sql="select * from JMEMBER where userid='"+userid+"'";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            if(rs.next()) {

                m=new MemberVO();

                m.setUserid(rs.getString("userid"));

                m.setPwd(rs.getString("pwd"));

                m.setPhone(rs.getString("phone"));

                m.setName(rs.getString("name"));

                m.setEmail(rs.getString("email"));

                m.setAdmin(rs.getInt("admin"));

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return m;

    }

    //삭제

    public void memberDel(String userid) {

        Connection con=null;

        Statement st=null;

        try {

            con=getConnection();

            String sql="delete from JMEMBER where userid='"+userid+"'";

            st=con.createStatement();

            st.executeUpdate(sql);

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, null);

        }

    }

    //아이디 중복체크

    public String idCheck(String userid) {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        String flag="yes"; //사용가능

        try {

            con=getConnection();

            String sql="select * from JMEMBER where userid='"+userid+"'";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            if(rs.next()) {

                flag="no";

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return flag;

    }

    

    //로그인체크 (비밀번호 오류: 2, 회원아님: -1, 관리자: 1, 일반회원: 0)

    public int loginCheck(String userid, String pwd) {

        Connection con=null;

        Statement st=null;

        ResultSet rs=null;

        int flag=-1;

        try {

            con=getConnection();

            String sql="select pwd, admin from JMEMBER where userid='"+userid+"'";

            st=con.createStatement();

            rs=st.executeQuery(sql);

            if(rs.next()) { //id는 맞음

                if(rs.getString("pwd").equals(pwd)) { //비번 맞다

                    flag=rs.getInt("admin");

                }else { //비번 틀림

                    flag=2;

                }               

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            closeConnection(con, st, rs);

        }

        return flag;

    }

    

    //닫기 closeConnection

    private void closeConnection(Connection con, PreparedStatement ps) {

        try {

            if(ps!=null) ps.close();

            if(con!=null) con.close();

        } catch (SQLException e) {

            e.printStackTrace();

        }

    }

    private void closeConnection(Connection con, Statement st, ResultSet rs) {

        try {

            if(st!=null) st.close();

            if(con!=null) con.close();

            if(rs!=null) rs.close();

        } catch (SQLException e) {

            e.printStackTrace();

        }

    }

    

}

 

    • MemberVO: 게터 세터 생성자. 자바빈즈

 

package com.member;

public class MemberVO {

    private String name;

    private String userid;

    private String pwd;

    private String email;

    private String phone;

    private int admin;

    public String getName() {

        return name;

    }

    public void setName(String name) {

        this.name = name;

    }

    public String getUserid() {

        return userid;

    }

    public void setUserid(String userid) {

        this.userid = userid;

    }

    public String getPwd() {

        return pwd;

    }

    public void setPwd(String pwd) {

        this.pwd = pwd;

    }

    public String getEmail() {

        return email;

    }

    public void setEmail(String email) {

        this.email = email;

    }

    public String getPhone() {

        return phone;

    }

    public void setPhone(String phone) {

        this.phone = phone;

    }

    public int getAdmin() {

        return admin;

    }

    public void setAdmin(int admin) {

        this.admin = admin;

    }

}


  • memberList.jsp: 가입된 회원목록 폼 (관리자만 볼 수 있음)

 

<%@page import="com.member.MemberVO"%>

<%@page import="java.util.ArrayList"%>

<%@page import="com.member.MemberDAOImpl"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<link rel="stylesheet"

href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script src="member.js"></script>

<style>

div.divCss{

    text-align: right;

    background-color:  darkgray;

    padding-right: 20px;

}

a:hover { text-decoration: none;  }

a:link {text-decoration: none;  }

a:visited {text-decoration: none; }

</style>

</head>

<div class="divCss">

<a href="memberForm.jsp">추가하기 /</a>

<a href="memberList.jsp">전체보기</a>

</div>

<%

    request.setCharacterEncoding("utf-8");

    MemberDAOImpl dao=MemberDAOImpl.getInstance();

    ArrayList<MemberVO> arr=dao.memberList();

    String suserid=(String)session.getAttribute("userid");

%>

<body>

<div align="right">

    <a href="memberView.jsp"><%=suserid%></a> 관리자님 반갑습니다.

    <a href="logout.jsp">로그아웃</a>

</div>

    <table class="table table-striped">

    <thead>

        <tr>

            <th scope="col">이름</th>

            <th scope="col">아이디</th>

            <th scope="col">전화번호</th>

            <th scope="col">이메일</th>

            <th scope="col">구분</th>

            <th scope="col">삭제</th>

        </tr>

    </thead>

    <tbody>

<%

    for(MemberVO m:arr){

        String mode=m.getAdmin()==0?"일반회원":"관리자";

%>

        <tr>

            <th scope="row"><%=m.getName() %></th>     

            <td><%=m.getUserid() %></td>        

            <td><%=m.getPhone() %></td>     

            <td><%=m.getEmail() %></td>     

            <td><%=mode %></td> 

            <td><a href="javascript:del('<%=m.getUserid() %>','<%=mode%>')">삭제</a></td>  

        </tr>       

<%

    }

%>  

    </tbody>

    </table>

</body>

</html>




  • idCheck.jsp: 아이디 중복확인 폼

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script src="member.js"></script>

</head>

<body>

<h2>아이디 중복확인</h2>

아이디 <input type="text" name="userid" id="userid">

<input type="button" value="사용" id="idCheckBtn">

</body>

</html>


  • idCheckPro.jsp: 아이디 중복확인 로직

 

<%@page import="com.member.MemberDAOImpl"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    request.setCharacterEncoding("utf-8");

    MemberDAOImpl dao=MemberDAOImpl.getInstance();

    String userid=request.getParameter("userid");

    String flag=dao.idCheck(userid);

    out.println(flag);

%>


  • loginForm.jsp: 로그인 화면 폼 (로그인, 취소, 회원가입 버튼)

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>로그인</title>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script type="text/javascript">

$(function(){

    $("#loginBtn").click(function(){

        if($("#userid").val()==""){

            alert("아이디를 입력하세요");

            $("#userid").focus();

            return false;

        }

        if($("#pwd").val()==""){

            alert("암호를 입력하세요");

            $("#pwd").focus();

            return false;

        }

        $.ajax({

            type   : "post",

            url    : "loginPro.jsp",

            data   : {"userid": $("#userid").val(), "pwd": $("#pwd").val()},

            success: function(value){

                switch(value.trim()){

                case "0" : alert("로그인 성공");

                            $(location).attr("href","memberView.jsp");

                            break;

                case "1" : alert("관리자 로그인");

                            location.href="memberList.jsp";

                            break;

                case "-1" : alert("회원이 아닙니다.");

                            break;

                case "2" : alert("비밀번호 오류"); break;

                default : alert(value().trim());

                }

            },

            error  : function(e){

                alert("error: "+e);

            }

        })

    }); //loginBtn

}); //document

</script>

<style>

#container {

    width:250px;

    border:1px solid green;

    padding:20px 40px;

    margin:0 auto;

}

</style>

</head>

<body>

<div id="container">

<h2>로그인</h2>

<hr>

<form>

    <table>

        <tr>

            <td>아이디</td>

            <td><input type="text" name="userid" id="userid"></td>

        </tr>

        <tr>

            <td>암호</td>

            <td><input type="password" name="pwd" id="pwd"></td>

        </tr>

        <tr>

            <td colspan="2" align="center">

            <input type="button" value="로그인" id="loginBtn">

            <input type="reset" value="취소">

            <input type="button" value="회원 가입" onclick="location.href='memberForm.jsp'">

            </td>

        </tr>

    </table>

</form>

</div>

</body>

</html>


  • loginPro.jsp: 로그인 로직. 아이디와 암호를 들고 MemberDAOImpl의 loginCheck 메소드를 연결해줌

 

<%@page import="com.member.MemberDAOImpl"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    request.setCharacterEncoding("utf-8");

    String userid=request.getParameter("userid");

    String pwd=request.getParameter("pwd");

    MemberDAOImpl dao=MemberDAOImpl.getInstance();

    int flag=dao.loginCheck(userid, pwd);

    if (flag==0 || flag==1){

        session.setAttribute("userid", userid);

    }

    out.println(flag);

%>


  • logout.jsp: 세션을 지우고 로그인 화면으로 이동

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    session.invalidate();

    //session.removeAttribute("userid");

    response.sendRedirect("loginForm.jsp");

%>

 


  • memberView.jsp: 일반회원이 로그인했을때 보이는 화면 폼 (회원정보 수정)

 

<%@page import="com.member.MemberVO"%>

<%@page import="com.member.MemberDAOImpl"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script src="member.js"></script>

</head>

<%

    request.setCharacterEncoding("utf-8");

    String userid=(String)session.getAttribute("userid");

    MemberDAOImpl dao=MemberDAOImpl.getInstance();

    MemberVO m=dao.memberView(userid);

%>

<body>

<%=userid %>님 반갑습니다. /<a href="logout.jsp">로그 아웃</a><br>

<h2>

회원정보 변경/<a href="userDelete.jsp">회원탈퇴</a>

</h2>

<hr>

<form action="updatePro.jsp" method="post">

<input type="hidden" name="userid" value="<%=userid %>">

    <table>

    <thead>

        <tr>

            <td>이름</td>

            <td><input type="text" id="name" name="name" value="<%=m.getName()%>"></td>

        </tr>

        <tr>

            <td>비밀번호</td>

            <td><input type="password" id="pwd" name="pwd" value="<%=m.getPwd()%>"></td>

        </tr>

        <tr>

            <td>이메일</td>

            <td><input type="text" id="email" name="email" value="<%=m.getEmail()%>"></td>

        </tr>

        <tr>

            <td>전화번호</td>

            <td><input type="text" id="phone" name="phone" value="<%=m.getPhone()%>"></td>

        </tr>

        <tr>

            <td>등급</td>

            <td>

            <input type="radio" name="admin" value="0">일반회원

            <input type="radio" name="admin" value="1">관리자

            <script>

            if(<%=m.getAdmin()%>==0){

                $("input:radio[value='0']").prop("checked", true);

            }else{

                $("input:radio[value='1']").prop("checked", true);              

            }

            </script>

            </td>       

        </tr>

        <tr>

            <td colspan="2" align="center">

            <input type="submit" id="updateBtn" value="수정">

            <input type="reset" value="취소">

        </tr>

    </thead>

    </table>

</form>

</body>

</html>


  • updatePro.jsp: 회원정보 수정 로직

 

<%@page import="com.member.MemberDAOImpl"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    request.setCharacterEncoding("utf-8");

%>

<jsp:useBean id="mvo" class="com.member.MemberVO"/>

<jsp:setProperty property="*" name="mvo"/>

<%

    MemberDAOImpl dao=MemberDAOImpl.getInstance();

    int flag=dao.memberUpdate(mvo);

    if(flag==1){

        session.invalidate();

        response.sendRedirect("loginForm.jsp");

    }

%>


  • userDelete.jsp: 회원탈퇴 로직

 

<%@page import="com.member.MemberDAOImpl"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    request.setCharacterEncoding("utf-8");

    String userid=(String)session.getAttribute("userid");

    MemberDAOImpl dao=MemberDAOImpl.getInstance();

    dao.memberDel(userid);

    session.invalidate();

    response.sendRedirect("loginForm.jsp");

%>

 


  • memberDelete.jsp: 관리자로 로그인 했을때 회원들 삭제하는 로직

<%@page import="org.json.simple.JSONObject"%>

<%@page import="org.json.simple.JSONArray"%>

<%@page import="com.member.MemberVO"%>

<%@page import="java.util.ArrayList"%>

<%@page import="com.member.MemberDAOImpl"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    request.setCharacterEncoding("utf-8");

    String userid=request.getParameter("userid");

    MemberDAOImpl dao=MemberDAOImpl.getInstance();

    dao.memberDel(userid);

    ArrayList<MemberVO> arr=dao.memberList();

    JSONArray jarr=new JSONArray();

    for(MemberVO vo:arr){

        String mode=vo.getAdmin()==0? "일반회원":"관리자";

        JSONObject obj=new JSONObject();

        obj.put("name", vo.getName());

        obj.put("userid", vo.getUserid());

        obj.put("email", vo.getEmail());

        obj.put("phone", vo.getPhone());

        obj.put("mode", mode);

        jarr.add(obj);

    }

    out.println(jarr.toString());

%>

 


 

 

 

'Learning > JSP' 카테고리의 다른 글

게시판 1  (0) 2020.07.22
회원가입2  (0) 2020.07.22
주소록 생성하기2  (0) 2020.07.16
JSON 형식의 데이터값 읽어오기  (0) 2020.07.15
ajax방식을 이용하여 id, pw 입력하고 하단부에 출력  (0) 2020.07.15
  • 스타일: HTML 문서의 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용들

    • 선택자 { 스타일 속성: 속성 값}

    • 선택자: 테이블, 목차 등 스타일 규칙이 적용될 대상

    • 속성이 여러개라면 세미콜론(;)으로 구분

    • 주석: /*와 */ 사이

  • 스타일시트: 스타일을 관리하기 쉽도록 한 군데 모아놓은 것

 

 

  • 글꼴

 

<!DOCTYPE html>



<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>웹 폰트 사용하기</title>

    <style>

      @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');

      .ng-font{

        font-family: 'Nanum Gothic', 돋움, 굴림;

      }

      p{

        font-size: 30px;

      }

    </style>

</head>

<body>

  <p>브라우저 기본 글꼴 사용</p>

  <p class="ng-font">나눔고딕 웹 폰트 사용</p>

</body>

</html>

 

 

'Learning > HTML&JavaScript' 카테고리의 다른 글

CSS 레이아웃  (0) 2020.07.21
CSS와 박스 모델  (0) 2020.07.21
<datalist>가 있는 신청서 폼  (0) 2020.07.17
폼 관련 태그들  (0) 2020.07.14
이미지와 하이퍼링크  (0) 2020.07.14
  • <datalist>: 여러 데이터의 나열 중 하나를 선택

  • <datalist>에 id부여

  • <input type="text">에 list="datalist의 id" 부여

 

 

<!doctype html>

<html lang="ko">

  <head>

     <meta charset="utf-8">

         <title> 웹 폼</title>

     <style>

             body {

                background-color:#fff; 

             }

             form fieldset{

                margin-bottom:25px; 

             }

             form legend{

                font-size:15px;

                font-weight:600; 

             }

            .reg {

                font-size:14px;

                width:110px;

                color:#390;

                font-weight:bold;       

                float:left;

                text-align:right;

                margin-right:10px;

             }   

             form ul li{

                list-style:none; 

                margin: 15px 0; 

                font-size:14px; 

             }

     </style>

  </head>

  <body>

    <h1>여름방학 특강 신청</h1>

    <form>

        <fieldset>

            <legend>수강 신청인</legend>

            <ul>

                <li>

                    <label for="id" class="reg">학번</label>

                    <input type="text" id="id" autofocus>

                </li>

            </ul>

            <ul>

                <li>

                    <label for="name" class="reg">이름</label>

                    <input type="text" id="name">

                </li>

            </ul>

            <ul>

                <li>

                    <label for="major" class="reg">학과</label>

                    <select id="major">

                        <optgroup label="공과대학">

                            <option value="archi">건축공학과</option>

                            <option value="mechanic">기계공학과</option>

                            <option value="indust">산업공학과</option>

                            <option value="elec">전기전자공학과</option>

                            <option value="computer">컴퓨터공학과</option>

                            <option value="chemical">화학공학과</option>

                        </optgroup>

                        <optgroup label="인문대학">

                            <option value="history">사학과</option>

                            <option value="lang">어문학부</option>

                            <option value="philo">철학과</option>

                        </optgroup>

                    </select>

                </li>

        </fieldset>

        <fieldset>

            <legend>수강 과목을 선택하세요</legend>

            <ul>

                <li>

                    <label for="interest" class="reg">관심분야</label>

                    <input type="text" id="interest" list="choice">

                    <datalist id="choice">

                        <option value="grammar" label="문법"></option>

                        <option value="voca" label="어휘"></option>

                        <option value="listening" label="리스닝"></option>

                        <option value="news" label="뉴스청취"></option>

                    </datalist>

                </li>

            </ul>

        </fieldset>

    </form>

  </body>

</html>

 

 

 

 

 

 

  • insert.jsp: 테이블 형식으로 폼 만들기. 우편번호 검색 버튼을 누르면 새 창이 뜨고 우편번호 검색할 수 있는 환경 제공

 

    • 전체보기=list.jsp로 링크

    • 우편번호 텍스트필드 옆 검색버튼=zipCheck.jsp를 새 창으로 열기(window.open)

    • 등록버튼=insertPro.jsp로 폼 액션 보내기 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script src="../js/jquery-3.5.1.min.js"></script>

<script>

$(function(){

    $("#zipBtn").click(function(){

         window.open("zipCheck.jsp","","width=800 height=500");

    })  //zipBtn

});//document

</script>

</head>

<body>

<a href="list.jsp">전체보기</a>

<form action="insertPro.jsp" method="post" name="frm">

<table>

        <tr>

                <td colspan="2">주소록 등록하기</td>

        </tr>

        <tr>

                <td>이름</td>

                <td><input type="text" name="name"></td>

        </tr>

        <tr>

                <td>우편번호</td>

                <td><input type="text" name="zipcode"  id="zipcode"   size=7>

                        <input type="button" value="검색" id="zipBtn">

                </td>

        </tr>

        <tr>

                <td>주소</td>

                <td><input type="text" name="addr"  id="addr" size=50></td>

        </tr>

        <tr>

                <td>전화번호</td>

                <td><input type="text" name="tel"></td>

        </tr>

        <tr>

        <td colspan="2">

                <input type="submit" value="등록">

                <input type="reset" value="취소">

        </td>

        </tr>

</table>

</form>

</body>

</html>


  • zipCheck.jsp: 우편번호 검색 창. 제이슨 형식으로 zipCheckPro.jsp의 값들을 가져옴

      • 제이슨 형식으로 가져온다?

$.getJSON(가져올 파일,

{키:값},

function(data){

$.each(data, function(key, val){

})



<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="../js/jquery-3.5.1.min.js"></script>

<script>

$(document).ready(function(){

    $("#send").on("click",function(){

        $.getJSON("zipCheckPro.jsp",

                          {"dong" : $("#dong").val()},

                          function(data){  //콜백함수

                              var htmlStr="<table>";

                              $.each(data, function(key,val){

                                  htmlStr+="<tr>";

                                  htmlStr+="<td>"+val.zipcode+"</td>";

                                  htmlStr+="<td>"+val.sido+"</td>";

                                  htmlStr+="<td>"+val.gugun+"</td>";

                                  htmlStr+="<td>"+val.dong+"</td>";

                                  htmlStr+="<td>"+val.bunji+"</td>";

                                  htmlStr+="</tr>";

                              })

                                htmlStr+="</table>";

                              $("#area").html(htmlStr);

                          }

        );

        

    }) //send

    

    $("#getsend").click(function(){

        $.get("zipCheckPro.jsp", {"dong": $("#dong").val()},

                                function(data){

                                     var htmlStr="<table>";

                                     d = $.parseJSON(data);  //파싱

                                     for(var i=0 ; i<d.length; i++){

                                         htmlStr+="<tr>";

                                         htmlStr+="<td>"+d[i].zipcode+"</td>";

                                         htmlStr+="<td>"+d[i].sido+"</td>";

                                         htmlStr+="<td>"+d[i].gugun+"</td>";

                                         htmlStr+="<td>"+d[i].dong+"</td>";

                                         htmlStr+="<td>"+d[i].bunji+"</td>";

                                         }

                                        htmlStr+="</table>";

                                  $("#area").html(htmlStr);

                                }       

            );//get

    });//getsend

    

    $("#area").on("click","tr", function(){

        var address = $("td:eq(1)",this).text()+"  " +

                                       $("td:eq(2)",this).text()+"  " +

                                       $("td:eq(3)",this).text()+"  " +

                                      $("td:eq(4)",this).text();

        $(opener.document).find("#zipcode").val($("td:eq(0)",this).text());

        $(opener.document).find("#addr").val(address);

        self.close();

    });

    

    

})// document

</script>

</head>

<body>

<table>

<tr>

    <td>동이름 입력 <input type="text" name="dong" id="dong">

    <input type="button" id="send" value="검색">

    <input type="button" id="getsend" value="get검색">

    </td>

</tr>

</table>

<div id="area"></div>

</body>

</html>

 


  • zipCheckPro.jsp: zipCheck의 동이름검색에서 넘어온 창. zipCheck.jsp의 창은 그대로 있고, 이 파일은 결과 데이터를 가져가서 그 창에 뿌린다. (address 폴더에서 작업했을때는 zipCheck창이 전체 새로고침됐었음)  ZipCodeBean ArrayList를 JSON 형태로 변환해야한다. 그러기 위해선 라이브러리가 필요하다.

 

 

 

<%@page import="com.jqueryAddress.ZipCodeBean"%>

<%@page import="com.jqueryAddress.JAddressDAO"%>

<%@page import="org.json.simple.JSONObject"%>

<%@page import="jdk.nashorn.api.scripting.JSObject"%>

<%@page import="org.json.simple.JSONArray"%>

<%@page import="java.util.ArrayList"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

  <%

    request.setCharacterEncoding("utf-8");

  String dong = request.getParameter("dong");

 // String dong ="서면";

  JAddressDAO dao = JAddressDAO.getInstance();

  ArrayList<ZipCodeBean> arr = dao.zipcodeRead(dong);

  JSONArray  jarr = new JSONArray();

  for(ZipCodeBean z : arr){

      JSONObject obj = new JSONObject();

      obj.put("zipcode" , z.getZipcode());

      obj.put("sido" , z.getSido());

      obj.put("gugun" , z.getGugun());

      obj.put("dong" , z.getDong());

      obj.put("bunji" , z.getBunji());

      jarr.add(obj);

  }

  out.println(jarr.toString()); 

   %>

 

 

 

 

 

 


 

 

context.xml에서 

<Resource auth="Container"

     driverClassName="oracle.jdbc.driver.OracleDriver"

     maxIdle="20" maxActive="20"

     username="scott"

     name="jdbc/jsp"

     password="1234"

     type="javax.sql.DataSource"

     url="jdbc:oracle:thin:@localhost:1521:xe"/>

 

 


 

  • list.jsp: 전체보기

 

 

 

<%@page import="com.jqueryAddress.Address"%>

<%@page import="com.jqueryAddress.JAddressDAO"%>

<%@page import="java.util.ArrayList"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<link rel="stylesheet"

href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<style>

div.divCss{

    text-align: right;

    background-color:  darkgray;

    padding-right: 20px;

}

a:hover { text-decoration: none;  }

a:link {text-decoration: none;  }

a:visited {text-decoration: none; }

</style>

</head>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>

//searchBtn 이 클릭하면

$(document).ready(function(){

    $("#searchBtn").click(function(){

        $.getJSON("searchPro.jsp",

                              {"field" : $("#field").val(), "word" : $("#word").val()    },

                              function(data){//콜백함수

                                  var htmlStr="";

                                $.each(data, function(key, val){

                                      htmlStr+="<tr>";

                                      htmlStr+="<td>"+val.num+"</td>";

                                      htmlStr+="<td>"+val.name+"</td>";

                                      htmlStr+="<td>"+val.tel+"</td>";

                                      htmlStr+="<td>"+val.addr+"</td>";

                                      htmlStr+="<td onclick=delFunc("+val.num+")> 삭제</td>";

                                      htmlStr+="</tr>";

                                })//each

                                $("table tbody").html(htmlStr);

                             }//콜백함수

          ); //getJSON

    });//searchBtn

    

});//document

function delFunc(no){

    if(confirm("정말삭제할까요?")){

        location.href="deletePro.jsp?num="+no;

    }

}

</script>

<%

    request.setCharacterEncoding("utf-8");

    JAddressDAO dao = JAddressDAO.getInstance();

    ArrayList<Address> arr =  dao.addrList();

    int count = dao.getCount();

%>

<body>

<div class="divCss">

    주소록 갯수 : <%=count %> <br>

    <a href="insert.jsp">추가하기</a>  / 

    <a href="list.jsp">전체보기</a>

</div>

 <table class="table table-striped">

  <thead>

    <tr>

      <th scope="col">번호</th>

      <th scope="col">이름</th>

      <th scope="col">전화번호</th>

      <th scope="col">주소</th>

       <th scope="col">삭제</th>

    </tr>

  </thead>

    <tbody>

<%

    for(int i=0; i<arr.size();i++){

%>      

        <tr>

            <th scope="row"><%=arr.get(i).getNum() %></th>

            <td><a href="detail.jsp?num=<%=arr.get(i).getNum() %>"><%=arr.get(i).getName() %></a></td>

            <td><%=arr.get(i).getTel() %></td>

            <td><%=arr.get(i).getAddr() %></td>

            <td onclick="delFunc(<%=arr.get(i).getNum() %>)">삭제</td>

        </tr>

<%      

   }

%>  

</tbody>

</table>

<form  action="list.jsp" name="searchFrm" id="searchFrm">

<select name="field" id="field">

      <option value="name">이름</option>

      <option value="tel">전화번호</option>

</select>

<input type="text" name="word" id="word">

<input type="button"  class="btn btn-primary" value="검색"  id="searchBtn">

</form>

</body>

</html>

 

  • insertPro.jsp: DB와 연결하여 주소록 등록 실행, 전체보기 목록 다시 불러오기

 

<%@page import="com.jqueryAddress.JAddressDAO"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    request.setCharacterEncoding("utf-8");

%>

<jsp:useBean id="ad" class="com.jqueryAddress.Address"/>

<jsp:setProperty property="*" name="ad"/>

<%

    JAddressDAO dao = JAddressDAO.getInstance();

    dao.addrInsert(ad);

    response.sendRedirect("list.jsp");

%>

 

  • detail.jsp: 주소록 수정하기 창. list.jsp에서 이름을 누르면 바뀌는 화면

 

 

 

<%@page import="com.jqueryAddress.Address"%>

<%@page import="com.jqueryAddress.JAddressDAO"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<%

request.setCharacterEncoding("utf-8");

int num =Integer.parseInt(request.getParameter("num"));

JAddressDAO dao= JAddressDAO.getInstance();

Address  address=dao.addrDetail(num);

%>

<script>

// query 이용

$(document).ready(function(){

    $("#deleteBtn").click(function(){

        if(confirm("정말 삭제할까요?")){

         // location.href="deletePro.jsp?num=<%=num%>";

         $(location).attr("href","deletePro.jsp?num=<%=num%>");

        }

    });

    

});

function del(){

    if(confirm("정말 삭제할까요?")){

        location.href="deletePro.jsp?num=<%=num%>";

    }

}

// 매개변수 있는 함수

function dels(no){

    if(confirm("정말삭제할까요?")){

        location.href="deletePro.jsp?num="+no;

    }

}

function zipfinder(){

    window.open("zipCheck.jsp","","width=700 height=400");

}

</script>

</head>

<body>

<form action="updatePro.jsp" method="post" name="frm">

<input type="hidden"  name="num" value=<%=num %>>

<table>

        <tr>

                <td colspan="2">주소록 수정하기</td>

        </tr>

        <tr>

                <td>이름</td>

                <td><input type="text" name="name"

                    value=<%=address.getName() %>></td>

        </tr>

        <tr>

                <td>우편번호</td>

                <td><input type="text" name="zipcode" size=7

                          value="<%=address.getZipcode()%>">

                        <input type="button" value="검색"  onclick="zipfinder()">

                </td>

        </tr>

        <tr>

                <td>주소</td>

                <td><input type="text" name="addr" size=50

                          value="<%=address.getAddr() %>"></td>

        </tr>

        <tr>

                <td>전화번호</td>

                <td><input type="text" name="tel"

                          value="<%=address.getTel() %>"></td>

        </tr>

        <tr>

        <td colspan="2">

                <input type="submit" value="수정">

                <input type="button" value="삭제" onclick="del()">

                <input type="button" value="매개변수삭제" onclick="dels(<%=num%>)">

                <input type="button" value=" jquery삭제" id="deleteBtn">

                <input type="reset" value="취소">

        </td>

        </tr>

</table>

</form>

</body>

</html>

 

 

  • deletePro.jsp: 주소록 삭제 실행

 

<%@page import="com.jqueryAddress.JAddressDAO"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

 int num = Integer.parseInt(request.getParameter("num"));

JAddressDAO dao = JAddressDAO.getInstance();

dao.addrDelete(num);

response.sendRedirect("list.jsp");

%>

 

  • updatePro.jsp: 주소록 수정 실행

 

<%@page import="com.jqueryAddress.JAddressDAO"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

  <%

     request.setCharacterEncoding("utf-8");

 %>

 <jsp:useBean id="ad"  class="com.jqueryAddress.Address"/>

 <jsp:setProperty property="*" name="ad"/>

 <%

 JAddressDAO dao = JAddressDAO.getInstance();

 dao.addrUpdate(ad);

 response.sendRedirect("list.jsp");

 %>

 

 

  • searchPro.jsp

<%@page import="com.jqueryAddress.Address"%>

<%@page import="com.jqueryAddress.JAddressDAO"%>

<%@page import="org.json.simple.JSONObject"%>

<%@page import="org.json.simple.JSONArray"%>

<%@page import="java.util.ArrayList"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    request.setCharacterEncoding("utf-8");

String field =request.getParameter("field");

String word = request.getParameter("word");

JAddressDAO dao = JAddressDAO.getInstance();

ArrayList<Address> arr =  dao.addrList(field, word);

JSONArray jarr = new JSONArray();

for(Address ad : arr){

    JSONObject obj = new JSONObject();

    obj.put("num", ad.getNum());

    obj.put("name", ad.getName());

    obj.put("tel" , ad.getTel());

    obj.put("zipcode" , ad.getZipcode());

    obj.put("addr", ad.getAddr());

    jarr.add(obj);

}

out.println(jarr.toString());

%>

 

 

  • exam03: 결과, 결과 2 버튼 생성. 결과 버튼 클릭할 경우 메시지, 데이터 처리상태 출력

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="../js/jquery-3.5.1.min.js"></script>

<script>

$(document).ready(function(){

    $("#b1").click(function(){

        $.get("data.txt", function(data,status){ //중간값 생략. 결과값만 가지고 옴

                //alert("data: "+data+"\n status:"+status);       

                if(status=="success"){

                    alert("성공입니다.");

                }

                var str="데이터: "+data+"\n 처리상태:"+status;

                $("#result").text(str);

            }

        ); //get

    }); //b1

}); //document

</script>

</head>

<body>

<button id="b1">결과</button>

<button id="b2">결과2</button>

<div id="result"></div> <!-- 결과값이 표시될 영역 지정 -->

</body>

</html>

  • data.txt: JSON 형식의 데이터

[

{

     "memberNumber":"m001",

     "irum":"goroman",

     "picture":"goroman.png"

 },

{

     "memberNumber":"m002",

     "irum":"kingkang",

     "picture":"myFace.png"

}

]

 


 

+ 파싱이 되어있는 함수를 사용 (exam03.jsp의 버튼2)

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="../js/jquery-3.5.1.min.js"></script>

<script>

$(document).ready(function(){

    $("#b1").click(function(){

        $.get("data.txt", function(data,status){ //중간값 생략. 결과값만 가지고 옴

                //alert("data: "+data+"\n status:"+status);       

                if(status=="success"){

                    alert("성공입니다.");

                }

                var str="데이터: "+data+"\n 처리상태:"+status;

                $("#result").text(str);

            }

        ); //get

    }) //b1

    $("#b2").click(function(){

        var htmlStr="";

        $.getJSON("data.txt", function(data){

            //alert(data.length);

            $.each(data,function(key,val){ //jquery의 반복문

                htmlStr+="회원번호: "+val.memberNumber+"<br>";

                htmlStr+="번호: "+val.irum+"<br>";

                htmlStr+="이미지: "+val.picture+"<hr>";

            })

            $("#result").html(htmlStr);

        }); //json형태로 이미 파싱되어 넘어옴. 한번더 파싱할 필요가 없음

    }) //b2

}); //document

</script>

</head>

<body>

<button id="b1">결과</button>

<button id="b2">결과2</button>

<div id="result"></div> <!-- 결과값이 표시될 영역 지정 -->

</body>

</html>

 

'Learning > JSP' 카테고리의 다른 글

회원가입  (0) 2020.07.20
주소록 생성하기2  (0) 2020.07.16
ajax방식을 이용하여 id, pw 입력하고 하단부에 출력  (0) 2020.07.15
자바스크립트, DB 이용하여 주소록 생성하기  (0) 2020.07.13
jQuery 이용  (0) 2020.07.10

+ Recent posts