Giter Club home page Giter Club logo

simple-community-with-db's People

Contributors

chaemino avatar cwnu-djc avatar

Watchers

 avatar

simple-community-with-db's Issues

게시판 목록 구현

개요

게시판 목록을 구현한다.

결과

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});
     });
 });

페이지네이션 구현

개요

페이지네이션 구현에 대하여 이슈를 작성한다.
#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>

게시글 상세 페이지

개요

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

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

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)

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.