[HTML5] - 23 - 페이지네이션 기능이 추가된 웹페이지 만드는 법
728x90
반응형
#주의#
이 글은 강의 글이 아니다.
틀린 부분, 깔끔하지 못한 부분 있을 수 있다.
지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다.
이번에는 html과 css, java script로 파일을 나눠줄 것이다.
아래는 html 코드다.
파일 이름을 index.html로 만들고 넣어준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>이리의 맥 이야기</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">이리의 맥 이야기</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">공지사항</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">게시판 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">게시판 2</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-md-8">
<button class="btn btn-primary mb-3" data-toggle="modal" data-target="#postModal">게시글 작성</button>
<div id="postList"></div>
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center mt-3">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">이전</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">다음</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-4">
</div>
</div>
</div>
<div class="modal fade" id="postModal" tabindex="-1" role="dialog" aria-labelledby="postModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="postModalLabel">게시글 작성</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="postTitle">제목</label>
<input type="text" class="form-control" id="postTitle">
</div>
<div class="form-group">
<label for="postContent">내용</label>
<textarea class="form-control" id="postContent" rows="5"></textarea>
</div>
<div class="form-group">
<label for="postImage">이미지 첨부</label>
<input type="file" class="form-control-file" id="postImage">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">닫기</button>
<button type="button" class="btn btn-primary" id="postSubmit">작성 완료</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>그 다음 style.css 파일을 만들고 아래의 코드를 넣어준다.
body {
background-color: black;
color: black;
}
.navbar {
margin-bottom: 30px;
background-color: gray;
color: white;
}
.card {
margin-bottom: 20px;
background-color: white;
color: black;
}
.comment-list {
margin-top: 10px;
margin-bottom: 10px;
background-color: white;
color: black;
}
.comment-form {
margin-top: 10px;
background-color: white;
color: black;
}마지막으로 java script 파일을 script.js 로 생성하고 아래의 코드를 넣어준다.
$(document).ready(function() {
// 게시글 목록
var posts = [];
// 게시글 작성 버튼 클릭 시
$('#postSubmit').click(function() {
var postTitle = $('#postTitle').val();
var postContent = $('#postContent').val();
var postImage = $('#postImage').val();
var post = {
title: postTitle,
content: postContent,
image: postImage,
comments: []
};
posts.push(post);
localStorage.setItem('posts', JSON.stringify(posts));
$('#postModal').modal('hide');
renderPosts();
});
// 게시글 목록 렌더링
function renderPosts() {
var postList = $('#postList');
postList.empty();
for (var i = 0; i < posts.length; i++) {
var post = posts[i];
var postItem = $('<div class="card mb-3"><div class="card-body"><h5 class="card-title">' + post.title + '</h5><p class="card-text">' + post.content + '</p><img src="' + post.image + '" class="card-img-top"><button class="btn btn-danger btn-sm float-right delete-post" data-index="' + i + '">삭제</button></div></div>');
var commentList = $('<div class="comment-list"></div>');
for (var j = 0; j < post.comments.length; j++) {
var comment = post.comments[j];
var commentItem = $('<div class="card mb-3"><div class="card-body"><p class="card-text">' + comment + '</p><button class="btn btn-danger btn-sm float-right delete-comment" data-post-index="' + i + '" data-comment-index="' + j + '">삭제</button></div></div>');
commentList.append(commentItem);
}
var commentForm = $('<form class="comment-form"><div class="form-group"><textarea class="form-control" rows="2" placeholder="댓글을 입력하세요"></textarea></div><button type="submit" class="btn btn-primary btn-sm float-right">작성</button></form>');
commentForm.submit(function(e) {
e.preventDefault();
var commentText = $(this).find('textarea').val();
var postIndex = $(this).closest('.card').find('.delete-post').data('index');
posts[postIndex].comments.push(commentText);
localStorage.setItem('posts', JSON.stringify(posts));
renderPosts();
});
postItem.append(commentList);
postItem.append(commentForm);
postList.append(postItem);
}
$('.delete-post').click(function() {
var postIndex = $(this).data('index');
posts.splice(postIndex, 1);
localStorage.setItem('posts', JSON.stringify(posts));
renderPosts();
});
$('.delete-comment').click(function() {
var postIndex = $(this).data('post-index');
var commentIndex = $(this).data('comment-index');
posts[postIndex].comments.splice(commentIndex, 1);
localStorage.setItem('posts', JSON.stringify(posts));
renderPosts();
});
}
// 게시글 목록 초기화
function initPosts() {
var savedPosts = localStorage.getItem('posts');
if (savedPosts) {
posts = JSON.parse(savedPosts);
}
renderPosts();
}
initPosts();
});다 넣고나면 아래의 사진과 같은 웹페이지가 만들어진다.
게시글 작성을 하면 로컬스토리지에 저장되는 웹페이지다.
페이지네이션 기능이 있고, 상단 메뉴바, 모바일용 웹페이지를 지원하고 댓글 기능, 삭제기능이 있는 웹페이지다.
728x90
반응형
'개발 이야기 > [HTML5]' 카테고리의 다른 글
| [HTML5] 웹 메모장 만드는 법 (저장해서 txt파일로 다운받기) (6) | 2023.05.26 |
|---|---|
| [HTML5] 웹 메모장 만드는 법 (2) | 2023.05.26 |
| [HTML5] - 22 - 댓글기능 만드는 법 (2) | 2023.05.08 |
| [HTML5] - 21 - 이미지첨부 기능 만드는 법 (1) | 2023.05.07 |
| [HTML5] - 20 - 게시글 작성 폼과 기능 만드는 법 (1) | 2023.05.07 |
댓글