본문 바로가기
Web-Node.js/간단한 익명게시판 만들기

3. 각 화면 구성

초보개발자뀨 2021. 3. 24. 16:40

레이아웃 엔진은 ejs를 사용하였습니다.

ejs는 views폴더안에  js파일은 js폴더안 css는 style폴더 안에 넣어줬습니다.

board.ejs - 글들을 보여주는 화면입니다.

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/style/board.css">
        <title>문의 게시판</title>

    </head>
    <body>
        <div class="head">
            <h2>예제 게시판!!</h2>
            <p>CRUD 예제 익명 게시판 입니다용!</p>
        </div>

        <div class="content">
            <table border='1' id="list">
                <colgroup>
                    <col style="width: 10%;">
                    <col style="width: 50%;">
                    <col style="width: 20%;">
                    <col style="width: 20%;">
                </colgroup>
                <thead>
                    <tr>
                        <th>순번</th>
                        <th>제목</th>
                        <th>작성자</th>
                        <th>작성일</th>
                    </tr>
                </thead>

                <tbody >

                    <% for(i = 0; i < list.length; i++) { %>
                        <tr>
                            <td name="order"><%=i+1 %></td>
                            <td>
                                <a href="/read/<%=list[i].id %>"><%=list[i].title %></a>
                            </td>
                            <td name="name"><%=list[i].writer%></td>
                            <td><%=list[i].date%>
                            </td>
                        </tr>
                    <% } %>
                </tbody>

            </table boader='1'>

            <button id="btn_write" onclick="location.href='../write'">글쓰기</button>
        </div>

        <script src="/js/board.js"></script>
    </body>
</html>

 

board.css

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@800&display=swap');


.head {
    font-family: 'Nanum Gothic', sans-serif;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    color: white;
    background-color: #a7acf1;
    height: 250px;
    width: 1300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    padding: 0px;
    
}

.head h2 {
    padding-bottom: 10px;
    font-size: 40px;
    border-bottom: 2px solid white;
}
.head p {
    font-size: 30px;
}

.content {
    font-family: 'Nanum Gothic', sans-serif;
    height: 800px;
    background-color: rgb(220, 247, 255);
    width: 1300px;
    display: flex;
    margin: auto;
    flex-direction: column;
    align-items: center;
}

table {
    margin-top: 30px;
    font-size: 15px;
    font-weight: bold;
    width: 1200px;
    
}
tr{
    text-align: center;
}

#btn_write {
    border-radius: 20px;
    font-weight: bold;
    font-size: large;
    height: 50px;
    margin-top: 150px;
    width: 600px;
 
}
th{
    padding: 10px;
    font-size: 20px;
}
td{
    font-size: 15px;
}
td a{
    text-decoration: none;
}


@media(min-width: 320px) and (max-width: 480px){


    .head {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        color: white;
        background-color: #a7acf1;
        height: 250px;
        width: 412px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto;
        padding: 0px;
        
    }
    
    .head h2 {
        padding-bottom: 10px;
        font-size: 40px;
        border-bottom: 2px solid white;
    }
    .head p {
        font-size: 25px;
    }
    
    .content {
        height: 800px;
        background-color: rgb(220, 247, 255);
        width: 412px;
        display: flex;
        margin: auto;
        flex-direction: column;
        align-items: center;
    }
    
    table {
        margin-top: 30px;
        font-size: 15px;
        font-weight: bold;
        width: 412px;
        
    }
    tr{
        text-align: center;
    }
    
    #btn_write {
        border-radius: 20px;
        font-weight: bold;
        font-size: large;
        height: 50px;
        margin-top: 150px;
        width: 400px;
     
    }
    th{
        padding: 10px;
        font-size: 20px;
    }
    td{
        font-size: 15px;
    }
    td a{
        text-decoration: none;
    }
    
}

 

 

write.ejs - 글쓰기 버튼을 눌럿을 시 글 작성 화면입니다.

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/style/write.css">
        <title>글쓰기</title>
    </head>
    <body>
        <form name ='write_form' action='/writeAf' method='post'>
            <div class="content">
                <h2>게시글 작성</h2>
            
                    <div class="input_type">  
                        <label id="label_title"> 제목</label>
                        <input id="input_title" name = "title" type="text"> 
                    </div>

                    <div class="input_type">  
                        <label> 작성자</label>
                        <input id="input_writer"  name = "writer" type="text"> 
                    </div>

                    <div class="input_type">  
                        <label> 내용</label>
                        <textarea id="input_text" style="font-size: 15px;" name="context" id="" cols="70" rows="20"></textarea>
                    
                    </div>

                    <div class="input_type">  
                        <label  > 비밀번호</label>
                        <input  id ="input_password" name = "password" type="password"> 
                    </div>

                    <p style="font-size: 10px;">나쁜말 작성 시 사전동의 없이 삭제 될 수 있습니다.</p>
                    <p style="font-size: 10px;">비밀번호 분실 시에는 전화주세욧!.</p>
                
                
                    <button type="button" id='btn_submit'>글쓰기</button>
            </div>
        </form>
        
      <script src="/js/write.js"></script>
    </body>
</html>

 

write.css

h2 {
    text-align: center;
    width: 100%;
    border-bottom: 2px solid lightgray;
    padding-bottom: 10px;
}

.content {
    font-family: 'Nanum Gothic', sans-serif;
    padding: 20px;
    border: rgb(88, 86, 86) solid 2px;
    font-size: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 700px;
    margin: auto;
    justify-content: space-evenly;
}

.input_type {
    border-bottom: 1px solid lightgray;
    width: 100%;
    padding-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    justify-content: flex-start;
}

#label_title {
    margin-right: 20px;
}

#input_password {
    margin-left: 120px;
}

.input_type input {
    font-size: 20px;
    width: 400px;
    margin-left: 140px;
}

.input_type textarea {
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 20px;
    width: 400px;
    margin-left: 160px;
    resize: none;
}

#btn_submit {
    margin-top: 30px;
    border-radius: 20px;
    font-size: 20px;
    width: 100px;
}

@media(min-width: 320px) and (max-width: 480px) {

    h2 {
        text-align: center;
        width: 100%;
        border-bottom: 2px solid lightgray;
        padding-bottom: 10px;
    }

    .content {
        height: 100%;
        border: rgb(88, 86, 86) solid 2px;
        font-size: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 390px;
        margin: auto;
        justify-content: space-evenly;
    }

    .input_type {
        border-bottom: 1px solid lightgray;
        width: 412px;
        padding-bottom: 10px;
        font-size: 15px;
        font-weight: bold;
        display: flex;
        align-items: center;
        margin-bottom: 30px;

    }

    #label_title {
        margin-right: 20px;
    }

    .input_type input {
        font-size: 15px;
        width: 200px;
        margin-left: 50px;
    }

    .input_type textarea {
        font-weight: bold;
        font-size: 15px;
        width: 300px;
        margin-left: 30px;
        resize: none;
    }

    #btn_submit {
        margin-top: 30px;
        border-radius: 20px;
        font-size: 20px;
        width: 100px;

    }

}

write.js

const btn_submit =  document.getElementById("btn_submit");
const title = document.getElementById("input_title");
const writer = document.getElementById("input_writer");
const text = document.getElementById("input_text");
const password = document.getElementById('input_password');

btn_submit.addEventListener('click',function(){
    if(!text.value) {
        alert("내용을 입력해주세요");
    }
    else if(!title.value){
        alert("제목을 입력해주세요");
    }
    else if(!writer.value){
        alert("작성자을 입력해주세요");
    }
    else if(!password.value){
        alert("비밀번호를 입력해주세요");
    }
    else {
        document.write_form.submit();
    }

});

 

 

