PHP Web : HTTP Headers, Session And Cookies in PHP

Published in

Amikom Computer Club

18 min readMar 18, 2024

Halo temen-temen backend, Jika kamu melihat modul ini, berarti kamu emang sudah siap untuk mempelajari lebih dalam tentang penggunaan bahasa pemrograman PHP. Saya mengucapkan selamat untuk itu 🎉

Pada modul untuk pertemuan kali ini kita akan menggunakan banyak kode yang memiliki fungsi penting untuk membuat sebuah program yang keren. Lalu apa saja yang akan kita bahas? Berikut daftar isinya teman-teman:

Daftar Isi

· Global Variabel $_SERVER
· HTTP Request Method
· HTTP GET dan $_GET pada PHP
∘ HTTP GET
∘ $_GET pada PHP
· HTTP POST dan $_POST PHP
· HTTP Respon Status Code
· Session dan Cookies pada PHP
∘ Sessions
∘ Cookies
· Penutup

Global Variabel $_SERVER

Dalam pengembangan web dengan PHP, memahami cara kerja server dan interaksi dengan client itu penting guys. Pada PHP ada salah satu variabel global yang berperan penting dalam hal ini adalah $_SERVER. Variabel ini menyediakan informasi mengenai request yang dikirimkan client ke server.

$_SERVER sendiri adalah variabel global yang berisi informasi tentang request HTTP yang sedang diproses. Variabel ini bersifat array asosiatif, di mana setiap key mewakili informasi spesifik tentang request. Berikut ini merupakan beberapa key penting dalam $_SERVER:

REQUEST_METHOD: Menunjukkan metode HTTP yang digunakan dalam request (GET, POST, PUT, PATCH, DELETE).
PATH_INFO: Menyimpan informasi tentang path yang diminta client.
QUERY_STRING: Menyimpan data yang dikirimkan melalui metode GET.
HTTP_HOST: Menunjukkan nama host yang dituju client.
SERVER_NAME: Menunjukkan nama server yang menangani request.
REMOTE_ADDR: Menunjukkan alamat IP client yang mengirimkan request.
HTTPS: Menunjukkan apakah koneksi menggunakan protokol HTTPS (1) atau tidak (0).
CONTENT_TYPE: Menunjukkan jenis data yang dikirimkan client.
HTTP_REFERER: Menunjukkan URL halaman sebelumnya yang dikunjungi client.
USER_AGENT: Menunjukkan informasi tentang browser dan sistem operasi yang digunakan client.

Mari kita coba menggunakannya, tapi sebelum itu jangan lupa buat folder baru yaitu pertemuan6 pada folder htdocs

Lalu, temen-temen bisa membuka folder tersebut di vscode temen-temen dan buatlah sebuah file yang bernama server_info.php kemudian Nyalakan apache pada xampp atau laragon temen-temen. Jika sudah, anda bisa salin kode ini lalu coba lihat hasil nya pada browser anda.

<?php
// Mendapatkan informasi tentang metode permintaan HTTP
$request_method = $_SERVER['REQUEST_METHOD'];
echo "Metode Permintaan: $request_method <br>";

// Mendapatkan alamat URL lengkap
$current_url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
echo "URL: $current_url <br>";

// Mendapatkan alamat IP klien
$client_ip = $_SERVER['REMOTE_ADDR'];
echo "IP Klien: $client_ip <br>";

// Mengecek apakah pengguna menggunakan HTTPS?
$is_secure = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off');
echo "Menggunakan HTTPS: " . ($is_secure ? 'Ya' : 'Tidak') . "<br>";

// Mendapatkan user agent pada client
$user_agent = $_SERVER['HTTP_USER_AGENT'];
echo "User Agent: $user_agent" . "<br>";

// Mendapatkan informasi web server
$server_signature = $_SERVER['SERVER_SIGNATURE'];
echo "Information Server : $server_signature" . "<br>";

Simpan kode yang telah kamu salin, lalu coba jalankan dengan membuka url yang sesuai temen-temen bikin tadi. Nah jika dijalankan di browser maka tampilannya akan sepert ini:

Nah dari kode diatas kita sudah berhasil untuk mendapatkan beberapa informasi dari client dan server, sebenarnya masih banyak lagi yang bisa kita dapatkan informasinya, namun yang kita bahas pada pelatihan hanya beberapa saja yaa, nah kalian bisa explore sendiri lebih lengkapnya. Kalian juga bisa nih coba jalankan:

var_dump($_SERVER);

Eits bingung yaa sama var_dump() itu apa?? Nih aku jelasin sekilas yaa.

