Langsung ke konten utama

Cara Membuat Web Browser Menjadi Lokal Web Server

Cara Membuat Browser Menjadi Lokal Web Server

Cara Membuat Browser Menjadi Lokal Web Server- 
Mau mulai mengembangkan web? Bikin dulu sebuah web development environment. Pakai XAMPP ataupun LAMP, bagus! Environment -nya cukup lengkap dalam menguji dan mengembangkan aplikasi web.
Eits tetapi hal tersebut juga dapat jadi kelemahan bagi seseorang yang akan memulai dasar-dasar pengembangan website. Kok bisa?
Pasalnya, XAMPP ataupun LAMP akan terasa begitu kompleks ketika kita hanya membutuhkan sebuah Web Server untuk menguji file HTML atau CSS yang kita buat.
Nah, artikel ini akan membantu kalian yang ingin memulai belajar dasar – dasar web development atau sering disebut web fundamentals dalam hal konfigurasi web development environmentyang benar benar simpel.
Sebelum itu, penting kalian ketahui bahwa tips ini hanya dapat dilakukan pada browser Chrome, karena tools yang kita akan gunakan adalah sebuah extensions yang disediakan oleh Chrome Web Store.

Web Server for Chrome Extension

Web server for Chrome merupakan sebuah ekstensi yang dapat membantu kita ketika membutuhkan sebuah fungsi layaknya sebuah web server. Extension ini dapat digunakan untuk merender halaman website dari html dan css, sharing berkas secara lokal atau untuk pengembangan web secara minor.

Download Web Server for Chrome

Untuk mengunduh Extension ini silakan Anda cek tautan berikut: https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb.
Kemudian klik tombol “Add to Chrome” di kanan atas.
Jika terdapat popup seperti ini, silakan pilih “Add app”.
Setelah aplikasi berhasil dipasang, ia akan muncul pada halaman chrome apps. Untuk menuju halaman chrome apps Anda dapat menuliskan url berikut pada address bar: chrome://apps/
Extension tersebut juga biasanya muncul pada halaman daftar aplikasi pada komputer Anda.

Download Web Server for Chrome

Untuk melakukan konfigurasi, cukup mudah kok. Bukalah extension Web Server yang telah terpasang pada Chrome.
Pada tampilan konfigurasi terdapat komponen button dan beberapa panel control yang dapat kita manfaatkan. Berikut adalah penjelasan dari komponen-komponen tersebut:
  1. Choose Folder. Button yang berfungsi untuk memilih folder yang akan dijadikan sebagai root folder Web Server
  2. Switch Toggle. Toggle ini berfungsi untuk mengaktifkan atau menonaktifkan service.
  3. Web Server URL(s). Link yang dapat dimanfaatkan untuk mengakses Web Server pada browser
  4. Options. Terdapat beberapa opsi yaitu :
  • Run In Background: Service tetap berjalan walaupun extension ditutup.
  • Start on Login: Service berjalan ketika komputer pertama kali dinyalakan.
  • Accessible on Local network: Service dapat dimanfaatkan oleh komputer yang berada pada satu jaringan lokal.
  • Prevent computer from sleeping: Mencegah komputer melakukan sleep agar service tetap berjalan.
  • Automatically show index.html: Otomatis merender index.html yang berada pada root folder atau pun sub root folder.
  1. Enter Port. Port yang digunakan untuk mengakses Service.

Langkah Penggunaan Web Server for Chrome

Untuk menjalankan Web Server kita perlu menetapkan sebuah root folder yang nantinya akan kita akses melalui web server. Buatlah sebuah folder, lalu buat sample html pada folder tersebut. Beri nama berkas itu dengan nama “index.html”.
Lalu pada halaman konfigurasi Web Server for Chrome, pilih folder yang akan dijadikan root folder.
Setelah memilih root folder, secara default Anda bisa menjalankan Web Server tersebut dengan menggunakan tautan http://127.0.0.1:8887.
Anda dapat mengatur port sesuai yang Anda inginkan dengan mengubah nilai pada Enter Port.
Tetapi disarankan untuk menggunakan port yang tidak sering digunakan oleh kebanyakan services.
Untuk dapat diakses pada jaringan lokal, Anda perlu aktifkan konfigurasi “Accessible on Local Network”.
Jangan lupa untuk melakukan pengaktifan ulang Service ketika konfigurasi diubah. Tujuannya, agar konfigurasi yang Anda tetapkan dapat langsung digunakan.

Port Forwarding

