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

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>
    table {
        width: 100%;
        border-collapse: collapse;
    table, td, th {
        border: 1px solid black;
        padding: 5px;
    th {text-align: left;}
  alert('Hey, JS is working here');

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

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

echo "<table>
    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>";

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.


  1. XSST

    I loved as much as you’ll receive carried out right here.
    The sketch is tasteful, your authored material stylish.
    nonetheless, you command get got an nervousness over that you wish be
    delivering the following. unwell unquestionably come
    more formerly again as exactly the same nearly a lot often inside case you shield this hike.

  2. how search engine works pdf

    Please let me know if you’re looking for a article author for your weblog.
    You have some really great articles and I feel I would be a good asset.
    If you ever want to take some of the load off, I’d absolutely
    love to write some material for your blog in exchange for a link back to mine.
    Please send me an email if interested. Kudos! https://forums.huduser.gov/forum/user-34141.html

  3. アウトレット

    I’m impressed, I have to admit. Rarely do I come across a blog that’s equally educative and entertaining,
    and let me tell you, you’ve hit the nail on the
    head. The problem is something too few men and women are speaking
    intelligently about. I am very happy I found this during my search for something
    concerning this.

  4. Dong

    We are a bunch of volunteers and starting a new scheme in our community.
    Your website offered us with useful info to work on. You have done
    an impressive activity and our whole neighborhood shall be thankful to

  5. 메리트카지노

    This is a good tip particularly to those new to the blogosphere.

    Short but very precise information… Thanks for sharing this one.
    A must read post!

    Feel free to visit my blog post – 메리트카지노

  6. https://e17.cz/dane/

    My coder is trying to persuade me to move to .net from
    PHP. I have always disliked the idea because of the expenses.
    But he’s tryiong none the less. I’ve been using Movable-type on a number of websites for
    about a year and am anxious about switching to another platform.
    I have heard fantastic things about blogengine.net. Is there a way I can transfer all my wordpress content into it?
    Any kind of help would be really appreciated!

  7. https://udalosti24.cz/drahe-novostavby-lide-jsou-ochotni-platit-ceny-dale-rostou/

    I loved as much as you’ll receive carried out right here. The sketch is tasteful, your authored material stylish.
    nonetheless, you command get got an impatience over that you
    wish be delivering the following. unwell unquestionably come more formerly again as
    exactly the same nearly very often inside case you shield this increase.

  8. End of Lease Cleaning

    In fact when someone doesn’t be aware of then its up to other users that they will help, so here it occurs.

  9. https://www.i40.cz/pro-zeny/

    Have you ever thought about adding a little bit more than just your articles?
    I mean, what you say is important and everything. Nevertheless think of if you
    added some great photos or video clips to give your posts more, “pop”!

    Your content is excellent but with images and clips, this site could definitely be
    one of the greatest in its niche. Good blog!

  10. hora loca casino

    Attractive section of content. I simply stumbled upon your web site and in accession capital
    to assert that I acquire actually loved account your blog posts.
    Anyway I will be subscribing in your augment or even I achievement you access
    constantly fast.

  11. 메리트카지노

    Valuable information. Lucky me I discovered your website by accident,
    and I am stunned why this accident didn’t came about in advance!
    I bookmarked it.

    Here is my blog: 메리트카지노

  12. Junko

    ОНА ДОЛЖНА ВЫЙТИ СЕЙЧАС. Учитывая значительное снижение
    опасности передачи коронавируса на открытом воздухе по сравнению, например, с толпой в закусочной или кинотеатре, можно предположить, что освященная веками традиция не
    спешить перед важным спортивным
    событием может сохраниться
    относительно безоговорочно, и мы
    должны спросить: где вы получить эту бездонную
    купель зоркого оптимизма? Он защищает данные
    их компании и покупателей в некоторой
    степени, чем хранение их на родных
    изнуряющих дисках, которые могут выйти из
    строя. План льгот – это документ, выданный вашей страховой компанией,
    в котором описывается, какие услуги и
    какие услуги предоставляются,
    а также соответствующий этап покрытия.
    Следовательно, передача этих обязанностей по транскрипции
    квалифицированной и надежной фирме по
    транскрипции медиа является окончательным ответом на этот недостаток.
    ОНА ДОПУСКАЛАСЬ, У нее проблемы с
    памятью. Они знают, что я просто делаю
    один телефонный звонок, отправляю одно текстовое содержание,
    и проблемы решаются. Окружной прокурор
    Нового Орлеана в то время выдвинул теорию, устроил кругосветное шоу и,
    когда купил в суде, не смог повлиять ни на одного присяжного.

  13. https://www.i40.cz/bydleni/

    Hi there, I check your blog regularly. Your humoristic style is awesome,
    keep doing what you’re doing!

  14. casino for you

    I’m curious to find out what blog platform you are working with?

    I’m experiencing some small security issues with my latest blog and I would like to find
    something more secure. Do you have any recommendations?

  15. cse.google.com.sl

    I was recommended this blog by my cousin. I am not sure whether
    this post is written by him as no one else know such detailed about
    my problem. You are wonderful! Thanks!

  16. adult chat

    Everyone loves what you guys are usually up too. This type of clever work and exposure!

    Keep up the excellent works guys I’ve you guys to my own blogroll.

  17. online casinos singapore register

    Its like you read my thoughts! You seem to understand a lot about this, such as you wrote the book in it
    or something. I believe that you just can do with a
    few percent to power the message house a bit, but other than that, that is fantastic blog.
    A fantastic read. I’ll definitely be back.

  18. LED robots

    Heya! I just wanted to ask if you ever have any problems with hackers?
    My last blog (wordpress) was hacked and I ended up losing a few months of hard work
    due to no data backup. Do you have any methods to prevent


    I always spent my half an hour to read this weblog’s
    posts everyday along with a mug of coffee.

  20. Traci

    I appreciate, cause I found exactly what I was having a
    look for. You’ve ended my 4 day lengthy hunt! God Bless you
    man. Have a nice day. Bye

  21. www.programmableweb.com

    I have been surfing online more than 2 hours today, yet I never found any interesting article like yours.
    It is pretty worth enough for me. In my opinion, if all site owners and bloggers made good content as
    you did, the internet will be much more useful than ever before.

  22. Middle East University

    Everything is very open with a precise description of the
    challenges. It was really informative. Your website is useful.
    Many thanks for sharing!

  23. hora loca

    Hello there, You’ve done an incredible job. I’ll certainly
    digg it and personally suggest to my friends. I’m sure they will be benefited from this website.

  24. hora loca miami

    you are truly a excellent webmaster. The
    website loading speed is amazing. It kind of feels that you are doing any unique trick.
    Furthermore, The contents are masterwork. you have done a
    magnificent job in this matter!

  25. https://www.celebritky.cz/bydleni/

    I blog quite often and I seriously thank you for your content.
    The article has really peaked my interest. I’m going to book mark
    your website and keep checking for new details about
    once a week. I subscribed to your RSS feed too.

  26. ทางเข้าfun88

    Good post however I was wondering if you could write a litte more on this subject?
    I’d be very thankful if you could elaborate a little bit further.
    Bless you!

Tinggalkan Balasan

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