var_dump() pada PHP adalah sebuah fungsi yang digunakan untuk menampilkan informasi detail tentang sebuah variabel. Informasi tersebut meliputi tipe data dan nilai dari variabel tersebut.

Jika di jalankan, kita akan mendapatkan semua informasi dari server kita

Nah dari kode diatas bisa kita lihat yaa bahwa $_SERVER itu merupakan pasangan key=value yang bersifat array assosiatif. Bagaimana? Mudah dan menyenangkan bukan?!!

HTTP Request Method

Sebelumnya kita harus tau bahwa HTTP itu mendefinisikan serangkaian request method untuk menunjukkan tindakan yang diinginkan untuk dilakukan pada resource tertentu. Meskipun bisa juga berupa kata benda, request method ini terkadang disebut sebagai kata kerja HTTP . Masing-masing dari mereka mengimplementasikan kegunaan yang berbeda.

Berikut ini merupakan macam-macam request method beserta dengan fungsinya. Nah kali ini yang kita bahas adalah GET dan POST temen-temen.

source: https://www.huzefril.com/posts/microservices/rest-http-method/

Dari tabel diatas, mungkin temen-temen ada yang sadar bahwa di pertemuan sebelumnya kita ada menggunakan request method tersebut untuk menampilkan data dan juga menambahkan data menggunakan request method GET dan POST 😂 Nah jika kemarin kita langsung pake aja, di pertemuan ini kita bakal bedah fungsi dan kegunaan dari method tersebut.

HTTP GET dan $_GET pada PHP

Oke guys sekarang kita lanjut ke request method GET!! Dalam bahasa inggris kita familiar dengan istilah GET, dari istilah tersebut dapat diartikan bahwa metode GET pada HTTP ditujukan untuk mengambil (GET) data dari server.

Pada metode ini umumnya data berbentuk query string yang dikirim via url, data tersebut berupa pasangan key=value yang dipisahkan dengan tanda & . Data tersebut digabung dengan url utama yang dipisahkan dengan tanda ?

Sebelum dikirim, terlebih dahulu data diproses sehingga memenuhi standar format URL. URL hanya boleh memuat huruf (besar dan kecil), angka, dan beberapa karakter lain dalam ASCII Character Set seperti (“.-_~), karakter di luar itu akan diubah ke format tertentu yang diawali tanda % kemudian diikuti dengan 2 digit hexadesimal, contoh:

source: https://www.w3schools.com/tags/ref_urlencode.ASP#:~:text=URL%20Encoding%20(Percent%20Encoding)&text=URL%20encoding%20replaces%20unsafe%20ASCII,(%2B)%20sign%20or%20with%20%20.

Angka pada kolom (URL Encoded) merupakan nilai hexadecimal dari character ASCII, di samping itu URL juga tidak boleh memuat spasi, sehingga spasi akan diubah menjadi tanda + atau %20 . Semua proses tersebut disebut url encoding.

HTTP GET

Okey, langsung aja kita mencoba untuk melakukan method GET ini temen-temen. Kalian bisa langsung membuat file get_data.php lalu salin kode di bawah ini untuk di paste pada file get_data.php yang sudah teman-teman buat barusan.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Latihan untuk melihat GET pada HTTP Header GET">
    <meta name="author" content="Divisi Web Programming AMCC">
    <meta name="generator" content="Hugo 0.104.2">
    <title>Contoh Request GET</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">

    <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/checkout/">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body class="bg-light" style="font-family: 'DM Sans';">

    <div class="container">
        <main>
            <div class="py-5 text-center">
                <img class="d-block mx-auto mb-4" src="https://staging.amcc.or.id/images/amcc-logo.png" alt="logo" width="80">
                <h2>Formulir Pendataan Divisi</h2>
                <p class="lead">Lengkapi data anda dengan data yang sebenarnya.</p>
            </div>

            <div class="row g-5">
                <div class="col-md-7 mx-auto">
                    <h4 class="mb-3">Informasi Personal</h4>
                    <hr class="my-3">
                    <form class="needs-validation" method="GET" action="">
                        <div class="row g-4">
                            <div class="col-sm-12">
                                <label for="nama" class="form-label">Nama Lengkap</label>
                                <div class="input-group input-group-lg">
                                    <input type="text" class="form-control" name="nama">
                                </div>
                            </div>
                            <div class="col-12">
                                <label for="username" class="form-label">Username Instagram</label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text">@</span>
                                    <input type="text" class="form-control" name="user_instagram" required>
                                </div>
                            </div>
                            <div class="col-12">
                                <label for="email" class="form-label">Email</label>
                                <div class="input-group input-group-lg">
                                    <input type="email" class="form-control" name="email" placeholder="noreply@amcc.or.id">
                                </div>
                            </div>
                            <div class="col">
                                <label for="country" class="form-label">Divisi</label>
                                <div class="input-group input-group-lg">
                                    <select class="form-select" id="country" name="divisi" required>
                                        <option value="">Pilih Divisi Anda</option>
                                        <option>Backend Development</option>
                                        <option>Frontend Development</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <button class="w-100 btn btn-primary btn-lg mt-5" type="submit">Kirim Data</button>
                    </form>
                </div>
            </div>
        </main>

        <footer class="my-5 pt-5 text-muted text-center text-small">
            <p class="mb-1">&copy; 2024 Amikom Computer Club</p>
        </footer>
    </div>
