Mungkin ada diatara anda terkhusus nya yang lagi belajar ngoding pernah bertanya,bagaimana sih cara membuat sebuah website?.Ada banyak hal yang harus dipelajari dalam pembuatan website.Terkhususnya bagi pemula,mulai lah dengan belajar html dan css terlebih dahulu karena itu merupakan hal yang mendasar dalam pembuatan website.Kemudian anda bisa mempelajari bahasa pemrograman javascript,typescript,nodejs,API dan yang lain-lain.
Akan tetapi untuk pembahasan kali ini saya tidak membahas pembuatan website secara keseluruhan.Pembahasan kali ini saya akan mengulas tentang cara membuat nomor halaman pada sebuah website dengan menggunakan bahasa pemrograman javascript.Untuk bagi pemula anda bisa membuka software text editor anda seperti Notepad.Anda juga bisa menggunakan software text editor yang lain untuk menjalankan program atau codingan ini seperti,Subleme Text,Notepad++,Atom,Vs.Code dan yang lain-lain.
Untuk menjalankan program ini saya menggunakan software text editor Vs.code.Software Vs.code memiliki beberapa keunggulan diantara software text editor yang lainnya.Beberapa keunggulan yang dimiliki software text editor Vs.code diantaranya bersifat open source,sudah support berbagai macam bahasa pemrograman,serta memilki fitur dan ekstensi yang dapat diinstall dan digunakan..
Bagi anda yang belum memiliki software Vs.Code silahkan download terlebih dahulu dilaman situs website resminya,di https://code.visualstudio.com/download.Setelah anda berhasil mendownload software tersebut,kemudian silahkan install dan buka softwarenya.Berikut gambar atau tampilan software Vs.code setelah anda buka.
Setelah anda buka software Vs.code tersebut maka langkah selanjutnya yang anda lakukan adalah buka text file yang baru,kemudian tuliskan codingan berikut ini.
Berikut Untuk Code HTML nya:
<!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">
<title>Pagintion Ui Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="pagination">
<ul> </ul>
</div>
<script src="./app.js"></script>
</body>
</html>
Berikut Untuk Code CSS nya:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
background: #4408ec;
min-height: 100vh;
padding: 10px;
}
.pagination ul{
width: 100%;
display: flex;
flex-wrap: wrap;
background: #fff;
padding: 8px;
border-radius: 50px;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.pagination ul li{
color: #000;
list-style: none;
line-height: 45px;
text-align: center;
font-size: 18px;
font-weight: 500;
cursor: pointer;
user-select: none;
transition: all 0.3s ease;
}
.pagination ul li.numb{
list-style: none;
height: 45px;
width: 45px;
margin: 0 3px;
line-height: 45px;
border-radius: 50%;
}
.pagination ul li.numb.first{
margin: 0px 3px 0 -5px;
}
.pagination ul li.numb.last{
margin: 0px -5px 0 3px;
}
.pagination ul li.dots{
font-size: 22px;
cursor: default;
}
.pagination ul li.btn{
padding: 0 20px;
border-radius: 50px;
}
.pagination li.active,
.pagination ul li.numb:hover,
.pagination ul li:first-child:hover,
.pagination ul li:last-child:hover{
color: #fff;
background: #4408ec;
}
Berikut Untuk Code JAVASCRIPT nya:
const element = document.querySelector(".pagination ul");
let totalPages = 20;
let page = 10;
element.innerHTML = createPagination(totalPages, page);
function createPagination(totalPages, page){
let liTag = '';
let active;
let beforePage = page - 1;
let afterPage = page + 1;
if(page > 1){
liTag += `<li class="btn prev" onclick="createPagination(totalPages, ${page - 1})"><span><i class="fas fa-angle-left"></i> Prev</span></li>`;
}
if(page > 2){
liTag += `<li class="first numb" onclick="createPagination(totalPages, 1)"><span>1</span></li>`;
if(page > 3){
liTag += `<li class="dots"><span>...</span></li>`;
}
}
if (page == totalPages) {
beforePage = beforePage - 2;
} else if (page == totalPages - 1) {
beforePage = beforePage - 1;
}
if (page == 1) {
afterPage = afterPage + 2;
} else if (page == 2) {
afterPage = afterPage + 1;
}
for (var plength = beforePage; plength <= afterPage; plength++) {
if (plength > totalPages) {
continue;
}
if (plength == 0) {
plength = plength + 1;
}
if(page == plength){
active = "active";
}else{
active = "";
}
liTag += `<li class="numb ${active}" onclick="createPagination(totalPages, ${plength})"><span>${plength}</span></li>`;
}
if(page < totalPages - 1){
if(page < totalPages - 2){
liTag += `<li class="dots"><span>...</span></li>`;
}
liTag += `<li class="last numb" onclick="createPagination(totalPages, ${totalPages})"><span>${totalPages}</span></li>`;
}
if (page < totalPages) {
liTag += `<li class="btn next" onclick="createPagination(totalPages, ${page + 1})"><span>Next <i class="fas fa-angle-right"></i></span></li>`;
}
element.innerHTML = liTag;
return liTag;
}
Setelah anda menuliskan codingan diatas,simpan atau save codingan tersebut di dalam folder penyimpanan yang anda inginkan.Kemudian anda dapat menjalankan atau RUN program tersebut,maka hasilnya seperti gambar atau tampilan berikut ini.
SELAMAT MENCOBA!!!😇
Comments
Post a Comment