Cara Kerja Bahasa Pemrograman Dalam Website

30 Juli 202030 Juli 2020 abdulbadi 0 Komentar

Pertama-tama kami akan bahas, bagaimana sebuah website itu bekerja ya..
Website itu terdiri dari domain dan hosting, apa itu domain?

Nama domain adalah nama unik yang diberikan untuk mengidentifikasi nama server komputer seperti web server atau email server di jaringan komputer ataupun internet.
( Wikipedia )

Singkatnya adalah penamaan dari IP(Internet Protocol) yang biasanya ditulis 198.168.0.1 dan lain-lain itu menjadi sebuah nama jadinya mudah untuk dibaca seperti www.google.com, www.alfabet.press dan seterusnya. Lalu apa itu hosting?

Layanan hos web adalah jasa layanan internet yang menyediakan sumber daya peladen-peladen untuk disewakan sehingga memungkinkan organisasi atau individu menempatkan informasi di internet berupa HTTP, FTP, EMAIL, atau DNS.
( Wikipedia )

Maksudnya kurang lebih, sebuah alat untuk menyimpan data-data berupa script, audio, video, photo, vector dan database lainnya yang ditransformasikan dalam bentuk HTTP, FTP, Email, atau DNS.
Jadi ketika kita mengetikkan domain dalam slot url browser maka monitor akan menampilkan informasi yang tersusun sesuai script bahasa pemrograman yang dipublish oleh pihak pemilik website tersebut.

Bahasa pemrograman itu sangat banyak mulai dari HTML, CSS, Javascript, Php, MySQL, dan masih banyak lagi.Tiap-tiap bahasa pemrograman itu mempunya fungsi yang berbeda-beda, dan yang kami sebut diatas itu cuma parts yang umum digunakan. Minimal jika teman-teman memahami bahasa pemrograman tersebut teman-teman bisa membuat sebuah website. Berikut penjabarannya..

HTML (Hyper Text Markup Language) adalah kerangka dasar website ibarat sebuah kostruksi HTML itu beton-beton kerangka bangunan sebelum di hias tampliannya sebagai berikut :

Bikin folder belajar trus bikin file cobaHTML.html di notepad.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

menampilkan ini di browser

Hello World!

CSS ( Cascading Style Sheets ) yang menghias HTML,
misal text “Hello World!” diatas mau dihias warna text jadi warna biru (ohya default text color defaultnya hitam ya) gimana caranya?

Sisipkan dulu ini <link rel="stylesheet" type="text/css" href="mystyle.css"> di notepad

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="mystyle.css"> 
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

Sekarang bikin file mystyle.css di dalam folder belajar tadi ketikkan :

h1 {
    color: #0000ff;
}

Sekarang jadinya gini..

Hello World!

Javascript adalah mandor didepan server yang bisa memanipulasi HTML, CSS dan data tambahan lainnya dan bekerja di browser!
Misal : pencet F12 (dikeyboard) atau klik kanan lalu inspect di page yang memunculkan “Hello World!” tadi cari tab console ketikkan document.getElementsByTagName('h1')[0].innerHTML = "Coba JavaScript";

nanti “Hello World!” -nya berubah jadi gini :

Coba JavaScript

PHP ( Hypertext Preprocessor ) adalah mandor yang bekerja di belakang server. Salah satu fungsi yang paling mudah difahami hmm.. gini deh, saya ambil contoh : menampilkan database MySQL ke dalam tag HTML. Karena dia berada didalam server jadi kudu instal dulu XAMPP apa itu?

XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem operasi, merupakan kompilasi dari beberapa program. Fungsinya adalah sebagai server yang berdiri sendiri, yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl.
( Wikipedia )

Jadi didalam XAMPP itu sudah ada paket Apache HTTP Server, PHP, MySQL,

Sekarang coba pindahkan folder belajar tadi ke dalam C:\xampp\htdocs kemudian file cobaHTML.html tadi ubah extensionnya jadi cobaHTML.php, trus masuk ke dalam file dibagian atasnya tuliskan gini :

<?php
$coba = mysqli_connect('localhost', 'root', '', 'cobasql');
$perintah = mysqli_query($coba, "SELECT Nama FROM cobatabelmysql WHERE id = 1;");
$letakkan = mysqli_fetch_assoc($perintah);
?>

perhatikan code $letakkan akan saya taruh di tag HTML begini isi komplit file cobaHTML.php nya :

<?php
$coba = mysqli_connect('localhost', 'root', '', 'cobasql');
$perintah = mysqli_query($coba, "SELECT Nama FROM cobatabelmysql WHERE id = 1;");
$letakkan = mysqli_fetch_assoc($perintah);
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <title>Document</title>
</head>

<body>
    <h1><?= $letakkan['Nama']; ?></h1>
</body>

</html>

Note : Kode Ini belum berfungsi (masih error) karena databasenya belum dibikin, selanjutnya kita buat database MySql yak!

MySQL ( Structured Query Language ) = database!

Kalau udah diinstal XAMPP-nya coba ketikan localhost di browser enter, lalu klik tab phpMyAdmin. Ikutin instruksi berikut :

1. Setelah berada di page phpMyAdmin klik baru isikan cobasql klik buat.

2. Buat tabel namanya cobatabelsql klik kirim.

3. Bikin konteks tabelnya! di baris pertama Nama isikan id, Jenis isi INT , Panjang/Nilai kosongkan, centang A_I
pada baris kedua Nama isikan Nama, Jenis isi VARCHAR, Panjang/Nilai isi 10 kemudian klik Simpan.

4. Klik Tab Tambahkan, Id kosongkan, Nama isi abdulbadi atau bebas namamu, lalu klik Kirim.

5. Done! Selanjutnya database-nya kita pakai di file cobaHTML.php