</body>

</html>

Jika sudah, maka coba akses file tersebut di browser temen-temen, maka tampilannya akan seperti ini:

Jika temen-temen sudah berhasil untuk mengakses file tesebut, kita coba masuk ke inspect elemen guna melihat header methodnya, caranya temen-temen bisa klik kanan mouse → inspect element atau bagi yang menggunakan windows bisa menggunakan shortcut CTRL + SHIFT + C kemudian pilih tab Network, maka tampilannya akan seperti ini:

Langkah selanjutnya, temen-temen bisa masukkan data pada form Informasi personal lalu tekan submit, maka akan seperti ini:

Dari gambar diatas terlihat bahwa metode yang kita gunakan adalah GET disertai query string nya, disamping itu url pada browser juga akan berubah menjadi http://localhost/amcc-web-backend-2023/pertemuan6/get_data.php?nama=Muhammad+Ammar+Afif&user_instagram=amarafiif&email=amarafif%40amcc.or.id&divisi=Backend+Development

$_GET pada PHP

Jika sebelumnya kita mencoba untuk melakukan request get pada protokol HTTP, Bagaimana jika sekarang kita menyisipkan kode php untuk menampilkan yang di tangkap dari request method $_GET ? Silahkan tambahkan script ini di bawah pembungkus informasi pengguna pada kode get_data.php temen-temen:

<div class="alert alert-success" role="alert" style="<?php echo ($_SERVER["REQUEST_METHOD"] == "GET" && !empty($_GET)) ? '' : 'display: none;'; ?>">
    <?php
    // Memeriksa apakah terdapat data pada request method GET
    if ($_SERVER["REQUEST_METHOD"] == "GET" && !empty($_GET)) {

        // Mengambil data dari $_GET
        $nama = isset($_GET['nama']) ? $_GET['nama'] : '';
        $user_instagram = isset($_GET['user_instagram']) ? $_GET['user_instagram'] : '';
        $email = isset($_GET['email']) ? $_GET['email'] : '';
        $divisi = isset($_GET['divisi']) ? $_GET['divisi'] : '';

        // Menampilkan data dalam alert
        echo 'Data yang diterima:<br>';
        echo 'Nama: ' . $nama . '<br>';
        echo 'Username Instagram: ' . $user_instagram . '<br>';
        echo 'Email: ' . $email . '<br>';
        echo 'Divisi: ' . $divisi;
    }
    ?>
</div>

Jika temen-temen sudah menyisipkan kode tersebut, ketika kita menginputkan data dan mengirim requestnya, maka akan muncul ini sesuatu seperti gambar dibawah ini temen-temen. Kode PHP yang kita sisipkan akan menampilkan data yang diterima dari request method GET dalam alert dengan format yang sesuai. Jika tidak ada data yang diterima, maka alert tidak akan pernah muncul.

Dari apa yang telah kita pelajari mengenai GET diatas, bahwa benarnya ada nya kalau variabel $_GET pada PHP berbentuk associative array. Variabel ini bentuknya sama seperti variabel pada umumnya, bedanya $_GET ini merupakan variabel global sehingga bisa diakses dimana saja.

Karena bentuknya sama dengan yang lain, variabel ini dapat kita manipulasi sebagaimana kita memanipulasi variabel array lainnya.

Kelebihan dan Kekurangan

Terdapat beberapa kelebihan penggunaan metode GET, diantaranya adalah:

Simpel, dan data mudah diedit, misal untuk menuju halaman 5 dari suatu website, kita tinggal mengganti urlnya.
Halaman dapat dibookmark dan disimpan pada history browser sehingga mudah untuk diakses kembali.
Dapat kembali ke halaman sebelumnya dengan mudah (dengan mengklik tombol Back pada browser).
Dapat direfresh dengan mudah.
Dapat di distribusikan/dishare.

Meskipun banyak kelebihannya, penggunaan metode ini memiliki beberpa kelemahan yaitu:

Panjang data terbatas hanya 2kb — 8kb (tergantung browsernya), jika melebihi batas tersebut akan muncul pesan error 414 Request-URI Too Long, sehingga tidak dapat digunakan untuk mengirim data dalam jumlah besar.
Hanya dapat mengirim data jenis teks, jenis lainnya seperti: gambar, file zip, dll tidak dapat dikirim.
Karena data dikirim via URL, data tersebut mudah terekspose.

HTTP POST dan $_POST PHP

Istilah “POST”, banyak dari kita sudah sering kali kita mendegar kata-kata ini bukan, terutama dalam konteks posting sesuatu ke sosial media, dimana kita mengirimkan tulisan atau gambar untuk disimpan di server media sosial. Oke langsung aja kita bahas mengenai POST ini 🔥

Konsep “POST” juga terkait dengan protokol HTTP, dimana metode POST digunakan untuk mengirimkan data yang seringkali digunakan untuk menambah data di server.

Dalam protokol HTTP, metode POST dapat dikirim melalui query string atau body. Data yang dikirim melalui query string akan ditampilkan di URL, sedangkan yang dikirim melalui body tidak terlihat oleh pengguna.

Di PHP, data POST yang dikirim melalui query string disimpan dalam variabel $_GET, sedangkan yang dikirim melalui body disimpan dalam variabel $_POST.

Seperti $_GET, variabel $_POST juga merupakan array asosiatif dan bersifat global, yang berarti dapat diakses dari mana saja. Variabel ini juga dapat dimanipulasi seperti halnya variabel array lainnya. Nah untuk penggunaannya sendiri langsung kita coba praktekkan saja, silahkan buat buat file baru post_data.php dan salin kode ini lalu masukkan kedalam file yang sudah temen-temen buat barusan.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Latihan untuk melihat GET pada HTTP Header GET">
    <meta name="author" content="Divisi Web Programming AMCC">
    <meta name="generator" content="Hugo 0.104.2">
    <title>Contoh Request GET</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">

    <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/checkout/">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body class="bg-light" style="font-family: 'DM Sans';">

    <div class="container">
        <main>
            <div class="py-5 text-center">
                <img class="d-block mx-auto mb-4" src="https://staging.amcc.or.id/images/amcc-logo.png" alt="logo" width="80">
                <h2>Formulir Pendataan Divisi</h2>
                <p class="lead">Lengkapi data anda dengan data yang sebenarnya.</p>
            </div>

            <div class="row g-5">
                <div class="col-md-7 mx-auto">
                    <h4 class="mb-3">Informasi Personal</h4>
                    <div class="alert alert-success" role="alert" style="<?php echo ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_POST)) ? '' : 'display: none;'; ?>">
                        <?php
                        // Memeriksa apakah terdapat data pada request method POST
                        if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_POST)) {

                            // Mengambil data dari $_POST
                            $nama = isset($_POST['nama']) ? $_POST['nama'] : '';
                            $user_instagram = isset($_POST['user_instagram']) ? $_POST['user_instagram'] : '';
                            $email = isset($_POST['email']) ? $_POST['email'] : '';
                            $divisi = isset($_POST['divisi']) ? $_POST['divisi'] : '';

                            // Menampilkan data dalam alert
                            echo 'Data yang diterima:<br>';
                            echo 'Nama: ' . $nama . '<br>';
                            echo 'Username Instagram: https://instagram.com/' . $user_instagram . '<br>';
                            echo 'Email: ' . $email . '<br>';
                            echo 'Divisi: ' . $divisi;
                        }
                        ?>
                    </div>
                    <hr class="my-3">
                    <form class="needs-validation" method="POST" action="">
                        <div class="row g-4">
                            <div class="col-sm-12">
                                <label for="nama" class="form-label">Nama Lengkap</label>
                                <div class="input-group input-group-lg">
                                    <input type="text" class="form-control" name="nama">
                                </div>
                            </div>

                            <div class="col-12">
                                <label for="username" class="form-label">Username Instagram</label>
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text">@</span>
                                    <input type="text" class="form-control" name="user_instagram" required>
                                </div>
                            </div>

                            <div class="col-12">
                                <label for="email" class="form-label">Email</label>
                                <div class="input-group input-group-lg">
                                    <input type="email" class="form-control" name="email" placeholder="noreply@amcc.or.id">
                                </div>
                            </div>

                            <div class="col">
                                <label for="country" class="form-label">Divisi</label>
                                <div class="input-group input-group-lg">
                                    <select class="form-select" id="country" name="divisi" required>
                                        <option value="">Pilih Divisi Anda</option>
                                        <option>Backend Development</option>
                                        <option>Frontend Development</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <button class="w-100 btn btn-primary btn-lg mt-5" type="submit">Kirim Data</button>
                    </form>
                </div>
            </div>
        </main>

        <footer class="my-5 pt-5 text-muted text-center text-small">
            <p class="mb-1">&copy; 2024 Amikom Computer Club</p>
        </footer>
    </div>
</body>

</html>

Nah jika sudah langsung saja temen-temen coba eksekusi seperti sebelumnya, maka tampilannya akan seperti ini:

Dari gambar tersebut bisa dilihat bahwa request method yang tampil disini berupa POST dan juga URL nya tidak menampilkan data yang kita masukkan tadi. Jadi gitu ya temen-temen sekilas penggunaan request method POST.

Kelebihan dan kekurangan

Pengiriman data menggunakan metode POST memiliki beberapa kelebihan diantaranya:

Lebih aman dari pada metode GET karena data yang dikirim tidak terlihat, serta parameter yang dikirim tidak disimpan pada history browser/log browser.
Dapat mengirim data dalam jumlah besar.
Dapat mengirim berbagai jenis data seperti gambar, file, dll, tidak harus teks.

Meskipun terdapat kelebihan, penggunaan metode ini juga memiliki beberapa kelemahan, walaupun sebenarnya bukan kelemahan melainkan memang menjadi karakteristik dari metode ini:

Data tidak disimpan pada history browser.
Data tidak dapat dibookmark.
Karena dianggap sebagai data sensitif, maka ketika kita merefresh browser, akan muncul konfirmasi pengiriman ulang data, demikian juga ketika kita tekan tombol back.

HTTP Respon Status Code

HTTP status code adalah kode error yang ditampilkan oleh server mengenai status permintaan klien saat mengakses halaman web. Apabila browser menampilkannya, berarti ada masalah yang dialami oleh server asal saat mencoba memproses permintaan Anda.

Ada berbagai jenis kode error HTTP yang dikelompokkan menurut respons server terhadap permintaan klien, yang bisa menjadi isyarat penting untuk mengatasi masalah. Dengan memahami arti kode status server ini, temen-temen bisa menjaga performa website.

Nah di pertemuan ini juga, kita akan belajar arti HTTP status code beserta jenis-jenisnya.

Perlu diketahui temen-temen bahwa status code HTTP membantu pengguna web dan pengembang web untuk memahami apakah permintaan berhasil atau gagal.

Dan dalam hal terakhir, status code memberikan petunjuk tentang alasan kegagalan tersebut. Ini sangat penting dalam pengembangan web dan debugging, serta untuk memperbaiki masalah yang terkait dengan komunikasi antara klien dan server.

Session dan Cookies pada PHP

Sessions

Session adalah cara untuk menyimpan informasi (dalam variabel) yang bisa digunakan di berbagai halaman. Tanpa sesi, aplikasi web tidak akan dapat menyimpan informasi tentang pengguna dari satu halaman ke halaman lainnya. PHP membuat penggunaan session menjadi sangat sederhana.

Menggunakan session dalam PHP sangatlah penting untuk membuat aplikasi yang dinamis dan bisa menyimpan data pengguna. Dengan fungsi-fungsi yang telah disediakan PHP, kamu bisa dengan mudah memulai, menyimpan, mengakses, dan menghancurkan data session. Ingatlah untuk selalu memulai skrip kamu dengan session_start() sebelum melakukan operasi apapun pada session.

Oke, mungkin kita langsung coba menggunakan session ya. Silahkan temen-temen buat 3 file yaitu, login.php, dashboard.php, kemudian logout.php

login.php

<?php
session_start();

