카테고리별로 나누기(페이지이동X)

1. list.jsp (카테고리) 

<table border=0 style="border-collapse : collapse;" class="more_bt" colspan="2">
	<tr>
		<td height=20px style="font-size:19px; font-weight:bold; padding-bottom:10px;">
			<a href="list.jsp?code=<%=code%>" class="category<%if(category.equals("")){%>_on<%}%>" id="category" category_index="0">전체</a>&nbsp;&nbsp;
			<a href="list.jsp?code=<%=code%>&category=1" class="category<%if(category.equals("1")){%>_on<%}%>" id="category1" category_index="1">묘종 백과</a>&nbsp;&nbsp;
			<a href="list.jsp?code=<%=code%>&category=2" class="category<%if(category.equals("2")){%>_on<%}%>" id="category2" category_index="2"> 행동 백과
		</td>
	</tr>
</table>


<DB>
gongji enum('1','2','3')를 이용

 

2. wrtie, modify.jsp 에 추가

<table width=100% align=center border=2 style="border-collapse : collapse;">
	<tr>
		<td height=60px class="td_title">카테고리</td>
		<td>&nbsp;&nbsp;
			<input type="radio" id="gongji" name="gongji" value="1">묘종
			<input type="radio" id="gongji" name="gongji" value="2">행동
		</td>
	</tr>
</table>

<table width=100% align=center border=2 style="border-collapse : collapse;">
	<tr>
		<td height=60px class="td_title">카테고리</td>
		<td>
			<input type="radio" id="gongji" name="gongji" value="1" <%if(gongji.equals("1")){%>checked<%}%>>묘종
			<input type="radio" id="gongji" name="gongji" value="2" <%if(gongji.equals("2")){%>checked<%}%>>행동
		</td>
	</tr>
</table>

 

3. insert, update.jsp 에 gongji 추가

// insert into 테이블명(칼럼명) values(변수명);
String sql = "insert into "+code+" (id,name,gongji,subject,comment,signdate,file1,file1_o) values('"+session_id+"','"+session_name+"','"+gongji+"','"+subject+"','"+comment+"','"+signdate+"','"+file1_rename+"','"+file1_name+"') ";

if(file1_name != null) {
	sql = "update "+code+" set gongji='"+gongji+"',subject='"+subject+"',~~~ where uid='"+uid+"' ";
} else {
	sql = "update "+code+" set gongji='"+gongji+"',subject='"+subject+"',comment='"+comment+"' where uid='"+uid+"' ";
}

 

4. 카테고리 버튼 꾸미기

  ㄴ> class="category <%if(category.equals("")){%>_on<%}%> "

	.category {
		/* position:relative; */
		border:1px solid #9A9A9A;
		padding: 6px 10px;
		border-radius: 20px;
		color:#9A9A9A;
		font-weight:bold;
		/* display: inline-block; */
		cursor:pointer;
	}
	.category_on {
		border:0px;
		color:white;
		padding:8px 10px;
		border-radius: 20px;
		background-color:#FC9345; 
		cursor:pointer;
		font-weight:bold;
	}
	
	.category:hover{
		border:0px;
		color:white;
		padding:8px 10px;
		border-radius: 20px;
		background-color:#FC9345; 
		cursor:pointer;
		font-weight:bold;
	}
	
	.cat_category {
		color:#9A9A9A;
		font-weight:bold;
		width:150px;
		font-size:15px;
		
	}
	
	.a3 {
		color:#9A9A9A;
		font-weight:bold;
		font-size:15px;
		
	}
	
	.a3:hover {
		color: #FC9345; 
	}

 

5. 해시태그 역할 할 수 있게 만들기

<td class="cat_category">
    <%
    if(gongji.equals("1")){
    %>
        #고양이 <a href="/bbs2/list.jsp?code=<%=code%>&category=1" class="a3"> #묘종</a>
    <%
    }else{%>
        #고양이 <a href="/bbs2/list.jsp?code=<%=code%>&category=2" class="a3"> #행동</a>
    <%
    }
    %> 
</td>