Personal Notes Parmi

Belajar HTML, CSS, Javascript, PHP HTML

Belajar HTML, CSS, Javascript, PHP

HTML

HTML (HyperText Markup Language) HTML adalah bahasa markup yang digunakan untuk membuat struktur dan mengatur konten pada halaman web. Ini adalah fondasi dari hampir setiap situs web yang ditemui di internet. Dengan HTML, dimungkinkan untuk dapat membuat tautan, gambar, tabel, formulir, dan banyak elemen lainnya yang diperlukan untuk membangun tampilan visual kepada pengguna

Contoh HTML

<!DOCTYPE html>
<html>

<head>
    <title>Belajar HTML</title>
</head>

<body>
    <h1>Belajar HTML</h1>
    <p>Ini adalah contoh HTML</p>
</body>
</html>

Penjelasan singkat tentang kode di atas:

  • <!DOCTYPE html> mendefinisikan tipe dokumen HTML.
  • <html> adalah elemen root dari halaman web.
  • <head> berisi informasi meta tentang halaman.
  • <title> menentukan judul halaman yang ditampilkan di bilah judul browser.
  • <body> berisi konten sebenarnya yang ditampilkan di halaman web.
  • <h1> adalah judul utama.
  • <p> adalah elemen paragraf.

Dapat dilihat seperti Contoh kode diatas HTML menggunakan tag-tag yang dikelilingi oleh tanda kurung siku (< dan >).

Selain tag itu html juga memiliki banyak tag lainnya seperti tabel

<html>

<head>
    <title>Belajar HTML Tabel</title>
</head>

<body>
    <table>
        <tr>
            <th>Nama</th>
            <th>Alamat</th>
        </tr>
        <tr>
            <td>Andi</td>
            <td>Jakarta</td>
        </tr>
        <tr>
            <td>Budi</td>
            <td>Bandung</td>
        </tr>
    </table>
</body>
</html>

Kode ini akan menghasilkan tabel seperti ini

Nama Alamat
Andi Jakarta
Budi Bandung

Selain itu html juga memiliki tag untuk membuat form seperti ini

<html>

<head>
    <title>Belajar HTML Form</title>
</head>

<body>
    <form>
        <label>Nama</label>
        <input type="text" name="nama">
        <label>Alamat</label>
        <input type="text" name="alamat">
        <button type="submit">Kirim</button>
    </form>
</body>
</html>

Akan menghasilkan form seperti ini * jika form tidak terlihat silahkan copy ke index.html local dan buka di browser

Perhatikan tag yang digunakan, tag-tag html juga memiliki atribut yang dapat digunakan untuk memberikan informasi tambahan pada tag tersebut. Contoh atribut pada tag input diatas adalah type dan name. Contoh lain atribut pada tag img

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman Web</title>
</head>
<body>
    <h1>Selamat Datang!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
    <img src="gambar.jpg" alt="Gambar">
</body>
</html>

Perhatikan contoh kode diatas, tag img memiliki atribut src dan alt. Atribut src digunakan untuk memberikan informasi lokasi gambar yang akan ditampilkan. Atribut alt digunakan untuk memberikan informasi deskripsi gambar yang akan ditampilkan. itu adalah contoh dan fungsi dari atribut pada tag html.

Atribut-atribut lain dapat dilihat sendiri pada dokumentasi html.

CSS

CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan dan presentasi halaman web. CSS memungkinkan Anda untuk membuat aturan gaya yang dapat diterapkan ke elemen-elemen HTML.

Contoh CSS

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman Web</title>
    <style>
        h1 {
            color: red;
            font-size: 24px;
        }
        p {
            color: blue;
        }
        </style>
</head>
<body>
    <h1>Selamat Datang!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
</body>

Penjelasan singkat tentang kode di atas:

  • <style> digunakan untuk menyisipkan kode CSS di dalam halaman HTML.
  • h1 dan p adalah selector yang memilih elemen yang akan diubah.
  • color mengatur warna teks.
  • font-size mengatur ukuran font.

Aturan dalam menulis kode css adalah

  • Selector adalah elemen HTML yang akan diubah.
  • Property adalah gaya yang akan diterapkan.
  • Value adalah nilai dari property.
  • Property dan value dipisahkan oleh tanda titik dua (:)
  • Setiap aturan diakhiri dengan tanda titik koma (;)
  • Aturan ditulis di dalam kurung kurawal ({})
  • Aturan dapat ditulis di dalam tag <style> atau di file terpisah dengan ekstensi .css
  • Aturan dapat ditulis di dalam tag <head> atau <body>

