Tag: Asynchronous

CategoriesProgramming

Memahami Synchronous dan Asynchronous dalam Pemrograman

Posted on June 14, 2020by Dhendik Dwi Prasetyo

         Pertama kali saya terjun di dunia kerja langsung menghadapi banyak materi yang asing. Namun materi pertama dan selalu saya gunakan sampai sekarang adalah suatu proses menjalankan aplikasi dan proses jalannya secara client dan server side, hal utama yang menurut saya perlu dipelajari adalah  Synchronus dan Asynchronus. Materi ini menurut saya sangat diperlukan untuk dasar pemrograman (walaupun saat kuliah tidak pernah ada :3). Walaupun secara tidak langsung hampir semua Web Developers  menggunakannya namun perlu Pengetahuan lebih dalam karena proses ini sederhana dan berdampak ke semua aspek kehidupan program Anda.

Apakah yang di maksud dengan Synchronouse?

Synchronous adalah proses jalannya program secara sequential , disini yang dimaksud sequential ada berdasarkan antrian ekseskusi program. Pada dasarnya semua Bahasa pemrograman menggunakan Asynchronouse terutama PHP.

Cotoh Synchronous di Bahasa Perograman PHP:

beri nama file synchronous.php
<?php
$now = date(‘Y-m-d’);
// antrian 1
echo $now.‘ |’;
$yesterday = date(‘Y-m-d’,strtotime(‘-1 days’));
// antrian 2
echo $yesterday.‘ |’;
$week = date(‘Y-m-d’,strtotime(‘-1 week’));
// antrian 3
echo $week.‘ |’;
?>
Hasil Eksekusi:
Hasil eksekusi file php sync
Penjelasan: Pada saat file synchronouse.php dieksekusi maka proses nya adalah membaca antrian 1 terlebih dahulu kemudian antrian 2 dan terakhir adalah antrian 3.

Apakah yang dimaksud dengan Asynchronous?

Asynchronous adalah proses jalannya program bisa dilakukan secara bersamaan tanpa harus menunggu proses antrian. Synchronous merupakan bagian dari Asynchronous (1 antrian) dimana proses akan dieksekusi secara bersamaan dan untuk hasil tergantung lama proses suatu fungsi synchronous . Asynchronouse hampir disemua Bahasa pemrograman ada namun untuk PHP masih belum ada. PHP sebagai server side hanya menyediakan synchronous namun bisanya di WEB Developers tetap digunakan namun menggunakan AJAX (Asynchronous Javascript And XML) untuk proses Asynchronouse.

Contoh Asynchronouse PHP + AJAX

Buat file HTML+CSS+AJAX dengan nama test.html

<style type=“text/css”>
  #sync
{
  width: 100px;
  height: 100px;
  background: red;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  float:left;
  margin:5px;
}
.one
{
  line-height: 100px;
  color:white;
  margin-left:30px;
  font-size:25px;
}
.two
{
  line-height: 100px;
  color:white;
  margin-left:30px;
  font-size:25px;
}
</style>
<div id=“sync”><span class=“one”>0</span></div>
<div id=“sync”><span class=“two”>0</span></div>
<br />
<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js” 
type=“text/javascript”></script>
<script type=“text/javascript”>
  $.ajax({
        url: ‘syncronous.php?1’,
        type: “GET”,
        success: function(result)
        {
          $(‘.one’).html(result);
          $(‘.one’).each(function () {
              $(this).prop(‘Counter’,0).animate({
                  Counter: $(this).text()
              }, {
                  duration: 4000,
                  easing: ‘swing’,
                  step: function (now) {
                      $(this).text(Math.ceil(now));
                  }
              });
          });
        }
      });
  $.ajax({
        url: ‘syncronous.php?2’,
        type: “GET”,
        success: function(result)
        {
          $(‘.two’).html(result);
          $(‘.two’).each(function () {
              $(this).prop(‘Counter’,0).animate({
                  Counter: $(this).text()
              }, {
                  duration: 4000,
                  easing: ‘swing’,
                  step: function (now) {
                      $(this).text(Math.ceil(now));
                  }
              });
          });
        }
      });
  
</script>
Buat file PHP dengan nama syncronous.php
<?php
if(isset($_GET[“1”])){
    
    echo json_encode(20000);
} 
if(isset($_GET[“2”])){
    
    echo json_encode(40000);
}
?>
 Hasil Eksekusi:
Nilai terus berjalan Secara bersamaan tanpa ada Antrian
Penjelasan: Counter Nilai terus berjalan tanpa  ada antrian.
Berikut Source Code Link Gitlab apabila anda ingin mencoba: Link

Contoh Asynchronous di NODE JS

Di artikel saya sebelumnya pernah membahas chat menggunakan Socket.io dimana basic dari Realtime Chat dengan socket.IO ada Synchronous. Silahkan lihat di Artikel saya berikut : Realtime Chat dengan Html, Javascript dan Socket.io

Berikut Link Artikel untuk mempelajari Asynchronous di beberapa Bahasa pemrograman:

 

Note: Synchronous  dan Asynchronous saling berkisambungan jadi apabila anda ingin lebih detail bisa Anda pahami lebih dalam. Kegunakan juga sesuai kebutuhan.

Semangat Belajar!!
Wassalamualaikum..