[JSP] JSP 게시판 만들기 1강 준비

반응형

유튜브 동빈나님 JSP 게시판 강좌 따라하기

1강 설치 및 준비

저는 학원에서 자바를 배우고 JSP로 넘어가는 과정에서 코로나 덕분에 수업 일정이 밀려서 JSP를 혼자 공부하기 시작했습니다. 그런 여러 가지 조건이 겹쳐서 시작한 JSP는 저 혼자 공부하기에는 너무 벅찼습니다. 인강을 들어도 머리에 잘 들어오지도 않고 당연히 손에 익지도 않더라구요.

그러다가 발견한 유튜브 ‘동빈나’님 채널에 있는 JSP 게시판 만들기 강좌를 발견하였고, 그 동영상들을 보면서 무작정 JSP 게시판을 따라 만들었습니다. 솔직히 처음에는 잘 몰랐습니다. 이 과정들이 나에게 얼마나 도움이 될지 말이죠. 처음엔 너무 모르는 상태에서 따라 만들다 보니 무엇이 어떻게 돌아가는건지 잘 몰랐는데, 어쨌든 동빈나님의 JSP 게시판 만들기 강좌를 보며 따라했던 과정을 경험한 이후에 다른 곳에서 공부를 해보니 동빈나님의 강좌를 보며 게시판을 만들었던 과정이 결국 JSP공부를 하고 JSP를 이해함에 있어서 가장 저에게 도움이 되었다는 것을 깨달았습니다.

그래서 조금 느슨해졌다 싶으면 심심할 때 다시 동빈나님 강좌를 참고해서 JSP 게시판을 따라 만들었었는데 혹시 저와 비슷한 처지의 분들에게 조금이나마 도움을 드리고자 게시판 과정을 포스팅에 담기로 결정했습니다. 이번 포스팅은 그 첫 번째 과정입니다.

참고로 저는 MySQL이 아닌 MariaDB를 사용하는 중에 이 포스팅을 작성하다 보니 데이터베이스 프로그램이 다를겁니다. 하지만 MySQL과 MaridDB는 문법의 거의 같고 원래 같은 회사였기 때문에 따라하는 데는 문제가 없다고 판단되어 그대로 작성하기로 결정했습니다.

가장 먼저 [JDK] [이클립스] [아파치 톰캣] [MariaDB] 를 설치해야 합니다

설치가 되어 있지 않은 분은 아래 링크 참조 바랍니다

JDK 설치

https://happy-inside.tistory.com/10

이클립스 설치

https://happy-inside.tistory.com/15

아파치 톰캣 설치

https://happy-inside.tistory.com/78

MariaDB 설치(MySQL 대신 사용)

https://happy-inside.tistory.com/39

MySQL 을 사용해도 됩니다

MySQL 설치 링크는 아직 없어서 나중에 포스팅하면 추가하도록 하겠습니다

JSP 게시판 만들기 작업하기에 알맞는 퍼스펙티브로 전환하기

이클립스에서 [Window] – [Perpective] – [Open Perspective] – [Other] [Java EE (default)] – [Open]

## 웹 프로젝트 생성하기 ##

[탐색 창에서 마우스 우클릭] – [New] – [Dynamic Web Project]

1. 프로젝트명을 설정

2. 내가 설치한 톰캣에 맞게 설정

3. ‘Finish’ 를 누르면 새 프로젝트가 생성

## 정상적으로 실행이 되는지 확인하기 ##

기본적으로 지정된 작업폴더는 ‘WebContent’ 입니다

‘WebContent’ 클릭 후 마우스 우클릭

[New] – [JSP File]

‘index’라고 입력 후 ‘Finish’를 누르면 새로운 JSP 파일이 생성됩니다

1. 태그와 태그 사이에 아무 내용이나 입력합니다

2. 저장하기

3. 실행

최초 실행시에는 톰캣을 지정하는 안내 창이 나옵니다

아래 체크버튼을 체크해야 다음부터 뜨지 않습니다

[‘Always use this ….’ 체크] – [Finish]

