#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.

2.557 comments

  1. cse.google.co.zm

    Hi, I do believe this is an excellent site. I stumbledupon it 😉 I may come back once
    again since I saved as a favorite it. Money and freedom is the greatest way to change, may you
    be rich and continue to help others.

  2. casino and viagra

    always i used to read smaller content that as well clear their motive, and that is also
    happening with this post which I am reading at this place.

  3. 메리트카지노

    Hi! Do you know if they make any plugins to assist with Search
    Engine Optimization? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good gains.

    If you know of any please share. Kudos!

    my website … 메리트카지노

  4. Williams Colton

    Oh my goodness! Impressive article dude! Thank you so much, However I am encountering troubles with your RSS. I don’t know the reason why I cannot subscribe to it. Is there anybody having the same RSS problems? Anybody who knows the solution will you kindly respond? Thanx!!

  5. Jorg Bellew

    Oh my goodness! Impressive article dude! Thank you so much, However I am encountering troubles with your RSS. I don’t know the reason why I cannot subscribe to it. Is there anybody having the same RSS problems? Anybody who knows the solution will you kindly respond? Thanx!!

  6. Kris Tuckett

    I don’t even know the way I finished up here, however I assumed this put up used to be good. I don’t know who you are however definitely you are going to a well-known blogger should you are not already. Cheers!

  7. cenforce 150 sildenafil citrate reviews

    cenforce 150 sildenafil citrate reviews

    #2 Tutorial Pemrograman Web – Konsep Dasar PHP, HTML, MySQL, Javascript, CSS – Dryan Christoph Personal Website

Tinggalkan Balasan

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