IT 프로젝트/블로그 만들기 11

[Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - 관리자(admin) 사용자(users) 페이지 만들기

관리자 페이지 기능 중 '사용자' 관리하는 페이지를 작성합니다. 기능 목록사용자 추가/조회 소스users.html사용자 사용자를 관리합니다. 입력 아이디 비밀번호 목록 UserName Enabled Colored by Color Scriptercs 아이디, 비밀번호를 입력한 후 저장할 수 있습니다.저장한 사용자는 테이블의 형태로 조회할 수 있습니다. users-js.html $(function(){ // Ajax call for category $.ajax({ method : 'GET', url: BASE_CONTEXT_PATH + 'users', }).done(function(result){ console.log(result); // Category tables $('#user_table').DataT..

[Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - 관리자(admin) 카테고리(category) 페이지 만들기

관리자 페이지 기능 중 '카테고리' 관리하는 페이지를 작성합니다. 기능 목록 카테고리 추가/변경/조회 소스category.html 카테고리 카테고리를 관리합니다. 입력 식별자 이름 순서 목록 Name Label Name Order No Colored by Color Scriptercs'template/admin' 경로에 'category.html' 페이지를 추가합니다. 식별자 이름 순서 Colored by Color Scriptercs 식별자, 이름, 순서를 입력하고 '저장' 버튼을 누르면 'POST' 형식으로 서버에 요청하여 카테고리가 데이터베이스에 저장됩니다. Name Label Name Order No 카테고리를 조회하기 위한 테이블입니다.스크립트에서 'DataTable' 라이브러리를 사용할 것 입..

[Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - 관리자(admin) index 페이지 만들기

블로그를 관리할 수 있도록 관리자 페이지를 작성하도록 하겠습니다. 기본 레이아웃으로 사용되고 있는 'index.html' 과 비슷한 형태로, 관리자 'index.html' 페이지를 만들고, 관리자가 필요한 페이지들을 포함하도록 할 것 입니다. 기능 목록 메뉴 선택 시 content 영역 페이지 호출 레이아웃 소스index.html HM & SB Blog - Admin Colored by Color Scriptercs 'templates/admin' 경로에 'index.html' 파일을 만들었습니다.기존에 생성한 사용자 'index.html' 페이지와 비슷한 구조로, 공통적으로 사용하는 영역을 기술하였고, 관리자 페이지에서 사용할 CSS, 페이지를 만들어서 포함 시켰습니다. sidebar.html ADMI..

[Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - 로그인(login) 페이지 만들기

작성 중인 '블로그 프로젝트' 에서는 기본적으로 '관리자' 가 작성한 글들을 '사용자' 가 읽을 수 있도록 합니다. 사용자는 주로 조회를 할 수 있고, 관리자는 카테고리 추가/수정/삭제, 글 추가/수정/삭제 등의 블로그 전체를 관리 할 수 있도록 합니다. 사용자가 아닌 관리자를 식별하기 위해서 로그인 기능이 필요합니다. 로그인 페이지를 구현하고, Spring boot Web Security 기능을 이용하여 어떤 기능으로 어떻게 처리 하는 지 소개하도록 하겠습니다. 참조 URL해피그램 - Spring Boot - Web Security 설정 방법 데이터베이스테이블 정의 users authorities 개체 관계 다이어그램(ERD) 데이터 정의어(DDL)CREATE TABLE `users` ( `userna..

[Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - 사이드바(sidebar) 만들기

sidebar 는 특정 페이지로 이동, 메인 페이지의 교체 등의 역할을 하고 있습니다. 이번 블로그 프로젝트에서는 메인 페이지의 교체의 역할을 하는 sidebar 를 구현하려고 합니다. sidebar 에는 category 를 표시할 것입니다. category 를 선택하는 경우 메인 페이지를 교체하도록 합니다. category 는 관리자가 추가, 변경, 삭제 가능하게 할 것이므로, 어플리케이션 구현 전에 데이터베이스 설계 및 생성이 필요합니다. 관리자에 대한 기능을 추후 작성할 예정입니다. 데이터베이스 테이블 정의 엔티티 DDL CREATE TABLE `category` ( `nm` varchar(100) NOT NULL COMMENT '카테고리 식별자', `label_nm` varchar(500) NOT..

[Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - Welcome 페이지 만들기

블로그를 방문 하였을 때 가장 처음 보이는 'Welcome' 페이지를 작성하도록 하겠습니다. 루트 컨텍스트 ("/") 요청이 있는 경우 back-end 인 controller 에서 welcome 페이지를 호출하도록 합니다. controller 패키지에 HomeController 를 추가할 것이고, templates 패키지에 content/welcome.html 파일을 추가할 것입니다. 프로젝트 및 패키지 구조는 이전 글을 참조 해주세요. 개발 환경 구성 소스 HomeController.java import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.b..

[Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - Resource 경로 지정

CSS, Javascript, Third Party library, Images 등의 resource 를 사용하기 위해서, 경로를 지정합니다.'resources/static' 패키지를 생성하고, 하위에 디렉터리를 생성해서 관리할 것입니다. 패키지 구조 소스WebMvcConfig.javaimport org.springframework.context.annotation.Configuration; import org.springframework.transaction.annotation.EnableTransactionManagement; import org.springframework.web.servlet.config.annotation.EnableWebMvc; import org.springframework...

[Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - index 페이지 작성 - UI 레이아웃 [Bootstrap + Thymeleaf]

Front-End 부분인 User Interface(UI) 를 구성하도록 하겠습니다. Bootstrap 을 이용하여 HTML + CSS 부분을 구성할 것이고, Template Engine 중 하나인 Thymeleaf 를 사용하여, 서버와 통신할 수 있도록 할 것입니다. Template Engine 중에 Thymeleaf 를 선택한 이유는 Spring Boot 와 잘 어울리는 Engine 으로 소개 되어 있고, 웹 사이트에 많은 참조 자료들이 있습니다. Dependencies Gradle 설정 파일인 build.gradle 의 dependencies 부분에 기본적으로 필요한 라이브러리들을 설정하도록 합니다. build.gradle buildscript { ext { springBootVersion = '2..

[Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - 개발 환경 구성 [Eclipse + Spring Boot + Gradle]

설치 Eclipse 설치 (Oxygen 혹은 Photon 버전 설치)https://www.eclipse.org/oxygen/ Eclipse Marketplace 에서 Spring Tools 설치 Eclipse Marketplace 에서 Gradle 설치 프로젝트 생성 Spring Boot 프로젝트는 Spring 공식 사이트에서 프로젝트 초기 생성을 지원하고 있습니다.공식 사이트에서 프로젝트 초기 생성을 진행하여 다운로드 받고, 그것을 Eclipse 로 Import 를 진행 하겠습니다.Spring Boot 프로젝트 생성https://start.spring.io/ 접속'Gradle Project' 선택 및 Group, Artifact 를 지정하고, 나머지는 기본값으로 진행합니다. Dependencies 에 ..

[Spring Boot] 스프링 부트 프로젝트/블로그 만들기 - 아키텍처, 개발 환경, 프로젝트 구조

아키텍처 Controller Layer : UI 에서 요청을 받고 응답을 전달 Service Layer : 비즈니스 로직을 구현Repository Layer : 데이터베이스에서 가져올 쿼리를 구현. JPA를 이용하는 경우 정해진 규칙에 따라서 메소드를 사용하거나, 만들어놓으면 적절한 쿼리를 수행할 수 있습니다.Domain Layer : 실제로 데이터베이스 물리 테이블과 1:1 매핑이 되어 바인딩 되어 있습니다.Controller 에서는 Service 를 호출해서 받은 결과를 UI 에 전달합니다.[Service -> Repository -> Domain] 처럼 각각 관련 있는 클래스를 호출하도록 설계합니다.Service 가 또 다른 Service 를 호출하지 않도록 주의하고, Service 에서 필요한 R..