게시판을 만들기 전에
게시판은 만드는 방법은 크
게 ul-li태그를 사용하거나 table태그를 사용하는 방법이 있다.
ul-li 태그로 만드는 이유는 유연성이 좋기 때문에 창의 크기에 따라 게시판이 변할 수 있다.
table 태그로 만드는 이유는 유연성이 좋지 않지만 고정되어 잘 깨지지 않는다.
따라서 반응형 웹 같은 경우는 ul-li 태그를 사용하여 만드는 경우가 많다.
로그인 기능을 만들었으면 그다음 로그인 하여 보여지는 화면을 만든다
화면은 학생목록을 조회하고 개설과목을 조회하는 단순한 구조이다.
처음 구상(화면 설계라고 하기 많이 거시기함... )을 한 것이다. 기본적인 3 레이아웃이다.
로그인페이지에서 로그인을 성공하면 메인화면으로 넘어간다. 메인화면에서 사이드바에 메뉴를 클릭하면 해당하는 페이지를 출력한다. 그리고 로그아웃을 누르면 로그아웃 페이지로 넘어간다. 단순하게 만들었다.
레이아웃을 크게 위의 그림같이 잡았다. 처음에는 ENTRY, TOPMENU, SIDEMENU, MENUOUTPUT 만 있었는데 만들다보니 LOGOUT, CONTENTMENU가 생겼다.
구성을 토대로 만든 메인페이지는 아니고 조회목록 페이지이다. 어차피 모든 레이아웃의 구성은 MENUOUTPUT 부분을 제외하고 같다. 아직 수정할 부분이 많지만 중간 보고 개념이라 그냥 올리겠다.
@CHARSET "UTF-8"; -css 파일의 시작이다. css 파일에서 따로 <style>태그는 사용하지 않는다. 굳이 이 유를 뽑자면, css 파일에는 css 기능만 있다. 태그를 이용하여 구분할 필요가 없다 는 것이다.
@-webkit-keyframes blink{
from{color:pink;}
to{color:black;}
}
@-webkit-keyframes blink2{
from{background-color:pink;}
to{background-color:yellow;}
}
div{
/* border:0.1px solid #ffffcc; */
/* marging:auto; */
background-color:#ffffcc;
}
#sidemenu{
width:21%;
float:left;
background-color:#ffe6ff;
border:none;
}
#menuoutput{
width:79%;
float:left;
background-color:#ccffcc;
border:none;
}
form button{
float:right;
}
.listli li{
list-style:none;
margin:0px;
padding:0px;
}
.listli li .menu2{
display:none;
}
.listli li:hover + ul li p{
display:block;
background-color:black;
color:gray;
}
ul{
margin:0px;
padding:11px;
}
.topbar li{
list-style: none;
margin: 0;
padding: 0px;
width: 131px;
float: left;
background-color: black;
color: white;
text-align: center;
border-left: 1px solid white;
}
.contentbar li{
list-style: none;
margin: 0;
padding: 0px;
width: 131px;
float: left;
background-color: gray;
color: black;
text-align: center;
border-left: 1px solid black;
}
li:nth-child(1){
border:none;
}
h1{
text-align: center;
margin: 0px;
padding: 20px;
-webkit-animation:blink 2.1s infinite;
}
h3{
width: 20%;
-webkit-animation: blink2 2.1s infinite;
text-align: center
}
#contentmenu{
background-color: #0000;
height: 300px;
padding-left: 40px;
padding-bottom: 40px;
}
이것이 CSS부분 파일이다. 이렇게 웹 페이지를 만들다 보면 한번 만들어놓은 CSS는 계속 쓰기 마련이다. 페이지마다 이러한 CSS를 따로 선언하는 것은 아주 불필요한 작업이므로 이렇게 하나의 파일에 만들고 페이지 작업할때 link를 걸어주는게 필요하다.
<head>
<link rel="stylesheet" href="/test/viewcss.css" type="text/css">
이런식으로 <head>태그 밑에 링크 하나를 만들어준다. css가 많이 조잡한데 사실이다. 뜬금 없지만, 단순 jdbc 구조는 정말 코드가 난해해진다. 가독성이 너무 떨어진다. 자바단, jsp, html이 다같이 들어가니깐 너무 헷갈린다. 그나마 css는 뺏지만....
<%
Class.forName("oracle.jdbc.driver.OracleDriver");
String url=("jdbc:oracle:thin:@localhost:1521:xe");
Connection dbconn=DriverManager.getConnection(url, "edujh", "1234");
Statement stmt=dbconn.createStatement();
String userid=(String)session.getAttribute("id");
ResultSet sub_rs=stmt.executeQuery("SELECT * FROM SUBJECT");
ResultSet pro_rs=stmt.executeQuery("SELECT * FROM PROFESSIOR");
%>
--------------------------------------------------------------------------------------------중간 생략
<div id="Entry">
<div id="logout" style="border:none;">
<form method="post" action="logout.jsp">
<button id="pagemove">로그아웃</button>
</form>
</div>
<div id="topmenu">
<h1 class="blink" style="text-align:center">THIS IS PAGE </h1>
</div>
<div id="sidemenu">
<ul class="listli">
<li class="menu1"><a href="/test/studentview.jsp">학생목록</a></li>
</ul>
<ul class="listli">
<li><p class="menu1"><a href="/test/loginafter.jsp">개설과목</a></p></li>
<ul>
<li><p class='menu2'>전공</p></li>
<li><p class='menu2'>교양</p></li>
</ul>
</ul>
</div>
<div id="menuoutput">
<h3 style="margin-left:20px">개설과목</h3>
<div id="contentmenu">
<ul class="topbar">
<li>과목이름</li>
<li>분류</li>
<li>개설학과</li>
<li>담당교수</li>
</ul>
<%
ResultSet all_sub_rs=stmt.executeQuery("SELECT * FROM SUBJECT");
while(all_sub_rs.next()){
String s_name=all_sub_rs.getString("S_NAME");
String s_code=all_sub_rs.getString("S_CODE");
String s_hackga=all_sub_rs.getString("S_HACKGA");
String p_name=all_sub_rs.getString("P_NAME");
%>
<ul class="contentbar">
<li><%=s_name%></li>
<li><%=s_code%></li>
<li><%=s_hackga%></li>
<li><%=p_name%></li>
</ul>
<%} %>
</div>
</div>
</div>
<%
all_sub_rs.close();
stmt.close();
dbconn.close();
%>
개설과목페이지(loginafter.jsp)이다.
<%
if(session.getAttribute("id")==null){
System.out.println("넌 누구냐");
%>
<a><%@page errorPage="/test/error.jsp" %></a>
<%
} else{
System.out.println(session.getAttribute("id")+"님이 접속중이십니다.");
}
%>
--------------------------------------------------------------------------------------------------------중간생략
var flip=0;
$("#pagemove").click(function(){
document.submit();
});
document.getElementById("alarm").innerHtml=alert("올바른 접속이 아닙니다.");
이 부분은 세션이 유지되었는지 확인하는것(아니면 오류 뜨는 기능)과 목록을 로그아웃 jQuery이다. 오류 발생 부분은 수정해야한다. 올바른 로그인에서도 뜨기 때문에 수정필요하다. 수정함
<%
if(session.getAttribute("id")==null){
System.out.println("넌 누구냐");
RequestDispatcher dispatcher = request.getRequestDispatcher("error.jsp");
dispatcher.forward(request, response);
} else{
System.out.println(session.getAttribute("id")+"님이 접속중이십니다.");
}
%>
위의 빨간색 코드를 밑에 파랑색 코드로 수정하였다. <@page errorPage="/test/error.jsp"%>는 저렇게 쓰는것이 아니었을 뿐더러 예외처리로 인한 오류페이지는 저 error.jsp로 가게하는 것인데 일단 지금 하려는 작업은 예외처리보단 if문이 낫다고 판단했다. 그래서 RequestDispatcher를 이용하여 세션값이 null이면 error.jsp를 호출하는 식으로 바꾸었다.
이제 전공과 교양 메뉴를 클릭하면 해당 교과과목들만 조회하게 만들려고 한다. jquery를 이용해 <ul class="contentbar"> 내용 밑에 li 내용을 검색하구 이를 제외하는 식으로 생각하고 있다.
개설과목을 조회할때 셀렉트 박스를 이용하여 선택한다. 이 값을 form 태그를 이용하여 자기자신에게 전송.수신을 하여 받은 값을 토대로 목록 조회화면을 갱신한다. 처음에는 jQuery를 이용할려고 하였으나 너무 어려워 포기하고 form 태그로 갈아탔다.
form 태그의 action 값을 주지 않으면 자기 자신의 페이지가 default 값으로 적용된다. (method의 기본 값은 default이다.)
<form name="inquire" method="post">
<select name="inquire2" style="float:left">
<option value="'' or S_CODE LIKE '%____'">전체</option>
<option value="'전공선택'">전공선택</option>
<option value="'전공필수'">전공필수</option>
<option value="'교양필수'">교양필수</option>
<option value="'교양선택'">교양선택</option>
</select>
<button id="cli" style="float:left">확인</button>
</form>
-----------------------------------------------------------------------------------------------------중간 생략
String inqs=request.getParameter("inquire2");
/* System.out.println(inqs); */
if(inqs==null){
inqs="'' or S_CODE LIKE '%____'";
}
ResultSet all_sub_rs=stmt.executeQuery("SELECT * FROM SUBJECT WHERE S_CODE="+inqs);
------------------------------------------------------------------------------------------------------중간 생략
$("#cli").click(function(){
document.inquire.submit();
});
-------------------------------------------------------------------------------------------------------중간 생략
request.setCharacterEncoding("UTF-8");
한글을 DB와 연동할때는 깨지는 경우가 다반사이다. 이럴때 저거를 자바단(<% %>)에 써주자.
URLEncoding="UTF-8"
이거는 Server 폴더에 server.xml의 <Connector~ /> 태그 안에 써주자
나도 무슨 원리인지는 모르는데 한글 깨지니깐 일단 써준다.
form태그와 name은 폼으로 넘길때 전송하는 변수의 이름이 된다. select의 name은 받은 값들 중에 파라메타로 꺼낼 때 사용하는 변수 이름을 가리킨다. 절대 2개가 같을 수가 없다. 또한 select의 안에 option의 value 값은 파라메타로 받을 최종 값이 된다. 이점 아주 유의해야한다. 이걸 제대로 못해서 오후 내내 삽질했다. ㅠ..
하루종일 해서 겨우 검색 필터 기능 하나 구현했다. 그것도 ... 퀄리티는 떨어진다.. 갈길이 멀다.
'공부!' 카테고리의 다른 글
| JSP 로그인 상태 유지 (0) | 2017.12.28 |
|---|---|
| JDBC oracle 연동하여 회원등록+목록조회 만들기 (0) | 2017.12.27 |
| JSP 기초 (0) | 2017.12.21 |
| JSP alert 함수, confirm 함수, prompt 함수 (0) | 2017.12.20 |
| jdbc 데이터 전송-받기 (0) | 2017.12.14 |
