Git Product home page Git Product logo

simple-community-with-db's Introduction

DBMS를 활용한 게시판 웹 페이지 구축

이름: 오채민
학번: 20190111

수고하셨습니다. README를 잘 쓰네요.

과제 개요

  • 창원대학교 최도진 교수님의 데이터베이스 개론(2023-1) 강의 과제
  • DBMS를 활용하여 게시판 웹 페이지를 구축한다.

기능

게시판의 기능은 다음과 같다.

no. 기능명 내용 및 조건
1 전체 게시글 조회 - 한 페이지에 모든 게시글을 조회하지 않고, N개 단위로 나누어 페이징(SQL 구현)한다.
- 내용/댓글을 제외한 모든 내용을 리스트로 확인 가능하다.
2 게시글 상세 조회 - 모든 내용과 댓글을 조회한다.
3 게시글 작성 - 작성자, 제목, 내용, 작성일자, 고유 번호가 포함되어야 한다.
4 게시글 삭제 - 게시글은 삭제 가능하다.
- 게시글을 삭제하는 경우 댓글도 같이 삭제되어야 한다.
5 댓글 작성 - 게시글에 대한 댓글을 작성할 수 있다.
- 댓글에 대한 댓글 기능은 제공하지 않는다.
- 댓글에는 작성자, 시간, 내용이 포함된다.
6 댓글 삭제 - 댓글은 삭제 가능하다.

동작

  1. 페이지네이션

pagenation

  1. 게시글 작성

게시글작성

  1. 게시글 삭제

게시글삭제

  1. 댓글 작성 및 삭제

댓글작성삭제

개발 환경 조건

  • RDBMS: MariaDB
  • Frontend: HTML / Web Framework(사용 가능)
  • Backend: node.js
    • node.js 내에서 SQL을 구현할 것(native한 SQL 사용)


개발 환경

OS: Ubuntu 18.04.3 LTS

brew를 이용한 node.js 최신 버전 설치

$ brew search node

==> Formulae
libbitcoin-node      node                 node@10              node@18              nodeenv
linode-cli           node-build           node@14              node_exporter        nodenv
llnode               node-sass            node@16              nodebrew             ode

==> Casks
capslocknodelay                    nodebox                            nodeclipse

If you meant "node" specifically:
It was migrated from homebrew/cask to homebrew/core.
ochaemin@ocms-Macmini:cwnu-db-make-community
$ brew install node@18

환경 변수 설정

  • .bashrc
export PATH="/usr/local/opt/node@18/bin:$PATH"
export LDFLAGS="-L/usr/local/opt/node@18/lib"
export CPPFLAGS="-I/usr/local/opt/node@18/include"


ERD

DB_community_수정



디렉토리 구조

.
├── README.md
├── maria
├── node_modules
├── package-lock.json
├── package.json
├── test.md
└── web

maria: DB 설정 디렉토리 web: 웹 프론트엔드 & 백엔드 디렉토리

  • maria/
maria/
├── maria.js
├── node_modules
├── package-lock.json
└── package.json

maria.js: mariaDB 연결 및 테이블 만들기

  • web/
web/
├── app.js
├── node_modules
├── package-lock.json
├── package.json
├── test.html
└── views

app.js: 백엔드 코드

  • views/
web/views
├── detail-page.ejs
├── mainpage.ejs
├── test.ejs
└── write-page.ejs

detail-page.ejs : 게시글 상세 페이지
mainpage.ejs: 메인페이지
write-page.ejs: 게시글 작성 페이지

simple-community-with-db's People

Contributors

chaemino avatar cwnu-djc avatar

Watchers

 avatar

simple-community-with-db's Issues

페이지네이션 구현

개요

페이지네이션 구현에 대하여 이슈를 작성한다.
#3 이슈의 코드를 수정한다.

진행

mainpage.ejs

image
   <center>
      <div class="page">
        <ul class="page-item">
          <li> <a href="#" class="num">1</a></li>
          <li> <a href="#" class="num">2</a></li>
          <li> <a href="#" class="num">3</a></li>
          <li> <a href="#" class="num">4</a></li>
          <li> <a href="#" class="num">5</a></li>
        </ul>
      </div>
    </center>

TypeError: Cannot read properties of undefined (reading 'username')

SQL INSERT문을 실행하려고 할 때, 정의되지 않은 값을 사용한다는 다음 ERROR가 발생했다.

undefined
TypeError: Cannot read properties of undefined (reading 'username')
    at /Users/ochaemin/workspace/cwnu-db-make-community/web/app.js:34:23
    at Layer.handle [as handle_request] (/Users/ochaemin/workspace/cwnu-db-make-community/web/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/ochaemin/workspace/cwnu-db-make-community/web/node_modules/express/lib/router/route.js:144:13)
    at Route.dispatch (/Users/ochaemin/workspace/cwnu-db-make-community/web/node_modules/express/lib/router/route.js:114:3)
    at Layer.handle [as handle_request] (/Users/ochaemin/workspace/cwnu-db-make-community/web/node_modules/express/lib/router/layer.js:95:5)
    at /Users/ochaemin/workspace/cwnu-db-make-community/web/node_modules/express/lib/router/index.js:284:15
    at Function.process_params (/Users/ochaemin/workspace/cwnu-db-make-community/web/node_modules/express/lib/router/index.js:346:12)
    at next (/Users/ochaemin/workspace/cwnu-db-make-community/web/node_modules/express/lib/router/index.js:280:10)
    at expressInit (/Users/ochaemin/workspace/cwnu-db-make-community/web/node_modules/express/lib/middleware/init.js:40:5)
    at Layer.handle [as handle_request] (/Users/ochaemin/workspace/cwnu-db-make-community/web/node_modules/express/lib/router/layer.js:95:5)

게시글 상세 페이지

개요

게시글 상세 페이지를 구현한다.

  1. 메인페이지(#3)에서 게시글 제목을 누르면 해당 게시글의 상세 페이지로 이동한다.
  2. 상세 페이지에서는 게시글의 정보와 댓글을 확인할 수 있다.
  3. 댓글은 삭제가 가능하다.

게시판 목록 구현

개요

게시판 목록을 구현한다.

결과

image

진행

mainpage.ejs

      <div class="post-list">
       <!-- 게시글 목록 -->
         <table id="board">
           <thead>
             <tr>
               <th style="width: 10%; height: 6vh;">게시글 번호</th>
               <th style="width: 40%; height: 6vh;">제목</th>
               <th style="width: 20%; height: 6vh;">작성 일자</th>
               <th style="width: 10%; height: 6vh;">작성자</th>
             </tr>
           <thead>
           <!-- 게시글 목록 보여주는 ejs -->
           <tbody>
             <% for (i=0; i<list.length; i++) { %>
             <tr>
               <td><%=list[i].게시글ID%></td>
               <td style="text-align:left"><%=list[i].제목%></td>
               <td><%=list[i].작성일자%></td>
               <td><%=list[i].작성자%></td>
             </tr>
             <% } %>
           <tbody>
        </table>
       </div>
app.get('/products/:page', (req, res) => {
     const page_size = 3; // 각 페이지의 최대 항목 수
     const page = req.params.page || 1 // if page is null then 1, 현재 페이지 번호
     console.log(page);

     const sql = 'SELECT * FROM 게시글';
     maria.query(sql, (err, rows, fields) => {
         for(let i=0; i<rows.length; i++){
             console.log('rows'+JSON.stringify(rows[i]));
             rows[i].작성일자 = moment(rows[i].작성일자).format('YYYY-MM-DD');
         }
         console.log("rows: "+rows[1].date);
         if (err) cosole.log('QUERY FAIL\n' + err);
         else res.render('mainpage.ejs', {list:rows});
     });
 });

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.