read.ejs - 글을 클릭 했을 시 상세 내용을 보여줄 화면입니다. footer태그로 댓글들을 보여줄 show.ejs를 포함시켜주었습니다.

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/style/read.css">
        <title>글쓰기</title>
    </head>
    <body>
        <div id="list" ,="," class="<%=list[0].password%>"></div>
        <div class="content">
            <h2>게시물 보기</h2>

            <div class="input_type">
                <label id="label_title">
                    제목</label>
                <input readonly="readonly" type='text' name="title" value="<%=list[0].title%>">
            </div>

            <div class="input_type">
                <label >
                    작성자</label>
                <input readonly="readonly" type='text' name="name" value="<%=list[0].writer%>">
            </div>

            <div class="input_type">
                <label >
                    내용</label>
                <textarea readonly="readonly" name="content" id="content" cols="70" rows="20"><%=list[0].context%></textarea>
            </div>

            <div class="btn">
                <button class='<%=list[0].id%>' id="update" name="123">수정</button>
                <button id="delete">삭제</button>
            </div>
        </div>

        <footer>
            <%- include('show')%>
            </footer>

            <script src="/js/read.js"></script>

        </body>
    </html>

 

read.css

h2 {
    text-align: center;
    width: 100%;
    border-bottom: 2px solid lightgray;
    padding-bottom: 10px;
}

.content {
    padding: 20px;
    border: rgb(88, 86, 86) solid 2px;
    font-size: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 700px;
    margin: auto;
    justify-content: space-evenly;
}

.input_type {
    border-bottom: 1px solid lightgray;
    width: 100%;
    padding-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    justify-content: flex-start;
}

#label_title {
    margin-right: 20px;
}

.input_type input{
    font-size: 20px;
    width: 400px;
    margin-left: 140px ;
}

.input_type textarea{
    font-weight: bold;
    font-size: 20px;
    width: 400px;
    margin-left: 160px;
    resize: none;
}



#btn_submit{
    margin-top: 30px;
    border-radius: 20px;
    font-size: 20px;
    width: 100px;
    
}


@media(min-width: 320px) and (max-width: 480px){


    h2 {
        text-align: center;
        width: 100%;
        border-bottom: 2px solid lightgray;
        padding-bottom: 10px;
    }
    
    .content {
        height: 100%;
        border: rgb(88, 86, 86) solid 2px;
        font-size: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 390px;
        margin: auto;
        justify-content: space-evenly;
    }
    
    .input_type {
        border-bottom: 1px solid lightgray;
        width: 412px;
        padding-bottom: 10px;
        font-size: 15px;
        font-weight: bold;
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        
    }
  
    
    #label_title {
        margin-right: 20px;
    }
    
    .input_type input{
        font-size: 15px;
        width: 200px;
        margin-left: 50px ;
    }
    
    .input_type textarea{
        font-weight: bold;
        font-size: 15px;
        width: 300px;
        margin-left: 30px;
        resize: none;
    }
    
    
    
    #btn_submit{
        margin-top: 30px;
        border-radius: 20px;
        font-size: 20px;
        width: 100px;
        
    }
    
    


}

 

read.js

const btn_update = document.getElementById('update');
const btn_delete = document.getElementById('delete');
const list = document.getElementById('list');
let number = btn_update.className;
const db_password =list.className;


btn_update.addEventListener('click',function(){
    if(db_password === null){
    alert("수정하시겠습니까?");
    let url='/read/update/'+number;
    location.href=url;
    }
    else if(db_password !==null) {
        let password = prompt("비밀번호를 입력해주세요");
    
        if(password == db_password) {
            let url='/read/update/'+number;
            location.href=url;
        }

        else {
            alert("비밀번호가 맞지 않습니다 다시 입력해주세요");
        }
    
        }
});

btn_delete.addEventListener('click',function() {

    if(db_password === null){
        alert("삭제되었습니다.");
        let url='/read/remove/'+number;
        location.href=url;
    }
    else if(db_password !==null) {
    let password = prompt("비밀번호를 입력해주세요");

    if(password == db_password) {
        alert("삭제되었습니다.");
        let url='/read/remove/'+number;
        location.href=url;
    }

    else {
        alert("비밀번호가 맞지 않습니다 다시 입력해주세요");
    }

    }
   

});

