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

Pemograman R Studio

  Metode Numerik Menggunakan R Pengantar Gambaran Isi Buku Cara Berkontribusi dalam Buku Ini Ucapan Terima Kasih Lisensi 1  Bahasa Pemrograman R 1.1  Sejarah R 1.2  Fitur dan Karakteristik R 1.3  Kelebihan dan Kekurangan R 1.4  RStudio 1.5  Menginstall R dan RStudio 1.6  Working Directory 1.6.1  Mengubah Lokasi Working Directory 1.6.2  Mengubah Lokasi Working Directory Default 1.7  Memasang dan Mengaktifkan Paket R 1.8  Fasilitas Help 1.8.1  Mencari Help dari Suatu Perintah Tertentu 1.8.2  General Help 1.8.3  Fasilitas Help Lainnya 1.9  Referensi 2  Kalkulasi Menggunakan R 2.1  Operator Aritmatik 2.2  Fungsi Aritmetik 2.3  Operator Relasi 2.4  Operator Logika 2.5  Memasukkan Nilai Kedalam Variabel 2.6  Tipe dan Struktur Data 2.7  Vektor 2.7.1  Membuat vektor 2.7.2  Missing Values 2.7.3  Subset Pada Vektor 2.7.4  Operasi Matematis Menggunakan Vektor ...
Posting Komentar
Baca selengkapnya

MIGRASI DATABASE DARI SQLite KE MySQL (Part-1)

  MIGRASI DATABASE DARI SQLite KE MySQL (Part-1) Pemakaian yang mana lebih baik dalam membuat database_musik di mysql atau Exel yang cell Cell pada tabel dilakukan operasi fungsi logika matematika. Untuk keperluan membuat database atau tabel yang memerlukan operasi logika atau matematika, seperti yang Anda sebutkan, MySQL jauh lebih baik dibandingkan Excel. Berikut adalah beberapa alasan mengapa MySQL lebih disarankan: 1. **Kapasitas dan Skalabilitas**: MySQL dapat menangani jumlah data yang jauh lebih besar daripada Excel. Ini penting jika Anda berencana untuk menyimpan banyak data atau melakukan operasi yang kompleks di atas data tersebut. 2. **Kekuatan dan Kinerja**: MySQL dirancang khusus untuk memproses query dan operasi basis data dengan cepat. Ini termasuk operasi matematika, logika, dan agregasi data yang umum dilakukan dalam aplikasi. 3. **Fleksibilitas Struktur**: Dalam MySQL, Anda dapat dengan mudah menentukan struktur tabel yang kompleks dan melakukan kueri yang lebih r...
Posting Komentar
Baca selengkapnya

Cara Menjadi Pengembang Front End – Keterampilan Front End Web Dev

  Menyumbangkan Belajar coding —  kurikulum 3.000 jam gratis 10 JUNI 2022 / #PENGEMBANGAN UJUNG DEPAN Bagaimana Menjadi Pengembang Front End – Keterampilan Front End Web Dev Joel Olawanle Beberapa profesional dengan bayaran tertinggi di dunia adalah pengembang front-end.  Mereka menggunakan pengetahuan dan bakat mereka untuk merancang situs web yang menarik dan ramah pengguna. Pengembang front-end tidak memerlukan gelar atau sertifikat sekolah untuk bekerja.  Sebaliknya, mereka harus memahami dasar-dasar pengembangan front-end, bahasa pemrograman, dan kerangka kerja pengembangan front-end. Dalam panduan ini, Anda akan belajar bagaimana menjadi pengembang front end dengan terlebih dahulu memahami apa yang dimaksud dengan pengembangan front end, keterampilan teknis dan soft skill yang diperlukan, bahasa dan kerangka kerja yang tersedia, dan beberapa langkah untuk memulai. Seorang pengembang front-end di Amerika Serikat dapat memperoleh rata-rata $86,178 per tahun, menu...
Posting Komentar
Baca selengkapnya