320x100 Projects38 글 작성 기능 제작 먼저 글 작성 버튼을 만들어줘야 한다. HTML 글쓰기 CSS #wrap-upper{ height: 40px; width: 1180px; margin: 0 auto; } 버튼은 예쁜 부트스트랩의 것을 그대로 사용할 것이다. 이제 글쓰기 페이지를 작성한다. ejs 글쓰기 글쓰기 취소 자유게시판 유머게시판 CSS #wrap-inner-post{ margin: auto; display: flex; justify-content: center; flex-direction: column; } #write-box{ height: 900px; max-width: 900px; min-width: 900px; border: solid 1px gray; display: flex; flex-direction: column; .. 2021. 2. 25. 글 조회 페이지 작성 먼저 사이드바에 각 게시판으로 이동하기 쉽도록 카테고리를 만들고 링크를 건다. 전체글 보기 자유게시판 유머게시판 그리고 글 리스트에서 해당 글의 제목을 누르면 글로 이동할 수 있도록 링크를 걸어둔다. 링크는 글의 ID를 기준으로 생성한다. 그리고 해당 링크를 클릭했을 때 나오는 조회 페이지의 레이아웃을 작성했다. view.ejs 글 제목 작성자 / 게시판 조회수 본문 내용 (추천수) 추천하기버튼 style.css #view-left{ min-height: 500px; max-width: 900px; min-width: 900px; margin-right: 30px; } #wrap-inner-view{ padding-top: 150px; min-height: 1100px; display: flex; jus.. 2021. 2. 24. 테이블 생성과 게시판별 조회 기능 먼저 글 정보를 담기 위한 POST 테이블을 만들 것이다. POST테이블의 칼럼은 다음과 같이 생각하고 있다. ID : 글을 구별하기 위한 ID 값 TITLE : 글 제목 AUTHOR : 글쓴이 TYPE : 게시판 종류 CONTENT : 글 내용 VIEWS : 조회수 PASSWORD : 익명으로 글 작성시 글 삭제를 위한 비밀번호(추후 적용 예정) isLogined : 익명으로 쓰인 글인지, 로그인하고 쓰인 글인지 bool 타입 THUMBUP : 추천수 다음은 해당 테이블을 생성하기 위한 쿼리이다. CREATE TABLE `POST` ( `ID` INT NOT NULL AUTO_INCREMENT, `TITLE` VARCHAR(45) NOT NULL, `AUTHOR` VARCHAR(45) NOT NULL,.. 2021. 2. 23. 기본적인 라우팅과 MySQL DB 연동 먼저 최상위 도메인인 / 으로 접속했을 경우 자동으로 /list로 리다이렉트 하여 전체글보기 화면을 띄울 수 있도록 했다. 또한 /list로 접속 시 list-all.ejs를 렌더링한다. list-all.ejs는 이전의 index.ejs이다. 사이드바와 상단 네비게이션 바는 어떤 페이지든 들어가기 때문에 다른 파일로 분리해줬다. 그리고 글 조회 페이지도 일단 껍데기만 만들어 놓았다. 임시로 만든 글 조회 페이지에서는 title값을 받아와서 렌더링한다. 그리고 MySQL DB를 연결하기 위해 npm으로 mysql모듈을 설치한다. db연결을 테스트해보기 위한 db-connect.js 파일이다. 해당 파일을 node 명령어로 따로 실행시켜보면, 이렇게 임시로 저장해 놓은 값이 잘 불러와진다. 주의할 점은 지금.. 2021. 2. 22. 이전 1 2 3 4 5 6 7 8 ··· 10 다음