update.ejs - read.ejs에서 수정 버튼을 누를 시 글 수정화면으로 이동하여 보여줄 화면입니다.

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/style/update.css">
        <title>글쓰기</title>
    </head>
    <body>
        <form action='/updateAf' method='post'>
            <div class="content">
                <h2>게시글 작성</h2>
            
                    <div class="input_type">  
                        <label id="label_title"> 제목</label>
                        <input  name = "title" type="text" value="<%=list[0].title%>"> 
                    </div>

                    <div class="input_type">  
                        <label>닉네임</label>
                        <input readonly name = "writer" value="<%=list[0].writer%>" type="text"> 
                    </div>

                    <div class="input_type">  
                        <label >내용</label>
                        <textarea  name="context" id="" cols="70" rows="20"><%=list[0].context%></textarea>
                    
                    </div>

                    <button name="id" value="<%=list[0].id%>" id='btn_submit' type='submit'>수정하기</button>
            </div>
        </form>
        
      <script src="/js/update.js"></script>
    </body>
</html>

update.css

h2 {
    text-align: center;
    width: 100%;
    border-bottom: 2px solid lightgray;
    padding-bottom: 10px;
}

.content {
    padding: 20px;
    border: rgb(88, 86, 86) solid 2px;
    font-size: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 700px;
    margin: auto;
    justify-content: space-evenly;
}

.input_type {
    border-bottom: 1px solid lightgray;
    width: 100%;
    padding-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    justify-content: flex-start;
}

#label_title {
    margin-right: 20px;
}

.input_type input {
    font-size: 20px;
    width: 400px;
    margin-left: 140px;
}

.input_type textarea {
    font-weight: bold;
    font-size: 20px;
    width: 400px;
    margin-left: 160px;
    resize: none;
}

#input_number {
    display: none;
}

#btn_submit {
    margin-top: 30px;
    border-radius: 20px;
    font-size: 20px;
    width: 100px;

}

@media(min-width: 320px) and (max-width: 480px) {

    h2 {
        text-align: center;
        width: 100%;
        border-bottom: 2px solid lightgray;
        padding-bottom: 10px;
    }

    .content {
        height: 100%;
        border: rgb(88, 86, 86) solid 2px;
        font-size: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 390px;
        margin: auto;
        justify-content: space-evenly;
    }

    .input_type {
        border-bottom: 1px solid lightgray;
        width: 412px;
        padding-bottom: 10px;
        font-size: 15px;
        font-weight: bold;
        display: flex;
        align-items: center;
        margin-bottom: 30px;

    }

    #label_title {
        margin-right: 20px;
    }

    .input_type input {
        font-size: 15px;
        width: 200px;
        margin-left: 50px;
    }

    .input_type textarea {
        font-weight: bold;
        font-size: 15px;
        width: 300px;
        margin-left: 30px;
        resize: none;
    }

    #btn_submit {
        margin-top: 30px;
        border-radius: 20px;
        font-size: 20px;
        width: 100px;

    }

}

 

 

show.ejs - 댓글들을 보여줄 화면입니다.

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/style/show.css">
        <title>글쓰기</title>
    </head>
    <body>
        <form name= "sub_form" action="/read/sub/insert" method="POST">
            <div class="sub_content">
                    <h3>댓글</h3>
                    <div class="input">
                            <label> 작성자</label>
                            <input  name ="sub_writer" type="text">

                            <label > 내용</label>
                            <input name = "sub_context" type="text">

                            <label > 비밀번호</label>
                            <input  id="sub_password" name = "sub_password" type="password">

                            <button id="btn_sub_insert" type="button">댓글 달기</button>
                    </div>

                    <div class="sub_board">

                        <% for(i = 0; i < sub_list.length ; i++) { %>
                            <div class="show_sub_board">
                                <label class="<%=sub_list[i].spassword%>" id="sub_writer" ><%=sub_list[i].swriter%></label>
                                <p id="sub_text"><%=sub_list[i].scontext%></p>
                                <div class="btn">
                                    <button  id="<%=sub_list[i].spassword%>"onclick="sub_update(this.id,<%=sub_list[i].sid%>)" type="button" >수정</button>
                                    <button id ="<%=sub_list[i].spassword%>"onclick="sub_delete(this.id,<%=sub_list[i].sid%>)" type="button">삭제</button>
                                </div>
                            </div>
                        <% } %>
                    </div>
            </div>
        </form>

      <script src="/js/show.js"></script>  
      
    </body>
