tag:blogger.com,1999:blog-75091411760247521072024-03-19T04:18:18.509-07:00Just shareMuhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comBlogger36125tag:blogger.com,1999:blog-7509141176024752107.post-47372681188959008142023-03-30T00:42:00.002-07:002023-03-30T00:42:12.394-07:00Proyek Agile<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_UgZi64ACrTefzzpQe_OcaHUF6hpXU6qDrAOG5qh-yEWRuC-rmN5U6ZN3U6xSWJ5tYjM3q8-W30XUMuNgFlTcwaecWQO2v7mEidizOiThrQbhmq4dXjxumKxTqfTQm_rAgG7LNzUAsPdkLI6xSURJaaxekzStB9_e0s9cSjo54pusuJmXw4wrI6Vmiw/s705/agile.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="703" data-original-width="705" height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_UgZi64ACrTefzzpQe_OcaHUF6hpXU6qDrAOG5qh-yEWRuC-rmN5U6ZN3U6xSWJ5tYjM3q8-W30XUMuNgFlTcwaecWQO2v7mEidizOiThrQbhmq4dXjxumKxTqfTQm_rAgG7LNzUAsPdkLI6xSURJaaxekzStB9_e0s9cSjo54pusuJmXw4wrI6Vmiw/w200-h199/agile.jpg" width="200" /></a></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"> Proyek Agile adalah pendekatan pengelolaan proyek yang menekankan pada kerja sama tim, adaptabilitas, dan fleksibilitas dalam menghadapi perubahan kebutuhan proyek. Pendekatan ini didasarkan pada Manifesto Agile, yaitu sebuah dokumen yang dirancang oleh sekelompok praktisi teknologi informasi pada tahun 2001, yang menegaskan bahwa "individu dan interaksi lebih penting daripada proses dan alat, serta responsif terhadap perubahan lebih penting daripada mengikuti rencana".</div><p></p><span><a name='more'></a></span><p style="text-align: justify;">Proyek Agile biasanya terdiri dari sprints atau iterasi yang singkat (biasanya 1-4 minggu), di mana tim berfokus pada pengembangan fitur atau komponen tertentu dari produk. Setiap sprint diawali dengan perencanaan dan pengaturan tujuan sprint, diikuti oleh tahap pengembangan, pengujian, dan penyelesaian. Setelah sprint selesai, tim melakukan retrospektif untuk mengevaluasi hasil dan menemukan cara untuk meningkatkan proses mereka di sprint berikutnya.</p><p style="text-align: justify;">Pendekatan Agile memungkinkan tim untuk merespon perubahan dan feedback dari pelanggan lebih cepat, dan menyelesaikan proyek dengan lebih cepat dan lebih efisien. Dalam proyek Agile, prioritas dan kebutuhan pelanggan diperhatikan, serta tim berfokus pada memberikan nilai bisnis kepada pelanggan secara terus-menerus selama proyek berlangsung.</p>Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-34723298147164564722023-03-30T00:34:00.003-07:002023-03-30T00:43:06.332-07:00Kegunaan Trello<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ4b55FM5zUu0kdwvE8jpkuaQjGTfZj73NNMfaFR-h6CgodonU5bvo7WsS0m2vGku0Kgx9woBNqlrcXQEyC4TwZWFHtICJnxKyUfR5EQBZT3wi_XsPgDEu5I3ZGHTNBXuOg9mN9tQefQCH0U4qv8KCy1YxWb4JAzCIF_-gUlboE7x6yoErZnB2hp9Iig/s512/iconTrello.png" style="clear: left; display: block; float: left; margin-bottom: 1em; margin-right: 1em; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="512" data-original-width="512" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ4b55FM5zUu0kdwvE8jpkuaQjGTfZj73NNMfaFR-h6CgodonU5bvo7WsS0m2vGku0Kgx9woBNqlrcXQEyC4TwZWFHtICJnxKyUfR5EQBZT3wi_XsPgDEu5I3ZGHTNBXuOg9mN9tQefQCH0U4qv8KCy1YxWb4JAzCIF_-gUlboE7x6yoErZnB2hp9Iig/s200/iconTrello.png" width="200" /></a></div>
<p></p><div style="text-align: justify;">Trello adalah alat manajemen proyek yang memungkinkan tim untuk mengorganisasi dan memantau proyek mereka secara efisien. Beberapa kegunaan Trello antara lain:</div><span><a name='more'></a></span><span></span><p></p> <p></p>
<p style="text-align: justify;"></p><ol><li> Manajemen Tugas: Trello memungkinkan tim untuk membuat daftar tugas dan tugas sub, mengatur prioritas, menetapkan deadline, dan melacak kemajuan proyek.</li><li>Manajemen Tugas: Trello memungkinkan tim untuk membuat daftar tugas dan tugas sub, mengatur prioritas, menetapkan deadline, dan melacak kemajuan proyek.</li><li>Kolaborasi: Trello memungkinkan anggota tim untuk bekerja sama dalam proyek dan berkomunikasi dengan mudah dalam satu platform.</li><li>Proyek Manajemen: Trello membantu manajer proyek dalam mengatur proyek, termasuk mengelola sumber daya, mengelola anggaran, dan menetapkan tujuan.</li><li>Pemantauan Kemajuan: Trello memberikan gambaran visual tentang kemajuan proyek dan memudahkan pemantauan untuk memastikan proyek berjalan dengan lancar.</li><li>Manajemen Waktu: Trello memungkinkan pengguna untuk membuat jadwal dan mengatur jangka waktu untuk setiap tugas sehingga memudahkan manajemen waktu.</li><li>Manajemen <a href="https://www.agiptek.com/2023/03/proyek-agile.html#main" target="_blank">Proyek Agile</a>: Trello adalah alat yang populer digunakan oleh tim Agile untuk mengelola backlog dan sprint, memastikan setiap anggota tim tahu tugas apa yang harus dilakukan pada setiap saat.</li><li>Dengan fitur-fitur tersebut, Trello dapat membantu meningkatkan produktivitas tim, mengurangi kebingungan, dan meningkatkan keterampilan manajemen proyek secara keseluruhan.</li></ol><p></p><p style="text-align: justify;"><br /></p>Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-12640540732134844522023-03-29T07:38:00.005-07:002023-03-29T07:38:43.154-07:00SPA Vue.js<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijHzMuIAGfZHtRYjKXFS6g-Ed7gcC1hRdJ957Cs2na41rs39W7RE1rfffunJLjDYQu9Qj76-v6P9h2UiCUdabAR2BS1wVpN567bH0x1U765P9kkqxttt9JKW2jqtR-TbRH3_-kOqiO82HOEFOMZKWUODouLlfNIXWwboaQYqJZbfQll5GIRA9xOOp3yQ/s360/javascriptLogo.png" style="clear: left; display: block; float: left; margin-bottom: 1em; margin-right: 1em; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="360" data-original-width="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijHzMuIAGfZHtRYjKXFS6g-Ed7gcC1hRdJ957Cs2na41rs39W7RE1rfffunJLjDYQu9Qj76-v6P9h2UiCUdabAR2BS1wVpN567bH0x1U765P9kkqxttt9JKW2jqtR-TbRH3_-kOqiO82HOEFOMZKWUODouLlfNIXWwboaQYqJZbfQll5GIRA9xOOp3yQ/s200/javascriptLogo.png" width="200" /></a></div>
<p style="text-align: justify;">Berikut adalah langkah-langkah untuk membuat SPA (Single Page Application) menggunakan Vue Router: </p><p style="text-align: justify;"><span></span></p><a name='more'></a> <p></p>
<p style="text-align: justify;">Buatlah proyek Vue baru dengan menggunakan perintah vue create nama-proyek pada terminal. Pastikan sudah terinstall Node.js dan Vue CLI pada komputer Anda. </p>
<p style="text-align: justify;">Setelah membuat proyek baru, buka folder proyek dan install Vue Router dengan perintah npm install vue-router. </p>
<p style="text-align: justify;">Setelah proses instalasi selesai, buka file main.js pada folder src. Kemudian, import Vue Router dan gunakan Vue.use(Router) untuk menginstal Vue Router pada aplikasi Vue. Contohnya seperti berikut: </p>
<p style="text-align: justify;">
<pre>
<code>
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
// tambahkan route lain di sini
]
})
</code>
</pre>
</p>
<p style="text-align: justify;">Buat komponen-komponen Vue yang akan digunakan dalam aplikasi, seperti halaman utama (Home.vue), halaman detail (Detail.vue), dan halaman lain yang dibutuhkan. </p>
<p style="text-align: justify;">Tambahkan route untuk setiap halaman pada file router.js. Contohnya seperti berikut: </p>
<p style="text-align: justify;">
<pre>
<code>
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Detail from './views/Detail.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/detail/:id',
name: 'detail',
component: Detail,
props: true
}
]
})
</code>
</pre>
</p>
<p style="text-align: justify;">Gunakan router-link untuk membuat tautan antara halaman dalam aplikasi. Contohnya seperti berikut: </p>
<p style="text-align: justify;">
<pre>
<code>
<router-link to="/">Home</router-link>
<router-link :to="{ name: 'detail', params: { id: 1 }}">Detail</router-link>
</code>
</pre>
</p>
<p style="text-align: justify;"><b>CATATAN: kode diatas sangat penting, menggunakan href menyebabkan reload halaman barus secara utuh </b> </p>
<p style="text-align: justify;">Tambahkan <router-view> pada template utama aplikasi untuk menampilkan konten dari halaman yang dipilih. Contohnya seperti berikut: </p>
<p style="text-align: justify;">
<pre>
<code>
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
</code>
</pre>
</p>
<p style="text-align: justify;">Jalankan aplikasi dengan perintah npm run serve pada terminal. Aplikasi akan berjalan pada localhost:8080 atau port lain yang ditentukan. </p>
<p style="text-align: justify;">Dengan langkah-langkah di atas, Anda dapat membuat SPA menggunakan Vue Router. Selamat mencoba! </p>
Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-57313150720473537802023-03-28T18:35:00.005-07:002023-03-28T18:35:29.990-07:00JavaScript Static Properties<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivmbr_uMRFNJ6M39Zwg1DLxEn7iKxol7CxcYxEHPhCaFIYAWdNHQmK5LaWxo6QhE_AkFy9Vab1Equxhg_b7Arjuz9qaP6JpOgmyV_noixIZTWrdSfryprW6Q_jIbFbPJC5qWsjFigwaGQG-vACOmteNIk73v0GZFWl8AqEKSTqBTfRo0_y_W4teYIZwg/s360/javascriptLogo.png" style="clear: left; display: block; float: left; margin-bottom: 1em; margin-right: 1em; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="360" data-original-width="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivmbr_uMRFNJ6M39Zwg1DLxEn7iKxol7CxcYxEHPhCaFIYAWdNHQmK5LaWxo6QhE_AkFy9Vab1Equxhg_b7Arjuz9qaP6JpOgmyV_noixIZTWrdSfryprW6Q_jIbFbPJC5qWsjFigwaGQG-vACOmteNIk73v0GZFWl8AqEKSTqBTfRo0_y_W4teYIZwg/s200/javascriptLogo.png" width="200" /></a></div>
<p style="text-align: justify;">JavaScript memiliki beberapa fitur baru yang diperkenalkan dalam ES6, salah satunya adalah Static Properties. Static Properties memungkinkan developer untuk menambahkan properti ke class JavaScript yang dapat diakses tanpa harus membuat instance dari class tersebut.</p><p><span></span></p><a name='more'></a> <p></p>
<p style="text-align: justify;">Dalam artikel ini, kita akan membahas tentang JavaScript Static Properties dan cara penggunaannya. </p>
<h3>Pengenalan</h3>
<p style="text-align: justify;">Sebelum kita membahas tentang Static Properties, kita perlu memahami konsep class di JavaScript. Class di JavaScript adalah sebuah template untuk membuat object. Class dapat memiliki properti dan method yang dapat digunakan untuk membuat object. </p>
<p style="text-align: justify;">Class juga dapat digunakan untuk membuat instance object dengan menggunakan operator "new". Instance object memiliki properti dan method yang didefinisikan dalam class. </p>
<p style="text-align: justify;">Contoh sederhana class JavaScript:
<pre>
<code>
class Mobil {
constructor(merek, tipe) {
this.merek = merek;
this.tipe = tipe;
}
get info() {
return `Mobil ${this.merek} tipe ${this.tipe}`;
}
}
const mobilBaru = new Mobil("Toyota", "Avanza");
console.log(mobilBaru.info); // output: Mobil Toyota tipe Avanza
</code>
</pre> </p>
<p style="text-align: justify;">Dalam contoh di atas, kita membuat class Mobil yang memiliki dua properti yaitu merek dan tipe, serta method info yang mengembalikan informasi mengenai mobil. </p>
<h3>Static Properties</h3>
<p style="text-align: justify;">Static Properties adalah properti yang dapat diakses langsung melalui class tanpa harus membuat instance dari class tersebut. Properti ini didefinisikan menggunakan keyword static.</p>
<p style="text-align: justify;">Contoh penggunaan Static Properties:
<pre>
<code>
class Mobil {
static jumlahMobil = 0;
constructor(merek, tipe) {
this.merek = merek;
this.tipe = tipe;
Mobil.jumlahMobil++;
}
get info() {
return `Mobil ${this.merek} tipe ${this.tipe}`;
}
static infoJumlahMobil() {
return `Jumlah mobil: ${Mobil.jumlahMobil}`;
}
}
const mobilPertama = new Mobil("Toyota", "Avanza");
const mobilKedua = new Mobil("Honda", "Civic");
console.log(mobilPertama.info); // output: Mobil Toyota tipe Avanza
console.log(Mobil.infoJumlahMobil()); // output: Jumlah mobil: 2
</code>
</pre> </p>
<p style="text-align: justify;">Dalam contoh di atas, kita menambahkan Static Property jumlahMobil pada class Mobil. Properti ini akan bertambah setiap kali sebuah instance object dari class Mobil dibuat.</p>
<p style="text-align: justify;">Kita juga menambahkan method infoJumlahMobil() yang mengembalikan informasi mengenai jumlah mobil yang telah dibuat.</p>
<p style="text-align: justify;">Kita dapat mengakses Static Property dan method melalui class Mobil tanpa harus membuat instance object seperti pada contoh di atas.</p>
<h3>Kesimpulan</h3>
<p style="text-align: justify;">JavaScript Static Properties memungkinkan developer untuk menambahkan properti ke class JavaScript yang dapat diakses tanpa harus membuat instance dari class tersebut. Properti ini didefinisikan menggunakan keyword static. Static Properties sangat berguna untuk menyimpan data yang berkaitan dengan class dan dapat diakses secara global.</p>
Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-73067850304155705412023-03-28T18:13:00.003-07:002023-03-28T18:17:28.965-07:00JavaScript Computed Property<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3SqLCH6lBadmNHgT9fKQ7AId-ghKibhRUqT5uyLUORF96D8ELIfJpr-3aCeacQQOchkHXLsJDDr1hBgS-ldHoEtsAprLClVtqOiJ1lB8kWXmQ7pnUBly4pcT2TQIydxEaiLSPcYf2jzE_o_Yb2ecDAlWWwNKVJ3Rgd6x94L-8bMNCkIoqUdi73IpW6g/s360/javascriptLogo.png" style="clear: left; display: block; float: left; margin-bottom: 1em; margin-right: 1em; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="360" data-original-width="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3SqLCH6lBadmNHgT9fKQ7AId-ghKibhRUqT5uyLUORF96D8ELIfJpr-3aCeacQQOchkHXLsJDDr1hBgS-ldHoEtsAprLClVtqOiJ1lB8kWXmQ7pnUBly4pcT2TQIydxEaiLSPcYf2jzE_o_Yb2ecDAlWWwNKVJ3Rgd6x94L-8bMNCkIoqUdi73IpW6g/s200/javascriptLogo.png" width="200" /></a></div>
<p style="text-align: justify;">Dengan Computed Property, kita dapat membuat properti objek dengan nama yang dihitung berdasarkan nilai variabel atau ekspresi yang diberikan. Ini memungkinkan kita membuat kode JavaScript yang lebih dinamis dan fleksibel dalam membuat properti objek yang dinamis sesuai kebutuhan.<span></span></p><a name='more'></a> <p></p>
<p style="text-align: justify;">Contoh penggunaan Computed Property pada objek JavaScript adalah sebagai berikut: </p>
<p style="text-align: justify;">
<pre>
<code>
const namaVariabel = "properti";
const objek = {
[namaVariabel]: "ini adalah nilai properti yang dihitung"
};
console.log(objek.properti); // "ini adalah nilai properti yang dihitung"
</code>
</pre>
</p>
<p style="text-align: justify;">Pada contoh di atas, kita membuat sebuah variabel bernama namaVariabel yang berisi string "properti". Kemudian, kita membuat sebuah objek dengan menggunakan Computed Property dimana nama properti dihitung berdasarkan isi dari variabel namaVariabel. Oleh karena itu, properti objek yang dibuat adalah properti dengan nilai "ini adalah nilai properti yang dihitung". </p>
<p style="text-align: justify;">Selain menggunakan variabel, kita juga dapat menggunakan ekspresi pada Computed Property seperti pada contoh berikut: </p>
<p style="text-align: justify;"><pre>
<code>
const objek = {
["properti" + 1 + 2]: "ini adalah nilai properti yang dihitung"
};
console.log(objek.properti12); // "ini adalah nilai properti yang dihitung"
</code>
</pre></p>
<p style="text-align: justify;">Pada contoh di atas, kita membuat sebuah objek dengan menggunakan Computed Property dimana nama properti dihitung berdasarkan ekspresi "properti" + 1 + 2, yang hasilnya adalah string "properti12". Oleh karena itu, properti objek yang dibuat adalah properti12 dengan nilai "ini adalah nilai properti yang dihitung".</p>
<p style="text-align: justify;">Itulah penjelasan dan contoh penggunaan JavaScript Computed Property. Semoga bermanfaat!</p>Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-54726116446413832152023-03-28T15:46:00.004-07:002023-03-28T15:46:38.144-07:00Web Worker<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQPrpbbvbRpsHDpb0YekLOAaBGVs5dzxO_V6ZE9WKPZeVMXxoQBhRtFbgDcLmFuJcdSrHWLjN7XaKWGW4CMpMn-XmLqOOa1SHqQ8zL7TwFoB3XBoMYVMMWdk3mzUOpj0igh4nbAVTrmQ_M4wg6Bi6BoVa2xKpWj9ElivfWrMyvm48kEqtMr_mlsPDMNg/s360/javascriptLogo.png" style="clear: left; display: block; float: left; margin-bottom: 1em; margin-right: 1em; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="360" data-original-width="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQPrpbbvbRpsHDpb0YekLOAaBGVs5dzxO_V6ZE9WKPZeVMXxoQBhRtFbgDcLmFuJcdSrHWLjN7XaKWGW4CMpMn-XmLqOOa1SHqQ8zL7TwFoB3XBoMYVMMWdk3mzUOpj0igh4nbAVTrmQ_M4wg6Bi6BoVa2xKpWj9ElivfWrMyvm48kEqtMr_mlsPDMNg/s320/javascriptLogo.png" width="320" /></a></div>
<p style="text-align: justify;">Web worker adalah fitur pada browser modern yang memungkinkan JavaScript berjalan pada thread yang berbeda dengan thread utama yang menjalankan fungsi DOM (Document Object Model). Web worker berfungsi untuk memproses tugas-tugas yang membutuhkan waktu yang lama atau memakan banyak sumber daya komputasi, seperti memproses data besar, melakukan kalkulasi matematika kompleks, dan menjalankan algoritma pencarian.<span></span></p><a name='more'></a><p></p>
<p style="text-align: justify;">Dalam konteks aplikasi web, web worker membantu meningkatkan performa dan responsivitas aplikasi dengan membebaskan thread utama dari tugas-tugas yang memakan waktu dan sumber daya. Dengan demikian, interaksi pengguna dengan aplikasi web menjadi lebih lancar dan tidak terganggu oleh tugas-tugas yang memakan waktu lama.</p>
<p style="text-align: justify;">Web worker dapat dibuat dengan menggunakan objek Worker pada JavaScript. Objek Worker memungkinkan pengembang untuk membuat thread baru yang berjalan di latar belakang dan terpisah dari thread utama. Pada dasarnya, objek Worker memungkinkan pengembang untuk membuat file JavaScript terpisah yang akan dijalankan oleh thread yang berbeda.</p>
<p style="text-align: justify;">Setiap web worker memiliki lingkup (scope) yang terpisah dari thread utama dan thread lainnya. Artinya, variabel, fungsi, dan objek yang didefinisikan pada thread utama tidak dapat diakses langsung pada web worker. Sebaliknya, pengembang harus mengirim pesan (message) dari thread utama ke web worker untuk melakukan tugas-tugas tertentu. Setelah tugas selesai, web worker akan mengirimkan pesan balik ke thread utama untuk memberitahu hasilnya.</p>
<p style="text-align: justify;">Salah satu contoh penggunaan web worker adalah dalam pengolahan data yang besar. Misalnya, pada aplikasi pengolah gambar atau video, web worker dapat digunakan untuk memproses gambar atau video yang besar agar tidak membebani thread utama. Dalam kasus ini, thread utama bertanggung jawab untuk menampilkan gambar atau video ke dalam elemen HTML, sedangkan web worker bertanggung jawab untuk memproses data yang besar.</p>
<p style="text-align: justify;">Meskipun web worker memiliki banyak keuntungan, ada beberapa hal yang perlu diperhatikan oleh pengembang saat menggunakan web worker. Pertama, web worker tidak dapat mengakses fungsi DOM dan API yang berkaitan dengan DOM. Oleh karena itu, pengembang harus memikirkan dengan matang bagaimana pesan akan dikirim dan hasil akan dikembalikan ke thread utama.</p>
<p style="text-align: justify;">Kedua, penggunaan web worker juga membutuhkan pengelolaan memori yang baik. Karena setiap web worker memiliki lingkup yang terpisah, maka jika terdapat banyak web worker yang dibuat, maka akan memakan sumber daya memori yang besar. Oleh karena itu, pengembang perlu memikirkan dengan matang kapan dan bagaimana web worker akan dibuat dan dihapus.</p>
<p style="text-align: justify;">Dalam kesimpulannya, web worker adalah fitur pada browser modern yang dapat membantu meningkatkan performa dan responsivitas aplikasi web. Dengan membebaskan thread utama dari tugas-tugas yang memakan waktu dan sumber daya, interaksi pengguna dengan aplikasi web menjadi lebih lancar dan tidak terganggu. Meskipun demikian, penggunaan web worker juga membutuhkan pengelolaan memori yang baik</p>
Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-51433572653396246772023-03-20T23:58:00.004-07:002023-03-21T00:01:10.711-07:00Menu tidak respon <div id="cara">
<h1><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZIWc1jTE15tQqd2swwgaSAsjo7Pi2BdPDIHDbZr0rZGkZjMn5Xb-IZKDQVUY2ju3d0J0u3gcjhB9MX0XyLg_IAkM0R41TcojZ2EmRC3VtgvnMEhS_FcaXRPcYEyVyTOwKfe5Aywht5ojENSfVGzBKoUsSgUzdi1zWCqO4YqQrEgE-zPnRQ3Iae1F3Q/s512/2800525.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="512" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZIWc1jTE15tQqd2swwgaSAsjo7Pi2BdPDIHDbZr0rZGkZjMn5Xb-IZKDQVUY2ju3d0J0u3gcjhB9MX0XyLg_IAkM0R41TcojZ2EmRC3VtgvnMEhS_FcaXRPcYEyVyTOwKfe5Aywht5ojENSfVGzBKoUsSgUzdi1zWCqO4YqQrEgE-zPnRQ3Iae1F3Q/w222-h222/2800525.png" width="222" /></a></div></h1><h1>Permasalahan Menu Tidak Respon<br /></h1>Terkadang aplikasi berjalan sangat lambat walaupun Anda mempunyai akses internet yang lumayan cepat. Maka kemungkinan yang terjadi adalah</div>
<div>
<ul style="text-align: left;">
<li>Ada update terbaru<p>Karena aplikasi ini menggunakan <a href="https://www.agiptek.com/2023/03/cara-menggunakan-abtahlil-tanpa-install.html#ttgpwa">fitur PWA</a>, maka jika ada update terbaru maka update akan berlangsung dilatar belakang</p><p>Solusi untuk permasalah ini adalah, jika Anda sedang tidak butuh update terbaru, matikan internet, karena aplikasi bisa berjalan offline. Anda bisa lakukan update dilain waktu ketika aplikasi sedang tidak digunakan</p></li>
<li>Ada crash, bug masalah di aplikasi <p>Bisa hubungi kami, mohon bersabar, nantikan update selanjutnya, kami akan usahakan agar lebih stabil </p></li>
</ul>
</div>Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-6079476463523456682023-03-20T20:03:00.001-07:002023-03-20T20:05:01.644-07:00Masukkan Nama<div id="cara">
<h1><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZIWc1jTE15tQqd2swwgaSAsjo7Pi2BdPDIHDbZr0rZGkZjMn5Xb-IZKDQVUY2ju3d0J0u3gcjhB9MX0XyLg_IAkM0R41TcojZ2EmRC3VtgvnMEhS_FcaXRPcYEyVyTOwKfe5Aywht5ojENSfVGzBKoUsSgUzdi1zWCqO4YqQrEgE-zPnRQ3Iae1F3Q/s512/2800525.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="512" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZIWc1jTE15tQqd2swwgaSAsjo7Pi2BdPDIHDbZr0rZGkZjMn5Xb-IZKDQVUY2ju3d0J0u3gcjhB9MX0XyLg_IAkM0R41TcojZ2EmRC3VtgvnMEhS_FcaXRPcYEyVyTOwKfe5Aywht5ojENSfVGzBKoUsSgUzdi1zWCqO4YqQrEgE-zPnRQ3Iae1F3Q/w200-h200/2800525.png" width="200" /></a></div><br />Cara Masukkan Nama Yang Akan dibacakan Doa</h1><br />Sebelum membaca tahlil, sangat disarankan untuk memasukkan nama (atau beberapa nama) yang akan dibacakan doa.<br />nama akan muncul langsung di dalam teks doa, dan juga sebaiknya tentukan dhamir (kata ganti) orang ketiga, ini juga akan masuk di dalam doa<br /><a name='more'></a></div><div id="cara"><br /><p></p>
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkJ6mqIjvD9tU9-J2MWiW7EeJsnNZx51husCn5zbHSNlWSO1FCk9m4jjoqZ9430UPRpALJcJI5k1mWqEYteNrLU6o-orB4bjymReMxiHARzkCYYAQISK8IrhGkZjPAGBWUBKHXqiMvBycop6qvLHaWPA1aLj9LTnZ2CiDfWFwHUTumkuMreuRbh4g6qg/s1152/SettingNama.gif" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="1152" data-original-width="auto" height="370" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkJ6mqIjvD9tU9-J2MWiW7EeJsnNZx51husCn5zbHSNlWSO1FCk9m4jjoqZ9430UPRpALJcJI5k1mWqEYteNrLU6o-orB4bjymReMxiHARzkCYYAQISK8IrhGkZjPAGBWUBKHXqiMvBycop6qvLHaWPA1aLj9LTnZ2CiDfWFwHUTumkuMreuRbh4g6qg/w360-h640/SettingNama.gif" width="auto" /></a></div><br /><div id="cara"><br /><p></p>
</div><br />Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-53725137317709634122023-03-20T02:03:00.006-07:002023-03-20T02:03:54.982-07:00Ubah Ukuran Font<div id="cara">
<h1><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZIWc1jTE15tQqd2swwgaSAsjo7Pi2BdPDIHDbZr0rZGkZjMn5Xb-IZKDQVUY2ju3d0J0u3gcjhB9MX0XyLg_IAkM0R41TcojZ2EmRC3VtgvnMEhS_FcaXRPcYEyVyTOwKfe5Aywht5ojENSfVGzBKoUsSgUzdi1zWCqO4YqQrEgE-zPnRQ3Iae1F3Q/s512/2800525.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="512" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZIWc1jTE15tQqd2swwgaSAsjo7Pi2BdPDIHDbZr0rZGkZjMn5Xb-IZKDQVUY2ju3d0J0u3gcjhB9MX0XyLg_IAkM0R41TcojZ2EmRC3VtgvnMEhS_FcaXRPcYEyVyTOwKfe5Aywht5ojENSfVGzBKoUsSgUzdi1zWCqO4YqQrEgE-zPnRQ3Iae1F3Q/w241-h241/2800525.png" width="241" /></a></div><br />Cara Ubah Ukuran Font di ABTahlil</h1><br /><br />
<p>Pilih salah satu bacaan seperti surah Yasin, Doa Tahlil atau salah satu bacaan huruf arab yang ingin dirubah ukuran font-nya</p><p>Klik "<b>Setting Font</b>" lalu geser ukuran font sesuai keinginan<span></span></p><a name='more'></a><br /><p></p>
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUjbnWT6mzlNEPzEa-T-kI7szxAzT-0pc5kgjL2jd9FDuqiTfcZFYZf1rDZ4TV4GCyTIyNomGRSZHMOTUkYKzP5D3oRXmkWvy5nRYCDNYLNHAowBFl9aaZSOiBEa1SQp9xES3vlt-HSiBvRMLC11bmZaY-uvg1XEyANO1QU8o86KigzZZi_bpyG3jf1g/s1152/ubahUkuranFont.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="1152" data-original-width="648" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUjbnWT6mzlNEPzEa-T-kI7szxAzT-0pc5kgjL2jd9FDuqiTfcZFYZf1rDZ4TV4GCyTIyNomGRSZHMOTUkYKzP5D3oRXmkWvy5nRYCDNYLNHAowBFl9aaZSOiBEa1SQp9xES3vlt-HSiBvRMLC11bmZaY-uvg1XEyANO1QU8o86KigzZZi_bpyG3jf1g/w225-h400/ubahUkuranFont.gif" width="225" /></a></div><br />Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-17091608221809641292023-03-20T01:51:00.000-07:002023-03-20T01:51:01.825-07:00Memilih Font/Huruf <div id="cara">
<h1><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZIWc1jTE15tQqd2swwgaSAsjo7Pi2BdPDIHDbZr0rZGkZjMn5Xb-IZKDQVUY2ju3d0J0u3gcjhB9MX0XyLg_IAkM0R41TcojZ2EmRC3VtgvnMEhS_FcaXRPcYEyVyTOwKfe5Aywht5ojENSfVGzBKoUsSgUzdi1zWCqO4YqQrEgE-zPnRQ3Iae1F3Q/s512/2800525.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="512" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZIWc1jTE15tQqd2swwgaSAsjo7Pi2BdPDIHDbZr0rZGkZjMn5Xb-IZKDQVUY2ju3d0J0u3gcjhB9MX0XyLg_IAkM0R41TcojZ2EmRC3VtgvnMEhS_FcaXRPcYEyVyTOwKfe5Aywht5ojENSfVGzBKoUsSgUzdi1zWCqO4YqQrEgE-zPnRQ3Iae1F3Q/w241-h241/2800525.png" width="241" /></a></div><br />Cara Memilih Font di ABTahlil</h1><br /><br />
<p>Pilih salah satu bacaan seperti surah Yasin, Doa Tahlil atau salah satu bacaan huruf arab yang ingin dirubah font-nya</p><p>Klik "<b>Setting Font</b>" lalu pilih salah satu huruf<span></span></p><a name='more'></a><br /><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSauloKf4XFyw_vEECZnAWVJkYok1rt41jZvha6EQYKAgmZVJ-BcoTvdI42Q6KbGc8sfBbCSUG7TIdnC0NyUfNsFrklGf-xt2GhURNmjQUlQ2pdnRdBsgaKS2VYRe4F1tS5josCcQY0EgBEjPXOnwLYcUfPpPq2U8p7DPnYOLMeZvUxgJTurGpQ4VmdQ/s1152/pilihHuruf.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="1152" data-original-width="648" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSauloKf4XFyw_vEECZnAWVJkYok1rt41jZvha6EQYKAgmZVJ-BcoTvdI42Q6KbGc8sfBbCSUG7TIdnC0NyUfNsFrklGf-xt2GhURNmjQUlQ2pdnRdBsgaKS2VYRe4F1tS5josCcQY0EgBEjPXOnwLYcUfPpPq2U8p7DPnYOLMeZvUxgJTurGpQ4VmdQ/w226-h400/pilihHuruf.gif" width="226" /></a></div><br />
</div>Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-60487498705213720642023-03-19T17:22:00.009-07:002023-03-21T00:04:23.613-07:00Dokumentasi AB-Tahlil <div id="cara">
<h1><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZIWc1jTE15tQqd2swwgaSAsjo7Pi2BdPDIHDbZr0rZGkZjMn5Xb-IZKDQVUY2ju3d0J0u3gcjhB9MX0XyLg_IAkM0R41TcojZ2EmRC3VtgvnMEhS_FcaXRPcYEyVyTOwKfe5Aywht5ojENSfVGzBKoUsSgUzdi1zWCqO4YqQrEgE-zPnRQ3Iae1F3Q/s512/2800525.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="512" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZIWc1jTE15tQqd2swwgaSAsjo7Pi2BdPDIHDbZr0rZGkZjMn5Xb-IZKDQVUY2ju3d0J0u3gcjhB9MX0XyLg_IAkM0R41TcojZ2EmRC3VtgvnMEhS_FcaXRPcYEyVyTOwKfe5Aywht5ojENSfVGzBKoUsSgUzdi1zWCqO4YqQrEgE-zPnRQ3Iae1F3Q/w241-h241/2800525.png" width="241" /></a></div><br />Dokumentasi Cara Penggunaan AB-Tahlil</h1>
<ul>
<h2>Cara Install</h2>
<li><a href="https://www.agiptek.com/2023/03/cara-install-di-google-play-store.html#cara">Google Play Store</a></li>
<li><a href="https://www.agiptek.com/2023/03/install-melalui-browser.html#cara">Browser</a></li>
<li><a href="https://www.agiptek.com/2023/03/cara-menggunakan-abtahlil-tanpa-install.html#cara">Tanpa installasi</a></li>
</ul>
<ul>
<h2>Cara Penggunaan<span><a name='more'></a></span></h2>
<li><a href="https://www.agiptek.com/2023/03/ubah-ukuran-font.html#cara">Memperbesar atau memperkecil ukuran huruf</a></li>
<li><a href="https://www.agiptek.com/2023/03/memilih-fonthuruf.html#cara">Ganti font (bentuk huruf)</a></li>
<li><a href="https://www.agiptek.com/2023/03/masukkan-nama.html#cara">Menambahkan nama almarhum/almarhumah</a></li>
</ul>
<ul>
<h2>Beberapa permasalahan</h2>
<li><a href="https://www.agiptek.com/2023/03/menu-tidak-respon.html#cara">klik menu tidak respon/tidak terbuka</a></li>
<li><a href="https://www.agiptek.com/2023/03/cara-menggunakan-abtahlil-tanpa-install.html#ttgpwa">Apakah bisa membaca offline</a></li>
<li><a href="#">Cara update aplikasi</a></li>
</ul>
</div>Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-41226011692942518122023-03-19T17:21:00.004-07:002023-03-21T00:11:37.914-07:00Tanpa Installasi<div id="cara">
<h1><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZIWc1jTE15tQqd2swwgaSAsjo7Pi2BdPDIHDbZr0rZGkZjMn5Xb-IZKDQVUY2ju3d0J0u3gcjhB9MX0XyLg_IAkM0R41TcojZ2EmRC3VtgvnMEhS_FcaXRPcYEyVyTOwKfe5Aywht5ojENSfVGzBKoUsSgUzdi1zWCqO4YqQrEgE-zPnRQ3Iae1F3Q/s512/2800525.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="512" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZIWc1jTE15tQqd2swwgaSAsjo7Pi2BdPDIHDbZr0rZGkZjMn5Xb-IZKDQVUY2ju3d0J0u3gcjhB9MX0XyLg_IAkM0R41TcojZ2EmRC3VtgvnMEhS_FcaXRPcYEyVyTOwKfe5Aywht5ojENSfVGzBKoUsSgUzdi1zWCqO4YqQrEgE-zPnRQ3Iae1F3Q/w205-h205/2800525.png" width="205" /></a></div><br />
</h1><h1>Cara Menggunakan ABTahlil Tanpa Install</h1>
<p>Pada dasarnya ABTahlil adalah Web Application / aplikasi Web, jadi bisa dibuka langsung via browser, broser apapun (walaupun sangat disarankan menggunakan Google Chrome)</p>
<p>Anda bisa membuka <a href="https://abtahlil.web.app">ABTahlil</a> menggunakan browser/peramban versi terbaru di OS (Operating system) :
<span></span></p><a name='more'></a><p></p><ul>
<li>Android</li>
<li>IOS (Apple)</li>
<li>Chromebook</li>
<li>Linux (semua varian-nya)</li>
<li>Microsoft Windows</li>
</ul>
<p></p>
<p>Cukup buka url : <a href="https://abtahlil.web.app">https://abtahlil.web.app</a> maka aplikasi akan berjalan normal layaknya seperti install menggunakan Google Play Store, hanya tampilannya saja yang berbeda, terutama faktor ukuran screen (layar)</p>
<p>Ketika pertama kali dibuka ABTahlil agak slow respon, tunggu beberapa menit, setelah itu aplikasi bisa dibuka dengan cepat bahkan tanpa menggunakan internet, dalam keadaan offline aplikasi ini bisa dibuka</p>
<h2>Mengenai PWA</h2>
<p id="ttgpwa">Tahun 2015 designer <i>Frances Berriman</i> dan engineer dari <b>Google Chrome</b> yaitu Alex Russell menciptakan istilah PWA yang merupakan kependekan dari Progressive Web App yang menjelaskan bagaimana aplikasi dapat mengambil fitur baru dari modern browser yaitu service worker dan web app manifest dan menganjurkan pengembang untuk mengupgrade aplikasi mereka ke PWA.</p>
<p>Memang fitur PWA ini ada pada semua peramban (browser) terbaru, tapi karena awal penciptaan dari fihak <b>Google Chrome</b> maka lebih disarankan membuka aplikasi web yang PWA menggunakan <b>Google Chrome</b> walaupun bisa menggunakan browser lain</p>
<p>Optimasi yang dilakukan tidak hanya akan membuat website menjadi lebih cepat namun juga mampu memberikan pengalaman layaknya menggunakan aplikasi mobile</p>
<p>PWA merupakan aplikasi hybrid yang terinspirasi dari kemudahan penggunaan browser <b>di berbagai platform</b> dan kenyamanan menggunakan aplikasi mobile di ponsel atau tablet.</p>
<p><b>Karakteristik PWA:</b><br />Menurut Google Developer, karakteristik dari Progressive Web App adalah
</p><ol>
<li><i>Progressive:</i><br />
Dapat berjalan pada setiap browser.</li>
<li><i>Responsive:</i><br />
Dapat berjalan pada berbagai ukuran layar dari berbagai peralatan.</li>
<li><i>Connectivity independent:</i><br />
Aplikasi dapat berfungsi dengan baik meski jaringan sedang lambat bahkan aplikasi <b>dapat berfungsi dengan baik meski jaringan sedang down (offline)</b>.</li>
<li><i>App-like:</i><br />
Tampilan seperti tampilan native mobile.</li>
<li><i>Fresh:</i><br />
Selalu update dengan data atau informasi terkini</li>
<li><i>Safe:</i><br />
Dilayani oleh HTTPS yang mencegah pencurian informasi</li>
<li><i>Installable:</i><br />
Pengguna dapat memanage aplikasi PWA seperti aplikasi native mobile</li>
</ol>
<p></p>
<p><b>ABTahlil adalah Web Application (Aplikasi Web) dengan fitur PWA</b> (Progressive Web App) karena itu memenuhi karakteristik diatas</p>
<p>ABTahlil bisa berjalan walaupun internet mati, Anda bisa baca tahlil walaupun tidak menggunakan internet, dengan syarat ketika buka pertama kali harus menggunakan internet setelahnya bisa offline</p>
<p>ABTahlil selalu fresh, update terkini, Anda tidak perlu repot-repot mengupdate via Google Play Store, aplikasi otomatis terupdate (jika ada update terbaru), itu dilakukian dilatar belakang ketika Anda online</p>
</div>Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-14350090011464021152023-03-19T17:17:00.006-07:002023-03-19T17:24:49.018-07:00Install melalui browser <div id="cara">
<h1><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZIWc1jTE15tQqd2swwgaSAsjo7Pi2BdPDIHDbZr0rZGkZjMn5Xb-IZKDQVUY2ju3d0J0u3gcjhB9MX0XyLg_IAkM0R41TcojZ2EmRC3VtgvnMEhS_FcaXRPcYEyVyTOwKfe5Aywht5ojENSfVGzBKoUsSgUzdi1zWCqO4YqQrEgE-zPnRQ3Iae1F3Q/s512/2800525.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="512" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZIWc1jTE15tQqd2swwgaSAsjo7Pi2BdPDIHDbZr0rZGkZjMn5Xb-IZKDQVUY2ju3d0J0u3gcjhB9MX0XyLg_IAkM0R41TcojZ2EmRC3VtgvnMEhS_FcaXRPcYEyVyTOwKfe5Aywht5ojENSfVGzBKoUsSgUzdi1zWCqO4YqQrEgE-zPnRQ3Iae1F3Q/w222-h222/2800525.png" width="222" /></a></div></h1><h1>Cara Install Menggunakan Browser</h1>
<p>Selain install melalui <a href="https://play.google.com/store/apps/details?id=io.tahlil.abtahlil&pli=1" target="_blank">Google Play Store</a> ABTahlil juga bisa diinstall cukup melalui browser</p>
<p>Gunakan browser/peramban <b>Google Chrome</b>, jangan browser yang lain, buka alamat url ini di <b>Google Chrome</b> https://abtahlil.web.app <br /> Setelah terbuka klik tiga titik di pojok atas, lalu pilih instal aplikasi, biasanya system Android melakukan pengecekan keamanan, tunggu hingga selesai, shortcut aplikasi akan tampil di screen smartphone Anda </p>
<p>Ketika buka pertama kali biasanya aplikasi akan berjalan lambat, tetaplah dalam keadaan online kira-kira beberapa menit (paling lama 5 menit, tergantung kecepatan internet), aplikasi akan meload hingga selesai, jika sudah, berikutnya Anda bisa baca semua teks doa dan surat-surat dalam keadaan offline (internet mati)</p>
<p>Tampilan versi browser dan versi Google Play Store akan sedikit berbeda</p>
</div>Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-42579352102952906352023-03-19T17:11:00.001-07:002023-03-19T17:12:42.644-07:00Cara Install di Google Play Store<div class="separator" id="cara" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZIWc1jTE15tQqd2swwgaSAsjo7Pi2BdPDIHDbZr0rZGkZjMn5Xb-IZKDQVUY2ju3d0J0u3gcjhB9MX0XyLg_IAkM0R41TcojZ2EmRC3VtgvnMEhS_FcaXRPcYEyVyTOwKfe5Aywht5ojENSfVGzBKoUsSgUzdi1zWCqO4YqQrEgE-zPnRQ3Iae1F3Q/s512/2800525.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="512" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZIWc1jTE15tQqd2swwgaSAsjo7Pi2BdPDIHDbZr0rZGkZjMn5Xb-IZKDQVUY2ju3d0J0u3gcjhB9MX0XyLg_IAkM0R41TcojZ2EmRC3VtgvnMEhS_FcaXRPcYEyVyTOwKfe5Aywht5ojENSfVGzBKoUsSgUzdi1zWCqO4YqQrEgE-zPnRQ3Iae1F3Q/w238-h238/2800525.png" width="238" /></a></div><br />Buka Google Play Store, lalu di bagian pencarian aplikasi, cari "ABTahlil" (tanpa spasi)<p></p>
<p>Atau langsung buka link ini : <a href="https://play.google.com/store/apps/details?id=io.tahlil.abtahlil&pli=1" target="_blank">ABTahlil</a></p>
<p>Pilih tombol install lalu tunggu hingga selesai</p>
<p>AB Tahlil bisa digunakan pada Android versil 5.0 keatas</p>Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-21449041492852227102023-03-13T14:00:00.003-07:002023-03-19T14:52:10.266-07:00Privacy Policy<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width'>
<title>Privacy Policy</title>
<style> body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding:1em; } </style>
</head>
<body>
<strong>Privacy Policy</strong> <p>
agiptek built the ABTahlil app as
a Free app. This SERVICE is provided by
agiptek at no cost and is intended for use as
is.
</p><a name='more'></a> <p>
This page is used to inform visitors regarding my
policies with the collection, use, and disclosure of Personal
Information if anyone decided to use my Service.
</p> <p>
If you choose to use my Service, then you agree to
the collection and use of information in relation to this
policy. The Personal Information that I collect is
used for providing and improving the Service. I will not use or share your information with
anyone except as described in this Privacy Policy.
</p> <p>
The terms used in this Privacy Policy have the same meanings
as in our Terms and Conditions, which are accessible at
ABTahlil unless otherwise defined in this Privacy Policy.
</p> <p><strong>Information Collection and Use</strong></p> <p>
For a better experience, while using our Service, I
may require you to provide us with certain personally
identifiable information, including but not limited to name, phone, email. The information that
I request will be retained on your device and is not collected by me in any way.
</p> <div><p>
The app does use third-party services that may collect
information used to identify you.
</p> <p>
Link to the privacy policy of third-party service providers used
by the app
</p> <ul><li><a href="https://www.google.com/policies/privacy/" target="_blank" rel="noopener noreferrer">Google Play Services</a></li><!----><!----><li><a href="https://firebase.google.com/support/privacy/" target="_blank" rel="noopener noreferrer">Firebase Crashlytics</a></li><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----></ul></div> <p><strong>Log Data</strong></p> <p>
I want to inform you that whenever you
use my Service, in a case of an error in the app
I collect data and information (through third-party
products) on your phone called Log Data. This Log Data may
include information such as your device Internet Protocol
(“IP”) address, device name, operating system version, the
configuration of the app when utilizing my Service,
the time and date of your use of the Service, and other
statistics.
</p> <p><strong>Cookies</strong></p> <p>
Cookies are files with a small amount of data that are
commonly used as anonymous unique identifiers. These are sent
to your browser from the websites that you visit and are
stored on your device's internal memory.
</p> <p>
This Service does not use these “cookies” explicitly. However,
the app may use third-party code and libraries that use
“cookies” to collect information and improve their services.
You have the option to either accept or refuse these cookies
and know when a cookie is being sent to your device. If you
choose to refuse our cookies, you may not be able to use some
portions of this Service.
</p> <p><strong>Service Providers</strong></p> <p>
I may employ third-party companies and
individuals due to the following reasons:
</p> <ul><li>To facilitate our Service;</li> <li>To provide the Service on our behalf;</li> <li>To perform Service-related services; or</li> <li>To assist us in analyzing how our Service is used.</li></ul> <p>
I want to inform users of this Service
that these third parties have access to their Personal
Information. The reason is to perform the tasks assigned to
them on our behalf. However, they are obligated not to
disclose or use the information for any other purpose.
</p> <p><strong>Security</strong></p> <p>
I value your trust in providing us your
Personal Information, thus we are striving to use commercially
acceptable means of protecting it. But remember that no method
of transmission over the internet, or method of electronic
storage is 100% secure and reliable, and I cannot
guarantee its absolute security.
</p> <p><strong>Links to Other Sites</strong></p> <p>
This Service may contain links to other sites. If you click on
a third-party link, you will be directed to that site. Note
that these external sites are not operated by me.
Therefore, I strongly advise you to review the
Privacy Policy of these websites. I have
no control over and assume no responsibility for the content,
privacy policies, or practices of any third-party sites or
services.
</p> <p><strong>Children’s Privacy</strong></p> <div><p>
These Services do not address anyone under the age of 13.
I do not knowingly collect personally
identifiable information from children under 13 years of age. In the case
I discover that a child under 13 has provided
me with personal information, I immediately
delete this from our servers. If you are a parent or guardian
and you are aware that your child has provided us with
personal information, please contact me so that
I will be able to do the necessary actions.
</p></div> <!----> <p><strong>Changes to This Privacy Policy</strong></p> <p>
I may update our Privacy Policy from
time to time. Thus, you are advised to review this page
periodically for any changes. I will
notify you of any changes by posting the new Privacy Policy on
this page.
</p> <p>This policy is effective as of 2023-03-13</p> <p><strong>Contact Us</strong></p> <p>
If you have any questions or suggestions about my
Privacy Policy, do not hesitate to contact me at agiptek@gmail.com.
</p> <p>This privacy policy page was created at <a href="https://privacypolicytemplate.net" target="_blank" rel="noopener noreferrer">privacypolicytemplate.net </a>and modified/generated by <a href="https://app-privacy-policy-generator.nisrulz.com/" target="_blank" rel="noopener noreferrer">App Privacy Policy Generator</a></p>
</body>
</html>
Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-67013689856164578862022-12-24T21:04:00.002-08:002022-12-24T21:08:42.814-08:00Menyisipkan gambar format SVG di file HTML<p> </p><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxOM7l4-Zebd9Ixkmarp_sAszppyx6bKjsS02EnuKvxhFo8G3rFcwk44pNCJ_FBmNQXqvv7s3O4Ki4AMIcbz_9kTJ4_xZsD8EQJDvuqCql4fjzdzE9THmZdPKGtNRDKc8hjRKrIu2AqKf-NavT5AEqalkBN-21aSVz0KLAxwoHWIdpDAZnQ8w9VSH32Q/s225/SVG.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="225" data-original-width="225" height="225" class="img-fluid" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxOM7l4-Zebd9Ixkmarp_sAszppyx6bKjsS02EnuKvxhFo8G3rFcwk44pNCJ_FBmNQXqvv7s3O4Ki4AMIcbz_9kTJ4_xZsD8EQJDvuqCql4fjzdzE9THmZdPKGtNRDKc8hjRKrIu2AqKf-NavT5AEqalkBN-21aSVz0KLAxwoHWIdpDAZnQ8w9VSH32Q/s1600/SVG.png" width="225" /></a></div><br />SVG (Scalable Vector Graphics) merupakan format file gambar, banyak developer web lebih suka menggunakan gambar berformat SVG untuk disisipkan dalam halaman web.<br />Itu dikarenakan gambar dengan formar SVG jika dibesarkan maka kualitas gambar tidak akan pecah, kualitas gambar tetap bagus.<p></p><p><span></span></p><a name='more'></a><p>Karena itu, untuk pengembang web responsif, format SVG sangat cocok. Karena gambar tidak akan pecah ketika ukuran screen berbeda-beda<br />Mari bersama-sama belajar menyisipkan gambar format SVG kedalam file HTML.<br />Ada beberapa cara, salah satunya adalah dengan langsung menyisipkan kode dari file SVG kedalam HTML. Menurut penulis (ini pendapat pribadi). Hal ini kurang bagus,karena ukuran file HTML jadi membengkak ditambah kode didalam file HTML jadi sangat banyak, sehingga menyulitkan jika ingin melakukan pengembangan selanjutnya<br />Cara satunya lagi adalah dengan mereferensikan file SVG didalam HTML, mirip dengan menyisipkan file gambar lainnya seperti img src=""<br />tapi untuk SVG agak sedikit berbeda<br />ini contohnya </p><p><br /></p>
<p>
</p><pre> <code>
<div>
<object type='image/svg+xml' data='https://agiptek-6292d.web.app/assets/img/HargaWebDomain.svg' class='objHarga'> </object>
</div>
</code>
</pre>
<p>Nah referensinya bukan di src="" seprti file gambar lainnya tapi di data=''<br />catatan tambahan, terkadang browser lama tidak support SVG</p>
Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-34038872194649912852022-12-20T20:31:00.002-08:002022-12-20T20:32:39.152-08:00Cara pindahkan akun blogger<p>Bagaiman cara memindah tangankan akun blogger? - Contoh kasus, Anda membuatkan desain blogger, setelah selesai, blogger akan diserahkan kepada pembeli yang memesannya.<span></span></p><a name='more'></a><p></p><p>Cara terbaiknya adalah dengan memindahkan blog yang sudah dibuat ke akun lain sang pembeli. Fitur dari blogspot memungkinkan hal seperti ini dilakukan.<br /><br />Untuk memindahkan blog ke akun email GMAIL anda ke akun GMAIL orang lain, lakukan hal-hal sederhana berikut ini:<br /><br /></p><ul style="text-align: left;"><li>Masuklah ke akun blogger.com Anda</li><li>Pilih blognya dan masuk ke menu SETELAN/SETTING, lalu pilih sub menu DASAR/BASIC</li><li>Klik link bertuliskan + Tambahkan Penulis / Add Authors dan kirim undangan ke akun e-mail yang hendak anda jadikan Admin. Jadi isi kotak yang muncul dengan alamat e-mail yang anda inginkan lalu kirim undangannya.</li><li>Tunggu sampai akun email tersebut mengklik link undangan yang ada di dalam inbox e-mail-nya</li><li>Setelah akun GMAIL tersebut bergabung jadi penulis ubah statusnya dari PENULIS menjadi ADMIN</li><li>Setelah anda mengubah akun GMAIL kedua menjadi admin, maka pada akun anda sendiri akan muncul tanda X yang jika anda klik akan menghapus akun yang pertama</li></ul><p>Demikian caranya, simpel dan mudah <br /></p>Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-8093763779121313452022-12-20T20:18:00.004-08:002022-12-20T20:19:45.508-08:00Cara mudah setting Grid di CSS<p>Terkadang grid css pada bootstrap sulit diaplikasikan, terutama jika cell (biasanya div) adalah data-data yang berupa array.<br />jika list div ingin kita susun rapi dengan tampilan beberapa column maka css murni adalah solusinya<span></span></p><a name='more'></a><br />Sebagai contoh, jika parent div mempunyai id = "utama". Maka code-nya seperti ini<p></p><p><br /></p>
<pre> <code>
#utama {
display: grid;
grid-template-columns: auto auto auto auto;
}
</code>
</pre>
<p> pada grid-template-columns, jika ada 3 value maka ada 3 kolom, 2 value maka ada 2 kolom, contoh diatas ada 4 value auto maka ada 4 kolom yang ukurannya otomatis ditetapkan <br />Jika ingin ukuran spesifik maka ganti auto menjadi ukuran angka, misalnya auto diganti 20px , maka ukuran kolom menjadi 20px</p><p>tutorial grid template : https://www.w3schools.com/cssref/pr_grid-template-columns.php</p><p>running test grid template : https://www.w3schools.com/cssref/tryit.php?filename=trycss_grid-template-columns <br /></p>
Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-68951446901893637602022-12-20T03:07:00.010-08:002022-12-20T20:22:08.914-08:00Cara praktis membuat template blogger<p>Karena harga sewa server begitu mahal, maka mencoba memanfaatkan blogger sebagai tempat penyimpanan artikel dan server gratisan atau <i>semi gratis</i> untuk halamannya <br />Maka rencanya adalah meletakkan halaman-halaman statis di server-server semi gratis seperti firebase dan meletakkan artikel-artikel di blogger<a name='more'></a><br />Oleh karena itu, tampilan blogger harus sama persis seperti tampilan halaman utamanya, yang sebenarnya beda url dan beda server<br /><br /><span></span></p>Buka blogger.com, pilih blog yang mau di buatkan templatenya. Pilih menu Tema. Pilih salah satu Tema, misalnya ConTempo Light.<br />Terapkan. Jika sudah, pilih menu sesuaikan, dan pilih edit HTML. Hapus seluruh bagian <head> dan <body><br />Buka template boostrap yang sudah di download<br />copykan bagian ini<p></p>
<pre><code>
<meta charset="utf-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
</code>
</pre>
<p>ini penting untuk tampilan di smartphone atau layar yang lebih kecil</p><p>selanjutnya copykan semua link bootstrap yang diperlukan (catatan : setiap template bootstrap kadang berbeda sumbernya)<br />contoh :<br /> <br /></p>
<pre><code>
<!--Bootstrap Icons-->
<link href="https://madian.web.app/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"></link>
<!--Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet"></link>
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css">
</code>
</pre>
<p>selanjutnya masukkan link css, ini bisa diambil dari situs yang sudah jadi (templatenya)</p><p>contoh:</p><p> <br /></p>
<pre><code>
<link href="https://madian.web.app/assets/css/style.css" rel="stylesheet">lt;/link>
</code>
</pre>
<p>Setelah itu masukkan kode untuk persiapan css</p>
<pre><code>
<b:skin>
<![CDATA[
]]>
</b:skin>
</code>
</pre>
<p>nantinya didalamnya bisa dimasukkan kode css untuk tampilan blogger</p><p>masukkan tag buka tutup body yaitu <body></body><br />didalamnya masukkan bagian atas situs, biasanya header dan navigasi<br /><br />contoh:</p><p> <br /></p>
<pre><code>
<!--======= Header =======-->
<header class="fixed-top" id="header">
<div class="container d-flex align-items-center justify-content-between">
<h1 class="logo"><a href="https://madian.web.app/index.html">Madian</a></h1>
<!--Uncomment below if you prefer to use an image logo-->
<!--<a href="index.html" class="logo"><img src="https://madian.web.app/assets/img/logo.png" alt="" class="img-fluid"></a>-->
<nav class="navbar" id="navbar">
<ul>
<li><a class="nav-link scrollto active" href="https://madian.web.app/#hero">Beranda</a></li>
<li><a class="nav-link scrollto" href="https://madian.web.app/#about">Tentang</a></li>
<li><a class="nav-link scrollto" href="https://madian.web.app/#services">Services</a></li>
<li><a class="nav-link scrollto" href="https://madian.web.app/#portfolio">Portfolio</a></li>
<li><a class="nav-link scrollto" href="https://madian.web.app/#team">Team</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a class="nav-link scrollto" href="https://madian.web.app/#contact">Contact</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!--.navbar-->
</div>
</header><!--End Header-->
</code>
</pre>
<p>ganti setiap href link, menuju situs utama</p>
<p>Setelah header kita masukkan footer beserta bagian bawahnya (biasanya termasuk script javascript).</p>
<p>Antara header dan footer nanti kita masukkan section main, bagian ini nantinya akan kita masukkan script untuk blogg</p>
<p>Ini contoh bagian footer beserta javascript, letaknya tepat diatas tag penutup <body><br />contoh<br />
</p><pre>
<code>
<!--======= Footer =======--><br /> <footer id="footer"><br /><br /> </footer><!--End Footer--><br /><br /> <a class="back-to-top d-flex align-items-center justify-content-center" href="#"><i class="bi bi-arrow-up-short"></i></a><br /><br /> <!--Vendor JS Files--><br /> <script src="https://madian.web.app/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script><br /> <script src="https://madian.web.app/assets/vendor/glightbox/js/glightbox.min.js"></script><br /> <script src="https://madian.web.app/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script><br /> <script src="https://madian.web.app/assets/vendor/swiper/swiper-bundle.min.js"></script><br /> <script src="https://madian.web.app/assets/vendor/php-email-form/validate.js"></script><br /><br /> <!--Template Main JS File--><br /> <script src="https://madian.web.app/assets/js/main.js"></script>
</code>
</pre>
nah bagian tengah antara header dan footer diisi dengan <b:section> <br />contoh<br />
<pre><code>
<section id="tengah" class="tengah"><br /> <b:section id='main'><br /> <br /> </b:section><br /></section>
</code>
</pre>
nah pada bagian section ini nanti bisa dimasukkan blog section lainnya dan widget widget lainnya<br /><br />sekarang pada "<b:section id='main'>" kita masukkan beberapa widget<br />widget pertama via kode <br />widget ini berisi list tulisan yang sudah dimasukkan kedalam blog<br />ketikkan<br />
<pre><code>
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog' version='2' visible='true'></b:widget>
</code>
</pre>
nanti settingan nya masuk sendiri otomatis<br />
Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-41128369578994556222021-08-03T01:23:00.004-07:002022-12-23T02:32:43.009-08:00Cara tambahkan service worker ke vue js<div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqg2SfjPwcAlPweajtGcN_uoQGrv3gj0nltoEXqVDBUrDOelTIektGRO3Byimh9diJKt1WcweYoiPJ9z63NCAzDTdUNWTgOtb7nl6e1h4CcxXhW83L49oItn2G3olJT8ZBrIfasP6NU50l/s343/vuepwa.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="147" data-original-width="343" height="137" class="img-fluid" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqg2SfjPwcAlPweajtGcN_uoQGrv3gj0nltoEXqVDBUrDOelTIektGRO3Byimh9diJKt1WcweYoiPJ9z63NCAzDTdUNWTgOtb7nl6e1h4CcxXhW83L49oItn2G3olJT8ZBrIfasP6NU50l/s320/vuepwa.png" width="320" /></a></div><br />Sebelumya sudah pernah memakai beberapa cara
install dengan perintah vue add pwa
tapi tidak berhasil, pernah juga coba dengan cara menambahkan service worker secara manual tapi tidak juga berhasil<br />
lalu pakai cara terakhir<span><a name='more'></a></span><br />alhamdulillah berhasil<br /><ol style="text-align: left;"><li>pertama gunakan perintah <i>vue add workbox-pwa</i></li><li>lalu edit file vue.config.js , pada baris opsi pwa jadi seperti ini<br /><code> pwa:{
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: './src/sw.js',
swDest: 'service-worker.js',
},
name: 'Pergihaji.id',
shortName: 'pergihaji',
themeColor: '#4DBA87',
msTileColor: '#000000',
manifestOptions: {
start_url: '/',
},
},</code><br /></li><li>Kurang lebih seperti itu saja, manifest.json otomatis di generate, jadi sebaiknya pada file <i>public\index.html</i> arahkan link favicon.ico dan manifest.json dengan benar<br /></li></ol>Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-38074643967971916052020-07-14T19:21:00.002-07:002022-12-23T02:34:05.737-08:00Tips Supaya bubur kacang hijau empuk<div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrPu99gDPX4A0zGHWVCkFPP3BBnL0GKuhRjdkfGLHaXokVTTX83lCdWvsy8nLwCf34xATqeUKV8KJHhqVuRF0Upy7EdYc6W1JqzZxz9csNMgrCnBw2dK1xW9rvywwW1esvQDNHPp6XfDJC/s1203/SehaTipsBubur.JPG" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="632" data-original-width="1203" class="img-fluid" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrPu99gDPX4A0zGHWVCkFPP3BBnL0GKuhRjdkfGLHaXokVTTX83lCdWvsy8nLwCf34xATqeUKV8KJHhqVuRF0Upy7EdYc6W1JqzZxz9csNMgrCnBw2dK1xW9rvywwW1esvQDNHPp6XfDJC/s320/SehaTipsBubur.JPG" width="320" /></a>Masak bubur kacang hijau, biasanya harus direndam dulu agak lama, biar
empuk, nah ini ada tips supaya bubur kacang hijau empuk, enak dan lezat
dengan cara mudah simple dan cepat, lezat<br /></div><span><a name='more'></a></span><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dwfhdeqAR7Hh8exVExKMMvggsQ2T3QXGLvA3M2Z6Fe19WS3me9abB4bfnOPb9JihSXN2mLlpoU19IuhmPJ2Vw' class='b-hbp-video b-uploaded' frameborder='0'></iframe></div><div class="separator" style="clear: both; text-align: left;"><br /></div>Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-72829569768816729242020-07-03T16:30:00.009-07:002022-12-23T02:34:29.293-08:00OOP pada JavaScript<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3XUxLjCMcfbr8keM4lADIc9pQhY1LzM7AbSuox5Hdd39tZFPrsvBN7-EFi7MdIjIS-Irf8jwpt5WSSGsDTRVQ_5W1sgq623wBT9GnVeVHE4A2wQZFFbb5AqcSvj4pfaBwXwFbKh8rkc_3/s288/es6.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="288" data-original-width="288" class="img-fluid" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3XUxLjCMcfbr8keM4lADIc9pQhY1LzM7AbSuox5Hdd39tZFPrsvBN7-EFi7MdIjIS-Irf8jwpt5WSSGsDTRVQ_5W1sgq623wBT9GnVeVHE4A2wQZFFbb5AqcSvj4pfaBwXwFbKh8rkc_3/" /></a></div>Ini menyenangkan, dulunya javascript adalah bahasa pemograman prosedural, panggil function, panggil function dan seterusnya<br />Tapi banyak perubahan drastis, semenjak ES5 sudah ada format class mirip-mirip dengan bahasa pemograman java.<br /><div><br /></div><span><a name='more'></a></span><div><br /></div><div>Sebelum bahas lebih dalam lagi, gak ada salahnya kita kenalan dengan EcmaScript.</div><div>Mari kita kutip dari wikipedia :</div><blockquote><div>Ecmascript is a general-purpose programming language, standardized by Ecma International<br /></div></blockquote><div>Terjemahan bebasnya, EcmaScript itu adalah bahasa pemograman untuk umum, bahasa ini sesuai dengan standar dari <i>Ecma International</i> . Nah javascript adalah implementasi dari standar yang sudah ditentukan oleh <i>Ecma International</i> , nah sejak tahun 2015 EcmaScript (selanjutnya kita sebut aja ES) sudah masuk versi 6, dan banyak perubahan keren salah satunya masalah OOP.</div><div><br /></div><div>JavaScript yang awalnya merupakan bahasa pemograman prosedural, sebenarnya sudah lama diarahkan agar bisa jadi bahasa pemograman OOP, tapi gak OOP banget bahkan jauh dari OOP, boleh dibilang sebelum tahun 2015 banyak claim javascript adalah OOP tapi itu claim yang dipaksakan banget. Nah sejak ES6, javascript sudah agak OOP (menurut saya belum se perfect Java)</div><div><br /></div><div>Nah ini sedikit contoh class dalam bahasa javascript</div>
<pre>
<code>
class kelas{
namaWaliKelas ;
level;
ruangan;
constructor (level, ruangan){
this.level = new Number(level);
this.ruangan = new String(ruangan);
}
set waliKelas(nama){
let namaWali = new String(nama);
this.namaWaliKelas = namaWali ;
}
get waliKelas(){
return this.namaWaliKelas ;
}
}
let Kelas1 = new kelas(1, "ruangan atas");
Kelas1.waliKelas = "Pak Nurdin";
console.log(Kelas1.waliKelas);
</code>
</pre>
<div>Selamat mencoba, semoga bermanfaat 😊</div><div>BTW sekarang ES sudah masuk versi 10, tapi sayangnya browser belum banyak yang menggunakan ES8 biasanya browser baru menggunakan versi ES6.<br /></div><div><br /></div><div><br /></div><div><br /></div><div><br /></div><div> </div><div><br /></div><div><br /></div><div><br /></div><div><br /></div>Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-42545422158125283132020-07-02T17:00:00.008-07:002022-12-23T02:34:54.486-08:00Cara Menggunakan Live Server pada VSC<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1hWwQLdUoAAbx266EbV4XFWI5B-nNCmdXN0Z7jX5qAN9VIv9WdfkYdp3JjQsgVRiNKMekB5DsmiZGOIWAVy0_TZ1qunFYLhyphenhyphen68sGDCGfx7T7KpW_bHm6XhjjZVk0m-QzS37Byq5ekRwwN/s225/vsc.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="225" data-original-width="225" height="180" class="img-fluid" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1hWwQLdUoAAbx266EbV4XFWI5B-nNCmdXN0Z7jX5qAN9VIv9WdfkYdp3JjQsgVRiNKMekB5DsmiZGOIWAVy0_TZ1qunFYLhyphenhyphen68sGDCGfx7T7KpW_bHm6XhjjZVk0m-QzS37Byq5ekRwwN/w180-h180/vsc.png" width="180" /></a></div>Ada kalanya kita ingin mengetes file html atau code javascript yang kita buat pada browser atau console<br /><div>Pada Visual Studio Code (VSC) ada fitur Live Server yang bermanfaat</div><span><a name='more'></a></span><div>Untuk menggunakan Live Server pada VSC, pertama kita harus buka file melalui open folder</div><div>Jika buka file melalui menu open file, biasanya fitur ini tidak bisa digunakan.<br /></div><div>Bukalah folder dari menu file-->Open folder , atau dengan ctrl+k ctrl+o</div><div>Pilih dan buka file html</div><div>Maka di pojok kanan bawah ada tulisan "Go Live"</div><div>Klik, maka akan membuka browser</div><div><br /></div><div>Fitur ini sangat bermanfaat untuk test script yang sudah kita buat, saya biasa menggunakan mozilla, karena ada fitur console, debug dll yang bermanfaat untuk test javascript yang sudah kita buat</div><div><br /></div><div>Semoga tips ringkas ini bermanfaat untuk para jasa pembuatan website, programmer, mahasiswa atau siapapun yang senang oprek-oprek seperti saya</div><div>selamant mencoba<br /></div>Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-67654030949025523722020-07-02T06:15:00.013-07:002022-12-23T02:35:11.547-08:00Hide and Show element HTML5<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0_KeOBxrKMTtBsJ07-Q-QlvAZPhE7aAiOU873d34TuHQqnO1fl3AiEhgTO1eaBEEF9Iybxs2yThLOvwvJjZY5vt8VFBSPk4n7Wh-vcan75ApQozLfMxMozjOrq9vBk63Vde6BH6xfhSyN/s512/html.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="512" height="205" class="img-fluid" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0_KeOBxrKMTtBsJ07-Q-QlvAZPhE7aAiOU873d34TuHQqnO1fl3AiEhgTO1eaBEEF9Iybxs2yThLOvwvJjZY5vt8VFBSPk4n7Wh-vcan75ApQozLfMxMozjOrq9vBk63Vde6BH6xfhSyN/w205-h205/html.png" width="205" /></a></div><div>Ketika membuat halaman web, terkadang kita ingin menyembunyikan atau menampilkan bagian tertentu dari halaman web.</div><div>Dulu biasanya saya menggunakan fitur css style display none untuk menyembunyikan atau display block untuk menampilkan.</div><div>Tapi penggunaan css properti display none atau block saya dapati ada beberapa kekurangan</div><span><a name='more'></a></span><div>Beberapa hari yang lalu saya dapati cara lain, dan rasanya cocok dengan cara ini, yaitu dengan memanfaatkan css transform property.</div><div>merujuk ke w3schools.com mengenai penjelasan transform property</div><blockquote><div><i>The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.</i><br /></div></blockquote><div>terjemahan bebasnya sebagai berikut:</div><div><i><span class="tlid-translation translation" lang="id"><span title="">Properti transform menerapkan transformasi 2D atau 3D ke elemen.</span> <span title="">Properti ini memungkinkan Anda untuk memutar, menskalakan, memindahkan, condong, dll.</span></span></i></div><div><i><span class="tlid-translation translation" lang="id"><span title=""><br /></span></span></i></div><div><span class="tlid-translation translation" lang="id"><span title="">nah dengan </span></span><span class="tlid-translation translation" lang="id"><span title="">property</span></span><span class="tlid-translation translation" lang="id"><span title=""> transform ini kita gunakan untuk memindahkan posisi elemen yang ingin kita sembunyikan ke luar screen sehingga tak terlihat.</span></span></div><div>caranya pertama-tama kita buat didalam tag <style> atau didalam file .css kode berikut ini</div><div> <br /></div><div>
<pre style="text-align: left;"> <code>
<style><br /> .visible { transform: translateX(0); -webkit-transition: 0.5s; }<br /> .hidden { transform: translateX(-100%); -webkit-transition: 0.5s; }<br /></style>
</code>
</pre></div>
<div>nah dengan demikian jika ada elemen dengan class yang bernama visible maka dia akan tampil dan jika ada elemen dengan class property hidden maka dia akan tersembunyi (keluar dari layar/screen hingga tak tampak) <br /></div><div><br /></div><div>Selanjutnya kita buat didalam tang <script> atau didalam file .js kode berikut ini (dengan asumsi elemen yang ingin kita hide atau show mempunyai id "targetnya" contoh:
<p>
<pre>
<code>
<script><br /> function hideElemen() {<br /> let x = document.getElementById('targetnya');<br /> x.classList.toggle('hidden');<br /> x.classList.remove('visible');<br /> }<br /><br /> function showElemen(){<br /><br /> let x = document.getElementById('targetnya');<br /> x.classList.toggle('visible');<br /> x.classList.remove('hidden'); <br /> }<br /></script>
</code>
</pre>
</p>
<div> Nah setelah itu terserah Anda ingin memanggil fungsi show atau hide atau dengan gabungan keduanya, misalnya menggunakan if then else, jika dalam keadaan show maka dihide dan jika dalam keadaan hide maka dishow jika sembuah tomblo diklik misalnya, variasi selanjutnya setelah Anda</div><div><br /></div><div>Nah cukup sekian tips singkat ini, semoga bermanfaat bagi yang buka usaha jasa pembuatan website atau mahasiswa atau siapapun yang berkepentingan 😊😊<br /></div></div>Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.comtag:blogger.com,1999:blog-7509141176024752107.post-9627760294217921682020-06-29T17:31:00.001-07:002020-06-29T17:31:35.886-07:00Allah Memerintah Nabi Saw Agar Mencintai Empat Sahabat Agung Beliau<h1 class="title style-scope ytd-video-primary-info-renderer"><font size="3">Allah Memerintah Nabi Saw Agar Mencintai Empat Sahabat Agung Beliau</font></h1><div>Allah SWT Mencintai Empat Sahabat Agung Nabi Saw dan Memerintahkan Agar Beliau Mencintai Mereka.<br /></div><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/XSkVhG5Tfws" width="320" youtube-src-id="XSkVhG5Tfws"></iframe></div><div class="separator" style="clear: both; text-align: left;"><br />
<br />Silahkan subscribe dan like channel youtube : <a href="https://www.youtube.com/channel/UCJy9VMuqvBApRKIofcv_Epw">Bersama Ali Umar Al Habsyi</a><br /></div>Muhamad Farhanhttp://www.blogger.com/profile/15722052323887215115noreply@blogger.com