본문 바로가기
Project/블로그 프로젝트

네이버 블로그 만들기 프로젝트(3) - 게시글 목록 페이지 만들기

by 히앤님 2022. 10. 20.
반응형
SMALL

게시글 목록 페이지 만들기

관리자가 아닌 일반로그인 후 게시글 목록을 띄우는 블로그 메인페이지로 이동하도록 구현해보겠다.

[ 만들 기능 ]
1. 로그인 후 블로그 메인페이지로 이동
2. 메인페이지에 postDB에 있는 게시글 목록 리스트 띄우기

1. 로그인 후 일반회원이면 메인페이지로 가도록 링크 연결.
2. Controller에서 호출 URL을 받아 Action과 연결함.
3. Action에서 getPostList로 가져온 postList 배열값을 Service로 보내줌.
4. Service에서 커넥션 풀에서 DB 연결하고, 게시글 목록 배열로 담아옴.
5. DAO 안에서 SQL에 맞게 검색 후 결과값 리턴해서 Service에게 줌. (+커넥션 끊음)
6. Action에서 Service에게 받은 결과값(게시글 목록 배열)을 mainPage.jsp로 던져줌.
8. jsp 페이지에서 게시글 목록 리스트를 반복문으로 출력해줌.


1. 회원정보 테이블(기존 테이블) 및 게시글 테이블 만들기

--회원정보 테이블 생성
create table memberinfo(
    mem_no number(5) Primary key,
    mem_id varchar2(20) not null,
    mem_pwd varchar2(20) not null,
    mem_name varchar2(10) not null,
    mem_bir_yy VARCHAR(25),
    mem_bir_mm VARCHAR(25),
    mem_bir_dd VARCHAR(25),
    mem_gender VARCHAR(25),
    mem_mail VARCHAR(25),
    mem_phone VARCHAR(25),
    mem_regdate  date default sysdate,
    mem_pic  varchar2(90)
);

--임시 멤버 및 관리자 넣어놓기
insert into memberinfo values(1,'heannim12','heannim12','김히앤','2022','4','10','','','','','');
insert into memberinfo values(2,'shopAdmin','shopAdmin','관리자','2022','4','10','','','','','');
--게시글 테이블 생성(회원목록의 mem_no 연결)
create table post_info (
    post_no  number(4) Primary key,
    mem_no  number(5) not null,
    post_title  varchar2(60) not null,
    post_thumbnail  varchar2(80) not null,
    post_video varchar2(50),
    post_content  varchar2(5000) not null,
    visit_cnt  number(5) default 0,
    post_uploadtime  date default sysdate,
    
    foreign key(mem_no) REFERENCES memberinfo(mem_no)
);

--게시글도 테스트용 데이터 넣어놓기
insert into post_info values(1,1,'게시글1제목','post1.jpg','','게시글1내용게시글1내용게시글1내용게시글1내용게시글1내용게시글1내용',0,'');
insert into post_info values(2,1,'게시글2제목','post2.jpg','','게시글2내용게시글2내용게시글2내용게시글2내용게시글2내용게시글2내용',1,'');

2. 부트스트랩 연결

우선 메인페이지에 게시글 전체를 띄워보자.