Penjelasan aturan dari css

  • Selector adalah elemen HTML yang akan diubah.
h1 {
    color: red;
    font-size: 24px;
}

Selectornya adalah h1, artinya aturan ini akan diterapkan pada elemen h1.

  • Property adalah gaya yang akan diterapkan.
h1 {
    color: red;
    font-size: 24px;
}

Propertynya adalah color dan font-size.

  • Value adalah nilai dari property.
h1 {
    color: red;
    font-size: 24px;
}

Valuenya adalah red dan 24px.

  • Aturan dapat ditulis di dalam tag <style> atau di file terpisah dengan ekstensi .css contoh jika ditulis di file terpisah

index.html adalah seperti berikut

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman Web</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Selamat Datang!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
</body>
</html>

style.css adalah seperti berikut

h1 {
    color: red;
    font-size: 24px;
}
p {
    color: blue;
}

Letakkan kedua file ini kedalam 1 folder dan buka index.html di browser.

Selain itu css juga memiliki selector yang lebih spesifik seperti class dan id

Contoh penggunaan class

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman Web</title>
    <style>
        .merah {
            color: red;
        }
        .biru {
            color: blue;
        }
        </style>
</head>
<body>
    <h1 class="merah">Selamat Datang!</h1>
    <p class="biru">Ini adalah paragraf pertama saya.</p>
</body>

Contoh penggunaan id

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman Web</title>
    <style>
        #merah {
            color: red;
        }
        #biru {
            color: blue;
        }
        </style>
</head>
<body>
    <h1 id="merah">Selamat Datang!</h1>
    <p id="biru">Ini adalah paragraf pertama saya.</p>
</body>

Perbedaan class dan id adalah pada tag selector nya. class menggunakan titik (.) dan id menggunakan pagar (#)

Javascript

Javascript adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi interaktif. Contoh penggunaan javascript

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman Web</title>
    <script>
        alert("Selamat Datang!");
    </script>
</head>
<body>
    <h1>Selamat Datang!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
</body>
</html>

Contoh diatas akan menampilkan popup alert ketika halaman web dibuka.

Selain itu javascript digunakan untuk membuat halaman web menjadi lebih interaktif. Seperti contoh jika kita ingin menampilkan popup alert ketika tombol diklik.

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman Web</title>
    <script>
        function klik() {
            alert("Tombol diklik!");
        }
    </script>
</head>
<body>
    <h1>Selamat Datang!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
    <button onclick="klik()">Klik Saya</button>
</body>
</html>

Contoh diatas akan menampilkan popup alert ketika tombol diklik. Perhatikan tag button, ada atribut onclick yang berisi nama fungsi javascript. tag atribut onclick digunakan untuk menentukan fungsi javascript yang akan dijalankan ketika tombol diklik. selain tag atribut onclick, ada juga tag atribut onmouseover, onmouseout, dan lain-lain. bisa dilihat di dokumentasi dom atribut.

Selain penggunaan ini javascript juga digunakan untuk mengubah isi dari halaman web. Seperti contoh jika kita ingin mengubah isi dari tag h1 ketika tombol diklik.

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman Web</title>
    <script>
        function klik() {
            document.getElementById("judul").innerHTML = "Selamat Datang!";
        }
    </script>
</head>
<body>
    <h1 id="judul">Judul Halaman Web</h1>
    <p>Ini adalah paragraf pertama saya.</p>
    <button onclick="klik()">Klik Saya</button>
</body>
</html>

Contoh diatas akan mengubah isi dari tag h1 ketika tombol diklik. Perhatikan tag h1, ada atribut id yang berisi judul. tag atribut id digunakan untuk menentukan elemen yang akan diubah. pada fungsi klik, terdapat kode document.getElementById("judul").innerHTML = "Selamat Datang!"; kode tersebut digunakan untuk mengubah isi dari elemen dengan id judul menjadi Selamat Datang!.

Javascript juga dapat digunakan untuk mengubah gaya dari halaman web. Seperti contoh jika kita ingin mengubah warna dari tag h1 ketika tombol diklik.

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman Web</title>
    <script>
        function klik() {
            document.getElementById("judul").style.color = "red";
        }
    </script>
</head>
<body>
    <h1 id="judul">Judul Halaman Web</h1>
    <p>Ini adalah paragraf pertama saya.</p>
    <button onclick="klik()">Klik Saya</button>
</body>
</html>

Contoh diatas akan mengubah warna dari tag h1 ketika tombol diklik. Perhatikan tag h1, ada atribut id yang berisi judul. tag atribut id digunakan untuk menentukan elemen yang akan diubah. pada fungsi klik, terdapat kode document.getElementById("judul").style.color = "red"; kode tersebut digunakan untuk mengubah warna dari elemen dengan id judul menjadi merah.

Untuk memudahkan penggunaan javascript, biasanya javascript ditulis di file terpisah dengan ekstensi .js contoh jika ditulis di file terpisah

index.html adalah seperti berikut

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman Web</title>
    <script src="script.js"></script>
</head>
<body>
    <h1 id="judul">Judul Halaman Web</h1>
    <p>Ini adalah paragraf pertama saya.</p>
    <button onclick="klik()">Klik Saya</button>
</body>
</html>

script.js adalah seperti berikut

function klik() {
    document.getElementById("judul").style.color = "red";
}

Letakkan kedua file ini kedalam 1 folder dan buka index.html di browser.

Dalam memudahkan fungsinya javascript diberikan library yang dapat digunakan untuk memudahkan penggunaan javascript. Salah satu library yang sering digunakan adalah JQuery. JQuery adalah library javascript yang dapat digunakan untuk memudahkan penggunaan javascript. Contoh penggunaan JQuery

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman Web</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#judul").css("color", "red");
            });
        });
    </script>
</head>
<body>
    <h1 id="judul">Judul Halaman Web</h1>
    <p>Ini adalah paragraf pertama saya.</p>
    <button>Klik Saya</button>
</body>
</html>

mari perhatikan kode javascript diatas.

$(document).ready(function(){
    $("button").click(function(){
        $("#judul").css("color", "red");
    });
});

kode diatas digunakan untuk mengubah warna dari tag h1 ketika tombol diklik. Perhatikan penulisan kode ini pada javascript biasa dapat di tulis seperti ini

document.addEventListener("DOMContentLoaded", function(event) {
    var button = document.getElementById("judul");
    button.addEventListener("click", function() {
        var judul = document.getElementById("judul");
        judul.style.color = "red";
    });
});

Tampak pada kode javascript biasa, penulisan kode menjadi lebih panjang dan rumit dibandingkan dengan JQuery. JQuery dapat digunakan untuk memudahkan penulisan kode javascript.

tata cara penulisan JQuery adalah sebagai berikut

$(selector).action()
  • $ adalah tanda untuk menandakan bahwa ini adalah JQuery.
  • (selector) adalah elemen yang akan diubah.
  • .action() adalah perintah yang akan dijalankan.

contoh $(document).ready(function(){}) adalah perintah untuk mengeksekusi kode javascript setelah halaman web selesai dimuat.

contoh $("button").click(function(){}) adalah perintah untuk mengeksekusi kode javascript ketika tombol diklik.

Contoh lain JQuery

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman Web</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#judul").css("color", "red");
                $("#judul").html("Selamat Datang!");
            });
        });
    </script>
</head>
<body>
    <h1 id="judul">Judul Halaman Web</h1>
    <p>Ini adalah paragraf pertama saya.</p>
    <button>Klik Saya</button>
</body>
</html>

Contoh diatas akan mengubah warna dan isi dari tag h1 ketika tombol diklik. Perhatikan tag h1, ada atribut id yang berisi judul. tag atribut id digunakan untuk menentukan elemen yang akan diubah. pada fungsi klik, terdapat kode $("#judul").css("color", "red"); kode tersebut digunakan untuk mengubah warna dari elemen dengan id judul menjadi merah.

IMPORTANT!!!

Perhatikan tata letak kode javascript yang diletakkan pada head atau bawah body akan berpengaruh pada hasil. Jika kode javascript diletakkan pada head, maka kode javascript akan dieksekusi sebelum halaman web selesai dimuat. Jika kode javascript diletakkan pada bawah body, maka kode javascript akan dieksekusi setelah halaman web selesai dimuat. Contoh jika kode javascript diletakkan pada head

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman Web</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#judul").css("color", "red");
                $("#judul").html("Selamat Datang!");
            });
        });
    </script>
</head>
<body>
    <h1 id="judul">Judul Halaman Web</h1>
    <p>Ini adalah paragraf pertama saya.</p>
    <button>Klik Saya</button>
</body>
</html>

Contoh jika kode javascript diletakkan pada bawah body

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman Web</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h1 id="judul">Judul Halaman Web</h1>
    <p>Ini adalah paragraf pertama saya.</p>
    <button>Klik Saya</button>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#judul").css("color", "red");
                $("#judul").html("Selamat Datang!");
            });
        });
    </script>
</body>
</html>

Pada contoh kode diatas peletakan bawah maupun atas body tidak akan berpengaruh pada hasil. namun perlu diingat bahwa jika kode javascript diletakkan pada bawah body, maka kode javascript akan dieksekusi setelah halaman web selesai dimuat. Contoh penggunaan JQuery yang diletakkan di bawah akan berpengaruh

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman Web</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h1 id="judul">Judul Halaman Web</h1>
    <p>Ini adalah paragraf pertama saya.</p>
    <button>Klik Saya</button>
    <script>
        $("button").click(function(){
            $("#judul").css("color", "red");
            $("#judul").html("Selamat Datang!");
        });
    </script>
</body>
</html>

Contoh diatas mengambil selector button setelah halaman web selesai dimuat. jika diletakkan pada head, maka selector button tidak akan ditemukan karena selector button belum dibuat ketika halaman web selesai dimuat.

Mari perhatikan kode berikut

<!DOCTYPE html>
<html>
<head>
  <title>Example Page</title>
  <script>
    // Code inside the head
    var titleElement = document.getElementById("title");
    console.log(titleElement.innerText);
  </script>
</head>
<body>
  <h1 id="title">Hello World!</h1>
  <script>
    // Code after the body
    var titleElement = document.getElementById("title");
    console.log(titleElement.innerText);
  </script>
</body>
</html>

Pada kode diatas, kita mencoba mengambil elemen dengan id title. Pada kode yang diletakkan pada head, elemen dengan id title belum dibuat sehingga elemen dengan id title tidak ditemukan. Pada kode yang diletakkan pada body, elemen dengan id title sudah dibuat sehingga elemen dengan id title ditemukan.

PHP (Hypertext Preprocessor)

PHP adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi lebih dinamis. Selain itu PHP juga dapat digunakan untuk mengakses database, mengirim email, dan lain-lain. PHP berjalan pada server, sehingga untuk menjalankan PHP kita membutuhkan server. contohnya adalah menggunakan XAMPP yang memiliki Apache sebagai web server dan MySQL sebagai database. XAMPP juga menyediakan PHPMyAdmin untuk mengelola database.

Penulisan kode PHP

<?php
    // kode php
?>

Penulisan php diawali oleh tanda . Kode php dapat ditulis diantara tanda tersebut.

Contoh kode PHP

<?php
    echo "Hello World!";
?>

Contoh kode diatas akan menampilkan Hello World! pada halaman web. echo digunakan untuk menampilkan teks pada halaman web.

Selain itu php echo juga dapat digunakan untuk menampilkan nilai dari variabel.

<?php
    $nama = "Budi";
    echo "Nama saya adalah $nama";
?>

Contoh diatas akan menampilkan Nama saya adalah Budi pada halaman web. $nama adalah variabel yang berisi Budi. $nama digunakan untuk mengambil nilai dari variabel nama.

Ingat!!! Variabel dalam php diawali dengan tanda $.

Selain itu php echo juga dapat digunakan untuk menampilkan nilai dari array.

<?php
    $nama = array("Budi", "Andi", "Joko");
    echo "Nama saya adalah $nama[0]";
?>

Contoh diatas akan menampilkan Nama saya adalah Budi pada halaman web. $nama adalah array yang berisi Budi, Andi, dan Joko.

Selain echo, php memudahkan untuk menampilkan data dinamis pada halaman web dengan menggunakan tag html.

<!DOCTYPE html>
<html>
  <body>
    <h1><?php echo "Welcome to my website"; ?></h1>
    <p><?php echo "Today is " . date("Y/m/d"); ?></p>
  </body>
</html>

Contoh diatas akan menampilkan Welcome to my website pada halaman web. Serta menampilkan tanggal hari ini kedalam website.

Pada contoh diatas, kita menggunakan fungsi date() untuk menampilkan tanggal hari ini. Fungsi date() adalah fungsi bawaan dari php yang digunakan untuk menampilkan tanggal dan waktu. Fungsi date() dapat menerima parameter untuk menampilkan tanggal dan waktu sesuai dengan format yang diinginkan. Contoh penggunaan fungsi date()

<?php
    echo date("Y/m/d") . "<br>";
    echo date("Y.m.d") . "<br>";
    echo date("Y-m-d") . "<br>";
    echo date("l");    
?>

Pada perintah echo di php dapat digunakan untuk menampilkan html

<!DOCTYPE html>
<html>
  <body>
    <?php
      echo "<h1>Welcome to my website</h1>";
      echo "<p>Today is " . date("Y/m/d") . "</p>";
    ?>
  </body>
</html>

perhatikan kode diatas pada "Today is " . date("Y/m/d") . "</p>"; digunakan tanda . untuk menggabungkan string sama seperti pada javascript

<!DOCTYPE html>
<html>
  <body>
    <h1>Welcome to my website</h1>
    <p id="date">Today is </p>
  </body>
  <script>
      document.getElementById("date").innerHTML = "Today is " + new Date();
  </script>
</html>

Pada javascript menggunakan tanda + untuk menggabungkan string

Advanced PHP

Selain hal-hal diatas php juga memiliki fitur yang cukup canggih untuk html seperti contohnya php menyediakan fitur untuk mengambil data dari form html

sediakan 2 file yaitu ( index.html atau index.php ) dan upload.php

index.html atau index.php akan berisikan kode sebagai berikut

<!DOCTYPE html>
<html>
<body>
    <form action="upload.php" method="POST" enctype="multipart/form-data">
        <input type="file" name="file">
        <input type="submit" value="Upload">
    </form>
</body>
</html>

upload.php akan berisikan kode sebagai berikut

<?php
if(isset($_FILES['file'])) {
    $file = $_FILES['file'];

    // File properties
    $file_name = $file['name'];
    $file_tmp = $file['tmp_name'];
    $file_size = $file['size'];
    $file_error = $file['error'];

    // File extension
    $file_ext = explode('.', $file_name);
    $file_ext = strtolower(end($file_ext));

    // Allowed file types
    $allowed = array('txt', 'pdf', 'doc');

    if(in_array($file_ext, $allowed)) {
        if($file_error === 0) {
            if($file_size <= 5242880) { // 5MB
                $file_destination = 'uploads/' . $file_name;
                move_uploaded_file($file_tmp, $file_destination);
                echo 'File uploaded successfully!';
            } else {
                echo 'File is too large!';
            }
        } else {
            echo 'Error uploading the file!';
        }
    } else {
        echo 'Invalid file type!';
    }
}
?>

Jika kita menjalankan kode diatas maka akan muncul form untuk mengupload file. Jika kita mengupload file maka file akan disimpan pada folder uploads. berarti sediakan juga folder uploads untuk menyimpan file yang diupload.

Penjelasan kode pada upload.php

pertama kode akan mengecek apakah ada file yang diupload melalui kode ini

if(isset($_FILES['file'])) {

$_FILES adalah spesial variabel pada php yang digunakan untuk mengambil data dari form yang diupload. jika ada file yang diupload maka kode dibawahnya akan dijalankan.

$file = $_FILES['file'];

$file_name = $file['name'];
$file_tmp = $file['tmp_name'];
$file_size = $file['size'];
$file_error = $file['error'];

kode diatas digunakan untuk mengambil data file yang diupload. data yang diambil yaitu nama file, lokasi file sementara, ukuran file, dan error file.

$file_ext = explode('.', $file_name);
$file_ext = strtolower(end($file_ext));

kode diatas digunakan untuk mengambil ekstensi file. explode digunakan untuk memisahkan string menjadi array. explode akan memisahkan string berdasarkan karakter yang diberikan. pada contoh diatas string akan dipisahkan menggunakan delimiter karakter titik (.) explode akan menghasilkan array yang berisi string yang dipisahkan. contoh :

<?php
    $string = "Hello World";
    $array = explode(" ", $string);
    print_r($array);
?>

perhatikan pada $allowed = array('txt', 'pdf', 'doc'); kode diatas digunakan untuk menentukan tipe file yang diizinkan untuk diupload. pada contoh diatas hanya file dengan ekstensi txt, pdf, dan doc yang diizinkan untuk diupload.

if(in_array($file_ext, $allowed)) {

kode diatas digunakan untuk mengecek apakah ekstensi file yang diupload ada pada array $allowed. jika ada maka kode dibawahnya akan dijalankan.

if($file_error === 0) {

kode diatas digunakan untuk mengecek apakah file yang diupload tidak error. jika tidak error maka kode dibawahnya akan dijalankan.

if($file_size <= 5242880) { // 5MB

kode diatas digunakan untuk mengecek apakah ukuran file yang diupload kurang dari sama dengan 5MB. jika kurang dari sama dengan 5MB maka kode dibawahnya akan dijalankan.

$file_destination = 'uploads/' . $file_name;
move_uploaded_file($file_tmp, $file_destination);
echo 'File uploaded successfully!';

kode diatas digunakan untuk memindahkan file dari lokasi sementara ke lokasi tujuan. lokasi tujuan yaitu folder uploads.

move_uploaded_file merupakan fungsi bawaan php untuk memindahkan file. fungsi ini menerima 2 parameter yaitu lokasi sementara file dan lokasi tujuan file.

--- source --

or this