728x90

저번 시간에 자바 클래스까지 구상했으니 이번에는 초기화면을 만들어 보겠습니다.

우선 만들어본 초기화면을 보여드리고 간단하게 설명하겠습니다.

왼쪽 상단에 stocksophia를 클릭하면 index 페이지로 이동하게 설정해뒀습니다.

로그인 누르면 로그인으로 이동하고 옆에 아이콘을 클릭할 경우 이동할 수 있는 카테고리가 등장합니다. 

로그인한 경우와 아닌 경우 이동할 수 있는 카테고리가 다릅니다.

로그인 안했을 때
로그인 했을 때

해당 아이디는 관리자 권한까지 가지고 있어서 관리 페이지까지 보입니다.

로그인하지 않았을 경우 게시판의 글을 클릭할 수 없고 글쓰기 버튼이 보이지 않습니다.

게시판 글 자체는 가장 최근에 작성한 글 순서대로 DB에서 가져오고 검색과 페이징 기능을 추가했습니다.

페이지 자체는 반응형 웹사이트로 만들었는데 최대 사이즈는 1200px로 설정해뒀습니다.

 

저는 이 페이지를 만들면서 토글 버튼을 누르면 이동할 수 있는 카테고리를 보여주는 게 가장 어려웠습니다.

때문에 다른사람에게 혹시 도움이 될까 하여 코드를 남겨보겠습니다.

<!-- HTML -->
	<div class="dropdown">
        <button class="navbar__toggle-btn">
          <i class="fas fa-bars fa-2x"></i>
        </button>
        <div class="navbar__toggle_content" id="myDropdown">
		  <a href='#'>회원가입</a>
          <a href="#">자유게시판</a>
          <a href="#">추천게시판</a>
          <a href="#">공지사항</a>
        </div>
      </div>
      
 <script>
// 토글버튼 사용
//javascript
const navbarToggleBtn = document.querySelector('.navbar__toggle-btn');
navbarToggleBtn.addEventListener('click', () => {
	document.getElementById("myDropdown").classList.toggle('show');
});
 </script>
 
 <style>
 .navbar__toggle_content {
  display: none;
  position: absolute;
  right: 0;
  min-width: 10px;
  float: right;
  background-color: var(--color-light-green);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.show {
  display: block;
}
 </style>

처음에 css 스타일로 토글 컨텐츠에 display : none값을 주어 안 보이게 한 후에 

스크립트로 토글 버튼을 누를때 마다 토글 콘텐츠의 디스플레이 값을 변경하게 만들었습니다.

 

728x90
저작자표시 비영리

'노트' 카테고리의 다른 글

토이 프로젝트 주식 커뮤니티 만들기(7) - JSP 로그인 페이지/ 아이디 찾기/ 비밀번호 찾기  (0) 2022.06.07
토이 프로젝트 주식 커뮤니티 만들기(6) - JSP 회원가입 페이지  (0) 2022.06.05
jQuery 여러 메서드  (0) 2022.05.19
jQuery 필터링 메서드  (1) 2022.05.18
jQuery 개요, 기본 문법  (0) 2022.05.17
728x90

클래스 다이어그램을 그릴 수 있는 프로그램을 통해서

미리 각 자바 클래스에서 사용할 변수와 메서드를 작성해봤습니다.

세 게시판이 비슷한 기능들을 하기 때문에 같은 변수와 메서드를 가지고 있습니다.

다른 기능들은 점차 추가하면 될 것 같습니다.

728x90
저작자표시 비영리

'Java' 카테고리의 다른 글

spring DI, AOP  (0) 2022.06.14
Spring의 특징 POJO/ DI/ IoC  (0) 2022.06.13
토이 프로젝트 주식 커뮤니티 만들기(3) - DB  (0) 2022.05.18
토이 프로젝트 주식 커뮤니티 만들기(2) - 스토리보드  (0) 2022.05.09
토이 프로젝트 주식 커뮤니티 만들기(1) - 스토리보드  (0) 2022.05.07
728x90

.each() 메서드

  • 매개변수로 입력한 함수를 사용한다.
  • for 반복문처럼 객체나 배열의 요소를 검사한다.
  • 기본 형태
<script>
	$.each(obj,function(index.item){});
    $(selector).each(function(index, item){});
    // index에는 배열의 인덱스가 오고 item에는 해당 인덱스의 값이 담긴다.
</script>
  • 예를 들어 여러개의 h1 태그가 있다면 각각의 값을 확인하고 사용할 수 있다.
<body>
	<h1> content1 </h1>
    <h1> content2 </h1>
    <h1> content3 </h1>
    <h1> content4 </h1>
    <h1> content5 </h1>
    <h1> content6 </h1>

<script>
	$("h1").each(function(idx,item){
    	//h1 각 태그에 적용할 함수 정의
    });
</script>
</body>

 

addClass() / removeClass() 메서드

  • addClass()는 문서 객체에 class 속성을 추가하는 메서드
  • removeClass()는 문서 객체에 class 속성을 제거하는 메서드
  • 예제 
  • class 버튼을 누르면 div1 class를 추가해 css가 적용되고 remove 버튼을 누르면 class가 삭제되어 css적용이 풀린다.
<head>
<style type="text/css">
	.div1 {
		display: inline-block;
		margin: 10px;
		background-color: yellow;
		border:1px solid black;
	}
</style>
</head>
<body>
	<div >div1</div>
	<div >div1</div>
	<button onclick="clickbtn()"> class </button>
	<button onclick="removeBtn()"> remove</button>
	
<script>
	function clickbtn(){
		$("div").addClass("div1");
	} 
	function removeBtn(){
		$("div").removeClass("div1");
	}
</script>
</body>

 

attr() / removeAttr() 메서드

  • 특정 속성의 값을 알아내거나 추가/ 제거할 수 있다.
<body>
	<input type="text" id="text1">

<script>
	//input의 타입의 값을 반환한다.
	$("input").attr("type");
    
    //input의 타입 속성의 값을 password로 변경/추가한다.
    $("input").attr("type","password");
    
    //input 태그에 있는 id 속성을 제거한다.
    $("input").removeAttr("id");
<script>
</body>

 

728x90
저작자표시 비영리

'노트' 카테고리의 다른 글

토이 프로젝트 주식 커뮤니티 만들기(6) - JSP 회원가입 페이지  (0) 2022.06.05
토이 프로젝트 주식 커뮤니티 만들기(5) - 초기화면 생성/JSP 드롭다운 버튼  (0) 2022.06.03
jQuery 필터링 메서드  (1) 2022.05.18
jQuery 개요, 기본 문법  (0) 2022.05.17
5월 6일 JSP  (0) 2022.05.07
728x90

스토리보드로 각 페이지 구성을 짠 다음 기능을 구현하고 데이터를 저장하기 위해서 DB를 구상했습니다.

우선은 회원정보를 저장할 member 테이블 그리고 3개의 게시판 데이터를 저장할 각각의 게시판 테이블입니다.

그 하위에는 각 게시판의 댓글을 저장할 테이블을 만들었습니다.

 

이미지는 eclipse의 ERMaster를 사용해 표현한 것이고 실제 DB는 oracleDB를 사용했습니다.

이미지를 붙이고 나니 각 게시판과 댓글에 작성자 부분이 빠져있는 걸 발견했습니다.

다른 부분도 놓친 게 없는지 확인하고 수정해야겠습니다.

728x90
저작자표시 비영리

'Java' 카테고리의 다른 글

spring DI, AOP  (0) 2022.06.14
Spring의 특징 POJO/ DI/ IoC  (0) 2022.06.13
토이 프로젝트 주식 커뮤니티 만들기(4) - 클래스 다이어그램  (0) 2022.05.19
토이 프로젝트 주식 커뮤니티 만들기(2) - 스토리보드  (0) 2022.05.09
토이 프로젝트 주식 커뮤니티 만들기(1) - 스토리보드  (0) 2022.05.07
728x90

기본 필터링 메서드

기본 필터링 메서드 .filter()의 두 가지 사용방법

<script>
	$(selector).filter(selector);
    //예제
    $("h1").filter(":odd").css("color","red");
    
    $(selector).filter(function(){});
    //예제
    $("div").filter(funtion(index,obj){
    	return index % 2 == 0;
    }).css("color","red");
</script>

필터 선택자 이용

  • 자주 사용하는 것들을 메서드로 제공한다.
  • .eq() - 특정 인덱스에 존재하는 객체 선택
  • .first() - 첫 번째에 위치하는 객체 선택
  • .last() - 마지막에 위치하는 객체 선택

. is() 메서드

  • 매개변수로 선택자를 입력받는다.
  • 선택한 객체가 선택자와 일치하는지 판별해 true/false를 반환한다.

 

728x90
저작자표시 비영리

'노트' 카테고리의 다른 글

토이 프로젝트 주식 커뮤니티 만들기(5) - 초기화면 생성/JSP 드롭다운 버튼  (0) 2022.06.03
jQuery 여러 메서드  (0) 2022.05.19
jQuery 개요, 기본 문법  (0) 2022.05.17
5월 6일 JSP  (0) 2022.05.07
5월 3일 JSP 게시판 페이징 학습  (0) 2022.05.03
728x90

jQuery 개요

  • 오픈소스 라이브러리
  • 복잡한 자바스크립트 문법을 간소화
  • 크로스 브라우징
  • 다양한 오픈소스 라이브러리 사용 가능

 

jQuery 기본 문법

<script>
	$(document).ready(function() {
    
    });
</script>

<!-- 간소화 -->

<script>
	$(function() {
    
    });
</script>
  • 문서가 준비 완료되면 전달된 함수를 실행하라는 의미
  • script를 html의 head안에 넣었을 경우 본문이 출력되기 전에 script가 먼저 실행되기 때문에 사용한다.
  • javascript의 onload와 같다.
  • $ 표시는 jQuery 문자를 간소화 한것

 

기본 선택자

<script>
	$("h1").css("color","red");
</script>
  • 가장 많이 사용하는 형태
  • $ 괄호 안에 들어가는 것은 선택 자이고. 뒤에 오는 것은 메서드이다.
  • h1 태그의 css color style을 red로 바꾼다.
  • 선택자에 쉼표를 사용해 하나 이상의 선택자를 사용할 수 있다.
  • id나 class 태그를 선택할 경우 css태그를 선택하는 것과 같다.
<script>
	$("h1").css("color","red");
    
    $("#id").css("color","red");
    $(".class").css("color","red");
    
</script>

 

자식 선택자/ 후손 선택자

  • 기본 선택자 앞에 붙여 사용하며 기본 선택자의 범위를 제한한다.
<script>
/* 자식 선택자 
바디의 E만 색이 변함 */
$("div > h1").css("color","red");

/* 후손 선택자 
바디의 A와 E의 색이 변함*/
$("div h1").css("color","red");

</script>
<body>
	<div>
    	<ul>
       		<li><h1>A</h1></li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
        <h1>E</h1>
    </div>
</body>

속성 선택자

  • 기본 선택자 뒤에 붙여 사용
<script>
/*속성 안의 값이 특정 값과 같은 객체 선택*/
$("input[type=text]").css("color","red");

/*속성 안의 값이 특정 값을 단어로써 포함하는 객체 선택*/
$("input[type~='값']").css("color","red");

/*속성 안의 값이 특정 값으로 시작하는 객체 선택*/
$("input[type^='값']").css("color","red");

/*속성 안의 값이 특정 값으로 끝나는 객체 선택*/
$("input[type$='값']").css("color","red");

/*속성 안의 값이 특정 값을 포함하는 객체 선택*/
$("input[type*='값']").css("color","red");
</script>
  • 대괄호 말고 ":"을 사용하여 속성을 선택할 수도 있다.
<script>
	/*input 태그의 button 타입 선택*/
	$("input:button").css("color","red");
</script>

필터 선택자

요소:odd 홀수에 위치한 객체 선택
요소:even 짝수에 위치한 객체 선택
요소:first 첫 번째 위치한 객체 선택
요소:last 마지막에 위치한 객체 선택
요소:contains(문자열) 특정 문자열을 포함하는 객체 선택
요소:eg(n) n번째 위치하는 객체 선택
요소:gt(n) n번째를 초과하는 객체 선택
요소:lt(n) N번째 미만에 위치하는 객체 선택
요소:has(선택자) 선택자를 가지고 있는 객체 선택
요소:not(선택자) 선택자와 일치하지 않는 객체 선택
요소:nth-child(2n) 2n번째 위치하는 객체 선택

 

부분의 필터 선택자의 경우 배열에 담아 그 배열에 위치한 인덱스를 기준으로 객체를 선택한다.

때문에 예를 들어 odd의 경우 홀수에 위치한 객체를 선택하는데

배열에 [1,2,3,4,5]가 있을 경우 홀수라 1,3,5 가 선택되어야 할 것 같다.

[1,2,3,4,5]의 인덱스가 [0,1,2,3,4]라서 실제로는 2,4가 선택된다.

 

<script>
	/*예시*/
    /*여러 선택자를 사용해 봅시다.*/
    $("table tr:eq(1) td:gt(0)").css("color","yellow");
    $("table tr:eq(2) td:gt(0)").css("color","yellow");
    $("table tr:lt(3) td:nth-child(2)").css("color","yellow");
    $("table tr:lt(3) td:nth-child(3)").css("color","yellow");
</script>
728x90
저작자표시 비영리

'노트' 카테고리의 다른 글

jQuery 여러 메서드  (0) 2022.05.19
jQuery 필터링 메서드  (1) 2022.05.18
5월 6일 JSP  (0) 2022.05.07
5월 3일 JSP 게시판 페이징 학습  (0) 2022.05.03
4월 28일 게시판 글 삭제하기  (0) 2022.04.28
728x90

각 페이지별 화면 구성을 짜 봤습니다.

index 페이지면서 추천 게시판의 글 목록을 보여줍니다. 

사이트 전체에서 글의 내용을 보고 싶으면 로그인을 해야 하고

로그인하지 않은 상태에서 글을 누르면 로그인 페이지로 이동합니다.

 

회원가입할 때 닉네임도 설정 가능하게 해서 로그인 이후에는 닉네임이 보이게 할까 고민입니다.

우선은 ID로 표시되게 할 예정입니다.

 

 아이디 찾기만 적어놓았는데 비밀번호 찾기도 이메일로 발송해 변경하게 구현할까 합니다.

로그인 버튼을 눌렀을 때 아이디와 비밀번호가 DB에 있으면 index 혹은 그 전 페이지로 이동하고

없을 경우 로그인 페이지에서 경고창만 띄웁니다.

 

아이디 찾기 페이지입니다. 일치하는 ID와 email이 있을 경우 새 페이지로 이동해서 보여줄지 

경고창같은 팝업을 띄워서 보여줄지 고민입니다. 일치하는 경우에는 새 페이지로 이동해서 보여주고

없는 경우에만 경고창을 띄워 알려주는 게 지금은 제일 나아 보입니다.

가벼운 사이트를 원하기 때문에 입력받는 내용이 별로 없습니다.

DB에 같은 ID가 있는지 체크하는 버튼을 만들고,

빠진 내용이 없었을 때 확인 버튼을 누르면 DB에 데이터를 추가합니다.

 

글 목록에서 글을 클릭할 경우 보이는 페이지입니다.

추천, 비추천 버튼과 신고버튼을 구현하고,

작성자 본인인 경우에 글을 수정할 수 있는 수정 버튼을 보이게 만듭니다. 

하단에는 글에 댓글을 달 수 있는 창을 만듭니다. 

댓글의 경우에는 DB를 어떻게 해야 할까요?

생각으로는 table을 하나 만들고 게시판에 글 번호를 외래 키로 받아 표시하면 될 거 같은데...

 

 글 쓰기, 수정하기 페이지입니다.

화면 구성은 같은 모습이지만 실제로 구현할 때 수정하기 페이지의 모습은 좀 다른데

원래 글의 제목과 내용을 그대로 받아올 예정입니다.

글 쓰기의 경우 등록을 누르면 DB에 새로운 데이터가 추가되고 

수정하기의 경우 update 구문을 사용합니다.

 

포트폴리오 페이지입니다.

각 회원마다 자신의 종목을 추가할 수 있고, 다른 회원에게 보여줄지 말지 결정할 수 있습니다.

그리고 자산 추이를 보여주는 그래프가 할당되는데 이 페이지는 구현할지 말지 고민하고 있습니다...

 

 이외에도 마이페이지와 비밀번호 변경 기능, 스크랩 기능, 스크랩 확인 페이지를 만들 생각하고 있습니다. 

728x90
저작자표시 비영리

'Java' 카테고리의 다른 글

spring DI, AOP  (0) 2022.06.14
Spring의 특징 POJO/ DI/ IoC  (0) 2022.06.13
토이 프로젝트 주식 커뮤니티 만들기(4) - 클래스 다이어그램  (0) 2022.05.19
토이 프로젝트 주식 커뮤니티 만들기(3) - DB  (0) 2022.05.18
토이 프로젝트 주식 커뮤니티 만들기(1) - 스토리보드  (0) 2022.05.07
728x90

처음으로 하는 개인 프로젝트입니다.

페이지 구성부터 서버 연동까지 혼자서 해보려니까 볼 때마다 빠진 부분이 보이네요.

그 부분은 프로젝트를 진행하면서 추가, 수정하도록 하겠습니다.

 

일단 만들려는 사이트의 주제는 넓은 의미에서 주식커뮤니티 사이트입니다.

좁은 의미에서는 종목추천 사이트로 각자 종목을 추천할 수 있는데 그에 대한 근거를 필수적으로 피력해야 합니다. 

 

구현 기능으로는 회원가입, 로그인, 로그아웃, 글쓰기, 댓글, 첨부파일 넣기 등을 생각하고 있습니다.

신고하기 기능도 필요할 것으로 보이고 뭔가 빠진 기능들이 있을 거 같은데 단순한 사이트를 생각해서 그런지

잘 생각나지 않네요.

 

필요 페이지로는 회원가입, 로그인, 아이디 찾기 페이지가 있고 글쓰기 1,2와 게시판 글 목록 1,2와 같이 숫자로 나누어져 있는데 이는 공지사항, 자유게시판, 추천 게시판을 나누어 표현한 것입니다. 

 

DB는 h2를 사용할지 mySql을 사용할지 아직 정하지 못했는데 테이블을 먼저 생각한다면 회원테이블과 각 게시판마다 테이블을 생성해 총 4개로 구현할 수 있을 거라 생각합니다.

대략적으로 구현기능과 필요 페이지, 테이블, 사용할 도구와 언어들을 정리해봤습니다.

화면 구성을 어떻게 해야할지 아직 감이 오지는 않습니다. 머릿속에는 단순한 사이트로 구현되어 있는데 이대로 하면 너무 휑하지 않을까 하는 생각이 들어서 그런 듯합니다.

navbar를 만들면 위쪽 상단에 만들까 왼쪽에 세로로 만들까 고민을 했는데 제일 위 상단에 만드는게 개인적으로 나아 보입니다. 

어제 고민을 많이하며 작성했는데 글로 풀어서 쓰니 양이 적네요.

아무래도 경험이 부족해서 뭐가 필요하고 어떻게 구성해야 하는지 몰라서 그런 듯합니다.

그리고 글로 작성하면서 느낀 건데 화면 구성이 너무 부족한 거 같네요 그 부분부터 추가해야겠습니다. 

읽어주셔서 감사하고요 앞으로 만들어가는 과정을 하나씩 올려보도록 하겠습니다.

728x90
저작자표시 비영리

'Java' 카테고리의 다른 글

spring DI, AOP  (0) 2022.06.14
Spring의 특징 POJO/ DI/ IoC  (0) 2022.06.13
토이 프로젝트 주식 커뮤니티 만들기(4) - 클래스 다이어그램  (0) 2022.05.19
토이 프로젝트 주식 커뮤니티 만들기(3) - DB  (0) 2022.05.18
토이 프로젝트 주식 커뮤니티 만들기(2) - 스토리보드  (0) 2022.05.09
728x90

라이브러리

  • imgscalr-lib.jar

    - JAVA로 구현된 간단하고 효율적인 이미지 크기 조정 및 조작 패키지

  • cos.jar

    - MultipatRequest 및 MultipartParser 클래스를 포함한 패키지

    - 파일 업로드 기능을 구현한다.

HTML

  • document.form.enctype = "multipart/form-data"

    - enctype 속성은 form 태그의 method 속성 값이 post인 경우에만 사용할 수 있고, 폼 데이터가 서버로 제출될 때 해당 데이터가 인코딩 되는 방법을 명시한다.

    - multipart/form-data는 모든 문자를 인코딩하지 않음을 뜻하고 주로 파일이나 이미지를 서버로 전송할 때 사용한다

JAVA

  • MultipartRequest

    - 파일 업로드 및 폼 요소를 처리하는 클래스

    - .getFilesystemName() : 서버에 실제로 업로드된 파일의 이름을 반환한다.

    - .getOriginalFileName() : 클라이언트가 업로드한 파일의 원본 이름을 반환한다.

  • DefaultFileRenamePolicy()

    - 동일한 파일명에 대한 처리 방식을 설정한다.

    - 같은 이름의 파일이 있을경우 test.jpg, test(1). jpg, test(2). jpg 형식으로 설정된다.

  • Enumeration

    - 객체들을 집합의 형태로 관리해주는 인터페이스다.

    - .getFileName() : Enumeration 형식으로 업로드된 파일 이름들을 반환한다.

    - .nextElement() : 다음 요소를 반환한다.

  • Files.probContentType()

    - 파일의 컨텐츠 유형을 파악한다.

  • ServletOutputStream 

    - 이진 데이터를 클라이언트로 보내기 위한 출력 스트림을 제공한다.

    - 자체로는 추상클래스이기 때문에 인스턴스를 생성할 수 없고 ServletResponse 클래스의 getOutputStream()이라는 메서드를 통해 사용한다.

    - 게시판에 파일을 올릴 때 사용할 수 있다.

728x90
저작자표시 비영리

'노트' 카테고리의 다른 글

jQuery 필터링 메서드  (1) 2022.05.18
jQuery 개요, 기본 문법  (0) 2022.05.17
5월 3일 JSP 게시판 페이징 학습  (0) 2022.05.03
4월 28일 게시판 글 삭제하기  (0) 2022.04.28
4월 27일 JSP 게시판 글 수정하기  (0) 2022.04.27
728x90

BoardDAO.java

  • boardSelectAll(Criteria cri) 메서드 수정

    - 메서드의 매개변수로 cri를 추가

    - 기존의 DB에서 모든 글을 가져오던 메서드였으나 페이지별로 일정 숫자의 글을 가져오도록 수정

  • boardTotal()

    - DB에서 게시글의 총개수를 가져오는 메서드

    - select count를 사용

Criteria.java

  • 페이지 갯수와 한 화면에 출력되는 글 개수를 담는 객체를 생성하는 클래스

PageMaker.java

  • BoardDAO의 boardTotal() 메서드의 게시글 총개수를 매개변수로 받아서 시작 페이지와 끝 페이지를 계산하고 반환한다. 

boardList.jsp

  • 글 하단의 페이지 번호를 누르면 BoardController의 가상주소에 매핑되고 페이지 번호를 파라미터로 보낸다.
  • 추가로 PageMaker의 속성들을 공유받는다.

BoardController.java

  • boardList로 부터 받은 페이지 숫자와 boardTotal 메서드로 반환받은 게시글 총개수를 변수에 담는다.
  • 두 변수의 값을 PageMaker의 객체에 담는다.
  • BoardDAO의 boardSelectAll 메서드를 실행한다.
728x90
저작자표시 비영리

'노트' 카테고리의 다른 글

jQuery 개요, 기본 문법  (0) 2022.05.17
5월 6일 JSP  (0) 2022.05.07
4월 28일 게시판 글 삭제하기  (0) 2022.04.28
4월 27일 JSP 게시판 글 수정하기  (0) 2022.04.27
4월 26일 자바스크립트 객체 개념  (0) 2022.04.26

+ Recent posts

티스토리툴바