블로그 메인페이지, 상세페이지 부트스트랩 사용함(부트스트랩 출처 : https://startbootstrap.com/template/blog-home)

블로그 메인페이지 부트스트랩

네이버와 깔맞춤 해주기 위해서 상단 네비게이션 배경색을 바꿔주었다.

--bs-dark-rgb: 0, 199, 60; /*네이버 배경색 맞춤*/

3. 어떤 화면에서 띄울 것인가?

로그인 화면에서 로그인을 할 때, "shopAdmin"이라는 아이디를 가진 관리자라면 회원목록이 나오도록 했다.

▼ MemberListAction.java

더보기
package action;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import svc.MemberListService;
import vo.ActionForward;
import vo.MemberBean;

/* 인터페이스를 함께 추가했다. 로그인 후 분기 처리를 위한 클래스이다.*/
public class MemberListAction implements Action { //Action을 implements 해줌

	@Override
	public ActionForward execute(HttpServletRequest req, HttpServletResponse resp) throws Exception {

		
		//session을 써서 서버 생성함.
		HttpSession session = req.getSession();
		// 로그인할 때는 setSession해서 가져오고
		// 여기 리스트에서는 get으로 뿌린다
		String id = (String) session.getAttribute("id");
		ActionForward forward = null; //어디로 갈지?

		
		//=========================== 로그인 후 분기처리 ================================
		//1. 회원 아님(id 정보 없음) => 로그인 안됨
		if (id == null) {
			// 세션에 저장된 아이디가 없다면~
			forward = new ActionForward();
			forward.setRedirect(true);
			forward.setPath("./memberLogin.me");
			// 회원이 아니니까 로그인 페이지로 이동하라.

			
		//2. 관리자 아니고 회원임 => 일반로그인
		} else if (!id.equals("shopAdmin")) {
			// 상점 주인이 아니면
			resp.setContentType("text/html;charset=UTF-8");
			PrintWriter out = resp.getWriter();
			out.println("<script>");
			out.println("alert('관리자가 아닙니다');");
			out.println("location.href='./postListAction.me'"); //관리자가 아니면 메인페이지로 이동
			out.println("</script>");

		//3. 관리자임 => 회원목록 보여짐
		} else {
			// 관리자가 맞다면 모든 회원 목록 표시.
			forward = new ActionForward();
			MemberListService memberListService = new MemberListService();
			ArrayList<MemberBean> memberList = memberListService.getMemberList();
			req.setAttribute("memberList", memberList);
			forward.setPath("./member_list.jsp");
		}

		return forward;
	}
}

이제 일반로그인을 하면 블로그 메인페이지로 연결되게 해주자. [postList]라는 이름으로 엮어줄 것임.

//2. 관리자 아니고 회원임 => 일반로그인
		} else if (!id.equals("shopAdmin")) {
			// 상점 주인이 아니면
			resp.setContentType("text/html;charset=UTF-8");
			PrintWriter out = resp.getWriter();
			out.println("<script>");
			out.println("alert('관리자가 아닙니다');");
			//관리자가 아니면 블로그 메인 페이지로 이동한다.
			out.println("location.href='./postListAction.me'");
			out.println("</script>");

4. Controller

먼저 컨트롤러에서 Action페이지로 연결해주자.

▼ MemberFrontController.java

//-------------------- 로그인이 된 후 메인페이지(게시글 목록) 보여주는 PostListAction 페이지 생성 ---------------------------
//메인 포스트 페이지에 정보만 띄워준다.
else if (command.equals("/member/postListAction.me")) {
    action = new PostListAction();
    // PostListAction, 로그인 후의 메인 포스트 페이지 표시.
    try {
        forward = action.execute(req, resp);
        System.out.println( "로그인 후 메인페이지 포스트 리스트 표시"))
    }
    catch (Exception e) {
        e.printStackTrace();
    }
}

5. Action

Action페이지에서 게시글 리스트를 PostBean에서 배열(ArrayList)로 받아 mainPage.jsp로 던져준다.

한번 더 로그인이 되어있는지 세션을 체크한다.

PostListAction.java

package action;
import java.util.ArrayList;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import svc.PostListService;
import vo.ActionForward;
import vo.PostBean;

/* 인터페이스를 함께 추가했다. 메인페이지 처리를 위한 클래스이다.*/
public class PostListAction implements Action { //Action을 implements 해줌

	@Override
	public ActionForward execute(HttpServletRequest req, HttpServletResponse resp) throws Exception {
    
		//session을 써서 서버 생성함.
		HttpSession session = req.getSession();
		// 로그인할 때는 setSession해서 가져오고
		// 여기 리스트에서는 get으로 뿌린다
		String id = (String) session.getAttribute("id");
		ActionForward forward = null; //어디로 갈지?
        
		//1. 로그인 상태인지 확인
		if (id == null) {
			// 세션에 저장된 아이디가 없다면~
			forward = new ActionForward();
			forward.setRedirect(true);
			forward.setPath("./memberLogin.me");

		//2. 게시글 목록 보여짐	
		} else {
			// 모든 게시글 목록 표시.
			forward = new ActionForward();
			PostListService postListService = new PostListService();
			//배열로 게시글목록을 가져온다.
			ArrayList<PostBean> postList = postListService.getPostList(); 
			req.setAttribute("postList", postList);
			
			//mainPage로 게시글 목록을 던져준다.
			forward.setPath("./mainPage.jsp");
		}
		return forward;
	}
}

6. Service

service를 만들어주고 게시글 리스트를 가져오기 위해 DB와 JSP를 연결해준다.

커넥션 풀을 열어 커넥션 객체들을 풀에 저장해두었다가 클라이언트에서 요청하면 객체를 빌려주고 반납받아 풀에 저장한다. DB 접속용 DAO 객체도 참조로 얻어온다.

커넥션으로 DAO에서 selectPostList(=게시글 목록)를 받아오면 배열에 저장해서 리턴해준다.

리턴한 postList를 Action에서 받는 것.

PostListService.java

package svc;
import static db.JdbcUtil.close;
import static db.JdbcUtil.getConnection;
import java.sql.Connection;
import java.util.ArrayList;
import DAO.PostDAO;
import vo.PostBean;


/* 게시글를 띄울 시 DB와 JSP를 연결해주는 역할을 담당하는 클래스(Service) */
public class PostListService {
	
	public ArrayList<PostBean> getPostList() { //리스트이므로 배열로 가져온다.
		//커넥션 풀 : DB와 미리 연결해놓은 커넥션 객체들을 풀에 저장해뒀다가 클라에서 요청오면 객체 빌려주고 볼일 끝나면 다시 반납받아 풀에 저장하는 방식
		Connection con = getConnection();
		// DB와 연결을 얻어내고.
		PostDAO postDAO = PostDAO.getInstance();
		// DB접속용 DAO 객체 참조 얻어오기.(싱글톤 패턴 : 인스턴스가 1개만 생성됨)
		// import static db.JdbcUtil.*;
		postDAO.setConnection(con);
		// 얻어온 커넥션 저장. -> 연결해서 할일 함.
		ArrayList<PostBean> postList = postDAO.selectPostList(); //selectPostList는 PostDAO에서 받아온다.
		//커넥션으로 DB에서 게시글 목록 받아서 배열에 저장

		close(con);
		// 사용을 마친 커넥션 반환
		return postList;
		// 게시글 목록 리턴.
	}
}

7. DAO

DB접속용 DAO 객체를 만들어보자. 여기서 직접적으로 SQL 문을 돌려 원하는 데이터를 DB에서 가져온다.

DB에서 필요한 정보를 가져오되, 게시글 내용은 미리보기로 보여줄 것이므로 substring을 통해 잘라낸다.

PostDAO.java

package DAO;
import static db.JdbcUtil.close;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import javax.sql.DataSource;
import vo.PostBean;

public class PostDAO {

	//db패키지의 JdbcUtil을 통해 자바와 오라클이 연결이 가능해졌으니 이 두 프로그램을 연결했으면 이제 정보를 넘겨줘야한다.
	//DAO의 클래스에서 회원가입을 진행하면서 입력한 정보들을 오라클로 넘겨준다.
	
	public static PostDAO instance;
	Connection con;
	// jsp와 오라클 연결 유지.
	PreparedStatement pstmt;
	// 쿼리문 전달.
	ResultSet rs;
	// 쿼리문 결과 저장 객체.
	DataSource ds;
	// 어떤 DB에 연결할 지.

	private PostDAO() {

	}

	public static PostDAO getInstance() {
		if (instance == null) {
			instance = new PostDAO();
		} // 1개의 객체를 공동으로 사용.
		return instance;
	}

	public void setConnection(Connection con) {
		this.con = con;
	}

	//=========================== 로그인된 후 게시글 목록을 가져와 보여주는 SQL로직 ===============================
	// selectPostList : PostListService에서 DB와 JSP를 연결해서 게시글 목록을 배열로 가져와 저장할 때 인자로 쓰임.
	public ArrayList<PostBean> selectPostList() {
		// ArrayList: 객체 배열 비슷, 컬렉션 프로임워크
		// 여러 개의 게시글 정보를 저장한다.

		// 디비에 저장된 모든 게시글 목록을 확인하는 SQL문(DB 이름 확인하기***)
		String sql = "select * from post_info";

		ArrayList<PostBean> postList = new ArrayList<PostBean>();
		PostBean pb = null; //Bean(vo)은 그릇이다. 뭘 가져올지는 vo에 목록이 있다.

		try {
			pstmt = con.prepareStatement(sql);
			rs = pstmt.executeQuery(); //executeQuery : resultSet 객체 반환
			//select는 executeQuery()를 사용한다.
			//쿼리문 처리결과 ResultSet의 객체인 rs에 저장.

			if (rs.next()) {//조회된 결과가 있다면 아래 문장 수행.
				do {//한 번 수행하고 또 수행할 게 있으면 수행.
					pb = new PostBean();
					//게시글 1개의 정보를 저장할 수 있는 PostBean 객체 생성.
					pb.setPOST_NO(rs.getInt("POST_NO")); //게시글번호
					pb.setMEM_NO(rs.getInt("MEM_NO")); //회원번호
					pb.setPOST_TITLE(rs.getString("POST_TITLE")); //게시글제목
					pb.setPOST_THUMBNAIL(rs.getString("POST_THUMBNAIL")); //게시글섬네일
					pb.setPOST_VIDEO(rs.getString("POST_VIDEO")); //게시글비디오
					
					//--- 게시글 내용 가져와서 15자만 미리보기로 보여줌 ---
					String preStr=rs.getString("POST_CONTENT"); 
					if(preStr.length()>30){ 
						preStr=preStr.substring(0,15)+"..."; //자르고 ... 붙이기
					};
					pb.setPOST_CONTENT(preStr); //게시글내용 미리보기
					//----------------------------------------
					
					pb.setVisit_cnt(rs.getInt("Visit_cnt")); //게시글조회수
					pb.setPOST_UPLOADTIME(rs.getString("POST_UPLOADTIME")); //게시글업로드타임
					//조회된 결과를 PostBean객체에 저장.
					postList.add(pb);
					//저장하면서 생성된 것을 이제 List에 담아냄.(ArrayList)
					//반복문이 실행될 때마다 게시글 1개씩 누적 시킴.
				} while (rs.next());
				//rs.next때문에 어레이 리스트 다음 값으로 넘어간다.(차례차례 읽어옴)
			}
		} catch (Exception ex) {
			System.out.println("selectPostList 에러 : " + ex);
		} finally {
			close(rs);
			close(pstmt);
		}
		return postList;
	}
}

8. VO

DAO에서 가져온 DB데이터를 담을 변수를 선언한다. int와 String 등 자료형을 신경쓸 것!

 PostBean.java

package vo;

public class PostBean {
	
	//사용할 변수들 선언
	private int POST_NO;
	private int MEM_NO;
	
	private String POST_TITLE;
	private String POST_THUMBNAIL;
	private String POST_VIDEO;
	private String POST_CONTENT;
	private int visit_cnt;
	private String POST_UPLOADTIME;
	
	//그 후 source > getter,setter
	
	public int getPOST_NO() {
		return POST_NO;
	}
	public void setPOST_NO(int pOST_NO) {
		POST_NO = pOST_NO;
	}
	public int getMEM_NO() {
		return MEM_NO;
	}
	public void setMEM_NO(int mEM_NO) {
		MEM_NO = mEM_NO;
	}
	public String getPOST_TITLE() {
		return POST_TITLE;
	}
	public void setPOST_TITLE(String pOST_TITLE) {
		POST_TITLE = pOST_TITLE;
	}
	public String getPOST_THUMBNAIL() {
		return POST_THUMBNAIL;
	}
	public void setPOST_THUMBNAIL(String pOST_THUMBNAIL) {
		POST_THUMBNAIL = pOST_THUMBNAIL;
	}
	public String getPOST_VIDEO() {
		return POST_VIDEO;
	}
	public void setPOST_VIDEO(String pOST_VIDEO) {
		POST_VIDEO = pOST_VIDEO;
	}
	public String getPOST_CONTENT() {
		return POST_CONTENT;
	}
	public void setPOST_CONTENT(String pOST_CONTENT) {
		POST_CONTENT = pOST_CONTENT;
	}
	public int getVisit_cnt() {
		return visit_cnt;
	}
	public void setVisit_cnt(int visit_cnt) {
		this.visit_cnt = visit_cnt;
	}
	public String getPOST_UPLOADTIME() {
		return POST_UPLOADTIME;
	}
	public void setPOST_UPLOADTIME(String pOST_UPLOADTIME) {
		POST_UPLOADTIME = pOST_UPLOADTIME;
	}
}

9. jsp에서 게시글 목록 출력하기

ArrayList를 jsp로 뿌려주었으니 출력해보자. 간단하게 jstl를 이용해서 c:forEach로 리스트를 출력해줄 것이다.

단, 섬네일은 이름만 받아서 "post1.jpg"과 같이 이름만 받아왔으므로, 이미지 src에 정확한 경로를 앞에 추가해주어야 한다. 이미지는 미리 그 경로에 DB와 동일한 이름으로 저장해두자.

이미지는 미리 경로에 넣어둠

...

		<!-- Page header with logo and tagline-->
        <header class="py-5 bg-light border-bottom mb-4">
            <div class="container">
                <div class="text-center my-5">
                    <h1 class="fw-bolder"> ${postList[0].MEM_NO}회원님의 블로그 홈에 오신걸 환영합니다!</h1>
                    <p class="lead mb-0">여기는 블로그 홈페이지입니다.배경사진 넣을꺼임.</p>
                </div>
            </div>
        </header>
        <!-- Page content-->
        <div class="container">
       
            <div class="row">
                <!-- Blog entries-->
                <div class="col-lg-8">
                        <c:forEach var="postList" items="${postList}">
                    <!-- Featured blog post -->
                    <div class="card mb-4">
                        <div class="card-body">
                           <a href="#!"><img class="card-img-top" src="../resources/img/thumbnail/${postList.POST_THUMBNAIL}" alt="..." /></a>
                          
                          <div class="small text-muted">${postList.POST_UPLOADTIME}</div>
                            <h2 class="card-title">${postList.POST_TITLE} -----  ${postList.MEM_NO}</h2>
                            <p class="card-text">${postList.POST_CONTENT}</p>
                            <a class="btn btn-primary" href="#!">Read more →</a>
                        </div>
                    </div>
                    </c:forEach>
...

mainPage.jsp 전체

더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="vo.MemberBean"%>
<%@ page import="java.util.*"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- 빨간줄 그어지는데 jstl 설치 안해서 그럼. lib에 넣어준다. jsp 확장태그로 c로 쓴다.-->


<!DOCTYPE html>
<html lang="ko">
    <head>
    <!-- 부트스트랩 출처 : https://startbootstrap.com/template/blog-home -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>Blog Home</title>
        <!-- Favicon-->
      <!--   <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />  -->
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="../resources/css/mainPage.css" rel="stylesheet" />
    </head>
    <body>
        <!-- Responsive navbar-->
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container">
                <a class="navbar-brand" href="#!">N Blog</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="#!">About</a></li>
                        <li class="nav-item"><a class="nav-link" href="#!">Contact</a></li>
                        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Blog</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Page header with logo and tagline-->
        <header class="py-5 bg-light border-bottom mb-4">
            <div class="container">
                <div class="text-center my-5">
                    <h1 class="fw-bolder"> ${postList[0].MEM_NO}회원님의 블로그 홈에 오신걸 환영합니다!</h1>
                    <p class="lead mb-0">여기는 블로그 홈페이지입니다.배경사진 넣을꺼임.</p>
                </div>
            </div>
        </header>
        <!-- Page content-->
        <div class="container">
       
            <div class="row">
                <!-- Blog entries-->
                <div class="col-lg-8">
                        <c:forEach var="postList" items="${postList}">
                    <!-- Featured blog post -->
                    <div class="card mb-4">
                        <div class="card-body">
                           <a href="#!"><img class="card-img-top" src="../resources/img/thumbnail/${postList.POST_THUMBNAIL}" alt="..." /></a>
                          
                          <div class="small text-muted">${postList.POST_UPLOADTIME}</div>
                            <h2 class="card-title">${postList.POST_TITLE} -----  ${postList.MEM_NO}</h2>
                            <p class="card-text">${postList.POST_CONTENT}</p>
                            <a class="btn btn-primary" href="#!">Read more →</a>
                        </div>
                    </div>
                    </c:forEach>
                    
                    <!-- Pagination-->
                    <nav aria-label="Pagination">
                        <hr class="my-0" />
                        <ul class="pagination justify-content-center my-4">
                            <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Newer</a></li>
                            <li class="page-item active" aria-current="page"><a class="page-link" href="#!">1</a></li>
                            <li class="page-item"><a class="page-link" href="#!">2</a></li>
                            <li class="page-item"><a class="page-link" href="#!">3</a></li>
                            <li class="page-item disabled"><a class="page-link" href="#!">...</a></li>
                            <li class="page-item"><a class="page-link" href="#!">15</a></li>
                            <li class="page-item"><a class="page-link" href="#!">Older</a></li>
                        </ul>
                    </nav>
                </div>
                <!-- Side widgets-->
                <div class="col-lg-4">
                    <!-- Search widget-->
                    <div class="card mb-4">
                        <div class="card-header">Search</div>
                        <div class="card-body">
                            <div class="input-group">
                                <input class="form-control" type="text" placeholder="Enter search term..." aria-label="Enter search term..." aria-describedby="button-search" />
                                <button class="btn btn-primary" id="button-search" type="button">Go!</button>
                            </div>
                        </div>
                    </div>
                    <!-- Categories widget-->
                    <div class="card mb-4">
                        <div class="card-header">Categories</div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <ul class="list-unstyled mb-0">
                                        <li><a href="#!">Web Design</a></li>
                                        <li><a href="#!">HTML</a></li>
                                        <li><a href="#!">Freebies</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-6">
                                    <ul class="list-unstyled mb-0">
                                        <li><a href="#!">JavaScript</a></li>
                                        <li><a href="#!">CSS</a></li>
                                        <li><a href="#!">Tutorials</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Side widget-->
                    <div class="card mb-4">
                        <div class="card-header">Side Widget</div>
                        <div class="card-body">You can put anything you want inside of these side widgets. They are easy to use, and feature the Bootstrap 5 card component!</div>
                    </div>
                </div>
            </div>
           
        </div>
        <!-- Footer-->
        <footer class="py-5 bg-dark">
            <div class="container"><p class="m-0 text-center text-white">Copyright &copy; Your Website 2022</p></div>
        </footer>
        <!-- Bootstrap core JS-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
       <!-- <script src="js/scripts.js"></script> -->
    </body>