Untuk melakukan testing pada mobile device, service dari extension ini juga dapat dimanfaatkan oleh Android Emulator atau Android Device dengan memanfaatkan fitur Port Forwarding pada browser chrome.
Jika anda ingin mencobanya pada Android Device, Anda memerlukan kabel USB dan juga mengaktifkan Android Debugging pada Device Android Anda.
Untuk mengaktifkan Port Forwarding, silakan buka Google Chrome dan aktifkan developer tools pada browser. Atau tekan tombol kombinasi ctrl+shift+i. Setelah developer tools terbuka, pilih Customize and control Dev Tools → More Tools → Remote Devices.
Kemudian pilih tombol “Add rule” dan inputkan nilai port sesuai nilai yang digunakan pada konfigurasi Extension Web Server. Pada Local address inputkan nilai localhost:[port]. Contohnya jika kamu menggunakan port 8885, maka nilai yang diinput seperti gambar di bawah ini:
Setelah mengisi nilai port dan local address, lanjut tekan tombol Save. Dan yang terakhir centang nilai Port forwarding dan juga Discover USB devices. Sehingga konfigurasi akhirnya menjadi seperti ini:
Untuk mencobanya silakan buka Chrome Browser pada Android Emulator atau Android Device, kemudian arahkan pada url localhost:8885 (Port sesuaikan dengan nilai yang kamu gunakan). Maka halaman index.html pada root folder akan tampil pada browser.

Kesimpulan

Begitulah tips singkat yang bisa diberikan pada artikel kali ini, semoga dapat membantu terutama Anda yang baru akan memulai dasar-dasar pengembangan website. Dengan menggunakan Extensions ini kalian tidak harus repot-repot menginstall XAMPP atau LAMP untuk sekedar menggunakan fungsi Web Server

Komentar

Posting Komentar

This Message

Postingan populer dari blog ini

PEMAKAIAN FONT FONT KHUSUS UNTUK SIMBOL SIMBOL NOTASI ANGKA LAGU

  PEMAKAIAN FONT FONT KHUSUS UNTUK SIMBOL SIMBOL NOTASI ANGKA LAGU Bagaimana kalau di dalam applikasi pertitur notasi angka dibuatkan sistem teks dengan memakai font parnumstion untuk membuat simbol simbol pada notasi angka lagu Menggunakan font khusus seperti **Parnumstion** untuk membuat simbol-simbol pada notasi angka dalam aplikasi pertitur dapat menjadi solusi yang elegan untuk menampilkan simbol notasi secara visual menarik dan konsisten. Berikut adalah langkah-langkah umum yang dapat kamu lakukan untuk mengimplementasikan sistem teks dengan font ini dalam aplikasi Python, khususnya jika kamu menggunakan tkinter: ### Langkah-langkah Implementasi: 1. **Pastikan Font Tersedia:**    - Unduh dan instal font **Parnumstion** pada sistem yang akan menjalankan aplikasi. Font ini harus diinstal agar bisa digunakan oleh aplikasi tkinter.    - Kamu dapat menempatkan file font (biasanya dengan ekstensi `.ttf`) di folder aplikasi atau menginstalnya secara manual di sis...
Posting Komentar
Baca selengkapnya

Cara Membuat Config HTTP Custom

  Lompat ke konten Lompat ke sidebar Lompat ke footer KANGARIF.NET × Beranda   /  android   /  internet gratis Cara Membuat Config HTTP Custom Oleh bustami    12/13/2020    15 komentar Di artikel kali ini saya akan membagikan tutorial bagaimana  cara membuat config HTTP Custom . Daftar isi 1  Apa itu HTTP Custom ? 2  Apa itu Config HTTP Custom ? 3  Cara Membuat Config HTTP Custom 3.1  Membuat Config HTTP Custom dengan Metode SSL/SNI 4  Penutup Apa itu HTTP Custom ? HTTP Custom  adalah sebuah aplikasi Android yang saat ini banyak dipakai oleh para pecinta internet gratis (gretonger). Kepopuleran aplikasi ini bisa dibilang sebanding atau bahkan lebih bila dibandingkan dengan aplikasi sejenis yang lebih dulu populer, yaitu HTTP Injector. Saat ini HTTP Custom banyak dipakai untuk mengubah kuota internet tertentu dari operator seluler menjadi bisa digunakan untuk semua aplikasi. Seperti misalnya yang saat ini sed...
Posting Komentar
Baca selengkapnya

Error “ Unable To Locate Package ”

  CadeMedia Media Informasi Terbaru 2023 8 Cara Mengatasi “Tidak Dapat Menemukan Paket Termux” di HP Android TERAKHIR DIPERBARUI 16 SEPTEMBER 2023 Error “  Unable To Locate Package  ” adalah masalah yang sering dialami oleh pengguna Termux. Ini terjadi ketika Termux tidak dapat menemukan  paket  yang hendak diinstal. Salah satu contohnya ketika Anda mencoba menginstal  paket  seperti git. Termux adalah aplikasi terminal  emulator  dan  environment  berbasis Linux untuk perangkat Android. Sehingga pengguna dapat menjalankan perintah dan aplikasi Linux tanpa perlu akses  root  atau mengutak-atik sistem Android. Nah, arti dari  tidak dapat menemukan paket  adalah Termux tidak dapat menemukan lokasi atau keberadaan  paket  ingin Anda  install  . Pada artikel kali ini CadeMedia bahas tuntas, penyebab hingga cara mengatasi pesan  error  pada Termux yang sering muncul. Simak penjelasan di b...
Posting Komentar
Baca selengkapnya