// Jika form login disubmit
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Periksa email dan password (di sini hanya contoh, Anda harus menggantinya dengan validasi sesuai kebutuhan)
    $name = $_POST['name'];
    $email = $_POST['email'];
    $password = $_POST['password'];

    // Contoh validasi, Anda harus menggantinya dengan validasi yang sesuai
    if ($email == 'user@amcc.or.id' && $password == 'user123') {
        // Set session
        $_SESSION['loggedIn'] = true;
        $_SESSION['email'] = $email;

        // Redirect ke halaman setelah login
        header('Location: dashboard.php');
        exit;
    } else {
        $error = "Email atau password tidak valid!";
    }
}
?>
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Pelatihan #6 Web Backend">
    <meta name="author" content="Divisi Web Programming AMCC">
    <title>Login Dashboard</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
    <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/checkout/">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body class="bg-light text-center" style="font-family: 'DM Sans';">
    <main class="form-signin col-md-3 mx-auto mt-5">
        <form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
            <img class="d-block mx-auto mb-4" src="https://staging.amcc.or.id/images/amcc-logo.png" alt="logo" width="80">
            <h1 class="h3 mb-4 fw-normal">Please Login Gengs</h1>
            <?php
            // Tampilkan pesan jika user belum login namun mengakses dashboard.php
            if (isset($_GET['login_required']) && $_GET['login_required'] === 'true') {
                echo '<div class="alert alert-danger" role="alert">
                        Anda harus login terlebih dahulu untuk mengakses dashboard.
                    </div>';
            }

            // Menampilkan pesan error jika data tidak valid
            if (isset($error)) {
                echo '<div class="alert alert-danger" role="alert">
                        ' . $error . '
                     </div>';
            }
            ?>
            <div class="form-floating mb-2">
                <input type="text" class="form-control" name="name" placeholder="User Biasa">
                <label for="name">Name</label>
            </div>
            <div class="form-floating mb-2">
                <input type="email" class="form-control" name="email" placeholder="user@amcc.or.id">
                <label for="email">Email address</label>
            </div>
            <div class="form-floating mb-3">
                <input type="password" class="form-control" name="password" placeholder="Password">
                <label for="password">Password</label>
            </div>
            <div class="checkbox mb-3 text-start">
                <label>
                    <input type="checkbox" value="remember-me"> Remember me
                </label>
            </div>
            <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>

        </form>
    </main>
    <footer class="my-5 pt-5 text-muted text-center text-small">
        <p class="mb-1">&copy; 2024 Amikom Computer Club</p>
    </footer>
</body>

</html>

Mari kita uraikan setiap script php yang ada pada kode login.php diatas:

session_start(): Ini memulai sesi PHP. Fungsi ini harus dipanggil di setiap halaman PHP yang menggunakan session.
if ($_SERVER["REQUEST_METHOD"] == "POST"): Ini adalah kondisi untuk mengecek apakah form telah disubmit menggunakan metode POST.
if ($email == 'user@amcc.or.id' && $password == 'user123'): Karena kita melakukannya tanpa menggunakan koneksi ke database. Di sini, kita melakukan validasi sederhana untuk email dan password. Jika email dan password cocok, sesi akan diset untuk menandakan bahwa pengguna telah login.
$_SESSION['loggedIn'] = true;: Ini adalah bagian di mana kita menetapkan bahwa pengguna telah login dengan menetapkan $_SESSION['loggedIn'] menjadi true.
header('Location: dashboard.php');: Jika login berhasil, pengguna akan diarahkan ke halaman dashboard.
$error = "Email atau password tidak valid!";: Jika email atau password tidak valid, sebuah pesan kesalahan disimpan dalam variabel $error.
htmlspecialchars($_SERVER["PHP_SELF"]): Ini digunakan untuk menghindari serangan XSS (Cross-Site Scripting) dengan mengonversi karakter khusus menjadi entitas HTML.
isset($_GET['login_required']) && $_GET['login_required'] === 'true': Ini adalah kondisi untuk mengecek apakah pengguna mencoba mengakses dashboard.php tanpa login.
echo '<div class="alert alert-danger" role="alert">...: Ini adalah cara untuk menampilkan pesan kesalahan atau pesan bahwa pengguna harus login terlebih dahulu sebelum mengakses dashboard. Pesan tersebut akan ditampilkan dalam elemen div dengan kelas alert-danger.
<input type="checkbox" value="remember-me"> Remember me: Ini adalah elemen checkbox "Remember me" di form login, tetapi belum diimplementasikan fungsinya.
echo $error: Ini adalah cara untuk menampilkan pesan kesalahan jika ada. Pesan kesalahan akan ditampilkan dalam elemen div dengan kelas alert-danger.

dashboard.php

<?php
session_start();

// Jika user belum login, redirect ke halaman login
if (!isset($_SESSION['loggedIn']) || $_SESSION['loggedIn'] !== true) {
    header('Location: login.php?login_required=true');
    exit;
}

// Jika tombol logout disubmit, destroy session dan redirect ke halaman login
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['logout'])) {
    session_destroy();
    header('Location: login.php');
    exit;
}
?>

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Pelatihan #6 Web Backend">
    <meta name="author" content="Divisi Web Programming AMCC">
    <title>Dashboard</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
    <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/checkout/">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body class="" style="font-family: 'DM Sans';">
    <main>
        <div class="container py-4">
            <header class="pb-3 mb-4 border-bottom">
                <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
                    <img class="m-3" src="https://staging.amcc.or.id/images/amcc-logo.png" alt="logo" width="50">
                    <span class="fs-4">Amikom Computer Club</span>
                </a>
            </header>
            <div class="p-5 mb-4 bg-light rounded-3">
                <div class="container-fluid py-5">
                    <h1 class="display-5 fw-bold">Selamat Datang, <?= $_SESSION['name'] ?></h1>
                    <p class="col-md-8 fs-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut ipsum unde officiis maiores rem mollitia fugiat enim nostrum adipisci iste?</p>
                    <form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
                        <button class="btn btn-primary btn-lg" type="submit" name="logout">Logout</button>
                    </form>
                </div>
            </div>
            <footer class="pt-3 mt-4 text-muted border-top">
                <p class="mb-1">&copy; 2024 Amikom Computer Club</p>
            </footer>
        </div>
    </main>
</body>

</html>

Nah sekarang kita bedah kodingan dari dashboard.php ini:

session_start(): Ini memulai sesi PHP. Fungsi ini harus dipanggil di setiap halaman PHP yang menggunakan session.
if (!isset($_SESSION['loggedIn']) || $_SESSION['loggedIn'] !== true): Ini adalah kondisi untuk memeriksa apakah pengguna telah login. Jika session loggedIn tidak ada atau tidak diatur ke true, maka pengguna akan diarahkan kembali ke halaman login dengan parameter login_required yang disetel ke true.
header('Location: login.php?login_required=true');: Jika pengguna belum login, maka akan dilakukan pengalihan ke halaman login dengan memberikan parameter login_required yang menandakan bahwa login diperlukan untuk mengakses dashboard.
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['logout'])): Ini adalah kondisi untuk memeriksa apakah tombol logout telah disubmit.
session_destroy(): Jika tombol logout disubmit, sesi akan dihancurkan, menghapus semua data session yang tersimpan.
header('Location: login.php'): Setelah session dihapus, pengguna diarahkan kembali ke halaman login.

Kode HTML di bawahnya adalah tampilan dashboard dengan menggunakan Bootstrap untuk stylingnya. Itu termasuk elemen-elemen seperti header, konten selamat datang, dan tombol logout.

Selain itu, pada bagian <?= $_SESSION['name'] ?>, digunakan untuk menampilkan nama pengguna yang telah login di halaman dashboard.

Bagaimana? Mudah dan menyenangkan bukan 😂 Oke kita lanjut kemateri yang terakhir pada pertemuan ini, Huhh akhirnyaa 😪

Cookies

Cookies merupakan cara sederhana untuk menyimpan data di sisi client dan bisa digunakan di dalam PHP. Cookies sangat berguna untuk berbagai hal, seperti menyimpan preferensi pengguna atau data login sehingga pengguna tidak perlu memasukkannya setiap kali mengunjungi situs web.

Cookies adalah file kecil yang disimpan di komputer pengguna oleh situs web yang dikunjungi. Cookies berisi informasi yang dapat dibaca oleh web server di masa mendatang. Informasi ini bisa berupa pengaturan, token sesi, atau data lain yang ingin diingat oleh situs web tentang pengguna.

Nah untuk mencobanya, silahkan temen-temen copy seluruh kode dibawah ini dan timpa pada pada file login.php yang sudah dibuat tadi:

<?php
session_start();

// Jika form login disubmit
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Periksa email dan password (di sini hanya contoh, Anda harus menggantinya dengan validasi sesuai kebutuhan)
    $name = $_POST['name'];
    $email = $_POST['email'];
    $password = $_POST['password'];

    // Contoh validasi, Anda harus menggantinya dengan validasi yang sesuai
    if ($email == 'user@amcc.or.id' && $password == 'user123') {
        // Set session
        $_SESSION['loggedIn'] = true;
        $_SESSION['email'] = $email;
        $_SESSION['name'] = $name;

        // Set cookie jika "Remember Me" dicentang
        if (isset($_POST['remember'])) {
            setcookie('remember_email', $email, time() + (86400 * 30), '/'); // Cookie berlaku selama 30 hari
        }

        // Redirect ke halaman setelah login
        header('Location: dashboard.php');
        exit;
    } else {
        $error = "Email atau password tidak valid!";
    }
}
?>
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Pelatihan #6 Web Backend">
    <meta name="author" content="Divisi Web Programming AMCC">
    <title>Login Dashboard</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
    <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/checkout/">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body class="bg-light text-center" style="font-family: 'DM Sans';">
    <main class="form-signin col-md-3 mx-auto mt-5">
        <form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
            <img class="d-block mx-auto mb-4" src="https://staging.amcc.or.id/images/amcc-logo.png" alt="logo" width="80">
            <h1 class="h3 mb-4 fw-normal">Please Login Gengs</h1>
            <?php
            // Tampilkan pesan jika user belum login namun mengakses dashboard.php
            if (isset($_GET['login_required']) && $_GET['login_required'] === 'true') {
                echo '<div class="alert alert-danger" role="alert">
                        Anda harus login terlebih dahulu untuk mengakses dashboard.
                    </div>';
            }

            // Menampilkan pesan error jika data tidak valid
            if (isset($error)) {
                echo '<div class="alert alert-danger" role="alert">
                        ' . $error . '
                     </div>';
            }
            ?>

            <!-- Tampilkan email dari cookie jika ada -->
            <?php
            $remembered_email = isset($_COOKIE['remember_email']) ? $_COOKIE['remember_email'] : '';
            ?>

            <div class="form-floating mb-2">
                <input type="text" class="form-control" name="name" placeholder="User Biasa">
                <label for="name">Name</label>
            </div>
            <div class="form-floating mb-2">
                <input type="email" class="form-control" name="email" placeholder="user@amcc.or.id" value="<?= isset($_COOKIE['remember_email']) ? $_COOKIE['remember_email'] : '' ?>">
                <label for="email">Email address</label>
            </div>
            <div class="form-floating mb-3">
                <input type="password" class="form-control" name="password" placeholder="Password">
                <label for="password">Password</label>
            </div>
            <div class="checkbox mb-3 text-start">
                <label>
                    <input type="checkbox" name="remember" value="remember-me"> Remember me
                </label>
            </div>
            <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>

        </form>
    </main>
    <footer class="my-5 pt-5 text-muted text-center text-small">
        <p class="mb-1">&copy; 2024 Amikom Computer Club</p>
    </footer>
</body>

</html>

Di dalam file login.php, kita menambahkan beberapa baris kode untuk mengimplementasikan cookie. Berikut adalah penjelasan untuk bagian yang ditambahkan:

if (isset($_POST['remember'])) { 
setcookie('remember_email', $email, time() + (86400 * 30), '/'); // Cookie berlaku selama 30 hari 
}

Ini adalah bagian di mana kita memeriksa apakah kotak centang “Remember Me” telah dicentang di form login.
Jika kotak centang tersebut dicentang, maka kita menggunakan fungsi setcookie() untuk menetapkan cookie dengan nama remember_email.
Cookie ini akan menyimpan email pengguna ($email) dan akan berlaku selama 30 hari (time() + (86400 * 30)).

Temen-temen bisa mengakses data yang yang disimpan di cookie, dalam kasus ini kita menyimpan data email ke cookie jika remember-me di centang. Temen-temen bisa lakukan ini: buka Inspect element → pilih tab Application → pilih Storage → lalu pilih Cookie.

Nah dari gambar diatas, kita berhasil melakukan untuk menyimpan data email ke dalam cookie. Dengan menggunakan cookie ini, pengguna dapat tetap login secara otomatis selama jangka waktu yang ditentukan, meskipun mereka menutup browser dan membuka kembali situs web.

Penutup

Yowwww Mamenn!! Udah selesai nih pembicaraan seru kita tentang apa ya, banyak banget soalnya 🤣 Dari belajar tentang HTTP Request Method, HTTP Status Code, GET, POST, Session, Cookie. Wawww banyak sekalee 🔥

Jangan lupa untuk terus belajar yaa, temen-temen.. Mungkin di AMCC kalian belum mendapatkan semua yang kalian inginkan, tapi kami mencoba untuk membantu mencari jalan buat temen-temen semua agar bisa menjadi Backend Engineer sejati, Wadaw sejati ga tuh 😂

Tetep semangat terus eksplorasi dunia Backend, karena di situlah letak keajaiban buat bikin website jadi makin asik! Sampai ketemu lagi di petualangan selanjutnya, yaa! Makasih udah bareng-bareng di sini, temen-temen! 🚀🎉