Haloo teman-teman pada artikel ini saya membagikan source code yang insya allah membuat sobat semua mendapat pahala jika menaruhnya di blog, awal cerita saya membuat script ini adalah saat saya sudah mencoba tutorial yang ada di blog kitabisa.com disana di berikan tutorial cara membagikan link campaign donasi dengan mudah hanya dengan menyalin kode yang sudah disediakan oleh kitabisa.com, awalnya berhasil dan berjalan lancar tetapi setelah beberapa waktu script tiba-tiba macet dan tidak bisa digunakan lagi, saya bertanya-tanya kok macet, setelah saya cek terdapat error di console log browser yaitu error CORS, kurang lebih errornya seperti gambar dibawah ini.
Dan entah kenapa pada akhirnya situs kitabisa.com menonaktifkan fitur tersebut, ditandainya hilangnya fitur embed link di halaman donasi pada saat artikel ini ditulis.
Disitulah saya mendapat ide membuat script untuk website saya sekaligus untuk mengisi liburan, ditambah lagi secara tidak sengaja tidak sengaja menemukan link di kitabisa.com yang bisa dimanfaatkan yaitu.
Jika sobat adalah seorang programmer maka data-data yang ada didalam link tersebut tentu sangat berarti, nah data tersebut lah yang saya olah untuk di buat script yang menghasilkan contoh tampilan dibawah ini.
Jika sobat klik donasi sekarang maka akan diarahkan ke tab baru yang langsung menampilkan website kitabisa.com sesuai judul campaign donasi yang di klik, jika sobat masih bingung silahkan coba langsung di blog ini. Cara kerja script ini adalah dengan mengambil data di link hosting milik saya https://nugrohoprayogo.id/kitabisa/api.php lalu menampilkannya secara acak di situs yang ditaruh script tersebut.
Keunggulan script ini adalah sobat tidak perlu memperbarui script untuk mengupdate campaign donasi kitabisa, semua campaign donasi yang muncul merupakan campaign donasi terbaru yang akan di acak dan diperbarui otomatis jika ada yang mengakses website sobat, bahkan sampai ke bagian dana terkumpul pun selalu terupdate.
kenapa harus melalui link hosting anda bukan langsung ke link kitabisa saja ? jawabannya karena masalah error CORS yang sudah kita bahas tadi jadi saya harus mengalihkannya dulu ke server saya, jika tidak dilakukan pengalihan maka browser akan memblokirnya dan data tidak bisa digunakan, saya tidak akan membahas masalah proses pengalihan ini jadi saya skip saja ya, mari kita langsung ketahap bagaimana memasang campaign donasi kitabisa di blog atau website yang kita miliki.
Untuk tutorial ini saya akan menggunakan platform blogger.com, untuk platform lain seperti wordpress, joomla, dan lainnya mungkin sama saja tetapi mungkin berbeda letak pengaturannya saja, langsung kita mulai saja langkah-langkahnya.
Pertama-tama klik menu tata letak, disana klik menu tambah gadget yang lokasinya sobat inginkan, maka akan tampil jendela baru seperti gambar dibawah ini.
Klik HTML/Javascript dan tambahkan kode html dibawah ini.
Kode HTML
Judulnya tidak usah di isi karena sudah saya beri judul pada HTML nya, jika di isi tidak mengapa tetapi tampilannya saya rasa menjadi kurang bagus.
Setelah semua dipastikan benar silahkan klik save, selanjutnya dari tata letak mari kita beralih ke menu tema, disana silahkan sobat klik tombol Edit HTML.
Disana disediakan pengeditan html yang lebih kompleks lagi, jika sobat mengerti struktur blog, mengerti programming web, dan ingin meletakkan campaign donasi kitabisa lebih leluasa di semua tempat, disinilah tempatnya, sobat bisa melewati tahapan html sebelumnya dan meletakkan kode htmlnya disini secara langsung.
Lanjut ke tutorialnya, silahkan cari kode </head> yang dibawahnya ada kode <body>, untuk menemukannya dengan mudah sobat bisa menekan tombol CTRL + F dan mengetikkan pada form yang disediakan, maka browser akan mencarikannya. Salin dan tempelkan kode dibawah ini tepat diatas kode </head>,
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
Kode diatas berfungsi untuk memanggil library js jquery, karena script yang saya buat membutuhkan jquery untuk menjalankannya. kurang lebih langkah diatas ilustrasinya seperti gambar dibawah ini.
Setelah itu cari kode </body> sama seperti tadi pakai CTRL + F saja, lalu pastekan kode dibawah ini.
<script src="https://nugrohoprayogo.id/kitabisa/donasi.js"></script>
Link kode tersebut berada di server milik saya, yang bisa saja saya hentikan sewaktu-waktu sehingga tidak bisa diakses lagi, jadi silahkan cari server cadangan untuk menghost file jsnya atau bisa di tempelkan secara langsung di tag <script>Kode js nya</script> pada html blogspot.
Kode Javascript
kurang lebih langkah diatas ilustrasinya seperti gambar dibawah ini.
Sedikit penjelasan untuk kode js nya terdapat variable yang bisa sobat ubah-ubah isinya yaitu pada
var r = ["bencana", "banjir", "gempa", "tsunami", "zakat", "masjid", "pesantren", "palestina", "mualaf", "islam"];
variable tersebut berfungsi sebagai kumpulan kata kunci untuk judul yang ingin ditampilkan, jadi jika saya mengubah menjadi
var r = ["bencana"];
Maka judul campaign donasi kitabisa yang di prioritaskan muncul hanya yang terdapat kata bencana saja, jika tidak ditemukan barulah campaign donasi yang di tampilkan dipiliyh secara acak. Sobat bisa menambahkan atau mengurangi kata kunci pada variable r sesuai pola yang sudah terlihat.
Setelah itu sama saja seperti sebelumnya, tetapi disini kita akan menambahkan css, silahkan cari kode </head> yang dibawahnya ada kode <body>, tambahkan kode berikut ini di atas/di bawah kode yang sudah kita tambahkan pada langkah sebelumnya.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<link href="https://nugrohoprayogo.id/kitabisa/donasi.css" rel="stylesheet"/>
Kode diatas berfungsi untuk memanggil library css bootstrap, karena html yang saya buat menggunakan bootstarp untuk menghiasinya, sehingga jika sobat tidak menambahkan library bootstrap atau kode cssnya maka tampilan html akan berantakan dan terlihat tidak menarik.
Saya peringatkan sekali lagi link kode css tersebut berada di server milik saya, yang bisa saja saya hentikan sewaktu-waktu sehingga tidak bisa diakses lagi, jadi silahkan cari server cadangan untuk menghost file cssnya atau bisa di tempelkan secara langsung di tag <style>Kode css nya</style> pada html blogspot.
Kurang lebih langkah diatas ilustrasinya seperti gambar dibawah ini.
Jika semua sudah ditera[kan maka seharusnya akan tampil maka campaign donasi akan tampil seperti gambar dibawah ini. Kalaupun berantakan mungkin itu hanya kesalahan pada cssnya (dipoles sedikit selesai). yang jadi masalah kalau tidak muncul sama sekali, berarti ada kesalahan meletakkan script coba cek lagi tutorial ini dari awal ataupun server hosting saya bermasalah coba kunjungi https://nugrohoprayogo.id/kitabisa/api.php kalau ada data yang muncul berarti server saya baik-baik saja (dan sobat sepertinya salah dalam mengikuti tutorialnya).
Begitulah cara baru memasang campaign donasi kitabisa jika ada masalah atau kendala bisa berkomentar dibawah, Sebagai tambahan lagi source code yang saya bagikan disini hanya berbasis di client sidenya saja, jika sobat mempunyai server hosting dan ingin mempunyai API kitabisa sendiri silahkan hubungi saya melalui email (yang tersedia dihalaman kontak di blog ini) untuk mendapatkan source code servernya yang menggunakan PHP (Gratis kok). Sekian terimakasih.
Download Source Code
mas buatin tutornya untuk diwordpress dong,,,,, makasih
BalasHapusTutorialnya manfaat dunia akhirat, izin mengamalkan
BalasHapusmas kenapa ya link nugrohoprayogo.id nya ga bisa di kunjungi?
BalasHapus