Cara Membuat Downlod Box dengan Javascript

Cara Membuat Downlod Box dengan Javascript

Selamat datang kembali di blog sederhana Code Pelajar. Saat ini saya memiliki tutorial unik yang orang lain mungkin jarang kepikiran membuatnya yaitu membuat download box dengan Javascript dan datanya menggunakan Array dan object. Ide ini muncul setelah seseorang bertanya di Facebook ingin dibuatkan download box namun dia hanya ingin memasukan judul, ukuran file, server dan urlnya saja.



Sebelumnya juga saya membuat tutorial membuat download box yang anti mainstream bisa di cari di blog ini.


Cara Membuat Download Box dengan Javascript

Codenya sederhana, kamu hanya perlu membuat kode javascript seperti di bawah ini:


<script>/*<[CDATA[*/
// Definisikan data semua anime yang diperlukan di download box dan dimasukan ke dalam variabel berikut.
var anime = [
    {
        judul : "{{ judul pilem / anime }}",
        download : [
            {
                screensize : "{{ 480p/720p/4k }}", filesize : "{{ file size }}",
                dlink : [
                    { server : "{{ server 1 }}", url : "{{ link download }}"},
                    { server : "{{ server 2 }}", url : "{{ link download }}"},
                ]
            },
        ]
    },
];

// fungsi untuk memunculkan download box
function downloadBox() {
    for (var i = 0; i < anime.length; i++) {
        document.write('<h4>'+anime[i].judul+'</h4>');
        document.write('<ul>');
        for (var j = 0; j < anime[i].download.length; j++) {
            document.write('<li><span class="scsize">'+anime[i].download[j].screensize+'</span><span class="fsize">'+anime[i].download[j].filesize+'</span> ');
                for (var k = 0; k < anime[i].download[j].dlink.length; k++) {
                    document.write('<a href="'+anime[i].download[j].dlink[k].url+'">'+anime[i].download[j].dlink[k].server+'</a> | ');
                }
            document.write('</li>');
        }
        document.write('</ul>');
    }
}

//(opsional)fungsi tambahan untuk mengkondisikan jika variabel anime tidak ditemukan maka kode tidak dieksekusi
// Hapus aja kalau tidak perlu
(function abracadabra(){
    setTimeout(function(){
        if (typeof anime != "object"){
            console.log("tidak ada data download")
        } else {
            // eksekusi download box disini.
            downloadBox();
            console.log("download box dibuat!")
        }
    },1000)
}())

/*]]>*/
</script>


Pada kode diatas sudah sedikit saya jelaskan pada komen baris. Saya membuat variabel anime dengan data array dan object. nah pada datanya bisa kamu lihat dan sesuaikan sendiri tergantung apa yang mau ditampilkan dan berapa jumlah data yang mau di tampilkan juga. Saya juga membuat satu fungsi downloadbox untuk menampilkan download box. Untuk menjalankan fungsi ini kamu harus memanggilnya dengan kode downloadbox() atau seperti pada javascript opsional yang saya buat untuk memakai kondisi tertentu.


Karena pada tampilan masih biasa, maka saya sudah menyiapkan css sederhana agar tampilannya lebih menarik sebagai berikut ini:


/* CSS DOWNLOAD BOX */
#cp-db {
 font-family: -apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
 line-height: 1.6;
}
#cp-db h4 {
 text-align: center;
 color: #fff;
 background-color: #444;
 line-height: 2;
}
#cp-db ul {
 list-style: none;
 padding: 10px;
 border: 2px solid #444;
 margin-bottom: 10px;
}
#cp-db ul li {
 padding-bottom: 5px;
 margin-bottom: 5px;
 border-bottom: 2px dashed rgba(0,0,0,0.2);
}
#cp-db a {
 text-decoration: none;
}
#cp-db ul li span {
 font-size: 12px;
 color: #fff;
 display: inline-block;
 padding: 2px 4px;
 border-radius: 5px;
 margin-right: 5px;
}
#cp-db ul li span.scsize {
 background-color: red;
}
#cp-db ul li span.fsize {
 background-color: green;
}


Contoh Cara Menggunakannya

