Membuat dasar sistem blokir sederhana (simulasi)

April 19, 2026

1. Buka file eksplorer lalu buat folder baru project kalian namanya terserah kalian ajalah

2. Setelah itu buka Visual Studio Code kalian

3. Lalu open folder tadi yang telah kalian buat

4. Lalu buat file html baru yang diberi nama blocked.html

Klik icon tersebut untuk buat file baru

(Gambar 1 : Icon untuk buat file baru)

Lalu isi kolom tersebut dengan blocked.html

(Gambar 2 : Kolom untuk mengisi nama file)

Setelah mengisi kolom tersebut dengan blocked.html, lalu klik enter

(Gambar 3 : Isi file tersebut dengan blocked.html)

Lalu isi file kosong

(Gambar 4 : Isi file kosong tersebut dengan kode program)

5. Setelah itu isi file tersebut dengan kode program seperti dibawah ini:

<!DOCTYPE html> <html> <head> <title>Smart Focus</title> </head> <body> <h1>Halaman Utama</h1>  <script type="module" src="root.js"></script> </body> </html>

(Gambar 5 : kode program blocked.html)

6. Lalu jalankan file html blocked.html tadi dengan cara menginstall ektensi code runner terlebih dahulu:

Instal Ekstensi: Buka view Extensions (Ctrl+Shift+X),

(Gambar 6 : Icon ekstension)

cari Code Runner, lalu klik Install.

(Gambar 7 : Ekstensi code runner)

Jalankan Kode: Buka file .js Anda, lalu klik tombol Play (Run Code) di pojok kanan atas, atau tekan Ctrl+Alt+N.

(Gambar 8 : Cara run code)

7. Jika sudah di install, buat file javascript baru yang bernama root.js :

Klik icon tersebut untuk buat file baru

(Gambar 9 : buat file baru)

Lalu isi kolom tersebut dengan root.js

(Gambar 11 : Kolom untuk mengisi nama file)

Setelah mengisi kolom tersebut dengan root.js, lalu klik enter

(Gambar 12 : Isi file tersebut dengan root.js)

Lalu isi file kosong dibawah ini :

(Gambar 13 : Isi file kosong tersebut dengan kode program)

8. Lalu isi file tersebut dengan kode program seperti dibawah ini:

const blockedSites = ["test.html"];

const currentURL = window.location.href;

blockedSites.forEach(site => {

    if (currentURL.includes(site)) {

        window.location.href = "blocked.html";

}

});

(Gambar 14 : Kode program root.js)

8. Buat file html yang bernama test.html :

Klik icon tersebut untuk buat file baru

(Gambar 15 : buat file baru)

Lalu isi kolom tersebut dengan test.html

(Gambar 16 : Kolom untuk mengisi nama file)

Setelah mengisi kolom tersebut dengan test.html, lalu klik enter

(Gambar 17 : Isi file tersebut dengan test.html)

9. Lalu isi file tersebut dengan kode program seperti kode program seperti ini :

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>test</title>

</head>

<body>

      <!-- Script di sini -->

</body>

</html>

(Gambar 18 : Kode program test.html)

9. Lalu buat file html yang bernama index.html :

Klik icon tersebut untuk buat file baru

(Gambar 15 : buat file baru)

Lalu isi kolom tersebut dengan test.html

(Gambar 16 : Kolom untuk mengisi nama file)

Setelah mengisi kolom tersebut dengan test.html, lalu klik enter

(Gambar 17 : Isi file tersebut dengan index.html)

10. Lalu isi file tersebut dengan kode program seperti dibawah ini :

<!DOCTYPE html>

<html>

<head>

  <title>Smart Focus</title>

</head>

<body>

  <h1>Halaman Utama</h1>

  <!-- Script di sini -->

</body>

</html>

(Gambar 18 : Kode index.html)

11. Lalu jalankan file index.html dengan cara :

Instal Ekstensi: Buka VS Code, klik ikon Extensions (kotak-kotak di sidebar kiri),
(Gambar 19 : Icon Ekstension)
Cari "Live Server" karya Ritwick Dey, dan klik Install. (Gambar 20 : Ekstensi live server)
Jalankan: Buka file .html Anda. Klik kanan pada kode, lalu pilih Open with Live Server.(Gambar 21 : Open with Live Server)
Fitur: Browser akan otomatis terbuka dan reload setiap kali Anda menyimpan perubahan (Ctrl+S)

12. Lalu kalian akan diarahkan ke halaman normal sebelum redirect

(Gambar 22 : Tampilan halaman normal sebelum redirect)

13. Lalu kalian mencoba mengetik http://127.0.0.1:5500/test.html

(Gambar 23 : URL test.html)

14. Selanjutnya kalian akan dialihkan ke halaman yang diblokir

(Gambar 24 : Tampilan halaman blocked setelah sistem mendeteksi URL terblokir)

15. Cara deploy ke github :

16. Buka github kalian lalu klik profil kalian

17. Setelah itu pilih organization

18. Lalu pilih New organization

19. Lalu pilih yang free

20. Lalu klik yang create a free organization

21. Lalu isi lah data di tersebut, setelah itu klik next

Lalu pilih skip this step

Lalu plih repository

Lalu klik new repository

Lalu isi data, dan menjadi public jangan private, lalu create repository

Lalu upload atau create file-file nya

Setelah ada file-file, lalu masuk ke settings

Lalu pilih pages

Lalu ubah menjadi main

Setelah itu klik save

Lalu klik visit site

Selanjutnya jika kamu ingin buat home page, maka buat repository baru harus sesuai dengan nama website mu yang awal, misal home page mu "homepage.github.io" lalu untuk tampilan web pertama menjadi "homepage.github.io/websitepertama"

contoh home page