#2 Tutorial Pemrograman Web – Konsep Dasar PHP, HTML, MySQL, Javascript, CSS

Seperti yang telah saya jelaskan pada postingan sebelumnya, ada beberapa hal yang harus dipahami pada pemrograman web.

  1. Server-side scripting (PHP, Python, Pearl, Java, C++, etc)
  2. Client-side scripting (HTML, Javascript, CSS, etc)
  3. Database (Oracle, MySQL, etc)

Untuk server-side dan database scripting, umumnya, kita hanya perlu belajar salah satu bahasa saja. Contoh, dengan hanya memahami PHP dan MySQL, dan sedikit pemahaman tentang client-side scripting, kita sudah bisa membuat sebuah website yang cukup powerful.

Pada gambar di atas, client side adalah program yang betul – betul ada di sisi client, namun kita sebagai developer harus membuat kode untuk client tersebut. Walaupun kita membuat kode hanya di sisi server, namun serverlah yang akan memproses kode tersebut untuk dikirimkan ke client. Program di sisi server akan mengkonversi dirinya sendiri menjadi bahasa pemrograman client-side seperti HTML, tergantung dengan bagaimana kita membuatnya di sisi server. Jadi, user yang berada di dsisi client tidak akan bisa melihat script PHP kita sama sekali. Yang bisa mereka lihat hanyalah kode HTML, CSS, Javascript, dan kode pemrograman client lainnya. Untuk lebih jelasnya, mari kita lihat contoh program PHP di bawah ini, yang filenya saya namakan dengan index.php.

<?php
echo 'This is my beautiful website.';
?>

Ketika seorang user melakukan request ke halaman index.php, server tidak akan mengirimkan kode seperti di atas ke user tersebut. Server akan mengkonversi kode PHP di atas menjadi kode client-side. Pada contoh di atas, server akan mengkonversi kode tersebut menjadi kode HTML di bawah ini.

Seperti yang bisa kita lihat, client hanya bisa melihat kode HTML, bukan PHP. Mereka hanya melihat kode client-side seperti Javascript, CSS, dan HTML. Bagi yang penasaran bagaimana cara untuk menampilkan raw code seperti di atas, klik kanan pada halaman browser Anda, kemudian klik inspect.

Sekarang mari kita pelajari sedikit lebih dalam mengenai kolaborasi Server, Client, dan Database Script. Mari kita buat kode PHP seperti di bawah ini, kita namakan dengan simpleweb.php

<!DOCTYPE html>
<html>
<head>
<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    
    table, td, th {
        border: 1px solid black;
        padding: 5px;
    }
    
    th {text-align: left;}
</style>
<script>
  alert('Hey, JS is working here');
</script>
</head>
<body>

<?php
$con = mysqli_connect('localhost','root','','test');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"test");
$sql="SELECT * FROM tb_user";
$result = mysqli_query($con,$sql);

echo "<table>
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <th>Hometown</th>
    <th>Job</th>
    </tr>";
    while($row = mysqli_fetch_array($result)) {
        echo "<tr>";
        echo "<td>" . $row['firstname'] . "</td>";
        echo "<td>" . $row['lastname'] . "</td>";
        echo "<td>" . $row['age'] . "</td>";
        echo "<td>" . $row['hometown'] . "</td>";
        echo "<td>" . $row['job'] . "</td>";
        echo "</tr>";
    }
    echo "</table>";
    mysqli_close($con);
?>
</body>
</html>

Kode di atas mengandung semua bahasa pemrograman client side yang telah saya sebutkan sebelumnya (HTML, Javascript, dan CSS), dan juga bahasa pemrograman server dan database : PHP dan MySQL. Mari kita lihat bagaimana kode di atas jika telah diterima oleh client.

Pertama – tama, karena saya telah menyisipkan kode Javascript yang berisi fungsi Alert, Google Chrome menerjemahkannya dengan alert yang harus ditampilkan pertama kali sebelum menampilkan semua content lainnya. Sekarang mari kita lihat respon apa lagi yang akan ditampilkan ketika saya klik OK pada alert box tersebut.

Dari gambar di atas, kita dapat melihat bahwa tidak ada lagi kode PHP atau MySQL sedikitpun yang dapat dilihat oleh end user. Yang kita lihat adalah kode client side seperti HTML, Javascript, dan CSS berdasarkan bagaimana kita membuatnya di PHP. Tabel yang ditampilkan telah dimodifikasi tampilannya oleh CSS, dan isi tabelnya pun seolah – olah diketik manual pada kode yang kita buat, padahal isi tabel tersebut murni mengambil dari database MySQL yang sangat dinamis tergantung isi pada MySQL.

Itulah pemahaman mendasar mengenai bagaimana script server, client, dan database berkolaborasi di pemrograman web. Saya rekomendasikan Anda untuk mencoba sendiri program di atas untuk lebih memahaminya. Setelah ini, saya akan mengupload post mengenai pembelajaran masing – masing bahasa pemrograman secara lebih mendalam. So, keep learning and don’t forget to code.

62 comments

  1. web hosting providers

    Hello! I know this is kinda off topic however , I’d figured I’d ask.
    Would you be interested in trading links or maybe guest authoring
    a blog article or vice-versa? My blog goes over
    a lot of the same topics as yours and I feel we could greatly benefit from each other.

    If you might be interested feel free to send me an e-mail.
    I look forward to hearing from you! Fantastic blog by the way!

  2. hosting services

    I’ve been exploring for a little bit for any high-quality articles or blog posts in this sort of space .
    Exploring in Yahoo I eventually stumbled upon this website.
    Studying this information So i am happy to show that I have
    an incredibly excellent uncanny feeling I found out exactly what
    I needed. I so much definitely will make certain to don?t overlook this web site
    and provides it a look regularly.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *