Kandungan

Client-Side vs Server-Side

Suatu sistem berasaskan web adalah komunikasi antara 2 pihak. Pihak pertama ialah pelayar web iaitu yang kita panggil client-side. Pihak kedua pula ialah pelayan ataupun server-side. Client akan memulakan proses komunikasi dengan meminta fail dari server, dan server akan memulangkan fail tersebut kepada client. Client akan memproses fail tersebut dan memaparkannya kepada pengguna. Seorang pengaturcara web perlu mempunyai pemahaman yang baik tentang konsep ini.

Bahasa Client-Side

Fail yang diterima pada client biasanya adalah dalam bahasa HTML. Kandungan yang ingin dipaparkan seperti teks, imej, jadual, dan lain-lain ditetapkan melalui HTML. Satu bahasa lain pula iaitu CSS digunakan untuk membantu menggayakan elemen yang terdapat dalam HTML tadi, seperti mewarnakan teks atau latar belakang, menetapkan tebal garisan, dan sebagainya. HTML dan CSS dikatakan sebagai bahasa pengaturcaraan client-side.

Di bawah ialah contoh mudah kandungan sebuah fail HTML yang mengandungi sedikit CSS. Ia akan memaparkan sebuah jadual:

<html>
  <head>
    <style rel="stylesheet" type="text/css">
    /*
     * CSS untuk menetapkan gaya tulisan dan jadual
     */
    div.title {
      font-size: 130%;
    }
    table {
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 5px;
    }
    </style>
  </head>
  <body>
    <!--
      Kandungan atau maklumat yang ingin dipaparkan
    -->
    <div class="title">Density of Precious Metals, in g/cm^3</div>
    <table>
      <tr>
        <th>Element</th>
        <th>Density</th>
      </tr>
      <tr>
        <td>Copper</td>
        <td>8.94</td>
      </tr>
      <tr>
        <td>Silver</td>
        <td>10.49</td>
      </tr>
      <tr>
        <td>Gold</td>
        <td>19.30</td>
      </tr>
      <tr>
        <td>Platinum</td>
        <td>21.45</td>
      </tr>
    </table>
  </body>
</html>

Jadual seperti di bawah ini akan dipaparkan pada pelayar web:

Result 1

Bahasa Server-Side

Fail HTML ini mungkin sahaja adalah sememangnya sebuah fail sebenar yang berada di server. Sang pengaturcara menaipkan kod-kod HTML dan CSS seperti di atas ke dalam sebuah editor teks dan menyimpannya sebagai sebuah fail. Fail itu kemudiannya diletakkan di dalam satu folder di server yang boleh diakses oleh client atau pelayar web. Fail seperti ini kadangkala dipanggil static HTML.

Namun boleh jadi juga fail HTML ini tidak wujud terlebih dahulu, tetapi dijanakan secara dinamik. Sang pengaturcara boleh menggunakan bahasa seperti PHP, Java, C#, Ruby, Python, Perl dan sebagainya untuk menjana HTML tersebut. Bahasa-bahasa seperti ini disebut bahasa pengaturcaraan server-side.

Berikut adalah contoh bagaimana bahasa PHP boleh digunakan untuk menghasilkan output yang seperti di atas, tetapi dengan datanya diambil dari sebuah pangkalan data berbanding ditaip terus seperti tadi.

<html>
  <head>
    <style rel="stylesheet" type="text/css">
    /*
     * CSS untuk menetapkan gaya tulisan dan jadual
     */
    div.title {
      font-size: 130%;
    }
    table {
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 5px;
    }
    </style>
  </head>
  <body>
    <!--
      Kandungan atau maklumat yang ingin dipaparkan
    -->
    <div class="title">Density of Precious Metals, in g/cm^3</div>
    <table>
      <tr>
        <th>Element</th>
        <th>Density</th>
      </tr>
      <?php
        /*
         * Dapatkan data dari pangkalan data.
         * Setiap "metal" mengandungi maklumat
         * "name" dan "density".
         */
        $metals = retrieveMetalDensitiesFromDatabase();

        foreach ($metals as $metal)
        {
      ?>
      <tr>
        <td><?php echo $metal["name"]; ?></td>
        <td><?php echo $metal["density"]; ?></td>
      </tr>
      <?php } ?>
    </table>
  </body>
</html>

Ia akan menghasilkan output sama seperti di atas, jika kandungan pangkalan data itu mengandungi senarai yang sama.

JavaScript

Berbalik kepada client-side, ada satu lagi bahasa yang kita boleh gunakan iaitu JavaScript. Ia boleh menjadikan halaman web lebih dinamik, contohnya seperti menggerakkan teks ke kiri dan ke kanan, mengeluarkan dialog amaran, menukar warna latar belakang mengikut masa dan lain-lain. Secara mudahnya, boleh dikatakan JavaScript ini memanipulasi HTML dan CSS tadi untuk memaparkan kandungan dan gaya berbeza kepada pengguna.

Contoh di bawah ialah kod JavaScript yang memaparkan waktu semasa. Ia berdetik setiap saat and mengemaskini waktu yang dipaparkan.

<html>
  <body>
    Time now is <span id="clock"></span>.
    <script>
    function displayTime() {
      document.getElementById("clock").innerHTML = new Date();
    }
    setInterval(displayTime, 1000);
    displayTime();
    </script>
  </body>