</html>

10. 마무리로 조절하기

이미지가 너무 커서 리스트 모양이 이쁘지 않으므로, css로 섬네일 이미지 크기를 고정해준다.

.card-img,
.card-img-top,
.card-img-bottom {
/* 섬네일 이미지 크기 고정 및 왼쪽으로 */
  width: 200px;
  height:200px;
  vertical-align:middle;
  float:left; 
}

 

결과

 

++추가) 게시글 목록에 이웃들 글만 보이게 하기(session값 DAO로 보냄)


전체 블로그 게시글 목록을 띄우는게 아니라 "로그인 한 나"를 제외한 나머지 글들이 보이게끔 변경해줘봤다.

약간 헤맸는데, 이미 로그인하면서 session에 현재 로그인한 id값은 저장되어 있고... 그럼 SQL 문에서 현재 session에 접속된 id값에 해당하는 멤버가 아닌 멤버의 게시글들을 전부 불러오면 되는거 아닌가?

select * from post_info p join memberinfo m on p.mem_no = m.mem_no 
where m.mem_id !='heannim12';

현재 로그인한 계정의 id는 [heannim12] 이다. JOIN 문을 써서 FK로 연결한 mem_no가 같다는 조건 하에 mem_id가 [heannim12]인 테이블만 전부 뽑아보았다.(즉, mem_no 가 1이 아니어야만 한다.)

mem_no가 1이 아닌 애들만 뽑혔다.

현재 나는 DAO에서 SQL문을 써서 진행하고 있는데...Action 페이지에서부터 어떻게 session값을 가져가야하나...생각하다가 파라미터로 들려주기로 했다.

이렇게 Service로 갈 때 들려보내고

ArrayList<PostBean> postList = postListService.getPostList(sessionId);

String sessionId로 받아서 그대로 다시 DAO에게 전달해줬다.

DAO 갈때도 들려보내줬다.

ArrayList<PostBean> postList = postDAO.selectPostList(sessionId);

DAO까지 잘 들고온 sessionId값을 SQL문의 물음표에 넣어준다!

SQL 문에 조건으로 넣어준다.

String sql = "select * from post_info p join memberinfo m on p.mem_no = m.mem_no where m.mem_id != ?";

...

//세션 id값 가져와서 SQL 문에 넣어줌.
pstmt.setString(1, sessionId);

결과

++추가) sessionScope 이용해서 jsp 페이지에 세션값 보여주기

${sessionScope.id} 를 사용하면 세션에 저장된 id 값을 가져올 수 있다. 그럼 위처럼 메인에 현재 접속된 세션값 회원 이름을 출력할 수 있음!

<div class="text-center my-5">
  <h1 class="fw-bolder"> ${sessionScope.id} 회원님! 블로그 메인홈에 오신걸 환영합니다!</h1>
  <p class="lead mb-0">이곳에서는 나를 제외한 모든 블로거들의 글을 볼 수 있습니다.</p>
</div>

 

 


다음은 게시글 목록과 게시글 상세보기를 연결해보자.

 

▼ 진행중인 gitHub 링크를 남깁니다.

 

GitHub - k-haein/BlogPrj: 회원가입/로그인/게시글 등록 등의 블로그를 처음부터 만듭니다.

회원가입/로그인/게시글 등록 등의 블로그를 처음부터 만듭니다. Contribute to k-haein/BlogPrj development by creating an account on GitHub.

github.com

 

반응형
LIST

댓글