정상적으로 설치가 되고 실행이 되었다면 입력했던 내용이 잘 나오는 것을 확인할 수 있습니다

https://happy-inside.tistory.com/category/%EC%BD%94%EB%94%A9/JSP%20%EA%B2%8C%EC%8B%9C%ED%8C%90

자기계발하는 개발자

‘인생최적화’

반응형

[Web] 26. 회원 관리 & 게시판 만들기 ① : 웹 프로젝트 생성 및 페이지 작성 전 환경 준비

반응형

https://github.com/upcake/Class_Examples

교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다.

gif 파일은 클릭해서 보는 것이 정확합니다.

– 회원 관리 & 게시판 만들기 ① : 웹 프로젝트 생성 및 페이지 작성 전 환경 준비 –

▲작업지시서

○ 클래스 폴더 설정

○ Package 생성 : member(회원 관리), board(게시판 관리)

▲패키지 목록

회원

관리 com.member.action 회원 관리의 Action Class com.member.study 회원 관리의 DTO, DAO, SQL(JDBC) com.member.mybatis (myBatis 사용할 경우 생성) 회원 관리의 DB FrameWork 게시판관리 com.board.action 게시판의 Action Class com.board.study 게시판의 DTO, DAO, SQL(JDBC) com.board.mybatis (myBatis 사용할 경우 생성) 게시판의 DB Framework 공용 com.commons.action Action Interface, ActionForward Class

○ View 폴더 생성

– board : 게시판의 JSP

– boardupload : 게시판에서 첨부한 파일이 저장되는 폴더

– member : 회원 관리의 JSP

○ DataBase Table 생성

–테이블 생성 CREATE TABLE boardMember( Member_id VARCHAR2(15) PRIMARY KEY NOT NULL, Member_pw VARCHAR2(15), Member_name VARCHAR2(15), Member_age NUMBER, Member_gender VARCHAR2(5), Member_email VARCHAR2(30) ); –테이블 조회 SELECT * FROM boardMember;

▲Member.sql

– boardMember Table : 회원 관리

–테이블 생성 CREATE TABLE memberBoard( Board_num NUMBER PRIMARY KEY NOT NULL, Board_id VARCHAR2(15), Board_subject VARCHAR2(50), Board_content VARCHAR2(2000), Board_file VARCHAR2(20), Board_re_ref NUMBER, Board_re_lev NUMBER, Board_re_seq NUMBER, Board_readcount NUMBER, Board_date DATE ); –제약조건 추가 ALTER TABLE memberBoard ADD CONSTRAINT pk_board_id FOREIGN KEY(Board_id) REFERENCES boardMember(Member_id); –테이블 조회 SELECT * FROM memberBoard;

▲Board.sql

– memberBoard Table : 게시판

○ FrontController Servlet 생성

package com.member.action; import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.commons.action.Action; import com.commons.action.ActionForward; @WebServlet(“/MemberFrontController.me”) public class MemberFrontController extends HttpServlet { protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String uri = request.getRequestURI(); String context = request.getContextPath(); String command = uri.substring(context.length()); //System.out.println(command); //콘솔 창에 /memberLogin.me 등이 출력된다. Action action = null; ActionForward forward = null; if(command.equals(“/memberLogin.me”)) { forward = new ActionForward(); forward.setPath(“member/loginForm.jsp”); forward.setRedirect(false); } else if(command.equals(“/memberLoginAction.me”)) { } else if(command.equals(“/memberJoin.me”)) { forward = new ActionForward(); forward.setPath(“member/joinForm.jsp”); forward.setRedirect(false); } else if(command.equals(“/memberJoinAction.me”)) { } if(forward != null) { if(forward.isRedirect()) { //true : sendRedirect() 전환 response.sendRedirect(forward.getPath()); } else { //false : forward() 전환 RequestDispatcher rd = request.getRequestDispatcher(forward.getPath()); rd.forward(request, response); } } } }

▲MemberFrontController.java

– URL Mapping : /MemberFrontController.me

package com.board.action; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet(“/BoardFrontController.bo”) public class BoardFrontController extends HttpServlet { protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } }

▲BoardFrontController.java

– URL Mapping : /BoardFrontController.bo

○ Servlet Mapping : web.xml

09.Member_Board index.html index.htm index.jsp default.html default.htm default.jsp MemberFrontController MemberFrontController com.member.action.MemberFrontController MemberFrontController *.me BoardFrontController BoardFrontController com.board.action.BoardFrontController BoardFrontController *.bo

▲web.xml

– MemberFrontController url-pattern : *.me

– BoardFrontController url-pattern : *.bo

○ DTO Class, DAO Class

– com.member.study : MemberDTO.java, MemberDAO.java

package com.member.study; import java.io.Serializable; public class MemberDTO implements Serializable { private String member_id, member_pw, member_name; private int member_age; private String member_gender, member_email; public MemberDTO() {} public MemberDTO(String member_id, String member_pw, String member_name, int member_age, String member_gender, String member_email) { super(); this.member_id = member_id; this.member_pw = member_pw; this.member_name = member_name; this.member_age = member_age; this.member_gender = member_gender; this.member_email = member_email; } public String getMember_id() { return member_id; } public void setMember_id(String member_id) { this.member_id = member_id; } public String getMember_pw() { return member_pw; } public void setMember_pw(String member_pw) { this.member_pw = member_pw; } public String getMember_name() { return member_name; } public void setMember_name(String member_name) { this.member_name = member_name; } public int getMember_age() { return member_age; } public void setMember_age(int member_age) { this.member_age = member_age; } public String getMember_gender() { return member_gender; } public void setMember_gender(String member_gender) { this.member_gender = member_gender; } public String getMember_email() { return member_email; } public void setMember_email(String member_email) { this.member_email = member_email; } }

▲MemberDTO.java