</html>
Time now is .

Penggunaan JavaScript pada masa kini sudah menjadi sangat maju sehingga pelbagai perkara dapat dibuat untuk menjadikan paparan web lebih menarik. Ada banyak kod JavaScript yang siap digunakan di luar sana.

Di sini ingin dibawakan satu contoh kod JavaScript yang dinamakan Google Charts yang mana boleh digunakan untuk membina perlbagai graf dan carta. Kita cuba masukkan satu carta lajur untuk jadual kita di atas.

<html>
  <head>
    <style rel="stylesheet" type="text/css">
    /*
     * CSS untuk menetapkan gaya tulisan dan jadual
     */
    div.title {
      font-size: 130%;
    }
    table {
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 5px;
    }
    </style>
  </head>
  <body>
    <!--
      Kandungan atau maklumat yang ingin dipaparkan
    -->
    <div class="title">Density of Precious Metals, in g/cm^3</div>
    <table>
      <tr>
        <th>Element</th>
        <th>Density</th>
      </tr>
      <tr>
        <td>Copper</td>
        <td>8.94</td>
      </tr>
      <tr>
        <td>Silver</td>
        <td>10.49</td>
      </tr>
      <tr>
        <td>Gold</td>
        <td>19.30</td>
      </tr>
      <tr>
        <td>Platinum</td>
        <td>21.45</td>
      </tr>
    </table>

    <!--
      JavaScript untuk membina carta
    -->
    <div id="chart"></div>
    <script type="text/javascript"
            src="https://www.google.com/jsapi"></script>
      <script type="text/javascript">
        google.load('visualization', '1.0',
                    {'packages':['corechart']});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
          var data = google.visualization.arrayToDataTable([
            ['Element', 'Density'],
            ['Copper', 8.94],
            ['Silver', 10.49],
            ['Gold', 19.30],
            ['Platinum', 21.45]
          ]);
          var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
          chart.draw(data);
        }
      </script>
  </body>
</html>

Hasilnya akan kelihatan seperti berikut:

Result 2

Kerjasama Bahasa Client-Side dan Server-Side

Jika kita ada menggunakan bahasa server-side, kita boleh mendapatkan hasil yang sama melalui kod seperti berikut:

<html>
  <head>
    <style rel="stylesheet" type="text/css">
    /*
     * CSS untuk menetapkan gaya tulisan dan jadual
     */
    div.title {
      font-size: 130%;
    }
    table {
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 5px;
    }
    </style>
  </head>
  <body>
    <!--
      Kandungan atau maklumat yang ingin dipaparkan
    -->
    <div class="title">Density of Precious Metals, in g/cm^3</div>
    <table>
      <tr>
        <th>Element</th>
        <th>Density</th>
      </tr>
      <?php
        /*
         * Dapatkan data dari pangkalan data.
         * Setiap "metal" mengandungi maklumat
         * "name" dan "density".
         */
        $metals = retrieveMetalDensitiesFromDatabase();

        foreach ($metals as $metal)
        {
      ?>
      <tr>
        <td><?php echo $metal["name"]; ?></td>
        <td><?php echo $metal["density"]; ?></td>
      </tr>
      <?php } ?>
    </table>

    <!--
      JavaScript untuk membina carta
    -->
    <div id="chart"></div>
    <script type="text/javascript"
            src="https://www.google.com/jsapi"></script>
      <script type="text/javascript">
        google.load('visualization', '1.0',
                {'packages':['corechart']});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
          var data = google.visualization.arrayToDataTable([
          <?php
            /*
             * Gunakan data "metals" tadi untuk
             * membina carta pula.
             */
            foreach ($metals as $metal)
            {
              echo "['".$metal["name"]."', '".$metal["density"]."'],";
            }
          ?>
          ]);
          var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
          chart.draw(data);
        }
      </script>
  </body>
</html>

Perhatikan, bagaimana dengan bahasa server-side (PHP), kita membina output yang terdiri dari bahasa client-side (sama ada HTML, CSS, atau JavaScript). Hasilnya pula kemudiannya diproses oleh pelayar web dan dipaparkan. Ia seperti lapisan bahasa pengaturcaraan di atas bahasa pengaturcaraan yang lain!

Perhatikan juga bagaimana di dalam satu fail berselang-seli bahasa server-side dan client-side. Perkara ini kadang-kala mengelirukan pengaturcara-pengaturcara baru. Jika anda menghadapi situasi ini, cuba kembali kepada asasnya. Kenalpasti yang mana adalah kod client-side dan yang mana server-side. Pemahaman yang baik tentang asas ini membolehkan anda cekap bermain dengan kod client-side dan server-side dan dapat menghasilkan penyelesaian yang kreatif.

Mengenai penulis

Ikhwan Hayat telah membina perisian secara professional sejak 2004. Kebanyakan masa dia bergelumang dalam platform .NET. Namun kadangkala tersesat pergi ke dunia PHP, Python, Ruby, Java, dan bahasa-bahasa pengaturcaraan lain. Sekarang berkerja sebagai pengaturcara secara freelance sepenuh masa.

Ikhwan Hayat has been developing softwares professionally since 2004. Main area of expertise is .NET, but often found getting lost in the world of PHP, Python, Ruby, Java, or some esoteric programming language. Available as a full-time freelance developer.

comments powered by Disqus