</html>

 

show.css

.sub_content {
    padding: 20px;
    border: rgb(88, 86, 86) solid 2px;
    font-size: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 700px;
    margin: auto;
    justify-content: space-evenly;

}
label {
    font-size: 15px;
}

#text {
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
}

.show_sub_board {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-top: lightgray 1px solid;
    border-bottom: lightgray 1px solid;
    margin-bottom: 10px;
}

.sub_board {
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

}
#sub_writer {
    margin-top: 10px;
}
#sub_text {
    font-size: 20px;
}
.sub_content input {
    width: 130px;
}

.btn {
    margin-top: 20px;
    display: flex;

}
#btn_delete {
    margin-left: 20px;
}
@media(min-width: 320px) and (max-width: 480px) {
    }

 

show.js

const btn_sub_insert = document.getElementById('btn_sub_insert');
const sub_password = document.getElementById('sub_password');

btn_sub_insert.addEventListener('click', function () {

    if (!sub_password.value) {

        alert("비밀번호를 입력해주세요.");
    } else {
        alert("댓글이 입력되었습니다.");
        document
            .sub_form
            .submit();
    }
});

function sub_delete(sub_pwd, sub_id) {

    let pwd = prompt("비밀번호를 입력해주세요");
    if (pwd == sub_pwd) {
        alert("삭제되었습니다.");
        let url = '/read/sub/remove/' + sub_id;
        location.href = url;
    } else {
        alert("비밀번호를 다시 입력해주세요");
    }

}

function sub_update(sub_pwd,sub_id) {
    
    let pwd = prompt("비밀번호를 입력해주세요");
    if (pwd == sub_pwd) {
        let url = "/read/sub/update/"+sub_id;
        let name = "popup test";
        let option = "width = 500, height = 500, top = 100, left = 200, location = no"
        window.open(url, name, option);
    
    }
    else {
        alert("비밀번호를 다시 입력해주세요");
    }
}

 

sub_update.ejs - 댓글 수정 버튼을 누를시 보여질 화면입니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/style/sub_update.css">
        <title>댓글 수정</title>
    </head>
    <body>
        <form name = 'sub_update_form' action='/sub_updateAf' method="POST">
            
            <div class="input">
                <h2>수정할 댓글을 입력해주세요.</h2>
            
                <textarea name="sub_context"><%=sub_list[0].scontext%></textarea>
                <input type="hidden" value ="<%=sub_list[0].sid%>" name ="number">
                <div class="btn"> 

                    <button  type="button" onclick="update()">수정하기</button>
                    <button  type="button">취소</button>

                </div>
            </div>
        </form>

        <script src="/js/sub.update.js"></script>
    </body>
</html>

sub_update.css

.input {
    display: flex;
    flex-direction: column;
}

.btn {
    margin : 20px;
    display: flex;

}

sub_update.js



function update(){
   
    sub_update_form.submit();
    opener.location.reload();
    
 
};

null.ejs - 댓글 수정 후 창 닫기 위한 ejs 추후에 설명 하겠습니다!

<script>
 setTimeout(function() {
 self.close();
}, 1000);
 </script>

 

'Web-Node.js > 간단한 익명게시판 만들기' 카테고리의 다른 글

5. 만든 게시판 heroku 이용하여 서버에 올리기  (0) 2021.03.25
4. 서버 파일 만들기 (node.js)  (0) 2021.03.24
2. 레이아웃 구상하기  (0) 2021.03.24
1. DB 설계하기  (0) 2021.03.24
Node.js를 이용한 익명 게시판 구현하기  (0) 2021.03.24

'Web-Node.js/간단한 익명게시판 만들기' Related Articles

티스토리툴바