package com.member.study; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; public class MemberDAO { private Connection conn; private PreparedStatement ps; private ResultSet rs; public Connection getConn() { String url = “jdbc:oracle:thin:@127.0.0.1:1521:XE”; String user = “hanul”; String password = “0000”; try { Class.forName(“oracle.jdbc.driver.OracleDriver”); conn = DriverManager.getConnection(url, user, password); } catch (Exception e) { e.printStackTrace(); System.out.println(“getConn() Exception!!!”); } return conn; } //getConn() } //class

▲MemberDAO.java

– com.board.study : BoardDTO.java, BoardDAO.java

package com.board.study; import java.io.Serializable; public class BoardDTO implements Serializable { private int board_num; private String board_id, board_subject, board_content, board_file; private int board_re_ref, board_re_lev, board_re_seq, board_readcount; private String board_date; public BoardDTO() {} public BoardDTO(int board_num, String board_id, String board_subject, String board_content, String board_file, int board_re_ref, int board_re_lev, int board_re_seq, int board_readcount, String board_date) { super(); this.board_num = board_num; this.board_id = board_id; this.board_subject = board_subject; this.board_content = board_content; this.board_file = board_file; this.board_re_ref = board_re_ref; this.board_re_lev = board_re_lev; this.board_re_seq = board_re_seq; this.board_readcount = board_readcount; this.board_date = board_date; } public int getBoard_num() { return board_num; } public void setBoard_num(int board_num) { this.board_num = board_num; } public String getBoard_id() { return board_id; } public void setBoard_id(String board_id) { this.board_id = board_id; } public String getBoard_subject() { return board_subject; } public void setBoard_subject(String board_subject) { this.board_subject = board_subject; } public String getBoard_content() { return board_content; } public void setBoard_content(String board_content) { this.board_content = board_content; } public String getBoard_file() { return board_file; } public void setBoard_file(String board_file) { this.board_file = board_file; } public int getBoard_re_ref() { return board_re_ref; } public void setBoard_re_ref(int board_re_ref) { this.board_re_ref = board_re_ref; } public int getBoard_re_lev() { return board_re_lev; } public void setBoard_re_lev(int board_re_lev) { this.board_re_lev = board_re_lev; } public int getBoard_re_seq() { return board_re_seq; } public void setBoard_re_seq(int board_re_seq) { this.board_re_seq = board_re_seq; } public int getBoard_readcount() { return board_readcount; } public void setBoard_readcount(int board_readcount) { this.board_readcount = board_readcount; } public String getBoard_date() { return board_date; } public void setBoard_date(String board_date) { this.board_date = board_date; } }

▲BoardDTO.java

package com.board.study; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; public class BoardDAO { private Connection conn; private PreparedStatement ps; private ResultSet rs; public Connection getConn() { String url = “jdbc:oracle:thin:@127.0.0.1:1521:XE”; String user = “hanul”; String password = “0000”; try { Class.forName(“oracle.jdbc.driver.OracleDriver”); conn = DriverManager.getConnection(url, user, password); } catch (Exception e) { e.printStackTrace(); System.out.println(“getConn() Exception!!!”); } return conn; } //getConn() } //class

▲BoardDAO.java

○ Action Interface, ActionForward Class

package com.commons.action; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public interface Action { public ActionForward execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException; }

▲Action.java

package com.commons.action; public class ActionForward { private String path; //View 페이지 경로와 파일명 private boolean isRedirect; //전환 방식 public String getPath() { return path; } public void setPath(String path) { this.path = path; } public boolean isRedirect() { return isRedirect; } public void setRedirect(boolean isRedirect) { this.isRedirect = isRedirect; } }

▲ActionForward.java

○ Library 추가

반응형

3-06 Django로 게시판 만들기 – 게시판 페이지

게시판 만들기

지금부터 웹사이트의 기본인 게시판기능을 차근차근히 만들어보자.

목록 페이지 만들자

게시판의 글 목록이 있는 목록페이지를 만들어보자.

아래의 경로에 blog.html 파일을 만들어준다.

web_study/main/templates/main/blog.html

게시판 페이지입니다

페이지를 만들었으면 main 디렉토리 안의 view.py 파일을 만들어

우리가 만든 html 템플릿을 렌더링 해주는 함수를 만들어준다.

즉, 아래의 index 라는 함수는 서버에 요청이 들어왔을 시 index.html 을 렌더링 해서 우리에게 보여주는 역할을 한다.

web_study/main/views.py

from django.shortcuts import render # index.html 페이지를 부르는 index 함수 def index(request): return render(request, ‘main/index.html’) # blog.html 페이지를 부르는 blog 함수 def blog(request): return render(request, ‘main/blog.html’)

이제 이 views.py 에서 만든 함수와 우리가 사용할 url 을 연결해주어야 한다.

main/urls.py 파일을 하나 만들어서 아래와 같이 연결해주자.

from django.urls import path from .views import * app_name=’main’ urlpatterns=[ path(”,index), path(‘blog/’,blog), ]

이제 연결도 다 했으니, 다시 서버를 켜보자.

$ python manage.py runserver

서버를 키면 127.0.0.1:8000 의 주소에 index.html 로 구현한 메인 페이지가 나타나고,

127.0.0.1:8000/blog 로 접속하면 게시판 페이지가 뜰 것이다!

Model 만들기

우리는 게시판을 만들었지만 게시판에 넣을 게시글이 아직 없다. 게시글을 만들어보자 우리가 보통 생각하는 게시글에는 제목, 글 내용, 작성자 등의 여러가지 정보들이 저장된다.

그러면 이 정보들을 어떻게 서버에 저장하고, 어떻게 이용할 수 있을까?

장고에서는 Model 을 지원해준다.

이 모델을 이용해 게시판에서 각각의 게시글이 데이터베이스에 어떻게 저장될지를 정해준다.

다시 말해 모델이란 붕어빵을 만드는 틀이라고 생각하면 편하다.

게시글이라는 틀을 하나 만들면 그 틀을 이용해서 여러가지 게시글(게시글1, 게시글2, …)을 만들고,

만들어진 게시글들을 데이터베이스에 저장할 것이다.

우리가 해볼것은 제목과 내용이 존재하는 간단한 게시글이다.

Post (게시글) 마다 postname (제목), contents (내용)이 존재한다.

이를 파이썬으로 구현해보자

우리는 게시글이라는 하나의 모델을 만들어야 하기 때문에 models.py 로 가보자 web_study/main/models.py

from django.db import models # Create your models here. # 게시글(Post)엔 제목(postname), 내용(contents)이 존재합니다 class Post(models.Model): postname = models.CharField(max_length=50) contents = models.TextField()

모델을 만들었고 이제 이 모델을 데이터베이스에 넣어 장고가 저장할 수 있도록 해준다.

즉, django 의 db에 migrate 해준다.

일반적인 경우 model.py 를 수정했다면 바로바로 migrate 해주어서 우리가 만든 빵틀을 데이터베이스에 저장한다.

Ctrl + C 를 눌러 웹서버를 종료 후 migration

$ python manage.py makemigrations $ python manage.py migrate

Admin 에 권한

관리자( admin )가 게시글( Post )에 접근할 권한을 준다.

게시글 게시, 삭제, 수정, 저장 등 여러 작업을 할 수 있게 해준다.

web_study/main/admin.py

from django.contrib import admin # 게시글(Post) Model을 불러옵니다 from .models import Post # Register your models here. # 관리자(admin)가 게시글(Post)에 접근 가능 admin.site.register(Post)

하지만 우리는 admin 계정이 없어서 확인할 수가 없다. 관리자 계정을 만들어보자!

Superuser 만들기

Superuser 는 django 프로젝트의 모든 app 및 object 를 관리하는 계정이다.

manage.py 를 통해 Superuser 계정이 생성되며

username , email address , 그리고 강한 password 가 필요하다.

& python3 manage.py createsuperuser

아래와 같이 Superuser 계정을 생성한다.

예측하기 쉬운 비밀번호의 경우 django 가 확인해서 재설정 해줘야한다.

서버를 키고 생성한 Superuser 계정을 확인한다.

$ python3 manage.py runserver

http://자신의URL:8000/admin 으로 접속한다.

Superuser 의 아이디와 비밀번호를 입력해 관리자 페이지로 들어간다.

게시글 작성하기

add 버튼을 눌러 게시글을 작성해보자.

게시글을 하나 더 작성해서 2개의 게시글을 만들어보자.

postname 과 contents 를 구분하기 위해 다른 내용으로 작성하자.

현재 코드에서 게시글을 작성하면

게시글 제목이 나오지 않고 Post object(1), (2) 로 나온다.

이를 postname 이 Post object 대신 들어가도록 개선해보자.

이땐 게시글( Post )의 model 을 개선하자.

web_study/main/models.py

from django.db import models # Create your models here. # 게시글(Post)엔 제목(postname), 내용(contents)이 존재합니다 class Post(models.Model): postname = models.CharField(max_length=50) contents = models.TextField() # 게시글의 제목(postname)이 Post object 대신하기 def __str__(self): return self.postname

안의 내용을 알 수 없는 Post Object 대신

게시글( Post )의 제목( postname )으로 바꾸었다.

목록( blog )페이지에 게시판 보여주자

입력한 게시글을 페이지에 띄워보자

web_study/main/views.py

View ( blog 함수)가 Model ( Post 게시글)을 가져온다.

from django.shortcuts import render # View에 Model(Post 게시글) 가져오기 from .models import Post # index.html 페이지를 부르는 index 함수 def index(request): return render(request, ‘main/index.html’) # blog.html 페이지를 부르는 blog 함수 def blog(request): # 모든 Post를 가져와 postlist에 저장합니다 postlist = Post.objects.all() # blog.html 페이지를 열 때, 모든 Post인 postlist도 같이 가져옵니다 return render(request, ‘main/blog.html’, {‘postlist’:postlist})

web_study/main/templates/main/blog.html

Template ( index.html )에 Model ( Post 게시글)을 붙여주자.

(14) 웹사이트 메인 페이지 디자인