Jika kamu masih bingung cara penerapannya bisa kamu ikuti cara simpel berikut ini:


<!-- buat kode javascriptnya 
                    paling atas atau diatas kode sebelum
                    kode pemanggil "downloadbox()" -->
<script>/*<![CDATA[*/
var anime = [
// Episode 1
    {
        judul : "Sword Art Online Episode 1",
        download : [
            {
                screensize : "480p", filesize : "40mb",
                dlink : [
                    { server : "GoogleDrive", url : "https://www.google.com"},
                    { server : "Zippyshare", url : "https://www.zippyshare.com"},
                    { server : "MirrorCreator", url : "https://www.mirrorcreator.com"},
                ]
            },{
                screensize : "720p", filesize : "70mb",
                dlink : [
                    { server : "GoogleDrive", url : "https://www.google.com"},
                    { server : "Zippyshare", url : "https://www.zippyshare.com"},
                    { server : "MirrorCreator", url : "https://www.mirrorcreator.com"}
                ]
            },{
                screensize : "1080p", filesize : "90MB",
                dlink : [
                    { server : "GoogleDrive", url : "https://www.google.com"},
                    { server : "Zippyshare", url : "https://www.zippyshare.com"},
                    { server : "MirrorCreator", url : "https://www.mirrorcreator.com"}
                ] 
            }
        ]
    },{
        judul : "Sword Art Online Episode 2",
        download : [
            {
                screensize : "480p", filesize : "40mb",
                dlink : [
                    { server : "GoogleDrive", url : "https://www.google.com"},
                    { server : "Zippyshare", url : "https://www.zippyshare.com"},
                    { server : "MirrorCreator", url : "https://www.mirrorcreator.com"},
                ]
            },{
                screensize : "720p", filesize : "70mb",
                dlink : [
                    { server : "GoogleDrive", url : "https://www.google.com"},
                    { server : "Zippyshare", url : "https://www.zippyshare.com"},
                    { server : "MirrorCreator", url : "https://www.mirrorcreator.com"}
                ]
            },{
                screensize : "1080p", filesize : "90MB",
                dlink : [
                    { server : "GoogleDrive", url : "https://www.google.com"},
                    { server : "Zippyshare", url : "https://www.zippyshare.com"},
                    { server : "MirrorCreator", url : "https://www.mirrorcreator.com"}
                ] 
            }
        ]
    },
    // Episode 3 dan seterusnya tinggal copas dan ganti isinya dari yang pertama
];
function downloadBox() {
    for (var i = 0; i < anime.length; i++) {
        document.write('<h4>'+anime[i].judul+'</h4>');
        document.write('<ul>');
        for (var j = 0; j < anime[i].download.length; j++) {
            document.write('<li><span class="scsize">'+anime[i].download[j].screensize+'</span><span class="fsize">'+anime[i].download[j].filesize+'</span> ');
                for (var k = 0; k < anime[i].download[j].dlink.length; k++) {
                    document.write('<a href="'+anime[i].download[j].dlink[k].url+'">'+anime[i].download[j].dlink[k].server+'</a> | ');
                }
            document.write('</li>');
        }
        document.write('</ul>');
    }
}
/*]]>*/</script>

<!-- buat htmlnya dan pemanggil download box disini -->
<div id="cp-db">
<script>downloadbox()</script>
</div>

Tampilannya maka akan terlihat seperti pada gambar dibawah ini:


Cara Membuat Downlod Box dengan Javascript

Untuk live demo bisa lihat disini.


Apa keuntungan dari menggunakan javascript ini? Keuntungannya bagi saya menambah ilmu dan pengetahuan juga senang-senang :V. Jika ada seseorang yang ingin mencuri link download dengan mematikan javascriptnya menggunakan ektensi. maka downloadbox ini tidak akan menampikan kontennya karena ini juga pakai javascript.



Itulah tutorial yang bisa saya berikan hari ini, walaupun bukan sesuatu yang wah tapi setidaknya bisa bermanfaat untukk kamu juga. Jika ada kesulitan dan pertanyaan bisa dengan berkomentar dibawah setelah tutorial anti mainstream ini. Nantikan juga tutorial lainnya yang beda dari yang lain cuma di Code Pelajar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel