loading...

Get random posts from Dev (Indonesian language)

mzaini30 profile image Zen ・2 min read

Javascript (3 Part Series)

1) Kapan harus menggunakan arrow function dan kapan harus menggunakan traditional function? 2) Get random posts from Dev (Indonesian language) 3) Berapa 8/2(2+2)

Salah satu yang aku suka dari Dev ini adalah editornya yang menggunakan Markdown. Ya, aku suka Markdown. Dan aku juga suka dengan berbagai konten teknologi yang ada di website ini.

Namun sayang, di halaman beranda, artikelnya sering nggak update.

Maksudku, ketika aku reload lagi halaman beranda, yang tampil postingannya ya yang itu-itu aja. Maka, aku membuat Random Dev.

Bisa dikunjungi di https://mzaini30.com/dev/.

Ini tampilannya:

Halaman pertama

Halaman kedua

Dan ketika diklik, maka ia akan menampilkan artikel Dev di tab baru:

Ketika artikelnya diklik

Source codenya:

GitHub logo laptopzen / dev

Ini adalah random dari Dev




Bahas kodenya

index.html

Atur judulnya dulu:

<title>Random Dev</title>

Gunakan charset UTF-8:

<meta charset="utf-8">

Atur tampilan mobile:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

Import CSS dari Bootstrap dan dari buatanku sendiri:

<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/style.css">

Bagian navbar:

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <div class="navbar-brand">Random Dev</div>
        </div>
    </div>
</div>

Bagian isi yang akan kita manipulasi:

<div class="container isi">
    <p>Loading...</p>
</div>

Ambil jQuery:

<script type="text/javascript" src="vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>

app/app.js

Kita buat AJAXnya nggak selalu sinkron. Jadi, ketika di callback mereturn suatu value, maka value tersebut jadi global.

$.ajaxSetup({async: false})

Kita gunakan jika deskripsi postingan yang akan kita ambil nanti kosong.

baca = [
    'I think, you can love it',
    'I was explain this',
    'Wow. It\'s crazy',
    "It's very cool",
    "Wow. I'll try this"
]

kosong = () => baca[Math.floor(Math.random() *  baca.length)]

sebuah function.

olah_isi = () => {}

Kita dapatkan dulu jumlah semua artikel di Dev lalu kita masukkan ke banyak. Misalnya aja: banyak = 1000.

$.get('https://dev.to/api/articles?per_page=1', data => banyak = data[0].id)

Kita ambil 20 aja postingan acak.

mau_diambil = 20

Kan tadi kisahnya banyak artikelnya ada 1000 ya, kita ambil tuh 20 aja secara acak. Misalnya: 128, 723, 12, 412, 23, 12, dst.

list_artikel_acak = [];
while(list_artikel_acak.length < mau_diambil){
    r = Math.floor(Math.random() * banyak) + 1;
    if(list_artikel_acak.indexOf(r) === -1) list_artikel_acak.push(r);
}

Kita ambil JSON dari masing-masing artikel itu terus dipush ke isi_artikel.

isi_artikel = []
for(y of list_artikel_acak){
    $.get(`https://dev.to/api/articles/${y}`, data => isi_artikel.push(data))
}   

Nah, baru deh kita isi ke .isi.

$('.isi').html(isi_artikel.map(x => `
    <a href="${x.url}" class="anggap-aja-bukan-link" target='_blank'>
        <table class="table table-ajaib">
            <tr>
                <td>
                    <img src="${x.user.profile_image_90}" alt="">
                </td>
                <td>
                    <div class="panel panel-default">
                        <div class="panel-heading">${x.title} ~ <em>by ${x.user.name}</em></div>
                        <div class="panel-body">${x.description ? x.description : kosong()}</div>
                    </div>
                </td>
            </tr>
        </table>
    </a>`))

Oh iya, tadi masih function. Maka, kita jalankan dulu dengan olah_isi().

olah_isi()

Kalau .navbar-brand diklik, reload lagi isinya.

$('.navbar-brand').click(() => {
    $('.isi').html('Loading...')
    olah_isi()
})

Javascript (3 Part Series)

1) Kapan harus menggunakan arrow function dan kapan harus menggunakan traditional function? 2) Get random posts from Dev (Indonesian language) 3) Berapa 8/2(2+2)

Posted on Feb 16 by:

Discussion

markdown guide